/* ==========================================================================
   Ceepri — giriş / üyelik ekranı (index.php → /giris, /kayit) — 2026 tasarımı
   TEMA: :root = AYDINLIK (varsayılan: kâğıt zemin, lacivert yazı, beyaz cam kart), html[data-theme="dark"] = karanlık
   (eski koyu lacivert görünüm, birebir). Seçim anahtarı localStorage 'elite-theme' (baglanti/tema.php boyamadan önce atar).
   Tasarım dili tanitim.css ile aynı: turkuaz #2fc4cc, Inter, 18px köşe, cam kartlar, ızgara/nokta arka plan.
   Fontlar/renkler Tasarım Yöneticisi değişkenlerini (--cp-font-*, --cp-renk-*) tüketir; tanımsızsa varsayılanlar geçerlidir.

   Yükleme sırası: stil.css → giris.css → fa-giris.css → giris_2026.css (en sonda, DOM sırası = kademe).
   stil.css / giris.css çok sayıda !important içerir; bu dosya aynı özellikleri `body.index-body …`
   özgüllüğüyle ve gerektiği yerde !important ile geçersiz kılar. uygulama.js ve cp-kimlik-kapisi.js'nin
   bağlı olduğu ID / sınıf / data-testid'ler index.php'de aynen durur; bu dosya yalnız görünüm değiştirir.
   ========================================================================== */

:root {
    color-scheme: light;
    --cg-bg: #f3f8fb;
    --cg-bg-2: #e8f0f6;
    --cg-surface: rgba(255, 255, 255, 0.7);
    --cg-surface-2: rgba(255, 255, 255, 0.95);
    --cg-line: rgba(11, 26, 48, 0.1);
    --cg-line-2: rgba(11, 26, 48, 0.18);
    --cg-text: #0b1a30;
    --cg-muted: #46586f;
    --cg-teal: var(--cp-renk-ana, #2fc4cc);
    --cg-teal-rgb: var(--cp-renk-ana-rgb, 47, 196, 204);
    --cg-teal-2: #148f9a;
    --cg-teal-3: var(--cp-renk-ana-koyu, #087078);
    --cg-ink: var(--cp-renk-ana-murekkep, #04282c);
    --cg-navy: #123d73;
    --cg-danger: #c0283a;
    --cg-danger-bg: rgba(192, 40, 58, 0.08);
    --cg-warn: #8a5d00;
    --cg-ok: #0b7a58;
    --cg-radius: 18px;
    --cg-radius-sm: 12px;
    --cg-font: var(--cp-font-govde, 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
    --cg-font-baslik: var(--cp-font-baslik, var(--cg-font));
    --cg-font-kod: var(--cp-font-kod, ui-monospace, 'SFMono-Regular', Consolas, monospace);

    /* tema ara değerleri (aydınlık) */
    --cg-ov: 11, 26, 48;                 /* yüzey/hover üst katman rengi (RGB) */
    --cg-sh: 11, 26, 48;                 /* gölge rengi (RGB) */
    --cg-hi: 255, 255, 255;              /* iç üst ışık çizgisi (RGB) */
    --cg-on: #0b1a30;                    /* vurgulu yüzey üstündeki metin */
    --cg-focus-on: #0b1a30;
    --cg-label: #1f3350;
    --cg-text-3: #3a4d68;
    --cg-text-4: #5a6c85;
    --cg-placeholder: #68798f;
    --cg-link-hover: #07555c;
    --cg-input: rgba(255, 255, 255, 0.92);
    --cg-input-f: #fff;
    --cg-input-line-h: rgba(11, 26, 48, 0.34);
    --cg-in-sh: inset 0 1px 2px rgba(11, 26, 48, 0.07);
    --cg-in-sh-f: inset 0 1px 2px rgba(11, 26, 48, 0.05);
    --cg-tabs-bg: rgba(11, 26, 48, 0.05);
    --cg-tab-act: linear-gradient(180deg, #fff, rgba(255, 255, 255, 0.9));
    --cg-tab-act-line: rgba(var(--cg-teal-rgb), 0.7);
    --cg-tab-act-sh: 0 1px 3px rgba(11, 26, 48, 0.12), inset 0 1px 0 rgba(var(--cg-hi), 0.9);
    --cg-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.9)), rgba(255, 255, 255, 0.8);
    --cg-card-top: rgba(var(--cg-teal-rgb), 0.55);
    --cg-card-sh: 0 34px 70px -30px rgba(11, 26, 48, 0.3), 0 2px 10px rgba(11, 26, 48, 0.06), 0 0 0 1px rgba(var(--cg-teal-rgb), 0.08), inset 0 1px 0 rgba(var(--cg-hi), 0.9);
    --cg-page-glow:
        radial-gradient(circle 560px at var(--mouse-x, 72vw) var(--mouse-y, 26vh), rgba(var(--cg-teal-rgb), 0.12), transparent 70%),
        radial-gradient(60% 50% at 82% 28%, rgba(var(--cg-teal-rgb), 0.16), transparent 70%),
        radial-gradient(50% 60% at 6% 6%, rgba(90, 168, 255, 0.14), transparent 70%),
        radial-gradient(40% 40% at 8% 100%, rgba(42, 111, 208, 0.08), transparent 70%);
    --cg-grid-img: radial-gradient(rgba(11, 26, 48, 0.2) 1.1px, transparent 1.5px);
    --cg-grid-size: 26px 26px;
    --cg-vurgu-grad: linear-gradient(90deg, #0a7c86, #0d8d99 48%, #2a6fd0);
    --cg-eyebrow-bg: rgba(var(--cg-teal-rgb), 0.12);
    --cg-eyebrow-line: rgba(10, 124, 134, 0.3);
    --cg-icon-bg: rgba(var(--cg-teal-rgb), 0.14);
    --cg-icon-line: rgba(10, 124, 134, 0.26);
    --cg-sec-bg: rgba(var(--cg-teal-rgb), 0.1);
    --cg-sec-line: rgba(10, 124, 134, 0.34);
    --cg-sec-bg-h: rgba(var(--cg-teal-rgb), 0.2);
    --cg-otp-bg: rgba(255, 255, 255, 0.95);
    --cg-otp-line: rgba(10, 124, 134, 0.4);
    --cg-otp-ph: #8fa0b6;
    --cg-dialog-ink: #fff;
    --cg-modal-bg: rgba(11, 26, 48, 0.34);
    --cg-modal-glow: radial-gradient(circle at 50% 12%, rgba(var(--cg-teal-rgb), 0.16), transparent 32rem);
    --cg-modal-card: linear-gradient(180deg, #fff, rgba(255, 255, 255, 0.98)) padding-box, linear-gradient(145deg, rgba(var(--cg-teal-rgb), 0.55), rgba(42, 111, 208, 0.22), rgba(11, 26, 48, 0.1)) border-box;
    --cg-modal-card-sh: 0 30px 80px -24px rgba(11, 26, 48, 0.4), 0 0 0 1px rgba(var(--cg-teal-rgb), 0.05) inset, 0 1px 0 rgba(var(--cg-hi), 0.9) inset;
    --cg-modal-top: linear-gradient(90deg, transparent, rgba(var(--cg-teal-rgb), 0.8), transparent);
    --cg-close-bg: rgba(11, 26, 48, 0.05);
    --cg-method-act: linear-gradient(145deg, rgba(var(--cg-teal-rgb), 0.1), rgba(255, 255, 255, 0.96)) padding-box, linear-gradient(145deg, rgba(var(--cg-teal-rgb), 0.55), rgba(11, 26, 48, 0.1)) border-box;
    --cg-method-act-h: linear-gradient(145deg, rgba(var(--cg-teal-rgb), 0.18), rgba(255, 255, 255, 0.98)) padding-box, linear-gradient(145deg, rgba(var(--cg-teal-rgb), 0.8), rgba(11, 26, 48, 0.16)) border-box;
    --cg-method-act-sh: 0 16px 34px rgba(11, 26, 48, 0.12), 0 0 25px rgba(var(--cg-teal-rgb), 0.14);
    --cg-method-pasif: rgba(11, 26, 48, 0.035);
    --cg-method-pasif-line: rgba(11, 26, 48, 0.16);
    --cg-keypad: linear-gradient(145deg, #fff, #eef6f9);
    --cg-keypad-h-text: #07555c;
    --cg-info-bg: linear-gradient(145deg, rgba(var(--cg-teal-rgb), 0.08), rgba(255, 255, 255, 0.9));
    --cg-ghost-bg: rgba(11, 26, 48, 0.04);
    --cg-pattern-bg: radial-gradient(circle at center, #fff, #e9f2f7);
    --cg-point-bg: #fff;
    --cg-chip-info: #1f5fb0;
    --cg-chip-ok: #0b6b4a;
    --cg-chip-err: #a3202f;
    --cg-alert-err: #9b1f2d;
    --cg-alert-ok: #07555c;
    --cg-anlik: #9b1f2d;
    --cg-pwlist: #a3202f;
    --cg-face-text: #1f3350;
    --cg-dialog-bg: linear-gradient(180deg, #fff, #f4f9fb) padding-box;
    --cg-dialog-overlay: rgba(11, 26, 48, 0.5);
    --cg-dialog-sec: rgba(11, 26, 48, 0.05);
    --cg-sosyal-bg: rgba(255, 255, 255, 0.8);
    --cg-sosyal-bg-h: #fff;
    --cg-sosyal-line-h: rgba(11, 26, 48, 0.3);
    --cg-sosyal-off-bg: rgba(11, 26, 48, 0.03);
    --cg-sosyal-off-line: rgba(11, 26, 48, 0.12);
    --cg-sosyal-soon: #5a6c85;
    --cg-sosyal-apple: #0b1a30;
    --cg-sosyal-google: #d93025;
    --cg-sosyal-ms: #0a6cc4;
    --cg-sosyal-fb: #1a5fd0;
    --cg-code-bg: rgba(11, 26, 48, 0.07);
    --cg-footer-credit: #5a6c85;
    --cg-corner: rgba(10, 124, 134, 0.7);
    --cg-guide: rgba(10, 124, 134, 0.4);
    --cg-method-sub: #4b5e79;
    --cg-method-ico: #5a6c85;
    --cg-ok-green: #0f9f6e;
    --cg-stroke: #0b1a30;
    --cg-dialog-title: #0b1a30;
    --cg-dialog-text: #3a4d68;
    --cg-dialog-icon: color-mix(in srgb, var(--dialog-accent, #2fc4cc) 16%, #fff);
    --cg-dialog-sh: 0 32px 80px -24px rgba(11, 26, 48, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    --cg-clear-text: #0a737c;
    --cg-input-text: #0b1a30;
    --cg-resend-bg: rgba(var(--cg-teal-rgb), 0.1);
    --cg-resend-line: rgba(10, 124, 134, 0.3);
    --cg-ghost-text: #3a4d68;
    --cg-info-text: #1f3350;
    --cg-challenge: #0b1a30;
    --cg-bio-title: #0b1a30;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --cg-bg: #050e1d;
    --cg-bg-2: #081629;
    --cg-surface: rgba(255, 255, 255, 0.035);
    --cg-surface-2: rgba(255, 255, 255, 0.06);
    --cg-line: rgba(160, 196, 236, 0.12);
    --cg-line-2: rgba(160, 196, 236, 0.2);
    --cg-text: #eaf2fb;
    --cg-muted: #9fb3cd;
    --cg-teal-2: #34b3c0;
    --cg-teal-3: var(--cp-renk-ana-acik, #7ee3e8);
    --cg-danger: #ff9a9a;
    --cg-danger-bg: rgba(255, 120, 120, 0.1);
    --cg-warn: #ffd88a;
    --cg-ok: #5eead4;

    --cg-ov: 255, 255, 255;
    --cg-sh: 0, 0, 0;
    --cg-hi: 255, 255, 255;
    --cg-on: #fff;
    --cg-focus-on: #fff;
    --cg-label: #d4e1f0;
    --cg-text-3: #b9cbe2;
    --cg-text-4: #8fa4c0;
    --cg-placeholder: #7f93ae;
    --cg-link-hover: #b6f1f4;
    --cg-input: rgba(3, 10, 22, 0.58);
    --cg-input-f: rgba(3, 10, 22, 0.82);
    --cg-input-line-h: rgba(160, 196, 236, 0.34);
    --cg-in-sh: inset 0 1px 3px rgba(0, 0, 0, 0.35);
    --cg-in-sh-f: inset 0 1px 3px rgba(0, 0, 0, 0.3);
    --cg-tabs-bg: rgba(0, 0, 0, 0.24);
    --cg-tab-act: linear-gradient(180deg, rgba(var(--cg-teal-rgb), 0.24), rgba(var(--cg-teal-rgb), 0.1));
    --cg-tab-act-line: rgba(var(--cg-teal-rgb), 0.45);
    --cg-tab-act-sh: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    --cg-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.022)), rgba(8, 22, 41, 0.74);
    --cg-card-top: rgba(126, 227, 232, 0.34);
    --cg-card-sh: 0 30px 80px -20px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(var(--cg-teal-rgb), 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    --cg-page-glow:
        radial-gradient(circle 560px at var(--mouse-x, 72vw) var(--mouse-y, 26vh), rgba(var(--cg-teal-rgb), 0.12), transparent 70%),
        radial-gradient(60% 50% at 82% 28%, rgba(var(--cg-teal-rgb), 0.14), transparent 70%),
        radial-gradient(50% 60% at 8% 8%, rgba(18, 61, 115, 0.55), transparent 70%),
        radial-gradient(40% 40% at 50% 112%, rgba(var(--cg-teal-rgb), 0.09), transparent 70%);
    --cg-grid-img: linear-gradient(rgba(160, 196, 236, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(160, 196, 236, 0.06) 1px, transparent 1px);
    --cg-grid-size: 56px 56px;
    --cg-vurgu-grad: linear-gradient(90deg, #7ee3e8, #2fc4cc 45%, #5aa8ff);
    --cg-eyebrow-bg: rgba(var(--cg-teal-rgb), 0.1);
    --cg-eyebrow-line: rgba(var(--cg-teal-rgb), 0.28);
    --cg-icon-bg: rgba(var(--cg-teal-rgb), 0.1);
    --cg-icon-line: rgba(var(--cg-teal-rgb), 0.24);
    --cg-sec-bg: rgba(var(--cg-teal-rgb), 0.08);
    --cg-sec-line: rgba(var(--cg-teal-rgb), 0.32);
    --cg-sec-bg-h: rgba(var(--cg-teal-rgb), 0.16);
    --cg-otp-bg: rgba(3, 10, 22, 0.62);
    --cg-otp-line: rgba(var(--cg-teal-rgb), 0.34);
    --cg-otp-ph: #5f7390;
    --cg-dialog-ink: #06121f;
    --cg-modal-bg: rgba(3, 8, 17, 0.8);
    --cg-modal-glow: radial-gradient(circle at 50% 12%, rgba(var(--cg-teal-rgb), 0.12), transparent 32rem);
    --cg-modal-card: linear-gradient(180deg, rgba(14, 32, 58, 0.98), rgba(8, 22, 41, 0.98)) padding-box, linear-gradient(145deg, rgba(126, 227, 232, 0.42), rgba(18, 61, 115, 0.3), rgba(160, 196, 236, 0.14)) border-box;
    --cg-modal-card-sh: 0 30px 80px -20px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(var(--cg-teal-rgb), 0.05) inset, 0 1px 0 rgba(255, 255, 255, 0.08) inset;
    --cg-modal-top: linear-gradient(90deg, transparent, rgba(126, 227, 232, 0.75), transparent);
    --cg-close-bg: rgba(255, 255, 255, 0.05);
    --cg-method-act: linear-gradient(145deg, rgba(var(--cg-teal-rgb), 0.1), rgba(10, 24, 46, 0.9)) padding-box, linear-gradient(145deg, rgba(126, 227, 232, 0.4), rgba(160, 196, 236, 0.08)) border-box;
    --cg-method-act-h: linear-gradient(145deg, rgba(var(--cg-teal-rgb), 0.18), rgba(10, 24, 46, 0.92)) padding-box, linear-gradient(145deg, rgba(126, 227, 232, 0.6), rgba(160, 196, 236, 0.14)) border-box;
    --cg-method-act-sh: 0 16px 34px rgba(0, 0, 0, 0.3), 0 0 25px rgba(var(--cg-teal-rgb), 0.14);
    --cg-method-pasif: rgba(8, 18, 34, 0.5);
    --cg-method-pasif-line: rgba(160, 196, 236, 0.16);
    --cg-keypad: linear-gradient(145deg, rgba(14, 32, 58, 0.96), rgba(8, 20, 38, 0.96));
    --cg-keypad-h-text: #fff;
    --cg-info-bg: linear-gradient(145deg, rgba(12, 28, 52, 0.85), rgba(10, 24, 46, 0.72));
    --cg-ghost-bg: rgba(3, 10, 22, 0.5);
    --cg-pattern-bg: radial-gradient(circle at center, rgba(14, 32, 58, 0.92), rgba(4, 11, 22, 0.98));
    --cg-point-bg: var(--cg-bg-2);
    --cg-chip-info: #a9d0ff;
    --cg-chip-ok: #86efc4;
    --cg-chip-err: #ffc2c2;
    --cg-alert-err: #ffd2d2;
    --cg-alert-ok: #b6f1f4;
    --cg-anlik: #ffc9c9;
    --cg-pwlist: #ffb4b4;
    --cg-face-text: #d0deef;
    --cg-dialog-bg: linear-gradient(180deg, rgba(14, 32, 58, 0.98), rgba(8, 22, 41, 0.98)) padding-box;
    --cg-dialog-overlay: rgba(3, 8, 17, 0.84);
    --cg-dialog-sec: rgba(255, 255, 255, 0.05);
    --cg-sosyal-bg: rgba(255, 255, 255, 0.045);
    --cg-sosyal-bg-h: rgba(255, 255, 255, 0.09);
    --cg-sosyal-line-h: rgba(160, 196, 236, 0.4);
    --cg-sosyal-off-bg: rgba(255, 255, 255, 0.025);
    --cg-sosyal-off-line: rgba(160, 196, 236, 0.14);
    --cg-sosyal-soon: #8da2bd;
    --cg-sosyal-apple: #f4f7fb;
    --cg-sosyal-google: #ff6a5c;
    --cg-sosyal-ms: #3fb8f2;
    --cg-sosyal-fb: #5b9bff;
    --cg-code-bg: rgba(255, 255, 255, 0.08);
    --cg-footer-credit: #8ea3bf;
    --cg-corner: rgba(126, 227, 232, 0.7);
    --cg-guide: rgba(126, 227, 232, 0.4);
    --cg-method-sub: #94a8c2;
    --cg-method-ico: #8aa0bb;
    --cg-ok-green: #34d399;
    --cg-stroke: #fff;
    --cg-dialog-title: #f8fafc;
    --cg-dialog-text: #a8b4c7;
    --cg-dialog-icon: color-mix(in srgb, var(--dialog-accent, #2fc4cc) 10%, rgba(8, 16, 29, 0.7));
    --cg-dialog-sh: 0 32px 90px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --cg-clear-text: #8ee7e3;
    --cg-input-text: #fff;
    --cg-resend-bg: rgba(var(--cg-teal-rgb), 0.07);
    --cg-resend-line: rgba(var(--cg-teal-rgb), 0.28);
    --cg-ghost-text: #c3d3e8;
    --cg-info-text: #e2e8f0;
    --cg-challenge: #fff;
    --cg-bio-title: #f8fafc;
}

/* ---------- Sayfa kabuğu ---------- */
html {
    background-color: var(--cg-bg) !important;
    -webkit-text-size-adjust: 100%;
    font-size: calc(100% * var(--cp-font-olcek, 1));
}

body.index-body {
    --mouse-x: 72vw;
    --mouse-y: 26vh;
    position: relative;
    z-index: 0;
    isolation: isolate;
    display: flex !important;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background: transparent !important;
    background-image: none !important;
    color: var(--cg-text);
    font-family: var(--cg-font);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    animation: none !important;
}

/* Eski radar süpürmesi → ızgara; fare ışığı → yumuşak turkuaz parıltı */
body.index-body::before {
    content: '';
    position: fixed;
    inset: 0;
    width: auto;
    height: auto;
    z-index: -1;
    pointer-events: none;
    transform: none;
    animation: none;
    transition: none;
    border-radius: 0;
    background: var(--cg-page-glow);
}

body.index-body::after {
    content: '';
    position: fixed;
    inset: 0;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    z-index: -1;
    pointer-events: none;
    transform: none;
    animation: none;
    border-radius: 0;
    background-image: var(--cg-grid-img);
    background-size: var(--cg-grid-size);
    background-color: transparent;
    -webkit-mask-image: radial-gradient(75% 65% at 50% 38%, #000 25%, transparent 80%);
    mask-image: radial-gradient(75% 65% at 50% 38%, #000 25%, transparent 80%);
}

body.index-body *,
body.index-body *::before,
body.index-body *::after {
    box-sizing: border-box;
}
/* Sıfır özgüllük: stil.css `*` sıfırlamasının eşi — bu dosya tek başına yüklense de aynı sonuç, sınıf kuralları her zaman üstün */
:where(body.index-body) * {
    margin: 0;
    padding: 0;
    font-family: var(--cg-font);
}

/* Odak halkası: tüm etkileşimli öğelerde görünür */
body.index-body :focus-visible {
    outline: 2px solid var(--cg-teal);
    outline-offset: 3px;
}

.cg-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.cg-ikon {
    display: inline-block;
    flex: none;
    width: 1.15em;
    height: 1.15em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.2em;
}

/* Erişilebilirlik: içeriğe atla */
body.index-body .cp-skip-link {
    position: absolute;
    left: 16px;
    top: -64px;
    z-index: 100000;
    padding: 10px 16px;
    border: 0;
    border-radius: 10px;
    background: var(--cg-teal);
    color: var(--cg-ink);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.2s;
}
body.index-body .cp-skip-link:focus {
    left: 16px;
    top: 12px;
}
body.index-body #icerik:focus {
    outline: none;
}

/* Ön yükleyici */
body.index-body #app-preloader {
    background: var(--cg-bg);
}
body.index-body .loader-shield .shield-outline {
    stroke: var(--cg-teal);
}
body.index-body .loader-shield .shield-inner {
    fill: rgba(var(--cg-teal-rgb), 0.18);
}

/* ---------- Yerleşim ---------- */
.cg-sayfa {
    position: relative;
    z-index: 1;
    flex: 1 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    justify-items: center;
    gap: 1.25rem;
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding: clamp(1.1rem, 3vw, 2.5rem) 16px clamp(1.5rem, 3vw, 2.5rem);
}

/* Mobil / tablet: marka paneli kutu üretmez, çocukları ızgaraya dizilir (DOM sırası = görsel sıra):
   logo → slogan → kart → "Ceepri'yi tanıyın / destek" satırı. Değer listesi yalnız masaüstünde. */
.cg-marka {
    display: contents;
}
.cg-liste {
    display: none;
}

@media (min-width: 640px) {
    .cg-sayfa {
        padding-inline: 24px;
    }
}

/* Masaüstü: solda marka paneli (+ altında bağlantı satırı), sağda cam kart */
@media (min-width: 960px) {
    .cg-sayfa {
        grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
        grid-template-areas:
            'marka card'
            'alt card';
        align-items: center;
        justify-items: stretch;
        gap: 1.75rem clamp(2.5rem, 6vw, 5.5rem);
    }
    .cg-marka {
        grid-area: marka;
        align-self: end;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.75rem;
        width: 100%;
        max-width: 34rem;
    }
    .cg-sayfa > .auth-container {
        grid-area: card;
        align-self: center;
    }
    .cg-marka__alt {
        grid-area: alt;
        align-self: start;
        max-width: 34rem;
    }
    .cg-liste {
        display: grid;
    }
}

/* ---------- Marka paneli ---------- */
.cg-logo {
    display: inline-flex;
    align-items: center;
    border-radius: 10px;
    text-decoration: none;
}
body.index-body .cg-logo__img {
    display: block;
    width: 56px;
    height: 56px;
    max-width: 100%;
    margin: 0;
    animation: none !important;
    filter: none;
    transform: none;
}
@media (min-width: 960px) {
    body.index-body .cg-logo__img {
        width: 72px;
        height: 72px;
    }
}

.cg-marka__metin {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    text-align: center;
}
@media (min-width: 960px) {
    .cg-marka__metin {
        align-items: flex-start;
        text-align: left;
    }
}

.cg-eyebrow {
    display: none;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    padding: 0.35rem 0.8rem 0.35rem 0.6rem;
    border-radius: 999px;
    background: var(--cg-eyebrow-bg);
    border: 1px solid var(--cg-eyebrow-line);
    color: var(--cg-teal-3);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.3;
}
.cg-eyebrow .cg-ikon {
    width: 1rem;
    height: 1rem;
}
@media (min-width: 960px) {
    .cg-eyebrow {
        display: inline-flex;
    }
}

body.index-body .cg-baslik {
    margin: 0;
    color: var(--cg-text);
    font-size: clamp(1.7rem, 7vw, 2.2rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.035em;
}
@media (min-width: 960px) {
    body.index-body .cg-baslik {
        font-size: clamp(2.6rem, 4.6vw, 3.6rem);
    }
}
.cg-vurgu {
    background: var(--cg-vurgu-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.cg-lead {
    display: none;
    margin: 0;
    max-width: 30rem;
    color: var(--cg-muted);
    font-size: 1.05rem;
    line-height: 1.6;
}
@media (min-width: 960px) {
    .cg-lead {
        display: block;
    }
}

.cg-liste {
    gap: 0.7rem;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}
.cg-liste li {
    display: flex;
    align-items: flex-start;
    gap: 0.95rem;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    background: var(--cg-surface);
    border: 1px solid var(--cg-line);
    transition: border-color 0.2s, background-color 0.2s;
}
.cg-liste li:hover {
    background: var(--cg-surface-2);
    border-color: var(--cg-line-2);
}
.cg-liste__ikon {
    display: grid;
    place-items: center;
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--cg-icon-bg);
    border: 1px solid var(--cg-icon-line);
    color: var(--cg-teal-3);
}
.cg-liste__ikon .cg-ikon {
    width: 20px;
    height: 20px;
}
.cg-liste__metin {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.35;
}
.cg-liste__metin b {
    color: var(--cg-text);
    font-size: 0.98rem;
    font-weight: 600;
}
.cg-liste__metin span {
    margin-top: 0.2rem;
    color: var(--cg-muted);
    font-size: 0.86rem;
    line-height: 1.5;
}

.cg-marka__alt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.6rem 1.5rem;
    width: 100%;
    color: var(--cg-muted);
    font-size: 0.9rem;
}
@media (min-width: 960px) {
    .cg-marka__alt {
        justify-content: flex-start;
        padding-top: 1.25rem;
        border-top: 1px solid var(--cg-line);
    }
}
.cg-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 6px;
    color: var(--cg-teal-3);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s;
}
.cg-link .cg-ikon {
    width: 1.05em;
    height: 1.05em;
    transition: transform 0.2s;
}
.cg-link:hover {
    color: var(--cg-link-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.cg-link:hover .cg-ikon {
    transform: translateX(3px);
}
.cg-destek a {
    border-radius: 6px;
    color: var(--cg-text);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.cg-destek a:hover {
    color: var(--cg-teal-3);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- Giriş / üyelik kartı ---------- */
body.index-body .cg-sayfa > .auth-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    padding: clamp(1.35rem, 4vw, 2.25rem);
    background: var(--cg-card-bg);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid var(--cg-line-2);
    border-top-color: var(--cg-card-top);
    border-radius: 22px;
    box-shadow: var(--cg-card-sh);
    text-align: left !important;
    transform: none !important; /* uygulama.js 3B eğim efekti (applyTiltEffect) kapalı: bulanık metin + hareket hassasiyeti */
    transition: none;
    animation: cg-giris 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes cg-giris {
    from {
        opacity: 0.9;
    }
    to {
        opacity: 1;
    }
}

/* Tema anahtarı (kart üstü sağ) */
body.index-body .cg-tema-satir {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    margin: -0.5rem 0 0.85rem;
    color: var(--cg-muted);
    font-size: 0.8rem;
    font-weight: 600;
}
body.index-body .cg-logo .cp-logo--acik { display: none; }
:root[data-theme="dark"] body.index-body .cg-logo .cp-logo--acik { display: block; }
:root[data-theme="dark"] body.index-body .cg-logo .cp-logo--koyu { display: none; }

/* Sekmeler: segmentli kontrol */
body.index-body .auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin: 0 0 1.6rem;
    padding: 4px;
    background: var(--cg-tabs-bg);
    border: 1px solid var(--cg-line);
    border-radius: 14px;
}
body.index-body .auth-tab {
    position: relative;
    min-height: 44px;
    padding: 0 0.75rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--cg-muted);
    font: 600 0.95rem/1 var(--cg-font);
    letter-spacing: 0;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
body.index-body .auth-tab::after {
    display: none;
}
body.index-body .auth-tab:hover {
    color: var(--cg-text);
    background: rgba(var(--cg-ov), 0.05);
}
body.index-body .auth-tab.active {
    color: var(--cg-on);
    background: var(--cg-tab-act);
    border-color: var(--cg-tab-act-line);
    box-shadow: var(--cg-tab-act-sh);
}

/* Formlar */
body.index-body .auth-form {
    display: none;
    flex-direction: column;
    gap: 1.1rem;
    text-align: left !important;
    animation: cg-form-gir 0.35s ease;
}
body.index-body .auth-form.active {
    display: flex;
}
@keyframes cg-form-gir {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.cg-form-bas {
    margin-bottom: 0.15rem;
}
body.index-body .cg-form-baslik {
    margin: 0;
    color: var(--cg-text);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
}
body.index-body .cg-form-alt {
    margin: 0.35rem 0 0;
    color: var(--cg-muted);
    font-size: 0.93rem;
    line-height: 1.5;
}

/* Alanlar: etiket üstte, simge girdinin içinde (aynı grid hücresi) */
body.index-body .auth-form .form-group {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.45rem;
    margin: 0;
    text-align: left !important;
}
body.index-body .auth-form .form-group label {
    grid-row: 1;
    display: block;
    margin: 0;
    color: var(--cg-label);
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.3;
    text-align: left;
    opacity: 1;
}
body.index-body .auth-form .form-group input {
    grid-row: 2;
    grid-column: 1;
    width: 100%;
    min-width: 0;
    min-height: 52px;
    margin: 0;
    padding: 0 1rem 0 2.9rem;
    background: var(--cg-input);
    border: 1px solid var(--cg-line-2);
    border-radius: var(--cg-radius-sm);
    color: var(--cg-input-text);
    font: 500 1rem/1.2 var(--cg-font);
    outline: none;
    box-shadow: var(--cg-in-sh);
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
body.index-body .auth-form .form-group input::placeholder {
    color: var(--cg-placeholder);
    opacity: 1;
}
body.index-body .auth-form .form-group input:hover {
    border-color: var(--cg-input-line-h);
}
body.index-body .auth-form .form-group input:focus,
body.index-body .auth-form .form-group input:not(:placeholder-shown):focus {
    background: var(--cg-input-f);
    border-color: var(--cg-teal);
    box-shadow:
        0 0 0 3px rgba(var(--cg-teal-rgb), 0.3),
        var(--cg-in-sh-f);
}
body.index-body .auth-form .form-group input:not(:placeholder-shown):not(:focus) {
    background: var(--cg-input);
    border-color: var(--cg-line-2);
    box-shadow: var(--cg-in-sh);
}
body.index-body .auth-form .form-group input:-webkit-autofill,
body.index-body .auth-form .form-group input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--cg-input-text);
    caret-color: var(--cg-input-text);
    transition: background-color 600000s 0s, color 600000s 0s;
}

/* Telefon alanı: büyük ve net */
body.index-body .auth-form .form-group.cg-field--buyuk input {
    min-height: 60px;
    padding-left: 3.1rem;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
}
body.index-body .auth-form .form-group.cg-field--buyuk input::placeholder {
    font-weight: 500;
    letter-spacing: 0.04em;
}
body.index-body .cg-field--buyuk .cg-field__ikon {
    width: 22px;
    height: 22px;
    margin-left: 1.05rem;
}
.cg-field__ikon {
    grid-row: 2;
    grid-column: 1;
    align-self: center;
    justify-self: start;
    z-index: 1;
    width: 20px;
    height: 20px;
    margin-left: 1rem;
    color: var(--cg-teal-3);
    opacity: 0.85;
    pointer-events: none;
    transition: color 0.2s, opacity 0.2s;
}
body.index-body .form-group:focus-within .cg-field__ikon {
    color: var(--cg-teal);
    opacity: 1;
}

/* uygulama.js doğrulama durumlarını girdinin inline borderColor'ı ile verir:
   #34b3c0 = hatalı/kayıtlı, #14b8a6 = uygun. Bunları anlamlı renklere çeviriyoruz. */
body.index-body .auth-form .form-group input[style*='52, 179, 192'] {
    border-color: var(--cg-danger) !important;
    box-shadow: 0 0 0 3px rgba(255, 120, 120, 0.18) !important;
}
body.index-body .auth-form .form-group input[style*='20, 184, 166'] {
    border-color: var(--cg-ok-green) !important;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.16) !important;
}
/* "Zaten Kayıtlı!" uyarısı: balonun yerine alanın altında satır içi bilgi */
body.index-body .anlik-uyari {
    position: static !important;
    grid-row: 3;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0.45rem 0.7rem !important;
    border: 1px solid rgba(255, 120, 120, 0.4);
    border-radius: 10px !important;
    background: var(--cg-danger-bg) !important;
    color: var(--cg-anlik) !important;
    font-size: 0.82rem !important;
    line-height: 1.3;
    box-shadow: none !important;
    animation: none !important;
}
body.index-body .anlik-uyari > div {
    display: none !important;
}

/* Birincil buton: tanıtımdaki .tn-btn--primary ile aynı (stil.css'in kayan degrade/parıltı efektleri kapalı) */
body.index-body .btn-primary,
body.index-body .btn-save-modal {
    position: relative !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.55rem !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 54px;
    margin: 0.3rem 0 0 !important;
    padding: 0 1.5rem !important;
    background: linear-gradient(180deg, #3fd0d7, #26aab5) !important;
    background-size: auto !important;
    border: 1px solid rgba(126, 227, 232, 0.6) !important;
    border-radius: 14px !important;
    color: var(--cg-ink) !important;
    font: 700 1rem/1.2 var(--cg-font) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-shadow: none !important;
    cursor: pointer;
    overflow: visible !important;
    box-shadow:
        0 0 0 1px rgba(var(--cg-teal-rgb), 0.15),
        0 10px 30px -10px rgba(var(--cg-teal-rgb), 0.65),
        inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
    animation: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: transform 0.15s ease, background 0.2s, box-shadow 0.2s !important;
}
body.index-body .btn-primary::after,
body.index-body .btn-save-modal::after {
    display: none !important;
}
body.index-body .btn-primary i,
body.index-body .btn-save-modal i {
    color: inherit !important;
    font-size: 1em !important;
    transform: none;
}
body.index-body .btn-primary .cg-ikon {
    width: 1.1em;
    height: 1.1em;
    transition: transform 0.2s;
}
body.index-body .btn-primary:hover,
body.index-body .btn-save-modal:hover {
    background: linear-gradient(180deg, #55dbe1, #2cb5bf) !important;
    border-color: rgba(126, 227, 232, 0.75) !important;
    box-shadow:
        0 0 0 1px rgba(var(--cg-teal-rgb), 0.25),
        0 14px 36px -10px rgba(var(--cg-teal-rgb), 0.8),
        inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-1px);
    animation: none !important;
    filter: none !important;
}
body.index-body .btn-primary:hover .cg-ikon {
    transform: translateX(3px);
}
body.index-body .btn-primary:active,
body.index-body .btn-save-modal:active {
    background: linear-gradient(180deg, #34bfc6, #22a0aa) !important;
    transform: translateY(1px);
    filter: none !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}
body.index-body .btn-primary:focus-visible,
body.index-body .btn-save-modal:focus-visible {
    outline: 2px solid var(--cg-focus-on);
    outline-offset: 3px;
}
body.index-body .btn-primary:disabled {
    opacity: 0.72;
    cursor: progress;
    transform: none;
}

.cg-ipucu {
    margin: -0.2rem 0 0;
    color: var(--cg-muted);
    font-size: 0.84rem;
    line-height: 1.4;
    text-align: center;
}

/* ---------- Sosyal giriş (cp_auth_social_buttons_html çıktısı) ---------- */
body.index-body .cp-social-auth {
    width: 100%;
    margin-top: 0.6rem;
}
body.index-body .cp-social-auth__label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0.85rem;
    color: var(--cg-muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-align: center;
    text-transform: uppercase;
}
body.index-body .cp-social-auth__label::before,
body.index-body .cp-social-auth__label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--cg-line);
}
body.index-body .cp-social-auth__row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 0.6rem;
}
body.index-body .cp-social-btn {
    position: relative;
    width: 100%;
    height: 54px;
    padding: 0 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cg-line-2);
    border-radius: 14px;
    background: var(--cg-sosyal-bg);
    box-shadow: inset 0 1px 0 rgba(var(--cg-hi), 0.05);
    color: var(--cg-text);
    font-size: 1.2rem;
    text-decoration: none;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}
body.index-body .cp-social-btn:hover:not(.is-disabled):not(:disabled) {
    background: var(--cg-sosyal-bg-h);
    border-color: var(--cg-sosyal-line-h);
    transform: translateY(-1px);
}
body.index-body .cp-social-btn:focus-visible:not(.is-disabled):not(:disabled) {
    background: var(--cg-sosyal-bg-h);
    border-color: var(--cg-teal);
    outline: 2px solid var(--cg-teal);
    outline-offset: 2px;
}
body.index-body .cp-social-btn--google i {
    color: var(--cg-sosyal-google);
}
body.index-body .cp-social-btn--apple i {
    color: var(--cg-sosyal-apple);
}
body.index-body .cp-social-btn--microsoft i {
    color: var(--cg-sosyal-ms);
}
body.index-body .cp-social-btn--facebook i {
    color: var(--cg-sosyal-fb);
}
/* Pasif sağlayıcılar: düğme soluk, ama "Yakında" etiketi okunur kalır (opacity yalnız simgede) */
body.index-body .cp-social-btn.is-disabled,
body.index-body .cp-social-btn:disabled {
    opacity: 1;
    filter: none;
    cursor: not-allowed;
    background: var(--cg-sosyal-off-bg);
    border-color: var(--cg-sosyal-off-line);
    box-shadow: none;
}
body.index-body .cp-social-btn.is-disabled i,
body.index-body .cp-social-btn:disabled i {
    opacity: 0.6;
}
body.index-body .cp-social-btn.is-disabled:hover,
body.index-body .cp-social-btn.is-disabled:focus-visible {
    background: var(--cg-sosyal-off-bg);
    border-color: var(--cg-sosyal-off-line);
}
body.index-body .cp-social-btn.is-disabled:focus-visible {
    outline: 2px solid var(--cg-teal);
    outline-offset: 2px;
}
/* "Yakında" etiketi — metin yalnız görsel; erişilebilir ad zaten aria-label'da */
body.index-body .cp-social-btn[data-cp-social-soon]::after {
    content: 'Yakında';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 7px;
    color: var(--cg-sosyal-soon);
    font: 600 0.62rem/1 var(--cg-font);
    letter-spacing: 0.04em;
    text-align: center;
}

/* ---------- Uyarı bantları ---------- */
body.index-body .cp-auth-alert {
    margin: 0 0 1.1rem;
    padding: 0.75rem 0.95rem;
    border: 1px solid transparent;
    border-radius: var(--cg-radius-sm);
    font-size: 0.85rem;
    line-height: 1.5;
    text-align: left;
}
body.index-body .cp-auth-alert code {
    padding: 0.05rem 0.35rem;
    border-radius: 6px;
    background: var(--cg-code-bg);
    font-size: 0.92em;
    overflow-wrap: anywhere;
}
body.index-body .cp-auth-alert small {
    font-size: 0.92em;
}
body.index-body .cp-auth-alert--error {
    background: var(--cg-danger-bg);
    border-color: rgba(255, 120, 120, 0.38);
    color: var(--cg-alert-err);
}
body.index-body .cp-auth-alert--warn {
    background: rgba(255, 196, 77, 0.09);
    border-color: rgba(255, 196, 77, 0.32);
    color: var(--cg-warn);
}
body.index-body .cp-auth-alert--ok {
    background: rgba(var(--cg-teal-rgb), 0.1);
    border-color: rgba(var(--cg-teal-rgb), 0.32);
    color: var(--cg-alert-ok);
}

/* ---------- Altbilgi (cp_firma_public_footer_html('landing') çıktısı) ---------- */
body.index-body .cp-public-footer--landing {
    position: relative;
    inset: auto;
    z-index: 2;
    flex: none;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 1rem 1.25rem calc(1.1rem + env(safe-area-inset-bottom, 0px));
    background: none;
    border-top: 1px solid var(--cg-line);
    text-align: center;
    pointer-events: auto;
}
body.index-body .cp-public-footer--landing .cp-public-footer__nav {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.55rem 0.7rem;
    max-width: min(36rem, 100%);
}
/* Destek telefonu marka panelinde / kartın altında zaten var: altbilgide tekrar etmesin (telefon bağlantısı + ayraç) */
body.index-body .cp-public-footer--landing .cp-public-footer__nav > :nth-child(-n + 2) {
    display: none;
}
body.index-body .cp-public-footer__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 6px;
    color: var(--cg-muted);
    font-size: 0.82rem;
    line-height: 1.2;
    text-decoration: none;
    transition: color 0.2s;
}
body.index-body .cp-public-footer__link i {
    color: var(--cg-teal-2);
    font-size: 0.8rem;
}
/* fa-giris.css yalnız solid/brands yedeğini bilir; .fa-regular zarf simgesi FA gelene dek düz kareye dönüşüyordu */
body.index-body .cp-public-footer__link .fa-regular {
    width: auto;
    height: auto;
    background: none !important;
    -webkit-mask: none !important;
    mask: none !important;
}
body.index-body .cp-public-footer__link:hover,
body.index-body .cp-public-footer__link:focus-visible {
    color: var(--cg-text);
}
body.index-body .cp-public-footer__link:focus-visible,
body.index-body .cp-public-footer__credit a:focus-visible {
    outline: 2px solid var(--cg-teal);
    outline-offset: 3px;
}
body.index-body .cp-public-footer--landing .cp-public-footer__credit {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.4;
}
body.index-body .cp-public-footer__credit a {
    color: var(--cg-footer-credit);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
}
body.index-body .cp-public-footer__credit a:hover {
    color: var(--cg-text);
}

/* ==========================================================================
   MODALLAR (OTP, yöntem seçimi, şifre, desen, ses, yüz, resim seçme, resim nokta, cihaz)
   HTML index.php'de; uygulama.js yalnız .active ekler/kaldırır. Yalnız görünüm.
   ========================================================================== */
body.index-body {
    --auth-modal-accent: #2fc4cc;
    --auth-modal-accent-2: #5aa8ff;
    --auth-modal-surface: rgba(255, 255, 255, 0.98);
    --auth-modal-surface-soft: rgba(11, 26, 48, 0.04);
    --auth-modal-line: rgba(11, 26, 48, 0.14);
    --auth-modal-text: #0b1a30;
    --auth-modal-muted: #46586f;
}
:root[data-theme="dark"] body.index-body {
    --auth-modal-surface: rgba(8, 22, 41, 0.98);
    --auth-modal-surface-soft: rgba(12, 28, 52, 0.8);
    --auth-modal-line: rgba(160, 196, 236, 0.16);
    --auth-modal-text: #eaf2fb;
    --auth-modal-muted: #9fb3cd;
}

body.index-body .modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
}
body.index-body .modal.active {
    display: flex;
}

body.index-body .auth-modal {
    background:
        var(--cg-modal-glow),
        var(--cg-modal-bg);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    backdrop-filter: blur(16px) saturate(130%);
}

body.index-body .auth-modal .auth-modal-card,
body.index-body .otp-modal-content {
    background: var(--cg-modal-card) !important;
    border: 1px solid transparent !important;
    border-radius: 22px !important;
    box-shadow: var(--cg-modal-card-sh) !important;
}
body.index-body .auth-modal .auth-modal-card::before {
    background: var(--cg-modal-top);
}

body.index-body .auth-modal-header h3 {
    color: var(--cg-text);
    font-family: var(--cg-font);
    font-weight: 700;
}
body.index-body .auth-modal-description {
    color: var(--cg-muted) !important;
}
body.index-body .auth-modal-close {
    border-color: var(--cg-line-2);
    background: var(--cg-close-bg);
    color: var(--cg-muted);
    cursor: pointer;
}
body.index-body .auth-modal-close:hover,
body.index-body .auth-modal-close:focus-visible {
    color: var(--cg-on);
    background: rgba(var(--cg-teal-rgb), 0.16);
    border-color: rgba(var(--cg-teal-rgb), 0.6);
}
body.index-body .auth-modal-close:focus-visible {
    outline: 2px solid var(--cg-teal-3);
    outline-offset: 2px;
}

/* Modal içindeki birincil butonlar (Doğrula, Deseni Onayla …) — yukarıdaki .btn-primary kuralı geçerli, ölçüler: */
body.index-body .auth-modal .btn-primary.auth-modal-primary,
body.index-body .auth-modal .auth-modal-primary {
    margin: 1.15rem 0 0 !important;
    min-height: 52px;
    padding: 0 1.25rem !important;
    border-radius: 14px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
}
body.index-body .auth-modal .auth-modal-primary:hover {
    transform: translateY(-1px);
    filter: none !important;
}
body.index-body .auth-modal-actions .auth-modal-primary {
    margin: 0 !important;
}

/* İkincil butonlar */
body.index-body .auth-secondary-btn,
body.index-body #vk-clear.auth-secondary-btn,
body.index-body #nokta-clear.auth-secondary-btn {
    border: 1px solid var(--cg-sec-line);
    background: var(--cg-sec-bg);
    color: var(--cg-teal-3);
    font-family: var(--cg-font);
    font-weight: 600;
    transition: background-color 0.2s, border-color 0.2s;
}
body.index-body .auth-secondary-btn:hover {
    background: var(--cg-sec-bg-h);
    border-color: rgba(var(--cg-teal-rgb), 0.55);
}
body.index-body .auth-otp-resend {
    border-color: var(--cg-resend-line);
    background: var(--cg-resend-bg);
    color: var(--cg-teal-3);
}
body.index-body .auth-otp-resend:hover:not(:disabled) {
    background: var(--cg-sec-bg-h);
    border-color: rgba(var(--cg-teal-rgb), 0.5);
    color: var(--cg-on);
}

/* OTP */
body.index-body .otp-digit {
    border: 1px solid var(--cg-otp-line);
    background: var(--cg-otp-bg);
    color: var(--cg-input-text);
    font-family: var(--cg-font);
    font-weight: 600;
    caret-color: var(--cg-teal);
}
body.index-body .otp-digit::placeholder {
    color: var(--cg-otp-ph);
}
body.index-body .otp-digit:focus {
    outline: none;
    border-color: var(--cg-teal);
    box-shadow:
        0 0 0 3px rgba(var(--cg-teal-rgb), 0.3),
        0 10px 25px rgba(var(--cg-teal-rgb), 0.12);
}
body.index-body .otp-digit.otp-error,
body.index-body .otp-error {
    border-color: var(--cg-danger) !important;
    box-shadow: 0 0 0 3px rgba(255, 120, 120, 0.2) !important;
}
body.index-body .otp-digit.otp-success,
body.index-body .otp-success {
    border-color: var(--cg-ok-green) !important;
    background: rgba(52, 211, 153, 0.12) !important;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18) !important;
}
body.index-body .auth-otp-meta {
    color: var(--cg-text-4);
}

/* Giriş yöntemi seçimi */
body.index-body .method-group-title {
    color: var(--cg-teal-3);
}
body.index-body .method-group-title.passive-title {
    color: var(--cg-text-4);
}
body.index-body .method-group-title::before,
body.index-body .method-group-title::after {
    border-color: rgba(var(--cg-teal-rgb), 0.2);
}
body.index-body .method-grid-meta {
    color: var(--cg-muted);
    font-size: 0.82rem;
}
body.index-body .method-active {
    background: var(--cg-method-act) !important;
    border: 1px solid transparent !important;
    color: var(--cg-text);
    cursor: pointer;
}
body.index-body .method-active:hover,
body.index-body .method-active:focus-visible {
    background: var(--cg-method-act-h) !important;
    box-shadow: var(--cg-method-act-sh) !important;
}
body.index-body .method-active:focus-visible {
    outline: 2px solid var(--cg-teal-3);
    outline-offset: 2px;
}
body.index-body .method-btn .method-icon {
    border-color: var(--cg-icon-line);
    background: var(--cg-icon-bg);
    color: var(--cg-teal-3) !important;
}
body.index-body .method-passive {
    border: 1px dashed var(--cg-method-pasif-line) !important;
    background: var(--cg-method-pasif) !important;
    opacity: 0.6 !important;
}
body.index-body .method-passive .method-icon {
    color: var(--cg-method-ico) !important;
}
body.index-body .method-title {
    color: var(--cg-text) !important;
}
body.index-body .method-subtitle {
    color: var(--cg-method-sub) !important;
}
body.index-body .method-lock-icon {
    color: var(--cg-method-ico);
}

/* Şifre / sanal klavye */
body.index-body .auth-field-label {
    color: var(--cg-text-3);
}
body.index-body .auth-password-input,
body.index-body #sifre-input,
body.index-body #sifre-input.auth-password-input,
body.index-body #voice-fallback-input {
    border: 1px solid var(--cg-otp-line) !important;
    background: var(--cg-otp-bg) !important;
    color: var(--cg-input-text) !important;
    font-family: var(--cg-font);
}
body.index-body .auth-password-input:focus,
body.index-body #voice-fallback-input:focus {
    border-color: var(--cg-teal) !important;
    box-shadow:
        inset 0 2px 12px rgba(var(--cg-sh), 0.12),
        0 0 0 3px rgba(var(--cg-teal-rgb), 0.3) !important;
    outline: none;
}
body.index-body .auth-keypad-key {
    border-color: var(--cg-otp-line);
    background: var(--cg-keypad);
    color: var(--cg-teal-3);
    font-family: var(--cg-font);
}
body.index-body .auth-keypad-key:hover,
body.index-body .auth-keypad-key:focus-visible {
    border-color: rgba(var(--cg-teal-rgb), 0.8);
    background: rgba(var(--cg-teal-rgb), 0.2);
    color: var(--cg-keypad-h-text);
}
body.index-body .auth-keypad-key:focus-visible {
    outline: 2px solid var(--cg-teal-3);
    outline-offset: 2px;
}
body.index-body .auth-password-strength__list {
    color: var(--cg-pwlist);
}

/* Desen */
body.index-body .auth-info-banner {
    border-color: rgba(var(--cg-teal-rgb), 0.3);
    background: var(--cg-info-bg);
}
body.index-body .auth-info-banner i {
    color: var(--cg-teal);
}
body.index-body .auth-ghost-toggle {
    border-color: var(--cg-line);
    background: var(--cg-ghost-bg);
    color: var(--cg-ghost-text);
}
body.index-body .auth-ghost-toggle input:checked {
    border-color: rgba(var(--cg-teal-rgb), 0.6);
    background: rgba(var(--cg-teal-rgb), 0.36);
}
body.index-body .auth-ghost-toggle input:focus-visible {
    outline: 2px solid var(--cg-teal-3);
    outline-offset: 2px;
}
body.index-body .auth-pattern-board {
    border-color: rgba(var(--cg-teal-rgb), 0.3);
    background: var(--cg-pattern-bg);
}

/* Biyometrik / cihaz */
body.index-body .scanner-ring,
body.index-body .auth-biometric__ring {
    background: radial-gradient(circle, rgba(var(--cg-teal-rgb), 0.14), rgba(var(--cg-teal-rgb), 0.03)) !important;
    border-color: rgba(var(--cg-teal-rgb), 0.38) !important;
}
body.index-body .auth-biometric__icon {
    color: var(--cg-teal) !important;
}
body.index-body .auth-biometric__icon.is-success {
    color: var(--cg-ok-green) !important;
}
body.index-body .auth-biometric__icon.is-error {
    color: var(--cg-danger) !important;
}
body.index-body .auth-status-chip {
    border-color: rgba(90, 168, 255, 0.32);
    background: rgba(90, 168, 255, 0.1);
    color: var(--cg-chip-info);
}
body.index-body .auth-status-chip--success {
    border-color: rgba(52, 211, 153, 0.38);
    background: rgba(52, 211, 153, 0.1);
    color: var(--cg-chip-ok);
}
body.index-body .auth-status-chip--error {
    border-color: rgba(255, 120, 120, 0.38);
    background: var(--cg-danger-bg);
    color: var(--cg-chip-err);
}

/* Ses */
body.index-body .auth-voice-panel {
    border-color: rgba(var(--cg-teal-rgb), 0.3);
    background: rgba(var(--cg-teal-rgb), 0.07);
}
body.index-body .auth-voice-panel__hint {
    color: var(--cg-muted);
}
body.index-body .auth-voice-visualizer__meta {
    color: var(--cg-teal-3);
}
body.index-body .auth-voice-visualizer__canvas {
    border-color: rgba(var(--cg-teal-rgb), 0.3);
}
body.index-body .auth-voice-btn {
    background: linear-gradient(180deg, #3fd0d7, #26aab5);
    color: var(--cg-ink);
    border: 1px solid rgba(126, 227, 232, 0.6);
    box-shadow: 0 0 28px rgba(var(--cg-teal-rgb), 0.35);
    cursor: pointer;
}
body.index-body .auth-voice-btn:focus-visible {
    outline: 2px solid var(--cg-focus-on);
    outline-offset: 4px;
}
body.index-body .auth-voice-status {
    color: var(--cg-muted);
}
body.index-body .auth-voice-result {
    color: var(--cg-ok);
}
body.index-body .auth-voice-fallback {
    border-top-color: var(--cg-line);
}

/* Yüz */
body.index-body .auth-face-stage {
    border-color: rgba(var(--cg-teal-rgb), 0.28);
}
body.index-body .auth-face-corner {
    border-color: var(--cg-corner);
}
body.index-body .auth-face-guide {
    border-color: var(--cg-guide);
}
body.index-body .auth-face-status {
    color: var(--cg-face-text);
}
body.index-body .auth-face-progress__bar {
    background: var(--cg-teal);
}
body.index-body .scanner-laser {
    background: var(--cg-teal);
    box-shadow:
        0 0 10px var(--cg-teal),
        0 0 20px var(--cg-teal);
}

/* Resim seçme / nokta */
body.index-body .auth-image-tile {
    border: 2px solid var(--cg-line);
}
body.index-body .auth-image-tile:focus-visible {
    outline: 2px solid var(--cg-teal-3);
    outline-offset: 2px;
}
body.index-body .auth-image-tile.is-selected {
    border-color: var(--cg-teal);
    box-shadow: 0 0 0 3px rgba(var(--cg-teal-rgb), 0.3);
}
body.index-body .auth-point-stage {
    border-color: rgba(var(--cg-teal-rgb), 0.28);
    background: var(--cg-point-bg);
}
body.index-body #nokta-kalan {
    color: var(--cg-teal-3);
    font-weight: 700;
}

/* ---------- Uyarı / onay diyalogları (showToast → premium-dialog) ---------- */
body.index-body .premium-dialog-overlay {
    background:
        radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--dialog-accent, #2fc4cc) 12%, transparent), transparent 24rem),
        var(--cg-dialog-overlay);
}
body.index-body .premium-dialog-card {
    background:
        var(--cg-dialog-bg),
        linear-gradient(145deg, color-mix(in srgb, var(--dialog-accent, #2fc4cc) 50%, transparent), rgba(var(--cg-ov), 0.12)) border-box;
    border-radius: 22px;
}
body.index-body .premium-dialog-card p {
    color: var(--cg-muted);
}
body.index-body .premium-dialog-primary,
body.index-body .premium-dialog-secondary {
    font-family: var(--cg-font);
    border-radius: 14px;
}
body.index-body .premium-dialog-primary {
    color: #06121f;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
body.index-body .premium-dialog-secondary {
    border-color: var(--cg-line-2);
    background: var(--cg-dialog-sec);
    color: var(--cg-text);
}
body.index-body .premium-dialog-primary:focus-visible,
body.index-body .premium-dialog-secondary:focus-visible {
    outline: 2px solid var(--cg-focus-on);
    outline-offset: 2px;
}

/* ---------- Küçük ekranlar ---------- */
@media (max-width: 480px) {
    body.index-body .cg-sayfa > .auth-container {
        border-radius: 20px;
    }
    body.index-body .cg-form-baslik {
        font-size: 1.3rem;
    }
    body.index-body .cp-social-auth__row {
        gap: 0.5rem;
    }
}
@media (max-width: 370px) {
    .cg-sayfa {
        padding-inline: 12px;
    }
    body.index-body .auth-form .form-group.cg-field--buyuk input {
        font-size: 1.2rem;
        letter-spacing: 0.02em;
    }
}

/* ---------- Erişilebilirlik ---------- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    body.index-body *,
    body.index-body *::before,
    body.index-body *::after,
    body.index-body .btn-primary,
    body.index-body .btn-save-modal {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    body.index-body .btn-primary:hover,
    body.index-body .cp-social-btn:hover,
    body.index-body .auth-modal-primary:hover {
        transform: none;
    }
}

@media (forced-colors: active) {
    body.index-body .btn-primary,
    body.index-body .auth-tab.active,
    body.index-body .auth-tab,
    body.index-body .cp-social-btn,
    body.index-body .auth-form .form-group input {
        border: 1px solid ButtonText !important;
    }
    body.index-body .auth-tab.active {
        outline: 2px solid Highlight;
    }
    .cg-vurgu {
        color: LinkText;
        background: none;
        -webkit-background-clip: border-box;
        background-clip: border-box;
    }
}

/* ---------- giris.css'teki koyu zemin varsayımlı renkler (jetonlu; karanlıkta giris.css değerlerine eşit) ---------- */
body.index-body .premium-dialog-card {
    color: var(--cg-dialog-title);
    box-shadow: var(--cg-dialog-sh);
}
body.index-body .premium-dialog-card h3 {
    color: var(--cg-dialog-title);
}
body.index-body .premium-dialog-card p {
    color: var(--cg-dialog-text);
}
body.index-body .premium-dialog-icon {
    background: var(--cg-dialog-icon);
}
body.index-body #vk-clear {
    color: var(--cg-clear-text) !important;
}
body.index-body .auth-info-banner {
    color: var(--cg-info-text);
}
body.index-body .auth-voice-panel__challenge {
    color: var(--cg-challenge);
}
body.index-body .auth-biometric__title {
    color: var(--cg-bio-title);
}
/* Başlık yazı tipi (Tasarım Yöneticisi: --cp-font-baslik; tanımsızsa gövde yazı tipi = eski görünüm) */
body.index-body .cg-baslik,
body.index-body .cg-form-baslik,
body.index-body .auth-modal-header h3 {
    font-family: var(--cg-font-baslik);
}

/* ---------- Tema düzeltmeleri (aydınlık: koyu kalıntılar giderildi; giris.css'in sabit koyu değerlerini ezer) ---------- */
:root:not([data-theme="dark"]) body.index-body .auth-virtual-keypad,
:root:not([data-theme="dark"]) body.index-body #virtual-keypad.auth-virtual-keypad {
    background: rgba(var(--cg-ov), 0.04) !important;
    border-color: var(--cg-line-2) !important;
}
:root:not([data-theme="dark"]) body.index-body .auth-face-status-panel {
    background: rgba(var(--cg-ov), 0.05);
    border: 1px solid var(--cg-line);
}
:root:not([data-theme="dark"]) body.index-body .auth-face-status {
    color: var(--cg-label);
}
:root:not([data-theme="dark"]) body.index-body .auth-face-progress {
    background: rgba(var(--cg-ov), 0.12);
}
:root:not([data-theme="dark"]) body.index-body .auth-password-input,
:root:not([data-theme="dark"]) body.index-body #sifre-input.auth-password-input,
:root:not([data-theme="dark"]) body.index-body #voice-fallback-input {
    box-shadow: var(--cg-in-sh) !important;
}
/* Pasif (disabled) ikincil/birincil düğmeler: okunur kalsın (aydınlık + karanlık) */
body.index-body .auth-secondary-btn:disabled,
body.index-body .auth-modal-primary:disabled {
    opacity: 0.72;
}