/* ==========================================================================
   MAJORULTRA RESTAURANT YÖNETİM — TEMEL KATMAN
   Vitrin ile aynı marka, farklı ürün: burada amaç iştah değil, iş görmek.
   Karar: solda sabit lacivert ray (markanın durduğu yer), sağda yüksek
   yoğunluklu açık gri çalışma alanı. Ölçek vitrinden bir tık sıkıdır —
   13px taban, daha küçük yarıçap, daha dar boşluk.
   Sınıf öneki: .ay-  (yönetim) → vitrinin .mu- sınıflarıyla asla çakışmaz.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENLAR
   -------------------------------------------------------------------------- */
:root {
  /* — MARKA (vitrinle aynı) —
     css/marka.css'ten gelir; buraya hex yazılmaz (karar #23). */
  --kirmizi-700: var(--marka-birincil-700);
  --kirmizi-600: var(--marka-birincil-600);
  --kirmizi-500: var(--marka-birincil-500);
  --kirmizi-400: var(--marka-birincil-400);
  --kirmizi-sis: rgba(var(--marka-birincil-rgb), .08);
  --kirmizi-sis-2: rgba(var(--marka-birincil-rgb), .16);

  --lacivert-900: var(--marka-koyu-900);
  --lacivert-850: var(--marka-koyu-850);
  --lacivert-800: var(--marka-koyu-800);
  --lacivert-700: var(--marka-koyu-700);
  --lacivert-600: var(--marka-koyu-600);
  --lacivert-500: var(--marka-koyu-500);

  --altin-700: var(--marka-ikincil-700);
  --altin-600: var(--marka-ikincil-600);
  --altin-500: var(--marka-ikincil-500);
  --altin-sis: rgba(var(--marka-ikincil-rgb), .16);

  /* — YÜZEY — */
  --zemin: #F1F3F6;
  --yuzey: #FFFFFF;
  --yuzey-2: #F7F8FA;
  --yuzey-3: #EDEFF3;
  --cizgi: #E4E7EC;
  --cizgi-koyu: #D3D8DF;

  /* — METİN — */
  --metin: var(--marka-koyu-800);
  --metin-2: #55606F;
  --metin-3: #838D9B;
  --metin-4: #A6AEBA;
  --ters: #FFFFFF;
  --ters-2: rgba(255, 255, 255, .82);
  --ters-3: rgba(255, 255, 255, .60);
  --ters-4: rgba(255, 255, 255, .40);
  --ray-cizgi: rgba(255, 255, 255, .10);

  /* — DURUM — */
  --basari-600: #12873E;
  --basari-500: #15A34A;
  --basari-sis: rgba(21, 163, 74, .11);
  --uyari-600: #B7791F;
  --uyari-500: #E8A200;
  --uyari-sis: rgba(232, 162, 0, .13);
  --hata-600: #B91C1C;
  --hata-500: #DC2626;
  --hata-sis: rgba(220, 38, 38, .09);
  --bilgi-600: #1D4ED8;
  --bilgi-500: #2563EB;
  --bilgi-sis: rgba(37, 99, 235, .10);
  --mor-500: #7C3AED;
  --mor-sis: rgba(124, 58, 237, .10);

  /* — ARALIK — */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px;

  /* — TİPOGRAFİ — */
  --font-bas: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-metin: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --f-dev: 1.75rem;
  --f-h1: 1.3125rem;
  --f-h2: 1.0625rem;
  --f-h3: 0.9375rem;
  --f-md: 0.875rem;
  --f-sm: 0.8125rem;
  --f-xs: 0.75rem;
  --f-mic: 0.6875rem;

  /* — GEOMETRİ — */
  --r-xs: 5px;
  --r-sm: 7px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* — GÖLGE — */
  --g1: 0 1px 2px rgba(11, 29, 51, .05);
  --g2: 0 1px 3px rgba(11, 29, 51, .07), 0 3px 10px rgba(11, 29, 51, .05);
  --g3: 0 4px 12px rgba(11, 29, 51, .08), 0 16px 40px rgba(11, 29, 51, .10);
  --g4: 0 24px 64px rgba(11, 29, 51, .22);

  /* — YERLEŞİM — */
  --ray-g: 248px;
  --ray-g-dar: 68px;
  --ust-y: 60px;
  --oluk: clamp(16px, 2.2vw, 28px);

  /* — HAREKET — */
  --e-cik: cubic-bezier(.16, 1, .3, 1);
  --e-std: cubic-bezier(.4, 0, .2, 1);
  --t1: 110ms;
  --t2: 190ms;
  --t3: 300ms;

  --z-ust: 40;
  --z-ray: 50;
  --z-perde: 70;
  --z-panel: 80;
  --z-tost: 100;
}

/* --------------------------------------------------------------------------
   2. SIFIRLAMA
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

body.ay {
  min-height: 100vh;
  background: var(--zemin);
  color: var(--metin);
  font-family: var(--font-metin);
  font-size: var(--f-md);
  line-height: 1.55;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.ay.kilit { overflow: hidden; }

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--cizgi); }
::selection { background: var(--kirmizi-500); color: #fff; }

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

h1, h2, h3, h4 {
  font-family: var(--font-bas);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--metin);
}
h1 { font-size: var(--f-h1); }
h2 { font-size: var(--f-h2); }
h3 { font-size: var(--f-h3); }

.ay-atla {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 200;
  transform: translateY(-160%);
  background: var(--kirmizi-500);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--r-sm);
  font-weight: 800;
  font-size: var(--f-sm);
  transition: transform var(--t2) var(--e-cik);
}
.ay-atla:focus { transform: translateY(0); }

.ay-gizli {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
/* Tablo, display:table iken 1px'e inmez; grafiklerin okuyucu yedeği için */
table.ay-gizli { display: block; }

/* --------------------------------------------------------------------------
   3. YERLEŞİM
   -------------------------------------------------------------------------- */
.ay-govde {
  min-height: 100vh;
  margin-inline-start: var(--ray-g);
  display: flex;
  flex-direction: column;
  transition: margin-inline-start var(--t3) var(--e-cik);
}
body.ay.ray-dar .ay-govde { margin-inline-start: var(--ray-g-dar); }

.ay-icerik {
  flex: 1;
  padding: var(--s6) var(--oluk) var(--s9);
  display: flex;
  flex-direction: column;
  gap: var(--s6);
  min-width: 0;
}

@media (max-width: 1080px) {
  .ay-govde { margin-inline-start: 0 !important; }
}

/* --------------------------------------------------------------------------
   4. SOL RAY
   -------------------------------------------------------------------------- */
.ay-ray {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: var(--z-ray);
  width: var(--ray-g);
  background: var(--lacivert-800);
  color: var(--ters-2);
  display: flex;
  flex-direction: column;
  transition: width var(--t3) var(--e-cik), transform var(--t3) var(--e-cik);
  overscroll-behavior: contain;
}
body.ay.ray-dar .ay-ray { width: var(--ray-g-dar); }

.ay-ray__bas {
  flex: none;
  height: var(--ust-y);
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding-inline: var(--s5);
  border-bottom: 1px solid var(--ray-cizgi);
}
.ay-ray__logo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ay-ray__logo img { width: 34px; height: 34px; flex: none; }
.ay-ray__ad {
  display: grid;
  line-height: 1.15;
  min-width: 0;
}
.ay-ray__ad b {
  font-family: var(--font-bas);
  font-size: var(--f-md);
  font-weight: 900;
  font-style: italic;
  letter-spacing: -.02em;
  color: #fff;
  white-space: nowrap;
}
.ay-ray__ad span {
  font-size: var(--f-mic);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--altin-500);
  white-space: nowrap;
}
body.ay.ray-dar .ay-ray__ad { display: none; }
body.ay.ray-dar .ay-ray__bas { padding-inline: 0; justify-content: center; }

.ay-ray__gez {
  flex: 1;
  overflow-y: auto;
  padding: var(--s4) var(--s3) var(--s6);
  scrollbar-width: thin;
  scrollbar-color: var(--lacivert-600) transparent;
}
.ay-ray__gez::-webkit-scrollbar { width: 6px; }
.ay-ray__gez::-webkit-scrollbar-thumb { background: var(--lacivert-600); border-radius: 99px; }

.ay-ray__grup + .ay-ray__grup { margin-top: var(--s5); }
.ay-ray__grup-bas {
  font-size: var(--f-mic);
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ters-4);
  padding: 0 var(--s3) var(--s2);
}
body.ay.ray-dar .ay-ray__grup-bas {
  color: transparent;
  border-top: 1px solid var(--ray-cizgi);
  margin-top: var(--s3);
  padding: 0;
  height: 1px;
  overflow: hidden;
}

.ay-ray__bag {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px var(--s3);
  border-radius: var(--r-sm);
  font-size: var(--f-sm);
  font-weight: 600;
  color: var(--ters-3);
  white-space: nowrap;
  transition: color var(--t1), background var(--t1);
}
.ay-ray__bag + .ay-ray__bag { margin-top: 1px; }
.ay-ray__bag .ay-ikon { width: 18px; height: 18px; flex: none; }
.ay-ray__bag:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.ay-ray__bag[aria-current="page"] {
  color: #fff;
  background: var(--kirmizi-500);
  font-weight: 700;
}
.ay-ray__bag[aria-current="page"] .ay-ikon { color: #fff; }
.ay-ray__sayi {
  margin-inline-start: auto;
  min-width: 20px; height: 19px;
  padding: 0 6px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .13);
  color: #fff;
  border-radius: var(--r-pill);
  font-family: var(--font-bas);
  font-size: var(--f-mic);
  font-weight: 800;
  line-height: 1;
}
.ay-ray__sayi--uyari { background: var(--altin-500); color: var(--lacivert-900); }
.ay-ray__bag[aria-current="page"] .ay-ray__sayi { background: rgba(255, 255, 255, .24); }

body.ay.ray-dar .ay-ray__bag { justify-content: center; padding-inline: 0; }
body.ay.ray-dar .ay-ray__bag span:not(.ay-ray__sayi) { display: none; }
body.ay.ray-dar .ay-ray__sayi {
  position: absolute;
  top: 3px; right: 8px;
  min-width: 8px; height: 8px;
  padding: 0;
  font-size: 0;
  background: var(--kirmizi-400);
}

.ay-ray__alt {
  flex: none;
  padding: var(--s3);
  border-top: 1px solid var(--ray-cizgi);
  display: grid;
  gap: 4px;
}
.ay-ray__vitrin {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px var(--s3);
  border-radius: var(--r-sm);
  font-size: var(--f-sm);
  font-weight: 600;
  color: var(--ters-3);
  transition: color var(--t1), background var(--t1);
}
.ay-ray__vitrin:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.ay-ray__vitrin .ay-ikon { width: 17px; height: 17px; flex: none; }
body.ay.ray-dar .ay-ray__vitrin { justify-content: center; padding-inline: 0; }
body.ay.ray-dar .ay-ray__vitrin span { display: none; }

/* Mobil: ray dışarı kayar. Kapalıyken visibility:hidden verilir; böylece
   ekran dışındaki bağlantılar sekme sırasına ve ekran okuyucuya girmez. */
@media (max-width: 1080px) {
  .ay-ray {
    transform: translateX(-102%);
    visibility: hidden;
    box-shadow: var(--g4);
    /* Açılırken görünürlük anında döner (odak hemen verilebilsin),
       kapanırken kayma bittikten sonra gizlenir. */
    transition: transform var(--t3) var(--e-cik), visibility 0s linear var(--t3);
  }
  body.ay.ray-acik .ay-ray {
    transform: none;
    visibility: visible;
    transition: transform var(--t3) var(--e-cik), visibility 0s;
  }
}

.ay-perde {
  position: fixed;
  inset: 0;
  z-index: var(--z-perde);
  background: rgba(11, 29, 51, .44);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t3) var(--e-std), visibility 0s linear var(--t3);
}
.ay-perde.is-acik {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--t3) var(--e-std), visibility 0s;
}

/* --------------------------------------------------------------------------
   5. ÜST ÇUBUK
   -------------------------------------------------------------------------- */
.ay-ust {
  position: sticky;
  top: 0;
  z-index: var(--z-ust);
  min-height: var(--ust-y);
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding-inline: var(--oluk);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--cizgi);
}
.ay-ust__sol { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.ay-ust__baslik { display: grid; gap: 1px; min-width: 0; }
/* SEVİYE-BAĞIMSIZ. Bu kural bugün hiçbir görünümde KULLANILMIYOR
   (`ay-ust__baslik` sınıfını çizen bir ekran yok) ama `h1`e çivilenmiş
   durumda: kullanan bir ekran yazıldığı gün başlığı `h2` seçerse kural
   sessizce uygulanmaz. Kaldırmak yerine seviye-bağımsız yapıldı —
   silmek, bir gün geri isteneni yok etmek olurdu. */
.ay-ust__baslik :is(h1, h2) { font-size: var(--f-h2); }

.ay-kirinti ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ay-kirinti li {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--f-xs);
  color: var(--metin-4);
}
.ay-kirinti li:not(:last-child)::after {
  content: "";
  width: 4px; height: 4px;
  border-top: 1.4px solid var(--cizgi-koyu);
  border-right: 1.4px solid var(--cizgi-koyu);
  transform: rotate(45deg);
}
.ay-kirinti a:hover { color: var(--kirmizi-500); }

.ay-ust__sag { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }

.ay-ust__ara {
  position: relative;
  display: none;
  width: clamp(180px, 22vw, 300px);
}
@media (min-width: 900px) { .ay-ust__ara { display: block; } }
.ay-ust__ara input {
  width: 100%;
  height: 36px;
  padding: 0 34px 0 34px;
  background: var(--yuzey-2);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-sm);
  font-size: var(--f-sm);
  outline: none;
  transition: border-color var(--t2), background var(--t2);
}
.ay-ust__ara input:focus { border-color: var(--kirmizi-500); background: #fff; }
.ay-ust__ara .ay-ikon {
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--metin-4);
  pointer-events: none;
}
.ay-ust__ara kbd {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-metin);
  font-size: 10px;
  font-weight: 700;
  color: var(--metin-4);
  border: 1px solid var(--cizgi-koyu);
  border-radius: 4px;
  padding: 2px 5px;
  background: #fff;
}

/* Şube seçici */
.ay-sube {
  display: none;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 11px;
  border: 1px solid var(--cizgi);
  border-radius: var(--r-sm);
  background: var(--yuzey);
  font-size: var(--f-sm);
  font-weight: 700;
  color: var(--metin);
  white-space: nowrap;
}
@media (min-width: 780px) { .ay-sube { display: inline-flex; } }
.ay-sube:hover { border-color: var(--cizgi-koyu); }
.ay-sube .ay-ikon { width: 15px; height: 15px; color: var(--kirmizi-500); }
.ay-sube .ay-ikon--sivri { width: 13px; height: 13px; color: var(--metin-4); }

/* Yuvarlak ikon butonu */
.ay-ibtn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  color: var(--metin-2);
  border: 1px solid transparent;
  transition: background var(--t1), color var(--t1), border-color var(--t1);
}
.ay-ibtn:hover { background: var(--yuzey-2); color: var(--metin); border-color: var(--cizgi); }
.ay-ibtn .ay-ikon { width: 18px; height: 18px; }
.ay-ibtn__nokta {
  position: absolute;
  top: 6px; right: 7px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--kirmizi-500);
  border: 1.5px solid var(--yuzey);
}
.ay-menu-btn { display: inline-grid; }
@media (min-width: 1081px) { .ay-menu-btn { display: none; } }

/* Kullanıcı menüsü */
.ay-kul { position: relative; }
.ay-kul__tetik {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 36px;
  padding: 0 8px 0 4px;
  border-radius: var(--r-sm);
  transition: background var(--t1);
}
.ay-kul__tetik:hover { background: var(--yuzey-2); }
.ay-kul__avatar {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--lacivert-800);
  color: #fff;
  font-family: var(--font-bas);
  font-size: var(--f-xs);
  font-weight: 800;
  flex: none;
}
.ay-kul__ad { display: none; text-align: left; line-height: 1.2; }
@media (min-width: 1180px) { .ay-kul__ad { display: grid; } }
.ay-kul__ad b { font-size: var(--f-sm); font-weight: 700; }
.ay-kul__ad span { font-size: var(--f-mic); color: var(--metin-3); }
.ay-kul__tetik .ay-ikon--sivri { width: 13px; height: 13px; color: var(--metin-4); }

.ay-acilir {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 216px;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-md);
  box-shadow: var(--g3);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--t2), transform var(--t2) var(--e-cik), visibility var(--t2);
  z-index: 2;
}
.ay-acilir.is-acik, .is-acik > .ay-acilir { opacity: 1; visibility: visible; transform: none; }
.ay-acilir__bas {
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--cizgi);
  margin-bottom: 5px;
}
.ay-acilir__bas b { display: block; font-size: var(--f-sm); }
.ay-acilir__bas span { font-size: var(--f-xs); color: var(--metin-3); }
.ay-acilir__oge {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--r-xs);
  font-size: var(--f-sm);
  font-weight: 600;
  color: var(--metin-2);
  text-align: left;
  transition: background var(--t1), color var(--t1);
}
.ay-acilir__oge:hover { background: var(--yuzey-2); color: var(--metin); }
.ay-acilir__oge .ay-ikon { width: 16px; height: 16px; color: var(--metin-4); }
.ay-acilir__oge--tehlike { color: var(--hata-500); }
.ay-acilir__oge--tehlike .ay-ikon { color: currentColor; }
.ay-acilir__ayrac { height: 1px; background: var(--cizgi); margin: 5px 0; }

/* --------------------------------------------------------------------------
   6. SAYFA BAŞLIĞI VE BÖLÜMLER
   -------------------------------------------------------------------------- */
.ay-sayfa-bas {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
}
.ay-sayfa-bas__soz { display: grid; gap: 3px; min-width: 0; }
/* SEVİYE-BAĞIMSIZ SEÇİCİ (Sprint 8.6 erişilebilirlik geçişi).
   Sayfa başlığı `h2` yazılmıştı ama kuralın kendi adı `--f-h1` diyordu:
   yazar bunun sayfanın ana başlığı olduğunu biliyordu, seviyeyi ise
   GÖRÜNÜM sanmıştı. Ölçüldü: yirmi üç panel ekranının hiçbirinde `h1`
   yoktu ve ekran okuyucuyla gezen biri sayfanın ne olduğunu başlıklardan
   bulamıyordu. Seçici ikisini de kapsıyor: markup düzeldi, görünüm
   değişmedi. */
.ay-sayfa-bas__soz :is(h1, h2) { font-size: var(--f-h1); }
.ay-sayfa-bas__soz p { font-size: var(--f-sm); color: var(--metin-3); }

/* ÖZET SATIRI BOŞKEN YER KAPLAMAZ (Sprint 38).
   Sunucu sayıyı bilmiyor (grid veriyi AJAX ile çekiyor), bu yüzden paragraf
   BOŞ doğuyor. `hidden` ile gizlemek, JS'in her yüklemede özniteliği
   kaldırmasını gerektirirdi ve bir kez unutulduğunda satır hiç görünmezdi;
   `:empty` doldurulduğu an kendiliğinden geri gelir. */
.ay-sayfa-bas__soz p:empty { display: none; }
.ay-sayfa-bas__aks { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.ay-bolum { display: grid; gap: var(--s4); min-width: 0; }
.ay-bolum-bas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
}
.ay-bolum-bas :is(h1, h2, h3) { font-size: var(--f-h2); }
.ay-bolum-bas p { font-size: var(--f-sm); color: var(--metin-3); }

/* Kart */
.ay-kart {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-lg);
  min-width: 0;
}
.ay-kart__bas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--cizgi);
  flex-wrap: wrap;
}
.ay-kart__bas :is(h2, h3) { font-size: var(--f-h3); }
.ay-kart__bas p { font-size: var(--f-xs); color: var(--metin-3); }
.ay-kart__govde { padding: var(--s5); }
.ay-kart__govde--sifir { padding: 0; }
.ay-kart__alt {
  padding: var(--s3) var(--s5);
  border-top: 1px solid var(--cizgi);
  background: var(--yuzey-2);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  font-size: var(--f-sm);
}

/* Izgara yardımcıları */
.ay-izgara { display: grid; gap: var(--s4); min-width: 0; }
.ay-izgara--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ay-izgara--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ay-izgara--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1200px) { .ay-izgara--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) {
  .ay-izgara--2, .ay-izgara--3 { grid-template-columns: 1fr; }
}
@media (max-width: 620px) { .ay-izgara--4 { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   7. BUTONLAR
   -------------------------------------------------------------------------- */
.ay-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--r-sm);
  font-size: var(--f-sm);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background var(--t2), color var(--t2), border-color var(--t2),
              box-shadow var(--t2), opacity var(--t2);
}
.ay-btn .ay-ikon { width: 16px; height: 16px; flex: none; }
.ay-btn:disabled, .ay-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

.ay-btn--kirmizi { background: var(--kirmizi-500); color: #fff; }
.ay-btn--kirmizi:hover:not(:disabled) { background: var(--kirmizi-600); }
.ay-btn--lacivert { background: var(--lacivert-800); color: #fff; }
.ay-btn--lacivert:hover:not(:disabled) { background: var(--lacivert-700); }
.ay-btn--cizgi { background: var(--yuzey); border-color: var(--cizgi-koyu); color: var(--metin); }
.ay-btn--cizgi:hover:not(:disabled) { border-color: var(--metin-4); background: var(--yuzey-2); }
.ay-btn--sessiz { background: var(--yuzey-2); color: var(--metin-2); border-color: var(--cizgi); }
.ay-btn--sessiz:hover:not(:disabled) { background: var(--yuzey-3); color: var(--metin); }
.ay-btn--hayalet { color: var(--metin-2); }
.ay-btn--hayalet:hover:not(:disabled) { background: var(--yuzey-2); color: var(--metin); }
.ay-btn--tehlike { background: var(--hata-500); color: #fff; }
.ay-btn--tehlike:hover:not(:disabled) { background: var(--hata-600); }
.ay-btn--tehlike-cizgi { border-color: rgba(220, 38, 38, .34); color: var(--hata-500); background: var(--yuzey); }
.ay-btn--tehlike-cizgi:hover:not(:disabled) { background: var(--hata-sis); }
.ay-btn--basari { background: var(--basari-500); color: #fff; }
.ay-btn--basari:hover:not(:disabled) { background: var(--basari-600); }

.ay-btn--sm { min-height: 30px; padding: 0 10px; font-size: var(--f-xs); }
.ay-btn--sm .ay-ikon { width: 14px; height: 14px; }
.ay-btn--lg { min-height: 42px; padding: 0 20px; font-size: var(--f-md); }
.ay-btn--tam { width: 100%; }

.ay-btn.is-yukleniyor { color: transparent !important; pointer-events: none; }
.ay-btn.is-yukleniyor::after {
  content: "";
  position: absolute; inset: 0; margin: auto;
  width: 15px; height: 15px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: #fff;
  animation: ay-don 700ms linear infinite;
}
.ay-btn--cizgi.is-yukleniyor::after,
.ay-btn--sessiz.is-yukleniyor::after,
.ay-btn--hayalet.is-yukleniyor::after { color: var(--metin); }
@keyframes ay-don { to { transform: rotate(360deg); } }

.ay-bag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--f-sm);
  font-weight: 700;
  color: var(--kirmizi-500);
}
.ay-bag:hover { color: var(--kirmizi-600); text-decoration: underline; text-underline-offset: 3px; }
.ay-bag .ay-ikon { width: 14px; height: 14px; }

/* Buton grubu (segment) */
.ay-segment {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--yuzey-2);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-sm);
}
.ay-segment button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 11px;
  border-radius: 5px;
  font-size: var(--f-xs);
  font-weight: 700;
  color: var(--metin-3);
  white-space: nowrap;
  transition: background var(--t1), color var(--t1);
}
.ay-segment button .ay-ikon { width: 14px; height: 14px; }
.ay-segment button:hover { color: var(--metin); }
.ay-segment button.is-aktif {
  background: var(--yuzey);
  color: var(--metin);
  box-shadow: var(--g1);
}

/* --------------------------------------------------------------------------
   8. ROZET / DURUM
   -------------------------------------------------------------------------- */
.ay-rozet {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-size: var(--f-mic);
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.5;
  white-space: nowrap;
}
.ay-rozet .ay-ikon { width: 12px; height: 12px; }
.ay-rozet::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.ay-rozet--sade::before { display: none; }
.ay-rozet--notr    { background: var(--yuzey-3); color: var(--metin-2); }
.ay-rozet--bilgi   { background: var(--bilgi-sis); color: var(--bilgi-600); }
.ay-rozet--basari  { background: var(--basari-sis); color: var(--basari-600); }
.ay-rozet--uyari   { background: var(--uyari-sis); color: var(--uyari-600); }
.ay-rozet--hata    { background: var(--hata-sis); color: var(--hata-600); }
.ay-rozet--mor     { background: var(--mor-sis); color: var(--mor-500); }
.ay-rozet--kirmizi { background: var(--kirmizi-sis); color: var(--kirmizi-600); }
.ay-rozet--dolu    { background: var(--kirmizi-500); color: #fff; }

/* Yanıp sönen canlı işaret (yeni sipariş) */
.ay-canli {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--basari-500);
  flex: none;
  animation: ay-nabiz 2.2s ease-out infinite;
}
@keyframes ay-nabiz {
  0%   { box-shadow: 0 0 0 0 rgba(21, 163, 74, .5); }
  70%  { box-shadow: 0 0 0 7px rgba(21, 163, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(21, 163, 74, 0); }
}

/* --------------------------------------------------------------------------
   9. YARDIMCILAR
   -------------------------------------------------------------------------- */
.ay-ikon {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.ay-ikon--dolu { fill: currentColor; stroke: none; }

.ay-tutar {
  font-family: var(--font-bas);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.015em;
  white-space: nowrap;
}
.ay-tutar__k { font-size: .74em; font-weight: 700; }
.ay-sayi { font-variant-numeric: tabular-nums; }

/* Teknik anahtar rozeti — aynı adı taşıyan kayıtları ayırt etmek için */
.ay-kod {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--cizgi);
  border-radius: var(--r-xs, 5px);
  background: var(--yuzey-2);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: var(--f-mic);
  font-weight: 500;
  color: var(--metin-3);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  vertical-align: middle;
}

/* Formda elle girilmeyen, hesaplanmış değer satırı */
.ay-tanim-deger {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 38px;
  padding-top: 8px;
  font-family: var(--font-bas);
  font-size: var(--f-h3);
  font-weight: 800;
  color: var(--metin);
}
.ay-tanim-deger span {
  font-family: var(--font-metin);
  font-size: var(--f-xs);
  font-weight: 400;
}

.ay-metin-2 { color: var(--metin-2); }
.ay-metin-3 { color: var(--metin-3); }



/* Mutfak panosu özetindeki gecikme uyarısı (Sprint 38). Temada bu satır
   `style="color:var(--hata-600)"` ile yazılıydı; satır içi biçem yasak
   (CODING-STANDARDS) ve bir uyarı rengi zaten belirteçte duruyor. */
.ay-gecikme-ozet { color: var(--hata-600); font-weight: 700; }
.ay-metin-4 { color: var(--metin-4); }
.ay-kucuk { font-size: var(--f-xs); }
.ay-sag { text-align: right; }
.ay-orta { text-align: center; }
.ay-yok { display: none !important; }
.ay-kes {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.ay-artis, .ay-azalis {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--f-xs);
  font-weight: 800;
}
.ay-artis { color: var(--basari-600); }
.ay-azalis { color: var(--hata-600); }
.ay-artis .ay-ikon, .ay-azalis .ay-ikon { width: 13px; height: 13px; }

/* İskelet */
.ay-iskelet {
  position: relative;
  overflow: hidden;
  background: var(--yuzey-3);
  border-radius: var(--r-xs);
}
.ay-iskelet::after {
  content: "";
  position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
  animation: ay-parla 1.3s infinite;
}
@keyframes ay-parla { to { transform: translateX(100%); } }

/* Boş durum */
.ay-bos {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: var(--s9) var(--s5);
  text-align: center;
}
.ay-bos__ikon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--yuzey-2);
  border: 1px dashed var(--cizgi-koyu);
  color: var(--metin-4);
}
.ay-bos__ikon .ay-ikon { width: 24px; height: 24px; }
.ay-bos :is(h2, h3) { font-size: var(--f-h3); }
.ay-bos p { font-size: var(--f-sm); color: var(--metin-3); max-width: 46ch; }
.ay-bos .ay-btn { margin-top: 6px; }

/* Yükleniyor */
.ay-yukleniyor {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: var(--s9) var(--s5);
  color: var(--metin-3);
  font-size: var(--f-sm);
}
.ay-firildak {
  width: 26px; height: 26px;
  border: 2.5px solid var(--cizgi);
  border-top-color: var(--kirmizi-500);
  border-radius: 50%;
  animation: ay-don 700ms linear infinite;
}

/* Bilgi kutusu */
.ay-not {
  display: flex;
  gap: 10px;
  padding: 12px var(--s4);
  border-radius: var(--r-md);
  font-size: var(--f-sm);
  line-height: 1.6;
  border: 1px solid var(--cizgi);
  background: var(--yuzey-2);
  color: var(--metin-2);
}
.ay-not .ay-ikon { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.ay-not strong { color: var(--metin); }
.ay-not--bilgi { background: var(--bilgi-sis); border-color: rgba(37, 99, 235, .22); color: var(--bilgi-600); }
.ay-not--uyari { background: var(--uyari-sis); border-color: rgba(232, 162, 0, .3); color: var(--uyari-600); }
.ay-not--hata  { background: var(--hata-sis); border-color: rgba(220, 38, 38, .26); color: var(--hata-600); }
.ay-not--basari{ background: var(--basari-sis); border-color: rgba(21, 163, 74, .26); color: var(--basari-600); }

/* Ürün adı + görsel hücresi (tablolarda çok kullanılır) */
.ay-oge {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
.ay-oge__gorsel {
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  background: var(--yuzey-2);
  border: 1px solid var(--cizgi);
  object-fit: cover;
  flex: none;
}
.ay-oge__gorsel--yuvarlak { border-radius: 50%; }
.ay-oge__soz { display: grid; gap: 1px; min-width: 0; }
.ay-oge__ad { font-size: var(--f-sm); font-weight: 700; color: var(--metin); }
.ay-oge__alt { font-size: var(--f-xs); color: var(--metin-3); }

/* Avatar baş harfleri */
.ay-avatar {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--lacivert-700);
  color: #fff;
  font-family: var(--font-bas);
  font-size: var(--f-xs);
  font-weight: 800;
  flex: none;
}
.ay-avatar--kirmizi { background: var(--kirmizi-500); }
.ay-avatar--altin { background: var(--altin-500); color: var(--lacivert-900); }
.ay-avatar--sm { width: 28px; height: 28px; font-size: var(--f-mic); }

/* Sekme rayı */
.ay-sekme {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--cizgi);
  overflow-x: auto;
  scrollbar-width: none;
}
.ay-sekme::-webkit-scrollbar { display: none; }
.ay-sekme button, .ay-sekme a {
  position: relative;
  flex: none;
  padding: 11px 14px;
  font-size: var(--f-sm);
  font-weight: 700;
  color: var(--metin-3);
  white-space: nowrap;
  transition: color var(--t1);
}
.ay-sekme button:hover, .ay-sekme a:hover { color: var(--metin); }
.ay-sekme .is-aktif, .ay-sekme [aria-selected="true"] { color: var(--kirmizi-500); }
.ay-sekme .is-aktif::after, .ay-sekme [aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--kirmizi-500);
}
.ay-sekme__sayi {
  margin-inline-start: 6px;
  font-size: var(--f-mic);
  font-weight: 800;
  color: var(--metin-4);
}

/* Tanım listesi (detay sayfalarında) */
.ay-tanim { display: grid; gap: 11px; }
.ay-tanim > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
}
.ay-tanim dt { font-size: var(--f-sm); color: var(--metin-3); flex: none; }
.ay-tanim dd { font-size: var(--f-sm); font-weight: 700; text-align: right; min-width: 0; }

/* Yapışkan sütun */
.ay-yapiskan { position: sticky; top: calc(var(--ust-y) + var(--s5)); }

/* --------------------------------------------------------------------------
   10. TAŞMA KORUMASI
   -------------------------------------------------------------------------- */
.ay-icerik > *, .ay-izgara > *, .ay-kart > *, .ay-bolum > * { min-width: 0; }

/* --------------------------------------------------------------------------
   ÜRÜN MEDYASI — çoklu görsel ve video satırları

   `ay-soru-satir` ile aynı anatomi: sıra ekrandaki sıradır, her satıra bir
   numara yazdırılmaz.
   -------------------------------------------------------------------------- */
.ay-medya-satir {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s3);
  padding: var(--s4);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-md);
  background: var(--yuzey-2);
  min-width: 0;
}

.ay-medya-satir__no {
  font-size: var(--f-xs);
  font-weight: 700;
  color: var(--metin-3);
  padding: 0 4px;
}

.ay-yardim {
  font-size: var(--f-xs);
  color: var(--metin-3);
  line-height: 1.6;
}

/* =============================================================================
   B-101 · SATIR İÇİ BİÇEMİN KARŞILIKLARI — PANEL (Sprint 39)
   ============================================================================= */

/* SPRITE GİZLENİR ama `display: none` DEĞİL: `display:none` olan bir SVG'nin
   içindeki `<symbol>`lere bazı tarayıcılar `<use>` ile ulaşamıyor. */
.ay-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ISI HARİTASI ÖLÇEĞİ: beş kutucuk, açıktan koyuya. Renkler TASARIMDIR ve
   sınıfları olmalı — betikte satır içi yazılıyorlardı. */
.ay-isi__olcek { margin-top: var(--s3); }
.ay-isi__olcek i.ay-isi__kutu--0 { background: var(--yuzey-3); }
.ay-isi__olcek i.ay-isi__kutu--1 { background: rgba(225, 6, 0, .16); }
.ay-isi__olcek i.ay-isi__kutu--2 { background: rgba(225, 6, 0, .34); }
.ay-isi__olcek i.ay-isi__kutu--3 { background: rgba(225, 6, 0, .58); }
.ay-isi__olcek i.ay-isi__kutu--4 { background: var(--kirmizi-500); }

/* HALKA GRAFİĞİN RENK NOKTASI: renk VERİDİR (dilimin rengi) ve CSS
   değişkeniyle taşınıyor. */
.ay-halka__renk { background: var(--renk, var(--cizgi-koyu)); }

/* ORANSAL ÇUBUK: dolgunun genişliği hesaplanmış bir değerdir. */
.ay-oran__dolgu { width: calc(var(--oran, 0) * 1%); }