/* =====================================================
   KATIK Tavuk Döner - Sıcak turuncu kurumsal tema
   ===================================================== */

:root {
  /* Sıcak turuncu-amber palet */
  --k-ana:       #ef6c20;   /* ana turuncu */
  --k-koyu:      #d2541a;   /* koyu turuncu */
  --k-derin:     #a83f14;   /* en derin ton */
  --k-acik:      #fa9a4e;   /* açık turuncu */
  --k-pastel:    #fde3cc;   /* pastel turuncu */
  --k-sis:       #fff5ec;   /* en açık zemin */

  /* Destek renkleri */
  --amber:       #f7b32b;   /* sıcak sarı */
  --amber-acik:  #ffd98a;
  --kirmizi:     #d93f30;   /* uyumlu kırmızı (vurgu) */
  --kirmizi-koyu:#b22f22;
  /* Logo kırmızısının bir tık açığı — hero ve sayfa başlıkları */
  --sk-acik:     #f26a63;
  --sk-orta:     #e8403c;
  --sk-koyu:     #d42a2b;
  --bej:         #f6e7d4;
  --bej-koyu:    #ecd7bd;

  --krem:        #fffaf4;
  --beyaz:       #ffffff;
  --koyu:        #3b2a1e;   /* sıcak koyu kahve */
  --koyu-2:      #4e3a2c;
  --gri:         #7b6757;
  --gri-acik:    #a89584;
  --cizgi:       #f2e4d4;

  --golge-s:     0 2px 10px rgba(168, 63, 20, .06);
  --golge-m:     0 10px 30px rgba(168, 63, 20, .10);
  --golge-l:     0 24px 60px rgba(168, 63, 20, .15);

  --yuvarlak-s:  10px;
  --yuvarlak:    18px;
  --yuvarlak-l:  28px;

  --gecis:       .35s cubic-bezier(.4, 0, .2, 1);
  --kapsam:      1520px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: var(--koyu-2);
  background: var(--krem);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  font-family: 'Outfit', system-ui, sans-serif;
  color: var(--koyu);
  line-height: 1.18;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
  font-weight: 700;
}

h1 { font-size: clamp(2.3rem, 5.2vw, 4rem); font-weight: 800; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); }
h3 { font-size: 1.28rem; }

p { margin: 0 0 1.1em; }
a { color: var(--k-koyu); text-decoration: none; transition: color var(--gecis); }
a:hover { color: var(--k-ana); }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }

.kapsa { width: 100%; max-width: var(--kapsam); margin: 0 auto; padding: 0 40px; }
.kapsa-dar { max-width: 1180px; }
.ikon { width: 16px; height: 16px; fill: currentColor; flex: 0 0 auto; }

/* ============ Açılış perdesi ============ */
.perde {
  position: fixed; inset: 0; z-index: 9999;
  background: linear-gradient(140deg, var(--sk-acik), var(--sk-orta) 55%, var(--sk-koyu));
  display: flex; align-items: center; justify-content: center;
  transition: opacity .6s ease, visibility .6s ease;
}
.perde.gitti { opacity: 0; visibility: hidden; }
.perde-ic { text-align: center; }
.perde-logo {
  display: block; font-family: 'Outfit', sans-serif; font-weight: 800;
  font-size: 2.4rem; letter-spacing: .28em; color: #fff;
  animation: nefes 1.6s ease-in-out infinite;
}
.perde-gorsel {
  display: block; width: auto; height: auto;
  max-width: min(260px, 62vw); max-height: 170px; margin: 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 26px rgba(80,25,18,.3));
  animation: perde-gir .7s cubic-bezier(.2,.8,.3,1) both, nefes 2.4s ease-in-out 0.7s infinite;
}
@keyframes perde-gir {
  from { opacity: 0; transform: scale(.82); }
  to   { opacity: 1; transform: scale(1); }
}
.perde-cizgi {
  display: block; width: 160px; height: 3px; margin: 22px auto 0;
  background: rgba(255,255,255,.22); border-radius: 99px; overflow: hidden;
}
.perde-cizgi i {
  display: block; height: 100%; width: 40%; border-radius: 99px;
  background: #fff; animation: kayma 1.1s ease-in-out infinite;
}
@keyframes nefes { 0%,100% { opacity: 1; } 50% { opacity: .72; } }
@keyframes kayma { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }

/* ============ Üst şerit ============ */
.ust-serit {
  background: var(--koyu); color: rgba(255,255,255,.8);
  font-size: 13px; letter-spacing: .01em;
}
.ust-serit-ic { display: flex; justify-content: space-between; align-items: center; min-height: 42px; gap: 18px; }
.us-sol, .us-sag { display: flex; align-items: center; gap: 20px; }
.us-oge { display: inline-flex; align-items: center; gap: 7px; color: inherit; white-space: nowrap; }
.us-oge:hover { color: #fff; }
.us-ayrac { width: 1px; height: 16px; background: rgba(255,255,255,.2); }
.us-sosyal {
  display: inline-flex; width: 28px; height: 28px; border-radius: 50%;
  align-items: center; justify-content: center; color: rgba(255,255,255,.8);
  background: rgba(255,255,255,.08); transition: all var(--gecis);
}
.us-sosyal:hover { background: var(--amber); color: #fff; transform: translateY(-2px); }

/* ============ Başlık / menü ============ */
.baslik {
  position: sticky; top: 0; z-index: 900;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--cizgi);
  transition: box-shadow var(--gecis), padding var(--gecis);
}
.baslik.kucuk { box-shadow: var(--golge-m); }
.baslik-ic { display: flex; align-items: center; justify-content: space-between; min-height: 80px; gap: 20px; transition: min-height var(--gecis); }
.baslik.kucuk .baslik-ic { min-height: 66px; }
/* Logo görseli yüklüyse başlık biraz yükselir */
.baslik-ic:has(.logo-resimli) { min-height: 108px; }
.baslik.kucuk .baslik-ic:has(.logo-resimli) { min-height: 86px; }

.baslik-ilerleme {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--k-ana), var(--k-acik));
  transition: width .12s linear;
}

.logo { display: inline-flex; align-items: center; gap: 12px; color: var(--koyu); }
.logo-isaret {
  width: 44px; height: 44px; border-radius: 13px; flex: 0 0 auto;
  background: linear-gradient(140deg, var(--amber), var(--k-ana));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(239,108,32,.34);
  transition: transform var(--gecis);
}
.logo:hover .logo-isaret { transform: rotate(-7deg) scale(1.05); }
.logo-isaret svg { width: 26px; height: 26px; fill: #fff; }
.logo-yazi { display: flex; flex-direction: column; line-height: 1.1; }
.logo-yazi strong { font-family: 'Outfit', sans-serif; font-size: 1.22rem; font-weight: 800; letter-spacing: -.02em; }
.logo-yazi small { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--k-ana); font-weight: 600; }
.logo-ters { color: #fff; }
.logo-ters .logo-yazi small { color: var(--k-acik); }

/* Panelden yüklenen logo görseli */
.logo-resim {
  display: block; width: auto; height: auto;
  max-height: 86px; max-width: 300px; object-fit: contain;
  transition: transform var(--gecis), max-height var(--gecis);
}
.logo:hover .logo-resim { transform: scale(1.04); }
.baslik.kucuk .logo-resim { max-height: 68px; }
.altbilgi .logo-resim { max-height: 96px; max-width: 260px; }
@media (max-width: 880px) {
  .logo-resim, .baslik.kucuk .logo-resim { max-height: 58px; max-width: 200px; }
  .altbilgi .logo-resim { max-height: 70px; }
}

.menu { display: flex; align-items: center; gap: 4px; }
.menu-link {
  position: relative; padding: 10px 14px; border-radius: 99px;
  font-weight: 600; font-size: 15px; color: var(--koyu-2);
}
.menu-link::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px;
  height: 2px; background: var(--k-ana); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform var(--gecis);
}
.menu-link:hover { color: var(--k-ana); }
.menu-link:hover::after, .menu-link.aktif::after { transform: scaleX(1); }
.menu-link.aktif { color: var(--k-ana); }
.menu-cta { margin-left: 10px; }

.hamburger {
  display: none; width: 44px; height: 44px; border: 1px solid var(--cizgi);
  background: #fff; border-radius: 12px; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.hamburger span { display: block; width: 19px; height: 2px; background: var(--koyu); border-radius: 2px; transition: all var(--gecis); }
.hamburger.acik span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.acik span:nth-child(2) { opacity: 0; }
.hamburger.acik span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============ Butonlar ============ */
.buton {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 26px; border-radius: 99px; font-weight: 700; font-size: 15px;
  font-family: 'Outfit', sans-serif; letter-spacing: .01em;
  border: 1.5px solid transparent; cursor: pointer;
  transition: all var(--gecis); position: relative; overflow: hidden;
}
.buton-dolu { background: var(--k-ana); color: #fff; box-shadow: 0 8px 22px rgba(239,108,32,.3); }
.buton-dolu:hover { background: var(--k-koyu); color: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(239,108,32,.36); }
.buton-cizgi { border-color: var(--k-pastel); color: var(--k-koyu); background: #fff; }
.buton-cizgi:hover { border-color: var(--k-ana); color: var(--k-ana); transform: translateY(-2px); }
.buton-beyaz { background: #fff; color: var(--sk-orta); box-shadow: 0 8px 22px rgba(90,25,18,.2); }
.buton-beyaz:hover { color: var(--sk-koyu); transform: translateY(-2px); }
.buton-seffaf { border-color: rgba(255,255,255,.45); color: #fff; }
.buton-seffaf:hover { background: rgba(255,255,255,.14); color: #fff; }

/* ============ Hero ============ */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(128deg, var(--sk-acik) 0%, var(--sk-orta) 48%, var(--sk-koyu) 100%);
  padding: clamp(48px, 6.5vw, 78px) 0 clamp(56px, 7.5vw, 92px);
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.14) 1px, transparent 0);
  background-size: 26px 26px; opacity: .42;
}
.hero-ic { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1.02fr; gap: clamp(40px, 5vw, 72px); align-items: center; }
.hero-rozet {
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px 8px 10px;
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.22);
  border-radius: 99px; font-size: 13.5px; font-weight: 600; margin-bottom: 18px;
  backdrop-filter: blur(6px);
}
.hero-rozet i { width: 8px; height: 8px; border-radius: 50%; background: #7ee2a8; box-shadow: 0 0 0 4px rgba(126,226,168,.25); animation: nabiz 2s infinite; }
@keyframes nabiz { 0%,100% { box-shadow: 0 0 0 4px rgba(126,226,168,.25); } 50% { box-shadow: 0 0 0 8px rgba(126,226,168,0); } }

.hero h1 { color: #fff; margin-bottom: 14px; font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
.hero h1 em { font-style: normal; color: #ffd9b0; position: relative; }
.hero-metin { font-size: clamp(1rem, 1.5vw, 1.1rem); color: rgba(255,255,255,.85); max-width: 60ch; margin-bottom: 24px; }
.hero-dugmeler { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.hero-mini { display: flex; flex-wrap: wrap; gap: 28px; }
.hero-mini div strong { display: block; font-family: 'Outfit', sans-serif; font-size: 1.7rem; font-weight: 800; color: #fff; }
.hero-mini div span { font-size: 13px; color: rgba(255,255,255,.7); letter-spacing: .04em; }

/* ============ Hero görsel alanı (kemer çerçeve) ============ */
.hero-gorsel {
  position: relative;
  width: 100%; max-width: 440px; margin-left: auto;
  animation: suzul 7s ease-in-out infinite;
}
@keyframes suzul { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* Arkadaki yumuşak ışık lekesi */
.hg-leke {
  position: absolute; z-index: 0;
  inset: -14% -12% -8% -18%;
  background: radial-gradient(circle at 38% 32%, rgba(255,214,150,.42), rgba(255,170,90,0) 62%);
  filter: blur(14px); pointer-events: none;
}

/* Kesik çizgili dış halka — çerçeveyle aynı kemer biçiminde */
.hg-halka {
  position: absolute; z-index: 1; inset: -16px -16px -16px -16px;
  border: 2px dashed rgba(255,255,255,.34);
  border-radius: 260px 260px 42px 42px;
  pointer-events: none;
  animation: halka-nefes 5s ease-in-out infinite;
}
@keyframes halka-nefes {
  0%,100% { transform: scale(1);    opacity: .8; }
  50%     { transform: scale(1.02); opacity: .45; }
}

/* Küçük amber nokta aksanı */
.hg-nokta {
  position: absolute; z-index: 3; left: -26px; bottom: 16%;
  width: 62px; height: 62px; border-radius: 50%;
  background: linear-gradient(140deg, var(--amber), var(--k-ana));
  box-shadow: 0 10px 26px rgba(120,45,15,.34);
  animation: suzul 5.4s ease-in-out infinite .6s;
}
.hg-nokta::after {
  content: ''; position: absolute; inset: 11px; border-radius: 50%;
  border: 2px dashed rgba(255,255,255,.6);
}

/* Çerçevenin kendisi: üstü kemerli, altı yumuşak köşeli */
.hero-cerceve {
  position: relative; z-index: 2;
  aspect-ratio: 4 / 5;
  padding: 10px;
  border-radius: 250px 250px 36px 36px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.3);
  backdrop-filter: blur(8px);
  box-shadow: 0 26px 60px rgba(90,25,18,.32);
  overflow: hidden;
}
.hero-cerceve::after {
  content: ''; position: absolute; inset: 10px; pointer-events: none;
  border-radius: 242px 242px 28px 28px;
  box-shadow: inset 0 -70px 90px -40px rgba(70,20,14,.5);
}

.hero-cerceve video,
.hero-cerceve img {
  width: 100%; height: 100%; display: block; object-fit: cover;
  border-radius: 242px 242px 28px 28px;
}

/* Video yokken dönen döner diski kemerin içine otursun */
.hero-cerceve .hero-disk {
  width: 100%; height: 100%;
  border-radius: 242px 242px 28px 28px;
}

/* Ses düğmesi */
.hero-ses {
  position: absolute; z-index: 4; right: 18px; bottom: 18px;
  width: 42px; height: 42px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.92); color: var(--sk-orta);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(70,20,14,.3);
  transition: all var(--gecis);
}
.hero-ses:hover { background: #fff; transform: scale(1.08); }
.hero-ses svg { width: 19px; fill: currentColor; }

@media (max-width: 1024px) {
  .hero-gorsel { margin: 0 auto; max-width: 380px; }
}
@media (max-width: 600px) {
  .hero-gorsel { max-width: 300px; }
  .hg-nokta { width: 50px; height: 50px; left: -16px; }
  .hero-cerceve { border-radius: 180px 180px 28px 28px; }
  .hero-cerceve::after,
  .hero-cerceve video, .hero-cerceve img, .hero-cerceve .hero-disk {
    border-radius: 174px 174px 22px 22px;
  }
  .hg-halka { border-radius: 190px 190px 34px 34px; inset: -12px; }
}

/* Dalga ayırıcı */
.dalga { display: block; width: 100%; height: 60px; fill: var(--krem); margin-top: -1px; }

/* ============ Kayan şerit ============ */
.serit {
  background: linear-gradient(90deg, var(--amber), var(--k-ana) 55%, var(--amber));
  color: #fff; padding: 16px 0; overflow: hidden;
}
.serit-ic { display: flex; width: max-content; animation: serit-kay 32s linear infinite; }
.serit:hover .serit-ic { animation-play-state: paused; }
.serit-ic span {
  display: inline-flex; align-items: center; gap: 14px; padding: 0 26px;
  font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: .04em; white-space: nowrap;
}
.serit-ic span::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.75); }
@keyframes serit-kay { to { transform: translateX(-50%); } }

/* ============ Bölüm başlıkları ============ */
.bolum { padding: clamp(64px, 8vw, 104px) 0; position: relative; }
.bolum-krem { background: var(--k-sis); }
.bolum-koyu {
  background: linear-gradient(135deg, var(--amber) 0%, var(--k-ana) 100%);
  color: rgba(255,255,255,.9);
  padding: clamp(40px, 4.5vw, 58px) 0;
  position: relative; overflow: hidden;
}
/* Hafif doku */
.bolum-koyu::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.16) 1px, transparent 0);
  background-size: 24px 24px; opacity: .5;
}
.bolum-koyu > * { position: relative; z-index: 2; }
.bolum-koyu .bolum-ust { margin-bottom: clamp(24px, 3vw, 34px); }
.bolum-koyu .bolum-ust h2 { margin-bottom: 0; }
.bolum-koyu h2, .bolum-koyu h3 { color: #fff; }
.bolum-koyu .etiket { color: #fff; }
.bolum-koyu .etiket::before { background: rgba(255,255,255,.7); }

.bolum-ust {
  max-width: 820px; margin: 0 0 clamp(38px, 5vw, 58px); text-align: left;
}
.bolum-ust.orta { margin-left: auto; margin-right: auto; text-align: center; }
/* Başlık + sağda buton duracak şekilde */
.bolum-ust-satir {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px;
  margin-bottom: clamp(38px, 5vw, 58px); flex-wrap: wrap;
}
.bolum-ust-satir .bolum-ust { margin-bottom: 0; }
.etiket {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--k-ana);
}
.etiket::before { content: ''; width: 22px; height: 2px; background: var(--k-ana); border-radius: 2px; }
.bolum-ust p { color: var(--gri); margin: 0; }
.bolum-koyu .bolum-ust p { color: rgba(255,255,255,.82); }

/* ============ Kartlar / ızgara ============ */
.izgara { display: grid; gap: 24px; }
.iz-2 { grid-template-columns: repeat(2, 1fr); }
.iz-3 { grid-template-columns: repeat(3, 1fr); }
.iz-4 { grid-template-columns: repeat(4, 1fr); }

.kart {
  background: #fff; border: 1px solid var(--cizgi); border-radius: var(--yuvarlak);
  padding: 30px 26px; box-shadow: var(--golge-s);
  transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
  position: relative; overflow: hidden;
}
.kart::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--k-ana), var(--k-acik));
  transform: scaleX(0); transform-origin: left; transition: transform var(--gecis);
}
.kart:hover { transform: translateY(-6px); box-shadow: var(--golge-m); border-color: var(--k-pastel); }
.kart:hover::before { transform: scaleX(1); }
.kart-ikon {
  width: 52px; height: 52px; border-radius: 15px; margin-bottom: 18px;
  display: flex; align-items: center; justify-content: center; font-size: 24px;
  background: var(--k-sis); color: var(--k-ana); transition: all var(--gecis);
}
.kart:hover .kart-ikon { background: var(--k-ana); transform: rotate(-6deg); }
.kart h3 { margin-bottom: .4em; }
.kart p { color: var(--gri); font-size: 15px; margin: 0; }

/* ============ Ürün kartı ============ */
.urun {
  background: #fff; border: 1px solid var(--cizgi); border-radius: var(--yuvarlak);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform var(--gecis), box-shadow var(--gecis);
}
.urun:hover { transform: translateY(-7px); box-shadow: var(--golge-l); }
.urun-gorsel {
  position: relative; aspect-ratio: 4/3; overflow: hidden;
  background: linear-gradient(140deg, #ffe6c2, #f9bd74 52%, #ef9a3f);
  display: flex; align-items: center; justify-content: center;
}
.urun-gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.urun:hover .urun-gorsel img { transform: scale(1.07); }
.urun-harf {
  font-family: 'Outfit', sans-serif; font-size: 3.4rem; font-weight: 800;
  color: rgba(255,255,255,.85); text-shadow: 0 4px 14px rgba(168,63,20,.35);
}
.urun-rozet {
  position: absolute; top: 12px; left: 12px; background: var(--kirmizi); color: #fff;
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 99px; box-shadow: 0 6px 14px rgba(178,47,34,.3);
}
.urun-govde { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.urun-kat { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--k-acik); font-weight: 700; margin-bottom: 6px; }
.urun-govde h3 { font-size: 1.14rem; margin-bottom: .35em; }
.urun-govde p { font-size: 14.5px; color: var(--gri); flex: 1; margin-bottom: 16px; }
.urun-alt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px dashed var(--cizgi); }
.urun-fiyat { font-family: 'Outfit', sans-serif; font-size: 1.32rem; font-weight: 800; color: var(--k-koyu); }
.urun-ekle {
  width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--k-pastel);
  background: #fff; color: var(--k-ana); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--gecis);
}
.urun-ekle:hover { background: var(--k-ana); color: #fff; border-color: var(--k-ana); transform: rotate(90deg); }

/* ============ Menü filtresi ============ */
.filtre { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start; margin-bottom: 40px; }
.filtre button {
  padding: 10px 20px; border-radius: 99px; border: 1.5px solid var(--cizgi);
  background: #fff; cursor: pointer; font-family: 'Outfit', sans-serif;
  font-weight: 600; font-size: 14.5px; color: var(--koyu-2); transition: all var(--gecis);
}
.filtre button:hover { border-color: var(--k-acik); color: var(--k-ana); }
.filtre button.aktif { background: var(--k-ana); border-color: var(--k-ana); color: #fff; box-shadow: 0 8px 20px rgba(239,108,32,.28); }

/* ============ Sayaçlar ============ */
.sayaclar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.sayaclar { gap: 16px; }
.sayac {
  position: relative; overflow: hidden; text-align: center;
  padding: 24px 14px 20px; border-radius: var(--yuvarlak);
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.34);
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 24px rgba(140,55,10,.14);
  transition: transform var(--gecis), background var(--gecis), box-shadow var(--gecis);
}
.sayac::before {
  content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 46px; height: 3px; border-radius: 0 0 4px 4px; background: #fff; opacity: .85;
}
.sayac:hover {
  transform: translateY(-5px);
  background: rgba(255,255,255,.26);
  box-shadow: 0 16px 34px rgba(140,55,10,.22);
}
.sayac strong {
  display: flex; align-items: baseline; justify-content: center; gap: 2px;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 800; color: #fff;
  line-height: 1; letter-spacing: -.03em; margin-bottom: 8px;
  text-shadow: 0 3px 14px rgba(130,50,10,.28);
}
.sayac strong i {
  font-style: normal; font-size: .52em; font-weight: 800;
  color: #fff; opacity: .92;
}
.sayac strong .on-ek  { margin-right: 1px; }
.sayac strong .son-ek { margin-left: 1px; }
.sayac span {
  display: block; font-family: 'Outfit', sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #fff; opacity: .9;
}

/* ============ Adımlar ============ */
.adimlar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: adim; }
.adim { position: relative; padding: 32px 24px 26px; background: #fff; border: 1px solid var(--cizgi); border-radius: var(--yuvarlak); transition: all var(--gecis); }
.adim::after {
  counter-increment: adim; content: counter(adim, decimal-leading-zero);
  position: absolute; top: 18px; right: 20px; font-family: 'Outfit', sans-serif;
  font-size: 2.6rem; font-weight: 800; color: var(--k-pastel); line-height: 1;
  transition: color var(--gecis);
}
.adim:hover { transform: translateY(-5px); box-shadow: var(--golge-m); }
.adim:hover::after { color: var(--k-acik); }
.adim h3 { font-size: 1.1rem; margin-top: 6px; }
.adim p { font-size: 14.5px; color: var(--gri); margin: 0; }

/* ============ Hakkımızda ikili blok ============ */
.ikili { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.ikili-gorsel { position: relative; }
.ikili-cerceve {
  border-radius: var(--yuvarlak-l); overflow: hidden; aspect-ratio: 4/3;
  background: linear-gradient(140deg, var(--amber), var(--k-ana) 60%, var(--k-koyu));
  display: flex; align-items: center; justify-content: center; box-shadow: var(--golge-l);
  position: relative;
}
.ikili-cerceve::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.18) 1px, transparent 0);
  background-size: 22px 22px;
}
.ikili-cerceve svg { width: 44%; fill: rgba(255,255,255,.9); position: relative; z-index: 2; }
.ikili-cerceve img {
  width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 3;
  transition: transform .7s ease;
}
.ikili-gorsel:hover .ikili-cerceve img { transform: scale(1.04); }
.ikili-kutu {
  position: absolute; right: -16px; bottom: -22px; background: #fff;
  border-radius: var(--yuvarlak); padding: 20px 24px; box-shadow: var(--golge-l);
  border: 1px solid var(--cizgi); text-align: center;
}
.ikili-kutu strong { display: block; font-family: 'Outfit', sans-serif; font-size: 2rem; font-weight: 800; color: var(--k-ana); line-height: 1; }
.ikili-kutu span { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--gri); }

.ozellik-liste { margin: 0 0 28px; }
.ozellik-liste li { display: flex; gap: 13px; padding: 9px 0; align-items: flex-start; }
.ozellik-liste li svg { width: 22px; height: 22px; fill: var(--k-ana); flex: 0 0 auto; margin-top: 3px; }
.ozellik-liste li b { display: block; font-family: 'Outfit', sans-serif; color: var(--koyu); }
.ozellik-liste li small { color: var(--gri); font-size: 14px; }

/* ============ Yorumlar ============ */
.yorum-sargi { position: relative; }
.yorum-ray { display: flex; gap: 24px; overflow: hidden; }
.yorum {
  min-width: 100%; background: #fff; border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak-l); padding: 40px; text-align: center;
  box-shadow: var(--golge-s);
}
.yorum .yildiz { color: var(--amber); font-size: 18px; letter-spacing: 3px; margin-bottom: 16px; }
.yorum blockquote { margin: 0 0 22px; font-size: clamp(1.05rem, 2vw, 1.3rem); font-family: 'Outfit', sans-serif; font-weight: 500; color: var(--koyu); line-height: 1.6; }
.yorum-kisi { display: flex; align-items: center; justify-content: center; gap: 12px; }
.yorum-avatar {
  width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--k-sis); color: var(--k-koyu); font-weight: 800; font-family: 'Outfit', sans-serif;
}
.yorum-kisi b { display: block; font-size: 15px; color: var(--koyu); }
.yorum-kisi span { font-size: 13px; color: var(--gri-acik); }
.yorum-kontrol { display: flex; justify-content: center; gap: 10px; margin-top: 26px; }
.yorum-nokta {
  width: 9px; height: 9px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--k-pastel); transition: all var(--gecis); padding: 0;
}
.yorum-nokta.aktif { background: var(--k-ana); width: 26px; border-radius: 99px; }

/* ============ CTA ============ */
.cta {
  position: relative; overflow: hidden; border-radius: var(--yuvarlak-l);
  background: linear-gradient(135deg, var(--amber) 0%, var(--k-ana) 45%, var(--kirmizi) 100%);
  color: #fff; padding: clamp(40px, 6vw, 64px); text-align: center;
}
.cta::before {
  content: ''; position: absolute; width: 420px; height: 420px; border-radius: 50%;
  background: rgba(255,255,255,.07); top: -160px; right: -120px;
}
.cta::after {
  content: ''; position: absolute; width: 300px; height: 300px; border-radius: 50%;
  background: rgba(255,255,255,.06); bottom: -150px; left: -80px;
}
.cta > * { position: relative; z-index: 2; }
.cta h2 { color: #fff; }
.cta p { color: rgba(255,255,255,.85); max-width: 54ch; margin: 0 auto 28px; }
.cta-dugmeler { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }


/* ============ Şube kartları ============ */
.sube-kart {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--cizgi); border-radius: var(--yuvarlak);
  padding: 30px 28px 28px; box-shadow: var(--golge-s);
  transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}
.sube-kart::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--amber), var(--k-ana));
  transform: scaleX(0); transform-origin: left; transition: transform var(--gecis);
}
.sube-kart:hover { transform: translateY(-6px); box-shadow: var(--golge-m); border-color: var(--k-pastel); }
.sube-kart:hover::before { transform: scaleX(1); }
.sube-no {
  position: absolute; top: 20px; right: 24px;
  font-family: 'Outfit', sans-serif; font-size: 2.6rem; font-weight: 800;
  color: var(--bej); line-height: 1; transition: color var(--gecis);
}
.sube-kart:hover .sube-no { color: var(--k-pastel); }
.sube-ikon {
  width: 50px; height: 50px; border-radius: 15px; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--k-sis); color: var(--k-ana); transition: all var(--gecis);
}
.sube-ikon svg { width: 24px; height: 24px; fill: currentColor; }
.sube-kart:hover .sube-ikon { background: var(--k-ana); color: #fff; transform: rotate(-6deg); }
.sube-kart h3 { margin-bottom: .3em; }
.sube-adres { color: var(--gri); font-size: 15px; margin-bottom: 8px; }
.sube-saat {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; color: var(--k-koyu); font-weight: 600; margin-bottom: 18px;
  background: var(--k-sis); padding: 5px 12px; border-radius: 99px;
}
.sube-dugmeler { display: flex; flex-wrap: wrap; gap: 9px; }
.buton-kucuk { padding: 9px 16px; font-size: 13.5px; }

/* ============ Sayfa başı (iç sayfalar) ============ */
.sayfa-basi {
  position: relative; overflow: hidden; color: #fff; text-align: left;
  background: linear-gradient(128deg, var(--sk-acik) 0%, var(--sk-orta) 52%, var(--sk-koyu) 100%);
  padding: clamp(56px, 8vw, 90px) 0;
}
.sayfa-basi::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.13) 1px, transparent 0);
  background-size: 24px 24px;
}
.sayfa-basi > * { position: relative; z-index: 2; }
.sayfa-basi h1 { color: #fff; margin-bottom: 10px; font-size: clamp(2rem, 4.4vw, 3.1rem); }
.sayfa-basi p { color: rgba(255,255,255,.8); max-width: 68ch; margin: 0; }
.kirinti { display: flex; gap: 10px; justify-content: flex-start; margin-top: 18px; font-size: 14px; color: rgba(255,255,255,.65); }
.kirinti a { color: rgba(255,255,255,.9); }

/* ============ İletişim ============ */
.iletisim-izgara { display: grid; grid-template-columns: 1fr 1.25fr; gap: 36px; align-items: start; }
.bilgi-kart {
  background: #fff; border: 1px solid var(--cizgi); border-radius: var(--yuvarlak);
  padding: 24px; display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px;
  transition: all var(--gecis);
}
.bilgi-kart:hover { border-color: var(--k-pastel); box-shadow: var(--golge-m); transform: translateX(4px); }
.bilgi-kart .bi {
  width: 46px; height: 46px; border-radius: 13px; flex: 0 0 auto;
  background: var(--k-sis); color: var(--k-ana);
  display: flex; align-items: center; justify-content: center;
}
.bilgi-kart .bi svg { width: 22px; height: 22px; }
.bilgi-kart b { display: block; font-family: 'Outfit', sans-serif; color: var(--koyu); margin-bottom: 2px; }
.bilgi-kart span, .bilgi-kart a { font-size: 14.5px; color: var(--gri); }

.form-kart { background: #fff; border: 1px solid var(--cizgi); border-radius: var(--yuvarlak-l); padding: clamp(26px, 4vw, 40px); box-shadow: var(--golge-s); }
.form-satir { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.alan { margin-bottom: 16px; }
.alan label { display: block; font-size: 13.5px; font-weight: 700; color: var(--koyu-2); margin-bottom: 7px; font-family: 'Outfit', sans-serif; }
.alan input, .alan textarea, .alan select {
  width: 100%; padding: 13px 15px; border: 1.5px solid var(--cizgi); border-radius: 12px;
  font-family: inherit; font-size: 15px; color: var(--koyu); background: #fff;
  transition: border-color var(--gecis), box-shadow var(--gecis);
}
.alan input:focus, .alan textarea:focus, .alan select:focus {
  outline: 0; border-color: var(--k-acik); box-shadow: 0 0 0 4px rgba(250,154,78,.18);
}
.alan textarea { min-height: 130px; resize: vertical; }

.uyari { padding: 14px 18px; border-radius: 12px; font-size: 14.5px; margin-bottom: 20px; }
.uyari-basari { background: #eaf7ef; border: 1px solid #c6e8d3; color: #216b41; }
.uyari-hata { background: #fdeeec; border: 1px solid #f6d6d2; color: #9b2d28; }

.harita-cerceve { border-radius: var(--yuvarlak-l); overflow: hidden; border: 1px solid var(--cizgi); box-shadow: var(--golge-s); line-height: 0; }
.harita-cerceve iframe { width: 100%; height: 400px; border: 0; filter: grayscale(.15) contrast(1.05); }

/* ============ Alt bilgi ============ */
.altbilgi {
  background: linear-gradient(180deg, #46331f 0%, var(--koyu) 100%);
  color: rgba(255,255,255,.72); padding: clamp(50px, 7vw, 78px) 0 0;
}
.altbilgi-ic { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1fr; gap: 40px; padding-bottom: 46px; }
.ab-blok h4 { color: #fff; font-size: 1.02rem; margin-bottom: 18px; letter-spacing: .02em; }
.ab-marka p { font-size: 14.5px; margin: 18px 0 20px; }
.ab-liste li { margin-bottom: 10px; font-size: 14.5px; }
.ab-liste a { color: rgba(255,255,255,.68); }
.ab-liste a:hover { color: var(--k-acik); padding-left: 4px; }
.ab-liste a { transition: all var(--gecis); display: inline-block; }
.ab-sube li { margin-bottom: 16px; line-height: 1.5; }
.ab-sube strong { display: block; color: #fff; font-family: 'Outfit', sans-serif; font-size: 14.5px; }
.ab-sube span { display: block; font-size: 13.5px; color: rgba(255,255,255,.55); }
.ab-sube a { font-size: 13.5px; color: var(--k-acik); }
.ab-saat { color: #fff; font-family: 'Outfit', sans-serif; font-weight: 600; margin-bottom: 8px; }
.ab-kucuk { font-size: 13.5px; }
.ab-buton { margin: 8px 0 14px; }
.ab-eposta { display: block; font-size: 14px; color: rgba(255,255,255,.68); }
.ab-sosyal { display: flex; gap: 10px; }
.ab-sosyal a {
  width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.07); color: rgba(255,255,255,.8); transition: all var(--gecis);
}
.ab-sosyal a:hover { background: var(--k-ana); color: #fff; transform: translateY(-3px); }
.ab-sosyal .ikon { width: 18px; height: 18px; }
.altbilgi-son {
  border-top: 1px solid rgba(255,255,255,.09); padding: 22px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px 26px; flex-wrap: wrap;
  font-size: 13.5px; color: rgba(255,255,255,.5);
}
.altbilgi-son .ab-orta { flex: 1; text-align: center; }
.ab-imza {
  display: inline-flex; align-items: center; gap: 7px; margin-left: auto;
  color: rgba(255,255,255,.5); white-space: nowrap;
}
.imza-on { font-size: 13.5px; }
.imza-marka {
  font-family: 'Outfit', sans-serif; font-weight: 800; letter-spacing: .12em;
  color: var(--k-acik); transition: color var(--gecis);
}
.imza-kalp {
  width: 14px; height: 14px; fill: #fff;
  animation: kalp-at 1.8s ease-in-out infinite; transform-origin: center;
}
@keyframes kalp-at {
  0%, 100% { transform: scale(1); }
  18% { transform: scale(1.28); }
  36% { transform: scale(1); }
  54% { transform: scale(1.18); }
}
.ab-imza:hover { color: rgba(255,255,255,.8); }
.ab-imza:hover .imza-marka { color: #fff; }

/* ============ Yüzen düğmeler ============ */
.yukari {
  position: fixed; right: 22px; bottom: 26px; z-index: 800;
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; transition: all var(--gecis);
  background: #fff; color: var(--sk-orta); box-shadow: var(--golge-m);
  opacity: 0; visibility: hidden; transform: translateY(12px);
}
.yukari.gorun { opacity: 1; visibility: visible; transform: translateY(0); }
.yukari:hover { background: var(--sk-orta); color: #fff; }
.yukari svg { width: 22px; fill: currentColor; }

/* ============ Sağ kenar hızlı erişim ============ */
.hizli {
  position: fixed; right: 18px; top: 50%; transform: translateY(-50%);
  z-index: 820; display: flex; flex-direction: column; gap: 11px;
}
.hizli-dugme {
  --hd-renk: var(--k-ana);
  position: relative; display: flex; align-items: center; justify-content: flex-end;
  height: 48px; width: 48px; padding: 0; overflow: hidden;
  border-radius: 999px; color: #fff; background: var(--hd-renk);
  box-shadow: 0 8px 22px rgba(80,25,18,.26);
  transition: width .38s cubic-bezier(.4,0,.2,1), box-shadow var(--gecis), transform var(--gecis);
  animation: hd-gir .55s cubic-bezier(.2,.8,.3,1) backwards;
}
.hizli-dugme:nth-child(1) { animation-delay: .15s; }
.hizli-dugme:nth-child(2) { animation-delay: .25s; }
.hizli-dugme:nth-child(3) { animation-delay: .35s; }
.hizli-dugme:nth-child(4) { animation-delay: .45s; }
@keyframes hd-gir {
  from { opacity: 0; transform: translateX(42px); }
  to   { opacity: 1; transform: translateX(0); }
}

.hd-ikon {
  position: absolute; right: 0; top: 0;
  width: 48px; height: 48px; flex: 0 0 48px;
  display: flex; align-items: center; justify-content: center;
}
.hd-ikon svg { width: 23px; height: 23px; fill: currentColor; }
.hd-yazi {
  padding-left: 20px; padding-right: 54px; white-space: nowrap;
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: .01em;
  opacity: 0; transform: translateX(8px);
  transition: opacity .25s ease .08s, transform .3s ease .08s;
}
.hizli-dugme:hover, .hizli-dugme:focus-visible {
  width: 182px; color: #fff; outline: 0;
  box-shadow: 0 12px 28px rgba(80,25,18,.34);
}
.hizli-dugme:hover .hd-yazi, .hizli-dugme:focus-visible .hd-yazi {
  opacity: 1; transform: translateX(0);
}

/* Marka renkleri */
.hd-wa  { --hd-renk: #25d366; box-shadow: 0 8px 22px rgba(37,211,102,.34); }
.hd-ig  { --hd-renk: #c13584;
          background: linear-gradient(135deg, #feda75, #fa7e1e 28%, #d62976 58%, #962fbf 82%, #4f5bd5); }
.hd-fb  { --hd-renk: #1877f2; box-shadow: 0 8px 22px rgba(24,119,242,.3); }
.hd-tel { --hd-renk: var(--sk-orta); box-shadow: 0 8px 22px rgba(232,64,60,.34); }

/* Sipariş hattında hafif nabız */
.hd-tel .hd-ikon::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.75);
  animation: hd-nabiz 2.2s ease-out infinite;
}
@keyframes hd-nabiz {
  0%   { transform: scale(1);   opacity: .75; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

@media (max-width: 880px) {
  .hizli { right: 12px; gap: 9px; }
  .hizli-dugme { height: 44px; width: 44px; }
  .hd-ikon { width: 44px; height: 44px; flex-basis: 44px; }
  .hd-ikon svg { width: 21px; height: 21px; }
  .hizli-dugme:hover, .hizli-dugme:focus-visible { width: 44px; }
  .hd-yazi { display: none; }
  .yukari { right: 12px; bottom: 16px; width: 42px; height: 42px; }
}

/* ============ Animasyonlar (scroll reveal) ============ */
.gorun-anim { opacity: 0; transform: translateY(26px); transition: opacity .75s cubic-bezier(.2,.7,.3,1), transform .75s cubic-bezier(.2,.7,.3,1); }
.gorun-anim.ic { opacity: 1; transform: none; }
.gorun-anim.sol { transform: translateX(-32px); }
.gorun-anim.sag { transform: translateX(32px); }
.gorun-anim.olcek { transform: scale(.94); }
.gorun-anim.sol.ic, .gorun-anim.sag.ic, .gorun-anim.olcek.ic { transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .gorun-anim { opacity: 1; transform: none; }
}

/* ============ Duyarlı ============ */
@media (max-width: 1024px) {
  .iz-4 { grid-template-columns: repeat(2, 1fr); }
  .altbilgi-ic { grid-template-columns: repeat(2, 1fr); }
  .hero-ic { grid-template-columns: 1fr; gap: 44px; }
  .adimlar { grid-template-columns: repeat(2, 1fr); }
  .iletisim-izgara { grid-template-columns: 1fr; }
}

@media (max-width: 880px) {
  .us-gizle { display: none; }
  .hamburger { display: flex; }
  .menu {
    position: fixed; inset: 0 0 0 auto; width: min(320px, 84vw);
    background: #fff; flex-direction: column; align-items: stretch; justify-content: flex-start;
    padding: 96px 22px 32px; gap: 6px; box-shadow: -18px 0 50px rgba(168,63,20,.16);
    transform: translateX(104%); transition: transform .4s cubic-bezier(.4,0,.2,1); z-index: 890;
  }
  .menu.acik { transform: translateX(0); }
  .menu-link { padding: 14px 16px; border-radius: 12px; font-size: 16px; }
  .menu-link:hover { background: var(--k-sis); }
  .menu-link::after { display: none; }
  .menu-cta { margin: 14px 0 0; }
  .iz-3, .iz-2 { grid-template-columns: repeat(2, 1fr); }
  .sayaclar { grid-template-columns: repeat(2, 1fr); }
  .ikili { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .kapsa { padding: 0 18px; }
  .iz-3, .iz-2, .iz-4, .adimlar, .sayaclar, .altbilgi-ic, .form-satir { grid-template-columns: 1fr; }
  .ust-serit-ic { justify-content: center; }
  .us-sol { display: none; }
  .yorum { padding: 28px 22px; }
  .altbilgi-son { justify-content: center; text-align: center; }
}

/* =====================================================
   ŞUBE SEÇİCİ · SEPET · SİPARİŞ
   ===================================================== */

/* Üst şerit şube durumu */
.us-durum i {
  width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 2px;
}
.us-durum.acik i   { background: #6ee7a0; box-shadow: 0 0 0 3px rgba(110,231,160,.25); }
.us-durum.kapali i { background: #ffb4a8; box-shadow: 0 0 0 3px rgba(255,180,168,.22); }

/* ---- Menüdeki sepet bağlantısı ---- */
.menu-sepet { display: inline-flex; align-items: center; gap: 7px; position: relative; }
.menu-sepet svg { fill: currentColor; }
.sepet-rozet {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px;
  background: var(--kirmizi); color: #fff; font-size: 11.5px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Outfit', sans-serif;
}

/* ---- Şube seçici ---- */
.sube-secici { position: relative; margin-left: 10px; }
.ss-dugme {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 16px; border-radius: 99px; cursor: pointer;
  border: 1.5px solid var(--cizgi); background: #fff; color: var(--koyu);
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 14.5px;
  transition: all var(--gecis); max-width: 230px;
}
.ss-dugme span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-dugme svg { fill: currentColor; flex: 0 0 auto; }
.ss-dugme:hover { border-color: var(--k-acik); color: var(--k-koyu); }
.sube-secici.secilmedi .ss-dugme {
  background: var(--k-ana); border-color: var(--k-ana); color: #fff;
  box-shadow: 0 8px 20px rgba(239,108,32,.26);
}
.sube-secici.acik .ss-ok { transform: rotate(180deg); }
.ss-ok { transition: transform var(--gecis); }

.ss-liste {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 950;
  width: 310px; background: #fff; border: 1px solid var(--cizgi);
  border-radius: 16px; box-shadow: var(--golge-l); padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: all var(--gecis);
}
.sube-secici.acik .ss-liste { opacity: 1; visibility: visible; transform: translateY(0); }
.ss-baslik {
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gri-acik); font-weight: 700; padding: 8px 12px 6px;
}
.ss-oge {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 11px 12px; border: 0; background: none; border-radius: 11px;
  transition: background var(--gecis);
}
.ss-oge:hover { background: var(--k-sis); }
.ss-oge.secili { background: var(--k-sis); box-shadow: inset 3px 0 0 var(--k-ana); }
.sso-ad { display: block; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 14.5px; color: var(--koyu); }
.sso-adres { display: block; font-size: 12.5px; color: var(--gri); margin: 1px 0 4px; }
.sso-durum { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 99px; }
.sso-durum.acik   { background: #eaf7ef; color: #216b41; }
.sso-durum.kapali { background: #fdeeec; color: #9b2d28; }

/* ---- Menü sayfası şube bilgisi ---- */
.sayfa-sube {
  display: inline-flex; align-items: center; gap: 10px; margin: 14px 0 0;
  color: rgba(255,255,255,.92); font-size: 14.5px;
}
.sb-durum, .sube-rozet {
  font-size: 12px; font-weight: 700; padding: 3px 11px; border-radius: 99px;
  letter-spacing: .04em;
}
.sb-durum.acik   { background: rgba(255,255,255,.95); color: #1d7a45; }
.sb-durum.kapali { background: rgba(0,0,0,.22); color: #fff; }
.sube-rozet { display: inline-block; margin: 0 0 14px; font-size: 12.5px; }
.sube-rozet.acik   { background: #eaf7ef; color: #216b41; }
.sube-rozet.kapali { background: #fdeeec; color: #9b2d28; }

.urun-kapali { font-size: 12.5px; font-weight: 700; color: #9b2d28; background: #fdeeec;
  padding: 6px 12px; border-radius: 99px; }

.uyari-bilgi { background: #eef5ff; border: 1px solid #cfe0f7; color: #1f4e85; }

/* ---- Boş durum kutusu ---- */
.bos-kutu {
  background: #fff; border: 1px solid var(--cizgi); border-radius: var(--yuvarlak-l);
  padding: clamp(32px, 5vw, 54px); text-align: center; box-shadow: var(--golge-s);
  max-width: 680px; margin: 0 auto;
}
.bk-ikon { font-size: 44px; display: block; margin-bottom: 12px; }
.bos-kutu p { color: var(--gri); max-width: 46ch; margin: 0 auto 22px; }
.sube-sec-liste { display: grid; gap: 10px; text-align: left; }
.sube-dugme {
  width: 100%; cursor: pointer; text-align: left; padding: 16px 18px;
  border: 1.5px solid var(--cizgi); border-radius: 14px; background: #fff;
  transition: all var(--gecis);
}
.sube-dugme:hover { border-color: var(--k-ana); transform: translateX(3px); }
.sube-dugme strong { display: block; font-family: 'Outfit', sans-serif; font-size: 15px; color: var(--koyu); }
.sube-dugme span { display: block; font-size: 13px; color: var(--gri); margin: 2px 0 6px; }
.sube-dugme em { font-style: normal; font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 99px; }
.sube-dugme em.acik   { background: #eaf7ef; color: #216b41; }
.sube-dugme em.kapali { background: #fdeeec; color: #9b2d28; }

/* ---- Sepet sayfası ---- */
.sepet-duzen { display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; align-items: start; }
.sepet-liste, .sepet-ozet {
  background: #fff; border: 1px solid var(--cizgi); border-radius: var(--yuvarlak-l);
  padding: clamp(22px, 3vw, 32px); box-shadow: var(--golge-s);
}
.sepet-ozet { position: sticky; top: 100px; }
.sepet-ust { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.sepet-ust h2 { margin: 0; font-size: 1.25rem; }
.sepet-ust small { color: var(--gri-acik); font-weight: 400; font-size: .72em; }
.baglanti-dugme {
  background: none; border: 0; cursor: pointer; color: var(--gri);
  font-size: 13.5px; font-family: inherit; text-decoration: underline;
}
.baglanti-dugme:hover { color: var(--kirmizi); }

.sepet-satir {
  display: grid; grid-template-columns: 1fr auto auto auto; gap: 16px; align-items: center;
  padding: 16px 0; border-bottom: 1px dashed var(--cizgi);
}
.sepet-satir:last-of-type { border-bottom: 0; }
.ss-bilgi strong { display: block; font-family: 'Outfit', sans-serif; font-size: 15.5px; color: var(--koyu); }
.ss-bilgi span { font-size: 13px; color: var(--gri); }
.ss-adet { display: inline-flex; align-items: center; gap: 2px; border: 1.5px solid var(--cizgi); border-radius: 99px; padding: 3px; }
.ss-adet button {
  width: 30px; height: 30px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--k-sis); color: var(--k-koyu); font-size: 16px; font-weight: 700; line-height: 1;
  transition: all var(--gecis);
}
.ss-adet button:hover { background: var(--k-ana); color: #fff; }
.ss-adet span { min-width: 28px; text-align: center; font-weight: 700; font-family: 'Outfit', sans-serif; }
.ss-tutar { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.05rem; color: var(--k-koyu); min-width: 90px; text-align: right; }
.ss-sil button {
  width: 32px; height: 32px; border: 0; border-radius: 9px; cursor: pointer;
  background: #fdeeec; color: #9b2d28; display: flex; align-items: center; justify-content: center;
  transition: all var(--gecis);
}
.ss-sil button:hover { background: #9b2d28; color: #fff; }

.so-sube {
  background: var(--k-sis); border-radius: 14px; padding: 16px 18px; margin-bottom: 18px;
}
.so-etiket { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--gri-acik); font-weight: 700; }
.so-sube strong { display: block; font-family: 'Outfit', sans-serif; font-size: 1.05rem; color: var(--koyu); margin: 3px 0 2px; }
.so-sube small { display: block; font-size: 13px; color: var(--gri); margin-bottom: 8px; }
.so-durum { font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 99px; }
.so-durum.acik   { background: #eaf7ef; color: #216b41; }
.so-durum.kapali { background: #fdeeec; color: #9b2d28; }

.so-toplam {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 14px 0; border-top: 2px solid var(--cizgi); border-bottom: 2px solid var(--cizgi);
  margin-bottom: 8px;
}
.so-toplam span { font-family: 'Outfit', sans-serif; font-weight: 700; color: var(--gri); }
.so-toplam strong { font-family: 'Outfit', sans-serif; font-size: 1.6rem; font-weight: 800; color: var(--k-koyu); }
.so-min { font-size: 13px; color: var(--gri); margin-bottom: 14px; }
.so-gonder { width: 100%; margin-top: 6px; font-size: 16px; padding: 15px 26px; }
.so-gonder:hover:not(:disabled) { background: var(--k-koyu); }
.so-gonder:disabled { background: var(--gri-acik); box-shadow: none; cursor: not-allowed; opacity: .7; }
.so-not { font-size: 12.5px; color: var(--gri); margin: 12px 0 0; line-height: 1.6; }

/* ---- Sipariş tamam ---- */
.tamam-kutu {
  background: #fff; border: 1px solid var(--cizgi); border-radius: var(--yuvarlak-l);
  padding: clamp(30px, 5vw, 52px); text-align: center; box-shadow: var(--golge-m);
}
.tk-ikon {
  width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 18px;
  background: #eaf7ef; color: #2e9e62; display: flex; align-items: center; justify-content: center;
}
.tk-ikon svg { width: 40px; fill: currentColor; }
.tamam-kutu h1 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin-bottom: 8px; }
.tk-kod { color: var(--gri); margin-bottom: 14px; }
.tk-kod strong { font-family: 'Outfit', sans-serif; color: var(--k-koyu); letter-spacing: .04em; }

/* Sipariş no rozeti */
.tk-kod-rozet {
  display: inline-flex; align-items: center; gap: 10px; margin: 4px 0 18px;
  background: var(--k-sis); border: 1px dashed var(--k-pastel);
  padding: 9px 18px; border-radius: 99px;
}
.tk-kod-rozet span {
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gri); font-weight: 700;
}
.tk-kod-rozet strong {
  font-family: 'Outfit', sans-serif; font-size: 1.02rem; font-weight: 800;
  color: var(--k-koyu); letter-spacing: .04em;
}
.tk-kucuk { font-size: 12.5px; color: var(--gri-acik); margin: 10px 0 0; }

/* Sipariş aşamaları */
.tk-adimlar {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  flex-wrap: wrap; margin: 30px 0 4px;
}
.tka { display: flex; align-items: center; gap: 10px; text-align: left; }
.tka-no {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%;
  background: var(--k-sis); color: var(--k-koyu);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 13.5px;
}
.tka:first-of-type .tka-no { background: #2e9e62; color: #fff; }
.tka b { display: block; font-family: 'Outfit', sans-serif; font-size: 13.5px; color: var(--koyu); line-height: 1.3; }
.tka small { font-size: 12px; color: var(--gri); }
.tka-cizgi { width: 34px; height: 2px; background: var(--cizgi); border-radius: 2px; }

@media (max-width: 700px) {
  .tk-adimlar { flex-direction: column; align-items: flex-start; gap: 12px; max-width: 260px; margin-inline: auto; }
  .tka-cizgi { width: 2px; height: 14px; margin-left: 14px; }
}
.tk-aciklama { color: var(--gri); max-width: 52ch; margin: 0 auto 24px; }
.tk-wa { background: #25d366; box-shadow: 0 10px 26px rgba(37,211,102,.32); }
.tk-wa:hover { background: #1ebe5a; color: #fff; }

/* WhatsApp ek kartı (sipariş sonrası) */
.wa-kart {
  position: relative; overflow: hidden; text-align: left;
  margin: 30px 0 4px; padding: 24px 26px;
  background: linear-gradient(135deg, #f1fdf5, #ffffff);
  border: 1.5px solid #c9eed8; border-radius: var(--yuvarlak);
  display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: start;
}
.wa-ikon {
  grid-row: span 1;
  width: 48px; height: 48px; flex: 0 0 48px; border-radius: 14px;
  background: #25d366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 18px rgba(37,211,102,.28);
}
.wa-ikon svg { fill: currentColor; }
.wa-metin strong {
  display: block; font-family: 'Outfit', sans-serif; font-size: 1.08rem;
  color: var(--koyu); margin-bottom: 8px;
}
.wa-liste { margin: 0; padding: 0; list-style: none; }
.wa-liste li {
  position: relative; padding-left: 22px; margin-bottom: 5px;
  font-size: 14px; color: var(--gri); line-height: 1.55;
}
.wa-liste li::before {
  content: ''; position: absolute; left: 0; top: 7px;
  width: 13px; height: 13px; border-radius: 50%;
  background: #25d366;
  -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 16.2 5.3 12l1.4-1.4 2.8 2.8 7.8-7.8L18.7 7 9.5 16.2Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 16.2 5.3 12l1.4-1.4 2.8 2.8 7.8-7.8L18.7 7 9.5 16.2Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.wa-kart .tk-wa { grid-column: 2; justify-self: start; margin-top: 14px; }
.wa-not { grid-column: 2; font-size: 12.5px; color: var(--gri-acik); }

@media (max-width: 600px) {
  .wa-kart { grid-template-columns: 1fr; padding: 20px; }
  .wa-kart .tk-wa, .wa-not { grid-column: 1; }
  .wa-kart .tk-wa { width: 100%; justify-content: center; }
}
.tk-ozet { text-align: left; margin: 30px 0 22px; border-top: 1px solid var(--cizgi); padding-top: 22px; }
.tk-ozet h3 { font-size: 1.05rem; margin-bottom: 14px; }
.tk-satir { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; font-size: 14.5px; }
.tk-satir strong { font-family: 'Outfit', sans-serif; color: var(--koyu); }
.tk-toplam { border-top: 2px solid var(--cizgi); margin-top: 8px; padding-top: 12px; font-size: 1.05rem; }
.tk-toplam strong { color: var(--k-koyu); font-size: 1.2rem; }
.tk-musteri { background: var(--k-sis); border-radius: 14px; padding: 16px 18px; margin-top: 18px; }
.tk-musteri div { display: flex; gap: 10px; padding: 4px 0; font-size: 14px; color: var(--koyu-2); }
.tk-musteri b { flex: 0 0 70px; color: var(--gri); font-weight: 700; font-family: 'Outfit', sans-serif; font-size: 12.5px;
  text-transform: uppercase; letter-spacing: .06em; padding-top: 2px; }
.tk-alt { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 1024px) {
  .sepet-duzen { grid-template-columns: 1fr; }
  .sepet-ozet { position: static; }
}
@media (max-width: 880px) {
  .sube-secici { margin: 14px 0 0; }
  .ss-dugme { width: 100%; max-width: none; justify-content: center; }
  .ss-liste { position: static; width: 100%; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; margin-top: 8px; display: none; }
  .sube-secici.acik .ss-liste { display: block; }
  .menu-sepet { justify-content: space-between; }
}
@media (max-width: 600px) {
  .sepet-satir { grid-template-columns: 1fr auto; row-gap: 10px; }
  .ss-tutar { text-align: left; }
  .ss-sil { justify-self: end; }
}

/* ---- Ürün seçenekleri (gramaj / double) ---- */
.secenekler {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0 0 14px; padding-top: 2px;
}
.sec-oge {
  position: relative; cursor: pointer; user-select: none;
}
.sec-oge input { position: absolute; opacity: 0; width: 0; height: 0; }
.sec-oge span {
  display: inline-block; padding: 6px 13px; border-radius: 99px;
  border: 1.5px solid var(--cizgi); background: #fff;
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 12.5px;
  color: var(--gri); transition: all var(--gecis); white-space: nowrap;
}
.sec-oge:hover span { border-color: var(--k-acik); color: var(--k-koyu); }
.sec-oge.secili span {
  background: var(--k-ana); border-color: var(--k-ana); color: #fff;
  box-shadow: 0 5px 14px rgba(239,108,32,.28);
}
.sec-oge input:focus-visible + span { outline: 2px solid var(--k-acik); outline-offset: 2px; }

/* ---- Ödeme yöntemi seçimi ---- */
.odeme-liste { display: grid; gap: 9px; margin-bottom: 8px; }
.odeme-oge {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 13px 15px; border: 1.5px solid var(--cizgi); border-radius: 13px;
  background: #fff; cursor: pointer; transition: all var(--gecis);
}
.odeme-oge input { position: absolute; opacity: 0; width: 0; height: 0; }
.odeme-oge:hover { border-color: var(--k-acik); background: var(--k-sis); }
.odeme-oge.secili {
  border-color: var(--k-ana); background: var(--k-sis);
  box-shadow: 0 0 0 3px rgba(239,108,32,.13);
}
.od-ikon { font-size: 21px; line-height: 1; flex: 0 0 auto; }
.od-ad {
  flex: 1; font-family: 'Outfit', sans-serif; font-weight: 700;
  font-size: 14.5px; color: var(--koyu);
}
.od-tik {
  width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%;
  border: 1.5px solid var(--cizgi); background: #fff; color: #fff;
  display: flex; align-items: center; justify-content: center; transition: all var(--gecis);
}
.odeme-oge.secili .od-tik { background: var(--k-ana); border-color: var(--k-ana); }
.odeme-oge input:focus-visible ~ .od-tik { outline: 2px solid var(--k-acik); outline-offset: 2px; }

/* ---- Sepete Ekle düğmesi ---- */
.urun-alt { gap: 10px; }
.buton-ekle {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 18px; border-radius: 99px; border: 0; cursor: pointer;
  background: var(--k-ana); color: #fff;
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 13.5px;
  box-shadow: 0 6px 16px rgba(239,108,32,.26);
  transition: all var(--gecis); white-space: nowrap;
}
.buton-ekle svg { fill: currentColor; flex: 0 0 auto; }
.buton-ekle .be-tik { display: none; }
.buton-ekle:hover { background: var(--k-koyu); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(239,108,32,.32); }
.buton-ekle.calisiyor { opacity: .65; pointer-events: none; }
.buton-ekle.eklendi {
  background: #2e9e62; box-shadow: 0 6px 16px rgba(46,158,98,.3);
}
.buton-ekle.eklendi .be-artı { display: none; }
.buton-ekle.eklendi .be-tik  { display: inline-block; }
.buton-ekle-pasif {
  background: #fff; color: var(--k-koyu); border: 1.5px solid var(--k-pastel); box-shadow: none;
}
.buton-ekle-pasif:hover { background: var(--k-sis); color: var(--k-koyu); transform: none; box-shadow: none; }

/* ---- Sağ alt sepet çubuğu ---- */
.sepet-cubuk {
  position: fixed; right: 22px; bottom: 24px; z-index: 840;
  display: flex; align-items: center; gap: 16px;
  background: #fff; border: 1px solid var(--cizgi); border-radius: 99px;
  padding: 10px 12px 10px 16px; box-shadow: 0 16px 40px rgba(90,40,10,.2);
  opacity: 0; visibility: hidden; transform: translateY(16px) scale(.96);
  transition: all .34s cubic-bezier(.2,.8,.3,1);
}
.sepet-cubuk.gorun { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.sepet-cubuk.titre { animation: sc-titre .45s ease; }
@keyframes sc-titre {
  0%, 100% { transform: translateY(0) scale(1); }
  35%      { transform: translateY(-4px) scale(1.035); }
}
.sc-bilgi { display: flex; align-items: center; gap: 11px; }
.sc-ikon {
  position: relative; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%;
  background: var(--k-sis); color: var(--k-ana);
  display: flex; align-items: center; justify-content: center;
}
.sc-ikon svg { fill: currentColor; }
.sc-sayi {
  position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 99px; background: var(--kirmizi); color: #fff;
  font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 11.5px; font-style: normal;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
}
.sc-yazi { display: flex; flex-direction: column; line-height: 1.25; }
.sc-yazi b { font-family: 'Outfit', sans-serif; font-size: 14px; color: var(--koyu); }
.sc-yazi small { font-size: 13px; color: var(--k-koyu); font-weight: 700; }
.sc-dugme {
  display: inline-flex; align-items: center; padding: 11px 20px; border-radius: 99px;
  background: var(--k-ana); color: #fff; font-family: 'Outfit', sans-serif;
  font-weight: 700; font-size: 14px; transition: all var(--gecis); white-space: nowrap;
}
.sc-dugme:hover { background: var(--k-koyu); color: #fff; }

/* Sepet çubuğu görünürken yukarı-çık düğmesi yukarı kaysın */
.sepet-cubuk.gorun ~ .yukari { bottom: 96px; }

/* ---- Kısa bildirim ---- */
.bildirim {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 18px);
  z-index: 980; max-width: min(460px, 92vw);
  background: var(--koyu); color: #fff; border-radius: 14px;
  padding: 13px 20px; font-size: 14.5px; line-height: 1.5;
  box-shadow: 0 16px 40px rgba(59,42,30,.35);
  opacity: 0; visibility: hidden; transition: all .3s cubic-bezier(.2,.8,.3,1);
}
.bildirim.gorun { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.bildirim.hata { background: #9b2d28; }

@media (max-width: 700px) {
  .sepet-cubuk {
    left: 12px; right: 12px; bottom: 12px; border-radius: 18px;
    justify-content: space-between; padding: 10px 10px 10px 14px;
  }
  .sepet-cubuk.gorun ~ .yukari { bottom: 92px; }
  .bildirim { bottom: 92px; }
  .buton-ekle { padding: 10px 15px; font-size: 13px; }
}

/* =====================================================
   ÖNE ÇIKAN ÜRÜNLER — altılı kompakt ızgara
   ===================================================== */
.iz-6 { grid-template-columns: repeat(6, 1fr); }
.urunler-kucuk { gap: 16px; }

.urunler-kucuk .urun-gorsel { aspect-ratio: 1 / 1; }
.urunler-kucuk .urun-harf { font-size: 2.2rem; }
.urunler-kucuk .urun-rozet {
  top: 8px; left: 8px; font-size: 10px; padding: 4px 9px; letter-spacing: .04em;
}
.urunler-kucuk .urun-govde { padding: 14px 14px 16px; }
.urunler-kucuk .urun-kat { font-size: 10.5px; letter-spacing: .1em; margin-bottom: 4px; }
.urunler-kucuk .urun-govde h3 { font-size: .98rem; line-height: 1.25; margin-bottom: .3em; }
.urunler-kucuk .urun-govde p {
  font-size: 12.8px; line-height: 1.55; margin-bottom: 12px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* Gramaj düğmeleri kompakt */
.urunler-kucuk .secenekler { gap: 4px; margin-bottom: 11px; }
.urunler-kucuk .sec-oge span { padding: 4px 9px; font-size: 11px; border-width: 1px; }

/* Fiyat ve sepet düğmesi alt alta */
.urunler-kucuk .urun-alt {
  flex-direction: column; align-items: stretch; gap: 9px;
  padding-top: 11px;
}
.urunler-kucuk .urun-fiyat { font-size: 1.12rem; text-align: center; }
.urunler-kucuk .ekle-form { width: 100%; }
.urunler-kucuk .buton-ekle {
  width: 100%; padding: 9px 10px; font-size: 12.5px; gap: 5px;
}
.urunler-kucuk .buton-ekle svg { width: 14px; height: 14px; }
.urunler-kucuk .urun-kapali { text-align: center; font-size: 11.5px; padding: 7px 10px; }

/* Duyarlı kırılımlar */
@media (max-width: 1400px) { .iz-6 { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 1200px) { .iz-6 { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px)  { .iz-6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px)  {
  .iz-6 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .urunler-kucuk .urun-govde { padding: 12px; }
  .urunler-kucuk .urun-govde p { -webkit-line-clamp: 2; }
}

/* =====================================================
   ŞUBE SEÇİM PENCERESİ
   ===================================================== */
.sube-modal-perde {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(59,42,30,.58); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility .28s ease;
}
.sube-modal-perde.acik { opacity: 1; visibility: visible; }

.sube-modal {
  position: relative; background: #fff; width: 100%; max-width: 920px;
  max-height: 90vh; overflow-y: auto;
  border-radius: var(--yuvarlak-l); padding: clamp(26px, 4vw, 40px);
  box-shadow: 0 30px 80px rgba(59,42,30,.4);
  transform: translateY(18px) scale(.97);
  transition: transform .32s cubic-bezier(.2,.8,.3,1);
}
.sube-modal-perde.acik .sube-modal { transform: translateY(0) scale(1); }

.sm-kapat {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 38px; height: 38px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--k-sis); color: var(--gri); font-size: 24px; line-height: 1;
  transition: all var(--gecis);
}
.sm-kapat:hover { background: var(--k-ana); color: #fff; }

.sm-ust { text-align: center; margin-bottom: clamp(22px, 3vw, 30px); }
.sm-ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 17px; margin-bottom: 14px;
  background: linear-gradient(140deg, var(--amber), var(--k-ana)); color: #fff;
  box-shadow: 0 10px 24px rgba(239,108,32,.3);
}
.sm-ikon svg { fill: currentColor; }
.sm-ust h2 { font-size: clamp(1.3rem, 2.6vw, 1.75rem); margin-bottom: 8px; }
.sm-ust p { color: var(--gri); max-width: 52ch; margin: 0 auto; font-size: 15px; }

/* Şubeler yan yana */
.sm-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sm-kart { margin: 0; }
.sm-kart button {
  width: 100%; height: 100%; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 5px;
  padding: 20px 20px 18px; border-radius: var(--yuvarlak);
  border: 1.5px solid var(--cizgi); background: #fff;
  transition: all var(--gecis);
}
.sm-kart button:hover {
  border-color: var(--k-ana); transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(168,63,20,.16);
}
.sm-kart.secili button { border-color: var(--k-ana); background: var(--k-sis); }

.smk-durum {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font-size: 11.5px; font-weight: 700; padding: 4px 11px; border-radius: 99px;
  margin-bottom: 4px;
}
.smk-durum i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.smk-durum.acik   { background: #eaf7ef; color: #216b41; }
.smk-durum.acik i { background: #2e9e62; }
.smk-durum.kapali   { background: #fdeeec; color: #9b2d28; }
.smk-durum.kapali i { background: #d93f30; }

.sm-kart strong {
  font-family: 'Outfit', sans-serif; font-size: 1.14rem; color: var(--koyu); line-height: 1.25;
}
.smk-adres { font-size: 13.5px; color: var(--gri); line-height: 1.5; }
.smk-saat {
  font-size: 12.5px; color: var(--k-koyu); font-weight: 600;
  background: var(--k-sis); padding: 4px 10px; border-radius: 99px; align-self: flex-start;
}
.sm-kart.secili .smk-saat { background: #fff; }
.smk-sec {
  margin-top: auto; padding-top: 12px;
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 13.5px;
  color: var(--k-ana); display: inline-flex; align-items: center; gap: 6px;
}
.smk-sec::after {
  content: ''; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m10 17 5-5-5-5v10Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m10 17 5-5-5-5v10Z'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform var(--gecis);
}
.sm-kart button:hover .smk-sec::after { transform: translateX(3px); }

@media (max-width: 820px) { .sm-izgara { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .sube-modal-perde { padding: 12px; align-items: flex-end; }
  .sube-modal { max-height: 92vh; }
  .sm-izgara { grid-template-columns: 1fr; gap: 10px; }
  .sm-kart button { padding: 16px; }
}

/* =====================================================
   YÖNETİCİ GİRİŞİ
   ===================================================== */
.us-yonetici {
  border: 0; background: none; cursor: pointer; font: inherit;
  color: inherit; display: inline-flex; align-items: center; gap: 7px;
  padding: 0; transition: color var(--gecis);
}
.us-yonetici:hover { color: #fff; }
.us-yonetici .ikon { fill: currentColor; }

.giris-modal-perde {
  position: fixed; inset: 0; z-index: 1010;
  background: rgba(59,42,30,.6); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; visibility: hidden; transition: opacity .26s ease, visibility .26s ease;
}
.giris-modal-perde.acik { opacity: 1; visibility: visible; }

.giris-modal {
  position: relative; background: #fff; width: 100%; max-width: 410px;
  border-radius: var(--yuvarlak-l); padding: clamp(28px, 4vw, 38px);
  box-shadow: 0 30px 80px rgba(59,42,30,.4); text-align: center;
  transform: translateY(16px) scale(.97);
  transition: transform .3s cubic-bezier(.2,.8,.3,1);
}
.giris-modal-perde.acik .giris-modal { transform: translateY(0) scale(1); }

.gm-kapat {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--k-sis); color: var(--gri); font-size: 22px; line-height: 1;
  transition: all var(--gecis);
}
.gm-kapat:hover { background: var(--k-ana); color: #fff; }

.gm-ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 17px; margin-bottom: 14px;
  background: linear-gradient(140deg, var(--sk-acik), var(--sk-orta)); color: #fff;
  box-shadow: 0 10px 24px rgba(232,64,60,.3);
}
.gm-ikon svg { fill: currentColor; }
.giris-modal h2 { font-size: 1.45rem; margin-bottom: 6px; }
.gm-alt { color: var(--gri); font-size: 14.5px; margin-bottom: 22px; }
.giris-modal .alan { text-align: left; }
.gm-gonder { width: 100%; margin-top: 6px; }
.gm-not { font-size: 12.5px; color: var(--gri-acik); margin: 14px 0 0; }

@media (max-width: 560px) {
  .giris-modal-perde { align-items: flex-end; padding: 12px; }
}