/* ===== Original inline style block 1 ===== */
:root{
  --ink:#17231e;
  --ink-soft:#5b675f;
  --cream:#F6F4EE;
  --cream-deep:#EAE8DF;
  --paper:#FFFFFF;
  --pine:#165C45;
  --pine-dark:#104735;
  --pine-deeper:#0B3428;
  --mint:#78A98F;
  --mint-soft:#E9F0EB;
  --gold:#B58A3A;
  --gold-light:#E1C98B;
  --gold-pale:#F5EEDC;
  --sky:#4D87A8;
  --line:rgba(23,35,30,0.11);
  --shadow:0 18px 45px -24px rgba(11,52,40,.30);
  --arch:22px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:linear-gradient(180deg,#F7F5EF 0%,#F3F1EA 100%);
  color:var(--ink);
  font-family:'Manrope', sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:'Spectral', serif;
  font-weight:600;
  line-height:1.08;
  margin:0;
  color:var(--pine-deeper);
  letter-spacing:-0.01em;
}
p{margin:0;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer;}
.eyebrow{
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px;}
:focus-visible{outline:3px solid var(--sky); outline-offset:2px;}

/* ---------- Header ---------- */
header.site{
  position:sticky; top:0; z-index:60;
  background:rgba(247,245,239,0.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-row{
  max-width:1180px; margin:0 auto; padding:12px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
}
.brand{display:flex; align-items:center; gap:12px;}
.brand img{width:44px; height:44px; object-fit:contain;}
.brand .name{font-family:'Spectral',serif; font-weight:600; font-size:16px; color:var(--pine-deeper); line-height:1.15;}
.brand .name small{display:block; font-family:'Manrope',sans-serif; font-weight:600; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); margin-top:2px;}
nav.tabs{display:flex; gap:4px; align-items:center;}
nav.tabs button{
  background:none; border:none; padding:9px 14px; border-radius:10px;
  font-size:14px; font-weight:600; color:var(--ink-soft);
  transition:background .15s, color .15s;
}
nav.tabs button:hover{background:var(--mint-soft); color:var(--pine-dark);}
nav.tabs button.active{background:var(--pine-deeper); color:#fff; box-shadow:0 6px 18px -12px rgba(11,52,40,.7);}
.nav-actions{display:flex; align-items:center; gap:8px;}
.btn-ppdb{
  background:var(--gold); color:var(--pine-deeper); font-weight:700; font-size:13px;
  padding:9px 16px; border-radius:10px; border:none; white-space:nowrap;
}
.btn-ppdb:hover{background:var(--gold-light);}
.menu-toggle{display:none; background:none; border:1px solid var(--line); border-radius:10px; padding:8px 10px;}
.admin-pill{
  display:flex; align-items:center; gap:6px; background:none; border:1px dashed var(--line);
  border-radius:999px; padding:8px 12px; font-size:12px; font-weight:600; color:var(--ink-soft);
}
.admin-pill.on{border-color:var(--pine); color:var(--pine-dark); background:var(--mint-soft);}
.admin-pill .dot{width:7px; height:7px; border-radius:50%; background:#c2c2c2;}
.admin-pill.on .dot{background:var(--pine);}

@media(max-width:880px){
  nav.tabs{
    position:fixed; inset:64px 0 auto 0; background:var(--paper); flex-direction:column;
    align-items:stretch; padding:10px; box-shadow:var(--shadow); border-bottom:1px solid var(--line);
    transform:translateY(-130%); opacity:0; pointer-events:none; transition:transform .25s ease, opacity .25s ease;
  }
  nav.tabs.open{transform:translateY(0); opacity:1; pointer-events:auto;}
  nav.tabs button{text-align:left;}
  .menu-toggle{display:block;}
  .brand .name{font-size:14px;}
}

/* ---------- View switcher (setiap menu = halaman/tab tersendiri) ---------- */
.view{display:none;}
.view.active{display:block; animation:viewIn .32s ease;}
@keyframes viewIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}

/* ---------- Sections generic ---------- */
section{padding:92px 0;}
.section-head{max-width:640px; margin:0 auto 44px; text-align:center;}
.section-head h2{font-size:clamp(30px,4vw,42px); margin-top:10px;}
.section-head p{margin-top:14px; color:var(--ink-soft); font-size:15.5px;}
.arch-divider{height:34px; background-image:radial-gradient(circle at 50% 0, transparent 16px, var(--cream) 17px); background-size:34px 34px; background-position:0 -1px;}
.arch-divider.on-pine{background-image:radial-gradient(circle at 50% 0, transparent 16px, var(--pine-deeper) 17px);}

/* ---------- Hero ---------- */
.hero{position:relative; color:#fff; overflow:hidden; background:var(--pine-deeper);}
.hero-media{position:absolute; inset:0;}
.hero-media img{width:100%; height:100%; object-fit:cover; opacity:.55;}
.hero-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(8,61,40,.55) 0%, rgba(8,61,40,.78) 55%, rgba(8,61,40,.96) 100%),
              radial-gradient(circle at 15% 20%, rgba(207,154,52,.25), transparent 45%);
}
.hero-inner{position:relative; padding:130px 28px 90px; max-width:1180px; margin:0 auto;}
.hero-badge{
  display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.35); padding:7px 14px; border-radius:999px;
  font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-bottom:22px;
}
.hero-badge .star{color:var(--gold-light);}
.hero h1{font-size:clamp(38px,6vw,66px); color:#fff; max-width:820px;}
.hero h1 em{font-style:italic; color:var(--gold-light); font-weight:500;}
.hero .tagline{margin-top:22px; max-width:560px; font-size:17px; color:rgba(255,255,255,.86);}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px;}
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:14px 26px; border-radius:999px;
  font-weight:700; font-size:14.5px; border:none; transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-gold{background:var(--gold); color:var(--pine-deeper); box-shadow:0 14px 30px -14px rgba(206,154,52,.7);}
.btn-gold:hover{background:var(--gold-light);}
.btn-ghost{background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.55);}
.btn-ghost:hover{background:rgba(255,255,255,.18);}
.btn-line{background:transparent; color:var(--pine-dark); border:1.5px solid var(--pine); padding:10px 18px; font-size:13.5px;}
.btn-line:hover{background:var(--mint-soft);}
.stat-strip{position:relative; display:flex; flex-wrap:wrap; gap:36px; margin-top:56px; padding-top:30px; border-top:1px solid rgba(255,255,255,.25);}
.stat-strip div b{display:block; font-family:'Spectral',serif; font-size:26px; color:var(--gold-light);}
.stat-strip div span{font-size:12.5px; color:rgba(255,255,255,.75); text-transform:uppercase; letter-spacing:.06em;}

/* ---------- Profil / Visi Misi ---------- */
.profil-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:start;}
.visi-card{
  background:linear-gradient(145deg,var(--pine-deeper),#124936); color:#fff; padding:46px 40px; border-radius:22px;
  position:relative; box-shadow:var(--shadow);
}
.visi-card .eyebrow{color:var(--gold-light);}
.visi-card blockquote{font-family:'Spectral',serif; font-style:italic; font-weight:500; font-size:21px; line-height:1.5; margin:16px 0 0; color:#fff;}
.misi-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px;}
.misi-list li{display:flex; gap:16px; padding-bottom:18px; border-bottom:1px solid var(--line);}
.misi-list li:last-child{border-bottom:none; padding-bottom:0;}
.misi-num{
  flex:none; width:34px; height:34px; border-radius:50%; background:var(--gold-pale); color:var(--gold);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; font-family:'Spectral',serif;
}
.misi-list p{font-size:15px; color:var(--ink-soft);}
@media(max-width:880px){.profil-grid{grid-template-columns:1fr;}}

/* ---------- Guru & Staff ---------- */
.guru-hero{
  position:relative; border-radius:24px; overflow:hidden; margin-bottom:56px; box-shadow:var(--shadow);
}
.guru-hero img{width:100%; max-height:420px; object-fit:cover;}
.guru-hero-cap{
  position:absolute; left:0; right:0; bottom:0; padding:22px 26px;
  background:linear-gradient(0deg, rgba(8,61,40,.88), transparent);
  color:#fff; font-size:13.5px; font-weight:600;
}
.cat-block{
  margin-bottom:26px; background:rgba(255,255,255,.78); border:1px solid var(--line); border-radius:18px;
  padding:28px 28px 32px; box-shadow:0 14px 30px -24px rgba(10,40,25,.32); backdrop-filter:blur(4px);
}
.cat-head{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-bottom:24px; padding-bottom:18px; border-bottom:1px solid var(--line);
}
.cat-head-left{display:flex; align-items:center; gap:14px; min-width:0;}
.cat-head h3{font-size:19px; color:var(--pine-dark); letter-spacing:-.015em;}
.cat-count{
  font-size:11.5px; font-weight:700; color:var(--ink-soft); background:var(--cream-deep);
  padding:6px 13px; border-radius:6px; white-space:nowrap; letter-spacing:.02em;
}
.cat-block.leaders-block{background:linear-gradient(180deg,#fff 0%,#fbfaf6 100%); border-color:rgba(181,138,58,.55); border-top:3px solid var(--gold);}
.people-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:18px;}
.person-card{
  background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:22px 16px 18px;
  text-align:center; position:relative; transition:box-shadow .15s ease, border-color .15s ease;
}
.person-card:hover{box-shadow:0 14px 30px -18px rgba(10,40,25,.26); border-color:rgba(22,92,69,.45); transform:translateY(-2px);}
.person-card.lead-card{
  border-color:var(--line); border-top:3px solid var(--gold); background:var(--paper);
}
.person-card.lead-card:hover{border-color:var(--pine);}
.person-card.lead-card .pjabatan{color:var(--gold-dark, #9c7420); font-weight:700;}
.avatar-frame{
  width:92px; height:92px; margin:0 auto 14px; overflow:hidden; position:relative;
  background:var(--cream-deep); border:1px solid var(--line);
  border-radius:8px;
}
.person-card.lead-card .avatar-frame{width:100px; height:100px; border-color:var(--gold);}
.avatar-frame img{width:100%; height:100%; object-fit:cover;}
.avatar-initials{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-family:'Spectral',serif; font-weight:600; font-size:24px; color:#fff;
}
.person-card .pname{font-size:14.5px; font-weight:700; color:var(--ink); line-height:1.3;}
.person-card .pjabatan{font-size:12px; color:var(--ink-soft); margin-top:5px; line-height:1.4;}

/* Pimpinan Madrasah: hierarki menurun (Pelindung > Penasehat > Kepala Madrasah) — bukan grid sejajar */
.people-grid.leaders{
  display:flex; flex-direction:column; align-items:center; gap:0; max-width:420px; margin:0 auto;
}
.leaders .person-card{width:100%;}
.leaders .add-person-card{width:100%; max-width:260px; margin-top:28px;}
.leaders .person-card:not(:first-child){margin-top:30px; position:relative;}
.leaders .person-card:not(:first-child)::before{
  content:""; position:absolute; top:-30px; left:50%; transform:translateX(-50%);
  width:1px; height:30px; background:var(--line);
}
.leaders .person-card:nth-child(1){
  max-width:340px; padding:30px 26px 26px; border:1px solid var(--line); border-top:3px solid var(--gold);
  box-shadow:0 10px 24px -18px rgba(10,40,25,.3); background:var(--paper);
}
.leaders .person-card:nth-child(1) .avatar-frame{width:132px; height:142px;}
.leaders .person-card:nth-child(1) .pname{font-size:18px;}
.leaders .person-card:nth-child(1) .pjabatan{font-size:13px; font-weight:600; color:var(--pine-dark);}
.leaders .person-card:nth-child(2){max-width:300px; padding:24px 20px 20px;}
.leaders .person-card:nth-child(2) .avatar-frame{width:104px; height:112px;}
.leaders .person-card:nth-child(2) .pname{font-size:15.5px;}
.leaders .person-card:nth-child(3){max-width:264px; padding:20px 16px 16px;}
.leaders .person-card:nth-child(3) .avatar-frame{width:86px; height:93px;}
.leaders .person-card:nth-child(3) .pname{font-size:14px;}
@media(max-width:520px){
  .leaders .person-card:nth-child(1){max-width:100%;}
  .leaders .person-card:nth-child(2){max-width:100%;}
  .leaders .person-card:nth-child(3){max-width:100%;}
}
.card-admin-actions{position:absolute; top:10px; right:10px; display:flex; gap:6px; opacity:0; transition:opacity .15s;}
.person-card:hover .card-admin-actions{opacity:1;}
.icon-btn{
  width:28px; height:28px; border-radius:8px; border:1px solid var(--line); background:var(--paper);
  display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--ink-soft);
}
.icon-btn:hover{background:var(--mint-soft); color:var(--pine-dark);}
.icon-btn.danger:hover{background:#fbe4e0; color:#b8402a;}
.add-person-card{
  border:1.5px dashed var(--line); border-radius:8px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:6px; min-height:170px; color:var(--ink-soft); font-size:13px; font-weight:600; background:transparent;
}
.add-person-card:hover{border-color:var(--pine); color:var(--pine-dark); background:var(--cream);}
.add-person-card .plus{font-size:22px; color:var(--pine);}

/* ---------- Refinements ---------- */
.cat-head{margin-bottom:22px;}
.cat-head h3{position:relative; padding-left:16px;}
.cat-head h3::before{content:""; position:absolute; left:0; top:.18em; width:3px; height:1.2em; border-radius:3px; background:var(--gold);}
.person-card,.gal-card,.cat-block{transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;}
/* ---------- Galeri ---------- */
.filter-row{display:flex; gap:10px; justify-content:center; margin-bottom:34px; flex-wrap:wrap;}
.chip{
  padding:9px 18px; border-radius:999px; border:1px solid var(--line); background:var(--paper);
  font-size:13.5px; font-weight:600; color:var(--ink-soft);
}
.chip.active{background:var(--pine); border-color:var(--pine); color:#fff;}
.gal-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:20px;}
.gal-card{
  border-radius:18px; overflow:hidden; background:var(--paper); border:1px solid var(--line); position:relative;
  box-shadow:0 10px 24px -18px rgba(10,40,25,.4);
}
.gal-card .gimg{aspect-ratio:4/3; overflow:hidden; background:var(--mint-soft);}
.gal-card .gimg img{width:100%; height:100%; object-fit:cover;}
.gal-card .gbody{padding:13px 15px 15px;}
.gal-card .gtag{font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--gold);}
.gal-card .gcap{font-size:13.5px; margin-top:5px; color:var(--ink); font-weight:600; line-height:1.4;}
.gal-card .gdate{font-size:11.5px; color:var(--ink-soft); margin-top:4px;}
.gal-card .icon-btn.danger{position:absolute; top:10px; right:10px; background:rgba(255,255,255,.9); opacity:0; transition:opacity .15s;}
.gal-card:hover .icon-btn.danger{opacity:1;}
.gal-card .gimg.gvid-facade{position:relative; cursor:pointer;}
.gal-card .gimg.gvid-facade img{filter:brightness(.82);}
.gal-card .gvid-play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
.gal-card .gvid-play span{
  width:52px; height:52px; border-radius:999px; background:rgba(19,46,40,.78); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:18px; box-shadow:0 8px 20px -10px rgba(0,0,0,.6);
  transition:transform .18s ease, background .18s ease;
}
.gal-card .gimg.gvid-facade:hover .gvid-play span{transform:scale(1.08); background:var(--pine);}
.gal-card .gimg iframe{width:100%; height:100%; border:0;}
.gal-card video.gvid-native{width:100%; height:100%; object-fit:cover; display:block; background:#000;}
.gal-card .gtag.gtag-video::before{content:"▶ "; font-size:9px;}
.add-gal-card{
  border:1.5px dashed var(--line); border-radius:18px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:8px; aspect-ratio:4/3; color:var(--ink-soft); font-weight:600; font-size:13.5px; background:transparent;
}
.add-gal-card:hover{border-color:var(--pine); color:var(--pine-dark); background:var(--mint-soft);}
.add-gal-card .plus{font-size:26px; color:var(--gold);}
.empty-state{text-align:center; padding:50px 20px; color:var(--ink-soft); font-size:14px; border:1.5px dashed var(--line); border-radius:16px;}

/* ---------- Kontak / Footer ---------- */
footer.site{background:linear-gradient(150deg,#0B3428,#08271F); color:rgba(255,255,255,.88); padding-top:70px;}
.contact-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:56px;}
footer .eyebrow{color:var(--gold-light);}
footer h2{color:#fff;}
.contact-list{list-style:none; margin:26px 0 0; padding:0; display:flex; flex-direction:column; gap:16px;}
.contact-list li{display:flex; align-items:center; gap:14px; font-size:14.5px;}
.contact-list .ic{
  width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center; flex:none; font-size:16px;
}
.contact-list a:hover{color:var(--gold-light);}
.social-row{display:flex; gap:10px; margin-top:26px;}
.social-row a{
  width:42px; height:42px; border-radius:12px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center; font-size:16px;
}
.social-row a:hover{background:var(--gold); color:var(--pine-deeper); border-color:var(--gold);}
.map-card{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); border-radius:20px; padding:28px; text-align:center;}
.map-card .mapicon{font-size:30px; margin-bottom:10px;}
.map-card p{font-size:13.5px; color:rgba(255,255,255,.75); margin-top:8px;}
.ppdb-card{
  margin-top:20px; background:linear-gradient(135deg, var(--gold), var(--gold-light)); border-radius:20px; padding:28px;
  color:var(--pine-deeper); text-align:center;
}
.ppdb-card h3{color:var(--pine-deeper); font-size:19px;}
.ppdb-card p{font-size:13px; margin-top:8px; color:#4a3a12;}
.ppdb-card .btn{margin-top:16px; background:var(--pine-deeper); color:#fff;}
.foot-bottom{
  margin-top:60px; border-top:1px solid rgba(255,255,255,.15); padding:22px 0; display:flex; justify-content:space-between;
  align-items:center; flex-wrap:wrap; gap:10px; font-size:12.5px; color:rgba(255,255,255,.6);
}
.foot-bottom button{background:none; border:none; color:rgba(255,255,255,.5); font-size:12px; text-decoration:underline; text-underline-offset:3px;}
.foot-bottom button:hover{color:var(--gold-light);}
@media(max-width:880px){.contact-grid{grid-template-columns:1fr;}}

/* ---------- Modals & Toast ---------- */
.overlay{
  position:fixed; inset:0; background:rgba(8,20,14,.55); backdrop-filter:blur(3px); z-index:200;
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity .18s ease;
}
.overlay.show{opacity:1; pointer-events:auto;}
.modal{
  background:var(--paper); border-radius:20px; width:100%; max-width:440px; padding:30px 28px 28px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.4); max-height:88vh; overflow-y:auto;
  transform:translateY(14px); transition:transform .18s ease;
}
.overlay.show .modal{transform:translateY(0);}
.modal h3{font-size:19px; margin-bottom:4px;}
.modal .sub{font-size:13px; color:var(--ink-soft); margin-bottom:20px;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:12.5px; font-weight:700; color:var(--ink-soft); margin-bottom:6px; text-transform:uppercase; letter-spacing:.04em;}
.field input[type=text], .field input[type=password], .field select, .field textarea{
  width:100%; padding:11px 13px; border-radius:10px; border:1.5px solid var(--line); font-family:inherit; font-size:14px; background:var(--cream);
}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--pine); outline:none; background:#fff;}
.field textarea{resize:vertical; min-height:70px;}
.photo-drop{
  border:1.5px dashed var(--line); border-radius:14px; padding:16px; text-align:center; cursor:pointer; font-size:13px; color:var(--ink-soft); position:relative;
}
.photo-drop:hover{border-color:var(--pine); background:var(--mint-soft);}
.photo-drop img{max-height:110px; margin:0 auto 8px; border-radius:8px;}
.photo-drop input{position:absolute; inset:0; opacity:0; cursor:pointer;}
.modal-actions{display:flex; gap:10px; margin-top:22px;}
.modal-actions .btn{flex:1; justify-content:center; padding:12px;}
.btn-cancel{background:var(--cream-deep); color:var(--ink-soft);}
.btn-solid{background:var(--pine); color:#fff;}
.btn-solid:hover{background:var(--pine-dark);}
.btn-danger{background:#c2452f; color:#fff;}
.btn-danger:hover{background:#a83a26;}
.close-x{position:absolute; top:16px; right:16px; background:none; border:none; font-size:18px; color:var(--ink-soft); width:30px; height:30px;}
.modal{position:relative;}
.toast{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px); z-index:300;
  background:var(--pine-deeper); color:#fff; padding:13px 22px; border-radius:999px; font-size:13.5px; font-weight:600;
  opacity:0; pointer-events:none; transition:all .25s ease; box-shadow:var(--shadow); display:flex; align-items:center; gap:8px;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
.suggest-box{background:var(--mint-soft); border:1px solid var(--line); border-radius:18px; padding:26px 28px; margin-top:10px;}
.suggest-box h4{font-family:'Spectral',serif; font-size:16px; color:var(--pine-dark); margin-bottom:10px;}
.suggest-box ul{margin:0; padding-left:20px; color:var(--ink-soft); font-size:13.5px; display:flex; flex-direction:column; gap:6px;}
.suggest-box.on-dark{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.18); margin-top:44px;}
.suggest-box.on-dark h4{color:var(--gold-light);}
.suggest-box.on-dark ul{color:rgba(255,255,255,.72);}
.skeleton{background:linear-gradient(90deg, var(--cream-deep) 25%, #f5f3e8 37%, var(--cream-deep) 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:16px; height:170px;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* ---------- WhatsApp mengambang ---------- */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:150;
  width:58px; height:58px; border-radius:50%; background:#25D366;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 30px -10px rgba(10,40,25,.55);
  transition:transform .15s ease, box-shadow .15s ease;
}
.wa-float:hover{transform:translateY(-3px) scale(1.05); box-shadow:0 18px 36px -8px rgba(10,40,25,.6);}
.wa-pulse{
  position:absolute; inset:0; border-radius:50%; background:#25D366; z-index:-1;
  animation:waPulse 2.4s ease-out infinite;
}
@keyframes waPulse{0%{transform:scale(1); opacity:.55;} 100%{transform:scale(1.75); opacity:0;}}
@media(max-width:880px){
  .wa-float{right:16px; bottom:16px; width:52px; height:52px;}
  .wa-float svg{width:26px; height:26px;}
}

/* =========================================================
   STARFIELD THEME — terinspirasi pola bintang/girih MA7
========================================================= */
body{
  background:
    radial-gradient(circle at 15% 5%, rgba(120,169,143,.16), transparent 28%),
    radial-gradient(circle at 88% 10%, rgba(181,138,58,.12), transparent 26%),
    linear-gradient(180deg,#071815 0%,#0A1F1A 46%,#071815 100%);
  color:#F3EFE1;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.92) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(214,173,96,.85) 0 1.1px, transparent 1.8px),
    radial-gradient(circle, rgba(111,231,208,.65) 0 .9px, transparent 1.7px);
  background-size: 137px 137px, 211px 211px, 89px 89px;
  background-position: 14px 18px, 37px 72px, 53px 27px;
  opacity:.34;
}
body::after{
  content:""; position:fixed; inset:0; z-index:-3; pointer-events:none;
  background:
    radial-gradient(ellipse 720px 420px at 78% 10%, rgba(23,184,142,.09), transparent 70%),
    radial-gradient(ellipse 620px 420px at 18% 82%, rgba(214,173,96,.06), transparent 70%);
}
header.site{
  background:rgba(7,24,21,.78);
  border-bottom:1px solid rgba(111,231,208,.14);
}
.nav-row{border-radius:18px;}
.brand .name{color:#F3EFE1;}
.brand .name small{color:#D6AD60;}
nav.tabs button{color:#B9C7C0;}
nav.tabs button:hover{background:rgba(111,231,208,.09);color:#F3EFE1;}
nav.tabs button.active{background:#17B88E;color:#04120E;box-shadow:0 8px 24px -14px rgba(23,184,142,.7);}
.admin-pill{color:#B9C7C0;border-color:rgba(111,231,208,.18);}
.admin-pill.on{background:rgba(23,184,142,.12);border-color:#17B88E;color:#6FE7D0;}
.hero{background:#071815;}
.hero-media::after{
  background:linear-gradient(180deg,rgba(7,24,21,.42) 0%,rgba(7,24,21,.76) 60%,rgba(7,24,21,.96) 100%),
             radial-gradient(circle at 20% 18%,rgba(214,173,96,.13),transparent 42%);
}
.hero::before{
  content:""; position:absolute; width:620px; height:620px; right:-190px; top:70px; opacity:.42;
  background:
    radial-gradient(circle at center, rgba(23,184,142,.18), transparent 56%),
    repeating-conic-gradient(from 11.25deg, rgba(111,231,208,.25) 0 1deg, transparent 1deg 22.5deg);
  clip-path:polygon(50% 0,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,39% 38%);
  filter:blur(.2px);
  pointer-events:none;
}
.view:not(.hero){background:transparent !important;color:#F3EFE1;}
.section-head p,.profil-grid,.misi-list p,.person-card .pjabatan,.cat-count,.gal-card .gdate,.empty-state{color:#B9C7C0;}
.cat-block,.person-card,.gal-card,.map-card,.suggest-box,.visi-card,.ppdb-card{background:rgba(15,38,33,.78) !important;border-color:rgba(111,231,208,.14) !important;color:#F3EFE1;}
.cat-block{backdrop-filter:blur(10px);}
.person-card,.gal-card{box-shadow:0 18px 45px -28px rgba(0,0,0,.65);}
.person-card .pname,.gal-card .gcap,.cat-head h3,.section-head h2,.profil-grid h3{color:#F3EFE1 !important;}
.avatar-frame{background:#132E28;border-color:rgba(111,231,208,.14);}
.add-person-card,.add-gal-card{color:#B9C7C0;border-color:rgba(111,231,208,.18);}
.add-person-card:hover,.add-gal-card:hover{border-color:#17B88E;background:rgba(23,184,142,.08);color:#F3EFE1;}
.skeleton{background:linear-gradient(90deg,#132E28 25%,#19352e 37%,#132E28 63%);}
.gal-card .gbody{background:rgba(15,38,33,.8);}
.gal-card .gimg{background:#132E28;}
.modal{background:#F6F4EE;color:#17231e;}
footer.site{background:linear-gradient(150deg,#071815,#0B3428) !important;}
.star-motif{position:absolute;width:260px;height:260px;right:4%;top:14%;opacity:.28;pointer-events:none;}
.star-motif::before,.star-motif::after{content:"";position:absolute;inset:25%;border:1px solid rgba(111,231,208,.65);transform:rotate(45deg);}
.star-motif::after{inset:34%;border-color:rgba(214,173,96,.55);transform:rotate(45deg) scale(1.35);}
/* ---------- SANTRI DIRECTORY ---------- */
.santri-wrap{max-width:1180px;margin:0 auto;padding:92px 28px;}
.santri-toolbar{display:grid;grid-template-columns:minmax(240px,1fr) repeat(4,minmax(120px,180px));gap:10px;margin-bottom:22px;}
.santri-input,.santri-select{width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(111,231,208,.16);background:rgba(255,255,255,.045);color:#F3EFE1;font:inherit;outline:none;}
.santri-input::placeholder{color:#7E938C;}
.santri-select option{background:#0F2621;color:#F3EFE1;}
.santri-meta{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;margin:0 0 16px;color:#7E938C;font:12px 'JetBrains Mono',monospace;}
.santri-meta b{color:#6FE7D0;font-weight:600;}
.santri-table-wrap{border:1px solid rgba(111,231,208,.14);border-radius:18px;overflow:auto;background:rgba(15,38,33,.68);box-shadow:0 18px 45px -28px rgba(0,0,0,.6);}
.santri-table{width:100%;border-collapse:collapse;min-width:980px;}
.santri-table th,.santri-table td{padding:13px 14px;border-bottom:1px solid rgba(255,255,255,.055);text-align:left;font-size:13px;}
.santri-table th{background:rgba(111,231,208,.06);color:#6FE7D0;font:600 11px 'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:uppercase;position:sticky;top:0;z-index:1;}
.santri-table td{color:#DDE7E2;}
.santri-table tr:hover td{background:rgba(23,184,142,.045);}
.santri-name{font-weight:700;color:#F3EFE1 !important;}
.santri-tag{display:inline-flex;padding:4px 8px;border-radius:999px;background:rgba(23,184,142,.10);color:#6FE7D0;font:10px 'JetBrains Mono',monospace;}
.santri-tag.gold{background:rgba(214,173,96,.10);color:#D6AD60;}
.santri-pagination{display:flex;justify-content:center;gap:8px;margin-top:20px;}
.santri-pagination button{border:1px solid rgba(111,231,208,.16);background:rgba(255,255,255,.035);color:#B9C7C0;padding:8px 12px;border-radius:10px;font-weight:700;}
.santri-pagination button.active{background:#17B88E;color:#04120E;border-color:#17B88E;}
.santri-count{font:11px 'JetBrains Mono',monospace;color:#7E938C;}
@media(max-width:1050px){.santri-toolbar{grid-template-columns:1fr 1fr 1fr;}.santri-toolbar .santri-input{grid-column:1/-1;}}
@media(max-width:700px){.santri-wrap{padding:72px 18px;}.santri-toolbar{grid-template-columns:1fr 1fr;}.santri-toolbar .santri-input{grid-column:1/-1;}.star-motif{right:-70px;top:22%;opacity:.18;}}


.admin-only-banner{margin:0 0 20px;padding:15px 18px;border:1px solid rgba(185,138,63,.35);border-radius:16px;background:rgba(185,138,63,.09);display:flex;gap:12px;align-items:flex-start}
.admin-only-banner strong{white-space:nowrap;letter-spacing:.08em}
.admin-only-banner span{opacity:.8;line-height:1.5;font-size:13px}
@media(max-width:700px){.admin-only-banner{display:block}.admin-only-banner strong{display:block;margin-bottom:5px}}


.public-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}.public-stat-card{padding:24px;border:1px solid rgba(111,231,208,.14);border-radius:18px;background:linear-gradient(145deg,rgba(15,38,33,.86),rgba(11,27,24,.72));box-shadow:0 18px 45px -32px rgba(0,0,0,.75)}.public-stat-card .kicker{font:10px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:#7E938C}.public-stat-card .num{display:block;margin:8px 0 2px;font:700 34px 'Spectral',serif;color:#6FE7D0}.public-stat-card .label{color:#DDE7E2;font-size:13px}.public-panel{margin-top:18px;padding:24px;border:1px solid rgba(111,231,208,.14);border-radius:20px;background:rgba(15,38,33,.68);box-shadow:0 18px 45px -28px rgba(0,0,0,.6)}.public-panel-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-end;margin-bottom:18px}.public-panel-head h3{margin-top:5px;color:#F3EFE1;font:600 24px 'Spectral',serif}.public-caption{font:10px 'JetBrains Mono',monospace;color:#7E938C;text-transform:uppercase;letter-spacing:.07em}.class-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.class-card,.program-card{padding:13px 14px;border:1px solid rgba(255,255,255,.06);border-radius:14px;background:rgba(255,255,255,.025)}.class-card .top,.program-card .top{display:flex;justify-content:space-between;gap:10px;color:#DDE7E2;font-size:13px}.class-card .bar,.program-card .bar{height:6px;margin-top:10px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden}.class-card .bar span,.program-card .bar span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#17B88E,#6FE7D0)}.program-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.program-card .count{font:700 25px 'Spectral',serif;color:#D6AD60}.public-two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}.gender-row{margin:12px 0 18px}.gender-line{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:#DDE7E2}.gender-bar{height:8px;margin-top:8px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden}.gender-bar span{display:block;height:100%;border-radius:99px;background:#6FE7D0}.province-list{display:grid;gap:10px;max-height:390px;overflow:auto;padding-right:4px}.province-row{display:grid;grid-template-columns:minmax(120px,1fr) 70px;gap:10px;align-items:center}.province-name{font-size:12px;color:#DDE7E2}.province-count{text-align:right;font:11px 'JetBrains Mono',monospace;color:#6FE7D0}.province-bar{grid-column:1/-1;height:5px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden}.province-bar span{display:block;height:100%;border-radius:99px;background:#D6AD60}.public-note{display:flex;gap:14px;align-items:center;margin-top:18px;padding:18px 20px;border:1px dashed rgba(214,173,96,.35);border-radius:18px;background:rgba(214,173,96,.07)}.public-note .note-icon{font-size:21px;color:#D6AD60}.public-note b{color:#F3EFE1}.public-note p{margin-top:4px;color:#AEBDB5;font-size:12px;line-height:1.5}.public-note .btn{margin-left:auto;white-space:nowrap}.admin-console-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;margin-bottom:24px;padding:20px;border:1px solid rgba(214,173,96,.2);border-radius:18px;background:rgba(214,173,96,.06)}.admin-console-head h3{margin-top:6px;color:#F3EFE1;font:600 27px 'Spectral',serif}.admin-console-head p{margin-top:6px;color:#AEBDB5;font-size:13px}.admin-console-head .eyebrow{color:#D6AD60}.admin-panel-hidden{display:none}.admin-panel-visible{display:block}@media(max-width:900px){.public-stat-grid{grid-template-columns:repeat(2,1fr)}.class-grid,.program-grid{grid-template-columns:repeat(2,1fr)}.public-two-col{grid-template-columns:1fr}.admin-console-head{align-items:flex-start;flex-direction:column}.public-note{align-items:flex-start;flex-wrap:wrap}.public-note .btn{margin-left:35px}}@media(max-width:560px){.public-stat-grid,.class-grid,.program-grid{grid-template-columns:1fr}.public-panel{padding:18px}.public-note .btn{margin-left:0}.province-row{grid-template-columns:1fr 55px}}


/* ---------- Contact strip on every tab ---------- */
.section-contact-strip{
  margin-top:56px;
  padding:24px 26px;
  border-top:1px solid rgba(255,255,255,.10);
  background:linear-gradient(135deg, rgba(8,46,36,.96), rgba(7,32,27,.96));
  color:rgba(255,255,255,.88);
  display:grid;
  grid-template-columns:1.15fr 1.45fr auto;
  align-items:center;
  gap:24px;
  border-radius:18px 18px 0 0;
  box-shadow:0 -12px 35px rgba(0,0,0,.10);
}
.section-contact-brand{
  display:flex;
  flex-direction:column;
  gap:5px;
}
.section-contact-kicker{
  font-size:10px;
  letter-spacing:.16em;
  color:#D6AD60;
  font-weight:800;
}
.section-contact-brand strong{
  font-size:15px;
  color:#fff;
}
.section-contact-items{
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  font-size:12.5px;
  color:rgba(255,255,255,.72);
}
.section-contact-items a{
  color:rgba(255,255,255,.86);
  text-decoration:none;
}
.section-contact-items a:hover{
  color:#6FE7D0;
}
.section-contact-action{
  justify-self:end;
}
.section-contact-link{
  display:inline-flex;
  align-items:center;
  padding:10px 14px;
  border:1px solid rgba(111,231,208,.24);
  border-radius:999px;
  color:#6FE7D0;
  text-decoration:none;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}
.section-contact-link:hover{
  background:rgba(111,231,208,.08);
}
@media(max-width:900px){
  .section-contact-strip{
    grid-template-columns:1fr;
    gap:14px;
    margin-top:40px;
  }
  .section-contact-action{
    justify-self:start;
  }
}
/* =========================================================
   PESANTREN STAR BACKGROUND — inspired by the supplied SS
   ========================================================= */
html, body{
  background:#071b17 !important;
  color:#f3efe1;
}
body{
  position:relative;
  overflow-x:hidden;
}

/* Deep emerald canvas */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-6;
  pointer-events:none;
  background:
    radial-gradient(900px 620px at 92% 46%, rgba(18,116,91,.18), transparent 65%),
    radial-gradient(780px 500px at 8% 3%, rgba(19,132,104,.10), transparent 64%),
    linear-gradient(180deg,#071c18 0%,#061713 55%,#071815 100%);
}

/* fine architectural grid */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-5;
  pointer-events:none;
  opacity:.55;
  background:
    linear-gradient(90deg,rgba(102,210,191,.16) 1px,transparent 1px) 0 0/120px 100%,
    linear-gradient(0deg,rgba(102,210,191,.12) 1px,transparent 1px) 0 0/100% 110px;
}

/* repeating star-field layer */
body > .bg-field{
  position:fixed !important;
  inset:0 !important;
  z-index:-4 !important;
  pointer-events:none !important;
  opacity:.92 !important;
  background:transparent !important;
}
body > .bg-field svg{
  width:100% !important;
  height:100% !important;
  opacity:1 !important;
}

/* Keep page content visually above the motif */
header, nav, main, footer, .view{
  position:relative;
  z-index:1;
}

/* Make cards feel integrated with the pesantren background */
.card, .glass, .panel, .hero-panel, .stat-card, .stat-chip{
  background:linear-gradient(180deg,rgba(15,39,33,.88),rgba(10,31,26,.92));
  border-color:rgba(111,231,208,.16);
}

/* Active sections keep full viewport rhythm; footer strip remains low. */
.view.active{
  min-height:calc(100vh - 82px);
  display:flex !important;
  flex-direction:column;
}
.view.active > .section-contact-strip{
  margin-top:auto !important;
  border-radius:0 !important;
  width:100% !important;
}

/* === Strong Islamic star background: visible behind every tab === */
html, body{
  background:#071815 !important;
}
body{
  position:relative;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-10;
  pointer-events:none;
  background:
    radial-gradient(900px 620px at 90% 46%, rgba(23,184,142,.11), transparent 68%),
    radial-gradient(850px 520px at 10% 5%, rgba(23,184,142,.07), transparent 70%),
    #071815;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-9;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(111,231,208,.075) 1px, transparent 1px) 0 0/160px 140px,
    linear-gradient(0deg, rgba(111,231,208,.065) 1px, transparent 1px) 0 0/160px 140px;
}
body > .bg-field{
  position:fixed !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  opacity:1 !important;
  display:block !important;
}
body > .bg-field svg{
  width:100% !important;
  height:100% !important;
  opacity:1 !important;
  display:block !important;
}
header.site, main, footer, .view{
  position:relative;
  z-index:1;
}
header.site{
  z-index:10;
}

/* Dense polkadot-style Islamic motif: smaller + more frequent */
body > .bg-field svg{
  width:100% !important;
  height:100% !important;
  opacity:.94 !important;
}
body > .bg-field{
  opacity:1 !important;
}

/* =========================================================
   ISLAMIC PESANTREN MOTIFS PER TAB
   ========================================================= */
.islamic-page{
  position:relative !important;
  isolation:isolate;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(7,24,21,.965), rgba(6,22,19,.975)) !important;
}
.islamic-page::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background-repeat:no-repeat;
  background-position:right 26% center;
  background-size:min(760px,68vw) auto;
  opacity:.30;
  filter:drop-shadow(0 0 18px rgba(23,184,142,.10));
}
.islamic-page::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.10;
  background:
    radial-gradient(circle at 18% 18%, rgba(214,173,96,.24), transparent 18%),
    radial-gradient(circle at 78% 76%, rgba(23,184,142,.22), transparent 22%);
}
.islamic-page > .wrap,
.islamic-page > .section-contact-strip{
  position:relative;
  z-index:2;
}
#profil.islamic-page::before{background-image:url(../img/motif-01.svg);}
#guru.islamic-page::before{background-image:url(../img/motif-02.svg); background-position:left 22% center;}
#santri.islamic-page::before{background-image:url(../img/motif-03.svg); background-position:right 18% center;}
#berita.islamic-page::before{background-image:url(../img/motif-04.svg); background-position:left 18% center;}
#kontak.islamic-page::before{background-image:url(../img/motif-05.svg); background-position:right 18% center; opacity:.27;}

.islamic-page .section-head,
.islamic-page .card,
.islamic-page .panel,
.islamic-page .guru-hero,
.islamic-page .contact-grid,
.islamic-page .profil-grid,
.islamic-page .santri-shell,
.islamic-page #galeriContainer{
  position:relative;
  z-index:2;
}

@media(max-width:760px){
  .islamic-page::before{
    background-size:520px auto;
    opacity:.19;
    background-position:center bottom 90px;
  }
  #guru.islamic-page::before,
  #berita.islamic-page::before{
    background-position:center 30% !important;
  }
}

header.site::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(214,173,96,.45), rgba(111,231,208,.45), transparent);
  pointer-events:none;
}
\n/* ===== Premium minimal / no-pattern background ===== */\n:root{--bg:#06130F;--bg2:#0A1E18;--glass:rgba(12,34,28,.68);--line:rgba(158,219,204,.13);--mint:#66E2C4;--gold:#D9B56A;--text:#F3EFE3;--muted:#A9BCB5;}\nhtml,body{background:var(--bg)!important;color:var(--text)!important;}\nbody{min-height:100%;position:relative;overflow-x:hidden;}\nbody::before{content:"";position:fixed;inset:-12%;z-index:-5;pointer-events:none;background:radial-gradient(700px 420px at 8% 2%,rgba(102,226,196,.13),transparent 68%),radial-gradient(680px 430px at 92% 20%,rgba(217,181,106,.09),transparent 70%),radial-gradient(520px 520px at 50% 100%,rgba(58,124,106,.08),transparent 72%),linear-gradient(180deg,#071814 0%,#06130F 58%,#081913 100%);}\nbody::after{content:"";position:fixed;inset:0;z-index:-4;pointer-events:none;background:linear-gradient(120deg,transparent 0 46%,rgba(255,255,255,.025) 50%,transparent 54%),linear-gradient(300deg,transparent 0 46%,rgba(255,255,255,.018) 50%,transparent 54%);opacity:.35;}\n.view{background:transparent!important;}\n.view.active{position:relative;}\n.view.active::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(520px 280px at 12% 16%,rgba(102,226,196,.045),transparent 72%),radial-gradient(480px 320px at 88% 76%,rgba(217,181,106,.035),transparent 74%);}\nheader.site{background:rgba(5,18,14,.72)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid rgba(158,219,204,.10)!important;box-shadow:0 12px 34px rgba(0,0,0,.18);}\n.hero,.hero-section{min-height:calc(100vh - 82px);display:flex;align-items:center;}\n.hero::after,.hero-section::after{content:"";position:absolute;width:420px;height:420px;right:-90px;top:18%;border-radius:50%;background:radial-gradient(circle,rgba(102,226,196,.10),transparent 68%);filter:blur(20px);pointer-events:none;}\n.card,.panel,.glass,.stat-card,.info-card,.contact-card,.guru-card,.santri-card,.news-card{background:linear-gradient(180deg,rgba(17,43,35,.72),rgba(8,24,20,.84))!important;border:1px solid var(--line)!important;box-shadow:0 18px 50px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.025);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}\n.card:hover,.panel:hover,.glass:hover,.stat-card:hover,.info-card:hover,.contact-card:hover,.guru-card:hover,.santri-card:hover,.news-card:hover{border-color:rgba(102,226,196,.22)!important;box-shadow:0 22px 52px rgba(0,0,0,.20),0 0 0 1px rgba(102,226,196,.025),inset 0 1px 0 rgba(255,255,255,.03);}\n.section-head h1,.section-head h2,.section-head h3,.hero h1,.hero-title{text-shadow:0 5px 30px rgba(0,0,0,.24);}\n.section-desc,.hero-lede{color:#AFC0BA!important;}\nbutton,.btn,.filter-select,.search-box,.tab-btn,.badge,.chip{transition:transform .25s ease,border-color .25s ease,background .25s ease,box-shadow .25s ease;}\n.filter-select,.search-box,.tab-btn{background:rgba(255,255,255,.025)!important;border-color:var(--line)!important;}\n.btn-primary{box-shadow:0 10px 32px rgba(23,184,142,.18)!important;}\n.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(23,184,142,.24)!important;}\n.section-contact-strip{margin-top:auto!important;background:linear-gradient(180deg,rgba(8,23,19,.88),rgba(5,16,13,.96))!important;border-top:1px solid rgba(158,219,204,.10)!important;border-bottom:1px solid rgba(158,219,204,.06)!important;box-shadow:0 -24px 50px -38px rgba(0,0,0,.8)!important;}\n.section-contact-strip::before{background:linear-gradient(90deg,transparent,rgba(217,181,106,.38),rgba(102,226,196,.38),transparent)!important;}\nfooter{background:rgba(4,14,11,.78)!important;border-top:1px solid rgba(158,219,204,.08)!important;}\n::-webkit-scrollbar-track{background:#06130F;}\n::-webkit-scrollbar-thumb{background:rgba(102,226,196,.22);border:2px solid #06130F;}\n::-webkit-scrollbar-thumb:hover{background:rgba(102,226,196,.40);}\n@media(max-width:760px){.hero,.hero-section{min-height:auto;padding-top:120px;padding-bottom:72px;}}\n
/* Yayasan logo for Kunjungi Kampus Kami */
.map-card .mapicon{
  width:64px; height:64px; padding:4px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(214,173,96,.35);
  box-shadow:0 10px 28px rgba(0,0,0,.18);
  overflow:hidden;
  margin-bottom:14px;
}
.map-card .mapicon img{
  width:100%; height:100%; object-fit:contain; display:block;
  border-radius:50%;
}


/* ===== Original inline style block 2 ===== */
.pesantren-hero-star{
        position:absolute;
        right:-170px;
        top:50%;
        transform:translateY(-50%);
        width:680px;height:680px;
        border-radius:50%;
        opacity:.72;
        pointer-events:none;
      }
      .pesantren-hero-star::before,
      .pesantren-hero-star::after{
        content:"";
        position:absolute;
        inset:14%;
        border:1.2px solid rgba(111,231,208,.42);
        clip-path:polygon(
          50% 0%, 62% 36%, 100% 50%, 62% 64%,
          50% 100%, 38% 64%, 0% 50%, 38% 36%
        );
        transform:rotate(22.5deg);
      }
      .pesantren-hero-star::after{
        inset:23%;
        border-color:rgba(214,173,96,.38);
        transform:rotate(45deg);
      }
      @media(max-width:1080px){
        .pesantren-hero-star{right:-300px;opacity:.35;width:600px;height:600px;}
      }


/* ===== Phase 1C: Admin Command Center ===== */
.admin-dashboard-view{background:transparent!important;}
.admin-dashboard-wrap{padding-top:132px;padding-bottom:90px;}
.admin-dashboard-top{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;margin-bottom:28px;}
.admin-dashboard-top h2{margin-top:8px;font:700 48px 'Spectral',serif;color:#F3EFE3;letter-spacing:-.02em;}
.admin-dashboard-top p{max-width:760px;margin-top:10px;color:#AEBDB5;line-height:1.65;font-size:14px;}
.admin-session-badge{display:inline-flex;align-items:center;gap:9px;padding:10px 14px;border-radius:999px;border:1px solid rgba(102,226,196,.18);background:rgba(102,226,196,.06);color:#8FEAD4;font:700 11px 'Manrope',sans-serif;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;}
.admin-live-dot{width:8px;height:8px;border-radius:50%;background:#6FE7D0;box-shadow:0 0 0 5px rgba(111,231,208,.08),0 0 18px rgba(111,231,208,.45);}
.dashboard-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px;}
.dashboard-stat{padding:22px;border:1px solid rgba(111,231,208,.14);border-radius:20px;background:linear-gradient(145deg,rgba(15,38,33,.86),rgba(11,27,24,.72));box-shadow:0 18px 45px -32px rgba(0,0,0,.75);position:relative;overflow:hidden;}
.dashboard-stat::after{content:"";position:absolute;right:-50px;bottom:-70px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(102,226,196,.08),transparent 70%);pointer-events:none;}
.dashboard-stat.gold::after{background:radial-gradient(circle,rgba(217,181,106,.08),transparent 70%);}
.dashboard-stat .label{display:block;color:#A9BCB5;font-size:12px;letter-spacing:.06em;text-transform:uppercase;}
.dashboard-stat .num{display:block;margin:7px 0 2px;font:700 38px 'Spectral',serif;color:#F3EFE3;}
.dashboard-stat .meta{display:block;color:#6FE7D0;font-size:11px;}
.dashboard-stat.gold .meta{color:#D9B56A;}
.dashboard-stat .icon{position:absolute;right:18px;top:18px;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;border:1px solid rgba(111,231,208,.15);background:rgba(111,231,208,.05);color:#6FE7D0;font:800 12px 'Manrope',sans-serif;}
.dashboard-stat.gold .icon{border-color:rgba(217,181,106,.15);background:rgba(217,181,106,.05);color:#D9B56A;}
.dashboard-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;}
.dashboard-panel{padding:24px;border:1px solid rgba(111,231,208,.14);border-radius:20px;background:rgba(15,38,33,.68);box-shadow:0 18px 45px -28px rgba(0,0,0,.6);}
.dashboard-panel-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-end;margin-bottom:18px;}
.dashboard-panel-head h3{margin-top:5px;color:#F3EFE1;font:600 25px 'Spectral',serif;}
.dashboard-caption{font:10px 'JetBrains Mono',monospace;color:#7E938C;text-transform:uppercase;letter-spacing:.07em;}
.quick-action-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.quick-action{display:grid;grid-template-columns:38px 1fr auto;gap:12px;align-items:center;text-align:left;padding:14px;border:1px solid rgba(255,255,255,.06);border-radius:15px;background:rgba(255,255,255,.025);color:#F3EFE3;cursor:pointer;transition:transform .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease;}
.quick-action:hover{transform:translateY(-2px);border-color:rgba(102,226,196,.2);background:rgba(102,226,196,.04);box-shadow:0 16px 35px -28px rgba(0,0,0,.8);}
.quick-action-disabled{cursor:default;opacity:.58;}
.quick-action-disabled:hover{transform:none;border-color:rgba(255,255,255,.06);background:rgba(255,255,255,.025);box-shadow:none;}
.quick-action .qa-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:rgba(102,226,196,.08);border:1px solid rgba(102,226,196,.12);color:#6FE7D0;font:800 13px 'Manrope',sans-serif;}
.quick-action:nth-child(2) .qa-icon{background:rgba(217,181,106,.08);border-color:rgba(217,181,106,.12);color:#D9B56A;}
.quick-action:nth-child(3) .qa-icon{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08);color:#E8EEE9;}
.quick-action b{display:block;font-size:13px;}
.quick-action small{display:block;margin-top:3px;color:#869B93;font-size:11px;line-height:1.35;}
.quick-action i{font-style:normal;color:#6C827A;font-size:18px;}
.health-list{display:grid;gap:10px;}
.health-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:13px 14px;border:1px solid rgba(255,255,255,.05);border-radius:14px;background:rgba(255,255,255,.02);}
.health-left{display:flex;align-items:center;gap:10px;color:#DDE7E2;font-size:13px;}
.health-dot{width:8px;height:8px;border-radius:50%;flex:none;}
.health-dot.ok{background:#6FE7D0;box-shadow:0 0 0 5px rgba(111,231,208,.07);}
.health-dot.bad{background:#E77F7F;box-shadow:0 0 0 5px rgba(231,127,127,.07);}
.health-status{font:700 10px 'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:#6FE7D0;}
.health-status.bad{color:#E99A9A;}
.dashboard-footnote{margin-top:18px;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:18px 20px;border:1px dashed rgba(217,181,106,.25);border-radius:18px;background:rgba(217,181,106,.045);}
.dashboard-footnote strong{display:block;color:#F3EFE3;font-size:13px;}
.dashboard-footnote span{display:block;margin-top:4px;color:#9EADA7;font-size:12px;line-height:1.5;}
.dashboard-skeleton{height:132px;border-radius:20px;border:1px solid rgba(255,255,255,.05);background:linear-gradient(90deg,rgba(255,255,255,.025) 25%,rgba(255,255,255,.06) 50%,rgba(255,255,255,.025) 75%);background-size:200% 100%;animation:dashboardShimmer 1.5s linear infinite;}
@keyframes dashboardShimmer{to{background-position:-200% 0;}}
.admin-dashboard-btn{border:1px solid rgba(102,226,196,.16);background:rgba(102,226,196,.06);color:#8FEAD4;border-radius:10px;padding:9px 12px;font:700 11px 'Manrope',sans-serif;cursor:pointer;transition:.22s ease;}
.admin-dashboard-btn:hover{transform:translateY(-1px);background:rgba(102,226,196,.1);border-color:rgba(102,226,196,.28);}
@media(max-width:1000px){.dashboard-stat-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr}.admin-dashboard-top{align-items:flex-start;flex-direction:column}.admin-session-badge{align-self:flex-start;}}
@media(max-width:700px){.admin-dashboard-wrap{padding-top:112px}.admin-dashboard-top h2{font-size:38px}.quick-action-grid{grid-template-columns:1fr}.dashboard-footnote{align-items:flex-start;flex-direction:column}.admin-dashboard-btn{font-size:10px;padding:8px 10px;}}
@media(max-width:560px){.dashboard-stat-grid{grid-template-columns:1fr}.dashboard-stat{padding:18px}.dashboard-panel{padding:18px}}


/* ===== Phase 1D: Role & Permission ===== */
.admin-session-badge b,
.role-pill{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background:var(--gold-pale);
  color:var(--pine-dark);
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
}
.permission-intro{display:flex;gap:12px;justify-content:space-between;align-items:flex-end;margin-bottom:12px}
.permission-intro span{font-weight:800;color:var(--ink)}
.permission-intro small{color:var(--ink-soft);font-size:12px}
.permission-chips{display:flex;flex-wrap:wrap;gap:8px}
.permission-chip{display:inline-flex;align-items:center;gap:5px;padding:7px 10px;border-radius:10px;background:var(--mint-soft);border:1px solid rgba(22,92,69,.12);color:var(--pine-dark);font-size:12px;font-weight:700}
@media (max-width:700px){.permission-intro{display:block}.permission-intro small{display:block;margin-top:4px}.admin-session-badge{flex-wrap:wrap}}


/* ===== Phase 1E: Admin Account Management ===== */
.admin-users-panel{grid-column:1 / -1;}
.admin-users-note{margin:-6px 0 16px;padding:10px 12px;border:1px dashed rgba(217,181,106,.25);border-radius:12px;background:rgba(217,181,106,.04);color:#9EADA7;font-size:12px;line-height:1.5;}
.admin-user-table-wrap{overflow:auto;border:1px solid rgba(255,255,255,.06);border-radius:14px;}
.admin-user-table{width:100%;border-collapse:collapse;min-width:620px;}
.admin-user-table th,.admin-user-table td{padding:13px 14px;border-bottom:1px solid rgba(255,255,255,.06);text-align:left;font-size:12px;color:#DDE7E2;vertical-align:middle;}
.admin-user-table th{font:700 10px 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.06em;color:#7E938C;background:rgba(255,255,255,.02);}
.admin-user-table tbody tr:last-child td{border-bottom:0;}
.admin-user-table td strong{display:block;color:#F3EFE3;font-size:13px;}
.admin-user-table td small{display:block;margin-top:3px;color:#7E938C;font-size:11px;}
.user-role,.user-status{display:inline-flex;align-items:center;padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.05);color:#C7D4CF;font-weight:700;font-size:10px;}
.user-status.active{background:rgba(111,231,208,.08);border:1px solid rgba(111,231,208,.16);color:#6FE7D0;}
.user-actions{display:flex;gap:7px;flex-wrap:wrap;}
.mini-btn{border:1px solid rgba(111,231,208,.13);background:rgba(111,231,208,.05);color:#8FEAD4;border-radius:9px;padding:7px 10px;cursor:pointer;font:700 10px 'Manrope',sans-serif;}
.mini-btn:hover{background:rgba(111,231,208,.1);}
.mini-btn.danger{border-color:rgba(231,127,127,.16);background:rgba(231,127,127,.05);color:#E99A9A;}
.btn-small{padding:9px 12px!important;font-size:11px!important;}
.modal-wide{max-width:560px;}
.field-hint{font-weight:500;color:#7E8D88;font-size:10px;margin-left:5px;}
.check-label{display:flex!important;align-items:center;gap:8px;cursor:pointer;}
.check-label input{accent-color:#0E6B45;width:16px;height:16px;}
@media(max-width:700px){.admin-users-panel{grid-column:auto;}.admin-user-table{min-width:560px;}}

/* =========================================================
   PHASE 2A — PREMIUM HEADER & NAVIGATION
========================================================= */
header.site{
  padding:10px 0;
  background:rgba(5,17,13,.66)!important;
  border-bottom:1px solid rgba(158,219,204,.10)!important;
  box-shadow:0 14px 42px rgba(0,0,0,.18)!important;
  isolation:isolate;
}
.nav-row{
  max-width:1240px;
  min-height:68px;
  margin:0 auto;
  padding:10px 20px;
  border:1px solid rgba(158,219,204,.10);
  border-radius:22px;
  background:rgba(10,29,23,.66);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035), 0 18px 46px rgba(0,0,0,.16);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.brand{flex:0 0 auto; min-width:220px; gap:11px;}
.brand-mark{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(102,226,196,.14),rgba(217,181,106,.10));border:1px solid rgba(158,219,204,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 30px rgba(0,0,0,.16);}
.brand-mark img{width:36px;height:36px;object-fit:contain;display:block;}
.brand .name{font-size:15px!important;letter-spacing:-.01em;color:#F4F1E8!important;}
.brand .name small{color:#D9B56A!important;font-size:9.5px!important;letter-spacing:.12em;}
.nav-divider{width:1px;height:28px;background:linear-gradient(180deg,transparent,rgba(158,219,204,.20),transparent);flex:0 0 auto;}
nav.tabs{flex:1 1 auto;justify-content:center;gap:3px;}
nav.tabs button{position:relative;color:#AFC0BA!important;background:transparent!important;border:0!important;padding:10px 13px!important;border-radius:11px!important;font-size:13px!important;font-weight:700!important;letter-spacing:-.01em;}
nav.tabs button::after{content:"";position:absolute;left:50%;right:50%;bottom:5px;height:2px;border-radius:999px;background:linear-gradient(90deg,#66E2C4,#D9B56A);transition:left .22s ease,right .22s ease,opacity .22s ease;opacity:0;}
nav.tabs button:hover{color:#F4F1E8!important;background:rgba(102,226,196,.07)!important;transform:translateY(-1px);}
nav.tabs button.active{color:#F4F1E8!important;background:rgba(102,226,196,.08)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)!important;}
nav.tabs button.active::after{left:22%;right:22%;opacity:1;}
.nav-actions{gap:7px;}
.admin-dashboard-btn{display:flex;align-items:center;gap:7px;border:1px solid rgba(102,226,196,.16);background:rgba(102,226,196,.07);color:#D7EEE8;border-radius:11px;padding:9px 12px;font-weight:700;font-size:12px;}
.admin-dashboard-btn:hover{background:rgba(102,226,196,.12);transform:translateY(-1px);}
.nav-admin-dot{width:7px;height:7px;border-radius:50%;background:#66E2C4;box-shadow:0 0 0 4px rgba(102,226,196,.09),0 0 14px rgba(102,226,196,.45);}
.btn-ppdb{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(135deg,#D9B56A,#E4CB91)!important;color:#0A231B!important;border:1px solid rgba(255,255,255,.10)!important;border-radius:11px!important;padding:10px 13px!important;font-size:12px!important;font-weight:800!important;box-shadow:0 10px 28px rgba(217,181,106,.14);}
.btn-ppdb .ppdb-mobile-label{display:none;}
.btn-ppdb span:last-child{font-size:14px;line-height:1;transition:transform .2s ease;}
.btn-ppdb:hover{transform:translateY(-2px);box-shadow:0 15px 34px rgba(217,181,106,.20);}
.btn-ppdb:hover span:last-child{transform:translate(2px,-2px);}
.menu-toggle{width:42px;height:42px;display:none;align-items:center;justify-content:center;flex-direction:column;gap:4px;padding:0!important;background:rgba(102,226,196,.06)!important;border:1px solid rgba(158,219,204,.12)!important;border-radius:12px!important;}
.menu-toggle span{display:block;width:17px;height:1.7px;border-radius:99px;background:#DCEBE6;transition:transform .22s ease,opacity .22s ease;}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5.7px) rotate(45deg);}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.7px) rotate(-45deg);}
.mobile-backdrop{display:none;}
@media(max-width:1120px){
  .nav-row{padding:9px 14px;}
  .brand{min-width:200px;}
  nav.tabs button{padding-left:10px!important;padding-right:10px!important;}
  .btn-ppdb{padding-left:11px!important;padding-right:11px!important;}
}
@media(max-width:920px){
  header.site{padding:7px 0;}
  .nav-row{margin:0 10px;border-radius:18px;min-height:62px;}
  .nav-divider,.admin-dashboard-btn{display:none!important;}
  .brand{min-width:0;}
  .brand-mark{width:42px;height:42px;border-radius:12px;}
  .brand-mark img{width:31px;height:31px;}
  .brand .name{font-size:14px!important;}
  .brand .name small{font-size:8.5px!important;}
  .nav-actions{margin-left:auto;}
  .btn-ppdb .ppdb-label{display:none!important;}
  .btn-ppdb .ppdb-mobile-label{display:inline!important;}
  .btn-ppdb{width:auto;height:42px;justify-content:center;padding:0 12px!important;border-radius:12px!important;font-size:12px!important;gap:6px;}
  .btn-ppdb span:last-child{font-size:13px;}
  .menu-toggle{display:flex!important;}
  nav.tabs{position:fixed;inset:80px 14px auto 14px;z-index:80;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:5px;padding:10px;background:rgba(7,22,18,.96)!important;border:1px solid rgba(158,219,204,.12)!important;border-radius:18px;box-shadow:0 24px 70px rgba(0,0,0,.38);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);transform:translateY(-18px) scale(.985);opacity:0;pointer-events:none;transition:transform .22s ease,opacity .22s ease;}
  nav.tabs.open{transform:translateY(0) scale(1);opacity:1;pointer-events:auto;}
  nav.tabs button{text-align:left!important;padding:13px 14px!important;border-radius:12px!important;font-size:14px!important;}
  nav.tabs button.active{background:rgba(102,226,196,.10)!important;}
  nav.tabs button::after{left:auto;right:14px;top:50%;bottom:auto;width:5px;height:5px;opacity:0;transform:translateY(-50%);}
  nav.tabs button.active::after{left:auto;right:14px;opacity:1;}
  .mobile-backdrop{display:block;position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.42);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .22s ease;}
  header.site:has(nav.tabs.open) .mobile-backdrop{opacity:1;pointer-events:auto;}
}
@media(prefers-reduced-motion:reduce){
  nav.tabs button,.btn-ppdb,.menu-toggle span,nav.tabs button::after{transition:none!important;}
}

/* =========================================================
   PHASE 2A.2 — LOGO LEGIBILITY + MOBILE PPDB FIX
========================================================= */
.brand-mark{
  width:76px;
  height:76px;
  border-radius:0;
  display:grid;
  place-items:center;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  flex:0 0 76px;
}
.brand-mark img{
  width:70px;
  height:70px;
  object-fit:contain;
  image-rendering:auto;
  filter:none;
}
.brand{gap:12px;min-width:245px;}
.brand .name{font-size:16px!important;}
.nav-row{min-height:78px;padding-top:7px;padding-bottom:7px;}
.btn-ppdb{white-space:nowrap!important;flex:0 0 auto;min-width:max-content;}

@media(max-width:1120px){
  .brand{min-width:225px;}
  .brand-mark{width:68px;height:68px;flex-basis:68px;}
  .brand-mark img{width:63px;height:63px;}
}

@media(max-width:920px){
  .nav-row{min-height:60px;padding:7px 12px;gap:8px;}
  .brand{min-width:0;flex:1 1 auto;gap:8px;overflow:hidden;}
  .brand-mark{width:48px;height:48px;flex:0 0 48px;}
  .brand-mark img{width:45px;height:45px;}
  .brand .name{font-size:13px!important;line-height:1.05;white-space:nowrap;}
  .brand .name small{font-size:8px!important;white-space:nowrap;}
  .nav-actions{gap:6px;flex:0 0 auto;}
  .btn-ppdb{
    min-width:82px;
    width:auto;
    height:40px;
    padding:0 11px!important;
    flex:0 0 auto;
    gap:5px;
  }
  .btn-ppdb .ppdb-label{display:none!important;}
  .btn-ppdb .ppdb-mobile-label{display:inline!important;}
  .btn-ppdb span:last-child{font-size:12px;}
  .menu-toggle{width:40px;height:40px;flex:0 0 40px;}
}

@media(max-width:420px){
  .nav-row{margin:0 6px;padding-left:9px;padding-right:9px;}
  .brand-mark{width:43px;height:43px;flex-basis:43px;}
  .brand-mark img{width:41px;height:41px;}
  .brand .name{font-size:12px!important;}
  .brand .name small{display:none;}
  .btn-ppdb{min-width:78px;height:38px;padding:0 9px!important;font-size:11px!important;}
  .menu-toggle{width:38px;height:38px;flex-basis:38px;}
}
/* =========================================================
   PHASE 2A.3 — MOBILE BRAND + PPDB REFINEMENT
   Mobile keeps full madrasah identity and shows PPDB text only.
========================================================= */
@media(max-width:920px){
  .nav-row{
    min-height:62px;
    padding:6px 10px;
    gap:7px;
  }
  .brand{
    flex:1 1 auto;
    min-width:0;
    gap:7px;
    overflow:visible;
    align-items:center;
  }
  .brand-mark{
    width:44px;
    height:44px;
    flex:0 0 44px;
  }
  .brand-mark img{
    width:42px;
    height:42px;
  }
  .brand .name{
    min-width:0;
    font-size:12.8px!important;
    line-height:1.06;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
  }
  .brand .name small{
    display:block!important;
    margin-top:2px;
    font-size:7.6px!important;
    line-height:1.1;
    letter-spacing:.095em;
    white-space:nowrap;
  }
  .nav-actions{
    gap:5px;
    flex:0 0 auto;
  }
  .btn-ppdb{
    min-width:52px!important;
    width:52px!important;
    height:38px!important;
    padding:0 8px!important;
    gap:0!important;
    font-size:11px!important;
    line-height:1;
    border-radius:10px!important;
  }
  .btn-ppdb .ppdb-label{display:none!important;}
  .btn-ppdb .ppdb-mobile-label{display:inline!important;}
  .btn-ppdb span:last-child{display:none!important;}
  .menu-toggle{
    width:38px;
    height:38px;
    flex:0 0 38px;
  }
}

@media(max-width:420px){
  .nav-row{
    margin:0 4px;
    padding-left:7px;
    padding-right:7px;
  }
  .brand{gap:6px;}
  .brand-mark{
    width:40px;
    height:40px;
    flex-basis:40px;
  }
  .brand-mark img{
    width:38px;
    height:38px;
  }
  .brand .name{
    font-size:11.8px!important;
  }
  .brand .name small{
    font-size:7px!important;
    letter-spacing:.08em;
  }
  .btn-ppdb{
    min-width:49px!important;
    width:49px!important;
    height:36px!important;
    padding:0 7px!important;
    font-size:10.5px!important;
  }
  .menu-toggle{
    width:36px;
    height:36px;
    flex-basis:36px;
  }
}



/* =========================================================
   PHASE 2C — STATISTICS & VISUAL DATA
========================================================= */
.home-stats-visual{background:linear-gradient(180deg,#06120E 0%,#071711 100%);}
.home-stats-visual .home-section-head{max-width:760px;}
.visual-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:28px;}
.visual-stat-card{position:relative;overflow:hidden;padding:22px;border-radius:22px;border:1px solid rgba(158,219,204,.11);background:linear-gradient(145deg,rgba(14,37,29,.90),rgba(7,24,18,.84));box-shadow:0 22px 46px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.03);}
.visual-stat-card::after{content:"";position:absolute;width:120px;height:120px;right:-50px;top:-55px;border-radius:50%;background:radial-gradient(circle,rgba(102,226,196,.12),transparent 68%);pointer-events:none;}
.visual-stat-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:rgba(102,226,196,.07);border:1px solid rgba(102,226,196,.13);color:#66E2C4;font-size:17px;margin-bottom:18px;}
.visual-stat-label{display:block;color:#97AAA4;font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;}
.visual-stat-card strong{display:block;margin-top:7px;font-size:38px;line-height:1;color:#F4F1E8;letter-spacing:-.035em;}
.visual-stat-card small{display:block;margin-top:8px;color:#718881;font-size:11px;}
.visual-stat-lower{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px;}
.visual-panel{padding:24px;border:1px solid rgba(158,219,204,.11);border-radius:22px;background:rgba(11,28,22,.74);box-shadow:0 20px 45px rgba(0,0,0,.17);}
.visual-panel-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-end;margin-bottom:20px;}
.visual-panel-head h3{margin-top:5px;color:#F2EFE6;font:600 25px 'Spectral',serif;}
.visual-caption{color:#80958E;font:9px 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.09em;}
.grade-row + .grade-row{margin-top:14px;}
.grade-top{display:flex;justify-content:space-between;gap:10px;color:#D9E3DE;font-size:12px;}
.grade-top b{color:#D9B56A;font-weight:800;}
.grade-track,.province-mini-track{height:7px;margin-top:7px;border-radius:99px;background:rgba(255,255,255,.055);overflow:hidden;}
.grade-track span,.province-mini-track span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#17B88E,#66E2C4);transform-origin:left center;animation:visualBarIn .9s cubic-bezier(.2,.8,.2,1) both;}
.province-mini-row{display:flex;gap:12px;align-items:flex-start;}
.province-mini-row + .province-mini-row{margin-top:14px;}
.province-rank{width:27px;color:#7F958D;font:700 10px 'JetBrains Mono',monospace;padding-top:1px;}
.province-mini-main{min-width:0;flex:1;}
.province-mini-top{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:#DDE7E2;}
.province-mini-top span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.province-mini-top b{color:#BFD0CA;font-size:11px;}
.province-mini-track{margin-top:6px;}
.province-mini-track span{background:linear-gradient(90deg,#D9B56A,#E6C77E);}
@keyframes visualBarIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:980px){
  .visual-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .visual-stat-lower{grid-template-columns:1fr;}
}
@media(max-width:640px){
  .visual-stat-grid{gap:9px;margin-top:22px;}
  .visual-stat-card{padding:17px 15px;border-radius:17px;}
  .visual-stat-icon{width:34px;height:34px;border-radius:10px;font-size:15px;margin-bottom:14px;}
  .visual-stat-label{font-size:8px;}
  .visual-stat-card strong{font-size:30px;}
  .visual-stat-card small{font-size:9px;margin-top:6px;}
  .visual-panel{padding:18px;border-radius:18px;}
  .visual-panel-head h3{font-size:21px;}
}
@media(prefers-reduced-motion:reduce){
  .grade-track span,.province-mini-track span{animation:none;}
}

/* =========================================================
   PHASE 2B — HOMEPAGE / HERO REDESIGN
========================================================= */
.home-redesign{background:#06120E!important;min-height:auto!important;overflow:hidden;}
.home-redesign .hero-media{position:absolute;inset:0;height:min(860px,92vh);overflow:hidden;}
.home-redesign .hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 45%;opacity:.76;transform:scale(1.035);animation:heroKenBurns 18s ease-in-out infinite alternate;filter:saturate(.92) contrast(1.02);}
.home-redesign .hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,13,10,.92) 0%,rgba(4,15,12,.79) 34%,rgba(4,15,12,.42) 61%,rgba(4,15,12,.32) 100%),linear-gradient(180deg,rgba(3,13,10,.22) 0%,rgba(3,13,10,.08) 56%,#06120E 100%);}
.home-redesign .hero-overlay-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(520px 420px at 76% 27%,rgba(102,226,196,.14),transparent 72%),radial-gradient(420px 380px at 17% 78%,rgba(217,181,106,.08),transparent 72%);}
.home-redesign .hero-grid{position:absolute;inset:0;pointer-events:none;opacity:.16;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(180deg,rgba(0,0,0,.85),transparent 82%);}
.home-hero-inner{min-height:min(760px,85vh);padding:150px 28px 150px;max-width:1220px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(330px,.55fr);gap:52px;align-items:center;position:relative;z-index:2;}
.hero-copy{max-width:760px;}
.hero-kicker{display:inline-flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.18em;font-weight:800;color:#DCEDE7;text-transform:uppercase;margin-bottom:12px;}
.hero-kicker-dot{width:8px;height:8px;border-radius:999px;background:#66E2C4;box-shadow:0 0 0 5px rgba(102,226,196,.11),0 0 22px rgba(102,226,196,.45);}
.home-redesign .hero-badge{display:inline-flex;align-items:center;gap:8px;margin:0 0 18px;padding:8px 12px;border-radius:999px;border:1px solid rgba(217,181,106,.22);background:rgba(4,18,13,.38);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:11px;letter-spacing:.03em;color:#E8E6DB;}
.home-redesign .hero h1{font-size:clamp(48px,7vw,92px);line-height:.96;max-width:820px;margin:0;color:#F8F3E8;letter-spacing:-.04em;text-wrap:balance;}
.home-redesign .hero h1 em{color:#D9B56A;font-style:normal;font-weight:600;}
.home-redesign .tagline{margin-top:24px;max-width:650px;font-size:17px;line-height:1.72;color:#D0DDD8;}
.home-redesign .hero-cta{margin-top:30px;gap:12px;}
.home-redesign .hero-main-cta{min-width:205px;justify-content:center;}
.home-redesign .hero-main-cta span{display:inline-block;margin-left:4px;transition:transform .22s ease;}
.home-redesign .hero-main-cta:hover span{transform:translateX(4px);}
.home-redesign .hero-secondary-cta{min-width:170px;justify-content:center;}
.hero-proof-row{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:22px;color:#AFC1BB;font-size:12px;font-weight:700;}
.proof-check{display:inline-grid;place-items:center;width:18px;height:18px;margin-right:6px;border:1px solid rgba(102,226,196,.22);border-radius:50%;font-style:normal;color:#66E2C4;background:rgba(102,226,196,.06);}
.hero-feature-card{justify-self:end;width:min(100%,390px);padding:12px;border-radius:26px;background:linear-gradient(180deg,rgba(10,30,24,.76),rgba(5,18,14,.84));border:1px solid rgba(255,255,255,.11);box-shadow:0 30px 80px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.06);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);}
.hero-feature-top{display:flex;align-items:center;justify-content:space-between;padding:6px 7px 11px;color:#E7EFEA;}
.hero-feature-top .eyebrow{margin:0;font-size:9px;color:#AFC2BC;}
.hero-location{font-size:10px;color:#D9B56A;font-weight:800;letter-spacing:.08em;text-transform:uppercase;}
.hero-feature-image-wrap{position:relative;border-radius:19px;overflow:hidden;aspect-ratio:4/4.2;background:#0a1d17;}
.hero-feature-image-wrap img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;filter:saturate(.92) contrast(1.02);}
.hero-feature-image-wrap::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(3,13,10,.82) 100%);}
.hero-image-caption{position:absolute;left:14px;right:14px;bottom:13px;z-index:2;display:flex;flex-direction:column;gap:2px;}
.hero-image-caption span{font-size:10px;color:#BFD1CA;text-transform:uppercase;letter-spacing:.12em;font-weight:800;}
.hero-image-caption b{font-family:Spectral,serif;font-size:21px;color:#FFF8E9;}
.hero-feature-bottom{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 7px 5px;}
.hero-feature-bottom>div{display:flex;flex-direction:column;gap:4px;min-width:0;}
.hero-feature-bottom b{font-size:12px;color:#E6F1ED;line-height:1.35;}
.micro-label{font-size:8px;text-transform:uppercase;letter-spacing:.13em;color:#8FA79F;font-weight:800;}
.hero-arrow{width:36px;height:36px;display:grid;place-items:center;border:1px solid rgba(102,226,196,.14);border-radius:12px;color:#D9B56A;background:rgba(102,226,196,.05);font-size:16px;flex:0 0 auto;}
.hero-stats{position:relative;z-index:3;max-width:1220px;margin:-74px auto 0;padding:0 28px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
.hero-stat{min-height:108px;border:1px solid rgba(158,219,204,.11);border-radius:20px;padding:17px 19px;background:rgba(7,23,18,.70);box-shadow:0 20px 48px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.025);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);}
.hero-stat .stat-label{display:block;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#91A9A1;font-weight:800;}
.hero-stat strong{display:block;margin-top:8px;font-size:34px;line-height:1;color:#F3F0E6;letter-spacing:-.03em;}
.hero-stat small{display:block;margin-top:7px;color:#93AAA3;font-size:10px;}
.hero-stat-accent{background:linear-gradient(180deg,rgba(40,44,25,.74),rgba(13,29,20,.74));border-color:rgba(217,181,106,.20);}
.hero-stat-accent strong{color:#D9B56A;}
.hero-scroll-cue{display:flex;align-items:center;justify-content:center;gap:9px;position:relative;z-index:2;margin:28px 0 0;color:#829A92;font-size:10px;text-transform:uppercase;letter-spacing:.15em;font-weight:800;}
.hero-scroll-cue span{width:7px;height:7px;border-radius:50%;border:1px solid rgba(102,226,196,.55);box-shadow:0 0 0 6px rgba(102,226,196,.06);animation:scrollCue 1.8s ease-in-out infinite;}
.section-shell{position:relative;z-index:1;padding:110px 0;}
.home-overview{background:linear-gradient(180deg,rgba(6,18,14,0) 0%,rgba(8,24,19,.80) 100%);}
.overview-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;gap:70px;}
.overview-copy{max-width:610px;}
.overview-copy h2{margin:10px 0 17px;font-family:Spectral,serif;font-weight:600;font-size:clamp(34px,4vw,60px);line-height:1.02;letter-spacing:-.03em;color:#F5F1E8;}
.overview-copy h2 em{font-style:italic;color:#D9B56A;}
.overview-copy>p{max-width:570px;color:#AFC0BA;line-height:1.8;font-size:15px;}
.overview-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:28px;}
.overview-points>div{padding:15px;border:1px solid rgba(158,219,204,.10);border-radius:16px;background:rgba(10,28,22,.62);}
.overview-points span{display:block;font-size:9px;color:#66E2C4;letter-spacing:.13em;font-weight:900;}
.overview-points b{display:block;margin-top:8px;color:#F1EEE5;font-size:16px;}
.overview-points small{display:block;margin-top:4px;color:#8DA59D;font-size:10px;line-height:1.45;}
.overview-visual{position:relative;min-height:520px;}
.overview-image-main{position:absolute;right:5%;top:0;width:78%;height:78%;overflow:hidden;border-radius:28px;border:1px solid rgba(255,255,255,.10);box-shadow:0 32px 72px rgba(0,0,0,.30);}
.overview-image-main img{width:100%;height:100%;object-fit:cover;filter:saturate(.9);}
.overview-image-float{position:absolute;left:0;bottom:2%;width:42%;border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:#0A1A15;box-shadow:0 24px 58px rgba(0,0,0,.32);}
.overview-image-float img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;}
.overview-image-float span{display:block;padding:10px 12px;color:#EDE9DE;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:rgba(5,15,12,.86);}
.overview-quote{position:absolute;right:-2%;bottom:7%;max-width:250px;padding:16px 18px;border-radius:17px;border:1px solid rgba(217,181,106,.20);background:rgba(11,27,21,.84);color:#D9B56A;font-family:Spectral,serif;font-style:italic;font-size:20px;line-height:1.15;box-shadow:0 20px 42px rgba(0,0,0,.26);}
.home-moments{background:linear-gradient(180deg,rgba(8,24,19,.80),rgba(5,18,14,.96));}
.home-section-head{max-width:710px;margin-left:0;text-align:left;margin-bottom:34px;}
.home-section-head h2{font-family:Spectral,serif;font-size:clamp(34px,4vw,54px);line-height:1.04;letter-spacing:-.025em;}
.moments-grid{display:grid;grid-template-columns:1.1fr .9fr .9fr;grid-template-rows:280px 280px;gap:14px;}
.moment-card{position:relative;overflow:hidden;border-radius:22px;border:1px solid rgba(255,255,255,.10);background:#0A1A15;box-shadow:0 20px 42px rgba(0,0,0,.22);min-height:0;}
.moment-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .4s ease;filter:saturate(.88) contrast(1.02);}
.moment-card:hover img{transform:scale(1.045);filter:saturate(1) contrast(1.04);}
.moment-card-tall{grid-row:1 / span 2;}
.moment-card-wide{grid-column:2 / span 2;}
.moment-overlay{position:absolute;inset:auto 0 0 0;padding:48px 18px 18px;background:linear-gradient(180deg,transparent,rgba(3,13,10,.90));display:flex;flex-direction:column;gap:4px;}
.moment-overlay span{color:#9EB1AA;font-size:9px;text-transform:uppercase;letter-spacing:.13em;font-weight:800;}
.moment-overlay b{color:#F7F2E7;font-size:18px;font-family:Spectral,serif;font-weight:600;}
.home-cta{background:#05140F;}
.final-cta-card{display:flex;align-items:end;justify-content:space-between;gap:28px;padding:34px;border-radius:28px;border:1px solid rgba(217,181,106,.18);background:radial-gradient(500px 200px at 0 0,rgba(102,226,196,.07),transparent 70%),linear-gradient(135deg,rgba(17,40,31,.90),rgba(9,23,18,.92));box-shadow:0 26px 60px rgba(0,0,0,.25);}
.final-cta-card h2{margin:9px 0 10px;max-width:760px;font-family:Spectral,serif;font-size:clamp(34px,4vw,54px);line-height:1.02;color:#F4F0E7;}
.final-cta-card h2 em{font-style:italic;color:#D9B56A;}
.final-cta-card p{max-width:680px;color:#AFC0BA;line-height:1.7;font-size:14px;}
.final-cta-card .btn{flex:0 0 auto;min-width:190px;justify-content:center;}
.home-contact-strip{margin-top:0!important;}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .72s ease,transform .72s cubic-bezier(.2,.8,.2,1);}
.reveal-right{transform:translateX(26px) scale(.985);}
.reveal.is-visible{opacity:1;transform:none;}
@keyframes heroKenBurns{0%{transform:scale(1.035) translate3d(0,0,0)}100%{transform:scale(1.065) translate3d(-.7%,-.4%,0)}}
@keyframes scrollCue{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(6px);opacity:1}}
@media(max-width:980px){
  .home-hero-inner{grid-template-columns:1fr;gap:28px;min-height:auto;padding-top:130px;padding-bottom:95px;}
  .hero-copy{max-width:720px;}
  .hero-feature-card{justify-self:start;width:min(100%,430px);}
  .hero-stats{margin:-48px auto 0;grid-template-columns:repeat(2,minmax(0,1fr));}
  .overview-grid{grid-template-columns:1fr;gap:46px;}
  .overview-visual{min-height:520px;max-width:650px;}
  .moments-grid{grid-template-columns:1fr 1fr;grid-template-rows:260px 260px 260px;}
  .moment-card-tall{grid-row:1 / span 2;}
  .moment-card-wide{grid-column:1 / span 2;}
  .final-cta-card{align-items:flex-start;flex-direction:column;}
}
@media(max-width:640px){
  .home-redesign .hero-media{height:760px;}
  .home-redesign .hero-media img{object-position:56% 44%;}
  .home-redesign .hero-media::after{background:linear-gradient(180deg,rgba(3,13,10,.58),rgba(3,13,10,.84) 48%,#06120E 82%);}
  .home-hero-inner{padding:112px 18px 72px;gap:24px;}
  .hero-kicker{font-size:9px;letter-spacing:.14em;}
  .home-redesign .hero-badge{font-size:9.5px;padding:7px 10px;}
  .home-redesign .hero h1{font-size:clamp(43px,13vw,64px);line-height:.94;}
  .home-redesign .tagline{font-size:14px;line-height:1.62;margin-top:17px;}
  .hero-cta{display:grid;grid-template-columns:1fr 1fr;}
  .home-redesign .hero-main-cta,.home-redesign .hero-secondary-cta{min-width:0;width:100%;}
  .hero-proof-row{gap:8px 12px;font-size:10px;line-height:1.4;}
  .hero-feature-card{width:100%;border-radius:22px;}
  .hero-feature-image-wrap{aspect-ratio:1.45/1;}
  .hero-stats{padding:0 18px;margin:-24px auto 0;gap:8px;}
  .hero-stat{min-height:92px;padding:14px 15px;border-radius:16px;}
  .hero-stat strong{font-size:27px;margin-top:6px;}
  .hero-stat small{font-size:9px;margin-top:5px;}
  .hero-scroll-cue{margin:18px 0 0;font-size:8px;}
  .section-shell{padding:78px 0;}
  .overview-points{grid-template-columns:1fr;}
  .overview-visual{min-height:410px;}
  .overview-image-main{width:86%;height:74%;right:0;border-radius:21px;}
  .overview-image-float{width:43%;left:0;bottom:4%;border-radius:17px;}
  .overview-quote{right:-2%;bottom:7%;font-size:15px;max-width:180px;padding:13px 14px;border-radius:14px;}
  .moments-grid{grid-template-columns:1fr;grid-template-rows:300px 220px 220px 260px;gap:10px;}
  .moment-card-tall{grid-row:auto;}
  .moment-card-wide{grid-column:auto;}
  .final-cta-card{padding:24px;border-radius:22px;}
  .final-cta-card .btn{width:100%;}
}
@media(prefers-reduced-motion:reduce){
  .home-redesign .hero-media img{animation:none;}
  .hero-scroll-cue span{animation:none;}
  .reveal,.reveal-right{opacity:1;transform:none;transition:none;}
  .moment-card img,.hero-main-cta span{transition:none;}
}


/* ===== VIEW ROUTER FIX (Phase 2B.1) =====
   Homepage redesign must not override .view hidden state.
*/
.view{display:none !important;}
.view.active{display:block !important;position:relative;}
.home-redesign.view.active{display:block !important;}
.view.active > .section-contact-strip{display:block;}
/* Phase 2B refinement: pin contact strips to the bottom of short Profile/Berita tabs. */
#profil.view.active,
#berita.view.active{
  min-height:calc(100vh - 82px);
  display:flex !important;
  flex-direction:column;
}
#profil.view.active > .wrap,
#berita.view.active > .wrap{
  width:100%;
}
#profil.view.active > .wrap{
  flex:0 0 auto;
}
#berita.view.active > .wrap{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  padding-bottom:clamp(56px,8vh,112px);
}
#berita.view.active > .wrap > #galeriContainer{
  margin-bottom:clamp(34px,5vh,68px);
}
#profil.view.active > .section-contact-strip,
#berita.view.active > .section-contact-strip{
  margin-top:auto !important;
  flex:0 0 auto;
}


/* Phase 2B.3: beri ruang ekstra di mobile antara Visi & Misi dan kontak Profil. */
@media(max-width:760px){
  /* Fase 2B.4: beri ruang jelas antara Misi #4 dan footer/kontak Profil. */
  #profil.view.active > .wrap{
    padding-bottom:clamp(140px,24vh,280px);
  }
  #profil.view.active > .wrap .misi-list{
    margin-bottom:clamp(110px,18vh,220px) !important;
  }
  #profil.view.active > .section-contact-strip{
    margin-top:clamp(90px,14vh,180px) !important;
  }
}


/* =========================================================
   PHASE 2D — COMPONENT SYSTEM POLISH
========================================================= */
:root{
  --ui-ease:cubic-bezier(.2,.8,.2,1);
  --ui-line:rgba(158,219,204,.12);
  --ui-surface:rgba(10,29,23,.86);
  --ui-surface-2:rgba(17,43,35,.74);
}

/* Buttons / controls */
.btn,.icon-btn,.mini-btn,.tab-btn,.add-person-card,.add-gal-card{position:relative;overflow:hidden;}
.btn::after,.icon-btn::after,.mini-btn::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.11) 50%,transparent 70%);transform:translateX(-130%);transition:transform .55s var(--ui-ease);pointer-events:none;}
.btn:hover::after,.icon-btn:hover::after,.mini-btn:hover::after{transform:translateX(130%);}
.btn:focus-visible,.icon-btn:focus-visible,.mini-btn:focus-visible,.tab-btn:focus-visible,.add-person-card:focus-visible,.add-gal-card:focus-visible{outline:2px solid rgba(102,226,196,.70);outline-offset:3px;}
.btn[disabled],button[disabled]{opacity:.55;cursor:not-allowed;transform:none!important;}

/* Modal refinement */
.overlay{
  background:rgba(2,11,8,.68)!important;
  backdrop-filter:blur(9px) saturate(115%)!important;
  -webkit-backdrop-filter:blur(9px) saturate(115%)!important;
  transition:opacity .28s var(--ui-ease)!important;
}
.modal{
  background:linear-gradient(180deg,rgba(19,43,35,.98),rgba(8,24,19,.98))!important;
  color:#F2EFE6!important;
  border:1px solid rgba(158,219,204,.14)!important;
  border-radius:24px!important;
  box-shadow:0 36px 100px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.04)!important;
  transform:translateY(18px) scale(.975)!important;
  transition:transform .34s var(--ui-ease),opacity .26s ease!important;
}
.overlay.show .modal{transform:translateY(0) scale(1)!important;}
.modal h3{color:#F5F1E8!important;letter-spacing:-.02em;}
.modal .sub{color:#9DB1AA!important;}
.close-x{color:#9DB1AA!important;border-radius:10px!important;transition:background .2s ease,color .2s ease,transform .2s ease!important;}
.close-x:hover{background:rgba(102,226,196,.08)!important;color:#F5F1E8!important;transform:rotate(4deg)!important;}
.field label{color:#A8BBB4!important;}
.field input[type=text],.field input[type=password],.field select,.field textarea{
  background:rgba(255,255,255,.045)!important;
  color:#F3EFE7!important;
  border-color:rgba(158,219,204,.13)!important;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease!important;
}
.field input::placeholder,.field textarea::placeholder{color:#718A82!important;}
.field input:focus,.field select:focus,.field textarea:focus{
  background:rgba(102,226,196,.045)!important;
  border-color:rgba(102,226,196,.48)!important;
  box-shadow:0 0 0 4px rgba(102,226,196,.07)!important;
}
/* Dark native select menu: keep option text readable in the admin modals. */
.field select{
  color-scheme: dark;
}
.field select option,
.field select optgroup{
  background:#102B25 !important;
  color:#F3EFE7 !important;
}
.field select option:checked,
.field select option:hover{
  background:#176B57 !important;
  color:#FFFFFF !important;
}
.photo-drop{
  background:rgba(255,255,255,.026)!important;
  border-color:rgba(158,219,204,.18)!important;
  transition:transform .24s var(--ui-ease),border-color .2s ease,background .2s ease,box-shadow .2s ease!important;
}
.photo-drop:hover,.photo-drop:focus-within{transform:translateY(-2px);background:rgba(102,226,196,.055)!important;border-color:rgba(102,226,196,.42)!important;box-shadow:0 16px 35px rgba(0,0,0,.16);}
.modal-actions{padding-top:6px;}
.btn-cancel{background:rgba(255,255,255,.06)!important;color:#C5D2CD!important;border:1px solid rgba(255,255,255,.08)!important;}
.btn-solid{background:linear-gradient(135deg,#159A74,#0E765B)!important;color:#F5FFFB!important;box-shadow:0 12px 30px rgba(21,154,116,.18)!important;}
.btn-solid:hover{background:linear-gradient(135deg,#18A880,#0F8063)!important;}
.btn-danger{background:linear-gradient(135deg,#B95143,#913B31)!important;}

/* Toast refinement */
.toast{
  min-width:min(92vw,320px);
  max-width:min(92vw,520px);
  justify-content:flex-start!important;
  padding:13px 16px!important;
  border:1px solid rgba(255,255,255,.08)!important;
  background:rgba(9,27,21,.96)!important;
  box-shadow:0 18px 50px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.04)!important;
  border-radius:16px!important;
  overflow:hidden;
}
.toast::before{content:"i";display:grid;place-items:center;width:22px;height:22px;flex:0 0 22px;border-radius:50%;background:rgba(102,226,196,.12);color:#66E2C4;font-weight:900;font-size:12px;}
.toast::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,#66E2C4,#D9B56A);transform-origin:left;animation:toastLife 2.6s linear forwards;}
.toast.toast-success::before{content:"✓";background:rgba(111,231,208,.11);color:#6FE7D0;}
.toast.toast-error::before{content:"×";background:rgba(231,127,127,.11);color:#E99A9A;}
.toast.toast-warning::before{content:"!";background:rgba(217,181,106,.12);color:#D9B56A;}
.toast.toast-info::before{content:"i";}
.toast.toast-error::after{background:linear-gradient(90deg,#E99A9A,#C95E52);}
.toast.toast-warning::after{background:linear-gradient(90deg,#D9B56A,#F1D38D);}
@keyframes toastLife{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* Empty states */
.empty-state{
  min-height:180px;
  display:flex!important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:36px 20px!important;
  border:1px dashed rgba(158,219,204,.16)!important;
  background:rgba(255,255,255,.018)!important;
  color:#9DB0A9!important;
}
.empty-state::before{content:"✦";display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:rgba(102,226,196,.07);border:1px solid rgba(102,226,196,.12);color:#66E2C4;font-size:17px;}

/* Skeletons */
.skeleton,.dashboard-skeleton{position:relative;overflow:hidden;}
.skeleton::after,.dashboard-skeleton::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.055),transparent);transform:translateX(-100%);animation:uiShimmer 1.55s ease-in-out infinite;}
@keyframes uiShimmer{100%{transform:translateX(100%)}}



/* Prevent text insertion caret from appearing when visitors click/drag on non-editable page text.
   Form controls keep their normal caret for admin/editor data entry. */
body:not([contenteditable="true"]){caret-color:transparent;}
body:not([contenteditable="true"]) :not(input):not(textarea):not(select):not([contenteditable="true"]){caret-color:transparent;}
input, textarea, select, [contenteditable="true"]{caret-color:auto;}

/* Cards / data blocks */
.person-card,.gal-card,.cat-block,.map-card,.visi-card,.ppdb-card,.visual-stat-card,.hero-feature-card,.moment-card{
  transition:transform .28s var(--ui-ease),box-shadow .28s var(--ui-ease),border-color .2s ease!important;
}
.person-card:hover,.gal-card:hover,.map-card:hover,.visi-card:hover,.ppdb-card:hover{transform:translateY(-4px);}
.visual-stat-card:hover{transform:translateY(-5px);}

/* Loading veil utility for future async actions */
.ui-loading-overlay{position:fixed;inset:0;z-index:500;display:grid;place-items:center;background:rgba(3,14,11,.36);backdrop-filter:blur(5px);opacity:0;pointer-events:none;transition:opacity .22s ease;}
.ui-loading-overlay.show{opacity:1;pointer-events:auto;}
.ui-loading-card{display:flex;align-items:center;gap:11px;padding:13px 16px;border:1px solid rgba(158,219,204,.12);border-radius:16px;background:rgba(10,29,23,.96);color:#EAF4F0;box-shadow:0 22px 60px rgba(0,0,0,.34);}
.ui-spinner{width:18px;height:18px;border-radius:50%;border:2px solid rgba(158,219,204,.16);border-top-color:#66E2C4;animation:uiSpin .72s linear infinite;}
@keyframes uiSpin{to{transform:rotate(360deg)}}

@media(max-width:640px){
  .modal{max-height:90vh;border-radius:20px!important;padding:24px 18px 18px!important;}
  .modal-actions{position:sticky;bottom:-1px;padding-top:14px;padding-bottom:2px;background:linear-gradient(180deg,rgba(8,24,19,0),rgba(8,24,19,.98) 32%);}
  .toast{bottom:14px;}
}
@media(prefers-reduced-motion:reduce){
  .toast::after,.skeleton::after,.dashboard-skeleton::after,.ui-spinner{animation:none!important;}
  .person-card,.gal-card,.map-card,.visi-card,.ppdb-card,.visual-stat-card,.hero-feature-card,.moment-card{transition:none!important;}
}

body.modal-open{overflow:hidden!important;}


/* =========================================================
   PHASE 2E — ANIMATION & MICRO-INTERACTION
========================================================= */
:root{
  --fx-duration:.42s;
  --fx-ease:cubic-bezier(.2,.8,.2,1);
}

/* Smooth page/view entrance without interfering with the router. */
.view.active.fx-view-enter{
  animation:fxViewEnter .48s var(--fx-ease) both;
}
@keyframes fxViewEnter{
  from{opacity:.35;transform:translateY(8px)}
  to{opacity:1;transform:none}
}

/* Interactive press feedback */
button,.btn,a.filter-chip,.tab-btn,.quick-action,.card,.panel,.glass,.stat-card,.info-card,.contact-card,.guru-card,.santri-card,.news-card,.moment-card{
  -webkit-tap-highlight-color:transparent;
}
button:active,.btn:active,.quick-action:active,.tab-btn:active{
  transform:translateY(1px) scale(.985);
}
.btn,.tab-btn,button,.quick-action{will-change:transform;}

/* A tiny highlight sweep for primary CTAs. */
.btn-primary,.btn-ppdb,.home-main-cta,.hero-main-cta{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.btn-primary::after,.btn-ppdb::after,.home-main-cta::after,.hero-main-cta::after{
  content:"";
  position:absolute;
  inset:0 auto 0 -130%;
  width:55%;
  transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  transition:left .65s var(--fx-ease);
  pointer-events:none;
}
.btn-primary:hover::after,.btn-ppdb:hover::after,.home-main-cta:hover::after,.hero-main-cta:hover::after{left:145%;}

/* Image micro-zoom */
.moment-card img,
.overview-image-main img,
.overview-image-float img,
.hero-feature-image,
.gallery-card img,
.guru-card img{
  transform-origin:center;
  transition:transform .65s var(--fx-ease),filter .45s ease;
}
.moment-card:hover img,
.overview-image-main:hover img,
.overview-image-float:hover img,
.hero-feature-card:hover .hero-feature-image,
.gallery-card:hover img,
.guru-card:hover img{
  transform:scale(1.035);
  filter:saturate(1.03) contrast(1.02);
}

/* Cards lift only when interaction is possible. */
@media (hover:hover) and (pointer:fine){
  .card,.panel,.glass,.stat-card,.info-card,.contact-card,.guru-card,.santri-card,.news-card,.moment-card{
    transition:transform .34s var(--fx-ease),border-color .3s ease,box-shadow .34s var(--fx-ease),background .3s ease;
  }
  .card:hover,.panel:hover,.glass:hover,.stat-card:hover,.info-card:hover,.contact-card:hover,.guru-card:hover,.santri-card:hover,.news-card:hover{
    transform:translateY(-3px);
  }
  .moment-card:hover{transform:translateY(-4px);}
}

/* Global reveal for the currently visible tab. */
.fx-reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .6s ease,transform .6s var(--fx-ease);
}
.fx-reveal.fx-visible{opacity:1;transform:none;}
.fx-reveal.fx-delay-1{transition-delay:70ms;}
.fx-reveal.fx-delay-2{transition-delay:140ms;}
.fx-reveal.fx-delay-3{transition-delay:210ms;}

/* Scroll cue and subtle pulse */
.hero-scroll-cue{will-change:transform,opacity;}

/* Slightly richer mobile menu motion */
@media(max-width:920px){
  nav.tabs{transform-origin:top center;}
  nav.tabs button{opacity:.001;transform:translateY(-5px);transition:opacity .24s ease,transform .24s var(--fx-ease),background .2s ease,color .2s ease;}
  nav.tabs.open button{opacity:1;transform:none;}
  nav.tabs.open button:nth-child(1){transition-delay:20ms;}
  nav.tabs.open button:nth-child(2){transition-delay:45ms;}
  nav.tabs.open button:nth-child(3){transition-delay:70ms;}
  nav.tabs.open button:nth-child(4){transition-delay:95ms;}
  nav.tabs.open button:nth-child(5){transition-delay:120ms;}
  nav.tabs.open button:nth-child(6){transition-delay:145ms;}
}

@media(prefers-reduced-motion:reduce){
  .view.active.fx-view-enter{animation:none;}
  .btn-primary::after,.btn-ppdb::after,.home-main-cta::after,.hero-main-cta::after{display:none;}
  .moment-card img,.overview-image-main img,.overview-image-float img,.hero-feature-image,.gallery-card img,.guru-card img{transition:none!important;}
  .fx-reveal{opacity:1;transform:none;transition:none!important;}
  nav.tabs button{transition:none!important;}
}
\n\n/* ===== PHASE 2E DISABLED: stable, no-blink tab navigation ===== */\n.view.active{animation:none !important;}\n.fx-reveal,.fx-reveal.fx-visible,.fx-view-enter{opacity:1 !important;transform:none !important;transition:none !important;animation:none !important;}\n.home-redesign .reveal,.home-redesign .reveal-right,.home-redesign .reveal.is-visible{opacity:1 !important;transform:none !important;transition:none !important;animation:none !important;}\n.home-redesign .hero-media img{animation:none !important;}\n.hero-scroll-cue span{animation:none !important;}\n.moment-card img{transform:none !important;}\n

/* ===== MOBILE POLISH: Beranda / Guru / Santri ===== */
@media (max-width: 760px){
  /* Beranda */
  .home-redesign{padding-bottom:0!important;}
  .home-redesign .hero-inner{display:flex!important;flex-direction:column!important;gap:22px!important;padding:0 18px!important;}
  .home-redesign .hero-copy{max-width:none!important;}
  .home-redesign .hero-kicker{font-size:10px!important;letter-spacing:.04em!important;}
  .home-redesign .hero-badge{margin-top:8px!important;font-size:9px!important;line-height:1.35!important;}
  .home-redesign .hero h1{font-size:clamp(34px,10.5vw,52px)!important;line-height:.98!important;}
  .home-redesign .tagline{font-size:13.5px!important;line-height:1.62!important;}
  .home-redesign .hero-cta{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;}
  .home-redesign .hero-main-cta,.home-redesign .hero-secondary-cta{width:100%!important;min-height:48px!important;}
  .home-redesign .hero-proof-row{display:grid!important;grid-template-columns:1fr!important;gap:7px!important;margin-top:12px!important;font-size:11px!important;}
  .home-redesign .hero-feature-card{width:100%!important;margin:0!important;}
  .home-redesign .hero-feature-image-wrap{aspect-ratio:16/10!important;}
  .home-redesign .hero-feature-bottom{padding:12px 14px!important;}
  .home-redesign .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;margin:18px 18px 0!important;}
  .home-redesign .hero-stat{padding:12px 11px!important;border-radius:16px!important;}
  .home-redesign .hero-stat strong{font-size:24px!important;}
  .home-redesign .hero-scroll-cue{margin-top:14px!important;}
  .home-overview,.home-stats-visual,.home-moments,.home-cta{padding:58px 0!important;}
  .home-overview .wrap,.home-stats-visual .wrap,.home-moments .wrap,.home-cta .wrap{padding:0 18px!important;}
  .home-overview .overview-grid{display:flex!important;flex-direction:column!important;gap:26px!important;}
  .home-overview .overview-copy h2,.home-section-head h2{font-size:30px!important;line-height:1.08!important;}
  .overview-points{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;}
  .overview-visual{order:2!important;}
  .overview-image-main{min-height:250px!important;}
  .overview-image-float{width:48%!important;max-width:190px!important;}
  .visual-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;}
  .visual-stat-card{padding:14px!important;border-radius:16px!important;}
  .visual-stat-card strong{font-size:27px!important;}
  .visual-stat-lower{grid-template-columns:1fr!important;gap:12px!important;margin-top:12px!important;}
  .visual-panel{padding:15px!important;border-radius:18px!important;}
  .visual-panel h3{font-size:17px!important;}
  .moments-grid{grid-template-columns:1fr 1fr!important;gap:10px!important;}
  .moment-card,.moment-card-tall,.moment-card-wide{min-height:190px!important;}
  .moment-card-wide{grid-column:1/-1!important;min-height:210px!important;}
  .moment-overlay{padding:12px!important;}
  .final-cta-card{display:flex!important;flex-direction:column!important;gap:18px!important;padding:20px!important;border-radius:20px!important;}
  .final-cta-card .btn{width:100%!important;min-height:48px!important;}

  /* Guru & Staff */
  #guru .wrap{padding:0 18px!important;}
  #guru .section-head{padding-top:34px!important;}
  #guru .section-head h2{font-size:30px!important;line-height:1.08!important;}
  #guru .section-head p{font-size:13px!important;line-height:1.65!important;}
  #guru .guru-hero{margin-top:18px!important;border-radius:18px!important;overflow:hidden!important;}
  #guru .guru-hero img{max-height:none!important;height:auto!important;aspect-ratio:16/10!important;object-fit:cover!important;}
  #guru .guru-hero-cap{font-size:10px!important;line-height:1.45!important;padding:10px 12px!important;}
  #guruContainer{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;margin-top:18px!important;}
  #guru .guru-card{border-radius:18px!important;overflow:hidden!important;}
  #guru .guru-card img{aspect-ratio:4/3!important;object-fit:cover!important;}
  #guru .guru-card .guru-card-body{padding:13px!important;}
  #guru .section-contact-strip{margin-top:26px!important;}

  /* Santri public */
  #santri .santri-wrap{padding:54px 18px 0!important;}
  #santri .section-head h2{font-size:30px!important;line-height:1.08!important;}
  #santri .section-head p{font-size:13px!important;line-height:1.65!important;}
  #santri .public-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;margin-top:18px!important;}
  #santri .public-stat-card{padding:14px!important;border-radius:16px!important;}
  #santri .public-stat-card strong{font-size:24px!important;}
  #santri .public-panel{padding:15px!important;border-radius:18px!important;margin-top:12px!important;}
  #santri .public-panel h3{font-size:17px!important;}
  #santri .class-grid,#santri .program-grid{grid-template-columns:1fr!important;gap:8px!important;}
  #santri .public-two-col{grid-template-columns:1fr!important;gap:12px!important;}
  #santri .santri-toolbar{gap:8px!important;}
  #santri .santri-input,#santri .santri-select{min-height:44px!important;}

  /* scroll transition: subtle only while sections enter viewport */
  .mobile-scroll-item{opacity:.92;transform:translateY(8px);transition:opacity .28s ease,transform .28s ease;}
  .mobile-scroll-item.is-in-view{opacity:1;transform:none;}
}
@media (prefers-reduced-motion: reduce){
  .mobile-scroll-item{opacity:1!important;transform:none!important;transition:none!important;}
}

/* Desktop scroll polish: subtle section reveal without tab transitions/blink */
.desktop-scroll-item{opacity:.96;transform:translateY(10px);transition:opacity .32s ease,transform .32s ease;}
.desktop-scroll-item.is-in-view{opacity:1;transform:none;}
@media (max-width: 760px){
  .desktop-scroll-item{opacity:1!important;transform:none!important;transition:none!important;}
}
@media (prefers-reduced-motion: reduce){
  .desktop-scroll-item{opacity:1!important;transform:none!important;transition:none!important;}
}

/* ===== PREMIUM SCROLL REVEAL — subtle, stable, no tab transition ===== */
@media (min-width: 761px){
  .desktop-scroll-item{
    opacity:0;
    transform:translate3d(0,22px,0) scale(.992);
    filter:blur(0);
    transition:opacity .72s cubic-bezier(.22,.61,.36,1),
               transform .72s cubic-bezier(.22,.61,.36,1);
    will-change:opacity,transform;
  }
  .desktop-scroll-item.is-in-view{
    opacity:1;
    transform:none;
  }
  #beranda .home-overview .overview-copy,
  #beranda .home-overview .overview-visual,
  #beranda .home-stats-visual .section-head,
  #beranda .home-moments .section-head,
  #beranda .home-cta .final-cta-card{
    transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);
  }
}

@media (max-width: 760px){
  .mobile-scroll-item{
    opacity:0;
    transform:translate3d(0,16px,0) scale(.995);
    transition:opacity .54s cubic-bezier(.22,.61,.36,1),
               transform .54s cubic-bezier(.22,.61,.36,1);
    will-change:opacity,transform;
  }
  .mobile-scroll-item.is-in-view{
    opacity:1;
    transform:none;
  }
}

/* Premium card entrance, only after the parent section enters view. */
#beranda .home-stats-visual .visual-stat-card,
#beranda .home-moments .moment-card,
#guru #guruContainer .guru-card,
#santri #santriPublic .public-panel,
#santri #santriPublic .public-stat-card{
  transition:opacity .55s cubic-bezier(.22,.61,.36,1),
             transform .55s cubic-bezier(.22,.61,.36,1),
             box-shadow .3s ease,
             border-color .3s ease;
}

@media (prefers-reduced-motion: reduce){
  .desktop-scroll-item,.mobile-scroll-item,
  #beranda .home-stats-visual .visual-stat-card,
  #beranda .home-moments .moment-card,
  #guru #guruContainer .guru-card,
  #santri #santriPublic .public-panel,
  #santri #santriPublic .public-stat-card{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
}

/* ===== HOME-ONLY SCROLL POLISH ===== */
.home-scroll-polish{
  opacity:0;
  transform:translate3d(0,24px,0);
  transition:opacity .72s cubic-bezier(.22,.61,.36,1),
             transform .72s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--home-scroll-delay,0ms);
  will-change:opacity,transform;
}
.home-scroll-polish.is-home-scroll-visible{
  opacity:1;
  transform:none;
}
@media (max-width:760px){
  .home-scroll-polish{
    transform:translate3d(0,14px,0);
    transition-duration:.54s;
  }
}
@media (prefers-reduced-motion:reduce){
  .home-scroll-polish{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
}

/* Contact PPDB contrast refinement */
#kontak .ppdb-card{
  background:linear-gradient(145deg, rgba(15,38,33,.96), rgba(8,26,21,.96)) !important;
  border:1px solid rgba(214,173,96,.42) !important;
  box-shadow:0 18px 42px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04);
}
#kontak .ppdb-card h3{
  color:#F7F3E8 !important;
  font-size:20px;
  line-height:1.25;
}
#kontak .ppdb-card p{
  color:#DDE7E2 !important;
  font-size:13.5px;
  line-height:1.65;
}
#kontak .ppdb-card .btn{
  background:#D6AD60 !important;
  color:#08221B !important;
  border-color:#D6AD60 !important;
  font-weight:800;
}
#kontak .ppdb-card .btn:hover{
  background:#E2C47E !important;
  color:#08221B !important;
}

/* =========================================================
   PHASE 3B — AGENDA
========================================================= */
.agenda-view{min-height:100vh;display:flex!important;flex-direction:column;}
.agenda-view > .section-contact-strip{margin-top:clamp(72px,10vh,140px)!important;}
@media(max-width:760px){.agenda-view > .section-contact-strip{margin-top:clamp(64px,12vh,120px)!important;}}
.agenda-view>.wrap{width:100%;}
.agenda-admin-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;margin-bottom:18px;border:1px solid rgba(158,219,204,.12);border-radius:16px;background:rgba(10,28,23,.7);box-shadow:0 18px 44px rgba(0,0,0,.12);}
.agenda-admin-bar strong{color:#F4F1E8}.agenda-admin-bar small{color:#8FA69E}
.agenda-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
.agenda-card{position:relative;display:grid;grid-template-columns:112px minmax(0,1fr);gap:0;overflow:hidden;border:1px solid rgba(158,219,204,.12);border-radius:20px;background:linear-gradient(180deg,rgba(17,43,35,.72),rgba(8,24,20,.84));box-shadow:0 18px 50px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.025);}
.agenda-card:hover{border-color:rgba(102,226,196,.22);box-shadow:0 22px 52px rgba(0,0,0,.2);}
.agenda-date-block{padding:24px 18px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:linear-gradient(180deg,rgba(102,226,196,.08),rgba(217,181,106,.055));border-right:1px solid rgba(158,219,204,.10);}
.agenda-date-block span{font-family:'Spectral',serif;font-size:15px;line-height:1.25;color:#EDE9DE;font-weight:700;}
.agenda-date-block b{margin-top:9px;font-size:20px;color:#D9B56A;letter-spacing:.02em;}
.agenda-card-body{padding:22px 22px 20px;min-width:0;}
.agenda-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;}
.agenda-badge,.agenda-status{display:inline-flex;align-items:center;min-height:24px;padding:4px 9px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;}
.agenda-badge{color:#A9E8D8;background:rgba(102,226,196,.08);border:1px solid rgba(102,226,196,.12);}
.agenda-status{color:#D9B56A;background:rgba(217,181,106,.08);border:1px solid rgba(217,181,106,.14);}
.agenda-status.done{color:#9EDDBF;background:rgba(111,231,208,.08);border-color:rgba(111,231,208,.12)}
.agenda-status.cancelled{color:#F1A09A;background:rgba(231,127,127,.08);border-color:rgba(231,127,127,.12)}
.agenda-status.past{color:#A7B5AF;background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.07)}
.agenda-card h3{font-size:19px;line-height:1.28;color:#F3EFE7;letter-spacing:-.02em;margin:0 0 8px;}
.agenda-card p{margin:0;color:#9FB3AC;line-height:1.65;font-size:13px;}
.agenda-location{margin-top:14px;color:#D4DED9;font-size:12px;}
.agenda-card-actions{position:absolute;right:12px;top:12px;display:flex;gap:6px;z-index:2;}
.agenda-card-actions button{width:28px;height:28px;border:1px solid rgba(158,219,204,.12);border-radius:9px;background:rgba(4,14,11,.68);color:#CBD8D4;cursor:pointer;}
.agenda-card-actions button:hover{background:rgba(102,226,196,.10);color:#F4F1E8;border-color:rgba(102,226,196,.24);}
.agenda-card-actions button:last-child:hover{background:rgba(231,127,127,.08);border-color:rgba(231,127,127,.22);color:#F3A6A2;}
.agenda-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:820px){.agenda-grid{grid-template-columns:1fr;}}
@media(max-width:640px){.agenda-admin-bar{align-items:stretch;flex-direction:column}.agenda-grid{gap:14px}.agenda-card{grid-template-columns:88px minmax(0,1fr);border-radius:18px}.agenda-date-block{padding:18px 10px}.agenda-date-block span{font-size:13px}.agenda-date-block b{font-size:17px}.agenda-card-body{padding:18px 16px}.agenda-card h3{font-size:17px;padding-right:20px}.agenda-form-grid{grid-template-columns:1fr;}}

/* ===== PHASE 3B.1: Agenda isolated view + footer spacing ===== */
main > #agenda.view.active{display:flex !important;flex-direction:column;min-height:calc(100vh - 82px);}
main > #kontak.view.active{display:block !important;min-height:calc(100vh - 82px);}
main > #agenda.view.active > .wrap{flex:0 0 auto;width:100%;}
main > #agenda.view.active > .section-contact-strip{margin-top:clamp(120px,16vh,220px) !important;flex:0 0 auto;}
@media(max-width:760px){
  main > #agenda.view.active{min-height:calc(100vh - 72px);}
  main > #agenda.view.active > .section-contact-strip{margin-top:clamp(110px,18vh,190px) !important;}
}

/* ===== PATCH: AGENDA MUST NEVER APPEAR INSIDE CONTACT ===== */
.agenda-view:not(.active){display:none !important; visibility:hidden !important;}
#agenda.view:not(.active){display:none !important;}
#kontak.view.active ~ #agenda{display:none !important;}

/* ===== Phase 4A: ADMIN COMMAND CENTER ===== */
.dashboard-command-grid{grid-template-columns:1.15fr .85fr;}
.dashboard-wide-panel{min-height:100%;}
.dashboard-stat-grid{grid-template-columns:repeat(3,1fr);}
.dashboard-stat.attention{border-color:rgba(217,181,106,.26);}
.dashboard-stat.attention .meta{color:#D9B56A;}
.dashboard-attention-list,.dashboard-upcoming,.dashboard-recent{display:grid;gap:9px;}
.attention-row,.upcoming-row,.recent-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 13px;border:1px solid rgba(255,255,255,.055);border-radius:13px;background:rgba(255,255,255,.018);}
.attention-main{display:flex;align-items:center;gap:10px;min-width:0;}
.attention-dot{width:9px;height:9px;border-radius:50%;background:#D9B56A;box-shadow:0 0 0 5px rgba(217,181,106,.07);flex:none;}
.attention-dot.good{background:#6FE7D0;box-shadow:0 0 0 5px rgba(111,231,208,.07);}
.attention-main b,.recent-copy strong,.upcoming-copy strong{display:block;color:#F3EFE3;font-size:12px;}
.attention-main span,.recent-copy small,.upcoming-copy small{display:block;margin-top:3px;color:#879A93;font-size:11px;line-height:1.4;}
.upcoming-date{width:56px;flex:none;text-align:center;padding:8px 6px;border-radius:10px;background:rgba(217,181,106,.06);border:1px solid rgba(217,181,106,.12);}
.upcoming-date b{display:block;color:#D9B56A;font-size:11px;}
.upcoming-date span{display:block;margin-top:2px;color:#8EAAA0;font:700 10px 'JetBrains Mono',monospace;}
.upcoming-copy{min-width:0;flex:1;}
.recent-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:rgba(102,226,196,.07);border:1px solid rgba(102,226,196,.11);color:#6FE7D0;font:800 11px 'Manrope',sans-serif;flex:none;}
.recent-copy{min-width:0;flex:1;}
.dashboard-empty-line{padding:14px;color:#82958E;font-size:12px;border:1px dashed rgba(255,255,255,.06);border-radius:12px;text-align:center;}
.dashboard-panel .mini-btn{white-space:nowrap;}
@media(max-width:1100px){.dashboard-command-grid{grid-template-columns:1fr}.dashboard-stat-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.dashboard-stat-grid{grid-template-columns:repeat(2,1fr)}.attention-row,.upcoming-row,.recent-row{align-items:flex-start}.dashboard-stat{padding:18px}.dashboard-wide-panel{min-height:0}}
@media(max-width:520px){.dashboard-stat-grid{grid-template-columns:1fr}.dashboard-command-grid{grid-template-columns:1fr}.upcoming-date{width:52px}.attention-row .mini-btn{padding:6px 8px}}


/* ===== Phase 4B — Guru & Staff Management ===== */
.guru-admin-tools{margin:24px 0 30px;padding:22px;border:1px solid rgba(102,226,196,.13);border-radius:22px;background:linear-gradient(180deg,rgba(13,37,30,.76),rgba(7,23,19,.88));box-shadow:0 18px 50px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.02)}
.guru-admin-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}.guru-admin-head h3{margin:4px 0 6px}.guru-admin-head p{margin:0;color:var(--muted);font-size:13px}.guru-admin-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0}.guru-admin-metrics>div{padding:14px 16px;border:1px solid rgba(158,219,204,.10);border-radius:16px;background:rgba(255,255,255,.018)}.guru-admin-metrics b{display:block;font-size:24px;color:var(--text)}.guru-admin-metrics span{display:block;margin-top:2px;color:var(--muted);font-size:11px}.guru-admin-filters{display:grid;grid-template-columns:minmax(0,1fr) 240px auto;gap:10px;align-items:center;margin-bottom:14px}.admin-search{display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid rgba(158,219,204,.12);border-radius:14px;background:rgba(255,255,255,.025)}.admin-search span{color:var(--gold);font-size:18px}.admin-search input{width:100%;border:0;background:transparent!important;outline:0;color:var(--text)!important;padding:12px 0}.guru-admin-filters select{height:44px}.guru-missing-toggle{padding:0 12px;height:44px;border:1px solid rgba(158,219,204,.12);border-radius:14px;background:rgba(255,255,255,.025);white-space:nowrap}.guru-admin-list{display:grid;gap:8px}.guru-admin-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:10px 12px;border:1px solid rgba(158,219,204,.09);border-radius:15px;background:rgba(0,0,0,.10)}.guru-mini-avatar{width:44px;height:44px;border-radius:13px;overflow:hidden;background:rgba(102,226,196,.08);display:grid;place-items:center;color:var(--mint);font-weight:800}.guru-mini-avatar img{width:100%;height:100%;object-fit:cover}.guru-admin-main{min-width:0}.guru-admin-main strong,.guru-admin-main span,.guru-admin-main small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.guru-admin-main span{font-size:12px;color:var(--text)}.guru-admin-main small{font-size:10px;color:var(--muted);margin-top:2px}.guru-admin-status{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:7px 9px;border-radius:999px}.guru-admin-status.complete{color:var(--mint);background:rgba(102,226,196,.08);border:1px solid rgba(102,226,196,.13)}.guru-admin-status.incomplete{color:#efc36b;background:rgba(239,195,107,.08);border:1px solid rgba(239,195,107,.13)}.guru-admin-actions{display:flex;gap:6px}.person-photo-editor{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:start}.person-photo-preview{width:96px;height:96px;border-radius:18px;overflow:hidden;border:1px solid rgba(158,219,204,.13);background:rgba(255,255,255,.03);display:grid;place-items:center}.person-photo-preview img{width:100%;height:100%;object-fit:cover}.avatar-preview-empty{width:100%;height:100%;border-radius:0!important;display:grid;place-items:center;color:var(--muted);background:linear-gradient(180deg,rgba(102,226,196,.07),rgba(217,181,106,.05));font-weight:800}.person-photo-controls{display:grid;gap:8px}.person-remove-photo{font-size:12px;color:var(--muted)}
@media(max-width:800px){.guru-admin-head{flex-direction:column}.guru-admin-metrics{grid-template-columns:repeat(2,1fr)}.guru-admin-filters{grid-template-columns:1fr}.guru-admin-row{grid-template-columns:40px minmax(0,1fr);}.guru-admin-status{grid-column:2;justify-self:start}.guru-admin-actions{grid-column:2}.person-photo-editor{grid-template-columns:80px minmax(0,1fr)}.person-photo-preview{width:80px;height:80px}}

/* ===== Phase 4C–4F Admin Management ===== */
.admin-content-toolbar{display:grid;grid-template-columns:1.4fr repeat(3,minmax(150px,1fr));gap:10px;margin:14px 0 18px;}
.admin-content-toolbar input,.admin-content-toolbar select{min-height:42px;border:1px solid rgba(111,231,208,.16);border-radius:12px;background:rgba(8,28,24,.7);color:#e7f3ed;padding:0 13px;font:600 12px 'Manrope',sans-serif;}
.admin-content-summary{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.admin-content-summary span{padding:7px 10px;border-radius:999px;background:rgba(102,226,196,.06);border:1px solid rgba(102,226,196,.12);color:#b9d6ce;font-size:11px;font-weight:700;}
.audit-note{font-size:12px;color:#8ea69f;line-height:1.6;margin:-4px 0 14px;}
.audit-list{display:grid;gap:10px;max-height:420px;overflow:auto;padding-right:4px;}
.audit-item{display:grid;grid-template-columns:86px 1fr auto;gap:12px;align-items:start;padding:12px 14px;border:1px solid rgba(111,231,208,.10);border-radius:14px;background:rgba(5,20,17,.44);}
.audit-time{font-size:11px;color:#9bc9bd;font-weight:700;}
.audit-main strong{display:block;color:#eef7f2;font-size:12px;}
.audit-main small{display:block;color:#8ea69f;margin-top:4px;line-height:1.45;}
.audit-tag{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#d9bf72;padding:5px 8px;border-radius:999px;border:1px solid rgba(217,191,114,.2);}
@media(max-width:860px){.admin-content-toolbar{grid-template-columns:1fr 1fr}.audit-item{grid-template-columns:1fr auto}}
@media(max-width:560px){.admin-content-toolbar{grid-template-columns:1fr}.audit-item{grid-template-columns:1fr}.audit-tag{justify-self:start}}
\n/* ===== PHASE 5A–5F PREMIUM SYSTEM ===== */\n.nav-icon-btn{position:relative;width:40px;height:40px;border:1px solid rgba(158,219,204,.12);border-radius:12px;background:rgba(255,255,255,.025);color:#D7E5DF;cursor:pointer;display:grid;place-items:center;font:700 17px/1 'Manrope',sans-serif;transition:background .18s ease,border-color .18s ease,transform .18s ease}.nav-icon-btn:hover{background:rgba(102,226,196,.07);border-color:rgba(102,226,196,.22);transform:translateY(-1px)}.nav-notify-btn span{font-size:15px;filter:saturate(.8)}.nav-notify-btn b{position:absolute;right:-4px;top:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#d9b56a;color:#071815;font-size:10px;display:grid;place-items:center;border:2px solid #071815}\n.global-search-modal,.notification-modal{max-width:800px}.global-search-input-wrap{display:flex;align-items:center;gap:10px;margin:18px 0;padding:0 14px;border:1px solid rgba(111,231,208,.16);border-radius:16px;background:rgba(255,255,255,.025)}.global-search-input-wrap>span{color:#d9b56a;font-size:20px}.global-search-input-wrap input{width:100%;height:50px;border:0!important;background:transparent!important;outline:0!important;color:#edf7f2!important;font:600 14px 'Manrope',sans-serif}.global-search-results,.notification-list{display:grid;gap:10px;max-height:52vh;overflow:auto;padding-right:2px}.search-result,.notification-item{display:grid;grid-template-columns:42px 1fr auto;gap:12px;align-items:center;padding:13px 14px;border:1px solid rgba(111,231,208,.10);border-radius:14px;background:rgba(7,26,22,.54);cursor:pointer;text-decoration:none;color:inherit}.search-result:hover,.notification-item:hover{border-color:rgba(217,181,106,.25);background:rgba(217,181,106,.035)}.search-result-icon,.notification-icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:rgba(102,226,196,.07);border:1px solid rgba(102,226,196,.1);color:#75e5cf;font-weight:800}.search-result-main strong,.notification-main strong{display:block;color:#f4f7f3;font-size:12px}.search-result-main small,.notification-main small{display:block;margin-top:3px;color:#8fa69e;font-size:11px;line-height:1.45}.search-result-kind{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#d9bb6c;font-weight:800}.search-empty{padding:28px 18px;text-align:center;color:#8fa59d;border:1px dashed rgba(111,231,208,.12);border-radius:14px}.notification-item.unread{border-color:rgba(217,181,106,.24);background:rgba(217,181,106,.035)}.notification-dot{width:7px;height:7px;border-radius:50%;background:#d9b56a;box-shadow:0 0 0 4px rgba(217,181,106,.08)}\n/* SEO/semantic typography support */\n.breadcrumb-lite{display:flex;gap:7px;align-items:center;color:#8fa59d;font-size:11px;margin:0 0 12px}.breadcrumb-lite a{color:#b9d6ce;text-decoration:none}\n/* performance */\nimg[loading="lazy"]{content-visibility:auto}\n@media(max-width:760px){.nav-icon-btn{width:36px;height:36px;border-radius:11px}.nav-notify-btn b{right:-3px;top:-4px}.global-search-modal,.notification-modal{max-height:calc(100vh - 24px)}.global-search-results,.notification-list{max-height:55vh}.search-result,.notification-item{grid-template-columns:36px 1fr}.search-result-kind{grid-column:2;justify-self:start}.search-result-icon,.notification-icon{width:34px;height:34px}}\n@media(prefers-reduced-motion:reduce){.nav-icon-btn,.search-result,.notification-item{transition:none!important;transform:none!important}}\n