/*
 * GİRİŞ ALANI — giriş, kayıt ve şifre ekranlarının ortak premium soft teması
 * (24.09.2026, kullanıcı: "login ve kayıt ol tasarımlarını birbiriyle eşle").
 *
 * `layouts.auth` içindeki eski <style> bloğundan SONRA yüklenir; renk
 * jetonlarını tanımlar, eski `.auth-*` sınıflarını (şifre ekranları) aynı
 * görünüme taşır ve yeni `ga-*` kabuğunu tanımlar.
 *
 * İKİ TEMA (25.09.2026, kullanıcı: "aydınlık temaya uyarla, varsayılan
 * aydınlık gelsin, kullanıcı dilerse değiştirebilsin"): `:root` AYDINLIK,
 * koyu mavi cam `html[data-theme="dark"]` altında YALNIZ jeton değişimiyle.
 * Bileşen kuralları iki temada ortaktır; bileşende sabit renk yazılmaz.
 * Tema anahtarı panelle ortak (`localStorage.theme`): ilk kurulum
 * `giris-tema.js` (<head>), düğme `giris-alani.js`.
 *
 * Giriş ↔ kayıt geçişi: tarayıcının sayfalar arası görünüm geçişi
 * (`@view-transition`). İki ekranda da sol panel `ga-tanitim`, form kartı
 * `ga-form` adını taşır. Desteklemeyen tarayıcıda kartlar yalnız hafifçe
 * belirir. Hareket azaltma tercihinde hiçbir animasyon çalışmaz.
 *
 * ⚠ `transition` içinde RENK özelliği yok (tema değişince eski renk
 *   kilitleniyordu); tema geçişi görünüm geçişiyle çapraz geçer (TEMA).
 */

/* ══════════════ JETONLAR ══════════════
   ⚠ Sistem tercihine (prefers-color-scheme) BAKILMAZ: kullanıcı kararı
     "varsayılan aydınlık". Ton jetonları kanal üçlüsüdür:
     `rgb(var(--ga-k-mavi) / .12)`; `-k` zemin tonu, `-t` yazı/ikon tonu. */
:root {
    color-scheme: light;

    /* Yazı */
    --ga-yazi:          rgb(15 23 42);
    --ga-soluk:         rgb(71 85 105);
    --ga-silik:         rgb(100 116 139);
    --ga-ikon:          rgb(100 116 139);
    --ga-yer-tutucu:    rgb(148 163 184);

    /* Çizgi */
    --ga-cizgi:         rgb(15 23 42 / .08);
    --ga-cizgi-g:       rgb(15 23 42 / .15);
    --ga-cizgi-v:       rgb(59 130 246 / .26);

    /* Yüzey */
    --ga-zemin:         rgb(245 247 251);
    --ga-panel:         rgb(255 255 255 / .74);
    --ga-panel-2:       rgb(255 255 255);
    --ga-yuzey:         rgb(248 250 252);
    --ga-yuzey-2:       rgb(248 250 252);
    --ga-kutucuk:       rgb(255 255 255);
    --ga-kesif-zemin:   rgb(246 248 252 / .88);
    --ga-girdi:         rgb(243 245 249);
    --ga-girdi-odak:    rgb(255 255 255);
    --ga-girdi-ic:      inset 0 1px 2px rgb(15 23 42 / .04);
    --ga-acilir:        rgb(255 255 255);
    --ga-otodoldur:     rgb(235 242 255);
    --ga-vurgu:         rgb(59 130 246 / .08);
    --ga-vurgu-g:       rgb(59 130 246 / .14);
    --ga-tema-zemin:    rgb(255 255 255 / .92);
    --ga-cta-zemin:
        linear-gradient(135deg, rgb(59 130 246 / .08), rgb(139 92 246 / .07)),
        rgb(255 255 255);

    /* Marka */
    --ga-mavi:          rgb(59 130 246);
    --ga-mavi-a:        rgb(37 99 235);
    --ga-mavi-h:        rgb(29 78 216);
    --ga-odak:          rgb(59 130 246 / .65);
    --ga-odak-hat:      rgb(37 99 235);
    --ga-halka:         rgb(59 130 246 / .16);
    --ga-gunes:         rgb(217 119 6);
    --ga-ay:            rgb(147 197 253);
    --ga-degrade:       linear-gradient(145deg, rgb(72 149 255), rgb(124 58 237));
    --ga-degrade-gonder: linear-gradient(180deg, rgb(72 149 255) 0%, rgb(37 99 235) 100%);
    --ga-degrade-mor:   linear-gradient(135deg, rgb(139 92 246), rgb(79 70 229));
    --ga-gonder-cizgi:  rgb(147 197 253 / .35);
    --ga-beyaz:         rgb(255 255 255);

    /* Gölge — aydınlıkta yumuşak ve geniş */
    --ga-golge:         0 1px 2px rgb(15 23 42 / .04), 0 24px 60px -22px rgb(30 58 138 / .2);
    --ga-golge-k:       0 1px 2px rgb(15 23 42 / .04), 0 8px 22px -12px rgb(30 58 138 / .18);
    --ga-golge-k-h:     0 2px 4px rgb(15 23 42 / .04), 0 14px 28px -12px rgb(30 58 138 / .26);
    --ga-golge-acilir:  0 18px 44px -10px rgb(15 23 42 / .2);
    --ga-golge-gonder:  0 10px 24px -8px rgb(37 99 235 / .55), inset 0 1px 0 rgb(255 255 255 / .25);
    --ga-golge-gonder-h: 0 14px 30px -8px rgb(37 99 235 / .62), inset 0 1px 0 rgb(255 255 255 / .25);
    --ga-golge-cta:     0 10px 26px -12px rgb(37 99 235 / .3);
    --ga-golge-cta-h:   0 16px 34px -12px rgb(37 99 235 / .4);
    --ga-ic-isik:       inset 0 1px 0 rgb(255 255 255 / .9);
    --ga-bulanik:       blur(18px) saturate(160%);
    --ga-parilti:       rgb(255 255 255 / .75);

    /* Tanıtım süsü */
    --ga-sus-halka:     rgb(59 130 246 / .16);
    --ga-sus-isik:      rgb(59 130 246 / .08);
    --ga-sus-isik-2:    rgb(59 130 246 / .04);
    --ga-sus-hale:      rgb(139 92 246 / .12);

    /* Kayıt önizleme (süs) */
    --ga-oniz-zemin:    linear-gradient(160deg, rgb(255 255 255), rgb(246 248 252));
    --ga-oniz-yan:      rgb(241 245 249);
    --ga-oniz-golge:    0 -10px 36px -8px rgb(30 58 138 / .18);

    /* Zemin: kırık beyaz + soluk mavi/lila lekeler; gren yok */
    --ga-gren: none;
    --ga-zemin-desen:
        radial-gradient(ellipse 55% 45% at 0% 0%,     rgb(59 130 246 / .11), transparent 65%),
        radial-gradient(ellipse 45% 40% at 100% 0%,   rgb(139 92 246 / .08), transparent 65%),
        radial-gradient(ellipse 55% 50% at 100% 100%, rgb(56 189 248 / .08), transparent 65%),
        radial-gradient(ellipse 45% 45% at 10% 100%,  rgb(99 102 241 / .07), transparent 65%),
        linear-gradient(180deg, rgb(248 250 253) 0%, rgb(242 245 250) 100%);

    /* Tonlar (madde, duyuru, keşif kutucukları) */
    --ga-k-mavi:    59 130 246;   --ga-t-mavi:    37 99 235;
    --ga-k-mor:     139 92 246;   --ga-t-mor:     124 58 237;
    --ga-k-yesil:   20 184 166;   --ga-t-yesil:   13 148 136;
    --ga-k-amber:   245 158 11;   --ga-t-amber:   180 83 9;
    --ga-k-zumrut:  16 185 129;   --ga-t-zumrut:  5 150 105;
    --ga-k-kirmizi: 239 68 68;    --ga-t-kirmizi: 220 38 38;
    --ga-a-zemin:   .14;
    --ga-a-zemin-2: .05;
    --ga-a-cizgi:   .22;
    --ga-a-golge:   .16;
    --ga-a-duyuru:  .1;
    --ga-a-tur:     .12;
    --ga-a-tur-2:   .06;

    /* Durum kutuları */
    --ga-hata-yazi:    rgb(185 28 28);
    --ga-hata-zemin:   rgb(254 242 242);
    --ga-hata-cizgi:   rgb(254 202 202);
    --ga-basari-yazi:  rgb(4 120 87);
    --ga-basari-zemin: rgb(236 253 245);
    --ga-basari-cizgi: rgb(167 243 208);

    --ga-egri:        cubic-bezier(.22, .8, .24, 1);

    /* Eski düzenin jetonları (şifre ekranları, 419) aynı kaynaktan. */
    --c-bg:          var(--ga-zemin);
    --c-surface:     var(--ga-panel-2);
    --c-border:      var(--ga-cizgi);
    --c-border-h:    var(--ga-cizgi-g);
    --c-primary:     var(--ga-mavi);
    --c-primary-h:   var(--ga-mavi-h);
    --c-accent:      var(--ga-mavi-a);
    --c-violet:      var(--ga-mavi-a);
    --c-blue:        var(--ga-mavi);
    --c-text:        var(--ga-yazi);
    --c-muted:       var(--ga-soluk);
    --c-muted-l:     rgb(51 65 85);
    --c-input-bg:    var(--ga-girdi);
    --c-input-bdr:   var(--ga-cizgi);
}

/* Koyu mavi cam (24.09.2026 görünümü) — yalnız jetonlar. */
html[data-theme="dark"] {
    color-scheme: dark;

    --ga-yazi:          rgb(238 244 255);
    --ga-soluk:         rgb(159 178 214);
    --ga-silik:         rgb(159 178 214 / .6);
    --ga-ikon:          rgb(147 170 214 / .85);
    --ga-yer-tutucu:    rgb(147 170 214 / .55);

    --ga-cizgi:         rgb(96 165 250 / .2);
    --ga-cizgi-g:       rgb(96 165 250 / .38);
    --ga-cizgi-v:       rgb(96 165 250 / .32);

    --ga-zemin:         rgb(4 10 30);
    --ga-panel:         rgb(12 24 58 / .55);
    --ga-panel-2:       rgb(10 20 50 / .68);
    --ga-yuzey:         rgb(255 255 255 / .03);
    --ga-yuzey-2:       rgb(6 14 36 / .45);
    --ga-kutucuk:       rgb(8 17 42 / .55);
    --ga-kesif-zemin:   rgb(8 17 42 / .4);
    --ga-girdi:         rgb(14 28 64 / .6);
    --ga-girdi-odak:    rgb(18 36 80 / .78);
    --ga-girdi-ic:      inset 0 1px 0 rgb(255 255 255 / .03);
    --ga-acilir:        rgb(10 20 48 / .98);
    --ga-otodoldur:     rgb(15 30 68);
    --ga-vurgu:         rgb(96 165 250 / .1);
    --ga-vurgu-g:       rgb(59 130 246 / .18);
    --ga-tema-zemin:    rgb(10 20 50 / .8);
    --ga-cta-zemin:
        linear-gradient(135deg, rgb(59 130 246 / .16), rgb(124 58 237 / .12)),
        rgb(8 17 42 / .6);

    --ga-mavi-a:        rgb(96 165 250);
    --ga-mavi-h:        rgb(147 197 253);
    --ga-odak:          rgb(96 165 250 / .75);
    --ga-odak-hat:      rgb(147 197 253);
    --ga-halka:         rgb(59 130 246 / .18);

    --ga-golge:         0 30px 80px rgb(0 0 0 / .45);
    --ga-golge-k:       0 0 #0000;
    --ga-golge-k-h:     0 10px 24px rgb(0 0 0 / .28);
    --ga-golge-acilir:  0 18px 40px rgb(2 6 23 / .55);
    --ga-golge-gonder:  0 12px 30px rgb(37 99 235 / .45), inset 0 1px 0 rgb(255 255 255 / .25);
    --ga-golge-gonder-h: 0 16px 36px rgb(37 99 235 / .55), inset 0 1px 0 rgb(255 255 255 / .25);
    --ga-golge-cta:     0 10px 28px rgb(37 99 235 / .16);
    --ga-golge-cta-h:   0 16px 38px rgb(37 99 235 / .3);
    --ga-ic-isik:       inset 0 1px 0 rgb(255 255 255 / .06);
    --ga-bulanik:       blur(24px) saturate(140%);
    --ga-parilti:       rgb(255 255 255 / .09);

    --ga-sus-halka:     rgb(96 165 250 / .16);
    --ga-sus-isik:      rgb(59 130 246 / .14);
    --ga-sus-isik-2:    rgb(59 130 246 / .08);
    --ga-sus-hale:      rgb(37 99 235 / .34);

    --ga-oniz-zemin:    linear-gradient(160deg, rgb(15 28 64 / .94), rgb(8 17 42 / .96));
    --ga-oniz-yan:      rgb(6 14 36 / .6);
    --ga-oniz-golge:    0 -12px 44px rgb(37 99 235 / .26);

    --ga-gren: block;
    --ga-zemin-desen:
        radial-gradient(ellipse 60% 50% at 0% 0%,     rgb(37 99 235 / .34), transparent 60%),
        radial-gradient(ellipse 50% 40% at 100% 0%,   rgb(59 130 246 / .2),  transparent 60%),
        radial-gradient(ellipse 60% 55% at 100% 100%, rgb(29 78 216 / .3),   transparent 60%),
        radial-gradient(ellipse 45% 45% at 15% 100%,  rgb(79 70 229 / .18),  transparent 60%),
        linear-gradient(160deg, rgb(6 14 40) 0%, rgb(5 12 34) 50%, rgb(4 9 28) 100%);

    --ga-t-mavi:    96 165 250;
    --ga-t-mor:     167 139 250;
    --ga-t-yesil:   45 212 191;
    --ga-t-amber:   251 191 36;
    --ga-t-zumrut:  52 211 153;
    --ga-t-kirmizi: 248 113 113;
    --ga-a-zemin:   .34;
    --ga-a-zemin-2: .14;
    --ga-a-cizgi:   .38;
    --ga-a-golge:   .24;
    --ga-a-duyuru:  .12;
    --ga-a-tur:     .2;
    --ga-a-tur-2:   .14;

    --ga-hata-yazi:    rgb(252 165 165);
    --ga-hata-zemin:   rgb(239 68 68 / .1);
    --ga-hata-cizgi:   rgb(239 68 68 / .28);
    --ga-basari-yazi:  rgb(110 231 183);
    --ga-basari-zemin: rgb(52 211 153 / .09);
    --ga-basari-cizgi: rgb(52 211 153 / .26);

    --c-muted-l:     rgb(195 210 238);
}

@view-transition { navigation: auto; }

/* ══════════════ SAYFA TEMELİ ══════════════
   Gövde dikey esnek: sayfa kalan yeri doldurur, kurumsal imza altta akışta
   kalır (sabit konum değil; telefonda içeriğin üstüne binmez). */
body {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background-color: var(--ga-zemin);
    background-image: var(--ga-zemin-desen);
}

/* Eski bloğun gren dokusu yalnız koyu temada (aydınlıkta kirli görünüyordu). */
body::before { display: var(--ga-gren); }

.auth-page {
    flex: 1 0 auto;
    min-height: 0;
}

/* Eski ekranlar (şifre, 419, başvuru alındı): kart kalan yerde ortalı. */
.auth-page > .auth-right {
    flex: 1 0 auto;
    min-height: 0;
}

/* ── Kurumsal imza (layouts.auth, tek yer) ── */
.ga-imza {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    padding: 6px calc(16px + env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    color: var(--ga-silik);
}

.ga-imza a {
    font-weight: 600;
    color: var(--ga-soluk);
    text-decoration: none;
}

.ga-imza a:hover {
    color: var(--ga-mavi-a);
    text-decoration: underline;
}

/* ══════════════ WHATSAPP DESTEK (25.09.2026) ══════════════
   SuperAdmin açtıysa sağ altta yüzen düğme (`layouts.auth`). Marka yeşili iki
   temada aynı. Varsayılan yuvarlak ikon; "WhatsApp destek" yazılı hap yalnız
   çok geniş ekranda — daha darda hap form kartının köşesine binerdi. */
.ga-whatsapp {
    position: fixed;
    right: calc(18px + env(safe-area-inset-right));
    bottom: calc(18px + env(safe-area-inset-bottom));
    z-index: 30;
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 999px;
    background: rgb(37 211 102);
    color: rgb(255 255 255);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 26px -8px rgb(22 163 74 / .55);
    -webkit-tap-highlight-color: transparent;
    transition: transform .2s var(--ga-egri);
}

.ga-whatsapp:hover { transform: translateY(-2px); }

.ga-whatsapp:active { transform: scale(.96); }

.ga-whatsapp:focus-visible {
    outline: 2px solid var(--ga-odak-hat);
    outline-offset: 3px;
}

.ga-whatsapp-ikon {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

/* Yazı ekran okuyucuda kalır, gözle görünmez (dar ekran). */
.ga-whatsapp-metin {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (min-width: 1560px) {
    .ga-whatsapp {
        width: auto;
        height: 48px;
        padding: 0 18px 0 14px;
    }

    .ga-whatsapp-ikon {
        width: 22px;
        height: 22px;
    }

    .ga-whatsapp-metin {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
    }
}

/* Alt alta düzende düğme sayfanın son satırını (imza) örtmesin. */
@media (max-width: 960px) {
    .ga-whatsapp ~ .ga-imza { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}

/* ══════════════ TEMA ══════════════ */

/* Tema düğmesi — sağ üst; masaüstünde sabit, telefonda sayfayla kayar
   (DUYARLI). İkon `html[data-theme]`den: aydınlıkta güneş, koyuda ay. */
.ga-tema {
    position: fixed;
    top: calc(16px + env(safe-area-inset-top));
    right: calc(16px + env(safe-area-inset-right));
    z-index: 30;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--ga-cizgi-g);
    border-radius: 999px;
    background: var(--ga-tema-zemin);
    color: var(--ga-yazi);
    box-shadow: var(--ga-golge-k);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .2s var(--ga-egri);
}

.ga-tema:hover {
    border-color: var(--ga-odak);
    transform: translateY(-1px);
}

.ga-tema:active { transform: scale(.94); }

.ga-tema:focus-visible {
    outline: 2px solid var(--ga-odak-hat);
    outline-offset: 3px;
}

.ga-tema svg {
    grid-area: 1 / 1;
    width: 20px;
    height: 20px;
    transition: opacity .25s ease, transform .45s cubic-bezier(.34, 1.45, .5, 1);
}

.ga-tema-gunes { color: var(--ga-gunes); }

.ga-tema-ay {
    color: var(--ga-ay);
    opacity: 0;
    transform: rotate(-90deg) scale(.4);
}

html[data-theme="dark"] .ga-tema-gunes {
    opacity: 0;
    transform: rotate(90deg) scale(.4);
}

html[data-theme="dark"] .ga-tema-ay {
    opacity: 1;
    transform: none;
}

/* Tema değişimi: `giris-alani.js` aynı belge görünüm geçişi açar; ekranın
   eski ve yeni görüntüsü yumuşakça çapraz geçer. Adlı kartlar bu sırada
   adsız (yoksa sayfa geçişinin 3B dönüşü oynardı). */
html.is-tema-gecis .ga-tanitim,
html.is-tema-gecis .ga-form-kart,
html.is-tema-gecis .auth-card { view-transition-name: none; }

html.is-tema-gecis::view-transition-new(root) { animation: ga-tema-gir .4s ease both; }

@keyframes ga-tema-gir {
    from { opacity: 0; }
}

/* ── Logo: iki tema logosu basılır, görüneni burada seçilir
   (`auth.partials.kart-logosu`; panel üst barıyla aynı kalıp). ── */
.auth-card-logo .ga-logo-koyu,
.auth-card-logo-fb { display: none; }

html[data-theme="dark"] .auth-card-logo .ga-logo-acik { display: none; }
html[data-theme="dark"] .auth-card-logo .ga-logo-koyu { display: block; }

/* Görünen temanın logosu kırıksa SVG yedeği. */
html:not([data-theme="dark"]) .auth-card-logo.is-acik-kirik .auth-card-logo-fb,
html[data-theme="dark"] .auth-card-logo.is-koyu-kirik .auth-card-logo-fb { display: flex; }

.auth-card-logo-fb { color: var(--ga-mavi-a); }

/* ══════════════ SAYFA KABUĞU ══════════════ */
.ga-sayfa {
    align-items: center;
    justify-content: center;
    padding: 36px 24px;
}

/* Kayıt: dar tanıtım + geniş form. */
.ga-kabuk {
    width: 100%;
    max-width: 1220px;
    display: grid;
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.12fr);
    gap: 18px;
    align-items: stretch;
}

/* ⚠ Giriş kabuğu kayıtla AYNI oranda (24.09.2026): eskiden ters orandaydı
   (geniş tanıtım + dar form) ve geçişte kartlar esneyerek kötü görünüyordu. */

/* ── Ortak panel ─────────────────────────────────────────────────── */
.ga-tanitim,
.ga-form-kart {
    position: relative;
    border: 1px solid var(--ga-cizgi);
    border-radius: 26px;
    background: var(--ga-panel);
    backdrop-filter: var(--ga-bulanik);
    -webkit-backdrop-filter: var(--ga-bulanik);
    box-shadow: var(--ga-golge), var(--ga-ic-isik);
}

.ga-tanitim { view-transition-name: ga-tanitim; }

.ga-form-kart,
.auth-card { view-transition-name: ga-form; }

/* ══════════════ SOL: TANITIM ══════════════ */
.ga-tanitim {
    display: flex;
    flex-direction: column;
    padding: 44px 40px 0;
    overflow: hidden;
}

.ga-kabuk.is-giris .ga-tanitim { padding-bottom: 28px; }

/* Süs: sağ üstte ışıklı yay, sol altta hale. */
.ga-tanitim::before,
.ga-tanitim::after {
    content: '';
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
}

.ga-tanitim::before {
    width: 540px;
    height: 540px;
    right: -320px;
    top: -150px;
    border: 1px solid var(--ga-sus-halka);
    box-shadow:
        0 0 80px var(--ga-sus-isik),
        inset 0 0 60px var(--ga-sus-isik-2);
}

.ga-tanitim::after {
    width: 440px;
    height: 440px;
    left: -170px;
    bottom: -210px;
    background: radial-gradient(circle, var(--ga-sus-hale), transparent 65%);
}

.ga-tanitim > * {
    position: relative;
    z-index: 1;
}

/* Logo çizicisi ortak (`auth.partials.kart-logosu`); burada sola yaslı. */
.ga-marka .auth-card-logo {
    justify-content: flex-start;
    margin: 0 0 30px;
}

.ga-marka .auth-card-logo img { max-height: 56px; }

.ga-baslik {
    font-family: var(--font-display);
    font-size: clamp(32px, 3.3vw, 44px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--ga-yazi);
    margin-bottom: 16px;
}

.ga-alt {
    max-width: 420px;
    margin-bottom: 34px;
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--ga-soluk);
}

/* Maddeler: ikon kutusu + başlık + açıklama. */
.ga-maddeler {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-bottom: 36px;
}

/* Giriş: dört kısa madde 2×2 ızgara, açıklamasız. */
.ga-maddeler.is-izgara {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 28px;
}

.ga-madde {
    --m-k: var(--ga-k-mavi);
    --m-t: var(--ga-t-mavi);

    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.ga-maddeler.is-izgara .ga-madde {
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid var(--ga-cizgi);
    background: var(--ga-yuzey);
}

.ga-madde.is-mor   { --m-k: var(--ga-k-mor);   --m-t: var(--ga-t-mor); }
.ga-madde.is-yesil { --m-k: var(--ga-k-yesil); --m-t: var(--ga-t-yesil); }
.ga-madde.is-amber { --m-k: var(--ga-k-amber); --m-t: var(--ga-t-amber); }

.ga-madde-ikon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: rgb(var(--m-t));
    background: linear-gradient(145deg, rgb(var(--m-k) / var(--ga-a-zemin)), rgb(var(--m-k) / var(--ga-a-zemin-2)));
    border: 1px solid rgb(var(--m-k) / var(--ga-a-cizgi));
    box-shadow:
        0 10px 26px rgb(var(--m-k) / var(--ga-a-golge)),
        var(--ga-ic-isik);
}

.ga-madde-ikon svg { width: 24px; height: 24px; }

.ga-maddeler.is-izgara .ga-madde-ikon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgb(var(--m-k) / var(--ga-a-golge));
}

.ga-maddeler.is-izgara .ga-madde-ikon svg { width: 19px; height: 19px; }

.ga-madde-metin {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 5px;
    min-width: 0;
}

.ga-maddeler.is-izgara .ga-madde-metin { padding-top: 0; }

.ga-madde-metin strong {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--ga-yazi);
}

.ga-maddeler.is-izgara .ga-madde-metin strong {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}

.ga-madde-metin span {
    max-width: 270px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ga-soluk);
}

/* ── Giriş: duyurular (SuperAdmin → Duyurular) ── */
.ga-duyurular { margin-bottom: 24px; }

.ga-duyuru-bas {
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ga-silik);
}

.ga-duyuru-liste {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ga-duyuru {
    --d-k: var(--ga-k-mavi);
    --d-t: var(--ga-t-mavi);

    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid var(--ga-cizgi);
    background: var(--ga-yuzey-2);
}

.ga-duyuru.is-success { --d-k: var(--ga-k-zumrut);  --d-t: var(--ga-t-zumrut); }
.ga-duyuru.is-warning { --d-k: var(--ga-k-amber);   --d-t: var(--ga-t-amber); }
.ga-duyuru.is-danger  { --d-k: var(--ga-k-kirmizi); --d-t: var(--ga-t-kirmizi); }

.ga-duyuru-ikon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: rgb(var(--d-t));
    background: rgb(var(--d-k) / var(--ga-a-duyuru));
    border: 1px solid rgb(var(--d-t) / .3);
}

.ga-duyuru-ikon svg { width: 19px; height: 19px; }

.ga-duyuru-metin {
    flex: 1;
    min-width: 0;
}

.ga-duyuru-rozet {
    display: inline-block;
    margin-bottom: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgb(var(--d-t));
    background: rgb(var(--d-k) / var(--ga-a-duyuru));
    border: 1px solid rgb(var(--d-t) / .3);
}

.ga-duyuru-baslik {
    margin-bottom: 3px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ga-yazi);
}

.ga-duyuru-aciklama {
    margin-bottom: 6px;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--ga-soluk);
}

.ga-duyuru-bag {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ga-mavi-a);
    text-decoration: none;
}

.ga-duyuru-bag:hover { text-decoration: underline; }

/* Güven / sürüm satırı (sol panelin dibi). */
.ga-guven {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-top: auto;
    padding-top: 16px;
    font-size: 12px;
    color: var(--ga-silik);
}

.ga-guven span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.ga-guven svg { width: 13px; height: 13px; }

/* ══════════════ ÜRÜN KEŞİF KARTI ══════════════
   25.09.2026, kullanıcı: "Ürünü yakından tanıyın kısmını daha farklı konsepte
   yap". Çip şeridi yerine keşif kartı (`auth.partials.urun-baglantilari`,
   giriş + kayıt ortak): üstte başlık + ürün sitesi adresi; solda öne çıkan
   "Ürün Turu" kutucuğu, sağda üç satır kutucuk. Telefonda tur tam genişlik,
   üç kutucuk yan yana (DUYARLI). Hepsi yeni sekmede açılır. */
.ga-kesif {
    margin: -6px 0 26px;
    padding: 14px;
    border-radius: 20px;
    border: 1px solid var(--ga-cizgi);
    background: var(--ga-kesif-zemin);
    box-shadow: var(--ga-golge-k);
}

.ga-kesif-bas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
    margin-bottom: 10px;
    padding-left: 2px;
}

.ga-kesif-baslik {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ga-yazi);
}

.ga-kesif-baslik svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    color: var(--ga-mavi-a);
}

.ga-kesif-site {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ga-mavi-a);
    background: var(--ga-vurgu);
    text-decoration: none;
    white-space: nowrap;
}

/* Dokunma alanı ~44 px: hap küçük kalır, tıklanan alan görünmezce genişler. */
.ga-kesif-site::after {
    content: '';
    position: absolute;
    inset: -9px -4px;
}

.ga-kesif-site svg {
    width: 13px;
    height: 13px;
    transition: transform .2s var(--ga-egri);
}

.ga-kesif-site:hover { background: var(--ga-vurgu-g); }
.ga-kesif-site:hover svg { transform: translate(2px, -2px); }

.ga-kesif-izgara {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 6px 8px;
}

.ga-kesif-tur,
.ga-kesif-kutu {
    position: relative;
    min-width: 0;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform .25s var(--ga-egri), box-shadow .25s var(--ga-egri);
}

.ga-kesif-tur:hover,
.ga-kesif-kutu:hover {
    transform: translateY(-2px);
    box-shadow: var(--ga-golge-k-h);
}

.ga-kesif-tur:focus-visible,
.ga-kesif-kutu:focus-visible,
.ga-kesif-site:focus-visible {
    outline: 2px solid var(--ga-odak-hat);
    outline-offset: 2px;
}

/* Öne çıkan: Ürün Turu — degrade zeminli, oynat düğmeli "video kartı". */
.ga-kesif-tur {
    grid-column: 1;
    grid-row: 1 / span 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--ga-cizgi-v);
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0%, rgb(var(--ga-k-mor) / var(--ga-a-tur)), transparent 60%),
        linear-gradient(140deg, rgb(var(--ga-k-mavi) / var(--ga-a-tur)), rgb(var(--ga-k-mor) / var(--ga-a-tur-2))),
        var(--ga-kutucuk);
}

.ga-kesif-oynat {
    position: relative;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: var(--ga-beyaz);
    background: var(--ga-degrade);
    box-shadow: 0 8px 18px rgb(var(--ga-k-mavi) / .35);
}

.ga-kesif-oynat svg {
    width: 17px;
    height: 17px;
    margin-left: 2px;
}

/* Yumuşak nabız halkası: "oynatılabilir" hissi. */
.ga-kesif-oynat::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: inherit;
    border: 2px solid rgb(var(--ga-k-mavi) / .4);
    animation: ga-nabiz 2.8s ease-out infinite;
    pointer-events: none;
}

@keyframes ga-nabiz {
    0%        { transform: scale(.8);  opacity: .9; }
    70%, 100% { transform: scale(1.3); opacity: 0; }
}

.ga-kesif-tur-metin {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ga-kesif-tur-metin strong {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ga-yazi);
}

.ga-kesif-tur-metin small {
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--ga-soluk);
}

.ga-kesif-ok {
    position: absolute;
    top: 14px;
    right: 12px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--ga-mavi-a);
    transition: transform .25s var(--ga-egri);
}

.ga-kesif-tur:hover .ga-kesif-ok { transform: translateX(3px); }

/* Küçük kutucuklar: ikon + ad + tek satır alt cümle. */
.ga-kesif-kutu {
    --t-k: var(--ga-k-mavi);
    --t-t: var(--ga-t-mavi);

    grid-column: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 7px 10px 7px 8px;
    border: 1px solid var(--ga-cizgi);
    border-radius: 13px;
    background: var(--ga-kutucuk);
}

.ga-kesif-kutu:hover { border-color: var(--ga-cizgi-v); }

.ga-kesif-kutu.is-mor   { --t-k: var(--ga-k-mor);   --t-t: var(--ga-t-mor); }
.ga-kesif-kutu.is-yesil { --t-k: var(--ga-k-yesil); --t-t: var(--ga-t-yesil); }

.ga-kesif-ikon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: rgb(var(--t-t));
    background: rgb(var(--t-k) / var(--ga-a-zemin));
    border: 1px solid rgb(var(--t-k) / var(--ga-a-cizgi));
}

.ga-kesif-ikon svg { width: 15px; height: 15px; }

.ga-kesif-ad {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ga-kesif-ad strong {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ga-yazi);
}

.ga-kesif-ad small {
    font-size: 11.5px;
    line-height: 1.3;
    color: var(--ga-soluk);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Kayıt: süs uygulama önizlemesi ── */
.ga-onizleme {
    margin-top: auto;
    margin-right: -70px;
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    height: 196px;
    border: 1px solid var(--ga-cizgi-v);
    border-bottom: none;
    border-radius: 18px 18px 0 0;
    background: var(--ga-oniz-zemin);
    box-shadow:
        var(--ga-oniz-golge),
        var(--ga-ic-isik);
    overflow: hidden;
    transform: rotate(-6deg) translate(6px, 26px);
    transform-origin: left bottom;
}

.ga-oniz-yan {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 16px 10px;
    border-right: 1px solid var(--ga-cizgi);
    background: var(--ga-oniz-yan);
}

.ga-oniz-nokta {
    width: 18px;
    height: 18px;
    margin: 0 0 10px 6px;
    border-radius: 6px;
    background: var(--ga-degrade-gonder);
}

.ga-oniz-menu {
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 10.5px;
    white-space: nowrap;
    color: var(--ga-silik);
}

.ga-oniz-menu.is-secili {
    color: var(--ga-mavi-a);
    background: var(--ga-vurgu-g);
}

.ga-oniz-ana {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 14px 16px;
}

.ga-oniz-arama {
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid var(--ga-cizgi);
    background: var(--ga-yuzey);
    font-size: 10px;
    color: var(--ga-silik);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ga-oniz-musteri {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ga-oniz-avatar {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
    color: var(--ga-beyaz);
    background: var(--ga-degrade-mor);
}

.ga-oniz-kimlik {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ga-oniz-kimlik b {
    font-size: 13px;
    color: var(--ga-yazi);
}

.ga-oniz-kimlik small {
    font-size: 9.5px;
    color: var(--ga-silik);
}

.ga-oniz-rozet {
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: .06em;
    color: rgb(var(--ga-t-zumrut));
    background: rgb(var(--ga-k-zumrut) / var(--ga-a-duyuru));
    border: 1px solid rgb(var(--ga-t-zumrut) / .3);
}

.ga-oniz-kpi {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 150px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--ga-cizgi);
    background: var(--ga-yuzey);
}

.ga-oniz-kpi small {
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--ga-silik);
}

.ga-oniz-kpi b {
    font-size: 20px;
    color: var(--ga-yazi);
}

/* ══════════════ SAĞ: FORM KARTI ══════════════ */
.ga-form-kart {
    padding: 38px 42px 28px;
    background: var(--ga-panel-2);
}

/* Giriş kartı: içerik dikeyde ortalı (sol panel duyurularla uzayabilir). */
.ga-kabuk.is-giris .ga-form-kart {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Kart kayıtla aynı genişlikte; giriş formu içinde okunaklı genişlikte ortalanır. */
.ga-kabuk.is-giris .ga-form-kart > * {
    width: 100%;
    max-width: 460px;
    margin-inline: auto;
}

.ga-form-bas { margin-bottom: 24px; }

.ga-form-baslik {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--ga-yazi);
    margin-bottom: 8px;
}

.ga-form-alt {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ga-soluk);
}

.ga-satir {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
}

.ga-alan {
    min-width: 0;
    margin-bottom: 16px;
}

.ga-etiket {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ga-yazi);
}

.ga-girdi-kap { position: relative; }

.ga-ikon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    color: var(--ga-ikon);
    pointer-events: none;
}

.ga-ikon svg { width: 19px; height: 19px; }

.ga-girdi {
    width: 100%;
    height: 48px;
    padding: 0 16px 0 50px;
    font: inherit;
    font-size: 15px;
    color: var(--ga-yazi);
    background: var(--ga-girdi);
    border: 1px solid var(--ga-cizgi);
    border-radius: 13px;
    outline: none;
    box-shadow: var(--ga-girdi-ic);
    transition: box-shadow .18s ease;
}

.ga-girdi::placeholder { color: var(--ga-yer-tutucu); }

.ga-girdi:hover { border-color: var(--ga-cizgi-g); }

.ga-girdi:focus {
    border-color: var(--ga-odak);
    background: var(--ga-girdi-odak);
    box-shadow: 0 0 0 4px var(--ga-halka);
}

/* Tarayıcı otomatik doldurması kendi zeminini basmasın: iki temada jetonla. */
.ga-girdi:-webkit-autofill,
.ga-girdi:-webkit-autofill:hover,
.ga-girdi:-webkit-autofill:focus,
.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover,
.auth-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ga-yazi);
    caret-color: var(--ga-yazi);
    -webkit-box-shadow: 0 0 0 1000px var(--ga-otodoldur) inset;
}

.ga-girdi.has-goz { padding-right: 50px; }

/* Şehir seçimi: yerel ok gizli, yerine ikon. Boş seçim soluk yazılır. */
.ga-secim {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 46px;
    cursor: pointer;
}

.ga-secim:has(option[value=""]:checked) { color: var(--ga-yer-tutucu); }

.ga-secim option {
    color: var(--ga-yazi);
    background: var(--ga-acilir);
}

.ga-secim-ok {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    color: var(--ga-ikon);
    pointer-events: none;
}

.ga-secim-ok svg { width: 18px; height: 18px; }

/* ── Aranabilir şehir listesi (25.09.2026, `giris-alani.js`) ──
   JS açıkken yerel select gizlenir (değer yine onunla gider), yerine düğme +
   arama kutulu panel gelir. Açık/kapalı `.ga-sehir.is-acik` ile. */
.ga-secim.is-gelismis { display: none; }

.ga-sehir-dugme {
    display: block;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ga-sehir-dugme.is-bos { color: var(--ga-yer-tutucu); }

/* Zorunlu şehir seçilmeden gönderilince (27.09.2026, `giris-alani.js`
   `invalid`): gizli select'in uyarısı görünen düğmede. `[hidden]` değil
   `.is-gorunur` — bu dosyadaki açılır listeyle aynı desen. */
.ga-sehir-dugme.is-hata {
    border-color: var(--ga-hata-yazi);
    box-shadow: 0 0 0 3px var(--ga-hata-cizgi);
}
.ga-sehir-uyari {
    display: none;
    margin-top: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ga-hata-yazi);
}
.ga-sehir-uyari.is-gorunur { display: block; }

.ga-sehir.is-acik .ga-secim-ok svg { transform: rotate(180deg); }

.ga-sehir-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 40;
    display: none;
    padding: 8px;
    background: var(--ga-acilir);
    border: 1px solid var(--ga-cizgi-g);
    border-radius: 14px;
    box-shadow: var(--ga-golge-acilir);
}

.ga-sehir.is-acik .ga-sehir-panel {
    display: block;
    animation: ga-sehir-ac .16s var(--ga-egri);
}

@keyframes ga-sehir-ac {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

.ga-sehir-ara {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    font: inherit;
    font-size: 14.5px;
    color: var(--ga-yazi);
    background: var(--ga-girdi);
    border: 1px solid var(--ga-cizgi);
    border-radius: 10px;
    outline: none;
}

.ga-sehir-ara::placeholder { color: var(--ga-yer-tutucu); }

.ga-sehir-ara:focus {
    border-color: var(--ga-odak);
    box-shadow: 0 0 0 3px var(--ga-halka);
}

/* ⚠ `position: relative`: JS etkin satırı `offsetTop` ile listenin içinde kaydırır. */
.ga-sehir-liste {
    position: relative;
    max-height: 232px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ga-sehir-oge {
    padding: 9px 12px;
    font-size: 14.5px;
    color: var(--ga-yazi);
    border-radius: 9px;
    cursor: pointer;
}

.ga-sehir-oge:hover,
.ga-sehir-oge.is-etkin { background: var(--ga-vurgu-g); }

.ga-sehir-oge[aria-selected="true"] {
    font-weight: 700;
    color: var(--ga-mavi-a);
}

.ga-sehir-oge.is-gizli { display: none; }

.ga-sehir-bos {
    display: none;
    padding: 12px;
    font-size: 13.5px;
    color: var(--ga-soluk);
    text-align: center;
}

.ga-sehir-bos.is-gorunur { display: block; }

/* Şifre göster/gizle — `giris-alani.js`; ikon `.is-acik` ile değişir. */
.ga-goz {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 10px;
    background: none;
    color: var(--ga-ikon);
    cursor: pointer;
}

.ga-goz:hover { background: var(--ga-vurgu); }

.ga-goz:focus-visible {
    outline: 2px solid var(--ga-odak-hat);
    outline-offset: 1px;
}

.ga-goz svg { width: 19px; height: 19px; }
.ga-goz .ga-goz-kapa { display: none; }
.ga-goz.is-acik .ga-goz-ac { display: none; }
.ga-goz.is-acik .ga-goz-kapa { display: block; }

.ga-ipucu {
    margin-top: 7px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ga-soluk);
}

/* Onay kutusu (KVKK, beni hatırla): yuvarlak köşeli, işaretlenince mavi + tik. */
.ga-kutu {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    margin: 0;
    border-radius: 7px;
    border: 1.5px solid var(--ga-cizgi-g);
    background: var(--ga-girdi);
    cursor: pointer;
}

.ga-kutu:checked {
    border-color: transparent;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat,
        var(--ga-degrade-gonder);
}

.ga-kutu:focus-visible { box-shadow: 0 0 0 4px var(--ga-halka); }

.ga-onay {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 6px 0 22px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ga-soluk);
    cursor: pointer;
}

.ga-onay .ga-kutu { margin-top: 1px; }

.ga-onay a {
    color: var(--ga-mavi-a);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ga-onay a:hover { color: var(--ga-mavi-h); }

/* Giriş: beni hatırla + şifremi unuttum satırı. */
.ga-hatirla-satir {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin: 2px 0 8px;
}

.ga-hatirla {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--ga-yazi);
    cursor: pointer;
    user-select: none;
}

.ga-hatirla small { color: var(--ga-soluk); }

.ga-unuttum {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ga-mavi-a);
    text-decoration: none;
}

.ga-unuttum:hover { text-decoration: underline; }

.ga-sifre-notu {
    margin-bottom: 22px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ga-soluk);
    text-wrap: balance;
}

.ga-recaptcha {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

/* ── Eylemler: dolu mavi gönder + çerçeveli geri ── */
.ga-eylemler {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 14px;
}

.ga-gonder,
.ga-geri {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 54px;
    border-radius: 14px;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.ga-gonder {
    width: 100%;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--ga-beyaz);
    border: 1px solid var(--ga-gonder-cizgi);
    background: var(--ga-degrade-gonder);
    box-shadow: var(--ga-golge-gonder);
    transition: transform .15s ease, box-shadow .2s ease;
}

.ga-gonder:hover {
    transform: translateY(-1px);
    box-shadow: var(--ga-golge-gonder-h);
}

.ga-gonder:active { transform: translateY(0); }

.ga-geri {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ga-yazi);
    border: 1px solid var(--ga-cizgi-g);
    background: var(--ga-yuzey);
    transition: transform .2s var(--ga-egri);
}

.ga-geri:hover {
    border-color: var(--ga-odak);
    background: var(--ga-vurgu);
}

.ga-geri:hover svg { transform: translateX(-3px); }

.ga-gonder svg { width: 19px; height: 19px; }

.ga-geri svg {
    width: 18px;
    height: 18px;
    transition: transform .25s var(--ga-egri);
}

.ga-gonder:focus-visible,
.ga-geri:focus-visible,
.ga-kayit-cta:focus-visible,
.ga-unuttum:focus-visible,
.auth-btn:focus-visible {
    outline: 2px solid var(--ga-odak-hat);
    outline-offset: 3px;
}

.ga-not {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ga-soluk);
}

.ga-not svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ── Giriş: kayıt çağrısı kutucuğu ──────────────────────────────────
   Çerçeveli düğme yerine ikon + iki satır + ok taşıyan kutucuk.
   Birincil eylem hâlâ GİRİŞ (dolu mavi); bu kutucuk ikincil ama belirgin.
   Arada bir üstünden yumuşak bir ışık geçer; üzerine gelince kalkar,
   ok sağa kayar. */
.ga-ayirac {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 14px;
    font-size: 12px;
    color: var(--ga-soluk);
}

.ga-ayirac::before,
.ga-ayirac::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--ga-cizgi);
}

.ga-kayit-cta {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid var(--ga-cizgi-v);
    background: var(--ga-cta-zemin);
    text-decoration: none;
    overflow: hidden;
    box-shadow: var(--ga-golge-cta);
    transition: transform .3s var(--ga-egri), box-shadow .3s var(--ga-egri);
}

.ga-kayit-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, var(--ga-parilti) 50%, transparent 65%);
    transform: translateX(-100%);
    animation: ga-parilti 6s ease-in-out 1.2s infinite;
    pointer-events: none;
}

.ga-kayit-cta:hover {
    transform: translateY(-2px);
    box-shadow: var(--ga-golge-cta-h);
}

.ga-kayit-cta-ikon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    color: var(--ga-beyaz);
    background: var(--ga-degrade);
    box-shadow: 0 8px 20px rgb(var(--ga-k-mavi) / .35);
}

.ga-kayit-cta-ikon svg { width: 21px; height: 21px; }

.ga-kayit-cta-metin {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ga-kayit-cta-metin small {
    font-size: 12.5px;
    color: var(--ga-soluk);
}

.ga-kayit-cta-metin strong {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--ga-yazi);
}

.ga-kayit-cta-ok {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--ga-mavi-a);
    border: 1px solid var(--ga-cizgi-v);
    transition: transform .3s var(--ga-egri);
}

.ga-kayit-cta-ok svg { width: 17px; height: 17px; }

.ga-kayit-cta:hover .ga-kayit-cta-ok { transform: translateX(4px); }

@keyframes ga-parilti {
    0%, 70% { transform: translateX(-100%); }
    100%    { transform: translateX(100%); }
}

/* Giriş kartının altı: hukuki bağlantılar. */
.ga-form-kart .auth-card-footer {
    margin-top: 22px;
    gap: 8px;
}

.ga-form-kart .auth-legal { margin-top: 0; }

/* ══════════════ ESKİ .auth-* EKRANLARI (şifre, 419, başvuru alındı) ══════════════
   Eski blokta sabit koyu renkler var; burada jetona bağlanır. */
.auth-card {
    border-color: var(--ga-cizgi);
    border-radius: 26px;
    background: var(--ga-panel-2);
    backdrop-filter: var(--ga-bulanik);
    -webkit-backdrop-filter: var(--ga-bulanik);
    box-shadow: var(--ga-golge), var(--ga-ic-isik);
}

.auth-card-title { color: var(--ga-yazi); }

/* ⚠ Eski bloğun renk geçişleri (`border-color`, `background`) burada
   kapatılır: tema değişince eski renk kilitleniyordu. */
.auth-input,
.auth-textarea {
    border-radius: 13px;
    box-shadow: var(--ga-girdi-ic);
    transition: box-shadow .18s ease;
}

.auth-input::placeholder,
.auth-textarea::placeholder { color: var(--ga-yer-tutucu); }

.auth-input:hover,
.auth-textarea:hover { border-color: var(--ga-cizgi-g); }

.auth-input:focus,
.auth-textarea:focus {
    border-color: var(--ga-odak);
    background: var(--ga-girdi-odak);
    box-shadow: 0 0 0 4px var(--ga-halka);
}

.auth-input-icon { color: var(--ga-ikon); }

.auth-btn {
    color: var(--ga-beyaz);
    border: 1px solid var(--ga-gonder-cizgi);
    border-radius: 14px;
    background: var(--ga-degrade-gonder);
    box-shadow: var(--ga-golge-gonder);
}

.auth-btn:hover {
    opacity: 1;
    box-shadow: var(--ga-golge-gonder-h);
}

.auth-error {
    border-color: var(--ga-hata-cizgi);
    border-radius: 12px;
    background: var(--ga-hata-zemin);
    color: var(--ga-hata-yazi);
}

.auth-status {
    border-color: var(--ga-basari-cizgi);
    border-radius: 12px;
    background: var(--ga-basari-zemin);
    color: var(--ga-basari-yazi);
}

.auth-legal { color: var(--ga-silik); }
.auth-legal a { color: var(--ga-soluk); }
.auth-legal a:hover { color: var(--ga-mavi-a); }

.auth-back:hover { color: var(--ga-mavi-h); }

/* ── BAŞVURU ALINDI: SSS kartı (26.09.2026) ──
   Kartın tamamı bağlantı. Masaüstünde tek satır (ikon · metin · ok daire);
   telefonda ikon + metin üstte, "İçeriklere git" tam genişlik düğme altta
   (başparmakla rahat basılsın, 48 px). Renkler keşif kartının jetonları. */
.ga-alindi-ipucu { margin-bottom: 18px; }

.ga-sss {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    padding: 16px;
    border: 1px solid var(--ga-cizgi-v);
    border-radius: 18px;
    background:
        radial-gradient(circle at 100% 0%, rgb(var(--ga-k-mor) / var(--ga-a-tur)), transparent 60%),
        linear-gradient(140deg, rgb(var(--ga-k-mavi) / var(--ga-a-tur)), rgb(var(--ga-k-mor) / var(--ga-a-tur-2))),
        var(--ga-kutucuk);
    color: var(--ga-yazi);
    text-decoration: none;
    box-shadow: var(--ga-golge-k);
    -webkit-tap-highlight-color: transparent;
    /* ⚠ Yalnız transform: gölge rengi temayla değişir, geçişe girmez. */
    transition: transform .2s var(--ga-egri);
}

.ga-sss:hover {
    transform: translateY(-2px);
    box-shadow: var(--ga-golge-k-h);
}

.ga-sss:active { transform: scale(.99); }

.ga-sss:focus-visible {
    outline: 2px solid var(--ga-odak-hat);
    outline-offset: 3px;
}

.ga-sss-ikon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: var(--ga-beyaz);
    background: var(--ga-degrade);
    box-shadow: 0 8px 18px rgb(var(--ga-k-mavi) / .3);
}

.ga-sss-ikon svg { width: 24px; height: 24px; }

.ga-sss-metin {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 3px;
}

.ga-sss-ust {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ga-mavi-a);
}

.ga-sss-baslik {
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ga-yazi);
}

.ga-sss-alt {
    font-size: 13px;
    line-height: 1.5;
    color: var(--ga-soluk);
}

/* Masaüstü: yalnız ok dairesi; yazı ekran okuyucuda kalır. */
.ga-sss-git {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: var(--ga-mavi-a);
    background: var(--ga-vurgu-g);
    transition: transform .2s var(--ga-egri);
}

.ga-sss:hover .ga-sss-git { transform: translateX(3px); }

.ga-sss-git svg { width: 18px; height: 18px; }

.ga-sss-git-metin {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (max-width: 600px) {
    .ga-sss {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 12px;
        padding: 14px;
    }

    .ga-sss-ikon {
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }

    .ga-sss-baslik { font-size: 15px; }

    /* Tam genişlik düğme: ikon + metnin altında. */
    .ga-sss-git {
        width: 100%;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border-radius: 13px;
        color: var(--ga-beyaz);
        background: var(--ga-degrade-gonder);
        box-shadow: var(--ga-golge-gonder);
        font-size: 15px;
        font-weight: 700;
    }

    .ga-sss:hover .ga-sss-git { transform: none; }

    .ga-sss-git-metin {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
    }
}

/* ══════════════ GEÇİŞ ══════════════
   24.09.2026, kullanıcı: "geçiş animasyonu çok kötü, modern şık, vay
   dedirtecek bir şey". İki ekran artık AYNI ölçüde; kartlar yer değiştirmez:
   · FORM KARTI 3B DÖNER — eski yüz ortaya kadar dönüp parlayarak kaybolur,
     yeni yüz öbür taraftan dönerek oturur. Yön `html[data-gecis]`:
     kayda/şifreye "ileri" (sola döner), girişe "geri" (sağa döner).
   · TANITIM PANELİ yerinde kalır; içeriği bulanıklaşıp yukarı kayarak çıkar,
     yenisi aşağıdan netleşerek girer (kartın dönüşüyle üst üste biner).
   · Arka plan iki sayfada aynı: kök çapraz geçmez, titreşim olmaz. */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

::view-transition-group(ga-tanitim),
::view-transition-group(ga-form) {
    animation-duration: .8s;
    animation-timing-function: var(--ga-egri);
}

/* Tanıtım: kutu dışı kırpılır (içerik boyu değişebilir). */
::view-transition-image-pair(ga-tanitim) {
    overflow: clip;
    border-radius: 26px;
}

/* Form kartı: 3B dönüş için derinlik; KIRPILMAZ (dönen yüz kutudan taşar). */
::view-transition-image-pair(ga-form) { perspective: 1800px; }

::view-transition-old(ga-tanitim),
::view-transition-new(ga-tanitim),
::view-transition-old(ga-form),
::view-transition-new(ga-form) {
    height: 100%;
    object-fit: none;
    object-position: top center;
}

::view-transition-old(ga-tanitim) { animation: ga-icerik-cik .38s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(ga-tanitim) { animation: ga-icerik-gir .6s var(--ga-egri) .2s both; }

::view-transition-old(ga-form),
::view-transition-new(ga-form) {
    transform-origin: 50% 50%;
    backface-visibility: hidden;
    mix-blend-mode: normal;
}

::view-transition-old(ga-form) { animation: ga-kart-cik-ileri .36s cubic-bezier(.55, 0, .8, .25) both; }
::view-transition-new(ga-form) { animation: ga-kart-gir-ileri .5s cubic-bezier(.16, .9, .3, 1.12) .32s both; }

html[data-gecis="geri"]::view-transition-old(ga-form) { animation-name: ga-kart-cik-geri; }
html[data-gecis="geri"]::view-transition-new(ga-form) { animation-name: ga-kart-gir-geri; }

@keyframes ga-kart-cik-ileri {
    to {
        opacity: 0;
        transform: rotateY(-88deg) scale(.94);
        filter: brightness(1.45) blur(1.5px);
    }
}

@keyframes ga-kart-gir-ileri {
    from {
        opacity: 0;
        transform: rotateY(88deg) scale(.94);
        filter: brightness(1.45) blur(1.5px);
    }
}

@keyframes ga-kart-cik-geri {
    to {
        opacity: 0;
        transform: rotateY(88deg) scale(.94);
        filter: brightness(1.45) blur(1.5px);
    }
}

@keyframes ga-kart-gir-geri {
    from {
        opacity: 0;
        transform: rotateY(-88deg) scale(.94);
        filter: brightness(1.45) blur(1.5px);
    }
}

@keyframes ga-icerik-cik {
    to {
        opacity: 0;
        transform: translateY(-16px);
        filter: blur(8px);
    }
}

@keyframes ga-icerik-gir {
    from {
        opacity: 0;
        transform: translateY(18px);
        filter: blur(10px);
    }
}

/* Sayfalar arası geçişi bilmeyen tarayıcı: kartlar hafifçe yükselerek belirir. */
@supports not (view-transition-name: none) {
    .ga-tanitim,
    .ga-form-kart,
    .auth-card { animation: ga-belir .5s var(--ga-egri) both; }

    .ga-form-kart { animation-delay: .06s; }
}

@keyframes ga-belir {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
}

@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }

    .ga-tanitim,
    .ga-form-kart,
    .auth-card,
    .ga-kayit-cta::after,
    .ga-kesif-oynat::after,
    .ga-sehir.is-acik .ga-sehir-panel { animation: none; }

    html.is-tema-gecis::view-transition-new(root) { animation: none; }

    .ga-kayit-cta,
    .ga-kayit-cta-ok,
    .ga-gonder,
    .ga-kesif-tur,
    .ga-kesif-kutu,
    .ga-kesif-ok,
    .ga-kesif-site svg,
    .ga-tema,
    .ga-tema svg,
    .ga-whatsapp,
    .ga-sss,
    .ga-sss-git,
    .ga-geri svg { transition: none; }
}

/* ══════════════ KAYIT KOMPAKT (masaüstü) ══════════════
   24.09.2026, kullanıcı: "sayfa dışına çıkmadan kompakt tasarım yap, büyük
   ekranları küçültebilirsin". Masaüstünde form tek ekrana sığsın diye boşluk,
   yükseklik ve yazı boyları küçülür. GİRİŞ + KAYIT AYNI ÖLÇÜDE (24.09.2026,
   kullanıcı: "giriş ekranında da bu tasarımı kullan, büyüklükleri aynı yap"):
   kabuk, sütun oranı, en az yükseklik ve boşluklar ortak — geçişte kartlar
   esnemez, yalnız döner. Dar ekranın kuralları aşağıdaki DUYARLI bölümünde. */
@media (min-width: 961px) {
    .ga-sayfa {
        padding-top: 20px;
        padding-bottom: 4px;
    }

    /* ⚠ ORTAK SABİT YÜKSEKLİK (24.09.2026, kullanıcı: "kayıt sayfasındaki 2
       kart boyunu referans al, login'deki 2 kartı da aynı boyutlara getir"):
       kabuk boyu İÇERİKTEN DEĞİL ekran yüksekliğinden gelir, iki ekranda
       birebir aynıdır (üst sınır = kayıt formunun doğal boyu). Sığmayan içerik
       sayfayı uzatmaz, kendi kartında kayar: girişte duyuru listesi, kayıtta
       form. ⚠ 60 px = üst 20 + alt 4 + kurumsal imza satırı (~36). */
    .ga-sayfa .ga-kabuk {
        max-width: 1140px;
        height: clamp(620px, calc(100dvh - 60px), 880px);
        gap: 16px;
    }

    .ga-sayfa .ga-tanitim,
    .ga-sayfa .ga-form-kart { min-height: 0; }

    .ga-sayfa .ga-form-kart {
        overflow-y: auto;
        scrollbar-width: thin;
    }

    /* Giriş kartı ortalı; taşarsa üstü kesilmesin (`safe`). */
    .ga-sayfa .ga-kabuk.is-giris .ga-form-kart {
        justify-content: center;
        justify-content: safe center;
    }

    /* Giriş duyuruları kalan yeri doldurur, fazlası kendi içinde kayar. */
    .ga-sayfa .ga-duyurular {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .ga-sayfa .ga-duyuru-liste {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding-right: 4px;
        scrollbar-width: thin;
    }

    .ga-sayfa .ga-tanitim { padding: 30px 32px 0; }
    .ga-sayfa .ga-kabuk.is-giris .ga-tanitim { padding-bottom: 22px; }
    .ga-sayfa .ga-marka .auth-card-logo { margin-bottom: 20px; }
    .ga-sayfa .ga-marka .auth-card-logo img { max-height: 46px; }

    .ga-sayfa .ga-baslik {
        font-size: clamp(28px, 2.5vw, 36px);
        margin-bottom: 10px;
    }

    .ga-sayfa .ga-alt {
        font-size: 15px;
        margin-bottom: 22px;
    }

    .ga-sayfa .ga-maddeler {
        gap: 14px;
        margin-bottom: 22px;
    }

    .ga-sayfa .ga-madde { gap: 14px; }

    .ga-sayfa .ga-madde-ikon {
        width: 44px;
        height: 44px;
        border-radius: 13px;
    }

    .ga-sayfa .ga-madde-ikon svg { width: 20px; height: 20px; }

    .ga-sayfa .ga-madde-metin {
        gap: 2px;
        padding-top: 2px;
    }

    .ga-sayfa .ga-madde-metin strong { font-size: 14.5px; }
    .ga-sayfa .ga-madde-metin span { font-size: 13px; }
    .ga-sayfa .ga-kesif { margin-bottom: 20px; }
    .ga-sayfa .ga-onizleme { height: 150px; }

    .ga-sayfa .ga-form-kart { padding: 26px 32px 20px; }
    .ga-sayfa .ga-form-bas { margin-bottom: 16px; }

    .ga-sayfa .ga-form-baslik {
        font-size: 22px;
        margin-bottom: 4px;
    }

    .ga-sayfa .ga-form-alt { font-size: 13.5px; }
    .ga-sayfa .ga-alan { margin-bottom: 12px; }

    .ga-sayfa .ga-etiket {
        margin-bottom: 6px;
        font-size: 13px;
    }

    .ga-sayfa .ga-girdi {
        height: 42px;
        font-size: 14.5px;
        border-radius: 12px;
    }

    .ga-sayfa .ga-ipucu {
        margin-top: 5px;
        font-size: 12px;
    }

    .ga-sayfa .ga-onay {
        margin: 2px 0 14px;
        font-size: 13px;
    }

    .ga-sayfa .ga-recaptcha { margin-bottom: 14px; }

    .ga-sayfa .ga-gonder,
    .ga-sayfa .ga-geri { height: 46px; }

    .ga-sayfa .ga-not {
        margin-top: 12px;
        font-size: 12.5px;
    }
}

/* Tema düğmesi sağ üst köşede sabit. Kabuk kenara yaklaştığında (≈1276 px
   altı) düğme kartın üstüne binmesin: kabuk düğmenin altından başlar. */
@media (min-width: 961px) and (max-width: 1279px) {
    .ga-sayfa { padding-top: 72px; }
    .ga-sayfa .ga-kabuk { height: clamp(600px, calc(100dvh - 112px), 880px); }
}

/* Kısa masaüstü ekranı (dizüstü): kabuk kısalır; süs önizleme yer kaplamasın,
   keşif kartı ve maddeler sıkılaşır (duyurulara yer kalsın). */
@media (min-width: 961px) and (max-height: 860px) {
    .ga-sayfa .ga-onizleme { display: none; }

    .ga-sayfa .ga-kesif {
        padding: 12px;
        margin-bottom: 16px;
    }

    .ga-sayfa .ga-kesif-bas { margin-bottom: 8px; }
    .ga-sayfa .ga-kesif-izgara { gap: 5px 8px; }
    .ga-sayfa .ga-kesif-tur { padding: 10px; }

    .ga-sayfa .ga-kesif-oynat {
        width: 36px;
        height: 36px;
    }

    .ga-sayfa .ga-kesif-kutu {
        min-height: 36px;
        padding: 5px 8px 5px 6px;
    }

    .ga-sayfa .ga-kesif-ikon {
        width: 26px;
        height: 26px;
        border-radius: 8px;
    }

    .ga-sayfa .ga-kesif-ikon svg { width: 14px; height: 14px; }
    .ga-sayfa .ga-kesif-ad small { display: none; }

    .ga-sayfa .ga-baslik {
        font-size: clamp(24px, 2.1vw, 30px);
        margin-bottom: 8px;
    }

    .ga-sayfa .ga-alt {
        font-size: 14px;
        margin-bottom: 16px;
    }

    .ga-sayfa .ga-maddeler.is-izgara {
        gap: 10px;
        margin-bottom: 16px;
    }

    .ga-sayfa .ga-maddeler.is-izgara .ga-madde { padding: 7px 10px; }

    .ga-sayfa .ga-maddeler.is-izgara .ga-madde-ikon {
        width: 34px;
        height: 34px;
        border-radius: 10px;
    }

    .ga-sayfa .ga-maddeler.is-izgara .ga-madde-ikon svg { width: 17px; height: 17px; }
    .ga-sayfa .ga-guven { padding-top: 12px; }
}

/* Çok kısa masaüstü (tarayıcı çubukları açık 768 px ekran): tanıtım yalnız
   özü taşır. */
@media (min-width: 961px) and (max-height: 720px) {
    .ga-sayfa .ga-kabuk.is-giris .ga-alt,
    .ga-sayfa .ga-kesif-tur-metin small { display: none; }

    .ga-sayfa .ga-marka .auth-card-logo { margin-bottom: 14px; }
    .ga-sayfa .ga-marka .auth-card-logo img { max-height: 40px; }
}

/* ══════════════ DUYARLI ══════════════ */
@media (max-width: 1100px) {
    /* ⚠ Düşük özgüllük BİLEREK: masaüstünde KOMPAKT blok, dar ekranda aşağıdaki
       960 px kuralları bunları ezmeli. */
    .ga-kabuk { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
    .ga-tanitim { padding: 36px 30px 0; }
    .ga-form-kart { padding: 34px 30px 26px; }
    .ga-maddeler.is-izgara { grid-template-columns: minmax(0, 1fr); }
}

/* Tablet / telefon (25.09.2026, kullanıcı: "mobilde uyumu daha da arttır"):
   tek sütun ve FORM ÖNCE — üstte ince başlık (logo + tema düğmesi), sonra
   form kartı, altında keşif kartı ve tanıtım.
   ⚠ `.ga-tanitim` `display: contents`: çocukları kabuğun ızgarasına düşer,
     `order` ile dizilir (logo -2, form -1, gerisi DOM sırasıyla). Panel
     kutusu ve `ga-tanitim` geçiş adı telefonda yok (form kartının 3B dönüşü
     sürer). Süs sözde öğeleri kapatılır — kutu kalkınca sayfaya taşarlardı. */
@media (max-width: 960px) {
    /* Telefonda cam bulanıklığı yok (performans); gölge hafif. */
    :root { --ga-golge: 0 1px 2px rgb(15 23 42 / .04), 0 16px 40px -20px rgb(30 58 138 / .2); }
    html[data-theme="dark"] { --ga-golge: 0 16px 40px rgb(0 0 0 / .35); }

    .ga-form-kart,
    .auth-card,
    .ga-tema {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    /* Düğme sayfanın ince başlığında (logo satırı), sayfayla birlikte kayar;
       sağ kenarı kabuğun (en çok 680 px) sağ kenarıyla hizalı. */
    .ga-tema {
        position: absolute;
        top: calc(14px + env(safe-area-inset-top));
        right: max(calc(16px + env(safe-area-inset-right)), calc((100vw - 680px) / 2));
    }

    .ga-sayfa {
        justify-content: flex-start;
        padding:
            calc(14px + env(safe-area-inset-top))
            calc(16px + env(safe-area-inset-right))
            24px
            calc(16px + env(safe-area-inset-left));
    }

    .ga-kabuk,
    .ga-kabuk.is-giris {
        grid-template-columns: minmax(0, 1fr);
        max-width: 680px;
        margin: 0 auto;
        gap: 0;
    }

    .ga-tanitim { display: contents; }

    .ga-tanitim::before,
    .ga-tanitim::after { content: none; }

    /* Süs kalkınca katman gerekmez; form kartının açılır listesini örtmesinler. */
    .ga-tanitim > * { z-index: auto; }

    /* İnce başlık: logo solda, sağda tema düğmesine yer. */
    .ga-marka {
        order: -2;
        display: flex;
        align-items: center;
        min-height: 44px;
        margin-bottom: 14px;
        padding-right: 60px;
    }

    .ga-marka .auth-card-logo { margin: 0; }
    .ga-marka .auth-card-logo img { max-height: 36px; }

    .ga-form-kart {
        order: -1;
        margin-bottom: 18px;
    }

    .ga-kesif { margin: 0 0 24px; }

    .ga-baslik {
        margin: 0 4px 6px;
        font-size: 22px;
    }

    .ga-alt {
        max-width: none;
        margin: 0 4px 14px;
        font-size: 14px;
    }

    /* Kayıtta tanıtım cümlesi formun başında (`is-tekrar`); altta tekrar etmez. */
    .ga-sayfa.is-kayit .ga-alt { display: none; }

    .ga-maddeler,
    .ga-maddeler.is-izgara {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        margin: 0 2px;
    }

    .ga-madde,
    .ga-maddeler.is-izgara .ga-madde {
        align-items: center;
        gap: 8px;
        padding: 5px 12px 5px 5px;
        border-radius: 999px;
        border: 1px solid var(--ga-cizgi);
        background: var(--ga-yuzey);
    }

    .ga-madde-ikon,
    .ga-maddeler.is-izgara .ga-madde-ikon {
        width: 28px;
        height: 28px;
        border-radius: 999px;
        box-shadow: none;
    }

    .ga-madde-ikon svg,
    .ga-maddeler.is-izgara .ga-madde-ikon svg { width: 14px; height: 14px; }

    .ga-madde-metin { padding-top: 0; }

    .ga-madde-metin strong,
    .ga-maddeler.is-izgara .ga-madde-metin strong {
        font-size: 12.5px;
        font-weight: 600;
    }

    .ga-madde-metin span,
    .ga-onizleme,
    .ga-duyurular,
    .ga-guven { display: none; }

    .ga-form-bas { margin-bottom: 20px; }

    /* Eski ekranlar: kart tema düğmesinin altından başlar. */
    .auth-page > .auth-right {
        padding:
            calc(72px + env(safe-area-inset-top))
            calc(20px + env(safe-area-inset-right))
            28px
            calc(20px + env(safe-area-inset-left));
    }
}

@media (max-width: 600px) {
    .ga-sayfa {
        padding-right: calc(12px + env(safe-area-inset-right));
        padding-left: calc(12px + env(safe-area-inset-left));
    }

    .ga-tema { right: calc(12px + env(safe-area-inset-right)); }

    .ga-form-kart,
    .auth-card { border-radius: 22px; }

    .ga-form-kart,
    .ga-kabuk.is-giris .ga-form-kart { padding: 24px 18px 20px; }

    .ga-form-baslik { font-size: 21px; }
    .ga-baslik { font-size: 20px; }

    .ga-satir { grid-template-columns: minmax(0, 1fr); }

    /* iOS odak yakınlaştırmasını engelle: yazı ≥ 16 px (şehir araması dahil). */
    .ga-girdi {
        height: 52px;
        font-size: 16px;
    }

    .ga-girdi.has-goz { padding-right: 56px; }

    .ga-sehir-ara {
        height: 46px;
        font-size: 16px;
    }

    .ga-sehir-liste { max-height: min(300px, 45dvh); }

    /* Dokunma alanları ≥ 44 px. */
    .ga-sehir-oge {
        display: flex;
        align-items: center;
        min-height: 44px;
        font-size: 16px;
    }

    .ga-goz {
        right: 4px;
        width: 44px;
        height: 44px;
    }

    .ga-hatirla,
    .ga-unuttum {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .ga-hatirla-satir { margin-bottom: 4px; }

    .ga-eylemler {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .ga-not {
        align-items: flex-start;
        font-size: 12.5px;
    }

    .ga-kayit-cta { padding: 12px 14px; }

    /* Keşif: tur tam genişlik (satır), üç kutucuk yan yana dikey. */
    .ga-kesif {
        padding: 12px;
        border-radius: 18px;
    }

    .ga-kesif-izgara {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .ga-kesif-tur {
        grid-column: 1 / -1;
        grid-row: auto;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        min-height: 64px;
        padding: 10px 14px 10px 10px;
    }

    .ga-kesif-tur-metin { flex: 1; }

    .ga-kesif-ok {
        position: static;
        margin-left: auto;
    }

    .ga-kesif-kutu {
        grid-column: auto;
        flex-direction: column;
        justify-content: center;
        gap: 7px;
        min-height: 78px;
        padding: 10px 6px;
        text-align: center;
    }

    .ga-kesif-ad { flex: 0 1 auto; }
    .ga-kesif-ad small { display: none; }
    .ga-kesif-ad strong { font-size: 12.5px; }
}

@media (max-width: 380px) {
    .ga-form-kart,
    .ga-kabuk.is-giris .ga-form-kart { padding: 20px 14px 18px; }

    .ga-recaptcha { overflow: hidden; }
    .g-recaptcha { transform: scale(.86); }

    .ga-kesif-kutu { padding: 9px 4px; }
    .ga-kesif-ad strong { font-size: 12px; }

    .auth-page > .auth-right {
        padding-right: calc(12px + env(safe-area-inset-right));
        padding-left: calc(12px + env(safe-area-inset-left));
    }
}

/* Telefon yatay (düşük yükseklik): ince başlık ve boşluklar sıkılaşır. */
@media (max-width: 960px) and (max-height: 560px) {
    .ga-marka { margin-bottom: 10px; }
    .ga-marka .auth-card-logo img { max-height: 30px; }
}
