/* ============================================================
   NITELIX HELPLINE — MARKA RENK KATMANI (Faz 1)
   ------------------------------------------------------------
   Bu dosya renk TANIMLARININ TEK KAYNAGIDIR. Bundan sonraki
   renk degisiklikleri yalnizca bu dosyanin :root blogundan
   yapilir; baska dosyaya sabit hex YAZILMAZ.

   ⚠️ Bootstrap 5.1 notu: bu surumde .btn-primary gibi bilesenler
   --bs-primary degiskeninden BESLENMEZ, renkler derlenmis haldedir
   (degisken tabanli bilesenler 5.3 ile geldi). Bu yuzden asagida
   kullanilan siniflar acikca geçersiz kilinmistir. Bootstrap 5.3+
   surumune gecilirse bu blogun buyuk kismi silinebilir.

   Yukleme sirasi: _Layout / _Layout1 icinde RenderSection("Styles")
   SONRASINDA yuklenir; sayfaya ozel CSS'leri de yenmesi icin.

   Renk kaynagi: Nitelix kurumsal logosu (nitelix-logo-blue.svg)
     #1D3B6D  lacivert   -> brand-600
     #04090F  siyah      -> brand-900
   Diger tonlar ayni ton ailesinden turetildi.
   Kontrast oranlari WCAG AA'ya gore kontrol edildi.
   ============================================================ */

:root {
    /* ---- Marka ---- */
    --nx-brand-900: #04090F;
    --nx-brand-800: #0A1428;
    --nx-brand-700: #12244A;
    --nx-brand-600: #1D3B6D;
    --nx-brand-500: #2C5AA8;
    --nx-brand-400: #4A87E8;
    --nx-brand-300: #6FA0F5;
    --nx-accent: #22C1D6;
    --nx-accent-dark: #12919F;

    /* ---- Anlamsal ---- */
    --nx-success: #0EA07B;
    --nx-success-dark: #0C8768;
    --nx-warning: #E8A317;
    --nx-warning-dark: #CC8F10;
    --nx-warning-ink: #2B1D00; /* sari uzerinde okunacak yazi */
    --nx-danger: #DC3B4B;
    --nx-danger-dark: #C22F3E;
    --nx-info: #2C8FD6;
    --nx-info-dark: #2478B4;
    --nx-neutral: #5A6B85;
    --nx-neutral-dark: #4A5A72;

    /* ---- Yuzeyler: koyu tema ---- */
    --nx-d-bg: #070C16;
    --nx-d-surface: #101B30;
    --nx-d-surface-2: #16243E;
    --nx-d-border: #263751;
    --nx-d-text: #E6ECF6;
    --nx-d-muted: #93A3BC;

    /* ---- Yumusak yuzeyler ----
       Acik zeminde bilgi kutusu, sohbet balonu, secili satir gibi hafif
       renkli alanlar icin. Marka mavisinin cok acik tonlari. */
    --nx-soft-1: #F2F6FC; /* en acik - zemin */
    --nx-soft-2: #E8EFFA; /* bilgi kutusu */
    --nx-soft-3: #DCE8F8; /* vurgulu balon / secili satir */
    --nx-soft-warning: #FDF3E0;
    --nx-soft-success: #E3F6F0;
    --nx-soft-danger: #FCEAEC;
    --nx-soft-info: #E8F3FC;

    /* Ara tonlar: kenarlik, ilerleme cubugu, grafik dolgusu gibi
       yumusak yuzey ile tam doygun renk arasinda kalan yerler. */
    --nx-mid-warning: #F5DDAE;
    --nx-mid-success: #7ED9BE;
    --nx-mid-danger: #F2807F;
    --nx-deep-success: #0A5C46;
    --nx-deep-warning: #7A5406;
    --nx-deep-danger: #98202E;
    --nx-deep-neutral: #3D4A60;

    /* Koyu temada anlamsal satir/zemin tonlari (tablo satiri gibi).
       Acik temadaki --nx-soft-* ile ayni rolu koyu zeminde ustlenir. */
    --nx-d-soft-info: #16324E;
    --nx-d-soft-warning: #3B2F17;
    --nx-d-soft-success: #10382E;
    --nx-d-soft-danger: #3E1B22;

    /* ---- Yuzeyler: acik tema ---- */
    --nx-l-bg: #F2F5FA;
    --nx-l-surface: #FFFFFF;
    --nx-l-surface-2: #EEF2F8;
    --nx-l-border: #DCE3EE;
    --nx-l-text: #101B30;
    --nx-l-muted: #5B6B85;

    /* ---- Aktif tema (body sinifina gore asagida degisir) ---- */
    --nx-bg: var(--nx-d-bg);
    --nx-surface: var(--nx-d-surface);
    --nx-surface-2: var(--nx-d-surface-2);
    --nx-border: var(--nx-d-border);
    --nx-text: var(--nx-d-text);
    --nx-muted: var(--nx-d-muted);
    --nx-link: var(--nx-brand-300);

    /* ---- Bootstrap'in kendi degiskenleri ----
       5.1'de bilesenleri beslemez ama bazi yardimci siniflar
       (bg-opacity, text-bg-*) bunlari kullanir. */
    --bs-primary: #2C5AA8;
    --bs-primary-rgb: 44,90,168;
    --bs-secondary: #5A6B85;
    --bs-secondary-rgb: 90,107,133;
    --bs-success: #0EA07B;
    --bs-success-rgb: 14,160,123;
    --bs-danger: #DC3B4B;
    --bs-danger-rgb: 220,59,75;
    --bs-warning: #E8A317;
    --bs-warning-rgb: 232,163,23;
    --bs-info: #2C8FD6;
    --bs-info-rgb: 44,143,214;
    --bs-dark: #101B30;
    --bs-dark-rgb: 16,27,48;
    --bs-light: #EEF2F8;
    --bs-light-rgb: 238,242,248;
    --bs-link-color: #2C5AA8;
    --bs-link-hover-color: #24497F;
}

body.theme-light {
    --nx-bg: var(--nx-l-bg);
    --nx-surface: var(--nx-l-surface);
    --nx-surface-2: var(--nx-l-surface-2);
    --nx-border: var(--nx-l-border);
    --nx-text: var(--nx-l-text);
    --nx-muted: var(--nx-l-muted);
    --nx-link: var(--nx-brand-500);
}

/* ============================================================
   1) DOLU BUTONLAR
   ============================================================ */
.btn-primary {
    --bs-btn-bg: var(--nx-brand-500);
    background-color: var(--nx-brand-500);
    border-color: var(--nx-brand-500);
    color: #fff;
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary.active,
    .btn-primary:disabled {
        background-color: var(--nx-brand-600);
        border-color: var(--nx-brand-600);
        color: #fff;
    }

.btn-secondary {
    background-color: var(--nx-neutral);
    border-color: var(--nx-neutral);
    color: #fff;
}

    .btn-secondary:hover,
    .btn-secondary:focus,
    .btn-secondary:active,
    .btn-secondary.active {
        background-color: var(--nx-neutral-dark);
        border-color: var(--nx-neutral-dark);
        color: #fff;
    }

.btn-success {
    background-color: var(--nx-success);
    border-color: var(--nx-success);
    color: #fff;
}

    .btn-success:hover,
    .btn-success:focus,
    .btn-success:active,
    .btn-success.active {
        background-color: var(--nx-success-dark);
        border-color: var(--nx-success-dark);
        color: #fff;
    }

.btn-danger {
    background-color: var(--nx-danger);
    border-color: var(--nx-danger);
    color: #fff;
}

    .btn-danger:hover,
    .btn-danger:focus,
    .btn-danger:active,
    .btn-danger.active {
        background-color: var(--nx-danger-dark);
        border-color: var(--nx-danger-dark);
        color: #fff;
    }

.btn-warning {
    background-color: var(--nx-warning);
    border-color: var(--nx-warning);
    color: var(--nx-warning-ink);
}

    .btn-warning:hover,
    .btn-warning:focus,
    .btn-warning:active,
    .btn-warning.active {
        background-color: var(--nx-warning-dark);
        border-color: var(--nx-warning-dark);
        color: var(--nx-warning-ink);
    }

.btn-info {
    background-color: var(--nx-info);
    border-color: var(--nx-info);
    color: #fff;
}

    .btn-info:hover,
    .btn-info:focus,
    .btn-info:active,
    .btn-info.active {
        background-color: var(--nx-info-dark);
        border-color: var(--nx-info-dark);
        color: #fff;
    }

.btn-dark {
    background-color: var(--nx-brand-700);
    border-color: var(--nx-brand-700);
    color: #fff;
}

    .btn-dark:hover,
    .btn-dark:focus,
    .btn-dark:active {
        background-color: var(--nx-brand-800);
        border-color: var(--nx-brand-800);
        color: #fff;
    }

.btn-light {
    background-color: var(--nx-l-surface-2);
    border-color: var(--nx-l-border);
    color: var(--nx-l-text);
}

    .btn-light:hover,
    .btn-light:focus,
    .btn-light:active {
        background-color: #E2E8F2;
        border-color: #CBD5E4;
        color: var(--nx-l-text);
    }

/* ============================================================
   2) CERCEVELI BUTONLAR
   ============================================================ */
.btn-outline-primary {
    color: var(--nx-brand-400);
    border-color: var(--nx-brand-500);
}

    .btn-outline-primary:hover,
    .btn-outline-primary:focus,
    .btn-outline-primary:active,
    .btn-outline-primary.active {
        background-color: var(--nx-brand-500);
        border-color: var(--nx-brand-500);
        color: #fff;
    }

body.theme-light .btn-outline-primary {
    color: var(--nx-brand-500);
}

.btn-outline-secondary {
    color: var(--nx-muted);
    border-color: var(--nx-border);
}

    .btn-outline-secondary:hover,
    .btn-outline-secondary:focus,
    .btn-outline-secondary:active,
    .btn-outline-secondary.active {
        background-color: var(--nx-neutral);
        border-color: var(--nx-neutral);
        color: #fff;
    }

.btn-outline-success {
    color: var(--nx-success);
    border-color: var(--nx-success);
}

    .btn-outline-success:hover,
    .btn-outline-success:focus,
    .btn-outline-success:active,
    .btn-outline-success.active {
        background-color: var(--nx-success);
        border-color: var(--nx-success);
        color: #fff;
    }

.btn-outline-danger {
    color: var(--nx-danger);
    border-color: var(--nx-danger);
}

    .btn-outline-danger:hover,
    .btn-outline-danger:focus,
    .btn-outline-danger:active,
    .btn-outline-danger.active {
        background-color: var(--nx-danger);
        border-color: var(--nx-danger);
        color: #fff;
    }

.btn-outline-warning {
    color: var(--nx-warning);
    border-color: var(--nx-warning);
}

    .btn-outline-warning:hover,
    .btn-outline-warning:focus,
    .btn-outline-warning:active,
    .btn-outline-warning.active {
        background-color: var(--nx-warning);
        border-color: var(--nx-warning);
        color: var(--nx-warning-ink);
    }

.btn-outline-info {
    color: var(--nx-info);
    border-color: var(--nx-info);
}

    .btn-outline-info:hover,
    .btn-outline-info:focus,
    .btn-outline-info:active,
    .btn-outline-info.active {
        background-color: var(--nx-info);
        border-color: var(--nx-info);
        color: #fff;
    }

.btn-outline-light {
    color: var(--nx-d-text);
    border-color: rgba(255,255,255,.35);
}

    .btn-outline-light:hover,
    .btn-outline-light:focus,
    .btn-outline-light:active {
        background-color: rgba(255,255,255,.14);
        border-color: rgba(255,255,255,.55);
        color: #fff;
    }

/* Odak halkasi — marka mavisi */
.btn:focus,
.btn:focus-visible,
.btn.focus {
    box-shadow: 0 0 0 .2rem rgba(44,90,168,.35);
}

.btn-danger:focus {
    box-shadow: 0 0 0 .2rem rgba(220,59,75,.35);
}

.btn-success:focus {
    box-shadow: 0 0 0 .2rem rgba(14,160,123,.35);
}

/* ============================================================
   3) ARKA PLAN YARDIMCI SINIFLARI (rozetler dahil)
   Bootstrap bunlari !important ile tanimlar, ayni gucte yaziyoruz.
   ============================================================ */
.bg-primary {
    background-color: var(--nx-brand-500) !important;
}

.bg-secondary {
    background-color: var(--nx-neutral) !important;
}

.bg-success {
    background-color: var(--nx-success) !important;
}

.bg-danger {
    background-color: var(--nx-danger) !important;
}

.bg-warning {
    background-color: var(--nx-warning) !important;
}

.bg-info {
    background-color: var(--nx-info) !important;
}

.bg-dark {
    background-color: var(--nx-brand-800) !important;
}

.bg-light {
    background-color: var(--nx-l-surface-2) !important;
}

/* Sari zeminde siyah yazi — okunabilirlik */
.badge.bg-warning,
.btn-warning,
.bg-warning {
    color: var(--nx-warning-ink);
}

.badge.bg-light,
.bg-light {
    color: var(--nx-l-text);
}

/* ============================================================
   4) METIN RENKLERI
   ============================================================ */
.text-primary {
    color: var(--nx-brand-400) !important;
}

body.theme-light .text-primary {
    color: var(--nx-brand-500) !important;
}

.text-success {
    color: var(--nx-success) !important;
}

.text-danger {
    color: var(--nx-danger) !important;
}

.text-warning {
    color: var(--nx-warning) !important;
}

.text-info {
    color: var(--nx-info) !important;
}

.text-muted {
    color: var(--nx-muted) !important;
}

/* ============================================================
   5) BAGLANTILAR
   ============================================================ */
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link) {
    color: var(--nx-link);
}

    a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):hover {
        color: var(--nx-accent);
    }

/* ============================================================
   6) UYARI KUTULARI
   Ton: koyu temada saydam zemin + renkli kenar, acik temada soft dolgu.
   ============================================================ */
.alert-primary {
    background-color: rgba(44,90,168,.12);
    border-color: rgba(44,90,168,.45);
    color: var(--nx-brand-300);
}

.alert-success {
    background-color: rgba(14,160,123,.12);
    border-color: rgba(14,160,123,.45);
    color: #3FD3AC;
}

.alert-danger {
    background-color: rgba(220,59,75,.12);
    border-color: rgba(220,59,75,.45);
    color: #FF8A96;
}

.alert-warning {
    background-color: rgba(232,163,23,.12);
    border-color: rgba(232,163,23,.45);
    color: #F5C55C;
}

.alert-info {
    background-color: rgba(44,143,214,.12);
    border-color: rgba(44,143,214,.45);
    color: #7CC0F0;
}

body.theme-light .alert-primary {
    background-color: #E8EFFA;
    border-color: #BFD3F0;
    color: #1B3D73;
}

body.theme-light .alert-success {
    background-color: #E3F6F0;
    border-color: #B5E5D8;
    color: #0A6B52;
}

body.theme-light .alert-danger {
    background-color: #FCEAEC;
    border-color: #F3C2C8;
    color: #98202E;
}

body.theme-light .alert-warning {
    background-color: #FDF3E0;
    border-color: #F5DDAE;
    color: #7A5406;
}

body.theme-light .alert-info {
    background-color: #E8F3FC;
    border-color: #BFDCF3;
    color: #16577F;
}

/* ============================================================
   7) FORM ODAK HALKASI
   ============================================================ */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--nx-brand-400);
    box-shadow: 0 0 0 .2rem rgba(44,90,168,.25);
}

.form-check-input:checked {
    background-color: var(--nx-brand-500);
    border-color: var(--nx-brand-500);
}

/* ============================================================
   8) MARKA LOGOSU
   Satir ici SVG (_MarkaLogo.cshtml). Yukseklik burada,
   genislik oranla; en-boy orani 290:64.
   ============================================================ */
.nx-logo {
    height: 38px;
    width: auto;
    display: block;
}

    /* Dar ekranda kelime markasi tasmasin */
    @media (max-width: 420px) {
        .nx-logo {
            height: 30px;
        }
    }

.nx-logo-lg {
    height: 64px;
}

.nx-logo-sm {
    height: 28px;
}

/* ============================================================
   9) MARKA VURGUSU
   Sayac rakamlari ve logodaki "helpline" ile ayni ton.
   ============================================================ */
.nx-accent {
    color: var(--nx-accent);
}

.nx-brand-gradient {
    background: linear-gradient(135deg, var(--nx-brand-600), var(--nx-brand-900));
}