/* Beranda Turistah, tata letak baru (12 Oktober 2026). Dimuat setelah style.css dan memakai variabel warnanya.
   Kelas berawalan t- hanya dipakai di sini; bagian makna, tentang, dan statistik tetap memakai style.css. */
:root {
  --embun: #eef5ea;
  --lumut: #2f7d4f;
  --tulis: "Caveat", "Segoe Script", cursive;
  --bayang: 0 10px 28px rgb(15 47 32 / .08);
}

.lebar { max-width: 80rem; }
.t-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Kepala ---------- */
.atas-isi { min-height: 4.4rem; }
.t-merek { gap: .7rem; }
.t-merek img { width: 2.5rem; height: 2.5rem; }
.t-merek span { display: grid; line-height: 1.1; }
.t-merek b { font: 800 1.75rem/1 var(--judul); color: var(--rimba); letter-spacing: -.01em; }
.t-merek small { font: 500 .72rem/1.3 var(--badan); color: var(--redup); }
.atas nav a { position: relative; padding: .35rem 0; }
.atas nav a.aktif { color: var(--rimba); }
.atas nav a.aktif::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.15rem; height: 2px; border-radius: 2px; background: var(--rimba); }
@media (max-width: 900px) { .atas nav a:not(.aktif) { display: none; } .t-merek small { display: none; } .t-merek b { font-size: 1.4rem; } }

/* ---------- Hero ---------- */
.t-hero { position: relative; overflow: hidden; padding: clamp(2rem, 5vw, 3.6rem) 0 clamp(2.4rem, 5vw, 3.6rem);
  background:
    radial-gradient(60rem 26rem at 78% 30%, rgb(244 227 166 / .55), transparent 62%),
    radial-gradient(40rem 22rem at 8% 80%, rgb(183 224 122 / .28), transparent 65%),
    linear-gradient(180deg, #f3f8ef 0%, var(--embun) 60%, var(--krem) 100%); }
.t-daun { position: absolute; width: clamp(9rem, 20vw, 17rem); height: clamp(9rem, 20vw, 17rem); color: var(--lumut); opacity: .9; pointer-events: none; }
.t-daun-kiri { left: -6rem; bottom: -5.5rem; transform: rotate(8deg); opacity: .8; }
.t-daun-kanan { right: -2.6rem; top: -3rem; transform: rotate(196deg); color: var(--rimba-2); opacity: .75; }
.t-hero-isi { position: relative; z-index: 1; display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 900px) { .t-hero-isi { grid-template-columns: 1.05fr .95fr; } .t-hero-teks { padding-left: clamp(0rem, 6vw, 7rem); } }
.t-salam { font: 600 1.15rem var(--badan); color: var(--rimba-2); }
.t-hero h1 { font-size: clamp(3.6rem, 11vw, 6.2rem); font-weight: 800; letter-spacing: -.03em; line-height: .95; color: var(--rimba); margin: .1rem 0 .2rem; }
.t-tulis { font: 700 clamp(1.5rem, 3.6vw, 2.15rem)/1.15 var(--tulis); color: var(--rimba-2); }
.t-pengantar { margin-top: .9rem; max-width: 46ch; color: var(--redup); font-size: 1.02rem; text-wrap: pretty; }
.t-hero .tombol-baris { margin-top: 1.4rem; }

.t-cari { position: relative; display: flex; align-items: center; gap: .6rem; margin-top: 1.4rem; max-width: 30rem; padding: .35rem .4rem .35rem 1.1rem; border-radius: 99px; background: #fff; border: 1px solid var(--garis); box-shadow: var(--bayang); }
.t-cari:focus-within { border-color: var(--lumut); box-shadow: 0 0 0 4px rgb(47 125 79 / .15), var(--bayang); }
.t-cari > svg { width: 1.25rem; height: 1.25rem; color: var(--rimba-2); flex: none; }
.t-cari input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 500 1rem var(--badan); color: var(--tinta); padding: .55rem 0; }
.t-cari input::placeholder { color: #8a857c; }
.t-cari input::-webkit-search-cancel-button { display: none; }
.t-cari button { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; background: var(--rimba); color: #fff; cursor: pointer; transition: transform .15s; }
.t-cari button:hover { transform: translateX(2px); }
.t-cari button svg { width: 1.2rem; height: 1.2rem; }
.t-cari-hasil { position: absolute; z-index: 15; left: 0; right: 0; top: calc(100% + .45rem); margin: 0; padding: .4rem; list-style: none; background: #fff; border: 1px solid var(--garis); border-radius: 1.1rem; box-shadow: 0 18px 40px rgb(15 47 32 / .18); max-height: 19rem; overflow: auto; }
.t-cari-hasil a { display: grid; gap: .05rem; padding: .55rem .8rem; border-radius: .8rem; text-decoration: none; color: var(--tinta); }
.t-cari-hasil a:hover, .t-cari-hasil a.pilih { background: var(--embun); }
.t-cari-hasil b { font-weight: 700; color: var(--rimba); }
.t-cari-hasil small { color: var(--redup); font-size: .8rem; }
.t-cari-hasil .kosong { padding: .7rem .8rem; color: var(--redup); font-size: .92rem; }

.t-hero-gbr { position: relative; justify-self: center; width: min(100%, 34rem); }
.t-hero-gbr svg { display: block; width: 100%; height: auto; overflow: visible; }
.t-catatan { position: absolute; z-index: 1; left: -1rem; top: 4%; max-width: 9.5rem; font: 700 1.45rem/1.05 var(--tulis); color: var(--rimba-2); transform: rotate(-9deg); text-align: center; }
.t-catatan::after { content: ""; display: block; width: 3.2rem; height: .32rem; margin: .35rem auto 0; border-radius: 9px; background: var(--kunyit); transform: rotate(4deg); }
/* Di layar sempit catatan tangan ikut alur halaman, di antara tombol dan ilustrasi, supaya tidak menimpa tombol. */
@media (max-width: 899px) { .t-catatan { position: static; max-width: 15rem; margin: .5rem auto .1rem; font-size: 1.4rem; transform: rotate(-3deg); text-wrap: balance; } }

/* ---------- Deretan kartu ruang ---------- */
.t-ruang { padding: 1.1rem 0 .6rem; margin-top: -.4rem; position: relative; }
.t-ruang-kisi { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 640px) { .t-ruang-kisi { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .t-ruang-kisi { grid-template-columns: repeat(8, 1fr); } }
.t-semai { grid-column: span 2; display: flex; align-items: center; gap: .8rem; padding: 1rem 1.1rem; border-radius: 1.1rem; border: 2px dashed color-mix(in srgb, var(--rimba-2) 35%, var(--garis)); color: var(--redup); }
.t-semai svg { width: 2.8rem; height: 2.8rem; flex: none; }
.t-semai h3 { font: 800 1.05rem/1.2 var(--judul); color: var(--rimba-2); margin-bottom: .2rem; }
.t-semai p { font-size: .8rem; line-height: 1.4; }
.t-kartu { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem; padding: 1.1rem .7rem 1rem; border-radius: 1.1rem; background: #fff; border: 1px solid var(--garis); box-shadow: var(--bayang); text-decoration: none; color: var(--tinta); transition: transform .18s, box-shadow .18s, border-color .18s; }
a.t-kartu:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--lumut) 45%, var(--garis)); box-shadow: 0 16px 32px rgb(15 47 32 / .14); }
.t-kartu b { font: 700 .95rem/1.25 var(--badan); color: var(--rimba-900); }
.t-kartu small { font-size: .76rem; line-height: 1.35; color: var(--redup); }
.t-ikon { display: grid; place-items: center; width: 3.1rem; height: 3.1rem; margin-bottom: .35rem; border-radius: .95rem; background: var(--w); color: #fff; box-shadow: inset 0 -3px 0 rgb(0 0 0 / .12); flex: none; }
.t-ikon svg { width: 1.6rem; height: 1.6rem; }
.t-ikon-besar { width: 3.8rem; height: 3.8rem; border-radius: 50%; margin: 0; }
.t-ikon-besar svg { width: 2rem; height: 2rem; }
.t-nanti { background: color-mix(in srgb, #fff 70%, var(--krem)); box-shadow: none; }
.t-nanti .t-ikon { opacity: .72; }
.t-tag { margin-top: .35rem; font: 700 .64rem/1 var(--badan); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--tanah); background: color-mix(in srgb, var(--kunyit) 26%, #fff); padding: .28rem .55rem; border-radius: 99px; }

/* ---------- Ruang Kreasi dan panel hayati ---------- */
.t-dua { padding: 1.4rem 0 1rem; }
.t-dua-kisi { display: grid; gap: 1.2rem; }
@media (min-width: 1000px) { .t-dua-kisi { grid-template-columns: minmax(0, 2.6fr) minmax(17rem, 1fr); align-items: stretch; } }
.t-kreasi { padding: 1.5rem; border-radius: 1.5rem; background: #fff; border: 1px solid var(--garis); box-shadow: var(--bayang); scroll-margin-top: 5.5rem; }
.t-kreasi-kepala { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.2rem; }
.t-kreasi h2 { font-size: clamp(1.6rem, 3.4vw, 2rem); font-weight: 800; color: var(--rimba); }
.t-kreasi-sub { font-weight: 600; color: var(--tinta); margin: .15rem 0 .25rem; }
.t-kreasi-kepala p:last-child { color: var(--redup); font-size: .9rem; max-width: 60ch; }
.t-kreasi-kisi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 720px) { .t-kreasi-kisi { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.t-kreasi-kisi li { display: flex; flex-direction: column; align-items: flex-start; border-radius: 1.1rem; border: 1px solid var(--garis); overflow: hidden; background: var(--krem); padding-bottom: .9rem; }
.t-kreasi-gbr { align-self: stretch; background: var(--l); padding: .9rem; margin-bottom: .8rem; }
.t-kreasi-gbr svg { display: block; width: 100%; height: 6.5rem; }
.t-kreasi-kisi h3 { font: 700 .98rem/1.25 var(--badan); color: var(--rimba-900); padding: 0 .9rem; }
.t-kreasi-kisi p { font-size: .8rem; color: var(--redup); padding: .15rem .9rem 0; }
.t-kreasi-kisi .t-tag { margin: .6rem .9rem 0; }

.t-hayati { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .8rem; padding: 1.4rem; border-radius: 1.5rem; background: linear-gradient(160deg, #dcead8, #cfe3cb); border: 1px solid #c2d9bd; }
.t-hayati-daun { position: absolute; right: -3rem; bottom: 9rem; width: 7rem; height: 7rem; color: var(--lumut); opacity: .22; transform: rotate(250deg); pointer-events: none; }
.t-hayati header { display: flex; gap: .8rem; align-items: center; position: relative; }
.t-hayati header .t-ikon { width: 3rem; height: 3rem; }
.t-hayati h2 { min-width: 0; font: 800 1.02rem/1.25 var(--judul); color: var(--rimba); overflow-wrap: break-word; }
.t-hayati p { font-size: .88rem; color: #33483b; position: relative; }
.t-hayati .btn { align-self: flex-start; padding: .5rem 1.1rem; font-size: .9rem; }
.t-hayati .btn::after { content: "→"; }
.t-hayati figure { margin: auto 0 0; border-radius: 1rem; overflow: hidden; background: #fff; }
.t-hayati img { display: block; width: 100%; height: 10.5rem; object-fit: cover; }
.t-hayati figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem .8rem; padding: .55rem .8rem; font-size: .76rem; color: var(--redup); }
.t-hayati figcaption b { color: var(--rimba-2); }

/* ---------- Topik populer ---------- */
.t-topik { padding: .6rem 0 1.6rem; scroll-margin-top: 5.5rem; }
.t-topik-isi { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; }
.t-topik-kepala { display: flex; align-items: center; gap: .7rem; }
.t-topik-kepala svg { width: 2.6rem; height: 2.6rem; color: var(--lumut); }
.t-topik h2 { font: 800 1.3rem var(--judul); color: var(--rimba); }
.t-topik-kepala p { font-size: .8rem; color: var(--redup); }
.t-keping { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; flex: 1; }
.t-keping a { display: inline-block; padding: .42rem 1rem; border-radius: 99px; background: #fff; border: 1px solid var(--garis); font: 600 .84rem var(--badan); color: var(--rimba-2); text-decoration: none; transition: background .15s, color .15s, border-color .15s; }
.t-keping a:hover { background: var(--rimba); border-color: var(--rimba); color: #fff; }

/* ---------- Empat nilai ---------- */
.t-nilai { position: relative; overflow: hidden; padding: 2.2rem 0 4.6rem; background: linear-gradient(180deg, var(--krem), #eef5ea); }
.t-bukit { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 9rem; }
.t-nilai-isi { position: relative; display: grid; gap: 1.6rem; align-items: center; }
@media (min-width: 900px) { .t-nilai-isi { grid-template-columns: 1fr 2.4fr; } }
.t-kutipan { margin: 0; font: 700 1.5rem/1.2 var(--tulis); color: var(--rimba-2); transform: rotate(-3deg); max-width: 17rem; }
.t-kutipan::before { content: "“"; } .t-kutipan::after { content: "”"; }
.t-nilai-kisi { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 1rem; list-style: none; margin: 0; padding: 0; }
.t-nilai-kisi li { text-align: center; padding: 0 .6rem; }
.t-nilai-kisi li + li { border-left: 1px solid color-mix(in srgb, var(--rimba-2) 18%, transparent); }
.t-nilai-kisi span { display: inline-grid; place-items: center; width: 3.3rem; height: 3.3rem; border-radius: 50%; border: 2px solid var(--rimba-2); color: var(--rimba-2); background: rgb(255 255 255 / .7); }
.t-nilai-kisi svg { width: 1.6rem; height: 1.6rem; }
.t-nilai-kisi h3 { font: 800 1.15rem var(--judul); color: var(--rimba); margin: .45rem 0 .15rem; }
.t-nilai-kisi p { font-size: .82rem; color: var(--redup); }
@media (max-width: 520px) { .t-nilai-kisi li + li { border-left: 0; } }

/* ---------- Kaki ---------- */
.t-kaki { background: var(--rimba-900); color: rgb(250 246 236 / .82); padding: 1.6rem 0 1.3rem; font-size: .85rem; }
.t-kaki-isi { display: grid; gap: .9rem 2rem; align-items: center; }
@media (min-width: 900px) { .t-kaki-isi { grid-template-columns: auto 1fr auto; } .t-kredit { grid-column: 1 / -1; } }
.t-kaki-merek { display: inline-flex; align-items: center; gap: .7rem; color: #fff; text-decoration: none; }
.t-kaki-merek span { display: grid; line-height: 1.15; }
.t-kaki-merek b { font: 800 1.35rem var(--judul); }
.t-kaki-merek small { font-size: .72rem; opacity: .75; }
.t-kaki nav { display: flex; flex-wrap: wrap; gap: .3rem 0; }
.t-kaki nav a { color: inherit; text-decoration: none; font-weight: 600; padding: 0 .9rem; border-left: 1px solid rgb(255 255 255 / .22); }
.t-kaki nav a:first-child { border-left: 0; padding-left: 0; }
.t-kaki nav a:hover { color: var(--pucuk); }
.t-kredit { font-size: .74rem; opacity: .7; }
.t-kredit a { color: inherit; }

@media (prefers-reduced-motion: reduce) { .goyang { animation: none; } .t-kartu, .t-cari button { transition: none; } }

/* ---------- Tiga pilar di atas bukit (kalimat asli beranda) ---------- */
.t-pilar { position: relative; }
.t-pilar .pilar-kisi li { background: rgb(255 255 255 / .86); box-shadow: 0 8px 22px rgb(15 47 32 / .07); }
.t-pilar .bersama { margin-bottom: 1.2rem; }

/* ---------- Lihat Koleksi ---------- */
.t-koleksi { position: relative; }
.t-koleksi summary { display: inline-flex; cursor: pointer; list-style: none; padding: .5rem 1.1rem; font-size: .9rem; }
.t-koleksi summary::-webkit-details-marker { display: none; }
.t-koleksi summary::after { content: "↓"; margin-left: .35rem; }
.t-koleksi[open] summary::after { content: "↑"; }
.t-koleksi ul { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .45rem; }
.t-koleksi li > * { display: flex; flex-direction: column; gap: .1rem; padding: .6rem .8rem; border-radius: .8rem; background: rgb(255 255 255 / .8); border: 1px solid #c3dabd; text-decoration: none; }
.t-koleksi b { font: 700 .92rem/1.25 var(--badan); color: var(--rimba-900); }
.t-koleksi small { font-size: .76rem; color: var(--redup); }
.t-koleksi a:hover { border-color: var(--lumut); background: #fff; }
.t-koleksi a b::after { content: " →"; }
.t-koleksi span { opacity: .78; border-style: dashed; }

/* ---------- Kartu ruang ukuran besar (13 Okt 2026) ---------- */
.t-ruang { padding: 3rem 0 1.4rem; margin-top: 0; }
.t-ruang-kisi { grid-template-columns: 1fr; gap: 1.1rem; }
@media (min-width: 560px) { .t-ruang-kisi { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .t-ruang-kisi { grid-template-columns: repeat(4, 1fr); } }
.t-ruang .t-kartu { align-items: flex-start; text-align: left; gap: .45rem; padding: 1.6rem 1.5rem 1.4rem; border-radius: 1.5rem; }
.t-ruang .t-ikon { width: 4rem; height: 4rem; border-radius: 1.2rem; margin-bottom: .7rem; }
.t-ruang .t-ikon svg { width: 2.1rem; height: 2.1rem; }
.t-ruang .t-kartu b { font: 800 1.45rem/1.15 var(--judul); color: var(--rimba); }
.t-ruang .t-kartu small { font-size: .98rem; line-height: 1.6; color: var(--redup); }
.t-ruang .t-tag { margin-top: auto; font-size: .7rem; padding: .36rem .7rem; }
.t-ruang .t-kartu small + .t-tag, .t-ruang .t-kartu small + .t-masuk { margin-top: auto; }
.t-ruang .t-kartu small { margin-bottom: .9rem; }
.t-masuk { font: 700 .98rem/1.3 var(--badan); color: var(--rimba-2); }
.t-masuk::after { content: " →"; }
a.t-kartu:hover .t-masuk { text-decoration: underline; }
.t-ruang .t-semai { grid-column: 1 / -1; padding: 1.5rem 1.6rem; border-radius: 1.5rem; gap: 1.2rem; }
.t-ruang .t-semai svg { width: 3.6rem; height: 3.6rem; }
.t-ruang .t-semai h3 { font-size: 1.45rem; }
.t-ruang .t-semai p { font-size: 1rem; line-height: 1.6; }

/* ---------- Panel koleksi hayati selebar halaman ---------- */
@media (min-width: 820px) {
  .t-dua .t-hayati { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: 2rem; align-content: start; padding: 2rem; }
  .t-dua .t-hayati > header, .t-dua .t-hayati > p, .t-dua .t-hayati > details { grid-column: 1; }
  .t-dua .t-hayati > figure { grid-column: 2; grid-row: 1 / span 4; margin: 0; align-self: stretch; display: flex; flex-direction: column; }
  .t-dua .t-hayati img { height: 17rem; flex: none; }
  .t-dua .t-hayati h2 { font-size: 1.6rem; }
  .t-dua .t-hayati p { font-size: 1rem; line-height: 1.6; }
}

/* ---------- Halaman Ruang Kreasi ---------- */
.t-hal-kreasi { padding: 2rem 0 3.5rem; }
.t-balik { margin-bottom: 1.2rem; }
.t-balik a { font-weight: 700; color: var(--rimba-2); text-decoration: none; }
.t-balik a:hover { text-decoration: underline; }
.t-hal-kreasi .t-kreasi h1 { font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 800; color: var(--rimba); }
.t-hal-kreasi .t-kreasi-kisi h3 { font-size: 1.1rem; }
.t-hal-kreasi .t-kreasi-kisi p { font-size: .92rem; }
.t-hal-kreasi .t-kreasi-gbr svg { height: 8rem; }

/* ---------- Aksen persik (13 Okt 2026) ---------- */
:root { --persik: #f4b8a2; --persik-muda: #fdeae2; --persik-tua: #c9674c; }
.t-hero::before { content: ""; position: absolute; inset: auto -8rem -10rem auto; width: 30rem; height: 30rem; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--persik) 55%, transparent), transparent); pointer-events: none; }
.atas { border-bottom: 0; box-shadow: 0 1px 0 var(--garis); }
.atas::after { content: ""; display: block; height: 3px; background: linear-gradient(90deg, var(--persik), var(--pucuk) 55%, var(--persik)); opacity: .75; }
.atas nav a.aktif::after { background: var(--persik-tua); }
.kepala-bagian .mata { color: var(--persik-tua); }
.t-tag { color: var(--persik-tua); background: var(--persik-muda); }
.t-ruang .t-semai { background: color-mix(in srgb, var(--persik-muda) 55%, transparent); border-color: color-mix(in srgb, var(--persik) 80%, var(--garis)); }
.t-nanti { background: color-mix(in srgb, #fff 62%, var(--persik-muda)); }
.t-kaki { border-top: 4px solid var(--persik); }

/* ---------- Kutipan ---------- */
.t-petik { padding: 2.6rem 0 2.2rem; }
.t-petik blockquote { margin: 0 auto; max-width: 34rem; padding: 1.5rem 1.8rem; text-align: center; font: 700 clamp(1.5rem, 3.6vw, 2rem)/1.3 var(--tulis, "Caveat", cursive); color: var(--rimba-2); background: var(--persik-muda); border-radius: 1.6rem; transform: rotate(-1.2deg); box-shadow: 0 10px 24px rgb(201 103 76 / .12); }
.t-petik blockquote::before { content: "“"; } .t-petik blockquote::after { content: "”"; }
@media (prefers-reduced-motion: reduce) { .t-petik blockquote { transform: none; } }

/* ---------- Statistik pengunjung memanjang ke samping ---------- */

/* ---------- Bagian Tentang berwarna dusty pink (13 Okt 2026) ---------- */
#tentang { background: linear-gradient(135deg, #f3d9d4, #ecc9c4 60%, #f1d5cc); border-block: 1px solid #e3bdb7; }
#tentang .mata { color: #9a4634; }
#tentang p { color: #4a3f3c; }

/* ---------- Header yang bergerak pelan (13 Okt 2026) ---------- */
.t-daun-kiri { animation: t-ayun 9s ease-in-out infinite alternate; transform-origin: 0% 100%; }
.t-daun-kanan { animation: t-ayun 11s ease-in-out -4s infinite alternate-reverse; transform-origin: 100% 0%; }
@keyframes t-ayun { from { rotate: -3deg; translate: 0 0; } to { rotate: 4deg; translate: 0 -6px; } }
.t-hero-gbr { animation: t-apung 8s ease-in-out infinite alternate; }
@keyframes t-apung { from { translate: 0 0; } to { translate: 0 -8px; } }
.t-catatan { animation: t-apung 6s ease-in-out -2s infinite alternate; }
@media (prefers-reduced-motion: reduce) { .t-daun-kiri, .t-daun-kanan, .t-hero-gbr, .t-catatan { animation: none; } }

/* ---------- Halaman Ruang Simulasi ---------- */
.t-hal-sim .kepala-bagian h1 { font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 800; color: var(--rimba); margin: .5rem 0 .7rem; }
.t-sim-kisi { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; list-style: none; margin: 0; padding: 0; }
.t-sim { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; text-align: left; padding: 1.3rem 1.3rem 1.1rem; border-radius: 1.4rem; border: 1px solid var(--garis); background: linear-gradient(160deg, var(--l), #fff 70%); cursor: pointer; font: inherit; color: inherit; transition: transform .2s, box-shadow .2s; }
.t-sim:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgb(15 47 32 / .14); }
.t-sim-bidang { font: 700 .68rem/1 var(--badan); letter-spacing: .08em; text-transform: uppercase; color: var(--persik-tua); background: #fff; padding: .3rem .6rem; border-radius: 99px; }
.t-sim b { font: 800 1.3rem/1.2 var(--judul); color: var(--rimba); margin-top: .3rem; }
.t-sim small { font-size: .92rem; line-height: 1.55; color: var(--redup); margin-bottom: .7rem; }
.t-sim .t-masuk { margin-top: auto; font-style: normal; }
.t-sim-layar { margin-bottom: 1.4rem; border-radius: 1.4rem; overflow: hidden; border: 1px solid var(--garis); background: #000; box-shadow: var(--bayang); scroll-margin-top: 5.5rem; }
.t-sim-layar[hidden] { display: none; }
.t-sim-kepala { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .6rem 1rem; background: var(--rimba-900); color: #fff; }
.t-sim-kepala b { font: 800 1.05rem var(--judul); }
.t-sim-kepala span { display: flex; align-items: center; gap: .9rem; font-size: .85rem; }
.t-sim-kepala a { color: var(--pucuk); }
.t-sim-kepala button { border: 0; border-radius: 99px; padding: .35rem .9rem; background: var(--persik); color: var(--rimba-900); font: 700 .85rem var(--badan); cursor: pointer; }
.t-sim-layar iframe { display: block; width: 100%; aspect-ratio: 4 / 3; max-height: 82vh; border: 0; background: #000; }
.t-sim-sumber { margin-top: 1rem; font-size: .85rem; color: var(--redup); }
.t-sim-sumber a { color: var(--rimba-2); font-weight: 700; }
.t-sim-sub { margin-top: 2.6rem; font: 800 1.6rem var(--judul); color: var(--rimba); }
.t-sim-subket { color: var(--redup); margin: .2rem 0 1rem; font-size: .95rem; }
.t-sim-lain { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .8rem; list-style: none; margin: 0; padding: 0; }
.t-sim-lain a { height: 100%; display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1.1rem; border-radius: 1.1rem; background: #fff; border: 1px solid var(--garis); text-decoration: none; }
.t-sim-lain a:hover { border-color: var(--persik); }
.t-sim-lain b { font: 700 1rem var(--badan); color: var(--rimba-900); }
.t-sim-lain small { font-size: .85rem; line-height: 1.5; color: var(--redup); }

/* Daun pada ilustrasi hero: kelompok yang bergoyang dipercepat sedikit dan matahari berdenyut pelan. */
.t-hero-gbr .goyang { animation-duration: 4.5s; }

/* ---------- Golongan lab virtual, Virtual Eksplorasi, Kenalan Sama Mikroba (13 Okt 2026) ---------- */
.t-sim-golongan { margin: 1.6rem 0 .7rem; font: 700 .82rem/1 var(--badan); letter-spacing: .1em; text-transform: uppercase; color: var(--persik-tua); }
.ve-kisi, .mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1.1rem; list-style: none; margin: 0; padding: 0; }
.ve-kartu { display: flex; flex-direction: column; gap: .25rem; }
.ve-kartu b { font: 800 1.1rem/1.25 var(--judul); color: var(--rimba); margin-top: .5rem; }
.ve-kartu small { font-size: .82rem; color: var(--redup); }
.ve-putar { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 1.1rem; overflow: hidden; cursor: pointer; background: #000; box-shadow: var(--bayang); }
.ve-putar img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s, opacity .3s; opacity: .92; }
.ve-putar:hover img { transform: scale(1.05); opacity: 1; }
.ve-putar span { position: absolute; inset: 0; margin: auto; width: 3.6rem; height: 3.6rem; display: grid; place-items: center; border-radius: 50%; background: rgb(255 255 255 / .92); color: var(--rimba); font-size: 1.3rem; padding-left: .2rem; box-shadow: 0 6px 18px rgb(0 0 0 / .3); }
.ve-pop { border: 0; padding: 0; background: transparent; max-width: min(96vw, 72rem); max-height: 96vh; overflow: visible; }
.ve-pop::backdrop { background: rgb(15 23 20 / .86); backdrop-filter: blur(3px); }
.ve-pop[open] { display: flex; flex-direction: column; align-items: center; animation: ve-letup .25s ease; }
@keyframes ve-letup { from { opacity: 0; transform: scale(.4); } }
@media (prefers-reduced-motion: reduce) { .ve-pop[open] { animation: none; } }
.ve-pop-isi iframe { display: block; width: min(92vw, 64rem); aspect-ratio: 16 / 9; max-height: 78vh; border: 0; border-radius: .6rem; background: #000; }
.ve-pop-ket { color: #f5f1e4; font-size: .82rem; line-height: 1.45; max-width: 60rem; margin: .6rem 0 0; text-align: center; }
.ve-pop-ket a { color: var(--pucuk); }
.ve-pop-tutup { position: fixed; top: .8rem; right: .8rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 0; background: #fff; color: var(--tinta); font-size: 1.1rem; cursor: pointer; box-shadow: 0 4px 14px rgb(0 0 0 / .4); }
.ve-pop-pesan { background: #fff; color: var(--tinta); border-radius: 1rem; padding: 1.5rem; max-width: 32rem; display: grid; gap: .9rem; justify-items: start; }
.mk-bilah { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .6rem; }
.mk-grup { display: flex; flex-wrap: wrap; gap: .45rem; }
.mk-grup button { padding: .45rem 1rem; border-radius: 99px; border: 1px solid var(--garis); background: #fff; font: 600 .9rem var(--badan); color: var(--rimba-900); cursor: pointer; }
.mk-grup button[aria-pressed="true"] { background: var(--rimba); color: #fff; border-color: var(--rimba); }
.mk-jumlah { font-size: .85rem; color: var(--redup); margin-bottom: .9rem; }
.mk-kartu { min-height: 21rem; display: flex; }
.mk-depan { position: relative; flex: 1; padding: 0; border: 0; border-radius: 1.4rem; overflow: hidden; cursor: pointer; background: var(--rimba-900); box-shadow: var(--bayang); font: inherit; text-align: left; transition: transform .2s; }
.mk-depan:hover { transform: translateY(-4px); }
.mk-depan[hidden], .mk-belakang[hidden] { display: none; }
.mk-depan img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mk-nama { position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column; gap: .2rem; padding: 2.4rem 1.1rem 1rem; background: linear-gradient(transparent, rgb(8 26 18 / .88)); color: #fff; }
.mk-nama b { font: 800 1.2rem/1.2 var(--judul); font-style: italic; }
.mk-nama small { font-size: .76rem; opacity: .8; }
.mk-tag { align-self: flex-start; font: 700 .64rem/1 var(--badan); font-style: normal; letter-spacing: .07em; text-transform: uppercase; padding: .28rem .55rem; border-radius: 99px; background: var(--persik-muda); color: var(--persik-tua); }
.mk-belakang { flex: 1; display: flex; flex-direction: column; gap: .3rem; padding: 1.2rem 1.2rem 1rem; border-radius: 1.4rem; background: #fff; border: 1px solid var(--garis); box-shadow: var(--bayang); }
.mk-belakang h3 { font: 800 1.2rem/1.2 var(--judul); font-style: italic; color: var(--rimba); margin-top: .3rem; }
.mk-belakang h4 { font: 700 .72rem/1 var(--badan); letter-spacing: .08em; text-transform: uppercase; color: var(--persik-tua); margin-top: .5rem; }
.mk-belakang p { font-size: .9rem; line-height: 1.5; color: #3d3a36; }
.mk-belakang .mk-kredit { margin-top: auto; padding-top: .6rem; font-size: .72rem; color: var(--redup); overflow-wrap: anywhere; }
.mk-kredit a { color: var(--rimba-2); }
.mk-balik { align-self: flex-start; margin-top: .4rem; border: 0; background: none; padding: 0; font: 700 .9rem var(--badan); color: var(--rimba-2); cursor: pointer; }
.mk-kuis { width: min(92vw, 32rem); border: 0; border-radius: 1.6rem; padding: 0; background: var(--krem); color: var(--tinta); box-shadow: 0 30px 80px rgb(0 0 0 / .35); }
.mk-kuis::backdrop { background: rgb(15 47 32 / .7); backdrop-filter: blur(3px); }
.mk-kuis-kepala { display: flex; justify-content: space-between; align-items: center; padding: .9rem 1.2rem; background: #fff; border-bottom: 1px solid var(--garis); }
.mk-kuis-kepala b { font: 800 1.15rem var(--judul); color: var(--rimba); }
.mk-kuis-kepala button { border: 0; background: var(--persik-muda); color: var(--persik-tua); font: 700 .85rem var(--badan); padding: .35rem .9rem; border-radius: 99px; cursor: pointer; }
#mk-main, #mk-akhir { padding: 1.1rem 1.2rem 1.3rem; }
#mk-main[hidden], #mk-akhir[hidden] { display: none; }
.mk-no { font-size: .82rem; color: var(--redup); }
#mk-foto { width: 100%; height: 13rem; object-fit: cover; border-radius: 1rem; margin: .5rem 0; background: var(--rimba-900); }
.mk-tanya { font-weight: 700; margin-bottom: .5rem; }
.mk-pilihan { display: grid; gap: .5rem; }
.mk-pilihan button { text-align: left; padding: .7rem 1rem; border-radius: .9rem; border: 1px solid var(--garis); background: #fff; font: 600 .95rem var(--badan); font-style: italic; cursor: pointer; }
.mk-pilihan button.benar { background: #dcefd0; border-color: #8fbf6a; }
.mk-pilihan button.salah { background: #f8dcd4; border-color: var(--persik-tua); }
.mk-umpan { min-height: 1.4rem; margin: .7rem 0 .5rem; font-weight: 700; color: var(--rimba-2); }
.mk-skor { font: 800 1.8rem var(--judul); color: var(--rimba); }
#mk-akhir p { margin-bottom: .8rem; }
.t-hal-sim .t-sim-sub + .ve-kisi { margin-top: .9rem; }

/* ---------- Rincian mikroba dan catatan penjelajahan ---------- */
.mk-sebagai { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: .1rem 0 0; padding: 0; }
.mk-sebagai li { font: 600 .76rem/1.2 var(--badan); padding: .3rem .65rem; border-radius: 99px; background: #e4f0e2; color: var(--rimba); }
.mk-rinci-tombol { align-self: flex-start; margin-top: .7rem; padding: .5rem 1rem; border: 0; border-radius: 99px; background: var(--rimba); color: #fff; font: 700 .85rem var(--badan); cursor: pointer; }
.mk-rinci { width: min(94vw, 40rem); }
.mk-rinci-isi { max-height: min(76vh, 44rem); overflow-y: auto; padding: 1rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .3rem; }
.mk-rinci-isi h4 { font: 700 .72rem/1 var(--badan); letter-spacing: .08em; text-transform: uppercase; color: var(--persik-tua); margin-top: .8rem; }
.mk-rinci-isi p { font-size: .95rem; line-height: 1.55; }
.mk-rinci .mk-kuis-kepala b { font-style: italic; }
.mk-riset { margin: .2rem 0 0; padding-left: 1.2rem; display: grid; gap: .6rem; font-size: .92rem; }
.mk-riset a { color: var(--rimba-2); font-weight: 600; }
.mk-riset small { display: block; color: var(--redup); font-size: .78rem; margin-top: .1rem; }
.mk-riset-ket { list-style: none; margin-left: -1.2rem; color: var(--redup); }
.mk-riset-lain { align-self: flex-start; margin-top: .6rem; font: 700 .88rem var(--badan); color: var(--persik-tua); }
.ve-catatan { margin-top: 1.4rem; padding: 1.4rem; border-radius: 1.4rem; background: #fff; border: 1px solid var(--garis); box-shadow: var(--bayang); display: grid; gap: .9rem; }
.ve-catatan h2 { font: 800 1.35rem/1.2 var(--judul); color: var(--rimba); }
.ve-catatan > p { font-size: .9rem; color: var(--redup); }
.ve-catatan label { display: grid; gap: .3rem; font: 700 .85rem var(--badan); color: var(--rimba-900); }
.ve-catatan select, .ve-catatan input, .ve-catatan textarea { width: 100%; padding: .7rem .9rem; border-radius: .8rem; border: 1px solid var(--garis); background: var(--krem); font: 400 .95rem var(--badan); color: var(--tinta); }
.ve-catatan textarea { min-height: 5.5rem; resize: vertical; }
.ve-catatan :is(select, input, textarea):focus { outline: 2px solid var(--persik); border-color: var(--persik); }
.ve-tiga { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .7rem; }
.ve-aksi { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.ve-aksi button { padding: .6rem 1.2rem; border-radius: 99px; border: 1px solid var(--rimba); background: var(--rimba); color: #fff; font: 700 .88rem var(--badan); cursor: pointer; }
.ve-aksi button.ve-sepi { background: #fff; color: var(--rimba); }
.ve-aksi span { font-size: .85rem; color: var(--rimba-2); font-weight: 600; }

/* ---------- Kartu mikroba bergaya Kebun Belajar; menu kaki di tengah ---------- */
.mk-kartu { min-height: 0; height: 25rem; }
.mk-nama { gap: .1rem; }
.mk-nama b { font-size: 1.25rem; }
.mk-nama small { font-size: .85rem; font-style: normal; opacity: .88; }
.mk-ketuk { position: absolute; left: .75rem; top: .75rem; padding: .28rem .65rem; border-radius: 99px; background: rgb(0 0 0 / .45); color: #fff; font: 600 .75rem var(--badan); backdrop-filter: blur(4px); }
.mk-belakang { padding: 0; gap: 0; overflow: hidden; border-radius: 1.5rem; min-width: 0; }
.mk-b-kepala { background: var(--rimba); color: var(--krem); padding: 1rem 1rem .75rem; }
.mk-b-nama { font: 800 1.12rem/1.2 var(--judul); font-style: italic; color: inherit; }
.mk-belakang .mk-b-grup { font-size: .85rem; color: rgb(209 250 229 / .9); }
.mk-b-badan { flex: 1; min-height: 0; overflow-y: auto; padding: .75rem 1rem; display: flex; flex-direction: column; gap: .5rem; }
.mk-kotak { border-radius: .55rem; padding: .4rem .65rem; }
.mk-belakang .mk-kotak p { font-size: .78rem; line-height: 1.45; color: #44403c; }
.mk-belakang .mk-kotak .mk-kotak-j { font-weight: 700; }
.mk-hijau { background: #ecfdf5; } .mk-belakang .mk-hijau .mk-kotak-j, .mk-belakang .mk-hijau p { color: var(--rimba); }
.mk-kuning { background: #fffbeb; } .mk-belakang .mk-kuning .mk-kotak-j { color: #92602a; }
.mk-belakang .mk-b-ciri { font-size: .875rem; line-height: 1.6; color: #44403c; }
.mk-belakang .mk-kredit { margin-top: .25rem; padding-top: 0; font-size: .69rem; line-height: 1.35; color: #a8a29e; }
.mk-b-kaki { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem .75rem; border-top: 1px solid #f5f5f4; }
.mk-b-kaki .mk-balik { margin: 0; padding: .4rem .75rem; border-radius: 99px; font-size: .875rem; }
.mk-b-kaki .mk-balik:hover { background: #ecfdf5; }
.mk-b-kaki .mk-rinci-tombol { margin: 0; padding: .4rem .8rem; font-size: .875rem; font-weight: 600; }
.mk-catatan-kaki { max-width: 46rem; margin: 2.2rem auto 0; text-align: center; font-size: .95rem; line-height: 1.6; color: var(--redup); }
.mk-catatan-kaki a { color: var(--rimba); font-weight: 700; }
.t-kaki nav { justify-content: center; }
.mk-belakang .mk-b-kepala .mk-b-nama { color: var(--krem); font-size: 1.12rem; line-height: 1.2; }

/* Keterangan sumber di bawah statistik */
.t-sumber-bawah { padding: 1.6rem 0 2rem; text-align: center; font-size: .9rem; line-height: 1.6; color: var(--redup); }
.t-sumber-bawah p { max-width: 46rem; margin: 0 auto; }
.t-sumber-bawah a { color: var(--rimba); font-weight: 700; }

/* ---------- Pencarian mikroba dan blok BacDive ---------- */
.mk-cari-bilah { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: .2rem 0 .9rem; }
.mk-cari-wadah { position: relative; flex: 1 1 14rem; min-width: 0; max-width: 34rem; }
.mk-cari-wadah svg { position: absolute; left: .8rem; top: 50%; width: 1.2rem; height: 1.2rem; transform: translateY(-50%); color: #a8a29e; pointer-events: none; }
.mk-cari { width: 100%; padding: .65rem 1.1rem .65rem 2.6rem; border-radius: 99px; border: 1px solid var(--garis); background: #fff; font: 400 .95rem var(--badan); color: var(--tinta); }
.mk-cari:focus { outline: 2px solid var(--persik); border-color: var(--persik); }
.mk-foto-tombol { display: inline-flex; align-items: center; gap: .45rem; padding: .62rem .95rem; border-radius: 99px; border: 1px solid var(--rimba); background: #fff; font: 600 .9rem var(--badan); color: var(--rimba); cursor: pointer; transition: transform .2s, background .2s, color .2s; }
.mk-foto-tombol svg { width: 1.25rem; height: 1.25rem; flex: none; }
.mk-foto-tombol:hover { transform: translateY(-2px); background: var(--rimba); color: #fff; }
.mk-foto-tombol:focus-visible { outline: 2px solid var(--rimba); outline-offset: 2px; }
@media (max-width: 480px) { #mk-btn-gambar-teks { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
.mk-foto-info { display: flex; gap: .8rem; align-items: flex-start; margin: 0 0 .9rem; padding: .8rem; border-radius: 1rem; background: #f1f6ee; border: 1px solid #cfe0c6; }
.mk-foto-info[hidden] { display: none; }
.mk-foto-info img { width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: .7rem; flex: none; }
.mk-foto-info > div { flex: 1; min-width: 0; }
.mk-foto-info p { margin: 0 0 .3rem; font-size: .9rem; }
.mk-foto-info .mk-foto-judul { font-weight: 700; color: var(--rimba-900); }
.mk-foto-info .mk-foto-ket { font-size: .82rem; color: var(--redup); }
#mk-foto-tutup { flex: none; align-self: center; padding: .5rem 1rem; border-radius: 99px; border: 1px solid #d6d3d1; background: #fff; font: 600 .85rem var(--badan); color: #44403c; cursor: pointer; }
#mk-foto-tutup:hover { border-color: var(--tanah, #b5562b); color: var(--tanah, #b5562b); }
@media (max-width: 480px) { .mk-foto-info { flex-wrap: wrap; } }
.mk-bd { display: grid; grid-template-columns: minmax(8rem, 11rem) 1fr; gap: .3rem .9rem; margin: .3rem 0 0; padding: .8rem 1rem; border-radius: .9rem; background: #fff; border: 1px solid var(--garis); font-size: .88rem; line-height: 1.45; }
.mk-bd dt { font-weight: 700; color: var(--rimba); }
.mk-bd dd { margin: 0; color: #3d3a36; overflow-wrap: anywhere; }
@media (max-width: 520px) { .mk-bd { grid-template-columns: 1fr; gap: 0; } .mk-bd dd { margin-bottom: .45rem; } }

/* ---------- Galeri mikroba lain (iNaturalist) dan resep media (MediaDive) ---------- */
.ml { margin-top: 2.4rem; }
.ml .mk-grup { margin: .8rem 0 .4rem; }
.ml-grid { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .9rem; }
.ml-kartu { display: flex; flex-direction: column; gap: .3rem; }
.ml-kartu a { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 1.1rem; overflow: hidden; background: var(--rimba-900); box-shadow: var(--bayang); color: #fff; text-decoration: none; }
.ml-kartu img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.ml-kartu a:hover img { transform: scale(1.05); }
.ml-nama { position: absolute; inset: auto 0 0 0; display: grid; padding: 1.6rem .8rem .6rem; background: linear-gradient(transparent, rgb(8 26 18 / .88)); line-height: 1.2; }
.ml-nama b { font: 800 .98rem var(--judul); }
.ml-nama b.ml-ilmiah { font-style: italic; }
.ml-nama i { font-size: .76rem; opacity: .85; }
.ml-kartu small { font-size: .66rem; line-height: 1.3; color: #a8a29e; overflow-wrap: anywhere; }
.ml-lagi { margin-top: 1rem; padding: .65rem 1.5rem; border-radius: 99px; border: 1px solid var(--rimba); background: #fff; color: var(--rimba); font: 700 .9rem var(--badan); cursor: pointer; }
.ml-lagi:hover { background: var(--rimba); color: #fff; }
.mk-resep { display: grid; gap: .6rem; margin-top: .3rem; }
.mk-resep details { border: 1px solid var(--garis); border-radius: .9rem; background: #fff; padding: .6rem .9rem; font-size: .88rem; }
.mk-resep summary { cursor: pointer; font-weight: 700; color: var(--rimba); }
.mk-resep summary small { font-weight: 400; color: var(--redup); }
.mk-resep ul { margin: .5rem 0 .3rem; padding-left: 1.1rem; columns: 2; column-gap: 1.6rem; }
.mk-resep li { break-inside: avoid; }
.mk-resep a { font-weight: 700; color: var(--persik-tua); font-size: .82rem; }
@media (max-width: 520px) { .mk-resep ul { columns: 1; } }

/* ---------- Bagian Tentang: pemandangan matahari terbit (13 Okt 2026) ---------- */
#tentang { position: relative; border-block: 0; padding-bottom: 17.5rem; overflow: hidden;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 70C200 20 380 30 600 62S1000 100 1200 48V120H0Z' fill='%23a8e3b8'/%3E%3Cpath d='M0 92C260 50 420 96 640 84S1040 52 1200 86V120H0Z' fill='%2356bf82'/%3E%3Cpath d='M0 108C300 92 520 116 760 104S1080 96 1200 110V120H0Z' fill='%23a4e6df'/%3E%3C/svg%3E") bottom / 100% 5.5rem no-repeat,
    radial-gradient(circle at calc(100% - 9rem) calc(100% - 10.4rem), #fffbe3 0 2.4rem, #ffdc6b 2.5rem 4.2rem, rgb(255 226 130 / .55) 4.3rem, rgb(255 236 170 / .25) 9rem, transparent 17rem),
    linear-gradient(180deg, #dff1fb, #f1f6ea 45%, #fff3cf 75%, #ffe7a8); }
/* Sinar matahari pagi: memancar di sekeliling matahari dan berhenti sebelum bukit. */
#tentang::before { content: ""; position: absolute; right: -2rem; bottom: -.6rem; width: 22rem; height: 22rem; pointer-events: none;
  background: repeating-conic-gradient(rgb(255 205 80 / .5) 0 3deg, transparent 3deg 15deg);
  -webkit-mask-image: radial-gradient(circle, transparent 0 4.8rem, #000 5.1rem, transparent 10.5rem); mask-image: radial-gradient(circle, transparent 0 4.8rem, #000 5.1rem, transparent 10.5rem);
  clip-path: inset(0 0 5.3rem 0); }
#tentang > .lebar { position: relative; }
#tentang .mata { color: #9a4634; }
#tentang p { color: #4a3f3c; }

/* ---------- Rincian mikroba bergaya dialog "Manfaat dan kandungan" Kebun Belajar ---------- */
.mk-rinci { width: min(94vw, 44rem); max-height: 92vh; overflow: hidden; border-radius: 1.8rem; background: var(--krem); }
.mk-rinci[open] { display: flex; flex-direction: column; }
.mr-kepala { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1.3rem 1.5rem 1.2rem; background: var(--rimba); color: var(--krem); }
.mr-mata { font: 600 .82rem/1 var(--badan); letter-spacing: .06em; text-transform: uppercase; color: var(--pucuk); margin-bottom: .4rem; }
.mr-kepala h3 { font: 800 1.6rem/1.15 var(--judul); font-style: italic; color: #fff; }
.mr-sub { font-size: .95rem; color: rgb(236 253 245 / .85); margin-top: .15rem; }
.mr-tutup { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 2px solid var(--pucuk); background: transparent; color: #fff; font: 400 1.6rem/1 var(--badan); cursor: pointer; }
.mr-tutup:hover { background: rgb(255 255 255 / .12); }
.mr-tab { display: flex; flex-wrap: wrap; gap: .3rem; padding: .7rem 1.2rem; background: #fff; border-bottom: 1px solid var(--garis); }
.mr-tab button { padding: .55rem 1.1rem; border: 0; border-radius: 99px; background: transparent; font: 600 .95rem var(--badan); color: #57534e; cursor: pointer; }
.mr-tab button:hover { background: #ecfdf5; }
.mr-tab button[aria-selected="true"] { background: var(--rimba-2, #1f5a3d); color: #fff; }
.mr-isi { flex: 1; min-height: 0; overflow-y: auto; padding: 1.3rem 1.4rem 1.6rem; display: grid; gap: 1.4rem; align-content: start; }
.mr-bagian { display: grid; gap: .6rem; }
.mr-bagian > h4 { display: flex; align-items: center; gap: .6rem; font: 800 1.15rem/1.25 var(--judul); color: var(--rimba-900); text-transform: none; letter-spacing: 0; }
.mr-bagian > h4::before { content: ""; flex: none; width: .6rem; height: .6rem; border-radius: 50%; background: #b5562b; }
.mr-kartu { padding: .9rem 1.1rem; border-radius: 1rem; background: #fff; border: 1px solid var(--garis); font-size: .95rem; line-height: 1.6; color: #292524; }
.mr-kartu .mk-sebagai { margin: 0; }
.mr-daftar { display: grid; gap: .6rem; }
.mr-doi { display: inline-block; margin-top: .3rem; font-weight: 700; color: var(--rimba-2, #1f5a3d); overflow-wrap: anywhere; }
.mr-redup { color: var(--redup); }
.mr-bagian .mk-bd, .mr-bagian .mk-resep { margin-top: 0; }

/* ---------- Persik dan merah muda lebih tampak di beranda (13 Okt 2026) ---------- */
.atas::after { height: 4px; opacity: 1; }
.t-ruang { background: linear-gradient(180deg, var(--krem), #fdf1ea 45%, var(--krem)); }
.t-ruang .t-kartu { border-color: color-mix(in srgb, var(--persik) 42%, var(--garis)); box-shadow: 0 10px 28px rgb(201 103 76 / .09); }
a.t-kartu:hover { border-color: var(--persik); }
.t-petik blockquote { background: linear-gradient(135deg, #fde6dc, #fbd5c7); }
.t-nilai { background: linear-gradient(180deg, var(--krem), #fdebe3 55%, #fbdccf); }
/* Kotak "Ruang berikutnya sedang disemai": dusty pink agak persik. */
.t-ruang .t-semai { background: linear-gradient(135deg, #f8ddd6, #f3cdc4); border-color: #dda293; }
/* Kartu Mading Informasi: tanda "sedang disemai" tetap ada, diikuti tautan masuk. */
.t-ruang .t-kartu .t-tag + .t-masuk { margin-top: .7rem; }
.t-ruang .t-kartu small + .t-tag { margin-top: auto; }
a.t-nanti .t-ikon { opacity: 1; }
/* Kepala situs berlatar persik lembut, senada dengan bagian Tentang yang lama. */
.atas { background: linear-gradient(90deg, color-mix(in srgb, #f9dcd3 94%, transparent), color-mix(in srgb, #f8e0cf 94%, transparent)); }

/* Jendela Pustaka: sapaan dan sematan Instagram */
.t-ig { display: grid; gap: 1.2rem; margin-top: 1.6rem; padding: 1.4rem; border-radius: 1.4rem; background: linear-gradient(150deg, #fbefe6, #f6e6d6); border: 1px solid var(--garis); }
@media (min-width: 820px) { .t-ig { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; } }
.t-ig h2 { font: 800 1.15rem/1.3 var(--judul); color: var(--rimba-900); margin: 0 0 .4rem; }
.t-ig p { font-size: .92rem; color: #4a4a3e; margin: 0 0 .9rem; }
.t-ig .btn { display: inline-block; }
.t-ig-sematan { min-width: 0; display: flex; justify-content: center; }
.t-ig-kartu { display: flex; align-items: center; gap: .9rem; width: 100%; max-width: 26rem; padding: 1rem 1.1rem; border-radius: 1.1rem; background: #fff; border: 1px solid var(--garis); text-decoration: none; color: var(--rimba-900); box-shadow: 0 6px 18px -12px rgb(23 69 47 / .35); }
.t-ig-kartu:hover { transform: translateY(-2px); }
.t-ig-logo { flex: none; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 1rem; color: #fff; background: linear-gradient(45deg, #f2a65a, #d9496b 55%, #8a4fbf); }
.t-ig-logo svg { width: 1.8rem; height: 1.8rem; }
.t-ig-nama { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.t-ig-nama b { font-size: 1rem; overflow-wrap: anywhere; }
.t-ig-nama small { color: var(--redup); font-size: .8rem; }
@media (max-width: 480px) { .t-ig-kartu img { display: none; } .t-ig-nama b { overflow-wrap: normal; } }

/* Cerita Jendela Pustaka */
.t-cerita { max-width: 46rem; margin: 0 auto; padding: 1.6rem 1.4rem 2rem; border-radius: 1.5rem; background: #fff; border: 1px solid var(--garis); box-shadow: var(--bayang); }
.t-cerita-rak { font: 700 .75rem/1.2 var(--badan); letter-spacing: .08em; text-transform: uppercase; color: var(--persik-tua, #b5562b); margin: 0 0 .5rem; }
.t-cerita h1 { font: 800 clamp(1.7rem, 4.6vw, 2.5rem)/1.15 var(--judul); color: var(--rimba); margin: 0 0 .5rem; }
.t-cerita-tgl { font-size: .85rem; color: var(--redup); margin: 0 0 1rem; }
.t-cerita-lead { font-size: 1.12rem; line-height: 1.7; color: var(--rimba-900); }
.t-cerita h2 { font: 800 1.25rem/1.3 var(--judul); color: var(--rimba-900); margin: 1.8rem 0 .5rem; }
.t-cerita p, .t-cerita li { font-size: 1.02rem; line-height: 1.8; }
.t-cerita-ilu { margin: 1.3rem 0; }
.t-cerita-ilu svg { display: block; width: 100%; height: auto; }
.t-cerita blockquote { margin: 1.4rem 0; padding: 1rem 1.2rem; border-left: 4px solid #2f7d4f; border-radius: 0 1rem 1rem 0; background: #eef5ea; font: 500 italic 1.12rem/1.6 var(--judul); color: var(--rimba-2); }
.t-cerita-catat, .t-cerita-kata { margin-top: 1.6rem; padding: 1rem 1.2rem; border-radius: 1rem; border: 1px solid var(--garis); }
.t-cerita-catat { background: #fbf3e6; } .t-cerita-kata { background: #f2f6f9; }
.t-cerita-catat h2, .t-cerita-kata h2 { margin-top: 0; font-size: 1.05rem; }
.t-cerita-catat ul, .t-cerita-kata ul { margin: 0; padding-left: 1.1rem; }
.t-cerita-catat li, .t-cerita-kata li { font-size: .95rem; line-height: 1.65; margin: .3rem 0; }
.t-cerita-sumber { margin-top: 1.6rem; padding-top: 1rem; border-top: 1px dashed var(--garis); }
.t-cerita-sumber h2 { margin-top: 0; font-size: 1.05rem; }
.t-cerita-ref { font-size: .88rem !important; line-height: 1.6 !important; color: #4a4a3e; overflow-wrap: anywhere; }
.t-cerita-ig { font-weight: 700; color: #b0406a; }
.t-cerita-kartu { display: flex; flex-direction: column; gap: .35rem; margin: 0 0 1.2rem; padding: 1.1rem 1.2rem; border-radius: 1.2rem; text-decoration: none; color: inherit; background: linear-gradient(150deg, #e9f1e4, #f7f1e1); border: 1px solid #cfe0c6; }
.t-cerita-kartu:hover { transform: translateY(-2px); }
.t-cerita-kartu b { font: 800 1.2rem/1.3 var(--judul); color: var(--rimba-900); }
.t-cerita-kartu small { font-size: .92rem; color: #4a5a4e; }
.t-cerita-kartu-tanda { align-self: flex-start; font: 700 .68rem/1 var(--badan); letter-spacing: .06em; text-transform: uppercase; padding: .35rem .6rem; border-radius: 99px; background: #2f7d4f; color: #fff; }
.t-cerita-kartu-tgl { font-size: .8rem; color: var(--redup); }
.t-tag-ada { text-decoration: none; background: #e1efdc !important; color: #1f5a3d !important; }
.t-cerita > p { margin: 0 0 .95rem; }
.t-cerita > p.t-cerita-rak { margin-bottom: .5rem; }
.t-cerita-sub { font-size: 1.08rem; color: #4a5a4e; margin: 0 0 .4rem !important; }
.t-cerita-aksi { margin: .2rem 0 1rem !important; }
.t-cerita-asli { display: inline-block; padding: .6rem 1rem; border-radius: 99px; background: var(--rimba-900, #17452f); color: #fff !important; font-weight: 700; font-size: .95rem; text-decoration: none; }
.t-cerita-asli:hover { filter: brightness(1.15); }
.t-cerita-asli-kecil { padding: .45rem .85rem; font-size: .85rem; }
.t-cerita-sampul { margin: 1.2rem auto; max-width: 26rem; }
.t-cerita-sampul img { display: block; width: 100%; height: auto; border-radius: 1rem; box-shadow: 0 12px 30px -18px rgb(0 0 0 / .5); }
.t-cerita-sampul figcaption { font-size: .82rem; color: var(--redup); text-align: center; margin-top: .5rem; }
.t-cerita-hak { font-size: .85rem !important; line-height: 1.6 !important; color: #5a5a4e; background: #f7f4ec; padding: .7rem .9rem; border-radius: .8rem; }
.t-seri-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem; margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--garis); font-size: .9rem; color: var(--redup); }
.t-seri-lanjut { font-weight: 700; color: var(--persik-tua, #b5562b); }
.t-seri { margin-bottom: 1.4rem; }
.t-seri h2 { font: 800 1.15rem/1.3 var(--judul); color: var(--rimba-900); margin: 0 0 .7rem; }
.t-seri .t-cerita-kartu { flex-direction: row; align-items: center; gap: 1rem; margin-bottom: .5rem; }
.t-seri .t-cerita-kartu img { width: 6.5rem; height: auto; border-radius: .7rem; flex: none; }
.t-cerita-kartu-isi { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.t-seri-sumber { font-size: .85rem; color: var(--redup); margin: 0; }
.t-seri-sumber a { color: #1f5a3d; font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 520px) { .t-seri .t-cerita-kartu { flex-direction: column; align-items: flex-start; } .t-seri .t-cerita-kartu img { width: 100%; max-width: 14rem; } }
.t-seri-balik { font-weight: 700; color: #1f5a3d; text-decoration: none; }
.t-kembali-apung { position: fixed; left: 1rem; bottom: 1rem; z-index: 30; display: inline-flex; align-items: center; gap: .35rem; padding: .6rem 1rem; border-radius: 99px; background: var(--rimba-900, #17452f); color: #fff; font-weight: 700; font-size: .9rem; text-decoration: none; box-shadow: 0 10px 24px -12px rgb(0 0 0 / .55); }
.t-kembali-apung:hover { filter: brightness(1.15); }
.t-pustaka-hak { margin-top: 1.4rem; padding: 1rem 1.2rem; border-radius: 1rem; background: #f7f4ec; border: 1px solid var(--garis); }
.t-pustaka-hak h2 { font: 800 1rem/1.3 var(--judul); color: var(--rimba-900); margin: 0 0 .35rem; }
.t-pustaka-hak p { font-size: .88rem; line-height: 1.65; color: #5a5a4e; margin: 0; }

/* ---------- Pojok Literasi (29 Okt 2026) ---------- */
.pl-hal .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pl-form { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin: 1.6rem 0 .6rem; padding: 1.2rem; border-radius: 1.4rem; background: #fff; border: 1px solid var(--garis); box-shadow: var(--bayang); }
.pl-kotak { position: relative; flex: 1 1 18rem; min-width: 0; }
.pl-kotak svg { position: absolute; left: .9rem; top: 50%; width: 1.25rem; height: 1.25rem; transform: translateY(-50%); color: #a8a29e; pointer-events: none; }
.pl-kotak input { width: 100%; padding: .8rem 1.1rem .8rem 2.8rem; border-radius: 99px; border: 1px solid var(--garis); background: #fff; font: 400 1rem var(--badan); color: var(--tinta); }
.pl-kotak input:focus { outline: 2px solid #4f6aa8; border-color: #4f6aa8; }
.pl-form .btn { padding: .78rem 1.5rem; }
.pl-saring { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; font-size: .88rem; color: var(--redup); }
.pl-saring select { margin-left: .3rem; padding: .35rem .6rem; border-radius: .6rem; border: 1px solid var(--garis); background: #fff; font: 500 .88rem var(--badan); color: var(--tinta); }
.pl-saring label { display: inline-flex; align-items: center; gap: .3rem; }
.pl-sumber { display: inline-flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: center; }
.pl-sumber > span { font-weight: 600; }
.pl-status { margin: .4rem 0 .8rem; font-size: .9rem; color: var(--redup); min-height: 1.4em; }
.pl-hasil { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.pl-artikel { padding: 1rem 1.2rem; border-radius: 1.1rem; background: #fff; border: 1px solid var(--garis); }
.pl-artikel h3 { margin: 0 0 .35rem; font: 700 1.02rem/1.4 var(--badan); color: var(--rimba-900); }
.pl-artikel h3 a { color: inherit; text-decoration: none; }
.pl-artikel h3 a:hover { color: #4f6aa8; text-decoration: underline; }
.pl-artikel p { margin: 0 0 .25rem; font-size: .86rem; line-height: 1.5; }
.pl-penulis { color: var(--tinta); }
.pl-meta { color: var(--redup); }
.pl-tanda { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .45rem !important; }
.pl-tanda span, .pl-salin { font: 600 .72rem/1 var(--badan); padding: .32rem .6rem; border-radius: 99px; background: #f1efe9; color: #57534e; }
.pl-tanda .pl-oa { background: #e3f1e0; color: #1f5a3d; }
.pl-salin { border: 1px solid var(--garis); background: #fff; cursor: pointer; }
.pl-salin:hover { border-color: #4f6aa8; color: #4f6aa8; }
.pl-lagi-wadah { text-align: center; margin: 1rem 0 0; }
.pl-lagi { padding: .6rem 1.3rem; border-radius: 99px; border: 1px solid var(--rimba); background: #fff; font: 600 .9rem var(--badan); color: var(--rimba); cursor: pointer; }
.pl-lagi[hidden] { display: none; }
.pl-lanjut { margin-top: 2.4rem; }
.pl-redup { color: var(--redup); font-size: .92rem; }
.pl-tautan { display: flex; flex-wrap: wrap; gap: .6rem; }
.pl-tautan a { padding: .55rem 1rem; border-radius: 99px; border: 1px solid var(--garis); background: #fff; font: 600 .9rem var(--badan); color: var(--rimba-900); text-decoration: none; }
.pl-tautan a:hover { border-color: #4f6aa8; color: #4f6aa8; }
.pl-dua { display: grid; gap: 1rem; margin-top: 2rem; }
@media (min-width: 820px) { .pl-dua { grid-template-columns: 1.4fr 1fr; } }
.pl-catat { padding: 1.2rem 1.4rem; border-radius: 1.2rem; background: color-mix(in srgb, #4f6aa8 7%, #fff); border: 1px solid color-mix(in srgb, #4f6aa8 22%, #fff); }
.pl-catat h2 { margin: 0 0 .6rem; font: 700 1.15rem var(--judul); color: var(--rimba); }
.pl-catat p, .pl-catat li { font-size: .9rem; line-height: 1.6; }
.pl-catat ul { margin: 0; padding-left: 1.1rem; }
.pl-hal .kepala-bagian p + p { margin-top: .7rem; }
/* Pojok Literasi, dua menu (29 Okt 2026) */
.pl-tab { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.6rem 0 0; padding: .35rem; border-radius: 99px; background: #fff; border: 1px solid var(--garis); width: fit-content; max-width: 100%; }
.pl-tab button { display: inline-flex; align-items: center; gap: .4rem; padding: .65rem 1.25rem; border: 0; border-radius: 99px; background: none; font: 700 .95rem var(--badan); color: var(--rimba-900); cursor: pointer; }
.pl-tab button[aria-selected="true"] { background: var(--rimba); color: #fff; }
.pl-tab button:focus-visible { outline: 2px solid #4f6aa8; outline-offset: 2px; }
.pl-panel { margin-top: 1.4rem; }
.pl-panel[hidden] { display: none; }
.pl-panel-j { margin: 0 0 .35rem; font: 800 1.45rem/1.25 var(--judul); color: var(--rimba); }
.pl-panel .pl-redup { max-width: none; }
.pl-panel .pl-form { margin-top: 1rem; }
.pl-centang { display: inline-flex; align-items: center; gap: .35rem; font-size: .88rem; color: var(--redup); }
.pl-abstrak { flex: 1 1 100%; }
.pl-abstrak textarea { width: 100%; min-height: 10rem; padding: .9rem 1.1rem; border-radius: 1rem; border: 1px solid var(--garis); background: #fff; font: 400 .95rem/1.6 var(--badan); color: var(--tinta); resize: vertical; box-sizing: border-box; }
.pl-abstrak textarea:focus { outline: 2px solid #4f6aa8; border-color: #4f6aa8; }
.pl-catat-kecil { flex-basis: 100%; margin: 0; font-size: .8rem; color: var(--redup); }
.pl-kata { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin: .2rem 0 0; font-size: .85rem; color: var(--redup); }
.pl-kata:empty { display: none; }
.pl-kata b { margin-right: .3rem; color: var(--rimba-900); }
.pl-kata-baris > span { padding: .25rem .6rem; border-radius: 99px; background: color-mix(in srgb, #4f6aa8 12%, #fff); color: #34497a; font-weight: 600; }
.pl-tanda .pl-cocok { background: color-mix(in srgb, #4f6aa8 14%, #fff); color: #34497a; }
.pl-baca { font: 700 .76rem var(--badan); color: #1f5a3d; text-decoration: none; }
.pl-baca:hover { text-decoration: underline; }
.pl-contoh { margin: .5rem 0 .2rem; font-size: .85rem; }
.pl-contoh summary { cursor: pointer; font-weight: 600; color: var(--rimba-900); }
.pl-contoh ul { margin: .4rem 0 0; padding-left: 1.1rem; line-height: 1.5; }
.pl-contoh a { color: #34497a; }
.pl-tautan-kecil { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin-top: .4rem !important; }
.pl-tautan-kecil a { font: 600 .8rem var(--badan); color: #34497a; text-decoration: none; }
.pl-tautan-kecil a:hover { text-decoration: underline; }
@media (max-width: 520px) { .pl-tab { width: 100%; } .pl-tab button { flex: 1; justify-content: center; padding: .6rem .7rem; font-size: .88rem; } }
.pl-panel .pl-saring { flex-basis: 100%; }
.pl-scopus { margin: .2rem 0 .9rem; padding: .8rem 1.1rem; border-radius: 1rem; background: #fff; border: 1px dashed color-mix(in srgb, #4f6aa8 40%, #fff); font-size: .88rem; line-height: 1.6; }
.pl-scopus summary { cursor: pointer; font-weight: 700; color: var(--rimba-900); }
.pl-scopus p { margin: .6rem 0 0; color: var(--tinta); }
.pl-scopus a { color: #34497a; }
.pl-sc-tanda { margin-left: .4rem; padding: .2rem .55rem; border-radius: 99px; background: #f1efe9; color: #57534e; font: 600 .72rem var(--badan); }
.pl-sc-tanda.ada { background: #e3f1e0; color: #1f5a3d; }
.pl-sc-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .7rem; }
.pl-sc-form label { flex: 1 1 16rem; }
.pl-sc-form input { width: 100%; box-sizing: border-box; padding: .6rem 1rem; border-radius: 99px; border: 1px solid var(--garis); font: 400 .9rem var(--badan); }
.pl-sc-form .pl-lagi[hidden] { display: none; }
/* Pojok Literasi: tanda daftar yang sudah dibuka dan kata kunci terjemahan */
.pl-artikel.pl-dibuka { background: #f6f4ef; border-color: #e2ddd2; }
.pl-artikel.pl-dibuka h3 a { color: #6b5b8a; }
.pl-tanda .pl-sudah { background: #ece6f4; color: #5b4a80; }
.pl-tanda .pl-sinta { font: 600 .72rem/1 var(--badan); padding: .32rem .6rem; border-radius: 99px; background: #fdeee2; color: #8a4517; text-decoration: none; }
.pl-tanda .pl-sinta:hover, .pl-tanda .pl-sinta:focus-visible { text-decoration: underline; }
.pl-kata { flex-direction: column; align-items: flex-start; }
.pl-kata-baris { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }

/* Pojok Literasi: teks pengantar memakai lebar penuh halaman */
.pl-hal .kepala-bagian { max-width: none; }
/* Teks pengantar ruang memakai lebar penuh halaman (29 Okt 2026) */
.t-ruang .kepala-bagian, .t-pita-fajar .kepala-bagian { max-width: none; }
.t-kreasi-kepala > div { flex: 1; min-width: 0; }
.t-kreasi-kepala p:last-child { max-width: none; }
/* Rumah Naskah: pilihan jurnal dan kuartil Scopus (30 Okt 2026) */
.pl-pilih { display: inline-flex; align-items: center; gap: .4rem; font-size: .88rem; color: var(--redup); }
.pl-pilih select { padding: .45rem .7rem; border-radius: .7rem; border: 1px solid var(--garis); background: #fff; font: 600 .9rem var(--badan); color: var(--tinta); }
.pl-tanda .pl-kuartil { background: #e8eefb; color: #2f4d8f; }
.pl-tanda .pl-q1 { background: #dff1e3; color: #1f5a3d; }
.pl-tanda .pl-q2 { background: #e8f3d9; color: #48651c; }
.pl-tanda .pl-q3 { background: #fbf0d6; color: #7a5a12; }
.pl-tanda .pl-q4 { background: #fbe4dc; color: #8a3b22; }
.pl-ke-scopus { font-size: .72rem; }
@media (max-width: 600px) { .pl-form .btn { width: 100%; justify-content: center; } }
.pl-sc-form .pl-sc-balik { border-color: #4f6aa8; color: #34497a; }
.pl-sc-form .pl-sc-balik[hidden] { display: none; }
/* Pojok Literasi: Intip isi artikel (30 Okt 2026) */
.pl-intip { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; margin-top: .6rem; padding-top: .55rem; border-top: 1px dashed var(--garis); font-size: .82rem; }
.pl-intip-j { font-weight: 700; color: #34497a; }
.pl-intip label { display: inline-flex; align-items: center; gap: .25rem; color: var(--tinta); cursor: pointer; }
.pl-intip-isi { flex-basis: 100%; display: grid; gap: .55rem; margin-top: .4rem; padding: .8rem 1rem; border-radius: .9rem; background: color-mix(in srgb, #4f6aa8 6%, #fff); border: 1px solid color-mix(in srgb, #4f6aa8 18%, #fff); }
.pl-intip-bag b { display: block; font-size: .78rem; letter-spacing: .03em; text-transform: uppercase; color: #34497a; }
.pl-intip-bag p { margin: .15rem 0 0; font-size: .86rem; line-height: 1.6; }
.pl-intip-catat { margin: 0; font-size: .74rem; color: var(--redup); font-style: italic; }
/* Pojok Literasi: artikel ditarik, rak bacaan, peringatan jurnal (30 Okt 2026) */
.pl-artikel.pl-ditarik { border-color: #e7a99a; background: #fff6f3; }
.pl-tarik { margin: 0 0 .4rem !important; padding: .35rem .7rem; border-radius: .6rem; background: #fbe1da; color: #8a2b16; font-weight: 700; font-size: .82rem !important; }
.pl-ditarik h3 a { text-decoration: line-through; text-decoration-color: #c9674c; }
.pl-tanda .pl-simpan.aktif { border-color: #d9a43a; color: #8a6210; background: #fff8e6; }
.pl-tanda .pl-waspada, .pl-waspada { background: #fbe1da; color: #8a2b16; }
.pl-rak { margin-bottom: .9rem; }
.pl-rak ol { margin: .6rem 0; padding-left: 1.2rem; display: grid; gap: .45rem; }
.pl-rak li { font-size: .84rem; line-height: 1.5; }
.pl-rak .pl-tautan { margin-top: .4rem; }

/* ---------- Mading Informasi: Pintu Beasiswa ---------- */
.t-kreasi-kisi h3 a { color: inherit; text-decoration: none; }
.t-kreasi-kisi h3 a:hover, .t-kreasi-kisi h3 a:focus-visible { text-decoration: underline; }
.t-tag.md-tag-ada { color: #1f5a3d; background: #e3f1e0; }
.md-beasiswa { margin: 2.6rem 0 1.4rem; scroll-margin-top: 5rem; }
.md-beasiswa h2 { font: 800 clamp(1.5rem, 3.4vw, 2rem)/1.15 var(--judul); color: var(--rimba); margin: .2rem 0 .6rem; }
.md-beasiswa > p { max-width: 70ch; color: var(--redup); line-height: 1.7; }
.md-saring { display: flex; flex-wrap: wrap; gap: .7rem 1.2rem; align-items: center; margin: 1.1rem 0 .4rem; }
.md-pilih { display: flex; flex-wrap: wrap; gap: .4rem; }
.md-pilih button { font: 600 .82rem/1 var(--badan); padding: .55rem .9rem; border-radius: 99px; border: 1px solid var(--garis); background: #fff; color: var(--tinta); cursor: pointer; }
.md-pilih button[aria-pressed="true"] { background: var(--rimba); border-color: var(--rimba); color: #fff; }
.md-pilih button:focus-visible, .md-centang input:focus-visible { outline: 3px solid var(--kunyit); outline-offset: 2px; }
.md-centang { font-size: .88rem; color: var(--redup); display: inline-flex; gap: .4rem; align-items: center; }
.md-status { font-size: .88rem; color: var(--redup); margin: .4rem 0 .8rem !important; }
.md-daftar { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.md-kartu { background: #fff; border: 1px solid var(--garis); border-radius: 1.1rem; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .45rem; border-top: 5px solid #cfc8b8; }
.md-kartu.md-dibuka { border-top-color: #2f7d4f; }
.md-kartu.md-segera { border-top-color: var(--kunyit); }
.md-kartu.md-tutup { opacity: .82; }
.md-kartu h3 { font: 700 1.08rem/1.3 var(--judul); margin: 0; }
.md-kartu h3 a { color: var(--rimba); text-decoration: none; }
.md-kartu h3 a:hover, .md-kartu h3 a:focus-visible { text-decoration: underline; }
.md-kartu-atas { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 !important; }
.md-pita, .md-kel { font: 700 .66rem/1 var(--badan); letter-spacing: .05em; text-transform: uppercase; padding: .3rem .55rem; border-radius: 99px; background: #f1efe9; color: #57534e; }
.md-dibuka .md-pita { background: #e3f1e0; color: #1f5a3d; }
.md-segera .md-pita { background: color-mix(in srgb, var(--kunyit) 26%, #fff); color: var(--tanah); }
.md-waktu { font-size: .88rem; margin: 0 !important; color: var(--tinta); }
.md-kartu dl { margin: 0; display: grid; gap: .25rem; font-size: .84rem; }
.md-kartu dl div { display: grid; grid-template-columns: 7.2rem 1fr; gap: .5rem; }
.md-kartu dt { color: var(--redup); }
.md-kartu dd { margin: 0; }
.md-ringkas { font-size: .86rem; line-height: 1.6; color: var(--redup); margin: 0 !important; }
.md-kaki-kartu { margin: auto 0 0 !important; padding-top: .4rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem; font-size: .8rem; color: var(--redup); }
.md-kaki-kartu a { font-weight: 700; color: var(--rimba); }
.md-waspada { margin: 1.4rem 0 .6rem; padding: .8rem 1.1rem; border-radius: 1rem; background: #fff; border: 1px dashed color-mix(in srgb, var(--tanah) 45%, #fff); font-size: .88rem; line-height: 1.6; }
.md-waspada summary { font-weight: 700; color: var(--tanah); cursor: pointer; }
.md-catat { font-size: .82rem !important; }
@media (max-width: 420px) { .md-kartu dl div { grid-template-columns: 1fr; gap: 0; } }
.md-kartu.md-portal { border-top-color: #4f6aa8; }
.md-portal .md-pita { background: color-mix(in srgb, #4f6aa8 14%, #fff); color: #34497a; }
.md-ket-lebar { color: var(--redup); font-size: .95rem; line-height: 1.75; margin: -.2rem 0 1.4rem; max-width: none; }
.md-buka { display: inline-block; margin: .6rem .9rem 0; font: 700 .82rem/1 var(--badan); color: var(--rimba); text-decoration: none; padding: .45rem .8rem; border-radius: 99px; background: #e3f1e0; }
.md-buka:hover, .md-buka:focus-visible { text-decoration: underline; }
.md-halaman { margin-top: 1rem; }
.md-beasiswa > p { max-width: none; }
.md-pilih-negara { font-size: .88rem; color: var(--redup); display: inline-flex; gap: .45rem; align-items: center; }
.md-pilih-negara select { font: 600 .84rem/1.2 var(--badan); padding: .45rem .7rem; border-radius: .7rem; border: 1px solid var(--garis); background: #fff; color: var(--tinta); max-width: 100%; }
.md-pilih-negara select:focus-visible { outline: 3px solid var(--kunyit); outline-offset: 2px; }
.md-cari { display: flex; align-items: center; gap: .6rem; margin: 1.1rem 0 .2rem; padding: .7rem 1rem; background: #fff; border: 1px solid var(--garis); border-radius: 99px; max-width: 640px; }
.md-cari svg { width: 1.1rem; height: 1.1rem; color: var(--redup); flex: none; }
.md-cari input { border: 0; outline: 0; flex: 1; min-width: 0; font: 500 .95rem/1.3 var(--badan); background: transparent; color: var(--tinta); }
.md-cari:focus-within { outline: 3px solid var(--kunyit); outline-offset: 2px; }
.md-cari .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.md-syarat { font-size: .85rem; background: #f7f5ee; border-radius: .8rem; padding: .55rem .8rem; }
.md-syarat summary { font-weight: 700; color: var(--rimba); cursor: pointer; }
.md-syarat ul { margin: .45rem 0 .3rem; padding-left: 1.1rem; display: grid; gap: .3rem; line-height: 1.5; }
.md-syarat p { margin: .2rem 0 0 !important; font-size: .78rem; color: var(--redup); }
.md-syarat-kosong { font-size: .8rem; color: var(--redup); font-style: italic; margin: 0 !important; }