html,body{height:100%;margin:0;font-family:'Poppins',sans-serif}
*{box-sizing:border-box}

.glass{
background:rgba(255,255,255,.09);
backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,.15);
box-shadow:
0 15px 40px rgba(0,0,0,.18),
inset 0 1px rgba(255,255,255,.08);
}

.glass-white{background:rgba(255,255,255,.85);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.5)}
@keyframes fadeUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes countUp{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
@keyframes slideRight{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.anim-fade-up{animation:fadeUp .8s ease both}
.anim-fade-in{animation:fadeIn .6s ease both}
.anim-slide-right{animation:slideRight .7s ease both}
.anim-float{animation:float 3s ease-in-out infinite}
.delay-1{animation-delay:.1s}.delay-2{animation-delay:.2s}.delay-3{animation-delay:.3s}.delay-4{animation-delay:.4s}.delay-5{animation-delay:.5s}.delay-6{animation-delay:.6s}
.shimmer-line{background:linear-gradient(90deg,#d4a853 0%,#f0d68a 50%,#d4a853 100%);background-size:200% auto;animation:shimmer 3s linear infinite;height:3px;border-radius:2px}
.card-hover{transition:all .4s cubic-bezier(.4,0,.2,1)}
.card-hover:hover{transform:translateY(-8px);box-shadow:0 20px 60px rgba(10,22,40,.18)}
.nav-link{position:relative;transition:color .3s}
.nav-link::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:linear-gradient(90deg,#d4a853,#f0d68a);transition:width .3s;border-radius:1px}
.nav-link:hover::after,.nav-link.active::after{width:100%}
.gradient-text{background:linear-gradient(135deg,#d4a853,#f0d68a,#d4a853);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

.hero-gradient{
background:
radial-gradient(circle at top right,
rgba(212,168,83,.18),
transparent 28%),
radial-gradient(circle at bottom left,
rgba(45,107,196,.22),
transparent 35%),
linear-gradient(
135deg,
#071221 0%,
#10284a 38%,
#204f92 100%
);
}

.section-hidden{opacity:0;transform:translateY(30px);transition:all .7s ease}
.section-visible{opacity:1;transform:translateY(0)}
.btn-primary{background:linear-gradient(135deg,#d4a853,#c49a3f);transition:all .3s;box-shadow:0 4px 15px rgba(212,168,83,.3)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(212,168,83,.4)}
.btn-outline{border:2px solid rgba(212,168,83,.6);transition:all .3s}
.btn-outline:hover{background:rgba(212,168,83,.15);border-color:#d4a853}
.teacher-card img{transition:transform .5s}
.teacher-card:hover img{transform:scale(1.05)}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:#0a1628}
::-webkit-scrollbar-thumb{background:linear-gradient(#d4a853,#1a3a6b);border-radius:4px}
.mobile-menu{transform:translateX(100%);transition:transform .4s cubic-bezier(.4,0,.2,1)}
.mobile-menu.open{transform:translateX(0)}
.admin-sidebar{transition:transform .3s}

.hero-school-img{
  filter: brightness(0.9) contrast(1.5) saturate(1.2);
  transform: scale(1.08);
}

.hero-guru{
  filter:
    brightness(1.08)
    contrast(1.12)
    saturate(1.1);

  transform: scale(1.03);

  animation: floatingGuru 6s ease-in-out infinite;
}

@keyframes floatingGuru{
  0%,100%{
    transform: translateX(-50%) translateY(0px);
  }
  50%{
    transform: translateX(-50%) translateY(-8px);
  }
}

body { box-sizing: border-box; }

/* ===== NEWS CAROUSEL ===== */

#old-news-carousel::-webkit-scrollbar{
display:none;
}

#old-news-carousel{
scrollbar-width:none;
}

.news-card{
min-width:320px;
max-width:320px;
flex-shrink:0;
}

.news-nav-btn{
position:absolute;
top:45%;
transform:translateY(-50%);
width:42px;
height:42px;
border-radius:999px;
background:rgba(255,255,255,.15);
backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,.1);
color:white;
z-index:20;
transition:.3s;
}

.news-nav-btn:hover{
background:#d4a853;
color:#0a1628;
}

/* ===== DETAIL BERITA ===== */

#news-detail-modal{
animation:fadeIn .25s ease;
}

#detail-description{
font-size:15px;
line-height:1.9;
}

#detail-description img{
max-width:100%;
border-radius:16px;
margin-top:16px;
}


/* ===== CAROUSEL GURU ===== */
.teacher-wrapper{
position:relative;
}

.teacher-carousel{
display:flex;
gap:20px;
overflow-x:auto;
scroll-behavior:smooth;
padding:10px;
scrollbar-width:none;

/* tambahan */
cursor:grab;
-webkit-overflow-scrolling:touch;
touch-action:pan-x;
}

.teacher-carousel:active{
cursor:grabbing;
}



.teacher-carousel::-webkit-scrollbar{
display:none;
}

.teacher-slide{
min-width:220px;
max-width:220px;
flex-shrink:0;

background:rgba(255,255,255,.08);
backdrop-filter:blur(16px);

border:1px solid rgba(255,255,255,.1);
border-radius:20px;

padding:16px;

text-align:center;

transition:.3s ease;
}

.teacher-slide:hover{
transform:translateY(-5px);
box-shadow:0 12px 30px rgba(0,0,0,.25);
}

.teacher-photo{
width:100%;
aspect-ratio:4/5;
object-fit:cover;

border-radius:16px;

margin-bottom:12px;
}

.teacher-role{
font-size:12px;
color:#d4a853;
margin-top:5px;
}
.teacher-nav{
position:absolute;
top:50%;
transform:translateY(-50%);
width:45px;
height:45px;
border-radius:50%;
border:none;
background:#d4a853;
cursor:pointer;
z-index:20;
}
#teacher-prev{
left:-10px;
}
#teacher-next{
right:-10px;
}

/* ===== HERO BADGE DESKTOP ===== */
.hero-badge-prestasi{
  position:absolute;
  left:-20px;
  bottom:0px;
  z-index:30;
  transform: scale(0.5);
}

.hero-badge-siswa{
  position:absolute;
  right:-20px;
  top:20px;
  z-index:30;
}

/* ===== HERO MOBILE ===== */
@media (max-width:768px){

  .hero-mobile-container{
    margin-top:15px;
  }

  .hero-mobile-container .relative{
    width:100%;
    display:flex;
    justify-content:center;
  }

.hero-mobile .w-\[700px\]{
  width:100% !important;
  max-width:560px;
  height:230px !important;
  border-radius:30px;
  transform:none;
}


  .hero-school-img{
    opacity:.75;
    transform:scale(1.08);
  }

  .hero-guru{
    width:350px !important;
    max-width:none;
    bottom:-5px;
    left:50%;
  }


.hero-badge-prestasi{
  top:10px;
  left:10px;
  bottom:auto;
  right:auto;

  transform:scale(.45);
  transform-origin:top left;
  z-index:30;
}

.hero-badge-siswa{
  top:10px;
  right:10px;
  bottom:auto;
  left:auto;

  transform:scale(.45);
  transform-origin:top right;
  z-index:30;
}
}

/* ===== STATISTIK ===== */
.stat-input{
width:100%;
padding:12px 16px;
border-radius:14px;
background:
rgba(255,255,255,.05);
border:
1px solid rgba(255,255,255,.1);
color:white;
outline:none;
transition:.3s;
}
.stat-input:focus{
border-color:#d4a853;
box-shadow:
0 0 0 3px
rgba(212,168,83,.15);
}


/* =======================================================
   PREMIUM HERO GRID
======================================================= */
.hero-grid{
    position:relative;
    isolation:isolate;
}
/* GRID UTAMA */
.hero-grid::before{
    content:"";
    position:absolute;
    inset:0;
    background:
    repeating-linear-gradient(
        90deg,
        rgba(255,255,255,.11) 0px,
        rgba(255,255,255,.11) 1px,
        transparent 1px,
        transparent 80px
    ),
    repeating-linear-gradient(
        0deg,
        rgba(255,255,255,.09) 0px,
        rgba(255,255,255,.09) 1px,
        transparent 1px,
        transparent 80px
    );
    opacity:.55;
    mask-image:linear-gradient(
        to bottom,
        transparent,
        black 10%,
        black 90%,
        transparent
    );
    pointer-events:none;
    z-index:0;
    animation:gridMove 26s linear infinite;
}
/* GLOW PUTIH */
.hero-grid::after{
    content:"";
    position:absolute;
    inset:0;
    background:
    radial-gradient(
        circle at 20% 20%,
        rgba(255,255,255,.08),
        transparent 45%
    ),
    radial-gradient(
        circle at 85% 35%,
        rgba(255,255,255,.05),
        transparent 35%
    ),
    radial-gradient(
        circle at 50% 100%,
        rgba(212,168,83,.15),
        transparent 45%
    );
    mix-blend-mode:screen;
    pointer-events:none;
    z-index:0;
    animation:heroGlow 10s ease-in-out infinite;
}
/* GARIS TENGAH */
.hero-grid .shimmer-line{
    box-shadow:
    0 0 8px rgba(212,168,83,.5),
    0 0 25px rgba(212,168,83,.35),
    0 0 45px rgba(212,168,83,.15);
}
/* ANIMASI GRID */
@keyframes gridMove{
    from{
        transform:translateY(0px);
    }
    to{
        transform:translateY(80px);
    }
}
/* GLOW */
@keyframes heroGlow{
    0%,100%{
        opacity:.8;
    }
    50%{
        opacity:1;
    }
}


/* ==========================================================
   SEARCH MODAL
========================================================== */
#search-modal{
    display:none;
    opacity:0;
    transition:
        opacity .35s ease;
}
#search-modal.show{
    display:flex;
    opacity:1;
}

/* ==========================================================
   SEARCH RESULT CONTAINER
========================================================== */
#search-results{
    scrollbar-width:thin;
    scrollbar-color:
        rgba(255,255,255,.25)
        transparent;
}
#search-results::-webkit-scrollbar{

    width:10px;
}
#search-results::-webkit-scrollbar-track{
    background:transparent;
}
#search-results::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.18);
    border-radius:999px;
}
#search-results::-webkit-scrollbar-thumb:hover{
    background:rgba(255,255,255,.35);
}

/* ==========================================================
   CATEGORY
========================================================== */
.search-category{
    margin-bottom:40px;
    animation:
        fadeUp .45s ease;
}
.search-category-title{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:20px;
    font-size:22px;
    font-weight:700;
    color:#FFD66B;
}
.search-category-title::after{
    content:"";
    flex:1;
    height:1px;
    background:
        linear-gradient(
            to right,
            rgba(255,214,107,.7),
            transparent
        );
}

/* ==========================================================
   RESULT GRID
========================================================== */
.search-grid{
    display:grid;
    grid-template-columns:
        repeat(auto-fill,minmax(260px,1fr));
    gap:22px;
}

/* ==========================================================
   CARD
========================================================== */
.search-card{
    position:relative;
    overflow:hidden;
    cursor:pointer;
    border-radius:22px;
    background:
        rgba(255,255,255,.05);
    border:
        1px solid rgba(255,255,255,.08);
    transition:
        .35s;
    backdrop-filter:
        blur(18px);
}
.search-card:hover{
    transform:
        translateY(-8px);
    border-color:
        rgba(255,214,107,.45);
    box-shadow:
        0 20px 45px rgba(0,0,0,.35);
}
.search-card img{
    width:100%;
    height:170px;
    object-fit:cover;
}
.search-card-body{
    padding:18px;
}
.search-card-title{
    font-size:18px;
    font-weight:700;
    color:white;
    margin-bottom:8px;
    line-height:1.4;
}
.search-card-text{
    font-size:14px;
    color:
        rgba(255,255,255,.65);
    line-height:1.7;
}
.search-badge{
    display:inline-flex;
    padding:
        5px 12px;
    border-radius:999px;
    background:
        rgba(255,214,107,.15);
    color:#FFD66B;
    font-size:12px;
    margin-bottom:10px;
}

/* ==========================================================
   HIGHLIGHT
========================================================== */
mark{
    background:
        linear-gradient(
            90deg,
            #FFD54F,
            #FFC107
        );
    color:#111;
    padding:
        1px 4px;
    border-radius:5px;
    font-weight:700;
}

/* ==========================================================
   EMPTY RESULT
========================================================== */
.search-empty{
    text-align:center;
    padding:90px 30px;
    animation:
        fadeUp .5s ease;
}
.search-empty-icon{
    font-size:72px;
    margin-bottom:20px;
    opacity:.6;
}
.search-empty-title{
    font-size:30px;
    font-weight:700;
    margin-bottom:10px;
}
.search-empty-text{
    color:
        rgba(255,255,255,.55);
}

/* ==========================================================
   HOVER IMAGE
========================================================== */
.search-card img{
    transition:
        transform .5s ease;
}
.search-card:hover img{
    transform:
        scale(1.06);
}

/* ==========================================================
   ANIMATION
========================================================== */
@keyframes fadeUp{
    from{
        opacity:0;
        transform:
            translateY(25px);
    }
    to{
        opacity:1;
        transform:
            translateY(0);
    }
}

/* ==========================================================
   MOBILE
========================================================== */
@media(max-width:768px){
.search-grid{
grid-template-columns:1fr;
}
.search-card img{
height:190px;
}
.search-category-title{
font-size:20px;
}
}