/* LPMQ-Q2: LPMQ Isep Misbah (Lajnah) dimodifikasi oleh ../build_font.py; preview internal, web publik perlu izin Lajnah */
@font-face { font-family: LPMQQ2; src: url(fonts/LPMQ-Q2.woff2) format("woff2"); font-display: block; }

:root {
  --paper: #FFFBF3; --ink: #2B2622; --mushaf: #2D6A5E; --muted: #76695B; --gilt: #B08A3E;
  --line: #F0E8DA; --ctl: color-mix(in srgb, var(--muted) 80%, var(--paper)); --raise: #FFFDF8; --darurat: #B4483C;
  --fs: 36px; --lh: 2.4; --L: calc(var(--fs) * var(--lh));
  --readInk: #A39484;
  --terra: #A9533A; --terraSoft: #F3DDD2; --teal: #0F4C45;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121816; --ink: #E4EAE6; --mushaf: #5FA59A; --muted: #7F8C87; --gilt: #C9A45A;
    --line: #26302C; --raise: #1A2220; --darurat: #E08A7E; --readInk: #8DB8A8;
    --terra: #E08B6E; --terraSoft: #3A2620; --teal: #5FA59A;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #121816; --ink: #E4EAE6; --mushaf: #5FA59A; --muted: #7F8C87; --gilt: #C9A45A;
  --line: #26302C; --raise: #1A2220; --darurat: #E08A7E; --readInk: #8DB8A8;
    --terra: #E08B6E; --terraSoft: #3A2620; --teal: #5FA59A;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--paper); color: var(--ink);
  font: 400 16px/1.5 "Atkinson Hyperlegible Next", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent; overscroll-behavior: none;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; border-radius: 6px; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
svg .d { fill: var(--terra); stroke: none; }

/* pembaca: kolom selebar HP, juga di laptop */
#reader { position: fixed; inset: 0; display: flex; flex-direction: column; max-width: 30rem; margin: 0 auto; container-type: size; }
/* terjemah terbuka: bacaan memakai sisa layar di atas sheet (cqh di #page.flow ikut tinggi reader) */
html.tr #reader { bottom: var(--trh); }
html.tr #bottom { visibility: hidden; }
#tr { max-height: 50dvh; z-index: 5; }  /* non-modal: bacaan di atasnya tetap bisa digulir */
#trClose { float: right; position: sticky; top: 0; width: 44px; height: 44px; margin: -8px -12px 0 0; color: var(--muted); font-size: 18px; }
#tr::backdrop { background: transparent; }
#progress { position: absolute; top: env(safe-area-inset-top); inset-inline: 0; height: 2px; background: var(--line); z-index: 3; }
#progress i { position: relative; display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--terraSoft), var(--terra)); border-radius: 0 2px 2px 0; transition: width .3s ease; }

#page {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column;
  padding: calc(env(safe-area-inset-top) + 56px) 20px calc(env(safe-area-inset-bottom) + 64px);
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
  view-transition-name: page;
}
#verse {
  margin-block: auto; text-align: right;
  font: var(--fs)/var(--lh) LPMQQ2, serif;
}
/* rantai bersambung: satu potongan per blok; potongan aktif terang di area baca, lainnya pudar.
   Mask menempel di #page (tidak ikut tergulir); --bh = tinggi potongan aktif, diset app.js. */
@property --bh { syntax: "<length>"; inherits: true; initial-value: 0px; }
#page.flow {
  --ft: max(calc(env(safe-area-inset-top) + 56px), calc(50cqh - 3 * var(--L)));  /* tinggi atas area baca; landscape: 50cqh − 1.5 L */
  --t: var(--ft); --b: calc(var(--t) + var(--bh));
  padding-top: var(--ft);
  scroll-snap-type: y mandatory; scroll-padding-top: var(--ft);
  transition: --bh .25s ease;
  --fade: linear-gradient(
    rgb(0 0 0 / .12) calc(var(--t) - 2 * var(--L)),
    rgb(0 0 0 / .35) calc(var(--t) - .2 * var(--L)), #000 calc(var(--t) + .1 * var(--L)),
    #000 calc(var(--b) - .1 * var(--L)), rgb(0 0 0 / .55) calc(var(--b) + .2 * var(--L)),
    rgb(0 0 0 / .55) calc(var(--b) + .8 * var(--L)), rgb(0 0 0 / .35) calc(var(--b) + 1.2 * var(--L)),
    rgb(0 0 0 / .35) calc(var(--b) + 1.8 * var(--L)), rgb(0 0 0 / .15) calc(var(--b) + 2.2 * var(--L)),
    rgb(0 0 0 / .15) calc(var(--b) + 2.8 * var(--L)), rgb(0 0 0 / .08) calc(var(--b) + 3.2 * var(--L)));
  -webkit-mask-image: var(--fade); mask-image: var(--fade);
}
#page.flow #verse { margin-block: 0; }
/* ruang agar potongan terakhir bisa naik ke area baca; spacer, bukan padding-bottom: WebKit tidak menghitung padding akhir flex container sebagai area gulir */
#page.flow #verse::after { content: ""; display: block; height: calc(50cqh + 1.5 * var(--L)); }
#page.flow .sc { display: block; scroll-snap-align: start; scroll-snap-stop: always; }
.sc { transition: color .4s ease; }
.sc.read { color: var(--readInk); }
.surahHead { text-align: center; margin-bottom: .6em; }
.surahHead .nm { font-size: .62em; color: var(--mushaf); line-height: 1.6; }
.surahHead .nm::after { content: ""; display: block; width: 7.5em; height: 10px; margin: .1em auto .35em; background: var(--terra); opacity: .55; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10'%3E%3Cpath d='M2 6c10 0 14-3 24-3s14 3 24 3M70 6c10 0 14-3 24-3s14 3 24 3' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round'/%3E%3Cpath d='M60 1.5l3.5 3.5-3.5 3.5-3.5-3.5z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10'%3E%3Cpath d='M2 6c10 0 14-3 24-3s14 3 24 3M70 6c10 0 14-3 24-3s14 3 24 3' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round'/%3E%3Cpath d='M60 1.5l3.5 3.5-3.5 3.5-3.5-3.5z'/%3E%3C/svg%3E") center/contain no-repeat; }
.surahHead .bs { font-size: .8em; line-height: 1.8; }
.iadah { color: var(--muted); }
.end { color: var(--mushaf); }
.start { margin-inline-end: .15em; }
.am { color: var(--terra); font-size: .4em; vertical-align: .55em; }
.start.waqf { color: var(--mushaf); }
/* tanda waqaf: bisa diketuk; area ketuk diperbesar tanpa mengubah layout */
.w { white-space: nowrap; }
.wq { display: inline-block; position: relative; color: var(--mushaf); }
.wq::after { content: ""; position: absolute; inset: -.35em -.25em; }

/* chrome: header dan menu bawah selalu tampil */
.chrome {
  position: absolute; inset-inline: 0; z-index: 2; display: flex; align-items: center; gap: 4px;
  background: var(--paper);
}
#top { top: 0; padding: calc(env(safe-area-inset-top) + 6px) 8px 6px 12px; }
#bottom { bottom: 0; padding: 8px 8px calc(env(safe-area-inset-bottom) + 8px); justify-content: space-around; }
/* Mahla accent: tepi atas menu = gelombang tipis (pengganti hairline) */
#bottom::before { content: ""; position: absolute; inset: -4px 0 auto; height: 8px; background: var(--terra); opacity: .3; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 8' preserveAspectRatio='none'%3E%3Cpath d='M0 5C50 5 70 2 120 2s80 5 130 4 50-2 50-2' fill='none' stroke='%23000' stroke-width='1.2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0/100% 100%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 8' preserveAspectRatio='none'%3E%3Cpath d='M0 5C50 5 70 2 120 2s80 5 130 4 50-2 50-2' fill='none' stroke='%23000' stroke-width='1.2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0/100% 100%; }
#bottom button { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 13px; color: var(--muted); padding: 6px 14px; min-width: 0; }
#bottom button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
#bottom button[aria-pressed="true"] { color: var(--terra); }
/* penanda geser: gelombang tepi menu memuncak di tengah, diamond di puncak; geser menu ke atas (atau ketuk) = terjemah.
   garis puncak (y=14 di svg) disejajarkan dengan gelombang ::before (±1.4px di atas tepi menu) */
#bottom { touch-action: none; }
#bottom .pull { position: absolute; top: -28px; left: 50%; translate: -50% 0; min-width: 0; padding: 13px 12px; border-radius: 12px; }  /* padding 13 = area sentuh 44 px, gelombang tetap di tempat */
#bottom .pull:focus-visible { outline: 2px solid var(--terra); outline-offset: -2px; }
#bottom .pull svg { width: 56px; height: 18px; stroke-width: 1.2; }
.pull .bg { fill: var(--paper); stroke: none; }
.pull .ln { stroke: var(--terra); opacity: .3; }
.pull .d { transform-box: fill-box; animation: rise .9s .8s ease-in-out; }
@keyframes rise { 50% { translate: 0 -4px; } }
#bottom button[aria-pressed="true"] .rib { fill: var(--terra); stroke: var(--terra); }
#bottom button[aria-pressed="true"] .d { fill: var(--paper); }
.where { flex: 1; min-width: 0; overflow: hidden; display: flex; align-items: baseline; gap: 0; text-align: start; padding: 8px 4px; min-height: 44px; }
#sName { font-weight: 600; font-size: 17px; white-space: nowrap; }
#sPos::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 10px 2px; border-radius: 1px; background: var(--terra); transform: rotate(45deg); }
#sPos:empty::before { display: none; }
#sPos { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon { width: 44px; height: 44px; display: grid; place-items: center; color: var(--muted); }

/* sheet */
.sheet {
  position: fixed; inset: auto 0 0; margin: 0 auto; width: 100%; max-width: 30rem; max-height: 60dvh;
  border: 0; border-radius: 18px 18px 0 0; padding: 8px 20px calc(env(safe-area-inset-bottom) + 16px);
  background: var(--raise); color: var(--ink); overflow-y: auto; overscroll-behavior: contain;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), overlay .22s allow-discrete, display .22s allow-discrete;
  transform: translateY(100%);
}
.sheet[open] { transform: none; }
@starting-style { .sheet[open] { transform: translateY(100%); } }
.sheet.tall { height: 86dvh; max-height: none; display: none; flex-direction: column; overflow: hidden; }
.sheet.tall[open] { display: flex; }
.sheet::backdrop { background: rgb(0 0 0 / .18); transition: opacity .22s, overlay .22s allow-discrete, display .22s allow-discrete; opacity: 0; }
.sheet[open]::backdrop { opacity: 1; }
@starting-style { .sheet[open]::backdrop { opacity: 0; } }
.sheet.drag { transition: none; }  /* mengikuti jari */
.grab { touch-action: none; width: 36px; height: 4px; border-radius: 2px; background: var(--line); margin: 0 auto 14px; flex: none; }
.sheet h2 { font-size: 17px; font-weight: 600; margin: 0 0 12px; }
.src { color: var(--muted); font-size: 13px; margin: 18px 0 0; }
.src a { color: var(--terra); text-underline-offset: 2px; text-decoration-thickness: 1px; }
#pickRef { margin: -4px 0 14px; }

#q {
  width: 100%; font: inherit; font-size: 17px; color: inherit; flex: none;
  padding: 12px 14px; border: 1px solid var(--ctl); border-radius: 12px; background: var(--paper);
}
#q:focus { outline: none; border-color: var(--terra); }
.tabs { display: flex; gap: 20px; margin: 14px 2px 4px; flex: none; }
.tabs button { padding: 8px 0; min-height: 44px; color: var(--muted); border-bottom: 2px solid transparent; }
.tabs button[aria-selected="true"] { color: var(--ink); border-color: var(--terra); font-weight: 600; }
#list { list-style: none; margin: 0 -20px; padding: 0; overflow-y: auto; flex: 1; }
#list li > button { width: 100%; display: grid; grid-template-columns: 2.2em 1fr auto; align-items: center; gap: 0 12px; padding: 12px 20px; text-align: start; }
#list li > button:active { background: var(--paper); }
#list .no { color: var(--muted); font-variant-numeric: tabular-nums; text-align: end; }
#list .nm { font-weight: 600; }
#list .meta { color: var(--muted); font-size: 14px; }
#list .ar { font: 22px/1.4 LPMQQ2, serif; color: var(--muted); grid-row: span 2; }
#list .bar { grid-column: 2 / 4; height: 3px; border-radius: 2px; background: var(--line); margin-top: 8px; overflow: hidden; }
#list .bar i { display: block; height: 100%; background: var(--terra); }
#list .done .nm::after { content: " ✓"; color: var(--terra); }
#list .here { background: color-mix(in srgb, var(--terra) 9%, transparent); }
#list li.mk { display: flex; align-items: center; }
#list li.mk > button:first-child { flex: 1; }
#list .del { width: 48px; height: 48px; color: var(--muted); font-size: 20px; flex: none; margin-right: 8px; }
/* usap baris surah = pilih ayat: isian gelap mengikuti jari, nomor ayat di kiri nomor surah */
#list li[data-n] { position: relative; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
#list li[data-n]::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--f, 0) * 100%); pointer-events: none;
  background: color-mix(in srgb, var(--ink) 12%, transparent); opacity: 0; transition: opacity .25s;
}
#list li.scrub::before { opacity: 1; transition: none; }
#list li[data-n] > button { transition: padding-left .15s; }
#list li.scrub > button { padding-left: 64px; }  /* buka ruang label di kiri nomor surah, isi tidak tertutup */
#list .ayn {
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 48px; padding: 4px 0; border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; line-height: 1.1; pointer-events: none;
  background: var(--ink); color: var(--paper); font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .12s;
}
#list .ayn b { font-size: 20px; font-weight: 600; }
#list .ayn small { font-size: 11px; opacity: .75; }
#list li.scrub .ayn { opacity: 1; }
#list .sec { padding: 14px 20px 4px; color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: .04em; }
#list li.kr > button { grid-template-columns: 1fr; }
#list .empty { padding: 32px 20px; color: var(--muted); text-align: center; }
/* folder */
#list .fi { justify-self: center; }
#list .fi.dia { width: 8px; height: 8px; }
#list li.fhead { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; padding: 4px 20px 10px; border-bottom: 1px solid var(--line); }
#list li.fhead > button { width: auto; display: inline-flex; padding: 10px 0; min-height: 44px; align-items: center; color: var(--muted); font-size: 15px; }
#list li.fhead > button.back { color: var(--terra); }
#list li.fhead h3, #list li.fhead input { flex: 1 0 100%; order: 1; margin: 0; font-size: 20px; font-weight: 600; }
#list li.fhead input, .nf input { font: inherit; color: inherit; padding: 8px 12px; border: 1px solid var(--ctl); border-radius: 10px; background: var(--paper); }
#list li.fhead .rm[data-arm] { color: var(--darurat); }
.nf { display: flex; gap: 8px; padding: 12px 20px; }
.pick .nf { padding: 12px 0 0; }
.nf input { flex: 1; min-width: 0; font-size: 16px; }
.nf input:focus, #list li.fhead input:focus { outline: none; border-color: var(--terra); }
#list li.nf > button, .nf button { width: auto; display: block; min-height: 44px; padding: 0 16px; border-radius: 10px; background: var(--terra); color: var(--raise); font-weight: 600; }
.pick { list-style: none; margin: 0; padding: 0; }
.pick li:not(.nf) > button { width: 100%; display: flex; align-items: center; gap: 14px; padding: 12px 2px; min-height: 48px; text-align: start; }
.pick li > button span:first-of-type { flex: 1; }
.pick .ck { color: var(--terra); font-weight: 600; }
#toast {
  inset: auto; margin: 0; border: 1px solid var(--line);
  position: fixed; z-index: 6; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 122px); transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px; max-width: calc(100% - 32px); padding: 10px 10px 10px 16px; border-radius: 999px;
  background: var(--raise); color: var(--ink); font-size: 15px; box-shadow: 0 6px 24px rgb(43 38 34 / .12); animation: tipIn .16s ease-out; white-space: nowrap;
}
#toast:not(:popover-open) { display: none; }  /* author display:flex mengalahkan aturan UA popover */
#toast button { min-height: 44px; margin-block: -5px; padding: 6px 12px; border-radius: 999px; color: var(--terra); font-weight: 600; }
#toast b { font-weight: 600; }
/* chip mode bookmark di header */
#ctx { display: flex; align-items: center; min-width: 0; max-width: 46%; height: 32px; border: 1px solid var(--line); border-radius: 999px; background: var(--raise); font-size: 13px; color: var(--ink); }
#ctx button { position: relative; display: flex; align-items: center; height: 100%; }
#ctx button::after { content: ""; position: absolute; inset: -6px 0; }  /* area sentuh 44 px, chip tetap 32 */
#ctx .cn { gap: 7px; min-width: 0; padding: 0 4px 0 10px; }
#ctx .cx { justify-content: center; width: 36px; flex: none; }
#ctx .cx::after { inset: -6px -4px; }
#ctx[hidden] { display: none; }
#ctx span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
#ctx em { font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }
#ctx .cx { color: var(--muted); }
.w.out { color: var(--readInk); }
#list .note { padding: 4px 20px 12px; color: var(--muted); font-size: 14px; }

#trHead { display: flex; gap: 10px; align-items: baseline; }
#trHead small { color: var(--muted); font-weight: 400; font-size: 14px; }
.ayTr { margin: 0 0 16px; font-size: 17px; line-height: 1.65; }
.ayTr b { color: var(--terra); font-variant-numeric: tabular-nums; margin-inline-end: 6px; }
.ayTr sup { color: var(--terra); font-size: .7em; }
.ayTr details { margin-top: 6px; font-size: 14px; color: var(--muted); }
.ayTr summary { cursor: pointer; padding-block: 10px; margin-block: -10px; }  /* area sentuh lebih tinggi, tata letak tetap */
.ayTr details p { margin: 6px 0 0; }

.row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; gap: 12px; }
.step { display: flex; align-items: center; gap: 4px; }
.step button { width: 44px; height: 44px; border-radius: 22px; border: 1px solid var(--ctl); font-size: 20px; }
.step output { min-width: 2.5em; text-align: center; font-variant-numeric: tabular-nums; }
.seg { display: flex; border: 1px solid var(--ctl); border-radius: 10px; padding: 2px; }
.seg button { min-height: 44px; padding: 8px 12px; border-radius: 8px; font-size: 14px; color: var(--muted); }
.seg button[aria-pressed="true"] { background: var(--paper); color: var(--ink); font-weight: 600; }
.cta { display: block; text-align: center; margin-top: 16px; padding: 13px; border-radius: 12px; background: var(--terra); color: var(--raise); text-decoration: none; font-weight: 600; }

/* Mahla accent: mark (logo tanpa tulisan) sebagai mask agar warnanya ikut token; diamond = tanda baca, bukan ornamen */
.mark { display: block; width: 37px; height: 17px; background: var(--terra); -webkit-mask: url(img/mark.png) center/contain no-repeat; mask: url(img/mark.png) center/contain no-repeat; }
#bottom .logo { justify-content: center; min-width: 56px; min-height: 48px; }
#bottom .logo .mark { width: 44px; height: 20px; }
#progress i::after { content: ""; position: absolute; right: -3px; top: -2px; width: 6px; height: 6px; border-radius: 1px; background: var(--terra); transform: rotate(45deg); }
.dia { display: inline-block; width: 7px; height: 7px; border-radius: 1.5px; background: var(--terra); transform: rotate(45deg); flex: none; }
.wave { display: block; width: 100%; height: 12px; margin: 14px 0 6px; fill: none; stroke: var(--terra); stroke-width: 1.2; opacity: .5; vector-effect: non-scaling-stroke; }
.corner { position: absolute; top: 0; right: 0; width: 140px; height: 105px; fill: var(--terraSoft); stroke: none; opacity: .7; pointer-events: none; }
#menu > :not(.corner) { position: relative; }
#menu .brand:focus { outline: none; }  /* fokus awal sheet (autofocus), bukan kontrol */
.brand { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 600; margin: 0 0 18px; }
.links { display: flex; flex-direction: column; }
.links a { display: flex; align-items: center; gap: 14px; padding: 12px 2px; min-height: 44px; color: var(--ink); text-decoration: none; }
.links a[hidden] { display: none; }

/* halaman Tentang / Privasi */
.doc { position: relative; isolation: isolate; max-width: 34rem; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 20px) 20px calc(env(safe-area-inset-bottom) + 40px); overflow: hidden; }
.doc .corner { width: 200px; height: 150px; z-index: -1; }
.doc .back { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); text-decoration: none; font-size: 15px; }
.doc .brand { margin: 18px 0 6px; }
.doc h1 { font-size: 30px; line-height: 1.2; font-weight: 600; margin: 0 0 8px; }
.doc h2 { font-size: 17px; font-weight: 600; margin: 0 0 6px; }
.doc p, .doc li { font-size: 16px; line-height: 1.65; }
.doc a { color: var(--terra); }
.doc .cta { color: var(--raise); margin-top: 20px; }
.doc .cta.alt { background: none; color: var(--terra); box-shadow: inset 0 0 0 1.5px var(--terra); margin-top: 0; }
.doc .gap { margin-top: 28px; }
.doc .closing { text-align: center; font-size: 19px; line-height: 1.6; margin: 20px 8px 14px; text-wrap: balance; }
.doc .closing .dia { display: block; width: 9px; height: 9px; margin: 0 auto 14px; }
.doc ul { padding-left: 1.2em; }
.doc .lead { color: var(--muted); font-size: 17px; margin: 0; }
.doc .lead.intro { color: var(--ink); }
.doc .foot { font-size: 15px; color: var(--muted); }
.callout { position: relative; margin: 20px 0; padding: 16px 40px 16px 18px; border-radius: 14px; background: color-mix(in srgb, var(--terraSoft) 55%, var(--paper)); }
.callout .dia { position: absolute; top: 18px; right: 18px; width: 9px; height: 9px; }
.callout p { margin: 0; }
/* ilustrasi panduan: garis tipis, hanya sentuhan jari dan diamond yang terracotta */
.doc figure { margin: 18px 0 8px; padding: 16px 12px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--raise); }
.doc figcaption { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.il { display: block; width: 100%; height: auto; max-height: 220px; font-family: inherit; stroke: none; }
.il .fr { fill: var(--paper); stroke: var(--muted); stroke-width: 1.2; }
.il .sh { fill: var(--paper); stroke: var(--line); stroke-width: 1.2; }
.il .tx { fill: none; stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; opacity: .45; }
.il .tx.strong { opacity: .85; }
.il .tx.thin { stroke-width: 2; opacity: .4; }
.il .tx.dim { stroke: var(--readInk); opacity: .7; }
.il .dv { stroke: var(--muted); stroke-dasharray: 2 4; opacity: .7; }
.il .trk { stroke: var(--line); stroke-width: 2; }
.il .prg, .il .brk { stroke: var(--terra); stroke-width: 2; stroke-linecap: round; }
.il .wv { fill: none; stroke: var(--terra); stroke-width: 1.5; opacity: .6; }
.il .grab { stroke: var(--muted); stroke-width: 3; stroke-linecap: round; opacity: .5; }
.il .tch { fill: var(--terra); }
.il .halo { fill: var(--terra); opacity: .2; }
.il .trail { fill: none; stroke: var(--terra); stroke-width: 1.5; stroke-dasharray: 3 4; stroke-linecap: round; stroke-linejoin: round; }
.il .arw { fill: none; stroke: var(--terra); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.il .fill { fill: var(--ink); opacity: .08; }
.il .bub { fill: var(--ink); }
.il .bubt { fill: var(--paper); font-size: 13px; font-weight: 600; }
.il .chip { fill: color-mix(in srgb, var(--terraSoft) 55%, var(--paper)); }
.il .lb { fill: var(--muted); font-size: 12px; }
.il .lb.strong { fill: var(--terra); font-weight: 600; }
.il .nm, .il .ct { fill: var(--ink); font-size: 14px; font-weight: 600; }
.il .ct { font-weight: 400; }
.saran fieldset { border: 0; padding: 0; margin: 24px 0; }
.saran legend, .saran .free > span { display: block; font-size: 17px; font-weight: 600; line-height: 1.4; margin-bottom: 12px; padding: 0; }
.lik { display: flex; gap: 8px; }
.lik label { flex: 1; }
.lik input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lik span { display: flex; align-items: center; justify-content: center; min-height: 48px; border: 1px solid var(--ctl); border-radius: 12px; background: var(--raise); color: var(--muted); cursor: pointer; }
.lik input:checked + span { border-color: var(--terra); background: color-mix(in srgb, var(--terraSoft) 55%, var(--paper)); color: var(--ink); font-weight: 600; }
.lik input:focus-visible + span { outline: 2px solid var(--terra); outline-offset: 2px; }
.ends { display: flex; justify-content: space-between; margin-top: 6px; font-size: 13px; color: var(--muted); }
.saran textarea { display: block; width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; color: inherit; padding: 10px 12px; border: 1px solid var(--ctl); border-radius: 10px; background: var(--raise); resize: vertical; }
.saran textarea:focus { outline: none; border-color: var(--terra); }
.saran button[type=submit] { margin-top: 20px; min-height: 48px; width: 100%; border-radius: 12px; background: var(--terra); color: var(--raise); font-weight: 600; }
.saran .free small { font-size: 15px; font-weight: 400; color: var(--muted); }
.saran textarea::placeholder { color: var(--muted); opacity: .8; }
.saran .note { min-height: 1.4em; font-size: 15px; color: var(--muted); }

#tip {
  position: fixed; z-index: 10; max-width: 240px; padding: 10px 12px; border-radius: 10px;
  background: var(--ink); color: var(--paper); font-size: 14px; line-height: 1.4;
  box-shadow: 0 6px 20px rgb(0 0 0 / .18); animation: tipIn .14s ease-out;
}
#tip b { display: block; font-weight: 600; }
#tip .g { font: 22px/1 LPMQQ2, serif; margin-inline-end: 6px; }
@keyframes tipIn { from { opacity: 0; transform: translateY(4px); } }

/* transisi antarlayar: geser tipis searah navigasi */
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-old(page) { animation: pgOut .16s ease-in both; }
::view-transition-new(page) { animation: pgIn .2s ease-out both; }
@keyframes pgOut { to { opacity: 0; transform: translateX(calc(var(--dir, 1) * -28px)); } }
@keyframes pgIn { from { opacity: 0; transform: translateX(calc(var(--dir, 1) * 28px)); } }
:root[data-dir="-1"] { --dir: -1; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(page), ::view-transition-new(page) { animation: none; }
  .chrome, .sheet, #progress i { transition: none; }
  #tip, #toast, .pull .d { animation: none; }
  .sc, #page.flow { transition: none; }
}
.sheet:focus, .sheet:focus-visible { outline: none; }

/* landscape HP (tinggi pendek): kolom baca lebar agar satu layar cukup 1–3 baris, chrome tipis, notch kiri/kanan,
   terjemah jadi panel samping kanan (Arab dan arti berdampingan), sheet setinggi layar */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --lh: 2.1; --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px); }  /* var: bisa disimulasikan saat tes */
  #reader { max-width: 60rem; }
  #page.flow { --ft: calc(50cqh - 1.5 * var(--L)); }
  #page:not(.flow) { -webkit-mask-image: linear-gradient(#000 calc(100% - 58px - env(safe-area-inset-bottom)), transparent calc(100% - 50px - env(safe-area-inset-bottom))); mask-image: linear-gradient(#000 calc(100% - 58px - env(safe-area-inset-bottom)), transparent calc(100% - 50px - env(safe-area-inset-bottom))); }  /* baris yang tersembul di atas menu bawah memudar */
  #tr .grab { display: none; }
  #page { padding: 44px max(20px, var(--sar)) calc(env(safe-area-inset-bottom) + 50px) max(20px, var(--sal)); }
  #top { padding: env(safe-area-inset-top) max(8px, var(--sar)) 0 max(12px, var(--sal)); }
  #bottom { padding: 2px max(8px, var(--sar)) calc(env(safe-area-inset-bottom) + 2px) max(8px, var(--sal)); }
  #bottom button { flex-direction: row; gap: 8px; min-height: 44px; }
  #bottom .logo { min-height: 44px; }

  #tr { inset: 0 0 0 auto; margin: 0; width: min(42vw, 26rem); max-width: none; height: 100dvh; max-height: none;
        border-radius: 18px 0 0 18px; padding: calc(env(safe-area-inset-top) + 8px) max(20px, var(--sar)) calc(env(safe-area-inset-bottom) + 16px) 20px; }
  html.tr #reader { bottom: 0; right: min(42vw, 26rem); margin: 0; max-width: none; }
  html.tr #bottom { visibility: visible; }

  .sheet { max-width: 44rem; max-height: calc(100dvh - 12px); }
  .sheet.tall { height: calc(100dvh - 12px); }
  #list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: max-content; align-content: start; }
  #list > li:not([data-n], .fo) { grid-column: 1 / -1; }
  #menu[open] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; grid-auto-flow: row dense; align-content: start; }
  #menu > .grab { grid-column: 1 / -1; }
  #menu > .brand, #menu > h2, #menu > .row { grid-column: 1; }
  #menu > .links, #menu > .src { grid-column: 2; }
  #menu > .brand ~ .links { margin-top: 46px; }  /* sejajar dengan "Tampilan" di kolom kiri */
  #menu > .wave { display: none; }

  #toast { top: calc(env(safe-area-inset-top) + 4px); bottom: auto; }
}

/* laptop/desktop (mouse + layar lebar; sama dengan DESK di app.js): kolom tetap satu, huruf lebih besar (fs-desk),
   terjemah jadi panel kanan, sheet jadi dialog di tengah, margin = zona klik, posisi juz + catatan "buka di HP" di margin kiri */
#side, .keys { display: none; }
kbd { font: 600 12px/1 "Atkinson Hyperlegible Next", system-ui, sans-serif; padding: 2px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; background: var(--paper); color: var(--ink); }
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  #reader { max-width: 36rem; }
  .keys { display: block; line-height: 2; }

  #tr { inset: 0 0 0 auto; margin: 0; width: min(34vw, 28rem); max-width: none; height: 100dvh; max-height: none;
        border-radius: 18px 0 0 18px; padding: 16px 24px; box-shadow: -8px 0 32px rgb(43 38 34 / .06); }
  #tr .grab { display: none; }
  html.tr #reader { right: min(34vw, 28rem); bottom: 0; }
  html.tr #bottom { visibility: visible; }

  .sheet:not(#tr) { inset: 0; margin: auto; border-radius: 18px; max-height: min(80dvh, 44rem); padding-bottom: 16px; opacity: 0; transform: scale(.98);
    box-shadow: 0 12px 48px rgb(43 38 34 / .14); transition: transform .18s ease-out, opacity .18s ease-out, overlay .18s allow-discrete, display .18s allow-discrete; }
  .sheet:not(#tr)[open] { opacity: 1; transform: none; }
  @starting-style { .sheet:not(#tr)[open] { opacity: 0; transform: scale(.98); } }
  .sheet.tall { height: min(80dvh, 44rem); }
  .sheet:not(#tr) .grab { visibility: hidden; margin-bottom: 4px; }

  /* margin = zona klik: setengah diamond (chevron) terra muncul saat kursor di atasnya */
  body::before, body::after { content: ""; position: fixed; top: 50%; width: 14px; height: 14px; border: solid var(--terra); opacity: 0; transition: opacity .2s; pointer-events: none; }
  body::before { left: calc((100vw - 36rem) / 4); border-width: 0 0 1.5px 1.5px; transform: translate(-50%, -50%) rotate(45deg); }
  body::after { right: calc((100vw - 36rem) / 4); border-width: 1.5px 1.5px 0 0; transform: translate(50%, -50%) rotate(45deg); }
  html.tr body::after { right: calc(min(34vw, 28rem) + (100vw - min(34vw, 28rem) - 36rem) / 4); }
  html[data-zone="prev"] body::before, html[data-zone="next"] body::after { opacity: .8; }
  html[data-zone="prev"] body, html[data-zone="next"] body { cursor: pointer; }

  #side { display: block; position: fixed; left: 32px; bottom: 32px; width: 200px; color: var(--muted); font-size: 14px; line-height: 1.5; }
  #side p { margin: 0; }
  #side .wave { margin: 14px 0; }
  #juz b { display: block; color: var(--ink); font-size: 17px; font-weight: 600; }
  #juz i { display: block; height: 3px; margin-top: 8px; border-radius: 2px; background: var(--terra); opacity: .8; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) and (max-width: 1199px) { #side { display: none; } }
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) and (max-width: 1499px) { html.tr #side { display: none; } }
@media (prefers-reduced-motion: reduce) { body::before, body::after { transition: none; } }