/* ============================================================
   public.css — DKV SMKN 4 Soppeng
   Design: Apple Liquid Glass + Scroll Animations
   ============================================================ */

/* ── 1. VARIABEL ─────────────────────────────────────────── */
:root {
    --bg:               #0a0f1d;
    --blob-1:           #bf5af2;
    --blob-2:           #0a84ff;
    --blob-3:           #ff375f;
    --blob-opacity:     0.30;
    --glass-bg:         rgba(28,32,46,0.52);
    --glass-border:     rgba(255,255,255,0.13);
    --glass-shadow:     rgba(0,0,0,0.75);
    --glass-highlight:  rgba(255,255,255,0.20);
    --glass-caustic:    rgba(255,255,255,0.05);
    --reflection-start: rgba(255,255,255,0.13);
    --reflection-end:   rgba(255,255,255,0.00);
    --glare-color:      rgba(255,255,255,0.13);
    --pill-bg:          rgba(55,58,72,0.88);
    --pill-shadow:      0 4px 12px rgba(0,0,0,.45), inset 0 1px 1px rgba(255,255,255,.16);
    --icon-color:       rgba(255,255,255,0.48);
    --icon-active:      #ffffff;
    --divider:          rgba(255,255,255,0.13);
    --accent:           #60a5fa;
    --text:             #f1f5f9;
    --text-muted:       rgba(241,245,249,.60);
    --text-subtle:      rgba(241,245,249,.35);
    --dot-color:        rgba(255,255,255,0.30);
    --nav-h:            64px;
    --sidebar-w:        260px;
}

/* ── 2. RESET & BASE ─────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
    background:var(--bg);
    color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    min-height:100vh;
}

/* ── 3. BACKGROUND: NAVY + AURORA + DOT FIELD ────────────── */
.bg-mesh{position:fixed;inset:0;z-index:0;background:#0a0f1d;overflow:hidden;pointer-events:none;}
/* Aurora canvas — di belakang dot, di atas navy bg.
   width/height:100% wajib: canvas elemen 'replaced', tanpa ukuran eksplisit
   ia hanya 300x150 walau inset:0 → menyebabkan celah kanan/bawah di HP. */
#aurora-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;}
/* Dot field canvas — di atas aurora, TETAP di bawah semua konten */
#dot-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;}
#star-canvas{display:none;}

/* ── 4. WELCOME SCREEN ───────────────────────────────────── */
#welcome-screen{
    position:fixed;inset:0;z-index:9000;
    display:flex;align-items:center;justify-content:center;
    background:var(--bg);overflow:hidden;
    transition:opacity .8s ease,visibility .8s ease;
}
#welcome-screen.hiding{opacity:0;visibility:hidden;}
#welcome-screen.hidden{display:none;}
#welcome-canvas{position:absolute;inset:0;width:100%;height:100%;}
.welcome-content{
    position:relative;z-index:1;
    display:flex;align-items:center;justify-content:center;
    gap:clamp(1.5rem,5vw,4.5rem);
    width:100%;max-width:1040px;padding:2rem;
    text-align:left;
}
.welcome-logo-side{flex:0 0 auto;display:flex;justify-content:center;
    animation:wel-in-left .9s cubic-bezier(.2,.8,.25,1) both;}
.welcome-logo-float{
    width:clamp(220px,34vw,470px);height:auto;
    filter:drop-shadow(0 0 70px rgba(96,165,250,.35));
    animation:welcome-float 5s ease-in-out infinite;
    pointer-events:none;user-select:none;
}
@keyframes welcome-float{
    0%,100%{transform:translateY(0);}
    50%    {transform:translateY(-18px);}
}
.welcome-text-side{flex:1 1 auto;max-width:540px;
    animation:wel-in-right .9s cubic-bezier(.2,.8,.25,1) .15s both;}
@keyframes wel-in-left{from{opacity:0;transform:translateX(-45px) scale(.92);}to{opacity:1;transform:none;}}
@keyframes wel-in-right{from{opacity:0;transform:translateX(45px);}to{opacity:1;transform:none;}}
/* HP/tablet kecil: tumpuk (logo atas, teks bawah) & rata tengah */
@media(max-width:820px){
    .welcome-content{flex-direction:column;text-align:center;gap:1.25rem;max-width:480px;}
    .welcome-text-side{max-width:none;}
    .welcome-logo-float{width:clamp(160px,42vw,260px);}
}
.welcome-badge{
    display:inline-flex;align-items:center;gap:.5rem;
    background:rgba(96,165,250,.12);border:1px solid rgba(96,165,250,.28);
    border-radius:100px;padding:.35rem 1rem;font-size:.78rem;color:var(--accent);
    letter-spacing:.08em;text-transform:uppercase;margin-bottom:1.5rem;backdrop-filter:blur(8px);
}
.welcome-title{
    font-size:clamp(2rem,6vw,3.5rem);font-weight:800;line-height:1.15;
    color:var(--text);margin-bottom:.5rem;text-shadow:0 0 40px rgba(96,165,250,.35);
}
.welcome-title span{
    background:linear-gradient(135deg,#60a5fa,#a78bfa);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.welcome-sub{font-size:1rem;color:var(--text-muted);margin-bottom:2.5rem;line-height:1.7;}
.btn-explore{
    display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 2.2rem;
    background:rgba(255,255,255,.10);backdrop-filter:blur(20px) saturate(180%);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    border:1px solid rgba(255,255,255,.24);border-radius:100px;
    color:var(--text);font-size:1rem;font-weight:600;cursor:pointer;
    box-shadow:0 8px 32px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.28);
    transition:background .2s,box-shadow .2s,transform .15s;
    position:relative;overflow:hidden;
}
.btn-explore:hover{background:rgba(255,255,255,.16);transform:translateY(-2px);
    box-shadow:0 12px 40px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.38),0 0 40px rgba(96,165,250,.22);}
.btn-explore:active{transform:scale(.97);}
.btn-explore .arrow{transition:transform .2s;}
.btn-explore:hover .arrow{transform:translateX(4px);}

/* ── 5. MAIN SITE ────────────────────────────────────────── */
/* z-index 10 — duduk di atas canvas (z-index 1 & 2) */
#main-site{position:relative;z-index:10;opacity:0;transition:opacity .6s ease;}
#main-site.visible{opacity:1;}

/* ── 6. NAVBAR DESKTOP — LIQUID GLASS PILL ───────────────── */
#pub-navbar{
    position:fixed;top:14px;left:50%;transform:translateX(-50%);
    z-index:1000;display:flex;align-items:center;padding:8px;
    border-radius:99px;
    background:var(--glass-bg);
    backdrop-filter:blur(50px) saturate(200%);
    -webkit-backdrop-filter:blur(50px) saturate(200%);
    box-shadow:
        0 40px 80px -20px var(--glass-shadow),
        0 10px 30px -10px var(--glass-shadow),
        inset 0 2px 3px -1px var(--glass-highlight),
        inset 0 -2px 4px -1px var(--glass-caustic),
        inset 0 0 0 1px var(--glass-border);
    white-space:nowrap;max-width:calc(100vw - 24px);
    overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
    transition:all .5s ease;
}
#pub-navbar::-webkit-scrollbar{display:none;}
#pub-navbar::before{
    content:'';position:absolute;top:1px;left:1px;right:1px;height:46%;
    border-radius:99px 99px 24px 24px / 99px 99px 12px 12px;
    background:linear-gradient(180deg,var(--reflection-start) 0%,var(--reflection-end) 100%);
    pointer-events:none;z-index:6;
}
.nav-glare-wrap{position:absolute;inset:0;border-radius:99px;overflow:hidden;pointer-events:none;z-index:5;}
.nav-glare{
    position:absolute;inset:0;opacity:0;transition:opacity .3s ease;
    background:radial-gradient(circle 80px at var(--x,50%) var(--y,50%),var(--glare-color) 0%,transparent 100%);
    mix-blend-mode:overlay;
}
#pub-navbar:hover .nav-glare{opacity:1;}

/* Brand */
.nav-brand{
    display:flex;align-items:center;gap:.45rem;
    padding:.3rem .5rem;text-decoration:none;flex-shrink:0;
    position:relative;z-index:3;cursor:pointer;
}
.nav-brand__logo{width:32px;height:32px;border-radius:0;object-fit:contain;background:transparent;filter:drop-shadow(0 1px 4px rgba(0,0,0,.3));}
.nav-brand__icon{width:28px;height:28px;border-radius:8px;background:#1e40af;
    display:flex;align-items:center;justify-content:center;color:var(--text);font-size:.85rem;flex-shrink:0;}
.nav-brand__divider{width:1px;height:24px;background:var(--divider);margin:0 6px;flex-shrink:0;}

/* Nav items */
.nav-items{position:relative;display:flex;gap:4px;z-index:3;}
.active-pill{
    position:absolute;top:0;left:0;height:44px;
    background:var(--pill-bg);border-radius:99px;box-shadow:var(--pill-shadow);
    transition:transform .4s cubic-bezier(.22,.61,.36,1),width .4s cubic-bezier(.22,.61,.36,1),
               background .4s ease,box-shadow .4s ease;z-index:1;
    will-change:transform,width;
}
.nav-btn{
    position:relative;background:transparent;border:none;
    padding:0 14px;height:44px;border-radius:99px;
    font-family:inherit;font-size:13.5px;font-weight:600;
    color:var(--icon-color);cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:color .3s ease;outline:none;z-index:2;
    text-decoration:none!important;
    display:inline-flex;align-items:center;
}
.btn-content{display:flex;align-items:center;gap:6px;pointer-events:none;
    transition:transform .2s cubic-bezier(.32,.72,0,1);}
.nav-btn:active .btn-content{transform:scale(.92);}
.nav-btn.active{color:var(--icon-active);}
.divider{width:1px;height:24px;background:var(--divider);margin:0 4px;z-index:3;}

/* ── 7. HAMBURGER (mobile) ───────────────────────────────── */
#nav-hamburger{
    display:none;position:fixed;top:14px;right:16px;z-index:1001;
    width:44px;height:44px;border-radius:50%;
    background:var(--glass-bg);backdrop-filter:blur(30px);
    -webkit-backdrop-filter:blur(30px);
    border:1px solid var(--glass-border);
    box-shadow:inset 0 1px 0 var(--glass-highlight);
    align-items:center;justify-content:center;
    cursor:pointer;color:var(--text);font-size:1.2rem;
    transition:background .2s;
}
#nav-hamburger:hover{background:rgba(255,255,255,.15);}

/* ── 8. SIDEBAR MOBILE ───────────────────────────────────── */
#nav-sidebar{
    position:fixed;top:0;right:0;bottom:0;
    width:var(--sidebar-w);z-index:2000;
    background:var(--glass-bg);
    backdrop-filter:blur(50px) saturate(200%);
    -webkit-backdrop-filter:blur(50px) saturate(200%);
    border-left:1px solid var(--glass-border);
    box-shadow:-20px 0 60px rgba(0,0,0,.5),
               inset 1px 0 0 var(--glass-highlight);
    transform:translateX(100%);
    transition:transform .4s cubic-bezier(.34,1.2,.64,1);
    display:flex;flex-direction:column;padding:1.5rem 1rem;
    overflow-y:auto;
}
#nav-sidebar.open{transform:translateX(0);}
.sidebar-header{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:1.5rem;padding-bottom:1rem;
    border-bottom:1px solid rgba(255,255,255,.08);
}
.sidebar-brand{display:flex;align-items:center;gap:.6rem;}
.sidebar-brand img{width:32px;height:32px;border-radius:8px;object-fit:contain;}
.sidebar-brand span{font-size:.88rem;font-weight:700;color:var(--text);}
.sidebar-close{
    width:32px;height:32px;border-radius:50%;
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
    color:var(--text-muted);cursor:pointer;font-size:.9rem;
    display:flex;align-items:center;justify-content:center;
    transition:background .15s,color .15s;
}
.sidebar-close:hover{background:rgba(255,255,255,.16);color:var(--text);}
.sidebar-menu{list-style:none;display:flex;flex-direction:column;gap:.3rem;}
.sidebar-item a,.sidebar-item button{
    display:flex;align-items:center;gap:.75rem;
    padding:.7rem 1rem;border-radius:12px;
    color:var(--text-muted);font-size:.9rem;font-weight:500;
    text-decoration:none;cursor:pointer;
    background:transparent;border:none;width:100%;
    transition:background .15s,color .15s;font-family:inherit;
}
.sidebar-item a:hover,.sidebar-item button:hover,
.sidebar-item.active a,.sidebar-item.active button{
    background:rgba(96,165,250,.12);color:var(--text);
}
.sidebar-item i{font-size:1rem;width:20px;text-align:center;flex-shrink:0;}
#sidebar-overlay{
    position:fixed;inset:0;z-index:1999;
    background:rgba(0,0,0,.5);backdrop-filter:blur(4px);
    opacity:0;pointer-events:none;transition:opacity .3s ease;
}
#sidebar-overlay.visible{opacity:1;pointer-events:auto;}

/* ── 9. LAYOUT ───────────────────────────────────────────── */
.pub-container{max-width:1200px;margin:0 auto;padding:0 1.5rem;position:relative;z-index:10;}
.pub-section{padding:calc(var(--nav-h) + 2rem) 0 4rem;position:relative;z-index:10;}
.pub-section:first-child{padding-top:calc(var(--nav-h) + 1rem);}
.section-header{margin-bottom:2.5rem;}
.section-header.right{text-align:right;}
.section-title{
    font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;color:var(--text);
    margin-bottom:.35rem;display:inline-block;
}
.section-sub{font-size:.9rem;color:var(--text-muted);}

/* ── 10. GLASS CARD ──────────────────────────────────────── */
.glass-card{
    position:relative;
    background:var(--glass-bg);
    backdrop-filter:blur(50px) saturate(200%);
    -webkit-backdrop-filter:blur(50px) saturate(200%);
    border-radius:20px;
    box-shadow:
        0 40px 80px -20px var(--glass-shadow),
        0 10px 30px -10px var(--glass-shadow),
        inset 0 2px 3px -1px var(--glass-highlight),
        inset 0 -2px 4px -1px var(--glass-caustic),
        inset 0 0 0 1px var(--glass-border);
    overflow:hidden;
    /* Tambah scale untuk efek "tombol mengembang" yang halus */
    transition:transform .35s cubic-bezier(.34,1.3,.64,1),box-shadow .3s ease;
    will-change:transform;
}
.glass-card:hover{
    transform:translateY(-4px) scale(1.03);
    box-shadow:0 50px 100px -20px var(--glass-shadow),0 20px 50px -10px var(--glass-shadow),
               inset 0 2px 3px -1px var(--glass-highlight),inset 0 -2px 4px -1px var(--glass-caustic),
               inset 0 0 0 1px rgba(255,255,255,.22),0 0 0 1px rgba(96,165,250,.08);
}
.glass-card:active{
    transform:translateY(-1px) scale(1.01);
    transition:transform .12s ease;
}
.glass-card::before{
    content:'';position:absolute;top:1px;left:1px;right:1px;height:46%;
    border-radius:20px 20px 12px 12px / 20px 20px 6px 6px;
    background:linear-gradient(180deg,var(--reflection-start) 0%,var(--reflection-end) 100%);
    pointer-events:none;z-index:5;
}
.glass-card::after{
    content:'';position:absolute;inset:0;border-radius:20px;
    background:radial-gradient(circle 120px at var(--cx,50%) var(--cy,50%),var(--glare-color) 0%,transparent 70%);
    opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:4;mix-blend-mode:overlay;
}
.glass-card:hover::after{opacity:1;}

/* ── 11. GRID ────────────────────────────────────────────── */
.pub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.25rem;}
.pub-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;}
.pub-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;}

/* Kartu guru — 3 per baris & rata tengah (baris terakhir yg kurang dari 3 tetap di tengah) */
.pub-guru-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:1.25rem;}
.pub-guru-grid>*{flex:0 1 calc((100% - 2.5rem) / 3);min-width:0;}
@media (max-width:900px){ .pub-guru-grid>*{flex-basis:calc((100% - 1.25rem) / 2);} }  /* 2 per baris */
@media (max-width:560px){ .pub-guru-grid{gap:.75rem;} .pub-guru-grid>*{flex-basis:100%;} } /* 1 per baris */

/* ── 12. MEDIA CARD ──────────────────────────────────────── */
.pub-media-card{display:flex;flex-direction:column;}
.pub-media-card__img{aspect-ratio:1/1;overflow:hidden;background:rgba(255,255,255,.04);position:relative;z-index:6;}
.pub-media-card__img img{width:100%;height:100%;object-fit:cover;
    transition:transform .35s ease,opacity .3s;opacity:.8;}
.pub-media-card:hover .pub-media-card__img img{transform:scale(1.06);opacity:1;}
.pub-media-card__body{padding:.85rem 1rem 1rem;flex:1;position:relative;z-index:6;}
.pub-media-card__title{font-size:.875rem;font-weight:600;color:var(--text);margin-bottom:.2rem;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.pub-media-card__meta{font-size:.75rem;color:var(--text-muted);}

/* ── 13. BADGE ───────────────────────────────────────────── */
.pub-badge{
    display:inline-block;padding:.2em .65em;border-radius:100px;
    font-size:.72rem;font-weight:600;
    background:rgba(96,165,250,.15);color:#93c5fd;
    border:1px solid rgba(96,165,250,.25);
}

/* Baris badge: kategori + tombol Detail */
.pub-badge-row{display:flex;align-items:center;gap:.4rem;margin-bottom:.4rem;flex-wrap:wrap;}
/* Tombol "Detail" — tampil seperti badge kategori, tapi bisa diklik */
.pub-badge-btn{
    cursor:pointer;font-family:inherit;line-height:1.2;
    display:inline-flex;align-items:center;gap:.3em;
    background:rgba(255,255,255,.08);color:#e2e8f0;
    border:1px solid rgba(255,255,255,.18);
    transition:background .2s,border-color .2s,transform .15s;
}
.pub-badge-btn:hover{background:rgba(96,165,250,.22);border-color:rgba(96,165,250,.4);color:var(--text);transform:translateY(-1px);}
.pub-badge-btn:active{transform:scale(.96);}

/* Ikon tautan (URL) di pojok kanan-atas gambar card */
.media-link-badge{
    position:absolute;top:.5rem;right:.5rem;z-index:8;
    width:30px;height:30px;border-radius:50%;
    display:inline-flex;align-items:center;justify-content:center;
    background:rgba(10,15,29,.55);color:var(--text);font-size:.85rem;
    border:1px solid rgba(255,255,255,.28);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    text-decoration:none;transition:background .2s,transform .15s;
}
.media-link-badge:hover{background:rgba(96,165,250,.6);color:var(--text);transform:translateY(-1px);}

/* ── MODAL DETAIL (lightbox) — dipakai karya/galeri/publikasi/fasilitas ── */
.karya-modal{
    position:fixed;inset:0;z-index:99999;          /* di atas navbar (1000) */
    display:none;align-items:center;justify-content:center;padding:1.25rem;
}
.karya-modal.open{display:flex;}
.karya-modal__overlay{position:absolute;inset:0;background:rgba(5,8,16,.80);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
/* Animasi BUKA */
.karya-modal.open .karya-modal__overlay{animation:km-fade .3s ease both;}
.karya-modal.open .karya-modal__card{animation:km-pop .4s cubic-bezier(.2,.85,.25,1) both;}
/* Animasi TUTUP */
.karya-modal.closing .karya-modal__overlay{animation:km-fade-out .28s ease both;}
.karya-modal.closing .karya-modal__card{animation:km-pop-out .26s ease both;}
@keyframes km-fade{from{opacity:0}to{opacity:1}}
@keyframes km-fade-out{from{opacity:1}to{opacity:0}}
@keyframes km-pop{from{transform:translateY(26px) scale(.92);opacity:0}to{transform:none;opacity:1}}
@keyframes km-pop-out{from{transform:none;opacity:1}to{transform:translateY(26px) scale(.94);opacity:0}}
.karya-modal__card{
    position:relative;z-index:1;display:flex;
    width:min(920px,100%);max-height:88vh;overflow:hidden;
    background:rgba(17,24,39,.94);
    border:1px solid rgba(255,255,255,.14);border-radius:20px;
    box-shadow:0 30px 80px rgba(0,0,0,.55);
    backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
}
.karya-modal__media{
    flex:1 1 56%;min-width:0;background:#0a0f1d;
    display:flex;align-items:center;justify-content:center;padding:1rem;
}
.karya-modal__media img,
.karya-modal__media video{
    max-width:100%;max-height:84vh;width:auto;height:auto;
    object-fit:contain;border-radius:8px;display:block;  /* foto ASLI, tanpa crop */
}
.karya-modal__info{
    flex:1 1 44%;min-width:0;padding:1.75rem 1.5rem 3.75rem;  /* padding bawah utk tombol tutup */
    display:flex;flex-direction:column;gap:.65rem;overflow-y:auto;
}
.karya-modal__title{font-size:1.35rem;font-weight:800;color:var(--text);margin:.2rem 0 0;line-height:1.25;}
.karya-modal__meta{font-size:.85rem;color:var(--text-muted);}
.karya-modal__desc{font-size:.9rem;color:#cbd5e1;line-height:1.7;margin:.25rem 0 0;white-space:pre-line;}
.karya-modal__link{align-self:flex-start;margin-top:.5rem;text-decoration:none;}
/* Tombol tutup — POJOK KANAN BAWAH modal */
.karya-modal__close{
    position:absolute;bottom:1rem;right:1rem;top:auto;z-index:5;
    width:42px;height:42px;border-radius:50%;cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;
    background:rgba(10,15,29,.65);color:var(--text);font-size:1rem;
    border:1px solid rgba(255,255,255,.25);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    box-shadow:0 6px 20px rgba(0,0,0,.4);
    transition:background .2s,transform .2s;
}
.karya-modal__close:hover{background:rgba(239,68,68,.7);transform:rotate(90deg);}
@media(max-width:720px){
    .karya-modal__card{flex-direction:column;max-height:90vh;}
    .karya-modal__media{flex:0 0 auto;max-height:46vh;}
    .karya-modal__media img,.karya-modal__media video{max-height:44vh;}
    .karya-modal__info{flex:1 1 auto;padding:1.25rem 1.25rem 3.5rem;}
}

/* ── 14. GURU CARD ───────────────────────────────────────── */
.pub-guru-card{display:flex;flex-direction:column;align-items:center;text-align:center;
    padding:1.75rem 1rem 1.25rem;position:relative;z-index:6;}
.pub-guru-photo{width:88px;height:88px;border-radius:50%;object-fit:cover;background:#fff;
    border:2px solid rgba(255,255,255,.2);margin-bottom:.85rem;box-shadow:0 4px 20px rgba(0,0,0,.3);}
.pub-guru-name{font-size:.9rem;font-weight:700;color:var(--text);margin-bottom:.15rem;}
.pub-guru-role{font-size:.75rem;color:var(--text-muted);margin-bottom:.4rem;}
.pub-guru-mapel{font-size:.75rem;color:var(--text-subtle);margin-bottom:.65rem;}
.pub-guru-sosmed{display:flex;gap:.4rem;justify-content:center;}
.pub-sosmed-btn{
    width:30px;height:30px;border-radius:8px;
    background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
    color:var(--text-muted);display:inline-flex;align-items:center;justify-content:center;
    font-size:.82rem;text-decoration:none;transition:background .15s,color .15s,border-color .15s;
}
.pub-sosmed-btn:hover{background:rgba(96,165,250,.25);color:var(--accent);border-color:rgba(96,165,250,.4);}

/* ── 15. FASILITAS CARD ──────────────────────────────────── */
.pub-fas-card{display:flex;align-items:center;gap:.85rem;padding:.9rem 1.1rem;position:relative;z-index:6;}
.pub-fas-img{width:52px;height:52px;border-radius:10px;object-fit:cover;flex-shrink:0;
    border:1px solid rgba(255,255,255,.12);background:#fff;}
.pub-fas-name{font-size:.88rem;font-weight:600;color:var(--text);margin-bottom:.1rem;}
.pub-fas-meta{font-size:.75rem;color:var(--text-muted);}

/* ── 16. BUTTONS ─────────────────────────────────────────── */
.btn-glass{
    display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.4rem;
    background:rgba(255,255,255,.08);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.18);border-radius:100px;color:var(--text);
    font-size:.88rem;font-weight:600;cursor:pointer;text-decoration:none;
    box-shadow:0 4px 16px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.18);
    transition:background .2s,box-shadow .2s,transform .15s;
}
.btn-glass:hover{background:rgba(255,255,255,.14);transform:translateY(-1px);color:var(--text);text-decoration:none;
    box-shadow:0 6px 24px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.25);}
.btn-glass.primary{background:rgba(96,165,250,.2);border-color:rgba(96,165,250,.35);}
.btn-glass.primary:hover{background:rgba(96,165,250,.3);box-shadow:0 6px 24px rgba(96,165,250,.2);}

/* ── 17. LIHAT LAINNYA ROW ───────────────────────────────── */
.see-more-row{
    display:flex;align-items:center;gap:1rem;margin-top:1.25rem;
}
.see-more-row.right{justify-content:flex-end;}
.see-more-line{flex:1;height:1px;background:rgba(255,255,255,.08);}

/* ── 18. INFINITE SCROLL MARQUEE (LogoLoop / logoloop.js) ──── */
/* Animasi digerakkan oleh assets/js/logoloop.js (bukan keyframes
   CSS) agar mulus & seamless. Jeda antar-kartu pakai margin-right
   pada kartu (termasuk kartu terakhir) supaya jarak ulangnya sama
   persis dengan lebar sequence -> tidak ada loncatan. */
.marquee-section{overflow:hidden;position:relative;}
/* Loop karya/galeri dibuat selebar layar (full-bleed) supaya batas tepi
   berada dekat tepi layar. body sudah overflow-x:hidden jadi 100vw aman. */
.marquee-section.logo-loop{
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    /* Fade tepi pakai MASK, bukan overlay: kartu memudar jadi TRANSPARAN di
       tepi sehingga latar asli (navy + aurora + titik) tembus mulus. Tidak
       ada pita/garis hitam seperti saat memakai overlay navy — kartu seolah
       larut ke latar. --edge mengatur lebar area memudar. */
    --edge:clamp(56px,9%,180px);
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--edge),#000 calc(100% - var(--edge)),transparent 100%);
            mask-image:linear-gradient(to right,transparent 0,#000 var(--edge),#000 calc(100% - var(--edge)),transparent 100%);
}
.marquee-track{
    display:flex;
    width:max-content;
    will-change:transform;
    transform:translate3d(0,0,0);
}
.marquee-seq{display:flex;flex:0 0 auto;}
.marquee-card{
    flex:0 0 auto;
    width:220px;
    margin-right:1.25rem;   /* = jeda antar-kartu (juga di ujung) */
}

@media (prefers-reduced-motion:reduce){
    .marquee-track{transform:translate3d(0,0,0)!important;}
}

/* ── 19. HERO ────────────────────────────────────────────── */
.pub-hero{
    min-height:100vh;display:flex;align-items:center;
    padding-top:calc(var(--nav-h) + 1rem);
    position:relative;overflow:hidden;
}
.hero-logo-bg{
    position:absolute;right:-3%;top:50%;transform:translateY(-50%);
    width:clamp(280px,40vw,520px);height:clamp(280px,40vw,520px);
    z-index:0;pointer-events:none;
    animation:hero-float 5s ease-in-out infinite;
    filter:drop-shadow(0 0 60px rgba(96,165,250,.25));
    opacity:.92;
}
@keyframes hero-float{
    0%,100%{transform:translateY(-50%) translateY(0px);}
    50%    {transform:translateY(-50%) translateY(-18px);}
}
.hero-content{position:relative;z-index:1;max-width:600px;}
.hero-title{
    font-size:clamp(2.2rem,5.5vw,3.8rem);font-weight:800;
    color:var(--text);line-height:1.18;margin-bottom:.75rem;
    min-height:3.5em;
    filter:drop-shadow(0 0 14px rgba(96,165,250,.30));
}
.hero-title .cursor{
    display:inline-block;width:3px;height:.95em;
    background:#60a5fa;margin-left:2px;vertical-align:text-bottom;
    animation:blink .8s step-end infinite;
}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:0;}}
.hero-title span.grad{
    background:linear-gradient(135deg,#60a5fa,#a78bfa);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero-sub{font-size:1rem;color:var(--text-muted);max-width:480px;line-height:1.75;margin-bottom:1.75rem;}

/* ── 20. SCROLL ANIMATIONS ───────────────────────────────── */
.anim{opacity:0;transition:opacity .7s ease,transform .7s ease;}
.anim.from-left {transform:translateX(-50px);}
.anim.from-right{transform:translateX(50px);}
.anim.from-bot  {transform:translateY(40px);}
.anim.scale-in  {transform:scale(.88);}
.anim.visible   {opacity:1!important;transform:none!important;}
/* Delay helpers */
.anim.d1{transition-delay:.1s;}
.anim.d2{transition-delay:.2s;}
.anim.d3{transition-delay:.3s;}
.anim.d4{transition-delay:.4s;}
.anim.d5{transition-delay:.5s;}

/* ── 21. SEARCH ──────────────────────────────────────────── */
.pub-search-wrap{display:flex;gap:.5rem;margin-bottom:1.5rem;}
.pub-search{
    flex:1;max-width:360px;
    background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
    border-radius:100px;color:var(--text);padding:.55rem 1.1rem;
    font-size:.875rem;outline:none;transition:background .15s,border-color .15s;
}
.pub-search::placeholder{color:var(--text-subtle);}
.pub-search:focus{background:rgba(255,255,255,.10);border-color:rgba(96,165,250,.5);
    box-shadow:0 0 0 3px rgba(96,165,250,.12);}

/* ── 22. KALENDER ────────────────────────────────────────── */
.pub-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.pub-cal-head{text-align:center;font-size:.62rem;font-weight:700;
    color:var(--text-subtle);padding:.3rem 0;text-transform:uppercase;letter-spacing:.04em;}
.pub-cal-head.sun{color:#fca5a5;} .pub-cal-head.sat{color:#93c5fd;}
.pub-cal-cell{min-height:54px;background:rgba(255,255,255,.03);border-radius:5px;
    padding:3px;display:flex;flex-direction:column;gap:1px;}
.pub-cal-cell.empty{background:transparent;}
.pub-cal-cell.sun-col{background:rgba(239,68,68,.05);}
.pub-cal-cell.sat-col{background:rgba(59,130,246,.05);}
.pub-cal-tgl{font-size:.7rem;font-weight:600;color:rgba(241,245,249,.65);line-height:1;margin-bottom:1px;}
.pub-cal-evt{display:block;border-radius:3px;padding:1px 3px;
    font-size:.58rem;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pub-cal-legenda{display:flex;flex-wrap:wrap;gap:.3rem .6rem;margin-top:.75rem;}
.pub-cal-leg-item{display:flex;align-items:center;gap:.3rem;font-size:.68rem;color:var(--text-muted);}
.pub-cal-dot{width:9px;height:9px;border-radius:2px;flex-shrink:0;}
.agenda-row{display:flex;align-items:flex-start;gap:.6rem;padding:.6rem 1rem;
    border-bottom:1px solid rgba(255,255,255,.05);}
.agenda-row:last-child{border-bottom:none;}
.agenda-stripe{width:4px;min-height:36px;border-radius:2px;flex-shrink:0;margin-top:2px;}
.agenda-title{font-size:.84rem;font-weight:600;color:var(--text);}
.agenda-date{font-size:.72rem;color:var(--text-muted);}
.agenda-kat{font-size:.67rem;color:var(--text-subtle);background:rgba(255,255,255,.06);
    border-radius:4px;padding:1px 5px;}

/* ── 23. LAZY IMG ────────────────────────────────────────── */
img.lazy{opacity:.5;transition:opacity .4s;background:rgba(255,255,255,.04);}
img.lazy.loaded{opacity:1;}

/* ── 24. EMPTY STATE ─────────────────────────────────────── */
.pub-empty{text-align:center;padding:4rem 1rem;color:var(--text-subtle);}
.pub-empty i{font-size:3rem;display:block;margin-bottom:.75rem;opacity:.3;}

/* ── 25. FOOTER ──────────────────────────────────────────── */
.pub-footer{
    background:rgba(255,255,255,.03);
    border-top:1px solid rgba(255,255,255,.07);
    padding:3rem 0 1.5rem;margin-top:4rem;
    position:relative;z-index:10;
}
.footer-logo-transparent{
    width:72px;height:72px;object-fit:contain;
    display:block;margin-bottom:.5rem;
    filter:drop-shadow(0 2px 12px rgba(0,0,0,.4));
}
.pub-footer__head{font-size:.78rem;font-weight:700;color:var(--text);
    text-transform:uppercase;letter-spacing:.05em;margin-bottom:.65rem;}
.pub-footer__links{list-style:none;padding:0;}
.pub-footer__links li,.pub-footer__links a{
    font-size:.82rem;color:var(--text-muted);margin-bottom:.35rem;
    text-decoration:none;cursor:pointer;transition:color .15s;
}
.pub-footer__links a:hover{color:var(--text);}
.pub-footer__copy{border-top:1px solid rgba(255,255,255,.06);margin-top:1.75rem;
    padding-top:1rem;font-size:.76rem;color:var(--text-subtle);text-align:center;}
/* Map embed */
.footer-map{border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.1);
    box-shadow:0 8px 32px rgba(0,0,0,.3);}
.footer-map iframe{width:100%;height:240px;border:none;display:block;filter:invert(.9) hue-rotate(180deg);}

/* ── 26. RESPONSIVE ──────────────────────────────────────── */
@media(max-width:1024px){
    .pub-grid-4{grid-template-columns:repeat(3,1fr);}
}
/* Tablet & lebih kecil: navbar pill berisi 9 item tidak muat rapi.
   Alihkan ke hamburger + sidebar mulai 1024px ke bawah supaya semua
   tablet umum (termasuk iPad Pro portrait 1024px) dapat versi ringkas. */
@media(max-width:1024px){
    #pub-navbar{display:none;}
    #nav-hamburger{display:flex;}
}
@media(max-width:768px){
    .pub-grid-4{grid-template-columns:repeat(2,1fr);}
    .pub-grid-3{grid-template-columns:repeat(2,1fr);}
    .pub-grid  {grid-template-columns:repeat(2,1fr);gap:.75rem;}
    /* Logo DKV jadi background fixed di tengah layar mobile */
    .hero-logo-bg{
        position:fixed;
        left:50%;top:50%;
        transform:translate(-50%,-50%);
        width:min(85vw,340px);height:min(85vw,340px);
        right:auto;
        opacity:.10;
        z-index:0;
        pointer-events:none;
        animation:none;
        filter:none;
    }
    .hero-content{position:relative;z-index:1;}
    /* Hero mengisi ~1 layar penuh di HP agar tampil gagah,
       sehingga Visi-Misi turun rapi di bawahnya. */
    .pub-hero{
        min-height:100vh;     /* fallback browser lama */
        min-height:100svh;    /* aman dari bilah alamat browser HP */
        padding-top:calc(var(--nav-h) + 1rem);
        padding-bottom:16vh;  /* angkat konten yg ter-center sedikit ke atas */
    }
    .hero-title{
        font-size:clamp(2.6rem,10vw,3.6rem);
        line-height:1.14;min-height:auto;
        filter:drop-shadow(0 0 18px rgba(96,165,250,.55))
               drop-shadow(0 0 38px rgba(96,165,250,.28));
    }
    .hero-sub{font-size:1rem;}
    .marquee-card{width:160px;}
    /* Section lebih rapat di HP */
    .pub-section{padding:2rem 0 1.5rem;}
    #beranda.pub-section{padding-top:calc(var(--nav-h) + 1rem);}
    .pub-cal-grid{font-size:.7rem;}
    .pub-cal-cell{min-height:38px;}
    /* Footer responsive */
    footer .pub-grid-3{grid-template-columns:1fr 1fr!important;}
    footer .footer-map-col{grid-column:1/-1;}
    /* Header section konsisten rata-tengah di HP — !important untuk
       mengalahkan inline style="text-align:right" di sebagian section. */
    .section-header,
    .section-header.right{text-align:center!important;}
}
@media(max-width:480px){
    .pub-container{padding:0 1rem;}
    .pub-grid-4{grid-template-columns:repeat(2,1fr);}
    /* Fasilitas memakai kartu horizontal (ikon + teks) -> di HP kecil
       jadikan 1 kolom penuh agar teks tidak terhimpit. Hanya menyasar
       grid yang berisi .pub-fas-card, jadi publikasi tetap 2 kolom. */
    .pub-grid-4:has(.pub-fas-card){grid-template-columns:1fr;}
    .pub-fas-card{padding:.75rem .9rem;gap:.7rem;}
    .pub-fas-img{width:46px;height:46px;}
    .marquee-card{width:140px;}
    .section-title{font-size:1.6rem;}
    .hero-sub{font-size:.9rem;}
    .btn-glass{font-size:.82rem;padding:.55rem 1rem;}
}
/* HP sangat kecil (iPhone SE 320–375px dan di bawahnya) */
@media(max-width:360px){
    .pub-container{padding:0 .85rem;}
    .section-title{font-size:1.4rem;}
    .marquee-card{width:130px;}
    .pub-grid,.pub-grid-3,.pub-grid-4{gap:.6rem;}
    .pub-cal-grid{font-size:.62rem;}
    .pub-cal-cell{min-height:34px;}
    .footer-logo-img{height:62px;max-width:62px;}
    #nav-hamburger{width:40px;height:40px;font-size:1.05rem;top:10px;right:12px;}
}

/* FOOTER NAV ICONS */
.footer-nav-icon{
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;border-radius:10px;
    background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
    color:var(--text-muted);text-decoration:none;font-size:1.05rem;
    transition:background .15s,color .15s,border-color .15s;
}
.footer-nav-icon:hover{background:rgba(96,165,250,.25);color:var(--accent);border-color:rgba(96,165,250,.4);}
/* Tooltip footer dihapus — pakai title attribute browser saja (tidak ada bug) */
.footer-nav-icon span{display:none;}




/* ── FOOTER ADMIN BUTTON ─────────────────────────────────── */
.footer-admin-btn{
    display:inline-flex;align-items:center;
    padding:.4rem 1rem;border-radius:100px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    color:var(--text-muted);
    font-size:.75rem;font-weight:600;text-decoration:none;
    transition:background .15s,color .15s,border-color .15s;
}
.footer-admin-btn:hover{
    background:rgba(96,165,250,.18);
    color:var(--accent);
    border-color:rgba(96,165,250,.35);
}

/* ── SEARCH ROW + KATEGORI ───────────────────────────────── */
.search-row{
    display:flex;
    align-items:center;
    gap:.5rem;
    margin-bottom:1.5rem;
    flex-wrap:wrap;
}
.search-row .pub-search{
    flex:1;
    min-width:180px;
    max-width:340px;
}
/* Dropdown kategori — fix option terbaca */
select.pub-search{
    cursor:pointer;
    color:var(--text);
    appearance:none;
    -webkit-appearance:none;
    background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat:no-repeat;
    background-position:right .9rem center;
    background-size:1rem;
    padding-right:2.4rem;
}
/* Option dropdown — background gelap, teks terang */
select.pub-search option{
    background:#1a2030;
    color:var(--text);
    padding:.5rem;
}
.search-submit{
    flex-shrink:0;
    width:44px;height:44px;
    border-radius:50%;
    background:rgba(37,99,235,.75);
    border:1px solid rgba(96,165,250,.5);
    color:var(--text);cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:1rem;
    box-shadow:0 4px 16px rgba(37,99,235,.3),inset 0 1px 0 rgba(255,255,255,.25);
    transition:background .15s,transform .15s;
}
.search-submit:hover{background:rgba(37,99,235,.9);transform:translateY(-1px);}
.search-reset{
    flex-shrink:0;
    width:44px;height:44px;border-radius:50%;
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
    color:var(--text-muted);cursor:pointer;text-decoration:none;
    display:inline-flex;align-items:center;justify-content:center;font-size:1rem;
    transition:background .15s;
}
.search-reset:hover{background:rgba(255,255,255,.15);color:var(--text);}

/* ── KATEGORI CHIPS (pill horizontal) ────────────────────── */
.kategori-chips{
    display:flex;
    gap:.5rem;
    flex-wrap:wrap;
    margin-bottom:1.5rem;
}
.kat-chip{
    display:inline-flex;align-items:center;
    padding:.45rem 1.1rem;
    border-radius:100px;
    background:rgba(20,25,40,.7);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.14);
    color:rgba(255,255,255,.7);
    font-size:.82rem;font-weight:600;
    text-decoration:none;cursor:pointer;
    transition:background .18s,color .18s,border-color .18s,transform .18s;
}
.kat-chip:hover{
    background:rgba(255,255,255,.12);
    color:var(--text);
    transform:translateY(-1px);
}
.kat-chip.active{
    background:rgba(37,99,235,.85);
    border-color:rgba(96,165,250,.6);
    color:var(--text);
    box-shadow:0 0 16px rgba(59,130,246,.4),inset 0 1px 0 rgba(255,255,255,.25);
}

/* ── KATEGORI TOGGLE ─────────────────────────────────────── */
.kat-toggle-btn{
    flex-shrink:0;
    width:44px;height:44px;border-radius:50%;
    background:rgba(20,25,40,.7);
    border:1px solid rgba(255,255,255,.15);
    color:rgba(255,255,255,.78);cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:1rem;
    box-shadow:0 4px 16px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.18);
    transition:background .18s,color .18s,transform .18s;
}
.kat-toggle-btn:hover{background:rgba(255,255,255,.15);color:var(--text);}
.kat-toggle-btn.active{
    background:rgba(37,99,235,.8);
    border-color:rgba(96,165,250,.6);
    color:var(--text);
}
.kategori-chips{
    display:flex;gap:.5rem;flex-wrap:wrap;
    margin-bottom:0;
    max-height:0;overflow:hidden;
    opacity:0;
    transition:max-height .4s ease,opacity .3s ease,margin-bottom .3s ease;
}
.kategori-chips.open{
    max-height:300px;
    opacity:1;
    margin-bottom:1.5rem;
    margin-top:.25rem;
}
.kat-chip{
    transform:scale(.85);opacity:0;
    transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .25s ease,
               background .18s,color .18s,border-color .18s;
}
.kategori-chips.open .kat-chip{transform:scale(1);opacity:1;}
.kategori-chips.open .kat-chip:nth-child(1){transition-delay:.02s;}
.kategori-chips.open .kat-chip:nth-child(2){transition-delay:.05s;}
.kategori-chips.open .kat-chip:nth-child(3){transition-delay:.08s;}
.kategori-chips.open .kat-chip:nth-child(4){transition-delay:.11s;}
.kategori-chips.open .kat-chip:nth-child(5){transition-delay:.14s;}
.kategori-chips.open .kat-chip:nth-child(6){transition-delay:.17s;}
.kategori-chips.open .kat-chip:nth-child(7){transition-delay:.20s;}
.kategori-chips.open .kat-chip:nth-child(8){transition-delay:.23s;}

/* ── SIDEBAR ADMIN BUTTON ────────────────────────────────── */
.sidebar-admin{
    margin-top:auto;
    display:flex;align-items:center;gap:.6rem;
    padding:.8rem 1rem;border-radius:12px;
    background:rgba(96,165,250,.12);
    border:1px solid rgba(96,165,250,.25);
    color:#93c5fd;font-size:.88rem;font-weight:600;
    text-decoration:none;
    transition:background .15s,color .15s;
}
.sidebar-admin:hover{background:rgba(96,165,250,.22);color:var(--text);}
.sidebar-admin i{font-size:1rem;}

/* ── FOOTER STRUKTUR (sesuai layout) ─────────────────────── */
.footer-grid-3{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:2rem;
    align-items:center;
    justify-items:center;
    margin-bottom:2rem;
}
.footer-col{display:flex;flex-direction:column;align-items:center;}
/* Navigasi kiri */
.footer-nav-grid{
    display:grid;
    grid-template-columns:repeat(3,44px);
    gap:.65rem;
    justify-content:center;
    width:max-content;
}
/* Icon navigasi & sosmed pakai ukuran sama (44px) di footer */
.footer-nav-grid .pub-sosmed-btn,
.footer-sosmed-grid .pub-sosmed-btn{
    width:44px;height:44px;
    border-radius:10px;
    font-size:1.05rem;
}
/* Maps tengah */
.footer-map-col{align-items:center;width:100%;}
.footer-map{
    width:100%;max-width:420px;
    border-radius:14px;overflow:hidden;
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 8px 32px rgba(0,0,0,.35);
}
.footer-map iframe{
    width:100%;height:280px;border:none;display:block;
}
/* Kontak kanan — logo & sosmed sejajar tengah */
.footer-kontak{align-items:center;text-align:center;}
.footer-logos{
    display:flex;gap:1.25rem;align-items:center;justify-content:center;
    margin-bottom:1.5rem;
}
.footer-logo-img{
    height:100px;width:auto;max-width:100px;
    object-fit:contain;
    filter:drop-shadow(0 2px 12px rgba(0,0,0,.45));
}
.footer-sosmed-grid{
    display:grid;
    grid-template-columns:repeat(3,44px);
    gap:.6rem;
    justify-content:center;
}
.footer-sosmed-grid .pub-sosmed-btn-OLD{
    width:44px;height:44px;font-size:1.05rem;
}
/* Button ADMIN full */
.footer-admin-full{
    display:flex;align-items:center;justify-content:center;
    width:fit-content;margin:1.5rem auto .5rem;
    padding:.6rem 2rem;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.14);
    border-radius:100px;
    color:rgba(255,255,255,.8);
    font-size:.85rem;font-weight:700;letter-spacing:.08em;
    text-decoration:none;
    transition:background .18s,color .18s,border-color .18s;
}
.footer-admin-full:hover{
    background:rgba(96,165,250,.18);
    color:var(--text);border-color:rgba(96,165,250,.35);
}
/* Sidebar (berisi tombol login admin) muncul mulai 1024px ke bawah, jadi
   tombol ADMIN di footer disembunyikan agar tidak dobel. Diletakkan SETELAH
   definisi dasar di atas agar menang urutan cascade. */
@media(max-width:1024px){
    .footer-admin-full{display:none;}
}

/* Footer responsive */
@media(max-width:768px){
    .footer-grid-3{
        grid-template-columns:1fr;
        gap:2rem;
        text-align:center;
        justify-items:center;
    }
    .footer-col{align-items:center;}
    .footer-kontak{align-items:center;text-align:center;}
    /* 3 icon per baris konsisten */
    .footer-col .footer-nav-grid{justify-content:center;grid-template-columns:repeat(3,44px);}
    .footer-sosmed-grid{justify-content:center;grid-template-columns:repeat(3,44px);}
    .footer-logos{justify-content:center;}
    .footer-map iframe{height:240px;}
}
@media(max-width:400px){
    .footer-col .footer-nav-grid{grid-template-columns:repeat(3,40px);}
    .footer-col .footer-nav-icon{width:40px;height:40px;}
    .footer-sosmed-grid{grid-template-columns:repeat(3,40px);}
    .footer-sosmed-grid .pub-sosmed-btn{width:40px;height:40px;}
    .footer-logo-img{height:70px;max-width:70px;}
}

/* Footer column headings center */
.footer-col .pub-footer__head{text-align:center;width:100%;}

/* ============================================================
   13. TEMA TERANG (Light Mode) — DEFAULT situs
   Aktif saat <html data-theme="light">. Gelap saat data-theme="dark".
   ============================================================ */
html[data-theme="light"]{
    --bg:               #ffffff;
    --glass-bg:         rgba(255,255,255,0.74);
    --glass-border:     rgba(20,45,90,0.12);
    --glass-shadow:     rgba(30,58,95,0.12);
    --glass-highlight:  rgba(255,255,255,0.90);
    --glass-caustic:    rgba(20,45,90,0.03);
    --reflection-start: rgba(255,255,255,0.60);
    --reflection-end:   rgba(255,255,255,0.00);
    --glare-color:      rgba(120,170,225,0.16);
    --pill-bg:          rgba(255,255,255,0.88);
    --pill-shadow:      0 4px 16px rgba(30,58,95,.14), inset 0 1px 1px rgba(255,255,255,.95);
    --icon-color:       rgba(21,41,77,0.60);
    --icon-active:      #13294d;
    --divider:          rgba(21,41,77,0.14);
    --accent:           #2f6fb0;
    --text:             #16294a;
    --text-muted:       rgba(22,41,74,0.70);
    --text-subtle:      rgba(22,41,74,0.45);
    --dot-color:        rgba(10,16,30,0.40);   /* dot HITAM, dilembutkan */
}

/* Latar putih bersih; warna datang dari blob */
html[data-theme="light"] .bg-mesh{ background:#ffffff; }

/* Tema terang: latar DISAMAKAN dengan tema gelap -> aurora (atas) + dot.
   Blob gradasi warna dinonaktifkan sepenuhnya. */
html[data-theme="light"] #aurora-canvas{ display:block; }
.light-blobs{ display:none !important; }
html[data-theme="light"] .light-blobs{
    display:none;
}
.light-blobs span{
    position:absolute; border-radius:50%; will-change:transform; transform:translateZ(0);
}
.light-blobs span:nth-child(1){width:46vmax;height:46vmax;top:-10vmax;left:-8vmax;
    background:radial-gradient(circle, rgba(74,159,212,.50) 0%, rgba(74,159,212,0) 68%);animation:blob-1 34s ease-in-out infinite;}
.light-blobs span:nth-child(2){width:40vmax;height:40vmax;top:-8vmax;right:-8vmax;
    background:radial-gradient(circle, rgba(240,128,32,.42) 0%, rgba(240,128,32,0) 68%);animation:blob-2 40s ease-in-out infinite;}
.light-blobs span:nth-child(3){width:38vmax;height:38vmax;bottom:-10vmax;left:2vw;
    background:radial-gradient(circle, rgba(58,155,78,.42) 0%, rgba(58,155,78,0) 68%);animation:blob-3 44s ease-in-out infinite;}
.light-blobs span:nth-child(4){width:36vmax;height:36vmax;bottom:-8vmax;right:0;
    background:radial-gradient(circle, rgba(230,51,41,.38) 0%, rgba(230,51,41,0) 68%);animation:blob-4 38s ease-in-out infinite;}
.light-blobs span:nth-child(5){width:32vmax;height:32vmax;top:30%;left:36%;
    background:radial-gradient(circle, rgba(245,197,24,.40) 0%, rgba(245,197,24,0) 68%);animation:blob-5 46s ease-in-out infinite;}
@keyframes blob-1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(6vw,5vh) scale(1.1);}}
@keyframes blob-2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-6vw,6vh) scale(1.08);}}
@keyframes blob-3{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(7vw,-5vh) scale(1.12);}}
@keyframes blob-4{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-6vw,-6vh) scale(1.06);}}
@keyframes blob-5{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(5vw,7vh) scale(1.09);}}

/* Tombol toggle di NAV publik */
.nav-theme-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;
    background:transparent;color:var(--icon-color);font-size:1.05rem;line-height:1;
    transition:background .2s,color .2s,transform .25s;flex-shrink:0;
}
.nav-theme-toggle:hover{background:rgba(255,255,255,.12);color:var(--icon-active);transform:rotate(-18deg);}
html[data-theme="light"] .nav-theme-toggle:hover{background:rgba(20,45,90,.08);}

/* Tombol toggle di SIDEBAR mobile (sebagai item menu) */
.sidebar-theme-item{
    display:flex;align-items:center;gap:.85rem;width:100%;
    padding:.8rem 1rem;border:none;border-radius:12px;cursor:pointer;
    background:transparent;color:var(--text);font-size:.95rem;font-weight:600;
    font-family:inherit;transition:background .2s;
}
.sidebar-theme-item:hover{background:rgba(127,150,190,.14);}
.sidebar-theme-item i{font-size:1.1rem;width:22px;text-align:center;color:var(--accent);}

/* Animasi "sweep" saat ganti tema */
.theme-sweep{
    position:fixed;z-index:99999;width:0;height:0;border-radius:50%;
    transform:translate(-50%,-50%);pointer-events:none;opacity:1;
    transition:width .62s cubic-bezier(.4,0,.2,1),height .62s cubic-bezier(.4,0,.2,1),opacity .42s ease .34s;
}

/* Penyesuaian elemen di tema terang */
html[data-theme="light"] .welcome-title{ text-shadow:0 0 36px rgba(47,111,176,.18); }
html[data-theme="light"] .hero-title{ filter:drop-shadow(0 1px 10px rgba(47,111,176,.18)); }
html[data-theme="light"] .pub-badge-btn{ background:rgba(20,45,90,.06);border-color:rgba(20,45,90,.16);color:var(--text); }
html[data-theme="light"] .pub-badge-btn:hover{ background:rgba(47,111,176,.16);color:#0f2a52; }
html[data-theme="light"] .btn-explore{ background:rgba(20,45,90,.06);color:var(--text);border-color:rgba(20,45,90,.16); }
html[data-theme="light"] .btn-explore:hover{ background:rgba(20,45,90,.12); }

/* Modal detail Karya/Galeri — IKUT tema terang */
html[data-theme="light"] .karya-modal__overlay{ background:rgba(18,38,68,.45); }
html[data-theme="light"] .karya-modal__card{ background:rgba(255,255,255,.94);border-color:rgba(20,45,90,.14); }
html[data-theme="light"] .karya-modal__title{ color:var(--text); }
html[data-theme="light"] .karya-modal__desc{ color:var(--text-muted); }
html[data-theme="light"] .karya-modal__close{ background:rgba(20,45,90,.10);color:var(--text); }

/* Hamburger: ikon benar-benar center */
#nav-hamburger{ line-height:1;padding:0; }
html[data-theme="light"] #nav-hamburger{ color:var(--text); }

/* ── Cegah scroll horizontal di HP (responsif semua ukuran) ── */
html{ overflow-x:hidden; }
@media (max-width:768px){
    .marquee-section.logo-loop{ width:100%;margin-left:0;margin-right:0; }
    .light-blobs span{ animation:none !important; }
}

/* ── Tema terang: KALENDER lebih jelas (kolom & nomor tanggal) ── */
html[data-theme="light"] .pub-cal-cell{ background:rgba(20,45,90,.05); border:1px solid rgba(20,45,90,.10); }
html[data-theme="light"] .pub-cal-cell.empty{ background:transparent;border-color:transparent; }
html[data-theme="light"] .pub-cal-cell.sun-col{ background:rgba(220,38,38,.08);border-color:rgba(220,38,38,.16); }
html[data-theme="light"] .pub-cal-cell.sat-col{ background:rgba(37,99,235,.08);border-color:rgba(37,99,235,.16); }
html[data-theme="light"] .pub-cal-tgl{ color:#16294a; }
html[data-theme="light"] .pub-cal-head{ color:#52617a; }
html[data-theme="light"] .pub-cal-head.sun{ color:#dc2626; }
html[data-theme="light"] .pub-cal-head.sat{ color:#2563eb; }
html[data-theme="light"] .agenda-kat{ background:rgba(20,45,90,.07);color:var(--text-muted); }

/* ── Tema terang: FIELD CARI — shadow + tetap glass ── */
html[data-theme="light"] .pub-search,
html[data-theme="light"] .search-row .pub-search{
    background:rgba(255,255,255,.55);
    border:1px solid rgba(20,45,90,.16);
    box-shadow:0 6px 18px rgba(20,45,90,.12), inset 0 1px 2px rgba(255,255,255,.7);
    backdrop-filter:blur(14px) saturate(160%);
    -webkit-backdrop-filter:blur(14px) saturate(160%);
    color:var(--text);
}
html[data-theme="light"] .pub-search::placeholder{ color:rgba(22,41,74,.52); }
html[data-theme="light"] .pub-search:focus,
html[data-theme="light"] .search-row .pub-search:focus{
    background:rgba(255,255,255,.74);
    border-color:rgba(47,111,176,.55);
    box-shadow:0 8px 22px rgba(20,45,90,.16), 0 0 0 3px rgba(47,111,176,.18);
}

/* ── Tema terang: NAVBAR lebih glass (lebih tembus + blur kuat) ── */
html[data-theme="light"] #pub-navbar{
    background:rgba(255,255,255,.52);
    backdrop-filter:blur(44px) saturate(180%);
    -webkit-backdrop-filter:blur(44px) saturate(180%);
}

/* ============================================================
   14. PERBAIKAN: footer, badge struktur, marquee statis, performa
   ============================================================ */

/* ── Hentikan efek geser (marquee) Karya & Galeri → jadi grid statis (ringan) ── */
.marquee-section.logo-loop .marquee-track{
    flex-wrap:wrap; justify-content:center; width:100% !important;
    transform:none !important; animation:none !important;
}
.marquee-section.logo-loop .marquee-seq{ flex:1 1 100%; width:100%; flex-wrap:wrap; justify-content:center; gap:.85rem; }
.marquee-section.logo-loop .marquee-seq[aria-hidden="true"],
.marquee-section.logo-loop .marquee-seq:nth-child(2){ display:none; }   /* sembunyikan duplikat */
.marquee-section.logo-loop .marquee-card{ margin-right:0; }
.marquee-section.logo-loop::before,
.marquee-section.logo-loop::after{ display:none !important; }            /* hapus gradient tepi */

/* ── Blob: hormati reduced-motion ── */
@media (prefers-reduced-motion:reduce){
    .light-blobs span{ animation:none !important; }
}

/* ── Badge jabatan struktur: SATU warna, jelas di kedua tema ── */
html[data-theme="light"] .pub-badge{ background:rgba(47,111,176,.14); color:#1d4ed8; border-color:rgba(47,111,176,.30); }

/* ── FOOTER tema terang: teks gelap + tombol diberi border & shadow ── */
html[data-theme="light"] .footer-nav-icon,
html[data-theme="light"] .pub-sosmed-btn{
    background:rgba(255,255,255,.7);
    border:1px solid rgba(20,45,90,.16);
    box-shadow:0 3px 10px rgba(20,45,90,.10);
    color:#3a4d6e;
}
html[data-theme="light"] .footer-nav-icon:hover,
html[data-theme="light"] .pub-sosmed-btn:hover{
    background:rgba(47,111,176,.14); color:#1d4ed8; border-color:rgba(47,111,176,.35);
}
html[data-theme="light"] .footer-admin-full{
    background:rgba(255,255,255,.7); color:#16294a;
    border:1px solid rgba(20,45,90,.18); box-shadow:0 4px 14px rgba(20,45,90,.12);
}
html[data-theme="light"] .footer-admin-full:hover{ background:rgba(47,111,176,.12); color:#1d4ed8; border-color:rgba(47,111,176,.35); }
html[data-theme="light"] .pub-footer{ background:rgba(20,45,90,.025); border-top-color:rgba(20,45,90,.10); }
html[data-theme="light"] .pub-footer__copy{ border-top-color:rgba(20,45,90,.10); }
/* Sidebar mobile: tombol login admin lebih terlihat di terang */
html[data-theme="light"] .sidebar-admin{
    background:rgba(255,255,255,.7); border:1px solid rgba(20,45,90,.16);
    box-shadow:0 3px 10px rgba(20,45,90,.10); color:#16294a;
}

/* Crossfade transisi tema (lebih halus dari sweep lingkaran) */
.theme-fade{ position:fixed; inset:0; z-index:99999; pointer-events:none; opacity:0; transition:opacity .26s ease-out; }

/* ============================================================
   15. PERANGKAT PEMBELAJARAN (halaman publik per guru)
   ============================================================ */
.perangkat-head-photo{
    width:84px;height:84px;border-radius:18px;object-fit:cover;flex-shrink:0;
    border:1px solid var(--glass-border);box-shadow:0 6px 20px var(--glass-shadow);
}
.perangkat-cat{ margin-bottom:1.75rem; }
.perangkat-cat-head{
    display:flex;align-items:center;gap:.55rem;
    font-size:1.05rem;font-weight:700;color:var(--text);
    padding-bottom:.6rem;margin-bottom:1rem;
    border-bottom:1px solid var(--divider);
}
.perangkat-cat-head i{ color:var(--accent);font-size:1.15rem; }
.perangkat-grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.85rem;
}
.perangkat-file{
    display:flex;align-items:center;gap:.8rem;
    padding:.75rem .85rem;border-radius:16px;
    background:var(--glass-bg);border:1px solid var(--glass-border);
    box-shadow:0 4px 16px var(--glass-shadow);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    color:var(--text);text-decoration:none;
    transition:transform .18s, border-color .18s, background .18s, box-shadow .18s;
}
.perangkat-file:hover{ transform:translateY(-3px);box-shadow:0 10px 26px var(--glass-shadow); }
html[data-theme="light"] .perangkat-file:hover{ background:rgba(255,255,255,.95); }
.perangkat-file-ic{
    width:46px;height:46px;border-radius:12px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;font-size:1.5rem;
}
.perangkat-file-meta{ display:flex;flex-direction:column;min-width:0;flex:1; }
.perangkat-file-label{ font-weight:700;font-size:.9rem;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.perangkat-file-type{ font-size:.72rem;color:var(--text-muted);margin-top:.1rem; }
.perangkat-file-ext{ font-size:.8rem;color:var(--text-subtle);flex-shrink:0;opacity:.7; }

/* Warna ikon per jenis file */
.pk-pdf    .perangkat-file-ic{ background:rgba(230,51,41,.14);  color:#e63329; }
.pk-word   .perangkat-file-ic{ background:rgba(43,87,154,.15);  color:#2b579a; }
.pk-excel  .perangkat-file-ic{ background:rgba(33,115,70,.14);  color:#217346; }
.pk-ppt    .perangkat-file-ic{ background:rgba(210,71,38,.14);  color:#d24726; }
.pk-form   .perangkat-file-ic{ background:rgba(124,58,237,.14); color:#7c3aed; }
.pk-drive  .perangkat-file-ic{ background:rgba(232,137,12,.16); color:#e8890c; }
.pk-gambar .perangkat-file-ic{ background:rgba(14,165,164,.14); color:#0ea5a4; }
.pk-video  .perangkat-file-ic{ background:rgba(220,38,38,.14);  color:#dc2626; }
.pk-link   .perangkat-file-ic{ background:rgba(74,159,212,.16); color:#3f7fb0; }
html[data-theme="light"] .pk-word .perangkat-file-ic{ color:#1e3f74; }
@media (max-width:480px){ .perangkat-grid{ grid-template-columns:1fr; } .perangkat-head-photo{ width:64px;height:64px; } }

/* tombol Perangkat Pembelajaran di kartu guru */
.pub-guru-perangkat{
    display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
    margin-top:.85rem;padding:.5rem .9rem;width:100%;
    border-radius:12px;font-size:.82rem;font-weight:600;text-decoration:none;
    color:var(--accent);
    background:var(--glass-bg);border:1px solid var(--glass-border);
    transition:transform .18s, background .18s, border-color .18s;
}
.pub-guru-perangkat:hover{ transform:translateY(-2px);border-color:rgba(96,165,250,.5); }
html[data-theme="light"] .pub-guru-perangkat:hover{ border-color:rgba(47,111,176,.5);background:rgba(255,255,255,.9); }
.pub-guru-perangkat i{ font-size:.95rem; }

/* ============================================================
   CAROUSEL KARTU (Karya Siswa & Galeri)
   Gaya: kartu di TENGAH tampil besar & paling depan, tetangga
   kiri-kanan mengecil, meredup, dan berada di belakang.
   Tetap 2 baris (1 kolom = 2 kartu) berapa pun jumlah datanya.
   ============================================================ */
.cf-wrap{ position:relative; --cf-col-w:210px; }

.cf{
    display:flex;
    gap:.85rem;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x proximity;      /* proximity: tidak "lengket", scroll halaman tetap lancar */
    padding:.5rem .75rem;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    cursor:grab;
    /* Sentuhan vertikal tetap menggulir HALAMAN (tidak tersangkut di carousel) */
    touch-action:pan-x pan-y;
    overscroll-behavior-x:contain;
    overscroll-behavior-y:auto;
}
.cf::-webkit-scrollbar{ display:none; }
.cf.cf--drag{ cursor:grabbing; }

.cf-col{
    flex:0 0 var(--cf-col-w);
    width:var(--cf-col-w);
    display:flex;
    flex-direction:column;
    gap:.85rem;
    scroll-snap-align:center;
    transform-origin:center center;
    transition:transform .22s ease, opacity .22s ease;
    will-change:transform;
}
.cf-wrap + .cf-wrap{ margin-top:.35rem; }
.cf-cell .pub-media-card{ height:100%; }
.cf .pub-media-card__title{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* Kolom yang sedang di tengah: bayangan lebih tegas agar terasa "paling depan" */
.cf-col--focus .glass-card{ box-shadow:0 20px 44px rgba(10,20,45,.34); }

/* Tombol panah — hanya untuk perangkat berpointer (desktop) */
.cf-nav{
    position:absolute; top:50%; transform:translateY(-50%);
    z-index:30; width:40px; height:40px; border-radius:50%;
    border:1px solid rgba(255,255,255,.3);
    background:rgba(18,28,52,.55); color:#fff;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; opacity:.9; transition:background .2s,opacity .2s;
}
.cf-nav:hover{ background:rgba(18,28,52,.85); opacity:1; }
.cf-prev{ left:-.25rem; }
.cf-next{ right:-.25rem; }
.cf-nav[disabled]{ opacity:.25; pointer-events:none; }
@media (hover:none){ .cf-nav{ display:none; } }

/* Titik indikator (seperti contoh referensi) */
.cf-dots{
    display:flex; justify-content:center; align-items:center;
    gap:.45rem; margin-top:.35rem;
}
.cf-dot{
    width:9px; height:9px; border-radius:50%; padding:0;
    border:1px solid var(--dkv-blue,#4a9fd4);
    background:transparent; cursor:pointer;
    transition:background .2s, transform .2s;
}
.cf-dot.is-active{ background:var(--dkv-blue,#4a9fd4); transform:scale(1.15); }

/* Lebar kolom: desktop menampilkan ~5 kolom, HP ~2 kolom */
@media (max-width:1200px){ .cf-wrap{ --cf-col-w:196px; } }
@media (max-width:992px){  .cf-wrap{ --cf-col-w:180px; } }
@media (max-width:768px){  .cf-wrap{ --cf-col-w:44vw; } .cf{ padding:.4rem .5rem; gap:.6rem; } }
@media (max-width:420px){  .cf-wrap{ --cf-col-w:50vw; } }

/* ============================================================
   PERFORMA MOBILE — kurangi pemborosan saat scroll di HP.
   backdrop-filter (efek kaca) memaksa browser me-render ulang
   blur tiap frame; di HP inilah penyebab utama scroll tersendat.
   Tampilan tetap serupa karena latar kartu dibuat lebih pekat.
   ============================================================ */
@media (max-width:768px){
    .glass-card, .glass-nav, .btn-glass, .pub-media-card,
    .pub-badge, .marquee-card, .cf-nav{
        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;
    }
    /* Bayangan besar juga mahal saat scroll — disederhanakan */
    .glass-card{ box-shadow:0 6px 16px rgba(10,20,45,.18); }
    .cf-col--focus .glass-card{ box-shadow:0 10px 22px rgba(10,20,45,.26); }
}