/* Banlas B2B — arayüz stili
   Marka: mavi #1572b9 · lacivert #253547 · kağıt #f6f2ea
   Yazı ailesi banlas.com ile birebir: Space Grotesk (başlık) · Inter (gövde)
   · Space Mono (etiket/sayı). Fontlar kendi sunucumuzdan verilir. */

@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+00??, 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-latinext.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: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(fonts/spacegrotesk-latin.woff2) format("woff2");
  unicode-range: u+00??, 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: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(fonts/spacegrotesk-latinext.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: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/spacemono-400-latin.woff2) format("woff2");
  unicode-range: u+00??, 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: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/spacemono-400-latinext.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: "Space Mono"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fonts/spacemono-700-latin.woff2) format("woff2");
  unicode-range: u+00??, 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: "Space Mono"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fonts/spacemono-700-latinext.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 {
  --mavi: #1572b9;
  --mavi-koyu: #115e99;
  --lacivert: #253547;
  --kagit: #f6f2ea;
  --beyaz: #ffffff;
  --cizgi: rgba(37, 53, 71, 0.12);
  --sonuk: rgba(37, 53, 71, 0.62);
  --sonuk-aa: rgba(37, 53, 71, .72); /* ikincil metin, WCAG AA (beyaz 5,2:1 · kağıt 4,9:1) — yeni ekranlar bunu kullanır */
  --yesil: #1f7a4d;
  --kirmizi: #b3261e;
  --sari: #b8860b;
  --sari-aa: #8a6508; /* sarı metin, WCAG AA (beyaz 5,3:1) — DESIGN.md */
  --golge: 0 1px 3px rgba(37, 53, 71, 0.08), 0 4px 16px rgba(37, 53, 71, 0.06);
  --yuvarlak: 10px;
  /* Tipografi ölçeği — her yerde aynı boyut kullanmak hiyerarşiyi
     yok ediyordu; bölümler bu ölçekten beslenir. */
  --yazi-xs: 11px;     /* mono etiket, meta */
  --yazi-sm: 12.5px;   /* ikincil metin */
  --yazi-md: 14px;     /* gövde */
  --yazi-lg: 16px;     /* vurgulu gövde, ürün adı */
  --yazi-xl: 20px;     /* kart başlığı */
  --yazi-2xl: 26px;    /* sayfa başlığı */
  --yazi-3xl: 32px;    /* KPI sayısı, fiyat */
  --baslik: "Space Grotesk", "Inter", ui-sans-serif, system-ui, Arial, sans-serif;
  --govde: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--kagit);
  color: var(--lacivert);
  font-family: var(--govde);
  font-size: 15px;
  line-height: 1.5;
  overflow-wrap: break-word;
}

h1, h2, h3 { font-family: var(--baslik); font-weight: 700; letter-spacing: -0.02em; margin: 0; }
a { color: var(--mavi); text-decoration: none; }

button {
  font: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 9px 16px;
  background: var(--mavi);
  color: #fff;
  font-weight: 600;
  transition: background 0.15s;
  min-height: 40px;           /* dokunma hedefi */
}
button:hover:not(:disabled) { background: var(--mavi-koyu); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button.ikincil { background: transparent; color: var(--lacivert); border-color: var(--cizgi); }
button.ikincil:hover:not(:disabled) { background: rgba(37, 53, 71, 0.05); }
button.mini { padding: 5px 11px; font-size: 13px; min-height: 32px; }
button.tehlike { background: transparent; color: var(--kirmizi); border-color: rgba(179, 38, 30, 0.3); }
button.tehlike:hover:not(:disabled) { background: rgba(179, 38, 30, 0.08); }

/* 🔴 Onay ve seçim kutuları bu kuralın DIŞINDA: metin alanı için konan
   min-height/padding onlara da uygulanınca 16px'lik kutu 42px yer kaplıyor,
   çoklu seçim listesi iki katı uzuyordu. */
input:not([type="checkbox"]):not([type="radio"]), select {
  font: inherit;
  font-size: 16px;            /* iOS'ta odaklanınca yakınlaştırmayı önler */
  padding: 9px 12px;
  border: 1px solid var(--cizgi);
  border-radius: 8px;
  background: var(--beyaz);
  color: var(--lacivert);
  width: 100%;
  min-height: 42px;
}
input:focus, select:focus { outline: 2px solid rgba(21, 114, 185, 0.35); outline-offset: -1px; }
@media (min-width: 700px) { input, select { font-size: 14px; } }

.gizli { display: none !important; }

/* ---------- Yükleniyor: marka işareti dolarak ---------- */
/* ---------- Yükleme göstergesi (markup: yukleme.js) ---------- */
/* 300 ms'den kısa süren iş göstergeyi hiç göstermez: önce görünmez, gecikmeyle belirir. */
.yukleniyor {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 52px 20px; color: var(--sonuk);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  container-type: inline-size;
  opacity: 0; animation: yuk-belir .01s linear .3s forwards;
}
.yuk-grup { display: flex; align-items: center; gap: 12px; }
.yuk-tek { width: 30px; height: 30px; flex: none; transform-origin: 50% 50%; animation: don 1.4s linear infinite; }
.yuk-tek .dis { stroke: var(--lacivert); stroke-width: 7; fill: none; stroke-dasharray: 6 4.6; }
.yuk-tek .gobek { fill: var(--mavi); }
/* Gri yazı; üstündeki kopya marka renklerine soldan sağa dolar, sonra söner ve baştan başlar. */
.yuk-yazi {
  position: relative; font-family: var(--baslik); font-size: 34px; font-weight: 700;
  letter-spacing: -.02em; line-height: 1; text-transform: none; color: rgba(37, 53, 71, .22);
}
.yuk-yazi .renk {
  position: absolute; inset: 0; color: transparent;
  background: linear-gradient(90deg, var(--mavi) 0 47%, var(--lacivert) 47% 100%);
  -webkit-background-clip: text; background-clip: text;
  clip-path: inset(0 100% 0 0); animation: yuk-dol 1.6s ease-in-out infinite;
}
@container (max-width: 260px) { .yuk-yazi { display: none; } }
@keyframes yuk-belir { to { opacity: 1; } }
@keyframes yuk-dol {
  0% { clip-path: inset(0 100% 0 0); opacity: 1; }
  55%, 80% { clip-path: inset(0 0 0 0); opacity: 1; }
  100% { clip-path: inset(0 0 0 0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .yuk-tek, .yuk-yazi .renk { animation-duration: 6s; } }

.bekle {
  display: inline-block; width: 14px; height: 14px; vertical-align: -2px;
  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;
  border-radius: 50%; animation: don 0.7s linear infinite; margin-right: 8px;
}

/* ---------- Giriş ---------- */
#giris-ekrani { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.giris-kutu {
  width: 100%; max-width: 380px; background: var(--beyaz);
  border: 1px solid var(--cizgi); border-radius: 14px; padding: 32px;
  box-shadow: var(--golge);
}
.giris-kutu .logo { display: flex; justify-content: center; margin-bottom: 8px; }
.giris-kutu p.alt { text-align: center; color: var(--sonuk); font-size: 13px; margin: 0 0 24px; }
.giris-kutu label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 6px; }
.giris-kutu button { width: 100%; margin-top: 20px; padding: 12px; }
@media (max-width: 420px) { .giris-kutu { padding: 24px 18px; } }

/* ---------- Üst bar ---------- */
header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(246, 242, 234, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--cizgi);
}
.ust {
  max-width: 1360px; margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.ust .bosluk { flex: 1; }
.cari-bilgi { text-align: right; line-height: 1.25; min-width: 0; }
.cari-bilgi .ad {
  font-weight: 600; font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46vw;
}
.cari-bilgi .bakiye { font-size: 12px; color: var(--sonuk); font-family: var(--mono); }

nav.sekmeler {
  max-width: 1360px; margin: 0 auto; padding: 0 16px;
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
}
nav.sekmeler::-webkit-scrollbar { display: none; }
nav.sekmeler a {
  padding: 11px 14px; font-size: 12px; font-weight: 600; white-space: nowrap;
  color: var(--sonuk); border-bottom: 2px solid transparent;
  font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.07em;
}
nav.sekmeler a.etkin { color: var(--mavi); border-bottom-color: var(--mavi); }
nav.sekmeler a:hover:not(.etkin) { color: var(--lacivert); }

/* ---------- Yönetim paneli gezintisi (2026-10-15) ----------
   Üstte grup DÜĞMELERİ (simge + ad + ok; seçili grup lacivert dolu — telefon
   menü kutusunun etkin hâliyle aynı). Düğme, grubun bölümlerini açılır listede
   gösterir. Altta seçili grubun bölümleri çerçeveli düğme olarak hep görünür
   (çekim raporundaki .ck-sekmeler kalıbı) — diğer seçeneklerin varlığı belli olsun. */
.grup-gezinti {
  max-width: 1360px; margin: 0 auto; padding: 2px 16px 12px;
  display: flex; gap: 8px; flex-wrap: wrap;
}
.grup { position: relative; }
.grup-dugme {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--beyaz); color: var(--lacivert); border-color: var(--cizgi);
  padding: 8px 12px; font-size: 14px;
}
.grup-dugme:hover:not(:disabled) { background: rgba(37, 53, 71, .05); }
.grup-dugme svg { width: 18px; height: 18px; flex: none; color: var(--mavi); }
.grup-dugme svg.ok { width: 14px; height: 14px; color: var(--sonuk-aa); transition: transform .12s ease-out; }
.grup-dugme[aria-expanded="true"] svg.ok { transform: rotate(180deg); }
.grup.etkin .grup-dugme { background: var(--lacivert); color: #fff; border-color: var(--lacivert); }
.grup.etkin .grup-dugme svg, .grup.etkin .grup-dugme svg.ok { color: #fff; }
.grup-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  min-width: 230px; padding: 6px; display: grid; gap: 2px;
  background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(37, 53, 71, .16);
}
.grup-menu a {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 12px;
  border-radius: 8px; color: var(--lacivert); font-size: 14px; font-weight: 600;
}
.grup-menu a svg { width: 18px; height: 18px; flex: none; color: var(--mavi); }
.grup-menu a:hover, .grup-menu a:focus-visible { background: rgba(21, 114, 185, .06); outline: none; }
.grup-menu a.etkin { background: rgba(21, 114, 185, .1); color: var(--mavi); }
.grup-dugme:focus-visible, .bolum-sekmeler a:focus-visible { outline: 2px solid var(--mavi); outline-offset: 2px; }

nav.bolum-sekmeler {
  border-top: 1px solid var(--cizgi); background: rgba(255, 255, 255, .55);
  max-width: none; padding: 10px max(16px, calc((100% - 1360px) / 2 + 16px));
  gap: 8px; align-items: center;
}
nav.bolum-sekmeler .bolum-baslik {
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--sonuk-aa); margin-right: 4px; white-space: nowrap;
}
nav.bolum-sekmeler a {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 6px 14px;
  border: 1px solid var(--cizgi); border-radius: 8px; background: var(--beyaz);
  font-family: var(--govde); font-size: 13px; font-weight: 600;
  text-transform: none; letter-spacing: 0; color: var(--lacivert);
}
nav.bolum-sekmeler a svg { width: 16px; height: 16px; color: var(--mavi); }
nav.bolum-sekmeler a:hover:not(.etkin) { background: rgba(37, 53, 71, .05); color: var(--lacivert); }
nav.bolum-sekmeler a.etkin { background: rgba(21, 114, 185, .08); border-color: var(--mavi); color: var(--mavi); }

.sepet-dugme { position: relative; }
.sepet-sayac {
  position: absolute; top: -6px; right: -6px;
  background: var(--kirmizi); color: #fff;
  font-size: 11px; font-weight: 700; font-family: var(--mono);
  min-width: 18px; height: 18px; border-radius: 9px;
  display: grid; place-items: center; padding: 0 4px;
}

/* ---------- Yerleşim ---------- */
main { max-width: 1360px; margin: 0 auto; padding: 20px 16px 60px; }
.yerlesim { display: grid; grid-template-columns: 190px minmax(0, 1fr) 190px; gap: 20px; align-items: start; }
@media (max-width: 1100px) {
  .yerlesim { grid-template-columns: minmax(0, 1fr); }
  .banner-sutun { display: none; }
}
.banner-sutun { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 140px; }
.banner-sutun img { width: 100%; border-radius: var(--yuvarlak); display: block; }

/* ---------- Kart / tablo ---------- */
.kart {
  background: var(--beyaz); border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak); padding: 18px; box-shadow: var(--golge);
}
.kart + .kart { margin-top: 18px; }
.kart h2 { font-size: 17px; margin-bottom: 14px; }
.kart-basi { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.kart-basi h2 { margin: 0; flex: 1; }
@media (max-width: 560px) { .kart { padding: 14px; } }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--sonuk);
  font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--cizgi);
  white-space: nowrap;
}
td { padding: 9px 10px; border-bottom: 1px solid rgba(37,53,71,0.06); }
tr:last-child td { border-bottom: 0; }
.sag { text-align: right; }
.para { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tablo-sar { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px; }
tr.tiklanir { cursor: pointer; }
tr.tiklanir:hover { background: rgba(21, 114, 185, 0.05); }

/* ---------- Süzgeç / araç çubuğu ---------- */
.suzgec { display: grid; grid-template-columns: minmax(0,1fr) 200px 200px auto; gap: 10px; margin-bottom: 18px; }
@media (max-width: 860px) { .suzgec { grid-template-columns: minmax(0,1fr); } }

/* Eski ödeme satırı / kart formu / taksit seçimi stilleri kart.js bileşenine taşındı (İ-47, dosya sonu). */

.arac-cubugu { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.arac-cubugu .ayirac { flex: 1; }
.donem-dugmeler { display: flex; flex-wrap: wrap; gap: 6px; }
.donem-dugmeler button { padding: 5px 11px; font-size: 12.5px; min-height: 32px;
  background: transparent; color: var(--sonuk); border-color: var(--cizgi); }
.donem-dugmeler button.etkin { background: var(--mavi); color: #fff; border-color: var(--mavi); }
.tarih-alanlari { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tarih-alanlari input { width: auto; min-width: 148px; }
.tarih-alanlari span { color: var(--sonuk); font-size: 13px; }
.satir-limiti { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sonuk); }
.satir-limiti select { width: auto; min-width: 96px; }

/* ---------- Arama kutusu (ebata göre / serbest) ---------- */
/* 🔴 overflow:hidden burada olamaz — çoklu seçim paneli kutunun dışına
   açılıyor ve kesiliyordu. Köşe kırpması sekme şeridine taşındı. */
.arama-kutusu {
  background: var(--beyaz); border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak); box-shadow: var(--golge);
  margin-bottom: 20px;
}
.arama-sekmeler {
  display: flex; border-bottom: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak) var(--yuvarlak) 0 0; overflow: hidden;
}
.arama-sekmeler button {
  flex: 1; border: 0; border-radius: 0; background: transparent;
  color: var(--sonuk); font-family: var(--mono); font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.07em; padding: 13px 10px;
  border-bottom: 2px solid transparent;
}
.arama-sekmeler button.etkin { color: var(--mavi); border-bottom-color: var(--mavi); background: rgba(21,114,185,0.04); }
.arama-govde { padding: 16px; }

.ebat-alanlari {
  display: grid; gap: 10px; align-items: end;
  grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
}
/* 🔴 Doğrudan çocuk seçici şart: açılır paneldeki checkbox satırları da
   <label> ve bu kural onları da dikey diziyordu (kutu üstte, marka adı
   altında ortalanmış). */
.ebat-alanlari > label { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ebat-alanlari > label > span:first-child {
  font-family: var(--mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--sonuk); font-weight: 600;
}
.ebat-alanlari button { white-space: nowrap; }
@media (max-width: 1000px) { .ebat-alanlari { grid-template-columns: repeat(3, minmax(0,1fr)); } .ebat-alanlari button { grid-column: 1 / -1; } }
@media (max-width: 620px)  { .ebat-alanlari { grid-template-columns: repeat(2, minmax(0,1fr)); } }

.serbest-alanlari { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; }

.mevsim-secim { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.mevsim-secim button {
  background: transparent; color: var(--sonuk); border-color: var(--cizgi);
  padding: 6px 14px; font-size: 13px; min-height: 34px;
}
.mevsim-secim button.etkin { background: var(--lacivert); color: #fff; border-color: var(--lacivert); }

.secili-suzgecler { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 16px 14px; }
.secili-suzgecler:empty { display: none; }
.secili-suzgecler .etiket-parca {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(21,114,185,0.08); color: var(--mavi);
  border-radius: 20px; padding: 5px 8px 5px 12px; font-size: 12.5px; font-weight: 600;
}
.secili-suzgecler .etiket-parca button {
  border: 0; background: transparent; color: inherit; padding: 0 2px;
  min-height: auto; font-size: 15px; line-height: 1; opacity: 0.65;
}
.secili-suzgecler .etiket-parca button:hover { opacity: 1; background: transparent; }

/* ---------- Üst kategori şeridi (Petlas düzeni) ---------- */
.kategori-serit {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
  margin-bottom: 16px; scrollbar-width: none;
}
.kategori-serit::-webkit-scrollbar { display: none; }
/* Dikey kart: üstte büyük ikon, altta küçük yazı. İkon ile yazı aynı
   boyutta olursa şerit okunmaz hale geliyordu. */
.kategori-serit button {
  flex: none; background: var(--beyaz); color: var(--lacivert);
  border: 1px solid var(--cizgi); border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 7px; width: 106px; min-height: 96px; padding: 15px 8px 11px;
  font-size: 11.5px; font-weight: 700; line-height: 1.2;
  letter-spacing: .01em; text-align: center; white-space: normal;
  box-shadow: var(--golge); transition: border-color .15s, transform .15s;
}
.kategori-serit button:hover { border-color: var(--mavi); transform: translateY(-2px); }
.kategori-serit button .adet {
  font-family: var(--mono); font-size: 10px; opacity: .5; font-weight: 400;
  margin: 0; display: block;
}
.kategori-serit button.etkin { background: var(--lacivert); color: #fff; border-color: var(--lacivert); }
.kategori-serit button.etkin .adet { opacity: 0.75; }

/* ---------- Tarih aralığı seçici ---------- */
.donem-sec { position: relative; display: inline-block; }
.donem-dugme {
  background: var(--beyaz); color: var(--lacivert); border-color: var(--cizgi);
  display: inline-flex; align-items: center; gap: 9px; font-weight: 600;
}
.donem-dugme .ok { opacity: 0.5; font-size: 11px; }
.donem-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 45;
  background: var(--beyaz); border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak); box-shadow: 0 12px 32px rgba(37,53,71,.18);
  display: flex; min-width: 470px; overflow: hidden;
}
.donem-panel .hazir {
  display: flex; flex-direction: column; gap: 2px; padding: 10px;
  border-right: 1px solid var(--cizgi); background: rgba(246,242,234,.6); min-width: 148px;
}
.donem-panel .hazir button {
  background: transparent; color: var(--lacivert); border: 0; text-align: left;
  padding: 8px 11px; font-size: 13px; border-radius: 7px; min-height: 34px; font-weight: 500;
}
.donem-panel .hazir button:hover { background: rgba(21,114,185,.09); }
.donem-panel .hazir button.etkin { background: var(--mavi); color: #fff; font-weight: 600; }
.donem-panel .serbest { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.donem-panel .serbest label {
  display: flex; flex-direction: column; gap: 5px;
  font-family: var(--mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--sonuk); font-weight: 600;
}
.donem-panel .serbest .dugmeler { display: flex; gap: 8px; margin-top: 4px; }
.donem-panel .serbest .dugmeler button { flex: 1; }

@media (max-width: 620px) {
  .donem-sec { display: block; }
  .donem-dugme { width: 100%; justify-content: space-between; }
  /* Alt menü çubuğunun ÜSTÜNDE ve önünde açılır — eskiden çubuğun arkasında kalıyor,
     "Uygula"ya basılamıyordu (kullanıcı gözü 2026-10-15). */
  .donem-panel { position: fixed; inset: auto 12px calc(var(--alt-cubuk, 64px) + env(safe-area-inset-bottom, 0px) + 10px) 12px;
                 min-width: 0; z-index: 65;
                 flex-direction: column; max-height: calc(100vh - var(--alt-cubuk, 64px) - 40px); overflow-y: auto; }
  .donem-panel .hazir { border-right: 0; border-bottom: 1px solid var(--cizgi);
                        flex-direction: row; flex-wrap: wrap; }
  .donem-panel .hazir button { flex: 1 1 44%; text-align: center; }
}

/* ---------- Giriş sayfası iletişim ---------- */
.iletisim {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--cizgi);
  display: flex; flex-direction: column; gap: 9px;
}
.iletisim a, .iletisim span {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; color: var(--lacivert); text-decoration: none;
}
.iletisim a:hover { color: var(--mavi); }
.iletisim svg { flex: none; opacity: 0.5; }
.iletisim .adres { color: var(--sonuk); font-size: 12px; line-height: 1.45; align-items: flex-start; }
.iletisim .adres svg { margin-top: 2px; }

/* ---------- Lastik künyesi (standart teknik veri) ---------- */
.kunye {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 1px; background: var(--cizgi); border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak); overflow: hidden; margin-top: 14px;
}
.kunye .hucre { background: var(--beyaz); padding: 11px 12px; }
.kunye .ad {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--sonuk); margin-bottom: 3px;
}
.kunye .deger { font-family: var(--baslik); font-size: 15px; font-weight: 700; line-height: 1.25; }
.kunye .deger small { font-size: 11px; font-weight: 500; color: var(--sonuk); display: block; margin-top: 1px; }

/* Ebat künyesi şeridi — ürün başlığının altında */
.ebat-serit {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; background: var(--lacivert); color: #fff;
  border-radius: var(--yuvarlak); margin-top: 14px;
}
.ebat-serit .olcu { font-family: var(--baslik); font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.ebat-serit .yh { font-family: var(--mono); font-size: 13px; opacity: 0.85; }
.ebat-serit .ek { font-size: 12px; opacity: 0.7; }

/* ---------- Ürün ızgarası ---------- */
.izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
@media (max-width: 460px) { .izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.urun {
  background: var(--beyaz); border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak); overflow: hidden;
  display: flex; flex-direction: column; transition: box-shadow 0.15s;
}
.urun:hover { box-shadow: var(--golge); }
.urun .gorsel { aspect-ratio: 1; background: #fff; display: grid; place-items: center; cursor: pointer; padding: 10px; }
.urun .gorsel img { max-width: 100%; max-height: 100%; object-fit: contain; }
.urun .gorsel .logo-yer { opacity: 0.22; }
.urun .govde { padding: 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.urun .marka { font-family: var(--mono); font-size: 10px; letter-spacing: 0.09em; color: var(--mavi); text-transform: uppercase; }
.urun .ad { font-size: 13px; font-weight: 600; line-height: 1.35; cursor: pointer; }
.urun .kod { font-family: var(--mono); font-size: 11px; color: var(--sonuk); }
.urun .fiyat { font-family: var(--baslik); font-size: 18px; font-weight: 700; }
.urun .fiyat small { font-size: 11px; font-weight: 500; color: var(--sonuk); }
.urun .fiyat.yok { font-size: 13px; color: var(--sonuk); font-weight: 600; }
/* Dövizli liste fiyatının kökeni (USD 841,32 × 48,3920 …) — bilgi satırı, fiyat TL'dir. */
.fiyat-koken { font-size: 11px; color: var(--sonuk); line-height: 1.35; margin-top: 2px; }
.fiyat-koken span { opacity: .85; }
/* Stok göstergesi — tüm depoların toplamı: "Yok" · 1–4 · "4+" (sunucu üretir). */
.stok-rozet { display: inline-block; font-size: 11px; font-weight: 600; line-height: 1.4;
  padding: 1px 7px; border-radius: 999px; margin-top: 4px; align-self: flex-start; width: max-content;
  color: var(--yesil); background: rgba(31, 122, 77, 0.10); }
.stok-rozet.yok { color: var(--kirmizi); background: rgba(179, 38, 30, 0.08); }
.stok-sayi { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.stok-sayi.eksi { color: var(--kirmizi); font-weight: 600; }
.stok-sayi.sifir { color: var(--sonuk); }
.urun .ekle { display: flex; gap: 6px; margin-top: auto; }
.urun .ekle input { width: 60px; text-align: center; padding: 7px; min-height: 38px; }
.urun .ekle button { flex: 1; padding: 8px 10px; }

.rozet { display: inline-block; font-family: var(--mono); font-size: 10px; padding: 2px 7px; border-radius: 20px; letter-spacing: 0.04em; }
.rozet.temsili { background: rgba(184,134,11,0.12); color: var(--sari); }
.rozet.bekliyor { background: rgba(21,114,185,0.1); color: var(--mavi); }
.rozet.fatura { background: rgba(31,122,77,0.12); color: var(--yesil); }

/* AB etiketi */
.etiket { display: flex; gap: 8px; flex-wrap: wrap; }
.etiket .gosterge { display: flex; align-items: center; gap: 6px; border: 1px solid var(--cizgi); border-radius: 8px; padding: 6px 10px; background: #fff; }
.etiket .harf { font-family: var(--baslik); font-weight: 700; font-size: 16px; width: 26px; height: 26px; border-radius: 5px; display: grid; place-items: center; color: #fff; }
.harf.A { background: #009640; } .harf.B { background: #52ae32; }
.harf.C { background: #c8d200; color: #253547; } .harf.D { background: #fcea10; color: #253547; }
.harf.E { background: #e30613; }
.etiket .ad { font-size: 11px; color: var(--sonuk); font-family: var(--mono); }

/* ---------- Modal ---------- */
.perde { position: fixed; inset: 0; background: rgba(37,53,71,0.45); z-index: 50; backdrop-filter: blur(2px); }
.panel {
  position: fixed; z-index: 51; background: var(--kagit);
  display: flex; flex-direction: column;
  /* Masaüstü: ortada modal */
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(720px, calc(100vw - 40px));
  max-height: min(86vh, 900px);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 64px rgba(37, 53, 71, 0.28);
}
/* Mobil: alttan yükselen yaprak — başparmakla kapatılabilir */
@media (max-width: 700px) {
  .panel {
    top: auto; bottom: 0; left: 0; transform: none;
    width: 100%; max-height: 92vh;
    border-radius: 16px 16px 0 0;
  }
}
.panel .baslik {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 18px; border-bottom: 1px solid var(--cizgi); background: var(--beyaz);
}
.panel .baslik h2 { flex: 1; font-size: 16px; min-width: 0; }
.panel .icerik { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 18px; }
.panel .alt { padding: 16px 18px; border-top: 1px solid var(--cizgi); background: var(--beyaz); }

.sepet-satir { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--cizgi); }
.sepet-satir .ad { font-size: 13px; font-weight: 600; }
.sepet-satir .kod { font-family: var(--mono); font-size: 11px; color: var(--sonuk); }
.toplam-satir { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 14px; }
.toplam-satir.genel { font-weight: 700; font-size: 17px; border-top: 1px solid var(--cizgi); margin-top: 8px; padding-top: 12px; }

.galeri { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; margin-top: 12px; }
.galeri img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; border: 1px solid var(--cizgi); border-radius: 8px; cursor: pointer; padding: 4px; }
.ana-gorsel { width: 100%; aspect-ratio: 4/3; object-fit: contain; background: #fff; border: 1px solid var(--cizgi); border-radius: var(--yuvarlak); }

dl.ozellik { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 6px 16px; margin: 0; font-size: 13px; }
dl.ozellik dt { color: var(--sonuk); font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
dl.ozellik dd { margin: 0; font-weight: 600; }

/* ---------- Bildirim ---------- */
#bildirim {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--lacivert); color: #fff; padding: 12px 20px;
  border-radius: 10px; z-index: 90; font-size: 14px; box-shadow: var(--golge);
  max-width: calc(100vw - 32px); text-align: center;
}
#bildirim.hata { background: var(--kirmizi); }
#bildirim.basari { background: var(--yesil); }

.bos { text-align: center; padding: 44px 20px; color: var(--sonuk); }
.sayfalama { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 20px; font-size: 13px; flex-wrap: wrap; }

/* ---------- Görsel yükleme ---------- */
.yukleme-alani {
  border: 2px dashed var(--cizgi); border-radius: var(--yuvarlak);
  padding: 30px 20px; text-align: center; cursor: pointer;
  color: var(--sonuk); transition: border-color .15s, background .15s;
}
.yukleme-alani:hover, .yukleme-alani.uzerinde {
  border-color: var(--mavi); background: rgba(21,114,185,.04); color: var(--mavi);
}
.yukleme-alani p { margin: 8px 0 0; font-size: 14px; }
.yukleme-alani p.ipucu { font-size: 12px; opacity: .75; margin-top: 4px; }

.gorsel-izgara {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px;
}
.gorsel-kutu {
  border: 1px solid var(--cizgi); border-radius: var(--yuvarlak);
  overflow: hidden; background: var(--beyaz);
}
.gorsel-kutu .resim {
  aspect-ratio: 4/3; background: #fff; display: grid; place-items: center; padding: 6px;
}
.gorsel-kutu .resim img { max-width: 100%; max-height: 100%; object-fit: contain; }
.gorsel-kutu .bilgi { padding: 8px 10px; border-top: 1px solid var(--cizgi); }
/* 🔴 Yol adı iki-üç satıra bölünüp kart yüksekliklerini kaydırıyordu ve
   üç düğme yan yana sığmadığı için "Sil" kartın dışına taşıyordu.
   Yol tek satıra kırpılır (tamamı title'da), düğmeler ızgaraya alınır. */
.gorsel-kutu { display: flex; flex-direction: column; }
.gorsel-kutu .bilgi { display: flex; flex-direction: column; flex: 1; }
.gorsel-kutu .yol {
  font-family: var(--mono); font-size: 10px; color: var(--sonuk);
  line-height: 1.35; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; direction: rtl; text-align: left;
}
.gorsel-kutu .islem {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: auto; padding-top: 9px;
}
.gorsel-kutu .islem button {
  padding: 5px 4px; font-size: 11px; min-height: 30px; width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gorsel-kutu .islem button.genis { grid-column: 1 / -1; }

.yukleme-satiri {
  display: flex; align-items: center; gap: 10px; padding: 9px 0;
  border-bottom: 1px solid var(--cizgi); font-size: 13px;
}
.yukleme-satiri:last-child { border-bottom: 0; }
.yukleme-satiri .ad { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yukleme-satiri .durum { font-family: var(--mono); font-size: 11px; }
.yukleme-satiri .durum.tamam { color: var(--yesil); }
.yukleme-satiri .durum.hata { color: var(--kirmizi); }

/* ---------- Yatay banner (üst / alt) ---------- */
.banner-yatay { display: flex; flex-direction: column; gap: 12px; }
.banner-yatay:empty { display: none; }
#banner-ust { margin-bottom: 18px; }
#banner-alt { margin-top: 22px; }
.banner-yatay img {
  width: 100%; max-height: 200px; object-fit: cover;
  border-radius: var(--yuvarlak); display: block;
}

/* ---------- Kategori ikonları ---------- */
/* SVG boyutu HTML'de 17px yazılı; şeritte CSS ile büyütülür. */
.kategori-serit button svg {
  flex: none; width: 36px; height: 36px; stroke-width: 1.4;
  color: var(--mavi); opacity: .9;
}
.kategori-serit button.etkin svg { color: #fff; opacity: 1; }

/* ==================== YÖNETİM PANELİ EKLERİ ==================== */

/* Süzgeç satırı — ürün ve sipariş arama alanları */
.suzgec-satiri {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px;
}
.suzgec-satiri input { flex: 1 1 240px; min-width: 0; }
.suzgec-satiri select { flex: 0 1 auto; width: auto; min-width: 140px; }
.suzgec-satiri button { flex: none; }

.sayac-etiket {
  font-family: var(--mono); font-size: 12px; color: var(--sonuk);
  white-space: nowrap;
}
.alt-baslik { font-size: 13px; margin: 0 0 8px; color: var(--sonuk); }

/* Tıklanabilir satır ve KPI kutusu */
.tiklanir-satir { cursor: pointer; }
.tiklanir-satir:hover { background: rgba(21,114,185,.06); }
.ozet-izgara.tiklanir .ozet-kutu[data-kpi] { cursor: pointer; transition: border-color .15s, transform .15s; }
.ozet-izgara.tiklanir .ozet-kutu[data-kpi]:hover { border-color: var(--mavi); transform: translateY(-1px); }
.ozet-kutu .sayi.uyari { color: #b4551f; }

/* Aç/kapa anahtarı — ürün satırındaki "satışta" */
.anahtar { display: inline-flex; cursor: pointer; }
.anahtar input { position: absolute; opacity: 0; width: 0; height: 0; }
.anahtar span {
  width: 38px; height: 21px; border-radius: 11px; background: rgba(37,53,71,.22);
  position: relative; transition: background .16s; display: block;
}
.anahtar span::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px;
  border-radius: 50%; background: #fff; transition: transform .16s;
  box-shadow: 0 1px 3px rgba(0,0,0,.28);
}
.anahtar input:checked + span { background: var(--mavi); }
.anahtar input:checked + span::after { transform: translateX(17px); }
.anahtar input:focus-visible + span { outline: 2px solid var(--mavi); outline-offset: 2px; }
.anahtar-satir { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }

/* Ürün düzenleme penceresi */
.ud-ust { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.ud-baslik { font-size: 13px; margin: 20px 0 10px; color: var(--sonuk);
             text-transform: uppercase; letter-spacing: .05em; font-family: var(--mono); }
.ud-gorseller { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.ud-gorsel { border: 1px solid var(--cizgi); border-radius: var(--yuvarlak); overflow: hidden; }
.ud-gorsel img { width: 100%; height: 96px; object-fit: contain; background: #f6f7f9; display: block; }
.ud-gorsel .yol {
  font-family: var(--mono); font-size: 10px; padding: 6px 8px 0; color: var(--sonuk);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ud-gorsel .dugmeler { display: flex; gap: 4px; padding: 6px 8px 8px; }
.ud-gorsel .dugmeler button { flex: 1; padding: 4px 0; font-size: 11px; }
.ud-ekle { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ud-ekle input { flex: 1 1 200px; min-width: 0; }
.ud-ekle button { flex: none; }
.ud-ipucu { font-size: 12px; color: var(--sonuk); margin: 8px 0 0; }
#ud-metin { width: 100%; font-family: var(--mono); font-size: 12px; line-height: 1.6; }

/* Bildirim kanalları */
.kanal-kutu {
  border: 1px solid var(--cizgi); border-radius: var(--yuvarlak);
  padding: 16px; margin-bottom: 14px;
}
.kanal-basi { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.kanal-basi h3 { font-size: 15px; margin: 0; }
.kanal-basi .bosluk { flex: 1; }
.kanal-kutu textarea { width: 100%; font-family: var(--mono); font-size: 12px; }
.kanal-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }
.kanal-durum { font-size: 12px; color: var(--sonuk); flex: 1 1 100%; }
.kanal-durum.tamam { color: #1c7c4a; font-weight: 600; }
.kanal-durum.hata { color: #b4231f; font-weight: 600; }
/* 🔴 "Doğrulanamıyor" başarı DEĞİLDİR — yeşil kullanılmaz, uyarı rengi verilir. */
.kanal-durum.belirsiz { color: #a4691a; font-weight: 600; }

/* Sipariş detayı üst bilgisi */
.detay-ust {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--cizgi);
}
.detay-ust span {
  display: block; font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--sonuk); margin-bottom: 3px;
}
.detay-ust strong { font-size: 14px; }

table tfoot td { border-top: 2px solid var(--cizgi); padding-top: 10px; }

@media (max-width: 700px) {
  .suzgec-satiri select, .suzgec-satiri input { flex: 1 1 100%; width: 100%; }
  .suzgec-satiri button { width: 100%; }
}

/* ==================== ÇOKLU SEÇİM ==================== */
.coklu { position: relative; }
.coklu-dugme {
  width: 100%; display: flex; align-items: center; gap: 8px; text-align: left;
  background: var(--beyaz); color: var(--metin); border: 1px solid var(--cizgi);
  /* Yanındaki <select> ile aynı yükseklik ve yazı — şerit hizalı dursun. */
  font-family: inherit; font-weight: 500; font-size: 14px;
  text-transform: none; letter-spacing: normal; min-height: 44px;
  padding: 10px 13px;
}
.coklu-dugme > span:first-child {
  font-family: inherit; font-size: 14px; font-weight: 500;
  text-transform: none; letter-spacing: normal; color: var(--metin);
}
.coklu-dugme:hover { border-color: var(--mavi); background: var(--beyaz); }
.coklu-dugme span:first-child {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.coklu-dugme .ok { flex: none; font-size: 11px; color: var(--sonuk); }

.coklu-panel {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0;
  min-width: 100%; width: max-content; max-width: 320px;
  background: var(--beyaz); border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak); box-shadow: 0 12px 32px rgba(20,32,44,.18);
  padding: 10px;
}
.coklu-ara { width: 100%; margin-bottom: 8px; font-size: 13px; padding: 7px 10px; }
.coklu-liste { max-height: 260px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.coklu-satir {
  display: flex; flex-direction: row; align-items: center; gap: 9px;
  padding: 7px 8px; border-radius: 7px; cursor: pointer; font-size: 13px;
  text-align: left;
}
.coklu-satir:hover { background: rgba(21,114,185,.08); }
.coklu-satir input {
  flex: none; width: 16px; height: 16px; min-height: 0; padding: 0;
  accent-color: var(--mavi); margin: 0;
}
.coklu-satir span:not(.adet) { flex: 1; }
.coklu-satir .adet {
  font-family: var(--mono); font-size: 11px; color: var(--sonuk); flex: none;
}
.coklu-bos { padding: 14px 8px; text-align: center; font-size: 13px; color: var(--sonuk); }
.coklu-alt { display: flex; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--cizgi); }
.coklu-alt button { flex: 1; }

/* Canlı arama anahtarı */
.canli-arama {
  display: flex; align-items: center; gap: 9px; margin-top: 12px;
  font-size: 13px; color: var(--sonuk); cursor: pointer;
}
.canli-arama input { width: 16px; height: 16px; accent-color: var(--mavi); flex: none; }

/* Mobilde panel ekranı taşmasın */
@media (max-width: 640px) {
  .coklu-panel { max-width: none; width: 100%; }
}

/* Sıralanabilir tablo başlıkları */
#uygulama.yonetim .tablo-sar thead th,
.panel .tablo-sar thead th { cursor: pointer; user-select: none; }
.tablo-sar thead th:empty { cursor: default !important; }
#uygulama.yonetim .tablo-sar thead th:not(:empty):hover,
.panel .tablo-sar thead th:not(:empty):hover { color: var(--mavi); }
.tablo-sar thead th.sirali-artan::after { content: ' ▲'; font-size: 9px; color: var(--mavi); }
.tablo-sar thead th.sirali-azalan::after { content: ' ▼'; font-size: 9px; color: var(--mavi); }

/* ==================== TABLO OKUNAKLILIĞI ==================== */
/* 🔴 Dar ekranda sütunlar sıkışınca metin kelime kelime alt alta iniyordu
   ("SATIŞ / FATURASI / — / BANDIRMA / ULAŞIM"). Tabloya alt genişlik
   verilir; sığmadığında .tablo-sar zaten yatay kaydırıyor. */
.tablo-sar table { min-width: 620px; }
.tablo-sar table.dar { min-width: 460px; }
.tablo-sar table.genis { min-width: 860px; }

/* Metin sütunları kırılmasın, sayı ve tarih sütunları hiç sarmasın. */
td.para, th.sag, td.sag, td.tarih, th.tarih { white-space: nowrap; }
td.metin { min-width: 240px; }

/* Kaydırılabilir tabloda kenarda gölge — kaydırma olduğu belli olsun. */
.tablo-sar {
  background:
    linear-gradient(to right, var(--beyaz) 30%, rgba(255,255,255,0)),
    linear-gradient(to left, var(--beyaz) 30%, rgba(255,255,255,0)) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(37,53,71,.12), transparent),
    radial-gradient(farthest-side at 100% 50%, rgba(37,53,71,.12), transparent) 100% 0;
  background-repeat: no-repeat;
  background-size: 34px 100%, 34px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* Geniş içerikli modal — analiz ve sipariş detayı tablo taşıyor. */
.panel.genis { width: min(1120px, calc(100vw - 32px)); }

/* Analiz — dağılım çubuğu, ayrıntı açma, detay araç çubuğu */
.cubuk { background: rgba(21,114,185,.15); height: 7px; border-radius: 4px; min-width: 2px; }
.baglanti-dugme {
  background: none; border: 0; padding: 2px 0; min-height: 0;
  color: var(--mavi); font-size: 11px; font-weight: 600; cursor: pointer;
}
.baglanti-dugme:hover { text-decoration: underline; background: none; }
.ham-detay {
  font-family: var(--mono); font-size: 11px; line-height: 1.55;
  background: rgba(37,53,71,.04); border-radius: 8px; padding: 9px 11px;
  margin: 6px 0 0; white-space: pre-wrap; word-break: break-word; max-width: 460px;
}
.detay-arac {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px;
}
.detay-arac input { flex: 1 1 220px; min-width: 0; }
.detay-arac select { width: auto; min-width: 150px; flex: none; }
.detay-arac .bosluk { flex: 1; }
@media (max-width: 700px) {
  .detay-arac input, .detay-arac select { flex: 1 1 100%; width: 100%; }
}

/* Ürün penceresi — doğrudan yükleme ve teknik alan tablosu */
.ud-yukle {
  border: 2px dashed var(--cizgi); border-radius: var(--yuvarlak);
  padding: 18px; text-align: center; cursor: pointer; margin-top: 14px;
  display: flex; flex-direction: column; gap: 5px; transition: border-color .15s, background .15s;
}
.ud-yukle:hover, .ud-yukle.uzerinde { border-color: var(--mavi); background: rgba(21,114,185,.05); }
.ud-yukle strong { font-size: 14px; }
.ud-yukle span { font-size: 12px; color: var(--sonuk); }
.ozellik-tablo .alan-adi {
  font-family: var(--mono); font-size: 12px; color: var(--sonuk);
  white-space: nowrap; vertical-align: middle;
}
.ozellik-tablo input { width: 100%; padding: 6px 9px; min-height: 34px; font-size: 13px; }
.ozellik-tablo td { padding: 5px 8px; }
.zorunlu { color: #b4231f; }
.kanal-uyari {
  font-size: 12px; color: #a4691a; background: rgba(164,105,26,.08);
  border-radius: 8px; padding: 8px 11px; margin: 0 0 12px;
}

/* ==================== TİPOGRAFİ HİYERARŞİSİ ==================== */
/* 🔴 Önceki durumda yazıların neredeyse tamamı 11–14px arasındaydı;
   başlık, gövde ve meta aynı ağırlıkta görünüyordu. Ölçek burada
   uygulanır — bölüm başlıkları büyür, meta küçülür, gövde ortada durur. */

body { font-size: var(--yazi-md); line-height: 1.55; }

h1 { font-family: var(--baslik); font-size: var(--yazi-2xl); font-weight: 700;
     letter-spacing: -.02em; line-height: 1.2; }
.kart > h2, .kart-basi h2, main > section > h2 {
  font-family: var(--baslik); font-size: var(--yazi-xl); font-weight: 700;
  letter-spacing: -.015em; line-height: 1.25; margin: 0 0 4px;
}
.kart { padding: 22px; }
.kart + .kart { margin-top: 18px; }
.kart-basi { margin-bottom: 16px; gap: 12px; }

/* Bölüm alt başlığı — mono, küçük, boşluklu */
.alt-baslik, .ud-baslik {
  font-family: var(--mono); font-size: var(--yazi-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--sonuk);
}

/* Tablo: başlık küçük ve sönük, gövde okunur */
.tablo-sar table { font-size: 13.5px; }
.tablo-sar thead th {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--sonuk);
}
.tablo-sar td { padding: 11px 10px; }

/* Meta / yardım metinleri */
.ipucu, .ud-ipucu, .bos { font-size: var(--yazi-sm); }

/* KPI kutuları — sayı iri, etiket küçük */
.ozet-kutu { padding: 18px 18px 16px; }
.ozet-kutu .sayi {
  font-size: var(--yazi-3xl); line-height: 1.05; letter-spacing: -.02em;
}
.ozet-kutu .ad { font-size: 10.5px; margin-top: 6px; }

/* ---------- Ürün kartı ---------- */
.urun .marka {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em; color: var(--mavi);
}
.urun .ad {
  font-size: var(--yazi-lg); font-weight: 600; line-height: 1.3;
  letter-spacing: -.01em; margin: 4px 0 2px;
}
.urun .kod { font-size: var(--yazi-xs); color: var(--sonuk); font-family: var(--mono); }
.urun .fiyat {
  font-family: var(--baslik); font-size: 23px; font-weight: 700;
  letter-spacing: -.02em; margin-top: 10px;
}
.urun .fiyat small {
  display: block; font-family: var(--govde); font-size: 10.5px;
  font-weight: 500; color: var(--sonuk); letter-spacing: 0; margin-top: 1px;
}
.urun .fiyat.yok { font-size: var(--yazi-md); color: var(--sonuk); font-weight: 600; }
/* Fiyatı olmayan üründe Tomay'a sor: telefon + WhatsApp, yalnız simge (Murat 2026-10-05). */
.fiyat-sor { display: flex; gap: 8px; margin-top: 6px; }
.fiyat-sor a {
  display: inline-grid; place-items: center; width: 40px; height: 40px;
  border-radius: 999px; border: 1px solid var(--cizgi, #d9dee4); background: #fff;
  text-decoration: none; transition: background .15s;
}
.fiyat-sor a.tel { color: var(--mavi); }
.fiyat-sor a.wa  { color: #1fa855; }
.fiyat-sor a:hover { background: rgba(21, 114, 185, 0.06); }
@media (max-width: 760px) { .fiyat-sor a { width: 44px; height: 44px; } }

/* Ürün penceresi başlığı */
.panel .baslik h2 { font-size: var(--yazi-xl); letter-spacing: -.015em; }

/* ==================== KATALOG SLAYTI ==================== */
/* Slaytlı kutuda içerik alanı tam kaplar: grid ortalama ve iç boşluk
   künye kartını taşırıyordu (alt satırlar ve künye dip yazısı kesiliyordu). */
.urun .gorsel.slaytli { position: relative; overflow: hidden; padding: 0; place-items: stretch; }
.urun .gorsel.slaytli .slayt img { padding: 10px; }
.urun .gorsel { position: relative; overflow: hidden; }
.urun .slayt { display: none; width: 100%; height: 100%; min-height: 0; }
.urun .slayt.etkin { display: block; }
.urun .slayt img { width: 100%; height: 100%; object-fit: contain; display: block; }

.slayt-ok {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; min-height: 0; padding: 0;
  border-radius: 50%; border: 1px solid var(--cizgi);
  background: rgba(255,255,255,.92); color: var(--lacivert);
  font-size: 15px; line-height: 1; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s, background .15s; z-index: 2;
}
.urun .gorsel:hover .slayt-ok, .slayt-ok:focus-visible { opacity: 1; }
.slayt-ok:hover { background: #fff; border-color: var(--mavi); color: var(--mavi); }
.slayt-ok.sol { left: 4px; }
.slayt-ok.sag { right: 4px; }
/* Dokunmatikte hover yok — oklar hep görünür. */
@media (hover: none) { .slayt-ok { opacity: .85; } }

.slayt-nokta {
  position: absolute; bottom: 8px; left: 0; right: 0; z-index: 2;
  display: flex; gap: 5px; justify-content: center;
}
.slayt-nokta span {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(37,53,71,.28); transition: background .15s, width .15s;
  cursor: pointer;
}
.slayt-nokta span.etkin { background: var(--mavi); width: 16px; border-radius: 3px; }

/* ==================== TEKNİK KÜNYE KARTI ==================== */
/* 🔴 Yatay iç boşluk okların genişliği kadar: kaydırma okları dikey
   ortada duruyor ve rozet etiketlerinin üstüne biniyordu. */
.teknik-kart {
  width: 100%; height: 100%; background: #fff; box-sizing: border-box;
  display: flex; flex-direction: column; padding: 12px 34px 22px;
  font-family: var(--govde); text-align: left;
}
.tk-ust { border-bottom: 1px solid var(--cizgi); padding-bottom: 7px; margin-bottom: 9px; flex: none; }
.tk-marka {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--mavi);
}
.tk-ad {
  font-family: var(--baslik); font-size: 15px; font-weight: 700;
  letter-spacing: -.01em; line-height: 1.2; margin-top: 2px;
}
.tk-etiketler { display: flex; gap: 7px; margin-bottom: 9px; flex: none; }
.tk-rozet { flex: 1; text-align: center; }
.tk-rozet .harf {
  color: #fff; font-family: var(--baslik); font-weight: 700; font-size: 19px;
  line-height: 1; padding: 7px 0 6px; border-radius: 7px;
}
.tk-rozet .harf.sayi { background: var(--lacivert); font-size: 15px; padding: 9px 0 8px; }
.tk-rozet .etiket {
  font-size: 9.5px; white-space: nowrap; color: var(--sonuk); margin-top: 4px; font-weight: 600;
  letter-spacing: .01em;
}
.tk-kunye { flex: 1; min-height: 0; overflow: hidden; }
.tk-satir {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 11px; padding: 2.5px 0; line-height: 1.35;
  border-bottom: 1px dashed rgba(37,53,71,.09);
}
.tk-satir:last-child { border-bottom: 0; }
.tk-satir span { color: var(--sonuk); }
.tk-satir strong { font-weight: 600; text-align: right; }
.tk-alt {
  flex: none; font-family: var(--mono); font-size: 8.5px; letter-spacing: .06em;
  color: var(--sonuk); text-transform: uppercase; text-align: center;
  padding-top: 7px; opacity: .75;
}
/* Ürün penceresindeki büyük sürüm */
.teknik-kart:not(.kompakt) { border: 1px solid var(--cizgi); border-radius: var(--yuvarlak); }
.teknik-kart:not(.kompakt) .tk-ad { font-size: 18px; }
.teknik-kart:not(.kompakt) { padding: 18px 20px 14px; }
.teknik-kart:not(.kompakt) .tk-satir { font-size: 13px; padding: 6px 0; }
.teknik-kart:not(.kompakt) .tk-rozet .harf { font-size: 24px; padding: 10px 0 9px; }
.teknik-kart:not(.kompakt) .tk-rozet .etiket { font-size: 11px; }

/* Arama kutusu alt satırı — anahtar solda, sayfa boyutu sağda */
.arama-secenek {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--cizgi);
}
.arama-secenek .bosluk { flex: 1; }
.arama-secenek .anahtar-satir { font-size: var(--yazi-sm); font-weight: 600; cursor: pointer; }
.arama-secenek .satir-limiti { display: flex; align-items: center; gap: 8px; }
.arama-secenek .satir-limiti > span {
  font-family: var(--mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--sonuk); font-weight: 600;
}
.arama-secenek select { width: auto; min-width: 118px; padding: 7px 10px; min-height: 36px; }
@media (max-width: 620px) {
  .arama-secenek { flex-direction: column; align-items: stretch; }
  .arama-secenek .satir-limiti select { flex: 1; }
}
/* Tıklanabilir ürün adı */
.ad.tiklanir { cursor: pointer; }
.ad.tiklanir:hover { color: var(--mavi); text-decoration: underline; }

/* Panel: alan tablosu grup başlıkları */
.ozellik-tablo .grup-satiri td {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--sonuk);
  background: rgba(37,53,71,.035); padding: 7px 9px;
}
.ozellik-tablo .alan-adi { white-space: normal; min-width: 170px; }
.ozellik-tablo .alan-adi > div:first-child {
  font-family: var(--govde); font-size: 12.5px; font-weight: 600; color: var(--metin);
}
.ozellik-tablo .alan-adi .birim { color: var(--sonuk); font-weight: 400; }
.ozellik-tablo .alan-adi .anahtar {
  font-family: var(--mono); font-size: 9.5px; color: var(--sonuk); opacity: .75; margin-top: 1px;
}
.rozet.iptal { background: rgba(179,38,30,.12); color: #b3261e; }

/* ====================================================================
   MOBİL DÜZEN  (≤760px)
   ====================================================================
   🔴 Bu bölümden önceki kurallar masaüstü içindir; telefonda tablolar
   yatay kaydırmaya bırakılıyordu ve müşteri bakiye sütununu hiç
   göremiyordu. Burada:
     · tablolar KART'a döner (etiketleri mobil.js yazar)
     · gezinti alt çubuğa iner (Instagram/YouTube düzeni)
     · üst bar tek satıra sığar
     · her dokunma hedefi en az 44px olur
   Bölüm dosyanın SONUNDA durur; aynı özgüllükteki masaüstü kuralını
   ezmesi buna bağlıdır.                                              */

:root { --alt-cubuk: 62px; }

/* Çıkış düğmesi masaüstünde yazı, telefonda simgedir. */
#cikis svg { display: none; }

/* ---------- Alt gezinti çubuğu ---------- */
.alt-gezinti { display: none; }

@media (max-width: 760px) {
  .alt-gezinti {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--cizgi);
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -2px 14px rgba(37, 53, 71, .07);
  }
  .alt-gezinti button {
    background: none; border: 0; border-radius: 0; color: var(--sonuk);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 8px 2px 7px; min-height: var(--alt-cubuk);
    font-family: var(--govde); font-size: 10.5px; font-weight: 600; letter-spacing: .01em;
  }
  .alt-gezinti button:hover:not(:disabled) { background: none; }
  .alt-gezinti .ikon { position: relative; display: block; line-height: 0; }
  .alt-gezinti svg { width: 25px; height: 25px; }
  .alt-gezinti button.etkin { color: var(--mavi); }
  .alt-gezinti button.etkin svg { stroke-width: 2.1; }
  .alt-gezinti .gez-sayac {
    position: absolute; top: -6px; right: -9px;
    background: var(--kirmizi); color: #fff;
    font-family: var(--mono); font-size: 10px; font-weight: 700;
    min-width: 17px; height: 17px; border-radius: 9px;
    display: grid; place-items: center; padding: 0 4px; line-height: 1;
  }

  /* 🔴 Alttan açılan pencere varken çubuk gizlenir; yoksa yaprağın
     üstüne biner ve alt satırları örter. Çıkış yapılınca da gizlenir:
     düğmeler DOM'da kalıyor, giriş ekranında görünmemeli. */
  body:has(#perde:not(.gizli)) .alt-gezinti,
  body:has(#uygulama.gizli) .alt-gezinti { display: none; }

  .alt-gezinti button:focus-visible {
    outline: 2px solid var(--mavi); outline-offset: -3px; border-radius: 10px;
  }

  /* Çubuk içeriğin üstüne binmesin — yalnız uygulama açıkken, giriş
     ekranında alt çubuk yok. */
  body:has(#uygulama:not(.gizli)) {
    padding-bottom: calc(var(--alt-cubuk) + env(safe-area-inset-bottom, 0px));
  }
  main { padding-bottom: 26px; }
  #bildirim { bottom: calc(var(--alt-cubuk) + 16px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Üst bar: tek satır ---------- */
@media (max-width: 760px) {
  .ust { flex-wrap: nowrap; gap: 10px; padding: 8px 14px; }
  .ust #ust-logo { flex: none; }
  .ust #ust-logo svg { width: 24px; height: 24px; }
  .ust #ust-logo span span { font-size: 1.15rem; }
  .ust .bosluk { display: none; }

  .cari-bilgi { flex: 1; min-width: 0; text-align: right; }
  .cari-bilgi .ad { font-size: 13px; max-width: none; }
  .cari-bilgi .bakiye { font-size: 11px; }

  /* Sepet alt çubuğa taşındı, üstte yer kaplamasın */
  .ust .sepet-dugme { display: none; }

  /* Çıkış: yalnız simge, 44px dokunma hedefi */
  .ust #cikis {
    flex: none; width: 44px; min-height: 44px; padding: 0;
    display: grid; place-items: center; border-radius: 50%;
  }
  .ust #cikis .etiket { display: none; }
  .ust #cikis svg { width: 20px; height: 20px; display: block; }

  /* Yazı sekmeleri alt çubuğa devredildi */
  header nav.sekmeler, header .grup-gezinti { display: none; }

  main { padding: 14px 12px 26px; }
  .kart { padding: 15px 14px; border-radius: 12px; }
  .kart + .kart { margin-top: 14px; }
}

/* ---------- TABLO → KART ---------- */
@media (max-width: 760px) {
  /* Kaydırma kabı ve alt genişlikler kalkar: kart düzeni sığar. */
  .tablo-sar {
    overflow-x: visible; margin: 0; padding: 0; background: none;
  }
  .tablo-sar table,
  .tablo-sar table.dar,
  .tablo-sar table.genis { min-width: 0; width: 100%; display: block; font-size: 14px; }
  .tablo-sar thead { display: none; }
  .tablo-sar tbody, .tablo-sar tfoot { display: block; }

  .tablo-sar tr {
    display: block; background: var(--beyaz);
    border: 1px solid var(--cizgi); border-radius: 12px;
    padding: 12px 14px; margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(37, 53, 71, .05);
  }
  .tablo-sar tr:last-child { margin-bottom: 0; }
  .tablo-sar tfoot tr { background: rgba(37, 53, 71, .045); }

  /* Etiket solda, değer sağda — banka ekstresi düzeni */
  .tablo-sar td {
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
    padding: 5px 0; border: 0; text-align: right; white-space: normal;
  }
  .tablo-sar td::before {
    content: attr(data-etiket);
    flex: none; max-width: 45%;
    font-family: var(--mono); font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em; color: var(--sonuk);
    text-align: left;
  }
  .tablo-sar td:not([data-etiket])::before { content: none; }

  /* Kart başlığı — ilk dolu hücre (tarih · belge no · stok kodu) */
  .tablo-sar td.kart-basligi {
    display: block; text-align: left; font-size: 15px; font-weight: 700;
    line-height: 1.3; padding: 0 0 9px; margin-bottom: 7px;
    border-bottom: 1px dashed rgba(37, 53, 71, .14);
  }
  .tablo-sar td.kart-basligi::before { content: none; }
  .tablo-sar td.kart-basligi.para { font-size: 14px; }

  /* Boş hücre kartta yer kaplamaz (borç/alacak sütunlarının biri hep boştur) */
  .tablo-sar td.bos-hucre { display: none; }

  /* Çok satırlı hücre (ürün adı + stok kodu · cari unvanı + kodu):
     etiket üstte, içerik altında — yan yana sıkışmasın. */
  .tablo-sar td.cok-satir { display: block; text-align: left; }
  .tablo-sar td.cok-satir::before { display: block; margin-bottom: 3px; max-width: none; }
  .tablo-sar td.cok-satir > div { text-align: left; }

  /* colspan'li özet satırları (dönem toplamı · devir · tfoot) */
  .tablo-sar td[colspan] { text-align: left; }
  .tablo-sar td[colspan]:not(.kart-basligi) { justify-content: flex-start; }

  /* İçinde düğme/anahtar olan hücreler dikey ortalansın */
  .tablo-sar td:has(button), .tablo-sar td:has(.anahtar), .tablo-sar td:has(img) {
    align-items: center;
  }
  .tablo-sar td button { min-height: 40px; font-size: 13px; }
  .tablo-sar td .metin, .tablo-sar td.metin { min-width: 0; text-align: right; }
  .tablo-sar td.metin > div { text-align: right; }

  /* Tıklanabilir kartta sağ üstte ok — dokunulabildiği belli olsun */
  .tablo-sar tr.tiklanir, .tablo-sar tr.tiklanir-satir { position: relative; }
  .tablo-sar tr.tiklanir::after, .tablo-sar tr.tiklanir-satir::after {
    content: '›'; position: absolute; right: 13px; top: 9px;
    font-size: 23px; line-height: 1; color: var(--mavi); opacity: .55;
  }
  .tablo-sar tr.tiklanir .kart-basligi,
  .tablo-sar tr.tiklanir-satir .kart-basligi { padding-right: 22px; }

  /* Ham JSON kutusu kart genişliğini aşmasın */
  .ham-detay { max-width: 100%; }
  /* Analiz dağılım çubuğu kartta anlamsız kalıyor */
  .tablo-sar td:has(.cubuk) { display: none; }
}

/* ---------- Katalog süzgeci: katlanır ---------- */
.suzgec-ac { display: none; }

@media (max-width: 760px) {
  .suzgec-ac {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; margin-bottom: 12px; min-height: 46px;
    background: var(--beyaz); color: var(--lacivert); border: 1px solid var(--cizgi);
    font-weight: 700; font-size: 14px;
  }
  .suzgec-ac .ok { font-size: 12px; opacity: .55; transition: transform .18s; }
  .suzgec-ac.acik .ok { transform: rotate(180deg); }
  .arama-kutusu.kapali .arama-sekmeler,
  .arama-kutusu.kapali .arama-govde { display: none; }
  .arama-kutusu.kapali { margin-bottom: 14px; }
  .arama-kutusu.kapali .secili-suzgecler { padding: 12px 14px; }

  .ebat-alanlari { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ebat-alanlari button { grid-column: 1 / -1; }
  .kategori-serit button { width: 92px; min-height: 88px; padding: 12px 6px 9px; }
  .kategori-serit button svg { width: 30px; height: 30px; }

  /* Ürün ızgarası iki sütun — kart okunur boyutta kalsın */
  .izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .urun .ad { font-size: 14px; }
  .urun .fiyat { font-size: 19px; }
  .urun .ekle input { width: 52px; }
  .urun .ekle button { padding: 8px 6px; font-size: 13px; }
}

/* ---------- Araç çubuğu / dışa aktarma düğmeleri ---------- */
@media (max-width: 760px) {
  .kart-basi { gap: 8px; }
  .kart-basi h2 { flex: 1 1 100%; }
  .kart-basi button.mini { flex: 1; min-height: 42px; font-size: 13px; }

  .arac-cubugu { gap: 10px; }
  .arac-cubugu .ayirac { display: none; }
  .arac-cubugu .donem-sec { flex: 1 1 100%; }
  .arac-cubugu .satir-limiti { flex: 1 1 100%; justify-content: space-between; }
  .arac-cubugu .satir-limiti select { flex: 1; min-width: 0; max-width: 60%; }

  .donem-dugmeler button, .mevsim-secim button { min-height: 42px; }
  button.mini { min-height: 40px; }
  .sayfalama button { flex: 1; min-height: 44px; }
}

/* ---------- Paneller: alttan yükselen yaprak ---------- */
@media (max-width: 760px) {
  .panel, .panel.genis {
    top: auto; bottom: 0; left: 0; right: 0; transform: none;
    width: 100%; max-width: none; max-height: 92vh;
    border-radius: 18px 18px 0 0;
  }
  .panel .baslik { padding: 14px 16px; }
  .panel .baslik h2 { font-size: 17px; }
  .panel .icerik { padding: 14px 16px; }
  .panel .alt {
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  }
  .panel .baslik button.mini { min-height: 40px; }
  .galeri { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kunye { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  dl.ozellik { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  dl.ozellik dt { margin-top: 8px; }
}

/* ---------- Menü yaprağı (yönetim panelinde tüm bölümler) ---------- */
.yaprak-perde {
  position: fixed; inset: 0; background: rgba(37, 53, 71, .45);
  z-index: 70; backdrop-filter: blur(2px);
}
.yaprak {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 71;
  background: var(--kagit); border-radius: 18px 18px 0 0;
  padding: 8px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  max-height: 86vh; overflow-y: auto;
  box-shadow: 0 -18px 48px rgba(37, 53, 71, .26);
  transform: translateY(100%); transition: transform .22s ease;
}
.yaprak.acik { transform: translateY(0); }
.yaprak-tutamac {
  width: 42px; height: 4px; border-radius: 3px; margin: 4px auto 12px;
  background: rgba(37, 53, 71, .2);
}
.yaprak h3 {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em; color: var(--sonuk);
  margin: 0 0 12px 2px;
}
.yaprak-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* Grup başlığı (yönetim menüsü): başlık h3'ten küçük değil, onun altında kümeyi adlandırır. */
.yaprak h4.yaprak-grup {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em; color: var(--sonuk-aa);
  margin: 18px 0 8px 2px;
}
.yaprak h3 + h4.yaprak-grup { margin-top: 0; }
.yaprak-liste button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
  background: var(--beyaz); color: var(--lacivert);
  border: 1px solid var(--cizgi); border-radius: 12px;
  padding: 14px 13px; min-height: 78px; font-size: 13.5px; font-weight: 600;
  text-align: left;
}
.yaprak-liste button svg { width: 23px; height: 23px; color: var(--mavi); }
.yaprak-liste button.etkin {
  background: var(--lacivert); color: #fff; border-color: var(--lacivert);
}
.yaprak-liste button.etkin svg { color: #fff; }

@media (min-width: 761px) { .yaprak, .yaprak-perde { display: none; } }

/* ---------- Yönetim paneli ekleri ---------- */
/* 🔴 `#uygulama` öneki şart: yonetim.html'in kendi <style> bloğu bu
   dosyadan SONRA geliyor ve öneksiz kuralı eziyor (KPI kutuları tek
   sütuna düşüyordu). */
@media (max-width: 760px) {
  #uygulama .ozet-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ozet-kutu { padding: 14px 14px 12px; }
  .ozet-kutu .sayi { font-size: 22px; }
  .gorsel-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ud-gorseller { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #uygulama .banner-form { grid-template-columns: minmax(0, 1fr); }
  #uygulama .form-satir { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  /* 🔴 Sayfa içi stildeki `.ipucu { grid-column: 2 }` örtük ikinci sütun
     açıyor ve ipucu taşıyan satırlar (Port) yan yana kalıyordu. */
  #uygulama .form-satir .ipucu { grid-column: 1; margin-top: 0; }
  .detay-ust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .kanal-kutu { padding: 14px 13px; }
  .suzgec-satiri > * { flex: 1 1 100%; width: 100%; }
  .suzgec-satiri select, .suzgec-satiri input, .suzgec-satiri button { min-height: 46px; }
  .ozellik-tablo .alan-adi { min-width: 0; }
  .baglanti-dugme { min-height: 34px; padding: 6px 0; }
}

/* ---------- Dokunmatik: küçük hedefleri büyüt ---------- */
/* 🔴 `hover: none` yetmiyor — masaüstü tarayıcının mobil kipinde
   uygulanmıyor. Ölçü, genişlik sorgusundan verilir. */
@media (max-width: 760px) {
  .gorsel-kutu .islem button { min-height: 42px; font-size: 12px; }
  .ud-gorsel .dugmeler button { min-height: 40px; }
  .secili-suzgecler .etiket-parca button { min-height: 28px; min-width: 28px; }

  /* Katalog slaytı: oklar başparmakla basılabilir olmalı */
  .slayt-ok { width: 40px; height: 40px; font-size: 19px; opacity: .9; }
  .slayt-ok.sol { left: 6px; }
  .slayt-ok.sag { right: 6px; }
  .slayt-nokta span { width: 8px; height: 8px; }
  .slayt-nokta span.etkin { width: 18px; }
}

/* ---------- e-Fatura / e-Arşiv bölümü (fatura detayı) ---------- */
.ebelge {
  border: 1px solid var(--cizgi); border-radius: var(--yuvarlak); background: var(--beyaz);
  padding: 14px 16px; margin: 0 0 16px;
}
.ebelge-bas { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ebelge-logo { height: 46px; width: auto; flex: none; }
.ebelge-logo.soluk { opacity: .45; filter: grayscale(1); }
.ebelge-kunye {
  flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 2px;
  font-size: var(--yazi-sm); color: var(--sonuk); line-height: 1.4;
}
.ebelge-kunye strong { font-size: var(--yazi-md); color: var(--lacivert); }
.ebelge-islem { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ebelge-yok { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ebelge-yok .ebelge-ffatura { width: 100%; }

.acilir { position: relative; }
.acilir-liste {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 5;
  min-width: 170px; background: var(--beyaz); border: 1px solid var(--cizgi);
  border-radius: 8px; box-shadow: var(--golge); display: flex; flex-direction: column; overflow: hidden;
}
.acilir-liste.gizli { display: none; }
.acilir-liste button {
  background: none; border: 0; border-radius: 0; color: var(--lacivert);
  text-align: left; padding: 10px 14px; font-size: 13px; min-height: 40px; justify-content: flex-start;
}
.acilir-liste button:hover:not(:disabled) { background: rgba(21, 114, 185, .06); }

.ebelge-gorunum { margin-top: 12px; }
.ebelge-arac { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.ebelge-sekme { display: flex; gap: 6px; }
.ebelge-sekme button.etkin { background: var(--lacivert); color: #fff; border-color: var(--lacivert); }
.ebelge-yakin { display: flex; gap: 6px; align-items: center; }
.ebelge-yakin button { min-width: 36px; padding-left: 8px; padding-right: 8px; }
.ebelge-yuzde { font-family: var(--mono); font-size: var(--yazi-xs); color: var(--sonuk); min-width: 44px; text-align: right; }
/* Sahne: sabit yükseklik, iki yönde kaydırılır; içerik ölçeklenmiş belge kutusu */
.ebelge-sahne {
  height: min(70vh, 900px); overflow: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--cizgi); border-radius: 8px; background: rgba(37, 53, 71, .06);
}
.ebelge-icerik { position: relative; overflow: hidden; background: #fff; }
.ebelge-cerceve, .ebelge-gorsel { position: absolute; top: 0; left: 0; transform-origin: 0 0; border: 0; display: block; background: #fff; }
.ebelge-icerik .bos { position: static; }

.ebelge-ffatura {
  display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px;
  border-top: 1px dashed var(--cizgi); font-size: var(--yazi-xs); color: var(--sonuk);
  text-decoration: none; letter-spacing: .02em;
}
.ebelge-ffatura:hover { color: var(--lacivert); }
.ebelge-ffatura img { height: 18px; width: auto; }

/* Yönetim — Cari Hesap */
.cari-sonuc-liste { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.cari-sonuc-liste button {
  background: var(--beyaz); color: var(--lacivert); border: 1px solid var(--cizgi);
  text-align: left; justify-content: flex-start; min-height: 46px; padding: 8px 14px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center;
}
.cari-sonuc-liste button:hover:not(:disabled) { background: rgba(21, 114, 185, .06); border-color: var(--mavi); }
.cari-sonuc-liste .unvan { font-weight: 600; font-size: 13.5px; }
.cari-sonuc-liste .kod { font-family: var(--mono); font-size: 11px; color: var(--sonuk); }

/* Mobil — ≤760px (K10: mobil kurallar dosya sonunda durur) */
@media (max-width: 760px) {
  .ebelge { padding: 12px; }
  .ebelge-logo { height: 38px; }
  /* Düğme satırı tam genişlik; indir menüsü tek sütuna değil satırın tamamına açılır */
  .ebelge-islem { width: 100%; position: relative; }
  .ebelge-islem > button, .ebelge-islem .acilir { flex: 1 1 0; }
  .ebelge-islem .acilir { position: static; }
  .ebelge-islem .acilir > button { width: 100%; }
  .ebelge-islem button { min-height: 44px; }
  .acilir-liste { left: 0; right: 0; min-width: 0; }
  .acilir-liste button { min-height: 44px; }
  .ebelge-sahne { height: 62vh; }
  .ebelge-yakin button { min-height: 44px; min-width: 44px; }
  .ebelge-sekme button { flex: 1; min-height: 44px; }
  .cari-sonuc-liste button { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Bakiye mutabakatı (2026-10-09) ---------- */
/* Plasiyer rolünde yalnız yöneticiye ait kontroller gizlenir (asıl sınır sunucuda). */
.rol-plasiyer .yalniz-admin { display: none !important; }
.m-not { font-size: var(--yazi-sm); color: var(--sonuk-aa); margin: 0 0 12px; }
.m-meta { font-size: var(--yazi-xs); color: var(--sonuk-aa); }
.m-sonuk { color: var(--sonuk); }
#m-ozet .ozet-kutu .ad { color: var(--sonuk-aa); } /* AA kontrast (axe, 2026-10-13) — yalnız bu ekran */
.m-sekmeler button:not(.etkin), .m-sekmeler button:not(.etkin) .adet { color: var(--sonuk-aa); }
#sayfa-mutabakat .bos { color: var(--sonuk-aa); }
/* Temsilci tablosu görünümü + bakiye sınırı (2026-10-14). Düğme grubu çekim raporundaki .ck-sekmeler. */
.m-gorunum { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
/* Tab ile gelinen kontrol sabit üst çubuğun altında kalmasın. */
.m-gorunum button, .m-gorunum input { scroll-margin-top: 140px; }
.m-gorunum .ck-sekmeler { margin-bottom: 0; }
.m-sinir { display: inline-flex; align-items: center; gap: 8px; font-size: var(--yazi-sm); color: var(--lacivert); white-space: nowrap; }
/* Genel input kuralı (width:100%) bu kutuyu ezmesin — özgüllük #m-sinir ile. */
.m-sinir input#m-sinir { width: 96px; flex: none; text-align: right; font-family: var(--mono); }
.m-sinir input[aria-invalid="true"] { border-color: var(--kirmizi); }
.m-toplam { font-weight: 700; }
#m-temsilci[aria-busy="true"] { opacity: .55; transition: opacity 120ms ease-out; }
.m-sekme-kapsam { margin: 0 0 8px; font-size: var(--yazi-sm); color: var(--lacivert); scroll-margin-top: 140px; }
/* AA kontrast — liste kartları (375 px'te axe, 2026-10-14): rozet mavisi kendi zemininde 4,4:1, gecikme sarısı 3,3:1. */
#sayfa-mutabakat .rozet.bekliyor { color: var(--mavi-koyu); }
#sayfa-mutabakat .rozet.temsili, #sayfa-mutabakat .m-gecikme.g30, #sayfa-mutabakat .m-gecikme.g60 { color: var(--sari-aa); }
/* Tutar kutusu en uzun değeri taşır (125.464.940,71 ₺): rakam ortadan bölünmesin. Kutu bir kademe küçük
   yazıyla tek satır; dar ızgarada iki sütun kaplar (eleştirmen 2026-10-13, bulgu 3). */
#m-ozet .ozet-kutu:last-child .sayi { font-size: var(--yazi-2xl); white-space: nowrap; }
@media (max-width: 1279px) { #m-ozet .ozet-kutu:last-child { grid-column: span 2; } }
.m-sekmeler { margin: -4px -4px 14px; }
.m-sekmeler .adet { font-family: var(--mono); font-size: var(--yazi-xs); color: var(--sonuk); margin-left: 4px; }
.m-sekmeler button.etkin .adet { color: var(--mavi); }
#m-zaman { margin: 0 0 10px; }
.m-gecikme { font-family: var(--mono); font-size: var(--yazi-sm); white-space: nowrap; }
.m-gecikme.g30 { color: var(--sari); }
.m-gecikme.g60 { color: var(--sari); font-weight: 700; }
.m-gecikme.g90 { color: var(--kirmizi); font-weight: 700; }
.m-yanlis { color: var(--kirmizi); }
.m-bana-degil { color: var(--sari-aa); }
.m-bakiye { font-weight: 600; }
.m-aciklama { font-size: var(--yazi-sm); margin-top: 4px; max-width: 280px; }
.m-islem { white-space: nowrap; text-align: right; }
.m-islem button + button { margin-left: 6px; }
tr.m-secili { background: rgba(21, 114, 185, .08); }
.m-sayfa { display: flex; gap: 12px; align-items: center; justify-content: flex-end; margin-top: 12px; }
.m-kunye { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 18px; }
.m-buyuk { font-size: var(--yazi-xl); font-weight: 700; }
.m-secim { border: 1px solid var(--cizgi); border-radius: var(--yuvarlak); padding: 10px 14px; margin: 0 0 14px; }
.m-secim legend { font-weight: 600; padding: 0 6px; }
.m-secim label { display: flex; align-items: center; gap: 10px; padding: 8px 0; min-height: 44px; cursor: pointer; }
.m-etiket { display: block; font-weight: 600; font-size: var(--yazi-sm); margin: 0 0 6px; }
#m-aciklama-giris { width: 100%; resize: vertical; }
#m-hata { color: var(--kirmizi); min-height: 1em; }
.m-iki { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
#panel-mutabakat .alt { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.m-sekmeler button:hover:not(.etkin) { background: rgba(21, 114, 185, .06); color: var(--lacivert); }
/* Orta genişlikte (tablet) işlem sütunu ekranda kalsın: ikincil iki sütun gizlenir. */
@media (min-width: 761px) and (max-width: 1100px) {
  .m-ikincil { display: none; }
  /* İşlem sütunu sağa yapışık: tablo kaysa da Ekstre / İşaretle hep görünür. */
  #m-liste .m-islem, #m-liste thead th:last-child {
    position: sticky; right: 0; background: var(--beyaz);
    box-shadow: -10px 0 10px -10px rgba(37, 53, 71, .25);
  }
}
@media (max-width: 760px) {
  /* Dört küme telefonda 2×2 ızgara: kaydırma gerektirmez, hepsi görünür. */
  .m-sekmeler { display: grid; grid-template-columns: 1fr 1fr; }
  .m-sekmeler button { padding: 11px 6px; }
  .m-islem { text-align: left; }
  .m-iki { grid-template-columns: 1fr; }
  .m-sayfa { justify-content: space-between; }
}
#m-tur { width: auto; min-width: 220px; flex: 0 1 auto; }
@media (max-width: 760px) {
  #m-tur { flex: 1 1 100%; }
  #m-ozet .ozet-kutu .sayi { font-size: var(--yazi-xl); white-space: nowrap; }
}

/* ================= Kartla tahsilat (panel, İ-45) =================
   Sözleşme docs/ui/sozlesme/panel-kartla-tahsilat.md. Anahtar mevcut
   `.anahtar` bileşenidir; burada yalnız yerleşim. Boşluk ölçeği 4–8–12–16–24. */
.gorunmez {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
#sayfa-pos .ipucu { color: var(--sonuk-aa); margin: 4px 0 0; }
#sayfa-pos .kt-aciklama { margin: -4px 0 16px; }
.kt-ayar { display: flex; align-items: flex-start; gap: 12px; }
.kt-ayar .anahtar { min-height: 44px; min-width: 44px; align-items: center; }
.kt-ayar-metin { flex: 1; min-width: 0; padding-top: 10px; }
.kt-ayar-ad { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.kt-ayar-ad label { font-weight: 700; font-size: var(--yazi-lg); cursor: pointer; }
.kt-kaydedildi { font-size: var(--yazi-sm); font-weight: 600; color: var(--yesil); }
.kt-kaydedildi.hata { color: var(--kirmizi); }
.kt-kaydedildi:empty { display: none; }
.kt-bant {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border-radius: var(--yuvarlak); font-size: var(--yazi-sm); font-weight: 600; margin: 16px 0 0;
}
.kt-bant.uyari { background: rgba(184, 134, 11, .10); color: var(--lacivert); border: 1px solid rgba(184, 134, 11, .35); }
.kt-bant.hata { background: rgba(179, 38, 30, .07); color: var(--kirmizi); border: 1px solid rgba(179, 38, 30, .3); }
#kt-hata { margin: 0 0 16px; }
.kt-alan { margin-top: 16px; }
.kt-alan > label { display: block; font-weight: 600; font-size: var(--yazi-sm); margin-bottom: 4px; }
.kt-alan .zorunlu { color: var(--kirmizi); }
.kt-alan-hata { color: var(--kirmizi); font-size: var(--yazi-sm); margin: 4px 0 0; min-height: 0; }
.kt-alan-hata:empty { display: none; }
.kt-alan input[readonly] { background: var(--kagit); color: var(--sonuk-aa); cursor: default; }
.kt-alan input[aria-invalid="true"], .kt-alan select[aria-invalid="true"] { border-color: var(--kirmizi); }
.kt-satir-ici { display: flex; align-items: center; gap: 12px; }
.kt-satir-ici input { flex: 1; min-width: 0; max-width: 360px; }
.kt-secim { border: 0; margin: 0; padding: 0; min-width: 0; }
.kt-secenek {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px;
  border: 1px solid var(--cizgi); border-radius: var(--yuvarlak); cursor: pointer;
}
.kt-secenek + .kt-secenek { margin-top: 8px; }
.kt-secenek:hover { border-color: rgba(21, 114, 185, .45); }
.kt-secenek:has(input:checked) { border-color: var(--mavi); background: rgba(21, 114, 185, .05); }
.kt-secenek:has(input:focus-visible) { outline: 2px solid var(--mavi); outline-offset: 2px; }
.kt-secenek:has(input:disabled) { cursor: progress; }
.kt-secenek input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--mavi); }
.kt-secenek-metin { flex: 1; min-width: 0; }
.kt-secenek-ad { font-weight: 600; overflow-wrap: anywhere; }
.kt-secenek-alt { font-size: var(--yazi-sm); color: var(--sonuk-aa); }
#kt-secim-durum { display: block; margin-top: 8px; }
.kt-form { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--cizgi); }
.kt-form h3 { font-size: var(--yazi-lg); }
.kt-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
.kt-izgara .kt-genis { grid-column: 1 / -1; }
.kt-form-alt { display: flex; gap: 12px; margin-top: 24px; }
.kt-tehlike { margin-top: 24px; padding: 16px; border: 1px solid rgba(179, 38, 30, .35); border-radius: var(--yuvarlak); }
.kt-tehlike h3 { color: var(--kirmizi); font-size: var(--yazi-md); }
.kt-beklemede { color: var(--sonuk-aa); font-size: var(--yazi-sm); }
.kt-pos-ad { font-weight: 600; overflow-wrap: anywhere; }
.kt-dogrulama { display: block; font-size: var(--yazi-xs); margin-top: 4px; }
.kt-dogrulama.dogrulandi { color: var(--yesil); }
.kt-dogrulama.dogrulanamiyor { color: var(--sari); }
.kt-dogrulama.hata { color: var(--kirmizi); }
.kt-islemler { white-space: nowrap; text-align: right; }
.kt-bant ul { flex-basis: 100%; margin: 0; padding-left: 18px; font-weight: 400; }
@media (max-width: 760px) {
  .kt-izgara { grid-template-columns: minmax(0, 1fr); }
  .kt-satir-ici { flex-wrap: wrap; }
  .kt-satir-ici input { max-width: none; flex-basis: 100%; }
  .kt-form-alt button, .kt-tehlike button { min-height: 44px; flex: 1; }
  .kt-islemler { white-space: normal; text-align: left; }
  .kt-islemler button.mini { min-height: 44px; }
}

/* ================= Kartla ödeme / tahsilat bileşeni (kart.js, İ-47) =================
   Müşteri Hesabım ve panel Cari Hesap ortak. Kart görseli işlevsel geri bildirim
   (DESIGN.md yön): girilen bilgi kartın üstünde canlı yazılır, CVV'de arka yüz.
   Renk yalnız token; kart yüzeyi lacivert (metin beyaz, 12,9:1). */
.ko { max-width: 640px; }
/* Sabit üst başlık odaktaki alanı örtmesin (kaydırma payı). */
#odeme-alani, #c-tahsilat-alani, .ko input, .ko button, .ko-sonuc { scroll-margin-top: 136px; }
/* Telefonda alt gezinti çubuğu (sabit) düğmeyi örtmesin. */
.ko input, .ko button, .ko-sonuc { scroll-margin-bottom: calc(var(--alt-cubuk, 0px) + 24px); }
.ko-ipucu-ust { margin: 0 0 4px !important; }
.ko-aylik { display: block; font-family: var(--mono); font-size: var(--yazi-xs); margin-top: 2px; white-space: nowrap; }
.ko-cekilecek { margin: 16px 0 0; font-size: var(--yazi-md); }
.ko-uyari { color: var(--lacivert) !important; background: rgba(184, 134, 11, .10); padding: 8px 12px; border-radius: var(--yuvarlak); }
.ko-sonuc-cari { font-weight: 600; margin: 0 0 4px !important; }
.ko-cekilecek:empty { display: none; }
#c-tahsilat-not { font-size: var(--yazi-sm); color: var(--sonuk-aa); }
.ko .ipucu { color: var(--sonuk-aa); margin: 4px 0 0; }
.ko-aciklama { color: var(--sonuk-aa); margin: -8px 0 16px; }
.ko-alan { margin-top: 16px; }
.ko-alan > label, .ko-taksit legend { display: block; font-weight: 600; font-size: var(--yazi-sm); margin-bottom: 4px; }
.ko .zorunlu { color: var(--kirmizi); }
.ko-satir { display: flex; gap: 12px; align-items: center; }
.ko-satir input { flex: 1; min-width: 0; max-width: 260px; }
.ko-hata { color: var(--kirmizi); font-size: var(--yazi-sm); margin: 4px 0 0; }
.ko-hata:empty { display: none; }
.ko input[aria-invalid="true"] { border-color: var(--kirmizi); }
.ko-bant { padding: 12px 16px; border-radius: var(--yuvarlak); font-size: var(--yazi-sm); font-weight: 600; margin: 0 0 8px; }
.ko-bant.hata { background: rgba(179, 38, 30, .07); color: var(--kirmizi); border: 1px solid rgba(179, 38, 30, .3); }
.ko-bant ul { margin: 4px 0 0; padding-left: 18px; font-weight: 400; }
.ko-kart-alani { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 16px; }
.ko-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
.ko-izgara .ko-genis { grid-column: 1 / -1; }
.ko-izgara .ko-alan:first-child { margin-top: 0; }
/* Kart görseli */
.ko-kart { position: relative; width: 300px; aspect-ratio: 1.586; perspective: 900px; margin-top: 4px; }
.ko-yuz {
  position: absolute; inset: 0; border-radius: 14px; padding: 18px 20px; color: var(--beyaz);
  background: var(--lacivert); box-shadow: var(--golge);
  backface-visibility: hidden; transition: transform 400ms ease-out;
  display: flex; flex-direction: column; justify-content: space-between;
}
.ko-arka { transform: rotateY(180deg); padding: 22px 0; justify-content: flex-start; gap: 18px; }
.ko-kart.arka .ko-on { transform: rotateY(-180deg); }
.ko-kart.arka .ko-arka { transform: rotateY(0deg); }
.ko-ust { display: flex; justify-content: space-between; align-items: center; }
.ko-cip { width: 38px; height: 28px; border-radius: 6px; background: rgba(255, 255, 255, .28); }
.ko-marka { font-family: var(--baslik); font-weight: 700; font-size: var(--yazi-lg); }
.ko-no { font-family: var(--mono); font-size: 19px; letter-spacing: .06em; white-space: nowrap; }
.ko-alt { display: flex; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: var(--yazi-sm); }
.ko-ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: none; }
.ko-serit { height: 40px; background: rgba(0, 0, 0, .55); }
.ko-cvv-satir { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 0 20px; }
.ko-cvv-etiket { font-size: var(--yazi-xs); font-family: var(--mono); }
.ko-cvv { background: var(--beyaz); color: var(--lacivert); font-family: var(--mono); padding: 4px 12px; border-radius: 4px; min-width: 56px; text-align: right; }
@media (prefers-reduced-motion: reduce) { .ko-yuz { transition: none; } }
/* Taksit */
.ko-taksit { border: 0; padding: 0; margin: 24px 0 0; min-width: 0; }
.ko-taksitler { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ko-secenek {
  display: flex; align-items: flex-start; gap: 8px; min-height: 48px; padding: 12px;
  border: 1px solid var(--cizgi); border-radius: var(--yuvarlak); cursor: pointer;
}
.ko-secenek:hover { border-color: rgba(21, 114, 185, .45); }
.ko-secenek:has(input:checked) { border-color: var(--mavi); background: rgba(21, 114, 185, .05); }
.ko-secenek:has(input:focus-visible) { outline: 2px solid var(--mavi); outline-offset: 2px; }
.ko-secenek input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--mavi); }
.ko-arti { color: var(--yesil); font-weight: 600; }
.ko-not { display: block; font-size: var(--yazi-xs); color: var(--sonuk-aa); margin-top: 2px; }
.ko-iskelet { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ko-iskelet span { height: 48px; border-radius: var(--yuvarlak); background: rgba(37, 53, 71, .08); }
.ko-guven { margin-top: 16px !important; }
.ko-dugmeler { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
/* Sonuç */
.ko-sonuc { padding: 0; } /* kart içinde kart yok: durum rengi yalnız başlıkta */
.ko-sonuc:focus { outline: none; } /* programla odaklanır (ekran okuyucu duyurusu); etkileşimli değil */
.ko-sonuc h3 { font-size: var(--yazi-xl); margin-bottom: 4px; }
.ko-sonuc.basari h3 { color: var(--yesil); }
.ko-sonuc.hata h3 { color: var(--kirmizi); }
.ko-sonuc.uyari h3 { color: var(--sari); }
.ko-sonuc-tutar { font-family: var(--mono); font-size: var(--yazi-lg); font-weight: 700; margin: 0; }
.ko-sonuc p { margin: 8px 0 0; }
@media (max-width: 760px) {
  #c-ozet .ozet-kutu .sayi { white-space: nowrap; font-size: var(--yazi-xl); }
  #c-ozet .ozet-kutu .ad { overflow-wrap: anywhere; }
  .ko-kart-alani { grid-template-columns: minmax(0, 1fr); }
  .ko-kart { width: 100%; max-width: 320px; margin: 0 auto; }
  .ko-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ko-satir { flex-wrap: wrap; }
  .ko-satir input { max-width: none; flex-basis: 100%; }
  .ko-satir button, .ko-dugmeler button { min-height: 44px; flex: 1; }
  .ko-taksitler, .ko-iskelet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ================= Panel çekim raporu (cekimrapor.js, İ-49) ================= */
.ck-toplam { display: flex; gap: 24px; align-items: flex-end; flex-wrap: wrap; margin: 0 0 16px; }
.ck-ana .sayi { font-family: var(--baslik); font-size: var(--yazi-3xl); font-weight: 700; line-height: 1.1; white-space: nowrap; }
.ck-ana .ad { font-size: var(--yazi-sm); color: var(--sonuk-aa); }
.ck-yan { display: flex; gap: 24px; flex-wrap: wrap; margin: 0; }
.ck-yan div { min-width: 0; }
.ck-yan dt { font-size: var(--yazi-xs); color: var(--sonuk-aa); }
.ck-yan dd { margin: 0; font-family: var(--mono); font-weight: 700; }
.ck-suzgec { margin-bottom: 8px; }
.ck-suzgec .anahtar-satir { gap: 8px; min-height: 44px; white-space: nowrap; }
.ck-suzgec .anahtar-satir input { width: 18px; height: 18px; min-height: 0; accent-color: var(--mavi); }
.ck-cipler { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.ck-cipler:empty { display: none; }
.ck-cip {
  background: rgba(21, 114, 185, .08); color: var(--lacivert); border: 1px solid rgba(21, 114, 185, .3);
  border-radius: 999px; padding: 4px 12px; min-height: 32px; font-size: var(--yazi-sm); font-weight: 600;
}
.ck-cip:hover:not(:disabled) { background: rgba(21, 114, 185, .16); }
.ck-sirala { background: none; border: 0; padding: 0; min-height: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.ck-sirala:hover:not(:disabled) { background: none; color: var(--mavi); }
.ck-cari { background: none; border: 0; padding: 0; min-height: 0; color: var(--mavi); font-weight: 600; text-align: left; overflow-wrap: anywhere; }
.ck-cari:hover:not(:disabled) { background: none; text-decoration: underline; }
.ck-alt { display: block; font-size: var(--yazi-xs); color: var(--sonuk-aa); }
.ck-sayfa { display: flex; gap: 12px; align-items: center; justify-content: flex-end; margin-top: 12px; font-size: var(--yazi-sm); }
.ck-sayfa:empty { display: none; }
.ck-iskelet { display: grid; gap: 8px; }
.ck-iskelet span { height: 40px; border-radius: 6px; background: rgba(37, 53, 71, .07); }
.ck-sekmeler { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.ck-sekmeler button { background: transparent; color: var(--lacivert); border-color: var(--cizgi); }
.ck-sekmeler button:hover:not(:disabled) { background: rgba(37, 53, 71, .05); }
.ck-sekmeler button.etkin { background: rgba(21, 114, 185, .08); border-color: var(--mavi); color: var(--mavi); }
#sayfa-cekim .rozet { white-space: nowrap; }
#sayfa-cekim .kart-basi .donem-sec { margin-left: auto; }
/* Sağdaki dönem düğmesinin penceresi sağa yaslanır; telefonda (≤620) alttan açılan konum geçerli kalır. */
@media (min-width: 621px) { #sayfa-cekim .donem-panel, .rapor .donem-panel { left: auto; right: 0; } }
/* Sabit üst çubuk sayfa başını, telefonda alt çubuk boş durum düğmesini örtmesin. */
#ck-liste, #ck-sayfa { scroll-margin-top: 136px; }
/* Metin içindeki bağlantı yalnız renkle ayrılmaz (WCAG 1.4.1). */
#sayfa-pos .ipucu a, #sayfa-cekim .ipucu a, #sayfa-cekim .bos a, #c-tahsilat-not a { text-decoration: underline; text-underline-offset: 2px; }
#ck-liste .bos { scroll-margin-bottom: calc(var(--alt-cubuk, 0px) + 24px); padding-bottom: calc(var(--alt-cubuk, 0px) + 8px); } /* sağ kenardaki seçici: pencere sola açılır */
#ck-icerik.ck-yukleniyor { opacity: .55; transition: opacity 120ms ease-out; pointer-events: none; }
#ck-icerik.ck-yukleniyor::before { content: 'Güncelleniyor…'; display: block; font-size: var(--yazi-sm); font-weight: 600; color: var(--mavi); margin-bottom: 8px; }
#sayfa-cekim .rozet.notr { color: var(--sonuk-aa); }
.ck-yazilmadi { color: var(--kirmizi); font-family: var(--govde); font-weight: 600; }
#sayfa-cekim .tablo-sar { overflow-x: auto; }
@media (min-width: 761px) { .ck-tablo { min-width: 1180px; } .ck-cari { overflow-wrap: break-word; word-break: normal; } }
.ck-suzgec .anahtar-satir { flex: 0 0 auto !important; width: auto !important; }
/* Rozet: zeminsiz + çerçeveli — küçük yazıda AA (yeşil 5,4:1 · kırmızı 6,2:1 · mavi 4,9:1 beyaz üstünde);
   sarı AA'yı geçmediği için "kontrol ediliyor/deneme" lacivert metin, sarı çerçeve. */
#sayfa-cekim .rozet { background: transparent; border: 1px solid currentColor; font-size: var(--yazi-xs); }
#sayfa-cekim .rozet.temsili { color: var(--lacivert); border-color: var(--sari); }
/* Çekimde banka cevabı (sözleşme cekim-banka-cevabi.md): kod + iki satırlık mesaj; tamamı "Ayrıntı"da. */
.ck-banka { min-width: 160px; max-width: 260px; }
.ck-banka-kod { font-family: var(--mono); font-weight: 700; }
.ck-banka-mesaj { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ck-banka-ayrinti { margin-top: 4px; font-size: var(--yazi-xs); }
.ck-banka-ayrinti summary { cursor: pointer; color: var(--mavi); font-weight: 600; font-size: var(--yazi-sm); min-height: 32px; padding: 0 8px 0 0; display: inline-flex; align-items: center; }
.ck-banka-ayrinti summary:hover { text-decoration: underline; }
.ck-banka-ayrinti summary:focus-visible { outline: 2px solid var(--mavi); outline-offset: 2px; border-radius: 4px; }
.ck-banka-ayrinti dl { margin: 4px 0 0; display: grid; gap: 4px; }
.ck-banka-ayrinti dl div { display: grid; gap: 0; }
.ck-banka-ayrinti dt { color: var(--sonuk-aa); }
.ck-banka-ayrinti dd { margin: 0; overflow-wrap: anywhere; }
.ko-sonuc-banka { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .ck-toplam { gap: 12px; }
  .ck-yan { gap: 12px 20px; }
  .ck-ana .sayi { font-size: var(--yazi-2xl); }
  .ck-sayfa button { min-height: 44px; }
  .ck-cip { min-height: 44px; }
  .ck-banka { min-width: 0; max-width: none; }
  .ck-banka-ayrinti summary { min-height: 44px; }
}

/* ===== Tedarikçi Stok Sorgula (stoksorgu.js) ===== */
#sayfa-stoksorgu .suzgec-satiri #ss-ebat { flex: 1 1 220px; }
.ss-ust { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin: 4px 0 12px; }
.ss-fiyat { font-family: var(--mono); white-space: nowrap; }
.ss-not { font-size: var(--yazi-xs, 11px); color: var(--sonuk-aa); font-family: var(--govde); }
.ss-stok-var { color: var(--yesil); font-weight: 600; }
.ss-stok-yok { color: var(--sonuk-aa); }
.ss-sonuk { color: var(--sonuk-aa); }
.ss-sirali { cursor: pointer; user-select: none; white-space: nowrap; }
.ss-sirali:hover { color: var(--mavi); }
.ss-hata { color: var(--kirmizi); }
.ss-yeniden { margin-top: 12px; text-align: center; }

/* ===== Raporlar (raporlar.js, 2026-10-15) — gün sonu · satış · kâr · tahsilat · transfer =====
   Kalıplar mevcut: kart başı + dönem seçici, .ck-toplam özeti, .ck-sekmeler kırılımı,
   .kt-bant hata bandı. Tablolar .tablo-sar içinde (K10: telefonda kendiliğinden kart). */
.rapor .rp-alt { margin: -8px 0 14px; color: var(--sonuk-aa); }
.rp-kirilim { margin: 4px 0 12px; }
.rp-kirilim button { min-height: 40px; }
.rp-suzgec { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; }
.rp-suzgec input { flex: 1 1 260px; max-width: 420px; }
.rp-sayac { font-size: var(--yazi-sm); color: var(--sonuk-aa); white-space: nowrap; }
.rp-tablo .rp-ad { font-weight: 600; }
.rp-kod { font-family: var(--mono); font-size: 11px; color: var(--sonuk-aa); }
.rp-gun { font-family: var(--mono); font-size: 10px; color: var(--sonuk-aa); margin-left: 2px; }
.rp-eksi { color: var(--kirmizi); }
.rp-tablo tfoot td { font-weight: 700; background: rgba(37, 53, 71, .04); }
.rp-soluk { opacity: .5; transition: opacity .2s ease-out; }
.rp-not { margin: 12px 0 0; }
.rp-bilgi { margin: 0 0 10px; font-size: var(--yazi-sm); color: var(--sonuk-aa); }
.rp-bolum + .rp-bolum { margin-top: 22px; }
.rp-bolum h3 { font-size: 14px; margin: 0 0 8px; }
.rp-bolum h3 .adet { font-family: var(--mono); font-weight: 400; color: var(--sonuk-aa); margin-left: 4px; }
.rp-tur { font-weight: 600; white-space: nowrap; }
.rapor .ck-yan dd .rp-eksi { font-family: var(--mono); }
/* Katmanlı pencere başlığı: ‹ Geri · iz + başlık · Excel · PDF · Kapat */
.rk-ust { flex-wrap: wrap; }
.rk-baslik-kap { flex: 1; min-width: 0; }
.panel .rk-baslik-kap h2 { margin: 0; outline: none; }
.rk-iz { font-size: var(--yazi-xs); color: var(--sonuk-aa); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-iz:empty { display: none; }
#rk-geri { font-weight: 700; }
@media (max-width: 760px) {
  .rp-kirilim button { min-height: 44px; flex: 1 1 auto; }
  .rp-suzgec { flex-wrap: wrap; }
  .rp-suzgec input { max-width: none; }
  .rk-ust .rk-baslik-kap { flex: 1 1 100%; order: -1; }
  .rk-ust button.mini { flex: 1; min-height: 44px; }
}
.rp-tarih { white-space: nowrap; }
@media (max-width: 760px) {
  .rapor .kart-basi .donem-sec { flex: 1 1 100%; }
  .rapor .kart-basi .donem-sec .donem-dugme { width: 100%; justify-content: space-between; }
}
/* Raporlar — eleştirmen + kullanıcı gözü düzeltmeleri (2026-10-15) */
.rp-tablo.sik { font-size: 12px; }
.rp-tablo.sik td, .rp-tablo.sik th { padding-left: 6px; padding-right: 6px; }
.rp-kod, .rp-gun { font-size: 11.5px; }
.rp-devam { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 10px; font-size: var(--yazi-sm); color: var(--sonuk-aa); }
.rp-kisayol { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.rp-kisayol a { border: 1px solid var(--cizgi); border-radius: 8px; padding: 6px 12px; min-height: 36px;
  display: inline-flex; align-items: center; background: var(--beyaz); color: var(--lacivert); font-weight: 600; font-size: 13px; }
.rp-kisayol a:hover { background: rgba(37, 53, 71, .05); }
.rp-bolum-basi { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.rp-bolum-basi h3 { flex: 1; margin: 0; }
.rp-bolum { scroll-margin-top: 8px; }
.rp-tablo tr.tiklanir-satir:focus-visible { outline: 2px solid var(--mavi); outline-offset: -2px; }
@media (max-width: 760px) {
  /* Kart başlığı hep sola yaslı (rapor ve katman kartları aynı) */
  .rp-tablo td.kart-basligi, .rp-tablo td.kart-basligi > div, .rp-tablo td.kart-basligi .rp-ad { text-align: left; }
  .rp-kisayol a, .rp-bolum-basi button.mini { min-height: 44px; flex: 1; justify-content: center; }
}
.rapor [data-rp-hata] { margin-bottom: 16px; }

/* Stok Sorgula marka süzgeci: sarılan çerçeveli düğmeler + sonuç sayısı (2026-10-15 — tek şeritte
   30+ marka sağdan kesiliyordu). Düğme kalıbı .ck-sekmeler. */
.ss-markalar { margin: 4px 0 12px; }
.ss-markalar button { min-height: 36px; padding: 6px 12px; font-size: 13px; font-weight: 600; }
.ss-markalar button .adet { font-family: var(--mono); font-size: 11.5px; font-weight: 400; color: var(--sonuk-aa); margin-left: 2px; }
.ss-markalar button.etkin .adet { color: var(--mavi); }
.ss-markalar .ss-marka-sec { display: none; }
@media (max-width: 760px) {
  .ss-markalar button[data-marka] { display: none; }
  .ss-markalar .ss-marka-sec { display: block; width: 100%; min-height: 44px; }
}