/* ==========================================================================
   OİM Tasarım Sistemi
   Claude Design prototipinden (OİM Portal.dc.html) türetilmiştir.

   Renk modeli — HİBRİT:
     · Config'in 8 ham rengi (menu_color, topbar_color, …) AYNEN onurlandırılır.
       Bunlar tenant kontrolündedir, burada override edilmez.
     · Primary'nin ton türevleri (hover/pressed/soft) color-mix() ile üretilir.
     · Kontrast kararları (buton üstü metin) CSS'te hesaplanamaz; bunlar
       src/presentation/helpers/theme.js tarafından üretilip header.ejs'te basılır.

   Sınıf öneki `oim-`. Bootstrap 4 sınıflarıyla çakışmaz.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Token'lar
   -------------------------------------------------------------------------- */
:root {
    /* Yüzeyler / kenarlar / metin — markadan bağımsız nötr iskelet */
    --oim-bg: #F4F5F8;
    --oim-sur: #FFFFFF;
    --oim-sur2: #F7F8FA;
    --oim-bd: #E6E9EF;
    --oim-bd2: #CBD2DC;
    --oim-tx: #151A21;
    --oim-tx2: #4A5565;
    --oim-tx3: #8792A2;
    /* Nötr rampanın ÜÇÜNCÜ METİN katmanı — WCAG AA (≥4.5:1) garantili.
       --oim-tx3 (#8792A2) metin olarak AA'da KALMIYOR (beyaz 3.15, --oim-sur2
       2.97, --oim-bg 2.89 — hepsi 4.5'in altında), ama METİN-DIŞI için MEŞRU
       (1.4.11'in 3.0 barajı). Bu yüzden tx3'ün DEĞERİ DEĞİŞMEZ: service.ejs:595
       scrollbar thumb'ı ona bağlı (Faz G, 017641b). Metin tüketicileri buraya
       taşınır; dekoratif glifler, kenarlıklar ve thumb tx3'te KALIR.
       DÜZ DEĞER — tx3'e ALIAS VERİLMEZ: alias :root'ta çözülür ve koyu tema
       override'ı hiç devreye girmez (donmuş-alias tuzağı). Bu yorumda jetonun
       var(...) biçimi BİLEREK yazılmadı: tüketici sayan grep'i kirletiyordu. */
    --oim-tx3-tx: #69717E;
    /* en kötü yüzey --oim-bg: 4.52 ✅ */

    --oim-sh: 0 1px 3px rgba(16, 24, 40, 0.06);
    --oim-sh2: 0 12px 36px rgba(16, 24, 40, 0.14);

    /* Semantik renkler — marka renginden bağımsız, sabit.
       Her semantik ÜÇ jetondan oluşur:
         --oim-X       : dolgu / kenarlık / ikon-dolgusu (görsel kimlik, DEĞİŞMEZ)
         --oim-X-soft  : yumuşak zemin
         --oim-X-tx    : METİN ve glif rengi — WCAG AA (≥4.5:1) garantili
       Açık temada solid'ler metin olarak AA'da KALIYOR (ok 4.38, warn 4.39,
       err 4.19 / soft+beyaz üstünde; info 4.21 / soft+sayfa-zemini üstünde).
       Bu yüzden metin tüketicileri -tx jetonuna bağlanır; solid'ler dolgu ve
       kenarlıkta olduğu gibi bırakılır (oradaki kontrast gereksinimi yok). */
    --oim-ok: #15803D;
    --oim-ok-soft: rgba(21, 128, 61, 0.10);
    --oim-ok-tx: #137538;
    --oim-warn: #B45309;
    --oim-warn-soft: rgba(180, 83, 9, 0.10);
    --oim-warn-tx: #A54C08;
    --oim-err: #DC2626;
    --oim-err-soft: rgba(220, 38, 38, 0.09);
    --oim-err-tx: #C62020;
    --oim-info: #2563EB;
    --oim-info-soft: rgba(37, 99, 235, 0.09);
    --oim-info-tx: #195AEA;

    /* Boşluk — 4px taban */
    --oim-sp-1: 4px;
    --oim-sp-2: 8px;
    --oim-sp-4: 16px;
    --oim-sp-6: 24px;
    --oim-sp-8: 32px;

    /* Köşe yarıçapı */
    --oim-r-input: 9px;
    --oim-r-btn: 10px;
    --oim-r-card: 15px;
    --oim-r-pill: 99px;

    /* Primary / secondary — K5: tasarım paleti DONDURULDU (config baypas).
       Bu değerler tasarımın kendi önceden-hesaplanmış sabitleridir; yeniden
       hesaplanmaz. color-mix türetmesi kaldırıldı, sabit değerlerle değiştirildi.
       Bkz. .agent/redesign/MIGRATION-PLAN.md §1 K5. */
    --oim-p: #16406E;
    --oim-p-h: #13385F;
    /* mix(p, #000, 0.12) */
    --oim-p-a: #11324F;
    /* mix(p, #000, 0.22) */
    --oim-on-p: #FFFFFF;
    /* lum(#16406E)≈0.050 ≤ 0.45 → beyaz metin */
    --oim-p-soft: rgba(22, 64, 110, 0.09);
    --oim-p-soft2: rgba(22, 64, 110, 0.18);
    --oim-p-tx: #16406E;
    /* beyaz üstünde ≈10.5:1 */
    --oim-sec: #0E9F9F;
    --oim-sec-tx: #0B7C7C;
    /* readable(#0E9F9F, #FFFFFF, 4.5) */
    --oim-sec-soft: rgba(14, 159, 159, 0.10);

    /* Üçüncü taraf marka renkleri — tema değil, kimlik. Paylaş butonlarının
       (campaign_friendly.ejs) zeminidir; koyu temada da DEĞİŞMEZ, çünkü bunlar
       WhatsApp/Facebook/X'in kendi sabit marka renkleridir. Değerler ham hex
       olarak yalnızca burada yaşar — view'larda ham hex yasak (kural 5). */
    --oim-brand-whatsapp: #25D366;
    --oim-brand-facebook: #1877F2;
    --oim-brand-x: #1DA1F2;
    --oim-on-brand: #FFFFFF;
}

/* `html` da listede: header.ejs `html, body { background: var(--oim-bg) }` der ve
   içerik kısa kalınca görünen tuval `html`in zeminidir. Token'lar yalnızca body'de
   olsaydı html :root'taki açık değeri alır, sayfanın alt kısmı beyaz kalırdı. */
html:has(> body[data-theme="dark"]),
body[data-theme="dark"] {
    --oim-bg: #0E1217;
    --oim-sur: #161B23;
    --oim-sur2: #1C232D;
    --oim-bd: rgba(255, 255, 255, 0.09);
    --oim-bd2: rgba(255, 255, 255, 0.20);
    --oim-tx: #E9ECF1;
    --oim-tx2: #A8B0BC;
    --oim-tx3: #6E7885;
    /* DÜZ DEĞER, açık temadaki gibi. Bkz. yukarıdaki donmuş-alias notu. */
    --oim-tx3-tx: #818A95;
    /* en kötü yüzey --oim-sur2: 4.52 ✅ */

    --oim-sh: 0 1px 3px rgba(0, 0, 0, 0.5);
    --oim-sh2: 0 12px 36px rgba(0, 0, 0, 0.55);

    /* Koyu temada solid'ler metin olarak zaten AA geçiyor (5.02–7.47), bu yüzden
       -tx == solid. DÜZ DEĞER yazılır, `var(--oim-ok)` DİYE ALIAS VERİLMEZ:
       özel-özellik değeri bildirildiği yerde (burada `body`) çözülür ve
       `:root`'taki alias açık tema değerine kilitlenip bu override'ı öldürür. */
    --oim-ok: #4ADE80;
    --oim-ok-soft: rgba(74, 222, 128, 0.15);
    --oim-ok-tx: #4ADE80;
    --oim-warn: #FBBF24;
    --oim-warn-soft: rgba(251, 191, 36, 0.15);
    --oim-warn-tx: #FBBF24;
    --oim-err: #F87171;
    --oim-err-soft: rgba(248, 113, 113, 0.15);
    --oim-err-tx: #F87171;
    --oim-info: #60A5FA;
    --oim-info-soft: rgba(96, 165, 250, 0.15);
    --oim-info-tx: #60A5FA;

    /* Koyu temada marka tonları #FFF'e doğru karışır (tasarım "Dark değeri"
       sütunu — design_system_analysis.md §1). Donuk sabitler. */
    --oim-p-h: #32577F;
    /* mix(p, #FFF, 0.12) */
    --oim-p-a: #496A8E;
    /* mix(p, #FFF, 0.22) */
    --oim-p-soft: rgba(22, 64, 110, 0.18);
    --oim-p-soft2: rgba(22, 64, 110, 0.30);
    --oim-p-tx: #738CA8;
    /* readable(p, #161B23, 4.5) — koyu yüzeyde okunur primary */
    --oim-sec-tx: #0E9F9F;
    /* readable(#0E9F9F, #161B23, 4.5) */
    --oim-sec-soft: rgba(14, 159, 159, 0.20);
}

/* --------------------------------------------------------------------------
   2. Tipografi
   -------------------------------------------------------------------------- */
/* RENK BOŞLUĞU (Faz F Worker A'nın bulgusu, Faz H'de kapatıldı): bu sınıflar
   boyut/ağırlık bildiriyordu ama `color` BİLDİRMİYORDU, dolayısıyla style.min.css'in
   eski paleti kazanıyordu. Tüm tüketiciler gerçek <h1> etiketinde (7 × .oim-h1,
   4 × .oim-h2).

   İKİ kural gerekiyor, biri DEĞİL — eski CSS iki ayrı özgüllükte saldırıyor:
     açık : `h1,h2,…{color:#455a64}`                        → (0,0,1)
     koyu : `body[data-theme=dark] h1,…{color:#b2b9bf}`     → (0,1,2)
   Tek bir `.oim-h1{color:…}` (0,1,0) açık temayı düzeltir ama KOYU temada
   (0,1,2)'ye YENİLİR ve başlıklar sessizce eski gri (#b2b9bf) kalırdı. Bu yüzden
   koyu tema için tema-kapsamlı ikinci kural (0,2,1) ile ÖZGÜLLÜKTE geçiliyor.
   Hiçbiri !important taşımıyor (eski kurallar da taşımıyor) — kural 5 "out-specify
   VEYA !important" diyor; burada out-specify yeterli ve daha temiz.
   Yükleme sırası (oim-design.css sonra) yalnızca EŞİT özgüllükte işe yarar,
   burada yaramaz; bu yüzden sıraya GÜVENİLMİYOR. */
.oim-h1,
.oim-h2 {
    color: var(--oim-tx);
}

body[data-theme="dark"] .oim-h1,
body[data-theme="dark"] .oim-h2 {
    color: var(--oim-tx);
}

.oim-h1 {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1.25;
    margin: 0;
}

.oim-h2 {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.3px;
    line-height: 1.3;
    margin: 0;
}

.oim-label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--oim-tx2);
    margin-bottom: 5px;
}

.oim-muted {
    color: var(--oim-tx2);
}

/* Sayısal vurgu — tabular rakamlar, hizalı sütunlar */
.oim-num {
    font-feature-settings: 'tnum';
    font-variant-numeric: tabular-nums;
}

.oim-amount {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.7px;
    font-feature-settings: 'tnum';
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   3. Kart
   -------------------------------------------------------------------------- */
.oim-card {
    background: var(--oim-sur);
    border: 1px solid var(--oim-bd);
    border-radius: var(--oim-r-card);
    box-shadow: var(--oim-sh);
    padding: var(--oim-sp-6);
}

.oim-card--flat {
    box-shadow: none;
}

.oim-card__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--oim-tx);
    margin: 0 0 var(--oim-sp-1);
}

.oim-card__sub {
    font-size: 12.5px;
    color: var(--oim-tx2);
    margin: 0 0 var(--oim-sp-4);
}

/* --------------------------------------------------------------------------
   4. Butonlar
   -------------------------------------------------------------------------- */
.oim-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--oim-sp-2);
    min-height: 44px;
    /* WCAG AA dokunma hedefi */
    padding: 11px 20px;
    border: 1px solid transparent;
    border-radius: var(--oim-r-btn);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.oim-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--oim-p-soft2);
}

.oim-btn[disabled],
.oim-btn.is-disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* Birincil — metin rengi theme.js'ten gelir (kontrast garantisi) */
.oim-btn--primary {
    background: var(--primary-color);
    color: var(--oim-on-primary);
}

.oim-btn--primary:hover:not([disabled]) {
    background: var(--oim-p-h);
    color: var(--oim-on-primary);
}

.oim-btn--primary:active:not([disabled]) {
    background: var(--oim-p-a);
}

/* İkincil — nötr çerçeve */
.oim-btn--secondary {
    background: transparent;
    border-color: var(--oim-bd2);
    color: var(--oim-tx2);
}

.oim-btn--secondary:hover:not([disabled]) {
    background: var(--oim-sur2);
    color: var(--oim-tx);
}

/* Sessiz — marka renkli metin, zeminsiz */
.oim-btn--ghost {
    background: transparent;
    border-color: var(--oim-bd2);
    color: var(--oim-primary-text);
}

.oim-btn--ghost:hover:not([disabled]) {
    background: var(--oim-p-soft);
}

/* Tehlikeli */
.oim-btn--danger {
    background: transparent;
    border-color: var(--oim-err);
    color: var(--oim-err-tx);
}

.oim-btn--danger:hover:not([disabled]) {
    background: var(--oim-err-soft);
}

.oim-btn--sm {
    min-height: 36px;
    padding: 8px 16px;
    font-size: 12.5px;
}

.oim-btn--block {
    width: 100%;
}

/* --------------------------------------------------------------------------
   5. Form alanları
   -------------------------------------------------------------------------- */
.oim-field {
    display: block;
    margin-bottom: var(--oim-sp-4);
}

.oim-input,
.oim-select,
.oim-textarea {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 10px 13px;
    border: 1px solid var(--oim-bd2);
    border-radius: var(--oim-r-input);
    background: var(--oim-sur);
    color: var(--oim-tx);
    font-size: 14px;
    line-height: 1.5;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.oim-textarea {
    min-height: 96px;
    resize: vertical;
}

.oim-input:focus,
.oim-select:focus,
.oim-textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--oim-p-soft);
}

.oim-input::placeholder,
.oim-textarea::placeholder {
    color: var(--oim-tx3-tx);
}

.oim-input[aria-invalid="true"],
.oim-input.is-invalid {
    border-color: var(--oim-err);
    box-shadow: 0 0 0 3px var(--oim-err-soft);
}

.oim-error-text {
    display: block;
    font-size: 11.5px;
    color: var(--oim-err-tx);
    margin-top: var(--oim-sp-1);
}

/* --------------------------------------------------------------------------
   6. Rozet / chip
   -------------------------------------------------------------------------- */
.oim-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--oim-r-pill);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
}

.oim-badge--ok {
    background: var(--oim-ok-soft);
    color: var(--oim-ok-tx);
}

.oim-badge--warn {
    background: var(--oim-warn-soft);
    color: var(--oim-warn-tx);
}

.oim-badge--err {
    background: var(--oim-err-soft);
    color: var(--oim-err-tx);
}

.oim-badge--info {
    background: var(--oim-info-soft);
    color: var(--oim-info-tx);
}

.oim-badge--neutral {
    background: var(--oim-sur2);
    color: var(--oim-tx2);
    border: 1px solid var(--oim-bd);
}

.oim-badge--brand {
    background: var(--oim-p-soft);
    color: var(--oim-primary-text);
}

/* --------------------------------------------------------------------------
   7. Liste satırı / tablo
   -------------------------------------------------------------------------- */
.oim-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.oim-row {
    display: flex;
    align-items: center;
    gap: var(--oim-sp-4);
    padding: var(--oim-sp-4);
    border-bottom: 1px solid var(--oim-bd);
}

.oim-row:last-child {
    border-bottom: 0;
}

.oim-table {
    width: 100%;
    border-collapse: collapse;
}

.oim-table th {
    text-align: left;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--oim-tx2);
    padding: 12px var(--oim-sp-4);
    border-bottom: 1px solid var(--oim-bd);
    white-space: nowrap;
}

.oim-table td {
    padding: 14px var(--oim-sp-4);
    border-bottom: 1px solid var(--oim-bd);
    color: var(--oim-tx);
    font-size: 13.5px;
}

.oim-table tr:last-child td {
    border-bottom: 0;
}

/* Geniş tablolar sayfayı yatay kaydırmaz, kendi içinde kayar */
.oim-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------------------
   8. Durum bileşenleri — boş / hata / yükleniyor
   -------------------------------------------------------------------------- */
.oim-state {
    text-align: center;
    padding: var(--oim-sp-8) var(--oim-sp-6);
    border: 1px solid var(--oim-bd);
    border-radius: 13px;
    background: var(--oim-sur);
}

.oim-state__icon {
    margin-bottom: var(--oim-sp-2);
    color: var(--oim-tx3);
}

.oim-state--error .oim-state__icon {
    color: var(--oim-err-tx);
}

.oim-state__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--oim-tx);
    margin-bottom: 2px;
}

.oim-state__desc {
    font-size: 12px;
    color: var(--oim-tx3-tx);
    margin-bottom: var(--oim-sp-4);
}

/* Skeleton — yükleniyor iskeleti */
.oim-skeleton {
    border-radius: 6px;
    background: linear-gradient(90deg, var(--oim-sur2) 25%, var(--oim-bd) 50%, var(--oim-sur2) 75%);
    background-size: 360px 100%;
    animation: oimShimmer 1.4s linear infinite;
}

@keyframes oimShimmer {
    0% {
        background-position: -360px 0;
    }

    100% {
        background-position: 360px 0;
    }
}

@keyframes oimPop {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Canlı durum noktası — nabız (prototip satır 20) */
@keyframes oimPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .3;
    }
}

/* Spinner dönüşü (prototip satır 22) */
@keyframes oimSpin {
    to {
        transform: rotate(360deg);
    }
}

/* Hareket duyarlılığı olan kullanıcılar için animasyonları durdur */
@media (prefers-reduced-motion: reduce) {

    .oim-skeleton,
    .oim-pop {
        animation: none;
    }

    .oim-btn {
        transition: none;
    }
}

.oim-pop {
    animation: oimPop .3s ease;
}

/* --------------------------------------------------------------------------
   9. Yardımcılar
   -------------------------------------------------------------------------- */
.oim-stack {
    display: flex;
    flex-direction: column;
    gap: var(--oim-sp-4);
}

.oim-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oim-sp-2);
}

.oim-grid {
    display: grid;
    gap: var(--oim-sp-4);
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* Ekran okuyucuya görünür, göze görünmez */
.oim-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Klavyeyle gezinenler için her yerde görünür focus */
:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}