@import "https://fonts.googleapis.com/css2?family=TikTok+Sans:opsz,wght@12..36,300..900&display=swap";
:root{
	--light-hex:#fefefe;
	--light-rgb:rgb(254,254,254);
	--light-bold-hex:#ffffff;
	--light-bold-rgb:rgb(255,255,255);
	--light-soft-hex:#efefef;
	--light-soft-rgb:rgb(239,239,239);
	
	--grey-hex:#262626;
	--grey-rgb:rgb(38,38,38);
	--grey-bold-hex:#111111;
	--grey-bold-rgb:rgb(17,17,17);
	--grey-soft-hex:#222222;
	--grey-soft-rgb:rgb(34,34,34);
	
	--red-hex:#F84436;
	--red-rgb:rgb(248,68,54);
	--yellow-hex:#FF9800;
	--yellow-rgb:rgb(255,152,0);
	--green-hex:#4CAF50;
	--green-rgb:rgb(76,175,80);
	--blue-hex:#2196F3;
	--blue-rgb:rgb(33,150,243);
	--purple-hex:#893BC3;
	--purple-rgb:rgb(137,59,195);
	--pink-hex:#F638DF;
	--pink-rgb:rgb(246,56,223);	
	
	--theme-color: var(--blue-hex);	
}
[data-bs-theme="red-dark"], [data-bs-theme="red-light"]{ --theme-color: var(--red-hex); }
[data-bs-theme="yellow-dark"], [data-bs-theme="yellow-light"]{ --theme-color: var(--yellow-hex); }
[data-bs-theme="green-dark"], [data-bs-theme="green-light"]{ --theme-color: var(--green-hex); }
[data-bs-theme="blue-dark"], [data-bs-theme="blue-light"]{ --theme-color: var(--blue-hex); }	
[data-bs-theme="purple-dark"], [data-bs-theme="purple-light"]{ --theme-color: var(--purple-hex); }	
[data-bs-theme="pink-dark"], [data-bs-theme="pink-light"]{ --theme-color: var(--pink-hex); }	

:root{
	--font-size-1:24px;
	--font-size-2:16px;
	--font-size-3:22px;
	--font-size-4:20px;
	--font-size-5:19px;
	--font-size-6:18px;
	--font-size-7:17px;
	--font-size-8:16px;
	--font-size-9:15px;
	--font-size-10:14px;
	--font-size-11:13px;
	--font-size-12:12px;
	--font-size-13:11px;
	
	--dark-color:var(--grey-hex);
	--dark-light: var(--grey-hex);
	--light-color:var(--light-hex);
	--light-dark: var(--light-hex);
	--color-dark: var(--theme-color);
	--color-light: var(--theme-color);
	--soft-dark-light: var(--grey-soft-hex);
	--bold-dark-light: var(--grey-bold-hex);
	--soft-light-dark: var(--light-soft-hex);
	--bold-light-dark: var(--light-bold-hex);
	
	--bg-body-color:var(--light-bold-hex);
	--bg-card-color:var(--light-soft-hex);
	--line-info:var(--dark-light);
	--bg-footer:var(--grey-hex);
	--font-color-2:var(--bs-gray-700);
}

[data-bs-theme="red-dark"], [data-bs-theme="yellow-dark"], [data-bs-theme="green-dark"], 
[data-bs-theme="blue-dark"], [data-bs-theme="purple-dark"], [data-bs-theme="pink-dark"],
[data-bs-theme="dark"]{
	--dark-color:var(--theme-color);
	--dark-light: var(--light-hex);
	--light-color:var(--theme-color);
	--light-dark: var(--grey-hex);
	--color-dark: var(--grey-hex);
	--color-light: var(--light-hex);
	--soft-dark-light: var(--light-soft-hex);
	--bold-dark-light: var(--light-bold-hex);
	--soft-light-dark: var(--grey-soft-hex);
	--bold-light-dark: var(--grey-bold-hex);	
	
	--bg-body-color:var(--grey-bold-hex);
	--bg-card-color:var(--grey-soft-hex);
	--line-info:var(--dark-light);
	--bg-footer:var(--grey-hex);
	--font-color-2:var(--bs-gray-100);
}


body{font-family:'TikTok Sans',sans-serif,Tahoma,Geneva,Verdana;background-color:var(--bg-body-color);transition:all .3s ease;line-height:1.6;font-size:var(--font-size-7)}
h1, .h1{font-size:var(--font-size-1)}
h2, .h2{font-size:var(--font-size-2)}
h3, .h3{font-size:var(--font-size-3)}
h4, .h4{font-size:var(--font-size-4)}
h5, .h5{font-size:var(--font-size-5)}
h6, .h6{font-size:var(--font-size-6)}
p, .p{font-size:var(--font-size-8)}
.tag{font-size:var(--font-size-7);}
header{background:var(--color-dark);position:relative;overflow:hidden;height:calc(100vh - 50px);}
header h1, header h2{color:var(--dark-light)}
header .btn{background:var(--dark-color); color:var(--light-dark)}
header .btn:hover{background:var(--dark-light); color:var(--color-dark)}
footer{background:var(--grey-soft-hex); border-top:1px solid var(--grey-rgb); color:var(--light-soft-hex)}

*{transition:color .3s ease,background-color .3s ease,border-color .3s ease}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--light-dark)}
::-webkit-scrollbar-thumb{background:var(--theme-color);border-radius:2px}
::-webkit-scrollbar-thumb:hover{background:var(--dark-light)}

.text-bg-primary, .text-bg-secondary, .text-bg-danger, 
.text-bg-warning, .text-bg-success, .text-bg-info, .text-bg-dark, 
.text-bg-white{background:var(--soft-dark-light) !important; color:var(--soft-light-dark) !important;}

.text-theme{color:var(--theme-color)}
.text-primary, .text-secondary, .text-danger {color:var(--bold-dark-light) !important;}
.text-warning, .text-success, .text-info {color:var(--dark-light) !important;}
.text-dark, .text-white{color:var(--soft-dark-light) !important;}

.print-only{display:none !important;}

.loading-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:#fff;display:flex;align-items:center;justify-content:center;z-index:9999;backdrop-filter:blur(10px)}
.loading-container{text-align:center;max-width:400px;padding:2rem}
.loading-logo{font-size:4rem;margin-bottom:1rem;animation:loadingPulse 2s ease-in-out infinite;filter:drop-shadow(0 0 20px var(--shadow-color))}
.loading-title{font-size:2rem;font-weight:700;color:var(--text-secondary);margin-bottom:.5rem;text-shadow:0 0 10px var(--shadow-color)}
.loading-subtitle{color:var(--text-muted);margin-bottom:2rem;font-size:1rem}
.loading-progress-wrapper{margin-bottom:2rem}
.loading-progress{width:100%;height:8px;background:var(--bg-dark);border-radius:4px;overflow:hidden;border:2px solid var(--border-color);margin-bottom:.5rem}
.loading-bar{height:100%;background:linear-gradient(90deg,var(--bs-primary),var(--bs-secondary));width:0;transition:width .3s ease;border-radius:2px}
.loading-percentage{color:var(--text-secondary);font-weight:600;font-size:.9rem}
.loading-steps{display:flex;flex-direction:column;gap:.5rem;margin-bottom:2rem}
.loading-step{display:flex;align-items:center;gap:.5rem;color:var(--text-muted);font-size:.9rem;opacity:.5;transition:all .3s ease}
.loading-step.active{color:var(--text-secondary);opacity:1}
.loading-step.completed{color:var(--bs-primary);opacity:1}

.menubar{background:var(--dark-color)}
.menubar .btn{background:var(--color-light); color:var(--light-dark)}
.menubar .btn:hover{background:var(--light-dark);  color:var(--dark-light)}
.menubar .btn-active{background:var(--light-dark);  color:var(--dark-light)}

.profile-photo{border:4px solid #ffffff4d;transition:all .3s ease;box-shadow:0 4px 20px #0003}
.profile-photo:hover{transform:scale(1.05) rotate(2deg);border-color:#fff9}

.section-title{margin-bottom:1rem;border-bottom:2px solid var(--dark-light);padding-bottom:.5rem;color:var(--dark-light);font-weight:600;position:relative}
.section-title::after{content:'';position:absolute;bottom:-2px;left:0;width:50px;height:2px;background:var(--theme-color);transition:width .3s ease}
.section-title:hover::after{width:100px}
.section-info{color:var(--dark-light);}
.tag{margin:2px;transition:all .2s ease;cursor:pointer}
.tag:hover{transform:scale(1.05);box-shadow:0 2px 4px #0003}
.list-group-item{border:none!important;border-bottom:1px solid var(--bs-border-color)!important;transition:all .3s ease;margin-bottom:var(--bs-gutter-x);padding:1rem;border-radius:8px!important;background:var(--bg-card-color)}
.list-group-item:hover{background-color:var(--bs-secondary-bg);transform:translateX(5px);box-shadow:0 4px 12px #0000001a;border-left:4px solid var(--line-info)!important}

.btn{transition:all .3s ease;border-radius:8px;font-weight:500}
.btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}
.btn:active{transform:translateY(0)}
.btn:focus{box-shadow:0 0 0 .2rem rgba(var(--bs-primary-rgb),0.25)}
.btn-group .btn{font-weight:600;min-width:5px}
.list-group-item:focus-within{outline:2px solid var(--bs-primary);outline-offset:2px}

.language-loading{pointer-events:none;opacity:.6}
.language-loading .spinner-border-sm{width:1rem;height:1rem}


.fade-in{animation:fadeIn .6s ease-in}
@keyframes fadeIn {
	from{opacity:0;transform:translateY(30px)}
	to{opacity:1;transform:translateY(0)}
}
@media (max-width: 768px) {
	header{padding:2rem 0!important;height:calc(100vh - 70px)}
	.profile-photo{width:120px!important;height:120px!important}
	.section-title{font-size:1.3rem}
	.d-flex.justify-content-between{flex-direction:column;gap:1rem}
	.btn-group{order:-1;align-self:flex-start}
	.list-group-item{padding:.75rem}
	.loading-content h4{font-size:1.2rem}
	.loading-content p{font-size:.9rem}
}
@media (max-width: 576px) {
	header{height:calc(100vh - 100px)}
	.container{padding-left:1rem;padding-right:1rem}
	.btn-sm{font-size:.8rem;padding:.25rem .5rem}
}
@media (max-width: 576px) {
	body{font-size:var(--font-size-12)}
	h1, .h1{font-size:var(--font-size-6)}
	h2, .h2{font-size:var(--font-size-7)}
	h3, .h3{font-size:var(--font-size-8)}
	h4, .h4{font-size:var(--font-size-9)}
	h5, .h5{font-size:var(--font-size-10)}
	h6, .h6{font-size:var(--font-size-11)}
	p, .p{font-size:var(--font-size-13)}
	.tag{font-size:var(--font-size-14);}
	.list-group-item{margin-bottom:calc(var(--bs-gutter-x) * .5);}
}

@media print {
    * {
        -webkit-print-color-adjust: exact !important;
        color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    
    body {
        font-size: 10pt !important;
        line-height: 1.4 !important;
        color: #000 !important;
        background: white !important;
    }
	
    header {
		background: transparent !important;
		height:auto !important;
		padding: 0px !important;
		margin: 0px !important;
	}
	
	body{font-size:var(--font-size-12)}
	h1, .h1{font-size:var(--font-size-6)}
	h2, .h2{font-size:var(--font-size-7)}
	h3, .h3{font-size:var(--font-size-8)}
	h4, .h4{font-size:var(--font-size-9)}
	h5, .h5{font-size:var(--font-size-10)}
	h6, .h6{font-size:var(--font-size-11)}
	p, .p{font-size:var(--font-size-13)}
	.tag{font-size:var(--font-size-14);}
	
	footer{
		display:none;
	}
	
	.text-primary, .text-secondary, .text-danger,
	.text-warning, .text-success, .text-info,
	.text-dark, .text-white{color:var(--grey-hex) !important;}
	
	[data-aos^=fade][data-aos^=fade] {
		opacity: 1 !important;
	}
	
    .container {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 10px !important;
    }
	
	/* Pastikan semua section tampil */
    .section {
        page-break-inside: avoid;
        margin-bottom: 10px !important;
        display: block !important;
        visibility: visible !important;
    }
	
	.section-title{border-bottom:2px solid var(--grey-hex); color:var(--grey-hex);}
	.section-title::after{background:var(--theme-color);}
	.section-info{color:var(--grey-hex);}
    
    /* Hide elements yang tidak perlu saat print */
    .no-print {
        display: none !important;
    }
	
	/* Show elements yang perlu saat print */
	.print-only{
		display:inherit !important;
	}
	
	.list-group-item{
		border-radius: 0px !important;
		background: transparent !important;
		box-shadow: none !important;
		border: 0px !important;
		border-bottom: 1px dashed #cccccc !important;
		padding: 10px 5px !important;
		margin: 0px !important;
		margin-bottom: 0px !important;
	}
    
    /* Ensure content is visible */
    .skill-item,
    .education-item,
    .work-item {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Fix untuk background dan border */
    .tag {
        border: 1px solid var(--grey-soft-hex) !important;
        background: var(--light-bold-hex) !important;
        color: var(--grey-soft-hex) !important;
    }
}