/* Temel + kabuk + ortak bileşenler — Tasarım 2 "Atlas" (docs/tasarim/yonerge-2.md).
   Ekranlar ortak bileşenleri BURADAN kullanır, kopyalamaz. Esnaf paneli de bu dosyayı yükler.
   Renk, boşluk ve yarıçaplar yalnız tokens.css değişkenlerinden gelir.

   "Harita her yerde": harita tuval, içerik onun üstünde yaprak (sheet). Bölüm = zemin üstünde
   beyaz panel + lejant başlığı (anahtar karesi, 17/600, mono sayı). Ölçüler IBM Plex Mono.

   İçindekiler
     1  Sıfırlama ve temel
     2  Kabuk (#uygulama, .ekran, .ekran--tam)
     3  Alt çubuk (.alt-cubuk)
     4  Üst çubuk (.ust-cubuk, .ikon-dugme)
     5  Yerleşim: bant ve bölüm (.bant, .bolum-b, .b-satir), eski .bolum
     6  Düğmeler (.dugme ...)
     7  Çipler, segment, sekme çubuğu, anahtar
     8  Form alanları, arama kutusu
     9  Kart (esnaf), liste satırı
    10  Ürün satırı (.u-satir), ürün kartı (eski ızgara), yatay şerit
    11  Dükkân satırı ve kartı, logo, açık/kapalı, mesafe
    12  Rozetler
    13  Marka + model
    14  Alt panel
    15  Pencere
    16  Bildirim
    17  Boş durum, iskelet
    18  Harita (Leaflet) ortak
    19  Notlar, yardımcılar
*/

/* ================================================================ 1 temel */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0}
body{
  background:var(--yuzey-2);color:var(--murekkep);
  font-family:var(--sans);font-size:var(--y-govde);line-height:1.45;
  font-variant-numeric:tabular-nums;letter-spacing:0;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
  --alt-bosluk:0px;
  --ekran-alt-ek:0px;
}
/* Dok açıkken: kaydırılan alanın sonunda dok + taşan Ara + 16 px boşluk (ortak taban 6). */
body.alt-cubuk-acik{
  --alt-bosluk:calc(var(--alt-cubuk-h) + var(--dok-bosluk) + env(safe-area-inset-bottom, 0px));
  --ekran-alt-ek:calc(var(--ara-tasma) + 16px);
}
body.alt-cubuk-acik .katman--bildirim{bottom:calc(var(--alt-bosluk) + var(--ara-tasma) + 10px)}
h1,h2,h3,h4{margin:0;font-family:var(--sans);font-weight:600;line-height:1.25;letter-spacing:0}
p{margin:0 0 .75em}
a{color:var(--vurgu)}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--odak);outline-offset:2px}
::selection{background:var(--vurgu-yumusak)}
html.pencere-acik{overflow:hidden}
/* Ölçüler (mesafe, dakika, adet, saat) Plex Mono ile: haritanın ölçek dili. */
.olcu,.mesafe{font-family:var(--mono);font-weight:500;font-size:.93em;letter-spacing:-.01em;word-spacing:-.3em;white-space:nowrap}
.olcu b,.mesafe b{font-weight:600;color:var(--murekkep)}

/* ================================================================ 2 kabuk */
#uygulama{
  position:relative;max-width:var(--sutun);margin:0 auto;
  min-height:100vh;min-height:100dvh;background:var(--sayfa);
}
@media (min-width:481px){
  #uygulama{box-shadow:0 0 0 1px var(--kenar)}
}
.ekran{
  display:flow-root;min-height:100vh;min-height:100dvh;
  padding-bottom:calc(var(--alt-bosluk) + var(--ekran-alt-ek));
}
/* Tam ekran (harita) ekranları: harita dok'un ARKASINA kadar uzanır; yaprak dok'un üstünde durur. */
.ekran--tam{
  height:100vh;height:100dvh;min-height:0;overflow:hidden;
  display:flex;flex-direction:column;padding-bottom:0;position:relative;
}
.ekran--tam > .esnek{flex:1;min-height:0;position:relative}
.ekran:focus{outline:none}
.kabuk-yukleniyor{display:flex;align-items:center;justify-content:center;min-height:60vh;min-height:60dvh;color:var(--ikincil)}

/* ================================================================ 3 dok: yüzen alt çubuk */
/* Harita her yerde: gezinme de haritanın üstünde yüzen bir kapsül. Ortadaki Ara öne çıkık
   petrol kare (r 16), kapsülden 14 px taşar. Etkin sekme: petrol ikon + etiket + altında 3 px çizgi. */
.alt-cubuk{
  position:fixed;left:0;right:0;bottom:calc(var(--dok-bosluk) + env(safe-area-inset-bottom, 0px));
  margin:0 auto;max-width:calc(var(--sutun) - 2 * var(--dok-bosluk));width:calc(100% - 2 * var(--dok-bosluk));
  z-index:var(--z-cubuk);
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  height:var(--alt-cubuk-h);padding:0 2px;
  background:var(--yuzey);border-radius:20px;box-shadow:var(--golge-dok);
}
.alt-cubuk__dugme{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  height:var(--alt-cubuk-h);padding:4px 0 6px;
  color:var(--ikincil);text-decoration:none;
  font-size:12px;font-weight:500;line-height:1.2;
  -webkit-user-select:none;user-select:none;
}
.alt-cubuk__dugme:hover{color:var(--murekkep)}
.alt-cubuk__dugme:focus-visible{outline-offset:-4px;border-radius:14px}
.alt-cubuk__ikon{display:flex;align-items:center;justify-content:center;width:44px;height:28px;line-height:0}
.alt-cubuk__etiket{display:block;white-space:nowrap}
.alt-cubuk__dugme.etkin{color:var(--vurgu)}
.alt-cubuk__dugme.etkin .alt-cubuk__etiket{font-weight:600}
.alt-cubuk__dugme.etkin:not(.alt-cubuk__dugme--ara)::after{
  content:"";position:absolute;left:50%;bottom:5px;width:20px;height:3px;margin-left:-10px;border-radius:2px;background:var(--vurgu);
}
.alt-cubuk__dugme--ara{justify-content:flex-end}
.alt-cubuk__daire{
  position:absolute;left:50%;top:calc(-1 * var(--ara-tasma));
  width:var(--ara-cap);height:52px;margin-left:calc(var(--ara-cap) / -2);
  display:flex;align-items:center;justify-content:center;
  border-radius:16px;background:var(--vurgu);color:var(--vurgu-uzeri);
  box-shadow:0 0 0 4px var(--yuzey),var(--golge-ara);
  transition:transform var(--gecis-hizli) var(--egri),background var(--gecis-hizli);
}
.alt-cubuk__daire svg{stroke-width:2.1}
.alt-cubuk__dugme--ara:hover .alt-cubuk__daire,.alt-cubuk__dugme--ara.etkin .alt-cubuk__daire{background:var(--vurgu-koyu)}
.alt-cubuk__dugme--ara:active .alt-cubuk__daire{transform:scale(.95)}
.alt-cubuk__dugme--ara{color:var(--ikincil)}
.alt-cubuk__dugme--ara.etkin{color:var(--vurgu)}
.alt-cubuk__nokta{
  display:none;position:absolute;top:8px;left:calc(50% + 8px);
  width:10px;height:10px;border-radius:50%;background:var(--yok-fg);box-shadow:0 0 0 2px var(--yuzey);
}
.alt-cubuk__dugme.nokta-var .alt-cubuk__nokta{display:block}

/* ================================================================ 4 üst çubuk, yüzen düğme */
/* Harita dışı ekranlarda üst çubuk zeminle bir: sis, yarı saydam; başlık 19/600. */
.ust-cubuk{
  position:sticky;top:0;z-index:var(--z-yapiskan);
  background:var(--sayfa);background:color-mix(in srgb, var(--sayfa) 92%, transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid transparent;
  padding-top:env(safe-area-inset-top, 0px);
}
.ust-cubuk__satir{display:flex;align-items:center;gap:4px;min-height:var(--ust-cubuk-h);padding:0 4px 0 var(--kenar-bosluk)}
.ust-cubuk__geri{
  flex:none;width:44px;height:44px;margin-left:-8px;display:flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;background:var(--yuzey);color:var(--murekkep);box-shadow:inset 0 0 0 1px var(--kenar);
}
.ust-cubuk__geri:hover{background:var(--yuzey-2)}
.ust-cubuk__baslik{flex:1;min-width:0;padding-left:6px;font-size:var(--y-ekran);font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ust-cubuk__bosluk{flex:1}
.ust-cubuk__eylemler{flex:none;display:flex;align-items:center;gap:0;margin-left:auto}
.ust-cubuk--seffaf{background:transparent;border-bottom-color:transparent}
.ikon-dugme{
  position:relative;flex:none;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:12px;background:none;color:var(--murekkep);padding:0;
}
.ikon-dugme:hover{background:var(--yuzey-2)}
.ikon-dugme--kutulu{background:var(--yuzey);border:1px solid var(--kenar-orta)}
.ikon-dugme--kutulu:hover{background:var(--yuzey-2)}
/* Haritanın üstünde yüzen yuvarlak düğme (geri, paylaş, kalp, konum) */
.yuzen-dugme{
  position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  width:44px;height:44px;padding:0;border:0;border-radius:50%;
  background:var(--yuzey);color:var(--murekkep);box-shadow:var(--golge-harita-ust);text-decoration:none;
  font-size:14px;font-weight:600;
}
.yuzen-dugme:hover{background:var(--yuzey-2)}
.yuzen-dugme--metin{width:auto;height:40px;padding:0 14px 0 12px;border-radius:12px}
.yuzen-dugme--metin::after{content:"";position:absolute;left:0;right:0;top:-2px;bottom:-2px}
.yuzen-dugme--kalp.kalp-acik,.kompakt__kalp.kalp-acik{color:var(--yok-fg)}
/* Büyük başlık (harita dışı ekranların girişi): 28/600, altında tek satır özet. */
.buyuk-bas{padding:4px var(--kenar-bosluk) 12px}
.buyuk-bas__baslik{font-size:var(--y-dev);font-weight:600;line-height:1.2}
.buyuk-bas__alt{margin:4px 0 0;font-size:14px;color:var(--ikincil)}

/* ================================================================ 5 yerleşim: panel (bölüm) ve lejant başlığı */
.sayfa-ic{padding-left:var(--kenar-bosluk);padding-right:var(--kenar-bosluk)}

/* Bölüm = zemin üstünde beyaz PANEL (r 14, 1 px çizgi); başlığı harita lejantı gibi:
   solda 32 px anahtar karesi (ikon), 17/600 başlık, mono sayı hapı, sağda özet ya da bağlantı.
   Paneller arası 12 px zemin (ortak taban 7: görünür başlık + yüzey sınırı). */
.bolum-b{display:block;margin:12px 12px 0;background:var(--yuzey);border:1px solid var(--kenar);border-radius:var(--r-panel);overflow:hidden}
.bolum-b--bitisik{margin-top:0}
.bant{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:52px;padding:10px 12px 8px var(--kenar-bosluk);background:transparent;
}
.bant--anahtarli{justify-content:flex-start;padding-left:12px}
.bant--anahtarli > .bant__baslik{flex:1}
.bant__anahtar{
  flex:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border-radius:9px;background:var(--yuzey-2);color:var(--ikincil);
}
.bant__baslik{display:flex;align-items:center;flex-wrap:wrap;gap:0 8px;min-width:0;margin:0;font-size:var(--y-bant);font-weight:600;line-height:1.3;color:var(--murekkep)}
.bant__sayi{word-spacing:-.3em;font-family:var(--mono);font-size:12.5px;font-weight:500;line-height:20px;padding:0 6px;border-radius:5px;background:var(--yuzey-2);color:var(--ikincil);white-space:nowrap}
.bant__ozet{flex:none;font-size:var(--y-meta);font-weight:500;color:var(--ikincil);white-space:nowrap;text-align:right}
.bant__bag{
  position:relative;flex:none;display:inline-flex;align-items:center;gap:2px;min-height:44px;margin:-6px -4px;padding:0 4px;
  font-size:14px;font-weight:600;color:var(--vurgu);text-decoration:none;white-space:nowrap;
  border:0;background:none;
}
.bant__bag:hover{text-decoration:underline}
.bant__bag svg{width:16px;height:16px}
.bant--ince{min-height:40px}
/* Panelin dışında tek başına bant (liste başlığı): zemin üstünde, çizgisiz. */
/* Chrome 83: :not() içinde birleşik seçici (88) yerine "ebeveyni .bolum-b olmayan"; .bant.bant eski özgüllüğü (0,3,0) korur. */
:not(.bolum-b) > .bant.bant{padding-top:16px}

.bolum-b__govde{border-top:1px solid var(--kenar)}
.bolum-b__govde--dolgu{padding:12px var(--kenar-bosluk) 16px}
.bolum-b__alt-baslik{margin:0;padding:12px var(--kenar-bosluk) 4px;font-size:var(--y-govde);font-weight:600;color:var(--murekkep);border-top:1px solid var(--kenar)}
.panel-not{margin:0;padding:12px var(--kenar-bosluk);font-size:14px;color:var(--ikincil)}

/* Satır: 16 px yan dolgu, ayraç, 56–64 px */
.b-satir{
  position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:56px;
  padding:10px var(--kenar-bosluk);margin:0;
  border:0;border-bottom:1px solid var(--kenar);background:var(--yuzey);
  color:inherit;text-decoration:none;text-align:left;font-size:var(--y-govde);
}
.b-satir:last-child{border-bottom:0}
a.b-satir:hover,button.b-satir:hover{background:var(--yuzey-2);background:color-mix(in srgb, var(--yuzey-2) 55%, var(--yuzey))}
.b-satir__govde{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.b-satir__baslik{font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.b-satir__alt{font-size:var(--y-meta);color:var(--ikincil);line-height:1.4}
.b-satir__sag{flex:none;display:flex;align-items:center;gap:8px;font-size:var(--y-meta);color:var(--ikincil);white-space:nowrap}
.b-satir__ok{flex:none;display:flex;color:var(--soluk)}
.b-satir__ok svg{width:18px;height:18px}
a.b-satir:hover .b-satir__ok,button.b-satir:hover .b-satir__ok{color:var(--vurgu)}
.b-satir__ikon{flex:none;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:var(--yuzey-2);color:var(--ikincil)}
.b-liste{list-style:none;margin:0;padding:0}

/* Eski bölüm dili (esnaf ve birkaç form ekranı): başlık + boşluk. */
.bolum{margin-top:24px}
.bolum:first-child{margin-top:16px}
.bolum-baslik{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px}
.bolum-baslik > h2,.bolum-baslik__metin{font-size:var(--y-bant);font-weight:600;line-height:1.3;margin:0}
.bolum-baslik__bag{
  flex:none;display:inline-flex;align-items:center;gap:2px;min-height:44px;
  font-size:14px;font-weight:600;color:var(--vurgu);text-decoration:none;
}
.bolum-baslik__bag:hover{text-decoration:underline}
.bolum-baslik__bag svg{width:16px;height:16px}
/* Üst etiket: 13 px düz yazı (bölüm başlığı DEĞİL; ortak taban 1). */
.ust-etiket{display:block;font-size:var(--y-meta);font-weight:600;color:var(--ikincil);letter-spacing:0;text-transform:none}
.ust-etiket--cizgili{display:flex;align-items:center;gap:10px}
.ust-etiket--cizgili::after{content:"";flex:1;height:1px;background:var(--kenar)}
.baslik-dev{font-size:var(--y-dev);font-weight:600;letter-spacing:0;line-height:1.2}
.baslik-dev em{font-style:normal;color:var(--vurgu)}
.ayrac{height:1px;background:var(--kenar);border:0;margin:16px 0}

/* ================================================================ 6 düğmeler */
.dugme{
  --dy:var(--vurgu-uzeri);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 18px;
  border:1px solid var(--vurgu);border-radius:12px;
  background:var(--vurgu);color:var(--dy);
  font-size:15px;font-weight:600;line-height:1.2;text-decoration:none;white-space:nowrap;
  cursor:pointer;-webkit-user-select:none;user-select:none;
  transition:background var(--gecis-hizli),border-color var(--gecis-hizli),color var(--gecis-hizli);
}
.dugme svg{flex:none;width:18px;height:18px}
.dugme:hover{background:var(--vurgu-koyu);border-color:var(--vurgu-koyu)}
.dugme--birincil{--dy:var(--vurgu-uzeri);background:var(--vurgu);border-color:var(--vurgu)}
.dugme--koyu{--dy:var(--yuzey);background:var(--murekkep);border-color:var(--murekkep)}
.dugme--koyu:hover{background:var(--vurgu-koyu);border-color:var(--vurgu-koyu)}
.dugme--ikincil{--dy:var(--murekkep);background:var(--yuzey);border-color:var(--kenar-orta)}
.dugme--ikincil:hover{background:var(--yuzey-2);border-color:var(--kenar-koyu)}
.dugme--hayalet{--dy:var(--vurgu);background:transparent;border-color:transparent;padding:0 12px}
.dugme--hayalet:hover{background:var(--vurgu-yumusak);border-color:transparent}
.dugme--tehlike{--dy:var(--tehlike);background:var(--yuzey);border-color:var(--tehlike-kenar)}
.dugme--tehlike:hover{background:var(--tehlike-bg);border-color:var(--tehlike)}
/* Plus = vurgu ailesi + yıldız (ortak taban 9) */
.dugme--plus{--dy:var(--plus);background:var(--plus-bg);border-color:var(--plus-kenar)}
.dugme--plus:hover{background:var(--plus-bg);border-color:var(--plus)}
.dugme--tam{display:flex;width:100%}
.dugme--kucuk{min-height:40px;padding:0 12px;font-size:14px}
.dugme--kucuk::after{content:"";position:absolute;left:0;right:0;top:-3px;bottom:-3px}
.dugme--ikon{width:48px;padding:0}
.dugme--kucuk.dugme--ikon{width:44px}
.dugme:disabled,.dugme[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.dugme.yukleniyor{color:transparent;pointer-events:none}
.dugme.yukleniyor:disabled{opacity:1}
.dugme.yukleniyor::before{
  content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;
  border-radius:50%;border:2px solid var(--dy);border-right-color:transparent;
  animation:don 700ms linear infinite;
}
@keyframes don{to{transform:rotate(360deg)}}
.dugme-sira{display:flex;gap:8px}
.dugme-sira > .dugme{flex:1;min-width:0}
.dugme-yigin{display:flex;flex-direction:column;gap:8px}

/* ================================================================ 7 çipler, segment, sekme, anahtar */
/* Çip YALNIZ dokunulabilir süzgeç / seçim / bağlantı (ortak taban 8). r 8, 36 px + ::after = 44. */
.cip{
  position:relative;display:inline-flex;align-items:center;gap:6px;flex:none;
  min-height:36px;padding:0 12px;
  border:1px solid var(--kenar-orta);border-radius:10px;
  background:var(--yuzey);color:var(--murekkep);
  font-size:14px;font-weight:500;line-height:1.2;white-space:nowrap;text-decoration:none;cursor:pointer;
  transition:background var(--gecis-hizli),border-color var(--gecis-hizli),color var(--gecis-hizli);
}
.cip::after{content:"";position:absolute;left:0;right:0;top:-5px;bottom:-5px}
.cip:hover{border-color:var(--kenar-koyu)}
.cip svg{width:16px;height:16px}
.cip__sayi{font-weight:400;color:var(--ikincil)}
.cip__nokta{width:10px;height:10px;border-radius:50%;background:var(--renk, var(--kenar-koyu));flex:none;box-shadow:0 0 0 1.5px var(--yuzey)}
.cip[aria-pressed="true"],.cip.secili,.cip[aria-selected="true"]{background:var(--vurgu-yumusak);border-color:var(--vurgu);color:var(--vurgu);font-weight:600}
.cip[aria-pressed="true"] .cip__sayi,.cip.secili .cip__sayi,.cip[aria-selected="true"] .cip__sayi{color:var(--vurgu)}
.cip--yumusak{background:var(--yuzey-2);border-color:transparent}
.cip-sira{display:flex;flex-wrap:wrap;gap:8px}
.cip-serit{
  display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;
  padding:6px var(--kenar-bosluk);scrollbar-width:none;
}
.cip-serit::-webkit-scrollbar{display:none}

.seg{display:inline-flex;border:1px solid var(--kenar-orta);border-radius:var(--r);overflow:hidden;background:var(--yuzey)}
.seg > button{position:relative;min-height:44px;padding:0 12px;border:0;border-right:1px solid var(--kenar-orta);background:none;font-size:14px;font-weight:500;color:var(--ikincil)}
.seg > button::after{content:"";position:absolute;left:0;right:0;top:-4px;bottom:-4px}
.seg > button:last-child{border-right:0}
.seg > button[aria-pressed="true"]{background:var(--vurgu-yumusak);color:var(--vurgu);font-weight:600;box-shadow:inset 0 -2px 0 var(--vurgu)}

.sekme-cubugu{display:flex;border-bottom:1px solid var(--kenar);padding:0 var(--kenar-bosluk);background:var(--yuzey)}
.sekme-cubugu > button,.sekme-cubugu > a{
  display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 12px;margin-bottom:-1px;
  border:0;border-bottom:2px solid transparent;background:none;
  font-size:15px;font-weight:500;color:var(--ikincil);text-decoration:none;
}
.sekme-cubugu > [aria-selected="true"]{color:var(--murekkep);font-weight:600;border-bottom-color:var(--vurgu)}
.sekme-cubugu .n{font-size:12px;font-weight:600;background:var(--yuzey-2);color:var(--ikincil);padding:1px 7px;border-radius:var(--r-rozet)}
.sekme-cubugu > [aria-selected="true"] .n{background:var(--vurgu-yumusak);color:var(--vurgu)}

/* anahtar: <label class="anahtar"><input type="checkbox" role="switch"> Sadece stokta</label> */
.anahtar{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:14px;font-weight:500;color:var(--murekkep);cursor:pointer;-webkit-user-select:none;user-select:none}
.anahtar input{
  -webkit-appearance:none;appearance:none;flex:none;position:relative;margin:0;
  width:40px;height:24px;border-radius:12px;background:var(--kenar-koyu);cursor:pointer;
  transition:background var(--gecis-hizli);
}
.anahtar input::before{
  content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:var(--yuzey);box-shadow:var(--golge-isaret);transition:transform var(--gecis-hizli) var(--egri);
}
.anahtar input:checked{background:var(--vurgu)}
.anahtar input:checked::before{transform:translateX(16px)}
.anahtar input:focus-visible{outline:2px solid var(--odak);outline-offset:2px}

/* ================================================================ 8 form */
.alan{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.alan__etiket{font-size:14px;font-weight:600;color:var(--murekkep)}
.alan__yardim{font-size:13px;color:var(--ikincil);line-height:1.4}
.alan__hata{display:flex;align-items:flex-start;gap:6px;font-size:13px;font-weight:600;color:var(--tehlike);line-height:1.4}
.alan__hata svg{flex:none;width:16px;height:16px;margin-top:1px}
.girdi{
  display:block;width:100%;min-height:48px;padding:0 14px;
  border:1px solid var(--kenar-koyu);border-radius:var(--r);background:var(--yuzey);
  font-size:16px;color:var(--murekkep);
  transition:border-color var(--gecis-hizli),box-shadow var(--gecis-hizli);
}
.girdi::placeholder{color:var(--yer-tutucu);opacity:1}
.girdi:focus{outline:none;border-color:var(--odak);box-shadow:0 0 0 1px var(--odak)}
textarea.girdi{min-height:96px;padding:12px 14px;line-height:1.45;resize:vertical}
/* açılır liste oku belirteçten çizilir (sabit renkli SVG yok) */
select.girdi{
  -webkit-appearance:none;appearance:none;padding-right:36px;cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, var(--ikincil) 50%),linear-gradient(135deg, var(--ikincil) 50%, transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.alan--hata .girdi{border-color:var(--tehlike)}
.alan--hata .girdi:focus{box-shadow:0 0 0 1px var(--tehlike)}
.girdi-grup{position:relative}
.girdi-grup .girdi{padding-right:50px}
.girdi-grup__dugme{
  position:absolute;right:2px;top:2px;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;border:0;border-radius:var(--r);background:none;color:var(--ikincil);
}
.girdi-grup__dugme:hover{color:var(--murekkep)}
.sayac-metin{font-size:13px;color:var(--ikincil);text-align:right}
.form-hata{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;margin-bottom:14px;border-radius:var(--r);background:var(--tehlike-bg);color:var(--tehlike);font-size:14px;font-weight:600}
.form-hata svg{flex:none;width:18px;height:18px;margin-top:1px}

/* arama kutusu */
.arama-kutu{
  display:flex;align-items:center;gap:8px;min-height:48px;padding:0 4px 0 12px;
  border:1px solid var(--kenar-koyu);border-radius:var(--r);background:var(--yuzey);color:var(--ikincil);
}
.arama-kutu:focus-within{border-color:var(--odak);box-shadow:0 0 0 1px var(--odak)}
.arama-kutu > .ikon,.arama-kutu > svg{flex:none;color:var(--ikincil)}
.arama-kutu input{flex:1;min-width:0;align-self:stretch;border:0;outline:0;background:transparent;font-size:16px;color:var(--murekkep);padding:0}
.arama-kutu input::placeholder{color:var(--yer-tutucu);opacity:1}
.arama-kutu input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.arama-kutu__temizle,.arama-kutu__dugme{
  flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border:0;border-radius:var(--r);background:none;color:var(--ikincil);
}
.arama-kutu__dugme{background:var(--vurgu);color:var(--vurgu-uzeri)}
.arama-kutu--sahte{text-decoration:none;font-size:16px;color:var(--yer-tutucu);cursor:text}
.arama-kutu--sahte:hover{border-color:var(--vurgu)}

/* ================================================================ 9 kart (esnaf), liste satırı */
.kart{background:var(--yuzey);border:1px solid var(--kenar);border-radius:var(--r);padding:14px 16px}
.kart--vurgu{background:var(--vurgu-yumusak);border-color:var(--vurgu-kenar)}
.kart--plus{background:var(--plus-bg);border-color:var(--plus-kenar)}
a.kart{display:block;color:inherit;text-decoration:none}
a.kart:hover{border-color:var(--kenar-orta)}
.kart__baslik{font-size:var(--y-bant);font-weight:600;line-height:1.3;margin:0 0 4px}
.kart__metin{font-size:14px;color:var(--ikincil);margin:0}

.liste{background:var(--yuzey);border:1px solid var(--kenar);border-radius:var(--r);padding:0 14px}
.satir{
  display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:10px 0;
  border:0;border-bottom:1px solid var(--kenar);background:none;
  color:inherit;text-decoration:none;text-align:left;
}
.satir:last-child{border-bottom:0}
a.satir,button.satir{cursor:pointer}
.satir__ikon{
  flex:none;width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r);background:var(--yuzey-2);color:var(--ikincil);overflow:hidden;
}
.satir__ikon svg{width:22px;height:22px}
.satir__ikon--gorsel{width:48px;height:48px;background:var(--yuzey-2);border:1px solid var(--kenar)}
.satir__ikon--gorsel > img{width:100%;height:100%;object-fit:cover}
.satir__ikon--gorsel > .qb-gorsel{width:100%;height:100%;border-radius:0}
.satir__govde{flex:1;min-width:0}
.satir__baslik{display:block;font-size:15px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.satir__alt{display:block;font-size:13px;color:var(--ikincil);margin-top:1px;line-height:1.4}
.satir__sag{flex:none;display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ikincil);white-space:nowrap}
.satir__ok{flex:none;color:var(--soluk);display:flex}
.satir__ok svg{width:18px;height:18px}
a.satir:hover .satir__ok,button.satir:hover .satir__ok{color:var(--vurgu)}
.satir--tehlike .satir__baslik{color:var(--tehlike)}

/* ================================================================ 10 ürün satırı, ürün kartı, şerit */
/* Ürün satırı (katalog, kategori, vitrin, benzerleri): görsel solda, sağda ad (2 satır),
   ölçü (kesilmez), alt bilgi, stok; kalp sağ üstte. */
.u-satir{position:relative;display:block;background:var(--yuzey);border-bottom:1px solid var(--kenar)}
.u-satir:last-child{border-bottom:0}
.u-satir__bag{
  display:flex;align-items:flex-start;gap:12px;min-height:96px;padding:12px 56px 12px var(--kenar-bosluk);
  color:inherit;text-decoration:none;
}
.u-satir__bag:hover{background:var(--yuzey-2);background:color-mix(in srgb, var(--yuzey-2) 55%, var(--yuzey))}
.u-satir__bag:focus-visible{outline-offset:-2px}
.u-satir__gorsel{flex:none;width:72px;height:72px;line-height:0;border-radius:var(--r);overflow:hidden;background:var(--yuzey-2)}
.u-satir__gorsel > .qb-gorsel{width:100%;height:100%;border-radius:0}
.u-satir__gorsel > img{width:100%;height:100%;object-fit:cover}
.u-satir--kucuk .u-satir__bag{min-height:80px}
.u-satir--kucuk .u-satir__gorsel{width:56px;height:56px}
.u-satir__govde{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.u-satir__ad{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:15px;font-weight:600;line-height:1.3;
}
.u-satir__olcu{font-size:14px;color:var(--ikincil);line-height:1.35;white-space:nowrap}
.u-satir__bilgi{font-size:13px;color:var(--ikincil);line-height:1.4}
.u-satir__bilgi b{font-weight:600;color:var(--murekkep)}
.u-satir__alt{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:4px}
.u-satir__marka{font-size:13px;line-height:1.4;color:var(--murekkep)}
.u-satir__kalp{position:absolute;top:6px;right:6px}
.u-satir--yok .u-satir__gorsel > *{opacity:.55;filter:grayscale(.5)}
/* Mesafe cetveli sütunu (kategori "yakın önce"): solda mono en yakın mesafe, dikey hat */
.u-satir--olculu .u-satir__bag{padding-left:0}
.u-satir__olcu-sol{position:relative;flex:none;align-self:stretch;width:62px;margin:-12px 0;padding:14px 10px 0 0;text-align:right;
  font-family:var(--mono);font-size:13px;font-weight:500;word-spacing:-.3em;white-space:nowrap;color:var(--murekkep);border-right:2px solid var(--kenar-orta)}

/* Eski ızgara kartı (yalnız uyumluluk; müşteri ekranları satır kullanır) */
.urun-izgara{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.urun-kart{
  position:relative;display:flex;flex-direction:column;min-width:0;
  background:var(--yuzey);border:1px solid var(--kenar);border-radius:var(--r);overflow:hidden;
}
.urun-kart__bag{display:flex;flex-direction:column;flex:1;color:inherit;text-decoration:none;border-radius:inherit}
.urun-kart__bag:focus-visible{outline:2px solid var(--odak);outline-offset:-2px}
.urun-kart__gorsel{position:relative;display:block;aspect-ratio:1 / 1;background:var(--yuzey-2);border-bottom:1px solid var(--kenar);overflow:hidden}
.urun-kart__gorsel > *{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}
@supports not (aspect-ratio:1/1){.urun-kart__gorsel{height:0;padding-top:100%}}
.urun-kart__gorsel img{object-fit:cover}
.urun-kart__svg{display:block}
.urun-kart__svg > .qb-gorsel{width:100%;height:100%;aspect-ratio:auto;border-radius:0}
.urun-kart__yer{display:flex !important;align-items:center;justify-content:center;color:var(--renk)}
.urun-kart__yer svg{width:36%;height:36%}
.urun-kart__govde{display:flex;flex-direction:column;gap:3px;flex:1;padding:10px 12px 12px}
.urun-kart__ad{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:15px;font-weight:600;line-height:1.3}
.urun-kart__olcu{display:block;font-size:13px;line-height:1.35;color:var(--ikincil);white-space:nowrap}
.urun-kart__alt{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:auto;padding-top:6px}
.urun-kart__cok{font-size:13px;font-weight:500;color:var(--ikincil);white-space:nowrap}
.urun-kart__dukkan{display:block;font-size:13px;color:var(--ikincil)}
.urun-kart--yok .urun-kart__gorsel > *{opacity:.55;filter:grayscale(.5)}
.urun-kart__kalp,.kalp-dugme{
  position:absolute;top:6px;right:6px;width:44px;height:44px;z-index:1;
  display:flex;align-items:center;justify-content:center;padding:0;
  border:0;border-radius:50%;background:transparent;color:var(--ikincil);
  transition:color var(--gecis-hizli),transform var(--gecis-hizli);
}
.urun-kart__kalp:hover,.kalp-dugme:hover{color:var(--yok-fg)}
.urun-kart__kalp[aria-pressed="true"],.kalp-dugme[aria-pressed="true"]{color:var(--yok-fg)}
.urun-kart__kalp:active,.kalp-dugme:active{transform:scale(.92)}
.kalp-dugme{position:static;flex:none}
.urun-kart .urun-kart__kalp{background:var(--yuzey);background:color-mix(in srgb, var(--yuzey) 94%, transparent)}

.yatay-serit{
  display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scroll-padding:0 var(--kenar-bosluk);
  padding:2px var(--kenar-bosluk) 6px;scrollbar-width:none;
}
.yatay-serit::-webkit-scrollbar{display:none}
.yatay-serit > *{flex:none;width:148px;scroll-snap-align:start}
.yatay-serit > .dukkan-kart,.yatay-serit > .iskelet-dukkan{width:264px}

/* ================================================================ 11 dükkân: logo, satır, kart, açık, mesafe */
.d-logo{
  flex:none;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--yuzey);box-shadow:inset 0 0 0 1px var(--kenar);overflow:hidden;
}
.d-logo svg{width:62%;height:62%}
.d-logo--32{width:32px;height:32px}
.d-logo--48{width:48px;height:48px}

/* açık / kapalı (ortak taban 10): renk değil biçim + metin — açık dolu nokta, kapalı boş halka */
.acik-durum{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;color:var(--murekkep)}
.acik-durum b{font-weight:600}
.acik-durum i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--murekkep)}
.acik-durum--kapali{color:var(--ikincil)}
.acik-durum--kapali i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ikincil)}

/* mesafe + yürüme: kesilmez */
.mesafe{white-space:nowrap}
.mesafe b{font-weight:600;color:var(--murekkep)}
.meta-sira{display:flex;flex-wrap:wrap;align-items:center;gap:2px 1.05em;min-width:0;overflow:hidden}
/* Ayraç sonraki öğenin BAŞINA bağlı ("· Kapalı" tek parça): öğe ayraç genişliği kadar sola çekik,
   ayraç o dolgunun içinde. Satır başına düşen öğenin ayracı kutunun dışında kalır ve kırpılır;
   böylece ne satır sonunda sarkan "·" ne de satır başında "·" görünür. Öğe kutuya sığar
   (en çok %100); uzun "Kapalı · 09:30'da açılır" dar sütunda kendi içinde sarılır, kırpılmaz. */
.meta-sira > *{white-space:nowrap;margin-left:-1.05em;padding-left:1.05em;max-width:calc(100% + 1.05em)}
.meta-sira > *::before{content:"·";display:inline-block;width:1.05em;margin-left:-1.05em;text-align:center;color:var(--soluk);font-weight:400;font-family:var(--sans)}
.meta-sira > .acik-durum{display:inline-block;white-space:normal}
.meta-sira > .acik-durum i{display:inline-block;margin-right:6px;vertical-align:1px}

/* Dükkân kartı (esnaf önizlemeleri, tanıtım) */
.dukkan-kart{
  display:flex;align-items:center;gap:12px;min-width:0;padding:12px 14px;
  background:var(--yuzey);border:1px solid var(--kenar);border-radius:var(--r);
  color:inherit;text-decoration:none;transition:border-color var(--gecis-hizli);
}
.dukkan-kart:hover{border-color:var(--kenar-orta)}
.dukkan-kart.secili{border-color:var(--vurgu);box-shadow:0 0 0 1px var(--vurgu)}
.dukkan-kart__logo{
  flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--yuzey);box-shadow:inset 0 0 0 1px var(--kenar);overflow:hidden;
}
.dukkan-kart__logo svg{width:28px;height:28px}
.dukkan-kart__govde{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.dukkan-kart__ad{display:block;font-size:16px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.dukkan-kart__tur{display:block;font-size:13px;color:var(--ikincil)}
.dukkan-kart__meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin-top:4px;font-size:13px;color:var(--ikincil)}
.dukkan-kart__pasta{flex:none;width:48px;height:48px}
.dukkan-kart__pasta svg{width:100%;height:100%}
.dukkan-kart--dikey{
  display:grid;grid-template-columns:1fr auto;grid-template-areas:"logo pasta" "govde govde";
  align-items:start;gap:10px;
}
.dukkan-kart--dikey .dukkan-kart__logo{grid-area:logo}
.dukkan-kart--dikey .dukkan-kart__pasta{grid-area:pasta;width:44px;height:44px}
.dukkan-kart--dikey .dukkan-kart__govde{grid-area:govde}

/* ================================================================ 12 rozetler */
/* Stok rozeti: nokta + metin, kenarlıksız, 24 px, r 4 (ortak taban 8) */
.rozet{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  min-height:24px;padding:0 8px;border-radius:var(--r-rozet);
  font-size:12px;font-weight:600;line-height:1.2;white-space:nowrap;
  background:var(--yuzey-2);color:var(--ikincil);
}
.rozet i{display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.rozet svg{width:12px;height:12px;flex:none}
.rozet--var{background:var(--var-bg);color:var(--var-fg)}
.rozet--az{background:var(--az-bg);color:var(--az-fg)}
.rozet--yok{background:var(--yok-bg);color:var(--yok-fg)}
.rozet--yok i{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
.rozet--az i{box-shadow:inset 0 0 0 1.5px currentColor;background:linear-gradient(90deg, currentColor 50%, transparent 50%)}
/* bilinmiyor: nötr, nokta yerine kısa çizgi ("bilgi yok"); renk stok anlamı taşımaz (§19.7) */
.rozet--bilinmiyor{background:var(--bilinmiyor-bg);color:var(--bilinmiyor-fg);box-shadow:inset 0 0 0 1px var(--kenar)}
.rozet--bilinmiyor i{width:8px;height:2px;border-radius:1px}
/* ÇEŞİT: "7 çeşit" — ürün satırında stok rozetinin yanında (§19.7) */
.cesit{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;line-height:1.2;color:var(--ikincil);white-space:nowrap}
.cesit svg{width:14px;height:14px;flex:none}
/* meta-sira'da ayraç (::before) esnek öğe olur; gap ayraçla ikon arasına girmesin */
.meta-sira > .cesit,.meta-sira > .marka-kilit{gap:0}
.meta-sira > .cesit svg,.meta-sira > .marka-kilit svg{margin-right:4px}
/* açık/kapalı rozeti (eski imza; esnaf ve bazı satırlar): stok renkleri DEĞİL */
.rozet--acik{background:var(--yuzey-2);color:var(--murekkep)}
.rozet--kapali{background:var(--yuzey-2);color:var(--ikincil)}
.rozet--kapali i{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
.rozet--plus{background:var(--plus-bg);color:var(--plus)}
.rozet--plus svg{fill:currentColor}
.rozet--notr{background:var(--yuzey-2);color:var(--ikincil)}
.rozet--bekliyor{background:var(--yuzey-2);color:var(--ikincil)}
.rozet--demo{background:transparent;color:var(--ikincil);box-shadow:inset 0 0 0 1px var(--kenar-orta)}
.rozet--sayi{min-width:20px;min-height:20px;justify-content:center;padding:0 6px;border-radius:var(--r-hap);background:var(--vurgu);color:var(--vurgu-uzeri)}

/* ================================================================ 13 marka + model (§11) */
/* Plus: satır başına bir çift "Marka — Model" (marka 600, model 400). Plus'sız: kilit satırı. */
.marka-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;min-width:0}
.marka-liste > li{min-width:0}
.marka-model{min-width:0;overflow-wrap:anywhere}
.marka-model__marka{font-weight:600}
.marka-model__model{font-weight:400}
.marka-model__ayrac{color:var(--soluk)}
.marka-kilit{display:inline-flex;align-items:center;gap:6px;color:var(--ikincil)}
.marka-kilit svg{flex:none;width:14px;height:14px}

/* ================================================================ 14 alt panel */
.katman{position:fixed;top:0;bottom:0;left:0;right:0;margin:0 auto;max-width:var(--sutun);pointer-events:none}
.katman > *{pointer-events:auto}
.katman--panel{z-index:var(--z-panel);bottom:var(--alt-bosluk);overflow:hidden}
.alt-panel{
  position:absolute;left:0;right:0;bottom:0;z-index:var(--z-panel);
  display:flex;flex-direction:column;
  background:var(--yuzey);
  border-radius:var(--r-yaprak) var(--r-yaprak) 0 0;box-shadow:var(--golge-yaprak);
  will-change:transform;
}
.alt-panel--kapali{pointer-events:none}
.alt-panel__tutamak{
  position:relative;flex:none;display:flex;align-items:center;justify-content:center;
  width:100%;height:24px;padding:0;border:0;background:none;
  cursor:grab;touch-action:none;
}
.alt-panel__tutamak::after{content:"";position:absolute;left:0;right:0;top:-8px;bottom:-12px}
.alt-panel__cizgi{display:block;width:36px;height:4px;border-radius:2px;background:var(--kenar-orta);transition:background var(--gecis-hizli)}
.alt-panel__tutamak:hover .alt-panel__cizgi,.alt-panel.surukleniyor .alt-panel__cizgi{background:var(--kenar-koyu)}
.alt-panel.surukleniyor,.alt-panel.surukleniyor .alt-panel__tutamak{cursor:grabbing}
.alt-panel.surukleniyor{-webkit-user-select:none;user-select:none}
.alt-panel__baslik{flex:none;padding:0 var(--kenar-bosluk) 8px;border-bottom:1px solid var(--kenar);touch-action:none;-webkit-user-select:none;user-select:none}
.alt-panel__baslik-metin{font-size:var(--y-bant);font-weight:600;line-height:1.3}
.alt-panel__govde{
  position:relative;flex:1;min-height:0;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding-bottom:calc(var(--gizli, 0px) + 16px);
}
/* Harita ekranında yaprak dok'un arkasına kadar iner: içerik dok'un altında kalmasın. */
.ekran--tam .alt-panel__govde{padding-bottom:calc(var(--gizli, 0px) + var(--alt-bosluk) + var(--ara-tasma) + 12px)}

/* ================================================================ 15 pencere */
.pencere-arka{
  position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--z-pencere);
  display:flex;align-items:center;justify-content:center;
  padding:24px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  background:var(--perde);opacity:0;transition:opacity var(--gecis);
}
.pencere-arka.acik{opacity:1}
.pencere{
  width:100%;max-width:400px;max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);overflow:auto;
  background:var(--yuzey);border:1px solid var(--kenar);border-radius:var(--r-buyuk);box-shadow:var(--golge-pencere);
  transform:translateY(10px) scale(.98);transition:transform var(--gecis) var(--egri);
}
.pencere-arka.acik .pencere{transform:none}
.pencere__ust{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:16px 8px 0 20px}
.pencere__baslik{font-size:var(--y-ekran);font-weight:600;padding-top:10px}
.pencere__kapat{flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:0;border-radius:var(--r);background:none;color:var(--ikincil)}
.pencere__kapat:hover{background:var(--yuzey-2);color:var(--murekkep)}
.pencere__govde{padding:6px 20px 0;font-size:15px;color:var(--ikincil)}
.pencere__govde > p:last-child{margin-bottom:0}
.pencere__eylemler{display:flex;flex-direction:column;gap:8px;padding:18px 20px 20px}
.pencere__eylemler .dugme{width:100%}

/* ================================================================ 16 bildirim */
.katman--bildirim{
  z-index:var(--z-bildirim);top:auto;bottom:calc(var(--alt-bosluk) + 14px);
  display:flex;justify-content:center;padding:0 16px;
}
.katman--bildirim > *{pointer-events:none}
.bildirim{
  display:flex;align-items:center;gap:8px;max-width:100%;
  padding:11px 16px;border-radius:var(--r);
  background:var(--bildirim-bg);color:var(--bildirim-uzeri);box-shadow:var(--golge-kart);
  font-size:15px;font-weight:500;line-height:1.35;
  opacity:0;transform:translateY(8px);transition:opacity 160ms,transform 160ms var(--egri);
}
.bildirim.acik{opacity:1;transform:none}
.bildirim .ikon{flex:none;line-height:0}
.bildirim--basari .ikon{color:var(--bildirim-basari-ikon)}
.bildirim--hata{background:var(--bildirim-hata-bg)}
.bildirim--hata .ikon{color:var(--bildirim-hata-ikon)}

/* ================================================================ 17 boş durum, iskelet */
.bos-durum{display:flex;flex-direction:column;align-items:center;gap:8px;padding:40px 24px;text-align:center}
.bos-durum__ikon{
  width:64px;height:64px;margin-bottom:6px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--yuzey-2);color:var(--ikincil);
}
.bos-durum__baslik{font-size:var(--y-ekran);font-weight:600}
.bos-durum__metin{max-width:320px;margin:0;font-size:15px;color:var(--ikincil)}
.bos-durum .dugme{margin-top:10px}

.iskelet{display:block;background:var(--yuzey-2);border-radius:var(--r-rozet);animation:iskelet-nabiz 1.4s ease-in-out infinite}
@keyframes iskelet-nabiz{0%,100%{opacity:1}50%{opacity:.5}}
.iskelet--gorsel{aspect-ratio:1 / 1;border-radius:0}
@supports not (aspect-ratio:1/1){.iskelet--gorsel{height:0;padding-top:100%}}
.iskelet--cizgi{height:12px;margin:10px 12px 0}
.iskelet--cizgi.kisa{width:45%}
.iskelet--kare{flex:none;width:44px;height:44px;border-radius:var(--r)}
.iskelet--daire{flex:none;width:44px;height:44px;border-radius:50%}
.iskelet-kart{background:var(--yuzey);border:1px solid var(--kenar);border-radius:var(--r);overflow:hidden;padding-bottom:12px}
.iskelet-liste{display:block}
.iskelet-satir{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--kenar)}
.iskelet-satir__metin{flex:1}
.iskelet-satir .iskelet--cizgi{margin:6px 0}
.iskelet-dukkan{flex:none;height:128px;padding:14px;background:var(--yuzey);border:1px solid var(--kenar);border-radius:var(--r)}
.iskelet-dukkan .iskelet--cizgi{margin:12px 0 0}
/* satır iskeleti: ürün satırıyla aynı ölçü (ortak taban 19) */
.iskelet-u{display:flex;gap:12px;min-height:96px;padding:12px var(--kenar-bosluk);background:var(--yuzey);border-bottom:1px solid var(--kenar)}
.iskelet-u .iskelet--kare{width:72px;height:72px}
.iskelet-u .iskelet--cizgi{margin:6px 0 0}
@media (prefers-reduced-motion: reduce){
  .iskelet,.dugme.yukleniyor::before{animation-duration:2.4s}
  *{scroll-behavior:auto !important}
}

/* ================================================================ 18 harita ortak */
.leaflet-container{font-family:var(--sans);background:var(--harita)}
.qb-karo{filter:grayscale(1) sepia(.25) hue-rotate(160deg) saturate(.6) brightness(1.05) contrast(.8)}
.leaflet-control-attribution{font-size:10px;background:var(--yuzey) !important;background:color-mix(in srgb, var(--yuzey) 85%, transparent) !important;color:var(--ikincil)}
.leaflet-control-attribution a{color:var(--ikincil)}
.harita-kap{position:relative;overflow:hidden;background:var(--harita)}

/* ================================================================ 19 notlar, yardımcılar */
.not-kutu{
  display:flex;align-items:flex-start;gap:8px;padding:10px 12px;
  border:0;border-left:3px solid var(--kenar-orta);border-radius:var(--r-rozet);background:var(--yuzey-2);
  font-size:14px;line-height:1.45;color:var(--ikincil);
}
.not-kutu svg{flex:none;width:16px;height:16px;margin-top:2px}
.not-kutu--uyari{border-left-color:var(--uyari-fg);background:var(--uyari-bg);color:var(--uyari-fg)}
.metin-ikincil{color:var(--ikincil)}
.metin-kucuk{font-size:var(--y-meta)}
.gorunmez{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ikon{display:inline-flex;line-height:0}
.nw{white-space:nowrap}

.bag-metin{color:var(--vurgu);font-weight:600}
.dipnot{display:flex;align-items:flex-start;gap:6px;margin:16px var(--kenar-bosluk) 8px;font-size:var(--y-meta);line-height:1.45;color:var(--ikincil)}
.dipnot svg{flex:none;width:16px;height:16px;margin-top:1px}
.ust-cubuk__ozet{margin:-6px 0 0;padding:0 var(--kenar-bosluk) 10px;font-size:var(--y-meta);color:var(--ikincil)}

/* ================================================================ 20 Atlas ortak: bağlam şeridi, tanım, saatler, dağılım, hak */
/* Bağlam şeridi (yonerge-2 §10): ürün kimliğinin altında tam genişlik; kaydırınca üst çubuğun
   altına yapışır ve tek satıra iner (.baglam--yapisik, ui.baglamSeridi). */
.baglam-isaret{height:0}
.baglam{
  position:sticky;top:calc(var(--ust-cubuk-h) + env(safe-area-inset-top, 0px));z-index:calc(var(--z-yapiskan) - 1);
  display:flex;align-items:center;gap:0;min-height:64px;padding-right:8px;
  background:var(--yuzey);border-top:1px solid var(--kenar);border-bottom:1px solid var(--kenar);
}
.baglam > .iskelet{flex:1;margin:0 var(--kenar-bosluk)}
.baglam__bag{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:10px 4px 10px var(--kenar-bosluk);color:inherit;text-decoration:none}
.baglam__bag:hover .baglam__ad-metin{text-decoration:underline}
.baglam__ikon{flex:none;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--vurgu-yumusak);color:var(--vurgu)}
.baglam__govde{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.baglam__ad{display:flex;align-items:center;gap:2px;min-width:0;font-size:16px;font-weight:600;line-height:1.3}
.baglam__ad-metin{min-width:0;overflow-wrap:anywhere}
.baglam__ok{flex:none;display:flex;color:var(--vurgu)}
.baglam__meta{font-size:15px;line-height:1.4;color:var(--ikincil)}
.baglam__meta .mesafe b{color:var(--murekkep)}
.baglam__meta--kisa{display:none !important}
.baglam__yol{flex:none;color:var(--vurgu)}
.baglam--yapisik{min-height:48px;box-shadow:var(--golge-kart)}
.baglam--yapisik .baglam__bag{padding-top:6px;padding-bottom:6px}
.baglam--yapisik .baglam__ikon{width:28px;height:28px}
.baglam--yapisik .baglam__ikon svg{width:16px;height:16px}
.baglam--yapisik .baglam__govde{flex-direction:row;align-items:baseline;gap:8px}
/* Chrome 83 (flex gap yok): flexgap.js yön değişikliğini başka seçicide göremez → sütun boşluğu sıfırla, satır boşluğu ver. */
html.no-flexgap .baglam--yapisik .baglam__govde > * + *{margin-top:0;margin-left:8px}
.baglam--yapisik .baglam__ad{flex:0 1 auto;font-size:15px}
.baglam--yapisik .baglam__ad-metin{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.baglam--yapisik .baglam__ok{display:none}
.baglam--yapisik .baglam__meta{flex:none;flex-wrap:nowrap;font-size:var(--y-meta)}
.baglam--yapisik .baglam__meta--uzun{display:none !important}
.baglam--yapisik .baglam__meta--kisa{display:flex !important}
.baglam--yapisik .baglam__meta--kisa b{font-weight:600;color:var(--murekkep)}

/* tanım listesi (ürün hakkında, profil hakkında) */
.tanim{margin:0}
.tanim__satir{display:grid;grid-template-columns:112px minmax(0,1fr);gap:12px;padding:12px var(--kenar-bosluk);border-bottom:1px solid var(--kenar)}
.tanim__satir:last-child{border-bottom:0}
.tanim dt{font-size:var(--y-meta);font-weight:600;color:var(--ikincil);padding-top:1px}
.tanim dd{margin:0;font-size:15px;line-height:1.45;overflow-wrap:anywhere}
.tanim dd a{position:relative;color:var(--vurgu);font-weight:600;text-decoration:none}
.tanim dd a:hover{text-decoration:underline}

/* haftalık saatler */
.saatler{margin:0}
.saatler__satir{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px;padding:0 var(--kenar-bosluk);border-bottom:1px solid var(--kenar);font-size:15px}
.saatler__satir:last-child{border-bottom:0}
.saatler dt,.saatler dd{margin:0}
.saatler dd{color:var(--ikincil);white-space:nowrap}
.saatler__satir.bugun{box-shadow:inset 3px 0 0 var(--vurgu)}
.saatler__satir.bugun dt,.saatler__satir.bugun dd{font-weight:600;color:var(--murekkep)}
.saatler__bugun{font-weight:400;color:var(--ikincil)}

/* dağılım (pasta + yüzdeler) */
.dagilim{display:flex;align-items:center;gap:16px;padding:12px var(--kenar-bosluk);border-bottom:1px solid var(--kenar)}
.dagilim__pasta{flex:none;line-height:0}
.dagilim__pasta svg{width:76px;height:76px}
.dagilim__liste{flex:1;min-width:0;font-size:15px}
.dagilim__liste li{display:flex;padding:3px 0}
.dagilim__liste b{margin-left:auto;font-weight:600}

/* sorgu hakkı çizgisi: limit kadar bölme, kullanılanlar dolu */
.hak-cizgi{flex:none;display:inline-flex;gap:4px}
.hak-cizgi i{display:block;width:16px;height:8px;border-radius:2px;background:var(--yuzey);box-shadow:inset 0 0 0 1.5px var(--kenar-koyu)}
.hak-cizgi i.dolu{background:var(--vurgu);box-shadow:none}
.hak-satir{align-items:center}
.b-satir__ikon--plus{background:var(--plus-bg);color:var(--plus)}

/* ürün satırı ek parçaları */
.u-satir__svg{display:block;width:100%;height:100%}
.u-satir__svg > .qb-gorsel{width:100%;height:100%;border-radius:0}
.tekil-bilgi b{font-weight:600;color:var(--murekkep)}
.iskelet-u .iskelet-satir__metin{flex:1}
.b-satir .iskelet--cizgi{margin:6px 0}
.b-satir > .iskelet--cizgi{flex:1}

.taslak{padding:32px var(--kenar-bosluk)}
.taslak__yol{font-family:ui-monospace,Consolas,monospace;font-size:13px;color:var(--ikincil)}

/* ================================================================ 21 Atlas "harita her yerde": tuval + yaprak */
/* TUVAL: sayfanın üstünde yapışkan canlı harita; YAPRAK onun üstüne kayarak çıkar.
   Kullanım: ürün ve dükkân sayfaları (.ekran--tuval). */
.ekran--tuval{--tuval-h:clamp(240px, 44vh, 380px);background:var(--harita);padding-bottom:0}
.tuval{position:sticky;top:0;z-index:0;height:var(--tuval-h);background:var(--harita);overflow:hidden}
.tuval__harita{position:absolute !important;top:0;right:0;bottom:0;left:0;width:100%;height:100%}
.tuval__ust{
  position:absolute;left:0;right:0;top:0;z-index:500;display:flex;align-items:center;gap:8px;
  padding:calc(10px + env(safe-area-inset-top, 0px)) 12px 0;pointer-events:none;
}
.tuval__ust > *{pointer-events:auto}
.tuval__bosluk{flex:1;pointer-events:none}
.tuval__alt{
  position:absolute;left:12px;right:12px;bottom:32px;z-index:500;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;
  pointer-events:none;
}
.tuval__alt > *{pointer-events:auto}
.tuval__lejant{
  display:flex;align-items:center;gap:8px;min-height:36px;margin:0;padding:6px 12px;border-radius:12px;
  background:var(--yuzey);box-shadow:var(--golge-harita-ust);font-size:13px;font-weight:600;line-height:1.3;min-width:0;
}
.tuval__lejant-nokta{flex:none;width:10px;height:10px;border-radius:50%;background:var(--var-fg)}
.tuval--haritasiz{height:auto;position:relative;background:var(--sayfa)}
.tuval--haritasiz .tuval__ust{position:relative;padding-bottom:8px}
.tuval--haritasiz .tuval__alt{position:relative;left:auto;right:auto;bottom:auto;padding:0 12px 8px}
.tuval--haritasiz .tuval__harita,.tuval--haritasiz .tuval__alt .yuzen-dugme{display:none}
.tuval .leaflet-control-attribution{margin-bottom:24px !important;border-radius:0 4px 4px 0}

.yaprak{
  position:relative;z-index:2;margin-top:-20px;min-height:calc(100vh - 64px);min-height:calc(100dvh - 64px);
  background:var(--sayfa);border-radius:var(--r-yaprak) var(--r-yaprak) 0 0;box-shadow:var(--golge-yaprak);
  padding-bottom:calc(var(--urun-alt-h, 0px) + var(--alt-bosluk) + var(--ekran-alt-ek) + 16px);
}
.yaprak__isaret{position:absolute;top:0;left:0;width:1px;height:1px}
.yaprak__tutamak{
  position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:22px;padding:0;border:0;background:none;
}
.yaprak__tutamak::after{content:"";position:absolute;left:30%;right:30%;top:-6px;bottom:-16px}
.yaprak__cizgi{display:block;width:40px;height:4px;border-radius:2px;background:var(--kenar-orta)}
.yaprak__tutamak:hover .yaprak__cizgi{background:var(--kenar-koyu)}

/* KOMPAKT ÜST ÇUBUK: yaprak tepeye değince yukarıdan iner (kaydırınca daralan başlık). */
.kompakt{
  position:fixed;top:0;left:0;right:0;margin:0 auto;max-width:var(--sutun);z-index:calc(var(--z-yapiskan) + 2);
  display:flex;align-items:center;gap:6px;min-height:60px;padding:calc(6px + env(safe-area-inset-top, 0px)) 4px 6px 8px;
  background:var(--yuzey);border-bottom:1px solid var(--kenar);box-shadow:var(--golge-kart);
  transform:translateY(-110%);transition:transform var(--gecis) var(--egri);
}
.kompakt--acik{transform:none}
.kompakt__govde{flex:1;min-width:0;display:flex;flex-direction:column}
.kompakt__ad{font-size:16px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kompakt__alt{font-size:13px;color:var(--ikincil);flex-wrap:nowrap;min-width:0}
.kompakt__dukkan{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto;font-weight:600;color:var(--murekkep)}
.kompakt__alt > .kompakt__dukkan{white-space:nowrap}

/* ROTA KARTI: bakılan dükkân + mesafe; solda büyük mono ölçü, sağda dükkân. */
.rota{
  margin:4px 12px 0;padding:14px 12px 12px 14px;border-radius:var(--r-panel);
  background:var(--yuzey);border:1px solid var(--kenar);box-shadow:inset 4px 0 0 var(--vurgu);
}
.rota--iskelet{min-height:120px}
.rota--degisti{animation:rota-gecis 360ms var(--egri)}
@keyframes rota-gecis{from{opacity:.35;transform:translateY(6px)}to{opacity:1;transform:none}}
.rota__ust{display:flex;align-items:stretch;gap:14px}
.rota__olcu{flex:none;display:flex;flex-direction:column;justify-content:center;min-width:96px;padding-right:14px;border-right:1px solid var(--kenar)}
.rota__m{font-family:var(--mono);font-size:28px;font-weight:600;line-height:1.05;letter-spacing:-.03em;word-spacing:-.35em;white-space:nowrap}
.rota__dk{display:flex;align-items:center;gap:4px;margin-top:6px;word-spacing:-.3em;font-family:var(--mono);font-size:13px;font-weight:500;color:var(--ikincil);white-space:nowrap}
.rota__dk svg{flex:none}
.rota__dukkan{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rota__etiket{font-size:13px;font-weight:500;color:var(--ikincil)}
.rota__ad{position:relative;display:flex;align-items:flex-start;gap:2px;font-size:18px;font-weight:600;line-height:1.25;color:var(--murekkep);text-decoration:none}
.rota__ad span{overflow-wrap:anywhere}
.rota__ad svg{flex:none;margin-top:2px;color:var(--vurgu)}
.rota__ad::after{content:"";position:absolute;top:-8px;right:-4px;bottom:-8px;left:-4px}
.rota__ad:hover span{text-decoration:underline}
.rota__acik{font-size:14px;margin-top:2px}
.rota__stok{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-top:12px;padding-top:10px;border-top:1px solid var(--kenar)}
.rota__guncel{font-size:13px;color:var(--ikincil)}
.rota__araclar{margin-left:auto;display:flex;gap:8px}
.rota__stok{flex-wrap:nowrap}
.rota__stok-bilgi{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.rota__not{margin:10px 0 0;padding:8px 10px;border-radius:8px;background:var(--az-bg);color:var(--az-fg);font-size:14px;line-height:1.4}
.rota__not--yok{background:var(--yok-bg);color:var(--yok-fg)}
.rota__not--bilinmiyor{background:var(--bilinmiyor-bg);color:var(--bilinmiyor-fg)}
.rota__not b{font-weight:600}

/* DURAK LİSTESİ: mesafe cetveli — mono mesafe | hat + düğüm (stok şekli) | dükkân | rozet */
.durak-liste{list-style:none;margin:0;padding:4px 0}
.durak{position:relative}
.durak__bag{
  position:relative;display:grid;grid-template-columns:62px 22px minmax(0,1fr) auto 18px;align-items:center;
  width:100%;min-height:60px;padding:0 10px 0 0;border:0;background:none;color:inherit;text-align:left;text-decoration:none;
}
a.durak__bag:hover,button.durak__bag:hover{background:var(--yuzey-2);background:color-mix(in srgb, var(--yuzey-2) 55%, var(--yuzey))}
.durak__bag:focus-visible{outline-offset:-2px}
.durak__mesafe{justify-self:end;padding-right:8px;word-spacing:-.3em;font-family:var(--mono);font-size:13px;font-weight:500;color:var(--murekkep);white-space:nowrap}
.durak__hat{position:relative;align-self:stretch;display:flex;align-items:center;justify-content:center}
.durak__hat::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--kenar-orta)}
.durak:first-child .durak__hat::before{top:50%}
.durak:last-child .durak__hat::before{bottom:50%}
.durak:only-child .durak__hat::before{display:none}
.durak__dugum{position:relative;display:block;width:14px;height:14px;border-radius:50%;background:var(--ikincil);box-shadow:0 0 0 3px var(--yuzey)}
.durak__dugum--var{background:var(--var-fg)}
.durak__dugum--az{background:var(--az-fg);box-shadow:0 0 0 3px var(--yuzey),inset 0 0 0 3px var(--az-fg),inset 0 0 0 5px var(--yuzey)}
.durak__dugum--yok{background:var(--yuzey);box-shadow:0 0 0 3px var(--yuzey),inset 0 0 0 2px var(--yok-fg)}
.durak__dugum--bilinmiyor{background:var(--yuzey);border:2px dashed var(--bilinmiyor-fg)}
.durak--bu .durak__dugum--bilinmiyor{border-width:2.5px}
.durak__dugum--sen{width:14px;height:14px;background:var(--mavi);box-shadow:0 0 0 3px var(--yuzey),0 0 0 6px var(--mavi-halka)}
.durak--bu .durak__dugum{width:18px;height:18px;box-shadow:0 0 0 3px var(--yuzey),0 0 0 5px var(--vurgu)}
.durak--bu .durak__dugum--az{box-shadow:0 0 0 3px var(--yuzey),0 0 0 5px var(--vurgu),inset 0 0 0 4px var(--az-fg),inset 0 0 0 6px var(--yuzey)}
.durak--bu .durak__dugum--yok{box-shadow:0 0 0 3px var(--yuzey),0 0 0 5px var(--vurgu),inset 0 0 0 2px var(--yok-fg)}
.durak--bu .durak__bag{background:var(--vurgu-yumusak);background:color-mix(in srgb, var(--vurgu-yumusak) 55%, var(--yuzey))}
.durak__govde{min-width:0;display:flex;flex-direction:column;gap:1px;padding:9px 8px 9px 8px}
.durak + .durak .durak__govde{border-top:1px solid var(--kenar)}
.durak__isaret{font-size:12px;font-weight:600;color:var(--vurgu);line-height:1.3}
.durak__ad{font-size:15px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.durak--sen .durak__ad{font-weight:500;color:var(--ikincil);font-size:14px}
.durak--sen .durak__mesafe{color:var(--ikincil)}
.durak--sen .durak__bag{min-height:44px}
.durak__alt{font-size:13px;color:var(--ikincil);line-height:1.4}
.durak__ek{font-size:13px;line-height:1.4;color:var(--murekkep)}
.durak__ek .marka-kilit{font-size:13px}
.durak__marka{font-weight:500}
.meta-sira > .durak__marka{white-space:normal;overflow-wrap:anywhere}
.durak__sag{justify-self:end;padding-left:4px}
.durak__ok{display:flex;color:var(--soluk)}
.durak--soluk .durak__bag{opacity:.55}
.durak__pasta{position:relative;display:block;width:26px;height:26px;border-radius:50%;background:var(--yuzey);box-shadow:0 0 0 3px var(--yuzey);line-height:0}
.durak__pasta svg{width:26px;height:26px}
.durak--bu .durak__pasta{box-shadow:0 0 0 2px var(--yuzey),0 0 0 4px var(--vurgu)}

/* DAKİKA CETVELİ: haritadaki yürüme halkalarının düz hâli — Sen · 5 · 10 · 15 dk; hedefe noktalı rota */
.dk-cetvel{padding:30px 16px 24px 12px}
.dk-cetvel--hedefsiz{padding-top:14px}
.dk-cetvel__iz{position:relative;height:2px;border-radius:1px;background:var(--kenar-orta)}
.dk-cetvel__yol{position:absolute;left:0;top:-2px;height:6px;background:radial-gradient(circle, var(--harita-rota) 0 2px, transparent 2.5px) 0 50% / 8px 6px repeat-x}
.dk-cetvel__centik{position:absolute;top:-4px;width:1.5px;height:10px;margin-left:-.75px;background:var(--kenar-koyu)}
.dk-cetvel__centik--sen{left:0;background:none}
.dk-cetvel__centik em{position:absolute;top:13px;left:0;transform:translateX(-50%);font:500 12px/1 var(--mono);font-style:normal;color:var(--ikincil);white-space:nowrap;word-spacing:-.3em}
.dk-cetvel__centik--sen em{font-family:var(--sans);font-weight:600;color:var(--mavi)}
.dk-cetvel__centik--son em{transform:translateX(-80%)}
.dk-cetvel__sen{position:absolute;left:0;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--mavi);box-shadow:0 0 0 2px var(--yuzey),0 0 0 5px var(--mavi-halka)}
.dk-cetvel__nokta{position:absolute;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--renk, var(--kenar-koyu));box-shadow:0 0 0 1.5px var(--yuzey)}
.dk-cetvel__hedef{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--yuzey);box-shadow:inset 0 0 0 4px var(--vurgu),0 0 0 2px var(--yuzey)}
.dk-cetvel__deger{position:absolute;bottom:11px;transform:translateX(-50%);padding:0 8px;border-radius:10px;background:var(--harita-rota);color:var(--vurgu-uzeri);font:600 12.5px/21px var(--mono);word-spacing:-.3em;white-space:nowrap}

/* Bant anahtarı haritanın renk anahtarı gibi: kategori noktası (dükkân rafları) */
.bant__anahtar--renk{background:var(--yuzey-2);background:color-mix(in srgb, var(--renk) 13%, var(--yuzey))}
.bant__anahtar--renk i{display:block;width:12px;height:12px;border-radius:50%;background:var(--renk);box-shadow:0 0 0 2px var(--yuzey)}

/* MARKA + MODEL tablosu: marka sütunu kalın, model normal; tek bakışta hangi markanın hangi modeli */
.mm{margin:0}
.mm__satir{display:grid;grid-template-columns:minmax(96px, 38%) minmax(0,1fr);gap:12px;align-items:baseline;min-height:44px;padding:10px var(--kenar-bosluk);border-bottom:1px solid var(--kenar)}
.mm__satir:last-child{border-bottom:0}
.mm dt{font-weight:600;overflow-wrap:anywhere}
.mm dd{margin:0;overflow-wrap:anywhere}
.mm__bos{color:var(--ikincil);font-size:14px}
/* Plus v5: çeşit fotoğrafı (varsa) solda 44 px; yoksa satır eski iki sütun */
.mm__satir--foto{grid-template-columns:44px minmax(80px, 34%) minmax(0,1fr);align-items:center}
.mm__foto{width:44px;height:44px;border-radius:var(--r);overflow:hidden;background:var(--yuzey-2);line-height:0}
.mm__foto img{width:100%;height:100%;object-fit:cover}
.mm__foto--bos{display:flex;align-items:center;justify-content:center;color:var(--soluk)}
.mm__foto--bos svg{width:20px;height:20px}
/* ürün fotoğrafı kutusu (kabuk çizer, urun-gorsel.js'in stili yüklenmese de dolsun) */
.qb-gorsel-foto{background:var(--yuzey-2)}
.qb-gorsel-foto > img{display:block;width:100%;height:100%;object-fit:cover}

/* HARİTA İĞNESİ — stok bilgisi yok: nötr, kesik kenarlı (paylaşılan iğne 'var' çizer; ui.igneStokuBilinmiyor) */
.qb-stok-bilinmiyor .qb-isaret-igne .qb-igne-govde{fill:var(--yuzey);stroke:var(--bilinmiyor-fg);stroke-width:2.5;stroke-dasharray:4 3}
.qb-stok-bilinmiyor .qb-isaret-igne .qb-igne-sayi{fill:var(--bilinmiyor-fg)}
.qb-stok-bilinmiyor .qb-isaret-igne .qb-igne-ic{fill:var(--bilinmiyor-fg)}
.qb-stok-bilinmiyor .qb-isaret-igne.qb-secili .qb-igne-govde{stroke:var(--murekkep);stroke-dasharray:none}

/* YATAY KART ŞERİDİ (benzerleri, vitrin) */
.k-serit{
  display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
  padding:12px var(--kenar-bosluk) 14px;scroll-padding:0 var(--kenar-bosluk);scrollbar-width:none;
}
.k-serit::-webkit-scrollbar{display:none}
.k-kart{
  flex:none;width:144px;scroll-snap-align:start;display:flex;flex-direction:column;gap:3px;
  color:inherit;text-decoration:none;
}
.k-kart__gorsel{display:block;width:144px;height:112px;border-radius:12px;overflow:hidden;background:var(--yuzey-2);line-height:0;margin-bottom:4px}
.k-kart__gorsel > .qb-gorsel,.k-kart__gorsel > svg{width:100%;height:100%;border-radius:0}
.k-kart__ad{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;font-weight:600;line-height:1.3}
.k-kart__olcu{font-size:13px;color:var(--ikincil);white-space:nowrap}
.k-kart__bilgi{font-size:13px;color:var(--ikincil);line-height:1.35}
.k-kart .rozet{align-self:flex-start;margin-top:2px}
.k-kart--yok .k-kart__gorsel > *{opacity:.55;filter:grayscale(.5)}
.k-kart:hover .k-kart__ad{text-decoration:underline}