/* css/app.css - Gaya utama Fadzkuruuni
   Urutan: 1 token · 2 dasar · 3 kerangka (nav & view) · 4 tipografi · 5 komponen · 6 halaman khusus · 7 responsif · 8 aksesibilitas */

/* 1. Token warna, bentuk, dan font */
:root {
  --bg: #ffffff;
  --card: #ffffff;
  --ink: #1d2b25;
  --bc: #000000;
  --mut: #5f6d66;
  --line: #e5e7e5;
  --g: #24584a;
  --g2: #3a7363;
  --gs: #e7eeea;
  --fill: #f0f2f1;
  --on: #fff;
  --rad: 10px;
  --rl: 14px;
  --shadow: none;
  --ar: 'Times New Roman', Times, serif;
  --ui: 'Times New Roman', Times, serif;
  --hero: var(--g);
}
/* Gelap: hitam pekat seperti Instagram */
[data-theme='dark'] {
  --bg: #000000;
  --card: #000000;
  --fill: #1c1c1c;
  --ink: #f5f5f5;
  --bc: #ffffff;
  --mut: #a8a8a8;
  --line: #262626;
  --g: #7fb5a2;
  --g2: #9fcdbb;
  --gs: #1d2a26;
  --on: #06140f;
  --hero: color-mix(in srgb, var(--g) 26%, #000000);
}
/* Tema Biru: terang dengan latar kebiruan; aksen biru dipasang lewat accent() di js/core/state.js */
[data-theme='blue'] {
  --bg: #eef4fb;
  --card: #f7faff;
  --fill: #e2ebf6;
  --ink: #12263d;
  --bc: #000000;
  --mut: #55687e;
  --line: #d5e0ed;
  --gs: #dce8f6;
  --on: #fff;
}

/* 2. Dasar */
* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  overflow: hidden;
}
html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}
body {
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 var(--ui);
  -webkit-tap-highlight-color: transparent;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
img {
  max-width: 100%;
}
audio {
  width: 100%;
  margin: 6px 0;
}
:focus-visible {
  outline: 2px solid var(--g2);
  outline-offset: 2px;
}

/* 3. Kerangka: menu bawah (ponsel) dan sisi (desktop), area isi */
/* Ukuran mengikuti tepi layar (inset:0), bukan 100vh/100dvh: di aplikasi terpasang Android, tinggi vh kadang lebih
   besar dari layar sehingga menu bawah terdorong keluar */
#app {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
}
#view {
  flex: 1;
  min-width: 0;
  min-height: 0;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 16px max(16px, env(safe-area-inset-right)) 24px max(16px, env(safe-area-inset-left));
  overflow-y: auto;
  overflow-x: hidden;
  word-break: break-word;
  outline: 0;
  view-transition-name: page;
  overscroll-behavior-y: contain;
}
::view-transition-old(page),
::view-transition-new(page) {
  animation-duration: 0.36s;
  animation-timing-function: cubic-bezier(0.22, 0.8, 0.3, 1);
  animation-fill-mode: both;
}
::view-transition-old(page) {
  animation-name: page-out;
}
::view-transition-new(page) {
  animation-name: page-in;
}
@keyframes page-out {
  to {
    opacity: 0;
    transform: scale(0.985);
  }
}
@keyframes page-in {
  from {
    opacity: 0;
  }
}

#nav {
  order: 2;
  flex: none;
  display: flex;
  background: var(--card);
  border-top: 1px solid var(--line);
  padding: 8px 4px calc(6px + env(safe-area-inset-bottom));
  backdrop-filter: blur(10px);
}
#nav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 0;
  font-size: 11px;
  color: var(--mut);
  border-radius: var(--rad);
}
#nav a.on {
  color: var(--g);
  font-weight: 600;
}
#nav a.on span {
  color: var(--g);
}
#nav a .ic {
  width: 24px;
  height: 24px;
}
#nav a.on .ic {
  stroke-width: 2.4;
}
#nav .brand {
  display: none;
  align-items: center;
}
#nav .brand img {
  border-radius: 8px;
  vertical-align: middle;
  margin-right: 6px;
}

/* 4. Tipografi */
h1 {
  font-size: 22px;
  margin: 4px 0 12px;
}
h2 {
  font-size: 15px;
  margin: 24px 0 10px;
  color: var(--mut);
  font-weight: 600;
}
label {
  display: block;
  font-size: 13px;
  color: var(--mut);
  margin: 0 0 3px;
}
.mut,
.row small {
  color: var(--mut);
  font-size: 13px;
}
.lt {
  color: var(--tc, var(--bc, var(--ink)));
  font-style: italic;
  margin: 6px 0 0;
  font-size: var(--lt, 15px);
}
.tr {
  font-size: var(--tr, 14px);
  color: var(--tc, var(--bc, inherit));
}
.sec {
  font-size: 16px;
  margin: 28px 0 10px;
  padding-bottom: 8px;
  color: var(--g);
  border-bottom: 1px solid var(--line);
}
.sub {
  font-size: 13px;
  margin: 14px 0 2px;
  color: var(--mut);
}
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 2px 4px 10px;
  font-size: 14px;
}
.top b {
  color: var(--g);
}
.bn {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--g);
}
.bn img {
  border-radius: 7px;
}
.mut2 {
  opacity: 0.85;
  margin-bottom: 6px;
}
.gh {
  font-size: 22px;
  font-weight: 700;
}
.gr {
  margin: 0 0 10px;
}
.gr .gh {
  color: var(--ink);
}
.gr small {
  color: var(--mut);
}

/* 5. Komponen */

/* Bar judul halaman */
.bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.bar h1 {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bar a {
  font-size: 28px;
  line-height: 1;
  color: var(--g);
}
.bk {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--fill);
  border: 0;
  color: var(--g) !important;
  font-size: 0 !important;
}
.ib {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 0;
  background: var(--fill);
  color: var(--g);
  cursor: pointer;
}
.ib2 {
  border: 0;
  background: 0;
  font-size: 20px;
  line-height: 1;
  color: inherit;
  cursor: pointer;
}
.rh {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -16px -16px 8px;
  padding: 10px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.rt {
  flex: 1;
  min-width: 0;
}
.rt b {
  display: block;
}
.rt small {
  color: var(--mut);
}

/* Ikon */
.ic {
  flex: none;
  vertical-align: -4px;
}

/* Kartu, banner, dan pencarian */
.card {
  background: var(--card);
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 16px;
}
.card + .card {
  margin-top: 0;
}
.hero {
  position: relative;
  overflow: hidden;
  background: var(--hero);
  color: #fff;
  border-radius: 12px;
  text-align: center;
  padding: 18px 14px;
  box-shadow: var(--shadow);
}
.hero > * {
  position: relative;
}
.hero small {
  opacity: 0.8;
}
.hero .big {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.1;
  margin: 2px 0;
}
.hero .big small {
  font-size: 14px;
  opacity: 0.85;
}
.hero.jh .big {
  font-size: 34px;
}
.hero .ar {
  font: 26px var(--ar);
  margin: 2px 0 8px;
}
.hero .sk {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 46px;
}
.hero .qt {
  color: #fff;
}
.hero .qt span {
  opacity: 1;
  color: #fff;
}
.srch {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 6px;
  padding: 0 14px;
  background: var(--fill);
  border: 0;
  border-radius: 99px;
  color: var(--mut);
}
.srch input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: 0;
  padding: 12px 0;
  outline: 0;
}
.chip {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 4px;
  background: var(--gs);
  color: var(--g);
  font-size: 12px;
  font-weight: 600;
}
.chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 0 -16px 12px;
  padding: 0 16px 4px;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar {
  display: none;
}
.chip2 {
  flex: none;
  padding: 8px 14px;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: var(--card);
  font-size: 13px;
  font-weight: 600;
  color: var(--mut);
}
.chip2.on {
  background: var(--g);
  border-color: var(--g);
  color: var(--on);
}

/* Kartu geser (carousel) */
.car {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin: 14px -16px 0;
  padding: 0 16px;
  scrollbar-width: none;
}
.car::-webkit-scrollbar {
  display: none;
}
.sl {
  flex: 0 0 86%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 116px;
  padding: 16px;
  border-radius: var(--rl);
  background: var(--hero);
  color: #fff;
  box-shadow: var(--shadow);
}
.sl-i {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 6px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.14);
}
.sl b {
  font-size: 18px;
}
.sl span {
  opacity: 0.85;
  font-size: 13px;
}
.s2,
.s3 {
  background: var(--gs);
  color: var(--g);
}
.s2 .sl-i,
.s3 .sl-i {
  background: var(--card);
}

/* Grid pintasan */
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.grid a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 4px;
  text-align: center;
  font-size: 12px;
  background: transparent;
  border: 0;
  border-radius: var(--rad);
}
.grid a b {
  font-size: 24px;
  font-weight: 400;
}
.g2 {
  margin-top: 14px;
  grid-template-columns: repeat(4, 1fr);
}
.g2 a {
  padding: 6px 0;
  background: 0;
  border: 0;
  font-size: 11.5px;
}
.g2 a b {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--fill);
  border: 0;
  font-size: 24px;
}
.g2 a b svg {
  color: var(--g);
}

/* Daftar, baris, dan pengaturan */
.list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.list > .row {
  min-height: 64px;
  gap: 14px;
  padding: 12px 16px;
  background: var(--card);
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}
.list > .row:last-child {
  border-bottom: 0;
}
.list > .row:active {
  background: var(--fill);
}
#ll.list {
  gap: 6px;
}
#ll.list > .row {
  min-height: 46px;
  padding: 10px 14px;
}
.list.sg {
  gap: 0;
  background: var(--card);
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.list.sg > .srw {
  border-width: 0 0 1px;
  border-radius: 0;
}
.list.sg > .srw:last-child {
  border-bottom: 0;
}

.row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.row .t {
  flex: 1;
  min-width: 0;
}
.row .t b {
  font-weight: 600;
}
.row .t small {
  display: block;
  margin-top: 2px;
  line-height: 1.4;
}
.row .ar {
  font: 24px var(--ar);
}
.row .num {
  flex: none;
  margin: 0;
}
.row > svg:last-child {
  color: var(--mut);
}
.row.nx {
  background: var(--gs);
}
.row:active,
.srw:active {
  background: var(--gs);
}

.srw {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  color: inherit;
}
.srw .t {
  flex: 1;
  min-width: 0;
}
.srw input[type='range'] {
  width: 110px;
  accent-color: var(--g);
}
.sl2 {
  width: auto;
  margin: 0;
  padding: 6px 8px;
}
.si {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gs);
  color: var(--g);
}
.sw {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.sw input[type='checkbox'] {
  width: 44px;
  height: 24px;
  accent-color: var(--g);
}
.back {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--g);
}

/* Nomor urut */
.num {
  display: grid;
  place-items: center;
  min-width: 38px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--gs);
  color: var(--g);
  font-size: 13px;
  font-weight: 600;
}

/* Tab dan segmen */
.tabs {
  display: flex;
  gap: 3px;
  margin: 0 0 16px;
  padding: 3px;
  background: var(--fill);
  border: 0;
  border-radius: 10px;
  position: static;
}
.tabs button {
  flex: 1;
  padding: 11px 8px;
  background: 0;
  border: 0;
  border-radius: 6px;
  color: var(--mut);
  cursor: pointer;
  transition:
    background-color 0.28s cubic-bezier(0.22, 0.8, 0.3, 1),
    color 0.28s cubic-bezier(0.22, 0.8, 0.3, 1);
}
.tabs button.on {
  background: var(--g);
  color: var(--on);
  font-weight: 600;
}
.seg {
  display: flex;
  gap: 3px;
  padding: 3px;
  background: var(--fill);
  border: 0;
  border-radius: 10px;
}
.seg button {
  flex: 1;
  padding: 10px 6px;
  border: 0;
  border-radius: 9px;
  background: 0;
  color: var(--mut);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.seg button.on {
  background: var(--g);
  color: var(--on);
}
.segw {
  padding: 0 14px 14px;
}

/* Tombol dan isian */
.btn {
  padding: 10px 16px;
  background: var(--g);
  color: var(--on);
  border: 0;
  border-radius: var(--rad);
  font-weight: 600;
  cursor: pointer;
  transition:
    transform 0.1s,
    opacity 0.15s;
}
.btn:active {
  transform: scale(0.97);
}
.btn.s {
  background: var(--gs);
  color: var(--g);
}
.sb {
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: var(--fill);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.1s;
}
.sb:active {
  transform: scale(0.97);
}
.sb.pri {
  background: var(--g);
  border-color: var(--g);
  color: var(--on);
}
.sb.dng {
  color: #b3382a;
}
[data-theme='dark'] .sb.dng {
  color: #f19a8c;
}
.act {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.stp {
  display: flex;
  align-items: center;
  gap: 10px;
}
.stp button {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--g);
  font-size: 18px;
  cursor: pointer;
}
.stp b {
  min-width: 24px;
  text-align: center;
}
.zb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
}
.zb span {
  flex: 1;
  font-size: 13px;
}
.zb button {
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--g);
  font-weight: 700;
  cursor: pointer;
}
.zb b {
  min-width: 28px;
  text-align: center;
}
.tg {
  position: relative;
  flex: none;
  width: 46px;
  height: 26px;
}
.tg input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.tg i {
  position: absolute;
  inset: 0;
  background: var(--line);
  border-radius: 13px;
  transition: background 0.2s;
}
.tg i::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s;
}
.tg input:checked + i {
  background: var(--g);
}
.tg input:checked + i::after {
  transform: translateX(20px);
}
.pm {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  cursor: pointer;
}
.pm .t {
  flex: 1;
  min-width: 0;
}
.pm input {
  width: 18px;
  height: 18px;
  accent-color: var(--g);
}
.in,
select.in {
  width: 100%;
  margin-bottom: 10px;
  padding: 11px 14px;
  background: var(--fill);
  border: 0;
  border-radius: 10px;
}
textarea.in {
  min-height: 110px;
  resize: vertical;
}
.qa {
  display: flex;
  align-items: center;
  gap: 8px;
}
.qa .in {
  flex: 1;
  min-width: 0;
  margin: 0;
}
.qrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.qrow .in {
  flex: 1;
  min-width: 140px;
  margin: 0;
}
.qrow .act {
  margin: 0;
}
.qtx2 {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  word-break: break-word;
}
.ph {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 12px;
  border: 1.5px dashed var(--line);
  border-radius: 10px;
  color: var(--g);
  cursor: pointer;
}
#rp {
  max-height: 180px;
  margin-bottom: 8px;
  border-radius: 10px;
}
.lc {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lc .t {
  flex: 1;
  min-width: 0;
}

/* Ukuran teks & catatan */
.note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: #f6e7c1;
  color: #5b4410;
  border-radius: 12px;
  font-size: 13px;
}
.note a {
  font-weight: 600;
  text-decoration: underline;
}
.note span {
  flex: 1;
}
[data-theme='dark'] .note {
  background: #3d3010;
  color: #f0cf7a;
}

/* Lembar bawah, dialog, dan notifikasi singkat */
.back-d {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: flex-end;
  background: rgba(0, 0, 0, 0.45);
}
.sheet {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  background: var(--card);
  border-radius: 14px 14px 0 0;
  animation: up 0.2s ease;
}
@keyframes up {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
}
.dlg {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.5);
}
.dlg > div {
  width: 100%;
  max-width: 340px;
  padding: 24px 20px;
  background: var(--card);
  border-radius: 16px;
  text-align: center;
}
.dlg .ok {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gs);
  color: var(--g);
}
#toast {
  position: fixed;
  left: 50%;
  bottom: 90px;
  z-index: 9;
  transform: translate(-50%, 20px);
  padding: 10px 16px;
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--rad);
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s;
}
#toast.on {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Pemutar audio mengambang */
.pl {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(64px + env(safe-area-inset-bottom));
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--card);
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}
.pl .ib {
  border: 0;
  border-radius: 50%;
  background: var(--g);
  color: var(--on);
}
.pl small {
  font-size: 11px;
  white-space: nowrap;
}
.pb {
  flex: 1;
  height: 4px;
  background: var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.pb i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--g);
}

/* Tombol tasbih mengambang */
#ftb {
  position: fixed;
  right: 14px;
  bottom: calc(76px + env(safe-area-inset-bottom));
  z-index: 9;
  display: flex;
}
#ftb[hidden] {
  display: none;
}
#ftb {
  touch-action: none;
  user-select: none;
  cursor: grab;
}
#ftb:active {
  cursor: grabbing;
}
/* Scrollbar tipis dan modern */
html,
#view {
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--mut);
  background-clip: padding-box;
}
/* Tombol hitung bulat penuh dengan tombol pengaturan kecil di sudut */

/* Halaman khusus: tasbih, kiblat, zakat, kalender, kitab, tahlil */
.needle {
  position: relative;
  display: grid;
  place-items: center;
  width: 220px;
  height: 220px;
  margin: 16px auto;
  border: 2px solid var(--line);
  border-radius: 50%;
  transition: transform 0.15s;
}
.needle i {
  position: absolute;
  top: 8px;
  width: 0;
  height: 0;
  border: 12px solid transparent;
  border-top: 0;
  border-bottom: 90px solid var(--g);
}
.cnt {
  display: block;
  width: 200px;
  height: 200px;
  margin: 20px auto;
  border: 0;
  border-radius: 50%;
  background: var(--g);
  color: var(--on);
  font-size: 54px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  transition: transform 0.08s;
}
.cnt:active {
  transform: scale(0.96);
}
.res {
  margin-top: 12px;
  padding: 14px;
  background: var(--fill);
  border-radius: 12px;
}
.res b {
  font-size: 22px;
  color: var(--g);
}
.pt {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  margin-top: 12px;
  text-align: center;
  font-size: 12px;
}
.pt div {
  min-width: 0;
  padding: 6px 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--rad);
}
.pt div.n {
  background: #fff;
  color: var(--g);
}
[data-theme='dark'] .pt div.n {
  color: #123a30;
}
.pt b {
  display: block;
  font-size: 14px;
}

.cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  text-align: center;
  border: 1px solid var(--line);
}
.cal .h {
  position: relative;
  min-height: 0;
  padding: 6px 0;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--mut);
  font-size: 12px;
}
.cal .sun {
  color: #e5604d;
}
.cal .fri {
  color: var(--g);
}
.cal button.cd {
  position: relative;
  min-height: 62px;
  padding: 16px 0 13px;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--card);
  color: inherit;
  font-size: 15px;
  cursor: pointer;
}
.cal button.cd.s {
  background: var(--g);
  color: var(--on);
}
.cal button.cd.s small {
  color: var(--on);
  opacity: 0.85;
}
.cd.t {
  outline: 2px solid var(--g);
  outline-offset: -2px;
}
.cd small {
  display: block;
  font-size: 9px;
  color: var(--mut);
}
.cd .hj {
  position: absolute;
  top: 3px;
  left: 4px;
  font-size: 10px;
}
.cal .ev::after {
  content: '';
  position: absolute;
  bottom: 3px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e5a93a;
}
.cd .dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  display: flex;
  justify-content: center;
  gap: 3px;
}
.dots i,
.leg i {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.dg1 {
  background: #e5a93a;
}
.dg2 {
  background: var(--g);
}
.dg3 {
  background: #e5604d;
}
.leg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--mut);
}
.leg span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.leg .btn {
  margin-left: auto;
}
.mn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  text-align: center;
}
.mn button {
  padding: 0 10px;
  background: 0;
  border: 0;
  color: var(--g);
  font-size: 26px;
  cursor: pointer;
}
.tag {
  display: inline-block;
  margin: 6px 6px 0 0;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
}
.t1 {
  background: #f6e7c1;
  color: #7a5a10;
}
.t2 {
  background: var(--gs);
  color: var(--g);
}
.t3 {
  background: #f8d7d2;
  color: #a3392b;
}
[data-theme='dark'] .t1 {
  background: #4a3b12;
  color: #f0cf7a;
}
[data-theme='dark'] .t3 {
  background: #4a1f1a;
  color: #f2a79d;
}
.bdg {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--gs);
  color: var(--g);
  font-size: 11px;
  font-weight: 600;
}
.bdg.no {
  background: #f8d7d2;
  color: #a3392b;
}
.bdg.mid {
  background: #f6e7c1;
  color: #7a5a10;
}

/* Bilah pembaca kitab: satu baris ramping, menempel rapat ke tepi atas & samping; bersembunyi saat menggulir ke bawah */
.ktb {
  position: sticky;
  top: -16px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -16px -16px 12px;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line);
  transition:
    transform 0.28s cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 0.2s;
}
.ktb.lyg {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
}
.ktb.smb {
  transform: translateY(-100%);
  box-shadow: none;
}
.ktb .bar {
  flex: 1;
  min-width: 0;
  margin: 0;
  gap: 6px;
}
.ktb .bar h1 {
  font-size: 16px;
  font-weight: 700;
}
.ktb .bar .bk {
  width: 34px;
  height: 34px;
}
.ktb .bar .bk .ic {
  width: 20px;
  height: 20px;
}
.ktb .kib {
  display: flex;
  gap: 4px;
}
.ktb .ib {
  width: 34px;
  height: 34px;
  background: transparent;
  color: var(--ink);
}
.ktb .ib:hover {
  background: var(--fill);
}
.ktb .ib.on {
  background: var(--g);
  color: var(--on);
}
.ktb .ktr {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
.ktb .kzg,
.ktb .kgo {
  display: flex;
  align-items: center;
  height: 34px;
  margin: 0;
  padding: 2px;
  background: var(--fill);
  border-radius: 17px;
}
.ktb .kzg .sb {
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 16px;
  color: var(--ink);
}
.ktb .kzg .sb:hover {
  background: var(--card);
}
.ktb .kzg b {
  min-width: 40px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.ktb .kgo {
  gap: 2px;
  padding: 2px 12px 2px 2px;
  font-size: 12px;
}
.ktb .kgo .in {
  width: 44px;
  height: 30px;
  margin: 0;
  padding: 0 4px;
  border: 0;
  border-radius: 15px;
  background: var(--card);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  -moz-appearance: textfield;
}
.ktb .kgo .in:focus {
  outline: 2px solid var(--g);
  outline-offset: 0;
}
.ktb .kgo .in::-webkit-inner-spin-button,
.ktb .kgo .in::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.ktb .kpr {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
}
.ktb .kpr i {
  display: block;
  height: 100%;
  background: var(--g);
  transition: width 0.25s;
}
/* Ponsel: perbesar/perkecil cukup lewat Pengaturan (penggeser ukuran), supaya bilah tetap satu baris */
@media (max-width: 520px) {
  .ktb .kzg {
    display: none;
  }
}
@media (max-width: 420px) {
  .ktb {
    top: -12px;
    margin-top: -12px;
  }
}
@media (min-width: 600px) {
  .ktb {
    top: -20px;
    margin: -20px -24px 14px;
    padding: 8px 20px;
  }
}
/* Layar penuh kitab: tanpa menu, bilah, dan tasbih; satu halaman memenuhi layar, geser kanan/kiri (kanan-ke-kiri)
   untuk pindah halaman */
.kfull #nav,
.kfull #ftb,
.kfull .ktb,
.kfull #kd .pnav {
  display: none;
}
.kfull #view {
  max-width: none;
  overflow: hidden;
}
.kfull #kp {
  position: fixed;
  inset: 0;
  z-index: 15;
  background: var(--bg);
}
.kfull.kgulir #kp {
  overflow: auto;
  overscroll-behavior: contain;
  padding: 8px 0;
}
.kfull:not(.kgulir) .kpi {
  display: contents;
}
.kfull:not(.kgulir) #kp {
  position: fixed;
  inset: 0;
  z-index: 15;
  display: flex;
  direction: rtl;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  background: var(--bg);
  scrollbar-width: none;
}
.kfull #kp::-webkit-scrollbar {
  display: none;
}
.kfull:not(.kgulir) #kp img {
  flex: 0 0 100%;
  width: 100% !important;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: contain;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.kfo {
  display: none;
}
.kfull .kfo {
  position: fixed;
  z-index: 16;
  top: calc(10px + env(safe-area-inset-top));
  left: 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 4px 14px;
  border-radius: 99px;
  background: rgba(20, 24, 22, 0.72);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  transform: translate(-50%, -8px);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.25s,
    transform 0.25s cubic-bezier(0.22, 0.8, 0.3, 1);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.kfull .kfo.on {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.kfo-x {
  order: 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
/* Lembar Pengaturan kitab: kepala dengan tombol tutup, kelompok berlabel, kartu */
.ksh {
  max-height: 88vh;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ksh-h {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--line);
}
.ksh-h > div {
  flex: 1;
  min-width: 0;
}
.ksh-h b {
  display: block;
  font-size: 17px;
  color: var(--ink);
}
.ksh-h small {
  display: block;
  overflow: hidden;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ksh-x {
  flex: none;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--fill);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.ksh-b {
  padding: 4px 16px calc(18px + env(safe-area-inset-bottom));
  overflow-y: auto;
}
.ksh-l {
  margin: 16px 2px 8px;
  color: var(--mut);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ksh-c {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  overflow: hidden;
}
.ksh .list.sg.ksh-c {
  border: 1px solid var(--line);
  border-radius: 14px;
}
.ksh .srw {
  padding: 10px 12px;
}
.ksh .srw .t {
  flex: 1;
  min-width: 0;
  color: var(--ink);
  font-size: 14px;
}
.ksh .srw small {
  font-size: 12px;
}
.ksz {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
}
.ksz input {
  flex: 1;
  min-width: 60px;
  accent-color: var(--g);
}
.ksz .sb {
  flex: none;
  height: 32px;
}
.ksz [data-kzs] {
  width: 32px;
  padding: 0;
  border-radius: 50%;
  font-size: 17px;
}
.ksz b {
  min-width: 42px;
  text-align: center;
  font-size: 13px;
  color: var(--ink);
}
.kwc {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.kwc button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 4px 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  color: var(--mut);
  cursor: pointer;
  transition:
    border-color 0.2s,
    background-color 0.2s;
}
.kwc button.on {
  border-color: var(--g);
  background: var(--gs);
  color: var(--g);
}
.kwc small {
  font-size: 12px;
  font-weight: 600;
}
.kwp {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 38px;
  height: 48px;
  padding: 0 7px;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}
.kwp u {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: #333;
}
.kwp u:nth-child(2) {
  width: 80%;
  margin-left: auto;
}
.kwp u:nth-child(4) {
  width: 60%;
  margin-left: auto;
}
.kw-sepia {
  background: #f3e6c8;
}
.kw-sepia u {
  background: #5b4630;
}
.kw-malam {
  background: #1e2321;
}
.kw-malam u {
  background: #d9dfdb;
}
.kw-tema {
  background: linear-gradient(135deg, #fff 50%, #1e2321 50%);
}
.kw-tema u {
  background: #888;
}
.ksh .seg {
  background: var(--fill);
}
.kdl {
  padding: 12px;
}
.kdl-t {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
}
.kdl-t b {
  display: block;
  font-size: 14px;
  color: var(--ink);
}
.kdl-t small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.45;
}
.ksh .dlw {
  justify-content: flex-start;
  margin-left: 0;
}
.kp.sep img {
  filter: sepia(0.45) brightness(0.98);
}
.kp.mlm img {
  filter: invert(0.9) hue-rotate(180deg);
}
.kp {
  overflow-x: auto;
}
.kp img {
  display: block;
  height: auto;
  max-width: none;
  margin: 0 auto 16px;
  aspect-ratio: var(--r, 0.7606);
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.14);
}
[data-theme='dark'] .kp.inv img {
  filter: invert(0.9) hue-rotate(180deg);
}

.kl {
  margin: 6px 0 0;
  padding-left: 20px;
}
.kl li {
  margin: 7px 0;
  line-height: 1.65;
}
.cta {
  margin-top: 18px;
  border: 1.5px solid var(--g);
}
.zs {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 700;
}
.zs.ok {
  background: var(--g);
  color: var(--on);
}
.zs.no {
  background: var(--line);
  color: var(--mut);
}
.zv {
  margin: 8px 0 6px;
  font-size: 24px;
  font-weight: 700;
  color: var(--g);
}
.zr {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.zr b {
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  color: var(--ink);
}

.ah {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bm {
  padding: 4px;
  background: 0;
  border: 0;
  color: var(--mut);
  cursor: pointer;
}
.bm.on {
  color: var(--g);
}
.bm.on svg {
  fill: var(--g);
}

/* Waris: hasil pembagian */
.wr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.wr:first-child {
  border-top: 0;
}
.wr-t {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.res .wr-t b {
  font-size: 14px;
  color: var(--ink);
}
.wr-v {
  flex: none;
  text-align: right;
}
.res .wr-v b {
  display: block;
  font-size: 15px;
  color: var(--g);
}
.wr-bar {
  width: 96px;
  height: 4px;
  margin: 6px 0 0 auto;
  background: var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.wr-bar i {
  display: block;
  height: 100%;
  background: var(--g);
}
.wr-tot {
  border-top: 2px solid var(--line);
}
.wr-tot .wr-v b {
  color: var(--ink);
}

/* Hadits */
.hd-lbl {
  margin-top: 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mut);
}
.hd-tr {
  margin: 4px 0 0;
  line-height: 1.7;
}
.hd-nav {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 12px 0;
}
.hd-note {
  font-size: 13px;
  margin-top: 12px;
}

/* Mushaf, ayat, dan teks Arab */
.mushaf {
  direction: rtl;
  padding: 8px 2px;
  font-family: var(--ar);
  line-height: 2.5;
  text-align: justify;
  text-align-last: center;
}
/* Bismillah di atas surah: huruf Arab pilihan pengguna, ukurannya mengikuti ukuran huruf Arab, berdiri di atas garis
   seperti baris mushaf */
.bsm {
  margin: 18px 0 12px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--line);
  color: var(--tc, var(--bc, var(--ink)));
  font-family: var(--ar);
  font-size: 27px;
  line-height: 2;
  text-align: center;
  direction: rtl;
}
.mk {
  display: inline-grid;
  place-items: center;
  min-width: 1.5em;
  height: 1.5em;
  margin: 0 0.3em;
  border: 1px solid var(--g);
  border-radius: 50%;
  font-family: 'Times New Roman', Times, serif;
  font-size: 0.5em;
  color: var(--g);
  vertical-align: middle;
}
#ay {
  padding-bottom: 90px;
}
.stick {
  position: sticky;
  top: 0;
  z-index: 4;
  max-height: 38vh;
  overflow: auto;
  margin-bottom: 12px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
}
.ar2 {
  color: var(--tc, var(--bc, var(--ink)));
  margin: 8px 0;
  font: 26px/2 var(--ar);
  text-align: right;
  direction: rtl;
}
.ay {
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.ay2 {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.ay2:last-child {
  border-bottom: 0;
}
.ay .ar,
.ay2 .ar {
  color: var(--tc, var(--bc, var(--ink)));
  font-family: var(--ar);
  line-height: 2.3;
  text-align: right;
  direction: rtl;
}
.ay .tr,
.ay .lt {
  line-height: 1.7;
}
.ay2 .ar2 {
  line-height: 2.3;
}
.ay2 .tr,
.ay2 .lt {
  margin-top: 8px;
  line-height: 1.7;
}
.ay .n,
.ay2 .n {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 4px;
  margin-bottom: 4px;
  border: 1px solid var(--g);
  border-radius: 50%;
  font-size: 11px;
  color: var(--g);
}
.ay2 .n {
  margin-bottom: 10px;
}
.qt {
  min-height: 44px;
  margin: 8px 0 2px;
  font-size: 14px;
  font-style: italic;
  opacity: 0.95;
}
.qt span {
  display: inline-block;
  opacity: 0;
}
.qt span.in {
  animation: qin 0.7s forwards;
}
.qt span.qs2 {
  animation: qin 0.7s;
}
@keyframes qin {
  from {
    opacity: 0.15;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* 6. Responsif (dari kecil ke besar) */

/* Ponsel: di bawah 900px, menu sisi disembunyikan dan halaman anak tanpa menu bawah */
@media (max-width: 899px) {
  body.subhal #nav {
    display: none;
  }
  body.subhal #ftb {
    bottom: calc(16px + env(safe-area-inset-bottom));
  }
  body.subhal .pl {
    bottom: calc(16px + env(safe-area-inset-bottom));
  }
}

/* Ponsel kecil: di bawah 420px */
@media (max-width: 420px) {
  #view {
    padding-top: 12px;
  }
  .hero .big {
    font-size: 34px;
  }
  .pt {
    grid-template-columns: repeat(3, 1fr);
  }
  .pt div {
    padding: 5px 0;
  }
  .g2 {
    gap: 2px;
  }
  .g2 a {
    font-size: 11px;
  }
  .g2 a b {
    width: 46px;
    height: 46px;
  }
  .sl {
    flex-basis: 90%;
  }
  .ar2 {
    font-size: 22px;
  }
  .gh {
    font-size: 19px;
  }
  .qt {
    min-height: 40px;
    font-size: 13px;
  }
  .cal .hj {
    font-size: 9px;
  }
  .cal small {
    font-size: 9px;
  }
}
@media (max-width: 380px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 320px) {
  .g2 {
    grid-template-columns: repeat(3, 1fr);
  }
  .tabs button {
    font-size: 13px;
  }
}

/* Tablet: 600px ke atas */
@media (min-width: 600px) {
  #view {
    padding: 20px 24px;
  }
  .rh {
    margin: -20px -24px 8px;
  }
  .g2 a b {
    width: 60px;
    height: 60px;
  }
  .sl {
    flex-basis: 46%;
  }
}

/* Desktop: 900px ke atas, menu sisi kiri */
@media (min-width: 900px) {
  #app {
    flex-direction: row;
  }
  #nav {
    order: 0;
    flex-direction: column;
    width: 230px;
    gap: 4px;
    padding: 8px 12px 20px;
    border: 0;
    border-right: 1px solid var(--line);
  }
  #nav {
    transition: width 0.4s cubic-bezier(0.32, 0.72, 0, 1);
  }
  #nav a {
    flex: none;
    flex-direction: row;
    gap: 12px;
    padding: 10px 12px;
    font-size: 15px;
    transition:
      background-color 0.25s ease,
      color 0.25s ease,
      transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  }
  #nav a:active {
    transform: scale(0.96);
  }
  #nav a.on {
    background: var(--gs);
  }
  #nav a .ic {
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  }
  @media (hover: hover) {
    #nav a:hover .ic {
      transform: scale(1.08);
    }
  }
  #nav .brand {
    display: flex;
    padding: 0 12px 18px;
    font: 700 20px var(--ar);
    color: var(--g);
  }
  #view {
    max-width: 880px;
  }
  .car {
    margin: 14px 0 0;
    padding: 0;
  }
  .sl {
    flex-basis: calc(33% - 8px);
  }
  .pt {
    grid-template-columns: repeat(6, 1fr);
  }
  .pl {
    bottom: 0;
    left: 230px;
  }
  .full .pl {
    left: 0;
  }
  #ftb {
    bottom: 24px;
  }
}
.full .pl {
  bottom: calc(16px + env(safe-area-inset-bottom));
}
.full #ftb {
  bottom: calc(16px + env(safe-area-inset-bottom));
}
.full #nav {
  display: none;
}

/* Layar pendek mendatar (ponsel dimiringkan) */
@media (max-height: 480px) and (orientation: landscape) {
  #nav {
    padding-bottom: 2px;
  }
  #nav a {
    flex-direction: row;
    justify-content: center;
    gap: 6px;
  }
  #nav a .ic {
    width: 20px;
    height: 20px;
  }
}

/* Sidebar: penuh (logo + nama) atau ringkas (ikon saja). Tombol perkecil ada di belakang logo dan muncul saat kursor
   di logo. */
#nav .nb {
  display: none;
}
@media (min-width: 900px) {
  #nav {
    position: relative;
  }
  #nav .nb {
    display: flex;
    align-items: flex-start;
    margin: 0 0 8px;
  }
  #nav .brand {
    display: flex;
    flex: 1;
    min-width: 0;
    padding: 0 0 18px 12px;
  }
  #nav .bt {
    flex: none;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    font: 700 20px var(--ar);
    color: var(--g);
  }
  /* Tombol sidebar ada di belakang logo; saat kursor di header, logo memudar dan tombol terlihat di posisinya */
  #nav .nb {
    position: relative;
  }
  #nav .brand img {
    position: relative;
    z-index: 1;
    transition: opacity 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  }
  #nav .sbt {
    position: absolute;
    top: 0;
    left: 12px;
    z-index: 0;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: var(--card);
    color: var(--g);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition:
      opacity 0.35s cubic-bezier(0.32, 0.72, 0, 1),
      background-color 0.25s ease;
  }
  #nav .sbt:active {
    background: var(--gs);
  }
  #nav .nb:hover .brand img {
    opacity: 0;
    pointer-events: none;
  }
  #nav .nb:hover .sbt,
  #nav .sbt:focus-visible {
    opacity: 1;
    pointer-events: auto;
  }
  #nav .sbt:focus-visible {
    outline: 2px solid var(--g);
    outline-offset: 2px;
  }
  #nav .sbt .ic {
    width: 20px;
    height: 20px;
  }
  /* Tooltip melayang di kanan (seperti Gemini): tombol sidebar, dan menu saat mode ringkas */
  body.nav-off #nav a {
    position: relative;
  }
  #nav [data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    z-index: 50;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--ink);
    color: var(--bg);
    font: 500 13px/1.3 var(--ui);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translate(-4px, -50%);
    transition:
      opacity 0.15s,
      transform 0.15s;
  }
  #nav a[data-tip]::after {
    display: none;
  }
  body.nav-off #nav a[data-tip]::after {
    display: block;
  }
  #nav [data-tip]:hover::after,
  #nav [data-tip]:focus-visible::after {
    opacity: 1;
    transform: translate(0, -50%);
  }
  body.nav-off #nav {
    width: 76px;
    padding: 8px 10px 20px;
  }
  body.nav-off #nav .nb {
    flex-direction: column;
    align-items: center;
  }
  body.nav-off #nav .brand {
    justify-content: center;
    padding: 0 0 8px;
  }
  body.nav-off #nav .sbt {
    left: 50%;
    transform: translateX(-50%);
  }
  body.nav-off #nav .bt {
    display: none;
  }
  body.nav-off #nav a {
    justify-content: center;
    gap: 0;
    padding: 10px 0;
  }
  body.nav-off #nav a span {
    display: none;
  }
  body.nav-off #view {
    max-width: 1040px;
  }
}

/* 6b. Halaman baca Al-Qur'an: ayat sebagai kartu, header melayang, pemutar mengambang */
.ay {
  margin: 14px 0;
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.ay .ah {
  margin-bottom: 6px;
}
.ay .ar {
  margin: 4px 0 14px;
  line-height: 2.2;
}
.ay .lt {
  margin: 0 0 8px;
  line-height: 1.6;
}
.ay .tr {
  margin: 0;
  line-height: 1.7;
}
.rh {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.pl {
  left: 50%;
  right: auto;
  width: min(520px, calc(100% - 32px));
  transform: translateX(-50%);
  bottom: calc(16px + env(safe-area-inset-bottom));
  padding: 8px 14px 8px 8px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}
.pl .ib {
  width: 44px;
  height: 44px;
}
.full .pl {
  left: 50%;
}
@media (min-width: 900px) {
  .pl {
    left: calc(50% + 115px);
    bottom: 24px;
  }
  body.nav-off .pl {
    left: calc(50% + 38px);
  }
  .full .pl {
    left: 50%;
  }
}
.snav {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 28px 0 104px;
}
.mushaf {
  max-width: 860px;
  margin: 0 auto;
  line-height: 3;
  text-align: justify;
  text-justify: inter-word;
  text-align-last: center;
}
.mk {
  width: 1.7em;
  height: 1.7em;
  min-width: 0;
  padding: 0;
  line-height: 1;
  color: var(--mut);
  border-color: var(--line);
  font-size: 0.5em;
}
.ay .n {
  width: 28px;
  height: 28px;
  min-width: 0;
  padding: 0;
  line-height: 1;
  place-items: center;
  border-radius: 50%;
}
.fsb .fst {
  display: none;
}
@media (min-width: 600px) {
  .fsb {
    width: auto;
    height: 36px;
    padding: 0 14px;
    border-radius: 99px;
    gap: 6px;
    display: inline-flex;
    align-items: center;
  }
  .fsb .fst {
    display: inline;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
  }
}
#nav a {
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}
@media (hover: hover) {
  #nav a:not(.on):hover {
    background: var(--fill);
  }
}

/* 6c. Pengaturan baca, daftar surah, dan transisi mode */
.back-d {
  background: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.rcs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 4px 0 10px;
}
.rcs button {
  position: relative;
  padding: 12px 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--mut);
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color 0.2s,
    background-color 0.2s,
    color 0.2s;
}
.rcs button.on {
  border-color: var(--g);
  background: var(--gs);
  color: var(--g);
}
.rcs button.on::after {
  content: '✓';
  position: absolute;
  top: 4px;
  right: 8px;
  font-size: 12px;
}
.qpv {
  margin: 10px 0;
  padding: 14px;
  border-radius: 14px;
  background: var(--fill);
  text-align: center;
}
.qpv .qpa {
  display: block;
  font-family: var(--ar);
  line-height: 2.2;
  direction: rtl;
}
.jn {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  vertical-align: middle;
  background: var(--gs);
  color: var(--g);
}
.kh {
  margin: 0 0 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.kh-r {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 4px 0;
}
.kh .pb {
  margin: 8px 0 4px;
  height: 6px;
  border-radius: 6px;
}
.kh .pb i {
  background: var(--g);
}
.fz-in {
  animation: fzIn 0.35s ease both;
}
@keyframes fzIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (min-width: 900px) {
  #ay {
    max-width: 860px;
    margin: 0 auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fz-in {
    animation: none;
  }
}

/* 7. Aksesibilitas */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}
/* Unduhan offline & ke perangkat (js/core/unduh.js) */
.dlw {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-left: auto;
}
.dlw.open,
.dlk .dlw {
  flex-basis: 100%;
  justify-content: flex-start;
  margin-left: 0;
}
.srw.dlr {
  flex-wrap: wrap;
}
/* Judul baris unduhan tidak boleh terjepit tombol (Tersimpan · Ke perangkat · Hapus): tombol turun ke baris bawah */
.srw.dlr .t {
  min-width: 130px;
}
.srw.dlr .dlw.open {
  margin-top: 6px;
}
.dlw .sb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dlc {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 200px;
}
.dlw .dlc .sb {
  height: auto;
  padding: 10px 12px;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  white-space: normal;
  font-size: 13px;
}
.dlc .sb small {
  font-weight: 400;
  font-size: 11.5px;
  opacity: 0.8;
}
.dlw .dlc + .sb {
  align-self: flex-start;
}
.dlp {
  flex: 1;
  min-width: 140px;
}
.dlbar {
  height: 6px;
  border-radius: 3px;
  background: var(--fill);
  overflow: hidden;
  margin-bottom: 4px;
}
.dlbar i {
  display: block;
  height: 100%;
  background: var(--g);
  transition: width 0.2s;
}
.dlok {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--g);
  font-weight: 600;
}
/* Pembaca surah (js/pages/quran.js): header menempel penuh di atas, pilihan mode, geser halaman, garis baris mushaf */
#view:has(> .rh) {
  padding-top: 0;
}
.rh {
  top: 0;
  margin-top: 0;
  background: var(--bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.rt b {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mseg {
  display: inline-flex;
  flex: none;
  gap: 2px;
  padding: 3px;
  border-radius: 99px;
  background: var(--fill);
}
.mseg button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 11px;
  border: 0;
  border-radius: 99px;
  background: none;
  color: var(--mut);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color 0.2s,
    color 0.2s,
    box-shadow 0.2s;
}
.mseg button.on {
  background: var(--card);
  color: var(--g);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
}
@media (max-width: 420px) {
  .mseg button {
    padding: 0 10px;
  }
  .mseg button .ic {
    display: none;
  }
  .rh {
    gap: 6px;
  }
}
.ay,
.ayt {
  scroll-margin-top: 72px;
}
.snav {
  align-items: center;
}
.snav small {
  text-align: center;
  font-size: 12px;
}
.snav .btn {
  margin: 0;
}
.snav .btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.sl-out-l {
  animation: slOutL 0.17s ease-in forwards;
}
.sl-out-r {
  animation: slOutR 0.17s ease-in forwards;
}
.sl-in-l {
  animation: slInL 0.28s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}
.sl-in-r {
  animation: slInR 0.28s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}
@keyframes slOutL {
  to {
    opacity: 0;
    transform: translateX(-36px);
  }
}
@keyframes slOutR {
  to {
    opacity: 0;
    transform: translateX(36px);
  }
}
@keyframes slInL {
  from {
    opacity: 0;
    transform: translateX(-36px);
  }
}
@keyframes slInR {
  from {
    opacity: 0;
    transform: translateX(36px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sl-out-l,
  .sl-out-r,
  .sl-in-l,
  .sl-in-r {
    animation: none;
  }
}
/* Garis di bawah setiap baris mushaf: periode garis = tinggi baris (line-height 3) */
.mushaf {
  padding: 0 2px;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(3em - 1px),
    var(--line) calc(3em - 1px),
    var(--line) 3em
  );
}
/* Pemutar Al-Qur'an: ayat yang sedang diputar dan tombol unduh audio di bar pemutar */
.ay.qplay {
  border-color: var(--g);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--g) 25%, transparent);
}
.ayt.qplay {
  background: var(--gs);
  border-radius: 8px;
}
.pl #qdl {
  display: flex;
  flex: none;
}
.pl .dlw {
  margin-left: 0;
  flex-wrap: nowrap;
}
.pl .dlw small {
  font-size: 11px;
  white-space: nowrap;
}
.pl .dlp {
  min-width: 80px;
}
.pl .dlok .ic {
  flex: none;
}
@media (max-width: 420px) {
  .pl .dlok {
    font-size: 0;
    gap: 0;
  }
  .pl .dlok .ic {
    width: 18px;
    height: 18px;
  }
}
.oad {
  margin: 8px 0 0;
}
.oad summary {
  padding: 10px 14px;
  color: var(--g);
  font-weight: 600;
  cursor: pointer;
}
/* Menu ayat (ketuk kartu ayat) */
.ay,
.ayt {
  cursor: pointer;
}
@media (hover: hover) {
  .ay:hover {
    border-color: color-mix(in srgb, var(--g) 35%, var(--line));
  }
  .ayt:hover {
    background: var(--fill);
    border-radius: 8px;
  }
}
.am-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.am-ar {
  max-height: 30vh;
  overflow: auto;
  margin: 10px 0 12px;
  font: 24px/2 var(--ar);
  text-align: right;
  direction: rtl;
}
.am-l {
  display: flex;
  flex-direction: column;
}
.am-l button {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 6px;
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
  color: var(--ink);
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}
.am-l button .ic {
  color: var(--g);
}
.am-l button:active {
  background: var(--fill);
}

/* Navigasi bagian sebelumnya/berikutnya (pnav) dan transisi geser kiri-kanan */
a.sb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-decoration: none;
}
.pnav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 28px 0 96px;
}
.pnav a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--rad);
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
  transition:
    transform 0.12s,
    filter 0.15s;
}
.pnav a:active {
  transform: scale(0.98);
}
.pnav a:hover {
  filter: brightness(0.97);
}
.pnav [data-nx] {
  grid-column: 2;
  justify-content: flex-end;
  text-align: right;
  background: var(--g);
  border-color: var(--g);
  color: var(--on);
}
.pnav span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pnav small {
  font-size: 11px;
  opacity: 0.75;
}
.pnav b {
  display: -webkit-box;
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.pnav .ic {
  flex: none;
  opacity: 0.85;
}
html[data-vt]::view-transition-old(page),
html[data-vt]::view-transition-new(page) {
  animation-duration: 0.42s;
  animation-timing-function: cubic-bezier(0.22, 0.8, 0.3, 1);
}
html[data-vt='fwd']::view-transition-old(page) {
  animation-name: vt-out-l;
}
html[data-vt='fwd']::view-transition-new(page) {
  animation-name: vt-in-r;
}
html[data-vt='back']::view-transition-old(page) {
  animation-name: vt-out-r;
}
html[data-vt='back']::view-transition-new(page) {
  animation-name: vt-in-l;
}
@keyframes vt-out-l {
  to {
    opacity: 0;
    transform: translateX(-22%);
  }
}
@keyframes vt-out-r {
  to {
    opacity: 0;
    transform: translateX(22%);
  }
}
@keyframes vt-in-r {
  from {
    opacity: 0;
    transform: translateX(22%);
  }
}
@keyframes vt-in-l {
  from {
    opacity: 0;
    transform: translateX(-22%);
  }
}

/* Panel pengaturan tasbih melayang: kecil, menempel di samping tombol tasbih */
#ftp {
  position: fixed;
  z-index: 10;
  width: 216px;
  padding: 10px 12px 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  font-size: 13px;
  animation: ftpIn 0.16s cubic-bezier(0.22, 0.8, 0.3, 1);
}
#ftp.out {
  animation: ftpOut 0.14s ease-in forwards;
}
@keyframes ftpIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
}
@keyframes ftpOut {
  to {
    opacity: 0;
    transform: scale(0.92);
  }
}
#ftp .ftph {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
#ftp .ftph b {
  font-size: 14px;
}
#ftp .ftph .ib2 {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: var(--fill);
  color: var(--ink);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
#ftp .ftpr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}
#ftp small {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
}
#ftp .seg {
  padding: 2px;
  margin: 0;
}
#ftp .seg button {
  padding: 5px 0;
  font-size: 12px;
}
#ftp .ftpa {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
#ftp .ftpa .sb {
  flex: 1;
  height: 28px;
  font-size: 11.5px;
}

/* Tarik untuk memuat ulang: putaran + tulisan di celah atas, halaman ikut turun */
#ptr {
  position: fixed;
  top: env(safe-area-inset-top);
  left: 50%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transform: translate(-50%, -44px);
  pointer-events: none;
  color: var(--mut);
}
/* Logo Fadzkuruuni dikelilingi lingkaran: terisi mengikuti tarikan, lalu berputar saat memuat */
#ptr .plg {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  transform: scale(calc(0.7 + var(--pk, 0) * 0.3));
}
#ptr .plg img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: contain;
  transition: transform 0.3s;
}
#ptr .plg svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
#ptr .plg circle {
  fill: none;
  stroke: var(--line);
  stroke-width: 2.5;
}
#ptr .plg circle.pj {
  stroke: var(--g);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
#ptr.siap .plg img {
  transform: scale(1.08);
}
#ptr.muter .plg {
  transform: none;
}
#ptr.muter .plg circle.pj {
  stroke-dasharray: 28 72;
  stroke-dashoffset: 0;
}
#ptr.muter .plg svg {
  animation: ptrPutar 0.8s linear infinite;
}
#ptr.muter .plg img {
  animation: ptrDenyut 1.2s ease-in-out infinite;
}
@keyframes ptrDenyut {
  50% {
    transform: scale(0.9);
  }
}
#ptr small {
  font-size: 11.5px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
#ptr.siap small,
#ptr.muter small {
  color: var(--ink);
}
@keyframes ptrPutar {
  from {
    transform: rotate(-90deg);
  }
  to {
    transform: rotate(270deg);
  }
}

/* Beranda: doa hari ini */
.dhi {
  display: block;
  color: var(--ink);
  text-decoration: none;
}
.dhi .dar {
  margin: 10px 0 6px;
  font-family: var(--ar);
  font-size: 24px;
  line-height: 2;
  text-align: right;
  direction: rtl;
}
.dhi p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.6;
}
.dhi .dlj {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--g);
}

/* Laporkan masalah: halaman asal dan foto */
.rhal {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 10px 12px;
  background: var(--gs);
  border-radius: 10px;
  color: var(--g);
}
.rhal span {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.rhal b {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}
.rhal small {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rfs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rfs:not(:empty) {
  margin-bottom: 8px;
}
.rfs span {
  position: relative;
}
/* Pratinjau foto utuh (tangkapan bagian yang ditandai biasanya lebar), tidak dipotong tengahnya */
.rfs img {
  display: block;
  height: 84px;
  width: auto;
  min-width: 84px;
  max-width: 240px;
  object-fit: contain;
  background: var(--fill);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.rfs button {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

/* Mode tandai halaman (laporan): bilah petunjuk gelap-blur, lapisan pemilih, dan sorotan bagian */
.tdbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 12px;
  padding: calc(8px + env(safe-area-inset-top)) 12px 8px 14px;
  background: rgba(10, 14, 12, 0.86);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  color: #fff;
  font-size: 13.5px;
  line-height: 1.4;
  animation: tdIn 0.22s cubic-bezier(0.22, 0.8, 0.3, 1);
}
.tdbar > span {
  display: flex;
  flex: 1 1 200px;
  max-width: 640px;
  align-items: center;
  gap: 8px;
}
.tdbar > span .ic {
  flex: none;
  color: #ffb4a6;
}
.tdbar > div {
  display: flex;
  gap: 6px;
}
.tdbar .sb {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.tdbar .sb.pri {
  background: #fff;
  color: #1d2b25;
}
@keyframes tdIn {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
}
.tdbar .sb {
  cursor: pointer;
}
.tdlap {
  position: fixed;
  inset: 0;
  z-index: 35;
  background: rgba(0, 0, 0, 0.42);
  cursor: crosshair;
  animation: tdDim 0.2s ease;
}
@keyframes tdDim {
  from {
    background: transparent;
  }
}
.tdhv {
  position: fixed;
  z-index: 36;
  border: 2px dashed #ffb4a6;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.14);
  pointer-events: none;
  transition:
    left 0.08s,
    top 0.08s,
    width 0.08s,
    height 0.08s;
}
.tdbar small {
  opacity: 0.75;
  font-size: 12px;
}
.tdbox {
  position: fixed;
  z-index: 36;
  border: 2.5px solid #e0442f;
  border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  animation: tdBox 0.2s ease;
}
@keyframes tdBox {
  from {
    opacity: 0;
    transform: scale(1.03);
  }
}

/* Teks tidak bisa dipilih, disalin, atau diseret (kecuali kolom isian) */
body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
input,
textarea,
[contenteditable] {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
img,
svg,
a {
  -webkit-user-drag: none;
}

/* Selama mode tandai, seluruh aplikasi turun di bawah pita petunjuk sehingga tidak ada tombol yang tertutup */
body.td #app {
  top: var(--tdh, 52px);
  height: auto;
  bottom: 0;
}

/* Tombol masuk akun (Google, Facebook) */
.lgn {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 14px 14px;
}
.lgb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.1s;
}
.lgb:active {
  transform: scale(0.98);
}
.lgb svg {
  flex: none;
}
.lgi {
  margin: 0;
  padding: 12px 14px 6px;
  font-size: 13px;
  line-height: 1.6;
}

/* Dialog konfirmasi (keluar akun, hapus, dll.): di tengah layar, bukan dari bawah */
.back-d.tgh {
  align-items: center;
  padding: 16px;
}
.back-d.tgh .sheet {
  max-width: 360px;
  padding: 20px 18px 16px;
  border-radius: 16px;
  text-align: center;
  animation: tghIn 0.18s cubic-bezier(0.22, 0.8, 0.3, 1);
}
.back-d.tgh .sheet > b {
  font-size: 17px;
  color: var(--ink);
}
.back-d.tgh .act {
  flex-wrap: nowrap;
}
@keyframes tghIn {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
}

/* Masuk dengan email */
.lge {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: var(--g);
}
.back-d.tgh .ems {
  max-width: 400px;
  text-align: left;
}
.ems > b {
  display: block;
  margin-bottom: 12px;
  text-align: center;
}
.ems .seg {
  margin-bottom: 12px;
}
.ems .seg button {
  padding: 8px 6px;
}
.ems p {
  margin: -2px 0 10px;
  font-size: 13px;
}
.emp {
  position: relative;
}
.emp .in {
  padding-right: 46px;
}
.emp .ib2 {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: 0;
  color: var(--mut);
  cursor: pointer;
}
.eml {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 12px;
  margin: 10px 0 4px;
}
.eml button {
  padding: 4px 0;
  border: 0;
  background: 0;
  color: var(--g);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

/* Pengaturan baca: tema 4 pilihan, sakelar & penggeser mengikuti warna tema (bukan bawaan browser) */
.rcs.r4 {
  grid-template-columns: repeat(4, 1fr);
}
.rcs.r4 button {
  padding: 11px 2px;
  font-size: 12.5px;
}
input[type='range'] {
  accent-color: var(--g);
}
.sheet .sw input[type='checkbox'] {
  position: relative;
  flex: none;
  width: 46px;
  height: 26px;
  margin: 0;
  border-radius: 13px;
  background: var(--line);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background 0.2s;
}
.sheet .sw input[type='checkbox']::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s;
}
.sheet .sw input[type='checkbox']:checked {
  background: var(--g);
}
.sheet .sw input[type='checkbox']:checked::before {
  transform: translateX(20px);
}
.sheet .sw input[type='range'] {
  width: 46%;
}

/* Masuk bertahap: tiap bagian halaman muncul bergiliran */
#view.ent > * {
  animation: entUp 0.5s cubic-bezier(0.22, 0.8, 0.3, 1) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
#view.ent.entb > * {
  animation-name: entBack;
}
@keyframes entUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}
@keyframes entBack {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
}
/* Keluar bertahap sebelum pindah halaman */
#view.kel,
#view.kelb {
  pointer-events: none;
}
#view.kel > * {
  animation: kelUp 0.2s cubic-bezier(0.4, 0, 1, 1) both;
  animation-delay: calc(var(--o, 0) * 24ms);
}
#view.kelb > * {
  animation: kelKanan 0.2s cubic-bezier(0.4, 0, 1, 1) both;
  animation-delay: calc(var(--o, 0) * 24ms);
}
@keyframes kelUp {
  to {
    opacity: 0;
    transform: translateY(-12px);
  }
}
@keyframes kelKanan {
  to {
    opacity: 0;
    transform: translateX(24px);
  }
}
@media (prefers-reduced-motion: reduce) {
  #view.kel > *,
  #view.kelb > *,
  #view.ent > * {
    animation: none;
  }
}

/* Tasbih melayang: cincin manik-manik, angka besar, rumbai, dan tombol ··· */
#ftb #fc {
  position: relative;
  display: grid;
  place-content: center;
  width: 84px;
  height: 84px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  line-height: 1;
  transition: transform 0.12s;
}
#ftb #fc:active {
  transform: none;
}
#ftb .fcr {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#ftb .fcr .mk {
  fill: var(--gs);
  stroke: color-mix(in srgb, var(--g) 18%, transparent);
  stroke-width: 0.6;
  transition: fill 0.2s;
}
#ftb .fcr .mk.on {
  fill: var(--g);
  stroke: none;
}
#ftb #fcn {
  position: relative;
  font-size: 25px;
  font-weight: 700;
  text-align: center;
}
#ftb #fct {
  position: relative;
  margin-top: 3px;
  color: var(--mut);
  font-size: 10.5px;
  text-align: center;
}
#ftb #fc.ketuk #fcn {
  animation: none;
}
#ftb #fc.penuh {
  animation: none;
}
@keyframes fcTk {
  50% {
    transform: scale(1.18);
  }
}
@keyframes fcPenuh {
  30% {
    transform: scale(1.12);
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--g) 30%, transparent);
  }
}
#ftb .rumbai {
  position: absolute;
  left: 50%;
  top: 80px;
  width: 16px;
  height: 28px;
  margin-left: -8px;
  fill: var(--g);
  pointer-events: none;
}
#ftb #fg {
  position: absolute;
  top: -4px;
  right: -6px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  cursor: pointer;
}

/* Tanya AI */
.aist {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -4px 0 12px;
  font-size: 12.5px;
  color: var(--mut);
}
.aist > span:nth-child(2) {
  flex: 1;
}
.aist .sb {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.aidot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2fa66b;
  box-shadow: 0 0 0 3px color-mix(in srgb, #2fa66b 25%, transparent);
}
.aidot.off {
  background: #c98a14;
  box-shadow: 0 0 0 3px color-mix(in srgb, #c98a14 25%, transparent);
}
.aic {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: calc(100% - 150px);
  padding-bottom: 12px;
}
.aim {
  display: flex;
}
.aim > div {
  max-width: 86%;
  padding: 10px 13px;
  border-radius: 16px;
  font-size: 14.5px;
  line-height: 1.6;
  word-break: break-word;
}
.aim.u {
  justify-content: flex-end;
}
.aim.u > div {
  background: var(--g);
  color: var(--on);
  border-bottom-right-radius: 5px;
}
.aim.a > div {
  background: var(--fill);
  color: var(--ink);
  border-bottom-left-radius: 5px;
}
.aim .aili {
  display: block;
  padding-left: 14px;
  position: relative;
}
.aim .aili::before {
  content: '•';
  position: absolute;
  left: 2px;
}
.aih {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.aih .chip2 {
  padding: 6px 11px;
  font-size: 12px;
  background: var(--card);
}
.aimd {
  display: block;
  margin-top: 8px;
  color: var(--mut);
  font-size: 11px;
}
.aiw {
  display: flex;
  gap: 4px;
  padding: 14px 16px !important;
}
.aiw i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mut);
  animation: aiw 1s infinite ease-in-out;
}
.aiw i:nth-child(2) {
  animation-delay: 0.15s;
}
.aiw i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes aiw {
  0%,
  80%,
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-4px);
  }
}
.aie {
  margin: auto 0;
  padding: 18px 6px;
  text-align: center;
}
.aiei {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: var(--gs);
  color: var(--g);
}
.aie b {
  font-size: 18px;
}
.aie p {
  margin: 6px auto 14px;
  max-width: 420px;
  font-size: 13.5px;
  line-height: 1.6;
}
.ais {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.aif {
  position: sticky;
  bottom: -24px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin: 0 -4px -24px;
  padding: 10px 4px 16px;
  background: var(--bg);
}
/* Kolom ketik: satu kapsul berisi teks dan mikrofon, tanpa batang gulir yang terlihat */
.aiin {
  position: relative;
  display: flex;
  flex: 1;
  align-items: flex-end;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--fill);
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.aiin:focus-within {
  border-color: var(--g);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--g) 15%, transparent);
}
.aif textarea {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  max-height: 140px;
  padding: 12px 6px 12px 16px;
  border: 0;
  background: 0;
  color: var(--ink);
  resize: none;
  outline: 0;
  line-height: 1.4;
  overflow-y: hidden;
  scrollbar-width: none;
}
.aif textarea::-webkit-scrollbar {
  display: none;
}
.aimic {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 3px 3px 3px 0;
  border: 0;
  border-radius: 50%;
  background: 0;
  color: var(--mut);
  cursor: pointer;
}
.aimic.on {
  background: #e0442f;
  color: #fff;
  animation: aimic 1.2s infinite;
}
@keyframes aimic {
  50% {
    box-shadow: 0 0 0 8px rgba(224, 68, 47, 0.18);
  }
}
.aik {
  display: grid;
  flex: none;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--g);
  color: var(--on);
  cursor: pointer;
}
.aiwarn {
  margin: 4px 0 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f6e7c1;
  color: #5b4410;
  font-size: 13px;
}
[data-theme='dark'] .aiwarn {
  background: #3d3010;
  color: #f0cf7a;
}

/* Pilihan warna teks bacaan */

/* Palet warna teks bacaan: bulatan warna rapi sejajar, tanda centang pada pilihan, pelangi untuk warna lain, dan
   pratinjau */
.wtk {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  padding: 4px 0 2px;
}
.wtk button,
.wtkb {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  border: 0;
  background: 0;
  color: var(--mut);
  font-size: 11px;
  cursor: pointer;
}
.wtk i {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
.wtk i .ic {
  opacity: 0;
  transition: opacity 0.15s;
}
.wtk .on i {
  box-shadow:
    0 0 0 2px var(--card),
    0 0 0 4px var(--c, var(--g));
  transform: scale(1.04);
}
.wtk .on i .ic {
  opacity: 1;
}
.wtk .on small {
  color: var(--ink);
  font-weight: 700;
}
.wtk [data-tc='auto'] i {
  color: var(--card);
}
.wtkb i {
  background: var(--c, conic-gradient(#e0442f, #f0a321, #3aa35b, #2a7bd8, #8a4fd1, #e0442f));
}
.wtkb input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.wtkp {
  margin: 12px 0 4px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--fill);
  text-align: center;
}
.wtkp span {
  display: block;
  color: var(--tc, var(--bc, var(--ink)));
  font: 24px/1.8 var(--ar);
  direction: rtl;
}
.wtkp small {
  display: block;
  margin-top: 2px;
  color: var(--tc, var(--mut));
  font-size: 12px;
  line-height: 1.5;
}

/* Fadz AI: kepala halaman dan tombol salin/edit di bawah gelembung */
.aibar {
  gap: 10px;
}
.aiav {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--g), var(--g2));
  color: var(--on);
}
.aibar h1 {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.aibar h1 small {
  color: var(--mut);
  font-size: 12px;
  font-weight: 400;
}
.aim {
  flex-direction: column;
}
.aim.u {
  align-items: flex-end;
}
.aim.a {
  align-items: flex-start;
}
.aiak {
  display: flex;
  gap: 2px;
  margin-top: 3px;
  opacity: 0.75;
}
.aiak button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border: 0;
  border-radius: 8px;
  background: 0;
  color: var(--mut);
  font-size: 11.5px;
  cursor: pointer;
}
.aiak button:hover,
.aiak button:active {
  background: var(--fill);
  color: var(--ink);
}

/* Mode layar penuh Fadz AI: menu bawah dan tasbih melayang disembunyikan */
body.aipenuh #nav,
body.aipenuh #ftb {
  display: none;
}
.aibar .ib.on {
  background: var(--g);
  color: var(--on);
}
.aiak button.on {
  background: var(--gs);
  color: var(--g);
}
/* Edit pesan di dalam gelembung */
.aim.u.edit {
  align-self: stretch;
  align-items: stretch;
}
.aim.u > div.aied {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 100%;
  padding: 10px;
  border: 1px solid var(--g);
  border-radius: 16px;
  background: var(--card);
  color: var(--ink);
}
.aied textarea {
  width: 100%;
  min-height: 60px;
  max-height: 160px;
  padding: 4px;
  border: 0;
  background: 0;
  color: var(--ink);
  font: inherit;
  font-size: 14.5px;
  line-height: 1.5;
  resize: none;
  outline: 0;
}
.aied span {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

/* Fadz AI: bilah rekam suara (tekan lama mikrofon), seperti pesan suara WhatsApp */
.aif [hidden] {
  display: none !important;
}
.airec {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.airx {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 5px;
  height: 46px;
  padding: 0 14px;
  border: 0;
  border-radius: 24px;
  background: #fbe3df;
  color: #b3382a;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
[data-theme='dark'] .airx {
  background: #3a1d19;
  color: #f19a8c;
}
.airec {
  touch-action: pan-y;
  transition:
    transform 0.15s,
    opacity 0.15s;
}
.airg {
  flex: none;
  margin-left: auto;
  color: var(--mut);
  font-size: 11px;
  opacity: 0.8;
}
.airt {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  border-radius: 24px;
  background: var(--fill);
  font-size: 14px;
}
.airt i {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e0442f;
  animation: airt 1s infinite;
}
@keyframes airt {
  50% {
    opacity: 0.25;
  }
}
.airt b {
  flex: none;
  font-variant-numeric: tabular-nums;
}
.airt span {
  overflow: hidden;
  color: var(--mut);
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: rtl;
  text-align: left;
}
#aikb {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  transition:
    transform 0.15s,
    background 0.2s;
}
#aikb:active {
  transform: scale(1.12);
}

/* Pengaturan Tampilan: warna aksen dan pilihan jenis huruf */
.wtk.acw button i {
  background: var(--c);
}
.fnl {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 4px 0;
}
.fnl button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.2s,
    background-color 0.2s;
}
.fnl button span {
  max-width: 100%;
  overflow: hidden;
  font-size: 19px;
  line-height: 1.5;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.fnl.ar button span {
  width: 100%;
  font-size: 22px;
  direction: rtl;
  text-align: right;
}
.fnl button small {
  color: var(--mut);
  font-size: 11.5px;
}
.fnl button.on {
  border-color: var(--g);
  background: var(--gs);
}
.fnl button.on small {
  color: var(--g);
  font-weight: 700;
}
.fnl button.on::after {
  content: '✓';
  position: absolute;
  top: 6px;
  right: 9px;
  font-size: 12px;
  color: var(--g);
}
.fnx {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.fnx .in {
  flex: 1;
  margin: 0;
}
@media (min-width: 600px) {
  .fnl {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Lembar Pengaturan baca: baris penggeser ukuran huruf, kartu berisi, pratinjau */
.ksh .ksl {
  gap: 10px;
}
.ksh .ksl .t {
  flex: none;
  width: 70px;
}
.ksh .ksl input {
  flex: 1;
  min-width: 0;
  accent-color: var(--g);
}
.ksh .ksl b {
  min-width: 28px;
  text-align: right;
  font-size: 13px;
  color: var(--ink);
}
.ksh .kpad {
  padding: 10px 8px;
}
.ksh .kpad .wtkp {
  margin-bottom: 0;
}
.ksh .qpv {
  margin: 14px 0 2px;
}
.ksh .fnl {
  padding: 0;
}
/* Lembar terbuka: latar di belakangnya tidak ikut tergulir */
body.ovl #view {
  overflow: hidden;
}
#view {
  scrollbar-gutter: stable;
}
.back-d {
  overscroll-behavior: contain;
  touch-action: none;
}
.back-d .sheet,
.ksh-b {
  touch-action: pan-y;
  overscroll-behavior: contain;
}

/* Kepala halaman baca yang menempel (barLekat di js/router.js): rapat ke tepi atas & samping, bersembunyi saat
   menggulir ke bawah */
.bar.lekat {
  position: sticky;
  top: -16px;
  z-index: 5;
  margin: -16px -16px 10px;
  padding: 8px 16px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
.bar.lekat h1 {
  font-size: 17px;
}
.bar.lekat .bk,
.bar.lekat .ib {
  width: 36px;
  height: 36px;
}
.bar.lekat,
.rh.lekat {
  transition:
    transform 0.28s cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 0.2s;
}
.bar.lekat.lyg,
.rh.lekat.lyg {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
}
.bar.lekat.smb,
.rh.lekat.smb {
  transform: translateY(-100%);
  box-shadow: none;
}
.rh.lekat {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
}
@media (max-width: 420px) {
  .bar.lekat {
    top: -12px;
    margin-top: -12px;
  }
}
@media (min-width: 600px) {
  .bar.lekat {
    top: -20px;
    margin: -20px -24px 12px;
    padding: 8px 24px;
  }
}

/* Semua lembar & dialog tampil di tengah layar (bukan menempel di bawah), bersudut bulat, muncul dengan efek membesar
   halus */
.back-d {
  align-items: center;
  padding: 16px;
}
.back-d > .sheet {
  max-height: min(86vh, 760px);
  overflow-y: auto;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  padding-bottom: 18px;
  animation: kshTengah 0.22s cubic-bezier(0.22, 0.8, 0.3, 1);
}
.back-d > .sheet.ksh {
  overflow: hidden;
  padding-bottom: 0;
}
.back-d.tgh > .sheet {
  border-radius: 20px;
}
@keyframes kshTengah {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
}

/* Isi tab bisa digeser kiri/kanan (js/core/events.js) */
#tb {
  touch-action: pan-y;
}

/* Bilah tab: pil hijau meluncur halus ke tab aktif (kurva sama dengan geser halaman) */
.tabs.pil {
  position: relative;
  isolation: isolate;
}
.tabs.pil::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 6px - (var(--n, 2) - 1) * 3px) / var(--n, 2));
  border-radius: 6px;
  background: var(--g);
  transform: translateX(calc(var(--ti, 0) * (100% + 3px)));
  transition: transform 0.28s cubic-bezier(0.22, 0.8, 0.3, 1);
}
.tabs.pil button.on {
  background: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .tabs.pil::before {
    transition: none;
  }
}

/* Ponsel: lembar & dialog lebih ringkas, bersudut membulat, tidak memenuhi layar */
@media (max-width: 600px) {
  .back-d {
    padding: 14px;
  }
  .back-d > .sheet {
    width: 100%;
    max-width: 400px;
    max-height: 78vh;
    border-radius: 24px;
    padding: 16px 14px;
  }
  .back-d > .sheet.ksh {
    padding: 0;
  }
  .back-d.tgh > .sheet {
    max-width: 320px;
    border-radius: 22px;
  }
  .ksh-h {
    gap: 10px;
    padding: 12px 14px 10px;
  }
  .ksh-h .si {
    width: 32px;
    height: 32px;
  }
  .ksh-h .si .ic {
    width: 17px;
    height: 17px;
  }
  .ksh-h b {
    font-size: 15px;
  }
  .ksh-h small {
    font-size: 11px;
  }
  .ksh-x {
    width: 30px;
    height: 30px;
    font-size: 20px;
  }
  .ksh-b {
    padding: 2px 12px 14px;
  }
  .ksh-l {
    margin: 12px 2px 6px;
    font-size: 10.5px;
  }
  .ksh-c,
  .ksh .list.sg.ksh-c {
    border-radius: 16px;
  }
  .ksh .srw {
    gap: 10px;
    padding: 8px 10px;
  }
  .ksh .srw .si {
    width: 32px;
    height: 32px;
  }
  .ksh .srw .si .ic {
    width: 17px;
    height: 17px;
  }
  .ksh .srw .t {
    font-size: 13.5px;
  }
  .ksh .srw small {
    font-size: 11px;
  }
  .ksh .ksl .t {
    width: 60px;
  }
  .ksh .qpv {
    margin-top: 10px;
    padding: 10px;
  }
  .ksh .qpa {
    max-height: 64px;
    overflow: hidden;
  }
  .ksh .seg button {
    padding: 8px 4px;
    font-size: 12.5px;
  }
  .ksh .wtk {
    gap: 2px;
  }
  .ksh .wtk i {
    width: 30px;
    height: 30px;
  }
  .ksh .wtk small {
    font-size: 10px;
  }
  .ksh .wtkp {
    padding: 8px 10px;
  }
  .ksh .wtkp span {
    font-size: 20px;
  }
  .ksh .fnl {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  .ksh .fnl button {
    padding: 7px 8px;
    border-radius: 12px;
  }
  .ksh .fnl.ar button span {
    font-size: 17px;
  }
  .ksh .fnl button small {
    font-size: 10.5px;
  }
  .ksh .fnx .in {
    height: 36px;
    font-size: 13px;
  }
  .kwc {
    gap: 6px;
  }
  .kwc button {
    padding: 8px 2px 6px;
    border-radius: 12px;
  }
  .kwp {
    width: 28px;
    height: 36px;
    padding: 0 5px;
    gap: 3px;
  }
  .kwp u {
    height: 2px;
  }
  .ksz {
    gap: 6px;
    padding: 8px 10px;
  }
  .ksz .sb {
    height: 30px;
  }
  .ksz [data-kzs] {
    width: 30px;
  }
  .kdl {
    padding: 10px;
  }
}

/* Mode mushaf di Tahlil, Maulid, Wirid & Doa: kartu (.ay2) disembunyikan, diganti paragraf Arab bersambung */
.ay2.mbh {
  display: none;
}
.mushaf.mbc {
  margin: 6px 0 18px;
  color: var(--tc, var(--bc, var(--ink)));
}
.bar.lekat .mseg {
  margin-left: auto;
}
.bar.lekat .mseg + .ib {
  margin-left: 0;
}

/* Pengaturan Tampilan: contoh langsung ukuran teks bacaan (Arab, Latin, terjemah) */
.ukp {
  margin: 10px 0 4px;
  padding: 12px 14px 14px;
  border-radius: 14px;
  background: var(--fill);
}
.ukp > small {
  display: block;
  margin-bottom: 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ukp-ar {
  color: var(--tc, var(--bc, var(--ink)));
  font-family: var(--ar);
  line-height: 2;
  text-align: right;
  direction: rtl;
  transition: font-size 0.15s;
}
.ukp-lt {
  margin: 2px 0 4px;
  color: var(--tc, var(--bc, var(--ink)));
  font-style: italic;
  line-height: 1.6;
  transition: font-size 0.15s;
}
.ukp-tr {
  margin: 0;
  color: var(--tc, var(--mut));
  line-height: 1.6;
  transition: font-size 0.15s;
}

/* Fadz AI pesan suara (seperti WhatsApp): batang level suara, indikator kunci di atas mikrofon, tiga keadaan bilah
   tahan = sedang ditekan (geser kiri batal, geser atas kunci) · kunci = terus merekam, ada Batal/Kirim · proses = mengubah jadi teks */
.aif {
  position: sticky;
}
.airl {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 2px;
  min-width: 0;
  height: 22px;
  overflow: hidden;
}
.airl u {
  flex: 1;
  max-width: 4px;
  height: 100%;
  border-radius: 2px;
  background: var(--g);
  transform: scaleY(0.15);
  transform-origin: center;
  transition: transform 0.08s linear;
}
.airt span#airtx {
  flex: none;
  max-width: 55%;
}
.airt span#airtx:empty {
  display: none;
}
.airec.tahan .airx,
.airec.tahan [data-reck],
.airec.proses .airx,
.airec.proses [data-reck] {
  display: none;
}
.airec.kunci .airg,
.airec.proses .airg,
.airec.proses .airl,
.airec.proses .airt i {
  display: none;
}
.airec.proses #airtx {
  max-width: none;
  color: var(--ink);
}
.airec.proses .airt b {
  display: none;
}
.airec.proses .airt::before {
  content: '';
  flex: none;
  width: 16px;
  height: 16px;
  border: 2px solid var(--line);
  border-top-color: var(--g);
  border-radius: 50%;
  animation: aiputar 0.8s linear infinite;
}
@keyframes aiputar {
  to {
    transform: rotate(360deg);
  }
}
#aikb.rek {
  background: #e0442f;
  color: #fff;
  box-shadow: 0 0 0 8px color-mix(in srgb, #e0442f 18%, transparent);
  transition:
    transform 0.05s,
    background 0.2s,
    box-shadow 0.2s;
}
.ailk {
  position: absolute;
  right: 4px;
  bottom: 74px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 46px;
  padding: 10px 0 8px;
  border: 1px solid var(--line);
  border-radius: 23px;
  background: var(--card);
  color: var(--mut);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  animation: ailkIn 0.2s cubic-bezier(0.22, 0.8, 0.3, 1);
}
.ailk i {
  font-style: normal;
  font-size: 18px;
  line-height: 1;
  transform: rotate(90deg);
  animation: ailkPanah 1.1s ease-in-out infinite;
}
.ailk.dekat {
  color: var(--g);
  border-color: var(--g);
}
@keyframes ailkIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
@keyframes ailkPanah {
  50% {
    transform: rotate(90deg) translateX(-4px);
  }
}

/* Tampilkan Latin / Terjemah (Pengaturan): berlaku di semua halaman baca & contoh di panel pengaturan */
.no-lt #view .lt,
.no-lt .qpv .qpl,
.no-lt .ukp-lt {
  display: none;
}
.no-tr #view .tr,
.no-tr .qpv .qpt,
.no-tr .ukp-tr {
  display: none;
}
.qpv .qpa {
  color: var(--tc, var(--bc, var(--ink)));
}
.qpv .qpl {
  display: block;
  margin-top: 2px;
  color: var(--tc, var(--bc, var(--ink)));
  font-style: italic;
  line-height: 1.6;
}
.qpv .qpt {
  display: block;
  margin-top: 4px;
  color: var(--tc, var(--mut));
  line-height: 1.6;
}

/* Anti-kedip di HP: latar gelap di belakang lembar tanpa efek blur (blur bertumpuk di atas kepala halaman yang juga blur
   membuat layar berkedip saat diam); kartu contoh font berukuran tetap agar tidak melompat saat font selesai dimuat */
@media (hover: none), (pointer: coarse) {
  .back-d {
    background: rgba(0, 0, 0, 0.42);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}
/* Lembar terbuka: latar halaman diburamkan sama rata (mode Kartu maupun Mushaf). Blur kepala halaman dimatikan selama itu
   agar tidak ada blur bertumpuk (penyebab layar berkedip di HP) */
body:has(> .back-d) :is(.rh, .rh.lekat, .bar.lekat, .ktb, #nav) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.back-d .bar.lekat,
.ovl .bar.lekat,
.ovl .ktb,
.ovl .rh.lekat {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: var(--bg);
}
.fnl button span {
  display: block;
  height: 1.6em;
  line-height: 1.6em;
  overflow: hidden;
}
.fnl.ar button span {
  height: 1.75em;
  line-height: 1.75em;
}

/* Beranda: tiap bagian dibungkus section.tb (tidak memengaruhi tata letak) */
section.tb {
  display: contents;
}
/* Pengumuman admin di Beranda */
.umum {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--g) 30%, var(--line));
  border-radius: 16px;
  background: var(--gs);
  color: var(--ink);
  text-decoration: none;
}
.umi {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--g);
  color: var(--on);
}
.umt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
  line-height: 1.45;
}
.umt b {
  font-size: 15px;
}
.uml {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--g);
  font-weight: 700;
  font-size: 13px;
}
/* Mode admin di aplikasi */
.tadm {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: calc(84px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--card);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  font-size: 13px;
  white-space: nowrap;
}
.tadm button,
.tadm a {
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 99px;
  background: var(--fill);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.tadm .pri {
  background: var(--g);
  color: var(--on);
}
.tadm b {
  padding: 0 6px 0 10px;
  color: var(--g);
}
@media (min-width: 900px) {
  .tadm {
    bottom: 24px;
    left: calc(50% + 115px);
  }
}
.tadmon section.tb {
  display: block;
  position: relative;
  margin: 10px 0;
  padding: 34px 8px 6px;
  border: 2px dashed color-mix(in srgb, var(--g) 45%, transparent);
  border-radius: 14px;
}
.tadmon section.tb > .tak {
  position: absolute;
  top: 4px;
  right: 6px;
}
.tadmon [data-ta] {
  position: relative;
}
.tadmon .grid [data-ta] > .tak,
.tadmon .list [data-ta] > .tak {
  position: absolute;
  z-index: 2;
  top: 2px;
  right: 2px;
}
.tak {
  display: flex;
  gap: 3px;
}
.tak button {
  height: 24px;
  min-width: 24px;
  padding: 0 7px;
  border: 0;
  border-radius: 8px;
  background: var(--g);
  color: var(--on);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.tah {
  opacity: 0.4;
}
.tadmon .tah {
  opacity: 0.45;
  filter: grayscale(1);
}
.tak-kosong {
  padding: 8px;
  color: var(--mut);
  font-size: 13px;
}

/* Tentang: tombol lokasi pondok & media sosial, sepasang sama lebar dan sama tinggi */
.tlk {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.tkred {
  text-align: center;
  font-size: 12px;
  line-height: 1.8;
  margin: 22px 0 6px;
}
.tkred span {
  letter-spacing: 0.02em;
}
.tkred b {
  color: var(--g);
  font-weight: 700;
  letter-spacing: 0.04em;
}
/* Teks "KyMind" bisa diketuk: membuka halaman KyMind (kymind/) layar penuh, tampilannya tetap seperti teks */
a.kym {
  color: inherit;
  text-decoration: none;
}
/* Lapisan KyMind (js/core/overlay.js kymindBuka): menutup seluruh layar, di atas semua lapisan lain */
#kymL.back-d {
  display: block;
  padding: 0;
  z-index: 2147483000;
  background: #040507;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  animation: kymMasuk 0.22s cubic-bezier(0.22, 0.8, 0.3, 1);
}
#kymL iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@keyframes kymMasuk {
  from {
    opacity: 0;
  }
}
.tlb {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  height: 54px;
  padding: 0 14px 0 8px;
  border-radius: 16px;
  text-decoration: none;
  transition:
    transform 0.12s,
    filter 0.2s;
}
.tlb:active {
  transform: scale(0.97);
}
.tli {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 12px;
}
.tlt {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}
.tlt b {
  font-size: 14px;
}
.tlt small {
  overflow: hidden;
  font-size: 11.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  opacity: 0.8;
}
/* Kedua tombol mengikuti warna tema aplikasi; hanya ikon bulat kecil yang memakai warna khas (Maps merah, Facebook
   biru) */
.tmap,
.tfb {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
}
.tli {
  border-radius: 50%;
}
.tmap .tli {
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.tfb .tli {
  background: transparent;
}
.tmap:hover,
.tfb:hover {
  border-color: color-mix(in srgb, var(--g) 40%, var(--line));
}
@media (hover: hover) {
  .tlb:hover {
    filter: brightness(1.05);
  }
}

/* Ukuran tampilan di HP: seluruh aplikasi diperkecil (Pengaturan > Tampilan & Bacaan > Ukuran tampilan) */
@media (max-width: 640px) {
  html {
    zoom: var(--zm, 0.86);
  }
  /* Elemen layar penuh (video YouTube / video kelas) tidak ikut diperkecil, agar memenuhi layar dan berada di tengah */
  :not(html):fullscreen {
    zoom: calc(1 / var(--zm, 0.86));
  }
}

/* Kartu waktu salat di Beranda: foto Pondok Fadzkuruuni dengan lapisan gelap, ubin waktu kaca, waktu sekarang krem
   keemasan */
.hero.hfoto {
  padding: 20px 16px 18px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(18, 32, 64, 0.42), rgba(10, 14, 22, 0.62) 70%, rgba(8, 10, 14, 0.72)),
    url(../img/pondok.jpg) center 40% / cover,
    var(--hero);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}
.hfoto .hnl {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 15px;
  opacity: 1;
}
.hfoto .hnl .ic {
  opacity: 0.95;
}
.hfoto .big {
  font-size: 48px;
  margin: 4px 0 2px;
}
.hfoto .mut2 {
  font-size: 18px;
  opacity: 1;
  margin: 0;
}
.hfoto .hgr {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 8px auto 4px;
  max-width: 260px;
  color: #fff;
}
.hfoto .hgr i {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.75);
}
.hfoto > small:not(.hnl) {
  opacity: 0.95;
}
.hfoto .qt {
  margin-top: 10px;
}
.hfoto .pt {
  gap: 8px;
  margin-top: 14px;
}
.hfoto .pt div {
  padding: 7px 0;
  background: rgba(40, 44, 48, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.hfoto .pt div.n,
[data-theme='dark'] .hfoto .pt div.n {
  background: linear-gradient(180deg, #fffaf0, #fbf0d4);
  color: #1b2233;
  border-color: #e8c877;
  box-shadow: 0 0 14px rgba(240, 200, 110, 0.45);
  text-shadow: none;
}
.hfoto .pt b {
  font-size: 16px;
}
@media (pointer: fine) {
  .hfoto .pt div:not(.n) {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}
@media (max-width: 640px) {
  .hfoto .big {
    font-size: 42px;
  }
  .hfoto .mut2 {
    font-size: 16px;
  }
}
/* HP: tombol kembali dan baris atas Beranda agak ke dalam, tidak menempel di pojok layar */
@media (max-width: 640px) {
  .top {
    padding-left: 10px;
    padding-right: 10px;
  }
}
/* Halaman Tentang: kepala dengan logo, paragraf terbaca, daftar isi aplikasi berbutir, data pondok berbaris */
.tab1 {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.65;
}
.tkep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.tkep img {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--fill);
  padding: 4px;
  object-fit: contain;
}
.tkep b {
  display: block;
  font-size: 17px;
  color: var(--ink);
}
.tkep small {
  display: block;
  color: var(--mut);
  font-size: 12.5px;
}
.tpar {
  margin: 0 0 4px;
  color: var(--ink);
}
.tsub {
  margin: 14px 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mut);
}
.tfit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.tfit > div {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 12px;
  background: var(--fill);
  min-width: 0;
}
.tfit .ic {
  flex: none;
  margin-top: 2px;
  color: var(--g);
}
.tfit b {
  display: block;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink);
}
.tfit small {
  display: block;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--mut);
}
.tcat {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--mut);
  font-size: 13px;
}
.tjud {
  display: block;
  font-size: 16px;
  color: var(--ink);
}
.tals {
  display: block;
  color: var(--mut);
  margin: 2px 0 12px;
}
.tbrs {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.tbrs > span {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--fill);
  color: var(--g);
}
.tbrs small {
  display: block;
  font-size: 11.5px;
  color: var(--mut);
}
.tbrs b {
  color: var(--ink);
}
.tbrs p {
  margin: 0;
  color: var(--ink);
}
.tab1 .tlk {
  margin-top: 12px;
}
@media (max-width: 360px) {
  .tfit {
    grid-template-columns: 1fr;
  }
}
/* Keterbacaan teks: jarak baris lega untuk paragraf di semua halaman */
/* :is(#view, .vpeek): pratinjau geser memakai aturan yang sama kuatnya dengan halaman asli (tidak ada teks yang
   melompat saat bertukar) */
:is(#view, .vpeek) p {
  line-height: 1.65;
}
:is(#view, .vpeek) .card > p + p {
  margin-top: 8px;
}
/* Fadz AI: mikrofon belum siap (titik merah redup, belum berkedip) */
.airec.siapan .airt i {
  animation: none;
  background: #e0442f66;
}
/* Petunjuk hasil pesan suara: diperiksa dulu sebelum dikirim */
.aisv {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 2px 6px;
  padding: 8px 10px 8px 12px;
  border-radius: 12px;
  background: var(--gs, var(--fill));
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.4;
  animation: qin 0.3s;
}
.aisv > .ic {
  flex: none;
  color: var(--g);
}
.aisv span {
  flex: 1;
  min-width: 0;
}
.aisv button {
  flex: none;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: var(--fill);
  color: var(--ink);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
/* Saran isi aplikasi di gelembung jawaban: tetap di dalam gelembung, teks panjang dipotong rapi */
.aim .aih {
  max-width: 100%;
}
.aih .chip2 {
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1.4;
}
.aim.a > div {
  min-width: 0;
  overflow-wrap: anywhere;
}
/* Fadz AI: tombol bulat "ke pesan terbaru" seperti WhatsApp, muncul saat membaca pesan lama */
.aitn {
  position: absolute;
  right: 10px;
  top: -50px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
  cursor: pointer;
  animation: qin 0.25s;
}
.aitn .ic {
  transform: rotate(90deg);
}
.aitn[hidden] {
  display: none;
}
/* Daftar obrolan: gulir halus, tanpa tarikan memantul ke halaman */
body:has(#aic) #view {
  scroll-behavior: auto;
  overscroll-behavior-y: contain;
}
/* Gembok kunci rekaman lebih tinggi di atas mikrofon (±1,5 cm), panah menunjuk jalurnya */
.ailk {
  bottom: 118px;
}
.ailk::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  width: 2px;
  height: 40px;
  margin-left: -1px;
  background: linear-gradient(var(--line), transparent);
  border-radius: 2px;
}
/* Bilah ketik Fadz AI menutup penuh dari tepi ke tepi layar dan menempel ke menu bawah: pesan tidak terlihat di
   sela-selanya */
.aif {
  margin: 0 -16px -24px;
  padding: 10px 16px 10px;
  bottom: -24px;
  box-shadow: 0 -1px 0 var(--line);
}
@media (min-width: 600px) {
  .aif {
    margin: 0 -24px -20px;
    padding: 10px 24px 12px;
    bottom: -20px;
  }
}
.aisv[hidden] {
  display: none;
}
/* Tombol ke pesan terbaru di tengah, tidak tertutup tasbih melayang di pojok kanan */
.aitn {
  right: auto;
  left: 50%;
  margin-left: -20px;
}
/* Laporan: kotak akun pelapor (wajib masuk) */
.rak {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
  padding: 12px;
  border-radius: 14px;
  background: var(--fill);
}
.rak .in {
  margin: 0;
  background: var(--card);
}
.rakm b {
  font-size: 14px;
}
.rakm p {
  margin: 0;
  font-size: 12.5px;
}
.rakm .lgn {
  margin-top: 4px;
}
.rakh {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rakh > .ic {
  flex: none;
  color: var(--g);
}
.rakh small {
  display: block;
  font-size: 11.5px;
}
.rakh b {
  display: block;
  font-size: 13.5px;
  word-break: break-all;
}
/* Pesan suara terkunci: Hapus · Jeda/Lanjut · Kirim (seperti WhatsApp) */
.airj {
  display: none;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: var(--fill);
  color: var(--ink);
  cursor: pointer;
}
.airec.kunci .airj {
  display: grid;
}
.airec.srm .airj {
  display: none;
}
.airec.dijeda .airt i {
  animation: none;
  background: var(--mut);
}
.airec.dijeda .airl u {
  opacity: 0.45;
}
.airec.dijeda .airj {
  background: var(--g);
  color: var(--on);
}
/* Pengaturan suara adzan */
.sua label {
  margin-top: 6px;
}
.suar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.suar select {
  flex: 1;
  min-width: 0;
  margin: 0;
}
.sus {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--fill);
}
.sus[hidden] {
  display: none;
}
.sus > span {
  flex: 1 1 100%;
  font-size: 12.5px;
}
.sbf {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  cursor: pointer;
}
/* Tasbih melayang: ukuran bisa diatur (--fts), posisi bawaan lebih ke bawah */
#ftb {
  transform: scale(var(--fts, 1));
  transform-origin: 100% 100%;
  transition: transform 0.2s;
}
#ftb {
  bottom: calc(68px + env(safe-area-inset-bottom));
}
body.subhal #ftb {
  bottom: calc(8px + env(safe-area-inset-bottom));
}
@media (min-width: 600px) {
  #ftb {
    bottom: 16px;
  }
}
/* Kata-kata Beranda: pilihan waktu tampil saat menambah & mengedit */
.qa .qwk,
.qedit .qwk {
  flex: none;
  width: auto;
  min-width: 0;
  max-width: 130px;
  margin: 0;
}
.qedit {
  flex-wrap: wrap;
  gap: 8px;
}
.qedit #qv {
  flex: 1 1 220px;
}
/* Kitab layar penuh: saat halaman dicubit-perbesar, geser antarhalaman dikunci */
.kfull #kp.kzum {
  overflow: hidden;
  touch-action: none;
}
#kp {
  touch-action: pan-x pan-y;
}
#kp img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}
.kfull:not(.kgulir) #kp img {
  touch-action: pan-x;
}
.kpi {
  transform-origin: 0 0;
  will-change: auto;
}
.kfo-s {
  order: 1;
}
.ksh-n {
  font-size: 12.5px;
  margin: 8px 2px 0;
}
.kfull #kp img {
  transform-origin: center;
  will-change: auto;
}
/* Kompas kiblat: piringan berputar mengikuti arah HP, jarum menunjuk Ka'bah */
.kbl {
  position: relative;
  width: min(280px, 78vw);
  margin: 18px auto 8px;
}
.kbl .kbm {
  position: absolute;
  left: 50%;
  top: -10px;
  z-index: 2;
  width: 0;
  height: 0;
  margin-left: -9px;
  border: 9px solid transparent;
  border-bottom: 0;
  border-top: 14px solid var(--ink);
}
.kbd {
  transition: transform 0.12s linear;
  will-change: transform;
}
.kbd svg {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.08));
}
.kbc {
  fill: var(--card);
  stroke: var(--line);
  stroke-width: 2;
}
.kbi {
  fill: none;
  stroke: var(--line);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}
/* Garis skala kompas Kiblat (khusus elemen line, agar kelas lain bernama sama tidak ikut pudar) */
line.tk {
  stroke: var(--mut);
  stroke-width: 1;
  opacity: 0.5;
}
line.tkm {
  stroke: var(--mut);
  stroke-width: 1.5;
}
line.tkp {
  stroke: var(--ink);
  stroke-width: 2.5;
}
.ma,
.mau {
  font: 700 15px var(--ui);
  text-anchor: middle;
  fill: var(--mut);
}
.mau {
  fill: var(--g);
}
.kbj {
  fill: var(--g);
}
.kbe {
  fill: var(--line);
}
/* Ka'bah & warna kompas mengikuti tema (terang/gelap) dan aksen */
.kka {
  fill: var(--ink);
  stroke: var(--ink);
  stroke-width: 1;
}
.kkb {
  fill: var(--g);
  stroke: var(--card);
  stroke-width: 0.8;
}
.kbp {
  fill: var(--card);
  stroke: var(--g);
  stroke-width: 3;
}
.kbq {
  fill: var(--g);
}
.kbl.pas .kbc {
  stroke: var(--g);
  stroke-width: 5;
}
.kbl.pas .kbj {
  fill: var(--g);
}
.kbl.pas .kbm {
  border-top-color: var(--g);
}

/* Video tutorial (js/pages/tutorial.js): video HP vertikal dibatasi tingginya, video desktop selebar kolom */
.tut {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  scroll-margin-top: 80px;
}
.tuth {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 14px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.tuth > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}
.tuth > .ic {
  flex: none;
  color: var(--mut);
  transition: transform 0.2s;
}
.tut.buka .tuth > .ic {
  transform: rotate(90deg);
}
.tuth b {
  display: block;
  font-size: 17px;
}
.tuth small {
  display: block;
  font-size: 13px;
  margin-top: 2px;
}
.tutb:not(:empty) {
  padding: 0 14px 14px;
}
.tutn {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 15px;
}
.tutv {
  border-radius: 14px;
  overflow: hidden;
  background: #111;
  margin: 0 auto;
}
.tutv video {
  display: block;
  width: 100%;
  height: 100%;
  background: #111;
}
.tutv.hp {
  width: min(100%, calc(70vh * 9 / 16));
  aspect-ratio: 9/16;
}
.tutv.desktop {
  width: 100%;
  aspect-ratio: 16/9;
}
.tutd {
  margin-top: 12px;
}
.tutd summary {
  cursor: pointer;
  font-weight: 600;
  padding: 6px 0;
}
.tutl {
  margin: 6px 0 0;
  padding-left: 22px;
  line-height: 1.6;
}
.tutl li {
  margin: 2px 0;
}
.tutl b {
  font-weight: 700;
}

/* Dialog wajib dijawab (mis. Simpan obrolan Fadz AI): digoyang bila diketuk di luar atau ditutup dengan tombol
   kembali */
.back-d .sheet.goyang {
  animation: goyang 0.32s ease;
}
@keyframes goyang {
  20%,
  60% {
    transform: translateX(-7px);
  }
  40%,
  80% {
    transform: translateX(7px);
  }
}

/* Dukung kami (js/pages/dukung.js) */
.dkh {
  text-align: center;
  padding: 22px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
}
.dkh > b {
  display: block;
  font-size: 18px;
  margin: 10px 0 6px;
}
.dkh p {
  margin: 0;
}
.dki {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
}
.dkr .t b {
  font-weight: 700;
  letter-spacing: 0.02em;
}
.dkbtn {
  flex: none;
  min-width: 76px;
  height: 34px;
  padding: 0 18px;
  border: 1.5px solid var(--g);
  border-radius: 999px;
  background: transparent;
  color: var(--g);
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s,
    transform 0.1s;
}
.dkbtn:hover {
  background: var(--g);
  color: var(--on);
}
.dkbtn:active {
  transform: scale(0.95);
  background: var(--g);
  color: var(--on);
}
/* Ganti tema: tampilan baru melebar melingkar dari tombol yang dipencet (View Transitions, lihat temaGanti di
   js/core/ui.js) */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-new(root) {
  z-index: 2;
}
/* Selama ganti tema konten halaman ikut gambar root, supaya seluruh layar terpotong lingkaran yang sama */
html.tgt #view {
  view-transition-name: none;
}
html.tciut::view-transition-old(root) {
  z-index: 3;
}
/* Selama ganti tema hanya satu gambar (seluruh layar) yang dilingkarkan; transisi halaman (page) dimatikan sementara */
::view-transition-group(root) {
  animation: none;
}
/* Dialog konfirmasi Buka rekening (Dukung kami) */
.dkno {
  margin: 12px 0;
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--fill);
}
.dkno small {
  display: block;
  font-size: 12px;
}
.dkno > b {
  display: block;
  font-size: 22px;
  letter-spacing: 0.04em;
  margin: 4px 0;
  color: var(--ink);
}
.dkok {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--g);
}
/* Teks sementara pesan suara (saat rekaman dijeda) */
.aivt {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 2px 6px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--fill);
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.45;
  max-height: 30vh;
  overflow: auto;
  animation: qin 0.25s;
}
.aivt > .ic {
  flex: none;
  margin-top: 2px;
  color: var(--g);
}
.aivt span {
  flex: 1;
  min-width: 0;
  white-space: pre-wrap;
}
.aivt em {
  color: var(--mut);
  font-style: normal;
}
.aivt.proses > i {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  border: 2px solid var(--line);
  border-top-color: var(--g);
  border-radius: 50%;
  animation: aiputar 0.8s linear infinite;
}
.aivt[hidden] {
  display: none;
}
.aisv [data-svm] {
  display: grid;
  place-items: center;
  color: var(--g);
}
/* Tasbih layar penuh: seluruh area di bawah bilah atas adalah tombol hitung */
#view:has(> .tsf) {
  display: flex;
  flex-direction: column;
}
:is(#view, .vpeek):has(> .tsf) .bar {
  flex: none;
}
.tsf {
  --p: 0;
  position: relative;
  flex: 1;
  min-height: 340px;
  width: 100%;
  margin: 0 0 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 28px;
  background: var(--g);
  color: var(--on);
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
  transition: transform 0.09s ease;
}
.tsf:active {
  transform: none;
}
.tsf::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.22), transparent 60%);
  opacity: 0;
  pointer-events: none;
}
.tsf.ketuk::after {
  animation: none;
}
.tsf.penuh::after {
  animation: none;
}
@keyframes tsdenyut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.tsr {
  position: relative;
  width: min(62vmin, 300px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(currentColor calc(var(--p) * 1%), color-mix(in srgb, currentColor 18%, transparent) 0);
  -webkit-mask: radial-gradient(circle, transparent 63%, #000 64%);
  mask: radial-gradient(circle, transparent 63%, #000 64%);
  transition: background 0.2s;
}
.tsw {
  position: relative;
  display: grid;
  place-items: center;
}
.tsw > * {
  grid-area: 1/1;
}
.tsf b {
  font-size: clamp(56px, 16vmin, 104px);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tsk {
  font-size: 15px;
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
}
.tsh {
  position: absolute;
  bottom: 14px;
  font-size: 12px;
  opacity: 0.6;
}
.tss .tsl {
  display: block;
  margin: 14px 2px 6px;
}
.tss .list {
  margin: 0;
}

/* Mode mushaf ikut warna teks bacaan; ayat dipilih/dituju diberi blok warna, ayat dituju berkedip 3 kali */
#ay .mushaf {
  color: var(--tc, var(--bc, var(--ink)));
}
.ay.aytuju {
  background: color-mix(in srgb, var(--g) 9%, var(--card));
  border-color: color-mix(in srgb, var(--g) 55%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--g) 22%, transparent);
}
.ayt.aytuju {
  background: color-mix(in srgb, var(--g) 16%, transparent);
  border-radius: 8px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--g) 16%, transparent);
}
.aytuju.aykedip {
  animation: aykedip 0.3s ease-in-out 3;
}
@keyframes aykedip {
  50% {
    background: color-mix(in srgb, var(--g) 34%, transparent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--g) 40%, transparent);
  }
}
.ayt {
  transition: background 0.2s;
}
.am-lt {
  margin: 4px 0 0;
  font-size: 14px;
}
.am-tr {
  margin: 6px 0 8px;
  font-size: 14px;
  line-height: 1.55;
}
.ksh-mn {
  display: none;
  font-size: 12.5px;
  margin: 0 2px 8px;
}
.msf .ksh-mn {
  display: block;
}
.msf .ksh-mt {
  opacity: 0.45;
  pointer-events: none;
}

/* Peta arah kiblat */
.kmap {
  padding: 14px;
}
.kmh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.kmh > span {
  min-width: 0;
}
.kmh small {
  font-size: 12.5px;
}
.kmh .seg {
  flex: none;
  width: auto;
  min-width: 170px;
  margin: 0;
}
.kmp {
  position: relative;
  height: min(62vh, 380px);
  border-radius: 14px;
  overflow: hidden;
  background: var(--fill);
  z-index: 0;
}
.kmm {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 16px;
  text-align: center;
}
.kmf {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0 6px;
}
.kmf .sb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.kmk {
  display: block;
  font-size: 12.5px;
  line-height: 1.5;
}
.kmi {
  display: grid !important;
  place-items: center;
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  border: 2px solid #fff;
}
.kmi-kb {
  background: #1d1f1e;
  color: #e7c873;
}
.kmi-sy {
  background: var(--g);
  color: var(--on);
}
.kmp .leaflet-control-attribution {
  font-size: 9px;
}
[data-theme='dark'] .kmp:not(.sat) .leaflet-tile-pane {
  filter: invert(0.92) hue-rotate(180deg) brightness(0.9) contrast(0.9);
}

/* Tombol notifikasi per waktu di Jadwal salat */
#jt .row .t {
  flex: 1;
}
.jnb {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 11px;
  border: 0;
  border-radius: 99px;
  background: var(--fill);
  color: var(--ink);
  font: 600 12.5px/1 inherit;
  cursor: pointer;
}
.jnb.jn-mati {
  color: var(--mut);
}
.jnb.jn-mati .ic {
  opacity: 0.5;
}
.jnb.jn-adzan {
  background: var(--g);
  color: var(--on);
}
.jnl button {
  align-items: center;
}
.jnl button > span {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: left;
}
.jnl button.on {
  color: var(--g);
}
.jnl small {
  font-size: 12.5px;
  font-weight: 400;
}
.jnk {
  display: block;
  margin: 10px 4px 0;
  font-size: 13px;
  text-decoration: none;
}

.jnb {
  min-width: 86px;
  justify-content: center;
}
.jnb.jnx {
  visibility: hidden;
}
.jnb.jn-senyap,
.jnb.jn-bunyi {
  background: var(--gs, var(--fill));
}
.jnh {
  display: block;
  margin: 12px 4px 4px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.jns-s {
  max-height: 88vh;
  overflow: auto;
}
.jnl .jnc {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-style: normal;
}
.jnl .jnc.on {
  background: var(--g);
  color: var(--on);
}
.jns button {
  min-height: 48px;
}
.kmf .sb.on {
  background: var(--g);
  color: var(--on);
}
.kmp .leaflet-control-zoom a {
  width: 36px;
  height: 36px;
  line-height: 36px;
  font-size: 20px;
}
/* Blok ayat tujuan lebih tegas */
.ay.aytuju {
  border-color: var(--g);
  box-shadow:
    0 0 0 2px var(--g),
    0 6px 18px color-mix(in srgb, var(--g) 18%, transparent);
}
@keyframes aykedip {
  50% {
    background: color-mix(in srgb, var(--g) 30%, var(--card));
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--g) 55%, transparent);
  }
}
/* Geser samping (js/core/events.js): halaman / tab sebelah yang ikut bergeser bersama jari */
.vpeek {
  position: absolute;
  z-index: 1;
  background: var(--bg);
  overflow: hidden;
  padding: 16px max(16px, env(safe-area-inset-right)) 24px max(16px, env(safe-area-inset-left));
  word-break: break-word;
  pointer-events: none;
  will-change: transform;
}
.vpeek.blk {
  z-index: 0;
  background: var(--bg);
}
.vpeek p {
  line-height: 1.65;
}
.vpeek .card > p + p {
  margin-top: 8px;
}
.no-lt .vpeek .lt,
.no-tr .vpeek .tr {
  display: none;
}
.tpeek {
  position: absolute;
  pointer-events: none;
  will-change: transform;
}
@media (min-width: 600px) {
  .vpeek {
    padding: 20px 24px;
  }
}
@media (max-width: 420px) {
  .vpeek {
    padding-top: 12px;
  }
}
/* Pratinjau geser surah (js/pages/quran.js): sama dengan #ay */
.qpk {
  padding-bottom: 90px;
}
.qpk .mushaf {
  color: var(--tc, var(--bc, var(--ink)));
}
/* Jangan biarkan peramban menggeser posisi gulir sendiri saat isi diganti (geser halaman/surah) */
#view {
  overflow-anchor: none;
}
/* Margin atas elemen pertama melebur ke wadahnya di halaman asli; di lapisan pratinjau tidak, jadi dinolkan agar
   posisinya sama persis */
.tpeek > :first-child,
.tpeek > .qpk > :first-child {
  margin-top: 0;
}
/* Tasbih (melayang & halaman Tasbih): saat dipencet warna dan ukuran tetap, hanya angka yang bertambah */
#ftb #fc,
#ftb #fc:active,
#ftb #fc:focus,
.tsf,
.tsf:active,
.tsf:focus {
  -webkit-tap-highlight-color: transparent;
  outline: 0;
}
.tsf:active,
.tsf:focus {
  background: var(--g);
  color: var(--on);
}
#ftb #fc:active,
#ftb #fc:focus {
  background: var(--card);
  color: var(--ink);
}
/* Pratinjau geser: jarak tepi sama persis dengan #view di setiap ukuran layar, ruang batang gulir juga disisakan */
.vpeek {
  scrollbar-gutter: stable;
}
@media (min-width: 600px) {
  .vpeek {
    padding: 20px 24px;
  }
}
@media (max-width: 420px) {
  .vpeek {
    padding-top: 12px;
  }
}
/* Pengaturan di HP: penuh dari ujung ke ujung (seperti Instagram); judul dan kepala halaman tetap diberi jarak */
@media (max-width: 899px) {
  #view.phal,
  .vpeek.phal {
    padding-left: 0;
    padding-right: 0;
  }
  .phal > h1,
  .phal > h2,
  .phal > .bar,
  .phal > p,
  .phal > small,
  .phal > .note {
    margin-left: 16px;
    margin-right: 16px;
  }
  .phal .list,
  .phal > .card,
  .phal > div > .card {
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;
  }
  .phal .list > .row {
    padding-left: 16px;
    padding-right: 16px;
  }
}
.vpeek {
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.vpeek:has(> .rh) {
  padding-top: 0;
}
.vpeek:has(> .tsf) {
  display: flex;
  flex-direction: column;
}
/* Menu bawah seperti Instagram: saat dipencet hanya warna yang berubah (tanpa kotak, tanpa mengecil) */
#nav a {
  -webkit-tap-highlight-color: transparent;
  outline: 0;
}
@media (max-width: 899px) {
  #nav a:active,
  #nav a:focus {
    background: transparent;
    transform: none;
  }
}
/* Tombol kembali seperti Instagram: panah polos tanpa lingkaran, area ketuk tetap lega, sejajar tepi isi */
.bk {
  width: 44px;
  height: 44px;
  margin-left: -10px;
  background: transparent !important;
  color: var(--ink) !important;
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
}
.bk .ic {
  width: 24px;
  height: 24px;
  stroke-width: 2;
}
.bk:active {
  background: var(--fill) !important;
}
.ktb .bar .bk {
  width: 40px;
  height: 40px;
}
/* Pengaturan seperti Instagram */
.setcari {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 6px;
  padding: 0 12px;
  height: 42px;
  border-radius: 10px;
  background: var(--fill);
  color: var(--mut);
}
.setcari input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  outline: 0;
}
.setg {
  border-bottom: 8px solid var(--fill);
}
.setg:last-of-type {
  border-bottom: 0;
}
.setg h3 {
  margin: 16px 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--mut);
}
.setg .list > .row {
  border-bottom: 0;
  background: transparent;
  min-height: 56px;
}
.setg .row .si {
  background: transparent;
  width: 28px;
  height: 28px;
  color: var(--ink);
}
.setg .row .si .ic {
  width: 24px;
  height: 24px;
}
.setg .row .t {
  font-size: 16px;
}
.setg .row .t small {
  font-size: 13px;
  line-height: 1.35;
}
.setkosong {
  margin: 16px;
}
@media (max-width: 899px) {
  .phal > .setcari {
    margin-left: 16px;
    margin-right: 16px;
  }
  .phal .setg h3 {
    margin-left: 16px;
    margin-right: 16px;
  }
}
/* Kalender: judul bulan bisa diketuk untuk memilih bulan & tahun */
.mn .mnj {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}
.mn .mnj b {
  display: flex;
  align-items: center;
  gap: 4px;
}
.mn .mnj b .ic {
  color: var(--mut);
}
.mn .mnj:active {
  background: var(--fill);
}
.kps .kpy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12px 0 8px;
}
.kps .kpy b {
  font-size: 20px;
}
.kps .kpm {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.kps .kpm button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  text-transform: capitalize;
  cursor: pointer;
}
.kps .kpm button small {
  font-size: 10.5px;
  font-weight: 400;
  color: var(--mut);
  text-transform: none;
}
.kps .kpm button.kini {
  border-color: var(--g);
}
.kps .kpm button.on {
  background: var(--g);
  color: var(--on);
  border-color: var(--g);
}
.kps .kpm button.on small {
  color: var(--on);
  opacity: 0.8;
}
/* Kalkulator zakat: pilihan jenis dan kolom isian yang lebih rapi */
.zkc {
  gap: 6px;
  margin-bottom: 14px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent);
}
.zkc .chip2 {
  padding: 9px 15px;
  border: 0;
  background: var(--fill);
  color: var(--ink);
  font-weight: 500;
}
.zkc .chip2.on {
  background: var(--g);
  color: var(--on);
  font-weight: 700;
}
.zk .zkt {
  margin: 4px 0 12px;
  font-size: 19px;
  color: var(--ink);
}
.zk .zgold {
  margin-bottom: 12px;
  padding: 14px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--g) 12%, var(--card));
  border: 1px solid color-mix(in srgb, var(--g) 30%, transparent);
}
.zk .zgold small {
  display: block;
  margin-top: 6px;
  font-size: 12px;
}
.zk .zf {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--line);
}
.zk .zfi label {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.zk .zin {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 12px;
  background: var(--fill);
  border: 1px solid transparent;
  transition: border-color 0.15s;
}
.zk .zin:focus-within {
  border-color: var(--g);
}
.zk .zin .in {
  flex: 1;
  min-width: 0;
  margin: 0;
  height: 48px;
  border: 0;
  background: transparent;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}
.zk .zin select.in {
  padding-right: 12px;
}
.zk .zin .zu {
  flex: none;
  padding: 0 14px;
  color: var(--mut);
  font-size: 14px;
  font-weight: 600;
}
.zk .zin.rp .zu {
  padding: 0 0 0 14px;
}
.zk .zin.rp .in {
  padding-left: 8px;
}
.zk .zres {
  margin-top: 14px;
  padding: 16px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--g);
}
/* Bagian Majelis Fadzkuruuni (Wirid, Maulid): dipisah jelas dari bacaan umum */
.mjl {
  margin: 0 0 6px;
  padding: 12px 0 4px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--g) 9%, transparent);
}
.mjl .mjl-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 14px 8px;
  font-size: 15px;
  color: var(--g);
}
.mjl .list > .row {
  background: transparent;
}
.mjl .mjl-i {
  background: var(--g);
  color: var(--on);
}
.mjl-b {
  display: inline-block;
  margin: 2px 4px 2px 0;
  padding: 1px 8px;
  border-radius: 99px;
  background: var(--g);
  color: var(--on);
  font-size: 11px;
  font-weight: 700;
}
.mjl-u {
  margin-top: 18px;
}
/* Lembar tawaran offline & pembaruan */
.offt,
.upd {
  text-align: left;
}
.offt-i {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 10px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--g) 16%, transparent);
  color: var(--g);
}
.upd-l {
  margin: 0;
  padding-left: 18px;
  max-height: 34vh;
  overflow: auto;
  font-size: 13.5px;
  line-height: 1.5;
}
.upd-l li {
  margin: 3px 0;
}
.sb:disabled {
  opacity: 0.4;
  cursor: default;
}
/* Izin Aplikasi: dua pilihan per izin */
.izb {
  display: flex;
  flex: none;
  gap: 6px;
  align-items: center;
}
.izb .izt {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--mut);
}
@media (max-width: 899px) {
  .phal #izl > p,
  .phal #izl > h2 {
    margin-left: 16px !important;
    margin-right: 16px !important;
  }
}
@media (max-width: 420px) {
  .izb {
    flex-direction: column;
    align-items: stretch;
  }
  .izb .btn {
    padding: 6px 10px;
    font-size: 13px;
  }
}
/* ===== Tampilan halus untuk tombol, lencana, dan ikon (gaya seperti Pengaturan Instagram) ===== */
/* Tombol: bentuk pil, ukuran nyaman, tanpa tepi kotak tebal */
.btn {
  border-radius: 999px;
}
.btn.s {
  background: color-mix(in srgb, var(--g) 14%, transparent);
  color: var(--g);
}
.sb {
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
}
.sb.dng {
  background: color-mix(in srgb, #d6533f 12%, transparent);
  color: #d6533f;
}
/* Lencana status: titik warna kecil + teks, warna kalem di tema gelap maupun terang */
.bdg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px 2px 7px;
  vertical-align: middle;
  background: color-mix(in srgb, var(--g) 13%, transparent);
  color: var(--g);
  font-weight: 600;
}
.bdg::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.bdg.no {
  background: color-mix(in srgb, #d6533f 13%, transparent);
  color: #d6533f;
}
.bdg.mid {
  background: color-mix(in srgb, #c9961a 15%, transparent);
  color: #c9961a;
}
/* Halaman Pengaturan: ikon polos tanpa lingkaran, baris lega tanpa garis */
.phal .srw {
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 0;
}
.phal .srw .si,
.phal .list > .row .si {
  width: 28px;
  height: 28px;
  background: transparent;
  color: var(--ink);
}
.phal .srw .si .ic,
.phal .list > .row .si .ic {
  width: 24px;
  height: 24px;
  stroke-width: 1.7;
}
.phal .srw .t {
  font-size: 16px;
  line-height: 1.35;
}
.phal .srw .t small {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.4;
}
.phal .srw .btn.s {
  height: 34px;
  padding: 0 14px;
  font-size: 14px;
}
/* Izin Aplikasi: "Izinkan" penuh berwarna, "Tolak" / "Cabut izin" berupa teks */
.izb {
  gap: 2px;
}
.izb .btn {
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 14px;
}
.izb [data-izin] {
  background: var(--g);
  color: var(--on);
}
.izb .izt {
  border: 0;
  background: transparent;
  color: var(--mut);
  font-weight: 600;
}
.izb .izt:active {
  background: var(--fill);
}
@media (max-width: 420px) {
  .izb {
    flex-direction: row;
  }
  .izb .btn {
    padding: 0 11px;
    font-size: 13px;
  }
}
/* Pratinjau admin: elemen yang sedang diseret (tekan lama lalu geser) */
.sret {
  position: relative;
  z-index: 50;
  transition: none !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
  border-radius: 14px;
  background: var(--card);
  opacity: 0.96;
  cursor: grabbing;
}
body.sreton,
body.sreton * {
  user-select: none !important;
  -webkit-user-select: none !important;
  touch-action: none !important;
}
/* ===== Tombol gaya aplikasi pada umumnya (seperti Instagram): kotak bersudut sedikit membulat, bukan pil =====
   Tinggi seragam, tulisan tebal di tengah; utama berwarna penuh, kedua abu-abu lembut, berbahaya bertulisan merah. */
.btn {
  border-radius: 10px;
  height: 40px;
  padding: 0 16px;
  font-size: 14.5px;
  font-weight: 650;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1;
}
.btn.s {
  height: 36px;
  padding: 0 14px;
  border-radius: 9px;
  font-size: 14px;
  background: var(--fill);
  color: var(--ink);
}
.sb {
  height: 34px;
  padding: 0 14px;
  border-radius: 9px;
  font-size: 13.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.sb.pri {
  background: var(--g);
  color: var(--on);
}
.sb.dng {
  background: var(--fill);
  color: #d6533f;
}
.izb .btn {
  border-radius: 9px;
  height: 34px;
}
.phal .srw .btn.s {
  border-radius: 9px;
}
/* Tombol tunggal di kartu memenuhi lebar; pasangan tombol dibagi sama lebar */
.card > .act {
  flex-wrap: nowrap;
}
.card > .act > .sb {
  flex: 1;
  height: 38px;
  font-size: 14px;
}
[data-hapusakun] {
  width: 100%;
  height: 40px !important;
  color: #d6533f !important;
}
/* Tombol tersembunyi tetap tersembunyi walau tombol memakai display:inline-flex */
.btn[hidden],
.sb[hidden] {
  display: none !important;
}
/* Izin: "Izinkan" tetap tombol utama berwarna, "Tolak"/"Cabut izin" berupa teks */
.izb .btn[data-izin] {
  background: var(--g);
  color: var(--on);
}
.izb .btn.izt {
  background: transparent;
  color: var(--mut);
}
/* Geser halaman mulus: peramban mengurus gulir vertikal sendiri (pendengar sentuh tidak memblokir),
   halaman & lapisan pratinjau jadi lapisan GPU sehingga cukup dipindah, tidak digambar ulang tiap frame */
#view,
#ay {
  touch-action: pan-y;
}
#view.gsj,
.gsj,
.vpeek,
.tpeek {
  will-change: transform;
  backface-visibility: hidden;
}
/* Tanpa garis batang gulir di HP (seperti aplikasi pada umumnya); gulir tetap jalan */
@media (max-width: 899px) {
  html,
  body,
  #view,
  .vpeek,
  .sheet,
  .list,
  .chips,
  .car {
    scrollbar-width: none;
  }
  html::-webkit-scrollbar,
  body::-webkit-scrollbar,
  #view::-webkit-scrollbar,
  .sheet::-webkit-scrollbar,
  .car::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
  #view {
    scrollbar-gutter: auto;
  }
  .vpeek {
    scrollbar-gutter: auto;
  }
}
.kps .kpth {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: 0;
  border-radius: 10px;
  background: var(--fill);
  color: var(--ink);
  font: inherit;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
}
.kps .kpth .ic {
  width: 16px;
  height: 16px;
  color: var(--mut);
  stroke-width: 2.2;
}
/* Chevron di judul bulan: kecil, rapat ke teks, tepat di tengah tinggi huruf */
.mn .mnj b {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  line-height: 1.2;
}
.mn .mnj b .ic {
  width: 15px;
  height: 15px;
  stroke-width: 2.4;
  color: var(--mut);
  margin-top: 1px;
}
/* Bilah Fadzkuruuni | Umum: dua tombol sejajar, sudut sedikit membulat */
.pbar {
  display: flex;
  gap: 8px;
  margin: 0 0 14px;
}
.pbar button {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
}
.pbar button .ic {
  width: 16px;
  height: 16px;
}
.pbar button.on {
  background: var(--g);
  border-color: var(--g);
  color: var(--on);
}
.pbi[hidden] {
  display: none !important;
}
.mjd > .row .mjl-i {
  background: var(--g);
  color: var(--on);
}
/* Foto profil (avatar bulat) */
.ava {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: color-mix(in srgb, var(--g) 14%, transparent);
  color: var(--g);
  font-weight: 700;
}
#nav .navava {
  width: 24px;
  height: 24px;
  border: 1.5px solid transparent;
  box-sizing: border-box;
}
#nav a.on .navava {
  border-color: var(--ink);
}
.fpb {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 14px;
}
.fpb .act {
  margin: 0;
  flex-wrap: wrap;
}
.fpb label.sb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.setpro {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 16px 16px;
  color: inherit;
  text-decoration: none;
}
.setpro .t {
  flex: 1;
  min-width: 0;
}
.setpro .t b {
  font-size: 17px;
}
.setpro small {
  color: var(--mut);
}
.setpro .sb {
  flex: none;
}
/* Kelas online */
.kls {
  padding: 14px;
  margin: 0 0 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.kls.live {
  border-color: #d93025;
}
.kls p {
  margin: 6px 0 0;
  font-size: 14px;
}
.klt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}
.klv {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 8px;
  background: #fde8e6;
  color: #c5221f;
  font-size: 12px;
  font-weight: 700;
}
.kla {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.kla .btn {
  flex: 1 1 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}
.kla .sb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.kbuat {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 12px;
}
.kkosong {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.kpx {
  margin: 0 0 12px;
  border-radius: 12px;
  overflow: hidden;
  background: #e9dcc0;
}
#kcv {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.kinfo {
  margin: 0 0 12px;
}
.kbic {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 15px;
}
.kbic .ic {
  color: var(--g);
  flex: none;
}
.kctl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin: 0 0 16px;
}
.kctl .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.kctl .kkel {
  color: #c5221f;
}
.kll:empty {
  display: none;
}
.bar .kll {
  margin-left: auto;
}
#klmini {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(76px + env(safe-area-inset-bottom));
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(92vw, 420px);
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--card, #fff);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  text-decoration: none;
  font-size: 14px;
}
#klmini .t {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#klmini[hidden] {
  display: none;
}
.kfm label {
  display: block;
  margin: 10px 0 4px;
  font-size: 13px;
  color: var(--mut);
}
.kfm .act {
  margin-top: 14px;
  flex-wrap: wrap;
}
/* Deretan tombol tidak boleh terpotong layar: bila tidak muat, geser ke samping (tanpa batang gulir) */
.act,
.card > .act,
.fpb .act,
.kfm .act,
.back-d.tgh .act,
.kla {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  min-width: 0;
  max-width: 100%;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.act::-webkit-scrollbar,
.kla::-webkit-scrollbar {
  display: none;
}
.act > *,
.card > .act > .sb,
.kla > * {
  flex: 1 0 auto;
  white-space: nowrap;
}
.kla > .btn {
  flex-basis: 100%;
}
.fpb {
  min-width: 0;
}
.fpb > .act {
  flex: 1;
}
.fpt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.setpro > .ic {
  color: var(--mut);
  flex: none;
}
.kperingat {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  margin: 0 0 10px;
  border-radius: 12px;
  background: #fff4e5;
  color: #7a4b00;
  font-size: 13.5px;
  line-height: 1.5;
}
.kperingat .ic {
  flex: none;
  margin-top: 1px;
}
[data-theme='dark'] .kperingat,
.dark .kperingat {
  background: #3a2a10;
  color: #f5d9a8;
}
.kfm .kcek {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--ink);
}
.krec {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #c5221f;
  font-size: 13px;
  font-weight: 700;
}
.kctl .krb {
  grid-column: 1/-1;
}
/* Kelas dengan video YouTube */
.kyt,
.kfyp {
  position: relative;
  display: block;
  margin: 0 0 8px;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 16/9;
  background: #000;
}
.kyt img,
.kfyp img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.kyp {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kytl {
  position: absolute;
  left: 8px;
  top: 8px;
  background: #d93025;
  color: #fff;
}
.kfyp[hidden] {
  display: none;
}
.kfyp {
  margin-top: 8px;
}
.kvid {
  margin: 0 0 12px;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16/9;
  background: #000;
}
.kvid iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.kctl .kmicn {
  grid-column: 1/-1;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--g) 10%, transparent);
  font-size: 13.5px;
  line-height: 1.45;
}
.kctl .kmicn .ic {
  flex: none;
  color: var(--g);
}
/* Kelas online gaya Zoom */
.kz {
  margin: 0 0 12px;
}
.kzs {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 14px;
  overflow: hidden;
  background: #1f2421;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: 3px solid transparent;
  outline-offset: -3px;
  transition: outline-color 0.2s;
}
.kzs.bicara {
  outline-color: #3ecf8e;
}
.kzs video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}
.kzs video.cermin {
  transform: scaleX(-1);
}
.kzsa {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kzw {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #c9d1cc;
  font-size: 14px;
}
.kzsn {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 13px;
}
.kzsn:empty {
  display: none;
}
.kzsn small {
  opacity: 0.75;
}
.kzsn .ic {
  color: #3ecf8e;
}
.kz .kzg {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.kz .kzg:empty {
  display: none;
}
.kzt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  border-radius: 12px;
  background: var(--fill, #f0f2f1);
  outline: 2px solid transparent;
  outline-offset: -2px;
}
.kzt.bicara {
  outline-color: #3ecf8e;
}
.kzn {
  display: flex;
  align-items: center;
  gap: 3px;
  max-width: 100%;
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.kzn .ic {
  flex: none;
  color: var(--mut);
}
.kzh {
  display: inline-flex;
  color: #c98a00;
}
.kzh .ic {
  color: #c98a00;
}
/* Kotak jamaah dengan video */
.kzt {
  position: relative;
  overflow: hidden;
  min-height: 92px;
  justify-content: center;
}
.kzt video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}
.kzt video.cermin {
  transform: scaleX(-1);
}
.kzt.vid .kzn {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 4px;
  justify-content: center;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
}
.kzt.vid .kzn .ic {
  color: #fff;
}
.kza[hidden] {
  display: none;
}
/* Pesan di kelas */
.kchat {
  margin: 4px 0 14px;
}
.kchat h2 {
  margin: 0 0 8px;
}
.kcl {
  max-height: 260px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.kcm {
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  max-width: 85%;
  padding: 7px 10px;
  border-radius: 12px;
  background: var(--fill, #f0f2f1);
  font-size: 14px;
  line-height: 1.4;
}
.kcm b {
  font-size: 12px;
  color: var(--g);
}
.kcm small {
  align-self: flex-end;
  font-size: 10.5px;
  color: var(--mut);
}
.kcm.saya {
  align-self: flex-end;
  background: color-mix(in srgb, var(--g) 14%, transparent);
}
.kcf {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.kcf .in {
  flex: 1;
  min-width: 0;
}
.kcf .btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  padding: 0;
}
/* Pemberitahuan kelas di dalam aplikasi */
#knotif {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: calc(12px + env(safe-area-inset-top));
  z-index: 60;
  display: flex;
  gap: 10px;
  align-items: center;
  width: min(92vw, 420px);
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--card, #fff);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  text-decoration: none;
}
#knotif .ic {
  flex: none;
  color: #d93025;
}
#knotif span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
#knotif small {
  color: var(--mut);
  font-size: 12.5px;
}
#knotif[hidden] {
  display: none;
}
/* Titik status AI: hijau hanya saat online; selain itu abu-abu */
.aidot.off {
  background: var(--mut);
  box-shadow: none;
  opacity: 0.6;
}
img.kzav {
  object-fit: cover;
  display: block;
}
/* Sorot & berbagi layar */
.kzs {
  cursor: default;
}
.kzt {
  cursor: pointer;
  border: 0;
  font: inherit;
  color: inherit;
}
.kzs video.layar,
.kzt video.layar {
  object-fit: contain;
  background: #111;
}
.kctl .btn.kon {
  background: #fde8e6;
  color: #c5221f;
}
/* Daftar pilihan suara adzan, tiap pilihan bisa dicoba */
.sual {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 4px 0 14px;
}
.suai {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.suai.on {
  border-color: var(--g);
  background: color-mix(in srgb, var(--g) 8%, transparent);
}
.suap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 14.5px;
  text-align: left;
  cursor: pointer;
}
.sur {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--line);
}
.suai.on .sur {
  border-color: var(--g);
  box-shadow: inset 0 0 0 4px var(--card, #fff);
  background: var(--g);
}
.suai .sb {
  flex: none;
}
.srw [data-wcoba] {
  margin-right: 8px;
}
.kcm .kcl-a {
  color: #1a73e8;
  text-decoration: underline;
  word-break: break-all;
  font-weight: 600;
}
.kcm.saya .kcl-a {
  color: #0b57d0;
}
/* Jadwal salat: pilih tanggal */
.jdate {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 14px 0 6px;
}
.jdate .jdl {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.jdate .jdl b {
  font-size: 15px;
}
.jdate .jdl small {
  font-size: 12.5px;
}
.jdk {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 0 0 6px;
}
.jdk .sb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.jdk [hidden] {
  display: none;
}
.jdpm {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 10px 0;
}
.jdpm span {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.jdpm small {
  font-size: 12px;
}
.jdpm .ib {
  font-size: 18px;
  font-weight: 700;
}
.jdpg {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  text-align: center;
}
.jdpg i {
  font-style: normal;
  font-size: 11.5px;
  color: var(--mut);
  padding: 2px 0;
}
.jdpg button {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 0;
  border: 0;
  border-radius: 9px;
  background: var(--fill);
  color: inherit;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}
.jdpg button small {
  font-size: 10px;
  color: var(--mut);
}
.jdpg button.kini {
  outline: 1.5px solid var(--g);
}
.jdpg button.on {
  background: var(--g);
  color: var(--on);
}
.jdpg button.on small {
  color: inherit;
  opacity: 0.8;
}
.srw.upada {
  background: color-mix(in srgb, var(--g) 9%, transparent);
}
.srw.upada small b {
  color: var(--g);
}
.jdpm .jdpj {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 4px;
  border-radius: 10px;
}
.jdpm .jdpj b {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.jdpm .jdpj .ic {
  color: var(--mut);
}
button.jdpj:active {
  background: var(--fill);
}
.jdpb {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.jdpb button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 4px;
  border: 0;
  border-radius: 10px;
  background: var(--fill);
  color: inherit;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.jdpb button small {
  font-size: 11px;
  font-weight: 400;
  color: var(--mut);
}
.jdpb button.kini {
  outline: 1.5px solid var(--g);
}
.jdpb button.on {
  background: var(--g);
  color: var(--on);
}
.jdpb button.on small {
  color: inherit;
  opacity: 0.8;
}
#klmini .klv {
  background: #c5221f;
  color: #fff;
}
/* Lapisan tab sebelah yang disiapkan: sudah ditata tetapi tersembunyi dan tidak menambah tinggi halaman */
.tpeek.tsiap {
  visibility: hidden;
  height: 0;
  overflow: hidden;
  transform: translate3d(-200vw, 0, 0);
}
.kff {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 14px;
  margin: 4px 0 8px;
}
.kff select {
  flex: 1;
  min-width: 160px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: inherit;
  font: inherit;
}
.kbl ~ .kwarn,
#kh.kwarn {
  color: #b45309;
  background: color-mix(in srgb, #f59e0b 12%, transparent);
  border-radius: 10px;
  padding: 10px 12px;
  text-align: left;
}
[data-klayar] small {
  font-weight: 400;
  opacity: 0.8;
}
.kfwk {
  display: block;
  margin: -4px 0 8px;
  font-size: 12.5px;
}
/* Video kelas live: tombol layar penuh di pojok, dan tampilan saat layar penuh (mendatar, video utuh) */
.kzfs {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  cursor: pointer;
}
.kzfs .ic {
  color: #fff;
}
.kzfs:hover {
  background: rgba(0, 0, 0, 0.7);
}
.kzs:fullscreen {
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
  border-radius: 0;
  outline: 0;
  background: #000;
}
.kzs:fullscreen video {
  object-fit: contain;
}
.kzs:-webkit-full-screen {
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: #000;
}
.pkaki {
  font-size: 12.5px;
  margin: 16px 2px 0;
}
.pkaki a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Daftar 114 surah: baris di luar layar tidak ditata/digambar sampai digulir mendekat (halaman Al-Qur'an terbuka &
   digeser lebih ringan) */
#ql > .row {
  content-visibility: auto;
  contain-intrinsic-size: auto 64px;
}
/* Kartu geser di komputer: panah kiri/kanan (lihat js/pages/beranda.js), tampil saat kursor di atas kartu */
.carw {
  position: relative;
}
.carb {
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  .carb {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-top: -12px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--card);
    color: var(--ink);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
  }
  .carb[hidden] {
    display: none;
  }
  .carb[data-carb='-1'] {
    left: -12px;
  }
  .carb.kn {
    right: -12px;
  }
  .carw:hover .carb,
  .carb:focus-visible {
    opacity: 1;
  }
  .car {
    cursor: grab;
  }
  .car.seret {
    cursor: grabbing;
    user-select: none;
  }
  .car.seret .sl {
    pointer-events: none;
  }
}
/* Lembar pembaruan: bilah kemajuan unduhan APK & bagian aplikasi Android di lembar Yang baru */
.upd-p {
  height: 6px;
  margin: 10px 0 4px;
  border-radius: 3px;
  background: var(--fill);
  overflow: hidden;
}
.upd-p i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--g);
  transition: width 0.3s;
}
.upd-s {
  display: block;
  font-size: 12.5px;
}
.upd-apk {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
  padding: 12px;
  border-radius: 12px;
  background: var(--fill);
}
.upd-apk small {
  font-size: 12.5px;
}

/* Al-Qur'an: kapsul kecil selama audio ayat berbunyi (pengganti bilah pemutar) */
.qmini {
  position: fixed;
  left: 50%;
  bottom: calc(76px + env(safe-area-inset-bottom));
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 32px);
  padding: 5px 6px 5px 5px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--card);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  transform: translateX(-50%);
  font-size: 13px;
  font-weight: 600;
}
.qmini[hidden] {
  display: none;
}
.qmini .ib {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--g);
  color: var(--on);
}
.qmini span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qmini .ib2 {
  width: 30px;
  height: 30px;
  font-size: 20px;
}
body.subhal .qmini,
.full .qmini {
  bottom: calc(18px + env(safe-area-inset-bottom));
}
@media (min-width: 900px) {
  .qmini {
    bottom: 22px;
  }
}
/* Navigasi surah: label halaman ayat; panah kecil hanya untuk mouse (di HP cukup digeser) */
.snav {
  justify-content: center;
  gap: 14px;
  margin: 26px 0 40px;
}
.snav .snb {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--mut);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.snav .snb:hover:not(:disabled) {
  color: var(--g);
  border-color: var(--g);
}
.snav .snb:disabled {
  opacity: 0.3;
  cursor: default;
}
@media (hover: none), (pointer: coarse) {
  .snav .snb {
    display: none;
  }
}
.qsdl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 6px;
  font-size: 13px;
}
/* Himbauan koreksi di akhir bacaan */
.koreksi {
  margin: 16px 0 6px;
  font-size: 12px;
  color: var(--mut);
  opacity: 0.85;
}
.koreksi a {
  color: var(--g);
  font-weight: 600;
}
/* Pilihan suara notifikasi kelas */
.knsw {
  margin: 10px 0 4px;
}
.knsl {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 8px;
}
.knsl button {
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.knsl button.on {
  border-color: var(--g);
  background: var(--g);
  color: var(--on);
}
.knsa {
  flex-wrap: wrap;
}
.knsa label.sb {
  cursor: pointer;
}
/* Area isi selebar layar (≥600 px): batang gulir di tepi kanan dan bilah atas yang menempel (.rh, .bar.lekat, .ktb) serta
   kolom tanya Fadz AI (.aif) mentok kiri-kanan. Isi tetap di tengah selebar --vmax karena jarak tepi --gx dihitung js/core/ui.js
   (lebarIsi) dari lebar #view: gx = max(--gxb, (lebar - --vmax) / 2 + --gxb). Layar penuh kitab memakai jarak tepi biasa. */
:root {
  --gxb: 24px;
  --vmax: 760px;
}
@media (min-width: 900px) {
  :root {
    --vmax: 880px;
  }
  body.nav-off {
    --vmax: 1040px;
  }
}
body.kfull {
  --gx: 24px;
}
@media (min-width: 600px) {
  html #view,
  html body.nav-off #view {
    max-width: none;
    padding-left: var(--gx, 24px);
    padding-right: var(--gx, 24px);
  }
  .vpeek {
    padding-left: var(--gx, 24px);
    padding-right: var(--gx, 24px);
  }
  .rh,
  .bar.lekat,
  .ktb,
  .aif {
    margin-left: calc(-1 * var(--gx, 24px));
    margin-right: calc(-1 * var(--gx, 24px));
  }
  .rh {
    padding-left: calc(var(--gx, 24px) - 8px);
    padding-right: calc(var(--gx, 24px) - 8px);
  }
  .bar.lekat,
  .aif {
    padding-left: var(--gx, 24px);
    padding-right: var(--gx, 24px);
  }
  .ktb {
    padding-left: calc(var(--gx, 24px) - 4px);
    padding-right: calc(var(--gx, 24px) - 4px);
  }
}
/* Pratinjau dashboard: kotak ubah teks (ketuk sekali) */
.tedt {
  position: fixed;
  z-index: 60;
  width: min(300px, calc(100vw - 12px));
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
  font-family:
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    sans-serif;
  font-size: 13px;
}
.tedt b {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
}
.tedt input {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--fill);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  outline: 0;
}
.tedt input:focus {
  border-color: var(--g);
}
.tedt div {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.tedt button {
  height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: var(--fill);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.tedt button.pri {
  background: var(--g);
  color: var(--on);
}
.tedt button[data-te='x'] {
  margin-left: auto;
  width: 32px;
  padding: 0;
  font-size: 18px;
}
.tedt small {
  display: block;
  margin-top: 6px;
  color: var(--mut);
}
.sret {
  will-change: transform;
}

/* Kotak waktu salat + Duha (7 kotak): satu baris; di HP sempit 4 di atas + 3 di bawah yang melebar rata.
   Duha tampil sama seperti waktu lainnya */
.pt {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
@media (max-width: 899px) {
  .pt {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}
@media (max-width: 420px) {
  .pt {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .pt > div {
    grid-column: span 3;
  }
  .pt > div:nth-child(n + 5) {
    grid-column: span 4;
  }
}
.jdduha .t small {
  font-size: 11px;
  margin-left: 4px;
}
button.jnk {
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--mut);
  text-align: left;
  cursor: pointer;
}
.jdaz .list {
  margin: 4px 0 10px;
}
.jdaz .card.sua {
  margin: 0;
}
/* Halaman pengaturan rata tepi (.phal): bagian suara notifikasi kelas & deret tombol tetap berjarak dari tepi layar */
.phal > .knsw,
.phal > .act {
  margin-left: 16px !important;
  margin-right: 16px !important;
}
.knsa {
  justify-content: flex-start;
}
.knsa > .sb {
  flex: none;
}
/* Lembar Pengingat: Coba tetap ada di semua pilihan bersuara; centang hanya tampil di pilihan aktif */
.jnl .jck {
  display: none;
  margin-left: 6px;
  vertical-align: -2px;
  color: var(--g);
}
.jnl .on .jck {
  display: inline-flex;
}
/* Pilihan aktif: latar aksen lembut + centang kecil di samping namanya (bukan di ujung kanan) */
.jnl button.on {
  background: color-mix(in srgb, var(--g) 8%, transparent);
  border-radius: 12px;
}
.jnl button.on + button {
  border-top-color: transparent;
}
.jnl button .jnc {
  margin-left: auto;
}

/* Notifikasi singkat & pemberitahuan kelas selalu di lapisan paling depan, di atas lembar/dialog dan latar buramnya */
#toast {
  z-index: 100;
}
#knotif {
  z-index: 99;
}

/* Jeda sholawat antar bagian Amaliyah (js/pages/maulid.js): kartu pembuka, pilihan sholawat, bilah tombol tetap di
   bawah */
.jd-hero {
  position: relative;
  overflow: hidden;
  margin: 4px 0 18px;
  padding: 18px 18px 20px;
  border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--g) 16%, var(--card)), var(--card));
  border: 1px solid color-mix(in srgb, var(--g) 18%, var(--line));
}
.jd-hero h2 {
  margin: 14px 0 6px;
  font-size: 21px;
  color: var(--ink);
}
.jd-hero p {
  margin: 0;
  color: var(--mut);
  font-size: 14.5px;
  line-height: 1.55;
}
.jd-hero p b {
  color: var(--ink);
  font-weight: 600;
}
.jd-step {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mut);
}
.jd-step li {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 5px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  white-space: nowrap;
}
.jd-step li.ok {
  color: var(--g);
}
.jd-step li.on {
  background: var(--g);
  color: var(--on);
}
.jd-sec {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 2px 10px;
  font-size: 15px;
  color: var(--ink);
}
.jd-pill {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  background: color-mix(in srgb, var(--g) 12%, transparent);
  color: var(--g);
}
.jd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.jd-c {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
  font-size: 14.5px;
  line-height: 1.3;
  transition:
    transform 0.12s,
    border-color 0.15s,
    background 0.15s;
}
.jd-c .si {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--g) 12%, transparent);
  color: var(--g);
}
.jd-c:active {
  transform: scale(0.97);
}
@media (hover: hover) {
  .jd-c:hover {
    border-color: color-mix(in srgb, var(--g) 45%, var(--line));
    background: color-mix(in srgb, var(--g) 5%, var(--card));
  }
}
.pnav:has(+ .jd-bar) {
  margin-bottom: 12px;
}
.jd-bar {
  position: sticky;
  bottom: -24px;
  z-index: 5;
  display: grid;
  gap: 8px;
  margin: 8px -24px -24px;
  padding: 12px 24px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 72%, color-mix(in srgb, var(--bg) 0%, transparent));
}
.jd-bar.dua {
  grid-template-columns: auto 1fr;
}
.jd-bar .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 18px;
  margin: 0;
  border-radius: 14px;
  font-size: 15px;
  text-decoration: none;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--g) 22%, transparent);
}
.jd-bar .btn.s {
  box-shadow: none;
  font-size: 14px;
}
.jd-bar .jd-go span,
.jd-bar .btn span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jd-ar {
  display: flex;
  color: var(--mut);
  opacity: 0.6;
}
/* Di jeda sholawat, tombol Lanjut di bilah bawah jadi satu-satunya tombol utama; navigasi antar halaman cukup tampil
   ringan */
.pnav:has(+ .jd-bar) {
  gap: 8px;
}
.pnav:has(+ .jd-bar) a {
  min-height: 50px;
  padding: 8px 12px;
}
.pnav:has(+ .jd-bar) [data-nx] {
  background: var(--card);
  border-color: var(--line);
  color: var(--ink);
}
.jd-grid.fz .jd-c {
  border-color: color-mix(in srgb, var(--g) 35%, var(--line));
  background: color-mix(in srgb, var(--g) 6%, var(--card));
}
#klmini > a {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
#klmini [data-klhenti] {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: #c5221f;
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

/* ---------- Kelas online: bilah tombol panggung, panel kitab, layar penuh ala Meet (js/pages/kelas.js) ---------- */
.kzbar {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: flex;
  gap: 6px;
}
.kzbar .kzfs {
  position: static;
}
.kzbar .kzfs.on {
  background: rgba(255, 255, 255, 0.9);
  color: #111;
}
.kzbar .kzfs.on .ic {
  color: #111;
}
/* Tombol peserta hanya berguna di layar penuh (di layar biasa peserta selalu tampil di bawah) */
.kz:not(:fullscreen) .kzorang {
  display: none;
}
/* Panel kitab (layar biasa: di bawah video) */
.kzk {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  overflow: hidden;
}
.kzk[hidden] {
  display: none;
}
.kzkh {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border-bottom: 1px solid var(--line);
}
.kzkh select {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 8px;
  font-size: 14px;
}
.kzkh .kzkj {
  flex: 0 0 auto;
  width: auto;
}
.kzkx {
  flex: none;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: var(--fill);
  color: var(--ink);
  font-size: 16px;
  cursor: pointer;
}
.kzkb {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: #fff;
  touch-action: pan-y;
}
.kzkb img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 720px;
}
.kz:not(:fullscreen) .kzkb {
  max-height: 70vh;
}
.kzkf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  border-top: 1px solid var(--line);
}
.kzkf .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 36px;
  padding: 0;
}
.kzkf .btn[disabled] {
  opacity: 0.4;
}
.kzkp {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--mut);
}
.kzkp input {
  width: 64px;
  height: 34px;
  padding: 0 6px;
  text-align: center;
}
/* Layar penuh: video besar + strip wajah peserta di bawah + kitab di kanan, seperti Google Meet */
.kz:fullscreen {
  display: flex;
  gap: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  background: #0d0f0e;
  color: #e8ece9;
}
.kz:fullscreen .kzm {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
}
.kz:fullscreen .kzs {
  flex: 1;
  min-height: 0;
  aspect-ratio: auto;
  border-radius: 12px;
  background: #000;
}
.kz:fullscreen .kzs video {
  object-fit: contain;
}
.kz:fullscreen .kzg {
  display: flex;
  flex: none;
  gap: 8px;
  margin: 0;
  height: 112px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
.kz:fullscreen .kzg:empty {
  display: none;
}
.kz:fullscreen.tanpaorang .kzg {
  display: none;
}
.kz:fullscreen .kzt {
  flex: 0 0 168px;
  min-height: 0;
  height: 100%;
  background: #1f2421;
  color: #e8ece9;
}
.kz:fullscreen .kzt .kzn .ic {
  color: #c9d1cc;
}
.kz:fullscreen .kzk {
  flex: 0 0 min(42%, 560px);
  margin: 0;
  border: 0;
  border-left: 1px solid #2c312e;
  border-radius: 0;
  background: #161917;
  color: #e8ece9;
}
.kz:fullscreen .kzkh,
.kz:fullscreen .kzkf {
  border-color: #2c312e;
}
.kz:fullscreen .kzkh select,
.kz:fullscreen .kzkp input {
  background: #232825;
  color: #e8ece9;
  border-color: #2c312e;
}
.kz:fullscreen .kzkx {
  background: #232825;
  color: #e8ece9;
}
.kz:fullscreen .kzkp {
  color: #aab4ae;
}
/* HP tegak dalam layar penuh: kitab di bawah video, bukan di samping */
@media (orientation: portrait) {
  .kz:fullscreen {
    flex-direction: column;
  }
  .kz:fullscreen .kzk {
    flex: 0 0 48%;
    border-left: 0;
    border-top: 1px solid #2c312e;
  }
  .kz:fullscreen .kzg {
    height: 96px;
  }
  .kz:fullscreen .kzt {
    flex-basis: 132px;
  }
}
/* Tombol ikuti pengajar di kepala panel kitab kelas */
.kzki {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.kzki[hidden] {
  display: none;
}
.kzki.on {
  background: var(--g);
  border-color: var(--g);
  color: var(--on);
}
.kz:fullscreen .kzki:not(.on) {
  border-color: #2c312e;
  color: #e8ece9;
}
@media (max-width: 520px) {
  .kzki span {
    display: none;
  }
  .kzki {
    padding: 0 10px;
  }
}
/* Cubit-perbesar di kelas: saat diperbesar, sentuhan dipakai untuk menggeser gambar, bukan menggulir halaman */
.kzkb,
#kzs {
  touch-action: pan-y;
}
.kzkb.kzum2,
#kzs.kzum2 {
  touch-action: none;
  overflow: hidden;
}
.kzkb img,
#kzs video {
  will-change: transform;
}

/* Tombol Kitab berlabel di panggung, petunjuk letaknya, ajakan kitab di bawah video, panel kitab dikecilkan */
.kzbar .kzfk {
  width: auto;
  gap: 6px;
  padding: 0 12px;
  background: #1f7a55;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
}
.kzbar .kzfk:hover {
  background: #18664a;
}
.kzbar .kzfk.on {
  background: rgba(255, 255, 255, 0.92);
  color: #14513a;
}
@media (max-width: 360px) {
  .kzbar .kzfk span {
    display: none;
  }
  .kzbar .kzfk {
    padding: 0;
    width: 36px;
  }
}
.kzhint {
  position: absolute;
  top: 52px;
  right: 52px;
  z-index: 4;
  padding: 7px 11px;
  border-radius: 10px;
  background: #fff;
  color: #14513a;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  animation: kzhint 1.2s ease-in-out infinite alternate;
  pointer-events: none;
}
.kzhint::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 22px;
  border: 6px solid transparent;
  border-top: 0;
  border-bottom-color: #fff;
}
@keyframes kzhint {
  to {
    transform: translateY(4px);
  }
}
.kzkaj {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1.5px dashed var(--g);
  border-radius: 14px;
  background: color-mix(in srgb, var(--g) 9%, var(--card));
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.kzkaj > .ic:first-child {
  flex: none;
  color: var(--g);
}
.kzkaj span {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kzkaj small {
  color: var(--mut);
  font-size: 12.5px;
}
.kzkt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 2px 4px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.kzkt1 {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}
.kzkt1 b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.kzkt1 .ic {
  flex: none;
  color: var(--g);
}
.kzkhal {
  color: var(--mut);
  font-size: 12px;
}
.kzklain {
  display: flex;
  justify-content: center;
  padding: 0 8px 8px;
}
.kzk.kecil .kzkb,
.kzk.kecil .kzkf,
.kzk.kecil .kzklain {
  display: none;
}
.kzk.kecil .kzkh {
  border-bottom: 0;
}
.kz:fullscreen .kzkhal {
  color: #aab4ae;
}
.kz:fullscreen .kzkt1 .ic {
  color: #7fd1a8;
}
/* Layar penuh + kitab dikecilkan: video memenuhi layar, kitab jadi kartu kecil melayang di pojok */
.kz:fullscreen {
  position: relative;
}
.kz:fullscreen .kzk.kecil {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 5;
  flex: none;
  width: min(340px, calc(100% - 24px));
  border: 1px solid #2c312e;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
/* Ajakan tutorial kelas */
.ktut {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  border-radius: 12px;
  background: var(--fill);
  margin-bottom: 10px;
}
.ktut > .ic {
  flex: none;
  color: var(--g);
}
.ktuts {
  text-align: center;
}
.ktuts .ktuti {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: var(--g);
  color: var(--on);
}
.ktuts .ktuti .ic {
  color: var(--on);
}
.ktuts b {
  display: block;
  font-size: 18px;
}
.ktuts p {
  margin: 6px 0 16px;
}
.ktuts .act .btn {
  flex: 1;
}
.klkt {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 2px;
  font-size: 13.5px;
  color: var(--ink);
}
.klkt .ic {
  color: var(--g);
}

/* ---------- Kelas layar penuh ala Google Meet: bilah kontrol, pembatas geser, panel pesan, kamera kecil saat berbagi
   layar ---------- */
.kzbar2 {
  display: none;
}
.kz:fullscreen .kzbar2 {
  display: flex;
  flex: none;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 2px 0 4px;
}
.kzb {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 60px;
  height: 56px;
  padding: 4px 8px;
  border: 0;
  border-radius: 16px;
  background: #2a302c;
  color: #e8ece9;
  font: inherit;
  cursor: pointer;
}
.kzb .ic {
  color: #e8ece9;
}
.kzb small {
  font-size: 10.5px;
  line-height: 1.1;
  white-space: nowrap;
  opacity: 0.85;
}
.kzb:hover {
  background: #353c37;
}
.kzb.on {
  background: #cfe9dc;
  color: #0f3b2a;
}
.kzb.on .ic {
  color: #0f3b2a;
}
.kzb.mati {
  background: #5c2b29;
}
.kzb.mati .ic {
  color: #ffd9d6;
}
.kzb.merah {
  background: #c5221f;
  color: #fff;
}
.kzb.merah .ic {
  color: #fff;
}
@media (max-width: 640px), (max-height: 520px) {
  .kzb {
    min-width: 44px;
    height: 44px;
    border-radius: 50%;
    padding: 0;
  }
  .kzb small {
    display: none;
  }
  .kz:fullscreen .kzbar2 {
    gap: 6px;
  }
}
.kzsplit {
  display: none;
}
.kz:fullscreen.dgkitab:not(.kitabkecil) .kzsplit {
  display: flex;
  flex: 0 0 12px;
  align-items: center;
  justify-content: center;
  cursor: col-resize;
  touch-action: none;
  background: #0d0f0e;
  outline: none;
}
.kzsplit i {
  display: block;
  width: 4px;
  height: 48px;
  border-radius: 2px;
  background: #4a524d;
  transition:
    background 0.15s,
    height 0.15s;
}
.kzsplit:hover i,
.kzsplit:focus-visible i,
.kzsplit.seret i {
  background: #7fd1a8;
  height: 72px;
}
.kz:fullscreen .kzk {
  flex: 0 0 var(--kzkw, 42%) !important;
}
.kz:fullscreen .kzk.kecil {
  flex: none !important;
}
.kzpc {
  display: none;
}
.kz:fullscreen .kzpc:not([hidden]) {
  display: flex;
  flex-direction: column;
  flex: 0 0 min(320px, 34%);
  min-width: 0;
  background: #161917;
  border-left: 1px solid #2c312e;
  color: #e8ece9;
}
.kzpch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 8px 8px 14px;
  border-bottom: 1px solid #2c312e;
}
.kz:fullscreen .kzpc .kcl {
  flex: 1;
  min-height: 0;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: auto;
}
.kz:fullscreen .kzpc .kcm {
  color: #e8ece9;
}
.kz:fullscreen .kzpc .kcm small {
  color: #9aa59f;
}
.kz:fullscreen .kzpc .kcf {
  padding: 8px;
  margin: 0;
  border-top: 1px solid #2c312e;
}
.kz:fullscreen .kzpc .kcf .in {
  background: #232825;
  color: #e8ece9;
  border-color: #2c312e;
}
.kzpip {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  width: 24%;
  max-width: 240px;
  min-width: 96px;
  aspect-ratio: 4/3;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.7);
}
.kzpip[hidden] {
  display: none;
}
.kzpip video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kzpip video.cermin {
  transform: scaleX(-1);
}
.kzpip span {
  position: absolute;
  left: 6px;
  bottom: 4px;
  font-size: 11px;
  color: #fff;
  text-shadow: 0 1px 3px #000;
}
.kpintas dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 14px;
  margin: 12px 0 16px;
  align-items: center;
}
.kpintas dd {
  margin: 0;
}
.kpintas kbd {
  display: inline-block;
  min-width: 24px;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--fill);
  font:
    600 12.5px/1.4 system-ui,
    sans-serif;
  text-align: center;
}
.kz:fullscreen .back-d {
  position: absolute;
}
@media (orientation: portrait) {
  .kz:fullscreen .kzk {
    flex: 0 0 var(--kzkh, 48%) !important;
  }
  .kz:fullscreen.dgkitab:not(.kitabkecil) .kzsplit {
    flex: 0 0 14px;
    cursor: row-resize;
  }
  .kzsplit i {
    width: 48px;
    height: 4px;
  }
  .kzsplit:hover i,
  .kzsplit:focus-visible i,
  .kzsplit.seret i {
    width: 72px;
    height: 4px;
  }
  .kz:fullscreen .kzpc:not([hidden]) {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 55%;
    z-index: 6;
    border-left: 0;
    border-top: 1px solid #2c312e;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.5);
  }
}
.kz:fullscreen .back-d .sheet {
  color: var(--ink);
}
.kz:fullscreen.dgpesan.dgkitab:not(.kitabkecil) .kzk {
  flex-basis: min(var(--kzkw, 42%), 40%) !important;
}
/* HP mendatar (layar pendek): panel pesan melayang di kanan agar video & kitab tidak terhimpit */
@media (orientation: landscape) and (max-height: 520px) {
  .kz:fullscreen .kzpc:not([hidden]) {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(340px, 46%);
    z-index: 6;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.5);
  }
  .kz:fullscreen .kzg {
    height: 72px;
  }
  .kz:fullscreen .kzt {
    flex-basis: 110px;
  }
}

/* Pemutar murottal global (js/core/pemutar.js) */
.qmini.pm {
  gap: 4px;
  padding: 5px 6px;
}
.qmini.pm .pmt {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 52vw;
  padding: 0 4px;
  color: inherit;
  text-decoration: none;
  line-height: 1.2;
}
.qmini.pm .pmt b {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qmini.pm .pmt small {
  font-size: 10.5px;
  font-weight: 400;
  color: var(--mut);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qmini.pm .ib2 {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.pmlb b {
  display: block;
  font-size: 17px;
}
.pmlb p {
  margin: 6px 0 12px;
}
.pmc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.pml {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
  font-size: 13.5px;
  color: var(--mut);
}

/* Petunjuk tombol mikrofon Fadz AI */
.aimh {
  position: absolute;
  right: 8px;
  bottom: calc(100% + 10px);
  z-index: 5;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  max-width: min(320px, calc(100vw - 32px));
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--ink);
  color: var(--bg);
  font-size: 12.5px;
  line-height: 1.45;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.aimh[hidden] {
  display: none;
}
.aimh .ic {
  flex: none;
  margin-top: 2px;
  color: var(--bg);
}
.aimh::after {
  content: '';
  position: absolute;
  right: 18px;
  top: 100%;
  border: 7px solid transparent;
  border-top-color: var(--ink);
}

/* Kontrol video tutorial: mundur/maju 10 detik, kecepatan */
.tutk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 8px 0 2px;
}
.tutk > button,
.tutsp button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.tutsp {
  display: inline-flex;
  gap: 4px;
  margin-left: auto;
}
.tutsp button {
  padding: 0 8px;
}
.tutsp button.on {
  background: var(--g);
  border-color: var(--g);
  color: var(--on);
}
.qmini.pm .pmsp {
  width: auto !important;
  min-width: 34px;
  padding: 0 4px;
  font-size: 11.5px;
  font-weight: 700;
}

/* Halaman tidak pernah bergeser ke samping: geseran samping hanya untuk pindah halaman/tab (js/core/events.js),
   tanpa pantulan peramban ke kiri-kanan; deretan yang memang bisa digeser (carousel, tombol) tetap bisa karena wadah gulirnya sendiri */
html,
body,
#app {
  overscroll-behavior: none;
  /* hidden di kedua sumbu: dengan overflow-x saja, overflow-y otomatis 'auto', sehingga saat tarik-untuk-memuat
     menggeser #view ke bawah, #app bisa digulir dan memunculkan batang gulirnya sendiri (isi menyempit/bergeser) */
  overflow: hidden;
}
#view {
  overscroll-behavior-x: none;
  touch-action: pan-y;
}
.vpeek,
.tpeek {
  touch-action: pan-y;
}

/* Panel pengaturan adzan (Pengaturan › Waktu Salat & Notifikasi = lembar Pengaturan adzan di Jadwal salat) */
.azp .azh {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 18px 2px 8px;
}
.azp .azh b {
  font-size: 14px;
  font-weight: 600;
  color: var(--mut);
  letter-spacing: 0.2px;
}
.azp .azh small {
  font-size: 12.5px;
  line-height: 1.4;
}
.azp .list.sg {
  margin: 0;
}
.azp .azw.azoff .srw {
  opacity: 0.55;
}
.azp .segw {
  padding: 0 14px 12px;
}
.azp .segw .seg {
  width: 100%;
}
.azp .card {
  margin: 0;
}
.azsama {
  margin: -4px 2px 10px;
  font-size: 13px;
  line-height: 1.45;
}
.jdaz .azp > .list.sg:first-child {
  margin-top: 4px;
}

/* ---------- Pemutar video bersama (js/core/pemutar-video.js): video tutorial dan rekaman kelas ---------- */
.vp {
  --vpa: var(--g);
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #0d0f0e;
  color: #fff;
  outline: 0;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}
.vp:focus-visible {
  box-shadow: 0 0 0 3px var(--g2);
}
.vpl {
  position: relative;
  aspect-ratio: 16/9;
  background: #000;
}
.vp-hp .vpl {
  aspect-ratio: 9/16;
}
.vpl video,
.vpl iframe,
.vpl .vpyt {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
}
.vpbesar {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(15, 17, 16, 0.62);
  color: #fff;
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}
.vpbesar .ic {
  margin-left: 4px;
}
.vp.main .vpbesar {
  opacity: 0;
  transform: scale(0.85);
  pointer-events: none;
}
.vpmuat {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border: 4px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: vpputar 0.8s linear infinite;
  pointer-events: none;
}
@keyframes vpputar {
  to {
    transform: rotate(360deg);
  }
}
.vpk {
  padding: 10px 12px 12px;
  background: linear-gradient(180deg, #161918, #101211);
}
.vpw {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 600 12.5px/1 var(--ui);
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.78);
}
.vpw span {
  min-width: 38px;
}
.vpt1 {
  text-align: right;
}
.vps {
  --p: 0%;
  flex: 1;
  height: 28px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  touch-action: none;
}
.vps::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--vpa) var(--p), rgba(255, 255, 255, 0.22) var(--p));
}
.vps::-moz-range-track {
  height: 6px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--vpa) var(--p), rgba(255, 255, 255, 0.22) var(--p));
}
.vps::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -6px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--vpa) 45%, transparent);
}
.vps::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--vpa) 45%, transparent);
}
.vpb {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.vpi {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 8px;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.15s ease;
}
.vpi:active {
  transform: scale(0.94);
  background: rgba(255, 255, 255, 0.16);
}
@media (hover: hover) {
  .vpi:hover {
    background: rgba(255, 255, 255, 0.14);
  }
}
.vpn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.vpn i {
  font: 700 12.5px/1 var(--ui);
  font-style: normal;
}
.vpp {
  min-width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fff;
  color: #111;
}
.vpp:active {
  background: #e8e8e8;
}
@media (hover: hover) {
  .vpp:hover {
    background: #f1f1f1;
  }
}
.vpsp {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  overflow-x: auto;
  scrollbar-width: none;
}
.vpsp button {
  flex: none;
  min-width: 40px;
  height: 34px;
  padding: 0 6px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font: 650 12.5px/1 var(--ui);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.vpsp button.on {
  background: #fff;
  color: #111;
}
.vp-hp .vpb,
.kvp .vpb {
  flex-wrap: wrap;
}
@media (max-width: 480px) {
  .vpb {
    flex-wrap: wrap;
    justify-content: center;
  }
  .vpsp {
    order: 5;
    flex-basis: 100%;
    justify-content: space-between;
  }
  .vpsp button {
    flex: 1;
  }
}
.vp:fullscreen,
.vp:-webkit-full-screen {
  display: flex;
  flex-direction: column;
  border-radius: 0;
  background: #000;
}
.vp:fullscreen .vpl,
.vp:-webkit-full-screen .vpl {
  flex: 1;
  aspect-ratio: auto;
}
.vp:fullscreen .vpl video,
.vp:-webkit-full-screen .vpl video {
  object-fit: contain;
}
.vpcatat {
  margin: 0;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.7);
}
/* Kartu tutorial: ukuran diatur oleh pemutar, bukan bingkai lama */
.tutv,
.tutv.hp,
.tutv.desktop {
  aspect-ratio: auto;
  background: none;
  overflow: visible;
  border-radius: 0;
}
.tutv.hp {
  width: min(100%, 380px);
}
/* Rekaman kelas */
.kvp {
  margin: 4px 0 14px;
}
.krek {
  background: var(--fill);
  color: var(--mut);
}
.apkajak .offt-i img {
  border-radius: 12px;
}

/* ---------- Mode admin di aplikasi: kendali rapi yang tidak menutupi isi ---------- */
.tadmon section.tb {
  /* Tanpa garis putus-putus di sekeliling bagian (dulu tampak seperti garis-garis tak jelas): cukup nama & tombol */
  padding: 40px 0 6px;
  border: 0;
  background: none;
}
.tadmon section.tb > .tak {
  position: absolute;
  top: 4px;
  left: 0;
  right: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.tak .tan {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 700 12.5px/1.2 var(--ui);
  letter-spacing: 0.02em;
  color: var(--g);
}
.tak .takb {
  display: flex;
  gap: 4px;
  flex: none;
}
.tak button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  min-width: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--g) 30%, var(--line));
  border-radius: 9px;
  background: var(--card);
  color: var(--g);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.tak button:active {
  transform: scale(0.92);
  background: var(--gs);
}
/* Pintasan & Semua Menu (kisi): tombol ikon kecil di atas ikon, nama tetap terbaca */
.tadmon .grid [data-ta] {
  padding-top: 30px;
}
.tadmon .grid [data-ta] > .tak {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.tak-kisi .takb {
  gap: 2px;
  padding: 2px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--card) 90%, transparent);
  border: 1px solid var(--line);
}
.tak-kisi button {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 7px;
  box-shadow: none;
}
.tak-kisi button svg {
  width: 12px;
  height: 12px;
}
/* Baris Pengaturan (daftar) */
.tadmon .list [data-ta] {
  padding-right: 112px;
}
.tadmon .list [data-ta] > .tak {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
}

/* Bilah Mode admin & pil Berbagi layar: bisa digeser (js/core/ui.js seretMelayang) */
.melayang {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.melayang.seret {
  cursor: grabbing;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32) !important;
  transition: none !important;
}
.tgrip {
  display: grid;
  place-items: center;
  width: 22px;
  height: 34px;
  margin-left: 2px;
  color: var(--mut);
  cursor: grab;
}
.tadm {
  gap: 4px;
  padding: 5px 6px 5px 4px;
  max-width: calc(100vw - 16px);
}
.tadm b {
  padding: 0 6px 0 2px;
  font-size: 12.5px;
}
.tadm button,
.tadm a {
  height: 36px;
  padding: 0 13px;
  font-size: 13px;
}
#klmini {
  gap: 6px;
  padding: 6px 10px 6px 4px;
}
#klmini a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
  color: inherit;
  text-decoration: none;
}

/* Pengaturan › Akun & Profil seperti Instagram: foto di tengah, kotak isian berlabel, editor foto layar penuh */
.pfh {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 6px 0 18px;
}
.pff {
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.pfe {
  padding: 4px 8px;
  border: 0;
  background: none;
  color: var(--g);
  font: 600 14.5px/1.2 var(--ui);
  cursor: pointer;
}
.pfk {
  display: grid;
  gap: 10px;
  margin: 0 0 18px;
}
.pfb {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 14px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
}
.pfb small {
  color: var(--mut);
  font-size: 12.5px;
}
.pfb span {
  font-size: 16px;
  padding-right: 22px;
}
.pfb > .ic {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--mut);
}
.pfin input {
  width: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}
.pfin:focus-within {
  border-color: var(--g);
}
.pfkt {
  margin: -8px 2px 14px;
  font-size: 13px;
}
.pfok {
  margin-left: auto;
  padding: 6px 4px;
  border: 0;
  background: none;
  color: var(--g);
  font: 700 15px/1 var(--ui);
  cursor: pointer;
}
.pfr {
  cursor: pointer;
}
.pfr input {
  width: 20px;
  height: 20px;
  accent-color: var(--g);
}
.fpm {
  display: grid;
  gap: 2px;
}
.fpmj {
  margin: 0 0 8px;
  text-align: center;
  font: 700 15px/1.3 var(--ui);
}
.fpm button {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 6px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--ink);
  font: 500 15px/1.2 var(--ui);
  text-align: left;
  cursor: pointer;
}
.fpm button.mrh {
  color: #e5534b;
}
#fped.back-d {
  z-index: 60;
  flex-direction: column;
  align-items: stretch;
  background: #000;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: #fff;
}
.fplb {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 12px 10px;
}
.fplb b {
  flex: 1;
  font: 700 17px/1 var(--ui);
}
.fplb .ib2 {
  color: #fff;
  font-size: 28px;
  line-height: 1;
}
.fplb .pfok {
  color: #8fb6e6;
}
.fplw {
  flex: 1;
  display: grid;
  place-items: center;
}
.fplt {
  margin: 0 16px 10px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  text-align: center;
}
#fped .fpzl {
  margin: 0 auto calc(22px + env(safe-area-inset-bottom));
  color: #fff;
}
.fpc {
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  background: #222;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
  touch-action: none;
  cursor: grab;
}
.fpc img {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.fpzl {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(100%, 260px);
  margin: 0;
}
.fpzl input {
  flex: 1;
  accent-color: var(--g);
}
/* Halaman pengaturan (phal) tanpa jarak samping: kotak profil diberi jarak sendiri */
.phal .pfk,
.phal .pfkt {
  margin-left: 16px;
  margin-right: 16px;
}
#fped .pfok,
.bar .pfok {
  background: none;
  border: 0;
  box-shadow: none;
  min-height: 0;
  width: auto;
}
/* Izin Aplikasi seperti "Izin perangkat" Instagram: status sebagai teks biasa di kanan */
.izr .t {
  flex: 1;
}
.izr .bdg {
  padding: 0;
  background: none;
  color: var(--mut);
  font-size: 14px;
  font-weight: 400;
}
.izr .bdg::before {
  display: none;
}
.izd {
  display: grid;
  gap: 12px;
  margin: 0 16px 18px;
}
.izd .si {
  width: 44px;
  height: 44px;
}
.izd p {
  margin: 0;
  line-height: 1.6;
}
.izdst {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* HP: halaman tidak pernah menggulir akar (yang menggulir #view). Saat tarik-untuk-memuat #view digeser turun; akar
   dikunci agar tidak muncul batang/lintasan gulir dan isi tidak menyempit/bergeser ke kiri (dulu terlihat di APK) */
@media (max-width: 899px) {
  html,
  body {
    overflow: hidden;
    overscroll-behavior: none;
  }
  #view,
  .vpeek {
    scrollbar-gutter: auto;
  }
  #view::-webkit-scrollbar-track,
  #view::-webkit-scrollbar-thumb {
    display: none;
    background: transparent;
  }
}

/* Fadz AI: kolom ketik seperti pesan Instagram. Kapsul tanpa garis tepi; tombol mikrofon menyatu (sewarna kapsul,
   ikon biasa), baru menjadi tombol aksen bulat saat ada teks untuk dikirim. Petunjuk rekam berupa baris rapi di atas
   kolom, bukan gelembung melayang. */
.aif {
  align-items: center;
  gap: 6px;
}
.aiin {
  border: 0;
  border-radius: 22px;
  background: var(--fill);
}
.aiin:focus-within {
  border-color: transparent;
  box-shadow: none;
}
.aif textarea {
  min-height: 44px;
  padding: 12px 8px 12px 18px;
  font-size: 15.5px;
}
.aif textarea::placeholder {
  color: var(--mut);
}
#aikb {
  width: 44px;
  height: 44px;
  background: var(--fill);
  color: var(--ink);
}
#aikb.kirim {
  background: var(--g);
  color: var(--on);
}
#aikb .ic {
  width: 21px;
  height: 21px;
}
.aimh {
  left: 6px;
  right: 6px;
  bottom: calc(100% + 4px);
  max-width: none;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--fill);
  color: var(--ink);
  box-shadow: none;
  font-size: 12.5px;
}
.aimh .ic {
  color: var(--g);
}
.aimh::after {
  display: none;
}

/* Editor foto profil seperti Instagram: foto utuh terlihat, di luar lingkaran diredupkan, lingkaran bergaris tipis;
   seluruh area bisa dicubit & diseret */
#fped .fplw {
  position: relative;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
}
#fped .fpc {
  overflow: visible;
  border-radius: 50%;
  background: none;
  box-shadow: none;
}
#fped .fpc img {
  pointer-events: none;
}
#fped .fpmk {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow:
    0 0 0 1.5px rgba(255, 255, 255, 0.9),
    0 0 0 200vmax rgba(0, 0, 0, 0.62);
  pointer-events: none;
}
#fped .fplt {
  margin-bottom: calc(26px + env(safe-area-inset-bottom));
}

/* Redup di luar lingkaran: lapisan gradien (box-shadow raksasa tidak tergambar di WebView Android) */
#fped .fpmk {
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.9);
}
#fped .fprd {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, transparent var(--r), rgba(0, 0, 0, 0.62) calc(var(--r) + 1px));
}
/* Tombol Selesai: teks biru tanpa kotak (di WebView sempat tampil kotak putih) */
#fped .fplb [data-fsimpan] {
  padding: 6px 4px;
  border: 0 !important;
  outline: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: #8fb6e6 !important;
  font: 700 16px/1 var(--ui);
  -webkit-appearance: none;
  appearance: none;
}