/* ==========================================================================
   KURAN OKUMA 2026 — W1 Classical Mushaf
   Sepia paper, copper accents, side-by-side spread, minimal chrome
   ========================================================================== */

/* Shaikh Hamdullah Mushaf — Diyanet/Mushaf tarzinda Arap hat fontu
   Kaynak: kuranvemeali.com (Şeyh Hamdullah hat ekolü)
   Global yol: /fonts/ShaikhHamdullahMushaf.ttf — arabic.css ile ayni */
@font-face {
  font-family: 'Shaikh Hamdullah Mushaf';
  src: url('/fonts/ShaikhHamdullahMushaf.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* === TOKENS (W1 Palette) === */
:root{
  /* Brand — Copper/Gold (W1) */
  --p:#B87333;--p-light:#D4956A;--p-dark:#8B5A2B;
  --p-soft:rgba(184,115,51,.08);--p-ghost:rgba(184,115,51,.04);
  --gold:#C5A54E;--gold-light:#E8D5A0;--gold-soft:rgba(197,165,78,.12);

  /* Surfaces — W1 warm cream */
  --bg:#F0EEE9;         /* canvas bg */
  --surface:#FFFDF8;    /* paper */
  --surface-dim:#F5F1E8;/* cream */
  --surface-deep:#EDE7D9;/* ruleSoft */
  --sepia:#F4E8D0;--sepia-deep:#E8D5A8;

  /* Ink — W1 */
  --ink:#0F0A07;        /* ink */
  --ink-2:#2C1810;      /* textBody */
  --ink-3:#3d2b1f;      /* textBody alt */
  --ink-muted:#6B5B4F;  /* textMuted */
  --ink-soft:#9B8B7F;   /* textSoft */

  /* Lines */
  --line:#E0D5C8;--line-light:#EDE7D9;

  /* Radii — W1 has almost no radius on page, keep UI small radii */
  --r-s:6px;--r-m:10px;--r-l:14px;--r-xl:18px;--r-pill:999px;

  /* Shadows — Layered, warm */
  --sh-1:0 1px 2px rgba(28,20,16,.04);
  --sh-2:0 1px 2px rgba(28,20,16,.03),0 4px 16px rgba(28,20,16,.05);
  --sh-3:0 1px 2px rgba(28,20,16,.04),0 8px 32px rgba(28,20,16,.08);
  --sh-4:0 1px 3px rgba(28,20,16,.05),0 24px 60px -30px rgba(0,0,0,.18);
  --sh-paper:0 1px 0 rgba(0,0,0,.03),0 24px 60px -30px rgba(0,0,0,.18);

  /* Typography — W1 */
  --font-ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-display:'Playfair Display','Georgia',serif;
  --font-arabic:'iar-kuran-hat',serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;

  /* Animation */
  --ease:cubic-bezier(.16,1,.3,1);--dur:.25s;--dur-s:.4s;

  /* Layout — W1 header is lighter, not dark */
  --header-bg:rgba(250,247,242,.94);--header-ink:var(--ink);--header-h:56px;
  --sidebar-w:380px;--content-max:1440px;
  --reading-pad:clamp(16px,4vw,48px);

  /* Compat aliases */
  --p-subtle:var(--p-soft);--gold-subtle:var(--gold-soft);
  --surface-0:var(--surface);--surface-1:var(--surface-dim);--surface-2:var(--surface-deep);--surface-sunken:var(--surface-deep);
  --text-primary:var(--ink);--text-secondary:var(--ink-2);--text-tertiary:var(--ink-3);--text-muted:var(--ink-muted);
  --border:var(--line);--border-light:var(--line-light);--border-focus:var(--p);
  --shadow-sm:var(--sh-1);--shadow-md:var(--sh-2);--shadow-lg:var(--sh-3);--shadow-xl:var(--sh-4);
  --radius-xs:6px;--radius-sm:var(--r-s);--radius-md:var(--r-m);--radius-lg:var(--r-l);--radius-xl:var(--r-xl);--radius-full:var(--r-pill);--radius-card:var(--r-xl);--radius-btn:var(--r-pill);--radius-input:var(--r-m);--radius-popup:var(--r-l);
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;
  --duration-fast:150ms;--duration-normal:250ms;--duration-slow:400ms;
  --ease-out:var(--ease);--ease-spring:cubic-bezier(.34,1.56,.64,1);
  --font-body:var(--font-ui);
  --card:var(--surface);--txt:var(--ink);--txt2:var(--ink-3);--bdr:var(--line);--sh:var(--sh-2);--shl:var(--sh-3);--pd:var(--p-dark);
  --transition-smooth:all .3s var(--ease);
  --gradient-copper:linear-gradient(135deg,var(--p),var(--p-light));
  --gradient-gold:linear-gradient(135deg,var(--gold),var(--gold-light));
  --gradient-subtle:linear-gradient(135deg,rgba(176,112,48,.03),rgba(212,149,106,.01));
  --gradient-start:var(--gradient-copper);
  --shadow-modern:var(--sh-2);--shadow-hover:var(--sh-3);--shadow-card:var(--sh-1);--shadow-card-hover:var(--sh-2);
  --glass-bg:rgba(255,255,255,.88);--glass-border:rgba(255,255,255,.5);--glass-blur:blur(20px);--glass-shadow:var(--sh-2);
}

/* Sepia Theme — refined parchment palette (warm cream + chocolate ink) */
body.theme-sepia{
  --bg:#EFE3CC;
  --surface:#FBF4E2;
  --surface-dim:#F2E6CA;
  --surface-deep:#E8D9B7;
  --ink:#3B2A18;
  --ink-2:#4A3825;
  --ink-3:#6E563C;
  --ink-muted:#94785A;
  --ink-soft:#B89C7B;
  --line:#D7C29D;
  --line-light:#E5D5B5;
  --p:#9A5A1F;
  --p-light:#B97A35;
  --p-dark:#6D3F12;
  --p-soft:rgba(154,90,31,.14);
  --p-ghost:rgba(154,90,31,.07);
  --gold:#A88245;
  --gold-light:#C7A565;
  --header-bg:rgba(251,244,226,.94);
  --header-ink:var(--ink);
  --glass-bg:rgba(251,244,226,.92);
  --glass-border:rgba(154,90,31,.14);
}
/* Tema rengini sayfa zeminine zorla uygula (CSS değişkeni cascade quirk'i için) */
html:has(body.theme-sepia),body.theme-sepia{background-color:#EFE3CC !important}
html:has(body.theme-light),body.theme-light{background-color:#F0EEE9 !important}

/* === GLOBAL === */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{overflow-x:hidden;max-width:100vw}
body{font-family:var(--font-ui);background:var(--bg);color:var(--ink);min-height:100vh;min-height:100dvh;overflow-x:hidden;max-width:100vw;-webkit-font-smoothing:antialiased;transition:background var(--dur) var(--ease),color var(--dur) var(--ease);font-size:14px;letter-spacing:-.005em}

/* 2026-05-25 audit fix: Eski navbar (.ia-ident 36px + .mv-hdr 64px = 100px)
   için body padding-top:100px vardı; ama YENİ navbar .ia-nav-root normal
   akışta (sticky/fixed değil) ve 65px. Eski kural Kuran Okuma sayfasında
   topbar/hero arasına 100px gereksiz boşluk koyuyor ve diğer kategorilerden
   farklı görünüm yaratıyordu. .mushaf-* sayfaları (oku.html) zaten kendi
   --header-h değişkeniyle hesaplama yapıyor — body padding'a gerek yok.
   .ia-ident ve .mv-hdr eski class'lar; fullscreen-mode satırı uyumluluk
   için tutuluyor (yoksa hata atmaz, sadece selektörü match etmez). */
:root{--mv-global-h:0px}
body{padding-top:0 !important}
@media(max-width:700px){:root{--mv-global-h:0px}}
@media(max-width:640px){:root{--mv-global-h:0px}}
body.panel-open,body.sidebar-open{overflow:hidden}
body.resizing{user-select:none;cursor:col-resize!important}
body.resizing *{cursor:col-resize!important}

/* Fullscreen — keep sidebar accessible, give columns generous padding */
body.fullscreen-mode{overflow:hidden;padding-top:0 !important}
body.fullscreen-mode .ia-ident,body.fullscreen-mode .mv-hdr{display:none !important}
body.fullscreen-mode .mushaf-header{position:fixed;top:0;left:0;right:0;z-index:999}
body.fullscreen-mode .mushaf-main{max-width:none;padding:0;margin-top:var(--header-h);grid-template-columns:1fr;height:calc(100vh - var(--header-h));overflow-y:auto}
/* sidebar stays slide-in (no display:none) so action buttons keep working */
body.fullscreen-mode .right-sidebar{z-index:1000}
body.fullscreen-mode .sidebar-overlay{z-index:999}
body.fullscreen-mode .mushaf-content{max-width:var(--mushaf-width,1400px);margin:0 auto;padding:24px}
body.fullscreen-mode .bottom-nav,body.fullscreen-mode .site-footer,body.fullscreen-mode .control-bar{display:none}
body.fullscreen-mode .mushaf-page{box-shadow:none;border-radius:0;border:none;margin:0 auto}
body.fullscreen-mode[data-layout="side"] .mushaf-page{grid-template-columns:1fr 1fr}
body.fullscreen-mode .mushaf-kuran-column{padding:48px 60px 60px 64px}
body.fullscreen-mode .mushaf-meals-column{padding:48px 64px 60px 60px}
body.fullscreen-mode .cross-link-banners-container{margin-top:8px}
/* fullscreen icon toggle handled by .mh-btn rules */

/* =====================================================================
   HEADER — W1 Minimal Light Bar
   ===================================================================== */
.mushaf-header{
  position:sticky;top:0;z-index:99;width:100%;
  background:var(--header-bg);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  height:var(--header-h);
  transition:transform .3s var(--ease),opacity .3s var(--ease);
  will-change:transform;
}
.mushaf-header.header-hidden{transform:translateY(-120%);opacity:0}

/* Two-side split bar */
.mh-bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;height:100%;padding:0 28px;
  max-width:var(--content-max);width:100%;
}
.mh-left,.mh-right{display:flex;align-items:center;gap:12px;min-width:0}
.mh-left{flex:1;min-width:0}
.mh-right{flex-shrink:0}
.mh-brand{font-family:var(--font-display);font-size:1.05rem;font-weight:600;color:var(--ink);text-decoration:none;letter-spacing:-.3px;white-space:nowrap}
.mh-brand:hover{color:var(--p-dark)}
.mh-locator{display:inline-flex;align-items:baseline;gap:8px;font-family:var(--font-display);color:var(--ink-muted);font-size:.92rem;letter-spacing:-.1px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mh-locator-sep{color:var(--ink-soft);font-weight:300}
.mh-meta{font-family:var(--font-mono);font-size:.7rem;color:var(--ink-muted);letter-spacing:.04em;white-space:nowrap}
.mh-meta strong{color:var(--ink);font-weight:600}
.mh-btn-sm{width:28px;height:28px;font-size:.7rem}
@media(max-width:1100px){
  .mh-meta{display:none}
  .mh-brand{font-size:.95rem}
}

/* Divider — thin vertical rule, copper-tinted */
.mh-divider{width:1px;height:18px;background:var(--line);flex-shrink:0}

/* Buttons — muted ink, hover copper */
.mh-btn{
  width:34px;height:34px;border:none;background:transparent;
  border-radius:var(--r-s);color:var(--ink-muted);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;font-size:.85rem;
  transition:all .15s var(--ease);text-decoration:none;flex-shrink:0;
}
.mh-btn:hover{background:var(--p-soft);color:var(--p-dark)}
.mh-btn:active{transform:scale(.92)}

/* Labeled buttons — W1 minimal style with monospace hint */
.mh-btn-labeled{
  width:auto;height:30px;padding:0 12px;gap:6px;
  border:1px solid var(--line);background:transparent;
  font-size:.7rem;white-space:nowrap;color:var(--ink-muted);
  font-family:var(--font-ui);
}
.mh-btn-labeled span{font-size:.68rem;font-weight:500;color:var(--ink-muted);transition:color .15s;letter-spacing:.01em}
.mh-btn-labeled:hover{background:var(--p-soft);border-color:var(--p-light);color:var(--p-dark)}
.mh-btn-labeled:hover span{color:var(--p-dark)}

/* Surah name — Playfair, ink, subtle */
.mh-surah{font-size:1rem;font-weight:600;color:var(--ink);white-space:nowrap;padding:0 2px;font-family:var(--font-display);letter-spacing:-.2px}

/* Page badge — mono text */
.mh-page-badge{font-size:.72rem;color:var(--ink-muted);white-space:nowrap;font-family:var(--font-display)}

/* Page jump input */
.mh-page-jump{
  display:flex;align-items:center;
  background:transparent;border:1px solid var(--line);
  border-radius:var(--r-pill);padding:1px 8px;
  transition:border-color .15s,box-shadow .15s;
}
.mh-page-jump:focus-within{border-color:var(--p);box-shadow:0 0 0 3px var(--p-soft)}
.mh-page-input{
  width:32px;height:22px;border:none;background:transparent;text-align:center;
  font-size:.78rem;font-weight:600;color:var(--ink);
  padding:0;outline:none;-moz-appearance:textfield;font-family:var(--font-mono);
}
.mh-page-input::-webkit-outer-spin-button,.mh-page-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.mh-page-total{font-size:.7rem;color:var(--ink-muted);font-weight:500;white-space:nowrap;font-family:var(--font-mono)}

/* Fullscreen toggle icons */
.mh-btn i.fa-compress{display:none}
body.fullscreen-mode .mh-btn i.fa-expand{display:none}
body.fullscreen-mode .mh-btn i.fa-compress{display:inline}

/* Hide labels on smaller desktop */
@media(max-width:1200px){
  .mh-btn-labeled span{display:none}
  .mh-btn-labeled{width:32px;padding:0}
}

/* Hide desktop-only elements on mobile */
@media(max-width:768px){
  .mh-bar{gap:4px;padding:0 8px}
  .mh-btn-labeled{display:none}
  .mh-divider:not(:first-of-type){display:none}
  .mh-page-jump{display:none}
  .mh-btn{width:28px;height:28px}
}

/* =====================================================================
   YENİ MERKEZ + HAMBURGER TASARIM
   ===================================================================== */
.mh-bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center}
.mh-left{justify-self:start}
.mh-center{display:flex;align-items:center;gap:6px;justify-self:center}
.mh-right{justify-self:end}
.mh-hidden-popovers{position:absolute;left:-9999px;top:-9999px;width:0;height:0;overflow:hidden}
.mh-hidden-popovers .mh-pop{position:absolute;top:60px;right:24px;left:auto}

/* Hamburger Araçlar butonu */
.mh-tools-btn{
  display:inline-flex;align-items:center;gap:10px;
  height:36px;padding:0 14px;
  border:1px solid var(--line);background:var(--surface);
  border-radius:var(--r-pill);
  color:var(--ink);font-size:.75rem;font-weight:600;cursor:pointer;
  font-family:var(--font-ui);letter-spacing:.02em;
  transition:all .2s var(--ease);
  -webkit-tap-highlight-color:transparent
}
.mh-tools-btn:hover{background:var(--p-soft);border-color:var(--p);color:var(--p-dark)}
.mh-tools-btn:active{transform:scale(.96)}
.mh-tools-hamburger{display:flex;flex-direction:column;gap:3px;width:16px}
.mh-tools-hamburger span{display:block;height:2px;background:currentColor;border-radius:1px;transition:transform .2s,opacity .2s}
.mh-tools-btn.open .mh-tools-hamburger span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.mh-tools-btn.open .mh-tools-hamburger span:nth-child(2){opacity:0}
.mh-tools-btn.open .mh-tools-hamburger span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* Araçlar Paneli */
.tools-overlay{
  position:fixed;inset:0;background:rgba(15,10,7,.5);
  opacity:0;pointer-events:none;
  transition:opacity .25s var(--ease);
  z-index:1100
}
.tools-overlay.active{opacity:1;pointer-events:auto}
.tools-panel{
  position:fixed;top:0;bottom:0;
  right:calc(-1 * min(380px, 90vw));
  width:min(380px,90vw);
  background:var(--surface);
  border-left:1px solid var(--line);
  box-shadow:-8px 0 32px rgba(15,10,7,.18);
  transition:right .3s cubic-bezier(.4,0,.2,1);
  z-index:1101;
  display:flex;flex-direction:column;
  overflow:hidden
}
.tools-panel.active{right:0}
.tools-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;border-bottom:1px solid var(--line);
  background:var(--surface-dim)
}
.tools-head-title{
  font-family:var(--font-display);font-size:1.05rem;font-weight:700;
  color:var(--ink);display:flex;align-items:center;gap:10px
}
.tools-head-title i{color:var(--p);font-size:.9rem}
.tools-close{
  width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line);background:transparent;
  color:var(--ink-muted);cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:.8rem;
  transition:all .15s
}
.tools-close:hover{background:var(--p-soft);color:var(--p-dark);border-color:var(--p)}
.tools-body{
  flex:1;overflow-y:auto;
  padding:18px 20px;display:flex;flex-direction:column;gap:20px;
  -webkit-overflow-scrolling:touch
}
.tools-body::-webkit-scrollbar{width:6px}
.tools-body::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}

.tools-section{
  display:flex;flex-direction:column;gap:10px
}
.tools-h4{
  font-family:var(--font-ui);font-size:.68rem;font-weight:700;
  color:var(--p);text-transform:uppercase;letter-spacing:.14em;
  margin:0 0 4px;display:flex;align-items:center;gap:8px
}
.tools-h4 i{font-size:.78rem}

/* İlerleme Card */
.tools-progress{
  display:grid;grid-template-columns:auto 1fr;gap:14px;
  padding:14px;background:linear-gradient(135deg,var(--p-ghost),var(--surface-dim));
  border-radius:var(--r-l);border:1px solid var(--line);
  align-items:center
}
.tools-progress-ring-wrap{position:relative;width:64px;height:64px}
.tools-prog-ring{width:100%;height:100%;transform:rotate(-90deg)}
.tools-prog-bg{fill:none;stroke:var(--line);stroke-width:5}
.tools-prog-fill{fill:none;stroke:url(#toolsRingGrad);stroke-width:5;stroke-linecap:round;stroke-dasharray:214;stroke-dashoffset:214;transition:stroke-dashoffset 1.5s var(--ease)}
.tools-prog-pct{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:.85rem;font-weight:700;color:var(--p)
}
.tools-progress-info h3{
  font-family:var(--font-display);font-size:.95rem;font-weight:700;color:var(--ink);margin:0 0 6px
}
.tools-prog-stats{display:flex;gap:14px;margin-bottom:8px}
.tools-prog-stats > div{display:flex;flex-direction:column;line-height:1}
.tools-prog-stats strong{font-family:var(--font-display);font-size:1rem;color:var(--ink);font-weight:700}
.tools-prog-stats span{font-size:.62rem;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.1em;margin-top:3px}
.tools-reset{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border:1px solid var(--line);background:transparent;
  border-radius:var(--r-pill);font-size:.68rem;color:var(--ink-muted);cursor:pointer;
  font-family:var(--font-ui);font-weight:500;transition:all .15s;align-self:flex-start
}
.tools-reset:hover{border-color:var(--p);color:var(--p)}
.tools-reset i{font-size:.6rem}

/* Pill grupları (tema / düzen / arsource) */
.tools-pill-grp{display:flex;gap:6px;flex-wrap:nowrap}
.tools-pill-grp-wrap{flex-wrap:wrap}
.tools-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 14px;border:1px solid var(--line);background:var(--surface);
  border-radius:var(--r-pill);font-size:.78rem;color:var(--ink-2);
  cursor:pointer;font-family:var(--font-ui);font-weight:500;
  transition:all .15s var(--ease);-webkit-tap-highlight-color:transparent
}
.tools-pill i{font-size:.72rem;color:var(--ink-muted)}
.tools-pill:hover{border-color:var(--p);background:var(--p-soft);color:var(--p-dark)}
.tools-pill:hover i{color:var(--p-dark)}
.tools-pill.active{background:var(--p);border-color:var(--p);color:#fff}
.tools-pill.active i{color:#fff}

/* Yazı boyutu slider */
.tools-slider-row{display:flex;align-items:center;gap:12px}
.tools-slider{flex:1;-webkit-appearance:none;appearance:none;height:6px;background:var(--line-light);border-radius:var(--r-pill);outline:none;cursor:pointer}
.tools-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;background:var(--p);border-radius:50%;cursor:pointer;border:2px solid var(--surface);box-shadow:0 2px 6px rgba(184,115,51,.3)}
.tools-slider::-moz-range-thumb{width:20px;height:20px;background:var(--p);border-radius:50%;cursor:pointer;border:2px solid var(--surface)}
.tools-slider-label{font-family:var(--font-display);color:var(--ink-muted);font-weight:600}
.tools-slider-label-lg{font-size:1.3rem}
.tools-slider-val{font-family:var(--font-mono);font-size:.75rem;color:var(--ink-muted);text-align:center;letter-spacing:.05em}

/* Kâri listesi */
.tools-reciter-list{display:flex;flex-direction:column;gap:6px;max-height:240px;overflow-y:auto}
.tools-reciter-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border:1px solid var(--line-light);background:var(--surface);
  border-radius:var(--r-m);cursor:pointer;
  transition:all .15s;font-size:.78rem;color:var(--ink-2)
}
.tools-reciter-item:hover{border-color:var(--p-light);background:var(--p-soft)}
.tools-reciter-item.active{border-color:var(--p);background:var(--p-soft);color:var(--p-dark);font-weight:600}
.tools-reciter-item .rec-flag{font-size:.6rem;color:var(--ink-muted);background:var(--surface-deep);padding:2px 6px;border-radius:var(--r-s);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.05em;margin-left:auto}

/* Yer imleri listesi */
.tools-bookmark-list{display:flex;flex-direction:column;gap:8px;max-height:280px;overflow-y:auto}
.tools-bookmark-list .tools-empty{padding:18px;text-align:center;color:var(--ink-muted);font-size:.78rem;border:1px dashed var(--line);border-radius:var(--r-m)}

/* Tam ekran butonu */
.tools-fullscreen{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:14px;border:1px solid var(--line);background:var(--surface);
  border-radius:var(--r-l);font-size:.85rem;font-weight:600;color:var(--ink);
  cursor:pointer;font-family:var(--font-ui);transition:all .15s
}
.tools-fullscreen:hover{border-color:var(--p);background:var(--p-soft);color:var(--p-dark)}
.tools-fullscreen i{color:var(--p);font-size:1rem}

/* Kısayollar */
.tools-shortcuts{display:flex;flex-direction:column;gap:6px}
.tools-shortcuts > div{display:flex;justify-content:space-between;align-items:center;font-size:.72rem;color:var(--ink-muted);padding:4px 0}
.tools-shortcuts kbd{font-family:var(--font-mono);font-size:.65rem;background:var(--surface-deep);border:1px solid var(--line);border-radius:var(--r-xs,4px);padding:2px 5px;color:var(--ink-2);margin-right:2px}

/* Quick toolbar removed — actions merged into header hero */

/* =====================================================================
   MAIN CONTENT — W1 generous paper area
   ===================================================================== */
.mushaf-main{
  max-width:var(--content-max);margin:0 auto;
  padding:16px var(--reading-pad) 80px;
  display:block;position:relative;
}
.mushaf-content{min-height:50vh;scroll-behavior:smooth;position:relative;max-width:1180px;margin:0 auto}

/* W1 page-turn chevrons — fixed to viewport, always centered vertically */
.page-chevron{
  position:fixed;top:50%;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-muted);
  display:flex;align-items:center;justify-content:center;font-size:18px;
  transform:translateY(-50%);z-index:80;cursor:pointer;
  transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease),box-shadow .15s var(--ease);
  font-family:var(--font-ui);line-height:1;padding:0;
  box-shadow:0 4px 14px -6px rgba(0,0,0,.18);
}
.page-chevron:hover{border-color:var(--p);color:var(--p-dark);background:var(--p-soft);box-shadow:0 6px 18px -6px rgba(184,115,51,.35)}
.page-chevron:active{transform:translateY(-50%) scale(.95)}
.page-chevron.prev{left:24px}
.page-chevron.next{right:24px}
body.fullscreen-mode .page-chevron.prev{left:32px}
body.fullscreen-mode .page-chevron.next{right:32px}
@media(max-width:900px){.page-chevron{display:none}}

.mushaf-resize-handle{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--line);cursor:col-resize;z-index:10;transition:background .15s,box-shadow .15s;display:none}
.mushaf-resize-handle:hover{background:var(--p);box-shadow:0 0 8px rgba(176,112,48,.3)}
.mushaf-resize-handle.dragging{background:var(--p);box-shadow:0 0 12px rgba(176,112,48,.5)}
@media(min-width:1100px){.mushaf-resize-handle{display:block}}

.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem;gap:1rem;color:var(--ink-3)}
.spinner{width:28px;height:28px;border:2.5px solid var(--line);border-top-color:var(--p);border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* =====================================================================
   LAYOUT MODES — W1 Paper Spread
   ===================================================================== */
.mushaf-page{
  display:grid;background:var(--surface);
  border-radius:0;overflow:visible;
  box-shadow:var(--sh-paper);
  border:none;
  animation:pageIn var(--dur-s) var(--ease);
  position:relative;margin:30px auto;
}
/* Remove old colored top strip — W1 has no accent strip */
.mushaf-page::before{display:none}
.mushaf-page.page-out{animation:pageOut var(--dur) var(--ease)}

.mushaf-kuran-column{grid-row:1;order:1;position:relative}
.mushaf-meals-column{grid-row:2;order:2;position:relative}

/* Side-by-side (W1 spread) */
body[data-layout="side"] .mushaf-page{grid-template-columns:1fr 1fr;align-items:stretch;position:relative}
/* Central binding line between two pages */
body[data-layout="side"] .mushaf-page::after{
  content:'';position:absolute;top:20px;bottom:20px;left:50%;
  width:1px;background:var(--line);transform:translateX(-0.5px);
  pointer-events:none;z-index:1;
}
/* Subtle fold gradient on central binding */
body[data-layout="side"] .mushaf-page .mushaf-kuran-column::after,
body[data-layout="side"] .mushaf-page .mushaf-meals-column::before{
  content:'';position:absolute;top:0;bottom:0;width:14px;
  pointer-events:none;z-index:0;
}
body[data-layout="side"] .mushaf-page .mushaf-kuran-column::after{right:-7px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.035),transparent)}
body[data-layout="side"] .mushaf-page .mushaf-meals-column::before{left:-7px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.035),transparent)}

body[data-layout="side"] .mushaf-kuran-column{grid-column:1;grid-row:1;will-change:transform;transition:transform .05s linear}
body[data-layout="side"] .mushaf-meals-column{grid-column:2;grid-row:1;background:var(--surface)}

body[data-layout="stack-kuran"] .mushaf-page,
body[data-layout="stack-meal"] .mushaf-page{grid-template-columns:1fr}
body[data-layout="stack-kuran"] .mushaf-kuran-column,
body[data-layout="stack-meal"] .mushaf-kuran-column{border-bottom:1px solid var(--line-light)}

body[data-layout="kuran-only"] .mushaf-meals-column{display:none}
body[data-layout="kuran-only"] .mushaf-page{grid-template-columns:1fr}
body[data-layout="meal-only"] .mushaf-kuran-column{display:none}
body[data-layout="meal-only"] .mushaf-page{grid-template-columns:1fr}

body[data-layout="interlinear"] .mushaf-page{display:block}
body[data-layout="interlinear"] .mushaf-meals-column,
body[data-layout="interlinear"] .mushaf-kuran-column{display:none}
body[data-layout="interlinear"] .interlinear-container{display:block}

/* =====================================================================
   PAGE DISPLAY — W1 Mushaf Typography
   ===================================================================== */
.mushaf-meals-column{padding:40px 56px 60px 54px}
.mushaf-kuran-column{padding:40px 54px 60px 56px;direction:rtl}

/* Page header — W1 small monospace labels at the top of each page */
.page-header{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:0 0 10px 0;margin-bottom:22px;
  border:0;
  direction:ltr;
}
.page-number,.sure-info{
  font-family:var(--font-mono);font-size:.68rem;font-weight:500;
  color:var(--ink-muted);letter-spacing:.14em;text-transform:uppercase;
  background:transparent;padding:0;border-radius:0;box-shadow:none;
}
.sure-info{text-transform:uppercase}
.mushaf-kuran-column .page-header{direction:ltr}

/* Decorative surah title block (inserted by JS when surah starts at top of page) */
.mushaf-surah-title{text-align:center;margin:2px 0 26px;direction:ltr;animation:pageIn .4s var(--ease)}
.mushaf-surah-title-ar{font-family:'iar-kuran-hat',serif;font-size:44px;font-weight:700;color:var(--ink);line-height:1;letter-spacing:.01em}
.mushaf-surah-title-tr{font-family:var(--font-display);font-size:26px;font-weight:600;color:var(--ink);letter-spacing:-.3px}
.mushaf-surah-title-rule{width:120px;height:1px;background:var(--p);margin:14px auto 0;opacity:.6}
.mushaf-surah-title-meta{font-family:var(--font-mono);font-size:.62rem;color:var(--ink-muted);letter-spacing:.22em;text-transform:uppercase;margin-top:10px}

/* Besmele */
.mushaf-basmala{text-align:center;margin:0 0 28px;direction:rtl}
.mushaf-basmala-ar{font-family:'iar-kuran-hat',serif;font-size:24px;color:var(--p-dark);line-height:1.6;font-weight:400}
.mushaf-basmala-tr{font-family:var(--font-display);font-size:15px;font-style:italic;color:var(--ink-muted);display:block;margin-top:10px;direction:ltr;text-align:center}

/* Arabic reading — Turk hatti (iar-kuran-hat / Sheikh Hamdullah)
   ZORUNLU: mark/mkmk/rlig/calt/liga/kern shaping ozellikleri
   YASAK: text-align:justify (harekeleri yamultur), bidi-override (baglantilari kirar) */
.kuran-text{
  font-family:'iar-kuran-hat',serif;
  font-size:28px;line-height:2.6;
  text-align:right;direction:rtl;unicode-bidi:isolate;
  color:var(--ink);font-weight:400;
  word-spacing:2px;letter-spacing:normal;
  font-feature-settings:"calt" 1,"liga" 1,"rlig" 1,"kern" 1,"mark" 1,"mkmk" 1;
  -webkit-font-feature-settings:"calt" 1,"liga" 1,"rlig" 1,"kern" 1,"mark" 1,"mkmk" 1;
  font-variant-ligatures:normal;
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;
  margin:0;
}
.ayah-text{cursor:pointer;padding:2px 3px;border-radius:var(--r-s);transition:background .15s var(--ease)}
.ayah-text:hover{background:rgba(184,115,51,.1)}
.ayah-text.playing{background:rgba(184,115,51,.14);box-shadow:inset 0 -2px 0 var(--p)}
.ayah-text.highlighted{background:rgba(197,165,78,.14)}

/* W1 circular ayet numbers on Arabic side — copper outline */
.kuran-text .ayet-number{
  display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;
  font-family:var(--font-ui);font-size:11px;font-weight:500;
  color:var(--p-dark);background:transparent;
  border:1px solid var(--p);border-radius:50%;
  margin:0 6px;vertical-align:middle;cursor:pointer;
  direction:ltr;transition:all .15s var(--ease);opacity:1;text-shadow:none;
}
.kuran-text .ayet-number:hover{background:var(--p-soft);transform:scale(1.08)}

/* iar — Türk-Osmanlı ayet sonu arması ﴿N﴾ — daire stilini ezer */
.kuran-text .ayet-number.iar-ayet-no,
.kuran-text .iar-ayet-no{
  display:inline-block;
  width:auto;height:auto;
  font-family:'iar-kuran-hat',serif;
  font-size:.78em;font-weight:400;
  color:var(--p);
  background:transparent;
  border:none;border-radius:0;
  padding:0;margin:0 2px;
  vertical-align:middle;cursor:pointer;
  direction:rtl;text-shadow:none;
  line-height:1;
  transition:color .15s var(--ease);
}
.kuran-text .ayet-number.iar-ayet-no:hover,
.kuran-text .iar-ayet-no:hover{
  background:transparent;
  color:var(--p-dark);
  transform:none;
}

/* Interlinear */
.interlinear-arabic{font-family:'iar-kuran-hat',serif;font-size:28px;line-height:2.6;direction:rtl;text-align:right;color:var(--ink);cursor:pointer;padding:6px 8px;border-radius:var(--r-s);transition:background .15s var(--ease);font-weight:400;letter-spacing:normal;word-spacing:2px;unicode-bidi:isolate;font-feature-settings:"calt" 1,"liga" 1,"rlig" 1,"kern" 1,"mark" 1,"mkmk" 1;-webkit-font-feature-settings:"calt" 1,"liga" 1,"rlig" 1,"kern" 1,"mark" 1,"mkmk" 1;font-variant-ligatures:normal;text-rendering:optimizeLegibility}
.interlinear-arabic:hover{background:var(--p-soft)}
.interlinear-arabic.playing{background:rgba(184,115,51,.14);box-shadow:inset 3px 0 0 var(--p)}
.interlinear-ayet-no{width:26px;height:26px;background:transparent;color:var(--p-dark);border:1px solid var(--p);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-ui);font-size:.7rem;font-weight:500;flex-shrink:0;box-shadow:none}

/* Meal — W1 Playfair serif */
.meal-text{font-family:var(--font-display);font-size:16px;line-height:1.75;color:var(--ink-3);letter-spacing:0;text-align:justify}
.meal-text-content{flex:1}

/* =====================================================================
   INTERLINEAR (sadece meal)
   ===================================================================== */
.interlinear-container{display:none;padding:28px 36px}
.interlinear-block{margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--line-light)}
.interlinear-block:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.interlinear-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.interlinear-ayet-no{width:26px;height:26px;background:var(--gradient-gold);color:#fff;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:700;flex-shrink:0;box-shadow:0 2px 8px rgba(197,165,78,.25)}
.interlinear-meal{font-size:.9375rem;color:var(--ink-2);padding-top:8px;line-height:1.9}

/* =====================================================================
   MEAL INTERACTION — W1 inline-flow with superscript numbers
   ===================================================================== */
/* Meal — her ayet kendi paragrafında, numara inline başta */
.meal-text{display:block}
.meal-text .ayet-number{
  font-family:var(--font-ui);font-size:.72rem;font-weight:700;
  color:var(--p);line-height:1;
  margin-right:8px;opacity:1;cursor:pointer;
  background:var(--p-soft);padding:3px 8px;border-radius:var(--r-pill);
  text-shadow:none;
  display:inline-block;width:auto;min-width:24px;height:auto;
  border:0;text-align:center;vertical-align:baseline;
  position:relative;top:-1px;
}
.meal-text .ayet-number:hover{color:var(--p-dark);background:var(--p-ghost)}
.meal-ayah{
  display:block;
  margin:0 0 12px 0;padding:0;border:0;border-radius:0;
  transition:background .15s var(--ease);
}
.meal-ayah:last-child{margin-bottom:0}
.meal-ayah .meal-text-content{display:inline}
.meal-ayah.icon-hover{background:rgba(184,115,51,.06);border-radius:6px;padding:4px 8px;margin-left:-8px;margin-right:-8px}
.meal-ayah.highlighted{background:var(--p-ghost);border-radius:6px;padding:8px 10px;margin-left:-10px;margin-right:-10px;animation:mealHighlight .4s var(--ease)}
.meal-ayah .meal-text-content{display:inline;color:inherit}
.meal-ayah .cross-link-icon.meal-open-icon{display:inline-flex;margin-left:4px;opacity:.5;width:14px;height:14px;background:transparent;color:var(--p);border-radius:2px;font-size:.5rem;box-shadow:none}
.meal-ayah .cross-link-icon.meal-open-icon:hover{opacity:1;transform:none;color:var(--p-dark)}

/* =====================================================================
   MEAL SURAH TRANSITIONS
   ===================================================================== */
.meal-surah-transition{text-align:center;margin:28px 0 18px;padding:18px 0;border-top:1px solid var(--line)}
.meal-surah-transition .surah-transition-divider{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:8px}
.meal-surah-transition .surah-transition-tr{font-size:.9rem;color:var(--ink);font-weight:600;font-family:var(--font-display);background:var(--surface);padding:4px 20px;border-radius:var(--r-pill)}
.meal-surah-transition .surah-transition-bismillah{margin-top:10px}
.meal-surah-transition .surah-transition-bismillah .basmala-tr{font-size:.85rem;color:var(--ink-2);font-style:italic}

/* =====================================================================
   CROSS-LINK BANNERS — W1 minimal chips above the spread
   ===================================================================== */
.cross-link-banners-container{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 auto 8px;animation:fadeInDown .3s var(--ease);max-width:1180px}
.cross-link-banner{background:transparent;border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 14px;transition:all .2s var(--ease);box-shadow:none;justify-self:center}
body[data-layout="stack-kuran"] .cross-link-banners-container,body[data-layout="kuran-only"] .cross-link-banners-container,body[data-layout="meal-only"] .cross-link-banners-container,body[data-layout="interlinear"] .cross-link-banners-container{grid-template-columns:auto auto;justify-content:center}
.cross-link-banner:hover{border-color:var(--p);background:var(--p-soft);transform:translateY(-1px)}
.cross-link-banner-link{display:flex;align-items:center;gap:6px;color:var(--ink-muted);font-weight:500;font-size:.68rem;text-decoration:none;transition:color .15s;letter-spacing:.02em;font-family:var(--font-ui)}
.cross-link-banner:hover .cross-link-banner-link{color:var(--p-dark)}
.cross-link-banner-link i:first-child{font-size:.75rem;color:var(--p)}
.cross-link-banner-link i:last-child{font-size:.55rem;transition:transform .15s;opacity:.6}
.cross-link-banner-link:hover i:last-child{transform:translateX(3px);opacity:1}
.cross-link-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;background:transparent;color:var(--p);border:1px solid var(--line);border-radius:var(--r-s);font-size:.55rem;transition:all .15s var(--ease);text-decoration:none;flex-shrink:0}
.cross-link-icon:hover{background:var(--p-soft);border-color:var(--p);color:var(--p-dark)}
.meal-open-icon{margin-left:4px}

/* =====================================================================
   AUDIO PANEL — W1 Minimal Bottom Bar (light surface)
   ===================================================================== */
/* Floating audio button */
.floating-audio-btn{position:fixed;bottom:90px;right:16px;width:46px;height:46px;background:var(--ink);border-radius:var(--r-pill);border:none;box-shadow:0 6px 20px rgba(15,10,7,.22);z-index:94;display:flex;align-items:center;justify-content:center;color:var(--surface);font-size:.95rem;cursor:pointer;transition:all var(--dur) var(--ease-spring);opacity:0;transform:scale(.8);pointer-events:none;will-change:transform,opacity}
.floating-audio-btn:hover{transform:scale(1.08);background:var(--p-dark)}
.floating-audio-btn:active{transform:scale(.95)}
.floating-audio-btn.visible{opacity:1;transform:scale(1);pointer-events:auto}
.floating-audio-btn.playing{animation:audioPulse 2.5s ease-in-out infinite}
@keyframes audioPulse{0%,100%{box-shadow:0 6px 20px rgba(15,10,7,.22)}50%{box-shadow:0 8px 28px rgba(184,115,51,.35),0 0 0 8px rgba(184,115,51,.08)}}

/* Audio panel — Yüzen, ortalanmış, modern card */
.audio-panel{
  position:fixed;
  bottom:24px;left:50%;
  width:min(560px,calc(100vw - 32px));
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  z-index:95;
  box-shadow:0 12px 40px rgba(15,10,7,.18),0 4px 12px rgba(15,10,7,.08);
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;
  transform:translate(-50%,calc(100% + 40px));
  opacity:0;pointer-events:none;
  transition:transform var(--dur-s) var(--ease),opacity var(--dur) var(--ease);
  will-change:transform,opacity;
}
.audio-panel.active{
  transform:translate(-50%,0);
  opacity:1;pointer-events:auto;
}

/* Header — Sure adı + ayet bilgisi */
.audio-panel-header{display:flex;align-items:center;gap:10px;padding:0;background:none;border:none;flex-shrink:1;min-width:0;flex:0 1 200px}
.ap-album-art{display:none}
.apc-minimize{display:none}
.ap-info{flex:1;min-width:0;overflow:hidden}
.ap-surah{font-size:.85rem;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--font-display);line-height:1.2}
.ap-ayah{font-size:.65rem;color:var(--ink-muted);margin-top:2px;font-family:var(--font-mono);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Kontrol butonları */
.ap-controls{display:flex;align-items:center;gap:6px;padding:0;flex-shrink:0}
.apc-btn{
  width:34px;height:34px;border:none;background:transparent;color:var(--ink-muted);
  border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:.78rem;transition:all .15s var(--ease)
}
.apc-btn:hover{background:var(--p-soft);color:var(--p-dark);transform:scale(1.08)}
.apc-btn:active{transform:scale(.94)}
.apc-btn.active{background:var(--p);color:#fff}
.apc-play{
  width:40px;height:40px;background:var(--p);color:#fff;
  border:0;border-radius:50%;font-size:.85rem;
  box-shadow:0 4px 12px rgba(184,115,51,.32)
}
.apc-play:hover{background:var(--p-dark);transform:scale(1.08);box-shadow:0 6px 16px rgba(184,115,51,.4)}
.apc-play:active{transform:scale(.94)}

/* Rewind ve loop slim modda gizli */
.audio-panel #apRewind,.audio-panel #apLoop{display:none}

/* Kapat butonu — kırmızı vurgulu */
.apc-close{
  width:30px;height:30px;background:transparent;border-radius:50%;
  border:none;color:var(--ink-muted);cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:.7rem;
  transition:all .15s;flex-shrink:0;margin-left:4px;
  position:relative;z-index:2;
}
.apc-close:hover{background:#fee2e2;color:#dc2626;transform:scale(1.1)}
.apc-close:active{transform:scale(.92)}

/* Progress bar — ince çubuk, hover'da büyür */
.ap-progress{flex:1;height:3px;background:var(--line-light);margin:0;border-radius:var(--r-pill);overflow:visible;cursor:pointer;transition:height .15s;min-width:80px;position:relative;align-self:center}
.ap-progress:hover{height:5px}
.ap-progress-fill{height:100%;background:var(--p);width:0%;transition:width .1s;border-radius:var(--r-pill);position:relative}
.ap-progress-fill::after{content:'';position:absolute;right:-5px;top:50%;transform:translateY(-50%);width:10px;height:10px;background:var(--p);border-radius:50%;border:2px solid var(--surface);box-shadow:0 1px 4px rgba(15,10,7,.2);opacity:0;transition:opacity .15s}
.ap-progress:hover .ap-progress-fill::after{opacity:1}
.ap-time{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:.65rem;color:var(--ink-muted);letter-spacing:.04em;flex-shrink:0}

/* Speed ayarı gizli */
.ap-right,.ap-speed,.ap-speed-btn{display:none}

/* Mobil uyum — daha kompakt */
@media(max-width:640px){
  .audio-panel{
    bottom:max(12px,env(safe-area-inset-bottom));
    width:calc(100vw - 20px);
    padding:8px 10px;
    gap:8px;
  }
  .audio-panel-header{flex:0 1 130px}
  .ap-surah{font-size:.78rem}
  .ap-ayah{font-size:.6rem}
  .ap-time{display:none}
  .apc-btn{width:30px;height:30px}
  .apc-play{width:36px;height:36px}
  .ap-progress{min-width:50px}
}

/* Bottom-nav varsa biraz yukarı */
body.mv-has-bnav .audio-panel{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
@media(min-width:769px){
  body.mv-has-bnav .audio-panel{bottom:24px}
}

/* =====================================================================
   SIDEBAR OVERLAY
   ===================================================================== */
.sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:199;opacity:0;pointer-events:none;transition:opacity .35s var(--ease)}
.sidebar-overlay.active{opacity:1;pointer-events:auto}

/* =====================================================================
   RIGHT SIDEBAR — W1 paper drawer
   ===================================================================== */
.right-sidebar{
  position:fixed;top:0;right:0;bottom:0;
  width:var(--sidebar-w);
  background:var(--surface);
  border-left:1px solid var(--line);
  box-shadow:-8px 0 32px rgba(15,10,7,.06);
  z-index:200;
  display:flex;flex-direction:column;
  transform:translateX(100%);
  opacity:1;pointer-events:none;
  transition:transform .35s var(--ease);
  overflow:hidden;border-radius:0;
}
.right-sidebar.active{
  pointer-events:auto;
  transform:translateX(0);
}

.rs-handle-bar{display:none}
.rs-handle{width:36px;height:4px;background:var(--ink-muted);border-radius:var(--r-pill);opacity:.25}
.rs-close-btn{position:absolute;top:14px;right:14px;z-index:5;width:32px;height:32px;border:1px solid var(--line);background:var(--surface);border-radius:50%;color:var(--ink-3);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.8rem;transition:all .15s}
.rs-close-btn:hover{background:#fee2e2;color:#dc2626;border-color:#fecaca}

/* Tabs — W1 underline style with serif label */
.rs-tabs{display:flex;gap:0;background:transparent;padding:0 18px;flex-shrink:0;border-bottom:1px solid var(--line)}
.rs-tab{flex:1;padding:16px 8px;border:none;background:transparent;border-bottom:2px solid transparent;border-radius:0;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;font-size:.74rem;font-weight:500;color:var(--ink-muted);transition:all .15s var(--ease);margin-bottom:-1px;letter-spacing:.01em;font-family:var(--font-ui)}
.rs-tab i{font-size:.85rem;color:var(--ink-muted);transition:color .15s}
.rs-tab:hover{color:var(--p-dark);background:var(--p-ghost)}
.rs-tab:hover i{color:var(--p)}
.rs-tab.active{color:var(--ink);border-bottom-color:var(--p);font-weight:600;background:transparent;box-shadow:none}
.rs-tab.active i{color:var(--p)}

.rs-content{flex:1;overflow-y:auto;overflow-x:hidden;padding:16px;scrollbar-width:thin;scrollbar-color:var(--p) transparent}
.rs-content::-webkit-scrollbar{width:3px}
.rs-content::-webkit-scrollbar-track{background:transparent}
.rs-content::-webkit-scrollbar-thumb{background:var(--p);border-radius:var(--r-pill)}

.rs-tab-content{display:none;padding:4px}
.rs-tab-content.active{display:block!important;min-height:150px}

.rs-section{padding:14px 2px;border-bottom:1px solid var(--line-light)}
.rs-section:last-child{border-bottom:none}
.rs-title{display:flex;align-items:center;gap:6px;font-size:.62rem;font-weight:500;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.16em;margin-bottom:10px;font-family:var(--font-mono)}
.rs-title i{color:var(--p);font-size:.78rem}

/* Theme buttons */
.rs-theme-btns{display:flex;gap:6px}
.rs-theme-btn{flex:1;padding:10px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-m);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s var(--ease)}
.rs-theme-btn i{font-size:.95rem;color:var(--ink-3);transition:color .15s}
.rs-theme-btn:hover{border-color:var(--p);transform:translateY(-2px);box-shadow:var(--sh-1)}
.rs-theme-btn:hover i{color:var(--p)}
.rs-theme-btn.active{border-color:var(--p);background:var(--p-soft);box-shadow:0 2px 8px rgba(176,112,48,.12)}
.rs-theme-btn.active i{color:var(--p)}

/* Layout grid */
.rs-layout-grid,.rs-layout-grid-5{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.rs-layout-btn{padding:8px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-m);cursor:pointer;transition:all .15s var(--ease);font-size:.7rem;font-weight:500;color:var(--ink);text-align:center;white-space:nowrap}
.rs-layout-btn:hover{border-color:var(--p);background:var(--p-ghost)}
.rs-layout-btn.active{border-color:var(--p);background:var(--p-soft);color:var(--p);font-weight:700}

/* Reciter list */
.rs-reciter-list{display:flex;flex-direction:column;gap:14px}
.rs-reciter-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-m);cursor:pointer;transition:all .15s var(--ease);text-align:left;width:100%}
.rs-reciter-btn:hover{border-color:var(--p);background:var(--p-ghost);transform:translateY(-1px);box-shadow:var(--sh-1)}
.rs-reciter-btn.active{border-color:var(--p);background:var(--p-soft);box-shadow:0 2px 8px rgba(176,112,48,.12)}
.rs-reciter-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rs-reciter-name{font-size:.78rem;font-weight:700;color:var(--ink);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs-reciter-btn.active .rs-reciter-name{color:var(--p)}
.rs-reciter-kiraat{font-size:.7rem;color:var(--ink-3);font-family:serif;direction:rtl;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.7}
.rs-reciter-btn.active .rs-reciter-kiraat{color:var(--p);opacity:.8}
.rs-reciter-check{width:18px;height:18px;border-radius:50%;background:transparent;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s var(--ease);opacity:0;transform:scale(.7)}
.rs-reciter-check i{font-size:.55rem;color:#fff}
.rs-reciter-btn.active .rs-reciter-check{background:var(--p);opacity:1;transform:scale(1)}

/* Kıraat group header */
.rs-kiraat-group{display:flex;flex-direction:column;gap:6px}
.rs-kiraat-header{display:flex;align-items:center;gap:8px;padding:4px 2px 6px;border-bottom:1px dashed rgba(176,112,48,.25);margin-bottom:4px}
.rs-kiraat-header i{color:var(--p);font-size:.7rem;flex-shrink:0}
.rs-kiraat-label{font-size:.68rem;font-weight:800;color:var(--p);text-transform:uppercase;letter-spacing:.04em;line-height:1}
.rs-kiraat-label-ar{flex:1;font-family:serif;font-size:.78rem;color:var(--ink-3);direction:rtl;text-align:right;opacity:.8;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs-kiraat-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;background:var(--p-soft);color:var(--p);font-size:.6rem;font-weight:800;border-radius:var(--r-pill);flex-shrink:0}
.rs-kiraat-members{display:flex;flex-direction:column;gap:6px}

/* Font slider */
.rs-font-slider{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.rs-slider-label{font-size:.6rem;color:var(--ink-3);white-space:nowrap;font-weight:600;text-transform:uppercase}
.rs-font-slider input[type="range"]{flex:1;-webkit-appearance:none;height:4px;background:linear-gradient(90deg,rgba(176,112,48,.08),rgba(176,112,48,.2));border-radius:var(--r-pill);outline:none}
.rs-font-slider input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;background:var(--gradient-copper);border-radius:50%;cursor:pointer;box-shadow:0 2px 10px rgba(176,112,48,.35);border:2.5px solid #fff}
.rs-font-preview{display:flex;align-items:center;justify-content:space-between;background:var(--surface-dim);padding:10px 14px;border-radius:var(--r-m);border:1px solid var(--line-light)}
.rs-font-val{font-size:.75rem;font-weight:700;color:var(--p)}
.rs-font-text{font-family:serif;font-size:1rem;color:var(--ink);direction:rtl}

/* Line buttons */
.rs-line-btns{display:flex;gap:6px}
.rs-line-btn{flex:1;padding:8px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-m);cursor:pointer;font-size:.7rem;font-weight:600;color:var(--ink);transition:all .15s var(--ease);text-align:center}
.rs-line-btn span{position:relative;z-index:1}
.rs-line-btn:hover{border-color:var(--p);color:var(--p)}
.rs-line-btn.active{border-color:var(--p);background:var(--p-soft);color:var(--p);font-weight:700}

/* Mushaf width */
.rs-mushaf-width-info{text-align:center;padding:6px}
.rs-mushaf-width-val{font-size:.95rem;font-weight:700;color:var(--p);display:block;margin-bottom:4px}
.rs-mushaf-width-hint{font-size:.6rem;color:var(--ink-3);line-height:1.4;padding:6px 8px;background:var(--surface-dim);border-radius:var(--r-s);border:1px solid var(--line-light)}

/* Progress */
.rs-progress-bar-container{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.rs-progress-bar-container .rs-progress-bar{flex:1}
.rs-progress-bar{height:6px;background:var(--line);border-radius:3px;overflow:hidden}
.rs-progress-fill{height:100%;background:var(--gradient-copper);transition:width var(--dur);width:0}
.rs-progress-text{font-size:.75rem;font-weight:700;color:var(--p);min-width:2rem;text-align:right}
.rs-stats{display:flex;gap:20px;justify-content:center;margin-bottom:12px}
.rs-stat{display:flex;flex-direction:column;align-items:center;gap:2px}
.rs-stat strong{font-size:1.2rem;font-weight:700;color:var(--p)}
.rs-stat span{font-size:.6rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}

.rs-reset-btn{display:flex;align-items:center;justify-content:center;gap:4px;width:100%;padding:8px;border:1px solid var(--line);border-radius:var(--r-m);background:transparent;color:var(--ink-2);font-size:.7rem;cursor:pointer;transition:all .15s}
.rs-reset-btn:hover{background:var(--p-soft);color:var(--p);border-color:var(--p)}
.rs-reset-btn i{transition:transform var(--dur)}
.rs-reset-btn:hover i{transform:rotate(180deg)}

.rs-help-btn{display:flex;align-items:center;justify-content:center;gap:4px;width:100%;padding:8px;border:1px dashed var(--line);border-radius:var(--r-m);background:transparent;color:var(--ink-3);font-size:.7rem;cursor:pointer;transition:all .15s}
.rs-help-btn:hover{background:var(--p-ghost);color:var(--p);border-color:var(--p)}

/* Shortcuts — single column */
.rs-shortcuts{display:grid;grid-template-columns:1fr;gap:4px}
.rs-shortcut-item{display:flex;align-items:center;gap:5px;padding:5px 8px;background:var(--surface-dim);border-radius:var(--r-s);font-size:.6rem;border:1px solid transparent;transition:border-color .15s}
.rs-shortcut-item:hover{border-color:var(--line)}
.rs-shortcut-item kbd{background:var(--gradient-copper);color:#fff;padding:1px 5px;border-radius:3px;font-family:monospace;font-size:.5rem;font-weight:700;min-width:18px;text-align:center}
.rs-shortcut-item span{color:var(--ink-3);font-weight:500}

/* Search */
.rs-search{margin-bottom:8px;position:sticky;top:0;z-index:2;background:var(--surface);padding:4px 0}
.rs-search input{width:100%;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface-dim);font-size:.8rem;color:var(--ink);outline:none;transition:all .15s}
.rs-search input:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(176,112,48,.08)}
.rs-search input::placeholder{color:var(--ink-muted)}

/* Surah list */
.rs-surah-list{display:block;max-height:calc(100vh - 180px);overflow-y:auto;overflow-x:hidden}
.rs-surah-list::-webkit-scrollbar{display:none}
.rs-surah-item{padding:10px 12px;border-radius:var(--r-m);cursor:pointer;display:flex!important;align-items:center;gap:10px;font-size:.8rem;transition:all .15s var(--ease);margin-bottom:2px;border:1px solid transparent}
.rs-surah-item:hover{background:var(--p-ghost);border-color:rgba(176,112,48,.06)}
.rs-surah-item.active{background:var(--p-soft);color:var(--p);font-weight:700;border-color:var(--p)}
.rs-surah-number{width:30px;height:30px;background:transparent;color:var(--p-dark);border:1px solid var(--p);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:600;flex-shrink:0;font-family:var(--font-mono)}
.rs-surah-item.active .rs-surah-number{background:var(--p);color:var(--surface)}
.rs-surah-info{flex:1;min-width:0}
.rs-surah-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs-surah-name-ar{font-family:serif;font-size:.85rem;direction:rtl;color:var(--ink-3)}

/* Bookmarks */
.rs-bookmark-list{display:block;max-height:calc(100vh - 180px);overflow-y:auto;overflow-x:hidden}
.rs-bookmark-list::-webkit-scrollbar{display:none}
.rs-bookmark-item{padding:12px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);transition:all .15s var(--ease);margin-bottom:6px}
.rs-bookmark-item:hover{border-color:var(--p);transform:translateY(-1px);box-shadow:var(--sh-1)}
.rs-bookmark-sure{font-size:.65rem;font-weight:700;color:var(--p);margin-bottom:4px}
.rs-bookmark-ayah{font-family:serif;font-size:.85rem;text-align:right;direction:rtl;color:var(--ink);margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.5}
.rs-bookmark-note{
  font-size:.72rem;color:var(--ink-2);line-height:1.5;
  background:var(--p-ghost);border-left:3px solid var(--p);
  padding:6px 8px;border-radius:0 var(--r-s) var(--r-s) 0;
  margin:6px 0;display:flex;gap:6px;align-items:flex-start
}
.rs-bookmark-note i{color:var(--p);font-size:.7rem;margin-top:2px;flex-shrink:0}
.rs-bookmark-actions{display:flex;gap:4px}
.rs-bookmark-actions button{flex:1;padding:6px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-s);font-size:.6rem;font-weight:600;color:var(--ink);cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:3px}
.rs-bookmark-actions button:hover{border-color:var(--p);color:var(--p);background:var(--p-ghost)}

.rs-empty-state{text-align:center;padding:32px 16px;color:var(--ink-3);font-size:.8rem}
.rs-empty-state i{font-size:1.5rem;opacity:.2;display:block;margin-bottom:8px;color:var(--p)}

/* =====================================================================
   MISC UI
   ===================================================================== */
/* Landscape */
.landscape-warning{position:fixed;inset:0;background:var(--surface);z-index:99999;display:none;align-items:center;justify-content:center;padding:2rem;text-align:center}
@media(max-width:768px) and (orientation:landscape){.landscape-warning{display:flex}}
.lw-content{max-width:280px}
.lw-icon{font-size:2.5rem;color:var(--p);margin-bottom:12px}
.lw-title{font-size:1.1rem;font-weight:700;margin-bottom:6px}
.lw-text{font-size:.8rem;color:var(--ink-3);line-height:1.6}

/* Tour */
.tour-overlay{position:fixed;inset:0;z-index:9999;display:none}
.tour-overlay.active{display:block}
.tour-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.75)}
.tour-spotlight{position:absolute;border:3px solid var(--gold);border-radius:var(--r-s);box-shadow:0 0 0 9999px rgba(0,0,0,.75),0 0 20px rgba(197,165,78,.4);transition:all var(--dur-s) var(--ease);pointer-events:none;z-index:1}
.tour-card{position:fixed;left:50%;bottom:20px;transform:translateX(-50%) translateY(120%);background:var(--surface);border-radius:var(--r-xl);padding:20px;max-width:360px;width:calc(100vw - 2rem);box-shadow:var(--sh-4);z-index:2;transition:transform var(--dur-s) var(--ease)}
.tour-overlay.active .tour-card{transform:translateX(-50%) translateY(0)}
.tour-header{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.tour-icon{width:40px;height:40px;background:var(--gradient-gold);border-radius:var(--r-m);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1rem;flex-shrink:0}
.tour-header-text{flex:1}
.tour-step-label{font-size:.6rem;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:.05em}
.tour-title{font-size:1rem;font-weight:700;color:var(--ink)}
.tour-text{font-size:.8rem;line-height:1.7;color:var(--ink-3);margin-bottom:16px}
.tour-progress{display:flex;gap:4px;justify-content:center;margin-bottom:12px}
.tour-dot{width:6px;height:6px;border-radius:var(--r-pill);background:var(--line);transition:all .15s}
.tour-dot.active{width:18px;background:var(--gradient-gold)}
.tour-actions{display:flex;gap:10px}
.ta-btn{flex:1;padding:10px 12px;border:none;border-radius:var(--r-m);font-size:.8rem;font-weight:600;cursor:pointer;transition:all .15s var(--ease)}
.ta-skip{background:var(--surface-dim);color:var(--ink-3)}
.ta-skip:hover{background:var(--surface-deep)}
.ta-next{background:var(--gradient-gold);color:#fff;box-shadow:0 4px 12px rgba(197,165,78,.3)}
.ta-next:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(197,165,78,.4)}

/* Toast */
.toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%) translateY(16px);background:var(--ink);color:var(--surface);padding:10px 20px;border-radius:var(--r-pill);font-size:.8rem;font-weight:500;opacity:0;transition:all var(--dur) var(--ease);z-index:310;box-shadow:var(--sh-3);max-width:90vw;pointer-events:none}
.toast.active{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}

/* Bookmark marker */
.bookmark-marker{position:absolute;right:-4px;top:50%;transform:translateY(-50%);width:6px;height:6px;background:var(--gold);border-radius:50%;box-shadow:0 0 6px var(--gold)}

/* Note panel */
.note-panel{position:fixed;inset:0;z-index:250;display:none}
.note-panel.active{display:block}
.np-overlay{position:absolute;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(4px)}
.np-body{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90%;max-width:460px;background:var(--surface);border-radius:var(--r-xl);padding:20px;box-shadow:var(--sh-4);border:1px solid var(--line);animation:noteIn var(--dur) var(--ease)}
@keyframes noteIn{from{opacity:0;transform:translate(-50%,-45%)}to{opacity:1;transform:translate(-50%,-50%)}}
.np-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.np-header h3{font-size:1rem;font-weight:700}
.np-close{width:28px;height:28px;border:none;background:transparent;color:var(--ink-3);cursor:pointer;border-radius:var(--r-s);display:flex;align-items:center;justify-content:center}
.np-close:hover{background:var(--surface-dim)}
.np-ayah{font-family:serif;font-size:1rem;text-align:right;direction:rtl;padding:12px;background:var(--surface-dim);border-radius:var(--r-m);margin-bottom:12px;line-height:1.7;border:1px solid var(--line-light)}
.np-textarea{width:100%;min-height:90px;padding:10px;border:1.5px solid var(--line);border-radius:var(--r-m);background:var(--surface-dim);color:var(--ink);font-family:inherit;font-size:.8rem;resize:vertical;transition:border-color .15s}
.np-textarea:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 3px rgba(176,112,48,.08)}
.np-actions{display:flex;gap:8px;margin-top:12px}
.np-actions button{flex:1;padding:10px;border:none;border-radius:var(--r-m);font-size:.8rem;font-weight:600;cursor:pointer;transition:all .15s}
.np-cancel{background:var(--surface-dim);color:var(--ink)}
.np-cancel:hover{background:var(--surface-deep)}
.np-save{background:var(--p);color:#fff}
.np-save:hover{background:var(--p-dark)}

/* Ayah action menu — Solid surface */
.ayah-action-menu{position:fixed;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:8px;box-shadow:var(--sh-3);z-index:200;opacity:0;transform:scale(.92) translateY(-4px);pointer-events:none;transition:all .15s var(--ease);min-width:180px}
.ayah-action-menu.active{opacity:1;transform:scale(1) translateY(0);pointer-events:auto}
.aam-header{padding:6px 10px;font-size:.6rem;font-weight:700;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--line-light);margin-bottom:4px}
.aam-option{padding:8px 12px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:all .15s;font-size:.8rem;border-radius:var(--r-s);color:var(--ink-2)}
.aam-option:hover{background:var(--p-soft);color:var(--ink)}
.aam-option i{width:16px;text-align:center;color:var(--ink-muted);transition:color .15s}
.aam-option:hover i{color:var(--p)}

/* =====================================================================
   CONTROL BAR — W1 Mobile bottom dock
   ===================================================================== */
.control-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:90;
  background:var(--surface);
  border-top:1px solid var(--line);
  box-shadow:0 -2px 16px rgba(15,10,7,.05);
}
@media(min-width:769px){.control-bar{display:none}}
.cb-inner{
  max-width:var(--content-max);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 16px;
  padding-bottom:calc(6px + env(safe-area-inset-bottom,0px));
  gap:12px;
}
.cb-nav{display:flex;align-items:center;gap:4px}
.cb-btn{
  width:36px;height:36px;border:none;background:transparent;color:var(--ink-3);
  border-radius:var(--r-s);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  font-size:.8rem;transition:all .15s var(--ease);-webkit-tap-highlight-color:transparent;
  text-decoration:none;flex-shrink:0;
}
.cb-btn:hover{color:var(--p);background:var(--p-ghost)}
.cb-btn:active{transform:scale(.92)}
.cb-btn-labeled{width:auto;gap:5px;padding:6px 10px;font-size:.7rem;font-weight:600}
.cb-btn-labeled span{font-size:.6rem;color:var(--ink-3);transition:color .15s}
.cb-btn-labeled:hover span{color:var(--p)}
.cb-page-info{
  display:flex;align-items:center;gap:2px;
  font-size:.75rem;font-weight:700;color:var(--ink);
  background:var(--surface-dim);padding:4px 10px;border-radius:var(--r-pill);
  border:1px solid var(--line-light);cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:border-color .15s;
}
.cb-page-info:active{border-color:var(--p)}
.cb-page-input{
  width:36px;height:24px;border:none;background:transparent;
  text-align:center;font-size:.75rem;font-weight:700;color:var(--ink);
  outline:none;-moz-appearance:textfield;font-family:var(--font-ui);
}
.cb-page-input::-webkit-outer-spin-button,.cb-page-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cb-page-sep{color:var(--ink-muted);margin:0 1px}
.cb-page-total{color:var(--ink-muted);font-weight:500}
.cb-surah-info{
  display:flex;align-items:center;gap:8px;
  min-width:0;flex:1;justify-content:center;
}
.cb-surah-name{
  font-family:var(--font-display);font-size:.85rem;font-weight:600;
  color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.2px;
}
.cb-cuz{
  font-size:.6rem;color:var(--ink-3);font-weight:500;
  background:var(--surface-dim);padding:2px 8px;border-radius:var(--r-pill);
  white-space:nowrap;
}
.cb-actions{display:flex;align-items:center;gap:4px}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
/* Large desktop */
@media(min-width:1100px){
  .mushaf-main{max-width:var(--mushaf-width,1400px)}
  .right-sidebar{width:400px}
}
@media(min-width:1600px){
  .mushaf-main{max-width:max(var(--mushaf-width,1400px),1600px)}
}

/* Tablet */
@media(max-width:1024px){
  body[data-layout="side"] .mushaf-page{grid-template-columns:1fr;gap:0}
  body[data-layout="side"] .mushaf-page::after{display:none}
  body[data-layout="side"] .mushaf-kuran-column{grid-column:1;grid-row:1;border-bottom:none;transform:none!important;padding-bottom:28px}
  body[data-layout="side"] .mushaf-meals-column{
    grid-column:1;grid-row:2;border-left:none;
    border-top:1px solid var(--line);
    background:var(--surface-dim);
    padding-top:28px;
    position:relative
  }
  /* Stacked layout'ta meal bölümüne görsel ayraç */
  body[data-layout="side"] .mushaf-meals-column::before{
    content:'';position:absolute;top:-1px;left:50%;transform:translateX(-50%);
    width:42px;height:3px;background:var(--p);border-radius:0 0 var(--r-pill) var(--r-pill);
    opacity:.5
  }
}

/* Mobile */
@media(max-width:768px){
  .mushaf-header{position:sticky;top:0;padding:0;height:52px}
  .mushaf-header.header-hidden{transform:translateY(-120%);opacity:0}
  .mh-bar{justify-content:space-between;gap:2px;padding:0 8px}
  .mh-left{gap:6px;flex:1}
  .mh-right{gap:2px}
  .mh-brand{display:none}
  .mh-divider{display:none}
  .mh-locator-sep{display:none}
  .mh-meta{display:none}
  .mh-surah{font-size:.95rem;font-weight:600}
  .mh-page-badge{font-size:.65rem;font-family:var(--font-mono);color:var(--ink-muted);display:block;margin-top:1px}
  .mh-locator{flex-direction:column;align-items:flex-start;gap:0;line-height:1.1}
  .mh-page-jump{display:none}
  /* Mobilde labeled butonlar ikon-only — Düzen, Tema, İmler, Ayarlar görünsün */
  .mh-btn-labeled{display:inline-flex;width:34px;height:34px;padding:0;border:0;background:transparent}
  .mh-btn-labeled span{display:none}
  .mh-btn-labeled:hover{background:var(--p-soft)}
  /* Yer kazanmak için fullscreen mobilde gizli */
  #btnFullscreen{display:none}
  /* heroBookmarks görünsün — istek üzerine düzen + tüm aksiyonlar mobilde de aktif */
  #heroBookmarks{display:inline-flex}
  .mh-btn{width:34px;height:34px;font-size:.85rem}
  /* prev/next mobile butonları küçült */
  #prevPage,#nextPage{width:30px;height:30px;font-size:.75rem}

  .mushaf-main{padding:8px;padding-bottom:78px}
  .floating-audio-btn{display:none}

  /* M1 style mobile control bar — koyu ink zemin, ortada altın play */
  .control-bar{background:var(--ink);border-top:0;box-shadow:0 -4px 16px rgba(0,0,0,.18)}
  .cb-inner{padding:8px 10px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));gap:8px;align-items:center;justify-content:space-between}
  .cb-surah-info{display:flex;flex-direction:column;align-items:flex-start;gap:0;flex:1;min-width:0;justify-content:flex-start;padding-left:8px}
  .cb-surah-name{font-family:var(--font-display);font-size:.78rem;font-weight:500;color:#F5ECD7;letter-spacing:0;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
  .cb-cuz{font-family:var(--font-mono);font-size:.55rem;color:rgba(245,236,215,.55);background:transparent;padding:0;letter-spacing:.14em;text-transform:uppercase;line-height:1.2;margin-top:2px}
  .cb-nav{gap:2px}
  .cb-btn{width:34px;height:34px;color:rgba(245,236,215,.7);border:1px solid rgba(255,255,255,.08);border-radius:50%;background:transparent}
  .cb-btn:hover,.cb-btn:active{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.18)}
  .cb-btn-labeled{flex-direction:column;width:38px;height:38px;min-width:38px;padding:0;border:0;border-radius:var(--r-s);gap:0;background:transparent}
  .cb-btn-labeled i{font-size:.85rem;color:rgba(245,236,215,.7)}
  .cb-btn-labeled span{display:none}
  .cb-btn-labeled:hover{background:rgba(255,255,255,.06)}
  .cb-btn-labeled:hover i{color:#fff}
  /* Page info chip */
  .cb-page-info{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#F5ECD7;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.04em;padding:5px 12px}
  .cb-page-input{color:#F5ECD7}
  .cb-page-sep,.cb-page-total{color:rgba(245,236,215,.5)}
  /* Big circular gold play button — özel id #cbAudio */
  #cbAudio{width:46px;height:46px;border-radius:50%;background:var(--gold);border:0;color:var(--ink);box-shadow:0 4px 14px rgba(197,165,78,.3)}
  #cbAudio i{font-size:1rem;color:var(--ink)}
  #cbAudio:hover,#cbAudio:active{background:var(--gold-light);transform:scale(1.04)}
  #cbAudio.playing{background:var(--p);color:#fff}
  #cbAudio.playing i{color:#fff}

  /* Mobil'de audio panel bottom-nav üstünde gözükür (yeni estetik tasarımla) */

  /* Sidebar as bottom sheet on mobile */
  .right-sidebar{
    top:auto;bottom:0;left:0;right:0;
    width:100%;max-width:100%;
    max-height:80vh;max-height:80dvh;
    border-radius:20px 20px 0 0;
    transform:translate(0,100%);
    border-left:none;border-top:none;
    box-shadow:0 -8px 40px rgba(28,20,16,.15);
  }
  .right-sidebar.active{transform:translate(0,0)}
  .rs-handle-bar{display:flex;justify-content:center;padding:12px 0 6px;cursor:grab}
  .rs-handle{width:40px;height:5px;background:var(--ink-muted);border-radius:var(--r-pill);opacity:.2}
  .rs-tabs{padding:0 12px;gap:0;border-bottom:2px solid var(--line-light)}
  .rs-tab{padding:12px 8px;font-size:.72rem}
  .rs-content{padding:12px}
  .rs-surah-list{max-height:calc(80dvh - 140px);overflow-y:auto}
  .rs-bookmark-list{max-height:calc(80dvh - 140px);overflow-y:auto}
  .rs-surah-item{padding:12px;border-radius:var(--r-m);margin-bottom:1px}
  .rs-surah-number{width:32px;height:32px;font-size:.7rem;border-radius:var(--r-m)}
  .rs-close-btn{top:10px;right:10px;width:28px;height:28px;font-size:.7rem}

  .interlinear-container{padding:16px}
  /* Mobil meal — daha rahat okuma için biraz büyütülmüş */
  .meal-text{font-size:1rem;line-height:1.95;color:var(--ink-2)}
  .meal-ayah{margin-bottom:16px}
  .meal-text .ayet-number{font-size:.78rem;padding:3px 10px;min-width:28px}
  /* Mobil meal page-header — daha belirgin */
  .mushaf-meals-column .page-header{margin-bottom:18px;padding-bottom:12px}
  .mushaf-meals-column .page-number{font-size:.7rem;letter-spacing:.18em;color:var(--p)}
  .mushaf-page{border-radius:var(--r-l);animation-duration:.2s;overflow:visible}
  .mushaf-kuran-column,.mushaf-meals-column{padding:20px 16px}
  .mh-btn{width:32px;height:32px}
  .note-panel .np-body{width:95%;max-height:85vh}
  .ayah-action-menu{min-width:170px}
  .cross-link-banners-container{gap:6px;margin-bottom:12px}
  .cross-link-banner{padding:6px 14px;border-radius:var(--r-pill)}
  .cross-link-banner-link{font-size:.72rem;gap:6px;font-weight:600}
  .cross-link-banner-link i:first-child{font-size:.8rem}
  .rs-font-slider input[type="range"]{height:44px}
  /* Mobilde Arapça line-height biraz daraltılmış — daha az dikey alan */
  body .kuran-text,.mushaf-page .kuran-text{line-height:2.3 !important}
  /* Sayfa geçiş tap-feedback */
  .mushaf-page{transition:opacity .15s var(--ease)}
  .mushaf-page.page-out{opacity:0.4}
}

@media(max-width:480px){
  .mushaf-header{padding:0 8px;height:40px}
  .mushaf-main{padding:4px;padding-bottom:56px}
  .cb-inner{padding:2px 4px;gap:1px}
  .cb-btn{width:30px;height:30px;font-size:.7rem}
  .cb-btn-labeled{min-width:38px;padding:3px 4px}
  .cb-btn-labeled i{font-size:.7rem}
  .cb-btn-labeled span{font-size:.45rem}
  .mushaf-page{border-radius:var(--r-m);border:none}
  .mushaf-kuran-column,.mushaf-meals-column{padding:12px}
}

@media(max-height:500px) and (orientation:landscape){
  .mushaf-header{height:36px!important;padding:0 8px}
  .mh-btn{width:28px;height:28px;font-size:.65rem}
  .mh-surah{font-size:.7rem}
  .mh-page-badge{font-size:.6rem;padding:1px 6px}
  .mh-page-jump{gap:2px}
  .mh-page-input{width:28px;height:20px;font-size:.65rem}
  .mushaf-main{padding:4px 8px 8px}
  .mushaf-page{border-radius:var(--r-m)}
  .mushaf-kuran-column,.mushaf-meals-column{padding:10px 14px}
  .control-bar{display:none!important}
  .cross-link-banners-container{display:none}
}

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer{position:relative;margin-top:32px;overflow:hidden}
.footer-wave{position:absolute;top:-1px;left:0;right:0;color:var(--ink);line-height:0}
body.theme-dark .footer-wave{color:#0D0A07}
body.theme-sepia .footer-wave{color:#3d3830}
.footer-wave svg{width:100%;height:44px}
.footer-main{background:linear-gradient(145deg,#1a1208,#2a1f14);padding:48px 16px 32px}
body.theme-dark .footer-main{background:linear-gradient(145deg,#0a0806,#12100d)}
body.theme-sepia .footer-main{background:linear-gradient(145deg,#2a1f14,#3a2a1c)}
.footer-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr .8fr;gap:32px;align-items:start}
.footer-col-title{font-size:.9rem;font-weight:700;color:var(--gold);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.footer-col-title i{font-size:1rem}
.footer-col-title-mt{margin-top:24px}
.footer-sure-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.footer-sure-grid a{display:block;padding:6px 10px;color:#D4C4B5;text-decoration:none;border-radius:var(--r-s);transition:all .15s var(--ease);font-size:.7rem;font-weight:500;border:1px solid transparent}
.footer-sure-grid a:hover{color:#fff;background:rgba(176,112,48,.1);border-color:rgba(176,112,48,.15)}
.footer-about-text{font-size:.8rem;color:#9B8B7F;line-height:1.7;margin-bottom:12px}
.footer-features{display:flex;flex-wrap:wrap;gap:6px}
.footer-features span{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;background:rgba(176,112,48,.08);color:#D4956A;border-radius:var(--r-s);font-size:.6rem;font-weight:600;border:1px solid rgba(176,112,48,.12);transition:all .15s}
.footer-features span i{font-size:.55rem}
.footer-features span:hover{background:rgba(176,112,48,.14);transform:translateY(-1px)}
.footer-nav{display:flex;flex-direction:column;gap:4px}
.footer-nav a{display:flex;align-items:center;gap:8px;padding:7px 10px;color:#D4C4B5;text-decoration:none;border-radius:var(--r-s);transition:all .15s;font-size:.8rem;font-weight:500}
.footer-nav a i{width:16px;text-align:center;color:var(--gold);font-size:.75rem}
.footer-nav a:hover{color:#fff;background:rgba(176,112,48,.06);transform:translateX(3px)}
.footer-social{display:flex;gap:6px;flex-wrap:wrap}
.footer-social-btn{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-s);color:#9B8B7F;text-decoration:none;font-size:.9rem;transition:all var(--dur) var(--ease-spring);border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.03)}
.footer-social-btn:hover{color:#fff;transform:translateY(-2px) scale(1.04);box-shadow:0 4px 12px rgba(0,0,0,.25)}
.footer-social-btn[title="Facebook"]:hover{background:#1877f2;border-color:#1877f2}
.footer-social-btn[title="Twitter"]:hover{background:#1da1f2;border-color:#1da1f2}
.footer-social-btn[title="Instagram"]:hover{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}
.footer-social-btn[title="YouTube"]:hover{background:#ff0000;border-color:#ff0000}
.footer-social-btn[title="WhatsApp"]:hover{background:#25d366;border-color:#25d366}
.footer-bottom{background:linear-gradient(135deg,#0E0B08,#1C1410);padding:12px;border-top:1px solid rgba(255,255,255,.05)}
body.theme-dark .footer-bottom{background:linear-gradient(135deg,#060504,#0D0A07)}
body.theme-sepia .footer-bottom{background:linear-gradient(135deg,#2a2520,#3d3830)}
.footer-bottom-inner{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;font-size:.75rem}
.footer-copyright{color:#6B5B4F;font-size:.65rem;margin:0}
.footer-copyright strong{color:#9B8B7F;font-weight:700}
.footer-tagline{color:var(--gold);font-size:.6rem;margin:0;font-style:italic;opacity:.7}
@media(max-width:1024px){.footer-grid{grid-template-columns:1fr 1fr;gap:24px}}
@media(max-width:768px){.footer-grid{grid-template-columns:1fr;gap:24px}.footer-main{padding:32px 16px 16px}.footer-bottom-inner{flex-direction:column;text-align:center}.footer-social{justify-content:center}.site-footer{margin-top:24px}}
@media(max-width:480px){.footer-sure-grid{grid-template-columns:repeat(2,1fr)}.footer-features span{font-size:.55rem;padding:4px 7px}}

/* =====================================================================
   ANIMATIONS
   ===================================================================== */
@keyframes pageIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes pageOut{from{opacity:1}to{opacity:0;transform:translateY(-6px)}}
@keyframes highlightPulse{0%,100%{box-shadow:inset 3px 0 0 var(--gold),0 0 10px rgba(197,165,78,.06)}50%{box-shadow:inset 3px 0 0 var(--gold),0 0 18px rgba(197,165,78,.12)}}
@keyframes mealHighlight{from{background:transparent;transform:translateX(-4px)}to{background:var(--p-ghost);transform:translateX(0)}}
@keyframes bookmarkPulse{0%,100%{background:rgba(212,175,55,.3)}50%{background:rgba(212,175,55,.5)}}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

.mh-btn:active,.apc-btn:active,.cb-btn:active{transform:scale(.93)}

.skeleton{background:linear-gradient(90deg,var(--line-light) 0%,var(--surface) 40%,var(--surface) 60%,var(--line-light) 100%);background-size:300% 100%;animation:skeleton 1.8s ease-in-out infinite;border-radius:var(--r-s)}
@keyframes skeleton{0%{background-position:300% 0}100%{background-position:-300% 0}}
.skeleton-text{height:1em;margin-bottom:.5em}

/* Accessibility */
.mh-btn:focus-visible,.rs-tab:focus-visible,.rs-theme-btn:focus-visible,.rs-layout-btn:focus-visible,.rs-line-btn:focus-visible,.apc-btn:focus-visible,.ta-btn:focus-visible,.apc-close:focus-visible,.cb-btn:focus-visible{outline:3px solid var(--p);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.mushaf-page{animation:none}}

/* =====================================================================
   LEGACY COMPAT
   ===================================================================== */
.sure-list-panel{position:fixed;top:0;left:0;width:320px;height:100%;background:var(--surface);border-right:1px solid var(--line);z-index:500;transform:translateX(-100%);transition:transform var(--dur) var(--ease);display:flex;flex-direction:column}
.sure-list-panel.active{transform:translateX(0)!important}
.bookmark-panel{position:fixed;top:0;right:0;width:340px;height:100%;background:var(--surface);box-shadow:-8px 0 28px rgba(0,0,0,.1);z-index:500;transform:translateX(100%);transition:transform var(--dur) var(--ease);display:flex;flex-direction:column}
.bookmark-panel.active{transform:translateX(0)!important}
.settings-panel{position:fixed;inset:0;z-index:200;display:none}
.settings-panel.active{display:block}
.popup-menu{position:fixed;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:12px;box-shadow:var(--sh-4);z-index:110;opacity:0;transform:translateY(-6px) scale(.97);pointer-events:none;transition:all var(--dur) var(--ease)}
.popup-menu.active{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}

/* Eski .sure-row-item / #klAllSurahsGrid kuralları kaldırıldı (yeni .ko-all-card tasarımı kullanılıyor) */

.search-highlight{background:linear-gradient(135deg,rgba(176,112,48,.12),rgba(212,149,106,.1));border-radius:3px;padding:.05em .15em;color:var(--p);font-weight:700}
body.theme-dark .search-highlight{background:linear-gradient(135deg,rgba(176,112,48,.2),rgba(212,149,106,.15));color:var(--p-light)}
.rs-no-results{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 16px;text-align:center;min-height:100px}


.sure-dropdown{position:fixed;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);padding:8px;box-shadow:var(--sh-3);z-index:120;opacity:0;transform:translateY(-8px);pointer-events:none;transition:all var(--dur) var(--ease);max-height:400px;overflow-y:auto}
.sure-dropdown.active{opacity:1;transform:translateY(0);pointer-events:auto}

.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:var(--surface);border-top:1px solid var(--line);display:flex;justify-content:center;align-items:center;gap:12px;padding:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:90;box-shadow:0 -2px 8px rgba(0,0,0,.04)}

@media print{.mushaf-header,.right-sidebar,.bottom-nav,.audio-panel,.floating-audio-btn,.settings-panel,.tour-overlay,.note-panel,.ayah-action-menu,.control-bar,.sidebar-overlay{display:none!important}.mushaf-main{grid-template-columns:1fr;max-width:100%;padding:0}.mushaf-page{box-shadow:none;border:none;border-radius:0}}

/* ───────────────────────────────────────────
   Mushaf Görseli Modu (kuran-modulu entegrasyonu)
   Arapça sütununu gerçek mushaf sayfa görseli ile gösterir.
   ─────────────────────────────────────────── */
.mushaf-page-img-wrap{
    width:100%;
    background:var(--paper,#fdfaf3);
    border-radius:6px;
    overflow:hidden;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding:8px;
    box-sizing:border-box;
}
.mushaf-page-img{
    display:block;
    max-width:100%;
    width:100%;
    height:auto;
    user-select:none;
    -webkit-user-drag:none;
    transition:opacity .3s var(--ease);
    border-radius:4px;
}
body.theme-dark .mushaf-page-img-wrap{background:#1a1612}
body.theme-dark .mushaf-page-img{filter:invert(.92) hue-rotate(180deg) brightness(.95)}
body.theme-sepia .mushaf-page-img-wrap{background:#f4ecd6}

/* Mushaf görseli modunda sadece-kuran layout'unda tam genişlik */
body[data-layout="kuran-only"][data-arsrc="image"] .mushaf-kuran-column{max-width:900px;margin:0 auto}
body[data-arsrc="image"] .mushaf-kuran-column .page-header{display:none}

/* Arapça kaynağı toggle butonları (ayar paneli) */
.rs-arsrc-btn{
    display:flex;align-items:center;justify-content:center;gap:6px;
    padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-s,8px);
    background:var(--surface);color:var(--ink-muted);
    font-family:inherit;font-size:.78rem;font-weight:500;
    cursor:pointer;transition:all .2s var(--ease);
}
.rs-arsrc-btn i{font-size:.8em}
.rs-arsrc-btn:hover{border-color:var(--p);color:var(--p)}
.rs-arsrc-btn.active{background:var(--p);border-color:var(--p);color:#fff}

@media(max-width:768px){
    .mushaf-page-img-wrap{padding:4px}
}

/* =====================================================================
   COMPACT HEADER — popover + inline toggle controls (sidebar replacement)
   ===================================================================== */

/* Pill button (sure secici) */
.mh-btn-pill{
  width:auto;height:30px;padding:0 12px 0 10px;gap:7px;
  border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--surface);color:var(--ink);font-family:var(--font-ui);
  font-size:.78rem;font-weight:500;cursor:pointer;
  display:inline-flex;align-items:center;transition:all .15s var(--ease);
}
.mh-btn-pill:hover{border-color:var(--p);background:var(--p-soft);color:var(--p-dark)}
.mh-btn-pill .mh-pop-caret{font-size:.55rem;color:var(--ink-muted);transition:transform .2s,color .15s}
.mh-pop-wrap.open .mh-btn-pill{border-color:var(--p);background:var(--p-soft);color:var(--p-dark)}
.mh-pop-wrap.open .mh-btn-pill .mh-pop-caret{transform:rotate(180deg);color:var(--p)}
.mh-pop-wrap.open > .mh-btn{background:var(--p-soft);color:var(--p-dark)}
.mh-pop-wrap.open > .mh-btn::after{
  content:"";position:absolute;left:50%;bottom:-8px;width:8px;height:8px;
  background:var(--surface);border-left:1px solid var(--line);border-top:1px solid var(--line);
  transform:translateX(-50%) rotate(45deg);z-index:201;
}
.mh-btn-pill .mh-surah{font-family:var(--font-display);font-size:.92rem;font-weight:600;color:inherit;letter-spacing:-.2px}

/* Page slider (visual scrubber) */
.mh-page-slider{
  display:flex;align-items:center;gap:8px;
  margin-left:6px;padding:0 10px;height:30px;
  background:var(--p-ghost,rgba(184,115,51,.04));
  border:1px solid var(--line);border-radius:var(--r-pill);
  flex:1;min-width:140px;max-width:340px;
  transition:border-color .15s,box-shadow .15s;
}
.mh-page-slider:focus-within{border-color:var(--p);box-shadow:0 0 0 3px var(--p-soft)}
.mh-page-slider input[type="range"]{
  -webkit-appearance:none;appearance:none;
  flex:1;height:4px;background:linear-gradient(to right,var(--p) 0%,var(--p) var(--qj-pct,0%),var(--line) var(--qj-pct,0%),var(--line) 100%);
  border-radius:var(--r-pill);outline:none;cursor:pointer;
}
.mh-page-slider input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;
  background:var(--p);border:2px solid var(--surface);cursor:grab;box-shadow:0 1px 4px rgba(0,0,0,.2);
  transition:transform .12s;
}
.mh-page-slider input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.15)}
.mh-page-slider input[type="range"]::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.25)}
.mh-page-slider input[type="range"]::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;background:var(--p);border:2px solid var(--surface);
  cursor:grab;box-shadow:0 1px 4px rgba(0,0,0,.2);
}
.mh-page-slider-val{
  font-family:var(--font-mono);font-size:.7rem;font-weight:600;color:var(--p-dark);
  min-width:28px;text-align:center;
}

/* Page jump input — kompakt */
.mh-page-jump{
  display:flex;align-items:center;gap:4px;
  padding:1px 8px 1px 8px;height:28px;
  background:transparent;border:1px solid var(--line);border-radius:var(--r-pill);
  transition:border-color .15s,box-shadow .15s;
}
.mh-page-jump:focus-within{border-color:var(--p);box-shadow:0 0 0 3px var(--p-soft)}
.mh-pj-icon{font-size:.65rem;color:var(--ink-muted)}

/* Inline toggle group (theme/source) */
.mh-tog-grp{
  display:inline-flex;align-items:center;gap:0;
  background:var(--p-ghost,rgba(184,115,51,.04));
  border:1px solid var(--line);border-radius:var(--r-pill);
  padding:2px;height:30px;
}
.mh-tog-btn{
  width:26px;height:24px;padding:0;border:none;background:transparent;
  border-radius:calc(var(--r-pill) - 2px);
  color:var(--ink-muted);cursor:pointer;font-size:.72rem;
  display:inline-flex;align-items:center;justify-content:center;
  transition:all .15s var(--ease);
}
.mh-tog-btn:hover{color:var(--p-dark);background:var(--p-soft)}
.mh-tog-btn.active{background:var(--surface);color:var(--p-dark);box-shadow:0 1px 3px rgba(0,0,0,.08)}

/* Yazılı toggle (Dijital/Mushaf) — ikon + metin */
.mh-tog-grp-text{height:32px;padding:3px}
.mh-tog-grp-text .mh-tog-btn{
  width:auto;height:26px;padding:0 12px;gap:6px;font-family:'Inter',sans-serif;
  font-size:.72rem;font-weight:600;letter-spacing:.04em;
}
.mh-tog-grp-text .mh-tog-btn .mh-tog-label{font-size:.74rem}
.mh-tog-grp-text .mh-tog-btn i{font-size:.72rem}
@media(max-width:680px){
  .mh-tog-grp-text .mh-tog-label{display:none}
  .mh-tog-grp-text .mh-tog-btn{width:30px;padding:0}
}

/* Popover wrapper + panel */
.mh-pop-wrap{position:relative;display:inline-flex}
.mh-pop{
  position:absolute;top:calc(100% + 10px);left:0;z-index:200;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md,12px);
  box-shadow:0 12px 40px -12px rgba(0,0,0,.28),0 4px 12px -4px rgba(0,0,0,.1);
  padding:14px;min-width:240px;
  display:none;
  opacity:0;transform:translateY(-6px) scale(.98);
  pointer-events:none;
  transition:opacity .15s var(--ease),transform .15s var(--ease);
}
.mh-pop-right{left:auto;right:0}
.mh-pop-sm{min-width:200px}
.mh-pop-md{min-width:280px;max-width:340px}
.mh-pop-wrap.open .mh-pop{
  display:block !important;
  opacity:1 !important;
  transform:translateY(0) scale(1) !important;
  pointer-events:auto !important;
}

/* Popover content */
.mh-pop-title{
  font-family:var(--font-display);font-size:.78rem;font-weight:600;
  color:var(--ink);margin-bottom:10px;letter-spacing:-.1px;
  display:flex;align-items:center;gap:6px;
}
.mh-pop-title i{font-size:.8em;color:var(--p)}
.mh-pop-title-2{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-light)}

.mh-pop-search{
  position:relative;margin-bottom:10px;
}
.mh-pop-search i{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:.7rem;color:var(--ink-muted)}
.mh-pop-search input{
  width:100%;padding:8px 12px 8px 30px;border:1px solid var(--line);border-radius:var(--r-s,8px);
  font-family:var(--font-ui);font-size:.78rem;background:var(--surface);color:var(--ink);
  outline:none;transition:border-color .15s;
}
.mh-pop-search input:focus{border-color:var(--p);box-shadow:0 0 0 3px var(--p-soft)}

.mh-pop-list{
  max-height:340px;overflow-y:auto;
  display:flex;flex-direction:column;gap:2px;
  scrollbar-width:thin;scrollbar-color:var(--p) transparent;
}
.mh-pop-list::-webkit-scrollbar{width:4px}
.mh-pop-list::-webkit-scrollbar-thumb{background:var(--p);border-radius:var(--r-pill)}

.mh-pop-opt{
  width:100%;text-align:left;padding:8px 12px;
  border:1px solid var(--line-light);background:transparent;
  border-radius:var(--r-s,8px);color:var(--ink);font-family:var(--font-ui);
  font-size:.78rem;font-weight:500;cursor:pointer;
  display:flex;align-items:center;justify-content:flex-start;gap:8px;
  transition:all .12s var(--ease);
}
.mh-pop-opt:hover{border-color:var(--p);background:var(--p-soft);color:var(--p-dark)}
.mh-pop-opt.active{border-color:var(--p);background:var(--p);color:#fff}
.mh-pop-row{display:flex;gap:8px}
.mh-pop-row .mh-pop-opt{justify-content:center}

/* Slider row inside popover */
.mh-pop-slider-row{
  display:flex;align-items:center;gap:8px;
  padding:6px 0 4px;
}
.mh-pop-slider-row input[type="range"]{flex:1}
.mh-pop-slider-min{font-family:var(--font-display);font-size:.7rem;color:var(--ink-muted);font-weight:600}
.mh-pop-slider-max{font-family:var(--font-display);font-size:1rem;color:var(--ink);font-weight:600}
.mh-pop-val{
  font-family:var(--font-mono);font-size:.7rem;color:var(--p-dark);font-weight:600;
  text-align:center;margin-bottom:4px;
}

/* Progress (Hatim) */
.mh-pop-progress{
  display:flex;align-items:center;gap:10px;margin:6px 0 10px;
}
.mh-pop-bar{
  flex:1;height:6px;background:var(--line);border-radius:var(--r-pill);overflow:hidden;
}
.mh-pop-bar-fill{
  height:100%;width:0;background:linear-gradient(90deg,var(--p),var(--gold,#C5A54E));
  transition:width .5s var(--ease);
}
.mh-pop-bar-text{font-family:var(--font-mono);font-size:.72rem;color:var(--p-dark);font-weight:600;min-width:34px;text-align:right}

.mh-pop-stats{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px;
}
.mh-pop-stats > div{
  text-align:center;padding:8px;border:1px solid var(--line-light);border-radius:var(--r-s,8px);
  display:flex;flex-direction:column;gap:2px;
}
.mh-pop-stats strong{font-family:var(--font-display);font-size:1.05rem;color:var(--ink);font-weight:700}
.mh-pop-stats span{font-size:.65rem;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.04em}

.mh-pop-action{
  width:100%;padding:8px 12px;border:1px solid var(--line);background:transparent;
  border-radius:var(--r-s,8px);color:var(--ink);font-family:var(--font-ui);
  font-size:.74rem;font-weight:500;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  transition:all .15s var(--ease);
}
.mh-pop-action:hover{background:#fee2e2;color:#dc2626;border-color:#fecaca}
.mh-pop-action i{font-size:.75em}

/* Shortcuts list in More popover */
.mh-pop-shortcuts{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.mh-pop-shortcuts > div{
  display:flex;justify-content:space-between;align-items:center;
  font-size:.72rem;color:var(--ink-muted);
}
.mh-pop-shortcuts kbd{
  display:inline-block;padding:2px 6px;font-family:var(--font-mono);font-size:.65rem;
  background:var(--surface);border:1px solid var(--line);border-bottom-width:2px;
  border-radius:4px;color:var(--ink);min-width:20px;text-align:center;
}

/* Inline rs-* button overrides for compact popover use */
.mh-pop .rs-reciter-list,.mh-pop .rs-bookmark-list,.mh-pop .rs-surah-list{
  max-height:340px;overflow-y:auto;
}
.mh-pop .rs-section,.mh-pop .rs-title,.mh-pop .rs-tabs,.mh-pop .rs-tab{display:revert}

/* Esimleme: surah popover'da rs-surah-list icindeki satirlar kompakt olsun */
.mh-pop .rs-surah-list{padding:0}

/* Mobile responsiveness */
@media(max-width:1100px){
  .mh-page-slider{display:none}
  .mh-tog-grp[data-grp="theme"]{display:none}
}
@media(max-width:900px){
  .mh-page-jump{display:none}
  .mh-tog-grp[data-grp="arsrc"]{display:none}
  .mh-page-badge{font-size:.66rem}
}
@media(max-width:768px){
  .mh-bar{gap:4px;padding:0 8px}
  .mh-divider:not(:first-of-type){display:none}
  .mh-page-badge{display:none}
  .mh-pop{position:fixed;top:calc(var(--header-h) + 8px);left:8px;right:8px;min-width:0;max-width:none}
  .mh-pop-md,.mh-pop-sm{min-width:0;max-width:none}
  .mh-btn-pill .mh-pop-caret{display:none}
  .mh-btn-pill{padding:0 8px;gap:5px}
  .mh-btn-pill .mh-surah{font-size:.85rem;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #btnFullscreen{display:none}
}

/* Eski yan-panel artiklari gorunmesin (HTML'den silindi ama bazi CSS hala referans aliyor) */
.right-sidebar,.sidebar-overlay,.rs-handle-bar,.rs-close-btn,.rs-tabs{display:none!important}
.rs-content{display:contents}  /* popover ici icin transparan kalsin */

/* ───────────────────────────────────────────
   iar (İslam Arşivi Hat) overrides
   Tezhipli sure başlığı + kaligrafik besmele + Türk-Osmanlı nesih ayet metni
   ─────────────────────────────────────────── */
.mushaf-surah-title-iar{
    text-align:center;
    margin:6px auto 22px;
    direction:ltr;
    max-width:680px;
    animation:pageIn .4s var(--ease);
}
.mushaf-surah-title-iar .iar-sure-cerceve{
    width:100%;
    max-width:680px;
}
.mushaf-surah-title-iar .iar-tezhip-arka{
    width:100%;
    max-width:680px;
    height:auto;
}

/* Kit içindeki .iar-besmele (kaligrafik SVG) — mevcut .mushaf-basmala içine yerleştirilmiş */
.mushaf-basmala .iar-besmele{
    display:block;
    text-align:center;
    margin:0;
}
.mushaf-basmala .iar-besmele img{
    max-width:340px;
    width:100%;
    height:auto;
}

/* Karanlık/sepia tema uyumu */
body.theme-dark .iar-tezhip-arka,
body.theme-dark .iar-besmele img{
    filter:invert(.88) hue-rotate(180deg) brightness(.92);
}
body.theme-sepia .iar-tezhip-arka,
body.theme-sepia .iar-besmele img{
    filter:sepia(.15);
}

/* Ayet sonu numarası — iar-kuran-hat ile uyumlu */
.kuran-text .iar-ayet-no{
    font-family:'iar-kuran-hat',serif;
    color:var(--p);
    font-size:.7em;
    margin:0 4px;
    vertical-align:middle;
}

@media(max-width:768px){
    .mushaf-surah-title-iar{margin:4px auto 16px}
    .mushaf-basmala .iar-besmele img{max-width:260px}
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE FIX 2026 — Kuran Okuma kategorisi
   Tüm kurallar @media içinde — masaüstüne dokunmaz.
   ═══════════════════════════════════════════════════════════════ */

/* === 2.1 — Mushaf görüntüleyici: 2 sayfa → 1 sayfa === */
@media (max-width: 900px) {
  /* Site geneli mushaf-spread / page-spread varyantları */
  .mushaf-spread,
  [class*="mushaf-spread"],
  [class*="page-spread"] {
    display: block !important;
    grid-template-columns: 1fr !important;
  }
  .mushaf-page-left,
  .page-left,
  [class*="page-second"] { display: none !important; }
  .mushaf-page-right,
  .page-right,
  [class*="page-first"],
  .mushaf-page:not(:first-of-type) ~ .mushaf-page { /* yedek */
    width: 100% !important;
    max-width: 100vw !important;
  }
  .mushaf-page img,
  .page img,
  .kv-img { width: 100% !important; height: auto !important; }

  /* Kuran-modulu viewer (kv-): stage tek sütun, görsel taşmasın */
  .kv-stage { max-width: 100% !important; }
  .kv-root { padding: 8px !important; }
}

/* === 2.2 — Mushaf toolbar (sticky, wrap, 44px tap target) === */
@media (max-width: 768px) {
  /* Custom okuma sayfası header'ı (mushaf-header) */
  .mushaf-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--paper, var(--surface, #fffdf8));
    border-bottom: 1px solid var(--rule, var(--line, #e0d5c8));
  }
  .mushaf-header .mh-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    grid-template-columns: none !important;
  }
  .mushaf-header .mh-left,
  .mushaf-header .mh-center,
  .mushaf-header .mh-right {
    flex: 1 1 auto !important;
    min-width: 0;
    flex-wrap: wrap;
    gap: 6px !important;
  }
  .mushaf-header .mh-center { justify-content: center; }
  .mushaf-header .mh-btn,
  .mushaf-header .mh-tog-btn { min-height: 44px; min-width: 44px; }

  /* Mushaf viewer toolbar (kv-toolbar) — generic toolbar fallback */
  .kv-toolbar,
  .mushaf-toolbar,
  [class*="toolbar"]:not(.modal-toolbar):not(.mv-hdr) {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px !important;
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--kv-page-bg, var(--paper, #fffdf8));
    border-bottom: 1px solid var(--kv-border, var(--rule, #e0d5c8));
  }
  .kv-toolbar > *,
  .mushaf-toolbar > * { flex: 1 1 calc(50% - 4px); }
  .kv-toolbar .kv-btn,
  .mushaf-toolbar button,
  .toolbar button { min-height: 44px; }
  .kv-toolbar select,
  .mushaf-toolbar select {
    width: 100%;
    font-size: 16px !important; /* iOS zoom önleme */
    min-height: 44px;
  }
}

/* === 2.3 — Sayfa thumbnail listesi: yatay scroll-snap === */
@media (max-width: 768px) {
  .page-thumbs,
  [class*="thumb-list"] {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 8px 0;
  }
  .page-thumb,
  [class*="thumb-item"] {
    flex: 0 0 80px;
    scroll-snap-align: start;
  }
}

/* === 2.4 — Audio player: bottom sheet (bottom-nav üstünde) === */
@media (max-width: 768px) {
  .audio-player,
  [class*="player"]:not(.video-player):not(.tour-player) {
    position: fixed !important;
    bottom: 70px;
    left: 8px;
    right: 8px;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.12);
    z-index: 100;
  }
  .audio-player .controls,
  [class*="player"] .controls { gap: 8px; }
  .audio-player button,
  [class*="player"] button { min-width: 44px; min-height: 44px; }

  /* audio-panel (oku.html bizim panelimiz) — tap target ve buton boyut güçlendirme */
  .audio-panel .apc-btn { min-width: 44px; min-height: 44px; }
  .audio-panel .ap-speed-btn { min-height: 40px; padding: 8px 10px; }
}

/* === 2.5 — Sayfa atla input: kolon, full-width, 16px font === */
@media (max-width: 768px) {
  .page-jump,
  [class*="jump-to"],
  [class*="goto"] {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .page-jump input,
  [class*="jump"] input,
  .kv-page-input,
  .mh-page-input {
    width: 100% !important;
    max-width: 100%;
    font-size: 16px !important;
    min-height: 44px;
    box-sizing: border-box;
  }
  .page-jump button,
  [class*="jump"] button { width: 100%; min-height: 44px; }

  /* Viewer altındaki sayfa slider'ı (kv-bottom-nav) */
  .kv-bottom-nav { flex-wrap: wrap; gap: 8px; }
  .kv-slider { width: 100%; max-width: none; height: 44px; }

  /* Custom header'ın sayfa-jump satırı — wrap'le rahatlat */
  .mh-page-jump { width: 100%; gap: 6px; }
}

/* === 2.6 — Landing sayfası (ko-hero + features) === */
@media (max-width: 768px) {
  .landing-hero,
  [class*="ko-hero"] { padding: 40px 16px !important; }
  .landing-hero h1,
  .hero-title { font-size: clamp(1.6rem, 6vw, 2.2rem) !important; }
  .landing-features,
  [class*="features-grid"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* === Otonom iyileştirme: yatay scroll guard + landing-hero progress card === */
@media (max-width: 768px) {
  .mushaf-main,
  .mushaf-content { overflow-x: hidden; }
  /* landing.html progress-card mobilde tek kolon (>480px ile 768px arası) */
  .landing-hero .progress-section { padding: 0 16px; }
  .progress-card { flex-wrap: wrap; }
  /* landing.html quick-cards 2 sütun (orta mobil) */
  .quick-cards { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
  .quick-cards { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════════
   KK SURE ACCORDION + SEARCH + FILTER (mobile-first)
   Desktop stays untouched (uses existing .ko-all-grid rules in index.html).
   ═══════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   KK READING ACCORDION — "Nasıl Okumak İstersiniz?"
   Native <details> + premium ease (cubic-bezier(.16, 1, .3, 1))
   Default state: KAPALI. Hem desktop hem mobile aynı davranış.
   ════════════════════════════════════════════════════════════════════ */

.kk-reading-accordion {
  background: linear-gradient(180deg, #FFFDF8 0%, #F5EFE3 100%);
  border: 1px solid rgba(184, 115, 51, 0.18);
  border-radius: 14px;
  overflow: hidden;
  transition:
    box-shadow .3s cubic-bezier(.16, 1, .3, 1),
    border-color .25s ease;
  margin: 0 auto;
  max-width: 1200px;
}

/* Native <details> kapalı state — sayfa CSS reset'i UA stylesheet'i
   override edebiliyor; manuel olarak garanti et */
.kk-reading-accordion:not([open]) > .kk-reading-body {
  display: none !important;
}
.kk-reading-accordion:hover {
  border-color: rgba(184, 115, 51, 0.32);
  box-shadow: 0 10px 32px -12px rgba(184, 115, 51, 0.18);
}
.kk-reading-accordion[open] {
  border-color: rgba(184, 115, 51, 0.28);
  box-shadow: 0 14px 40px -16px rgba(184, 115, 51, 0.20);
}

/* Summary — tıklanabilir başlık */
.kk-reading-summary {
  list-style: none;
  cursor: pointer;
  padding: 28px 64px 28px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  user-select: none;
  transition: background .2s ease;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.kk-reading-summary::-webkit-details-marker { display: none; }
.kk-reading-summary::marker { content: ''; display: none; }

.kk-reading-summary:hover {
  background: rgba(184, 115, 51, 0.04);
}
.kk-reading-summary:focus-visible {
  outline: 2px solid var(--copper, #B87333);
  outline-offset: -2px;
}

/* Eyebrow (Okuma Yolları) */
.kk-reading-summary-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: .32em;
  color: var(--copper, #B87333);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 4px;
}
.kk-reading-summary-eyebrow i {
  font-size: 11px;
  opacity: .85;
}

/* Başlık */
.kk-reading-summary-title {
  font-family: "Cormorant Garamond", "Iowan Old Style", Garamond, serif;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 500;
  color: var(--text, #2C1810);
  letter-spacing: -.4px;
  line-height: 1.15;
  margin: 0;
  transition: color .2s;
}
.kk-reading-accordion[open] .kk-reading-summary-title,
.kk-reading-summary:hover .kk-reading-summary-title {
  color: var(--copper-dark, #8B5A2B);
}

/* Chevron — dairesel buton */
.kk-reading-summary-chev {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--copper, #B87333);
  transition:
    transform .25s cubic-bezier(.16, 1, .3, 1),
    background .2s,
    color .2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(184, 115, 51, 0.08);
  flex: 0 0 auto;
}
.kk-reading-summary:hover .kk-reading-summary-chev {
  background: rgba(184, 115, 51, 0.14);
  color: var(--copper-dark, #8B5A2B);
}
.kk-reading-accordion[open] .kk-reading-summary-chev {
  transform: translateY(-50%) rotate(180deg);
  background: rgba(184, 115, 51, 0.16);
}

/* Body — açılan içerik */
.kk-reading-body {
  padding: 8px 32px 32px;
  border-top: 1px solid rgba(184, 115, 51, 0.12);
  animation: kk-acc-reveal .35s cubic-bezier(.16, 1, .3, 1);
}
@keyframes kk-acc-reveal {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Body içindeki section-desc */
.kk-reading-body .ko-section-desc {
  text-align: center;
  margin: 16px 0 28px;
}

/* Body içindeki feature grid mevcut .ko-features stilini korur */
.kk-reading-body .ko-features {
  margin-top: 0;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .kk-reading-accordion {
    border-radius: 10px;
    margin: 0 16px;
  }
  .kk-reading-summary {
    padding: 20px 56px 20px 20px;
    align-items: flex-start;
    text-align: left;
  }
  .kk-reading-summary-eyebrow {
    font-size: 9px;
    letter-spacing: .24em;
  }
  .kk-reading-summary-title {
    font-size: clamp(18px, 5vw, 24px);
    letter-spacing: -.2px;
  }
  .kk-reading-summary-chev {
    right: 14px;
    width: 32px;
    height: 32px;
  }
  .kk-reading-summary-chev svg {
    width: 18px;
    height: 18px;
  }
  .kk-reading-body {
    padding: 6px 16px 24px;
  }
  .kk-reading-body .ko-section-desc {
    margin: 12px 0 20px;
    font-size: 14px;
  }
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  .kk-reading-accordion,
  .kk-reading-summary,
  .kk-reading-summary-title,
  .kk-reading-summary-chev,
  .kk-reading-body {
    transition: none !important;
    animation: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   KK CÜZ ACCORDION — #cuzAccordion (30 Cüz)
   Hem desktop hem mobile: accordion (kapalı default, smooth animation).
   Sadece bu section etkilenir, diğer masaüstü tasarımı dokunulmaz.
   ════════════════════════════════════════════════════════════════════ */

/* Native UA: kapalı iken body gizli */
.kk-cuz-accordion:not([open]) > .kk-cuz-body {
  display: none !important;
}
.kk-cuz-accordion[open] > .kk-cuz-body {
  display: block !important;
  animation: kk-acc-reveal .35s cubic-bezier(.16, 1, .3, 1);
}

/* Accordion shell */
.kk-cuz-accordion {
  background: linear-gradient(180deg, #FFFDF8 0%, #F5EFE3 100%);
  border: 1px solid rgba(184, 115, 51, 0.18);
  border-radius: 14px;
  overflow: hidden;
  margin: 0 auto;
  max-width: 1200px;
  transition:
    box-shadow .3s cubic-bezier(.16, 1, .3, 1),
    border-color .25s ease;
}
.kk-cuz-accordion:hover {
  border-color: rgba(184, 115, 51, 0.32);
  box-shadow: 0 10px 32px -12px rgba(184, 115, 51, 0.18);
}
.kk-cuz-accordion[open] {
  border-color: rgba(184, 115, 51, 0.28);
  box-shadow: 0 14px 40px -16px rgba(184, 115, 51, 0.20);
}

/* Summary — tıklanabilir başlık */
.kk-cuz-summary {
  list-style: none;
  cursor: pointer;
  padding: 28px 72px 28px 32px;
  position: relative;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s ease;
  display: block;
}
.kk-cuz-summary::-webkit-details-marker { display: none; }
.kk-cuz-summary::marker { content: ''; display: none; }
.kk-cuz-summary:hover {
  background: rgba(184, 115, 51, 0.04);
}
.kk-cuz-summary:focus-visible {
  outline: 2px solid var(--copper, #B87333);
  outline-offset: -2px;
}

/* Summary içindeki ko-section-label / title / desc — kompakt summary görünüm */
.kk-cuz-summary .ko-section-label {
  margin: 0 0 8px !important;
}
.kk-cuz-summary .ko-section-title {
  margin: 0 !important;
  transition: color .2s;
}
.kk-cuz-accordion[open] .kk-cuz-summary .ko-section-title,
.kk-cuz-summary:hover .ko-section-title {
  color: var(--copper-dark, #8B5A2B);
}
.kk-cuz-summary .ko-section-desc {
  margin: 10px 0 0 !important;
}

/* Chevron — dairesel sağda */
.kk-cuz-chev {
  display: inline-flex;
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(184, 115, 51, 0.08);
  color: var(--copper, #B87333);
  align-items: center;
  justify-content: center;
  transition:
    transform .25s cubic-bezier(.16, 1, .3, 1),
    background .2s,
    color .2s;
}
.kk-cuz-summary:hover .kk-cuz-chev {
  background: rgba(184, 115, 51, 0.14);
  color: var(--copper-dark, #8B5A2B);
}
.kk-cuz-accordion[open] .kk-cuz-chev {
  transform: translateY(-50%) rotate(180deg);
  background: rgba(184, 115, 51, 0.16);
}

/* Body */
.kk-cuz-body {
  padding: 16px 32px 32px;
  border-top: 1px solid rgba(184, 115, 51, 0.12);
}
.kk-cuz-body .ko-cuz-grid {
  margin-top: 0;
}

/* Mobile (≤768px) — kompakt padding + sağ kenar daha yakın */
@media (max-width: 768px) {
  .kk-cuz-accordion {
    border-radius: 10px;
    margin: 0 16px;
  }
  .kk-cuz-summary {
    padding: 18px 56px 18px 18px;
  }
  .kk-cuz-summary .ko-section-label {
    font-size: 9px !important;
    letter-spacing: .24em !important;
    margin: 0 0 6px !important;
  }
  .kk-cuz-summary .ko-section-title {
    font-size: clamp(18px, 5vw, 22px) !important;
    letter-spacing: -.2px !important;
    line-height: 1.2 !important;
  }
  .kk-cuz-summary .ko-section-desc {
    display: none;  /* mobile'da summary'den gizle (body içinde göster) */
  }
  .kk-cuz-chev {
    right: 14px;
    width: 32px;
    height: 32px;
  }
  .kk-cuz-chev svg {
    width: 18px;
    height: 18px;
  }
  .kk-cuz-body {
    padding: 4px 16px 18px;
  }
  /* Mobile'da açıklama summary'den çıktı, body üstüne taşı */
  .kk-cuz-body::before {
    content: 'Her cüz yaklaşık 20 sayfa. Günde 1 cüz okuyarak 30 günde hatim yapabilirsiniz.';
    display: block;
    font-family: var(--serif, 'Cormorant Garamond', serif);
    font-style: italic;
    font-size: 14px;
    color: var(--text-2, #3A2418);
    line-height: 1.5;
    margin: 14px 0 16px;
    text-align: center;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .kk-cuz-accordion,
  .kk-cuz-summary,
  .kk-cuz-chev,
  .kk-cuz-body {
    transition: none !important;
    animation: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   KK ÖZELLİKLER ACCORDION — #ozelliklerAccordion (Neden İslam Arşivi?)
   Desktop: normal section görünür (summary normal başlık, chevron gizli, body her zaman açık).
   Mobile (≤768px): accordion (kapalı default, smooth animation).
   Masaüstü tasarımı ASLA değişmez.
   ════════════════════════════════════════════════════════════════════ */

/* === DESKTOP DEFAULT — section normal görünür === */
.kk-ozellikler-accordion {
  /* Saf section, hiçbir border/gradient yok */
}
.kk-ozellikler-summary {
  list-style: none;
  cursor: default;
  display: block;
  padding: 0;
  position: relative;
}
.kk-ozellikler-summary::-webkit-details-marker { display: none; }
.kk-ozellikler-summary::marker { content: ''; display: none; }
.kk-ozellikler-chev {
  display: none;  /* Desktop'ta chevron gizli */
}
/* Desktop'ta body her zaman görünür */
.kk-ozellikler-accordion > .kk-ozellikler-body {
  display: block;
}

/* === MOBILE (≤768px) — accordion davranışı === */
@media (max-width: 768px) {
  /* Native UA: kapalı iken body gizli */
  .kk-ozellikler-accordion:not([open]) > .kk-ozellikler-body {
    display: none !important;
  }
  .kk-ozellikler-accordion[open] > .kk-ozellikler-body {
    display: block !important;
    animation: kk-acc-reveal .35s cubic-bezier(.16, 1, .3, 1);
  }

  /* Accordion shell */
  .kk-ozellikler-accordion {
    background: linear-gradient(180deg, #FFFDF8 0%, #F5EFE3 100%);
    border: 1px solid rgba(184, 115, 51, 0.18);
    border-radius: 12px;
    overflow: hidden;
    margin: 0 16px;
    transition:
      box-shadow .3s cubic-bezier(.16, 1, .3, 1),
      border-color .25s ease;
  }
  .kk-ozellikler-accordion:hover {
    border-color: rgba(184, 115, 51, 0.32);
  }
  .kk-ozellikler-accordion[open] {
    border-color: rgba(184, 115, 51, 0.28);
    box-shadow: 0 12px 32px -14px rgba(184, 115, 51, 0.20);
  }

  /* Summary tıklanabilir başlık */
  .kk-ozellikler-summary {
    cursor: pointer !important;
    padding: 18px 56px 18px 18px !important;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background .2s ease;
  }
  .kk-ozellikler-summary:hover {
    background: rgba(184, 115, 51, 0.04);
  }
  .kk-ozellikler-summary:focus-visible {
    outline: 2px solid var(--copper, #B87333);
    outline-offset: -2px;
  }

  /* Summary içindeki başlık/açıklamayı kompakt göster */
  .kk-ozellikler-summary .ko-section-label {
    font-size: 9px !important;
    letter-spacing: .24em !important;
    margin: 0 0 6px !important;
  }
  .kk-ozellikler-summary .ko-section-title {
    font-size: clamp(18px, 5vw, 22px) !important;
    margin: 0 !important;
    letter-spacing: -.2px !important;
    line-height: 1.2 !important;
  }
  .kk-ozellikler-summary .ko-section-desc {
    display: none;  /* mobile özet, body içine taşı */
  }
  .kk-ozellikler-accordion[open] .kk-ozellikler-summary .ko-section-title {
    color: var(--copper-dark, #8B5A2B);
  }

  /* Chevron — mobilde sağda dairesel */
  .kk-ozellikler-chev {
    display: inline-flex !important;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(184, 115, 51, 0.10);
    color: var(--copper, #B87333);
    align-items: center;
    justify-content: center;
    transition:
      transform .25s cubic-bezier(.16, 1, .3, 1),
      background .2s;
  }
  .kk-ozellikler-summary:hover .kk-ozellikler-chev {
    background: rgba(184, 115, 51, 0.18);
  }
  .kk-ozellikler-accordion[open] .kk-ozellikler-chev {
    transform: translateY(-50%) rotate(180deg);
    background: rgba(184, 115, 51, 0.18);
  }

  /* Body içindeki açıklama (summary'den taşındı) */
  .kk-ozellikler-body {
    padding: 4px 16px 18px;
    border-top: 1px solid rgba(184, 115, 51, 0.12);
  }
  .kk-ozellikler-body::before {
    content: 'Modern teknoloji ile geleneksel Kuran okuma deneyimini birleştiren özellikler.';
    display: block;
    font-family: var(--serif, 'Cormorant Garamond', serif);
    font-style: italic;
    font-size: 14px;
    color: var(--text-2, #3A2418);
    line-height: 1.5;
    margin: 14px 0 16px;
    text-align: center;
  }
  .kk-ozellikler-body .ko-features-detail {
    margin-top: 0;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .kk-ozellikler-accordion,
  .kk-ozellikler-summary,
  .kk-ozellikler-chev,
  .kk-ozellikler-body {
    transition: none !important;
    animation: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   KK SEO ACCORDION — #seoAccordion (Online Kuran Okuma: ...)
   Desktop: normal SEO içerik görünür (summary normal h2, chev gizli, body açık).
   Mobile (≤768px): accordion (kapalı default, smooth animation).
   Masaüstü tasarımı ASLA değişmez.
   ════════════════════════════════════════════════════════════════════ */

/* === DESKTOP DEFAULT — SEO içerik normal görünüm === */
.kk-seo-accordion {
  /* Saf SEO içerik, hiçbir border/gradient yok */
}
.kk-seo-summary {
  list-style: none;
  cursor: default;
  display: block;
  padding: 0;
  position: relative;
}
.kk-seo-summary::-webkit-details-marker { display: none; }
.kk-seo-summary::marker { content: ''; display: none; }
.kk-seo-summary-title {
  /* Mevcut .ko-seo-text h2 stilini al — ilk h2 olduğu için margin-top 0 */
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--text, #2C1810);
  margin: 0 0 12px;
  line-height: 1.3;
}
.kk-seo-chev {
  display: none;  /* Desktop'ta chevron gizli */
}
.kk-seo-accordion > .kk-seo-body {
  display: block;
}

/* === MOBILE (≤768px) — accordion davranışı === */
@media (max-width: 768px) {
  /* Native UA: kapalı iken body gizli */
  .kk-seo-accordion:not([open]) > .kk-seo-body {
    display: none !important;
  }
  .kk-seo-accordion[open] > .kk-seo-body {
    display: block !important;
    animation: kk-acc-reveal .35s cubic-bezier(.16, 1, .3, 1);
  }

  /* Accordion shell */
  .kk-seo-accordion {
    background: linear-gradient(180deg, #FFFDF8 0%, #F5EFE3 100%);
    border: 1px solid rgba(184, 115, 51, 0.18);
    border-radius: 12px;
    overflow: hidden;
    margin: 0 16px;
    transition:
      box-shadow .3s cubic-bezier(.16, 1, .3, 1),
      border-color .25s ease;
  }
  .kk-seo-accordion:hover {
    border-color: rgba(184, 115, 51, 0.32);
  }
  .kk-seo-accordion[open] {
    border-color: rgba(184, 115, 51, 0.28);
    box-shadow: 0 12px 32px -14px rgba(184, 115, 51, 0.20);
  }

  /* Summary tıklanabilir başlık */
  .kk-seo-summary {
    cursor: pointer !important;
    padding: 18px 56px 18px 18px !important;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background .2s ease;
  }
  .kk-seo-summary:hover {
    background: rgba(184, 115, 51, 0.04);
  }
  .kk-seo-summary:focus-visible {
    outline: 2px solid var(--copper, #B87333);
    outline-offset: -2px;
  }

  /* Summary'deki h2 — kompakt mobile boyut */
  .kk-seo-summary-title {
    font-size: clamp(16px, 4.5vw, 19px) !important;
    margin: 0 !important;
    letter-spacing: -.2px !important;
    line-height: 1.25 !important;
    color: var(--text, #2C1810) !important;
  }
  .kk-seo-accordion[open] .kk-seo-summary-title {
    color: var(--copper-dark, #8B5A2B) !important;
  }

  /* Chevron — mobilde sağda dairesel */
  .kk-seo-chev {
    display: inline-flex !important;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(184, 115, 51, 0.10);
    color: var(--copper, #B87333);
    align-items: center;
    justify-content: center;
    transition:
      transform .25s cubic-bezier(.16, 1, .3, 1),
      background .2s;
  }
  .kk-seo-summary:hover .kk-seo-chev {
    background: rgba(184, 115, 51, 0.18);
  }
  .kk-seo-accordion[open] .kk-seo-chev {
    transform: translateY(-50%) rotate(180deg);
    background: rgba(184, 115, 51, 0.18);
  }

  /* Body — SEO metin içeriği */
  .kk-seo-body {
    padding: 4px 16px 18px;
    border-top: 1px solid rgba(184, 115, 51, 0.12);
  }
  .kk-seo-body .ko-seo-text {
    padding-top: 12px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .kk-seo-accordion,
  .kk-seo-summary,
  .kk-seo-chev,
  .kk-seo-body {
    transition: none !important;
    animation: none !important;
  }
}

/* ─── Sure listesi accordion (#sureListAccordion) — yatay layout
   Aynı .kk-reading-accordion stilini kullanır ama summary yatay sıralı */
.kk-sure-summary {
  flex-direction: row !important;
  align-items: center !important;
  text-align: left !important;
  gap: 12px !important;
  padding: 14px 18px !important;
  min-height: 48px;
}
.kk-sure-summary .kk-reading-summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 8px;
  background: rgba(184, 115, 51, 0.08);
  color: var(--copper, #B87333);
}
.kk-sure-summary .kk-reading-summary-text {
  flex: 1;
  min-width: 0;
  position: static;
  font-family: var(--sans, 'Inter', sans-serif);
  font-weight: 600;
  font-size: 15px;
  color: var(--text, #2C1810);
}
.kk-sure-summary .kk-reading-summary-chev {
  position: static !important;
  transform: none !important;
  width: auto;
  height: auto;
  background: transparent;
  font-size: 16px;
  flex: 0 0 auto;
}
.kk-sure-accordion[open] .kk-sure-summary .kk-reading-summary-chev {
  transform: rotate(180deg) !important;
}

/* Search bar + quick filter (Mekkî / Medenî) */
.kk-sure-search {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.kk-sure-search input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border, #E0D5C8);
  border-radius: 999px;
  background: var(--paper, #FFFDF8);
  font-family: var(--sans, 'Inter', sans-serif);
  font-size: 16px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  min-height: 44px;
  color: var(--text, #2C1810);
  -webkit-appearance: none;
  appearance: none;
}
.kk-sure-search input::placeholder { color: var(--text-3, #9B8B7F); }
.kk-sure-search input:focus {
  border-color: var(--copper, #B87333);
  box-shadow: 0 0 0 3px rgba(184, 115, 51, 0.10);
}
.kk-sure-quick { display: flex; gap: 6px; flex-wrap: wrap; }
.kk-sure-quick button {
  padding: 8px 14px;
  border: 1px solid var(--border, #E0D5C8);
  border-radius: 999px;
  background: transparent;
  font-family: var(--sans, 'Inter', sans-serif);
  font-size: 0.82rem;
  color: var(--text-2, #6B5B4F);
  cursor: pointer;
  min-height: 36px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.kk-sure-quick button:hover { border-color: var(--copper, #B87333); }
.kk-sure-quick button.active {
  background: var(--copper, #B87333);
  border-color: var(--copper, #B87333);
  color: #FFFDF8;
}

/* MOBILE — compact 2-col sure grid + tight tap targets */
@media (max-width: 900px) {
  /* Generic surahs container (covers .sure-list, .ko-all-grid, sureler-grid) */
  #klAllSurahsGrid,
  .sure-list,
  [class*="sure-list"],
  [class*="sureler-grid"] {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    max-height: 540px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px !important;
    background: rgba(245, 241, 232, 0.4);
    border-radius: 8px;
  }
  #klAllSurahsGrid > *,
  .sure-list > *,
  .sure-item {
    padding: 10px 12px !important;
    font-size: 0.88rem !important;
    border-radius: 6px;
    background: var(--paper, #FFFDF8);
    border: 1px solid var(--border-soft, var(--border-l, #EDE6DC));
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
  }
  #klAllSurahsGrid .ko-all-num,
  .sure-list .sure-no,
  .sure-item .num {
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    background: rgba(184, 115, 51, 0.08);
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--copper-dark, #8B5A2B);
    flex: 0 0 24px;
    min-width: 0;
    padding: 0 !important;
  }
}
@media (max-width: 380px) {
  #klAllSurahsGrid,
  .sure-list,
  [class*="sure-list"],
  [class*="sureler-grid"] {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   İŞ 4 — oku.html: üst toolbar overlap fix + audio modern bottom sheet
   Tüm kurallar @media (max-width: 900px) içinde — masaüstüne dokunmaz.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* === Üst toolbar: kompaktlaştır, alt control-bar ile çakışmayı önle === */
  /* Mevcut .mh-bar sticky-top; sadece sayfa-jump input gizli (1136).
     Burada üst toolbar'ın bottom-bar ile üst üste binmesini engelleyecek
     padding ekliyoruz ve labeled butonların etiketlerini gizliyoruz. */
  .mushaf-header {
    background: rgba(255,253,248,0.96) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--rule, var(--line, #E0D5C8));
  }
  .mh-bar .mh-tog-label,
  .mh-bar .mh-tog-grp-text .mh-tog-label { display: none !important; }
  /* Tüm üst aksiyon butonlarına ortak touch target */
  .mh-bar .mh-btn,
  .mh-bar .mh-tog-btn,
  .mh-bar .mh-btn-pill {
    min-height: 40px;
    min-width: 40px;
    border-radius: 8px;
  }
  .mh-bar .mh-btn:active,
  .mh-bar .mh-btn.active {
    background: rgba(184,115,51,0.08) !important;
  }

  /* Body padding: hem üst sticky header (52px) hem alt control-bar (~64px) için yer aç.
     Mevcut padding-bottom 78px (1149) yeterli; ekstra korumayla safe-area ekliyoruz. */
  .mushaf-main {
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* === Audio panel — modern mobile bottom sheet (control-bar üstünde) === */
  /* Mevcut .audio-panel.active mobilde sade dock idi (640px blok);
     Burada full-width, drag-handle, header, 5x speed grid'li modern sheet'e dönüştürüyoruz. */
  .audio-panel {
    position: fixed !important;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 78vh;
    margin: 0 !important;
    background: var(--paper, var(--surface, #FFFDF8)) !important;
    border: 1px solid var(--rule, var(--line, #E0D5C8)) !important;
    border-bottom: none !important;
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 0 -12px 36px rgba(15,10,7,0.18), 0 -4px 12px rgba(15,10,7,0.08) !important;
    padding: 16px 18px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    transform: translateY(120%) !important;
    transition: transform .32s cubic-bezier(.16, 1, .3, 1), opacity .2s ease !important;
    opacity: 0;
    pointer-events: none;
    z-index: 200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .audio-panel.active {
    transform: translateY(0) !important;
    opacity: 1;
    pointer-events: auto;
  }
  /* Bottom-nav varsa biraz yukarıda */
  body.mv-has-bnav .audio-panel {
    bottom: calc(140px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Drag handle */
  .audio-panel::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: var(--line, #E0D5C8);
    border-radius: 4px;
    margin: -6px auto 4px;
    flex-shrink: 0;
  }

  /* Header — sure adı + ayet bilgisi + kapat */
  .audio-panel .audio-panel-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 0 0 12px !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--line-light, #EDE6DC) !important;
    flex: 0 0 auto !important;
    min-width: 0;
  }
  .audio-panel .ap-album-art {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--p-soft, rgba(184,115,51,0.1));
    color: var(--p, #B87333);
    font-size: 1.1rem;
    flex-shrink: 0;
  }
  .audio-panel .ap-info {
    flex: 1 1 auto;
    min-width: 0;
  }
  .audio-panel .ap-surah {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--ink, #0F0A07);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
  }
  .audio-panel .ap-ayah {
    font-size: .72rem !important;
    color: var(--ink-muted, #6B5B4F);
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .audio-panel .apc-minimize,
  .audio-panel .apc-close {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50%;
    border: 1px solid var(--line, #E0D5C8) !important;
    background: transparent !important;
    color: var(--ink-muted, #6B5B4F) !important;
    margin-left: 0 !important;
    flex-shrink: 0;
  }
  .audio-panel .apc-minimize:active,
  .audio-panel .apc-close:active { transform: scale(.94); }

  /* Controls — büyük play merkezde, ikonlar etrafta */
  .audio-panel .ap-controls {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 4px 0 !important;
    flex: 0 0 auto !important;
  }
  .audio-panel .ap-controls .apc-btn {
    width: 48px !important;
    height: 48px !important;
    font-size: 1rem !important;
    border-radius: 50%;
    background: var(--paper-soft, var(--bg, #FAF7F2)) !important;
    color: var(--ink, #0F0A07) !important;
  }
  .audio-panel .ap-controls .apc-play {
    width: 60px !important;
    height: 60px !important;
    font-size: 1.2rem !important;
    background: var(--p, #B87333) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(184,115,51,.35);
  }
  /* Rewind ve loop mobil sheet'te görünür */
  .audio-panel #apRewind,
  .audio-panel #apLoop {
    display: inline-flex !important;
  }

  /* Progress bar — tam genişlik, kalın */
  .audio-panel .ap-progress {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 5px !important;
    background: var(--line-light, #EDE6DC) !important;
    margin: 0 !important;
  }
  .audio-panel .ap-progress-fill::after { opacity: 1; }
  .audio-panel .ap-time {
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
    font-size: .7rem !important;
    color: var(--ink-muted, #6B5B4F);
    margin-top: -4px;
  }

  /* Speed grid — 5'li görünür */
  .audio-panel .ap-right {
    display: block !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    margin-top: 4px;
  }
  .audio-panel .ap-speed {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
  }
  .audio-panel .ap-speed-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 10px 4px !important;
    border: 1px solid var(--line, #E0D5C8) !important;
    border-radius: 10px !important;
    background: var(--paper, var(--surface, #FFFDF8)) !important;
    font-size: .78rem !important;
    font-weight: 600 !important;
    color: var(--ink, #0F0A07) !important;
    cursor: pointer;
    min-height: 40px !important;
    font-family: var(--font-mono, monospace);
    letter-spacing: .02em;
  }
  .audio-panel .ap-speed-btn.active {
    background: var(--p, #B87333) !important;
    border-color: var(--p, #B87333) !important;
    color: #FFFDF8 !important;
  }

  /* Floating audio button bottom-bar üstünde (line 1150'de display:none vardı, koruyalım) */
  .floating-audio-btn { display: none !important; }
}

/* Tablet ve üstü (901px+) — kuralları sıfırlama gerekmiyor; tüm değişiklikler @media içinde */

/* ════════════════════════════════════════════════════════════════════
   MUSHAF MOBILE TOOLBAR — Bottom Bar + Top Bar + Settings Sheet
   2026-05-23 — sadece @media (max-width: 900px) içinde
   ════════════════════════════════════════════════════════════════════ */

/* Default — desktop'ta yeni elemanlar GİZLİ */
.mh-mtop,
.mh-bbar,
.ko-settings-sheet,
.ko-settings-overlay { display: none; }

@media (max-width: 900px) {
  /* Eski toolbar tamamen gizle */
  .mushaf-header { display: none !important; }

  /* TOP BAR */
  .mh-mtop {
    display: flex !important;
    position: sticky; top: 0; left: 0; right: 0;
    z-index: 50;
    background: rgba(250, 247, 242, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(184, 115, 51, 0.18);
    padding: 8px 12px;
    align-items: center;
    gap: 10px;
    min-height: 48px;
  }
  .mh-mtop-back {
    flex: 0 0 36px;
    width: 36px; height: 36px;
    border: 1px solid rgba(184, 115, 51, 0.22);
    border-radius: 8px;
    background: transparent;
    color: var(--copper-dark, #8B5A2B);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .mh-mtop-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
  }
  .mh-mtop-surah {
    font-family: "Cormorant Garamond", serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--text, #2C1810);
    line-height: 1;
    letter-spacing: -.2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
  .mh-mtop-page {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: .12em;
    color: var(--text-muted, #6B5B4F);
    text-transform: uppercase;
  }
  .mh-mtop-jump {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .mh-mtop-jump input {
    width: 48px;
    height: 36px;
    border: 1px solid rgba(184, 115, 51, 0.22);
    border-radius: 6px;
    background: var(--paper, #FFFDF8);
    font-size: 16px !important;
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: var(--text, #2C1810);
  }
  .mh-mtop-jump input:focus {
    border-color: var(--copper, #B87333);
    outline: none;
  }

  /* BOTTOM BAR */
  .mh-bbar {
    display: grid !important;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 95;
    grid-template-columns: repeat(6, 1fr);
    background: rgba(255, 253, 248, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(184, 115, 51, 0.20);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.08);
    gap: 2px;
  }
  .mh-bbar-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 2px;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--text-muted, #6B5B4F);
    border-radius: 8px;
    min-height: 52px;
    transition: background .15s ease, color .15s ease;
    position: relative;
  }
  .mh-bbar-btn:hover,
  .mh-bbar-btn:active,
  .mh-bbar-btn.active {
    background: rgba(184, 115, 51, 0.08);
    color: var(--copper-dark, #8B5A2B);
  }
  .mh-bbar-btn.active::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 24px; height: 2px;
    background: var(--copper, #B87333);
    border-radius: 0 0 2px 2px;
  }
  .mh-bbar-btn i, .mh-bbar-btn svg {
    font-size: 18px;
    width: 20px; height: 20px;
    color: inherit;
  }
  .mh-bbar-label {
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: inherit;
    line-height: 1;
  }

  /* Reading area — bottom-bar üzerine padding */
  body, main, .mushaf-content, .ko-reader, .mushaf-main {
    padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important;
  }

  /* SETTINGS SHEET */
  .ko-settings-sheet {
    display: block !important;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 200;
    background: var(--paper, #FFFDF8);
    border-top: 1px solid rgba(184, 115, 51, 0.20);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.18);
    padding: 16px 20px calc(20px + env(safe-area-inset-bottom));
    max-height: 80vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateY(105%);
    transition: transform .32s cubic-bezier(.16, 1, .3, 1);
    visibility: hidden;
  }
  .ko-settings-sheet.is-open {
    transform: translateY(0);
    visibility: visible;
  }
  .ko-settings-sheet::before {
    content: '';
    display: block;
    width: 36px; height: 4px;
    background: rgba(184, 115, 51, 0.28);
    border-radius: 2px;
    margin: 0 auto 14px;
  }
  .ko-settings-sheet-title {
    font-family: "Cormorant Garamond", serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--ink, #0F0A07);
    margin: 0 0 14px;
    text-align: center;
  }
  .ko-settings-group {
    padding: 12px 0;
    border-bottom: 1px solid rgba(184, 115, 51, 0.10);
  }
  .ko-settings-group:last-child { border-bottom: 0; }
  .ko-settings-group-label {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-muted, #6B5B4F);
    font-weight: 700;
    margin-bottom: 8px;
  }
  .ko-settings-group-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .ko-settings-opt {
    flex: 1 1 auto;
    min-width: 80px;
    padding: 10px 12px;
    border: 1px solid rgba(184, 115, 51, 0.22);
    border-radius: 8px;
    background: var(--paper, #FFFDF8);
    font-family: "DM Sans", sans-serif;
    font-size: 13px;
    color: var(--text, #2C1810);
    cursor: pointer;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  .ko-settings-opt.is-active {
    background: rgba(184, 115, 51, 0.10);
    border-color: var(--copper, #B87333);
    color: var(--copper-dark, #8B5A2B);
    font-weight: 600;
  }
  .ko-settings-opt i, .ko-settings-opt svg {
    font-size: 13px;
    opacity: .85;
  }

  .ko-settings-overlay {
    display: block !important;
    position: fixed; inset: 0;
    background: rgba(15, 10, 7, 0.4);
    z-index: 190;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
  }
  .ko-settings-overlay.is-open {
    opacity: 1;
    visibility: visible;
  }

  @media (prefers-reduced-motion: reduce) {
    .ko-settings-sheet, .ko-settings-overlay {
      transition: none !important;
    }
  }
}

/* ════════════════════════════════════════════════════════════════════
   AUDIO PANEL — Mobile Bottom Sheet (refined)
   2026-05-23 — desktop dokunulmaz; sadece @media (max-width: 900px) override
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Floating audio btn mobile'da gizli — mh-bbar'daki Sesli butonu kullanılır */
  .floating-audio-btn {
    display: none !important;
  }

  /* Audio panel — full-width bottom sheet */
  .audio-panel {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 88vh;
    background: var(--paper, var(--surface, #FFFDF8)) !important;
    border: 1px solid rgba(184, 115, 51, 0.20) !important;
    border-bottom: 0 !important;
    border-radius: 20px 20px 0 0 !important;
    box-shadow: 0 -14px 50px rgba(0, 0, 0, 0.20) !important;
    padding: 12px 18px calc(78px + env(safe-area-inset-bottom)) !important;
    transform: translateY(110%) !important;
    transition: transform .35s cubic-bezier(.16, 1, .3, 1) !important;
    visibility: hidden !important;
    z-index: 180;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    opacity: 1 !important;
    pointer-events: auto !important;
    margin: 0 !important;
    gap: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .audio-panel.is-open,
  .audio-panel.active {
    transform: translateY(0) !important;
    visibility: visible !important;
  }

  /* Drag handle */
  .audio-panel::before {
    content: '';
    display: block;
    width: 40px; height: 4px;
    background: rgba(184, 115, 51, 0.32);
    border-radius: 2px;
    margin: 4px auto 14px;
    flex-shrink: 0;
  }

  /* Header */
  .audio-panel .audio-panel-header {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px !important;
    border-bottom: 1px solid rgba(184, 115, 51, 0.12) !important;
    margin-bottom: 0 !important;
    flex: 0 0 auto;
    min-width: 0;
  }
  .audio-panel .ap-album-art {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px;
    background: linear-gradient(135deg, #8B5A2B, #B87333) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: #FFFDF8 !important;
    font-size: 18px !important;
  }
  .audio-panel .ap-info {
    flex: 1 1 auto;
    min-width: 0;
  }
  .audio-panel .ap-surah {
    font-family: "Cormorant Garamond", serif !important;
    font-size: 16px !important;
    font-weight: 600;
    color: var(--text, var(--ink, #2C1810)) !important;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .audio-panel .ap-ayah {
    font-family: "DM Sans", sans-serif !important;
    font-size: 12px !important;
    color: var(--text-muted, var(--ink-muted, #6B5B4F)) !important;
    letter-spacing: .02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
  }

  /* Close button (yeni — mobile-only) */
  .audio-panel .ap-close-mobile {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border: 1px solid rgba(184, 115, 51, 0.22);
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted, var(--ink-muted, #6B5B4F));
    cursor: pointer;
    flex: 0 0 36px;
    padding: 0;
  }
  .audio-panel .ap-close-mobile:hover,
  .audio-panel .ap-close-mobile:active {
    border-color: var(--copper, var(--p, #B87333));
    color: var(--copper-dark, var(--p-dark, #8B5A2B));
  }

  /* Desktop close + minimize — mobile sheet'te gizle, yerine ap-close-mobile */
  .audio-panel .apc-close,
  .audio-panel .apc-minimize {
    display: none !important;
  }

  /* Controls — tek satır */
  .audio-panel .ap-controls {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px !important;
    margin-bottom: 6px;
    padding: 4px 0 !important;
    flex: 0 0 auto !important;
  }
  .audio-panel .ap-controls .apc-btn,
  .audio-panel .ap-controls button {
    flex: 0 0 auto;
    width: 44px !important;
    height: 44px !important;
    border: 0;
    background: transparent !important;
    color: var(--text-muted, var(--ink-muted, #6B5B4F)) !important;
    cursor: pointer;
    border-radius: 50%;
    transition: background .15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem !important;
  }
  .audio-panel .ap-controls .apc-btn:hover,
  .audio-panel .ap-controls .apc-btn:active {
    background: rgba(184, 115, 51, 0.10) !important;
    color: var(--copper-dark, var(--p-dark, #8B5A2B)) !important;
  }
  .audio-panel .ap-controls .apc-play {
    width: 56px !important;
    height: 56px !important;
    background: var(--copper, var(--p, #B87333)) !important;
    color: #FFFDF8 !important;
    box-shadow: 0 4px 16px rgba(184, 115, 51, 0.32) !important;
    font-size: 1.2rem !important;
  }
  .audio-panel .ap-controls .apc-play:hover,
  .audio-panel .ap-controls .apc-play:active {
    background: var(--copper-dark, var(--p-dark, #8B5A2B)) !important;
  }

  /* Rewind + loop mobile sheet'te görünür */
  .audio-panel #apRewind,
  .audio-panel #apLoop {
    display: inline-flex !important;
  }

  /* Progress bar */
  .audio-panel .ap-progress {
    position: relative;
    width: 100% !important;
    height: 6px !important;
    background: rgba(184, 115, 51, 0.16) !important;
    border-radius: 3px;
    cursor: pointer;
    margin: 0 0 6px !important;
    overflow: hidden;
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }
  .audio-panel .ap-progress-fill {
    height: 100% !important;
    background: linear-gradient(90deg, var(--copper, var(--p, #B87333)), var(--copper-dark, var(--p-dark, #8B5A2B))) !important;
    transition: width .1s linear;
  }
  .audio-panel .ap-time {
    display: flex !important;
    justify-content: space-between !important;
    font-family: "JetBrains Mono", var(--font-mono, monospace) !important;
    font-size: 11px !important;
    color: var(--text-muted, var(--ink-muted, #6B5B4F)) !important;
    font-variant-numeric: tabular-nums;
    margin: 0 0 12px !important;
    width: 100% !important;
  }

  /* Right group — speed grid + volume */
  .audio-panel .ap-right {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    width: 100% !important;
    flex: 0 0 auto !important;
  }

  /* Speed grid */
  .audio-panel .ap-speed {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 4px !important;
    width: 100% !important;
  }
  .audio-panel .ap-speed-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 8px 4px !important;
    border: 1px solid rgba(184, 115, 51, 0.22) !important;
    border-radius: 8px !important;
    background: var(--paper, var(--surface, #FFFDF8)) !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: 11px !important;
    font-weight: 600;
    color: var(--text, var(--ink, #2C1810)) !important;
    cursor: pointer;
    min-height: 36px;
    transition: all .15s ease;
  }
  .audio-panel .ap-speed-btn:hover {
    background: rgba(184, 115, 51, 0.08) !important;
  }
  .audio-panel .ap-speed-btn.active {
    background: var(--copper, var(--p, #B87333)) !important;
    border-color: var(--copper, var(--p, #B87333)) !important;
    color: #FFFDF8 !important;
    box-shadow: 0 2px 8px rgba(184, 115, 51, 0.28);
  }

  /* Volume kompakt */
  .audio-panel .ap-volume {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
  }
  .audio-panel .ap-volume i,
  .audio-panel .ap-volume svg {
    flex: 0 0 18px;
    color: var(--text-muted, var(--ink-muted, #6B5B4F));
    font-size: 14px;
  }
  .audio-panel .ap-volume input[type="range"] {
    flex: 1;
    height: 4px;
  }

  @media (prefers-reduced-motion: reduce) {
    .audio-panel { transition: none !important; }
  }
}

/* Default — desktop'ta .ap-close-mobile gizli */
.ap-close-mobile { display: none; }

/* ════════════════════════════════════════════════════════════════════
   MOBILE POPOVER VISIBILITY FIX — 2026-05-24
   .mushaf-header mobilde display:none + .mh-bar her zaman flex.
   Bottom bar butonları .mushaf-header içindeki popBtn*'a proxy ediyor;
   ama display:none parent tüm descendants'ı render dışı bırakır
   (position:fixed bile escape edemez). :has() ile bir popover açıkken
   tüm zinciri sıfır yükseklikli + invisible host'a çevir, sadece
   .mh-pop panelini visible bırak.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .mushaf-header:has(.mh-pop-wrap.open) {
    display: block !important;
    position: fixed !important;
    top: 0; left: 0; right: 0;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    overflow: visible !important;
    z-index: 100;
    pointer-events: none;
  }
  .mushaf-header:has(.mh-pop-wrap.open) > .mh-bar {
    display: flex !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  /* Popover paneli görünür kalsın (visibility:hidden parent override) */
  .mushaf-header:has(.mh-pop-wrap.open) .mh-pop-wrap.open .mh-pop {
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   BOTTOM TOOLBAR SİYAH ARKA PLAN TEMİZLİĞİ — Cascade Fallback
   2026-05-24
   oku.html inline <style> ezilirse bile çalışsın diye en sonda.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Eski mobile .control-bar (var(--ink) = #0F0A07 siyah) gizle —
     yeni .mh-bbar tüm fonksiyonları (prev/next/audio/surahs/settings)
     ve .mh-mtop (page-info) zaten karşılıyor. */
  .control-bar,
  nav.control-bar,
  #controlBar {
    display: none !important;
  }

  /* .mh-bbar üzerindeki siyah gölgeyi copper warm soft ile değiştir */
  .mh-bbar {
    box-shadow:
      0 -8px 24px -8px rgba(184, 115, 51, 0.10),
      0 -2px 4px rgba(184, 115, 51, 0.04) !important;
  }

  /* Defansif: site-wide hp-bottom-nav / mv-bnav (bottom-nav.js
     bunları temizliyor ama başka bir script enjekte ederse de kapat). */
  .hp-bottom-nav,
  .mv-bnav {
    display: none !important;
  }
}