/* Base / Reset / Typography */
:root {
  --color-bg: #f2f5f3;
  --color-surface: #ffffff;
  --color-accent: #1a5f3f;
  --color-accent-alt: #2c5530;
  --color-text: #222;
  --color-muted: #607066;
  --color-border: #d8e2dc;
  --color-focus: #0b7d53;
  --color-danger: #7d0b0b;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 2px 8px rgba(0,0,0,.12);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --line-height: 1.6;
  --content-max: 980px;
  --font-scale: 1; /* dynamic scaling */
  --font-serif: 'Times New Roman', serif;
  --font-arabic-a: 'Amiri', 'Scheherazade New', 'Noto Naskh Arabic', serif;
  --font-arabic-b: 'Noto Naskh Arabic', 'Amiri', serif;
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
}

[data-theme="dark"] {
  --color-bg: #111613;
  --color-surface: #1b2520;
  --color-accent: #3ca06e;
  --color-accent-alt: #5bc189;
  --color-text: #f2f6f3;
  --color-muted: #a0b3a6;
  --color-border: #2d3a33;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.55);
  --shadow-md: 0 2px 10px rgba(0,0,0,.6);
}

/* [data-contrast="high"] {
  --color-accent: #005b2f;
  --color-accent-alt: #004121;
  --color-border: #0d0d0d;
  --color-text: #000;
  --color-bg: #ffffff;
  --color-surface: #ffffff;
} */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { padding: 0; margin: 0; }
body {
  font-family: var(--font-serif);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: var(--line-height);
  -webkit-font-smoothing: antialiased;
  font-size: calc(16px * var(--font-scale));
}

img, svg { max-width: 100%; display: block; }

h1,h2,h3,h4 { font-weight: 600; line-height: 1.25; }
:focus { outline: 3px solid var(--color-focus); outline-offset: 2px; }
:focus-visible { outline: 3px solid var(--color-focus); }
:focus:not(:focus-visible) { outline: none; }

.skip-link { position: absolute; left: -999px; top: -999px; background: var(--color-accent); color: #fff; padding: .6rem 1em; z-index: 10000; border-radius: var(--radius-sm); }
.skip-link:focus { left: 1em; top: 1em; }

.container { max-width: var(--content-max); margin: 0 auto; padding: clamp(1rem,2.5vw,2rem); }

#headerYTLogo{
  margin-right: 1vw;
}
#resourceBtn{
  height: 3rem;
}

/* Desktop: navbar at top */
@media (min-width: 768px) {
  header.site-header { position: sticky; top: 0; z-index: 999; background: rgba(255,255,255,.85); backdrop-filter: blur(6px); border-bottom: 1px solid var(--color-border); }
  [data-theme="dark"] header.site-header { background: rgba(27,37,32,.9); }
}

/* Mobile: navbar at bottom */
@media (max-width: 767px) {
  header.site-header {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--color-border);
    border-bottom: none;
    box-shadow: var(--shadow-md);
    width: 100vw;
  }
  [data-theme="dark"] header.site-header { background: rgba(27,37,32,.95); }

  /* Add bottom padding to body to prevent content overlap */
  body { padding-bottom: 80px; }

  #headerYTLogo{
    margin-right: 3.2vw;
  }
}

.navbar { display: flex; align-items: center; gap: 1em; min-height: 56px; }
.navbar-brand { font-size: 1.2em; font-weight: 700; color: var(--color-accent); text-decoration: none; letter-spacing: .5px; }

.nav-flex { display: flex; gap: .75em; align-items: center; margin-left: auto; }

/* Mobile navbar adjustments */
@media (max-width: 767px) {
  .navbar {
    justify-content: space-between;
    gap: .5em;
    min-height: 60px;
    padding: 0 1rem;
  }

  .navbar-brand {
    display: none;
    font-size: 1em;
    flex-shrink: 0;
  }

  .nav-flex {
    gap: .4em;
    margin-left: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .reading-settings {
    gap: .3em;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
  }

  .reading-settings button {
    padding: .4rem .6em;
    font-size: .8rem;
    min-width: 36px;
    min-height: 36px;
  }

  .theme-toggle-group {
    display: flex;
    align-items: center;
    gap: .2em;
  }

  .font-scale-display {
    font-size: .7em;
    min-width: 20px;
    text-align: center;
  }
}

button, .btn { font: inherit; cursor: pointer; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); padding: .55rem .85em; border-radius: var(--radius-sm); display: inline-flex; gap: .5em; align-items: center; line-height: 1.1; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); }
button:hover, .btn:hover { background: var(--color-accent); color: #fff; }
button[aria-pressed="true"], .btn.active { background: var(--color-accent-alt); color: #fff; }

.icon { width: 1.1em; height: 1.1em; fill: currentColor; }

.nav-sections, .nav-backdrop { display: none !important; }

@media (min-width: 980px) { header.site-header { backdrop-filter: blur(4px); } }

main { padding-block: 1rem 3em; }

.reading-tools { display: flex; flex-wrap: wrap; gap: .5em; margin-top: .5em; }

.hero { text-align: center; margin: 0 0 1.5em; padding: 1.5rem 1rem 2em; background: linear-gradient(135deg,var(--color-surface),rgba(255,255,255,.5)); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.hero h1 { font-size: clamp(1.8rem,5vw,2.6rem); margin: 0 0 .75em; color: var(--color-accent); }
.hero p { margin: 0; color: var(--color-muted); }

/* Bölüm kutuları kaldırıldı - akış tabanlı düzen */
.section, .section-header { display: contents; }
.flow > * + * { margin-top: 1.05em; }

.arabic { font-family: var(--font-arabic-a); font-size: 1.7em; direction: rtl; text-align: right; line-height: 2; margin: 1rem 0; padding: 1rem .85em; background: #f3f7f4; border-right: 4px solid var(--color-accent); border-radius: var(--radius-sm); }
[data-theme="dark"] .arabic { background: #25332c; }
.arabic.alt-font { font-family: var(--font-arabic-b); }

.transliteration { font-style: italic; font-size: .94em; color: var(--color-muted); padding: .75rem .85em; background: #eef6f0; border-left: 3px solid var(--color-accent-alt); border-radius: var(--radius-sm); }
[data-theme="dark"] .transliteration { background: #223128; }
.translation { font-size: .95em; line-height: 1.7; padding: .85rem .9em; background: #f7fbf8; border-left: 3px solid var(--color-accent); border-radius: var(--radius-sm); }
[data-theme="dark"] .translation { background: #1f2c25; }

.repetition { text-align: center; font-weight: 600; color: var(--color-accent); margin: 1.2rem 0 .6em; }

.names-grid { column-gap: 1.3em; font-weight: 600; font-size: .9em; line-height: 1.6; text-align: justify;}

footer.site-footer { margin-top: 3em; text-align: center; font-size: .8em; color: var(--color-muted); padding: 2rem 0 4em; }

.tools-row { display: flex; gap: .4em; flex-wrap: wrap; }

.badge { display: inline-block; background: var(--color-accent); color: #fff; padding: .2rem .55rem .3em; font-size: .65em; text-transform: uppercase; letter-spacing: .5px; border-radius: var(--radius-sm); }

.inline-note { font-style: italic; color: var(--color-muted); font-size: .75em; }

.back-to-top { position: fixed; right: 1em; bottom: 5em; background: var(--color-accent); color: #fff; border: none; border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 1.1em; box-shadow: var(--shadow-md); cursor: pointer; opacity: 0; transform: translateY(10px); transition: opacity var(--transition-base), transform var(--transition-base); }
.back-to-top.show { opacity: 1; transform: translateY(0); }

/* Mobile: adjust back-to-top position to avoid navbar and audio player */
@media (max-width: 767px) {
  .back-to-top {
    bottom: 160px; /* Above the bottom navbar and audio player */
  }
}

/* Floating Audio Player */
.floating-audio-player {
  position: fixed;
  right: 1em;
  bottom: 1em;
  z-index: 998;
  display: flex;
  align-items: center;
  gap: .5em;
}

.floating-audio-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4em;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.floating-audio-btn:hover {
  background: var(--color-accent-alt);
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(26, 95, 63, 0.3);
}

.floating-audio-btn:active {
  transform: scale(0.95);
}

.floating-audio-btn.playing {
  background: var(--color-accent-alt);
}

.floating-audio-btn .play-icon,
.floating-audio-btn .pause-icon {
  transition: opacity var(--transition-fast);
}

.floating-audio-btn .pause-icon {
  opacity: 0;
  position: absolute;
}

.floating-audio-btn.playing .play-icon {
  opacity: 0;
}

.floating-audio-btn.playing .pause-icon {
  opacity: 1;
}

/* Mobile: adjust floating audio player position */
@media (max-width: 767px) {
  .floating-audio-player {
    bottom: 100px; /* Above the bottom navbar */
  }

  .floating-audio-btn {
    width: 48px;
    height: 48px;
    font-size: 1.2em;
  }
}

/* Hide original audio player */
.audio-player { display: none; }

/* Language Dropdown */
.language-dropdown,
.resource-dropdown {
  position: relative;
  display: inline-block;
}

.language-toggle,
.resource-toggle {
  position: relative;
  padding-right: 1.5em;
}

.language-toggle::after,
.resource-toggle::after {
  content: '▼';
  position: absolute;
  right: 0.5em;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.7em;
  transition: transform var(--transition-fast);
  pointer-events: none;
}

.language-dropdown[aria-expanded="true"] .language-toggle::after,
.resource-dropdown[aria-expanded="true"] .resource-toggle::after {
  transform: translateY(-50%) rotate(180deg);
}

.language-options,
.resource-options {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  min-width: 120px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all var(--transition-base);
}

.language-dropdown[aria-expanded="true"] .language-options,
.resource-dropdown[aria-expanded="true"] .resource-options {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.language-option,
.resource-link {
  display: block;
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: none;
  background: transparent;
  text-align: left;
  font-size: 0.9em;
  cursor: pointer;
  transition: background var(--transition-fast);
  border-radius: 0;
  text-decoration: none;
  color: var(--color-text);
}

.language-option:hover,
.language-option:focus,
.resource-link:hover,
.resource-link:focus {
  background: var(--color-accent);
  color: #fff;
}

.language-option:first-child,
.resource-link:first-child {
  border-top-left-radius: var(--radius-sm);
  border-top-right-radius: var(--radius-sm);
}

.language-option:last-child,
.resource-link:last-child {
  border-bottom-left-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
}

.language-option[aria-selected="true"] {
  background: var(--color-accent-alt);
  color: #fff;
}

/* Mobile adjustments for language dropdown */
@media (max-width: 767px) {
  .language-options,
  .resource-options {
    top: auto;
    bottom: 100%;
    right: -10px;
    min-width: 100px;
    transform: translateY(8px);
  }

  .language-dropdown[aria-expanded="true"] .language-options,
  .resource-dropdown[aria-expanded="true"] .resource-options {
    transform: translateY(0);
  }

  .language-option,
  .resource-link {
    padding: 0.7rem 0.6rem;
    font-size: 0.8rem;
  }

  /* Reverse the arrow direction for mobile */
  .language-toggle::after,
  .resource-toggle::after {
    content: '▲';
  }

  .language-dropdown[aria-expanded="true"] .language-toggle::after,
  .resource-dropdown[aria-expanded="true"] .resource-toggle::after {
    transform: translateY(-50%) rotate(180deg);
  }
}

.reading-settings { display: flex; gap: .4em; align-items: center; flex-wrap: wrap; }
.reading-settings label { font-size: .7em; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--color-muted); }

/* Print styles */
/* RTL layout for Arabic */
[dir="rtl"] {
  text-align: right;
}

[dir="rtl"] .navbar {
  flex-direction: row-reverse;
}

[dir="rtl"] .nav-flex {
  margin-left: 0;
  margin-right: auto;
}

[dir="rtl"] .arabic {
  text-align: right;
  border-right: none;
  border-left: 4px solid var(--color-accent);
}

[dir="rtl"] .transliteration,
[dir="rtl"] .translation {
  border-left: none;
  border-right: 3px solid var(--color-accent-alt);
}

[dir="rtl"] .back-to-top {
  right: auto;
  left: 1em;
}

@media print {
  header.site-header, .reading-tools, .back-to-top, .nav-backdrop, .nav-sections, .tools-row, .skip-link { display: none !important; }
  body { background: #fff; color: #000; font-size: 14px; line-height: 16px; }
  .section { box-shadow: none; border: 0; background: none; page-break-inside: avoid; }
  .arabic { background: none; border: none; }
  .translation, .transliteration { background: none; border: none; }
  footer.site-footer { margin-top: 1em; }
  .floating-audio-player{display: none;}
}