/* ================================================================
   TOKENS — tek doğru kaynak: _tema_denemeleri/tema.css
   Nova mekanizması korunur:  bare :root = KOYU ·  [data-tema="acik"] = AÇIK
   Demo AÇIK-öncelikliydi; değerler burada ters yerleştirildi.
   Vurgu (accent) renkleri core/vurgu.css içinde.
   ================================================================ */

/* ------------------------------------------------ KOYU TEMA (taban) */
:root {
  color-scheme: dark;

  /* --- yüzey merdiveni ---
     zemin(sayfa) < zemin-2(yan menü/iç kutu) < yuzey=kart < yuzey-2=kart-2
     < yuzey-ust(yüzen katman) ;  girdi/oyuk koyuda zeminden AÇIKTIR */
  --zemin:      #030408;
  --zemin-2:    #05060A;
  --zemin-3:    #070910;

  --kart:       #080B10;   /* demo adı */
  --kart-2:     #0C1016;   /* demo adı */
  --yuzey:      var(--kart);
  --yuzey-2:    var(--kart-2);
  --yuzey-ust:  #0C1016;   /* açılır menü / modal / popover */

  --girdi:      #13161C;
  --oyuk:       var(--girdi);
  --girdi-odak: #171B23;

  /* Cam filmler: hover örtüleri. Kenar rengiyle aynı mavi-gri aile. */
  --cam:        rgba(158, 180, 210, 0.055);
  --cam-2:      rgba(158, 180, 210, 0.10);

  --kenar:      rgba(158, 180, 210, 0.10);
  --kenar-2:    rgba(158, 180, 210, 0.17);
  --cizgi:      rgba(158, 180, 210, 0.06);
  --cizgi-2:    rgba(158, 180, 210, 0.12);

  --metin:      #EEF3F9;
  --metin-2:    #A2B1C4;
  --metin-3:    #6C7C92;

  /* Editoryal versal mikro etiket */
  --etiket:     var(--metin-3);
  --etiket-2:   color-mix(in srgb, var(--metin-3) 78%, var(--zemin));

  /* --- vurgu tabanı: zümrüt (koyu). Diğer 8 renk vurgu.css'te. --- */
  --vurgu:      #2EE6A8;
  --vurgu-d1:   #0E9D72;
  --vurgu-d2:   #0A7A57;

  /* --- dolgu derinliği ---
     Renkli dolgular color-mix(renk --d1/--d2, #000) ile koyulaştırılır ki
     her temada BEYAZ yazı okunsun. Açıkta saf renk, koyuda derin ton. */
  --d1: 58%;
  --d2: 42%;

  /* Renkli zemin üstünde yazı beyaz — demo kuralı.
     TEK İSTİSNA sarı: koyu temada --sari #FFC24B ve beyaz yazıyla kontrast
     ~1,7:1 kalıyor ("Beklemede" rozeti okunmuyordu). Sarı zeminde koyu mürekkep
     kullanılır (~10:1). Açık temada --sari #B45309 olduğu için orada beyaz doğru
     ve o blokta geri alınır. */
  --btn-yazi:    #FFFFFF;
  --vurgu-yazi:  #FFFFFF;
  --yesil-yazi:  #FFFFFF;
  --sari-yazi:   #2B1D00;
  --olumlu-yazi: #FFFFFF;
  --uyari-yazi:  var(--sari-yazi);
  --hata-yazi:   #FFFFFF;
  --bilgi-yazi:  #FFFFFF;

  /* --- vurgu türevleri: LAZY, tema/vurgu değişince kendiliğinden döner.
         Yalnız burada tanımlı; [data-tema="acik"] bloğunda tekrarlanmaz. --- */
  --vurgu-koyu:    var(--vurgu-d2);
  --vurgu-dolgu:   var(--vurgu-d1);
  --vurgu-dolgu-2: var(--vurgu-d2);
  /* Dolgulu her yüzey (buton, SweetAlert onayı, etkin sayfalama, dolu rozet)
     TEK formülle boyanır: rengi --d1/--d2 ile karart, gradyana çevir.
     Önce --vurgu-d1/--vurgu-d2 doğrudan kullanılıyordu ve aynı sayfadaki
     yeşiller birbirinden farklı çıkıyordu. */
  --vurgu-gradyan: linear-gradient(135deg,
                   color-mix(in srgb, var(--vurgu) var(--d1), #000),
                   color-mix(in srgb, var(--vurgu) var(--d2), #000));
  --vurgu-sis:     color-mix(in srgb, var(--vurgu) var(--sis), transparent);

  /* --- veri renkleri (demo paleti) --- */
  --yesil:   #34D89B;
  --mavi:    #5B9DFF;
  --sari:    #FFC24B;
  --kirmizi: #FF6B6B;
  --mor:     #B39DFF;
  --pembe:   #FF7AB8;
  --gri:     #8B99AC;

  --gok:     var(--mavi);
  --altin:   var(--sari);
  --karsit:      var(--pembe);
  --karsit-sis:  color-mix(in srgb, var(--pembe) var(--sis), transparent);

  /* --sis: renk halelerinin gücü (metrik hale, yumuşak rozet, soft buton) */
  --sis: 15%;

  /* --- durum renkleri --- */
  --olumlu:     var(--yesil);
  --olumlu-sis: color-mix(in srgb, var(--yesil) var(--sis), transparent);
  --uyari:      var(--sari);
  --uyari-sis:  color-mix(in srgb, var(--sari) var(--sis), transparent);
  --hata:       var(--kirmizi);
  --hata-sis:   color-mix(in srgb, var(--kirmizi) var(--sis), transparent);
  --bilgi:      var(--mavi);
  --bilgi-sis:  color-mix(in srgb, var(--mavi) var(--sis), transparent);

  /* --- sipariş durum renkleri: vurgudan BAĞIMSIZ, sabit --- */
  /* Sipariş durumu renkleri = panelde TANIMLI renkler (wwwroot/assets/css/custom.css
     içindeki .durum-* paleti). Önceden tema paletine (mavi/mor/yeşil…) bağlıydı ve
     ekrandaki renkler durum tanımlarıyla uyuşmuyordu. Tek kaynak burasıdır; iki
     temada da aynı değerler geçerli (rozet dolgun olduğu için kontrast sorunsuz). */
  --d-yeni:       #029FCD;
  --d-onay:       #00B547;
  --d-fatura:     #1F00FB;
  --d-teslim:     #037E55;
  --d-kargo:      #FF5806;
  --d-iade:       #E80B5E;
  --d-iptal:      #FF0000;
  --d-ulasilamadi:#FD6306;
  --d-mukerrer:   #666666;
  --d-basarisiz:  #C414DD;
  --d-karaliste:  #000000;
  --d-ileri:      #FFC107;
  --d-hazirlanir: #17A2B8;
  --d-aranacak:   #6F42C1;

  /* --- dizgi --- */
  --yazi-baslik: 'Manrope', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --yazi-govde:  'Manrope', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --yazi-mono:   'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --iz-baslik:    -0.015em;
  --iz-baslik-xl: -0.025em;
  --iz-etiket:     0.1em;
  --iz-veri:      -0.005em;

  --ag-etiket: 800;
  --ag-baslik: 800;
  --ag-veri:   700;

  /* Punto merdiveni — demo yarım punto kullanır (12.5 / 13.5) */
  --p-95:  9.5px;
  --p-10:  10.5px;
  --p-11:  11px;
  --p-115: 11.5px;
  --p-12:  12px;
  --p-125: 12.5px;
  --p-13:  13px;
  --p-135: 13.5px;
  --p-14:  14px;
  --p-15:  15px;
  --p-16:  16px;
  --p-18:  18px;
  --p-20:  20px;
  --p-21:  21px;
  --p-24:  24px;
  --p-25:  25px;
  --p-30:  30px;
  --p-38:  38px;

  /* --- aralıklar --- */
  --a-1:   4px;
  --a-2:   8px;
  --a-3:   11px;
  --a-4:   14px;
  --a-5:   18px;
  --a-6:   22px;
  --a-7:   30px;
  --a-8:   40px;

  --u-1:   4px;
  --u-2:   8px;
  --u-3:   16px;
  --u-4:   24px;
  --u-5:   48px;

  --kirilim-sm:  576px;
  --kirilim-md:  768px;
  --kirilim-lg:  992px;
  --kirilim-xl:  1200px;
  --kirilim-xxl: 1400px;

  /* --- yarıçaplar: demo --r(kart) / --r-ic(girdi) / --hap --- */
  --r:       14px;
  --r-ic:    10px;
  --hap:     999px;
  --r-buyuk: 16px;   /* modal */

  --r-1:   9px;            /* menü ögesi, küçük kontrol */
  --r-2:   var(--r-ic);    /* girdi, panel */
  --r-3:   var(--r);       /* kart */
  --r-hap: var(--hap);

  /* --- gölge ve derinlik --- */
  --golge:   0 1px 2px rgba(0,0,0,.5), 0 16px 40px -20px rgba(0,0,0,.75);
  --golge-2: 0 2px 6px rgba(0,0,0,.55), 0 26px 60px -24px rgba(0,0,0,.9);

  --golge-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --golge-3: 0 4px 10px rgba(0,0,0,.6), 0 40px 90px -30px rgba(0,0,0,.95);

  --golge-kart:  var(--golge);
  --golge-yuzen: var(--golge-2);
  --golge-renk:  rgba(0, 0, 0, 0.72);
  --golge-oyuk:  inset 0 1px 2px -1px var(--golge-renk);

  --ic-isik:       inset 0 1px 0 rgba(255, 255, 255, 0.055);
  --ic-isik-guclu: inset 0 1px 0 rgba(255, 255, 255, 0.22);

  --isik: 0 0 18px var(--vurgu-sis);

  /* Demo zemini DÜZ ister: doku katmanı kapalı. */
  --doku-op: 0;

  --gecis:       160ms cubic-bezier(.2, .8, .3, 1);
  --gecis-hizli: 140ms cubic-bezier(.4, 0, .2, 1);

  --bulanik: blur(14px);

  /* --- kabuk ölçüleri --- */
  --menu-en:   236px;
  --ust-yuk:   58px;
  --satir-yuk: 42px;

  --kontrol-yuk:    38px;
  --kontrol-yuk-sm: 32px;
  --kontrol-yuk-mb: 44px;   /* mobil dokunma hedefi */

  --z-menu:     20;
  --z-ust:      30;
  --z-ortu:     80;
  --z-modal:    90;
  --z-bildirim: 100;
}

/* ------------------------------------------------ AÇIK TEMA */
:root[data-tema="acik"] {
  color-scheme: light;

  --zemin:      #EDF0F5;
  --zemin-2:    #FFFFFF;
  --zemin-3:    #E3E7EE;

  --kart:       #FFFFFF;
  --kart-2:     #F5F7FA;
  --yuzey-ust:  #FFFFFF;

  --girdi:      #FAFBFD;
  --girdi-odak: #FFFFFF;

  --cam:        rgba(14, 24, 40, 0.04);
  --cam-2:      rgba(14, 24, 40, 0.075);

  --kenar:      rgba(14, 24, 40, 0.10);
  --kenar-2:    rgba(14, 24, 40, 0.16);
  --cizgi:      rgba(14, 24, 40, 0.065);
  --cizgi-2:    rgba(14, 24, 40, 0.12);

  --metin:      #0B1522;
  --metin-2:    #3E4E62;
  --metin-3:    #66788E;

  /* vurgu tabanı: zümrüt (açık) */
  --vurgu:      #0A9B77;
  --vurgu-d1:   #0A9B77;
  --vurgu-d2:   #077257;

  /* açıkta saf renk yeter — kararma yok */
  --d1: 100%;
  --d2: 86%;

  /* Açıkta sarı koyu kehribara (#B45309) döndüğü için yazı yine beyaz */
  --sari-yazi: #FFFFFF;

  --yesil:   #0A8F6E;
  --mavi:    #2563EB;
  --sari:    #B45309;
  --kirmizi: #DC2626;
  --mor:     #7C3AED;
  --pembe:   #DB2777;
  --gri:     #64748B;

  --sis: 11%;

  /* Durum renkleri açık temada da tanımlı değerlerde kalır (üstteki blok) */

  --golge:   0 1px 2px rgba(14,24,40,.05), 0 12px 30px -16px rgba(14,24,40,.22);
  --golge-2: 0 2px 4px rgba(14,24,40,.06), 0 22px 48px -20px rgba(14,24,40,.30);

  --golge-1: 0 1px 2px rgba(14, 24, 40, 0.05);
  --golge-3: 0 4px 8px rgba(14,24,40,.07), 0 34px 70px -26px rgba(14,24,40,.34);

  --golge-renk: rgba(14, 24, 40, 0.22);

  --ic-isik:       inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --ic-isik-guclu: inset 0 1px 0 rgba(255, 255, 255, 0.25);

  --doku-op: 0;
}

/* ================================================================
   VURGU RENKLERİ — demo paleti (9 renk)
   Her blok yalnız --vurgu / --vurgu-d1 / --vurgu-d2 verir.
   --vurgu-koyu, --vurgu-sis, --vurgu-yazi, --vurgu-dolgu, --vurgu-gradyan
   tokens.css'te bunlara BAĞLI tanımlıdır, kendiliğinden döner.

   Bu dosya tokens.css'ten SONRA yüklenmelidir (olustur.sh sırası böyle).
   Koyu = bare seçici · Açık = [data-tema="acik"] ile, daha yüksek özgüllük.
   Varsayılan (öznitelik yok) zümrüttür ve tokens.css'te durur.
   ================================================================ */

/* ------------------------------------------------ KOYU */
:root[data-vurgu="zumrut"],
:root[data-vurgu="yesil"] {          /* eski anahtar */
  --vurgu: #2EE6A8; --vurgu-d1: #0E9D72; --vurgu-d2: #0A7A57;
}
:root[data-vurgu="safir"],
:root[data-vurgu="mavi"] {           /* eski anahtar */
  --vurgu: #5B9DFF; --vurgu-d1: #2E63D6; --vurgu-d2: #234CA8;
}
:root[data-vurgu="ametist"],
:root[data-vurgu="mor"] {            /* eski anahtar */
  --vurgu: #B39DFF; --vurgu-d1: #6D4FD8; --vurgu-d2: #5238B0;
}
:root[data-vurgu="kehribar"],
:root[data-vurgu="sari"] {           /* eski anahtar */
  --vurgu: #FFA940; --vurgu-d1: #C7761B; --vurgu-d2: #9A5A12;
}
:root[data-vurgu="yakut"] {
  --vurgu: #FF6B87; --vurgu-d1: #D63A57; --vurgu-d2: #A82743;
}
:root[data-vurgu="camgobegi"],
:root[data-vurgu="cyan"] {           /* eski anahtar */
  --vurgu: #4DD8F0; --vurgu-d1: #1594B5; --vurgu-d2: #0F7290;
}
:root[data-vurgu="kirmizi"] {
  --vurgu: #FF5A5A; --vurgu-d1: #D62F2F; --vurgu-d2: #A62222;
}
:root[data-vurgu="turuncu"] {
  --vurgu: #FF8A3D; --vurgu-d1: #D45F14; --vurgu-d2: #A8490E;
}
:root[data-vurgu="pembe"] {
  --vurgu: #FF71B8; --vurgu-d1: #D63E92; --vurgu-d2: #A82E71;
}

/* ------------------------------------------------ AÇIK */
:root[data-tema="acik"][data-vurgu="zumrut"],
:root[data-tema="acik"][data-vurgu="yesil"] {
  --vurgu: #0A9B77; --vurgu-d1: #0A9B77; --vurgu-d2: #077257;
}
:root[data-tema="acik"][data-vurgu="safir"],
:root[data-tema="acik"][data-vurgu="mavi"] {
  --vurgu: #2563EB; --vurgu-d1: #2563EB; --vurgu-d2: #1B4AB8;
}
:root[data-tema="acik"][data-vurgu="ametist"],
:root[data-tema="acik"][data-vurgu="mor"] {
  --vurgu: #7C3AED; --vurgu-d1: #7C3AED; --vurgu-d2: #5F2BC0;
}
:root[data-tema="acik"][data-vurgu="kehribar"],
:root[data-tema="acik"][data-vurgu="sari"] {
  --vurgu: #D97706; --vurgu-d1: #D97706; --vurgu-d2: #AD5C03;
}
:root[data-tema="acik"][data-vurgu="yakut"] {
  --vurgu: #E11D48; --vurgu-d1: #E11D48; --vurgu-d2: #B31139;
}
:root[data-tema="acik"][data-vurgu="camgobegi"],
:root[data-tema="acik"][data-vurgu="cyan"] {
  --vurgu: #0891B2; --vurgu-d1: #0891B2; --vurgu-d2: #06718D;
}
:root[data-tema="acik"][data-vurgu="kirmizi"] {
  --vurgu: #DC2626; --vurgu-d1: #DC2626; --vurgu-d2: #A81B1B;
}
:root[data-tema="acik"][data-vurgu="turuncu"] {
  --vurgu: #EA580C; --vurgu-d1: #EA580C; --vurgu-d2: #BC4409;
}
:root[data-tema="acik"][data-vurgu="pembe"] {
  --vurgu: #DB2777; --vurgu-d1: #DB2777; --vurgu-d2: #AD1B5C;
}

/* ================================================================
   SEÇİCİ ARAYÜZÜ
   ================================================================ */
.vurgu-secici {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.vurgu-nokta {
  position: relative;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--kenar-2);
  border-radius: var(--r-hap);
  background: linear-gradient(135deg,
              color-mix(in srgb, var(--nokta) var(--d1), #000),
              color-mix(in srgb, var(--nokta) var(--d2), #000));
  cursor: pointer;
  transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}
.vurgu-nokta:hover { transform: translateY(-1px) scale(1.06); }
.vurgu-nokta:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }

.vurgu-nokta.etkin {
  border-color: color-mix(in srgb, var(--nokta) 60%, transparent);
  box-shadow: 0 0 0 2px var(--zemin),
              0 0 0 3px color-mix(in srgb, var(--nokta) 55%, transparent),
              0 6px 18px -6px color-mix(in srgb, var(--nokta) 60%, transparent);
}
.vurgu-nokta.etkin::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--nokta-yazi, #FFFFFF);
  font-size: var(--p-13);
  font-weight: var(--ag-baslik);
}

/* Nokta rengi noktanın KENDİ rengidir, seçili vurguya bağlı değil.
   Koyu/açık tonlar --d1/--d2 ile temaya göre çözülür. */
.vurgu-nokta[data-renk="zumrut"],
.vurgu-nokta[data-renk="yesil"]     { --nokta: #14B389; }
.vurgu-nokta[data-renk="safir"],
.vurgu-nokta[data-renk="mavi"]      { --nokta: #2E7BE8; }
.vurgu-nokta[data-renk="ametist"],
.vurgu-nokta[data-renk="mor"]       { --nokta: #7C3AED; }
.vurgu-nokta[data-renk="kehribar"],
.vurgu-nokta[data-renk="sari"]      { --nokta: #D97706; }
.vurgu-nokta[data-renk="yakut"]     { --nokta: #E11D48; }
.vurgu-nokta[data-renk="camgobegi"],
.vurgu-nokta[data-renk="cyan"]      { --nokta: #0891B2; }
.vurgu-nokta[data-renk="kirmizi"]   { --nokta: #DC2626; }
.vurgu-nokta[data-renk="turuncu"]   { --nokta: #EA580C; }
.vurgu-nokta[data-renk="pembe"]     { --nokta: #DB2777; }

*,
*::before,
*::after { box-sizing: border-box; }

* { scrollbar-width: thin; scrollbar-color: var(--kenar-2) transparent; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--kenar-2);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--metin-3); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font-family: var(--yazi-govde);
  font-size: var(--p-135);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--yazi-baslik);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-wrap: balance;
}

h1 { font-size: var(--p-30); }
h2 { font-size: var(--p-25); }
h3 { font-size: var(--p-20); }
h4 { font-size: var(--p-16); }
h5 { font-size: var(--p-14); }
h6 { font-size: var(--p-13); }

p { margin: 0 0 var(--a-3); }
p:last-child { margin-bottom: 0; }

a { color: var(--vurgu); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg, video { max-width: 100%; height: auto; vertical-align: middle; }

button, input, select, textarea, optgroup {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
}

button { cursor: pointer; background: none; border: none; padding: 0; }
button:disabled, input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; opacity: 0.55; }

textarea { resize: vertical; }

:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }

ul, ol { margin: 0; padding-left: var(--a-5); }

hr {
  margin: var(--a-4) 0;
  border: 0;
  border-top: 1px solid var(--kenar);
}

code, pre, kbd, samp { font-family: var(--yazi-mono); font-size: 0.88em; }

pre {
  margin: 0;
  padding: var(--a-3);
  background: var(--zemin-2);
  border: 1px solid var(--kenar);
  border-radius: var(--r-1);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

code {
  padding: 1px 5px;
  background: var(--cam);
  border-radius: 4px;
  word-break: break-word;
}

pre code { padding: 0; background: none; }

table { border-collapse: collapse; border-spacing: 0; }

[hidden] { display: none !important; }

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

.m-0 { margin: 0 !important; }
.m-1 { margin: var(--u-1) !important; }
.m-2 { margin: var(--u-2) !important; }
.m-3 { margin: var(--u-3) !important; }
.m-4 { margin: var(--u-4) !important; }
.m-5 { margin: var(--u-5) !important; }
.m-auto { margin: auto !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--u-1) !important; }
.mt-2 { margin-top: var(--u-2) !important; }
.mt-3 { margin-top: var(--u-3) !important; }
.mt-4 { margin-top: var(--u-4) !important; }
.mt-5 { margin-top: var(--u-5) !important; }
.mt-auto { margin-top: auto !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--u-1) !important; }
.mb-2 { margin-bottom: var(--u-2) !important; }
.mb-3 { margin-bottom: var(--u-3) !important; }
.mb-4 { margin-bottom: var(--u-4) !important; }
.mb-5 { margin-bottom: var(--u-5) !important; }
.mb-auto { margin-bottom: auto !important; }

.ms-0 { margin-left: 0 !important; }
.ms-1 { margin-left: var(--u-1) !important; }
.ms-2 { margin-left: var(--u-2) !important; }
.ms-3 { margin-left: var(--u-3) !important; }
.ms-4 { margin-left: var(--u-4) !important; }
.ms-5 { margin-left: var(--u-5) !important; }
.ms-auto { margin-left: auto !important; }

.me-0 { margin-right: 0 !important; }
.me-1 { margin-right: var(--u-1) !important; }
.me-2 { margin-right: var(--u-2) !important; }
.me-3 { margin-right: var(--u-3) !important; }
.me-4 { margin-right: var(--u-4) !important; }
.me-5 { margin-right: var(--u-5) !important; }
.me-auto { margin-right: auto !important; }

.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-1 { margin-left: var(--u-1) !important; margin-right: var(--u-1) !important; }
.mx-2 { margin-left: var(--u-2) !important; margin-right: var(--u-2) !important; }
.mx-3 { margin-left: var(--u-3) !important; margin-right: var(--u-3) !important; }
.mx-4 { margin-left: var(--u-4) !important; margin-right: var(--u-4) !important; }
.mx-5 { margin-left: var(--u-5) !important; margin-right: var(--u-5) !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: var(--u-1) !important; margin-bottom: var(--u-1) !important; }
.my-2 { margin-top: var(--u-2) !important; margin-bottom: var(--u-2) !important; }
.my-3 { margin-top: var(--u-3) !important; margin-bottom: var(--u-3) !important; }
.my-4 { margin-top: var(--u-4) !important; margin-bottom: var(--u-4) !important; }
.my-5 { margin-top: var(--u-5) !important; margin-bottom: var(--u-5) !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }

.p-0 { padding: 0 !important; }
.p-1 { padding: var(--u-1) !important; }
.p-2 { padding: var(--u-2) !important; }
.p-3 { padding: var(--u-3) !important; }
.p-4 { padding: var(--u-4) !important; }
.p-5 { padding: var(--u-5) !important; }

.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: var(--u-1) !important; }
.pt-2 { padding-top: var(--u-2) !important; }
.pt-3 { padding-top: var(--u-3) !important; }
.pt-4 { padding-top: var(--u-4) !important; }
.pt-5 { padding-top: var(--u-5) !important; }

.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: var(--u-1) !important; }
.pb-2 { padding-bottom: var(--u-2) !important; }
.pb-3 { padding-bottom: var(--u-3) !important; }
.pb-4 { padding-bottom: var(--u-4) !important; }
.pb-5 { padding-bottom: var(--u-5) !important; }

.ps-0 { padding-left: 0 !important; }
.ps-1 { padding-left: var(--u-1) !important; }
.ps-2 { padding-left: var(--u-2) !important; }
.ps-3 { padding-left: var(--u-3) !important; }
.ps-4 { padding-left: var(--u-4) !important; }
.ps-5 { padding-left: var(--u-5) !important; }

.pe-0 { padding-right: 0 !important; }
.pe-1 { padding-right: var(--u-1) !important; }
.pe-2 { padding-right: var(--u-2) !important; }
.pe-3 { padding-right: var(--u-3) !important; }
.pe-4 { padding-right: var(--u-4) !important; }
.pe-5 { padding-right: var(--u-5) !important; }

.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: var(--u-1) !important; padding-right: var(--u-1) !important; }
.px-2 { padding-left: var(--u-2) !important; padding-right: var(--u-2) !important; }
.px-3 { padding-left: var(--u-3) !important; padding-right: var(--u-3) !important; }
.px-4 { padding-left: var(--u-4) !important; padding-right: var(--u-4) !important; }
.px-5 { padding-left: var(--u-5) !important; padding-right: var(--u-5) !important; }

.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: var(--u-1) !important; padding-bottom: var(--u-1) !important; }
.py-2 { padding-top: var(--u-2) !important; padding-bottom: var(--u-2) !important; }
.py-3 { padding-top: var(--u-3) !important; padding-bottom: var(--u-3) !important; }
.py-4 { padding-top: var(--u-4) !important; padding-bottom: var(--u-4) !important; }
.py-5 { padding-top: var(--u-5) !important; padding-bottom: var(--u-5) !important; }

.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid { display: grid !important; }
.d-table { display: table !important; }
.d-table-row { display: table-row !important; }
.d-table-cell { display: table-cell !important; }

.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-row-reverse { flex-direction: row-reverse !important; }
.flex-column-reverse { flex-direction: column-reverse !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-fill { flex: 1 1 auto !important; }
.flex-grow-0 { flex-grow: 0 !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-shrink-1 { flex-shrink: 1 !important; }

.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-items-baseline { align-items: baseline !important; }
.align-items-stretch { align-items: stretch !important; }

.align-self-start { align-self: flex-start !important; }
.align-self-end { align-self: flex-end !important; }
.align-self-center { align-self: center !important; }
.align-self-stretch { align-self: stretch !important; }

.align-content-start { align-content: flex-start !important; }
.align-content-center { align-content: center !important; }
.align-content-between { align-content: space-between !important; }

.justify-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }
.justify-content-evenly { justify-content: space-evenly !important; }

.gap-0 { gap: 0 !important; }
.gap-1 { gap: var(--u-1) !important; }
.gap-2 { gap: var(--u-2) !important; }
.gap-3 { gap: var(--u-3) !important; }
.gap-4 { gap: var(--u-4) !important; }
.gap-5 { gap: var(--u-5) !important; }

.order-first { order: -1 !important; }
.order-last { order: 99 !important; }
.order-0 { order: 0 !important; }
.order-1 { order: 1 !important; }
.order-2 { order: 2 !important; }
.order-3 { order: 3 !important; }

.align-top { vertical-align: top !important; }
.align-middle { vertical-align: middle !important; }
.align-bottom { vertical-align: bottom !important; }
.align-text-top { vertical-align: text-top !important; }
.align-text-bottom { vertical-align: text-bottom !important; }

.position-static { position: static !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.position-sticky { position: sticky !important; }
.sticky-top { position: sticky; top: 0; z-index: 20; }

.top-0 { top: 0 !important; }
.top-50 { top: 50% !important; }
.top-100 { top: 100% !important; }
.bottom-0 { bottom: 0 !important; }
.bottom-100 { bottom: 100% !important; }
.start-0 { left: 0 !important; }
.start-50 { left: 50% !important; }
.start-100 { left: 100% !important; }
.end-0 { right: 0 !important; }
.end-50 { right: 50% !important; }

.translate-middle { transform: translate(-50%, -50%) !important; }
.translate-middle-x { transform: translateX(-50%) !important; }
.translate-middle-y { transform: translateY(-50%) !important; }

.float-start { float: left !important; }
.float-end { float: right !important; }
.float-none { float: none !important; }

.overflow-auto { overflow: auto !important; }
.overflow-hidden { overflow: hidden !important; }
.overflow-visible { overflow: visible !important; }
.overflow-scroll { overflow: scroll !important; }
.overflow-x-auto { overflow-x: auto !important; }
.overflow-y-auto { overflow-y: auto !important; }

.w-25 { width: 25% !important; }
.w-50 { width: 50% !important; }
.w-75 { width: 75% !important; }
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }
.mw-100 { max-width: 100% !important; }

.h-25 { height: 25% !important; }
.h-50 { height: 50% !important; }
.h-75 { height: 75% !important; }
.h-100 { height: 100% !important; }
.h-auto { height: auto !important; }
.mh-100 { max-height: 100% !important; }

.vw-100 { width: 100vw !important; }
.vh-100 { height: 100vh !important; }
.min-vh-100 { min-height: 100vh !important; }

.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }

.user-select-none { user-select: none !important; }
.pe-none { pointer-events: none !important; }
.pe-auto { pointer-events: auto !important; }

@media (min-width: 576px) {
  .d-sm-none { display: none !important; }
  .d-sm-block { display: block !important; }
  .d-sm-inline { display: inline !important; }
  .d-sm-inline-block { display: inline-block !important; }
  .d-sm-flex { display: flex !important; }
  .d-sm-inline-flex { display: inline-flex !important; }
  .flex-sm-row { flex-direction: row !important; }
  .flex-sm-column { flex-direction: column !important; }
}

@media (min-width: 768px) {
  .d-md-none { display: none !important; }
  .d-md-block { display: block !important; }
  .d-md-inline { display: inline !important; }
  .d-md-inline-block { display: inline-block !important; }
  .d-md-flex { display: flex !important; }
  .d-md-inline-flex { display: inline-flex !important; }
  .flex-md-row { flex-direction: row !important; }
  .flex-md-column { flex-direction: column !important; }
  .text-md-end { text-align: right !important; }
  .text-md-start { text-align: left !important; }
}

@media (min-width: 992px) {
  .d-lg-none { display: none !important; }
  .d-lg-block { display: block !important; }
  .d-lg-inline { display: inline !important; }
  .d-lg-inline-block { display: inline-block !important; }
  .d-lg-flex { display: flex !important; }
  .d-lg-inline-flex { display: inline-flex !important; }
  .flex-lg-row { flex-direction: row !important; }
  .flex-lg-column { flex-direction: column !important; }
}

@media (min-width: 1200px) {
  .d-xl-none { display: none !important; }
  .d-xl-block { display: block !important; }
  .d-xl-inline { display: inline !important; }
  .d-xl-flex { display: flex !important; }
  .d-xl-inline-flex { display: inline-flex !important; }
}

@media (min-width: 1400px) {
  .d-xxl-none { display: none !important; }
  .d-xxl-block { display: block !important; }
  .d-xxl-flex { display: flex !important; }
}

.container,
.container-fluid {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--u-3);
  padding-right: var(--u-3);
}

@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

/* Gutter Bootstrap'in iki eksenli modeliyle: yatay --oluk-x, dikey --oluk-y.
   Onceden .g-2 yalniz YATAY, .g-3 yalniz DIKEY bosluk veriyordu; g-2'li
   formlarda satirlar dikeyde bitisik cikiyor, g-3'lu satirlarda sutunlar
   yan yana yapisiyordu. */
.row {
  --oluk-x: var(--u-3);
  --oluk-y: 0px;
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--oluk-x) * -0.5);
  margin-right: calc(var(--oluk-x) * -0.5);
  margin-top: calc(var(--oluk-y) * -1);
}

.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  margin-top: var(--oluk-y);
  padding-left: calc(var(--oluk-x) * 0.5);
  padding-right: calc(var(--oluk-x) * 0.5);
}

.col { flex: 1 0 0%; }
.col-auto { flex: 0 0 auto; width: auto; }

.col-1  { flex: 0 0 auto; width: 8.33333333%; }
.col-2  { flex: 0 0 auto; width: 16.66666667%; }
.col-3  { flex: 0 0 auto; width: 25%; }
.col-4  { flex: 0 0 auto; width: 33.33333333%; }
.col-5  { flex: 0 0 auto; width: 41.66666667%; }
.col-6  { flex: 0 0 auto; width: 50%; }
.col-7  { flex: 0 0 auto; width: 58.33333333%; }
.col-8  { flex: 0 0 auto; width: 66.66666667%; }
.col-9  { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.33333333%; }
.col-11 { flex: 0 0 auto; width: 91.66666667%; }
.col-12 { flex: 0 0 auto; width: 100%; }

.g-0  { --oluk-x: 0px;        --oluk-y: 0px; }
.g-1  { --oluk-x: var(--u-1); --oluk-y: var(--u-1); }
.g-2  { --oluk-x: var(--u-2); --oluk-y: var(--u-2); }
.g-3  { --oluk-x: var(--u-3); --oluk-y: var(--u-3); }
.g-4  { --oluk-x: var(--u-4); --oluk-y: var(--u-4); }
.g-5  { --oluk-x: var(--u-5); --oluk-y: var(--u-5); }
/* Tek eksen isteyen yerler icin gx-* / gy-* */
.gx-0 { --oluk-x: 0px; }        .gy-0 { --oluk-y: 0px; }
.gx-2 { --oluk-x: var(--u-2); } .gy-2 { --oluk-y: var(--u-2); }
.gx-3 { --oluk-x: var(--u-3); } .gy-3 { --oluk-y: var(--u-3); }
.gx-4 { --oluk-x: var(--u-4); } .gy-4 { --oluk-y: var(--u-4); }

@media (min-width: 576px) {
  .col-sm       { flex: 1 0 0%; }
  .col-sm-auto  { flex: 0 0 auto; width: auto; }
  .col-sm-1  { flex: 0 0 auto; width: 8.33333333%; }
  .col-sm-2  { flex: 0 0 auto; width: 16.66666667%; }
  .col-sm-3  { flex: 0 0 auto; width: 25%; }
  .col-sm-4  { flex: 0 0 auto; width: 33.33333333%; }
  .col-sm-5  { flex: 0 0 auto; width: 41.66666667%; }
  .col-sm-6  { flex: 0 0 auto; width: 50%; }
  .col-sm-7  { flex: 0 0 auto; width: 58.33333333%; }
  .col-sm-8  { flex: 0 0 auto; width: 66.66666667%; }
  .col-sm-9  { flex: 0 0 auto; width: 75%; }
  .col-sm-10 { flex: 0 0 auto; width: 83.33333333%; }
  .col-sm-11 { flex: 0 0 auto; width: 91.66666667%; }
  .col-sm-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 768px) {
  .col-md       { flex: 1 0 0%; }
  .col-md-auto  { flex: 0 0 auto; width: auto; }
  .col-md-1  { flex: 0 0 auto; width: 8.33333333%; }
  .col-md-2  { flex: 0 0 auto; width: 16.66666667%; }
  .col-md-3  { flex: 0 0 auto; width: 25%; }
  .col-md-4  { flex: 0 0 auto; width: 33.33333333%; }
  .col-md-5  { flex: 0 0 auto; width: 41.66666667%; }
  .col-md-6  { flex: 0 0 auto; width: 50%; }
  .col-md-7  { flex: 0 0 auto; width: 58.33333333%; }
  .col-md-8  { flex: 0 0 auto; width: 66.66666667%; }
  .col-md-9  { flex: 0 0 auto; width: 75%; }
  .col-md-10 { flex: 0 0 auto; width: 83.33333333%; }
  .col-md-11 { flex: 0 0 auto; width: 91.66666667%; }
  .col-md-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 992px) {
  .col-lg       { flex: 1 0 0%; }
  .col-lg-auto  { flex: 0 0 auto; width: auto; }
  .col-lg-1  { flex: 0 0 auto; width: 8.33333333%; }
  .col-lg-2  { flex: 0 0 auto; width: 16.66666667%; }
  .col-lg-3  { flex: 0 0 auto; width: 25%; }
  .col-lg-4  { flex: 0 0 auto; width: 33.33333333%; }
  .col-lg-5  { flex: 0 0 auto; width: 41.66666667%; }
  .col-lg-6  { flex: 0 0 auto; width: 50%; }
  .col-lg-7  { flex: 0 0 auto; width: 58.33333333%; }
  .col-lg-8  { flex: 0 0 auto; width: 66.66666667%; }
  .col-lg-9  { flex: 0 0 auto; width: 75%; }
  .col-lg-10 { flex: 0 0 auto; width: 83.33333333%; }
  .col-lg-11 { flex: 0 0 auto; width: 91.66666667%; }
  .col-lg-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 1200px) {
  .col-xl       { flex: 1 0 0%; }
  .col-xl-auto  { flex: 0 0 auto; width: auto; }
  .col-xl-1  { flex: 0 0 auto; width: 8.33333333%; }
  .col-xl-2  { flex: 0 0 auto; width: 16.66666667%; }
  .col-xl-3  { flex: 0 0 auto; width: 25%; }
  .col-xl-4  { flex: 0 0 auto; width: 33.33333333%; }
  .col-xl-5  { flex: 0 0 auto; width: 41.66666667%; }
  .col-xl-6  { flex: 0 0 auto; width: 50%; }
  .col-xl-7  { flex: 0 0 auto; width: 58.33333333%; }
  .col-xl-8  { flex: 0 0 auto; width: 66.66666667%; }
  .col-xl-9  { flex: 0 0 auto; width: 75%; }
  .col-xl-10 { flex: 0 0 auto; width: 83.33333333%; }
  .col-xl-11 { flex: 0 0 auto; width: 91.66666667%; }
  .col-xl-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 1400px) {
  .col-xxl       { flex: 1 0 0%; }
  .col-xxl-auto  { flex: 0 0 auto; width: auto; }
  .col-xxl-1  { flex: 0 0 auto; width: 8.33333333%; }
  .col-xxl-2  { flex: 0 0 auto; width: 16.66666667%; }
  .col-xxl-3  { flex: 0 0 auto; width: 25%; }
  .col-xxl-4  { flex: 0 0 auto; width: 33.33333333%; }
  .col-xxl-5  { flex: 0 0 auto; width: 41.66666667%; }
  .col-xxl-6  { flex: 0 0 auto; width: 50%; }
  .col-xxl-7  { flex: 0 0 auto; width: 58.33333333%; }
  .col-xxl-8  { flex: 0 0 auto; width: 66.66666667%; }
  .col-xxl-9  { flex: 0 0 auto; width: 75%; }
  .col-xxl-10 { flex: 0 0 auto; width: 83.33333333%; }
  .col-xxl-11 { flex: 0 0 auto; width: 91.66666667%; }
  .col-xxl-12 { flex: 0 0 auto; width: 100%; }
}

.text-start { text-align: left !important; }
.text-end { text-align: right !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
.text-justify { text-align: justify !important; }

.text-nowrap { white-space: nowrap !important; }
.text-wrap { white-space: normal !important; }
.text-break { word-break: break-word !important; overflow-wrap: break-word !important; }

.text-lowercase { text-transform: lowercase !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-capitalize { text-transform: capitalize !important; }

.text-truncate {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-decoration-line-through { text-decoration: line-through !important; }

.text-muted { color: var(--metin-3) !important; }
.text-body { color: var(--metin) !important; }
.text-primary { color: var(--vurgu) !important; }
.text-secondary { color: var(--metin-2) !important; }
.text-success { color: var(--olumlu) !important; }
.text-danger { color: var(--hata) !important; }
.text-warning { color: var(--uyari) !important; }
.text-info { color: var(--bilgi) !important; }
.text-light { color: var(--metin-2) !important; }
.text-dark { color: var(--metin) !important; }
.text-white { color: #FFFFFF !important; }
.text-white-50 { color: rgba(255, 255, 255, 0.55) !important; }
.text-black { color: #000000 !important; }
.text-reset { color: inherit !important; }

.fw-light { font-weight: 300 !important; }
.fw-normal { font-weight: 400 !important; }
.fw-medium { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold { font-weight: 700 !important; }

.fst-italic { font-style: italic !important; }
.fst-normal { font-style: normal !important; }

.fs-1 { font-size: var(--p-38) !important; font-family: var(--yazi-baslik); letter-spacing: -0.03em; }
.fs-2 { font-size: var(--p-30) !important; font-family: var(--yazi-baslik); letter-spacing: -0.025em; }
.fs-3 { font-size: var(--p-25) !important; font-family: var(--yazi-baslik); letter-spacing: -0.02em; }
.fs-4 { font-size: var(--p-20) !important; }
.fs-5 { font-size: var(--p-16) !important; }
.fs-6 { font-size: var(--p-14) !important; }

.fs-11 { font-size: var(--p-11) !important; }
.fs-12 { font-size: var(--p-12) !important; }
.fs-13 { font-size: var(--p-13) !important; }
.fs-14 { font-size: var(--p-14) !important; }
.fs-16 { font-size: var(--p-16) !important; }
.fs-20 { font-size: var(--p-20) !important; }

.small { font-size: var(--p-12) !important; }

.lh-1 { line-height: 1 !important; }
.lh-sm { line-height: 1.25 !important; }
.lh-base { line-height: 1.55 !important; }
.lh-lg { line-height: 1.85 !important; }

.font-monospace { font-family: var(--yazi-mono) !important; }
.font-baslik { font-family: var(--yazi-baslik) !important; }

.sayi {
  font-family: var(--yazi-mono) !important;
  font-variant-numeric: tabular-nums;
}

.bg-primary { background-color: var(--vurgu) !important; color: var(--vurgu-yazi) !important; }
.bg-secondary { background-color: var(--metin-3) !important; color: var(--zemin) !important; }
.bg-success { background-color: var(--olumlu) !important; color: var(--olumlu-yazi) !important; }
.bg-danger { background-color: var(--hata) !important; color: var(--hata-yazi) !important; }
.bg-warning { background-color: var(--uyari) !important; color: var(--uyari-yazi) !important; }
.bg-info { background-color: var(--bilgi) !important; color: var(--bilgi-yazi) !important; }
.bg-light { background-color: var(--cam) !important; }
.bg-dark { background-color: var(--zemin-2) !important; color: var(--metin) !important; }
.bg-white { background-color: #FFFFFF !important; color: #0E1420 !important; }
.bg-body { background-color: var(--zemin) !important; }
.bg-transparent { background-color: transparent !important; }

.bg-primary-subtle { background-color: var(--vurgu-sis) !important; color: var(--vurgu) !important; }
.bg-secondary-subtle { background-color: var(--cam) !important; color: var(--metin-2) !important; }
.bg-success-subtle { background-color: var(--olumlu-sis) !important; color: var(--olumlu) !important; }
.bg-danger-subtle { background-color: var(--hata-sis) !important; color: var(--hata) !important; }
.bg-warning-subtle { background-color: var(--uyari-sis) !important; color: var(--uyari) !important; }
.bg-info-subtle { background-color: var(--bilgi-sis) !important; color: var(--bilgi) !important; }
.bg-light-subtle { background-color: var(--cam) !important; }
.bg-dark-subtle { background-color: var(--zemin-2) !important; }

.bg-opacity-10 { --bs-bg-opacity: 0.1; opacity: 1; }
.bg-opacity-25 { --bs-bg-opacity: 0.25; }
.bg-opacity-50 { --bs-bg-opacity: 0.5; }
.bg-opacity-75 { --bs-bg-opacity: 0.75; }

.bg-primary.bg-opacity-10 { background-color: var(--vurgu-sis) !important; color: var(--vurgu) !important; }
.bg-success.bg-opacity-10 { background-color: var(--olumlu-sis) !important; color: var(--olumlu) !important; }
.bg-danger.bg-opacity-10 { background-color: var(--hata-sis) !important; color: var(--hata) !important; }
.bg-warning.bg-opacity-10 { background-color: var(--uyari-sis) !important; color: var(--uyari) !important; }
.bg-info.bg-opacity-10 { background-color: var(--bilgi-sis) !important; color: var(--bilgi) !important; }
.bg-secondary.bg-opacity-10 { background-color: var(--cam) !important; color: var(--metin-2) !important; }

.border { border: 1px solid var(--kenar) !important; }
.border-0 { border: 0 !important; }
.border-top { border-top: 1px solid var(--kenar) !important; }
.border-top-0 { border-top: 0 !important; }
.border-bottom { border-bottom: 1px solid var(--kenar) !important; }
.border-bottom-0 { border-bottom: 0 !important; }
.border-start { border-left: 1px solid var(--kenar) !important; }
.border-start-0 { border-left: 0 !important; }
.border-end { border-right: 1px solid var(--kenar) !important; }
.border-end-0 { border-right: 0 !important; }

.border-primary { border-color: var(--vurgu) !important; }
.border-secondary { border-color: var(--metin-3) !important; }
.border-success { border-color: var(--olumlu) !important; }
.border-danger { border-color: var(--hata) !important; }
.border-warning { border-color: var(--uyari) !important; }
.border-info { border-color: var(--bilgi) !important; }
.border-light { border-color: var(--kenar) !important; }
.border-dark { border-color: var(--kenar-2) !important; }

.border-1 { border-width: 1px !important; }
.border-2 { border-width: 2px !important; }
.border-3 { border-width: 3px !important; }

.rounded { border-radius: var(--r-2) !important; }
.rounded-0 { border-radius: 0 !important; }
.rounded-1 { border-radius: var(--r-1) !important; }
.rounded-2 { border-radius: var(--r-2) !important; }
.rounded-3 { border-radius: var(--r-3) !important; }
.rounded-circle { border-radius: 50% !important; }
.rounded-pill { border-radius: var(--r-hap) !important; }
.rounded-top { border-top-left-radius: var(--r-2) !important; border-top-right-radius: var(--r-2) !important; }
.rounded-bottom { border-bottom-left-radius: var(--r-2) !important; border-bottom-right-radius: var(--r-2) !important; }
.rounded-start { border-top-left-radius: var(--r-2) !important; border-bottom-left-radius: var(--r-2) !important; }
.rounded-end { border-top-right-radius: var(--r-2) !important; border-bottom-right-radius: var(--r-2) !important; }

.shadow-none { box-shadow: none !important; }
.shadow-sm { box-shadow: var(--golge-1) !important; }
.shadow { box-shadow: var(--golge-2) !important; }
.shadow-lg { box-shadow: var(--golge-3) !important; }

.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: 0.25 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-75 { opacity: 0.75 !important; }
.opacity-100 { opacity: 1 !important; }

.cam {
  background: var(--cam);
  border: 1px solid var(--kenar);
  backdrop-filter: var(--bulanik);
  -webkit-backdrop-filter: var(--bulanik);
}

/* Velzon'un yumusak zemin siniflari — sayfalar hala kullaniyor */
.bg-soft-primary   { background: var(--vurgu-sis) !important; color: var(--vurgu); }
.bg-soft-success   { background: var(--olumlu-sis) !important; color: var(--olumlu); }
.bg-soft-danger    { background: var(--hata-sis) !important; color: var(--hata); }
.bg-soft-warning   { background: var(--uyari-sis) !important; color: var(--uyari); }
.bg-soft-info      { background: var(--bilgi-sis) !important; color: var(--bilgi); }
.bg-soft-secondary { background: var(--cam) !important; color: var(--metin-2); }
.bg-soft-dark      { background: var(--cam-2) !important; color: var(--metin); }
.bg-soft-light     { background: var(--cam) !important; color: var(--metin-2); }

/* Sayfalar dolgun zeminlerde .text-white yaziyor; koyu temada bu renkler acik
   tonlu oldugu icin beyaz yazi okunmuyor. Zemin hangi renkse okunur karsiligi verilir. */
.bg-primary.text-white, .bg-primary .text-white,
.bg-primary.text-white-50, .bg-primary .text-white-50 { color: var(--vurgu-yazi) !important; }
.bg-success.text-white, .bg-success .text-white { color: var(--olumlu-yazi) !important; }
.bg-danger.text-white, .bg-danger .text-white { color: var(--hata-yazi) !important; }
.bg-warning.text-white, .bg-warning .text-white { color: var(--uyari-yazi) !important; }
.bg-info.text-white, .bg-info .text-white { color: var(--bilgi-yazi) !important; }
.bg-secondary.text-white, .bg-secondary .text-white { color: var(--zemin) !important; }

.kabuk {
  display: grid;
  grid-template-columns: var(--menu-en) 1fr;
  min-height: 100vh;
}

.kabuk.menu-dar { grid-template-columns: 74px 1fr; }

/* Zemin DUZ. Onceki surumdeki uc radial hale ve grain dokusu kaldirildi:
   demo tasariminda sayfa genelinde isik oyunu yok, zemin tek renk.
   Eleman layout'ta hala render ediliyor (_Layout.cshtml), bu yuzden
   silinmedi; yalniz bos birakildi. */
.zemin-isik {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: none;
}

.yan-menu {
  position: sticky;
  top: 0;
  z-index: var(--z-menu);
  height: 100vh;
  overflow-y: auto;
  padding: 0 13px 18px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  border-right: 1px solid var(--kenar);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 180px), var(--zemin);
  box-shadow: 14px 0 26px -22px var(--golge-renk);
}

:root[data-tema="acik"] .yan-menu {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), transparent 180px), var(--zemin);
}

/* Marka blogu ust bar yuksekliginde: iki tarafin ust cizgisi ayni hizaya gelir */
.marka {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
  height: var(--ust-yuk);
  margin: 0 -13px;
  padding: 0 20px;
  border-bottom: 1px solid var(--kenar);
  text-decoration: none;
  color: inherit;
}
.marka:hover { text-decoration: none; }
.marka-ikon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-1);
  background: linear-gradient(135deg, var(--vurgu), var(--vurgu-koyu));
  color: var(--vurgu-yazi);
  display: grid;
  place-items: center;
  font-family: var(--yazi-baslik);
  font-weight: 700;
  font-size: var(--p-16);
  flex-shrink: 0;
  box-shadow: var(--ic-isik-guclu);
  overflow: hidden;
}
.marka-ikon img { width: 100%; height: 100%; object-fit: cover; }
.marka-alt {
  display: block;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--p-10);
  letter-spacing: var(--iz-etiket);
  text-transform: uppercase;
  color: var(--etiket);
}

.menu-grup { display: flex; flex-direction: column; gap: 1px; }

.menu-baslik {
  padding: 0 10px 5px;
  font-size: var(--p-10);
  font-weight: 700;
  letter-spacing: var(--iz-etiket);
  text-transform: uppercase;
  color: var(--etiket);
}

.menu-og {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 3px 10px;
  border: 1px solid transparent;
  border-radius: var(--r-1);
  background: none;
  color: var(--metin-2);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: var(--iz-veri);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: var(--gecis);
}

.menu-og:hover { background: var(--cam); color: var(--metin); text-decoration: none; }

.menu-og.etkin {
  background: var(--vurgu-sis);
  border-color: transparent;
  color: var(--vurgu);
  font-weight: 700;
  letter-spacing: var(--iz-baslik);
}

.menu-og.etkin::before {
  content: '';
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 2px;
  border-radius: 0;
  background: var(--vurgu);
  box-shadow: none;
}

.menu-og .ikon { width: 17px; text-align: center; font-size: 15px; opacity: 0.9; flex-shrink: 0; }

.menu-og .rozet {
  margin-left: auto;
  padding: 1px 6px;
  border-radius: var(--r-1);
  background: var(--karsit-sis);
  border: 1px solid color-mix(in srgb, var(--karsit) 25%, transparent);
  color: var(--karsit);
  font-family: var(--yazi-mono);
  font-size: var(--p-11);
  font-weight: 500;
}
.menu-og.etkin .rozet { background: var(--vurgu-sis); color: var(--vurgu); border-color: color-mix(in srgb, var(--vurgu) 30%, transparent); }

.menu-alt-liste {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows var(--gecis);
}
.menu-alt-liste > div { min-height: 0; overflow: hidden; }
.menu-alt-liste.acik { grid-template-rows: 1fr; }

.menu-alt-ic {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 3px 0 5px 17px;
  margin-left: 18px;
  border-left: 1px solid var(--kenar);
}

.menu-alt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 3px 10px;
  border-radius: var(--r-1);
  color: var(--metin-3);
  font-size: 13px;
  text-decoration: none;
  transition: var(--gecis-hizli);
}
.menu-alt::before {
  content: '';
  position: absolute;
  left: -18px;
  width: 7px;
  height: 1px;
  background: var(--kenar);
  transition: var(--gecis-hizli);
}
.menu-alt:hover { background: var(--cam); color: var(--metin); text-decoration: none; }
.menu-alt:hover::before { background: var(--kenar-2); width: 11px; }

.menu-alt.etkin { color: var(--vurgu); font-weight: 700; letter-spacing: var(--iz-baslik); background: var(--vurgu-sis); }
.menu-alt.etkin::before { background: var(--vurgu); width: 11px; box-shadow: none; }

.menu-alt .ikon { font-size: var(--p-13); opacity: .8; }

.menu-og .ok { margin-left: auto; font-size: 10px; color: var(--metin-3); transition: transform var(--gecis); }
.menu-og[aria-expanded="true"] .ok { transform: rotate(90deg); }
.menu-og[aria-expanded="true"] { color: var(--metin); }

.yan-menu::-webkit-scrollbar { width: 5px; }
.yan-menu::-webkit-scrollbar-track { background: transparent; }
.yan-menu::-webkit-scrollbar-thumb { background: var(--kenar-2); border-radius: 3px; }
.yan-menu::-webkit-scrollbar-thumb:hover { background: var(--metin-3); }
.yan-menu { scrollbar-width: thin; scrollbar-color: var(--kenar-2) transparent; }

.menu-govde { flex: 1; display: flex; flex-direction: column; gap: 15px; min-height: 0; }

.menu-ayir { height: 1px; margin: 3px 10px; background: var(--cizgi); }

.menu-dip { margin-top: auto; }

.ana-alan { display: flex; flex-direction: column; min-width: 0; position: relative; }

.ust-bar {
  position: sticky;
  top: 0;
  z-index: var(--z-ust);
  display: flex;
  align-items: center;
  gap: var(--u-3);
  height: var(--ust-yuk);
  padding: 0 var(--a-6);
  border-bottom: 1px solid var(--kenar);
  background: color-mix(in srgb, var(--zemin) 84%, transparent);
  box-shadow: 0 12px 24px -22px var(--golge-renk);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}

/* Arama kutusu: 430px'te "Siparis Ara (Siparis No, Ad Soyad, Telefon...)"
   yazisi kesiliyordu; ust barda bos yer varken daha genis duruyor. */
.ust-ara { flex: 1; max-width: 460px; position: relative; }
.ust-ara input {
  width: 100%;
  height: 36px;
  padding: 0 62px 0 38px;
  border: 1px solid var(--kenar);
  border-radius: var(--r-2);
  background: var(--oyuk);
  box-shadow: var(--golge-oyuk);
  color: var(--metin);
  font-size: var(--p-13);
  transition: var(--gecis);
}
.ust-ara input::placeholder { color: var(--metin-3); }
.ust-ara input:focus {
  outline: none;
  border-color: var(--vurgu);
  background: var(--girdi-odak);
  box-shadow: inset 0 -2px 0 var(--vurgu), 0 0 0 2px var(--vurgu-sis);
}
.ust-ara .ara-ikon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--metin-3); font-size: var(--p-14); }
.ust-ara kbd {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  padding: 3px 7px;
  border: 1px solid var(--kenar);
  border-radius: 4px;
  background: var(--cam-2);
  box-shadow: var(--ic-isik);
  color: var(--metin-3);
  font-family: var(--yazi-mono);
  font-size: 10px;
}

.ust-sag { margin-left: auto; display: flex; align-items: center; gap: 7px; }


.ust-ikon-btn {
  position: relative;
  width: 36px;
  height: 36px;
  border: 1px solid var(--kenar);
  border-radius: var(--r-2);
  background: var(--cam);
  box-shadow: var(--ic-isik);
  color: var(--metin-2);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: var(--p-16);
  transition: var(--gecis-hizli);
}
.ust-ikon-btn:hover { color: var(--metin); border-color: var(--kenar-2); background: var(--cam-2); transform: none; }

.ust-ikon-btn .sayac {
  position: absolute;
  top: -2px;
  right: -2px;
  width: auto;
  height: 16px;
  min-width: 16px;
  max-width: none;
  padding: 0 4px;
  border: 0;
  border-radius: 4px;
  background: #000;
  color: #FFFFFF;
  font-family: var(--yazi-mono);
  font-size: 10px;
  font-weight: 500;
  display: grid;
  place-items: center;
}

.profil-btn {
  display: flex;
  align-items: center;
  gap: var(--u-2);
  padding: 4px 11px 4px 4px;
  border: 1px solid var(--kenar);
  border-radius: var(--r-2);
  background: var(--cam);
  box-shadow: var(--ic-isik);
  cursor: pointer;
  transition: var(--gecis-hizli);
}
.profil-btn:hover { border-color: var(--kenar-2); background: var(--cam-2); }
.profil-ad { font-size: var(--p-12); font-weight: 700; letter-spacing: var(--iz-baslik); line-height: 1.25; }
.profil-rol {
  font-size: var(--p-10);
  font-weight: 600;
  letter-spacing: var(--iz-etiket);
  text-transform: uppercase;
  color: var(--etiket);
  line-height: 1.3;
}

.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mor), var(--gok));
  color: #FFFFFF;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: var(--p-12);
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 24px; height: 24px; font-size: var(--p-11); }
.avatar-lg { width: 44px; height: 44px; font-size: var(--p-16); }

/* Ust dolgu bilerek daha dar: sayfa basligi ust barin hemen altinda baslasin */
/* Olculer demo tasarimindan: kartlar arasi bosluk 12px (onceki 16px dikey
   yer harciyordu), sayfa dolgusu 16/22/36. */
.sayfa { padding: var(--u-3) var(--a-6) 36px; display: flex; flex-direction: column; gap: var(--a-3); }

.sayfa-basligi { display: flex; align-items: flex-end; gap: var(--u-3); flex-wrap: wrap; }
.sayfa-basligi h1 {
  font-size: var(--p-21);
  font-weight: var(--ag-baslik);
  letter-spacing: var(--iz-baslik-xl);
}
.sayfa-alt-metin { font-size: var(--p-12); color: var(--etiket-2); padding-bottom: 4px; }

.serit {
  display: flex;
  align-items: center;
  gap: var(--u-2);
  padding: 7px var(--a-6);
  border-bottom: 1px solid color-mix(in srgb, var(--uyari) 30%, transparent);
  background: var(--uyari-sis);
  font-size: var(--p-12);
}
.serit-rozet {
  padding: 1px 7px;
  border-radius: var(--r-1);
  background: var(--uyari);
  color: var(--uyari-yazi);
  font-family: var(--yazi-mono);
  font-weight: 500;
  font-size: var(--p-11);
}
.serit a { margin-left: auto; color: var(--uyari); font-weight: 600; }

.serit.kritik { background: var(--hata-sis); border-bottom-color: color-mix(in srgb, var(--hata) 30%, transparent); }
.serit.kritik .serit-rozet { background: var(--hata); color: var(--hata-yazi); }
.serit.kritik a { color: var(--hata); }

@media (max-width: 991.98px) {
  .kabuk { grid-template-columns: 1fr; }
  .yan-menu {
    position: fixed;
    left: 0;
    top: 0;
    width: 264px;
    transform: translateX(-100%);
    transition: transform var(--gecis);
    background: var(--zemin);
    z-index: var(--z-ortu);
  }
  .yan-menu.acik { transform: none; box-shadow: var(--golge-3); }
  .menu-ortu {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-ortu) - 1);
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
  }
  .ust-bar { padding: 0 var(--a-4); }
  .kur-blok { display: none; }
  .sayfa { padding: 12px var(--a-4) var(--a-7); gap: 14px; }
}

/* ================================================================
   BUTON — kaynak: _tema_denemeleri/tema.css (.btn / .btn-ana /
   .btn-dolgu / .btn-soft / .btn-ciz / .btn-golge / .btn-ikon)
   Demo sınıf adları taşınmadı; görünüm Bootstrap/Velzon seçicilerine yazıldı.

   Demo'nun üç kuralı:
     1) Dolgulu buton = --d1/--d2 ile koyulaştırılmış gradyan + BEYAZ yazı.
     2) Hap yarıçap (--hap), 12.5px/700 dizgi, odakta outline (kutu gölgesi değil).
     3) Işık süzmesi (::before parıltı) YOK.
   Renk her varyantta yerel --c ile verilir, gövde tek yerde durur.
   ================================================================ */

/* ---------------------------------------------------------- taban */
.btn {
  --c: var(--vurgu);              /* varyant yoksa vurgu rengi */
  position: relative;
  overflow: visible;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: var(--kontrol-yuk);
  padding: 0 18px;
  border: 1px solid var(--kenar);
  border-radius: var(--hap);
  background: var(--cam);
  box-shadow: none;
  color: var(--metin-2);
  font-family: var(--yazi-govde);
  font-size: var(--p-125);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: filter var(--gecis-hizli), background var(--gecis-hizli),
              border-color var(--gecis-hizli), color var(--gecis-hizli),
              box-shadow var(--gecis-hizli);
  user-select: none;
  vertical-align: middle;
}

.btn:hover {
  border-color: var(--kenar-2);
  background: var(--cam-2);
  color: var(--metin);
  text-decoration: none;
  transform: none;
}

.btn svg { width: 14px; height: 14px; }

/* Soldan sağa geçen parıltı yok — kullanıcı reddetti */
.btn::before { content: none; }

/* Demo odak imzası: kutu gölgesi değil, outline */
.btn:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }

/* Demo'da ayrı bir :active yok; basılma hafif karartmayla verilir */
.btn:active { transform: none; filter: brightness(0.93); }

.btn:disabled,
.btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  filter: none;
  box-shadow: none;
}

/* ---------------------------------------------------------- boyutlar */
/* demo .btn-kucuk 6px 13px / 11.5px */
.btn-sm { min-height: var(--kontrol-yuk-sm); padding: 0 13px; font-size: var(--p-115); gap: 6px; }
.btn-sm svg { width: 12px; height: 12px; }

/* demo .btn-buyuk 12px 24px / 13.5px */
.btn-lg { min-height: 44px; padding: 0 24px; font-size: var(--p-135); }
.btn-lg svg { width: 16px; height: 16px; }

/* ---------------------------------------------------------- yalnız ikon
   Demo .btn-ikon: 34px kare, hap DEĞİL 10px yarıçap, saydam zemin.
   Renk varyantıyla birlikte kullanılırsa (ör. .btn-icon.btn-danger)
   aşağıdaki varyant blokları dosyada SONRA geldiği için onlar kazanır. */
.btn-ikon,
.btn-icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  min-height: 0;
  padding: 0;
  gap: 0;
  border: 1px solid var(--kenar-2);
  border-radius: var(--r-ic);
  background: transparent;
  color: var(--metin-3);
  cursor: pointer;
}
.btn-ikon svg,
.btn-icon svg { width: 15px; height: 15px; }

/* --c fallback'i .btn olmadan da (yalın .btn-ikon) çalışsın diye açık yazıldı */
.btn-ikon:hover,
.btn-icon:hover {
  color: var(--c, var(--vurgu));
  border-color: color-mix(in srgb, var(--c, var(--vurgu)) 42%, transparent);
  background: color-mix(in srgb, var(--c, var(--vurgu)) 9%, transparent);
}

.btn-ikon.btn-sm,
.btn-icon.btn-sm { width: var(--kontrol-yuk-sm); height: var(--kontrol-yuk-sm); min-height: 0; padding: 0; }
.btn-ikon.btn-lg,
.btn-icon.btn-lg { width: 44px; height: 44px; min-height: 0; padding: 0; }

/* ---------------------------------------------------------- dolgulu butonlar
   Birincil ve renkli dolgular TEK formül kullanır: rengi --d1/--d2 ile
   karartıp gradyana çevirir. Birincil önce vurgu gradyanını doğrudan
   kullanıyordu ve aynı sayfadaki yeşiller birbirinden farklı çıkıyordu
   (Aydın "hepsi soldaki gibi olsun" dedi).
   #000 tema rengi değil, karartma sabiti — token sözleşmesinde de böyle. */
.btn-primary  { --c: var(--vurgu); }
.btn-success  { --c: var(--olumlu); }
.btn-danger   { --c: var(--hata); }
.btn-warning  { --c: var(--uyari); }
.btn-info     { --c: var(--bilgi); }
.btn-dark     { --c: var(--gri); }

.btn-primary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-dark {
  background: linear-gradient(135deg,
              color-mix(in srgb, var(--c) var(--d1), #000),
              color-mix(in srgb, var(--c) var(--d2), #000));
  border-color: transparent;
  color: var(--btn-yazi);
  box-shadow: var(--ic-isik-guclu);
}
.btn-primary:hover,
.btn-success:hover,
.btn-danger:hover,
.btn-warning:hover,
.btn-info:hover,
.btn-dark:hover {
  background: linear-gradient(135deg,
              color-mix(in srgb, var(--c) var(--d1), #000),
              color-mix(in srgb, var(--c) var(--d2), #000));
  border-color: transparent;
  color: var(--btn-yazi);
  filter: brightness(1.08);
  box-shadow: var(--ic-isik-guclu);
}

/* ---------------------------------------------------------- nötr yüzeyler
   Demo .btn-golge: kart-2 zemin, kenarsız, hover'da yazı koyulaşır. */
.btn-secondary {
  --c: var(--gri);
  background: var(--kart-2);
  border-color: transparent;
  color: var(--metin-2);
  box-shadow: none;
}
.btn-secondary:hover {
  background: var(--kart-2);
  border-color: transparent;
  color: var(--metin);
  box-shadow: none;
}

.btn-light {
  --c: var(--gri);
  background: var(--cam);
  border-color: var(--kenar);
  color: var(--metin-2);
  box-shadow: none;
}
.btn-light:hover { background: var(--cam-2); border-color: var(--kenar-2); color: var(--metin); }

/* ---------------------------------------------------------- bağlantı butonu */
.btn-link {
  background: none;
  border-color: transparent;
  color: var(--vurgu);
  box-shadow: none;
}
.btn-link:hover {
  background: color-mix(in srgb, var(--vurgu) 12%, transparent);
  border-color: transparent;
  color: var(--vurgu);
  transform: none;
  box-shadow: none;
}

/* ---------------------------------------------------------- varyant renkleri
   outline / soft / ghost üçü de aynı --c'yi kullanır. */
.btn-outline-primary,   .btn-soft-primary,   .btn-ghost-primary   { --c: var(--vurgu); }
.btn-outline-success,   .btn-soft-success,   .btn-ghost-success   { --c: var(--olumlu); }
.btn-outline-danger,    .btn-soft-danger,    .btn-ghost-danger    { --c: var(--hata); }
.btn-outline-warning,   .btn-soft-warning,   .btn-ghost-warning   { --c: var(--uyari); }
.btn-outline-info,      .btn-soft-info,      .btn-ghost-info      { --c: var(--bilgi); }
.btn-outline-secondary, .btn-soft-secondary, .btn-ghost-secondary { --c: var(--gri); }
.btn-outline-dark,      .btn-soft-dark,      .btn-ghost-dark      { --c: var(--gri); }
.btn-outline-light,     .btn-soft-light,     .btn-ghost-light     { --c: var(--gri); }

/* Çizgili — demo .btn-ciz: kenar %45, saydam zemin, renkli yazı */
[class^="btn-outline-"],
[class*=" btn-outline-"] {
  background: transparent;
  border-color: color-mix(in srgb, var(--c) 45%, transparent);
  color: var(--c);
  box-shadow: none;
}

/* Yumuşak — demo .btn-soft: renk %16, kenarsız */
[class^="btn-soft-"],
[class*=" btn-soft-"] {
  background: color-mix(in srgb, var(--c) 16%, transparent);
  border-color: transparent;
  color: var(--c);
  box-shadow: none;
}

/* Hayalet — zeminsiz, kenarsız; hover'da yumuşak dolguya döner */
[class^="btn-ghost-"],
[class*=" btn-ghost-"] {
  background: transparent;
  border-color: transparent;
  color: var(--c);
  box-shadow: none;
}
[class^="btn-ghost-"]:hover,
[class*=" btn-ghost-"]:hover {
  background: color-mix(in srgb, var(--c) 16%, transparent);
  border-color: transparent;
  color: var(--c);
  box-shadow: none;
}

/* Soft ve çizgili hover'da DOLGUYA döner ve yazı beyaz olur.
   Kullanıcının açık isteği; dolgu, dolgulu butonlarla aynı --d1/--d2 formülü. */
[class^="btn-outline-"]:hover,
[class*=" btn-outline-"]:hover,
[class^="btn-soft-"]:hover,
[class*=" btn-soft-"]:hover {
  background: linear-gradient(135deg,
              color-mix(in srgb, var(--c) var(--d1), #000),
              color-mix(in srgb, var(--c) var(--d2), #000));
  border-color: transparent;
  color: var(--btn-yazi);
  box-shadow: var(--ic-isik-guclu);
}

/* ---------------------------------------------------------- buton grubu
   Bitişik gruplar hap dışa, düz içe. */
.btn-group { display: inline-flex; vertical-align: middle; }
.btn-group > .btn { border-radius: 0; margin-left: -1px; box-shadow: none; }
.btn-group > .btn:first-child { border-radius: var(--hap) 0 0 var(--hap); margin-left: 0; }
.btn-group > .btn:last-child { border-radius: 0 var(--hap) var(--hap) 0; }
.btn-group > .btn:hover { transform: none; z-index: 1; }

/* Radyo grubu = demo .bolme: hap ray, içi --girdi, seçili öge vurgu sisi */
.btn-group:has(.btn-check) {
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--kenar);
  border-radius: var(--hap);
  background: var(--girdi);
}
.btn-group:has(.btn-check) > .btn {
  margin-left: 0;
  border: 0;
  border-radius: var(--hap);
  background: transparent;
  padding: 0 16px;
  min-height: var(--kontrol-yuk-sm);
  color: var(--metin-2);
}
.btn-group:has(.btn-check) > .btn:hover { background: transparent; color: var(--metin); }

/* ---------------------------------------------------------- buton-radyo
   Girdi görünmez, seçim etikete yansır. */
.btn-check {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}
.btn-check:checked + .btn {
  border-color: transparent;
  background: color-mix(in srgb, var(--vurgu) 16%, transparent);
  color: var(--vurgu);
  font-weight: 700;
}
.btn-check:focus-visible + .btn { outline: 2px solid var(--vurgu); outline-offset: 2px; }
.btn-check:disabled + .btn { opacity: 0.5; cursor: not-allowed; }

/* ---------------------------------------------------------- kapat
   Demo .modal-kapat: 30px kare, 9px yarıçap, nötr; hover'da kırmızıya döner.
   Nova'nın metinli kalıbı korundu (boş <button> içinde i18n metni ::after'dan). */
.btn-close {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 0;
  height: 30px;
  width: auto;
  padding: 0 11px;
  border: 1px solid var(--kenar);
  border-radius: var(--r-1);
  background: transparent;
  color: var(--metin-3);
  box-shadow: none;
  font-family: var(--yazi-govde);
  font-size: var(--p-12);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  opacity: 1;
  transition: color var(--gecis-hizli), border-color var(--gecis-hizli), background var(--gecis-hizli);
}
.btn-close::before { content: '×'; font-size: 17px; line-height: 1; }

/* Metin i18n sözlüğünden gelemiyor (boş <button>), dil kökü üzerinden verilir */
.btn-close::after { content: 'Kapat'; }
html[lang="en"] .btn-close::after { content: 'Close'; }
html[lang="de"] .btn-close::after { content: 'Schließen'; }

.btn-close:hover {
  background: color-mix(in srgb, var(--hata) 9%, transparent);
  border-color: color-mix(in srgb, var(--hata) 40%, transparent);
  color: var(--hata);
}
.btn-close:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }

/* Toast ve dar kutularda yalnız ikon kalsın */
.toast .btn-close::after,
.alert .btn-close::after,
.btn-close.yalniz-ikon::after { content: none; }
.toast .btn-close,
.alert .btn-close,
.btn-close.yalniz-ikon { width: 30px; padding: 0; justify-content: center; }

.d-grid > .btn { width: 100%; }

/* ---------------------------------------------------------- sabit kaydet
   Uzun formlarda sağ altta durur; .kaydet-sabit-pay son satırı açar. */
.kaydet-sabit {
  position: fixed;
  right: 70px;
  bottom: 55px;
  z-index: var(--z-ortu);
  box-shadow: var(--golge-2), var(--ic-isik-guclu);
}
.kaydet-sabit-pay { padding-bottom: 84px; }

/* ---------------------------------------------------------- mobil */
@media (max-width: 767.98px) {
  .btn:not(.btn-sm) { min-height: var(--kontrol-yuk-mb); }
  .btn-ikon:not(.btn-sm),
  .btn-icon:not(.btn-sm) { width: var(--kontrol-yuk-mb); height: var(--kontrol-yuk-mb); }
  .kaydet-sabit { right: 14px; bottom: 14px; }
}

/* ================================================================
   FORM — demo "Form Elemanları" vitrini (04-yeykim-yonetim.html)
   İmza: girdi DÜZ kutudur. Kuyu gölgesi / inset derinlik YOK.
   Zemin --girdi, kenar --kenar-2, yarıçap --r-2, yükseklik --kontrol-yuk.
   Odak = kenar vurgu rengine döner + ince vurgu sisi halkası.
   ================================================================ */

/* Form etiketleri NORMAL yazim (23 Agustos 2026 karari).
   Onceki surumde demo'nun "kucuk + versal etiket" imzasi vardi; kisa etiketlerde
   iyi duruyordu ama "KURUMSAL FATURA SORULSUN MU?" gibi soru cumlelerinde
   okunaksizdi ve panelin onceki halinden ayrisiyordu. Versal yalniz tablo
   basliklari, KPI etiketleri ve rozetlerde kaldi. */
.form-label,
.col-form-label,
.filtre-alan .form-label,
.kart-basi-arac .form-label {
  font-family: var(--yazi-govde);
  font-size: var(--p-125);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--metin-2);
}

.form-label { display: block; margin-bottom: 6px; }

.form-label-sm { font-size: var(--p-95); margin-bottom: 4px; }

.col-form-label {
  padding-top: 10px;
  padding-bottom: 10px;
  margin-bottom: 0;
}

/* Artik varsayilan davranis budur; sinif sayfalarda kullanildigi icin duruyor.
   (col-form-label ve form-label-sm ile de birlikte kullanilabilir) */
.form-label.duz,
.col-form-label.duz {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--p-125);
  font-weight: 600;
  color: var(--metin-2);
}

.form-text { font-size: var(--p-11); color: var(--etiket-2); margin-top: 4px; letter-spacing: 0; }

/* ---------------------------------------------------------------
   Girdi / secim / metin alani — demo .girdi .secim .alan
   Kuyu golgesi ve alt cizgi KALKTI: kutu duz, kenar tek cizgi.
   --------------------------------------------------------------- */
.form-control,
.form-select {
  display: block;
  width: 100%;
  height: var(--kontrol-yuk);
  padding: 0 13px;
  background: var(--girdi);
  border: 1px solid var(--kenar-2);
  border-radius: var(--r-2);
  color: var(--metin);
  font-family: var(--yazi-govde);
  font-size: var(--p-13);
  font-weight: 500;
  letter-spacing: var(--iz-veri);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  box-shadow: none;
  outline: none;
  transition: background-color var(--gecis), border-color var(--gecis), box-shadow var(--gecis);
  appearance: none;
}

textarea.form-control {
  height: auto;
  min-height: 84px;
  padding: 10px 13px;
  line-height: 1.55;
  resize: vertical;
}

.form-control::placeholder { color: var(--metin-3); }

.form-control:hover:not(:focus):not(:disabled),
.form-select:hover:not(:focus):not(:disabled) {
  border-color: color-mix(in srgb, var(--metin-3) 45%, transparent);
}

/* Odak: demo yalnizca kenari boyar. Kullanici istegi geregi ustune
   abartisiz bir vurgu-sisi halkasi eklendi (klavye erisimi icin). */
.form-control:focus,
.form-select:focus {
  outline: none;
  border-color: var(--vurgu);
  /* background: KISAYOLU degil — kisayol background-image'i sifirlayip
     select okunu siliyordu (odaktaki select duz kutuya donuyordu). */
  background-color: var(--girdi-odak);
  box-shadow: 0 0 0 3px var(--vurgu-sis);
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly]:disabled {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
}

.form-control-sm,
.form-select-sm { height: var(--kontrol-yuk-sm); padding: 0 11px; font-size: var(--p-125); border-radius: var(--r-1); }

.form-control-lg,
.form-select-lg { height: 44px; padding: 0 15px; font-size: var(--p-14); }

/* Ok: demo'daki ince "v" cizgisi (dolu ucgen degil). Iki egik bant
   yan yana konarak cizilir; rengi --metin-3, odakta --vurgu. */
.form-select,
select.form-control {
  padding-right: 38px;
  cursor: pointer;
  background-image:
    linear-gradient(45deg,  transparent 44%, var(--metin-3) 44%, var(--metin-3) 60%, transparent 60%),
    linear-gradient(135deg, transparent 44%, var(--metin-3) 44%, var(--metin-3) 60%, transparent 60%);
  background-size: 7px 7px, 7px 7px;
  background-position: calc(100% - 19px) calc(50% - 1px), calc(100% - 13px) calc(50% - 1px);
  background-repeat: no-repeat;
}

.form-select:focus,
select.form-control:focus {
  background-image:
    linear-gradient(45deg,  transparent 44%, var(--vurgu) 44%, var(--vurgu) 60%, transparent 60%),
    linear-gradient(135deg, transparent 44%, var(--vurgu) 44%, var(--vurgu) 60%, transparent 60%);
}

.form-select-sm,
select.form-control-sm {
  padding-right: 32px;
  background-size: 6px 6px, 6px 6px;
  background-position: calc(100% - 17px) calc(50% - 1px), calc(100% - 12px) calc(50% - 1px);
}

.form-select option,
select.form-control option { background: var(--yuzey-ust); color: var(--metin); }

/* select2 kendi okunu cizer; alttaki yerel <select> gizli oldugundan cift ok olusmaz */
select.select2-hidden-accessible { background-image: none; }

/* Yerel dosya girdisi — buton kismi sessiz bir on ek gibi durur */
.form-control[type="file"] { padding: 7px 13px; height: auto; cursor: pointer; }
.form-control[type="file"]::file-selector-button {
  margin: -7px 13px -7px -13px;
  padding: 7px 13px;
  border: 0;
  border-right: 1px solid var(--kenar-2);
  background: var(--kart-2);
  color: var(--metin-2);
  font-family: var(--yazi-govde);
  font-size: var(--p-115);
  font-weight: 700;
  letter-spacing: var(--iz-etiket);
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--gecis);
}
.form-control[type="file"]::file-selector-button:hover { background: var(--cam-2); color: var(--metin); }

/* ============================================================
   Dosya alani — surukle-birak kutusu (demo .dosya)
   Kullanim: <input type="file" data-dosya> ; tema.js kutuyu kendiliginden kurar.
   Ek: data-dosya-not="..." ile alt bilgi metni verilir.
   ============================================================ */
.dosya-alan {
  position: relative;
  display: block;
  padding: 20px 14px;
  border: 1.5px dashed var(--kenar-2);
  border-radius: var(--r-2);
  background: var(--girdi);
  color: var(--metin-3);
  font-size: var(--p-125);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--gecis), color var(--gecis), background var(--gecis);
}
.dosya-alan:hover {
  border-color: var(--vurgu);
  color: var(--metin-2);
  background: color-mix(in srgb, var(--vurgu) 5%, var(--girdi));
}
.dosya-alan:focus-within { border-color: var(--vurgu); box-shadow: 0 0 0 3px var(--vurgu-sis); }
.dosya-alan.uzerinde {
  border-color: var(--vurgu);
  border-style: solid;
  color: var(--metin-2);
  background: color-mix(in srgb, var(--vurgu) 9%, var(--girdi));
}
/* gercek input gorunmez ama erisilebilir kalir */
.dosya-alan input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.dosya-bos { display: flex; flex-direction: column; align-items: center; gap: 6px; }
/* Ikon dururken sonuk, uzerine gelince ve surukleme sirasinda vurguya doner:
   surukle-birak alaninin tek gorsel geri bildirimi budur. */
.dosya-bos i { font-size: 22px; color: var(--metin-3); transition: var(--gecis); }
.dosya-alan:hover .dosya-bos i,
.dosya-alan.uzerinde .dosya-bos i { color: var(--vurgu); }
.dosya-bos b {
  color: inherit;
  font-size: var(--p-125);
  font-weight: 600;
}
.dosya-bos b u { color: var(--vurgu); text-decoration: none; }
.dosya-bos small { color: var(--metin-3); font-size: var(--p-11); }

/* Secim yapildiktan sonra: kutu kucuk bir satira doner, yer harcamaz */
.dosya-alan.dolu {
  padding: 9px 10px;
  border-style: solid;
  border-width: 1px;
  border-color: var(--kenar-2);
  background: var(--kart-2);
  text-align: left;
  cursor: default;
}
.dosya-alan.dolu:hover { border-color: var(--kenar-2); background: var(--kart-2); }
.dosya-alan.dolu .dosya-bos { display: none; }
.dosya-alan.dolu input[type="file"] { pointer-events: none; }

.dosya-secilen { display: none; align-items: center; gap: 11px; }
.dosya-alan.dolu .dosya-secilen { display: flex; }

.dosya-onizleme {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  overflow: hidden;
  border-radius: var(--r-1);
  background: color-mix(in srgb, var(--vurgu) 14%, transparent);
  color: var(--vurgu);
  font-size: 19px;
}
.dosya-onizleme img { width: 100%; height: 100%; object-fit: cover; }

.dosya-bilgi { flex: 1 1 auto; min-width: 0; text-align: left; }
.dosya-ad {
  display: block;
  overflow: hidden;
  color: var(--metin);
  font-size: var(--p-13);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dosya-boyut {
  display: block;
  color: var(--metin-3);
  font-family: var(--yazi-mono);
  font-size: var(--p-11);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.dosya-sil {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--kenar-2);
  border-radius: var(--r-1);
  background: none;
  color: var(--metin-3);
  cursor: pointer;
  transition: var(--gecis-hizli);
}
.dosya-sil:hover {
  border-color: color-mix(in srgb, var(--hata) 45%, transparent);
  background: color-mix(in srgb, var(--hata) 12%, transparent);
  color: var(--hata);
}

.dosya-hata {
  display: none;
  margin-top: 7px;
  color: var(--hata);
  font-size: var(--p-115);
  font-weight: 600;
  text-align: left;
}
.dosya-alan.gecersiz { border-color: var(--hata); }
.dosya-alan.gecersiz .dosya-hata { display: block; }

.form-control[type="color"] { padding: 4px; height: var(--kontrol-yuk); cursor: pointer; }

/* ---------------------------------------------------------------
   Onay kutusu / radyo — demo .kutu ve .radyo
   --------------------------------------------------------------- */
.form-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 24px;
  margin-bottom: var(--u-1);
}

/* Bazı sayfalar Bootstrap sınıfı olmadan doğrudan <input type="radio">
   yazıyor (16 view). Onlar tema kurallarının dışında kalıp tarayıcının
   mavisiyle görünüyordu; accent-color yerli kontrolü vurgu rengine çeker.
   Sınıfı olanlar aşağıdaki tam kuralla çizilir, bu satır onları etkilemez. */
input[type="radio"]:not(.form-check-input),
input[type="checkbox"]:not(.form-check-input) {
  accent-color: var(--vurgu);
}

.form-check-input {
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  margin: 0;
  background: var(--girdi);
  border: 1.5px solid var(--kenar-2);
  border-radius: 6px;
  box-shadow: none;
  cursor: pointer;
  appearance: none;
  transition: background var(--gecis), border-color var(--gecis);
  display: grid;
  place-items: center;
}

.form-check-input[type="radio"] { border-radius: 50%; }

.form-check-input:hover:not(:disabled) { border-color: var(--vurgu); }

.form-check-input::after {
  content: '';
  width: 9px;
  height: 9px;
  opacity: 0;
  transition: var(--gecis);
}

/* Tik: sol + alt kenardan cizilen "v" (demo geometrisi) */
.form-check-input[type="checkbox"]::after {
  width: 9px;
  height: 5px;
  border: 0;
  border-left: 2.2px solid var(--vurgu-yazi);
  border-bottom: 2.2px solid var(--vurgu-yazi);
  transform: rotate(-45deg) translate(0, -1px);
}

.form-check-input[type="radio"]::after {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--vurgu-dolgu);
}

/* Isaretli kutu koyu vurgu tonuyla dolar, tik beyaz kalir */
.form-check-input:checked {
  background: var(--vurgu-dolgu);
  border-color: var(--vurgu-dolgu);
  box-shadow: none;
}
/* Radyo dolmaz: yalnizca halka vurguya doner, ici nokta olur */
.form-check-input[type="radio"]:checked {
  background: var(--girdi);
  border-color: var(--vurgu);
}
.form-check-input:checked::after { opacity: 1; }

.form-check-input:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; box-shadow: none; }
.form-check-input:disabled { opacity: .55; cursor: not-allowed; }

.form-check-label {
  color: var(--metin-2);
  font-size: var(--p-13);
  font-weight: 600;
  letter-spacing: var(--iz-veri);
  cursor: pointer;
  user-select: none;
  transition: color var(--gecis-hizli);
}
.form-check:hover .form-check-label { color: var(--metin); }

/* ---------------------------------------------------------------
   Anahtar (switch) — demo .anahtar: 42x23, kapali topuz --metin-3
   --------------------------------------------------------------- */
.form-switch { display: flex; align-items: center; gap: 10px; }
.form-switch .form-check-input {
  position: relative;
  width: 42px;
  height: 23px;
  border-radius: var(--r-hap);
  background: var(--girdi);
  border: 1.5px solid var(--kenar-2);
  place-items: start center;
  box-shadow: none;
  transition: background var(--gecis), border-color var(--gecis);
}
.form-switch .form-check-input::after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 50%;
  background: var(--metin-3);
  box-shadow: none;
  opacity: 1;
  transform: none;
  transition: transform var(--gecis), background var(--gecis);
}
.form-switch .form-check-input:checked {
  background: var(--vurgu-dolgu);
  border-color: var(--vurgu-dolgu);
}
.form-switch .form-check-input:checked::after {
  left: 2px;
  transform: translateX(19px);
  background: var(--vurgu-yazi);
}

/* ---------------------------------------------------------------
   Girdi grubu — demo .grup / .grup-ek
   --------------------------------------------------------------- */
.input-group { display: flex; align-items: stretch; width: 100%; }
.input-group > .form-control,
.input-group > .form-select { flex: 1 1 auto; width: 1%; min-width: 0; }
.input-group > .form-control:not(:last-child),
.input-group > .form-select:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .form-control:not(:first-child),
.input-group > .form-select:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; }

.input-group-text {
  display: flex;
  align-items: center;
  padding: 0 13px;
  background: var(--kart-2);
  border: 1px solid var(--kenar-2);
  color: var(--metin-2);
  font-family: var(--yazi-mono);
  font-size: var(--p-125);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: none;
  white-space: nowrap;
  transition: border-color var(--gecis);
}
/* Odakta on ek de kenarini vurguya cevirir (demo :focus-within kurali) */
.input-group:focus-within > .input-group-text { border-color: var(--vurgu); }

/* Renk secici .form-control sayildigi icin input-group'ta alanin yarisini
   kapliyordu; genisligi sabit, yaninda metin alani esner. */
.form-control-color {
  width: 58px;
  padding: 4px;
  cursor: pointer;
}
.input-group > .form-control-color { flex: 0 0 58px; width: 58px; }
.form-control-color::-webkit-color-swatch-wrapper { padding: 0; }
.form-control-color::-webkit-color-swatch { border: 0; border-radius: 6px; }
.form-control-color::-moz-color-swatch { border: 0; border-radius: 6px; }

.input-group-text:first-child { border-radius: var(--r-2) 0 0 var(--r-2); }
.input-group-text:last-child { border-radius: 0 var(--r-2) var(--r-2) 0; margin-left: -1px; }

.input-group > .btn { border-radius: 0; }
.input-group > .btn:last-child { border-radius: 0 var(--r-2) var(--r-2) 0; }
.input-group > .btn:first-child { border-radius: var(--r-2) 0 0 var(--r-2); }

/* ---------------------------------------------------------------
   Dogrulama — demo .girdi.hatali + .hata-not: yalnizca kenar rengi
   --------------------------------------------------------------- */
.is-invalid { border-color: var(--hata) !important; }
.is-invalid:focus { box-shadow: 0 0 0 3px var(--hata-sis) !important; }

/* Hata metni yalnizca dogrulama basarisiz oldugunda gorunur.
   display:block sabitti; formlar acilir acilmaz "... Seciniz" yazilari duruyordu. */
.invalid-feedback {
  display: none;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  font-size: var(--p-115);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--hata);
}
.is-invalid ~ .invalid-feedback,
.was-validated :invalid ~ .invalid-feedback { display: flex; }

/* needs-validation formlarinda gecersiz alan isaretlenmiyordu: kaydet'e
   basildiginda form sessizce duruyor, kullanici sebebini goremiyordu. */
.was-validated .form-control:invalid,
.was-validated .form-select:invalid,
.was-validated .form-check-input:invalid {
  border-color: var(--hata);
}
.was-validated .form-control:invalid:focus,
.was-validated .form-select:invalid:focus {
  box-shadow: 0 0 0 3px var(--hata-sis);
}
/* Select2 / Choices kendi sarmalayicisini cizer, altindaki select gizlidir */
.was-validated select:invalid + .select2-container .select2-selection,
.was-validated select:invalid + .choices .choices__inner {
  border-color: var(--hata);
}

.is-valid { border-color: var(--olumlu) !important; }
.is-valid:focus { box-shadow: 0 0 0 3px var(--olumlu-sis) !important; }
.valid-feedback {
  display: block;
  margin-top: 5px;
  font-size: var(--p-115);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--olumlu);
}

/* ---------------------------------------------------------------
   Bolmeli secenek — demo .bolme (hap kutu, etkin oge YUMUSAK dolgu)
   --------------------------------------------------------------- */
.segment {
  display: inline-flex;
  width: fit-content;
  padding: 3px;
  gap: 2px;
  background: var(--girdi);
  border: 1px solid var(--kenar);
  border-radius: var(--r-hap);
  box-shadow: none;
}
.segment > button,
.segment > label {
  padding: 7px 16px;
  border: none;
  border-radius: var(--r-hap);
  background: transparent;
  color: var(--metin-2);
  font-family: var(--yazi-govde);
  font-size: var(--p-125);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--gecis), color var(--gecis);
  white-space: nowrap;
}
.segment > button:hover,
.segment > label:hover { color: var(--metin); }
.segment > button:focus-visible,
.segment > input:focus-visible + label { outline: 2px solid var(--vurgu); outline-offset: 2px; }
.segment > button.etkin,
.segment > button[aria-pressed="true"],
.segment > input:checked + label {
  background: color-mix(in srgb, var(--vurgu) 16%, transparent);
  color: var(--vurgu);
  box-shadow: none;
}
.segment input { position: absolute; opacity: 0; width: 0; height: 0; }

/* ---------------------------------------------------------------
   Tarayici otomatik doldurma — duz zemin, kuyu golgesi yok
   --------------------------------------------------------------- */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--metin);
  -webkit-box-shadow: 0 0 0 1000px var(--girdi) inset;
  box-shadow: 0 0 0 1000px var(--girdi) inset;
  caret-color: var(--metin);
  border-color: var(--kenar-2);
  transition: background-color 100000s ease-in-out 0s;
}

input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--girdi-odak) inset, 0 0 0 3px var(--vurgu-sis);
  box-shadow: 0 0 0 1000px var(--girdi-odak) inset, 0 0 0 3px var(--vurgu-sis);
  border-color: var(--vurgu);
}

input:autofill,
textarea:autofill,
select:autofill {
  filter: none;
  -webkit-text-fill-color: var(--metin);
  box-shadow: 0 0 0 1000px var(--girdi) inset;
}

input:autofill:focus {
  box-shadow: 0 0 0 1000px var(--girdi-odak) inset, 0 0 0 3px var(--vurgu-sis);
}

/* ---------------------------------------------------------------
   Kaydiraci — temada karsiligi yoktu, tarayici varsayilani cikiyordu
   --------------------------------------------------------------- */
.form-range {
  width: 100%;
  height: 20px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.form-range:focus { outline: none; }

.form-range::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: var(--r-hap);
  background: var(--girdi);
  border: 1px solid var(--kenar-2);
  box-shadow: none;
}
.form-range::-moz-range-track {
  height: 5px;
  border-radius: var(--r-hap);
  background: var(--girdi);
  border: 1px solid var(--kenar-2);
  box-shadow: none;
}
.form-range::-moz-range-progress {
  height: 5px;
  border-radius: var(--r-hap);
  background: var(--vurgu-dolgu);
}

.form-range::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6.5px;
  border: 2px solid var(--girdi);
  border-radius: 50%;
  background: var(--vurgu);
  box-shadow: none;
  transition: var(--gecis-hizli);
}
.form-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 2px solid var(--girdi);
  border-radius: 50%;
  background: var(--vurgu);
  box-shadow: none;
}
.form-range:hover::-webkit-slider-thumb { transform: scale(1.12); }
.form-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--vurgu-sis); }
.form-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--vurgu-sis); }
.form-range:disabled { opacity: .55; cursor: not-allowed; }

/* Form bolumu — uzun formlari konu basliklarina ayirir.
   <section class="form-bolum">
     <header class="form-bolum-basi"><i class="ri-..."></i><span>Baslik</span></header>
     ...alanlar...
   </section> */
.form-bolum { margin-bottom: 20px; }
.form-bolum:last-of-type { margin-bottom: 0; }
/* Alt cizgi kalkti: bolum isareti artik solda 2px vurgu kurali.
   Dolgu + cizgi + marj yiyen 26px, 10px'e indi. */
.form-bolum-basi {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 0 11px;
  margin-bottom: 10px;
  border-bottom: 0;
  color: var(--etiket);
  font-size: var(--p-10);
  font-weight: var(--ag-etiket);
  letter-spacing: var(--iz-etiket);
  text-transform: uppercase;
}
.form-bolum-basi::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 2px;
  border-radius: var(--r-hap);
  background: var(--vurgu);
}
.form-bolum-basi i { color: var(--etiket); font-size: var(--p-13); }
.form-bolum-basi .form-bolum-not {
  margin-left: auto;
  color: var(--etiket-2);
  font-size: var(--p-11);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

/* ---------------------------------------------------------------
   Filtre seridi — liste ve rapor sayfalarindaki ust filtre alani.
   Alanlar esner, butonlar hep sagda ve alanlarla ayni hizada biter.
   <div class="filtre-serit">
     <div class="filtre-alan"><label class="form-label">...</label><input class="form-control"></div>
     ...
     <div class="filtre-eylem"><button class="btn btn-soft-secondary">...</button>
                               <button class="btn btn-primary">...</button></div>
   </div>
   --------------------------------------------------------------- */
.filtre-serit {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  padding: 11px 12px;
  margin-bottom: 13px;
  border: 1px solid var(--kenar);
  border-radius: var(--r-2);
  background: var(--kart-2);
  box-shadow: none;
}

/* Velzon vendor sarmalayicilarini serit icinde de girdi zeminine baglar. */
.filtre-serit .select2-container--default .select2-selection--single,
.filtre-serit .select2-container--default .select2-selection--multiple,
.filtre-serit .choices__inner {
  background-color: var(--girdi);
  border-color: var(--kenar-2);
}
.filtre-alan {
  flex: 1 1 190px;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
/* Dizgisi .form-label ile ortak tanimli (dosyanin basi) */
.filtre-alan .form-label { margin: 0; }
.filtre-alan.dar { flex: 0 1 150px; }
.filtre-alan.genis { flex: 2 1 320px; }

/* Serit icindeki tum kontroller ayni yukseklikte: select2/choices coklu secim
   secim eklendikce buyuyup diger alanlarin hizasini bozuyordu. */
.filtre-serit .form-control,
.filtre-serit .form-select { min-height: var(--kontrol-yuk); height: var(--kontrol-yuk); }
.filtre-serit textarea.form-control { height: auto; }
.filtre-serit .select2-container--default .select2-selection--single,
.filtre-serit .select2-container--default .select2-selection--multiple,
.filtre-serit .choices__inner {
  min-height: var(--kontrol-yuk);
  max-height: var(--kontrol-yuk);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.filtre-serit .select2-container--default .select2-selection--multiple::-webkit-scrollbar,
.filtre-serit .choices__inner::-webkit-scrollbar { width: 4px; }
.filtre-serit .select2-container--default .select2-selection--multiple::-webkit-scrollbar-thumb,
.filtre-serit .choices__inner::-webkit-scrollbar-thumb { background: var(--kenar-2); border-radius: 3px; }

/* Butonlar alanlarin sagina yaslanir, alt kenarlari alanlarla ayni hizada */
.filtre-eylem {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}
.filtre-eylem .btn { min-height: var(--kontrol-yuk); white-space: nowrap; }

/* Serit icinde tek satirda duran anahtar/onay kutusu — alt satira dusmez */
.filtre-anahtar {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  height: var(--kontrol-yuk);
  padding: 0 13px;
  border: 1px solid var(--kenar-2);
  border-radius: var(--r-2);
  background: var(--girdi);
  box-shadow: none;
  white-space: nowrap;
}
.filtre-anahtar .form-check { margin: 0; }
.filtre-anahtar .form-check-label { color: var(--metin-2); font-size: var(--p-13); }

/* Serit altinda tam satir kaplayan yardimci alan (uzun ipucu metni) */
.filtre-not {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  color: var(--etiket-2);
  font-size: var(--p-11);
}
.filtre-not strong { color: var(--metin); }

/* Mobilde dokunma hedefi bugunku olcude kalir */
@media (max-width: 767.98px) {
  .form-control:not(textarea):not([type="file"]),
  .form-select { height: var(--kontrol-yuk-mb); }

  .filtre-alan,
  .filtre-alan.dar,
  .filtre-alan.genis { flex: 1 1 100%; }
  .filtre-eylem { width: 100%; margin-left: 0; }
  .filtre-eylem .btn { flex: 1 1 auto; justify-content: center; }
}

/* ================================================================
   KART — kaynak: _tema_denemeleri/tema.css  (.kart / .k-basi / .k-govde)
   ve 04-yeykim-yonetim.html metrik seridi (v2, onaylanan hali).
   Bootstrap/Velzon secicileri korundu; yalnizca degerler demo'ya cekildi.
   ================================================================ */

/* Demo .kart: 1px kenar + ust ic isik + derin golge.
   Zemin var(--kart): KOYUDA #080B10 (zemine cok yakin, seffaf duruyor),
   ACIKTA #FFFFFF (dolu). Kullanicinin karari demo'da token ile cozulmus. */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-bottom: var(--a-4);
  background: var(--kart);
  border: 1px solid var(--kenar);
  border-radius: var(--r);
  box-shadow: var(--ic-isik), var(--golge);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: hidden;
}

/* Kosegen cam parilti yok: kart cam degil, basili kagit. */
.card::after { content: none; }

.card > * { position: relative; z-index: 1; }

/* Demo .k-basi — basligi govdeden AYIRAN ince cizgi var. */
.card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 13px var(--u-3);
  background: none;
  border-bottom: 1px solid var(--cizgi);
}

/* Govdesiz kartta ayirici anlamsiz kalir. */
.card-header:last-child { border-bottom: 0; }

/* Sekme seridi kendi cizgisini tasir: cift cizgi olmasin, serit alta yassin.
   Negatif marj basligin yatay dolgusuna (16px) hizalandi — gezinme.css'teki
   --a-5 (18px) varsayimi bu dosyadaki yeni dolguyla uyusmuyordu. */
.card-header:has(.card-header-tabs) { padding-bottom: 0; border-bottom: 0; }
.card-header .card-header-tabs {
  margin: 0 calc(var(--u-3) * -1);
  padding: 0 var(--u-3);
}

/* Demo .k-ad: 14px / 600 / -.01em — manset degil, bolum adi. */
.card-title,
.kart-basi-ad {
  margin: 0;
  font-family: var(--yazi-baslik);
  font-size: var(--p-14);
  font-weight: 600;
  letter-spacing: var(--iz-baslik);
  color: var(--metin);
}

/* Demo .k-not: baslik yanindaki tarih/aralik bilgisi mono. */
.card-subtitle {
  font-family: var(--yazi-mono);
  font-size: var(--p-11);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--metin-3);
}

/* Demo .k-govde: 15px 16px 16px */
.card-body {
  flex: 1 1 auto;
  padding: 15px var(--u-3) var(--u-3);
}

.card-header + .card-body { padding-top: 15px; }

/* Baslikta artik ayirici cizgi var; tablo/liste ona YAPISIR.
   (.card-header-tabs bilerek flus kalir, kendi kuralini cizer.) */
.card-header + .table,
.card-header + .table-responsive,
.card-header + .list-group,
.card-header + .tab-content { margin-top: 0; }

/* Basligin aynasi */
.card-footer {
  padding: 13px var(--u-3);
  border-top: 1px solid var(--cizgi);
  background: none;
}

.card-text { margin-bottom: 0; color: var(--metin-2); }

.card-link { color: var(--vurgu); text-decoration: none; }

.card-img,
.card-img-top { width: 100%; border-radius: var(--r) var(--r) 0 0; }

/* Demo metrik hover imzasi: 2px kalkis + golge-2, zemin degismiyor. */
.card-hover { transition: transform var(--gecis), border-color var(--gecis), box-shadow var(--gecis); }
.card-hover:hover {
  transform: translateY(-2px);
  border-color: var(--kenar-2);
  box-shadow: var(--ic-isik), var(--golge-2);
}

/* ---------------------------------------------------------------
   KPI kutusu — metrigin dar varyanti. Demo .metrik olculeri, kucuk hali.
   --------------------------------------------------------------- */
.kpi {
  --kpi-renk: var(--vurgu);
  --kpi-zem: color-mix(in srgb, var(--kpi-renk) var(--sis), transparent);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--u-1);
  padding: 15px var(--u-3) 13px;
  background: var(--kart);
  border: 1px solid var(--kenar);
  border-radius: var(--r);
  box-shadow: var(--ic-isik), var(--golge);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: hidden;
  transition: transform var(--gecis), border-color var(--gecis), box-shadow var(--gecis);
}

/* Demo hale: ikonun arkasindan dogan genis yumusak isik */
.kpi::before {
  content: '';
  position: absolute;
  top: -70%;
  right: -22%;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: var(--kpi-zem);
  filter: blur(36px);
  pointer-events: none;
}

.kpi:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--kpi-renk) 42%, transparent);
  box-shadow: var(--ic-isik), var(--golge-2);
}

.kpi-ust { display: flex; align-items: center; gap: var(--u-2); position: relative; z-index: 1; }

.kpi-etiket {
  font-size: var(--p-10);
  font-weight: var(--ag-etiket);
  letter-spacing: var(--iz-etiket);
  text-transform: uppercase;
  color: var(--metin-3);
  white-space: nowrap;
}

/* Demo .mt-ikon: renkten dogan yumusak gradyan + renkli kenar + renkli golge */
.kpi-ikon {
  margin-left: auto;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: var(--p-16);
  background: linear-gradient(145deg,
              color-mix(in srgb, var(--kpi-renk) 24%, transparent),
              color-mix(in srgb, var(--kpi-renk) 8%, transparent));
  border: 1px solid color-mix(in srgb, var(--kpi-renk) 32%, transparent);
  color: var(--kpi-renk);
  box-shadow: 0 7px 16px -7px color-mix(in srgb, var(--kpi-renk) 50%, transparent),
              var(--ic-isik);
}

/* Demo .mt-deger: rakam METRIK RENGINDE — demo bunu boyle onayladi. */
.kpi-deger {
  position: relative;
  z-index: 1;
  margin-top: 2px;
  font-family: var(--yazi-baslik);
  font-size: 28px;
  font-weight: var(--ag-baslik);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--kpi-renk);
  white-space: nowrap;
}

.kpi-deger small {
  font-size: 15px;
  font-weight: var(--ag-veri);
  color: color-mix(in srgb, var(--kpi-renk) 55%, var(--metin-3));
}

.kpi-yan { position: relative; z-index: 1; font-size: var(--p-115); font-weight: 600; color: var(--metin-3); }

.kpi-fark {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: var(--p-115);
  font-weight: 600;
  color: var(--metin-3);
}

/* Demo .fark: mono, hap, ince dolgu */
.kpi-ok {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  border-radius: var(--hap);
  font-family: var(--yazi-mono);
  font-size: var(--p-10);
  font-weight: var(--ag-veri);
  letter-spacing: 0;
  text-transform: none;
}
.kpi-ok.artis  { color: var(--yesil);   background: color-mix(in srgb, var(--yesil) 13%, transparent); }
.kpi-ok.azalis { color: var(--kirmizi); background: color-mix(in srgb, var(--kirmizi) 13%, transparent); }

.kpi-kar { color: var(--metin-3); font-size: var(--p-11); }

/* Kart basliginda solda ad, sagda arac (secici/buton) */
.kart-basi-satir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--u-3);
  flex-wrap: wrap;
}
.kart-basi-ad { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* Ikon sessiz bir isaret; vurguyu tipografi tasiyor */
.kart-basi-ad i { color: var(--metin-3); font-size: var(--p-14); }
.kart-basi-arac { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kart-basi-arac .form-select,
.kart-basi-arac .form-control { min-width: 210px; width: auto; }
.kart-basi-arac .form-label { white-space: nowrap; }

@media (max-width: 575.98px) {
  .kart-basi-arac { width: 100%; }
  .kart-basi-arac .form-select,
  .kart-basi-arac .form-control { flex: 1; min-width: 0; }
}

/* ---------------------------------------------------------------
   METRIK KARTI (v2) — demo .metrik / .mt-* birebir.
   Kullanim (15 view'da mevcut, DOM sirasi degismiyor):
     <div class="metrik-kart" data-renk="olumlu">
       <span class="metrik-ikon"><i class="ri-..."></i></span>
       <div class="metrik-govde">
         <b class="metrik-deger">0</b>
         <span class="metrik-etiket">...</span>
       </div>
     </div>
   Demo'da ikon SAGDA, etiket degerin USTUNDE duruyor; view'a
   dokunmadan bu duzen flex `order` ile kuruluyor.
   --------------------------------------------------------------- */
.metrik-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: var(--a-3);
  margin-bottom: var(--a-4);
}

.metrik-kart {
  --m-renk: var(--vurgu);
  --m-sis: color-mix(in srgb, var(--m-renk) var(--sis), transparent);
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  padding: 15px var(--u-3) 13px 18px;
  border: 1px solid var(--kenar);
  border-radius: var(--r);
  background: var(--kart);
  box-shadow: var(--ic-isik), var(--golge);
  overflow: hidden;
  transition: transform var(--gecis), border-color var(--gecis), box-shadow var(--gecis);
}

/* Demo hale: ikonun arkasindan dogan genis yumusak isik */
.metrik-kart::before {
  content: '';
  position: absolute;
  top: -70%;
  right: -22%;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: var(--m-sis);
  filter: blur(36px);
  pointer-events: none;
}

/* Demo ust renk kurali: 44px'lik isaret, hover'da tam genislige acilir */
.metrik-kart::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  width: 44px;
  height: 2px;
  background: linear-gradient(90deg, var(--m-renk), transparent);
  opacity: 1;
  transition: width .45s cubic-bezier(.3, .8, .4, 1);
}

.metrik-kart:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--m-renk) 42%, transparent);
  box-shadow: var(--ic-isik), var(--golge-2);
}
.metrik-kart:hover::after { width: 100%; }

/* Demo .mt-ikon — sagda, 42px, renkten dogan gradyan */
.metrik-ikon {
  position: relative;
  order: 2;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  align-self: flex-start;
  margin-left: auto;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: linear-gradient(145deg,
              color-mix(in srgb, var(--m-renk) 24%, transparent),
              color-mix(in srgb, var(--m-renk) 8%, transparent));
  border: 1px solid color-mix(in srgb, var(--m-renk) 32%, transparent);
  color: var(--m-renk);
  font-size: var(--p-20);
  box-shadow: 0 7px 16px -7px color-mix(in srgb, var(--m-renk) 50%, transparent),
              var(--ic-isik);
}

/* Demo .mt-sol — etiket ustte, rakam altta */
.metrik-govde {
  position: relative;
  order: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

/* Demo .mt-deger: rakam METRIK RENGINDE (v2'de onaylanan hali) */
.metrik-deger {
  order: 2;
  display: block;
  font-family: var(--yazi-baslik);
  font-size: 28px;
  font-weight: var(--ag-baslik);
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--m-renk);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Para birimi / birim eki: ayni renkte, sonuk ve kucuk */
.metrik-deger small {
  font-size: 15px;
  font-weight: var(--ag-veri);
  color: color-mix(in srgb, var(--m-renk) 55%, var(--metin-3));
}

.metrik-etiket {
  order: 1;
  display: block;
  margin-top: 0;
  color: var(--metin-3);
  font-size: var(--p-10);
  font-weight: var(--ag-etiket);
  letter-spacing: var(--iz-etiket);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Demo .mt-alt — rakamin altindaki karsilastirma satiri */
.metrik-alt {
  order: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--p-115);
  font-weight: 600;
  color: var(--metin-3);
  white-space: nowrap;
}
.metrik-alt b { color: var(--metin-2); font-family: var(--yazi-mono); font-weight: 600; }

/* Demo .fark — mono hap rozet */
.metrik-fark {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  border-radius: var(--hap);
  font-family: var(--yazi-mono);
  font-size: var(--p-10);
  font-weight: var(--ag-veri);
}
.metrik-fark.artis  { color: var(--yesil);   background: color-mix(in srgb, var(--yesil) 13%, transparent); }
.metrik-fark.azalis { color: var(--kirmizi); background: color-mix(in srgb, var(--kirmizi) 13%, transparent); }

/* Demo .mt-cizgi — ikonun altindaki mini egri (inline svg) */
.metrik-cizgi {
  order: 2;
  width: 68px;
  height: 24px;
  overflow: visible;
  opacity: .95;
}
.metrik-cizgi path   { stroke: var(--m-renk); fill: none; }
.metrik-cizgi circle { fill: var(--m-renk); }

.metrik-kart[data-renk="olumlu"] { --m-renk: var(--olumlu); }
.metrik-kart[data-renk="uyari"]  { --m-renk: var(--uyari); }
.metrik-kart[data-renk="hata"]   { --m-renk: var(--hata); }
.metrik-kart[data-renk="bilgi"]  { --m-renk: var(--bilgi); }
.metrik-kart[data-renk="mavi"]   { --m-renk: var(--mavi); }
.metrik-kart[data-renk="mor"]    { --m-renk: var(--mor); }
.metrik-kart[data-renk="sari"]   { --m-renk: var(--sari); }
.metrik-kart[data-renk="pembe"]  { --m-renk: var(--pembe); }
.metrik-kart[data-renk="gri"]    { --m-renk: var(--gri); }

/* Notr: rakam murekkep renginde, hale ve ikon sonuk gri */
.metrik-kart[data-renk="notr"] {
  --m-renk: var(--metin);
  --m-sis: color-mix(in srgb, var(--metin-3) 12%, transparent);
}
.metrik-kart[data-renk="notr"] .metrik-ikon {
  background: color-mix(in srgb, var(--metin-3) 12%, transparent);
  border-color: var(--kenar);
  color: var(--metin-2);
  box-shadow: var(--ic-isik);
}
.metrik-kart[data-renk="notr"]::after { background: linear-gradient(90deg, var(--metin-3), transparent); }

@media (max-width: 575.98px) {
  .metrik-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .metrik-kart { padding: 12px 12px 11px 13px; gap: 9px; }
  .metrik-ikon { width: 34px; height: 34px; border-radius: 11px; font-size: var(--p-16); }
  .metrik-deger { font-size: 21px; }
  .metrik-deger small { font-size: var(--p-13); }
  /* Demo mini egriyi dar ekranda gizler */
  .metrik-cizgi { display: none; }
}

/* ---------------------------------------------------------------
   .stat-card — pano ust seridi (ViewsYeni/Home/Index.cshtml).
   O sayfa kendi <style> blogunda ayni sinifi tanimliyor ve link'ten
   SONRA geldigi icin ezmek gerekiyor: seciciler bilerek `.card.stat-card`
   (0,2,0) ile bir kademe yukseltildi. View'a dokunulmadi.
   Renk view'da inline `color:` ile geliyor → currentColor'dan turetiliyor.
   --------------------------------------------------------------- */
.card.stat-card {
  position: relative;
  margin-bottom: 0;
  border: 1px solid var(--kenar);
  border-radius: var(--r);
  background: var(--kart);
  box-shadow: var(--ic-isik), var(--golge);
  overflow: hidden;
  transition: transform var(--gecis), border-color var(--gecis), box-shadow var(--gecis);
}

/* View'daki kosegen cam parilti yerine demo'nun ust renk kurali */
.card.stat-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  width: 44px;
  height: 2px;
  border-radius: 0;
  background: linear-gradient(90deg, var(--vurgu), transparent);
  transition: width .45s cubic-bezier(.3, .8, .4, 1);
  pointer-events: none;
}

.card.stat-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--vurgu) 42%, transparent);
  box-shadow: var(--ic-isik), var(--golge-2);
}
.card.stat-card:hover::after { width: 100%; }

.card.stat-card > .card-body { position: relative; z-index: 1; padding: 15px var(--u-3) 13px 18px; }

/* Demo .mt-ikon — renk inline geldigi icin currentColor uzerinden */
.card .stat-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 13px;
  font-size: var(--p-20);
  background: linear-gradient(145deg,
              color-mix(in srgb, currentColor 24%, transparent),
              color-mix(in srgb, currentColor 8%, transparent));
  border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
  box-shadow: 0 7px 16px -7px color-mix(in srgb, currentColor 50%, transparent),
              var(--ic-isik);
}

/* Demo .mt-deger */
.card .stat-value {
  font-family: var(--yazi-baslik);
  font-size: 28px;
  font-weight: var(--ag-baslik);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

/* Demo .mt-ad */
.card .stat-label {
  font-size: var(--p-10);
  font-weight: var(--ag-etiket);
  letter-spacing: var(--iz-etiket);
  text-transform: uppercase;
  color: var(--metin-3);
}

/* Demo .fark */
.card .change-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 7px;
  border-radius: var(--hap);
  font-family: var(--yazi-mono);
  font-size: var(--p-10);
  font-weight: var(--ag-veri);
}

@media (max-width: 575.98px) {
  .card .stat-value { font-size: 21px; }
  .card .stat-icon { width: 34px; height: 34px; border-radius: 11px; font-size: var(--p-16); }
}

/* ---------------------------------------------------------------
   Kisayol karti — bir sayfaya goturen buyuk baglanti kutusu.
   <a class="kisayol-kart" data-renk="bilgi" href="...">
     <span class="kisayol-ikon"><i class="ri-..."></i></span>
     <span class="kisayol-metin"><b>Baslik</b><small>Aciklama</small></span>
   </a>
   --------------------------------------------------------------- */
.kisayol-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--a-3);
}

.kisayol-kart {
  --k-renk: var(--vurgu);
  --k-sis: color-mix(in srgb, var(--k-renk) var(--sis), transparent);
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px var(--u-3);
  border: 1px solid var(--kenar);
  border-radius: var(--r);
  background: var(--kart);
  box-shadow: var(--ic-isik), var(--golge);
  color: var(--metin);
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--gecis), border-color var(--gecis), box-shadow var(--gecis);
}

/* Demo hale */
.kisayol-kart::before {
  content: '';
  position: absolute;
  top: -70%;
  right: -22%;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: var(--k-sis);
  filter: blur(36px);
  pointer-events: none;
}

.kisayol-kart:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--k-renk) 42%, transparent);
  box-shadow: var(--ic-isik), var(--golge-2);
  text-decoration: none;
  color: var(--metin);
}

.kisayol-ikon {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: linear-gradient(145deg,
              color-mix(in srgb, var(--k-renk) 24%, transparent),
              color-mix(in srgb, var(--k-renk) 8%, transparent));
  border: 1px solid color-mix(in srgb, var(--k-renk) 32%, transparent);
  color: var(--k-renk);
  font-size: var(--p-18);
  box-shadow: 0 7px 16px -7px color-mix(in srgb, var(--k-renk) 50%, transparent),
              var(--ic-isik);
}
.kisayol-metin { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kisayol-metin b {
  color: var(--metin);
  font-family: var(--yazi-baslik);
  font-size: var(--p-13);
  font-weight: var(--ag-veri);
  letter-spacing: var(--iz-baslik);
  line-height: 1.2;
}
.kisayol-metin small { color: var(--metin-3); font-size: var(--p-115); line-height: 1.3; }

/* Hover'da saga kayan ok */
.kisayol-kart::after {
  content: '\ea6c';
  position: absolute;
  right: var(--u-3);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  color: var(--k-renk);
  font-family: 'remixicon';
  font-size: var(--p-16);
  opacity: 0;
  transition: var(--gecis);
}
.kisayol-kart:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }

.kisayol-kart[data-renk="olumlu"] { --k-renk: var(--olumlu); }
.kisayol-kart[data-renk="uyari"]  { --k-renk: var(--uyari); }
.kisayol-kart[data-renk="hata"]   { --k-renk: var(--hata); }
.kisayol-kart[data-renk="bilgi"]  { --k-renk: var(--bilgi); }
.kisayol-kart[data-renk="mor"]    { --k-renk: var(--mor); }
.kisayol-kart[data-renk="mavi"]   { --k-renk: var(--mavi); }
.kisayol-kart[data-renk="pembe"]  { --k-renk: var(--pembe); }

@media (prefers-reduced-motion: reduce) {
  .card-hover:hover,
  .kpi:hover,
  .metrik-kart:hover,
  .card.stat-card:hover,
  .kisayol-kart:hover { transform: none; }
}

/* ================================================================
   TABLO — demo: _tema_denemeleri/tema.css "TABLO" bölümü
   Başlık = --yuzey-2 bandı + tek alt çizgi (oyuk/iç gölge YOK).
   Satır ayracı --cizgi, son satır çizgisiz, hover sadece ton.
   ================================================================ */

.table {
  width: 100%;
  margin-bottom: 0;
  /* Demo "collapse" kullanıyor; burada "separate" kalıyor çünkü yapışkan
     (position:sticky) başlıklarda collapse kenarı düşürüyor. Görünüm aynı:
     her hücre yalnız tek alt çizgi çiziyor. */
  border-collapse: separate;
  border-spacing: 0;
  color: var(--metin);
  font-size: var(--p-13);
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}

/* Başlık: kart-2 zemininde versal mikro etiket */
.table > thead > tr > th {
  padding: 10px var(--u-3);
  text-align: left;
  font-size: var(--p-10);
  font-weight: var(--ag-etiket);
  letter-spacing: var(--iz-etiket);
  text-transform: uppercase;
  color: var(--etiket);
  background: var(--yuzey-2);
  border-bottom: 1px solid var(--kenar);
  box-shadow: none;
  white-space: nowrap;
  vertical-align: middle;
}

.table > tbody > tr > td {
  padding: 10px var(--u-3);
  line-height: 1.4;
  color: var(--metin-2);
  border-bottom: 1px solid var(--cizgi);
  vertical-align: middle;
}
.table > tbody > tr:last-child > td { border-bottom: 0; }

/* Satır kimliği ve öne çıkan değerler ağırlığı taşır (demo .kisi-ad) */
.table > tbody > tr > td:first-child,
.table > tbody > tr > td b,
.table > tbody > tr > td strong { color: var(--metin); font-weight: 700; }

/* Sayısal sütunlar: sınıf eklemeye gerek yok — demo .tut */
.table > tbody > tr > td.text-end,
.table > tbody > tr > td[align="right"] {
  font-family: var(--yazi-mono);
  font-size: var(--p-125);
  font-weight: var(--ag-veri);
  letter-spacing: var(--iz-veri);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Hover: yalnızca ton — demo'da vurgu şeridi yok */
.table > tbody > tr { transition: background var(--gecis-hizli); }
.table > tbody > tr:hover { background: var(--yuzey-2); }
.table > tbody > tr:hover > td:first-child { box-shadow: none; }

.table > tfoot > tr > td,
.table > tfoot > tr > th {
  padding: 10px var(--u-3);
  background: var(--yuzey-2);
  border-top: 1px solid var(--kenar);
  box-shadow: none;
  font-family: var(--yazi-mono);
  font-weight: var(--ag-veri);
  font-size: var(--p-125);
  color: var(--metin);
  /* Toplam tutarlar dar sütunda "12.134.160" / "TL" diye ikiye bölünüyordu */
  white-space: nowrap;
}

.table-light > thead > tr > th,
.table > thead.table-light > tr > th { background: var(--yuzey-2); }

.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td { border: 1px solid var(--cizgi); }

.table-borderless > thead > tr > th,
.table-borderless > tbody > tr > td { border: 0; }

/* Demo'da şeritli tablo yok; en ince cam filmiyle kuruldu ki hover okunsun */
.table-striped > tbody > tr:nth-of-type(odd) { background: var(--cam); }
.table-striped > tbody > tr:nth-of-type(odd):hover { background: var(--yuzey-2); }

.table-hover > tbody > tr:hover { background: var(--yuzey-2); }

.table-sm > thead > tr > th,
.table-sm > tbody > tr > td { padding: 6px 10px; }

.miniTable > thead > tr > th,
.miniTable > tbody > tr > td { padding: 6px 10px; font-size: var(--p-125); }

/* demo .sar */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table .sayi,
.table td.sayi {
  font-family: var(--yazi-mono);
  font-size: var(--p-125);
  font-weight: var(--ag-veri);
  letter-spacing: var(--iz-veri);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* Satır vurguları: pastel ton (demo yumuşak dolgu mantığı) */
.table-active { background: var(--vurgu-sis) !important; }
.table-success { background: var(--olumlu-sis) !important; }
.table-danger { background: var(--hata-sis) !important; }
.table-warning { background: var(--uyari-sis) !important; }
.table-info { background: var(--bilgi-sis) !important; }

/* Toplu seçim çubuğu — demo .dt-arac ölçüleri */
.table-secim {
  display: flex;
  align-items: center;
  gap: var(--u-3);
  padding: 11px var(--a-4);
  background: var(--yuzey-2);
  border-top: 1px solid var(--cizgi);
  border-bottom: 1px solid var(--cizgi);
  box-shadow: none;
}
.table-secim-sayi {
  font-family: var(--yazi-mono);
  font-weight: var(--ag-veri);
  font-size: var(--p-125);
  color: var(--vurgu);
}

/* Aktif filtre çipi — demo .cip: hap, kenarsız, %13 ton */
.filtre-cip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: var(--hap);
  background: color-mix(in srgb, var(--vurgu) 13%, transparent);
  border: 0;
  color: var(--vurgu);
  font-size: var(--p-115);
  font-weight: 700;
  letter-spacing: normal;
}
.filtre-cip b { font-weight: 700; }
.filtre-cip button {
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
  opacity: .6;
  font-size: var(--p-13);
  line-height: 1;
}
.filtre-cip button:hover { opacity: 1; }

/* Satır içi düzenlenebilir hücre — demo .girdi: düz kenar, odakta yalnız renk */
.satir-girdi {
  width: 100%;
  height: var(--kontrol-yuk-sm);
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--r-2);
  background: transparent;
  color: var(--metin);
  font-family: inherit;
  font-size: var(--p-13);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  outline: none;
  transition: border-color var(--gecis), background var(--gecis);
}
.satir-girdi:hover {
  border-color: color-mix(in srgb, var(--metin-3) 45%, transparent);
  background: var(--girdi);
  box-shadow: none;
}
.satir-girdi:focus {
  border-color: var(--vurgu);
  background: var(--girdi-odak);
  box-shadow: none;
}
.satir-girdi.sayi {
  font-family: var(--yazi-mono);
  font-weight: var(--ag-veri);
  text-align: right;
}

/* Boş durum — demo .bos / .bos-im / .bos-ad / .bos-not */
.bos-durum {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--u-2);
  padding: var(--a-7) var(--a-4);
  text-align: center;
}
.bos-durum-ikon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 4px;
  border: 0;
  border-radius: var(--r-buyuk);
  background: color-mix(in srgb, var(--metin-3) 10%, transparent);
  box-shadow: none;
  font-size: var(--p-24);
  color: var(--metin-3);
}
.bos-durum-ad {
  font-family: var(--yazi-baslik);
  font-size: var(--p-14);
  font-weight: var(--ag-baslik);
  letter-spacing: var(--iz-baslik);
  color: var(--metin);
}
.bos-durum-not {
  font-size: var(--p-125);
  color: var(--metin-3);
  max-width: 34ch;
}

/* Mobil: hücre nefesi kısılır, yatay kaydırma tabloyu taşır */
@media (max-width: 575.98px) {
  .table > thead > tr > th,
  .table > tbody > tr > td,
  .table > tfoot > tr > td,
  .table > tfoot > tr > th { padding-left: 10px; padding-right: 10px; }
}

/* ================================================================
   ROZET / DURUM / ALERT / İLERLEME — demo: tema.css .cip + .durum
   Kural: rozetler CANLI değil YUMUŞAK. Zemin = rengin %13–14 tonu,
   yazı = rengin kendisi. Kenar yok, iç ışık yok, hap kenarlı.
   ================================================================ */

/* Taban rozet — demo .cip */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: var(--hap);
  background: var(--cam-2);
  border: 0;
  box-shadow: none;
  color: var(--metin-2);
  font-family: var(--yazi-govde);
  font-size: var(--p-115);
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  vertical-align: middle;
}

/* Eski "dolgun kabarma" kaldırıldı: hiçbir rozet artık kabarmıyor */
.badge[class*="bg-"],
.badge[class*="durum-"] { box-shadow: none; }

/* --- anlamsal rozetler: hepsi pastel (demo .cip %13 tonu) --- */
.badge.bg-primary   { background: color-mix(in srgb, var(--vurgu) 13%, transparent) !important; color: var(--vurgu) !important;  border-color: transparent; }
.badge.bg-success   { background: color-mix(in srgb, var(--olumlu) 13%, transparent) !important; color: var(--olumlu) !important; border-color: transparent; }
.badge.bg-danger    { background: color-mix(in srgb, var(--hata) 13%, transparent) !important; color: var(--hata) !important;     border-color: transparent; }
.badge.bg-warning   { background: color-mix(in srgb, var(--uyari) 13%, transparent) !important; color: var(--uyari) !important;   border-color: transparent; }
.badge.bg-info      { background: color-mix(in srgb, var(--bilgi) 13%, transparent) !important; color: var(--bilgi) !important;   border-color: transparent; }
.badge.bg-secondary { background: var(--cam-2) !important; color: var(--metin-2) !important; border-color: transparent; }
.badge.bg-dark      { background: color-mix(in srgb, var(--metin) 12%, transparent) !important; color: var(--metin) !important;   border-color: transparent; }
.badge.bg-light     { background: var(--cam) !important; color: var(--metin-2) !important; border-color: transparent; }

/* .yumusak artık varsayılan — eski çağrı yerleri kırılmasın diye korunuyor */
.badge.yumusak[class*="bg-"] { box-shadow: none; }
.badge.yumusak.bg-primary   { background: color-mix(in srgb, var(--vurgu) 13%, transparent) !important; color: var(--vurgu) !important; }
.badge.yumusak.bg-success   { background: color-mix(in srgb, var(--olumlu) 13%, transparent) !important; color: var(--olumlu) !important; }
.badge.yumusak.bg-danger    { background: color-mix(in srgb, var(--hata) 13%, transparent) !important; color: var(--hata) !important; }
.badge.yumusak.bg-warning   { background: color-mix(in srgb, var(--uyari) 13%, transparent) !important; color: var(--uyari) !important; }
.badge.yumusak.bg-info      { background: color-mix(in srgb, var(--bilgi) 13%, transparent) !important; color: var(--bilgi) !important; }
.badge.yumusak.bg-secondary { background: var(--cam-2) !important; color: var(--metin-2) !important; }
.badge.yumusak.bg-dark      { background: color-mix(in srgb, var(--metin) 12%, transparent) !important; color: var(--metin) !important; }

/* Dolgu gerçekten şartsa opt-in: <span class="badge bg-danger dolgu">.
   Demo'nun dolgu formülü — koyuda kararan gradyan, her temada beyaz yazı. */
.badge.dolgu {
  color: var(--btn-yazi) !important;
  border-color: transparent;
  box-shadow: var(--ic-isik-guclu);
}
.badge.dolgu.bg-primary { background: var(--vurgu-gradyan) !important; }
.badge.dolgu.bg-success { background: linear-gradient(135deg, color-mix(in srgb, var(--olumlu) var(--d1), #000), color-mix(in srgb, var(--olumlu) var(--d2), #000)) !important; }
.badge.dolgu.bg-danger  { background: linear-gradient(135deg, color-mix(in srgb, var(--hata) var(--d1), #000), color-mix(in srgb, var(--hata) var(--d2), #000)) !important; }
.badge.dolgu.bg-warning { background: linear-gradient(135deg, color-mix(in srgb, var(--uyari) var(--d1), #000), color-mix(in srgb, var(--uyari) var(--d2), #000)) !important; }
.badge.dolgu.bg-info    { background: linear-gradient(135deg, color-mix(in srgb, var(--bilgi) var(--d1), #000), color-mix(in srgb, var(--bilgi) var(--d2), #000)) !important; }

/* Rozet içindeki bağlantılar rozetin rengini alır; Velzon'da dolgun zemin
   varsayılıp text-white yazılıyordu, açık zeminli rozette görünmez oluyordu. */
.badge a { color: inherit; text-decoration: none; }

/* Kapatma düğmesi — demo .cip button: yalnız opaklık değişir */
.rozet-kapat {
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  margin-left: 1px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  opacity: .6;
  font-size: var(--p-125);
  line-height: 1;
  cursor: pointer;
  transition: opacity var(--gecis-hizli);
}
.rozet-kapat:hover { opacity: 1; background: transparent; color: inherit; }

/* Etiket ekleme çipi — demo .cip-ekle (kesikli hap) */
.rozet-ekle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border: 1.5px dashed var(--kenar-2);
  border-radius: var(--hap);
  background: transparent;
  color: var(--metin-3);
  font-family: inherit;
  font-size: var(--p-115);
  font-weight: 700;
  cursor: pointer;
  transition: color var(--gecis-hizli), border-color var(--gecis-hizli);
}
.rozet-ekle:hover { color: var(--vurgu); border-color: var(--vurgu); }

/* Nokta bir İŞARET, bir ışık değil */
.badge-nokta::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: none;
  flex-shrink: 0;
}

/* ---------------------------------------------- DURUM ETİKETİ
   Demo .durum: hap, kenarsız, %14 ton + noktalı. */
.durum {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px 3px 8px;
  border-radius: var(--hap);
  font-size: var(--p-115);
  font-weight: 700;
  letter-spacing: normal;
  white-space: nowrap;
  background: var(--durum-zem, var(--cam-2));
  color: var(--durum-renk, var(--metin-2));
  border: 0;
  box-shadow: none;
}

.durum::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: none;
  flex-shrink: 0;
}

.durum-yeni          { --durum-renk: var(--d-yeni);        --durum-zem: color-mix(in srgb, var(--d-yeni) 14%, transparent); }
.durum-onaylandi     { --durum-renk: var(--d-onay);        --durum-zem: color-mix(in srgb, var(--d-onay) 14%, transparent); }
.durum-faturalandi   { --durum-renk: var(--d-fatura);      --durum-zem: color-mix(in srgb, var(--d-fatura) 14%, transparent); }
.durum-teslim        { --durum-renk: var(--d-teslim);      --durum-zem: color-mix(in srgb, var(--d-teslim) 14%, transparent); }
.durum-kargolandi    { --durum-renk: var(--d-kargo);       --durum-zem: color-mix(in srgb, var(--d-kargo) 14%, transparent); }
.durum-iade          { --durum-renk: var(--d-iade);        --durum-zem: color-mix(in srgb, var(--d-iade) 14%, transparent); }
.durum-iptal         { --durum-renk: var(--d-iptal);       --durum-zem: color-mix(in srgb, var(--d-iptal) 14%, transparent); }
.durum-ulasilamadi   { --durum-renk: var(--d-ulasilamadi); --durum-zem: color-mix(in srgb, var(--d-ulasilamadi) 16%, transparent); }
.durum-mukerrer      { --durum-renk: var(--d-mukerrer);    --durum-zem: color-mix(in srgb, var(--d-mukerrer) 16%, transparent); }
.durum-basarisiz     { --durum-renk: var(--d-basarisiz);   --durum-zem: color-mix(in srgb, var(--d-basarisiz) 14%, transparent); }
.durum-kara-liste    { --durum-renk: var(--d-karaliste);   --durum-zem: color-mix(in srgb, var(--d-karaliste) 18%, transparent); }
.durum-ileri-tarihli { --durum-renk: var(--d-ileri);       --durum-zem: color-mix(in srgb, var(--d-ileri) 14%, transparent); }
.durum-hazirlaniyor  { --durum-renk: var(--d-hazirlanir);  --durum-zem: color-mix(in srgb, var(--d-hazirlanir) 14%, transparent); }
.durum-aranacak      { --durum-renk: var(--d-aranacak);    --durum-zem: color-mix(in srgb, var(--d-aranacak) 14%, transparent); }

/* Sayfalar <span class="badge @DurumKodu"> yazıyor; DurumKodu DB'den gelir.
   Rozet DOLGUN: arka plan durumun TANIMLI rengi (core/tokens.css --d-*),
   yazı beyaz. Bir tur pastel (%14 ton) denendi ama ekrandaki renk durum
   tanımıyla eşleşmiyordu. */
.badge.durum-yeni,
.badge.durum-kara-liste,
.badge.durum-basarisiz,
.badge.durum-mukerrer,
.badge.durum-faturalandi,
.badge.durum-ulasilamadi,
.badge.durum-iade,
.badge.durum-teslim,
.badge.durum-iptal,
.badge.durum-onaylandi,
.badge.durum-kargolandi,
.badge.durum-ileri-tarihli,
.badge.durum-hazirlaniyor,
.badge.durum-aranacak {
  background: var(--durum-renk) !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
  box-shadow: none;
}

/* Kara liste rengi saf siyah: koyu temada sayfa zeminine gömülüyor, ince kenar */
.badge.durum-kara-liste { border: 1px solid var(--kenar-2) !important; }

/* Sarı zeminde beyaz okunmuyor: tek istisna koyu mürekkep */
.badge.durum-ileri-tarihli { color: #212529 !important; }

/* ---------------------------------------------- ALERT
   Demo .not-blok: ince ton + 3px sol şerit, çerçeve yok. */
.alert {
  position: relative;
  /* Eskiden flex idi: kök seviyesindeki her metin parçası ve etiket AYRI bir
     flex kolonu oluyordu. "<i> + düz metin + <strong> + <span>" kalıbı dört
     sütuna bölünüp alt alta kırılıyordu (stok durumu kutusu böyle bozuldu).
     Artık blok akışı; ikon mutlak konumda, metin asılı girintide duruyor —
     hem `<i> + <div>` kalıbı hem de serbest metin doğru çıkıyor.
     Bilerek yan yana dizilmesi gereken kutular `d-flex` ile geçersiz kılar. */
  display: block;
  padding: 12px var(--a-4);
  margin-bottom: 13px;
  border: 0;
  border-left: 3px solid var(--kenar-2);
  border-radius: var(--r-2);
  background: var(--cam);
  box-shadow: none;
  color: var(--metin-2);
  font-size: var(--p-13);
  line-height: 1.55;
}

/* Baştaki ikon: metnin ilk satırıyla hizalı, sonraki satırlar altına kaçmaz */
.alert > i:first-child,
.alert > svg:first-child {
  position: absolute;
  left: var(--a-4);
  top: 12px;
  line-height: 1.55;
}
.alert:has(> i:first-child),
.alert:has(> svg:first-child) { padding-left: calc(var(--a-4) + 25px); }

/* Son çocuğun alt boşluğu kutuyu şişirmesin (p / ul kalıpları) */
.alert > :last-child { margin-bottom: 0; }

/* Geriye dönük: sayfalarda kullanılan sınıf duruyor, artık varsayılan davranış */
.alert.alert-blok { display: block; }

.alert-primary   { background: color-mix(in srgb, var(--vurgu) 9%, transparent);  border-left-color: var(--vurgu); }
.alert-success   { background: color-mix(in srgb, var(--olumlu) 9%, transparent); border-left-color: var(--olumlu); }
.alert-danger    { background: color-mix(in srgb, var(--hata) 9%, transparent);   border-left-color: var(--hata); }
.alert-warning   { background: color-mix(in srgb, var(--uyari) 9%, transparent);  border-left-color: var(--uyari); }
.alert-info      { background: color-mix(in srgb, var(--bilgi) 9%, transparent);  border-left-color: var(--bilgi); }
.alert-secondary { background: var(--yuzey-2); border-left-color: var(--kenar-2); }

.alert-heading {
  font-family: var(--yazi-baslik);
  font-size: var(--p-13);
  font-weight: var(--ag-baslik);
  letter-spacing: var(--iz-baslik);
  color: var(--metin);
  margin-bottom: 4px;
}
.alert-link { font-weight: 700; color: inherit; }
.alert-dismissible { padding-right: 46px; }
.alert-dismissible .btn-close { position: absolute; top: 8px; right: 8px; }

/* ---------------------------------------------- İLERLEME
   Demo .bar-iz / .bar-iz i: 6px iz, gölge yok, uçları yumuşayan gradyan. */
.progress {
  display: flex;
  height: 6px;
  overflow: hidden;
  background: color-mix(in srgb, var(--metin-3) 13%, transparent);
  box-shadow: none;
  border-radius: var(--r-hap);
}
.progress-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-width: 0;
  padding: 0 10px;
  background: linear-gradient(90deg, var(--vurgu), color-mix(in srgb, var(--vurgu) 55%, transparent));
  border-radius: var(--r-hap);
  color: var(--vurgu-yazi);
  font-size: var(--p-11);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: width 0.75s cubic-bezier(0.25, 0.8, 0.3, 1);
  box-shadow: none;
}

/* İçinde metin taşıyan çubuk 6px'e sığmaz; yüksekliği içeriğe açılır */
.progress:has(.progress-bar:not(:empty)) { height: auto; min-height: 6px; }
.progress-bar:not(:empty) { padding: 4px 12px; line-height: 1.4; }
.progress-bar.bg-success { background: linear-gradient(90deg, var(--olumlu), color-mix(in srgb, var(--olumlu) 55%, transparent)) !important; color: var(--olumlu-yazi); }
.progress-bar.bg-danger  { background: linear-gradient(90deg, var(--hata), color-mix(in srgb, var(--hata) 55%, transparent)) !important; color: var(--hata-yazi); }
.progress-bar.bg-warning { background: linear-gradient(90deg, var(--uyari), color-mix(in srgb, var(--uyari) 55%, transparent)) !important; color: var(--uyari-yazi); }

/* ---------------------------------------------- YÜKLEME
   Demo .donme: 2px halka, üst kenar renkli, 0.7s doğrusal. */
.spinner-border {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 2px solid color-mix(in srgb, var(--metin-3) 35%, transparent);
  border-top-color: var(--vurgu);
  border-right-color: color-mix(in srgb, var(--metin-3) 35%, transparent);
  border-radius: 50%;
  animation: donme 0.7s linear infinite;
}
.spinner-border-sm { width: 12px; height: 12px; border-width: 2px; }

@keyframes donme { to { transform: rotate(360deg); } }

.nabiz {
  animation: nabiz-animasyon 2.2s ease-in-out infinite;
}
@keyframes nabiz-animasyon { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Satır içi dolgulu rozet — JS'ten gelen durum renkleri.
   Bazı sayfalar rozete style="background-color:#405189" gibi doygun bir
   dolgu basıyor; yazı rengi ise temadan geliyordu ve açık temada koyu
   yazı koyu dolguya düşüp okunmuyordu. Dolgu satır içindeyse yazı beyaz.
   !important YOK: satır içi color zaten CSS'i ezer, böylece kendi rengini
   belirten yerler (ör. kehribar zeminde siyah yazı) korunur. */
.badge[style*="background"] { color: #FFFFFF; }

/* ================================================================
   GEZİNME — sekme, hap, açılır menü, sayfalama, liste, akordeon
   Demo karşılıkları: .sekmeler/.sekme · .bolme · .acilir/.ac-menu/.ac-og
   · .sayfalama/.sf-btn  (_tema_denemeleri/tema.css)
   ================================================================ */

.nav { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }

.nav-item { display: flex; }

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--u-2);
  padding: 9px 16px;
  border: none;
  background: none;
  color: var(--metin-2);
  font-family: inherit;
  font-size: var(--p-13);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--gecis-hizli), background var(--gecis-hizli);
  white-space: nowrap;
}
.nav-link:hover { color: var(--metin); text-decoration: none; }
.nav-link.disabled { opacity: 0.5; cursor: not-allowed; }
.nav-link:focus-visible { outline: 2px solid var(--vurgu); outline-offset: -2px; }

/* ==================================================== SEKMELER */
/* Demo .sekmeler: 4px aralık, kenar çizgisi, yatay kaydırma */
.nav-tabs {
  gap: 4px;
  border-bottom: 1px solid var(--kenar);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.nav-tabs::-webkit-scrollbar { height: 0; }

/* Demo .sekme: üstten yuvarlatılmış, etkin sekmede yumuşak vurgu dolgusu */
.nav-tabs .nav-link {
  position: relative;
  margin-bottom: -1px;
  padding: 11px 16px;
  border: none;
  border-radius: 10px 10px 0 0;
  background: none;
  font-size: var(--p-13);
  font-weight: 700;
  letter-spacing: normal;
  color: var(--metin-3);
}
.nav-tabs .nav-link i {
  font-size: var(--p-15);
  color: inherit;
  opacity: 0.75;
  transition: opacity var(--gecis-hizli);
}
/* Aktif göstergesi: sekmenin içinde 12px pay bırakan vurgu çizgisi */
.nav-tabs .nav-link::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(90deg, var(--vurgu), var(--vurgu-d2));
  transform: scaleX(0);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.nav-tabs .nav-link:hover {
  color: var(--metin);
  background: color-mix(in srgb, var(--metin-3) 8%, transparent);
}
.nav-tabs .nav-link:hover::after { transform: scaleX(0.4); }
.nav-tabs .nav-link.active {
  color: var(--vurgu);
  background: color-mix(in srgb, var(--vurgu) 10%, transparent);
}
.nav-tabs .nav-link.active i { opacity: 1; }
.nav-tabs .nav-link.active::after { transform: scaleX(1); }

/* Kart başlığındaki sekme şeridi: kenarlara yaslanır ve kart genişliğinde
   tek kural çizer. Yeni .card-header'in alt dolgusu 0, negatif alt marj gerekmiyor. */
.card-header-tabs {
  margin: 0 calc(var(--a-5) * -1);
  padding: 0 var(--a-5);
  border-bottom: 1px solid var(--kenar);
}
/* Şerit kendi çizgisini taşımadığı için -1px kaydırma taşma yaratır */
.card-header-tabs .nav-link { margin-bottom: 0; }

.nav-justified { width: 100%; }
.nav-justified .nav-item { flex: 1 1 0; }
.nav-justified .nav-link { width: 100%; justify-content: center; }

/* ==================================================== HAP GRUBU */
/* Demo .bolme: hap çerçeve içinde bölmeli seçenek. Etkin bölme DOLGU
   değil, yumuşak vurgu tonudur — demo bütünlüğü böyle. */
.nav-pills {
  gap: 2px;
  padding: 3px;
  background: var(--girdi);
  border: 1px solid var(--kenar);
  border-radius: var(--hap);
  box-shadow: none;
  width: fit-content;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.nav-pills .nav-link {
  padding: 7px 16px;
  border-radius: var(--hap);
  font-size: var(--p-125);
  font-weight: 700;
  color: var(--metin-2);
}
.nav-pills .nav-link:hover { color: var(--metin); background: none; }
.nav-pills .nav-link.active {
  background: color-mix(in srgb, var(--vurgu) 16%, transparent);
  color: var(--vurgu);
  box-shadow: none;
}
.nav-pills .nav-link:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }

.nav-pills .nav-link .adet {
  padding: 1px 7px;
  border: 0;
  border-radius: var(--hap);
  background: var(--cam-2);
  color: var(--metin-3);
  font-family: var(--yazi-mono);
  font-size: var(--p-10);
  font-weight: 700;
}
.nav-pills .nav-link.active .adet {
  background: color-mix(in srgb, var(--vurgu) 20%, transparent);
  color: var(--vurgu);
}

.tab-content > .tab-pane { display: none; }
.tab-content > .tab-pane.active,
.tab-content > .tab-pane.show.active {
  display: block;
  animation: sekme-belir 0.32s cubic-bezier(0.2, 0.7, 0.3, 1);
}
@keyframes sekme-belir { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* ==================================================== AÇILIR MENÜ */

.dropdown, .dropup { position: relative; display: inline-flex; }

/* Demo .ac-menu: 6px pay, 5px iç dolgu, 12px yarıçap.
   12px token merdiveninde yok (10 / 14 arası) — demo değeri korundu. */
.dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: var(--z-ortu);
  display: none;
  min-width: 190px;
  max-height: 70vh;
  overflow-y: auto;
  padding: 5px;
  margin: 0;
  list-style: none;
  background: var(--yuzey-ust);
  border: 1px solid var(--kenar-2);
  border-radius: 12px;
  box-shadow: var(--golge-2);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.dropdown-menu.goster,
.dropdown-menu.show {
  display: block;
  animation: menu-belir 0.16s cubic-bezier(0.2, 0.7, 0.3, 1);
}
@keyframes menu-belir { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }

.dropdown-menu-end { left: auto; right: 0; }
.dropup .dropdown-menu { top: auto; bottom: calc(100% + 6px); }

/* Demo .ac-og */
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 11px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--metin-2);
  font-family: inherit;
  font-size: var(--p-125);
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--gecis-hizli), color var(--gecis-hizli);
  white-space: nowrap;
}
.dropdown-item i { opacity: 0.75; }
.dropdown-item:hover {
  background: color-mix(in srgb, var(--vurgu) 10%, transparent);
  color: var(--metin);
  text-decoration: none;
}
.dropdown-item:focus-visible { outline: 2px solid var(--vurgu); outline-offset: -2px; }
.dropdown-item.active {
  background: color-mix(in srgb, var(--vurgu) 14%, transparent);
  color: var(--vurgu);
  font-weight: 700;
  box-shadow: none;
}
.dropdown-item.active i { opacity: 1; }
.dropdown-item.tehlike { color: var(--hata); }
.dropdown-item.tehlike:hover { background: color-mix(in srgb, var(--hata) 11%, transparent); color: var(--hata); }
.dropdown-item:disabled, .dropdown-item.disabled { opacity: 0.45; cursor: not-allowed; }

/* Demo .ac-ayir */
.dropdown-divider { height: 1px; margin: 4px 6px; background: var(--cizgi); border: 0; }

.dropdown-header {
  padding: 7px 11px 5px;
  font-size: var(--p-10);
  font-weight: 800;
  letter-spacing: var(--iz-etiket);
  text-transform: uppercase;
  color: var(--etiket);
}

.dropdown-toggle::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 5px;
  vertical-align: middle;
  border-top: 4px solid;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

/* ==================================================== İZ YOLU */

.breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; font-size: var(--p-12); color: var(--metin-3); }
.breadcrumb-item a { color: var(--metin-3); text-decoration: none; }
.breadcrumb-item a:hover { color: var(--vurgu); }
.breadcrumb-item + .breadcrumb-item::before { content: '·'; margin-right: 6px; color: var(--metin-3); }
.breadcrumb-item.active { color: var(--metin-2); }

/* ==================================================== SAYFALAMA */
/* Demo .sf-btn: 30px kare, çerçeveli; geçerli sayfa vurgu gradyanı */
.pagination { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.page-link {
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  border: 1px solid var(--kenar);
  border-radius: var(--r-1);
  background: transparent;
  color: var(--metin-2);
  font-family: var(--yazi-mono);
  font-size: var(--p-12);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--gecis-hizli), color var(--gecis-hizli), background var(--gecis-hizli);
}
.page-link:hover { border-color: var(--vurgu); color: var(--vurgu); text-decoration: none; }
.page-link:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }
.page-item.active .page-link {
  background: var(--vurgu-gradyan);
  border-color: transparent;
  color: var(--vurgu-yazi);
  font-weight: 700;
  box-shadow: var(--ic-isik-guclu);
}
.page-item.disabled .page-link { opacity: 0.4; cursor: not-allowed; }

/* ==================================================== LİSTE */

.list-group { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.list-group-item {
  display: flex;
  align-items: center;
  gap: var(--u-3);
  padding: 10px 14px;
  border-bottom: 1px solid var(--cizgi);
  background: none;
  color: var(--metin-2);
  font-size: var(--p-13);
  text-decoration: none;
  transition: background var(--gecis-hizli), color var(--gecis-hizli);
}
.list-group-item:last-child { border-bottom: none; }
.list-group-item-action { cursor: pointer; }
.list-group-item-action:hover { background: var(--kart-2); color: var(--metin); text-decoration: none; }
.list-group-item.active { background: color-mix(in srgb, var(--vurgu) 10%, transparent); color: var(--vurgu); }
.list-group-flush .list-group-item { border-left: 0; border-right: 0; }

/* ==================================================== AKORDEON */
/* Demo'da doğrudan karşılığı yok; kart/menü dilinden türetildi */

.accordion-item {
  border: 1px solid var(--kenar);
  border-radius: var(--r-2);
  margin-bottom: 6px;
  overflow: hidden;
  background: var(--kart-2);
}
.accordion-button {
  display: flex;
  align-items: center;
  gap: var(--u-2);
  width: 100%;
  padding: 11px 14px;
  border: none;
  background: none;
  color: var(--metin);
  font-family: inherit;
  font-size: var(--p-13);
  font-weight: 800;
  letter-spacing: var(--iz-baslik);
  text-align: left;
  cursor: pointer;
  transition: background var(--gecis-hizli), color var(--gecis-hizli);
}
.accordion-button:hover { background: color-mix(in srgb, var(--metin-3) 8%, transparent); }
.accordion-button:focus-visible { outline: 2px solid var(--vurgu); outline-offset: -2px; }
.accordion-button::after {
  content: '';
  margin-left: auto;
  width: 0;
  height: 0;
  border-top: 5px solid currentColor;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  transition: transform var(--gecis);
}
.accordion-button[aria-expanded="true"]::after { transform: rotate(180deg); }
.accordion-button[aria-expanded="true"] { color: var(--vurgu); }
.accordion-body { padding: 0 14px 14px; font-size: var(--p-13); color: var(--metin-2); }

.collapse:not(.show) { display: none; }
.collapsing { overflow: hidden; transition: height var(--gecis); }

/* ================================================================
   KATMAN — modal · örtü · offcanvas · ipucu · popover · toast
   Kaynak: _tema_denemeleri/tema.css (.ortu / .modal-* / .onay-* / .tost-*)
   Katman dili:
     örtü  → yakın-siyah film + blur
     kutu  → var(--kart), tek yüzey
     başlık / gövde / dip → KENDİ ZEMİNİ YOK, hepsi kutu zeminini taşır;
     bölümleri yalnızca var(--cizgi) ayırıcıları böler (demo aynen böyle).
   ================================================================ */

/* ------------------------------------------------ ÖRTÜ */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
}
.modal.goster,
.modal.show { display: block; }

/* Demo örtüsü: color-mix(in srgb, #000 62%, transparent) + blur(6px).
   Ham #000 bilinçli — örtü filmi için token yok, demo iki temada da aynı film. */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modal) - 1);
  background: color-mix(in srgb, #000 62%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: ortu-belir 0.18s ease;
}
/* Demo açık temada da aynı örtüyü kullanır; seçici korunuyor. */
:root[data-tema="acik"] .modal-backdrop { background: color-mix(in srgb, #000 62%, transparent); }
@keyframes ortu-belir { from { opacity: 0; } to { opacity: 1; } }

.modal-backdrop.fade { opacity: 1; }
.modal-backdrop.show { opacity: 1; }

body.modal-acik,
body.modal-open { overflow: hidden; }

/* ------------------------------------------------ KUTU */
.modal.fade .modal-dialog { transition: none; }

/* Demo: örtü üstten 6vh boşlukla açar, kutu 600px */
.modal-dialog {
  position: relative;
  width: auto;
  max-width: 600px;
  margin: 6vh auto 16px;
  pointer-events: none;
  animation: modal-gir 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes modal-gir { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }

.modal-sm { max-width: 380px; }
.modal-lg { max-width: 820px; }
.modal-xl { max-width: 1180px; }

.modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - 12vh); }

.modal-dialog-scrollable .modal-content { max-height: calc(100vh - 12vh); }
.modal-dialog-scrollable .modal-body { overflow-y: auto; }

.modal-fullscreen { max-width: none; width: 100%; height: 100%; margin: 0; }
.modal-fullscreen .modal-content { height: 100%; border: 0; border-radius: 0; }

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background: var(--kart);
  border: 1px solid var(--kenar-2);
  border-radius: var(--r-buyuk);
  box-shadow: var(--golge-2);
  outline: 0;
  overflow: hidden;
}

/* Başlık: kutu zeminini taşır, altında yalnızca --cizgi ayırıcı */
.modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px var(--a-5);
  background: transparent;
  border-bottom: 1px solid var(--cizgi);
}

.modal-title {
  margin: 0;
  font-family: var(--yazi-baslik);
  font-size: var(--p-15);
  font-weight: var(--ag-baslik);
  letter-spacing: var(--iz-baslik);
  color: var(--metin);
}
/* Başlık altı açıklama satırı (demo .modal-not) */
.modal-header .alt-not { font-size: var(--p-115); color: var(--metin-3); }
.modal-header .btn-close { margin-left: auto; flex-shrink: 0; }

.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: 17px var(--a-5);
  background: transparent;
  overflow-y: auto;
}

/* Dip: demo'da ZEMİNSİZ — üstünde yalnızca --cizgi ayırıcı vardır */
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--u-2);
  padding: 13px var(--a-5);
  background: transparent;
  border-top: 1px solid var(--cizgi);
}
/* Dipte sola yaslı bilgi metni (demo .modal-dip .not) */
.modal-footer .not { margin-right: auto; font-size: var(--p-115); color: var(--metin-3); }

/* Modal içi form ızgarası (demo .m-izgara) */
.modal-body .m-izgara {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--a-4);
}
.modal-body .m-izgara .tam { grid-column: 1 / -1; }
@media (max-width: 560px) { .modal-body .m-izgara { grid-template-columns: 1fr; } }

/* ------------------------------------------------ OFFCANVAS (çekmece) */
.offcanvas {
  position: fixed;
  bottom: 0;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  max-width: 100%;
  background: var(--kart);
  border-left: 1px solid var(--kenar-2);
  box-shadow: var(--golge-2);
  transition: transform var(--gecis);
}
.offcanvas-end { top: 0; right: 0; width: 400px; transform: translateX(100%); }
.offcanvas-start { top: 0; left: 0; width: 400px; transform: translateX(-100%); border-left: 0; border-right: 1px solid var(--kenar-2); }
.offcanvas-top { top: 0; left: 0; right: 0; height: 30vh; transform: translateY(-100%); }
.offcanvas-bottom { left: 0; right: 0; height: 30vh; transform: translateY(100%); }
.offcanvas.goster,
.offcanvas.show { transform: none; }

.offcanvas-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px var(--a-5);
  background: transparent;
  border-bottom: 1px solid var(--cizgi);
}
.offcanvas-title {
  margin: 0;
  font-family: var(--yazi-baslik);
  font-size: var(--p-15);
  font-weight: var(--ag-baslik);
  letter-spacing: var(--iz-baslik);
  color: var(--metin);
}
.offcanvas-header .btn-close { margin-left: auto; flex-shrink: 0; }
.offcanvas-body { flex: 1 1 auto; padding: 17px var(--a-5); background: transparent; overflow-y: auto; }

/* ------------------------------------------------ TOAST
   Demo .tostlar: sağ ALT köşe, 340px, 9px aralık */
.bildirim-kap,
.toast-container {
  position: fixed;
  right: var(--a-5);
  bottom: var(--a-5);
  top: auto;
  left: auto;
  z-index: var(--z-bildirim);
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: min(340px, calc(100vw - 36px));
  pointer-events: none;
}

.toast {
  --tc: var(--bilgi);
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: flex-start;
  gap: var(--a-3);
  width: 100%;
  max-width: none;
  padding: 12px 13px;
  border: 1px solid var(--kenar-2);
  border-left: 3px solid var(--tc);
  border-radius: 13px;
  background: var(--kart-2);
  box-shadow: var(--golge-2);
  font-family: var(--yazi-govde);
  font-size: var(--p-12);
  color: var(--metin-2);
  overflow: hidden;
  pointer-events: auto;
  animation: toast-gir 0.28s cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes toast-gir { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.toast.kapaniyor { animation: toast-cik 0.2s ease forwards; }
@keyframes toast-cik { to { opacity: 0; transform: translateX(16px); } }

/* Demo .tost-im: renkle boyanmış kare kutu */
.toast-ikon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-ic);
  background: color-mix(in srgb, var(--tc) 15%, transparent);
  color: var(--tc);
  font-size: var(--p-14);
  line-height: 1;
  flex-shrink: 0;
}
.toast-govde { min-width: 0; }
.toast-baslik { font-size: var(--p-13); font-weight: var(--ag-baslik); line-height: 1.3; color: var(--metin); margin-bottom: 1px; }
.toast-govde > div { font-size: var(--p-12); color: var(--metin-2); }
.toast .btn-close { margin-left: auto; align-self: flex-start; flex-shrink: 0; }

/* Bootstrap toast govdesi kullanilirsa satiri bolmesin */
.toast-header,
.toast-body { grid-column: 1 / -1; background: transparent; }
.toast-header { display: flex; align-items: center; gap: var(--u-2); font-weight: var(--ag-baslik); color: var(--metin); }
.toast-body { padding: 0; }

.toast.olumlu { --tc: var(--olumlu); }
.toast.hata   { --tc: var(--hata); }
.toast.uyari  { --tc: var(--uyari); }
.toast.bilgi  { --tc: var(--bilgi); }

/* Süre çubuğu — demo'da toast'ın altında akar. Kendi kendine kapanan
   bildirimlerde .sureli sınıfıyla açılır (bildirim.js süre yönetir). */
.toast.sureli::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--tc);
  opacity: 0.6;
  transform-origin: left;
  animation: toast-sure 4.2s linear forwards;
}
@keyframes toast-sure { to { transform: scaleX(0); } }

/* ------------------------------------------------ İPUCU
   bildirim.js .ipucu'yu body'ye ekleyip sayfa koordinatı yazar → absolute kalmalı */
.ipucu {
  position: absolute;
  z-index: var(--z-bildirim);
  max-width: 260px;
  padding: 8px 12px;
  border: 1px solid var(--kenar);
  border-radius: var(--r-ic);
  background: var(--kart-2);
  color: var(--metin);
  font-family: var(--yazi-govde);
  font-size: var(--p-115);
  font-weight: 600;
  line-height: 1.4;
  box-shadow: var(--golge);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--gecis-hizli);
}
.ipucu.goster { opacity: 1; }

/* Bootstrap tooltip — Bootstrap CSS'i kaldırıldığı için stilsiz kalıyordu */
.tooltip {
  position: absolute;
  z-index: var(--z-bildirim);
  display: block;
  margin: 0;
  font-family: var(--yazi-govde);
  font-size: var(--p-115);
  line-height: 1.4;
  word-wrap: break-word;
  opacity: 0;
  transition: opacity var(--gecis-hizli);
}
.tooltip.show { opacity: 1; }

.tooltip-inner {
  max-width: 280px;
  padding: 8px 12px;
  border: 1px solid var(--kenar);
  border-radius: var(--r-ic);
  background: var(--kart-2);
  color: var(--metin);
  font-weight: 600;
  text-align: left;
  box-shadow: var(--golge);
}
.tooltip-inner i { color: inherit; }

.tooltip-arrow { display: none; }

/* ------------------------------------------------ POPOVER
   Demo'da doğrudan karşılığı yok → yüzen panel dili (.ac-menu) uygulandı */
.popover {
  position: absolute;
  z-index: var(--z-bildirim);
  max-width: 320px;
  border: 1px solid var(--kenar-2);
  border-radius: 12px;
  background: var(--kart-2);
  box-shadow: var(--golge-2);
  font-family: var(--yazi-govde);
  font-size: var(--p-125);
  color: var(--metin-2);
}
.popover-header {
  padding: 11px 13px;
  margin: 0;
  border-bottom: 1px solid var(--cizgi);
  background: transparent;
  border-radius: 12px 12px 0 0;
  color: var(--metin);
  font-size: var(--p-13);
  font-weight: var(--ag-baslik);
  letter-spacing: var(--iz-baslik);
}
.popover-body { padding: 12px 13px; color: var(--metin-2); }
.popover-arrow { display: none; }

/* ------------------------------------------------ MOBİL */
@media (max-width: 575.98px) {
  .modal-dialog { margin: 16px; }
  .modal-dialog-centered { min-height: calc(100% - 32px); }
  .offcanvas-end, .offcanvas-start { width: 92vw; }
  .bildirim-kap,
  .toast-container {
    top: auto;
    bottom: var(--a-4);
    left: var(--a-4);
    right: var(--a-4);
    width: auto;
  }
  .toast { max-width: none; }
}

/* ================================================================
   KABUK — yan menü + üst bar görünümü
   Yapıyı (grid, sticky, mobil çekmece) parts/duzen.css kurar; bu dosya
   ondan SONRA yüklendiği için kabuğun son sözü buradadır. Değerler
   _tema_denemeleri/04-yeykim-yonetim.html + tema.css'ten alındı.
   ================================================================ */

/* Kabuğa özel ölçüler.
   --ust-yuk token'ı 58px; Aydın üst barı 68px istedi, yalnız kabuk
   içinde yükseltiliyor (marka bloğu da aynı token'ı okur, iki sütunun
   üst çizgisi hizada kalır).
   --menu-pad yan menünün yatay dolgusu; marka taşması ve etkin öge
   çizgisi bu değere bağlı hesaplanır. */
.kabuk {
  --ust-yuk: 68px;
  --menu-pad: 12px;
}
.kabuk.menu-dar { --menu-pad: 9px; }

/* ============================================================ YAN MENÜ */

/* Demo: düz zemin-2, ince ayırıcı. Nova'nın ışık gradyanı kaldırıldı. */
.yan-menu {
  padding: 16px var(--menu-pad) 14px;
  gap: 14px;
  border-right: 1px solid var(--cizgi);
  background: var(--zemin-2);
  box-shadow: none;
}
:root[data-tema="acik"] .yan-menu { background: var(--zemin-2); }

/* Sayfa ilk açılırken etkin alt menü animasyonsuz açılır: hem göz yormaz
   hem de yüksekliği anında kesinleştiği için themes/js/menu.js'in "etkin
   ögeyi görünür alana getir" ölçümü doğru çıkar. Sınıf bir kare sonra
   kaldırılır, kullanıcının kendi tıklamaları animasyonlu kalır. */
.yan-menu.ilk-yukleme .menu-alt-liste { transition: none; }

/* Menü 25+ öge taşıyor; demo scrollbar'ı gizler ama burada ince çubuk
   kalıyor — kaydırma göstergesi olmadan menü sonu görünmüyor. */
.yan-menu::-webkit-scrollbar { width: 5px; }
.yan-menu::-webkit-scrollbar-track { background: transparent; }
.yan-menu::-webkit-scrollbar-thumb { background: var(--kenar-2); border-radius: 3px; }
.yan-menu::-webkit-scrollbar-thumb:hover { background: var(--metin-3); }

/* Marka bloğu üst bar yüksekliğinde; yatay dolgusu üst barla aynı
   (--a-6) ki iki sütunun içeriği aynı hizadan başlasın. */
.marka {
  margin: 0 calc(var(--menu-pad) * -1);
  padding: 0 var(--a-6);
  gap: 11px;
}

.marka-ikon {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: linear-gradient(140deg, var(--vurgu-d1), color-mix(in srgb, var(--vurgu-d1) 55%, var(--mavi)));
  color: var(--vurgu-yazi);
  font-weight: 800;
  font-size: var(--p-15);
  box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--vurgu) 60%, transparent);
}
/* Ajans logosu gradyanın üstünde: tek renk beyaza indirgenir */
.marka-ikon img { object-fit: contain; padding: 7px; filter: brightness(0) invert(1); }

.marka-yazi { display: flex; flex-direction: column; min-width: 0; }
.marka-ad {
  font-family: var(--yazi-baslik);
  font-weight: 700;
  font-size: var(--p-15);
  letter-spacing: var(--iz-baslik);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.marka-alt { font-weight: 800; }

.menu-govde { gap: 14px; }

/* --- menü ögesi --- */
.menu-og {
  gap: 11px;
  padding: 2px 10px;
  border-radius: var(--r-1);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: normal;
  color: var(--metin-2);
}
.menu-og:hover { background: var(--kart-2); color: var(--metin); }
.menu-og:focus-visible { outline: 2px solid var(--vurgu); outline-offset: -2px; }

/* Etkin ögede yazı BEYAZ kalır, rengi taşıyan yalnız ikon ve sol çizgi */
.menu-og.etkin {
  background: color-mix(in srgb, var(--vurgu) 10%, transparent);
  color: var(--metin);
  font-weight: 600;
  letter-spacing: normal;
}
.menu-og.etkin::before {
  left: calc(var(--menu-pad) * -1);
  top: 50%;
  bottom: auto;
  width: 3px;
  height: 17px;
  border-radius: 0 3px 3px 0;
  background: var(--vurgu);
  transform: translateY(-50%);
}

/* İkonlar demo'dan bir tık büyük (Aydın'ın isteği) */
.menu-og .ikon { width: 20px; font-size: 20px; font-weight: 400; opacity: 0.8; }
.menu-og.etkin .ikon { opacity: 1; color: var(--vurgu); }

.menu-og .rozet {
  margin-left: auto;
  padding: 1px 7px;
  border: 0;
  border-radius: var(--hap);
  background: color-mix(in srgb, var(--vurgu) 13%, transparent);
  color: var(--vurgu);
  font-family: var(--yazi-mono);
  font-size: var(--p-10);
  font-weight: 700;
}
.menu-og.etkin .rozet { background: color-mix(in srgb, var(--vurgu) 18%, transparent); }

.menu-og .ok { margin-left: auto; font-size: 13px; opacity: 0.55; color: inherit; }
.menu-og .rozet + .ok { margin-left: 6px; }

/* --- alt menü: sol kılavuz çizgisi + dallar --- */
.menu-alt-ic {
  gap: 1px;
  margin-left: 18px;
  padding: 2px 0 4px 13px;
  border-left: 1px solid var(--kenar);
}

/* Demo 12.5px; Aydın alt bağlantıları büyüttüğü için 13px'te tutuldu */
.menu-alt {
  padding: 6px 10px;
  border-radius: 8px;
  color: var(--metin-3);
  font-size: var(--p-13);
  font-weight: 600;
}
.menu-alt::before {
  left: -13px;
  width: 9px;
  height: 1px;
  background: var(--kenar);
}
.menu-alt:hover { background: var(--kart-2); color: var(--metin); }
.menu-alt:hover::before { width: 9px; background: var(--kenar-2); }
.menu-alt:focus-visible { outline: 2px solid var(--vurgu); outline-offset: -2px; }

.menu-alt.etkin {
  background: color-mix(in srgb, var(--vurgu) 9%, transparent);
  color: var(--vurgu);
  font-weight: 700;
  letter-spacing: normal;
}
.menu-alt.etkin::before { width: 9px; background: var(--vurgu); }
.menu-alt .ikon { font-size: 15px; opacity: 0.8; }

/* Canlı satış nabzı: demo .m-nokta — dolu nokta + dışa açılan halka */
.nokta-canli {
  position: relative;
  margin-left: auto;
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--hata);
  box-shadow: none;
  animation: none;
}
.nokta-canli::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--hata);
  animation: nabiz-canli 2.2s cubic-bezier(0.25, 0.6, 0.3, 1) infinite;
}
@keyframes nabiz-canli {
  0%        { transform: scale(0.5); opacity: 0.9; }
  75%, 100% { transform: scale(1.45); opacity: 0; }
}

/* --- daraltılmış menü (demo'da yok, Nova davranışı korunur) --- */
.menu-btn { display: none; }
.daralt-btn { flex-shrink: 0; }

.kabuk.menu-dar .yan-menu { padding: 16px var(--menu-pad) 14px; overflow: visible; }
.kabuk.menu-dar .marka-yazi,
.kabuk.menu-dar .menu-baslik,
.kabuk.menu-dar .menu-og > span,
.kabuk.menu-dar .menu-og .ok,
.kabuk.menu-dar .menu-og .rozet,
.kabuk.menu-dar .menu-alt-liste { display: none; }

/* ---------------------------------------------------------------
   DAR MENUDE ALT MENULER — UCAN PANEL
   Menu daraltilinca alt menuler tamamen gizleniyordu: Urun Islemleri,
   Raporlar, Ayarlar, E-Ticaret, Veri Export, Entegrasyonlar ve Admin
   gruplari tiklanabilir ama HICBIR SEY acmiyordu (katlama dugmesi gizli
   listeyi acip kapatiyor). Artik ikonun uzerine gelince grup, menunun
   sagina ucan panel olarak aciliyor. Panel yan menunun disina tastigi
   icin .yan-menu dar modda overflow: visible (yukarida).
   --------------------------------------------------------------- */
.kabuk.menu-dar .menu-grup { position: relative; }
.kabuk.menu-dar .menu-og[data-menu-katla] { position: relative; }

/* Grup basliginin uzerinde ya da acilan panelin uzerindeyken goster */
.kabuk.menu-dar .menu-og[data-menu-katla]:hover + .menu-alt-liste,
.kabuk.menu-dar .menu-og[data-menu-katla]:focus-visible + .menu-alt-liste,
.kabuk.menu-dar .menu-alt-liste:hover {
  display: block;
  position: absolute;
  left: calc(100% + 8px);
  top: 0;
  z-index: calc(var(--z-menu) + 5);
  min-width: 218px;
  padding: 7px;
  border: 1px solid var(--kenar-2);
  border-radius: var(--r-2);
  background: var(--yuzey-ust);
  box-shadow: var(--golge-2);
  grid-template-rows: 1fr;          /* katlama animasyonunu atla */
  overflow: visible;
  animation: ucan-panel-gir 140ms cubic-bezier(.2,.8,.3,1);
}

/* Ucan paneldeki alt oge listesi: kilavuz cizgisi ve girinti gerekmiyor */
.kabuk.menu-dar .menu-alt-liste > div,
.kabuk.menu-dar .menu-alt-liste > div > .menu-alt-ic {
  min-height: 0;
  overflow: visible;
  margin-left: 0;
  padding: 0;
  border-left: 0;
}
.kabuk.menu-dar .menu-alt-liste .menu-alt { padding: 7px 11px; font-size: var(--p-13); }
.kabuk.menu-dar .menu-alt-liste .menu-alt::before { content: none; }

/* Panelin ustunde grup adi — dar menude ikon disinda ipucu yok */
.kabuk.menu-dar .menu-alt-liste > div::before {
  content: attr(data-grup);
  display: block;
  padding: 4px 11px 7px;
  border-bottom: 1px solid var(--cizgi);
  margin-bottom: 5px;
  font-size: var(--p-10);
  font-weight: var(--ag-etiket);
  letter-spacing: var(--iz-etiket);
  text-transform: uppercase;
  color: var(--etiket);
  white-space: nowrap;
}

/* Ikon ile panel arasindaki bosluga girince panel kapanmasin */
.kabuk.menu-dar .menu-og[data-menu-katla]::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 0;
  width: 10px;
  height: 100%;
}

@keyframes ucan-panel-gir {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: none; }
}

/* Dokunmatik: hover yok — dar menude gruba dokununca menu genisler
   (JS tarafi menu.js icinde) */
@media (hover: none) {
  .kabuk.menu-dar .menu-og[data-menu-katla]:hover + .menu-alt-liste { display: none; }
}
.kabuk.menu-dar .menu-og { justify-content: center; padding: 9px 0; gap: 0; }
.kabuk.menu-dar .menu-og .ikon { width: auto; font-size: 19px; }
.kabuk.menu-dar .menu-og.etkin::before { height: 21px; }
.kabuk.menu-dar .marka { justify-content: center; padding: 0; }
.kabuk.menu-dar .menu-ayir { margin: 3px 4px; }

/* ============================================================ ÜST BAR */

.ust-bar {
  gap: 10px;
  padding: 0 var(--a-6);
  border-bottom: 1px solid var(--cizgi);
  background: color-mix(in srgb, var(--zemin) 88%, transparent);
  backdrop-filter: var(--bulanik);
  -webkit-backdrop-filter: var(--bulanik);
  box-shadow: none;
}

/* --- arama: demo .ara — hap girdi, sağda kısayol tuşu --- */
/* ⚠ Aynı seçici parts/duzen.css'te de var; bu dosya SONRA yüklendiği için
   kazanan değer burasıdır. Genişlik değişecekse ikisi birlikte güncellenmeli. */
.ust-ara { flex: 1; max-width: 460px; }
.ust-ara input {
  height: 38px;
  padding: 0 58px 0 36px;
  border: 1px solid var(--kenar);
  border-radius: var(--hap);
  background: var(--girdi);
  box-shadow: none;
  color: var(--metin);
  font-size: var(--p-125);
}
.ust-ara input::placeholder { color: var(--metin-3); }
.ust-ara:hover input { border-color: var(--kenar-2); }
/* Demo girdi odağı yalnız kenar rengini değiştirir, halka basmaz */
.ust-ara input:focus {
  outline: none;
  border-color: var(--vurgu);
  background: var(--girdi-odak);
  box-shadow: none;
}
.ust-ara .ara-ikon { left: 14px; font-size: var(--p-14); color: var(--metin-3); }
.ust-ara kbd {
  right: 8px;
  padding: 2px 7px;
  border: 1px solid var(--kenar);
  border-radius: 6px;
  background: var(--kart);
  box-shadow: none;
  color: var(--metin-3);
  font-family: var(--yazi-mono);
  font-size: 10px;
}

.ust-sag { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* --- ikon düğmeleri: demo .u-btn, daire, 38px, ikon 22px (Aydın) --- */
.ust-ikon-btn {
  width: 38px;
  height: 38px;
  border: 1px solid var(--kenar);
  border-radius: 50%;
  background: var(--kart);
  box-shadow: none;
  color: var(--metin-2);
  font-size: 22px;
  transition: color var(--gecis-hizli), border-color var(--gecis-hizli), transform var(--gecis);
}
.ust-ikon-btn:hover {
  color: var(--vurgu);
  border-color: color-mix(in srgb, var(--vurgu) 45%, transparent);
  background: var(--kart);
  transform: translateY(-1px);
}
.ust-ikon-btn:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }

/* Sayaç rozeti: demo .u-rozet — kırmızı hap, zemin renginde halka */
.ust-ikon-btn .sayac {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border: 2px solid var(--zemin);
  border-radius: var(--hap);
  background: var(--hata);
  color: var(--hata-yazi);
  font-family: var(--yazi-mono);
  font-size: 9.5px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

/* --- lisans / kur bilgi çipi: demo .kur — nötr hap --- */
.lisans-blok,
.kur-blok {
  gap: 10px;
  padding: 7px 13px;
  border: 1px solid var(--kenar);
  border-radius: var(--hap);
  background: var(--kart);
  box-shadow: none;
  color: var(--metin-2);
  font-size: var(--p-12);
}
.lisans-blok li,
.kur-blok li { display: flex; align-items: center; gap: 5px; }
.kur-blok b { font-family: var(--yazi-mono); font-weight: 600; color: var(--vurgu); }

/* Lisans çipi yalnız son 7 günde görünür, yani her zaman bir uyarıdır:
   demo .lisans gibi renkli hap olur. Kenar/zemin/nokta currentColor'dan
   türetiliyor — custom.js kalan güne göre satır içi renk basıyor
   (7 gün sarı, 3 gün kırmızı) ve hap o rengin tamamını alıyor. */
.lisans-blok {
  gap: 8px;
  padding: 6px 14px;
  border-color: color-mix(in srgb, currentColor 30%, transparent);
  background: color-mix(in srgb, currentColor 11%, transparent);
  color: var(--uyari);
  font-weight: 700;
  white-space: nowrap;
}
.lisans-blok > i {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: currentColor;
  animation: lisans-nabiz 1.6s ease-in-out infinite;
}
@keyframes lisans-nabiz { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.lisans-blok strong { color: inherit; font-weight: 800; }
.lisans-blok .lisans-tarih { color: inherit; opacity: 0.75; font-weight: 600; }
.lisans-blok a { color: var(--vurgu); font-weight: 700; text-decoration: none; margin-left: 2px; }
.lisans-blok a:hover { text-decoration: underline; }

/* --- kur çipi: demo .kur. Üst bar dar olduğu için tetik artık ikon-only
       (.ust-ikon-btn.kur-btn); bu hap biçimi başka layout'lar için duruyor --- */
.kur-tetik {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 13px;
  border: 1px solid var(--kenar);
  border-radius: var(--hap);
  background: var(--kart);
  color: var(--metin-2);
  font-family: var(--yazi-mono);
  font-size: var(--p-12);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--gecis-hizli), color var(--gecis-hizli);
}
.kur-tetik:hover { border-color: color-mix(in srgb, var(--vurgu) 45%, transparent); color: var(--metin); }
.kur-tetik:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }
.kur-tetik b { color: var(--vurgu); font-weight: 700; }

/* --- tema anahtarı: demo .tema-anahtar — iki ikon tek hapta --- */
.tema-anahtar {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--kenar);
  border-radius: var(--hap);
  background: var(--kart);
}
.tema-anahtar button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: var(--hap);
  background: transparent;
  color: var(--metin-3);
  font-size: 16px;
  cursor: pointer;
  transition: background var(--gecis-hizli), color var(--gecis-hizli);
}
.tema-anahtar button:hover { color: var(--metin); }
.tema-anahtar button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--vurgu) 15%, transparent);
  color: var(--vurgu);
}
.tema-anahtar button:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }

/* --- vurgu seçici: profil menüsünün içinde nokta ızgarası ---
   Ayrı bir header hapı yerine hesap menüsüne alındı; üst bar kalabalıklaşmıyor.
   Nokta kuralları core/vurgu.css'te (.vurgu-secici / .vurgu-nokta). */
.prof-menu { min-width: 232px; }

.prof-vurgu { padding: 4px 14px 10px; }
.prof-vurgu-ad {
  display: block;
  margin-bottom: 9px;
  color: var(--etiket);
  font-size: var(--p-10);
  font-weight: var(--ag-etiket);
  letter-spacing: var(--iz-etiket);
  text-transform: uppercase;
}
/* Menü zemini kart-2 olduğu için etkin noktanın halka boşluğu ona göre */
.prof-vurgu .vurgu-nokta { width: 24px; height: 24px; }
.prof-vurgu .vurgu-nokta.etkin {
  box-shadow: 0 0 0 2px var(--yuzey-ust),
              0 0 0 3px color-mix(in srgb, var(--nokta) 55%, transparent);
}
.prof-vurgu .vurgu-nokta.etkin::after { font-size: var(--p-11); }

/* --- profil düğmesi: demo .profil --- */
.profil-btn {
  gap: 9px;
  padding: 4px 13px 4px 4px;
  border: 1px solid var(--kenar);
  border-radius: var(--hap);
  background: var(--kart);
  box-shadow: none;
}
.profil-btn:hover { border-color: var(--kenar-2); background: var(--kart); }
.profil-btn:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }

.profil-yazi { display: flex; flex-direction: column; text-align: left; min-width: 0; }
.profil-ad { font-size: var(--p-125); font-weight: 700; letter-spacing: normal; line-height: 1.15; }
.profil-rol {
  font-size: var(--p-10);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--metin-3);
  line-height: 1.3;
}

/* Profildeki avatar demo .p-im: vurgu → mor gradyan, 29px */
.profil-btn .avatar {
  width: 29px;
  height: 29px;
  background: linear-gradient(140deg, var(--vurgu-d1), color-mix(in srgb, var(--vurgu-d1) 45%, var(--mor)));
  color: var(--vurgu-yazi);
  font-weight: 800;
  font-size: var(--p-11);
  box-shadow: none;
}

/* ============================================== ÜST BAR AÇILIR MENÜLERİ */

/* Vurgu rengi seçici — kur menüsüyle aynı kabuk, içi nokta ızgarası.
   Noktaların kendi kuralları core/vurgu.css'te. */
.vurgu-menu { width: 196px; padding: 0; overflow: hidden; }
.vurgu-menu .vurgu-secici { padding: 12px 14px; justify-content: flex-start; }

.kur-menu { width: 232px; padding: 0; overflow: hidden; }

.kur-basi {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--cizgi);
  font-size: var(--p-13);
  font-weight: 800;
  color: var(--metin);
}
.kur-basi i { color: var(--vurgu); font-size: var(--p-15); }
.vurgu-basi {
  padding: 12px 14px 0;
  font-size: var(--p-13);
  font-weight: 800;
  color: var(--metin);
}
/* Remix'te çerçevesiz $ ikonu yok; karakterin kendisi kullanılıyor */
.kur-simge { color: var(--vurgu); font-family: var(--yazi-baslik); font-weight: 700; line-height: 1; }

.kur-liste { margin: 0; padding: 5px; list-style: none; }
.kur-liste li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--u-3);
  padding: 8px 11px;
  border-radius: 8px;
  font-size: var(--p-125);
  transition: background var(--gecis-hizli);
}
.kur-liste li:hover { background: color-mix(in srgb, var(--vurgu) 10%, transparent); }
.kur-ad { display: flex; align-items: center; gap: 9px; color: var(--metin-2); font-weight: 600; }
.kur-simge {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--vurgu) 13%, transparent);
  color: var(--vurgu);
  font-family: var(--yazi-mono);
  font-size: var(--p-13);
  font-weight: 700;
}
.kur-liste li:hover .kur-simge { background: color-mix(in srgb, var(--vurgu) 20%, transparent); }

.kur-btn i { font-size: 22px; }
/* Buton zaten daire; simgenin kendi halkası iç içe iki çember gösteriyordu */
.kur-btn .kur-simge {
  width: auto;
  height: auto;
  background: none;
  color: inherit;
  font-family: var(--yazi-baslik);
  font-size: 20px;
  font-weight: 700;
}
.kur-btn:hover .kur-simge { color: var(--vurgu); }
.kur-liste b { font-family: var(--yazi-mono); font-weight: 600; color: var(--metin); font-variant-numeric: tabular-nums; }

/* --- bildirim / hatırlatma menüsü: demo .bild-menu --- */
.bildirim-menu { width: 340px; padding: 0; overflow: hidden; }

.bildirim-basi {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--cizgi);
  font-size: var(--p-13);
  font-weight: 800;
  color: var(--metin);
}
.bildirim-basi.kritik { color: var(--hata); }
.bildirim-basi.kritik i { font-size: var(--p-14); }

.baglanti-noktasi {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--olumlu);
  box-shadow: 0 0 8px color-mix(in srgb, var(--olumlu) 60%, transparent);
}

.bildirim-oku {
  margin-left: auto;
  border: none;
  background: none;
  color: var(--vurgu);
  font-family: inherit;
  font-size: var(--p-11);
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}
.bildirim-oku:hover { text-decoration: underline; }

.bildirim-govde { max-height: 340px; overflow-y: auto; }

/* SignalR listesi Bootstrap sınıflarıyla basılıyor; demo .bild-s satırına
   uydurulur: köşesiz, tam genişlik, ince ayırıcı, okunmamış = .bg-light */
.bildirim-govde .dropdown-item,
.bildirim-govde .notification-item {
  border-radius: 0;
  padding: 11px 14px;
  white-space: normal;
}
.bildirim-govde .notification-item + .notification-item { border-top: 1px solid var(--cizgi); }
.bildirim-govde .notification-item:hover { background: color-mix(in srgb, var(--vurgu) 10%, transparent); }
/* .bg-light utils'te !important; okunmamış satırın hover'ı için gerekli */
.bildirim-govde .notification-item.bg-light:hover { background: color-mix(in srgb, var(--vurgu) 14%, transparent) !important; }

.bildirim-dibi { padding: 8px; border-top: 1px solid var(--cizgi); }
.bildirim-dibi .btn { width: 100%; }

.bildirim-bos { padding: 34px 16px; text-align: center; color: var(--metin-3); }
.bildirim-bos i { font-size: 30px; opacity: .5; }
.bildirim-bos p { margin: 9px 0 0; font-size: var(--p-13); }

/* --- panel geçişi --- */
.panel-gecis-menu { width: 330px; max-height: 480px; padding: 0; overflow: hidden; }
.panel-gecis-basi { padding: 11px; border-bottom: 1px solid var(--cizgi); background: var(--cam); }
.panel-gecis-ust { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; font-size: var(--p-13); }
.panel-gecis-liste { max-height: 380px; overflow-y: auto; padding: 5px; }
.panel-gecis-liste form { margin: 0; }
.panel-gecis-liste .dropdown-item { font-size: var(--p-125); }
.panel-gecis-liste .dropdown-item strong { font-family: var(--yazi-mono); color: var(--metin-3); }
.panel-gecis-liste .dropdown-item.active strong { color: inherit; }

/* --- dil --- */
.bayrak { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.dil-dropdown .ust-ikon-btn { overflow: hidden; padding: 0; }
.dil-dropdown .ust-ikon-btn .bayrak { width: 24px; height: 24px; }

/* ==================================================== VEKİL / DİP / ARAÇ */

.vekil-serit {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: var(--z-bildirim);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  max-width: calc(100vw - 36px);
  padding: 10px 15px;
  border: 1px solid color-mix(in srgb, var(--uyari) 34%, transparent);
  border-radius: var(--r-2);
  background: var(--yuzey-ust);
  box-shadow: var(--golge-2);
  color: var(--metin);
  font-size: var(--p-13);
  font-weight: 600;
}
.vekil-serit > i { color: var(--uyari); font-size: var(--p-16); }

.dip-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--u-3);
  flex-wrap: wrap;
  padding: 14px var(--a-6);
  margin-top: auto;
  border-top: 1px solid var(--cizgi);
  color: var(--metin-3);
  font-size: var(--p-12);
}
.dip-bar a { color: var(--metin-3); display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.dip-bar a:hover { color: var(--vurgu); }

.yukari-btn {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: var(--z-ust);
  width: 40px;
  height: 40px;
  display: none;
  place-items: center;
  border: 1px solid var(--kenar);
  border-radius: 50%;
  background: var(--kart);
  color: var(--metin-2);
  font-size: var(--p-16);
  cursor: pointer;
  box-shadow: var(--golge);
  transition: color var(--gecis-hizli), border-color var(--gecis-hizli), transform var(--gecis);
}
.yukari-btn.goster { display: grid; }
.yukari-btn:hover {
  color: var(--vurgu);
  border-color: color-mix(in srgb, var(--vurgu) 45%, transparent);
  transform: translateY(-2px);
}
.yukari-btn:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }

/* ================================================ IFRAME KATMANI */
/* Sipariş detay / sipariş ekle / fatura listesi tam ekran iframe katmanı.
   Yapısal kuralları assets/css/custom.css'te; burada yalnızca görünüm.
   İSTİSNA — ham renk: örtü perdesi iki temada da KOYU olmak zorunda,
   token'a bağlanırsa açık temada beyazlar. Demo .ortu da #000 kullanıyor. */
.overlay {
  background: color-mix(in srgb, #000 62%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
:root[data-tema="acik"] .overlay { background: color-mix(in srgb, #0E1828 45%, transparent); }

.iframe-container { background: var(--zemin) !important; }
.iframe-container iframe { background: var(--zemin); }

.close-iframe {
  top: 1px !important;
  right: 1px !important;
  padding: 8px 15px !important;
  border-radius: var(--r-1) !important;
  background: var(--hata) !important;
  color: var(--hata-yazi) !important;
  font-family: var(--yazi-govde);
  font-size: var(--p-13) !important;
  font-weight: 700;
  box-shadow: none !important;
  transition: var(--gecis);
}
.close-iframe:hover { background: var(--hata) !important; filter: brightness(1.08); transform: translateY(-1px); }

/* ================================================ HIZLI ARAMA ÖRTÜSÜ */

#searchOverlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 88px;
  background: color-mix(in srgb, #000 62%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: ortu-belir 0.18s ease;
}
:root[data-tema="acik"] #searchOverlay { background: color-mix(in srgb, #0E1828 45%, transparent); }

#searchOverlay .search-results {
  display: flex;
  flex-direction: column;
  width: 92%;
  max-width: 660px;
  max-height: 72vh;
  overflow: hidden;
  border: 1px solid var(--kenar-2);
  border-radius: var(--r-buyuk);
  background: var(--kart);
  box-shadow: var(--golge-2);
  animation: modal-gir 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
}

#searchOverlay .search-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 18px;
  border-bottom: 1px solid var(--cizgi);
}
#searchOverlay .search-header h5 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-family: var(--yazi-baslik);
  font-size: var(--p-15);
  font-weight: var(--ag-baslik);
  letter-spacing: var(--iz-baslik);
  color: var(--metin);
}
#searchOverlay .search-count {
  padding: 2px 8px;
  border-radius: var(--hap);
  background: color-mix(in srgb, var(--vurgu) 13%, transparent);
  color: var(--vurgu);
  font-family: var(--yazi-mono);
  font-size: var(--p-11);
  font-weight: 700;
}

#closeSearch {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--kenar);
  border-radius: 9px;
  background: transparent;
  color: var(--metin-3);
  font-size: var(--p-16);
  cursor: pointer;
  transition: color var(--gecis-hizli), border-color var(--gecis-hizli), background var(--gecis-hizli);
}
#closeSearch:hover {
  background: color-mix(in srgb, var(--hata) 11%, transparent);
  border-color: color-mix(in srgb, var(--hata) 45%, transparent);
  color: var(--hata);
}
#closeSearch:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }

#resultsContent { flex: 1; padding: 14px; overflow-y: auto; }

#resultsContent .search-loading,
#resultsContent .search-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: var(--metin-3);
  text-align: center;
}
#resultsContent .search-loading .spinner {
  width: 38px;
  height: 38px;
  margin-bottom: 12px;
  border: 3px solid var(--kenar-2);
  border-top-color: var(--vurgu);
  border-radius: 50%;
  animation: donme 0.8s linear infinite;
}
#resultsContent .search-empty i { display: block; margin-bottom: 14px; font-size: 44px; opacity: .45; }

#resultsContent .search-list { list-style: none; margin: 0; padding: 0; }
#resultsContent .search-item {
  margin-bottom: 8px;
  border: 1px solid var(--kenar);
  border-radius: var(--r-2);
  background: var(--kart-2);
  overflow: hidden;
  transition: border-color var(--gecis), background var(--gecis), transform var(--gecis);
}
#resultsContent .search-item:hover {
  border-color: color-mix(in srgb, var(--vurgu) 45%, transparent);
  background: color-mix(in srgb, var(--vurgu) 8%, transparent);
  transform: translateX(3px);
}
#resultsContent .search-item-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  color: var(--metin);
  text-decoration: none;
}

#resultsContent .search-item-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: color-mix(in srgb, var(--vurgu) 14%, transparent);
  color: var(--vurgu);
  font-size: var(--p-16);
  transition: background var(--gecis);
}
#resultsContent .search-item:hover .search-item-icon { background: color-mix(in srgb, var(--vurgu) 22%, transparent); }

#resultsContent .search-item-content { flex: 1; min-width: 0; }

#resultsContent .search-item-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--yazi-mono);
  font-size: var(--p-13);
  font-weight: 700;
  color: var(--metin);
  line-height: 1.35;
}

#resultsContent .search-item-badge {
  padding: 2px 8px;
  border-radius: var(--hap);
  border: 0;
  background: var(--cam-2);
  color: var(--metin-2);
  font-family: var(--yazi-govde);
  font-size: var(--p-11);
  font-weight: 700;
  white-space: nowrap;
}

#resultsContent .search-item-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 3px;
  color: var(--metin-3);
  font-size: var(--p-115);
}
#resultsContent .search-item-meta span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
#resultsContent .search-item-meta i { font-size: var(--p-13); opacity: .7; }
#resultsContent .search-item-meta span:first-child {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#resultsContent .search-item-amount {
  margin-left: auto;
  flex-shrink: 0;
  font-family: var(--yazi-mono);
  font-size: var(--p-14);
  font-weight: 700;
  color: var(--metin);
  font-variant-numeric: tabular-nums;
}
#resultsContent .search-item:hover .search-item-amount { color: var(--vurgu); }

/* ==================================================== DUYARLI */

@media (max-width: 1279.98px) {
  .lisans-blok { display: none; }
}

@media (max-width: 1099.98px) {
  .kilit-btn, .tam-ekran-btn { display: none; }
}

@media (max-width: 991.98px) {
  .menu-btn { display: grid; }
  .daralt-btn { display: none; }
  .dip-sag { display: none; }
  .ust-bar { gap: 8px; }
  .ust-ara { max-width: none; }
  .ust-sag { gap: 7px; }
  .profil-yazi { display: none; }
  .profil-btn { padding: 4px; }
  /* Mobil çekmecede yan menü opak durur */
  .yan-menu { background: var(--zemin-2); }
}

@media (max-width: 575.98px) {
  .ust-ara { display: none; }
  .ust-bar { gap: 6px; }
  /* Dokunma hedefi büyütülür; üst bar dolu olduğu için boşluk daraltılır */
  .ust-ikon-btn { width: 40px; height: 40px; }
  .ust-sag { gap: 4px; }
  .vekil-serit { left: 12px; right: 12px; bottom: 12px; }
  .bildirim-menu,
  .panel-gecis-menu { width: min(320px, calc(100vw - 24px)); }
  #searchOverlay { padding-top: 20px; }
  #resultsContent .search-item-link { flex-wrap: wrap; }
  #resultsContent .search-item-amount { margin-left: 48px; margin-top: 2px; }
  #resultsContent .search-item-meta { gap: 9px; }
}

/* Sayfaların hâlâ kullandığı, karşılığı olmayan bileşenler.
   Velzon'dan devralınan kalıplar tema diliyle yeniden yazıldı.
   Değerlerin kaynağı: _tema_denemeleri/tema.css + demo HTML'leri. */

.btn-outline-info { background: none; border-color: var(--bilgi); color: var(--bilgi); }
.btn-outline-info:hover { background: var(--bilgi-sis); border-color: var(--bilgi); color: var(--bilgi); }

.btn-outline-dark { background: none; border-color: var(--kenar-2); color: var(--metin); }
.btn-outline-dark:hover { background: var(--cam-2); border-color: var(--metin-3); color: var(--metin); }

.btn-outline-light { background: none; border-color: var(--kenar); color: var(--metin-2); }
.btn-outline-light:hover { background: var(--cam); border-color: var(--kenar-2); color: var(--metin); }

/* İkonu ayrı kutuda taşıyan buton — hap köşeye hizalandı */
.btn-label {
  position: relative;
  padding-left: 44px;
}
.btn-label .label-icon {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 34px;
  display: grid;
  place-items: center;
  border-right: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  /* Dolgu butonda koyu film: gölge rengi zaten iki temada da doğru yönde */
  background: color-mix(in srgb, var(--golge-renk) 14%, transparent);
  border-radius: var(--hap) 0 0 var(--hap);
  font-size: var(--p-14);
}
.btn-label.btn-sm { padding-left: 38px; }
.btn-label.btn-sm .label-icon { width: 30px; font-size: var(--p-13); }

.btn-group-sm > .btn { min-height: var(--kontrol-yuk-sm); padding: 0 11px; font-size: var(--p-12); }
.btn-group-sm > .btn:first-child { border-radius: var(--hap) 0 0 var(--hap); }
.btn-group-sm > .btn:last-child { border-radius: 0 var(--hap) var(--hap) 0; }

/* Kart/tablo içindeki yuvarlak ikon rozeti.
   Zemini bg-*-subtle yardımcılarıyla ezilebilsin diye sade bırakıldı. */
.avatar-title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--vurgu-sis);
  color: var(--vurgu);
  font-weight: var(--ag-veri);
  box-shadow: var(--ic-isik);
}

/* .avatar / .avatar-sm / .avatar-lg duzen.css'te; eksik kademeler burada */
.avatar-xs { width: 20px; height: 20px; font-size: var(--p-10); }
.avatar-md { width: 38px; height: 38px; font-size: var(--p-14); }
.avatar-xl { width: 56px; height: 56px; font-size: var(--p-20); }
.avatar-xs, .avatar-md, .avatar-xl {
  display: grid;
  place-items: center;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--cam-2);
  color: var(--metin-2);
}

.form-check-inline { display: inline-flex; align-items: center; gap: var(--u-2); margin-right: var(--u-4); }

.form-switch-success .form-check-input:checked { background: var(--olumlu-sis); border-color: var(--olumlu); }
.form-switch-success .form-check-input:checked::after { background: var(--olumlu); box-shadow: 0 1px 2px var(--golge-renk); }
.form-switch-danger .form-check-input:checked { background: var(--hata-sis); border-color: var(--hata); }
.form-switch-danger .form-check-input:checked::after { background: var(--hata); box-shadow: 0 1px 2px var(--golge-renk); }
.form-switch-warning .form-check-input:checked { background: var(--uyari-sis); border-color: var(--uyari); }
.form-switch-warning .form-check-input:checked::after { background: var(--uyari); box-shadow: 0 1px 2px var(--golge-renk); }

.accordion-header { margin: 0; }
.accordion-collapse:not(.show) { display: none; }

/* .alert ve renk varyantlari rozet.css'te; yalnizca eksik olanlar burada */
.alert-light { background: var(--cam); border-color: var(--kenar); color: var(--metin-2); }
.alert-dark { background: var(--yuzey-2); border-color: var(--kenar-2); color: var(--metin); }
.alert .btn-close { margin-left: auto; flex-shrink: 0; }

.display-1 { font-family: var(--yazi-baslik); font-size: 56px; font-weight: var(--ag-baslik); letter-spacing: -.04em; line-height: 1.05; }
.display-2 { font-family: var(--yazi-baslik); font-size: 48px; font-weight: var(--ag-baslik); letter-spacing: -.035em; line-height: 1.08; }
.display-3 { font-family: var(--yazi-baslik); font-size: 42px; font-weight: var(--ag-baslik); letter-spacing: var(--iz-baslik-xl); line-height: 1.1; }
.display-4 { font-family: var(--yazi-baslik); font-size: 36px; font-weight: var(--ag-baslik); letter-spacing: var(--iz-baslik-xl); line-height: 1.12; }
.display-5 { font-family: var(--yazi-baslik); font-size: 30px; font-weight: var(--ag-baslik); letter-spacing: var(--iz-baslik-xl); line-height: 1.15; }
.display-6 { font-family: var(--yazi-baslik); font-size: 26px; font-weight: var(--ag-baslik); letter-spacing: var(--iz-baslik); line-height: 1.2; }

.nowrap, .text-nowrap { white-space: nowrap; }

.ri-spin { display: inline-block; animation: donme 1.1s linear infinite; }

/* Velzon dalga efekti kaldirildi; sinif kalintisi gorunumu bozmasin */
.waves-effect, .waves-light { position: relative; overflow: hidden; }

.ratio { position: relative; width: 100%; }
.ratio::before { content: ''; display: block; padding-top: var(--oran, 56.25%); }
.ratio > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.ratio-16x9 { --oran: 56.25%; }
.ratio-4x3 { --oran: 75%; }
.ratio-1x1 { --oran: 100%; }

/* ---------------------------------------------------------------
   SAYFA BAŞLIĞI — demo `.arac` + `h1`
   Demo manşeti 21px/800/-.015em ve YANINDA renk kuralı YOK; başlık
   sade duruyor, karakteri punto ve sıkı yerleşim taşıyor.
   ⚠ Eski kural vendor/kopru.css'te ve o dosya bundan SONRA yükleniyor;
   ezebilmek için sınıf iki kez yazılarak özgüllük bir kademe artırıldı.
   kopru.css demo'ya çekildiğinde bu blok silinebilir.
   --------------------------------------------------------------- */
.page-title-box.page-title-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.page-title-box.page-title-box::before { content: none; }

/* Başlıklar cümle düzenine dil dosyalarında çevrildi.
   CSS ile (text-transform + ::first-letter) denendi ve iki yerden bozuldu:
   kısaltmalar eziliyordu (API → api) ve başlıkta ikon önde olduğu için
   ::first-letter ilk harfi büyütemiyordu ("e-ticaret raporlar"). */
.page-title-box.page-title-box h4,
.page-title-box.page-title-box h5 {
  position: relative;
  margin: 0;
  padding-left: 0;
  font-family: var(--yazi-baslik);
  font-size: var(--p-21);
  font-weight: var(--ag-baslik);
  letter-spacing: var(--iz-baslik);
  line-height: 1.2;
  color: var(--metin);
}
/* Başlığın yanındaki 3px'lik renk çubuğu demo'da yok */
.page-title-box.page-title-box h4::before,
.page-title-box.page-title-box h5::before { content: none; }

.page-title-box.page-title-box h4 > i,
.page-title-box.page-title-box h5 > i {
  font-size: 0.68em;
  color: var(--metin-3);
  vertical-align: 1px;
}

/* Demo `.tarih` — başlığın yanındaki sessiz bağlam satırı */
.page-title-box .sayfa-not,
.page-title-box .text-muted { font-size: var(--p-12); color: var(--metin-3); }
.page-title-box .sayfa-not b { color: var(--metin-2); font-weight: 600; }

@media (max-width: 575.98px) {
  .page-title-box.page-title-box h4,
  .page-title-box.page-title-box h5 { font-size: var(--p-18); }
}

/* ---------------------------------------------------------------
   BOŞ DURUM — demo `.bos` / `.bos-im` / `.bos-ad` / `.bos-not`
   Sınıf adları Nova'nın (.bos-durum-*); değerler demo'dan.
   --------------------------------------------------------------- */
.bos-durum {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--u-2);
  padding: 30px var(--u-3);
  text-align: center;
}
.bos-durum-ikon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--u-1);
  border: 0;
  border-radius: var(--r-buyuk);
  background: color-mix(in srgb, var(--metin-3) 10%, transparent);
  box-shadow: none;
  color: var(--metin-3);
  font-size: var(--p-24);
}
.bos-durum-ad {
  font-family: var(--yazi-baslik);
  font-size: var(--p-14);
  font-weight: var(--ag-baslik);
  letter-spacing: var(--iz-baslik);
  color: var(--metin);
}
.bos-durum-not {
  font-size: var(--p-125);
  color: var(--metin-3);
  max-width: 34ch;
  line-height: 1.45;
}
/* Demo vitrinindeki çerçeveli hali — kart içinde değil, tek başına duran boşluk */
.bos-durum.cerceveli {
  border: 1.5px dashed var(--kenar);
  border-radius: var(--r);
}

/* ---------------------------------------------------------------
   İSKELET (yükleniyor) — demo `.iskelet` / `.isk-satir` / `.isk`
   Bootstrap `.placeholder` ailesi de aynı parıltıyı kullanır.
   --------------------------------------------------------------- */
.iskelet { display: flex; flex-direction: column; gap: var(--a-3); padding: 6px 0; }
.isk-satir { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--a-3); align-items: center; }

.isk,
.placeholder {
  display: block;
  border-radius: var(--u-2);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--metin-3) 10%, transparent) 25%,
    color-mix(in srgb, var(--metin-3) 18%, transparent) 42%,
    color-mix(in srgb, var(--metin-3) 10%, transparent) 60%);
  background-size: 220% 100%;
  animation: parla 1.4s ease infinite;
  /* Placeholder metni görünmesin */
  color: transparent;
  user-select: none;
}
@keyframes parla { to { background-position: -120% 0; } }

.isk.yuvarlak { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; }
.isk.satir-u { height: 12px; width: 72%; }
.isk.satir-k { height: 10px; width: 46%; margin-top: 6px; }

/* Bootstrap uyumu: .placeholder-glow parıltıyı zaten .placeholder taşıyor */
.placeholder-glow .placeholder { animation: parla 1.4s ease infinite; }
.placeholder-wave .placeholder { animation: parla 1.4s ease infinite; }
.placeholder.rounded-circle { border-radius: 50%; }

@media (prefers-reduced-motion: reduce) {
  .isk, .placeholder, .placeholder-glow .placeholder, .placeholder-wave .placeholder { animation: none; }
}

/* ---------------------------------------------------------------
   ZAMAN ÇİZELGESİ — demo `.zaman` / `.z-adim` (06-siparis-detay.html)
   Durumlar: .oldu (tamamlandı) · .aktif (şu an) · .bekli (sırada)
   --------------------------------------------------------------- */
.zaman { display: flex; flex-direction: column; }

.z-adim {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  padding-bottom: 20px;
}
.z-adim:last-child { padding-bottom: 2px; }

/* Noktaları birleştiren dikey çizgi */
.z-adim::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 24px;
  bottom: 2px;
  width: 2px;
  border-radius: 2px;
  background: var(--cizgi-2);
}
.z-adim.oldu::before { background: color-mix(in srgb, var(--yesil) 45%, transparent); }
.z-adim:last-child::before { display: none; }

.z-nokta {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--kenar-2);
  background: var(--kart);
  color: var(--olumlu-yazi);
  font-size: var(--p-11);
  line-height: 1;
}
.z-adim.oldu .z-nokta { border-color: var(--yesil); background: var(--yesil); }
.z-adim.aktif .z-nokta {
  position: relative;
  border-color: var(--vurgu);
  background: var(--vurgu);
  color: var(--vurgu-yazi);
}
/* Şu anki adımda genişleyip sönen halka */
.z-adim.aktif .z-nokta::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--vurgu);
  animation: nabiz-halka 2.2s cubic-bezier(.25, .6, .3, 1) infinite;
}
@keyframes nabiz-halka {
  0%        { transform: scale(.5); opacity: .9; }
  75%, 100% { transform: scale(1.45); opacity: 0; }
}

.z-ad { font-size: var(--p-13); font-weight: var(--ag-baslik); line-height: 1.3; color: var(--metin); }
.z-adim.bekli .z-ad { color: var(--metin-3); font-weight: var(--ag-veri); }
.z-not { font-size: var(--p-115); color: var(--metin-3); margin-top: 1px; }
.z-saat { font-family: var(--yazi-mono); font-size: var(--p-10); color: var(--metin-3); }

@media (prefers-reduced-motion: reduce) {
  .z-adim.aktif .z-nokta::after { animation: none; opacity: 0; }
}

/* ---------------------------------------------------------------
   API ANAHTARI PANELİ — VeriExport'ta üç sayfa aynı kalıbı kullanıyor
   (Katalog, Xml, ExcelXml). Önce her sayfa kendi içinde ve sabit renkle
   tanımlıyordu: linear-gradient(--vurgu -> #2c3e6e). Koyu temada doygun
   blok göz alıyordu, lacivert uç renk seçicisiyle de dönmüyordu.
   Artık tek kaynak burada ve vurgudan türüyor: kart yüzeyi üstünde ince
   bir vurgu yıkaması + vurgu kenarı. Anahtar mono ve vurgu renginde.
   --------------------------------------------------------------- */
.api-key-box {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 13px var(--u-3) var(--u-3);
  border: 1px solid color-mix(in srgb, var(--vurgu) 30%, transparent);
  border-radius: var(--r);
  background: linear-gradient(135deg,
              color-mix(in srgb, var(--vurgu) 10%, var(--kart)),
              var(--kart) 65%);
  box-shadow: var(--ic-isik), var(--golge-1);
  color: var(--metin);
}

/* Başlık şeridi kart başlığıyla aynı yükseklikte: yanındaki kartla hizalanır */
.api-key-box .kart-basi-satir {
  padding-bottom: 13px;
  border-bottom: 1px solid color-mix(in srgb, var(--vurgu) 20%, transparent);
}
.api-key-box .kart-basi-ad i { color: var(--vurgu); }

/* Girdi zemini/kenarı temanın kendi kuralından gelir; burada yalnız
   anahtarın okunurluğu: mono dizgi ve vurgu rengi. */
.api-key-box .form-control {
  font-family: var(--yazi-mono);
  color: var(--vurgu);
}

.api-key-box .input-group { margin-top: auto; }

.api-key-not {
  margin: 9px 0 0;
  font-size: var(--p-115);
  color: var(--metin-3);
}
.api-key-not i { color: var(--uyari); }

/* ================================================================
   SWEETALERT2 — panelin onay diyaloğu
   Kaynak: _tema_denemeleri/tema.css → .ortu + .onay-kutu + .btn ailesi
   Kutu modalla aynı dili konuşur: aynı örtü, aynı yüzey (--kart),
   bölümlerin kendi zemini yok, butonlar demo'nun hap butonları.
   ================================================================ */

.swal2-container { z-index: 20000; }

/* Örtü: demo .ortu (iki temada da aynı film) */
.swal2-container.swal2-backdrop-show,
.swal2-container.swal2-backdrop-show > .swal2-container {
  background: color-mix(in srgb, #000 62%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.swal2-container.swal2-backdrop-show { padding: 6vh 16px 16px; }
/* Demo açık temada da aynı örtüyü kullanır; seçici korunuyor. */
:root[data-tema="acik"] .swal2-container.swal2-backdrop-show { background: color-mix(in srgb, #000 62%, transparent); }

/* Kutu: demo .onay-kutu — 420px, 18px yarıçap, tek yüzey.
   Genişlik "width" ile veriliyor ki sayfa Swal.fire({width:'600px'}) diyince
   satır içi değer kazansın (max-width'e 420 yazılırsa o istek eziliyor ve
   içerik — ör. API cevabı bloğu — sıkışıyordu). */
.swal2-popup {
  width: min(420px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  padding: 26px 26px 22px;
  border: 1px solid var(--kenar-2);
  border-radius: 18px;
  background: var(--kart);
  box-shadow: var(--golge-2);
  font-family: var(--yazi-govde);
  color: var(--metin);
}

/* ⚠ Giriş animasyonu YALNIZ kapanmıyorken uygulanır.
   Koşulsuz yazıldığında SweetAlert'in .swal2-hide animasyonunu eziyordu
   (bu dosya sonra yükleniyor, aynı özgüllük): kutu kapanma animasyonunu
   hiç oynatmıyor, SweetAlert de animationend beklediği için kutuyu DOM'dan
   kaldırmıyordu. Ekranda örtü kalkıyor ama kutu duruyordu — dışarı tıklama
   ve Esc "çalışmıyor" görünüyordu. */
.swal2-popup:not(.swal2-hide) {
  animation: swal-gir 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes swal-gir { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }

.swal2-title {
  padding: 0;
  margin: 0 0 6px;
  font-family: var(--yazi-baslik);
  font-size: var(--p-18);
  font-weight: var(--ag-baslik);
  letter-spacing: var(--iz-baslik-xl);
  line-height: 1.3;
  color: var(--metin);
}

.swal2-html-container {
  margin: 0;
  padding: 0;
  font-size: var(--p-13);
  line-height: 1.55;
  color: var(--metin-2);
}
/* Demo: onay metnindeki vurgulu değer mono ve tam kontrast */
.swal2-html-container b,
.swal2-html-container strong {
  color: var(--metin);
  font-family: var(--yazi-mono);
  font-weight: var(--ag-veri);
}

/* Sayfalar Swal içeriğini elle kuruyor ve API cevabı gibi blokları
   <pre style="background:#f5f5f5"> ile basıyor (Kargo.cshtml, EFatura.cshtml).
   Sabit açık zemin koyu temada okunmuyordu; satır içi stili ezip tema
   rengine çekiyoruz — sayfaları tek tek düzeltmek yerine kural burada. */
.swal2-popup pre {
  margin: 8px 0 0;
  padding: 11px 12px !important;
  border: 1px solid var(--kenar) !important;
  border-radius: var(--r-2) !important;
  background: var(--girdi) !important;
  color: var(--metin-2) !important;
  font-family: var(--yazi-mono);
  font-size: var(--p-12);
  line-height: 1.5;
  text-align: left;
  white-space: pre-wrap;
  word-break: break-word;
}
.swal2-popup pre code { background: none; color: inherit; padding: 0; }

/* ------------------------------------------------ BUTONLAR
   Demo dili: birincil = vurgu gradyanı · vazgeç = nötr (.btn-golge)
   · yıkıcı = kırmızı dolgu. Hepsi hap. */
.swal2-actions {
  margin: 20px 0 0;
  gap: var(--u-2);
  justify-content: center;
}

.swal2-styled {
  margin: 0;
  padding: 9px 18px;
  height: auto;
  border: 1px solid transparent;
  border-radius: var(--hap);
  font-family: var(--yazi-govde);
  font-size: var(--p-125);
  font-weight: var(--ag-veri);
  box-shadow: none;
  transition: filter var(--gecis-hizli), background var(--gecis-hizli), border-color var(--gecis-hizli), color var(--gecis-hizli);
}
.swal2-styled:focus { box-shadow: none; outline: 2px solid var(--vurgu); outline-offset: 2px; }

/* SweetAlert çağrılarının çoğu confirmButtonColor/cancelButtonColor ile satır içi
   renk veriyor (43 dosyada). Satır içi stil normal kuralı ezdiği için butonlar
   burada !important ile tema tonuna çekiliyor. */
.swal2-styled.swal2-confirm {
  background: var(--vurgu-gradyan) !important;
  border-color: transparent !important;
  color: var(--vurgu-yazi) !important;
  box-shadow: var(--ic-isik-guclu);
}
.swal2-styled.swal2-confirm:hover { transform: none; filter: brightness(1.08); }

/* Vazgeç nötr kalır — demo onay diyaloğunda "Vazgeç" .btn-golge'dir */
.swal2-styled.swal2-cancel {
  background: var(--kart-2) !important;
  border-color: var(--kenar-2) !important;
  color: var(--metin-2) !important;
}
.swal2-styled.swal2-cancel:hover { transform: none; color: var(--metin) !important; }

/* Yıkıcı eylem (deny) demo .btn-dolgu --c: var(--kirmizi) */
.swal2-styled.swal2-deny {
  background: linear-gradient(135deg,
              color-mix(in srgb, var(--hata) var(--d1), #000),
              color-mix(in srgb, var(--hata) var(--d2), #000)) !important;
  border-color: transparent !important;
  color: var(--hata-yazi) !important;
  box-shadow: var(--ic-isik-guclu);
}
.swal2-styled.swal2-deny:hover { transform: none; filter: brightness(1.08); }

/* Silme onaylarında (.swal-hata) onay butonu da kırmızı dolguya döner */
.swal2-popup.swal-hata .swal2-styled.swal2-confirm {
  background: linear-gradient(135deg,
              color-mix(in srgb, var(--hata) var(--d1), #000),
              color-mix(in srgb, var(--hata) var(--d2), #000)) !important;
  color: var(--hata-yazi) !important;
  box-shadow: var(--ic-isik-guclu);
}

/* ------------------------------------------------ GİRDİLER
   Demo .girdi: DÜZ kenar, gölge yok, odakta yalnızca renk değişir */
.swal2-input,
.swal2-textarea,
.swal2-select,
.swal2-file {
  height: var(--kontrol-yuk);
  margin: var(--u-3) 0 0;
  padding: 0 13px;
  width: 100%;
  background: var(--girdi);
  border: 1px solid var(--kenar-2);
  border-radius: var(--r-ic);
  color: var(--metin);
  font-family: var(--yazi-govde);
  font-size: var(--p-13);
  font-weight: 500;
  box-shadow: none;
  outline: none;
  transition: border-color var(--gecis-hizli), background var(--gecis-hizli);
}
.swal2-textarea { height: auto; min-height: 84px; padding: 10px 13px; line-height: 1.55; resize: vertical; }
.swal2-input:hover,
.swal2-textarea:hover,
.swal2-select:hover { border-color: color-mix(in srgb, var(--metin-3) 45%, transparent); }
.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus {
  outline: none;
  border-color: var(--vurgu);
  background: var(--girdi);
  box-shadow: none;
}
.swal2-input::placeholder, .swal2-textarea::placeholder { color: var(--metin-3); }

/* Demo .fv-ad: versal mikro etiket */
.swal2-input-label {
  justify-content: flex-start;
  color: var(--metin-3);
  font-size: var(--p-10);
  font-weight: var(--ag-etiket);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.swal2-validation-message {
  margin-top: var(--u-2);
  padding: 9px 13px;
  border-radius: var(--r-ic);
  background: var(--hata-sis);
  color: var(--hata);
  font-size: var(--p-115);
  font-weight: 600;
}
.swal2-validation-message::before { display: none; }

/* Demo .modal-kapat: nötr çerçeve, hover'da kırmızı */
.swal2-close {
  width: 30px;
  height: 30px;
  border: 1px solid var(--kenar);
  border-radius: var(--r-1);
  background: transparent;
  color: var(--metin-3);
  font-size: 22px;
  transition: color var(--gecis-hizli), border-color var(--gecis-hizli), background var(--gecis-hizli);
}
.swal2-close:hover {
  color: var(--hata);
  border-color: color-mix(in srgb, var(--hata) 40%, transparent);
  background: color-mix(in srgb, var(--hata) 9%, transparent);
}
.swal2-close:focus { box-shadow: none; outline: 2px solid var(--vurgu); outline-offset: 2px; }

/* ------------------------------------------------ İKON
   Demo .onay-im: rengin %13'ü zemin, çizgi rengin kendisi.
   Ölçüye dokunulmuyor — swal işaretleri sabit px ile konumlanıyor. */
.swal2-icon { margin: 4px auto var(--u-3); border-width: 3px; }
.swal2-icon.swal2-success {
  border-color: color-mix(in srgb, var(--olumlu) 40%, transparent);
  background: color-mix(in srgb, var(--olumlu) 13%, transparent);
  color: var(--olumlu);
}
.swal2-icon.swal2-success [class^='swal2-success-line'] { background: var(--olumlu); }
.swal2-icon.swal2-success .swal2-success-ring { border-color: color-mix(in srgb, var(--olumlu) 32%, transparent); }
.swal2-icon.swal2-success [class^='swal2-success-circular-line'],
.swal2-icon.swal2-success .swal2-success-fix { background: transparent; }

.swal2-icon.swal2-error {
  border-color: color-mix(in srgb, var(--hata) 40%, transparent);
  background: color-mix(in srgb, var(--hata) 13%, transparent);
  color: var(--hata);
}
.swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background: var(--hata); }

.swal2-icon.swal2-warning {
  border-color: color-mix(in srgb, var(--uyari) 40%, transparent);
  background: color-mix(in srgb, var(--uyari) 13%, transparent);
  color: var(--uyari);
}
.swal2-icon.swal2-info,
.swal2-icon.swal2-question {
  border-color: color-mix(in srgb, var(--bilgi) 40%, transparent);
  background: color-mix(in srgb, var(--bilgi) 13%, transparent);
  color: var(--bilgi);
}

.swal2-timer-progress-bar { background: var(--vurgu); opacity: 0.6; }

.swal2-loader { border-color: var(--vurgu) transparent var(--vurgu) transparent; }

/* ------------------------------------------------ SWAL TOAST
   Panel toast'ıyla aynı kutu: --kart-2, 13px yarıçap, sol renk şeridi */
.swal2-toast {
  padding: 12px 13px;
  background: var(--kart-2);
  border: 1px solid var(--kenar-2);
  border-radius: 13px;
  box-shadow: var(--golge-2);
}
.swal2-toast .swal2-title { font-size: var(--p-13); font-weight: var(--ag-baslik); margin: 0; }

.swal2-footer {
  margin: var(--a-4) 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--cizgi);
  color: var(--metin-3);
  font-size: var(--p-11);
}

/* Durum vurgulu bildirim kutuları — sayfalar sabit renk yerine bu sınıfları kullanır */
.swal2-popup.swal-uyari {
  border-color: color-mix(in srgb, var(--uyari) 38%, transparent);
  background: var(--kart);
  border-left: 3px solid var(--uyari);
}
.swal2-popup.swal-uyari .swal2-title { color: var(--uyari); }

.swal2-popup.swal-hata {
  border-color: color-mix(in srgb, var(--hata) 38%, transparent);
  border-left: 3px solid var(--hata);
}
.swal2-popup.swal-hata .swal2-title { color: var(--hata); }

.swal2-popup.swal-olumlu {
  border-color: color-mix(in srgb, var(--olumlu) 38%, transparent);
  border-left: 3px solid var(--olumlu);
}
.swal2-popup.swal-olumlu .swal2-title { color: var(--olumlu); }

.swal2-popup.swal2-toast {
  max-width: none;
  padding: 12px 13px;
  border-radius: 13px;
  background: var(--kart-2);
  border: 1px solid var(--kenar-2);
  border-left: 3px solid var(--vurgu);
  color: var(--metin);
}
.swal2-popup.swal2-toast .swal2-title { color: var(--metin); margin: 0; font-size: var(--p-13); }
.swal2-popup.swal2-toast .swal2-html-container { font-size: var(--p-12); }
.swal2-popup.swal2-toast.swal-olumlu { border-left-color: var(--olumlu); }
.swal2-popup.swal2-toast.swal-hata { border-left-color: var(--hata); }
.swal2-popup.swal2-toast.swal-uyari { border-left-color: var(--uyari); }

/* ================================================================
   SELECT2 — demo girdi dili (.girdi / .secim) + acilir menu (.ac-menu)
   Kutu DUZ: kuyu golgesi yok. Odak = kenar vurgu + ince sis halkasi.
   ================================================================ */

.select2-container { width: 100% !important; }

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  min-height: var(--kontrol-yuk);
  padding: 0 13px;
  border: 1px solid var(--kenar-2);
  border-radius: var(--r-2);
  background: var(--girdi);
  box-shadow: none;
  transition: background-color var(--gecis), border-color var(--gecis), box-shadow var(--gecis);
}

.select2-container--default .select2-selection--single { height: var(--kontrol-yuk); display: flex; align-items: center; }

.select2-container--default:not(.select2-container--focus):not(.select2-container--open):not(.select2-container--disabled) .select2-selection--single:hover,
.select2-container--default:not(.select2-container--focus):not(.select2-container--open):not(.select2-container--disabled) .select2-selection--multiple:hover {
  border-color: color-mix(in srgb, var(--metin-3) 45%, transparent);
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: var(--vurgu);
  background: var(--girdi-odak);
  box-shadow: 0 0 0 3px var(--vurgu-sis);
  outline: none;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
  line-height: 36px;
  color: var(--metin);
  font-family: var(--yazi-govde);
  font-size: var(--p-13);
  font-weight: 500;
  letter-spacing: var(--iz-veri);
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--metin-3); }

/* Ok: demo'daki ince "v" — select2'nin dolu ucgeni cizgiye cevrildi */
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 36px;
  width: 20px;
  right: 10px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  width: 7px;
  height: 7px;
  margin: -6px 0 0 -5px;
  border: 0;
  border-right: 1.8px solid var(--metin-3);
  border-bottom: 1.8px solid var(--metin-3);
  transform: rotate(45deg);
  transition: transform var(--gecis), border-color var(--gecis);
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  margin-top: -2px;
  border-color: var(--vurgu);
  transform: rotate(225deg);
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 6px 0;
  margin: 0;
  line-height: 1.4;
}

/* Secilen etiket — demo yumusak dolgu formulu (%16 vurgu) */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 3px 9px;
  border: 1px solid color-mix(in srgb, var(--vurgu) 30%, transparent);
  border-radius: var(--r-hap);
  background: color-mix(in srgb, var(--vurgu) 16%, transparent);
  color: var(--vurgu);
  font-size: var(--p-115);
  font-weight: 700;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  order: 2;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--vurgu);
  font-size: var(--p-14);
  line-height: 1;
  opacity: .6;
  transition: var(--gecis-hizli);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  background: none;
  color: var(--hata);
  opacity: 1;
}

.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
  margin: 0;
  color: var(--metin-3);
  font-size: var(--p-13);
  line-height: 28px;
}

.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
  margin: 0;
  height: 28px;
  color: var(--metin);
  font-family: var(--yazi-govde);
  font-size: var(--p-13);
  font-weight: 500;
}
.select2-container--default .select2-selection--multiple .select2-search__field::placeholder { color: var(--metin-3); }

.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
  opacity: .55;
  cursor: not-allowed;
}

/* --------------------------------------------- acilir katman (.ac-menu) */
.select2-dropdown {
  border: 1px solid var(--kenar-2);
  border-radius: var(--r-2);
  background: var(--yuzey-ust);
  box-shadow: var(--golge-2);
  overflow: hidden;
}

.select2-search--dropdown { padding: 7px; border-bottom: 1px solid var(--cizgi); }
.select2-container--default .select2-search--dropdown .select2-search__field {
  height: var(--kontrol-yuk-sm);
  padding: 0 11px;
  border: 1px solid var(--kenar-2);
  border-radius: var(--r-1);
  background: var(--girdi);
  box-shadow: none;
  color: var(--metin);
  font-family: var(--yazi-govde);
  font-size: var(--p-125);
  font-weight: 500;
}
.select2-container--default .select2-search--dropdown .select2-search__field::placeholder { color: var(--metin-3); }
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  outline: none;
  border-color: var(--vurgu);
  background: var(--girdi-odak);
  box-shadow: 0 0 0 3px var(--vurgu-sis);
}

.select2-results__options { padding: 5px; max-height: 260px; }
.select2-results__options::-webkit-scrollbar { width: 5px; }
.select2-results__options::-webkit-scrollbar-thumb { background: var(--kenar-2); border-radius: 3px; }

.select2-container--default .select2-results__option {
  padding: 8px 11px;
  border-radius: var(--r-1);
  color: var(--metin-2);
  font-family: var(--yazi-govde);
  font-size: var(--p-125);
  font-weight: 600;
  transition: var(--gecis-hizli);
}

/* Klavye/fare gezinmesi — demo .ac-og:hover */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
  background: color-mix(in srgb, var(--vurgu) 10%, transparent);
  color: var(--metin);
}

.select2-container--default .select2-results__option--selected,
.select2-container--default .select2-results__option[aria-selected="true"] {
  background: color-mix(in srgb, var(--vurgu) 16%, transparent);
  color: var(--vurgu);
  font-weight: 700;
}

.select2-container--default .select2-results__option[aria-disabled="true"] { color: var(--metin-3); opacity: .55; }
.select2-container--default .select2-results__message { color: var(--metin-3); font-size: var(--p-125); }

.select2-container--default .select2-results__group {
  padding: 8px 11px 5px;
  color: var(--etiket);
  font-size: var(--p-10);
  font-weight: var(--ag-etiket);
  letter-spacing: var(--iz-etiket);
  text-transform: uppercase;
}

/* Coklu secimde onay kutusu gorunumu — .select2-checkbox tasiyan alanlarda.
   Kutu geometrisi form.css'teki .form-check-input ile aynidir. */
.select2-checkbox + .select2-container .select2-results__option--selectable {
  position: relative;
  padding-left: 34px;
}
.select2-checkbox + .select2-container .select2-results__option--selectable::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  border: 1.5px solid var(--kenar-2);
  border-radius: 6px;
  background: var(--girdi);
  transition: var(--gecis-hizli);
}
.select2-checkbox + .select2-container .select2-results__option--selected::before {
  background: var(--vurgu-dolgu);
  border-color: var(--vurgu-dolgu);
}
.select2-checkbox + .select2-container .select2-results__option--selected::after {
  content: '';
  position: absolute;
  left: 14px;
  top: 50%;
  width: 9px;
  height: 5px;
  border: 0;
  border-left: 2.2px solid var(--vurgu-yazi);
  border-bottom: 2.2px solid var(--vurgu-yazi);
  transform: translateY(-70%) rotate(-45deg);
}

/* ================================================================
   DATATABLES — demo: tema.css ".dt-arac / th.sirala / .dt-dip / .sayfalama"
   Araç çubuğu üstte, bilgi + sayfa boyutu + sayfalama altta.
   Kontroller demo .girdi/.secim geometrisi: düz kenar, odakta yalnız renk.
   ================================================================ */

.dataTables_wrapper { color: var(--metin-2); font-size: var(--p-13); }

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { margin-bottom: var(--u-3); }

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--metin-3);
  font-size: var(--p-125);
  font-weight: 600;
  white-space: nowrap;
}
.dataTables_wrapper .dataTables_filter label { justify-content: flex-end; }

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--kenar-2);
  border-radius: var(--r-2);
  background-color: var(--girdi);   /* kısayol select okunu siliyordu */
  box-shadow: none;
  color: var(--metin);
  font-family: var(--yazi-govde);
  font-weight: 500;
  outline: none;
  transition: border-color var(--gecis), background var(--gecis);
}

/* Arama kutusu: demo .dt-arac .g-ikonlu — tam boy kontrol */
.dataTables_wrapper .dataTables_filter input {
  height: var(--kontrol-yuk);
  min-width: 210px;
  padding: 0 13px;
  font-size: var(--p-13);
}

/* Sayfa boyutu: demo .dt-boy .secim — alçak, küçük puntolu.
   Select .form-select/.form-control taşıdığında genişlik %100 oluyor ve
   "kayıt göster" metnini alt satıra kırıyordu; içeriği kadar kalır. */
.dataTables_wrapper .dataTables_length select {
  flex: 0 0 auto;
  width: auto !important;
  min-width: 68px;
  max-width: 90px;
  height: var(--kontrol-yuk-sm);
  padding: 0 26px 0 10px;
  border-radius: var(--r-1);
  font-size: var(--p-12);
  cursor: pointer;
}

/* Demo odak kuralı: halka/iç gölge yok, yalnızca kenar rengi döner */
.dataTables_wrapper .dataTables_length select:hover,
.dataTables_wrapper .dataTables_filter input:hover {
  border-color: color-mix(in srgb, var(--metin-3) 45%, transparent);
}
.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus {
  outline: none;
  border-color: var(--vurgu);
  background: var(--girdi-odak);
  box-shadow: none;
}

/* Alt bilgi çubuğu — demo .dt-dip */
.dataTables_wrapper .dataTables_info {
  display: flex;
  align-items: center;
  padding-top: var(--u-3);
  color: var(--metin-3);
  font-size: var(--p-12);
}
.dataTables_wrapper .dataTables_info b,
.dataTables_wrapper .dataTables_info strong {
  color: var(--metin-2);
  font-family: var(--yazi-mono);
  font-weight: 600;
}

.dataTables_wrapper .dataTables_paginate {
  padding-top: var(--u-3);
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 4px;
}
.dataTables_wrapper .dataTables_paginate .pagination { margin: 0; gap: 4px; }

/* Bootstrap5 eklentisi sayfalamayı <li class="paginate_button page-item"><a class="page-link">
   olarak üretir. Hem li hem a kutu çizerse çerçeveler iç içe geçer: kutuyu yalnız
   .page-link çizer (gezinme.css), li yalnızca sarmalayıcıdır. */
.dataTables_wrapper .dataTables_paginate li.paginate_button {
  border: 0 !important;
  background: none !important;
  padding: 0 !important;
  margin: 0;
}

/* Bootstrap eklentisi yoksa sayfalama doğrudan <a class="paginate_button"> olur.
   Demo .sf-btn: saydam zemin, mono rakam, hover'da yalnızca renk döner. */
.dataTables_wrapper .dataTables_paginate a.paginate_button {
  display: inline-grid;
  place-items: center;
  min-width: var(--kontrol-yuk-sm);
  height: var(--kontrol-yuk-sm);
  padding: 0 6px !important;
  margin: 0;
  border: 1px solid var(--kenar) !important;
  border-radius: var(--r-1) !important;
  background: transparent !important;
  color: var(--metin-2) !important;
  font-family: var(--yazi-mono);
  font-size: var(--p-12);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--gecis), color var(--gecis), background var(--gecis);
}
.dataTables_wrapper .dataTables_paginate a.paginate_button:hover {
  border-color: var(--vurgu) !important;
  background: transparent !important;
  color: var(--vurgu) !important;
}
.dataTables_wrapper .dataTables_paginate a.paginate_button.current,
.dataTables_wrapper .dataTables_paginate a.paginate_button.current:hover {
  border-color: transparent !important;
  background: var(--vurgu-gradyan) !important;
  color: var(--vurgu-yazi) !important;
  font-weight: 700;
}
.dataTables_wrapper .dataTables_paginate a.paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate a.paginate_button.disabled:hover {
  opacity: .4;
  cursor: not-allowed;
  border-color: var(--kenar) !important;
  background: transparent !important;
  color: var(--metin-2) !important;
}
.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link { opacity: .4; cursor: not-allowed; }

/* Yükleniyor kutusu — yüzen katman ölçüleri */
.dataTables_wrapper .dataTables_processing {
  display: grid;
  place-items: center;
  gap: 9px;
  padding: var(--a-4) var(--a-6);
  border: 1px solid var(--kenar-2);
  border-radius: var(--r-2);
  background: var(--yuzey-ust);
  box-shadow: var(--golge-2);
  color: var(--metin-2);
  font-size: var(--p-13);
  font-weight: 700;
}

/* Başlık: tablo.css ile aynı bant — kart-2 zemini, tek alt çizgi */
table.dataTable thead th,
table.dataTable thead td {
  padding: 10px var(--a-4);
  border-bottom: 1px solid var(--kenar) !important;
  background: var(--yuzey-2);
  box-shadow: none;
  color: var(--etiket);
  font-size: var(--p-10);
  font-weight: var(--ag-etiket);
  letter-spacing: var(--iz-etiket);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Sıralama — demo th.sirala: ok soluk, aktif sütun komple vurgu rengine döner */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
  position: relative;
  padding-right: 26px !important;
  cursor: pointer;
  user-select: none;
  transition: color var(--gecis-hizli);
}
table.dataTable thead .sorting:hover { color: var(--metin-2); }
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc { color: var(--vurgu); }

table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'remixicon';
  font-size: var(--p-12);
  opacity: .45;
  transition: var(--gecis-hizli);
}
table.dataTable thead .sorting::after { content: '\ea74'; }
table.dataTable thead .sorting_asc::after { content: '\ea78'; opacity: 1; color: var(--vurgu); }
table.dataTable thead .sorting_desc::after { content: '\ea4e'; opacity: 1; color: var(--vurgu); }
table.dataTable thead .sorting::before,
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_desc::before { display: none !important; }

table.dataTable tbody td {
  padding: 10px var(--a-4);
  border-top: 0;
  border-bottom: 1px solid var(--cizgi);
}
table.dataTable tbody tr { background: transparent; transition: background var(--gecis-hizli); }
table.dataTable tbody tr:hover { background: var(--yuzey-2); }
table.dataTable tbody tr:last-child > td { border-bottom: 0; }

table.dataTable tbody tr.selected,
table.dataTable tbody tr.selected td {
  background: var(--vurgu-sis) !important;
  box-shadow: none !important;
}

table.dataTable tfoot th,
table.dataTable tfoot td {
  padding: 10px var(--a-4);
  border-top: 1px solid var(--kenar) !important;
  background: var(--yuzey-2);
  box-shadow: none;
  color: var(--metin);
  font-family: var(--yazi-mono);
  font-size: var(--p-125);
  font-weight: var(--ag-veri);
}

/* Duyarlı satır açma düğmesi — pastel daire */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--vurgu) 14%, transparent);
  color: var(--vurgu);
  box-shadow: none;
  font-weight: 700;
  line-height: 17px;
}
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control::before {
  background: var(--vurgu-gradyan);
  color: var(--vurgu-yazi);
}

table.dataTable > tbody > tr.child ul.dtr-details { width: 100%; }
table.dataTable > tbody > tr.child span.dtr-title {
  min-width: 110px;
  color: var(--etiket);
  font-size: var(--p-10);
  font-weight: var(--ag-etiket);
  letter-spacing: var(--iz-etiket);
  text-transform: uppercase;
}
table.dataTable > tbody > tr.child ul.dtr-details > li { border-bottom: 1px solid var(--cizgi); padding: 7px 0; }

/* Dışa aktar / sütun düğmeleri — demo .btn.btn-cizgi */
div.dt-buttons { gap: 8px; display: inline-flex; flex-wrap: wrap; align-items: center; }
.dt-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: var(--kontrol-yuk);
  padding: 0 18px !important;
  border: 1px solid var(--kenar-2) !important;
  border-radius: var(--hap) !important;
  background: transparent !important;
  box-shadow: none;
  color: var(--metin-2) !important;
  font-family: inherit;
  font-size: var(--p-125);
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--gecis), color var(--gecis), background var(--gecis);
}
.dt-button:hover {
  border-color: var(--vurgu) !important;
  background: transparent !important;
  color: var(--vurgu) !important;
}
.dt-button:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }

.dataTables_scrollBody { border-bottom: 0 !important; }
.dataTables_scrollHead { background: transparent; }

/* Boş sonuç — tablo.css .bos-durum ile aynı nefes */
.dataTables_empty {
  padding: var(--a-7) var(--a-4) !important;
  color: var(--metin-3);
  text-align: center;
  font-size: var(--p-125);
}

table.dataTable { width: 100% !important; }

@media (max-width: 767.98px) {
  .dataTables_wrapper .dataTables_filter label { justify-content: flex-start; }
  .dataTables_wrapper .dataTables_filter input { min-width: 0; width: 100%; }
  .dataTables_wrapper .dataTables_paginate { justify-content: center; }
  .dataTables_wrapper .dataTables_paginate a.paginate_button,
  .dataTables_wrapper .dataTables_paginate li.paginate_button > .page-link { min-width: 30px; height: 30px; padding: 0 5px !important; }
  table.dataTable thead th,
  table.dataTable thead td,
  table.dataTable tbody td,
  table.dataTable tfoot th,
  table.dataTable tfoot td { padding-left: 10px; padding-right: 10px; }
}

/* ================================================================
   FLATPICKR — demo acilir katman dili (.ac-menu) + girdi dili (.girdi)
   Katman: --yuzey-ust zemin, --kenar-2 kenar, --golge-2 golge, ic isik yok.
   Secim: koyu vurgu tonu (--vurgu-dolgu) uzerinde beyaz yazi.
   ================================================================ */

.flatpickr-calendar {
  width: 312px;
  padding: 6px;
  border: 1px solid var(--kenar-2);
  border-radius: var(--r-2);
  background: var(--yuzey-ust);
  box-shadow: var(--golge-2);
  font-family: var(--yazi-govde);
}
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after { display: none; }

.flatpickr-months {
  align-items: center;
  padding: 4px 2px 8px;
  background: transparent;
}

.flatpickr-months .flatpickr-month {
  height: 34px;
  background: transparent;
  color: var(--metin);
  fill: var(--metin);
}

.flatpickr-current-month {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 34px;
  padding: 0;
  font-size: var(--p-135);
  font-weight: 700;
}
/* Ay secici kucuk bir girdi gibi durur */
.flatpickr-current-month .flatpickr-monthDropdown-months {
  padding: 5px 9px;
  border: 1px solid var(--kenar-2);
  border-radius: var(--r-1);
  background: var(--girdi);
  color: var(--metin);
  font-family: var(--yazi-govde);
  font-size: var(--p-125);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--gecis);
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover { border-color: var(--vurgu); background: var(--girdi); }
.flatpickr-current-month .flatpickr-monthDropdown-months option { background: var(--yuzey-ust); color: var(--metin); }

.flatpickr-current-month input.cur-year {
  padding: 0 0 0 3px;
  color: var(--metin);
  font-family: var(--yazi-mono);
  font-size: var(--p-125);
  font-weight: 700;
}
.numInputWrapper span { border-color: var(--kenar); }
.numInputWrapper span:hover { background: var(--cam); }
.numInputWrapper span.arrowUp::after { border-bottom-color: var(--metin-3); }
.numInputWrapper span.arrowDown::after { border-top-color: var(--metin-3); }
.numInputWrapper:hover { background: transparent; }

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  position: absolute;
  top: 6px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: var(--r-1);
  color: var(--metin-2);
  fill: var(--metin-2);
  transition: var(--gecis-hizli);
}
.flatpickr-months .flatpickr-prev-month { left: 6px; }
.flatpickr-months .flatpickr-next-month { right: 6px; }
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  background: color-mix(in srgb, var(--vurgu) 10%, transparent);
  color: var(--vurgu);
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: var(--vurgu); }

span.flatpickr-weekday {
  background: transparent;
  color: var(--metin-3);
  font-size: var(--p-10);
  font-weight: var(--ag-etiket);
  letter-spacing: var(--iz-etiket);
  text-transform: uppercase;
}
.flatpickr-weekdays { height: 30px; background: transparent; }
.flatpickr-weekdaycontainer { background: transparent; }

.flatpickr-days { width: 300px; border: 0; }
.dayContainer { width: 300px; min-width: 300px; max-width: 300px; padding: 0; }

.flatpickr-day {
  max-width: 40px;
  height: 36px;
  line-height: 36px;
  margin: 1px 0;
  border: 1px solid transparent;
  border-radius: var(--r-1);
  color: var(--metin-2);
  font-size: var(--p-125);
  font-weight: 600;
  transition: var(--gecis-hizli);
}
.flatpickr-day:hover,
.flatpickr-day:focus {
  border-color: transparent;
  background: color-mix(in srgb, var(--vurgu) 10%, transparent);
  color: var(--metin);
}

.flatpickr-day.today {
  border-color: color-mix(in srgb, var(--vurgu) 45%, transparent);
  color: var(--vurgu);
  font-weight: var(--ag-veri);
}
.flatpickr-day.today:hover { background: color-mix(in srgb, var(--vurgu) 16%, transparent); color: var(--vurgu); }

/* Secili gun: koyu vurgu tonu — hale/golge yok, demo duz dolgu ister */
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  border-color: transparent;
  background: var(--vurgu-dolgu);
  color: var(--vurgu-yazi);
  font-weight: var(--ag-veri);
  box-shadow: none;
}

.flatpickr-day.inRange,
.flatpickr-day.inRange:hover {
  border-color: transparent;
  background: color-mix(in srgb, var(--vurgu) 16%, transparent);
  color: var(--vurgu);
  box-shadow: none;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: var(--metin-3);
  opacity: .4;
}
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover { opacity: .7; }

.flatpickr-time { border-top: 1px solid var(--cizgi); }
.flatpickr-time input,
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
  background: transparent;
  color: var(--metin);
  font-family: var(--yazi-mono);
  font-size: var(--p-135);
  font-weight: 600;
}
.flatpickr-time input:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:hover { background: color-mix(in srgb, var(--vurgu) 10%, transparent); }

.flatpickr-innerContainer { border: 0; background: transparent; }
.flatpickr-rContainer { background: transparent; }

/* Takvim tetikleyen alan yazilabilir degil ama tiklanabilir gorunmeli */
.flatpickr-input[readonly] { cursor: pointer; }
.flatpickr-input[readonly]:disabled { cursor: not-allowed; }

/* ================================================================
   CHOICES.JS — kutuphanenin kendi CSS'i projede hic yuklenmiyordu
   (Velzon app.min.css icinde geliyordu). Bilesen tema diliyle yazildi.
   Dil: demo .girdi/.secim (duz kutu) + .ac-menu (acilir katman).
   ================================================================ */

.choices { position: relative; margin: 0; }
.choices:focus { outline: none; }
.choices.is-disabled { opacity: .55; pointer-events: none; }

/* Choices orijinal <select>'i gizler; kural olmayinca ham select de goruntuleniyordu */
.choices__input--hidden,
.choices[data-type] > select,
select.choices__input { display: none !important; }

.choices__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  width: 100%;
  min-height: var(--kontrol-yuk);
  padding: 4px 34px 4px 12px;
  border: 1px solid var(--kenar-2);
  border-radius: var(--r-2);
  background: var(--girdi);
  box-shadow: none;
  color: var(--metin);
  font-family: var(--yazi-govde);
  font-size: var(--p-13);
  font-weight: 500;
  letter-spacing: var(--iz-veri);
  transition: background-color var(--gecis), border-color var(--gecis), box-shadow var(--gecis);
  overflow: hidden;
}
.choices:not(.is-focused):not(.is-open):not(.is-disabled) .choices__inner:hover {
  border-color: color-mix(in srgb, var(--metin-3) 45%, transparent);
}
.choices.is-focused .choices__inner,
.choices.is-open .choices__inner {
  border-color: var(--vurgu);
  background: var(--girdi-odak);
  box-shadow: 0 0 0 3px var(--vurgu-sis);
}

/* Ok: demo .sec-kap::after — ince "v", kutuphanenin dolu ucgeni ezilir */
.choices[data-type*="select-one"] .choices__inner { padding-bottom: 4px; cursor: pointer; }
.choices[data-type*="select-one"]::after {
  content: '';
  position: absolute;
  right: 15px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: 0;
  border: 0;
  border-right: 1.8px solid var(--metin-3);
  border-bottom: 1.8px solid var(--metin-3);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
  transition: transform var(--gecis), border-color var(--gecis);
}
.choices[data-type*="select-one"].is-open::after {
  border-color: var(--vurgu);
  transform: translateY(-30%) rotate(225deg);
}

.choices__list { margin: 0; padding: 0; list-style: none; }
.choices__list--single { display: inline-block; padding: 0; width: 100%; }
.choices__list--single .choices__item { color: var(--metin); }

.choices__list--multiple { display: contents; }

/* Secilen etiketler — demo yumusak dolgu formulu (%16 vurgu) */
.choices__list--multiple .choices__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  margin: 0;
  padding: 3px 9px;
  border: 1px solid color-mix(in srgb, var(--vurgu) 30%, transparent);
  border-radius: var(--r-hap);
  background: color-mix(in srgb, var(--vurgu) 16%, transparent);
  color: var(--vurgu);
  font-size: var(--p-115);
  font-weight: 700;
  line-height: 1.5;
  word-break: break-word;
}
.choices__list--multiple .choices__item.is-highlighted {
  border-color: var(--vurgu);
  background: color-mix(in srgb, var(--vurgu) 25%, transparent);
}
.choices[data-type*="select-multiple"] .choices__inner { cursor: text; }

/* Etiket kaldirma dugmesi — orijinalde SVG arka plan, burada ikon karakteri */
.choices__button {
  order: 2;
  width: 14px;
  height: 14px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: 0;
  line-height: 1;
  opacity: .6;
  cursor: pointer;
  transition: var(--gecis-hizli);
}
.choices__button::before {
  content: '\eb99';
  font-family: 'remixicon';
  font-size: 13px;
}
.choices__button:hover { opacity: 1; color: var(--hata); }
.choices__button:focus { outline: none; box-shadow: none; }

/* Arama girisi */
.choices__input {
  flex: 1 1 60px;
  min-width: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--metin);
  font-family: var(--yazi-govde);
  font-size: var(--p-13);
  font-weight: 500;
  vertical-align: baseline;
}
.choices__input:focus { outline: none; }
.choices__input::placeholder { color: var(--metin-3); }

/* --------------------------------------------- acilir katman (.ac-menu) */
.choices__list--dropdown,
.choices__list[aria-expanded] {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 60;
  margin-top: 6px;
  border: 1px solid var(--kenar-2);
  border-radius: var(--r-2);
  background: var(--yuzey-ust);
  box-shadow: var(--golge-2);
  overflow: hidden;
  visibility: hidden;
}
.choices__list--dropdown.is-active,
.choices__list[aria-expanded].is-active { visibility: visible; }

.choices__list--dropdown .choices__list {
  max-height: 260px;
  padding: 5px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.choices__list--dropdown .choices__list::-webkit-scrollbar { width: 5px; }
.choices__list--dropdown .choices__list::-webkit-scrollbar-thumb { background: var(--kenar-2); border-radius: 3px; }

.choices__list--dropdown .choices__item {
  padding: 8px 11px;
  border-radius: var(--r-1);
  color: var(--metin-2);
  font-size: var(--p-125);
  font-weight: 600;
  transition: var(--gecis-hizli);
}
.choices__list--dropdown .choices__item--selectable.is-highlighted {
  background: color-mix(in srgb, var(--vurgu) 10%, transparent);
  color: var(--metin);
}
.choices__list--dropdown .choices__item--selectable.is-selected {
  background: color-mix(in srgb, var(--vurgu) 16%, transparent);
  color: var(--vurgu);
  font-weight: 700;
}
.choices__list--dropdown .choices__item--selectable[data-select-text]::after { display: none; }
.choices__list--dropdown .choices__item--disabled { color: var(--metin-3); opacity: .55; }
.choices__list--dropdown .choices__placeholder { color: var(--metin-3); }

.choices__heading {
  padding: 8px 11px 5px;
  border-bottom: 1px solid var(--cizgi);
  color: var(--etiket);
  font-size: var(--p-10);
  font-weight: var(--ag-etiket);
  letter-spacing: var(--iz-etiket);
  text-transform: uppercase;
}

.choices__placeholder { color: var(--metin-3); opacity: 1; }

/*
 * BOOTSTRAP / VELZON KOPRUSU — paketin EN SON yuklenen dosyasi.
 * Icerik:
 *   (1) Velzon sayfa iskeleti (.page-content / .page-title-box)
 *   (2) Diger tema dosyalarinin kapsamadigi Bootstrap-Velzon siniflari
 *   (3) Kirilim noktali bosluk yardimcilari
 * Butun degerler demo (_tema_denemeleri/tema.css) karsiliklarina cekildi.
 */

/* ================================================================
   1) SAYFA ISKELETI
   ================================================================ */

/* Velzon .page-content ust bar yuksekligi kadar dolgu veriyordu; .sayfa
   zaten dolgu tasiyor, ikisi ust uste binince baslik asagi kayiyordu. */
.page-content { padding: 0 !important; margin: 0; }
.page-content > .container-fluid:first-child,
.page-content > .container:first-child { padding-top: 0; margin-top: 0; }
.page-content > .container-fluid > .row:first-child,
.page-content > .container > .row:first-child { margin-top: 0; }
/* Sayfanin ilk ogesi baslik degilse de ust bara yapismasin */
.sayfa > .page-content > .container-fluid > *:first-child,
.sayfa > .page-content > .container > *:first-child { margin-top: 0; }

/* .sayfa yan dolguyu zaten veriyor; icteki container tekrar vermesin */
.sayfa > .page-content > .container-fluid,
.sayfa > .page-content > .container,
.sayfa > .container-fluid,
.sayfa > .container { padding-left: 0; padding-right: 0; max-width: none; }

/* Demo karsiligi: .arac — baslik + yanindaki arac cubugu, tek satir */
.page-title-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-3);
  flex-wrap: wrap;
  margin-bottom: var(--a-3);
}

/* Arkadaki radyal parlama demo'da yok */
:root:not([data-tema="acik"]) .page-title-box::before { content: none; }

/* Demo h1: 21px / 800 / -.015em, susleme yok */
.page-title-box h4,
.page-title-box h5 {
  position: relative;
  margin: 0;
  padding-left: 0;
  font-family: var(--yazi-baslik);
  font-size: var(--p-21);
  font-weight: var(--ag-baslik);
  letter-spacing: var(--iz-baslik);
  line-height: 1.25;
  color: var(--metin);
}

/* Demo basligi cizgisiz: yandaki vurgu kurali kaldirildi, secici duruyor */
.page-title-box h4::before,
.page-title-box h5::before { content: none; }

.page-title-box h4 > i,
.page-title-box h5 > i {
  font-size: 0.72em;
  color: var(--metin-3);
  vertical-align: 1px;
}

.page-title-right { display: flex; align-items: center; gap: var(--u-2); flex-wrap: wrap; }
.page-title-right .breadcrumb { margin: 0; }
.page-title-right .badge { font-size: var(--p-10); }

@media (max-width: 575.98px) {
  .page-title-box h4,
  .page-title-box h5 { font-size: var(--p-18); }
}

/* ================================================================
   2) SEKMELER — 07-ayarlar.html'deki onayli tasarim
   Demo .sekmeler / .sekme kurallari Bootstrap seceicilerine tasindi.
   ================================================================ */

.nav-tabs {
  gap: var(--u-1);
  border-bottom: 1px solid var(--kenar);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.nav-tabs::-webkit-scrollbar { height: 0; }

.nav-tabs .nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--u-2);
  padding: 11px 16px;
  margin-bottom: -1px;
  border: 0;
  border-radius: var(--r-ic) var(--r-ic) 0 0;
  background: transparent;
  color: var(--metin-3);
  font-size: var(--p-13);
  font-weight: 700;
  letter-spacing: 0;
  transition: color var(--gecis-hizli), background var(--gecis-hizli);
}
.nav-tabs .nav-link i {
  font-size: var(--p-15);
  color: inherit;
  opacity: 0.75;
  transition: opacity var(--gecis-hizli);
}

/* Aktif gostergesi: sekmenin ic hizasinda, vurgudan koyuya akan 2px */
.nav-tabs .nav-link::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(90deg, var(--vurgu), var(--vurgu-d2));
  transform: scaleX(0);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.nav-tabs .nav-link:hover {
  color: var(--metin);
  background: color-mix(in srgb, var(--metin-3) 8%, transparent);
}
.nav-tabs .nav-link:hover::after { transform: scaleX(0.4); }

.nav-tabs .nav-link.active,
.nav-tabs .nav-link[aria-selected="true"] {
  color: var(--vurgu);
  background: color-mix(in srgb, var(--vurgu) 10%, transparent);
}
.nav-tabs .nav-link.active i,
.nav-tabs .nav-link[aria-selected="true"] i { opacity: 1; }
.nav-tabs .nav-link.active::after,
.nav-tabs .nav-link[aria-selected="true"]::after { transform: scaleX(1); }

.nav-tabs .nav-link:focus-visible { outline: 2px solid var(--vurgu); outline-offset: -2px; }

/* Açık temada sekmeler yeterince ayrışmıyordu: beyaz kart üstünde %10'luk
   vurgu yıkaması ve 2px'lik çizgi neredeyse görünmüyor. Koyu temada sorun
   yok (yıkama koyu zeminde okunuyor), o yüzden yalnız açık tema güçlendirildi. */
:root[data-tema="acik"] .nav-tabs {
  border-bottom-color: var(--kenar-2);
}
:root[data-tema="acik"] .nav-tabs .nav-link {
  color: var(--metin-2);
}
:root[data-tema="acik"] .nav-tabs .nav-link:hover {
  background: color-mix(in srgb, var(--metin-3) 11%, transparent);
}
:root[data-tema="acik"] .nav-tabs .nav-link.active,
:root[data-tema="acik"] .nav-tabs .nav-link[aria-selected="true"] {
  background: color-mix(in srgb, var(--vurgu) 15%, transparent);
  color: var(--vurgu-d2);
}
:root[data-tema="acik"] .nav-tabs .nav-link::after {
  left: 0;
  right: 0;
  height: 3px;
  background: var(--vurgu-d1);
}

/* Velzon'un kart icindeki serit varyanti: demo'da serit kart kenarindan
   6px/12px iceride baslar. */
.nav-tabs-custom { padding: 6px 12px 0; }
.nav-tabs-custom .nav-link { margin-bottom: -1px; }

/* Kart basligina yapisan serit kendi cizgisini gezinme.css'ten alir;
   burada yalnizca sekme ic dolgusu korunur. */
.card-header-tabs .nav-link { margin-bottom: -1px; }

/* Esit bolunmus seritte gosterge kenara kadar gitsin */
.nav-justified .nav-link::after { left: 16px; right: 16px; }

/* ================================================================
   3) SABIT KAYDET CUBUGU — demo .kaydet-cubuk
   Sayfalar butonu .btn-sticky-save ile isaretliyor.
   ================================================================ */

.btn-sticky-save {
  --kaydet-renk: var(--vurgu);
  position: fixed;
  right: 26px;
  bottom: 24px;
  z-index: var(--z-ortu);
  min-height: 44px;
  padding: 0 var(--u-4);
  font-size: var(--p-135);
  box-shadow: 0 12px 32px -8px color-mix(in srgb, var(--kaydet-renk) 60%, transparent),
              0 0 0 1px color-mix(in srgb, var(--kaydet-renk) 25%, transparent),
              var(--ic-isik-guclu);
}
.btn-success.btn-sticky-save { --kaydet-renk: var(--olumlu); }
.btn-primary.btn-sticky-save { --kaydet-renk: var(--vurgu); }
.btn-sticky-save:hover { filter: brightness(1.08); }

/* Sabit buton son satiri kapatmasin */
.sayfa:has(.btn-sticky-save) { padding-bottom: 76px; }

@media (max-width: 575.98px) {
  .btn-sticky-save { right: 14px; bottom: 14px; }
}

/* ================================================================
   4) UYARI KUTUSU — Bootstrap 5.3 "subtle" varyantlari
   Renkli govde rozet.css'te; burada yalnizca soluk aile.
   ================================================================ */

.alert-primary-subtle {
  background: color-mix(in srgb, var(--vurgu) 9%, transparent);
  border-color: color-mix(in srgb, var(--vurgu) 18%, transparent);
  color: var(--metin-2);
}
.alert-success-subtle {
  background: color-mix(in srgb, var(--olumlu) 9%, transparent);
  border-color: color-mix(in srgb, var(--olumlu) 18%, transparent);
  color: var(--metin-2);
}
.alert-danger-subtle {
  background: color-mix(in srgb, var(--hata) 9%, transparent);
  border-color: color-mix(in srgb, var(--hata) 18%, transparent);
  color: var(--metin-2);
}
.alert-warning-subtle {
  background: color-mix(in srgb, var(--uyari) 9%, transparent);
  border-color: color-mix(in srgb, var(--uyari) 18%, transparent);
  color: var(--metin-2);
}
.alert-info-subtle {
  background: color-mix(in srgb, var(--bilgi) 9%, transparent);
  border-color: color-mix(in srgb, var(--bilgi) 18%, transparent);
  color: var(--metin-2);
}
.alert-secondary-subtle {
  background: var(--cam);
  border-color: var(--kenar);
  color: var(--metin-2);
}

/* ================================================================
   5) BUTON KOPRUSU — buton.css'te karsiligi olmayanlar
   ================================================================ */

/* Velzon "ghost": zeminsiz, hover'da renk sisi */
[class^="btn-ghost-"],
[class*=" btn-ghost-"] {
  background: none;
  border-color: transparent;
  box-shadow: none;
}
.btn-ghost-primary   { color: var(--vurgu); }
.btn-ghost-secondary { color: var(--metin-2); }
.btn-ghost-success   { color: var(--olumlu); }
.btn-ghost-danger    { color: var(--hata); }
.btn-ghost-warning   { color: var(--uyari); }
.btn-ghost-info      { color: var(--bilgi); }
.btn-ghost-dark      { color: var(--metin); }

[class^="btn-ghost-"]:hover,
[class*=" btn-ghost-"]:hover { border-color: transparent; box-shadow: none; }
.btn-ghost-primary:hover   { background: var(--vurgu-sis);  color: var(--vurgu); }
.btn-ghost-secondary:hover { background: var(--cam);        color: var(--metin); }
.btn-ghost-success:hover   { background: var(--olumlu-sis); color: var(--olumlu); }
.btn-ghost-danger:hover    { background: var(--hata-sis);   color: var(--hata); }
.btn-ghost-warning:hover   { background: var(--uyari-sis);  color: var(--uyari); }
.btn-ghost-info:hover      { background: var(--bilgi-sis);  color: var(--bilgi); }
.btn-ghost-dark:hover      { background: var(--cam-2);      color: var(--metin); }

/* Yumusak ailenin eksik uyesi. --c'yi vermek yeterli: hover'da dolguya donup
   yaziyi beyaza ceviren ortak kural parts/buton.css'te tanimli, aile bir
   butun olsun diye burada ayri hover yazilmiyor. */
.btn-soft-dark { --c: var(--gri); background: color-mix(in srgb, var(--gri) 16%, transparent); border-color: transparent; color: var(--metin); }

/* ================================================================
   6) KART KOPRUSU
   ================================================================ */

/* Velzon .card-animate — demo .metrik:hover hareketi */
.card-animate {
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.3, 1),
              border-color 0.2s, box-shadow 0.2s;
}
.card-animate:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--vurgu) 42%, transparent);
  box-shadow: var(--ic-isik), var(--golge-2);
}

/* Kart uzerine serilen karartma katmani (demo .ortu ile ayni yogunluk).
   #000 demo'da da ham yazilmistir: ortu rengi temaya bagli degil. */
.bg-overlay {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, #000 62%, transparent);
}

/* ================================================================
   7) MODAL / AKORDIYON KOPRUSU
   ================================================================ */

.modal-md { max-width: 540px; }

.modal-dialog-scrollable { max-height: calc(100% - 68px); }
.modal-dialog-scrollable .modal-content { max-height: 100%; overflow: hidden; }
.modal-dialog-scrollable .modal-body { overflow-y: auto; }

.accordion { display: block; }
.accordion-flush .accordion-item {
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  margin-bottom: 0;
}

/* ================================================================
   8) ILERLEME / YUKLENIYOR KOPRUSU
   ================================================================ */

/* Cizgi, renkli cubugun UZERINE serilen beyaz film — --ic-isik ile ayni
   teknik; token degil, opaklik degeri. */
.progress-bar-striped {
  background-image: linear-gradient(45deg,
    rgba(255, 255, 255, 0.14) 25%, transparent 25%,
    transparent 50%, rgba(255, 255, 255, 0.14) 50%,
    rgba(255, 255, 255, 0.14) 75%, transparent 75%, transparent);
  background-size: 12px 12px;
}
.progress-bar-animated,
.progress-animated { animation: kaydir-cizgi 1s linear infinite; }
@keyframes kaydir-cizgi { from { background-position: 12px 0; } to { background-position: 0 0; } }

.spinner-grow {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  animation: buyu-sol 0.75s linear infinite;
}
.spinner-grow-sm,
.spinner-sm { width: 14px; height: 14px; }
@keyframes buyu-sol {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: none; opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

/* ================================================================
   9) TABLO KOPRUSU
   ================================================================ */

.table-nowrap > thead > tr > th,
.table-nowrap > tbody > tr > td { white-space: nowrap; }

.table-dark { background: var(--zemin-2); color: var(--metin); }
.table-dark > thead > tr > th { background: var(--zemin-3); color: var(--metin-2); }
.table-dark > tbody > tr > td { border-color: var(--cizgi-2); }

/* ================================================================
   10) FORM KOPRUSU
   ================================================================ */

.form-check-sm .form-check-input { width: 15px; height: 15px; }
.form-check-sm .form-check-label { font-size: var(--p-12); }

/* Topuz form.css'te `left:2px + translateX()` ile suruluyor; burada `left:24px`
   yaziliyordu ve taban transform'u UZERINE bineriyordu (24+19=43px) — topuz
   anahtarin sag kenarindan tasiyordu. Ayni modele cevrildi. */
.form-switch-lg .form-check-input { width: 48px; height: 26px; }
.form-switch-lg .form-check-input::after { width: 19px; height: 19px; }
.form-switch-lg .form-check-input:checked::after { left: 2px; transform: translateX(22px); }

.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text,
.input-group-sm > .btn {
  min-height: var(--kontrol-yuk-sm);
  height: var(--kontrol-yuk-sm);
  padding-top: 0;
  padding-bottom: 0;
  font-size: var(--p-12);
}

/* ================================================================
   11) YARDIMCI SINIF KOPRUSU
   Utils dosyalarinda karsiligi olmayan Bootstrap yardimcilari.
   ================================================================ */

.fs-10 { font-size: var(--p-10) !important; }
.fs-15 { font-size: var(--p-15) !important; }
.fs-18 { font-size: var(--p-18) !important; }
.fs-24 { font-size: var(--p-24) !important; }

.font-weight-bold { font-weight: 700 !important; }   /* BS4 kalintisi */

.text-primary-emphasis   { color: var(--vurgu) !important; }
.text-secondary-emphasis { color: var(--metin-2) !important; }
.text-success-emphasis   { color: var(--olumlu) !important; }
.text-danger-emphasis    { color: var(--hata) !important; }
.text-warning-emphasis   { color: var(--uyari) !important; }
.text-info-emphasis      { color: var(--bilgi) !important; }

.border-primary-subtle   { border-color: color-mix(in srgb, var(--vurgu) 30%, transparent) !important; }
.border-success-subtle   { border-color: color-mix(in srgb, var(--olumlu) 30%, transparent) !important; }
.border-danger-subtle    { border-color: color-mix(in srgb, var(--hata) 30%, transparent) !important; }
.border-warning-subtle   { border-color: color-mix(in srgb, var(--uyari) 30%, transparent) !important; }
.border-info-subtle      { border-color: color-mix(in srgb, var(--bilgi) 30%, transparent) !important; }
.border-secondary-subtle { border-color: var(--kenar) !important; }

.list-unstyled { list-style: none; padding-left: 0; margin: 0; }
.list-inline { list-style: none; padding-left: 0; margin: 0; }
.list-inline-item { display: inline-block; }
.list-inline-item:not(:last-child) { margin-right: var(--u-2); }

.hstack { display: flex; flex-direction: row; align-items: center; align-self: stretch; }
.vstack { display: flex; flex-direction: column; flex: 1 1 auto; align-self: stretch; }

.visually-hidden,
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0 !important;
}

.clearfix::after { content: ''; display: block; clear: both; }

.stretched-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Izgara bosluklari: izgara.css'te .g-0/.g-2/.g-3/.g-4 var, .g-1 yok */
.g-1 { margin-left: calc(var(--u-1) * -0.5); margin-right: calc(var(--u-1) * -0.5); }
.g-1 > * { padding-left: calc(var(--u-1) * 0.5); padding-right: calc(var(--u-1) * 0.5); }

.row-cols-1 > * { flex: 0 0 auto; width: 100%; }
.row-cols-2 > * { flex: 0 0 auto; width: 50%; }
.row-cols-3 > * { flex: 0 0 auto; width: 33.33333333%; }
.row-cols-4 > * { flex: 0 0 auto; width: 25%; }
@media (min-width: 768px) {
  .row-cols-md-1 > * { flex: 0 0 auto; width: 100%; }
  .row-cols-md-2 > * { flex: 0 0 auto; width: 50%; }
  .row-cols-md-3 > * { flex: 0 0 auto; width: 33.33333333%; }
  .row-cols-md-4 > * { flex: 0 0 auto; width: 25%; }
}
@media (min-width: 992px) {
  .row-cols-lg-1 > * { flex: 0 0 auto; width: 100%; }
  .row-cols-lg-2 > * { flex: 0 0 auto; width: 50%; }
  .row-cols-lg-3 > * { flex: 0 0 auto; width: 33.33333333%; }
  .row-cols-lg-4 > * { flex: 0 0 auto; width: 25%; }
}

/* ================================================================
   12) KIRILIM NOKTALI BOSLUK YARDIMCILARI
   ================================================================ */

@media (min-width: 576px) {
  .m-sm-0 { margin: 0; }
  .m-sm-1 { margin: var(--u-1); }
  .m-sm-2 { margin: var(--u-2); }
  .m-sm-3 { margin: var(--u-3); }
  .m-sm-4 { margin: var(--u-4); }
  .m-sm-5 { margin: var(--u-5); }
  .mt-sm-0 { margin-top: 0; }
  .mt-sm-1 { margin-top: var(--u-1); }
  .mt-sm-2 { margin-top: var(--u-2); }
  .mt-sm-3 { margin-top: var(--u-3); }
  .mt-sm-4 { margin-top: var(--u-4); }
  .mt-sm-5 { margin-top: var(--u-5); }
  .mb-sm-0 { margin-bottom: 0; }
  .mb-sm-1 { margin-bottom: var(--u-1); }
  .mb-sm-2 { margin-bottom: var(--u-2); }
  .mb-sm-3 { margin-bottom: var(--u-3); }
  .mb-sm-4 { margin-bottom: var(--u-4); }
  .mb-sm-5 { margin-bottom: var(--u-5); }
  .ms-sm-0 { margin-left: 0; }
  .ms-sm-1 { margin-left: var(--u-1); }
  .ms-sm-2 { margin-left: var(--u-2); }
  .ms-sm-3 { margin-left: var(--u-3); }
  .ms-sm-4 { margin-left: var(--u-4); }
  .ms-sm-5 { margin-left: var(--u-5); }
  .me-sm-0 { margin-right: 0; }
  .me-sm-1 { margin-right: var(--u-1); }
  .me-sm-2 { margin-right: var(--u-2); }
  .me-sm-3 { margin-right: var(--u-3); }
  .me-sm-4 { margin-right: var(--u-4); }
  .me-sm-5 { margin-right: var(--u-5); }
  .mx-sm-0 { margin-left: 0; margin-right: 0; }
  .mx-sm-1 { margin-left: var(--u-1); margin-right: var(--u-1); }
  .mx-sm-2 { margin-left: var(--u-2); margin-right: var(--u-2); }
  .mx-sm-3 { margin-left: var(--u-3); margin-right: var(--u-3); }
  .mx-sm-4 { margin-left: var(--u-4); margin-right: var(--u-4); }
  .mx-sm-5 { margin-left: var(--u-5); margin-right: var(--u-5); }
  .my-sm-0 { margin-top: 0; margin-bottom: 0; }
  .my-sm-1 { margin-top: var(--u-1); margin-bottom: var(--u-1); }
  .my-sm-2 { margin-top: var(--u-2); margin-bottom: var(--u-2); }
  .my-sm-3 { margin-top: var(--u-3); margin-bottom: var(--u-3); }
  .my-sm-4 { margin-top: var(--u-4); margin-bottom: var(--u-4); }
  .my-sm-5 { margin-top: var(--u-5); margin-bottom: var(--u-5); }
  .p-sm-0 { padding: 0; }
  .p-sm-1 { padding: var(--u-1); }
  .p-sm-2 { padding: var(--u-2); }
  .p-sm-3 { padding: var(--u-3); }
  .p-sm-4 { padding: var(--u-4); }
  .p-sm-5 { padding: var(--u-5); }
  .pt-sm-0 { padding-top: 0; }
  .pt-sm-1 { padding-top: var(--u-1); }
  .pt-sm-2 { padding-top: var(--u-2); }
  .pt-sm-3 { padding-top: var(--u-3); }
  .pt-sm-4 { padding-top: var(--u-4); }
  .pt-sm-5 { padding-top: var(--u-5); }
  .pb-sm-0 { padding-bottom: 0; }
  .pb-sm-1 { padding-bottom: var(--u-1); }
  .pb-sm-2 { padding-bottom: var(--u-2); }
  .pb-sm-3 { padding-bottom: var(--u-3); }
  .pb-sm-4 { padding-bottom: var(--u-4); }
  .pb-sm-5 { padding-bottom: var(--u-5); }
  .ps-sm-0 { padding-left: 0; }
  .ps-sm-1 { padding-left: var(--u-1); }
  .ps-sm-2 { padding-left: var(--u-2); }
  .ps-sm-3 { padding-left: var(--u-3); }
  .ps-sm-4 { padding-left: var(--u-4); }
  .ps-sm-5 { padding-left: var(--u-5); }
  .pe-sm-0 { padding-right: 0; }
  .pe-sm-1 { padding-right: var(--u-1); }
  .pe-sm-2 { padding-right: var(--u-2); }
  .pe-sm-3 { padding-right: var(--u-3); }
  .pe-sm-4 { padding-right: var(--u-4); }
  .pe-sm-5 { padding-right: var(--u-5); }
  .px-sm-0 { padding-left: 0; padding-right: 0; }
  .px-sm-1 { padding-left: var(--u-1); padding-right: var(--u-1); }
  .px-sm-2 { padding-left: var(--u-2); padding-right: var(--u-2); }
  .px-sm-3 { padding-left: var(--u-3); padding-right: var(--u-3); }
  .px-sm-4 { padding-left: var(--u-4); padding-right: var(--u-4); }
  .px-sm-5 { padding-left: var(--u-5); padding-right: var(--u-5); }
  .py-sm-0 { padding-top: 0; padding-bottom: 0; }
  .py-sm-1 { padding-top: var(--u-1); padding-bottom: var(--u-1); }
  .py-sm-2 { padding-top: var(--u-2); padding-bottom: var(--u-2); }
  .py-sm-3 { padding-top: var(--u-3); padding-bottom: var(--u-3); }
  .py-sm-4 { padding-top: var(--u-4); padding-bottom: var(--u-4); }
  .py-sm-5 { padding-top: var(--u-5); padding-bottom: var(--u-5); }
}

@media (min-width: 768px) {
  .m-md-0 { margin: 0; }
  .m-md-1 { margin: var(--u-1); }
  .m-md-2 { margin: var(--u-2); }
  .m-md-3 { margin: var(--u-3); }
  .m-md-4 { margin: var(--u-4); }
  .m-md-5 { margin: var(--u-5); }
  .mt-md-0 { margin-top: 0; }
  .mt-md-1 { margin-top: var(--u-1); }
  .mt-md-2 { margin-top: var(--u-2); }
  .mt-md-3 { margin-top: var(--u-3); }
  .mt-md-4 { margin-top: var(--u-4); }
  .mt-md-5 { margin-top: var(--u-5); }
  .mb-md-0 { margin-bottom: 0; }
  .mb-md-1 { margin-bottom: var(--u-1); }
  .mb-md-2 { margin-bottom: var(--u-2); }
  .mb-md-3 { margin-bottom: var(--u-3); }
  .mb-md-4 { margin-bottom: var(--u-4); }
  .mb-md-5 { margin-bottom: var(--u-5); }
  .ms-md-0 { margin-left: 0; }
  .ms-md-1 { margin-left: var(--u-1); }
  .ms-md-2 { margin-left: var(--u-2); }
  .ms-md-3 { margin-left: var(--u-3); }
  .ms-md-4 { margin-left: var(--u-4); }
  .ms-md-5 { margin-left: var(--u-5); }
  .me-md-0 { margin-right: 0; }
  .me-md-1 { margin-right: var(--u-1); }
  .me-md-2 { margin-right: var(--u-2); }
  .me-md-3 { margin-right: var(--u-3); }
  .me-md-4 { margin-right: var(--u-4); }
  .me-md-5 { margin-right: var(--u-5); }
  .mx-md-0 { margin-left: 0; margin-right: 0; }
  .mx-md-1 { margin-left: var(--u-1); margin-right: var(--u-1); }
  .mx-md-2 { margin-left: var(--u-2); margin-right: var(--u-2); }
  .mx-md-3 { margin-left: var(--u-3); margin-right: var(--u-3); }
  .mx-md-4 { margin-left: var(--u-4); margin-right: var(--u-4); }
  .mx-md-5 { margin-left: var(--u-5); margin-right: var(--u-5); }
  .my-md-0 { margin-top: 0; margin-bottom: 0; }
  .my-md-1 { margin-top: var(--u-1); margin-bottom: var(--u-1); }
  .my-md-2 { margin-top: var(--u-2); margin-bottom: var(--u-2); }
  .my-md-3 { margin-top: var(--u-3); margin-bottom: var(--u-3); }
  .my-md-4 { margin-top: var(--u-4); margin-bottom: var(--u-4); }
  .my-md-5 { margin-top: var(--u-5); margin-bottom: var(--u-5); }
  .p-md-0 { padding: 0; }
  .p-md-1 { padding: var(--u-1); }
  .p-md-2 { padding: var(--u-2); }
  .p-md-3 { padding: var(--u-3); }
  .p-md-4 { padding: var(--u-4); }
  .p-md-5 { padding: var(--u-5); }
  .pt-md-0 { padding-top: 0; }
  .pt-md-1 { padding-top: var(--u-1); }
  .pt-md-2 { padding-top: var(--u-2); }
  .pt-md-3 { padding-top: var(--u-3); }
  .pt-md-4 { padding-top: var(--u-4); }
  .pt-md-5 { padding-top: var(--u-5); }
  .pb-md-0 { padding-bottom: 0; }
  .pb-md-1 { padding-bottom: var(--u-1); }
  .pb-md-2 { padding-bottom: var(--u-2); }
  .pb-md-3 { padding-bottom: var(--u-3); }
  .pb-md-4 { padding-bottom: var(--u-4); }
  .pb-md-5 { padding-bottom: var(--u-5); }
  .ps-md-0 { padding-left: 0; }
  .ps-md-1 { padding-left: var(--u-1); }
  .ps-md-2 { padding-left: var(--u-2); }
  .ps-md-3 { padding-left: var(--u-3); }
  .ps-md-4 { padding-left: var(--u-4); }
  .ps-md-5 { padding-left: var(--u-5); }
  .pe-md-0 { padding-right: 0; }
  .pe-md-1 { padding-right: var(--u-1); }
  .pe-md-2 { padding-right: var(--u-2); }
  .pe-md-3 { padding-right: var(--u-3); }
  .pe-md-4 { padding-right: var(--u-4); }
  .pe-md-5 { padding-right: var(--u-5); }
  .px-md-0 { padding-left: 0; padding-right: 0; }
  .px-md-1 { padding-left: var(--u-1); padding-right: var(--u-1); }
  .px-md-2 { padding-left: var(--u-2); padding-right: var(--u-2); }
  .px-md-3 { padding-left: var(--u-3); padding-right: var(--u-3); }
  .px-md-4 { padding-left: var(--u-4); padding-right: var(--u-4); }
  .px-md-5 { padding-left: var(--u-5); padding-right: var(--u-5); }
  .py-md-0 { padding-top: 0; padding-bottom: 0; }
  .py-md-1 { padding-top: var(--u-1); padding-bottom: var(--u-1); }
  .py-md-2 { padding-top: var(--u-2); padding-bottom: var(--u-2); }
  .py-md-3 { padding-top: var(--u-3); padding-bottom: var(--u-3); }
  .py-md-4 { padding-top: var(--u-4); padding-bottom: var(--u-4); }
  .py-md-5 { padding-top: var(--u-5); padding-bottom: var(--u-5); }
}

@media (min-width: 992px) {
  .m-lg-0 { margin: 0; }
  .m-lg-1 { margin: var(--u-1); }
  .m-lg-2 { margin: var(--u-2); }
  .m-lg-3 { margin: var(--u-3); }
  .m-lg-4 { margin: var(--u-4); }
  .m-lg-5 { margin: var(--u-5); }
  .mt-lg-0 { margin-top: 0; }
  .mt-lg-1 { margin-top: var(--u-1); }
  .mt-lg-2 { margin-top: var(--u-2); }
  .mt-lg-3 { margin-top: var(--u-3); }
  .mt-lg-4 { margin-top: var(--u-4); }
  .mt-lg-5 { margin-top: var(--u-5); }
  .mb-lg-0 { margin-bottom: 0; }
  .mb-lg-1 { margin-bottom: var(--u-1); }
  .mb-lg-2 { margin-bottom: var(--u-2); }
  .mb-lg-3 { margin-bottom: var(--u-3); }
  .mb-lg-4 { margin-bottom: var(--u-4); }
  .mb-lg-5 { margin-bottom: var(--u-5); }
  .ms-lg-0 { margin-left: 0; }
  .ms-lg-1 { margin-left: var(--u-1); }
  .ms-lg-2 { margin-left: var(--u-2); }
  .ms-lg-3 { margin-left: var(--u-3); }
  .ms-lg-4 { margin-left: var(--u-4); }
  .ms-lg-5 { margin-left: var(--u-5); }
  .me-lg-0 { margin-right: 0; }
  .me-lg-1 { margin-right: var(--u-1); }
  .me-lg-2 { margin-right: var(--u-2); }
  .me-lg-3 { margin-right: var(--u-3); }
  .me-lg-4 { margin-right: var(--u-4); }
  .me-lg-5 { margin-right: var(--u-5); }
  .mx-lg-0 { margin-left: 0; margin-right: 0; }
  .mx-lg-1 { margin-left: var(--u-1); margin-right: var(--u-1); }
  .mx-lg-2 { margin-left: var(--u-2); margin-right: var(--u-2); }
  .mx-lg-3 { margin-left: var(--u-3); margin-right: var(--u-3); }
  .mx-lg-4 { margin-left: var(--u-4); margin-right: var(--u-4); }
  .mx-lg-5 { margin-left: var(--u-5); margin-right: var(--u-5); }
  .my-lg-0 { margin-top: 0; margin-bottom: 0; }
  .my-lg-1 { margin-top: var(--u-1); margin-bottom: var(--u-1); }
  .my-lg-2 { margin-top: var(--u-2); margin-bottom: var(--u-2); }
  .my-lg-3 { margin-top: var(--u-3); margin-bottom: var(--u-3); }
  .my-lg-4 { margin-top: var(--u-4); margin-bottom: var(--u-4); }
  .my-lg-5 { margin-top: var(--u-5); margin-bottom: var(--u-5); }
  .p-lg-0 { padding: 0; }
  .p-lg-1 { padding: var(--u-1); }
  .p-lg-2 { padding: var(--u-2); }
  .p-lg-3 { padding: var(--u-3); }
  .p-lg-4 { padding: var(--u-4); }
  .p-lg-5 { padding: var(--u-5); }
  .pt-lg-0 { padding-top: 0; }
  .pt-lg-1 { padding-top: var(--u-1); }
  .pt-lg-2 { padding-top: var(--u-2); }
  .pt-lg-3 { padding-top: var(--u-3); }
  .pt-lg-4 { padding-top: var(--u-4); }
  .pt-lg-5 { padding-top: var(--u-5); }
  .pb-lg-0 { padding-bottom: 0; }
  .pb-lg-1 { padding-bottom: var(--u-1); }
  .pb-lg-2 { padding-bottom: var(--u-2); }
  .pb-lg-3 { padding-bottom: var(--u-3); }
  .pb-lg-4 { padding-bottom: var(--u-4); }
  .pb-lg-5 { padding-bottom: var(--u-5); }
  .ps-lg-0 { padding-left: 0; }
  .ps-lg-1 { padding-left: var(--u-1); }
  .ps-lg-2 { padding-left: var(--u-2); }
  .ps-lg-3 { padding-left: var(--u-3); }
  .ps-lg-4 { padding-left: var(--u-4); }
  .ps-lg-5 { padding-left: var(--u-5); }
  .pe-lg-0 { padding-right: 0; }
  .pe-lg-1 { padding-right: var(--u-1); }
  .pe-lg-2 { padding-right: var(--u-2); }
  .pe-lg-3 { padding-right: var(--u-3); }
  .pe-lg-4 { padding-right: var(--u-4); }
  .pe-lg-5 { padding-right: var(--u-5); }
  .px-lg-0 { padding-left: 0; padding-right: 0; }
  .px-lg-1 { padding-left: var(--u-1); padding-right: var(--u-1); }
  .px-lg-2 { padding-left: var(--u-2); padding-right: var(--u-2); }
  .px-lg-3 { padding-left: var(--u-3); padding-right: var(--u-3); }
  .px-lg-4 { padding-left: var(--u-4); padding-right: var(--u-4); }
  .px-lg-5 { padding-left: var(--u-5); padding-right: var(--u-5); }
  .py-lg-0 { padding-top: 0; padding-bottom: 0; }
  .py-lg-1 { padding-top: var(--u-1); padding-bottom: var(--u-1); }
  .py-lg-2 { padding-top: var(--u-2); padding-bottom: var(--u-2); }
  .py-lg-3 { padding-top: var(--u-3); padding-bottom: var(--u-3); }
  .py-lg-4 { padding-top: var(--u-4); padding-bottom: var(--u-4); }
  .py-lg-5 { padding-top: var(--u-5); padding-bottom: var(--u-5); }
}

@media (min-width: 1200px) {
  .m-xl-0 { margin: 0; }
  .m-xl-1 { margin: var(--u-1); }
  .m-xl-2 { margin: var(--u-2); }
  .m-xl-3 { margin: var(--u-3); }
  .m-xl-4 { margin: var(--u-4); }
  .m-xl-5 { margin: var(--u-5); }
  .mt-xl-0 { margin-top: 0; }
  .mt-xl-1 { margin-top: var(--u-1); }
  .mt-xl-2 { margin-top: var(--u-2); }
  .mt-xl-3 { margin-top: var(--u-3); }
  .mt-xl-4 { margin-top: var(--u-4); }
  .mt-xl-5 { margin-top: var(--u-5); }
  .mb-xl-0 { margin-bottom: 0; }
  .mb-xl-1 { margin-bottom: var(--u-1); }
  .mb-xl-2 { margin-bottom: var(--u-2); }
  .mb-xl-3 { margin-bottom: var(--u-3); }
  .mb-xl-4 { margin-bottom: var(--u-4); }
  .mb-xl-5 { margin-bottom: var(--u-5); }
  .ms-xl-0 { margin-left: 0; }
  .ms-xl-1 { margin-left: var(--u-1); }
  .ms-xl-2 { margin-left: var(--u-2); }
  .ms-xl-3 { margin-left: var(--u-3); }
  .ms-xl-4 { margin-left: var(--u-4); }
  .ms-xl-5 { margin-left: var(--u-5); }
  .me-xl-0 { margin-right: 0; }
  .me-xl-1 { margin-right: var(--u-1); }
  .me-xl-2 { margin-right: var(--u-2); }
  .me-xl-3 { margin-right: var(--u-3); }
  .me-xl-4 { margin-right: var(--u-4); }
  .me-xl-5 { margin-right: var(--u-5); }
  .mx-xl-0 { margin-left: 0; margin-right: 0; }
  .mx-xl-1 { margin-left: var(--u-1); margin-right: var(--u-1); }
  .mx-xl-2 { margin-left: var(--u-2); margin-right: var(--u-2); }
  .mx-xl-3 { margin-left: var(--u-3); margin-right: var(--u-3); }
  .mx-xl-4 { margin-left: var(--u-4); margin-right: var(--u-4); }
  .mx-xl-5 { margin-left: var(--u-5); margin-right: var(--u-5); }
  .my-xl-0 { margin-top: 0; margin-bottom: 0; }
  .my-xl-1 { margin-top: var(--u-1); margin-bottom: var(--u-1); }
  .my-xl-2 { margin-top: var(--u-2); margin-bottom: var(--u-2); }
  .my-xl-3 { margin-top: var(--u-3); margin-bottom: var(--u-3); }
  .my-xl-4 { margin-top: var(--u-4); margin-bottom: var(--u-4); }
  .my-xl-5 { margin-top: var(--u-5); margin-bottom: var(--u-5); }
  .p-xl-0 { padding: 0; }
  .p-xl-1 { padding: var(--u-1); }
  .p-xl-2 { padding: var(--u-2); }
  .p-xl-3 { padding: var(--u-3); }
  .p-xl-4 { padding: var(--u-4); }
  .p-xl-5 { padding: var(--u-5); }
  .pt-xl-0 { padding-top: 0; }
  .pt-xl-1 { padding-top: var(--u-1); }
  .pt-xl-2 { padding-top: var(--u-2); }
  .pt-xl-3 { padding-top: var(--u-3); }
  .pt-xl-4 { padding-top: var(--u-4); }
  .pt-xl-5 { padding-top: var(--u-5); }
  .pb-xl-0 { padding-bottom: 0; }
  .pb-xl-1 { padding-bottom: var(--u-1); }
  .pb-xl-2 { padding-bottom: var(--u-2); }
  .pb-xl-3 { padding-bottom: var(--u-3); }
  .pb-xl-4 { padding-bottom: var(--u-4); }
  .pb-xl-5 { padding-bottom: var(--u-5); }
  .ps-xl-0 { padding-left: 0; }
  .ps-xl-1 { padding-left: var(--u-1); }
  .ps-xl-2 { padding-left: var(--u-2); }
  .ps-xl-3 { padding-left: var(--u-3); }
  .ps-xl-4 { padding-left: var(--u-4); }
  .ps-xl-5 { padding-left: var(--u-5); }
  .pe-xl-0 { padding-right: 0; }
  .pe-xl-1 { padding-right: var(--u-1); }
  .pe-xl-2 { padding-right: var(--u-2); }
  .pe-xl-3 { padding-right: var(--u-3); }
  .pe-xl-4 { padding-right: var(--u-4); }
  .pe-xl-5 { padding-right: var(--u-5); }
  .px-xl-0 { padding-left: 0; padding-right: 0; }
  .px-xl-1 { padding-left: var(--u-1); padding-right: var(--u-1); }
  .px-xl-2 { padding-left: var(--u-2); padding-right: var(--u-2); }
  .px-xl-3 { padding-left: var(--u-3); padding-right: var(--u-3); }
  .px-xl-4 { padding-left: var(--u-4); padding-right: var(--u-4); }
  .px-xl-5 { padding-left: var(--u-5); padding-right: var(--u-5); }
  .py-xl-0 { padding-top: 0; padding-bottom: 0; }
  .py-xl-1 { padding-top: var(--u-1); padding-bottom: var(--u-1); }
  .py-xl-2 { padding-top: var(--u-2); padding-bottom: var(--u-2); }
  .py-xl-3 { padding-top: var(--u-3); padding-bottom: var(--u-3); }
  .py-xl-4 { padding-top: var(--u-4); padding-bottom: var(--u-4); }
  .py-xl-5 { padding-top: var(--u-5); padding-bottom: var(--u-5); }
}

@media (min-width: 1400px) {
  .m-xxl-0 { margin: 0; }
  .m-xxl-1 { margin: var(--u-1); }
  .m-xxl-2 { margin: var(--u-2); }
  .m-xxl-3 { margin: var(--u-3); }
  .m-xxl-4 { margin: var(--u-4); }
  .m-xxl-5 { margin: var(--u-5); }
  .mt-xxl-0 { margin-top: 0; }
  .mt-xxl-1 { margin-top: var(--u-1); }
  .mt-xxl-2 { margin-top: var(--u-2); }
  .mt-xxl-3 { margin-top: var(--u-3); }
  .mt-xxl-4 { margin-top: var(--u-4); }
  .mt-xxl-5 { margin-top: var(--u-5); }
  .mb-xxl-0 { margin-bottom: 0; }
  .mb-xxl-1 { margin-bottom: var(--u-1); }
  .mb-xxl-2 { margin-bottom: var(--u-2); }
  .mb-xxl-3 { margin-bottom: var(--u-3); }
  .mb-xxl-4 { margin-bottom: var(--u-4); }
  .mb-xxl-5 { margin-bottom: var(--u-5); }
  .ms-xxl-0 { margin-left: 0; }
  .ms-xxl-1 { margin-left: var(--u-1); }
  .ms-xxl-2 { margin-left: var(--u-2); }
  .ms-xxl-3 { margin-left: var(--u-3); }
  .ms-xxl-4 { margin-left: var(--u-4); }
  .ms-xxl-5 { margin-left: var(--u-5); }
  .me-xxl-0 { margin-right: 0; }
  .me-xxl-1 { margin-right: var(--u-1); }
  .me-xxl-2 { margin-right: var(--u-2); }
  .me-xxl-3 { margin-right: var(--u-3); }
  .me-xxl-4 { margin-right: var(--u-4); }
  .me-xxl-5 { margin-right: var(--u-5); }
  .mx-xxl-0 { margin-left: 0; margin-right: 0; }
  .mx-xxl-1 { margin-left: var(--u-1); margin-right: var(--u-1); }
  .mx-xxl-2 { margin-left: var(--u-2); margin-right: var(--u-2); }
  .mx-xxl-3 { margin-left: var(--u-3); margin-right: var(--u-3); }
  .mx-xxl-4 { margin-left: var(--u-4); margin-right: var(--u-4); }
  .mx-xxl-5 { margin-left: var(--u-5); margin-right: var(--u-5); }
  .my-xxl-0 { margin-top: 0; margin-bottom: 0; }
  .my-xxl-1 { margin-top: var(--u-1); margin-bottom: var(--u-1); }
  .my-xxl-2 { margin-top: var(--u-2); margin-bottom: var(--u-2); }
  .my-xxl-3 { margin-top: var(--u-3); margin-bottom: var(--u-3); }
  .my-xxl-4 { margin-top: var(--u-4); margin-bottom: var(--u-4); }
  .my-xxl-5 { margin-top: var(--u-5); margin-bottom: var(--u-5); }
  .p-xxl-0 { padding: 0; }
  .p-xxl-1 { padding: var(--u-1); }
  .p-xxl-2 { padding: var(--u-2); }
  .p-xxl-3 { padding: var(--u-3); }
  .p-xxl-4 { padding: var(--u-4); }
  .p-xxl-5 { padding: var(--u-5); }
  .pt-xxl-0 { padding-top: 0; }
  .pt-xxl-1 { padding-top: var(--u-1); }
  .pt-xxl-2 { padding-top: var(--u-2); }
  .pt-xxl-3 { padding-top: var(--u-3); }
  .pt-xxl-4 { padding-top: var(--u-4); }
  .pt-xxl-5 { padding-top: var(--u-5); }
  .pb-xxl-0 { padding-bottom: 0; }
  .pb-xxl-1 { padding-bottom: var(--u-1); }
  .pb-xxl-2 { padding-bottom: var(--u-2); }
  .pb-xxl-3 { padding-bottom: var(--u-3); }
  .pb-xxl-4 { padding-bottom: var(--u-4); }
  .pb-xxl-5 { padding-bottom: var(--u-5); }
  .ps-xxl-0 { padding-left: 0; }
  .ps-xxl-1 { padding-left: var(--u-1); }
  .ps-xxl-2 { padding-left: var(--u-2); }
  .ps-xxl-3 { padding-left: var(--u-3); }
  .ps-xxl-4 { padding-left: var(--u-4); }
  .ps-xxl-5 { padding-left: var(--u-5); }
  .pe-xxl-0 { padding-right: 0; }
  .pe-xxl-1 { padding-right: var(--u-1); }
  .pe-xxl-2 { padding-right: var(--u-2); }
  .pe-xxl-3 { padding-right: var(--u-3); }
  .pe-xxl-4 { padding-right: var(--u-4); }
  .pe-xxl-5 { padding-right: var(--u-5); }
  .px-xxl-0 { padding-left: 0; padding-right: 0; }
  .px-xxl-1 { padding-left: var(--u-1); padding-right: var(--u-1); }
  .px-xxl-2 { padding-left: var(--u-2); padding-right: var(--u-2); }
  .px-xxl-3 { padding-left: var(--u-3); padding-right: var(--u-3); }
  .px-xxl-4 { padding-left: var(--u-4); padding-right: var(--u-4); }
  .px-xxl-5 { padding-left: var(--u-5); padding-right: var(--u-5); }
  .py-xxl-0 { padding-top: 0; padding-bottom: 0; }
  .py-xxl-1 { padding-top: var(--u-1); padding-bottom: var(--u-1); }
  .py-xxl-2 { padding-top: var(--u-2); padding-bottom: var(--u-2); }
  .py-xxl-3 { padding-top: var(--u-3); padding-bottom: var(--u-3); }
  .py-xxl-4 { padding-top: var(--u-4); padding-bottom: var(--u-4); }
  .py-xxl-5 { padding-top: var(--u-5); padding-bottom: var(--u-5); }
}