/* ==========================================================================
   OtoGonderi.com.tr · OTURUM EKRANLARI
   /giris · /uyelik · /sifremi-unuttum
   ==========================================================================

   BU DOSYA TEK BAŞINA YETER.
   temel.css yüklenmiyor. Sebep: bu üç ekranın tamamı yeniden çizildi ve
   temel.css'in form/buton primitifleri üzerine yazmak, her kural için bir
   "ezme" satırı demekti — okuması zor, davranışı sürprizli bir katman.
   Kendi sıfırlaması ve kendi belirteçleriyle çalışan bağımsız bir dosya,
   panel tarafını hiç riske atmadan bu ekranlarda tam denetim veriyor.

   TASARIM HEDEFİ
   iOS uygulaması hissi: büyük başlık, gruplanmış yuvarlak alan blokları,
   yüzen etiket, tek net eylem butonu, sessiz tipografi.

   DİKEY TAŞMA SÖZÜ (masaüstünde de)
   Sayfa gövdesi HİÇ kaymaz (`body { overflow: hidden }`). Sahne tam olarak
   görüntü alanı yüksekliğinde bir ızgara:

       [marka]            auto
       [içerik]           minmax(0, 1fr)   ← gerekirse İÇİNDE kayar
       [künye]            auto

   İçerik bölgesi flex kolon ve kart `margin: auto` ile ortalanıyor.
   `justify-content: center` DEĞİL: içerik bölgeden uzun olduğunda o
   yöntem üst tarafı kırpıyor ve kaydırmayla ulaşılamaz hale getiriyor.
   Flex'te `margin: auto` taşma anında 0'a çözülür, yani kırpma olmaz.

   Ayrıca bütün dikey ölçüler `clamp(min, …vh, max)` ile görüntü
   yüksekliğine bağlı: 1080px'de rahat, 700px'de sıkı, 600px'de hâlâ
   sığıyor. Yani "kaydırma gerekmesin" hedefi tek bir kırılma noktasına
   değil, sürekli bir ölçeğe bağlanmış.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Belirteçler
   --------------------------------------------------------------------------
   Renkler Apple sistem paletine yakın nötrlerden seçildi (#f5f5f7 zemin,
   #1d1d1f yazı, #6e6e73 ikincil). Marka mavisi projenin geri kalanıyla
   aynı kalıyor: panelle aynı mavi olmayan bir giriş ekranı, girişten sonra
   markanın değiştiği izlenimi verir.
   -------------------------------------------------------------------------- */

:root {
    /* Marka */
    --of-mavi:        #2251e6;
    --of-mavi-koyu:   #1b3fc4;
    --of-mavi-halka:  rgba(34, 81, 230, .16);
    --of-mavi-silik:  rgba(34, 81, 230, .08);

    /* Ücretsiz deneme eylemi (yeşil): ödeme yok anlamını taşıyan renk */
    --of-yesil:       #0f9d55;
    --of-yesil-koyu:  #0b7c43;
    --of-yesil-halka: rgba(15, 157, 85, .18);

    /* Yüzeyler */
    --of-zemin:       #f5f5f7;
    --of-yuzey:       #ffffff;
    --of-girdi:       #ffffff;   /* girdi kutusu dolgusu */
    --of-alan:        #f6f7f9;   /* ikincil düğme vurgusu */

    /* Yazı */
    --of-yazi:        #1d1d1f;
    --of-yazi-2:      #5c5c61;
    --of-yazi-3:      #86868b;

    /* Çizgiler: alfa değerli, farklı yüzeylerde aynı optik ağırlıkta durur */
    --of-cizgi:       rgba(0, 0, 0, .10);
    --of-cizgi-guclu: rgba(0, 0, 0, .16);

    /* Anlamsal */
    --of-kirmizi:       #d70015;
    --of-kirmizi-zemin: #fff1f1;
    --of-kirmizi-kenar: rgba(215, 0, 21, .22);
    --of-yesil-zemin:   #eaf8f0;
    --of-yesil-kenar:   rgba(15, 157, 85, .24);
    --of-yesil-yazi:    #0a6b3b;
    --of-turuncu:       #b25000;

    /* Gölgeler: iki katman — yakın kenar hissi + uzak "havada" hissi */
    --of-golge-kart:
        0 1px 2px rgba(16, 24, 40, .04),
        0 18px 50px -18px rgba(16, 24, 40, .26);
    --of-golge-yuzen:
        0 2px 6px rgba(16, 24, 40, .10),
        0 12px 28px -10px rgba(16, 24, 40, .24);

    /* Yarıçap */
    --of-r-kart:   24px;
    --of-r-grup:   16px;
    --of-r-alan:   14px;
    --of-r-btn:    14px;
    --of-r-tam:    999px;

    /**
     * DİKEY ÖLÇEK — görüntü yüksekliğine bağlı.
     *
     * Alt sınır 600px yüksekliğinde bile okunur kalacak en küçük değer;
     * üst sınır 1000px+ ekranda rahat duracak en büyük değer. Aradaki
     * `vh` katsayısı ikisini sürekli bağlıyor.
     */
    --of-bosluk-xl: clamp(16px, 3.0vh, 30px);
    --of-bosluk-lg: clamp(12px, 2.1vh, 20px);
    --of-bosluk-md: clamp(8px,  1.5vh, 14px);
    --of-bosluk-sm: clamp(6px,  1.0vh, 10px);

    /* Yüzen etiket kalktığı için üst boşluğa gerek yok: 58px → 52px */
    --of-alan-h:    clamp(46px, 5.8vh, 52px);
    --of-btn-h:     clamp(48px, 6.2vh, 54px);
    --of-kart-en:   408px;

    /* Güvenli alanlar (çentik / ev çubuğu) */
    --of-g-ust: env(safe-area-inset-top, 0px);
    --of-g-alt: env(safe-area-inset-bottom, 0px);
    --of-g-sol: env(safe-area-inset-left, 0px);
    --of-g-sag: env(safe-area-inset-right, 0px);

    /* Hareket: Apple'ın yumuşak giriş eğrisine yakın */
    --of-gecis:  260ms cubic-bezier(.32, .72, 0, 1);
    --of-gecis-h: 150ms cubic-bezier(.32, .72, 0, 1);

    color-scheme: light;
}


/* --------------------------------------------------------------------------
   2. Sıfırlama
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    height: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Lastik bant etkisi kapalı: uygulama hissini bozan tek şey o */
    overscroll-behavior: none;
}

body {
    height: 100%;
    margin: 0;
    /**
     * 16px taban: iOS Safari daha küçük yazı taşıyan bir alana dokunulunca
     * sayfayı yakınlaştırıyor ve düzen bozuluyor. Alan yazılarının hiçbiri
     * 16px'in altına inmiyor (etiketler inebilir, girdiler inmez).
     */
    font: 400 16px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text",
          "SF Pro Display", "Inter", "Segoe UI Variable Text", "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;
    font-feature-settings: "kern" 1, "liga" 1;
    letter-spacing: -.011em;
    color: var(--of-yazi);
    background: var(--of-zemin);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* SÖZ: sayfa gövdesi kaymaz. Kayan tek bölge `.of-orta`. */
    overflow: hidden;
}

h1, h2, p, ul, li, figure { margin: 0; }
ul { padding: 0; list-style: none; }

h1, h2 {
    font-weight: 650;
    line-height: 1.16;
    letter-spacing: -.028em;
    color: var(--of-yazi);
}

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

/**
 * `[hidden]` SÖZÜNÜ TUTMALI.
 *
 * Tarayıcının varsayılan `[hidden] { display: none }` kuralı yazar
 * stillerinden DAHA ZAYIF: aşağıdaki `.of-yardim { display: block }` gibi tek
 * sınıflı bir kural onu sessizce eziyor ve `hidden` özniteliği hiçbir işe
 * yaramıyor. Caps Lock uyarısı bu yüzden her zaman görünür kalıyordu.
 * `!important` burada gerekli: `hidden` bir öznitelik sözleşmesi, görsel
 * tercih değil.
 */
[hidden] { display: none !important; }

a { color: var(--of-mavi); text-underline-offset: 3px; }

button, input, textarea, select {
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    margin: 0;
}

:focus-visible {
    outline: 2px solid var(--of-mavi);
    outline-offset: 3px;
    border-radius: 8px;
}

::selection {
    background: var(--of-mavi-halka);
    color: var(--of-yazi);
}

.of-gizli {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* --------------------------------------------------------------------------
   3. Sahne · dikey taşmayı imkânsız kılan iskelet
   -------------------------------------------------------------------------- */

.of-sahne {
    /**
     * `dvh` klavye açıldığında da doğru yüksekliği veriyor (iOS'ta `vh`
     * sabit kalıp alt kısmı klavyenin altında bırakıyor). `vh` yedek olarak
     * önce yazılıyor: dvh desteklemeyen tarayıcı ilkini kullanır.
     */
    height: 100vh;
    height: 100dvh;

    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    /* Yatayda da taşma yok: tek kolon ve minmax(0,…) ile içerik daralabilir */
    grid-template-columns: minmax(0, 1fr);

    padding:
        calc(var(--of-bosluk-lg) + var(--of-g-ust))
        max(18px, var(--of-g-sag))
        calc(var(--of-bosluk-md) + var(--of-g-alt))
        max(18px, var(--of-g-sol));

    /**
     * Zemin dokusu: iki çok soluk radyal ışık. Düz gri bir zemin
     * "tarayıcı varsayılanı" gibi duruyordu; bu iki leke kartın
     * arkasında hafif bir derinlik bırakıyor, dikkat çekmiyor.
     */
    background:
        radial-gradient(1100px 520px at 50% -10%, var(--of-mavi-silik), transparent 68%),
        radial-gradient(760px 420px at 92% 108%, var(--of-mavi-silik), transparent 70%),
        var(--of-zemin);
}

/* 3a. Üst şerit: marka */

.of-ust {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: var(--of-bosluk-lg);
}

.of-marka {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px;
    border-radius: var(--of-r-tam);
    color: var(--of-yazi);
    text-decoration: none;
    transition: opacity var(--of-gecis-h);
}

@media (hover: hover) {
    .of-marka:hover { opacity: .68; }
}

.of-marka__isaret {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    color: #fff;
    /* Apple ikonlarındaki üstten aydınlanma: 150deg açı ve iç ışık */
    background:
        linear-gradient(155deg, rgba(255, 255, 255, .28), transparent 52%),
        linear-gradient(155deg, var(--of-mavi), var(--of-mavi-koyu));
    border-radius: 11px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .28),
        0 4px 12px -2px var(--of-mavi-halka);
}

.of-marka__ad {
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -.028em;
}

/* 3b. Orta bölge: TEK kayan alan */

.of-orta {
    /**
     * `min-height: 0` şart: ızgara satırı `1fr` olsa da içerik kutusu
     * varsayılan `min-height: auto` ile büyür ve satırı taşırır. Sıfırlamak
     * kaydırmayı bu bölgede tutuyor.
     */
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    /* Kaydırma bu bölgede kalsın, sayfaya sıçramasın */
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
}

/**
 * KAYDIRMA İŞARETİ.
 *
 * En küçük telefonda (375×667) beş alanlı üyelik formu bölgeye 10-15px
 * sığmıyor. Sorun kaydırmanın kendisi değil — mobil formlar kayar — sorun
 * NASIL GÖRÜNDÜĞÜ: yeşil düğme tam ortasından kesiliyor ve bozuk bir sayfa
 * izlenimi veriyor. Dokunmatik cihazda kaydırma çubuğu da olmadığı için
 * aşağıda devam ettiğine dair hiçbir işaret kalmıyor.
 *
 * Alt kenardaki 30px'lik solma o işareti veriyor: kesilen içerik "bitmiş"
 * değil "devam ediyor" görünüyor. Sona gelindiğinde solma kalkıyor (aksi
 * halde düğmenin alt kenarı hep soluk kalırdı).
 *
 * `data-kayar` değerini oturum.js yazıyor; öznitelik hiç yazılmazsa (JS
 * kapalı) maske de uygulanmıyor ve davranış bugünküyle aynı kalıyor.
 */
.of-orta[data-kayar="var"] {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent);
}

@media (pointer: fine) {
    .of-orta { scrollbar-width: thin; scrollbar-color: var(--of-cizgi-guclu) transparent; }
    .of-orta::-webkit-scrollbar { width: 8px; }
    .of-orta::-webkit-scrollbar-track { background: transparent; }
    .of-orta::-webkit-scrollbar-thumb {
        background: var(--of-cizgi-guclu);
        border: 2px solid transparent;
        border-radius: var(--of-r-tam);
        background-clip: content-box;
    }
}

/* 3c. Alt şerit: künye */

.of-alt {
    padding-top: var(--of-bosluk-md);
    text-align: center;
    font-size: 12px;
    line-height: 1.5;
    color: var(--of-yazi-3);
    overflow-wrap: break-word;
}

.of-alt__satir {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2px 4px;
}

.of-alt a {
    padding: 3px 4px;
    color: var(--of-yazi-3);
    text-decoration: none;
    border-radius: 6px;
}

@media (hover: hover) {
    .of-alt a:hover { color: var(--of-yazi); text-decoration: underline; }
}

.of-alt__ayrac { opacity: .5; }

/**
 * DAR EKRANDA KÜNYE, YÜZEN DÜĞMENİN ALTINA GİRMİYOR.
 *
 * WhatsApp düğmesi sağ altta sabit ve sayfa akışında yer tutmuyor. 390px
 * genişlikte künye satırı tam olarak o köşeye kadar uzanıyor ve son bağlantı
 * ("Gizlilik") düğmenin arkasında kalıyordu — ölçümde yatay taşma YOK, yani
 * kırpılma değil ÜST ÜSTE BİNME; kaydırarak da görünür hale gelmiyordu.
 *
 * İki adım: telif satırı kendi satırına iniyor (`flex-basis: 100%`) ve künye
 * bloğu iki yandan 46px içeri alınıyor. Metin hâlâ ortalı, yalnızca daha dar
 * bir kolonda.
 */
@media (max-width: 559px) {
    .of-alt { padding-inline: 46px; }

    .of-alt__telif { flex: 1 0 100%; }

    /* Telif kendi satırına indiğinde onu izleyen ayraç anlamsız kalıyor */
    .of-alt__telif + .of-alt__ayrac { display: none; }
}

/* --------------------------------------------------------------------------
   4. Kart
   --------------------------------------------------------------------------
   Mobilde kart YOK: zeminle aynı renkte, kenarsız, gölgesiz — form doğrudan
   ekranın üstünde duruyor, tam ekran bir uygulama gibi. Kart çerçevesi
   yalnızca 560px'ten geniş ekranlarda beliriyor; orada formun etrafında boş
   alan var ve bir sınır olmadan içerik havada asılı kalıyor.
   -------------------------------------------------------------------------- */

.of-kart {
    /* Flex'te ortalama: taşma anında kırpmayan tek yöntem */
    margin: auto;
    width: 100%;
    max-width: var(--of-kart-en);
    flex: 0 0 auto;
    overflow-wrap: break-word;
}

.of-kart--genis { max-width: 460px; }

@media (min-width: 560px) {
    .of-kart {
        padding: var(--of-bosluk-xl) 30px;
        background: var(--of-yuzey);
        border: 1px solid var(--of-cizgi);
        border-radius: var(--of-r-kart);
        box-shadow: var(--of-golge-kart);
    }

    .of-kart--genis { max-width: 520px; padding-left: 34px; padding-right: 34px; }
}

/* --------------------------------------------------------------------------
   5. Başlık bloğu
   -------------------------------------------------------------------------- */

.of-baslik {
    margin-bottom: var(--of-bosluk-lg);
    text-align: center;
}

.of-baslik h1 {
    /**
     * iOS "large title" ölçüsüne yakın ama görüntü yüksekliğine bağlı:
     * kısa ekranda başlık küçülüp forma yer açıyor.
     */
    font-size: clamp(23px, calc(1.7vh + 1.9vw), 30px);
}

.of-baslik p {
    margin-top: 7px;
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--of-yazi-2);
}

/* Başlık üstü rozet: "3 gün ücretsiz · kart bilgisi istemiyoruz" */
.of-rozet {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px 5px 9px;
    margin-bottom: 11px;
    font-size: 12px;
    font-weight: 590;
    line-height: 1.4;
    color: var(--of-yesil-yazi);
    background: var(--of-yesil-zemin);
    border: 1px solid var(--of-yesil-kenar);
    border-radius: var(--of-r-tam);
}

.of-rozet svg { flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   6. Form alanları · KLASİK DÜZEN (etiket üstte)
   --------------------------------------------------------------------------
   Her alan bağımsız: ÜSTTE etiket, ALTINDA kenarlı yuvarlak girdi kutusu.

   NEDEN YÜZEN ETİKET DEĞİL
   İlk sürüm iOS'un "inset grouped" listesini ve yüzen etiketi kullanıyordu:
   etiket boşken kutunun ortasında duruyor, yazı girilince küçülüp yukarı
   çıkıyordu. Dikeyde alan başına ~20px tasarruf ediyordu ama pratikte iki
   sorun üretti:

     · Alan adı ile girilen değer AYNI kutunun içinde, üst üste iki katlı
       duruyor. Etiket 11.5px'e küçüldüğü için okunması zorlaşıyor, kutu
       da kalabalık görünüyor.
     · Etiketin yeri girdinin durumuna göre DEĞİŞİYOR. Formu tarayan göz
       sabit bir hizaya oturamıyor; dolu ve boş alanlar farklı ritimde
       görünüyor.

   Klasik düzen bunların ikisini de ortadan kaldırıyor: etiket her zaman aynı
   yerde, tam boyutta ve girdinin dışında. Kurumsal formların varsayılanı
   olmasının sebebi bu — tanıdık olduğu için öğrenilmesi gerekmiyor.

   Kazanılan ~20px, alan yüksekliğini 58px'ten 46-52px'e indirerek ve
   `clamp(..vh..)` ölçeğini yeniden ayarlayarak geri alındı; "ekrandan
   taşmama" sözü ölçümle korunuyor (bkz. dosya başındaki blok).

   İPUCU METNİ ARTIK HER ZAMAN GÖRÜNÜR
   Yüzen etiket düzeninde ipucu ("ornek@firma.com") etiketle çakıştığı için
   yalnızca odakta gösteriliyordu. Etiket kutunun dışına çıkınca çakışma
   kalmadı: biçim örneği alan boşken de duruyor, yani kullanıcı ne yazacağını
   dokunmadan önce görüyor.
   -------------------------------------------------------------------------- */

.of-alan {
    min-width: 0;
    margin-bottom: var(--of-bosluk-md);
}

.of-alan:last-child { margin-bottom: 0; }

/* Etiket: kutunun ÜSTÜNDE, sabit konumda, tam boyutta */
.of-alan__etiket {
    display: block;
    margin-bottom: 6px;
    font-size: 13.5px;
    font-weight: 590;
    letter-spacing: -.008em;
    line-height: 1.3;
    color: var(--of-yazi);
}

.of-alan__istege-bagli {
    font-weight: 400;
    color: var(--of-yazi-3);
}

/**
 * GİRDİ KUTUSU.
 *
 * `input` ve şifre göster düğmesini birlikte saran flex kapsayıcı. Kenarlık
 * ve odak halkası KUTUYA ait, girdiye değil: girdiye verilse düğme halkanın
 * dışında kalır ve kenarda nötr bir kare bırakır (yüzen etiketli sürümde
 * yaşanan kusur buydu).
 */
.of-alan__kutu {
    position: relative;
    display: flex;
    align-items: stretch;
    min-width: 0;
    background: var(--of-girdi);
    border: 1.5px solid var(--of-cizgi-guclu);
    border-radius: var(--of-r-alan);
    transition: border-color var(--of-gecis-h), box-shadow var(--of-gecis-h),
                background var(--of-gecis-h);
}

@media (hover: hover) {
    .of-alan__kutu:hover { border-color: var(--of-yazi-3); }
}

.of-alan__kutu:focus-within {
    border-color: var(--of-mavi);
    box-shadow: 0 0 0 4px var(--of-mavi-halka);
}

.of-alan__girdi {
    width: 100%;
    min-width: 0;
    height: var(--of-alan-h);
    padding: 0 14px;
    font-size: 16px;
    line-height: 1.3;
    color: var(--of-yazi);
    background: transparent;
    border: 0;
    /* Köşeleri kutudan devral: seçim vurgusu köşeden taşmasın */
    border-radius: inherit;
    appearance: none;
}

.of-alan__girdi:focus { outline: 0; }

.of-alan__girdi::placeholder {
    color: var(--of-yazi-3);
    opacity: 1;   /* Firefox varsayılanı .54; tema rengini bozuyor */
}

/**
 * HATALI ALAN.
 *
 * Kırmızı kenarlık + hafif kırmızı dolgu KUTUYA uygulanıyor (girdiye değil,
 * yoksa şifre göster düğmesi dolgunun dışında kalıyor). Etiket de kırmızıya
 * dönüyor: hata rengini yalnızca kutuya vermek, formu göz gezdirerek tarayan
 * kullanıcıya hangi ALANIN sorunlu olduğunu bir adım sonra söylüyordu.
 */
.of-alan--hata .of-alan__kutu {
    border-color: var(--of-kirmizi);
    background: var(--of-kirmizi-zemin);
}

.of-alan--hata .of-alan__kutu:focus-within {
    box-shadow: 0 0 0 4px var(--of-kirmizi-kenar);
}

.of-alan--hata .of-alan__etiket { color: var(--of-kirmizi); }

/**
 * OTOMATİK DOLDURMA.
 *
 * Chrome autofill sarı bir zemin basıyor ve `background` ile ezilemiyor;
 * tek yol devasa bir `inset` gölge. Rengi KUTUNUN dolgusuyla aynı: başka bir
 * renk seçmek şifre göster düğmesinin yanında bir kare bırakır. Yazı rengi de
 * ayrıca zorlanıyor: Chrome kendi siyahını basıyordu.
 */
.of-alan__girdi:-webkit-autofill,
.of-alan__girdi:-webkit-autofill:hover,
.of-alan__girdi:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--of-yazi);
    -webkit-box-shadow: 0 0 0 60px var(--of-girdi) inset;
    caret-color: var(--of-yazi);
}

/* Şifre göster / gizle */

.of-goster {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 46px;
    align-self: stretch;
    padding: 0;
    background: none;
    border: 0;
    border-radius: inherit;
    color: var(--of-yazi-3);
    cursor: pointer;
    transition: color var(--of-gecis-h);
}

@media (hover: hover) {
    .of-goster:hover { color: var(--of-yazi); }
}

.of-goster[aria-pressed="true"] { color: var(--of-mavi); }

/* İkon değişimi CSS'te; JS yalnızca aria-pressed ve input tipini çeviriyor */
.of-goster__kapa { display: none; }
.of-goster[aria-pressed="true"] .of-goster__ac { display: none; }
.of-goster[aria-pressed="true"] .of-goster__kapa { display: block; }

/* Alan altı hata / yardım metni */

.of-yardim,
.of-hata {
    display: block;
    margin: 6px 2px 0;
    font-size: 12.5px;
    line-height: 1.45;
}

.of-yardim { color: var(--of-yazi-3); }

.of-hata {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    color: var(--of-kirmizi);
    font-weight: 500;
}

.of-hata svg { flex: 0 0 auto; margin-top: 1px; }

/* İki kolonlu alan satırı (ad soyad | telefon · şifre | şifre tekrar) */

.of-ikili {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--of-bosluk-md);
    margin-bottom: var(--of-bosluk-md);
    /**
     * `stretch` DEĞİL. Varsayılan hizalama iki kolonu eşit yükseklikte
     * tutuyor; bir kolondaki alan hata mesajı aldığında (ör. "Ad soyad en az
     * 3 karakter olmalı") diğer kolonun kutusu da onun boyuna uzuyor ve
     * girdinin altında koca bir boş alan kalıyordu. `start` her alanı kendi
     * içeriği kadar bırakıyor.
     */
    align-items: start;
}

/* Aralık ızgaranın `gap`inden geliyor; alanın kendi alt boşluğu çift olurdu */
.of-ikili > .of-alan { margin-bottom: 0; }

@media (min-width: 560px) {
    .of-ikili { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/**
 * `--mobil`: TELEFONDA DA İKİ KOLON.
 *
 * Tek kullanıcısı şifre çifti (şifre | şifre tekrar). İki alan birbirinin
 * eşi — aynı değer iki kez — ve yan yana durduklarında tek bir iş olarak
 * okunuyorlar. Bir satır yükseklik de kazandırıyor.
 *
 * ESKİ ADI `--kisa` VE ESKİ KULLANICISI AD/TELEFON ÇİFTİYDİ. İsim "kısa
 * değerler için" demek istiyordu; şifre alanı kısa değer taşımadığı için ad
 * yanıltıcı hâle geldi ve `--mobil` ile değiştirildi (ne yaptığını söylüyor:
 * mobilde de iki kolon).
 *
 * ÖLÇÜLEN SIKIŞMA · 375px telefon
 *   Sahne dolgusu 2×18px → kart 339px
 *   gap ~10px → kolon 164px
 *   eksi kenarlık 3px, göster düğmesi 46px, girdi dolgusu 28px
 *   = yazıya ~88px, yani 8-9 maskeli karakter
 *
 * Sekiz karakter en kısa geçerli şifre (AUTH_SIFRE_MIN), yani sığıyor ama
 * payı yok. Aşağıdaki blok en dar ekranlarda düğmeyi ve dolguyu kısarak
 * ~14px geri veriyor (~11 karakter). Dokunma hedefi 40px'in altına İNMİYOR.
 *
 * 360px eşiği: altındaki (çok eski, 320px) ekranlarda tek kolona düşüyor —
 * orada iki kolon şifre alanını kullanılamaz yapardı.
 */
@media (min-width: 360px) {
    .of-ikili--mobil { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/**
 * DAR EKRAN TELAFİSİ · yalnızca iki kolonlu şifre satırı için.
 *
 * 560px'in altında `.of-ikili--mobil` iki kolonda ve yazı alanı ~88px'e
 * iniyor (hesap yukarıda). Bu blok iki yerden yer kazanıyor:
 *
 *   Göster düğmesi 46 → 40px  · 6px. 40px projenin dokunma hedefi tabanı ve
 *                               düğme dikeyde alanın tamamını kaplıyor
 *                               (`align-self: stretch`, 46-52px), yani
 *                               gerçek hedef 40×46.
 *   Girdi dolgusu 14 → 10px   · 8px. Yalnızca yatay; dikey ölçü değişmiyor.
 *
 * Toplam ~14px → yazıya ~102px. Sekiz karakterlik şifrede artık pay var.
 *
 * SADECE BU SATIRA UYGULANIYOR. Tek kolonda duran şifre alanları (giriş
 * ekranı, şifre sıfırlama) 46px düğmeyi ve 14px dolguyu koruyor: orada
 * genişlik sorunu yok ve daha büyük hedef daha iyi.
 */
@media (max-width: 559px) {
    .of-ikili--mobil .of-goster { width: 40px; }
    .of-ikili--mobil .of-alan__girdi { padding-inline: 10px; }
}

/* --------------------------------------------------------------------------
   7. Şifre gücü göstergesi
   --------------------------------------------------------------------------
   Dört parça + tek satır metin. Renkler CSS'te, `data-seviye` özniteliğine
   bağlı; JS yalnızca seviyeyi ve metni yazıyor. Renk kararı tek yerde:
   inline `style.background` ile paleti izlemek mümkün değildi.
   -------------------------------------------------------------------------- */

/**
 * Üst boşluk YOK: gösterge şifre satırının hemen ardından geliyor ve o satır
 * (`.of-ikili`) kendi alt boşluğunu zaten taşıyor. Buraya ayrıca boşluk
 * vermek ikisini toplayıp 22px'lik bir kopukluk bırakıyordu.
 */
.of-guc {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 2px;
}

.of-guc__cubuk {
    display: flex;
    flex: 1 1 auto;
    gap: 4px;
    min-width: 0;
}

.of-guc__cubuk i {
    flex: 1 1 0;
    height: 4px;
    background: var(--of-cizgi);
    border-radius: var(--of-r-tam);
    transition: background var(--of-gecis-h);
}

.of-guc__metin {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 590;
    color: var(--of-yazi-3);
    font-variant-numeric: tabular-nums;
}

.of-guc[data-seviye="1"] { --of-guc-renk: var(--of-kirmizi); }
.of-guc[data-seviye="2"] { --of-guc-renk: var(--of-turuncu); }
.of-guc[data-seviye="3"] { --of-guc-renk: var(--of-mavi); }
.of-guc[data-seviye="4"] { --of-guc-renk: var(--of-yesil); }

.of-guc[data-seviye="1"] i:nth-child(-n+1),
.of-guc[data-seviye="2"] i:nth-child(-n+2),
.of-guc[data-seviye="3"] i:nth-child(-n+3),
.of-guc[data-seviye="4"] i:nth-child(-n+4) { background: var(--of-guc-renk); }

.of-guc[data-seviye]:not([data-seviye="0"]) .of-guc__metin { color: var(--of-guc-renk); }

/* Şifre kuralı: gücü ölçülmeden önce ne beklendiğini söyleyen satır */
.of-kural {
    margin: 7px 2px 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--of-yazi-3);
}

/* --------------------------------------------------------------------------
   8. Satır: onay kutusu + yan bağlantı
   -------------------------------------------------------------------------- */

.of-satir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: var(--of-bosluk-md) 0 var(--of-bosluk-lg);
    flex-wrap: wrap;
}

.of-onay {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    /* Dokunma hedefi: etiketin tamamı tıklanabilir, en az 44px yükseklik */
    min-height: 30px;
    padding: 4px 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--of-yazi-2);
    cursor: pointer;
    user-select: none;
}

.of-onay input[type="checkbox"] {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    background: var(--of-yuzey);
    border: 1.5px solid var(--of-cizgi-guclu);
    border-radius: 7px;
    appearance: none;
    cursor: pointer;
    transition: background var(--of-gecis-h), border-color var(--of-gecis-h);
}

.of-onay input[type="checkbox"]:checked {
    background: var(--of-mavi) url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E")
                center / 14px no-repeat;
    border-color: var(--of-mavi);
}

@media (hover: hover) {
    .of-onay:hover input[type="checkbox"] { border-color: var(--of-mavi); }
}

.of-onay input:focus-visible { outline: 2px solid var(--of-mavi); outline-offset: 2px; }

.of-onay--kosul {
    margin: var(--of-bosluk-md) 0;
    align-items: flex-start;
}

.of-onay--kosul a {
    color: var(--of-mavi);
    font-weight: 500;
    text-decoration: underline;
}

/* Satır içi ikincil bağlantı ("Şifremi unuttum") */
.of-yan-baglanti {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 2px;
    font-size: 14px;
    font-weight: 590;
    color: var(--of-mavi);
    text-decoration: none;
}

@media (hover: hover) {
    .of-yan-baglanti:hover { text-decoration: underline; }
}

/* --------------------------------------------------------------------------
   9. Butonlar
   --------------------------------------------------------------------------
   Tek net eylem. iOS'ta birincil buton dolu, tam genişlikte, 14px köşeli.
   Basma geri bildirimi ölçek küçültmeyle: dokunmanın fiziksel karşılığı.
   -------------------------------------------------------------------------- */

.of-btn {
    --of-btn-zemin: var(--of-mavi);
    --of-btn-zemin-2: var(--of-mavi-koyu);
    --of-btn-yazi: #fff;

    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: var(--of-btn-h);
    padding: 0 18px;
    background: var(--of-btn-zemin);
    color: var(--of-btn-yazi);
    border: 0;
    border-radius: var(--of-r-btn);
    font-size: 16.5px;
    font-weight: 590;
    letter-spacing: -.014em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .16),
        0 6px 18px -6px var(--of-mavi-halka);
    transition: background var(--of-gecis-h),
                transform 140ms cubic-bezier(.2, .9, .35, 1.35),
                box-shadow var(--of-gecis-h),
                opacity var(--of-gecis-h);
}

.of-btn svg { flex: 0 0 auto; }

@media (hover: hover) {
    .of-btn:hover { background: var(--of-btn-zemin-2); }
}

.of-btn:active { transform: scale(.978); box-shadow: none; }

.of-btn:disabled,
.of-btn[aria-disabled="true"] {
    opacity: .55;
    cursor: default;
    transform: none;
    box-shadow: none;
}

/* Ücretsiz deneme eylemi */
.of-btn--yesil {
    --of-btn-zemin: var(--of-yesil);
    --of-btn-zemin-2: var(--of-yesil-koyu);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .18),
        0 6px 18px -6px var(--of-yesil-halka);
}

/* İkincil eylem: kenarlı, dolgusuz */
.of-btn--ikincil {
    --of-btn-zemin: transparent;
    --of-btn-zemin-2: var(--of-alan);
    --of-btn-yazi: var(--of-yazi);
    border: 1px solid var(--of-cizgi-guclu);
    box-shadow: none;
}

/**
 * EYLEM BOŞLUĞU.
 *
 * Düğme, kendinden önceki bloğun ne olduğuna göre farklı komşuluklara
 * düşüyor: bir yerde onay satırı (`.of-satir`, kendi alt boşluğu var), bir
 * yerde kural metni, bir yerde alan hatası. Boşluğu düğmenin kendisine
 * vermek her durumda ya çift boşluk ya hiç boşluk üretiyordu. Bu iki kural
 * boşluğu KOMŞULUĞA bağlıyor.
 */
.of-eylem { margin-top: var(--of-bosluk-lg); }
.of-hata + .of-btn { margin-top: var(--of-bosluk-md); }

/* Gönderim sırasında dönen halka */
.of-btn__bekle {
    display: none;
    width: 17px;
    height: 17px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: of-dondur .7s linear infinite;
}

.of-btn[data-bekliyor="1"] .of-btn__bekle { display: block; }

@keyframes of-dondur { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   10. Ayraç ("veya")
   -------------------------------------------------------------------------- */

.of-ayrac {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: var(--of-bosluk-lg) 0;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--of-yazi-3);
}

.of-ayrac::before,
.of-ayrac::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--of-cizgi);
}

/* --------------------------------------------------------------------------
   11. Uyarı / bilgi bloğu
   --------------------------------------------------------------------------
   SweetAlert toast'ı DEĞİL. Toast birkaç saniyede kayboluyor; beş alanlı bir
   formda kullanıcı hangi alanın yanlış olduğunu tekrar okuyamıyor. Bu blok
   `role="alert"` taşıyor, sayfada kalıyor ve maddeleri ilgili alana `#id` ile
   bağlıyor — fareyle tıklayan da alana atlıyor.
   -------------------------------------------------------------------------- */

.of-uyari {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 13px;
    margin-bottom: var(--of-bosluk-lg);
    background: var(--of-kirmizi-zemin);
    border: 1px solid var(--of-kirmizi-kenar);
    border-radius: var(--of-r-alan);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--of-kirmizi);
}

.of-uyari--bilgi {
    background: var(--of-mavi-silik);
    border-color: var(--of-mavi-halka);
    color: var(--of-yazi-2);
}

.of-uyari--basari {
    background: var(--of-yesil-zemin);
    border-color: var(--of-yesil-kenar);
    color: var(--of-yesil-yazi);
}

.of-uyari__ikon { flex: 0 0 auto; margin-top: 1px; }
.of-uyari__govde { min-width: 0; }

.of-uyari__baslik {
    font-weight: 620;
    margin-bottom: 3px;
}

.of-uyari ul {
    margin: 4px 0 0;
    padding-left: 16px;
    list-style: disc;
}

.of-uyari li { margin-bottom: 2px; }
.of-uyari li:last-child { margin-bottom: 0; }

/* İkinci paragraf (ör. "doğrulama e-postasını yeniden gönder" satırı) */
.of-uyari p + p { margin-top: 5px; }

.of-uyari a {
    color: inherit;
    font-weight: 620;
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   12. Durum ikonu (başarı ekranları)
   -------------------------------------------------------------------------- */

.of-durum {
    display: grid;
    place-items: center;
    width: clamp(56px, 8vh, 66px);
    height: clamp(56px, 8vh, 66px);
    margin: 0 auto var(--of-bosluk-md);
    border-radius: 50%;
    color: var(--of-mavi);
    background: var(--of-mavi-silik);
    border: 1px solid var(--of-mavi-halka);
}

.of-durum--basari {
    color: var(--of-yesil-yazi);
    background: var(--of-yesil-zemin);
    border-color: var(--of-yesil-kenar);
}

/* --------------------------------------------------------------------------
   13. Alt bağlantı satırı
   -------------------------------------------------------------------------- */

.of-alt-baglanti {
    margin-top: var(--of-bosluk-lg);
    text-align: center;
    font-size: 14.5px;
    color: var(--of-yazi-2);
}

.of-alt-baglanti a {
    display: inline-block;
    padding: 4px 3px;
    color: var(--of-mavi);
    font-weight: 590;
    text-decoration: none;
}

@media (hover: hover) {
    .of-alt-baglanti a:hover { text-decoration: underline; }
}

/* Buton altı güvence satırı */
.of-guvence {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--of-yazi-3);
    text-align: center;
}

.of-guvence svg { flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   14. Bot tuzağı
   --------------------------------------------------------------------------
   `display: none` DEĞİL: en bilinen gizleme işareti, basit botlar bile onu
   atlıyor. Ekran dışına taşımak alanı doldurulabilir bırakıyor; insan hiç
   görmüyor, `tabindex="-1"` ve `aria-hidden` ile sekme ve okuyucu da geçiyor.
   -------------------------------------------------------------------------- */

.of-tuzak {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   15. WhatsApp destek düğmesi
   --------------------------------------------------------------------------
   Sayfa akışının dışında (fixed): form doldurulurken gözden kaybolmuyor.
   Dar ekranda yalnızca ikon — `aria-label` tanımı taşıdığı için erişilebilir
   kalıyor ve ekranın önemli bir kısmını kapatmıyor.
   -------------------------------------------------------------------------- */

.of-destek {
    position: fixed;
    right: max(16px, var(--of-g-sag));
    bottom: calc(16px + var(--of-g-alt));
    z-index: 50;

    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 15px 11px 12px;
    color: #fff;
    background: #25d366;
    border-radius: var(--of-r-tam);
    font-size: 13.5px;
    font-weight: 590;
    line-height: 1;
    text-decoration: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .22),
        0 6px 18px -6px rgba(37, 211, 102, .55),
        0 2px 6px rgba(16, 24, 40, .12);
    transition: transform var(--of-gecis-h), background var(--of-gecis-h);
}

@media (hover: hover) {
    .of-destek:hover { background: #1eb85a; transform: translateY(-1px); }
}

.of-destek:active { transform: scale(.96); }
.of-destek svg { width: 21px; height: 21px; flex: 0 0 auto; }

@media (max-width: 559px) {
    .of-destek { padding: 12px; }
    .of-destek__metin {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* --------------------------------------------------------------------------
   16. Kısa ekran ince ayarı
   --------------------------------------------------------------------------
   `clamp(..vh..)` ölçeği çoğu işi yapıyor; burada yalnızca ölçeklenemeyen
   şeyler kısılıyor: ikincil açıklama satırları ve marka bloğu.

   700px yükseklik = 13" dizüstünde tarayıcı çubukları açıkken kalan alan.
   Üyelik formu (en uzun form) o yükseklikte kaydırma gerektirmeden sığmalı.
   -------------------------------------------------------------------------- */

/**
 * TELEFON GENİŞLİĞİ: BLOK ARALIKLARI DAHA SIKI.
 *
 * Dar ekranda üyelik formu iki kolona geçemiyor, yani beş alan beş satır.
 * Aralıkları geniş ekrandaki ölçüde bırakmak bölgeyi 15-20px taşırıyordu.
 * Telefonda alanlar tam genişlikte ve tek tek büyük olduğu için daha sıkı
 * bir dikey ritim okunabilirliği düşürmüyor — tersine, form bir bütün
 * olarak tek ekrana giriyor.
 */
@media (max-width: 559px) {
    :root {
        --of-bosluk-lg: clamp(10px, 1.7vh, 16px);
        --of-bosluk-md: clamp(6px,  0.9vh, 9px);
    }

    /* Etiket satırı telefonda daha sıkı: beş alanda ~10px kazanç */
    .of-alan__etiket { margin-bottom: 4px; font-size: 13px; }
}

@media (max-height: 700px) {
    .of-ust { padding-bottom: var(--of-bosluk-md); }
    .of-marka__isaret { width: 30px; height: 30px; border-radius: 10px; }
    .of-marka__ad { font-size: 15px; }

    /* Kart--genis = üyelik: açıklama satırı yerini forma bırakıyor */
    .of-kart--genis .of-baslik p { display: none; }
    .of-kart--genis .of-guvence { display: none; }

    .of-baslik { margin-bottom: var(--of-bosluk-md); }
    .of-alt-baglanti { margin-top: var(--of-bosluk-md); }
}

/**
 * KISA EKRAN (≤700px): girdi 44px, düğme 46px, etiket boşluğu 4px.
 *
 * Klasik düzende her alan bir ETİKET SATIRI daha taşıyor (~20px). Alan sayısı
 * arttıkça bu birikiyor: üyelik formunda beş alan = 100px. `clamp()` alt
 * sınırlarına ek olarak kısa ekranlarda etiket boşluğunu da kısmak, ölçülen
 * taşmayı kapatmak için gerekiyordu.
 *
 * 44px WCAG 2.5.5'in en küçük dokunma hedefine EŞİT: eşiğin altına inilmiyor.
 * Etiket kutunun dışında olduğu için dokunma hedefi girdinin kendi
 * yüksekliği — yüzen etiketli sürümde olduğu gibi paylaşılmıyor.
 *
 * 700px eşiği, tarayıcı çubukları açık bir 13" dizüstünde ve en küçük
 * iPhone'da (375×667) kalan yüksekliğe denk düşüyor.
 */
@media (max-height: 700px) {
    :root {
        --of-alan-h: 44px;
        --of-btn-h: 46px;
    }

    .of-alan__etiket { margin-bottom: 4px; font-size: 13px; }
}

/**
 * ÇOK KISA EKRAN (≤640px): ikincil metinler kalkıyor.
 *
 * 1280×620 gibi bir pencerede (yatay tutulan tablet, çok araç çubuklu
 * tarayıcı) giriş formu 9px taşıyordu. Feda edilen iki satır da ANA AKIŞIN
 * DIŞINDA: başlık altı açıklaması ve düğme altı güvence satırı. Bilginin
 * kendisi kaybolmuyor — "kart bilgisi istemiyoruz" üstteki rozette,
 * açıklama da koşullar sayfasında duruyor. Formun kendisi hiç kısılmıyor.
 */
@media (max-height: 640px) {
    .of-baslik p { display: none; }
    .of-guvence { display: none; }
}

@media (max-height: 600px) {
    .of-alt { font-size: 11px; }
}