/* VOLTRA360 — Telif Hakkı (c) 2026. Tüm hakları saklıdır. İzinsiz kopyalanamaz. */
/* ============================================================
   VOLTRA360 — "Şalt Sahası Hassasiyeti" tasarım sistemi
   Elektrik pano mühendisliği: volt mavisi + bakır, teknik çizim
   ızgaralı zemin, hassas 1px çizgiler, tabular rakamlar.
   ============================================================ */
:root {
  --volt: #1E4FD0;        --volt-dark: #173FA8;   --volt-deep: #102E80;
  --volt-tint: #E7EDFC;   --volt-soft: #F2F5FE;
  --volt-glow: rgba(30,79,208,.28);
  --copper: #B4652B;      --copper-2: #D08245;    --copper-tint: #FAEEE2;
  --ink: #16202E;         --ink-2: #56606F;       --ink-3: #8791A0;
  --ground: #F3F5F9;      --surface: #FFFFFF;     --sunken: #EAEDF3;
  --border: #DFE3EA;      --border-strong: #C4CBD7;
  --ok: #1E7B50;   --ok-tint: #E2F3EA;
  --warn: #A97614; --warn-tint: #FAF0DA;
  --danger: #BE3A2B; --danger-tint: #FBE9E6;
  --info: #2A7CAD; --info-tint: #E3F1F8;
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px;
  --shadow-sm: 0 1px 3px rgba(22,32,46,.07);
  --shadow-md: 0 5px 18px rgba(22,32,46,.10);
  --shadow-lg: 0 14px 44px rgba(22,32,46,.18);
  --font: "Archivo", "Segoe UI", system-ui, sans-serif;
  --font-display: "Saira", "Archivo", "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;
  --nav-w: 244px;
}

* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font); font-size: 14px; line-height: 1.45;
  color: var(--ink); background: var(--ground);
  /* İmza: soluk teknik çizim ızgarası */
  background-image:
    linear-gradient(rgba(36,81,196,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36,81,196,.035) 1px, transparent 1px);
  background-size: 24px 24px;
  overflow: hidden;
  /* iOS yatay çevrildiğinde yazıları kendiliğinden büyütür (text inflation);
     tablo/kart hizaları kayıyordu. */
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}

/* ============ KABUK ============ */
/* Yükseklik: mobil tarayıcılarda 100vh "büyük görünüm alanı"dır — adres çubuğu
   görünürken kabuğun alt ~110px'i ekranın dışında kalır ve body overflow:hidden
   olduğu için oraya erişilemez ("aşağıya kaymıyor" sorunu). dvh dinamik
   yüksekliği kullanır; desteklemeyen tarayıcılarda vh geçerli kalır. */
.shell { display: grid; grid-template-columns: var(--nav-w) 1fr; grid-template-rows: 56px 1fr; height: 100vh; height: 100dvh; }
.topbar {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 14px;
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: 0 18px; z-index: 30;
}
.burger {
  width: 36px; height: 36px; border: none; background: transparent; border-radius: var(--r-sm);
  font-size: 17px; color: var(--ink-2); cursor: pointer; display: grid; place-items: center;
}
.burger:hover { background: var(--sunken); color: var(--ink); }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-badge {
  width: 32px; height: 32px; border-radius: 8px; background: var(--volt);
  display: grid; place-items: center; color: #fff; font-size: 16px;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.18);
}
.brand-name { font-weight: 700; font-size: 15px; letter-spacing: .04em; }
.brand-sub { font-size: 10.5px; color: var(--ink-3); margin-top: -2px; font-family: var(--mono); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.dev-chip {
  font-size: 11.5px; color: #7A5B12; background: var(--warn-tint);
  border: 1px solid #EAD9B0; padding: 4px 12px; border-radius: 999px;
}

/* ============ NAVİGASYON ============ */
.nav {
  background: var(--surface); border-right: 1px solid var(--border);
  padding: 16px 12px; overflow-y: auto; z-index: 20;
}
.nav-caption {
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
  color: var(--copper); padding: 2px 12px 10px;
}
.nav-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 12px; margin: 2px 0; border: none; background: transparent;
  border-radius: var(--r-md); color: var(--ink-2); font: inherit; font-size: 13.5px;
  cursor: pointer; text-align: left; position: relative;
  transition: background .12s ease, color .12s ease;
}
.nav-item .ico {
  width: 22px; height: 22px; display: grid; place-items: center; flex: none;
  font-size: 14px; color: var(--ink-3);
  /* Emoji ikonları tek renkli/dingin göster — referanstaki gri ikon dilini yakala */
  filter: grayscale(1); opacity: .8;
}
.nav-item:hover { background: var(--sunken); color: var(--ink); }
.nav-item:hover .ico { color: var(--ink-2); opacity: 1; }
.nav-item.active { background: var(--volt-tint); color: var(--volt); font-weight: 650; }
.nav-item.active .ico { color: var(--volt); opacity: 1; filter: none; }
.nav-item.active::before {
  content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 2px 2px 0; background: var(--volt);
}
.nav-item:focus-visible { outline: 2px solid var(--volt); outline-offset: -2px; }
/* ============================================================
   T15 — MENÜ KAPATMA HATASI

   HATA: `.nav { display:none }` menüyü ızgara akışından ÇIKARIYORDU; içerik
   otomatik yerleşimle 1. sütuna (genişliği 0) düşüyor ve ekrandaki her şey
   kayboluyordu.

   ÇÖZÜM: içerik her zaman 2. sütuna sabitlenir; menü gizlense de yeri korunur.
   Ayrıca menü artık tamamen yok olmuyor — dar bir "ray" hâlinde kalıyor,
   üzerine gelince genişliyor; böylece kullanıcı nerede olduğunu kaybetmiyor.
   ============================================================ */
.content { grid-column: 2; }
.shell.nav-kapali { grid-template-columns: var(--nav-dar, 54px) 1fr; }
.shell.nav-kapali .nav { overflow: hidden; padding-left: 8px; padding-right: 8px; }
.shell.nav-kapali .nav .nav-caption,
.shell.nav-kapali .nav .nav-item span:not(.ico) { display: none; }
.shell.nav-kapali .nav .nav-item {
  justify-content: center; padding-left: 0; padding-right: 0;
}
.shell.nav-kapali .nav .nav-item::before { left: -8px; }
/* Rayın üzerine gelince menü geçici olarak açılır — tıklamadan gezinme */
.shell.nav-kapali .nav:hover {
  width: var(--nav-w); position: absolute; top: 56px; bottom: 0; left: 0;
  z-index: 40; box-shadow: var(--shadow-lg); background: var(--surface);
  padding-left: 12px; padding-right: 12px;
}
/* HATA (düzeltildi): burada `display: ""` yazıyordu. Bu GEÇERSİZ bir CSS değeri
   olduğu için tarayıcı bildirimi tümüyle atıyor; yukarıdaki `display:none`
   yürürlükte kalıyor ve menü açıldığında yalnız ikonlar görünüp yazılar
   kayboluyordu. Doğru değerler açıkça yazıldı. */
.shell.nav-kapali .nav:hover .nav-caption { display: block; }
.shell.nav-kapali .nav:hover .nav-item span:not(.ico) { display: inline; }
.shell.nav-kapali .nav:hover .nav-item {
  justify-content: flex-start; padding-left: 10px; padding-right: 12px;
}

/* Hamburger: aktif (menü açık) durumda hafif vurgulanır */
.burger:hover { background: var(--sunken); color: var(--ink); }
.shell:not(.nav-kapali) .burger { color: var(--volt); }

/* ============ İÇERİK ============ */
.content { overflow-y: auto; position: relative; }
.page { padding: 0 0 48px; min-height: 100%; }
.page-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: 16px 26px; position: sticky; top: 0; z-index: 10;
}
.page-head h1 { font-size: 18px; font-weight: 650; }
.page-eyebrow { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; color: var(--copper); display: block; }
.count-chip {
  font-size: 11.5px; font-weight: 600; color: var(--volt);
  background: var(--volt-tint); padding: 3px 10px; border-radius: 999px;
  white-space: nowrap; flex: none;   /* "1 talep" iki satıra bölünüp yuvarlak bir yumağa dönmesin */
}
.page-head .spacer { flex: 1; }
/* Sayfa başlığındaki denetim kabı — masaüstünde eskisiyle aynı görünür
   (esneyen satır), mobilde yatay kaydırma şeridine dönüşür (bkz. mobil katman). */
.page-arac { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.page-body { padding: 22px 26px; }

/* ============ DOKÜMAN ŞABLONLARI (bölüm düzenleyici + canlı önizleme) ============ */
.sb-grid { display: grid; grid-template-columns: minmax(320px, 420px) 1fr; gap: 18px; align-items: start; }
.sb-sol { min-width: 0; }
.sb-sag { position: sticky; top: 88px; min-width: 0; }
.sb-onizle-bas {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; flex-wrap: wrap;
}
/* Önizleme alanı: belge 800px genişlikte çizilir, CSS ölçeğiyle küçültülür.
   --sb-yuk değişkeni JS tarafından ölçeklenmiş yüksekliğe göre ayarlanır → doğru kaydırma. */
.sb-onizle-alan {
  background: var(--sunken); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 12px; overflow: auto; max-height: calc(100vh - 210px);
}
/* Sarmalayıcı: ölçeklenmiş belgenin GERÇEK boyutunu tutar (JS yazar) → taşma olmaz */
.sb-a4-sarmal { position: relative; overflow: hidden; }
.sb-a4 {
  background: #fff; box-shadow: 0 4px 18px rgba(16,24,40,.14);
  transition: transform .12s ease; position: absolute; top: 0; left: 0;
}
.sb-onizle-alan { min-height: 120px; }
.sb-zoom { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.sb-zoom .btn { min-height: 28px; padding: 3px 9px; }
#sb-zoom-oran { min-width: 40px; text-align: center; font-family: var(--mono); }

/* --- Tam ekran belge önizleme --- */
.tam-onizle { display: flex; flex-direction: column; height: 100%; gap: 10px; }
.tam-onizle-arac {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding-bottom: 8px; border-bottom: 1px solid var(--border); flex: none;
}
.tam-onizle-alan {
  flex: 1; overflow: auto; background: var(--sunken);
  border: 1px solid var(--border); border-radius: var(--r-md); padding: 18px;
}
.tam-onizle-sarmal { position: relative; overflow: hidden; }
.tam-onizle-kagit {
  background: #fff; box-shadow: 0 6px 26px rgba(16,24,40,.18);
  transition: transform .12s ease; position: absolute; top: 0; left: 0;
}
/* Bölüm kartları artık bir kartın İÇİNDE duruyor: kart-içinde-kart hissini
   önlemek için kapsayıcıya hafif bir zemin verilir, iç kartlar üzerinde yüzer. */
.sb-bolum-kap {
  background: var(--sunken); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 9px; display: grid; gap: 0;
}
.sb-bolum-kap > .sb-bolum:last-child { margin-bottom: 0; }
.sb-tut-ornek { font-family: var(--mono); color: var(--ink-3); }
.sb-bolum {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  margin-bottom: 8px; overflow: hidden; transition: border-color .12s ease, opacity .12s ease;
}
.sb-bolum.kapali { opacity: .55; }
.sb-bolum.suruklenen { opacity: .4; }
.sb-bolum.hedef { border-color: var(--volt); box-shadow: 0 0 0 2px var(--volt-tint); }
.sb-bas {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px;
  background: var(--sunken); border-bottom: 1px solid var(--border); cursor: grab;
}
.sb-bas:active { cursor: grabbing; }
.sb-tut { color: var(--ink-3); font-size: 14px; }
.sb-ico { font-size: 14px; }
.sb-ad { font-weight: 600; font-size: 13px; flex: 1; min-width: 0; }
.sb-etiket {
  font-size: 10px; padding: 2px 7px; border-radius: 999px;
  background: var(--volt-tint); color: var(--volt); font-weight: 600; white-space: nowrap;
}
.sb-govde { padding: 10px 12px; }
.sb-govde textarea.inp { font-size: 12.5px; line-height: 1.5; resize: vertical; }
.sb-madde { border-left: 2px solid var(--border); padding-left: 9px; margin-bottom: 9px; }
.sb-madde-bas { display: flex; gap: 5px; align-items: center; margin-bottom: 4px; }
.sb-madde-bas .inp { font-weight: 600; font-size: 12.5px; }
/* Küçük aç/kapat anahtarı */
.sb-switch { position: relative; display: inline-flex; flex: none; cursor: pointer; }
.sb-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.sb-switch span {
  width: 34px; height: 19px; background: var(--ink-3); border-radius: 999px;
  position: relative; transition: background .15s ease;
}
.sb-switch span::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px;
  background: #fff; border-radius: 50%; transition: transform .15s ease;
}
.sb-switch input:checked + span { background: var(--volt); }
.sb-switch input:checked + span::after { transform: translateX(15px); }
@media (max-width: 1100px) {
  .sb-grid { grid-template-columns: 1fr; }
  .sb-sag { position: static; }
  .sb-onizle-alan { max-height: none; }
}

/* ============ TABLO SATIRI SÜRÜKLE-BIRAK (ürün setleri, teklif kalemleri) ============ */
tr.suruklenen > td { opacity: .4; }
tr.drop-hedef > td { box-shadow: inset 0 2px 0 var(--volt); background: var(--volt-tint); }
tr[data-kdrag], tr[data-gdrag] { cursor: grab; }
tr[data-kdrag]:active, tr[data-gdrag]:active { cursor: grabbing; }

/* ============ STOK HAREKET GEÇMİŞİ (açılır satırlar) ============ */
.hrk-satir.acilir:hover td { background: var(--volt-tint); }
.hrk-satir.acik td { background: var(--volt-tint); font-weight: 500; }
.hrk-ok { display: inline-block; transition: transform .15s ease; color: var(--volt); font-weight: 700; }
.hrk-detay > td { background: var(--sunken); }
.hrk-detay .tbl { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }

/* ============ DASHBOARD ANALİZ PANELLERİ (sürüklenebilir kartlar) ============ */
.pano-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(376px, 1fr));
  gap: 14px; align-items: stretch;   /* tüm kartlar aynı yüksekliği paylaşır */
}
/* Tüm analiz panelleri AYNI YÜKSEKLİKTE — içerik az ya da çok olsun kart boyu değişmez.
   İçerik taşarsa panel kendi içinde kaydırılır (kart büyümez, düzen bozulmaz). */
.pano-kart {
  padding: 0; overflow: hidden;
  height: 368px; display: flex; flex-direction: column;
}
.pano-kart .pano-govde { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; }
/* ============================================================
   PANEL TABLOLARI — OKUNABİLİRLİK

   Eskiden her hücre `white-space:nowrap` + `text-overflow:ellipsis` idi ve
   tablo `table-layout:fixed` ile sütunları EŞİT bölüyordu. 5 sütunlu bir
   raporda 300 px'lik kartta her sütuna ~60 px düşüyor, hem başlıklar
   ("TEKLİ…") hem değerler ("Sac Ka…", "₺46.0…") kırpılıp okunamaz hâle
   geliyordu.

   Yeni kural:
   • Sayısal sütunlar İÇERİĞE göre daralır (width:1%) ve kırpılmaz — para ve
     adet her zaman tam okunur.
   • Metin sütunu kalan alanı alır ve 2 SATIRA KADAR sarar (kesilmez).
   • Başlıklar sarabilir; harf harf bölünme yok.
   ============================================================ */
.pano-kart .pano-govde .tbl-wrap { overflow-x: hidden; }
.pano-kart .pano-govde .tbl { min-width: 0; width: 100%; table-layout: auto; }
.pano-kart .pano-govde .tbl td,
.pano-kart .pano-govde .tbl th {
  padding: 6px 7px; font-size: 11.5px; vertical-align: middle;
}
/* Sayısal / dar sütunlar: içeriğe göre, asla kırpılmaz */
.pano-kart .pano-govde .tbl td.num,
.pano-kart .pano-govde .tbl th.num {
  white-space: nowrap; width: 1%; font-variant-numeric: tabular-nums;
}
.pano-kart .pano-govde .tbl td .kod { white-space: nowrap; }
/* Metin sütunları: en fazla iki satır, kelime ortasından bölünmez */
.pano-kart .pano-govde .tbl td:not(.num) {
  white-space: normal; overflow-wrap: break-word; word-break: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Başlık satırı sarabilsin (TEKLİF, TUTAR gibi kelimeler bölünmesin) */
.pano-kart .pano-govde .tbl th {
  white-space: normal; word-break: keep-all; line-height: 1.25;
}
.pano-kart .pano-govde .tbl .pill { font-size: 10px; padding: 1px 6px; }
.pano-kart .pano-bas { flex: none; }
/* Sayfalama şeridi panelin en altına sabitlenir */
.pano-kart .pano-sayfalama { flex: none; }
.pano-bas {
  display: flex; align-items: center; gap: 10px; cursor: grab;
  padding: 12px 16px 10px; border-bottom: 1px solid var(--border); background: var(--surface);
}
.pano-bas:active { cursor: grabbing; }
.pano-bas h2 { margin: 0; }
.pano-tut { margin-left: auto; color: var(--ink-3); font-size: 15px; line-height: 1; }
.pano-govde { padding: 14px 16px 16px; }
.pano-kart.dragging { opacity: .45; }
.pano-kart.drop-hedef { outline: 2px dashed var(--volt); outline-offset: -3px; }
.pano-sayfalama {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border);
}
.pano-govde .tbl tr[data-git]:hover td { background: var(--volt-tint); }

/* ============ KULLANIM KILAVUZU (iki panel: sol konu listesi + sağ içerik) ============ */
.kilavuz-grid {
  display: grid; grid-template-columns: 290px 1fr; gap: 18px; align-items: start;
  /* Her iki panel de kendi içinde kaydırılır → konu değiştirince sayfa zıplamaz */
  height: calc(100vh - 150px);
}
.kilavuz-liste { padding: 8px; overflow-y: auto; height: 100%; }
.kilavuz-konu {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  padding: 9px 13px; border: none; background: transparent; border-radius: var(--r-sm);
  cursor: pointer; font: inherit; color: var(--ink); position: relative; margin: 1px 0;
}
.kilavuz-konu:hover { background: var(--sunken); }
.kilavuz-konu.on { background: var(--volt-tint); }
.kilavuz-konu.on::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  border-radius: 2px; background: var(--volt);
}
.kilavuz-kat { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; color: var(--copper); }
.kilavuz-konu.on .kilavuz-kat { color: var(--volt); }
.kilavuz-ad { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.kilavuz-icerik { padding: 24px 28px; overflow-y: auto; height: 100%; }
.kilavuz-icerik .eyebrow,
.kilavuz-icerik .page-eyebrow { color: var(--volt); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; }
.kilavuz-baslik { font-size: 21px; font-weight: 650; margin: 4px 0 18px; text-wrap: balance; }
.kilavuz-govde { max-width: 68ch; }
.kilavuz-p { font-size: 14px; line-height: 1.75; color: var(--ink); margin: 0 0 13px; }
.kilavuz-bolum {
  font-size: 14.5px; font-weight: 700; color: var(--volt); margin: 22px 0 9px;
  padding-bottom: 5px; border-bottom: 1px solid var(--border);
}
.kilavuz-li {
  font-size: 13.8px; line-height: 1.65; color: var(--ink-2);
  padding: 4px 0 4px 20px; position: relative;
}
.kilavuz-li::before { content: "•"; position: absolute; left: 4px; color: var(--volt); font-weight: 700; }
/* Numaralı adım — büyük, okunaklı, göz takip edilebilir */
.kilavuz-adim {
  display: flex; gap: 12px; align-items: flex-start; margin: 0 0 10px;
  font-size: 13.8px; line-height: 1.6; color: var(--ink);
}
.kilavuz-adim-no {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--volt); color: #fff; font-size: 12.5px; font-weight: 700;
  display: grid; place-items: center; margin-top: 1px;
}
/* Bilgi / Dikkat / İpucu kutuları */
.kilavuz-kutu {
  font-size: 13px; line-height: 1.65; border-radius: 8px;
  padding: 11px 15px 11px 14px; margin: 15px 0; border-left: 4px solid;
}
.kilavuz-kutu b {
  display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 3px;
}
.kilavuz-kutu.bilgi { background: var(--volt-tint); border-color: var(--volt); color: var(--ink); }
.kilavuz-kutu.bilgi b { color: var(--volt); }
.kilavuz-kutu.uyari { background: var(--warn-tint); border-color: var(--warn); color: #6B4A0C; }
.kilavuz-kutu.uyari b { color: var(--warn); }
.kilavuz-kutu.ipucu { background: var(--ok-tint); border-color: var(--ok); color: #14512F; }
.kilavuz-kutu.ipucu b { color: var(--ok); }
.kilavuz-surumler { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }

/* --- Kılavuz şematik çizimleri --- */
.kv-sema {
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
  margin: 14px 0 18px; overflow: hidden;
}
.kv-etiket { font-size: 10.5px; color: var(--volt); font-weight: 600; }
.kv-sema-ekran .kv-ust {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--sunken);
}
.kv-logo { font-size: 12px; font-weight: 800; color: var(--ink); letter-spacing: .04em; }
.kv-logo b { color: var(--copper); }
.kv-sema-ekran .kv-alt { display: flex; min-height: 108px; }
.kv-menu {
  width: 92px; border-right: 1px solid var(--border); padding: 9px 8px;
  display: flex; flex-direction: column; gap: 6px; background: var(--surface);
}
.kv-menu span { height: 8px; border-radius: 3px; background: var(--sunken); display: block; }
.kv-menu span.on { background: var(--volt); }
.kv-etiket-menu { margin-top: 6px; }
.kv-icerik {
  flex: 1; display: grid; place-items: center;
  background-image: linear-gradient(rgba(36,81,196,.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(36,81,196,.05) 1px, transparent 1px);
  background-size: 14px 14px;
}
/* Sihirbaz adım şeması */
.kv-adimlar { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px; }
.kv-adim {
  display: flex; align-items: center; gap: 7px; padding: 7px 12px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  font-size: 12px; color: var(--ink-2);
}
.kv-adim b {
  width: 19px; height: 19px; border-radius: 50%; background: var(--sunken);
  color: var(--ink-2); font-size: 11px; display: grid; place-items: center;
}
.kv-adim.on { border-color: var(--volt); background: var(--volt-tint); color: var(--volt); font-weight: 600; }
.kv-adim.on b { background: var(--volt); color: #fff; }

@media (max-width: 820px) {
  .kilavuz-grid { grid-template-columns: 1fr; height: auto; }
  .kilavuz-liste, .kilavuz-icerik { height: auto; overflow: visible; }
  .kilavuz-liste { max-height: 260px; overflow-y: auto; }
}

/* ============ BUTONLAR ============ */
.btn {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  border-radius: var(--r-sm); padding: 8px 16px; border: 1px solid transparent;
  display: inline-flex; align-items: center; gap: 7px; transition: all .12s ease;
  min-height: 36px;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
.btn-primary { background: var(--volt); color: #fff; box-shadow: inset 0 -2px 0 rgba(0,0,0,.15); }
.btn-primary:hover { background: var(--volt-dark); }
.btn-sec { background: var(--surface); color: var(--ink); border-color: var(--border-strong); }
.btn-sec:hover { border-color: var(--volt); color: var(--volt); background: var(--volt-soft); }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--sunken); color: var(--ink); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { filter: brightness(.92); }
.btn-sm { padding: 5px 11px; min-height: 30px; font-size: 12px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ============ FORM ============ */
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.inp, select.inp, textarea.inp {
  font: inherit; font-size: 13.5px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-sm); padding: 8px 11px; min-height: 36px; width: 100%;
}
.inp:hover { border-color: var(--ink-3); }
.inp:focus { outline: none; border-color: var(--volt); box-shadow: 0 0 0 3px var(--volt-tint); }
.inp::placeholder { color: var(--ink-3); }
textarea.inp { resize: vertical; }
.inp-num { font-family: var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }

/* ============ KART ============ */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-sm);
}
.card-pad { padding: 18px; }
.card.hover:hover { border-color: var(--volt); box-shadow: var(--shadow-md); }

/* Dashboard istatistik kartı */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.stat {
  display: flex; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); overflow: hidden; cursor: pointer;
  box-shadow: var(--shadow-sm); transition: all .14s ease; user-select: none;
}
.stat:hover { border-color: var(--volt); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.stat.dragging { opacity: .35; }
.stat.drop-hedef { outline: 2px dashed var(--volt); outline-offset: -2px; }
.stat-bar { width: 4px; flex: none; }
.stat-body { padding: 12px 14px; min-width: 0; }
.stat-title { font-size: 11.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-value { font-size: 23px; font-weight: 700; font-family: var(--mono); font-variant-numeric: tabular-nums; margin: 2px 0 1px; }
.stat-sub { font-size: 10.5px; color: var(--ink-3); }

/* ============ BÖLÜM BAŞLIĞI ============ */
.sec { margin: 26px 0 12px; }
.sec .eyebrow { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; color: var(--copper); }
.sec h2 { font-size: 15.5px; font-weight: 650; margin-top: 1px; }
.sec-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }

/* ============ TABLO ============ */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th {
  text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .05em;
  color: var(--ink-2); background: var(--sunken); padding: 9px 12px;
  border-bottom: 1px solid var(--border); white-space: nowrap; position: sticky; top: 0;
}
.tbl td { padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover { background: var(--volt-soft); }
.tbl .num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.tbl .kod { font-family: var(--mono); font-size: 12px; }

/* ============ ROZET ============ */
.pill { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.pill.taslak { background: var(--sunken); color: var(--ink-2); }
.pill.gonderildi { background: var(--info-tint); color: var(--info); }
.pill.kabul { background: var(--ok-tint); color: var(--ok); }
.pill.red { background: var(--danger-tint); color: var(--danger); }
.pill.iptal { background: var(--copper-tint); color: var(--copper); }

/* ============ MODAL ============ */
/* z-index 100 iken mobil alt sekme çubuğu (z-index 900) modalın ÜSTÜNE
   çiziliyordu: modalın alt şeridi (Vazgeç/Kaydet) çubuğun altında kalıyor,
   başlıktaki ✕ de 100vh taşması yüzünden ekranın dışında kalıyordu —
   yani modal hiçbir şekilde kapatılamıyordu. Katman sırası: modal > alt
   sekme çubuğu; bildirimler (toast) da modalın üstünde kalmalı. */
.overlay {
  position: fixed; inset: 0; background: rgba(27,33,48,.42);
  display: grid; place-items: center; z-index: 1000; padding: 24px;
  animation: fadein .15s ease;
}
@keyframes fadein { from { opacity: 0; } }
.modal {
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  /* dvh: mobil tarayıcıda 100vh görünen alandan büyüktür; modal dikeyde
     ortalandığı için başlık yukarı, ayak aşağı taşıyordu. */
  width: 100%; max-width: 560px; max-height: calc(100vh - 60px);
  max-height: calc(100dvh - 60px);
  display: flex; flex-direction: column; overflow: hidden;
  animation: yukari .18s ease;
}
@keyframes yukari { from { transform: translateY(10px); opacity: 0; } }
.modal.genis { max-width: 980px; }
.modal-head {
  background: var(--volt); color: #fff; padding: 13px 20px;
  display: flex; align-items: center; justify-content: space-between;
}
.modal-head h3 { font-size: 14.5px; font-weight: 650; }
.modal-kapat {
  border: none; background: transparent; color: rgba(255,255,255,.85);
  font-size: 15px; cursor: pointer; padding: 4px 8px; border-radius: var(--r-sm);
}
.modal-kapat:hover { background: rgba(255,255,255,.16); color: #fff; }
.modal-body { padding: 20px; overflow-y: auto; }
.modal-foot {
  padding: 13px 20px; border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 10px; background: var(--surface);
}

/* Tam ekran çalışma alanı — Pano Tasarımı ve Klemens gibi mühendislik modülleri.
   Kenar boşluğu bırakılmaz; içerik yüksekliği tam kullanılır. */
.overlay.tam-ekran { padding: 0; background: rgba(16,24,40,.55); }
.modal.tam {
  max-width: 100vw; width: 100vw; height: 100vh; max-height: 100vh;
  height: 100dvh; max-height: 100dvh;
  border-radius: 0; animation: none;
}
.modal.tam .modal-body { flex: 1; padding: 16px 20px; }
.modal.tam .modal-head { padding: 12px 20px; }

/* ============ WIZARD ============ */
.wiz-head {
  background: linear-gradient(135deg, var(--volt) 0%, var(--volt-deep) 100%);
  color: #fff; padding: 12px 26px; display: flex; align-items: center; gap: 16px;
  position: sticky; top: 0; z-index: 10;
}
.wiz-steps { display: flex; gap: 4px; margin: 0 auto; }
.wiz-step {
  display: flex; align-items: center; gap: 7px; padding: 6px 13px;
  border-radius: 999px; font-size: 12px; color: rgba(255,255,255,.65);
  cursor: default; transition: all .15s;
}
.wiz-step .n {
  width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  font-size: 10px; font-weight: 700; background: rgba(255,255,255,.22); color: #fff;
  font-family: var(--mono);
}
.wiz-step.on { background: #fff; color: var(--volt); font-weight: 600; }
.wiz-step.on .n { background: var(--volt); }
.wiz-step.ok { color: #fff; }
.wiz-step.ok .n { background: var(--ok); }
.wiz-step.ok .n::before { content: "✓"; }
.wiz-step.ok .n span { display: none; }
.wiz-foot {
  position: sticky; bottom: 0; background: var(--surface);
  border-top: 1px solid var(--border); padding: 12px 26px;
  display: flex; justify-content: space-between; z-index: 10;
}

/* ============ ARAÇLAR / YARDIMCILAR ============ */
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.toolbar .ayrac { width: 1px; height: 22px; background: var(--border-strong); margin: 0 4px; }
.empty {
  padding: 42px 20px; text-align: center; color: var(--ink-3);
  border: 1.5px dashed var(--border-strong); border-radius: var(--r-md);
}
.empty .buyuk { font-size: 26px; display: block; margin-bottom: 8px; opacity: .6; }
/* Bildirimler yalnız bilgi verir (3,2 sn sonra kendiliğinden kaybolur) ve
   tıklanmaz. En üst katmanda oldukları için altlarındaki düğmeyi (modal ✕'i,
   Kaydet şeridini) kapatıyorlardı — pointer-events:none ile dokunuş
   altlarındaki öğeye geçer. */
.toast-alan { position: fixed; bottom: 20px; right: 20px; z-index: 1200; display: flex;
  flex-direction: column; gap: 8px; pointer-events: none; }
.toast-alan > * { pointer-events: none; }
.toast {
  background: var(--ink); color: #fff; font-size: 13px; padding: 11px 18px;
  border-radius: var(--r-sm); box-shadow: var(--shadow-lg);
  animation: yukari .2s ease;
}
.toast.ok { background: var(--ok); }
.toast.hata { background: var(--danger); }
.uyari-bant {
  background: var(--danger-tint); border: 1px solid #EEC3BD; color: var(--danger);
  border-radius: var(--r-sm); padding: 10px 14px; font-size: 13px; margin-bottom: 14px;
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mt { margin-top: 14px; } .mb { margin-bottom: 14px; }
.muted { color: var(--ink-2); } .kucuk { font-size: 12px; }
.hidden { display: none !important; }

/* Kart ızgaraları (müşteri/teklif) */
.kart-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.varlik-kart { padding: 15px 16px; display: flex; flex-direction: column; gap: 8px; }
/* KART BAŞLIK SATIRI (v0.17.6)
   `align-items:center` iken uzun firma adı 2-3 satıra sarınca avatar VE
   rozet satırların ORTASINA kayıyordu — kart kart tutarsız bir konuma
   düşüyor, kullanıcı buna "kayma" diyordu (ölçüldü ve ekran görüntüsüyle
   birebir yeniden üretildi). Artık üçü de üstten hizalanır: avatar ve rozet
   ismin uzunluğundan bağımsız olarak her zaman aynı yükseklikte durur. */
.varlik-kart .baslik-satir { display: flex; align-items: flex-start; gap: 10px; }
/* Avatar ile rozet, tek satırlık kısa isimde de görsel olarak isim satırının
   ortasında kalsın diye ince bir üst boşluk alır (rozet: metin taban çizgisi
   hizası; avatar: ~19px isim satırının düşey ortası). */
.varlik-kart .baslik-satir .avatar { margin-top: 1px; }
.varlik-kart .baslik-satir .count-chip,
.varlik-kart .baslik-satir .alacak-rozet { margin-top: 1px; }
.avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: var(--volt-tint); color: var(--volt); font-weight: 700; font-size: 13px;
  display: grid; place-items: center;
}
.varlik-kart .ad { font-weight: 600; font-size: 13.5px; }
.varlik-kart .alt-bilgi { font-size: 12px; color: var(--ink-2); display: flex; flex-direction: column; gap: 3px; }
.varlik-kart .aksiyonlar { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }

/* DIN ray görseli */
.din-ray {
  background: #FBFCFE; border: 1px solid var(--border); border-radius: var(--r-sm);
  overflow-x: auto; padding: 10px;
}

/* Yazdırma: teklif çıktısı */
@media print {
  body { background: #fff; overflow: visible; }
  .shell, .toast-alan, .modal-kap, .modal-ort { display: none !important; }
  #yazdirma-alani { display: block !important; padding: 0; }
  /* R29/R30: Tarayıcının kendi üstbilgi/altbilgi satırını (tarih, sayfa adı ve
     en altta beliren URL) kapatır. Sayfa kenar boşluğu sıfırlanınca Chrome/Edge
     bu satırları basmaz; belgenin kendi boşluğu #yazdirma-alani içinde verilir. */
  @page { size: A4; margin: 0; }
  html, body { margin: 0 !important; padding: 0 !important; }
}
#yazdirma-alani { display: none; }

@media (max-width: 900px) {
  .form-grid, .grid-2, .grid-3 { grid-template-columns: 1fr; }
  :root { --nav-w: 200px; }
}

/* ============ PANO TASARIMI (referans sistem UFOPANPT1) ============ */
/* .pt-tam eski geniş-modal sınıfı — tam ekran modu (.modal.tam) devraldı;
   geriye dönük uyumluluk için tam ekran ölçüleriyle eşitlendi. */
.modal.pt-tam { max-width: 100vw; width: 100vw; max-height: 100vh; max-height: 100dvh; }
.pt-arac-cubugu { display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 8px 10px; background: var(--sunken); border: 1px solid var(--border);
  border-radius: var(--r-sm); margin-bottom: 12px; }
/* Z10: Çalışma alanı ekranı doldurur. Sol ölçü paneli ekran genişliğine göre
   dinamik (clamp) — dar ekranda daralır, geniş ekranda 320px'e kadar açılır.
   Gövde, modalın kalan yüksekliğini alır; sol panel kendi içinde kayar. */
.pt-govde { display: grid; grid-template-columns: clamp(230px, 19vw, 320px) 1fr;
  gap: 16px; align-items: stretch; min-height: 0; }
.modal.tam .pt-govde { height: calc(100vh - 190px); }
.pt-sol { min-width: 0; overflow-y: auto; padding-right: 4px; }
/* Ürün seçim listesi (size=7 liste kutusu) — eskiden satır içi style ile
   sabitti, o yüzden telefonda büyütülemiyordu. */
.pt-urun-liste { font-size: 12px; font-family: var(--mono); }
/* Uzun düz metin alanları (e-posta gövdesi, bildirim şablonu) — eskiden satır
   içi style ile 12px'e sabitlenmişti, telefonda büyütülemiyordu. */
.mono-alan { font-family: var(--mono); font-size: 12px; }
.pt-sekme { background: var(--surface); border: 1px solid var(--border-strong); color: var(--ink-2); }
.pt-sekme.on { background: var(--volt); color: #fff; border-color: var(--volt); }
.pt-cizim-alan { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.pt-panolar { display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  flex: 1; min-height: 0; align-items: stretch; }
.pt-panolar > div { display: flex; flex-direction: column; min-height: 0; }
.pt-pano-baslik { font-size: 11px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.pt-pano-dis { background: #F3F5F8; border: 1px solid var(--border); border-radius: 6px;
  padding: 14px; display: flex; justify-content: center; overflow: auto;
  flex: 1; min-height: 300px; }
/* Sıralar referans sistemdeki gibi BİTİŞİK yığılır (sacekle: oetop += OEYUK/oran).
   Eskiden gövdede 12px üst dolgu, her sırada 3px dikey margin vardı; bunlar
   yükseklik hesabına girmediği için içerik pano çerçevesini ~30px AŞIYOR,
   son sıralar ve baza çerçevenin dışına taşıyordu. */
.pt-govde-cizim { background: #DDE3EB; border: 2px solid #7E8A9C; position: relative;
  display: flex; flex-direction: column; align-items: center; padding-top: 0; flex: none; }
.pt-govde-cizim.kapak { background: #D4DCE6; }
/* gap:0 zorunlu — blok genişlikleri kümülatif tam-sayı px; gap eklerse sağdaki taşar */
/* ÖRTÜ SACI (referans EGOM -A_{os}): gri, çökük, G60 = disG−115 genişliğinde,
   panonun sol kenarından 5mm içeride. Ürünler DOĞRUDAN burada durmaz. */
.pt-sira { background: #E7EAEF; border: 1px solid #AEB7C4; margin: 0;
  display: flex; align-items: center; justify-content: center; gap: 0; padding: 0;
  cursor: pointer; box-sizing: border-box; overflow: hidden; flex: none;
  position: relative; align-self: flex-start;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.7), inset -1px -1px 0 rgba(0,0,0,.08); }
/* YARIK (referans EGAOM{os}): sacın ortasında beyaz, çerçeveli; ürünler burada.
   Modüler sırada yüksekliği YY60 = 47mm'dir — 150mm'lik sacın tamamı DEĞİL. */
.pt-yarik {
  background: #fff; border: 1px solid #8C96A5; box-sizing: border-box;
  display: flex; align-items: center; gap: 0; overflow: hidden;
  position: relative; flex: none;
}
/* Yedek Alan blokları (referans sistem MD-M10/YEDEK) */
.pt-blok.pt-yedek { background: repeating-linear-gradient(135deg,#DDE8DD 0 7px,#C7DAC7 7px 14px);
  border: 1px dashed #7FA37F; display: grid; place-items: center;
  font-size: 8px; font-weight: 700; color: #4A7A4A; letter-spacing: .5px; }
/* Ortak görsel kutusu standardı — ürün kartı/önizleme görselleri taşamaz */
.gorsel-kutu { display: grid; place-items: center; overflow: hidden; }
.gorsel-kutu img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pt-sira:hover { border-color: var(--volt); }
.pt-sira.secili { border: 2px solid #E24A4A; box-shadow: 0 0 0 2px rgba(226,74,74,.25); }
.pt-sira.bos > .pt-yarik { background: #fff; border-style: dashed; justify-content: center; }
.pt-sira.bos { justify-content: center;
  font-size: 10px; color: var(--ink-3); }
.pt-blok { background: #FFE0C0; border: 1px solid #E08080; flex: none; cursor: pointer;
  image-rendering: -webkit-optimize-contrast; image-rendering: high-quality; }
.pt-blok:hover { outline: 2px solid var(--danger); }
.pt-bos-etiket { background: #fff; border: 1px dashed #C6CDD8; height: 70%;
  display: grid; place-items: center; font-size: 9px; color: var(--ink-3); flex: none; }
.pt-bosluk { width: 92%; display: grid; place-items: center; font-size: 9px;
  color: var(--ink-3); flex: none; }
.pt-baza { width: 100%; background: repeating-linear-gradient(45deg,#9AA5B5 0 6px,#B7C0CD 6px 12px);
  display: grid; place-items: center; font-size: 9px; color: #fff; font-weight: 700; flex: none; }
.pt-sinyaller { position: absolute; top: 8px; right: 14px; display: flex; gap: 6px; }
.pt-sinyaller i { width: 11px; height: 11px; border-radius: 50%; border: 1px solid #666; }
.pt-kol { position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 5px; height: 34px; background: #5B6472; border-radius: 2px; }
.pt-kapak-yarik { position: absolute; left: 50%; transform: translateX(-50%);
  height: 14px; background: #B9C2CF; border: 1px solid #8A95A5; border-radius: 2px; }
.pt-olcu { position: absolute; right: -34px; top: 0; border-right: 1.5px solid var(--danger);
  display: flex; align-items: center; }
.pt-olcu span { color: var(--danger); font-family: var(--mono); font-size: 11px;
  writing-mode: vertical-rl; margin-right: 3px; }
.pt-pano-dis > div:first-child { position: relative; }
.pt-alt-baslik { text-align: center; font-family: var(--mono); font-size: 12px;
  color: var(--ink-2); background: var(--sunken); border: 1px solid var(--border);
  border-radius: 4px; padding: 6px; margin-top: 12px; }
@media (max-width: 1100px) { .pt-panolar { grid-template-columns: 1fr; } .pt-govde { grid-template-columns: 1fr; } }

.pt-kapak-satir { position: absolute; left: 0; right: 0; margin: 0 auto;
  display: flex; gap: 6px; row-gap: 6px; flex-wrap: wrap;
  justify-content: center; align-items: center; }
.pt-kapak-cihaz { background: #2B2F36; border: 2px solid #14161A; border-radius: 3px;
  display: inline-grid; place-items: center; overflow: hidden;
  box-shadow: inset 0 0 0 3px #3C424C, inset 0 -6px 8px rgba(0,0,0,.5); }
.pt-kapak-cihaz b { font-size: 7px; color: #9AA6B6; font-weight: 600; text-align: center;
  line-height: 1.1; padding: 1px; overflow: hidden; }
/* Gerçek cihaz görseli olan kapak öğesi — görsel kutuya sığdırılır */
.pt-kapak-cihaz.gorselli { background: #fff; border-color: #6B7482; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.pt-kapak-cihaz.gorselli img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pt-kapak-sinyal { display: inline-flex; gap: 3px; align-items: center; justify-content: center;
  background: #C9D2DE; border: 1px solid #8A95A5; border-radius: 3px; }
.pt-kapak-sinyal i { width: 38%; aspect-ratio: 1; max-width: 14px; border-radius: 50%;
  border: 1px solid #555; }
/* Tekli sinyal lambası (görselsiz durumda) */
.pt-kapak-lamba { display: inline-block; border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #7ED9A6, #218455 62%, #14603B);
  border: 2px solid #4A5563; box-shadow: 0 1px 2px rgba(0,0,0,.4); }
/* Acil stop butonu — sarı zemin, kırmızı mantar */
.pt-kapak-acil { display: inline-grid; place-items: center; border-radius: 50%;
  background: #E9C63D; border: 2px solid #A8901F; position: relative; }
.pt-kapak-acil::after { content: ""; width: 62%; height: 62%; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #E0574A, #B3271A 65%, #8A1B10);
  box-shadow: inset 0 -2px 3px rgba(0,0,0,.45); }
/* Bağımsız pano/klemens arama satırları */
.pt-ara-satir { display: flex; gap: 8px; align-items: center; padding: 5px 8px;
  border-bottom: 1px dashed var(--border); cursor: pointer; }
.pt-ara-satir:hover { background: var(--volt-soft); }
.pt-boyut-chip { font-family: var(--mono); font-size: 10px; font-weight: 700;
  background: var(--volt-tint); color: var(--volt); border-radius: 3px; padding: 0 5px; }
/* Camlı kapılı pano: kapakta cam paneli (tip şablonu) */
.pt-kapak-cam { position: absolute; left: 12%; right: 12%;
  background: linear-gradient(135deg, rgba(160,195,225,.38) 0%, rgba(210,230,245,.55) 45%, rgba(160,195,225,.30) 100%);
  border: 2px solid #8FA6BC; border-radius: 3px;
  box-shadow: inset 0 0 14px rgba(255,255,255,.7), inset 2px 2px 3px rgba(90,120,150,.25); }
.pt-izgara { position: absolute; left: 18%; right: 18%; height: 46px;
  background: repeating-linear-gradient(0deg,#9AA5B5 0 3px,#C9D2DE 3px 8px);
  border: 1px solid #8A95A5; border-radius: 3px; }
/* Excel-vari teklif kalem tablosu */
.xl-tablo td { padding: 3px 8px !important; }
.xl-tablo .inp { min-height: 26px; padding: 2px 6px; border-color: transparent; background: transparent; }
.xl-tablo .inp:hover { border-color: var(--border-strong); background: var(--surface); }
.xl-tablo .inp:focus { border-color: var(--volt); background: var(--surface); }
.xl-grup td { background: var(--volt-tint) !important; font-weight: 600; cursor: pointer;
  border-top: 2px solid var(--volt) !important; }
.xl-grup.secili td { background: #FBE9E7 !important; border-top-color: var(--danger) !important; }
.xl-grup .inp[data-gad] { font-weight: 700; width: 220px; }
/* Grup çarpanı rozeti — renkli grup bandında "× [N] N Grup" olarak durur.
   Küçük sayı kutusu ve etiketi tek bir hap görünümünde birleştirilir. */
/* Grup başlığı satırı — tüm ögeler tek eksende ortalanır */
.xl-grup-bas { display: flex; align-items: center; gap: 8px; min-width: 0; }
.xl-grup-bas .xg-ok { color: var(--ink-3); flex: none; }
.xl-grup-bas > .inp[data-gad] { flex: 0 1 220px; }
.xl-grup-bas .xg-kalem {
  font-size: 12px; font-weight: 400; color: var(--ink-2); white-space: nowrap; flex: none;
}
.grup-carpan {
  display: inline-flex; align-items: center; gap: 3px; flex: none;
  padding: 2px 9px 2px 3px; border: 1px solid var(--volt); border-radius: 999px;
  background: var(--volt-tint); white-space: nowrap; line-height: 1;
}
/* Sayı, rozetin İÇİNDE düzenlenir: çerçevesiz durur, tıklanınca belirginleşir. */
.grup-carpan .inp {
  /* Sayı SAĞA hizalı: "3" ile "grup" bitişik okunur, tek bir ifade gibi durur.
     Ortalanınca sayının sağında boşluk kalıyor, iki ayrı öge gibi görünüyordu. */
  width: 30px !important; min-height: 20px; padding: 0 2px 0 3px;
  font-weight: 700; font-size: 12.5px; text-align: right; color: var(--volt-deep);
  border-color: transparent; background: transparent;
}
.grup-carpan .inp:hover { background: #fff; border-color: var(--border-strong); }
.grup-carpan .inp:focus { background: #fff; border-color: var(--volt); }
.grup-carpan .gc-etiket { color: var(--volt-deep); font-size: 11.5px; font-weight: 700; line-height: 1; }
.xl-sec td { background: var(--volt-soft) !important; }
.pt-panolar.tek-kapak > div:first-child { display: none; }
.pt-panolar.tek-kapak { grid-template-columns: 1fr; }
.modal-foot { align-items: center; }
.pill.bekliyor { background: var(--warn-tint); color: var(--warn); }
.pill.tamam { background: #DEF3F0; color: #1B7A6E; }
.pill.iade { background: #F1EAFB; color: #8654B0; }
/* Örtü Sacı Göster (referans sistem montaj=1): ürünler _M varyantı fotoğrafla çizilir,
   arkalarına DIN ray şeridi eklenir (referans sistem rayeklemontaj → RAY1.bmp).
   Taban Saclı Göster (montaj=0): normal ürün fotoğrafı, ray YOK. */
.pt-sira.montaj { background: #EFE9DC; }
.pt-sira.montaj > .pt-yarik { background: #EFE9DC; }
.pt-ray-serit {
  position: absolute; left: 2px; top: 50%; transform: translateY(-50%);
  height: 10px;
  background:
    repeating-linear-gradient(90deg, #8A95A5 0 2px, #B7C0CD 2px 4px),
    linear-gradient(180deg, #C9D2DE 0%, #9AA5B5 50%, #8A95A5 100%);
  background-blend-mode: multiply;
  border-top: 1px solid #7E8A9C; border-bottom: 1px solid #7E8A9C;
  z-index: 0;
}

/* ============================================================
   V2 KATMANI — "Şalt Sahası · Endüstriyel Hassasiyet"
   Display: Saira · Gövde: Archivo · Ölçüm: IBM Plex Mono
   İmza: bakır kılavuz çizgisi + volt ışıması + teknik ızgara zemin
   ============================================================ */

/* --- Zemin: ince teknik ızgara + köşe vinyeti --- */
body {
  background-image:
    radial-gradient(1100px 500px at 85% -10%, rgba(30,79,208,.05), transparent 60%),
    radial-gradient(900px 420px at -10% 110%, rgba(180,101,43,.05), transparent 60%),
    linear-gradient(rgba(30,79,208,.038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,79,208,.038) 1px, transparent 1px);
  background-size: auto, auto, 24px 24px, 24px 24px;
}

/* --- Tipografi hiyerarşisi --- */
.brand-name, .page-head h1, .sec h2, .modal-head h3, .stat-value, .wiz-head b {
  font-family: var(--font-display);
}
.brand-name { font-weight: 700; letter-spacing: .13em; font-size: 15.5px; }
.page-head h1 { font-size: 19px; font-weight: 700; letter-spacing: .015em; }
.sec h2 { letter-spacing: .01em; }
.page-eyebrow, .sec .eyebrow, .nav-caption {
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em; font-weight: 600;
}

/* --- Topbar: bakır kılavuz çizgisi imzası --- */
.topbar { border-bottom: none; position: relative; }
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--copper) 0%, var(--copper-2) 130px,
              var(--border) 220px, var(--border) 100%);
}
.brand-badge {
  background: linear-gradient(150deg, var(--volt) 0%, var(--volt-deep) 100%);
  box-shadow: 0 3px 10px var(--volt-glow), inset 0 -2px 0 rgba(0,0,0,.22);
}
.brand-sub { letter-spacing: .08em; }
.dev-chip { font-family: var(--mono); font-size: 11px; }
.dev-chip a { color: var(--volt); font-weight: 600; text-decoration: none; }
.dev-chip a:hover { text-decoration: underline; }

/* --- Navigasyon: raylı aktif gösterge --- */
.nav { padding: 16px 10px; }
.nav-item { transition: background .13s ease, color .13s ease, transform .13s ease; }
.nav-item:hover { transform: translateX(2px); }
.nav-item.active::before {
  width: 3px; top: 6px; bottom: 6px;
  background: linear-gradient(180deg, var(--copper-2), var(--copper));
  box-shadow: 0 0 8px rgba(208,130,69,.5);
}
.nav-item.active { background: linear-gradient(90deg, var(--volt-tint) 0%, rgba(231,237,252,.35) 100%); }
.nav-item .ico { opacity: .8; }
.nav-item.active .ico { opacity: 1; }

/* --- Butonlar: volt ışıması + hassas bası --- */
.btn { transition: all .13s cubic-bezier(.4,0,.2,1); letter-spacing: .01em; }
.btn-primary {
  background: linear-gradient(180deg, var(--volt) 0%, var(--volt-dark) 100%);
  box-shadow: 0 2px 8px var(--volt-glow), inset 0 1px 0 rgba(255,255,255,.14), inset 0 -2px 0 rgba(0,0,0,.16);
}
.btn-primary:hover {
  background: linear-gradient(180deg, #2A5CDF 0%, var(--volt-dark) 100%);
  box-shadow: 0 4px 14px var(--volt-glow), inset 0 1px 0 rgba(255,255,255,.14), inset 0 -2px 0 rgba(0,0,0,.16);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(1px); box-shadow: 0 1px 4px var(--volt-glow), inset 0 -1px 0 rgba(0,0,0,.16); }
.btn-danger { box-shadow: 0 2px 8px rgba(190,58,43,.25), inset 0 -2px 0 rgba(0,0,0,.16); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--volt-glow); }

/* ============================================================
   DÜĞME YAZI RENGİ — MAVİ ZEMİN / SİYAH YAZI HATASININ KÖK ÇÖZÜMÜ

   Bir düğme aynı anda birden çok varyant sınıfı taşıyabiliyor: bazı ekranlar
   durumu göstermek için mevcut `btn-sec`/`btn-ghost` düğmesine `btn-primary`
   EKLİYOR (ör. Pano Tasarımı'ndaki "Ürünleri Göster"). CSS'te `.btn-primary`
   zemini bu blokta (dosyanın sonlarında) tanımlı olduğu için MAVİ zemin
   kazanıyordu; ama yazı rengi yalnız yukarıdaki temel blokta tanımlıydı ve
   orada `.btn-sec` daha sonra geldiği için SİYAH kalıyordu. Hover'da ise
   `.btn-sec:hover` mavi yazı + `.btn-primary:hover` koyu mavi zemin birleşip
   yazıyı tümüyle görünmez yapıyordu.

   Kural: zeminin tanımlandığı en son yerde yazı rengi de tanımlanır. Böylece
   varyantlar hangi sırayla birleştirilirse birleştirilsin kontrast korunur.
   ============================================================ */
.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-danger, .btn-danger:hover, .btn-danger:focus, .btn-danger:active {
  color: #fff;
}
.btn-primary .kucuk, .btn-primary .muted, .btn-primary small,
.btn-danger .kucuk, .btn-danger .muted, .btn-danger small { color: rgba(255,255,255,.85); }
/* Aynı gerekçe: koyu zeminli rozet/sekme/satır vurgularında yazı her zaman beyaz */
.us-sat.on, .us-sat.on *, .us-urun.on td, .us-urun.on:hover td,
.us-sekme.on, .pt-sekme.on { color: #fff; }

/* --- Girdi odak ışıması --- */
.inp:focus { box-shadow: 0 0 0 3px var(--volt-glow); }

/* --- Kart ve istatistik: kalkış + üst aksan --- */
.card { transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.card.hover:hover, .varlik-kart:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--volt); }
.stat { position: relative; }
.stat:hover { transform: translateY(-2px); }
.stat-value { font-size: 24px; letter-spacing: .01em; }
.count-chip { font-family: var(--mono); letter-spacing: .02em; }

/* --- Tablo: teknik doküman dili --- */
.tbl th {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  background: linear-gradient(180deg, #EFF2F7 0%, var(--sunken) 100%);
}
.tbl tbody tr { transition: background .1s ease; }

/* --- Modal: bakır alt çizgili başlık ---
   ESKİ CİHAZ UYUMU: `backdrop-filter: blur()` tam ekran bir GPU katmanı oluşturur ve
   eski/zayıf grafik sürücülerinde (özellikle Chrome) ekranın kararmasına, pencerenin
   yeniden boyutlanmasına yol açabiliyordu. Bu nedenle bulanıklık YALNIZCA donanım
   hızlandırmayı güvenle destekleyen modern tarayıcılarda uygulanır. */
.overlay { background: rgba(16,23,36,.55); }
/* Bulanıklık yalnızca güçlü cihazlarda (<html class="gpu-tamam">) uygulanır.
   Sınıfı app.js açılışta cihaz yeteneğine göre ekler. */
@supports (backdrop-filter: blur(3px)) {
  html.gpu-tamam .overlay { backdrop-filter: blur(3px); }
}
/* Düşük performanslı cihazlarda ağır gölgeler de sadeleşir */
html.gpu-zayif .modal { box-shadow: 0 6px 20px rgba(22,32,46,.28); }
html.gpu-zayif .overlay, html.gpu-zayif .modal { animation: none !important; }
.modal { animation: modalGiris .22s cubic-bezier(.2,.9,.3,1.1); }
@keyframes modalGiris { from { transform: translateY(14px); opacity: 0; } }
/* Hareket azaltma tercihi veya düşük performanslı cihaz: animasyonlar kapalı */
@media (prefers-reduced-motion: reduce) {
  .overlay, .modal, .page-body > * { animation: none !important; transition: none !important; }
}
.modal-head {
  background: linear-gradient(120deg, var(--volt) 0%, var(--volt-deep) 100%);
  position: relative;
}
.modal-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: linear-gradient(90deg, var(--copper-2) 0%, var(--copper) 160px, transparent 320px);
}
.modal-head h3 { letter-spacing: .03em; }

/* --- Wizard başlığı: diyagonal teknik doku --- */
.wiz-head {
  background:
    repeating-linear-gradient(-55deg, rgba(255,255,255,.045) 0 2px, transparent 2px 14px),
    linear-gradient(135deg, var(--volt) 0%, var(--volt-deep) 100%);
}
.wiz-step { font-family: var(--mono); font-size: 11.5px; letter-spacing: .02em; }
.wiz-step.on { box-shadow: 0 2px 8px rgba(0,0,0,.22); }

/* --- Sayfa giriş animasyonu: kademeli yükseliş --- */
/* GİRİŞ ANİMASYONU — `both` yerine `backwards`
   `both` (fill-mode) animasyon bittikten SONRA da son kare değerlerini
   uygulanmış hâlde bırakır; bu yüzden `.page-body > *` öğelerinde kalıcı bir
   `transform` kalıyordu. Transform bir YIĞIN BAĞLAMI (stacking context)
   yarattığı için, kart içindeki açılır menü ne kadar yüksek z-index alırsa
   alsın yapışkan sayfa başlığının (z-index:10) ALTINDA kalıyordu.
   `backwards` yalnız gecikme süresince başlangıç karesini uygular; animasyon
   bitince öğe kendi stiline döner ve geride transform kalmaz. */
@keyframes sayfaGiris { from { opacity: 0; transform: translateY(8px); } }
.page-head { animation: sayfaGiris .28s ease backwards; }
.page-body > * { animation: sayfaGiris .3s ease backwards; }
.page-body > *:nth-child(1) { animation-delay: .04s; }
.page-body > *:nth-child(2) { animation-delay: .09s; }
.page-body > *:nth-child(3) { animation-delay: .14s; }
.page-body > *:nth-child(4) { animation-delay: .19s; }
.page-body > *:nth-child(5) { animation-delay: .24s; }

/* --- Toast: sağdan kayarak gelir --- */
@keyframes toastGiris { from { transform: translateX(24px); opacity: 0; } }
.toast { animation: toastGiris .22s cubic-bezier(.2,.9,.3,1.1); border-left: 3px solid rgba(255,255,255,.35); font-weight: 500; }

/* --- Boş durum: bakır kesikli çerçeve --- */
.empty { border-color: #E4C6A8; background: rgba(250,238,226,.35); color: var(--ink-2); }
.empty .buyuk { color: var(--copper); opacity: .8; }

/* --- Kaydırma çubukları: ince endüstriyel --- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 5px; border: 2px solid var(--ground); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

/* --- Rozet/pil: mono etiket dili --- */
.pill { font-family: var(--mono); font-size: 10.5px; letter-spacing: .03em; }

/* --- Giriş ekranı cilası --- */
#giris-ekrani {
  background-image:
    radial-gradient(900px 460px at 80% -5%, rgba(30,79,208,.35), transparent 60%),
    radial-gradient(700px 400px at 8% 108%, rgba(180,101,43,.28), transparent 55%),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(135deg, #0E1626 0%, #16263F 55%, #1B3153 100%) !important;
  background-size: auto, auto, 26px 26px, 26px 26px, auto !important;
}
#giris-form { animation: modalGiris .3s cubic-bezier(.2,.9,.3,1.1); }
#giris-form > div:nth-child(2) { font-family: var(--font-display); letter-spacing: .16em; font-size: 17px; }

/* Topbar TCMB kur çipi (SRS §10.4.2.4 görünürlük) */
.kur-chip {
  font-family: var(--mono); font-size: 11px; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--border);
  padding: 4px 11px; border-radius: 999px; white-space: nowrap;
}
.kur-chip b { color: var(--volt); font-weight: 600; }
.kur-chip a { color: var(--copper); text-decoration: none; font-weight: 700; }

/* Pano sayaç kutusu — referans sistem gibi sol üstte: m² / Modül / Yedek girişi */
.pt-sayac-kutu {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--sunken); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 8px 10px; margin-bottom: 10px;
}

/* ============================================================
   MOBİL / TABLET UYUMU (responsive)
   Telefon: sol menü ekranı kaplamaz — ☰ ile açılan kayan panel olur.
   Tablolar yatay kaydırılır, formlar tek kolona iner, modallar tam ekran.
   ============================================================ */

/* ---- TABLET (≤1024px) ---- */
@media (max-width: 1024px) {
  :root { --nav-w: 200px; }
  .page-head { padding: 12px 16px; gap: 10px; }
  .page-body { padding: 16px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr 1fr; }
}

/* ---- TELEFON (≤760px) ---- */
@media (max-width: 760px) {
  /* Menü ekranın üstüne kayan panel olarak açılır; içerik tam genişlik kullanır */
  .shell { grid-template-columns: 1fr; grid-template-rows: 54px 1fr; }
  .nav {
    position: fixed; top: 54px; left: 0; bottom: 0; width: 250px; z-index: 60;
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: 6px 0 24px rgba(16,24,40,.18); padding: 14px 10px;
  }
  /* Varsayılan KAPALI; .nav-acik ile açılır (JS ☰ düğmesi bunu değiştirir) */
  .shell.nav-acik .nav { transform: translateX(0); }
  .shell.nav-acik::after {
    content: ""; position: fixed; inset: 54px 0 0 0; background: rgba(16,24,40,.42); z-index: 55;
  }
  .shell.nav-kapali .nav { display: block; }        /* masaüstü kuralını etkisiz kıl */
  .content { grid-column: 1 / -1; }

  /* Üst şerit sadeleşir */
  .topbar { padding: 0 10px; gap: 8px; }
  .brand-sub { display: none; }
  .kur-chip { font-size: 10px; padding: 3px 8px; }
  .dev-chip { display: none; }

  /* Başlık ve içerik */
  .page-head { padding: 10px 13px; gap: 8px; }
  .page-head h1 { font-size: 16px; }
  .page-body { padding: 13px; }

  /* Formlar tek kolon, dokunma hedefleri büyük */
  .form-grid { grid-template-columns: 1fr; }
  .inp, .btn { min-height: 40px; font-size: 14px; }
  .btn-sm { min-height: 34px; }

  /* Araç çubukları alt alta akar; arama kutuları tam genişlik */
  .toolbar { flex-wrap: wrap; gap: 7px; }
  /* NOT: Sayfa başlığındaki denetimler artık .page-arac yatay şeridinde;
     tam genişliğe zorlanmazlar (bkz. aşağıdaki "SAHA MODU" katmanı). */

  /* Tablolar: kart yığınına dönüşenler tam genişlik, dönüşmeyenler kaydırılabilir.
     min-width YALNIZ kart olmayanlara verilir — aksi hâlde ayarlardaki iki
     sütunlu detay tabloları sayfayı yana kaydırıyordu. */
  .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tbl:not(.tbl-kart) { min-width: 0; }
  .tbl th, .tbl td { padding: 7px 8px; font-size: 12.5px; }

  /* Kartlar tek sütun */
  .kart-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .pano-grid { grid-template-columns: 1fr; }

  /* Modallar tam ekrana yakın */
  .overlay { padding: 0; }
  .modal, .modal.genis { max-width: 100vw; width: 100vw; max-height: 100vh;
                         max-height: 100dvh; border-radius: 0; }
  .modal-body { padding: 14px; }
  .modal-foot { padding: 11px 14px; flex-wrap: wrap; }
  .modal-foot .btn { flex: 1 1 auto; }

  /* Doküman şablonları ve kılavuz: tek kolon */
  .sb-grid { grid-template-columns: 1fr; }
  .sb-sag { position: static; }
  .sb-onizle-alan { max-height: 60vh; }
  .kilavuz-grid { grid-template-columns: 1fr; height: auto; }
  .kilavuz-liste { max-height: 220px; }
  .kilavuz-icerik { padding: 16px; }

  /* Teklif sihirbazı adımları yatay kaydırılır */
  .wizard-adimlar { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Pano/klemens çalışma alanı tek kolon */
  .pt-govde { grid-template-columns: 1fr; }
  .pt-panolar { grid-template-columns: 1fr; }
}

/* ---- KÜÇÜK TELEFON (≤420px) ---- */
@media (max-width: 420px) {
  .page-head h1 { font-size: 15px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .kur-chip { display: none; }          /* çok dar ekranda üst şeridi rahatlat */
  .modal-head h3 { font-size: 13px; }
}

/* ============ TOPLU İÇE AKTARMA (dosya bırakma alanı) ============ */
.ia-secim {
  border: 2px dashed var(--border-strong); border-radius: var(--r-lg);
  background: var(--volt-soft); padding: 28px 20px; text-align: center;
  transition: border-color .15s ease, background .15s ease;
}
.ia-secim.uzerinde { border-color: var(--volt); background: var(--volt-tint); }
.ia-ikon { font-size: 34px; line-height: 1; margin-bottom: 8px; }
.ia-baslik { font-size: 15px; font-weight: 650; color: var(--ink); margin-bottom: 4px; }

/* ============ TEKLİF SİHİRBAZI CANLI ÖN İZLEME ============
   Belge gerçek genişlikte (800px) çizilir, CSS ölçeğiyle küçültülür.
   Ölçeklenmiş gerçek boyut sarmalayıcıya yazıldığı için TAŞMA OLMAZ. */
.w-adim2-grid {
  display: grid; grid-template-columns: minmax(360px, 1fr) minmax(420px, 1.25fr);
  gap: 18px; align-items: start;
}
.w-onizle-panel { position: sticky; top: 12px; min-width: 0; }
.w-onizle-arac {
  display: flex; align-items: center; gap: 4px; margin-bottom: 8px; flex-wrap: wrap;
}
.w-onizle-arac .btn { min-height: 28px; padding: 3px 9px; }
#w-oz-oran { min-width: 42px; text-align: center; font-family: var(--mono); font-size: 11.5px; }
.w-onizle-alan {
  background: var(--sunken); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 12px; overflow: auto; height: calc(100vh - 250px); min-height: 420px;
}
.w-onizle-sarmal { position: relative; overflow: hidden; }
.w-onizle-kagit {
  background: #fff; box-shadow: 0 4px 18px rgba(16,24,40,.14);
  position: absolute; top: 0; left: 0; transition: transform .12s ease;
}
@media (max-width: 1200px) {
  .w-adim2-grid { grid-template-columns: 1fr; }
  .w-onizle-panel { position: static; }
  .w-onizle-alan { height: 520px; }
}

}

/* ============ SİHİRBAZ ŞABLON SEKMESİ (teklife özel düzenleme) ============ */
.ws-bolum {
  border: 1px solid var(--border); border-radius: var(--r-sm);
  margin-bottom: 6px; padding: 8px 10px; background: var(--surface);
  transition: opacity .12s ease;
}
.ws-bolum.kapali { opacity: .5; }
.ws-bas { display: flex; align-items: center; gap: 8px; }
.ws-ad { font-size: 12.5px; font-weight: 600; flex: 1; min-width: 0; }
.ws-bolum textarea.inp { margin-top: 7px; font-size: 12px; line-height: 1.5; resize: vertical; }

/* ============ ÜLKE SEÇİCİ — bayrak seçicinin İÇİNDE ============
   Emoji fontu olmayan sistemlerde 🇹🇷 "TR" harflerine düşüyordu.
   Bu yüzden gerçek Türk bayrağı SVG olarak arka planda çizilir. */
.inp-bayrak {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' rx='2' fill='%23E30A17'/%3E%3Ccircle cx='11.5' cy='10' r='5' fill='%23fff'/%3E%3Ccircle cx='13.2' cy='10' r='4' fill='%23E30A17'/%3E%3Cpath fill='%23fff' d='M18.4 10 21.9 8.9l-2.2 3 0-3.7 2.2 3z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 21px 14px;
  padding-left: 39px;
}

/* ============ YARDIMCI ARAÇLAR KARTLARI ============ */
/* ============================================================
   YARDIMCI ARAÇLAR — TEKNİK KART TASARIMI

   Tasarım dili: mühendislik çizim sayfası. Her kartın üstünde aracın
   ürettiği çıktının şeması (ARAC_ILLUSTRASYON), altında ne yaptığı.
   Görsel alanı araca özgü renkte (--arac-renk) soluk zemin + blueprint
   ızgarası taşır; hover'da şema canlanır ve kart hafifçe yükselir.
   ============================================================ */
.arac-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 18px; align-items: stretch;
}
.arac-kart {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden; cursor: pointer;
  transition: transform .16s cubic-bezier(.4,0,.2,1), box-shadow .16s ease, border-color .16s ease;
  /* açılışta sırayla belirme */
  animation: arac-belir .34s cubic-bezier(.4,0,.2,1) backwards;
  animation-delay: calc(var(--sira, 0) * 70ms);
}
@keyframes arac-belir { from { opacity: 0; transform: translateY(10px); } }
.arac-kart:hover, .arac-kart:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px -12px rgba(22,32,46,.28), 0 2px 6px -2px rgba(22,32,46,.12);
  border-color: var(--arac-renk, var(--volt));
  outline: none;
}
.arac-kart:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--arac-renk) 28%, transparent); }

/* --- Görsel alanı: şema --- */
.arac-gorsel {
  position: relative; padding: 18px 20px 14px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--arac-renk) 9%, var(--surface)) 0%,
      color-mix(in srgb, var(--arac-renk) 4%, var(--surface)) 100%);
  border-bottom: 1px solid var(--border);
  color: var(--arac-renk);
}
/* üst kenarda ince renkli çizgi — teknik sayfa şeridi */
.arac-gorsel::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--arac-renk); opacity: .85;
}
.arac-gorsel svg {
  display: block; width: 100%; height: auto; max-height: 128px;
  transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .2s ease;
  opacity: .92;
}
.arac-kart:hover .arac-gorsel svg { transform: scale(1.035); opacity: 1; }

/* --- Gövde --- */
.arac-govde { display: flex; flex-direction: column; flex: 1; padding: 15px 20px 18px; min-width: 0; }
.arac-etiket {
  align-self: flex-start; font-size: 9.5px; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--arac-renk);
  background: color-mix(in srgb, var(--arac-renk) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--arac-renk) 26%, transparent);
  padding: 3px 8px; border-radius: 999px; margin-bottom: 9px;
  font-family: var(--mono, monospace);
}
.arac-ad { font-size: 15.5px; font-weight: 680; color: var(--ink); line-height: 1.25; margin-bottom: 5px; }
.arac-acik { font-size: 12.5px; color: var(--ink-2); line-height: 1.55; margin-bottom: 11px; }
.arac-madde { list-style: none; margin: 0 0 16px; padding: 0; flex: 1; }
.arac-madde li {
  position: relative; padding-left: 17px; margin-bottom: 6px;
  font-size: 12px; color: var(--ink-2); line-height: 1.5;
}
/* madde imi: teknik çizim artı işareti */
.arac-madde li::before {
  content: ""; position: absolute; left: 2px; top: 7px;
  width: 7px; height: 7px;
  background:
    linear-gradient(var(--arac-renk), var(--arac-renk)) center/7px 1.4px no-repeat,
    linear-gradient(var(--arac-renk), var(--arac-renk)) center/1.4px 7px no-repeat;
  opacity: .6;
}
.arac-btn { width: 100%; margin-top: auto; justify-content: center; gap: 7px; }
.arac-ok { display: inline-block; transition: transform .18s ease; }
.arac-kart:hover .arac-ok { transform: translateX(3px); }

@media (max-width: 620px) { .arac-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .arac-kart, .arac-gorsel svg, .arac-ok { animation: none !important; transition: none !important; }
  .arac-kart:hover { transform: none; }
}

.arac-kart .baslik-satir { align-items: flex-start; }
.arac-kart .avatar {
  width: 42px; height: 42px; border-radius: var(--r-md); flex: none;
  display: grid; place-items: center;
}
.arac-kart .ad { line-height: 1.25; }
/* Madde listesi esneyerek boşluğu doldurur → butonlar tüm kartlarda aynı hizada */
.arac-kart ul { flex: 1; }
.arac-kart .btn { margin-top: auto; }
/* Kart ızgarası: kartlar aynı yüksekliği paylaşır */
.kart-grid { align-items: stretch; }

/* ============ LİSTE KARTLARI (klemens / fiyat listeleri) ============ */
.liste-kart {
  display: flex; flex-direction: column; gap: 8px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.liste-kart:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.liste-kart .alt-bilgi { margin-top: auto; }
.liste-kart .aksiyonlar { display: flex; gap: 6px; flex-wrap: wrap; }
.liste-kart .aksiyonlar .btn { flex: 1; min-width: 96px; }
/* Fiyatı tanımlı ürün oranı göstergesi */
.liste-oran { height: 5px; border-radius: 999px; background: rgba(22,32,46,.10); overflow: hidden; }
.liste-oran-dolu { height: 100%; border-radius: 999px; transition: width .3s ease; }

/* AA8 — Adım 3 araç çubuğunda Klemens / Bakır Bara / Pano Tasarımı üçlüsü.
   Ayrı buton olarak dururken flex-wrap üçünü farklı satırlara bölebiliyordu.
   Grup olarak sarmalandığında ya üçü de aynı satırda kalır ya da üçü birlikte
   alt satıra iner — kullanıcının istediği davranış budur. */
.arac-grubu { display: inline-flex; gap: 7px; flex: none; }
@media (max-width: 560px) { .arac-grubu { flex-wrap: wrap; } }

/* Teklif Yönetimi — tutar aralığı filtresi (min–max), diğer filtrelerle aynı satırda */
.tutar-filtre { display: inline-flex; align-items: center; gap: 5px; flex: none;
  padding: 0 8px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); min-height: 34px; }

/* Kılavuz — admin düzenleme araç çubuğu */
.kilavuz-arac { display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 8px 10px; margin-bottom: 14px; background: var(--sunken);
  border: 1px solid var(--border); border-radius: var(--r-sm); }

/* Şablon — çıktı dosya adı yer tutucu etiketleri (tıklayınca alana eklenir) */
.sb-etiketler { display: flex; flex-wrap: wrap; gap: 5px; }
.sb-etiket { display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  padding: 3px 8px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); font-size: 11px; color: var(--ink-2);
  transition: border-color .12s ease, background .12s ease; }
.sb-etiket:hover { border-color: var(--volt); background: var(--volt-tint); color: var(--volt); }
.sb-etiket code { font-family: var(--mono); font-size: 10.5px; color: var(--volt); }
.sb-etiket span { color: var(--ink-3); }
.sb-etiket:hover span { color: var(--volt); }

/* ---- Teklif revizyon geçmişi ---- */
.rev-rozet { display: inline-block; padding: 1px 6px; border-radius: 999px;
  background: var(--copper-tint); color: var(--copper); font-weight: 600;
  font-size: 10.5px; font-family: var(--mono); }
.rev-govde { display: grid; grid-template-columns: clamp(230px, 24vw, 330px) 1fr;
  gap: 16px; height: calc(100vh - 190px); min-height: 0; }
.rev-liste { display: flex; flex-direction: column; gap: 4px; overflow-y: auto;
  padding-right: 4px; min-height: 0; }
.rev-detay { overflow-y: auto; min-height: 0; padding-right: 4px; }
.rev-konu { display: flex; flex-direction: column; gap: 2px; text-align: left;
  padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); cursor: pointer; transition: border-color .12s, background .12s; }
.rev-konu:hover { border-color: var(--border-strong); background: var(--sunken); }
.rev-konu.on { border-color: var(--volt); background: var(--volt-tint); }
.rev-etiket { font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
  color: var(--copper); font-family: var(--mono); }
.rev-konu.on .rev-etiket { color: var(--volt); }
.rev-ad { font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.rev-alt { font-size: 10.5px; color: var(--ink-3); font-family: var(--mono); }
.rev-tutar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 12px; background: var(--sunken); border-radius: var(--r-sm); }
@media (max-width: 760px) { .rev-govde { grid-template-columns: 1fr; height: auto; } }

/* ---- Fiyat listesi → teklif etki raporu ---- */
.lf-etki-liste { display: flex; flex-direction: column; gap: 12px;
  max-height: 420px; overflow-y: auto; padding-right: 4px; }
.lf-teklif { border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 10px 12px; background: var(--surface); }
.lf-teklif-bas { display: flex; align-items: flex-start; gap: 12px;
  margin-bottom: 8px; flex-wrap: wrap; }

/* ---- Dashboard kart/panel yönetimi + rapor panelleri ---- */
.ky-satir { display: flex; align-items: center; gap: 9px; padding: 6px 2px;
  cursor: pointer; font-size: 13px; }
.ky-satir:hover { color: var(--volt); }
.ky-etiket { display: inline-block; margin-left: 6px; padding: 1px 6px;
  border-radius: 999px; background: var(--copper-tint); color: var(--copper);
  font-size: 9px; font-weight: 700; letter-spacing: .06em; font-family: var(--mono); }
.rapor-bar { display: flex; height: 9px; border-radius: 999px; overflow: hidden;
  background: var(--sunken); }
.rapor-bar span { display: block; transition: width .3s ease; }
.rapor-nokta { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 6px; vertical-align: middle; }

/* ---- Hatırlatma / bildirim merkezi (Ö6) ---- */
.bildirim-btn { position: relative; border: 1px solid var(--border);
  background: var(--surface); border-radius: var(--r-md); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 6px 9px; color: var(--ink-2);
  transition: border-color .12s, background .12s; }
.bildirim-btn:hover { border-color: var(--volt); background: var(--volt-tint); }
.bildirim-btn.var { border-color: var(--warn); }
.bildirim-btn.acil { border-color: var(--danger); animation: bildirim-nabiz 2s ease-in-out infinite; }
@keyframes bildirim-nabiz { 0%,100% { box-shadow: 0 0 0 0 rgba(200,60,60,.35); }
  50% { box-shadow: 0 0 0 5px rgba(200,60,60,0); } }
.bildirim-rozet { position: absolute; top: -6px; right: -6px; min-width: 17px; height: 17px;
  padding: 0 4px; border-radius: 999px; background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 700; font-family: var(--mono);
  display: grid; place-items: center; }
.ht-grup { margin-bottom: 16px; }
.ht-grup-bas { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 7px;
  padding-bottom: 7px; border-bottom: 1px solid var(--border); }
.ht-ico { font-size: 17px; line-height: 1.2; }
.ht-grup-ad { font-size: 13.5px; font-weight: 650; color: var(--ink); }
.ht-sayi { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px;
  background: var(--sunken); color: var(--ink-2); font-size: 10.5px; font-family: var(--mono); }
.ht-satir { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 7px 10px; border: none; border-radius: var(--r-sm); background: transparent;
  cursor: pointer; transition: background .12s; }
.ht-satir:hover { background: var(--sunken); }
.ht-nokta { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--ink-3); }
.ht-satir.acil .ht-nokta { background: var(--danger); }
.ht-satir.uyari .ht-nokta { background: var(--warn); }
.ht-satir.bilgi .ht-nokta { background: var(--volt); }
.ht-baslik { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ht-detay { display: block; font-size: 11px; color: var(--ink-3); }
.ht-satir.acil .ht-detay { color: var(--danger); font-weight: 600; }
.ht-ok { color: var(--ink-3); font-size: 15px; flex: none; }
.ht-ayar-satir { display: flex; gap: 14px; align-items: flex-start;
  padding: 10px 0; border-bottom: 1px solid var(--border); }
.ht-ayar-satir:last-child { border-bottom: none; }

/* ---- Müşteri paylaşım bağlantısı (Ö13) ---- */
.pay-kutu { padding: 11px 13px; background: var(--volt-tint);
  border: 1px solid var(--volt); border-radius: var(--r-md); }
.pay-link { display: flex; gap: 7px; align-items: center; }
.pay-link .inp { flex: 1; min-width: 0; }

/* ---- Kılavuz konu editörü (yenilendi) ---- */
.kd-govde { display: grid; grid-template-columns: 1fr clamp(280px, 34%, 460px);
  gap: 18px; height: calc(100vh - 260px); min-height: 0; }
.kd-sol, .kd-sag { overflow-y: auto; min-height: 0; padding-right: 5px; }
.kd-sag { border-left: 1px solid var(--border); padding-left: 16px; }
.kd-onizle { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 16px 18px; }
.kd-satir { border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 9px 11px; margin-bottom: 9px; background: var(--surface);
  transition: border-color .12s, opacity .12s; }
.kd-satir:hover { border-color: var(--border-strong); }
.kd-satir.suruklenen { opacity: .45; border-style: dashed; }
.kd-satir-bas { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.kd-tut { cursor: grab; color: var(--ink-3); font-size: 13px; }
.kd-tur { font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: var(--volt); font-family: var(--mono); }
.kd-ekle-cubuk { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px;
  background: var(--sunken); border-radius: var(--r-md); margin-top: 4px; }
.kd-ekle-btn { display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink-2); font-size: 11.5px; font-family: inherit;
  cursor: pointer; transition: border-color .12s, color .12s, background .12s; }
.kd-ekle-btn:hover { border-color: var(--volt); color: var(--volt); background: var(--volt-tint); }
.kd-ekle-btn span { font-size: 13px; }
.kd-birak { display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 20px 14px; border: 2px dashed var(--border-strong); border-radius: var(--r-md);
  background: var(--sunken); cursor: pointer; text-align: center; font-size: 12.5px;
  transition: border-color .15s, background .15s; }
.kd-birak:hover, .kd-birak.uzerinde { border-color: var(--volt); background: var(--volt-tint); }
.kd-resim-alan { display: flex; gap: 11px; align-items: flex-start; }
.kd-resim-onizle { width: 130px; height: 84px; object-fit: cover; flex: none;
  border-radius: var(--r-sm); border: 1px solid var(--border); background: #fff; }
/* Kılavuzda gösterilen kullanıcı görselleri */
.kilavuz-resim { margin: 14px 0; text-align: center; }
.kilavuz-resim img { max-width: 100%; height: auto; border-radius: var(--r-md);
  border: 1px solid var(--border); box-shadow: 0 2px 10px -4px rgba(22,32,46,.18); }
.kilavuz-resim figcaption { margin-top: 6px; font-size: 11.5px; color: var(--ink-3); }
@media (max-width: 900px) {
  .kd-govde { grid-template-columns: 1fr; height: auto; }
  .kd-sag { border-left: none; border-top: 1px solid var(--border);
    padding-left: 0; padding-top: 14px; }
}

/* ============ TEKNİK DESTEK OTURUMU ŞERİDİ ============
   Admin bir kullanıcının ekranını görüntülerken üstte kalıcı bir şerit durur.
   Bunun görsel olarak kaçırılamaz olması gerekir: "hangi hesaptayım?" sorusunun
   cevabı her an ekranda olmalı, aksi hâlde yanlış hesapta işlem yapılır. */
.taklit-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 34px; z-index: 60;
  display: flex; align-items: center; gap: 10px; padding: 0 14px;
  background: #7A5B12; color: #fff; font-size: 12.5px;
  box-shadow: 0 1px 6px rgba(0,0,0,.22);
}
.taklit-bar.yaz { background: var(--danger, #B3261E); }
.taklit-bar .tb-ikon { font-size: 14px; flex: none; }
.taklit-bar .tb-metin { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.taklit-bar .tb-mod { opacity: .82; margin-left: 6px; }
.taklit-bar .tb-btn {
  margin-left: auto; flex: none; background: rgba(255,255,255,.16); color: #fff;
  border: 1px solid rgba(255,255,255,.4); border-radius: 999px;
  padding: 3px 12px; font-size: 12px; font-family: inherit; cursor: pointer;
}
.taklit-bar .tb-btn:hover { background: rgba(255,255,255,.3); }
/* Kullanıcı tarafındaki "hesabınız görüntüleniyor" şeridi — bilgi rengi */
.taklit-bar.destek { background: #1B4E8A; }
.taklit-bar.destek.yaz { background: #8A3B12; }
.taklit-bar .tb-sure { margin-left: auto; opacity: .78; white-space: nowrap; }
.taklit-bar .tb-durum { flex: none; font-size: 11.5px; opacity: .85; white-space: nowrap;
  padding: 2px 9px; border-radius: 999px; background: rgba(255,255,255,.14); }
.taklit-bar .tb-durum.canli { background: rgba(255,255,255,.24); }
.taklit-bar .tb-durum.uyari { background: #fff; color: #B3261E; font-weight: 700; opacity: 1; }
.taklit-bar .tb-durum:empty { display: none; }
/* Şerit yüksekliği kadar kabuk kısalır — sayfa içi kaydırma bozulmasın */
body.taklit-modu .shell,
body.destek-izleniyor .shell { height: calc(100vh - 34px); margin-top: 34px; }
/* Destek oturumu penceresindeki durum kutuları */
.tk-uyari { font-size: 12px; padding: 8px 11px; border-radius: var(--r-sm);
  background: var(--warn-tint); color: #7A5B12; border: 1px solid #EAD9B0; }
.tk-bilgi { font-size: 12px; padding: 8px 11px; border-radius: var(--r-sm);
  background: var(--sunken); color: var(--ink-3); border: 1px solid var(--border); }
/* Destek oturumu açma penceresindeki mod seçimi */
.tk-mod { display: flex; gap: 9px; align-items: flex-start; padding: 9px 11px;
  border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: 7px;
  cursor: pointer; transition: border-color .12s, background .12s; }
.tk-mod:hover { border-color: var(--volt); background: var(--volt-tint); }
.tk-mod input { margin-top: 3px; flex: none; }
@media (max-width: 720px) {
  .taklit-bar .tb-mod { display: none; }
}

/* ============ GİRİŞ / KAYIT EKRANI ============ */
.captcha-satir { display: flex; align-items: center; gap: 8px; }
.captcha-img { width: 152px; height: 48px; flex: none; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: #f2f5f9; user-select: none; }
.captcha-satir .inp { flex: 1; min-width: 0; }
#giris-kutu .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#giris-kutu .form-grid .full { grid-column: 1 / -1; }
#giris-kutu .field { margin: 0; }
#giris-kutu .sec { margin-bottom: 4px; }
@media (max-width: 460px) {
  #giris-kutu .form-grid { grid-template-columns: 1fr; }
  .captcha-img { width: 130px; }
}

/* ============================================================
   SUNUCU DURUMU PANELİ (yalnız admin)
   Tasarım fikri: bir şalt panosunun ÖN GÖSTERGE YÜZEYİ. Koyu enstrüman
   faceplate'i üzerine segmentli LED bargraf ölçerler ve dijital multimetre
   okumaları. Uygulamanın geri kalanı aydınlık; bu kart bilinçli olarak koyu —
   "ölçüm aleti" olduğu bir bakışta anlaşılsın diye.
   ============================================================ */
/* Sunucu Durumu kartı HER ZAMAN kendi satırını tek başına kaplar.
   `span 2` yeterli değildi: ızgara auto-fit olduğu için geniş ekranda 3-4 sütun
   oluşuyor ve kartın yanına başka kart sığıyordu. `1 / -1` satırın tamamını
   kaplar — kaç sütun oluşursa oluşsun yanına hiçbir kart gelmez. */
.pano-kart.pano-genis {
  grid-column: 1 / -1;
  /* R1: Tam satır kaplayan kart, diğer kartların 340px sabit boyunu KULLANMAZ —
     yanında hizalanacağı bir kart yok, dolayısıyla içeriğinden uzun olması
     yalnızca altında boş alan bırakırdı. Yüksekliği içeriğe bırakılır. */
  height: auto; min-height: 0;
}
/* Tam satır kartta gövde esnemez — esnerse içerik bittiği yerde boşluk kalır */
.pano-kart.pano-genis .pano-govde { overflow: visible; flex: none; }
.pano-kart.pano-genis { align-self: start; }

.sd-kok { display: flex; flex-direction: column; gap: 12px; }
.sd-yukleniyor { padding: 26px; text-align: center; color: var(--ink-3); font-size: 12.5px; }

/* --- Üst şerit: canlı göstergesi --- */
.sd-ust { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.sd-canli { display: inline-flex; align-items: center; gap: 6px; font-size: 11px;
  font-family: var(--mono); color: var(--ok); letter-spacing: .06em; }
.sd-nokta { width: 7px; height: 7px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 0 rgba(30,123,80,.55); animation: sd-nabiz 2.4s ease-out infinite; }
@keyframes sd-nabiz {
  0%   { box-shadow: 0 0 0 0 rgba(30,123,80,.5); }
  70%  { box-shadow: 0 0 0 7px rgba(30,123,80,0); }
  100% { box-shadow: 0 0 0 0 rgba(30,123,80,0); }
}
.sd-zaman { margin-left: auto; font-size: 11px; font-family: var(--mono); color: var(--ink-3); }

/* --- Enstrüman yüzeyi: üç ana ölçer --- */
.sd-yuzey {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: rgba(255,255,255,.07);
  border-radius: var(--r-md); overflow: hidden;
  /* Koyu faceplate + üstten hafif ışık düşmesi (metal panel hissi) */
  background-image: linear-gradient(180deg, #1B2A44 0%, #16202E 100%);
  border: 1px solid #0D1725;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 10px -4px rgba(13,23,37,.5);
}
.sd-olcer { padding: 11px 13px 12px; background-image: linear-gradient(180deg, #1B2A44 0%, #16202E 100%); }
.sd-olcer-bas { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.sd-olcer-ad { font-size: 10px; font-weight: 700; letter-spacing: .16em;
  color: #7C8DA8; font-family: var(--mono); }
.sd-lamba { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.sd-deger { font-family: var(--mono); font-size: 27px; font-weight: 700; line-height: 1.1;
  color: #EAF0FA; font-variant-numeric: tabular-nums; margin: 5px 0 8px; }
.sd-deger small { font-size: 13px; opacity: .55; margin-left: 2px; }
.sd-alt { font-size: 10.5px; color: #8FA0B8; font-family: var(--mono); margin-top: 7px;
  font-variant-numeric: tabular-nums; }

/* Segmentli LED bargraf: dolgu üstüne şeritli maske → panel ölçeri görünümü */
.sd-bar { position: relative; height: 11px; border-radius: 3px; overflow: hidden;
  background: rgba(255,255,255,.07); box-shadow: inset 0 1px 2px rgba(0,0,0,.45); }
.sd-bar i { position: absolute; inset: 0 auto 0 0; display: block; border-radius: 3px;
  transition: width .5s cubic-bezier(.22,.8,.28,1), background-color .3s; }
.sd-bar::after {                   /* segment boşlukları */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(90deg,
    transparent 0 5px, #16202E 5px 7px);
}
.sd-ok   { background: #2FA36A; }
.sd-warn { background: #D8A22B; }
.sd-crit { background: #E05545; }
.sd-lamba.sd-ok   { box-shadow: 0 0 6px 1px rgba(47,163,106,.75); }
.sd-lamba.sd-warn { box-shadow: 0 0 6px 1px rgba(216,162,43,.8); }
.sd-lamba.sd-crit { box-shadow: 0 0 7px 2px rgba(224,85,69,.85); animation: sd-alarm 1.1s steps(1) infinite; }
@keyframes sd-alarm { 50% { opacity: .25; } }

/* --- Alt detay ızgarası (aydınlık yüzey) --- */
.sd-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); gap: 1px;
  background: var(--border); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.sd-hucre { background: var(--surface); padding: 8px 11px; }
.sd-hucre-ad { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; color: var(--ink-3);
  text-transform: uppercase; }
.sd-hucre-deger { font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; margin-top: 2px; }
.sd-hucre-not { font-size: 10.5px; color: var(--ink-3); margin-top: 1px; }
.sd-hucre.vurgu { background: var(--volt-soft); }
.sd-hucre.vurgu .sd-hucre-deger { color: var(--volt); }

/* --- Uyarı şeridi --- */
.sd-uyari { display: flex; gap: 8px; align-items: flex-start; padding: 9px 12px;
  border-radius: var(--r-sm); font-size: 12px; line-height: 1.55; }
.sd-uyari.warn { background: var(--warn-tint); color: #7A5B12; border: 1px solid #EAD9B0; }
.sd-uyari.crit { background: var(--danger-tint); color: #8E2A1E; border: 1px solid #F0C4BD; }
.sd-uyari b { font-weight: 700; }
.sd-yenile-btn { margin-left: 7px; border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--ink-2); border-radius: 50%; width: 20px; height: 20px; line-height: 1;
  font-size: 12px; cursor: pointer; padding: 0; vertical-align: middle; }
.sd-yenile-btn:hover:not(:disabled) { border-color: var(--volt); color: var(--volt); background: var(--volt-tint); }
.sd-yenile-btn:disabled { opacity: .5; cursor: default; }
/* S9 — Sunucu Durumu kartının yüksekliği İÇERİĞE göre belirlenir.
   Burada eskiden `height: 476px` sabiti vardı: kart tam satır kapladığı ve
   içeriği (üç ölçer + altı hücrelik ızgara) 370px civarında olduğu için
   altında ~100px boş alan kalıyordu. Sabit yükseklik kaldırıldı; kart tam
   satır kapladığından yanındaki kartlarla hizalanma derdi de yok. */
.pano-kart[data-pano="s-sunucu"] { height: auto; }

/* ============================================================
   KOYU ZEMİNDEKİ BUTONLAR
   Sihirbaz başlığı (.wiz-head) koyu volt gradyanı. Açık tema buton kuralları
   burada çalışmaz: .btn-ghost:hover açık gri ZEMİN + koyu YAZI verir; yazı
   satır içi beyaza sabitlenmişse buton hover'da GÖRÜNMEZ oluyordu
   ("← Teklifler" butonu bu yüzden kayboluyordu).
   Çözüm: satır içi stil yok — koyu zemin için kendi kuralları olan sınıflar.
   ============================================================ */
.wiz-head .btn { color: #fff; }
.wiz-head .btn-ghost { background: transparent; color: #fff; }
.wiz-head .btn-ghost:hover,
.wiz-head .btn-ghost:focus-visible { background: rgba(255,255,255,.18); color: #fff; }
.wiz-head .btn-ghost:active { background: rgba(255,255,255,.26); }
/* Koyu zeminde çerçeveli ikincil buton */
.btn-cerceve { border: 1.2px solid rgba(255,255,255,.6); background: transparent; color: #fff; }
.btn-cerceve:hover,
.btn-cerceve:focus-visible { background: rgba(255,255,255,.16); border-color: #fff; color: #fff; }
.btn-cerceve:active { background: rgba(255,255,255,.24); }

/* Paket kartındaki tasarruf rozeti — üst köşede net okunan hap.
   (Diagonal şerit denendi, kart kenarında kırpılıyordu.) */
/* Rozetin yüksekliği (~20px) + üst boşluk (8px) kadar yer bırakılır; aksi
   hâlde rozet paket adının üzerine biniyordu. */
.paket-kart { position: relative; padding-top: 36px; display: flex; flex-direction: column; }
.paket-rozet {
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  background: var(--ok); color: #fff; font-size: 10.5px; font-weight: 700;
  letter-spacing: .03em; padding: 2px 10px; border-radius: 999px;
  white-space: nowrap; box-shadow: 0 1px 3px rgba(22,32,46,.2);
}

/* Lifetime paketinin altındaki yıllık sunucu bedeli notu */
.paket-ek {
  margin-top: auto; padding-top: 9px; border-top: 1px dashed var(--border);
  margin-left: -4px; margin-right: -4px; padding-left: 4px; padding-right: 4px;
  font-size: 12px; color: var(--ink-2); text-align: center;
}
.paket-ek-bas { display: block; font-size: 10.5px; font-weight: 700;
  letter-spacing: .04em; color: var(--copper); text-transform: uppercase; margin-bottom: 2px; }
.paket-ek b { font-size: 15px; color: var(--copper); }

/* Hatırlatma satırı: içerik + okundu düğmesi yan yana */
.ht-satir-sar { display: flex; align-items: stretch; gap: 4px; }
.ht-satir-sar .ht-satir { flex: 1; min-width: 0; }
.ht-satir-sar.okundu { opacity: .5; }
.ht-satir-sar.okundu .ht-nokta { background: var(--ink-3) !important; }
.ht-okundu-btn {
  flex: none; width: 30px; border: 1px solid var(--border); background: var(--surface);
  color: var(--ink-3); border-radius: var(--r-sm); cursor: pointer; font-size: 13px;
  transition: border-color .12s, color .12s, background .12s;
}
.ht-okundu-btn:hover { border-color: var(--ok); color: var(--ok); background: var(--ok-tint); }

/* Lifetime üyeye özel üyelik kutusu (paket kartları yerine) */
.lt-kutu { background: linear-gradient(135deg, var(--volt-tint) 0%, var(--volt-soft) 100%);
  border: 1px solid #C9D8F7; border-radius: var(--r-md); padding: 13px 16px; }
.lt-bas { font-size: 15px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

/* Pano fiyatı tanımlanmadı uyarısı (hesap pano kataloğuyla açıldığında) */
.pano-uyari { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px;
  background: var(--warn-tint); color: #7A5B12; border: 1px solid #EAD9B0;
  border-radius: var(--r-md); }
.pano-uyari b { color: #6B4F0F; }

/* ============ BULUT / NAS YEDEKLEME ============ */
.yd-anlat { display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; line-height: 1.65;
  color: var(--ink-2); background: var(--sunken); border-radius: var(--r-md); padding: 12px 14px; }
.yd-anlat b { color: var(--ink); }
.yd-uyari { background: var(--warn-tint); color: #7A5B12; border: 1px solid #EAD9B0;
  border-radius: var(--r-sm); padding: 8px 11px; }
.yd-not { font-size: 12.5px; line-height: 1.6; color: var(--ink-2);
  background: var(--volt-soft); border: 1px solid #D8E2FA; border-radius: var(--r-sm);
  padding: 9px 12px; margin-top: 8px; }
.yd-not:empty { display: none; }

/* Panel taşıma düğmeleri — başlıkta, sürükleme tutamağının yanında */
.pano-tasi { display: inline-flex; gap: 2px; margin-left: auto; opacity: 0; transition: opacity .14s; }
.pano-bas .pano-tut { margin-left: 6px; }   /* taşıma düğmeleri sağa itiyor, tutamaç yanında kalsın */
.pano-kart:hover .pano-tasi, .pano-tasi:focus-within { opacity: 1; }
.pano-tasi-btn {
  width: 22px; height: 22px; padding: 0; line-height: 1; font-size: 11px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-3);
  border-radius: var(--r-sm); cursor: pointer;
}
.pano-tasi-btn:hover { border-color: var(--volt); color: var(--volt); background: var(--volt-tint); }
/* Sabitlenmiş kartın 📌 düğmesi her zaman görünür kalsın (durum göstergesi) */
.pano-tasi-btn.on { border-color: var(--volt); background: var(--volt-tint); }
.pano-kart.pano-sabit .pano-tasi { opacity: 1; }
.pano-kart.pano-sabit { box-shadow: inset 3px 0 0 var(--volt), var(--shadow-sm); }
.pano-sabit-rozet {
  display: inline-block; background: var(--volt); color: #fff; border-radius: 3px;
  padding: 0 4px; font-size: 9px; letter-spacing: .04em; vertical-align: 1px;
}
@media (hover: none) { .pano-tasi { opacity: 1; } }   /* dokunmatikte her zaman görünsün */

/* ============ ÜYELİK YÖNETİMİ TABLOSU ============
   Sorun: satır düğmeleri dar sütunlarda iki satıra kırılıyordu ("Pasife / Al"),
   satır yükseklikleri eşitsizleşiyor ve tablo dağınık görünüyordu. */
.uy-tablo td, .uy-tablo th { vertical-align: middle; }
.uy-tablo .btn { white-space: nowrap; }          /* düğme metni asla kırılmasın */
.uy-tablo td:nth-child(2) { white-space: nowrap; }   /* Ad sütunu tek satır */
.uy-tablo .hc-sunucu { white-space: nowrap; }
/* Ödeme tarihi: metin gibi görünen, tıklanınca düzenleme açan düğme */
.hc-tarih {
  border: 1px dashed var(--border-strong); background: transparent; color: var(--ink);
  border-radius: var(--r-sm); padding: 3px 7px; font-size: 12px; font-family: var(--mono);
  cursor: pointer; white-space: nowrap;
}
.hc-tarih:hover { border-color: var(--volt); color: var(--volt); background: var(--volt-tint); }
.hc-tarih .muted { color: var(--ink-3); font-family: var(--font); }
/* Satır sonu aksiyonları: birbirine yapışmasın, sarmasın */
.uy-tablo .uy-islem { display: flex; gap: 4px; justify-content: flex-end; white-space: nowrap; }

/* ============ ESNEK TEKLİF ŞABLONU (Adım 2 → Şablon) ============ */
.ts-kolonlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 6px; }
.ts-kolon { display: flex; align-items: center; gap: 4px; padding: 6px 9px;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface);
  font-size: 12.5px; }
.ts-kolon.kapali { opacity: .5; background: var(--sunken); }
.ts-ok { width: 22px; height: 22px; flex: none; padding: 0; line-height: 1; font-size: 10px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-3);
  border-radius: var(--r-sm); cursor: pointer; }
.ts-ok:hover { border-color: var(--volt); color: var(--volt); background: var(--volt-tint); }
.ts-ok.sil:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-tint); }
.ts-ozel { border: 1px solid var(--border); border-radius: var(--r-md); padding: 9px 11px;
  margin-bottom: 8px; background: var(--surface); }
.ts-ozel-bas { display: flex; gap: 5px; align-items: center; margin-bottom: 6px; }
.ts-ozel-bas .inp { flex: 1; min-width: 0; font-weight: 600; }

/* ============================================================
   MOBİL: "SAHA TERMİNALİ"
   Masaüstü bir ofis istasyonu — yoğun veri tabloları. Telefon ise sahada,
   tek elle, hızlı bakılan bir terminal. Bu yüzden çok sütunlu tablolar yatay
   kaydırma yerine ETİKET → DEĞER kayıt kartlarına dönüşür; pano etiket şeridi
   gibi okunur. Sol kenardaki volt çizgisi ve mono hizalı değerler, masaüstündeki
   teknik kimliği telefona taşır. Masaüstü görünümü hiç değişmez.
   ============================================================ */
@media (max-width: 760px) {
  /* --- Tablo → kayıt kartı --- */
  .tbl-kart { min-width: 0; width: 100%; border-collapse: separate; border-spacing: 0; }
  .tbl-kart thead {                      /* başlıklar görsel olarak gizlenir,
                                            ekran okuyucu için erişilebilir kalır */
    position: absolute; width: 1px; height: 1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .tbl-kart, .tbl-kart tbody, .tbl-kart tr, .tbl-kart td { display: block; width: 100%; }
  .tbl-kart tr {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--volt);
    border-radius: var(--r-md);
    margin-bottom: 9px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
  }
  .tbl-kart tr:last-child { margin-bottom: 0; }
  /* colspan'li grup başlığı satırları kart olmaz — şerit olarak kalır */
  .tbl-kart tr.tk-tam { border-left-color: var(--copper); }
  .tbl-kart tr.tk-tam td { display: table-cell; }

  .tbl-kart td {
    display: flex; align-items: baseline; gap: 10px;
    padding: 7px 12px; border: 0;
    border-bottom: 1px dashed var(--border);
    font-size: 13px; text-align: left !important;
  }
  .tbl-kart tr td:last-child { border-bottom: 0; }
  .tbl-kart td::before {
    content: attr(data-etiket);
    flex: 0 0 38%; min-width: 0;
    font-size: 9.5px; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--ink-3);
    font-family: var(--font); line-height: 1.7;
    overflow-wrap: anywhere;
  }
  /* Etiketi boş olan hücre (aksiyon sütunu) tam genişlik kullanır */
  .tbl-kart td[data-etiket=""]::before { display: none; }
  .tbl-kart td[data-etiket=""] {
    background: var(--sunken); padding: 9px 11px;
    display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-start;
  }
  /* Aksiyon düğmeleri: 96px'lik alt sınır dar telefonlarda her düğmeyi ayrı
     satıra düşürüyordu. İçerik boyunda kalıp boşluğu paylaşırlar; sığmazsa
     küçülmek yerine alt satıra sarar. */
  .tbl-kart td[data-etiket=""] .btn { flex: 1 1 auto; min-width: 0; }
  .tbl-kart td[data-etiket=""] .btn:not(:first-child) { flex: 0 1 auto; }

  /* --- Kompakt kart akışı ---
     tabloEtiketle() kısa değerli hücreleri .tk-kisa ile işaretler: bunlar tam
     satır yerine yan yana akan rozetler olur. 9 sütunlu stok/ürün tablolarında
     kart yüksekliği ~2 katı azalır. İlk hücre kart başlığı gibi vurgulanır. */
  .tbl-kart td.tk-kisa {
    display: inline-flex; width: auto; border-bottom: 0;
    padding: 3px 10px; gap: 5px; align-items: baseline;
  }
  .tbl-kart td.tk-kisa::before { flex: none; margin-right: 1px; }
  .tbl-kart td.tk-bas {
    background: var(--volt-soft); font-weight: 700;
    padding: 7px 12px; border-bottom-color: transparent;
  }
  .tbl-kart td.tk-bas::before { color: var(--volt); opacity: .75; }
  /* Düğme taşıyan veya uzun metinli hücre: etiket üstte, içerik tam genişlikte */
  .tbl-kart td.tk-genis { display: block; padding: 7px 12px; }
  .tbl-kart td.tk-genis::before { display: block; flex: none; margin-bottom: 2px; }
  /* Sayısal değerler tabular mono kalır — masaüstündeki kimlik korunur */
  .tbl-kart td.num, .tbl-kart td.kod {
    font-family: var(--mono); font-variant-numeric: tabular-nums;
  }
  /* İçi tamamen boş hücreler yer kaplamasın */
  .tbl-kart td:empty { display: none; }

  /* --- Taşan filtre alanları --- */
  .tutar-filtre { flex-wrap: wrap; width: 100%; }
  .tutar-filtre .inp { flex: 1 1 96px; min-width: 0; width: auto !important; }
  .toolbar > .inp, .toolbar > select.inp { flex: 1 1 100%; min-width: 0; }

  /* --- Dokunma hedefleri --- */
  .btn { min-height: 44px; padding-inline: 14px; }
  .btn-sm { min-height: 38px; }
  .inp { min-height: 44px; }
  select.inp { background-position: right 10px center; }
  .nav-item { min-height: 46px; }
  .pano-tasi-btn, .ts-ok, .ht-okundu-btn { min-width: 34px; min-height: 34px; }

  /* --- Üst şerit: marka küçülür, zil ve menü büyür --- */
  .topbar { gap: 6px; }
  .brand img { height: 26px !important; }
  .burger { width: 42px; height: 42px; font-size: 19px; }
  .bildirim-btn { width: 42px; height: 42px; }

  /* --- Sayfa başlığı: eylemler alta iner, tam genişlik --- */
  .page-head { flex-wrap: wrap; }
  .page-head .toolbar { width: 100%; }
  .page-head .btn { flex: 1 1 auto; }

  /* --- Sunucu durumu ölçerleri alt alta --- */
  .sd-yuzey { grid-template-columns: 1fr; }
  .sd-izgara { grid-template-columns: 1fr 1fr; }

  /* --- Teklif sihirbazı: adım şeridi kompakt --- */
  .wiz-head { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .wiz-steps { order: 3; width: 100%; margin: 0; overflow-x: auto;
    -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .wiz-step { flex: none; }

  /* --- Yedekleme / şablon ızgaraları tek kolon --- */
  .ts-kolonlar { grid-template-columns: 1fr; }
  .kart-grid { grid-template-columns: 1fr; }
}

/* ---- ÇOK DAR TELEFON (≤400px) ---- */
@media (max-width: 400px) {
  /* NOT: Buradaki kural eskiden TÜM hücreleri sütuna çeviriyordu; aksiyon
     hücresi de kapsandığı için düğmeler alt alta diziliyor, kart 150px
     uzuyordu. Artık yalnız etiketli veri hücreleri daralır, etiket ile değer
     yan yana kalır (dikey yer israfı olmasın). */
  .tbl-kart td:not([data-etiket=""]):not(.tk-kisa) { gap: 8px; padding: 6px 11px; }
  .tbl-kart td:not([data-etiket=""]):not(.tk-kisa)::before { flex: 0 0 36%; }
  .sd-izgara { grid-template-columns: 1fr; }
  .page-head .btn { flex: 1 1 100%; }
}

/* ============================================================
   MOBİL — DOKUNMA ERGONOMİSİ VE OKUNABİLİRLİK
   Denetimde çıkan üç yaygın sorun: (1) modal kapatma düğmesi 26px,
   (2) işaret kutuları/radyolar 13px, (3) 10px'lik bölüm etiketleri.
   Parmakla kullanımda 26px "ıskalanır"; Apple ve Google kılavuzları en az
   44×44pt / 48×48dp önerir. Aşağısı bu hedefleri tutturur — masaüstünde
   hiçbir şey değişmez (tümü ≤760px sorgusunun içinde).
   ============================================================ */
@media (max-width: 760px) {
  /* Modal kapatma — köşede rahat vurulabilen hedef */
  .modal-kapat {
    width: 42px; height: 42px; font-size: 17px;
    display: grid; place-items: center; flex: none;
  }
  .modal-head { padding-right: 6px; gap: 6px; }

  /* İşaret kutusu / radyo: tarayıcı varsayılanı 13px — büyütülür.
     accent-color ile marka rengi korunur. */
  input[type="checkbox"], input[type="radio"] {
    width: 22px; height: 22px; flex: none;
    accent-color: var(--volt); cursor: pointer;
  }
  /* Etiketle birlikte kullanılan kutularda hizayı koru */
  label > input[type="checkbox"], label > input[type="radio"] { margin-top: 0; }

  /* Tablo içindeki küçük seçim kutuları ve satır içi düzenleyiciler */
  .tbl select.inp, .tbl input.inp { min-height: 38px; font-size: 13px; }
  .hc-tarih { min-height: 38px; padding: 6px 11px; font-size: 13px; }

  /* Küçük yardımcı düğmeler (yenile, taşı, sil, sayfalama) */
  .sd-yenile-btn { width: 34px; height: 34px; font-size: 15px; }
  .sb-yt-chip, .sb-chip { min-height: 34px; padding: 6px 10px; }

  /* Bölüm etiketleri: 10px büyük harf + geniş harf aralığı telefonda
     okunmuyordu; bir punto büyütülüp aralık hafif azaltıldı. */
  .eyebrow { font-size: 11px; letter-spacing: .1em; }
  .kucuk { font-size: 12px; }

  /* Sayfalama okları ve pill'ler parmak hedefi olsun */
  [data-sayfa] { min-width: 34px; min-height: 34px; }
}

/* Dokunmatik cihazlarda (fare olmayan) hedefleri her genişlikte büyüt —
   tablet yatay modda da parmakla kullanılıyor. */
@media (hover: none) and (pointer: coarse) {
  .modal-kapat { width: 42px; height: 42px; }
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; accent-color: var(--volt); }
}

/* ---- MOBİL: satır içi stille küçültülmüş alanlar ----
   Masaüstünde tablo/araç çubuğu yoğunluğu için birçok alana satır içi
   `min-height:24-28px` verilmiş. Satır içi stil sınıf kurallarını ezdiği için
   telefonda ancak !important ile aşılabiliyor. Genişlikler korunur, yalnız
   dokunulabilir yükseklik büyür. */
@media (max-width: 760px) {
  .inp, input.inp, select.inp, textarea.inp,
  input[type="date"], input[type="color"] { min-height: 40px !important; }
  textarea.inp { min-height: 72px !important; }
  .btn, .btn-sm { min-height: 40px !important; }
  [data-sbekle], .ts-ok, .pano-tasi-btn, .ht-okundu-btn,
  .sd-yenile-btn, [data-sayfa] { min-height: 36px !important; min-width: 36px; }

  /* Bölüm etiketleri — .sec .eyebrow ve .page-eyebrow daha yüksek özgüllükte
     olduğu için burada aynı seçicilerle geçiliyor. */
  .sec .eyebrow, .page-eyebrow, .eyebrow,
  .kilavuz-icerik .eyebrow, .kilavuz-icerik .page-eyebrow {
    font-size: 11.5px; letter-spacing: .09em;
  }
  .nav-caption { font-size: 11.5px; }

  /* İşaret kutuları biraz daha büyük + etiketin tamamı dokunma hedefi olsun */
  input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; }
  label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) {
    min-height: 40px; display: flex; align-items: center; gap: 9px;
  }
}

/* ---- MOBİL: 9.5-10px'lik mikro etiketler ----
   Masaüstünde bu boyut "teknik künye" hissi veriyor; telefonda okunmuyor.
   Bir punto büyütülüp harf aralığı hafif daraltılır. Belge ÖNİZLEMESİ hariç:
   orası ölçekli bir A4 kâğıdı, oradaki punto belgenin kendi puntosudur. */
@media (max-width: 760px) {
  .arac-etiket, .rev-etiket, .sd-hucre-ad, .sd-olcer-ad,
  .tbl-kart td::before { font-size: 11px; letter-spacing: .07em; }
  .sd-alt { font-size: 11.5px; }
}

/* Panel içi durum etiketleri (pill) telefonda 10px kalıyordu */
@media (max-width: 760px) {
  .pano-kart .pano-govde .tbl .pill,
  .pill { font-size: 11px; padding: 2px 8px; }
  .kur-chip { font-size: 11px; }
}

/* ---- MOBİL: ARAMA SONUÇ KARTI (yoğun) ----
   Genel kart dönüşümü 8 alanı alt alta dizince satır 418px oluyordu; uzun bir
   sonuç listesinde bu kullanılamaz. Arama sonuçlarında öne çıkan bilgi Kod,
   Ürün Adı, Marka ve Fiyat — ikincil alanlar (Grup, Para Birimi, İskonto)
   tek satırda küçük künye olarak toplanır. */
@media (max-width: 760px) {
  #f-urun-sarmal .tbl-kart tr { margin-bottom: 7px; }
  #f-urun-sarmal .tbl-kart td { padding: 4px 11px; font-size: 12.5px; }
  #f-urun-sarmal .tbl-kart td::before { flex: 0 0 30%; font-size: 10px; line-height: 1.5; }
  /* Kod: kart başlığı gibi, etiketsiz ve vurgulu */
  #f-urun-sarmal .tbl-kart td:nth-child(1) {
    background: var(--volt-soft); font-weight: 700; font-family: var(--mono);
    font-size: 12px; padding: 6px 11px;
  }
  #f-urun-sarmal .tbl-kart td:nth-child(1)::before { display: none; }
  /* Ürün adı: tam genişlik, etiketsiz */
  #f-urun-sarmal .tbl-kart td:nth-child(2) { font-weight: 600; font-size: 13px; }
  #f-urun-sarmal .tbl-kart td:nth-child(2)::before { display: none; }
  /* İkincil alanlar (Marka, Grup, Liste Fiyatı, PB, İskonto) tek şeritte akar —
     alt alta dizilince her sonuç 300px+ yer kaplıyordu. */
  #f-urun-sarmal .tbl-kart td:nth-child(n+3):nth-child(-n+7) {
    display: inline-flex; width: auto; border-bottom: 0;
    padding: 3px 9px; font-size: 12px;
  }
  #f-urun-sarmal .tbl-kart td:nth-child(n+3):nth-child(-n+7)::before {
    flex: none; margin-right: 5px; font-size: 9.5px;
  }
  /* Liste fiyatı vurgulu */
  #f-urun-sarmal .tbl-kart td:nth-child(5) { color: var(--volt); font-weight: 700; }
  #f-urun-sarmal .tbl-kart td:nth-child(5)::before { content: "₺"; letter-spacing: 0; }
  /* Aksiyon hücresi alta, tam genişlik */
  #f-urun-sarmal .tbl-kart td:last-child { display: flex; padding: 6px 9px; }
}

/* ============================================================
   MOBİL — MÜHENDİSLİK ARAÇLARI (Pano · Klemens · Bakır Bara)
   Bu araçlar masaüstünde yan yana panellerle çalışır: solda katalog, sağda
   çizim. 375px'te bu düzen sığmaz; paneller dikey yığılır, çizim alanı tam
   genişliği alır ve kendi içinde kaydırılır. Masaüstü düzeni değişmez.
   ============================================================ */
@media (max-width: 760px) {
  /* Klemens katalog seçicisi: 4 kolon (≈490px) → alt alta */
  .kl-katalog { grid-template-columns: 1fr !important; }
  .kl-katalog > div { border-right: 0 !important; border-bottom: 1px solid var(--border); }
  .kl-katalog > div:last-child { border-bottom: 0; }
  .kl-katalog [id$="markalar"], .kl-katalog [id$="gruplar"],
  .kl-katalog [id$="urunler"] { max-height: 168px !important; }
  .kl-urun-satir { grid-template-columns: 1fr auto !important; row-gap: 2px; }

  /* Pano tasarımı: katalog + çizim alanı alt alta */
  .pt-govde { grid-template-columns: 1fr !important; }
  .modal.tam .pt-govde { height: auto !important; }
  .pt-panolar { grid-template-columns: 1fr !important; }
  /* Araç çubuğu çok yer kaplıyordu — sıkışır, çizim daha erken görünür */
  .pt-arac-cubugu { gap: 5px; padding: 8px 9px; }
  .pt-arac-cubugu .field { margin: 0; }
  .pt-arac-cubugu label { font-size: 11px; }

  /* Çizim alanları: tam genişlik, kendi içinde kaydırılır (sayfayı kaydırmaz) */
  .pt-govde-cizim, .din-ray, .pt-tuval, .pt-cizim-alan {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  /* Kırmızı yükseklik ölçüsü çizimin 34px SAĞINDA duruyor: dar ekranda
     görünüm alanının dışına taşıp tamamen kırpılıyordu (rakam okunamıyordu).
     Telefonda çizimin İÇ kenarına alınır; okunurluk için hafif zemin. */
  .pt-olcu { right: 0; }
  .pt-olcu span {
    margin-right: 2px; padding: 2px 0;
    background: rgba(255,255,255,.82); border-radius: 3px;
  }
  .pt-urun-liste { font-size: 14px; }
  /* Modal içi iki kolonlu formlar tek kolona iner */
  .modal .form-grid { grid-template-columns: 1fr !important; }
  .modal .grid-2, .modal .grid-3 { grid-template-columns: 1fr !important; }
}

/* ---- MOBİL: katlanır filtre paneli ---- */
@media (max-width: 760px) {
  .mf-kap { position: relative; }
  /* Katlıyken yalnız başlık, arama ve ana eylem görünür */
  .mf-kap.mf-kapali > *:not(.mf-hep):not(.mf-tog) { display: none !important; }
  .mf-tog {
    width: 100%; justify-content: center; gap: 7px;
    border-style: dashed; font-weight: 600;
  }
  .mf-tog .mf-rozet {
    display: inline-grid; place-items: center; min-width: 19px; height: 19px;
    padding: 0 5px; border-radius: 999px; background: var(--volt); color: #fff;
    font-size: 11px; font-weight: 700; font-family: var(--mono);
  }
  .mf-tog .mf-ok { margin-left: 2px; opacity: .6; font-size: 11px; }
  /* Açıkken paneli görsel olarak grupla */
  .mf-kap:not(.mf-kapali) {
    background: var(--sunken); border-radius: var(--r-md);
    padding: 10px; gap: 8px;
  }
  .mf-kap:not(.mf-kapali) .mf-tog { border-style: solid; }
}

/* Sayfa başlığındaki eylem düğmeleri: tek tek tam satır kaplamak yerine
   ikişerli paylaşsın — Fiyat Listeleri'nde iki düğme 96px yer yiyordu. */
@media (max-width: 760px) {
  .page-head .btn:not(.mf-tog) { flex: 1 1 44%; min-width: 132px; }
  /* Sekme şeritleri (Ürün Ara / Panolar / …) kaydırılabilir tek satır olsun */
  .page-body > .toolbar:has(> .btn[data-sekme]),
  .toolbar:has(> .btn[data-uysekme]) {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 3px;
  }
  .toolbar > .btn[data-sekme], .toolbar > .btn[data-uysekme] { flex: none; }
}

/* ============================================================
   SENKRON DURUM GÖSTERGESİ (üst çubuk)
   Toast geçicidir ve kaçırılabilir; bu gösterge kalıcıdır. "Kaydedildi" sessiz
   ve soluk durur, sorun varsa dikkat çeker — kullanıcı bağlantı koptuğunda
   çalışmasının kaybolup kaybolmadığını merak etmek zorunda kalmasın.
   ============================================================ */
.senkron-chip {
  font-size: 11.5px; padding: 4px 11px; border-radius: 999px;
  white-space: nowrap; display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid transparent; cursor: default; transition: background .18s, color .18s;
}
.senkron-chip.tamam { color: var(--ok); background: var(--ok-tint); border-color: #BFE3CF; }
.senkron-chip.bekliyor { color: var(--info); background: var(--info-tint); border-color: #BBDCEC; }
.senkron-chip.hata {
  color: #8E2A1E; background: var(--danger-tint); border-color: #F0C4BD; font-weight: 600;
  animation: senkron-nabiz 2.2s ease-in-out infinite;
}
@keyframes senkron-nabiz { 50% { background: #FBD9D3; } }
/* Dar ekranda yalnız simge kalır — üst çubuk taşmasın */
@media (max-width: 760px) {
  .senkron-chip .kucuk { display: none; }
  .senkron-chip { padding: 4px 8px; font-size: 11px; }

  /* Bildirimler telefonda SAĞ ALTTA duruyordu — tam olarak modalın Kaydet /
     Vazgeç düğmelerinin ve alt sekme çubuğunun üzerine geliyor, bir işlem
     yapıldıktan hemen sonra düğmeye basılamıyordu. Üste alınır. */
  .toast-alan {
    top: calc(env(safe-area-inset-top, 0px) + 10px); bottom: auto;
    left: 10px; right: 10px; align-items: center;
  }
  .toast { width: 100%; max-width: 460px; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .senkron-chip.hata { animation: none; }
}

/* ============================================================
   ADIM 4 — MALİYET VE KÂRLILIK ANALİZİ (M9)
   Tıklanabilir özet kartlar, interaktif dağılım lejantı ve
   "ne değişti" farkı paneli.
   ============================================================ */
.stat-tik { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.stat-tik:hover, .stat-tik:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(16, 24, 40, .10); border-color: var(--volt); outline: none; }
/* Stok tablosunda fiyatın yanındaki küçük kaynak işareti. Hücreyi
   kalabalıklaştırmasın diye sönük durur, üzerine gelince belirginleşir. */
.fiyat-bilgi {
  border: 0; background: none; cursor: pointer; padding: 0 1px;
  font-size: 11px; line-height: 1; color: var(--ink-3); opacity: .55;
  transition: opacity .12s ease, color .12s ease;
}
.fiyat-bilgi:hover, .fiyat-bilgi:focus-visible { opacity: 1; color: var(--volt); outline: none; }
/* HİZALAMA (v0.21.3): ⓘ ve ! farklı genişlikte olduğu için sayının yanına
   doğrudan eklendiğinde her satır farklı kayıyor ve sütun "ortalanmamış"
   görünüyordu. İşaret sabit genişlikte bir yuvaya oturtulur; tutarlar
   böylece birbirinin altına tam hizalanır. */
.fiyat-hucre { display: inline-flex; align-items: center; justify-content: flex-end;
  gap: 3px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fiyat-hucre .fiyat-bilgi { flex: 0 0 13px; width: 13px; text-align: center; padding: 0; }
.fiyat-bilgi.uyari { color: var(--warn); opacity: .85; font-weight: 700; }
.fiyat-bilgi.uyari:hover { color: var(--danger); }

.stat-buyutec { color: var(--ink-3); font-size: 11px; opacity: 0; transition: opacity .12s ease; }
/* Dökümü açık olan kart: hangi sayının açıklandığı bir bakışta belli olsun */
.stat-tik.stat-secili { border-color: var(--volt); box-shadow: 0 0 0 2px var(--volt-tint); }
.stat-tik.stat-secili .stat-buyutec { opacity: 1; }
.stat-tik:hover .stat-buyutec, .stat-tik:focus-visible .stat-buyutec { opacity: 1; }

.dagilim-kap { display: flex; gap: 16px; align-items: center; }
.dagilim-lejant { flex: 1; min-width: 0; }
.lej-satir {
  display: flex; align-items: center; gap: 7px; font-size: 12px;
  padding: 4px 6px; border-radius: 6px; cursor: pointer;
  transition: background .12s ease, opacity .12s ease;
}
.lej-satir:hover, .lej-satir.lej-vurgu { background: var(--volt-soft); }
/* Vurgulanmayan satırlar soluklaşır ama METİN OKUNUR kalır: eskiden .38
   opaklıkta yazılar seçilemiyordu. */
.lej-satir.lej-solgun { opacity: .62; }
.lej-satir.lej-vurgu { font-weight: 600; box-shadow: inset 2px 0 0 var(--volt); }
.lej-nokta { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.lej-ad { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lej-tutar { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); }
.lej-oran { font-family: var(--mono); font-weight: 600; min-width: 46px; text-align: right; }

.kar-degisim { border: 1px solid var(--border); border-left: 3px solid var(--copper); border-radius: 8px; padding: 9px 11px; background: var(--volt-soft); }
.kd-bas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.kd-etiket { font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--copper); }
.kd-bas .btn { margin-left: auto; }
.kd-satir { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 2px 0; flex-wrap: wrap; }
.kd-ad { min-width: 86px; color: var(--ink-3); }
.kd-eski { font-family: var(--mono); color: var(--ink-3); text-decoration: line-through; }
.kd-ok { color: var(--ink-3); }
.kd-yeni { font-family: var(--mono); font-weight: 700; }
.kd-fark { font-family: var(--mono); font-size: 11.5px; margin-left: auto; font-weight: 600; }

@media (max-width: 720px) {
  .dagilim-kap { flex-direction: column; align-items: stretch; gap: 10px; }
  .dagilim-kap canvas { align-self: center; }
  .lej-satir { font-size: 12.5px; padding: 7px 6px; }
  .kd-ad { min-width: 100%; }
  .kd-fark { margin-left: 0; }
}

/* ============================================================
   R2 — "ÜRÜN SEÇ" PENCERESİ (referans sistem "Ürün Grupları" düzeni)
   Üstte sekmeler, mavi ana grup şeridi, solda ana gruplar, ortada alt
   gruplar, altta ürün tablosu, sağda ürün detayı + "Teklife Gir".
   ============================================================ */
.us-kart { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.us-kart:hover, .us-kart:focus-visible {
  transform: translateY(-2px); border-color: var(--volt);
  box-shadow: 0 6px 18px rgba(16, 24, 40, .10); outline: none;
}
.us-rozetler { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.us-rozetler .pill { font-size: 10.5px; }

.us-ust { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.us-sekmeler { display: flex; gap: 4px; }
.us-sekme {
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-2);
  padding: 6px 14px; border-radius: var(--r-sm); font: inherit; font-size: 12.5px;
  cursor: pointer; transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.us-sekme:hover { border-color: var(--border-strong); }
.us-sekme.on { background: var(--volt); border-color: var(--volt); color: #fff; font-weight: 600; }
.us-liste-ad { margin-left: auto; font-size: 12px; color: var(--ink-3); font-family: var(--mono); }

/* Seçili ana grubun adını taşıyan mavi şerit — referans sistemdeki başlık bandı */
.us-ana-serit {
  background: var(--volt); color: #fff; font-weight: 700; font-size: 13px;
  letter-spacing: .02em; padding: 7px 12px; border-radius: var(--r-sm) var(--r-sm) 0 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* İki panel üstte + ürün tablosu altta + detay sağda tam yükseklik */
/* S4 — TEK KAYDIRMA DAVRANIŞI
   Eskiden ürün tablosu kendi içinde kayıyor, sağdaki detay paneli ise sabit
   kalıyordu; ekranda iki ayrı kaydırma olması kafa karıştırıyordu. Artık ızgara
   içeriği kadar uzar ve TÜM pencere tek parça hâlinde kayar — panel listeyle
   birlikte hareket eder. Yalnızca ana/alt grup listeleri kendi içinde kayar
   (uzun grup listelerinde tabloyu ekrandan itmesinler diye). */
.us-kafes {
  display: grid;
  grid-template-columns: 1fr 1fr 268px;
  grid-template-areas: "ana alt detay" "urun urun detay";
  gap: 10px; border: 1px solid var(--border); border-top: 0;
  border-radius: 0 0 var(--r-sm) var(--r-sm); padding: 10px; background: var(--ground);
  align-items: start;
}
.us-panel:nth-of-type(1) { grid-area: ana; }
.us-panel:nth-of-type(2) { grid-area: alt; }
.us-detay { grid-area: detay; }
.us-urunler { grid-area: urun; min-width: 0; }

.us-panel {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden;
  max-height: 34vh;
}
.us-panel-bas {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; color: var(--ink-3);
  padding: 6px 10px; background: var(--sunken); border-bottom: 1px solid var(--border);
}
.us-panel-liste { overflow-y: auto; flex: 1; min-height: 0; }

.us-sat {
  display: flex; align-items: center; gap: 8px; padding: 5px 10px;
  font-size: 12.5px; cursor: pointer; border-bottom: 1px solid var(--sunken);
}
.us-sat:hover { background: var(--volt-soft); color: var(--ink); }
.us-sat.on { background: var(--volt); color: #fff; }
.us-sat.on:hover { background: var(--volt-dark); color: #fff; }
.us-sat.on .muted, .us-sat.on:hover .muted { color: rgba(255, 255, 255, .8) !important; }
.us-sat.on .us-sat-ad, .us-sat.on:hover .us-sat-ad { color: #fff; }
.us-sat-ad { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.us-radyo {
  width: 11px; height: 11px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--border-strong); background: var(--surface);
}
.us-sat.on .us-radyo { border-color: #fff; box-shadow: inset 0 0 0 2.5px var(--volt); background: #fff; }

.us-urunler { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; }
/* Kendi kaydırma çubuğu YOK — tablo tam boyuyla uzar, pencere birlikte kayar */
.us-urunler .tbl-wrap { max-height: none; height: auto; overflow: visible; }
.us-urunler .tbl th { position: sticky; top: 0; z-index: 1; background: var(--sunken); }
/* Ürün satırı — seçiliyken de hover'da da metin HER ZAMAN okunur kalır.
   Eskiden seçili (mavi) satırın üzerine gelince açık hover rengi zemine
   biniyor, beyaz yazı kayboluyordu. */
.us-urun { cursor: pointer; transition: background .12s ease; }
.us-urun:hover td { background: var(--volt-soft); color: var(--ink); }
.us-urun.on td { background: var(--volt); color: #fff; }
.us-urun.on:hover td { background: var(--volt-dark); color: #fff; }
.us-urun.on td .kod, .us-urun.on:hover td .kod { color: #fff; }
.us-urun.on td .muted, .us-urun.on td .kucuk { color: rgba(255,255,255,.8) !important; }

/* Detay paneli, uzun listelerde ekrandan çıkmasın diye üstte YAPIŞIR ama
   kendi kaydırma çubuğu yoktur — pencerenin tek kaydırmasıyla uyumludur. */
.us-detay {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  position: sticky; top: 10px; align-self: start;
}
.us-detay-ic { padding: 10px; }
.us-detay-bos { padding: 20px; text-align: center; }
.us-detay-marka {
  font-weight: 800; font-size: 15px; color: var(--volt); text-align: center;
  padding: 8px; margin-bottom: 8px; background: var(--volt-soft); border-radius: var(--r-sm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.us-detay .field { margin-bottom: 7px; }
.us-detay .field label { font-size: 10.5px; }
.us-net { font-family: var(--mono); font-weight: 700; color: var(--volt); display: flex; align-items: center; }

@media (max-width: 1000px) {
  .us-kafes {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas: "ana" "alt" "detay" "urun";
    min-height: 0;
  }
  .us-panel { max-height: 30vh; }
  .us-detay { position: static; }
  .us-liste-ad { margin-left: 0; width: 100%; }
}

/* ============================================================
   R4 — TOPLU İŞLEMLER BANDI
   Ayrı bir düğme yok: kalem seçildiği anda belirir, seçim boşalınca kaybolur.
   Uzun listelerde yukarı dönmek gerekmesin diye üstte yapışık durur.
   ============================================================ */
/* ADIM 3 — YAPIŞKAN ÜST BLOK
   Arama/araç çubuğu, kalem panosu bandı, seçim özeti ve toplu işlem bandı tek
   bir kapta durur ve sayfa kaydırılırken üstte kalır. Grup başlığı satırları
   da bu bloğun altına yapışır (--w-yapiskan-y). Uzun tekliflerde kullanıcı
   menülere ulaşmak ya da hangi grupta olduğunu görmek için başa dönmez. */
.w-yapiskan {
  /* Sihirbaz başlık şeridinin altına yapışır (üstünü örtmez) */
  position: sticky; top: var(--wiz-head-y, 0px); z-index: 9;
  /* Zemin OPAK olmalı: saydam kalırsa altından geçen tablo satırları
     araç çubuğu ile bantların arasından görünüyordu. */
  background: var(--ground); padding: 6px 0 2px;
  /* Sayfa gövdesinin yan boşluğunu tam kaplasın (kenarlarda satır sızmasın) */
  margin: -6px -26px 0; padding-inline: 26px;
  box-shadow: 0 6px 10px -10px rgba(16,24,39,.5);
}
.w-yapiskan > *:last-child { margin-bottom: 8px; }
@media (max-width: 720px) {
  .w-yapiskan { margin-inline: -13px; padding-inline: 13px; }
}
/* Grup başlığı satırı: üst bloğun hemen altına yapışır.
   ÖNEMLİ: `.tbl-wrap` yalnız `overflow-x: auto` taşısa bile tarayıcı dikeyde de
   bir kaydırma kabı oluşturur; bu kabın dikey taşması olmadığı için içindeki
   sticky ögeler HİÇ yapışmaz. `overflow-y: clip` bu kabı oluşturmaz, yatay
   kaydırma korunurken yapışkanlık sayfa kaydırmasına göre çalışır. */
.tbl-wrap:has(> table.xl-tablo) { overflow: visible; }
/* TAŞMA VARSA KAYDIRMA AÇILIR (v0.17.4)
   Yapışkan başlık için sarmalayıcı `overflow: visible` olmalı; ama tablo kaba
   sığmadığında bu, taşan sütunlara HİÇ erişilememesi demekti (900–1500 px
   arasında ölçüldü: 204 px taşma, kaydırma çubuğu yok). Artık çizimden sonra
   gerçekten taşıp taşmadığı ölçülüp bu sınıf ekleniyor: geniş ekranda yapışkan
   başlık korunur, dar ekranda içerik erişilebilir olur. */
/* ÖZGÜLLÜK NOTU: yukarıdaki `.tbl-wrap:has(> table.xl-tablo)` kuralı
   (0,2,1) ağırlığındadır; sınıf tek başına (0,2,0) kalıp EZİLİYORDU —
   sınıf eklendiği hâlde kaydırma açılmıyordu. :has ile birlikte yazılarak
   (0,3,1) yapıldı. */
.tbl-wrap.xl-kaydir:has(> table.xl-tablo) { overflow-x: auto; }
.tbl-wrap.xl-kaydir .xl-tablo thead th,
.tbl-wrap.xl-kaydir .xl-tablo tr.xl-grup td { position: static; }
/* Dar ekranda yatay kaydırma gerekir; orada yapışkanlık zaten ikinci plandadır. */
@media (max-width: 900px) {
  .tbl-wrap:has(> table.xl-tablo) { overflow-x: auto; }
  .xl-tablo tr.xl-grup td, .xl-tablo thead th { position: static; }
}
/* Satırın TAMAMI yapışacaksa `border-collapse: collapse` engel olur: birleşik
   kenarlıklı tabloda satır kutusu kendi başına konumlanamaz, yalnız hücreler
   kendi satır yüksekliklerinde kayar (yani hiç yapışmaz). `separate` + sıfır
   aralık görünümü aynı bırakır ve satır yapışkan olabilir. */
.xl-tablo { border-collapse: separate; border-spacing: 0; }
.xl-tablo tr.xl-grup { position: sticky; top: var(--w-yapiskan-y, 0px); z-index: 5; }
.xl-tablo thead th { position: sticky; top: var(--w-yapiskan-y, 0px); z-index: 6; }

.toplu-bant {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  background: var(--volt-tint); border: 1px solid var(--volt);
  border-radius: var(--r-sm); padding: 8px 12px; margin-bottom: 12px;
  box-shadow: var(--shadow-md);
  animation: tb-gir .16s ease-out;
}
@keyframes tb-gir { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.toplu-bant .tb-sayi { font-size: 12.5px; color: var(--volt-deep); white-space: nowrap; }
.toplu-bant .kucuk { color: var(--ink-2); }

/* DASHBOARD PANEL LİSTESİ
   Dar kartlarda tablo okunmuyordu: her kayıt iki satırlık bir öge olarak
   çizilir, değer sağda hizalı durur. Telefonda da aynı düzen korunur. */
.pl-liste { list-style: none; margin: 0; padding: 0; display: grid; }
.pl-sat {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px;
  align-items: center; padding: 9px 4px; border-bottom: 1px solid var(--border);
}
.pl-sat:last-child { border-bottom: 0; }
.pl-sat[data-git] { cursor: pointer; border-radius: var(--r-sm); }
.pl-sat[data-git]:hover { background: var(--volt-tint); }
.pl-sat[data-git]:focus-visible { outline: 2px solid var(--volt); outline-offset: -2px; }
.pl-metin { min-width: 0; }
.pl-ust { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.pl-kod {
  font-family: var(--mono); font-size: 11px; color: var(--volt-deep);
  background: var(--volt-tint); padding: 1px 5px; border-radius: 4px; flex: none;
}
.pl-ad {
  font-size: 13px; font-weight: 600; color: var(--ink); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Rozet ile ikincil bilgi dar kartta yan yana sığmıyordu; sığmayınca alt
   satıra iner, böylece müşteri adı "Çetin…" diye kırpılmaz. */
.pl-alt { display: flex; align-items: center; gap: 7px; margin-top: 3px; min-width: 0; flex-wrap: wrap; }
.pl-not {
  font-size: 11.5px; color: var(--ink-2); flex: 1 1 110px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pl-deger {
  text-align: right; flex: none; display: flex; flex-direction: column;
  align-items: flex-end; line-height: 1.25;
}
.pl-deger b { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--ink); }
.pl-deger-alt { font-size: 10.5px; color: var(--ink-3); }
/* Panel büyütüldüğünde satırlar daha ferah olur */
.pano-buyuk .pl-sat { padding: 11px 6px; }
.pano-buyuk .pl-ad { font-size: 13.5px; }
@media (max-width: 720px) {
  .pl-sat { padding: 10px 2px; }
  .pl-ad { font-size: 13.5px; }
  .pl-deger b { font-size: 14px; }
}

/* AYARLAR > ŞİRKET — abonelik ve ekip özeti şeridi */
.sirket-ozet {
  display: flex; align-items: stretch; gap: 9px; flex-wrap: wrap;
  padding: 10px 11px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--sunken);
}
.sirket-ozet .so-kutu {
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 6px 11px; display: flex; flex-direction: column; gap: 1px; min-width: 108px;
}
.sirket-ozet .so-kutu.uyari { border-color: var(--danger); }
.sirket-ozet .so-kutu.uyari b { color: var(--danger); }
.sirket-ozet .so-etiket { font-size: 10.5px; color: var(--ink-2); }
.sirket-ozet .so-kutu b { font-size: 13.5px; color: var(--ink); }
.sirket-ozet .btn { align-self: center; margin-left: auto; }
@media (max-width: 720px) {
  .sirket-ozet .btn { margin-left: 0; width: 100%; }
}

/* ÜYELİK > ŞİRKETLER — açılır şirket kartları */
.sirket-liste { display: grid; gap: 8px; }
.sirket-kart { border: 1px solid var(--border); border-radius: var(--r-md); background: #fff; overflow: hidden; }
.sirket-kart.acik { border-color: var(--volt); box-shadow: var(--shadow-sm); }
.sk-bas {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 13px; cursor: pointer;
}
.sk-bas:hover { background: var(--volt-tint); }
.sirket-kart.acik .sk-bas { background: var(--volt-tint); border-bottom: 1px solid var(--border); }
.sk-ok { color: var(--ink-3); font-size: 12px; width: 12px; flex: none; }
.sk-ad { font-weight: 700; font-size: 13.5px; color: var(--ink); }
.sk-sahip { font-family: var(--mono); font-size: 11px; }
.sk-veri { margin-left: auto; }
.sk-govde { padding: 13px; }
@media (max-width: 720px) {
  .sk-veri { margin-left: 0; }
  .sk-bas { gap: 7px; padding: 9px 10px; }
}

/* İÇE AKTARMA — DOSYA SÜRÜKLE-BIRAK ALANI */
.im-birak {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  border: 1.5px dashed var(--border-strong); border-radius: var(--r-sm);
  background: var(--sunken); padding: 9px 12px; min-height: 42px;
  transition: border-color .12s ease, background .12s ease;
}
.im-birak:hover, .im-birak.uzerinde { border-color: var(--volt); background: var(--volt-tint); }
.im-birak-ikon { font-size: 17px; flex: none; }
.im-birak-ad {
  flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* İÇE AKTARMA — DOSYA GÖRÜNTÜLEYİCİ
   Kullanıcı Excel'i açmadan dosyayı burada görür; atanan roller sütun
   renkleriyle belli olur, başlığa tıklayınca rol değiştirilir. */
.im-gorunum-bas { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin: 14px 0 6px; }
.im-gorunum { max-height: 320px; overflow: auto; border: 1px solid var(--border); border-radius: var(--r-sm); }
table.im-sayfa { font-size: 11.5px; }
table.im-sayfa thead th { position: sticky; top: 0; z-index: 2; padding: 0; background: var(--sunken); }
table.im-sayfa td {
  white-space: nowrap; max-width: 230px; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--mono); font-size: 11px;
}
table.im-sayfa td.pasif { color: var(--ink-3); background: repeating-linear-gradient(
  45deg, transparent, transparent 6px, rgba(0,0,0,.02) 6px, rgba(0,0,0,.02) 12px); }
.im-sutun-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  width: 100%; border: 0; background: transparent; cursor: pointer;
  padding: 5px 7px; text-align: left; font: inherit;
}
.im-sutun-btn:hover { background: var(--volt-tint); }
.im-sutun-harf { font-family: var(--mono); font-size: 10px; color: var(--ink-3); }
.im-sutun-ad { font-size: 11.5px; font-weight: 700; color: var(--ink);
  max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.im-rol-rozet {
  font-size: 10px; font-weight: 700; color: #fff; background: var(--volt);
  padding: 1px 6px; border-radius: 999px; white-space: nowrap;
}
.im-rol-rozet.bos { background: transparent; color: var(--ink-3); border: 1px dashed var(--border-strong); }
/* Rol renkleri — sütunun tamamı aynı tonla boyanır */
table.im-sayfa th.rol-kod   .im-rol-rozet, table.im-sayfa th.rol-ad .im-rol-rozet { background: var(--volt); }
table.im-sayfa th.rol-fiyat .im-rol-rozet { background: var(--ok); }
table.im-sayfa th.rol-pb    .im-rol-rozet,
table.im-sayfa th.rol-birim .im-rol-rozet { background: var(--ink-2); }
table.im-sayfa th.rol-marka .im-rol-rozet { background: var(--copper); }
table.im-sayfa th.rol-iskonto .im-rol-rozet { background: var(--warn); }
table.im-sayfa td.rol-kod, table.im-sayfa td.rol-ad { background: var(--volt-tint); }
table.im-sayfa td.rol-fiyat { background: var(--ok-tint); }
table.im-sayfa td.rol-marka, table.im-sayfa td.rol-iskonto,
table.im-sayfa td.rol-pb, table.im-sayfa td.rol-birim { background: var(--sunken); }
.im-rol-menu {
  position: absolute; z-index: 20; margin-top: 2px; min-width: 156px;
  background: #fff; border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  box-shadow: var(--shadow-md); padding: 4px; display: grid; gap: 1px;
}
.im-rol-menu button {
  border: 0; background: transparent; text-align: left; cursor: pointer;
  font-size: 12px; padding: 5px 9px; border-radius: var(--r-sm); color: var(--ink);
}
.im-rol-menu button:hover { background: var(--volt-tint); color: var(--volt); }
.im-rol-menu button.secili { background: var(--volt); color: #fff; font-weight: 700; }
.im-rol-menu button.ayir { border-top: 1px solid var(--border); margin-top: 3px; padding-top: 7px; color: var(--ink-2); }
/* Rol menüsü mutlak konumlanır — hücre konumlanma bağlamı olmalı */
table.im-sayfa th { position: relative; }

/* İÇE AKTARMA — ROL TEPSİSİ VE SÜRÜKLE-BIRAK EŞLEŞTİRME */
.im-rol-tepsi {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 7px 9px; margin: 6px 0; border: 1px dashed var(--border-strong);
  border-radius: var(--r-sm); background: var(--sunken);
}
.im-rol-tepsi.birak-hedef { border-color: var(--danger); background: var(--warn-tint); }
.im-rol-etiket {
  font-size: 11px; font-weight: 700; color: #fff; background: var(--ink-2);
  padding: 3px 9px; border-radius: 999px; cursor: grab; user-select: none;
}
.im-rol-etiket:active { cursor: grabbing; }
.im-rol-rozet[draggable="true"] { cursor: grab; }
table.im-sayfa th.birak-hedef { outline: 2px solid var(--volt); outline-offset: -2px; background: var(--volt-tint); }
.im-gorunum.surukleniyor table.im-sayfa th { outline: 1px dashed var(--border-strong); outline-offset: -2px; }

/* İÇE AKTARMA — SORUNLU KAYIT LİSTESİ */
.so-grup td { background: var(--sunken); font-size: 12px; }
tr.so-disli { opacity: .5; }
tr.so-disli td { text-decoration: line-through; }

/* İÇE AKTARMA — GRUP EŞLEŞTİRME PANELİ */
.im-grup-panel {
  border: 1px solid var(--border); border-left: 4px solid var(--volt);
  border-radius: var(--r-sm); padding: 11px 13px; margin-top: 12px; background: #fff;
}
.im-grup-bas { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 9px; }
.im-grup-liste {
  display: grid; gap: 5px; max-height: 230px; overflow-y: auto;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
/* Grup kaynağı seçim şeridi — seçici, düğme ve uyarı tek hizada */
.im-grup-arac {
  display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 12px;
  padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.im-grup-arac .field { min-width: 240px; }
.im-grup-arac .inp { min-height: 34px; }
.im-grup-uyari {
  font-size: 12px; color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
  padding: 5px 10px; border-radius: var(--r-sm); max-width: 340px; line-height: 1.4;
}
.im-grup-satir {
  display: flex; align-items: center; gap: 8px; background: var(--sunken);
  border: 1px solid var(--border); border-radius: var(--r-sm); padding: 4px 5px 4px 8px;
}
.im-grup-satir .inp {
  flex: 1; min-width: 0; min-height: 28px; padding: 3px 7px; font-size: 12.5px;
  background: #fff; border-color: transparent;
}
.im-grup-satir .inp:focus { border-color: var(--volt); }
.im-grup-adet {
  font-size: 11px; color: var(--ink-2); background: var(--sunken);
  padding: 2px 8px; border-radius: 999px; white-space: nowrap; flex: none;
}

/* ============================================================
   GRUPLARI DÜZENLE — basitleştirilmiş manuel gruplama (v0.13.1)
   Tek fikir: her kutu bir gruptur. Kutu adı düzenlenir, kutular birbirine
   sürüklenerek birleşir. Panel/ağaç yok.
   ============================================================ */
.mg-yonerge {
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
  padding: 12px 14px; margin-bottom: 12px; border-radius: var(--r-md);
  border: 1px solid var(--border); border-left: 4px solid var(--volt);
  background: linear-gradient(180deg, color-mix(in srgb, var(--volt) 6%, #fff), #fff);
}
.mg-yonerge-metin { flex: 1 1 260px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.mg-yonerge-metin b { color: var(--ink); }
.mg-adimlar {
  display: flex; gap: 8px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0;
}
.mg-adimlar li {
  display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 5px 12px 5px 5px; white-space: nowrap;
}
.mg-adimlar li span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: var(--volt); color: #fff; font-size: 11px; font-weight: 700;
}
.mg-arac { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mg-arac .inp { flex: 1; max-width: 340px; }

/* Toplu birleştirme şeridi — yalnız seçim varken görünür */
.mg-toplu {
  display: none; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 12px; margin-bottom: 12px; border-radius: var(--r-sm);
  border: 1px solid var(--volt); background: color-mix(in srgb, var(--volt) 8%, #fff);
}
.mg-toplu.acik { display: flex; }
.mg-toplu .inp { flex: 1; min-width: 200px; max-width: 380px; min-height: 30px; }

/* Kutu ızgarası */
.mg-kutular {
  display: grid; gap: 10px; align-content: start;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  /* Yönerge + arama + toplu şerit + pencere çerçevesi kadar pay bırakılır;
     kalan yüksekliğin tamamı kutulara verilir (altta boşluk kalmasın). */
  max-height: calc(100vh - 330px); min-height: 300px; overflow-y: auto; padding: 2px;
}
.mg-kutu {
  position: relative; display: grid; gap: 7px; padding: 11px 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--border); border-radius: var(--r-md);
  cursor: grab; transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.mg-kutu:hover { border-color: var(--volt); box-shadow: 0 2px 10px rgba(16, 24, 40, .08); }
.mg-kutu:active { cursor: grabbing; }
.mg-kutu.secili { border-color: var(--volt); border-left-color: var(--volt);
  background: color-mix(in srgb, var(--volt) 6%, #fff); }
.mg-kutu.duzenlendi { border-left-color: var(--ok); }
.mg-kutu.suruklenen { opacity: .35; }
.mg-kutu.hedef {
  border-color: var(--volt); border-style: dashed;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--volt) 22%, transparent);
  transform: scale(1.015);
}
.mg-kutu-ust { display: flex; align-items: center; gap: 8px; }
.mg-kutu-sec { display: flex; align-items: center; cursor: pointer; }
.mg-kutu-adet {
  flex: 1; font-size: 11px; font-weight: 700; color: var(--volt);
  font-family: var(--mono); letter-spacing: .01em;
}
.mg-kutu-tut { color: var(--ink-3); font-size: 13px; cursor: grab; }
.mg-kutu-ad { min-height: 32px; padding: 5px 8px; font-size: 13px; font-weight: 600; }
.mg-kutu-ornek { display: grid; gap: 2px; }
.mg-kutu-ornek span {
  font-size: 11px; color: var(--ink-3); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Kutunun altındaki "içindeki ürünleri göster" bağlantısı */
.mg-kutu-ac {
  justify-content: flex-start; padding: 2px 0; min-height: 22px;
  font-size: 11.5px; color: var(--volt); font-weight: 600;
}
.mg-kutu-ac:hover { text-decoration: underline; }

/* Grup içeriği ekranı: ürünler + başka gruba taşıma */
.mg-detay-bas { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.mg-detay-ad {
  flex: 1; min-width: 200px; max-width: 460px;
  min-height: 34px; font-size: 14px; font-weight: 700;
}
.mg-urun-tablo { max-height: calc(100vh - 300px); min-height: 300px; overflow-y: auto; }
.mg-urun-tablo tr.secili-satir { background: color-mix(in srgb, var(--volt) 8%, #fff); }
@media (max-width: 620px) {
  .mg-kutular { grid-template-columns: 1fr; max-height: calc(100vh - 400px); }
  .mg-adimlar { width: 100%; }
}

/* ============================================================
   AKTARIM KONTROL SONUCU PANELİ (v0.13.3)
   Uyarılar tek bir çerçevede, katlanabilir satırlar hâlinde durur: ağır
   konular açık, bilgi notları kapalı gelir. Her satırda etkilenen kayıt
   sayısı rozetle yazar.
   ============================================================ */
.kso-panel {
  border: 1px solid var(--border); border-radius: var(--r-md);
  overflow: hidden; margin: 12px 0; background: var(--surface);
}
.kso-bas {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px; background: var(--sunken); border-bottom: 1px solid var(--border);
}
.kso-durum {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
}
.kso-durum.ok    { background: color-mix(in srgb, var(--ok) 14%, #fff); color: var(--ok); }
.kso-durum.agir  { background: color-mix(in srgb, var(--warn) 18%, #fff); color: var(--warn); }
.kso-durum.bilgi { background: color-mix(in srgb, var(--volt) 12%, #fff); color: var(--volt); }

.kso-satir { border-bottom: 1px solid var(--border); }
.kso-satir:last-of-type { border-bottom: 0; }
.kso-satir > summary {
  display: flex; align-items: center; gap: 9px; padding: 9px 12px;
  cursor: pointer; list-style: none; font-size: 12.5px;
}
.kso-satir > summary::-webkit-details-marker { display: none; }
.kso-satir > summary:hover { background: var(--sunken); }
.kso-satir[open] > summary { background: var(--sunken); }
.kso-ikon { flex: none; font-size: 13px; }
.kso-satir.agir  .kso-ikon { color: var(--warn); }
.kso-satir.bilgi .kso-ikon { color: var(--ink-3); }
.kso-baslik { flex: 1; min-width: 0; font-weight: 600; color: var(--ink); }
.kso-adet {
  flex: none; font-size: 11px; font-family: var(--mono); color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--border);
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.kso-satir[open] .kso-adet { background: #fff; }
.kso-govde { padding: 2px 12px 12px 34px; display: grid; gap: 7px; }
.kso-govde p { margin: 0; font-size: 12px; line-height: 1.55; color: var(--ink-2); }
.kso-etiket { font-weight: 700; color: var(--ink); }
.kso-govde .btn { justify-self: start; }
.kso-bos { padding: 12px; }
.kso-not {
  padding: 9px 12px; font-size: 12px; color: var(--ink-2);
  background: color-mix(in srgb, var(--volt) 7%, #fff); border-top: 1px solid var(--border);
}
@media (max-width: 620px) {
  .kso-satir > summary { flex-wrap: wrap; }
  .kso-govde { padding-left: 12px; }
}

/* İÇE AKTARMA — TANIMA ÖZET KARTI (M12)
   Dosya doğru tanındığında kullanıcı 12 açılır kutu yerine tek bir onay kartı
   görür; sütun eşleştirme ayrıntısı .im-gelismis katmanında saklı durur. */
.im-ozet-kart {
  border: 1px solid var(--ok); border-left-width: 4px; border-radius: var(--r-md);
  background: #fff; padding: 12px 14px; margin-top: 6px;
}
.im-ozet-kart.eksikli { border-color: var(--danger); }
.im-ozet-kart .io-bas {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 10px;
}
.im-ozet-kart .io-rozet {
  background: var(--ok); color: #fff; font-size: 11.5px; font-weight: 700;
  padding: 2px 9px; border-radius: 999px; white-space: nowrap;
}
.im-ozet-kart.eksikli .io-rozet { background: var(--danger); }
.im-ozet-kart .io-liste { display: grid; gap: 4px; }
.io-satir {
  display: grid; grid-template-columns: 20px minmax(96px, 132px) minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 8px; align-items: baseline; padding: 4px 6px; border-radius: var(--r-sm);
}
.io-satir:nth-child(odd) { background: var(--sunken); }
.io-satir .io-ikon { color: var(--ok); font-weight: 700; }
.io-satir.eksik .io-ikon { color: var(--danger); }
.io-satir .io-ad { font-size: 12px; color: var(--ink-2); }
.io-satir .io-deger {
  font-size: 12.5px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.io-satir.eksik .io-deger { color: var(--danger); }
.io-satir .io-ornek {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.im-gelismis-bas {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 10px 0 2px;
}
.im-gelismis { border-top: 1px dashed var(--border-strong); padding-top: 6px; }
@media (max-width: 720px) {
  .io-satir { grid-template-columns: 18px 1fr; }
  .io-satir .io-deger, .io-satir .io-ornek { grid-column: 2; }
}

/* METİN BİÇİMLENDİRME ARAÇ ÇUBUĞU — not/şart/şablon metni alanlarının üstünde. */
.metin-arac {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  padding: 4px 5px; margin-bottom: -1px;
  background: var(--bg-2, #F6F8FB); border: 1px solid var(--border);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}
.metin-arac .mba-etiket { margin-right: 4px; }
.metin-arac + .inp, .metin-arac + textarea.inp {
  border-top-left-radius: 0; border-top-right-radius: 0;
}
.mba-btn {
  border: 1px solid transparent; background: transparent; cursor: pointer;
  font-size: 11.5px; font-weight: 600; color: var(--ink-2);
  padding: 3px 8px; border-radius: var(--r-sm); line-height: 1.3;
  white-space: nowrap;
}
.mba-btn:hover { background: #fff; border-color: var(--border-strong); color: var(--volt); }
.mba-btn:active { background: var(--volt-tint); }

/* KALEM PANOSU BANDI — kopyala/kes sonrası belirir, hedef grup seçilip yapıştırılır. */
.pano-bant {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  background: #FFF8E7; border: 1px solid #E8B93B; border-radius: var(--r-sm);
  padding: 7px 12px; margin-bottom: 10px;
  animation: tb-gir .16s ease-out;
}
.pano-bant b { font-size: 12.5px; color: #7A5A05; white-space: nowrap; }
@media (max-width: 720px) {
  .pano-bant { gap: 5px; padding: 7px 9px; }
  .pano-bant .ayrac { display: none; }
}

/* SEÇİM ÖZETİ — toplu işlem bandının hemen üstünde belirir; işaretlenen
   kalemlerin tutar/miktar/iskonto dökümünü verir. */
.secim-ozet {
  border: 1px solid var(--volt); border-left-width: 4px; border-radius: var(--r-sm);
  background: #fff; padding: 10px 12px; margin-bottom: 8px;
  box-shadow: var(--shadow-sm); animation: tb-gir .16s ease-out;
}
.secim-ozet .so-bas {
  font-size: 12.5px; font-weight: 700; color: var(--volt-deep);
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px;
}
.secim-ozet .so-kutular {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
}
.secim-ozet .so-kutu {
  background: var(--volt-tint); border-radius: var(--r-sm); padding: 6px 9px;
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
.secim-ozet .so-kutu.vurgu { background: var(--volt); }
.secim-ozet .so-kutu.vurgu .so-etiket { color: rgba(255,255,255,.82); }
.secim-ozet .so-kutu.vurgu b { color: #fff; }
.secim-ozet .so-etiket { font-size: 10.5px; color: var(--ink-2); letter-spacing: .01em; }
.secim-ozet .so-kutu b {
  font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.secim-ozet .so-not { margin: 7px 0 0; }
@media (max-width: 720px) {
  .secim-ozet { padding: 8px 9px; }
  .secim-ozet .so-kutular { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
  .secim-ozet .so-kutu b { font-size: 13px; }
}

/* Marka hücresindeki "bu markanın hepsini seç" düğmesi */
.mrk-sec {
  border: 0; background: transparent; color: var(--ink-3); cursor: pointer;
  font-size: 12px; padding: 0 3px; line-height: 1;
}
.mrk-sec:hover { color: var(--volt); }

@media (max-width: 720px) {
  .toplu-bant { gap: 5px; padding: 8px; }
  .toplu-bant .ayrac { display: none; }
}

/* R9 — TCMB kuru yenileme ikonu (minimal, metin düğmesi yerine) */
.kur-yenile {
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-2);
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  font-size: 14px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
  transition: color .12s ease, border-color .12s ease;
}
.kur-yenile:hover { color: var(--volt); border-color: var(--volt); }
.kur-yenile:disabled { opacity: .6; cursor: default; }
.kur-yenile.donuyor { animation: kur-don .8s linear infinite; }
@keyframes kur-don { to { transform: rotate(360deg); } }

/* ============================================================
   R11 — "GÖSTERİLECEK BİLGİLER" LİSTESİ
   Solda anahtar, sağda belgeye basılacak GERÇEK değer. Değer boşsa
   (ve düzenlenebilir bir ayar alanıysa) kullanıcı burada doldurur.
   ============================================================ */
.gb-liste { border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; }
.gb-satir {
  display: grid; grid-template-columns: minmax(150px, 210px) 1fr;
  gap: 10px; align-items: center; padding: 5px 10px;
  border-bottom: 1px solid var(--sunken); font-size: 12.5px;
}
.gb-satir:last-child { border-bottom: 0; }
.gb-satir.gb-kapali { opacity: .5; }
.gb-ad { display: flex; align-items: center; gap: 8px; cursor: pointer; min-width: 0; }
.gb-ad span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gb-deger { min-width: 0; }
.gb-var { color: var(--ink-2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.gb-yok { color: var(--warn); font-size: 11.5px; }
.gb-inp { min-height: 28px; padding: 3px 8px; font-size: 12px; }

/* R14 — sihirbaz şablon bölümü sürükleme */
.ws-tut { cursor: grab; color: var(--ink-3); user-select: none; }
.ws-bolum.ws-hedef { outline: 2px dashed var(--volt); outline-offset: -2px; }

@media (max-width: 720px) {
  .gb-satir { grid-template-columns: 1fr; gap: 4px; padding: 8px 10px; }
}


/* ============================================================
   R28-R31 — BELGE ÖN İZLEME PENCERESİ
   Önce belge gösterilir; yazdırma yalnız 🖨 ikonuyla başlar.
   ============================================================ */
.oz-arac {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 8px 10px; background: var(--sunken);
  border: 1px solid var(--border); border-radius: var(--r-sm); margin-bottom: 10px;
}
.oz-bilgi { margin-left: auto; text-align: right; line-height: 1.35; }
.oz-tarih { font-size: 12px; font-weight: 700; color: var(--ink); font-family: var(--mono); }
.oz-sistem { font-size: 10.5px; color: var(--ink-3); }

.oz-sahne {
  background: var(--sunken); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 12px; overflow: auto; display: flex; justify-content: center;
}
/* Sayfa yığını: her A4 ayrı bir "kâğıt" olarak görünür, aralarında boşluk olur —
   böylece "bir sonraki sayfada başlat" ayarının etkisi önizlemede görülür. */
.oz-sayfa {
  width: 800px; flex: none; transform-origin: top center;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  background: transparent;
}
.oz-kagit {
  position: relative; flex: none; overflow: hidden;
  background: #fff; box-shadow: var(--shadow-md);
}
/* İçerik penceresi: bandın altındaki alan. Kırpma burada yapılır. */
.oz-kagit-pencere { position: absolute; left: 0; width: 800px; overflow: hidden; }
.oz-kagit-ic { position: absolute; left: 0; width: 800px; }
/* 2. sayfadan itibaren üstteki logo bandı (PDF ile aynı ölçü) */
.oz-kagit-bant {
  position: absolute; top: 0; left: 0; width: 800px;
  display: flex; align-items: center; padding: 0 38px; background: #fff;
}
/* Ölçüler PDF ile birebir: 26mm ≈ 99px, 10mm ≈ 38px (800px = 210mm) */
.oz-kagit-bant img { max-width: 99px; max-height: 38px; object-fit: contain; }
.oz-kagit-no {
  position: absolute; right: 10px; bottom: 18px; font-size: 10px;
  color: var(--ink-3); font-family: var(--mono); pointer-events: none;
}

@media (max-width: 720px) {
  .oz-bilgi { margin-left: 0; text-align: left; width: 100%; }
  .oz-sahne { padding: 6px; }
}

/* S11 — Tablo hücresindeki eylem düğmeleri her zaman yan yana durur
   (dar sütunda alt alta kayıp tasarımı bozuyordu). */
.satir-btn { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; }
.satir-btn .btn { white-space: nowrap; }

/* S3 — Liste sayfalama çubuğu */
.sayfalama {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 10px; flex-wrap: wrap;
}
.sayfalama .kucuk { color: var(--ink-2); }

/* ============================================================
   T11 — EXCEL İÇE AKTARMA: BAŞLIK SATIRI SEÇİCİ
   Dosyanın ilk satırları ham hâliyle gösterilir; kullanıcı sütun
   adlarının bulunduğu satıra tıklayarak seçer.
   ============================================================ */
.im-hamsatir {
  border: 1px solid var(--border); border-radius: var(--r-sm);
  max-height: 190px; overflow-y: auto; background: var(--surface);
}
.im-hs {
  display: flex; align-items: center; gap: 8px; padding: 5px 8px;
  border-bottom: 1px solid var(--sunken); cursor: pointer; font-size: 12px;
}
.im-hs:last-child { border-bottom: 0; }
.im-hs:hover { background: var(--volt-soft); }
.im-hs.on { background: var(--volt-tint); box-shadow: inset 3px 0 0 var(--volt); }
.im-hs-no {
  flex: none; width: 22px; text-align: center; color: var(--ink-3);
  font-family: var(--mono); font-size: 10.5px;
}
.im-hs-ic { flex: 1; min-width: 0; display: flex; gap: 5px; overflow: hidden; }
.im-hs-ic code {
  background: var(--sunken); border-radius: 3px; padding: 1px 5px;
  font-size: 11px; white-space: nowrap; color: var(--ink-2);
}
.im-hs.on .im-hs-ic code { background: #fff; color: var(--ink); font-weight: 600; }
.im-hs-rozet {
  flex: none; font-size: 10px; font-weight: 700; color: #fff;
  background: var(--volt); border-radius: 10px; padding: 1px 8px;
}
/* Zorunlu ama tahmin edilemeyen alan kırmızı çerçeveyle işaretlenir */
.inp.im-eksik { border-color: var(--danger); background: var(--danger-tint); }

/* ============================================================
   T10 — FİYAT LİSTELERİ SEKMELERİ
   Sekmeler daha büyük ve dokunulabilir; arama kutusu diğer filtrelerden
   görsel olarak ayrışsın diye kendi çerçevesinde durur.
   ============================================================ */
.fl-tab {
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-2);
  padding: 9px 18px; border-radius: var(--r-sm); font: inherit; font-size: 13.5px;
  font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: background .12s ease, color .12s ease, border-color .12s ease, transform .12s ease;
}
.fl-tab:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.fl-tab.on {
  background: var(--volt); border-color: var(--volt); color: #fff; font-weight: 700;
  box-shadow: 0 3px 10px rgba(30, 79, 208, .22);
}
/* Arama + Ürün Seç: liste filtrelerinden ayrışan kendi kutusu */
.fl-ara-kutu {
  display: flex; align-items: center; gap: 6px;
  background: var(--volt-soft); border: 1px solid var(--volt-tint);
  border-radius: var(--r-sm); padding: 4px 5px;
}
.fl-ara-kutu .inp { width: 210px; border-color: transparent; background: #fff; }
.fl-ara-kutu .inp:focus { border-color: var(--volt); }

@media (max-width: 720px) {
  .fl-tab { padding: 8px 12px; font-size: 12.5px; }
  .fl-ara-kutu { width: 100%; }
  .fl-ara-kutu .inp { flex: 1; width: auto; }
}

/* T6 — IBAN alanının altındaki canlı geçerlilik satırı */
.iban-uyari { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.3; }

/* ============================================================
   T17 — KAYITLI KİŞİLER (Hazırlayan sekmesi)
   Tablo dar ekranda taşıyordu; kart düzenine geçirildi.
   ============================================================ */
.kisi-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}
.kisi-kart {
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); padding: 11px 12px;
  display: flex; flex-direction: column; gap: 7px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.kisi-kart:hover { border-color: var(--border-strong); }
.kisi-kart.on { border-color: var(--volt); box-shadow: 0 0 0 2px var(--volt-tint); }
.kisi-ust { display: flex; align-items: center; gap: 9px; min-width: 0; }
.kisi-ad { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kisi-bilgi { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; color: var(--ink-2); }
.kisi-bilgi span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kisi-btn { display: flex; gap: 6px; margin-top: 2px; }
.kisi-btn .btn { flex: 1; white-space: nowrap; }

/* T18 — Hazır vurgu rengi seçenekleri */
.renk-onay { display: inline-flex; gap: 5px; }
.renk-nokta {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; padding: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}
.renk-nokta:hover { transform: scale(1.1); }
.renk-nokta.on { border-color: var(--ink); box-shadow: 0 0 0 2px #fff inset; }

/* T19 — Marka hücresi: giriş alanı ve "markanın hepsini seç" düğmesi
   dar sütunda alt alta kaymasın diye tek satırda kilitlenir. */
.mrk-hucre { display: flex; align-items: center; gap: 3px; flex-wrap: nowrap; min-width: 0; }
.mrk-hucre .inp { min-width: 0; flex: 1; }
.mrk-hucre .mrk-sec { flex: none; }

/* T19 — Kalem satırı sürükleme tutamağı ve hedef göstergesi */
.kal-tut-hucre { display: flex; align-items: center; gap: 4px; }
.kal-tut {
  cursor: grab; color: var(--ink-3); user-select: none; font-size: 13px; line-height: 1;
  padding: 0 1px; flex: none;
}
.kal-tut:active { cursor: grabbing; }
.xl-tablo tr.suruk { opacity: .4; }
.xl-tablo tr.suruk-hedef td { box-shadow: inset 0 2px 0 var(--volt); }
.xl-tablo tr.xl-grup.suruk-hedef td { box-shadow: inset 0 -2px 0 var(--volt); }

/* ============================================================
   T20 — FİYATLANDIRMA TUTARLILIĞI (Kârlılık Yönetimi içinde)
   Üstte ayrı bir uyarı kartı yerine, kâr oranlarının hemen altında
   sade bir durum şeridi; ayrıntı "Uygula" ile açılan pencerede.
   ============================================================ */
.kar-uygula {
  border: 1px solid var(--warn); background: var(--warn-tint);
  border-radius: var(--r-sm); padding: 9px 11px; margin-top: 10px;
}
.kar-uygula.uyumlu { border-color: var(--ok); background: var(--ok-tint); }
.ku-bas { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.ku-ikon {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: 13px;
  background: var(--warn); color: #fff;
}
.kar-uygula.uyumlu .ku-ikon { background: var(--ok); }

/* ============================================================
   T22 — BELGE SEÇİM KARTLARI (PDF / Excel indirme)
   ============================================================ */
.belge-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.belge-kart {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
  padding: 14px; cursor: pointer; text-align: left; font: inherit;
  transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.belge-kart:hover {
  border-color: var(--volt); transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(16, 24, 40, .10);
}
.belge-ico { font-size: 24px; line-height: 1; }
.belge-ad { font-weight: 650; font-size: 13.5px; color: var(--ink); }
.belge-not { font-size: 11.5px; color: var(--ink-3); line-height: 1.4; }

/* ============================================================
   T2 — GRAFİK İPUCU BALONU (tüm grafiklerde ortak)
   ============================================================ */
/* Gövde seviyesinde durur (position:fixed) — kart/panel overflow'u kırpamaz.
   `.alt` sınıfı: grafiğin üstünde yer yoksa balon aşağı döner, ok da ters çevrilir. */
.grf-ipucu {
  position: fixed; left: 0; top: 0; transform: translate(-50%, -100%);
  background: var(--ink); color: #fff; border-radius: 6px;
  padding: 5px 9px; font-size: 11.5px; line-height: 1.4;
  pointer-events: none; opacity: 0; visibility: hidden;
  transition: opacity .12s ease, visibility .12s ease;
  white-space: nowrap; z-index: 4000; box-shadow: var(--shadow-md);
  max-width: 260px;
}
.grf-ipucu.acik { opacity: 1; visibility: visible; }
.grf-ipucu.alt { transform: translate(-50%, 0); }
.grf-ipucu b { display: block; font-weight: 650; }
.grf-ipucu span { color: #C7D3F2; font-family: var(--mono); font-size: 11px; }
.grf-ipucu::after {
  content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--ink);
}
.grf-ipucu.alt::after {
  top: auto; bottom: 100%;
  border-top-color: transparent; border-bottom-color: var(--ink);
}

/* T5 — Şablon bölümündeki geçerlilik/termin ayar satırı */
.gec-ayar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--sunken); border-radius: var(--r-sm); padding: 7px 9px;
}
.gec-ayar label { display: flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer; }

/* ============================================================
   KÂRLILIK YÖNETİMİ — ADIM ADIM HESAP
   Kâr oranlarının satış fiyatını nasıl oluşturduğunu numaralı
   satırlarla gösterir; kullanıcı "bu oran neye uygulanıyor"
   sorusunu tabloyu okumadan anlar.
   ============================================================ */
.kar-adim {
  border: 1px solid var(--border); border-radius: var(--r-sm);
  overflow: hidden; margin-top: 10px; background: var(--surface);
}
.ka-satir {
  display: grid; grid-template-columns: 24px 1fr auto;
  grid-template-areas: "no ad tut" ". not not";
  gap: 2px 9px; align-items: center;
  padding: 8px 11px; border-bottom: 1px solid var(--sunken); font-size: 13px;
}
.ka-satir:last-child { border-bottom: 0; }
.ka-no {
  grid-area: no; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  background: var(--sunken); color: var(--ink-2);
}
.ka-ad { grid-area: ad; min-width: 0; }
.ka-tut { grid-area: tut; font-family: var(--mono); font-weight: 600; white-space: nowrap; }
.ka-not { grid-area: not; font-size: 11px; color: var(--ink-3); }
.ka-satir.ka-sonuc {
  background: var(--volt-soft); border-top: 2px solid var(--border);
}
.ka-satir.ka-sonuc .ka-no { background: var(--volt); color: #fff; }
.ka-satir.ka-sonuc .ka-ad { font-weight: 700; }
.ka-satir.ka-sonuc .ka-tut { color: var(--volt); font-size: 16px; font-weight: 700; }

@media (max-width: 620px) {
  .ka-satir { grid-template-columns: 22px 1fr; grid-template-areas: "no ad" ". tut" ". not"; }
  .ka-tut { text-align: left; }
}

/* ============================================================
   EXCEL KOLON EŞLEŞTİRME — SADELEŞTİRİLMİŞ LİSTE
   Her satır: durum rozeti · alan adı · sütun seçimi · örnek değer.
   Yeşil = tanındı, kırmızı = zorunlu ama eşleşmedi.
   ============================================================ */
.em-liste { border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; }
.em-baslik {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; color: var(--ink-3);
  background: var(--sunken); padding: 6px 11px; border-bottom: 1px solid var(--border);
}
.em-baslik .kucuk { font-weight: 400; letter-spacing: 0; text-transform: none; }
.em-satir {
  display: grid; grid-template-columns: minmax(150px, 210px) minmax(160px, 1fr) minmax(110px, 200px);
  gap: 10px; align-items: center; padding: 7px 11px;
  border-bottom: 1px solid var(--sunken); font-size: 12.5px;
}
.em-satir:last-child { border-bottom: 0; }
.em-sol { display: flex; align-items: center; gap: 8px; min-width: 0; }
.em-rozet {
  flex: none; width: 19px; height: 19px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff;
  background: var(--ink-3);
}
.em-satir.tamam .em-rozet { background: var(--ok); }
.em-satir.eksik .em-rozet { background: var(--danger); }
.em-satir.eksik { background: var(--danger-tint); }
.em-ad { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-yildiz {
  margin-left: 6px; font-size: 9.5px; font-weight: 700; color: var(--danger);
  background: #fff; border: 1px solid var(--danger); border-radius: 8px; padding: 0 5px;
}
.em-sec { min-height: 30px; padding: 3px 8px; font-size: 12.5px; }
.em-ornek {
  font-size: 11px; color: var(--ink-3); font-family: var(--mono);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.em-gelismis {
  margin-top: 10px; border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 8px 11px; background: var(--surface);
}
.em-gelismis summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.em-gelismis summary:hover { color: var(--volt); }

@media (max-width: 760px) {
  .em-satir { grid-template-columns: 1fr; gap: 5px; }
  .em-ornek { grid-column: 1; }
}

/* ============================================================
   TEKLİF KARTI (yeni düzen)

   Amaç: kart boyu teklifin durumuna göre DEĞİŞMESİN. Eski kartta
   tamamlanmış tekliflerde "Alınan" ve "Kâr" ayrı satırlara açılıp kartı iki
   katına çıkarıyordu. Artık kâr, tutarın yanındaki tek bir rozet; ikincil
   işlemler ise "⋯" menüsünde.
   ============================================================ */
.tk-kart { gap: 7px; }
.tk-ust { display: flex; align-items: flex-start; gap: 9px; }
.tk-ust input[type="checkbox"] { flex: none; margin-top: 2px; }
.tk-baslik {
  flex: 1; min-width: 0; font-weight: 650; font-size: 13.5px; line-height: 1.35;
  color: var(--ink);
  /* En çok iki satır; uzun başlık kartı uzatmasın */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}
.tk-ust .pill { flex: none; white-space: nowrap; }
.tk-kunye {
  display: flex; align-items: center; gap: 5px; min-width: 0;
  font-size: 11.5px; color: var(--ink-3);
}
.tk-kunye .kod { flex: none; }
.tk-musteri { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-ayrac { flex: none; opacity: .6; }
.tk-kunye .rev-rozet { flex: none; margin-left: auto; }

.tk-tutar-satir {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 6px 0 2px; border-top: 1px solid rgba(22,32,46,.07);
}
.tk-tutar { font-family: var(--mono); font-weight: 700; font-size: 17px; color: var(--ink); }
.tk-kar {
  font-family: var(--mono); font-size: 12px; font-weight: 700; white-space: nowrap;
  padding: 1px 7px; border-radius: 999px;
}
.tk-kar.arti { color: var(--ok); background: var(--ok-tint); }
.tk-kar.eksi { color: var(--danger); background: var(--danger-tint); }

/* KART ALT BLOĞU HER KARTTA AYNI HİZADA (v0.15.3)
   Kartların içeriği farklı yükseklikte (tahsilat şeridi olan/olmayan, kâr
   rozeti olan/olmayan). Tarih ve eylem satırları içeriğin hemen altında
   durduğu için kartlar yan yana geldiğinde düğmeler farklı yüksekliklerde
   kalıyor, göz "kaymış" görüyordu. `margin-top:auto` bu iki satırı kartın
   ALTINA yapıştırır; ızgara zaten eşit yükseklik veriyor (align-items:stretch). */
.tk-alt {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 11.5px; color: var(--ink-3);
  margin-top: auto;                      /* alt bloğu kartın dibine it */
  /* "22 gün" rozeti olan kartta satır 2 px büyüyordu; sabit yükseklik
     rozetli ve rozetsiz kartların taban çizgisini eşitler. */
  min-height: 22px;
}
.tk-tarih { font-family: var(--mono); white-space: nowrap; }
.tk-sure { flex: none; padding: 1px 7px; border-radius: 999px; background: var(--sunken); }
.tk-sure.yakin { color: #7A5B12; background: var(--warn-tint); }
.tk-sure.gecti { color: var(--danger); background: var(--danger-tint); font-weight: 600; }

.tk-aksiyon { display: flex; align-items: center; gap: 5px; margin-top: 3px; flex-wrap: wrap; }
.tk-aksiyon .btn { flex: none; }
/* Düğmeler her kartta aynı yükseklikte olsun (⋯ menüsü 30px, btn-sm 28px idi) */
.tk-aksiyon .btn, .tk-menu > summary { min-height: 30px; box-sizing: border-box; }

/* "⋯" menüsü — <details> ile: konumlandırma için JS gerekmez */
.tk-menu { position: relative; margin-left: auto; }
.tk-menu > summary {
  list-style: none; cursor: pointer; user-select: none;
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink-2); font-size: 15px; line-height: 1;
}
.tk-menu > summary::-webkit-details-marker { display: none; }
.tk-menu > summary:hover { border-color: var(--volt); color: var(--volt); background: var(--volt-soft); }
.tk-menu[open] > summary { border-color: var(--volt); color: var(--volt); background: var(--volt-tint); }
/* Menü gövdesi GÖVDE seviyesinde konumlanır (position:fixed): kart/tablo
   kaydırma kabı ya da sayfa kenarı onu kırpamaz. Konum açılışta JS ile
   hesaplanır (tkMenuKonumla): önce düğmenin üstünde yer aranır, yoksa altına
   döner; yatayda ekran kenarına taşmayacak şekilde sıkıştırılır. */
.tk-menu-govde {
  position: fixed; left: 0; top: 0; z-index: 3000;
  min-width: 186px; max-height: 70vh; overflow-y: auto; padding: 5px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 1px;
  /* Konumlanana kadar görünmesin (ilk karede sol üstte parlamasın) */
  visibility: hidden;
}
.tk-menu[open] > .tk-menu-govde.yerlesti { visibility: visible; }
.tk-menu-oge {
  display: block; width: 100%; text-align: left; border: none; background: transparent;
  font: inherit; font-size: 12.5px; color: var(--ink-2); cursor: pointer;
  padding: 7px 10px; border-radius: var(--r-sm);
}
.tk-menu-oge:hover { background: var(--volt-tint); color: var(--volt); }
.tk-menu-ayrac { height: 1px; background: var(--border); margin: 3px 2px; }

/* Kişi defteri: kartın tamamı seçim düğmesi, sağ üstte küçük düzenle ikonu */
.kisi-kart { cursor: pointer; }
.kisi-kart:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
.kisi-duzen {
  margin-left: auto; flex: none; width: 26px; height: 26px; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface);
  color: var(--ink-3); cursor: pointer; font-size: 12px; line-height: 1;
}
.kisi-duzen:hover { border-color: var(--volt); color: var(--volt); background: var(--volt-tint); }
.kisi-secildi { margin-top: 2px; }
.kisi-ipucu { font-size: 11px; color: var(--ink-3); }
.kisi-kart.on .kisi-ipucu { display: none; }

/* Avatar seçici (hazırlayan kişi formu) */
.av-duzen { display: flex; gap: 16px; align-items: flex-start; }
.av-secim { display: flex; flex-wrap: wrap; gap: 5px; }
.av-oge {
  width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface);
  font-size: 16px; line-height: 1; color: var(--ink-2); font-family: inherit;
}
.av-oge:hover { border-color: var(--volt); background: var(--volt-soft); }
.av-oge.on { border-color: var(--volt); background: var(--volt-tint); box-shadow: 0 0 0 2px var(--volt-tint); }
.av-renk {
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}
.av-renk.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--volt-tint); }

/* Adım 3 — yeni eklenen kalem satırı kısa süre yanıp söner (eklendiği görülsün) */
/* Yalnız açık tonlar kullanılır: yazı rengi değişmediği için okunabilirlik korunur */
@keyframes kalemYeniVurgu {
  0%   { background: #CFE0FF; }
  30%  { background: var(--volt-tint); }
  60%  { background: #CFE0FF; }
  100% { background: transparent; }
}
.xl-tablo tr.kalem-yeni > td,
tr.kalem-yeni > td { animation: kalemYeniVurgu 2s ease-out 1; }
@media (prefers-reduced-motion: reduce) {
  tr.kalem-yeni > td { animation: none; background: var(--volt-tint); }
}

/* Stok hareket geçmişi — iade notu ve teklif bağlantısı */
.hrk-iade-not {
  display: inline-block; margin-top: 3px; font-size: 11px; line-height: 1.4;
  color: #7A5B12; background: var(--warn-tint); border: 1px solid #EAD9B0;
  border-radius: 999px; padding: 1px 8px;
}
.hrk-teklif-git {
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--volt);
  border-radius: var(--r-sm); font: inherit; font-size: 11px; font-weight: 600;
  padding: 1px 7px; cursor: pointer; white-space: nowrap;
}
.hrk-teklif-git:hover { background: var(--volt-tint); border-color: var(--volt); }

/* Stok tablosu: sabit sütun genişlikleri + taşan metnin kırpılması */
.stok-tablo { table-layout: fixed; width: 100%; }
.stok-tablo td.kirp, .stok-tablo th {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stok-tablo td { vertical-align: middle; }
.stok-islem { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.stok-islem .btn { flex: none; }
.stok-islem .tk-menu { margin-left: 0; }

/* Yeni eklenen müşteri / tedarikçi kartı kısa süre vurgulanır */
@keyframes kartYeniVurgu {
  0%   { box-shadow: 0 0 0 3px var(--volt); }
  70%  { box-shadow: 0 0 0 3px var(--volt-tint); }
  100% { box-shadow: var(--shadow-sm); }
}
.varlik-kart.kart-yeni { animation: kartYeniVurgu 2.4s ease-out 1; border-color: var(--volt); }
@media (prefers-reduced-motion: reduce) { .varlik-kart.kart-yeni { animation: none; } }

/* Panoları Yönet — kaydedilmemiş (taslak) satır */
tr.pn-degisti > td { background: var(--warn-tint); }
tr.pn-degisti > td:first-child { box-shadow: inset 3px 0 0 var(--warn); }

/* Adım 4 — Hedef kâr marjı kısayolları */
.hedef-marj {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: var(--sunken); border-radius: var(--r-sm);
  padding: 7px 10px; margin: 10px 0 4px;
}
.hm-btn {
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink-2);
  border-radius: 999px; font: inherit; font-size: 12px; font-weight: 600;
  padding: 3px 12px; cursor: pointer; font-family: var(--mono);
}
.hm-btn:hover:not(:disabled) { border-color: var(--volt); color: var(--volt); background: var(--volt-tint); }
.hm-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ============ SÜTUN SEÇİCİ (kalem tablosu) ============ */
.kol-olcer {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--sunken); border-radius: var(--r-sm); padding: 7px 10px; margin-bottom: 8px;
}
.kol-olcer .ko-bar {
  flex: 1; min-width: 120px; height: 6px; border-radius: 3px;
  background: var(--border); overflow: hidden;
}
.kol-olcer .ko-bar > span {
  display: block; height: 100%; background: var(--ok); transition: width .18s ease;
}
.kol-olcer.dolu .ko-bar > span { background: var(--danger); }
.kol-olcer .ko-yazi { font-size: 11.5px; color: var(--ink-2); white-space: nowrap; }
.kol-olcer.dolu .ko-yazi b { color: var(--danger); }

.ts-kolon .ts-tut { color: var(--ink-3); font-size: 13px; cursor: grab; flex: none; line-height: 1; }
.ts-kolon.sabit .ts-tut { cursor: default; }
.ts-kolon .ko-gen { flex: none; font-family: var(--mono); font-size: 10.5px; }
.ts-kolon.sigmaz { opacity: .55; }
.ts-kolon.sigmaz label { cursor: not-allowed; }
.ko-sigmaz-rozet {
  display: inline-block; margin-left: 5px; font-size: 9.5px; font-weight: 700;
  color: var(--danger); background: var(--danger-tint); border-radius: 999px; padding: 0 6px;
}
.ts-kolon.surukleniyor { opacity: .4; }
.ts-kolon.drop-ust { box-shadow: inset 0 2px 0 var(--volt); }
.ts-kolon.drop-alt { box-shadow: inset 0 -2px 0 var(--volt); }
.ts-kolon.sabit { background: var(--volt-soft); }

/* Fiyat Listeleri — ürün tablosunun üstündeki filtre/arama şeridi kaydırırken
   üstte yapışık kalır; kullanıcı listeyi gezerken neye göre süzdüğünü görür. */
.fl-yapiskan {
  position: sticky; top: 0; z-index: 12;
  background: var(--ground); padding: 8px 0 6px; margin-top: 0;
  border-bottom: 1px solid var(--border);
}

/* ============ KULLANIM KILAVUZU BAĞLANTILARI ============
   Modül başlıklarının yanındaki küçük "?" düğmesi: o alanla ilişkilendirilmiş
   kılavuz konusuna götürür. Yalnız bağlı konu varsa basılır. */
/* "?" başlığın SON KELİMESİNE yapışık kalmalı: aradaki boşluk satır kırma
   fırsatı yarattığı için başlık sarınca düğme tek başına alt satıra düşüyordu.
   Çağrı yerlerinde boşluk kaldırıldı, ayrıca burada da kırılma engellenir. */
.klv-ipucu {
  display: inline-grid; place-items: center; vertical-align: 2px;
  width: 18px; height: 18px; margin-left: 6px; flex: none;
  white-space: nowrap;
  border: 1px solid var(--volt); border-radius: 50%;
  background: var(--volt-tint); color: var(--volt);
  font: inherit; font-size: 11px; font-weight: 800; line-height: 1; cursor: pointer;
  padding: 0; transition: background .12s ease, transform .12s ease;
}
.klv-ipucu:hover { background: var(--volt); color: #fff; transform: scale(1.12); }
.klv-ipucu:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }

.klv-secim { display: flex; flex-direction: column; gap: 7px; }
.klv-secim-oge {
  display: flex; flex-direction: column; gap: 2px; text-align: left; width: 100%;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
  padding: 10px 13px; cursor: pointer; font: inherit; color: var(--ink);
}
.klv-secim-oge:hover { border-color: var(--volt); background: var(--volt-soft); }

/* Kılavuzda "geri dön" şeridi */
.klv-donus {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--volt-tint); border: 1px solid var(--volt);
  border-radius: var(--r-md); padding: 9px 13px; margin-bottom: 12px;
}
.klv-donus .kucuk { color: var(--ink-2); }

/* Konu düzenleyicide bağlantı listesi */
.klv-bag-liste { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.klv-bag {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--volt-tint); border: 1px solid var(--volt-soft);
  border-radius: 999px; padding: 3px 6px 3px 11px; font-size: 11.5px; color: var(--volt);
}
.klv-bag button {
  border: none; background: transparent; color: var(--danger); cursor: pointer;
  font: inherit; font-size: 13px; line-height: 1; padding: 0 3px;
}
/* Konu listesinde "ilişkili" işareti */
.kilavuz-konu .klv-rozet {
  display: inline-block; margin-left: 5px; font-size: 9px; font-weight: 700;
  color: var(--volt); background: var(--volt-tint); border-radius: 999px; padding: 0 5px;
}

/* ============ TAHSİLAT (KISMİ ÖDEME) ============ */
.th-cubuk {
  height: 7px; border-radius: 4px; background: var(--sunken);
  overflow: hidden; margin: 2px 0 4px;
}
.th-cubuk > span { display: block; height: 100%; transition: width .25s ease; }
.th-etiket { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* Teklif kartındaki tahsilat şeridi */
.tk-tahsilat { margin-top: 2px; }
.tk-tahsilat .th-etiket { font-size: 11px; }
/* Alacak rozetleri (müşteri kartı, raporlar) */
.alacak-rozet {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  padding: 1px 8px; border-radius: 999px;
  color: #7A5B12; background: var(--warn-tint); border: 1px solid #EAD9B0;
}
.alacak-rozet.gecikmis { color: var(--danger); background: var(--danger-tint); border-color: #F0C9C3; }

/* Teklif Yönetimi — açık alacak özet şeridi */
.th-serit {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--ok-tint); border: 1px solid #BFE2CE;
  border-radius: var(--r-md); padding: 10px 14px; margin-bottom: 12px;
}
.th-serit.uyari { background: var(--warn-tint); border-color: #EAD9B0; }
.th-serit-ico { font-size: 19px; line-height: 1; flex: none; }

/* Dashboard — kart kapsam rozeti (yıl / güncel) */
.kapsam-rozet {
  display: inline-block; margin-left: 5px; vertical-align: 1px;
  font-size: 8.5px; font-weight: 800; letter-spacing: .05em;
  padding: 1px 5px; border-radius: 999px;
  color: var(--volt); background: var(--volt-tint);
  font-family: var(--mono);
}
.kapsam-rozet.anlik { color: var(--ok); background: var(--ok-tint); }

/* Dashboard panel başlığındaki dönem seçici / kapsam etiketi */
.pano-donem { margin-top: 4px; }
.pano-ay {
  font: inherit; font-size: 11px; color: var(--ink-2);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); padding: 2px 6px; max-width: 100%; cursor: pointer;
}
.pano-ay:hover { border-color: var(--volt); color: var(--volt); }
.pano-anlik {
  display: inline-block; margin-top: 4px;
  font-size: 9px; font-weight: 800; letter-spacing: .05em; font-family: var(--mono);
  padding: 1px 6px; border-radius: 999px;
  color: var(--ok); background: var(--ok-tint);
}
.pano-anlik.yil { color: var(--volt); background: var(--volt-tint); }
/* Başlık bloğu artık iki satır olabildiği için hizalama üstten */
.pano-bas { align-items: flex-start; }
.pano-bas .pano-tasi, .pano-bas .pano-tut { margin-top: 2px; }

/* Nakit akışı / hacim grafiklerinin lejantı */
.nakit-lejant {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px;
  font-size: 11px; color: var(--ink-2);
}
.nakit-lejant span { display: inline-flex; align-items: center; gap: 5px; }
.nakit-lejant i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

/* Menü açıkken kartın transform'u kalkar (yığın bağlamı oluşmasın) ve kart
   yapışkan sayfa başlığının üstüne çıkar — menünün üst kısmı artık kırpılmaz. */
/* MENÜ AÇIKKEN KARTIN TRANSFORM'U ANINDA KALKMALI (v0.13.7)
   `transform` yalnız yığın bağlamını değil, `position:fixed` için REFERANS
   ÇERÇEVESİNİ de değiştirir. Kart üzerine gelindiğinde `translateY(-2px)`
   devrededir; menü açılınca bu kaldırılıyor ama kartın `transition` süresi
   boyunca transform HÂLÂ VAR. Menü tam o anda ölçülüp konumlandığı için
   düzeltme yanlış çerçeveye göre hesaplanıyor, geçiş bitince menü yüzlerce
   piksel kayıyordu. `transition:none` ile transform anında kalkar. */
.menu-acik { transform: none !important; transition: none !important;
             position: relative; z-index: 3000; }
.card.hover.menu-acik:hover, .varlik-kart.menu-acik:hover {
  transform: none !important; transition: none !important; }

/* ============ PANEL BÜYÜTME ============
   ⤢ ile kart tüm satırı kaplar, yüksekliği içeriğe göre açılır ve metin
   kırpması kalkar — dar kartta okunamayan içerik burada tam görünür. */
.pano-kart.pano-buyuk {
  grid-column: 1 / -1; height: auto; min-height: 340px;
  border-color: var(--volt); box-shadow: 0 0 0 2px var(--volt-tint), var(--shadow-md);
}
.pano-kart.pano-buyuk .pano-govde { overflow: visible; }
.pano-kart.pano-buyuk .pano-govde .tbl { table-layout: auto; }
.pano-kart.pano-buyuk .pano-govde .tbl td:not(.num) {
  display: table-cell; -webkit-line-clamp: none; overflow: visible; white-space: normal;
}
.pano-kart.pano-buyuk .pano-govde .tbl td,
.pano-kart.pano-buyuk .pano-govde .tbl th { font-size: 12.5px; padding: 8px 10px; }
.pano-kart.pano-buyuk .pano-tasi { opacity: 1; }
/* Yükseklik artık ÇİZİM tarafında ayarlanır (kanvasHazirla `.pano-buyuk`
   sınıfını görüp mantıksal yüksekliği 260'a çıkarır); burada zorlamak
   tuvali gerip görüntüyü eziyordu. */

/* ============================================================================
   MOBİL — "SAHA MODU"

   Masaüstü bir tezgâhtır: geniş, çok sütunlu, fare ile hassas. Telefon ise
   sahaya götürülendir: tek elle, başparmakla, güneş altında okunacak.
   Bu katman aynı tasarım dilini (volt mavisi + bakır, teknik ızgara, tabular
   rakamlar) korur ama düzeni başparmağa göre yeniden kurar.

   Dört temel karar:
     1. Gezinme AŞAĞIDA — hamburger bağımlılığı biter, her modül tek dokunuş.
     2. Filtre/araç çubukları TEK SATIRLIK YATAY ŞERİT — 900 px'lik dikey krom
        yerine 48 px. İçerik ilk ekranda görünür.
     3. Başlık YAPIŞKAN ve İNCE — nerede olduğunu kaybetmezsin, yer yemez.
     4. Dokunma hedefleri en az 44 px; hiçbir şey kırpılmaz.
   ============================================================================ */
@media (max-width: 760px) {

  /* ---------- 1. ALT SEKME ÇUBUĞU ---------- */
  .mobil-tab {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -4px 20px rgba(22,32,46,.07);
  }
  .mt-oge {
    position: relative; border: none; background: transparent; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: 8px 2px 9px; min-height: 56px;
    font: inherit; color: var(--ink-3);
    -webkit-tap-highlight-color: transparent;
    transition: color .16s ease;
  }
  .mt-ico { font-size: 17px; line-height: 1; transition: transform .18s cubic-bezier(.34,1.56,.64,1); }
  .mt-ad  { font-size: 10px; font-weight: 600; letter-spacing: .01em; }
  .mt-oge.on { color: var(--volt); }
  .mt-oge.on .mt-ico { transform: translateY(-2px) scale(1.12); }
  /* Aktif sekmenin üstünde ince bakır çizgi — konum göstergesi */
  .mt-oge.on::before {
    content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 2.5px;
    background: var(--volt); border-radius: 0 0 3px 3px;
    animation: mtGiris .22s cubic-bezier(.4,0,.2,1);
  }
  .mt-oge:active .mt-ico { transform: scale(.9); }
  @keyframes mtGiris { from { transform: scaleX(.2); opacity: 0; } }

  /* "Daha" alt sayfası — ekranın altından açılır */
  .mt-sheet .modal {
    margin-top: auto; border-radius: var(--r-lg) var(--r-lg) 0 0;
    max-height: 82vh; animation: sheetGiris .26s cubic-bezier(.32,.72,0,1);
  }
  @keyframes sheetGiris { from { transform: translateY(100%); } }
  .mt-sheet .overlay, .mt-sheet { align-items: flex-end; }
  .mt-daha-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
  .mt-daha-oge {
    display: flex; align-items: center; gap: 11px; text-align: left;
    padding: 14px 13px; border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--surface); color: var(--ink); font: inherit; font-size: 13px;
    font-weight: 500; cursor: pointer; min-height: 56px;
  }
  .mt-daha-oge .mt-daha-ico {
    width: 30px; height: 30px; flex: none; display: grid; place-items: center;
    border-radius: 8px; background: var(--sunken); font-size: 15px;
  }
  .mt-daha-oge.on { border-color: var(--volt); background: var(--volt-tint); color: var(--volt); }
  .mt-daha-oge.on .mt-daha-ico { background: var(--volt); color: #fff; }
  .mt-daha-oge:active { transform: scale(.98); }

  /* İçerik alt çubuğun altında kalmasın */
  .content { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0)); }

  /* ---------- 2. ÜST ÇUBUK ---------- */
  .topbar { padding: 0 10px; gap: 8px; padding-top: env(safe-area-inset-top, 0); }
  /* Hamburger artık gerekmiyor: gezinme aşağıda. Yine de dursun ki kullanıcı
     tam modül listesini yan panelden de açabilsin — ama ikincil görünsün. */
  .burger { width: 34px; height: 34px; font-size: 15px; color: var(--ink-3); }
  .brand-sub { display: none; }
  #brand-logo { height: 26px !important; }
  .kur-chip { display: none; }               /* kur bilgisi Özet ekranında zaten var */
  .topbar-right { gap: 6px; }
  .senkron-chip { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ---------- 3. SAYFA BAŞLIĞI + ARAÇ ŞERİDİ ---------- */
  .page-head {
    display: block; padding: 11px 13px 0;
    position: sticky; top: 0; z-index: 14;
    background: color-mix(in srgb, var(--ground) 92%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
  }
  .page-head > div:first-child { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .page-head .page-eyebrow { display: none; }   /* başlık zaten bağlamı veriyor */
  .page-head h1 { font-size: 17px; letter-spacing: -.01em; }
  .page-head .spacer { display: none; }
  /* Araçlar: alt alta yığılmak yerine TEK SATIRLIK yatay şerit */
  .page-arac {
    display: flex; gap: 7px; flex-wrap: nowrap;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
    padding: 9px 0 10px; margin: 0 -13px; padding-left: 13px; padding-right: 13px;
    /* scroll-snap, hizalamayı kaydırma alanının PADDING kenarına göre yapar;
       bu yüzden şerit açılışta tam padding kadar (13px) kayıyor ve ilk düğme
       ekranın kenarına yapışıyordu. scroll-padding ile hizalama sayfa
       kenar boşluğunu korur. */
    scroll-padding-inline: 13px;
    scrollbar-width: none;
  }
  .page-arac::-webkit-scrollbar { display: none; }
  .page-arac > * { flex: 0 0 auto; scroll-snap-align: start; }
  /* Yukarıdaki `.page-head .btn:not(.mf-tog) { flex: 1 1 44% }` kuralı bu
     şeritteki düğmeleri de yakalıyor, düğmeler içeriklerinin altına sıkışıp
     yazıları kırpılıyordu ("Listeden Stok T…"). Şeritte düğme DAİMA kendi
     genişliğinde kalır — zaten yatay kaydırılıyor. */
  .page-head .page-arac > .btn,
  .page-head .page-arac > .btn:not(.mf-tog) { flex: 0 0 auto; min-width: 0; }
  .page-arac .inp, .page-arac select.inp {
    width: auto !important; flex: 0 0 auto; min-height: 40px; font-size: 13.5px;
  }
  .page-arac input.inp[id$="-ara"], .page-arac input[placeholder*="ara"] { min-width: 190px; }
  .page-arac .btn { min-height: 40px; white-space: nowrap; }
  /* Birincil eylem şeridin başında dursun (en kolay ulaşılan yer) */
  .page-arac .btn-primary { order: -1; }

  /* ---------- 4. İÇERİK ---------- */
  .page-body { padding: 13px 13px 22px; }
  .sec-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .sec-row .toolbar { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 3px; }
  .sec-row .toolbar::-webkit-scrollbar { display: none; }
  .sec-row .toolbar > * { flex: 0 0 auto; }

  /* Özet kartlar: iki sütun, okunaklı rakam */
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 9px; }
  .stat-body { padding: 11px 12px; }
  .stat-title { font-size: 11px; line-height: 1.3; white-space: normal; }
  .stat-value { font-size: 19px; }
  .stat-sub { font-size: 10.5px; line-height: 1.35; }

  /* Analiz panelleri: yükseklik içeriğe göre, kırpma yok */
  .pano-grid { grid-template-columns: 1fr; }
  .pano-kart { height: auto; min-height: 0; max-height: 460px; }
  /* Panel başlığı: 5 taşıma düğmesi başlığı 110px'e sıkıştırıp 3 satıra
     bölüyordu. Telefonda başlık tam satır, düğmeler altındaki satırda. */
  .pano-bas { flex-wrap: wrap; row-gap: 8px; }
  .pano-bas > div:first-child { flex: 1 1 100%; min-width: 0; }
  .pano-tasi { margin-left: 0; }
  .pano-bas .pano-tut { margin-left: auto; }
  .pano-kart .pano-govde .tbl td:not(.num) { -webkit-line-clamp: 3; }
  .pano-bas { padding: 12px 14px 9px; }
  .pano-tasi { opacity: 1; }                  /* dokunmatikte hover yok */

  /* Teklif kartı: başparmakla rahat */
  .tk-aksiyon .btn { min-height: 38px; }
  .tk-baslik { font-size: 14px; -webkit-line-clamp: 3; }
  .tk-tutar { font-size: 19px; }

  /* Alacak şeridi tek sütuna insin, düğmeler tam genişlik */
  .th-serit { flex-direction: column; align-items: stretch; gap: 9px; }
  .th-serit .btn { width: 100%; }

  /* Modallar tam ekran ama başlık/ayak yapışık */
  .modal-head { position: sticky; top: 0; z-index: 3; }
  .modal-foot { position: sticky; bottom: 0; z-index: 3;
    padding-bottom: calc(11px + env(safe-area-inset-bottom, 0)); }

  /* Dokunma hedefleri */
  .btn { min-height: 42px; }
  .btn-sm { min-height: 36px; }
  .inp, select.inp { min-height: 42px; font-size: 15px; }
  /* iOS Safari 16px'ten küçük bir alana dokunulduğunda sayfayı KENDİLİĞİNDEN
     yakınlaştırır; kullanıcı elle uzaklaştırana kadar tüm düzen kayık kalır.
     Aşağıdaki seçiciler, daha yüksek özgüllükle 13-13,5px'e çeken diğer mobil
     kuralları (.page-arac .inp · .tbl input.inp · şablon metin alanları) tek
     tek geçersiz kılar. Ölçekli A4 önizlemesi hariç tutulur — orası zaten
     küçültülmüş bir belge görüntüsüdür, dokunulacak alan değildir. */
  input.inp, textarea.inp, select.inp,
  .page-arac .inp, .page-arac select.inp, .page-arac input.inp,
  .tbl select.inp, .tbl input.inp,
  .sb-govde .inp, .sb-madde .inp, .ws-bolum textarea.inp,
  #content input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
  #content select, #content textarea,
  .overlay input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
  .overlay select, .overlay textarea {
    font-size: 16px;
  }
  .mono-alan { font-size: 16px; }
  .sb-a4 input, .sb-a4 select, .sb-a4 textarea { font-size: inherit; }
  .tk-menu > summary { width: 38px; height: 38px; }
  /* ---------- 5. MOBİL DOKUNMA HEDEFİ VE OKUNABİLİRLİK DÜZELTMELERİ ----------
     Denetimde (390×844) bulunanlar: kılavuz "?" düğmesi 22px, kart ay seçici
     20px yüksek, kapsam rozetleri 8,5px. Parmakla vurulamıyor / güneşte
     okunmuyordu. Görsel boyut ölçülü büyütülür, dokunma alanı ::after ile
     görünmez biçimde 44px'e tamamlanır (düzeni bozmaz). */
  .klv-ipucu {
    width: 26px; height: 26px; font-size: 13px; position: relative;
  }
  .klv-ipucu::after {                       /* görünmez dokunma alanı */
    content: ""; position: absolute; inset: -9px; border-radius: 50%;
  }
  .renk-nokta { width: 30px; height: 30px; position: relative; }
  .renk-nokta::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; }

  /* Kart başlığındaki dönem seçici: gerçek bir düğme gibi tıklanabilir olsun */
  .pano-ay {
    min-height: 36px; font-size: 16px; padding: 5px 24px 5px 10px;
    background-position: right 7px center;
  }
  /* Kapsam rozetleri: 8,5-9px telefonda okunmuyordu */
  .kapsam-rozet { font-size: 10.5px; letter-spacing: .06em; padding: 2px 7px; }
  .pano-anlik { font-size: 10.5px; letter-spacing: .05em; }
  .kilavuz-konu .klv-rozet { font-size: 10.5px; }

  /* Yazı boyu tabanı: sahada okunabilir olsun */
  .kucuk { font-size: 12px; }
  .muted { color: var(--ink-2); }             /* güneş altında daha okunaklı */

  /* ---------- 6. SAHA ERGONOMİSİ İNCE AYARLARI ----------
     Denetimde çıkmayan ama telefonda kullanınca hissedilen düzeltmeler. */

  /* Çentikli/kavisli ekranlarda YATAY tutuşta içerik çentiğin altına giriyordu */
  .page-head, .page-body, .topbar {
    padding-left: max(13px, env(safe-area-inset-left));
    padding-right: max(13px, env(safe-area-inset-right));
  }
  .mobil-tab { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }

  /* Kaydırma zincirlenmesi: modal/liste sonuna gelince arkadaki sayfa
     kaymasın, iOS'un "lastik" efekti sayfayı sürüklemesin */
  .content, .modal-body, .tbl-wrap, .page-arac { overscroll-behavior: contain; }

  /* Klavye açılınca odaklanan alan yapışkan başlığın altında kalmasın */
  .inp, input, select, textarea { scroll-margin-block: 90px 130px; }

  /* Yatay kaydırmalı şeritte devamı olduğu belli olsun (kenarda yumuşak solma) */
  .page-arac {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px,
                        #000 calc(100% - 14px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 12px,
                #000 calc(100% - 14px), transparent 100%);
  }

  /* Uzun kod/ürün adları kartın dışına taşmasın */
  .varlik-kart, .tk-kart, .stat-card { overflow-wrap: anywhere; }

  /* Basılı tutunca çıkan gri vurgu ve istem dışı metin seçimi kapatılır —
     düğme ve kart dokunuşları uygulama gibi hissettirsin (girdiler hariç) */
  .btn, .nav-item, .mt-oge, .varlik-kart, .tk-kart, .stat-card, .pano-bas {
    -webkit-tap-highlight-color: transparent;
  }
  .btn, .nav-item, .mt-oge { -webkit-user-select: none; user-select: none; }
}

/* YATAY TUTUŞ — ekran yüksekliği 460px altına düştüğünde (telefon yan çevrilir)
   içeriğe kalan alan ~270px'e iniyor. Sabit üst/alt kabuk sıkıştırılır. */
@media (orientation: landscape) and (max-height: 460px) {
  .page-head { padding-top: 7px; padding-bottom: 0; }
  .page-head h1 { font-size: 15px; }
  .page-arac { padding-top: 6px; padding-bottom: 7px; }
  .modal-head { padding-top: 8px; padding-bottom: 8px; }
  .modal-foot { padding-top: 8px; padding-bottom: 8px; }
  .stat-body { padding: 8px 11px; }
}
/* Alt sekme çubuğu yalnız mobil kabukta (≤760px) var; yan tutuşta yazısız
   ve alçak olur ki içerik alanını yemesin. */
@media (max-width: 760px) and (orientation: landscape) and (max-height: 460px) {
  .mobil-tab .mt-ad { display: none; }
  .mobil-tab .mt-oge { min-height: 42px; padding: 5px 2px; }
  .content { padding-bottom: calc(44px + env(safe-area-inset-bottom, 0)); }
}

/* Çok dar telefonlar */
@media (max-width: 380px) {
  .stat-grid { grid-template-columns: 1fr; }
  .mt-ad { font-size: 9px; }
}

/* Ekrana göre gizlenen yardımcı metinler */
.masaustu-gizle { display: none; }
@media (max-width: 760px) {
  .mobil-gizle { display: none; }
  .masaustu-gizle { display: inline; }
}
/* Masaüstünde alt çubuk hiç yok */
@media (min-width: 761px) { .mobil-tab { display: none; } }

/* Logo artık Özet ekranına bağlantı — tıklanabilir olduğu belli olsun */
.brand { cursor: pointer; transition: opacity .15s ease; }
.brand:hover { opacity: .82; }
.brand:focus-visible { outline: 2px solid var(--volt); outline-offset: 3px; border-radius: var(--r-sm); }

/* Kılavuzda "?" ile gelinen bölüm/satır: iki kez yanıp sönerek kendini belli eder */
.klv-vurgu {
  animation: klvVurgu 1.15s ease-in-out 2;
  border-radius: var(--r-sm);
  scroll-margin-block: 90px;
}
@keyframes klvVurgu {
  0%, 100% { background: transparent; box-shadow: none; }
  30%, 60% { background: var(--volt-tint); box-shadow: 0 0 0 6px var(--volt-tint); }
}
@media (prefers-reduced-motion: reduce) {
  .klv-vurgu { animation: none; background: var(--volt-tint); box-shadow: 0 0 0 6px var(--volt-tint); }
}

/* Konu içi bölüm indeksi — uzun kılavuz konularında hızlı gezinme */
.klv-icindekiler {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 10px 12px; margin: 0 0 14px;
  background: var(--sunken); border: 1px solid var(--border); border-radius: var(--r-md);
}
.klv-ic-baslik {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); margin-right: 4px;
}
.klv-ic-oge {
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-2);
  border-radius: 999px; padding: 4px 11px; font: inherit; font-size: 12px;
  cursor: pointer; transition: border-color .14s ease, color .14s ease, background .14s ease;
}
.klv-ic-oge:hover { border-color: var(--volt); color: var(--volt); background: var(--volt-soft); }
.klv-ic-oge:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
@media (max-width: 760px) { .klv-ic-oge { min-height: 34px; } }

/* Başlık + "?" tek parça davransın (kılavuz düğmesi alt satıra kaymasın) */
.pano-bas h2, .sec .eyebrow, .page-head h1 { text-wrap: pretty; }
.pano-bas h2 > .klv-ipucu, .page-head h1 > .klv-ipucu { vertical-align: 1px; }

/* Kontrol ekranı: uyarı içindeki para birimi seçicisi (zorunlu alan) */
.kso-pb { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-weight: 650; }
.kso-pb .inp { width: 130px; min-height: 32px; }

/* Manuel gruplama: aktarım dışında bırakılan ürün satırı */
.mg-urun-tablo tr.mg-disli td:nth-child(n+3) { text-decoration: line-through; opacity: .45; }
.mg-kutu-dis {
  font-size: 11px; font-weight: 700; color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, #fff);
  padding: 1px 7px; border-radius: 999px; flex: none;
}

/* 3. Adım — ürün tipi seçicisi (teklifte görünmez, sistem içi tanım) */
.kalem-tip { width: 100%; min-height: 26px; padding: 1px 4px; font-size: 11.5px; }

/* Aktarım kontrolü — fiyat kontrolü ve ürün tipi dağılımı */
.ko-fk { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.ko-fk-kutu {
  background: var(--sunken); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 7px 9px; display: grid; gap: 2px; min-width: 0;
}
.ko-fk-kutu span { font-size: 10.5px; color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; }
.ko-fk-kutu b {
  font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ko-tip { display: grid; gap: 4px; }
.ko-tip-satir {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px;
  padding: 4px 9px; background: var(--sunken); border-radius: var(--r-sm);
}
.ko-tip-satir span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ko-tip-satir b { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.ko-tip-satir.tanimsiz {
  background: color-mix(in srgb, var(--warn) 14%, #fff); color: var(--warn); font-weight: 600;
}

/* Kontrol ekranı: uyarı içindeki "yalnız son satırı aktar" seçeneği */
.kso-tekille { display: flex; align-items: flex-start; gap: 8px; font-weight: 600; cursor: pointer; }
.kso-tekille input { margin-top: 2px; flex: none; }

/* ── ÇOKLU ÇALIŞMA SAYFASI ŞERİDİ (v0.15.3) ───────────────────────────
   Excel dosyasındaki sayfalar açılır kutuda saklanmaz; her biri kart olarak
   görünür ve "Aktar / Aktarma" kararı sayfanın yanında verilir. */
.im-sayfa-kap { border: 1px solid var(--cizgi); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 14px; background: var(--yuzey-2, rgba(127,127,127,.04)); }
.im-sayfa-bas { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.im-sayfa-bas h3 { font-size: 13.5px; margin: 2px 0 0; }
.im-sayfa-not { margin: 6px 0 10px; }
.im-sayfa-rozet { flex: none; font-size: 11.5px; font-weight: 700; padding: 3px 9px;
  border-radius: 999px; white-space: nowrap; }
.im-sayfa-rozet.bekliyor { background: rgba(224,152,20,.16); color: #b9770e; }
.im-sayfa-rozet.tamam { background: rgba(30,160,90,.15); color: #1a7a48; }
.im-sayfa-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.im-sayfa-kart { border: 1px solid var(--cizgi); border-radius: 9px; background: var(--kart, #fff);
  padding: 7px 9px; min-width: 190px; display: flex; flex-direction: column; gap: 6px; }
.im-sayfa-kart.etkin { border-color: var(--vurgu, #2d6cdf); box-shadow: 0 0 0 2px rgba(45,108,223,.14); }
.im-sayfa-kart.bekliyor { border-color: rgba(224,152,20,.55); }
.im-sayfa-kart.disli { opacity: .62; }
.im-sayfa-kart.disli .im-sayfa-etiket { text-decoration: line-through; }
.im-sayfa-ad { display: flex; align-items: center; gap: 7px; background: none; border: 0;
  padding: 0; cursor: pointer; text-align: left; font: inherit; color: inherit; width: 100%; }
.im-sayfa-ad:hover .im-sayfa-etiket { text-decoration: underline; }
.im-sayfa-etiket { font-weight: 650; font-size: 13px; }
.im-sayfa-durum { flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid;
  place-items: center; font-size: 11px; font-weight: 700; background: rgba(30,160,90,.16); color: #1a7a48; }
.im-sayfa-kart.bekliyor .im-sayfa-durum { background: rgba(224,152,20,.2); color: #b9770e; }
.im-sayfa-kart.disli .im-sayfa-durum { background: rgba(127,127,127,.18); color: var(--sonuk, #777); }
.im-sayfa-sec { display: flex; gap: 10px; font-size: 12px; }
.im-sy-rd { display: flex; align-items: center; gap: 4px; cursor: pointer; white-space: nowrap; }
.im-kapi-liste { display: flex; flex-direction: column; gap: 8px; }
.im-kapi-satir { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--cizgi); border-radius: 8px; padding: 8px 10px; }
.im-kapi-btn { display: flex; gap: 6px; flex: none; }
@media (max-width: 640px) {
  .im-sayfa-kart { min-width: 100%; }
  .im-kapi-satir { flex-direction: column; align-items: stretch; }
}

/* Sayfa yığını bir "kağıt" kabının içine çizildiğinde (tam ekran önizleme ve
   teklif Adım 2) kabın kendi beyaz zemini ile gölgesi kaldırılır — her sayfa
   kendi kağıdını taşır, aksi hâlde yığının arkasında ikinci bir sayfa görünür. */
.tam-onizle-kagit.oz-sayfa-yigin,
.w-onizle-kagit.oz-sayfa-yigin { background: transparent; box-shadow: none; }

/* ── PANO KARTI BAŞLIĞI — SATIRLARIN KARTLAR ARASI HİZASI (v0.15.4) ─────
   Kart başlıkları farklı uzunlukta: "Müşteri Kârlılığı" tek satıra sığıyor,
   "En Çok Kullanılan Malzemeler" iki satıra sarıyor. Başlık yüksekliği
   değişince altındaki dönem seçici ve kartın gövdesi de aşağı kayıyor,
   yan yana duran kartlar birbirini tutmuyordu. Başlık ve dönem satırı
   artık her kartta sabit yükseklikte: içerik hep aynı hizada başlar. */
.pano-bas { align-items: flex-start; }
.pano-bas-ic { min-width: 0; display: flex; flex-direction: column; flex: 1; }
.pano-bas-ic h2 {
  font-size: 14px; line-height: 1.25; min-height: 2.5em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Dönem seçici / "GÜNCEL DURUM" etiketi / hiçbiri — üçü de aynı yüksekliği tutar */
.pano-bas-alt { display: flex; align-items: center; min-height: 26px; margin-top: 4px; }
.pano-bas-alt .pano-donem { margin-top: 0; }

/* ── MÜŞTERİ / TEDARİKÇİ KARTLARI — SATIR HİZASI (v0.15.4) ─────────────
   Kartların içeriği eşit değil: kiminde alacak rozeti var, kiminde şehir
   yazmıyor. İçerik yukarıdan aşağı aktığı için iletişim bilgisi ve
   Düzenle/Sil satırı her kartta başka yükseklikte kalıyordu (ölçüldü: 115 ↔
   132 px). İletişim bloğu artık kartın altına yaslanır, aksiyon satırı da
   onun altında — yan yana duran bütün kartlarda aynı hizada. */
.varlik-kart .alt-bilgi { margin-top: auto; }
.varlik-kart .aksiyonlar { margin-top: 6px; }

/* Liste adı altındaki durum şeridi (aynı adla kayıtlı liste / güncelleme kipi) */
.im-ad-not { font-size: 12px; line-height: 1.45; margin-top: 6px;
  padding: 6px 9px; border-radius: 7px; }
.im-ad-not.uyari { background: rgba(224,152,20,.12); color: #8a5a06; border: 1px solid rgba(224,152,20,.35); }
.im-ad-not.guncelle { background: var(--volt-tint); color: var(--volt); border: 1px solid rgba(45,108,223,.3); }

/* ── KAYDETME PERDESİ (v0.15.8) ───────────────────────────────────────
   Sekme kapatılmaya çalışıldığında ve kayıt hâlâ sunucuya ulaşmadıysa
   ekrana gelir. Kullanıcı "ayrılma" uyarısını iptal ederse ne olduğunu
   görür; kayıt bitince kendiliğinden kapanır. */
.kaydet-perde {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center;
  background: rgba(12,18,30,.55); backdrop-filter: blur(2px);
}
.kaydet-kutu {
  background: var(--surface, #fff); border-radius: 14px; padding: 26px 30px;
  text-align: center; max-width: 380px; box-shadow: 0 18px 48px rgba(0,0,0,.28);
}
.kaydet-kutu h3 { margin: 12px 0 6px; font-size: 16px; }
.kaydet-kutu p { margin: 4px 0; line-height: 1.5; }
.kaydet-donen {
  width: 38px; height: 38px; margin: 0 auto; border-radius: 50%;
  border: 3px solid rgba(45,108,223,.22); border-top-color: var(--volt, #2d6cdf);
  animation: kaydetDon .8s linear infinite;
  display: grid; place-items: center; font-size: 20px; color: var(--ok, #1a7a48);
}
.kaydet-kutu.bitti .kaydet-donen {
  animation: none; border-color: rgba(30,160,90,.35); border-top-color: var(--ok, #1a7a48);
}
@keyframes kaydetDon { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .kaydet-donen { animation: none; } }

/* Aynı anda çalışan ekip arkadaşı göstergesi */
.senkron-chip.ekip { background: var(--volt-tint); color: var(--volt); }

/* ── PENCERE İŞLEM KİLİDİ (v0.15.9) ───────────────────────────────────
   Excel okuma / aktarım gibi uzun işlemlerde pencerenin üstüne serilir:
   kullanıcı ne olduğunu görür, yanlışlıkla kapatamaz. */
.modal-mesgul {
  position: absolute; inset: 0; z-index: 40; display: grid; place-items: center;
  background: rgba(255,255,255,.86); backdrop-filter: blur(1.5px); border-radius: inherit;
}
:root:not([data-theme="light"]) .modal-mesgul { background: rgba(18,24,36,.86); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .modal-mesgul { background: rgba(18,24,36,.86); }
}
:root[data-theme="dark"] .modal-mesgul { background: rgba(18,24,36,.86); }
.mm-kutu { text-align: center; padding: 20px 26px; max-width: 340px; }
.mm-donen {
  width: 36px; height: 36px; margin: 0 auto 12px; border-radius: 50%;
  border: 3px solid rgba(45,108,223,.2); border-top-color: var(--volt, #2d6cdf);
  animation: mmDon .8s linear infinite;
}
@keyframes mmDon { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mm-donen { animation: none; } }
.mm-mesaj { font-weight: 650; font-size: 14px; }
.mm-ayrinti { margin-top: 5px; line-height: 1.45; }
.mm-not { margin-top: 12px; opacity: .8; }
.modal-mesgul.sarsi { animation: mmSars .32s ease; }
@keyframes mmSars {
  0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
/* Kilit katmanının konumlanabilmesi için */
.overlay .modal { position: relative; }

/* ============================================================
   MODÜL YETKİLERİ (v0.17.0)
   Yetki şeridi: kullanıcı bir modülde neden düğme göremediğini bilir.
   Yetki tablosu: yöneticinin Gör / Düzenle / Sil kutularını işaretlediği ızgara.
   ============================================================ */
.yetki-serit {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px; margin: 0 0 14px;
  border: 1px solid color-mix(in srgb, var(--warn) 38%, transparent);
  background: var(--warn-tint);
  color: var(--warn);
  border-radius: 8px; font-size: 13px; line-height: 1.5;
}
.yetki-serit-ico { font-size: 15px; line-height: 1.4; flex: 0 0 auto; }

.ym-hazir { display: flex; gap: 8px; flex-wrap: wrap; }
.ym-tablo td, .ym-tablo th { vertical-align: middle; }
.ym-tablo th:not(:first-child), .ym-hucre { text-align: center; }
.ym-ico { display: inline-block; width: 20px; text-align: center; opacity: .75; }
/* Kutular parmakla da rahat işaretlensin diye hücrenin tamamı tıklanabilir */
.ym-kutu { display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: 30px; cursor: pointer; }
.ym-kutu input { width: 17px; height: 17px; cursor: pointer; accent-color: var(--volt); }
.ym-kutu input:disabled { cursor: not-allowed; opacity: .35; }
.ym-satir { display: flex; align-items: center; gap: 8px; cursor: pointer; }
/* Görme yetkisi kapalı satır soluklaşır — bakışta ayırt edilir */
.ym-tablo tr:has([data-yk="gor"]:not(:checked)) td { opacity: .45; }

/* ============================================================
   EKİP TABLOSU (v0.17.1)
   Yetkiler sütunu eklenince satırlar sıkışmıştı: rol açılır kutusu kırpılıyor,
   işlem düğmeleri alt alta düşüyordu. Kullanıcı kimliği tek hücrede toplandı,
   işlem şeridi taşmayacak biçimde sabitlendi.
   ============================================================ */
.ekip-tablo td { vertical-align: middle; }
.ekip-tablo tr.ek-pasif td { opacity: .55; }
/* Şirket sahibi satırı ince bir marka şeridiyle ayrılır */
.ekip-tablo tr.ek-sahip td:first-child { box-shadow: inset 3px 0 0 var(--volt); }

.ek-kisi { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ek-avatar {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--volt-tint); color: var(--volt-deep);
  font-size: 11.5px; font-weight: 800; letter-spacing: .3px;
}
.ek-kimlik { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ek-ad { font-weight: 650; line-height: 1.25; }
.ek-eposta { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill.ek-siz { margin-left: 6px; padding: 2px 7px; font-size: 10px;
  background: var(--volt-tint); color: var(--volt-deep); vertical-align: 1px; }

.ek-rol-sahip { font-weight: 750; color: var(--volt); white-space: nowrap; }
.ek-rol-sec { min-height: 30px; padding: 3px 6px; width: 100%; max-width: 132px; }

/* İşlem sütunu: üç düğme yan yana dizilince tablo taşıyor ve son sütun
   kırpılıyordu (1500px'te bile). İşlemler "⋯" menüsüne alındı — sütun
   40px'e indi, tablo hiçbir genişlikte taşmıyor. */
.ek-islem { display: flex; justify-content: flex-end; }
.ek-islem .tk-menu > summary { padding: 2px 8px; }
.ek-alt { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---- Yetki özet rozeti (tıklanabilir) ---- */
.yz-rozet {
  display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap;          /* dar sütunda iki satıra kırılmasın */
  padding: 4px 9px; border-radius: 999px;
  border: 1px solid transparent; font-size: 11.5px; line-height: 1.35;
  font-family: inherit; text-align: left;
}
button.yz-rozet { cursor: pointer; }
button.yz-rozet:hover { border-color: var(--volt); }
button.yz-rozet:focus-visible { outline: 2px solid var(--volt); outline-offset: 1px; }
.yz-tam { background: var(--ok-tint); color: var(--ok); }
.yz-kisitli { background: var(--warn-tint); color: var(--warn); }
/* Sayılar okunurluk için koyu ve tek aralıklı */
.yz-say { font-family: var(--mono); font-weight: 800; font-size: 11.5px; }
/* Kalem simgesi yalnız düğme hâlinde ve üzerine gelince belirginleşir */
.yz-ok { opacity: .35; font-size: 10.5px; margin-left: 1px; }
button.yz-rozet:hover .yz-ok { opacity: .9; }

@media (max-width: 760px) {
  .ek-eposta { max-width: 190px; }
  .ek-islem { justify-content: flex-start; }
}

/* ============================================================
   ÜST ŞERİT OTURUM ÇİPİ — DARALDIKÇA KIRILMAK YERİNE SADELEŞİR (v0.17.1)
   Tek metin bloğuyken çip içinde satır kırılıyor, rozet 28→44px büyüyüp
   üst şeridi bozuyordu (destek oturumunda 1050px altında ölçüldü).
   Öncelik sırası: eylem bağlantıları > ad > paket > bitiş tarihi.
   ============================================================ */
#oturum-chip {
  display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap;              /* çip İÇİNDE asla satır kırılmaz */
  max-width: min(46vw, 460px); min-width: 0;
}
.oc-ico { flex: 0 0 auto; }
.oc-ad {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0; max-width: 190px; font-weight: 600;
}
.oc-paket, .oc-bitis { color: var(--ink-3); }
.oc-admin { font-weight: 800; color: var(--volt); }
.oc-admin::before { content: "· "; color: var(--ink-3); font-weight: 400; }
/* Eylemler her genişlikte görünür ve tıklanabilir kalır */
.oc-eylem { flex: 0 0 auto; margin-left: 3px; }

@media (max-width: 1200px) { #oturum-chip .oc-bitis { display: none; } }
@media (max-width: 1060px) { #oturum-chip .oc-paket { display: none; }
  .oc-ad { max-width: 150px; } }
@media (max-width: 900px)  { .oc-ad { max-width: 104px; } }

/* ============================================================
   TEKLİF KALEM TABLOSU — OKUNABİLİR KOLONLAR (v0.17.2)
   Küçük ekranlarda metin sütunları eziliyordu (ölçüldü: Ürün Adı 80px,
   Marka 71px; ürün adının 381px'lik içeriğinden 62px görünüyordu).
   Metin sütunlarına alt sınır konuldu; tablo bu sınırın altına inmez,
   gerekirse .tbl-wrap yatay kaydırır.
   ============================================================ */
/* table-layout:fixed — genişlikler ÖNERİ değil KURAL olur. Otomatik düzende
   açılır kutuların içeriği sütunları şişiriyor, metin sütunlarına yer
   kalmıyordu (ölçüldü: P.B. 58px isterken 96px alıyordu). */
/* 36+118+200+112+128+56+58+52+88+58+92+28 = 1026 → 1366px ekranda tam sığar */
.xl-tablo { min-width: 1320px; table-layout: fixed; }
.xl-tablo .xl-kod   { width: 162px; }
.xl-tablo .xl-ad    { width: auto; min-width: 248px; }   /* kalan yeri alır */
.xl-tablo .xl-marka { width: 132px; }
.xl-tablo .xl-tip   { width: 164px; }
/* Sabit düzende hücre içeriği taşmasın; girdiler sütunu doldurur */
.xl-tablo td, .xl-tablo th { overflow: hidden; }
.xl-tablo td > .inp, .xl-tablo td > select.inp { width: 100%; }
/* Hücre içi girdiler sütunu doldursun; taşan metin kırpılmadan kaydırılabilsin */
.xl-tablo td > .inp, .xl-tablo td > .mrk-hucre > .inp { min-width: 0; }
.xl-tablo .kalem-tip { width: 100%; min-width: 0; }

/* Geniş ekranda ürün adına daha çok yer ver */
@media (min-width: 1600px) { .xl-tablo .xl-ad { min-width: 320px; } }

/* Kalem tablosu: sabit sütunlar 1072 px; tablo bunun altına inmez, üst sınırı
   da vardır ki Ürün Adı sütunu tüm boşluğu yutup devasa bir boşluk bırakmasın
   (kullanıcı "çok fazla boşluk" diye bildirdi). */
.xl-tablo { max-width: 1560px; }
/* Sil (✕) sütunu kenara yapışmasın */
.xl-tablo tbody td:last-child { padding-right: 10px; }

/* DAR EKRAN: 12 sütunun okunabilir hâli ~1320px ister. Dizüstülerde (sol menü
   açıkken içerik ~1120px) bu sığmaz. Sütun değerlerini KIRPMAK yerine Ürün Adı
   daraltılır ve kalan taşma .tbl-wrap ile yatay kaydırılır — sayısal değerler
   her koşulda tam okunur. Menüyü ☰ ile kapatmak 244px kazandırır. */
@media (max-width: 1500px) {
  /* 1104px sabit sütun + ~200px Ürün Adı = 1304px taban */
  .xl-tablo { min-width: 1304px; }
  .xl-tablo .xl-ad { min-width: 200px; }
}

/* Stoğa tanımlama penceresinde "listeden gelen bilgiler" özeti (v0.18.4).
   Kullanıcıya sorulmaz, yalnız neyin kaydedileceği gösterilir. */
.stok-ozet {
  display: grid; grid-template-columns: auto 1fr; gap: 3px 12px;
  margin-top: 6px; align-items: baseline;
}
.stok-ozet > span { color: var(--ink-2); }
.stok-ozet > b { font-family: var(--mono); }

/* Toplam Değer kartında döviz kırılımı — TL karşılığı büyük, dövizler altta
   küçük (v0.18.4 kullanıcı isteği). */
.stok-doviz {
  font-size: 11px; color: var(--ink-2); font-family: var(--mono);
  margin-top: 3px; line-height: 1.45;
}

/* Son alış hücresinde iskonto → net satırı (v0.19.0) */
.sa-isk { white-space: nowrap; }

/* ---------- ÇOKLU E-POSTA ETİKETLERİ (v0.19.0) ----------
   Müşteri/tedarikçi birden çok e-posta adresi taşıyabilir; her adres ayrı bir
   etiket olarak gösterilir ki nerede bittiği açıkça görünsün. */
.ep-cipler { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
.ep-cip {
  display: inline-block; max-width: 100%;
  padding: 0 7px; border-radius: 999px;
  background: var(--volt-tint); color: var(--volt-deep);
  font-size: 11px; font-family: var(--mono);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* KART İÇİNDE SATIR YÜKSEKLİĞİNİ DEĞİŞTİRMEZ (v0.19.0)
   Etiket dolgusu/satır yüksekliği, e-postası olan ve olmayan kartların
   yüksekliğini farklılaştırıyordu (ölçüldü: 216 ↔ 219 px) — kartlar yan yana
   kayık duruyordu. `.alt-bilgi` içindeki etiketler düz metinle aynı satır
   yüksekliğini kullanır. */
.varlik-kart .alt-bilgi .ep-cipler { gap: 3px; }
.varlik-kart .alt-bilgi .ep-cip {
  line-height: inherit; font-size: 11px; padding: 0 6px;
}

/* Sayfa altında "liste devam ediyor" notu — sayfa numarasının karşısında
   (v0.19.7). Kullanıcı isteği: listenin sığmadığı her sayfada belirtilsin. */
.oz-kagit-devam {
  position: absolute; left: 10px; bottom: 18px; font-size: 10px;
  color: var(--ink-3); font-family: var(--mono); pointer-events: none;
}
/* Zorunlu imza: her sayfanın EN ALTINDA, ortalı. Sayfa numarası ve "devam"
   notu bir üst satırda durur (PDF'teki damga yerleşiminin aynısı). */
.oz-kagit-imza {
  position: absolute; left: 0; right: 0; bottom: 5px; text-align: center;
  font-size: 8px; color: var(--ink-3); opacity: .85; pointer-events: none;
}

/* Stoğa Tanımla penceresi özeti (v0.21.2)
   Eski "kılavuz kutusu" + yanıltıcı uyarı kaldırıldı; yerine okunması kolay
   satır düzeni: liste fiyatı → iskonto → net birim maliyet → canlı toplam. */
.stok-tanim-ozet { border: 1px solid var(--border); border-radius: var(--r-md);
  overflow: hidden; background: var(--surface); }
.stok-tanim-ozet .sto-satir { display: flex; justify-content: space-between;
  align-items: baseline; gap: 12px; padding: 8px 12px; font-size: 13px;
  border-bottom: 1px solid var(--border); }
.stok-tanim-ozet .sto-satir:last-child { border-bottom: 0; }
.stok-tanim-ozet .sto-satir > span { color: var(--ink-2); }
.stok-tanim-ozet .sto-satir > b { font-variant-numeric: tabular-nums; color: var(--ink); }
.stok-tanim-ozet .sto-satir > b.iyi { color: var(--ok); }
.stok-tanim-ozet .sto-vurgu { background: var(--volt-soft); }
.stok-tanim-ozet .sto-toplam { background: var(--sunken); }
.stok-tanim-ozet .sto-toplam > b { font-size: 16px; color: var(--volt); }

/* Stok tablosu: hücreler dikeyde ortalanır, sayılar sabit genişlikli rakamla
   yazılır ki sütunlar birbirini tutsun (v0.21.3). */
.stok-tablo td, .stok-tablo th { vertical-align: middle; }
.stok-tablo td.num, .stok-tablo th.num { font-variant-numeric: tabular-nums; }

/* Adım 5 "Tedarik" sütunu (v0.22.0): tedarikçi adı uzun olabilir; sütunu
   şişirmemesi için kırpılır, tam adı araç ipucunda durur. */
.ws-ted-pill { display: inline-block; margin: 1px 0; max-width: 178px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  vertical-align: middle; }