/*
  File Atölyesi Etiket paneli.
  Görsel dil: yumuşak, koyu yeşil. Bütün zemin çok koyu petrol yeşili (#0d1b1b); kutular bir ton açık yeşil, yazılar krem, vurgu yumuşak
  fıstık yeşili. Gölge, gradyan ve animasyon yok; durumlar pastel tonlarda. Tek tema (bilgisayarın açık/koyu ayarından bağımsız).
  Simetri: menü üst çubuğun tam ortasında, dokuz durum kutusu eşit genişlikte, iki sütunlu bölümler eşit.
  Mobil öncelikli; 900px üstü masaüstü (liste tabloya dönüşür).
*/

@font-face { font-family: "Plex Sans"; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Plex Sans"; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0; }
@font-face { font-family: "Plex Sans"; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Plex Sans"; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-sans-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0; }
@font-face { font-family: "Plex Sans"; font-weight: 600; font-display: swap; src: url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Plex Sans"; font-weight: 600; font-display: swap; src: url(fonts/ibm-plex-sans-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0; }
@font-face { font-family: "Plex Mono"; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Plex Mono"; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-mono-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0; }
@font-face { font-family: "Plex Mono"; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Plex Mono"; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0; }
@font-face { font-family: "Plex Mono"; font-weight: 600; font-display: swap; src: url(fonts/ibm-plex-mono-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Plex Mono"; font-weight: 600; font-display: swap; src: url(fonts/ibm-plex-mono-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0; }

:root {
  /* Tek tema: çok koyu petrol yeşili (#0d1b1b) zemin, bir ton açık yeşil kutular, krem yazı, yumuşak fıstık yeşili vurgu. */
  --marka: #003032;
  --zemin: #0d1b1b;
  --ust-zemin: #091515;
  --yuzey: #132524;
  --yuzey-2: #172b2a;
  --dolgu: #1b3130;
  --cizgi: #213736;
  --cizgi-guclu: #304b49;
  --murekkep: #f1f3ea;
  --murekkep-2: #c9d5cf;
  --soluk: #8ca19c;
  --ters: #0d1b1b;

  --birincil: #c2e093;
  --birincil-2: #b2d67c;
  --birincil-yazi: #0d1b1b;
  --ikincil: #1b3130;
  --ikincil-2: #233b3a;
  --secili: #1d3a31;
  --odak: #7fae6c;

  /* Pastel durum tonları: zemin ve yazı */
  --onay: #ecc27a;      --onay-z: #2f2c1a;
  --bekle: #abc4dc;     --bekle-z: #1a2b39;
  --hazir: #c2e093;     --hazir-z: #22371f;
  --kuyruk: #8fd5cf;    --kuyruk-z: #12312f;
  --ok: #a0d6af;        --ok-z: #173326;
  --hata: #f2a596;      --hata-z: #3a231f;
  --pasif: #8ca19c;     --pasif-z: #182a29;

  --k-trendyol: #f2a35f;
  --k-hepsiburada: #f28c5a;
  --k-site: #9fd29b;
  --k-toptan: #8fc3d9;
  --k-demo: #a9adb0;

  --r: 16px;
  --r-orta: 12px;
  --r-kucuk: 10px;
  --sans: "Plex Sans", system-ui, "Segoe UI", sans-serif;
  --mono: "Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --genislik: 1320px;
  --ust: 64px;
  --alt-menu: 66px;
  --kenar: 16px;
  --gecis: 160ms ease;
  /* Satırdaki işlem düğmelerinin ortak genişliği */
  --dugme: 104px;
  color-scheme: dark;
}

/* ------------------------------------------------------------ temel */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; background: var(--zemin); color: var(--murekkep);
  font: 400 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: underline; text-decoration-color: var(--cizgi-guclu); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: currentColor; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 27px; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; text-wrap: balance; }
h2 { font-size: 16px; font-weight: 600; letter-spacing: -.005em; }
h3 { font-size: 13.5px; font-weight: 600; color: var(--murekkep-2); }
small, .soluk { color: var(--soluk); }
small { font-size: 13px; }
.mono, .sabit { font-family: var(--mono); font-variant-numeric: tabular-nums; }
code { font: 13px/1.5 var(--mono); background: var(--dolgu); border-radius: 6px; padding: 1px 6px; overflow-wrap: anywhere; }
pre { margin: 0; font: 12px/1.6 var(--mono); background: var(--yuzey-2); border: 1px solid var(--cizgi); border-radius: var(--r-kucuk); padding: 14px; overflow: auto; max-height: 420px; }
:focus-visible { outline: 3px solid var(--odak); outline-offset: 2px; }
.gizli { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.atla { position: absolute; left: 12px; top: -60px; z-index: 30; background: var(--birincil); color: var(--birincil-yazi); padding: 10px 14px; border-radius: var(--r-kucuk); font-weight: 600; }
.atla:focus { top: 10px; }
.ikon { width: 20px; height: 20px; flex: none; fill: currentColor; }
.ust-bosluk { margin-top: 12px; }
.hata-yazi { color: var(--hata); }

/* ------------------------------------------------------------ üst çubuk: marka | menü (tam ortada) | durum */
.ust-cubuk { position: sticky; top: 0; z-index: 20; height: var(--ust); background: var(--ust-zemin); border-bottom: 1px solid var(--cizgi); }
.ust-cubuk-ic {
  max-width: var(--genislik); height: 100%; margin: 0 auto; padding: 0 var(--kenar);
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px;
}
.marka { grid-column: 2; display: inline-flex; align-items: center; gap: 11px; color: var(--murekkep); text-decoration: none; white-space: nowrap; }
.marka-isaret { width: 36px; height: 24px; flex: none; fill: var(--birincil); }
.marka-yazi { display: inline-flex; align-items: baseline; gap: 6px; }
.marka-yazi b { font-size: 15.5px; font-weight: 600; letter-spacing: -.005em; }
.marka-yazi span { font-size: 15.5px; font-weight: 400; color: var(--soluk); }
.test-rozeti { font: 600 11px/1 var(--sans); background: var(--onay-z); color: var(--onay); padding: 5px 9px; border-radius: 8px; }

.ana-menu { display: none; grid-column: 2; gap: 4px; padding: 4px; border-radius: 14px; background: var(--dolgu); }
.ana-menu a {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 136px; height: 38px; padding: 0 16px;
  border-radius: 10px; color: var(--murekkep-2); font-size: 14px; font-weight: 500; text-decoration: none;
  transition: color var(--gecis), background var(--gecis);
}
.ana-menu a .ikon { width: 17px; height: 17px; color: var(--soluk); }
.ana-menu a:hover { color: var(--murekkep); background: var(--ikincil); }
.ana-menu a[aria-current="page"] { color: var(--murekkep); background: var(--ikincil-2); }
.ana-menu a[aria-current="page"] .ikon { color: var(--birincil); }

.ust-sag { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; }
.sistem {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0; height: 32px; padding: 0 12px; border-radius: 10px;
  background: var(--ok-z); color: var(--ok); text-decoration: none; font-size: 13px; font-weight: 500;
}
.sistem.sorun { background: var(--hata-z); color: var(--hata); }
.sistem.durdu { background: var(--onay-z); color: var(--onay); }
.sistem .durum-isareti { width: 7px; height: 7px; flex: none; border-radius: 50%; background: currentColor; }
.sistem .durum-metni { display: none; white-space: nowrap; }
.sistem .yazici-bilgi { display: none; opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 170px; }
/* Hesap: baş harf, ad ve ok; tıklanınca giriş yapılan hesap, rolü ve "Çıkış yap" açılır. Durum ve zil gibi 32px yükseklik. */
.hesap-menu { position: relative; display: none; }
.hesap-menu > summary {
  display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px 0 5px; border-radius: 10px;
  list-style: none; cursor: pointer; background: var(--dolgu); color: var(--murekkep); font-size: 13px; font-weight: 500;
}
.hesap-menu > summary::-webkit-details-marker { display: none; }
.hesap-menu > summary:hover, .hesap-menu[open] > summary { background: var(--ikincil-2); }
.hesap-menu .bas-harf {
  display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 7px;
  background: color-mix(in srgb, var(--birincil) 20%, transparent); color: var(--birincil); font: 600 12px/1 var(--sans);
}
.hesap-menu .bas-harf.buyuk { width: 40px; height: 40px; border-radius: 12px; font-size: 17px; }
.hesap-menu .ad { display: none; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hesap-menu .ok-isareti { width: 13px; height: 13px; color: var(--soluk); transition: transform var(--gecis); }
.hesap-menu[open] .ok-isareti { transform: rotate(180deg); }
.hesap-panel {
  position: absolute; right: 0; top: calc(100% + 12px); z-index: 30; display: grid; gap: 16px; width: 264px; padding: 18px;
  background: var(--yuzey); border: 1px solid var(--cizgi-guclu); border-radius: var(--r); box-shadow: 0 18px 48px rgba(0, 0, 0, .45);
}
.hesap-kimlik { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hesap-kimlik > div { min-width: 0; }
.hesap-kimlik small { display: block; font-size: 12px; }
.hesap-kimlik b { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.hesap-kimlik span:not(.bas-harf) { display: block; font-size: 12.5px; color: var(--murekkep-2); }
.hesap-panel button { width: 100%; }
.hesap-panel button .ikon { width: 17px; height: 17px; }
.hesap-panel button:hover { background: var(--hata-z); color: var(--hata); }
/* Telefonda alt menüdeki hesap: diğer düğmeler gibi simge yerinde baş harf, altında ad; panel menünün üstünde açılır. */
.alt-menu .hesap-menu { display: block; position: static; min-width: 0; }
.alt-menu .hesap-menu > summary {
  flex-direction: column; justify-content: center; gap: 3px; height: 100%; min-height: 44px; margin: 0 2px; padding: 0;
  border-radius: 12px; background: none; color: var(--soluk); font: 500 11.5px/1 var(--sans);
}
.alt-menu .hesap-menu[open] > summary { background: var(--secili); color: var(--murekkep); }
.alt-menu .hesap-menu > summary .bas-harf { width: 21px; height: 21px; border-radius: 6px; font-size: 11.5px; }
.alt-menu .hesap-menu > summary .ad { display: block; max-width: 100%; padding: 0 4px; overflow: hidden; text-overflow: ellipsis; }
/* Paneldeki "Çıkış yap" alt menü düğmesi gibi değil, normal düğme gibi */
.alt-menu .hesap-panel button {
  flex-direction: row; gap: 8px; width: 100%; min-height: 44px; margin: 0; padding: 0 18px; border-radius: var(--r-kucuk);
  background: var(--ikincil); color: var(--murekkep); font: 500 14.5px/1.2 var(--sans);
}
.alt-menu .hesap-panel button:hover, .alt-menu .hesap-panel button:active { background: var(--hata-z); color: var(--hata); }
.alt-menu .hesap-panel { position: fixed; top: auto; right: 8px; bottom: calc(var(--alt-menu) + env(safe-area-inset-bottom) + 8px); }
/* Menü alttayken: durum solda, marka ortada, zil sağda; kenarlara eşit uzaklıkta. Telefonda durum da zil gibi 36x32 kare. */
@media (max-width: 899.98px) {
  .ust-sag { display: contents; }
  .sistem { grid-column: 1; grid-row: 1; justify-self: start; }
  .zil { grid-column: 3; grid-row: 1; justify-self: end; }
}
@media (max-width: 639.98px) {
  .sistem { justify-content: center; width: 36px; padding: 0; }
}

/* ------------------------------------------------------------ alt menü (telefon) */
.alt-menu {
  position: fixed; inset: auto 0 0 0; z-index: 20; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  height: calc(var(--alt-menu) + env(safe-area-inset-bottom)); padding: 6px 8px env(safe-area-inset-bottom);
  background: var(--ust-zemin); border-top: 1px solid var(--cizgi);
}
.alt-menu form { display: contents; }
.alt-menu a, .alt-menu button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 100%; min-height: 44px; margin: 0 2px;
  border: 0; border-radius: 12px; background: none; padding: 0;
  color: var(--soluk); font: 500 11.5px/1 var(--sans); text-decoration: none; cursor: pointer;
}
.alt-menu [aria-current="page"] { color: var(--murekkep); background: var(--secili); }
.alt-menu [aria-current="page"] .ikon { color: var(--birincil); }
.alt-menu .ikon { width: 21px; height: 21px; }
.alt-menu button:hover, .alt-menu button:active { background: var(--dolgu); color: var(--murekkep); transform: none; }

/* ------------------------------------------------------------ sayfa iskeleti */
.sayfa { max-width: var(--genislik); margin: 0 auto; padding: 24px var(--kenar) calc(var(--alt-menu) + env(safe-area-inset-bottom) + 32px); }
.sayfa-basi { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; margin-bottom: 22px; }
.sayfa-basi:has(.bildirimler) { align-items: start; }
.sayfa-basi .alt-baslik { margin-top: 4px; color: var(--soluk); font-size: 14px; }
.sayfa-basi > .eylem-satiri { grid-column: 1 / -1; }
.geri { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px; font-size: 13.5px; color: var(--soluk); text-decoration: none; }
.geri:hover { color: var(--murekkep); }
.geri .ikon { width: 16px; height: 16px; }
.baslik-satiri { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.eylem-satiri { display: flex; flex-wrap: wrap; gap: 8px; }
.bolum { margin-top: 20px; }
.kart { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r); padding: 20px; min-width: 0; }
.bolum-basligi {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--cizgi);
}
.bolum-basligi small { font-size: 13px; }
.iki-sutun { display: grid; gap: 20px; }
.iki-sutun > * { min-width: 0; }

/* ------------------------------------------------------------ butonlar ve form */
button, .buton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border: 0; border-radius: var(--r-kucuk); background: var(--birincil); color: var(--birincil-yazi);
  font: 500 14.5px/1.2 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background var(--gecis), color var(--gecis);
  -webkit-tap-highlight-color: transparent;
}
button:hover, .buton:hover { background: var(--birincil-2); }
button:active, .buton:active { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
button.ikincil, .buton.ikincil { background: var(--ikincil); color: var(--murekkep); }
button.ikincil:hover, .buton.ikincil:hover { background: var(--ikincil-2); }
button.sade { background: transparent; color: var(--murekkep-2); padding: 0 10px; }
button.sade:hover { background: var(--dolgu); color: var(--murekkep); }
button.tehlike { background: var(--hata-z); color: var(--hata); }
button.tehlike:hover { background: color-mix(in srgb, var(--hata) 18%, var(--hata-z)); }
button.kucuk, .buton.kucuk { min-height: 36px; padding: 0 14px; font-size: 13.5px; border-radius: 9px; }
.buton-satiri { display: flex; flex-wrap: wrap; gap: 8px; }
form { margin: 0; }
.kontrol-dugmesi { width: 44px; padding: 0; }
.kontrol-dugmesi span { display: none; }

input, select, textarea {
  width: 100%; min-height: 44px; padding: 0 14px; font: 400 16px/1.3 var(--sans); color: var(--murekkep);
  background: var(--yuzey-2); border: 1px solid var(--cizgi-guclu); border-radius: var(--r-kucuk);
  transition: border-color var(--gecis), box-shadow var(--gecis), background var(--gecis);
}
textarea { padding: 11px 14px; line-height: 1.45; resize: vertical; min-height: 76px; }
input::placeholder, textarea::placeholder { color: var(--soluk); }
input:hover, select:hover, textarea:hover { border-color: var(--soluk); }
input:focus, select:focus, textarea:focus { outline: none; background: var(--yuzey); border-color: var(--birincil); box-shadow: 0 0 0 3px color-mix(in srgb, var(--odak) 55%, transparent); }
input[type="radio"], input[type="checkbox"] { width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; flex: none; accent-color: var(--birincil); box-shadow: none; }
.form { display: grid; gap: 16px; }
.alan { display: grid; gap: 6px; font-size: 14px; font-weight: 500; }
.alan small { font-weight: 400; }
.secenekler { display: grid; gap: 10px; }
.secenek {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 14px 16px; border: 1px solid var(--cizgi); border-radius: var(--r-orta);
  background: var(--yuzey-2); cursor: pointer; transition: border-color var(--gecis), background var(--gecis);
}
.secenek input { grid-row: span 2; margin-top: 2px; }
.secenek b { font-weight: 600; }
.secenek small { grid-column: 2; }
.secenek:hover { border-color: var(--cizgi-guclu); }
.secenek:has(input:checked) { border-color: color-mix(in srgb, var(--birincil) 45%, transparent); background: var(--secili); }
.anahtar { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--soluk); cursor: pointer; }

/* ------------------------------------------------------------ durum rozeti (yumuşak, pastel) */
.muhur {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 8px;
  font: 500 12.5px/1 var(--sans); white-space: nowrap; color: var(--murekkep-2); background: var(--dolgu);
}
.d-ONAY { color: var(--onay); background: var(--onay-z); }
.d-YENI { color: var(--bekle); background: var(--bekle-z); }
.d-ETIKET_HAZIR { color: var(--hazir); background: var(--hazir-z); font-weight: 600; }
.d-KUYRUKTA { color: var(--kuyruk); background: var(--kuyruk-z); }
.d-YAZDIRILDI { color: var(--ok); background: var(--ok-z); }
.d-HATA { color: var(--hata); background: var(--hata-z); }
.d-IPTAL, .d-YOKSAYILDI { color: var(--pasif); background: var(--pasif-z); }
.muhur.buyuk { height: 30px; padding: 0 12px; font-size: 13.5px; }
.muhur.kucuk-muhur { height: 22px; padding: 0 8px; font-size: 11.5px; vertical-align: 1px; border-radius: 7px; }
.kanal { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: var(--murekkep-2); }
.kanal::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--k-demo); }
.k-trendyol::before { background: var(--k-trendyol); }
.k-hepsiburada::before { background: var(--k-hepsiburada); }
.k-site::before { background: var(--k-site); }
.k-toptan::before { background: var(--k-toptan); }
.kapida { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 7px; background: var(--onay-z); color: var(--onay); font: 500 12px/1 var(--sans); white-space: nowrap; }

/* ------------------------------------------------------------ uyarılar
   Sayfa başlığının altında, sola yaslı, içeriği kadar geniş ve tek satır: ekranın ortasında boş bir kutu kalmaz. */
.bildirimler { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0 0 16px; }
.bildirimler:not(:has(.serit, .mesaj)) { display: none; }
.sayfa-basi .bildirimler { margin: 14px 0 0; }
.serit {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; max-width: 100%;
  padding: 8px 10px 8px 14px; border-radius: var(--r-orta); background: var(--dolgu); color: var(--murekkep); font-size: 13.5px; line-height: 1.45;
}
.serit > span { flex: 0 1 auto; }
.serit.yazdir { background: var(--hazir-z); color: var(--hazir); }
.serit.yazdir b { font-size: 13.5px; }
.serit.uyari { background: var(--onay-z); color: var(--onay); }
.serit.hata { background: var(--hata-z); color: var(--hata); }
.serit.bilgi { background: var(--kuyruk-z); color: var(--kuyruk); }
.serit b { font-weight: 600; }
.serit > a { font-weight: 600; }
.serit button, .serit .buton { min-height: 30px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.serit .buton-satiri { gap: 6px; }
.serit button.ikincil, .serit .buton.ikincil { background: rgba(241, 243, 234, .08); color: inherit; }
.serit button.ikincil:hover, .serit .buton.ikincil:hover { background: rgba(241, 243, 234, .14); }
.mesaj { padding: 9px 14px; border-radius: var(--r-orta); background: var(--ok-z); color: var(--ok); font-size: 13.5px; font-weight: 500; }
.mesaj.hata { background: var(--hata-z); color: var(--hata); }

/* ------------------------------------------------------------ bildirimler
   Tek yerde: ana sayfada başlığın altındaki kart ve her sayfada üst çubuktaki zil paneli. Her bildirim eşit yükseklikte
   bir satır: renkli nokta, başlık ve açıklama, sağda tablodaki işlem düğmeleriyle aynı genişlikte düğmeler. */
.bildirim-karti { padding: 0; overflow: hidden; margin-bottom: 18px; }
.kart.bildirim-karti { padding: 0; }
.bildirim-karti-baslik { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--cizgi); background: var(--yuzey-2); }
.bildirim-karti-baslik h2 { font-size: 14px; }
.bildirim-listesi { list-style: none; margin: 0; padding: 0; }
.bildirim {
  --c: var(--soluk);
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "nokta metin" ". eylem";
  align-items: center; gap: 8px 12px; padding: 14px 16px; border-top: 1px solid var(--cizgi);
}
.bildirim:first-child { border-top: 0; }
.b-hata { --c: var(--hata); }
.b-uyari { --c: var(--onay); }
.b-bilgi { --c: var(--hazir); }
.bildirim-nokta { grid-area: nokta; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.bildirim-metin { grid-area: metin; min-width: 0; }
.bildirim-metin b { display: block; font-size: 14px; font-weight: 600; color: var(--c); }
.bildirim-metin span { display: block; margin-top: 1px; font-size: 13px; color: var(--murekkep-2); }
.bildirim-eylem { grid-area: eylem; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.bildirim-eylem > form, .bildirim-eylem > .buton { flex: none; width: var(--dugme); }
.bildirim-eylem > form > button { width: 100%; }
.bildirim-eylem button, .bildirim-eylem .buton { padding: 0 6px; font-size: 13px; }
.bildirim-yok { --c: var(--ok); display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px 16px; font-size: 13.5px; color: var(--soluk); }
/* Telefonda düğmeler satırın tamamını eşit sütunlarla doldurur: 1 düğme tam, 2 yarım, 3 üçte bir; alta kayma olmaz. */
@media (max-width: 639.98px) {
  .bildirim { grid-template-areas: "nokta metin" "eylem eylem"; row-gap: 12px; }
  .bildirim-eylem { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .bildirim-eylem > form, .bildirim-eylem > .buton { width: auto; }
  .bildirim-eylem button, .bildirim-eylem .buton { padding: 0 4px; font-size: 12.5px; }
}

/* Üst çubuktaki zil ve açılır panel */
.zil { position: relative; }
.zil > summary {
  position: relative; display: grid; place-items: center; width: 36px; height: 32px; border-radius: 10px;
  list-style: none; cursor: pointer; background: var(--dolgu); color: var(--murekkep-2);
}
.zil > summary::-webkit-details-marker { display: none; }
.zil > summary:hover, .zil[open] > summary { background: var(--ikincil-2); color: var(--murekkep); }
.zil .ikon { width: 18px; height: 18px; }
.zil-sayi {
  position: absolute; top: -6px; right: -6px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; font: 600 11px/1 var(--sans); background: var(--onay); color: var(--ters);
}
.zil-sayi.hata { background: var(--hata); }
.zil-panel {
  position: absolute; right: 0; top: calc(100% + 12px); z-index: 30; width: min(460px, calc(100vw - 32px));
  background: var(--yuzey); border: 1px solid var(--cizgi-guclu); border-radius: var(--r); overflow: hidden;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .45);
}
.zil-baslik { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--cizgi); background: var(--yuzey-2); font-size: 14px; }
.zil-baslik a { font-size: 12.5px; color: var(--soluk); }
.zil-panel .bildirim-listesi { max-height: min(70vh, 520px); overflow: auto; }

/* ------------------------------------------------------------ durum kutuları (sipariş filtresi) */
.durum-kartlari { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.durum-karti {
  --c: var(--murekkep);
  display: grid; align-content: space-between; gap: 8px; min-height: 80px; padding: 12px 14px;
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-orta); color: var(--murekkep); text-decoration: none;
  transition: background var(--gecis), border-color var(--gecis);
}
.durum-karti:hover { border-color: var(--cizgi-guclu); }
.durum-karti-ad { font-size: 12.5px; font-weight: 500; line-height: 1.3; color: var(--murekkep-2); }
.durum-karti-sayi { font: 600 24px/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--c); }
.durum-karti.bos .durum-karti-sayi { color: var(--cizgi-guclu); }
.dk-ONAY:not(.bos) { --c: var(--onay); background: var(--onay-z); border-color: transparent; }
.dk-ETIKET_HAZIR:not(.bos) { --c: var(--hazir); background: var(--hazir-z); border-color: transparent; }
.dk-HATA:not(.bos) { --c: var(--hata); background: var(--hata-z); border-color: transparent; }
.dk-KUYRUKTA:not(.bos) { --c: var(--kuyruk); }
.dk-YAZDIRILDI:not(.bos) { --c: var(--ok); }
.dk-YENI:not(.bos) { --c: var(--bekle); }
.durum-karti[aria-current="page"] { background: var(--birincil); border-color: var(--birincil); --c: var(--birincil-yazi); }
.durum-karti[aria-current="page"] .durum-karti-ad { color: var(--birincil-yazi); opacity: .85; }
.durum-karti[aria-current="page"].bos .durum-karti-sayi { color: var(--birincil-yazi); opacity: .6; }

/* ------------------------------------------------------------ sipariş listesi */
.kart.tablo-kart { padding: 0; overflow: hidden; }
.tablo-ust { display: grid; gap: 10px; padding: 14px; border-bottom: 1px solid var(--cizgi); }
/* Yoksayıldı listesinin üstünde: kaç sipariş olduğu ve "Listeden kaldır". */
.liste-eylem { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 14px; border-bottom: 1px solid var(--cizgi); background: var(--yuzey-2); }
.liste-eylem p { margin: 0; display: grid; gap: 2px; font-size: 14px; }
.liste-eylem p span { font-size: 13px; color: var(--soluk); }
/* Sayfalar: tablonun altında; solda kaçıncı siparişler, sağda eşit genişlikte sayfa düğmeleri. */
.sayfalar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 14px; border-top: 1px solid var(--cizgi); }
.sayfa-bilgi { font-size: 13px; color: var(--soluk); font-variant-numeric: tabular-nums; }
.sayfa-dugmeleri { display: flex; flex-wrap: wrap; gap: 6px; }
.sayfa-dugmeleri .buton { width: 38px; padding: 0; font-variant-numeric: tabular-nums; }
.sayfa-dugmeleri .buton[aria-current="page"] { background: var(--birincil); color: var(--birincil-yazi); }
.sayfa-bosluk { display: inline-flex; align-items: center; justify-content: center; width: 20px; color: var(--soluk); }
.arama-kutu { position: relative; }
.arama-kutu .ikon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--soluk); pointer-events: none; }
.arama-kutu input { padding-left: 42px; }

table.liste { width: 100%; border-collapse: collapse; }
table.liste, table.liste tbody { display: block; }
table.liste thead { display: none; }
table.liste tr {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center;
  padding: 16px; border-bottom: 1px solid var(--cizgi);
  grid-template-areas: "kanal durum" "siparis siparis" "alici alici" "icerik icerik" "kargo kargo" "hata hata" "zaman zaman" "eylem eylem";
}
table.liste tbody tr:last-child { border-bottom: 0; }
table.liste td { display: block; padding: 0; min-width: 0; }
td.h-kanal { grid-area: kanal; }
td.h-icerik { grid-area: icerik; margin-top: 6px; }
td.h-icerik:empty { display: none; }
.kanal.masaustu { display: none; }
.icerik-urun { display: block; font-size: 14px; }
.icerik-olcu { display: flex; align-items: flex-start; gap: 6px; margin-top: 3px; font: 500 13px/1.4 var(--mono); color: var(--murekkep-2); }
.icerik-olcu .ikon { width: 15px; height: 15px; margin-top: 2px; color: var(--soluk); }
.icerik-not { display: block; margin-top: 4px; font-size: 13px; color: var(--soluk); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icerik-not b { font-weight: 600; color: var(--murekkep-2); }
.icerik-not.ic { color: var(--murekkep-2); }
td.h-siparis { grid-area: siparis; margin-top: 2px; }
td.h-alici { grid-area: alici; }
td.h-kargo { grid-area: kargo; font-size: 13px; color: var(--soluk); }
td.h-durum { grid-area: durum; justify-self: end; }
td.h-hata { grid-area: hata; margin-top: 6px; }
td.h-hata:empty { display: none; }
td.h-zaman { grid-area: zaman; font-size: 13px; color: var(--soluk); margin-top: 8px; font-variant-numeric: tabular-nums; }
td.h-eylem { grid-area: eylem; margin-top: 12px; }
td.h-durum .not { display: none; }
.siparis-no { font: 600 15.5px/1.2 var(--mono); letter-spacing: -.01em; text-decoration: none; color: var(--murekkep); }
.siparis-no:hover { text-decoration: underline; }
.satir-ust { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.alici-adi { font-weight: 500; }
.yer { display: block; font-size: 13px; color: var(--soluk); }
td.h-kargo .takip { font-family: var(--mono); margin-left: 8px; }
.not-kutu { display: block; font-size: 13px; line-height: 1.4; padding: 8px 12px; border-radius: var(--r-kucuk); background: var(--dolgu); color: var(--murekkep-2); }
.not-kutu.hata { background: var(--hata-z); color: var(--hata); }
/* Satırdaki düğmeler: hepsi aynı genişlikte, sağa yaslı ve aralarında boşluk yok. Detay her satırda en sağda;
   genişlikler eşit olduğu için soldaki düğmeler de satırlar arasında aynı hizaya düşer. */
.eylemler { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.eylemler > form, .eylemler > .buton { flex: none; width: var(--dugme); }
.eylemler > form > button { width: 100%; }
.eylemler button, .eylemler .buton { padding: 0 6px; font-size: 13px; }
.yazici-bilgisi { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.4; color: var(--soluk); white-space: nowrap; }
.yazici-bilgisi b { display: block; font-weight: 600; color: var(--murekkep-2); }
/* Grup başlığı: Bekleyenler / İşleme alınanlar / Basılanlar / Yoksayılan ve iptal */
table.liste tr.grup-basligi { --g: var(--pasif); --gz: var(--pasif-z); display: block; padding: 0; border-bottom: 1px solid var(--cizgi); background: var(--gz); }
table.liste tr.grup-bekleyen { --g: var(--onay); --gz: var(--onay-z); }
table.liste tr.grup-islenen { --g: var(--kuyruk); --gz: var(--kuyruk-z); }
table.liste tr.grup-basilan { --g: var(--ok); --gz: var(--ok-z); }
tr.grup-basligi th { box-shadow: inset 3px 0 0 var(--g); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; padding: 12px 16px; text-align: left; font-weight: 400; }
.grup-adi { font-size: 14px; font-weight: 600; color: var(--g); }
.grup-aciklama { grid-column: 1 / -1; grid-row: 2; font-size: 12.5px; color: var(--soluk); }
.grup-sayi { grid-column: 2; grid-row: 1; min-width: 26px; padding: 2px 8px; border-radius: 7px; background: color-mix(in srgb, var(--g) 20%, transparent); font: 600 12px/1.4 var(--sans); text-align: center; color: var(--g); }
tr.bos-satir { display: block; border-bottom: 0; }
.bos-durum { padding: 56px 16px; margin: 0 auto; color: var(--soluk); max-width: 52ch; text-align: center; }
.bos-durum b { display: block; margin-bottom: 6px; color: var(--murekkep); font-size: 17px; font-weight: 600; }
.bos-durum p { margin-top: 18px; }

/* İş listesi (depo sayfası) */
.kart:not(.tablo-kart) > table.liste tr { padding-left: 0; padding-right: 0; }
.kart:not(.tablo-kart) > table.liste { margin-bottom: -16px; }
table.liste.isler tr { grid-template-areas: "is durum" "zaman zaman" "hata hata"; }
td.h-is { grid-area: is; font-weight: 500; }
td.h-is small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--soluk); }
td.h-is-zaman { grid-area: zaman; font-size: 13px; color: var(--soluk); margin-top: 4px; font-variant-numeric: tabular-nums; }
td.h-is-zaman span { display: inline-block; margin-right: 14px; }

/* ------------------------------------------------------------ yazdırma kaydı
   Telefonda her kayıt bir blok ve her alan "Ad: değer" satırı; 1024px ve üstünde tablo. */
.tablo-baslik { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tablo-baslik h2 { margin: 0; }
.kayit-tablosu { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.kayit-tablosu thead { display: none; }
.kayit-tablosu tbody, .kayit-tablosu tr { display: block; }
.kayit-tablosu tr { padding: 12px 16px; border-bottom: 1px solid var(--cizgi); }
.kayit-tablosu tbody tr:last-child { border-bottom: 0; }
.kayit-tablosu td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 3px 0; text-align: right; }
.kayit-tablosu td::before { content: attr(data-etiket); flex: none; color: var(--soluk); text-align: left; font: 400 13.5px/1.5 var(--sans); }
.kayit-tablosu td b { font-weight: 600; }
.kayit-tablosu .kayit-mesaj { display: block; margin-top: 4px; font-size: 12px; }
.kayit-tablosu tr.bos-satir td { display: block; }
.kayit-tablosu tr.bos-satir td::before { content: none; }
.gun-secimi { display: flex; align-items: center; gap: 8px; }
.gun-secimi input { width: auto; min-width: 150px; }
.gun-secimi .buton { width: 44px; padding: 0; font-size: 18px; }
.buton.pasif { opacity: .35; pointer-events: none; }
.kayit-ozet { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 18px; }
.ozet-karti { display: grid; gap: 4px; padding: 16px 18px; }
.ozet-ad { font-size: 13px; font-weight: 600; color: var(--murekkep-2); }
.ozet-sayi { font: 600 26px/1.1 var(--sans); font-variant-numeric: tabular-nums; }
.ozet-alt { font-size: 12.5px; color: var(--soluk); }

/* ------------------------------------------------------------ açılır bölümler, ayarlar */
details.katla > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 40px;
  font-weight: 600; font-size: 16px;
}
details.katla > summary::-webkit-details-marker { display: none; }
details.katla > summary .ozet { margin-left: auto; font-weight: 400; font-size: 13px; color: var(--soluk); }
details.katla > summary::after {
  content: ""; width: 9px; height: 9px; margin: 0 6px 4px auto; border-right: 2px solid var(--soluk); border-bottom: 2px solid var(--soluk);
  transform: rotate(45deg); transition: transform var(--gecis);
}
details.katla > summary:has(.ozet)::after { margin-left: 12px; }
details.katla[open] > summary::after { transform: rotate(-135deg); margin-bottom: -4px; }
details.katla[open] > summary { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--cizgi); }
.katla-ic { padding-bottom: 4px; }
.katla-ic h3 { margin: 18px 0 8px; }
.katla-ic h3:first-child { margin-top: 0; }
.kanal-listesi { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.kanal-listesi li { display: grid; gap: 4px; }
.olaylar { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow: auto; font-size: 13px; }
.olaylar li { display: grid; grid-template-columns: 9.5em 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--cizgi); }
.olaylar li:last-child { border-bottom: 0; }
.olaylar time { font: 12px/1.6 var(--mono); color: var(--soluk); }
.olaylar .s-WARNING span { color: var(--onay); }
.olaylar .s-ERROR span { color: var(--hata); }
.kullanici-listesi, .ajan-listesi { list-style: none; margin: 0; padding: 0; }
.kullanici-listesi li, .ajan-listesi li { padding: 14px 0; border-bottom: 1px solid var(--cizgi); }
.kullanici-listesi li:first-child, .ajan-listesi li:first-child { padding-top: 0; }
.kullanici-listesi li:last-child, .ajan-listesi li:last-child { border-bottom: 0; }
.ajan-listesi .alanlar { margin-top: 12px; }
.kullanici-ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kullanici-ust b { font-size: 15px; }
.kullanici-ust small { display: block; margin-top: 3px; }
.kural-listesi { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
/* Her satır: yazıcı | o yazıcıdan çıkacak ürünler | Sil. Telefonda Sil yazıcının yanında, ürünler altta. */
.kural {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "yazici sil" "kelimeler kelimeler";
  align-items: end; gap: 10px; padding: 14px; border-radius: var(--r-orta); background: var(--yuzey-2); border: 1px solid var(--cizgi);
}
.kural-yazici { grid-area: yazici; }
.kural-kelimeler { grid-area: kelimeler; }
/* Yazıcının durumu satırın altında tam genişlikte; yeni (kaydedilmemiş) satırda yok, boş satır da açılmaz. */
.kural-durum { grid-column: 1 / -1; }
.yazici-durumu { --c: var(--soluk); display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 500; color: var(--c); }
.yazici-durumu .nokta { width: 8px; height: 8px; flex: none; border-radius: 50%; background: currentColor; }
.yazici-durumu.y-bagli { --c: var(--ok); }
.yazici-durumu.y-cevrimdisi { --c: var(--onay); }
.yazici-durumu.y-yok { --c: var(--hata); }
button.kural-sil { grid-area: sil; width: var(--dugme); padding: 0 12px; background: var(--dolgu); color: var(--murekkep-2); font-size: 14px; }
button.kural-sil:hover { background: var(--hata-z); color: var(--hata); }
button.kural-sil .ikon { width: 16px; height: 16px; }
/* Ekle: listenin altında, satırlarla aynı genişlikte kesikli çerçeve; ne eklediği yazar. */
button.kural-ekle {
  /* Formun 16px aralığı yerine satırlar arasındaki 10px: liste ile tek parça görünür. */
  flex-wrap: wrap; column-gap: 10px; row-gap: 2px; width: 100%; margin-top: -6px; padding: 10px 16px; white-space: normal; text-align: center;
  border: 1px dashed var(--cizgi-guclu); border-radius: var(--r-orta); background: transparent; color: var(--murekkep); font-size: 14px;
}
button.kural-ekle:hover { border-color: var(--birincil); background: var(--dolgu); }
button.kural-ekle .ikon { width: 16px; height: 16px; color: var(--birincil); }
button.kural-ekle b { font-weight: 600; }
button.kural-ekle span { flex-basis: 100%; font-size: 13px; font-weight: 400; color: var(--soluk); }
/* Toptan siparişleri kartı toptanın açık mavisine çalar: Etiket yazıcıları kartından ayrı olduğu ilk bakışta belli olur. */
.kart.toptan-karti {
  background: color-mix(in srgb, var(--k-toptan) 18%, var(--yuzey)); border-color: color-mix(in srgb, var(--k-toptan) 55%, var(--cizgi));
  --soluk: #a4b6b0; /* açık zeminde açıklamalar okunur kalsın (en az 4.5:1) */
}
.toptan-karti .kural { background: color-mix(in srgb, var(--k-toptan) 24%, var(--yuzey-2)); border-color: color-mix(in srgb, var(--k-toptan) 36%, var(--cizgi)); }
.toptan-karti button.kural-ekle { border-color: color-mix(in srgb, var(--k-toptan) 60%, var(--cizgi-guclu)); }
.toptan-karti h2 { display: flex; align-items: center; gap: 8px; color: var(--k-toptan); }
.toptan-karti h2 .ikon { width: 18px; height: 18px; }
.satir-form { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.satir-form .alan { flex: 1 1 240px; }
details.sifre-degistir > summary {
  list-style: none; display: inline-flex; align-items: center; min-height: 36px; cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--murekkep-2); text-decoration: underline; text-decoration-color: var(--cizgi-guclu); text-underline-offset: 3px;
}
details.sifre-degistir > summary::-webkit-details-marker { display: none; }
details.sifre-degistir[open] > summary { margin-bottom: 8px; }
.kullanici-ekle { align-self: start; padding: 18px; background: var(--yuzey-2); border: 1px solid var(--cizgi); border-radius: var(--r-orta); }
.ara-baslik { margin: 20px 0 8px; }
.bolum-basligi + .ara-baslik { margin-top: 0; }
.kart > p.soluk { margin-bottom: 14px; }
.adimlar { margin: 0; padding-left: 22px; display: grid; gap: 10px; }
.durum-buyuk { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }

/* ------------------------------------------------------------ bilgi listeleri ve etiket önizleme */
.alanlar { display: grid; grid-template-columns: 1fr; gap: 2px 20px; margin: 0; }
.alanlar dt { margin-top: 12px; font-size: 13px; color: var(--soluk); }
.alanlar dt:first-child { margin-top: 0; }
.alanlar dd { margin: 0; overflow-wrap: anywhere; }
.etiket-onizleme { border: 1.5px dashed var(--cizgi-guclu); border-radius: var(--r-orta); padding: 18px; background: var(--yuzey-2); }
.etiket-onizleme .kim { font-size: 12.5px; font-weight: 500; color: var(--soluk); }
.etiket-onizleme .ad { margin-top: 6px; font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.etiket-onizleme .adres { margin-top: 6px; color: var(--murekkep-2); max-width: 46ch; }
.etiket-onizleme .il { margin-top: 8px; font-size: 16px; font-weight: 600; }
.etiket-onizleme .tel { margin-top: 6px; font-family: var(--mono); color: var(--murekkep-2); }
.etiket-onizleme .alt { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--cizgi); display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }
.urunler { list-style: none; margin: 0; padding: 0; }
.urunler li { display: grid; grid-template-columns: 3em 1fr; gap: 8px; padding: 14px 0; }
.urunler li:first-child { padding-top: 0; }
.urunler li + li { border-top: 1px solid var(--cizgi); }
.urunler .adet { display: grid; place-items: center; width: 34px; height: 28px; border-radius: 8px; background: var(--dolgu); font: 600 13.5px/1 var(--mono); }
.urun-ad { font-weight: 500; }
.olculer { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 8px 0 6px; padding: 10px 14px; background: var(--yuzey-2); border: 1px solid var(--cizgi); border-radius: var(--r-kucuk); }
.olculer dt { font-size: 13px; color: var(--soluk); }
.olculer dd { margin: 0; font: 600 14px/1.4 var(--mono); overflow-wrap: anywhere; }
.musteri-notu { margin-bottom: 14px; padding: 12px 14px; border-radius: var(--r-kucuk); background: var(--onay-z); color: var(--onay); }
.musteri-notu b { display: block; font-size: 12.5px; margin-bottom: 2px; }
.musteri-notu p { white-space: pre-line; color: var(--murekkep); }
.not-formu { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 18px; }
.not-formu button { justify-self: start; }
.notlar { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.notlar li { padding: 10px 14px; border-radius: var(--r-kucuk); background: var(--yuzey-2); border: 1px solid var(--cizgi); }
.not-ust { font-size: 12.5px; color: var(--soluk); }
.not-ust b { color: var(--murekkep-2); font-weight: 600; margin-left: 4px; }
.not-metni { margin-top: 2px; white-space: pre-line; overflow-wrap: anywhere; }

/* ------------------------------------------------------------ giriş: tam ortada */
.sayfa:has(.giris-sayfasi) { padding: 0; max-width: none; }
.giris-sayfasi { min-height: 100dvh; display: grid; place-items: center; align-content: center; gap: 18px; padding: 24px 16px; }
.giris-kutu { width: 100%; max-width: 390px; padding: 34px 30px 30px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 22px; }
.giris-marka { display: grid; justify-items: center; gap: 12px; margin-bottom: 26px; text-align: center; }
.giris-marka .marka-isaret { width: 60px; height: 40px; }
.giris-marka .marka-yazi { flex-direction: column; align-items: center; gap: 2px; }
.giris-marka .marka-yazi b, .giris-marka .marka-yazi span { font-size: 19px; }
.giris-kutu h1 { font-size: 15px; font-weight: 500; color: var(--soluk); text-align: center; }
.giris-kutu button { width: 100%; }
.giris-alt { font-size: 12.5px; color: var(--soluk); }

/* ------------------------------------------------------------ 640px ve üstü */
@media (min-width: 640px) {
  :root { --kenar: 24px; }
  .sayfa-basi > .eylem-satiri { grid-column: auto; }
  .bildirim-karti .bildirim { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "nokta metin eylem"; min-height: 66px; padding: 12px 24px; }
  .bildirim-karti-baslik, .bildirim-karti .bildirim-yok { padding-left: 24px; padding-right: 24px; }
  .kontrol-dugmesi { width: auto; padding: 0 18px; }
  .kontrol-dugmesi span { display: inline; }
  .tablo-ust { grid-template-columns: minmax(0, 1fr) 240px; padding: 16px 20px; }
  .alanlar { grid-template-columns: 11em 1fr; gap: 12px 20px; }
  .alanlar dt, .alanlar dt:first-child { margin-top: 1px; }
  .kart { padding: 24px; }
  .kart:not(.tablo-kart) > table.liste { margin-bottom: -20px; }
  .durum-kartlari { gap: 12px; }
  .durum-karti { min-height: 88px; padding: 14px 16px; }
  .durum-karti-ad { font-size: 13px; }
  .durum-karti-sayi { font-size: 27px; }
  .sistem .durum-metni { display: inline; }
}

/* ------------------------------------------------------------ masaüstü */
@media (min-width: 900px) {
  :root { --alt-menu: 0px; --ust: 68px; }
  body { font-size: 14.5px; }
  h1 { font-size: 29px; }
  .alt-menu { display: none; }
  .marka { grid-column: 1; justify-self: start; }
  .ana-menu { display: flex; }
  .ana-menu a { min-width: 0; }
  .ana-menu a .ikon { display: none; }
  .hesap-menu { display: block; }
  .sistem .durum-metni { display: none; }
  .sayfa { padding-top: 32px; padding-bottom: 56px; }
  button, .buton { min-height: 40px; }
  button.kucuk, .buton.kucuk { min-height: 34px; }
  input, select, button.kural-sil { min-height: 42px; font-size: 14.5px; }
  .kural { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; grid-template-areas: "yazici kelimeler sil"; gap: 10px 16px; }
  .iki-sutun { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .bolum { margin-top: 24px; }
}

/* Liste 1024px ve üstünde tabloya dönüşür (900-1023px arası telefon düzenindeki kart satırları kalır) */
@media (min-width: 1024px) {
  table.liste { display: table; }
  table.liste thead { display: table-header-group; }
  table.liste tbody { display: table-row-group; }
  table.liste tr { display: table-row; padding: 0; }
  table.liste th, table.liste td { display: table-cell; padding: 15px 10px; border-bottom: 1px solid var(--cizgi); vertical-align: middle; text-align: left; margin: 0; }
  table.liste tbody tr:last-child td { border-bottom: 0; }
  table.liste th { padding-top: 11px; padding-bottom: 11px; background: var(--yuzey-2); font-size: 12.5px; font-weight: 500; color: var(--soluk); white-space: nowrap; }
  .tablo-kart table.liste th:first-child, .tablo-kart table.liste td:first-child { padding-left: 24px; }
  .tablo-kart table.liste th:last-child, .tablo-kart table.liste td:last-child { padding-right: 24px; }
  .tablo-kart table.liste th:last-child { text-align: right; }
  .kart:not(.tablo-kart) > table.liste th:first-child, .kart:not(.tablo-kart) > table.liste td:first-child { padding-left: 0; }
  .kart:not(.tablo-kart) > table.liste th:last-child, .kart:not(.tablo-kart) > table.liste td:last-child { padding-right: 0; }
  .kart:not(.tablo-kart) > table.liste th { background: transparent; }
  table.liste tbody tr { transition: background var(--gecis); }
  table.liste tbody tr:hover { background: var(--yuzey-2); }
  td.h-hata, td.h-kanal { display: none !important; }
  .kanal.masaustu { display: flex; margin-bottom: 4px; }
  table.liste td.h-alici { min-width: 150px; }
  td.h-zaman { white-space: nowrap; }
  table.liste td.h-icerik { margin: 0; max-width: 320px; }
  td.h-icerik:empty { display: table-cell; }
  /* Not satırı sütunu genişletmez: hücrenin genişliğine uyar, taşan kısım … ile kısalır */
  td.h-icerik .icerik-not { width: 0; min-width: 100%; }
  td.h-durum .not { display: block; max-width: 210px; margin-top: 6px; font-size: 12.5px; line-height: 1.35; color: var(--soluk); }
  td.h-durum .not.hata { color: var(--hata); }
  td.h-kargo .takip { display: block; margin-left: 0; }
  table.liste td.h-eylem { width: 1%; }

  tr.bos-satir td { display: table-cell; }
  table.liste tr.grup-basligi { display: table-row; }
  .tablo-kart table.liste tr.grup-basligi th { display: table-cell; padding: 12px 24px; text-align: left; background: var(--gz); border-bottom: 1px solid var(--cizgi); font: inherit; letter-spacing: 0; text-transform: none; white-space: normal; }
  tr.grup-basligi th > * { vertical-align: baseline; }
  .grup-aciklama { margin-left: 10px; }
  .grup-sayi { float: right; }
  td.h-is-zaman span { display: block; }
  .tablo-kart th:nth-child(4), .tablo-kart th:nth-child(6), .tablo-kart td.h-kargo, .tablo-kart td.h-zaman { display: none; }
  .tablo-kart table.liste td { padding-left: 8px; padding-right: 8px; }
}

@media (min-width: 1024px) {
  .kayit-tablosu { display: table; }
  .kayit-tablosu thead { display: table-header-group; }
  .kayit-tablosu tbody { display: table-row-group; }
  .kayit-tablosu tr { display: table-row; padding: 0; }
  .kayit-tablosu th, .kayit-tablosu td { display: table-cell; padding: 12px 10px; border-bottom: 1px solid var(--cizgi); text-align: left; vertical-align: middle; }
  .kayit-tablosu td::before { content: none; }
  .kayit-tablosu th { padding-top: 11px; padding-bottom: 11px; background: var(--yuzey-2); font-size: 12.5px; font-weight: 500; color: var(--soluk); white-space: nowrap; }
  .kayit-tablosu th:first-child, .kayit-tablosu td:first-child { padding-left: 24px; }
  .kayit-tablosu th:last-child, .kayit-tablosu td:last-child { padding-right: 24px; }
  .kayit-tablosu tbody tr:last-child td { border-bottom: 0; }
  .kayit-tablosu tbody tr:hover { background: var(--yuzey-2); }
  .kayit-tablosu tr.bos-satir td { display: table-cell; }
}

/* Dokuz kutu tek satırda, eşit genişlikte */
@media (min-width: 1180px) {
  .durum-kartlari { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  /* Dört menü düğmesi eşit genişlikte; sağdaki durum ve kullanıcı kutusuna en uzun yazıda da yer kalır. */
  .ana-menu a { min-width: 118px; }
  .ana-menu a .ikon { display: inline; }
  .tablo-kart th:nth-child(4), .tablo-kart th:nth-child(6), .tablo-kart td.h-kargo, .tablo-kart td.h-zaman { display: table-cell; }
  .tablo-kart table.liste td { padding-left: 10px; padding-right: 10px; }
  .sistem .durum-metni { display: inline; }
}

/* Hesap adı yer olunca; daha dar ekranda yalnızca baş harf (ad, tıklanınca açılan panelde). */
@media (min-width: 1300px) {
  .hesap-menu .ad { display: inline; }
}

@media (min-width: 1440px) {
  :root { --genislik: 1440px; }
  .sistem .yazici-bilgi { display: inline; max-width: 84px; }
  .sistem .yazici-bilgi::before { content: "·"; margin-right: 6px; }
}

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