/* ==========================================================================
   OtoGonderi.com.tr · giriş ekranları
   temel.css üzerine kurulur.

   Düzen: her genişlikte TEK KOLON, form kartı ortada.

   Soldaki tanıtım paneli kaldırıldı. Bu sayfalara gelen kişi kayıt olmaya ya
   da giriş yapmaya geliyor; tanıtım kartları kararı hızlandırmıyor, yalnızca
   formu ekranın yarısına sıkıştırıyordu. Tanıtım içeriği index.php'de.
   ========================================================================== */

body {
    min-height: 100vh;
    min-height: 100dvh;
    /* Mobilde kart zeminle aynı renk: form tam ekran uygulama gibi dursun */
    background: var(--yuzey);
}

/* --------------------------------------------------------------------------
   1. Kabuk
   -------------------------------------------------------------------------- */

.uygulama {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: 1fr;
}

.uygulama__ana {
    display: flex;
    flex-direction: column;
    padding: calc(22px + var(--guvenli-ust)) max(20px, var(--guvenli-sag))
             calc(20px + var(--guvenli-alt)) max(20px, var(--guvenli-sol));
    min-width: 0;
}

/* Üstteki marka bloğu */
.marka--auth {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    align-self: center;
    margin-bottom: 26px;
    color: var(--yazi-guclu);
    text-decoration: none;
    flex: 0 0 auto;
}

.marka__isaret {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    background: linear-gradient(150deg, var(--marka-500), var(--marka-700));
    color: #fff;
    border-radius: 12px;
    box-shadow: var(--golge-vurgu);
}

.marka__ad {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--yazi-guclu);
}

/**
 * Kart margin:auto ile ortalanıyor, justify-content:center ile değil.
 * Sebep: içerik ekrandan uzun olduğunda justify-content:center taşan kısmı
 * kırpar ve yukarı kaydırılamaz hale getirir. margin:auto kırpmaz.
 */
.kart {
    width: 100%;
    max-width: 404px;
    margin: auto;
    flex: 0 0 auto;
}

.kart--form { max-width: 496px; }

/* Alt künye */
.dip {
    flex: 0 0 auto;
    margin-top: 26px;
    text-align: center;
    font-size: 12.5px;
    color: var(--yazi-silik);
}

.dip a {
    display: inline-block;
    padding: 4px 2px;
    color: var(--yazi-soluk);
    text-decoration: none;
}
@media (hover: hover) {
    .dip a:hover { color: var(--vurgu); text-decoration: underline; }
}

/* --------------------------------------------------------------------------
   2. Başlık
   -------------------------------------------------------------------------- */

.baslik {
    margin-bottom: 26px;
    text-align: center;
}

.baslik h1 {
    margin-bottom: 7px;
    font-size: clamp(22px, 6vw, 26px);
    font-weight: 700;
    letter-spacing: -.032em;
}

.baslik p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--yazi-soluk);
}

/* --------------------------------------------------------------------------
   3. Forma özel küçük düzeltmeler
   (alanların kendisi temel.css'te)
   -------------------------------------------------------------------------- */

.kart--form .baslik { margin-bottom: 20px; }
.kart--form .alan { margin-bottom: 13px; }

.onay--form { margin: 14px 0 18px; }

/* --------------------------------------------------------------------------
   3b. Kayıt formu: alanlar ikili satırlarda
   -------------------------------------------------------------------------- */

/**
 * Kayıt formu beş alanlı ve tek kolonda dikey olarak uzuyordu; masaüstünde
 * "Hesap oluştur" düğmesi ekranın altında kalıyordu.
 *
 * Düzen (≥620px):
 *   Ad soyad | Telefon
 *   E-posta            (tam genişlik — uzun adresler sığsın)
 *   Şifre    | Şifre tekrar
 *
 * Beş satır yerine üç satır: yaklaşık iki alan boyu kısalıyor.
 *
 * NEDEN ÇALIŞMIYORDU
 * Markup'ta `izgara--iki` zaten vardı ama devreye girmiyordu. temel.css'teki
 * kural `repeat(auto-fit, minmax(232px, 1fr))`; iki kolon için 232+232+14 =
 * 478px içerik genişliği gerekiyor. Kartın eski ölçüsü 496px, yatay dolgusu
 * 2x32px → içerik yalnızca 432px. Eşiğin altında kaldığı için auto-fit tek
 * kolona düşüyordu.
 *
 * İki şey birlikte düzeltiliyor: kart 560px'e genişletiliyor ve kolonlar
 * auto-fit yerine AÇIK olarak ikiye sabitleniyor. Açık olması, ileride
 * dolgu ya da genişlik değişirse düzenin sessizce tek kolona düşmesini
 * engelliyor.
 *
 * Kapsam `.kart--form` ile sınırlı: `izgara--iki` panelde de kullanılıyor,
 * oradaki davranış değişmemeli.
 */
@media (min-width: 620px) {
    .kart--form { max-width: 560px; }

    .kart--form .izgara--iki {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

/**
 * Izgaradan sonraki boşluk.
 *
 * temel.css ızgara içindeki alanların alt boşluğunu sıfırlıyor
 * (`.izgara > .alan { margin-bottom: 0 }`) ama ızgaranın kendisine boşluk
 * vermiyor. Sonuç: ikili satırdan sonra gelen alan diğerlerinden daha dar
 * aralıkla yapışıyordu — tek kolona düştüğünde de böyleydi, yani bu eski bir
 * tutarsızlık. Alanların aralığıyla aynı değeri veriyoruz.
 */
.kart--form .izgara { margin-bottom: 13px; }

.alt-baglanti {
    margin-top: 24px;
    text-align: center;
    font-size: 15px;
    color: var(--yazi-soluk);
}

/* inline-block + dolgu: 18px yükseklikte bir bağlantı telefonda zor tıklanıyor */
.alt-baglanti a {
    display: inline-block;
    padding: 5px 4px;
    color: var(--vurgu);
    font-weight: 600;
    text-decoration: none;
}

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

/* Formlar arasında ayraç ("veya" çizgisi) */
.ayrac {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    font-size: 13px;
    color: var(--yazi-silik);
}

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

/* --------------------------------------------------------------------------
   4. Geniş ekran
   -------------------------------------------------------------------------- */

@media (min-width: 620px) {
    body { background: var(--zemin); }

    .kart {
        padding: 34px 32px;
        background: var(--yuzey);
        border: 1px solid var(--kenar);
        border-radius: var(--r-xl);
        box-shadow: var(--golge-md);
    }

    .kart--form { padding: 30px 32px; }
}

/**
 * Geniş ekranda kart dikeyde ortalanıyor.
 *
 * Tanıtım paneli kaldırıldığı için ızgara tek kolon kaldı; kart artık
 * ekranın ortasında duruyor. Marka bloğu da her genişlikte görünür kalıyor —
 * eskiden soldaki panelde tekrar etmesin diye ≥960px'te gizleniyordu, panel
 * gidince sayfada hiç marka kalmıyordu.
 */
@media (min-width: 960px) {
    .uygulama__ana {
        justify-content: center;
        padding: 40px;
    }

    .kart { margin: 0 auto; }
}

/**
 * Kısa ekranlar: yatay telefon, çok sekmeli dizüstü.
 * Aralıkları kısarak formun kaydırma gerektirmeden sığmasını sağlar.
 * min-width bloklarından SONRA gelmeli, aksi halde kart dolgusu ezilmez.
 */
@media (max-height: 700px) and (min-width: 620px) {
    :root { --alan-h: 44px; }

    .uygulama__ana {
        padding-top: calc(14px + var(--guvenli-ust));
        padding-bottom: calc(14px + var(--guvenli-alt));
    }

    .kart { padding: 24px 28px; }
    .kart--form { padding: 20px 28px; }

    .marka--auth { margin-bottom: 16px; }

    .baslik { margin-bottom: 16px; }
    .baslik h1 { font-size: 21px; }

    .alan { margin-bottom: 12px; }
    .alan > label { margin-bottom: 5px; }

    .form-satir { margin: 2px 0 16px; }
    .alt-baglanti { margin-top: 16px; font-size: 14px; }
    .dip { margin-top: 16px; }
    .durum-ikon { width: 56px; height: 56px; margin-bottom: 14px; }

    /* Kayıt formu en uzun form, biraz daha sıkı */
    .kart--form .baslik { margin-bottom: 12px; }
    .kart--form .baslik p { display: none; }
    .kart--form .alan { margin-bottom: 9px; }
    /* İkili satırın alt boşluğu da alanlarla aynı ölçüde kısılıyor */
    .kart--form .izgara { margin-bottom: 9px; }
    .kart--form .guc-metin { margin-top: 5px; font-size: 12px; }
    .kart--form .onay--form { margin: 9px 0 12px; }
    .kart--form .alt-baglanti { margin-top: 13px; }
}

/* --------------------------------------------------------------------------
   6. Metin sayfaları (kullanım koşulları, gizlilik politikası)

   Aynı auth kabuğunu kullanır ama kart daha geniş: uzun metinde 400px'lik
   sütun satır başına 6-7 kelime düşürüp okumayı yoruyor.
   -------------------------------------------------------------------------- */

.kart--metin { max-width: 760px; }

.metin {
    font-size: 15px;
    line-height: 1.72;
    color: var(--yazi-soluk);
}

.metin h2 {
    margin: 26px 0 8px;
    font-size: 17px;
    font-weight: 650;
    letter-spacing: -.01em;
    color: var(--yazi-guclu);
}

.metin h2:first-child { margin-top: 0; }

.metin p { margin: 0 0 12px; }

.metin ul {
    margin: 0 0 12px;
    padding-left: 20px;
}

.metin li { margin-bottom: 6px; }

.metin a { color: var(--vurgu); }

.metin__tarih {
    margin: 0 0 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--kenar);
    font-size: 13px;
    color: var(--yazi-silik);
}

.metin__uyari {
    margin: 0 0 20px;
    padding: 12px 14px;
    background: var(--zemin);
    border: 1px solid var(--kenar);
    border-radius: var(--r-md);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--yazi-silik);
}

@media (min-width: 620px) {
    .kart--metin { padding: 34px 38px; }
}