/* ═══ Manrope — self-host ═══════════════════════════════════════
   Google Fonts'tan çekiliyordu; üretim CSP'si style-src 'self' ve
   font-src 'self' olduğu için stylesheet bloklanıyordu. Politikayı
   gevşetmek yerine font yerelde tutuluyor.

   Değişken font (200-800 tek dosyada): yedi ağırlığın hepsi gerçekten
   render ediliyor (ölçüldü: 400 → 868 öğe, 700 → 375, 300 → 1), yedi
   statik dosya yerine tek dosya daha küçük.

   Yalnız latin ve latin-ext alt kümeleri alındı: sayfa Türkçe, Arapça
   bölümlerde Manrope'ta glif yok ve sistem yazı tipine düşülüyor.
   Kiril/Yunan/Vietnam alt kümeleri indirilmedi.

   Lisans: SIL OFL 1.1 — assets/fonts/OFL-Manrope.txt
   ═══════════════════════════════════════════════════════════════ */
/* font-display: block (30 Eylül 2026). swap'ta hızlı gelen CSS ile metin önce yedek yazı
   tipiyle çiziliyor, Manrope gelince değişip kayıyordu (393 px, yavaş ağ: hero'da 860
   piksel). block'ta metin kısa süre görünmez bekleyip bir kez, doğru yazı tipiyle çıkıyor.
   ŞART: iki dosya da her sayfada <link rel=preload> ile isteniyor; yoksa latin-ext'teki
   İ/Ş/Ğ bekleme süresince görünmez kalır ("Kullanım _artları"). sayfa.test.mjs denetliyor. */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: block;
    src: url('/assets/fonts/manrope-latin-ext.woff2') format('woff2');
    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: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: block;
    src: url('/assets/fonts/manrope-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;
}

/* ═══════════════════════════════════════════════════════════════
   ezanvakitleri.org — tasarım sistemi
   Tek dosya. Değişken tabanlı. Harici bağımlılık: yalnız Manrope.
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. Jetonlar ─────────────────────────────────────────────── */
:root {
    /* Marka — mevcut teal kimliğinden türetildi (#346e76, #7faaa1, #e8f6f5) */
    --deniz-950: #061318;
    --deniz-900: #0b2229;
    --deniz-800: #12363e;
    --deniz-700: #1b4b55;
    --deniz-600: #275f68;
    --deniz-500: #346e76;
    --deniz-400: #5a8f93;
    --deniz-300: #7faaa1;
    --deniz-200: #b9d6d1;
    --deniz-100: #e8f6f5;

    /* Vurgu — pirinç. Altın sarısı değil; kısık, sıcak. */
    --pirinc-600: #a8823f;
    --pirinc-500: #c49a52;
    --pirinc-400: #d9b678;
    --pirinc-100: #f6ecd9;

    /* Nötr — sıcak kâğıt, soğuk beyaz değil */
    --kagit:     #fbfaf8;
    --kagit-2:   #f3f1ec;
    --kenar:     #e4e0d8;
    --murekkep:  #10201f;
    --murekkep-2:#42544f;
    --murekkep-3:#5d6a65;   /* açık temada AA: #7d8a85 3.18-3.59 idi, bu 5.01-5.65 */

    /* Anlamsal */
    --zemin:        var(--kagit);
    /* Bölüm üst etiketleri (.ust-etiket, .guven-ust). Koyu temada açık ton: --deniz-500 koyu zeminde 3,19:1 kalıyordu
       (WCAG 1.4.3, 4,5:1 gerekli; arayüz denetimi 31 Ekim 2026). Açık tema aynı. */
    --etiket:       var(--deniz-500);
    --zemin-yukseltilmis: #ffffff;
    --metin:        var(--murekkep);
    --metin-yumusak:var(--murekkep-2);
    --metin-silik:  var(--murekkep-3);
    --cizgi:        var(--kenar);
    --vurgu:        var(--deniz-600);
    --vurgu-metin:  #ffffff;
    --soluk-vurgu:  color-mix(in srgb, var(--pirinc-600) 84%, var(--murekkep));

    /* Gökyüzü — vakte göre JS ile değişir */
    --gok-ust:  var(--deniz-950);
    --gok-alt:  var(--deniz-800);
    --ufuk:     rgba(52, 110, 118, .55);

    /* Ölçek */
    --en:        1160px;
    --en-dar:    720px;
    --r-s:  10px;
    --r-m:  16px;
    --r-l:  24px;
    --r-xl: 32px;

    --golge-s: 0 1px 2px rgba(16, 32, 31, .05);
    --golge-m: 0 4px 16px -4px rgba(16, 32, 31, .10), 0 1px 3px rgba(16, 32, 31, .05);
    --golge-l: 0 24px 48px -16px rgba(16, 32, 31, .18), 0 2px 8px rgba(16, 32, 31, .06);

    --hiz: .55s;
    --egri: cubic-bezier(.22, 1, .36, 1);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-tema="acik"]) {
        --zemin:        #0a1618;
        --zemin-yukseltilmis: #10242a;
        --metin:        #eaf2f1;
        --metin-yumusak:#a9bfbd;
        --metin-silik:  #78908e;
        --cizgi:        #1d363c;
        --vurgu:        var(--deniz-300);
        --etiket:       var(--deniz-300);
        --vurgu-metin:  #06181c;
        --kagit-2:      #0d1e22;
        --soluk-vurgu:  color-mix(in srgb, var(--pirinc-400) 76%, var(--zemin));
        --golge-m: 0 4px 16px -4px rgba(0, 0, 0, .5);
        --golge-l: 0 24px 48px -16px rgba(0, 0, 0, .6);
    }
}
:root[data-tema="koyu"] {
    --zemin: #0a1618; --zemin-yukseltilmis: #10242a;
    --metin: #eaf2f1; --metin-yumusak: #a9bfbd; --metin-silik: #78908e;
    --cizgi: #1d363c; --vurgu: var(--deniz-300); --vurgu-metin: #06181c; --etiket: var(--deniz-300);
    --kagit-2: #0d1e22;
    --soluk-vurgu: color-mix(in srgb, var(--pirinc-400) 76%, var(--zemin));
}

/* Gökyüzü dilimleri — hero arka planı günün saatine göre kayar */
[data-dilim="gece"]   { --gok-ust: #041014; --gok-alt: #0d2830; --ufuk: rgba(52,110,118,.40); }
[data-dilim="seher"]  { --gok-ust: #0a2030; --gok-alt: #21444f; --ufuk: color-mix(in srgb, var(--pirinc-400) 30%, transparent); }
/* Sabah: telefonda disk:gök 4.09'du. Yalnız ufuk kısıldı (.35 -> .20);
   masaüstünde ufuk güneşe ulaşmadığı için orada değer değişmedi. */
[data-dilim="sabah"]  { --gok-ust: #12363e; --gok-alt: #2f6570; --ufuk: rgba(246,236,217,.20); }
/* Öğle: güneş disk:gök ortalaması 3.51:1'e (393 px) düşüyordu. Yalnız bu
   dilimde alt gök ve ufuk parıltısı kısıldı -- ölçüldü, mobilde güneşin
   arkasına ufuk da ulaşıyor, masaüstünde ulaşmıyor. 360-1200 px'te en
   düşük 4.34:1. Güneşin kendisine dokunulmadı. */
[data-dilim="gunduz"] { --gok-ust: #1b4b55; --gok-alt: #2d626a; --ufuk: rgba(232,246,245,.12); }
/* İkindi: telefonda 3.64'tü; ufuk tek başına yetmedi (en iyi 3.90), alt
   gök de koyulaştı. Sıcak pus %38 -> %24: azaldı ama duruyor. */
[data-dilim="ikindi"] { --gok-ust: #173f48; --gok-alt: #3f636a; --ufuk: color-mix(in srgb, var(--pirinc-400) 24%, transparent); }
[data-dilim="aksam"]  { --gok-ust: #0d2731; --gok-alt: #2d4a53; --ufuk: rgba(196,154,82,.45); }

/* ─── 2. Taban ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Yumuşak kaydırma yalnız sayfa yüklendikten SONRA açılır. Taban kuralda
   olsaydı adreste #bolum varken tarayıcının açılış atlayışı da animasyonlu
   olurdu; kullanıcı sayfanın kendiliğinden kaydığını görürdü. */
html.js-hazir { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--zemin);
    color: var(--metin);
    font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    font-size: clamp(0.9688rem, calc(0.9347rem + 0.17vw), 1.062rem);
    line-height: 1.65;
    font-feature-settings: "ss01", "cv01";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: -.022em; font-weight: 700; }

/* Başlığın hemen ardından gelen paragraf: yukarıdaki kural margin'i sıfırladığı
   için .uygulama ve #sss başlıklarında iki blok YAPIŞIYORDU (ölçüldü: 0px).
   Mobilde başlık iki satıra taşınca daha da göze batıyordu. */
h1 + p, h2 + p { margin-top: clamp(13px, 2vw, 18px); }
h1 { font-size: clamp(1.625rem, calc(1.079rem + 2.727vw), 3.125rem); }
h2 { font-size: clamp(1.375rem, calc(0.9659rem + 2.045vw), 2.5rem); }
h3 { font-size: clamp(1rem, calc(0.8909rem + 0.545vw), 1.3rem); letter-spacing: -.012em; }
p  { margin: 0 0 1.1em; }
a  { color: inherit; }

:focus-visible {
    outline: 2px solid var(--pirinc-500);
    outline-offset: 3px;
    border-radius: 4px;
}

.kap { width: 100%; max-width: var(--en); margin-inline: auto; padding-inline: 22px; }
.kap-dar { max-width: var(--en-dar); }

.bolum { padding-block: clamp(64px, 9vw, 120px); }
.bolum + .bolum { padding-top: 0; }

/* Bağlantıyla varışta bölüm başlığı sabit üst şeridin (68px) altında
   kalmasın; hedef, başlık şeridin ~16px altına insin. Ölçüldü: ardışık
   .bolum'larda üst dolgu sıfır olduğu için #sss başlığı 6px'e, #indir
   0px'e düşüp şeridin altında kalıyordu. Kendi dolgusu olan bölümde
   kenar yalnız eksik kalan kadar. */
.bolum[id] { scroll-margin-top: max(0px, calc(84px - clamp(64px, 9vw, 120px))); }
.bolum + .bolum[id] { scroll-margin-top: 84px; }

.ust-etiket {
    display: inline-block;
    font-size: clamp(0.6375rem, calc(0.6011rem + 0.182vw), 0.7375rem); font-weight: 700;
    letter-spacing: clamp(.08em, calc(.055em + .078vw), .14em); text-transform: uppercase;
    color: var(--etiket);
    margin-bottom: 14px;
}
.giris { font-size: 1.12rem; color: var(--metin-yumusak); max-width: 58ch; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Sayfanın ilk sekme durağı; odaklanınca görünmezse klavye kullanıcısı odağı kaybeder. */
.sr-only:focus, .sr-only:focus-visible {
    position: fixed; top: 12px; left: 12px; z-index: 100;
    width: auto; height: auto; margin: 0; padding: 12px 20px;
    overflow: visible; clip: auto; white-space: normal;
    background: var(--deniz-700); color: #fff; border-radius: 10px;
    font-weight: 700; font-size: .95rem; text-decoration: none;
    box-shadow: 0 10px 28px -10px rgba(0,0,0,.5);
}

/* Rakamlar zıplamasın */
.rakam { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ─── 3. Başlık ───────────────────────────────────────────────── */
/* Üst şerit: hero'nun üstünde saydam, kaydırınca zemin rengine dolar.
   Taslakta bunu site.js'in .kaydi sınıfı yapıyordu; production o betiği
   yüklemiyordu ve açık temada hero'dan sonra şerit OKUNMUYORDU (beyaz
   yazı krem üstünde). Artık JS'siz: kaydırmaya bağlı animasyon, açılışta
   renk sıçraması yok. Temel hâl DOLU şerit: desteklemeyen tarayıcıda her
   zeminde okunur; animasyon yalnız üstteki 64px'i saydamlaştırıyor. */
.ust {
    position: fixed; inset: 0 0 auto 0; z-index: 50;
    background: color-mix(in srgb, var(--zemin) 88%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    box-shadow: 0 1px 0 var(--cizgi), 0 8px 24px -16px rgba(16,32,31,.35);
}
.ust-ic {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; height: 68px;
}
.marka {
    display: inline-flex; align-items: center; gap: 10px;
    font-weight: 800; letter-spacing: -.02em; font-size: 1.06rem;
    color: var(--metin); text-decoration: none;
}
/* Gerçek uygulama ikonu (AppIcon-1024'ten 96 px) */
.marka-ikon {
    width: 30px; height: 30px; flex: none;
    border-radius: 8px; display: block;
    box-shadow: 0 1px 3px rgba(0,0,0,.28);
}

/* Menü yok: tek dikdörtgen "İndir" düğmesi (ürün kararı). Kapanıştaki
   indirme bölümüne gider; landing.js adrese #indir yazmadan kaydırır. */
.ust-indir {
    display: inline-flex; align-items: center; height: 38px; padding: 0 18px;
    border: 1.5px solid color-mix(in srgb, var(--vurgu) 55%, transparent); border-radius: 10px;
    color: var(--vurgu); font-weight: 700; font-size: .93rem; text-decoration: none;
    transition: background-color .2s ease;
}
.ust-indir:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.ust-indir:focus-visible { outline: 2px solid var(--pirinc-500); outline-offset: 3px; }

@supports (animation-timeline: scroll(root block)) {
    .ust, .marka, .ust-indir {
        animation-timeline: scroll(root block); animation-range: 0 64px;
        animation-timing-function: linear; animation-fill-mode: both;
    }
    .ust { animation-name: ust-zemin; }
    .marka { animation-name: ust-marka; }
    .ust-indir { animation-name: ust-dugme; }
}
/* Yalnız başlangıç kareleri: bitiş hâli öğenin kendi (dolu) stili. */
@keyframes ust-zemin { from { background-color: transparent; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none; } }
@keyframes ust-marka { from { color: #fff; } }
@keyframes ust-dugme { from { color: #fff; border-color: rgba(255,255,255,.55); } }

/* ─── 4. Hero ─────────────────────────────────────────────────── */
.hero {
    position: relative; isolation: isolate; overflow: hidden;
    min-height: min(92svh, 860px);
    display: flex; flex-direction: column; justify-content: center;
    padding-block: 108px 44px;
    color: #fff;
    background:
        radial-gradient(130% 78% at 50% 112%, var(--ufuk) 0%, transparent 62%),
        linear-gradient(174deg, var(--gok-ust) 0%, var(--gok-alt) 100%);
    transition: background 1.2s ease;
}
/* Yıldız katmanı — yalnız gece ve seher. Yıldızlar yalnız sabit üst çubuk (≤69 px) ile etiket (telefonda ~126 px,
   geniş ekranda ≥140 px) arasındaki boş bantta (80–118 px): yüzdelik konumlu yıldızlar ekran genişliğine göre harflere
   denk gelip "ABONELİKSİZ..", "yanında.." ve "Günün"/"Kıble" üstünde fazladan nokta gibi görünüyordu (ürün sahibi,
   6 Ekim 2026; iPhone Safari ve 1100–1280 px Chrome'da ölçüldü). */
.yildizlar {
    position: absolute; inset: 0; z-index: -1; opacity: 0;
    transition: opacity 1.4s ease;
    background-image:
        radial-gradient(1.4px 1.4px at 6% 86px, rgba(255,255,255,.9), transparent),
        radial-gradient(1.2px 1.2px at 19% 104px, rgba(255,255,255,.7), transparent),
        radial-gradient(1.6px 1.6px at 31% 82px, rgba(255,255,255,.85), transparent),
        radial-gradient(1.1px 1.1px at 44% 112px, rgba(255,255,255,.6), transparent),
        radial-gradient(1.5px 1.5px at 57% 90px, rgba(255,255,255,.8), transparent),
        radial-gradient(1.2px 1.2px at 70% 108px, rgba(255,255,255,.65), transparent),
        radial-gradient(1.3px 1.3px at 83% 84px, rgba(255,255,255,.5), transparent),
        radial-gradient(1.1px 1.1px at 95% 100px, rgba(255,255,255,.45), transparent);
}
[data-dilim="gece"] .yildizlar,
[data-dilim="seher"] .yildizlar { opacity: 1; }

.hero-govde { text-align: center; margin-top: 30px; }
.sonraki-ad {
    font-size: clamp(1.9rem, 4.6vw, 2.9rem); font-weight: 300;
    letter-spacing: -.02em; margin-top: 2px;
}
.geri-sayim {
    font-size: clamp(3.6rem, 12vw, 7rem);
    font-weight: 200; letter-spacing: -.045em; line-height: 1;
    margin-top: 6px;
    text-shadow: 0 2px 40px rgba(0,0,0,.28);
}
.geri-sayim .ayrac { opacity: .34; font-weight: 200; }
.sonraki-saat { margin-top: 10px; font-size: 1.02rem; color: rgba(255,255,255,.72); }
.vakit {
    position: relative; text-align: center;
    padding: 15px 6px 14px; border-radius: var(--r-m);
    transition: background-color .3s ease;
}
.vakit.gecti { opacity: .42; }
.vakit.simdi {
    background: color-mix(in srgb, var(--pirinc-400) 16%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pirinc-400) 42%, transparent);
}
.vakit.simdi .vakit-ad { color: var(--pirinc-400); }
.vakit.simdi::after {
    content: ""; position: absolute; left: 50%; bottom: 7px;
    width: 4px; height: 4px; margin-left: -2px; border-radius: 50%;
    background: var(--pirinc-400);
}

.kaydir-imi {
    margin: 46px auto 0; width: 22px; height: 34px; border-radius: 12px;
    border: 1.5px solid rgba(255,255,255,.32); position: relative;
}
.kaydir-imi::after {
    content: ""; position: absolute; left: 50%; top: 7px;
    width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px;
    background: rgba(255,255,255,.7);
    /* İki tur (4 sn) ve durur: 5 sn'den uzun kendiliğinden hareket durdurulabilir olmalı (WCAG 2.2.2; denetim 31 Ekim 2026). */
    animation: kaydir 2s var(--egri) 2;
}
@keyframes kaydir {
    0%, 18%  { transform: translateY(0);   opacity: 0; }
    35%      { opacity: 1; }
    72%,100% { transform: translateY(11px); opacity: 0; }
}

/* ─── 5. Izgara ───────────────────────────────────────────────── */

/* Ekran şeridi tabindex="0" ile klavyeye açılıyor (WCAG 2.1.1);
   odak halkası görünür olmalı. */
.kareler:focus-visible {
    outline: 2px solid var(--pirinc-500); outline-offset: 3px; border-radius: 6px;
}

/* ─── 6. Uygulama bölümü ──────────────────────────────────────── */
.uygulama {
    background: linear-gradient(168deg, var(--deniz-800), var(--deniz-950));
    color: #fff; border-radius: var(--r-xl);
    padding: clamp(38px, 6vw, 68px);
    display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: center;
    box-shadow: var(--golge-l);
    overflow: hidden; position: relative;
}
.uygulama::before {
    content: ""; position: absolute; inset: auto -10% -60% 40%;
    height: 340px; border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--pirinc-400) 22%, transparent), transparent);
    pointer-events: none;
}
.uygulama h2 { color: #fff; }
/* Hero'daki "SONRAKİ VAKİT" ile aynı pirinç: koyu bölümlerde üst etiket
   --deniz yerine --pirinc kullanır, böylece vurgu rengi tek bir dil olur. */
.uygulama .ust-etiket { color: var(--pirinc-400); }
.uygulama p { color: rgba(255,255,255,.76); max-width: 46ch; }
.puan { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; font-size: .92rem; }
.yildiz { color: var(--pirinc-400); letter-spacing: .12em; }
.magazalar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 26px; }
.magaza-rozet {
    display: inline-flex; align-items: center; text-decoration: none;
    transition: transform .28s var(--egri);
}
.magaza-rozet:hover { transform: translateY(-2px); }
.magaza-rozet img { display: block; width: auto; }

/* Apple rozeti kendi boşluğunu taşımaz, Google'ınki taşır. 646x250 PNG'nin
   görünür gövdesi yüksekliğin %76,8'i (ölçüldü, 2 Eki 2026: alfa kutusu
   y 29..221; eski "%67" varsayımıyla 66 px'te Play %15 büyük duruyordu).
   Apple da Google da kendi rozetinin "eşit ya da daha büyük" olmasını
   istiyor: ikisini birden karşılayan tek durum EŞİT görünür yükseklik.
   44 / 0,768 = 57,3 px. Boşluk kırpılmaz -- marka kılavuzlarının istediği
   temiz alan olduğu gibi kalır. PNG değişirse oran yeniden ölçülür
   (sayfa.test.mjs dosya özetini kilitliyor). */
.magaza-rozet img[src$=".svg"] { height: 44px; }
.magaza-play img { height: 57.3px; }
/* Metin düğmesi (/whats-new): rozetin "İndirin"i uygulaması olana yanlış; App Store kendi tarafında Al / Güncelle /
   Aç gösterir. Görünüm Apple'ın kendi web düğmesi dilinde (ürün sahibi, 8 Ekim 2026: "daha native"): sistem yazı
   tipi, Apple mavisi kapsül, 17 px. Apple logosu ya da rozet taklidi yok (marka kuralı). Beyaz yazı/mavi 4,8:1. */
.magaza-dugme {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px;
    border-radius: 980px; background: #0071e3; color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
    font-size: 17px; font-weight: 400; letter-spacing: -.022em; line-height: 1.18; text-decoration: none;
    transition: background-color .2s ease;
}
.magaza-dugme:hover { background: #0077ed; }
.magaza-dugme:active { background: #006edb; }
.magaza-dugme:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.yakinda { margin: 14px 0 0; font-size: .88rem; color: rgba(255,255,255,.55); }

.telefon {
    justify-self: center; width: min(250px, 100%); aspect-ratio: 9 / 18.5;
    border-radius: 34px; padding: 9px;
    background: linear-gradient(160deg, #2b3d42, #0d1a1e);
    box-shadow: 0 34px 70px -24px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.14);
}
.telefon-ic {
    width: 100%; height: 100%; border-radius: 26px; overflow: hidden;
    background: linear-gradient(178deg, #0a2028, #1e4d55);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 5px; color: #fff; text-align: center;
}
.telefon-ic .k-ad { font-size: .68rem; letter-spacing: .15em; text-transform: uppercase; color: var(--pirinc-400); }
.telefon-ic .k-sayac { font-size: 2.05rem; font-weight: 200; letter-spacing: -.03em; }
.telefon-ic .k-alt { font-size: .74rem; color: rgba(255,255,255,.55); }

/* ─── 7. SSS ──────────────────────────────────────────────────── */
/* "Tüm sorular" kutusu listenin ardında: ana sayfada 5 soru, 24'ün tamamı Destek'te. */
.sss-tumu {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin: clamp(20px, 3vw, 28px) 0 0;
    padding: 16px 18px; border-radius: var(--r-l);
    border: 1px solid var(--cizgi); background: var(--zemin-yukseltilmis);
    color: inherit; text-decoration: none;
    transition: border-color .2s ease, transform .2s var(--egri);
}
.sss-tumu:hover { border-color: var(--deniz-300); transform: translateY(-1px); }
.sss-tumu:focus-visible { outline: 2px solid var(--pirinc-500); outline-offset: 3px; }
.sss-tumu-metin { display: grid; gap: 2px; }
.sss-tumu-metin strong { font-weight: 700; }
.sss-tumu-metin span { color: var(--metin-yumusak); font-size: .92em; }
.sss-tumu-ok { flex: none; width: 22px; height: 22px; fill: var(--vurgu); }
@media (prefers-reduced-motion: reduce) { .sss-tumu:hover { transform: none; } }
.sss { border-top: 1px solid var(--cizgi); }
.sss details {
    border-bottom: 1px solid var(--cizgi);
    padding: 20px 0;
}
.sss details p a { color: var(--vurgu); text-underline-offset: 3px; }
.sss summary {
    cursor: pointer; list-style: none; font-weight: 700; font-size: clamp(0.9688rem, calc(0.9392rem + 0.148vw), 1.05rem);
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after {
    content: ""; flex: none; width: 10px; height: 10px;
    border-right: 2px solid var(--metin-silik); border-bottom: 2px solid var(--metin-silik);
    transform: rotate(45deg); transition: transform .3s var(--egri);
}
.sss details[open] summary::after { transform: rotate(-135deg); }
.sss details p { margin: 12px 0 0; color: var(--metin-yumusak); max-width: 64ch; }

/* ─── 8. Alt bilgi ────────────────────────────────────────────── */
.alt {
    border-top: 1px solid var(--cizgi);
    background: var(--kagit-2);
    padding-block: 48px 36px;
    font-size: .93em;
}
.alt-izgara {
    display: grid; gap: 34px clamp(40px, 6vw, 96px);
    grid-template-columns: auto auto minmax(0, 1fr);   /* Uygulama | Yasal | marka */
    margin-bottom: 36px;
}
/* Masaüstünde marka sağda. Sıra HTML'de (gruplar önde, marka sonda); burada
   yalnız hizalama var. */
.alt-marka-blok { justify-self: end; text-align: right; }
.alt-marka-blok .alt-aciklama { margin-left: auto; }
.alt-eposta {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 16px; padding: 9px 15px; border-radius: 999px;
    background: var(--zemin-yukseltilmis); border: 1px solid var(--cizgi);
    color: var(--metin) !important; text-decoration: none;
    font-size: .9rem; font-weight: 600;
    transition: border-color .25s ease, transform .25s var(--egri);
}
.alt-eposta:hover { border-color: var(--vurgu); transform: translateY(-1px); }
.alt-eposta svg { width: 16px; height: 16px; color: var(--metin-silik); flex: none; }
.alt h4 {
    margin: 0 0 13px; font-size: .74rem; font-weight: 700;
    letter-spacing: .13em; text-transform: uppercase; color: var(--metin-silik);
}
.alt ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.alt a { color: var(--metin-yumusak); text-decoration: none; }
.alt a:hover { color: var(--vurgu); }
.alt-son {
    border-top: 1px solid var(--cizgi); padding-top: 22px;
    display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
    color: var(--metin-silik); font-size: clamp(0.825rem, calc(0.8091rem + 0.08vw), 0.8688rem);
}

/* ─── 9. Kaydırma açılması ────────────────────────────────────── */
.js .ac {
    opacity: 0; transform: translateY(16px);
    transition: opacity var(--hiz) ease, transform var(--hiz) var(--egri);
}
.js .ac.gorundu { opacity: 1; transform: none; }
.ac-1 { transition-delay: .06s } .ac-2 { transition-delay: .12s }
.ac-3 { transition-delay: .18s } .ac-4 { transition-delay: .24s }
.ac-5 { transition-delay: .30s }

/* ─── 10. Uyarlama ────────────────────────────────────────────── */
@media (max-width: 900px) {
    .uygulama { grid-template-columns: 1fr; text-align: center; }
    .uygulama p { margin-inline: auto; }
    .magazalar { justify-content: center; }
    .puan { justify-content: center; }
}
@media (max-width: 680px) {
    .kap { padding-inline: 18px; }
    .hero { min-height: auto; padding-block: 96px 40px; }
    .kaydir-imi { display: none; }
    .alt-izgara { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
    .alt-marka-blok { grid-column: 1 / -1; justify-self: stretch; text-align: left; }   /* gruplar üstte, marka altta */
    .alt-marka-blok .alt-aciklama { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    html.js-hazir { scroll-behavior: auto; }
    .js .ac { opacity: 1; transform: none; transition: none; }
    .magaza-rozet:hover, .alt-eposta:hover { transform: none; }
    .kaydir-imi::after { animation: none; }
    .hero { transition: none; }
}

@media print {
    /* Ekrana özel bölümler kâğıda basılmaz */
    /* Bölümün tamamı gizlenir; yalnız .sss gizlenirse başlık ve giriş
       paragrafı içeriksiz basılıyordu. */
    .ust, .kaydir-imi, .ekranlar,
    #sss, .uygulama, .kapanis, .alt { display: none; }

    /* Açılma efekti kâğıtta içeriği yok ediyordu: görünüm alanına girmemiş
       her blok opacity:0 basılıyordu. */
    .js .ac { opacity: 1 !important; transform: none !important; }

    /* Hero koyu zeminden kâğıda geçerken metin beyaz kalıyordu */
    .hero { min-height: auto; background: none !important; color: #000; padding-block: 12px; }
    .hero *, .sonraki-saat{ color: #000 !important; }
    .vakit.gecti { opacity: 1; }
    .vakit.simdi { background: none !important; box-shadow: inset 0 0 0 1.5px #000 !important; }
    a[href]::after { content: ""; }
}

/* ─── 11. Kiblem kalıbı: hero metni, güven bandı, özellik ızgarası, kapanış ─── */
/* Tanıtım bloğu artık koyu hero'da değil, açık güven bandında. */
.hero-baslik { font-size: clamp(1.625rem, calc(1.079rem + 2.727vw), 3.125rem); font-weight: 700; letter-spacing: -.028em; }

/* Hero metni: panorama artık zemin, mesaj önde. */
.hero .hero-baslik { color: #fff; margin: 0; text-wrap: balance; }
.hero-ust {
    margin: 0 0 14px; font-size: clamp(0.6375rem, calc(0.6011rem + 0.182vw), 0.7375rem); font-weight: 700;
    letter-spacing: clamp(.08em, calc(.055em + .078vw), .14em); text-transform: uppercase;
    color: color-mix(in srgb, var(--pirinc-400) 88%, transparent);
}
.hero-deger {
    margin: 14px auto 26px; max-width: 46ch;
    font-size: clamp(0.9688rem, calc(0.9119rem + 0.284vw), 1.125rem); line-height: 1.6;
    color: rgba(255,255,255,.76);
}
.hero-magazalar { margin-bottom: 4px; }
.hero-tanim {
    margin: 16px auto 0; max-width: 58ch;
    font-size: 1.04rem; line-height: 1.62; color: var(--metin-yumusak);
}
.hero-tanim strong { color: var(--metin); font-weight: 700; }

.guven { background: var(--kagit-2); border-block: 1px solid var(--cizgi); }
.guven .kap { padding-block: clamp(52px, 7vw, 86px); text-align: center; }
.guven-ust {
    margin: 0 0 22px; font-size: .74rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase; color: var(--etiket);
}

.ozellik-izgara { display: grid; gap: 1px; background: var(--cizgi);
    border: 1px solid var(--cizgi); border-radius: var(--r-l); overflow: hidden;
    grid-template-columns: repeat(auto-fit, minmax(262px, 1fr)); }
.ozellik { background: var(--zemin-yukseltilmis); padding: 26px 24px 28px;
    transition: background-color .3s ease; }
.ozellik:hover { background: var(--kagit-2); }
/* Özellik ikonları: Android uygulamasının kendi Material Icons glifleri
   (Apache 2.0) -- kayıtlı ürün kararı sistem ikonlarında kalmak. SF Symbols
   Apple lisansı gereği web'de kullanılamıyor. Satır içi SVG: CSP'ye takılmıyor,
   fazladan istek yok; renk currentColor ile vurgudan geliyor. */
.ozellik-ikon {
    display: inline-grid; place-items: center;
    width: 40px; height: 40px; margin-bottom: 14px; border-radius: 12px;
    color: var(--vurgu);
    background: color-mix(in srgb, var(--vurgu) 11%, transparent);
}
.ozellik-ikon svg { display: block; width: 22px; height: 22px; fill: currentColor; }
.ozellik h3 { margin: 0 0 7px; font-size: 1.02em; }
.ozellik p { margin: 0; color: var(--metin-yumusak); font-size: .95em; line-height: 1.6; }

/* Telefonda: ikon + başlık karoları, iki sütun -- uygulamanın kendi
   menüsü gibi. Ölçüldü (393px): bölüm 2432 -> 843px, ~2.9 ekrandan tek
   ekrana. Açıklamalar YALNIZ GÖRSEL olarak gizleniyor: ekran okuyucu
   onları okumaya devam ediyor; masaüstü ve tablette görünür kalıyor. */
@media (max-width: 680px) {
    .ozellik-izgara { grid-template-columns: 1fr 1fr; }
    .ozellik { padding: 16px 14px; }
    .ozellik-ikon { width: 36px; height: 36px; margin-bottom: 10px; }
    .ozellik h3 { margin: 0; font-size: .95em; }
    .ozellik p {
        position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
        overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
        white-space: nowrap; border: 0;
    }
}

.kapanis { text-align: center; }
.kapanis h2 { font-size: clamp(1.375rem, calc(1.011rem + 1.818vw), 2.375rem); }
.kapanis > p { margin: 14px auto 26px; max-width: 52ch; color: var(--metin-yumusak); font-size: 1.04em; }
.yakinda-koyu { color: var(--metin-silik); margin-top: 16px; }
/* Kapanıştaki küçük satır: "Reklamsız. Ücretsiz. Aboneliksiz." (hero ile aynı) */
.kapanis-not { margin: 16px 0 0; font-size: .88rem; color: var(--metin-silik); letter-spacing: .01em; }

/* ─── 12. Uygulama ekranları (kiblem kalıbı) ─────────────────── */
/* Başlığın ikinci yarısı: gri değil, kısık pirinç -- sayfanın vurgu rengi.
   Açık zeminde saydamlıkla soluklaştırılmıyor; ölçüldü, %78 karışım 2.50:1'e
   düşüyor ve büyük başlık eşiği 3:1'i kaybediyor. Soluklaştırma mürekkebe
   doğru yapılıyor. */
.soluk { color: var(--soluk-vurgu); }
.ekranlar .soluk, .hero .soluk { color: color-mix(in srgb, var(--pirinc-400) 72%, transparent); }

.ekranlar {
    background: linear-gradient(170deg, var(--deniz-900), var(--deniz-950));
    color: #fff;
    padding-block: clamp(62px, 8vw, 104px);
}
.ekranlar .ust-etiket { color: var(--deniz-300); }

/* Yatay şerit: dar ekranda kaydırılır ve her kare hizaya oturur. */
.kareler {
    display: flex; gap: 22px; justify-content: center;
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: 6px;
    scrollbar-width: none;
}
.kareler::-webkit-scrollbar { display: none; }

.kare { flex: 0 0 210px; margin: 0; scroll-snap-align: center; }
.ekran-goruntu {
    display: block; width: 100%; height: auto;
    border-radius: 18px;
    box-shadow: 0 22px 44px -18px rgba(0,0,0,.72);
    transition: transform .35s var(--egri);
}
.kare:hover .ekran-goruntu { transform: translateY(-4px); }

@media (max-width: 1100px) { .kare { flex: 0 0 186px; } }
@media (max-width: 680px) {
    .kareler { justify-content: flex-start; gap: 16px; padding-inline: 18px;
               margin-inline: -18px; }
    .kare { flex: 0 0 170px; }
}
@media (prefers-reduced-motion: reduce) {
    .kare:hover .ekran-goruntu { transform: none; }
}

/* ─── 13. Sayı şeridi ve rehber kartları (kiblem kalıbı) ─────── */

/* ─── 14. Şehir pili: açılır hızlı seçim ─────────────────────
   Onay kutusu deseni; JS yok{ position: relative; display: inline-block; }
@media (prefers-reduced-motion: reduce) {
}

/* ─── 15. Satır içi stillerin yerini alan sınıflar ────────────
   Üretim CSP'si style-src 'self'; satır içi style niteliği
   'unsafe-inline' olmadan uygulanmıyordu. Değerler birebir
   korundu, yalnız yeri değişti. */
.marka-son { opacity: .55; }
.bas-ekranlar { text-align: center; margin-bottom: 38px; }
.bas-ozellikler { margin-bottom: 30px; }
.bas-sss { margin-bottom: 10px; }
.magazalar-orta { justify-content: center; }
.alt-aciklama { color: var(--metin-yumusak); margin-top: 14px; max-width: 34ch; }

/* ─── 16. Gün batımı sahnesi (kaydırmaya bağlı, JS'siz) ───────
   Referans siteler bunu Lottie + GSAP + video ile yapıyor (ölçüldü:
   yalnız iki kütüphane 363 KB). Aynı etki `animation-timeline: scroll()`
   ile sıfır JavaScript'e iniyor; desteklemeyen tarayıcıda güneş
   başlangıç konumunda durur, sahne yine okunur kalır.

   Sözleşme: güneş SOLMAZ, batar. Opaklık sabit 1; kayboluşun tek
   sebebi siluetin önde olması (z-index) ve sahnenin overflow:hidden
   olması. Böylece "havada eriyen daire" yerine ufkun ardına inen
   güneş görünüyor. */
.sahne {
    position: relative;
    /* `overflow: hidden` üst kenarda güneşin parıltısını DÜZ KESİYORDU --
       mobilde ayın hemen üstünde görünür bir çizgi çıkıyordu (ölçüldü).
       clip-path negatif üst inset ile yalnız alt ve yanlar kırpılıyor;
       batış yine kapanıyor. */
    clip-path: inset(-60vh 0 0 0);
    padding-top: clamp(54px, 7vh, 92px);
    /* Tam genişlik: ufuk çizgisi .kap kenarında kesilirse panorama
       yüzen bir şerit gibi duruyor. .hero zaten overflow:hidden,
       100vw'nin getirdiği taşma orada kalıyor. */
    width: 100vw; margin-inline: calc(50% - 50vw); margin-block: 22px 0;
}

/* Güneş ana kubbenin üstünde değil, sağdaki alçak blokların ardında batıyor:
   kubbenin üstü uygulama simgesine ayrıldı. x %87.1 köprünün iki kulesi
   arasındaki açık gökyüzüne denk geliyor; siluete eklenen tam genişlikteki
   ufuk şeridi de her kırılımda batışı kapatıyor. */
.gunes {
    position: absolute; z-index: 1;
    left: 87.1%; bottom: 52%;
    width: clamp(40px, 9vw, 108px); aspect-ratio: 1;
    translate: -50% 0;           /* transform animasyona ayrıldı */
    border-radius: 50%;
    /* Disk tek bir öğe; gündüz güneş, yatsıdan gün doğumuna kadar ay.
       Renk ve hale değişkenlerden geliyor, şeklin kendisi hep sade daire --
       ay fazı hesaplamadığımız için hilal/dolunay çizmiyoruz, yanlış bir
       astronomik iddia olurdu. */
    --disk-ic:   #fff6e0;
    --disk-orta: var(--pirinc-400);
    --disk-dis:  var(--pirinc-600);
    --hale:      0 0 60px 18px color-mix(in srgb, var(--pirinc-400) 34%, transparent);
    --disk-opak: 1;
    background: radial-gradient(circle at 50% 45%,
        var(--disk-ic) 0%, var(--disk-orta) 45%, var(--disk-dis) 78%, transparent 79%);
    box-shadow: var(--hale);
    opacity: var(--disk-opak);
}

/* Yatsıdan gün doğumuna: ay. Soğuk kırık beyaz; disk ortalaması güneşin
   %55'i (ölçüldü: 0.330 / 0.600), gece göğüne karşı 5.6:1. Hale çok daha
   kısık ve geniş. Çekirdek açık kalıyor ki disk "kirli gri" değil "ay"
   okunsun -- sönüklüğü dış halkalar taşıyor. */
:is([data-dilim="gece"], [data-dilim="seher"]) .gunes {
    --disk-ic:   #bcc6d1;
    --disk-orta: #7f8d9c;
    --disk-dis:  #4b5663;
    --hale:      0 0 110px 30px rgba(178,197,218,.15);
    --disk-opak: 1;
}

/* Şafağa doğru sönüm. Basamağı sunucu hesaplıyor (worker.js aySonumu):
   pencere imsaktan önce başlıyor, gün doğumunda bitiyor. Güneş ancak
   `sabah` diliminde -- gün doğumuyla -- geri geliyor. */
:is([data-dilim="gece"], [data-dilim="seher"])[data-ay="1"] .gunes {
    --disk-opak: .8;  --hale: 0 0 116px 31px rgba(178,197,218,.11); }
:is([data-dilim="gece"], [data-dilim="seher"])[data-ay="2"] .gunes {
    --disk-opak: .62; --hale: 0 0 122px 32px rgba(178,197,218,.08); }
:is([data-dilim="gece"], [data-dilim="seher"])[data-ay="3"] .gunes {
    --disk-opak: .45; --hale: 0 0 128px 33px rgba(178,197,218,.05); }
:is([data-dilim="gece"], [data-dilim="seher"])[data-ay="4"] .gunes {
    --disk-opak: .3;  --hale: 0 0 134px 34px rgba(178,197,218,.03); }

@supports (animation-timeline: scroll(root block)) {
    .gunes {
        animation: gun-batimi linear both;
        animation-timeline: scroll(root block);
        animation-range: 0 62vh;
    }
}

/* Yol, en dar kırılımda bile ufkun altına inecek kadar uzun; fazlası
   zaten siluetin ve overflow:hidden'ın arkasında kalıyor. */
@keyframes gun-batimi {
    from { transform: translateY(0); }
    to   { transform: translateY(340px); }
}

/* Siluet kabı: yüksekliği aspect-ratio ile kesin, çünkü simgenin
   konumu ve boyu bu yüksekliğin yüzdesi. Kap oranı = viewBox oranı
   olduğu sürece `slice` hiçbir şeyi kırpmıyor; dar ekranda oran
   değişince yalnız KENARLAR kırpılıyor (xMid), kubbeler ve minare
   külahları tam kalıyor. */
.siluet-kap {
    position: relative; z-index: 2;
    width: 100%; aspect-ratio: 4 / 1;
}
.siluet {
    position: absolute; inset: 0;
    width: 100%; height: 100%; display: block;
    fill: color-mix(in srgb, var(--deniz-950) 88%, #000);
}

/* Dar ekranda panorama daha az gökyüzü istiyor. */
@media (max-width: 680px) {
    .sahne { padding-top: clamp(40px, 6vh, 70px); }
}

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