/* =====================================================================
   E-TİCARET PAKETİ - ANA STIL (stil.css)
   Renk paleti: dogal tonlar
   ===================================================================== */

:root{
  --kahve:#4A3324;
  --kahve-koyu:#34241A;
  --ceviz:#8A6B52;
  --altin:#A8814A;
  --altin-koyu:#8A6838;
  --krem:#F7F4EF;
  --krem-koyu:#EFE9E0;
  --koyu:#221A12;
  --gri:#7C7269;
  --gri-acik:#A89F95;
  --cizgi:#ECE7DF;
  --cizgi-koyu:#DDD5C8;
  --zemin:#FCFBF9;
  --acik:#FFFFFF;
  --yesil:#4F7355;
  --kirmizi:#B5503A;
  /* Sade, minimal elevation skalası — çok hafif ve nötr gölgeler */
  --golge-xs:0 1px 2px rgba(20,16,12,.04);
  --golge-sm:0 1px 3px rgba(20,16,12,.06);
  --golge:0 4px 14px rgba(20,16,12,.07);
  --golge-buyuk:0 10px 34px rgba(20,16,12,.10);
  --golge-odak:0 0 0 3px rgba(168,129,74,.28);
  /* Düz vurgu çizgisi renkleri (gradyan yok) */
  --cizgi-altin:var(--altin);
  --cizgi-kahve:var(--kahve);
  /* Spacing skalası (4px taban grid) */
  --bo-1:4px;--bo-2:8px;--bo-3:12px;--bo-4:16px;--bo-5:24px;
  --bo-6:32px;--bo-7:48px;--bo-8:64px;--bo-9:80px;--bo-10:96px;
  /* Tipografi skalası */
  --yazi-xs:12px;--yazi-sm:14px;--yazi-base:16px;--yazi-lg:18px;
  --yazi-xl:20px;--yazi-2xl:24px;--yazi-3xl:30px;--yazi-4xl:36px;--yazi-5xl:48px;
  /* Köşe yarıçapı sistemi */
  --r-yok:0;--r-sm:4px;--r-md:8px;--r-lg:12px;--r-xl:16px;--r-full:9999px;
  /* Geriye dönük uyumluluk takma adları */
  --radius:16px;
  --radius-kucuk:10px;
  --radius-mini:8px;
  --gecis:all .22s cubic-bezier(.4,0,.2,1);
  /* Z-index sistematik skala (tutarlılık için) */
  --z-base:1;
  --z-dropdown:10;
  --z-submenu:50;
  --z-whatsapp:90;
  --z-sticky:100;
  --z-compare-bar:900;
  --z-modal:1000;
  --z-drawer-overlay:1100;
  --z-tooltip:1200;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--koyu);
  background:var(--zemin);
  line-height:1.65;
  font-size:16px;
  letter-spacing:-.003em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4{font-family:'Playfair Display',Georgia,serif;line-height:1.18;color:var(--kahve-koyu);font-weight:700;letter-spacing:-.018em;text-wrap:balance}
a{color:inherit;text-decoration:none;transition:var(--gecis)}
img{max-width:100%;height:auto;display:block}
ul{list-style:none}
.kapsayici{width:100%;max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,32px)}

/* ---------- ERİŞİLEBİLİRLİK ---------- */
/* Klavye kullanıcıları için tutarlı, görünür odak halkası */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,summary:focus-visible,
[tabindex]:focus-visible{outline:2px solid var(--ceviz);outline-offset:2px;border-radius:var(--r-sm)}
/* Fareyle tıklamada odak halkası gösterme (yalnızca klavye) */
:focus:not(:focus-visible){outline:none}
/* Hareket azaltma tercihine saygı */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
/* Ekran okuyucu için görsel gizleme yardımcısı */
.gorsel-gizli{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- BUTONLAR ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--kahve);
  color:#fff;
  border:1px solid var(--kahve);
  cursor:pointer;
  padding:13px 28px;border-radius:var(--radius-kucuk);font-weight:600;font-size:15px;letter-spacing:0;
  transition:background .18s ease,border-color .18s ease,color .18s ease;font-family:inherit;line-height:1.2;
}
.btn:hover{
  background:var(--kahve-koyu);
  border-color:var(--kahve-koyu);
}
.btn:active{background:var(--kahve-koyu)}
.btn:focus-visible{outline:none;box-shadow:var(--golge-odak)}
.btn-buyuk{padding:15px 36px;font-size:16px}
.btn-kucuk{padding:8px 16px;font-size:13px}
.btn-tam{width:100%}
.btn-cizgi{
  background:transparent;
  color:var(--kahve);
  border:1px solid var(--cizgi-koyu);
}
.btn-cizgi:hover{
  background:var(--krem);
  border-color:var(--ceviz);
  color:var(--kahve);
}
.btn-acik{
  background:var(--altin);
  color:#fff;
  border-color:var(--altin);
}
.btn-acik:hover{
  background:var(--altin-koyu);
  border-color:var(--altin-koyu);
}
.btn-sepet{width:100%;margin-top:8px}
.btn:disabled{
  background:#8B7E72;background:var(--gri);
  border-color:#8B7E72;border-color:var(--gri);
  color:#fff;cursor:not-allowed;transform:none;box-shadow:none;opacity:.85;
}
.btn.yukleniyor{
  position:relative;
  color:transparent;
  pointer-events:none;
}
.btn.yukleniyor::after{
  content:'';
  position:absolute;
  width:18px;
  height:18px;
  top:50%;
  left:50%;
  margin:-9px 0 0 -9px;
  border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;
  border-radius:50%;
  animation:btn-spin .6s linear infinite;
}
@keyframes btn-spin{
  to{transform:rotate(360deg)}
}

/* ---------- UST BAR ---------- */
.duyuru-bar{font-size:14px;font-weight:500;text-align:center}
.duyuru-bar-ic{display:flex;justify-content:center;align-items:center;gap:12px;min-height:42px;position:relative;text-align:center;padding:8px 40px}
.duyuru-kapat{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;font-size:22px;line-height:1;cursor:pointer;opacity:.8;transition:opacity .2s}
.duyuru-kapat:hover{opacity:1}
.ust-bar{background:var(--kahve-koyu);color:#f0e6d8;font-size:13.5px;display:none}
.ust-bar-ic{display:flex;justify-content:space-between;align-items:center;height:40px}
.ust-bar-sag{display:flex;gap:22px}
.ust-bar-sag a:hover,.ust-bar-sol strong{color:var(--altin)}

/* ---------- HEADER ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;z-index:var(--z-sticky);background:#fff;border-bottom:1px solid var(--cizgi);box-shadow:0 1px 0 rgba(46,33,23,.02)}
body:has(.site-header) .site-header.kaydirildi,
.site-header.kaydirildi{box-shadow:0 1px 0 var(--cizgi),0 8px 24px rgba(46,33,23,.06)}
/* Üst bilgi çubuğu */
.ust-bilgi-bar{background:var(--kahve-koyu);color:#e6dccd;font-size:13px;position:relative;border-bottom:1px solid rgba(0,0,0,.12)}
.ust-bilgi-ic{display:flex;justify-content:space-between;align-items:center;height:42px}
.ust-bilgi-sol,.ust-bilgi-sag{display:flex;gap:24px;align-items:center}
.ust-bilgi-bar a{color:#e6dccd;transition:color .2s;font-weight:500}
.ust-bilgi-bar a:hover{color:var(--altin)}
.ayrac{opacity:.3;user-select:none}
/* Ana header */
.ana-header{border-bottom:1px solid var(--cizgi);background:#fff}
.header-ic{display:flex;align-items:center;gap:32px;height:96px;width:100%;max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,32px)}
.logo{flex-shrink:0}
.logo img{height:56px;width:auto;object-fit:contain}
.header-orta{flex:1;max-width:560px;margin:0 auto}
.arama-form{position:relative;display:flex;align-items:center;background:var(--krem);border:1.5px solid var(--cizgi);border-radius:var(--radius-kucuk);overflow:visible;transition:border-color .18s ease,background .18s ease,box-shadow .18s ease}
.arama-form:focus-within{background:#fff;border-color:var(--ceviz);box-shadow:var(--golge-odak)}
.arama-icon{background:none;border:none;padding:0 16px;color:var(--gri);cursor:pointer;display:flex;align-items:center;transition:color .2s}
.arama-form:focus-within .arama-icon{color:var(--kahve)}
.arama-form input{flex:1;border:none;background:transparent;padding:13px 18px 13px 4px;font-size:14.5px;outline:none;font-family:inherit;color:var(--koyu)}
.arama-form input::placeholder{color:var(--gri);opacity:.7}
.arama-oneri{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;border:1px solid var(--cizgi);border-radius:var(--radius-kucuk);box-shadow:var(--golge-buyuk);max-height:320px;overflow-y:auto;display:none;z-index:50;z-index:var(--z-submenu)}
.header-aksiyon{display:flex;align-items:center;gap:4px;flex-shrink:0}
.aksiyon-btn{display:flex;align-items:center;gap:8px;color:var(--koyu);position:relative;font-size:13.5px;font-weight:600;padding:10px 14px;border-radius:var(--radius-mini);transition:background .18s ease,color .18s ease}
.aksiyon-btn:hover{background:var(--krem);color:var(--kahve)}
.aksiyon-btn span{white-space:nowrap}
.sepet-btn{position:relative}
.sepet-btn>span:first-of-type{min-width:60px}
.sepet-rozet{position:absolute;top:2px;right:6px;background:var(--altin);color:#fff;font-size:10px;font-weight:700;min-width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid #fff}

/* ---------- ANA MENU ---------- */
.ana-menu{background:#fff;border-bottom:1px solid var(--cizgi)}
.ana-menu .kapsayici{width:100%;max-width:1200px;margin:0 auto;padding:0 32px}
.menu-liste{display:flex;align-items:stretch;justify-content:center;width:100%;gap:4px;margin:0;padding:0;list-style:none}
.menu-liste>li{position:relative}
.menu-liste>li>a{display:flex;align-items:center;padding:15px 18px;font-weight:600;font-size:13.5px;letter-spacing:.01em;color:var(--koyu);white-space:nowrap;transition:color .2s ease;position:relative}
.menu-liste>li>a::after{content:'';position:absolute;left:18px;right:18px;bottom:0;height:2px;background:var(--altin);transform:scaleX(0);transition:transform .24s cubic-bezier(.4,0,.2,1);transform-origin:center}
.menu-liste>li>a:hover{color:var(--kahve)}
.menu-liste>li>a:hover::after{transform:scaleX(1)}
.menu-vurgu{color:var(--kahve)!important}
.menu-acilir:hover>a{color:var(--kahve)}
.menu-acilir:hover>a::after{transform:scaleX(1)}
.alt-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(10px);background:#fff;min-width:236px;box-shadow:var(--golge-buyuk);border:1px solid var(--cizgi);border-top:2px solid var(--kahve);border-radius:0 0 var(--radius-kucuk) var(--radius-kucuk);padding:8px;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease,transform .2s ease;z-index:50;z-index:var(--z-submenu);text-align:left}
.menu-acilir:hover .alt-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.alt-menu li a{display:block;padding:11px 16px;font-size:14px;white-space:normal;border-radius:var(--radius-mini);transition:background .18s ease,color .18s ease,padding .18s ease}
.alt-menu li a:hover{background:var(--krem);color:var(--kahve);padding-left:22px}

/* ---------- MOBIL MENU ---------- */
.mobil-menu-baslik{display:none}
.mobil-menu-buton{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:none;border:none;cursor:pointer;width:42px;height:42px;padding:9px;border-radius:var(--radius-mini)}

/* ---------- MOBİL ARAMA OVERLAY ---------- */
.mobil-arama-btn{display:none;background:none;border:none;cursor:pointer;color:var(--koyu)}
.mobil-arama-overlay{position:fixed;inset:0;background:#fff;z-index:10000;display:none;flex-direction:column}
.mobil-arama-overlay.acik{display:flex}
.mobil-arama-ic{display:flex;flex-direction:column;height:100%}
.mobil-arama-form{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--cizgi);background:#fff}
.mobil-arama-geri{background:none;border:none;cursor:pointer;color:var(--koyu);padding:6px;display:flex;align-items:center;border-radius:8px;transition:background .18s}
.mobil-arama-geri:hover{background:var(--krem)}
.mobil-arama-input{flex:1;border:none;outline:none;font-size:17px;font-family:inherit;color:var(--koyu);padding:10px 0;background:transparent}
.mobil-arama-input::placeholder{color:var(--gri-acik)}
.mobil-arama-gonder{background:none;border:none;cursor:pointer;color:var(--kahve);padding:8px;display:flex;align-items:center;border-radius:8px;transition:background .18s}
.mobil-arama-gonder:hover{background:var(--krem)}
.mobil-arama-oneri{flex:1;overflow-y:auto;padding:16px}
.mobil-menu-buton:hover{background:var(--krem)}
.mobil-menu-buton span{width:24px;height:2.5px;background:var(--koyu);border-radius:2px;transition:var(--gecis);transform-origin:center}
.mobil-menu-perde{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:98;z-index:calc(var(--z-sticky) - 2)}

/* ---------- HERO ---------- */
/* Hero stilleri anasayfa.css dosyasına taşındı. */

/* ---------- AVANTAJ SERIDI ---------- */
/* Avantaj stilleri anasayfa.css dosyasına taşındı. */

/* ---------- BOLUMLER ---------- */
/* Bölüm stilleri anasayfa.css dosyasına taşındı. */

/* ---------- KATEGORI GRID ---------- */
/* Kategori stilleri anasayfa.css dosyasına taşındı. */

/* ---------- URUN GRID & KART ---------- */
.urun-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.urun-grid-3{grid-template-columns:repeat(3,1fr)}
.urun-grid-4{grid-template-columns:repeat(4,1fr)}
.urun-grid-5{grid-template-columns:repeat(5,1fr)}
.urun-kart{background:#fff;border:1px solid var(--cizgi);border-radius:var(--radius-kucuk);overflow:hidden;transition:transform .28s cubic-bezier(.4,0,.2,1),border-color .25s ease,box-shadow .25s ease;display:flex;flex-direction:column;position:relative}
.urun-kart:hover{box-shadow:var(--golge-buyuk);border-color:var(--cizgi-koyu);transform:translateY(-4px)}
.urun-kart-resim{position:relative;aspect-ratio:1;overflow:hidden;background:var(--krem)}
.urun-kart-resim img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.6,.2,1)}
.urun-kart:hover .urun-kart-resim img{transform:scale(1.06)}
/* Hizli Bakis butonu */
.hizli-bakis-btn{position:absolute;left:50%;bottom:12px;transform:translateX(-50%) translateY(12px);background:rgba(46,33,23,.92);color:#fff;border:none;border-radius:var(--radius-mini);padding:9px 16px;font-size:13px;font-weight:600;cursor:pointer;opacity:0;transition:.25s;white-space:nowrap;z-index:3;display:inline-flex;align-items:center;gap:7px}
.urun-kart:hover .hizli-bakis-btn{opacity:1;transform:translateX(-50%) translateY(0)}
.hizli-bakis-btn:hover{background:var(--kahve)}
@media(hover:none){.hizli-bakis-btn{opacity:1;transform:translateX(-50%)}}
/* Hizli Bakis modal */
.hb-modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:1000;z-index:var(--z-modal);padding:20px}
.hb-modal.acik{display:flex}
.hb-kutu{background:#fff;border-radius:14px;max-width:760px;width:100%;max-height:90vh;overflow:auto;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.hb-kapat{position:absolute;top:10px;right:12px;background:none;border:none;font-size:30px;line-height:1;cursor:pointer;color:#8B7E72;z-index:4}
.hb-yukleniyor{padding:60px;text-align:center;color:#8B7E72}
.hb-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:24px}
.hb-gorsel{position:relative;border-radius:10px;overflow:hidden;background:var(--krem)}
.hb-gorsel img{width:100%;height:100%;object-fit:cover;aspect-ratio:1}
.hb-rozet{position:absolute;top:10px;left:10px;background:var(--altin);color:#fff;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600}
.hb-malzeme{color:var(--ceviz);font-size:13px;text-transform:uppercase;letter-spacing:.5px}
.hb-bilgi h2{font-size:22px;margin:6px 0 10px}
.hb-bilgi h2 a{color:var(--koyu)}
.hb-fiyat{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.hb-eski{color:#b0a89c;text-decoration:line-through;font-size:15px}
.hb-guncel{color:var(--kahve);font-size:26px;font-weight:700}
.hb-aciklama{color:#6b6055;line-height:1.6;font-size:14px;margin-bottom:16px}
.hb-varyant{margin-bottom:12px}
.hb-varyant label{display:block;font-weight:600;margin-bottom:5px;font-size:14px}
.hb-varyant select{width:100%;padding:10px;border:1px solid var(--krem-koyu);border-radius:var(--radius-kucuk,8px)}
.hb-aksiyon{display:flex;gap:10px}
.hb-adet{width:80px;padding:10px;border:1px solid var(--krem-koyu);border-radius:var(--radius-kucuk,8px);text-align:center}
.hb-tukendi{color:#c0392b;font-weight:600;padding:10px 0}
.hb-detay-link{display:inline-block;margin-top:14px;color:var(--ceviz);font-weight:600}
@media(max-width:640px){.hb-grid{grid-template-columns:1fr}}
/* Kayan Sepet (Drawer) */
.sepet-drawer-perde{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:.3s;z-index:1100;z-index:var(--z-drawer-overlay)}
.sepet-drawer-perde.acik{opacity:1;visibility:visible}
.sepet-drawer{position:fixed;top:0;right:0;height:100%;width:400px;max-width:92vw;background:#fff;box-shadow:-8px 0 30px rgba(0,0,0,.18);transform:translateX(100%);transition:transform .3s ease;z-index:1101;z-index:calc(var(--z-drawer-overlay) + 1);display:flex;flex-direction:column;padding-right:env(safe-area-inset-right)}
.sepet-drawer.acik{transform:translateX(0)}
.sd-baslik{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--krem-koyu)}
.sd-baslik h3{margin:0;font-size:18px;color:var(--koyu)}
.sd-kapat{background:none;border:none;font-size:28px;line-height:1;cursor:pointer;color:#8B7E72}
.sd-govde{flex:1;overflow-y:auto;display:flex;flex-direction:column}
.ms-bos{text-align:center;padding:50px 20px;color:#8B7E72}
.ms-bos-ikon{font-size:40px;display:block;margin-bottom:10px}
.ms-bos p{margin-bottom:16px}
.ms-kargo-bar{padding:14px 20px;background:var(--krem);font-size:13px}
.ms-kargo-bar p{margin:0 0 8px}
.ms-kargo-ok{color:#1e7e34;font-weight:600}
.ms-bar{height:7px;background:#e3d9c8;border-radius:4px;overflow:hidden}
.ms-bar span{display:block;height:100%;background:var(--altin);transition:width .4s}
.ms-kalemler{flex:1;padding:8px 20px}
.ms-kalem{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--krem-koyu);position:relative}
.ms-resim{width:64px;height:64px;border-radius:8px;overflow:hidden;flex-shrink:0;background:var(--krem)}
.ms-resim img{width:100%;height:100%;object-fit:cover}
.ms-detay{flex:1;min-width:0;padding-right:20px}
.ms-ad{display:block;font-weight:600;font-size:14px;color:var(--koyu);line-height:1.3}
.ms-varyant{font-size:12px;color:#8B7E72}
.ms-alt{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.ms-adet{display:flex;align-items:center;border:1px solid var(--krem-koyu);border-radius:6px;overflow:hidden}
.ms-adet button{width:26px;height:26px;border:none;background:var(--krem);cursor:pointer;font-size:15px;color:var(--koyu)}
.ms-adet button:hover{background:var(--altin);color:#fff}
.ms-adet span{min-width:30px;text-align:center;font-size:14px}
.ms-fiyat{font-weight:700;color:var(--kahve)}
.ms-sil{position:absolute;top:14px;right:0;background:none;border:none;font-size:20px;color:#bbb;cursor:pointer;line-height:1}
.ms-sil:hover{color:#c0392b}
.ms-ozet{padding:16px 20px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--krem-koyu);background:#fff;position:sticky;bottom:0}
.ms-satir{display:flex;justify-content:space-between;margin-bottom:8px;font-size:14px}
.ms-indirim{color:#1e7e34}
.ms-genel{font-weight:700;font-size:17px;color:var(--koyu);padding-top:8px;border-top:1px solid var(--krem-koyu)}
.ms-butonlar{display:flex;flex-direction:column;gap:8px;margin-top:12px}
/* Karsilastirma */
.karsilastir-toggle{background:none;border:none;color:var(--gri);font-size:12.5px;cursor:pointer;padding:2px 0;margin-bottom:4px;text-align:left}
.karsilastir-toggle:hover,.karsilastir-toggle.aktif{color:var(--kahve);font-weight:600}
.karsilastir-bar{position:fixed;left:0;right:0;bottom:0;background:var(--koyu);color:#fff;transform:translateY(100%);transition:transform .3s;z-index:900;z-index:var(--z-compare-bar)}
.karsilastir-bar.acik{transform:translateY(0)}
.kb-ic{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0 calc(12px + env(safe-area-inset-bottom));flex-wrap:wrap}
.kb-bilgi{font-size:14px}
.kb-aksiyon{display:flex;gap:8px}
.karsilastir-sarmal{overflow-x:auto}
.karsilastir-tablo{width:100%;border-collapse:collapse;min-width:560px;background:#fff}
.karsilastir-tablo th,.karsilastir-tablo td{border:1px solid var(--krem-koyu);padding:12px;text-align:center;vertical-align:middle}
.karsilastir-tablo th{background:var(--krem);text-align:left;width:130px;font-size:14px}
.kt-urun{position:relative;width:200px}
.kt-urun img{width:100%;max-width:150px;aspect-ratio:1;object-fit:cover;border-radius:8px;margin:0 auto 8px}
.kt-urun strong{display:block;font-size:14px;color:var(--koyu)}
.kt-cikar{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;background:#c0392b;color:#fff;border:none;cursor:pointer;font-size:16px;line-height:1}
.kt-fiyat{color:var(--kahve);font-weight:700;font-size:17px}
.urun-rozetler{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:6px;z-index:2}
.rozet{font-size:11px;font-weight:700;padding:5px 11px;border-radius:6px;color:#fff;box-shadow:var(--golge-xs);text-transform:uppercase;letter-spacing:.4px}
.rozet-indirim{background:var(--kirmizi)}
.rozet-yeni{background:var(--yesil)}
.rozet-toptan{background:var(--altin);color:var(--koyu)}
.rozet-tukendi{background:var(--gri)}
.rozet-cok-satan{background:var(--kahve)}
.favori-form{position:absolute;top:10px;right:10px;z-index:3}
.favori-btn{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.95);border:none;cursor:pointer;color:var(--gri);display:flex;align-items:center;justify-content:center;transition:var(--gecis);box-shadow:var(--golge-xs);backdrop-filter:blur(5px)}
.favori-btn:hover{color:var(--kirmizi);background:#fff}
.favori-btn.aktif{color:var(--kirmizi);background:#fff}
.favori-btn.aktif svg{fill:var(--kirmizi)}
.urun-kart-govde{padding:16px;display:flex;flex-direction:column;flex:1}
.urun-malzeme{font-size:11px;color:var(--gri);text-transform:uppercase;letter-spacing:.5px;font-weight:600;margin-bottom:6px}
.urun-kart-baslik{font-size:14px;font-family:'Inter';font-weight:500;margin-bottom:10px;flex:1;line-height:1.45;color:var(--koyu);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.urun-kart-baslik a{color:inherit}
.urun-kart-baslik a:hover{color:var(--kahve)}
.urun-kart-fiyat{display:flex;align-items:baseline;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.eski-fiyat{color:var(--gri-acik);text-decoration:line-through;font-size:13px}
.guncel-fiyat{font-size:20px;font-weight:700;color:var(--kahve);letter-spacing:-.01em}
.urun-kart-alt{display:flex;justify-content:space-between;align-items:center;gap:8px}
.sepete-ekle-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;background:var(--kahve);color:#fff;border:none;padding:11px 16px;border-radius:var(--radius-mini);font-weight:600;font-size:13px;cursor:pointer;transition:background .2s ease,transform .12s ease;text-align:center}
.sepete-ekle-btn:hover{background:var(--kahve-koyu)}
.sepete-ekle-btn:active{transform:scale(.97)}
.sepete-ekle-btn:disabled{background:var(--gri-acik);cursor:not-allowed}
.yildiz-puan{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--altin);margin-top:6px}
.yildiz-puan svg{width:14px;height:14px;fill:currentColor}
.yorum-sayisi{color:var(--gri);margin-left:4px}

/* ---------- TOPTAN CTA ---------- */
/* Toptan CTA stilleri anasayfa.css dosyasına taşındı. */

/* ---------- WHATSAPP ---------- */
.whatsapp-buton{position:fixed;bottom:calc(24px + env(safe-area-inset-bottom));right:calc(24px + env(safe-area-inset-right));width:56px;height:56px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:var(--golge);z-index:90;z-index:var(--z-whatsapp);transition:background .2s ease,bottom .3s ease}
.whatsapp-buton:hover{background:#1eb958}
/* Karşılaştırma çubuğu açıkken WhatsApp butonu yukarı kayar (çakışma önleme) */
body:has(.karsilastir-bar.acik) .whatsapp-buton{bottom:calc(88px + env(safe-area-inset-bottom))}

/* ---------- KAMPANYA BANNER ---------- */
/* Kampanya banner stilleri anasayfa.css dosyasına taşındı. */

/* ---------- FOOTER ---------- */
.site-footer{background:var(--koyu);color:#cabcab;margin-top:0;position:relative}
.site-footer::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--altin)}
.footer-ust{padding:64px 0 48px}
.footer-grid{display:grid;grid-template-columns:2.2fr 1fr 1fr 1.8fr;gap:48px}
.footer-hakkinda{}
.footer-logo-wrap{display:inline-block;margin-bottom:18px}
.footer-logo{filter:brightness(0) invert(1);opacity:.9;transition:opacity .2s}
.footer-logo-wrap:hover .footer-logo{opacity:1}
.footer-slogan{font-size:15px;opacity:.8;margin-bottom:20px;line-height:1.7;max-width:34ch}
.footer-sosyal{display:flex;gap:10px;margin-top:22px}
.sosyal-link{width:40px;height:40px;border-radius:var(--radius-mini);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:#e6dccd;transition:background .18s ease,color .18s ease,border-color .18s ease}
.sosyal-link:hover{background:var(--altin);border-color:var(--altin);color:#fff}
.footer-kolon h4{color:#fff;font-size:15px;margin-bottom:22px;font-family:'Inter',sans-serif;font-weight:700;letter-spacing:.04em;text-transform:uppercase;position:relative;padding-bottom:14px}
.footer-kolon h4::after{content:'';position:absolute;left:0;bottom:0;width:28px;height:2px;background:var(--altin)}
.footer-linkler{list-style:none;padding:0;margin:0}
.footer-linkler li{margin-bottom:13px}
.footer-linkler a{font-size:14.5px;opacity:.78;transition:opacity .18s ease,color .18s ease,padding .18s ease;display:inline-block}
.footer-linkler a:hover{opacity:1;color:var(--altin);padding-left:6px}
.footer-iletisim{}
.iletisim-bilgi{margin-bottom:24px}
.iletisim-item{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:14.5px}
.iletisim-item svg{flex-shrink:0;opacity:.6}
.iletisim-item a{opacity:.82;transition:color .18s ease,opacity .18s ease}
.iletisim-item a:hover{color:var(--altin);opacity:1}
.bulten-baslik{font-size:14.5px;font-weight:600;margin-bottom:12px;color:#fff}
.bulten-form-ic{display:flex;flex-direction:column;gap:0}
.bulten-input-grup{display:flex;border-radius:var(--radius-mini);overflow:hidden;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);transition:border-color .18s ease,background .18s ease}
.bulten-input-grup:focus-within{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28)}
.bulten-input-grup input{flex:1;border:none;padding:12px 16px;font-family:inherit;background:transparent;color:#fff;font-size:14px;outline:none}
.bulten-input-grup input::placeholder{color:rgba(255,255,255,.45)}
.bulten-input-grup button{background:var(--altin);color:#fff;border:none;width:46px;height:auto;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease;flex-shrink:0}
.bulten-input-grup button:hover{background:var(--altin-koyu)}
.footer-alt{border-top:1px solid rgba(255,255,255,.1);padding:22px 0}
.footer-alt-ic{display:flex;justify-content:space-between;align-items:center;font-size:13px;opacity:.7;flex-wrap:wrap;gap:16px}
.footer-telif{}
.footer-odeme{display:flex;gap:22px}
.odeme-item{display:flex;align-items:center;gap:8px}
.odeme-item svg{opacity:.55}

/* ---------- FLASH ---------- */
.flash-konteyner{position:fixed;top:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:10px;max-width:360px}
.flash{padding:14px 44px 14px 18px;border-radius:var(--radius-kucuk);color:#fff;box-shadow:var(--golge-buyuk);position:relative;animation:flashGir .3s ease;font-size:14.5px}
.flash-basari{background:var(--yesil)}
.flash-hata{background:var(--kirmizi)}
.flash-kapat{position:absolute;right:14px;top:50%;transform:translateY(-50%);cursor:pointer;font-size:20px}
@keyframes flashGir{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}

/* ---------- SAYFA GENEL ---------- */
.sayfa-ust{padding:20px 0 14px;margin-bottom:20px}
.sayfa-baslik{font-size:1.8rem;margin:0;color:var(--koyu);font-family:'Inter',sans-serif;font-weight:700}
.ekmek-kirintisi{font-size:13.5px;color:var(--gri);margin-bottom:8px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ekmek-kirintisi a:hover{color:var(--kahve)}
.ana-icerik{min-height:50vh;padding-bottom:60px;padding-top:180px}
/* Üye sayfaları (giriş/kayıt) kendi padding'ini yönetir */
.ana-icerik:has(.uy-sayfa){padding-bottom:0}

/* ---------- MAGAZA DUZEN ---------- */
/* Mağaza stilleri magaza.css dosyasına taşındı.
   Aşağıda sadece form-grup select stil kuralı kaldı (diğer sayfalarda kullanılıyor). */
.form-grup select{padding:9px 36px 9px 14px;border:1px solid var(--cizgi-koyu);border-radius:8px;font-family:inherit;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237C7269' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;-webkit-appearance:none;appearance:none;cursor:pointer;font-size:14px;transition:border-color .18s ease}
.form-grup select:hover{border-color:var(--kahve)}

/* ===================================================================
   URUN DETAY — KURUMSAL (sade, düz renk, nötr gölge, ince çizgi)
   Tasarım sistemi ile birebir uyumlu. Gradyan/parlama/animasyon yok.
   =================================================================== */
.urun-detay{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);gap:48px;padding:28px 0 72px;align-items:start;max-width:1260px;margin:0 auto}

/* ---------- GALERI ---------- */
.urun-galeri-modern{display:flex;gap:14px;flex-direction:row-reverse;position:sticky;top:112px}
.galeri-thumbnail-nav{display:flex;flex-direction:column;gap:10px;width:84px;flex-shrink:0}
.thumbnail-item{width:100%;aspect-ratio:1;border:1px solid var(--cizgi);border-radius:var(--radius-mini);overflow:hidden;cursor:pointer;transition:border-color .18s ease;background:var(--krem);padding:0;position:relative}
.thumbnail-item img{width:100%;height:100%;object-fit:cover;display:block}
.thumbnail-item:hover{border-color:var(--cizgi-koyu)}
.thumbnail-item.active{border-color:var(--kahve);box-shadow:inset 0 0 0 1px var(--kahve)}

.galeri-ana-modern{flex:1;position:relative;border-radius:var(--radius-kucuk);overflow:hidden;background:var(--krem);cursor:zoom-in;border:1px solid var(--cizgi)}
.galeri-ana-modern a{display:block;position:relative;width:100%;aspect-ratio:1;overflow:hidden}
.galeri-ana-modern .ana-resim{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.galeri-ana-modern:hover{border-color:var(--cizgi-koyu)}
.galeri-ana-modern:hover .ana-resim{transform:scale(1.04)}
.galeri-ana-modern:hover .zoom-overlay{opacity:1}

.zoom-overlay{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;color:#fff;background:rgba(34,26,18,.62);opacity:0;transition:opacity .2s ease;font-size:13px;font-weight:600;letter-spacing:.2px}
.zoom-overlay svg{flex-shrink:0}

/* İndirim rozeti — kart rozetleriyle aynı dil */
.rozet-badge{position:absolute;top:14px;left:14px;color:#fff;font-weight:700;font-size:12px;letter-spacing:.4px;padding:6px 12px;border-radius:var(--r-sm);z-index:2;text-transform:uppercase;box-shadow:var(--golge-xs)}
.rozet-badge.rozet-indirim{background:var(--kirmizi)}

@media(max-width:860px){
  .urun-galeri-modern{position:static;flex-direction:column;gap:12px;top:0}
  .galeri-thumbnail-nav{flex-direction:row;width:100%;overflow-x:auto;scrollbar-width:thin;padding-bottom:6px;order:2;gap:8px}
  .thumbnail-item{min-width:70px;width:70px}
}

/* Legacy galeri stilleri (uyumluluk için) */
.galeri-ana{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--krem);aspect-ratio:1}
.galeri-ana img{width:100%;height:100%;object-fit:cover}
.galeri-rozet{position:absolute;top:16px;left:16px}
.galeri-kucukler{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap}
.galeri-kucuk{width:78px;height:78px;object-fit:cover;border-radius:10px;cursor:pointer;border:2px solid transparent;transition:var(--gecis)}

/* ---------- URUN BILGI ALANI (KURUMSAL) ---------- */
.urun-bilgi{background:#fff;border-radius:var(--radius-kucuk);padding:32px;border:1px solid var(--cizgi);box-shadow:var(--golge-sm);position:sticky;top:112px}
.urun-bilgi h1{font-size:1.9rem;line-height:1.22;margin-bottom:14px;color:var(--kahve-koyu);font-weight:700;letter-spacing:-.018em}
.urun-meta-satir{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--cizgi)}
.urun-kodu{font-size:12.5px;color:var(--gri);font-weight:600;padding:5px 12px;background:var(--krem);border:1px solid var(--cizgi);border-radius:var(--r-sm);letter-spacing:.3px}
.urun-puan{font-size:15px;color:var(--altin);display:flex;align-items:center;gap:6px;letter-spacing:1px}

/* Fiyat bloğu — düz, üst vurgu çizgili kurumsal kart */
.urun-fiyat-blok{background:var(--krem);border-radius:var(--radius-mini);padding:22px 24px;margin-bottom:24px;border:1px solid var(--cizgi);border-top:3px solid var(--cizgi-altin)}
.eski-fiyat-buyuk{font-size:1.2rem;color:var(--gri-acik);text-decoration:line-through;display:block;margin-bottom:4px;font-weight:500}
.guncel-fiyat-buyuk{font-size:2.6rem;font-weight:700;color:var(--kahve);display:block;letter-spacing:-.02em;line-height:1.05;font-family:'Playfair Display',Georgia,serif}
.kdv-not{font-size:12.5px;color:var(--gri);font-weight:500;display:block;margin-top:8px;letter-spacing:.3px}

/* Bayi uyarı bandı */
.bayi-uyari{background:var(--kahve-koyu);color:#f0e6d8;padding:13px 18px;border-radius:var(--radius-mini);margin-bottom:20px;font-weight:600;font-size:14px;display:flex;align-items:center;gap:10px}

/* Güven rozetleri */
.urun-guven-rozet{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:20px 0 0;margin-top:24px;border-top:1px solid var(--cizgi)}
.urun-guven-rozet span{text-align:center;font-size:12.5px;font-weight:600;color:var(--kahve);display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 10px;background:var(--krem);border:1px solid var(--cizgi);border-radius:var(--radius-mini);line-height:1.35}

/* Özellik vurguları */
.urun-ozellik-highlight{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:22px 0;padding:0}
.ozellik-item{text-align:center;padding:16px 10px;background:#fff;border:1px solid var(--cizgi);border-radius:var(--radius-mini);transition:border-color .18s ease,box-shadow .18s ease}
.ozellik-item:hover{border-color:var(--cizgi-koyu);box-shadow:var(--golge-xs)}
.ozellik-item-icon{font-size:28px;margin-bottom:8px;display:block;line-height:1}
.ozellik-item-text{font-size:12px;font-weight:600;color:var(--kahve);line-height:1.4}

/* Ücretsiz kargo ilerleme — site yeşili, düz */
.kargo-progress{margin:22px 0;padding:16px 18px;background:var(--krem);border:1px solid var(--cizgi);border-left:3px solid var(--yesil);border-radius:var(--radius-mini)}
.kargo-progress-text{font-size:13.5px;font-weight:600;color:var(--kahve-koyu);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.kargo-progress-text strong{color:var(--yesil)}
.kargo-progress-bar{height:7px;background:var(--krem-koyu);border-radius:var(--r-full);overflow:hidden}
.kargo-progress-fill{height:100%;background:var(--yesil);border-radius:var(--r-full);transition:width .5s cubic-bezier(.4,0,.2,1)}
.galeri-kucuk:hover,.galeri-kucuk.secili{border-color:var(--kahve)}
.galeri-ana{cursor:zoom-in}
.galeri-buyut{position:absolute;bottom:12px;right:12px;background:rgba(46,33,23,.75);color:#fff;font-size:12px;padding:6px 10px;border-radius:8px;pointer-events:none}
.galeri-lightbox{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.88);display:none;align-items:center;justify-content:center;padding:24px}
.galeri-lightbox.acik{display:flex}
.galeri-lightbox .lightbox-img{max-width:min(92vw,900px);max-height:88vh;object-fit:contain;border-radius:8px}
.galeri-lightbox .lightbox-kapat{position:absolute;top:16px;right:20px;background:transparent;border:0;color:#fff;font-size:36px;cursor:pointer;line-height:1}
.galeri-lightbox .lightbox-onceki,.galeri-lightbox .lightbox-sonraki{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.15);border:0;color:#fff;font-size:42px;width:48px;height:64px;border-radius:8px;cursor:pointer}
.galeri-lightbox .lightbox-onceki{left:16px}
.galeri-lightbox .lightbox-sonraki{right:16px}
.form-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}

/* Ürün bilgi alanı dikey akış (kurumsal blok ile birlikte) */
.urun-bilgi{display:flex;flex-direction:column}

/* Kısa açıklama — sade alıntı bloğu */
.urun-kisa-aciklama{color:var(--gri);line-height:1.75;margin-bottom:24px;font-size:15px;padding:14px 18px;background:var(--krem);border-left:3px solid var(--cizgi-altin);border-radius:0 var(--radius-mini) var(--radius-mini) 0}

/* Özet liste — düz tablo görünümü */
.urun-ozet-liste{list-style:none;padding:0;margin:0 0 26px;border:1px solid var(--cizgi);border-radius:var(--radius-mini);overflow:hidden}
.urun-ozet-liste li{padding:13px 16px;border-bottom:1px solid var(--cizgi);display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:14px;color:var(--koyu);background:#fff;transition:background .18s ease}
.urun-ozet-liste li:nth-child(even){background:var(--zemin)}
.urun-ozet-liste li:hover{background:var(--krem)}
.urun-ozet-liste li:last-child{border-bottom:none}
.urun-ozet-liste li strong{color:var(--kahve);font-weight:600}

.stok-var{color:var(--yesil);font-weight:600;font-size:13.5px;display:inline-flex;align-items:center;gap:6px}
.stok-var::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--yesil)}
.stok-yok{color:var(--kirmizi);font-weight:600;font-size:13.5px;display:inline-flex;align-items:center;gap:6px}
.stok-yok::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--kirmizi)}

/* Son adet uyarısı — sade vurgu çipi */
.son-adet-uyari{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;background:rgba(181,80,58,.08);color:var(--kirmizi);padding:9px 16px;border:1px solid rgba(181,80,58,.2);border-radius:var(--r-sm);font-weight:600;font-size:13.5px;margin-bottom:20px}

/* Sepet formu */
.urun-sepet-form{display:flex;gap:12px;align-items:center;margin-bottom:24px;flex-wrap:wrap}
.adet-secici{display:flex;align-items:center;border:1px solid var(--cizgi-koyu);border-radius:var(--radius-mini);overflow:hidden;background:#fff;transition:border-color .18s ease}
.adet-secici:hover{border-color:var(--ceviz)}
.adet-secici button{width:46px;height:54px;background:var(--krem);border:none;font-size:20px;cursor:pointer;color:var(--kahve);transition:background .18s ease,color .18s ease;line-height:1;font-weight:700}
.adet-secici button:hover{background:var(--kahve);color:#fff}
.adet-secici input{width:60px;height:54px;text-align:center;border:none;border-left:1px solid var(--cizgi);border-right:1px solid var(--cizgi);font-size:16px;font-weight:700;color:var(--kahve);background:#fff}

/* Sepete ekle — ana buton dili (.btn ile uyumlu) */
.btn-sepet-detay{flex:1;min-width:220px;height:54px;background:var(--kahve);color:#fff;border:1px solid var(--kahve);border-radius:var(--radius-mini);font-size:16px;font-weight:700;cursor:pointer;transition:background .18s ease,border-color .18s ease;letter-spacing:.2px}
.btn-sepet-detay:hover{background:var(--kahve-koyu);border-color:var(--kahve-koyu)}
.btn-sepet-detay:active{background:var(--kahve-koyu)}
.btn-sepet-detay:disabled{background:var(--gri);border-color:var(--gri);cursor:not-allowed}

/* Favori butonu */
.btn-favori-detay{width:54px;height:54px;border:1px solid var(--cizgi-koyu);background:#fff;border-radius:var(--radius-mini);font-size:20px;color:var(--gri-acik);cursor:pointer;transition:border-color .18s ease,color .18s ease,background .18s ease;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.btn-favori-detay:hover{border-color:var(--kirmizi);color:var(--kirmizi)}
.btn-favori-detay.aktif{color:var(--kirmizi);border-color:var(--kirmizi);background:rgba(181,80,58,.06)}

/* WhatsApp sipariş butonu */
.wa-siparis-btn{display:flex;align-items:center;justify-content:center;gap:10px;background:#25D366;color:#fff;padding:15px 24px;border-radius:var(--radius-mini);text-decoration:none;font-weight:600;font-size:15px;margin-top:18px;transition:background .18s ease}
.wa-siparis-btn:hover{background:#1eb958}
.wa-siparis-btn svg{flex-shrink:0}

/* ---------- SEKMELER (KURUMSAL) ---------- */
.urun-sekmeler{margin-top:24px;padding:32px;background:#fff;border:1px solid var(--cizgi);border-radius:var(--radius-kucuk);box-shadow:var(--golge-sm)}
.sekme-baslik{display:flex;gap:4px;border-bottom:1px solid var(--cizgi);margin-bottom:28px;flex-wrap:wrap}
.sekme-buton{background:none;border:none;padding:14px 22px;font-size:15px;font-weight:600;cursor:pointer;color:var(--gri);border-bottom:2px solid transparent;margin-bottom:-1px;font-family:inherit;transition:color .18s ease,border-color .18s ease}
.sekme-buton:hover{color:var(--kahve)}
.sekme-buton.aktif{color:var(--kahve);border-color:var(--kahve);font-weight:700}
.sekme-icerik{display:none;line-height:1.85;color:var(--gri);max-width:920px;font-size:15px}
.sekme-icerik.aktif{display:block}
.sekme-icerik p{margin-bottom:16px}
.sekme-icerik h2,.sekme-icerik h3{color:var(--kahve-koyu);margin:26px 0 14px;font-weight:700}
.sekme-icerik ul,.sekme-icerik ol{margin:16px 0;padding-left:26px}
.sekme-icerik li{margin-bottom:9px}

/* Yorum kartları */
.yorum{background:#fff;border:1px solid var(--cizgi);border-radius:var(--radius-mini);padding:20px 22px;margin-bottom:14px;border-left:3px solid var(--cizgi-altin);transition:border-color .18s ease,box-shadow .18s ease}
.yorum:hover{box-shadow:var(--golge-xs);border-left-color:var(--kahve)}
.yorum-ust{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--cizgi)}
.yorum-ust strong{font-size:15px;color:var(--kahve);font-weight:700}
.yorum-puan{color:var(--altin);letter-spacing:1px;font-size:15px}
.yorum p{line-height:1.7;color:var(--koyu);margin-bottom:8px}
.yorum small{color:var(--gri);font-size:12.5px;font-weight:500}

/* Yorum / soru formu */
.yorum-form{margin-top:32px;max-width:640px;background:var(--krem);padding:26px;border-radius:var(--radius-mini);border:1px solid var(--cizgi)}
.yorum-form h4{margin-bottom:18px;color:var(--kahve-koyu);font-size:17px;font-weight:700}
.yorum-form input,.yorum-form select,.yorum-form textarea{width:100%;padding:12px 14px;border:1.5px solid var(--cizgi-koyu);border-radius:var(--radius-mini);margin-bottom:14px;font-family:inherit;font-size:15px;background:#fff;color:var(--koyu);transition:border-color .18s ease,box-shadow .18s ease}
.yorum-form input:focus,.yorum-form select:focus,.yorum-form textarea:focus{outline:none;border-color:var(--ceviz);box-shadow:var(--golge-odak)}
.yorum-form textarea{min-height:120px;resize:vertical}
.yorum-form button[type="submit"]{background:var(--kahve);color:#fff;border:1px solid var(--kahve);padding:13px 28px;border-radius:var(--radius-mini);font-weight:600;cursor:pointer;transition:background .18s ease,border-color .18s ease;font-size:15px}
.yorum-form button[type="submit"]:hover{background:var(--kahve-koyu);border-color:var(--kahve-koyu)}

/* ---------- FORMLAR ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grup{margin-bottom:16px}
.form-tam{grid-column:1/-1}
.form-grup label{display:block;font-size:14px;font-weight:600;margin-bottom:7px;color:#4a3d30}
.form-grup input,.form-grup textarea,.form-grup select{width:100%;padding:12px 14px;border:1.5px solid var(--krem-koyu);border-radius:var(--radius-mini);font-family:inherit;font-size:15px;transition:var(--gecis);background:#fff;color:var(--koyu)}
.form-grup input:focus,.form-grup textarea:focus,.form-grup select:focus{outline:none;border-color:var(--ceviz);box-shadow:var(--golge-odak)}
.form-grup input:disabled{background:var(--krem);color:var(--gri)}

/* ---------- AUTH ---------- */
.auth-sayfa{min-height:calc(100vh - 200px);padding:56px 0;background:var(--krem);display:flex;align-items:flex-start;justify-content:center}

/* Üyelik Tipi Seçimi - Modern */
.uyelik-tipi-secim-modern{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:32px}
.tip-kart{border:2px solid var(--cizgi);border-radius:var(--radius-kucuk);padding:20px 16px;cursor:pointer;transition:var(--gecis);text-align:center;display:block;background:#fff}
.tip-kart input{display:none}
.tip-kart:hover{border-color:var(--ceviz);box-shadow:var(--golge-sm)}
.tip-kart-aktif{border-color:var(--kahve);background:var(--krem);box-shadow:var(--golge-sm)}
.tip-kart-icerik{display:flex;flex-direction:column;align-items:center;gap:8px}
.tip-ikon{font-size:32px;line-height:1;color:var(--ceviz)}
.tip-kart strong{display:block;font-size:15px;color:var(--koyu);font-weight:700}
.tip-kart small{display:block;font-size:12px;color:var(--gri);margin-top:2px}

/* Form yardımcı öğeleri */
.zorunlu{color:var(--kirmizi);font-weight:700}
.form-yardim{display:block;margin-top:6px;font-size:12px;color:var(--gri)}

/* Toptan Alanları Modern */
.toptan-alanlar-modern{animation:slideDown .3s ease}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
.bilgi-kutusu{display:flex;align-items:flex-start;gap:12px;background:var(--krem);color:var(--kahve-koyu);padding:14px 18px;border-radius:var(--radius-mini);font-size:14px;line-height:1.6;margin-top:16px;border:1px solid var(--krem-koyu)}
.bilgi-ikon{font-size:20px;flex-shrink:0;color:var(--ceviz)}

/* Kayıt Butonu */
.btn-kayit{display:flex;align-items:center;justify-content:center;gap:10px;font-size:16px;font-weight:700;padding:16px 32px;background:var(--kahve);border:1px solid var(--kahve)}
.btn-kayit:hover{background:var(--kahve-koyu);border-color:var(--kahve-koyu)}
.btn-kayit svg{transition:transform .2s}
.btn-kayit:hover svg{transform:translateX(4px)}

/* Eski stiller - Uyumluluk */
.auth-kart{background:#fff;border:1px solid var(--cizgi);border-radius:var(--radius);padding:40px;width:100%;max-width:440px;box-shadow:var(--golge);height:fit-content}
.auth-genis .auth-kart{max-width:640px}
.auth-kart h1{text-align:center;margin-bottom:8px}
.auth-alt{text-align:center;color:var(--gri);margin-bottom:28px}
.auth-gecis{text-align:center;margin-top:20px;font-size:14.5px}
.auth-gecis a{color:var(--kahve);font-weight:600}
.auth-gecis a:hover{color:var(--altin-koyu)}

/* Kayıt kartı (giriş kartı dilinde, daha geniş) */
.auth-kart-kayit{max-width:600px;padding:40px 44px}
.auth-kart-logo{text-align:center;margin-bottom:18px}
.auth-kart-logo img{height:54px;width:auto;display:inline-block;object-fit:contain}
.auth-kart-kayit .form-grid{margin-bottom:0;row-gap:0}
.auth-kart-kayit .uyelik-tipi-secim-modern{margin-bottom:24px}
.auth-kart-kayit .btn-kayit{margin-top:24px}
.auth-kart-kayit .toptan-alanlar-modern{margin-top:0}

/* ---------- SEPET ---------- */
.sepet-duzen{display:grid;grid-template-columns:1fr 360px;gap:32px;padding-bottom:50px}
.sepet-tablo{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--krem-koyu);border-radius:var(--radius);overflow:hidden}
.sepet-tablo th{text-align:left;padding:14px;background:var(--krem);font-size:13px;text-transform:uppercase;letter-spacing:.5px}
.sepet-tablo td{padding:14px;border-top:1px solid var(--krem)}
.sepet-resim img{border-radius:8px}
.sepet-ad a{font-weight:600}
.sepet-ad a:hover{color:var(--kahve)}
.mini-rozet{display:inline-block;background:var(--altin);color:var(--koyu);font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:10px;margin-top:4px}
.sepet-adet{width:64px;padding:8px;border:1px solid var(--krem-koyu);border-radius:8px;text-align:center}
.sepet-sil{background:none;border:none;color:var(--kirmizi);font-size:24px;cursor:pointer}
.sepet-aksiyon{display:flex;justify-content:space-between;margin-top:18px;gap:12px;flex-wrap:wrap}
.sepet-ozet{background:#fff;border:1px solid var(--krem-koyu);border-radius:var(--radius);padding:24px;height:fit-content;position:sticky;top:120px}
.sepet-ozet h3{margin-bottom:18px}
.kupon-form{display:flex;gap:8px;margin-bottom:18px}
.kupon-form input{flex:1;padding:10px;border:1px solid var(--krem-koyu);border-radius:8px}
.hediye-aktif{display:flex;justify-content:space-between;align-items:center;background:var(--krem);padding:8px 12px;border-radius:8px;margin-bottom:14px;font-size:13.5px}
.btn-link-kaldir{background:none;border:none;color:var(--kahve);cursor:pointer;text-decoration:underline;font-size:13px;font-family:inherit}
.ozet-satir{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--krem);font-size:15px}
.ozet-indirim{color:var(--yesil)}
.ozet-genel{font-size:19px;font-weight:700;color:var(--kahve);border-bottom:none;padding-top:14px}
.kargo-ipucu{font-size:13px;color:var(--ceviz);background:var(--krem);padding:10px;border-radius:8px;margin:8px 0}
.bos-sepet{grid-column:1/-1}
.bos-ikon{font-size:64px;margin-bottom:16px}

/* Sepet tablosu -> mobilde kart düzeni */
@media(max-width:640px){
  .sepet-tablo,.sepet-tablo tbody,.sepet-tablo tr,.sepet-tablo td{display:block;width:100%}
  .sepet-tablo thead{display:none}
  .sepet-tablo{border:none;background:transparent;overflow:visible}
  .sepet-tablo tr{position:relative;background:#fff;border:1px solid var(--krem-koyu);border-radius:var(--radius-kucuk);padding:16px 16px 12px;margin-bottom:14px;display:grid;grid-template-columns:72px 1fr;gap:4px 14px}
  .sepet-tablo td{border:none;padding:2px 0}
  .sepet-resim{grid-row:1/4;grid-column:1}
  .sepet-resim img{width:72px;height:72px;object-fit:cover;border-radius:var(--radius-mini)}
  .sepet-ad{grid-column:2;padding-right:30px!important}
  .sepet-tablo td[data-label="Fiyat"],
  .sepet-tablo td[data-label="Adet"],
  .sepet-tablo td[data-label="Toplam"]{grid-column:2;display:flex;justify-content:space-between;align-items:center;font-size:14px;padding:6px 0;border-top:1px solid var(--krem)!important}
  .sepet-tablo td[data-label]::before{content:attr(data-label);color:var(--gri);font-size:13px;font-weight:600}
  .sepet-toplam{font-weight:700;color:var(--kahve)}
  .sepet-sil-hucre{position:absolute;top:10px;right:10px;padding:0!important}
  .sepet-sil{font-size:22px;line-height:1;width:30px;height:30px}
  .sepet-adet{width:96px}
}

/* ---------- ODEME ---------- */
.odeme-duzen{display:grid;grid-template-columns:1fr 380px;gap:32px;padding-bottom:50px}
.odeme-blok{background:#fff;border:1px solid var(--krem-koyu);border-radius:var(--radius);padding:26px;margin-bottom:24px}
.odeme-blok h3{margin-bottom:18px}
.kayitli-adresler{display:grid;gap:12px;margin-bottom:16px}
.adres-secim,.odeme-secim{display:flex;gap:14px;border:1.5px solid var(--krem-koyu);border-radius:10px;padding:16px;cursor:pointer;transition:var(--gecis)}
.adres-secim:has(input:checked),.odeme-secim:has(input:checked){border-color:var(--kahve);background:var(--krem)}
.odeme-secim p{font-size:13.5px;color:var(--gri)}
.veya-ayrac{text-align:center;color:var(--gri);font-size:14px;margin:14px 0}
.odeme-ozet{background:#fff;border:1px solid var(--krem-koyu);border-radius:var(--radius);padding:24px;height:fit-content;position:sticky;top:120px}
.ozet-urunler{margin-bottom:18px;max-height:280px;overflow-y:auto}
.ozet-urun{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--krem)}
.ozet-urun img{border-radius:8px}
.ozet-urun-ad{flex:1;font-size:14px}
.sozlesme-onay{display:flex;gap:10px;font-size:13.5px;margin:18px 0;align-items:flex-start}
.sozlesme-onay a{color:var(--kahve);text-decoration:underline}

/* ---------- TESEKKURLER ---------- */
.tesekkur-sayfa{padding:50px 20px;display:flex;justify-content:center}
.tesekkur-kart{background:#fff;border:1px solid var(--krem-koyu);border-radius:var(--radius);padding:46px;max-width:600px;text-align:center;box-shadow:var(--golge)}
.tesekkur-ikon{width:80px;height:80px;background:var(--yesil);color:#fff;border-radius:50%;font-size:42px;display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.siparis-no-kutu{background:var(--krem);border:2px dashed var(--ceviz);border-radius:10px;padding:16px;font-size:22px;font-weight:700;color:var(--kahve);margin:18px 0;letter-spacing:1px}
.havale-bilgi{background:var(--krem);border-radius:10px;padding:20px;margin:20px 0;text-align:left}
.havale-bilgi pre{font-family:inherit;white-space:pre-wrap;background:#fff;padding:14px;border-radius:8px;margin:10px 0}
.tesekkur-ozet{text-align:left;margin:24px 0}
.tesekkur-aksiyon{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------- ICERIK SAYFA ---------- */
/* İçerik stilleri icerik.css dosyasına taşındı. */

/* ---------- ILETISIM ---------- */
.iletisim-duzen{display:grid;grid-template-columns:1fr 1.4fr;gap:40px;padding-bottom:50px}
.iletisim-liste{margin-top:20px}
.iletisim-liste li{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--krem);font-size:15px}
.iletisim-liste span{font-size:22px}
.iletisim-form-kutu{background:#fff;border:1px solid var(--krem-koyu);border-radius:var(--radius);padding:30px}
.iletisim-form-kutu h3{margin-bottom:20px}

/* ---------- HATA ---------- */
.hata-sayfa{padding:80px 20px;text-align:center}
.hata-kutu h1{font-size:7rem;color:var(--ceviz)}
.hata-kutu h2{margin-bottom:14px}
.hata-kutu p{color:var(--gri);margin-bottom:24px}

/* ---------- HESABIM ---------- */
.hesabim-sayfa{display:grid;grid-template-columns:280px 1fr;gap:32px;padding:32px 0 50px}
.hesabim-menu{background:#fff;border:1px solid var(--krem-koyu);border-radius:var(--radius);padding:16px;height:fit-content}
.hesabim-uye-kart{display:flex;gap:14px;align-items:center;padding:16px;background:var(--krem);border-radius:10px;margin-bottom:14px}
.uye-avatar{width:48px;height:48px;border-radius:50%;background:var(--kahve);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;text-transform:uppercase}
.uye-rozet{font-size:12px;color:var(--gri)}
.rozet-toptan{color:var(--altin);font-weight:700}
.hesabim-menu>a{display:block;padding:13px 16px;border-radius:8px;font-weight:500;color:var(--koyu);margin-bottom:4px}
.hesabim-menu>a:hover,.hesabim-menu>a.aktif{background:var(--krem);color:var(--kahve)}
.cikis-link{color:var(--kirmizi)!important;margin-top:8px;border-top:1px solid var(--krem);padding-top:14px!important}
.hesabim-icerik{background:#fff;border:1px solid var(--krem-koyu);border-radius:var(--radius);padding:32px}
.hesabim-baslik{font-size:1.6rem;margin-bottom:20px}
.hesabim-alt-baslik{font-size:1.2rem;margin:28px 0 16px}
.bayi-durum-kart{padding:18px;border-radius:10px;margin-bottom:24px}
.bayi-onaylandi{background:rgba(90,125,90,.12);border-left:4px solid var(--yesil)}
.bayi-beklemede{background:rgba(201,162,39,.12);border-left:4px solid var(--altin)}
.bayi-reddedildi{background:rgba(192,87,63,.12);border-left:4px solid var(--kirmizi)}
.ozet-kartlar{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:24px}
.ozet-kart{background:var(--krem);border-radius:10px;padding:20px;text-align:center}
.ozet-sayi{display:block;font-size:28px;font-weight:700;color:var(--kahve);font-family:'Playfair Display'}
.hesabim-tablo{width:100%;border-collapse:collapse}
.hesabim-tablo th{text-align:left;padding:12px;background:var(--krem);font-size:13px}
.hesabim-tablo td{padding:12px;border-top:1px solid var(--krem);font-size:14.5px}
.durum{display:inline-block;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600}
.durum-beklemede{background:#fdf0d5;color:#8a6d10}
.durum-onaylandi{background:#d5e8f5;color:#1a5a8a}
.durum-hazirlaniyor{background:#e8e0f5;color:#5a3a8a}
.durum-kargoda{background:#d5f0e8;color:#1a7a5a}
.durum-teslim{background:#d5f5d8;color:#2a7a2a}
.durum-iptal,.durum-iade{background:#f5d5d5;color:#8a2a2a}
.bos-durum-mini{color:var(--gri);padding:20px 0}
.bos-durum-mini a{color:var(--kahve);font-weight:600}
.geri-link{color:var(--gri);font-size:14px;display:inline-block;margin-bottom:12px}
.geri-link:hover{color:var(--kahve)}
.siparis-detay-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:20px}
.detay-kutu{background:var(--krem);border-radius:10px;padding:22px;margin-bottom:20px}
.detay-kutu h3{margin-bottom:16px;font-size:18px}
.adres-metin{font-family:inherit;white-space:pre-wrap;background:#fff;padding:12px;border-radius:8px;font-size:14px}
.durum-gecmis li{display:flex;align-items:center;gap:10px;padding:8px 0}
.durum-nokta{width:10px;height:10px;border-radius:50%;background:var(--kahve)}
.adres-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:24px}
.adres-kart{border:1px solid var(--krem-koyu);border-radius:10px;padding:18px;position:relative}
.adres-kart strong{display:block;margin-bottom:8px}
.adres-kart p{font-size:14px;color:#5a4d40}
.btn-link-sil{background:none;border:none;color:var(--kirmizi);cursor:pointer;font-size:13px;margin-top:10px;text-decoration:underline}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1024px){
  .urun-grid,.urun-grid-5,.urun-grid-4{grid-template-columns:repeat(4,1fr)}
  .kategori-grid{grid-template-columns:repeat(4,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .menu-liste>li>a{padding:14px 12px;font-size:13.5px}
}
@media(max-width:860px){
  .mobil-menu-perde.acik{display:block}
  .sepet-duzen,.odeme-duzen,.urun-detay,.iletisim-duzen,.hesabim-sayfa,.siparis-detay-grid{grid-template-columns:1fr}
  .avantaj-grid{grid-template-columns:1fr 1fr}
  .ust-bar-sol{display:none}
  .sepet-ozet,.odeme-ozet{position:static}
  /* Ürün Detay Responsive */
  .urun-bilgi h1{font-size:1.6rem}
  .guncel-fiyat-buyuk{font-size:28px}
  .urun-sepet-form{gap:10px}
  .btn-sepet-detay{flex:1 1 100%;order:3;min-width:0}
}
@media(max-width:560px){
  .urun-grid,.urun-grid-3,.urun-grid-4,.urun-grid-5{grid-template-columns:repeat(2,1fr);gap:14px}
  .kategori-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr}
  .form-grid,.uyelik-tipi-secim-modern,.ozet-kartlar,.adres-grid{grid-template-columns:1fr}
  .toptan-cta-ic{flex-direction:column;text-align:center}
  .header-aksiyon{gap:8px}
  .aksiyon-yazi{display:none}
  /* Ürün Detay Mobile */
  .urun-bilgi h1{font-size:1.4rem}
  .urun-fiyat-blok{padding:16px}
  .guncel-fiyat-buyuk{font-size:24px}
  .thumbnail-item{min-width:70px;width:70px}
  .rozet-badge{font-size:14px;padding:6px 12px}
}

/* ---------- ODEME EK (PayTR / Banka) ---------- */
.banka-mini-liste{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.banka-mini-liste span{background:var(--krem);border:1px solid var(--krem-koyu);border-radius:6px;padding:3px 10px;font-size:12px;color:var(--kahve)}
.banka-kart{background:#fff;border:1px solid var(--krem-koyu);border-radius:10px;padding:16px;margin-bottom:12px;text-align:left}
.banka-kart strong{color:var(--kahve);display:block;margin-bottom:6px}
.banka-kart p{font-size:14px;margin:3px 0}
.iban-satir strong{letter-spacing:.5px;color:var(--koyu)}
.paytr-hata-mesaj{background:#f8e6e0;color:#9a3f2a;padding:12px;border-radius:8px;font-size:14px;margin:14px 0}

/* ---------- CANLI ARAMA ONERI ---------- */
.arama-form{position:relative}
.arama-oneri{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;border:1px solid var(--krem-koyu);border-radius:12px;box-shadow:var(--golge-buyuk);overflow:hidden;display:none;z-index:120;max-height:420px;overflow-y:auto}
.arama-oneri.acik{display:block}
.oneri-oge{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--krem)}
.oneri-oge:hover,.oneri-oge.oneri-aktif{background:var(--krem)}
.oneri-oge img{width:46px;height:46px;object-fit:cover;border-radius:8px}
.oneri-ad{flex:1;font-size:14px;color:var(--koyu)}
.oneri-fiyat{font-weight:700;color:var(--kahve);font-size:14px}
.oneri-bos{padding:16px;text-align:center;color:var(--gri);font-size:14px}

.sepet-stok-uyari{display:block;font-size:12px;color:#b45309;margin-top:4px}
.sepet-stok-uyari.stok-tukendi{color:#b91c1c;font-weight:600}
.sepet-stok-uyari.stok-az{color:#92400e}

/* ---------- BLOG ---------- */
/* Blog stilleri blog.css dosyasına taşındı. */

/* ---------- STOK FILTRESI & GELINCE HABER VER ---------- */
.stok-bildirim-kutu{background:var(--krem);border:1px solid var(--cizgi);border-left:3px solid var(--altin);border-radius:var(--radius-mini);padding:24px;margin-bottom:24px}
.stok-bildirim-kutu h4{margin-bottom:8px;color:var(--kahve-koyu);font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px}
.stok-bildirim-kutu p{font-size:14px;color:var(--gri);margin-bottom:16px;line-height:1.6}
.stok-bildirim-form{display:flex;gap:10px;flex-wrap:wrap}
.stok-bildirim-form input{flex:1;min-width:200px;padding:12px 14px;border:1.5px solid var(--cizgi-koyu);border-radius:var(--radius-mini);font-family:inherit;background:#fff;font-size:15px;color:var(--koyu);transition:border-color .18s ease,box-shadow .18s ease}
.stok-bildirim-form input:focus{outline:none;border-color:var(--ceviz);box-shadow:var(--golge-odak)}
.stok-bildirim-form button{padding:12px 24px;background:var(--altin);color:#fff;border:1px solid var(--altin);border-radius:var(--radius-mini);font-weight:600;cursor:pointer;transition:background .18s ease,border-color .18s ease;white-space:nowrap}
.stok-bildirim-form button:hover{background:var(--altin-koyu);border-color:var(--altin-koyu)}

/* ---------- WHATSAPP SIPARIS BUTONU ---------- */
.wa-siparis-btn{display:flex;align-items:center;justify-content:center;gap:10px;background:#25D366;color:#fff;padding:15px 24px;border-radius:var(--radius-mini);font-weight:600;font-size:15px;margin-top:18px;transition:background .18s ease}
.wa-siparis-btn:hover{background:#1eb958}
.wa-siparis-btn svg{flex-shrink:0}

/* ---------- SIKCA SORULAN SORULAR (FAQ) ---------- */
/* SSS stilleri anasayfa.css dosyasına taşındı. */

/* ---------- VARYANT SECIMI (KURUMSAL) ---------- */
.varyant-secim{margin:24px 0}
.varyant-grup{margin-bottom:18px;padding:18px;background:var(--zemin);border-radius:var(--radius-mini);border:1px solid var(--cizgi)}
.varyant-etiket{display:block;font-weight:700;margin-bottom:12px;color:var(--kahve);font-size:13px;letter-spacing:.4px;text-transform:uppercase}
.varyant-butonlar{display:flex;flex-wrap:wrap;gap:10px}

.varyant-btn{padding:11px 18px;border:1px solid var(--cizgi-koyu);background:#fff;border-radius:var(--radius-mini);cursor:pointer;font-size:14px;font-weight:600;font-family:inherit;color:var(--koyu);transition:border-color .18s ease,background .18s ease,color .18s ease;position:relative}
.varyant-btn:hover:not(.tukendi):not(.aktif){border-color:var(--ceviz)}
.varyant-btn.aktif{border-color:var(--kahve);background:var(--kahve);color:#fff}
.varyant-btn.tukendi{opacity:.45;cursor:not-allowed;text-decoration:line-through}

.sepet-varyant{display:block;font-size:12.5px;color:var(--gri);margin-top:3px}
.sepet-kisi{display:block;font-size:12.5px;color:var(--kahve);margin-top:3px;font-style:italic}

/* ---------- VARYANT SWATCH (renk/gorsel) + GRUP URUN ---------- */
.varyant-btn-renk,.varyant-btn-gorsel{display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 7px}
.swatch-renk{width:24px;height:24px;border-radius:50%;border:1px solid rgba(0,0,0,.15);display:inline-block;flex-shrink:0}
.varyant-btn-gorsel img{width:32px;height:32px;border-radius:var(--r-sm);object-fit:cover}

.grup-urun-butonlar{display:flex;flex-wrap:wrap;gap:10px}
.grup-urun-btn{display:block;width:60px;height:60px;border-radius:var(--radius-mini);overflow:hidden;border:1px solid var(--cizgi-koyu);transition:border-color .18s ease;position:relative;background:#fff}
.grup-urun-btn img{width:100%;height:100%;object-fit:cover}
.grup-urun-btn:hover:not(.tukendi){border-color:var(--ceviz)}
.grup-urun-btn.aktif{border-color:var(--kahve);box-shadow:inset 0 0 0 1px var(--kahve)}
.grup-urun-btn.tukendi{opacity:.45;cursor:not-allowed}
.grup-urun-btn.tukendi::before{content:'✕';position:absolute;inset:0;background:rgba(34,26,18,.55);color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;z-index:2}

.kisisellestirme-alan{margin:4px 0 18px;background:var(--krem);padding:16px;border-radius:var(--radius-mini);border:1px solid var(--cizgi)}
.kisisellestirme-alan label{display:block;font-weight:600;margin-bottom:7px;font-size:14px;color:var(--koyu)}
.kisisellestirme-alan label small{font-weight:400;color:var(--gri)}
.kisisellestirme-alan input{width:100%;padding:11px 13px;border:1.5px solid var(--cizgi-koyu);border-radius:var(--radius-mini);font-family:inherit;background:#fff;color:var(--koyu)}
.kisisellestirme-alan input:focus{outline:none;border-color:var(--ceviz);box-shadow:var(--golge-odak)}

/* ---------- KARGO ILERLEME CUBUGU & SON ADET ---------- */
.kargo-bar-kutu{margin:10px 0}
.kargo-bar{height:8px;background:var(--krem-koyu);border-radius:6px;overflow:hidden;margin-top:6px}
.kargo-bar span{display:block;height:100%;background:var(--altin);border-radius:6px;transition:width .5s ease}
.kargo-basarili{color:var(--yesil);font-weight:600}
.son-adet-uyari{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;background:rgba(181,80,58,.08);color:var(--kirmizi);padding:9px 16px;border:1px solid rgba(181,80,58,.2);border-radius:var(--r-sm);font-weight:600;font-size:13.5px;margin-bottom:20px}

/* ==================== RESPONSIVE TASARIM ==================== */

/* Tablet (1024px ve altı) */
@media(max-width:1024px){
  .kapsayici{padding:0 18px}
  .header-orta{max-width:420px}
  .footer-grid{grid-template-columns:repeat(4,1fr);gap:32px}
  .urun-grid,.urun-grid-5{grid-template-columns:repeat(4,1fr);gap:16px}
  .urun-grid-4{grid-template-columns:repeat(3,1fr)}
  .kategori-grid{grid-template-columns:repeat(4,1fr)}
  .avantaj-grid{grid-template-columns:repeat(2,1fr)}
  .hero-slider{height:380px;margin:0 18px}
  .toptan-cta-ic{flex-direction:column;text-align:center}
  .toptan-cta-yazi{max-width:100%}
  .toptan-cta-butonlar{width:100%;max-width:400px}
}

/* Tablet - Küçük (860px ve altı) */
@media(max-width:860px){
  .ust-bilgi-bar{display:none}
  /* Header mobilde fixed top */
  .site-header{position:fixed;top:0;left:0;right:0;z-index:var(--z-sticky)}
  .ana-icerik{padding-top:72px}
  .header-ic{height:auto;min-height:56px;gap:12px;padding:12px 16px;align-items:center;flex-wrap:nowrap;justify-content:space-between}
  .mobil-menu-buton{order:1;display:flex;flex-shrink:0}
  .logo{order:2;flex:1 1 auto;display:flex;justify-content:center}
  .logo img{height:38px}
  .header-aksiyon{order:3;flex-shrink:0;gap:2px}
  /* Arama mobilde gizle */
  .header-orta{display:none}
  /* Mobil arama ikonu göster */
  .mobil-arama-btn{display:flex}
  .aksiyon-btn span:not(.sepet-rozet){display:none}
  .aksiyon-btn{padding:9px}
  .sepet-btn{padding:9px}
  /* Ana menü mobilde gizli */
  .ana-menu{border-bottom:none}
  /* Avantaj seridi mobilde gizle */
  .avantaj-seridi{display:none}
  /* Mobil alt nav — her zaman görünür (footer'ın altında kaybolmasın) */
  .mobil-alt-nav{position:fixed;bottom:0;left:0;right:0;z-index:var(--z-sticky);background:#fff;border-top:1px solid var(--cizgi);box-shadow:0 -2px 10px rgba(0,0,0,.06)}
  /* Footer'ın en altına boşluk (mobil nav çakışmasın) */
  .footer-alt{padding-bottom:16px}
  
  .hero-slider{height:320px;margin:0 14px}
  .hero-ic h1{font-size:1.8rem;padding:0 32px}
  
  .bolum{padding:40px 0}
  .bolum-baslik h2{font-size:1.5rem}
  
  .footer-grid{grid-template-columns:1fr 1fr;gap:40px}
  .footer-hakkinda{grid-column:1/-1}
  .footer-iletisim{grid-column:1/-1}
  
  .urun-grid,.urun-grid-5,.urun-grid-4{grid-template-columns:repeat(3,1fr);gap:14px}
  .kategori-grid{grid-template-columns:repeat(4,1fr);gap:14px}
  
  .sepet-duzen{grid-template-columns:1fr}
  .urun-detay{grid-template-columns:1fr;gap:32px}
  
  .toptan-avantajlar{grid-template-columns:1fr}
}

/* Mobil (640px ve altı) */
@media(max-width:640px){
  .header-ic{min-height:60px;gap:10px;padding:10px 0}
  .logo img{height:40px}
  .header-orta{margin:0}
  .arama-form{border-radius:var(--radius-kucuk)}
  .arama-form input{font-size:15px;padding:12px 14px 12px 4px}
  .arama-icon{padding:0 14px}
  .aksiyon-btn{padding:0;min-width:44px;min-height:44px;justify-content:center}
  .aksiyon-btn span:not(.sepet-rozet){display:none}
  .sepet-btn{padding:0 8px;min-width:auto}
  .aksiyon-btn svg{width:23px;height:23px}
  
  .hero-slider{height:280px;margin:0 12px;border-radius:var(--radius-kucuk)}
  .hero-ic{padding:0 24px}
  .hero-ic h1{font-size:1.5rem;margin-bottom:12px}
  .hero-ic p{font-size:0.95rem;margin-bottom:22px}
  .hero-ic .btn{padding:12px 24px;font-size:14px}
  .hero-ok{width:38px;height:38px;font-size:20px}
  .hero-onceki{left:10px}
  .hero-sonraki{right:10px}
  
  .avantaj-grid{grid-template-columns:1fr 1fr;gap:10px;padding:16px}
  .avantaj{flex-direction:column;text-align:center;align-items:center;padding:16px 12px;gap:8px}
  .avantaj span{font-size:26px}
  .avantaj small{font-size:12px}
  
  .bolum{padding:32px 0}
  .bolum-baslik{margin-bottom:24px;flex-direction:column;align-items:flex-start}
  .bolum-baslik h2{font-size:1.35rem}
  .bolum-baslik .tumu-gor{align-self:flex-end}
  
  .urun-grid,.urun-grid-5,.urun-grid-4{grid-template-columns:repeat(2,1fr);gap:12px}
  .kategori-grid{grid-template-columns:repeat(3,1fr);gap:12px}
  .kategori-kart h3{font-size:12px;padding:10px 8px}
  
  .footer-grid{grid-template-columns:1fr;gap:32px}
  .footer-hakkinda{text-align:center}
  .footer-logo-wrap{display:block}
  .footer-sosyal{justify-content:center}
  
  .toptan-cta{padding:40px 0}
  .toptan-cta h2{font-size:1.5rem}
  .toptan-cta-ic{gap:32px}
  
  .sepet-drawer{width:100%;max-width:100vw}
  .hb-grid{grid-template-columns:1fr}
  
  .form-grid{grid-template-columns:1fr}
  .auth-kart{padding:28px 22px}
  .auth-kart-kayit{padding:28px 22px}
  .auth-kart-logo img{height:46px}
  
  .urun-kart-baslik{font-size:13px}
  .guncel-fiyat{font-size:16px}
  .sepete-ekle-btn{font-size:12px;padding:9px 14px}

  /* Sayfa üst / başlık */
  .sayfa-ust{padding:20px 16px 14px}
  .sayfa-baslik{font-size:1.6rem}

  .magaza-arac-cubugu{padding:10px 12px}

  /* Ürün detay */
  .urun-detay{gap:24px;padding-bottom:36px}
  .urun-bilgi h1{font-size:1.5rem}
  .guncel-fiyat-buyuk{font-size:28px}
  .eski-fiyat-buyuk{font-size:17px}
  .galeri-kucuk{width:64px;height:64px}
  .urun-sepet-form{gap:10px}
  .btn-sepet-detay{min-width:0;flex:1 1 100%;order:3}
  .urun-sekmeler{padding:18px 16px;margin-top:24px}
  .sekme-buton{padding:12px 14px;font-size:14px}

  /* İletişim / blog / içerik */
  .iletisim-duzen,.blog-detay{gap:24px;padding-bottom:36px}
  .blog-grid{gap:16px}

  /* Dokunma hedeflerini büyüt (min ~40px) */
  .favori-btn{width:40px;height:40px}
  .ms-adet button{width:34px;height:34px;font-size:18px}
  .ms-adet span{min-width:36px}
  .kt-cikar{width:30px;height:30px;font-size:18px}
  .galeri-kucuk{width:60px;height:60px}

  /* Galeri lightbox mobil */
  .galeri-lightbox{padding:12px}
  .galeri-lightbox .lightbox-onceki,.galeri-lightbox .lightbox-sonraki{width:40px;height:54px;font-size:32px;background:rgba(0,0,0,.4)}
  .galeri-lightbox .lightbox-onceki{left:6px}
  .galeri-lightbox .lightbox-sonraki{right:6px}
  .galeri-lightbox .lightbox-img{max-width:88vw}

  /* Toptan CTA buton genişliği taşma önleme */
  .toptan-cta-butonlar{min-width:0;width:100%}

  /* Duyuru çubuğu mobil */
  .duyuru-bar{font-size:12.5px}
  .duyuru-bar-ic{padding:7px 38px;min-height:38px}

  /* Tablolar yatay kaydırılabilir */
  .karsilastir-sarmal,.hesabim-tablo-sarmal{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .hesabim-tablo{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}

  /* Hesabım */
  .hesabim-sayfa{padding:20px 0 40px;gap:20px}
  .hesabim-icerik{padding:20px}
  .hesabim-baslik{font-size:1.4rem}
  .hesabim-menu>a{padding:14px 16px}

  /* iOS otomatik zoom'unu önle: form alanları min 16px */
  .form-grup input,.form-grup textarea,.form-grup select,
  .kupon-form input,.arama-form input,.fk-degerler input,
  .sepet-adet,.stok-bildirim-form input,.yorum-form input,
  .yorum-form select,.yorum-form textarea{font-size:16px}
}

/* Mobil - Küçük (480px ve altı) */
@media(max-width:480px){
  .kapsayici{padding:0 16px}
  
  .header-ic{min-height:56px;gap:4px;padding:9px 0}
  .logo img{height:36px}
  .header-aksiyon{gap:0}
  .aksiyon-btn{min-width:42px;min-height:42px}
  .sepet-btn{min-width:auto;padding:0 8px}
  
  .whatsapp-buton{bottom:18px;right:18px;width:52px;height:52px}
  
  .bolum{padding:30px 0}
  .bolum-baslik h2{font-size:1.3rem}
  
  .btn{padding:11px 20px;font-size:14px}
  .btn-buyuk{padding:13px 28px;font-size:15px}
  
  .urun-grid,.urun-grid-5,.urun-grid-4,.urun-grid-3{grid-template-columns:repeat(2,1fr);gap:10px}
  .kategori-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .urun-kart-govde{padding:12px}
  .guncel-fiyat{font-size:16px}
  .sepete-ekle-btn{font-size:12px;padding:9px 10px}
  .hizli-bakis-btn{display:none}
  
  .footer-alt-ic{flex-direction:column;text-align:center;gap:12px}
  .footer-odeme{flex-direction:row;gap:16px;justify-content:center}
  
  .flash-konteyner{left:10px;right:10px;max-width:none}
}

/* Mobil Menu (yan çekmece) */
@media(max-width:860px){
  /* Menü açıkken header'ı overlay'in üstüne çıkar (stacking context düzeltmesi) */
  body.menu-acik .site-header{z-index:1000}
  .mobil-menu-perde{display:none;position:fixed;inset:0;background:rgba(46,33,23,.55);z-index:998;opacity:0;transition:opacity .3s ease}
  .mobil-menu-perde.acik{display:block;opacity:1}

  .ana-menu{
    display:block;
    position:fixed;
    top:0;
    right:0;
    width:300px;
    max-width:84vw;
    height:100%;
    background:#fff;
    z-index:999;
    transform:translateX(100%);
    transition:transform .32s cubic-bezier(.4,0,.2,1);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    box-shadow:-8px 0 30px rgba(46,33,23,.18);
    border:none;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .ana-menu.acik{transform:translateX(0)}

  /* Çekmece başlığı */
  .mobil-menu-baslik{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 20px;
    background:var(--krem);
    border-bottom:1px solid var(--krem-koyu);
    position:sticky;
    top:0;
    z-index:2;
  }
  .mobil-menu-baslik span{
    font-family:'Playfair Display',Georgia,serif;
    font-size:18px;
    font-weight:700;
    color:var(--kahve-koyu);
  }
  .mobil-menu-kapat{
    background:none;
    border:none;
    font-size:30px;
    line-height:1;
    cursor:pointer;
    color:var(--gri);
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
  }
  .mobil-menu-kapat:hover{color:var(--kahve);background:rgba(0,0,0,.04)}

  .ana-menu .kapsayici{padding:0}

  .menu-liste{
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    width:100%;
    gap:0;
    padding:6px 0;
  }
  .menu-liste>li{border-bottom:1px solid var(--cizgi)}
  .menu-liste>li:last-child{border-bottom:none}

  .menu-liste>li>a{
    display:block;
    padding:15px 22px;
    text-align:left;
    border-radius:0;
    white-space:normal;
    font-size:15px;
  }
  .menu-liste>li>a::after{display:none}
  .menu-liste>li>a:hover,.menu-liste>li>a:active{background:var(--krem);color:var(--kahve)}

  /* Alt menüsü olan öğelerde +/− göstergesi */
  .menu-acilir>a{position:relative}
  .menu-acilir>a::before{
    content:'+';
    position:absolute;
    right:22px;
    top:50%;
    transform:translateY(-50%);
    font-size:20px;
    font-weight:400;
    color:var(--ceviz);
    transition:transform .25s ease;
  }
  .menu-acilir.acik>a::before{content:'−'}

  .alt-menu{
    position:static;
    transform:none;
    box-shadow:none;
    border:none;
    background:var(--zemin);
    border-radius:0;
    padding:0;
    min-width:0;
    opacity:1;
    visibility:visible;
    max-height:0;
    overflow:hidden;
    transition:max-height .3s ease;
  }
  .menu-acilir.acik .alt-menu{max-height:600px}
  /* Mobilde dokunmayla tetiklenen masaüstü :hover kuralını ez (kayma sorunu) */
  .menu-acilir:hover>.alt-menu,
  .menu-acilir:hover .alt-menu{
    position:static;
    transform:none;
    left:auto;
    min-width:0;
    box-shadow:none;
    border:none;
    padding:0;
  }

  .alt-menu li a{
    padding:12px 22px 12px 38px;
    margin:0;
    border-radius:0;
    font-size:14px;
    border-top:1px solid var(--cizgi);
  }
  .alt-menu li a:hover{padding-left:42px}

  /* Hamburger -> çarpı animasyonu */
  .mobil-menu-buton.aktif span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .mobil-menu-buton.aktif span:nth-child(2){opacity:0}
  .mobil-menu-buton.aktif span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
}

/* ---------- SKELETON / SHIMMER YÜKLEME ---------- */
.skeleton{position:relative;overflow:hidden;background:var(--krem);border-radius:var(--r-md)}
.skeleton::after{content:'';position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation:shimmer 1.4s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}
.skeleton-metin{height:12px;border-radius:var(--r-sm);margin-bottom:8px}
.skeleton-metin.kisa{width:55%}
.skeleton-baslik{height:20px;border-radius:var(--r-sm);margin-bottom:12px;width:70%}
.skeleton-gorsel{aspect-ratio:1;width:100%;border-radius:var(--r-md)}
.skeleton-buton{height:42px;border-radius:var(--r-md);width:100%}
/* Ürün kartı iskeleti */
.urun-kart-skeleton{background:#fff;border:1px solid var(--cizgi);border-radius:var(--radius-kucuk);padding:12px;overflow:hidden}
.urun-kart-skeleton .skeleton-govde{padding-top:12px}
@media(prefers-reduced-motion:reduce){.skeleton::after{animation:none}}

/* ---------- BUTON YÜKLEME (LOADING) DURUMU ---------- */
.btn[data-yukleniyor="1"],.btn.yukleniyor{position:relative;color:transparent!important;pointer-events:none}
.btn[data-yukleniyor="1"]>*,.btn.yukleniyor>*{visibility:hidden}
.btn[data-yukleniyor="1"]::after,.btn.yukleniyor::after{content:'';position:absolute;top:50%;left:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:btnDon .6s linear infinite;visibility:visible}
.btn-cizgi.yukleniyor::after,.btn-cizgi[data-yukleniyor="1"]::after{border-color:rgba(107,68,35,.35);border-top-color:var(--kahve)}
@keyframes btnDon{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.btn.yukleniyor::after,.btn[data-yukleniyor="1"]::after{animation-duration:1.2s}}

/* Print Stili */
@media print{
  .site-header,
  .ana-menu,
  .site-footer,
  .whatsapp-buton,
  .flash-konteyner{display:none}
  
  .kapsayici{max-width:100%;padding:0}
  
  body{
    font-size:12pt;
    line-height:1.5;
    color:#000;
    background:#fff;
  }
  
  a{text-decoration:underline;color:#000}
  img{max-width:100%;page-break-inside:avoid}
}

/* Auth Responsive Ek Kurallar */
@media(max-width:480px){
  .auth-sayfa{padding:0;background:#fff;align-items:stretch}
  .auth-kart,.auth-kart-kayit{box-shadow:none;border:none;border-radius:0;padding:24px 16px;max-width:100%}
  .auth-kart-logo img{height:42px}
  .uyelik-tipi-secim-modern{grid-template-columns:1fr 1fr;gap:8px}
  .tip-kart{padding:14px 10px}
  .tip-kart small{display:none}
  .tip-ikon{font-size:26px}
  .btn-kayit{padding:15px 24px;font-size:15px}
  .form-grid{gap:0}
}

/* ========== FANCYBOX ÖZELLEŞTIRME ========== */
.fancybox__container{
  --fancybox-bg: rgba(24, 24, 27, 0.92);
  --fancybox-color: #fff;
  --fancybox-accent-color: var(--kahve, #8B4513);
}

/* Fancybox toolbar style */
.fancybox__toolbar{
  background: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent);
}

/* Fancybox navigation buttons */
.fancybox__nav .carousel__button{
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
  transition: all 0.3s ease;
}

.fancybox__nav .carousel__button:hover{
  background: rgba(255,255,255,0.2);
  transform: scale(1.1);
}

/* Fancybox thumbs */
.fancybox__thumbs .carousel__slide{
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.fancybox__thumbs .carousel__slide.is-nav-selected{
  border-color: var(--kahve, #8B4513);
}

/* Fancybox caption */
.fancybox__caption{
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  padding: 20px;
  font-size: 14px;
}

/* Smooth transitions */
.fancybox__content{
  animation: fancyboxFadeIn 0.3s ease-out;
}

@keyframes fancyboxFadeIn{
  from{
    opacity: 0;
    transform: scale(0.95);
  }
  to{
    opacity: 1;
    transform: scale(1);
  }
}

/* ========== ÜRÜN DETAY MİKRO ETKİLEŞİMLER ========== */
/* Sekme geçişi — yumuşak, sade */
@keyframes sekmeGir{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}
.sekme-icerik.aktif{animation:sekmeGir .25s ease-out}

/* Resim zoom göstergesi nabız */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}

/* Loading shimmer */
@keyframes shimmer{0%{background-position:-468px 0}100%{background-position:468px 0}}
.loading-shimmer{animation:shimmer 1.2s ease-in-out infinite;background:linear-gradient(to right,var(--krem) 0%,var(--krem-koyu) 20%,var(--krem) 40%,var(--krem) 100%);background-size:800px 104px}

/* Yukarı çık butonu */
.scroll-top-btn{position:fixed;bottom:80px;right:24px;width:48px;height:48px;background:var(--kahve);color:#fff;border:none;border-radius:50%;cursor:pointer;opacity:0;visibility:hidden;transition:all .3s ease;z-index:var(--z-sticky);display:flex;align-items:center;justify-content:center;box-shadow:var(--golge)}
.scroll-top-btn.visible{opacity:1;visibility:visible}
.scroll-top-btn:hover{background:var(--kahve-koyu);transform:translateY(-3px)}


/* OLD RESPONSIVE SECTION REMOVED - SEE BOTTOM OF FILE FOR NEW VERSION */
  
  .urun-detay{display:block}
  .urun-bilgi{box-shadow:none;border:1px solid #ddd;page-break-inside:avoid}
  .galeri-ana-modern{page-break-inside:avoid}
}


/* ========================================
   PROFESYONEL ÜRÜN DETAY SAYFA - V3.0
   Modern, Temiz ve Kurumsal Tasarım
   ======================================== */

/* Ürün Detay Header & Breadcrumb */
.urun-detay-header{background:#fff;border-bottom:1px solid var(--cizgi);padding:16px 0;margin-bottom:0;position:relative;z-index:10}
.ekmek-kirintisi-modern{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px}
.bc-link{display:flex;align-items:center;gap:6px;color:var(--gri);transition:color .2s ease;text-decoration:none}
.bc-link:hover{color:var(--kahve)}
.bc-link svg{flex-shrink:0;opacity:.6}
.bc-sep{flex-shrink:0;opacity:.3;color:var(--gri)}
.bc-active{color:var(--koyu);font-weight:600}

/* Modern Grid Layout */
.urun-detay-container{background:var(--zemin);padding:40px 0;position:relative;z-index:1}
.urun-detay-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:60px;align-items:start;max-width:1400px;margin:0 auto}

/* Galeri Bölümü */
.urun-galeri-bolum{position:relative;z-index:1}

/* Bilgi Bölümü - Sticky Yapı */
.urun-bilgi-bolum{position:relative;z-index:1}
.urun-bilgi-sticky{position:sticky;top:100px;z-index:2}
.urun-bilgi{background:#fff;border-radius:24px;padding:40px;box-shadow:0 4px 24px rgba(0,0,0,.06),0 0 0 1px rgba(0,0,0,.02);border:none;position:relative;z-index:3}

/* Ürün Başlık Alanı */
.urun-baslik-alan{margin-bottom:28px;padding-bottom:24px;border-bottom:2px solid var(--krem)}
.urun-baslik{font-size:2.2rem;line-height:1.25;margin-bottom:16px;color:var(--koyu);font-weight:700;letter-spacing:-.02em;font-family:'Playfair Display',Georgia,serif}
.urun-meta-bilgi{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.meta-item{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--gri);padding:6px 14px;background:var(--krem);border-radius:20px}
.meta-item svg{flex-shrink:0;width:16px;height:16px;opacity:.7}

/* Yıldız Rating */
.meta-rating{background:transparent;padding:0}
.yildiz-rating{display:flex;gap:2px}
.yildiz{color:#ddd;transition:color .2s}
.yildiz.dolu{color:#ffa41c}
.rating-text{font-size:14px;color:var(--koyu);font-weight:600;margin-left:6px}

/* Kısa Açıklama Modern */
.urun-kisa-aciklama-modern{margin:24px 0;padding:20px;background:linear-gradient(135deg,rgba(168,129,74,.04) 0%,transparent 100%);border-radius:12px;border-left:4px solid var(--altin)}
.urun-kisa-aciklama-modern p{color:#5a4d40;line-height:1.75;margin:0;font-size:15px}

/* Özellik Kutusu Modern */
.urun-ozellik-kutu{margin:28px 0;background:var(--krem);border-radius:16px;padding:24px;border:1px solid var(--krem-koyu)}
.ozellik-baslik{display:flex;align-items:center;gap:10px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--cizgi)}
.ozellik-baslik svg{flex-shrink:0;color:var(--kahve)}
.ozellik-baslik h3{font-size:16px;font-weight:700;color:var(--kahve);margin:0;text-transform:uppercase;letter-spacing:.5px}

/* Özellik Liste Modern */
.ozellik-liste-modern{list-style:none;padding:0;margin:0}
.ozellik-liste-modern li{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--cizgi)}
.ozellik-liste-modern li:last-child{border-bottom:none}
.ozellik-etiket{font-size:14px;color:var(--gri);font-weight:500}
.ozellik-deger{font-size:14px;color:var(--koyu);font-weight:600;text-align:right}

/* Durum Badge */
.durum-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:20px;font-size:13px;font-weight:700}
.durum-badge::before{content:'';width:8px;height:8px;border-radius:50%;background:currentColor}
.durum-var{color:#0f7b3f;background:rgba(15,123,63,.1)}
.durum-yok{color:#c0382b;background:rgba(192,56,43,.1)}

/* WhatsApp Yeni Tasarım */
.wa-siparis-btn-yeni{display:inline-flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:16px 24px;background:linear-gradient(135deg,#25d366 0%,#20c050 100%);color:#fff;font-weight:700;font-size:15px;border-radius:14px;text-decoration:none;transition:all .35s cubic-bezier(.4,0,.2,1);box-shadow:0 6px 20px rgba(37,211,102,.25),0 2px 6px rgba(37,211,102,.15);margin-top:20px}
.wa-siparis-btn-yeni svg{width:22px;height:22px;flex-shrink:0;filter:drop-shadow(0 2px 4px rgba(0,0,0,.15))}
.wa-siparis-btn-yeni:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(37,211,102,.35),0 4px 12px rgba(37,211,102,.2)}

/* Aksiyonlar Alt */
.urun-aksiyonlar-alt{display:flex;gap:12px;margin-top:24px;padding-top:24px;border-top:1px solid var(--cizgi)}
.paylas-butonlar{display:flex;gap:8px}
.btn-icon{width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--cizgi);background:#fff;border-radius:12px;cursor:pointer;transition:all .3s ease}
.btn-icon svg{width:20px;height:20px;color:var(--gri)}
.btn-icon:hover{border-color:var(--kahve);background:var(--krem)}
.btn-icon:hover svg{color:var(--kahve)}

/* Responsive Improvements - FIXED */
@media(max-width:1024px){
  .urun-detay-grid{grid-template-columns:1fr !important;gap:40px;max-width:100%}
  .urun-galeri-bolum{position:static !important;z-index:1}
  .urun-bilgi-bolum{position:static !important;z-index:1}
  .urun-bilgi-sticky{position:static !important}
  .urun-bilgi{border-radius:20px;padding:32px;position:relative !important;z-index:1}
  .urun-baslik{font-size:1.9rem}
}

@media(max-width:768px){
  .urun-detay-header{padding:12px 0}
  .urun-detay-container{padding:24px 0}
  .urun-detay-grid{gap:28px;grid-template-columns:1fr !important}
  .urun-galeri-bolum{position:static !important}
  .urun-bilgi-bolum{position:static !important}
  .urun-bilgi-sticky{position:static !important}
  .urun-bilgi{padding:24px;border-radius:16px;position:relative !important;z-index:1}
  .urun-baslik{font-size:1.6rem;margin-bottom:12px}
  .urun-baslik-alan{margin-bottom:20px;padding-bottom:20px}
  .urun-meta-bilgi{gap:12px}
  .meta-item{font-size:12.5px;padding:5px 12px}
  .ozellik-kutu{padding:20px}
  .urun-kisa-aciklama-modern{padding:16px;margin:20px 0}
  .urun-ozellik-kutu{margin:20px 0;padding:20px}
  .wa-siparis-btn-yeni{padding:14px 20px;font-size:14px}
  .urun-aksiyonlar-alt{flex-direction:column}
  .btn-icon{width:44px;height:44px}
}

@media(max-width:480px){
  .urun-detay-header{padding:10px 0}
  .ekmek-kirintisi-modern{font-size:13px;gap:6px}
  .bc-link span{display:none}
  .bc-link svg{display:block;width:18px;height:18px}
  .bc-sep{display:block;width:14px;height:14px}
  .bc-active{display:block;font-size:13px}
  .urun-detay-container{padding:20px 0}
  .urun-detay-grid{grid-template-columns:1fr !important}
  .urun-galeri-bolum,  .urun-bilgi-bolum,  .urun-bilgi-sticky{position:static !important}
  .urun-bilgi{padding:20px;position:relative !important;z-index:1}
  .urun-baslik{font-size:1.4rem}
  .meta-item{padding:4px 10px;font-size:12px}
  .rating-text{font-size:13px}
  .ozellik-liste-modern li{flex-direction:column;align-items:flex-start;gap:6px}
  .ozellik-deger{text-align:left}
}
  .urun-kisa-aciklama-modern{padding:16px;margin:20px 0}
  .urun-ozellik-kutu{margin:20px 0;padding:20px}
  .wa-siparis-btn-yeni{padding:14px 20px;font-size:14px}
  .urun-aksiyonlar-alt{flex-direction:column}
  .btn-icon{width:44px;height:44px}
}

@media(max-width:480px){
  .urun-detay-header{padding:12px 0}
  .ekmek-kirintisi-modern{font-size:13px;gap:6px}
  .bc-link span{display:none}
  .bc-link svg{display:block}
  .bc-active{display:block}
  .urun-baslik{font-size:1.4rem}
  .urun-bilgi{padding:20px}
  .meta-item{padding:4px 10px;font-size:12px}
  .rating-text{font-size:13px}
  .ozellik-liste-modern li{flex-direction:column;align-items:flex-start;gap:6px}
  .ozellik-deger{text-align:left}
}


/* ========================================
   MODERN SEKME SİSTEMİ - V3.0
   ======================================== */

.urun-sekmeler-wrapper{background:#fff;border-top:1px solid var(--cizgi);padding:48px 0}
.urun-sekmeler-modern{max-width:1200px;margin:0 auto}

/* Sekme Navigasyon */
.sekme-nav{display:flex;gap:8px;border-bottom:2px solid var(--cizgi);margin-bottom:40px;overflow-x:auto;scrollbar-width:thin}
.sekme-nav-btn{display:inline-flex;align-items:center;gap:10px;padding:16px 24px;background:transparent;border:none;border-bottom:3px solid transparent;margin-bottom:-2px;font-size:15px;font-weight:600;color:var(--gri);cursor:pointer;transition:all .3s ease;white-space:nowrap;font-family:inherit}
.sekme-nav-btn svg{flex-shrink:0;width:20px;height:20px;opacity:.6;transition:opacity .3s}
.sekme-nav-btn span:first-of-type{flex-shrink:0}
.sekme-nav-btn:hover{color:var(--kahve);background:var(--krem)}
.sekme-nav-btn:hover svg{opacity:1}
.sekme-nav-btn.aktif{color:var(--kahve);border-bottom-color:var(--kahve)}
.sekme-nav-btn.aktif svg{opacity:1}
.sekme-badge{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 8px;background:var(--krem-koyu);color:var(--koyu);border-radius:12px;font-size:12px;font-weight:700}
.sekme-nav-btn.aktif .sekme-badge{background:var(--kahve);color:#fff}

/* Sekme Panel */
.sekme-panel{display:none}
.sekme-panel.aktif{display:block;animation:sekmeGir .4s cubic-bezier(.4,0,.2,1)}
@keyframes sekmeGir{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.sekme-icerik-wrapper{max-width:900px}

/* Boş Durum */
.bos-durum-sekme{text-align:center;padding:60px 20px;background:var(--krem);border-radius:16px;margin-bottom:40px}
.bos-durum-sekme svg{color:var(--gri-acik);margin-bottom:20px}
.bos-durum-sekme h3{color:var(--koyu);margin-bottom:8px;font-size:20px}
.bos-durum-sekme p{color:var(--gri);font-size:15px}
.bos-mesaj{text-align:center;padding:40px 20px;color:var(--gri);font-size:15px;background:var(--krem);border-radius:12px}

/* Yorum Kartları Modern */
.yorum-liste{display:flex;flex-direction:column;gap:20px;margin-bottom:48px}
.yorum-kart-modern{background:#fff;border:1px solid var(--cizgi);border-radius:16px;padding:24px;transition:all .3s ease}
.yorum-kart-modern:hover{box-shadow:0 4px 20px rgba(0,0,0,.08);border-color:var(--kahve)}
.yorum-ust-modern{display:flex;gap:16px;margin-bottom:16px}
.yorum-avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--kahve) 0%,var(--altin) 100%);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;flex-shrink:0}
.yorum-bilgi{flex:1}
.yorum-ad{display:block;font-size:16px;color:var(--koyu);margin-bottom:6px}
.yorum-meta{display:flex;align-items:center;gap:12px}
.yorum-yildiz{display:flex;gap:2px}
.yildiz-mini{color:#ddd}
.yildiz-mini.dolu{color:#ffa41c}
.yorum-tarih{font-size:13px;color:var(--gri)}
.yorum-metin{color:#5a4d40;line-height:1.7;font-size:15px;margin:0}

/* Soru Kartları Modern */
.soru-liste{display:flex;flex-direction:column;gap:24px;margin-bottom:48px}
.soru-kart-modern{background:#fff;border:1px solid var(--cizgi);border-radius:16px;padding:24px;transition:all .3s ease}
.soru-kart-modern:hover{box-shadow:0 4px 20px rgba(0,0,0,.08);border-color:var(--kahve)}
.soru-ust{display:flex;gap:14px;margin-bottom:14px}
.soru-icon{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#3498db 0%,#2980b9 100%);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;flex-shrink:0}
.soru-bilgi strong{display:block;font-size:15px;color:var(--koyu);margin-bottom:4px}
.soru-bilgi small{font-size:13px;color:var(--gri)}
.soru-metin{color:#5a4d40;line-height:1.7;font-size:15px;margin:0 0 16px 54px}
.cevap-kutu{display:flex;gap:14px;margin-left:54px;padding:16px;background:var(--krem);border-radius:12px;border-left:3px solid var(--altin)}
.cevap-icon{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--altin) 0%,var(--kahve) 100%);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;flex-shrink:0}
.cevap-icerik strong{display:block;font-size:14px;color:var(--kahve);margin-bottom:8px}
.cevap-icerik p{color:#5a4d40;line-height:1.6;font-size:14px;margin:0}

/* Form Modern */
.yorum-form-modern{background:var(--krem);border-radius:20px;padding:32px;border:2px solid var(--krem-koyu)}
.form-baslik{display:flex;align-items:center;gap:12px;font-size:20px;color:var(--koyu);margin-bottom:24px;font-weight:700}
.form-baslik svg{color:var(--kahve)}
.form-grup-modern{margin-bottom:20px}
.form-grup-modern label{display:block;font-size:14px;font-weight:600;color:var(--koyu);margin-bottom:8px}
.form-grup-modern input,
.form-grup-modern select,
.form-grup-modern textarea{width:100%;padding:14px 16px;border:2px solid var(--cizgi);border-radius:12px;font-family:inherit;font-size:15px;background:#fff;color:var(--koyu);transition:all .3s cubic-bezier(.4,0,.2,1)}
.form-grup-modern input:focus,
.form-grup-modern select:focus,
.form-grup-modern textarea:focus{outline:none;border-color:var(--kahve);box-shadow:0 0 0 4px rgba(168,129,74,.1);transform:translateY(-2px)}
.form-grup-modern textarea{resize:vertical;min-height:100px}
.btn-form-modern{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 32px;background:linear-gradient(135deg,var(--kahve) 0%,var(--kahve-koyu) 100%);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;transition:all .35s cubic-bezier(.4,0,.2,1);box-shadow:0 6px 20px rgba(168,129,74,.25);font-family:inherit}
.btn-form-modern svg{flex-shrink:0}
.btn-form-modern:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(168,129,74,.35)}

/* Responsive Sekmeler */
@media(max-width:768px){
  .urun-sekmeler-wrapper{padding:32px 0}
  .sekme-nav{gap:4px;margin-bottom:28px;flex-wrap:wrap}
  .sekme-nav-btn{padding:12px 16px;font-size:14px;gap:8px}
  .sekme-nav-btn span:first-of-type{display:none}
  .sekme-nav-btn svg{display:block}
  .sekme-badge{min-width:20px;height:20px;padding:0 6px;font-size:11px}
  .yorum-kart-modern,.soru-kart-modern{padding:18px}
  .yorum-avatar{width:40px;height:40px;font-size:18px}
  .soru-icon{width:36px;height:36px;font-size:16px}
  .soru-metin{margin-left:50px}
  .cevap-kutu{margin-left:50px;padding:12px}
  .yorum-form-modern{padding:24px}
  .form-baslik{font-size:18px;margin-bottom:20px}
  .btn-form-modern{width:100%;padding:14px 24px;font-size:15px}
}

@media(max-width:480px){
  .urun-sekmeler-wrapper{padding:24px 0}
  .sekme-nav-btn{padding:10px 12px;flex:1;min-width:80px}
  .yorum-ust-modern{flex-direction:column;gap:12px}
  .yorum-avatar{width:36px;height:36px;font-size:16px}
  .soru-metin{margin-left:0}
  .cevap-kutu{margin-left:0;flex-direction:column;gap:12px}
  .yorum-form-modern{padding:20px;border-radius:16px}
}


/* =====================================================================
   NATIVE LIGHTBOX MODAL (Fancybox replacement)
   ===================================================================== */
.lightbox-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.lightbox-modal.active {
  opacity: 1;
}

.lightbox-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
}

.lightbox-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px 80px;
}

.lightbox-image-container {
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-image-container img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: var(--koyu);
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 50%;
  z-index: 100001;
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
  background: var(--beyaz);
  transform: scale(1.1);
}

.lightbox-close {
  top: 20px;
  right: 20px;
  font-size: 36px;
  line-height: 1;
}

.lightbox-prev {
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 48px;
  line-height: 1;
  padding-bottom: 4px;
}

.lightbox-next {
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 48px;
  line-height: 1;
  padding-bottom: 4px;
}

.lightbox-prev:hover {
  transform: translateY(-50%) scale(1.1);
}

.lightbox-next:hover {
  transform: translateY(-50%) scale(1.1);
}

.lightbox-counter {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.9);
  color: var(--koyu);
  padding: 8px 20px;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 600;
  z-index: 100001;
}

.galeri-btn-native {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  display: block;
  width: 100%;
  position: relative;
}

/* Responsive Lightbox */
@media(max-width: 768px) {
  .lightbox-close,
  .lightbox-prev,
  .lightbox-next {
    width: 44px;
    height: 44px;
    font-size: 28px;
  }
  
  .lightbox-close {
    top: 10px;
    right: 10px;
  }
  
  .lightbox-prev {
    left: 10px;
  }
  
  .lightbox-next {
    right: 10px;
  }
  
  .lightbox-counter {
    bottom: 20px;
    font-size: 12px;
    padding: 6px 16px;
  }
  
  .lightbox-content {
    padding: 50px 10px 70px;
  }
}


/* =====================================================================
   PREMIUM MICRO-INTERACTIONS & MOBİL UX ENHANCEMENTLERİ
   Son Güncelleme: 2026-06-17
   ===================================================================== */

/* ── Header Glassmorphism ── */
.site-header.glass-active .ana-header{
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}

/* ── Badge Bounce Animasyonu ── */
@keyframes badge-bounce{
  0%{transform:scale(1)}
  30%{transform:scale(1.35)}
  60%{transform:scale(0.9)}
  100%{transform:scale(1)}
}

/* ── Premium Toast Bildirimleri ── */
.toast-container{
  position:fixed;
  top:24px;
  right:24px;
  z-index:var(--z-tooltip,1200);
  display:flex;
  flex-direction:column;
  gap:12px;
  pointer-events:none;
}
.toast{
  pointer-events:auto;
  padding:14px 20px;
  border-radius:var(--radius-kucuk,10px);
  background:#fff;
  border:1px solid var(--cizgi);
  box-shadow:var(--golge-buyuk);
  font-size:14px;
  font-weight:500;
  display:flex;
  align-items:center;
  gap:10px;
  min-width:260px;
  max-width:380px;
  animation:toast-slide-in .35s cubic-bezier(.34,1.56,.64,1);
  cursor:pointer;
  transition:opacity .3s,transform .3s;
}
.toast-basari{border-left:4px solid var(--yesil)}
.toast-hata{border-left:4px solid var(--kirmizi)}
.toast-uyari{border-left:4px solid var(--altin)}
.toast-info{border-left:4px solid var(--ceviz)}
.toast-success{border-left:4px solid var(--yesil)}
.toast-error{border-left:4px solid var(--kirmizi)}
.toast-warning{border-left:4px solid var(--altin)}
.toast-icon{font-size:18px;line-height:1;flex-shrink:0}
.toast-msg{flex:1;color:var(--koyu)}
@keyframes toast-slide-in{
  from{opacity:0;transform:translateX(100%) scale(.95)}
  to{opacity:1;transform:translateX(0) scale(1)}
}

/* ── Scroll Reveal ── */
.reveal,[data-reveal]{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s cubic-bezier(0,0,.2,1),transform .6s cubic-bezier(0,0,.2,1);
}
.reveal.revealed,[data-reveal].revealed{
  opacity:1;
  transform:translateY(0);
}

/* ── Skeleton Loading ── */
.skeleton{
  background:linear-gradient(90deg,var(--krem) 25%,var(--krem-koyu) 50%,var(--krem) 75%);
  background-size:200% 100%;
  animation:skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius:var(--r-md,8px);
}
@keyframes skeleton-shimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}

/* ── Sepete Ekle Flying Animation ── */
@keyframes fly-to-cart{
  0%{opacity:1;transform:translate(0,0) scale(1)}
  50%{opacity:.6;transform:translate(40px,-30px) scale(.6)}
  100%{opacity:0;transform:translate(80px,-60px) scale(.3)}
}

/* ── Premium Input/Form Elemanları ── */
.form-alan{margin-bottom:20px}
.form-label{display:block;font-size:14px;font-weight:600;color:var(--koyu);margin-bottom:8px}
.form-input,.form-select,.form-textarea{
  width:100%;
  padding:13px 16px;
  border:1.5px solid var(--cizgi);
  border-radius:var(--radius-mini,8px);
  font-size:15px;
  font-family:inherit;
  color:var(--koyu);
  background:#fff;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.form-input:focus,.form-select:focus,.form-textarea:focus{
  outline:none;
  border-color:var(--ceviz);
  box-shadow:var(--golge-odak);
}
.form-input::placeholder{color:var(--gri);opacity:.6}
.form-hata{font-size:13px;color:var(--kirmizi);margin-top:6px}

/* ── Mobil Bottom Sheet ── */
.mobil-filtre-sheet{
  position:fixed;
  inset:0;
  z-index:var(--z-modal,1000);
  pointer-events:none;
  opacity:0;
  transition:opacity .3s ease;
}
.mobil-filtre-sheet.acik{
  pointer-events:auto;
  opacity:1;
}
.mobil-filtre-sheet .filtre-perde{
  position:absolute;inset:0;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(4px);
}
.mobil-filtre-sheet .filtre-icerik{
  position:absolute;
  bottom:0;left:0;right:0;
  max-height:85vh;
  background:#fff;
  border-radius:20px 20px 0 0;
  padding:24px 20px calc(24px + env(safe-area-inset-bottom));
  transform:translateY(100%);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.mobil-filtre-sheet.acik .filtre-icerik{
  transform:translateY(0);
}
.filtre-sheet-handle{
  width:36px;height:4px;
  background:var(--cizgi-koyu);
  border-radius:9999px;
  margin:0 auto 20px;
}

/* ── Mobil Alt Navigasyon ── */
.mobil-alt-nav{
  display:none;
  position:fixed;
  bottom:0;left:0;right:0;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--cizgi);
  padding:8px 0 calc(8px + env(safe-area-inset-bottom));
  z-index:var(--z-sticky,100);
  transition:transform .3s ease;
}
.mobil-alt-nav-ic{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:2px;
}
.mobil-alt-nav-item{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:6px 4px;
  font-size:10px;font-weight:600;
  color:var(--gri);
  text-decoration:none;
  transition:color .2s ease;
}
.mobil-alt-nav-item.aktif{color:var(--kahve)}
.mobil-alt-nav-item svg{width:22px;height:22px}

/* ── Progress Bar (Kargo Ücretsiz Mesafe) ── */
.kargo-progress{
  background:var(--krem);
  border-radius:var(--r-full,9999px);
  height:6px;
  overflow:hidden;
  margin:8px 0;
}
.kargo-progress-fill{
  height:100%;
  background:linear-gradient(90deg,var(--altin),var(--yesil));
  border-radius:var(--r-full,9999px);
  transition:width .5s cubic-bezier(.4,0,.2,1);
}

/* ── Premium Ödeme Step Wizard ── */
.odeme-adimlar{
  display:flex;
  justify-content:center;
  gap:0;
  margin-bottom:40px;
  position:relative;
}
.odeme-adim{
  display:flex;align-items:center;gap:10px;
  padding:12px 24px;
  font-size:14px;font-weight:600;
  color:var(--gri);
  position:relative;
}
.odeme-adim::after{
  content:'';
  position:absolute;right:-12px;
  width:24px;height:24px;
  border-right:2px solid var(--cizgi);
  border-bottom:2px solid var(--cizgi);
  transform:rotate(-45deg);
}
.odeme-adim:last-child::after{display:none}
.odeme-adim-no{
  width:28px;height:28px;
  border-radius:50%;
  background:var(--krem);
  border:2px solid var(--cizgi);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;
  transition:all .2s ease;
}
.odeme-adim.aktif .odeme-adim-no{
  background:var(--kahve);color:#fff;border-color:var(--kahve);
}
.odeme-adim.aktif{color:var(--koyu)}
.odeme-adim.tamamlandi .odeme-adim-no{
  background:var(--yesil);color:#fff;border-color:var(--yesil);
}

/* ── Güven Rozetleri (Ödeme Sayfası) ── */
.guven-rozetleri{
  display:flex;flex-wrap:wrap;gap:16px;
  justify-content:center;
  padding:20px;
  background:var(--krem);
  border-radius:var(--radius-kucuk);
  margin-top:24px;
}
.guven-rozet{
  display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;color:var(--gri);
}
.guven-rozet svg{width:20px;height:20px;color:var(--yesil)}

/* ── Responsive: Mobil Optimizasyonları ── */
@media(max-width:860px){
  /* Mobil alt nav göster */
  .mobil-alt-nav{display:block}
  body{padding-bottom:0}

  /* Header compact */
  .ust-bilgi-bar{display:none}
  .header-ic{height:64px;gap:12px}
  .logo img{height:38px}
  .aksiyon-btn span{display:none}
  .aksiyon-btn{padding:8px}
  .header-orta{max-width:none}

  /* Touch targets minimum 48px */
  .btn,.sepete-ekle-btn,.aksiyon-btn,.favori-btn{min-height:48px}
  .arama-form input{min-height:48px}

  /* Ürün grid mobil */
  .urun-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .urun-grid-3,.urun-grid-4,.urun-grid-5{grid-template-columns:repeat(2,1fr)}

  /* Avantaj seridi */
  .avantaj-grid{grid-template-columns:1fr 1fr;gap:10px}
  .avantaj{padding:14px 12px;gap:10px}
  .avantaj span{font-size:22px}

  /* Footer */
  .footer-grid{grid-template-columns:1fr}

  /* Toast pozisyon */
  .toast-container{top:auto;bottom:calc(80px + env(safe-area-inset-bottom));right:16px;left:16px}
  .toast{min-width:0;max-width:none}

  /* WhatsApp butonu mobil alt nav üstünde */
  .whatsapp-buton{bottom:calc(80px + env(safe-area-inset-bottom))}

  /* Ödeme adımları mobil */
  .odeme-adimlar{flex-direction:column;align-items:flex-start;gap:12px}
  .odeme-adim::after{display:none}
}

@media(max-width:480px){
  .hero-slider{height:280px;margin:0 12px;border-radius:var(--radius-kucuk)}
  .hero-ic{padding:0 24px}
  .hero-ic h1{font-size:1.5rem}
  .hero-ok{width:36px;height:36px;font-size:18px}
  .bolum{padding:36px 0}
  .bolum-baslik h2{font-size:1.4rem}
  .kategori-grid{grid-template-columns:repeat(3,1fr);gap:10px}
  .kategori-kart-resim{height:100px}
}

/* ── Tablet ── */
@media(min-width:861px) and (max-width:1024px){
  .urun-grid{grid-template-columns:repeat(3,1fr)}
  .avantaj-grid{grid-template-columns:repeat(2,1fr)}
  .kategori-grid{grid-template-columns:repeat(4,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}

/* ── Keyboard Navigation Indicator ── */
body.keyboard-nav a:focus,
body.keyboard-nav button:focus,
body.keyboard-nav input:focus,
body.keyboard-nav [tabindex]:focus{
  outline:2px solid var(--ceviz);
  outline-offset:2px;
}


/* ── Sepet Kargo Banner (Üst Premium Bar) ── */
.sepet-kargo-banner{
  margin-bottom:24px;
  padding:16px 20px;
  background:#fff;
  border:1px solid var(--cizgi);
  border-radius:var(--radius-kucuk);
  box-shadow:var(--golge-xs);
}
.kargo-banner-ic{
  display:flex;align-items:center;gap:14px;
}
.kargo-banner-ikon{font-size:28px;flex-shrink:0}
.kargo-banner-yazi{flex:1}
.kargo-banner-yazi p{margin:0 0 8px;font-size:14px;color:var(--koyu)}
.kargo-banner-basarili p{margin:0;font-size:15px;color:var(--yesil);font-weight:600}
.sayfa-alt-baslik{font-size:14px;color:var(--gri);margin-top:4px}

/* ── SSS Modernizasyon ── */
/* SSS stilleri anasayfa.css dosyasına taşındı. */

/* ── Sepet Tablo Premium ── */
.sepet-duzen{display:grid;grid-template-columns:1fr 360px;gap:32px;padding-bottom:60px}
.sepet-tablo{width:100%;border-collapse:collapse}
.sepet-tablo th{text-align:left;padding:12px 8px;border-bottom:2px solid var(--cizgi);font-size:13px;color:var(--gri);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.sepet-tablo td{padding:16px 8px;border-bottom:1px solid var(--cizgi);vertical-align:middle}
.sepet-resim img{width:70px;height:70px;object-fit:cover;border-radius:var(--radius-mini)}
.sepet-ad a{font-weight:600;font-size:14px;color:var(--koyu);display:block;margin-bottom:4px}
.sepet-ad a:hover{color:var(--kahve)}
.sepet-varyant,.sepet-kisi{display:block;font-size:12px;color:var(--gri);margin-top:3px}
.sepet-adet{width:64px;padding:8px;border:1.5px solid var(--cizgi);border-radius:var(--radius-mini);text-align:center;font-size:14px;font-weight:600}
.sepet-adet:focus{border-color:var(--ceviz);box-shadow:var(--golge-odak);outline:none}
.sepet-toplam{font-weight:700;color:var(--kahve);white-space:nowrap}
.sepet-sil{background:none;border:none;font-size:22px;color:var(--gri-acik);cursor:pointer;padding:4px 8px;border-radius:50%;transition:color .2s,background .2s}
.sepet-sil:hover{color:var(--kirmizi);background:rgba(181,80,58,.08)}
.sepet-aksiyon{display:flex;justify-content:space-between;align-items:center;margin-top:20px;gap:12px;flex-wrap:wrap}
.sepet-stok-uyari{display:block;font-size:12px;margin-top:4px;color:var(--altin-koyu)}
.sepet-stok-uyari.stok-tukendi{color:var(--kirmizi);font-weight:600}
.sepet-stok-uyari.stok-az{color:var(--altin-koyu)}
.mini-rozet{display:inline-block;background:rgba(168,129,74,.12);color:var(--altin-koyu);font-size:11px;font-weight:600;padding:2px 8px;border-radius:20px;margin-top:4px}

/* ── Sepet Özet Panel ── */
.sepet-ozet{background:#fff;border:1px solid var(--cizgi);border-radius:var(--radius-kucuk);padding:24px;position:sticky;top:120px}
.sepet-ozet h3{font-size:18px;margin-bottom:20px;color:var(--koyu);font-family:'Inter',sans-serif;font-weight:700}
.kupon-form{display:flex;gap:8px;margin-bottom:14px}
.kupon-form input{flex:1;padding:10px 12px;border:1.5px solid var(--cizgi);border-radius:var(--radius-mini);font-size:14px;font-family:inherit}
.kupon-form input:focus{border-color:var(--ceviz);box-shadow:var(--golge-odak);outline:none}
.ozet-satir{display:flex;justify-content:space-between;align-items:center;padding:10px 0;font-size:14px;color:var(--koyu)}
.ozet-satir+.ozet-satir{border-top:1px solid var(--cizgi)}
.ozet-indirim span:last-child{color:var(--yesil);font-weight:600}
.ozet-genel{font-size:18px;font-weight:700;margin-top:8px;padding-top:14px;border-top:2px solid var(--cizgi-koyu)}
.hediye-aktif{background:rgba(168,129,74,.06);border:1px solid rgba(168,129,74,.2);padding:10px 14px;border-radius:var(--radius-mini);font-size:13px;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between}
.btn-link-kaldir{background:none;border:none;color:var(--kirmizi);font-size:12px;cursor:pointer;text-decoration:underline}
.kargo-bar-kutu{padding:10px 0;margin:8px 0}
.kargo-ipucu{font-size:13px;color:var(--koyu);margin:0 0 8px}
.kargo-basarili{color:var(--yesil);font-weight:600}
.kargo-bar{height:6px;background:var(--krem-koyu);border-radius:9999px;overflow:hidden}
.kargo-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--altin),var(--yesil));border-radius:9999px;transition:width .5s ease}

@media(max-width:860px){
  .sepet-duzen{grid-template-columns:1fr;gap:20px}
  .sepet-ozet{position:static}
  .sepet-tablo thead{display:none}
  .sepet-tablo tr{display:grid;grid-template-columns:70px 1fr;gap:8px;padding:16px 0;border-bottom:1px solid var(--cizgi)}
  .sepet-tablo td{padding:0;border:none}
  .sepet-tablo td::before{content:attr(data-label);font-size:11px;color:var(--gri);text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:2px}
  .sepet-resim{grid-row:1/4}
  .sepet-sil-hucre{position:absolute;top:16px;right:0}
}

/* ── Boş Durum Genel ── */
.bos-durum{text-align:center;padding:80px 24px;max-width:480px;margin:0 auto}
.bos-ikon{font-size:64px;margin-bottom:16px;opacity:.7;line-height:1}
.bos-durum p{color:var(--gri);font-size:16px;margin-bottom:24px;line-height:1.6}


/* ── Blog Grid & Kartları ── */
.blog-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.blog-kart{
  background:#fff;
  border:1px solid var(--cizgi);
  border-radius:var(--radius-kucuk);
  overflow:hidden;
  transition:transform .28s cubic-bezier(.4,0,.2,1),box-shadow .28s ease,border-color .25s ease;
  display:flex;flex-direction:column;
}
.blog-kart:hover{
  transform:translateY(-4px);
  box-shadow:var(--golge-buyuk);
  border-color:var(--cizgi-koyu);
}
.blog-kart-resim{
  display:block;
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--krem);
}
.blog-kart-resim img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .55s cubic-bezier(.2,.6,.2,1);
}
.blog-kart:hover .blog-kart-resim img{transform:scale(1.05)}
.blog-kart-govde{
  padding:20px;display:flex;flex-direction:column;flex:1;
}
.blog-tarih{
  font-size:12px;color:var(--gri);font-weight:500;margin-bottom:8px;
}
.blog-kart-govde h3{
  font-size:16px;font-weight:700;color:var(--koyu);margin-bottom:10px;
  font-family:'Inter',sans-serif;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.blog-kart-govde h3 a{color:inherit}
.blog-kart-govde h3 a:hover{color:var(--kahve)}
.blog-kart-govde p{
  font-size:14px;color:var(--gri);line-height:1.65;flex:1;
  margin-bottom:14px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.blog-devam{
  font-size:13px;font-weight:600;color:var(--kahve);
  display:inline-flex;align-items:center;gap:5px;
  transition:color .2s,gap .2s;
}
.blog-devam:hover{color:var(--altin-koyu);gap:9px}

@media(max-width:860px){
  .blog-grid{grid-template-columns:1fr 1fr;gap:16px}
}
@media(max-width:480px){
  .blog-grid{grid-template-columns:1fr;gap:14px}
}

/* ── Sayfalama (Pagination) ── */
.sayfalama{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin-top:36px;padding-top:24px;border-top:1px solid var(--cizgi);
}
.sayfalama a,.sayfalama span{
  display:flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;padding:0 8px;
  border-radius:var(--radius-mini);
  font-size:14px;font-weight:600;
  color:var(--koyu);
  border:1px solid var(--cizgi);
  background:#fff;
  transition:all .18s ease;
}
.sayfalama a:hover{
  border-color:var(--ceviz);
  color:var(--kahve);
  background:var(--krem);
}
.sayfalama a.aktif,.sayfalama span.aktif{
  background:var(--kahve);
  color:#fff;
  border-color:var(--kahve);
}
.sayfalama .sayfa-link[disabled]{opacity:.4;pointer-events:none}

/* ── Ekmek Kırıntısı (Breadcrumb) ── */
.ekmek-kirintisi{
  font-size:13px;color:var(--gri);margin-bottom:12px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.ekmek-kirintisi a{color:var(--gri);transition:color .2s}
.ekmek-kirintisi a:hover{color:var(--kahve)}
.ekmek-kirintisi span{opacity:.4;font-size:11px}
.ekmek-kirintisi strong{color:var(--koyu);font-weight:600}

/* ── Mağaza Düzen ── */
/* Artık magaza.css dosyasından yönetiliyor — buradaki kurallar kaldırıldı. */

/* ── Mağaza Sonuç Üstü ── */
/* Artık magaza.css dosyasından yönetiliyor. */


/* ── Hesabım Filtre Butonları ── */
.hm-filtre-btn{
  padding:7px 14px;
  border:1.5px solid var(--cizgi);
  border-radius:var(--r-full,9999px);
  font-size:13px;font-weight:600;
  color:var(--gri);
  background:#fff;
  text-decoration:none;
  transition:all .18s ease;
  white-space:nowrap;
}
.hm-filtre-btn:hover{
  border-color:var(--ceviz);color:var(--kahve);background:var(--krem);
}
.hm-filtre-btn.aktif{
  background:var(--kahve);color:#fff;border-color:var(--kahve);
}

/* ── Durum Badge Renkler ── */
.durum{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 10px;
  border-radius:var(--r-full,9999px);
  font-size:12px;font-weight:600;
  white-space:nowrap;
}
.durum-beklemede{background:rgba(245,158,11,.1);color:#B45309}
.durum-onaylandi{background:rgba(59,130,246,.1);color:#1D4ED8}
.durum-hazirlaniyor{background:rgba(139,92,246,.1);color:#6D28D9}
.durum-kargoda{background:rgba(16,185,129,.1);color:#047857}
.durum-teslim{background:rgba(5,150,105,.12);color:#047857}
.durum-iptal{background:rgba(239,68,68,.1);color:#B91C1C}
.durum-iade{background:rgba(234,88,12,.1);color:#9A3412}


/* ── Mağaza Araç Çubuğu ── */
.magaza-arac-cubugu{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:20px;padding-bottom:16px;
  border-bottom:1px solid var(--cizgi);
  gap:12px;flex-wrap:wrap;
}
.siralama-form{display:flex;align-items:center;gap:8px}
.siralama-form label{font-size:13px;color:var(--gri);font-weight:500;white-space:nowrap}
.siralama-form select{
  padding:8px 32px 8px 12px;border:1.5px solid var(--cizgi);
  border-radius:var(--radius-mini);font-size:13.5px;
  font-family:inherit;color:var(--koyu);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237C7269' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
  appearance:none;-webkit-appearance:none;cursor:pointer;min-width:170px;
}
.siralama-form select:focus{border-color:var(--ceviz);outline:none;box-shadow:var(--golge-odak)}

/* Sayfalama boşluk ayracı */
.sayfalama-ara{color:var(--gri-acik);padding:0 4px;font-size:14px}
.sayfalama-numaralar{display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap}

/* Daha fazla butonu */
.sayfa-daha-fazla{justify-content:center;gap:8px}

/* Mağaza boş durum */
.magaza-bos{padding:60px 24px;text-align:center;background:#fff;border:1px solid var(--cizgi);border-radius:var(--radius-kucuk)}

@media(max-width:640px){
  .magaza-arac-cubugu{flex-direction:column;align-items:flex-start}
  .siralama-form{width:100%}
  .siralama-form select{flex:1}
}


/* ── Son Gezilen Ürünler ── */
.son-gezilen-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:14px;
}
.son-gezilen-kart{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--cizgi);
  border-radius:var(--radius-kucuk);
  overflow:hidden;text-decoration:none;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.son-gezilen-kart:hover{
  transform:translateY(-3px);
  box-shadow:var(--golge);
  border-color:var(--cizgi-koyu);
}
.son-gezilen-resim{
  aspect-ratio:1;overflow:hidden;background:var(--krem);
}
.son-gezilen-resim img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .4s ease;
}
.son-gezilen-kart:hover .son-gezilen-resim img{transform:scale(1.05)}
.son-gezilen-bilgi{padding:10px 12px}
.son-gezilen-ad{
  display:block;font-size:12.5px;color:var(--koyu);
  font-weight:500;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-bottom:5px;
}
.son-gezilen-fiyat{
  font-size:14px;font-weight:700;color:var(--kahve);
}

@media(max-width:860px){
  .son-gezilen-grid{grid-template-columns:repeat(4,1fr);gap:10px}
}
@media(max-width:480px){
  .son-gezilen-grid{grid-template-columns:repeat(3,1fr);gap:8px}
  .son-gezilen-bilgi{padding:8px}
  .son-gezilen-ad{font-size:11.5px}
  .son-gezilen-fiyat{font-size:13px}
}


/* ── Çerez Onay Banner (KVKK) ── */
.cerez-banner{
  position:fixed;
  bottom:0;left:0;right:0;
  z-index:var(--z-toast,500);
  background:var(--koyu);
  color:#e6dccd;
  padding:16px 0;
  box-shadow:0 -4px 20px rgba(0,0,0,.15);
  animation:cerez-giris .4s ease;
}
@keyframes cerez-giris{
  from{transform:translateY(100%);opacity:0}
  to{transform:translateY(0);opacity:1}
}
.cerez-ic{
  max-width:1260px;margin:0 auto;
  padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
}
.cerez-metin{display:flex;align-items:center;gap:12px;flex:1;min-width:200px}
.cerez-ikon{font-size:28px;flex-shrink:0}
.cerez-metin p{margin:0;font-size:13.5px;line-height:1.6;color:#cabcab}
.cerez-metin a{color:var(--altin);text-decoration:underline;font-weight:600}
.cerez-aksiyonlar{display:flex;gap:8px;flex-shrink:0}
.cerez-banner .btn{border-color:rgba(255,255,255,.3)}
.cerez-banner .btn-cizgi{color:#cabcab;border-color:rgba(255,255,255,.2)}
.cerez-banner .btn-cizgi:hover{background:rgba(255,255,255,.08);color:#fff}

@media(max-width:640px){
  .cerez-ic{flex-direction:column;align-items:stretch;text-align:center}
  .cerez-metin{flex-direction:column;gap:8px}
  .cerez-aksiyonlar{justify-content:center}
  .cerez-banner{padding:20px 0 calc(20px + env(safe-area-inset-bottom))}
}


/* ── Blog Detay ── */
.blog-detay{
  display:grid;grid-template-columns:1fr 280px;gap:40px;
  align-items:start;
}
.blog-yazi h1{
  font-size:clamp(1.6rem,4vw,2.2rem);margin:0 0 16px;
  color:var(--kahve-koyu);line-height:1.25;
}
.blog-detay-kapak{
  width:100%;aspect-ratio:16/8;object-fit:cover;
  border-radius:var(--radius-kucuk);margin-bottom:24px;
}
.blog-meta{
  display:flex;flex-wrap:wrap;gap:16px;
  font-size:13.5px;color:var(--gri);
  margin-bottom:28px;padding-bottom:20px;
  border-bottom:1px solid var(--cizgi);
}
.blog-icerik{
  font-size:16px;line-height:1.85;color:var(--koyu);
}
.blog-icerik h2,.blog-icerik h3{
  margin-top:32px;margin-bottom:12px;
  color:var(--kahve-koyu);
}
.blog-icerik p{margin-bottom:16px}
.blog-icerik img{
  max-width:100%;height:auto;border-radius:var(--radius-kucuk);
  margin:20px 0;
}
.blog-icerik a{color:var(--kahve);text-decoration:underline;text-underline-offset:3px}
.blog-icerik blockquote{
  margin:20px 0;padding:16px 20px;
  border-left:4px solid var(--altin);
  background:var(--krem);border-radius:0 var(--radius-mini) var(--radius-mini) 0;
  font-style:italic;color:var(--gri);
}
.blog-icerik ul,.blog-icerik ol{margin:12px 0;padding-left:24px}
.blog-icerik li{margin-bottom:8px}

/* Etiketler */
.blog-etiketler{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-top:24px;padding-top:20px;border-top:1px solid var(--cizgi);
}
.etiket{
  display:inline-block;padding:5px 12px;
  background:var(--krem);border:1px solid var(--cizgi);
  border-radius:var(--r-full,9999px);font-size:12.5px;
  color:var(--gri);font-weight:500;
}

/* Paylaşım Butonları */
.blog-paylas{
  display:flex;align-items:center;gap:10px;
  margin-top:24px;padding-top:20px;border-top:1px solid var(--cizgi);
}
.blog-paylas-etiket{font-size:13px;color:var(--gri);font-weight:600}
.blog-paylas-btn{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  border:1.5px solid var(--cizgi);background:#fff;
  color:var(--gri);text-decoration:none;
  font-size:16px;transition:all .2s ease;cursor:pointer;
}
.blog-paylas-btn:hover{border-color:var(--ceviz);color:var(--kahve);background:var(--krem)}
.paylas-x:hover{color:#000;border-color:#000}
.paylas-fb:hover{color:#1877f2;border-color:#1877f2}
.paylas-wa:hover{color:#25d366;border-color:#25d366}

/* Blog Sidebar */
.blog-yan{
  position:sticky;top:110px;
}
.blog-yan h3{
  font-size:16px;font-weight:700;color:var(--kahve-koyu);
  margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--cizgi);
  font-family:'Inter',sans-serif;
}
.blog-yan-oge{
  display:flex;gap:12px;align-items:center;
  padding:10px 0;border-bottom:1px solid var(--krem);
  text-decoration:none;transition:padding-left .2s;
}
.blog-yan-oge:hover{padding-left:4px}
.blog-yan-oge img{
  width:56px;height:56px;border-radius:var(--radius-mini);
  object-fit:cover;flex-shrink:0;background:var(--krem);
}
.blog-yan-oge span{
  font-size:13.5px;font-weight:500;color:var(--koyu);
  line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

@media(max-width:860px){
  .blog-detay{grid-template-columns:1fr;gap:32px}
  .blog-yan{position:static}
}


/* ═══════════════════════════════════════════════════════════
   YAZDIRMA (Print Stylesheet)
   ═══════════════════════════════════════════════════════════ */
@media print{
  /* Gizle: header, footer, nav, whatsapp, cookie banner, bottom nav */
  .site-header,.site-footer,.mobil-alt-nav,.whatsapp-buton,
  .cerez-banner,.karsilastir-bar,.hb-modal,.sepet-drawer,
  .sepet-drawer-perde,.flash-konteyner,.duyuru-bar,
  .blog-paylas,.blog-yan,.magaza-kenar,
  .btn,.hm-sidebar,.hm-nav{display:none!important}

  /* Reset */
  body{background:#fff!important;color:#000!important;font-size:12pt}
  a{color:#000!important;text-decoration:none!important}
  .kapsayici{max-width:100%!important;padding:0!important}

  /* Tek kolon */
  .blog-detay,.sepet-duzen,.hm-sayfa,.sd-grid{
    grid-template-columns:1fr!important;display:block!important;
  }

  /* Blog yazdırma */
  .blog-yazi{max-width:100%}
  .blog-detay-kapak{max-height:300px;object-fit:contain}
  .blog-icerik{font-size:11pt;line-height:1.6}

  /* Sayfa kırılmaları */
  h1,h2,h3{page-break-after:avoid}
  table,figure,img{page-break-inside:avoid}

  /* URL'leri göster */
  a[href^="http"]:after{content:" (" attr(href) ")";font-size:9pt;color:#666}
  a[href^="/"]:after{content:none}
}


/* ── SSS Arama ── */
.sss-arama-kutu{
  margin-bottom:28px;
  max-width:480px;
}
.sss-arama-sonuc{
  font-size:13px;color:var(--gri);margin-top:8px;
}


/* ── Yukarı Çık Butonu ── */
.yukari-btn{
  position:fixed;
  bottom:calc(90px + env(safe-area-inset-bottom));
  left:24px;
  width:44px;height:44px;
  border-radius:50%;
  background:var(--acik);
  border:1.5px solid var(--cizgi);
  box-shadow:var(--golge);
  color:var(--kahve);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;
  transition:opacity .3s,visibility .3s,transform .3s,background .2s;
  z-index:var(--z-whatsapp,90);
}
.yukari-btn.gorunur{opacity:1;visibility:visible}
.yukari-btn:hover{background:var(--krem);transform:translateY(-2px);box-shadow:var(--golge-buyuk)}
@media(max-width:860px){
  .yukari-btn{bottom:calc(140px + env(safe-area-inset-bottom));left:16px;width:40px;height:40px}
}


/* ── Taksit Tablosu (Ürün Detay) ── */
.taksit-kutu{
  background:#fff;border:1px solid var(--cizgi);
  border-radius:var(--radius-kucuk);padding:20px;margin-top:20px;
}
.taksit-kutu h4{
  font-size:15px;font-weight:700;color:var(--koyu);margin:0 0 14px;
  font-family:'Inter',sans-serif;
  display:flex;align-items:center;gap:8px;
}
.taksit-tablo{width:100%;border-collapse:collapse;font-size:13px}
.taksit-tablo th{
  text-align:left;padding:8px 10px;background:var(--krem);
  font-weight:600;color:var(--gri);font-size:12px;
  text-transform:uppercase;letter-spacing:.3px;
  border-bottom:1px solid var(--cizgi);
}
.taksit-tablo td{
  padding:8px 10px;border-bottom:1px solid var(--krem);color:var(--koyu);
}
.taksit-tablo tr:last-child td{border-bottom:none}
.taksit-tablo .taksit-tek-cekim{font-weight:700;color:var(--kahve)}

/* ── Ürün Detay: Güvenlik Rozetleri (ürün bilgi altı) ── */
.pd-guven-satirlari{
  display:flex;flex-wrap:wrap;gap:12px;
  margin-top:16px;padding-top:16px;
  border-top:1px solid var(--cizgi,#ECE7DF);
}
.pd-guven-oge{
  display:flex;align-items:center;gap:6px;
  font-size:12.5px;color:var(--gri,#7C7269);font-weight:500;
}
.pd-guven-oge svg{color:var(--yesil,#4F7355);flex-shrink:0}

/* ── Ürün Detay: Kargo Bilgi Satırı ── */
.pd-kargo-bilgi{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;margin-top:12px;
  background:var(--krem,#F7F4EF);
  border-radius:var(--radius-mini,8px);
  font-size:13.5px;color:var(--koyu,#221A12);
}
.pd-kargo-bilgi svg{color:var(--ceviz,#8A6B52);flex-shrink:0}
.pd-kargo-bilgi strong{color:var(--yesil,#4F7355)}

/* ── Ürün Detay: Ürün Özellik Tablosu ── */
.pd-ozellik-tablo{
  width:100%;border-collapse:collapse;margin-top:16px;
}
.pd-ozellik-tablo tr:nth-child(even){background:var(--krem,#F7F4EF)}
.pd-ozellik-tablo th{
  text-align:left;padding:10px 14px;
  font-size:13.5px;font-weight:600;color:var(--gri,#7C7269);
  width:140px;border-bottom:1px solid var(--cizgi,#ECE7DF);
}
.pd-ozellik-tablo td{
  padding:10px 14px;font-size:14px;color:var(--koyu,#221A12);
  border-bottom:1px solid var(--cizgi,#ECE7DF);
}


/* ── Footer SA AGENTS Credit ── */
.footer-yazilim{text-align:center;padding:12px 0 0;margin-top:12px;border-top:1px solid rgba(255,255,255,.06)}
.footer-yazilim-link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;color:rgba(255,255,255,.4);text-decoration:none;transition:color .2s;
}
.footer-yazilim-link:hover{color:rgba(255,255,255,.7)}
.footer-yazilim-link img{opacity:.5;transition:opacity .2s}
.footer-yazilim-link:hover img{opacity:.8}
.footer-yazilim-link strong{font-weight:700}

@media(max-width:860px){
  .footer-alt{padding-bottom:16px}
  .footer-yazilim{padding:8px 0 0;margin-top:8px}
}