/* Temel + kabuk + ortak bileşenler — "Kâğıt" teması (docs/mimari.md §7.6, §8).
   Ekranlar ortak bileşenleri BURADAN kullanır, kopyalamaz.
   Renk, boşluk ve yarıçaplar yalnız tokens.css değişkenlerinden gelir.

   İç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 yardımcıları (.sayfa-ic, .bolum, .bolum-baslik, .ust-etiket)
     6  Düğmeler (.dugme ...)
     7  Çipler, segment, sekme çubuğu, anahtar
     8  Form alanları, arama kutusu
     9  Kart, liste satırı
    10  Ürün kartı, ürün ızgarası, yatay şerit
    11  Dükkân kartı
    12  Rozetler
    13  Alt panel
    14  Pencere
    15  Bildirim
    16  Boş durum, iskelet
    17  Harita (Leaflet) ortak
    18  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(--harita);color:var(--murekkep);
  font-family:var(--sans);font-size:var(--y-govde);line-height:1.45;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
  --alt-bosluk:0px;
}
body.alt-cubuk-acik{--alt-bosluk:calc(var(--alt-cubuk-h) + env(safe-area-inset-bottom, 0px))}
/* Yüzen öğeler (bildirim) yukarı taşan Ara düğmesinin de üstünde durur. */
body.alt-cubuk-acik .katman--bildirim{bottom:calc(var(--alt-bosluk) + var(--ara-tasma) + 10px)}
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:500;line-height:1.15;letter-spacing:-.005em}
p{margin:0 0 .75em}
a{color:var(--vurgu)}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--vurgu);outline-offset:2px}
::selection{background:var(--vurgu-yumusak)}
html.pencere-acik{overflow:hidden}

/* ================================================================ 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:var(--alt-bosluk);
}
/* Tam ekran (harita) ekranları: kök öğeye .ekran--tam ekle; içerik flex sütun,
   sayfa kaymaz, yükseklik alt çubuğa kadar. */
.ekran--tam{
  height:100vh;height:100dvh;min-height:0;overflow:hidden;
  display:flex;flex-direction:column;
}
.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:60dvh;color:var(--ikincil)}
.guncelleme-seridi{
  position:fixed;left:0;right:0;top:0;margin:0 auto;max-width:var(--sutun);z-index:var(--z-bildirim);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(8px + env(safe-area-inset-top, 0px)) var(--kenar-bosluk) 8px;
  background:var(--vurgu-yumusak);border-bottom:1px solid #BCD9C3;font-size:14px;font-weight:600;color:var(--vurgu-koyu);
}

/* ================================================================ 3 alt çubuk */
.alt-cubuk{
  position:fixed;left:0;right:0;bottom:0;margin:0 auto;max-width:var(--sutun);
  z-index:var(--z-cubuk);
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  height:calc(var(--alt-cubuk-h) + env(safe-area-inset-bottom, 0px));
  padding:0 2px env(safe-area-inset-bottom, 0px);
  background:var(--sayfa);border-top:1px solid var(--kenar);box-shadow:var(--golge-yuzen);
}
.alt-cubuk__dugme{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;
  height:var(--alt-cubuk-h);padding-bottom:8px;
  color:var(--ikincil);text-decoration:none;
  font-size:11.5px;font-weight:600;letter-spacing:.01em;
  -webkit-user-select:none;user-select:none;
}
.alt-cubuk__dugme:hover{color:var(--murekkep)}
.alt-cubuk__dugme:focus-visible{outline-offset:-4px;border-radius:var(--r)}
.alt-cubuk__ikon{display:block;line-height:0}
.alt-cubuk__etiket{display:block;line-height:1.2;padding-bottom:2px;border-bottom:2px solid transparent;white-space:nowrap}
.alt-cubuk__dugme.etkin{color:var(--vurgu)}
.alt-cubuk__dugme.etkin .alt-cubuk__etiket{border-bottom-color:var(--vurgu)}
/* ortadaki Ara: yuvarlak, çubuktan yukarı taşan, vurgu renginde */
.alt-cubuk__daire{
  position:absolute;left:50%;top:calc(-1 * var(--ara-tasma));
  width:var(--ara-cap);height:var(--ara-cap);margin-left:calc(var(--ara-cap) / -2);
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--vurgu);color:var(--vurgu-uzeri);
  border:4px solid var(--sayfa);box-shadow: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{background:var(--vurgu-koyu)}
.alt-cubuk__dugme--ara:active .alt-cubuk__daire{transform:scale(.95)}
.alt-cubuk__dugme--ara.etkin .alt-cubuk__daire{background:var(--vurgu-koyu)}
.alt-cubuk__dugme--ara{color:var(--murekkep)}
.alt-cubuk__dugme--ara.etkin{color:var(--vurgu)}
/* profil: okunmamış yanıt noktası */
.alt-cubuk__nokta{
  display:none;position:absolute;top:9px;left:calc(50% + 6px);
  width:10px;height:10px;border-radius:50%;background:var(--yok-fg);border:2px solid var(--sayfa);
}
.alt-cubuk__dugme.nokta-var .alt-cubuk__nokta{display:block}

/* ================================================================ 4 üst çubuk */
.ust-cubuk{
  position:sticky;top:0;z-index:var(--z-yapiskan);
  background:var(--sayfa);border-bottom:1px solid var(--kenar);
  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 6px 0 var(--kenar-bosluk)}
.ust-cubuk__geri{
  flex:none;width:44px;height:44px;margin-left:-10px;display:flex;align-items:center;justify-content:center;
  border:0;border-radius:var(--r);background:none;color:var(--murekkep);
}
.ust-cubuk__geri:hover{background:var(--harita)}
.ust-cubuk__baslik{flex:1;min-width:0;font-size:20px;font-weight:500;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{
  flex:none;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:var(--r);background:none;color:var(--murekkep);padding:0;
}
.ikon-dugme:hover{background:var(--harita)}
.ikon-dugme--kutulu{background:var(--yuzey);border:1px solid var(--kenar-koyu)}
.ikon-dugme--kutulu:hover{background:var(--harita)}

/* ================================================================ 5 yerleşim */
.sayfa-ic{padding-left:var(--kenar-bosluk);padding-right:var(--kenar-bosluk)}
.bolum{margin-top:28px}
.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-family:var(--serif);font-size:21px;font-weight:500;line-height:1.2;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}
.ust-etiket{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ikincil);font-weight:600}
.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:500;letter-spacing:-.01em;line-height:1.1}
.baslik-dev em{font-style:italic;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:var(--r);
  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(--sayfa);background:var(--murekkep);border-color:var(--murekkep)}
.dugme--koyu:hover{background:#000;border-color:#000}
.dugme--ikincil{--dy:var(--murekkep);background:var(--yuzey);border-color:var(--kenar-koyu)}
.dugme--ikincil:hover{background:var(--harita);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:#E2C4B9}
.dugme--tehlike:hover{background:var(--tehlike-bg);border-color:#D9B1A3}
.dugme--plus{--dy:var(--plus);background:var(--plus-bg);border-color:#E3D3B2}
.dugme--plus:hover{background:#F0E4CB;border-color:#D9C49A}
.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:-2px;bottom:-2px}
.dugme--ikon{width:48px;padding:0}
.dugme--kucuk.dugme--ikon{width:40px}
.dugme:disabled,.dugme[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
/* yükleniyor: metin yerinde kalır (genişlik değişmez), üstünde döner halka */
.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 */
.cip{
  position:relative;display:inline-flex;align-items:center;gap:6px;flex:none;
  min-height:36px;padding:0 12px;
  border:1px solid var(--kenar-koyu);border-radius:var(--r-hap);
  background:var(--yuzey);color:var(--murekkep);
  font-size:13.5px;font-weight:600;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:-4px;bottom:-4px}
.cip:hover{border-color:var(--murekkep)}
.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}
.cip[aria-pressed="true"],.cip.secili,.cip[aria-selected="true"]{background:var(--murekkep);border-color:var(--murekkep);color:var(--sayfa)}
.cip[aria-pressed="true"] .cip__sayi,.cip.secili .cip__sayi,.cip[aria-selected="true"] .cip__sayi{color:var(--kenar-koyu)}
.cip[aria-pressed="true"] .cip__nokta,.cip.secili .cip__nokta{box-shadow:0 0 0 1.5px var(--sayfa)}
.cip--yumusak{background:var(--harita);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-koyu);border-radius:var(--r);overflow:hidden;background:var(--yuzey)}
.seg > button{min-height:40px;padding:0 12px;border:0;border-right:1px solid var(--kenar-koyu);background:none;font-size:13.5px;font-weight:600;color:var(--ikincil)}
.seg > button:last-child{border-right:0}
.seg > button[aria-pressed="true"]{background:var(--murekkep);color:var(--sayfa)}

.sekme-cubugu{display:flex;border-bottom:1px solid var(--kenar);padding:0 var(--kenar-bosluk);background:var(--sayfa)}
.sekme-cubugu > button,.sekme-cubugu > a{
  display:inline-flex;align-items:center;gap:6px;min-height:46px;padding:0 12px;margin-bottom:-1px;
  border:0;border-bottom:2px solid transparent;background:none;
  font-size:14.5px;font-weight:600;color:var(--ikincil);text-decoration:none;
}
.sekme-cubugu > [aria-selected="true"]{color:var(--murekkep);border-bottom-color:var(--vurgu)}
.sekme-cubugu .n{font-size:11.5px;font-weight:600;background:var(--harita);color:var(--ikincil);padding:1px 7px;border-radius:var(--r-hap)}
.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:600;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:0 1px 2px rgba(0,0,0,.2);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(--vurgu);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:#8B8A82}
.girdi:focus{outline:none;border-color:var(--murekkep);box-shadow:0 0 0 3px var(--vurgu-yumusak)}
textarea.girdi{min-height:96px;padding:12px 14px;line-height:1.45;resize:vertical}
select.girdi{
  -webkit-appearance:none;appearance:none;padding-right:40px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C5B55' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:18px;
}
.alan--hata .girdi{border-color:var(--tehlike)}
.alan--hata .girdi:focus{box-shadow:0 0 0 3px var(--tehlike-bg)}
.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-kucuk);background:none;color:var(--ikincil);
}
.girdi-grup__dugme:hover{color:var(--murekkep)}
.sayac-metin{font-size:12.5px;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-kucuk);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: <form class="arama-kutu"><span class="ikon">…</span><input type="search"><button class="arama-kutu__temizle">…</button></form> */
.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(--murekkep);box-shadow:0 0 0 3px var(--vurgu-yumusak)}
.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:#8B8A82}
.arama-kutu input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.arama-kutu__temizle,.arama-kutu__dugme{
  flex:none;width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border:0;border-radius:var(--r-kucuk);background:none;color:var(--ikincil);
}
.arama-kutu__dugme{background:var(--vurgu);color:var(--vurgu-uzeri)}
/* düğme görünümlü arama alanı (ana sayfa): a.arama-kutu.arama-kutu--sahte */
.arama-kutu--sahte{text-decoration:none;font-size:16px;color:#8B8A82;cursor:text}
.arama-kutu--sahte:hover{border-color:var(--murekkep)}

/* ================================================================ 9 kart, 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:#BCD9C3}
.kart--plus{background:var(--plus-bg);border-color:#E3D3B2}
a.kart{display:block;color:inherit;text-decoration:none}
a.kart:hover{border-color:var(--kenar-koyu)}
.kart__baslik{font-family:var(--serif);font-size:19px;font-weight:500;line-height:1.2;margin:0 0 4px}
.kart__metin{font-size:14px;color:var(--ikincil);margin:0}

/* liste: .liste > .satir (kutulu grup) ya da doğrudan .satir'lar */
.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-kucuk);background:var(--harita);color:var(--ikincil);overflow:hidden;
}
.satir__ikon svg{width:22px;height:22px}
.satir__ikon--gorsel{width:48px;height:48px;background:var(--harita);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;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.satir__alt{display:block;font-size:13px;color:var(--ikincil);margin-top:1px;line-height:1.35}
.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(--kenar-koyu);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 kartı */
.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;
  transition:border-color var(--gecis-hizli);
}
.urun-kart:hover{border-color:var(--kenar-koyu)}
.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(--vurgu);outline-offset:-2px}
.urun-kart__gorsel{position:relative;display:block;aspect-ratio:1 / 1;background:var(--harita);border-bottom:1px solid var(--kenar);overflow:hidden}
.urun-kart__gorsel > *{position:absolute;inset:0;width:100%;height:100%}
.urun-kart__gorsel img{object-fit:cover}
.urun-kart__svg{display:block}
/* paylaşılan urunGorseli() kutusu (.qb-gorsel) kartın karesini doldurur */
.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}
/* marka büyük harfe çevrilmez: Türkçe yerelde "Spigen" → "SPİGEN" olurdu */
.urun-kart__marka{display:block;font-size:12px;letter-spacing:.02em;font-weight:600;color:var(--ikincil);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.urun-kart__ad{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:14.5px;font-weight:500;line-height:1.3;min-height:2.6em;
}
.urun-kart__alt{display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:6px}
.urun-kart__dukkan{display:block;font-size:12.5px;color:var(--ikincil);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.urun-kart--yok .urun-kart__gorsel > *{opacity:.55;filter:grayscale(.5)}
.urun-kart__kalp,.kalp-dugme{
  position:absolute;top:6px;right:6px;width:40px;height:40px;z-index:1;
  display:flex;align-items:center;justify-content:center;padding:0;
  border:1px solid var(--kenar);border-radius:50%;background:rgba(255,255,255,.94);color:var(--murekkep);
  transition:color var(--gecis-hizli),transform var(--gecis-hizli);
}
.urun-kart__kalp::after{content:"";position:absolute;inset:-2px}
.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;width:44px;height:44px;flex:none}
/* küçük kart: yatay şeritte */
.urun-kart--kucuk .urun-kart__govde{padding:8px 10px 10px}
.urun-kart--kucuk .urun-kart__ad{font-size:13.5px}
.urun-kart--kucuk .urun-kart__kalp{width:36px;height:36px;top:4px;right:4px}
.urun-kart--kucuk .urun-kart__kalp::after{inset:-4px}

.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 kartı */
.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-koyu)}
.dukkan-kart.secili{border-color:var(--murekkep);box-shadow:0 0 0 1px var(--murekkep)}
.dukkan-kart__logo{
  flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;
  color:var(--renk);background:var(--harita);
  background:color-mix(in srgb, var(--renk) 12%, var(--yuzey));
  border:1px solid color-mix(in srgb, var(--renk) 28%, var(--yuzey));
  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-family:var(--serif);font-size:18px;font-weight:500;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dukkan-kart__tur{display:block;font-size:13px;color:var(--ikincil);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dukkan-kart__meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin-top:5px;font-size:13px;color:var(--ikincil)}
.dukkan-kart__pasta{flex:none;width:52px;height:52px}
.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 */
.rozet{
  display:inline-flex;align-items:center;gap:5px;flex:none;
  padding:2px 8px;border-radius:6px;
  font-size:12px;font-weight:600;line-height:1.45;white-space:nowrap;
  background:var(--harita);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--acik{background:var(--var-bg);color:var(--var-fg)}
.rozet--kapali{background:var(--yok-bg);color:var(--yok-fg)}
.rozet--plus{background:var(--plus-bg);color:var(--plus);letter-spacing:.02em}
.rozet--plus svg{fill:currentColor}
.rozet--notr{background:var(--harita);color:var(--ikincil)}
.rozet--bekliyor{background:var(--harita);color:var(--ikincil)}
.rozet--demo{background:transparent;color:var(--ikincil);border:1px dashed var(--kenar-koyu);padding:1px 7px}
.rozet--sayi{min-width:20px;justify-content:center;padding:1px 6px;border-radius:var(--r-hap);background:var(--vurgu);color:var(--vurgu-uzeri)}

/* ================================================================ 13 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(--sayfa);border:1px solid var(--kenar-koyu);border-bottom:0;
  border-radius:var(--r-buyuk) var(--r-buyuk) 0 0;box-shadow:var(--golge-yuzen);
  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:30px;padding:0;border:0;background:none;
  cursor:grab;touch-action:none;
}
.alt-panel__tutamak::after{content:"";position:absolute;left:0;right:0;top:-6px;bottom:-8px}
.alt-panel__cizgi{display:block;width:40px;height:4px;border-radius:2px;background:var(--kenar-koyu);transition:background var(--gecis-hizli)}
.alt-panel__tutamak:hover .alt-panel__cizgi,.alt-panel.surukleniyor .alt-panel__cizgi{background:var(--ikincil)}
.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) 10px;border-bottom:1px solid var(--kenar);touch-action:none;-webkit-user-select:none;user-select:none}
.alt-panel__baslik-metin{font-family:var(--serif);font-size:19px;font-weight:500;line-height:1.2}
.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);
}

/* ================================================================ 14 pencere */
.pencere-arka{
  position:fixed;inset: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:rgba(26,26,24,.4);opacity:0;transition:opacity var(--gecis);
}
.pencere-arka.acik{opacity:1}
.pencere{
  width:100%;max-width:400px;max-height:calc(100dvh - 48px);overflow:auto;
  background:var(--sayfa);border:1px solid var(--kenar-koyu);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 10px 0 20px}
.pencere__baslik{font-size:22px;font-weight:500;padding-top:8px}
.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(--harita);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%}

/* ================================================================ 15 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(--murekkep);color:var(--sayfa);box-shadow:var(--golge-kart);
  font-size:14.5px;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:#A7D8B4}
.bildirim--hata{background:#6E2A14}
.bildirim--hata .ikon{color:#F3C9B8}

/* ================================================================ 16 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(--harita);border:1px solid var(--kenar);color:var(--ikincil);
}
.bos-durum__baslik{font-size:21px}
.bos-durum__metin{max-width:300px;margin:0;font-size:14.5px;color:var(--ikincil)}
.bos-durum .dugme{margin-top:10px}

.iskelet{display:block;background:var(--harita);border-radius:6px;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}
.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-kucuk)}
.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}
@media (prefers-reduced-motion: reduce){
  .iskelet,.dugme.yukleniyor::before{animation-duration:2.4s}
  *{scroll-behavior:auto !important}
}

/* ================================================================ 17 harita ortak */
.leaflet-container{font-family:var(--sans);background:var(--harita)}
.qb-karo{filter:sepia(.18) saturate(.85) brightness(1.02)}
.leaflet-control-attribution{font-size:10px;background:rgba(251,250,247,.85) !important;color:var(--ikincil)}
.leaflet-control-attribution a{color:var(--ikincil)}
.harita-kap{position:relative;overflow:hidden;background:var(--harita)}

/* ================================================================ 18 notlar, yardımcılar */
.not-kutu{
  display:flex;align-items:flex-start;gap:8px;padding:9px 12px;
  border:1px dashed var(--kenar-koyu);border-radius:var(--r-kucuk);
  font-size:13px;line-height:1.45;color:var(--ikincil);
}
.not-kutu svg{flex:none;width:16px;height:16px;margin-top:1px}
.metin-ikincil{color:var(--ikincil)}
.metin-kucuk{font-size:var(--y-alt)}
.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}

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