/* ===========================================================================
   Sereniqa Tedarik — bayi paneli, üretici paneli, giriş ve şifre ekranları.
   Yönetim paneli ayrı dosyayı kullanır: assets/admin.css

   İki panel bilerek farklı yoğunlukta: bayi tarafı bir mağaza gibi ferah ve
   görsel, yönetim tarafı bir çalışma ekranı gibi sıkışık. Bu dosya ferah
   olanı tanımlar.
   =========================================================================== */

/* --- Yazı tipleri ----------------------------------------------------------
   Dosyalar kendi sunucumuzdan geliyor: içerik güvenlik politikası
   font-src 'self' diyor (bkz. bootstrap.php), dış font servisi engellenir.
   Ayrıca bayilerin IP'si üçüncü bir tarafa gitmiyor.

   Değişken font: tek dosya bütün ağırlıkları taşıyor. latin ve latin-ext ayrı,
   çünkü Türkçedeki ğ Ğ ı İ ş Ş latin-ext'te; unicode-range sayesinde tarayıcı
   yalnızca gerekeni indirir. Kaynak ve lisans: assets/fonts/README.md
   --------------------------------------------------------------------------- */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/jakarta-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/jakarta-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Turuncu yalnızca eylem rengi: birincil buton, aktif menü, toptan fiyat. */
  --o: #f97316;
  --o2: #ea580c;
  --o-tint: #fff7ed;
  --o-tint2: #ffedd5;
  --o-line: #fed7aa;
  --o-ink: #9a3412;

  /* Soğuk gri değil sıcak gri: ürün fotoğraflarının yanında ekranı
     ucuzlatmıyor, mağaza hissi veriyor. */
  --ink: #1c1917;
  --ink2: #44403c;
  --mut: #78716c;
  --mut2: #a8a29e;
  --line: #e7e5e4;
  --line-soft: #f1efee;
  --bg: #f7f7f5;
  --card: #ffffff;
  --surface: #faf9f8;
  --dark: #17181a;
  --dark2: #24262a;

  /* Durum asla yalnız renkle anlatılmaz; her rozetin metni ve ikonu da var. */
  --green: #15803d;  --green-bg: #ecfdf5;  --green-line: #bbf7d0;
  --red: #b91c1c;    --red-bg: #fef2f2;    --red-line: #fecaca;
  --amber: #b45309;  --amber-bg: #fffbeb;  --amber-line: #fde68a;
  --blue: #1d4ed8;   --blue-bg: #eff6ff;   --blue-line: #bfdbfe;

  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --r-xl: 20px;

  /* Gölgeler bilerek hafif: ağır gölge kartları ekrandan koparıyor. */
  --sh1: 0 1px 2px rgba(28, 25, 23, .05);
  --sh2: 0 6px 18px rgba(28, 25, 23, .07);
  --sh3: 0 20px 48px rgba(28, 25, 23, .12);

  --font: "Inter", system-ui, -apple-system, "Segoe UI Variable Text",
          "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-head: "Plus Jakarta Sans", "Inter", system-ui, -apple-system,
               "Segoe UI", Roboto, Arial, sans-serif;

  /* Görseli olmayan ürünün yer tutucu ikonu (CSS maskesi). */
  --ico-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3.2" y="4.5" width="17.6" height="15" rx="2.4"/><circle cx="8.8" cy="10" r="1.8"/><path d="m4.2 17.4 4.3-4.3a1.9 1.9 0 0 1 2.7 0l3.6 3.6"/><path d="m13.8 14.6 1.6-1.6a1.9 1.9 0 0 1 2.7 0l1.7 1.7"/></svg>');
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; }

h1, h2, h3 { margin: 0 0 12px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
h1 { font-size: 22px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }

/* Başlık yazı tipi: başlıklar ve arayüz etiketleri. Sayısal içerik bilerek
   dışarıda — Inter'in tabular rakamlarıyla alt alta hizalı kalmalı. */
h1, h2, h3,
.brand, .mainnav a, .btn, .badge, .sideTitle, .stat small, th,
form > label, .field > label, .login label,
.card.empty h3, .notebox b, .rules b, .section h2, .pagehead h1 {
  font-family: var(--font-head);
}

/* Klavyeyle gezinen kullanıcı nerede olduğunu görmeli. */
:focus-visible { outline: 2px solid var(--o); outline-offset: 2px; border-radius: 4px; }

/* Para ve adet sütunlarında rakamlar alt alta hizalansın. */
.money, .price, .retail, td.num, th.num, .totals dd, .stat strong, .qty input {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* İkonlar metinle aynı çizgide. */
.ico { flex: 0 0 auto; vertical-align: -.18em; }

/* Sayfalar arası geçiş. Destekleyen tarayıcıda yumuşuyor, desteklemeyende
   hiçbir şey değişmez. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }

/* ===========================================================================
   Üst çubuk
   =========================================================================== */

/* Çubuk tam genişlikte ama içeriği sayfa gövdesiyle aynı hatta hizalı:
   kenardan kenara akınca marka ve menü, altındaki sütunlarla hizasız
   kalıyor ve ekran dağınık duruyordu. */
.topbar {
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  position: sticky;
  top: 0;
  z-index: 40;
  max-width: calc(1480px + 44px);
  margin: 0 auto;
  padding: 0 22px;
  width: 100%;
}
/* Zemin ve alt çizgi ekranın tamamına yayılsın, içerik ortada kalsın. */
.topbar::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 86px;
  z-index: -1;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .2s, background .2s;
}
.topbar.scrolled::before {
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 4px 20px rgba(28, 25, 23, .07);
}

/* --- Marka --- */
.brand { display: inline-flex; align-items: center; gap: 13px; }
.brandmark {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: 14px;
  background: linear-gradient(145deg, #fb923c, var(--o) 45%, var(--o2));
  color: #fff;
  box-shadow: 0 4px 14px rgba(234, 88, 12, .32);
  transition: transform .18s cubic-bezier(.34, 1.4, .64, 1), box-shadow .18s;
}
/* Üstteki ince ışık çizgisi işareti düz kare olmaktan çıkarıp hacim veriyor. */
.brandmark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .3), transparent 55%);
  pointer-events: none;
}
.brand:hover .brandmark { transform: translateY(-1px) rotate(-3deg); box-shadow: 0 6px 18px rgba(234, 88, 12, .4); }

.brandtext { display: block; min-width: 0; font-size: 23px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.brandtext b { color: var(--o); font-weight: 800; }
.brand small {
  display: block;
  font-size: 10px;
  letter-spacing: 1.7px;
  color: var(--mut2);
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 4px;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Menü: segment grubu --------------------------------------------------
   Serbest yüzen metinler geniş ekranda dağınık görünüyordu; ortak zemin
   onları tek bir kontrol hâline getiriyor. */
.mainnav {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 5px;
}
.mainnav a, .mainnav .navlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 650;
  color: var(--ink2);
  transition: background .15s, color .15s, box-shadow .15s, transform .15s;
}
.mainnav a:hover {
  background: rgba(255, 255, 255, .85);
  color: var(--ink);
  transform: translateY(-1px);
  box-shadow: 0 1px 3px rgba(28, 25, 23, .07);
}
.mainnav a:active { transform: translateY(0); }
.mainnav .navlink .ico { opacity: .9; color: var(--mut); transition: color .15s, transform .18s; }
.mainnav .navlink:hover .ico { color: var(--o2); transform: scale(1.12); }

/* Aktif öğe beyaz kabartma: dolu turuncu blok çubuğu bağırtıyordu. */
.mainnav a.active, .mainnav .navlink.active {
  background: #fff;
  color: var(--o2);
  font-weight: 750;
  box-shadow: 0 1px 3px rgba(28, 25, 23, .1), 0 0 0 1px rgba(28, 25, 23, .04);
}
.mainnav .navlink.active .ico { color: var(--o); opacity: 1; }

.mainnav .count {
  display: inline-block;
  min-width: 19px;
  text-align: center;
  background: var(--line);
  color: var(--ink2);
  border-radius: 999px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.mainnav .active .count { background: var(--o); color: #fff; }
/* Sıfırken düğüm duruyor ama gizli: JavaScript ilk eklemede yerinde bulmalı. */
.mainnav .count.empty { display: none; }
.mainnav .count.bump { animation: bump .42s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.45); } 100% { transform: scale(1); } }

/* --- Sağ blok: bakiye + hesap işlemleri --- */
.topright { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }

/* Bakiye her ekranda: bayi sepeti doldururken "limitim yeter mi" sorusunu
   panele dönmeden yanıtlıyor. */
.balance {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 12px;
  border: 1px solid var(--green-line);
  background: var(--green-bg);
  line-height: 1.2;
  white-space: nowrap;
  transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
}
.balance:hover { transform: translateY(-1px); border-color: #86efac; box-shadow: 0 4px 14px rgba(21, 128, 61, .16); }
.balance small {
  display: block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: #15803d;
  opacity: .85;
}
.balance b {
  display: block;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #14532d;
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}
/* Renk tek başına anlam taşımıyor: eksi işareti tutarın kendisinde. */
.balance.warn { background: var(--amber-bg); border-color: var(--amber-line); }
.balance.warn small { color: var(--amber); }
.balance.warn b { color: #78350f; }
.balance.warn:hover { border-color: #fcd34d; box-shadow: 0 4px 14px rgba(180, 83, 9, .16); }
.balance.bad { background: var(--red-bg); border-color: var(--red-line); }
.balance.bad small { color: var(--red); }
.balance.bad b { color: #7f1d1d; }
.balance.bad:hover { border-color: #fca5a5; box-shadow: 0 4px 14px rgba(185, 28, 28, .16); }

/* Yalnızca ikon taşıyan düğmeler — günde bir kez kullanılan işlemler. */
.navtools {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 4px;
}
.navicon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--mut);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.navicon:hover { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(28, 25, 23, .1); }
.navicon.danger:hover { background: var(--red-bg); color: var(--red); box-shadow: none; }
.navicon .soundoff { display: none; }
.navicon.off { color: var(--mut2); }
.navicon.off .soundon { display: none; }
.navicon.off .soundoff { display: block; }

/* ===========================================================================
   Sayfa iskeleti
   =========================================================================== */

.wrap { max-width: 1480px; margin: 26px auto 0; padding: 0 22px 64px; }
.wrap.narrow { max-width: 560px; }

.layout { display: grid; grid-template-columns: 252px 1fr; gap: 22px; align-items: start; }

/* Sol sütun: grup listesi + hızlı filtreler + bilgi notu. */
.sidecol { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 104px; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--sh1);
}
a.card { display: block; transition: border-color .15s, box-shadow .15s, transform .15s; }
a.card:hover { border-color: var(--o-line); box-shadow: var(--sh2); transform: translateY(-2px); }

.pagehead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.pagehead h1 { font-size: 24px; margin: 0; display: flex; align-items: center; gap: 10px; }
.pagehead .sub { color: var(--mut); font-size: 13px; margin-top: 4px; }
/* Başlık ikonu turuncu kutuda: başlıkla aynı renkte olunca yazının parçası
   gibi görünüp kayboluyordu. */
.h1ico {
  flex: 0 0 auto;
  padding: 7px;
  border-radius: 11px;
  background: var(--o-tint);
  color: var(--o2);
  box-sizing: content-box;
}

/* Sonuç satırı — filtre çubuğu ile ürün ızgarası arasında. */
.resultbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 2px 2px 14px;
  font-size: 13px;
  color: var(--mut);
}
.resultbar b { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.resultbar span { color: var(--mut); }
.resultbar .pageinfo { font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }
.resultbar .rleft { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.resultbar .rcount { white-space: nowrap; }

/* Etkin filtre rozeti — tamamı tıklanınca o filtreyi kaldırıyor; ayrı bir
   13 piksellik çarpı hedeflenemeyecek kadar küçük kalıyordu. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 9px;
  border-radius: 999px;
  background: var(--o-tint);
  border: 1px solid var(--o-line);
  color: var(--o-ink);
  font-size: 12px;
  font-weight: 700;
  max-width: 260px;
  transition: background .14s, border-color .14s, transform .14s;
}
.chip span { color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip .ico { flex: 0 0 auto; opacity: .8; }
.chip .x { opacity: .55; transition: opacity .14s, transform .14s; }
.chip:hover { background: var(--o-tint2); border-color: #fdba74; transform: translateY(-1px); }
.chip:hover .x { opacity: 1; transform: scale(1.15); }

.clearall {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 650;
  color: var(--mut);
  padding: 5px 4px;
  transition: color .14s;
}
.clearall:hover { color: var(--red); }

/* Bölüm başlığı — kart olmayan listelerin üstünde. */
.section {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 30px 0 14px;
}
.section h2 { margin: 0; font-size: 17px; }
.section .more { font-size: 12px; font-weight: 700; color: var(--o2); }
.section .more:hover { text-decoration: underline; }

/* Kırıntı yolu. */
.crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  color: var(--mut);
  margin-bottom: 16px;
}
.crumbs a { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; color: var(--ink2); }
.crumbs a:hover { color: var(--o2); }
.crumbs a .ico { opacity: .7; }
.crumbs > span { color: var(--mut2); }

/* --- Karşılama bandı — tasarımdaki tek degrade -------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(115deg, var(--dark) 0%, var(--dark2) 62%, #2c2f34 100%);
  color: #fff;
  border-radius: var(--r-xl);
  padding: 30px 34px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
/* Turuncu köşe ayrı bir şekil: degradeyi sert renk durağıyla kesmek yerine
   gerçek bir şekil kullanmak küçük ekranda daha temiz bölünüyor. */
.hero::after {
  content: "";
  position: absolute;
  top: -30%;
  right: -60px;
  width: 260px;
  height: 170%;
  background: var(--o);
  transform: skewX(-14deg);
  opacity: .95;
}
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 130px;
  width: 220px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(249, 115, 22, .18));
}
.hero > * { position: relative; z-index: 1; }
.hero .herotext { min-width: 0; }
.hero h1 { margin: 0 0 6px; font-size: 25px; letter-spacing: -.03em; }
.hero p { margin: 0; color: rgba(255, 255, 255, .74); font-size: 14px; max-width: 620px; }
.hero .btn { flex: 0 0 auto; }

/* ===========================================================================
   İstatistik kutuları
   =========================================================================== */

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }

.stat {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 18px;
  box-shadow: var(--sh1);
}
.stat small {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--mut);
  text-transform: uppercase;
  letter-spacing: .9px;
  font-weight: 700;
}
.stat small .ico { opacity: .7; }
.stat strong { display: block; font-size: 24px; margin-top: 5px; letter-spacing: -.03em; line-height: 1.2; }
.stat.orange strong { color: var(--o2); }
.stat.green  strong { color: var(--green); }
.stat.red    strong { color: var(--red); }

/* Bağlantı olan pano kutusu: yalnızca sayı gösteren bir kutu, bayiyi menüden
   ilgili sayfayı aramaya bırakıyordu. */
a.stat { display: block; transition: border-color .15s, box-shadow .15s, transform .15s; }
a.stat:hover { border-color: var(--o-line); box-shadow: var(--sh2); transform: translateY(-2px); }
a.stat[aria-disabled="true"] { pointer-events: none; }
.stat .hint { display: block; margin-top: 6px; font-size: 11px; font-weight: 650; color: var(--mut2); }
a.stat:hover .hint { color: var(--o2); }
.stat.red .hint { color: var(--red); }

/* ===========================================================================
   Yan menü (katalog ürün grupları)
   =========================================================================== */

.side {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh1);
}
.side .sideTitle {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 14px 16px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.1px;
  color: var(--mut);
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.side .sideTitle .ico { opacity: .7; }
.side a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
  font-weight: 550;
  /* Aktif öğedeki turuncu şerit için yer; yoksa metin kayıyor. */
  border-left: 3px solid transparent;
  transition: background .13s, color .13s, border-color .13s, padding-left .16s;
}
.side a:last-child { border-bottom: 0; }
.side a:hover { background: var(--surface); border-left-color: var(--line); padding-left: 19px; }
.side a.active { background: var(--o-tint); color: var(--o2); font-weight: 750; border-left-color: var(--o); }
.side a span { color: var(--mut2); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.side a.active span { color: var(--o2); }
.side a .lbl { display: flex; align-items: center; gap: 9px; min-width: 0; }
.side a .lbl .ico { flex: 0 0 auto; color: var(--mut2); transition: color .13s, transform .16s; }
.side a .lbl > :not(.ico) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; font-size: inherit; font-weight: inherit; }
.side a:hover .lbl .ico { color: var(--ink2); transform: scale(1.1); }
.side a.active .lbl .ico { color: var(--o); }

.quickfilters a .off { display: grid; place-items: center; color: var(--o2); }
.quickfilters a.active { font-weight: 750; }

.sidenote {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--r);
  background: var(--o-tint);
  border: 1px solid var(--o-line);
  font-size: 11.5px;
  line-height: 1.6;
  color: #7c2d12;
}
.sidenote .ico { flex: 0 0 auto; color: var(--o2); margin-top: 1px; }

/* ===========================================================================
   Ürün ızgarası ve kartı
   =========================================================================== */

.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cardgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cardgrid.open3 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.groupcard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 18px;
  box-shadow: var(--sh1);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.groupcard:hover { border-color: var(--o-line); box-shadow: var(--sh2); transform: translateY(-2px); }
.groupcard .gmark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 11px;
  background: var(--o-tint);
  color: var(--o2);
  transition: background .15s, transform .15s;
}
.groupcard:hover .gmark { background: var(--o-tint2); transform: scale(1.06); }
.groupcard .gname { min-width: 0; flex: 1; }
.groupcard b { display: block; font-size: 14px; letter-spacing: -.01em; }
.groupcard .cnt { display: block; font-size: 12px; color: var(--mut); margin-top: 2px; font-variant-numeric: tabular-nums; }
.groupcard .go { color: var(--mut2); display: grid; place-items: center; transition: transform .15s, color .15s; }
.groupcard:hover .go { color: var(--o2); transform: translateX(3px); }

.product {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sh1);
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.product:hover { border-color: #dcd8d5; box-shadow: var(--sh2); transform: translateY(-3px); }

/* Görsel alanı ayrı kap: favori düğmesi ve kâr rozeti burada konumlanıyor. */
.product .shotwrap { position: relative; background: var(--surface); overflow: hidden; }
.product .shot { display: block; position: relative; overflow: hidden; }
.product .thumb {
  width: 100%;
  /* 4:5 dikey: ürün fotoğraflarının neredeyse tamamı portre; kare kutuda
     yanlarda beyaz bant kalıyor ve ızgara dağınık duruyordu. */
  aspect-ratio: 4 / 5;
  /* Kartta cover (kırpma çok az, ızgara tek parça), detayda contain. */
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}
.product .shot:hover .thumb { transform: scale(1.06); }

/* Görselin tıklanabilir olduğunu söyleyen şerit; sürekli duran bir katman
   fotoğrafı kirletiyordu. */
.product .peek {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 22px 10px 10px;
  background: linear-gradient(transparent, rgba(28, 25, 23, .68));
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s, transform .2s;
  pointer-events: none;
}
.product .shot:hover .peek { opacity: 1; transform: none; }
.product .shot:has(.thumb.empty) .peek { display: none; }

/* Görseli olmayan ürün: gri "görsel yok" yazısı ızgaranın yarısını boş bir
   metin tarlasına çeviriyordu. Soluk ikon + ince doku. */
.product .thumb.empty {
  aspect-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0;
  font-size: 0;
  color: var(--mut2);
  background-image: repeating-linear-gradient(45deg, rgba(120, 113, 108, .05) 0 1px, transparent 1px 9px);
}
.product .thumb.empty::before {
  content: "";
  width: 34px;
  height: 34px;
  opacity: .5;
  background: currentColor;
  -webkit-mask: var(--ico-image) center / contain no-repeat;
  mask: var(--ico-image) center / contain no-repeat;
}
.product .thumb.empty::after { content: "Görsel yakında"; font-size: 10.5px; font-weight: 650; letter-spacing: .2px; }

/* Kâr payı rozeti: bayinin sorduğu soru "kaça alırım" değil "ne kazanırım". */
.product .margin {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 8px 4px 6px;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 8px rgba(21, 128, 61, .28);
}

/* Favori görselin köşesinde: "Sepete Ekle" böylece kartın tam genişliğini
   alıyor ve iki düğme birbirine karışmıyor. */
.product .favform { position: absolute; top: 8px; right: 8px; z-index: 2; }
.favbtn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(4px);
  color: var(--mut);
  cursor: pointer;
  padding: 0;
  transition: color .15s, border-color .15s, background .15s, transform .15s;
}
.favbtn:hover { color: var(--o2); border-color: var(--o-line); transform: scale(1.08); }
.favbtn .on { display: none; }
.favbtn.on { color: var(--o); border-color: var(--o-line); background: var(--o-tint); }
.favbtn.on .on { display: block; }
.favbtn.on .off { display: none; }
.favbtn.on .on .ico { animation: pop .32s cubic-bezier(.34, 1.56, .64, 1); }
.favbtn.busy { opacity: .6; pointer-events: none; }
@keyframes pop { 0% { transform: scale(.4); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }

.product .body { padding: 14px; display: flex; flex-direction: column; flex: 1; }
.product .name {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.005em;
  /* İki satırda kes: kart yükseklikleri eşit kalsın. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 36px;
}
.product .name:hover { color: var(--o2); }
.product .meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--mut2);
  margin-top: 7px;
  min-width: 0;
}
.product .meta .ico { flex: 0 0 auto; opacity: .8; }
.product .meta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.product .priceRow {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 10px;
  min-height: 26px;
  flex-wrap: wrap;
}
.price { color: var(--o2); font-weight: 800; font-size: 17px; letter-spacing: -.02em; white-space: nowrap; }
.retail { font-size: 12px; color: var(--mut2); text-decoration: line-through; white-space: nowrap; }
.price.soon { color: var(--mut); font-size: 13px; font-weight: 700; }

/* Fiyatı girilmemiş ürün: sipariş edilemez, bunu renk değil metin söyler. */
.soonpill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--mut);
  font-size: 11px;
  font-weight: 700;
}
/* "Çok Yakında" ürünlerin görseli SOLDURULMUYOR.
   Önceden opacity .72 vardı: sipariş edilemeyeni belli etmek içindi ama
   katalogun %65'i fiyatsız (3.758 / 5.740) olduğu için neredeyse bütün
   kartlar soluk görünüyordu — fotoğraflar kalitesizmiş gibi duruyordu.
   "Çok Yakında" rozeti ve pasif "Sepete Ekle" düğmesi aynı şeyi zaten
   söylüyor; fotoğrafı kirletmeye gerek yok. */

.product .actions { display: flex; gap: 8px; margin-top: 14px; }
.product .actions form { flex: 1; display: flex; }

/* "Sepetinizde N adet" — toptan alışverişte aynı ürüne birkaç kez dönülüyor. */
.incart {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 11px;
  font-weight: 650;
  color: var(--green);
}
.incart .ico { flex: 0 0 auto; }
.incart b { font-weight: 800; font-variant-numeric: tabular-nums; }
/* Sepette değilse satır yer kaplamıyor; düğmeler margin-top:auto ile alta
   yapıştığı için ızgaradaki tüm düğmeler yine aynı hizada. */
.incart.empty { display: none; }

/* Canlı satır tutarı — adet 2 ve üzerindeyken beliriyor. */
.linecalc {
  margin-top: 8px;
  padding: 6px 9px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px dashed var(--line);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink2);
  font-variant-numeric: tabular-nums;
  text-align: center;
  animation: rise .2s ease;
}
.linecalc[hidden] { display: none; }

.addform { margin-top: auto; padding-top: 12px; }
.addrow { display: flex; gap: 8px; align-items: stretch; }
.addrow .addbtn { flex: 1; min-width: 0; }

/* Üç durum tek düğmede: normal, işleniyor, eklendi. Metinler üst üste
   duruyor, düğmenin genişliği durumlar arasında zıplamıyor. */
.addbtn { position: relative; }
.addbtn .lbl, .addbtn .ok {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: opacity .16s, transform .16s;
}
.addbtn .ok { position: absolute; inset: 0; justify-content: center; opacity: 0; transform: translateY(4px); }
.addbtn .spin {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  opacity: 0;
}
.addbtn.busy { pointer-events: none; }
.addbtn.busy .lbl { opacity: 0; }
.addbtn.busy .spin { opacity: 1; animation: spin .6s linear infinite; }
.addbtn.done { background: var(--green); border-color: var(--green); }
.addbtn.done .lbl { opacity: 0; transform: translateY(-4px); }
.addbtn.done .ok { opacity: 1; transform: translateY(0); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Kartların sıralı belirmesi — gecikmeyi JavaScript veriyor. */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.product.rise { animation: rise .34s cubic-bezier(.22, .61, .36, 1) backwards; }

/* ===========================================================================
   Butonlar
   =========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 10px 16px;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s;
}
.btn:hover { background: #000; }
.btn.orange { background: var(--o); border-color: var(--o); }
.btn.orange:hover {
  background: var(--o2);
  border-color: var(--o2);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(234, 88, 12, .3);
}
.btn.orange:active { transform: translateY(0); box-shadow: none; }
.btn.light { background: #fff; color: var(--ink2); border-color: var(--line); }
.btn.light:hover { background: var(--surface); border-color: #d6d3d1; color: var(--ink); transform: translateY(-1px); }
.btn.light:active { transform: translateY(0); }
.btn.red { background: var(--red); border-color: var(--red); }
.btn.red:hover { background: #991b1b; }
.btn.sm { padding: 7px 11px; font-size: 12px; }
.btn.lg { padding: 13px 20px; font-size: 14px; }
.btn.block { width: 100%; }
.btn.pushed { margin-top: 18px; }

/* Favori düğmesi iki durumlu: kapalıyken sessiz, açıkken sıcak. */
.btn.fav { background: #fff; color: var(--mut); border-color: var(--line); }
.btn.fav:hover { background: var(--surface); color: var(--ink2); }
.btn.fav.on { background: var(--o-tint); color: var(--o2); border-color: var(--o-line); }
.btn.fav.on:hover { background: var(--o-tint2); }

.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn.orange[disabled]:hover { transform: none; box-shadow: none; background: var(--o); }
.btn.light[disabled]:hover { background: #fff; transform: none; }

/* ===========================================================================
   Form
   =========================================================================== */

input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: var(--mut2); }
input:hover, select:hover, textarea:hover { border-color: #d6d3d1; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--o);
  box-shadow: 0 0 0 3px var(--o-tint2);
}
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--o); }
textarea { resize: vertical; min-height: 78px; }

form > label, .field > label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink2);
  letter-spacing: .2px;
  margin-bottom: 6px;
}
.field { margin-bottom: 14px; }
.formgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.formgrid .full, .full { grid-column: 1 / -1; }

/* Form altındaki düğme sırası; .start ile sola yaslanır. */
.formactions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
.formactions.start { justify-content: flex-start; }

/* --- Arama / filtre çubuğu --------------------------------------------- */
.searchbar {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 10px;
  box-shadow: var(--sh1);
  /* 48 kart aşağı inince filtre ekrandan çıkıyordu. */
  position: sticky;
  top: 98px;
  z-index: 20;
}
.searchbar .btn { flex: 0 0 auto; }

.searchfield { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.searchfield > .ico { position: absolute; left: 13px; color: var(--mut2); pointer-events: none; transition: color .15s; }
.searchfield input { padding-left: 40px; padding-right: 36px; }
.searchfield:focus-within > .ico { color: var(--o2); }

.clearq {
  position: absolute;
  right: 10px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: var(--mut2);
  transition: background .14s, color .14s;
}
.clearq:hover { background: var(--line-soft); color: var(--red); }

/* "/" kısayol ipucu — alan boşken sağda, odaklanınca kayboluyor. */
.kbdhint {
  position: absolute;
  right: 12px;
  display: grid;
  place-items: center;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--surface);
  color: var(--mut2);
  font: 700 11px/1 var(--font);
  pointer-events: none;
  transition: opacity .15s;
}
.searchfield:focus-within .kbdhint { opacity: 0; }

/* --- Açılır liste (<details> tabanlı) -----------------------------------
   Tarayıcının <select>'i seçenek yanına ikon almıyor. <details> ile açılıp
   kapanma tarayıcının işi, klavye erişimi hazır, JavaScript'siz de çalışıyor. */
.dropdown { position: relative; flex: 0 0 auto; }
.dropdown > summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  min-width: 190px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: border-color .15s, box-shadow .15s;
}
.dropdown > summary::-webkit-details-marker { display: none; }
.dropdown > summary:hover { border-color: #d6d3d1; }
.dropdown > summary > .ico { color: var(--mut2); }
.dropdown > summary .cur { flex: 1; white-space: nowrap; }
.dropdown > summary .chev { display: grid; place-items: center; color: var(--mut2); transition: transform .18s; }
.dropdown[open] > summary { border-color: var(--o); box-shadow: 0 0 0 3px var(--o-tint2); }
.dropdown[open] > summary .chev { transform: rotate(180deg); }
.dropdown[open] > summary > .ico { color: var(--o2); }

.dropdown .menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 100%;
  z-index: 30;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh3);
  padding: 5px;
  animation: menuIn .16s cubic-bezier(.22, .61, .36, 1);
}
@keyframes menuIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.dropdown .menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink2);
  white-space: nowrap;
  transition: background .13s, color .13s;
}
.dropdown .menu a .ico { color: var(--mut2); transition: color .13s; }
.dropdown .menu a span { flex: 1; }
.dropdown .menu a:hover { background: var(--surface); color: var(--ink); }
.dropdown .menu a:hover .ico { color: var(--ink2); }
.dropdown .menu a.on { background: var(--o-tint); color: var(--o2); font-weight: 750; }
.dropdown .menu a.on .ico { color: var(--o); }
.dropdown .menu .tick { color: var(--o); }

/* --- Adet kutusu --- */
.qty { display: inline-flex; align-items: stretch; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.qty button {
  width: 34px;
  border: 0;
  background: var(--surface);
  color: var(--ink2);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .14s, color .14s;
}
.qty button:hover { background: var(--line-soft); color: var(--o2); }
.qty input {
  width: 56px;
  border: 0;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-radius: 0;
  text-align: center;
  padding: 9px 4px;
  font-weight: 700;
}
.qty input:focus { box-shadow: none; }

/* Kart içindeki küçük adet kutusu. */
.qty.mini { flex: 0 0 auto; border-radius: var(--r-sm); }
.qty.mini button { width: 26px; color: var(--mut); }
.qty.mini input { width: 34px; padding: 6px 2px; font-size: 12.5px; font-weight: 750; }
.qty.mini button:disabled, .qty.mini input:disabled { opacity: .4; cursor: not-allowed; }

.qtybox { display: flex; gap: 6px; align-items: center; }
.qtybox input { width: 68px; text-align: center; padding: 8px 6px; font-weight: 700; }

/* ===========================================================================
   Tablo
   =========================================================================== */

.tablecard {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh1);
  margin-bottom: 16px;
}
.scroll { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; }
th, td { padding: 13px 16px; border-bottom: 1px solid var(--line-soft); text-align: left; font-size: 13px; }
th {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--mut);
  letter-spacing: .9px;
  font-weight: 800;
  background: var(--surface);
  border-bottom-color: var(--line);
  white-space: nowrap;
}
tbody tr:last-child td, tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #fcfbfb; }
td.num, th.num { text-align: right; font-weight: 650; }
td.right, th.right { text-align: right; }
tr.off td { opacity: .55; }
td.mono, .mono { font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }

/* Sepet satırındaki ürün küçük görseli.
   Kartın aksine object-fit: cover — 52 pikselde contain ürünü kutunun
   ortasında minicik bırakıyor, bayi hangi kalemi güncellediğini seçemiyor. */
.cartline { display: flex; gap: 12px; align-items: center; }
.cartshot { flex: 0 0 auto; display: block; }
.cartthumb {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.cartthumb.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--mut2);
  text-align: center;
  line-height: 1.2;
  padding: 0;
}
.strong, .cartline .strong { font-weight: 700; color: inherit; }
a.strong:hover, .cartline .strong:hover { color: var(--o2); }

.inlineform { display: inline; }

/* ===========================================================================
   Rozet, uyarı, boş durum
   =========================================================================== */

/* Rozet ikon da taşıyor: "Onaylandı" ile "Hazırlanıyor" aynı turuncuyu
   paylaşıyor, renk ikisini ayırmıyordu. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  background: var(--line-soft);
  color: var(--ink2);
  border: 1px solid var(--line);
}
.badge.green  { background: var(--green-bg); color: #166534; border-color: var(--green-line); }
.badge.red    { background: var(--red-bg);   color: #991b1b; border-color: var(--red-line); }
.badge.orange { background: var(--o-tint2);  color: var(--o-ink); border-color: var(--o-line); }
.badge.blue   { background: var(--blue-bg);  color: #1e40af; border-color: var(--blue-line); }
.badge.gray   { background: var(--line-soft); color: var(--ink2); border-color: var(--line); }
.badge.lg { font-size: 13px; padding: 7px 16px; }

.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 16px;
  border-radius: var(--r);
  margin-bottom: 16px;
  font-size: 13px;
  line-height: 1.6;
  border: 1px solid transparent;
}
.alert > .ico { flex: 0 0 auto; margin-top: 2px; }
.alert b { font-weight: 800; }
.alert a { font-weight: 700; text-decoration: underline; }
.alert.ok   { background: var(--green-bg); color: #14532d; border-color: var(--green-line); }
.alert.err  { background: var(--red-bg);   color: #7f1d1d; border-color: var(--red-line); }
.alert.info { background: var(--o-tint);   color: var(--o-ink); border-color: var(--o-line); }
.alert.warn { background: var(--amber-bg); color: #78350f; border-color: var(--amber-line); }

/* Seçici ".card.empty": çıplak "empty" sınıfı görseli olmayan ürünün yer
   tutucusunda da kullanılıyor, genel bir kural onu şişiriyordu. */
.card.empty { text-align: center; padding: 56px 24px; }
.card.empty .emptyicon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--mut2);
}
.card.empty h3 { color: var(--ink); font-size: 17px; margin-bottom: 8px; }
.card.empty p { font-size: 13px; color: var(--mut); margin: 0 auto 20px; max-width: 420px; }

.muted { color: var(--mut); }
.small { font-size: 12px; }
.nowrap { white-space: nowrap; }
.last { margin-bottom: 0; }
/* Yalnızca tablo hücrelerinde: giriş ekranının sağ sütunu da class="right"
   taşıyor, genel bir kural oradaki tüm metni sağa yaslıyordu. */
td.right, th.right { text-align: right; }

/* ===========================================================================
   Sayfalama
   =========================================================================== */

.pagination { display: flex; gap: 10px; justify-content: center; align-items: center; margin-top: 24px; flex-wrap: wrap; }
.pagination .pageinfo { font-size: 12px; color: var(--mut); font-weight: 650; font-variant-numeric: tabular-nums; padding: 0 4px; }

/* Katalogda 120 sayfa var; yalnızca ileri/geri ile 60. sayfaya ulaşmak
   59 tıklama demekti. */
.pages { display: flex; align-items: center; gap: 3px; }
.pages .pg {
  display: grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border-radius: var(--r-sm);
  font-size: 12.5px;
  font-weight: 650;
  color: var(--ink2);
  font-variant-numeric: tabular-nums;
  transition: background .14s, color .14s, transform .14s;
}
.pages a.pg:hover { background: var(--o-tint); color: var(--o2); transform: translateY(-1px); }
.pages .pg.on { background: var(--o); color: #fff; font-weight: 800; }
.pages .gap { color: var(--mut2); padding: 0 2px; font-size: 12px; }

/* ===========================================================================
   Sepet toplamı ve kapanış
   =========================================================================== */

.totals { display: flex; justify-content: flex-end; }
.totals dl { min-width: 300px; margin: 0; }
.totals div { display: flex; justify-content: space-between; gap: 20px; padding: 9px 0; font-size: 13px; }
.totals div.grand {
  border-top: 2px solid var(--ink);
  font-size: 18px;
  font-weight: 800;
  padding-top: 13px;
  margin-top: 4px;
  letter-spacing: -.02em;
}
.totals dt { color: var(--mut); }
.totals div.grand dt { color: var(--ink); }
.totals dd { margin: 0; font-weight: 700; }

/* Sipariş notu gibi kullanıcının kendi yazdığı metin bloğu. */
.notebox {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 13px 16px;
  margin-bottom: 18px;
  font-size: 13px;
  line-height: 1.65;
}
.notebox b {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .9px;
  font-weight: 800;
  color: var(--mut);
  margin-bottom: 4px;
}

/* Sepetin kapanışı iki sütun: solda not, sağda özet. Önceden düğme ekranın
   en altında, tutardan uzakta kalıyordu. */
.checkout { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
.notecard label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink2);
  margin-bottom: 8px;
}
.notecard label .ico { color: var(--mut2); }
.notecard label .opt { font-weight: 550; color: var(--mut2); }
.notecard textarea { min-height: 120px; }

.summary { position: sticky; top: 104px; margin-bottom: 0; }
.summary h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.summary h2 .ico { color: var(--o2); }

.sumrow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 8px 0;
  font-size: 13px;
  color: var(--mut);
}
.sumrow b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.sumrow.grand {
  border-top: 2px solid var(--ink);
  margin-top: 6px;
  padding-top: 12px;
  font-size: 15px;
  color: var(--ink);
  font-weight: 700;
}
.sumrow.grand b { font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: var(--o2); }

/* Sipariş sonrası bakiye: "bu sipariş geçer mi" sorusunun cevabı. */
.balnote {
  margin: 14px 0 16px;
  padding: 10px 13px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--line);
}
.balnote .sumrow { padding: 4px 0; font-size: 12px; }
.balnote.bad { background: var(--red-bg); border-color: var(--red-line); }
.balnote.bad .sumrow b { color: var(--red); }
.balnote .warn {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
  font-size: 11.5px;
  font-weight: 650;
  color: var(--red);
}
.placeorder { margin-top: 4px; }
.summary .last { margin: 12px 0 0; line-height: 1.6; }
.ordernote { margin-top: 20px; }

/* ===========================================================================
   Duyuru, sipariş şeridi, pano kartları
   =========================================================================== */

.ann {
  display: flex;
  gap: 12px;
  background: var(--o-tint);
  border: 1px solid var(--o-line);
  border-left: 4px solid var(--o);
  border-radius: var(--r);
  padding: 14px 18px;
  margin-bottom: 12px;
}
.ann > .ico { flex: 0 0 auto; color: var(--o2); margin-top: 2px; }
.ann .anntext { min-width: 0; }
.ann b { display: block; font-size: 14px; color: var(--o-ink); font-weight: 800; }
.ann div { font-size: 13px; margin-top: 4px; line-height: 1.6; color: #7c2d12; }

/* Sipariş yaşam döngüsü şeridi. Tek bir rozet "sırada ne var" sorusunu
   yanıtlamıyordu; bayi en çok bunu soruyor. */
.trackcard { padding: 24px 26px 20px; }
.track { display: flex; gap: 0; margin: 4px 0 8px; }
.track .step { flex: 1; position: relative; padding-top: 26px; text-align: center; min-width: 0; }
.track .step::before {
  content: "";
  position: absolute;
  top: 8px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--line);
}
.track .step:first-child::before { display: none; }
.track .step::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--line);
}
.track .step.done::before { background: var(--o); }
.track .step.done::after  { background: var(--o); border-color: var(--o); }
.track .step.now::before  { background: var(--o); }
.track .step.now::after { background: var(--o); border-color: var(--o); box-shadow: 0 0 0 4px var(--o-tint2); }
.track .step b { display: block; font-size: 12px; font-weight: 700; color: var(--mut2); }
.track .step.done b, .track .step.now b { color: var(--ink); }
.track .step.now b { color: var(--o2); }
.track .step span { display: block; font-size: 10px; color: var(--mut2); margin-top: 2px; }
/* İptal edilen sipariş akıştan çıktığı için ayrı çizilir. */
.track.cancelled .step.done::before, .track.cancelled .step.done::after,
.track.cancelled .step.now::before,  .track.cancelled .step.now::after { background: var(--red); border-color: var(--red); }
.track.cancelled .step.now b { color: var(--red); }
.track.cancelled .step.now::after { box-shadow: 0 0 0 4px var(--red-line); }

/* Süren sipariş kartı (bayi panosu). */
.ordercard {
  display: block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 15px 16px;
  box-shadow: var(--sh1);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.ordercard:hover { border-color: var(--o-line); box-shadow: var(--sh2); transform: translateY(-2px); }
.ordercard .top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ordercard .top .mono { font-size: 11px; color: var(--mut); overflow: hidden; text-overflow: ellipsis; }
.ordercard .mid { font-size: 19px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ordercard .bot { font-size: 11.5px; color: var(--mut2); margin-top: 4px; }

/* Kendi kataloğu tanıtım kutusu. */
.promo { display: flex; gap: 16px; align-items: flex-start; }
.promoicon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 13px;
  background: var(--o-tint);
  color: var(--o2);
}
.promotext { min-width: 0; }
.promotext b { display: block; font-size: 15px; letter-spacing: -.01em; }
.promotext p { margin: 5px 0 0; font-size: 13px; color: var(--mut); line-height: 1.65; max-width: 640px; }
.promotext .formactions { margin-top: 14px; }

/* ===========================================================================
   Ürün detayı
   =========================================================================== */

.detail { display: grid; grid-template-columns: 52fr 48fr; gap: 32px; align-items: start; padding: 22px; }

.detail .shotMain {
  width: 100%;
  aspect-ratio: 1;
  max-height: 520px;
  /* Detayda contain: ürünü incelerken hiçbir şey kırpılmıyor, karar burada
     veriliyor. */
  object-fit: contain;
  background: var(--surface);
  border-radius: var(--r);
  display: block;
  padding: 16px;
  margin: 0 auto;
}
.detail .shotMain.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mut2);
  font-size: 13px;
  padding: 0;
}

/* Görsel sütununun kabı; şerit ana görselin hemen altında akıyor. */
.detailShots { min-width: 0; }

/* Ek görsel şeridi: beş sabit sütun, iki görselli üründe devasa boş kutu
   bırakıyordu. */
.shotStrip { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 88px)); gap: 8px; margin-top: 10px; }
.shotStrip .shotSmall {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 4px;
  transition: border-color .15s;
}
.shotStrip .shotSmall:hover { border-color: var(--o-line); }
.shotStrip .shotSmall.empty { display: none; }

.detailBody h1 { font-size: 23px; line-height: 1.32; margin: 0 0 6px; }
.detailBody .meta { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--mut); }
.detailBody .meta .ico { opacity: .7; }
.detail .priceRow { display: flex; align-items: baseline; gap: 10px; }
.detail .linecalc { margin: 0 0 14px; }

/* Fiyat bloğu: toptan büyük, perakende ve kazanç yanında. */
.pricebox {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px 26px;
  margin: 20px 0;
  padding: 16px 20px;
  border-radius: var(--r);
  background: var(--o-tint);
  border: 1px solid var(--o-line);
}
.pricebox small {
  display: block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: var(--o-ink);
  opacity: .8;
  margin-bottom: 3px;
}
.pricebox .pbmain b { font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: var(--o2); font-variant-numeric: tabular-nums; line-height: 1; }
.pricebox .pbside small { color: var(--mut); }
.pricebox .pbside s { font-size: 16px; font-weight: 650; color: var(--mut); font-variant-numeric: tabular-nums; }
.pricebox .pbmargin {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(21, 128, 61, .28);
}

/* Teknik özellikler — çizgili ama sessiz; sayfanın odağı fiyat ve düğme. */
.specs { margin: 22px 0 0; border-top: 1px solid var(--line-soft); }
.specs div { display: flex; justify-content: space-between; gap: 18px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.specs dt { color: var(--mut); }
.specs dd { margin: 0; font-weight: 650; text-align: right; }

.detailActions { display: flex; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.detailActions form { display: flex; gap: 10px; align-items: center; }
.detailActions form:first-child { flex: 1 1 280px; }
.detailActions form:first-child .btn { flex: 1; }
.detailActions .btn { padding: 12px 20px; }
/* Katalogda favori yalnızca ikon; burada yer var, metin de duruyor. */
.detailActions .btn.fav .on { display: none; }
.detailActions .btn.fav.on .on { display: inline-flex; }
.detailActions .btn.fav.on .off { display: none; }
.detailActions .btn.fav.on .on .ico { animation: pop .32s cubic-bezier(.34, 1.56, .64, 1); }
/* Favori düğmesinin metni; JavaScript ekleme/çıkarmada bu düğümü güncelliyor. */
.favlabel { white-space: nowrap; }
.detailActions .btn.busy { opacity: .65; pointer-events: none; }

/* "Sepete ekledim, şimdi ne olacak" sorusunu daha sorulmadan yanıtlıyor. */
.assure {
  list-style: none;
  margin: 20px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line-soft);
  display: grid;
  gap: 9px;
}
.assure li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--mut); }
.assure .ico { flex: 0 0 auto; color: var(--green); }

/* ===========================================================================
   Üretici paneline özgü parçalar
   =========================================================================== */

/* Anonimliğin yazılımla korunamayan tek yeri kutunun içi; bu kart o yüzden
   uyarı rengiyle duruyor, sıradan bir bilgi kutusu gibi değil. */
.packrules { border-color: var(--amber-line); background: var(--amber-bg); }
.packrules h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: #78350f; }
.packrules h3 .ico { color: var(--amber); }
.packrules p { color: #78350f; }
.packrules ul { margin: 10px 0 0; padding-left: 20px; line-height: 1.9; color: #78350f; }
.packrules ul li::marker { color: var(--amber); }

.packform { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.packform .inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 650;
  color: var(--ink2);
  white-space: nowrap;
  cursor: pointer;
}
.packform .inline input { width: auto; }

/* Sayfa içi sekme şeridi. Üst çubuktaki menüyle aynı dili konuşuyor ama
   kendi kabında duruyor. */
.mainnav.tabs {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 6px;
  margin-bottom: 16px;
  box-shadow: var(--sh1);
  gap: 4px;
}

/* Kendi kataloğum / dışa aktarım ekranlarındaki satır içi formlar. */
.bulkform, .listingform { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ===========================================================================
   Giriş ekranı
   =========================================================================== */

.login { min-height: 100vh; display: grid; grid-template-columns: 55fr 45fr; }

.login .left {
  position: relative;
  overflow: hidden;
  background: var(--dark);
  color: #fff;
  padding: 46px 54px;
  display: flex;
  flex-direction: column;
}
/* Sağ altta turuncu köşe — vurgu, zemin değil. Daha büyük olduğunda
   başlığın altına giriyor ve turuncu üstüne turuncu yazı okunmaz oluyordu. */
.login .left::after {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -120px;
  width: 300px;
  height: 300px;
  background: var(--o);
  transform: rotate(38deg);
  border-radius: 60px;
}
.login .left::before {
  content: "";
  position: absolute;
  left: -120px;
  top: -140px;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(249, 115, 22, .16), transparent 68%);
}
.login .left > * { position: relative; z-index: 1; }
.login .left .brand { font-size: 25px; }
.login .left .brand small { color: rgba(255, 255, 255, .55); letter-spacing: 2px; max-width: none; }

/* Metin bloğu marka ile panel altı arasında ortalanır. */
.login .heroText { margin: auto 0; padding-top: 48px; max-width: 640px; }
.login .heroText h1 { font-size: 42px; line-height: 1.08; margin: 0 0 16px; letter-spacing: -.035em; }
.login .heroText h1 span { color: var(--o); }
.login .heroText p { color: rgba(255, 255, 255, .72); line-height: 1.65; font-size: 15px; margin: 0; }

.login .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 34px; }
.login .step {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--r);
  padding: 14px 16px;
}
.login .step b { display: block; font-size: 13px; font-weight: 750; }
.login .step span { display: block; font-size: 11.5px; color: rgba(255, 255, 255, .62); margin-top: 4px; line-height: 1.5; }

.login .right { display: flex; align-items: center; justify-content: center; padding: 40px 30px; }
.login .loginCard {
  width: min(440px, 100%);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 34px;
  box-shadow: var(--sh3);
}
.login .loginCard h2 { font-size: 21px; margin-bottom: 4px; }
.login label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  color: var(--ink2);
  letter-spacing: .3px;
  margin: 16px 0 6px;
}
.login .mini { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
.login .mini div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 11px 13px; }
.login .mini b { display: block; font-size: 11.5px; font-weight: 750; }
.login .mini span { font-size: 10.5px; color: var(--mut); }

/* Şifre kuralları — uyarı kutusu değil bilgi kutusu: her girişte kırmızı bir
   kutu görmek "bir şey yanlış" hissi veriyordu. */
.rules {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px 18px;
  margin-top: 18px;
}
.rules b { font-size: 12px; font-weight: 800; letter-spacing: .2px; }
.rules ul { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.8; color: var(--ink2); }

/* ===========================================================================
   Bildirimler ve başa dön
   =========================================================================== */

.totop {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink2);
  cursor: pointer;
  box-shadow: var(--sh2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .2s, transform .2s, visibility .2s, color .15s, border-color .15s;
}
.totop.on { opacity: 1; visibility: visible; transform: none; }
.totop:hover { color: var(--o2); border-color: var(--o-line); transform: translateY(-2px); }

/* Sepete ekleme sayfayı yenilemiyor, dolayısıyla sayfanın tepesindeki şerit
   de görünmüyordu. Geri bildirim işlemin yapıldığı yere yakın duruyor. */
.toasts {
  position: fixed;
  right: 20px;
  bottom: 74px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 340px;
  padding: 11px 16px;
  border-radius: var(--r);
  background: var(--dark);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(28, 25, 23, .22);
  animation: toastIn .26s cubic-bezier(.22, .61, .36, 1);
}
/* Renk tek başına anlam taşımıyor: sol şerit + metin birlikte. */
.toast::before { content: ""; width: 3px; align-self: stretch; border-radius: 2px; background: var(--green); }
.toast.err::before { background: var(--red); }
.toast.out { animation: toastOut .24s ease forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(6px) scale(.97); } }

/* ===========================================================================
   Duyarlı düzen
   =========================================================================== */

@media (max-width: 1240px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cardgrid.open3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
  .layout { grid-template-columns: 1fr; }
  .side { position: static; }
  /* Tek sütuna düşünce grup listesi ürünlerin önüne geçiyor; telefonda ilk
     ürünü görmek için altı blok kaydırmak gerekiyordu. */
  .sidecol { position: static; order: 2; }
  .layout > main { order: 1; }
  .cardgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail { grid-template-columns: 1fr; gap: 20px; padding: 18px; }
  .checkout { grid-template-columns: 1fr; }
  .summary { position: static; }
  .login { grid-template-columns: 1fr; min-height: 0; }
  .login .left { padding: 30px 24px 34px; }
  .login .left::after { right: -110px; bottom: -110px; width: 190px; height: 190px; border-radius: 42px; }
  .login .heroText { padding-top: 30px; }
  .login .heroText h1 { font-size: 30px; }
  .login .steps { grid-template-columns: 1fr; }
  .login .right { padding: 26px 20px 46px; }
}

@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formgrid { grid-template-columns: 1fr; }
  .wrap { margin-top: 18px; padding: 0 16px 48px; }
  .hero { padding: 24px; }
  .hero h1 { font-size: 21px; }
}

@media (max-width: 700px) {
  .hero { flex-direction: column; align-items: flex-start; }
  .hero .btn { width: 100%; }
}

/* Tabloların kart görünümüne geçişi. Yalnızca .stack işaretli tablolarda:
   sepet ve sipariş listeleri telefonda yan yana kaydırmak yerine alt alta. */
@media (max-width: 720px) {
  .tablecard.stack thead { display: none; }
  .tablecard.stack table, .tablecard.stack tbody, .tablecard.stack tr, .tablecard.stack td { display: block; width: 100%; }
  .tablecard.stack tr { border-bottom: 1px solid var(--line); padding: 6px 0; }
  .tablecard.stack tr:last-child { border-bottom: 0; }
  .tablecard.stack td {
    border: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 7px 16px;
    text-align: right;
  }
  .tablecard.stack td::before {
    content: attr(data-label);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--mut);
    text-align: left;
    flex: 0 0 auto;
  }
  /* Ürün hücresi tam genişlik: başlık gibi davranıyor. */
  .tablecard.stack td.wide { display: block; text-align: left; padding-top: 12px; }
  .tablecard.stack td.wide::before { display: none; }
  .tablecard.stack tbody tr:hover td { background: none; }
}

@media (max-width: 620px) {
  /* Dar ekranda çubuk iki kata çıkıyor; yükseklik sabit olmadığı için
     arkadaki zemin katmanı kaldırılıyor. */
  .topbar {
    flex-wrap: wrap;
    align-items: center;
    padding: 12px 16px;
    gap: 10px;
    min-height: 0;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .topbar::before { display: none; }
  .topright { margin-left: auto; }
  .mainnav { order: 3; width: 100%; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
  .mainnav a { flex: 0 0 auto; }
  .brand small { max-width: none; }
  .brandmark { width: 38px; height: 38px; border-radius: 11px; }
  .brandtext { font-size: 18px; }
  .balance { padding: 6px 12px; }
  .balance small { font-size: 8.5px; }
  .balance b { font-size: 13px; }

  .searchbar { position: static; flex-wrap: wrap; }
  .searchfield { flex: 1 1 100%; }
  .dropdown { flex: 1 1 auto; }
  .dropdown > summary { min-width: 0; width: 100%; }
  .searchbar .btn { flex: 0 0 auto; }

  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cardgrid, .cardgrid.open3, .stats { grid-template-columns: 1fr; }
  /* İki sütunlu ızgarada kart ~170 piksel; adet kutusu ile düğme yan yana
     sığmıyor ve düğmenin yazısı kesiliyordu. */
  .product .actions { flex-direction: column; }
  .addrow { flex-direction: column; gap: 6px; }
  .qty.mini { width: 100%; }
  .qty.mini input { flex: 1; width: auto; }
  .product .body { padding: 12px; }

  .totals dl { min-width: 0; width: 100%; }
  .track { flex-wrap: wrap; gap: 4px; }
  .track .step { flex: 0 0 33.33%; padding-top: 22px; }
  .track .step::before { display: none; }
  .detailActions form, .detailActions form:first-child { flex: 1 1 100%; }
  .shotStrip { grid-template-columns: repeat(4, 1fr); }
  .promo { flex-direction: column; }
  .pages .pg:not(.on), .pages .gap { display: none; }
  .toasts { right: 12px; left: 12px; bottom: 74px; align-items: stretch; }
  .toast { max-width: none; }
}


/* ===========================================================================
   Liste araç çubuğu — sıralama, sayfa başına kayıt, görünüm geçişi
   ===========================================================================
   Bu üçü her liste ekranında aynı satırda duruyor. Ayrı ayrı
   konumlandırılsalardı her sayfada biraz farklı hizalanır ve ekranlar
   arasında geçiş yapan kullanıcı her seferinde yeniden arardı. */

.listbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0 10px;
}
.listbar .spacer { flex: 1 1 auto; }

.perpage { display: flex; align-items: center; gap: 6px; }
.perpage .chip {
  min-width: 34px;
  justify-content: center;
  padding: 5px 8px;
  font-variant-numeric: tabular-nums;
}
.perpage .chip.active {
  background: var(--o-tint);
  border-color: var(--o-line);
  color: var(--o-ink);
  font-weight: 650;
}

/* Görünüm geçişi: iki düğme tek bir denetim gibi görünsün. */
.viewtoggle { display: inline-flex; }
.viewtoggle .btn { border-radius: 0; padding: 7px 10px; }
.viewtoggle .btn:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.viewtoggle .btn:last-child  { border-radius: 0 var(--r-sm) var(--r-sm) 0; margin-left: -1px; }
.viewtoggle .btn.active {
  background: var(--o-tint);
  border-color: var(--o-line);
  color: var(--o-ink);
  position: relative;
  z-index: 1;
}

/* Sıralama açılır listesi. Menü, tetikleyicinin sağ kenarına hizalı:
   araç çubuğunun sağında durduğu için sola açılmazsa ekrandan taşıyor. */
.sortdrop { position: relative; }
.sortdrop .dropmenu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 200px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md, 12px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
  padding: 6px;
  z-index: 40;
  display: none;
}
.sortdrop.open .dropmenu { display: block; }
.sortdrop .dropmenu a {
  display: block;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  color: var(--ink2);
  text-decoration: none;
  font-size: .92rem;
}
.sortdrop .dropmenu a:hover { background: var(--surface); }
.sortdrop .dropmenu a.active {
  background: var(--o-tint);
  color: var(--o-ink);
  font-weight: 650;
}

/* ===========================================================================
   Toplu eylem çubuğu
   ===========================================================================
   Ekranın altına sabitleniyor: seçim listenin herhangi bir yerinde
   yapılabiliyor ve kullanıcı eylem düğmesini aramak için başa dönmek
   zorunda kalmamalı. */

.bulkbar {
  position: sticky;
  bottom: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--dark);
  color: #fff;
  border-radius: var(--r-md, 12px);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .16);
}
.bulkbar[hidden] { display: none; }
.bulkcount { font-size: .92rem; }
.bulkcount b { font-variant-numeric: tabular-nums; }
.bulkactions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.bulkbar .btn.light {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .22);
  color: #fff;
}
.bulkbar .btn.light:hover { background: rgba(255, 255, 255, .2); }

/* Satır seçim kutusu. Tıklama alanı kutunun kendisinden büyük:
   16 pikselik bir kareyi parmakla tutturmak zor. */
.rowcheck {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  margin: -8px;
  cursor: pointer;
}
.rowcheck input { width: 16px; height: 16px; accent-color: var(--o); cursor: pointer; }

tr.selected { background: var(--o-tint); }

/* Yalnızca ekran okuyucu için. Görsel olarak gizli ama okunuyor —
   display:none olsaydı okuyucu da atlardı. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===========================================================================
   Toplu kaydeden form
   ===========================================================================
   Satır başına "Kaydet" düğmesi kalkınca kullanıcı neyi değiştirdiğini
   göremez hale geliyor. Değişen satır işaretleniyor ve kaydet düğmesi
   sayıyı yazıyor. */

tr.dirty { background: var(--amber-bg); }
tr.dirty td:first-child { box-shadow: inset 3px 0 0 var(--amber); }

.savebar {
  position: sticky;
  bottom: 0;
  z-index: 29;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--card);
  border: 1px solid var(--o-line);
  border-radius: var(--r-md, 12px);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .1);
}
.savebar[hidden] { display: none; }
.savebar .dirtycount { font-size: .92rem; color: var(--o-ink); }
.savebar .dirtycount b { font-variant-numeric: tabular-nums; }
.savebar .btn { margin-left: auto; }

/* Satır içi kâr önizlemesi — fiyat yazılırken anlık hesaplanıyor. */
.marginhint {
  display: inline-block;
  min-width: 84px;
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
  color: var(--mut);
}
.marginhint.good { color: var(--green); }
.marginhint.warn { color: var(--amber); }
.marginhint.bad  { color: var(--red); font-weight: 650; }

/* ===========================================================================
   Genişleyen satır — listeden ayrılmadan detay
   =========================================================================== */

tr.expandrow > td { background: var(--surface); padding: 0; }
.expandbody { padding: 12px 14px; }
.expandtoggle {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--mut);
  padding: 6px;
  border-radius: var(--r-sm);
  display: inline-flex;
}
.expandtoggle:hover { background: var(--surface); color: var(--ink); }
.expandtoggle svg { transition: transform .16s ease; }
.expandtoggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ===========================================================================
   Liste görünümündeki ürün ızgarası
   ===========================================================================
   Kart ızgarası .grid ile geliyor; liste görünümü aynı işaretlemeyi
   tek sütuna indiriyor. Ayrı HTML üretmiyoruz: iki farklı işaretleme
   iki farklı hata kaynağı demek. */

.grid.aslist { grid-template-columns: 1fr; }
.grid.aslist .product {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px;
}
.grid.aslist .product .shot { width: 96px; height: 96px; margin: 0; }
.grid.aslist .product .body { padding: 0; }
.grid.aslist .product .addrow { margin: 0; }

@media (max-width: 640px) {
  .grid.aslist .product { grid-template-columns: 72px 1fr; }
  .grid.aslist .product .addrow { grid-column: 1 / -1; }
  .bulkactions { margin-left: 0; width: 100%; }
  .savebar .btn { margin-left: 0; width: 100%; }
}

/* Hareketi azaltma tercihi olan kullanıcıda geçişler kapanır.
   Ses ayrı bir tercih; onu üst çubuktaki düğme yönetiyor. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .product:hover, a.card:hover, .groupcard:hover, a.stat:hover { transform: none; }
  .product .shot:hover .thumb { transform: none; }
  @view-transition { navigation: none; }
}

/* Dışa aktarımda sütun seçimi ve önizleme */
.fieldpick {
  border: 1px solid var(--line);
  border-radius: var(--r-md, 12px);
  padding: 10px 12px;
  background: var(--surface);
}
.fieldpick summary { cursor: pointer; font-weight: 650; color: var(--ink2); }
.fieldpick[open] summary { margin-bottom: 8px; }
.fieldgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 6px 14px;
}
table.preview { font-size: .85rem; }
table.preview td, table.preview th { white-space: nowrap; }

/* Sepette adet kaydedilirken satır soluyor: istek uçarken kullanıcı
   yeni bir değer yazmasın diye görsel bir duraklama. */
tr.saving { opacity: .55; transition: opacity .12s ease; }
tr.saving input { pointer-events: none; }

/* Sipariş listesi: satır içi eylemler ve genişleyen kalem tablosu */
.rowactions { display: inline-flex; gap: 6px; align-items: center; }
.inlineform { display: inline; }
.daterange { display: inline-flex; flex-direction: column; gap: 2px; }
.daterange input { min-width: 140px; }

table.innertable { width: 100%; font-size: .88rem; background: var(--card); }
table.innertable td { padding: 6px 10px; border-bottom: 1px solid var(--line-soft); }
table.innertable tr:last-child td { border-bottom: 0; }

@media (max-width: 640px) {
  .rowactions { width: 100%; }
  .daterange input { min-width: 0; width: 100%; }
}

/* Katalog fiyat aralığı */
.pricerange { display: inline-flex; align-items: center; gap: 6px; }
.pricerange input { width: 96px; }
.pricerange .dash { color: var(--mut); }

@media (max-width: 640px) {
  .pricerange { width: 100%; }
  .pricerange input { flex: 1 1 0; width: auto; }
}

/* Toplu paketleme çubuğu: onay kutusu eylemlerden önce gelir. */
.packbulk { flex-wrap: wrap; }
.packbulk .packack { color: #fff; font-size: .88rem; }
.packbulk .packack input { accent-color: var(--o); }
.packbulk .btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Favorilerde toplu sepete ekleme şeridi */
.favbulk {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.favbulk .btn { margin-left: auto; }

@media (max-width: 640px) {
  .favbulk .btn { margin-left: 0; width: 100%; }
}

/* Panelde "sıradaki adım" şeridi */
.nextstep {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 14px 0;
}
.nextstep b { display: flex; align-items: center; gap: 7px; }
.nextstep .btn { margin-left: auto; }
.nextstep p.last { margin: 4px 0 0; }

@media (max-width: 640px) {
  .nextstep .btn { margin-left: 0; width: 100%; }
}

/* Ürün görselleri: galeri ve büyütme */
.shotZoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.shotPick {
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  background: none;
  cursor: pointer;
  line-height: 0;
  overflow: hidden;
}
.shotPick.active { border-color: var(--o); }
.shotPick:hover  { border-color: var(--o-line); }

/* Büyütme katmanı. Sayfa kaydırması kilitleniyor: arkadaki içeriğin
   katmanın altında kayması yön duygusunu bozuyor. */
body.zoomopen { overflow: hidden; }

.zoomlayer {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(23, 24, 26, .92);
}
.zoomlayer[hidden] { display: none; }
.zoomlayer img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--r-sm);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.zoomclose {
  position: absolute;
  top: 14px;
  right: 18px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.zoomclose:hover { background: rgba(255, 255, 255, .24); }

/* ===========================================================================
   Yazdırma
   ===========================================================================
   Üretici sevkiyatı paketlerken ekrana bakmak zorunda kalıyordu. Liste
   yazdırılabilir olmalı ama yazdırılan sayfa da ANONİMLİĞE tabi: kağıt
   ekrandan daha kolay dolaşıyor ve kutunun yanında duruyor.

   Bu yüzden yazdırmada gizlenenler ekranda zaten olmayanlar değil —
   ekranda olan ama kağıtta gereksiz olanlar: menü, düğmeler, filtreler.
   Bayi bilgisi ve fiyat sorguya hiç girmiyor (bkz. uretici/siparisler.php),
   dolayısıyla kağıda da düşemez. */

@media print {
  /* Gezinme ve eylemler kağıda basılmaz. */
  .topbar,
  .mainnav,
  .searchbar,
  .listbar,
  .bulkbar,
  .savebar,
  .packform,
  .pagination,
  .btn,
  .toasts,
  .rowcheck,
  .alert.info {
    display: none !important;
  }

  body { background: #fff; }
  .wrap { max-width: none; padding: 0; }

  .card, .tablecard, .panel {
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0 0 10px;
  }

  /* Tablo satırı sayfa sonunda ikiye bölünmesin: yarısı bir sayfada
     yarısı diğerinde olan bir sevkiyat satırı yanlış paketlenir. */
  table { width: 100%; border-collapse: collapse; font-size: 11pt; }
  tr { page-break-inside: avoid; }
  th, td { border-bottom: 1px solid #ddd; padding: 5px 6px; text-align: left; }
  thead { display: table-header-group; }

  /* Paketleme kuralları kağıtta KALIYOR ve öne çıkıyor: kutuyu kapatan
     kişi listeye bakarken kuralları da görmeli. Ekranda okunup unutulan
     bir kural, kutuya konan bir kartvizitle sonuçlanıyor. */
  .packrules {
    border: 2px solid #000 !important;
    padding: 10px !important;
    margin-bottom: 12px !important;
    page-break-inside: avoid;
  }
  .packrules h3 { margin-top: 0; }

  a[href]::after { content: ""; }
}

/* Yalnızca yazdırmada görünen başlık: kağıtta hangi liste olduğu ve
   ne zaman alındığı yazılı olmalı. */
.printonly { display: none; }
@media print {
  .printonly {
    display: block;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid #000;
  }
  .printonly h1 { margin: 0 0 4px; font-size: 15pt; }
  .printonly .small { color: #444; }
}

/* Kartta ürün kodu. Küçük ve soluk: kartın asıl işi ürünü göstermek,
   kod yalnızca gerektiğinde okunuyor. */
.product .prodcode {
  font-size: .72rem;
  color: var(--mut2);
  letter-spacing: .02em;
  margin-top: 2px;
  user-select: all;
}
.grid.aslist .product .prodcode { margin-top: 4px; }

/* Form bölüm başlıkları. Uzun bir formda "neredeyim" sorusuna cevap:
   on alan arka arkaya dizildiğinde kullanıcı yerini kaybediyor. */
.formsection {
  margin: 6px 0 -4px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.formsection:first-child { padding-top: 0; border-top: 0; }
.formsection h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 3px;
  font-size: 1rem;
  color: var(--ink);
}
.formsection p { margin: 0; }

/* ===========================================================================
   Pazaryeri sevkiyatı — Satışlarım ekranı
   ===========================================================================
   Bayi bu ekranda bir form dolduruyor ve formun yanlış doldurulması
   üreticinin YANLIŞ ÜRÜNÜ göndermesi demek. Bu yüzden alanlar geniş,
   ipuçları her alanın altında ve zorunlu olanlar işaretli. */

.howto > summary,
.newship > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 14px 16px;
  list-style: none;
  font-size: .95rem;
}

.howto > summary::-webkit-details-marker,
.newship > summary::-webkit-details-marker { display: none; }

.howto > summary::after,
.newship > summary::after {
  content: "";
  margin-left: auto;
  width: 8px; height: 8px;
  border-right: 2px solid var(--mut);
  border-bottom: 2px solid var(--mut);
  transform: rotate(45deg);
  transition: transform .15s ease;
}

.howto[open] > summary::after,
.newship[open] > summary::after { transform: rotate(-135deg); }

.howto .steps {
  margin: 0;
  padding: 0 18px 4px 34px;
  display: grid;
  gap: 8px;
  font-size: .9rem;
  color: var(--ink2);
}

.howto .steps li { line-height: 1.55; }
.howto .alert.compact { margin: 4px 16px 16px; }

.shipform { padding: 4px 16px 16px; }

/* Alanlar iki sütun; "wide" olanlar tam genişlik. Ürün seçimi ve belge
   yükleme tam genişlikte çünkü ikisi de uzun metin taşıyor. */
.fgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.fgrid .field.wide { grid-column: 1 / -1; }

.fgrid .field { display: grid; gap: 5px; }

.fgrid .field > span {
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink2);
}

.fgrid .field .req { color: var(--red); font-weight: 700; }

.fgrid .field input,
.fgrid .field select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: .92rem;
}

.fgrid .field input:focus,
.fgrid .field select:focus {
  outline: none;
  border-color: var(--o);
  box-shadow: 0 0 0 3px var(--o-soft);
}

.fgrid .field input[type="file"] { padding: 7px 9px; }

.fgrid .hint {
  font-size: .78rem;
  color: var(--mut);
  line-height: 1.45;
}

.fgrid .hint b { color: var(--ink2); }

.formactions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

@media (max-width: 620px) {
  .fgrid { grid-template-columns: 1fr; }
  .formactions .btn { width: 100%; justify-content: center; }
}

/* Üretici menüsünde bekleyen sevkiyat rozeti.
   Sistemde e-posta bildirimi yok; panel tek haber kanalı, o yüzden
   sayı menüde de görünüyor. */
.navlink .navbadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: 9px;
  background: var(--red);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  line-height: 1;
}

/* Liste satırında küçük görsel.
   Üretici kendi ürün listesinde fotoğraf göremiyordu; yanlış ürünü
   düzenlememenin en hızlı yolu fotoğrafa bakmak. */
.rowmedia {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.rowmedia .rowmeta { min-width: 0; }

.rowthumb {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 7px;
  object-fit: cover;
  background: var(--surface);
  border: 1px solid var(--line);
}

/* Görseli olmayan ürün: aynı boyutta boş kutu, satır hizası bozulmasın. */
.rowthumb.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .58rem;
  color: var(--mut);
  text-align: center;
  line-height: 1.1;
  padding: 2px;
}

@media (max-width: 640px) {
  .rowthumb { width: 38px; height: 38px; }
}

/* ===========================================================================
   Sevkiyat ekranlarının eksik bileşenleri
   ===========================================================================
   Pazaryeri sevkiyatı yazılırken yönetim panelinin işaretlemesi kopyalandı
   ama o sınıflar admin.css'te. Bayi ve üretici panelleri app.css yüklüyor,
   dolayısıyla filtre çubuğu, arama kutusu ve takip kodu biçimsiz kalıyordu.
   Aynı hata daha önce yönetim panelindeki sekmelerde yaşandı. */

.filterbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}

.searchwrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 260px;
  min-width: 0;
}

.searchwrap .ico {
  position: absolute;
  left: 10px;
  color: var(--mut);
  pointer-events: none;
}

.searchwrap input {
  width: 100%;
  padding: 9px 11px 9px 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: .92rem;
}

.searchwrap input:focus {
  outline: none;
  border-color: var(--o);
  box-shadow: 0 0 0 3px var(--o-soft);
}

/* İkincil düğme: iptal gibi geri alınamaz işlemler turuncu ana düğme
   gibi görünmemeli — sessiz durmalı. */
.btn.ghost {
  background: transparent;
  color: var(--ink2);
  border: 1px solid var(--line);
  box-shadow: none;
}

.btn.ghost:hover { background: var(--surface); border-color: var(--mut); }

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

/* Hata kutusu. .alert.err zaten vardı ama sevkiyat ekranı .bad yazıyordu
   ve tanımsız olduğu için hata mesajı nötr bir kutu olarak görünüyordu. */
.alert.bad {
  background: var(--red-soft, #fdeaea);
  border-color: var(--red, #c0392b);
  color: var(--red-ink, #7d241a);
}

/* Toplu seçim sütunu. */
td.chk, th.chk { width: 34px; text-align: center; }

/* Takip kodu: depoda ekrandan okunup kargo sistemine yazılıyor.
   Büyük, seçilebilir ve karakterleri ayrık. */
.trackno {
  font-family: var(--mono, ui-monospace, "SFMono-Regular", Menlo, monospace);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink);
  user-select: all;
}

/* Gönderim sırasında düğme: iki kez basılmasın diye kilitli. */
.btn.busy, .btn:disabled { opacity: .6; cursor: not-allowed; }

/* Oturum zaman aşımı uyarısı.
   Süre bitmeden haber veriyor: kapandığında yazılan her şey gidiyor. */
.sessionwarn {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 9999;
  max-width: min(560px, calc(100vw - 32px));
  padding: 12px 16px;
  border-radius: 10px;
  background: #7d4a12;
  color: #fff;
  font-size: .88rem;
  line-height: 1.5;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}

/* ===========================================================================
   Giriş sayfası — anonim önizleme
   =========================================================================== */

/* "veya" ayracı: iki giriş yolunun ayrı olduğunu göstermek için. */
.demosplit {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 12px;
  color: var(--mut);
  font-size: .8rem;
}

.demosplit::before,
.demosplit::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.demoform { margin: 0; }

.demoform .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.demonote {
  margin: 8px 0 0;
  text-align: center;
  line-height: 1.5;
}

/* Önizleme uyarı şeridi: hesabın ne olduğunu her sayfada söylüyor.
   Kullanıcı "neden sipariş veremiyorum" diye aramasın. */
.demobar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 9px 14px;
  background: #7d4a12;
  color: #fff;
  font-size: .85rem;
  line-height: 1.5;
  text-align: center;
}

.demobar a {
  color: #fff;
  text-decoration: underline;
  font-weight: 600;
}

/* CSV sütun eşleştirme paneli (üretici aktarım ekranı).
   Kurallar admin.css'te de var: iki panel ayrı stil dosyası kullanıyor,
   ortak bir dosya yok. */
[data-csv-map][hidden] { display: none; }
[data-csv-map] select { width: 100%; }
[data-csv-map] select.err { border-color: var(--red-line); background: var(--red-bg); }