/* Sekolah Linimasa — gaya situs. Bersih: datar, banyak ruang, satu kolom isi yang sejajar. */
:root{
  --hijau:#163329;--hijau-2:#24493b;--hijau-muda:#eef3ef;--pasir:#f7f3ea;--aksen:#A69764;--aksen-tua:#6e6337;
  --gelap:#0d211a;--ink:#1c2420;--muted:#5b6a60;--bg:#fcfbf8;--line:#e4e6df;--radius:14px;
  --wrap:1120px;--isi:720px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:17px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--hijau);text-underline-offset:3px}
a:focus-visible,summary:focus-visible,label:focus-visible{outline:2px solid var(--aksen);outline-offset:3px;border-radius:4px}
h1,h2,h3{color:var(--gelap);line-height:1.15;letter-spacing:-.015em}
h1{font-size:clamp(2.1rem,5vw,3.4rem);margin:.2em 0 .35em;font-weight:750}
h2{font-size:clamp(1.5rem,3vw,2rem);margin:0 0 .6em;font-weight:700}
h3{font-size:1.15rem;margin:0 0 .4em;font-weight:650}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.muted{color:var(--muted)}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;color:var(--aksen-tua);font-weight:700;margin:0 0 .8rem}
.lead{font-size:1.18rem;color:var(--muted);max-width:36em}

/* Kepala */
.top{background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.bar{display:flex;align-items:center;justify-content:space-between;min-height:68px;gap:1rem}
.brand{display:flex;gap:.65rem;align-items:center;text-decoration:none;color:var(--hijau);font-weight:800;font-size:1.3rem}
.brand img{display:block;height:40px;width:auto}
.brand span{display:flex;flex-direction:column;line-height:1.1}
.brand small{font-weight:500;font-size:.72rem;color:var(--muted);letter-spacing:.02em;margin-top:.2rem}
nav{display:flex;align-items:center;gap:1.6rem;font-size:.97rem}
nav a,.sub summary{text-decoration:none;color:var(--ink);font-weight:500;padding:.3rem 0;border-bottom:2px solid transparent}
nav a:hover,.sub summary:hover{color:var(--hijau)}
nav a[aria-current],.sub[data-aktif] summary{color:var(--hijau);border-bottom-color:var(--aksen)}
nav a[href="pendaftaran.html"]{background:var(--hijau);color:#fff;padding:.5rem 1.05rem;border-radius:999px;border:0}
nav a[href="pendaftaran.html"]:hover{background:var(--hijau-2);color:#fff}
nav a[href="pendaftaran.html"][aria-current]{background:var(--hijau-2)}
.sub{position:relative}
.sub summary{list-style:none;cursor:pointer}
.sub summary::-webkit-details-marker{display:none}
.sub summary::after{content:"";display:inline-block;width:.42em;height:.42em;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-.2em);margin-left:.45em}
.sub div{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:12px;padding:.4rem;position:absolute;top:2.4rem;left:-.8rem;min-width:190px;box-shadow:0 12px 32px rgba(13,33,26,.1)}
.sub div a{padding:.55rem .8rem;border-radius:8px;border:0}
.sub div a:hover,.sub div a[aria-current]{background:var(--hijau-muda)}
.burger{display:none;cursor:pointer;width:44px;height:44px;border-radius:10px;align-items:center;justify-content:center;font-size:1.4rem;color:var(--hijau)}
@media(max-width:960px){
  .burger{display:flex}
  nav{display:none;position:absolute;top:68px;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:.5rem 20px 1.2rem;border-bottom:1px solid var(--line);box-shadow:0 16px 30px rgba(13,33,26,.08)}
  #m:checked~nav{display:flex}
  nav a,.sub summary{padding:.8rem 0;border-bottom:1px solid var(--line)}
  nav a[aria-current],.sub[data-aktif] summary{border-bottom-color:var(--line);color:var(--hijau);font-weight:650}
  nav a[href="pendaftaran.html"]{margin-top:1rem;text-align:center;padding:.8rem}
  .sub div{position:static;border:0;box-shadow:none;padding:0 0 0 1rem;min-width:0}
  .sub div a{border-bottom:1px solid var(--line);border-radius:0;padding:.7rem 0}
}

/* Tombol */
.btn{display:inline-flex;align-items:center;gap:.4rem;background:var(--hijau);color:#fff;padding:.8rem 1.45rem;border-radius:999px;text-decoration:none;font-weight:600;border:1.5px solid var(--hijau);transition:background .15s}
.btn:hover{background:var(--hijau-2)}
.btn.ghost{background:transparent;color:var(--hijau)}
.btn.ghost:hover{background:var(--hijau-muda)}
.aksi{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}

/* Bagian */
.bagian{padding:clamp(3.5rem,8vw,6rem) 0}
.bagian.pasir{background:var(--pasir)}
.kepala-bagian{max-width:40em;margin-bottom:2.4rem}
.kepala-bagian p{color:var(--muted);margin:0}

/* Hero beranda */
.hero{padding:clamp(3rem,7vw,5.5rem) 0 clamp(3rem,7vw,5rem);background:linear-gradient(180deg,var(--hijau-muda),var(--bg))}
.split{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:1.05fr .95fr;align-items:center}
@media(max-width:860px){.split{grid-template-columns:1fr}}
.fakta{background:#fff;border:1px solid var(--line);border-radius:20px;padding:.6rem 1.6rem;box-shadow:0 20px 40px rgba(13,33,26,.06)}
.fakta div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:1.15rem 0;border-bottom:1px solid var(--line)}
.fakta div:last-child{border-bottom:0}
.fakta b{font-size:1.05rem;color:var(--gelap)}
.fakta span{color:var(--muted);font-size:.95rem;text-align:right}

/* Hero halaman dalam */
.hero.sm{padding:clamp(2.5rem,6vw,4rem) 0 clamp(2rem,4vw,3rem);border-bottom:1px solid var(--line)}
.hero.sm h1{margin-bottom:.2em}
.hero.sm .lead{margin:0}

/* Isi bacaan — sejajar dengan tepi kiri judul */
.prose{max-width:var(--isi)}
.prose h2{margin-top:2.4rem}
.prose h2:first-child{margin-top:0}
.prose li{margin:.4rem 0}
.prose ul,.prose ol{padding-left:1.3rem}
blockquote{margin:0 0 1.2rem;border-left:3px solid var(--aksen);padding:.2rem 0 .2rem 1.2rem;font-size:1.12rem;color:var(--gelap)}
blockquote p:last-child{margin:0}

/* Daftar bernomor (Mengapa Linimasa) */
.nomor{display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));counter-reset:n}
.nomor article{border-top:2px solid var(--gelap);padding-top:1.2rem}
.nomor article::before{counter-increment:n;content:"0" counter(n);display:block;font-size:.85rem;font-weight:700;color:var(--aksen-tua);letter-spacing:.08em;margin-bottom:.8rem}
.nomor p{color:var(--muted);margin:0}

/* Jenjang */
.jenjang{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.jenjang a{display:flex;flex-direction:column;justify-content:space-between;min-height:220px;padding:2rem;border-radius:20px;text-decoration:none;background:var(--hijau);color:#e8efe9;transition:transform .2s}
.jenjang a+a{background:var(--gelap)}
.jenjang a:hover{transform:translateY(-3px)}
.jenjang h3{color:#fff;font-size:1.7rem;margin:.3rem 0 .5rem}
.jenjang .eyebrow{color:var(--aksen)}
.jenjang p{margin:0;max-width:24em}
.jenjang .panah{margin-top:1.6rem;font-weight:600;color:#fff}

/* Program */
.program{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.program article{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem}
.program p{color:var(--muted);margin:0;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.program p+p{display:none}

/* Ajakan */
.ajakan{background:var(--hijau);color:#dfe8e1;border-radius:24px;padding:clamp(2rem,5vw,3.5rem);display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;justify-content:space-between}
.ajakan h2{color:#fff;margin:0 0 .3rem}
.ajakan p{margin:0}
.ajakan .btn{background:#fff;color:var(--hijau);border-color:#fff}
.ajakan .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.ajakan .aksi{margin:0}

/* Galeri dan sorotan */
.galeri{display:grid;gap:2rem 1.4rem;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.galeri figure{margin:0}
.galeri img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;display:block;background:var(--hijau-muda)}
.galeri figcaption{padding-top:.7rem;font-size:.95rem;color:var(--muted)}
.galeri figcaption a{display:inline-block;margin-top:.2rem;font-size:.88rem}
.kosong{border:1.5px dashed var(--line);border-radius:20px;padding:3rem 1.5rem;text-align:center;color:var(--muted);max-width:var(--isi)}
.kosong p{margin:0 0 .4rem}
.sorot{position:relative;aspect-ratio:4/3;border-radius:20px;overflow:hidden;box-shadow:0 24px 48px rgba(13,33,26,.14);background:var(--hijau-muda)}
.sorot .slide{position:absolute;inset:0;margin:0;opacity:0;animation:gilir var(--dur) infinite}
.sorot .slide img{width:100%;height:100%;object-fit:cover;display:block}
.sorot figcaption{position:absolute;left:0;right:0;bottom:0;padding:2.4rem 1.2rem 1rem;color:#fff;font-weight:600;font-size:.95rem;background:linear-gradient(transparent,rgba(13,33,26,.82))}
.sorot:hover .slide{animation-play-state:paused}
.sorot-link{text-align:right;margin:.7rem 0 0;font-size:.95rem}
@media(prefers-reduced-motion:reduce){.sorot .slide{animation:none}.sorot .slide:first-child{opacity:1}}

/* Cerita */
.daftar-tulisan{max-width:var(--isi)}
.tulisan{padding:1.8rem 0;border-bottom:1px solid var(--line)}
.tulisan:first-child{padding-top:0}
.tulisan h2{font-size:1.45rem;margin:0 0 .3rem}
.tulisan h2 a{text-decoration:none;color:var(--gelap)}
.tulisan h2 a:hover{color:var(--hijau)}
.tulisan .muted{font-size:.9rem;margin:0 0 .7rem}

/* Kontak */
.kontak{display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));max-width:900px}
.kontak h2{font-size:1rem;text-transform:uppercase;letter-spacing:.1em;color:var(--aksen-tua);margin:0 0 .6rem}

/* Kaki */
footer{background:var(--gelap);color:#c9d3cc;padding:3.5rem 0 1.5rem;font-size:.95rem}
footer a{color:#fff}
footer b{color:#fff;display:block;margin-bottom:.6rem}
footer p{margin:0 0 .8rem}
.cols{display:grid;gap:2rem;grid-template-columns:2fr 2fr 1fr}
@media(max-width:760px){.cols{grid-template-columns:1fr}}
.copy{margin-top:2.5rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.1);font-size:.82rem;opacity:.7}

/* Tombol WhatsApp mengambang */
.wa{position:fixed;right:18px;bottom:18px;width:54px;height:54px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 8px 20px rgba(0,0,0,.18);z-index:9;transition:transform .15s}
.wa:hover{transform:scale(1.06)}
.wa svg{width:28px;height:28px;fill:#fff}
.bagian+.ajakan-wrap{padding-top:0}
@media(max-width:520px){.fakta div{flex-direction:column;gap:.15rem}.fakta span{text-align:left}.ajakan .aksi{width:100%}}

/* ===== Tahap 1 (4 Okt 2026) ===== */
@font-face{font-family:"Bricolage Grotesque";src:url(huruf/bricolage.woff2) format("woff2");font-weight:600;font-display:swap}
h1,h2,.bento b,.jenjang h3{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:600;letter-spacing:-.025em}
h1{font-weight:600}

/* Motif kontur sawah + padi (pengganti foto selama galeri belum aktif) */
.motif{aspect-ratio:5/4;border-radius:28px;background-color:var(--hijau);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 400' fill='none' stroke-linecap='round'%3E%3Cg stroke='%23A69764' stroke-opacity='.55' stroke-width='2'%3E%3Cpath d='M-20 300c80-40 160-40 240 0s160 40 300 0'/%3E%3Cpath d='M-20 270c80-40 160-40 240 0s160 40 300 0'/%3E%3Cpath d='M-20 240c80-40 160-40 240 0s160 40 300 0'/%3E%3Cpath d='M-20 210c80-40 160-40 240 0s160 40 300 0'/%3E%3Cpath d='M-20 330c80-40 160-40 240 0s160 40 300 0'/%3E%3Cpath d='M-20 360c80-40 160-40 240 0s160 40 300 0'/%3E%3C/g%3E%3Cg stroke='%23eef3ef' stroke-width='3'%3E%3Cpath d='M250 200V70'/%3E%3Cpath d='M250 90c-18-6-28-20-30-38 18 4 28 18 30 38zM250 90c18-6 28-20 30-38-18 4-28 18-30 38zM250 120c-18-6-28-20-30-38 18 4 28 18 30 38zM250 120c18-6 28-20 30-38-18 4-28 18-30 38zM250 150c-18-6-28-20-30-38 18 4 28 18 30 38zM250 150c18-6 28-20 30-38-18 4-28 18-30 38z'/%3E%3C/g%3E%3Ccircle cx='390' cy='80' r='26' stroke='%23A69764' stroke-width='3'/%3E%3C/svg%3E");
  background-size:cover;background-position:center;box-shadow:0 24px 48px rgba(13,33,26,.16)}

/* Bento angka bukti */
.bento-wrap{margin-top:-1.5rem;position:relative}
.bento{display:grid;gap:1rem;grid-template-columns:1.3fr 1fr 1fr;grid-auto-rows:minmax(130px,auto)}
.kotak{background:#fff;border:1px solid var(--line);border-radius:18px;padding:1.3rem 1.4rem;display:flex;flex-direction:column;justify-content:flex-end;gap:.3rem}
.kotak b{font-size:2.2rem;line-height:1;color:var(--gelap)}
.kotak span{color:var(--muted);font-size:.93rem;line-height:1.4}
.kotak.besar{grid-row:span 2;background:var(--hijau);border-color:var(--hijau);justify-content:space-between}
.kotak.besar b{color:#fff;font-size:clamp(2.6rem,6vw,3.6rem)}
.kotak.besar span{color:#cfdcd3;font-size:1rem}
.kotak.besar a{color:var(--aksen);font-weight:600;text-decoration:none;margin-top:auto}
@media(max-width:860px){.bento{grid-template-columns:1fr 1fr}.kotak.besar{grid-column:span 2;grid-row:auto}.bento-wrap{margin-top:0}}

/* Sehari di Linimasa — garis waktu */
.dua-garis{display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.dua-garis h3{font-size:1rem;text-transform:uppercase;letter-spacing:.1em;color:var(--aksen-tua);margin-bottom:1.2rem}
.garis{list-style:none;margin:0;padding:0;max-width:var(--isi)}
.garis li{display:grid;grid-template-columns:4.2rem 1fr;gap:1rem;position:relative;padding-bottom:1.3rem}
.garis li::before{content:"";position:absolute;left:4.6rem;top:.55rem;width:11px;height:11px;border-radius:50%;background:var(--bg);border:2.5px solid var(--hijau)}
.garis li::after{content:"";position:absolute;left:calc(4.6rem + 5px);top:1.4rem;bottom:0;width:1.5px;background:var(--line)}
.garis li:last-child::after{display:none}
.garis li:last-child::before{background:var(--hijau)}
.garis .jam{font-weight:700;color:var(--hijau);font-variant-numeric:tabular-nums;padding-top:.05rem}
.garis li div{padding-left:1.4rem}
.garis b{display:block;color:var(--gelap)}
.garis p{margin:.15rem 0 0;color:var(--muted);font-size:.95rem}
.draf{display:inline-block;margin-top:.8rem !important;background:#fff3cd;color:#6b5400 !important;font-size:.85rem;padding:.3rem .7rem;border-radius:6px}

/* Gerak halus — hanya bila pengguna tidak meminta kurangi gerak; isi tetap terlihat di browser lama */
@view-transition{navigation:auto}
@media(prefers-reduced-motion:no-preference){
  @supports(animation-timeline:view()){
    .bagian .wrap>*,.bento .kotak{animation:muncul linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
  }
}
@keyframes muncul{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ===== Tahap 2 (5 Okt 2026) ===== */
.hero-sm-isi{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2rem}
.hero-motif{width:300px;height:auto;display:block}
@media(max-width:760px){.hero-sm-isi{grid-template-columns:1fr}.hero-motif{width:180px;order:-1;margin-bottom:-.5rem}}
.daftar-tanya{max-width:var(--isi);border-top:1px solid var(--line)}
.tanya{border-bottom:1px solid var(--line)}
.tanya summary{cursor:pointer;list-style:none;padding:1.1rem 2.2rem 1.1rem 0;font-weight:600;color:var(--gelap);position:relative}
.tanya summary::-webkit-details-marker{display:none}
.tanya summary::after{content:"+";position:absolute;right:.2rem;top:.9rem;font-size:1.4rem;font-weight:400;color:var(--aksen-tua);transition:transform .2s}
.tanya[open] summary::after{transform:rotate(45deg)}
.tanya p{margin:0 0 1.2rem;color:var(--muted)}
.daftar-kartu{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.kartu-cerita{display:flex;flex-direction:column;gap:.4rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
.kartu-cerita:hover{border-color:var(--hijau);transform:translateY(-2px)}
.kartu-cerita h3{margin:.2rem 0}.kartu-cerita p{color:var(--muted);margin:0}.kartu-cerita .muted{font-size:.88rem}
.kartu-cerita .panah{margin-top:auto;padding-top:.6rem;color:var(--hijau);font-weight:600}
.garis li{grid-template-columns:1fr}.garis li::before{left:0}.garis li::after{left:5px}
.garis li div{padding-left:1.9rem}
.bagian.hijau{background:var(--hijau);color:#d5e1d8}
.bagian.hijau h2,.bagian.hijau h3{color:#fff}.bagian.hijau .eyebrow{color:var(--aksen)}
.praktik{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.praktik article{border-top:1px solid rgba(255,255,255,.25);padding-top:1.1rem}
.praktik p{margin:0;color:#c3d2c8}
.program{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

/* Halaman Pendaftaran (mengikuti halaman depan SPMB) */
.halaman-daftar>*{max-width:860px}
.halaman-daftar h2{margin-top:2.6rem}.halaman-daftar h2:first-child{margin-top:0}
.halaman-daftar h3{margin-top:1.8rem}
.tabel-gulir{overflow-x:auto}
.tabel{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:0 0 1rem;font-size:.97rem}
.tabel th,.tabel td{padding:.75rem 1rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tabel thead th{font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);background:var(--hijau-muda)}
.tabel tbody th{font-weight:600;color:var(--gelap)}
.tabel tr:last-child th,.tabel tr:last-child td{border-bottom:0}
.tabel-biaya td{text-align:right;font-weight:700;color:var(--gelap);white-space:nowrap}
.tabel-biaya tbody th{font-weight:500;color:var(--ink)}
.tabel-biaya .jumlah th,.tabel-biaya .jumlah td{background:var(--hijau-muda);font-weight:700;color:var(--gelap)}
.dua-kartu{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-bottom:1rem}
.kartu-syarat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1.2rem 1.4rem}
.kartu-syarat h3{margin:0 0 .5rem}.kartu-syarat ul{margin:0;padding-left:1.2rem}.kartu-syarat li{margin:.3rem 0}
.tahapan{counter-reset:t;list-style:none;padding:0;margin:0 0 1rem;display:grid;gap:.5rem}
.tahapan li{counter-increment:t;display:flex;gap:.8rem;align-items:baseline}
.tahapan li::before{content:counter(t);flex:0 0 1.9rem;height:1.9rem;border-radius:50%;background:var(--hijau);color:#fff;font-weight:700;font-size:.85rem;display:grid;place-items:center}
.siap{margin-top:2.8rem;padding:2rem;background:var(--pasir);border-radius:18px}
.siap h2{margin-top:0}
.hitung-daftar{display:inline-flex;flex-direction:column;gap:.2rem;background:var(--hijau);color:#cfdcd3;border-radius:16px;padding:1rem 1.4rem;margin:1.2rem 0 .4rem}
.hitung-daftar b{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:2.2rem;line-height:1;color:#fff}
@keyframes gilir{0%{opacity:0}15.00%{opacity:1}90.00%{opacity:1}105.00%{opacity:0}100%{opacity:0}}