/* Gaya bersama seluruh halaman dareindo.com. Gaya khusus Beranda tetap di index.html. */
:root{
  --hutan:#0D1A12;      /* night forest: text, header, dark bands */
  --lumut:#2E6B31;      /* old bamboo stem: primary */
  --bambu:#5FAE55;      /* bamboo leaf: accent for the ledger, dots and focus */
  --bambu-tua:#43A047;  /* link underlines on light ground */
  --bambu-muda:#9ACB8B; /* accents on dark ground */
  --daun:#9ACB8B;       /* young bamboo: primary buttons */
  --tanah:#56645A;      /* secondary text */
  --kabut:#F5F7F2;      /* mist: page ground */
  --putih:#FFFFFF;
  --garis:#DCE3D8;      /* hairline on mist */
  --garis-gelap:#22362A; /* hairline on dark */
  --display:"Young Serif", Georgia, "Times New Roman", serif;
  --body:"Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --max:1180px;
  --gutter:clamp(20px,5vw,56px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{font-family:var(--body);font-size:1.0625rem;line-height:1.65;color:var(--hutan);background:var(--kabut);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--bambu);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.12;text-wrap:balance;letter-spacing:-.01em}
h2{font-size:clamp(2rem,4.2vw,3.1rem)}
h3{font-size:1.45rem}
p{max-width:62ch}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.band{padding-block:clamp(72px,10vw,128px)}
.lead{font-size:1.18rem;color:#33463C}
.muted{color:var(--tanah)}
.credit{font-size:.78rem;color:var(--tanah);margin-top:.5rem}
.credit a{text-decoration:none;border-bottom:1px solid currentColor}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font:600 1rem/1 var(--body);padding:1rem 1.4rem;border-radius:999px;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.btn-utama{background:var(--daun);color:var(--hutan)}
.btn-utama:hover{background:#B3D9A6}
.btn-garis{border-color:var(--hutan);color:var(--hutan)}
.btn-garis:hover{background:var(--hutan);color:var(--kabut)}
.on-dark .btn-garis{border-color:var(--kabut);color:var(--kabut)}
.on-dark .btn-garis:hover{background:var(--kabut);color:var(--hutan)}
.tautan{font-weight:600;text-decoration:none;border-bottom:2px solid var(--bambu-tua);padding-bottom:2px}
.on-dark .tautan,.gelap .tautan{border-color:var(--bambu-muda)}
.tautan:hover{border-color:currentColor}
.aksi{display:flex;flex-wrap:wrap;gap:12px;margin-top:2rem}

/* Header */
header{position:sticky;top:0;z-index:20;background:rgba(13,26,18,.95);color:var(--putih);backdrop-filter:blur(8px);border-bottom:1px solid var(--garis-gelap)}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px;gap:20px}
.merek{display:flex;align-items:center;gap:10px;text-decoration:none}
.merek-logo{display:block;height:49px;width:auto;border-radius:8px}
.merek b{font:400 1.35rem/1 var(--display)}
.merek span{display:block;font-size:.72rem;color:var(--bambu-muda);margin-top:3px}
.menu{display:flex;gap:24px;list-style:none;align-items:center}
.menu a{text-decoration:none;font-weight:500;font-size:.95rem}
.menu a:hover{color:var(--bambu-muda)}
.menu .btn{padding:.7rem 1rem;font-size:.92rem}
.menu-btn{display:none;background:none;border:0;padding:8px;cursor:pointer;color:var(--putih)}
@media (max-width:860px){
  .menu-btn{display:block}
  .menu{display:none;position:absolute;left:0;right:0;top:68px;flex-direction:column;align-items:stretch;gap:0;background:var(--hutan);border-bottom:1px solid var(--garis-gelap);padding:8px var(--gutter) 20px}
  .menu.buka{display:flex}
  .menu a{display:block;padding:14px 0;border-bottom:1px solid var(--garis-gelap)}
  .menu .btn{margin-top:14px;border-bottom:0}
}

/* Foto & pita gelap */
.foto{background:#9DB09A;border-radius:4px;overflow:hidden}
.foto img{width:100%;height:100%;object-fit:cover}
.gelap{background:var(--hutan);color:var(--kabut)}
.gelap .lead{color:#C9D4CA}
.catatan{font-size:.85rem;color:var(--tanah)}
.on-dark .catatan{color:#C9D4CA}

/* 7 Transparansi: the ledger */
.buku{margin-top:3rem;background:#FBFAF5;color:var(--hutan);border-radius:4px;box-shadow:0 1px 0 #0000000d, 0 24px 48px -28px #13281F80;position:relative;overflow:hidden}
.buku-kepala{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:20px clamp(20px,3vw,36px);border-bottom:2px solid var(--hutan)}
.buku-kepala b{font:400 1.25rem var(--display)}
.buku-kepala span{font-size:.85rem;color:var(--tanah)}
.baris{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:baseline;padding:18px clamp(20px,3vw,36px);border-bottom:1px solid #DCE2D8;background-image:linear-gradient(90deg,transparent 0 calc(100% - 1px),transparent 0)}
.baris:last-of-type{border-bottom:0}
.baris dt{font-weight:500}
.baris dt small{display:block;font-weight:400;font-size:.82rem;color:var(--tanah)}
.baris dd{font:400 clamp(1.5rem,3vw,2.1rem)/1 var(--display);font-variant-numeric:tabular-nums;text-align:right;color:var(--hutan)}
.baris dd.kosong{color:#A9B3A6}
.buku-kaki{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:18px clamp(20px,3vw,36px);background:#F1EFE6;font-size:.88rem;color:var(--tanah)}
.stempel{display:inline-block;transform:rotate(-4deg);border:2px solid var(--bambu-tua);color:var(--lumut);border-radius:6px;padding:6px 12px;font-weight:700;font-size:.8rem;letter-spacing:.04em;opacity:.85;pointer-events:none}

/* Footer */
footer{background:var(--hutan);color:#C9D4CA;padding-block:56px 32px;font-size:.93rem}
.kaki{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;padding-bottom:32px;border-bottom:1px solid #2C4237}
.kaki .slogan{font:400 1.5rem/1.3 var(--display);color:var(--kabut);max-width:20ch}
.kaki h4{font-size:.85rem;font-weight:600;color:var(--kabut);margin-bottom:.8rem}
.kaki ul{list-style:none;display:grid;gap:.45rem}
.kaki a{text-decoration:none}
.kaki a:hover{color:var(--bambu-muda)}
.legal{padding-top:24px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:.82rem;color:#93A597}
@media (max-width:760px){.kaki{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- Komponen halaman dalam ---------- */
.status{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--bambu)}
.menu a[aria-current="page"]{color:var(--bambu-muda);box-shadow:inset 0 -2px 0 var(--bambu-muda)}
@media (max-width:860px){.menu a[aria-current="page"]{box-shadow:none}}

/* Kepala halaman */
.kepala{padding-block:clamp(48px,7vw,96px) clamp(48px,6vw,80px);border-bottom:1px solid var(--garis)}
.kepala .label{font-size:.9rem;font-weight:600;color:var(--lumut);margin-bottom:1.2rem}
.kepala h1{font-size:clamp(2.4rem,5.6vw,4.4rem);max-width:18ch}
.kepala .lead{margin-top:1.4rem;max-width:56ch}
.lompat{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:2rem;list-style:none;font-size:.95rem}
.lompat a{text-decoration:none;border-bottom:1px solid var(--garis)}
.lompat a:hover{border-color:var(--hutan)}

/* Bagian berjudul samping */
.bagian{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,72px);padding-block:clamp(48px,7vw,88px);border-bottom:1px solid var(--garis)}
.bagian:last-child{border-bottom:0}
.bagian > div > * + *{margin-top:1rem}
.bagian h2{font-size:clamp(1.7rem,3.2vw,2.4rem)}
.gelap .bagian{border-color:#2C4237}
@media (max-width:860px){.bagian{grid-template-columns:minmax(0,1fr)}}

/* Daftar bergaris */
.daftar{list-style:none;display:grid;gap:0;border-top:2px solid var(--hutan)}
.daftar li{padding:1rem 0;border-bottom:1px solid var(--garis)}
.daftar b{display:block;font-weight:600}
.daftar span{color:#33463C;font-size:.98rem}
.gelap .daftar{border-color:var(--kabut)}
.gelap .daftar li{border-color:#2C4237}
.gelap .daftar span{color:#C9D4CA}

/* Lini waktu bernomor */
.langkah{list-style:none;counter-reset:l;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;border-top:2px solid var(--hutan)}
.langkah li{counter-increment:l;padding:1.1rem 1rem 1rem 0;border-bottom:1px solid var(--garis)}
.langkah li::before{content:counter(l,decimal-leading-zero);display:block;font:400 1.6rem/1 var(--display);color:var(--bambu);margin-bottom:.5rem}
.langkah b{display:block;font-weight:600}
.langkah span{display:block;font-size:.92rem;color:#33463C;margin-top:.2rem}
.gelap .langkah{border-color:var(--kabut)}
.gelap .langkah li{border-color:#2C4237}
.gelap .langkah span{color:#C9D4CA}

/* Kotak keadaan kosong */
.kosong-info{border:1px dashed #A9B3A6;border-radius:4px;padding:1.2rem 1.4rem;color:var(--tanah);font-size:.95rem;background:#F6F7F3}
.kosong-info b{color:var(--hutan)}

/* Tabel */
.tabel-wadah{overflow-x:auto;border:1px solid #DCE2D8;border-radius:4px;background:#FBFAF5}
table{width:100%;min-width:640px;border-collapse:collapse;font-size:.92rem}
th,td{text-align:left;padding:.75rem 1rem;border-bottom:1px solid #DCE2D8;vertical-align:top}
th{font-weight:600;font-size:.8rem;color:var(--tanah);background:#F1EFE6;white-space:nowrap}
td.angka-sel,th.angka-sel{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
td a{text-decoration:none;border-bottom:1px solid currentColor}

/* Batang porsi */
.batang{height:10px;background:#DCE2D8;border-radius:5px;overflow:hidden;min-width:80px}
.batang i{display:block;height:100%;background:var(--lumut)}

/* Formulir */
.formulir{display:grid;gap:1.2rem;max-width:640px}
.formulir fieldset{border:0;display:grid;gap:1.2rem}
.formulir legend{font:400 1.35rem var(--display);margin-bottom:.4rem}
.kolom{display:grid;gap:.4rem}
.kolom-dua{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
@media (max-width:560px){.kolom-dua{grid-template-columns:1fr}}
.kolom label,.kolom .judul-kolom{font-weight:600;font-size:.95rem}
.kolom small{color:var(--tanah);font-size:.85rem}
input[type=text],input[type=email],input[type=tel],input[type=url],input[type=search],input[type=number],select,textarea{width:100%;font:inherit;font-size:1rem;color:var(--hutan);background:var(--putih);border:1px solid #A9B3A6;border-radius:6px;padding:.75rem .9rem}
textarea{min-height:120px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:3px solid var(--bambu);outline-offset:1px;border-color:var(--hutan)}
.pilihan{display:flex;flex-wrap:wrap;gap:8px}
.pilihan label{display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:.95rem;border:1px solid #A9B3A6;border-radius:999px;padding:.45rem .9rem;background:var(--putih);cursor:pointer}
.pilihan input{accent-color:var(--lumut)}
.pilihan label:has(input:checked){border-color:var(--lumut);background:#E3ECE1}
.cek{display:flex;gap:10px;align-items:flex-start;font-size:.95rem}
.cek input{margin-top:.35rem;accent-color:var(--lumut)}
.pesan-form{padding:1rem 1.2rem;border-radius:6px;background:#E3ECE1;border-left:4px solid var(--lumut);font-size:.95rem}
.pesan-form[hidden]{display:none}
.peringatan{padding:1.2rem 1.4rem;border-radius:4px;background:#E3ECE1;border-left:4px solid var(--bambu)}
.peringatan b{display:block}
.menu .btn[aria-current="page"]{color:var(--hutan);box-shadow:none}

/* Pilihan bahasa */
.menu .bahasa{display:flex;gap:2px;font-size:.8rem;font-weight:600;border:1px solid #2C4237;border-radius:6px;padding:2px}
.menu .bahasa a{padding:.35rem .5rem;border-radius:4px;font-size:.8rem;color:#9FB3A2}
.menu .bahasa a[aria-current="true"]{background:var(--kabut);color:var(--hutan)}
@media (max-width:860px){
  .menu .bahasa{order:-1;align-self:flex-start;margin:6px 0 10px;border:1px solid #2C4237}
  .menu .bahasa a{border-bottom:0;padding:.5rem .8rem}
}
.foto video{width:100%;height:100%;object-fit:cover;display:block}

/* Palet Pagi Bambu (dipilih Jake 2026-10-28): header putih, pita hijau muda, tombol hijau bambu.
   Ditulis sebagai lapisan di atas gaya dasar; html di depan pemilih menaikkan prioritasnya. */
:root{--pita:#EAF4E4;--pita-teks:#14301C;--pita-lead:#3C5A44;--pita-garis:#C9DEC0;--kepala:#FFFFFF;--kepala-teks:#14301C;--kepala-aksen:#2E7D32;--kaki:#DDEFD5;--kaki-teks:#2F4A36;--kaki-judul:#14301C;--tombol:#43A047;--tombol-teks:#FFFFFF;--tombol-hover:#388E3C;--kartu:#2E7D32;--kabut:#FFFFFF;--hutan:#14301C;--lumut:#2E7D32;--bambu-muda:#2E7D32}
html body{background:var(--kabut)}
html header{background:rgba(255,255,255,.96);color:var(--kepala-teks);border-bottom:1px solid var(--pita-garis)}
html .merek span,html .menu a:hover,html .menu a[aria-current="page"]{color:var(--kepala-aksen)}
html .menu a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--kepala-aksen)}
html .menu-btn{color:var(--kepala-teks)}
html .menu .bahasa{border-color:var(--pita-garis)}
html .menu .bahasa a{color:#5E7565}
html .menu .bahasa a[aria-current="true"]{background:var(--kepala-teks);color:#fff}
@media (max-width:860px){html .menu{background:#fff;border-color:var(--pita-garis)}html .menu a{border-color:var(--pita-garis)}}
html .btn-utama,html .menu .btn[aria-current="page"]{background:var(--tombol);color:var(--tombol-teks)}
html .btn-utama:hover{background:var(--tombol-hover)}
html .gelap{background:var(--pita);color:var(--pita-teks)}
html .gelap .lead,html .gelap .daftar span,html .gelap .langkah span,html .on-dark.gelap .catatan{color:var(--pita-lead)}
html .gelap .bagian,html .gelap .daftar li,html .gelap .langkah li{border-color:var(--pita-garis)}
html .gelap .daftar,html .gelap .langkah{border-color:var(--pita-teks)}
html .gelap.on-dark .btn-garis{border-color:var(--pita-teks);color:var(--pita-teks)}
html .gelap.on-dark .btn-garis:hover{background:var(--pita-teks);color:#fff}
html .gelap .tautan{border-color:var(--lumut)}
html .gelap .proyek-kepala .status{color:var(--lumut)}
html .kontur path{stroke:var(--lumut)}
html .kontur path:nth-child(even){stroke:var(--tombol)}
html .geser .kontur{opacity:.3}
html .benih,html .ajak{background:var(--kartu)}
/* 2026-11-01: hijau tua di kartu Benih dan ajakan diganti hijau muda, teks gelap */
:root{--kartu:#CFE8C3}
html .benih,html .ajak{color:var(--pita-teks)}
html .ajak .lead,html .darurat,html .benih .catatan{color:var(--pita-lead)}
html .darurat b{color:var(--pita-teks)}
html .benih .status{color:var(--lumut)}
html .benih .tautan,html .ajak .tautan{border-color:var(--lumut)}
html .ajak.on-dark .btn-garis,html .benih.on-dark .btn-garis{border-color:var(--pita-teks);color:var(--pita-teks)}
html .ajak.on-dark .btn-garis:hover,html .benih.on-dark .btn-garis:hover{background:var(--pita-teks);color:#fff}
html footer{background:var(--kaki);color:var(--kaki-teks)}
html .kaki .slogan,html .kaki h4{color:var(--kaki-judul)}
html .kaki{border-color:rgba(0,0,0,.12)}
html .legal{color:var(--kaki-teks);opacity:.8}
html .kaki a:hover{color:var(--kaki-judul)}
html .cerita .cerita-buku{filter:drop-shadow(0 10px 20px rgba(0,40,20,.15))}

/* Teks di atas foto (judul proyek Akar Bambu) */
.foto.tumpang,.akar .foto{position:relative}
.tumpang-isi{position:absolute;left:0;right:0;bottom:0;padding:clamp(48px,8vw,96px) clamp(20px,4vw,44px) clamp(20px,3.5vw,40px);background:linear-gradient(0deg,rgba(8,22,13,.82),rgba(8,22,13,.45) 55%,rgba(8,22,13,0));color:#fff}
.tumpang-isi h1,.tumpang-isi h3{color:#fff}
.tumpang-isi .lead{color:#E4ECE2}
.tumpang-isi .sub{display:block;margin-top:.35rem;font-size:.95rem;font-weight:600;color:#D4E8CC;letter-spacing:.02em}