/* ============================================================
   reading-themes.css → themes.css
   Çoklu tema + fonksiyonel katmanlar (Bionic / Prompter)
   Scope: html[data-theme="X"] — apple-mode.css ile çakışmaz
   apple-mode.css'ten SONRA yüklenmeli (override sırası)
   Versiyon: 20260531a
   ============================================================ */

/* ──────────────────────────────────────────────────────────────
   1. E-INK / KAĞIT TEMASI  (data-theme="eink")
   Kindle Sepia benzeri; amber karaoke highlight
   ────────────────────────────────────────────────────────────── */
html[data-theme="eink"] {
  --bg:      #f0ede4;
  --bg2:     #e8e4da;
  --panel:   #ede8dc;
  --line:    rgba(95,75,50,0.15);
  --accent:  #7a5230;
  --text:    #5f4b32;
  --muted:   rgba(95,75,50,0.55);
  --paper:   #fbf0d9;
  --ink:     #5f4b32;
  --ink-dark:#2b2118;
  --hl:      #e8c44a;
  --hl-soft: #f5ead0;
  --rec:     #c0392b;
  --rail-w:  9px;
  --dock:    80px;
}
html[data-theme="eink"] body {
  background: #f0ede4;
  color: #5f4b32;
}
html[data-theme="eink"] #paper {
  background:    #fbf0d9;
  color:         #5f4b32;
  font-family:   'Iowan Old Style', Georgia, 'Times New Roman', serif;
  font-size:     17.5px;
  line-height:   1.75;
  letter-spacing: 0.015em;
  border-radius: 0;
  box-shadow:    0 1px 4px rgba(95,75,50,0.08);
  margin:        0 9px;
}
html[data-theme="eink"] #paper p {
  font-size:      1.04rem !important;
  line-height:    1.78 !important;
  letter-spacing: 0.01em !important;
  color:          #5f4b32 !important;
}
html[data-theme="eink"] #paper h1 {
  color:       #3d2810 !important;
  font-size:   1.5rem !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
}
html[data-theme="eink"] #paper h2 {
  color:          #4a3520 !important;
  border-bottom:  1px solid rgba(95,75,50,0.15);
  padding-bottom: 0.4rem;
}
html[data-theme="eink"] #paper blockquote {
  border-left: 3px solid rgba(95,75,50,0.25) !important;
  color:       #4a3520 !important;
}
html[data-theme="eink"] #paper hr {
  border-top: 1px solid rgba(95,75,50,0.20) !important;
}
@media (min-width: 760px) {
  html[data-theme="eink"] #paper {
    max-width: 62ch;
    margin:    0 auto;
  }
}

/* eink karaoke */
html[data-theme="eink"] .w {
  opacity:    0.60;
  transition: background-color 100ms ease, opacity 100ms ease;
  padding:    0 0.5px;
  border-radius: 3px;
}
html[data-theme="eink"] .w.active {
  background:   #e8c44a;
  color:        #2b1a05;
  opacity:      1;
  box-shadow:   0 1px 0 #c8962a, 0 0 0 1px rgba(200,150,42,0.40);
  border-radius: 3px;
  /* font-size / font-weight ASLA değişmez */
}
html[data-theme="eink"] .w.read {
  background:   rgba(95,75,50,0.10);
  opacity:      0.40;
}
html[data-theme="eink"] .sent-active {
  background:  rgba(232,196,68,0.22);
  border-radius: 5px;
  box-shadow:  0 0 0 2px rgba(232,196,68,0.28);
}

/* eink chrome */
html[data-theme="eink"] #sticky-header {
  background:      rgba(240,237,228,0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom:   1px solid rgba(95,75,50,0.12);
  color:           #5f4b32;
}
html[data-theme="eink"] #dock {
  background:  rgba(235,230,218,0.97);
  border-top:  1px solid rgba(95,75,50,0.18);
  box-shadow:  none;
}
html[data-theme="eink"] .dock-play {
  background: #7a5230;
  box-shadow: 0 2px 8px rgba(95,75,50,0.40);
}
html[data-theme="eink"] .dock-play svg {
  fill: #fff8ee;
}
html[data-theme="eink"] .sheet {
  background:    #f0ede4;
  border:        1px solid rgba(95,75,50,0.18);
  border-radius: 16px 16px 0 0;
  box-shadow:    0 -4px 20px rgba(95,75,50,0.15);
}
html[data-theme="eink"] .m-btn {
  background:    rgba(95,75,50,0.06);
  border:        1px solid rgba(95,75,50,0.18);
  color:         #4a3520;
  border-radius: 10px;
}
html[data-theme="eink"] #rail-thumb {
  background: rgba(95,75,50,0.30);
}
html[data-theme="eink"] #reader::before {
  background: linear-gradient(180deg, rgba(240,237,228,0.92) 55%, transparent);
}
html[data-theme="eink"] #reader::after {
  background: linear-gradient(0deg, rgba(240,237,228,0.72) 0%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="eink"] .w,
  html[data-theme="eink"] .w.active,
  html[data-theme="eink"] .w.read,
  html[data-theme="eink"] .sent-active {
    transition-duration: 0.01ms !important;
    animation-duration:  0.01ms !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   2. OLED / GECE TEMASI  (data-theme="oled")
   AMOLED true-black; amber metin; glow yok
   ────────────────────────────────────────────────────────────── */
html[data-theme="oled"] {
  --bg:      #000000;
  --bg2:     #050503;
  --panel:   #0d0b08;
  --line:    rgba(232,213,168,0.10);
  --accent:  #c8913a;
  --text:    #e8d5a8;
  --muted:   rgba(232,213,168,0.55);
  --paper:   #000000;
  --ink:     #e8d5a8;
  --hl:      #d4a84b;
  --hl-soft: rgba(200,145,58,0.18);
  --rec:     #ff453a;
  --rail-w:  9px;
  --dock:    80px;
}
html[data-theme="oled"] body {
  background: #000000;
  color:      #e8d5a8;
}
html[data-theme="oled"] #paper {
  background:     #000000;
  color:          #e8d5a8;
  font-family:    -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  font-size:      17px;
  font-weight:    300;
  line-height:    1.82;
  letter-spacing: 0.018em;
  border-radius:  0;
  box-shadow:     none;
  margin:         0;
  padding:        16px;
}
html[data-theme="oled"] #paper p {
  color:          #e8d5a8 !important;
  line-height:    1.82 !important;
  letter-spacing: 0.016em !important;
  font-weight:    300 !important;
}
html[data-theme="oled"] #paper h1,
html[data-theme="oled"] #paper h2 {
  color:       #f0e4c4 !important;
  font-weight: 600 !important;
}
@media (min-width: 760px) {
  html[data-theme="oled"] #paper {
    max-width: 62ch;
    margin:    0 auto;
    padding:   16px;
  }
}

/* oled karaoke */
html[data-theme="oled"] .w {
  opacity:      0.50;
  transition:   background-color 110ms ease, opacity 110ms ease;
  padding:      0 0.5px;
  border-radius: 4px;
}
html[data-theme="oled"] .w.active {
  background:   #c8913a;
  color:        #0a0600;
  opacity:      1;
  box-shadow:   0 0 0 1px rgba(200,145,58,0.40);
  border-radius: 4px;
  /* text-shadow / glow YASAK — AMOLED piksel ışıması */
  /* font-size / font-weight ASLA değişmez */
}
html[data-theme="oled"] .w.read {
  background: rgba(200,145,58,0.08);
  opacity:    0.32;
}
html[data-theme="oled"] .sent-active {
  background: rgba(200,145,58,0.15);
  box-shadow: 0 0 0 2px rgba(200,145,58,0.20);
}

/* oled chrome */
html[data-theme="oled"] #sticky-header {
  background:      rgba(0,0,0,0.92);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border-bottom:   1px solid rgba(232,213,168,0.08);
  color:           #e8d5a8;
}
html[data-theme="oled"] #dock {
  background: rgba(0,0,0,0.96);
  border-top: 1px solid rgba(232,213,168,0.10);
  box-shadow: none;
}
html[data-theme="oled"] .dock-play {
  background: #c8913a;
  box-shadow: 0 2px 10px rgba(200,145,58,0.35);
}
html[data-theme="oled"] .dock-play svg {
  fill: #0a0600;
}
html[data-theme="oled"] .sheet {
  background:    #0a0805;
  border:        1px solid rgba(232,213,168,0.10);
  border-radius: 18px 18px 0 0;
}
html[data-theme="oled"] .m-btn {
  background: rgba(232,213,168,0.04);
  border:     1px solid rgba(232,213,168,0.12);
  color:      #e8d5a8;
}
html[data-theme="oled"] #rail-thumb {
  background: rgba(232,213,168,0.25);
}
html[data-theme="oled"] #reader::before {
  background: linear-gradient(180deg, rgba(0,0,0,0.90) 55%, transparent);
}
html[data-theme="oled"] #reader::after {
  background: linear-gradient(0deg, rgba(0,0,0,0.80) 0%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="oled"] .w,
  html[data-theme="oled"] .w.active,
  html[data-theme="oled"] .w.read,
  html[data-theme="oled"] .sent-active {
    transition-duration: 0.01ms !important;
    animation-duration:  0.01ms !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   3. ERİŞİLEBİLİR TEMA  (data-theme="a11y")
   Disleksi-dostu; Atkinson Hyperlegible Next; WCAG AAA
   ────────────────────────────────────────────────────────────── */
html[data-theme="a11y"] {
  --bg:      #e8e8a0;
  --bg2:     #dede90;
  --panel:   #1a1a0a;
  --line:    rgba(26,20,0,0.18);
  --accent:  #7a5200;
  --text:    #1a1400;
  --muted:   rgba(26,20,0,0.55);
  --paper:   #FAFAC8;
  --ink:     #1A1400;
  --hl:      #FFD700;
  --hl-soft: #FFE87A;
  --rec:     #c0392b;
  --rail-w:  9px;
  --dock:    80px;
}
html[data-theme="a11y"] body {
  background: #e8e8a0;
}
html[data-theme="a11y"] #paper {
  background:         #FAFAC8;
  color:              #1A1400;
  font-family:        'Atkinson Hyperlegible Next Variable', 'Atkinson Hyperlegible', sans-serif;
  font-size:          20px;
  font-weight:        400;
  line-height:        2.0;
  letter-spacing:     0.035em;
  word-spacing:       0.16em;
  font-variant-ligatures: none;
  text-align:         left;
  border-radius:      8px;
  max-width:          34em;
  margin-inline:      auto;
}
html[data-theme="a11y"] #paper p {
  color:          #1A1400 !important;
  font-weight:    600 !important;
  line-height:    2.0 !important;
  margin-bottom:  2.4em !important;
  letter-spacing: 0.035em !important;
  word-spacing:   0.16em !important;
  text-align:     left !important;
  hyphens:        none !important;
  orphans:        3;
  widows:         3;
}

/* a11y karaoke */
html[data-theme="a11y"] .w {
  transition:   background-color 100ms ease, opacity 100ms ease;
  padding:      0 0.5px;
  border-radius: 4px;
}
html[data-theme="a11y"] .w.active {
  background:          #FFD700;
  color:               #1A1400;
  box-shadow:          0 3px 0 #B8860B, 0 0 0 2px rgba(184,134,11,0.35);
  border-radius:       4px;
  text-decoration:     underline;
  text-decoration-color: #8B6914;
  text-underline-offset: 2px;
  text-decoration-thickness: 2px;
  /* font-size / font-weight ASLA değişmez */
}
html[data-theme="a11y"] .w.read {
  background: rgba(255,215,0,0.15);
  opacity:    0.50;
}
html[data-theme="a11y"] .sent-active {
  background:   rgba(255,215,0,0.30);
  border-radius: 5px;
  box-shadow:   0 0 0 2px rgba(184,134,11,0.30);
}

/* a11y touch targets */
html[data-theme="a11y"] .corner-btn {
  width:      44px;
  height:     44px;
  min-width:  44px;
  min-height: 44px;
}
html[data-theme="a11y"] .m-btn {
  min-height: 56px;
  font-size:  17px;
  font-weight: 700;
  padding:    18px 16px;
}

/* a11y chrome */
html[data-theme="a11y"] #sticky-header {
  background:      rgba(232,232,160,0.96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom:   1px solid rgba(26,20,0,0.15);
  color:           #1a1400;
}
html[data-theme="a11y"] #dock {
  background: rgba(26,26,10,0.97);
  border-top: 1px solid rgba(26,20,0,0.20);
}
html[data-theme="a11y"] .dock-play {
  background: #7a5200;
  box-shadow: 0 2px 8px rgba(122,82,0,0.50);
}
html[data-theme="a11y"] .dock-play svg {
  fill: #FAFAC8;
}
html[data-theme="a11y"] .sheet {
  background:    #232310;
  border:        1px solid rgba(26,20,0,0.18);
  border-radius: 16px 16px 0 0;
}
html[data-theme="a11y"] .m-btn {
  background: rgba(250,250,200,0.08);
  border:     1px solid rgba(26,20,0,0.20);
  color:      #FAFAC8;
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="a11y"] .w,
  html[data-theme="a11y"] .w.active,
  html[data-theme="a11y"] .w.read,
  html[data-theme="a11y"] .sent-active {
    transition: none !important;
    animation:  none !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   4. EDİTORYAL / GAZETE TEMASI  (data-theme="editorial")
   NYT/Guardian benzeri; serif tipografi; bordo vurgu
   ────────────────────────────────────────────────────────────── */
html[data-theme="editorial"] {
  --bg:      #2B2318;
  --bg2:     #1E1A12;
  --panel:   #231F18;
  --line:    rgba(26,25,20,0.15);
  --accent:  #8B1A1A;
  --text:    #1A1914;
  --muted:   #7A6E5A;
  --paper:   #F5F2E8;
  --ink:     #1A1914;
  --hl:      #FFF3A0;
  --hl-soft: rgba(255,243,160,0.35);
  --rec:     #c0392b;
  --rail-w:  9px;
  --dock:    80px;
}
html[data-theme="editorial"] body {
  background: #2B2318;
}
html[data-theme="editorial"] #paper {
  background:     #F5F2E8;
  color:          #1A1914;
  font-family:    Charter, 'Bitstream Charter', 'Sitka Text', Cambria, Georgia, 'Times New Roman', serif;
  font-size:      18px;
  line-height:    1.68;
  letter-spacing: 0.005em;
  border-radius:  0;
  box-shadow:     0 1px 4px rgba(26,25,20,0.08);
  margin:         0 9px;
  font-variant-numeric: oldstyle-nums;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1, 'onum' 1;
}
html[data-theme="editorial"] #paper p {
  font-size:   1.02rem !important;
  line-height: 1.70 !important;
  color:       #1A1914 !important;
  margin-bottom: 0 !important;
}
/* Baskı gazete stili paragraf girintisi */
html[data-theme="editorial"] #paper p + p {
  text-indent: 1.2em !important;
  margin-top:  0 !important;
}
html[data-theme="editorial"] #paper p:first-of-type {
  text-indent: 0 !important;
}
html[data-theme="editorial"] #paper h1 {
  font-size:      1.75rem !important;
  line-height:    1.18 !important;
  font-weight:    700 !important;
  letter-spacing: -0.03em !important;
  color:          #1A1914 !important;
  margin-bottom:  0.6rem !important;
}
html[data-theme="editorial"] #paper h1::after {
  content:     '';
  display:     block;
  border-top:  3px double rgba(26,25,20,0.55);
  margin-top:  0.55rem;
}
html[data-theme="editorial"] #paper h2 {
  font-size:      1.3rem !important;
  font-weight:    700 !important;
  letter-spacing: -0.02em !important;
  margin-top:     2.2rem !important;
  padding-top:    1.1rem !important;
  border-top:     1px solid rgba(26,25,20,0.18) !important;
  color:          #1A1914 !important;
}
html[data-theme="editorial"] #paper h3 {
  font-size:      1.1rem !important;
  font-weight:    600 !important;
  letter-spacing: -0.01em !important;
  font-variant-caps: small-caps !important;
  font-feature-settings: 'smcp' 1, 'kern' 1 !important;
}
html[data-theme="editorial"] #paper blockquote {
  border-left:  3px solid #8B1A1A !important;
  padding-left: 1rem !important;
  font-style:   italic !important;
  color:        #4A3F2F !important;
}
html[data-theme="editorial"] #paper hr {
  border:     none !important;
  border-top: 1px solid rgba(26,25,20,0.65) !important;
  margin:     1.7rem 0 !important;
}
/* Justify + tireleme (lang='tr' html'de zaten mevcut) */
@container (inline-size >= 30em) {
  @supports (hyphens: auto) {
    html[data-theme="editorial"] #paper p {
      text-align: justify !important;
      hyphens:    auto !important;
      hyphenate-limit-chars: 6 3 3;
      text-wrap:  pretty;
    }
  }
}
@media (max-width: 420px) {
  html[data-theme="editorial"] #paper p {
    text-align: left !important;
    hyphens:    none !important;
  }
}
@media (min-width: 760px) {
  html[data-theme="editorial"] #paper {
    max-width: 66ch;
    margin:    0 auto;
  }
}

/* Drop-cap (data-dropcap, JS tarafından eklenir — ::first-letter span.w nedeniyle çalışmaz) */
html[data-theme="editorial"] #paper .w[data-dropcap] {
  float:       left !important;
  font-size:   3.8em !important;
  line-height: 0.78 !important;
  margin-right: 0.06em !important;
  margin-top:  0.04em !important;
  font-weight: 700 !important;
  color:       var(--accent) !important;
  font-family: Charter, Georgia, serif !important;
}
html[data-theme="editorial"] #paper .w[data-dropcap].active {
  color: #1A1200 !important;
}

/* editorial karaoke */
html[data-theme="editorial"] .w {
  opacity:      0.65;
  transition:   background-color 120ms ease, opacity 120ms ease;
  padding:      0 0.5px;
  border-radius: 3px;
}
html[data-theme="editorial"] .w.active {
  background:   #FFF3A0;
  color:        #1A1200;
  opacity:      1;
  box-shadow:   0 1px 0 #c8aa00, 0 0 0 1px rgba(200,170,0,0.40);
  border-radius: 3px;
  /* font-size / font-weight ASLA değişmez */
}
html[data-theme="editorial"] .w.read {
  background: rgba(26,25,20,0.08);
  opacity:    0.40;
}
html[data-theme="editorial"] .sent-active {
  background:   rgba(255,243,160,0.25);
  border-radius: 5px;
  box-shadow:   0 0 0 2px rgba(200,170,0,0.25);
}

/* editorial chrome */
html[data-theme="editorial"] #sticky-header {
  background:      rgba(245,242,232,0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom:   1px solid rgba(26,25,20,0.12);
  color:           #1A1914;
  font-family:     Charter, Georgia, serif;
  letter-spacing:  0.04em;
}
html[data-theme="editorial"] #dock {
  background: rgba(35,31,24,0.97);
  border-top: 1px solid rgba(26,25,20,0.25);
}
html[data-theme="editorial"] .dock-play {
  background: #8B1A1A;
  box-shadow: 0 2px 8px rgba(139,26,26,0.40);
}
html[data-theme="editorial"] .dock-play svg {
  fill: #F5F2E8;
}
html[data-theme="editorial"] .sheet {
  background:    #231F18;
  border:        1px solid rgba(26,25,20,0.20);
  border-radius: 16px 16px 0 0;
}
html[data-theme="editorial"] .m-btn {
  background: rgba(245,242,232,0.05);
  border:     1px solid rgba(245,242,232,0.12);
  color:      #F5F2E8;
}
html[data-theme="editorial"] #reader::before {
  background: linear-gradient(180deg, rgba(245,242,232,0.94) 55%, transparent);
}
html[data-theme="editorial"] #reader::after {
  background: linear-gradient(0deg, rgba(245,242,232,0.72) 0%, transparent);
}
/* Hairline bölüm ayraçları */
html[data-theme="editorial"] #paper .yr-section + .yr-section::before {
  content:      '';
  display:      block;
  border-top:   1px solid rgba(26,25,20,0.15);
  margin:       0.5rem 1.4rem;
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="editorial"] .w,
  html[data-theme="editorial"] .w.active,
  html[data-theme="editorial"] .w.read,
  html[data-theme="editorial"] .sent-active {
    transition-duration: 0.01ms !important;
    animation-duration:  0.01ms !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   5. BİONİC OKUMA  (data-bionic="on")
   Tema bağımsız; karaoke ile birlikte çalışır
   .bh = bold head, .bt = tail
   ────────────────────────────────────────────────────────────── */
html[data-bionic="on"] .w .bh {
  font-weight: 800;
}
html[data-bionic="on"] .w .bt {
  opacity:        0.50;
  letter-spacing: -0.01em; /* bold head genişlemesini dengeler */
}
/* aktif kelimede bold head rengi miras alır */
html[data-bionic="on"] .w.active .bh {
  font-weight: 800;
  color:       inherit;
}
/* aktif indicator */
html[data-bionic="on"] [data-act="bionic"] {
  border-color: var(--accent);
  color:        var(--accent);
}

/* ──────────────────────────────────────────────────────────────
   6. TELEPROMPTER MODU  (data-mode="prompter")
   Tema bağımsız; aktif cümle öne çıkar, diğerleri dim
   Chrome minimize edilir
   ────────────────────────────────────────────────────────────── */

/* Aktif cümle: büyüt (font-size DEĞİŞMEZ — scale kullanılır) */
html[data-mode="prompter"] .sent-active {
  transform:        scale(1.06);
  transform-origin: left center;
  opacity:          1 !important;
  transition:
    transform 220ms cubic-bezier(0.22,1,0.36,1),
    opacity   280ms ease;
}
/* Inaktif paragraflar/listeler: dim + hafif küçült */
html[data-mode="prompter"] #paper p:not(.sent-active),
html[data-mode="prompter"] #paper li:not(.sent-active) {
  opacity:          0.25 !important;
  transform:        scale(0.98);
  transform-origin: left center;
  transition:
    transform 220ms ease,
    opacity   280ms ease;
}

/* Chrome minimize */
html[data-mode="prompter"] #sticky-header {
  opacity:        0;
  pointer-events: none;
  transition:     opacity 200ms ease;
}
html[data-mode="prompter"] #rail {
  opacity: 0;
}
html[data-mode="prompter"] #btn-menu {
  opacity: 0.3;
}
html[data-mode="prompter"] #btn-record {
  opacity: 0.3;
}

/* Dim overlay üst */
html[data-mode="prompter"] #reader::before {
  content:        '';
  position:       fixed;
  top:            0;
  left:           0;
  right:          var(--rail-w);
  height:         38vh;
  background:     linear-gradient(180deg, var(--bg, #0b1310) 0%, transparent 100%);
  pointer-events: none;
  z-index:        15;
}
/* Dim overlay alt */
html[data-mode="prompter"] #reader::after {
  content:        '';
  position:       fixed;
  bottom:         var(--dock);
  left:           0;
  right:          var(--rail-w);
  height:         35vh;
  background:     linear-gradient(0deg, var(--bg, #0b1310) 0%, transparent 100%);
  pointer-events: none;
  z-index:        15;
}

/* Aktif indicator */
html[data-mode="prompter"] [data-act="prompter"] {
  border-color: var(--accent);
  color:        var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  html[data-mode="prompter"] .sent-active,
  html[data-mode="prompter"] #paper p,
  html[data-mode="prompter"] #paper li {
    transition: none !important;
    transform:  none !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   7. TEMA SEÇİCİ SHEET  (#theme-sheet)
   Tema listesi + toggle'lar
   ────────────────────────────────────────────────────────────── */
.theme-list {
  display:        flex;
  flex-direction: column;
  gap:            4px;
  margin-bottom:  12px;
}
.theme-item {
  display:     flex;
  align-items: center;
  gap:         12px;
  background:  rgba(255,255,255,0.04);
  border:      1px solid var(--line);
  border-radius: 12px;
  padding:     14px 16px;
  cursor:      pointer;
  color:       var(--text);
  font-size:   15px;
  font-weight: 500;
  text-align:  left;
  transition:  background 80ms ease, border-color 80ms ease;
}
.theme-item[aria-checked="true"] {
  background:   rgba(62,224,142,0.08);
  border-color: var(--accent);
  color:        var(--accent);
}
.theme-icon {
  font-size:  20px;
  width:      28px;
  text-align: center;
}
.theme-name {
  flex: 1;
}
.theme-check {
  font-size:  14px;
  color:      var(--accent);
  opacity:    0;
  transition: opacity 120ms ease;
}
.theme-item[aria-checked="true"] .theme-check {
  opacity: 1;
}
.appearance-divider {
  height:     1px;
  background: var(--line);
  margin:     12px 0;
}
.toggle-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         12px 4px;
  gap:             12px;
}
.toggle-label {
  font-size: 15px;
  color:     var(--text);
  flex:      1;
}
.toggle-switch {
  width:        50px;
  height:       28px;
  border-radius: 14px;
  border:       0;
  cursor:       pointer;
  background:   rgba(255,255,255,0.12);
  position:     relative;
  transition:   background 200ms ease;
  flex-shrink:  0;
}
.toggle-switch::after {
  content:       '';
  position:      absolute;
  top:           3px;
  left:          3px;
  width:         22px;
  height:        22px;
  border-radius: 50%;
  background:    #fff;
  transition:    transform 200ms cubic-bezier(0.34,1.56,0.64,1);
}
.toggle-switch[aria-checked="true"] {
  background: var(--accent);
}
.toggle-switch[aria-checked="true"]::after {
  transform:  translateX(22px);
  background: #06231a;
}

/* ──────────────────────────────────────────────────────────────
   8. AURORA / CAM TEMASI  (data-theme="aurora")
   Hareketli mor-indigo-teal aurora mesh; frosted glass chrome
   Additive + scoped — diğer temalara asla dokunmaz
   ────────────────────────────────────────────────────────────── */

/* --- Keyframe tanımları (aurora temasına özgü) --- */
@keyframes aurora-drift-a {
  0%,100% { transform: translate3d(0, 0, 0) scale(1); }
  33%     { transform: translate3d(6vw, -4vh, 0) scale(1.08); }
  66%     { transform: translate3d(-5vw, 5vh, 0) scale(0.94); }
}
@keyframes aurora-drift-b {
  0%,100% { transform: translate3d(0, 0, 0); }
  40%     { transform: translate3d(-8vw, 3vh, 0); }
  70%     { transform: translate3d(4vw, -6vh, 0); }
}
@keyframes aurora-drift-c {
  0%,100% { transform: translate3d(0, 0, 0) scale(1); }
  25%     { transform: translate3d(5vw, 4vh, 0) scale(1.05); }
  60%     { transform: translate3d(-4vw, -3vh, 0) scale(0.96); }
}

/* --- Blob katmanı konteyneri --- */
#aurora-layer {
  position:       fixed;
  inset:          0;
  z-index:        -1;
  pointer-events: none;
  overflow:       hidden;
  -webkit-transform: translateZ(0);
  transform:      translateZ(0);
  isolation:      isolate;
}

/* --- Aurora blob'ları (sadece transform animasyonu; filter sabit) --- */
.aurora-blob {
  position:      fixed;
  border-radius: 50%;
  z-index:       -1;
  pointer-events: none;
  will-change:   transform;
}
.aurora-blob-1 {
  width:      65vmax;
  height:     65vmax;
  top:        -10%;
  left:       -15%;
  background: radial-gradient(circle, rgba(124,58,237,0.72) 0%, transparent 68%);
  filter:     blur(80px);
  opacity:    0.60;
  animation:  aurora-drift-a 18s ease-in-out infinite;
}
.aurora-blob-2 {
  width:      60vmax;
  height:     60vmax;
  top:        40%;
  right:      -20%;
  background: radial-gradient(circle, rgba(6,182,212,0.65) 0%, transparent 68%);
  filter:     blur(100px);
  opacity:    0.50;
  animation:  aurora-drift-b 24s ease-in-out infinite 3s;
}
.aurora-blob-3 {
  width:      55vmax;
  height:     55vmax;
  bottom:     -15%;
  left:       30%;
  background: radial-gradient(circle, rgba(236,72,153,0.55) 0%, transparent 68%);
  filter:     blur(90px);
  opacity:    0.45;
  animation:  aurora-drift-c 31s ease-in-out infinite 7s;
}

/* --- Body zemin: koyu mor-gece taban + statik mesh --- */
html[data-theme="aurora"] body {
  background: #080420;
  background-image:
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(100,60,200,0.30) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 80% 70%, rgba(60,100,220,0.22) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 50% 10%, rgba(160,80,240,0.18) 0%, transparent 60%);
  color: #f0ecff;
}

/* --- #paper: frosted cam okuma kartı (L1 elevation) --- */
html[data-theme="aurora"] #paper {
  background:               rgba(8, 6, 22, 0.88);
  color:                    #f0ecff;
  -webkit-backdrop-filter:  blur(32px) saturate(1.80);
  backdrop-filter:          blur(32px) saturate(1.80);
  border:                   1px solid rgba(180,140,255,0.18);
  border-radius:            16px;
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 1px 0 0 rgba(255,255,255,0.05);
  margin:                   0 8px;
  overflow:                 hidden;
}
html[data-theme="aurora"] #paper p {
  color:       #f0ecff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.45);
}
html[data-theme="aurora"] #paper h1 {
  color: #e8d8ff !important;
}
html[data-theme="aurora"] #paper h2 {
  color:        #ddd0ff !important;
  border-bottom: 1px solid rgba(180,140,255,0.18);
}
html[data-theme="aurora"] #paper blockquote {
  border-left: 3px solid rgba(167,139,250,0.50) !important;
  color:       #c8b8f0 !important;
}
html[data-theme="aurora"] #paper hr {
  border-top: 1px solid rgba(180,140,255,0.20) !important;
}
@media (min-width: 760px) {
  html[data-theme="aurora"] #paper {
    max-width: 64ch;
    margin:    0 auto;
  }
}

/* --- Aurora karaoke kelimeleri --- */
html[data-theme="aurora"] .w {
  opacity:       0.55;
  transition:    background-color 100ms ease, opacity 100ms ease;
  padding:       0 0.5px;
  border-radius: 3px;
  /* font-size / font-weight ASLA değişmez */
}
html[data-theme="aurora"] .w.active {
  background:   linear-gradient(160deg, #c084fc 0%, #818cf8 100%);
  color:        #1a0a2e;
  opacity:      1;
  box-shadow:
    0 0 12px rgba(192,132,252,0.65),
    0 0 0 1.5px rgba(139,92,246,0.50),
    inset 0 1px 0 rgba(255,255,255,0.30);
  border-radius: 5px;
  /* font-size / font-weight ASLA değişmez; transform/filter YOK */
}
html[data-theme="aurora"] .w.read {
  background: rgba(139,92,246,0.10);
  opacity:    0.30;
}
html[data-theme="aurora"] .sent-active {
  background: rgba(167,139,250,0.18);
  border-radius: 5px;
  box-shadow: 0 0 0 2px rgba(139,92,246,0.22);
}

/* --- Sticky header (L2 elevation) --- */
html[data-theme="aurora"] #sticky-header {
  background:
    linear-gradient(180deg, rgba(8,4,20,0.85) 55%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.75);
  backdrop-filter:         blur(20px) saturate(1.75);
  border-bottom:           1px solid rgba(180,140,255,0.10);
  color:                   #e8e0ff;
}

/* --- Dock (L2 elevation, iOS 26 Liquid Glass) --- */
html[data-theme="aurora"] #dock {
  background:              rgba(10,6,30,0.55);
  -webkit-backdrop-filter: blur(28px) saturate(1.90) brightness(1.05);
  backdrop-filter:         blur(28px) saturate(1.90) brightness(1.05);
  border-top:              1px solid rgba(255,255,255,0.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 -12px 40px rgba(0,0,0,0.38);
}
html[data-theme="aurora"] #dock::before {
  background: linear-gradient(90deg, transparent 5%, rgba(200,160,255,0.22) 50%, transparent 95%);
}

/* --- Speed track --- */
html[data-theme="aurora"] #speed-track {
  background:    rgba(255,255,255,0.06);
  border-radius: 20px;
  border:        1px solid rgba(180,140,255,0.14);
}

/* --- Play düğmesi --- */
html[data-theme="aurora"] .dock-play {
  background:
    linear-gradient(145deg, rgba(139,92,246,0.85) 0%, rgba(79,70,229,0.90) 100%);
  box-shadow:
    0 0 16px rgba(139,92,246,0.55),
    0 2px 8px rgba(0,0,0,0.40),
    inset 0 1px 0 rgba(255,255,255,0.25);
}
html[data-theme="aurora"] .dock-play svg {
  fill: #f0ecff;
}

/* --- Corner düğmeleri (menü + kayıt) --- */
html[data-theme="aurora"] .corner-btn {
  color:      #c4b5fd;
  background: rgba(255,255,255,0.04);
  border:     1px solid rgba(180,140,255,0.12);
}
html[data-theme="aurora"] .corner-btn:active {
  background: rgba(139,92,246,0.18);
}

/* --- Rail + thumb --- */
html[data-theme="aurora"] #rail {
  background: rgba(255,255,255,0.04);
}
html[data-theme="aurora"] #rail-thumb {
  background: rgba(167,139,250,0.55);
  box-shadow: 0 0 6px rgba(167,139,250,0.40);
}

/* --- Sheet'ler (L3 elevation — en güçlü blur) --- */
html[data-theme="aurora"] .sheet {
  background:              rgba(10,6,28,0.80);
  -webkit-backdrop-filter: blur(32px) saturate(1.85);
  backdrop-filter:         blur(32px) saturate(1.85);
  border-top:              1px solid rgba(200,160,255,0.18);
  border-radius:           24px 24px 0 0;
  box-shadow:
    0 -10px 50px rgba(0,0,0,0.60),
    inset 0 1px 0 rgba(255,255,255,0.15);
}
html[data-theme="aurora"] .sheet-grip {
  background: rgba(200,160,255,0.30);
}
html[data-theme="aurora"] .sheet h2 {
  color: #e8d8ff;
}

/* --- Sheet menü butonları --- */
html[data-theme="aurora"] .m-btn {
  background:    rgba(255,255,255,0.05);
  border:        1px solid rgba(200,160,255,0.14);
  color:         #d4c4ff;
  border-radius: 12px;
}
html[data-theme="aurora"] .m-btn:active {
  background: rgba(138,80,255,0.14);
}

/* --- Tema seçici item'ları (sheet içinde) --- */
html[data-theme="aurora"] .theme-item {
  background:    rgba(255,255,255,0.04);
  border-color:  rgba(200,160,255,0.14);
  color:         #d4c4ff;
}
html[data-theme="aurora"] .theme-item[aria-checked="true"] {
  background:   rgba(139,92,246,0.18);
  border-color: rgba(167,139,250,0.55);
  color:        #e8d8ff;
}

/* --- Toggle switch (aurora accent) --- */
html[data-theme="aurora"] .toggle-switch[aria-checked="true"] {
  background: rgba(124,58,237,0.80);
  box-shadow: 0 0 8px rgba(124,58,237,0.45);
}
html[data-theme="aurora"] .toggle-switch[aria-checked="true"]::after {
  background: #f0ecff;
}
html[data-theme="aurora"] .toggle-label {
  color: #d4c4ff;
}

/* --- Toast --- */
html[data-theme="aurora"] #toast {
  background:              rgba(10,6,28,0.92);
  -webkit-backdrop-filter: blur(24px) saturate(1.85);
  backdrop-filter:         blur(24px) saturate(1.85);
  border:                  1px solid rgba(200,160,255,0.20);
  color:                   #e8d8ff;
  box-shadow:
    0 4px 20px rgba(0,0,0,0.50),
    inset 0 1px 0 rgba(255,255,255,0.12);
}

/* --- Reader pseudo overlay'ler (üst/alt dim fade) --- */
html[data-theme="aurora"] #reader::before {
  background: linear-gradient(180deg, rgba(8,4,20,0.80) 55%, transparent);
}
html[data-theme="aurora"] #reader::after {
  background: linear-gradient(0deg, rgba(8,4,20,0.65) 0%, transparent);
}

/* --- Kaydırılabilir scroll overflow azalt --- */
html[data-theme="aurora"] #reader {
  background: transparent;
}

/* ----------------------------------------------------------------
   prefers-reduced-motion: blob animasyonları dur, görünüm korunur
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html[data-theme="aurora"] .aurora-blob {
    animation:    none !important;
    will-change:  auto !important;
  }
  html[data-theme="aurora"] .w,
  html[data-theme="aurora"] .w.active,
  html[data-theme="aurora"] .w.read,
  html[data-theme="aurora"] .sent-active {
    transition-duration: 0.01ms !important;
    animation-duration:  0.01ms !important;
  }
}

/* ----------------------------------------------------------------
   prefers-reduced-transparency: backdrop-filter kaldır, opak yüzey
   ---------------------------------------------------------------- */
@media (prefers-reduced-transparency: reduce) {
  html[data-theme="aurora"] #paper {
    background:     rgba(8, 6, 22, 0.97) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  html[data-theme="aurora"] #dock {
    background:     rgba(10,6,30,0.98) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  html[data-theme="aurora"] #sticky-header {
    background:     rgba(8,4,20,0.98) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  html[data-theme="aurora"] .sheet {
    background:     rgba(8,4,24,0.97) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}