/* =========================================================
   ANTAKYA SOFRASI — Hatay yöresel lezzetleri
   Görsel dil: Antakya mozaikleri, baharat tezgâhı, bakır tepsi
   ========================================================= */

:root{
  /* renk */
  --nar:      #9E2B25;
  --nar-koyu: #7A1F1B;
  --kiremit:  #C75B39;
  --safran:   #E0A03C;
  --safran-a: #F3C77A;
  --zeytin:   #5C6B4A;
  --zeytin-k: #3F4A32;
  --koyu:     #241A16;
  --koyu-2:   #35251F;
  --krem:     #FAF3E7;
  --kum:      #F2E6D2;
  --kum-koyu: #E3D2B6;
  --gri:      #7C6F66;
  --beyaz:    #FFFDF9;

  /* tipografi */
  --baslik: "Playfair Display", "Georgia", serif;
  --govde:  "DM Sans", "Segoe UI", system-ui, sans-serif;

  /* ölçü */
  --en: 1240px;
  --r-s: 10px;
  --r-m: 18px;
  --r-l: 28px;
  --r-xl: 40px;

  /* gölge */
  --g-s: 0 2px 8px rgba(36,26,22,.07);
  --g-m: 0 10px 30px -8px rgba(36,26,22,.18);
  --g-l: 0 30px 70px -20px rgba(36,26,22,.32);

  /* geçiş */
  --e: cubic-bezier(.22,.9,.28,1);

  /* mozaik dokusu */
  --mozaik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23C75B39' stroke-width='1'%3E%3Cpath d='M28 0 L56 28 L28 56 L0 28 Z'/%3E%3Cpath d='M28 11 L45 28 L28 45 L11 28 Z'/%3E%3Ccircle cx='28' cy='28' r='5'/%3E%3Cpath d='M0 0 L11 11 M56 0 L45 11 M0 56 L11 45 M56 56 L45 45'/%3E%3C/g%3E%3C/svg%3E");
  --mozaik-acik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23E0A03C' stroke-width='1'%3E%3Cpath d='M28 0 L56 28 L28 56 L0 28 Z'/%3E%3Cpath d='M28 11 L45 28 L28 45 L11 28 Z'/%3E%3Ccircle cx='28' cy='28' r='5'/%3E%3C/g%3E%3C/svg%3E");
}

*,*::before,*::after{ box-sizing:border-box; }

/* [hidden] her zaman kazanmalı.
   Aksi halde display tanımlayan bir sınıf (.modal{display:grid} gibi)
   tarayıcının [hidden]{display:none} kuralını ezer ve öğe gizlenmiş
   sanılırken sayfanın üstünde durup tüm tıklamaları yutar. */
[hidden]{ display:none !important; }

html{ scroll-behavior:smooth; scroll-padding-top:110px; }

body{
  margin:0;
  font-family:var(--govde);
  font-size:16.5px;
  line-height:1.65;
  color:var(--koyu);
  background:var(--krem);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.kilit{ overflow:hidden; }

img,svg{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; }
input{ font:inherit; }
a{ color:inherit; text-decoration:none; }

h1,h2,h3,h4{ font-family:var(--baslik); font-weight:700; line-height:1.1; margin:0; letter-spacing:-.015em; }
h1{ font-size:clamp(2.6rem, 6vw, 4.6rem); }
h2{ font-size:clamp(2rem, 4.2vw, 3.2rem); }
h3{ font-size:1.28rem; }
em{ font-style:italic; color:var(--nar); }
p{ margin:0 0 1rem; }

.kapsa{ width:min(100% - 40px, var(--en)); margin-inline:auto; }
.kapsa.dar{ width:min(100% - 40px, 820px); }
.gizli{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ---------- reveal ----------
   .js olmadan hiçbir şey gizlenmez; JS çökerse sayfa yine okunur kalır. */
.js [data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--e), transform .8s var(--e); }
.js [data-reveal].gorunur{ opacity:1; transform:none; }
[data-gecikme="1"]{ transition-delay:.09s }
[data-gecikme="2"]{ transition-delay:.18s }
[data-gecikme="3"]{ transition-delay:.27s }
[data-gecikme="4"]{ transition-delay:.36s }

/* =========================================================
   BUTONLAR
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding:.92em 1.7em; border-radius:100px;
  font-weight:600; font-size:.97rem; letter-spacing:.01em;
  transition:transform .3s var(--e), box-shadow .3s var(--e), background .25s, color .25s;
  white-space:nowrap;
}
.btn svg{ width:18px; height:18px; transition:transform .3s var(--e); }
.btn:hover svg{ transform:translateX(4px); }

.btn-ana{
  background:linear-gradient(135deg, var(--nar), var(--nar-koyu));
  color:var(--krem);
  box-shadow:0 10px 26px -10px rgba(158,43,37,.75);
}
.btn-ana:hover{ transform:translateY(-2px); box-shadow:0 18px 36px -12px rgba(158,43,37,.8); }
.btn-ana.ters{ background:linear-gradient(135deg,var(--safran),#CE8A28); color:var(--koyu); box-shadow:0 10px 26px -10px rgba(224,160,60,.7); }
.btn-ana.genis{ width:100%; }

.btn-hayalet{
  border:1.5px solid rgba(36,26,22,.22);
  color:var(--koyu);
  background:rgba(255,255,255,.35);
  backdrop-filter:blur(6px);
}
.btn-hayalet:hover{ border-color:var(--koyu); background:var(--koyu); color:var(--krem); transform:translateY(-2px); }
.btn-hayalet.acik{ border-color:rgba(250,243,231,.35); color:var(--krem); background:transparent; }
.btn-hayalet.acik:hover{ background:var(--krem); color:var(--koyu); border-color:var(--krem); }

.ikon-btn{
  width:42px; height:42px; display:grid; place-items:center;
  border-radius:50%; transition:background .25s, color .25s, transform .25s var(--e);
  position:relative;
}
.ikon-btn svg{ width:21px; height:21px; }
.ikon-btn:hover{ background:rgba(158,43,37,.1); color:var(--nar); }
.ikon-btn.yuvarlak{ border:1.5px solid var(--kum-koyu); background:var(--beyaz); }
.ikon-btn.yuvarlak:hover{ background:var(--nar); border-color:var(--nar); color:var(--krem); }

/* =========================================================
   DUYURU + HEADER
   ========================================================= */
.duyuru{
  background:var(--koyu); color:var(--safran-a);
  font-size:.79rem; letter-spacing:.09em; text-transform:uppercase; font-weight:600;
  padding:9px 0; overflow:hidden; position:relative; z-index:60;
}
.duyuru-kayan{ display:flex; width:max-content; animation:kay 34s linear infinite; }
.duyuru-parca{ display:flex; gap:3rem; padding-right:3rem; }
.duyuru-parca span{ white-space:nowrap; }
@keyframes kay{ to{ transform:translateX(-50%); } }
.duyuru:hover .duyuru-kayan{ animation-play-state:paused; }

.ust{
  position:sticky; top:0; z-index:50;
  background:rgba(250,243,231,.82);
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:box-shadow .35s var(--e), border-color .35s, background .35s;
}
.ust.kaydi{ box-shadow:0 6px 24px -12px rgba(36,26,22,.28); border-bottom-color:var(--kum-koyu); background:rgba(250,243,231,.94); }
.ust-ic{ display:flex; align-items:center; gap:1.6rem; height:76px; transition:height .35s var(--e); }
.ust.kaydi .ust-ic{ height:66px; }

.logo{ display:flex; align-items:center; gap:.7rem; flex-shrink:0; }
.logo-isaret{ width:38px; height:38px; color:var(--nar); flex-shrink:0; transition:transform .5s var(--e); }
.logo:hover .logo-isaret{ transform:rotate(90deg); }
.logo-yazi{ display:flex; flex-direction:column; line-height:1.15; }
.logo-yazi strong{ font-family:var(--baslik); font-size:1.16rem; letter-spacing:-.01em; }
.logo-yazi small{ font-size:.66rem; letter-spacing:.15em; text-transform:uppercase; color:var(--gri); }
.logo.beyaz .logo-isaret{ color:var(--safran); }
.logo.beyaz .logo-yazi small{ color:rgba(250,243,231,.55); }

.menu{ display:flex; gap:.4rem; margin-inline:auto; }
.menu a{
  padding:.5rem .95rem; border-radius:100px; font-size:.94rem; font-weight:500;
  position:relative; transition:color .25s, background .25s;
}
.menu a::after{
  content:""; position:absolute; left:50%; bottom:5px; width:0; height:2px;
  background:var(--nar); border-radius:2px; transform:translateX(-50%);
  transition:width .3s var(--e);
}
.menu a:hover{ color:var(--nar); }
.menu a:hover::after{ width:22px; }

.ust-aksiyon{ display:flex; align-items:center; gap:.2rem; margin-left:auto; }
.sepet-rozet{
  position:absolute; top:2px; right:1px;
  min-width:19px; height:19px; padding:0 5px;
  background:var(--nar); color:#fff; border-radius:100px;
  font-size:.68rem; font-weight:700; display:grid; place-items:center;
  border:2px solid var(--krem);
  animation:pop .4s var(--e);
}
@keyframes pop{ 0%{ transform:scale(.2) } 60%{ transform:scale(1.25) } 100%{ transform:scale(1) } }

.menu-btn{ display:none; flex-direction:column; gap:5px; }
.menu-btn span{ display:block; width:20px; height:2px; background:currentColor; border-radius:2px; transition:transform .3s var(--e), opacity .2s; }
.menu-btn[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-btn[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; overflow:hidden;
  padding:clamp(3rem,7vw,6rem) 0 clamp(6rem,10vw,9rem);
  background:
    radial-gradient(90% 70% at 88% 8%, rgba(224,160,60,.30), transparent 62%),
    radial-gradient(70% 60% at 4% 92%, rgba(92,107,74,.22), transparent 60%),
    linear-gradient(168deg, var(--krem) 0%, var(--kum) 100%);
}
.hero-desen{ position:absolute; inset:0; background-image:var(--mozaik); opacity:.14; }
.hero-isik{
  position:absolute; width:640px; height:640px; right:-160px; top:-220px;
  background:radial-gradient(circle, rgba(199,91,57,.28), transparent 68%);
  filter:blur(30px); animation:nefes 11s ease-in-out infinite;
}
@keyframes nefes{ 50%{ transform:scale(1.14) translateY(24px); opacity:.75 } }

.hero-ic{ position:relative; display:grid; grid-template-columns:1.08fr .92fr; gap:3.5rem; align-items:center; }

.etiket{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.45em 1.05em; border-radius:100px;
  background:rgba(255,255,255,.72); border:1px solid var(--kum-koyu);
  font-size:.79rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--zeytin-k); margin-bottom:1.5rem; box-shadow:var(--g-s);
}
.etiket.etiket-acik{ background:rgba(250,243,231,.12); border-color:rgba(250,243,231,.28); color:var(--safran-a); }
.nokta{ width:7px; height:7px; border-radius:50%; background:var(--nar); box-shadow:0 0 0 0 rgba(158,43,37,.55); animation:atim 2s infinite; }
.etiket-acik .nokta{ background:var(--safran); box-shadow:0 0 0 0 rgba(224,160,60,.6); }
@keyframes atim{ 70%{ box-shadow:0 0 0 11px rgba(158,43,37,0) } 100%{ box-shadow:0 0 0 0 rgba(158,43,37,0) } }

.hero h1{ margin-bottom:1.4rem; }
.hero h1 em{ position:relative; display:inline-block; }
.hero h1 em::after{
  content:""; position:absolute; left:0; right:0; bottom:.06em; height:.16em;
  background:linear-gradient(90deg, var(--safran), rgba(224,160,60,0));
  border-radius:4px; z-index:-1;
}
.hero-alt{ font-size:1.1rem; max-width:52ch; color:#54453D; margin-bottom:2.1rem; }
.hero-alt strong{ color:var(--koyu); }
.hero-btnler{ display:flex; gap:.85rem; flex-wrap:wrap; margin-bottom:2.4rem; }

.hero-puan{ display:flex; align-items:center; gap:.85rem; }
.yildizlar{ color:var(--safran); letter-spacing:.15em; font-size:1.05rem; }
.hero-puan p{ margin:0; font-size:.9rem; color:var(--gri); }
.hero-puan strong{ color:var(--koyu); }

/* madalyon */
.hero-gorsel{ position:relative; display:grid; place-items:center; min-height:430px; }
.madalyon{
  position:relative; width:min(400px, 82vw); aspect-ratio:1;
  display:grid; place-items:center;
}
.madalyon::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg, var(--nar), var(--kiremit), var(--safran), var(--zeytin), var(--nar));
  opacity:.92; animation:don 26s linear infinite;
}
.madalyon::after{
  content:""; position:absolute; inset:13px; border-radius:50%;
  background:radial-gradient(circle at 34% 26%, #fffdf7, var(--kum) 74%);
  box-shadow:inset 0 3px 22px rgba(36,26,22,.16);
}
@keyframes don{ to{ transform:rotate(360deg) } }
.madalyon-halka{
  position:absolute; inset:-24px; border-radius:50%;
  border:1.5px dashed rgba(158,43,37,.32);
  animation:don 46s linear infinite reverse;
}
.madalyon-ic{
  position:relative; z-index:2; width:52%; color:var(--nar);
  animation:sekmece 5s ease-in-out infinite;
}
.madalyon-ic svg{ width:100%; height:auto; }
@keyframes sekmece{ 50%{ transform:translateY(-11px) } }

.yuzen{
  position:absolute; display:flex; align-items:center; gap:.7rem;
  background:rgba(255,253,249,.94); backdrop-filter:blur(8px);
  padding:.7rem 1.05rem .7rem .7rem; border-radius:100px;
  box-shadow:var(--g-m); border:1px solid rgba(255,255,255,.9);
  animation:suzul 6s ease-in-out infinite;
}
.yuzen div{ display:flex; flex-direction:column; line-height:1.2; }
.yuzen strong{ font-size:.86rem; }
.yuzen small{ font-size:.71rem; color:var(--gri); }
.yuzen-ikon{ width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--kum); color:var(--nar); }
.yuzen-ikon svg{ width:20px; height:20px; }
.yuzen-1{ top:6%; left:-4%; }
.yuzen-2{ bottom:14%; left:-8%; animation-delay:1.6s; }
.yuzen-3{ top:44%; right:-6%; animation-delay:3.1s; }
@keyframes suzul{ 50%{ transform:translateY(-13px) } }

.hero-dalga{
  position:absolute; left:0; right:0; bottom:-1px; height:70px;
  background:var(--krem);
  clip-path:polygon(0 62%, 6% 44%, 12% 62%, 18% 44%, 24% 62%, 30% 44%, 36% 62%, 42% 44%, 48% 62%, 54% 44%, 60% 62%, 66% 44%, 72% 62%, 78% 44%, 84% 62%, 90% 44%, 96% 62%, 100% 48%, 100% 100%, 0 100%);
}

/* =========================================================
   GÜVEN ŞERİDİ
   ========================================================= */
.guven{ background:var(--krem); padding:1rem 0 3.5rem; }
.guven-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.guven-oge{
  display:flex; align-items:center; gap:.9rem;
  padding:1.1rem 1.2rem; border-radius:var(--r-m);
  background:var(--beyaz); border:1px solid var(--kum-koyu);
  transition:transform .35s var(--e), box-shadow .35s var(--e), border-color .35s;
}
.guven-oge:hover{ transform:translateY(-4px); box-shadow:var(--g-m); border-color:var(--safran); }
.guven-oge div{ display:flex; flex-direction:column; line-height:1.3; }
.guven-oge strong{ font-size:.94rem; }
.guven-oge small{ font-size:.78rem; color:var(--gri); }
.guven-ikon{ width:44px; height:44px; flex-shrink:0; display:grid; place-items:center; border-radius:13px; background:linear-gradient(140deg,var(--kum),#fff); color:var(--nar); border:1px solid var(--kum-koyu); }
.guven-ikon svg{ width:23px; height:23px; }

/* =========================================================
   BÖLÜM BAŞLIKLARI
   ========================================================= */
.bolum{ padding:clamp(4rem,8vw,6.5rem) 0; }
.bolum-kum{ background:linear-gradient(180deg, var(--kum) 0%, var(--krem) 100%); }
.bolum-bas{ text-align:center; margin-bottom:3rem; }
.kicker{
  display:inline-block; font-size:.76rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--kiremit);
  margin-bottom:.7rem;
}
.kicker.acik{ color:var(--safran); }
.suslu{ display:flex; align-items:center; justify-content:center; gap:.8rem; margin-top:1.1rem; }
.suslu span{ width:60px; height:1px; background:linear-gradient(90deg,transparent,var(--kum-koyu)); }
.suslu span:last-child{ background:linear-gradient(90deg,var(--kum-koyu),transparent); }
.suslu i{ width:9px; height:9px; background:var(--safran); transform:rotate(45deg); }

/* =========================================================
   KATEGORİLER
   ========================================================= */
.kategori-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; }
.kategori-kart{
  position:relative; overflow:hidden; text-align:left;
  padding:1.6rem 1.4rem; border-radius:var(--r-l);
  background:var(--beyaz); border:1px solid var(--kum-koyu);
  transition:transform .4s var(--e), box-shadow .4s var(--e), border-color .3s;
  display:flex; flex-direction:column; gap:.85rem; align-items:flex-start;
}
.kategori-kart::before{
  content:""; position:absolute; inset:0;
  background-image:var(--mozaik); opacity:0; transition:opacity .4s;
}
.kategori-kart:hover{ transform:translateY(-6px); box-shadow:var(--g-m); border-color:var(--safran); }
.kategori-kart:hover::before{ opacity:.16; }
.kat-ikon{
  position:relative; width:56px; height:56px; display:grid; place-items:center;
  border-radius:17px; color:#fff; box-shadow:var(--g-s);
  transition:transform .45s var(--e);
}
.kategori-kart:hover .kat-ikon{ transform:rotate(-8deg) scale(1.07); }
.kat-ikon svg{ width:30px; height:30px; }
.kategori-kart h3{ position:relative; font-size:1.08rem; }
.kategori-kart small{ position:relative; font-size:.82rem; color:var(--gri); }
.kat-ok{ position:relative; margin-top:auto; font-size:.83rem; font-weight:600; color:var(--nar); display:flex; align-items:center; gap:.35rem; }
.kat-ok svg{ width:15px; height:15px; transition:transform .3s var(--e); }
.kategori-kart:hover .kat-ok svg{ transform:translateX(5px); }

/* =========================================================
   GÜNÜN FIRSATI
   ========================================================= */
.firsat{ position:relative; overflow:hidden; background:linear-gradient(150deg, var(--koyu) 0%, #4A2A20 55%, var(--nar-koyu) 100%); color:var(--krem); padding:clamp(3.5rem,7vw,5.5rem) 0; }
.firsat-desen{ position:absolute; inset:0; background-image:var(--mozaik-acik); opacity:.16; }
.firsat-ic{ position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:center; }
.firsat h2{ color:var(--krem); margin-bottom:1.1rem; }
.firsat h2 em{ color:var(--safran); }
.firsat p{ color:rgba(250,243,231,.78); max-width:48ch; margin-bottom:1.7rem; }

.geri-sayim{ display:flex; gap:.7rem; margin-bottom:1.6rem; }
.geri-sayim div{
  min-width:74px; padding:.65rem .5rem; text-align:center;
  background:rgba(250,243,231,.09); border:1px solid rgba(250,243,231,.18);
  border-radius:14px; backdrop-filter:blur(4px);
}
.geri-sayim b{ display:block; font-family:var(--baslik); font-size:1.75rem; line-height:1; color:var(--safran); font-variant-numeric:tabular-nums; }
.geri-sayim small{ font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:rgba(250,243,231,.6); }

.firsat-fiyat{ display:flex; align-items:baseline; gap:.8rem; margin-bottom:1.8rem; flex-wrap:wrap; }
.firsat-fiyat .eski{ text-decoration:line-through; color:rgba(250,243,231,.5); font-size:1.05rem; }
.firsat-fiyat .yeni{ font-family:var(--baslik); font-size:2.4rem; font-weight:700; color:var(--krem); }
.firsat-fiyat .indirim{ background:var(--safran); color:var(--koyu); font-size:.78rem; font-weight:700; padding:.3em .8em; border-radius:100px; }

.firsat-gorsel{ display:grid; place-items:center; }
.tepsi{
  width:min(360px,80vw); aspect-ratio:1; border-radius:50%;
  background:
    radial-gradient(circle at 34% 28%, #F6D89A, #C98B32 46%, #8E5A18 78%, #6A400E 100%);
  display:grid; place-items:center;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.7), inset 0 0 0 10px rgba(255,255,255,.13), inset 0 -14px 34px rgba(0,0,0,.34);
  animation:sekmece 6s ease-in-out infinite;
}
.tepsi span{ width:52%; color:var(--nar-koyu); filter:drop-shadow(0 6px 12px rgba(0,0,0,.28)); }
.tepsi svg{ width:100%; height:auto; }

/* =========================================================
   FİLTRE + ÜRÜN GRID
   ========================================================= */
.filtre-cubugu{ display:flex; align-items:center; gap:1.2rem; justify-content:space-between; flex-wrap:wrap; margin-bottom:1.2rem; }
.cipsler{ display:flex; gap:.5rem; flex-wrap:wrap; }
.cips{
  padding:.52em 1.1em; border-radius:100px; font-size:.87rem; font-weight:600;
  border:1.5px solid var(--kum-koyu); background:var(--beyaz); color:var(--gri);
  transition:all .28s var(--e);
}
.cips:hover{ border-color:var(--nar); color:var(--nar); transform:translateY(-2px); }
.cips.aktif{ background:var(--koyu); border-color:var(--koyu); color:var(--krem); }

.arama-kutu{
  display:flex; align-items:center; gap:.6rem;
  background:var(--beyaz); border:1.5px solid var(--kum-koyu);
  border-radius:100px; padding:.5rem 1.1rem; min-width:270px;
  transition:border-color .25s, box-shadow .25s;
}
.arama-kutu:focus-within{ border-color:var(--nar); box-shadow:0 0 0 4px rgba(158,43,37,.1); }
.arama-kutu svg{ width:18px; height:18px; color:var(--gri); flex-shrink:0; }
.arama-kutu input{ border:0; outline:0; background:none; width:100%; font-size:.93rem; padding:.25rem 0; }

.sonuc-bilgi{ font-size:.85rem; color:var(--gri); margin-bottom:1.6rem; }

.urun-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.3rem; }

.urun{
  position:relative; display:flex; flex-direction:column;
  background:var(--beyaz); border:1px solid var(--kum-koyu);
  border-radius:var(--r-l); overflow:hidden;
  transition:transform .42s var(--e), box-shadow .42s var(--e), border-color .3s;
  animation:girisi .5s var(--e) both;
}
@keyframes girisi{ from{ opacity:0; transform:translateY(18px) } }
.urun:hover{ transform:translateY(-7px); box-shadow:var(--g-l); border-color:var(--safran); }

.urun-gorsel{
  position:relative; aspect-ratio:1/.86; display:grid; place-items:center;
  overflow:hidden; cursor:pointer;
}
.urun-gorsel::before{
  content:""; position:absolute; inset:0; background-image:var(--mozaik);
  opacity:.22; transition:transform 1.1s var(--e), opacity .4s;
}
.urun:hover .urun-gorsel::before{ transform:scale(1.14) rotate(4deg); opacity:.34; }
.urun-ikon{ position:relative; width:44%; transition:transform .5s var(--e); }
.urun:hover .urun-ikon{ transform:scale(1.11) translateY(-4px); }
.urun-ikon svg{ width:100%; height:auto; }

.rozet{
  position:absolute; top:12px; left:12px; z-index:2;
  font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:.36em .8em; border-radius:100px; color:#fff; box-shadow:var(--g-s);
}
.rozet.yeni{ background:var(--zeytin); }
.rozet.cok{ background:var(--nar); }
.rozet.indirim{ background:var(--kiremit); }
.rozet.sinirli{ background:var(--koyu); }

.bak-btn{
  position:absolute; z-index:2; bottom:10px; left:50%; transform:translate(-50%,140%);
  background:rgba(36,26,22,.9); color:var(--krem); backdrop-filter:blur(6px);
  font-size:.8rem; font-weight:600; padding:.5em 1.1em; border-radius:100px;
  transition:transform .38s var(--e), background .25s;
}
.urun:hover .bak-btn{ transform:translate(-50%,0); }
.bak-btn:hover{ background:var(--nar); }

.urun-govde{ padding:1.05rem 1.15rem 1.2rem; display:flex; flex-direction:column; flex:1; gap:.45rem; }
.urun-ust{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.urun-kat{ font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--kiremit); font-weight:700; }
.urun-puan{ display:flex; align-items:center; gap:.22rem; font-size:.78rem; color:var(--gri); font-weight:600; }
.urun-puan svg{ width:13px; height:13px; color:var(--safran); }
.urun h3{ font-size:1.03rem; line-height:1.25; }
.urun-ozet{ font-size:.85rem; color:var(--gri); line-height:1.5; margin:0; flex:1; }

.urun-fiyat{ display:flex; align-items:baseline; gap:.5rem; margin-top:.35rem; }
.urun-fiyat b{ font-family:var(--baslik); font-size:1.35rem; }
.urun-fiyat s{ font-size:.85rem; color:var(--gri); }
.urun-fiyat span{ font-size:.76rem; color:var(--gri); margin-left:auto; }

.ekle-btn{
  margin-top:.75rem; width:100%; padding:.72em 1em; border-radius:100px;
  background:var(--kum); color:var(--koyu); font-weight:600; font-size:.9rem;
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  transition:background .25s, color .25s, transform .25s var(--e);
}
.ekle-btn svg{ width:17px; height:17px; }
.ekle-btn:hover{ background:var(--nar); color:var(--krem); }
.ekle-btn.eklendi{ background:var(--zeytin); color:#fff; }

/* ---- Vitrin (ana sayfa seçkisi) ---- */
.vitrin-alt{
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  margin-top:2.6rem; text-align:center;
}
.vitrin-alt .btn{ padding:1em 2.1rem; font-size:1rem; }
.vitrin-alt .kucuk{ color:var(--gri); }

/* ---- Tüm ürünler sayfası ---- */
.katalog-bas{ margin-bottom:1.4rem; }
.katalog-bas .sayfa-bas{ margin-bottom:.3rem; }
.katalog-bas .kucuk{ color:var(--gri); }

.daha-fazla{
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  margin-top:2.4rem; text-align:center;
}
.daha-fazla .btn{ padding:.95em 2.1rem; }
.daha-fazla .kucuk{ color:var(--gri); }

/* 274 ürün arasında gezinirken filtreye dönmek için
   sayfa başına kadar kaydırmak gerekmesin. */
.ic-sayfa .filtre-cubugu{
  position:sticky; top:74px; z-index:20;
  background:rgba(250,243,231,.94); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  padding:.85rem 0; margin-bottom:1.4rem;
  border-bottom:1px solid var(--kum-koyu);
}

/* ---- Ürün sayfası (/urun/<id>) ---- */
.urun-sayfa{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:2.4rem; align-items:start; margin-bottom:2.6rem;
}
.us-gorsel{
  border-radius:var(--yuvarlak, 18px); overflow:hidden; position:relative;
  aspect-ratio:1/1; display:grid; place-items:center;
}
.us-gorsel .urun-foto{ width:100%; height:100%; object-fit:cover; }
.us-gorsel .md-ikon{ width:52%; }
.us-govde h1{ font-size:clamp(1.7rem, 3.4vw, 2.5rem); margin:.3rem 0 .6rem; }
.us-puan{ display:flex; align-items:center; gap:.5rem; color:var(--gri); margin-bottom:1rem; }
.us-puan .yildizlar{ color:var(--altin, #E0A03C); }
.us-fiyat{ display:flex; align-items:baseline; gap:.6rem; margin:1rem 0; }
.us-fiyat b{ font-size:1.9rem; }
.us-fiyat s{ color:var(--gri); }
.us-fiyat small{ color:var(--gri); }
.us-ozet{ color:var(--gri); margin-bottom:1.4rem; }
.us-aksiyon{ display:flex; gap:.9rem; align-items:center; flex-wrap:wrap; margin-bottom:.7rem; }
.us-stok{ font-size:.92rem; color:var(--yesil, #5C6B4A); margin-bottom:1.2rem; }
.us-stok.yok{ color:var(--kirmizi, #9E2B25); }

.us-bolum{ margin:2.6rem 0; max-width:70ch; }
.us-bolum h2{ font-size:1.4rem; margin-bottom:.9rem; }
.us-bolum p{ color:var(--gri); }
.us-bolum .urun-grid{ max-width:none; }
#usBenzerBolum{ max-width:none; }

.us-yorum{
  border-top:1px solid var(--kum-koyu); padding:1.1rem 0;
}
.us-yorum-bas{ display:flex; align-items:center; gap:.7rem; margin-bottom:.4rem; }
.us-yorum-bas .yildizlar{ color:var(--altin, #E0A03C); }
.us-yorum small{ color:var(--gri); font-size:.85rem; }

@media (max-width:860px){
  .urun-sayfa{ grid-template-columns:1fr; gap:1.6rem; }
}

/* Kart başlığı artık bağlantı; rengi metinle aynı kalsın. */
.urun-govde h3 a{ color:inherit; text-decoration:none; }
.urun-govde h3 a:hover{ text-decoration:underline; }

.bos-durum{ text-align:center; padding:4rem 1rem; }
.bos-durum span{ display:block; width:74px; margin:0 auto 1.2rem; color:var(--kum-koyu); }
.bos-durum p{ color:var(--gri); margin-bottom:1.4rem; }

/* =========================================================
   HİKAYE
   ========================================================= */
.hikaye{ position:relative; background:linear-gradient(160deg, var(--zeytin-k), #2C3324 70%, var(--koyu)); color:var(--krem); padding:clamp(4rem,8vw,6.5rem) 0; overflow:hidden; }
.hikaye::before{ content:""; position:absolute; inset:0; background-image:var(--mozaik-acik); opacity:.12; }
.hikaye-ic{ position:relative; display:grid; grid-template-columns:.95fr 1.05fr; gap:3.5rem; align-items:center; }
.hikaye h2{ color:var(--krem); margin-bottom:1.2rem; }
.hikaye h2 em{ color:var(--safran); }
.hikaye p{ color:rgba(250,243,231,.76); max-width:54ch; }

.mozaik-pano{
  display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem;
  transform:rotate(-3deg);
}
.mozaik-kare{
  aspect-ratio:1; display:grid; place-items:center; border-radius:16px;
  background:rgba(250,243,231,.07); border:1px solid rgba(250,243,231,.14);
  color:var(--safran-a); transition:all .4s var(--e);
}
.mozaik-kare span{ width:52%; }
.mozaik-kare svg{ width:100%; height:auto; }
.mozaik-kare:hover{ background:var(--safran); color:var(--koyu); transform:scale(1.07) rotate(3deg); }
.mozaik-kare.buyuk{ grid-column:span 2; grid-row:span 2; background:rgba(224,160,60,.16); border-color:rgba(224,160,60,.34); }
.mozaik-kare.buyuk span{ width:44%; }

.sayaclar{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin:2rem 0; }
.sayaclar div{ border-left:2px solid rgba(224,160,60,.45); padding-left:.85rem; }
.sayaclar b{ display:block; font-family:var(--baslik); font-size:2.05rem; color:var(--safran); line-height:1; font-variant-numeric:tabular-nums; }
.sayaclar small{ font-size:.78rem; color:rgba(250,243,231,.62); }

/* =========================================================
   ADIMLAR
   ========================================================= */
.adim-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.adim{
  position:relative; padding:2.2rem 1.6rem 1.8rem; border-radius:var(--r-l);
  background:var(--beyaz); border:1px solid var(--kum-koyu); overflow:hidden;
  transition:transform .4s var(--e), box-shadow .4s var(--e);
}
.adim:hover{ transform:translateY(-6px); box-shadow:var(--g-m); }
.adim-no{
  position:absolute; top:.6rem; right:1.1rem;
  font-family:var(--baslik); font-size:3.6rem; font-weight:800;
  color:var(--kum); line-height:1;
}
.adim-ikon{ display:block; width:52px; height:52px; color:var(--nar); margin-bottom:1.1rem; }
.adim-ikon svg{ width:100%; height:100%; }
.adim h3{ margin-bottom:.5rem; }
.adim p{ font-size:.9rem; color:var(--gri); margin:0; }

/* =========================================================
   YORUMLAR
   ========================================================= */
.yorum-sarma{ overflow:hidden; }
.yorum-ray{ display:flex; transition:transform .6s var(--e); }
.yorum{
  flex:0 0 calc(100% / 3); padding:0 .65rem; box-sizing:border-box;
}
.yorum-ic{
  height:100%; background:var(--beyaz); border:1px solid var(--kum-koyu);
  border-radius:var(--r-l); padding:1.8rem 1.6rem; position:relative;
  display:flex; flex-direction:column; gap:.9rem;
}
.yorum-ic::before{
  content:"”"; position:absolute; top:-.1em; right:.4em;
  font-family:var(--baslik); font-size:6rem; color:var(--kum); line-height:1;
}
.yorum-yildiz{ color:var(--safran); letter-spacing:.13em; font-size:.95rem; }
.yorum-metin{ position:relative; font-size:.96rem; line-height:1.7; margin:0; flex:1; }
.yorum-kisi{ display:flex; align-items:center; gap:.75rem; padding-top:.6rem; border-top:1px solid var(--kum); }
.yorum-av{
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center; font-family:var(--baslik); font-weight:700;
  color:#fff; font-size:1rem;
}
.yorum-kisi div{ display:flex; flex-direction:column; line-height:1.25; }
.yorum-kisi strong{ font-size:.9rem; }
.yorum-kisi small{ font-size:.77rem; color:var(--gri); }

.yorum-kontrol{ display:flex; align-items:center; justify-content:center; gap:1.1rem; margin-top:2rem; }
.yorum-noktalar{ display:flex; gap:.45rem; }
.yorum-noktalar button{ width:8px; height:8px; border-radius:50%; background:var(--kum-koyu); transition:all .3s var(--e); }
.yorum-noktalar button.aktif{ width:26px; border-radius:100px; background:var(--nar); }

/* =========================================================
   HEDİYE
   ========================================================= */
.hediye{ position:relative; overflow:hidden; background:linear-gradient(135deg,#5A1D19,var(--nar) 60%,var(--kiremit)); color:var(--krem); padding:clamp(4rem,8vw,6rem) 0; }
.hediye-desen{ position:absolute; inset:0; background-image:var(--mozaik-acik); opacity:.17; }
.hediye-ic{ position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:center; }
.hediye h2{ color:var(--krem); margin-bottom:1.1rem; }
.hediye h2 em{ color:var(--safran-a); }
.hediye p{ color:rgba(250,243,231,.8); max-width:48ch; margin-bottom:1.8rem; }
.hediye-btnler{ display:flex; gap:.8rem; flex-wrap:wrap; }
.hediye .btn-ana{ background:var(--krem); color:var(--nar-koyu); box-shadow:0 14px 34px -12px rgba(0,0,0,.5); }
.hediye .btn-ana:hover{ background:#fff; }

/* Sekizli ürün seçkisi. Bilinçli olarak kutu/sandık çizmiyor —
   fiziksel bir ahşap kutu yok, görsel de bunu ima etmemeli. */
.hediye-kutu{ position:relative; }
.kutu-govde{
  position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:.7rem;
  padding:1.1rem; border-radius:var(--r-l);
  background:rgba(250,243,231,.10);
  border:1px solid rgba(250,243,231,.22);
  backdrop-filter:blur(4px);
  box-shadow:0 24px 50px -22px rgba(0,0,0,.5);
}
.kutu-govde::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background-image:var(--mozaik-acik); opacity:.18; pointer-events:none;
}
.kutu-govde span{
  position:relative; aspect-ratio:1; display:grid; place-items:center; border-radius:14px;
  background:rgba(250,243,231,.93); color:var(--nar);
  transition:transform .35s var(--e), background .3s;
}
.kutu-govde span svg{ width:58%; height:auto; }
.kutu-govde span:hover{ transform:translateY(-5px) scale(1.06); background:var(--safran-a); }

/* =========================================================
   SSS
   ========================================================= */
.sss-liste{ display:flex; flex-direction:column; gap:.7rem; }
.sss-oge{ background:var(--beyaz); border:1px solid var(--kum-koyu); border-radius:var(--r-m); overflow:hidden; transition:border-color .3s, box-shadow .3s; }
.sss-oge.acik{ border-color:var(--safran); box-shadow:var(--g-s); }
.sss-bas{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.1rem 1.35rem; text-align:left; font-weight:600; font-size:1rem;
}
.sss-bas:hover{ color:var(--nar); }
.sss-art{ flex-shrink:0; width:24px; height:24px; display:grid; place-items:center; border-radius:50%; background:var(--kum); transition:transform .35s var(--e), background .3s; }
.sss-art svg{ width:14px; height:14px; }
.sss-oge.acik .sss-art{ transform:rotate(45deg); background:var(--safran); }
.sss-govde{ max-height:0; overflow:hidden; transition:max-height .4s var(--e); }
.sss-govde p{ padding:0 1.35rem 1.25rem; margin:0; color:var(--gri); font-size:.94rem; line-height:1.7; }

/* =========================================================
   BÜLTEN
   ========================================================= */
.bulten{ background:var(--kum); padding:clamp(3rem,6vw,4.5rem) 0; }
.bulten-ic{
  display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:center;
  background:var(--beyaz); border:1px solid var(--kum-koyu);
  border-radius:var(--r-xl); padding:clamp(1.8rem,4vw,3rem);
  box-shadow:var(--g-m);
}
.bulten h2{ font-size:clamp(1.7rem,3vw,2.3rem); margin-bottom:.6rem; }
.bulten p{ color:var(--gri); margin:0; font-size:.95rem; }
.bulten-form{ display:flex; gap:.6rem; flex-wrap:wrap; position:relative; }
.bulten-form input{
  flex:1; min-width:200px; padding:.92em 1.3em; border-radius:100px;
  border:1.5px solid var(--kum-koyu); background:var(--krem); outline:0;
  transition:border-color .25s, box-shadow .25s;
}
.bulten-form input:focus{ border-color:var(--nar); box-shadow:0 0 0 4px rgba(158,43,37,.1); }
.form-not{ flex-basis:100%; margin:0; font-size:.85rem; min-height:1.2em; }
.form-not.iyi{ color:var(--zeytin); }
.form-not.kotu{ color:var(--nar); }

/* =========================================================
   FOOTER
   ========================================================= */
.alt{ background:var(--koyu); color:rgba(250,243,231,.72); padding:3.5rem 0 1.5rem; }
.alt-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:2.5rem; padding-bottom:2.5rem; }
.alt-marka p{ font-size:.9rem; max-width:34ch; margin:1rem 0 1.2rem; }
.sosyal{ display:flex; gap:.5rem; }
.sosyal a{
  width:38px; height:38px; display:grid; place-items:center; border-radius:50%;
  border:1px solid rgba(250,243,231,.2); transition:all .3s var(--e);
}
.sosyal a svg{ width:18px; height:18px; }
.sosyal a:hover{ background:var(--safran); color:var(--koyu); border-color:var(--safran); transform:translateY(-3px); }

.alt-sutun{ display:flex; flex-direction:column; gap:.6rem; }
.alt-sutun h4{ font-family:var(--govde); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--safran); margin-bottom:.4rem; }
.alt-sutun a, .alt-sutun span{ font-size:.9rem; transition:color .25s, transform .25s var(--e); }
.alt-sutun a:hover{ color:var(--krem); transform:translateX(3px); }
.calisma{ color:rgba(250,243,231,.45)!important; font-size:.83rem!important; }

.alt-son{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding-top:1.5rem; border-top:1px solid rgba(250,243,231,.12);
  font-size:.83rem; color:rgba(250,243,231,.48);
}
.alt-son p{ margin:0; }

/* =========================================================
   SEPET ÇEKMECESİ
   ========================================================= */
.perde{
  position:fixed; inset:0; z-index:80;
  background:rgba(36,26,22,.55); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .35s var(--e);
}
.perde.acik{ opacity:1; }

.sepet{
  position:fixed; top:0; right:0; bottom:0; z-index:90;
  width:min(430px,100%); background:var(--krem);
  display:flex; flex-direction:column;
  transform:translateX(102%); transition:transform .45s var(--e);
  box-shadow:-24px 0 60px -20px rgba(36,26,22,.4);
}
.sepet.acik{ transform:none; }
.sepet-bas{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.2rem 1.4rem; border-bottom:1px solid var(--kum-koyu);
}
.sepet-bas h3{ font-size:1.25rem; }

.kargo-bar{ padding:.9rem 1.4rem; background:var(--kum); border-bottom:1px solid var(--kum-koyu); }
.kargo-bar p{ margin:0 0 .5rem; font-size:.82rem; font-weight:600; }
.kargo-bar .cubuk{ height:6px; border-radius:100px; background:var(--kum-koyu); overflow:hidden; }
.kargo-bar i{ display:block; height:100%; width:0; border-radius:100px; background:linear-gradient(90deg,var(--safran),var(--zeytin)); transition:width .5s var(--e); }

.sepet-govde{ flex:1; overflow-y:auto; padding:1.1rem 1.4rem; display:flex; flex-direction:column; gap:.9rem; }
.sepet-bos{ text-align:center; padding:3rem 1rem; color:var(--gri); }
.sepet-bos span{ display:block; width:70px; margin:0 auto 1rem; color:var(--kum-koyu); }
.sepet-bos h4{ font-family:var(--baslik); font-size:1.15rem; color:var(--koyu); margin-bottom:.4rem; }

.sepet-satir{ display:flex; gap:.85rem; align-items:center; animation:girisi .35s var(--e) both; }
.sepet-gorsel{
  width:64px; height:64px; flex-shrink:0; border-radius:14px;
  display:grid; place-items:center; position:relative; overflow:hidden;
}
.sepet-gorsel::before{ content:""; position:absolute; inset:0; background-image:var(--mozaik); opacity:.25; }
.sepet-gorsel svg{ position:relative; width:56%; height:auto; }
.sepet-bilgi{ flex:1; min-width:0; }
.sepet-bilgi h4{ font-family:var(--govde); font-size:.9rem; font-weight:600; line-height:1.3; margin:0 0 .15rem; }
.sepet-bilgi small{ font-size:.78rem; color:var(--gri); }
.adet{ display:flex; align-items:center; gap:.2rem; margin-top:.35rem; }
.adet button{
  width:24px; height:24px; border-radius:7px; background:var(--kum);
  display:grid; place-items:center; font-size:.9rem; font-weight:700; line-height:1;
  transition:background .2s, color .2s;
}
.adet button:hover{ background:var(--nar); color:#fff; }
.adet b{ min-width:26px; text-align:center; font-size:.88rem; font-variant-numeric:tabular-nums; }
.sepet-sag{ text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:.4rem; }
.sepet-sag b{ font-size:.95rem; white-space:nowrap; }
.sil-btn{ font-size:.75rem; color:var(--gri); text-decoration:underline; }
.sil-btn:hover{ color:var(--nar); }

.sepet-alt{ padding:1.2rem 1.4rem 1.5rem; border-top:1px solid var(--kum-koyu); background:var(--beyaz); }
.sepet-alt .satir{ display:flex; justify-content:space-between; font-size:.92rem; margin-bottom:.5rem; color:var(--gri); }
.sepet-alt .satir b{ color:var(--koyu); }
.sepet-alt .toplam{ font-size:1.05rem; padding-top:.6rem; border-top:1px dashed var(--kum-koyu); margin-bottom:1rem; }
.sepet-alt .toplam b{ font-family:var(--baslik); font-size:1.45rem; }
.sepet-not{ font-size:.76rem; color:var(--gri); text-align:center; margin:.7rem 0 0; }

/* =========================================================
   ÜRÜN MODAL
   ========================================================= */
.modal{
  position:fixed; inset:0; z-index:100; display:grid; place-items:center;
  padding:20px; background:rgba(36,26,22,.6); backdrop-filter:blur(5px);
  opacity:0; transition:opacity .3s var(--e);
}
.modal.acik{ opacity:1; }
.modal-ic{
  width:min(900px,100%); max-height:88vh; overflow-y:auto;
  background:var(--krem); border-radius:var(--r-xl);
  box-shadow:var(--g-l); transform:scale(.94) translateY(14px);
  transition:transform .38s var(--e);
}
.modal.acik .modal-ic{ transform:none; }

.md-grid{ display:grid; grid-template-columns:.9fr 1.1fr; }
.md-gorsel{ position:relative; display:grid; place-items:center; padding:2.5rem; min-height:320px; border-radius:var(--r-xl) 0 0 var(--r-xl); overflow:hidden; }
.md-gorsel::before{ content:""; position:absolute; inset:0; background-image:var(--mozaik); opacity:.26; }
.md-gorsel span{ position:relative; width:56%; }
.md-gorsel svg{ width:100%; height:auto; }
.md-kapat{
  position:absolute; top:14px; right:14px; z-index:3;
  width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.9);
  display:grid; place-items:center; box-shadow:var(--g-s);
}
.md-kapat svg{ width:17px; height:17px; }
.md-kapat:hover{ background:var(--nar); color:#fff; }

.md-govde{ padding:2.2rem 2.2rem 2rem; }
.md-govde .urun-kat{ display:block; margin-bottom:.5rem; }
.md-govde h2{ font-size:1.9rem; margin-bottom:.6rem; }
.md-puan{ display:flex; align-items:center; gap:.5rem; font-size:.86rem; color:var(--gri); margin-bottom:1rem; }
.md-puan .yildizlar{ font-size:.95rem; }
.md-govde > p{ font-size:.96rem; color:#54453D; line-height:1.75; }
.md-ozellik{ display:flex; flex-wrap:wrap; gap:.5rem; margin:1.2rem 0 1.4rem; }
.md-ozellik span{
  font-size:.79rem; font-weight:600; padding:.4em .9em; border-radius:100px;
  background:var(--kum); color:var(--zeytin-k);
}
.md-fiyat{ display:flex; align-items:baseline; gap:.7rem; margin-bottom:1.2rem; }
.md-fiyat b{ font-family:var(--baslik); font-size:2.1rem; }
.md-fiyat s{ color:var(--gri); }
.md-fiyat small{ color:var(--gri); font-size:.85rem; }
.md-aksiyon{ display:flex; gap:.7rem; align-items:center; flex-wrap:wrap; }
.md-adet{ display:flex; align-items:center; gap:.4rem; border:1.5px solid var(--kum-koyu); border-radius:100px; padding:.32rem .5rem; background:var(--beyaz); }
.md-adet button{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-weight:700; transition:background .2s,color .2s; }
.md-adet button:hover{ background:var(--nar); color:#fff; }
.md-adet b{ min-width:28px; text-align:center; font-variant-numeric:tabular-nums; }
.md-stok{ font-size:.82rem; color:var(--zeytin); font-weight:600; margin-top:1rem; display:flex; align-items:center; gap:.4rem; }
.md-stok::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--zeytin); }

/* =========================================================
   ARAMA KATMANI
   ========================================================= */
.arama-katman{
  position:fixed; inset:0; z-index:95; padding:12vh 20px 20px;
  background:rgba(36,26,22,.55); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .3s var(--e);
}
.arama-katman.acik{ opacity:1; }
.arama-panel{ width:min(660px,100%); margin-inline:auto; }
.arama-kutu.buyuk{
  padding:.7rem 1rem .7rem 1.3rem; background:var(--krem);
  border-color:transparent; box-shadow:var(--g-l); min-width:0;
}
.arama-kutu.buyuk input{ font-size:1.05rem; }
.arama-sonuc{ margin-top:.8rem; max-height:52vh; overflow-y:auto; display:flex; flex-direction:column; gap:.4rem; }
.as-oge{
  display:flex; align-items:center; gap:.85rem; width:100%; text-align:left;
  background:var(--krem); border-radius:var(--r-m); padding:.65rem .9rem;
  transition:transform .25s var(--e), background .2s;
}
.as-oge:hover{ transform:translateX(4px); background:var(--beyaz); }
.as-gorsel{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center; flex-shrink:0; }
.as-gorsel svg{ width:58%; height:auto; }
.as-oge div{ flex:1; min-width:0; }
.as-oge strong{ display:block; font-size:.92rem; }
.as-oge small{ font-size:.79rem; color:var(--gri); }
.as-oge b{ font-family:var(--baslik); font-size:1.05rem; }
.as-bos{ text-align:center; color:rgba(250,243,231,.8); padding:2rem; font-size:.95rem; }

/* =========================================================
   TOAST
   ========================================================= */
.toast-alan{ position:fixed; left:50%; bottom:26px; z-index:120; transform:translateX(-50%); display:flex; flex-direction:column; gap:.5rem; align-items:center; pointer-events:none; }
.toast{
  display:flex; align-items:center; gap:.7rem;
  background:var(--koyu); color:var(--krem);
  padding:.8rem 1.3rem; border-radius:100px; box-shadow:var(--g-l);
  font-size:.9rem; font-weight:500;
  animation:toastGir .45s var(--e), toastCik .4s var(--e) 2.6s forwards;
}
.toast span{ width:22px; height:22px; display:grid; place-items:center; border-radius:50%; background:var(--zeytin); flex-shrink:0; }
.toast span svg{ width:13px; height:13px; }
@keyframes toastGir{ from{ opacity:0; transform:translateY(22px) scale(.94) } }
@keyframes toastCik{ to{ opacity:0; transform:translateY(-10px) scale(.96) } }

/* =========================================================
   DUYARLI
   ========================================================= */
@media (max-width:1080px){
  .urun-grid{ grid-template-columns:repeat(3,1fr); }
  .kategori-grid{ grid-template-columns:repeat(3,1fr); }
  .guven-grid{ grid-template-columns:repeat(2,1fr); }
  .yorum{ flex:0 0 50%; }
  .alt-grid{ grid-template-columns:1fr 1fr; gap:2rem; }
}

@media (max-width:900px){
  .menu{
    position:fixed; inset:0 0 0 auto; width:min(320px,84%);
    background:var(--krem); flex-direction:column; gap:.2rem;
    padding:6rem 1.5rem 2rem; z-index:45;
    transform:translateX(102%); transition:transform .4s var(--e);
    box-shadow:-20px 0 50px -20px rgba(36,26,22,.35);
    margin:0;
  }
  .menu.acik{ transform:none; }
  .menu a{ font-size:1.1rem; padding:.8rem 1rem; border-bottom:1px solid var(--kum); border-radius:0; }
  .menu-btn{ display:flex; }

  .hero-ic{ grid-template-columns:1fr; text-align:center; }
  .hero-metin{ order:1; }
  .hero-gorsel{ order:0; min-height:340px; }
  .hero-alt{ margin-inline:auto; }
  .hero-btnler, .hero-puan{ justify-content:center; }
  .yuzen-1{ left:0; } .yuzen-2{ left:-2%; } .yuzen-3{ right:0; }

  .firsat-ic, .hikaye-ic, .hediye-ic, .bulten-ic{ grid-template-columns:1fr; gap:2.5rem; }
  .hikaye-gorsel{ order:1; }
  .md-grid{ grid-template-columns:1fr; }
  .md-gorsel{ border-radius:var(--r-xl) var(--r-xl) 0 0; min-height:220px; }
  .adim-grid{ grid-template-columns:1fr; }
}

@media (max-width:720px){
  body{ font-size:16px; }
  .urun-grid, .kategori-grid{ grid-template-columns:repeat(2,1fr); }
  .yorum{ flex:0 0 100%; }
  .sayaclar{ grid-template-columns:repeat(2,1fr); gap:1.2rem; }
  .filtre-cubugu{ flex-direction:column; align-items:stretch; }
  .ic-sayfa .filtre-cubugu{ top:64px; }
  .cipsler{ overflow-x:auto; flex-wrap:nowrap; padding-bottom:.4rem; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .cipsler::-webkit-scrollbar{ display:none; }
  .cips{ flex-shrink:0; }
  .arama-kutu{ min-width:0; }
  .alt-grid{ grid-template-columns:1fr; }
  .bak-btn{ transform:translate(-50%,0); font-size:.75rem; bottom:8px; }
  .geri-sayim div{ min-width:66px; }
  .md-govde{ padding:1.6rem; }
}

@media (max-width:460px){
  .urun-grid, .kategori-grid, .guven-grid{ grid-template-columns:1fr; }
  .hero-btnler .btn{ width:100%; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
  .js [data-reveal]{ opacity:1; transform:none; }
}

/* =========================================================
   İÇ SAYFALAR — ödeme, takip, hesabım
   ========================================================= */
.ic-sayfa{ background:linear-gradient(180deg, var(--kum) 0%, var(--krem) 340px); }
.sayfa{ padding:2rem 0 4rem; }
.sayfa.dar{ width:min(100% - 40px, 760px); }
.sayfa-bas{ font-size:clamp(1.7rem,3.4vw,2.4rem); margin-bottom:.5rem; }

.kirinti{ display:flex; align-items:center; gap:.5rem; font-size:.85rem; color:var(--gri); margin-bottom:1.4rem; }
.kirinti a:hover{ color:var(--nar); }
.kirinti b{ color:var(--koyu); font-weight:600; }

.kart{
  background:var(--beyaz); border:1px solid var(--kum-koyu);
  border-radius:var(--r-l); padding:1.5rem; margin-bottom:1.1rem;
}
.kart-bas{ display:flex; align-items:center; gap:.8rem; margin-bottom:1.1rem; flex-wrap:wrap; }
.kart-bas h2{ font-size:1.2rem; flex:1; }
.kucuk{ font-size:.88rem; color:var(--gri); }
.kucuk a{ color:var(--nar); text-decoration:underline; }
.orta{ text-align:center; }
.yesil{ color:var(--zeytin); }

/* form alanları */
.alan-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.alan-grid label{ display:flex; flex-direction:column; gap:.35rem; font-size:.83rem; font-weight:600; color:var(--gri); }
.alan-grid label.tam, .alan-grid .tam{ grid-column:1/-1; }
.alan-grid label small{ font-weight:400; }
.zorunlu{ color:var(--nar); }
.alan-grid input, .alan-grid textarea, .secim{
  width:100%; padding:.7em 1em; border:1.5px solid var(--kum-koyu); border-radius:12px;
  background:var(--krem); outline:0; font:inherit; color:var(--koyu);
  transition:border-color .2s, box-shadow .2s;
}
.alan-grid input:focus, .alan-grid textarea:focus, .secim:focus{
  border-color:var(--nar); box-shadow:0 0 0 4px rgba(158,43,37,.1);
}
.alan-grid textarea{ resize:vertical; }
.secim{
  width:auto; cursor:pointer; padding:.55em 2.2em .55em 1em; border-radius:100px;
  background-repeat:no-repeat; background-position:right 1em center; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237C6F66' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.form-hata{ color:var(--nar); font-size:.88rem; font-weight:600; margin:.6rem 0 0; }
.btn.buyuk{ padding:1.05em 1.8em; font-size:1.03rem; }
.btn.ufak{ padding:.45em .95em; font-size:.82rem; }

/* ödeme yerleşimi */
.odeme-grid{ display:grid; grid-template-columns:1fr 380px; gap:1.4rem; align-items:start; }
.ozet-sutun{ position:sticky; top:100px; }
.secenek{
  display:flex; gap:.8rem; align-items:flex-start; padding:1rem 1.1rem; cursor:pointer;
  border:1.5px solid var(--kum-koyu); border-radius:var(--r-m); margin-bottom:.6rem;
  transition:border-color .2s, background .2s;
}
.secenek:hover{ border-color:var(--safran); }
.secenek:has(input:checked){ border-color:var(--nar); background:rgba(158,43,37,.04); }
.secenek input{ margin-top:.3rem; accent-color:var(--nar); }
.secenek span{ display:flex; flex-direction:column; gap:.15rem; }
.secenek small{ color:var(--gri); font-size:.85rem; }
.guvenlik-not{
  display:flex; gap:.6rem; align-items:flex-start; margin:1rem 0 0;
  font-size:.83rem; color:var(--gri); background:var(--kum); padding:.85rem 1rem; border-radius:var(--r-m);
}
.guvenlik-not svg{ width:20px; height:20px; flex-shrink:0; color:var(--zeytin); }

/* sipariş özeti */
.ozet-satir{ display:flex; align-items:center; gap:.8rem; padding:.65rem 0; border-bottom:1px solid var(--kum); }
.ozet-satir:last-of-type{ border-bottom:0; }
.ozet-satir > div{ flex:1; min-width:0; }
.ozet-satir strong{ display:block; font-size:.9rem; font-weight:600; }
.ozet-satir small{ color:var(--gri); font-size:.79rem; }
.ozet-satir > b{ white-space:nowrap; font-size:.92rem; }
.ozet-gorsel{
  position:relative; width:52px; height:52px; border-radius:13px; flex-shrink:0;
  display:grid; place-items:center;
}
.ozet-gorsel svg{ width:56%; height:auto; }
.ozet-gorsel i{
  position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; padding:0 5px;
  background:var(--koyu); color:var(--krem); border-radius:100px; font-style:normal;
  font-size:.7rem; font-weight:700; display:grid; place-items:center;
}
.ozet-toplam{ margin-top:1rem; padding-top:.9rem; border-top:1px dashed var(--kum-koyu); }
.ozet-toplam .satir{ display:flex; justify-content:space-between; font-size:.92rem; margin-bottom:.45rem; color:var(--gri); }
.ozet-toplam .satir b{ color:var(--koyu); }
.ozet-toplam .toplam{ font-size:1.05rem; padding-top:.6rem; border-top:1px solid var(--kum); margin-top:.6rem; }
.ozet-toplam .toplam b{ font-family:var(--baslik); font-size:1.4rem; }

.kupon-alan{ display:flex; gap:.5rem; margin-top:1rem; }
.kupon-alan .arama-kutu{ flex:1; min-width:0; padding:.32rem .9rem; }
.kupon-alan input{ border:0; outline:0; background:none; width:100%; font-size:.9rem; }
.kupon-not{ font-size:.83rem; margin:.5rem 0 0; min-height:1.1em; }
.kupon-not.iyi{ color:var(--zeytin); font-weight:600; }
.kupon-not.kotu{ color:var(--nar); }
.soguk-uyari{ font-size:.82rem; color:var(--gri); background:var(--kum); padding:.7rem .9rem; border-radius:12px; margin:.9rem 0 0; }
.etiket-mini{ font-size:.78rem; background:var(--kum); padding:.3em .8em; border-radius:100px; color:var(--zeytin-k); }

/* başarı ekranı */
.basari{ text-align:center; padding:2.5rem 1.8rem; }
.basari-ikon{
  width:64px; height:64px; margin:0 auto 1.2rem; color:#fff; background:var(--zeytin);
  border-radius:50%; display:grid; place-items:center; padding:16px;
}
.basari h1{ font-size:2rem; margin-bottom:.5rem; }
.basari-no{ font-size:1.05rem; }
.basari-no b{ font-family:var(--baslik); font-size:1.35rem; color:var(--nar); }
.basari-btnler{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-top:1.6rem; }

.havale-kutu{ text-align:left; background:var(--kum); border-radius:var(--r-m); padding:1.2rem 1.3rem; margin-top:1.4rem; }
.havale-kutu h3{ font-size:1.05rem; margin-bottom:.8rem; }
.havale-satir{ display:flex; align-items:center; gap:.7rem; padding:.45rem 0; border-bottom:1px solid var(--kum-koyu); font-size:.9rem; }
.havale-satir:last-of-type{ border-bottom:0; }
.havale-satir span{ color:var(--gri); min-width:80px; }
.havale-satir b{ font-family:var(--govde); word-break:break-all; }
.kopyala{ margin-left:auto; font-size:.78rem; font-weight:600; color:var(--nar); text-decoration:underline; white-space:nowrap; }
.havale-not{ font-size:.82rem; color:var(--gri); margin:.8rem 0 0; }

/* takip zaman çizgisi */
.zaman-cizgi{ list-style:none; padding:0; margin:1.4rem 0 0; }
.zaman-cizgi li{ display:flex; gap:.9rem; padding-bottom:1.1rem; position:relative; }
.zaman-cizgi li:not(:last-child)::before{
  content:''; position:absolute; left:7px; top:18px; bottom:0; width:2px; background:var(--kum-koyu);
}
.zaman-cizgi li.gecti:not(:last-child)::before{ background:var(--zeytin); }
.nokta-c{
  width:16px; height:16px; border-radius:50%; border:3px solid var(--kum-koyu);
  background:var(--beyaz); flex-shrink:0; position:relative; z-index:1;
}
.zaman-cizgi li.gecti .nokta-c{ border-color:var(--zeytin); background:var(--zeytin); }
.zaman-cizgi li.simdi .nokta-c{ border-color:var(--nar); background:var(--nar); box-shadow:0 0 0 5px rgba(158,43,37,.16); }
.zaman-cizgi strong{ font-size:.95rem; }
.zaman-cizgi li:not(.gecti):not(.simdi) strong{ color:var(--gri); font-weight:500; }
.zaman-cizgi small{ display:block; color:var(--gri); font-size:.8rem; }
.iptal-kutu{ background:#F7E2E0; color:#A63329; padding:1rem; border-radius:var(--r-m); font-weight:600; margin-top:1rem; }
.kargo-kutu{ display:flex; gap:.8rem; align-items:center; background:var(--kum); padding:.8rem 1rem; border-radius:var(--r-m); margin-top:1rem; font-size:.9rem; }
.kargo-kutu span{ color:var(--gri); }

.durum-rozet{ font-size:.76rem; font-weight:700; padding:.3em .85em; border-radius:100px; white-space:nowrap; }
.d-yeni{ background:#E8EFF5; color:#3B6E8F; }
.d-onaylandi,.d-teslim{ background:#E3EFDE; color:#4C7A3F; }
.d-hazirlaniyor{ background:#FBF0D8; color:#B8860B; }
.d-kargoda{ background:#FBE8DC; color:#B24B26; }
.d-iptal{ background:#F7E2E0; color:#A63329; }

/* hesabım */
.sekme-cubugu{ display:flex; gap:.4rem; margin-bottom:1.3rem; border-bottom:1px solid var(--kum-koyu); }
.sekme{
  padding:.7rem 1.1rem; font-weight:600; font-size:.93rem; color:var(--gri);
  border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .2s, border-color .2s;
}
.sekme:hover{ color:var(--nar); }
.sekme.aktif{ color:var(--koyu); border-bottom-color:var(--nar); }
.hesap-bas{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.hesap-bas > div:first-child{ flex:1; }
.hesap-btnler{ display:flex; gap:.5rem; flex-wrap:wrap; }
.siparis-satir{ display:flex; align-items:center; gap:.9rem; padding:.85rem 0; border-bottom:1px solid var(--kum); flex-wrap:wrap; }
.siparis-satir:last-child{ border-bottom:0; }
.siparis-satir > div:first-child{ flex:1; min-width:140px; }
.siparis-satir strong{ display:block; font-size:.95rem; }
.siparis-satir small{ color:var(--gri); font-size:.8rem; }

/* ürün kartı ek durumlar */
.urun.tukendi .urun-ikon{ opacity:.4; filter:grayscale(.6); }
.urun.tukendi .ekle-btn{ opacity:.5; cursor:not-allowed; }
.rozet.tukendi-rozet{ background:var(--gri); left:auto; right:12px; }
.son-stok{ font-size:.78rem; color:var(--kiremit); font-weight:700; margin:.2rem 0 0; }
.md-stok.yok{ color:var(--nar); }
.md-stok.yok::before{ background:var(--nar); }
.cips i{ font-style:normal; opacity:.55; font-size:.8em; margin-left:.15em; }
.filtre-sag{ display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.toast-uyari span{ background:var(--kiremit); }
.sunucu-hata{ background:var(--nar); color:#fff; padding:.8rem 1rem; text-align:center; font-size:.9rem; }
.sunucu-hata code{ background:rgba(0,0,0,.25); padding:.1em .5em; border-radius:5px; }

@media (max-width:900px){
  .odeme-grid{ grid-template-columns:1fr; }
  .ozet-sutun{ position:static; }
}
@media (max-width:600px){
  .alan-grid{ grid-template-columns:1fr; }
  .sayfa{ padding:1.2rem 0 3rem; }
  .kart{ padding:1.2rem; }
}

/* =========================================================
   ÜRÜN FOTOĞRAFLARI
   Fotoğrafı olan ve olmayan ürünler aynı kutuya oturur;
   fotoğraf yoksa altta mozaik desenli ikon kalır.
   ========================================================= */
.urun-gorsel .urun-foto{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:1;
  transition:transform .55s var(--e);
}
.urun:hover .urun-gorsel .urun-foto{ transform:scale(1.05); }
.urun.tukendi .urun-foto{ opacity:.5; filter:grayscale(.55); }

.md-gorsel .urun-foto{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; border-radius:inherit;
}

/* küçük kareler: sepet, arama, sipariş özeti */
.sepet-gorsel .urun-foto,
.as-gorsel .urun-foto,
.ozet-gorsel .urun-foto{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; border-radius:inherit; z-index:1;
}
.sepet-gorsel, .as-gorsel, .ozet-gorsel{ position:relative; overflow:hidden; }
/* adet rozeti fotoğrafın üstünde kalmalı */
.ozet-gorsel i{ z-index:2; overflow:visible; }
.ozet-gorsel{ overflow:visible; }
.ozet-gorsel .urun-foto{ border-radius:13px; }