/* ══════════════════════════════════════════════════════════════════════
 * MEDYAJANS — TASARIM SİSTEMİ
 * ══════════════════════════════════════════════════════════════════════
 * Yön: "kurumsal netlik + kod imzası". Omurga okunur ve sakin; kimlik
 * mono tipografi, ince neon aksan ve matrix imzasından gelir.
 *
 * ⚠️ WEB FONTU YOK — bilinçli. Google Fonts üçüncü taraf isteği + yurt
 *    dışına veri aktarımı (KVKK) + render engelleme demek. Sistem font
 *    yığını 0 istek, 0 gecikme, her platformda yerli görünüm verir.
 *
 * ⚠️ KONTRAST: açık temada yeşil #00ff41 beyaz üstünde 1.4:1 — okunamaz.
 *    Bu yüzden açık tema kendi koyu yeşilini kullanır (#067a34, 4.9:1).
 *    Denetim: node denetim/yayin-denetim.js kontrast oranlarını ÖLÇER.
 * ══════════════════════════════════════════════════════════════════════ */

/* ---------- 1. JETONLAR ---------- */
:root {
    --yazi-govde: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --yazi-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    --kap: 1180px;
    --kap-dar: 760px;
    --r-kk: 6px;
    --r-o: 12px;
    --r-b: 20px;

    --bosluk-1: 0.25rem;
    --bosluk-2: 0.5rem;
    --bosluk-3: 0.75rem;
    --bosluk-4: 1rem;
    --bosluk-5: 1.5rem;
    --bosluk-6: 2rem;
    --bosluk-7: 3rem;
    --bosluk-8: 4.5rem;
    --bolum-y: clamp(3.5rem, 8vw, 7rem);

    --gecis: 180ms cubic-bezier(0.4, 0, 0.2, 1);

    /* AÇIK TEMA — varsayılan tanım (dark-first tasarımda bile roller burada kurulur)
     * Aksan, logodan ÖLÇÜLEN mercan (#f85050) ailesinin koyu tonudur:
     * #f85050 beyaz üstünde 3,36:1 — gövde metni için YETERSİZ. */
    --zemin: #ffffff;
    --zemin-2: #f6f7f8;
    --zemin-3: #eceff1;
    --zemin-ters: #06080a;
    --cizgi: #dde2e6;
    --cizgi-guclu: #bcc5cc;
    --metin: #10161a;
    --metin-2: #48545c;
    /* ⚠️ KONTRAST — ÖLÇÜLDÜ (2026-08-24): #68747c beyaz zeminde 4.80:1
     * ile GEÇİYORDU, ama bu ton asıl olarak `--zemin-2`/`--zemin-3`
     * tonlu bölümlerde kullanılıyor (alt bilgi başlıkları, çalışma
     * saatleri, tablo notları) ve orada 4.47:1 ile WCAG AA eşiğinin
     * ALTINDA kalıyordu. Tek zemin varsayan bir hesap bu kusuru
     * göremez — sitede üç zemin tonu var, en koyusuna göre seçildi.
     * Yeni değer eşiği geçen EN AÇIK tondur; ikincil metnin daha
     * soluk görünmesi (görsel hiyerarşi) böylece korunur. */
    --metin-3: #626e76;
    --aksan: #c33c33;
    --aksan-2: #a32f28;
    --aksan-murekkep: #ffffff;
    --aksan-zemin: rgba(195, 60, 51, 0.07);
    --aksan-cizgi: rgba(195, 60, 51, 0.22);
    --golge: 0 1px 2px rgba(16, 22, 26, 0.06), 0 8px 24px rgba(16, 22, 26, 0.06);
    --golge-yuksek: 0 2px 4px rgba(16, 22, 26, 0.08), 0 18px 48px rgba(16, 22, 26, 0.12);
    --kod-zemin: #0c1014;
    --kod-metin: #d8f5e2;
}

/* KOYU TEMA — VARSAYILAN (2026-08-24, sahibin kararı).
 * ⚠️ Eskiden yalnız `prefers-color-scheme: dark` altında açılırdı; artık
 *    site AÇILIŞTA koyu. Sistem tercihi ARTIK OKUNMAZ — ziyaretçi düğmeyle
 *    açık temayı seçerse (`data-tema="acik"`) o kazanır ve saklanır. */
:root:not([data-tema="acik"]) {
    color-scheme: dark;   /* kaydırma çubuğu + form denetimleri de koyu */
    --zemin: #06080a;
    --zemin-2: #0c1116;
    --zemin-3: #131a21;
    --zemin-ters: #ffffff;
    --cizgi: #1e262c;
    --cizgi-guclu: #2d3941;
    --metin: #eceff0;
    --metin-2: #a3adb2;
    --metin-3: #7f8a90;
    --aksan: #f85050;
    --aksan-2: #ff6f6f;
    --aksan-murekkep: #1a0a0a;
    --aksan-zemin: rgba(248, 80, 80, 0.10);
    --aksan-cizgi: rgba(248, 80, 80, 0.24);
    --golge: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.4);
    --golge-yuksek: 0 2px 4px rgba(0, 0, 0, 0.6), 0 18px 48px rgba(0, 0, 0, 0.55);
    --kod-zemin: #0b1014;
    --kod-metin: #d8f5e2;
}

/* KOYU TEMA — kullanıcı düğmeyle seçtiyse (her iki yönde de kazanır) */
:root[data-tema="koyu"] {
    --zemin: #06080a;
    --zemin-2: #0c1116;
    --zemin-3: #131a21;
    --zemin-ters: #ffffff;
    --cizgi: #1e262c;
    --cizgi-guclu: #2d3941;
    --metin: #eceff0;
    --metin-2: #a3adb2;
    --metin-3: #7f8a90;
    --aksan: #f85050;
    --aksan-2: #ff6f6f;
    --aksan-murekkep: #1a0a0a;
    --aksan-zemin: rgba(248, 80, 80, 0.10);
    --aksan-cizgi: rgba(248, 80, 80, 0.24);
    --golge: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.4);
    --golge-yuksek: 0 2px 4px rgba(0, 0, 0, 0.6), 0 18px 48px rgba(0, 0, 0, 0.55);
    --kod-zemin: #0c1116;
    --kod-metin: #e6eaec;
}

/* ---------- LOGO VARYANTLARI ----------
 * Logonun "MEDY" ve "AGENCY" parçaları antrasit (#505050 — ölçüldü);
 * koyu zeminde KAYBOLUYOR. Bu yüzden iki dosya üretilir ve tema hangisi
 * ise o gösterilir. Bandın kendisi her zaman siyah olduğu için matrix
 * imzasında DAİMA koyu-tema varyantı kullanılır. */
.logo-koyu { display: none; }
:root:not([data-tema="acik"]) .logo-acik { display: none; }
:root:not([data-tema="acik"]) .logo-koyu { display: block; }
:root[data-tema="koyu"] .logo-acik { display: none; }
:root[data-tema="koyu"] .logo-koyu { display: block; }
:root[data-tema="acik"] { color-scheme: light; }
:root[data-tema="acik"] .logo-acik { display: block; }
:root[data-tema="acik"] .logo-koyu { display: none; }

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

body {
    font-family: var(--yazi-govde);
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--metin);
    background: var(--zemin);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; }

:focus-visible {
    outline: 2px solid var(--aksan);
    outline-offset: 3px;
    border-radius: var(--r-kk);
}

::selection { background: var(--aksan); color: var(--aksan-murekkep); }

.atla {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    padding: var(--bosluk-3) var(--bosluk-5);
    background: var(--aksan);
    color: var(--aksan-murekkep);
    font-weight: 700;
}
.atla:focus { left: var(--bosluk-4); top: var(--bosluk-4); }

.gizli {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- 3. TİPOGRAFİ ---------- */
h1, h2, h3, h4 {
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 1.3rem + 3.3vw, 4rem); }
h2 { font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 1.02rem + 0.55vw, 1.45rem); letter-spacing: -0.01em; }
h4 { font-size: 1.05rem; letter-spacing: 0; }
p { text-wrap: pretty; }

.ust-etiket {
    display: inline-flex;
    align-items: center;
    gap: var(--bosluk-2);
    font-family: var(--yazi-mono);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--aksan);
}
.ust-etiket::before {
    content: "";
    width: 1.75rem;
    height: 1px;
    background: currentColor;
    opacity: 0.7;
}

.ozet {
    font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
    color: var(--metin-2);
    max-width: 62ch;
}
.metin-blok > * + * { margin-top: var(--bosluk-4); }
.metin-blok p { color: var(--metin-2); max-width: 70ch; }
.metin-blok strong { color: var(--metin); font-weight: 700; }
.metin-blok a { color: var(--aksan); text-decoration: underline; text-underline-offset: 3px; }
.metin-blok a:hover { color: var(--aksan-2); }

code, .mono { font-family: var(--yazi-mono); font-size: 0.9em; }

/* ---------- 4. DÜZEN ---------- */
.kap { width: 100%; max-width: var(--kap); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.kap-dar { max-width: var(--kap-dar); }
.bolum { padding-block: var(--bolum-y); }
.bolum-2 { background: var(--zemin-2); }
.bolum-basi { max-width: 68ch; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.bolum-basi h2 { margin-top: var(--bosluk-3); }
.bolum-basi .ozet { margin-top: var(--bosluk-4); }
.orta { text-align: center; margin-inline: auto; }
.orta .ozet { margin-inline: auto; }
.orta .ust-etiket::before { display: none; }

.izgara { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); }
.izgara-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.izgara-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.izgara-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }

/* ---------- 5. DÜĞMELER ---------- */
.dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bosluk-2);
    min-height: 3rem;
    padding: 0.75rem 1.5rem;
    border: 1px solid transparent;
    border-radius: var(--r-o);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: transform var(--gecis), background var(--gecis), border-color var(--gecis), color var(--gecis), box-shadow var(--gecis);
    text-align: center;
}
.dugme:hover { transform: translateY(-2px); }
.dugme:active { transform: translateY(0); }
.dugme-1 { background: var(--aksan); color: var(--aksan-murekkep); box-shadow: var(--golge); }
.dugme-1:hover { background: var(--aksan-2); box-shadow: var(--golge-yuksek); }
.dugme-2 { background: transparent; color: var(--metin); border-color: var(--cizgi-guclu); }
.dugme-2:hover { border-color: var(--aksan); color: var(--aksan); background: var(--aksan-zemin); }
.dugme-3 { padding: 0.4rem 0; color: var(--aksan); font-family: var(--yazi-mono); font-size: 0.9375rem; }
.dugme-3::after { content: " →"; transition: transform var(--gecis); }
.dugme-3:hover { color: var(--aksan-2); }
.dugme-grup { display: flex; flex-wrap: wrap; gap: var(--bosluk-3); margin-top: var(--bosluk-6); }

/* ---------- 6. BAŞLIK / GEZİNME ---------- */
.ust {
    position: sticky;
    top: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--zemin) 88%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--cizgi);
}
.ust-ic {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bosluk-4);
    /* Tam logo (oran 1,11) dikey yer ister — başlık buna göre yüksek. */
    min-height: 4.25rem;
}
@media (min-width: 640px) { .ust-ic { min-height: 5rem; } }
/* Başlık markası: TAM logo (yıldız dahil), BAŞLIKTAN TAŞAN boyda.
 * ⚠️ Logo 1,11 oranında (kareye yakın) olduğu için dikey yer ister.
 *    Kırpıp "yatay logo" üretmek markanın yıldızını yok ediyordu.
 * Logo mutlak konumlanır ki başlığın yüksekliğini BÜYÜTMESİN; kaplayacağı
 * genişlik `.marka-bag` üzerinde ayrılır, böylece gezinme kaymaz.
 * Alt tarafa taşan kısım hero'nun üstüne biner (başlık z-index 100). */
.marka-bag {
    position: relative;
    flex-shrink: 0;
    align-self: stretch;
    width: 6.1rem;
    z-index: 2;
}

/* ⚠️ LOGO HER EKRANDA ORTADA. Önce yalnız ≥640px'te ortalanıyordu; 360px'te
 *    ortalanmış logo (98px) ile sağdaki ÜÇ düğme (dil+tema+menü ≈148px)
 *    17px çakışıyordu. Düğmeyi küçültmek yasak (dokunma hedefi ≥44px), o
 *    yüzden TEMA DÜĞMESİ MOBİL MENÜ PANELİNE taşındı; başlıkta dil + menü
 *    kaldı (≈96px) ve 360px'te yan sütuna 115px düşüyor → sığıyor.
 *    Izgara kullanılıyor çünkü DOM sırası korunmalı: marka önce gelmeli
 *    (ekran okuyucu ve SEO), görsel konumu ise ızgara belirler. */
.ust-ic {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}
.marka-bag { grid-column: 2; justify-self: center; }
/* ⚠️ 400px altında başlık dolgusu daraltılır. Ölçüldü: 320px ekranda
 *    kap dolgusu 2×16px iken yan sütuna 95px düşüyor, sağ blok (dil+menü)
 *    96px — 1px eksik ve logo ortadan kayıyor. Logoyu küçültmek yerine
 *    dolgu daraltıldı; logo boyu sahibin isteğiyle büyük kalmalı. */
@media (max-width: 399px) { .ust .kap { padding-inline: 0.75rem; } }
/* ⚠️ 360px ALTI — ölçüldü: `.ust-ic` ızgarasının 16pxlik iki boşluğu
 *    320px ekranda 32px yiyor; yan sütunlara 83px kalıyor ama sağ blok
 *    (dil 44 + boşluk + menü 44) 96px istiyor → logo 13px sola kayıyordu.
 *    Boşluk ve logo ölçüsü yalnız BU aralıkta kısılır; 360px ve üstünde
 *    (telefonların ~%99u) logo zaten tam ortada, dokunulmaz. */
@media (max-width: 359px) { .ust-ic { gap: 0.5rem; } .marka-bag { width: 5.4rem; } }
.ust-sag { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: var(--bosluk-2); }

/* ⚠️ MOBİLDE İKİ YANA DAĞITILIR — dil SOLDA, menü SAĞDA, logo ORTADA.
 *    ÖLÇÜLDÜ (375px): ızgara `110.8px | 97.6px | 110.8px` iken SOL SÜTUN
 *    TAMAMEN BOŞTU (gezinme <1280px'te gizli) ve iki düğmenin ikisi de
 *    sağda duruyordu. Logo ızgarayla ortalanmış olsa da başlığın GÖRSEL
 *    AĞIRLIĞI tamamen sağdaydı. Ortalanmış markanın doğru deseni,
 *    iOS gezinme çubuğundaki gibi "solda bir eylem, sağda bir eylem".
 *
 *    `display: contents` KULLANILIYOR çünkü DOM SIRASI KORUNMALI:
 *    marka ilk gelmeli (ekran okuyucu + SEO), görsel yeri ızgara belirler.
 *    Sarmalayıcılar yalnızca hizalama kutusu; zemini/kenarlığı yok,
 *    kaldırılmalarıyla kaybedilen bir şey olmaz.
 *
 *    Yan fayda: sağ blok 96px → 44px'e indi, yani 320px ekranda logoyu
 *    kaydıran sıkışma tamamen ortadan kalktı (aşağıdaki 359px kuralı
 *    artık emniyet payı).
 *
 *    ⚠️ SEÇİCİ `.ust-ic` İLE NİTELENİYOR — ölçüldü: yalın `.ust-eylem`
 *       yazınca 479. satırdaki `.ust-eylem { display: flex }` AYNI
 *       ÖZGÜLLÜKTE ve DAHA SONRA geldiği için kazandı. Sonuç sinsiydi:
 *       `getComputedStyle(.dil-sec).gridColumn` "1" diyordu ama öge
 *       ızgara ögesi OLMADIĞI için kural HİÇBİR ŞEY YAPMIYORDU —
 *       "uygulanan" bir stil, "etkili" bir stil demek değildir. */
@media (max-width: 1279.98px) {
    .ust-ic .ust-sag, .ust-ic .ust-eylem { display: contents; }
    .ust-ic .dil-sec { grid-column: 1; justify-self: start; }
    .ust-ic .menu-dugme { grid-column: 3; justify-self: end; }
}
/* Tema düğmesi: mobilde panelde, ≥1280px'te başlıkta. */
.ust-eylem .tema-dugme { display: none; }
.m-tema { display: inline-grid; }
@media (min-width: 1280px) {
    .ust-eylem .tema-dugme { display: inline-grid; }
    .m-tema { display: none; }
}
@media (min-width: 640px) {
    /* ⚠️ Başlık kabı içerik kabından GENİŞ. Ölçüldü: 1180px kapta
     *    gezinmeye düşen yer 491px, gezinme ise 518px → logo 42px
     *    sağa kayıyordu. Başlığı genişletmek, gezinmeyi kırpmaktan
     *    daha iyi bir çözüm. */
    .ust .kap { max-width: 1400px; }
    .ust-ic {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }
    /* ⚠️ Logo ORTADA durduğu için gezinme İKİ YANA dağıtılır: sol grup
     *    logonun solunda, sağ grup + eylemler sağında. Tek yana yığılmış
     *    menü, ortadaki logoyla görsel olarak dengesiz duruyordu. */
    .ust-sag { display: flex; align-items: center; gap: var(--bosluk-2); }
    .marka-bag { width: 8.3rem; grid-column: 2; justify-self: center; }
    .gez-sol { grid-column: 1; justify-self: start; }
    .ust-sag { grid-column: 3; justify-self: end; }
}

/* ⚠️ ÇENTİK/KUTU DENENDİ VE KALDIRILDI (2026-08-24).
 *    Sarkan logonun ardına header zeminini uzatan bir kutu koymuştum
 *    (kontrast garantisi için). Sahibi ekran görüntüsüyle gösterdi:
 *    kenarlığı ve köşesiyle KUTU gibi duruyordu, logoyu kutuya
 *    hapsediyordu. Kaldırıldı — logo doğrudan sarkıyor.
 *    Açık temada sarkan antrasit yarım koyu hero üstünde 2,6:1 ile
 *    sönük ama görünür kalıyor; mercan yarım zaten parlak. */

/* Logo: KELİME MARKASI header'ın içinde kalır, YILDIZIN KUYRUĞU sarkar.
 * Ölçüm: logonun üst %30,3'ü kelime markası (satır yoğunluğuyla ölçüldü),
 * altı yıldız. Yükseklik ve üst boşluk buna göre seçildi. */
.marka-bag .logo-efekt { position: absolute; left: 0; top: 0.4rem; }
@media (min-width: 640px) { .marka-bag .logo-efekt { top: 0.5rem; } }
.marka-bag .logo-efekt img { height: 5.5rem; width: auto; }
@media (min-width: 640px) { .marka-bag .logo-efekt img { height: 7.5rem; } }
/* ⚠️ 360px ALTI — ÖLÇÜLDÜ: logo kabı 5.4rem’e daralınca görselin doğal
 *    genişliği (97,7px) `max-width:100%` ile 86px’e KIRPILDI ve logo
 *    86×88 olarak, yani ORANI BOZULARAK çizildi (gerçek oran 1,11).
 *    Yükseklik burada da kısılır ki doğal genişlik kaba sığsın.
 *    ⚠️ Seçici `.marka-bag .logo-efekt img` OLMAK ZORUNDA — daha zayıf
 *    `.marka-bag img` yukarıdaki kurala yenilir ve sessizce etkisiz kalır;
 *    ilk denemede tam olarak bu oldu, kural yazıldı ama hiç uygulanmadı. */
@media (max-width: 359px) { .marka-bag .logo-efekt img { height: 4.85rem; } }

/* ---------- LOGO NEON İZİ ----------
 * Logonun hatlarında gezen ışık. Tuval, logonun tam üstüne oturur ve
 * `matrix.js` tarafından konumlandırılır. */
/* İz rengi: GÜMÜŞ. Işık başı saf beyaz (parlama), kuyruk soğuk gümüş.
 * RGB üçlüsü olarak verilir — matrix.js bunları rgba() içinde
 * değişen saydamlıkla kullanır. */
.logo-efekt {
    position: relative;
    display: inline-flex;
    line-height: 0;
    --iz-bas: 255, 255, 255;
    --iz-kuyruk: 196, 208, 220;
    /* Bir tam turun süresi (ms). Küçülürse ışık hızlanır. */
    --iz-sure: 6500;
}
.logo-efekt canvas { position: absolute; left: 0; top: 0; pointer-events: none; }

.gezinme { display: none; }
@media (min-width: 1280px) {
    /* ⚠️ 1280px: ölçüldü — ortalanmış logo için yan sütunlara düşen yer
     * 1024pxte 416px, gezinme ise 611px. Sığmıyordu ve logo ortadan
     * kayıyordu. Gezinme artık 1280den itibaren açılıyor, altında
     * hamburger kullanılıyor. */
    .gezinme { display: flex; align-items: center; gap: 0; }
}
.gez-ust {
    position: relative;
}
.gez-bag {
    display: inline-flex;
    align-items: center;
    gap: var(--bosluk-2);
    padding: 0.6rem 0.55rem;
    border-radius: var(--r-o);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--metin-2);
    transition: color var(--gecis), background var(--gecis);
    white-space: nowrap;
}
.gez-bag:hover, .gez-ust:focus-within > .gez-bag, .gez-bag[aria-current="page"] { color: var(--metin); background: var(--zemin-3); }
.gez-bag[aria-current="page"] { color: var(--aksan); }
.gez-ok { width: 0.6rem; height: 0.6rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: 0.6; }

.gez-alt {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    /* ⚠️ Sağ gruptaki menüler ekranın dışına taşmasın diye sağa hizalanır. */
    min-width: 19rem;
    padding: var(--bosluk-3);
    background: var(--zemin);
    border: 1px solid var(--cizgi);
    border-radius: var(--r-b);
    box-shadow: var(--golge-yuksek);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--gecis), transform var(--gecis), visibility var(--gecis);
}
.gez-ust:hover > .gez-alt, .gez-ust:focus-within > .gez-alt { opacity: 1; visibility: visible; transform: translateY(0); }
/* ⚠️ FARE KÖPRÜSÜ — ÖLÇÜLDÜ (2026-08-24): panel bağlantıdan 0.5rem aşağıda
 *    duruyordu ve aradaki boşlukta hiçbir öge :hover almıyordu; kullanıcı
 *    alt menüye GEÇEMİYORDU ("anında kapanıyor"). Köprü panelin kendi
 *    çocuğu olduğu için .gez-ust:hover açık kalır. Panel kapalıyken
 *    visibility:hidden → köprü de etkisiz, yanlışlıkla açılma olmaz. */
.gez-alt::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: -0.75rem;
    height: 0.75rem;
}
/* Sağ gruptaki açılır menüler SAĞA hizalanır — soldan hizalanırsa
 * ekranın dışına taşarlar (ölçüldü: 1280px'te 140px taşma). */
.gez-sag .gez-alt { left: auto; right: 0; }
.gez-alt a {
    display: block;
    padding: 0.6rem 0.75rem;
    border-radius: var(--r-o);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--metin-2);
}
.gez-alt a small { display: block; font-weight: 400; font-size: 0.8125rem; color: var(--metin-3); margin-top: 0.1rem; }
.gez-alt a:hover { background: var(--aksan-zemin); color: var(--aksan); }
.gez-alt a:hover small { color: var(--metin-2); }

.ust-eylem { display: flex; align-items: center; gap: var(--bosluk-2); }
/* Dokunma hedefi ≥44px — ölçüldü: ilk sürümde dil seçici 38px,
 * tema düğmesi 40px, marka bağlantısı 30px yüksekliğindeydi. */
.dil-sec {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 2.75rem;
    min-width: 2.75rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--cizgi);
    border-radius: var(--r-o);
    font-family: var(--yazi-mono);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--metin-2);
    text-transform: uppercase;
}
.dil-sec:hover { border-color: var(--aksan); color: var(--aksan); }
.tema-dugme {
    display: inline-grid;
    place-items: center;
    width: 2.75rem; height: 2.75rem;
    border: 1px solid var(--cizgi);
    border-radius: var(--r-o);
    background: transparent;
    cursor: pointer;
    color: var(--metin-2);
}
.tema-dugme:hover { border-color: var(--aksan); color: var(--aksan); }
.ust-eylem .dugme { min-height: 2.6rem; padding: 0.5rem 1.1rem; font-size: 0.9375rem; }
@media (max-width: 1279.98px) { .ust-eylem .dugme-1 { display: none; } }

.menu-dugme {
    display: inline-grid;
    place-items: center;
    width: 2.75rem; height: 2.75rem;
    border: 1px solid var(--cizgi);
    border-radius: var(--r-o);
    background: transparent;
    cursor: pointer;
}
@media (min-width: 1280px) { .menu-dugme { display: none; } }
.menu-cizgi { display: block; width: 1.15rem; height: 2px; background: var(--metin); border-radius: 2px; transition: transform var(--gecis), opacity var(--gecis); }
.menu-cizgi + .menu-cizgi { margin-top: 4px; }
[aria-expanded="true"] .menu-cizgi:nth-child(1) { transform: translateY(6px) rotate(45deg); }
[aria-expanded="true"] .menu-cizgi:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .menu-cizgi:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobil-menu {
    display: none;
    border-top: 1px solid var(--cizgi);
    background: var(--zemin);
    max-height: calc(100dvh - 4.5rem);
    overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.mobil-menu[data-acik="1"] { display: block; }
@media (min-width: 1280px) { .mobil-menu { display: none !important; } }
.mobil-menu details { border-bottom: 1px solid var(--cizgi); }
.mobil-menu summary {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 3.25rem; padding: 0.75rem 0;
    font-weight: 700; cursor: pointer; list-style: none;
}
.mobil-menu summary::-webkit-details-marker { display: none; }
.mobil-menu summary::after { content: "+"; font-family: var(--yazi-mono); font-size: 1.25rem; color: var(--aksan); }
.mobil-menu details[open] summary::after { content: "−"; }
.mobil-menu .m-bag { display: block; min-height: 3rem; padding: 0.7rem 0; font-weight: 600; color: var(--metin-2); border-bottom: 1px solid var(--cizgi); }
.mobil-menu .m-alt { padding: 0 0 var(--bosluk-3) var(--bosluk-4); }
.mobil-menu .m-alt a { display: block; min-height: 2.75rem; padding: 0.55rem 0; color: var(--metin-2); font-size: 0.9375rem; }
.mobil-menu .m-alt a:hover, .mobil-menu .m-bag:hover { color: var(--aksan); }
.mobil-menu .dugme { width: 100%; margin-block: var(--bosluk-5); }

/* ---------- 7. KAHRAMAN (HERO) ----------
 * ⚠️ HERO HER İKİ TEMADA DA KOYU — bilinçli.
 *    Açık temada beyaz zemin üstünde %50 opaklıkla yeşil kod yağmuru
 *    NEREDEYSE GÖRÜNMÜYORDU (ölçüldü). Efekti görünmez yapıp "var" demek
 *    yerine hero'yu terminal gibi koyu bir bant yaptık: efekt gerçekten
 *    görünüyor, gövde metni ise temaya uyuyor.
 *    Jetonlar burada YENİDEN TANIMLANDIĞI için içerideki tüm bileşenler
 *    (düğme, rozet, etiket) otomatik uyum sağlar — tek tek geçersiz
 *    kılmaya gerek yok. */
.kahraman {
    position: relative;
    overflow: hidden;
    --zemin: #06080a;
    --zemin-2: #0c1116;
    --zemin-3: #131a21;
    --metin: #eceff0;
    --metin-2: #a3adb2;
    --metin-3: #7f8a90;
    --cizgi: #1e262c;
    --cizgi-guclu: #2d3941;
    --aksan: #ff5757;
    --aksan-2: #ff6f6f;
    --aksan-murekkep: #1a0a0a;
    --aksan-zemin: rgba(255, 87, 87, 0.12);
    --aksan-cizgi: rgba(255, 87, 87, 0.26);
    --matrix-renk: #1fb85a;
    background: var(--zemin);
    color: var(--metin);
    border-bottom: 1px solid var(--cizgi);
}
.kahraman-tuval { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.75; pointer-events: none; }
.kahraman::after {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(125% 85% at 50% 0%, transparent 22%, var(--zemin) 82%);
    pointer-events: none;
}
.kahraman .rozet { background: var(--zemin-2); }
.kahraman-ic { position: relative; z-index: 2; padding-block: clamp(3.5rem, 9vw, 7.5rem); }
.kahraman h1 { margin-top: var(--bosluk-4); }
.kahraman h1 .vurgu { color: var(--aksan); }
.kahraman .ozet { margin-top: var(--bosluk-5); }
/* Görünür güncelleme tarihi (rehber/makale sayfaları). Küçük ve sakin —
 * bilgi olarak var, dikkat çekmesi gerekmiyor. */
.yazi-tarih {
    margin-top: var(--bosluk-4);
    font-family: var(--yazi-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    color: var(--metin-3);
}
.kahraman-alt { display: flex; flex-wrap: wrap; gap: var(--bosluk-5); margin-top: var(--bosluk-7); padding-top: var(--bosluk-5); border-top: 1px solid var(--cizgi); }
.kahraman-alt div { min-width: 9rem; }
.kahraman-alt dt { font-family: var(--yazi-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--metin-3); }
.kahraman-alt dd { margin-top: 0.2rem; font-weight: 700; }

/* ---------- 8. KARTLAR ---------- */
.kart {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--bosluk-3);
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    background: var(--zemin);
    border: 1px solid var(--cizgi);
    border-radius: var(--r-b);
    transition: border-color var(--gecis), transform var(--gecis), box-shadow var(--gecis);
    height: 100%;
}
.bolum-2 .kart { background: var(--zemin); }
a.kart:hover, .kart-etkilesim:hover { border-color: var(--aksan-cizgi); transform: translateY(-3px); box-shadow: var(--golge-yuksek); }
.kart-ikon {
    display: grid; place-items: center;
    width: 2.75rem; height: 2.75rem;
    border-radius: var(--r-o);
    background: var(--aksan-zemin);
    border: 1px solid var(--aksan-cizgi);
    color: var(--aksan);
    font-size: 1.25rem;
    flex-shrink: 0;
}
.kart h3 { font-size: 1.15rem; }
.kart p { color: var(--metin-2); font-size: 0.9688rem; margin-top: -0.25rem; }
.kart .dugme-3 { margin-top: auto; padding-top: var(--bosluk-2); }
.kart-kod {
    font-family: var(--yazi-mono);
    font-size: 0.8125rem;
    color: var(--metin-3);
    background: var(--zemin-2);
    border: 1px solid var(--cizgi);
    border-radius: var(--r-kk);
    padding: 0.4rem 0.6rem;
    overflow-x: auto;
    white-space: nowrap;
}

/* ---------- 9. ÖZELLİK LİSTESİ ---------- */
/* ⚠️ SATIR İÇİ STİLDEN TAŞINDI — ÖLÇÜLDÜ (2026-08-24): bu üç kural
 * şablonda `style=""` olarak yazılıyordu ve çıktıda 224 kez tekrar
 * ediyordu (biri tek başına 196 kez). CSP `style-src 'self'` satır içi
 * stil NİTELİKLERİNİ de engellediği için 28 sayfada renk ve boşluk
 * sessizce düşüyordu: sayfa açılıyor, konsolda hata yok, yalnız yerleşim
 * bozuk. Çözüm politikayı gevşetmek değil, stili sınıfa taşımaktı. */
.ozellik-metin { color: var(--metin-2); margin-top: var(--bosluk-2); }
.ust-bosluk-5 { margin-top: var(--bosluk-5); }
.ust-bosluk-6 { margin-top: var(--bosluk-6); }

.onay-liste { display: grid; gap: var(--bosluk-3); }
.onay-liste li { position: relative; padding-left: 2rem; color: var(--metin-2); }
.onay-liste li::before {
    content: "";
    position: absolute; left: 0; top: 0.55rem;
    width: 1.15rem; height: 0.6rem;
    border-left: 2px solid var(--aksan);
    border-bottom: 2px solid var(--aksan);
    transform: rotate(-45deg);
}
.onay-liste strong { color: var(--metin); }

/* ---------- 10. SÜREÇ ---------- */
.surec { counter-reset: adim; display: grid; gap: var(--bosluk-5); }
@media (min-width: 900px) { .surec { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } }
.surec li { counter-increment: adim; position: relative; padding-top: var(--bosluk-5); border-top: 2px solid var(--cizgi); }
.surec li::before {
    content: counter(adim, decimal-leading-zero);
    position: absolute; top: -0.9rem; left: 0;
    padding-right: 0.6rem;
    background: var(--zemin);
    font-family: var(--yazi-mono); font-size: 0.875rem; font-weight: 700;
    color: var(--aksan);
}
.bolum-2 .surec li::before { background: var(--zemin-2); }
.surec h3 { font-size: 1.05rem; margin-bottom: var(--bosluk-2); }
.surec p { color: var(--metin-2); font-size: 0.9688rem; }

/* ---------- 11. TABLO ---------- */
/* Geniş tablo mobilde KENDİ İÇİNDE kayar; sayfa yatay kaymaz.
 * ⚠️ Ama kullanıcı kaydırabildiğini görmüyorsa tablo "kesik" görünür.
 *    Bu yüzden sağ kenarda kaybolan bir gölge var: içerik devam ediyorsa
 *    görünür, sona gelince kaybolur (background-attachment: local hilesi). */
.tablo-sar {
    overflow-x: auto;
    border: 1px solid var(--cizgi);
    border-radius: var(--r-b);
    background:
        linear-gradient(to right, var(--zemin) 30%, transparent),
        linear-gradient(to left, var(--zemin) 30%, transparent) 100% 0,
        radial-gradient(farthest-side at 0 50%, rgba(128, 128, 128, 0.28), transparent),
        radial-gradient(farthest-side at 100% 50%, rgba(128, 128, 128, 0.28), transparent) 100% 0;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
    background-color: var(--zemin);
    -webkit-overflow-scrolling: touch;
}
.tablo-sar:focus-visible { outline: 2px solid var(--aksan); outline-offset: 2px; }
table { width: 100%; border-collapse: collapse; min-width: 34rem; }
th, td { padding: 0.9rem 1.1rem; text-align: left; border-bottom: 1px solid var(--cizgi); font-size: 0.9688rem; vertical-align: top; }
/* ⚠️ `th` ARTIK İKİ FARKLI İŞ YAPIYOR (2026-08-25, şemantik denetimi):
 *    `thead th[scope=col]` sütun başlığı · `tbody th[scope=row]` satır
 *    etiketi. Tek kural ikisine de uygulanamaz — `white-space: nowrap`
 *    satır etiketinde ZARARLIDIR: "Üçüncü taraf entegrasyon" sarılamaz,
 *    tablo genişler, mobilde yatay kaydırma artar. Satır etiketi sarılır
 *    ve gövde hücresiyle aynı tonda kalır; yalnızca ETİKET OLDUĞUNU
 *    belli edecek kadar kalın (600) — zemin tonu almaz, yoksa tablo
 *    iki başlık sütunlu gibi görünür. */
thead th { font-weight: 700; color: var(--metin); background: var(--zemin-2); white-space: nowrap; }
tbody th { font-weight: 600; color: var(--metin-2); background: transparent; white-space: normal; }
td { color: var(--metin-2); }
td:first-child { color: var(--metin); font-weight: 600; }
tbody tr:last-child td { border-bottom: 0; }
.tablo-not { margin-top: var(--bosluk-3); font-size: 0.875rem; color: var(--metin-3); }

/* ---------- 12. FİYAT ---------- */
.fiyat-kart { display: flex; flex-direction: column; gap: var(--bosluk-4); padding: clamp(1.5rem, 3vw, 2rem); border: 1px solid var(--cizgi); border-radius: var(--r-b); background: var(--zemin); height: 100%; }
.fiyat-kart.one-cikan { border-color: var(--aksan); box-shadow: var(--golge-yuksek); }
.fiyat-rozet { align-self: flex-start; padding: 0.25rem 0.7rem; border-radius: 999px; background: var(--aksan); color: var(--aksan-murekkep); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.fiyat-tutar { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); font-weight: 800; letter-spacing: -0.03em; }
.fiyat-tutar small { display: block; font-size: 0.875rem; font-weight: 500; color: var(--metin-3); letter-spacing: 0; margin-top: 0.15rem; }
.fiyat-kart .onay-liste { flex: 1; }
.fiyat-kart .dugme { width: 100%; }

/* ---------- 13. SSS ---------- */
.sss { display: grid; gap: var(--bosluk-3); max-width: 52rem; }
.sss details { border: 1px solid var(--cizgi); border-radius: var(--r-o); background: var(--zemin); transition: border-color var(--gecis); }
.sss details[open] { border-color: var(--aksan-cizgi); }
.sss summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--bosluk-4);
    padding: 1rem 1.25rem; min-height: 3.25rem;
    font-weight: 700; cursor: pointer; list-style: none;
}
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after { content: "+"; font-family: var(--yazi-mono); font-size: 1.35rem; color: var(--aksan); flex-shrink: 0; line-height: 1; }
.sss details[open] summary::after { content: "−"; }
.sss .sss-govde { padding: 0 1.25rem 1.25rem; color: var(--metin-2); }
.sss .sss-govde > * + * { margin-top: var(--bosluk-3); }

/* ---------- 14. ÇAĞRI BANDI ---------- */
.cagri {
    position: relative;
    padding: clamp(2rem, 5vw, 3.5rem);
    border: 1px solid var(--aksan-cizgi);
    border-radius: var(--r-b);
    background: linear-gradient(135deg, var(--aksan-zemin), transparent 60%), var(--zemin-2);
    overflow: hidden;
}
.cagri h2 { max-width: 24ch; }
.cagri .ozet { margin-top: var(--bosluk-4); }
.cagri-iletisim { display: flex; flex-wrap: wrap; gap: var(--bosluk-5); margin-top: var(--bosluk-6); }
.cagri-iletisim a {
    display: inline-flex; align-items: center; gap: var(--bosluk-2);
    font-family: var(--yazi-mono); font-weight: 700; color: var(--metin);
    /* dokunma hedefi ≥44px — ölçüldü: 29px'ti */
    min-height: 2.75rem; padding-block: 0.4rem;
}
.cagri-iletisim a:hover { color: var(--aksan); }

/* ---------- 15. KIRINTI ---------- */
.kirinti { padding-top: var(--bosluk-5); font-size: 0.875rem; color: var(--metin-3); }
.kirinti ol { display: flex; flex-wrap: wrap; gap: var(--bosluk-2); align-items: center; }
.kirinti li:not(:last-child)::after { content: "/"; margin-left: var(--bosluk-2); opacity: 0.5; }
/* Kırıntı bağlantıları da 20px'ti. Yatay ritim (ve "/" ayıracı)
 * bozulmasın diye YALNIZ dikey dolgu verildi: 20px → 36px. */
.kirinti a { display: inline-block; padding-block: var(--bosluk-2); }
.kirinti a:hover { color: var(--aksan); }

/* ---------- 16. İÇERİK (rehber yazıları) ---------- */
.yazi { max-width: 46rem; }
.yazi h2 { margin-top: var(--bosluk-8); margin-bottom: var(--bosluk-4); }
.yazi h3 { margin-top: var(--bosluk-6); margin-bottom: var(--bosluk-3); }
.yazi p, .yazi ul, .yazi ol, .yazi .tablo-sar { margin-top: var(--bosluk-4); }
.yazi p { color: var(--metin-2); }
.yazi ul li { position: relative; padding-left: 1.5rem; color: var(--metin-2); margin-top: var(--bosluk-2); }
.yazi ul li::before { content: "▸"; position: absolute; left: 0; color: var(--aksan); }
.yazi a { color: var(--aksan); text-decoration: underline; text-underline-offset: 3px; }
.yazi-bilgi { display: flex; flex-wrap: wrap; gap: var(--bosluk-4); font-family: var(--yazi-mono); font-size: 0.8125rem; color: var(--metin-3); margin-top: var(--bosluk-4); }
.icindekiler { padding: var(--bosluk-5); border: 1px solid var(--cizgi); border-radius: var(--r-b); background: var(--zemin-2); margin-top: var(--bosluk-6); }
.icindekiler h2 { font-size: 1rem; margin: 0 0 var(--bosluk-3); }
.icindekiler ol { counter-reset: ic; display: grid; gap: var(--bosluk-2); }
.icindekiler li { counter-increment: ic; }
.icindekiler li::before { content: counter(ic) ". "; font-family: var(--yazi-mono); color: var(--aksan); }
.icindekiler a { color: var(--metin-2); text-decoration: none; }
.icindekiler a:hover { color: var(--aksan); }

/* ---------- 17. ALT BİLGİ ---------- */
.alt { border-top: 1px solid var(--cizgi); background: var(--zemin-2); padding-top: var(--bolum-y); }
.alt-izgara { display: grid; gap: var(--bosluk-7); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.alt-marka { grid-column: 1 / -1; }
@media (min-width: 900px) { .alt-marka { grid-column: auto; max-width: 22rem; } }
.alt-marka .logo-efekt { margin-bottom: var(--bosluk-4); }
.alt-marka .logo-efekt img { height: 4rem; width: auto; }
.alt-marka p { color: var(--metin-2); font-size: 0.9375rem; }
.alt h2, .alt h3 { font-family: var(--yazi-mono); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--metin-3); font-weight: 700; margin-bottom: var(--bosluk-4); }
/* ⚠️ DOKUNMA HEDEFİ — ÖLÇÜLDÜ (375px, 2026-08-25): bağlantılar 20px
 *    yüksekti ve aralarında 21px ÖLÜ BOŞLUK vardı. Aradaki mesafe
 *    (41px) WCAG 2.5.8'i "aralık istisnası" ile geçiriyordu — yani
 *    kapıdan yeşil geçen ama parmakla kullanılması sinir bozucu bir
 *    ekran. Boşluk KALDIRILMADI, TIKLANABİLİR ALANA çevrildi: `gap`
 *    sıfırlandı, aynı piksel bağlantının kendi dolgusu oldu.
 *
 *    ÖLÇÜLEN SONUÇ (tahmin değil): hedef 20px → 50px.
 *    BEDELİ AÇIKÇA YAZILIYOR: alt bilgi mobilde ~1540px → 1983px.
 *    Takas bilinçli — 21 bağlantının 20px olması, uzun bir alt bilgiden
 *    daha kötüdür; kaydırma ücretsiz, yanlış dokunuş değil. */
.alt-liste { display: grid; gap: 0; }
.alt-liste a { display: block; padding-block: var(--bosluk-3); color: var(--metin-2); font-size: 0.9375rem; }
.alt-liste a:hover { color: var(--aksan); }
.alt-iletisim a {
    display: flex; align-items: center;
    font-family: var(--yazi-mono); color: var(--metin); font-weight: 600;
    /* dokunma hedefi ≥44px — ölçüldü: 29px'ti. Negatif kenar boşluğu
     * dolgunun ürettiği ek yüksekliği geri alır, dizilim aynı kalır. */
    min-height: 2.75rem; padding-block: 0.35rem; margin-block: -0.35rem;
}
.alt-iletisim a:hover { color: var(--aksan); }
.alt-iletisim p { color: var(--metin-3); font-size: 0.875rem; margin-top: var(--bosluk-2); }
.alt-son {
    display: flex; flex-wrap: wrap; gap: var(--bosluk-4);
    align-items: center; justify-content: space-between;
    margin-top: var(--bosluk-7); padding-block: var(--bosluk-5);
    border-top: 1px solid var(--cizgi);
    font-size: 0.875rem; color: var(--metin-3);
}
.alt-son a:hover { color: var(--aksan); }

/* ---------- 18. MATRIX İMZA BANDI ---------- */
.imza {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    padding: 0 1rem;
    background: #000;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 44px);
    mask-image: linear-gradient(to bottom, transparent 0, #000 44px);
}
.imza-tuval { position: absolute; inset: 0; width: 100%; height: 100%; }
.imza-satir {
    position: relative; z-index: 2;
    display: flex; flex-wrap: nowrap; align-items: center; justify-content: center;
    gap: 2px;
    font-family: var(--yazi-mono);
    font-size: 12px;
    letter-spacing: -0.01em;
    color: #1fb85a;
    text-align: center;
}
@media (min-width: 640px) { .imza-satir { font-size: 13px; letter-spacing: 0; } }
.imza-satir > span { white-space: nowrap; }
/* Ölçüler referans bileşenle BİREBİR: h-16 / sm:h-24, max-w 210/400px. */
.imza-logo { position: relative; display: inline-flex; flex-shrink: 0; }
/* opacity .6 — referansla birebir: logo kısılır, hatlarında gezen neon
 * ışık öne çıkar. Logo yine okunur durumda kalır. */
.imza-logo img { height: 4rem; width: auto; max-width: 210px; object-fit: contain; opacity: 0.6; }
@media (min-width: 640px) { .imza-logo img { height: 6rem; max-width: 400px; } }
.imza-logo canvas { position: absolute; left: 0; top: 0; pointer-events: none; }
.imza-bag { display: inline-flex; transition: opacity var(--gecis); }
.imza-bag:hover { opacity: 0.85; }

/* ---------- 19. GEÇİŞ BANDI ---------- */

/* ---------- 20. YARDIMCI ---------- */
.tel-bag {
    display: inline-flex; align-items: center;
    font-family: var(--yazi-mono); font-weight: 700;
    /* dokunma hedefi ≥44px — kart içinde de aynı kural geçerli */
    min-height: 2.75rem; padding-block: 0.4rem;
}
.rozet-sira { display: flex; flex-wrap: wrap; gap: var(--bosluk-2); margin-top: var(--bosluk-5); }
.rozet {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--cizgi);
    border-radius: 999px;
    background: var(--zemin);
    font-family: var(--yazi-mono); font-size: 0.8125rem; color: var(--metin-2);
}
.rozet::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--aksan); }
.iki-sutun { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 900px) { .iki-sutun { grid-template-columns: 1fr 1fr; } }
.yapisik { position: sticky; top: 6rem; }
.uyari {
    padding: var(--bosluk-5);
    border-left: 3px solid var(--aksan);
    background: var(--aksan-zemin);
    border-radius: 0 var(--r-o) var(--r-o) 0;
}
.uyari p { color: var(--metin-2); }
.uyari strong { color: var(--metin); }