/* Uygulama kabuğu: temel yazı, açılış perdesi, kenar çubuğu (telefonda
   çekmece), üst çubuk, alt çubuk, içerik ve sayfa yerleşimleri.
   Yalnız mantıksal yön özellikleri: sağdan sola kendiliğinden doğru. */

/* ======================================================================
   Temel
   ====================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-block-start: calc(var(--ust-boy) + 12px); }
html, body { margin: 0; padding: 0; }
body {
  min-block-size: 100dvh;
  background: rgb(var(--bg)); color: rgb(var(--metin));
  font-family: var(--yazi); font-size: .9375rem; line-height: var(--satir);
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
/* `hidden` niteliği her zaman kazanır: bileşenin kendi display kuralı
   (grid, flex) onu eziyordu ve gizli rozet «0» diye görünüyordu. */
[hidden] { display: none !important; }
h1, h2, h3, h4 { line-height: var(--satir-baslik); letter-spacing: -.01em; }
h1 { font-size: var(--f-xl); margin-block: 0 var(--b-2); font-weight: 800; }
h2 { font-size: var(--f-l); margin-block: var(--b-6) var(--b-2); font-weight: 700; }
h3 { font-size: 1rem; margin-block: var(--b-4) var(--b-2); font-weight: 700; }
p { margin-block: 0 var(--b-3); }
a { color: rgb(var(--vurgu-metin)); text-underline-offset: 3px; }
img, svg { max-inline-size: 100%; }
button { font: inherit; }
code { font-family: var(--mono); font-size: .85em; }
::selection { background: rgb(var(--vurgu) / .22); }
:focus-visible { outline: 2px solid rgb(var(--vurgu)); outline-offset: 2px; }
/* Yönlendiricinin başlığa verdiği programlı odak halka çizmesin. */
[data-yonlendirme-odagi]:focus { outline: none; }
.tema-gecis, .tema-gecis * { transition: background-color var(--hiz-3) var(--egri), border-color var(--hiz-3) var(--egri), color var(--hiz-3) var(--egri) !important; }
.sessiz { color: rgb(var(--metin-3)); }
.sayi { font-variant-numeric: tabular-nums; }
.sayi-buyuk { font-size: var(--f-3xl); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin: 0; }
.metin-son { text-align: end; }
.tehlike-metin { color: rgb(var(--tehlike-metin)); }
.basari-metin { color: rgb(var(--basari-metin)); }
.uyari-metin { color: rgb(var(--uyari-metin)); }
html.katman-acik { overflow: hidden; }
/* İnce, temaya uyan kaydırma çubukları. */
* { scrollbar-width: thin; scrollbar-color: rgb(var(--cizgi) / .2) transparent; }

.atla {
  position: fixed; z-index: 400; inset-block-start: 10px; inset-inline-start: 10px; padding-block: 8px; padding-inline: 14px;
  border-radius: 10px; background: rgb(var(--vurgu-koyu)); color: #fff; font-weight: 700; text-decoration: none;
  transform: translateY(-160%); transition: transform var(--hiz-2) var(--egri);
}
.atla:focus { transform: none; }

/* ======================================================================
   Açılış perdesi
   ====================================================================== */
.acilis {
  position: fixed; inset: 0; z-index: 300; display: grid; place-content: center; justify-items: center; gap: 12px;
  background: radial-gradient(60% 50% at 50% 35%, rgb(var(--vurgu) / .14), transparent 70%), rgb(var(--bg));
  transition: opacity 400ms var(--egri), visibility 400ms;
}
.acilis--cikis { opacity: 0; visibility: hidden; }
.acilis__logo { inline-size: 76px; block-size: 76px; border-radius: 20px; box-shadow: 0 18px 40px -16px rgb(4 120 87 / .6); animation: acilis-gir 600ms var(--egri-yay) both; }
.acilis__ad { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; animation: acilis-gir 600ms 80ms var(--egri) both; }
.acilis__yol { inline-size: 150px; block-size: 4px; border-radius: 4px; background: rgb(var(--cizgi) / .1); overflow: hidden; margin-block-start: 6px; }
.acilis__yol span {
  display: block; inline-size: 40%; block-size: 100%; border-radius: inherit; background: rgb(var(--vurgu));
  animation: acilis-yol 1.1s var(--egri) infinite; /* sonsuz: yalnız açılış sürerken */
}
/* Okuma yönünde akar. transform bileşik katmanda yürür: örnek veri kurulurken
   ana iş parçacığı meşgulken de çubuk takılmadan döner. */
[dir="rtl"] .acilis__yol span { animation-name: acilis-yol-ters; }
.acilis__metin { font-size: .85rem; color: rgb(var(--metin-3)); min-block-size: 1.4em; }
/* Azaltılmış harekette kayan çubuk yerine sakin, dolu bir yol: tek seferlik
   1 ms'lik hareket çubuğu yolun dışında bırakıyordu (ilerleme görünmüyordu). */
@media (prefers-reduced-motion: reduce) { .acilis__yol span { animation: none; inline-size: 100%; opacity: .45; } }
@keyframes acilis-gir { from { opacity: 0; transform: translateY(8px) scale(.94); } }
@keyframes acilis-yol { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@keyframes acilis-yol-ters { from { transform: translateX(100%); } to { transform: translateX(-250%); } }

/* ======================================================================
   Kabuk
   ====================================================================== */
.kabuk { display: grid; grid-template-columns: var(--kenar-en) minmax(0, 1fr); min-block-size: 100dvh; }
.kabuk[hidden] { display: none; }
html.menu-dar .kabuk { grid-template-columns: var(--kenar-dar) minmax(0, 1fr); }
body.giris-modu .kabuk { display: none; }
.ana { min-inline-size: 0; display: flex; flex-direction: column; }
.icerik { flex: 1; min-inline-size: 0; padding-block: 26px 56px; padding-inline: clamp(16px, 2.6vw, 36px); }
.icerik > .bantlar, .sayfa { max-inline-size: var(--icerik-en); margin-inline: auto; }
.sayfa:focus { outline: none; }
.sayfa > * + * { margin-block-start: 20px; }
/* Yalnız ekran okuyucuya görünen başlık (kasa, satış listesi) ilk çocuk:
   ardındaki sekme şeridi 20 px aşağı itiliyor, kasa öbür sayfalardan alçak
   başlıyordu. */
.sayfa > .gorunmez:first-child + * { margin-block-start: 0; }
.sayfa > .sayfa-bas { margin-block-end: 0; }
.sayfa-giris { animation: sayfa-gir var(--hiz-4) var(--egri); }
@keyframes sayfa-gir { from { opacity: 0; transform: translateY(8px); } }
.sirali > * { animation: sirali-gir var(--hiz-4) var(--egri) both; animation-delay: calc(var(--i, 0) * 32ms); }
@keyframes sirali-gir { from { opacity: 0; transform: translateY(6px); } }
/* Bütün bölümlerde aynı giriş ritmi: sayfa süzülürken KPI şeridi panelin
   sirala() ritmiyle (32 ms arayla) gelir. Yalnız sayfaya girişte: sınıf bir
   sonraki gezinmede yeniden takılır; aynı kartın içi güncellenince oynamaz. */
.sayfa-giris .kpi-izgara > * { animation: sirali-gir var(--hiz-4) var(--egri) both; }
.sayfa-giris .kpi-izgara > :nth-child(2) { animation-delay: 32ms; }
.sayfa-giris .kpi-izgara > :nth-child(3) { animation-delay: 64ms; }
.sayfa-giris .kpi-izgara > :nth-child(4) { animation-delay: 96ms; }
.sayfa-giris .kpi-izgara > :nth-child(5) { animation-delay: 128ms; }
.sayfa-giris .kpi-izgara > :nth-child(n+6) { animation-delay: 160ms; }

/* ======================================================================
   Kenar çubuğu
   ====================================================================== */
.kenar {
  position: sticky; inset-block-start: 0; z-index: 60; block-size: 100dvh;
  display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(180deg, rgb(var(--kenar-1)) 0%, rgb(var(--kenar-2)) 100%);
  color: rgb(255 255 255 / .9);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .03);
  scrollbar-color: rgb(255 255 255 / .15) transparent;
}
/* Tepede vurgu renginde yumuşak ışık; kolon düz bir blok gibi durmasın. */
.kenar::before {
  content: ''; position: absolute; z-index: 0; inset-block-start: -120px; inset-inline-start: -80px; inline-size: 340px; block-size: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--vurgu-acik) / .22), transparent 65%); pointer-events: none;
}
.kenar > * { position: relative; z-index: 1; }
.kenar :focus-visible { outline: 2px solid rgb(var(--vurgu-acik)); outline-offset: -2px; }
.kenar__marka {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0; padding-block: 20px 16px; padding-inline: 20px 16px;
  color: inherit; text-decoration: none;
}
.kenar__logo { display: flex; flex-shrink: 0; filter: drop-shadow(0 6px 14px rgb(0 0 0 / .35)); transition: transform var(--hiz-3) var(--egri-yay); }
.kenar__marka:hover .kenar__logo { transform: rotate(-8deg) scale(1.05); }
.kenar__marka-metin { display: flex; flex-direction: column; min-inline-size: 0; line-height: 1.3; }
.kenar__marka-metin b { font-size: 1.22rem; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.kenar__marka-metin span { font-size: .75rem; color: rgb(255 255 255 / .58); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.menu { flex: 1; display: flex; flex-direction: column; gap: 3px; padding-block: 6px 12px; padding-inline: 12px; overflow-y: auto; overflow-x: hidden; }
.menu__oge {
  --t: var(--ton-panel-acik);
  position: relative; display: flex; align-items: center; gap: 12px; flex-shrink: 0;
  min-block-size: 44px; padding-inline: 7px 10px; border-radius: 13px;
  color: rgb(255 255 255 / .74); font-size: .925rem; font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: background var(--hiz-2) var(--egri), color var(--hiz-2) var(--egri), box-shadow var(--hiz-3) var(--egri);
}
.menu__oge[data-bolum="ilac"] { --t: var(--ton-ilac-acik); }
.menu__oge[data-bolum="stok"] { --t: var(--ton-stok-acik); }
.menu__oge[data-bolum="alis"] { --t: var(--ton-alis-acik); }
.menu__oge[data-bolum="satis"] { --t: var(--ton-satis-acik); }
.menu__oge[data-bolum="tedarikci"] { --t: var(--ton-tedarikci-acik); }
.menu__oge[data-bolum="musteri"] { --t: var(--ton-musteri-acik); }
.menu__oge[data-bolum="masraf"] { --t: var(--ton-masraf-acik); }
.menu__oge[data-bolum="rapor"] { --t: var(--ton-rapor-acik); }
.menu__oge[data-bolum="ayar"] { --t: var(--ton-ayar-acik); }
.menu__oge[data-bolum="yonetim"] { --t: var(--ton-yonetim-acik); }
.menu__oge:hover { background: rgb(255 255 255 / .06); color: #fff; }
.menu__oge:active { transform: scale(.985); }
.menu__simge {
  display: grid; place-items: center; inline-size: 32px; block-size: 32px; flex-shrink: 0; border-radius: 10px;
  background: rgb(var(--t) / .14); color: rgb(var(--t));
  box-shadow: inset 0 0 0 1px rgb(var(--t) / .1);
  transition: background var(--hiz-2) var(--egri), color var(--hiz-2) var(--egri), transform var(--hiz-3) var(--egri-yay);
}
.menu__oge:hover .menu__simge { transform: scale(1.06); background: rgb(var(--t) / .2); }
.menu__ad { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }
/* Seçili öğe: vurgu renginde parlayan hap. */
.menu__oge[aria-current="page"] {
  color: #fff; font-weight: 700;
  background: linear-gradient(180deg, rgb(var(--vurgu)) 0%, rgb(var(--vurgu-koyu)) 100%);
  box-shadow: 0 10px 24px -8px rgb(var(--vurgu) / .75), 0 0 0 1px rgb(255 255 255 / .08), inset 0 1px 0 rgb(255 255 255 / .22);
}
.menu__oge[aria-current="page"] .menu__simge { background: rgb(255 255 255 / .2); color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18); }
.menu__oge[aria-current="page"]::after {
  content: ''; position: absolute; inset-block: 12px; inset-inline-start: -12px; inline-size: 4px; border-start-end-radius: 4px; border-end-end-radius: 4px;
  background: rgb(var(--vurgu-acik)); box-shadow: 0 0 12px rgb(var(--vurgu-acik) / .9);
}
.menu__sayi {
  min-inline-size: 22px; padding-inline: 6px; border-radius: var(--r-tam); text-align: center;
  font-size: .7rem; font-weight: 800; line-height: 1.7; font-variant-numeric: tabular-nums;
  background: rgb(251 191 36); color: rgb(66 32 6);
}
.menu__sayi--tehlike { background: rgb(248 113 113); color: rgb(69 10 10); }
.menu__ayrac { block-size: 1px; margin-block: 10px; margin-inline: 8px; background: rgb(255 255 255 / .09); flex-shrink: 0; }

.kenar__ayak { display: flex; align-items: center; gap: 6px; padding: 12px; border-block-start: 1px solid rgb(255 255 255 / .07); flex-shrink: 0; }
.kenar__kullanici {
  display: flex; align-items: center; gap: 10px; flex: 1; min-inline-size: 0; padding: 6px; border: 0; border-radius: 12px;
  background: none; color: inherit; text-align: start; cursor: pointer; transition: background var(--hiz-1) var(--egri);
}
.kenar__kullanici:hover { background: rgb(255 255 255 / .06); }
.kenar__kullanici-metin { display: flex; flex-direction: column; min-inline-size: 0; line-height: 1.35; }
.kenar__kullanici-metin b { font-size: .85rem; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kenar__kullanici-metin span { font-size: .72rem; color: rgb(255 255 255 / .55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kenar__daralt {
  display: grid; place-items: center; inline-size: 36px; block-size: 36px; flex-shrink: 0; border: 0; border-radius: 10px;
  background: rgb(255 255 255 / .05); color: rgb(255 255 255 / .7); cursor: pointer;
}
.kenar__daralt:hover { background: rgb(255 255 255 / .1); color: #fff; }
.kenar .avatar { box-shadow: 0 0 0 2px rgb(255 255 255 / .12); }

/* Dar kenar çubuğu (masaüstü): yalnız simgeler. */
@media (min-width: 901px) {
  html.menu-dar .kenar__marka { justify-content: center; padding-inline: 0; }
  html.menu-dar .kenar__marka-metin, html.menu-dar .menu__ad, html.menu-dar .kenar__kullanici-metin { display: none; }
  html.menu-dar .menu { padding-inline: 14px; }
  html.menu-dar .menu__oge { justify-content: center; padding-inline: 0; }
  html.menu-dar .menu__oge[aria-current="page"]::after { inset-inline-start: -14px; }
  html.menu-dar .menu__sayi { position: absolute; inset-block-start: 2px; inset-inline-end: 0; min-inline-size: 18px; padding-inline: 4px; font-size: .62rem; line-height: 1.55; }
  html.menu-dar .kenar__ayak { flex-direction: column; }
  html.menu-dar .kenar__kullanici { justify-content: center; flex: none; }
}

.kenar-perde { display: none; }

/* ======================================================================
   Üst çubuk
   ====================================================================== */
.ust {
  position: sticky; inset-block-start: 0; z-index: 50; display: flex; align-items: center; gap: 8px;
  block-size: var(--ust-boy); padding-inline: clamp(16px, 2.6vw, 36px);
  background: rgb(var(--cam)); backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5);
  border-block-end: 1px solid rgb(var(--cizgi) / .07);
}
.ust__logo { display: none; flex-shrink: 0; border-radius: 10px; }
.ust__ara {
  display: flex; align-items: center; gap: 10px; inline-size: clamp(240px, 32vw, 440px); block-size: 40px; padding-inline: 12px 8px;
  border: 1px solid rgb(var(--cizgi) / .12); border-radius: 12px; background: rgb(var(--yuzey));
  color: rgb(var(--metin-3)); font-size: .9rem; text-align: start; cursor: text;
  box-shadow: var(--golge-1); transition: border-color var(--hiz-1) var(--egri), box-shadow var(--hiz-1) var(--egri);
}
.ust__ara:hover { border-color: rgb(var(--cizgi) / .22); }
.ust__ara-metin { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ust__ara-kisayol { display: flex; gap: 3px; }
.ust__bosluk { flex: 1; }
.ust__tarih {
  display: inline-flex; align-items: center; gap: 8px; block-size: 36px; padding-inline: 12px; border-radius: var(--r-tam);
  background: rgb(var(--yuzey)); border: 1px solid rgb(var(--cizgi) / .1); color: rgb(var(--metin-2));
  font-size: .8125rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.ust__tarih .simge { color: rgb(var(--vurgu-metin)); }
.ust__dugme { position: relative; color: rgb(var(--metin-2)); }
/* Sayı rozeti zilin bitiş-üst köşesine oturur, zilin gövdesine değil: sağ
   üstten sabitlenince iki haneli sayı simgenin yarısını örtüyordu. Başlangıç
   kenarı simge merkezinin biraz ötesinden başlar; sayı büyüdükçe dışarı uzar. */
.ust__zil-sayi {
  position: absolute; inset-block-start: 2px; inset-inline-start: 21px; min-inline-size: 18px; block-size: 18px; padding-inline: 4px;
  line-height: 1; pointer-events: none;
  /* Kenar çubuğu sayaçlarıyla aynı renkler: amber üstünde koyu yazı; beyaz
     yazı amberde 3:1'in, karanlık temanın açık kırmızısında 2.8:1'in altındaydı. */
  display: grid; place-items: center; border-radius: var(--r-tam); background: rgb(251 191 36); color: rgb(66 32 6);
  font-size: .62rem; font-weight: 800; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px rgb(var(--bg));
  animation: rozet-zipla 500ms var(--egri-yay);
}
.ust__zil-sayi--tehlike { background: rgb(220 38 38); color: #fff; }
@keyframes rozet-zipla { from { transform: scale(.4); } }
.ust__esitleme { display: flex; }
.ust__esitleme--calisiyor .simge { animation: don 1s linear infinite; /* sonsuz: eşitleme sürerken */ }
.ust__esitleme--hata .simge { color: rgb(var(--tehlike)); }
.ust__esitleme--cevrimdisi .simge { color: rgb(var(--uyari)); }
.ust__esitleme--bos .simge { color: rgb(var(--basari)); }
.ust__esitleme-sayi { position: absolute; inset-block-end: 2px; inset-inline-start: 24px; line-height: 1; font-size: .58rem; font-weight: 800; color: rgb(var(--metin-2)); }
.ust__kullanici {
  display: grid; place-items: center; inline-size: 40px; block-size: 40px; padding: 0; border: 0; border-radius: 50%;
  background: none; cursor: pointer; transition: box-shadow var(--hiz-2) var(--egri);
}
.ust__kullanici:hover, .ust__kullanici[aria-expanded="true"] { box-shadow: 0 0 0 3px rgb(var(--vurgu) / .2); }

/* Zil kutusu */
.zil-kutu { inline-size: 360px; padding: 6px; }
.zil-kutu__bas { display: flex; align-items: center; justify-content: space-between; padding-block: 8px; padding-inline: 10px; }
.zil-kutu__liste { display: grid; gap: 2px; }
.zil-kutu__oge {
  display: flex; align-items: center; gap: 12px; inline-size: 100%; padding: 10px; border: 0; border-radius: 12px;
  background: none; color: inherit; text-align: start; text-decoration: none; cursor: pointer; font: inherit;
}
.zil-kutu__oge:hover, .zil-kutu__oge:focus-visible { background: rgb(var(--cizgi) / .05); outline: none; }
.zil-kutu__simge { display: grid; place-items: center; inline-size: 38px; block-size: 38px; flex-shrink: 0; border-radius: 11px; background: rgb(var(--uyari) / .13); color: rgb(var(--uyari-metin)); }
.zil-kutu__simge--tehlike { background: rgb(var(--tehlike) / .12); color: rgb(var(--tehlike-metin)); }
.zil-kutu__simge--bilgi { background: rgb(var(--bilgi) / .12); color: rgb(var(--bilgi-metin)); }
.zil-kutu__metin { display: flex; flex-direction: column; flex: 1; min-inline-size: 0; line-height: 1.4; }
.zil-kutu__metin b { font-size: .875rem; }
.zil-kutu__metin span { font-size: .78rem; color: rgb(var(--metin-3)); }
.zil-kutu__ok { color: rgb(var(--metin-3)); flex-shrink: 0; }
.zil-kutu__bos { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-block: 24px; text-align: center; }
.zil-kutu__bos span { color: rgb(var(--metin-3)); font-size: .8125rem; }
.zil-kutu__bos-simge { display: grid; place-items: center; inline-size: 52px; block-size: 52px; margin-block-end: 6px; border-radius: 50%; background: rgb(var(--basari) / .12); color: rgb(var(--basari-metin)); }
.zil-kutu__bos .zil-kutu__bos-simge { color: rgb(var(--basari-metin)); }

/* Kullanıcı kutusu: hesap, tema, vurgu, dil */
.kullanici-kutu { inline-size: 330px; padding: 8px; }
.kullanici-kutu__bas { display: flex; align-items: center; gap: 12px; padding: 10px; margin-block-end: 4px; border-radius: 12px; background: rgb(var(--cizgi) / .035); }
.kullanici-kutu__kim { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-inline-size: 0; line-height: 1.3; }
.kullanici-kutu__kim b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-inline-size: 100%; }
.kullanici-kutu__kim > span { font-size: .78rem; color: rgb(var(--metin-3)); overflow: hidden; text-overflow: ellipsis; max-inline-size: 100%; }
.kullanici-kutu__bolum { display: grid; gap: 8px; padding-block: 10px; padding-inline: 10px; border-block-end: 1px solid rgb(var(--cizgi) / .06); }
.kullanici-kutu__bolum .segmentli { display: flex; }
.kullanici-kutu__etiket { font-size: .72rem; font-weight: 700; color: rgb(var(--metin-3)); }
.kullanici-kutu__satirlar { display: grid; padding-block: 6px; }
.kullanici-kutu__satir {
  display: flex; align-items: center; gap: 10px; min-block-size: 40px; padding-inline: 10px; border: 0; border-radius: 10px;
  background: none; color: inherit; text-align: start; cursor: pointer; font-size: .9rem;
}
.kullanici-kutu__satir span { flex: 1; }
.kullanici-kutu__satir .simge { color: rgb(var(--metin-3)); }
.kullanici-kutu__satir:hover { background: rgb(var(--cizgi) / .05); }
.kullanici-kutu__satir--tehlike, .kullanici-kutu__satir--tehlike .simge { color: rgb(var(--tehlike-metin)); }
.kullanici-kutu__surum { padding-block: 6px 2px; text-align: center; font-size: .7rem; color: rgb(var(--metin-3)); }
.vurgu-secici { display: flex; gap: 10px; }
.vurgu-secici__oge {
  display: grid; place-items: center; inline-size: 30px; block-size: 30px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--ornek); color: transparent; box-shadow: 0 0 0 2px rgb(var(--yuzey)), 0 0 0 3px transparent;
  transition: box-shadow var(--hiz-2) var(--egri), transform var(--hiz-2) var(--egri-yay);
}
.vurgu-secici__oge:hover { transform: scale(1.1); }
.vurgu-secici__oge[aria-checked="true"] { color: #fff; box-shadow: 0 0 0 2px rgb(var(--yuzey)), 0 0 0 4px var(--ornek); }
.dil-secici { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.dil-secici__oge {
  min-block-size: 36px; border: 1px solid rgb(var(--cizgi) / .12); border-radius: 10px; background: rgb(var(--yuzey));
  color: inherit; cursor: pointer; font-size: .875rem; font-weight: 600;
}
.dil-secici__oge:hover { border-color: rgb(var(--cizgi) / .25); }
.dil-secici__oge[aria-pressed="true"] { border-color: rgb(var(--vurgu)); background: rgb(var(--vurgu) / .1); color: rgb(var(--vurgu-metin)); }

/* Kısayol yardımı */
.kisayol-listesi { display: grid; gap: 8px; }
.kisayol-listesi h3 { margin-block: 8px 4px; font-size: .8rem; color: rgb(var(--metin-3)); }
.kisayol-listesi dl { margin: 0; display: grid; }
.kisayol-listesi__satir { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 7px; border-block-end: 1px dashed rgb(var(--cizgi) / .08); }
.kisayol-listesi dd { margin: 0; display: flex; gap: 6px; }

/* ======================================================================
   Genel arama paleti
   ====================================================================== */
.katman-ortu:has(.katman--arama) { place-items: start center; padding-block-start: min(12vh, 110px); }
.katman--arama { inline-size: min(680px, 100%); max-block-size: min(620px, calc(100dvh - 24vh)); overflow: hidden; }
.katman--arama .katman__bas { display: none; }
.katman--arama .katman__govde { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.arama { display: flex; flex-direction: column; min-block-size: 0; flex: 1; }
.arama__kutu { display: flex; align-items: center; gap: 12px; padding-block: 6px; padding-inline: 18px 14px; border-block-end: 1px solid rgb(var(--cizgi) / .08); color: rgb(var(--metin-3)); }
.arama__girdi { flex: 1; min-inline-size: 0; block-size: 56px; border: 0; background: none; color: rgb(var(--metin)); font: inherit; font-size: 1.05rem; }
.arama__girdi:focus { outline: none; }
.arama__girdi::-webkit-search-cancel-button { display: none; }
.arama__sonuc { flex: 1; overflow: auto; padding: 8px; overscroll-behavior: contain; }
.arama__grup { padding-block: 10px 4px; padding-inline: 10px; font-size: .72rem; font-weight: 700; color: rgb(var(--metin-3)); }
.arama__oge {
  display: flex; align-items: center; gap: 12px; min-block-size: 50px; padding-block: 6px; padding-inline: 10px; border-radius: 12px; cursor: pointer;
}
.arama__oge--aktif { background: rgb(var(--vurgu) / .09); }
.arama__simge { display: grid; place-items: center; inline-size: 34px; block-size: 34px; flex-shrink: 0; border-radius: 10px; background: rgb(var(--ton) / .12); color: rgb(var(--ton)); }
.arama__metin { display: flex; flex-direction: column; flex: 1; min-inline-size: 0; line-height: 1.35; }
.arama__metin b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arama__metin span { font-size: .78rem; color: rgb(var(--metin-3)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arama__ok { color: rgb(var(--metin-3)); opacity: 0; transition: opacity var(--hiz-1) var(--egri); flex-shrink: 0; }
.arama__oge--aktif .arama__ok { opacity: 1; }
.arama__bos { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-block: 36px; color: rgb(var(--metin-3)); text-align: center; }
.arama__bos b { color: rgb(var(--metin)); margin-block-start: 6px; }
.arama__ipucu { display: flex; gap: 16px; flex-wrap: wrap; padding-block: 10px; padding-inline: 16px; border-block-start: 1px solid rgb(var(--cizgi) / .08); background: rgb(var(--yuzey-2)); font-size: .75rem; color: rgb(var(--metin-3)); }
.arama__ipucu span { display: inline-flex; align-items: center; gap: 4px; }
@media (hover: none) { .arama__ipucu { display: none; } }

/* ======================================================================
   Alt çubuk (telefon)
   ====================================================================== */
.alt-cubuk { display: none; }

/* ======================================================================
   Sayfa yerleşimleri (sayfa ajanları bunları kullanır)
   ====================================================================== */
.yigin { display: grid; gap: 16px; align-content: start; min-inline-size: 0; }
.yigin--sik { gap: 8px; }
.satir-arasi { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.izgara-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.izgara-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.izgara-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; }
.izgara-esit { align-items: stretch; }
/* Ana sütun + yan panel (ayrıntı sayfaları: solda/sağda özet kartı). */
.iki-sutun { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 16px; align-items: start; }
.iki-sutun--yan-bas { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); }
/* Kasa (POS): solda ürün arama ve sepet satırları, yanda ödeme paneli. */
.pos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); gap: 16px; align-items: start; }
.pos__yan { position: sticky; inset-block-start: calc(var(--ust-boy) + 16px); display: grid; gap: 16px; }
.pos__toplam { font-size: var(--f-2xl); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
@media (max-width: 1200px) {
  .izgara-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .izgara-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .iki-sutun, .iki-sutun--yan-bas { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1000px) {
  .pos { grid-template-columns: minmax(0, 1fr); }
  .pos__yan { position: static; }
}
@media (max-width: 860px) {
  .izgara-2, .izgara-3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .izgara-4 { grid-template-columns: minmax(0, 1fr); }
}

/* ======================================================================
   Telefon ve dar ekran
   ====================================================================== */
@media (max-width: 1100px) {
  .ust__tarih { display: none; }
}
@media (max-width: 900px) {
  .kabuk, html.menu-dar .kabuk { grid-template-columns: minmax(0, 1fr); }
  /* Kenar çubuğu çekmece olur: başlangıç kenarından kayar. */
  .kenar {
    position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 120; inline-size: min(300px, 86vw); block-size: 100dvh;
    transform: translateX(var(--kenar-gizli, -105%)); visibility: hidden;
    box-shadow: 0 0 60px rgb(0 0 0 / .4);
  }
  [dir="rtl"] .kenar { --kenar-gizli: 105%; }
  body.menu-hazir .kenar { transition: transform var(--hiz-4) var(--egri), visibility var(--hiz-4); }
  body.menu-acik .kenar { transform: none; visibility: visible; }
  .kenar-perde {
    display: block; position: fixed; inset: 0; z-index: 110; background: rgb(var(--ortu)); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity var(--hiz-3) var(--egri);
  }
  body.menu-acik .kenar-perde { opacity: 1; pointer-events: auto; }
  body.menu-acik { overflow: hidden; }
  .kenar__daralt { display: none; }

  .ust { gap: 4px; padding-inline: 12px 8px; }
  .ust__logo { display: flex; margin-inline-end: 6px; }
  .ust__ara { inline-size: auto; flex: 1; min-inline-size: 0; block-size: 38px; }
  .ust__ara-kisayol { display: none; }
  .ust__bosluk { display: none; }

  .icerik { padding-block: 16px calc(var(--alt-cubuk) + var(--guvenli-alt) + 24px); padding-inline: 16px; }
  .sayfa > * + * { margin-block-start: 16px; }

  .alt-cubuk {
    position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 70; display: grid; grid-template-columns: repeat(5, 1fr);
    block-size: calc(var(--alt-cubuk) + var(--guvenli-alt)); padding-block-end: var(--guvenli-alt); padding-inline: 4px;
    background: rgb(var(--cam)); backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5);
    border-block-start: 1px solid rgb(var(--cizgi) / .08); box-shadow: 0 -8px 24px -12px rgb(0 0 0 / .12);
  }
  .alt-cubuk__oge {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-inline-size: 0;
    border: 0; background: none; color: rgb(var(--metin-3)); font: inherit; font-size: .7rem; font-weight: 600; text-decoration: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .alt-cubuk__oge > span:last-child { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .alt-cubuk__simge { display: grid; place-items: center; inline-size: 52px; block-size: 30px; border-radius: var(--r-tam); transition: background var(--hiz-2) var(--egri), transform var(--hiz-2) var(--egri-yay); }
  .alt-cubuk__oge:active .alt-cubuk__simge { transform: scale(.9); }
  .alt-cubuk__oge[aria-current="page"], .alt-cubuk__daha[aria-expanded="true"] { color: rgb(var(--vurgu-metin)); }
  .alt-cubuk__oge[aria-current="page"] .alt-cubuk__simge { background: rgb(var(--vurgu) / .14); }

  .bildirimler { inset-block-end: calc(var(--alt-cubuk) + var(--guvenli-alt) + 12px); }
  .zil-kutu, .kullanici-kutu { inline-size: min(360px, calc(100vw - 16px)); }
}
@media (max-width: 480px) {
  .sayfa-bas { gap: 12px; }
  .sayfa-bas__simge { inline-size: 42px; block-size: 42px; border-radius: 12px; }
  /* Başlık gövdesi geri oku ve simge karosuyla aynı satırda kalır: 260 px
     taban genişliği telefonda ayrıntı sayfalarının başlığını alt satıra
     itiyor, ok ile karo tek başına bir satır kaplıyordu. Eylemler zaten
     ayrı satırda. */
  .sayfa-bas__govde { flex-basis: 0; }
  /* Telefonda sayfa eylemleri tam satır; asıl eylem (sonuncu) genişler. */
  .sayfa-bas__eylem { inline-size: 100%; }
  .sayfa-bas__eylem > * { flex: 1 1 auto; }
  .kart { padding: 16px; border-radius: 14px; }
  .kart--tablo { padding: 0; }
  .ust__ara-metin { font-size: .85rem; }
}

/* ======================================================================
   Giriş kökü (giriş ekranı kendi stilini getirir; burada taslağınki)
   ====================================================================== */
.giris-kok { min-block-size: 100dvh; }
.giris-kok[hidden] { display: none; }
.giris-taslak {
  display: grid; place-items: center; min-block-size: 100dvh; padding: 24px;
  background: radial-gradient(70% 60% at 50% 20%, rgb(var(--vurgu) / .16), transparent 70%), linear-gradient(180deg, rgb(var(--kenar-1)), rgb(var(--kenar-2)));
}
.giris-taslak__kart {
  display: flex; flex-direction: column; align-items: center; gap: 10px; inline-size: min(420px, 100%); padding: 36px 28px; text-align: center;
  border-radius: 24px; background: rgb(var(--yuzey)); box-shadow: var(--golge-4);
}
.giris-taslak__kart h1 { margin: 8px 0 0; font-size: 1.8rem; }
.giris-taslak__kart p { color: rgb(var(--metin-3)); margin-block-end: 12px; }

/* ======================================================================
   Yer tutucu ("hazırlanıyor") ve 404
   ====================================================================== */
.yapim { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding-block: 56px; }
.yapim__sahne { position: relative; display: grid; place-items: center; inline-size: 150px; block-size: 150px; margin-block-end: 12px; }
.yapim__halka { position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed rgb(var(--ton) / .3); animation: yapim-don 18s linear 2; }
.yapim__halka--2 { inset: 22px; border-style: solid; border-color: rgb(var(--ton) / .12); background: rgb(var(--ton) / .05); animation-direction: reverse; }
.yapim__simge {
  position: relative; display: grid; place-items: center; inline-size: 76px; block-size: 76px; border-radius: 22px;
  background: linear-gradient(145deg, rgb(var(--ton) / .26), rgb(var(--ton) / .1)); color: rgb(var(--ton));
  box-shadow: 0 16px 34px -14px rgb(var(--ton) / .6), inset 0 0 0 1px rgb(var(--ton) / .2);
  animation: yapim-suz 3.2s ease-in-out 3;
}
@keyframes yapim-don { to { transform: rotate(1turn); } }
@keyframes yapim-suz { 50% { transform: translateY(-6px); } }
.yapim__baslik { margin: 0; font-size: 1.25rem; }
.yapim__metin { max-inline-size: 46ch; color: rgb(var(--metin-3)); }

.bulunamadi { display: flex; flex-direction: column; align-items: center; text-align: center; padding-block: 40px 24px; }
.bulunamadi__sahne { position: relative; display: grid; place-items: center; margin-block-end: 8px; }
.bulunamadi__kod {
  font-size: clamp(5rem, 3rem + 10vw, 8.5rem); font-weight: 900; letter-spacing: -.05em; line-height: 1;
  background: linear-gradient(135deg, rgb(var(--vurgu-acik)), rgb(var(--vurgu-koyu))); -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: .9;
}
.bulunamadi__simge {
  position: absolute; display: grid; place-items: center; inline-size: 74px; block-size: 74px; border-radius: 50%;
  background: rgb(var(--yuzey)); color: rgb(var(--vurgu-metin)); box-shadow: var(--golge-3); animation: yapim-suz 3s ease-in-out 3;
}
.bulunamadi h1 { margin-block: 18px 6px; }
.bulunamadi__metin { color: rgb(var(--metin-3)); }
.bulunamadi__adres { padding-block: 4px; padding-inline: 10px; border-radius: 8px; background: rgb(var(--cizgi) / .06); color: rgb(var(--metin-2)); }
.bulunamadi__eylem { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-block: 22px 30px; }
/* Dokuz bölüm 3 × 3: dörtlü ızgarada «تنظیمات» tek başına son satırda kalıyordu. */
.bulunamadi__baglantilar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; inline-size: min(620px, 100%); }
.bulunamadi__baglantilar a {
  display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; border: var(--kenarlik); background: rgb(var(--yuzey));
  color: inherit; text-decoration: none; font-weight: 600; font-size: .875rem; transition: transform var(--hiz-2) var(--egri), box-shadow var(--hiz-2) var(--egri);
}
.bulunamadi__baglantilar a:hover { transform: translateY(-2px); box-shadow: var(--golge-3); }
.bulunamadi__baglantilar a:active { transform: translateY(0) scale(.99); }
.bulunamadi__karo { display: grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: 10px; background: rgb(var(--ton) / .12); color: rgb(var(--ton)); flex-shrink: 0; }
@media (max-width: 480px) {
  /* Telefonda karo üstte, ad altta: üç sütun sığsın. */
  .bulunamadi__baglantilar { gap: 8px; }
  .bulunamadi__baglantilar a { flex-direction: column; gap: 6px; padding-block: 12px; padding-inline: 4px; text-align: center; font-size: .8rem; }
}

/* ======================================================================
   Vitrin (#/vitrin)
   ====================================================================== */
.vitrin__icindekiler {
  position: sticky; inset-block-start: var(--ust-boy); z-index: 20; display: flex; gap: 4px; overflow-x: auto; padding-block: 8px;
  background: rgb(var(--bg) / .9); backdrop-filter: blur(10px); scrollbar-width: none;
  /* Sığmayan sekmeler kenarda kesik değil, solarak biter: kaydırılabildiği belli olsun.
     Simetrik olduğu için RTL'de ayrı kural gerekmez. */
  padding-inline: 16px; margin-inline: -12px; /* telefonda 16px kenar boşluğunu aşmaz */
  mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
}
.vitrin__bolum { scroll-margin-block-start: calc(var(--ust-boy) + 64px); display: grid; gap: 16px; padding-block-start: 12px; }
.vitrin__bas h2 { margin: 0; font-size: 1.15rem; }
.vitrin__bas p { margin: 2px 0 0; color: rgb(var(--metin-3)); font-size: .875rem; }
.vitrin__satir { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vitrin__oge { display: grid; gap: 6px; }
.vitrin__etiket { font-size: .72rem; font-weight: 700; color: rgb(var(--metin-3)); }
.vitrin__dar { inline-size: 320px; max-inline-size: calc(100vw - 32px); }
.vitrin__bosluk { block-size: 12px; }
.vitrin__renk { display: flex; flex-direction: column; align-items: center; gap: 6px; inline-size: 92px; font-size: .7rem; }
.vitrin__renk-ornek { inline-size: 56px; block-size: 40px; border-radius: 10px; background: rgb(var(--renk)); box-shadow: inset 0 0 0 1px rgb(var(--cizgi) / .12); }
.vitrin__bolum-tonlari { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.vitrin__ton { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: rgb(var(--yuzey)); border: var(--kenarlik); font-weight: 600; font-size: .875rem; }
.vitrin__ton-karo { display: grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: 11px; background: rgb(var(--ton) / .14); color: rgb(var(--ton)); }
.vitrin__logolar { display: flex; align-items: center; gap: 16px; }
.vitrin__logo-koyu { display: grid; place-items: center; padding: 10px; border-radius: 16px; background: linear-gradient(180deg, rgb(var(--kenar-1)), rgb(var(--kenar-2))); }
.vitrin__logo-tek { display: grid; place-items: center; padding: 10px; border-radius: 16px; background: #fff; color: #000; }
.vitrin__yazi h1, .vitrin__yazi h2 { margin-block: 0 8px; }
.vitrin__kivilcim { inline-size: 220px; block-size: 48px; }
.vitrin__simgeler { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.vitrin__simge {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding-block: 14px 10px; padding-inline: 6px; border-radius: 12px;
  background: rgb(var(--yuzey)); border: var(--kenarlik); color: rgb(var(--metin-2));
}
.vitrin__simge code { font-size: .68rem; color: rgb(var(--metin-3)); overflow-wrap: anywhere; text-align: center; }
.vitrin__fisler { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }

/* ======================================================================
   Yazdırma çerçevesi ve sayfanın kendisi yazdırılırsa
   ====================================================================== */
.yazdir-cerceve { position: fixed; inset-block-start: 0; inset-inline-start: -9999px; block-size: 10px; border: 0; opacity: 0; pointer-events: none; }
@media print {
  .kenar, .ust, .alt-cubuk, .bantlar, .bildirimler, .kenar-perde, .vitrin__icindekiler { display: none !important; }
  .kabuk, html.menu-dar .kabuk { display: block; }
  .icerik { padding: 0; }
  body { background: #fff; }
}