/* ═══════════════════════════════════════════════════════════════
   ÜST MENÜ + HAK ROZETİ — v2'den v3'e taşınan stiller
   css/app.css (170KB) içinden SADECE başlık sağı ve dropdown kuralları
   çıkarıldı; v2'nin kendi başlık kabuğu (#app-header, .header-ic,
   .header-logo) BİLEREK alınmadı — id özgüllüğü v3'ün .ust stilini ezerdi.

   Değişken köprüsü: ayar-menu.js ve modulor-hak.js v2'nin token adlarını
   kullanıyor (--gold, --text-1, --font-cinzel...). Yüzlerce kullanımı tek
   tek düzenlemek yerine o adları v3'ün tokenlarına bağlıyoruz.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --gold:var(--altin);
  --gold-rgb:var(--altin-rgb);
  --gold-10:rgba(var(--altin-rgb),.10);
  --gold-20:rgba(var(--altin-rgb),.20);
  --text-gold:var(--altin);
  --text-gold-dim:rgba(var(--altin-rgb),.72);
  --text-0:var(--m1);
  --text-1:var(--m2);
  --text-2:var(--m3);
  --bg-0:var(--zemin);
  --bg-1:var(--kart);
  --bg-2:rgba(32,29,42,.92);
  --border-0:rgba(var(--altin-rgb),.12);
  --border-1:rgba(var(--altin-rgb),.20);
  --border-2:rgba(var(--altin-rgb),.28);
  --border-gold:rgba(var(--altin-rgb),.45);
  --font-cinzel:var(--cinzel);
  --font-cormorant:var(--cormorant);
  --font-outfit:var(--outfit);
  --header-h:52px;
  --safe-top:var(--safe-t);
  --dur-fast:.18s;
  --dur-mid:.28s;
  --error:#c96a5a;
  --shadow-lg:0 18px 48px rgba(0,0,0,.55);
}

/* v3 başlığı flex; sağdaki menü tek satırda kalsın ve taşmasın. */
.ust .header-sagda{margin-left:auto;flex-wrap:nowrap}

/* ── Header ─────────────────────────────────────────────── */
/* v2'nin #app-header kuralı BİLEREK KALDIRILDI (çıkarma betiği kaçırmıştı):
   position:fixed + left/right:0 + kendi zemini, başlığı ekranın tamamına
   sabitliyordu. v3'te başlık .kap'ın içinde ve 22px yan boşluğu var; sabitlenince
   o boşluğun dışına taşıp soldan kırpılıyor, menü de sağ uca kaçıyordu.
   Hem v3-sofa hem v3-nabiz bundan etkileniyordu. v3'ün kendi .ust stili yeterli. */
.header-sagda { display: flex; gap: 16px; align-items: center; }
/* ── Kompakt kimlik (☉Koç ☽Yay ↑Koç) ──────────────────────── */
.header-kimlik {
  display    : flex;
  gap        : 13px;
  align-items: center;
}
.hk-item {
  display    : inline-flex;
  align-items: baseline;
  gap        : 3px;
  font-size  : 17px;
  color      : var(--text-gold);
  font-family: var(--font-cinzel);
  letter-spacing: .03em;
  white-space: nowrap;
}
.hk-b {
  color    : var(--text-1);
  font-size: 16px;
}
@media (max-width: 640px){

  /* Mobilde header'a font+tema sığmıyor → dropdown'a taşındı.
     Header'da kimlik (☉♈ ☽♒ ↑♉) + tema toggle + isim kalır; font gizlenir. */
  .header-font { display: none; }        /* −A+ dropdown'da */
  .header-sagda { gap: 8px; }
  .header-isim { font-size: 15px; }
  .header-ic { padding: 0 12px; }
  .header-kimlik { gap: 5px; }
  .hk-b { display: none; }                /* burç ADI gizli */
  .hk-sem { display: inline; }            /* burç SEMBOLÜ görünür (♈♒♉) */
  .dd-mobil-kontrol { display: block; }
}
/* Masaüstünde dropdown'daki font/tema gizli (header'da var) */
.dd-mobil-kontrol { display: none; }
/* Burç sembolü — masaüstünde ad varken gizli, mobilde ad yerine görünür */
.hk-sem { display: none; margin: 0 1px; }
/* İsim butonu → dropdown tetikleyici */
.header-isim {
  background : transparent;
  border     : none;
  color      : var(--text-0);
  font-family: var(--font-cinzel);
  font-size  : 18px;
  letter-spacing: .05em;
  cursor     : pointer;
  padding    : 8px 5px;
  display    : inline-flex;
  align-items: center;
  gap        : 6px;
  min-height : 57px;
}
.header-isim:hover { color: var(--text-gold); }
/* Header font kontrolü — çerçevesiz, sade */
.header-font {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.hf-btn, .hf-a-btn {
  background: transparent; border: none;
  color: var(--text-2); cursor: pointer;
  transition: color var(--dur-fast);
  padding: 5px 8px;
  min-height: 57px;
}
.hf-btn { font-size: 23px; }
.hf-a-btn { font-family: var(--font-cormorant); font-size: 20px; }
.hf-btn:hover, .hf-a-btn:hover { color: var(--text-gold); }
/* Header tema toggle — çerçevesiz */
.header-tema {
  background: transparent;
  border: none;
  color: var(--text-gold);
  font-size: 23px; cursor: pointer;
  padding: 5px 8px; min-height: 57px;
  transition: opacity var(--dur-fast);
}
.header-tema:hover { opacity: .7; }

/* SES DÜĞMESİ — üst çubuk, 2026-08-15.
   Tema düğmesiyle aynı ölçü/hizada; ses çalarken altın rengine
   dönüp yavaşça nefes alıyor. Yüzen #mses-logo'nun yerini aldı. */
.header-ses {
  background: transparent;
  border: none;
  color: var(--text-1);
  font-size: 21px; cursor: pointer;
  padding: 5px 8px; min-height: 57px;
  transition: opacity var(--dur-fast), color var(--dur-fast);
}
.header-ses:hover { opacity: .7; }
.header-ses.calityor { color: var(--text-gold); animation: hdrSesNefes 3s ease-in-out infinite; }
.header-ses.yukleniyor { opacity: .5; }
@keyframes hdrSesNefes { 0%,100%{ opacity:.75 } 50%{ opacity:1 } }

.hk-ikon{ font-size:21px;color:var(--text-1) }
.harita-kapi-btn.aktif .hk-ikon{ color:var(--text-gold) }
.hk-ad  { font-family:var(--font-cinzel);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--text-2) }
.harita-kapi-btn.aktif .hk-ad{ color:var(--text-gold) }
/* ════════════════════════════════════════════════════════════
   ÜST MENÜ DROPDOWN (AyarMenu) — kimlik + font + tema + renk
════════════════════════════════════════════════════════════ */
.hdr-dropdown {
  position   : fixed;
  z-index    : 2000;
  width      : 390px;
  max-width  : calc(100vw - 31px);
  background : var(--bg-1);
  border     : 1px solid var(--border-1);
  border-radius: 18px;
  box-shadow : var(--shadow-lg);
  padding    : 21px;
  opacity    : 0;
  transform  : translateY(-10px);
  transition : opacity var(--dur-fast), transform var(--dur-fast);
  max-height : calc(100vh - 117px);
  overflow-y : auto;
}
.hdr-dropdown.acik { opacity: 1; transform: translateY(0); }
.dd-bolum { margin-bottom: 18px; }
.dd-ayrac { height: 1px; background: var(--border-0); margin: 18px 0; }
.dd-baslik {
  font-family   : var(--font-cinzel);
  font-size     : 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color         : var(--text-gold);
  margin-bottom : 13px;
}
/* Kişi bilgileri */
.dd-bilgi {
  display        : flex;
  justify-content: space-between;
  padding        : 6px 0;
  font-family    : var(--font-cormorant);
  font-size      : 20px;
}
.dd-k { color: var(--text-2); }
.dd-v { color: var(--text-0); text-align: right; }
.dd-bos { color: var(--text-2); font-style: italic; font-size: 18px; }
/* Font kontrol */
.dd-font { display: flex; align-items: center; gap: 13px; }
.dd-font-btn {
  width: 52px; height: 52px;
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: 10px;
  color: var(--text-0);
  font-size: 23px; cursor: pointer;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.dd-font-btn:hover { border-color: var(--gold); color: var(--text-gold); }
.dd-font-a { font-family: var(--font-cormorant); font-size: 23px; color: var(--text-1); }
/* Tema satırı */
.dd-tema-sat { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dd-tema-btn {
  padding: 16px;
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: 10px;
  color: var(--text-1);
  font-family: var(--font-cinzel);
  font-size: 17px; letter-spacing: .05em;
  cursor: pointer;
  transition: all var(--dur-fast);
}
.dd-tema-btn.aktif { border-color: var(--gold); color: var(--text-gold); background: var(--gold-10); }
/* Renk paleti */
.dd-palet-grup { margin-bottom: 13px; }
.dd-palet-et {
  font-family: var(--font-outfit);
  font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-2); margin-bottom: 8px;
}
.dd-swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.dd-swatch {
  aspect-ratio: 1;
  border: 1px solid var(--border-1);
  border-radius: 8px;
  cursor: pointer;
  transition: transform var(--dur-fast), border-color var(--dur-fast);
}
.dd-swatch:hover { transform: scale(1.1); border-color: var(--gold); }
.dd-reset {
  width: 100%; margin-top: 5px;
  padding: 12px;
  background: transparent;
  border: 1px solid var(--border-1);
  border-radius: 10px;
  color: var(--text-2);
  font-family: var(--font-outfit); font-size: 16px;
  cursor: pointer;
}
.dd-reset:hover { color: var(--text-0); border-color: var(--border-2); }
/* Profil + çıkış */
.dd-profil {
  width: 100%; padding: 17px;
  background: var(--gold-10);
  border: 1px solid var(--border-gold);
  border-radius: 13px;
  color: var(--text-gold);
  font-family: var(--font-cinzel); font-size: 17px; letter-spacing: .06em;
  cursor: pointer; margin-bottom: 10px;
  transition: background var(--dur-fast);
}
.dd-profil:hover { background: var(--gold-20); }
.dd-cikis {
  width: 100%; padding: 13px;
  background: transparent; border: none;
  color: var(--error);
  font-family: var(--font-outfit); font-size: 17px;
  cursor: pointer;
}
.dd-cikis:hover { text-decoration: underline; }
/* Hesabımı sil — Çıkış'tan daha SESSİZ duruyor: kolay bulunmalı
   ama yanlışlıkla basılmamalı. Aynı token setini kullanıyor. */
.dd-yasal {
  display: flex; justify-content: center; gap: 8px;
  padding: 8px 0 4px; font-family: var(--font-cormorant); font-size: 14px;
}
.dd-yasal a { color: var(--text-2); text-decoration: none; }
.dd-yasal a:hover { color: var(--gold); text-decoration: underline; }
.dd-yasal span { color: var(--text-2); opacity: .5; }
.dd-hesap-sil {
  width: 100%; padding: 11px 13px;
  background: transparent; border: none;
  color: var(--text-2); opacity: .8;
  font-family: var(--font-cormorant); font-size: 15px;
  text-align: center; cursor: pointer;
}
.dd-hesap-sil:hover { color: var(--error); opacity: 1; }

html.light .metin-statik,
html.light .metin-ai,
html.light .kapi-ac,
html.light .sf-lbl,
html.light .dd-bilgi,
html.light p { font-weight: 450; }
html.light .sf-kart-baslik,
html.light .kapi-baslik,
html.light .dd-baslik,
html.light .nav-etiket { font-weight: 500; }
/* ── Ayar menüsü: bildirim tercihleri ───────────────────── */
.dd-bldr {
  display    : flex;
  align-items: flex-start;
  gap        : 10px;
  padding    : 8px 0;
  cursor     : pointer;
}
.dd-bldr input[type="checkbox"] {
  margin-top  : 3px;
  accent-color: var(--gold);
  flex-shrink : 0;
  cursor      : pointer;
}
.dd-bldr input:disabled { opacity: .4; cursor: wait; }
.dd-bldr-ic { display: flex; flex-direction: column; gap: 2px; }
.dd-bldr-ad {
  font-family: var(--font-cormorant);
  font-size  : 16px;
  color      : var(--text-1);
  line-height: 1.3;
}
.dd-bldr-ac {
  font-family   : var(--font-cinzel);
  font-size     : 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color         : var(--text-2);
}
.dd-bldr-not {
  margin-top : 6px;
  font-size  : 11px;
  line-height: 1.5;
  color      : var(--text-2);
  font-style : italic;
}
/* Bulut senkronu — ayar panelindeki mini işlemler */
.dd-bulut-islem { display: flex; gap: 8px; margin-top: 10px; }
.dd-mini {
  flex: 1 1 0;
  background: transparent; color: var(--gold);
  border: 1px solid var(--border-gold); border-radius: 10px;
  padding: 9px 10px; font-family: var(--font-outfit); font-size: 12px;
  cursor: pointer; white-space: nowrap;
}
.dd-mini:hover { background: var(--gold-10); }
.dd-mini:disabled { opacity: .55; cursor: default; }
.dd-mini-uyari { color: var(--error, #c98a8a); border-color: color-mix(in srgb, var(--error, #c98a8a) 45%, transparent); }
.dd-mini-uyari:hover { background: color-mix(in srgb, var(--error, #c98a8a) 12%, transparent); }
/* ═══════════════════════════════════════════════════════════════
   1) KİMLİK GLİFLERİ GİZLİ — ☉ ☾ ↑ kaldırıldı, isim öne çıksın.
   Elemanı JS'ten silmiyoruz: ayar-menu.js render()'da onu her profil
   değişiminde yeniden kuruyor, silinen DOM geri gelirdi. CSS ile
   gizlemek hem kalıcı hem geri alması tek satır.
   ═══════════════════════════════════════════════════════════════ */
.header-kimlik{display:none !important}

.header-isim{
  font-family:var(--cormorant);
  font-size:21px;
  letter-spacing:.04em;
  color:var(--m1);
}
@media (max-width:640px){
  .header-isim{font-size:19px}
}

/* ═══════════════════════════════════════════════════════════════
   2) AÇIK TEMA — ayar-menu.js temaUygula() <html>'e .light ekliyor.
   v3'ün kendi tokenlarının açık karşılığı yoktu, o yüzden tema
   düğmesi çalışıyor ama ekran koyu kalıyordu. Tokenları çevirince
   .arka dahil her şey birlikte dönüyor (hepsi bu değişkenlere bağlı).
   Altın tonu modulor-hak.js'in açık tema kuralıyla aynı: 138,104,32.
   ═══════════════════════════════════════════════════════════════ */
html.light{
  --zemin:#F5F1E8;
  --kart:rgba(255,253,247,.92);
  --m1:#2A2620;
  --m2:#4C4538;
  --m3:#7C7365;
  --altin:#8A6820;
  --altin-rgb:138,104,32;
  --c-ben:#3f5f9c;
  --c-nabiz:#8A6820;
  --c-yon:#9a6a2c;
  --daire-ic:#FBF8F1;
  --daire-ic-2:#F3EEE3;
  --ucan-bg:rgba(255,253,247,.86);
  --ucan-golge-1:rgba(120,100,60,.18);
  --ucan-golge-2:rgba(120,100,60,.12);
  --ucan-ic-isik:rgba(255,255,255,.7);
}
html.light body{background:var(--zemin)}
/* Koyu temada cam etkisi için konan koyu örtüler açıkta kirli görünüyor. */
html.light .ov{background:rgba(245,241,232,.86)}
html.light .not{color:var(--m1)}

/* ═══════════════════════════════════════════════════════════════
   AÇIK TEMA — SABİT DEĞER DÜZELTMELERİ
   Aşağıdakiler v3'te token'a bağlı DEĞİL, doğrudan yazılmış renkler:
   metinler beyaza yakın (rgba(245,240,232,.9)), çerçeveler koyu zemine
   göre ayarlanmış düşük opaklıklar (.06–.32). Token çevirmek bunlara
   ulaşmıyor, o yüzden açık temada tek tek eziliyorlar.
   ═══════════════════════════════════════════════════════════════ */

/* Kendine bak daireleri: metin koyu, çerçeve belirgin */
html.light .bd-daire{
  color:var(--m1);
  border-color:rgba(138,104,32,.55);
  background:rgba(255,255,255,.55);
}
html.light .bd-daire.acilmis{
  border-color:rgba(138,104,32,.95);
  background:rgba(255,251,242,.9);
}
html.light .bd-daire.bd-yok{opacity:.42}

/* Kartlar ve ince ayraçlar */
html.light .bd{
  border-color:rgba(138,104,32,.28);
  background:rgba(255,253,247,.75);
}
html.light .mod .cubuk{background:rgba(138,104,32,.14)}
html.light .nb-mini .v{border-color:rgba(138,104,32,.3);color:var(--m2)}
html.light .nb-yorum{border-color:rgba(138,104,32,.3);color:var(--m1)}
html.light .nb-buyuk .a{color:var(--m1)}
html.light .nb-buyuk .b{color:var(--m2)}

/* Genel metin koyulaştırma: ikincil tonlar açıkta fazla soluk kalıyor */
html.light .bslm .tarih,
html.light .nb-seri,
html.light .ovk .alt,
html.light .ovk.r .his{color:#6B6252}
html.light .yon-bas{color:var(--m1)}

/* Düğmeler ve kesikli çerçeveler */
html.light .btn,
html.light .bd-alt button{
  color:var(--m1);
  border-color:rgba(138,104,32,.5);
}
html.light .rt .dis{border-color:rgba(138,104,32,.35)}
html.light .ovk{border-color:rgba(138,104,32,.32)}

/* ═══════════════════════════════════════════════════════════════
   DAİRE PALETİ + OKUNURLUK + BAŞLIK/ROZET DÜZELTMELERİ
   ═══════════════════════════════════════════════════════════════ */

/* 1) Yazılar 1.5 katı. Değerler v3'ün clamp'lerinin birebir 1.5 katı,
      böylece dikey sıkışma mantığı (vh tabanlı ölçek) korunuyor. */
.bd-daire.bd-buyuk{font-size:clamp(15px,2.25vh,19.5px)}
.bd-daire.bd-orta {font-size:clamp(13.5px,1.95vh,16.5px)}
.bd-daire.bd-kucuk{font-size:clamp(12px,1.8vh,15px)}

/* 2) Pastel dolgular — altı daire şimdiye dek yalnızca BOYUTLA ayrışıyordu;
      renk her birine kimlik veriyor. Tonlar düşük doygunlukta tutuldu ki
      altın çerçeve ve Cinzel yazı önde kalsın. */
/* Tonlar birbirine yaklaştırıldı: hepsi krem tabana doğru çekildi, aradaki
   fark ayırt edilecek kadar var ama gökkuşağı etkisi yok. Renk artık
   "hangi daire" bilgisini fısıldıyor, bağırmıyor. */
html.light .bd-daire[data-daire="cift"]    {background:#F7EFE0}
html.light .bd-daire[data-daire="golge"]   {background:#F1ECEF}
html.light .bd-daire[data-daire="sayilar1"]{background:#EDF1EB}
html.light .bd-daire[data-daire="sayilar2"]{background:#F5EDEB}
html.light .bd-daire[data-daire="akis"]    {background:#EBF0F4}
html.light .bd-daire[data-daire="tarz"]    {background:#F4EEE5}

/* Koyu temada aynı kimlikler, yalnızca fısıltı hâlinde */
.bd-daire[data-daire="cift"]    {background:rgba(224,192,112,.07)}
.bd-daire[data-daire="golge"]   {background:rgba(160,140,200,.07)}
.bd-daire[data-daire="sayilar1"]{background:rgba(130,180,140,.07)}
.bd-daire[data-daire="sayilar2"]{background:rgba(210,140,140,.07)}
.bd-daire[data-daire="akis"]    {background:rgba(120,160,215,.08)}
.bd-daire[data-daire="tarz"]    {background:rgba(215,165,110,.07)}

/* 3) Bölüm çerçevesi: --c-ben mavisi sıcak krem zeminde yabancı duruyordu.
      Açık temada nötr altına çekiliyor. */
html.light .cerceve{border-color:rgba(138,104,32,.3) !important}

/* 4) Başlıkta isim taşması ("H.DEMİ..." kesiliyordu). Kimlik glifleri
      kalkmıştı ama isim büyüdüğü için yer yine yetmedi. */
.header-isim{
  font-size:18px;
  max-width:34vw;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
@media (max-width:640px){
  .header-isim{font-size:16px;max-width:30vw}
}

/* 5) Hak rozeti varsayılan konumu: üst sağda Gölgen dairesinin üstüne
      biniyordu. Sağ ALTA alındı. Kullanıcı sürüklerse JS satır içi stil
      yazıyor ve o kazanıyor — yani bu yalnızca ilk açılış konumu. */
/* DİKKAT: burada !important KULLANMA. modulor-hak.js sürüklerken konumu
   satır içi stille yazıyor; stil sayfasındaki !important onu ezip rozeti
   sabitliyor, sürüklenemez hâle getiriyordu.
   `body` öneki yalnızca modülün kendi enjekte ettiği stili geçmek için —
   satır içi stil hâlâ kazanıyor, yani sürükleme çalışıyor.
   Bu sadece İLK AÇILIŞ konumu; kullanıcı taşıdıktan sonra kendi yeri
   hatırlanıyor. Sağdan boşluk 18px: eskiden ekran kenarından taşıyordu. */
body #mhak-rozet{
  top:auto;
  bottom:calc(var(--safe-b, 0px) + 92px);
  right:18px;
}
/* ⓘ rozeti hak rozetinin ÜSTÜNE: ikisi de sağ altta varsayılan konumda
   üst üste biniyordu. Aradaki 68px = hak rozetinin yüksekliği + boşluk.
   Sürükleme ikisinde de çalışıyor, bu yalnızca ilk açılış yeri. */
body #kv-rozet{
  top:auto;
  bottom:calc(var(--safe-b, 0px) + 160px);
  right:18px;
}
html.light #mhak-rozet{
  background:rgba(255,253,247,.92);
  border-color:rgba(138,104,32,.45);
  color:rgba(138,104,32,.95);
}


/* Alt iki düğme 1.3 kat — clamp'ler birebir ölçeklendi. */
.bd-sentez,.bd-yansima{
  font-size:clamp(11.7px,1.56vh,14.3px);
  padding:clamp(9px,1.56vh,14px) 30px;
  letter-spacing:.15em;
}
html.light .bd-sentez,
html.light .bd-yansima{
  color:var(--m1);
  border-color:rgba(138,104,32,.5);
}

/* ═══════════════════════════════════════════════════════════════
   BUGÜNÜN YÖNÜ — kartlar BESLENECEK ELEMENTE göre renkleniyor.
   yon-bolum.js .bd-grid'e data-element="toprak|su|ates|hava" yazıyor.
   Her element kendi ailesinde kalıyor; kartlar arasındaki fark
   nth-child ile hafif kaydırılıyor — tek renk blok gibi durmasın,
   ama Kendine bak'taki gibi birbirine yakın kalsın.
   ═══════════════════════════════════════════════════════════════ */
html.light .bd-grid[data-element="toprak"] .bd:nth-child(6n+1){background:#EFF1E8}
html.light .bd-grid[data-element="toprak"] .bd:nth-child(6n+2){background:#F1F0E5}
html.light .bd-grid[data-element="toprak"] .bd:nth-child(6n+3){background:#ECEFE7}
html.light .bd-grid[data-element="toprak"] .bd:nth-child(6n+4){background:#F2F0E7}
html.light .bd-grid[data-element="toprak"] .bd:nth-child(6n+5){background:#EDF0E9}
html.light .bd-grid[data-element="toprak"] .bd:nth-child(6n+6){background:#F0F1EA}

html.light .bd-grid[data-element="su"] .bd:nth-child(6n+1){background:#E9EFF4}
html.light .bd-grid[data-element="su"] .bd:nth-child(6n+2){background:#ECF1F5}
html.light .bd-grid[data-element="su"] .bd:nth-child(6n+3){background:#E7EDF3}
html.light .bd-grid[data-element="su"] .bd:nth-child(6n+4){background:#EDF2F6}
html.light .bd-grid[data-element="su"] .bd:nth-child(6n+5){background:#E8EEF4}
html.light .bd-grid[data-element="su"] .bd:nth-child(6n+6){background:#EBF0F5}

html.light .bd-grid[data-element="ates"] .bd:nth-child(6n+1){background:#F6EDE7}
html.light .bd-grid[data-element="ates"] .bd:nth-child(6n+2){background:#F7EFEA}
html.light .bd-grid[data-element="ates"] .bd:nth-child(6n+3){background:#F5EBE5}
html.light .bd-grid[data-element="ates"] .bd:nth-child(6n+4){background:#F8F0EB}
html.light .bd-grid[data-element="ates"] .bd:nth-child(6n+5){background:#F6ECE6}
html.light .bd-grid[data-element="ates"] .bd:nth-child(6n+6){background:#F7EEE9}

html.light .bd-grid[data-element="hava"] .bd:nth-child(6n+1){background:#F3F1EA}
html.light .bd-grid[data-element="hava"] .bd:nth-child(6n+2){background:#F1F1EE}
html.light .bd-grid[data-element="hava"] .bd:nth-child(6n+3){background:#F4F2EB}
html.light .bd-grid[data-element="hava"] .bd:nth-child(6n+4){background:#F2F2EF}
html.light .bd-grid[data-element="hava"] .bd:nth-child(6n+5){background:#F3F2EC}
html.light .bd-grid[data-element="hava"] .bd:nth-child(6n+6){background:#F1F0EB}

/* Koyu temada aynı kimlik, fısıltı hâlinde */
.bd-grid[data-element="toprak"] .bd{background:rgba(150,175,130,.06)}
.bd-grid[data-element="su"]     .bd{background:rgba(120,160,215,.07)}
.bd-grid[data-element="ates"]   .bd{background:rgba(215,140,110,.06)}
.bd-grid[data-element="hava"]   .bd{background:rgba(200,195,170,.06)}

/* ═══════════════════════════════════════════════════════════════
   NABIZ — seçili ritmin kendi rengi (--hr) zaten var; kartlara ve
   mini rozetlere onun pastel hâlini veriyoruz. color-mix sayesinde
   ritim değişince renk de birlikte dönüyor, sabit liste gerekmiyor.
   ═══════════════════════════════════════════════════════════════ */
html.light .nb-buyuk{background:color-mix(in srgb,var(--hr,var(--c)) 10%,#FBF8F1)}
html.light .nb-yorum{background:color-mix(in srgb,var(--hr,var(--c)) 7%,#FBF8F1)}
html.light .nb-mini .v{background:color-mix(in srgb,var(--c) 6%,#FBF8F1)}
html.light .nb-mini .v.dolu{background:color-mix(in srgb,var(--c) 14%,#FBF8F1)}
html.light .rt .dis{background:color-mix(in srgb,var(--rr,var(--c)) 12%,#FBF8F1)}

.nb-buyuk{background:color-mix(in srgb,var(--hr,var(--c)) 7%,transparent)}
.rt .dis{background:color-mix(in srgb,var(--rr,var(--c)) 8%,transparent)}

/* ═══════════════════════════════════════════════════════════════
   BUGÜNÜN YÖNÜ — kart paleti BESLENECEK ELEMENTE göre
   yon-bolum.js .bd-grid'e data-element="toprak|su|ates|hava" yazıyor
   (haritada en az vurgulu element). Renk böylece keyfi değil: o gün
   neyin beslendiğini söylüyor.
   Aynı ızgarada iki komşu ton dönüşümlü veriliyor — düz tek renk
   yerine hafif bir ritim, ama fark yine düşük tutuldu.
   ═══════════════════════════════════════════════════════════════ */
html.light .bd-grid[data-element="toprak"] .bd:nth-child(odd) {background:#F5EFE4}
html.light .bd-grid[data-element="toprak"] .bd:nth-child(even){background:#F2EDE6}
html.light .bd-grid[data-element="su"]     .bd:nth-child(odd) {background:#ECF1F5}
html.light .bd-grid[data-element="su"]     .bd:nth-child(even){background:#EDF0F2}
html.light .bd-grid[data-element="ates"]   .bd:nth-child(odd) {background:#F7EDE7}
html.light .bd-grid[data-element="ates"]   .bd:nth-child(even){background:#F4EDEA}
html.light .bd-grid[data-element="hava"]   .bd:nth-child(odd) {background:#F1F0F5}
html.light .bd-grid[data-element="hava"]   .bd:nth-child(even){background:#EFEFF2}

/* Koyu temada aynı ayrım, fısıltı düzeyinde */
.bd-grid[data-element="toprak"] .bd{background:rgba(215,165,110,.06)}
.bd-grid[data-element="su"]     .bd{background:rgba(120,160,215,.07)}
.bd-grid[data-element="ates"]   .bd{background:rgba(210,130,110,.06)}
.bd-grid[data-element="hava"]   .bd{background:rgba(170,165,200,.06)}

/* ═══════════════════════════════════════════════════════════════
   NABIZ — ritmin kendi rengiyle boyanıyor
   Her ritim butonu style="--rr:<renk>" taşıyor, seçili büyük daire ise
   --hr. Sabit palet yazmak yerine o değişkenlerden türetiyoruz: yeni bir
   ritim eklendiğinde CSS'e dokunmak gerekmesin.
   ═══════════════════════════════════════════════════════════════ */
.rt .dis{background:color-mix(in srgb,var(--rr) 8%,transparent)}
.rt.secili .dis{background:color-mix(in srgb,var(--rr) 18%,transparent)}
.nb-buyuk{background:color-mix(in srgb,var(--hr,var(--c)) 7%,transparent)}

html.light .rt .dis{background:color-mix(in srgb,var(--rr) 16%,#FBF8F1)}
html.light .rt.secili .dis{background:color-mix(in srgb,var(--rr) 30%,#FBF8F1)}
html.light .nb-buyuk{background:color-mix(in srgb,var(--hr,var(--c)) 14%,#FBF8F1)}
html.light .rt .ad{color:var(--m1)}

/* ═══════════════════════════════════════════════════════════════
   YÖN KART SİMGELERİ (SVG)
   Emoji'den SVG'ye geçildi: emoji her cihazda farklı çiziliyor ve
   boyutu kontrol edilemiyordu. Artık ölçü ve hizalama buradan.
   ═══════════════════════════════════════════════════════════════ */
.yi{
  /* 1.45em, 9px'lik etiket yazısına bağlıydı → ~13px, çizimler
     okunmuyordu. Sabit ölçüye alındı; kart artık simgeyle açılıyor. */
  width:30px;
  height:30px;
  margin-right:.5em;
  flex:0 0 auto;
}
.bd .k{display:flex;align-items:center;gap:.1em}

/* Koyu temada dolgular fazla parlak kalıyor; hafifçe kısıyoruz. */
.yi{opacity:.92}
html.light .yi{opacity:1}

/* Simgeler kendi başlarına hafifçe soluk alıyor — kart "duruyor" gibi
   görünmesin diye. Süre ve gecikme kart kart kaydırıldı, altısı aynı
   anda inip kalkarsa metronom gibi oluyor.
   `translate` ve `scale` AYRI CSS özellikleri: animasyon translate'i
   sürerken hover scale'i onu ezmiyor, ikisi birlikte çalışıyor. */
@keyframes yi-suzul{
  0%,100%{translate:0 0}
  50%    {translate:0 -2.5px}
}
.yi{animation:yi-suzul 5.4s ease-in-out infinite;transition:scale .18s}
.bd:nth-child(2) .yi{animation-duration:6.1s;animation-delay:-.9s}
.bd:nth-child(3) .yi{animation-duration:5.7s;animation-delay:-2.2s}
.bd:nth-child(4) .yi{animation-duration:6.4s;animation-delay:-1.4s}
.bd:nth-child(5) .yi{animation-duration:5.9s;animation-delay:-3.1s}
.bd:nth-child(6) .yi{animation-duration:6.2s;animation-delay:-.4s}

/* Kart odaklandığında simge biraz büyüsün — dokunsal geri bildirim */
.bd:hover .yi,.bd:focus-visible .yi{scale:1.12}
.bd.acik .yi{scale:1.12}

@media (prefers-reduced-motion:reduce){
  .yi{animation:none}
}

/* ═══════════════════════════════════════════════════════════════
   KENDİNE BAK — daire simgeleri
   Daire bir flex sütun: simge üstte, ad altta. Simge ölçüsü dairenin
   yazı boyutuna bağlı (em), böylece büyük/orta/küçük dairelerde
   oranlar kendiliğinden korunuyor.
   ═══════════════════════════════════════════════════════════════ */
/* Simge artık ÜSTTE değil, ARKADA: dairenin ortasına yerleşen soluk bir
   filigran. Yazı önde kalıyor, simge zemini taşıyor. */
.bd-daire{position:relative;display:flex;align-items:center;justify-content:center}
.bi{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:78%;
  height:78%;
  opacity:.15;
  pointer-events:none;
  transition:opacity .2s,transform .2s;
}
/* Fon katmanında kalın çizgi göze batıyor; hepsini inceltiyoruz.
   viewBox 32 birim olduğu için 1 birim ≈ saç teli inceliğinde durur. */
.bi path,.bi circle,.bi ellipse{stroke-width:1}
.bd-ad{position:relative;z-index:1}
.bd-daire.acilmis .bi{opacity:.24}
.bd-daire.bd-yok .bi{opacity:.07}
.bd-daire:active .bi{transform:translate(-50%,-50%) scale(.96)}

/* Açılmış izi (◦) simgeyle çakışmasın diye alta sabitleniyor */
.bd-iz{line-height:1;opacity:.55}

/* ═══════════════════════════════════════════════════════════════
   KILAVUZ PENCERESİ
   Kendi overlay'ini kuruyor (.kv-ov) — mevcut .ov/.ovk ile
   çakışmasın diye ayrı isim uzayı. z-index 70: .ov'un (60) üstünde.
   ═══════════════════════════════════════════════════════════════ */
.kv-ov{
  position:fixed;inset:0;z-index:70;
  background:rgba(6,5,10,.86);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .25s;
}
html.light .kv-ov{background:rgba(245,241,232,.9)}
.kv-ov.acik{opacity:1;pointer-events:auto}

.kv-kutu{
  position:relative;
  width:100%;max-width:440px;max-height:86dvh;overflow-y:auto;
  background:var(--kart);
  border:1px solid rgba(var(--altin-rgb),.28);
  border-radius:22px;
  padding:26px 24px 20px;
}

.kv-x{
  position:absolute;top:12px;right:14px;
  background:none;border:0;cursor:pointer;
  font-size:26px;line-height:1;color:var(--m3);
  padding:4px 8px;border-radius:8px;
}
.kv-x:hover{color:var(--m1)}

.kv-etiket{
  font-family:var(--cinzel);font-size:10px;letter-spacing:.22em;
  color:var(--m3);text-align:center;
}
.kv-baslik{
  font-family:var(--cormorant);font-size:27px;font-weight:400;
  text-align:center;margin:.24em 0 .5em;color:var(--m1);
}
.kv-amac{
  font-family:var(--cormorant);font-size:16px;line-height:1.55;
  color:var(--m2);text-align:center;margin:0 0 18px;
}

.kv-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.kv-madde{
  border-left:2px solid rgba(var(--altin-rgb),.35);
  padding-left:12px;
}
.kv-madde b{
  display:block;
  font-family:var(--cinzel);font-size:12px;letter-spacing:.1em;
  color:var(--altin);margin-bottom:2px;
}
.kv-madde span{
  font-family:var(--cormorant);font-size:15px;line-height:1.5;color:var(--m2);
}

.kv-not{
  margin:16px 0 0;padding-top:12px;
  border-top:1px dashed rgba(var(--altin-rgb),.25);
  font-family:var(--cormorant);font-size:14px;font-style:italic;
  color:var(--m3);text-align:center;
}

.kv-alt{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:18px;padding-top:14px;
  border-top:1px solid rgba(var(--altin-rgb),.18);
}
.kv-bir-daha{display:flex;align-items:center;gap:7px;cursor:pointer}
.kv-bir-daha input{width:15px;height:15px;accent-color:var(--altin);cursor:pointer}
.kv-bir-daha span{font-size:13px;color:var(--m3)}
.kv-tamam{
  background:none;cursor:pointer;
  border:1px solid rgba(var(--altin-rgb),.5);border-radius:2px;
  font-family:var(--cinzel);font-size:12px;letter-spacing:.14em;
  color:var(--m1);padding:9px 22px;
}
.kv-tamam:hover{border-color:rgba(var(--altin-rgb),.85)}

/* Mod çubuğu artık kılavuza açılan kapı. Görünür etiket şart: küçük bir
   ⓘ yeterince şey söylemiyordu, kullanıcı oraya basılabildiğini bilmiyordu. */
.mod.kv-tiklanir{cursor:pointer}
.kv-dugme{
  display:inline-flex;align-items:center;gap:.32em;
  margin-left:.7em;padding:3px 9px;
  border:1px solid rgba(var(--altin-rgb),.32);border-radius:999px;
  font-family:var(--cinzel);font-size:9px;letter-spacing:.14em;
  color:var(--m3);white-space:nowrap;
  transition:color .2s,border-color .2s,box-shadow .3s;
}
.kv-i{font-size:1.15em;line-height:1;opacity:.8}
.mod.kv-tiklanir:hover .kv-dugme{
  color:var(--altin);
  border-color:rgba(var(--altin-rgb),.6);
}
/* Bölüm değişince kılavuzun da değiştiğini belli eden kısa parıltı */
@keyframes kvParla{
  0%  {box-shadow:0 0 0 0 rgba(var(--altin-rgb),.5); color:var(--altin);
       border-color:rgba(var(--altin-rgb),.75)}
  100%{box-shadow:0 0 0 9px rgba(var(--altin-rgb),0)}
}
.kv-dugme.kv-parla{animation:kvParla 1s ease-out}

/* ═══════════════════════════════════════════════════════════════
   KILAVUZ ROZETİ — hak rozetiyle aynı dilde yüzen düğme
   ═══════════════════════════════════════════════════════════════ */
#kv-rozet{
  position:fixed;
  right:18px;
  bottom:calc(var(--safe-b, 0px) + 158px);   /* hak rozetinin üstünde */
  z-index:55;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:50%;
  background:var(--ucan-bg);
  border:1px solid rgba(var(--altin-rgb),.42);
  box-shadow:0 6px 18px var(--ucan-golge-1);
  color:var(--altin);cursor:pointer;
  /* Metnin üstüne biniyordu (Hakan, 2026-08-04). Sürüklenebilir
     olması yetmiyor; ilk hâlinde de okumayı engellememeli.
     Küçültüldü ve solgunlaştırıldı — dokununca tam görünür. */
  opacity:.55;
  transition:transform .16s,border-color .2s,opacity .2s;
}
#kv-rozet:hover,#kv-rozet:focus-visible,#kv-rozet.surukleniyor{opacity:1}
#kv-rozet:hover{border-color:rgba(var(--altin-rgb),.8)}
#kv-rozet:active{transform:scale(.94)}
/* Sürüklenirken hak rozetiyle aynı geri bildirim */
#kv-rozet.surukleniyor{transform:scale(1.08);border-color:rgba(var(--altin-rgb),.9)}
/* DİKKAT: konum kurallarında !important YOK — surukleBagla satır içi stille
   yazıyor, !important onu ezip rozeti sabitler (hak rozetinde bu hata yapıldı). */
.kv-rozet-i{font-size:16px;line-height:1}
.kv-rozet-ad{
  font-family:var(--cinzel);font-size:7px;letter-spacing:.12em;
  margin-top:2px;opacity:.8;
}
html.light #kv-rozet{
  background:rgba(255,253,247,.92);
  border-color:rgba(138,104,32,.45);
  color:rgba(138,104,32,.95);
  box-shadow:0 6px 18px rgba(120,100,60,.18);
}

/* ═══════════════════════════════════════════════════════════════
   İZİNLER — kullanıcı menüsündeki yuvarlak anahtarlar
   ═══════════════════════════════════════════════════════════════ */
.iz-satir{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 2px;cursor:pointer;
}
.iz-metin{display:flex;flex-direction:column;gap:1px;min-width:0}
.iz-ad{font-size:13px;color:var(--text-0,var(--m1))}
.iz-aciklama{font-size:11px;color:var(--text-2,var(--m3))}

.iz-anahtar{position:relative;flex:0 0 auto;width:40px;height:23px}
.iz-anahtar input{
  position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1;
}
.iz-kaydir{
  position:absolute;inset:0;border-radius:999px;
  background:rgba(var(--altin-rgb),.14);
  border:1px solid rgba(var(--altin-rgb),.3);
  transition:background .2s,border-color .2s;
}
.iz-kaydir::after{
  content:'';position:absolute;top:2px;left:2px;
  width:17px;height:17px;border-radius:50%;
  background:var(--m3);
  transition:transform .2s,background .2s;
}
.iz-anahtar input:checked + .iz-kaydir{
  background:rgba(var(--altin-rgb),.34);
  border-color:rgba(var(--altin-rgb),.65);
}
.iz-anahtar input:checked + .iz-kaydir::after{
  transform:translateX(17px);
  background:var(--altin);
}
.iz-anahtar input:focus-visible + .iz-kaydir{outline:2px solid var(--altin);outline-offset:2px}

/* Senkron özeti — hangi kümeden kaç kayıt gitti/geldi (2026-08-11).
   Eskiden yalnız "Eşitlendi ✓" vardı; bir küme sunucuda sessizce
   reddedilirse hiçbir yerde görünmüyordu. */
.dd-bulut-ozet { margin-top: 10px; }
.dd-bulut-ozet .sk-bas { font-size: 9px; letter-spacing: .18em; opacity: .55; margin-bottom: 6px; }
.dd-bulut-ozet .sk-sat { display: flex; align-items: baseline; gap: 8px;
  font-size: 11px; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.dd-bulut-ozet .sk-sat span { flex: 1; opacity: .8; }
.dd-bulut-ozet .sk-sat b { font-variant-numeric: tabular-nums; }
.dd-bulut-ozet .sk-sat i { font-style: normal; font-size: 10px; opacity: .5; }
.dd-bulut-ozet .sk-hata { font-size: 11px; color: #e0a3a3; line-height: 1.5; }

/* ══ ÜST ÇUBUK + AÇIK TEMA DÜZELTMELERİ — 2026-08-15 ══════════════
   Hakan'ın bildirdiği belirtiler: üst menü mobilde sığmıyor, logo
   yazı olarak çok yer kaplıyor, açık temada yazılar soluk. */

/* LOGO — mobilde ikon, masaüstünde yazı.
   Yazı 8 harf × .35em harf aralığıyla mobilde tek başına ~150px
   yiyordu; üst çubuğun taşmasının ikinci sebebiydi.
   2026-08-15 ikinci tur: ikon 30px'te "belirgin değil" geldi —
   38px'e çıkarıldı ve kontrast için hafif gölge eklendi. Marka
   ikonu çok renkli olduğu için currentColor işe yaramıyor. */
.hl-ikon {
  display: none; width: 38px; height: 38px; vertical-align: middle;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.28)) saturate(1.15);
}
html.light .hl-ikon { filter: drop-shadow(0 1px 2px rgba(0,0,0,.22)) saturate(1.2) contrast(1.1); }
.hl-yazi { display: inline; }
@media (max-width: 720px) {
  .hl-ikon { display: inline-block; }
  .hl-yazi { display: none; }
}

/* KONTROL GRUBU — ortada ve parmakla basılabilir.
   Hakan: "− A + / tema / ses" grubu çok küçük, basmakta zorlanıyor
   ve ortalansın. Apple/Google dokunma hedefi alt sınırı 44px;
   ikonlar 22px'e, hedef alanı 44px'e çıkarıldı. */
#app-header {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.header-sagda { justify-content: center; }
.header-tema, .header-ses {
  font-size: 22px;
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}
.header-font { display: inline-flex; align-items: center; }
.header-font .hf-btn, .header-font .hf-a-btn {
  min-width: 40px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 19px; padding: 0;
}
@media (max-width: 720px) {
  /* Grup ortada: solda logo, sağda isim; kontroller aradaki boşluğu
     alıp kendi içinde ortalanıyor. */
  .header-sagda { flex: 1 1 auto; justify-content: center; gap: 2px; }
  .header-tema, .header-ses { min-width: 42px; min-height: 44px; font-size: 21px; }
  .header-font .hf-btn, .header-font .hf-a-btn { min-width: 36px; min-height: 44px; font-size: 18px; }
}

/* AÇIK TEMA KONTRASTI.
   Tokenlar zaten koyulaştırılmıştı ama ince Cormorant/Cinzel
   gövdelerde ekranda yine soluk okunuyordu. Metin katmanlarını bir
   tık daha koyulaştırıyoruz; altın zaten WCAG AA (7.23). */
html.light {
  --m1: #100C18;
  --m2: #241E2E;
  --m3: #3C3448;
}
html.light .metin-statik,
html.light .metin-ai,
html.light p,
html.light .hr-p { color: var(--text-0); }
/* Silik/ikincil satırlar okunabilir alt sınırın üstünde kalsın */
html.light .dd-bldr-ac,
html.light .iz-aciklama,
html.light .mses-not { color: var(--m3); }