/* ===== Tipografi kandungan Q&A (diambil dari modul, dipapar penuh) ===== */
.reading{
  --paper:#faf6ee; --paper2:#f2ece0; --cline:#e4dcc9; --cgold:#b8862f; --cink:#1c1a17;
  /* Font Arab seragam = Amiri — sama jenis seperti soalan (.q-ar) */
  --font-ar:'Amiri',serif;
  --ar-size:22px;   /* saiz rujukan = saiz soalan */
  --ar-lh:1.95;
  font-family:'Literata',Georgia,serif; color:var(--cink); line-height:1.65;
}
/* Semua teks Arab — SATU jenis: Amiri (font soalan), bukan Amiri Quran / sistem */
.reading .q-ar,
.reading .memo-ar,
.reading .memo-label,
.reading .memo-ar .seg,
.reading .cite-ar,
.reading .trial-qtext,
.reading .trial-a,
.reading .trial-a::before,
.reading h3.ayat-head,
.reading .qv-name,
.reading .qv-term,
.reading .qv-legend b,
.reading span[dir="rtl"],
.reading .row-arabic,
.reading .row-jawapan,
.reading .subhead,
.reading [dir="rtl"],
.reading b[dir="rtl"],
.reading strong[dir="rtl"],
.reading .hadith-stimulus .hs-line,
.reading .hadith-stimulus .hs-ar,
.reading .hadith-stimulus .hs-ar .seg,
.reading .hadith-stimulus .hs-rawi,
.reading .hadith-stimulus .hs-topic,
.reading .hadith-stimulus .hs-badge-ar,
.reading .hadith-stimulus .hs-tk-ar{
  font-family:var(--font-ar) !important;
}
.reading p{margin:0 0 4px;}

/* subheading bar */
.reading p.subhead{
  background:color-mix(in srgb,var(--accent) 10%,#fff);
  border-inline-start:4px solid var(--accent);
  color:var(--accent); font-weight:700; font-size:var(--ar-size);
  padding:10px 15px; border-radius:6px; margin:26px 0 10px; direction:rtl; text-align:right;
  line-height:var(--ar-lh);
}
/* soalan Arab & jawapan Arab — saiz SERAGAM, sentiasa KANAN (RTL) */
.reading p.row-arabic, .reading p.row-jawapan{
  direction:rtl; text-align:right; font-size:14px; line-height:1.8; margin:14px 0 6px; color:#26221c;}
.reading p.row-arabic strong{color:var(--accent); font-weight:700;}
/* teras: petikan Arab — saiz & jenis sama seperti soalan */
.reading p.row-arabic span[dir="rtl"], .reading p.row-jawapan span[dir="rtl"],
.reading p.row-terjemahan span[dir="rtl"], .reading p.row-malay-note span[dir="rtl"]{
  font-size:var(--ar-size); line-height:var(--ar-lh); font-weight:700;}
/* bekas LTR yg mengandungi Arab -> jadikan RTL kanan */
.reading p.row-malay-note:has(span[dir="rtl"]),
.reading p.row-terjemahan:has(span[dir="rtl"]){direction:rtl; text-align:right; font-style:normal;}
/* transliterasi & terjemahan Melayu — lebih kecil & lembut */
.reading p.row-arabic em, .reading p.row-jawapan em{font-size:13.5px; color:#7a7261; font-weight:400; font-style:italic;}
.reading p.row-malay-note{font-style:italic; color:#7a7261; font-size:13.5px; margin:2px 0 10px; text-align:left; direction:ltr;}
.reading p.row-malay-note span[dir="rtl"], .reading p.row-terjemahan span[dir="rtl"]{font-style:normal; color:#26221c;}
.reading p.row-terjemahan{direction:ltr; text-align:left; font-size:14px; color:#3f3a30;
  background:var(--paper2); border-radius:8px; padding:9px 12px; margin:6px 0 14px;}

/* ===== Kotak warna hafazan (ganti palang /) — warna berselang, Arab↔Melayu sepadan ikut kedudukan ===== */
.reading .segbox{unicode-bidi:isolate;}
.reading .seg{display:inline-block; padding:2px 11px; margin:4px 4px; border-radius:11px;
  border:1px solid transparent; line-height:1.7; font-weight:700;}
.reading .seg.segm{font-weight:600;}   /* cip terjemahan Melayu (lebih kecil ikut saiz <em>) */
.reading .seg-0{background:#e3f2f0; border-color:#9fd0c9; color:#0b5c55;}
.reading .seg-1{background:#fbe7ec; border-color:#e2a3b3; color:#8a1f35;}
.reading .seg-2{background:#e9e8f7; border-color:#b3b0e0; color:#38348c;}
.reading .seg-3{background:#fdf0d6; border-color:#e6cb87; color:#8a5a12;}
.reading .seg-4{background:#e8f4e2; border-color:#aed69a; color:#3d6b2e;}
.reading .seg-5{background:#f3e8f7; border-color:#cdb0e0; color:#6b2d8a;}

/* ===== Susun atur hafazan (kotak warna Arab↔Melayu sepadan) ===== */
.reading .memo-q{margin:22px 0; padding:18px 20px; border:1.5px solid var(--cline); border-radius:16px;
  background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.05);}
.reading .memo-q>.q-ar{direction:rtl; text-align:right; font-size:var(--ar-size);
  color:var(--accent); font-weight:700; margin:0 0 3px; line-height:var(--ar-lh);}
.reading .memo-q>.q-ar .qn{display:inline-block; min-width:27px; height:27px; line-height:27px;
  text-align:center; border-radius:50%; background:var(--accent); color:#fff;
  font-family:'Literata',serif !important; font-size:13px; margin-inline-start:8px; vertical-align:middle;}
.reading .memo-q>.q-my{font-size:13.5px; color:var(--muted); margin:0 0 4px;
  font-family:'Literata',Georgia,serif;}
.reading .memo-block{margin:12px 0 0; padding:12px 14px 13px; border-radius:12px;
  background:var(--paper); border:1px solid var(--cline);}
/* label Arab + jawapan Arab: sama jenis & saiz dengan soalan */
.reading .memo-label{font-size:var(--ar-size); font-weight:700; letter-spacing:0; color:var(--accent);
  margin-bottom:9px; direction:rtl; text-align:right; line-height:var(--ar-lh);}
.reading .memo-label .lbl-sub{font-size:13px; font-weight:600; opacity:.8;
  font-family:'Literata',Georgia,serif !important; letter-spacing:.02em;}
.reading .memo-ar{direction:rtl; text-align:right; margin:0 0 4px; line-height:var(--ar-lh);}
.reading .memo-my{direction:ltr; text-align:left; margin:0; line-height:2.1;
  padding-top:8px; border-top:1px dashed var(--cline);
  font-family:'Literata',Georgia,serif;}
.reading .memo-ar .seg{font-size:var(--ar-size); font-weight:700; line-height:var(--ar-lh);}
.reading .memo-my .seg{font-size:13px; font-weight:600;
  font-family:'Literata',Georgia,serif !important;}
.reading .memo-eg{font-size:12px; color:var(--muted); font-style:italic; margin:8px 0 0; direction:ltr; text-align:left;
  font-family:'Literata',Georgia,serif;}

/* ===== Visual beranimasi: perbandingan Qada' & Qadar (t1-5) ===== */
.reading .qv{margin:28px 0 6px; padding:20px 18px; border-radius:18px; border:1.5px solid var(--line);
  background:linear-gradient(135deg,#fbf7ee,#f4ecdd); box-shadow:0 4px 18px rgba(0,0,0,.07);}
.reading .qv-head{font-size:16px; font-weight:800; color:var(--accent); text-align:center; margin-bottom:5px;}
.reading .qv-sub{font-size:12.5px; color:var(--muted); text-align:center; margin:0 auto 16px; max-width:560px; line-height:1.65;}
.reading .qv-sub b{color:var(--ink);}
.reading .qv-axis{display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:14px; flex-wrap:wrap;}
.reading .qv-zone{font-size:11.5px; font-weight:700; padding:5px 13px; border-radius:999px;}
.reading .qv-zone.azali{background:#e7f0fb; color:#24508f; border:1px solid #bcd3ee;}
.reading .qv-zone.wujud{background:#fdeede; color:#8a5a12; border:1px solid #ecd4a6;}
.reading .qv-flow{color:var(--muted); font-weight:800;}
.reading .qv-row{display:grid; grid-template-columns:92px 1fr 30px 1fr; align-items:stretch; gap:10px; margin:0;}
.reading .qv-name{font-size:18px; text-align:center; color:var(--ink); font-weight:700;
  display:flex; flex-direction:column; justify-content:center; line-height:1.3;}
.reading .qv-name small{font-family:'Literata',serif; font-size:11px; color:var(--muted); font-weight:600;}
.reading .qv-slot{position:relative; text-align:center; padding:12px 8px; border-radius:14px; border:1.5px dashed;}
.reading .qv-slot.azali{border-color:#9dc0ea; background:#eef5fd;}
.reading .qv-slot.wujud{border-color:#e6c78f; background:#fdf6ea;}
.reading .qv-slot small{display:block; font-size:10.5px; color:var(--muted); margin-top:4px; line-height:1.35;}
.reading .qv-term{display:inline-block; font-size:23px; font-weight:700;
  padding:2px 14px; border-radius:10px; color:#fff;}
.reading .qv-term.q1{background:linear-gradient(135deg,#0d6b64,#159b8f);}
.reading .qv-term.q2{background:linear-gradient(135deg,#b8862f,#e0b25a);}
.reading .qv-arrow{display:flex; align-items:center; justify-content:center; color:#b58a3a; font-size:18px;
  animation:qvflow 1.8s ease-in-out infinite;}
@keyframes qvflow{0%,100%{transform:translateX(-2px);opacity:.45;}50%{transform:translateX(3px);opacity:1;}}
.reading .qv-slot.azali .qv-term{animation:qvpulse 2.4s ease-in-out infinite;}
@keyframes qvpulse{0%,100%{box-shadow:0 0 0 0 rgba(36,80,143,0);}50%{box-shadow:0 0 0 8px rgba(36,80,143,.16);}}
.reading .qv-flip{text-align:center; font-size:12px; font-weight:800; letter-spacing:.1em; color:#8a1f35;
  margin:9px 0; animation:qvblink 1.6s ease-in-out infinite;}
@keyframes qvblink{0%,100%{opacity:.4;}50%{opacity:1;}}
.reading .qv-legend{display:flex; gap:18px; justify-content:center; margin-top:14px; font-size:12px; color:var(--muted); flex-wrap:wrap;}
.reading .qv-legend b{font-size:16px; color:var(--ink);}
@media(max-width:560px){.reading .qv-row{grid-template-columns:60px 1fr 20px 1fr; gap:6px;}
  .reading .qv-term{font-size:19px; padding:2px 9px;} .reading .qv-name{font-size:15px;}}

/* label pil */
.reading .lbl{display:inline-block; font-family:'Literata',serif; font-weight:700; font-size:11px;
  letter-spacing:.06em; text-transform:uppercase; padding:2px 9px; border-radius:999px; color:#fff; margin-inline-end:2px;}
.reading .lbl-jw{background:var(--accent);} .reading .lbl-tr{background:#8a8064;}

/* senarai bergaya kad */
.reading ol{list-style:none; margin:10px 0 18px; padding:0;}
.reading ol>li{background:var(--paper); border:1px solid var(--cline);
  border-inline-start:4px solid var(--accent); border-radius:10px; padding:14px 16px; margin-bottom:12px;}
.reading ol ol>li{background:#fff; border-inline-start-width:3px;}
.reading ul{margin:6px 0 4px; padding-inline-start:20px; direction:ltr;}
.reading ul li{font-size:13.5px; color:#524b3d; margin-bottom:3px;}
.reading li>p:first-child{margin-top:0;}
.reading blockquote{margin:12px 0; padding:12px 16px; background:var(--paper2);
  border-inline-start:4px solid var(--accent); border-radius:8px; font-size:14px;}
.reading h3.ayat-head{direction:rtl; text-align:center;
  font-size:var(--ar-size); font-weight:700; color:var(--accent); background:var(--paper2); border-radius:10px;
  padding:14px 18px; margin:22px 0 4px; line-height:var(--ar-lh);}

/* ===== Blok rujukan (sentiasa dipapar) ===== */
.reading .cite-block{display:block; margin:16px 0 22px; direction:ltr; text-align:left;
  background:#fdf5e2; border:1px solid #e6d6a3; border-inline-start:6px solid var(--cgold);
  border-radius:4px 12px 12px 4px; padding:16px 18px 18px; box-shadow:0 2px 8px rgba(0,0,0,.05);}
.reading .cite-heading{font-size:12.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:#9c7a1f; margin:0 0 12px; padding-bottom:8px; border-bottom:1px solid #e6d6a3;}
.reading .cite-line{font-size:15.5px; color:#3c3626; margin:0 0 6px; line-height:1.6; font-weight:600;}
.reading .cite-line + .cite-line{margin-top:14px;}
.reading .cite-tag{display:inline-block; font-size:12px; font-weight:800; letter-spacing:.04em;
  padding:3px 11px; border-radius:999px; margin-inline-end:8px; color:#fff; text-transform:uppercase; vertical-align:middle;}
.reading .cite-tag.bt{background:#5c7a4f;} .reading .cite-tag.dskp{background:#2f5480;}
.reading .cite-ar{direction:rtl; unicode-bidi:isolate;
  color:#1c1812; font-size:var(--ar-size); font-weight:700; line-height:var(--ar-lh);
  display:block; margin:8px 0 2px; text-align:right;}
.reading .cite-penjelasan{margin:10px 0 0; font-size:14.5px; line-height:1.7; color:#3f3a2c;
  background:#fffef8; border:1px solid #eee0ab; border-radius:8px; padding:11px 14px;
  font-family:'Literata',Georgia,serif;}
.reading .cite-penjelasan strong{color:#2f5480; font-weight:800; letter-spacing:.03em; font-size:12.5px;}
/* Petikan Arab dalam penjelasan penjelas — kekal Amiri */
.reading .cite-penjelasan b,
.reading .cite-penjelasan .cite-ar{font-family:var(--font-ar) !important;}
.reading .cite-fixed{display:block; margin-top:10px; font-size:14px; line-height:1.7; font-weight:600;
  color:#1a5c2e; background:#eaf7ed; border:1.5px solid #a3d9ae; border-radius:8px; padding:11px 14px;}
.reading .cite-fixed strong{color:#1a5c2e; text-transform:uppercase; letter-spacing:.05em; font-size:12.5px; margin-right:4px;}
.reading .cite-ralat{display:block; margin-top:10px; font-size:14px; line-height:1.7; font-weight:600;
  color:#a3121f; background:#fdeceb; border:1.5px solid #f0a8a2; border-radius:8px; padding:11px 14px;}
.reading .cite-ralat strong{color:#a3121f; text-transform:uppercase; letter-spacing:.05em; font-size:12.5px; margin-right:4px;}
.reading .cite-flag{display:block; margin-top:12px; font-size:13.5px; color:#9c1f2e; font-weight:700;
  background:#fdecea; border:1px solid #f3c6c2; border-radius:8px; padding:10px 12px; line-height:1.6;}

/* ===== Soalan Percubaan (toggle ikut standard DSKP) ===== */
.reading .trial-slot{display:none; margin:10px 0 22px;}
.reading .trial-slot.ready{display:block;}
.reading .trial-stat{display:inline-block; font-family:'Literata',serif; font-size:13px; font-weight:700;
  color:#8a5a12; background:#fdf6e6; border:1px solid #ecd9a8; border-inline-start:4px solid var(--cgold);
  border-radius:8px; padding:7px 12px; margin-bottom:10px;}
.reading .trial-stat b{color:#7a3f0a; font-size:15px;}
.reading .trial-head{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin-bottom:8px;}
.reading .trial-tag{font-size:11.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:#5b4636; background:#f3ead6; border:1px solid #e2d3a8; padding:3px 10px; border-radius:999px;}
.reading .trial-pills{display:flex; flex-wrap:wrap; gap:6px;}
.reading .trial-pill{display:inline-block; color:#fff; font-size:11px; font-weight:800; letter-spacing:.03em;
  padding:3px 10px; border-radius:999px; line-height:1.5; white-space:nowrap; box-shadow:0 1px 3px rgba(0,0,0,.18);}
.reading .trial-pill.sm{font-size:10px; padding:2px 8px;}
.reading .trial-toggle{display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-family:'Literata',serif; font-size:13px; font-weight:700; color:var(--accent);
  background:color-mix(in srgb,var(--accent) 9%,#fff); border:1.5px solid color-mix(in srgb,var(--accent) 30%,#fff);
  border-radius:12px; padding:9px 16px; transition:background .2s, transform .15s;}
.reading .trial-toggle::before{content:"▸"; font-size:11px; transition:transform .2s;}
.reading .trial-toggle[aria-expanded="true"]::before{transform:rotate(90deg);}
.reading .trial-toggle:hover{background:color-mix(in srgb,var(--accent) 16%,#fff);}
.reading .trial-body{margin-top:12px; display:flex; flex-direction:column; gap:12px;}
.reading .trial-body[hidden]{display:none;}
.reading .trial-q{background:var(--paper); border:1px solid var(--cline); border-inline-start:4px solid var(--accent);
  border-radius:10px; padding:11px 14px;}
.reading .trial-q .trial-pill.sm{margin-bottom:7px;}
.reading .trial-qtext{font-size:var(--ar-size); font-weight:700; line-height:var(--ar-lh);
  color:#26221c; direction:rtl; text-align:right;}
.reading .trial-a{margin-top:8px; padding-top:8px; border-top:1px dashed var(--cline);
  font-size:var(--ar-size); font-weight:700; line-height:var(--ar-lh);
  color:#1a5c2e; direction:rtl; text-align:right;}
.reading .trial-a::before{content:"الجواب: "; font-family:var(--font-ar) !important;
  font-size:15px; font-weight:700; color:#1a5c2e; letter-spacing:0; text-transform:none;}
.reading .trial-err{font-size:12.5px; color:#9c1f2e; font-style:italic;}
.reading .trial-out-note{color:#b02a2a; font-weight:800; font-size:11px;}
.reading .trial-q.outside{background:#fdeceb; border-color:#f0a8a2; border-inline-start-color:#c0392b;}
.reading .trial-out-flag{display:inline-block; font-family:'Literata',serif; font-size:10.5px; font-weight:800;
  letter-spacing:.03em; text-transform:uppercase; color:#fff; background:#c0392b; border-radius:6px;
  padding:3px 9px; margin-bottom:7px;}

/* ===== Lencana ramalan floating (trial ÷ modul) ===== */
.reading .memo-q.has-pred{position:relative;}
.reading .trial-pred{position:absolute; top:12px; right:0; transform:translateX(calc(100% + 14px));
  width:108px; display:flex; flex-direction:column; align-items:center; gap:1px; z-index:5;
  background:#fff; border:2px solid var(--pc,#8a5a12); border-radius:14px; padding:10px 8px 9px;
  box-shadow:0 6px 18px rgba(0,0,0,.14); text-align:center;}
.reading .trial-pred .tp-cap{font-size:9px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:#6b6150; line-height:1.25;}
.reading .trial-pred .tp-pct{font-family:'Outfit',sans-serif; font-size:30px; font-weight:900; line-height:1; color:var(--pc,#8a5a12);}
.reading .trial-pred .tp-sub{font-size:9.5px; font-weight:800; color:#6b6150; text-transform:uppercase; letter-spacing:.02em;}
.reading .trial-pred .tp-detail{font-size:9px; color:#9a8f78; margin-top:3px; padding-top:3px; border-top:1px dashed #e2d9c4; width:100%;}
@media (max-width:1180px){
  .reading .trial-pred{position:static; transform:none; width:auto; flex-flow:row wrap; align-items:baseline;
    gap:4px 9px; margin:12px 0 0; justify-content:flex-end; padding:8px 12px; box-shadow:none;
    background:color-mix(in srgb,var(--pc,#8a5a12) 8%,#fff);}
  .reading .trial-pred .tp-pct{font-size:22px;}
  .reading .trial-pred .tp-detail{border:0; width:auto; padding:0; margin:0;}
}

@media (max-width:600px){
  .reading{
    --ar-size:19px;
  }
  .reading p.row-arabic span[dir="rtl"], .reading p.row-jawapan span[dir="rtl"],
  .reading p.row-terjemahan span[dir="rtl"], .reading p.row-malay-note span[dir="rtl"],
  .reading .memo-q>.q-ar, .reading .memo-label, .reading .memo-ar .seg,
  .reading .cite-ar, .reading .trial-qtext, .reading .trial-a{font-size:var(--ar-size);}
}

/* ===== Huraian terjemahan (T4+) ===== */
.reading .memo-huraian{margin:8px 0 0; padding:10px 12px; border-radius:10px;
  background:#f7f3ea; border:1px solid #e6dcc4; border-inline-start:4px solid var(--accent,#8a5a12);
  font-size:13px; line-height:1.7; color:#3a3428; direction:ltr; text-align:left; font-style:normal;}
.reading .memo-huraian strong{display:inline-block; font-size:11.5px; font-weight:800; letter-spacing:.03em;
  text-transform:uppercase; color:var(--accent,#8a5a12); margin-right:6px;}
.reading .memo-huraian .hh-body{display:inline;}

/* ===== Study banner Gen-Z (mode hafalan) ===== */
.study-banner{
  --accent:#1e4d8c;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin:0 0 18px; padding:14px 18px;
  border-radius:16px;
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--accent) 12%,#fff) 0%,
    color-mix(in srgb,var(--accent) 6%,#faf6ee) 100%);
  border:1.5px solid color-mix(in srgb,var(--accent) 28%,#e4dcc9);
  box-shadow:0 4px 16px color-mix(in srgb,var(--accent) 12%,transparent);
  font-family:'Outfit','Literata',sans-serif;
}
.study-banner .sb-emoji{font-size:28px; line-height:1; flex-shrink:0;}
.study-banner .sb-body{flex:1; min-width:200px;}
.study-banner .sb-title{
  font-size:13px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:var(--accent); margin:0 0 4px;
}
.study-banner .sb-tip{
  font-size:13.5px; line-height:1.55; color:#3a3428; font-weight:500;
  font-family:'Literata',Georgia,serif;
}
.study-banner .sb-tip b{color:var(--accent); font-weight:800;}
.study-banner .sb-badge{
  font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:#fff; background:var(--accent); padding:6px 12px; border-radius:999px;
  box-shadow:0 2px 8px color-mix(in srgb,var(--accent) 35%,transparent);
}
@media (max-width:560px){
  .study-banner{padding:12px 14px; gap:10px;}
  .study-banner .sb-emoji{font-size:22px;}
  .study-banner .sb-badge{width:100%; text-align:center;}
}

/* ===== Panel Mi‘yar at-Ta‘allum — jadual cantik + klik lompat ===== */
.reading .miyar-panel,
.miyar-panel{
  --my-accent:var(--accent,#6b3d8c);
  margin:0 0 26px;
  border-radius:18px;
  border:1.5px solid color-mix(in srgb,var(--my-accent) 30%,#e4dcc9);
  background:linear-gradient(165deg,#fff 0%, color-mix(in srgb,var(--my-accent) 6%,#faf6ee) 100%);
  overflow:hidden;
  box-shadow:0 8px 28px rgba(0,0,0,.07);
}
.miyar-panel .my-head{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 18px;
  background:linear-gradient(135deg,var(--my-accent),color-mix(in srgb,var(--my-accent) 72%,#1a1030));
  color:#fff;
}
.miyar-panel .my-head-text{display:flex; flex-direction:column; gap:3px;}
.miyar-panel .my-title-ar{
  font-family:var(--font-ar,'Amiri'),serif !important;
  direction:rtl; font-size:22px; font-weight:700; color:#fff; line-height:1.2;
}
.miyar-panel .my-title-my{
  font-size:11.5px; font-weight:700; letter-spacing:.03em;
  color:rgba(255,255,255,.88);
  font-family:'Outfit','Literata',sans-serif;
}
.miyar-panel .my-head-badge{
  font-size:11px; font-weight:800; letter-spacing:.04em;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.28);
  padding:6px 12px; border-radius:999px; font-family:'Outfit',sans-serif;
}
.miyar-panel .my-intro{
  padding:12px 18px 8px; font-size:13px; color:#4a4338; line-height:1.55; margin:0;
  font-family:'Literata',Georgia,serif;
}
.miyar-panel .my-table-wrap{
  padding:0 12px 14px; overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.miyar-panel table.my-table{
  width:100%; border-collapse:separate; border-spacing:0;
  font-size:13px; min-width:520px;
  border-radius:12px; overflow:hidden;
  border:1px solid color-mix(in srgb,var(--my-accent) 18%,#e4dcc9);
  background:#fff;
}
.miyar-panel .my-table thead th{
  background:color-mix(in srgb,var(--my-accent) 14%,#f7f3ea);
  color:var(--my-accent); font-family:'Outfit',sans-serif;
  font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  padding:11px 12px; text-align:left; border-bottom:1.5px solid color-mix(in srgb,var(--my-accent) 22%,#e4dcc9);
  white-space:nowrap;
}
.miyar-panel .my-table thead th[dir="rtl"]{text-align:right;}
.miyar-panel .my-table tbody tr.my-row{
  transition:background .18s, box-shadow .18s, transform .15s;
  cursor:pointer;
}
.miyar-panel .my-table tbody tr.my-row:nth-child(even){background:#fcfaf6;}
.miyar-panel .my-table tbody tr.my-row:hover{
  background:color-mix(in srgb,var(--my-accent) 10%,#fff);
  box-shadow:inset 3px 0 0 var(--my-accent);
}
.miyar-panel .my-table td{
  padding:12px; vertical-align:middle;
  border-bottom:1px solid #efe8d8;
}
.miyar-panel .my-table tr:last-child td{border-bottom:0;}
.miyar-panel .my-link{
  text-decoration:none; color:inherit; display:block;
}
.miyar-panel .my-code{
  display:inline-block; font-size:11.5px; font-weight:800; letter-spacing:.03em;
  color:#fff; background:var(--my-accent); padding:4px 9px; border-radius:8px;
  white-space:nowrap; font-family:'Outfit',sans-serif;
  box-shadow:0 2px 6px color-mix(in srgb,var(--my-accent) 35%,transparent);
}
.miyar-panel tr:hover .my-code{
  transform:scale(1.05);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--my-accent) 25%,transparent),
             0 4px 12px color-mix(in srgb,var(--my-accent) 40%,transparent);
}
.miyar-panel .my-std-ar{
  font-family:var(--font-ar,'Amiri'),serif !important;
  direction:rtl; text-align:right; font-size:17px; font-weight:700;
  color:#1c1812; line-height:1.55;
}
.miyar-panel .my-std-my{
  font-size:13px; color:#3f3a30; line-height:1.5; font-weight:500;
  font-family:'Literata',Georgia,serif;
}
.miyar-panel .my-tag{
  display:inline-block; font-size:10px; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; padding:3px 9px; border-radius:999px;
  font-family:'Outfit',sans-serif; white-space:nowrap;
}
.miyar-panel .my-tag.asas{background:#e6f0fa; color:#1e4d8c;}
.miyar-panel .my-tag.tambahan{background:#fdf6e6; color:#8a5a12;}
.miyar-panel .my-tag.pelengkap{background:#e8f5ee; color:#1a6b3a;}
.miyar-panel .my-go{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:10px; text-decoration:none;
  font-size:16px; font-weight:800; color:var(--my-accent);
  background:color-mix(in srgb,var(--my-accent) 10%,#fff);
  border:1px solid color-mix(in srgb,var(--my-accent) 25%,#e4dcc9);
  transition:background .15s, transform .15s, box-shadow .15s;
}
.miyar-panel .my-go:hover{
  background:var(--my-accent); color:#fff;
  transform:translateY(2px);
  box-shadow:0 4px 12px color-mix(in srgb,var(--my-accent) 35%,transparent);
}
.miyar-panel .my-td-code{width:1%; white-space:nowrap;}
.miyar-panel .my-td-tag{width:1%; white-space:nowrap;}
.miyar-panel .my-td-go{width:1%; text-align:center;}

/* Anchor target — elak header tutup */
.reading .hadith-stimulus[id],
.reading .memo-q[id],
.hadith-stimulus[id],
.memo-q[id]{
  scroll-margin-top:88px;
}
/* Highlight ring sekejap bila dilompat */
.reading .memo-q[id]:target,
.reading .hadith-stimulus[id]:target{
  outline:2px solid var(--accent,#6b3d8c);
  outline-offset:4px;
  box-shadow:0 0 0 6px color-mix(in srgb,var(--accent,#6b3d8c) 18%,transparent);
  border-radius:16px;
  animation:my-flash .9s ease;
}
@keyframes my-flash{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent,#6b3d8c) 40%,transparent);}
  100%{box-shadow:0 0 0 6px color-mix(in srgb,var(--accent,#6b3d8c) 12%,transparent);}
}

.reading .memo-q .q-dskp{
  display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.04em;
  color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,#fff);
  border:1px solid color-mix(in srgb,var(--accent) 25%,#e4dcc9);
  border-radius:999px; padding:2px 9px; margin:0 0 6px; font-family:'Outfit',sans-serif;
}
@media (max-width:640px){
  .miyar-panel .my-table{min-width:480px;}
  .miyar-panel .my-std-ar{font-size:15px;}
  .miyar-panel .my-std-my{font-size:12px;}
}

/* ===== Kotak stimulus hadis (seperti buku teks / DSKP) ===== */
.reading .hadith-stimulus,
.hadith-stimulus{
  --hs-accent:var(--accent,#6b3d8c);
  margin:0 0 26px;
  padding:0;
  border-radius:18px;
  overflow:hidden;
  border:2px solid color-mix(in srgb,var(--hs-accent) 35%,#c9b8a0);
  background:linear-gradient(180deg,#fffef9 0%,#faf4e8 100%);
  box-shadow:0 6px 22px rgba(60,40,20,.08);
}
.hadith-stimulus .hs-head{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px;
  padding:12px 18px;
  background:linear-gradient(135deg,var(--hs-accent),color-mix(in srgb,var(--hs-accent) 70%,#1a1030));
  color:#fff;
}
.hadith-stimulus .hs-badge-ar{
  font-family:var(--font-ar,'Amiri'),serif !important;
  font-size:20px; font-weight:700; letter-spacing:0;
}
.hadith-stimulus .hs-badge-my{
  font-family:'Outfit','Literata',sans-serif;
  font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  opacity:.92; background:rgba(255,255,255,.18); padding:4px 12px; border-radius:999px;
}
.hadith-stimulus .hs-topic{
  font-family:var(--font-ar,'Amiri'),serif !important;
  direction:rtl; text-align:center;
  font-size:18px; font-weight:700; color:var(--hs-accent);
  padding:12px 16px 0; margin:0;
}
.hadith-stimulus .hs-rawi{
  font-family:var(--font-ar,'Amiri'),serif !important;
  direction:rtl; text-align:right;
  font-size:17px; line-height:1.9; font-weight:600; color:#4a3f32;
  margin:10px 18px 6px; padding:0;
}
.hadith-stimulus .hs-matan{
  margin:4px 14px 14px;
  padding:16px 18px 18px;
  border-radius:14px;
  background:#fff;
  border:1.5px dashed color-mix(in srgb,var(--hs-accent) 30%,#d4c4a8);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8);
}
/* Matan: cip warna Arab (sama sistem .seg seperti Q&A) */
.hadith-stimulus .hs-ar{
  font-family:var(--font-ar,'Amiri'),serif !important;
  direction:rtl; text-align:right;
  margin:0 0 10px; line-height:var(--ar-lh,1.95);
}
.hadith-stimulus .hs-ar .seg{
  font-size:var(--ar-size,22px); font-weight:700; line-height:var(--ar-lh,1.95);
  display:inline-block; padding:2px 11px; margin:4px 4px; border-radius:11px;
  border:1px solid transparent;
}
/* Cip Melayu sepadan di bawah matan */
.hadith-stimulus .hs-my-seg{
  direction:ltr; text-align:left; margin:0;
  padding-top:10px; border-top:1px dashed var(--cline,#e4dcc9);
  line-height:2.1;
  font-family:'Literata',Georgia,serif;
}
.hadith-stimulus .hs-my-seg .seg{
  font-size:13px; font-weight:600;
  font-family:'Literata',Georgia,serif !important;
  display:inline-block; padding:2px 11px; margin:4px 4px; border-radius:11px;
  border:1px solid transparent;
}
/* legacy single lines (jika ada) */
.hadith-stimulus .hs-line{
  font-family:var(--font-ar,'Amiri'),serif !important;
  direction:rtl; text-align:right;
  font-size:var(--ar-size,22px); line-height:2.05; font-weight:700;
  color:#1a1510; margin:0 0 2px; padding:0;
}
.hadith-stimulus .hs-tr{
  margin:0 14px 12px; padding:12px 16px;
  border-radius:12px;
  background:color-mix(in srgb,var(--hs-accent) 7%,#fff);
  border:1px solid color-mix(in srgb,var(--hs-accent) 18%,#e4dcc9);
  border-inline-start:4px solid var(--hs-accent);
}
.hadith-stimulus .hs-tr-lbl{
  font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--hs-accent); margin:0 0 6px;
  font-family:'Outfit','Literata',sans-serif;
}
.hadith-stimulus .hs-tr-body{
  font-family:'Literata',Georgia,serif;
  font-size:14px; line-height:1.75; color:#2f2a22; margin:0;
  direction:ltr; text-align:left;
}
.hadith-stimulus .hs-takhrij{
  margin:0 14px 12px; padding:12px 16px;
  border-radius:12px;
  background:#f3f0e6;
  border:1px solid #ddd2b5;
}
.hadith-stimulus .hs-tk-row{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 14px;
  justify-content:space-between;
}
.hadith-stimulus .hs-tk-lbl{
  font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:#7a5c18; font-family:'Outfit',sans-serif;
  background:#e8d9a8; padding:3px 10px; border-radius:999px;
}
.hadith-stimulus .hs-tk-ar{
  font-family:var(--font-ar,'Amiri'),serif !important;
  font-size:18px; font-weight:700; color:#3d2e0a;
  direction:rtl; text-align:right; flex:1;
}
.hadith-stimulus .hs-tk-my{
  font-family:'Literata',Georgia,serif;
  font-size:13px; color:#5c5344; margin:8px 0 0; line-height:1.55;
}
.hadith-stimulus .hs-tip{
  margin:0; padding:10px 16px 14px;
  font-size:12.5px; color:#6b6150;
  font-family:'Literata',Georgia,serif;
  border-top:1px dashed #e0d6c0;
  background:rgba(255,255,255,.45);
}
@media (max-width:560px){
  .hadith-stimulus .hs-line{font-size:19px; line-height:1.95;}
  .hadith-stimulus .hs-rawi{font-size:15.5px; margin-inline:12px;}
  .hadith-stimulus .hs-matan{margin-inline:10px; padding:12px 12px;}
}

/* Stimulus ayat (tafsir) — guna layout yang sama stimulus hadis */
.reading .ayat-stimulus .hs-head{
  background:linear-gradient(135deg,#0d6b64,#1a9b8a);
}
.reading .ayat-stimulus{
  --hs-accent:#0d6b64;
  border-color:color-mix(in srgb,#0d6b64 40%,#c9b8a0);
}