/* ══════════════════════════════════════════════════════════════════════════
   JOICON — Pazaryerlerinde Akıllı Büyüme
   Palet logodan örneklendi: lacivert gövde, turuncu vurgu, mavi bağlantılar.

   ⚠️ ESKİ DEĞİŞKEN ADLARI KORUNUYOR (--brand, --muted, --line, --ink, --bg).
   Görünümlerde 60'tan fazla satır içi `var(--muted)` var; adları değiştirmek
   onları sessizce siyaha düşürürdü. Yeni tokenlar asıl kaynak, eskiler takma ad.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Marka (logodan örneklendi) ── */
  --gece:#0A1440;        /* en derin lacivert: üst menü zemini */
  --lacivert:#16296E;    /* "JOI" laciverti */
  --yol:#3B82E8;         /* devre yollarının mavisi */
  --yol-soluk:#7FB3F0;
  --ates:#F2570C;        /* "CON" turuncusu — TEK vurgu */
  --ates-koyu:#D94A05;
  --ates-sicak:#FF8A3D;  /* güç çubuğunun üst tonu */

  /* ── Nötrler: lacivert eğilimli, seçilmiş ── */
  --zemin:#F2F5FB;
  --yuzey:#FFFFFF;
  --yuzey-2:#F7F9FE;
  --cizgi:#DBE3F3;
  --cizgi-2:#EAEFF9;
  --metin:#0B1226;
  --metin-2:#4C5B7D;
  --metin-3:#7C89A8;

  /* ── Anlam renkleri: vurgudan AYRI ──
     Turuncu markanın kendisi; "hata" anlamı taşımamalı, yoksa her birincil
     düğme uyarı gibi okunur. */
  --iyi:#0E7A57;      --iyi-yz:#E3F5EE;      --iyi-cizgi:#A8DCC7;
  --uyari:#A25E00;    --uyari-yz:#FBF0DC;    --uyari-cizgi:#E8C98A;
  --kritik:#B3221A;   --kritik-yz:#FBE7E4;   --kritik-cizgi:#EFAFA8;

  --r:4px;
  --r-sm:3px;
  --gol:0 1px 2px rgba(11,18,38,.05), 0 8px 24px -14px rgba(11,18,38,.16);

  /* İçerik genişliği. Eskiden 1440px'e kapalıydı ve geniş monitörde sağda solda
     boş şerit kalıyordu; bu ekranların hepsi geniş tablo taşıdığı için o alan
     ziyandı. Üst menü ile içerik AYNI değişkeni kullanır — biri kapalı diğeri
     tam genişlik olursa logo ve menü tabloya göre içeri kaçmış görünür. */
  --icerik-en:100%;

  --f-bas:'Segoe UI Variable Display','Segoe UI',system-ui,-apple-system,sans-serif;
  --f-gvd:'Segoe UI Variable Text','Segoe UI',system-ui,-apple-system,sans-serif;
  --f-veri:'Cascadia Mono','Cascadia Code',Consolas,ui-monospace,monospace;

  /* ── Eski adlar (görünümlerdeki satır içi kullanımlar için) ── */
  --brand:var(--ates);
  --brand-dk:var(--ates-koyu);
  --ink:var(--metin);
  --muted:var(--metin-2);
  --line:var(--cizgi);
  --bg:var(--zemin);
  --sidebar:var(--gece);
}

/* ── Tema: Açık / Koyu / Sistem ──
   Seçim sunucuda çerezden okunup <html data-tema> olarak basılır (TemaCerezi).
   "acik": her zaman açık · "koyu": her zaman koyu · "sistem" (varsayılan): Windows'u izler.
   ⛔ Koyu palet İKİ yerde ve BİREBİR aynı olmalı (elle "Koyu" + "Sistem"de Windows koyu):
   CSS'te bir bloğu iki seçiciyle paylaştırmanın medya sorgusu içinde yolu yok.
   TemaTests.Koyu_palet_elle_secimde_ve_SISTEMDE_birebir_ayni eşitliği kilitler. */
:root{color-scheme:light dark}
:root[data-tema="acik"]{color-scheme:light}

:root[data-tema="koyu"]{
    color-scheme:dark;

    --zemin:#070C1D;
    --yuzey:#0E1631;
    --yuzey-2:#131C3B;
    --cizgi:#212E58;
    --cizgi-2:#182244;
    --metin:#E9EEFB;
    --metin-2:#97A4C7;
    --metin-3:#6B7899;

    --iyi:#3ECB96;     --iyi-yz:#0C2B22;     --iyi-cizgi:#1C5A45;
    --uyari:#E5A63F;   --uyari-yz:#2E2210;   --uyari-cizgi:#6B4E18;
    --kritik:#F5786A;  --kritik-yz:#33150F;  --kritik-cizgi:#7A2E24;

    --gol:0 1px 2px rgba(0,0,0,.45), 0 8px 24px -14px rgba(0,0,0,.7);
}

@media (prefers-color-scheme:dark){
  :root:not([data-tema="acik"]){
    color-scheme:dark;

    --zemin:#070C1D;
    --yuzey:#0E1631;
    --yuzey-2:#131C3B;
    --cizgi:#212E58;
    --cizgi-2:#182244;
    --metin:#E9EEFB;
    --metin-2:#97A4C7;
    --metin-3:#6B7899;

    --iyi:#3ECB96;     --iyi-yz:#0C2B22;     --iyi-cizgi:#1C5A45;
    --uyari:#E5A63F;   --uyari-yz:#2E2210;   --uyari-cizgi:#6B4E18;
    --kritik:#F5786A;  --kritik-yz:#33150F;  --kritik-cizgi:#7A2E24;

    --gol:0 1px 2px rgba(0,0,0,.45), 0 8px 24px -14px rgba(0,0,0,.7);
  }
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%}

body{
  font-family:var(--f-gvd);
  font-size:15px;
  line-height:1.55;
  color:var(--metin);
  background:var(--zemin);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{font-family:var(--f-bas);text-wrap:balance;margin:0}

:focus-visible{outline:2px solid var(--ates);outline-offset:2px;border-radius:2px}

/* Sayılar hizalansın: bu ekranlar baştan sona adet, tutar ve kimlik. */
.veri,td,th,input[type=number]{font-variant-numeric:tabular-nums}
.veri{font-family:var(--f-veri)}

/* ─────────────────────────── KABUK ───────────────────────────
   Üst menü düzeni: kabuk artık satır değil SÜTUN. */

.shell{display:flex;flex-direction:column;min-height:100vh}

/* ─────────────────────────── ÜST MENÜ ─────────────────────────── */

.topnav{
  position:sticky;top:0;z-index:40;
  background:var(--gece);
  border-bottom:1px solid rgba(59,130,232,.22);
}

.topnav-ic{
  max-width:var(--icerik-en);margin:0 auto;
  padding:0 20px;
  display:flex;align-items:center;gap:24px;
  min-height:58px;
}

/* Marka: gerçek logonun amblemi (saydam PNG) + kelime. Lacivert "C" koyu menü zemininde erimesin diye ince ışık. */
.marka{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.marka .amblem{
  height:40px;width:auto;flex:none;display:block;
  filter:drop-shadow(0 0 1px rgba(127,179,240,.55));
}

.marka .kelime{
  font-family:var(--f-bas);font-size:18px;font-weight:800;letter-spacing:-.02em;
  color:#fff;line-height:1;
}
.marka .kelime b{color:var(--ates-sicak);font-weight:800}
.marka .kelime span{
  display:block;margin-top:3px;
  font-size:7.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--yol-soluk);
}

/* Gruplu menü: açılır liste mutlak konumlu — kap KIRPMAMALI (overflow yok). */
.topnav-menu{display:flex;gap:2px;flex:1;min-width:0;flex-wrap:wrap}

.topnav-menu a{
  padding:18px 12px 17px;
  font-size:13.5px;font-weight:500;
  color:#A9BBE4;text-decoration:none;white-space:nowrap;
  border-bottom:2px solid transparent;
  transition:color .14s ease,border-color .14s ease;
}
.topnav-menu a:hover{color:#fff}
.topnav-menu a.active{color:#fff;font-weight:600;border-bottom-color:var(--ates)}

/* Açılır grup: başlık üst menü bağlantısıyla aynı görünür; liste hover ve odakla açılır. */
.menu-grup{position:relative;display:flex}
.menu-grup-bas{
  font:inherit;font-size:13.5px;font-weight:500;
  padding:18px 12px 17px;background:none;border:0;cursor:pointer;
  color:#A9BBE4;white-space:nowrap;
  border-bottom:2px solid transparent;
  transition:color .14s ease,border-color .14s ease;
}
.menu-grup-bas span{font-size:10px;opacity:.7;margin-left:2px}
.menu-grup:hover .menu-grup-bas,.menu-grup:focus-within .menu-grup-bas{color:#fff}
.menu-grup.active .menu-grup-bas{color:#fff;font-weight:600;border-bottom-color:var(--ates)}
.menu-grup-icerik{
  display:none;position:absolute;top:100%;left:0;z-index:60;
  min-width:210px;padding:6px 0;
  background:var(--gece);
  border:1px solid rgba(59,130,232,.28);border-top:0;
  border-radius:0 0 var(--r) var(--r);
  box-shadow:0 12px 28px rgba(5,10,40,.35);
}
.menu-grup:hover .menu-grup-icerik,.menu-grup:focus-within .menu-grup-icerik{display:block}
.topnav-menu .menu-grup-icerik a{
  display:block;padding:9px 16px;
  border-bottom:0;border-left:2px solid transparent;
}
.topnav-menu .menu-grup-icerik a:hover{background:rgba(59,130,232,.14)}
.topnav-menu .menu-grup-icerik a.active{border-left-color:var(--ates);background:rgba(59,130,232,.10)}

.topnav-sag{display:flex;align-items:center;gap:10px;flex:none}
.topnav-sag .who{font-size:12.5px;color:#A9BBE4;white-space:nowrap}

/* Üst menüdeki çıkış düğmesi koyu zeminde durduğu için kendi biçimi var */
.topnav-sag .btn.secondary{
  background:transparent;color:#C8D5F0;
  border:1px solid rgba(127,179,240,.32);
}
.topnav-sag .btn.secondary:hover{background:rgba(59,130,232,.16);color:#fff}

/* Tema seçici (Açık / Koyu / Sistem): üst menünün koyu zemininde, çıkış düğmesiyle aynı dil.
   Seçili olan aria-pressed="true" — ekran okuyucu da hangisinin etkin olduğunu duyar. */
.tema-secici{
  display:inline-flex;margin:0;padding:2px;gap:2px;
  border:1px solid rgba(127,179,240,.32);border-radius:var(--r);
}
.tema-dugme{
  font:inherit;font-size:13px;line-height:1;
  width:28px;height:24px;padding:0;border:0;border-radius:var(--r-sm);
  background:transparent;color:#C8D5F0;cursor:pointer;
}
.tema-dugme:hover{background:rgba(59,130,232,.16);color:#fff}
.tema-dugme[aria-pressed="true"]{background:rgba(127,179,240,.22);color:#fff}

/* ─────────────────────────── İÇERİK ─────────────────────────── */

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.content{flex:1;width:100%;max-width:var(--icerik-en);margin:0 auto;padding:22px 20px 48px}

.page-actions{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:18px;flex-wrap:wrap;
}
.page-actions-title{
  font-family:var(--f-bas);
  font-size:20px;font-weight:800;letter-spacing:-.025em;margin:0;
}
.page-actions-btns{display:flex;gap:8px;flex-wrap:wrap}

/* ─────────────────────────── PANEL ─────────────────────────── */

.panel{
  background:var(--yuzey);
  border:1px solid var(--cizgi);
  border-radius:var(--r);
  box-shadow:var(--gol);
  padding:0 0 14px;
  margin-bottom:16px;
  overflow:hidden;
}
.panel:last-child{margin-bottom:0}

/* Tablo taşıyan panelde alt boşluk yok: satır çizgisi kenara dayanmalı. */
.panel:has(> table.grid){padding-bottom:0}

.panel-head{
  font-family:var(--f-bas);
  font-size:13.5px;font-weight:700;letter-spacing:-.01em;
  padding:12px 16px;
  border-bottom:1px solid var(--cizgi-2);
  background:var(--yuzey-2);
}

.form-group-label{
  font-family:var(--f-bas);
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--metin-3);
  padding:16px 16px 8px;
}

.form-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:14px;padding:14px 16px 0;
}
.form-field{display:flex;flex-direction:column;gap:5px}
.form-field.full{grid-column:1/-1}
.form-field span{font-size:12px;font-weight:600;color:var(--metin-2)}

.form-field input,.form-field select,.form-field textarea{
  font:inherit;font-size:14px;
  padding:8px 10px;
  border:1px solid var(--cizgi);
  border-radius:var(--r-sm);
  background:var(--yuzey);
  color:var(--metin);
  width:100%;
}
.form-field input:hover,.form-field select:hover{border-color:var(--metin-3)}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
  outline:none;
  border-color:var(--yol);
  box-shadow:0 0 0 3px rgba(59,130,232,.18);
}
.form-field input::placeholder{color:var(--metin-3)}

/* ─────────────────────────── DÜĞMELER ─────────────────────────── */

.btn{
  font:inherit;font-size:13px;font-weight:600;
  padding:8px 14px;
  border:1px solid transparent;
  border-radius:var(--r-sm);
  cursor:pointer;text-decoration:none;
  display:inline-block;white-space:nowrap;
  transition:background .14s ease,border-color .14s ease;
}
.btn.primary{background:var(--ates);color:#fff}
.btn.primary:hover{background:var(--ates-koyu)}
.btn.secondary{background:var(--yuzey);color:var(--metin);border-color:var(--cizgi)}
.btn.secondary:hover{background:var(--yuzey-2);border-color:var(--metin-3)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}

/* ─────────────────────────── TABLO ─────────────────────────── */

table.grid{width:100%;border-collapse:collapse;background:var(--yuzey)}

table.grid th{
  font-family:var(--f-bas);
  font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--metin-3);
  background:var(--yuzey-2);
  padding:9px 14px;text-align:left;white-space:nowrap;
  border-bottom:1px solid var(--cizgi-2);
}
table.grid td{
  padding:10px 14px;text-align:left;font-size:13.5px;
  color:var(--metin-2);
  border-bottom:1px solid var(--cizgi-2);
}
table.grid tbody tr:last-child td{border-bottom:0}
table.grid tbody tr:hover td{background:var(--yuzey-2)}
table.grid td a{color:var(--metin);font-weight:600;text-decoration:none}
table.grid td a:hover{color:var(--ates);text-decoration:underline}

/* Geniş içerik yana kaydırılır; sayfa gövdesi ASLA yatay kaymaz. */
.panel > table.grid{display:block;overflow-x:auto}
.panel > table.grid thead,.panel > table.grid tbody{display:table;width:100%}

/* ─────────────────────────── ŞERİTLER ─────────────────────────── */

.alert{
  padding:10px 14px;
  border-radius:var(--r-sm);
  border:1px solid transparent;
  margin-bottom:14px;
  font-size:13.5px;
}
.alert.info{background:var(--iyi-yz);border-color:var(--iyi-cizgi);color:var(--iyi)}
.alert.error{background:var(--kritik-yz);border-color:var(--kritik-cizgi);color:var(--kritik)}

/* ─────────────────────────── PULLAR ───────────────────────────
   Durum biçimde de kodlanır: renk tek başına yeterli değil. */

.pul{
  display:inline-flex;align-items:center;
  padding:2px 8px;border-radius:10px;
  font-family:var(--f-bas);
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  white-space:nowrap;
}
.pul.iyi{background:var(--iyi-yz);color:var(--iyi)}
.pul.uyari{background:var(--uyari-yz);color:var(--uyari)}
.pul.kritik{background:var(--kritik-yz);color:var(--kritik)}
.pul.sakin{background:var(--cizgi-2);color:var(--metin-2)}

/* ═══════════════ SATIR İÇİ DÜZENLEME ═══════════════
   Tablo satırındaki alan VERİDİR, form değil.

   Ürünler ekranında satır başına beş alan var; 50 satırda bu 250 çerçeve eder
   ve hepsini kutulamak ekranı eski bir yönetim paneline çevirir. Onun yerine
   alan sessiz durur (yalnız ince bir alt çizgi), üzerine gelince kutulanır,
   odaklanınca form alanlarıyla AYNI halkayı alır — dil bölünmez.

   Genişlikler satır içi style yerine sınıflarla verilir; ölçüler tek yerde. */

table.grid .satir-form{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0;
}

table.grid .satir-alan{
  font:inherit;
  font-family:var(--f-veri);          /* kod ve sayı: çevresindeki .veri ile hizalı */
  font-size:12.5px;
  color:var(--metin);
  padding:5px 7px;
  width:130px;
  background:transparent;
  border:1px solid transparent;
  border-bottom-color:var(--cizgi);   /* dokunulmamışken tek ipucu bu çizgi */
  border-radius:var(--r-sm);
  transition:background .12s ease,border-color .12s ease;
}
table.grid .satir-alan::placeholder{color:var(--metin-3)}

table.grid .satir-alan:hover{
  background:var(--yuzey-2);
  border-color:var(--cizgi);
}
table.grid .satir-alan:focus{
  outline:none;
  background:var(--yuzey);
  border-color:var(--yol);
  box-shadow:0 0 0 3px rgba(59,130,232,.18);
}

/* Sayı alanları sağa yaslı: rakamlar sütun hâlinde okunur.
   Artırma okları dar satırda gürültü; kaldırılıyor (klavye ve tekerlek çalışır). */
table.grid .satir-alan[type=number]{text-align:right}
table.grid .satir-alan[type=number]::-webkit-outer-spin-button,
table.grid .satir-alan[type=number]::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0;
}
table.grid .satir-alan[type=number]{-moz-appearance:textfield;appearance:textfield}

table.grid .satir-alan.dar{width:78px}
table.grid .satir-alan.orta{width:96px}
table.grid .satir-alan.genis{width:150px}

/* Satır içi onay kutusu: etiket tıklanabilir, hizası alanlarla aynı. */
table.grid .satir-onay{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12px;color:var(--metin-2);white-space:nowrap;cursor:pointer;
}
table.grid .satir-onay input{accent-color:var(--ates);margin:0}

/* Satır içi düğme alanlarla aynı yükseklikte dursun. */
table.grid .satir-form .btn{padding:6px 12px;font-size:12.5px}

@media (max-width:760px){
  .topnav-ic{flex-wrap:wrap;gap:12px;padding:10px 16px}
  .topnav-menu{order:3;width:100%;margin:0 -16px;padding:0 16px}
  .topnav-menu a,.menu-grup-bas{padding:12px 10px}
  .topnav-sag{margin-left:auto}
  .content{padding:18px 16px 40px}
}

/* ═══════════════════ TAM YÜKSEKLİK KALIBI ═══════════════════
   Liste ekranlarında sayfa gövdesi HİÇ kaymaz: başlık ve süzgeç şeridi sabit
   kalır, yalnız .sayfa-govde kayar. Görünüm `ViewData["TamYukseklik"]` yazarak
   kabul eder; yazmayan ekran bugünkü akan düzeninde kalır.

   min-height:0 her düzeyde ZORUNLU — flex öğelerinin varsayılan
   min-height:auto değeri içeriğin küçülmesini engeller ve kaydırmayı kırar. */

body.tam-yukseklik{height:100vh;height:100dvh;overflow:hidden}
body.tam-yukseklik .shell{height:100%;min-height:0}
body.tam-yukseklik .main{min-height:0;overflow:hidden}
body.tam-yukseklik .content{
  min-height:0;overflow:hidden;
  display:flex;flex-direction:column;
  padding-bottom:0;
}

.sayfa{display:flex;flex-direction:column;min-height:0;flex:1}
.sayfa-bas{flex:none}
.sayfa-govde{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}
.sayfa-alt{flex:none;margin-top:12px}

/* Kaydırma kabı KLAVYEYLE de kullanılabilmeli. Belge artık kaymadığı için
   (body.tam-yukseklik{overflow:hidden}) Space/PageDown/End tuşları sayfa
   açılır açılmaz hiçbir şey yapmıyordu: odak gövdedeydi ve gövde kaydırılamaz.
   _Layout bu kaba tabindex="-1" verip odağı yüklemede buraya alıyor; odak
   halkası bastırılır, çünkü bu bir denetim değil yalnız kaydırma kabıdır.
   Klavyeyle gezen kullanıcı Tab'ladığında halka satır bağlantılarında görünür. */
.sayfa-govde:focus{outline:none}

/* Yatay kaydırma .sayfa-govde'ye taşınır. Tablonun KENDİSİ kaydırma kabı
   olursa (display:block + overflow-x) yapışkan başlık dikey kaydırıcıya
   tutunamaz ve sessizce çalışmaz.

   ⚠️ min-width:max-content KASITLI OLARAK YOK. Tablo genişliğini "hiç
   sarılmasaydı ne kadar yer kaplardı" ölçüsüne kilitliyordu: uzun bir hücre
   metni (ör. bir kapı açıklaması, ham bir hata gövdesi, word-break:break-all
   taşıyan bir URL hücresi) tablo genişliğini binlerce piksele çıkarıyor,
   .sayfa-govde'yi yatay kaydırmaya zorluyor ve yan yana iki panelli
   ızgarada (bkz. Eşleştirme ekranı) bir panelin tablosu overflow:visible
   altında komşu panelin üzerine taşıyordu. width:100% + table-layout:auto
   ile tarayıcı sütunları panel genişliğine göre paylaştırır, hücre metni
   normal biçimde (ya da hücrenin kendi word-break kuralıyla) sarılır — eski
   blok-tablo kalıbının (satır 278) davranışı budur. */
body.tam-yukseklik .sayfa-govde .panel{overflow:visible}
body.tam-yukseklik .sayfa-govde .panel > table.grid{
  display:table;width:100%;overflow:visible;
}
/* thead/tbody varsayilan rol gruplarina DONDURULUR. Eski blok-tablo
   kalibindan kalan `.panel > table.grid thead{display:table}` kurali
   thead'i ic ice bir tabloya cevirir; yapiskan baslik o ic tablonun
   kutusuna yapisir ve icerikle birlikte kayip gider. Olculdu: bu iki
   satir olmadan baslik 3000px kaydirmada -2953px yukari kaciyor. */
body.tam-yukseklik .sayfa-govde .panel > table.grid > thead{display:table-header-group}
body.tam-yukseklik .sayfa-govde .panel > table.grid > tbody{display:table-row-group}
body.tam-yukseklik .sayfa-govde table.grid thead th{position:sticky;top:0;z-index:2}

/* ── Sıkıştırılmış süzgeç şeridi ── */
.sayfa-bas{
  background:var(--yuzey);
  border:1px solid var(--cizgi);
  border-radius:var(--r);
  box-shadow:var(--gol);
  margin-bottom:12px;
}
.suzgec{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px}
.suzgec h1{
  font-family:var(--f-bas);
  font-size:17px;font-weight:800;letter-spacing:-.025em;margin:0;flex:none;
}
.suzgec form{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0}
.suzgec select,.suzgec input{
  font:inherit;font-size:13px;padding:6px 9px;
  border:1px solid var(--cizgi);border-radius:var(--r-sm);
  background:var(--yuzey);color:var(--metin);
}
.suzgec input{min-width:210px}
.suzgec select:focus,.suzgec input:focus{
  outline:none;border-color:var(--yol);box-shadow:0 0 0 3px rgba(59,130,232,.18);
}
.suzgec .sag{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.sekmeler{
  display:flex;flex-wrap:wrap;gap:6px;
  padding:10px 14px;border-top:1px solid var(--cizgi-2);
}
.sekme{
  font-size:12.5px;font-weight:600;padding:5px 10px;border-radius:10px;
  text-decoration:none;background:var(--cizgi-2);color:var(--metin-2);
  white-space:nowrap;
}
.sekme:hover{background:var(--cizgi)}
.sekme.secili{background:var(--ates);color:#fff}

/* Kaynak süzgeci satırı (Ticimax): statü sekmelerinin altında, etiketli. */
.kaynak-sekmeleri{align-items:center;padding-top:6px;border-top:0}
.sekme-etiket{font-size:12px;font-weight:600;color:var(--metin-3);margin-right:2px}

/* ── Özet bandı ── */
.ozet{
  flex:none;margin-bottom:12px;padding:12px 14px;
  background:var(--yuzey);
  border:1px solid var(--cizgi);
  border-radius:var(--r);
  box-shadow:var(--gol);
}
.ozet[hidden]{display:none}
.ozet-izgara{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px}
.ozet-kutu{min-width:0}
.ozet-kutu h3{
  font-family:var(--f-bas);
  font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--metin-3);margin:0 0 6px;
}
/* Chart.js maintainAspectRatio:false ile çalışıyor; kabın yüksekliği SABİT
   olmalı, yoksa tuval her yeniden çizimde büyüyerek sonsuz döngüye girer. */
.ozet-tuval{position:relative;height:150px}
.ozet-bos{display:grid;place-items:center;height:150px;font-size:12.5px;color:var(--metin-3)}
.ozet-not{margin:10px 0 0;font-size:11.5px;color:var(--metin-3)}

@media (max-width:1200px){
  .ozet-izgara{grid-template-columns:1fr}
}

/* Tam yükseklikte bandın boyu SINIRLI ve kendi içinde kayar.
   NEDEN: 961–1200px arasında .ozet-izgara tek sütuna düşüyor ve üç grafik alt
   alta ~600px'e çıkıyor. Band flex:none ile küçülmediği için kısa bir pencerede
   (ör. 1100×768) .sayfa-govde 0 piksele iniyordu; .content overflow:hidden
   olduğu için kaydırma çubuğu da çıkmıyor ve tablo TAMAMEN erişilemez
   oluyordu — kullanıcı listeyi görebilmek için "Özet ▾" düğmesini bulmak
   zorunda kalıyordu. Üst sınırla tabloya her zaman yer kalır, banda sığmayan
   grafik ise bandın kendi kaydırıcısıyla görülebilir. */
body.tam-yukseklik .ozet{
  flex:0 1 auto;min-height:0;max-height:40vh;
  overflow:auto;overscroll-behavior:contain;
}

/* ── Sayfa çubuğu ── */
.sayfa-cubugu{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:10px 14px;
  background:var(--yuzey);
  border:1px solid var(--cizgi);
  border-radius:var(--r);
  box-shadow:var(--gol);
  font-size:12.5px;
}
.sayfa-bilgi{color:var(--metin-2)}
.sayfa-bilgi b{color:var(--metin);font-weight:700;font-variant-numeric:tabular-nums}

.sayfa-nolar{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin:0 auto}
.sayfa-no{
  min-width:30px;padding:5px 9px;text-align:center;
  border-radius:var(--r-sm);text-decoration:none;
  color:var(--metin-2);font-weight:600;font-variant-numeric:tabular-nums;
}
a.sayfa-no:hover{background:var(--cizgi-2);color:var(--metin)}
.sayfa-no.secili{background:var(--ates);color:#fff}
.sayfa-no.bosluk{color:var(--metin-3);min-width:0;padding:5px 2px}

.sayfa-boyut{display:flex;align-items:center;gap:6px;margin:0;color:var(--metin-2)}
.sayfa-boyut select{
  font:inherit;font-size:12.5px;padding:4px 7px;
  border:1px solid var(--cizgi);border-radius:var(--r-sm);
  background:var(--yuzey);color:var(--metin);
}

/* ── Sıralanabilir başlık ── */
table.grid th a{
  color:inherit;text-decoration:none;display:inline-block;white-space:nowrap;
}
table.grid th a:hover{color:var(--ates)}
table.grid th[aria-sort] a{color:var(--metin)}

/* Küçük ekranda tam yükseklik KAPANIR: iç içe kaydırma alanı tablette ve
   telefonda kullanımı bozuyor, sayfa normal akışına döner. */
@media (max-width:960px){
  body.tam-yukseklik{height:auto;overflow:visible}
  body.tam-yukseklik .shell{height:auto;min-height:100vh}
  body.tam-yukseklik .main{overflow:visible}
  body.tam-yukseklik .content{overflow:visible;display:block;padding-bottom:48px}
  .sayfa-govde{overflow:visible}
  body.tam-yukseklik .sayfa-govde .panel > table.grid{
    display:block;overflow-x:auto;min-width:0;
  }
  body.tam-yukseklik .sayfa-govde table.grid thead th{position:static}
  /* Kalıp kapalıyken bandın üst sınırı da KALKAR: sayfa normal aktığı için
     band ne kadar uzarsa uzasın altındaki tablo erişilebilir kalır. */
  body.tam-yukseklik .ozet{max-height:none;overflow:visible}
  /* Kucuk ekranda tablo blok kaydirma kalibina donuyor; thead/tbody de
     o kalibin bekledigi hale geri alinir. */
  body.tam-yukseklik .sayfa-govde .panel > table.grid > thead,
  body.tam-yukseklik .sayfa-govde .panel > table.grid > tbody{display:table}
  .suzgec input{min-width:0;flex:1}
  .sayfa-nolar{margin:0}
  .sayfa-cubugu{font-size:12px;gap:10px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}

/* Aktarım seçim sütunu: onay kutusu dar ve ortalı dursun. */
.grid .secim-sutun { width: 34px; text-align: center; }

/* Ekran okuyucu için başlık; görsel olarak gizli. */
.gizli-etiket {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/*
   Eşleşmeyenler tablosundaki ürün görseli (Görev 6).

   Görsel Trendyol CDN'inden gelir, indirilmez. Boy SABİT: satır yüksekliği
   yüklenen görsele göre zıplarsa tablo her sayfa yenilemesinde farklı görünür
   ve kullanıcı satır kaybeder. object-fit:contain oranı bozmaz.

   Arka plan ve çerçeve boş/kırık görselde de durur: <img> yüklenemezse ya da
   URL hiç yoksa (o durumda aynı sınıfla boş bir <span> basılır) satırda
   görselin yeri belli olur, hücre çökmez.
*/
.urun-gorsel {
    display: inline-block;
    width: 44px; height: 44px;
    object-fit: contain;
    background: var(--cizgi);
    border: 1px solid var(--cizgi-2);
    border-radius: 6px;
    vertical-align: middle;
}

/*
   Pazaryeri rozeti (Görev 8). Logo yerine metin: doğrulanmış bir marka varlığı
   kaynağı yok ve kırık bir <img> hiç rozet olmamasından kötü (bkz.
   Views/Shared/_PazaryeriRozeti.cshtml).
*/
.pz-rozet {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
    vertical-align: middle;
}
.pz-trendyol { background: #f27a1a; color: #fff; }
/* Hepsiburada turuncusu (#ff6000) Trendyol turuncusuna (#f27a1a) çok yakın ve iki
   rozet AYNI listede yan yana görünüyor; ayırt edilebilsin diye kırmızıya kaçan
   daha koyu bir ton kullanılıyor. */
.pz-hepsiburada { background: #d9420b; color: #fff; }
.pz-bilinmeyen { background: var(--cizgi); color: var(--muted); }

/*
   Eşleşmeyen kalem uyarısı: siparişin en az bir kaleminin barkodu katalogda yok.
   Aktarım o siparişte stok kodu bulunamadığı için REDDEDİLİR; kullanıcı bunu
   aktarımı denemeden ÖNCE görmeli.
*/
.eslesmeyen-uyari {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    background: #b4520c;
    color: #fff;
    white-space: nowrap;
}

/*
   Ürün görseli büyütme katmanı (joicon-gorsel.js).

   Katman JS ile üretiliyor; sınıflar burada tanımlı olmasaydı ekran stilsiz
   render olurdu — bu projede uydurma sınıf yüzünden üç kez yaşanmış bir kusur.
   GorselPopupTests betikteki her "gorsel-katman*" sınıfını burada arar.
*/
.gorsel-katman {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(10, 20, 64, .82);
    /* Katman içinde taşan (yakınlaştırılmış) görsel sayfayı büyütmesin. */
    overflow: hidden;
}

.gorsel-katman.acik {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Katman açıkken arkadaki liste kaymasın: tekerlek görseli yakınlaştırıyor. */
body.gorsel-katman-acikken {
    overflow: hidden;
}

.gorsel-katman-ic {
    max-width: 92vw;
    max-height: 92vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gorsel-katman-resim {
    max-width: 92vw;
    max-height: 92vh;
    object-fit: contain;
    /* Dönüşüm JS'ten geliyor (ölçek + kaydırma); geçiş SÜRÜKLEMEYE uygulanmaz,
       yoksa imleç ile görsel arasında his olarak gecikme oluşur. */
    transform-origin: 0 0;
    user-select: none;
    -webkit-user-drag: none;
}

.gorsel-katman-araclar {
    position: absolute;
    top: 14px;
    right: 16px;
    display: flex;
    gap: 8px;
    z-index: 1;
}

.gorsel-katman-dugme {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--cizgi-2);
    background: var(--yuzey);
    color: var(--metin);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.gorsel-katman-dugme:hover {
    background: var(--cizgi);
}

/* Küçük önizleme artık tıklanabilir olduğunu göstersin. Yalnız <img>:
   görseli olmayan satırlarda aynı sınıfla boş bir span basılıyor. */
img.urun-gorsel {
    cursor: zoom-in;
}