/* Deliva — ortak stil */
:root {
  --mor: #0f766e;          /* ana renk: koyu teal */
  --mor-koyu: #115e59;
  --sari: #f59e0b;
  --yesil: #059669;
  --kırmızı: #dc2626;
  --turuncu: #ea580c;
  --mavi: #0284c7;
  --zemin: #f1f5f9;
  --kart: #ffffff;
  --metin: #0f172a;
  --soluk: #64748b;
  --cizgi: #e2e8f0;
  --golge: 0 1px 3px rgba(15, 23, 42, .07), 0 4px 14px rgba(15, 23, 42, .05);
  --golge-büyük: 0 10px 34px rgba(15, 23, 42, .16);
  --r: 12px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter','Segoe UI',system-ui, -apple-system, sans-serif;
  background: var(--zemin);
  color: var(--metin);
  font-size: 15px;
  line-height: 1.45;
}
button { font-family: inherit; cursor: pointer; border: 0; background: none; font-size: inherit; color: inherit; }
input, select, textarea {
  font-family: inherit; font-size: 15px; width: 100%;
  padding: 10px 12px; border: 1.5px solid var(--cizgi); border-radius: 10px;
  background: #fff; color: var(--metin); outline: none; transition: border-color .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--mor); }
label { font-size: 13px; font-weight: 600; color: var(--soluk); display: block; margin: 10px 0 4px; }
a { color: var(--mor); text-decoration: none; }
img { max-width: 100%; }

/* ---------- Yerlesim ---------- */
.app { min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 900;
  background: var(--mor); color: #fff;
  padding: 10px 16px; display: flex; align-items: center; gap: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
}
.topbar .logo { font-weight: 800; font-size: 18px; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.topbar .logo .rozet { background: var(--sari); color: #1d1b2e; font-size: 10px; padding: 2px 7px; border-radius: 20px; font-weight: 800; }
.topbar .bosluk { flex: 1; }
.topbar .tb-btn {
  position: relative; background: rgba(255,255,255,.14); border-radius: 10px;
  padding: 8px 12px; color: #fff; font-weight: 600; font-size: 14px;
  display: inline-flex; align-items: center; gap: 6px;
}
.topbar .tb-btn:hover { background: rgba(255,255,255,.24); }
.badge-dot {
  position: absolute; top: -4px; right: -4px; background: var(--kırmızı); color: #fff;
  min-width: 18px; height: 18px; border-radius: 9px; font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.içerik { flex: 1; width: 100%; max-width: 1280px; margin: 0 auto; padding: 18px 16px 90px; }
.içerik.genis { max-width: 1500px; }

/* Alt gezinme (mobil his) */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 900;
  background: #fff; border-top: 1px solid var(--cizgi);
  display: flex; justify-content: space-around; padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 20px rgba(40,20,100,.08);
}
.tabbar button {
  flex: 1; max-width: 120px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 11px; font-weight: 600; color: var(--soluk); padding: 4px; border-radius: 10px; position: relative;
}
.tabbar button .ikon { font-size: 21px; }
.tabbar button.aktif { color: var(--mor); }
.tabbar button .badge-dot { top: -2px; right: calc(50% - 22px); }

/* Yan menu (masaustu panelleri) */
.yan-yerlesim { display: flex; min-height: calc(100vh - 52px); }
.yanmenu {
  width: 225px; background: #fff; border-right: 1px solid var(--cizgi);
  padding: 14px 10px; flex-shrink: 0; position: sticky; top: 52px; height: calc(100vh - 52px);
  overflow-y: auto;
}
.yanmenu button {
  width: 100%; text-align: left; padding: 11px 13px; border-radius: 10px;
  font-weight: 600; color: var(--soluk); display: flex; align-items: center; gap: 10px; margin-bottom: 3px;
  position: relative;
}
.yanmenu button:hover { background: var(--zemin); }
.yanmenu button.aktif { background: #ccfbf1; color: var(--mor); }
.yanmenu .badge-dot { position: static; margin-left: auto; }
.yan-içerik { flex: 1; padding: 20px; min-width: 0; }

/* ---------- Kartlar ---------- */
.kart { background: var(--kart); border-radius: var(--r); box-shadow: var(--golge); padding: 16px; }
.kart + .kart { margin-top: 14px; }
.kart-başlık { font-size: 16px; font-weight: 800; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.kart-başlık .sağ { margin-left: auto; font-size: 13px; font-weight: 600; }

.stat-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.stat {
  background: var(--kart); border-radius: var(--r); box-shadow: var(--golge); padding: 14px 16px;
  border-left: 4px solid var(--mor);
}
.stat.yesil { border-color: var(--yesil); } .stat.sari { border-color: var(--turuncu); }
.stat.kırmızı { border-color: var(--kırmızı); } .stat.mavi { border-color: var(--mavi); }
.stat .st-değer { font-size: 22px; font-weight: 800; }
.stat .st-ad { font-size: 12px; color: var(--soluk); font-weight: 600; }

/* ---------- Butonlar ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--mor); color: #fff; font-weight: 700; font-size: 14px;
  padding: 11px 18px; border-radius: 11px; transition: filter .15s, transform .05s;
}
.btn:hover { filter: brightness(1.1); }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.tam { width: 100%; }
.btn.yesil { background: var(--yesil); } .btn.kırmızı { background: var(--kırmızı); }
.btn.sari { background: var(--sari); color: #1d1b2e; } .btn.gri { background: #e2e8f0; color: var(--metin); }
.btn.küçük { padding: 7px 12px; font-size: 13px; border-radius: 9px; }
.btn.cerceve { background: #fff; color: var(--mor); border: 1.5px solid var(--mor); }

/* ---------- Etiketler ---------- */
.etiket {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700;
  padding: 3px 9px; border-radius: 20px; background: #ccfbf1; color: var(--mor); white-space: nowrap;
}
.etiket.yesil { background: #e0f7ef; color: #00926f; }
.etiket.sari { background: #fff4d6; color: #a06b00; }
.etiket.kırmızı { background: #fde6e3; color: #c0392b; }
.etiket.mavi { background: #e1effc; color: #0866b3; }
.etiket.gri { background: #e2e8f0; color: var(--soluk); }

/* ---------- Liste / tablo ---------- */
.satir { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--cizgi); }
.satir:last-child { border-bottom: 0; }
.tablo-sar { overflow-x: auto; }
table.tablo { width: 100%; border-collapse: collapse; font-size: 14px; }
.tablo th { text-align: left; font-size: 12px; color: var(--soluk); font-weight: 700; padding: 8px 10px; border-bottom: 2px solid var(--cizgi); white-space: nowrap; }
.tablo td { padding: 10px; border-bottom: 1px solid var(--cizgi); vertical-align: middle; }
.tablo tr:hover td { background: #f8fafc; }

/* ---------- Emoji görsel kutulari ---------- */
.görsel {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #f8fafc, #e2e8f0); border-radius: 12px; flex-shrink: 0;
  overflow: hidden;
}
.görsel img { width: 100%; height: 100%; object-fit: cover; }
.g32 { width: 32px; height: 32px; font-size: 18px; } .g44 { width: 44px; height: 44px; font-size: 24px; }
.g56 { width: 56px; height: 56px; font-size: 30px; } .g72 { width: 72px; height: 72px; font-size: 38px; }

/* ---------- Modal ---------- */
.modal-fon {
  position: fixed; inset: 0; background: rgba(20,12,50,.55); z-index: 1000;
  display: flex; align-items: flex-end; justify-content: center; animation: fon-ac .18s;
}
@keyframes fon-ac { from { opacity: 0; } }
.modal {
  background: #fff; width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto;
  border-radius: 20px 20px 0 0; padding: 20px; animation: modal-ac .22s ease-out;
}
@keyframes modal-ac { from { transform: translateY(40px); opacity: .6; } }
@media (min-width: 640px) {
  .modal-fon { align-items: center; padding: 20px; }
  .modal { border-radius: 20px; }
}
.modal-başlık { font-size: 17px; font-weight: 800; display: flex; align-items: center; margin-bottom: 14px; }
.modal-başlık .kapat { margin-left: auto; font-size: 22px; color: var(--soluk); padding: 2px 8px; border-radius: 8px; }
.modal-başlık .kapat:hover { background: var(--zemin); }

/* ---------- Toast ---------- */
#toast-alan { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 2000; display: flex; flex-direction: column; gap: 8px; width: min(94vw, 420px); }
.toast {
  background: #0f172a; color: #fff; padding: 12px 16px; border-radius: 12px;
  box-shadow: var(--golge-büyük); font-weight: 600; font-size: 14px;
  display: flex; align-items: center; gap: 9px; animation: toast-gel .25s ease-out;
}
.toast.yesil { background: #00926f; } .toast.kırmızı { background: #c0392b; } .toast.sari { background: #a06b00; }
@keyframes toast-gel { from { transform: translateY(-18px); opacity: 0; } }

/* ---------- Giriş ekranı ---------- */
.giriş-sayfa {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: linear-gradient(150deg, var(--mor) 0%, var(--mor-koyu) 60%, #2d1b69 100%);
}
.giriş-kart { background: #fff; border-radius: 22px; box-shadow: var(--golge-büyük); width: 100%; max-width: 400px; padding: 28px; }
.giriş-kart .g-logo { text-align: center; font-size: 44px; }
.giriş-kart h1 { text-align: center; font-size: 21px; margin: 4px 0 2px; }
.giriş-kart .alt-yazi { text-align: center; color: var(--soluk); font-size: 13px; margin-bottom: 16px; }
.demo-kutu { background: #f8fafc; border: 1px dashed #99f6e4; border-radius: 12px; padding: 10px 12px; font-size: 12.5px; color: var(--soluk); margin-top: 14px; }
.demo-kutu b { color: var(--metin); }
.demo-kutu .demo-satir { cursor: pointer; padding: 3px 4px; border-radius: 6px; }
.demo-kutu .demo-satir:hover { background: #ccfbf1; }

/* ---------- Harita ---------- */
.harita { width: 100%; border-radius: var(--r); z-index: 1; }
.h-260 { height: 260px; } .h-380 { height: 380px; } .h-tam { height: calc(100vh - 210px); min-height: 420px; }
.leaflet-div-icon { background: none !important; border: none !important; }
.pin-kurye {
  width: 38px; height: 38px; border-radius: 50% 50% 50% 6px; background: var(--mor);
  display: flex; align-items: center; justify-content: center; font-size: 19px;
  box-shadow: 0 3px 10px rgba(0,0,0,.35); border: 2.5px solid #fff; transform: rotate(0deg);
}
.pin-kurye.çevrimdışı { background: #94a3b8; }
.pin-mağaza { width: 34px; height: 34px; border-radius: 10px; background: #fff; border: 2.5px solid var(--mor); display: flex; align-items: center; justify-content: center; font-size: 17px; box-shadow: 0 3px 10px rgba(0,0,0,.3); }
.pin-ev { width: 34px; height: 34px; border-radius: 50%; background: var(--yesil); border: 2.5px solid #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; box-shadow: 0 3px 10px rgba(0,0,0,.3); }

/* ---------- Sipariş durum cubugu ---------- */
.durum-cubuk { display: flex; gap: 5px; margin: 10px 0; }
.durum-cubuk .adim { flex: 1; height: 6px; border-radius: 3px; background: var(--cizgi); transition: background .3s; }
.durum-cubuk .adim.doldu { background: var(--yesil); }
.durum-cubuk .adim.aktif { background: var(--sari); animation: yanip .9s infinite alternate; }
@keyframes yanip { to { opacity: .45; } }

/* ---------- Sekmeler ---------- */
.sekmeler { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px; }
.sekmeler button {
  padding: 8px 15px; border-radius: 20px; font-weight: 700; font-size: 13.5px;
  background: #fff; color: var(--soluk); border: 1.5px solid var(--cizgi); white-space: nowrap;
}
.sekmeler button.aktif { background: var(--mor); color: #fff; border-color: var(--mor); }

/* ---------- Ürün karti (müşteri) ---------- */
.ürün-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; }
.ürün-kart {
  background: #fff; border-radius: var(--r); box-shadow: var(--golge); padding: 12px;
  display: flex; flex-direction: column; gap: 7px; position: relative; cursor: pointer; transition: transform .12s;
}
.ürün-kart:hover { transform: translateY(-2px); box-shadow: var(--golge-büyük); }
.ürün-kart .görsel { width: 100%; height: 90px; font-size: 44px; }
.ürün-kart .u-ad { font-weight: 700; font-size: 14px; line-height: 1.25; }
.ürün-kart .u-desc { font-size: 12px; color: var(--soluk); }
.ürün-kart .u-fiyat { font-weight: 800; color: var(--mor); margin-top: auto; }
.ürün-kart .u-eski { color: var(--soluk); text-decoration: line-through; font-weight: 600; font-size: 12.5px; margin-left: 5px; }
.ürün-kart .ekle {
  position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 10px;
  background: var(--mor); color: #fff; font-size: 19px; font-weight: 800; box-shadow: 0 3px 8px rgba(15,118,110,.35);
  display: flex; align-items: center; justify-content: center;
}
.ürün-kart .u-rozet { position: absolute; top: 8px; left: 8px; z-index: 2; }

/* Mağaza karti */
.mağaza-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.mağaza-kart { background: #fff; border-radius: var(--r); box-shadow: var(--golge); overflow: hidden; cursor: pointer; transition: transform .12s; position: relative; }
.mağaza-kart:hover { transform: translateY(-3px); box-shadow: var(--golge-büyük); }
.mağaza-kart .mk-üst { height: 74px; display: flex; align-items: center; justify-content: center; font-size: 40px; }
.mağaza-kart .mk-govde { padding: 12px 14px; }
.mağaza-kart .mk-ad { font-weight: 800; font-size: 15.5px; display: flex; align-items: center; gap: 7px; }
.mağaza-kart .mk-bilgi { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--soluk); margin-top: 6px; font-weight: 600; }
.mağaza-kart.kapalı { filter: grayscale(.85); opacity: .75; }
.fav-btn { position: absolute; top: 8px; right: 8px; font-size: 20px; z-index: 2; background: rgba(255,255,255,.85); border-radius: 50%; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; }

/* Kampanya karti */
.kampanya-serit { display: flex; gap: 12px; overflow-x: auto; padding: 4px 0 8px; }
.kampanya-kart {
  min-width: 270px; border-radius: var(--r); color: #fff; padding: 16px; cursor: pointer;
  display: flex; flex-direction: column; gap: 5px; box-shadow: var(--golge); position: relative; overflow: hidden;
}
.kampanya-kart .kk-emoji { font-size: 30px; }
.kampanya-kart .kk-başlık { font-weight: 800; font-size: 15.5px; }
.kampanya-kart .kk-desc { font-size: 12.5px; opacity: .92; }
.kampanya-kart .kk-kod { background: rgba(255,255,255,.22); border: 1px dashed rgba(255,255,255,.6); border-radius: 8px; padding: 3px 10px; font-weight: 800; letter-spacing: 1px; width: fit-content; margin-top: 4px; }

/* Sepet cubugu */
.sepet-cubuk {
  position: fixed; bottom: 64px; left: 50%; transform: translateX(-50%); z-index: 890;
  width: min(94vw, 500px); background: var(--mor); color: #fff; border-radius: 14px;
  padding: 12px 18px; display: flex; align-items: center; gap: 12px; cursor: pointer;
  box-shadow: var(--golge-büyük); font-weight: 700; animation: modal-ac .25s;
}
.sepet-cubuk .adet { background: var(--sari); color: #1d1b2e; border-radius: 8px; padding: 2px 9px; font-weight: 800; }

/* Miktar kontrol */
.miktar { display: inline-flex; align-items: center; gap: 10px; background: var(--zemin); border-radius: 10px; padding: 4px; }
.miktar button { width: 30px; height: 30px; border-radius: 8px; background: #fff; font-weight: 800; font-size: 17px; color: var(--mor); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.miktar span { font-weight: 800; min-width: 22px; text-align: center; }

/* Yildizlar */
.yildizlar { display: inline-flex; gap: 2px; font-size: 26px; cursor: pointer; }
.yildizlar span { color: #cbd5e1; transition: color .1s; }
.yildizlar span.dolu { color: var(--sari); }

/* Sohbet */
.sohbet-kutu { display: flex; flex-direction: column; gap: 8px; max-height: 300px; overflow-y: auto; padding: 6px 2px; }
.balon { max-width: 80%; padding: 9px 13px; border-radius: 14px; font-size: 14px; }
.balon.ben { align-self: flex-end; background: var(--mor); color: #fff; border-bottom-right-radius: 4px; }
.balon.o { align-self: flex-start; background: #e2e8f0; border-bottom-left-radius: 4px; }
.balon .b-kim { font-size: 11px; opacity: .75; font-weight: 700; margin-bottom: 2px; }

/* Bildirim paneli */
.bildirim-panel { position: fixed; top: 56px; right: 10px; width: min(94vw, 360px); max-height: 70vh; overflow-y: auto; background: #fff; border-radius: 14px; box-shadow: var(--golge-büyük); z-index: 950; padding: 8px; }
.bildirim { padding: 10px 12px; border-radius: 10px; display: flex; gap: 10px; align-items: flex-start; }
.bildirim.yeni { background: #f0fdfa; }
.bildirim .b-başlık { font-weight: 700; font-size: 14px; }
.bildirim .b-govde { font-size: 12.5px; color: var(--soluk); }
.bildirim .b-zaman { font-size: 11px; color: var(--soluk); }

/* Seviye karti */
.seviye-kart { border-radius: var(--r); padding: 18px; color: #fff; background: linear-gradient(135deg, #0f766e, #155e75); box-shadow: var(--golge); }
.seviye-bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,.25); overflow: hidden; margin: 8px 0 4px; }
.seviye-bar .dolu { height: 100%; background: var(--sari); border-radius: 4px; transition: width .4s; }

.izgara-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.izgara-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 800px) { .izgara-2, .izgara-3 { grid-template-columns: 1fr; } .yanmenu { display: none; } }
@media (min-width: 801px) { .tabbar.masaustu-gizle { display: none; } .içerik { padding-bottom: 24px; } .sepet-cubuk { bottom: 18px; } }

.boş-durum { text-align: center; padding: 40px 16px; color: var(--soluk); }
.boş-durum .bd-ikon { font-size: 52px; margin-bottom: 8px; }
.mini { font-size: 12.5px; color: var(--soluk); }
.para { font-weight: 800; white-space: nowrap; }
.gizle { display: none !important; }
.nokta-yesil, .nokta-gri { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.nokta-yesil { background: var(--yesil); box-shadow: 0 0 0 3px rgba(0,184,148,.25); }
.nokta-gri { background: #94a3b8; }
.canlı-rozet { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--yesil); }
.canlı-rozet::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--yesil); animation: yanip .8s infinite alternate; }

/* ==========================================================================
   RAFINE KATMAN — tipografi, derinlik ve gerçek fotograflar için duzenlemeler
   ========================================================================== */

body { font-size: 14.5px; letter-spacing: -.005em; -webkit-font-smoothing: antialiased; }
h1, h2, h3, b, strong { letter-spacing: -.02em; }

/* --- Üst bar: yumusak degrade + cam etkisi --- */
.topbar {
  background: linear-gradient(100deg, var(--mor-koyu) 0%, var(--mor) 55%, #0d9488 100%);
  padding: 11px 20px;
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 4px 18px rgba(15,23,42,.14);
}
.topbar .logo { font-size: 17px; letter-spacing: -.03em; }
.topbar .logo .rozet {
  background: rgba(255,255,255,.2); color: #fff; border: 1px solid rgba(255,255,255,.34);
  letter-spacing: .06em; text-transform: uppercase;
}
.topbar .tb-btn {
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16);
  border-radius: 9px; padding: 7px 12px; font-size: 13.5px; transition: background .15s, border-color .15s;
}
.topbar .tb-btn:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.3); }

/* --- Kartlar: ince kenarlik + daha hafif golge --- */
.kart {
  border: 1px solid var(--cizgi);
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  padding: 18px;
}
.kart-başlık { font-size: 15px; letter-spacing: -.01em; }

/* --- Istatistik kutulari: üst cizgi vurgusu --- */
.stat {
  border: 1px solid var(--cizgi); border-left: 3px solid var(--mor);
  box-shadow: 0 1px 2px rgba(15,23,42,.04); padding: 15px 17px;
}
.stat .st-değer { font-size: 23px; letter-spacing: -.03em; line-height: 1.15; }
.stat .st-ad { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; margin-top: 3px; }

/* --- Butonlar --- */
.btn {
  border-radius: 10px; font-size: 13.5px; letter-spacing: -.01em;
  box-shadow: 0 1px 2px rgba(15,23,42,.08); transition: filter .15s, transform .06s, box-shadow .15s;
}
.btn:hover { filter: brightness(1.06); box-shadow: 0 3px 10px rgba(15,23,42,.14); }
.btn.gri { box-shadow: none; border: 1px solid var(--cizgi); }
.btn.gri:hover { background: #cbd5e1; }
.btn.cerceve { box-shadow: none; }
.btn.cerceve:hover { background: #f0fdfa; }

input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(15,118,110,.13); }
input, select, textarea { border-radius: 9px; }

/* --- Yan menu --- */
.yanmenu { width: 232px; padding: 16px 12px; background: #fff; }
.yanmenu button { font-size: 13.5px; padding: 10px 12px; border-radius: 9px; }
.yanmenu button.aktif { background: #f0fdfa; color: var(--mor-koyu); box-shadow: inset 3px 0 0 var(--mor); }

/* --- Sekmeler --- */
.sekmeler button { font-size: 13px; padding: 7px 14px; border-radius: 8px; box-shadow: none; }
.sekmeler button:hover { border-color: #cbd5e1; }
.sekmeler button.aktif { box-shadow: 0 2px 8px rgba(15,118,110,.28); }

/* --- Etiketler --- */
.etiket { font-size: 11.5px; padding: 3px 8px; border-radius: 6px; letter-spacing: -.005em; }

/* --- Mağaza kartlari: kapak seridi --- */
.mağaza-kart { border: 1px solid var(--cizgi); box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.mağaza-kart:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15,23,42,.13); border-color: #cbd5e1; }
.mağaza-kart .mk-üst { height: 88px; position: relative; }
.mağaza-kart .mk-üst::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.5), transparent 60%);
}
.mağaza-kart .mk-ad { font-size: 15px; }
.mağaza-kart .mk-bilgi { font-size: 12px; gap: 8px 12px; }
.fav-btn {
  background: rgba(255,255,255,.92); box-shadow: 0 2px 6px rgba(15,23,42,.16);
  transition: transform .12s;
}
.fav-btn:hover { transform: scale(1.12); }
.fav-btn .ik { color: var(--soluk); transition: color .15s, fill .15s; }
.fav-btn:hover .ik { color: var(--kırmızı); }
.fav-btn.dolu .ik { color: var(--kırmızı); fill: var(--kırmızı); }
/* Favoriler sekmesindeki kalp de dolu görünsün */
.sekmeler button[data-fav].aktif .ik { fill: currentColor; }

/* --- Ürün kartlari: gerçek fotoğraf yerlesimi --- */
.ürün-izgara { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 14px; }
.ürün-kart {
  border: 1px solid var(--cizgi); box-shadow: 0 1px 2px rgba(15,23,42,.04);
  padding: 0 0 12px; gap: 0; overflow: hidden;
}
.ürün-kart:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(15,23,42,.14); border-color: #cbd5e1; }
.ürün-kart > .görsel {
  width: 100%; height: 132px; border-radius: 0; font-size: 46px;
  background: linear-gradient(135deg, #f8fafc, #e2e8f0);
}
.ürün-kart > .görsel img { transition: transform .35s ease; }
.ürün-kart:hover > .görsel img { transform: scale(1.06); }
.ürün-kart .u-ad { font-size: 13.5px; padding: 10px 12px 0; }
.ürün-kart .u-desc { font-size: 11.5px; padding: 2px 12px 0; line-height: 1.3; }
.ürün-kart .u-fiyat { font-size: 15.5px; padding: 8px 12px 0; letter-spacing: -.02em; }
.ürün-kart .u-eski { font-size: 11.5px; }
.ürün-kart .ekle {
  right: 12px; bottom: 10px; width: 32px; height: 32px; border-radius: 9px; font-size: 18px;
  box-shadow: 0 3px 10px rgba(15,118,110,.4);
}
.ürün-kart .ekle:hover { transform: scale(1.08); }
.ürün-kart .u-rozet { top: 10px; left: 10px; box-shadow: 0 2px 6px rgba(15,23,42,.2); }

/* --- Kampanya kartlari --- */
.kampanya-kart { border-radius: 14px; padding: 18px; box-shadow: 0 4px 16px rgba(15,23,42,.14); }
.kampanya-kart::after {
  content: ''; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px;
  border-radius: 50%; background: rgba(255,255,255,.1);
}
.kampanya-kart:hover { transform: translateY(-2px); transition: transform .15s; }
/* Temsili fotoğraf: rengin uzerine yumusak bir katman olarak yerlesir. */
.kampanya-kart .kk-foto {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  opacity: .34; mix-blend-mode: luminosity;
}
.kampanya-kart > *:not(.kk-foto) { position: relative; z-index: 2; }
.kampanya-kart::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(115deg, currentColor 0%, transparent 85%); opacity: .0;
}
.kampanya-kart .kk-başlık { font-size: 16px; letter-spacing: -.02em; }

/* --- Sepet cubugu --- */
.sepet-cubuk {
  background: linear-gradient(100deg, var(--mor-koyu), var(--mor));
  border-radius: 12px; box-shadow: 0 8px 26px rgba(15,118,110,.4);
  font-size: 14px;
}
.sepet-cubuk:hover { filter: brightness(1.08); }
.sepet-cubuk .adet { color: #422006; }

/* --- Tablolar --- */
.tablo th {
  text-transform: uppercase; letter-spacing: .05em; font-size: 11px;
  background: #f8fafc; border-bottom: 1px solid var(--cizgi); padding: 10px;
}
.tablo td { font-size: 13.5px; }
.tablo tr:hover td { background: #f0fdfa; }
/* Detay açan satırlar */
.tablo tr.tiklanir { cursor: pointer; }
.tablo tr.tiklanir:hover td:first-child { box-shadow: inset 3px 0 0 var(--mor); }
/* Geniş dosya modalleri */
.modal-fon.genis .modal { max-width: 1080px; }

/* --- Durum cubugu --- */
.durum-cubuk .adim { height: 5px; border-radius: 999px; }

/* --- Modal --- */
.modal-fon { background: rgba(15,23,42,.55); backdrop-filter: blur(3px); }
.modal { border-radius: 16px; padding: 22px; box-shadow: 0 24px 60px rgba(15,23,42,.3); }
@media (max-width: 639px) { .modal { border-radius: 18px 18px 0 0; } }

/* --- Giriş ekranı --- */
.giriş-sayfa { background: linear-gradient(150deg, #134e4a 0%, #0f766e 50%, #155e75 100%); }
.giriş-sayfa::before {
  content: ''; position: fixed; inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.09), transparent 45%),
              radial-gradient(circle at 80% 75%, rgba(255,255,255,.07), transparent 45%);
  pointer-events: none;
}
.giriş-kart { border-radius: 18px; padding: 32px; box-shadow: 0 24px 60px rgba(0,0,0,.28); }
.giriş-kart .g-logo { font-size: 46px; }
.giriş-kart h1 { font-size: 22px; letter-spacing: -.03em; }
.demo-kutu { border-radius: 10px; border-style: dashed; }

/* --- Harita pinleri --- */
.pin-kurye { box-shadow: 0 4px 12px rgba(15,23,42,.4); color: #fff; }
.pin-mağaza, .pin-ev { box-shadow: 0 4px 12px rgba(15,23,42,.35); }
.pin-mağaza { color: var(--mor); overflow: hidden; padding: 0; position: relative; }
.pin-mağaza img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Fotoğraf yüklenemezse altındaki ikon görünür kalır */
.pin-mağaza .pin-yedek { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.pin-ev { color: #fff; }
/* Mağaza detay başlığındaki logo rozeti */
.mağaza-hero .mh-logo {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: -6px;
  width: 34px; height: 34px; border-radius: 9px; background: #fff; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.3); font-size: 19px;
}
.mağaza-hero .mh-logo img { width: 100%; height: 100%; object-fit: cover; }

/* --- Toast --- */
.toast { border-radius: 10px; box-shadow: 0 10px 30px rgba(15,23,42,.28); font-size: 13.5px; }

/* --- Kaydirma cubugu --- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; border: 3px solid var(--zemin); }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* --- Genis ekran yerlesimi --- */
@media (min-width: 1100px) {
  .içerik { padding: 24px 24px 40px; }
  .yan-içerik { padding: 24px 28px; }
}

/* ==========================================================================
   UYGULAMA ICI DIYALOGLAR (confirm / prompt / alert yerine)
   ========================================================================== */
.diyalog-fon {
  align-items: center; padding: 20px; transition: opacity .14s;
}
.diyalog {
  background: #fff; width: 100%; max-width: 400px; border-radius: 16px; padding: 26px 24px 20px;
  text-align: center; box-shadow: 0 24px 60px rgba(15,23,42,.34);
  animation: dy-gel .2s cubic-bezier(.2,.9,.3,1.3);
}
@keyframes dy-gel { from { transform: scale(.9) translateY(10px); opacity: 0; } }
.diyalog .dy-ikon {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center; font-size: 27px;
  background: #f0fdfa; border: 1px solid #99f6e4;
}
.diyalog .dy-ikon.tehlike { background: #fef2f2; border-color: #fecaca; }
.diyalog .dy-başlık { font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.diyalog .dy-mesaj { font-size: 13.5px; color: var(--soluk); margin-top: 6px; line-height: 1.5; }
.diyalog .dy-alan { margin-top: 14px; text-align: left; }
.diyalog .dy-girdi.hata { border-color: var(--kırmızı); box-shadow: 0 0 0 3px rgba(220,38,38,.13); }
.diyalog .dy-butonlar { display: flex; gap: 9px; margin-top: 20px; }
.diyalog .dy-butonlar .btn { flex: 1; padding: 12px; }

/* ==========================================================================
   DOSYA YÜKLEME ALANI (fatura / belge)
   ========================================================================== */
/* ==========================================================================
   MAĞAZA — SİPARİŞ DETAY EKRANI
   ========================================================================== */
.sipariş-satırı { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.sipariş-satırı:hover { border-color: var(--mor); box-shadow: 0 4px 14px rgba(15,118,110,.14); }

.işlem-şeridi {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px;
  background: #fff; border: 1px solid var(--cizgi); border-radius: var(--r); padding: 12px;
}

/* Müşteri notları */
.not-kartı { border-left: 4px solid var(--turuncu); }
.not-satırı { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--cizgi); }
.not-satırı:last-child { border-bottom: 0; }
.not-satırı .not-ikon {
  width: 30px; height: 30px; border-radius: 8px; background: var(--zemin); color: var(--soluk);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.not-satırı.vurgu .not-ikon { background: #fff7ed; color: var(--turuncu); }
.not-satırı .not-ad { font-size: 11.5px; font-weight: 700; color: var(--soluk); text-transform: uppercase; letter-spacing: .04em; }
.not-satırı .not-metin { font-size: 14.5px; margin-top: 1px; }
.not-satırı.vurgu .not-metin { font-weight: 700; }

.adet-kutu {
  min-width: 40px; text-align: center; font-weight: 800; font-size: 14px;
  background: var(--zemin); border-radius: 8px; padding: 5px 8px;
}

/* Sipariş akış çizgisi */
.zaman-çizgisi { position: relative; padding-left: 6px; }
.zç-adım { display: flex; gap: 12px; padding: 7px 0; position: relative; }
.zç-adım:not(:last-child)::before {
  content: ''; position: absolute; left: 4px; top: 20px; bottom: -7px; width: 2px; background: var(--cizgi);
}
.zç-nokta {
  width: 10px; height: 10px; border-radius: 50%; background: var(--mor);
  margin-top: 5px; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(15,118,110,.14);
}
.zç-adım:last-child .zç-nokta { background: var(--yesil); box-shadow: 0 0 0 3px rgba(5,150,105,.18); }

/* ==========================================================================
   ALT BİLGİ (kurumsal / yasal bağlantılar)
   ========================================================================== */
.alt-bilgi {
  border-top: 1px solid var(--cizgi); background: #fff;
  padding: 26px 16px 90px; margin-top: 30px;
}
.alt-bilgi-iç {
  max-width: 1280px; margin: 0 auto; display: flex; gap: 26px; flex-wrap: wrap; align-items: flex-start;
}
.alt-bilgi .ab-marka b { display: flex; align-items: center; gap: 7px; font-size: 15px; }
.alt-bilgi .ab-menü {
  flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px 20px;
}
.alt-bilgi .ab-menü a {
  color: var(--soluk); font-size: 13.5px; font-weight: 600; text-decoration: none; padding: 3px 0;
}
.alt-bilgi .ab-menü a:hover { color: var(--mor); text-decoration: underline; }
.alt-bilgi .ab-alt {
  max-width: 1280px; margin: 18px auto 0; padding-top: 14px; border-top: 1px solid var(--cizgi);
}
@media (min-width: 821px) { .alt-bilgi { padding-bottom: 26px; } }

/* Yasal metin sayfası */
.yasal-metin section { margin-bottom: 18px; }
.yasal-metin h3 { font-size: 15px; margin-bottom: 6px; letter-spacing: -.01em; }
.yasal-metin p { font-size: 14px; line-height: 1.65; color: var(--metin); margin-bottom: 7px; white-space: pre-line; }
.yasal-not {
  display: flex; gap: 8px; align-items: flex-start; margin-top: 18px;
  background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
  border-radius: 10px; padding: 11px 13px; font-size: 12.5px; line-height: 1.5;
}

/* ==========================================================================
   ÜRÜN BİLGİSİ (müşteri ürün detay sayfası)
   ========================================================================== */
.ürün-bilgi .ub-açıklama { font-size: 14.5px; line-height: 1.6; color: var(--metin); }
.ürün-bilgi .ub-alt-başlık {
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--soluk); margin-bottom: 6px; display: flex; align-items: baseline; gap: 6px;
}
.ürün-bilgi .ub-metin { font-size: 13.5px; line-height: 1.55; color: var(--metin); }
.ürün-bilgi .ub-metin.mini { color: var(--soluk); font-size: 12px; margin-top: 6px; }
.ürün-bilgi .ub-tablo { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ürün-bilgi .ub-tablo td { padding: 7px 0; border-bottom: 1px solid var(--cizgi); vertical-align: top; }
.ürün-bilgi .ub-tablo td:first-child { color: var(--soluk); width: 44%; }
.ürün-bilgi .ub-tablo.besin td:last-child { font-weight: 700; }
.ürün-bilgi .ub-uyarı {
  display: flex; gap: 9px; align-items: flex-start; margin-top: 12px;
  background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
  border-radius: 10px; padding: 10px 12px; font-size: 13px;
}

/* ==========================================================================
   ÜRÜN DÜZENLEYİCİ — görsel yükleme ve seçenek kurucusu
   ========================================================================== */
.görsel-yükle { display: flex; gap: 12px; align-items: center; }
.görsel-önizleme {
  width: 96px; height: 96px; border-radius: 12px; flex-shrink: 0; overflow: hidden;
  background: linear-gradient(135deg, #f8fafc, #e2e8f0); border: 1.5px solid var(--cizgi);
  display: flex; align-items: center; justify-content: center; font-size: 40px;
}
.görsel-önizleme img { width: 100%; height: 100%; object-fit: cover; }
.görsel-yükle .gy-alan { flex: 1; }

.seçenek-grubu {
  border: 1.5px solid var(--cizgi); border-radius: 12px; padding: 12px; margin-top: 10px;
  background: #fcfdfe;
}
.seçenek-grubu .sg-üst { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.seçenek-grubu .sg-üst input[type="text"] { flex: 1; min-width: 140px; }
.seçenek-grubu select { width: auto; min-width: 128px; }
.sg-madde { display: flex; gap: 8px; align-items: center; margin-top: 7px; }
.sg-madde input.ad { flex: 1; }
.sg-madde input.fiyat { width: 118px; }
.sg-sil, .sm-sil {
  width: 32px; height: 32px; border-radius: 8px; background: #fef2f2; color: var(--kırmızı);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sg-sil:hover, .sm-sil:hover { background: #fee2e2; }
.onay-kutu { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--soluk); white-space: nowrap; }
.onay-kutu input { width: auto; }

/* ==========================================================================
   HARİTA KATMAN SEÇİCİ
   ========================================================================== */
.harita-secici {
  display: flex; gap: 2px; background: #fff; border-radius: 10px; padding: 3px;
  box-shadow: 0 3px 12px rgba(15,23,42,.22); border: 1px solid var(--cizgi);
}
.harita-secici button {
  font-size: 12.5px; font-weight: 700; color: var(--soluk);
  padding: 6px 11px; border-radius: 7px; white-space: nowrap;
  transition: background .14s, color .14s;
}
.harita-secici button:hover { background: var(--zemin); color: var(--metin); }
.harita-secici button.aktif { background: var(--mor); color: #fff; }

/* Uydu ve koyu görünümde pinler daha okunur olsun */
.harita-uydu .pin-mağaza, .harita-uydu .pin-ev,
.harita-koyu .pin-mağaza, .harita-koyu .pin-ev {
  box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 4px 12px rgba(0,0,0,.5);
}
.harita-uydu .pin-kurye, .harita-koyu .pin-kurye {
  box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 4px 12px rgba(0,0,0,.55);
}
.harita-koyu .leaflet-popup-content-wrapper, .harita-koyu .leaflet-popup-tip {
  background: #1e293b; color: #e2e8f0;
}
@media (max-width: 640px) {
  .harita-secici button { padding: 6px 8px; font-size: 11.5px; }
}

/* ==========================================================================
   KURYE PANOSU
   ========================================================================== */
.hafta-grafik {
  display: flex; align-items: flex-end; gap: 8px; height: 150px; padding-top: 6px;
}
.hafta-grafik .hg-sutun {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  height: 100%; gap: 5px;
}
.hafta-grafik .hg-tutar { font-size: 11px; font-weight: 800; color: var(--soluk); }
.hafta-grafik .hg-cubuk {
  width: 100%; max-width: 34px; border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, var(--mor-koyu), var(--mor));
  transition: height .5s ease;
}
.hafta-grafik .hg-sutun:last-child .hg-cubuk { background: linear-gradient(180deg, #059669, #34d399); }
.hafta-grafik .hg-gun { font-size: 11.5px; color: var(--soluk); font-weight: 700; }

.pf-satir {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--cizgi); font-size: 14px;
}
.pf-satir:last-of-type { border-bottom: 0; }
.pf-satir span { display: flex; align-items: center; gap: 8px; color: var(--soluk); }

.sira-kutu {
  display: flex; align-items: center; gap: 13px; margin-top: 12px;
  background: linear-gradient(120deg, #fffbeb, #fef3c7);
  border: 1px solid #fde68a; border-radius: 12px; padding: 13px 15px;
}
.sira-kutu .sira-no {
  font-size: 23px; font-weight: 800; color: #b45309; flex-shrink: 0;
}
.sira-kutu b { font-size: 14px; }

.pf-hakedis {
  display: flex; align-items: center; justify-content: space-between; margin-top: 12px;
  background: #f0fdfa; border: 1px solid #99f6e4; border-radius: 12px; padding: 13px 15px;
}
.pf-hakedis span { font-size: 13.5px; color: var(--mor-koyu); font-weight: 600; }
.pf-hakedis b { font-size: 19px; color: var(--mor); }

.ipucu {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 14px;
  background: var(--zemin); border-radius: 11px; padding: 12px 14px;
}
.ipucu svg { flex-shrink: 0; margin-top: 2px; color: var(--mor); }
.ipucu b { font-size: 13.5px; display: block; }
.ipucu span { font-size: 12.5px; color: var(--soluk); }

/* ---------------- SVG ikonlar ---------------- */
.ik { display: inline-block; vertical-align: -0.18em; flex-shrink: 0; stroke: currentColor; }
.kart-başlık .ik { margin-right: 2px; }
.yanmenu button .ik, .üst-menu button .ik { opacity: .9; }
.yanmenu button.aktif .ik { opacity: 1; }
.tabbar button .ikon { display: flex; align-items: center; justify-content: center; height: 22px; }
.tabbar button .ikon .ik { width: 22px; height: 22px; }
.btn .ik { margin-right: -2px; }
.etiket .ik { width: 13px; height: 13px; }
.mini .ik { width: 14px; height: 14px; vertical-align: -0.2em; }
.bd-ikon .ik { width: 46px; height: 46px; stroke-width: 1.2; opacity: .45; }
.dy-ikon .ik { width: 26px; height: 26px; }
.st-ad .ik, .satir > .ik { opacity: .7; }

.yükleme-alan {
  border: 2px dashed #cbd5e1; border-radius: 12px; padding: 26px 18px; text-align: center;
  cursor: pointer; background: #f8fafc; transition: border-color .15s, background .15s;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.yükleme-alan:hover { border-color: var(--mor); background: #f0fdfa; }
.yükleme-alan.üzerinde { border-color: var(--mor); background: #ccfbf1; }
.yükleme-alan .yu-ikon { font-size: 34px; }

/* ==========================================================================
   GERÇEK FOTOGRAFLI MAĞAZA KARTLARI
   ========================================================================== */
.mağaza-kart .mk-üst { height: 128px; overflow: hidden; }
.mağaza-kart .mk-kapak { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; display: block; }
.mağaza-kart:hover .mk-kapak { transform: scale(1.06); }
.mağaza-kart .mk-üst::after {
  background: linear-gradient(to top, rgba(15,23,42,.5) 0%, rgba(15,23,42,.05) 45%, transparent 100%);
}
/* Logo kapak görselinin sol alt köşesine oturur; kırpılmaması için tamamen
   .mk-ust sınırları içinde kalır. */
.mağaza-kart .mk-logo {
  position: absolute; left: 12px; bottom: 10px; z-index: 3;
  width: 46px; height: 46px; border-radius: 12px; background: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 24px;
  box-shadow: 0 4px 14px rgba(15,23,42,.28); border: 2px solid #fff;
  overflow: hidden;
}
.mağaza-kart .mk-logo img { width: 100%; height: 100%; object-fit: cover; }
.mağaza-kart .mk-govde { padding: 14px; }
.mağaza-kart .mk-süre {
  position: absolute; right: 10px; top: 10px; z-index: 3;
  background: rgba(255,255,255,.94); border-radius: 7px; padding: 3px 9px;
  font-size: 11.5px; font-weight: 800; box-shadow: 0 2px 8px rgba(15,23,42,.18);
}
.mağaza-kart .mk-kapalı-perde {
  position: absolute; inset: 0; z-index: 4; background: rgba(15,23,42,.55);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 13px; letter-spacing: .04em;
}

/* Mağaza detay kapak */
.mağaza-hero { position: relative; height: 210px; border-radius: var(--r) var(--r) 0 0; overflow: hidden; }
.mağaza-hero > img { width: 100%; height: 100%; object-fit: cover; }
.mağaza-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15,23,42,.75), rgba(15,23,42,.1) 60%, transparent);
}
.mağaza-hero .mh-yazi { position: absolute; left: 20px; bottom: 16px; z-index: 2; color: #fff; }
.mağaza-hero .mh-yazi h2 { font-size: 25px; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.mağaza-hero .mh-yazi .mini { color: rgba(255,255,255,.9); }

/* Ürün detay büyük görsel */
.ürün-hero { width: 100%; height: 340px; border-radius: var(--r); overflow: hidden; background: linear-gradient(135deg,#f8fafc,#e2e8f0); display: flex; align-items: center; justify-content: center; font-size: 90px; }
.ürün-hero img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   ANIMASYONLAR
   ========================================================================== */
@keyframes ic-gel { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
#içerik > *, .yan-içerik > * { animation: ic-gel .26s ease-out both; }
.mağaza-izgara > *, .ürün-izgara > * { animation: ic-gel .3s ease-out both; }
.mağaza-izgara > *:nth-child(1), .ürün-izgara > *:nth-child(1) { animation-delay: .01s; }
.mağaza-izgara > *:nth-child(2), .ürün-izgara > *:nth-child(2) { animation-delay: .04s; }
.mağaza-izgara > *:nth-child(3), .ürün-izgara > *:nth-child(3) { animation-delay: .07s; }
.mağaza-izgara > *:nth-child(4), .ürün-izgara > *:nth-child(4) { animation-delay: .10s; }
.mağaza-izgara > *:nth-child(5), .ürün-izgara > *:nth-child(5) { animation-delay: .13s; }
.mağaza-izgara > *:nth-child(6), .ürün-izgara > *:nth-child(6) { animation-delay: .16s; }
.mağaza-izgara > *:nth-child(n+7), .ürün-izgara > *:nth-child(n+7) { animation-delay: .19s; }

/* Yükleme iskeleti */
.iskelet-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.iskelet {
  height: 210px; border-radius: var(--r);
  background: linear-gradient(100deg, #eef2f7 30%, #f8fafc 50%, #eef2f7 70%);
  background-size: 220% 100%; animation: parla 1.2s infinite linear;
}
@keyframes parla { to { background-position: -220% 0; } }

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

/* ==========================================================================
   MOBIL / MASAUSTU AYRIMI
   Mobilde: alt sekme cubugu + tek sutun. Masaustunde: üst menu, alt cubuk yok.
   ========================================================================== */

/* --- Mobil (<= 820px) --- */
@media (max-width: 820px) {
  body { font-size: 15px; }
  .üst-menu { display: none !important; }
  .içerik { padding: 14px 12px 96px; }
  .topbar { padding: 9px 12px; gap: 8px; }
  .topbar .logo { font-size: 15px; }
  .topbar .logo .rozet { display: none; }
  .topbar .tb-btn { padding: 7px 9px; font-size: 12.5px; }
  .kart { padding: 14px; border-radius: 12px; }
  .ürün-izgara { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .ürün-kart > .görsel { height: 110px; }
  .ürün-kart .u-ad { font-size: 13px; }
  .mağaza-izgara { grid-template-columns: 1fr; gap: 12px; }
  .mağaza-kart .mk-üst { height: 112px; }
  .kampanya-kart { min-width: 240px; padding: 15px; }
  .mağaza-hero { height: 160px; border-radius: 12px 12px 0 0; }
  .mağaza-hero .mh-yazi h2 { font-size: 20px; }
  .ürün-hero { height: 230px; }
  .stat-izgara { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat { padding: 12px 13px; }
  .stat .st-değer { font-size: 19px; }
  .h-tam { height: 300px; min-height: 0; }
  .yan-içerik { padding: 14px 12px 96px; }
  .sepet-cubuk { bottom: 72px; width: calc(100vw - 20px); }
  .tablo th, .tablo td { padding: 8px 7px; font-size: 12.5px; }
  .sekmeler { margin: 0 -12px 12px; padding: 0 12px 4px; }
}

/* --- Masaustu (>= 821px): alt cubuk yerine üst menu --- */
@media (min-width: 821px) {
  .tabbar { display: none; }
  .içerik { padding-bottom: 40px; }
  .sepet-cubuk { bottom: 22px; right: 22px; left: auto; transform: none; width: 340px; }
  .üst-menu { display: flex; align-items: center; gap: 4px; }
  .üst-menu button {
    padding: 8px 13px; border-radius: 9px; font-weight: 700; font-size: 13.5px;
    color: rgba(255,255,255,.82); position: relative; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 6px;
  }
  .üst-menu button:hover { background: rgba(255,255,255,.14); color: #fff; }
  .üst-menu button.aktif { background: rgba(255,255,255,.2); color: #fff; }
  .üst-menu .badge-dot { top: 0; right: 2px; }
}

/* Çok genis ekran: ürün izgarasi daha fazla sutun */
@media (min-width: 1500px) {
  .içerik { max-width: 1420px; }
  .ürün-izgara { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}