/* Kıraat Karşılaştırma Modülü — kk- prefix (kıraat-karşılaştırma) */

:root {
  /* Tipografi (yalnızca kullanılanlar) */
  --kk-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --kk-text-sm: 14px;
  --kk-text-aya: 32px;

  /* Shape */
  --kk-radius: 8px;

  /* Light tema (default + data-theme="light") */
  color-scheme: light;
  --kk-bg: #f7f3ea;
  --kk-card: #ffffff;
  --kk-input-bg: #ffffff;
  --kk-text: #2b2b2b;
  --kk-text-aya-color: #111;
  --kk-muted: #6b6b6b;
  --kk-border: #d8cfb8;
  --kk-accent: #1f6f43;
  --kk-accent-dark: #154a2c;
  --kk-diff: #fff3cd;
  --kk-diff-border: #ffd54f;
  --kk-error: #a33;
  --kk-error-bg: #fdecea;
  --kk-error-border: #f5c6c2;
  --kk-focus: #2563eb;
  --kk-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
  --kk-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.25);
  --kk-toast-bg: #2b2b2b;
  --kk-toast-text: #ffffff;
  --kk-pp-bg: #f0ece0;                    /* mushaf paneli kâğıt zemini */
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --kk-bg: #1a1814;
  --kk-card: #25221c;
  --kk-input-bg: #1f1d18;
  --kk-text: #e8e4d8;
  --kk-text-aya-color: #f5f0e0;          /* KFGQPC ince çizgili — biraz daha parlak */
  --kk-muted: #a6a194;
  --kk-border: #3d3a32;
  --kk-accent: #4a9d6e;                   /* koyu zeminde okunabilirlik için açık yeşil */
  --kk-accent-dark: #5fb380;              /* hover daha açık */
  --kk-diff: #3d3624;                     /* mat sarı, göz patlatmaz */
  --kk-diff-border: #8b7d4a;
  --kk-error: #ff8a80;
  --kk-error-bg: #3a1f1c;
  --kk-error-border: #6b3a36;
  --kk-focus: #60a5fa;
  --kk-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
  --kk-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6);
  --kk-toast-bg: #f5f0e0;
  --kk-toast-text: #1a1814;
  --kk-pp-bg: #1a1814;                    /* koyu zeminde göz yormaz */
}

* {
  box-sizing: border-box;
  /* iOS tap üzerinde mavi flash'ı kapat — UI native gibi hissetsin. */
  -webkit-tap-highlight-color: transparent;
}

/* Skip link — klavye kullanıcıları için. Default gizli, focus'ta görünür. */
.kk-skip {
  position: absolute;
  left: 8px;
  top: -48px;
  background: var(--kk-accent);
  color: #fff;
  padding: 8px 14px;
  border-radius: var(--kk-radius);
  text-decoration: none;
  font-size: var(--kk-text-sm);
  z-index: 1000;
  transition: top 150ms ease;
}
.kk-skip:focus {
  top: 8px;
}

body {
  margin: 0;
  font-family: var(--kk-font-sans);
  background: var(--kk-bg);
  color: var(--kk-text);
  line-height: 1.5;
  transition: background-color 200ms ease, color 200ms ease;
}

main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
}

.kk-header {
  text-align: center;
  margin-bottom: 28px;
  padding-bottom: 18px;
  position: relative;
}
.kk-header::after {
  /* Akademik mushaf hissi — başlık altında altın aksent çizgisi */
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 64px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #c9a236 40%, #c9a236 60%, transparent);
  transform: translateX(-50%);
  border-radius: 2px;
}
.kk-header h1 {
  margin: 0 0 6px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--kk-accent);
  /* Hafif metin gölgesi ile derinlik */
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.kk-header p {
  margin: 0;
  color: var(--kk-muted);
  font-size: 14px;
  letter-spacing: 0.01em;
}

.kk-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  background: var(--kk-card);
  border: 1px solid var(--kk-border);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 24px;
  box-shadow: 0 6px 24px -8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.04);
  transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
  /* Sticky: uzun ayetlerde scroll edince toolbar görünür kalır. */
  position: sticky;
  top: 8px;
  z-index: 10;
  backdrop-filter: saturate(140%);
}
.kk-toolbar label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--kk-muted);
}
.kk-select, .kk-input {
  font: inherit;
  /* iOS Safari: font-size <16px input fokus olunca sayfayı zoom'lar.
     16px ile bu davranış engellenir. */
  font-size: 16px;
  padding: 8px 10px;
  border: 1px solid var(--kk-border);
  border-radius: var(--kk-radius);
  background: var(--kk-input-bg);
  color: var(--kk-text);
  /* Touch target min 44px (Apple HIG / Google Material). */
  min-height: 44px;
  /* 300ms tap delay'i kaldır (eski iOS) + native double-tap zoom kapat */
  touch-action: manipulation;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.kk-select { min-width: 200px; }
.kk-input { width: 80px; text-align: center; }
.kk-btn {
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 10px 16px;
  /* Hafif gradient + alt vurgu çizgisi → derinlik */
  background: linear-gradient(180deg, var(--kk-accent) 0%, var(--kk-accent-dark) 100%);
  color: #fff;
  border: 1px solid var(--kk-accent-dark);
  border-radius: 8px;
  cursor: pointer;
  min-height: 44px;
  touch-action: manipulation;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}
.kk-btn:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px -2px rgba(31, 111, 67, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.kk-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(0, 0, 0, 0.15);
}
.kk-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.kk-status {
  text-align: center;
  color: var(--kk-muted);
  font-size: 14px;
  margin-bottom: 16px;
  /* Yüklenme sırasında nazik bir nabız animasyonu — "ölü" değil "aktif" hissi */
  animation: kk-pulse 1.6s ease-in-out infinite;
}
@keyframes kk-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* Sûre bilgi bandı: dist/index.json'dan akademik metadata
   ("2. Bakara · Cüz 1–3 · 286 ayet"). Boş olunca margin oluşmaz. */
.kk-sura-info {
  text-align: center;
  font-size: 13px;
  color: var(--kk-muted);
  margin-bottom: 14px;
  letter-spacing: 0.2px;
}
.kk-sura-info:empty {
  display: none;
}
.kk-sura-info strong {
  color: var(--kk-text);
  font-weight: 600;
}
.kk-sura-name-ar {
  font-family: "hafs18", "Amiri", "Traditional Arabic", serif;
  font-size: 15px;
  color: var(--kk-text);
}

.kk-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.kk-card {
  background: var(--kk-card);
  border: 1px solid var(--kk-border);
  border-radius: 10px;
  padding: 16px 20px;
  box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  transition: background-color 200ms ease, border-color 200ms ease,
              transform 180ms ease, box-shadow 180ms ease;
}
.kk-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.05);
  border-color: color-mix(in srgb, var(--kk-accent) 30%, var(--kk-border));
}

/* Hafs ayetinin başlangıç kelimesi — merged rivayet metnindeki anchor.
   Akademik mushaf hissi: koyu altın renk + hafif glow. */
.kk-anchor {
  color: #c9a236;
  font-feature-settings: inherit;
  font-kerning: inherit;
  font-variant-ligatures: inherit;
  text-shadow: 0 0 1px rgba(201, 162, 54, 0.25);
}

/* === KART HİYERARŞİSİ ===
   Hafs (Âsım) = ASİL METİN — referans kartı.
   Diğer 7 ravi = Hafs'a göre kıyas — farklı okuyorsa altın çizgi (kk-diff),
   aynı okuyorsa yumuşak yeşil çizgi (Hafs'la birebir).
   Hedef: 2026 vizyon, sade ama bilgi-yoğun, akademik. */

/* Hafs kartı: subtle yeşil tint + sol kenar daha kalın aksent.
   "ASİL METİN" rozeti rivayet adının yanına inline olarak gelir (header
   right alanını TIKAMAZ — ses + PDF butonları orada). */
.kk-card[data-rivayet-id="hafs"] {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--kk-accent) 5%, var(--kk-card)) 0%,
    var(--kk-card) 60%);
  border: 1px solid color-mix(in srgb, var(--kk-accent) 28%, var(--kk-border));
  border-left: 4px solid var(--kk-accent);
  padding-left: 17px;
  box-shadow:
    0 4px 14px -3px color-mix(in srgb, var(--kk-accent) 14%, transparent),
    0 1px 2px rgba(0, 0, 0, 0.04);
}
/* "ASİL METİN" rozeti kaldırıldı — Hafs kartı zaten yeşil tint + kalın
   sol kenar ile ayırt edilebiliyor, ekstra etikete gerek yok. */

/* Hafs harici raviler (varsayılan): aynı okuyan → yumuşak yeşil sol şerit */
.kk-card:not([data-rivayet-id="hafs"]) {
  border-left: 3px solid color-mix(in srgb, var(--kk-accent) 22%, transparent);
  padding-left: 18px;
}

/* Hafs'tan farklı okuyan raviler: altın sol şerit + gradient ipucu */
.kk-card.kk-diff:not([data-rivayet-id="hafs"]) {
  border-left: 3px solid color-mix(in srgb, var(--kk-diff-border) 80%, transparent);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--kk-diff) 45%, transparent) 0%,
    var(--kk-card) 18%);
}

/* Hafs hover — daha belirgin reference vurgusu */
.kk-card[data-rivayet-id="hafs"]:hover {
  border-color: color-mix(in srgb, var(--kk-accent) 45%, var(--kk-border));
  box-shadow:
    0 8px 24px -6px color-mix(in srgb, var(--kk-accent) 22%, transparent),
    0 2px 4px rgba(0, 0, 0, 0.05);
}
/* PR2: 1-8 toggle ile gizlenen kartlar — .kk-card { display: flex } kuralının
   browser default [hidden]'ı override etmesini engelle. */
.kk-card[hidden] { display: none; }

.kk-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  /* Tam çizgi yerine ortadan soluk geçen gradient ayraç — daha rafine */
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--kk-border) 25%, var(--kk-border) 75%, transparent) 1;
  padding-bottom: 10px;
}
.kk-rivayet-heading {
  margin: 0;
  font-size: inherit;
  font-weight: 400;
  line-height: 1.3;
}
.kk-rivayet-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--kk-accent);
  letter-spacing: 0.01em;
}
.kk-rivayet-imam {
  font-size: 12px;
  color: var(--kk-muted);
}
.kk-page-info {
  font-size: 12px;
  color: var(--kk-muted);
  font-variant-numeric: tabular-nums;
  padding: 3px 8px;
  background: color-mix(in srgb, var(--kk-border) 35%, transparent);
  border-radius: 6px;
  letter-spacing: 0.01em;
}
.kk-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.kk-pdf-link {
  font-size: 14px;
  text-decoration: none;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.kk-pdf-link:hover {
  opacity: 1;
}

/* PDF mushaf butonu (kart başlıkta, küçük ikon) */
.kk-pdf-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 14px;
  opacity: 0.6;
  transition: opacity 0.15s, background 0.15s;
}
.kk-pdf-btn:hover { opacity: 1; background: var(--kk-border); }
.kk-pdf-btn.active {
  opacity: 1;
  background: var(--kk-accent);
  color: #fff;
}

/* Aktif kart işareti — açık olan rivayet */
.kk-card.kk-active {
  box-shadow: 0 0 0 2px rgba(31, 111, 67, 0.25);
}

/* PDF PANEL */
.kk-pp {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(560px, 50vw);
  background: var(--kk-card);
  border-left: 1px solid var(--kk-border);
  box-shadow: -8px 0 28px rgba(0, 0, 0, 0.08);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transform: translateX(0);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.kk-pp[hidden] { display: none; }
body.kk-pp-open .kk-grid {
  margin-right: min(560px, 50vw);
  transition: margin-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* TAM EKRAN modu — Mushafları Oku için */
.kk-pp.kk-pp-full {
  inset: 0;
  width: 100%;
  border-left: none;
  z-index: 2000;
}
body.kk-pp-full-open .kk-grid,
body.kk-pp-full-open .kk-toolbar,
body.kk-pp-full-open .kk-status,
body.kk-pp-full-open .kk-sura-info {
  display: none !important;
}
body.kk-pp-full-open .kk-pp-backdrop { display: none; }

.kk-pp-head {
  background: linear-gradient(135deg, var(--kk-accent), var(--kk-accent-dark));
  color: #fff;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.kk-pp-title { flex: 1; min-width: 0; }
.kk-pp-ravi { font-weight: 600; font-size: 15px; }
.kk-pp-meta { font-size: 12px; opacity: 0.85; margin-top: 2px; }
.kk-pp-rav-select {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.kk-pp-rav-select option { background: var(--kk-card); color: var(--kk-text); }
/* Mushaf reader sûre seçici (full mode) */
.kk-pp-sura-select {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 4px;
  max-width: 220px;
}
.kk-pp-sura-select option { background: var(--kk-card); color: var(--kk-text); }
.kk-pp-ic {
  width: 32px; height: 32px;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.kk-pp-ic:hover { background: rgba(255, 255, 255, 0.28); }
.kk-pp-page-input {
  width: 56px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-radius: 6px;
  text-align: center;
  font-size: 13px;
}
.kk-pp-page-input::-webkit-outer-spin-button,
.kk-pp-page-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Tabs */
.kk-pp-tabs {
  display: flex;
  background: var(--kk-bg);
  border-bottom: 1px solid var(--kk-border);
  overflow-x: auto;
  padding: 0 6px;
  flex-shrink: 0;
}
.kk-pp-tabs:empty { display: none; }
.kk-pp-tab {
  padding: 9px 12px;
  font-size: 13px;
  color: var(--kk-muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}
.kk-pp-tab.active {
  color: var(--kk-accent);
  border-bottom-color: var(--kk-accent);
  font-weight: 600;
}
.kk-pp-tab:hover:not(.active) { color: var(--kk-accent); }
.kk-pp-tab-x {
  color: var(--kk-muted);
  font-size: 14px;
  padding: 0 2px;
  border-radius: 3px;
}
.kk-pp-tab-x:hover { background: var(--kk-border); color: var(--kk-text); }

/* Body: head/tabs altında kalan dikey alanı doldurur, içerikleri yatay flex
   ile sıralar (sol sidebar | center | sağ sidebar). Side modda sidebar'lar
   gizlenir, sadece center kalır. */
.kk-pp-body {
  flex: 1;
  display: flex;
  min-height: 0;
}
.kk-pp-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.kk-pp-side {
  display: none; /* side modda gizli */
  flex-direction: column;
  background: var(--kk-card);
  overflow-y: auto;
  flex-shrink: 0;
}
.kk-pp.kk-pp-full .kk-pp-side { display: flex; }
.kk-pp-side-left {
  width: 240px;
  border-right: 1px solid var(--kk-border);
}
.kk-pp-side-right {
  width: 280px;
  border-left: 1px solid var(--kk-border);
}
.kk-pp-side-title {
  padding: 14px 16px 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--kk-muted);
  border-bottom: 1px solid var(--kk-border);
  background: var(--kk-bg);
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Sol sidebar: rivayet listesi (imam başlığı + ravi düğmesi) */
.kk-pp-ravi-list {
  display: flex;
  flex-direction: column;
  padding: 8px 0 16px;
}
.kk-pp-imam-head {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--kk-accent);
  padding: 12px 16px 4px;
  opacity: 0.75;
}
.kk-pp-imam-head:first-child { padding-top: 4px; }
.kk-pp-ravi-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border: none;
  background: transparent;
  color: var(--kk-text);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  border-left: 3px solid transparent;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.kk-pp-ravi-item:hover {
  background: var(--kk-bg);
}
.kk-pp-ravi-item.active {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--kk-accent) 14%, transparent),
    transparent);
  border-left-color: var(--kk-accent);
  color: var(--kk-accent);
  font-weight: 600;
}
.kk-pp-ravi-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--kk-border);
  flex-shrink: 0;
  transition: background 0.12s, box-shadow 0.12s;
}
.kk-pp-ravi-item:hover .kk-pp-ravi-dot { background: var(--kk-muted); }
.kk-pp-ravi-item.active .kk-pp-ravi-dot {
  background: var(--kk-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kk-accent) 22%, transparent);
}

/* Sağ sidebar: sayfa ayetleri + ses player slotu */
.kk-pp-ayet-list {
  display: flex;
  flex-direction: column;
  padding: 8px 0 16px;
}
.kk-pp-sura-head {
  font-size: 12px;
  font-weight: 700;
  color: var(--kk-accent);
  padding: 14px 16px 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.kk-pp-sura-head:first-child { padding-top: 4px; }
.kk-pp-ayet-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-top: 1px solid color-mix(in srgb, var(--kk-border) 60%, transparent);
}
.kk-pp-ayet-item:first-of-type { border-top: none; }
.kk-pp-ayet-no {
  min-width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--kk-border);
  background: var(--kk-card);
  color: var(--kk-text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s;
  flex-shrink: 0;
}
.kk-pp-ayet-no:hover {
  border-color: var(--kk-accent);
  color: var(--kk-accent);
  transform: scale(1.05);
}
.kk-pp-audio-slot {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.kk-pp-audio-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--kk-accent);
  color: #fff;
  font-size: 11px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.12s, opacity 0.12s;
}
.kk-pp-audio-btn:not(:disabled):hover { transform: scale(1.08); }
.kk-pp-audio-btn:disabled {
  background: var(--kk-border);
  cursor: not-allowed;
}
.kk-pp-audio-slot.playing .kk-pp-audio-btn {
  background: var(--kk-accent-dark, var(--kk-accent));
  animation: kk-audio-pulse 1.4s ease-in-out infinite;
}
.kk-pp-audio-slot.playing .kk-pp-audio-label {
  color: var(--kk-accent);
  font-weight: 600;
}
.kk-pp-audio-slot.loading .kk-pp-audio-btn {
  opacity: 0.7;
  animation: kk-audio-spin 1s linear infinite;
}
.kk-pp-audio-slot.error .kk-pp-audio-btn {
  background: #b94a3c;
}
.kk-pp-audio-slot.error .kk-pp-audio-label {
  color: #b94a3c;
}
/* Native audio elementi gizle — custom controls kullaniyoruz */
.kk-pp-audio-el { display: none; }

/* Custom minimal player — yuvarlak play + slim progress + sure */
.kk-pp-audio-slot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.kk-player-play {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--kk-accent);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.12s, background 0.12s;
  padding: 0;
}
.kk-player-play:hover { transform: scale(1.08); }
.kk-player-icon {
  font-size: 11px;
  line-height: 1;
  /* ▶ glyph hafifce sag offset — gorsel merkez */
  transform: translateX(1px);
}
.kk-pp-audio-slot.kk-player-playing .kk-player-play {
  background: var(--kk-accent-dark, var(--kk-accent));
}
.kk-pp-audio-slot.kk-player-playing .kk-player-icon { transform: none; }
.kk-pp-audio-slot.kk-player-error .kk-player-play {
  background: #b94a3c;
}
.kk-pp-audio-slot.kk-player-error .kk-player-icon::after { content: "✕"; }
.kk-pp-audio-slot.kk-player-error .kk-player-icon { font-size: 0; }
.kk-pp-audio-slot.kk-player-error .kk-player-icon::after { font-size: 12px; }

.kk-player-track {
  flex: 1;
  height: 4px;
  background: var(--kk-border);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  min-width: 60px;
  transition: height 0.12s;
}
.kk-player-track:hover { height: 6px; }
.kk-player-fill {
  height: 100%;
  width: 0%;
  background: var(--kk-accent);
  border-radius: 2px;
  transition: width 0.1s linear;
}
.kk-player-time {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 11px;
  color: var(--kk-muted);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 32px;
  text-align: right;
}
.kk-pp-audio-slot.kk-player-playing .kk-player-time {
  color: var(--kk-accent);
}

/* Compact mode (kart header) — sadece play butonu, progress yok */
.kk-pp-audio-slot-compact {
  display: flex;
  align-items: center;
  vertical-align: middle;
  gap: 0;
  flex: 0 0 auto;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
.kk-pp-audio-slot-compact .kk-player-play {
  width: 26px;
  height: 26px;
  position: relative;
  z-index: 2;
}
.kk-pp-audio-slot-compact .kk-player-icon {
  font-size: 9px;
}
@keyframes kk-audio-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--kk-accent) 40%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--kk-accent) 0%, transparent); }
}
@keyframes kk-audio-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.kk-pp-audio-label {
  font-size: 12px;
  color: var(--kk-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kk-pp-ayet-empty {
  padding: 20px 16px;
  font-size: 13px;
  color: var(--kk-muted);
  line-height: 1.5;
}

/* Full mode: imam adı header'da küçük + soluk göster */
.kk-pp-imam {
  font-weight: 400;
  opacity: 0.78;
  font-size: 13px;
}

/* Image area — açık temada kâğıt rengi (mushaf hissi),
   koyu temada koyu zemin (göz yormaz). */
.kk-pp-img-wrap {
  flex: 1;
  background: var(--kk-pp-bg, #f0ece0);
  overflow: auto;
  padding: 12px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.kk-pp-img-inner {
  position: relative;
  max-width: 100%;
  display: inline-block;
  transform-origin: top center;
  transition: transform 0.15s;
}
.kk-pp-img {
  display: block;
  max-width: 100%;
  height: auto;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.kk-pp-highlight {
  position: absolute;
  left: 4%;
  right: 4%;
  background: rgba(255, 213, 79, 0.32);
  mix-blend-mode: multiply;
  border-radius: 2px;
  pointer-events: none;
  animation: kk-pp-pulse 2s ease-in-out infinite;
  transition: top 0.25s, height 0.25s;
}
.kk-pp-highlight[hidden] { display: none; }
@keyframes kk-pp-pulse {
  0%, 100% { background: rgba(255, 213, 79, 0.28); }
  50%      { background: rgba(255, 213, 79, 0.50); }
}
.kk-pp-sep {
  width: 1px;
  height: 22px;
  background: rgba(255, 255, 255, 0.2);
  margin: 0 2px;
}

/* Backdrop (mobile) */
.kk-pp-backdrop {
  display: none;
}

/* MOBİL ALT BAR — desktop'ta gizli, dar ekranda full modda görünür */
.kk-pp-mobile-bar { display: none; }
.kk-pp-mb-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 8px;
  border: none;
  background: transparent;
  color: var(--kk-text);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border-top: 2px solid transparent;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.kk-pp-mb-btn:active { background: var(--kk-bg); }
.kk-pp-mb-btn.active {
  color: var(--kk-accent);
  border-top-color: var(--kk-accent);
  background: color-mix(in srgb, var(--kk-accent) 8%, transparent);
}
.kk-pp-mb-ic { font-size: 16px; line-height: 1; }

/* DRAWER BACKDROP — drawer açıkken arka karartma */
.kk-pp-drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 2050;
  animation: kk-fade-in 0.18s ease;
}
.kk-pp-drawer-backdrop.kk-pp-drawer-show { display: block; }
@keyframes kk-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* TABLET / DAR DESKTOP — sidebar'lar sığmadığında daralt */
@media (max-width: 1100px) {
  .kk-pp-side-left { width: 200px; }
  .kk-pp-side-right { width: 240px; }
}

/* DAR EKRAN (mobil/tablet) — full modda sidebar drawer'a dönüşür, alt bar görünür */
@media (max-width: 900px) {
  /* Desktop sidebar yapısını sıfırla, drawer haline getir */
  .kk-pp.kk-pp-full .kk-pp-side {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 70vh;
    max-height: 600px;
    border: none;
    border-top: 1px solid var(--kk-border);
    border-radius: 18px 18px 0 0;
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 2100;
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.18);
  }
  .kk-pp.kk-pp-full .kk-pp-side.kk-pp-side-open {
    transform: translateY(0);
  }
  /* Drawer içinde "tutamak" benzeri görsel ipucu için title'a stil */
  .kk-pp.kk-pp-full .kk-pp-side .kk-pp-side-title {
    text-align: center;
    padding-top: 18px;
    position: relative;
  }
  .kk-pp.kk-pp-full .kk-pp-side .kk-pp-side-title::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--kk-border);
  }
  /* Header sadeleşsin — rivayet adı gizli (alt bar'dan seçilir),
     zoom butonları gizli (pinch-zoom kullansın), sadece sayfa nav + close kalır */
  .kk-pp.kk-pp-full .kk-pp-ravi { display: none; }
  .kk-pp.kk-pp-full .kk-pp-head .kk-pp-ic[title="Yakınlaştır"],
  .kk-pp.kk-pp-full .kk-pp-head .kk-pp-ic[title="Uzaklaştır"],
  .kk-pp.kk-pp-full .kk-pp-head .kk-pp-ic[title="Sıfırla"],
  .kk-pp.kk-pp-full .kk-pp-head .kk-pp-sep { display: none; }
  .kk-pp.kk-pp-full .kk-pp-head { padding: 10px 12px; gap: 6px; }
  .kk-pp.kk-pp-full .kk-pp-meta { font-size: 11px; }
  /* Alt bar göster */
  .kk-pp.kk-pp-full .kk-pp-mobile-bar {
    display: flex;
    background: var(--kk-card);
    border-top: 1px solid var(--kk-border);
    flex-shrink: 0;
    z-index: 100;
  }
  /* PDF alanı pinch-zoom destekli */
  .kk-pp.kk-pp-full .kk-pp-img-wrap {
    touch-action: pinch-zoom;
    -webkit-overflow-scrolling: touch;
    padding: 8px;
  }
}

/* MOBILE — bottom sheet (side mode için) */
@media (max-width: 720px) {
  .kk-pp:not(.kk-pp-full) {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 80vh;
    border-left: none;
    border-top: 1px solid var(--kk-border);
    border-radius: 16px 16px 0 0;
  }
  body.kk-pp-open .kk-grid { margin-right: 0; }
  .kk-pp-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 999;
  }
  .kk-pp-backdrop[hidden] { display: none; }
}

/* Skeleton placeholder — ilk yükleme sırasında kart yükseklikleri reserve.
   CLS (Cumulative Layout Shift) önler. Shimmer animasyon prefers-reduced-motion
   ile devre dışı kalır (global @media reduce). */
.kk-skeleton-card {
  pointer-events: none;
}
.kk-skeleton-line,
.kk-skeleton-aya {
  background: linear-gradient(
    90deg,
    var(--kk-bg) 25%,
    var(--kk-border) 50%,
    var(--kk-bg) 75%
  );
  background-size: 200% 100%;
  animation: kk-shimmer 1.6s linear infinite;
  border-radius: 4px;
}
.kk-skeleton-line {
  height: 14px;
  margin-bottom: 8px;
}
.kk-skeleton-aya {
  height: 110px;
  margin: 18px 0;
}
@keyframes kk-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.kk-aya {
  font-size: var(--kk-text-aya);
  /* KFGQPC Uthmânî fontunda hareke yüksekliği için 2.35 — 2.1 sıkışık kalıyordu. */
  line-height: 2.35;
  text-align: center;
  direction: rtl;
  /* embed yerine isolate: kelime sınırı kesin, Hindi rakam (ayet sonu)
     bidi reorder'ı bozmaz. */
  unicode-bidi: isolate;
  color: var(--kk-text-aya-color);
  /* block padding: üst hareke (madde, küçük şîn vb.) kart kenarına çakmasın. */
  padding: 14px 8px;
  /* word-spacing: 0 — fontun kendi kelime aralığı yeterli; ekstra spacing
     bazı kelimelerin alt satıra atlama eşiğini bozuyordu. */
  word-spacing: 0;
  /* KFGQPC font'unun OpenType feature'larını aktive et — Arapça hareke
     hizalaması için mark/mkmk kritik:
     - mark:  base glyph üstüne hareke yerleştirme (GPOS)
     - mkmk:  hareke üstüne hareke yerleştirme (üstüste şedde+harekeler)
     - ccmp:  glyph composition/decomposition (alif+hamza ligatürleri)
     - calt:  contextual alternates (ayet-sonu daireli numeral)
     - rlig:  required ligature (lam-alif لا)
     - liga:  common ligatures */
  font-feature-settings: "mark" 1, "mkmk" 1, "ccmp" 1, "calt" 1,
                         "rlig" 1, "liga" 1;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  text-rendering: optimizeLegibility;
  transition: color 200ms ease;
}


/* Klavye kısayolları modalı (? tuşu ile aç/kapat) */
.kk-help-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
.kk-help-overlay[hidden] { display: none; }
.kk-help-dialog {
  background: var(--kk-card);
  color: var(--kk-text);
  border: 1px solid var(--kk-border);
  border-radius: var(--kk-radius);
  box-shadow: var(--kk-shadow-lg);
  padding: 24px 28px;
  min-width: 320px;
  max-width: 92vw;
  position: relative;
}
.kk-help-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 12px;
}
.kk-help-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 18px;
  row-gap: 8px;
  margin: 0;
}
.kk-help-list dt {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--kk-accent);
  white-space: nowrap;
}
.kk-help-list dd {
  margin: 0;
  font-size: 14px;
}
.kk-help-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  color: var(--kk-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
.kk-help-close:hover { background: var(--kk-border); color: var(--kk-text); }

.kk-error {
  text-align: center;
  color: var(--kk-error);
  padding: 20px;
  background: var(--kk-error-bg);
  border: 1px solid var(--kk-error-border);
  border-radius: var(--kk-radius);
}

/* ---------- Panel image error placeholder ---------- */
.kk-pp-img-error {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kk-error-bg);
  color: var(--kk-error);
  font-size: 14px;
  padding: 24px;
  text-align: center;
  border: 1px solid var(--kk-error-border);
  border-radius: var(--kk-radius);
}

/* ---------- Side panel açıkken h1/toolbar overlap önle (B1) ---------- */
@media (min-width: 720px) {
  body.kk-pp-open:not(.kk-pp-full-open) .kk-header h1,
  body.kk-pp-open:not(.kk-pp-full-open) .kk-toolbar,
  body.kk-pp-open:not(.kk-pp-full-open) .kk-status,
  body.kk-pp-open:not(.kk-pp-full-open) .kk-sura-info,
  body.kk-pp-open:not(.kk-pp-full-open) .kk-grid {
    padding-right: 580px;        /* panel width 560 + 20 nefes */
    transition: padding-right 200ms ease;
  }
}

/* ---------- Print CSS (akademisyenler için PDF dökümü) ---------- */
@media print {
  body { background: #fff !important; color: #000 !important; }
  .kk-toolbar, .kk-status, .kk-pp, .kk-pp-backdrop, .kk-bib-totop,
  .kk-bib-search, .kk-bib-toc, .kk-help-overlay, .kk-skip { display: none !important; }
  .kk-card, .kk-bib-item { break-inside: avoid; page-break-inside: avoid; }
  .kk-aya { color: #000 !important; }
  .kk-anchor { color: #555 !important; font-weight: 700; }
  .kk-card.kk-diff { background: #fff8e1 !important; border-left: 3px solid #c9a236 !important; }
  .kk-card[data-rivayet-id="hafs"] { background: #f4f9f5 !important; border: 1px solid #2e7d4f !important; }
  /* Linklerin URL'lerini görünür yap */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
    word-break: break-all;
  }
  /* Footer'da kk-footer linki yer alabilir; print'te de göster */
  .kk-footer { display: block !important; border-top: 1px solid #999; }
}

/* ---------- Footer (kaynakça linki) ---------- */
.kk-footer {
  margin-top: 32px;
  padding: 16px;
  text-align: center;
  border-top: 1px solid var(--kk-border);
  font-size: 13px;
}
.kk-footer a {
  color: var(--kk-accent);
  text-decoration: none;
}
.kk-footer a:hover { text-decoration: underline; }

/* ---------- Kaynakça sayfası: erişilebilirlik yardımcısı ---------- */
.kk-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Kaynakça sayfası (kaynakca.html) ---------- */
.kk-bib {
  max-width: 880px;
  margin: 0 auto;
  padding: 32px 20px 64px;
  color: var(--kk-text);
  background: var(--kk-bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  line-height: 1.55;
}
.kk-bib-header h1 {
  font-size: 26px;
  margin: 0 0 12px;
}
.kk-bib-lead {
  color: var(--kk-muted);
  font-size: 14px;
  margin: 0 0 8px;
}
.kk-bib-nav { font-size: 13px; margin: 6px 0 24px; }

/* Breadcrumb (Schema.org BreadcrumbList ile uyumlu) */
.kk-bib-breadcrumb {
  font-size: 13px;
  color: var(--kk-muted);
  margin: 0 0 16px;
}
.kk-bib-breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
}
.kk-bib-breadcrumb li {
  display: flex;
  align-items: center;
}
.kk-bib-breadcrumb li:not(:last-child)::after {
  content: "›";
  margin: 0 8px;
  color: var(--kk-border);
}
.kk-bib-breadcrumb a {
  color: var(--kk-accent);
  text-decoration: none;
}
.kk-bib-breadcrumb a:hover { text-decoration: underline; }
.kk-bib-breadcrumb [aria-current="page"] { color: var(--kk-text); font-weight: 500; }

/* Arama kutusu — kaynaklar içinde anlık filtre */
.kk-bib-search {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--kk-bg);
  padding: 12px 0;
  margin: 0 0 16px;
  border-bottom: 1px solid var(--kk-border);
}
.kk-bib-search-input {
  width: 100%;
  padding: 12px 14px;
  font-size: 14px;
  font-family: inherit;
  color: var(--kk-text);
  background: var(--kk-card);
  border: 1px solid var(--kk-border);
  border-radius: var(--kk-radius);
  box-shadow: var(--kk-shadow);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.kk-bib-search-input:focus {
  outline: none;
  border-color: var(--kk-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kk-accent) 25%, transparent);
}
.kk-bib-search-result {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--kk-muted);
  min-height: 18px;
}
.kk-bib-search-result:empty { min-height: 0; }

/* TOC */
.kk-bib-toc {
  background: var(--kk-card);
  border: 1px solid var(--kk-border);
  border-radius: var(--kk-radius);
  padding: 12px 14px;
  margin: 16px 0 24px;
  font-size: 13px;
  line-height: 1.9;
  color: var(--kk-muted);
}
.kk-bib-toc strong {
  color: var(--kk-text);
  margin-right: 6px;
}
.kk-bib-toc a {
  color: var(--kk-accent);
  text-decoration: none;
  margin: 0 2px;
}
.kk-bib-toc a:hover { text-decoration: underline; }
.kk-bib-nav a, .kk-bib-footer a {
  color: var(--kk-accent);
  text-decoration: none;
}
.kk-bib-nav a:hover, .kk-bib-footer a:hover { text-decoration: underline; }
.kk-bib-section {
  margin: 32px 0;
  padding-top: 24px;
  border-top: 1px solid var(--kk-border);
}
.kk-bib-section h2 {
  font-size: 18px;
  margin: 0 0 16px;
  color: var(--kk-accent);
  scroll-margin-top: 80px;     /* sticky search kutusu altına kaymasın */
}
.kk-bib-section[hidden] { display: none; }
.kk-bib-count {
  font-size: 13px;
  font-weight: normal;
  color: var(--kk-muted);
  margin-left: 4px;
}
.kk-bib-item[hidden] { display: none; }
.kk-bib-subtitle {
  font-size: 14px;
  font-weight: 600;
  color: var(--kk-text);
  margin: 18px 0 8px;
  padding-top: 12px;
  border-top: 1px dashed var(--kk-border);
}
.kk-bib-item {
  margin: 0 0 18px;
  padding: 12px 14px;
  background: var(--kk-card);
  border: 1px solid var(--kk-border);
  border-radius: var(--kk-radius);
}
.kk-bib-item h3 {
  font-size: 15px;
  margin: 0 0 4px;
  font-weight: 600;
  /* Çok uzun Arapça başlıkları 2 satıra sınırlandır; tooltip ile tam isim. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kk-bib-item h3:hover {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}
.kk-bib-meta {
  font-size: 13px;
  color: var(--kk-muted);
  margin: 0 0 4px;
}
.kk-bib-note {
  font-size: 13px;
  color: var(--kk-text);
  margin: 4px 0;
  font-style: italic;
}
.kk-bib-links {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.kk-bib-links li {
  font-size: 13px;
}
.kk-bib-links a {
  color: var(--kk-accent);
  text-decoration: none;
  word-break: break-word;
}
.kk-bib-links a:hover { text-decoration: underline; }
.kk-bib-prose {
  font-size: 14px;
  margin: 0 0 12px;
}
.kk-bib-modern {
  list-style: disc;
  padding-left: 22px;
  font-size: 13px;
  color: var(--kk-text);
}
.kk-bib-modern li { margin: 4px 0; }
.kk-bib-prose-list {
  font-size: 13px;
  color: var(--kk-muted);
  padding-left: 22px;
}
.kk-bib-prose-list li { margin: 6px 0; }
.kk-bib-footer {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--kk-border);
  font-size: 13px;
}
.kk-bib-footer-meta {
  margin-top: 8px;
  color: var(--kk-muted);
  font-size: 12px;
}

/* Scroll-to-top floating button */
.kk-bib-totop {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--kk-accent);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  box-shadow: var(--kk-shadow-lg);
  z-index: 100;
  transition: transform 200ms ease, background 150ms ease;
}
.kk-bib-totop:hover {
  background: var(--kk-accent-dark);
  transform: translateY(-2px);
}
.kk-bib-totop:focus-visible {
  outline: 3px solid var(--kk-focus);
  outline-offset: 2px;
}
.kk-bib-totop[hidden] { display: none; }

/* Sticky TOC on desktop (≥1100px): kaynakça TOC kenarda dursun */
@media (min-width: 1100px) {
  .kk-bib {
    max-width: 1140px;
    display: grid;
    grid-template-columns: 240px 1fr;
    column-gap: 32px;
    align-items: start;
  }
  .kk-bib-breadcrumb,
  .kk-bib-header,
  .kk-bib-search { grid-column: 1 / -1; }
  .kk-bib-toc {
    position: sticky;
    top: 12px;
    grid-column: 1;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    margin: 0;
    font-size: 12px;
    line-height: 1.7;
    display: block;
  }
  .kk-bib-toc strong { display: block; margin-bottom: 8px; }
  .kk-bib-toc a {
    display: block;
    padding: 2px 0;
    margin: 0;
  }
  .kk-bib-section,
  .kk-bib-section + .kk-bib-section,
  main > .kk-bib-section,
  .kk-bib-footer { grid-column: 2; }
}

@media (max-width: 720px) {
  .kk-bib { padding: 16px 12px 64px; }
  .kk-bib-header h1 { font-size: 22px; }
  .kk-bib-section h2 { font-size: 16px; }
  .kk-bib-totop { bottom: 16px; right: 16px; width: 40px; height: 40px; }
}
.kk-bib-toc {
  background: var(--kk-card);
  border: 1px solid var(--kk-border);
  border-radius: var(--kk-radius);
  padding: 16px 20px;
  margin: 24px 0;
}
.kk-bib-toc h2 {
  font-size: 15px;
  margin: 0 0 10px;
  color: var(--kk-accent);
}
.kk-bib-toc ol {
  margin: 0;
  padding-left: 24px;
  font-size: 13px;
  columns: 2;
  column-gap: 24px;
}
.kk-bib-toc li { margin: 3px 0; break-inside: avoid; }
.kk-bib-toc a {
  color: var(--kk-text);
  text-decoration: none;
}
.kk-bib-toc a:hover { color: var(--kk-accent); text-decoration: underline; }
@media (max-width: 600px) {
  .kk-bib-toc ol { columns: 1; }
}

@media (max-width: 720px) {
  .kk-grid { grid-template-columns: 1fr; }
  /* Mobile font 26px ama line-height 2.2'de tutuyoruz; KFGQPC harekeleri rahat. */
  .kk-aya { font-size: 26px; line-height: 2.2; padding: 12px 6px; }
  .kk-header h1 { font-size: 22px; }
  /* Mobile'da sticky toolbar → label'lar full-width, 4 satır kaplayıp ekranın
     yarısını boğar. Mobil scroll zaten kısa, sticky kazancı yok. */
  .kk-toolbar { padding: 10px; gap: 8px; position: static; }
  .kk-select { min-width: 0; width: 100%; }
  .kk-toolbar label { width: 100%; }
}

/* ---------- PR2 ---------- */

/* Belirgin focus ring — klavye kullanıcısı için temel ergonomi.
   Mouse fokusu bunu tetiklemez (focus-visible). */
:focus-visible {
  outline: 3px solid var(--kk-focus);
  outline-offset: 2px;
  border-radius: var(--kk-radius);
}

/* Tema cycle butonu — yuvarlak ikon, diğer butonlardan ayrışsın */
.kk-btn-ghost {
  background: transparent;
  color: var(--kk-accent);
  border: 1px solid var(--kk-border);
  font-size: 16px;
  font-weight: 700;
  padding: 0;
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;        /* Yuvarlak — daha rafine */
  box-shadow: none;
}
.kk-btn-ghost:hover:not(:disabled) {
  background: color-mix(in srgb, var(--kk-accent) 8%, transparent);
  color: var(--kk-accent-dark);
  border-color: var(--kk-accent);
  filter: none;
  transform: rotate(15deg);  /* Tema değişiyor hissi */
}

/* Toast */
.kk-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--kk-toast-bg);
  color: var(--kk-toast-text);
  font-size: var(--kk-text-sm);
  padding: 10px 16px;
  border-radius: var(--kk-radius);
  box-shadow: var(--kk-shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease,
              background-color 200ms ease, color 200ms ease;
  z-index: 1100;
  max-width: 90vw;
}
.kk-toast.kk-toast-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Reduced motion: tüm transition + animation'ları kıs (PR3 globalize) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Print: akademisyen kıraat karşılaştırmasını yazdırmak isteyebilir.
   Toolbar/toast/skip-link gizli, tek kolon, siyah-beyaz kontrast. */
@media print {
  .kk-toolbar,
  .kk-toast,
  .kk-skip {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
  main {
    max-width: none;
    padding: 0;
  }
  .kk-header h1 {
    color: #000;
    font-size: 18px;
    margin-bottom: 12px;
  }
  .kk-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .kk-card {
    background: #fff;
    border: 1px solid #000;
    box-shadow: none;
    /* Sayfa kırılımı kart sınırında olsun (ayet ortadan kesilmesin) */
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .kk-card.kk-diff {
    background: #fff;
    border-style: dashed;
  }
  .kk-aya {
    color: #000;
    font-size: 24px;
    line-height: 2.2;
  }
  .kk-rivayet-name { color: #000; }
  .kk-rivayet-imam,
  .kk-page-info { color: #444; }
  .kk-sura-info {
    color: #000;
    font-size: 12px;
    margin-bottom: 12px;
  }
  .kk-sura-info strong { color: #000; }
  /* URL'i ayet metninin yanına koymak yerine print sırasında kart altına ekle.
     a[href] içeriği zaten kart-aya'da değil — bu kural pasif kalsın, ileride
     export linkleri eklenirse aktive olur. */
}

/* ============================================================
   MOBILE RESPONSIVE — 2026-05-23 — Audio karşılaştırma paneli
   Masaüstü değişmez (max-width: 900px).
   Hedef class'lar: kk-pp-audio-slot, kk-pp-audio-btn, kk-player-*.
   Spec'teki compare-panels / compare-panel generic selektörleri
   savunma amaçlı bırakıldı (gelecekteki refactor için).
   ============================================================ */
@media (max-width: 900px) {
  /* Audio slot — pinned-bottom karşılaştırma alanı */
  .kk-pp-audio-slot,
  .compare-panels,
  [class*="compare-grid"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .kk-pp-audio-slot,
  .compare-panel,
  [class*="compare-pane"] {
    padding: 14px !important;
  }
  /* Native audio element — full width */
  .kk-pp-audio-el,
  .compare-panel audio {
    width: 100% !important;
  }
  /* Audio play butonu — 44px touch */
  .kk-pp-audio-btn {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  /* Audio label */
  .kk-pp-audio-label {
    font-size: 11px !important;
  }
  /* Compare controls (varsa) — flex wrap, 44px buton */
  .compare-controls {
    flex-wrap: wrap;
    gap: 8px;
  }
  .compare-controls button {
    flex: 1 1 calc(50% - 4px);
    min-height: 44px;
  }
}