/* ===== Website SMK Diponegoro Banyuputih ===== */
:root{
  --hijau:#0b5d3b; --hijau-2:#0e7c4a; --hijau-3:#e7f3ec;
  --aksen:#f2a900; --aksen-2:#d99400;
  --tinta:#13201a; --abu:#56645c; --garis:#e2e8e4; --latar:#ffffff; --latar-2:#f5f8f6;
  --gelap:#0a4f33; --terang:#12925a; --foot:#0a2419; --foot-txt:#b9cdc2; --pucat:#d7ebe0;
  --ikon-ph:#9cc3ad; --teks-2:#2c3a33; --garis-2:#cfe5d8; --abu-2:#a3b1a9;
  --radius:14px; --bayang:0 1px 2px rgba(16,40,28,.06),0 8px 24px rgba(16,40,28,.06);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{margin:0;font-family:"Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--tinta);background:var(--latar);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--hijau-2);text-decoration:none}
h1,h2,h3,h4{line-height:1.2;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(1.9rem,4.5vw,3rem);font-weight:800}
h2{font-size:clamp(1.4rem,3vw,2rem);font-weight:800}
h3{font-size:1.1rem;font-weight:700}
p{margin:0 0 1em}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 20px}
.narrow{max-width:820px}
.muted{color:var(--abu)}
.skip{position:absolute;left:-999px}.skip:focus{left:10px;top:10px;background:#fff;padding:8px;z-index:99}
svg{flex-shrink:0;vertical-align:middle}

/* tombol */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;border:0;background:var(--hijau-2);color:#fff;font:inherit;font-weight:700;cursor:pointer;transition:.2s}
.btn:hover{background:var(--hijau);transform:translateY(-1px)}
.btn-accent{background:var(--aksen);color:#1c1400}.btn-accent:hover{background:var(--aksen-2)}
.btn-ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.35)}.btn-ghost:hover{background:rgba(255,255,255,.22)}
.btn-sm{padding:8px 16px;font-size:.9rem}
.link{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--hijau-2)}
.link:hover svg{transform:translateX(3px)} .link svg{transition:.2s}

/* topbar + nav */
.topbar{background:var(--hijau);color:var(--pucat);font-size:.82rem}
.topbar-in{display:flex;justify-content:space-between;gap:16px;padding:7px 20px;flex-wrap:wrap}
.topbar a{color:var(--pucat)}.topbar-r{display:flex;gap:18px}
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--garis);transition:box-shadow .2s}
.nav.scrolled{box-shadow:0 4px 20px rgba(0,0,0,.06)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px}
.brand{display:flex;align-items:center;gap:12px;color:var(--tinta);min-width:0}
.brand img{height:46px;width:auto}
.brand-mark{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,var(--hijau-2),var(--hijau));color:#fff;display:grid;place-items:center;font-weight:800;letter-spacing:.02em}
.brand-txt{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.brand-txt strong{font-size:1rem;white-space:nowrap}
.brand-txt small{color:var(--abu);font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu{display:flex;align-items:center;gap:4px}
.menu a{padding:8px 12px;border-radius:8px;color:var(--tinta);font-weight:600;font-size:.93rem}
.menu a:hover{background:var(--hijau-3);color:var(--hijau)}
.menu a.aktif{color:var(--hijau-2);background:var(--hijau-3)}
.menu a.btn{color:#1c1400;margin-left:8px;background:var(--aksen)}
.nav-toggle{display:none;background:none;border:0;color:var(--tinta);cursor:pointer;padding:8px}

/* hero */
.hero{position:relative;color:#fff;background:radial-gradient(1200px 500px at 85% -10%,rgba(242,169,0,.25),transparent 60%),linear-gradient(135deg,var(--gelap),var(--hijau-2) 60%,var(--terang));overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:22px 22px;pointer-events:none}
.hero-img{background:linear-gradient(100deg,color-mix(in srgb,var(--gelap) 92%,transparent) 30%,color-mix(in srgb,var(--gelap) 55%,transparent)),var(--hero) center/cover}
.hero-in{position:relative;z-index:1;display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:center;padding:88px 20px 96px}
.eyebrow{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--hijau-2);margin-bottom:10px}
.hero .eyebrow{color:var(--aksen)}
.lead{font-size:1.1rem;color:inherit;opacity:.9;max-width:620px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hero-stats div{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius);padding:22px;backdrop-filter:blur(4px)}
.hero-stats strong{display:block;font-size:2.2rem;font-weight:800;line-height:1}
.hero-stats span{font-size:.88rem;opacity:.85}

/* ticker pengumuman */
.ticker{background:#fff8e6;border-bottom:1px solid #f4e2b0}
.ticker-in{display:flex;align-items:center;gap:16px;padding:12px 20px;overflow:hidden}
.ticker-lbl{display:inline-flex;gap:6px;align-items:center;background:var(--aksen);color:#1c1400;font-weight:700;font-size:.8rem;padding:5px 12px;border-radius:999px;white-space:nowrap}
.ticker-list{display:flex;gap:28px;overflow-x:auto;scrollbar-width:none}
.ticker-list a{color:#5a4200;font-weight:600;white-space:nowrap;font-size:.93rem}
.ticker-list small{color:#8a6d20;font-weight:500;margin-left:6px}

/* section */
.sec{padding:80px 0}
.sec-alt{background:var(--latar-2)}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:32px;flex-wrap:wrap}
.sec-head h2{margin:0}
.page-head{background:linear-gradient(135deg,var(--gelap),var(--c,var(--hijau-2)));color:#fff;padding:64px 0 56px}
.page-head .eyebrow{color:var(--aksen)} .page-head h1{margin-bottom:.3em}
.page-head .lead{margin:0}
.crumb{display:block;color:var(--pucat);font-size:.9rem;margin-bottom:16px}
.page-head .meta{color:var(--pucat);margin:0;display:flex;gap:6px;align-items:center;flex-wrap:wrap}

/* grid & card */
.grid{display:grid;gap:24px}
.grid-3{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.card{background:#fff;border:1px solid var(--garis);border-radius:var(--radius);overflow:hidden;box-shadow:var(--bayang);color:var(--tinta);display:flex;flex-direction:column;transition:.2s}
a.card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(16,40,28,.12)}
.card-body{padding:22px}
.card-body p{color:var(--abu);margin-bottom:.6em}
.card-accent{background:var(--hijau-3);border-color:var(--garis-2)}
.badge{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--hijau-3);color:var(--hijau);margin-bottom:10px}
.badge-pengumuman{background:#fff1cc;color:#7a5600}.badge-prestasi{background:#ede9fe;color:#5b21b6}.badge-agenda{background:#dbeafe;color:#1e40af}
.jur{--c:var(--hijau-2)}
.jur-img{aspect-ratio:16/9;background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 60%,#000));display:grid;place-items:center;overflow:hidden}
.jur-img img{width:100%;height:100%;object-fit:cover}
.jur-img span{color:#fff;font-size:2.4rem;font-weight:800;letter-spacing:.04em;opacity:.95}
.jur .badge{background:color-mix(in srgb,var(--c) 14%,#fff);color:var(--c)}
.news-img{position:relative;aspect-ratio:16/10;background:var(--hijau-3);display:grid;place-items:center;color:var(--ikon-ph);overflow:hidden}
.news-img img{width:100%;height:100%;object-fit:cover}
.news-img .badge{position:absolute;left:14px;top:14px;margin:0;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.meta{display:inline-flex;align-items:center;gap:6px;color:var(--abu);font-size:.83rem;margin-bottom:6px}
.news h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* sambutan */
.sambutan{display:grid;grid-template-columns:320px 1fr;gap:56px;align-items:center}
.sambutan-foto{position:relative}
.sambutan-foto img,.foto-ph{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:20px;background:var(--hijau-3);display:grid;place-items:center;color:var(--ikon-ph)}
.sambutan-nama{position:absolute;left:16px;right:16px;bottom:16px;background:#fff;border-radius:12px;padding:12px 16px;box-shadow:var(--bayang);display:flex;flex-direction:column}
.sambutan-nama span{color:var(--abu);font-size:.85rem}
.clamp{display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:12px}

/* apps */
.grid-apps{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.grid-apps-lg{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.app{--c:var(--hijau-2);display:flex;align-items:center;gap:14px;padding:16px;background:#fff;border:1px solid var(--garis);border-radius:var(--radius);color:var(--tinta);transition:.2s;position:relative}
.app:hover{border-color:var(--c);box-shadow:0 8px 24px color-mix(in srgb,var(--c) 18%,transparent);transform:translateY(-2px)}
.app-ic{width:50px;height:50px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--c);flex-shrink:0}
.app-txt{display:flex;flex-direction:column;min-width:0}
.app-txt small{color:var(--abu);font-size:.84rem}
.app-lg{padding:20px;align-items:flex-start}
.app-lg .app-ic{width:56px;height:56px}
.app-go{margin-left:auto;color:var(--abu-2)}
.app:hover .app-go{color:var(--c)}
.h-grup{font-size:1rem;text-transform:uppercase;letter-spacing:.06em;color:var(--abu);margin:32px 0 14px}
.app-grup:first-child .h-grup{margin-top:0}

/* galeri */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gal-full{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.gal-item{position:relative;display:block;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--hijau-3)}
.gal-item img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.gal-item:hover img{transform:scale(1.06)}
.gal-cap{position:absolute;left:0;right:0;bottom:0;padding:24px 12px 10px;color:#fff;font-size:.85rem;font-weight:600;background:linear-gradient(transparent,rgba(0,0,0,.65))}
.lb{position:fixed;inset:0;background:rgba(5,15,10,.92);z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px}
.lb img{max-height:82vh;border-radius:8px}
.lb p{color:#fff;margin-top:12px}
.lb button{position:absolute;background:rgba(255,255,255,.12);border:0;color:#fff;width:46px;height:46px;border-radius:50%;cursor:pointer;font-size:1.4rem}
.lb .lb-x{top:16px;right:16px}.lb .lb-p{left:16px;top:50%}.lb .lb-n{right:16px;top:50%}

/* CTA */
.cta{background:linear-gradient(135deg,var(--gelap),var(--hijau-2));color:#fff;padding:56px 0}
.cta-in{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.cta h2{margin-bottom:.2em}.cta p{margin:0;opacity:.9}

/* halaman isi */
.two-col{display:grid;grid-template-columns:1fr 340px;gap:48px;align-items:start}
.prose{font-size:1.04rem;min-width:0}
.prose h2{font-size:1.45rem;margin-top:1.6em}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--teks-2)}
.prose blockquote{margin:0 0 1.2em;padding:18px 22px;border-left:4px solid var(--aksen);background:#fffaf0;border-radius:0 12px 12px 0;font-weight:600;font-size:1.1rem}
.cover{width:100%;border-radius:var(--radius);margin-bottom:24px}
.misi{padding-left:1.2em}.misi li{margin-bottom:.5em}
.check{list-style:none;padding:0;display:grid;gap:10px}
.check li{display:flex;gap:10px;align-items:flex-start}.check svg{color:var(--hijau-2);margin-top:3px}
.dot{padding-left:1.1em;margin:0;color:var(--abu)}.dot li{margin-bottom:.4em}
.side{display:grid;gap:20px;position:sticky;top:92px}
.side-foto{aspect-ratio:4/3;object-fit:cover;width:100%}
.ident{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:.92rem}
.ident dt{color:var(--abu)}.ident dd{margin:0;font-weight:600;min-width:0;overflow-wrap:anywhere}
.stat-box{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat-box div{background:var(--hijau-3);border-radius:12px;padding:14px;text-align:center}
.stat-box strong{display:block;font-size:1.5rem;color:var(--hijau)}.stat-box span{font-size:.82rem;color:var(--abu)}
.mini-list{list-style:none;padding:0;margin:0}
.mini-list li{padding:10px 0;border-bottom:1px solid var(--garis);display:flex;flex-direction:column}
.mini-list li:last-child{border:0}.mini-list a{color:var(--tinta);font-weight:600}.mini-list small{color:var(--abu)}
.share{margin-top:32px;padding-top:16px;border-top:1px solid var(--garis);display:flex;gap:14px;color:var(--abu);font-size:.92rem}

/* filter, chips, pager */
.filter{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.chips{display:flex;gap:8px;flex-wrap:wrap}.mb{margin-bottom:24px}
.chip{padding:8px 16px;border-radius:999px;border:1px solid var(--garis);color:var(--tinta);font-weight:600;font-size:.9rem;background:#fff}
.chip.aktif,.chip:hover{background:var(--hijau-2);border-color:var(--hijau-2);color:#fff}
.chip small{opacity:.7}
.search{display:flex;gap:8px}
.search input,.form input,.form textarea{font:inherit;padding:11px 14px;border:1px solid var(--garis);border-radius:10px;background:#fff;color:var(--tinta);width:100%}
.search input:focus,.form input:focus,.form textarea:focus{outline:2px solid color-mix(in srgb,var(--hijau-2) 40%,transparent);border-color:var(--hijau-2)}
.search-lg{margin-top:24px;max-width:520px}.search-lg input{padding:14px 18px;border:0;font-size:1rem}
.pager{display:flex;gap:6px;justify-content:center;margin-top:40px}
.pager a{min-width:40px;height:40px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--garis);color:var(--tinta);font-weight:600}
.pager a.aktif{background:var(--hijau-2);color:#fff;border-color:var(--hijau-2)}
.kosong{text-align:center;color:var(--abu);padding:40px 0}

/* kontak */
.kontak-list{display:grid;gap:18px;margin-bottom:24px}
.kontak-list>div{display:flex;gap:14px}.kontak-list svg{color:var(--hijau-2);margin-top:2px}
.kontak-list p{margin:0;color:var(--abu)}
.map{border-radius:var(--radius);overflow:hidden;border:1px solid var(--garis)}
.map iframe{width:100%;height:320px;border:0;display:block}
.form{display:grid;gap:14px}.form label{display:grid;gap:6px;font-weight:600;font-size:.92rem}
.hp{position:absolute;left:-9999px}
.alert{padding:12px 16px;border-radius:10px;margin-bottom:14px;font-weight:600}
.alert.ok{background:#dcfce7;color:#14532d}.alert.err{background:#fee2e2;color:#7f1d1d}

/* footer */
.foot{background:var(--foot);color:var(--foot-txt);padding:64px 0 0;font-size:.93rem}
.foot h3,.foot h4{color:#fff}.foot a{color:var(--foot-txt)}.foot a:hover{color:#fff}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:40px}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.foot p{display:flex;gap:8px;align-items:flex-start}
.sosmed{display:flex;gap:14px;flex-wrap:wrap}
.foot-bot{display:flex;justify-content:space-between;border-top:1px solid rgba(255,255,255,.08);margin-top:48px;padding:20px;font-size:.85rem}
.wa-float{position:fixed;right:20px;bottom:20px;width:56px;height:56px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.2);z-index:60}

/* responsif */
@media (max-width:980px){
  .nav-toggle{display:block}
  .menu{position:fixed;top:72px;left:0;right:0;bottom:0;background:#fff;flex-direction:column;align-items:stretch;padding:16px 20px;gap:2px;transform:translateX(100%);visibility:hidden;transition:transform .25s,visibility .25s;overflow-y:auto}
  .menu.buka{transform:none;visibility:visible}
  .menu a{padding:14px;font-size:1rem}.menu a.btn{margin:10px 0 0;justify-content:center}
  .hero-in,.sambutan,.two-col{grid-template-columns:1fr}
  .hero-in{padding:56px 20px 64px;gap:32px}
  .sambutan{gap:28px}.sambutan-foto{max-width:320px}
  .side{position:static}
  .foot-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .topbar{display:none}
  .sec{padding:56px 0}
  .gal{grid-template-columns:repeat(2,1fr)}
  .grid-3,.grid-apps-lg{grid-template-columns:1fr}
  .brand-txt small{display:none}.brand-txt strong{font-size:.92rem;white-space:normal}
  .hero-stats strong{font-size:1.7rem}.hero-stats div{padding:16px}
}

/* ===== Program & Konsentrasi Keahlian ===== */
.kode{font-weight:600;opacity:.7}
.crumb a{color:var(--pucat)}.crumb a:hover{color:#fff}
.sec-tight{padding:56px 0}
.kons-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:4px}
.kons-chips small{color:var(--abu);font-size:.8rem;margin-right:2px}
.kons-chips span{font-size:.78rem;font-weight:700;padding:3px 10px;border-radius:6px;border:1px solid color-mix(in srgb,var(--c) 35%,#fff);color:var(--c)}
.grid-kons{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
.kons{--c:var(--hijau-2);border-top:4px solid var(--c)}
.kons-img{aspect-ratio:16/8;overflow:hidden}.kons-img img{width:100%;height:100%;object-fit:cover}
.kons-kode{display:inline-block;font-size:1.5rem;font-weight:800;color:var(--c);letter-spacing:.02em;line-height:1;margin-bottom:8px}
.check-sm{gap:6px;margin:0 0 14px;font-size:.9rem;color:var(--teks-2)}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags span{display:inline-flex;align-items:center;gap:5px;font-size:.84rem;font-weight:600;padding:5px 10px;border-radius:8px;background:#fff8e6;color:#7a5600}
.prog-list{display:grid;gap:28px}
.prog{--c:var(--hijau-2);border:1px solid var(--garis);border-radius:18px;overflow:hidden;background:#fff;box-shadow:var(--bayang)}
.prog-head{display:grid;grid-template-columns:300px 1fr;color:var(--tinta)}
.prog-img{background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 60%,#000));display:grid;place-items:center;min-height:200px}
.prog-img img{width:100%;height:100%;object-fit:cover}
.prog-img span{color:#fff;font-size:2.8rem;font-weight:800}
.prog-txt{padding:28px}.prog-txt h2{font-size:1.5rem}.prog-txt p{color:var(--abu)}
.prog-head:hover .link svg{transform:translateX(3px)}
.prog-kons{padding:20px 28px 24px;background:var(--latar-2);border-top:1px solid var(--garis)}
.prog-kons small{display:block;color:var(--abu);font-weight:600;margin-bottom:10px}
.grid-kons-sm{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.kons-mini{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#fff;border:1px solid var(--garis);border-radius:12px;color:var(--tinta);transition:.2s}
.kons-mini:hover{border-color:var(--c);transform:translateY(-2px)}
.kons-mini b{color:var(--c);min-width:48px}.kons-mini span{flex:1;font-weight:600;font-size:.94rem}.kons-mini svg{color:var(--abu)}
@media (max-width:640px){.prog-head{grid-template-columns:1fr}.prog-img{min-height:140px}.grid-kons,.grid-kons-sm{grid-template-columns:1fr}.prog-txt,.prog-kons{padding:20px}}

/* ===== Tema Netral (slate) — aktif jika Pengaturan → Tema = Netral ===== */
body[data-tema="netral"]{
  --hijau:#1e293b; --hijau-2:#334155; --hijau-3:#f1f5f9;
  --tinta:#0f172a; --abu:#64748b; --garis:#e2e8f0; --latar-2:#f8fafc;
  --gelap:#0f172a; --terang:#475569; --foot:#0b1120; --foot-txt:#cbd5e1; --pucat:#e2e8f0;
  --ikon-ph:#cbd5e1; --teks-2:#334155; --garis-2:#e2e8f0; --abu-2:#94a3b8;
}
body[data-tema="netral"] .eyebrow{color:#b45309}
body[data-tema="netral"] .hero .eyebrow,body[data-tema="netral"] .page-head .eyebrow{color:var(--aksen)}