/* ==========================================================================
   Neds E-Ticaret — Yönetim Paneli Tasarım Sistemi
   ========================================================================== */

:root {
  --yan-genislik: 250px;
  --ust-yukseklik: 60px;
  --sayfa-bosluk: 14px;

  /* Zemin ve yüzeyler — düz, cam yok */
  --zemin: #f1f2f4;
  --kart: #ffffff;
  --kart-alt: #f7f8f9;
  --kenarlik: #e7e9ec;
  --kenarlik-koyu: #d6dae0;

  /* Metin */
  --metin: #14161a;
  --metin-orta: #5b6470;
  --metin-silik: #99a1ac;

  /* Kömür vurgu: etkin menü hapı, birincil düğme, koyu kart */
  --komur: #17191d;
  --komur-2: #23262b;
  --komur-metin: #ffffff;

  /* Bağlantı ve odak rengi */
  --birincil: #1f6feb;
  --birincil-koyu: #1a5fd0;
  --birincil-acik: #eaf2ff;

  --basari: #0f8a52;
  --basari-acik: #e6f6ee;
  --uyari: #b7791f;
  --uyari-acik: #fdf6e3;
  --tehlike: #c3372b;
  --tehlike-acik: #fdecea;
  --bilgi: #0e7490;
  --bilgi-acik: #e5f6fa;
  --mor: #6d3fd4;
  --mor-acik: #f0eaff;

  /* Yan menü artık açık renkli yüzen panel */
  --yan-zemin: #ffffff;
  --yan-zemin-2: #f4f5f7;
  --yan-metin: #5b6470;
  --yan-metin-aktif: #ffffff;

  /* Gölgeler yumuşak ve alçak; sertlik yerine derinlik */
  --golge-sm: 0 1px 2px rgba(20, 22, 26, .04);
  --golge: 0 1px 2px rgba(20, 22, 26, .04), 0 10px 28px -16px rgba(20, 22, 26, .18);
  --golge-lg: 0 18px 48px -20px rgba(20, 22, 26, .26);

  /* Köşeler belirgin biçimde yuvarlak */
  --yaricap: 18px;
  --yaricap-sm: 10px;
  --yaricap-lg: 24px;

  --gecis: 160ms cubic-bezier(.4, 0, .2, 1);
}

[data-tema="koyu"] {
  --zemin: #0d1420;
  --kart: #141d2b;
  --kart-alt: #1a2433;
  --kenarlik: #26334a;
  --kenarlik-koyu: #35455f;
  --metin: #e6ecf3;
  --metin-orta: #9fb0c4;
  --metin-silik: #6f8298;
  --birincil-acik: #16273f;
  --basari-acik: #10291d;
  --uyari-acik: #2b2312;
  --tehlike-acik: #2d1614;
  --bilgi-acik: #0e2730;
  --mor-acik: #1f1838;
  --golge: 0 1px 3px rgba(0, 0, 0, .5), 0 8px 24px -10px rgba(0, 0, 0, .6);

  /* Yan menü koyu temada da beyaz kalıyordu: zemin #ffffff,
     üzerindeki mağaza adı ise --metin (#e6ecf3). Beyaz üstünde
     beyaza yakın yazı okunmuyordu. Yüzen panel fikri duruyor,
     yalnız yüzeyi koyu temanın kart rengine çekiliyor. */
  --yan-zemin: #141d2b;
  --yan-zemin-2: #1e293b;
  --yan-metin: #9fb0c4;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4, h5 { margin: 0; font-weight: 650; line-height: 1.25; letter-spacing: -.01em; }
h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
h4 { font-size: 14px; }

p { margin: 0 0 10px; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--birincil); color: #fff; }

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

/* ---------------------------------------------------------------- Düzen */

.panel { display: flex; min-height: 100vh; gap: var(--sayfa-bosluk); padding: var(--sayfa-bosluk); }

.yan-menu {
  width: var(--yan-genislik);
  background: var(--yan-zemin);
  color: var(--yan-metin);
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: var(--sayfa-bosluk) auto var(--sayfa-bosluk) var(--sayfa-bosluk);
  z-index: 40;
  border: 1px solid var(--kenarlik);
  border-radius: var(--yaricap-lg);
  box-shadow: var(--golge-sm);
  overflow: hidden;
  transition: transform var(--gecis);
}

.yan-menu__logo {
  height: var(--ust-yukseklik);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  flex: none;
  padding-top: 6px;
}

.yan-menu__logo strong { color: var(--metin); font-size: 16px; letter-spacing: -.02em; }
.yan-menu__logo small { display: block; font-size: 10.5px; color: var(--metin-silik); letter-spacing: .06em; text-transform: uppercase; }

.yan-menu__mark {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  background: var(--komur);
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 14px;
}

/* Marka yazısı. Yan menü açık temada beyaz, koyu temada lacivert
   zeminde duruyor; yazının siyah ve beyaz sürümü temaya göre
   değişiyor. Oran 5,34:1, genişlik yükseklikten çıkıyor. */
.marka-kilit {
  display: block;
  height: 21px;
  width: auto;
}

.marka-kilit--ak { display: none; }

[data-tema="koyu"] .marka-kilit--kara { display: none; }
[data-tema="koyu"] .marka-kilit--ak { display: block; }

.yan-menu__govde { flex: 1; overflow-y: auto; padding: 12px 10px 24px; scrollbar-width: thin; }
.yan-menu__govde::-webkit-scrollbar { width: 6px; }
.yan-menu__govde::-webkit-scrollbar-thumb { background: var(--kenarlik-koyu); border-radius: 3px; }

.yan-grup { margin-bottom: 4px; }
.yan-grup__baslik {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--metin-silik); padding: 16px 12px 6px; font-weight: 600;
}

.yan-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 999px; color: var(--yan-metin);
  font-size: 13.5px; text-decoration: none; transition: background var(--gecis), color var(--gecis);
  position: relative;
}
.yan-link:hover { background: var(--yan-zemin-2); color: var(--metin); text-decoration: none; }
.yan-link.aktif { background: var(--komur); color: var(--komur-metin); font-weight: 600; }
/* Kömür zemin koyu temada yan menü yüzeyiyle neredeyse aynı;
   hangi sayfada olunduğu seçilemiyordu. */
[data-tema="koyu"] .yan-link.aktif { background: var(--birincil); }
.yan-link.aktif .ico { opacity: 1; }
.yan-link .ico { width: 17px; height: 17px; flex: none; opacity: .8; }
.yan-link__rozet {
  margin-left: auto; background: var(--tehlike); color: #fff;
  font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 999px; min-width: 18px; text-align: center;
}
.yan-link.aktif .yan-link__rozet { background: rgba(255, 255, 255, .22); }

.yan-alt-menu { margin: 2px 0 6px 27px; padding-left: 12px; border-left: 1px solid var(--kenarlik); display: none; }
.yan-alt-menu.acik { display: block; }
.yan-alt-menu a { display: block; padding: 6px 10px; border-radius: 999px; font-size: 12.8px; color: var(--metin-orta); }
.yan-alt-menu a:hover { color: var(--metin); background: var(--yan-zemin-2); text-decoration: none; }
.yan-alt-menu a.aktif { color: var(--metin); font-weight: 600; background: var(--yan-zemin-2); }

.yan-menu__alt { padding: 12px; border-top: 1px solid var(--kenarlik); flex: none; }
.yan-paket {
  background: var(--yan-zemin-2); border-radius: var(--yaricap-sm); padding: 12px;
  font-size: 12px; color: var(--metin-orta);
}
.yan-paket strong { color: var(--metin); display: block; font-size: 12.5px; margin-bottom: 3px; }
.yan-paket__cubuk { height: 5px; background: var(--kenarlik); border-radius: 999px; margin: 8px 0 5px; overflow: hidden; }
.yan-paket__dolu { height: 100%; background: var(--komur); border-radius: 999px; }

/* ---------------------------------------------------------------- İçerik */

.icerik {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sayfa-bosluk);
  margin-left: calc(var(--yan-genislik) + var(--sayfa-bosluk));
}

.ust-bar {
  height: var(--ust-yukseklik);
  background: var(--kart);
  border: 1px solid var(--kenarlik);
  border-radius: var(--yaricap);
  box-shadow: var(--golge-sm);
  display: flex; align-items: center; gap: 14px;
  padding: 0 16px; position: sticky; top: var(--sayfa-bosluk); z-index: 30;
}

.ust-bar__ara { flex: 1; max-width: 460px; position: relative; }
.ust-bar__ara input {
  width: 100%; height: 36px; padding: 0 12px 0 34px;
  border: 1px solid var(--kenarlik); border-radius: 8px;
  background: var(--kart-alt); color: var(--metin); font-size: 13.5px;
}
.ust-bar__ara input:focus { outline: none; border-color: var(--birincil); background: var(--kart); }
.ust-bar__ara .ico { position: absolute; left: 10px; top: 9px; width: 17px; height: 17px; color: var(--metin-silik); }
.ust-bar__ara kbd {
  position: absolute; right: 8px; top: 8px; font-size: 10.5px; color: var(--metin-silik);
  border: 1px solid var(--kenarlik); border-radius: 4px; padding: 1px 5px; background: var(--kart);
}

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

.ikon-dugme {
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 8px; border: 1px solid transparent; background: transparent;
  color: var(--metin-orta); cursor: pointer; position: relative; transition: var(--gecis);
}
.ikon-dugme:hover { background: var(--kart-alt); border-color: var(--kenarlik); color: var(--metin); }
.ikon-dugme .ico { width: 18px; height: 18px; }
.ikon-dugme__nokta {
  position: absolute; top: 6px; right: 6px; width: 7px; height: 7px;
  background: var(--tehlike); border-radius: 50%; border: 2px solid var(--kart);
}

.kullanici-dugme {
  display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px;
  border-radius: 999px; border: 1px solid var(--kenarlik); background: var(--kart);
  cursor: pointer; color: var(--metin); font-size: 13px;
}
.kullanici-dugme:hover { background: var(--kart-alt); }
.avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, #2f7ef7, #6d3fd4); color: #fff;
  display: grid; place-items: center; font-size: 11.5px; font-weight: 700;
}
.avatar--lg { width: 40px; height: 40px; font-size: 14px; }

.sayfa { padding: 24px; flex: 1; }
.sayfa__genis { max-width: 100%; }

.sayfa-basligi {
  display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  margin-bottom: 20px;
}
.sayfa-basligi__metin { flex: 1; min-width: 220px; }
.sayfa-basligi p { color: var(--metin-orta); font-size: 13.5px; margin: 4px 0 0; }
.sayfa-basligi__eylem { display: flex; gap: 8px; flex-wrap: wrap; }

/* Uzun sayfayı bölen ara başlık: sayfa başlığından küçük, kart
   başlığından büyük. Çapa bağlantısı hedefi olduğu için üstünde
   nefes payı var. */
.bolum-basligi {
  font-size: 16px; font-weight: 600; letter-spacing: -.01em;
  margin: 30px 0 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--kenarlik);
  /* Üst çubuk içeriğin üzerinde duruyor; çapa hedefi altında
     kalmasın diye çubuk yüksekliği kadar pay bırakılıyor. */
  scroll-margin-top: calc(var(--ust-yukseklik) + 34px);
}

.kirinti { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--metin-silik); margin-bottom: 6px; }
.kirinti a { color: var(--metin-silik); }
.kirinti a:hover { color: var(--birincil); }

/* ---------------------------------------------------------------- Kart */

.kart {
  background: var(--kart); border: 1px solid var(--kenarlik);
  border-radius: var(--yaricap); box-shadow: var(--golge-sm);
}

/* Kömür kart — panodaki birincil ölçüm bloğu için */
.kart--komur {
  background: var(--komur); border-color: var(--komur); color: #fff;
}
.kart--komur .kart__baslik { color: #fff; border-bottom-color: rgba(255, 255, 255, .12); }
.kart--komur .metin-silik, .kart--komur .kucuk { color: rgba(255, 255, 255, .62); }
.kart__baslik {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 18px; border-bottom: 1px solid var(--kenarlik);
}
.kart__baslik h3 { flex: 1; min-width: 140px; }
.kart__baslik-eylem { display: flex; gap: 6px; align-items: center; }
.kart__govde { padding: 18px; }
.kart__govde--sifir { padding: 0; }
.kart__alt { padding: 12px 18px; border-top: 1px solid var(--kenarlik); background: var(--kart-alt); border-radius: 0 0 var(--yaricap) var(--yaricap); }

.izgara { display: grid; gap: 16px; }
.izgara--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.izgara--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.izgara--4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.izgara--5 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.izgara--yan { grid-template-columns: minmax(0, 2.1fr) minmax(280px, 1fr); align-items: start; }
@media (max-width: 1100px) { .izgara--yan { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Metrik */

.metrik {
  background: var(--kart); border: 1px solid var(--kenarlik); border-radius: var(--yaricap);
  padding: 16px 18px; box-shadow: var(--golge-sm); position: relative; overflow: hidden;
}
.metrik__ust { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.metrik__etiket { font-size: 12.5px; color: var(--metin-orta); font-weight: 500; }
.metrik__ikon {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  background: var(--birincil-acik); color: var(--birincil); margin-left: auto;
}
.metrik__ikon .ico { width: 16px; height: 16px; }
.metrik__deger { font-size: 25px; font-weight: 700; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.metrik__alt { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--metin-silik); }

.degisim { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; font-size: 12px; }
.degisim--up { color: var(--basari); }
.degisim--down { color: var(--tehlike); }
.degisim--flat { color: var(--metin-silik); }

/* ---------------------------------------------------------------- Tablo */

/* Izgara ve esnek çocukların varsayılan min-width'i "auto"dur; bu yüzden
   içeriklerinden küçülmeyi reddederler. Sonuç: .tablo-sarma kaydırmak
   yerine kabını genişletir ve tüm sayfa yatay kayar. Dar ekranın en
   kritik düzeltmesi bu. */
.izgara > *,
.kart,
.metrik,
.sayfa,
.kart__govde,
.esnek > * { min-width: 0; }

.tablo-sarma { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

table.tablo { width: 100%; border-collapse: collapse; font-size: 13.4px; }
table.tablo th {
  text-align: left; font-weight: 600; font-size: 11.5px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--metin-silik);
  padding: 10px 14px; border-bottom: 1px solid var(--kenarlik);
  background: var(--kart-alt); white-space: nowrap; position: sticky; top: 0; z-index: 2;
}
table.tablo th:first-child, table.tablo td:first-child { padding-left: 18px; }
table.tablo th, table.tablo td { text-align: left; }
table.tablo th.sag, table.tablo td.sag { text-align: right; }
table.tablo th.sol, table.tablo td.sol { text-align: left; }
table.tablo th.orta, table.tablo td.orta { text-align: center; }
table.tablo td { padding: 11px 14px; border-bottom: 1px solid var(--kenarlik); vertical-align: middle; }
table.tablo tbody tr:hover td { background: var(--kart-alt); }
table.tablo tbody tr:last-child td { border-bottom: none; }
table.tablo .sayi { font-variant-numeric: tabular-nums; white-space: nowrap; }
table.tablo a.baglanti { color: var(--metin); font-weight: 550; }
table.tablo a.baglanti:hover { color: var(--birincil); }

.satir-urun { display: flex; align-items: center; gap: 10px; text-align: left; }
.satir-urun img, .satir-urun .gorsel-yok {
  width: 38px; height: 38px; border-radius: 7px; object-fit: cover; flex: none;
  background: var(--kart-alt); border: 1px solid var(--kenarlik);
}
.satir-urun .gorsel-yok { display: grid; place-items: center; color: var(--metin-silik); font-size: 10px; }
.satir-urun__ad { font-weight: 550; }
.satir-urun__alt { font-size: 11.8px; color: var(--metin-silik); }

/* ---------------------------------------------------------------- Rozet */

.rozet {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px; font-size: 11.6px; font-weight: 600;
  background: var(--kart-alt); color: var(--metin-orta); white-space: nowrap;
  border: 1px solid var(--kenarlik);
}
.rozet--basari { background: var(--basari-acik); color: var(--basari); border-color: transparent; }
.rozet--uyari { background: var(--uyari-acik); color: var(--uyari); border-color: transparent; }
.rozet--tehlike { background: var(--tehlike-acik); color: var(--tehlike); border-color: transparent; }
.rozet--bilgi { background: var(--bilgi-acik); color: var(--bilgi); border-color: transparent; }
.rozet--mor { background: var(--mor-acik); color: var(--mor); border-color: transparent; }
.rozet--birincil { background: var(--birincil-acik); color: var(--birincil); border-color: transparent; }
.rozet--notr { background: var(--kart-alt); color: var(--metin-orta); }
.rozet__nokta { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Form içi bölüm başlığı — uzun formları gruplamak için. */
.ayirac-baslik {
  margin: 22px 0 12px; padding-top: 16px; border-top: 1px solid var(--kenarlik);
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--metin-silik);
}
.ayirac-baslik:first-child { margin-top: 0; padding-top: 0; border-top: none; }

/* ---------------------------------------------------------------- Düğme */

.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--kenarlik);
  background: var(--kart); color: var(--metin); font-size: 13.5px; font-weight: 550;
  cursor: pointer; transition: var(--gecis); font-family: inherit; text-decoration: none;
  white-space: nowrap;
}
.dugme:hover { background: var(--kart-alt); border-color: var(--kenarlik-koyu); text-decoration: none; }
.dugme:active { transform: translateY(1px); }
.dugme .ico { width: 16px; height: 16px; }
.dugme--birincil { background: var(--birincil); border-color: var(--birincil); color: #fff; }
.dugme--birincil:hover { background: var(--birincil-koyu); border-color: var(--birincil-koyu); }
.dugme--basari { background: var(--basari); border-color: var(--basari); color: #fff; }
.dugme--basari:hover { filter: brightness(1.08); }
.dugme--tehlike { background: var(--tehlike); border-color: var(--tehlike); color: #fff; }
.dugme--tehlike:hover { filter: brightness(1.08); }
.dugme--sade { border-color: transparent; background: transparent; }
.dugme--sade:hover { background: var(--kart-alt); }
.dugme--kucuk { height: 30px; padding: 0 10px; font-size: 12.6px; border-radius: 7px; }
.dugme--buyuk { height: 42px; padding: 0 20px; font-size: 15px; }
.dugme--tam { width: 100%; }
.dugme[disabled], .dugme.pasif { opacity: .55; pointer-events: none; }

.dugme-grup { display: inline-flex; }
.dugme-grup .dugme { border-radius: 0; margin-left: -1px; }
.dugme-grup .dugme:first-child { border-radius: 8px 0 0 8px; margin-left: 0; }
.dugme-grup .dugme:last-child { border-radius: 0 8px 8px 0; }
.dugme-grup .dugme.aktif { background: var(--birincil); border-color: var(--birincil); color: #fff; z-index: 1; }

/* ---------------------------------------------------------------- Form */

.alan { margin-bottom: 16px; }
.alan__etiket { display: block; font-size: 12.8px; font-weight: 600; margin-bottom: 6px; color: var(--metin); }
.alan__etiket .zorunlu { color: var(--tehlike); }
.alan__ipucu { font-size: 12px; color: var(--metin-silik); margin-top: 5px; }
.alan__hata { font-size: 12px; color: var(--tehlike); margin-top: 5px; }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=tel], input[type=url], input[type=date], input[type=datetime-local],
input[type=time], input[type=search], select, textarea {
  width: 100%; min-height: 38px; padding: 8px 11px;
  border: 1px solid var(--kenarlik); border-radius: 8px;
  background: var(--kart); color: var(--metin);
  font-size: 13.8px; font-family: inherit; transition: var(--gecis);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--birincil); box-shadow: 0 0 0 3px rgba(31, 111, 235, .12);
}
input::placeholder, textarea::placeholder { color: var(--metin-silik); }
input[disabled], select[disabled], textarea[disabled] { background: var(--kart-alt); color: var(--metin-silik); }
textarea { min-height: 96px; resize: vertical; line-height: 1.6; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a99a8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px;
  padding-right: 32px;
}

.onay { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; font-size: 13.4px; margin-bottom: 9px; }
.onay input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--birincil); flex: none; }
.onay span { flex: 1; }
.onay small { display: block; color: var(--metin-silik); font-size: 12px; }

.anahtar { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.anahtar input { position: absolute; opacity: 0; width: 0; height: 0; }
.anahtar__kutu {
  width: 38px; height: 22px; border-radius: 999px; background: var(--kenarlik-koyu);
  position: relative; transition: var(--gecis); flex: none;
}
.anahtar__kutu::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  background: #fff; border-radius: 50%; transition: var(--gecis); box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.anahtar input:checked + .anahtar__kutu { background: var(--birincil); }
.anahtar input:checked + .anahtar__kutu::after { transform: translateX(16px); }

.alan-satir { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.girdi-grup { display: flex; }
.girdi-grup input { border-radius: 8px 0 0 8px; }
.girdi-grup__ek {
  display: grid; place-items: center; padding: 0 12px; font-size: 13px;
  background: var(--kart-alt); border: 1px solid var(--kenarlik); border-left: none;
  border-radius: 0 8px 8px 0; color: var(--metin-orta); white-space: nowrap;
}

/* ---------------------------------------------------------------- Uyarı */

.uyari-kutu {
  display: flex; gap: 11px; padding: 12px 15px; border-radius: var(--yaricap);
  font-size: 13.4px; margin-bottom: 16px; border: 1px solid transparent; align-items: flex-start;
}
.uyari-kutu .ico { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.uyari-kutu--basari { background: var(--basari-acik); color: var(--basari); }
.uyari-kutu--uyari { background: var(--uyari-acik); color: var(--uyari); }
.uyari-kutu--tehlike { background: var(--tehlike-acik); color: var(--tehlike); }
.uyari-kutu--bilgi { background: var(--bilgi-acik); color: var(--bilgi); }
.uyari-kutu strong { display: block; margin-bottom: 2px; }

/* ---------------------------------------------------------------- Boş durum */

.bos-durum { padding: 52px 24px; text-align: center; color: var(--metin-orta); }
.bos-durum__ikon {
  width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 14px;
  background: var(--kart-alt); display: grid; place-items: center; color: var(--metin-silik);
}
.bos-durum__ikon .ico { width: 26px; height: 26px; }
.bos-durum h3 { margin-bottom: 6px; }
.bos-durum p { max-width: 380px; margin: 0 auto 16px; font-size: 13.4px; }

/* ---------------------------------------------------------------- Sekme */

.sekmeler { display: flex; gap: 2px; border-bottom: 1px solid var(--kenarlik); margin-bottom: 20px; overflow-x: auto; }
.sekmeler a {
  padding: 10px 14px; font-size: 13.5px; color: var(--metin-orta); font-weight: 550;
  border-bottom: 2px solid transparent; white-space: nowrap; text-decoration: none;
}
.sekmeler a:hover { color: var(--metin); text-decoration: none; }
.sekmeler a.aktif { color: var(--birincil); border-bottom-color: var(--birincil); }

/* ---------------------------------------------------------------- Filtre çubuğu */

.filtre-cubugu {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  padding: 12px 18px; border-bottom: 1px solid var(--kenarlik); background: var(--kart-alt);
  border-radius: var(--yaricap) var(--yaricap) 0 0;
}
.filtre-cubugu input, .filtre-cubugu select { min-height: 34px; font-size: 13px; width: auto; min-width: 150px; }
.filtre-cubugu .buyu { flex: 1; min-width: 200px; }

/* ---------------------------------------------------------------- Sayfalama */

.sayfalama { display: flex; align-items: center; gap: 4px; justify-content: center; flex-wrap: wrap; }
.sayfalama a, .sayfalama span {
  min-width: 34px; height: 34px; display: grid; place-items: center; padding: 0 9px;
  border: 1px solid var(--kenarlik); border-radius: 7px; font-size: 13px;
  color: var(--metin-orta); background: var(--kart); text-decoration: none;
}
.sayfalama a:hover { background: var(--kart-alt); color: var(--metin); text-decoration: none; }
.sayfalama .aktif { background: var(--birincil); border-color: var(--birincil); color: #fff; font-weight: 600; }
.sayfalama .bosluk { border: none; background: none; }

/* ---------------------------------------------------------------- Açılır menü */

.acilir { position: relative; }
.acilir__panel {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 210px; z-index: 50;
  background: var(--kart); border: 1px solid var(--kenarlik); border-radius: var(--yaricap);
  box-shadow: var(--golge-lg); padding: 6px; display: none;
}
.acilir__panel.acik { display: block; }
.acilir__panel--genis { min-width: 330px; }
.acilir__panel a, .acilir__panel button {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px;
  border-radius: 7px; font-size: 13.4px; color: var(--metin); background: none; border: none;
  cursor: pointer; font-family: inherit; text-align: left; text-decoration: none;
}
.acilir__panel a:hover, .acilir__panel button:hover { background: var(--kart-alt); text-decoration: none; }
.acilir__panel .ayirac { height: 1px; background: var(--kenarlik); margin: 5px 0; }
.acilir__panel .baslik { padding: 8px 10px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--metin-silik); font-weight: 600; }

/* ---------------------------------------------------------------- Modal */

.modal-perde {
  position: fixed; inset: 0; background: rgba(11, 18, 30, .55); backdrop-filter: blur(2px);
  z-index: 100; display: none; align-items: center; justify-content: center; padding: 20px;
}
.modal-perde.acik { display: flex; }
.modal {
  background: var(--kart); border-radius: var(--yaricap-lg); box-shadow: var(--golge-lg);
  width: 100%; max-width: 560px; max-height: 90vh; display: flex; flex-direction: column;
}
.modal--genis { max-width: 860px; }
.modal__baslik { padding: 18px 22px; border-bottom: 1px solid var(--kenarlik); display: flex; align-items: center; gap: 12px; }
.modal__baslik h3 { flex: 1; }
.modal__govde { padding: 22px; overflow-y: auto; }
.modal__alt { padding: 14px 22px; border-top: 1px solid var(--kenarlik); display: flex; gap: 8px; justify-content: flex-end; background: var(--kart-alt); border-radius: 0 0 var(--yaricap-lg) var(--yaricap-lg); }

/* ---------------------------------------------------------------- Grafik */

.grafik { width: 100%; height: 260px; }
.grafik-aciklama { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--metin-orta); margin-top: 10px; }
.grafik-aciklama i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-left: 5px; }

.mini-cubuk { display: flex; align-items: flex-end; gap: 2px; height: 34px; }
.mini-cubuk i { flex: 1; background: var(--birincil-acik); border-radius: 2px 2px 0 0; min-height: 2px; }
.mini-cubuk i.son { background: var(--birincil); }

/* ---------------------------------------------------------------- Liste öğesi */

.liste-oge {
  display: flex; align-items: center; gap: 12px; padding: 12px 18px;
  border-bottom: 1px solid var(--kenarlik);
}
.liste-oge:last-child { border-bottom: none; }
.liste-oge:hover { background: var(--kart-alt); }
.liste-oge__govde { flex: 1; min-width: 0; }
.liste-oge__baslik { font-weight: 550; font-size: 13.6px; }
.liste-oge__alt { font-size: 12.2px; color: var(--metin-silik); margin-top: 1px; }
.liste-oge__sag { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- Zaman çizelgesi */

.zaman-cizelge { position: relative; padding-left: 22px; }
.zaman-cizelge::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--kenarlik); }
.zaman-oge { position: relative; padding-bottom: 18px; }
.zaman-oge::before {
  content: ""; position: absolute; left: -19px; top: 5px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--kart); border: 2px solid var(--birincil);
}
.zaman-oge__zaman { font-size: 11.8px; color: var(--metin-silik); }
.zaman-oge__baslik { font-size: 13.4px; font-weight: 550; }
.zaman-oge__metin { font-size: 12.8px; color: var(--metin-orta); }

/* ---------------------------------------------------------------- İlerleme */

.ilerleme { height: 6px; background: var(--kenarlik); border-radius: 3px; overflow: hidden; }
.ilerleme i { display: block; height: 100%; background: var(--birincil); border-radius: 3px; transition: width .5s ease; }
.ilerleme--basari i { background: var(--basari); }
.ilerleme--uyari i { background: var(--uyari); }
.ilerleme--tehlike i { background: var(--tehlike); }

/* ---------------------------------------------------------------- Yardımcılar */

.gizle { display: none !important; }
.sadece-mobil { display: none; }
.metin-orta { color: var(--metin-orta); }
.metin-silik { color: var(--metin-silik); }
.metin-basari { color: var(--basari); }
.metin-tehlike { color: var(--tehlike); }
.metin-uyari { color: var(--uyari); }
.kucuk { font-size: 12.4px; }
.kalin { font-weight: 650; }
.sayi { font-variant-numeric: tabular-nums; }
.tek-satir { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.esnek { display: flex; align-items: center; gap: 8px; }
.esnek--ara { justify-content: space-between; }
.esnek--sar { flex-wrap: wrap; }
.esnek--dikey { flex-direction: column; align-items: stretch; }
.bosluk-yok { margin: 0 !important; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }

/* Satır içi SVG ikonlar — varsayılan boyut zorunlu, aksi halde SVG tüm alanı kaplar */
.ico { display: inline-block; vertical-align: middle; width: 17px; height: 17px; flex: none; }
.giris-ozellik .ico { width: 19px; height: 19px; }
.bos-durum__ikon .ico, .metrik__ikon .ico { width: inherit; }
.uyari-kutu .ico { width: 18px; height: 18px; }
.rozet .ico { width: 14px; height: 14px; }
.dugme--kucuk .ico { width: 14px; height: 14px; }
.dugme--buyuk .ico { width: 19px; height: 19px; }
.yan-link > .ico { width: 17px; height: 17px; }
.ok .ico { width: 14px; height: 14px; transition: transform 160ms; }

/* ---------------------------------------------------------------- Giriş sayfası */

.giris-sayfa {
  min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr;
  background: var(--kart);
}
.giris-gorsel {
  background: linear-gradient(150deg, #101a29 0%, #1c2f4d 55%, #2f1c4d 100%);
  color: #fff; padding: 56px; display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.giris-gorsel::after {
  content: ""; position: absolute; inset: auto -80px -120px auto; width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(47,126,247,.45), transparent 68%); filter: blur(10px);
}
.giris-gorsel h1 { font-size: 34px; line-height: 1.2; margin-bottom: 14px; max-width: 460px; }
.giris-gorsel p { color: #a9b6c6; font-size: 15px; max-width: 420px; }
.giris-ozellik { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 16px; position: relative; z-index: 1; }
.giris-ozellik .ico { color: #4f9cff; margin-top: 2px; flex: none; }
.giris-ozellik strong { display: block; font-size: 14px; }
.giris-ozellik span { font-size: 13px; color: #8fa0b5; }
.giris-form { display: grid; place-items: center; padding: 40px 24px; }
.giris-form__ic { width: 100%; max-width: 380px; }
@media (max-width: 900px) { .giris-sayfa { grid-template-columns: 1fr; } .giris-gorsel { display: none; } }

/* ---------------------------------------------------------------- Duyarlı */

/* Menü perdesi — dar ekranda yan menü açıkken arkayı karartır. */
.menu-perde {
  position: fixed; inset: 0; z-index: 39; display: none;
  background: rgba(11, 18, 30, .5); backdrop-filter: blur(2px);
}
.menu-perde.acik { display: block; }

@media (max-width: 1024px) {
  /* Yan menü sol kenara sabit; bu yüzden SOLA kaydırılır.
     translateX(100%) onu sağa itip ekranda bırakıyor ve sayfayı
     yatay kaydırılabilir hale getiriyordu. */
  .yan-menu {
    width: min(300px, 86vw);
    transform: translateX(calc(-100% - var(--sayfa-bosluk) - 4px));
  }
  .yan-menu.acik { transform: translateX(0); box-shadow: var(--golge-lg); }

  .icerik { margin-left: 0; }
  .sadece-mobil { display: inline-flex; }
  .sayfa { padding: 16px; }
  .ust-bar { padding: 0 12px; }
  .ust-bar__ara kbd { display: none; }

  /* Dar ekranda yan panelli düzenler tek sütuna iner. */
  .izgara--yan { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- Telefon */

@media (max-width: 720px) {
  :root { --sayfa-bosluk: 10px; }

  .panel { padding: var(--sayfa-bosluk); gap: var(--sayfa-bosluk); }
  .sayfa { padding: 14px 12px 32px; }

  /* Üst bar iki satıra iner: eylemler üstte, arama altta tam genişlikte.
     Tek satırda arama 24px'e sıkışıp kullanılamaz hale geliyordu. */
  .ust-bar {
    height: auto; min-height: var(--ust-yukseklik);
    flex-wrap: wrap; gap: 8px; padding: 9px 12px;
  }
  .ust-bar__ara { order: 3; flex: 1 0 100%; max-width: none; }
  .ust-eylem { gap: 2px; }

  /* Eylem kümesi 430px yer kaplıyordu; metinler gizlenip ikonlar kalıyor. */
  .ust-eylem .dugme--kucuk { width: 36px; padding: 0; justify-content: center; font-size: 0; gap: 0; }
  .ust-eylem .dugme--kucuk .ico { font-size: initial; }
  .kullanici-dugme .tek-satir,
  .kullanici-dugme .ico { display: none; }

  /* Açılır paneller ekrandan taşmasın. */
  .acilir__panel { position: fixed; left: 10px !important; right: 10px !important; top: auto; width: auto; min-width: 0; max-width: none; }
  .acilir__panel--genis { min-width: 0; }

  /* Izgaralar tek sütun. */
  .izgara--5, .izgara--4, .izgara--3, .izgara--2 { grid-template-columns: minmax(0, 1fr); }
  .alan-satir { grid-template-columns: minmax(0, 1fr); }

  /* Bazı ekranlar sütun genişliğini satır içi stille veriyor (gelen
     kutusu 340px, pano 220px gibi). Satır içi stil medya sorgusunu
     ezdiği için telefonda tek sütuna zorlamanın tek yolu !important. */
  .izgara[style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }

  /* Sarmalı (wrap) bir kolon esnek kapta align-items:stretch, öğeyi kabın
     değil ESNEK SATIRIN genişliğine yayar; satırın genişliği de en geniş
     içeriğe göre belirlenir. Uzun bir başlık/açıklama bu yüzden kabı
     taşırıyordu. Kolona geçerken sarmayı da kapatmak gerekiyor. */
  .sayfa-basligi { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 12px; }
  .sayfa-basligi__metin { min-width: 0; }
  .sayfa-basligi__metin > * { min-width: 0; overflow-wrap: anywhere; }
  .sayfa-basligi__eylem { width: 100%; }
  .sayfa-basligi__eylem .dugme { flex: 1; justify-content: center; }
  /* Başlık yanındaki filtre formları (tarih aralığı gibi) tam genişlikte
     sarar; tek satırda kalırsa telefonda taşıyor. */
  .sayfa-basligi__eylem form { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
  .sayfa-basligi__eylem input,
  .sayfa-basligi__eylem select { flex: 1; min-width: 120px; }

  /* .esnek genel bir yardımcı ve sarmıyor; telefonda sarmazsa yan yana
     duran alanlar kabı taşırıyor. */
  .esnek { flex-wrap: wrap; }
  .sayfa-basligi h1, .sayfa-basligi h2 { font-size: 20px; }

  .metrik__deger { font-size: 22px; }

  /* Filtre çubuğu: her alan tam genişlik, yan yana sıkışmasın. */
  .filtre-cubugu { padding: 10px 12px; gap: 8px; }
  .filtre-cubugu input,
  .filtre-cubugu select,
  .filtre-cubugu .girdi-grup,
  .filtre-cubugu .buyu { width: 100%; min-width: 0; flex: 1 0 100%; }
  /* Girdi grubu (arama kutusu + düğme) içinde de küçülebilmeli. */
  .filtre-cubugu .girdi-grup input { min-width: 0; flex: 1; }
  .filtre-cubugu .dugme { flex: 1; justify-content: center; }

  .sekmeler { margin-bottom: 14px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .sekmeler::-webkit-scrollbar { display: none; }
  .sekmeler a, .sekmeler button { white-space: nowrap; }

  .kart__baslik { padding: 12px 14px; }
  .kart__baslik h3 { min-width: 0; }
  .kart__govde { padding: 14px; }
  .kart__alt { padding: 12px 14px; }

  /* Dokunma hedefleri parmakla kullanılabilir boyuta çıkıyor. */
  .dugme { height: 40px; }
  .dugme--kucuk { height: 34px; }
  .ikon-dugme { width: 38px; height: 38px; }
  input, select, textarea { font-size: 16px; }  /* iOS otomatik yakınlaştırmasın */

  /* Modal alttan açılan sayfa olur. */
  .modal-perde { padding: 0; align-items: flex-end; }
  .modal { max-width: none; max-height: 92vh; border-radius: var(--yaricap-lg) var(--yaricap-lg) 0 0; }
  .modal__baslik { padding: 15px 16px; }
  .modal__govde { padding: 16px; }
  .modal__alt { padding: 12px 16px; border-radius: 0; }
  .modal__alt .dugme { flex: 1; justify-content: center; }

  .yardim-cekmece { width: 100vw; }
}

/* ------------------------------------------- Telefonda tablolar kart olur */

/* Yatay kaydırmalı tablo telefonda okunmuyor; her satır kendi kartına
   dönüyor ve hücreler thead başlıklarıyla etiketleniyor. Etiketler
   admin.js'teki tabloEtiketle() ile yazılıyor. */
@media (max-width: 720px) {
  table.tablo.tablo--kart,
  table.tablo.tablo--kart thead,
  table.tablo.tablo--kart tbody,
  table.tablo.tablo--kart tr,
  table.tablo.tablo--kart td { display: block; width: auto; }

  table.tablo.tablo--kart thead { display: none; }

  /* Boş tabloda da başlık gizlenir; yalnız "kayıt yok" mesajı kalır. */
  table.tablo.tablo--bos thead { display: none; }
  table.tablo.tablo--bos td { white-space: normal; }

  table.tablo.tablo--kart tbody tr {
    border: 1px solid var(--kenarlik); border-radius: var(--yaricap);
    padding: 4px 0; margin: 0 0 10px; background: var(--kart);
  }
  table.tablo.tablo--kart tbody tr:last-child { margin-bottom: 0; }
  table.tablo.tablo--kart tbody tr:hover td { background: transparent; }

  table.tablo.tablo--kart td {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--kenarlik);
    text-align: right;
  }
  table.tablo.tablo--kart td:last-child { border-bottom: none; }
  table.tablo.tablo--kart td:first-child { padding-left: 14px; }

  /* Başlık etiketi solda, değer sağda. */
  table.tablo.tablo--kart td[data-etiket]::before {
    content: attr(data-etiket);
    flex: none; text-align: left; max-width: 45%;
    font-size: 11.5px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; color: var(--metin-silik);
  }
  /* Başlığı olmayan hücreler (seçim kutusu, ürün görseli) kendi başına
     boş bir satır oluşturmasın; kartın üstünde yan yana dizilirler. */
  table.tablo.tablo--kart td:not([data-etiket]) {
    display: inline-flex; width: auto; vertical-align: middle;
    border-bottom: none; padding: 8px 6px 0 14px;
  }
  table.tablo.tablo--kart td:not([data-etiket]):empty { display: none; }

  table.tablo.tablo--kart td.tam-satir { justify-content: flex-start; text-align: left; }

  /* Uzun ürün adları taşmasın. */
  table.tablo.tablo--kart td > * { min-width: 0; }
  table.tablo.tablo--kart td .tek-satir { white-space: normal; }

  /* Boşluk içermeyen uzun değerler (e-posta, takip numarası, SKU)
     kırılamadığı için kart kenarında kesiliyordu. 'anywhere',
     'break-word'den farklı olarak en-küçük-içerik genişliğini de
     düşürür; esnek hücrenin gerçekten daralması bunu gerektiriyor. */
  table.tablo.tablo--kart td,
  table.tablo.tablo--kart td > * { overflow-wrap: anywhere; }
}

@media print {
  .yan-menu, .ust-bar, .sayfa-basligi__eylem, .filtre-cubugu, .dugme { display: none !important; }
  .icerik { margin-left: 0; }
  .kart { border: 1px solid #ddd; box-shadow: none; break-inside: avoid; }
  body { background: #fff; }
}

/* ==========================================================================
   Yardım merkezi — görselli rehberler ve yan çekmece
   ========================================================================== */

.yardim-arama { display: flex; align-items: center; gap: 10px; }
.yardim-arama .ico { color: var(--metin-silik); flex: none; }
.yardim-arama input { flex: 1; }

.yardim-kart {
  display: flex; align-items: flex-start; gap: 13px; padding: 16px;
  color: inherit; transition: var(--gecis);
}
.yardim-kart:hover { border-color: var(--birincil); box-shadow: var(--golge); }
.yardim-kart strong { display: block; font-size: 14.4px; margin-bottom: 4px; }
.yardim-kart p { font-size: 12.8px; line-height: 1.55; margin: 0 0 6px; }
.yardim-kart > .ico:last-child { color: var(--metin-silik); flex: none; margin-top: 4px; }
.yardim-kart__ikon {
  width: 36px; height: 36px; border-radius: 10px; flex: none;
  display: grid; place-items: center; background: var(--birincil-acik); color: var(--birincil);
}

.yardim-metin { font-size: 14px; line-height: 1.72; color: var(--metin-2); }
.yardim-metin p { margin: 0 0 12px; }
.yardim-metin p:last-child { margin-bottom: 0; }
.yardim-metin strong { color: var(--metin); }

.yardim-adimlar { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; }

.yardim-adim {
  background: var(--kart); border: 1px solid var(--kenarlik);
  border-radius: var(--yaricap); overflow: hidden;
}
.yardim-adim__ust { display: flex; gap: 13px; padding: 18px; align-items: flex-start; }
.yardim-adim__no {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: var(--birincil); color: #fff;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
}
.yardim-adim__ust strong { display: block; font-size: 14.6px; margin-bottom: 5px; }
.yardim-adim__ust p { font-size: 13.4px; line-height: 1.65; color: var(--metin-2); margin: 0; }

.yardim-ipucu {
  display: flex; gap: 8px; align-items: flex-start; margin-top: 10px;
  padding: 9px 12px; border-radius: 9px;
  background: var(--uyari-acik, #fff7e6); color: var(--uyari-koyu, #8a5a00);
  font-size: 12.8px; line-height: 1.55;
}
.yardim-ipucu .ico { flex: none; margin-top: 1px; }

.yardim-gorsel { margin: 0; padding: 0 18px 18px; }
.yardim-gorsel svg {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--kenarlik); border-radius: 10px; background: var(--kart-alt);
}
.yardim-gorsel figcaption {
  font-size: 12px; color: var(--metin-silik); text-align: center; margin-top: 8px;
}

/* --------------------------------------------------------- Yan çekmece */

.yardim-perde {
  position: fixed; inset: 0; background: rgba(15, 20, 32, .45);
  opacity: 0; pointer-events: none; transition: opacity .22s; z-index: 120;
}
.yardim-perde.acik { opacity: 1; pointer-events: auto; }

.yardim-cekmece {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100vw);
  background: var(--kart); border-left: 1px solid var(--kenarlik);
  box-shadow: var(--golge-lg); z-index: 121;
  transform: translateX(100%); transition: transform .26s cubic-bezier(.4, 0, .2, 1);
  display: flex; flex-direction: column;
}
.yardim-cekmece.acik { transform: translateX(0); }

.yardim-cekmece__ust {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--kenarlik); flex: none;
}
.yardim-cekmece__ust .ico { color: var(--birincil); }
.yardim-cekmece__govde { flex: 1; overflow-y: auto; padding: 18px; }

.yardim-yukleniyor { padding: 40px; text-align: center; color: var(--metin-silik); font-size: 13px; }

.yardim-gomulu h2 { font-size: 18px; margin-bottom: 4px; }
.yardim-gomulu > p { font-size: 13px; margin-bottom: 16px; }
.yardim-gomulu .yardim-metin { margin-bottom: 18px; }
.yardim-adimlar--dar .yardim-adim__ust { padding: 14px; }
.yardim-adimlar--dar .yardim-gorsel { padding: 0 14px 14px; }
.yardim-gomulu__alt { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--kenarlik); }

.yardim-ilgili {
  display: flex; align-items: center; gap: 7px; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer; padding: 9px 0;
  font-size: 13px; color: var(--metin-2); font-family: inherit;
  border-bottom: 1px solid var(--kenarlik);
}
.yardim-ilgili:hover { color: var(--birincil); }
.yardim-ilgili:last-child { border-bottom: none; }

/* Alan yanındaki küçük "Yardım al" bağlantısı */
.yardim-dugme {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 0;
  font-size: 12.2px; font-weight: 600; color: var(--birincil); font-family: inherit;
}
.yardim-dugme:hover { text-decoration: underline; }
.yardim-dugme .ico { width: 14px; height: 14px; }

.alan__etiket .yardim-dugme { margin-left: 8px; font-weight: 500; }

@media (max-width: 640px) {
  .yardim-cekmece { width: 100vw; }
}

/* ==========================================================================
   Liste, toplu işlem, varyant tablosu, görsel yükleme, SEO önizleme
   ========================================================================== */

.tablo-gorsel {
  width: 40px; height: 40px; object-fit: cover; border-radius: 7px;
  border: 1px solid var(--kenarlik); background: var(--kart-alt); display: block;
}

.toplu-cubuk {
  display: none; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px; margin-bottom: 12px; border-radius: var(--yaricap);
  background: var(--birincil-acik); border: 1px solid var(--birincil);
}
.toplu-cubuk.acik { display: flex; }
.toplu-cubuk select, .toplu-cubuk input { height: 34px; }

/* --------------------------------------------------------- Sayfalama */

.sayfalama {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 16px; border-top: 1px solid var(--kenarlik); flex-wrap: wrap;
  font-size: 13px;
}
.sayfalama__baglantilar { display: flex; align-items: center; gap: 4px; }
.sayfalama a, .sayfalama span.aktif, .sayfalama span.pasif, .sayfalama span.bosluk {
  min-width: 32px; height: 32px; padding: 0 8px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--kenarlik); font-size: 13px; font-variant-numeric: tabular-nums;
}
.sayfalama a:hover { border-color: var(--birincil); color: var(--birincil); }
.sayfalama span.aktif { background: var(--birincil); border-color: var(--birincil); color: #fff; font-weight: 650; }
.sayfalama span.pasif { opacity: .4; }
.sayfalama span.bosluk { border-color: transparent; }

/* --------------------------------------------------------- Varyant tablosu */

.tablo--varyant input[type="text"],
.tablo--varyant input[type="number"] {
  height: 32px; font-size: 13px; padding: 0 8px; width: 100%; min-width: 84px;
}
.tablo--varyant td { padding: 8px 10px; }
.tablo--varyant .sag input { text-align: right; }

/* --------------------------------------------------------- Görsel yükleme */

.gorsel-birak {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 34px 20px; border: 2px dashed var(--kenarlik); border-radius: var(--yaricap);
  background: var(--kart-alt); text-align: center; transition: var(--gecis);
}
.gorsel-birak.uzerinde { border-color: var(--birincil); background: var(--birincil-acik); }
.gorsel-birak .ico { width: 30px; height: 30px; color: var(--metin-silik); }

.gorsel-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.gorsel-oge {
  position: relative; border: 1px solid var(--kenarlik); border-radius: 10px;
  padding: 8px; background: var(--kart); display: flex; flex-direction: column; gap: 6px;
}
.gorsel-oge img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 7px; background: var(--kart-alt); }
.gorsel-oge input, .gorsel-oge select { height: 30px; font-size: 12px; padding: 0 7px; }
.gorsel-oge__kapak {
  position: absolute; top: 12px; left: 12px; background: var(--birincil); color: #fff;
  font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 5px;
}
.gorsel-oge__sil {
  position: absolute; top: 12px; right: 12px; width: 24px; height: 24px;
  border-radius: 50%; border: none; cursor: pointer;
  background: rgba(20, 24, 34, .72); color: #fff; display: grid; place-items: center;
}
.gorsel-oge__sil .ico { width: 13px; height: 13px; }

/* --------------------------------------------------------- SEO */

.seo-puan { display: flex; align-items: center; gap: 18px; }
.seo-puan__daire {
  width: 86px; height: 86px; border-radius: 50%; flex: none;
  display: grid; place-content: center; text-align: center;
  background: conic-gradient(var(--basari) calc(var(--puan) * 1%), var(--kenarlik) 0);
  position: relative;
}
.seo-puan__daire::before {
  content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--kart);
}
.seo-puan__daire strong { position: relative; font-size: 22px; line-height: 1; }
.seo-puan__daire span { position: relative; font-size: 10.5px; color: var(--metin-silik); }

.seo-bulgu { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; font-size: 13px; }
.seo-bulgu .ico { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.seo-bulgu--iyi .ico { color: var(--basari); }
.seo-bulgu--uyari .ico { color: var(--uyari); }
.seo-bulgu--hata .ico { color: var(--tehlike); }

.serp-onizleme {
  border: 1px solid var(--kenarlik); border-radius: 10px; padding: 14px;
  background: var(--kart-alt); max-width: 620px;
}
.serp-onizleme__baslik { color: #1a0dab; font-size: 17px; line-height: 1.3; margin-bottom: 3px; }
.serp-onizleme__url { color: #006621; font-size: 12.5px; margin-bottom: 4px; }
.serp-onizleme__aciklama { color: #4d5156; font-size: 13px; line-height: 1.55; }

[data-tema="koyu"] .serp-onizleme__baslik { color: #8ab4f8; }
[data-tema="koyu"] .serp-onizleme__url { color: #7cc47f; }
[data-tema="koyu"] .serp-onizleme__aciklama { color: var(--metin-2); }

/* --------------------------------------------------------- Sekmeler */

.sekmeler {
  display: flex; gap: 4px; margin-bottom: 18px; overflow-x: auto;
  border-bottom: 1px solid var(--kenarlik); padding-bottom: 0;
}
.sekmeler button {
  background: none; border: none; cursor: pointer; font-family: inherit;
  padding: 10px 16px; font-size: 13.6px; font-weight: 550; color: var(--metin-silik);
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.sekmeler button:hover { color: var(--metin); }
.sekmeler button.aktif { color: var(--birincil); border-bottom-color: var(--birincil); }

/* --------------------------------------------------------- Kanban (CRM) */

.kanban { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 12px; align-items: flex-start; }
.kanban-sutun {
  flex: 0 0 280px; background: var(--kart-alt); border: 1px solid var(--kenarlik);
  border-radius: var(--yaricap); display: flex; flex-direction: column; max-height: 72vh;
}
.kanban-sutun__ust {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 14px; border-bottom: 1px solid var(--kenarlik);
}
.kanban-sutun__ust strong { font-size: 13.4px; display: flex; align-items: center; gap: 7px; }
.kanban-sutun__nokta { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.kanban-sutun__govde { padding: 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.kanban-sutun.uzerinde { outline: 2px dashed var(--birincil); outline-offset: -3px; }

.kanban-kart {
  background: var(--kart); border: 1px solid var(--kenarlik); border-radius: 10px;
  padding: 12px; cursor: grab; display: block; color: inherit;
}
.kanban-kart:hover { box-shadow: var(--golge); }
.kanban-kart.suruklenen { opacity: .45; }
.kanban-kart strong { display: block; font-size: 13.4px; margin-bottom: 5px; }
.kanban-kart__alt { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 12px; }

/* --------------------------------------------------------- Zaman akışı (CRM) */

.akis { display: flex; flex-direction: column; }
.akis-satir { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--kenarlik); }
.akis-satir:last-child { border-bottom: none; }
.akis-ikon {
  width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--kart-alt); color: var(--metin-2);
}
.akis-ikon .ico { width: 15px; height: 15px; }
.akis-govde { flex: 1; min-width: 0; }
.akis-govde strong { font-size: 13.5px; }
.akis-govde p { font-size: 13px; color: var(--metin-2); margin: 4px 0 0; line-height: 1.6; white-space: pre-line; }

/* --------------------------------------------------------- Diğer */

.renk-kutu { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--kenarlik); display: inline-block; }

.oran-cubuk { height: 6px; background: var(--kenarlik); border-radius: 3px; overflow: hidden; }
.oran-cubuk i { display: block; height: 100%; background: var(--birincil); border-radius: 3px; }

.sektor-kart {
  display: flex; flex-direction: column; gap: 8px; padding: 16px;
  border: 1px solid var(--kenarlik); border-radius: var(--yaricap); background: var(--kart);
  transition: var(--gecis);
}
.sektor-kart:hover { border-color: var(--birincil); box-shadow: var(--golge); }
.sektor-kart.aktif { border-color: var(--birincil); box-shadow: 0 0 0 2px var(--birincil-acik); }
.sektor-kart__ikon {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: var(--birincil-acik); color: var(--birincil);
}
.sektor-kart__renkler { display: flex; gap: 4px; }
.sektor-kart__renk { width: 18px; height: 18px; border-radius: 5px; border: 1px solid rgba(0,0,0,.08); }

.pos-kart { display: flex; flex-direction: column; gap: 10px; padding: 18px; }
.pos-kart__ust { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pos-kart__ozellik { display: flex; gap: 7px; align-items: flex-start; font-size: 12.8px; color: var(--metin-2); }
.pos-kart__ozellik .ico { width: 14px; height: 14px; color: var(--basari); flex: none; margin-top: 2px; }
.pos-bilgi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px 0; border-top: 1px solid var(--kenarlik); border-bottom: 1px solid var(--kenarlik); }
.pos-bilgi div { text-align: center; }
.pos-bilgi strong { display: block; font-size: 13.5px; }
.pos-bilgi span { font-size: 11.5px; color: var(--metin-silik); }

.sss-oge { border: 1px solid var(--kenarlik); border-radius: 10px; margin-bottom: 8px; background: var(--kart); }
.sss-oge__soru {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 15px; cursor: pointer; font-weight: 600; font-size: 13.8px;
}
.sss-oge__cevap { padding: 0 15px 14px; font-size: 13.4px; line-height: 1.7; color: var(--metin-2); }

@media (max-width: 900px) {
  .seo-puan { flex-direction: column; align-items: flex-start; }
  .gorsel-izgara { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* Kategori ağacı ve varyant değer rozetleri */
.kategori-satir { display: flex; align-items: center; gap: 11px; padding: 11px 16px; border-bottom: 1px solid var(--kenarlik); position: relative; }
.kategori-satir:last-child { border-bottom: none; }
.kategori-satir:hover { background: var(--kart-alt); }
.kategori-satir__ikon { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--kart-alt); color: var(--metin-silik); flex: none; }
.kategori-satir__cizgi { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--kenarlik); }
.varyant-deger { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--kenarlik); border-radius: 8px; font-size: 13px; background: var(--kart-alt); }
.yildizlar { color: #f5a623; }

.akis-satir--ic { background: var(--uyari-acik); border-radius: 9px; padding: 12px; margin: 4px 0; }
.liste-oge--gecikmis { background: var(--tehlike-acik); }
.liste-oge__sag { display: flex; gap: 3px; align-items: center; flex: none; }

/* Panel içi arama sonuç kutusu */
.arama-sonuclar { display: none; margin-top: 6px; border: 1px solid var(--kenarlik); border-radius: 10px; background: var(--kart); max-height: 320px; overflow-y: auto; box-shadow: var(--golge); }
.arama-sonuclar.acik { display: block; }
.arama-sonuc { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--kenarlik); padding: 10px 13px; cursor: pointer; font-family: inherit; font-size: 13.2px; color: inherit; }
.arama-sonuc:last-child { border-bottom: none; }
.arama-sonuc:hover { background: var(--kart-alt); }
.arama-sonuc .metin-silik { font-size: 12px; }

/* Otomasyon adım zinciri */
.akis-zinciri { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px 0; }
.akis-adim { display: flex; gap: 8px; align-items: center; padding: 8px 11px; border: 1px solid var(--kenarlik); border-radius: 9px; background: var(--kart); }
.akis-adim__ikon { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: var(--birincil-acik); color: var(--birincil); flex: none; }
.akis-adim__ikon .ico { width: 14px; height: 14px; }
.akis-adim strong { font-size: 12.5px; display: block; }
.akis-ok { color: var(--metin-silik); display: inline-flex; }
.liste-oge--aktif { background: var(--birincil-acik); }

/* Renk paleti önizlemesi */
.palet-onizleme { border-radius: 9px; overflow: hidden; border: 1px solid var(--kenarlik); aspect-ratio: 16/10; display: flex; flex-direction: column; }
.palet-onizleme__ust { height: 18%; }
.palet-onizleme__govde { flex: 1; padding: 9px; display: flex; flex-direction: column; gap: 5px; justify-content: center; }
.palet-onizleme__satir { height: 6px; border-radius: 3px; width: 88%; }
.palet-onizleme__dugme { height: 14px; width: 46%; border-radius: 4px; margin-top: 4px; }
.mt-1 { margin-top: 8px; }

/* ---------------------------------------------------------------
   Dönüşüm hunisi ve rapor bileşenleri
--------------------------------------------------------------- */
.huni { display: flex; flex-direction: column; gap: 4px; }
.huni__adim { padding: 2px 0; }
.huni__ust { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.huni__etiket { font-size: 13.5px; font-weight: 600; }
.huni__deger { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.huni__cubuk { position: relative; height: 34px; border-radius: 9px; background: var(--kart-alt); overflow: hidden; }
.huni__cubuk > i { display: block; height: 100%; border-radius: 9px; background: linear-gradient(90deg, var(--birincil), var(--mor)); transition: width .45s cubic-bezier(.4,0,.2,1); min-width: 3px; }
.huni__oran { position: absolute; inset: 0; display: flex; align-items: center; padding-left: 12px; font-size: 12.5px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.28); font-variant-numeric: tabular-nums; }
.huni__kayip { font-size: 12px; color: var(--metin-silik); padding: 7px 0 9px 14px; border-left: 2px dashed var(--kenarlik); margin: 4px 0 4px 14px; }

.oneri-listesi { display: flex; flex-direction: column; gap: 10px; }
.oneri { padding: 12px 14px; border-radius: 10px; background: var(--kart-alt); border-left: 3px solid var(--birincil); font-size: 13.2px; line-height: 1.6; }
.oneri strong { display: block; margin-bottom: 2px; }
.oneri--uyari { background: var(--uyari-acik); border-left-color: var(--uyari); }
.oneri--tehlike { background: var(--tehlike-acik); border-left-color: var(--tehlike); }
.oneri .baglanti { white-space: nowrap; }

.kod-rozet { display: inline-block; padding: 2px 8px; border-radius: 6px; background: var(--kart-alt); border: 1px solid var(--kenarlik); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.2px; letter-spacing: .3px; }

/* ---------------------------------------------------------------
   Ayar merkezi kartları
--------------------------------------------------------------- */
.ayar-kart { display: flex; gap: 13px; align-items: flex-start; padding: 16px 17px; border: 1px solid var(--kenarlik); border-radius: 12px; background: var(--kart); color: inherit; transition: border-color .16s, box-shadow .16s, transform .16s; }
.ayar-kart:hover { text-decoration: none; border-color: var(--birincil); box-shadow: var(--golge); transform: translateY(-1px); }
.ayar-kart__ikon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--birincil-acik); color: var(--birincil); flex: none; }
.ayar-kart__ikon .ico { width: 18px; height: 18px; }
.ayar-kart__govde { flex: 1; min-width: 0; }
.ayar-kart__govde strong { display: block; font-size: 14px; margin-bottom: 3px; }
.ayar-kart__govde p { font-size: 12.5px; color: var(--metin-silik); line-height: 1.55; margin: 0 0 7px; }
.ayar-kart__ok { color: var(--metin-silik); flex: none; margin-top: 9px; }
.ayar-kart:hover .ayar-kart__ok { color: var(--birincil); }

/* Sıkışık tablo — form içi mini tablolar için */
.tablo--sik th, .tablo--sik td { padding: 6px 8px; font-size: 12.6px; }
.tablo--sik input, .tablo--sik select { padding: 5px 7px; font-size: 12.6px; }

/* Onay kutusu grupları */
.onay-liste { max-height: 200px; overflow-y: auto; padding: 9px 11px; border: 1px solid var(--kenarlik); border-radius: 9px; background: var(--kart-alt); }
.onay-liste .onay { margin-bottom: 6px; }
.onay-liste .onay:last-child { margin-bottom: 0; }
.onay-liste--yatay { display: flex; flex-wrap: wrap; gap: 4px 14px; max-height: none; }
.onay-liste--yatay .onay { margin-bottom: 0; }

/* Liste ögesi ikonu ve hızlı ekle kartı */
.liste-oge__ikon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--kart-alt); flex: none; }
.hizli-kart { display: flex; flex-direction: column; gap: 2px; align-items: center; width: 100%; padding: 13px 9px; border: 1px solid var(--kenarlik); border-radius: 10px; background: var(--kart); cursor: pointer; font-family: inherit; color: inherit; transition: border-color .15s, transform .15s; }
.hizli-kart:hover { border-color: var(--birincil); transform: translateY(-1px); }
.hizli-kart strong { font-size: 13px; }
.hizli-kart .metin-silik { font-size: 11.5px; }
.hizli-kart__bayrak { font-size: 22px; line-height: 1.2; }

/* İzin grupları */
.izin-grubu { border: 1px solid var(--kenarlik); border-radius: 10px; padding: 11px 13px; margin-bottom: 10px; background: var(--kart-alt); }
.izin-grubu__baslik { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.izin-grubu__baslik strong { font-size: 12.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--metin-silik); }
.izin-grubu .onay { margin-bottom: 5px; font-size: 12.8px; }
.izin-grubu .onay:last-child { margin-bottom: 0; }

/* Öneri butonu — tek tıkla hazır kayıt oluşturma */
.oneri-dugme { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; padding: 11px 13px; border: 1px solid var(--kenarlik); border-radius: 10px; background: var(--kart); cursor: pointer; font-family: inherit; color: inherit; text-align: left; transition: border-color .15s, background .15s; }
.oneri-dugme:hover { border-color: var(--birincil); background: var(--birincil-acik); }
.oneri-dugme strong { display: block; font-size: 13px; }
.oneri-dugme small { display: block; color: var(--metin-silik); font-size: 11.8px; margin-top: 2px; line-height: 1.5; }

/* ---------------------------------------------------------------
   Yapay Zeka Stüdyosu
--------------------------------------------------------------- */
.gizli { display: none !important; }

.yz-arac { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; text-align: left; padding: 14px; border: 1px solid var(--kenarlik); border-radius: 12px; background: var(--kart); cursor: pointer; font-family: inherit; color: inherit; transition: border-color .15s, background .15s, transform .15s; }
.yz-arac:hover { border-color: var(--birincil); transform: translateY(-1px); }
.yz-arac.aktif { border-color: var(--birincil); background: var(--birincil-acik); }
.yz-arac__ikon { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--birincil-acik); color: var(--birincil); margin-bottom: 5px; }
.yz-arac.aktif .yz-arac__ikon { background: var(--birincil); color: #fff; }
.yz-arac__ikon .ico { width: 16px; height: 16px; }
.yz-arac strong { font-size: 13.4px; }
.yz-arac small { font-size: 11.8px; color: var(--metin-silik); line-height: 1.5; }

.gorsel-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 9px; }
.gorsel-sec { padding: 0; border: 2px solid var(--kenarlik); border-radius: 10px; overflow: hidden; background: var(--kart-alt); cursor: pointer; aspect-ratio: 1; transition: border-color .15s; }
.gorsel-sec:hover { border-color: var(--birincil); }
.gorsel-sec.aktif { border-color: var(--birincil); box-shadow: 0 0 0 3px var(--birincil-acik); }
.gorsel-sec img { width: 100%; height: 100%; object-fit: cover; display: block; }

.yz-onizleme { aspect-ratio: 1; border: 1px dashed var(--kenarlik); border-radius: 11px; display: grid; place-items: center; background: var(--kart-alt); overflow: hidden; margin-bottom: 12px; }
.yz-onizleme img { max-width: 100%; max-height: 100%; object-fit: contain; }

.yz-sohbet { height: 400px; overflow-y: auto; padding: 14px; border: 1px solid var(--kenarlik); border-radius: 11px; background: var(--kart-alt); display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.yz-mesaj { max-width: 80%; padding: 10px 14px; border-radius: 13px; font-size: 13.3px; line-height: 1.62; white-space: pre-wrap; }
.yz-mesaj--asistan { align-self: flex-start; background: var(--kart); border: 1px solid var(--kenarlik); border-bottom-left-radius: 4px; }
.yz-mesaj--kullanici { align-self: flex-end; background: var(--birincil); color: #fff; border-bottom-right-radius: 4px; }
.yz-mesaj--hata { background: var(--tehlike-acik); color: var(--tehlike); border-color: transparent; }
.yz-sohbet-form { display: flex; gap: 8px; }
.yz-sohbet-form input { flex: 1; }

/* ---------------------------------------------------------------
   POS — Hızlı satış ekranı
--------------------------------------------------------------- */
.pos-duzen { display: grid; grid-template-columns: 1fr 400px; gap: 18px; align-items: start; }
@media (max-width: 1100px) { .pos-duzen { grid-template-columns: 1fr; } }

.pos-arama input { font-size: 15px; padding: 12px 14px; }

.pos-sonuclar { display: none; margin-top: 8px; border: 1px solid var(--kenarlik); border-radius: 10px; overflow: hidden; max-height: 340px; overflow-y: auto; }
.pos-sonuclar.acik { display: block; }
.pos-sonuc { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; border: none; border-bottom: 1px solid var(--kenarlik); background: var(--kart); cursor: pointer; font-family: inherit; color: inherit; text-align: left; font-size: 13.2px; }
.pos-sonuc:last-child { border-bottom: none; }
.pos-sonuc:hover { background: var(--birincil-acik); }
.pos-sonuc small { display: block; font-size: 11.6px; margin-top: 2px; }

.pos-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.pos-urun { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; padding: 10px; border: 1px solid var(--kenarlik); border-radius: 11px; background: var(--kart); cursor: pointer; font-family: inherit; color: inherit; text-align: left; transition: border-color .15s, transform .12s; }
.pos-urun:hover { border-color: var(--birincil); transform: translateY(-1px); }
.pos-urun:active { transform: scale(.98); }
.pos-urun__gorsel { width: 100%; aspect-ratio: 1; border-radius: 8px; background: var(--kart-alt); display: grid; place-items: center; overflow: hidden; color: var(--metin-silik); }
.pos-urun__gorsel img { width: 100%; height: 100%; object-fit: cover; }
.pos-urun strong { font-size: 12.5px; line-height: 1.4; }
.pos-urun__fiyat { font-size: 13.4px; font-weight: 700; color: var(--birincil); }

.pos-sepet { position: sticky; top: 76px; }
.pos-sepet-liste { max-height: 300px; overflow-y: auto; }

.pos-satir { display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-bottom: 1px solid var(--kenarlik); }
.pos-satir:last-child { border-bottom: none; }
.pos-satir__govde { flex: 1; min-width: 0; }
.pos-satir__govde strong { font-size: 12.8px; display: block; }
.pos-satir__tutar { font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }

.pos-adet { display: flex; align-items: center; gap: 2px; border: 1px solid var(--kenarlik); border-radius: 7px; overflow: hidden; flex: none; }
.pos-adet button { width: 24px; height: 26px; border: none; background: var(--kart-alt); cursor: pointer; font-size: 15px; line-height: 1; color: inherit; }
.pos-adet button:hover { background: var(--birincil-acik); color: var(--birincil); }
.pos-adet span { min-width: 28px; text-align: center; font-size: 12.8px; font-variant-numeric: tabular-nums; }

.pos-ozet { padding: 13px 18px; background: var(--kart-alt); border-top: 1px solid var(--kenarlik); border-bottom: 1px solid var(--kenarlik); }
.pos-ozet__satir { display: flex; justify-content: space-between; align-items: center; font-size: 13.2px; margin-bottom: 7px; }
.pos-ozet__satir:last-child { margin-bottom: 0; }
.pos-ozet__satir--toplam { padding-top: 9px; border-top: 1px solid var(--kenarlik); font-size: 15px; }
.pos-ozet__satir--toplam strong { font-size: 19px; color: var(--birincil); }

.pos-odemeler { display: flex; flex-wrap: wrap; gap: 5px; }
.pos-odeme { padding: 7px 12px; border: 1px solid var(--kenarlik); border-radius: 8px; background: var(--kart); cursor: pointer; font-family: inherit; font-size: 12.6px; color: inherit; }
.pos-odeme:hover { border-color: var(--birincil); }
.pos-odeme.aktif { background: var(--birincil); border-color: var(--birincil); color: #fff; }

/* Entegrasyon kartları */
.entegrasyon-kart { transition: border-color .15s, transform .15s; }
.entegrasyon-kart:hover { border-color: var(--birincil); transform: translateY(-1px); }
.entegrasyon-kart--bagli { border-color: var(--basari); }
.entegrasyon-kart__logo { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--birincil-acik); color: var(--birincil); font-weight: 700; font-size: 14px; letter-spacing: .3px; }

/* Kod bloğu */
.kod-blok { margin: 0; padding: 13px 15px; border-radius: 10px; background: var(--kart-alt); border: 1px solid var(--kenarlik); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.3px; line-height: 1.7; overflow-x: auto; white-space: pre; }

/* Filtre satırı — kart içi çok alanlı filtre formu */
.filtre-satir { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.filtre-satir .alan { margin-bottom: 0; min-width: 150px; }
.filtre-satir .dugme { min-height: 38px; }

/* KPI kutusu: etiket, büyük sayı, alt açıklama alt alta.
   Kart gövdesi varsayılan olarak satır içi akıyor; bu üç parça
   yan yana yapışık görünüyordu. */
.kart__govde > .buyuk-sayi,
.kart__govde > .metin-silik {
  display: block;
}

.buyuk-sayi {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 4px 0 2px;
  font-variant-numeric: tabular-nums;
}

.kart__govde > .metin-silik { font-size: 12.5px; }

.kart--komur .metin-silik { color: rgba(255, 255, 255, .62); }
.kart--komur .buyuk-sayi { color: var(--komur-metin); }

/* ==========================================================================
   Yenilikler — platformun yayınladığı sürüm notları
   ========================================================================== */

.zaman-akisi { display: flex; flex-direction: column; gap: 16px; }

.yenilik { position: relative; overflow: hidden; }

/* Okunmamış duyuru sol kenarından işaretlenir. */
.yenilik--yeni::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--birincil);
}

.yenilik__baslik { font-size: 19px; margin: 0 0 6px; letter-spacing: -.01em; }
.yenilik__ozet { color: var(--metin-orta); margin: 0 0 12px; font-size: 14.5px; }

.yenilik__gorsel {
  display: block; width: 100%; max-width: 100%; height: auto;
  border: 1px solid var(--kenarlik); border-radius: var(--yaricap);
  margin: 4px 0 14px; background: var(--kart-alt);
}

/* Duyuru gövdesi platform yöneticisinin yazdığı serbest HTML. */
.yenilik__govde { color: var(--metin-orta); font-size: 14px; line-height: 1.7; }
.yenilik__govde > *:first-child { margin-top: 0; }
.yenilik__govde > *:last-child { margin-bottom: 0; }
.yenilik__govde ul, .yenilik__govde ol { padding-left: 20px; margin: 10px 0; }
.yenilik__govde li { margin-bottom: 5px; }
.yenilik__govde h2, .yenilik__govde h3 { color: var(--metin); font-size: 15px; margin: 16px 0 6px; }
.yenilik__govde img { max-width: 100%; height: auto; border-radius: 8px; }
.yenilik__govde code {
  background: var(--kart-alt); border: 1px solid var(--kenarlik);
  border-radius: 5px; padding: 1px 5px; font-size: 12.5px;
}
.yenilik__govde pre { overflow-x: auto; }

/* Karşılama penceresi */
.karsilama { max-width: 560px; overflow: hidden; }
.karsilama__gorsel { display: block; width: 100%; height: auto; background: var(--kart-alt); }
.karsilama__baslik { font-size: 21px; margin: 0 0 8px; letter-spacing: -.015em; }
.karsilama__ozet { color: var(--metin-orta); margin: 0 0 14px; font-size: 14.5px; }

/* Duyuru takip tablosunda görüldü / görülmedi ayrımı */
.takip-satir--bekleyen td { color: var(--metin-silik); }

@media (max-width: 720px) {
  .yenilik__baslik { font-size: 17px; }
  .karsilama__baslik { font-size: 19px; }
}


/* ==========================================================================
   Ek hizmet kartları (sosyal medya, reklam, özel tema...)
   ========================================================================== */

.hizmet { display: flex; flex-direction: column; }
.hizmet .kart__govde { display: flex; flex-direction: column; height: 100%; }
.hizmet--one-cikan { border-color: var(--birincil); box-shadow: var(--golge); }

.hizmet__ad { font-size: 16.5px; margin: 0 0 4px; }
.hizmet__slogan { color: var(--metin-orta); font-size: 13.4px; margin: 0 0 14px; }

.hizmet__fiyat {
  font-size: 22px; font-weight: 700; letter-spacing: -.02em;
  color: var(--metin); font-variant-numeric: tabular-nums;
}

.hizmet__liste { list-style: none; padding: 0; margin: 14px 0 18px; flex: 1; }
.hizmet__liste li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13.2px; color: var(--metin-orta); margin-bottom: 7px;
}
.hizmet__liste .ico { width: 15px; height: 15px; color: var(--basari); flex: none; margin-top: 2px; }


/* ==========================================================================
   Adım kartları ve kural kutusu (referans programı, kampanya tanıtımları)
   ========================================================================== */

.adim {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
  padding: 14px; border: 1px solid var(--kenarlik);
  border-radius: var(--yaricap); background: var(--kart-alt);
}
.adim strong { font-size: 13.6px; }

.adim__no {
  display: grid; place-items: center;
  width: 24px; height: 24px; margin-bottom: 4px;
  border-radius: 50%; background: var(--birincil); color: #fff;
  font-size: 12px; font-weight: 700;
}

/* Katılım koşulları — kapalı gelir, isteyen açar. */
.kural-kutu {
  border: 1px solid var(--kenarlik); border-radius: var(--yaricap);
  padding: 12px 14px; background: var(--kart-alt);
}
.kural-kutu summary {
  cursor: pointer; font-weight: 600; font-size: 13.4px;
  color: var(--metin); list-style: none; user-select: none;
}
.kural-kutu summary::-webkit-details-marker { display: none; }
.kural-kutu summary::before { content: '▸ '; color: var(--metin-silik); }
.kural-kutu[open] summary::before { content: '▾ '; }
.kural-kutu ul { margin: 12px 0 0; padding-left: 20px; }
.kural-kutu li {
  margin-bottom: 7px; font-size: 13.2px;
  color: var(--metin-orta); line-height: 1.6;
}

/* ================================================ barkod etiketleri

   Etiket sayfası hem ekranda önizleniyor hem yazıcıya gidiyor.
   Yazdırırken paneli tamamen gizleyip yalnız etiketleri bırakıyoruz;
   ölçüler milimetre çünkü çıktı fiziksel bir kâğıda basılıyor.
================================================================== */

.etiket-sayfa {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}
.etiket-sayfa[data-sutun="1"] { grid-template-columns: minmax(0, 1fr); }
.etiket-sayfa[data-sutun="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.etiket-sayfa[data-sutun="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.etiket {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 4px;
  border: 1px dashed var(--kenarlik-koyu);
  border-radius: 4px;
  text-align: center;
  background: #fff;
  overflow: hidden;
}

.etiket__ad {
  font-size: 8.5px; line-height: 1.2; font-weight: 600;
  color: #000;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.etiket .barkod { width: 100%; height: 26px; fill: #000; display: block; }

.etiket__kod {
  font-size: 8px; letter-spacing: .08em; color: #000;
  font-variant-numeric: tabular-nums;
}

.etiket__sku { font-size: 7.5px; color: #444; }
.etiket__fiyat { font-size: 10px; font-weight: 700; color: #000; }

.barkod-hata { font-size: 8px; color: var(--tehlike); }

.satir--pasif { opacity: .55; }

@media print {
  /* Yazdırırken yalnız etiketler kalsın. */
  body * { visibility: hidden; }
  #etiket-onizleme, #etiket-onizleme * { visibility: visible; }

  #etiket-onizleme {
    position: absolute; left: 0; top: 0; width: 100%;
    gap: 0;
  }

  .etiket {
    border: none;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  @page { margin: 6mm; }
}

/* Marka rozetinin içi harf değil, Neds Digital'in "nd" işareti. */
.yan-menu__mark img {
  display: block;
  width: 100%; height: 100%;
  padding: 4px;
  object-fit: contain;
}

/* Yetkisi olmayan bağlantılar menüden düşünce başlığı boşta kalan
   grup gizlenir; yoksa altı boş bir "Pazarlama" başlığı kalıyor. */
.yan-grup:not(:has(.yan-link)) { display: none; }