/* Hesabım Sayfası Özel Stilleri */

/* ─── a4 (2026-08-17): HEADER HAMBURGER ───────────────
   Düğmenin kendisi değişmedi; açtığı yer artık küçük bir kart değil, tam
   ekran bir Ayarlar sheet'i (aşağıda). */
.menu-btn{
  width:32px;height:32px;border-radius:9px;border:1px solid transparent;background:transparent;
  color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:border-color .2s,background .2s;
}
.menu-btn:hover,.menu-btn.active{border-color:var(--b2);background:var(--s2)}
.menu-btn svg{stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}

/* ─── AYARLAR — TAM EKRAN SHEET (2026-08-18) ───────────────────────────────
   iOS Ayarlar tarzı: bölüm başlıkları + veri/nav/aksiyon/CTA satırları.
   a4'teki küçük açılır kartın (.account-menu, artık kaldırıldı) yerine geldi.
   `display:none` → `.open{display:flex}` deseni bilinçli: `[hidden]` DEĞİL,
   çünkü sağa kaydırma geçişi transform'la yapılıyor ve elementin HER ZAMAN
   layout'ta olması (yalnızca ekran dışında durması) gerekiyor — `display:none`
   transform geçişini iptal ederdi (bkz .date-sheet'teki AYNI not). */
.settings-sheet{
  display:flex;flex-direction:column;
  position:fixed;inset:0;z-index:120;
  background:var(--bg);
  transform:translateX(100%);
  transition:transform .22s ease;
  /* OKUNABİLİRLİK DÜZELTMESİ (2026-08-19 kullanıcı isteği: "yazılar hiç belirgin
     değil, çok soluklar") — global --muted (#6E6E6C, all-styles.css) siteyi
     sarmalayan yüzlerce kuralda kullanıldığı için ORADA değiştirilmedi; yalnızca
     bu sheet'in (Ayarlar + Bildirimler, ikisi de bu sınıfı paylaşıyor) DOM
     alt ağacında --muted'ı burada YENİDEN TANIMLAYARAK daha koyu bir gri
     kullanılıyor — section title/değer/açıklama metinlerinin HEPSİ var(--muted)
     okuduğu için tek satırlık bu override otomatik yayılıyor. */
  --muted:#4A4A48;
}
.settings-sheet.open{transform:translateX(0)}
.settings-topbar{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;
  padding:16px 20px;border-bottom:1px solid var(--b1);flex:0 0 auto;
}
.settings-topbar > *:nth-child(1){justify-self:start}
.settings-topbar > *:nth-child(2){justify-self:center}
.settings-topbar > *:nth-child(3){justify-self:end}
.settings-close{background:none;border:0;padding:0;cursor:pointer;font-family:var(--mono)}
.settings-title{font-size:18px}
.settings-body{flex:1 1 auto;overflow-y:auto;padding:8px 20px 40px}

.settings-section-title{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);padding:20px 4px 8px;
}
.settings-list{
  background:var(--s1);border:1px solid var(--b2);border-radius:14px;overflow:hidden;
}
.settings-row{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;border:0;border-bottom:1px solid var(--b1);
  background:transparent;font-family:var(--serif);font-size:15px;color:var(--text);
  text-align:left;cursor:pointer;transition:background .15s;
  /* text-decoration: satırların çoğu <button>/<div>, orada atıl. 10.09.2026'da
     "Geçmiş Okumalarım" gerçek bir <a> oldu (bkz pages/hesabim.html) — altı
     çizilmesin diye. color zaten yukarıda var, link mavisi de gelmiyor. */
  text-decoration:none;
}
.settings-list > .settings-row:last-child{border-bottom:0}
.settings-row:active{background:var(--s2)}
.settings-row--disabled{cursor:default;color:var(--muted)}
.settings-row--disabled:active{background:transparent}
/* E-posta gibi salt-okunur satırlar (2026-08-19) — .settings-row--disabled'dan
   FARKLI: etiket normal renkte kalır (satır tıklanamaz olsa da "pasif/gelecek
   özellik" izlenimi vermesin), yalnızca değeri soluklaştırılır (aşağıda). */
.settings-row--readonly{cursor:default}
.settings-row--readonly:active{background:transparent}
.settings-row-label--danger{color:#c0392b}
.settings-row-value{font-family:var(--mono);font-size:13px;color:var(--muted)}
.settings-row-value--soft{opacity:.68}
/* İsim satırı (2026-08-19): tıklanınca .settings-row-value yerine bu input
   görünür — aynı satırda, aynı hizada, yalnızca yazılabilir. */
.settings-row-input{
  border:0;background:transparent;outline:0;padding:0;flex:1 1 auto;min-width:0;
  text-align:right;font-family:var(--mono);font-size:13px;color:var(--text);
}
.settings-chevron{stroke:var(--muted);fill:none;flex:0 0 auto}

/* "Planımı Yükselt" satırının rozeti (Linalux Plus / Pro bölümü) — YALNIZCA
   GÖRSEL, satırın kendisi settings-row--disabled (bkz yukarı, kullanıcı kararı). */
.settings-cta-btn{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--bg);
  background:var(--ak);padding:9px 16px;border-radius:20px;white-space:nowrap;
}

/* ─── BİLDİRİM LİSTESİ (2026-08-19) ───────────────────────────────────────
   #notificationSheet .settings-sheet'i AYNEN kullanıyor (üstteki bar/section
   title/settings-list hepsi paylaşılıyor) — yalnızca #settingsSheet'in
   ÜSTÜNE binmesi gerekiyor (ikisi de açık olabilir: Ayarlar → Bildirimler). */
#notificationSheet{ z-index:130; }

.settings-row--toggle{ cursor:default; }
.settings-row--toggle:active{ background:transparent; }
.settings-row-text{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.settings-row-desc{
  font-family:var(--mono); font-size:11px; color:var(--muted); line-height:1.4;
}

/* iOS tarzı pill switch — projede ilk kez (2026-08-19), toggle satırlarının
   HEPSİ bunu paylaşıyor. Erişilebilirlik: gerçek <input type=checkbox>
   ekranokuyucu/klavye için duruyor, yalnızca görsel olarak gizleniyor
   (opacity:0, display:none DEĞİL — Tab ile odaklanabilsin diye). */
.settings-toggle{ position:relative; display:inline-block; width:44px; height:26px; flex:0 0 auto; }
.settings-toggle input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; z-index:1; }
.settings-toggle-track{
  position:absolute; inset:0; border-radius:13px; background:var(--b2);
  transition:background .18s ease;
}
.settings-toggle-thumb{
  position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%;
  background:var(--bg); box-shadow:0 1px 3px color-mix(in srgb, var(--golge) 30%, transparent);
  transition:transform .18s ease;
}
.settings-toggle input:checked + .settings-toggle-track{ background:var(--ak); }
.settings-toggle input:checked + .settings-toggle-track .settings-toggle-thumb{ transform:translateX(18px); }
.settings-toggle input:focus-visible + .settings-toggle-track{ outline:2px solid var(--ak); outline-offset:2px; }

.notif-permission{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; margin-bottom:16px;
  background:var(--s1); border:1px solid var(--b2); border-radius:14px;
}
.notif-permission-text{ font-family:var(--mono); font-size:12px; color:var(--muted); line-height:1.5; }
.notif-permission-btn{
  flex:0 0 auto; font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--bg);
  background:var(--ak); border:0; padding:9px 14px; border-radius:20px; cursor:pointer; white-space:nowrap;
}
.notif-footnote{
  font-family:var(--mono); font-size:11px; color:var(--muted); line-height:1.5;
  padding:16px 4px 0; text-align:center;
}

/* ─── ALT BAĞLANTILAR — liste/kart tasarımının DIŞINDA (2026-08-19 kullanıcı
   isteği): Gizlilik Politikası + Koşullar yan yana, hemen altında Hesabı Sil.
   Üçü de altı çizili + büyük harf — kullanıcının açık isteği, projenin genel
   "footer linkleri soluk/küçük" konvansiyonundan BİLİNÇLİ bir sapma (Hesabı
   Sil özellikle görünür olmalı, yanlışlıkla tıklanmasın diye küçük harfle
   gizlenmesin). */
.settings-legal-row{
  display:flex; justify-content:center; gap:24px;
  margin-top:28px; padding-top:20px; border-top:1px solid var(--b1);
}
.settings-legal-link{
  background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  text-decoration:underline; text-underline-offset:3px;
  color:var(--muted);
}
.settings-legal-link:hover{ color:var(--text); }
.settings-danger-link{
  display:block; width:100%; text-align:center; margin-top:14px;
  color:#c0392b;
}
.settings-danger-link:hover{ color:#a3311f; }

/* ─── YAZI TİPİ DÜZELTMESİ ───────────────────────────────────────
   hesabim.html <head>'inde Cormorant Garamond + DM Mono YÜKLENİYOR ama
   hiç uygulanmıyordu: all-styles.css hem --serif hem --mono'yu Cantarell'e
   sabitliyor ve bu sayfa değişkenleri hiç geçersiz kılmıyordu. Sonuç —
   iki font indiriliyor, sayfa Cantarell'le çiziliyordu; yani hesabım
   sayfası ana sayfadan farklı görünüyordu.

   Değerler pages/ altındaki kardeş sayfalarla (gizlilik-politikasi.html,
   kullanim-kosullari.html) BİREBİR aynı — o ikisi bunu baştan doğru yapıyordu.
   Bu dosya all-styles.css'ten SONRA yükleniyor, :root özgüllüğü eşit,
   dolayısıyla buradaki tanım kazanır.

   features/* sayfalarına DOKUNULMADI: onlar core/tokens.css üzerinden
   bilinçli olarak Cantarell kullanıyor, ayrı bir sistem (bkz INDEX.md
   "CSS Mimarisi — İKİ FARKLI SİSTEM BİR ARADA"). */
:root{
  --serif:'Cormorant Garamond',Georgia,serif;
  --mono:'DM Mono',monospace;
}

/* ─── PROFİL FOTOĞRAFI (User-tests.md B7 · E1) ───────────────────
   İşleme ve KIRPMA ARAYÜZÜ core/avatar.js'te; burası yalnızca önizleme.

   Elips (104×128) GERİ GELDİ ve artık güvenli. Kısa tarihçe, çünkü aynı
   yanlışa dönmek kolay:
     · Başta kap 104×128 elipsti ama avatar.js fotoğrafı MERKEZDEN KARE
       kırpıyordu → kare görsel portre elipse geriliyor, özne kayıyordu.
     · Ara çözüm kabı kare yapmaktı; gerilme bitti ama asıl sorun sürdü —
       geometrik merkez fotoğrafın öznesi değil, yüz yine kenarda kalıyordu.
     · Gerçek çözüm: kadrajı KULLANICI seçiyor. Otomatik kırpma kalktığı için
       oran da serbest kaldı ve elips geri alınabildi.
   🔴 Bu iki sayı core/avatar.js'teki ORAN_EN/ORAN_BOY ile AYNI ORANDA olmak
   ZORUNDA — ayrışırsa kırpma arayüzünde görülen kadraj ile kaydedilen
   fotoğraf farklı olur. */
/* a1/a2 (2026-08-17): avatar artık kendi başına ortalı bir sütun değil —
   solda avatar (dikeyde ortalı, "orta-sol"), sağında isim + Burç/Yükselen. */
.identity-sec{display:flex;align-items:center;gap:16px;padding:28px 20px 8px}
.identity-info{display:flex;flex-direction:column;gap:5px;min-width:0}
.identity-name{
  font-family:var(--serif);font-size:16px;font-weight:400;color:var(--text);
  margin-bottom:5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Güneş/Ay/Yükselen rozetleri — "(Aslan, Oğlak, Kova)" formatı, her biri kendi
   gökcismi ikonuyla (2026-08-17). .identity-sign artık tek metin değil, chip'lerin
   flex kabı; [hidden] hâlâ çalışır çünkü display burada yalnızca .open benzeri bir
   sınıf değil doğrudan görünür durumdayken uygulanıyor (bkz hesabim.js renderIdentityHeader
   — hiçbir burç yoksa üst kap hidden kalır, o zaman bu display kuralı devreye girmez). */
.identity-sign{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  font-family:var(--mono);font-size:14px;letter-spacing:.06em;color:var(--muted);
}
.identity-sign[hidden]{display:none}
.sign-chip{display:flex;align-items:center;gap:4px}
.sign-chip[hidden]{display:none}
.sign-ico{width:23px;height:23px;flex:0 0 auto;color:var(--muted)}
.sign-txt{font-size:14px}
.avatar-wrap{
  position:relative;width:104px;height:128px;border-radius:50%;
  background:var(--s2);border:1px solid var(--b2);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  cursor:pointer;transition:border-color .2s;
}
.avatar-wrap:hover,.avatar-wrap:focus-visible{border-color:var(--ak);outline:none}
/* Fotoğraf daireyi TAM doldurur ve kırpma merkezden alınır.
   `position:absolute` bilinçli: eskiden flex öğesiydi ve boyutu kabın flex
   hizalamasına + <img>'in satır-içi taban çizgisine bağlıydı; bu iki etken
   fotoğrafı birkaç piksel kaydırabiliyordu. Mutlak konumda kabın (position:
   relative) tam sınırına oturuyor, hizalamadan tamamen bağımsız.
   `object-position:center` varsayılanla aynı ama NİYET yazılı olsun diye
   açıkça duruyor — kırpma merkezi ileride değiştirilirse tek yer burası. */
/* K19 (28.09.2026): display:block UA'nın [hidden]{display:none} kuralını eziyordu →
   src'siz <img hidden> yer tutucunun üstüne 102×126 kutu çiziyordu. Kardeşleri
   (.identity-sign / .sign-chip) bu korumayı zaten taşıyor. */
.avatar-img[hidden]{display:none}
.avatar-img{
  position:absolute;top:0;right:0;bottom:0;left:0;
  width:100%;height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  /* 2026-08-17 kullanıcı isteği: fotoğrafı dairenin içinde 5px sağa kaydır
     (kırpma merkezini DEĞİŞTİRMEZ — yalnızca görüntülenen kadrajın konumu). */
  transform:translateX(5px);
}
.avatar-placeholder{color:var(--muted);display:flex}
.avatar-edit{
  position:absolute;right:4px;bottom:8px;width:26px;height:26px;border-radius:50%;
  background:var(--ak);color:var(--bg);display:flex;align-items:center;justify-content:center;
  border:2px solid var(--bg);
}
.avatar-status{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.04em;min-height:14px;text-align:center;padding:2px 20px 8px}

/* ─── DOĞUM HARİTASI / BURÇ · EV / AYARLAR sekmeleri (2026-08-20) ───
   Sade metin sekmeler (kullanıcı kararı — ikonsuz), aralarında ince dikey
   çizgiler; seçili sekme .active ile alt çizgi kalınlaşır. Panel altında da
   AYNI dilde: sütunlar arası ince dikey çizgi (.natal-cell border-right),
   satırlar arası dinamik yükseklikte yatay bölücü (.natal-row border-bottom —
   sabit satır yüksekliği YOK, içeriğe göre doğal olarak uzar/kısalır). */
.chart-tabs{display:flex;margin:14px 20px 0;border:1px solid var(--b2);border-bottom:none;border-radius:14px 14px 0 0;overflow:hidden;background:var(--s1)}
.chart-tab{flex:1;padding:13px 6px;background:transparent;border:none;border-right:1px solid var(--b2);font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);cursor:pointer;text-align:center;transition:color .2s;box-shadow:inset 0 -2px 0 transparent}
.chart-tab:last-child{border-right:none}
.chart-tab.active{color:var(--text);box-shadow:inset 0 -2px 0 var(--ak)}
.chart-panel{margin:0 20px 20px;border:1px solid var(--b2);border-radius:0 0 14px 14px;background:var(--s1);min-height:180px}
.chart-page{padding:18px}

/* Doğum haritası çizimi (2026-08-20 kullanıcı güncellemesi — boyut %70 büyütüldü:
   230px → 391px). Renkler artık site temasından (var(--muted) vb.) DEĞİL,
   kullanıcının verdiği kesin hex değerlerinden — bu sayfa hiç dark mode
   desteklemiyor (bkz all-styles.css :root, tek palet), o yüzden sabit hex
   güvenli: Baskın çizgiler #111, ikincil/ayrım çizgileri #888-#CCC aralığında
   hiyerarşiye göre, gezegen glifleri #111 (vektörel, unicode YOK — yukarıdaki
   NATAL_PLANET_GLYPHS). */
.natal-wheel-wrap{display:flex;flex-direction:column;align-items:center;gap:10px}
.natal-wheel{width:100%;max-width:391px;height:auto}
/* 2026-08-24 kesin revizyon (profildogumharitasi.md) — renk şeması TERSİNE
   ÇEVRİLDİ: burç kuşağı artık SİYAH dolgu + BEYAZ metin/ayrım çizgileri
   (.nw-zodiac-bg/.nw-sign/.nw-tick), gezegen şeridi BEYAZ zemin (.nw-subring).
   Yapısal sınırlar (dış çember, kuşak/şerit arası, şerit/merkez arası — hepsi
   .nw-ring) KOYU/net kalmaya devam ediyor. Ev çizgisi (.nw-cusp) kodda
   kullanımı kalktığı için buradan da SİLİNDİ. */
.nw-zodiac-bg{fill:none;stroke:#111111}
.nw-subring{fill:none;stroke:#FFFFFF}
.nw-ring{fill:none;stroke:#1A1A1A;stroke-width:1}
.nw-ring-deco{fill:none;stroke:#E0E0E0;stroke-width:1}
.nw-tick{stroke:rgba(255,255,255,.4);stroke-width:1}
.nw-slot{stroke:#E5E5E5;stroke-width:.6}
.nw-sign{font-size:6.6px;font-family:var(--mono);font-weight:500;letter-spacing:.15em;fill:#FFFFFF}
.nw-glyph-s{fill:none;stroke:#111111;stroke-width:.85;stroke-linecap:round;stroke-linejoin:round}
.nw-glyph-f{fill:#111111;stroke:none}
/* Üç kademeli açı çizgisi hiyerarşisi — kullanıcının profildogumharitasi.md'de
   verdiği TAM hex/opaklık değerleri (majör/minör/silik). Kavuşum/paralel demet
   (.nw-asp-bundle) bu belgede ayrı anılmıyor, önceki haliyle korunuyor. */
.nw-asp-major{stroke:#111111;stroke-width:1.5;opacity:1}
.nw-asp-minor{stroke:#333333;stroke-width:1;stroke-dasharray:4,4}
.nw-asp-bundle{stroke:#111111;stroke-width:1;opacity:.85}
.nw-asp-faint{stroke:#999999;stroke-width:.75;opacity:.4}
.nw-asc-arrow{fill:#111111}
.natal-wheel-empty,.natal-wheel-note{font-size:12.5px;color:var(--muted);text-align:center;line-height:1.6;padding:0 6px}
.natal-wheel-note{margin-top:2px}

/* ═══════════════════════════════════════════════════════════════
   ÇARK V2 (.nw2-*) — 2026-09-09, dogumharitasifix.md
   Yukarıdaki .nw-* kuralları AYNEN DURUYOR: saat/yer bilmeyen kullanıcı
   hâlâ 2026-08-24'ün sade çarkını görüyor (§00 S4). Bu blok yalnızca
   `natal_wheel` dolu olduğunda devreye giren V2 çizimine aittir.

   Renkler hedef görselden (_reference/hedef/HaritaSON.jpeg) PİKSEL
   ÖRNEKLEMESİYLE alındı — her öğenin çevresindeki en doygun piksel:
     ateş #953E23/#AF4217 · toprak #59663B · hava #695C63/#7A6A74
     su #446075/#4A6173 · kişisel #720B0E/#58121A · dış #092D51/#001F45
     açılar #457440/#2B4F29 · sert açı #964943 · eksen #343295
   (JPEG kenar yumuşatması örnekleri KOYULAŞTIRDIĞI için son değerler
   bir tık açıldı — beyaz zeminde görseldeki algılanan tonu verir.)
   Sayfa dark mode DESTEKLEMİYOR (all-styles.css tek palet) → sabit hex. */

/* KARAR K4: görseldeki sans. Yeni webfont İNDİRİLMEZ — iOS'ta SF (The Pattern
   ile aynı görünüm), Android'de Roboto, sıfır ağ maliyeti. Site geneli
   --serif/--mono'ya DOKUNULMADI; bu değişken YALNIZCA çarkın içinde geçerli. */
.nw2,.natal-lejant{
  --nw-sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
.nw2{
  width:100%;max-width:420px;height:auto;display:block;
  /* Çark bir FOTOĞRAFTIR (K7): üzerinde seçilebilir metin/öğe yok. */
  user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
}
/* Zoom>1 iken imleç "gezdirilebilir" olduğunu belli etsin (masaüstü). */
.natal-wheel-wrap.nw2-zoomlu .nw2{cursor:grab}
.natal-wheel-wrap.nw2-zoomlu .nw2:active{cursor:grabbing}

/* ── Halkalar ve yapı ──
   🔴 Bütün çizgilerde `vector-effect:non-scaling-stroke`: kalınlık viewBox
   biriminde DEĞİL, EKRAN pikselinde ölçülür. İki gerekçe, ikisi de ölçüldü:
   1) 1000 birimlik viewBox ~420 px'e sığıyor, yani 1 birim = 0,42 px —
      birim cinsinden yazılan kalınlıklar varsayılan görünümde saç teline
      dönüyordu (ilk render: 1,6 birim = 0,67 px, glifler soluk çıktı).
   2) Zoom viewBox ile yapıldığı için ölçekli kalınlık 5×'te 5 kat şişerdi.
      non-scaling ile çizgi her yakınlıkta AYNI ağırlıkta kalır; yalnızca
      metin ve glif büyür — yakınlaşmanın amacı zaten okumak. */
.nw2 line,.nw2 path,.nw2 circle{vector-effect:non-scaling-stroke}
.nw2-ring{fill:none;stroke:#1A1A1A;stroke-width:1.5}
.nw2-burc-sinir{stroke:#1A1A1A;stroke-width:1.1}
.nw2-cusp{stroke:#333333;stroke-width:1.2}
.nw2-cusp--eksen{stroke:#111111;stroke-width:1.6}
.nw2-isaret{stroke:#3C3C3C;stroke-width:1.4}
.nw2-ev-no{font-family:var(--nw-sans);font-size:24px;fill:#7A7A7A}

/* ── Glif çizim dili (eski .nw-glyph-* ile aynı teknik) ── */
.nw2-gs{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nw2-gf{fill:currentColor;stroke:none}

/* ── Element renkleri (burç glifleri: hem kuşakta hem etiket yığınında) ── */
.nw2-el-ates{color:#A8452A}
.nw2-el-toprak{color:#63713A}
.nw2-el-hava{color:#756A78}
.nw2-el-su{color:#4A6577}

/* ── Gövde renkleri ── */
.nw2-gv-kisisel{color:#7E1A1C}   /* ☽ ☉ ☿ ♀ ♂ */
.nw2-gv-dis{color:#16345C}       /* ♃ ♄ ♅ ♆ ♇ */
.nw2-gv-dugum{color:#50407C}     /* ☊ ☋ */
.nw2-gv-kucuk{color:#7A6055}     /* ⚷ ⚶ */
.nw2-retro{color:#6B5B5B}
.nw2-aci-etiket{color:#35683A}   /* As Ds MC IC Vx Ax */

/* ── Etiket metinleri — derece/dakika HER ZAMAN siyah (görselde de öyle),
      gövde/açı rengi yalnızca glifi ve As/Ds/… kısaltmasını boyar. ── */
.nw2-t-derece{font-family:var(--nw-sans);font-size:27px;fill:#111111}
.nw2-t-dakika{font-family:var(--nw-sans);font-size:25px;fill:#111111}
.nw2-t-aci{font-family:var(--nw-sans);font-size:28px;fill:currentColor}

/* ── Merkez: yalnız SERT açılar kırmızı (K3), eksenler mavi ── */
.nw2-aci-sert{stroke:#B0402F;stroke-width:1.2;fill:none}
.nw2-eksen{stroke:#3C3A9C;stroke-width:1.2;fill:none}

/* ═══════════════════════════════════════════════════════════════
   SEMBOL LEJANTI (dogumharitasifix.md §11.2) — referans HaritaLejant.jpeg
   Renkler BURADA TANIMLANMAZ: hücreler çarkın kendi sınıflarını
   (.nw2-el-* / .nw2-gv-* / .nw2-aci-etiket / .nw2-retro) taşır, yani
   lejant ile çark ASLA ayrışamaz (L5 "lejantta ayrı hex YOK").
   Kapalı başlar; yalnızca V2 çizilince JS `hidden`'ı kaldırır. */
.natal-lejant{margin-top:16px;border-top:1px solid var(--b1)}
.natal-lejant > summary{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 2px;cursor:pointer;list-style:none;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);transition:color .2s;
}
.natal-lejant > summary::-webkit-details-marker{display:none}
/* Sitedeki .settings-chevron dilinin aynısı — sağda ince ok, açıkken döner. */
.natal-lejant > summary::after{
  content:"";width:7px;height:7px;flex:0 0 auto;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s;
}
.natal-lejant[open] > summary{color:var(--text)}
.natal-lejant[open] > summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.natal-lejant-govde{padding:2px 0 14px}
.natal-lejant-baslik{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);padding:10px 2px 6px;
}
.natal-lejant-izgara{display:grid;grid-template-columns:repeat(3,1fr)}
.natal-lejant-hucre{
  display:flex;align-items:center;gap:7px;padding:9px 0;
  /* 16 px (usertests2.md F, kullanıcı isteği — eskiden 12,5 px).
     🔴 PUNTO TEK BAŞINA DEĞİŞTİRİLEMEZ: 12,5 px "354 px panelde 3 sütun"
     varsayımıyla seçilmişti. 16 px'te gerçek fontla (Cormorant Garamond —
     bu dosyanın :root'u --serif'i ona çeviriyor) ÖLÇÜLDÜ: en uzun üç ad
     ("Medium Coeli" 90 px, "Güney Düğüm" 91 px, "Kuzey Düğüm" 88 px)
     3 sütunda ancak 390 px ekrandan itibaren sığıyor; 360/375 px'te
     ellipsis ile kırpılıyordu. Bu yüzden 2 sütuna düşme eşiği 359 px'ten
     399 px'e çekildi (aşağıya bak) — 390 px tam sınırda geçtiği için
     yuvarlandı: Cormorant yüklenmezse yedek Georgia daha geniş. */
  font-size:16px;min-width:0;
  /* 🔴 Burada `color` TANIMLANMAZ. İlk yazımda `color:currentColor` vardı ve
     hücrenin element/gövde sınıfını (.nw2-el-ates gibi) EZİYORDU: aynı
     özgüllük (0,1,0) ama bu kural stylesheet'te SONRA geldiği için kazanıyor,
     currentColor da sayfanın metin rengine (#0A0A0A) çözülüyordu — lejant
     tamamen siyah çıkıyordu. `cark-uctan-uca.mjs` bunu gerçek tarayıcıda
     getComputedStyle ile yakaladı. Renk YALNIZCA hücrenin kendi çark
     sınıfından gelir. */
}
.natal-lejant-ad{color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Lejant sembolleri çarkın glif dilini AYNEN kullanır (stroke, non-scaling). */
.nw2-sym{width:18px;height:18px;flex:0 0 auto;display:block;overflow:visible}
/* Açı kısaltmaları (As/Ds/IC/MC/Vx/Ax) lejantta METİN — kendi punto sınıfı
   olmalı: .nw2-t-aci'nin 28 px'i 12 birimlik sembol kutusunu taşırıyordu. */
.nw2-sym-metin{font-family:var(--nw-sans);font-size:7px;fill:currentColor}
.nw2-sym line,.nw2-sym path,.nw2-sym circle{vector-effect:non-scaling-stroke}
.natal-lejant-ayirici{
  height:1px;background:var(--b1);margin:14px auto 4px;max-width:180px;
}
/* Dar telefonda 3 sütun sıkışırsa 2'ye düşer — ad kısaltılmasın.
   Eşik 359 px İDİ; punto 12,5 → 16 px olunca ölçümle 399 px'e çekildi
   (bkz .natal-lejant-hucre). 360/375/390 px'lik telefonlar artık 2 sütun
   görüyor ve "Medium Coeli"/"Güney Düğüm" tam yazılıyor. */
@media (max-width:399px){
  .natal-lejant-izgara{grid-template-columns:repeat(2,1fr)}
}

.natal-table{display:flex;flex-direction:column}
.natal-row{display:grid;grid-template-columns:1fr 1fr .8fr;border-bottom:1px solid var(--b1)}
.natal-row:last-child{border-bottom:none}
.natal-row--head{border-bottom:1px solid var(--b2)}
.natal-row--head .natal-cell{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
/* 18 px (usertests2.md F) — eskiden 13,5 px. Üç sütunlu tablo (1fr 1fr .8fr);
   hücreler `white-space` kısıtlamıyor, uzun değer alt satıra sarar, kırpılmaz. */
.natal-cell{padding:11px 8px;font-size:18px;color:var(--text);border-right:1px solid var(--b1)}
.natal-cell:last-child{border-right:none}

/* ─── KIRPMA ARAYÜZÜ (core/avatar.js kurar) ──────────────────────
   Katmanın DOM'u JS'te üretiliyor; burada yalnızca görünüm.
   Performans notu: sürükleme sırasında DEĞİŞEN TEK ŞEY `.av-gorsel`in
   `transform`u. `will-change` ile öğe kendi katmanına alınıyor, böylece
   her karede yeniden boyama (paint) değil yalnızca kompozisyon oluyor. */
.av-kirp{
  position:fixed;inset:0;z-index:300;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:color-mix(in srgb, var(--perde) 92%, transparent);
}
.av-kirp-kutu{
  width:100%;max-width:380px;
  background:var(--s1);border:1px solid var(--b2);border-radius:20px;
  padding:20px;display:flex;flex-direction:column;gap:12px;
}
.av-kirp-baslik{font-size:19px;font-weight:300;color:var(--text)}
.av-kirp-yardim{font-family:var(--mono);font-size:11px;color:var(--muted);line-height:1.5;letter-spacing:.03em}

.av-sahne{
  display:flex;justify-content:center;
  /* Tarayıcının kendi kaydırma/yakınlaştırma jestlerini kapat — yoksa
     parmak hareketi sayfayı kaydırır, kırpma çalışmaz. */
  touch-action:none;
  user-select:none;-webkit-user-select:none;
  cursor:grab;
}
.av-sahne:active{cursor:grabbing}
/* Çerçeve oranı = avatarın oranı (104:128). Genişlik ekrana göre esner,
   yükseklik `aspect-ratio` ile oranı korur — iki ayrı sayı tutmaya gerek yok. */
.av-cerceve{
  position:relative;overflow:hidden;
  width:min(240px, 62vw);aspect-ratio:104/128;
  border-radius:50%;
  background:var(--s2);
  border:1px solid var(--b2);
}
.av-gorsel{
  position:absolute;top:0;left:0;
  transform-origin:0 0;
  will-change:transform;
  /* Görsel kendi doğal boyutunda duruyor; ölçeği transform veriyor.
     max-width sıfırlanmazsa sayfa CSS'i onu daraltıp modeli bozar. */
  max-width:none;max-height:none;
  pointer-events:none;
}
/* Maske: elipsin dışını karartır — kadrajın sınırı gözle görünür olsun. */
.av-maske{
  position:absolute;inset:0;pointer-events:none;
  box-shadow:0 0 0 9999px color-mix(in srgb, var(--perde) 55%, transparent);
  border-radius:50%;
}
.av-zoom{width:100%;accent-color:var(--ak);cursor:pointer}
.av-kirp-dugmeler{display:flex;gap:10px}
.av-btn{
  flex:1;padding:13px;border-radius:12px;border:0;cursor:pointer;
  background:var(--ak);color:var(--bg);
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
}
.av-btn-ikincil{background:transparent;border:1px solid var(--b2);color:var(--muted)}
.av-btn-ikincil:hover{border-color:var(--text);color:var(--text)}

/* ─── FORTUNE LIST ─── */
/* Liste kutusu — .settings-list ile AYNI kabuk (arka plan/çerçeve/radius bir kez,
   satır başına değil). 10.09.2026: dört ayrı kart + 12px gap yerine tek kutu;
   amaç Hesabım'da yer kazanmak (kullanıcı isteği). Boş durum bu kutunun DIŞINDA
   duruyor (bkz pages/hesabim.html), yoksa hiç okuma yokken boş bir çerçeve kalırdı. */
.fortune-list{background:var(--s1);border:1px solid var(--b2);border-radius:14px;overflow:hidden}
.fortune-list:empty{display:none}
.fortune-empty{text-align:center;padding:60px 20px}
.fortune-empty-icon{font-size:64px;margin-bottom:16px;opacity:.3}
.fortune-empty-text{font-size:15px;color:var(--muted);margin-bottom:20px}
.fortune-empty-btn{display:inline-block;padding:12px 24px;background:var(--ak);color:var(--bg);border-radius:12px;text-decoration:none;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;transition:opacity .2s}
.fortune-empty-btn:active{opacity:.85}

/* Satır: HİZMET ADI — TARİH — chevron. Sol .fortune-thumb 10.09.2026'da KALDIRILDI
   (60x60'lık kutu hiçbir zaman bir görsel taşımıyordu, boş gri alandı) ve kart
   .settings-row ölçülerine indi: ~92px → ~48px. Sağdaki ok da kendi yuvarlak
   .fortune-arrow rozetini bıraktı, Ayarlar'ın .settings-chevron'ını kullanıyor —
   "bu satır bir yere gider" işareti site genelinde artık tek bir biçim. */
.fortune-item{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--b1);cursor:pointer;transition:background .15s;text-decoration:none;color:inherit}
.fortune-list > .fortune-item:last-child{border-bottom:0}
.fortune-item:active{background:var(--s2)}
.fortune-name{flex:1 1 auto;min-width:0;font-family:var(--serif);font-size:15px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fortune-date{flex:0 0 auto;font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.08em;white-space:nowrap}
/* "Tümünü Gör" — listenin 5. satırı, ayrı bir buton DEĞİL: aynı satır kabuğu,
   yalnızca metni .settings-section-title punto/harflerinde ve vurgu renginde. */
.fortune-item--all .fortune-name{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ak)}
.fortune-item--all .settings-chevron{stroke:var(--ak)}

/* ─── PROFILE CARD ─── */
.profile-card{background:var(--s1);border:1px solid var(--b2);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:14px}
.profile-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.profile-label{font-family:var(--mono);font-size:14px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.profile-value{font-size:18px;color:var(--text)}
/* .profile-action/.profile-edit-btn/.profile-edit-input SİLİNDİ (2026-09-02) —
   yalnızca ana sayfadaki Profil Bilgileri kartı kullanıyordu, o kart Ayarlar'a
   taşındığı için kaldırıldı (bkz pages/hesabim.html). .profile-edit-status KALDI
   — delete-account-status/coupon-status/feedback-status onu hâlâ paylaşıyor. */
.profile-edit-status{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.03em;line-height:1.5;min-height:14px}

/* ─── DOĞUM TARİHİ/SAATİ — iOS WHEEL PICKER ───
   🔴 2026-08-19 (User-tests.md G2): kurallar core/wheel-picker.css'e taşındı —
   Döngülerim de aynı sistemi kullanmaya başladı, iki sayfanın da tek ortak
   kaynağı olsun diye. Bu dosya artık onu <link>'liyor (bkz <head>), kuralları
   burada YENİDEN YAZMIYOR. */

/* ─── SUBSCRIPTION CARD ─── */
.subscription-card{background:var(--s1);border:1px solid var(--b2);border-radius:14px;padding:20px}
.sub-status{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.sub-badge{padding:6px 12px;border-radius:20px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.sub-badge.active{background:color-mix(in srgb, var(--ok) 15%, transparent);border:1px solid color-mix(in srgb, var(--ok) 30%, transparent);color:var(--ok)}
.sub-badge.inactive{background:color-mix(in srgb, var(--muted) 15%, transparent);border:1px solid var(--b2);color:var(--muted)}
.sub-price{font-size:18px;font-weight:300;color:var(--text)}
.sub-next{font-family:var(--mono);font-size:11px;color:var(--muted);margin-bottom:16px}
.sub-next strong{color:var(--text)}
.sub-cancel{width:100%;padding:12px;background:transparent;border:1px solid var(--b2);border-radius:10px;font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.08em;cursor:pointer;transition:all .2s}
.sub-cancel:hover{border-color:var(--tehlike);color:var(--tehlike)}

/* ─── LOGOUT BUTTON ─── */
.logout-btn{width:100%;padding:14px;background:transparent;border:1px solid var(--b2);border-radius:12px;font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:all .2s}
.logout-btn:hover{border-color:var(--text);color:var(--text)}

/* ─── PASSWORD MODAL ─── */
.modal{display:none;position:fixed;inset:0;background:color-mix(in srgb, var(--perde) 95%, transparent);z-index:200;align-items:center;justify-content:center;padding:20px}
.modal.open{display:flex}
.modal-content{width:100%;max-width:400px;background:var(--s1);border:1px solid var(--b2);border-radius:20px;overflow:hidden}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid var(--b1)}
.modal-header h3{font-size:20px;font-weight:300}
.modal-close{width:32px;height:32px;border-radius:50%;border:1px solid var(--b2);background:transparent;color:var(--text);font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}
.modal-close:hover{border-color:var(--ak);color:var(--ak)}
.modal-body{padding:20px}
.modal-desc{font-size:14px;color:var(--muted);margin-bottom:20px;line-height:1.6}

/* ─── GERİ BİLDİRİM (2026-08-20) ─── all-styles.css'teki .fd yalnızca input'u
   stilliyor, buradaki textarea için ayrıca gerekiyor. ★ karakteri site genelinde
   zaten monokrom kullanılıyor (bkz core/star-badge.js) — ayrı bir "altın" renk
   kasıtlı olarak eklenmedi, --text/--b3 ile aynı dilde kalıyor. */
.fd textarea{width:100%;background:var(--s2);border:1px solid var(--b2);border-radius:8px;padding:12px;color:var(--text);font-family:var(--serif);font-size:15px;outline:none;resize:vertical;transition:border-color .2s}
.fd textarea:focus{border-color:var(--ak)}
.fd textarea::placeholder{color:var(--muted)}
.fb-stars{display:flex;gap:10px;justify-content:center;font-size:34px;line-height:1;margin-bottom:8px}
.fb-star{color:var(--b3);cursor:pointer;transition:color .15s,transform .1s;user-select:none}
.fb-star:hover{transform:scale(1.08)}
.fb-star.active{color:var(--text)}