:root{
  --bg:#f6f4f2;
  --paper:rgba(255,255,255,.82);
  --ink:#0b1220;
  --muted:rgba(11,18,32,.62);
  --line:rgba(11,18,32,.12);
  --shadow:0 18px 60px rgba(15,23,42,.12);
  --radius:22px;
  --btn:#0b1220;
  --btnText:#fff;
  --btnSoft:rgba(11,18,32,.08);
  --max:980px;
}

/* --- Reset --- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--ink);
  background: radial-gradient(1200px 800px at 20% 10%, #fff 0%, var(--bg) 55%, #efece8 100%);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display","SF Pro Text",
    "Noto Naskh Arabic","Noto Kufi Arabic","Geeza Pro","Tahoma","Arial",sans-serif;
}

/* --- Layout containers --- */
.frame{
  min-height:100%;
  display:flex;
  justify-content:center;
  padding:24px 16px 34px;
}

.reader{
  width:100%;
  max-width:var(--max);
  background:var(--paper);
  backdrop-filter: blur(8px);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.reader-wide{ max-width:1100px; }

.topbar{
  padding:18px 18px 14px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  border-bottom:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.40) 100%);
}

.brand h1{
  margin:0;
  font-size:22px;
  letter-spacing:.2px;
}
.brand small{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-weight:700;
}

/* --- Buttons --- */
.btn{
  border:none;
  outline:none;
  cursor:pointer;
  padding:10px 14px;
  border-radius:14px;
  background:var(--btn);
  color:var(--btnText);
  font-weight:900;
  font-size:14px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  box-shadow: 0 10px 26px rgba(11,18,32,.18);
  transition: transform .12s ease, opacity .12s ease;
}
.btn:active{ transform: translateY(1px) scale(.99); }
.btn.secondary{
  background:rgba(255,255,255,.72);
  color:var(--ink);
  border:1px solid var(--line);
  box-shadow:none;
}
.btn.ghost{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--line);
  box-shadow:none;
}

.controls{ display:flex; gap:10px; flex-wrap:wrap; }

/* --- Inputs --- */
.select{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.78);
  outline:none;
  font-size:14px;
}

/* --- Index list --- */
.content{ padding:16px; }

.chapter-list{
  display:grid;
  gap:12px;
  padding:6px;
}

.chapter-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 14px;
  border-radius:18px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.70);
  text-decoration:none;
  color:var(--ink);
  box-shadow: 0 8px 26px rgba(15,23,42,.08);
  transition: transform .12s ease, box-shadow .12s ease;
}
.chapter-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 38px rgba(15,23,42,.12);
}
.chapter-left{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.badge{
  width:38px;
  height:38px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-weight:1000;
  border:1px solid var(--line);
  background:rgba(11,18,32,.06);
  flex:0 0 auto;
}
.chapter-title{
  font-weight:1000;
  font-size:16px;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.chapter-meta{
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
  font-weight:800;
}
.chev{
  font-size:18px;
  opacity:.55;
  flex:0 0 auto;
}

/* --- Read page --- */
.reader-full .frame{ padding:18px 10px 26px; }

.read-top{
  padding:14px 14px;
  display:flex;
  align-items:center;
  gap:10px;
  border-bottom:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.40) 100%);
}

.read-title{
  font-weight:1000;
  font-size:18px;
  flex:1;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  padding:0 6px;
}

.audio{
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.55);
}
.audio-top audio{
  width:100%;
}

/* Arabic text */
.ar{
  direction:rtl;
  text-align:right;
  padding:16px 18px 22px;
  font-size:20px;
  line-height:1.95;
  letter-spacing:.1px;
  font-weight:700;
  white-space:pre-wrap;       /* JSON text newlines */
  word-break:break-word;
}
.ar-full{
  padding:18px 18px 26px;
  font-size:21px;
  line-height:2.0;
}

/* Responsive */
@media (max-width:520px){
  .brand h1{ font-size:18px; }
  .ar{ font-size:19px; }
  .ar-full{ font-size:20px; }
  .badge{ width:34px; height:34px; border-radius:12px; }
}

/* ===============================
   FARAH READER - MOBİL ODAKLI ÇİÇEKLİ TEMA (SON HAL)
   =============================== */

/* Sayfa arka planı */
body.reader-full {
  background: #f4f1ea;
  margin: 0;
  height: 100%;
  overflow: hidden; /* Sayfanın kendisi kaymasın */
}

/* 1. DIŞ ÇERÇEVE: Ekranı ortalar */
.frame.frame-floral {
  position: relative;
  width: 100%;
  /* 100dvh: iPhone Safari alt çubuğu sorununu çözer */
  height: 100dvh; 
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px; /* Kenarlardan çok az boşluk */
  box-sizing: border-box;
}

/* 2. OKUYUCU KARTI: Resim burada */
.frame.frame-floral .reader {
  position: relative;
  display: flex;
  flex-direction: column; /* İçerikleri alt alta diz */
  
  /* EN-BOY ORANI KİLİDİ (Çiçeklerin bozulmasını önleyen kod) */
  aspect-ratio: 2 / 3; 
  
  width: auto;      /* Genişlik orana göre belirlenir */
  height: 95%;      /* Ekranın %95'i kadar dikey yer kapla */
  max-width: 100%;  /* Taşıp gitme */
  
  /* Arka Plan Görseli */
  background-image: url("../img/frame-floral.png");
  background-size: 100% 100%; /* Görsel kutuya tam otursun */
  background-repeat: no-repeat;
  
  /* Önceki stilleri sıfırla */
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  border-radius: 0 !important;
  
  /* İç kenar boşlukları (Yazıların çiçeklerin üstüne gelmemesi için) */
  /* Üst: %15, Yanlar: %12, Alt: %15 */
  padding: 15% 12% 15% 12%; 
  box-sizing: border-box;
}

/* 3. İÇERİK DÜZENİ */

/* Başlık ve Butonlar (Sabit Kalacak) */
.frame.frame-floral .read-top,
.frame.frame-floral .audio {
  flex-shrink: 0; /* Bunlar sıkışmasın */
  background: transparent !important;
  border: none !important;
  padding: 0 0 10px 0 !important; /* Altına biraz boşluk */
  width: 100%;
}

/* Arapça Metin (KAYACAK OLAN KISIM) */
.frame.frame-floral #text {
  flex-grow: 1;    /* Kalan tüm boşluğu doldur */
  overflow-y: auto; /* Yazı sığmazsa kaydırma çubuğu çıkar */
  height: 0;       /* Flexbox içinde scroll'un çalışması için hile */
  
  /* Yazı Stili */
  text-align: center;
  font-weight: 700;
  color: #2d2a26;
  line-height: 1.8;
  padding-bottom: 20px; /* En altta rahat okuma payı */
  
  /* iPhone'da kaydırmayı yağ gibi yapar */
  -webkit-overflow-scrolling: touch; 
  
  /* Kaydırma çubuğunu gizle (İsteğe bağlı, daha şık durur) */
  scrollbar-width: none; /* Firefox */
}

/* Chrome/Safari için kaydırma çubuğunu gizleme */
.frame.frame-floral #text::-webkit-scrollbar {
  display: none;
}

/* MOBİL İÇİN İNCE AYAR (Ekran çok darsa) */
@media (max-width: 480px) {
  .frame.frame-floral .reader {
    width: 100%; 
    height: auto; /* Yüksekliği serbest bırak */
    aspect-ratio: 10 / 16; /* Telefon ekranına daha uygun bir oran */
    max-height: 95dvh;
  }
  
  .frame.frame-floral #text {
    font-size: 18px !important;
  }
}