/* ═══════════════════════════════════════════════════════════
   BATTERY HEALTH TRACKER — TASARIM SİSTEMİ v2
   "Sağlık uygulaması" dili

   ── YÖN ──
   Açık zemin varsayılan. Yumuşak köşeler, bol boşluk, gölge
   ile derinlik. Referans: sağlık takip uygulamaları.

   Koyu tema İKİNCİ SINIF DEĞİL: aynı özenle ayarlandı. Eski
   sitede koyu asıl, açık sonradan eklenmişti ve açık temada
   bazı yerler okunmuyordu.

   ── KURAL ──
   Bu dosyanın dışında sabit renk, sabit boşluk, sabit yarıçap
   YAZILMAZ. Hepsi buradaki değişkenlerden gelir. Eski
   style.css'te 14 farklı boşluk ve 9 farklı yarıçap vardı;
   tutarsızlık oradan geliyordu.
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════
   1. YAZI TİPİ

   ── NEDEN KENDİ SUNUCUMUZDAN ──
   CSP font-src yalnızca 'self' izinli; Google Fonts bağlantısı
   tarayıcı tarafından engellenirdi. Ayrıca üçüncü taraf font
   isteği, ilk boyamayı geciktiren en yaygın sebeplerden.

   Değişken font: 200–800 arası tüm ağırlıklar TEK dosyada.
   İki dosya toplam 52 KB — sabit ağırlıklı bir aileyi ayrı ayrı
   indirmenin üçte biri.

   font-display: swap → font inerken metin GÖRÜNÜR. Aksi hâlde
   yazı yüklenene kadar sayfa boş kalır.
   ═══════════════════════════════════════ */
@font-face {
    font-family: 'Jakarta';
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url('/fonts/jakarta-latin-ext.woff2') format('woff2');
    /* Türkçe harfler (ğ ş ı İ) bu aralıkta */
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                   U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                   U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                   U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Jakarta';
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url('/fonts/jakarta-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
                   U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
                   U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                   U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══════════════════════════════════════
   2. BELİRTEÇLER — AÇIK TEMA (varsayılan)
   ═══════════════════════════════════════ */
:root {
    /* ── Zeminler ──
       Saf beyaz zemin yerine hafif kırık beyaz: kartlar
       (saf beyaz) zeminden ayrışsın diye. Her şey beyaz
       olursa derinlik kaybolur. */
    --z-arka:      #f6f7fa;
    --z-kart:      #ffffff;
    --z-ikincil:   #f0f2f7;
    --z-ucuncul:   #e6e9f0;
    --z-ustu:      #dde1eb;

    /* ── Kenarlıklar ──
       Sağlık dilinde kenarlık İNCE ve az; ayrışmayı çoğunlukla
       gölge sağlıyor. */
    --kenar:       rgba(16, 22, 40, .08);
    --kenar-koyu:  rgba(16, 22, 40, .14);

    /* ── Metin ──
       Üçü de beyaz üzerinde WCAG AA geçiyor (ölçüldü). */
    --yazi:        #10131c;
    --yazi-2:      #515a6e;
    --yazi-3:      #646c7f;   /* 4.38:1 idi — AA altında kalıyordu */

    /* ── Marka ──
       Logodaki mor ile aynı aileden ama açık zeminde
       okunabilir olacak kadar koyulaştırıldı. */
    --marka:       #4f46e5;
    --marka-koyu:  #4338ca;
    --marka-acik:  #eef0fe;

    /* ── DOLGULU YÜZEY İÇİN AYRI RENK ──
       Bir marka rengi hem "metin rengi" hem "buton zemini"
       olarak kullanılamıyor. Koyu temada --marka açık olmak
       ZORUNDA (koyu zeminde okunsun diye), ama o açık moru
       buton zemini yapıp üstüne beyaz yazınca kontrast
       2.92:1'e düşüyordu — okunmuyor.

       Bu yüzden ikiye ayrıldı:
         --marka        → metin, bağlantı, ikon
         --marka-dolgu  → dolgulu yüzeyin zemini
         --marka-uzeri  → o zeminin üstündeki yazı
       Her temada ikisi birbirine göre ayarlanıyor. */
    --marka-dolgu: #4f46e5;
    --marka-uzeri: #ffffff;

    /* ── İkincil vurgu ──
       Sıcaklık katmak için mercan. Sağlık uygulamalarında
       tek renkli arayüz steril duruyor.

       İlk seçtiğim #e8546b beyaz üstünde 3.55:1 kalıyordu —
       AA eşiği 4.5. Gözle bakınca sorun görünmüyordu; ölçünce
       çıktı. Koyulaştırıldı: 4.88:1. */
    --vurgu:       #d13350;
    --vurgu-acik:  #fdeff1;

    /* ── Durum renkleri ──
       Pil sağlığı için asıl anlam taşıyanlar bunlar. */
    --iyi:         #067a53;
    --iyi-acik:    #e6f6ef;
    --dikkat:      #a45c07;
    --dikkat-acik: #fdf3e4;
    --kotu:        #c8302a;
    --kotu-acik:   #fdeeed;
    --bilgi:       #0a6fa8;
    --bilgi-acik:  #e7f3fa;

    /* ── Gölge ──
       Yalnızca iki seviye. Eskiden üç tanım vardı ve hangisinin
       nerede kullanıldığı belirsizdi.
       İki katmanlı gölge: yakın olan kenarı tanımlar, uzak olan
       yüzeyi kaldırır. Tek katman yassı görünüyor. */
    --golge:    0 1px 2px rgba(16, 22, 40, .05),
                0 4px 16px rgba(16, 22, 40, .06);
    --golge-hi: 0 2px 4px rgba(16, 22, 40, .06),
                0 12px 32px rgba(16, 22, 40, .10);

    /* Odak halkası — klavye kullanıcısı nerede olduğunu görmeli */
    --odak: 0 0 0 3px rgba(79, 70, 229, .28);

    /* ── Boşluk ── 4px tabanlı, altı değer.
       Ara değer gerekiyorsa tasarım yanlıştır. */
    --b1: 4px;
    --b2: 8px;
    --b3: 12px;
    --b4: 16px;
    --b5: 24px;
    --b6: 32px;
    --b7: 48px;
    --b8: 64px;

    /* ── Yarıçap ── dört değer */
    --y-kucuk: 8px;
    --y-orta:  12px;
    --y-kart:  18px;
    --y-tam:   999px;

    /* ── Tipografi ölçeği ──
       1.25 oranlı modüler ölçek. clamp() ile ekran genişliğine
       göre esniyor; mobilde ayrı medya sorgusu yazmaya gerek
       kalmıyor. */
    --y-xs:  0.75rem;    /* 12 */
    --y-sm:  0.875rem;   /* 14 */
    --y-md:  1rem;       /* 16 — gövde */
    --y-lg:  1.125rem;   /* 18 */
    --y-xl:  1.375rem;   /* 22 */
    --y-2xl: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
    --y-3xl: clamp(1.875rem, 1.5rem + 1.8vw, 2.5rem);
    --y-4xl: clamp(2.25rem, 1.6rem + 3vw, 3.5rem);

    /* ── Hareket ──
       Üç süre. Uzun animasyon arayüzü ağır hissettiriyor.
       yay: hafif geri sekme — sağlık dilinin yumuşaklığı
       buradan geliyor. */
    --sure-hizli: 140ms;
    --sure:       220ms;
    --sure-yavas: 360ms;
    --gecis:      cubic-bezier(.32, .72, 0, 1);

    /* ── Altın (premium) ──
       Düğme zemini ile üstündeki yazı AA geçmeli; ölçüldü. */
    --altin:         #b8860b;
    --altin-zemin:   #fdf6e3;
    --altin-zemin-2: #faedcd;
    --altin-yazi:    #6b4c00;
    --altin-cizgi:   rgba(184, 134, 11, .28);

    --yay:        cubic-bezier(.34, 1.4, .64, 1);

    --kap: 1120px;   /* içerik genişliği */
    color-scheme: light;
}

/* ═══════════════════════════════════════
   3. KOYU TEMA

   Açık temanın renklerini ters çevirmek YETMİYOR: koyu zeminde
   aynı doygunluktaki renkler titriyor ve okunmuyor. Durum
   renkleri ayrıca açıldı, zeminler mavimsi-nötr tutuldu (saf
   gri koyu tema ucuz görünüyor).
   ═══════════════════════════════════════ */
[data-theme="dark"] {
    --z-arka:      #0d0f15;
    --z-kart:      #151823;
    --z-ikincil:   #1c2030;
    --z-ucuncul:   #252a3c;
    --z-ustu:      #2f3549;

    --kenar:       rgba(255, 255, 255, .08);
    --kenar-koyu:  rgba(255, 255, 255, .15);

    --altin:         #ffd15c;
    --altin-zemin:   rgba(255, 209, 92, .10);
    --altin-zemin-2: rgba(255, 209, 92, .17);
    --altin-yazi:    #ffd98a;
    --altin-cizgi:   rgba(255, 209, 92, .26);

    --yazi:        #eceef6;
    --yazi-2:      #a8b0c4;
    --yazi-3:      #7d8599;

    --marka:       #8b8cf7;
    --marka-koyu:  #a5a6fa;
    --marka-acik:  rgba(139, 140, 247, .14);

    /* Koyu temada dolgu AÇIK, üstündeki yazı KOYU (8.10:1).
       Modern koyu arayüzlerin çözümü bu; koyu zemin üstüne
       koyu buton koymak yerine parlak buton + koyu yazı. */
    --marka-dolgu: #a5a6fa;
    --marka-uzeri: #14142b;

    --vurgu:       #f4798c;
    --vurgu-acik:  rgba(244, 121, 140, .14);

    --iyi:         #38d399;
    --iyi-acik:    rgba(56, 211, 153, .13);
    --dikkat:      #f5b544;
    --dikkat-acik: rgba(245, 181, 68, .13);
    --kotu:        #f87a72;
    --kotu-acik:   rgba(248, 122, 114, .13);
    --bilgi:       #56b6ef;
    --bilgi-acik:  rgba(86, 182, 239, .13);

    /* Koyu zeminde gölge işe yaramıyor (siyah üstüne siyah).
       Derinliği üstten gelen ince bir ışık çizgisiyle veriyoruz. */
    --golge:    0 1px 0 rgba(255, 255, 255, .04) inset,
                0 4px 20px rgba(0, 0, 0, .45);
    --golge-hi: 0 1px 0 rgba(255, 255, 255, .06) inset,
                0 16px 44px rgba(0, 0, 0, .6);

    --odak: 0 0 0 3px rgba(139, 140, 247, .38);
    color-scheme: dark;
}

/* ═══════════════════════════════════════
   4. TEMEL
   ═══════════════════════════════════════ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: 'Jakarta', -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, sans-serif;
    font-size: var(--y-md);
    line-height: 1.6;
    /* Sayılar aynı genişlikte: ölçüm değeri değişirken
       yerleşim zıplamıyor. Bir ölçüm aracında şart. */
    font-variant-numeric: tabular-nums;
    background: var(--z-arka);
    color: var(--yazi);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background var(--sure) var(--gecis),
                color var(--sure) var(--gecis);
}

::selection { background: var(--marka-dolgu); color: var(--marka-uzeri); }

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

/* ── Odak ──
   :focus-visible kullanıyoruz, :focus değil. Fareyle tıklayan
   kullanıcıda halka çıkmıyor, klavyeyle gezende çıkıyor. */
:focus { outline: none; }
:focus-visible {
    outline: none;
    box-shadow: var(--odak);
    border-radius: var(--y-kucuk);
}

/* Ekran okuyucuya özel */
.gizli-metin {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ═══════════════════════════════════════
   5. TİPOGRAFİ
   ═══════════════════════════════════════ */
h1, h2, h3, h4 {
    line-height: 1.2;
    letter-spacing: -.022em;
    font-weight: 700;
    color: var(--yazi);
    text-wrap: balance;      /* başlık son satırda tek kelime kalmasın */
}

h1 { font-size: var(--y-3xl); letter-spacing: -.03em; }
h2 { font-size: var(--y-2xl); }
h3 { font-size: var(--y-xl); }
h4 { font-size: var(--y-lg); }

p { text-wrap: pretty; }

.dev-baslik {
    font-size: var(--y-4xl);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.05;
}

.alt-metin { color: var(--yazi-2); font-size: var(--y-md); line-height: 1.7; }
.kucuk     { color: var(--yazi-3); font-size: var(--y-sm); }
.etiket {
    font-size: var(--y-xs);
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--yazi-3);
}

a { color: var(--marka); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Sayı gösterimi ──
   Ölçüm sonucu sayfanın kahramanı. İri, sıkı, ağır. */
.sayi {
    font-size: var(--y-4xl);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.sayi small { font-size: .42em; font-weight: 600; color: var(--yazi-3); }

/* ═══════════════════════════════════════
   6. YERLEŞİM
   ═══════════════════════════════════════ */
.kap { max-width: var(--kap); margin-inline: auto; padding-inline: var(--b5); }
.kap-dar { max-width: 680px; margin-inline: auto; padding-inline: var(--b5); }

.yigin  { display: flex; flex-direction: column; gap: var(--b4); }
.satir  { display: flex; align-items: center; gap: var(--b3); flex-wrap: wrap; }
.aralik { display: flex; align-items: center; justify-content: space-between; gap: var(--b4); }

.izgara {
    display: grid;
    gap: var(--b4);
    grid-template-columns: repeat(auto-fit, minmax(var(--min, 240px), 1fr));
}

/* ═══════════════════════════════════════
   7. KART
   ═══════════════════════════════════════ */
.kart {
    background: var(--z-kart);
    border: 1px solid var(--kenar);
    border-radius: var(--y-kart);
    padding: var(--b5);
    box-shadow: var(--golge);
    transition: box-shadow var(--sure) var(--gecis),
                transform var(--sure) var(--gecis),
                border-color var(--sure) var(--gecis);
}

/* Yalnızca TIKLANABİLİR kartlar yükseliyor. Her kartı
   hareket ettirmek, neyin tıklanabilir olduğunu belirsizleştirir. */
a.kart:hover, button.kart:hover, .kart.tiklanir:hover {
    transform: translateY(-3px);
    box-shadow: var(--golge-hi);
    border-color: var(--kenar-koyu);
    text-decoration: none;
}

.kart-baslik {
    display: flex;
    align-items: center;
    gap: var(--b2);
    font-size: var(--y-lg);
    font-weight: 700;
    margin-bottom: var(--b4);
}

.kart-vurgulu {
    background: linear-gradient(160deg, var(--marka-acik), var(--z-kart) 60%);
    border-color: color-mix(in srgb, var(--marka) 24%, transparent);
}

/* ═══════════════════════════════════════
   8. BUTON
   ═══════════════════════════════════════ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--b2);
    padding: var(--b3) var(--b5);
    min-height: 44px;              /* dokunma hedefi alt sınırı */
    border: 1px solid transparent;
    border-radius: var(--y-orta);
    background: var(--z-ikincil);
    color: var(--yazi);
    font: inherit;
    font-size: var(--y-sm);
    font-weight: 650;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background var(--sure-hizli) var(--gecis),
                transform var(--sure-hizli) var(--gecis),
                box-shadow var(--sure-hizli) var(--gecis),
                border-color var(--sure-hizli) var(--gecis);
}
.btn:hover { background: var(--z-ucuncul); text-decoration: none; }
/* Basılma geri bildirimi: dokunmatik ekranda hover yok,
   kullanıcı bastığını başka türlü anlamıyor. */
.btn:active { transform: scale(.97); }
.btn:disabled, .btn[aria-disabled="true"] {
    opacity: .5; cursor: not-allowed; transform: none;
}

.btn-ana {
    background: var(--marka-dolgu);
    color: var(--marka-uzeri);
    box-shadow: 0 1px 2px rgba(16, 22, 40, .12);
}
.btn-ana:hover { filter: brightness(1.08); }
[data-theme="dark"] .btn-ana:hover { filter: brightness(1.12); }

.btn-cizgi { background: transparent; border-color: var(--kenar-koyu); color: var(--yazi); }
.btn-cizgi:hover { background: var(--z-ikincil); border-color: var(--marka); }

.btn-sade { background: transparent; color: var(--yazi-2); }
.btn-sade:hover { background: var(--z-ikincil); color: var(--yazi); }

.btn-tehlike { background: var(--kotu-acik); color: var(--kotu); }
.btn-tehlike:hover { background: color-mix(in srgb, var(--kotu) 16%, transparent); }

.btn-buyuk { padding: var(--b4) var(--b6); font-size: var(--y-md); min-height: 52px; }
.btn-kucuk { padding: var(--b2) var(--b3); font-size: var(--y-xs); min-height: 34px; }
.btn-tam   { width: 100%; }

/* Yükleniyor durumu — düğme genişliği DEĞİŞMİYOR,
   yoksa yerleşim zıplıyor */
.btn[data-yukleniyor="true"] { color: transparent; pointer-events: none; position: relative; }
.btn[data-yukleniyor="true"]::after {
    content: '';
    position: absolute;
    width: 16px; height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    color: #fff;
    animation: donme .6s linear infinite;
}
@keyframes donme { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════
   9. FORM ALANLARI
   ═══════════════════════════════════════ */
.alan {
    width: 100%;
    padding: var(--b3) var(--b4);
    min-height: 46px;
    border: 1px solid var(--kenar-koyu);
    border-radius: var(--y-orta);
    background: var(--z-kart);
    color: var(--yazi);
    font: inherit;
    font-size: var(--y-md);
    transition: border-color var(--sure-hizli) var(--gecis),
                box-shadow var(--sure-hizli) var(--gecis);
}
.alan::placeholder { color: var(--yazi-3); }
.alan:focus { border-color: var(--marka); box-shadow: var(--odak); outline: none; }
.alan:disabled { background: var(--z-ikincil); color: var(--yazi-3); cursor: not-allowed; }
.alan[aria-invalid="true"] { border-color: var(--kotu); }

.alan-grup { display: flex; flex-direction: column; gap: var(--b2); }
.alan-grup label { font-size: var(--y-sm); font-weight: 600; color: var(--yazi-2); }
.alan-ipucu { font-size: var(--y-xs); color: var(--yazi-3); }
.alan-hata  { font-size: var(--y-xs); color: var(--kotu); font-weight: 600; }

/* ═══════════════════════════════════════
   10. ROZET
   ═══════════════════════════════════════ */
.rozet {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px var(--b3);
    border-radius: var(--y-tam);
    font-size: var(--y-xs);
    font-weight: 700;
    line-height: 1.4;
    background: var(--z-ikincil);
    color: var(--yazi-2);
    white-space: nowrap;
}
.rozet-iyi    { background: var(--iyi-acik);    color: var(--iyi); }
.rozet-dikkat { background: var(--dikkat-acik); color: var(--dikkat); }
.rozet-kotu   { background: var(--kotu-acik);   color: var(--kotu); }
.rozet-bilgi  { background: var(--bilgi-acik);  color: var(--bilgi); }
.rozet-marka  { background: var(--marka-acik);  color: var(--marka); }

/* Durum noktası — renk tek başına anlam taşımamalı,
   yanında hep metin var. Renk körlüğü için şart. */
.nokta {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════
   11. ÖLÇÜM HALKASI

   Sağlık uygulaması dilinin imza bileşeni. Yüzdeyi hem sayı
   hem şekil olarak gösteriyor.

   ── NEDEN SVG ──
   conic-gradient ile de yapılabilirdi ama uçları
   yuvarlatılamıyor ve animasyonu Safari'de takılıyor.
   stroke-dasharray her yerde akıcı çalışıyor.
   ═══════════════════════════════════════ */
.halka { position: relative; display: inline-grid; place-items: center; }
.halka svg { transform: rotate(-90deg); overflow: visible; }

.halka-iz {
    fill: none;
    stroke: var(--z-ucuncul);
    stroke-width: 10;
}
.halka-yol {
    fill: none;
    stroke: var(--halka-renk, var(--iyi));
    stroke-width: 10;
    stroke-linecap: round;
    /* --oran (0–1) JS'ten geliyor; sıfırdan hedefe doğru dolarak
       geliyor ki ölçümün "yapıldığı" hissedilsin. */
    stroke-dasharray: var(--cevre, 314);
    stroke-dashoffset: calc(var(--cevre, 314) * (1 - var(--oran, 0)));
    transition: stroke-dashoffset 1.1s var(--gecis), stroke .4s var(--gecis);
}
.halka-orta {
    position: absolute;
    display: grid;
    place-items: center;
    text-align: center;
    line-height: 1.1;
}
.halka-orta .sayi { font-size: var(--y-3xl); }

/* ═══════════════════════════════════════
   12. İLERLEME ÇUBUĞU
   ═══════════════════════════════════════ */
.cubuk {
    height: 8px;
    border-radius: var(--y-tam);
    background: var(--z-ucuncul);
    overflow: hidden;
}
.cubuk > i {
    display: block;
    height: 100%;
    width: 100%;
    border-radius: inherit;
    background: var(--cubuk-renk, var(--marka));
    /* width yerine transform: yeniden yerleşim tetiklemiyor */
    transform: scaleX(var(--oran, 0));
    transform-origin: left;
    transition: transform .9s var(--gecis);
}

/* ═══════════════════════════════════════
   13. UYARI KUTUSU
   ═══════════════════════════════════════ */
.uyari {
    display: flex;
    gap: var(--b3);
    padding: var(--b4);
    border-radius: var(--y-orta);
    border: 1px solid transparent;
    font-size: var(--y-sm);
    line-height: 1.65;
}
.uyari b { display: block; margin-bottom: 2px; color: var(--yazi); }
.uyari-bilgi  { background: var(--bilgi-acik);  border-color: color-mix(in srgb, var(--bilgi) 26%, transparent); }
.uyari-iyi    { background: var(--iyi-acik);    border-color: color-mix(in srgb, var(--iyi) 26%, transparent); }
.uyari-dikkat { background: var(--dikkat-acik); border-color: color-mix(in srgb, var(--dikkat) 30%, transparent); }
.uyari-kotu   { background: var(--kotu-acik);   border-color: color-mix(in srgb, var(--kotu) 28%, transparent); }
.uyari-ikon   { flex-shrink: 0; font-size: 1.1em; line-height: 1.5; }

/* ═══════════════════════════════════════
   14. TABLO
   ═══════════════════════════════════════ */
.tablo-sar { overflow-x: auto; border-radius: var(--y-orta); border: 1px solid var(--kenar); }
.tablo { width: 100%; border-collapse: collapse; font-size: var(--y-sm); background: var(--z-kart); }
.tablo th {
    text-align: left;
    padding: var(--b3) var(--b4);
    background: var(--z-ikincil);
    color: var(--yazi-2);
    font-weight: 650;
    font-size: var(--y-xs);
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.tablo td { padding: var(--b3) var(--b4); border-top: 1px solid var(--kenar); }
.tablo tbody tr { transition: background var(--sure-hizli) var(--gecis); }
.tablo tbody tr:hover { background: var(--z-ikincil); }

/* ═══════════════════════════════════════
   15. BOŞ DURUM
   Kullanıcının en çok kafası karışan an. Ne olduğunu ve
   ne yapması gerektiğini söylemeli.
   ═══════════════════════════════════════ */
.bos {
    display: grid;
    place-items: center;
    gap: var(--b3);
    padding: var(--b8) var(--b5);
    text-align: center;
    color: var(--yazi-2);
}
.bos-ikon {
    display: grid; place-items: center;
    width: 56px; height: 56px;
    border-radius: var(--y-kart);
    background: var(--z-ikincil);
    font-size: 1.5rem;
}

/* ═══════════════════════════════════════
   16. ÜST BAR
   ═══════════════════════════════════════ */
.ust {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--z-arka) 80%, transparent);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-bottom: 1px solid var(--kenar);
}
.ust-ic {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--b4);
    max-width: var(--kap);
    margin-inline: auto;
    padding: var(--b3) var(--b5);
}
.marka-yazi {
    display: inline-flex; align-items: center; gap: var(--b2);
    font-weight: 750; font-size: var(--y-md);
    letter-spacing: -.02em; color: var(--yazi);
}
.marka-yazi:hover { text-decoration: none; }
.marka-yazi img { width: 28px; height: 28px; }
.marka-vurgu { color: var(--iyi); -webkit-text-fill-color: var(--iyi); }

/* ═══════════════════════════════════════
   17. HAREKET

   ── KÜTÜPHANE YOK, BİLEREK ──
   GSAP ya da benzeri bir kütüphane 60–100 KB. Aşağıdaki
   etkilerin hepsi tarayıcının kendi motorunda çalışıyor:
   ana iş parçacığını meşgul etmiyor, JS yüklenmeden önce
   başlıyor ve sıfır bayt maliyeti var.
   ═══════════════════════════════════════ */

/* ── Kaydırdıkça belirme ──
   animation-timeline: view() → öğe ekrana girdikçe animasyon
   ilerliyor. Eskiden bunun için IntersectionObserver + JS
   gerekiyordu. Desteklemeyen tarayıcıda animasyon hiç
   çalışmıyor ve öğe normal görünüyor — bozulma yok. */
@supports (animation-timeline: view()) {
    .belir {
        animation: belirme linear both;
        animation-timeline: view();
        animation-range: entry 10% cover 32%;
    }
}
@keyframes belirme {
    from { opacity: 0; transform: translateY(22px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

/* ── Açılışta belirme ──
   @starting-style: öğe DOM'a eklendiği anda nereden başlayacağını
   söylüyor. Eskiden bunun için setTimeout ile sınıf eklemek
   gerekiyordu ve ilk karede titriyordu. */
.gir {
    opacity: 1;
    transform: none;
    transition: opacity var(--sure-yavas) var(--gecis),
                transform var(--sure-yavas) var(--yay);
}
@starting-style {
    .gir { opacity: 0; transform: translateY(14px); }
}

/* Sıralı gecikme — kartlar arka arkaya beliriyor */
.gir-1 { transition-delay: 60ms; }
.gir-2 { transition-delay: 120ms; }
.gir-3 { transition-delay: 180ms; }
.gir-4 { transition-delay: 240ms; }

/* ── Sayfalar arası geçiş ──
   Çok sayfalı sitede bile uygulama hissi veriyor.
   Desteklemeyen tarayıcı normal sayfa yüklemesi yapıyor. */
@view-transition { navigation: auto; }

/* ── Nabız ──
   Ölçüm sürerken. İki saniyede bir, yumuşak. */
@keyframes nabiz {
    0%, 100% { opacity: 1; }
    50%      { opacity: .45; }
}
.nabiz { animation: nabiz 2s var(--gecis) infinite; }

/* ── İskelet yükleme ──
   Boş ekran yerine içeriğin şeklini göstermek, bekleme
   süresini kısa hissettiriyor. */
.iskelet {
    border-radius: var(--y-kucuk);
    background: linear-gradient(90deg,
        var(--z-ikincil) 25%, var(--z-ucuncul) 37%, var(--z-ikincil) 63%);
    background-size: 400% 100%;
    animation: kayma 1.4s ease infinite;
}
@keyframes kayma {
    from { background-position: 100% 50%; }
    to   { background-position: 0 50%; }
}

/* ═══════════════════════════════════════
   18. HAREKET AZALTMA

   İşletim sisteminde "hareketi azalt" açık olan kullanıcıda
   animasyon baş dönmesi ve mide bulantısı yapabiliyor.
   Bu bir tercih değil, erişilebilirlik gereği.

   Animasyonu tamamen SIFIRLAMIYORUZ (0.01ms) — bazı geçişler
   tamamlandığında tetiklenen kodlar var; sıfırlarsak
   transitionend hiç ateşlenmiyor.
   ═══════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .belir, .gir { opacity: 1 !important; transform: none !important; }
    @view-transition { navigation: none; }
}

/* ═══════════════════════════════════════
   19. YAZDIRMA
   PDF rapor alan kullanıcı için.
   ═══════════════════════════════════════ */
@media print {
    body { background: #fff; color: #000; }
    .ust, .btn, .yuzen { display: none !important; }
    .kart { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
}

/* ═══════════════════════════════════════════════════════════
   20. DİNAMİK HAREKET KATMANI

   Buradaki her etki tarayıcının kendi motorunda çalışıyor.
   Kütüphane yok, JS'e bağımlılık en aza indirildi.

   ── ÖLÇÜ ──
   Hareket dikkat çekmek için değil, ANLAM taşımak için var:
   ne yüklendiğini, neyin değiştiğini, nereye bakılacağını
   söylüyor. Süslemek için eklenen hareket bir süre sonra
   yorucu oluyor ve insanlar siteden çıkıyor.
   ═══════════════════════════════════════════════════════════ */

/* ── Yaşayan zemin ──
   Yavaşça yer değiştiren renk bulutları. 26 saniyelik döngü:
   fark edilir ama takip edilmez. Daha hızlısı dikkat çalıyor.

   filter/blur değil translate kullanıyoruz — blur her karede
   yeniden hesaplanıyor ve mobilde ısıtıyor. */
.zemin {
    position: fixed;
    inset: -20%;
    z-index: -1;
    pointer-events: none;
    opacity: .55;
    background:
        radial-gradient(38rem 30rem at 18% 12%, color-mix(in srgb, var(--marka) 22%, transparent), transparent 62%),
        radial-gradient(34rem 26rem at 82% 8%,  color-mix(in srgb, var(--iyi) 16%, transparent), transparent 60%),
        radial-gradient(30rem 24rem at 62% 88%, color-mix(in srgb, var(--vurgu) 13%, transparent), transparent 58%);
    animation: zeminAkis 26s var(--gecis) infinite alternate;
}
@keyframes zeminAkis {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(-2.5%, 1.8%, 0) scale(1.06); }
    100% { transform: translate3d(2%, -1.5%, 0) scale(1.02); }
}
[data-theme="dark"] .zemin { opacity: .4; }

/* ── Sayı sayma ──
   İstatistikler sıfırdan hedefe sayarak geliyor. Sabit duran
   bir sayıya kimse bakmıyor; sayan sayı gözü tutuyor.
   Değeri JS yazıyor, animasyonu CSS yapıyor. */
@property --sayac {
    syntax: '<integer>';
    initial-value: 0;
    inherits: false;
}
.sayan {
    counter-reset: s var(--sayac);
    transition: --sayac 1.6s var(--gecis);
}
.sayan::after { content: counter(s); }

/* ── Sıralı giriş ──
   Kardeş öğeler arka arkaya beliriyor. Hepsi aynı anda
   belirirse göz nereye bakacağını bilemiyor.
   nth-child ile gecikme: HTML'e sınıf yazmaya gerek yok. */
.sirali > * {
    animation: sıraliGiris .6s var(--yay) both;
}
.sirali > *:nth-child(1) { animation-delay: .04s; }
.sirali > *:nth-child(2) { animation-delay: .12s; }
.sirali > *:nth-child(3) { animation-delay: .20s; }
.sirali > *:nth-child(4) { animation-delay: .28s; }
.sirali > *:nth-child(5) { animation-delay: .36s; }
.sirali > *:nth-child(6) { animation-delay: .44s; }
@keyframes sıraliGiris {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}

/* ── Kaydırma ilerleme çizgisi ──
   Sayfanın neresinde olduğunu gösteriyor. Uzun sayfada
   "daha ne kadar var" sorusunu cevaplıyor.
   Tamamen CSS: scroll() zaman çizelgesi. */
.ilerleme-cizgi {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 60;
    transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--marka), var(--iyi));
}
@supports (animation-timeline: scroll()) {
    .ilerleme-cizgi {
        transform: scaleX(0);
        animation: cizgiDol linear;
        animation-timeline: scroll(root block);
    }
}
@keyframes cizgiDol { to { transform: scaleX(1); } }

/* ── Yakınlaşarak belirme ──
   .belir'in daha güçlü hâli. Kahraman bölümler için. */
@supports (animation-timeline: view()) {
    .belir-guclu {
        animation: guacluBelirme linear both;
        animation-timeline: view();
        animation-range: entry 4% cover 40%;
    }
}
@keyframes guacluBelirme {
    from { opacity: 0; transform: translateY(46px) scale(.94); filter: blur(6px); }
    to   { opacity: 1; transform: none; filter: none; }
}

/* ── Yapışkan sahne ──
   Bölüm ekranda dururken içeriği değişiyor. "Nasıl çalışır"
   adımlarını anlatmanın en akıcı yolu. */
.sahne { position: sticky; top: 14vh; }

/* ── Vurgu altı çizgisi ──
   Başlıktaki anahtar kelimenin altında büyüyen çizgi.
   Göz oraya gidiyor. */
.alti-cizili {
    position: relative;
    white-space: nowrap;
}
.alti-cizili::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -.08em;
    height: .1em;
    border-radius: var(--y-tam);
    background: linear-gradient(90deg, var(--iyi), var(--marka));
    transform: scaleX(0);
    transform-origin: left;
    animation: cizgiCiz .8s var(--gecis) .5s forwards;
}
@keyframes cizgiCiz { to { transform: scaleX(1); } }

/* ── Nefes alan halka ──
   Ölçüm beklerken. Sabit bir daire "bozuk mu" hissi veriyor. */
.nefes { animation: nefesAl 3.2s var(--gecis) infinite; }
@keyframes nefesAl {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%      { transform: scale(1.04); opacity: .88; }
}

/* ── Yüzen kart ──
   Kahraman görselin hafifçe süzülmesi. 7 saniye: fark
   edilmeyecek kadar yavaş ama sayfayı canlı tutuyor. */
.suzul { animation: suzulme 7s var(--gecis) infinite alternate; }
@keyframes suzulme {
    from { transform: translateY(-6px); }
    to   { transform: translateY(6px); }
}

/* ── İmleci takip eden parlaklık ──
   Kartın üzerinde farenin olduğu yerde yumuşak bir ışık.
   Konumu JS bir değişkene yazıyor, boyamayı CSS yapıyor —
   her fare hareketinde stil hesaplanmıyor. */
.isikli { position: relative; overflow: hidden; }
.isikli::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--sure) var(--gecis);
    background: radial-gradient(
        16rem circle at var(--fx, 50%) var(--fy, 50%),
        color-mix(in srgb, var(--marka) 13%, transparent),
        transparent 60%);
}
.isikli:hover::before { opacity: 1; }

/* ── Kayan şerit ──
   Desteklenen cihaz modelleri gibi tekrar eden içerik için.
   İki kopya yan yana; biri bitince diğeri devam ediyor,
   dikiş görünmüyor. */
.serit { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.serit-ic { display: flex; gap: var(--b5); width: max-content; animation: seritKay 38s linear infinite; }
.serit:hover .serit-ic { animation-play-state: paused; }
@keyframes seritKay { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
    .zemin, .sirali > *, .suzul, .nefes, .serit-ic,
    .alti-cizili::after, .belir-guclu {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;
    }
    .alti-cizili::after { transform: scaleX(1) !important; }
    .ilerleme-cizgi { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   21. İKONLAR

   ── EMOJİ NEDEN KULLANILMIYOR ──
   Emoji her işletim sisteminde farklı çiziliyor ve kendi
   rengini taşıyor: tema değişince uyum sağlamıyor, durum
   rengini (iyi/kötü) alamıyor, marka tutarlılığını bozuyor.
   Logodaki ⚡ tam bu yüzden kaldırılmıştı.

   ── ÖLÇÜ ──
   1em: ikon yanındaki yazıyla aynı boyda büyüyüp küçülüyor.
   Sabit piksel verseydik her boyutta ayrı sınıf gerekirdi.

   ── HİZALAMA ──
   vertical-align yerine flex kullanan kaplarda sorun çıkmıyor;
   satır içi metinle beraber kullanıldığında -.14em ile
   optik olarak ortalanıyor (yazının taban çizgisi ile ikonun
   geometrik merkezi aynı yerde değil).
   ═══════════════════════════════════════════════════════════ */
.ikon {
    /* ── display NEDEN AÇIKÇA YAZILI ──
       Yukarıda `img, svg, video { display: block }` sıfırlaması
       var (resim altındaki taban çizgisi boşluğunu siliyor).
       O kural ikonları da blok yapıyordu: esnek kapsayıcıda
       fark etmiyor, ama SATIR İÇİ metinle yan yana duran her
       ikon kendi satırına düşüyordu.

       En görünür kurbanı skor kartıydı: beş yıldız yan yana
       değil ALT ALTA diziliyor, kart 110px yerine 270px
       oluyordu. Ölçtük: yıldızların y değerleri
       225 / 258 / 292 / 325 / 359 — beş ayrı satır.

       Aşağıdaki `vertical-align` zaten satır içi bir kutu
       varsayıyor; yani niyet baştan buydu, sıfırlama sessizce
       eziyordu. */
    display: inline-block;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    vertical-align: -.14em;
    /* Renk yok: metin rengini miras alıyor. Durum renklerinde
       ve tema değişiminde kendiliğinden doğru görünüyor. */
    color: inherit;
}

/* Boyut basamakları — yazı boyutundan bağımsız gerekince */
.ikon-sm { width: 16px; height: 16px; }
.ikon-md { width: 20px; height: 20px; }
.ikon-lg { width: 24px; height: 24px; }
.ikon-xl { width: 28px; height: 28px; }

/* Kutulu ikon — özellik kartları ve boş durumlar için */
.ikon-kutu {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: var(--y-orta);
    background: var(--z-ikincil);
    color: var(--yazi-2);
}
.ikon-kutu .ikon { width: 22px; height: 22px; vertical-align: 0; }
.ikon-kutu-marka  { background: var(--marka-acik);  color: var(--marka); }
.ikon-kutu-iyi    { background: var(--iyi-acik);    color: var(--iyi); }
.ikon-kutu-dikkat { background: var(--dikkat-acik); color: var(--dikkat); }
.ikon-kutu-kotu   { background: var(--kotu-acik);   color: var(--kotu); }
.ikon-kutu-vurgu  { background: var(--vurgu-acik);  color: var(--vurgu); }

/* ── TIKLANABİLİRLİK ──
   Denetim listesindeki "cursor-pointer on all clickable
   elements" maddesi. <button> varsayılan olarak pointer
   göstermiyor; tıklanabilen her şeyin elle işaretlenmesi
   gerekiyor. */
button:not(:disabled),
[role="button"]:not([aria-disabled="true"]),
label[for],
summary,
select,
a[href] {
    cursor: pointer;
}
button:disabled, [aria-disabled="true"] { cursor: not-allowed; }

/* ── ROZET VE ETİKET TAŞMASI ──
   Denetim listesi: "Text, chips, and badges reflow without
   clipping or broken labels".

   Rozetlerde white-space: nowrap vardı; uzun etiket dar
   ekranda kutudan taşıyordu. Artık gerekince sarıyor ve
   uzun tek kelimeler kırılabiliyor. */
.rozet {
    white-space: normal;
    overflow-wrap: anywhere;
    max-width: 100%;
}
/* Kısa ve sayısal rozetler tek satırda kalsın */
.rozet-tek { white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════
   22. ESKİ SİSTEMLE UYUM KÖPRÜSÜ

   ── NEDEN VAR ──
   Sitede 19 sayfa ve 3000 satırlık style.css var; hepsi eski
   değişken adlarını kullanıyor (--bg, --text, --primary...).
   O adları tek tek değiştirmek 19 sayfayı elden geçirmek ve
   her birinde bir şeyi bozma riski demek.

   Bunun yerine eski adları YENİ belirteçlere bağlıyoruz.
   Eski kod hiç değişmeden çalışmaya devam ediyor, sadece
   yeni renkleri ve ölçüleri alıyor.

   ── TEMA NASIL ÇALIŞIYOR ──
   Takma adlar var() ile bağlandığı için koyu temaya geçince
   kaynak değişken değişiyor ve takma ad kendiliğinden onu
   takip ediyor. Koyu tema için ayrıca tanımlamaya gerek yok.

   ── BU KATMAN GEÇİCİ ──
   Sayfalar tek tek yeni bileşenlere taşındıkça buradaki
   satırlar azalacak. Hepsi taşınınca bu bölüm silinecek.
   ═══════════════════════════════════════════════════════════ */
:root {
    /* Zeminler */
    --bg:          var(--z-arka);
    --surface-1:   var(--z-kart);
    --surface-2:   var(--z-ikincil);
    --surface-3:   var(--z-ucuncul);
    --surface-hi:  var(--z-ustu);

    /* Kenarlıklar */
    --border:      var(--kenar);
    --border-hi:   var(--kenar-koyu);

    /* Metin */
    --text:        var(--yazi);
    --text-2:      var(--yazi-2);
    --text-3:      var(--yazi-3);

    /* Marka ve vurgu */
    --primary:      var(--marka);
    --primary-dark: var(--marka-koyu);
    --secondary:    var(--vurgu);
    --accent:       var(--bilgi);

    /* Durum */
    --success: var(--iyi);
    --warning: var(--dikkat);
    --danger:  var(--kotu);

    /* Altın — Premium vurgusu için korundu.
       Yeni palette karşılığı yok; sağlık dilinde altın
       kullanmıyoruz ama premium kartları hâlâ ona bağlı. */
    --gold: #b8860b;

    --success-bg: var(--iyi-acik);
    --warning-bg: var(--dikkat-acik);
    --danger-bg:  var(--kotu-acik);
    --primary-bg: var(--marka-acik);
    --gold-bg:    rgba(184, 134, 11, .1);

    /* Parlama — sağlık dilinde neon parlama yok, yumuşak
       gölgeye indirildi */
    --glow-primary: var(--golge);
    --glow-gold:    var(--golge);

    /* Gölge */
    --shadow-sm: 0 1px 2px rgba(16, 22, 40, .05);
    --shadow:    var(--golge);
    --shadow-lg: var(--golge-hi);

    /* Yarıçap — eski dört değer yeni dörde eşlendi */
    --r-sm: var(--y-kucuk);
    --r:    var(--y-orta);
    --r-lg: var(--y-kart);
    --r-xl: var(--y-kart);

    --ease: var(--gecis);

    /* Daha da eski kısaltmalar */
    --dark:  var(--yazi);
    --light: var(--z-ikincil);
    --white: var(--z-kart);
    --p:     var(--marka);
    --p2:    var(--marka-koyu);
    --s:     var(--vurgu);
    --ok:    var(--iyi);
    --warn:  var(--dikkat);
    --bad:   var(--kotu);
}

[data-theme="dark"] {
    --gold:    #f5b544;
    --gold-bg: rgba(245, 181, 68, .13);
}

/* ── Eski sayfaların yazı tipi ──
   style.css kendi font-family'sini tanımlıyor ve tasarim.css'ten
   SONRA yüklendiği için onu eziyordu. Sayfa genelinde tek yazı
   tipi olması şart; bu yüzden burada geri alıyoruz.

   :where() kullanıyoruz: özgüllüğü sıfır, yani sayfa kendi
   içinde bilinçli bir istisna yapmak isterse yapabilir. */
:where(body, input, button, select, textarea) {
    font-family: 'Jakarta', -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, sans-serif;
}

/* ═══════════════════════════════════════════════════════════
   23. KARŞILAMA EKRANI (index.html)

   Eski .splash-screen tam ekran ortalanmış bir KAPIYDI.
   Artık kaydırılabilir bir karşılama sayfası.

   ── ÖZGÜLLÜK NOTU ──
   style.css'teki .splash-screen kuralları hâlâ yüklü ve
   ortalama/flex düzeni dayatıyor. Burada onları geri alıyoruz.
   style.css'i düzenlemek yerine üstüne yazmak, o dosyaya
   bağlı başka bir şeyi bozma riskini ortadan kaldırıyor.
   ═══════════════════════════════════════════════════════════ */
.splash-screen:has(.kars) {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: block;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--z-arka);
    /* Eski kural blur + koyu degrade veriyordu */
    backdrop-filter: none;
    opacity: 1;
    transition: opacity var(--sure-yavas) var(--gecis);
}
.splash-screen:has(.kars)::before { display: none; }

.kars { position: relative; min-height: 100%; }

/* Karşılamanın kendi zemini — yaşayan renk bulutları */
.kars::before {
    content: '';
    position: fixed;
    inset: -20%;
    z-index: 0;
    pointer-events: none;
    opacity: .5;
    background:
        radial-gradient(38rem 30rem at 18% 10%, color-mix(in srgb, var(--marka) 20%, transparent), transparent 62%),
        radial-gradient(32rem 24rem at 84% 6%,  color-mix(in srgb, var(--iyi) 15%, transparent), transparent 60%),
        radial-gradient(28rem 22rem at 60% 92%, color-mix(in srgb, var(--vurgu) 12%, transparent), transparent 58%);
    animation: zeminAkis 26s var(--gecis) infinite alternate;
}
[data-theme="dark"] .kars::before { opacity: .36; }

.kars > * { position: relative; z-index: 1; }

/* ── Üst bar ── */
/* .kars-ust'un temel kuralları 39. bölümde — burada
   tutmak, birbirini ezen iki kaynak demekti. */
/* .kars-nav → 39. bölüm */

/* ── Kahraman ── */
.kars-kahraman {
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: var(--b8);
    align-items: center;
    padding: var(--b8) 0 var(--b7);
}
.kars-kahraman h1 {
    font-size: var(--y-4xl);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.06;
    margin: var(--b4) 0;
    /* style.css'te .splash-title degrade yazı kullanıyordu;
       burada düz metin — degrade başlık okunurluğu düşürüyor
       ve "Health" vurgusunu yutuyor. */
    background: none;
    -webkit-text-fill-color: currentColor;
}
.kars-eylem { margin-top: var(--b6); gap: var(--b3); }
.kars-gorsel { display: grid; place-items: center; position: relative; }
.kars-bolum { padding: var(--b8) 0; }

@media (max-width: 900px) {
    .kars-kahraman {
        grid-template-columns: 1fr;
        gap: var(--b6);
        text-align: center;
        padding-top: var(--b5);
    }
    .kars-gorsel { order: -1; }
    .kars-kahraman .satir, .kars-kahraman .k-guven { justify-content: center; }
    .kars-kahraman .k-alt { margin-inline: auto; }
    .kars-bolum { padding: var(--b7) 0; }
}

/* ═══════════════════════════════════════════════════════════
   24. KARŞILAMA BİLEŞENLERİ

   ── BURAYA NASIL GELDİ ──
   Bu sınıflar önce ayrı bir deneme sayfasının (giris.html)
   içine gömülü yazılmıştı. O sayfayı silerken stiller de
   gitti ama karşılama ekranı hâlâ onları kullanıyordu:
   sonuç, düğmelerin alt alta dizildiği ve ikonların
   metinden koptuğu bozuk bir sayfa.

   Ders: bir sayfaya özgü sanılan stil, aslında bileşense
   ortak dosyada durmalı. Sayfa silinince bileşen de
   silinmemeli.
   ═══════════════════════════════════════════════════════════ */

/* ── Kahraman rozeti ── */
.k-rozet {
    display: inline-flex;
    align-items: center;
    gap: var(--b2);
    padding: 6px 14px 6px 8px;
    border-radius: var(--y-tam);
    background: var(--iyi-acik);
    border: 1px solid color-mix(in srgb, var(--iyi) 26%, transparent);
    color: var(--iyi);
    font-size: var(--y-xs);
    font-weight: 700;
    line-height: 1.4;
}
.k-rozet > i {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--iyi);
    color: var(--z-kart);
    font-style: normal;
}
.k-rozet > i .ikon { width: 11px; height: 11px; vertical-align: 0; }

/* ── Kahraman alt metni ── */
.k-alt {
    font-size: var(--y-lg);
    line-height: 1.62;
    color: var(--yazi-2);
    max-width: 46ch;
}

/* ── Güven satırı ── */
.k-guven {
    display: flex;
    flex-wrap: wrap;
    gap: var(--b2) var(--b4);
    margin-top: var(--b5);
    font-size: var(--y-sm);
    color: var(--yazi-3);
}
.k-guven > span { display: inline-flex; align-items: center; gap: 6px; }
.k-guven b { color: var(--iyi); display: inline-flex; align-items: center; }

/* ── Örnek telefon ── */
.telefon {
    position: relative;
    width: min(292px, 78vw);
    aspect-ratio: 9 / 18.5;
    border-radius: 38px;
    background: var(--z-kart);
    border: 1px solid var(--kenar);
    box-shadow: var(--golge-hi);
    padding: var(--b5) var(--b4);
    display: grid;
    align-content: start;
    gap: var(--b4);
    overflow: hidden;
}
.telefon::before {
    content: '';
    position: absolute;
    top: 12px; left: 50%;
    transform: translateX(-50%);
    width: 76px; height: 5px;
    border-radius: var(--y-tam);
    background: var(--z-ucuncul);
}
.tel-ust {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--b2);
    margin-top: var(--b3);
    font-size: var(--y-xs);
    color: var(--yazi-3);
}
.tel-orta { display: grid; place-items: center; gap: var(--b2); padding: var(--b2) 0; }
.tel-satir {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--b2);
    padding: var(--b3) 0;
    border-top: 1px solid var(--kenar);
    font-size: var(--y-sm);
}
.tel-satir > span { color: var(--yazi-3); }
.tel-satir b { font-weight: 700; text-align: right; }

/* ── Yanda süzülen bilgi kartları ── */
.uc-kart {
    position: absolute;
    background: var(--z-kart);
    border: 1px solid var(--kenar);
    border-radius: var(--y-orta);
    box-shadow: var(--golge-hi);
    padding: var(--b3) var(--b4);
    font-size: var(--y-xs);
    display: grid;
    gap: 2px;
    text-align: left;
    animation: suzulme 7s var(--gecis) infinite alternate;
}
.uc-kart b { font-size: var(--y-md); font-weight: 800; letter-spacing: -.02em; }
.uc-kart > span { color: var(--yazi-3); }
.uc-sol { left: -6%;  top: 24%;    animation-delay: -2s; }
.uc-sag { right: -8%; bottom: 26%; animation-delay: -4.5s; }
@media (max-width: 620px) { .uc-kart { display: none; } }

/* ── İstatistik şeridi ── */
.istat {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--b4);
    padding: var(--b5);
    background: var(--z-kart);
    border: 1px solid var(--kenar);
    border-radius: var(--y-kart);
    box-shadow: var(--golge);
    text-align: center;
}
.istat > div + div { border-left: 1px solid var(--kenar); }
.istat b {
    display: block;
    font-size: var(--y-2xl);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.2;
}
.istat span { font-size: var(--y-xs); color: var(--yazi-3); }
@media (max-width: 560px) {
    .istat { grid-template-columns: 1fr; gap: var(--b3); }
    .istat > div + div {
        border-left: 0;
        border-top: 1px solid var(--kenar);
        padding-top: var(--b3);
    }
}

/* ── Bölüm başlığı ── */
.bolum-bas { max-width: 58ch; margin-bottom: var(--b6); }
.bolum-bas h2 { margin-bottom: var(--b3); }
@media (max-width: 900px) { .bolum-bas { margin-inline: auto; text-align: center; } }

/* ── Adım kartı ── */
.adim {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--b4);
    padding: var(--b5);
    background: var(--z-kart);
    border: 1px solid var(--kenar);
    border-radius: var(--y-kart);
    box-shadow: var(--golge);
    text-align: left;
    transition: transform var(--sure) var(--gecis),
                box-shadow var(--sure) var(--gecis);
}
.adim:hover { transform: translateY(-3px); box-shadow: var(--golge-hi); }
.adim-no {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    flex-shrink: 0;
    border-radius: var(--y-orta);
    background: var(--marka-acik);
    color: var(--marka);
    font-weight: 800;
    font-size: var(--y-md);
}
.adim h3 { font-size: var(--y-lg); margin-bottom: 6px; }
.adim p { color: var(--yazi-2); font-size: var(--y-sm); line-height: 1.65; }

/* ── Son çağrı ── */
.son-cagri {
    text-align: center;
    padding: var(--b8) var(--b5);
    background: linear-gradient(165deg, var(--marka-acik), var(--z-kart) 65%);
    border: 1px solid color-mix(in srgb, var(--marka) 20%, transparent);
    border-radius: var(--y-kart);
}
.son-cagri h2 { margin-bottom: var(--b3); }
.son-cagri p { color: var(--yazi-2); max-width: 46ch; margin: 0 auto var(--b5); }

/* ── Kayan cihaz şeridi öğesi ── */
.serit-oge {
    display: inline-flex;
    align-items: center;
    gap: var(--b2);
    padding: var(--b3) var(--b5);
    background: var(--z-kart);
    border: 1px solid var(--kenar);
    border-radius: var(--y-tam);
    font-size: var(--y-sm);
    font-weight: 600;
    color: var(--yazi-2);
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════
   25. ÜST BAR — hepsi tek dile
   ═══════════════════════════════════════════════════════════

   ── SORUN ──
   Site dört ayrı üst bar deseni taşıyordu: .header (13 sayfa),
   .topbar (admin + premium), .kars-ust (karşılama) ve hiç bar
   olmayan 5 sayfa. Aynı siteyi gezerken her sayfada başka bir
   ürün gibi görünüyordu.

   ── ÇÖZÜM ──
   Markup'a DOKUNMUYORUZ. Var olan sınıf ve id'ler JS'in
   tutunduğu kancalar; onları değiştirmek çalışan özellikleri
   kırmanın en kolay yolu. Bunun yerine üç deseni de aynı
   görsel dile burada bağlıyoruz.

   Yükleme sırası bizim lehimize: her sayfada tasarim.css
   style.css'ten SONRA geliyor, yani buradaki kural kazanıyor.
   ═══════════════════════════════════════════════════════════ */

/* ── Ortak yükseklik ──
   Üç desenin de aynı yüksekliği olsun ki sayfalar arası
   geçişte bar zıplamasın. */
:root {
    --bar-y: 62px;          /* normal */
    --bar-y-kucuk: 52px;    /* kaydırınca */
    --bar-ic: clamp(14px, 3vw, 26px);
}

.header,
.topbar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 900;
    min-height: var(--bar-y);
    padding: 0 var(--bar-ic);
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--kenar);
    background: var(--z-arka);
    /* Yerleşim özelliği (padding, height) animasyonlanmıyor —
       her karede yeniden hesap, titremenin asıl kaynağı. */
    transition: min-height .22s var(--gecis),
                box-shadow .22s var(--gecis),
                background .22s var(--gecis);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .header,
    .topbar {
        background: color-mix(in srgb, var(--z-arka) 82%, transparent);
        -webkit-backdrop-filter: blur(16px) saturate(160%);
        backdrop-filter: blur(16px) saturate(160%);
    }
}

/* Kaydırılmış hâl — gölge, sayfanın barın altına girdiğini
   söyleyen tek ipucu. Çizgi tek başına bunu anlatmıyor. */
.header.shrink,
.topbar.shrink {
    min-height: var(--bar-y-kucuk);
    box-shadow: 0 1px 0 var(--kenar), 0 8px 24px -12px rgb(0 0 0 / .28);
}
.header.shrink { padding: 0 var(--bar-ic); }

.header-content {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

.header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    /* flex-wrap KALDIRILDI: sarınca bar iki katı yükseliyor ve
       yapışkan barın altındaki içerik kayıyordu. Dar ekranda
       sarmak yerine ikincil düğmeleri gizliyoruz (aşağıda). */
    flex-wrap: nowrap;
    min-width: 0;
}

/* ── Marka ── */
.header-title { min-width: 0; display: flex; align-items: center; }

.header-title h1 {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 1.06rem;
    font-weight: 700;
    letter-spacing: -.021em;
    line-height: 1.15;
    margin: 0;
    white-space: nowrap;
}

/* Alt başlık bara sığmıyor — barın işi gezinme, tanıtım değil.
   Tanıtım metni zaten karşılama ekranının kahraman bölümünde. */
.header-title p { display: none; }

.header.shrink .header-title h1 { font-size: 1.06rem; }

/* ── Düğmeler ── */
.header-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: transparent;
    color: var(--yazi-2);
    border: 1px solid transparent;
    padding: 8px 12px;
    border-radius: 9px;
    font-size: .845rem;
    font-weight: 550;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background .18s var(--gecis), color .18s var(--gecis),
                border-color .18s var(--gecis);
}
.header-btn:hover {
    background: var(--z-ikincil);
    color: var(--yazi);
    border-color: var(--kenar);
}
.header-btn:focus-visible {
    outline: 2px solid var(--marka);
    outline-offset: 2px;
}

.header-btn-primary {
    background: var(--marka-dolgu);
    color: var(--marka-uzeri);
    border-color: transparent;
    font-weight: 620;
}
.header-btn-primary:hover {
    background: var(--marka-dolgu);
    color: var(--marka-uzeri);
    border-color: transparent;
    filter: brightness(1.08);
}

/* ── Dil / tema seçici ──
   İki ayrı kutu yerine tek bir hap. Barda ne kadar az çerçeve
   varsa o kadar sakin görünüyor. */
.lang-switch,
.theme-switch {
    display: flex;
    background: var(--z-ikincil);
    border: 1px solid var(--kenar);
    border-radius: 9px;
    overflow: hidden;
    padding: 2px;
    gap: 2px;
}

.lang-switch button,
.theme-switch button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--yazi-3);
    padding: 5px 9px;
    min-width: 30px;
    font-size: .74rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    border-radius: 7px;
    transition: background .16s var(--gecis), color .16s var(--gecis);
}
.lang-switch button:hover,
.theme-switch button:hover { color: var(--yazi); background: var(--z-ucuncul); }

.lang-switch button.active,
.theme-switch button.active {
    background: var(--marka-dolgu);
    color: var(--marka-uzeri);
}

/* Tema düğmesindeki ikon — emoji değil, metin rengini miras
   alan SVG. Koyu temada da doğru görünüyor. */
.theme-switch .ikon { width: 15px; height: 15px; }

/* ── Rozetler ── */
.user-area { display: flex; align-items: center; gap: 8px; min-width: 0; }
.user-guest,
.user-logged { display: flex; align-items: center; gap: 8px; }

.user-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--z-ikincil);
    border: 1px solid var(--kenar);
    color: var(--yazi-2);
    padding: 6px 11px;
    border-radius: 100px;
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ── Premium düğmesi ──
   Eski hâli üç renkli, kayan gradyanlı ve sürekli parlayan bir
   şeritti; barın içindeki en gürültülü öğeydi ve gözü asıl
   eylemden ("Üye Ol") çalıyordu. Sakin bir altın çizgiye
   indirdik — hâlâ ayrı duruyor, ama bağırmıyor. */
.premium-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--altin-zemin);
    color: var(--altin-yazi);
    border: 1px solid var(--altin-cizgi);
    padding: 7px 13px;
    border-radius: 100px;
    font-size: .82rem;
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
    background-size: auto;
    animation: none;                /* eski kayan gradyanı durdur */
    transition: background .18s var(--gecis), border-color .18s var(--gecis);
}
.premium-btn:hover {
    background: var(--altin-zemin-2);
    border-color: var(--altin);
    transform: none;
}
.premium-btn::after { display: none; }   /* eski parlama şeridi */
.premium-btn .pb-price {
    opacity: .72;
    font-weight: 550;
    font-variant-numeric: tabular-nums;
}

/* ── Okuma ilerlemesi ── */
.read-progress {
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 2px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: var(--marka-dolgu);
    z-index: 1;
}

/* ── Barın kapladığı yer ──
   Bar fixed; altındaki ilk bloğun onun altında kalmaması için
   sayfa gövdesine boşluk veriyoruz. */
.dashboard,
.doc-page,
.admin-wrap,
.premium-wrap { padding-top: calc(var(--bar-y) + 12px); }

/* ── Dar ekran ──
   Sarmak yerine eleme: bar tek satır kalsın. Gizlenen her şeyin
   karşılığı sayfa içinde ya da profil menüsünde zaten var. */
@media (max-width: 860px) {
    .header-title h1 .beta-tag { display: none; }
    .premium-btn .pb-price { display: none; }
}
@media (max-width: 680px) {
    :root { --bar-y: 56px; --bar-y-kucuk: 50px; }
    .header-btn { padding: 8px 10px; }
    /* Metni gizle, ikon kalsın — dokunma hedefi 44px'in altına
       düşmesin diye padding korunuyor. */
    #headerBlogBtn span,
    #headerBridgeBtn span { display: none; }
    .theme-switch { display: none; }   /* tema profil sayfasından da değişiyor */
    .user-badge { display: none; }
}
@media (max-width: 480px) {
    .premium-btn .pb-text { display: none; }
    #headerProfileBtn,
    #headerBridgeBtn { display: none; }
}

/* ── Beşinci desen: .top / .hbtn ──
   kod, laptop, kopru, kopru-pc, karsilastir, gizlilik, rapor
   sayfaları .header yerine .top kullanıyor. Markup'ı
   değiştirmek yerine aynı görsel dile bağlıyoruz: ziyaretçi
   sayfalar arasında gezerken bar yerinde duruyor. */
.top {
    position: sticky;
    top: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: var(--bar-y);
    margin: 0 0 clamp(20px, 4vw, 34px);
    padding: 0 var(--bar-ic);
    border-bottom: 1px solid var(--kenar);
    background: var(--z-arka);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .top {
        background: color-mix(in srgb, var(--z-arka) 82%, transparent);
        -webkit-backdrop-filter: blur(16px) saturate(160%);
        backdrop-filter: blur(16px) saturate(160%);
    }
}

.top h1,
.top .brand {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: 1.06rem;
    font-weight: 700;
    letter-spacing: -.021em;
    line-height: 1.15;
    color: var(--yazi);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.top h1 .ikon,
.top .brand .ikon { flex: none; color: var(--marka); }

/* .hbtn = .header-btn'in bu sayfalardaki adı */
.hbtn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: transparent;
    color: var(--yazi-2);
    border: 1px solid transparent;
    padding: 8px 12px;
    border-radius: 9px;
    font-size: .845rem;
    font-weight: 550;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background .18s var(--gecis), color .18s var(--gecis),
                border-color .18s var(--gecis);
}
.hbtn:hover {
    background: var(--z-ikincil);
    color: var(--yazi);
    border-color: var(--kenar);
}
.hbtn:focus-visible { outline: 2px solid var(--marka); outline-offset: 2px; }

/* .page-actions — gizlilik.html'in sağ grubu */
.top .page-actions { display: flex; align-items: center; gap: 8px; }

@media (max-width: 680px) {
    .top { min-height: 56px; }
    .top h1, .top .brand { font-size: .96rem; }
    .hbtn { padding: 8px 10px; }
}

/* ═══════════════════════════════════════════════════════════
   26. HAREKET — uygulanmış hâli
   ═══════════════════════════════════════════════════════════

   ── NEDEN AYRI BÖLÜM ──
   20. bölümde hareket ARAÇLARI tanımlıydı (.belir, .gir,
   .sirali) ama markup'ta neredeyse hiç kullanılmıyordu.
   Araç kutusu doluydu, kimse açmamıştı.

   ── İKİ KATMAN ──
   1) Açılış: sayfa yüklenince kahraman parçaları sırayla
      giriyor. Saf CSS animation, her tarayıcıda çalışır.
   2) Kaydırma: bölümler ekrana girdikçe beliriyor.
      animation-timeline: view() destekleniyorsa CSS yapar;
      desteklenmiyorsa hareket.js .gorundu sınıfını ekler.

   ── NEDEN transform + opacity ──
   Bu ikisi derleyici katmanında çalışır, yerleşimi yeniden
   hesaplatmaz. top/height/margin animasyonlamak her karede
   reflow demek — telefonda takılmanın bir numaralı sebebi.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Açılış sıralaması ──
   Gecikmeler kısa: 90ms aralık, toplam 450ms. Daha uzunu
   "yavaş site" hissi veriyor, ziyaretçi beklemeyi fark ediyor. */
@keyframes acilisGir {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

.kars-kahraman > div > *,
.kars-gorsel {
    animation: acilisGir .58s var(--gecis) both;
}
.kars-kahraman > div > .k-rozet   { animation-delay: .04s; }
.kars-kahraman > div > h1         { animation-delay: .12s; }
.kars-kahraman > div > .k-alt     { animation-delay: .20s; }
.kars-kahraman > div > .kars-eylem{ animation-delay: .28s; }
.kars-kahraman > div > .k-guven   { animation-delay: .36s; }
.kars-gorsel                      { animation-delay: .22s; animation-duration: .74s; }

/* Üst bar en başta gelsin — sayfanın çerçevesi önce kurulmalı */
.kars-ust { animation: acilisGir .5s var(--gecis) both; }

/* Yüzen kartlar telefondan sonra, hafif yaylanarak */
.uc-kart {
    animation: acilisGir .6s var(--yay) both;
}
.uc-sol { animation-delay: .52s; }
.uc-sag { animation-delay: .62s; }

/* ── 2. Kaydırınca belirme ──
   Modern tarayıcı: CSS zaman çizelgesi (JS yok).
   Eski tarayıcı: hareket.js .gorundu ekler. */
.belir,
.belir-guclu {
    opacity: 1;              /* JS yoksa/çalışmazsa içerik görünür kalır */
}

@supports not (animation-timeline: view()) {
    /* Yalnızca JS varsa gizle — betik engellenirse içerik
       görünmez kalmasın. hareket.js <html>'e bu sınıfı ekliyor. */
    .js-hareket .belir,
    .js-hareket .belir-guclu {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity .62s var(--gecis), transform .62s var(--yay);
        will-change: opacity, transform;
    }
    .js-hareket .belir.gorundu,
    .js-hareket .belir-guclu.gorundu {
        opacity: 1;
        transform: none;
        will-change: auto;
    }
    /* Aynı grup içindeki kartlar sırayla */
    .js-hareket .belir.gorundu:nth-child(2) { transition-delay: .07s; }
    .js-hareket .belir.gorundu:nth-child(3) { transition-delay: .14s; }
    .js-hareket .belir.gorundu:nth-child(4) { transition-delay: .21s; }
}

/* ── 3. Sayaç ──
   Sayı yukarı doğru sayarken tabular-nums olmazsa rakam
   genişliği değiştikçe kutu titriyor. */
.istat b,
.sayac {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* ── 4. Kart etkileşimi ──
   Fare üstüne gelince hafif kalkma. 2px'ten fazlası oyuncak
   gibi duruyor; 1px fark edilmiyor. */
.kart-etkilesim {
    transition: transform .2s var(--gecis), box-shadow .2s var(--gecis),
                border-color .2s var(--gecis);
}
@media (hover: hover) {
    .kart-etkilesim:hover {
        transform: translateY(-2px);
        border-color: var(--kenar-koyu);
        box-shadow: 0 12px 28px -18px rgb(0 0 0 / .35);
    }
}

/* ── 5. Adım numaraları ──
   Sırayla dolarak beliriyor: "önce bu, sonra bu" fikrini
   metin okumadan anlatıyor. */
@supports (animation-timeline: view()) {
    .adim {
        animation: acilisGir linear both;
        animation-timeline: view();
        animation-range: entry 8% cover 26%;
    }
}
.adim-no { transition: background .2s var(--gecis), color .2s var(--gecis); }

/* ── 6. Telefon süzülmesi ──
   Zaten tanımlıydı; hız düşürüldü. 6 saniyelik döngü,
   göz takip etmiyor ama sayfa "ölü" durmuyor. */
.suzul { animation-duration: 6s; }

/* ── 7. Okuma ilerleme çizgisi ── */
.ilerleme-cizgi { pointer-events: none; }

/* ═══ HAREKETİ AZALT ═══
   Bu tercih bir stil seçimi değil; vestibüler rahatsızlığı
   olan kullanıcı için hareket baş dönmesi yapabiliyor.
   Hepsini kapatıyoruz, içerik olduğu yerde duruyor. */
@media (prefers-reduced-motion: reduce) {
    .kars-kahraman > div > *,
    .kars-gorsel,
    .kars-ust,
    .uc-kart,
    .adim {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .js-hareket .belir,
    .js-hareket .belir-guclu {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .suzul { animation: none !important; }
    .kart-etkilesim:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════
   28. AÇILIŞ EKRANI — yanıp sönmeyi kes
   ═══════════════════════════════════════════════════════════
   acilis.js <head>'de senkron çalışıp <html>'e data-acilis
   yazıyor. Böylece karşılama ekranının gösterilip
   gösterilmeyeceği İLK BOYAMADAN ÖNCE belli oluyor.

   Öncesinde karar Auth.me() cevabına bağlıydı: karşılama
   ekranı görünüyor, 100-400 ms sonra kayboluyordu.

   !important gerekli: style.css'teki .splash-screen kuralı
   display'i doğrudan veriyor ve seçici özgüllüğü daha yüksek
   olabiliyor. Burada tartışmasız kazanmamız gerekiyor —
   yanıp sönmenin sebebi tam olarak bu belirsizlikti.
   ═══════════════════════════════════════════════════════════ */
html[data-acilis="uygulama"] #splashScreen {
    display: none !important;
    pointer-events: none !important;
}

/* ═══════════════════════════════════════════════════════════
   29. AŞAMALI ÖLÇÜM EKRANI
   ═══════════════════════════════════════════════════════════

   asama.js `.main-container`a data-asama yazıyor:
     "olcum" → ölçüm henüz yapılmadı
     "sonuc" → sonuç geldi

   Aşama "olcum" iken ikincil kartlar gizleniyor. Ölçüm bitince
   hepsi geri geliyor — silinmiyorlar, sadece sıraya giriyorlar.

   ── REKLAMLARA DOKUNULMUYOR ──
   #adSlotSide ve #adSlotBottom her aşamada yerinde. AdSense
   başvurusu sürerken yerleşim değiştirmek gereksiz risk.

   ── data-asama HİÇ YOKSA ──
   Betik çalışmadıysa öznitelik yazılmıyor, bu seçiciler hiç
   eşleşmiyor ve ekran bugünkü kalabalık ama çalışır hâliyle
   duruyor. Sessizce boş ekran riski yok.
   ═══════════════════════════════════════════════════════════ */

.main-container[data-asama="olcum"] #rankingCard,
.main-container[data-asama="olcum"] #predictionsCard,
.main-container[data-asama="olcum"] #poolCard,
.main-container[data-asama="olcum"] #trendCard,
.main-container[data-asama="olcum"] #diagCard {
    display: none;
}

/* Ölçüm aşamasında sol sütun nefes alsın: tek iş var, ona yer
   açıyoruz. Sağ sütun reklamla kalıyor, o yüzden ızgarayı
   bozmuyor, yalnızca oranı değiştiriyoruz. */
@media (min-width: 1024px) {
    .main-container[data-asama="olcum"] {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
    }
}

/* Ölçüm kartı ekranın ortasında dursun — sayfanın en üstüne
   yapışmış bir kart, altında boşlukla, yarım kalmış duruyor. */
.main-container[data-asama="olcum"] #analyticsCard {
    margin-block: auto;
}

/* Sonuca geçerken kartlar sırayla belirsin: hepsi aynı anda
   patlarsa ekran birden değişmiş gibi oluyor, göz nereye
   bakacağını kaybediyor. */
.main-container[data-asama="sonuc"] #batteryStatsCard,
.main-container[data-asama="sonuc"] #diagCard,
.main-container[data-asama="sonuc"] #rankingCard,
.main-container[data-asama="sonuc"] #predictionsCard {
    animation: acilisGir .5s var(--gecis) both;
}
.main-container[data-asama="sonuc"] #batteryStatsCard { animation-delay: .02s; }
.main-container[data-asama="sonuc"] #diagCard         { animation-delay: .10s; }
.main-container[data-asama="sonuc"] #rankingCard      { animation-delay: .16s; }
.main-container[data-asama="sonuc"] #predictionsCard  { animation-delay: .22s; }

@media (prefers-reduced-motion: reduce) {
    .main-container[data-asama="sonuc"] #batteryStatsCard,
    .main-container[data-asama="sonuc"] #diagCard,
    .main-container[data-asama="sonuc"] #rankingCard,
    .main-container[data-asama="sonuc"] #predictionsCard {
        animation: none;
    }
}

/* ═══════════════════════════════════════════════════════════
   30. ÜST BAR — sıkışan düğmeler
   ═══════════════════════════════════════════════════════════

   ── SORUN ──
   27. bölümde .kars-nav'a flex-wrap: nowrap verdim ki bar iki
   satıra çıkmasın. Ama flex öğeleri varsayılan olarak
   KÜÇÜLEBİLİR (flex-shrink: 1). Yer daralınca tarayıcı tema ve
   dil seçicilerini içerik genişliğinin altına sıkıştırdı;
   üstüne .theme-switch'te overflow: hidden olduğu için içerideki
   düğmeler kırpıldı ve iki hap üst üste binmiş gibi göründü.

   ── DERS ──
   nowrap vermek tek başına yetmiyor. "Sarmasın" demek,
   "küçülmesin" demek değil. Küçülmemesi gerekeni açıkça
   söylemek gerekiyor.

   ── KİM ESNER, KİM ESNEMEZ ──
   Esnemez: tema, dil, giriş, üye ol düğmeleri — hepsinin
     içeriği sabit ve kısa, küçülmeleri anlamsız.
   Esner: marka yazısı — zaten üç noktayla kısalıyor ve
     yanındaki logo tek başına markayı taşıyor.
   ═══════════════════════════════════════════════════════════ */

.kars-ust .theme-switch,
.kars-ust .lang-switch,
.kars-nav > .btn,
.kars-nav > a {
    flex: 0 0 auto;
}

/* Seçicilerin içindeki düğmeler de sıkışmasın */
.kars-ust .theme-switch button,
.kars-ust .lang-switch button {
    flex: 0 0 auto;
    min-width: 32px;
}

/* Esneyen tek öğe marka olsun */
.kars-ust > .marka-yazi { flex: 0 1 auto; min-width: 0; }
.kars-ust > .kars-nav   { flex: 0 0 auto; }

/* Aynı tuzak .header'da da var: orada da hiçbir şey
   küçülmemeli, dar ekranda eleme yapıyoruz. */
.header-top > .header-title { flex: 0 1 auto; min-width: 0; }
.header-top > .user-area    { flex: 0 0 auto; }
.user-area .theme-switch,
.user-area .lang-switch,
.user-area .header-btn,
.user-area .premium-btn { flex: 0 0 auto; }
.user-area .theme-switch button,
.user-area .lang-switch button { flex: 0 0 auto; min-width: 32px; }

/* Tema düğmesindeki ikon kutuya sığsın */
.theme-switch .ikon { width: 15px; height: 15px; flex: none; }

/* ── Önizleme şeridindeki geri düğmesi ──
   Şeridin solunda, metinden önce: geri dönüş yolu okumadan
   önce görünmeli. */
.db-geri {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    background: transparent;
    color: inherit;
    border: 1px solid currentColor;
    border-radius: 8px;
    padding: 5px 11px;
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    opacity: .82;
    transition: opacity .16s var(--gecis), background .16s var(--gecis);
}
.db-geri:hover { opacity: 1; background: rgb(255 255 255 / .08); }
.db-geri:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Marka tıklanabilir olduğunda bunu göster — imleç
   değişmezse kimse tıklanabileceğini bilmiyor. */
.marka-tiklanir { cursor: pointer; }
.marka-tiklanir:focus-visible { outline: 2px solid var(--marka); outline-offset: 3px; border-radius: 6px; }

/* ═══════════════════════════════════════════════════════════
   31. YENİ TASARIM DİLİ — batterychecker.org ritmi
   ═══════════════════════════════════════════════════════════

   ── NE ALINDI, NE ALINMADI ──
   Referans siteden alınan şey YAPI: bölüm ritmi, dönüşümlü
   zeminler, "// Etiket" üst başlıkları, kart ölçüleri, düğme
   oranları, sayfa genişliği. Bunlar bir açılış sayfasının
   ortak dilbilgisi.

   ALINMAYAN: renk. Referans site yeşil; bizim markamız mor
   kalıyor. Kenarlık ve parıltılarında yeşil yerine kendi
   markamızın rengini kullanıyoruz — aynı teknik, kendi
   kimliğimiz.

   Referansın kodu kopyalanmadı; ölçülen değerler kendi
   belirteç sistemimize yeniden yazıldı.

   ── ÖLÇÜLEN DEĞERLER ──
   kap 1200px · bölüm dolgusu 120px · kart 16px yuvarlak,
   32px dolgu · düğme 12px yuvarlak, 14px/32px dolgu, 600
   ağırlık · h1 56px/800/-0.02em · üst bar 73px, blur(20px)
   ═══════════════════════════════════════════════════════════ */

:root {
    /* Sayfa iskeleti */
    --y-kap:        1200px;
    --y-bolum:      clamp(64px, 9vw, 120px);   /* referans: 120px */
    --y-bolum-dar:  clamp(48px, 6vw, 80px);    /* son çağrı şeridi */

    /* Kart */
    --y-kart-r:     16px;
    --y-kart-dolgu: clamp(22px, 3vw, 32px);

    /* Düğme */
    --y-dugme-r:    12px;
    --y-dugme-dolgu: 14px 30px;

    /* Marka renkli kenarlık ve parıltı.
       Referans bunları yeşilden türetiyordu; biz mordan. */
    --y-kenar:      color-mix(in srgb, var(--marka) 12%, transparent);
    --y-kenar-usti: color-mix(in srgb, var(--marka) 28%, transparent);
    --y-parilti:    0 0 40px color-mix(in srgb, var(--marka) 12%, transparent);
    --y-golge:      0 4px 24px rgb(0 0 0 / .30);
    --y-golge-usti: 0 8px 48px rgb(0 0 0 / .45),
                    0 0 30px color-mix(in srgb, var(--marka) 10%, transparent);
    --y-golge-dugme: 0 4px 20px color-mix(in srgb, var(--marka) 26%, transparent);

    /* Bölüm zeminleri — dönüşümlü.
       Referansta #0a0e14 ↔ #0d1117: fark küçük ama bölümlerin
       nerede başlayıp bittiğini çizgi çekmeden anlatıyor. */
    --y-zemin-a:    var(--z-arka);
    --y-zemin-b:    color-mix(in srgb, var(--z-arka) 96%, var(--yazi));
}

[data-theme="dark"] {
    --y-golge:      0 4px 24px rgb(0 0 0 / .5);
    --y-golge-usti: 0 8px 48px rgb(0 0 0 / .6),
                    0 0 30px color-mix(in srgb, var(--marka-dolgu) 14%, transparent);
    --y-zemin-b:    #0d1117;
    --y-zemin-a:    #0a0e14;
}

/* ── Sayfa kabı ── */
.y-kap {
    width: 100%;
    max-width: var(--y-kap);
    margin-inline: auto;
    padding-inline: clamp(18px, 4vw, 28px);
}

/* ── Bölüm ── */
.y-bolum {
    padding-block: var(--y-bolum);
    background: var(--y-zemin-a);
}
/* Dönüşümlü zemin: komşu bölümler ayrışsın */
.y-bolum.y-alt { background: var(--y-zemin-b); }

/* ── "// Etiket" üst başlığı ──
   Referansın imzası. Bölümün ne olduğunu başlıktan önce, tek
   kelimeyle söylüyor; göz sayfayı tararken buraya tutunuyor. */
.y-etiket {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 100px;
    border: 1px solid var(--y-kenar-usti);
    background: color-mix(in srgb, var(--marka) 8%, transparent);
    color: var(--marka);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.y-etiket::before {
    content: "//";
    opacity: .55;
    font-weight: 800;
}

/* ── Bölüm başlığı ── */
.y-baslik {
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.025em;
    margin: 0 0 14px;
    max-width: 18ch;
}
.y-baslik-genis { max-width: 26ch; }

.y-aciklama {
    color: var(--yazi-2);
    font-size: 1.02rem;
    line-height: 1.65;
    margin: 0;
    max-width: 56ch;
}

/* Başlık solda, açıklama sağda — referansın özellikler
   bölümündeki düzen. Tek sütunda üst üste yığılmaktan daha
   az dikey yer kaplıyor. */
.y-bolum-bas {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(20px, 4vw, 56px);
    align-items: end;
    margin-bottom: clamp(30px, 5vw, 54px);
}
@media (max-width: 820px) {
    .y-bolum-bas { grid-template-columns: 1fr; align-items: start; gap: 14px; }
    .y-baslik { max-width: none; }
}

/* ── Kart ──
   Kenarlık nötr gri değil marka renginin çok soluk hâli.
   Küçük fark, ama kartlar sayfaya ait hissettiriyor. */
.y-kart {
    background: var(--z-kart);
    border: 1px solid var(--y-kenar);
    border-radius: var(--y-kart-r);
    padding: var(--y-kart-dolgu);
    box-shadow: var(--y-golge);
    transition: border-color .22s var(--gecis), box-shadow .22s var(--gecis),
                transform .22s var(--gecis);
}
@media (hover: hover) {
    .y-kart:hover {
        border-color: var(--y-kenar-usti);
        box-shadow: var(--y-golge-usti);
        transform: translateY(-3px);
    }
}

.y-kart-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--marka) 12%, transparent);
    color: var(--marka);
    margin-bottom: 16px;
}
.y-kart-ikon .ikon { width: 23px; height: 23px; }

.y-kart h3 {
    font-size: 1.06rem;
    font-weight: 700;
    letter-spacing: -.015em;
    margin: 0 0 8px;
}
.y-kart p {
    color: var(--yazi-2);
    font-size: .93rem;
    line-height: 1.6;
    margin: 0;
}

/* ── Kart ızgarası ── */
.y-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(276px, 1fr));
    gap: clamp(14px, 2vw, 22px);
}
.y-izgara-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ── Düğme ── */
.y-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: var(--y-dugme-dolgu);
    border-radius: var(--y-dugme-r);
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .18s var(--gecis), box-shadow .18s var(--gecis),
                background .18s var(--gecis), border-color .18s var(--gecis);
}
.y-btn-ana {
    background: var(--marka-dolgu);
    color: var(--marka-uzeri);
    box-shadow: var(--y-golge-dugme);
}
.y-btn-ana:hover { transform: translateY(-2px); filter: brightness(1.06); }

.y-btn-cizgi {
    background: transparent;
    color: var(--yazi);
    border-color: var(--kenar-koyu);
}
.y-btn-cizgi:hover { border-color: var(--marka); background: var(--z-ikincil); }

.y-btn:focus-visible { outline: 2px solid var(--marka); outline-offset: 3px; }
.y-btn .ikon { width: 18px; height: 18px; }

/* ── Sayı şeridi (uygulama önizleme bölümü) ── */
.y-sayilar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: clamp(16px, 3vw, 34px);
    margin-top: 30px;
}
.y-sayi b {
    display: block;
    font-size: clamp(1.7rem, 3.4vw, 2.3rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1;
    color: var(--marka);
    font-variant-numeric: tabular-nums;
}
.y-sayi span {
    display: block;
    margin-top: 6px;
    color: var(--yazi-3);
    font-size: .86rem;
}

/* ── Adım (nasıl çalışır) ── */
.y-adim { position: relative; padding-top: 8px; }
.y-adim-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--marka) 12%, transparent);
    border: 1px solid var(--y-kenar-usti);
    color: var(--marka);
    font-weight: 800;
    font-size: 1.02rem;
    margin-bottom: 15px;
}

/* ── Son çağrı şeridi ── */
.y-son {
    padding-block: var(--y-bolum-dar);
    background:
        radial-gradient(120% 140% at 50% 0%,
            color-mix(in srgb, var(--marka) 10%, transparent) 0%,
            transparent 62%),
        var(--y-zemin-b);
    border-block: 1px solid var(--y-kenar);
    text-align: center;
}
.y-son .y-baslik { max-width: none; margin-inline: auto; }
.y-son .y-aciklama { margin-inline: auto; text-align: center; }
.y-son-eylem {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 26px;
}

/* ── Kayan şerit ──
   Referansın kahraman altındaki özellik şeridi. İki kopya
   yan yana duruyor ve ilki tam genişliği kadar kayınca
   başa dönüyor; bu yüzden birleşme yeri görünmüyor. */
.y-serit {
    overflow: hidden;
    border-block: 1px solid var(--y-kenar);
    background: var(--y-zemin-b);
    padding-block: 15px;
    /* Kenarlarda yumuşak kayboluş — şeridin bir yerde
       "kesildiği" hissini önlüyor. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.y-serit-akis {
    display: flex;
    gap: 44px;
    width: max-content;
    animation: seritKay 34s linear infinite;
}
.y-serit-akis span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--yazi-3);
    font-size: .88rem;
    font-weight: 600;
    white-space: nowrap;
}
.y-serit-akis span::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--marka);
    flex: none;
}
@media (prefers-reduced-motion: reduce) {
    .y-serit-akis { animation: none; }
    .y-serit { -webkit-mask-image: none; mask-image: none; }
}

/* ── Ölçüm kartları ── */
.y-kart { position: relative; display: flex; flex-direction: column; }
.y-kart-btn { margin-top: auto; padding-top: 13px; padding-bottom: 13px; }
.y-kart h3 + p { margin-bottom: 18px; }

.y-kart-rozet {
    position: absolute;
    top: 14px; right: 14px;
    padding: 4px 10px;
    border-radius: 100px;
    background: var(--marka-dolgu);
    color: var(--marka-uzeri);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.y-rozet-sade {
    background: var(--z-ucuncul);
    color: var(--yazi-2);
}
/* Önerilen kart öne çıksın — referansta "Recommended"
   kutusunun kenarlığı belirgindi. */
.y-kart-onerilen {
    border-color: var(--y-kenar-usti);
    box-shadow: var(--y-parilti), var(--y-golge);
}

/* ── İkili düzen (gizlilik bölümü) ── */
.y-ikili {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(20px, 4vw, 44px);
    align-items: center;
}
.y-satir {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
    color: var(--yazi-2);
    font-size: .9rem;
    line-height: 1.5;
}
.y-satir + .y-satir { margin-top: 14px; }
.y-satir .rozet { flex: none; }

/* ── SSS ── */
.y-sss { display: grid; gap: 10px; }
.y-sss-oge {
    border: 1px solid var(--y-kenar);
    border-radius: 12px;
    background: var(--z-kart);
    overflow: hidden;
    transition: border-color .2s var(--gecis);
}
.y-sss-oge[open] { border-color: var(--y-kenar-usti); }
.y-sss-oge summary {
    padding: 17px 20px;
    cursor: pointer;
    font-weight: 620;
    font-size: .98rem;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.y-sss-oge summary::-webkit-details-marker { display: none; }
/* Artı işareti açılınca eksiye dönüyor: durumun ne olduğunu
   metin okumadan söylüyor. */
.y-sss-oge summary::after {
    content: "";
    flex: none;
    width: 11px; height: 11px;
    border-right: 2px solid var(--marka);
    border-bottom: 2px solid var(--marka);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .22s var(--gecis);
}
.y-sss-oge[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.y-sss-oge p {
    margin: 0;
    padding: 0 20px 19px;
    color: var(--yazi-2);
    font-size: .93rem;
    line-height: 1.65;
}

/* ── Karşılama ekranı artık tam genişlik ──
   Bölümlerin kendi zemini var; eski .kap dar kutusu
   dönüşümlü zeminleri kesiyordu. */
.kars .kap { max-width: none; padding: 0; }
.kars > .kap > .kars-kahraman {
    max-width: var(--y-kap);
    margin-inline: auto;
    padding: clamp(40px, 7vw, 92px) clamp(18px, 4vw, 28px) clamp(36px, 6vw, 76px);
}

/* ═══════════════════════════════════════════════════════════
   32. AYNI DİLİ TÜM SAYFALARA
   ═══════════════════════════════════════════════════════════
   Diğer 19 sayfanın markup'ına dokunmuyoruz. Var olan sınıf
   adlarını yeni bileşen diline bağlıyoruz: .kart → .y-kart
   ölçüleri, .btn → .y-btn oranları, .panel-section → kart.

   Markup'ı yeniden yazmak her sayfada JS kancalarını tek tek
   kontrol etmek demekti. Sınıfları köprülemek aynı görsel
   sonucu sıfır kırılma riskiyle veriyor.
   ═══════════════════════════════════════════════════════════ */

/* ── Kartlar ── */
.kart,
.panel-section,
.doc-page .kutu,
.faq-q {
    border-radius: var(--y-kart-r);
    border: 1px solid var(--y-kenar);
    box-shadow: var(--y-golge);
}
@media (hover: hover) {
    .panel-section:hover,
    .faq-q:hover { border-color: var(--y-kenar-usti); }
}

/* ── Düğmeler ── */
.btn,
.hbtn {
    border-radius: var(--y-dugme-r);
    font-weight: 600;
}
.btn-ana,
.btn-primary {
    box-shadow: var(--y-golge-dugme);
}
.btn-buyuk { padding: var(--y-dugme-dolgu); font-size: 1rem; }

/* ── Bölüm başlıkları ──
   .section-header ve .bolum-bas artık ana sayfadakiyle
   aynı tipografik ölçüde. */
.section-header h2,
.section-header-minimal h2,
.bolum-bas h2,
.doc-page h1 {
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.14;
}
.doc-page h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.doc-page h2 {
    font-size: clamp(1.3rem, 2.4vw, 1.6rem);
    font-weight: 750;
    letter-spacing: -.02em;
    margin-top: clamp(34px, 5vw, 52px);
}

/* ── Belge sayfaları (sss, kvkk, gizlilik, şartlar…) ──
   Referansın 1200px kabı ve nefes alan satır aralığı. */
.doc-page {
    max-width: 860px;                 /* okuma genişliği: 1200 çok geniş */
    margin-inline: auto;
    padding-inline: clamp(18px, 4vw, 28px);
    padding-bottom: var(--y-bolum);
}
.doc-page p,
.doc-page li { line-height: 1.75; color: var(--yazi-2); }
.doc-lead {
    font-size: 1.08rem;
    line-height: 1.7;
    color: var(--yazi-2);
    max-width: 62ch;
}

/* SSS sayfasındaki sorular ana sayfadakiyle aynı dilde */
.faq-q { background: var(--z-kart); overflow: hidden; }
.faq-q summary {
    padding: 17px 20px;
    font-weight: 620;
    cursor: pointer;
    list-style: none;
}
.faq-q summary::-webkit-details-marker { display: none; }
.faq-q p { padding: 0 20px 18px; margin: 0; }
.faq-q[open] { border-color: var(--y-kenar-usti); }

/* ── Ölçüm ekranı kartları ── */
.panel-section { padding: var(--y-kart-dolgu); }
.mode-card {
    border-radius: 13px;
    border: 1px solid var(--y-kenar);
    transition: border-color .2s var(--gecis), background .2s var(--gecis),
                transform .2s var(--gecis);
}
@media (hover: hover) {
    .mode-card:hover { border-color: var(--y-kenar-usti); transform: translateY(-2px); }
}
.mode-card.active,
.mode-card[aria-pressed="true"] {
    border-color: var(--marka);
    background: color-mix(in srgb, var(--marka) 9%, transparent);
}

/* ── Premium sayfası fiyat kartları ── */
.plan-card,
.fiyat-kart {
    border-radius: var(--y-kart-r);
    border: 1px solid var(--y-kenar);
    box-shadow: var(--y-golge);
}
.plan-card.featured,
.plan-card.populer,
.fiyat-kart.one-cikan {
    border-color: var(--y-kenar-usti);
    box-shadow: var(--y-parilti), var(--y-golge);
}

/* ═══════════════════════════════════════════════════════════
   34. ÜST BAR — beş desen, tek hiza
   ═══════════════════════════════════════════════════════════

   ── SORUN ──
   Sitede beş üst bar deseni var: .header (8 sayfa), .top (7),
   .topbar (2), .kars-ust (ana sayfa), .ust (katalog). 25. ve
   27. bölümlerde görünüşlerini eşitlemiştim ama GENİŞLİKLERİNİ
   değil:
       .header-content → 1400px
       .top            → sınır yok, kenardan kenara
       .kars-ust       → 1200px
   Sayfalar arası gezerken logo her seferinde başka bir yerden
   başlıyordu. "Hizasız" görünmesinin sebebi buydu.

   ── ÇÖZÜM ──
   Hepsi --y-kap (1200px) ve aynı yan boşluk. Bar kenardan
   kenara uzanıyor, İÇERİĞİ ortalanıyor — böylece geniş
   ekranda zemin kesilmiyor, dar ekranda da içerik kenara
   yapışmıyor.
   ═══════════════════════════════════════════════════════════ */

/* Ortak yan boşluk: içeriği --y-kap hizasında tutar */
.header,
.topbar,
.top,
.ust {
    padding-inline: max(clamp(18px, 4vw, 28px), (100% - var(--y-kap)) / 2);
    box-sizing: border-box;
}

/* .header ve .topbar'ın iç kabı artık genişliği dayatmıyor:
   hizayı dıştaki yan boşluk veriyor. */
.header-content,
.topbar > .kap,
.ust-ic {
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
    width: 100%;
}

/* Aynı yükseklik: sayfa değişince bar zıplamasın */
.header,
.topbar,
.top,
.ust {
    min-height: var(--bar-y);
    display: flex;
    align-items: center;
}

/* .top'un alt boşluğu da ortak olsun */
.top { margin-bottom: clamp(20px, 4vw, 34px); }

/* Marka tipografisi her barda aynı */
.header-title h1,
.top h1,
.top .brand,
.ust .marka-yazi,
.kars-ust .marka-yazi,
.topbar .marka-yazi {
    font-size: 1.06rem;
    font-weight: 700;
    letter-spacing: -.021em;
    line-height: 1.15;
}

/* Barın içindeki hiçbir şey küçülmesin (30. bölümün kuralı,
   kalan desenlere de) */
.top > *,
.ust-ic > *,
.topbar > * { min-width: 0; }
.top .hbtn,
.top .theme-switch,
.top .lang-switch,
.top .page-actions > * { flex: 0 0 auto; }

/* Belge sayfalarında yazı sütunu dar (860px) ama bar geniş.
   Bu kasıtlı: bar sayfanın çerçevesi, metin ise okuma
   genişliğinde. Referans site de aynısını yapıyor. */

/* ═══════════════════════════════════════════════════════════
   35. YATAY TAŞMA — sayfa yana kaymasın
   ═══════════════════════════════════════════════════════════

   ── KÖK SEBEP ──
   Kahramandaki yüzen kartlar kasten dışarı taşıyor:
       .uc-sol { left: -6% }   .uc-sag { right: -8% }
   Eskiden bunu .kap'ın yan dolgusu emiyordu. 31. bölümde
   `.kars .kap { max-width:none; padding:0 }` yazınca o yastık
   kalktı ve taşma belgeye yansıdı: sayfa yana kaydı.

   ── NEDEN ÜST BAR DA UZADI ──
   Bar içeriğini şöyle ortalıyor:
       padding-inline: max(28px, (100% - 1200px) / 2)
   Belge viewport'tan genişleyince buradaki 100% de büyüdü,
   dolgu şişti ve düğmeler ekranın dışına itildi. Ekran
   görüntüsündeki "uzamış bar" bunun sonucuydu, sebebi değil.

   ── ÇÖZÜM ──
   overflow-x: clip — hidden DEĞİL. hidden, öğeyi kaydırma
   kabı yapar ve içindeki position:sticky üst bar yapışmayı
   bırakır. clip ise yalnızca kırpar, kaydırma bağlamı
   oluşturmaz.
   ═══════════════════════════════════════════════════════════ */

.kars,
.splash-screen:has(.kars) {
    overflow-x: clip;
}
/* clip desteklemeyen eski tarayıcı: kartları içeri al,
   taşacak bir şey kalmasın. */
@supports not (overflow-x: clip) {
    .uc-sol { left: 0; }
    .uc-sag { right: 0; }
}

/* Kartlar geniş ekranda daha da uzağa savrulmasın:
   yüzde, kap büyüdükçe piksel olarak büyüyor. */
.uc-sol { left: max(-6%, -46px); }
.uc-sag { right: max(-8%, -52px); }

/* Bar dolgusu her hâlükârda viewport'a bağlı kalsın.
   100% yerine 100vw: kap yanlışlıkla genişlese bile
   bar taşmıyor. */
.header,
.topbar,
.top,
.ust {
    padding-inline: max(clamp(18px, 4vw, 28px), (100vw - var(--y-kap)) / 2);
}

/* Gövde düzeyinde son emniyet: hiçbir sayfa yana kaymasın. */
html { overflow-x: clip; }

/* ── Yüzen düğmeler karşılama ekranının ÜSTÜNDE ──
   .float-stack z-index 90, karşılama ekranı 900. Ana sayfada
   düğmeler katmanın altında kalıyor ve hiç görünmüyordu.
   Yalnızca karşılama açıkken yükseltiyoruz; başka sayfalarda
   eski sıralama bozulmasın. */
body:has(.splash-screen .kars) .float-stack { z-index: 901; }

/* Karşılamada sohbet penceresi yok, o yüzden yığın tek düğme.
   Alt boşluğu biraz artırıyoruz: şerit ve altbilgi ile
   çakışmasın. */
body:has(.splash-screen .kars) .float-stack { --float-alt: 22px; }

/* ── Marka şeridi ──
   Metin şeridinin altında, ondan daha sakin: ters yönde ve
   daha yavaş akıyor ki göz hangisini takip edeceğini
   şaşırmasın.

   ── LOGOLAR TEK RENK ──
   Markaların kendi renkleriyle akan bir şerit, on beş ayrı
   renk demek; sayfanın geri kalanıyla kavga ediyor. Logoları
   grayscale + opacity ile tek tona indiriyoruz, üstüne
   gelince kendi rengine dönüyor. Bu "işbirliği" iddiası da
   taşımıyor — sadece "bu cihazlarda çalışır" diyor.
   ═══════════════════════════════════════════════════════════ */
.y-marka-serit {
    display: grid;
    justify-items: center;
    gap: 16px;
    padding-block: clamp(26px, 4vw, 40px);
    background: var(--y-zemin-a);
    border-bottom: 1px solid var(--y-kenar);
}
.y-marka-baslik {
    font-size: .76rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--yazi-3);
}
.y-marka-kutu {
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.y-marka-akis {
    display: flex;
    align-items: center;
    gap: clamp(30px, 5vw, 62px);
    width: max-content;
    animation: seritKay 48s linear infinite reverse;
}

/* ── Marka kutusu ──
   Logolar farklı oranlarda geliyor; hepsini aynı GENİŞLİĞE
   zorlamak geniş olanları eziyor. Yüksekliği sabitleyip
   genişliği serbest bırakmak doğrusu.

   ── RENGE DOKUNMUYORUZ ──
   Önce logoları grileştirip koyu temada ters çeviriyordum.
   Görsel olarak sakindi ama marka kullanım kılavuzlarının
   neredeyse tamamı logonun rengini değiştirmeyi, ters
   çevirmeyi ve efekt uygulamayı açıkça yasaklıyor. Sakinliği
   artık OPAKLIKLA sağlıyoruz — o, logonun kendisini
   değiştirmiyor.

   Koyu temada siyah logoların kaybolmasını da ters çevirerek
   değil, altına açık renkli bir zemin koyarak çözüyoruz.
   Kılavuzların istediği de bu. */
.y-marka {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 16px;
    flex: none;
    border-radius: 10px;
    transition: opacity .2s var(--gecis), background .2s var(--gecis);
    opacity: .72;
}
[data-theme="dark"] .y-marka {
    /* Logo zemini: siyah logolar kaybolmasın */
    background: rgb(255 255 255 / .90);
}
.y-marka img {
    height: 26px;
    width: auto;
    max-width: 132px;
    object-fit: contain;
    display: block;
}
@media (hover: hover) {
    .y-marka:hover { opacity: 1; }
}

/* Logo dosyası yoksa marka adı yazıyla görünüyor.
   Yazı hâli de tasarlanmış dursun — "eksik görsel" gibi
   değil, kasıtlı bir uyumluluk listesi gibi. */
.y-marka b {
    font-size: 1.06rem;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--yazi-2);
    white-space: nowrap;
}
[data-theme="dark"] .y-marka:has(b) { background: transparent; }
[data-theme="dark"] .y-marka b { color: var(--yazi-2); }
.y-marka:has(b) {
    border: 1px solid var(--y-kenar);
    background: var(--z-kart);
}

@media (prefers-reduced-motion: reduce) {
    .y-marka-akis { animation: none; }
    .y-marka-kutu {
        -webkit-mask-image: none; mask-image: none;
        overflow-x: auto;
    }
}

/* ═══════════════════════════════════════════════════════════
   35. YATAY TAŞMA — sayfa yana kaymasın
   ═══════════════════════════════════════════════════════════

   ── KÖK SEBEP ──
   Kahramandaki yüzen kartlar kasten dışarı taşıyor:
       .uc-sol { left: -6% }   .uc-sag { right: -8% }
   Eskiden bunu .kap'ın yan dolgusu emiyordu. 31. bölümde
   `.kars .kap { max-width:none; padding:0 }` yazınca o yastık
   kalktı ve taşma belgeye yansıdı: sayfa yana kaydı.

   ── NEDEN ÜST BAR DA UZADI ──
   Bar içeriğini şöyle ortalıyor:
       padding-inline: max(28px, (100% - 1200px) / 2)
   Belge viewport'tan genişleyince buradaki 100% de büyüdü,
   dolgu şişti ve düğmeler ekranın dışına itildi. Ekran
   görüntüsündeki "uzamış bar" bunun sonucuydu, sebebi değil.

   ── ÇÖZÜM ──
   overflow-x: clip — hidden DEĞİL. hidden, öğeyi kaydırma
   kabı yapar ve içindeki position:sticky üst bar yapışmayı
   bırakır. clip ise yalnızca kırpar, kaydırma bağlamı
   oluşturmaz.
   ═══════════════════════════════════════════════════════════ */

.kars,
.splash-screen:has(.kars) {
    overflow-x: clip;
}
/* clip desteklemeyen eski tarayıcı: kartları içeri al,
   taşacak bir şey kalmasın. */
@supports not (overflow-x: clip) {
    .uc-sol { left: 0; }
    .uc-sag { right: 0; }
}

/* Kartlar geniş ekranda daha da uzağa savrulmasın:
   yüzde, kap büyüdükçe piksel olarak büyüyor. */
.uc-sol { left: max(-6%, -46px); }
.uc-sag { right: max(-8%, -52px); }

/* Bar dolgusu her hâlükârda viewport'a bağlı kalsın.
   100% yerine 100vw: kap yanlışlıkla genişlese bile
   bar taşmıyor. */
.header,
.topbar,
.top,
.ust {
    padding-inline: max(clamp(18px, 4vw, 28px), (100vw - var(--y-kap)) / 2);
}

/* Gövde düzeyinde son emniyet: hiçbir sayfa yana kaymasın. */
html { overflow-x: clip; }

/* ── Yüzen düğmeler karşılama ekranının ÜSTÜNDE ──
   .float-stack z-index 90, karşılama ekranı 900. Ana sayfada
   düğmeler katmanın altında kalıyor ve hiç görünmüyordu.
   Yalnızca karşılama açıkken yükseltiyoruz; başka sayfalarda
   eski sıralama bozulmasın. */
body:has(.splash-screen .kars) .float-stack { z-index: 901; }

/* Karşılamada sohbet penceresi yok, o yüzden yığın tek düğme.
   Alt boşluğu biraz artırıyoruz: şerit ve altbilgi ile
   çakışmasın. */
body:has(.splash-screen .kars) .float-stack { --float-alt: 22px; }

/* ── Marka şeridi ──
   Metin şeridinin altında, ondan daha sakin. İki şerit aynı
   hızda aksaydı göz hangisini takip edeceğini bilemezdi;
   bu yavaş ve ters yönde akıyor. */
.y-marka-serit {
    display: grid;
    justify-items: center;
    gap: 12px;
    padding-block: clamp(24px, 4vw, 38px);
    background: var(--y-zemin-a);
    border-bottom: 1px solid var(--y-kenar);
}
.y-marka-baslik,
.y-marka-not {
    font-size: .76rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--yazi-3);
}
.y-marka-not {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    font-size: .84rem;
}
.y-marka-kutu {
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.y-marka-akis {
    display: flex;
    align-items: center;
    gap: clamp(28px, 5vw, 58px);
    width: max-content;
    /* Ters yön ve daha yavaş: üstteki metin şeridiyle
       yarışmasın. */
    animation: seritKay 48s linear infinite reverse;
}
.y-marka-akis span {
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--yazi-2);
    white-space: nowrap;
    opacity: .62;
    transition: opacity .2s var(--gecis);
}
@media (hover: hover) {
    .y-marka-akis span:hover { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .y-marka-akis { animation: none; }
    .y-marka-kutu { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
}

/* ═══════════════════════════════════════════════════════════
   36. PROFİL SAYFASI
   ═══════════════════════════════════════════════════════════
   Ekran görüntüsündeki sorunlar:
     • Bölümler birbirine yapışıktı, nerede bitip nerede
       başladıkları belli değildi
     • Sayı kutuları (Cihaz/Tarama/Ort. Sağlık/Bot Hakkı)
       dört eşit kutu hâlinde geniş ekranda dağılıyordu
     • Üstteki turuncu Premium şeridi sayfanın en dikkat
       çeken öğesiydi — oysa asıl içerik altındaki veriler
     • Uyarı bölümündeki boşluk aşırı, kart yarısı boş
   ═══════════════════════════════════════════════════════════ */

#container {
    max-width: 980px;              /* 1200 bu içerik için fazla geniş */
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 28px);
    padding-bottom: var(--y-bolum);
    display: grid;
    gap: clamp(16px, 2.4vw, 24px); /* bölümler arası nefes */
}

/* ── Kartlar ── */
#container > .card,
#container > .panel,
.pf-bolum,
.profile-card {
    background: var(--z-kart);
    border: 1px solid var(--y-kenar);
    border-radius: var(--y-kart-r);
    padding: var(--y-kart-dolgu);
    box-shadow: var(--y-golge);
}

/* ── Bölüm başlıkları ── */
#container h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0 0 16px;
}
#container h2 .ikon { width: 19px; height: 19px; color: var(--marka); }
#container h3, #container h4 {
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -.015em;
    margin: 0 0 10px;
}

/* ── Üstteki sayı kutuları ──
   Dört eşit kutu yerine akan ızgara: dar ekranda ikişerli,
   geniş ekranda dörtlü, arada boşluk büyümüyor. */
.mini-stats,
.pf-sayilar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}
.mini-stat {
    background: var(--z-ikincil);
    border: 1px solid var(--y-kenar);
    border-radius: 12px;
    padding: 16px 14px;
    text-align: center;
}
.mini-stat .n {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.1;
    color: var(--marka);
    font-variant-numeric: tabular-nums;
}
.mini-stat .k {
    margin-top: 5px;
    font-size: .8rem;
    color: var(--yazi-3);
}

/* ── Premium şeridi ──
   Turuncu degrade sayfanın en gürültülü öğesiydi ve gözü
   asıl veriden çalıyordu. Altın çizgiye indiriyoruz —
   hâlâ ayrı duruyor, ama bağırmıyor. */
.upsell,
.upsell-pdf,
.pf-premium {
    background: var(--altin-zemin) !important;
    color: var(--altin-yazi) !important;
    border: 1px solid var(--altin-cizgi) !important;
    border-radius: var(--y-kart-r);
    box-shadow: none !important;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.upsell p, .upsell-pdf p { margin: 4px 0 0; opacity: .85; font-size: .9rem; }
.upsell-btn {
    background: var(--altin-yazi);
    color: var(--z-kart);
    border-radius: 10px;
    padding: 10px 18px;
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
}

/* ── Uyarı bölümü ──
   "Dikkat gerektiren durum yok" hâli yarım ekran kaplıyordu.
   Boş durum bir satır olmalı, bir bölüm değil. */
.an-empty,
.alerts-empty {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--iyi-acik);
    border: 1px solid color-mix(in srgb, var(--iyi) 22%, transparent);
    border-radius: 12px;
    text-align: left;
}
.an-empty .ikon,
.an-empty .an-icon { color: var(--iyi); flex: none; }
.an-empty span { font-size: .92rem; }

/* ── Ayar satırı (e-posta uyarıları) ── */
.setting-row,
.pf-ayar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 16px;
    background: var(--z-ikincil);
    border: 1px solid var(--y-kenar);
    border-radius: 12px;
}
.setting-row p { margin: 4px 0 0; font-size: .86rem; color: var(--yazi-3); max-width: 60ch; }

/* ── Sekmeler ── */
.tabs {
    display: flex;
    gap: 6px;
    padding: 4px;
    background: var(--z-ikincil);
    border: 1px solid var(--y-kenar);
    border-radius: 11px;
    width: fit-content;
    margin-bottom: 18px;
}
.tabs button {
    border: none;
    background: transparent;
    color: var(--yazi-2);
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .16s var(--gecis), color .16s var(--gecis);
}
.tabs button:hover { color: var(--yazi); }
.tabs button.active {
    background: var(--marka-dolgu);
    color: var(--marka-uzeri);
}

/* ── Tablolar ── */
#container table { width: 100%; border-collapse: collapse; font-size: .9rem; }
#container th {
    text-align: left;
    font-size: .76rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--yazi-3);
    font-weight: 700;
    padding: 10px 12px;
    border-bottom: 1px solid var(--kenar);
}
#container td { padding: 12px; border-bottom: 1px solid var(--kenar); }
#container tr:last-child td { border-bottom: none; }

/* ── Boş durum ── */
#container .empty {
    padding: 26px 18px;
    text-align: center;
    color: var(--yazi-3);
    font-size: .92rem;
    background: var(--z-ikincil);
    border: 1px dashed var(--kenar-koyu);
    border-radius: 12px;
}

@media (max-width: 640px) {
    .tabs { width: 100%; }
    .tabs button { flex: 1; padding: 9px 10px; }
    .upsell, .upsell-pdf { flex-direction: column; align-items: flex-start; }
}

/* ═══════════════════════════════════════════════════════════
   37. TELEFON MAKETİ — gerçek cihaz görünümü
   ═══════════════════════════════════════════════════════════
   Önceki hâli yuvarlatılmış bir dikdörtgendi; "telefon"
   olduğunu yalnızca oranından anlıyordun. Gerçek bir cihazda
   göz üç şeye takılıyor: çerçevenin metal kenarı, ekranın
   çerçeveden içeride başlaması, ve yan düğmeler. Üçünü de
   çiziyoruz.

   ── HEPSİ CSS ──
   Görsel dosyası yok: cihaz fotoğrafı koymak hem ağır olur
   hem de belirli bir modeli sahiplenmek olur. Çizim tema ile
   birlikte değişiyor, her ekran yoğunluğunda net.
   ═══════════════════════════════════════════════════════════ */

.telefon {
    /* ── Çerçeve ──
       İki katmanlı: dış kenar (koyu metal) + iç kenar (parlak
       pah). Tek renk düz bir çerçeve oyuncak gibi duruyordu. */
    --cerceve: 11px;
    position: relative;
    width: min(300px, 80vw);
    aspect-ratio: 9 / 18.7;
    border-radius: 46px;
    border: none;
    padding: var(--cerceve);
    background:
        linear-gradient(150deg, #4a4f5c 0%, #23262f 22%, #16181f 50%,
                        #23262f 78%, #4a4f5c 100%);
    box-shadow:
        0 34px 70px -28px rgb(0 0 0 / .55),
        0 4px 14px -6px rgb(0 0 0 / .4),
        inset 0 0 0 1px rgb(255 255 255 / .10);
    display: block;
    overflow: visible;
    /* Etkileşimli eğilme JS'ten geliyor */
    transform-style: preserve-3d;
    will-change: transform;
}

/* Eski hoparlör çentiği artık kamera deliği */
.telefon::before {
    content: '';
    position: absolute;
    top: calc(var(--cerceve) + 13px);
    left: 50%;
    transform: translateX(-50%);
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #05060a;
    box-shadow: inset 0 0 0 1.5px #2a2e39, 0 0 0 1px rgb(0 0 0 / .6);
    z-index: 3;
}

/* ── Ekran ── */
.tel-ekran {
    position: relative;
    height: 100%;
    border-radius: 36px;
    background: var(--z-kart);
    padding: 30px var(--b4) var(--b4);
    display: grid;
    align-content: start;
    gap: var(--b4);
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .35);
}

/* ── Yan düğmeler ──
   Sol: ses kısma/açma (tek uzun parça), sağ: güç. Gerçek
   cihazlarda ikisi aynı hizada değil; öyle çizmek maketi
   hemen sahte gösteriyor. */
.tel-govde { position: absolute; inset: 0; pointer-events: none; }
.tel-govde::before,
.tel-govde::after {
    content: '';
    position: absolute;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, #3a3f4a, #23262f);
}
.tel-govde::before {          /* ses tuşları — sol, yukarıda */
    left: -3px;
    top: 21%;
    height: 88px;
}
.tel-govde::after {           /* güç tuşu — sağ, biraz aşağıda */
    right: -3px;
    top: 30%;
    height: 54px;
}

/* Parlamanın konumu JS'ten geliyor. @property ile tiplendirmek
   iki şey kazandırıyor: başlangıç değeri garanti (JS hiç
   çalışmasa da parlama ortada durur) ve değer geçişlenebilir
   hâle gelir. */
@supports (background: paint(x)) {
    @property --parlama-x {
        syntax: '<percentage>';
        inherits: false;
        initial-value: 50%;
    }
}

/* ── Cam parlaması ──
   Sabit bir çizgi değil, eğilmeye göre kayan bir yansıma.
   --parlama-x JS'ten geliyor; JS yoksa ortada durup
   hafif bir cam hissi bırakıyor. */
.tel-parlama {
    position: absolute;
    inset: var(--cerceve);
    border-radius: 36px;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(
        105deg,
        transparent 35%,
        rgb(255 255 255 / .10) calc(var(--parlama-x, 50%) - 8%),
        rgb(255 255 255 / .16) var(--parlama-x, 50%),
        rgb(255 255 255 / .10) calc(var(--parlama-x, 50%) + 8%),
        transparent 65%);
    mix-blend-mode: screen;
    opacity: .55;
    transition: opacity .3s var(--gecis);
}
[data-theme="light"] .tel-parlama { opacity: .32; }

/* ── Ekran içi hizalama ── */
.tel-ust { margin-top: 0; }

/* ── Ekran içeriği sırayla açılıyor ──
   Ölçüm bitmiş gibi: önce başlık, sonra halka, sonra satırlar.
   Kartın "canlı" hissetmesinin asıl kaynağı bu. */
@keyframes telIcerik {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
.tel-ekran > *          { animation: telIcerik .5s var(--gecis) both; }
.tel-ekran > .tel-ust   { animation-delay: .30s; }
.tel-ekran > .tel-orta  { animation-delay: .42s; }
.tel-ekran > div:last-child { animation-delay: .54s; }
.tel-satir              { animation: telIcerik .45s var(--gecis) both; }
.tel-satir:nth-child(1) { animation-delay: .62s; }
.tel-satir:nth-child(2) { animation-delay: .70s; }
.tel-satir:nth-child(3) { animation-delay: .78s; }

/* ── "Ölçüldü" rozeti ── */
.tel-ust .nokta {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: telNabiz 2.4s var(--gecis) infinite;
}
@keyframes telNabiz {
    0%, 100% { opacity: 1;  box-shadow: 0 0 0 0 currentColor; }
    50%      { opacity: .5; box-shadow: 0 0 0 4px transparent; }
}

/* ── Süzülme ──
   3B eğilme JS'ten geldiğinde ikisi aynı transform'a yazamaz.
   Süzülmeyi kapsayıcıya taşıyoruz: .telefon eğilir,
   .kars-gorsel süzülür. */
.telefon.tel-etkilesimli { animation: none; }

@media (prefers-reduced-motion: reduce) {
    .tel-ekran > *,
    .tel-satir { animation: none; opacity: 1; transform: none; }
    .tel-ust .nokta { animation: none; }
    .telefon { transform: none !important; }
}

@media (max-width: 560px) {
    .telefon { --cerceve: 9px; border-radius: 40px; }
    .tel-ekran { border-radius: 31px; padding-top: 26px; }
}

/* ═══════════════════════════════════════════════════════════
   38. ÖLÇÜM EKRANI ÜST BARI — sığdırma
   ═══════════════════════════════════════════════════════════
   ── ÖLÇÜM ──
   Girişli kullanıcıda bara şunlar giriyor:
     marka 250 + BETA 46 + tema 70 + dil 70 + Blog 90 +
     Premium 190 + rozet 120 + Profil 100 + Köprü 150 +
     Çıkış 80 + boşluklar 90  ≈  1256px
   Kap 1200px. Yani masaüstünde bile taşıyordu; sorun dar
   ekran değil, içeriğin kendisiydi.

   ── YAKLAŞIM ──
   Eleme eşiklerini içeriğin gerçek genişliğine göre kurduk.
   Sıra bilinçli: önce SÜS gider (BETA rozeti), sonra
   TEKRAR EDEN bilgi (kullanıcı adı rozeti — zaten profilde
   var), sonra METİNLER (ikon kalır, dokunma hedefi korunur),
   en son ikincil bağlantılar. Giriş/Üye ol ve Premium en
   sona kadar durur: barın asıl işi onlar.
   ═══════════════════════════════════════════════════════════ */

.header-top {
    gap: clamp(8px, 1.2vw, 14px);
}
.user-area { gap: clamp(6px, .8vw, 10px); }
.user-guest,
.user-logged { gap: clamp(6px, .8vw, 10px); }

/* Bar nefes alsın: içerik dikeyde ortalanmış ve yüksekliği
   sabit. Ekran görüntüsünde öğeler üst kenara yapışıktı. */
.header { min-height: var(--bar-y); }
.header .header-content { display: flex; align-items: center; }
.header-top { width: 100%; }

/* Durum satırı artık barın içinde değil — 46. bölüme taşındı.
   Bu seçici öğe orada olmadığı için hiçbir şeyle eşleşmiyordu;
   duran ama iş yapmayan kural, sonraki okuyanı yanıltıyor. */

/* ── Kademeli eleme ── */
@media (max-width: 1400px) {
    .header .beta-tag { display: none; }
}
@media (max-width: 1280px) {
    .header .premium-btn .pb-price { display: none; }
    /* Köprü: metin gider, ikon kalır */
    .header #headerBridgeBtn { font-size: 0; gap: 0; padding: 8px 10px; }
    .header #headerBridgeBtn .ikon { font-size: 1rem; }
}
@media (max-width: 1160px) {
    /* Kullanıcı adı rozeti: aynı bilgi profil sayfasında da var */
    .header #userNameBadge,
    .header #userBadge { display: none; }
}
@media (max-width: 1040px) {
    .header #headerProfileBtn { font-size: 0; gap: 0; padding: 8px 10px; }
    .header #headerProfileBtn .ikon { font-size: 1rem; }
    .header #headerBlogBtn { font-size: 0; gap: 0; padding: 8px 10px; }
    .header #headerBlogBtn .ikon { font-size: 1rem; }
}
@media (max-width: 900px) {
    .header .lang-switch { display: none; }   /* tarayıcı dili algılanıyor */
    .header .premium-btn .pb-text { display: none; }
}
@media (max-width: 760px) {
    .header .header-title p { display: none; }
    /* Marka yazısı: işaret kalıyor, kelime gidiyor.
       Eskiden burada `span:not(.marka-vurgu):not(.beta-tag)`
       yazıyordu ve HİÇBİR ŞEYLE eşleşmiyordu — "Battery …
       Tracker" çıplak metin düğümüydü. Yani bu satır yıllardır
       hiçbir iş yapmıyor, bar telefonda taşmaya devam
       ediyordu. Artık kelime kendi sarmalayıcısında. */
    .header .header-title .marka-kelime { display: none; }
    .header .theme-switch { display: none; }
}
@media (max-width: 560px) {
    .header #headerBridgeBtn,
    .header #headerProfileBtn { display: none; }
}

/* Metni gizlerken ikon boyutu font-size'a bağlıysa o da
   sıfırlanıyor. Sabitliyoruz ki düğme boş kutuya dönmesin. */
.header .header-btn .ikon { width: 17px; height: 17px; flex: none; }

/* ═══════════════════════════════════════════════════════════
   39. KARŞILAMA ÜST BARI — tek ve son hâli
   ═══════════════════════════════════════════════════════════

   ── NEDEN BAŞTAN YAZILDI ──
   Bu bara 27, 30, 33, 34 ve 35. bölümlerden ayrı ayrı kural
   yazmışım; üstelik 33 ve 34 dosyaya iki kez girmiş. Sonuç,
   birbirini ezen bir katman yığınıydı ve hangi kuralın
   kazandığını kestirmek imkânsızdı. Hepsi silindi, tek blok
   burada.

   ── GENİŞLİK NASIL SINIRLANIYOR ──
   Eskiden dolgu matematiğiyle:
       padding-inline: max(28px, (100% - 1200px) / 2)
   Bu, kabın gerçekten viewport genişliğinde olmasına ve
   kaydırma çubuğunun hesaba katılmasına bağlıydı. Biri
   şaşınca dolgu şişiyor, `justify-content: space-between`
   olan bar içeriği ekranın dışına savuruyordu — ekran
   görüntüsündeki dağılmış bar buydu.

   Artık genişliği İÇ SARMALAYICI sınırlıyor:
       .kars-ust      → kenardan kenara, zemin ve çizgi
       .kars-ust-ic   → max-width 1200px, ortalanmış
   Tarama ekranındaki .header / .header-content ile aynı
   desen. Orada çalışıyor, burada da çalışır.
   ═══════════════════════════════════════════════════════════ */

.kars-ust {
    position: sticky;
    top: 0;
    z-index: 10;
    display: block;                 /* hizayı iç kutu yapıyor */
    max-width: none;
    margin-inline: 0;
    padding: 0 clamp(16px, 3vw, 26px);
    box-sizing: border-box;
    min-height: var(--bar-y);
    border-bottom: 1px solid var(--kenar);
    background: color-mix(in srgb, var(--z-arka) 92%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(170%);
            backdrop-filter: blur(16px) saturate(170%);
    box-shadow: 0 6px 20px -18px rgb(0 0 0 / .5);
}

.kars-ust-ic {
    width: 100%;
    max-width: var(--y-kap);
    margin-inline: auto;
    min-height: var(--bar-y);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(10px, 2vw, 20px);
}

.kars-nav {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    flex-wrap: nowrap;
}
.kars-ust .marka-yazi { flex: 0 1 auto; min-width: 0; }

/* Barın hiçbir öğesi küçülmesin: "sarmasın" demek
   "küçülmesin" demek değil. */
.kars-nav > *,
.kars-ust .theme-switch,
.kars-ust .lang-switch { flex: 0 0 auto; }

/* ── ÖLÇÜLER ──
   Bar bir gezinme çubuğu, bir eylem paneli değil. Öğeler
   sayfa içindeki düğmelerle aynı boyutta olunca bar
   gereğinden fazla yer kaplıyor ve kalabalık duruyor.
   Hepsi bir tık küçüldü; dokunma hedefi 34px'in altına
   düşmüyor (erişilebilirlik alt sınırı). */
.kars-ust { --bar-y: 58px; }

.kars-ust .marka-yazi {
    font-size: .97rem;
    gap: 7px;
}
.kars-ust .marka-yazi img { width: 25px; height: 25px; }
.kars-ust .rozet-marka {
    font-size: .58rem;
    padding: 2px 6px;
    letter-spacing: .04em;
}

.kars-ust .theme-switch,
.kars-ust .lang-switch {
    padding: 2px;
    border-radius: 8px;
}
.kars-ust .theme-switch button,
.kars-ust .lang-switch button {
    flex: 0 0 auto;
    min-width: 27px;
    padding: 5px 7px;
    font-size: .7rem;
    border-radius: 6px;
}
.kars-ust .theme-switch .ikon { width: 14px; height: 14px; }

/* ── SORUNUN KÖKÜ ──
   style.css'te `.btn { width: 100% }` var. Bu, panel içindeki
   tam genişlik düğmeler için doğru; ama karşılama barındaki
   düğmeler de `.btn` sınıfını taşıyor. Sonuç: her düğme
   `.kars-nav`ın tamamı kadar genişlemeye çalışıyor,
   `flex-shrink: 0` da küçülmesini engelliyor. Bar taşıyor,
   düğmeler devleşiyor, aralarında koca boşluklar oluşuyor.

   Tarama ekranının düzgün görünmesinin sebebi buydu: orası
   `.btn` değil `.header-btn` kullanıyor ve onda width yok.

   Barda düğme genişliği İÇERİĞİ kadar olmalı. */
.kars-nav .btn {
    width: auto;
    flex: 0 0 auto;
}
.kars-nav .btn-kucuk {
    padding: 8px 12px;
    font-size: .82rem;
    min-height: 34px;
    border-radius: 9px;
    gap: 6px;
}
.kars-nav .btn-kucuk .ikon { width: 15px; height: 15px; }

/* ── Eleme ──
   Bara giren toplam ≈ marka 250 + BETA 46 + tema 70 + dil 70
   + Rehber 92 + Giriş 92 + Üye ol 130 + boşluklar ≈ 800px.
   1200'lük kaba sığıyor; asıl daralma 1000px altında
   başlıyor. Sıra: süs → ikincil metin → dil → marka yazısı. */
@media (max-width: 1000px) { .kars-ust .rozet-marka { display: none; } }
@media (max-width: 900px)  { .kars-ust #splashBlogLink span { display: none; } }
@media (max-width: 780px)  { .kars-ust .lang-switch { display: none; } }
@media (max-width: 680px)  { .kars-ust .marka-yazi > span:not(.rozet) { display: none; } }
@media (max-width: 520px)  {
    .kars-ust .theme-switch { display: none; }
    .kars-ust #splashBlogLink { display: none; }
}

/* ── KAYDIRMA İLERLEME ÇİZGİSİ ──
   Bu kurallar 33. bölümdeydi; o bölümü çakışan katmanları
   temizlerken silince çizginin yüksekliği ve zemini de gitti.
   Öğe markup'ta duruyordu ama 0 piksel yüksekliğinde,
   görünmez bir kutuydu. Tek kaynak burası artık.

   ── NEDEN scroll(nearest) ──
   Karşılama ekranı kendi içinde kayıyor (.splash-screen
   overflow-y: auto); belge hiç kaymıyor. scroll(root) bu
   yüzden her zaman sıfır dönerdi. */
.kars-ilerleme {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    z-index: 4;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--marka), var(--iyi));
    pointer-events: none;
}
@supports (animation-timeline: scroll()) {
    .kars-ilerleme {
        animation: cizgiDol linear both;
        animation-timeline: scroll(nearest block);
    }
}

/* ═══════════════════════════════════════════════════════════
   40. ŞERİTLER — kesintisiz akış
   ═══════════════════════════════════════════════════════════

   ── ZIPLAMANIN SEBEBİ ──
   İki özdeş kopya yan yana duruyor ve akış -50% kayınca başa
   dönüyor. Ama aralar `gap` ile veriliyordu ve gap SON
   öğeden sonra uygulanmıyor:

       toplam  = 30·genişlik + 29·boşluk
       yarısı  = 15·genişlik + 14,5·boşluk
       bir kopya = 15·genişlik + 14·boşluk

   Yarım boşlukluk fark her turda görünür bir sıçrama
   yapıyordu — "kendini sıfırlıyor" dediğin şey buydu.

   ── ÇÖZÜM ──
   Boşluğu `gap` yerine her öğenin SAĞ KENAR BOŞLUĞU olarak
   veriyoruz. Böylece son öğenin de arkasında boşluk kalıyor:

       toplam  = 30·(genişlik + boşluk)
       yarısı  = 15·(genişlik + boşluk) = tam bir kopya

   Fark sıfır, birleşme yeri görünmüyor.
   ═══════════════════════════════════════════════════════════ */

.y-serit-akis,
.y-marka-akis {
    gap: 0;                     /* boşluk artık kenar boşluğunda */
}
.y-serit-akis > span { margin-right: 44px; }
.y-marka-akis  > .y-marka { margin-right: clamp(30px, 5vw, 62px); }

/* Kopyalar arası da aynı boşluk olsun diye animasyon tam
   -50%'de kalıyor; ek düzeltme gerekmiyor. */
@keyframes seritKay { to { transform: translateX(-50%); } }

/* ═══════════════════════════════════════════════════════════
   41. SOHBET — açılış ve kapanış
   ═══════════════════════════════════════════════════════════
   Eski hâli 0.3 saniyelik düz bir yukarı kayma idi; pencere
   ekranın ortasından belirir gibi duruyordu.

   ── NEREDEN AÇILMALI ──
   Pencere, kullanıcının bastığı düğmeden çıkmalı. Bu yüzden
   transform-origin sağ alt köşe: gözle takip edilen hareket
   "düğmeye bastım, oradan büyüdü" oluyor.

   ── KAPANIŞ NEDEN ZOR ──
   Pencere .active sınıfıyla display:none ↔ flex arasında
   gidiyor. display animasyonlanamadığı için kapanış eskiden
   anlıktı. transition-behavior: allow-discrete + @starting-style
   bunu çözüyor; desteklemeyen tarayıcıda yalnızca açılış
   animasyonlu kalıyor, kapanış anlık — bozulma değil, eksilme.
   ═══════════════════════════════════════════════════════════ */

.chat-drawer .chat-content,
.drawer-content {
    transform-origin: bottom right;
}

/* ── Açılış ── */
@keyframes sohbetAcil {
    0%   { opacity: 0; transform: translateY(16px) scale(.90); }
    62%  { opacity: 1; transform: translateY(-3px) scale(1.012); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.chat-drawer .chat-content.active,
.drawer-content.active {
    animation: sohbetAcil .42s var(--yay) both;
}

/* İçerik sırayla girsin: başlık → mesajlar → yazma alanı.
   Hepsi aynı anda gelince pencere "patlıyor" gibi oluyor. */
@keyframes sohbetIc {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
.chat-content.active > * { animation: sohbetIc .34s var(--gecis) both; }
.chat-content.active > .drawer-header      { animation-delay: .10s; }
.chat-content.active > .chat-messages      { animation-delay: .17s; }
.chat-content.active > .chat-input-wrapper { animation-delay: .24s; }

/* ── Kapanış ──
   Modern tarayıcıda display geçişi ayrık değerlerle
   animasyonlanabiliyor. */
@supports (transition-behavior: allow-discrete) {
    .chat-drawer .chat-content,
    .drawer-content {
        transition: opacity .2s var(--gecis),
                    transform .2s var(--gecis),
                    display .2s allow-discrete;
    }
    .chat-drawer .chat-content:not(.active),
    .drawer-content:not(.active) {
        opacity: 0;
        transform: translateY(12px) scale(.94);
    }
}

/* ── Düğme ──
   Basıldığında hafif küçülme: dokunsal geri bildirim.
   Açıkken hafif döndürme, "bu düğme şu an açık" diyor. */
.drawer-toggle,
.chat-toggle {
    transition: transform .22s var(--yay), box-shadow .22s var(--gecis);
}
.drawer-toggle:active,
.chat-toggle:active { transform: scale(.93); }
.chat-toggle.active { transform: rotate(8deg) scale(1.04); }

/* Yeni mesaj balonu tek tek gelsin */
@keyframes mesajGir {
    from { opacity: 0; transform: translateY(6px) scale(.98); }
    to   { opacity: 1; transform: none; }
}
.chat-messages > * { animation: mesajGir .28s var(--gecis) both; }

@media (prefers-reduced-motion: reduce) {
    .chat-drawer .chat-content.active,
    .drawer-content.active,
    .chat-content.active > *,
    .chat-messages > * { animation: none; }
    .chat-drawer .chat-content,
    .drawer-content { transition: none; }
    .chat-toggle.active { transform: none; }
}

/* ═══════════════════════════════════════════════════════════
   42. ÇİFT KAYDIRMA ÇUBUĞU
   ═══════════════════════════════════════════════════════════
   Karşılama ekranı `position: fixed; inset: 0; overflow-y: auto`
   yani KENDİ kaydırma kabı. Ama arkasındaki belge de uzun
   (ölçüm ekranı orada duruyor) ve o da kayıyor. Sonuç: yan
   yana iki kaydırma çubuğu, biri hiçbir işe yaramıyor —
   üstelik hangisinin çalıştığı denenmeden anlaşılmıyor.

   Karşılama açıkken belgenin kaymasına gerek yok: görünen
   her şey zaten o katmanın içinde. Kilitliyoruz.

   data-acilis bayrağını acilis.js zaten yazıyor; ayrı bir
   kanca eklemeye gerek yok.
   ═══════════════════════════════════════════════════════════ */
html[data-acilis="karsilama"]:has(.splash-screen .kars) {
    overflow: hidden;
}
html[data-acilis="karsilama"]:has(.splash-screen .kars) body {
    overflow: hidden;
}

/* :has() desteklemeyen tarayıcı: karşılama görünürken de
   belge kayabilir. Bu yalnızca fazladan bir çubuk demek,
   işlev kaybı değil. */


/* ═══════════════════════════════════════════════════════════
   43. BAŞA DÖN DÜĞMESİ — ilerleme halkası
   ═══════════════════════════════════════════════════════════
   Düğmenin çevresinde sayfanın ne kadarını okuduğunu gösteren
   bir halka. Aşağı indikçe doluyor, yukarı çıktıkça boşalıyor.

   ── NEDEN conic-gradient + mask ──
   SVG çember de olurdu ama fazladan öğe ve stroke-dasharray
   hesabı gerektiriyor. conic-gradient tek özellikle dolan bir
   daire veriyor; ortasını mask ile oyunca halka kalıyor.

   ── @property NEDEN ──
   Özel değişkenler varsayılan olarak animasyonlanamıyor;
   tiplendirince tarayıcı ara değerleri hesaplayabiliyor ve
   halka zıplamak yerine akıyor.
   ═══════════════════════════════════════════════════════════ */
@property --ilerleme {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}

.float-top { position: relative; }

.float-top::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    pointer-events: none;
    background: conic-gradient(
        var(--marka) calc(var(--ilerleme, 0) * 1turn),
        color-mix(in srgb, var(--yazi-3) 26%, transparent) 0);
    /* Ortasını oy: dolu daire değil halka olsun */
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
    transition: --ilerleme .12s linear;
}

/* Düğme görünmezken halka da görünmesin */
.float-top:not(.is-gorunur)::after { opacity: 0; }
.float-top::after { transition: --ilerleme .12s linear, opacity .2s var(--gecis); }

@media (prefers-reduced-motion: reduce) {
    .float-top::after { transition: none; }
}

/* İletişim adresi — sayfanın en aranan bilgisi, öne çıksın */
.ct-adres { margin: 10px 0 18px; }
.ct-mail {
    display: inline-block;
    font-size: 1.14rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--marka);
    text-decoration: none;
    padding: 12px 20px;
    border: 1px solid var(--y-kenar-usti);
    border-radius: 12px;
    background: color-mix(in srgb, var(--marka) 7%, transparent);
    transition: background .18s var(--gecis), border-color .18s var(--gecis);
}
.ct-mail:hover { background: color-mix(in srgb, var(--marka) 12%, transparent); border-color: var(--marka); }

/* ═══════════════════════════════════════════════════════════
   44. HESAPSIZ ÖLÇÜM — kahramandaki hızlı bakış
   ═══════════════════════════════════════════════════════════
   Ziyaretçi hiçbir şey yapmadan gerçek bir okuma alsın diye.
   Görsel ağırlığı ana düğmelerden AZ: asıl eylem hâlâ tam
   ölçüm, bu bir tadım.
   ═══════════════════════════════════════════════════════════ */
.hb { margin-top: 18px; }

.hb-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 100px;
    border: 1px dashed var(--y-kenar-usti);
    background: transparent;
    color: var(--marka);
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s var(--gecis), border-color .18s var(--gecis);
}
.hb-btn::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--iyi);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--iyi) 22%, transparent);
}
.hb-btn:hover { background: color-mix(in srgb, var(--marka) 8%, transparent); border-style: solid; }
.hb-btn:disabled { opacity: .6; cursor: default; }

.hb-sonuc {
    margin-top: 14px;
    padding: 16px 18px;
    border: 1px solid var(--y-kenar-usti);
    border-radius: var(--y-kart-r);
    background: var(--z-kart);
    max-width: 420px;
    animation: acilisGir .4s var(--gecis) both;
}
.hb-baslik {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--yazi-3);
    margin-bottom: 12px;
}
.hb-nokta {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--iyi);
    animation: telNabiz 2.2s var(--gecis) infinite;
}
.hb-satir {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 9px 0;
    font-size: .92rem;
    border-top: 1px solid var(--kenar);
}
.hb-satir:first-child { border-top: none; padding-top: 0; }
.hb-satir span { color: var(--yazi-2); }
.hb-satir b { font-variant-numeric: tabular-nums; }
.hb-not {
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--kenar);
    font-size: .84rem;
    line-height: 1.6;
    color: var(--yazi-3);
}
@media (prefers-reduced-motion: reduce) {
    .hb-sonuc { animation: none; }
    .hb-nokta { animation: none; }
}

/* ── Ana sayfa içerik arası reklam ── */
.y-reklam { padding-block: clamp(28px, 4vw, 48px); background: var(--y-zemin-a); }
.y-reklam .ad-slot { max-width: 900px; margin-inline: auto; }

/* ── Tarama ekranı reklamı ──
   Yalnızca ölçüm sonucu varken. asama.js data-asama'yı
   yazıyor; kilitli/önizleme hâlinde reklam gizli kalıyor
   çünkü o ekran Google'ın tanımıyla "giriş ekranı". */
/* Google reklamı yalnızca ölçüm SONUCU varken.
   Ölçüm aşamasında bu ekran "giriş ekranı" sayılıyor. */
.main-container[data-asama="olcum"] #reklamSonuc { display: none; }

/* Kap kendi başına hiçbir şey çizmiyor: ne çerçeve ne dolgu.
   Reklam gelmediğinde (onay öncesi hep böyle) boş bir kutu
   görünmesin diye. Dolmayan <ins> sıfır yükseklikte kalıyor,
   bu yüzden alt boşluğu da margin ile değil :has ile
   veriyoruz — boş kapta boşluk da olmasın. */
.reklam-sonuc:has(ins[data-ad-status="filled"]),
.reklam-sonuc:has(iframe) { margin-top: clamp(16px, 3vw, 26px); }

/* Blog yazısı sonundaki reklam — kaynakların üstünde,
   okumayı bölmeyen tek konum. */
.bh-reklam {
    max-width: 760px;
    margin: clamp(28px, 5vw, 44px) auto;
    padding-block: 8px;
    border-top: 1px solid var(--y-kenar);
    border-bottom: 1px solid var(--y-kenar);
}

/* ═══════════════════════════════════════════════════════════
   45. YETENEK IZGARASI — "ölçümden sonra"
   ═══════════════════════════════════════════════════════════
   Sayfada zaten iki kart ızgarası var (özellikler, neden biz).
   Üçüncüsünü aynı düzende yapmak sayfayı "kart kart kart"a
   çevirirdi. Burada ilk kart geniş ve içinde bir eğri çizimi
   taşıyor — ritim kırılıyor, göz yeniden uyanıyor.
   ═══════════════════════════════════════════════════════════ */
.y-yetenek {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
    gap: clamp(14px, 2vw, 20px);
}

/* Geniş kart: iki sütun kaplıyor ve içerik iki kolona ayrılıyor */
.y-yetenek-genis { grid-column: span 2; }
@media (min-width: 900px) {
    .y-yetenek { grid-template-columns: repeat(3, 1fr); }
    .y-yetenek-genis {
        grid-column: span 2;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
        grid-template-areas:
            'ikon  egri'
            'bas   egri'
            'metin egri';
        align-content: start;
        column-gap: clamp(18px, 3vw, 30px);
    }
    .y-yetenek-genis .y-kart-ikon { grid-area: ikon; }
    .y-yetenek-genis h3           { grid-area: bas; }
    .y-yetenek-genis p            { grid-area: metin; }
    .y-yetenek-genis .y-egri      { grid-area: egri; align-self: center; }
}
@media (max-width: 899px) {
    .y-yetenek-genis { grid-column: 1 / -1; }
}

/* ── Eğri çizimi ──
   Gerçek bir grafik değil, ne göreceğini anlatan bir taslak.
   Uydurma rakam yazmıyoruz: eksen ve sayı yok, yalnızca
   düşüş eğrisinin şekli var. */
.y-egri {
    color: var(--marka);
    margin-top: 16px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--marka) 5%, transparent);
    border: 1px solid var(--y-kenar);
    padding: 14px 12px 10px;
}
.y-egri svg { display: block; width: 100%; height: 92px; }

/* Çizgi soldan sağa çiziliyor: "zaman içinde" fikrini
   hareketle anlatıyor. */
@supports (animation-timeline: view()) {
    .y-egri-cizgi {
        stroke-dasharray: 340;
        stroke-dashoffset: 340;
        animation: egriCiz linear both;
        animation-timeline: view();
        animation-range: entry 12% cover 46%;
    }
    .y-egri-alan { opacity: 0; animation: egriBelir linear both;
        animation-timeline: view(); animation-range: entry 20% cover 52%; }
}
@keyframes egriCiz  { to { stroke-dashoffset: 0; } }
@keyframes egriBelir { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .y-egri-cizgi { stroke-dashoffset: 0; animation: none; }
    .y-egri-alan { opacity: 1; animation: none; }
}

/* Geniş karttaki rozet, ikonun üstüne binmesin */
.y-yetenek-genis .y-kart-rozet { top: 16px; right: 16px; }


/* ═══════════════════════════════════════════════════════════
   46. DURUM SATIRI — barın içinden çıkarıldı
   ═══════════════════════════════════════════════════════════

   ── ÖLÇÜLEN HATA ──
   `#status` üst barın içindeydi ve `.header-content`
   satır yönlü bir esnek kutu. Yani durum mesajı, gezinme
   çubuğunun KARDEŞİYDİ ve yanına oturuyordu. Gerçek
   tarayıcıda ölçtük (1600px görüntü alanı):

       .header-top  x=200  w=978   (1400 olmalıydı)
       #status      x=1178 w=212  h=69
       .header      h=84          (62 olmalıydı)

   Yani mesaj kutusu barı 978 piksele sıkıştırıyor, kendisi
   de barın iki katı yükseklikte sağ üst köşeye biniyordu.
   "Üst taraf çok iç içe girmiş" denen şey buydu; düğmeleri
   küçültmek çözemezdi, çünkü sorun düğmelerde değildi.

   ── YENİ YER ──
   Barın hemen ALTINDA, kendi satırında, kenardan kenara.
   Durum mesajı okunmak için var ("Telefon bağlandı, veri
   okunuyor…"); köşeye sıkıştırılacak bir rozet değil.
   ═══════════════════════════════════════════════════════════ */

/* Barın tek çocuğu kaldı; yine de yönü açıkça yazıyoruz ki
   ileride biri araya bir şey koyduğunda alta insin, yana
   değil. */
.header .header-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Boşken hiç yer kaplamasın — seçici artık `.header`e bağlı
   değil, çünkü öğe barın dışına taşındı. */
#status:empty { display: none; }

.dashboard > #status {
    width: 100%;
    max-width: 1400px;
    margin: 10px auto 0;
    padding: 11px 18px;
    /* Barın iç boşluğuyla aynı hizada başlasın */
    padding-inline: var(--bar-ic);
    box-sizing: border-box;
    text-align: center;
    border-radius: var(--r);
    font-size: .87rem;
    font-weight: 550;
    line-height: 1.45;
}

/* Kenar boşluğu: alttaki üyelik şeridiyle aynı hizada
   dursun, iki şerit birbirinden kaymasın. */
@media (min-width: 641px) {
    .dashboard > #status { max-width: min(1400px, 100% - 52px); }
}

/* ── Yıldız sırası ──
   Satır içi düzene güvenmek yerine açıkça satır kuruyoruz.
   `.ikon` düzeltmesi bunu zaten çözüyor; burada bir daha
   bozulmasın diye ikinci bir emniyet var. Aradaki boşluk
   `letter-spacing`ten değil `gap`ten geliyor: harf aralığı
   son öğeden SONRA da uygulanıyor ve diziyi optik olarak
   sola kaydırıyordu. */
.star-rating {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    letter-spacing: normal;
}


/* ═══════════════════════════════════════════════════════════
   47. EKRANLAR ARASI GEÇİŞ
   ═══════════════════════════════════════════════════════════
   Karşılama ve ölçüm ekranı aynı sayfanın iki durumu. Aradaki
   yol tek yönlüydü; iki tarafa da görünür bir kapı koyduk.
   ═══════════════════════════════════════════════════════════ */

/* `hidden` özniteliği tek başına yetmiyor: `.btn` ve
   `.header-btn` display veriyor ve tarayıcının [hidden]
   kuralından daha güçlü. donus.js `hidden`i açıp kapatıyor,
   bu satır olmadan düğme gizlenmiyordu. */
.kars-nav [hidden],
.header [hidden] { display: none !important; }

/* ── Ölçüm ekranındaki "Ana Sayfa" ── */
.header-title { gap: 10px; }
.header-btn-ev {
    flex: 0 0 auto;
    border-color: var(--kenar);
    color: var(--yazi-2);
}
.header-btn-ev:hover { color: var(--marka); border-color: var(--marka-kenar, var(--kenar)); }

/* Eleme sırasında bu düğme de payına düşeni versin: bar
   daralınca metin gider, ikon ve dokunma hedefi kalır.
   Eşik, 38. bölümdeki köprü/profil düğmeleriyle aynı. */
@media (max-width: 1280px) {
    .header #headerHomeBtn { font-size: 0; gap: 0; padding: 8px 10px; }
    .header #headerHomeBtn .ikon { font-size: 1rem; }
}

/* ── Karşılamadaki "Ölçüm ekranı" ── */
#karsUygulama .ikon { width: 15px; height: 15px; }
@media (max-width: 900px) { .kars-ust #karsUygulama span { display: none; } }

/* Marka zaten ana sayfadayken tıklanınca başa dönüyor;
   imleç bunu haber versin. */
.kars-ust .marka-yazi { cursor: pointer; }


/* ═══════════════════════════════════════════════════════════
   48. MARKA İŞARETİ — animasyonlu
   ═══════════════════════════════════════════════════════════
   Nabız soldan sağa çiziliyor, arkasındaki dolum yükseliyor.
   Döngü 5,2s: hareket dikkat çeksin ama okumayı bölmesin.
   Sürekli oynayan bir logo, sayfadaki asıl içerikle yarışır.
   ═══════════════════════════════════════════════════════════ */

.marka-isaret {
    display: block;
    width: clamp(46px, 5vw, 58px);
    height: auto;
    margin-bottom: 18px;
    border-radius: 13px;
    filter: drop-shadow(0 10px 22px color-mix(in srgb, var(--marka) 34%, transparent));
    animation: miSuzul 6s var(--gecis) infinite;
}

/* Nabız: yol uzunluğu ≈ 43,2 birim (segmentlerin toplamı).
   44 aldık ki uç yuvarlaması taşarken kesilmesin. */
.mi-nabiz {
    stroke-dasharray: 44;
    stroke-dashoffset: 44;
    animation: miCiz 5.2s var(--gecis) infinite;
}

/* Dolum: alttan yukarı. scaleY kullanıyoruz çünkü yükseklik
   animasyonu her karede yerleşim hesabı demek. */
.mi-dolum {
    opacity: .22;
    transform-origin: 50% 100%;
    animation: miDol 5.2s var(--gecis) infinite;
}

@keyframes miCiz {
    0%   { stroke-dashoffset: 44; }
    38%  { stroke-dashoffset: 0; }
    82%  { stroke-dashoffset: 0; opacity: 1; }
    96%  { stroke-dashoffset: 0; opacity: 0; }
    97%  { stroke-dashoffset: 44; opacity: 0; }
    100% { stroke-dashoffset: 44; opacity: 1; }
}
@keyframes miDol {
    0%   { transform: scaleY(.12); opacity: .10; }
    44%  { transform: scaleY(1);   opacity: .26; }
    84%  { transform: scaleY(1);   opacity: .26; }
    100% { transform: scaleY(.12); opacity: .10; }
}
@keyframes miSuzul {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}

/* Fareyle üstüne gelince nabız bir kez daha çizilsin —
   işaretin tıklanabilir olduğunu değil, canlı olduğunu
   söylüyor. */
.marka-isaret:hover .mi-nabiz { animation-duration: 1.6s; }

@media (prefers-reduced-motion: reduce) {
    .marka-isaret { animation: none; }
    .mi-nabiz { animation: none; stroke-dashoffset: 0; }
    .mi-dolum { animation: none; transform: scaleY(1); opacity: .22; }
}

/* Üst bardaki küçük işaret: sayfa açılırken bir kez
   yerine otursun. Sürekli oynamıyor — bar, dikkat çekmesi
   gereken yer değil. */
.kars-ust .marka-yazi img { animation: miGir .7s var(--gecis) both; }
@keyframes miGir {
    from { opacity: 0; transform: scale(.72) rotate(-14deg); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .kars-ust .marka-yazi img { animation: none; }
}

/* ── DAR EKRANDA TEK SATIR ──
   style.css'te `@media (max-width: 768px)` altında
   `.header-top { flex-direction: column }` var: bar dar
   ekranda alt alta iki satıra bölünüyordu. 38. bölümün
   stratejisi bunun TAM TERSİ — sarmak yerine ikincil
   düğmeleri eleyip tek satırda kalmak.

   İki strateji aynı anda yürüyünce ölçtüğümüz sonuç:
   760px'te bar 123 piksel yüksekliğinde. Telefonda ekranın
   altıda birini gezinme çubuğu yiyordu. Tek kaynak 38.
   bölüm; eski kural burada geri alınıyor. */
@media (max-width: 768px) {
    .header .header-top {
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }
    .header .user-area,
    .header .user-guest,
    .header .user-logged {
        width: auto;
        flex-wrap: nowrap;
        justify-content: flex-end;
    }
    .header .premium-btn { flex: 0 0 auto; }
}

/* ═══════════════════════════════════════════════════════════
   49. iPHONE KARTI

   Android'den ayrı bir yol olduğu için kendi kartı var.
   Kart yalnızca köprü çalışıyorken ve bir iOS cihazı
   takılıyken görünüyor; o yüzden burada "boşsa gizle" gibi
   bir kural yok — görünürlüğü JS veriyor.
   ═══════════════════════════════════════════════════════════ */

#iosCard .section-header { display: flex; align-items: center; gap: 8px; }

/* Cihaz satırı: solda ad, sağda düğme */
.ios-cihaz {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--kenar, var(--border));
    border-radius: 11px;
    margin-bottom: 8px;
    background: var(--z-arka, var(--panel));
}
.ios-cihaz-ad { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ios-cihaz-ad strong { font-size: .95em; }
.ios-cihaz-ad small { font-size: .78em; color: var(--text-3, var(--muted)); }

/* Güven verilmemiş cihaz: taranamaz, ne yapılacağı yazılı */
.ios-guven-yok { opacity: .78; }
.ios-uyari {
    font-size: .78em;
    color: var(--warning, #d98b00);
    text-align: right;
    flex-shrink: 0;
    max-width: 46%;
}

.ios-tara { flex-shrink: 0; }

.ios-aciklama { font-size: .92em; margin-bottom: 6px; }
.ios-ipucu {
    font-size: .82em;
    color: var(--text-3, var(--muted));
    line-height: 1.55;
    margin-bottom: 10px;
}

/* Kurulum satırları — üç işletim sistemi */
.ios-kurulum {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--z-arka-2, rgba(127, 127, 127, .07));
    font-size: .84em;
    margin-bottom: 10px;
}
.ios-kurulum code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .95em;
    padding: 1px 5px;
    border-radius: 5px;
    background: rgba(127, 127, 127, .16);
}

/* Ayarlar'daki sayıyla farkı anlatan not.
   Kullanıcı sonucu görür görmez Ayarlar'la kıyaslayacak;
   bu not göze çarpmalı ama alarm gibi durmamalı. */
.ios-not {
    font-size: .8em;
    line-height: 1.6;
    color: var(--text-3, var(--muted));
    padding: 11px 13px;
    border-radius: 10px;
    border-left: 3px solid var(--primary, #667eea);
    background: rgba(102, 126, 234, .09);
    margin-top: 10px;
}

.ios-hata {
    font-size: .84em;
    line-height: 1.55;
    padding: 11px 13px;
    border-radius: 10px;
    border-left: 3px solid var(--danger, #e5484d);
    background: rgba(229, 72, 77, .1);
    margin-bottom: 10px;
}

@media (max-width: 560px) {
    .ios-cihaz { flex-direction: column; align-items: stretch; }
    .ios-uyari { text-align: left; max-width: none; }
}

/* Özelliğin deneysel olduğunu söyleyen etiket.
   Site geneli .beta-tag rozetinden ayrı: o rozet ürünün
   aşamasını anlatıyor ve her dilde "BETA" kalıyor; bu ise
   tek bir özelliğe ait ve çevriliyor. */
.ios-etiket {
    font-size: .62em;
    font-weight: 700;
    letter-spacing: .06em;
    padding: 3px 7px;
    border-radius: 999px;
    color: var(--warning, #d98b00);
    background: rgba(217, 139, 0, .14);
    border: 1px solid rgba(217, 139, 0, .3);
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════
   50. EŞLEŞTİRME KUTUSU  (kopru-kutu.js)

   Anahtar giriş alanı eskiden yalnızca ana sayfadaydı ve
   yalnızca köprü otomatik bulunursa çiziliyordu. Kullanıcı
   programı çalıştırıp anahtarı görüyor ama yazacak yer
   bulamıyordu. Bu kutu her sayfaya konabiliyor ve giriş alanı
   HER ZAMAN görünüyor.

   Sınıf öneki 'kk-': tasarim.css'in başka bir yerinde ya da
   sayfa stillerinde aynı ada rastlamasın diye. (Bu oturumda
   .topbar ve .adim ile iki kez çakışma yaşandı.)
   ═══════════════════════════════════════════════════════════ */

#kopruKutu {
    margin-top: 16px;
    padding: 18px;
    border: 1px solid var(--kenar, var(--border));
    border-radius: 14px;
    background: var(--z-kart, var(--panel));
    text-align: left;
}

.kk-durum {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .92em;
    font-weight: 600;
    margin-bottom: 8px;
}
.kk-iyi   { color: var(--iyi, var(--success, #3fb950)); }
.kk-bekle { color: var(--orta, var(--warning, #d98b00)); }

.kk-satir {
    font-size: .87em;
    line-height: 1.6;
    color: var(--yazi-2, var(--text-3, var(--muted)));
    margin-bottom: 12px;
}

/* Giriş satırı: dar ekranda alt alta */
.kk-giris { display: flex; gap: 8px; flex-wrap: wrap; }
.kk-giris input {
    flex: 1 1 200px;
    min-width: 0;
    padding: 11px 14px;
    border: 1px solid var(--kenar, var(--border));
    border-radius: 11px;
    background: var(--z-arka, transparent);
    color: inherit;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .95em;
    letter-spacing: .04em;
}
.kk-giris input:focus {
    outline: 2px solid var(--marka, var(--primary, #667eea));
    outline-offset: 1px;
}
.kk-btn { flex-shrink: 0; }

.kk-hata {
    margin-top: 10px;
    padding: 11px 13px;
    border-radius: 10px;
    border-left: 3px solid var(--kotu, var(--danger, #e5484d));
    background: rgba(229, 72, 77, .1);
    font-size: .85em;
    line-height: 1.6;
    word-break: break-word;
}

/* Köprü bulunamadığında: ne kontrol edileceği */
.kk-yardim {
    margin-top: 14px;
    padding: 13px 15px;
    border-radius: 11px;
    background: rgba(127, 127, 127, .07);
    font-size: .84em;
    line-height: 1.65;
}
.kk-yardim b { display: block; margin-bottom: 7px; }
.kk-yardim ol { margin: 0; padding-left: 18px; }
.kk-yardim li { margin-bottom: 5px; }
.kk-yardim code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .95em;
    padding: 1px 5px;
    border-radius: 5px;
    background: rgba(127, 127, 127, .18);
    word-break: break-all;
}

@media (max-width: 480px) {
    .kk-giris input { flex-basis: 100%; }
    .kk-btn { width: 100%; }
}

/* Eşleşme sonrası yönlendirme satırı */
.kk-git {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 12px 0 10px;
}
.kk-sayac {
    font-size: .82em;
    color: var(--yazi-2, var(--text-3, var(--muted)));
}
.kk-iptal {
    background: none;
    border: 0;
    padding: 0 0 0 4px;
    color: var(--marka, var(--primary, #667eea));
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}
.kk-coz { margin-top: 4px; }

/* ═══════════════════════════════════════════════════════════
   51. DENEYSEL ÖZELLİK NOTU

   Küçük bir rozet, bir özelliğin ne kadar olgun olduğunu
   anlatmaya yetmiyor. Kullanıcı bitmiş bir özellik sanıp
   sonuç alamayınca siteye güveni sarsılıyor. Bu kutu, o
   beklentiyi baştan doğru kuruyor.
   ═══════════════════════════════════════════════════════════ */
.deney-notu {
    display: block;
    margin: -6px 0 14px;
    padding: 13px 15px;
    border-radius: 12px;
    border: 1px dashed var(--orta, var(--warning, #d98b00));
    background: rgba(217, 139, 0, .08);
}
.deney-notu strong {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .86em;
    color: var(--orta, var(--warning, #d98b00));
    margin-bottom: 6px;
}
.deney-notu span {
    display: block;
    font-size: .8em;
    line-height: 1.65;
    color: var(--yazi-2, var(--text-3, var(--muted)));
}

/* ═══════════════════════════════════════════════════════════
   52. MOBİL ÇEKMECE MENÜ  (cekmece.js)

   ── ÖLÇÜLEN SORUN ──
   Tarama ekranının üst barında üye girişliyken on parça yan
   yana duruyordu. 360px'te ölçtük: headerHomeBtn 39x35,
   headerBlogBtn 39x35, headerLoginBtn 75x32, diğer sayfalarda
   hbtn 103x32. Apple 44px, Google 48dp öneriyor — hiçbiri
   tutmuyordu. Sorun düğme boyutu değil kalabalıktı;
   küçültmeden sığdırmanın yolu yoktu.

   Çekmece: barda marka + menü düğmesi kalıyor, gerisi 52px'lik
   satırlar hâlinde panele iniyor.
   ═══════════════════════════════════════════════════════════ */

/* ── Menü düğmesi (hamburger) ── */
.menu-btn {
    display: none;              /* yalnızca dar ekranda */
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 11px;
    border: 1px solid var(--kenar, var(--border));
    border-radius: 11px;
    background: var(--z-ikincil, transparent);
    cursor: pointer;
    flex-shrink: 0;
}
.menu-cizgi {
    display: block;
    height: 2px;
    width: 100%;
    border-radius: 2px;
    background: currentColor;
    transition: transform .2s ease, opacity .2s ease;
}
/* Açıkken çarpıya dönüşsün — durumu görünür kılar */
.menu-btn.acik .menu-cizgi:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn.acik .menu-cizgi:nth-child(2) { opacity: 0; }
.menu-btn.acik .menu-cizgi:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Karartma ── */
.cekmece-perde {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgb(0 0 0 / .5);
    opacity: 0;
    transition: opacity .2s ease;
}
.cekmece-perde.acik { opacity: 1; }

/* ── Panel ── */
.cekmece {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1201;
    width: min(320px, 86vw);
    display: flex;
    flex-direction: column;
    background: var(--z-kart, var(--panel));
    border-left: 1px solid var(--kenar, var(--border));
    box-shadow: -12px 0 32px -12px rgb(0 0 0 / .45);
    transform: translateX(100%);
    transition: transform .22s ease;
    /* Çentikli telefonlarda alt/üst güvenli alan */
    padding-bottom: env(safe-area-inset-bottom, 0);
    overflow-y: auto;
}
.cekmece.acik { transform: translateX(0); }

/* Panel açıkken arka plan kaymasın */
html.cekmece-kilit,
html.cekmece-kilit body { overflow: hidden; }

.cekmece-ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--kenar, var(--border));
}
.cekmece-baslik { font-size: .95em; font-weight: 650; }
.cekmece-kapat {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 11px;
    background: none;
    color: inherit;
    cursor: pointer;
}
.cekmece-kapat:hover { background: var(--z-ikincil, rgba(127,127,127,.12)); }

/* ── Satırlar: 52px, rahat basılır ── */
.cekmece-liste { display: flex; flex-direction: column; padding: 10px; }
.cekmece-satir {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    min-height: 52px;
    padding: 0 14px;
    border: 0;
    border-radius: 11px;
    background: none;
    color: inherit;
    font: inherit;
    font-size: .95em;
    text-align: left;
    cursor: pointer;
}
.cekmece-satir:hover,
.cekmece-satir:focus-visible { background: var(--z-ikincil, rgba(127,127,127,.12)); }
.cekmece-satir .ikon { width: 19px; height: 19px; flex-shrink: 0; opacity: .85; }
.cekmece-satir span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Alt bölüm: tema ve dil anahtarları ── */
.cekmece-alt {
    margin-top: auto;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 16px 18px;
    border-top: 1px solid var(--kenar, var(--border));
}
/* ── Tema anahtarı çekmecede geri geliyor ──
   tasarim.css'te (max-width: 680px) altında
   `.theme-switch { display: none }` var: barda yer olmadığı
   için mobilde tema değiştirme tamamen kapatılmıştı ve
   kullanıcı ancak profil sayfasından değiştirebiliyordu.
   Ölçtük: çekmecede de 0x0 geliyordu, yani panele taşımak tek
   başına yetmiyordu. Çekmecede yer var — geri açıyoruz. */
.cekmece-alt .theme-switch { display: flex !important; }

/* Panelin içindeyken anahtarlar da parmakla basılabilsin */
.cekmece-alt .theme-switch button,
.cekmece-alt .lang-switch button { min-width: 46px; min-height: 44px; }

/* ── Dar ekranda devreye gir ── */
@media (max-width: 860px) {
    .menu-btn { display: flex; }

    /* Bardaki gezinme öğelerini gizle — hepsi panelde.
       Marka, menü düğmesi ve durum rozetleri kalıyor. */
    .header .user-area > .header-btn,
    .header .user-area > .user-guest,
    .header .user-area > .user-logged,
    .header .user-area > .theme-switch,
    .header .user-area > .lang-switch,
    .top > div:last-child > .hbtn,
    .top > div:last-child > .theme-switch,
    .top > div:last-child > .lang-switch { display: none !important; }

    /* Menü düğmesi barın sağ ucunda tek başına dursun */
    .header .user-area,
    .top > div:last-child { justify-content: flex-end; gap: 8px; }
}

/* Geniş ekranda çekmece hiç görünmesin (JS kurmasa da) */
@media (min-width: 861px) {
    .menu-btn, .cekmece, .cekmece-perde { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   53. MOBİL DOKUNMA HEDEFLERİ VE OKUNABİLİRLİK

   Ölçüm (360/390/414 px), düzeltmeden önce:
     headerHomeBtn   39x35     headerBlogBtn  39x35
     headerLoginBtn  75x32     hbtn          103x32
     kopru sayfası metin bağlantıları  63x18, 165x18
     kod-link 139x20           splashLoginBtn 77x34
     "Public Beta" rozeti 7.1px ve 9.3px
     "Gerçek veri" / "Geçmiş ve trend" 10.9px

   Apple 44px, Google 48dp öneriyor. Parmak ucu yaklaşık 9mm;
   35px'lik bir hedefte yanlış düğmeye basma oranı belirgin
   şekilde artıyor. 11px altı yazı da telefonda okunmuyor.
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 860px) {
    /* ── Düğmeler ── */
    .btn, .hbtn, .header-btn, .btn-sm,
    .theme-switch button, .lang-switch button,
    .os-sekme, .top10-tab, .kk-btn {
        min-height: 44px;
    }
    /* Yan yana duran küçük anahtarlar kare kalsın */
    .theme-switch button, .lang-switch button { min-width: 46px; }

    /* ── Metin bağlantıları ──
       Gövde metninin İÇİNDEKİ bağlantılara dokunmuyoruz:
       satır yüksekliğini bozar, paragrafı zıplatır. Yalnızca
       kendi başına duran eylem bağlantıları büyüyor. */
    .kod-link, .dl-sub a, .tick > a, .warn > a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* ── Yazı boyutu tabanı ──
       Rozetler ve küçük etiketler 11px'in altına inmesin. */
    .beta-tag, .rozet, .lc-new, .ios-etiket,
    .stat-label, .olcum .et, .cihaz-ad small {
        font-size: max(11px, .72em);
    }

    /* Form alanları 16px'in altına inmemeli: iOS Safari daha
       küçük yazılı bir alana odaklanınca sayfayı otomatik
       yakınlaştırıyor ve kullanıcı elle geri çıkmak zorunda
       kalıyor. */
    input, select, textarea { font-size: max(16px, 1em); }
}

/* Çok dar telefonlarda (≤380px) marka yazısı barı zorluyor */
@media (max-width: 380px) {
    .header-title h1 .marka-kelime,
    .top h1 span:not(.ios-etiket):not(.beta-tag) {
        font-size: .92em;
    }
}