:root{--bg:#f0f4f8;--surface:#ffffff;--surface-glass:rgba(255,255,255,0.72);--text:#1a2332;--muted:#5a6a7a;--border:#e0e7ef;--accent:#2563eb;--accent-light:#dbeafe;--accent-dark:#1d4ed8;--warm:#f59e0b}
.dark{--bg:#0c1222;--surface:#1a2744;--surface-glass:rgba(26,39,68,0.8);--text:#e8edf5;--muted:#8a9bb5;--border:#2a3f5f;--accent:#60a5fa;--accent-light:#1e3a5f;--accent-dark:#93c5fd;--warm:#fbbf24}
*{box-sizing:border-box}
body{margin:0;font-family:'Libre Franklin',sans-serif;background:var(--bg);color:var(--text);transition:background .4s,color .4s;min-height:100vh}
.heading-display{font-family:'Playfair Display',serif;font-weight:800;letter-spacing:-0.02em}
.surface-card{background:var(--surface-glass);backdrop-filter:blur(12px);border:1px solid var(--border)}
.card-hover{transition:transform .25s,box-shadow .25s}.card-hover:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(0,0,0,0.12)}
.dark .card-hover:hover{box-shadow:0 20px 50px rgba(0,0,0,0.4)}
.modal-overlay{background:rgba(0,0,0,0.5);backdrop-filter:blur(8px)}
.btn-primary{background:var(--accent);color:#fff;border:none;transition:background .2s,transform .1s;cursor:pointer}.btn-primary:hover{background:var(--accent-dark);transform:scale(1.02)}
.input-field{background:var(--bg);color:var(--text);border:1px solid var(--border);transition:border-color .2s}.input-field:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light)}

.category-icon{
    width: 100px;
    height: 80px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}
/*Anda juga bisa mengubah ukurannya:
32px → kecil
48px → sedang
64px → seperti icon aplikasi
96px → besar
*/
/* HELP */
.help-list{list-style:none;padding:0;margin:0;}
.help-list li{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08);line-height:1.6;}
.help-list li:last-child{border-bottom:none;}


.hero-gradient{background:linear-gradient(135deg,rgba(37,99,235,0.15),rgba(245,158,11,0.10))}.dark .hero-gradient{background:linear-gradient(135deg,rgba(96,165,250,0.18),rgba(251,191,36,0.08))}
/*Zoom in 
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.fade-up{animation:fadeUp .5s ease forwards}
/*gambar bergerak dari kanan ke kiri
@keyframes slideBackground{0%{transform:translateX(5%) scale(1.10);}100%{transform:translateX(-5%) scale(1.10);}}
/* kanan → kiri + zoom (lebih sinematik) */
@keyframes slideBackground{0%{transform:translateX(10%)scale(1);}50%{transform:translateX(0)scale(1.08);}100%{transform:translateX(-10%)scale(1.15);}}
/*seperti video drone
@keyframes slideBackground{0%{transform:translate(8%,0)scale(1.25);}100%{transform:translate(-8%,0)scale(1.25);}}
*/

.tab-active{border-bottom:3px solid var(--accent);color:var(--accent);font-weight:700}
.tab-btn{padding:0.5rem 1rem;cursor:pointer;border-bottom:3px solid transparent;transition:all .2s;background:none;color:var(--muted);font-weight:600}
.rank-bronze{background:linear-gradient(135deg,#cd7f32,#a0522d)}.rank-silver{background:linear-gradient(135deg,#c0c0c0,#808080)}.rank-gold{background:linear-gradient(135deg,#ffd700,#daa520)}.rank-diamond{background:linear-gradient(135deg,#b9f2ff,#4fc3f7)}

.hero{position: relative;height: 50vh;min-height: 350px;max-height: 500px;overflow: hidden;}

.hero-slider{position:absolute;inset:0;}
.slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 2s ease;transform:scale(1);animation:zoom 12s linear infinite;}
.slide.active{opacity:1;}

.slide:nth-child(1){background-image:url(images/hero001.jpg);}
.slide:nth-child(2){background-image:url(images/hero002.jpg);}
.slide:nth-child(3){background-image:url(images/hero003.jpg);}
.slide:nth-child(4){background-image:url(images/hero004.jpg);}
.slide:nth-child(5){background-image:url(images/hero005.jpg);}
.slide:nth-child(6){background-image:url(images/hero006.jpg);}
.slide:nth-child(7){background-image:url(images/hero007.jpg);}
.slide:nth-child(8){background-image:url(images/hero008.jpg);}
.slide:nth-child(9){background-image:url(images/hero009.jpg);}
.slide:nth-child(10){background-image:url(images/hero010.jpg);}
.slide:nth-child(11){background-image:url(images/hero011.jpg);}
.slide:nth-child(12){background-image:url(images/hero012.jpg);}
.slide:nth-child(13){background-image:url(images/hero013.jpg);}
.slide:nth-child(14){background-image:url(images/hero014.jpg);}
.slide:nth-child(15){background-image:url(images/hero015.jpg);}
.slide:nth-child(16){background-image:url(images/hero016.jpg);}
.slide:nth-child(17){background-image:url(images/hero017.jpg);}
.slide:nth-child(18){background-image:url(images/hero018.jpg);}
.slide:nth-child(19){background-image:url(images/hero019.jpg);}
.slide:nth-child(20){background-image:url(images/hero020.jpg);}
.slide:nth-child(21){background-image:url(images/hero021.jpg);}
.slide:nth-child(22){background-image:url(images/hero022.jpg);}
.slide:nth-child(23){background-image:url(images/hero023.jpg);}
.slide:nth-child(24){background-image:url(images/hero024.jpg);}
.slide:nth-child(25){background-image:url(images/hero025.jpg);}
.overlay{position:absolute;inset:0;background:rgba(0,0,0,.45);}
.hero-content{position:relative;z-index:10;height:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;color:white;text-align:center;}
/* Tulisan Unjuk Kerja dan Portofolio digital */
.hero-content h1{font-size: clamp(2rem, 4vw, 3.5rem);font-weight: 800;text-align: center;}
@keyframes zoom{from{transform:scale(1);}to{transform:scale(1.15);}}

.dashboard-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:18px;margin-top:20px;} 
.stat-box{background:var(--card);padding:20px;border-radius:18px;text-align:center;box-shadow:0 10px 25px rgba(0,0,0,.08);transition:.3s;}
.stat-box:hover{transform:translateY(-6px);}
.stat-box h2{font-size:32px;margin:8px 0;color:#0d6efd;}
.stat-box p{margin:0;font-weight:600;}

/* utilities dasar yang dipakai markup */
.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}
.inset-0{inset:0}.right-4{right:1rem}.top-0{top:0}.top-4{top:1rem}.right-3{right:.75rem}.top-3{top:.75rem}
.z-40{z-index:40}.z-50{z-index:50}.col-span-full{grid-column:1/-1}
.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:.25rem}.mb-1\.5{margin-bottom:.375rem}
.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-2{margin-bottom:.5rem}
.mt-1{margin-top:.25rem}.mt-1\.5{margin-top:.375rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-5{margin-top:1.25rem}
.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none!important}
.aspect-video{aspect-ratio:16/9}.h-full{height:100%}.min-h-screen{min-height:100vh}.w-full{width:100%}
.min-w-\[200px\]{min-width:200px}.max-w-7xl{max-width:80rem}.max-w-lg{max-width:32rem}.max-w-md{max-width:28rem}
.flex-1{flex:1 1 0%}.cursor-pointer{cursor:pointer}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}
.gap-1{gap:.25rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-2{gap:.5rem}
.space-y-3>*+*{margin-top:.75rem}.space-y-4>*+*{margin-top:1rem}
.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-full{border-radius:9999px}.rounded-xl{border-radius:.75rem}
.border{border-width:1px;border-style:solid;border-color:var(--border)}.border-b{border-bottom-width:1px;border-bottom-style:solid;border-color:var(--border)}
.object-cover{object-fit:cover}
.p-1\.5{padding:.375rem}.p-2\.5{padding:.625rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-7{padding:1.75rem}
.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}
.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}
.py-20{padding-top:5rem;padding-bottom:5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}
.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-8{padding-top:2rem;padding-bottom:2rem}
.px-2\.5{padding-left:.625rem;padding-right:.625rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}
.pb-16{padding-bottom:4rem}.pb-2{padding-bottom:.5rem}.pb-4{padding-bottom:1rem}.pt-6{padding-top:1.5rem}.pt-8{padding-top:2rem}
.text-center{text-align:center}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}
.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}
.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}
.uppercase{text-transform:uppercase}.leading-relaxed{line-height:1.625}.tracking-tight{letter-spacing:-.025em}.tracking-widest{letter-spacing:.1em}
.text-gray-800{color:#1f2937}.text-red-500{color:#ef4444}.text-white{color:#fff}.text-yellow-500{color:#eab308}
.accent-blue-600{accent-color:#2563eb}.opacity-70{opacity:.7}
.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}
button,input,select,textarea{font-family:inherit;font-size:100%}
.hover\:bg-black\/10:hover{background-color:rgba(0,0,0,.1)}.hover\:bg-black\/5:hover{background-color:rgba(0,0,0,.05)}
.hover\:underline:hover{text-decoration:underline}
@media (min-width:640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:768px){.md\:h-72{height:18rem}}
@media (min-width:1024px){.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1280px){.xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.h-56{height:14rem}

#loading-banner{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;padding:8px 18px;border-radius:999px;font-size:13px;font-weight:600;z-index:60;box-shadow:0 8px 20px rgba(0,0,0,.25)}
#offline-banner{position:fixed;top:0;left:0;right:0;background:var(--warm);color:#1a2332;text-align:center;font-size:13px;font-weight:700;padding:6px;z-index:70}

#backToTop{
    position:fixed;
    right:25px;
    bottom:25px;
    width:55px;
    height:55px;
    border:none;
    border-radius:50%;
    background:linear-gradient(135deg,#2563eb,#1d4ed8);
    color:white;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:22px;
    cursor:pointer;
   opacity:0;
   visibility:hidden;
   transition:.35s;
   z-index:9999;
   box-shadow:0 10px 25px rgba(0,0,0,.25);}
#backToTop.show{opacity:1;visibility:visible;}
#backToTop:hover{transform:translateY(-6px);}

#histats_counter{display:flex;justify-content:center;align-items:center;margin:20px auto;}

/* ==========================================================
   FOOTER
========================================================== 
footer{
    background: var(--surface, #1f2937);
    color: var(--text, #ffffff);
    border-top: 1px solid rgba(255,255,255,.08);}
footer h5{
    color: var(--text, #ffffff);
    font-weight:700;
    margin-bottom:1rem;}
footer p{
    color: var(--muted, #cbd5e1);
    line-height:1.8;
    font-size:.95rem;}
footer ul{
    padding-left:0;
    margin-bottom:0;}
footer ul li{
    margin-bottom:.5rem;}
footer a{
    color: var(--muted, #cbd5e1);
    transition:.3s;}
footer a:hover{
    color:#38bdf8;
    text-decoration:none;
    padding-left:5px;}
footer hr{
    opacity:.15;
    margin:2rem 0 1rem;}
footer .bi{
    margin-right:6px;
    color:#38bdf8;}
footer .text-center{
    font-size:.9rem;
    color:var(--muted, #cbd5e1);}
*/

/*==========================
FOOTER
==========================*/
.footer{
background:var(--card);
border-top:1px solid var(--border);
margin-top:80px;
}

.footer h4,
.footer h5{
font-weight:700;
margin-bottom:15px;
}

.footer p,
.footer li,
.footer a{
color:var(--text2);
line-height:1.8;
transition:.3s;
}

.footer a:hover{
color:var(--primary);
}

.footer hr{
border-color:var(--border);
}

/* ===========================
   Tampilan HP
=========================== */
@media (max-width:768px){
.dashboard-stats{grid-template-columns:repeat(2,1fr);gap:10px;}
.stat-box{padding:12px;border-radius:12px;}
.stat-box h2{font-size:22px;margin:5px 0;}
.stat-box p{font-size:12px;}
.stat-box{transition:.25s;}
.stat-box:hover{transform:translateY(-5px) scale(1.03);}}