/* ============================================
   E-Sonuç — Hasta arayüzü
   Onaylanan üç ekranın (welcome / tc / otp) birebir uygulaması,
   eksik olan başarı ekranı ve beş hata durumu aynı dille tamamlandı.

   Renkler tahmin değil: macka_emar_EXACT_assets içindeki PNG'lerden
   piksel örneklemesiyle çıkarıldı. Kaynak dosya adları ilgili
   belirtecin yanında yazılıdır.

   CSP notu: sayfada satır içi stil veya betik yoktur; tüm stiller
   burada, tüm davranış js/app.js içindedir.
   ============================================ */

/* --------------------------------------------
   Yazı tipi — sunucudan servis edilir.
   Google Fonts'tan çekilmez (KVKK / denetim bulgusu B-10).
   Inter v5.2.8, OFL-1.1. Yalnızca Türkçe + Latin alt kümesi:
   133 KB yerine 28,5 KB.
   -------------------------------------------- */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin.woff2') format('woff2');
    /* Google'ın latin aralığı: noktasız ı (U+0131) burada yer alır */
    unicode-range: U+0000-00FF, U+0131, U+2010-2015, U+2018-201D, U+2026, U+2190, U+2192;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin-ext.woff2') format('woff2');
    /* Türkçe'ye özgü altı harf: Ğ ğ İ Ş ş */
    unicode-range: U+011E-011F, U+0130, U+015E-015F;
}

/* --------------------------------------------
   Belirteçler
   -------------------------------------------- */
:root {
    /* Marka — ölçülen değerler */
    --kirmizi: #C60D1F;          /* start_button_exact.png — birincil eylem */
    --kirmizi-koyu: #A50A19;     /* üzerine gelme / basılı */
    --kirmizi-kenar: #DE2B36;    /* otp_boxes_row_exact.png — aktif kutu kenarı */
    --kirmizi-zemin: #FDF2F3;    /* çok hafif kırmızı zemin */

    /* Mürekkep ve metin */
    --murekkep: #161617;         /* footer_full_exact.png — 18.083 piksel */
    --metin: #1D1D20;
    --metin-ikincil: #4B5160;    /* beyaz üzerinde 7,94:1 — brief §9 AAA eşiği */
    --metin-ust: #302F31;        /* top_navigation_exact.png */

    /* Yüzeyler */
    --zemin: #F6F6F7;
    --yuzey: #FFFFFF;
    --yuzey-soluk: #FAFAFB;

    /* Çizgiler */
    --cizgi: #D6D9E0;            /* otp kutusu boş kenar */
    --cizgi-soft: #E7E9ED;

    /* Durum renkleri — brief §5 */
    --basari: #146B41;
    --basari-zemin: #EAF6F0;
    --hata: #9E1F19;
    --hata-zemin: #FDF1F0;
    --uyari: #8A5A00;
    --uyari-zemin: #FDF6E7;

    /* Ölçü — referans 1448 px genişlikte ölçüldü */
    --kart-genislik: 457px;
    --kose: 12px;
    --kose-kart: 16px;
    --golge-kart: 0 1px 2px rgba(22, 22, 23, .04), 0 8px 28px rgba(22, 22, 23, .06);
    --golge-odak: 0 0 0 3px rgba(198, 13, 31, .18);

    --gecis: 160ms cubic-bezier(.2, .6, .3, 1);

    color-scheme: light;
}

/* Koyu tema — brief §10: ikincil, cihaz tercihine uyar, varsayılan değil.
   §13: logo siyah metin içerdiği için koyu zemine konamaz; logo şeridi
   ve kart açık kalır, yalnızca çevre koyulaşır. */
@media (prefers-color-scheme: dark) {
    :root {
        --zemin: #101013;
        --yuzey: #FFFFFF;        /* kart bilinçli olarak açık kalır */
        --murekkep: #0B0B0D;
        --metin-ust: #E7E7EA;
        color-scheme: light dark;
    }
}

/* --------------------------------------------
   Temel
   -------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
    margin: 0;
    background: var(--zemin);
    color: var(--metin);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

img { max-width: 100%; height: auto; }

[hidden] { display: none !important; }

/* Klavye kullanıcısı için her zaman görünür odak — brief §9 */
:focus-visible {
    outline: 3px solid var(--kirmizi);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Ekran bölümleri tabindex="-1" taşır ve ekran değişiminde odak
   programla oraya taşınır; amaç ekran okuyucunun yeni ekranın başına
   gitmesidir, klavye gezinmesi değil. Tarayıcı bunu :focus-visible
   sayıp kartın çevresine kırmızı bir çerçeve çiziyordu. Bölüm
   etkileşimli olmadığı için çerçeve kaldırılır; gerçek etkileşimli
   öğelerin odak halkası yukarıdaki kuralla yerinde kalır. */
.ekran:focus,
.ekran:focus-visible { outline: none; }

.atla {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--murekkep);
    color: #fff;
    padding: 12px 20px;
    border-radius: 0 0 8px 0;
    font-weight: 600;
}
.atla:focus { left: 0; }

.gizli-gorsel {
    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;
}

/* --------------------------------------------
   Üst şerit
   -------------------------------------------- */
.ust {
    background: var(--yuzey);
    border-bottom: 1px solid var(--cizgi-soft);
}

.ust__ic {
    max-width: 1448px;
    margin: 0 auto;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.logo {
    display: block;
    width: 186px;
    height: auto;
}

.nav {
    display: flex;
    align-items: center;
    gap: 0;
}

.nav__ol {
    color: var(--metin-ust);
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 500;
    padding: 10px 22px;
    border-radius: 6px;
    transition: color var(--gecis);
}
.nav__ol + .nav__ol { border-left: 1px solid var(--cizgi); }
.nav__ol:hover { color: var(--kirmizi); }

/* --------------------------------------------
   Ana düzen
   Masaüstü: solda işlem sütunu, sağda kurum alanı (brief §4-A, ~40/60).
   Mobil: kurum alanı gizlenir, adım göstergesi forma taşınır.
   -------------------------------------------- */
.duzen {
    flex: 1;
    position: relative;
    max-width: 1448px;
    width: 100%;
    margin: 0 auto;
    padding: 40px 24px 56px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        'adimlar'
        'islem';
    gap: 28px;
    align-content: start;
}

.islem { grid-area: islem; }
.kurum { grid-area: kurum; display: none; }
.adimlar { grid-area: adimlar; }

/* İki sütuna geçiş 1024 px'de: daha dar ekranlarda sağ sütuna kalan yer
   315 px'e iniyor ve üç adımlık gösterge sütun başına 98 px'e düşüyordu —
   başlıklar sarıyordu. */
@media (min-width: 1024px) {
    .duzen {
        grid-template-columns: var(--kart-genislik) minmax(0, 1fr);
        grid-template-areas:
            'islem kurum'
            'islem adimlar';
        column-gap: 80px;
        row-gap: 44px;
        align-content: start;
        padding-top: 56px;
    }
    .kurum { display: block; align-self: end; }
    .adimlar { align-self: start; }
}

/* 1024–1199 arasında adım açıklamaları gizlenir: sütun başına ~140 px
   kalıyor, üç satırlık açıklama göstergeyi ağırlaştırıyor. Adım adları
   ve sıra bilgisi yeterli. */
@media (min-width: 1024px) and (max-width: 1199px) {
    .adim__aciklama { display: none; }
}

/* Bina fotoğrafı — yalnızca geniş ekranda yüklenir.
   Mobilde hiç indirilmez (brief §10 ağırlık bütçesi).

   Eşik 1440 px. Sebebi ölçüldü: metin panelin soluna giriyor ve
   girme miktarı ekran daraldıkça artıyor (1440'ta %37, 1366'da %52).
   Görselin sol %42'si tamamen saydam bırakıldığı için 1440 ve üzeri
   güvenli; altında metin fotoğrafın görünür kısmına taşar ve gövde
   metni 7:1 kontrastı kaybeder (brief §9). */
@media (min-width: 1440px) {
    .duzen::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 494px;
        height: 759px;
        background: url('../img/bina.webp') no-repeat right top;
        background-size: contain;
        pointer-events: none;
        z-index: 0;
    }
    .islem,
    .kurum,
    .adimlar { position: relative; z-index: 1; }

    /* İmza fotoğrafın alt kısmında durur — referanstaki yeri burası.
       Dekoratif olduğu için arka plan; böylece mobil hiç indirmiyor. */
    .duzen::after {
        content: '';
        position: absolute;
        right: 26px;
        top: 596px;
        width: 186px;
        height: 72px;    /* yeni imza dosyasinin orani: 360 x 139 */
        background: url('../img/imza.webp') no-repeat center / contain;
        pointer-events: none;
        z-index: 1;
    }
}

/* --------------------------------------------
   Kurum alanı (sağ)
   -------------------------------------------- */
.kurum__ustbaslik {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--kirmizi);
}

.kurum__baslik {
    margin: 0 0 22px;
    font-size: clamp(34px, 3.4vw, 46px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.022em;
    color: var(--metin);
    max-width: 12ch;
}
.kurum__baslik em {
    font-style: normal;
    color: var(--kirmizi);
}

.kurum__metin {
    margin: 0;
    font-size: 16.5px;
    color: var(--metin-ikincil);
    max-width: 40ch;
}

/* Sağ sütunun içeriği sınırlanır: metin ne kadar geniş olursa fotoğrafın
   o kadar çok solu saydam bırakılmak zorunda kalıyor (metnin arkası 7:1
   kontrastı korumalı — brief §9).

   544 px'de saydam kalması gereken bölge panelin %37'siydi ve bu, komşu
   ORTOPEDİST dükkânının tamamını siliyordu. 470 px'de %22'ye iniyor;
   dükkân yeniden görünür hâle geliyor. */
@media (min-width: 1024px) {
    .kurum,
    .adimlar { max-width: 470px; }
}


/* --------------------------------------------
   Adım göstergesi
   Dekorasyon değil: kaç adım kaldığını söyler (brief §4-A).
   -------------------------------------------- */
.adimlar {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    counter-reset: adim;
}

.adim {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    position: relative;
}

/* Adımlar arası bağlantı çizgisi */
.adim:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 27px;
    left: 66px;
    right: -10px;
    height: 1px;
    background: var(--cizgi);
}

.adim__isaret {
    position: relative;
    flex: none;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--yuzey);
    border: 1px solid var(--cizgi-soft);
    display: grid;
    place-items: center;
    color: var(--kirmizi);
    box-shadow: 0 2px 8px rgba(22, 22, 23, .06);
    transition: background var(--gecis), color var(--gecis), border-color var(--gecis);
}
.adim__isaret svg { width: 24px; height: 24px; }

.adim__ad {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--metin);
}

.adim__aciklama {
    font-size: 13.5px;
    color: var(--metin-ikincil);
    margin: -6px 0 0;
    max-width: 22ch;
}

/* Aktif adım — cf. step1_identity_active_exact.png */
.adim[data-durum='aktif'] .adim__isaret {
    background: var(--kirmizi);
    border-color: var(--kirmizi);
    color: #fff;
    box-shadow: 0 4px 14px rgba(198, 13, 31, .28);
}

/* Tamamlanan adım — beyaz daire + kırmızı onay rozeti */
.adim[data-durum='tamam'] .adim__isaret::after {
    content: '';
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--kirmizi) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
    border: 2px solid var(--yuzey);
}

/* Mobilde adımlar tek satıra sığması için sadeleşir */
@media (max-width: 1023px) {
    .adimlar {
        gap: 4px;
        background: var(--yuzey);
        border: 1px solid var(--cizgi-soft);
        border-radius: var(--kose-kart);
        padding: 16px 12px;
    }
    .adim { align-items: center; text-align: center; gap: 8px; }
    .adim__isaret { width: 44px; height: 44px; }
    .adim__isaret svg { width: 20px; height: 20px; }
    .adim:not(:last-child)::after { top: 22px; left: calc(50% + 28px); right: calc(-50% + 28px); }
    .adim__ad { font-size: 12.5px; line-height: 1.3; }
    .adim__aciklama { display: none; }
}

/* --------------------------------------------
   Kart
   -------------------------------------------- */
.kart {
    background: var(--yuzey);
    border: 1px solid var(--cizgi-soft);
    border-radius: var(--kose-kart);
    box-shadow: var(--golge-kart);
    padding: 30px 32px 32px;
}

@media (max-width: 480px) {
    .kart { padding: 24px 20px 26px; }
}

/* Kart başlığı — header_document_icon_and_rule_exact.png */
.kart__marka {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 18px;
    margin-bottom: 22px;
    position: relative;
}
.kart__marka::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 52px;
    height: 3px;
    border-radius: 2px;
    background: var(--kirmizi);
}
.kart__marka svg { width: 34px; height: 34px; color: var(--kirmizi); flex: none; }
.kart__marka span {
    font-size: 23px;
    font-weight: 600;
    letter-spacing: -.02em;
}

.ekran__baslik {
    margin: 0 0 10px;
    font-size: clamp(21px, 2.4vw, 24px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.25;
}

.ekran__metin {
    margin: 0 0 22px;
    font-size: 16px;
    color: var(--metin-ikincil);
}

/* --------------------------------------------
   Form öğeleri
   -------------------------------------------- */
.alan { margin-bottom: 6px; }

.alan__etiket {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--metin-ikincil);
    margin-bottom: 7px;
}

.girdi-sarmal {
    position: relative;
    display: flex;
    align-items: center;
}
.girdi-sarmal svg {
    position: absolute;
    left: 16px;
    width: 20px;
    height: 20px;
    color: var(--metin-ikincil);
    pointer-events: none;
}

.girdi {
    width: 100%;
    height: 58px;
    padding: 0 16px 0 48px;
    font-family: inherit;
    font-size: 19px;               /* brief §6: 16 px altına inilmez (iOS yakınlaştırır) */
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    color: var(--metin);
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: var(--kose);
    transition: border-color var(--gecis), box-shadow var(--gecis);
}
.girdi::placeholder { color: #8A90A0; letter-spacing: 0; font-weight: 400; }
.girdi:focus {
    outline: none;
    border-color: var(--kirmizi);
    box-shadow: var(--golge-odak);
}
.girdi[aria-invalid='true'] {
    border-color: var(--hata);
    box-shadow: 0 0 0 3px rgba(158, 31, 25, .14);
}

.yardim {
    margin: 8px 0 0;
    font-size: 13.5px;
    color: var(--metin-ikincil);
}

/* --------------------------------------------
   Butonlar
   -------------------------------------------- */
.btn {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    min-height: 56px;              /* brief §9: dokunma hedefi ≥ 48 px */
    padding: 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    font-family: inherit;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.01em;
    border-radius: var(--kose);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--gecis), border-color var(--gecis), color var(--gecis);
}
.btn svg { width: 19px; height: 19px; flex: none; }
.btn:disabled { cursor: not-allowed; opacity: .55; }

.btn--birincil {
    background: var(--kirmizi);
    color: #fff;
}
.btn--birincil:hover:not(:disabled) { background: var(--kirmizi-koyu); }

.btn--ikincil {
    background: var(--yuzey);
    color: var(--metin);
    border-color: var(--cizgi);
}
.btn--ikincil:hover:not(:disabled) { border-color: var(--metin-ikincil); }

/* Beklerken buton boyutu sabit kalır — brief §8 */
.btn.is-yukleniyor { color: transparent; pointer-events: none; }
.btn.is-yukleniyor::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2.5px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    color: #fff;
    animation: don .7s linear infinite;
}
.btn--ikincil.is-yukleniyor::after { color: var(--metin); }

@keyframes don { to { transform: rotate(360deg); } }

/* VEYA ayracı */
.ayrac {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 16px 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    color: #9AA0AC;
}
.ayrac::before,
.ayrac::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--cizgi-soft);
}

/* Metin bağlantısı — resend_code_exact.png */
.metin-btn {
    background: none;
    border: 0;
    padding: 2px 0;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--kirmizi);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.metin-btn:disabled {
    color: var(--metin-ikincil);
    text-decoration: none;
    cursor: not-allowed;
}

.tekrar {
    margin: 18px 0 0;
    text-align: center;
    font-size: 15px;
    color: var(--metin-ikincil);
}
.tekrar .metin-btn { margin-left: 6px; }

/* --------------------------------------------
   OTP kutuları — 6 × 55 px, 11 px aralık (ölçüldü)
   -------------------------------------------- */
.otp {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 11px;
    margin: 4px 0 0;
}

.otp__kutu {
    width: 100%;
    height: 62px;
    padding: 0;
    text-align: center;
    font-family: inherit;
    font-size: 28px;               /* brief §6: sayfanın en büyük öğesi */
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--metin);
    background: var(--yuzey);
    border: 1.5px solid var(--cizgi);
    border-radius: var(--kose);
    transition: border-color var(--gecis), box-shadow var(--gecis);
}
.otp__kutu:focus {
    outline: none;
    border-color: var(--kirmizi-kenar);
    box-shadow: var(--golge-odak);
}
.otp__kutu[data-dolu='1'] { border-color: var(--metin-ikincil); }
.otp[aria-invalid='true'] .otp__kutu { border-color: var(--hata); }

@media (max-width: 380px) {
    .otp { gap: 7px; }
    .otp__kutu { height: 54px; font-size: 23px; }
}

/* Telefon satırı — masked_phone_exact.png */
.telefon {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 18px;
    font-size: 19px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: .03em;
}
.telefon svg { width: 21px; height: 21px; color: var(--kirmizi); flex: none; }

/* Sayaç — kırmızı geri sayım değil, ince ilerleme (brief §7) */
.sayac {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 14px 0 4px;
    font-size: 14.5px;
    color: var(--metin-ikincil);
}
.sayac svg { width: 17px; height: 17px; flex: none; }
.sayac b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--metin); }

.sayac-cizgi {
    height: 3px;
    border-radius: 2px;
    background: var(--cizgi-soft);
    overflow: hidden;
    margin-bottom: 18px;
}
.sayac-cizgi span {
    display: block;
    height: 100%;
    width: 100%;
    background: var(--kirmizi);
    border-radius: 2px;
    transform-origin: left center;
    transition: transform 1s linear;
}

/* --------------------------------------------
   Bildirim kutuları (hata / uyarı / bilgi)
   Renk tek başına sinyal değildir; ikon eşlik eder (brief §9).
   -------------------------------------------- */
.bildirim {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    margin: 0 0 18px;
    border-radius: var(--kose);
    border: 1px solid;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.5;
}
.bildirim svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.bildirim p { margin: 0; }
.bildirim a { color: inherit; font-weight: 600; }

.bildirim--hata {
    color: var(--hata);
    background: var(--hata-zemin);
    border-color: rgba(158, 31, 25, .22);
}
.bildirim--uyari {
    color: var(--uyari);
    background: var(--uyari-zemin);
    border-color: rgba(138, 90, 0, .22);
}
.bildirim--bilgi {
    color: var(--metin-ikincil);
    background: var(--yuzey-soluk);
    border-color: var(--cizgi-soft);
}

.alan-hata {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 9px 0 0;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--hata);
}
.alan-hata svg { width: 16px; height: 16px; flex: none; }
.alan-hata:empty { display: none; }

/* --------------------------------------------
   Başarı ekranı
   Sayfanın tek duygusal anı — ölçülü bir kutlama (brief §7).
   -------------------------------------------- */
.basari-isaret {
    width: 62px;
    height: 62px;
    margin: 4px auto 18px;
    border-radius: 50%;
    background: var(--basari-zemin);
    color: var(--basari);
    display: grid;
    place-items: center;
}
.basari-isaret svg { width: 32px; height: 32px; }
.basari-isaret path {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    animation: ciz 400ms cubic-bezier(.2, .7, .3, 1) 120ms forwards;
}
@keyframes ciz { to { stroke-dashoffset: 0; } }

.basari-baslik {
    margin: 0 0 6px;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.02em;
}
.basari-ad {
    margin: 0 0 22px;
    text-align: center;
    font-size: 16.5px;
    color: var(--metin-ikincil);
}
.basari-ad b { color: var(--metin); font-weight: 600; }

.not {
    margin: 16px 0 0;
    font-size: 13.5px;
    color: var(--metin-ikincil);
    text-align: center;
}

/* --------------------------------------------
   KVKK notu — kvkk_security_note_exact.png
   -------------------------------------------- */
.kvkk {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 20px 4px 0;
    font-size: 14px;
    color: var(--metin-ikincil);   /* 7,94:1 — ölçülen özgün gri 5,91:1 idi */
}
.kvkk svg { width: 19px; height: 19px; flex: none; margin-top: 1px; color: var(--metin-ikincil); }

/* Cümlenin verdiği sözün belgesi bir dokunuş ötede olsun.
   Ayrı bir satır açmaz; cümlenin devamı gibi akar. */
.kvkk__ol {
    color: var(--metin-ikincil);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--cizgi);
    white-space: nowrap;
}
.kvkk__ol:hover { color: var(--kirmizi); text-decoration-color: currentColor; }

/* --------------------------------------------
   Güven satırı — trust_features_row_exact.png
   -------------------------------------------- */
.guven {
    border-top: 1px solid var(--cizgi-soft);
    background: var(--yuzey);
}
.guven__ic {
    max-width: 1448px;
    margin: 0 auto;
    padding: 22px 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px 0;
}
.guven__oge {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 26px;
    flex: 1 1 auto;
}
.guven__oge + .guven__oge { border-left: 1px solid var(--cizgi-soft); }
.guven__oge:first-child { padding-left: 0; }
.guven__oge svg { width: 26px; height: 26px; color: var(--kirmizi); flex: none; }
.guven__ad { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.guven__alt { font-size: 14px; color: var(--metin-ikincil); line-height: 1.3; }

@media (max-width: 700px) {
    .guven__ic { flex-direction: column; }
    .guven__oge { padding: 0; }
    .guven__oge + .guven__oge { border-left: 0; }
}

/* --------------------------------------------
   Alt şerit — footer_full_exact.png (#161617)
   -------------------------------------------- */
.alt {
    background: var(--murekkep);
    color: #C9CACE;
}
.alt__ic {
    max-width: 1448px;
    margin: 0 auto;
    padding: 26px 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 26px;
    font-size: 14px;
}
.alt__baglantilar {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}
.alt__ol {
    color: #C9CACE;
    text-decoration: none;
    padding: 6px 18px;
    border-radius: 6px;
    transition: color var(--gecis);
}
.alt__ol + .alt__ol { border-left: 1px solid #33343A; }
.alt__ol:hover { color: #fff; }
.alt :focus-visible { outline-color: #fff; }

@media (max-width: 700px) {
    .alt__ic { flex-direction: column; align-items: flex-start; }
    .alt__ol:first-child { padding-left: 0; }
}

/* --------------------------------------------
   "Nasıl çalışır?" penceresi
   -------------------------------------------- */
.pencere {
    width: min(460px, calc(100vw - 32px));
    padding: 0;
    border: 0;
    border-radius: var(--kose-kart);
    background: var(--yuzey);
    color: var(--metin);
    box-shadow: 0 24px 60px rgba(22, 22, 23, .22);
}
.pencere::backdrop { background: rgba(22, 22, 23, .55); }

.pencere__ic { padding: 26px 26px 24px; }

.pencere__ust {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 6px;
}
.pencere__baslik {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.02em;
}
.pencere__kapat {
    flex: none;
    width: 40px;
    height: 40px;
    margin: -6px -6px 0 0;
    display: grid;
    place-items: center;
    background: none;
    border: 0;
    border-radius: 8px;
    color: var(--metin-ikincil);
    cursor: pointer;
}
.pencere__kapat:hover { background: var(--zemin); color: var(--metin); }
.pencere__kapat svg { width: 20px; height: 20px; }

.pencere__metin { margin: 0 0 18px; font-size: 15px; color: var(--metin-ikincil); }

.pencere__liste {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    display: grid;
    gap: 16px;
}
.pencere__adim { display: flex; gap: 14px; align-items: flex-start; }
.pencere__no {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--kirmizi-zemin);
    color: var(--kirmizi);
    display: grid;
    place-items: center;
    font-size: 14.5px;
    font-weight: 700;
}
.pencere__ad { font-size: 15.5px; font-weight: 600; }
.pencere__aciklama { font-size: 14.5px; color: var(--metin-ikincil); }

/* --------------------------------------------
   Ekran geçişi — yatay kayma ve sönümleme, 240 ms (brief §8)
   -------------------------------------------- */
.ekran { animation: gir 240ms cubic-bezier(.2, .6, .3, 1); }

@keyframes gir {
    from { opacity: 0; transform: translateX(14px); }
    to   { opacity: 1; transform: none; }
}

/* Tek seferlik kısa sarsıntı — tekrarlanmaz (brief §8) */
.sarsil { animation: sarsinti 200ms ease-in-out; }

@keyframes sarsinti {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-6px); }
    75%      { transform: translateX(6px); }
}

/* Brief §8: bu isteğe bağlı değildir. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .basari-isaret path { stroke-dashoffset: 0; }
}

/* --------------------------------------------
   Yüksek kontrast / zorlanmış renk kipi
   -------------------------------------------- */
@media (forced-colors: active) {
    .kart,
    .girdi,
    .otp__kutu,
    .btn { border: 1px solid ButtonBorder; }
    .btn--birincil { background: ButtonFace; color: ButtonText; }
}