/* ==========================================================================
   Kurumsal Banka Tasarım Katmanı  (kurumsal.css)
   --------------------------------------------------------------------------
   style.css + components.css'in ÜSTÜNE yüklenir; mevcut sınıf adlarını,
   JS hook'larını ve form sözleşmelerini DEĞİŞTİRMEZ — yalnızca renk, tipografi,
   gölge, focus ve kurumsal cila ekler. Tüm değerler tema token'larına bağlıdır
   (--brand-*, --tema-*, --gradient-*), böylece admin tema sistemi çalışmaya
   devam eder.
   ========================================================================== */

:root {
    /* Yarı-şeffaf marka tonları (color-mix ile token'a bağlı) */
    --kf-ink: var(--brand-900, #0e1f3a);
    --kf-accent: var(--tema-aksan, #c9a14a);
    --kf-accent-ink: #1a1407;                 /* gold üzerinde okunur koyu metin */
    --kf-border: rgba(15, 23, 42, 0.10);
    --kf-border-strong: rgba(15, 23, 42, 0.16);
    --kf-ring: color-mix(in srgb, var(--brand-500, #2c5ea6) 55%, transparent);
    --kf-surface: #ffffff;
    --kf-muted: #51607a;

    /* Ölçekli z-index (components.css'teki 9999/10000 kaosunu düzenler) */
    --kf-z-sticky: 50;
    --kf-z-overlay: 1000;
    --kf-z-modal: 1010;
    --kf-z-toast: 1080;

    /* Yumuşak kurumsal gölge katmanları */
    --kf-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.05);
    --kf-shadow-md: 0 10px 30px rgba(15, 23, 42, 0.08), 0 2px 8px rgba(15, 23, 42, 0.05);
    --kf-shadow-lg: 0 24px 60px rgba(13, 31, 64, 0.14), 0 6px 16px rgba(13, 31, 64, 0.08);
}

/* ==========================================================================
   1) Tipografi — tema fontunu uygula (style.css'in Inter zorlamasını ez)
   ========================================================================== */

body {
    font-family: var(--tema-font-body, 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    color: #1c2840;
}

h1, h2, h3, h4, h5, h6, .heading-font {
    font-family: var(--tema-font-heading, 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif);
    letter-spacing: -0.018em;
    color: var(--kf-ink);
}

h1 { letter-spacing: -0.03em; line-height: 1.08; }
h2 { letter-spacing: -0.024em; line-height: 1.15; }

/* Finans rakamları için hizalı (tabular) sayılar — kurumsal detay */
.hero-stat-card strong,
.feature-card .feature-card-title,
.bank-offer-card,
[data-summary-amount],
[data-summary-term],
[data-net-summary],
.kf-tnum {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
}

/* reCAPTCHA klonu metinleri tema fontunu kullansın (Inter hardcode'u yerine) */
.recaptcha-text,
.recaptcha-text-sub { font-family: var(--tema-font-body, system-ui, sans-serif); }

/* ==========================================================================
   2) Global taban — seçim, focus, ince scrollbar
   ========================================================================== */

::selection {
    background: color-mix(in srgb, var(--brand-500, #2c5ea6) 22%, transparent);
    color: var(--kf-ink);
}

/* Erişilebilir, marka renkli klavye odak halkası (tüm interaktif öğeler) */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--brand-500, #2c5ea6);
    outline-offset: 2px;
    border-radius: var(--tema-radius-sm, 6px);
}

* { scrollbar-color: var(--brand-300, #85aae0) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--brand-500, #2c5ea6) 40%, #cbd5e1);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--brand-600, #1e4a8a) 55%, #94a3b8);
    background-clip: padding-box;
}

/* ==========================================================================
   3) Form kontrolleri — kurumsal input dili (Tailwind forms tabanını cilalar)
   ========================================================================== */

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
select:focus,
textarea:focus {
    border-color: var(--brand-500, #2c5ea6);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-500, #2c5ea6) 16%, transparent);
    outline: none;
}

/* Tarayıcı doğrulaması başarısız alanlar (kullanıcı dokunduktan sonra) */
input:not(:placeholder-shown):invalid,
textarea:not(:placeholder-shown):invalid {
    border-color: #e0492f;
}

input::placeholder,
textarea::placeholder { color: #94a3b8; opacity: 1; }

/* ==========================================================================
   4) Butonlar — primary lacivert, premium gold CTA
   ========================================================================== */

/* Header "Başvuru Yap" pill'i: dikkat çeken gold aksan (koyu navbar üzerinde) */
#siteNav .nav-pill--primary,
.nav-pill--primary {
    background: linear-gradient(135deg,
        var(--kf-accent),
        color-mix(in srgb, var(--kf-accent) 78%, #ffffff)) !important;
    color: var(--kf-accent-ink) !important;
    border: 1px solid color-mix(in srgb, var(--kf-accent) 60%, #000) !important;
    box-shadow: 0 10px 28px color-mix(in srgb, var(--kf-accent) 38%, transparent);
    font-weight: 700;
    letter-spacing: 0.005em;
}
#siteNav .nav-pill--primary:hover,
.nav-pill--primary:hover {
    filter: brightness(1.04);
    transform: translateY(-1px);
    transition: transform 0.18s ease, filter 0.18s ease;
}

/* Ürün CTA & adım butonu: derin lacivert gradient + cila */
.product-link {
    background: linear-gradient(135deg, var(--brand-600, #1e4a8a), var(--brand-800, #132d52));
    box-shadow: 0 16px 34px color-mix(in srgb, var(--brand-700, #173a6e) 30%, transparent);
    font-weight: 650;
    letter-spacing: 0.005em;
}
.product-link:hover {
    background: linear-gradient(135deg, var(--brand-500, #2c5ea6), var(--brand-700, #173a6e));
    box-shadow: 0 20px 42px color-mix(in srgb, var(--brand-700, #173a6e) 38%, transparent);
}

.form-step-button--primary {
    background: linear-gradient(135deg, var(--brand-600, #1e4a8a), var(--brand-800, #132d52));
    box-shadow: 0 14px 32px color-mix(in srgb, var(--brand-700, #173a6e) 26%, transparent);
}
.form-step-button--primary:hover {
    box-shadow: 0 18px 38px color-mix(in srgb, var(--brand-700, #173a6e) 34%, transparent);
}
.form-step-button--ghost:hover {
    border-color: var(--brand-400, #4f7fce);
    color: var(--brand-700, #173a6e);
    background-color: var(--brand-50, #eef3fb);
}

/* ==========================================================================
   5) Navigasyon ince ayar — koyu lacivert cam navbar
   ========================================================================== */

#siteNav {
    background: linear-gradient(120deg,
        color-mix(in srgb, var(--brand-900, #0e1f3a) 97%, #000) 0%,
        color-mix(in srgb, var(--brand-800, #132d52) 96%, #000) 100%);
    border-bottom: 1px solid color-mix(in srgb, var(--brand-300, #85aae0) 22%, transparent);
    box-shadow: 0 18px 50px rgba(8, 18, 40, 0.30);
}
[data-nav-sticky].is-condensed #siteNav {
    background: color-mix(in srgb, var(--brand-900, #0e1f3a) 94%, #000);
    box-shadow: 0 10px 34px rgba(8, 18, 40, 0.28);
}
#siteNav .nav-link::after {
    background: linear-gradient(90deg, var(--kf-accent), var(--brand-300, #85aae0));
}

/* ==========================================================================
   6) Kartlar — hairline kenar + yumuşak kurumsal yükseliş
   ========================================================================== */

.feature-card {
    border: 1px solid var(--kf-border);
    border-radius: var(--tema-radius, 14px);
    box-shadow: var(--kf-shadow-sm);
}
.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--kf-shadow-lg);
    border-color: color-mix(in srgb, var(--brand-400, #4f7fce) 45%, transparent);
}
.feature-card-icon {
    background: var(--brand-50, #eef3fb);
    color: var(--brand-700, #173a6e);
}
.feature-card-text { color: var(--kf-muted); }

.bank-offer-card { border-color: var(--kf-border); box-shadow: var(--kf-shadow-sm); }
.bank-offer-card:hover { border-color: var(--brand-400, #4f7fce); box-shadow: var(--kf-shadow-md); }
.bank-offer-card.is-active {
    border-color: var(--brand-600, #1e4a8a);
    box-shadow: 0 16px 34px color-mix(in srgb, var(--brand-600, #1e4a8a) 20%, transparent);
    background: linear-gradient(180deg, var(--brand-50, #eef3fb), #fff 40%);
}
.bank-offer-card__badge {
    background: var(--kf-accent);
    color: var(--kf-accent-ink);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--kf-accent) 35%, transparent);
}

.hero-stat-card { box-shadow: var(--kf-shadow-lg); border-radius: var(--tema-radius-lg, 20px); }
.glass-panel { border-radius: var(--tema-radius-lg, 22px); }

/* ==========================================================================
   7) Hero — token'a bağlı atmosfer (hardcoded indigo parıltısını düzeltir)
   ========================================================================== */

.site-hero::after {
    background: radial-gradient(circle at top right,
        color-mix(in srgb, var(--brand-400, #4f7fce) 28%, transparent),
        transparent 58%);
}
.site-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(color-mix(in srgb, #ffffff 6%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, #ffffff 6%, transparent) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse at 70% 0%, #000 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.hero-content { position: relative; z-index: 1; }
.floating-badge {
    background: color-mix(in srgb, #ffffff 18%, transparent);
    border-color: color-mix(in srgb, #ffffff 30%, transparent);
}

/* ==========================================================================
   8) Stepper / Süreç — MOR gradyanı marka lacivertine çevirir
   ========================================================================== */

.progress-steps { box-shadow: var(--kf-shadow-md); border: 1px solid var(--kf-border); }

.progress-step.active .progress-step-circle {
    background: linear-gradient(135deg, var(--brand-500, #2c5ea6), var(--brand-700, #173a6e));
    box-shadow: 0 6px 18px color-mix(in srgb, var(--brand-600, #1e4a8a) 38%, transparent);
}
.progress-step.completed .progress-step-circle {
    background: linear-gradient(135deg, #0f9d6b, #0b7d54);
    box-shadow: 0 6px 18px rgba(15, 157, 107, 0.30);
}
.progress-step.completed:not(:last-child)::after {
    background: linear-gradient(90deg, #0f9d6b, var(--brand-500, #2c5ea6));
}

/* Üst stepper (form-stepper) çubuğu marka gradyanı */
.form-stepper__bar {
    background: linear-gradient(120deg, var(--brand-600, #1e4a8a), var(--brand-400, #4f7fce));
}
.process-bullet { color: var(--brand-700, #173a6e); }

/* ==========================================================================
   9) Güven rozeti yardımcı bileşeni (yeni, opsiyonel kullanım)
   ========================================================================== */

.kf-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--brand-800, #132d52);
    background: var(--brand-50, #eef3fb);
    border: 1px solid color-mix(in srgb, var(--brand-300, #85aae0) 55%, transparent);
    border-radius: 999px;
}
.kf-trust-badge i { color: var(--kf-accent); }

/* ==========================================================================
   10) Toast / Modal / Overlay — ölçekli z-index + cila
   ========================================================================== */

.loading-overlay { z-index: var(--kf-z-overlay); }
.custom-modal { z-index: var(--kf-z-modal); }
.toast-container { z-index: var(--kf-z-toast); }
.toast-item { box-shadow: var(--kf-shadow-lg); border: 1px solid var(--kf-border); }
.custom-modal-content { box-shadow: var(--kf-shadow-lg); border-radius: var(--tema-radius-lg, 18px); }
.loading-spinner .spinner { border-top-color: var(--kf-accent); }

/* ==========================================================================
   11) Footer ince ayar — lacivert zemin tutarlılığı
   ========================================================================== */

footer#iletisim {
    background:
        radial-gradient(ellipse at top left, color-mix(in srgb, var(--brand-700, #173a6e) 40%, transparent), transparent 55%),
        #0a1424;
}

/* ==========================================================================
   12) Erişilebilirlik — hareket azaltma & kontrast
   ========================================================================== */

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