/*
 * TASARIM TOKENLARI — tek kaynak (2026-08-28, dalga B).
 *
 * NEDEN: ölçüm yapıldığında panelde altı farklı vurgu rengi, altı farklı sayfa
 * başlığı boyutu (21 / 23.2 / 26.4 / 30.4 / 32 / 35 px) ve dört farklı font
 * ailesi ilan edilmiş durumdaydı. Daha kötüsü: ilan edilen ailelerin çoğu
 * hiç yüklenmiyordu (IBM Plex Sans, DM Sans, Outfit, Plus Jakarta Sans için
 * ne @font-face ne de bir <link> vardı), yani o ekranlar tasarlandıkları fontla
 * değil, tarayıcının jenerik sans-serif'iyle çiziliyordu. Panelde gerçekten
 * yüklenen iki aile vardı: Inter (header.php) ve Public Sans (app.css @import).
 *
 * KURAL: renk, font, yarıçap, gölge ve tipografi ölçeği YALNIZCA burada
 * tanımlanır. Modül CSS'leri kendi öneklerini (--pe-*, --cat-*, --lnc-* ...)
 * korur ama değerlerini buradan türetir. Böylece modül kuralları olduğu gibi
 * çalışmaya devam eder, tek bir değer değiştiğinde tüm panel birlikte döner.
 *
 * Bu dosya header.php'den, modüle özel CSS'lerden ÖNCE yüklenir.
 */

:root {
    /* ── Tipografi ───────────────────────────────────────────────────────── */
    /* Inter panelde zaten global olarak yükleniyor; Public Sans tema fontu ve
     * ikisi de gelmezse sistem yığını devreye girer. Yüklenmeyen bir aileyi
     * (Outfit, DM Sans, IBM Plex Sans...) bu yığına EKLEMEYİN. */
    --ds-font-sans: "Inter", "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ds-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    /* Tipografi ölçeği — sayfa başlığı her ekranda aynı boyutta olsun diye */
    --ds-text-xs: 0.72rem;
    --ds-text-sm: 0.8rem;
    --ds-text-base: 0.875rem;
    --ds-text-md: 0.95rem;
    --ds-text-lg: 1.05rem;
    --ds-text-xl: 1.25rem;
    --ds-title: 1.5rem;          /* sayfa başlığı (H1) — 24px */
    --ds-title-sm: 1.15rem;      /* panel/kart başlığı */

    --ds-weight-medium: 500;
    --ds-weight-semibold: 600;
    --ds-weight-bold: 700;
    --ds-weight-black: 800;

    --ds-leading-tight: 1.25;
    --ds-leading-normal: 1.5;
    --ds-tracking-tight: -0.015em;
    --ds-tracking-wide: 0.12em;

    /* ── Vurgu rengi (tüm modüllerde ortak) ──────────────────────────────── */
    --ds-primary: #2563eb;
    --ds-primary-hover: #1d4ed8;
    --ds-primary-strong: #1e40af;
    --ds-primary-soft: #eff6ff;      /* rozet / ikon kutusu zemini */
    --ds-primary-border: #bfdbfe;
    --ds-primary-contrast: #ffffff;
    --ds-primary-ring: rgba(37, 99, 235, 0.18);

    /* Bootstrap `rgba(var(--bs-*-rgb), <opacity>)` kalibi icin ucluler */
    --ds-primary-rgb: 37, 99, 235;
    --ds-success-rgb: 15, 122, 85;
    --ds-warning-rgb: 180, 83, 9;
    --ds-danger-rgb: 220, 38, 38;
    --ds-info-rgb: 3, 105, 161;
    --ds-neutral-rgb: 90, 106, 125;

    /* ── Durum renkleri ──────────────────────────────────────────────────── */
    --ds-success: #0f7a55;
    --ds-success-soft: #e7f5ef;
    --ds-warning: #b45309;
    --ds-warning-soft: #fef3e2;
    --ds-danger: #dc2626;
    --ds-danger-soft: #fdecec;
    --ds-info: #0369a1;
    --ds-info-soft: #e6f2fa;

    /* ── Nötrler ─────────────────────────────────────────────────────────── */
    --ds-bg: #f6f8fb;                /* sayfa zemini */
    --ds-bg-soft: #eef2f7;           /* ikincil zemin, tablo başlığı */
    --ds-surface: #ffffff;           /* kart */
    --ds-surface-alt: #f9fbfd;
    --ds-border: #e3e8ef;
    --ds-border-strong: #cdd6e2;
    --ds-text: #16202c;
    --ds-text-soft: #5a6a7d;
    --ds-text-faint: #94a3b8;

    /* ── Yarıçap ─────────────────────────────────────────────────────────── */
    --ds-radius-sm: 8px;
    --ds-radius-md: 12px;
    --ds-radius-lg: 16px;
    --ds-radius-xl: 20px;
    --ds-radius-pill: 999px;

    /* ── Gölge ───────────────────────────────────────────────────────────── */
    --ds-shadow-sm: 0 1px 2px rgba(22, 32, 44, 0.05);
    --ds-shadow-md: 0 1px 3px rgba(22, 32, 44, 0.06), 0 8px 24px rgba(22, 32, 44, 0.06);
    --ds-shadow-lg: 0 18px 44px rgba(22, 32, 44, 0.10);
    --ds-shadow-up: 0 -6px 24px rgba(22, 32, 44, 0.08);

    /* ── Hareket ─────────────────────────────────────────────────────────── */
    --ds-transition: 0.15s ease;
    --ds-transition-slow: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/*
 * ── Ortak sayfa başlığı ──────────────────────────────────────────────────────
 * Ölçümde altı farklı sayfa başlığı boyutu vardı: 21 / 23.2 / 26.4 / 30.4 /
 * 32 / 35 px. Panel içinde ekran değiştirince başlığın büyüyüp küçülmesi,
 * sistemin tek ürün gibi durmamasının en görünür sebebiydi.
 *
 * `.page-title` tema sınıfı (app.css) neredeyse tüm eski ekranlarda kullanılıyor;
 * bu dosya app.min.css'ten SONRA yüklendiği için aynı özgüllükteki kural burada
 * kazanır. Modül CSS'leri daha sonra yüklenir ve artık aynı tokenı kullanır.
 */
.page-title,
.content-page h1,
.admin-page-title {
    font-family: var(--ds-font-sans);
    font-size: var(--ds-title);
    font-weight: var(--ds-weight-bold);
    letter-spacing: var(--ds-tracking-tight);
    color: var(--ds-text);
}

/* .admin-page-title, tema `.page-title` sinifinin yerine gecer: o sinif app.css'te
 * `line-height: 70px` tasiyor ve `.page-title-box` disinda kullanildiginda basligi
 * gereksiz yere yukseltiyor. Buradaki satir yuksekligi normal akista dogru durur. */
.admin-page-title {
    line-height: var(--ds-leading-tight);
    margin-bottom: 0;
}

/* Panelin gövde fontu: tema "Public Sans" diyor, ortak yığın Inter'i öne alıyor.
 * Yalnızca yönetim kabuğunu hedefler — açılış/oturum ekranı tema fontunda kalır. */
body .content-page,
body .wrapper,
body .navbar-custom,
body .left-side-menu {
    font-family: var(--ds-font-sans);
}


/*
 * ── Bootstrap köprüsü ────────────────────────────────────────────────────────
 * NEDEN GEREKLİ: panelde İKİ ayrı renk sistemi vardı. Modül CSS'leri artık
 * --ds-* kullanıyor, ama tema (app.css) kendi Bootstrap paletiyle çiziyordu:
 * --bs-primary #108dff (parlak mavi), --bs-secondary #963b68 (macenta),
 * --bs-success #287F71, --bs-danger #E7366B. Her `.btn-primary`, `.badge bg-*`,
 * `.text-danger` o paletten besleniyordu; bu yüzden ekranlarda ortak mavinin
 * yanında hâlâ macenta ve turkuaz görünüyordu.
 *
 * İKİ FARKLI MEKANİZMA VAR, ikisi de kapatılmalı:
 *   1. `.text-primary` / `.bg-primary` / `.border-primary` → `rgba(var(--bs-primary-rgb), …)`
 *      okuyor, yani :root'ta değişkeni ezmek yeterli.
 *   2. `.btn-primary` → derlenmiş CSS'te `--bs-btn-bg:#108dff` diye HEX gömüyor,
 *      değişkeni okumuyor. Buton bileşenleri tek tek ezilmek zorunda.
 */
:root {
    --bs-primary: var(--ds-primary);
    --bs-primary-rgb: var(--ds-primary-rgb);
    --bs-secondary: var(--ds-text-soft);
    --bs-secondary-rgb: var(--ds-neutral-rgb);
    --bs-success: var(--ds-success);
    --bs-success-rgb: var(--ds-success-rgb);
    --bs-warning: var(--ds-warning);
    --bs-warning-rgb: var(--ds-warning-rgb);
    --bs-danger: var(--ds-danger);
    --bs-danger-rgb: var(--ds-danger-rgb);
    --bs-info: var(--ds-info);
    --bs-info-rgb: var(--ds-info-rgb);
    --bs-link-color: var(--ds-primary);
    --bs-link-color-rgb: var(--ds-primary-rgb);
    --bs-link-hover-color: var(--ds-primary-hover);
    --bs-body-font-family: var(--ds-font-sans);
    --bs-body-color: var(--ds-text);
    --bs-border-color: var(--ds-border);
}

/* Buton bileşenleri: hex gömülü olduğu için değişken ezmesi yetmez.
 * DEVRE DIŞI DURUM AYRI BİR DEĞİŞKEN: --bs-btn-disabled-bg. İlk geçişte yalnızca
 * .btn-primary'de ezilmişti; ölçümde customers.php'deki devre dışı
 * "Seçilenleri Sil" butonu hâlâ tema pembesini (#E7366B) çiziyordu. */
.btn-primary {
    --bs-btn-bg: var(--ds-primary);
    --bs-btn-border-color: var(--ds-primary);
    --bs-btn-hover-bg: var(--ds-primary-hover);
    --bs-btn-hover-border-color: var(--ds-primary-hover);
    --bs-btn-active-bg: var(--ds-primary-hover);
    --bs-btn-active-border-color: var(--ds-primary-hover);
    --bs-btn-disabled-bg: var(--ds-primary);
    --bs-btn-disabled-border-color: var(--ds-primary);
}
.btn-outline-primary {
    --bs-btn-color: var(--ds-primary);
    --bs-btn-border-color: var(--ds-primary);
    --bs-btn-hover-bg: var(--ds-primary);
    --bs-btn-hover-border-color: var(--ds-primary);
    --bs-btn-active-bg: var(--ds-primary);
    --bs-btn-active-border-color: var(--ds-primary);
    --bs-btn-disabled-color: var(--ds-primary);
    --bs-btn-disabled-border-color: var(--ds-primary);
}
.btn-secondary {
    --bs-btn-bg: var(--ds-text-soft);
    --bs-btn-border-color: var(--ds-text-soft);
    --bs-btn-hover-bg: var(--ds-text);
    --bs-btn-hover-border-color: var(--ds-text);
    --bs-btn-active-bg: var(--ds-text);
    --bs-btn-active-border-color: var(--ds-text);
    --bs-btn-disabled-bg: var(--ds-text-soft);
    --bs-btn-disabled-border-color: var(--ds-text-soft);
}
.btn-success {
    --bs-btn-bg: var(--ds-success);
    --bs-btn-border-color: var(--ds-success);
    --bs-btn-hover-bg: var(--ds-success);
    --bs-btn-hover-border-color: var(--ds-success);
    --bs-btn-active-bg: var(--ds-success);
    --bs-btn-active-border-color: var(--ds-success);
    --bs-btn-disabled-bg: var(--ds-success);
    --bs-btn-disabled-border-color: var(--ds-success);
}
.btn-danger {
    --bs-btn-bg: var(--ds-danger);
    --bs-btn-border-color: var(--ds-danger);
    --bs-btn-hover-bg: var(--ds-danger);
    --bs-btn-hover-border-color: var(--ds-danger);
    --bs-btn-active-bg: var(--ds-danger);
    --bs-btn-active-border-color: var(--ds-danger);
    --bs-btn-disabled-bg: var(--ds-danger);
    --bs-btn-disabled-border-color: var(--ds-danger);
}
.btn-warning {
    --bs-btn-bg: var(--ds-warning);
    --bs-btn-border-color: var(--ds-warning);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ds-warning);
    --bs-btn-hover-border-color: var(--ds-warning);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ds-warning);
    --bs-btn-disabled-bg: var(--ds-warning);
    --bs-btn-disabled-border-color: var(--ds-warning);
}
.btn-info {
    --bs-btn-bg: var(--ds-info);
    --bs-btn-border-color: var(--ds-info);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ds-info);
    --bs-btn-hover-border-color: var(--ds-info);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ds-info);
    --bs-btn-disabled-bg: var(--ds-info);
    --bs-btn-disabled-border-color: var(--ds-info);
}

/* Outline varyantlari da hex gomuyor — hepsi tek tek ezilmeli.
 * (Ilk gecişte yalnizca .btn-outline-primary ezilmisti; olcumde
 * .btn-outline-secondary hala tema macentasini #963b68, .btn-outline-danger
 * tema pembesini #E7366B ciziyordu.) */
.btn-outline-secondary {
    --bs-btn-color: var(--ds-text-soft);
    --bs-btn-border-color: var(--ds-border-strong);
    --bs-btn-hover-bg: var(--ds-text-soft);
    --bs-btn-hover-border-color: var(--ds-text-soft);
    --bs-btn-active-bg: var(--ds-text-soft);
    --bs-btn-active-border-color: var(--ds-text-soft);
    --bs-btn-disabled-color: var(--ds-text-soft);
    --bs-btn-disabled-border-color: var(--ds-border-strong);
}
.btn-outline-danger {
    --bs-btn-color: var(--ds-danger);
    --bs-btn-border-color: var(--ds-danger);
    --bs-btn-hover-bg: var(--ds-danger);
    --bs-btn-hover-border-color: var(--ds-danger);
    --bs-btn-active-bg: var(--ds-danger);
    --bs-btn-active-border-color: var(--ds-danger);
    --bs-btn-disabled-color: var(--ds-danger);
    --bs-btn-disabled-border-color: var(--ds-danger);
}
.btn-outline-success {
    --bs-btn-color: var(--ds-success);
    --bs-btn-border-color: var(--ds-success);
    --bs-btn-hover-bg: var(--ds-success);
    --bs-btn-hover-border-color: var(--ds-success);
    --bs-btn-active-bg: var(--ds-success);
    --bs-btn-active-border-color: var(--ds-success);
    --bs-btn-disabled-color: var(--ds-success);
    --bs-btn-disabled-border-color: var(--ds-success);
}
.btn-outline-warning {
    --bs-btn-color: var(--ds-warning);
    --bs-btn-border-color: var(--ds-warning);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ds-warning);
    --bs-btn-hover-border-color: var(--ds-warning);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ds-warning);
    --bs-btn-active-border-color: var(--ds-warning);
    --bs-btn-disabled-color: var(--ds-warning);
    --bs-btn-disabled-border-color: var(--ds-warning);
}
.btn-outline-info {
    --bs-btn-color: var(--ds-info);
    --bs-btn-border-color: var(--ds-info);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ds-info);
    --bs-btn-hover-border-color: var(--ds-info);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ds-info);
    --bs-btn-active-border-color: var(--ds-info);
    --bs-btn-disabled-color: var(--ds-info);
    --bs-btn-disabled-border-color: var(--ds-info);
}

/* Bagimsiz baglantilar: tema `[data-bs-theme=light]` blogunda kendi mavisini
 * tanimliyor; ortak vurguya cekiyoruz. */
:root,
[data-bs-theme="light"] {
    --bs-link-color: var(--ds-primary);
    --bs-link-color-rgb: var(--ds-primary-rgb);
    --bs-link-hover-color: var(--ds-primary-hover);
}

/* Bootstrap'in "subtle" / "emphasis" ailesi: `.badge bg-info-subtle text-info-emphasis`
 * gibi siniflar tema paletinin KOYU/ACIK turevlerini kullaniyor (#005566 gibi).
 * Ortak palete cekilmezse rozetlerde eski renkler yasamaya devam ediyor. */
:root,
[data-bs-theme="light"] {
    --bs-primary-bg-subtle: var(--ds-primary-soft);
    --bs-primary-border-subtle: var(--ds-primary-border);
    --bs-primary-text-emphasis: var(--ds-primary-strong);
    --bs-success-bg-subtle: var(--ds-success-soft);
    --bs-success-border-subtle: var(--ds-success);
    --bs-success-text-emphasis: var(--ds-success);
    --bs-warning-bg-subtle: var(--ds-warning-soft);
    --bs-warning-border-subtle: var(--ds-warning);
    --bs-warning-text-emphasis: var(--ds-warning);
    --bs-danger-bg-subtle: var(--ds-danger-soft);
    --bs-danger-border-subtle: var(--ds-danger);
    --bs-danger-text-emphasis: var(--ds-danger);
    --bs-info-bg-subtle: var(--ds-info-soft);
    --bs-info-border-subtle: var(--ds-info);
    --bs-info-text-emphasis: var(--ds-info);
    --bs-secondary-bg-subtle: var(--ds-bg-soft);
    --bs-secondary-text-emphasis: var(--ds-text-soft);
    --bs-form-invalid-color: var(--ds-danger);
    --bs-form-invalid-border-color: var(--ds-danger);
    --bs-form-valid-color: var(--ds-success);
    --bs-form-valid-border-color: var(--ds-success);
}

/* Form dogrulama metni: derlenmis CSS'te hex gomulu, degisken ezmesi yetmiyor. */
.invalid-feedback,
.invalid-tooltip { color: var(--ds-danger); }
.valid-feedback,
.valid-tooltip { color: var(--ds-success); }