:root{
  --green:#354528;
  --green-dark:#26331d;
  --green-light:#4a5e38;
  --gold:#c8a24a;
  --gold-light:#e0c27e;
  --cream:#faf8f3;
  --ink:#24291f;
  --muted:#6b6f68; /* WCAG AA kontrast için koyulaştırıldı (cream zemin üzerinde 4.83:1) */
  --line:#e8e4da;
  --white:#ffffff;
  --shadow:0 8px 30px rgba(22,77,55,.10);
  --radius:14px;
  /* Shopier marka rengi — DOĞRULANMADI, tahmini değerdir.
     Gerçek logoyu edindiğinde rengi buradan tek seferde değiştir;
     üst bant ikonu, menü linki ve tüm Shopier butonları buradan beslenir. */
  --shopier:#7048E8;
  --shopier-koyu:#4a2bb0;
}

/* ---------- Karanlık Mod ----------
   html[data-tema="koyu"] üst banttaki tema düğmesiyle açılır, tercih
   localStorage'da saklanır (js/app.js). Marka rengi (yeşil/altın) korunur,
   sadece zemin/metin/yüzey renkleri koyu tonlara çevrilir. Site koyu mod
   düşünülerek tasarlanmadığı için bazı ikinci derece bileşenlerde küçük
   kontrast farkları kalabilir; ana sayfa, ürün kartları, ürün detayı,
   sepet ve header/footer test edilmiştir. */
:root[data-tema="koyu"]{
  --green:#5a7248;
  --green-dark:#141810;
  --green-light:#6f8a56;
  --gold:#d8b667;
  --gold-light:#ecd8a0;
  --cream:#1b1e17;
  --ink:#eae7dd;
  --muted:#a7ab9d;
  --line:#3a3f31;
  --white:#242820;
  --shadow:0 8px 30px rgba(0,0,0,.45);
}
html[data-tema="koyu"] body{background:var(--cream);color:var(--ink)}
html[data-tema="koyu"] #starfield{opacity:.4}
html[data-tema="koyu"] img:not(.logo-img):not(.mnav-logo-img){filter:brightness(.92)}

/* Karanlık mod aç/kapa düğmesi — js/info.js tarafından enjekte edilir */
.tema-float{
  position:fixed; left:18px; bottom:80px; z-index:55;
  width:46px; height:46px; border-radius:50%; border:1px solid var(--line);
  background:var(--white); color:var(--green-dark); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(22,77,55,.18);
  transition:transform .2s ease;
}
.tema-float:hover{transform:translateY(-2px)}
.tema-float svg{width:20px;height:20px}
.tema-float .tema-ikon-ay{display:none}
html[data-tema="koyu"] .tema-float .tema-ikon-gunes{display:none}
html[data-tema="koyu"] .tema-float .tema-ikon-ay{display:block}
@media (max-width:760px){ .tema-float{ bottom:138px } } /* mobil alt gezinme çubuğu + yukarı çık butonunun üstünde kalsın */
*{margin:0;padding:0;box-sizing:border-box}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
html{scroll-behavior:smooth;background:var(--cream)}
body{
  font-family:'Jost',system-ui,sans-serif;
  color:var(--ink);
  background:transparent;
  line-height:1.6;
}
/* Arka plan yıldız katmanı (stars.js oluşturur) */
#starfield{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1240px;margin:0 auto;padding:0 20px}

/* TOPBAR */
.topbar{background:var(--green-dark);color:#e9f3ee;font-size:13px;letter-spacing:.3px}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:38px;padding:5px 20px}
.topbar strong{color:var(--gold-light)}
/* KAYAN YAZI (MARQUEE) */
.marquee{flex:1;min-width:0;overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 92%,transparent)}
.marquee-track{display:inline-flex;align-items:center;white-space:nowrap;animation:marquee 28s linear infinite;will-change:transform}
.marquee-track>span{padding:0 22px}
.marquee-track .mq-sep{color:var(--gold-light);padding:0 4px;opacity:.75}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* KAMPANYA GERİ SAYIMI BANDI */
.kampanya-bar{
  display:none;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  padding:10px 20px;background:linear-gradient(90deg,var(--gold),#d8b568);
  color:#3a2e08;text-decoration:none;font-size:13.5px;font-weight:600;
  text-align:center;transition:filter .2s;
}
.kampanya-bar:hover{filter:brightness(1.04)}
.kampanya-sayac{
  font-family:'Cormorant Garamond',serif;font-size:17px;font-weight:700;
  background:rgba(255,255,255,.35);padding:2px 12px;border-radius:20px;
  letter-spacing:.5px;font-variant-numeric:tabular-nums;
}
@media(max-width:480px){
  .kampanya-bar{font-size:12px;padding:8px 14px;gap:8px}
  .kampanya-sayac{font-size:15px;padding:2px 9px}
}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}
.topbar-socials{display:flex;align-items:center;gap:6px;flex:none}
.tsoc{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#e9f3ee;transition:all .2s;line-height:0}
.tsoc>span{display:flex;align-items:center;justify-content:center}
.tsoc svg{width:16px;height:16px;display:block}
.tsoc:hover{background:rgba(255,255,255,.15);color:#fff;transform:translateY(-1px)}
.tsoc-ig:hover{color:#f09433}
.tsoc-wa:hover{color:#25D366}
.tsoc-fb:hover{color:#1877F2}
.tsoc-tt:hover{color:#25F4EE}
.tsoc-shopier:hover{color:var(--shopier)}

/* HEADER */
.header{position:sticky;top:0;z-index:66;background:var(--white);border-bottom:1px solid var(--line);box-shadow:0 2px 12px rgba(0,0,0,.03);transition:margin .35s ease,max-width .35s ease,border-radius .35s ease,box-shadow .35s ease,background .35s ease,border-color .35s ease}
.header-inner{display:flex;align-items:center;gap:16px;height:74px;transition:height .35s ease}

/* Kaydırınca oval (pill) navbar */
/* NOT: backdrop-filter KULLANMA — position:fixed hamburger menüyü header'a hapseder. */
.header.shrink{max-width:1180px;margin:12px auto;border-radius:50px;border:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 12px 34px rgba(22,45,30,.16);background:rgba(255,255,255,.97)}
.header.shrink .header-inner{height:60px}
.header.shrink .logo-img{height:44px}
/* Oval (pill) navbar açıkken arama kutusu/öneri listesi genişçe bir
   dikdörtgen olduğu için tam yuvarlak köşeye oturmuyordu (köşelerde
   boşluk oluşuyordu) — arama açıldığında pill şekli daha az yuvarlak
   bir "kapsül" haline döner, böylece dropdown kenarları tam hizalanır. */
.header.shrink:has(.search-bar.open){border-radius:26px}
.header.shrink:has(.search-bar.open) .search-bar.open{border-radius:0 0 26px 26px}
.logo{display:flex;align-items:center;gap:8px}
.logo-img{height:58px;width:auto}
.logo-text{
  font-family:'Cormorant Garamond',serif;font-weight:700;font-size:30px;
  letter-spacing:4px;color:var(--green);
}
.nav{display:flex;gap:18px;margin-left:auto;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-ms-overflow-style:none;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{font-size:14.5px;font-weight:400;color:var(--ink);position:relative;padding:4px 0;transition:color .2s;white-space:nowrap;flex:none}
.nav a:hover,.nav a.active{color:var(--green)}
.nav a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--gold);transition:width .25s}
.nav a:hover::after,.nav a.active::after{width:100%}
/* Masaüstünde menü simgeleri gizli; mobil menüde açılır (aşağıdaki media query) */
.nav-ico{display:none}

/* "Diğer Kategoriler" açılır menüsü — Erkek/Sevgili/Toka/14K Kaplama/Çelik Takı
   gibi daha az tıklanan kategorileri tek bir başlık altında toplar, böylece
   ana menü sıkışmaz. Masaüstünde altına açılan bir kart, mobil çekmecede ise
   yerinde genişleyen bir akordeon olarak davranır (aşağıdaki media query). */
.nav-drop{position:relative;flex:none}
.nav-drop-toggle{background:none;border:none;cursor:pointer;font-family:inherit;font-size:14.5px;font-weight:400;color:var(--ink);display:flex;align-items:center;gap:5px;padding:4px 0;white-space:nowrap;transition:color .2s}
.nav-drop-toggle:hover,.nav-drop.active .nav-drop-toggle{color:var(--green)}
.nav-drop-chevron{width:12px;height:12px;transition:transform .22s ease;flex:none}
.nav-drop.open .nav-drop-chevron{transform:rotate(180deg)}
/* .nav yatay taşmada overflow-x:auto kullandığından (yatayda kaydırma
   çubuğu gizlemek için) overflow-y de örtük biçimde clip eder — bu yüzden
   açılır menü absolute yerine JS ile konumlandırılan fixed kullanır,
   böylece .nav'ın kırpma alanının tamamen dışında kalır. */
.nav-drop-menu{position:fixed;background:var(--white);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 30px rgba(0,0,0,.14);padding:8px;min-width:200px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s ease,transform .2s ease,visibility .2s;z-index:120}
.nav-drop.open .nav-drop-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav-drop-menu a{display:flex!important;align-items:center;gap:10px;padding:9px 10px!important;border-radius:9px;font-size:13.5px!important;white-space:nowrap}
.nav-drop-menu a:hover{background:#f6f8f3}
.nav-drop-menu a::after{display:none}
.nav-drop-menu .nav-ico{display:inline-flex;flex:none;color:var(--green);opacity:.8}
.nav-drop-menu .nav-ico svg{width:17px;height:17px;display:block}
.header-actions{display:flex;align-items:center;gap:8px;margin-left:8px}
.icon-btn{background:none;border:none;cursor:pointer;color:var(--ink);width:42px;height:42px;border-radius:10px;display:grid;place-items:center;transition:background .2s}
.icon-btn:hover{background:#f1efe8}
.ico{display:inline-flex}
.dil-buton{font-size:.72rem;font-weight:700;letter-spacing:.5px;display:flex;align-items:center;gap:4px}
.dil-buton .dil-bayrak{font-size:.95rem;line-height:1}
@media (max-width:480px){ .dil-buton{width:auto;padding:0 8px;height:34px;font-size:.65rem} }
.ico svg,.icon-btn svg{width:22px;height:22px}

/* BELİRGİN SEPET BUTONU */
.cart-btn{position:relative;display:flex;align-items:center;gap:6px;background:var(--green);color:#fff;border:none;cursor:pointer;padding:8px 14px 8px 12px;border-radius:40px;font-family:inherit;font-size:13.5px;font-weight:500;transition:all .2s;box-shadow:0 4px 14px rgba(53,69,40,.28)}
.cart-btn:hover{background:var(--green-dark);transform:translateY(-1px)}
.cart-btn svg{width:19px;height:19px}
.cart-label{letter-spacing:.3px}
.cart-count{position:absolute;top:-6px;right:-6px;background:var(--gold);color:#3a2e08;font-size:12px;font-weight:700;min-width:22px;height:22px;border-radius:11px;display:grid;place-items:center;padding:0 5px;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.cart-count.bump{animation:bump .4s}
@keyframes bump{0%{transform:scale(1)}30%{transform:scale(1.4)}60%{transform:scale(.9)}100%{transform:scale(1)}}

/* HESAP / GİRİŞ BUTONU (üst bar) — cam-gorunumlu, ince altın çerçeveli, klas buton */
.hesap-btn{
  width:auto !important;
  display:flex;align-items:center;gap:6px;
  padding:8px 14px 8px 11px;border-radius:40px;
  background:linear-gradient(180deg,#fff,#faf7f0);
  border:1px solid var(--gold-light);
  color:var(--green-dark);
  font-size:13px;font-weight:500;letter-spacing:.2px;
  box-shadow:0 2px 10px rgba(53,69,40,.08);
  transition:all .25s ease;
}
.hesap-btn:hover{
  background:linear-gradient(180deg,var(--green),var(--green-dark));
  border-color:var(--green-dark);color:#fff;
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(53,69,40,.22);
}
.hesap-btn .ico{color:var(--gold);transition:color .25s ease}
.hesap-btn .ico svg{width:18px;height:18px}
.hesap-btn:hover .ico{color:var(--gold-light)}
.hesap-btn .hesap-ad{letter-spacing:.3px}
.hesap-btn{margin-right:6px}
@media(max-width:900px){.hesap-btn .hesap-ad{display:none}.hesap-btn{padding:9px;border-radius:50%}}

/* FAVORİLER BUTONU (üst bar) */
.fav-toggle{position:relative}
.fav-count{position:absolute;top:2px;right:2px;background:var(--gold);color:#3a2e08;font-size:10.5px;font-weight:700;min-width:17px;height:17px;border-radius:9px;display:none;place-items:center;padding:0 4px;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.fav-count.bump{animation:bump .4s}
.fav-toggle.dolu{color:var(--green)}
.fav-toggle.dolu .ico svg{fill:var(--green)}

/* KART ÜZERİNDEKİ KALP BUTONU */
.fav-btn{position:absolute;top:12px;right:12px;z-index:5;width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.9);border:none;cursor:pointer;display:grid;place-items:center;
  color:var(--muted);transition:transform .25s cubic-bezier(.34,1.56,.64,1),color .18s,background .18s,box-shadow .3s;
  backdrop-filter:blur(2px);pointer-events:auto!important}
.fav-btn svg{width:17px;height:17px;transition:fill .25s}
.fav-btn:hover{transform:scale(1.15);color:var(--green)}
/* Kart üzerine gelince/dönerken kalp de hafifçe kartla birlikte "nefes alsın" */
.flip-card:hover .fav-btn{transform:translateY(-2px) scale(1.08)}
.flip-card:hover .fav-btn:hover{transform:translateY(-2px) scale(1.18)}
.fav-btn.active{color:var(--green)}
.fav-btn.active svg{fill:currentColor}
/* Sevgili/Erkek kategorilerinde favori kalbi kategoriye özel renkte */
.flip-card[data-pcat="sevgili"] .fav-btn.active,
.pd-grid[data-pcat="sevgili"] .fav-btn.active{color:#c0264a}
.flip-card[data-pcat="erkek"] .fav-btn.active,
.pd-grid[data-pcat="erkek"] .fav-btn.active{color:#1a1a1a}
.flip-card[data-pcat="14k"] .fav-btn.active,
.pd-grid[data-pcat="14k"] .fav-btn.active{color:var(--gold)}
/* Favorilenmiş üründe kalbin sürekli statik durmaması için hafif nefes alma —
   beat sınıfı eklendiğinde (tıklama anı) daha güçlü olan atış animasyonu bunun
   yerine geçsin diye BU kural önce, beat kuralları sonra tanımlanır. */
.fav-btn.active:not(:hover):not(.beat){animation:kalpNefes 2.6s ease-in-out infinite}
@keyframes kalpNefes{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.08)}
}
/* Favoriye eklerken/çıkarırken sönüp-yanan kalp atışı */
.fav-btn.beat{animation:kalpAtis .5s cubic-bezier(.34,1.56,.64,1)}
.fav-btn.active.beat{animation:kalpAtisAktif .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes kalpAtis{
  0%{transform:scale(1)}
  30%{transform:scale(1.35);box-shadow:0 0 0 8px rgba(53,69,40,0)}
  60%{transform:scale(.9)}
  100%{transform:scale(1)}
}
@keyframes kalpAtisAktif{
  0%{transform:scale(1);box-shadow:0 0 0 0 rgba(53,69,40,.45)}
  35%{transform:scale(1.4);box-shadow:0 0 0 6px rgba(53,69,40,.2)}
  70%{transform:scale(.92);box-shadow:0 0 0 10px rgba(53,69,40,0)}
  100%{transform:scale(1);box-shadow:0 0 0 12px rgba(53,69,40,0)}
}
.pd-media .fav-btn{top:16px;right:16px;width:38px;height:38px}
.pd-media .fav-btn svg{width:19px;height:19px}
.menu-toggle{display:none}

/* SEARCH */
.search-bar{max-height:0;overflow:hidden;transition:max-height .3s;border-top:1px solid transparent}
.search-bar.open{max-height:80px;border-top:1px solid var(--line);overflow:visible}
.search-bar input{width:100%;padding:14px 6px;border:none;outline:none;font-size:16px;background:transparent;font-family:inherit}
.search-bar input:focus-visible{box-shadow:inset 0 -2px 0 var(--green)}

/* ARAMA OTOMATİK TAMAMLAMA */
.olcu-secenekler{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 16px}
.olcu-secenek-btn{background:var(--white);border:1.5px solid var(--line);border-radius:20px;padding:8px 16px;font-family:inherit;font-size:13px;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.olcu-secenek-btn.active{background:var(--green);border-color:var(--green);color:#fff}
.olcu-adim-baslik{font-weight:600;font-size:13.5px;color:var(--ink)}
.olcu-girdi{display:flex;align-items:center;gap:8px;margin:8px 0}
.olcu-girdi input{width:100px;padding:8px 10px;border:1.5px solid var(--line);border-radius:8px;font-family:inherit;font-size:14px}
.olcu-girdi span{color:var(--muted);font-size:13px}
.olcu-sonuc{background:#f2efe8;border-radius:10px;padding:10px 14px;font-size:13.5px;min-height:20px}
.bildirim-izin-btn{
  display:block;width:calc(100% - 32px);margin:10px 16px;padding:9px 14px;
  background:#f2efe8;border:1px solid var(--line);border-radius:20px;
  font-family:inherit;font-size:12.5px;color:var(--ink);cursor:pointer;text-align:center;
}
.bildirim-izin-btn:hover{background:var(--green);color:#fff;border-color:var(--green)}
.sesli-arama-btn{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border-radius:50%; border:none; background:transparent;
  color:var(--muted); display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.sesli-arama-btn svg{width:18px;height:18px}
.sesli-arama-btn:hover{color:var(--green)}
.sesli-arama-btn.dinliyor{color:#c0392b;animation:sesliPulse 1s infinite}
@keyframes sesliPulse{0%,100%{opacity:1}50%{opacity:.4}}
.search-oneri{
  display:none;position:absolute;top:100%;left:0;right:0;background:var(--white);border:1px solid var(--line);
  border-top:none;border-radius:0 0 14px 14px;box-shadow:0 14px 30px rgba(0,0,0,.12);max-height:360px;overflow-y:auto;z-index:50;
}
.search-oneri.open{display:block}
.arama-oneri-satir{display:flex;align-items:center;gap:12px;padding:10px 16px;text-decoration:none;color:var(--ink)}
.arama-oneri-satir:hover{background:#f6f8f3}
.arama-oneri-satir img{width:40px;height:40px;object-fit:cover;border-radius:8px;flex:none;background:#f2efe8}
.arama-oneri-satir span{display:flex;flex-direction:column;gap:2px;min-width:0}
.arama-oneri-satir b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arama-oneri-satir small{font-size:12px;color:var(--muted)}
.arama-oneri-bos{padding:16px;text-align:center;color:var(--muted);font-size:13px}

/* ÜRÜN YORUM FORMU */
.ipucu-yorum{text-align:center;color:var(--muted);font-size:14px;margin-bottom:20px}
.yorum-form{max-width:480px;margin:20px auto 0;background:#f6f8f3;border-radius:var(--radius);padding:22px}
.yorum-form h3{font-family:'Cormorant Garamond',serif;font-size:20px;color:var(--green);margin-bottom:12px;text-align:center}
.yorum-form-satir{display:flex;gap:10px;margin-bottom:10px}
.yorom-form-satir input{flex:1}
.yorum-form input,.yorum-form select,.yorum-form textarea{
  width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:10px;
  font-family:inherit;font-size:13.5px;background:var(--white);margin-bottom:10px;
}
.yorum-form-satir input,.yorum-form-satir select{margin-bottom:0}
.yorum-form-satir input{flex:1}
.yorum-form-satir select{flex:0 0 110px}
.yorum-form textarea{resize:vertical}
.yorum-form button{display:block;margin:4px auto 0}
.yorum-form-msg{text-align:center;font-size:13px;margin-top:10px}
.yorum-form-msg.ok{color:var(--green)}
.yorum-form-msg.hata{color:#b3261e}

/* HERO SLIDER (boydan boya) */
.slider{position:relative;width:100%;overflow:hidden}
.slides{position:relative;height:480px}
.slide{position:absolute;inset:0;display:flex;align-items:center;color:#fff;opacity:0;visibility:hidden;transform:scale(1.04);transition:opacity 1.2s cubic-bezier(.4,0,.2,1),transform 6s ease-out,visibility 1.2s;background-size:cover;background-position:center;will-change:opacity,transform}
.slide.active{opacity:1;visibility:visible;transform:scale(1);z-index:1}
.slide::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='1.2' fill='%23ffffff' opacity='0.08'/%3E%3C/svg%3E")}
.slide-1{background:linear-gradient(120deg,rgba(38,51,29,.9),rgba(53,69,40,.72)),radial-gradient(circle at 80% 30%,rgba(200,162,74,.4),transparent 45%),var(--green)}
.slide-2{background:linear-gradient(120deg,rgba(38,51,29,.86),rgba(74,94,56,.6)),radial-gradient(circle at 20% 70%,rgba(200,162,74,.45),transparent 50%),var(--green-light)}
.slide-3{background:linear-gradient(120deg,rgba(58,46,8,.55),rgba(38,51,29,.85)),radial-gradient(circle at 75% 25%,rgba(224,194,126,.5),transparent 50%),var(--green-dark)}
.slide-inner{max-width:1240px;width:100%;margin:0 auto;padding:60px 20px;position:relative;z-index:2}
.slide.active .slide-inner>*{animation:slideUp .7s both}
.slide.active .slide-inner>*:nth-child(2){animation-delay:.1s}
.slide.active .slide-inner>*:nth-child(3){animation-delay:.2s}
.slide.active .slide-inner>*:nth-child(4){animation-delay:.3s}
@keyframes slideUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.hero-sub{font-size:15px;letter-spacing:4px;text-transform:uppercase;color:var(--gold-light);margin-bottom:10px}
.slide h1{font-family:'Cormorant Garamond',serif;font-size:clamp(38px,6vw,68px);font-weight:600;line-height:1.05;margin-bottom:14px}
.hero-desc{font-size:18px;max-width:480px;opacity:.92;margin-bottom:26px}
.slider-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:48px;height:48px;border-radius:50%;border:none;background:rgba(255,255,255,.18);color:#fff;cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(4px);transition:background .2s}
.slider-arrow:hover{background:rgba(255,255,255,.35)}
.slider-arrow svg{width:22px;height:22px}
.slider-arrow.prev{left:24px}
.slider-arrow.next{right:24px}
.slider-dots{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:5;display:flex;gap:10px}
.slider-dots button{width:11px;height:11px;border-radius:50%;border:none;background:rgba(255,255,255,.45);cursor:pointer;padding:0;transition:all .25s}
.slider-dots button.active{background:var(--gold);width:28px;border-radius:6px}

/* BUTTONS
   ---------------------------------------------------------------
   LIQUID FILL: butonun altından yukarı doğru dolan renk efekti.
   Nasıl çalışır: tek renkli bir linear-gradient arkaplan görseli
   olarak basılır; --p (dolgu oranı) 0'dan %100'e giderken hem
   yüksekliği hem konumu değişir. background-position'a verilen
   gecikme (--t) sayesinde önce yandan kayar, sonra yukarı dolar —
   "sıvı" hissini veren şey bu iki hareketin sırayla olması.

   Kullanmak için butona --lq (dolacak renk) vermek yeterli.        */
.liquid,
.btn-primary,.btn-shopier,
.btn-add-lg,.btn-wa-lg,.btn-shopier-lg{
  background-image:linear-gradient(var(--lq,var(--green)) 0 0);
  background-repeat:no-repeat;
  background-size:200% var(--p,.18em);
  background-position:calc(200% - var(--p,0%)) 100%;
  transition:
    color .5s var(--t,0s),
    background-size .5s var(--t,0s),
    background-position .5s calc(.5s - var(--t,0s)),
    border-color .4s, box-shadow .4s, transform .28s;
}
.liquid:hover,
.btn-primary:hover,.btn-shopier:hover,
.btn-add-lg:hover:not(:disabled),.btn-wa-lg:hover,.btn-shopier-lg:hover{--p:100%;--t:.5s}

.btn{display:inline-block;cursor:pointer;border:none;font-family:inherit;font-size:15px;font-weight:500;padding:14px 30px;border-radius:40px;transition:all .22s;letter-spacing:.3px}
.btn-primary{background-color:var(--gold);color:#3a2e08;--lq:var(--green)}
.btn-primary:hover{color:#fff;transform:translateY(-2px);box-shadow:0 6px 18px rgba(53,69,40,.25)}
.btn-block{width:100%;text-align:center}
/* Shopier — sepetteki ikincil satın alma yolu; birincil butonun
   önüne geçmemesi için çizgili (outline) stil kullanılır */
.btn-shopier{margin-top:10px;background-color:transparent;color:var(--shopier);border:1.5px solid var(--shopier);--lq:var(--shopier)}
.btn-shopier:hover{color:#fff;transform:translateY(-2px);box-shadow:0 6px 18px rgba(112,72,232,.28)}
/* Menüdeki Shopier bağlantısı — ürün sayfasındaki butonla aynı marka moru */
.nav-shopier{color:var(--shopier)!important;font-weight:500!important}
.nav-shopier:hover{color:var(--shopier-koyu)!important}
.nav-shopier::after{background:var(--shopier)!important}
/* Masaüstünde ok simgesi gizli, sade yazı; mobil menüde dış link ok'u kalsın */
.nav-shopier-ok{display:none}

/* SEVGİLİ KATEGORİSİ — Shopier gibi kırmızı vurgu */
.nav a[data-cat="sevgili"]{color:#c0264a!important;font-weight:500!important}
.nav a[data-cat="sevgili"]:hover{color:#8f1836!important}
.nav a[data-cat="sevgili"]::after{background:#c0264a!important}
.nav a[data-cat="sevgili"] .nav-ico{color:#c0264a}

/* CAT CARDS */
.cat-cards{display:grid;grid-template-columns:repeat(9,1fr);gap:12px;margin:44px auto}
.cat-card{
  cursor:pointer;border:1px solid var(--line);background:var(--white);
  border-radius:var(--radius);padding:22px 6px;text-align:center;
  font-family:'Cormorant Garamond',serif;font-size:17px;font-weight:600;color:var(--green);
  transition:all .22s;position:relative;line-height:1.2;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.cc-ico{width:52px;height:52px;border-radius:50%;background:rgba(53,69,40,.07);color:var(--green);display:grid;place-items:center;transition:all .22s}
.cc-ico svg{width:28px;height:28px}
.cat-card:hover{border-color:var(--gold);box-shadow:var(--shadow);transform:translateY(-3px)}
.cat-card:hover .cc-ico{background:var(--green);color:#fff}

/* STİL ASİSTANI ÇAĞRI BANDI */
.stil-banner{
  width:100%;display:flex;align-items:center;gap:16px;margin-top:26px;
  padding:18px 22px;border-radius:var(--radius);cursor:pointer;text-align:left;
  background:linear-gradient(120deg,var(--green),var(--green-dark));border:none;
  box-shadow:0 10px 30px rgba(53,69,40,.18);transition:transform .22s,box-shadow .22s;
}
.stil-banner:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(53,69,40,.26)}
a.stil-banner{text-decoration:none}
button.stil-banner{font-family:inherit}
.stil-banner-ico{flex:none;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.15);color:var(--gold-light);display:grid;place-items:center}
.stil-banner-ico svg{width:22px;height:22px}
.stil-banner-metin{flex:1;display:flex;flex-direction:column;gap:3px;color:#fff}
.stil-banner-metin b{font-family:'Cormorant Garamond',serif;font-size:19px;font-weight:600}
.stil-banner-metin span{font-size:13px;color:rgba(255,255,255,.75)}
.stil-banner-ok{flex:none;width:20px;height:20px;color:var(--gold-light)}
.stil-banner-ok svg{width:100%;height:100%}
@media(max-width:600px){
  .stil-banner{padding:16px 18px;gap:12px}
  .stil-banner-metin b{font-size:16px}
  .stil-banner-metin span{font-size:12px}
}

/* STİL ASİSTANI MODALI */
.stil-box{max-width:640px}
#stilIcerik{transition:opacity .16s ease}
#stilIcerik.stil-solgun{opacity:0}
.stil-ilerleme{display:flex;gap:8px;justify-content:center;margin-bottom:22px}
.stil-nokta{width:9px;height:9px;border-radius:50%;background:var(--line);transition:all .25s}
.stil-nokta.aktif{background:var(--gold);width:22px;border-radius:5px}
.stil-nokta.tamam{background:var(--green)}
.stil-soru{font-family:'Cormorant Garamond',serif;font-size:24px;color:var(--green);text-align:center;margin-bottom:20px}
.stil-secenekler{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stil-secenek{
  padding:16px 14px;border:1.5px solid var(--line);border-radius:12px;background:var(--cream);
  cursor:pointer;font-family:inherit;font-size:14.5px;font-weight:500;color:var(--ink);
  text-align:center;transition:all .2s;
}
.stil-secenek:hover{border-color:var(--green);background:var(--white);box-shadow:var(--shadow);transform:translateY(-2px)}
.stil-geri{margin:18px auto 0;display:flex;align-items:center;gap:6px;background:none;border:none;color:var(--muted);font-size:13px;cursor:pointer;font-family:inherit}
.stil-geri svg{width:15px;height:15px}
.stil-sonuc-alt{text-align:center;color:var(--muted);font-size:13.5px;margin:-10px 0 20px}
.stil-sonuc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-height:52vh;overflow-y:auto;padding:2px}
.stil-sonuc-grid .flip-card{height:315px}
.stil-sonuc-grid .card-img{height:150px}
.stil-sonuc-grid .card-title{font-size:13.5px;line-height:1.3}
.stil-durust-not{background:var(--cream);border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:12.5px;color:var(--muted);margin:-8px 0 16px;text-align:center}
.stil-toplu-aksiyon{display:flex;gap:10px;margin-top:16px}
.stil-toplu-aksiyon .btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px;padding:11px}
.stil-toplu-aksiyon .btn svg{width:16px;height:16px}
.stil-yeniden{margin-top:10px}
@media(max-width:600px){
  .stil-secenekler{grid-template-columns:1fr}
  .stil-sonuc-grid{grid-template-columns:1fr 1fr;max-height:44vh}
  .stil-sonuc-grid .flip-card{height:280px}
  .stil-sonuc-grid .card-img{height:130px}
}

/* PRODUCTS */
.products-section{padding:20px 20px 60px}
.section-head{text-align:center;margin-bottom:34px}
.kategori-tanitim{display:none;text-align:center;max-width:640px;margin:-20px auto 30px;color:var(--muted);font-size:14.5px;line-height:1.6}
.kat-sayfa-tanitim{max-width:760px;margin:28px auto 0;padding:0 20px;text-align:center}
.kat-sayfa-tanitim .kat-sayfa-baslik{font-family:'Cormorant Garamond',serif;font-size:clamp(26px,4vw,34px);font-weight:600;color:var(--green);margin:0 0 12px}
.kat-sayfa-tanitim .kat-sayfa-aciklama{color:var(--muted);font-size:15px;line-height:1.7;margin:0}
.section-head h2{font-family:'Cormorant Garamond',serif;font-size:40px;font-weight:600;color:var(--green);position:relative;display:inline-block}
.section-head h2::after{content:"";display:block;width:60px;height:2px;background:var(--gold);margin:10px auto 0}
.section-head p{color:var(--muted);font-size:14px;margin-top:8px}
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}

/* MÜŞTERİ YORUMLARI SLIDER */
.yorum-filtre-bar{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:-14px 0 22px}
.yorum-filtre-btn{
  font-family:'Jost',sans-serif;font-size:13px;font-weight:500;color:var(--muted);
  background:#fff;border:1px solid var(--line,#e8e4da);border-radius:100px;
  padding:7px 16px;cursor:pointer;transition:.2s;
}
.yorum-filtre-btn:hover{border-color:var(--green);color:var(--green)}
.yorum-filtre-btn.active{background:var(--green);border-color:var(--green);color:#fff}
.yorum-slider-sarma{display:flex;align-items:center;gap:14px}
.yorum-slider{
  display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 2px 12px;scrollbar-width:thin;flex:1;
}
.yorum-slider::-webkit-scrollbar{height:6px}
.yorum-slider::-webkit-scrollbar-thumb{background:var(--line);border-radius:10px}
.yorum-kart{
  scroll-snap-align:start;flex:0 0 auto;width:300px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius);padding:22px;
  display:flex;flex-direction:column;gap:10px;
}
.yorum-ust{display:flex;align-items:center;gap:12px}
.yorum-avatar{
  width:40px;height:40px;border-radius:50%;background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:600;
  font-family:'Cormorant Garamond',serif;font-size:18px;flex:none;
}
.yorum-isim{display:block;font-size:14.5px;color:var(--ink)}
.yorum-urun{display:block;font-size:12px;color:var(--muted)}
.yorum-yildiz{color:var(--gold);font-size:15px;letter-spacing:2px}
.yorum-metin{font-size:14px;color:#4a5048;line-height:1.6}
.yorum-foto{width:100%;max-height:160px;object-fit:cover;border-radius:10px;margin-top:4px}
.yorum-faydali{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12px;color:var(--muted)}
.yorum-faydali button{background:none;border:1px solid var(--line);border-radius:14px;padding:3px 9px;font-size:12px;cursor:pointer;color:var(--muted);transition:border-color .2s,color .2s}
.yorum-faydali button:hover:not(:disabled){border-color:var(--green);color:var(--green)}
.yorum-faydali button:disabled{opacity:.6;cursor:default}
.set-kategori-secim{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
.set-grid{margin-bottom:80px}
.set-urun-kart{
  position:relative;background:var(--white);border:2px solid var(--line);border-radius:var(--radius);
  overflow:hidden;cursor:pointer;transition:border-color .2s,transform .2s;
}
.set-urun-kart:hover{transform:translateY(-2px)}
.set-urun-kart.secili{border-color:var(--green)}
.set-urun-kart img{width:100%;aspect-ratio:1/1;object-fit:contain;padding:6px;display:block;background:#f2efe8}
.set-urun-bilgi{padding:10px 12px}
.set-urun-bilgi b{display:block;font-size:13.5px;margin-bottom:2px}
.set-urun-bilgi span{font-size:13px;color:var(--gold)}
.set-secim-isareti{
  position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;
  background:var(--white);border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;color:var(--muted);
}
.set-urun-kart.secili .set-secim-isareti{background:var(--green);border-color:var(--green);color:#fff}
.set-urun-kart.set-tukendi{opacity:.55;cursor:not-allowed}
.set-tukendi-etiket{position:absolute;top:8px;left:8px;background:#b23b3b;color:#fff;font-size:10px;font-weight:700;padding:3px 8px;border-radius:10px}

.set-ozet-bar{
  position:fixed;left:50%;bottom:22px;transform:translate(-50%,140%);
  display:flex;align-items:center;gap:16px;background:var(--green-dark);color:#fff;
  padding:14px 22px;border-radius:40px;box-shadow:0 14px 40px rgba(0,0,0,.25);
  z-index:60;transition:transform .3s ease;white-space:nowrap;
}
.set-ozet-bar.goster{transform:translate(-50%,0)}
.set-ozet-bar strong{color:var(--gold-light)}
.set-ozet-bar .btn{padding:9px 18px;font-size:13px}
@media(max-width:600px){ .set-ozet-bar{left:12px;right:12px;transform:translateY(140%);width:calc(100% - 24px);justify-content:space-between} .set-ozet-bar.goster{transform:translateY(0)} }

.hr-bolum{margin:0 0 48px}
.hr-bolum .section-head p{color:var(--muted);font-size:14px;margin-top:4px}
.yorum-yorum-sarma{position:relative}
.yorum-yorum-sarma textarea{padding-right:40px}
.yorum-foto-btn{
  position:absolute;right:8px;bottom:8px;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--white);border:1.5px solid var(--line);color:var(--muted);
  cursor:pointer;transition:border-color .2s,color .2s;
}
.yorum-foto-btn svg{width:14px;height:14px}
.yorum-foto-btn:hover{border-color:var(--green);color:var(--green)}
.yorum-foto-dosya-adi{display:block;font-size:11.5px;color:var(--muted);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yorum-ok{
  flex:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  background:var(--white);color:var(--green);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .2s;
}
.yorum-ok:hover{background:var(--green);color:#fff;border-color:var(--green)}
.yorum-ok svg{width:18px;height:18px}
@media(max-width:640px){
  .yorum-ok{display:none}
  .yorum-kart{width:78vw}
}

/* SIKÇA SORULAN SORULAR (accordion) */
.sss-arac{max-width:760px;margin:0 auto 18px;display:flex;flex-direction:column;gap:10px}
.sss-arac #sssArama{width:100%;padding:12px 16px;border:1px solid var(--line);border-radius:30px;font-family:inherit;font-size:14.5px}
.sss-kategoriler{display:flex;flex-wrap:wrap;gap:8px}
.sss-kat-btn{border:1px solid var(--line);background:var(--white);border-radius:20px;padding:6px 14px;font-family:inherit;font-size:13px;cursor:pointer;transition:all .15s}
.sss-kat-btn.active{background:var(--yesil,#1f6b4c);border-color:var(--yesil,#1f6b4c);color:#fff}
.sss-liste{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.sss-oge{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--white)}
.sss-soru{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:none;border:none;cursor:pointer;padding:18px 20px;text-align:left;
  font-family:inherit;font-size:15.5px;font-weight:600;color:var(--ink);
}
.sss-ok{flex:none;display:flex;color:var(--green);transition:transform .25s}
.sss-ok svg{width:16px;height:16px}
.sss-oge.acik .sss-ok{transform:rotate(90deg)}
.sss-cevap{max-height:0;overflow:hidden;transition:max-height .3s ease}
.sss-cevap p{padding:0 20px 18px;margin:0;font-size:14.5px;color:#4a5048;line-height:1.65}
.sss-oge.acik .sss-cevap{max-height:240px}

/* INSTAGRAM GALERİSİ */
#instagramKullanici a{color:var(--green);font-weight:600}
.instagram-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.instagram-kare{position:relative;aspect-ratio:1/1;overflow:hidden;display:block;border-radius:8px}
.instagram-kare img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.instagram-hover{
  position:absolute;inset:0;background:rgba(53,69,40,.55);display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .25s;color:#fff;
}
.instagram-hover svg{width:26px;height:26px}
.instagram-kare:hover img{transform:scale(1.08)}
.instagram-kare:hover .instagram-hover{opacity:1}
@media(max-width:640px){.instagram-grid{grid-template-columns:repeat(3,1fr)}}

.musteri-foto-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.musteri-foto-oge{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:8px;border:none;padding:0;cursor:pointer;background:#f2efe8}
.musteri-foto-oge img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.musteri-foto-oge:hover img{transform:scale(1.06)}
@media(max-width:640px){.musteri-foto-grid{grid-template-columns:repeat(3,1fr)}}

/* BÜLTEN / İLK SİPARİŞ KUPONU POPUP'I */
.bulten-ortu{
  position:fixed;inset:0;z-index:60;background:rgba(20,24,16,.55);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;
}
.bulten-ortu.acik{opacity:1;visibility:visible}
.bulten-kutu{
  position:relative;background:var(--white);border-radius:var(--radius);
  padding:38px 32px 28px;max-width:400px;width:100%;text-align:center;
  box-shadow:0 30px 70px rgba(0,0,0,.35);
  transform:translateY(16px) scale(.97);transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.bulten-ortu.acik .bulten-kutu{transform:translateY(0) scale(1)}
.bulten-kapat{
  position:absolute;top:14px;right:14px;background:none;border:none;cursor:pointer;
  color:var(--muted);width:30px;height:30px;display:grid;place-items:center;border-radius:8px;
}
.bulten-kapat:hover{background:#f2efe8;color:var(--ink)}
.bulten-kapat svg{width:18px;height:18px}
.bulten-ico{
  width:56px;height:56px;border-radius:50%;background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;
}
.bulten-ico svg{width:26px;height:26px}
.bulten-kutu h3{font-family:'Cormorant Garamond',serif;font-size:26px;color:var(--ink);margin-bottom:8px}
.bulten-kutu p{font-size:14px;color:var(--muted);margin-bottom:20px}
.bulten-honeypot{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
#bultenForm input[type=email]{
  width:100%;padding:13px 16px;border:1px solid var(--line);border-radius:30px;
  font-family:inherit;font-size:14.5px;margin-bottom:12px;text-align:center;
}
#bultenForm input[type=email]:focus{outline:none;border-color:var(--green)}
.bulten-sonuc{margin-top:14px;font-size:14px;color:var(--green);font-weight:500}
.bulten-sonuc-hata{color:#b3261e}
.bulten-vazgec{margin-top:14px;font-size:12.5px;color:var(--muted);cursor:pointer;text-decoration:underline;text-underline-offset:2px}

/* FİLTRE ÇUBUĞU (İndirimliler/Stokta çipleri + sıralama) */
.filtre-cubugu{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.filtre-cip{
  background:var(--white);border:1.5px solid var(--line);color:var(--ink);border-radius:20px;
  padding:8px 16px;font-family:inherit;font-size:13px;font-weight:500;cursor:pointer;
  transition:all .2s;white-space:nowrap;
}
.filtre-cip:hover{border-color:var(--green)}
.filtre-cip.active{background:var(--green);border-color:var(--green);color:#fff}
.filtre-sirala{
  margin-left:auto;background:var(--white);border:1.5px solid var(--line);border-radius:20px;
  padding:8px 14px;font-family:inherit;font-size:13px;color:var(--ink);cursor:pointer;
}
.filtre-fiyat-araligi{
  display:flex;align-items:center;gap:6px;
  background:var(--white);border:1.5px solid var(--line);border-radius:20px;
  padding:6px 12px;font-size:13px;color:var(--muted);
}
.filtre-fiyat-araligi input{
  width:72px;border:none;background:transparent;font-family:inherit;font-size:13px;color:var(--ink);
  -moz-appearance:textfield;
}
.filtre-fiyat-araligi input::-webkit-outer-spin-button,
.filtre-fiyat-araligi input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.filtre-fiyat-araligi input:focus{outline:none}
@media(max-width:600px){
  .filtre-cubugu{gap:8px}
  .filtre-cip{padding:7px 13px;font-size:12px}
  .filtre-sirala{margin-left:0;flex:1 1 100%;order:3}
  .filtre-fiyat-araligi{flex:1 1 100%;order:4;justify-content:center}
}

/* FLIP KART */
.flip-card{position:relative;perspective:1300px;height:376px;cursor:pointer}

/* SCROLL'DA YUMUŞAK BELİRME (kart/bölüm ilk kez görünüme girince) */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}
.flip-inner{position:relative;width:100%;height:100%;transition:transform .65s cubic-bezier(.4,.2,.2,1);transform-style:preserve-3d;-webkit-transform-style:preserve-3d}
.flip-card:hover .flip-inner,.flip-card.flipped .flip-inner{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--white);display:flex;flex-direction:column;box-shadow:0 6px 20px rgba(0,0,0,.06)}
.flip-card:hover .face{box-shadow:var(--shadow)}
.front{}
.back{transform:rotateY(180deg);background:linear-gradient(160deg,#ffffff,#f3f6ef);padding:26px 22px;justify-content:center;text-align:center;pointer-events:none}
/* Çevrildiğinde arka yüz tıklanabilir olsun, ön yüz tıklamayı engellemesin */
.flip-card:hover .back,.flip-card.flipped .back{pointer-events:auto}
.flip-card:hover .front,.flip-card.flipped .front{pointer-events:none}
.card-img{position:relative;height:300px;overflow:hidden;background:#f2efe8;flex:none}
.card-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s;pointer-events:none;background:#f2efe8}
.card-img:hover .card-video{opacity:1}
.hizli-bakis-btn{
  position:absolute; left:50%; bottom:-46px; transform:translateX(-50%);
  background:rgba(36,41,31,.88); color:#fff; border:none; border-radius:20px;
  padding:8px 16px; font-family:inherit; font-size:12.5px; font-weight:500; cursor:pointer;
  display:flex; align-items:center; gap:6px; white-space:nowrap; max-width:calc(100% - 16px);
  transition:bottom .25s ease, opacity .25s ease; opacity:0; z-index:3;
}
.hizli-bakis-btn svg{width:14px;height:14px;flex:none}
.hizli-bakis-btn span{overflow:hidden;text-overflow:ellipsis}
.card-img:hover .hizli-bakis-btn{bottom:14px; opacity:1}
/* Dokunmatik/dar ekranlarda: metni gizle, ikon-only yuvarlak düğmeye dön —
   2 sütunlu mobil kart genişliğine (~150-170px) tam genişlikli buton sığmaz. */
@media(hover:none), (max-width:480px){
  .hizli-bakis-btn{
    bottom:10px; opacity:1; left:auto; right:10px; transform:none;
    padding:0; width:34px; height:34px; border-radius:50%; justify-content:center;
  }
  .hizli-bakis-btn span{display:none}
}

/* ---------- Hızlı Bakış modalı ---------- */
.hizli-bakis-modal{
  position:fixed; inset:0; background:rgba(14,18,12,.6); z-index:130;
  display:none; align-items:center; justify-content:center; padding:20px;
}
.hizli-bakis-modal.open{display:flex}
.hb-kutu{
  background:var(--white); border-radius:18px; max-width:760px; width:100%;
  max-height:88vh; overflow:auto; position:relative; box-shadow:0 30px 80px rgba(0,0,0,.35);
  display:flex; flex-wrap:wrap;
}
.hb-kapat{
  position:absolute; top:12px; right:12px; z-index:2; width:36px; height:36px; border-radius:50%;
  background:var(--white); border:1px solid var(--line); color:var(--ink); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.hb-img{width:100%; max-width:340px; flex:1 1 320px; object-fit:cover; min-height:280px; background:#f2efe8}
.hb-info{flex:1 1 320px; padding:28px 26px; display:flex; flex-direction:column; gap:8px}
.hb-cat{font-size:12px; text-transform:uppercase; letter-spacing:.6px; color:var(--gold); font-weight:600}
.hb-title{font-family:'Cormorant Garamond',serif; font-size:26px; color:var(--green-dark)}
.hb-rozet{display:inline-block; width:fit-content; font-size:11px; font-weight:700; padding:4px 10px; border-radius:12px; background:var(--green); color:#fff}
.hb-rozet.rozet-tukendi{background:#b23b3b}
.hb-rozet.rozet-az{background:#c8863b}
.hb-fiyat{margin:4px 0}
.hb-desc{color:var(--muted); font-size:14px; line-height:1.6}
.hb-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:8px}
@media(max-width:600px){ .hb-img{min-height:220px} .hb-info{padding:20px} }
/* Ürün görseli kartın içine TAM sığar (contain): dikey/uzun
   fotoğrafların altı üstü kesilmez. Kalan boşluk kartın açık
   bej zemini olarak kalır, bu yüzden görsele küçük bir iç
   boşluk verip ortalıyoruz. */
.card-img img{width:100%;height:100%;object-fit:cover;
  transition:transform .5s,opacity .35s;opacity:0}
.card-img img.yuklendi{opacity:1}
.card-img::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,#f2efe8 30%,#faf8f2 50%,#f2efe8 70%);
  background-size:200% 100%;animation:skeletonAkis 1.4s ease-in-out infinite;
}
.card-img:has(img.yuklendi)::before{display:none}
@keyframes skeletonAkis{0%{background-position:150% 0}100%{background-position:-50% 0}}
@media(prefers-reduced-motion:reduce){.card-img::before{animation:none}}
.flip-card:hover .card-img img{transform:scale(1.04)}
.add-btn:disabled{background:#d8d5ca;color:#8a887f;cursor:not-allowed}
.pd-rozet{font-size:12px;font-weight:700;letter-spacing:.2px;color:var(--green);margin:-6px 0 4px}
.pd-magaza-rozet{display:inline-block;font-size:11.5px;color:var(--muted,#777);background:#f1efe8;border-radius:20px;padding:4px 10px;margin:2px 0 6px}
@media (max-width:480px){ .pd-magaza-rozet{font-size:11px;padding:3px 8px} }

.ab-test-banner{display:flex;align-items:center;justify-content:center;gap:.6rem;flex-wrap:wrap;text-align:center;text-decoration:none;background:var(--green,#354528);color:#fff;padding:.65rem 1rem;font-size:.85rem}
.ab-test-banner b{font-weight:600}
.ab-test-banner span{opacity:.85;text-decoration:underline}
@media (max-width:480px){ .ab-test-banner{font-size:.78rem;padding:.55rem .8rem} }
.pd-rozet.rozet-indirim{color:#b5452e}
.pd-rozet.rozet-az{color:#b5452e}
.pd-rozet.rozet-tukendi{color:#6b6b64}
.pd-taksit{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:12px;color:var(--muted);margin:-8px 0 12px}
.pd-taksit b{color:var(--ink);font-weight:600}

/* KART ÜSTÜ FİYAT ROZETİ (sol üst, referans tasarım) */
.card-fiyat{
  position:absolute;top:0;left:0;right:auto;z-index:2;background:var(--white);
  border-radius:0 0 14px 0;padding:6px 12px 6px 10px;display:flex;flex-direction:column;
  align-items:flex-start;text-align:left;line-height:1.15;box-shadow:0 4px 14px rgba(0,0,0,.14);
}
.card-fiyat-simdi{font-size:14px;font-weight:700;color:var(--ink)}
.card-fiyat-eski{font-size:10px;color:#c0392b;text-decoration:line-through}

/* FİYAT ROZETİNİN ALTINDAKİ İBARE (Yeni/İndirim/Stokta uyarısı vb.) */
.card-fiyat-rozet{
  font-size:10px;font-weight:700;letter-spacing:.2px;color:var(--green);margin-top:1px;
}
.card-fiyat-rozet.rozet-indirim{color:#b5452e}
.card-fiyat-rozet.rozet-az{color:#b5452e}
.card-fiyat-rozet.rozet-tukendi{color:#6b6b64}

.front-info{padding:10px 16px;display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;justify-content:center;text-align:center}
.front-info-metin{width:100%;display:flex;flex-direction:column;gap:1px}
.card-cat{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--gold);font-weight:600}
.card-title{width:100%;font-size:15px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-price{display:flex;align-items:baseline;gap:8px}
.price-now{font-size:20px;font-weight:600;color:var(--green)}
.price-old{font-size:14px;color:#c0392b;text-decoration:line-through}
.price-ikincil{display:block;font-size:12px;color:var(--muted);font-weight:400}

/* ALEV PUANLAMA (yıldız yerine marka renginde alev ikonu) */
.urun-puan{display:flex;align-items:center;justify-content:center;gap:3px;margin-top:-4px}
.alev-ico{width:14px;height:14px;object-fit:contain;transition:opacity .2s}
.alev-ico.bos{opacity:.22;filter:grayscale(1)}
.alev-ico.yarim{opacity:1;filter:none}
.puan-sayi{font-size:12px;color:var(--muted);margin-left:4px;font-weight:500}
.pd-info .urun-puan{margin:2px 0 14px}
.pd-info .alev-ico{width:17px;height:17px}
.pd-info .puan-sayi{font-size:13.5px}
.back-title{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:600;color:var(--green);margin:4px 0}
.back-desc{font-size:13.5px;color:var(--muted);line-height:1.55;margin:6px 0 14px}
.back .card-price{justify-content:center;margin-bottom:16px}
.back-actions{display:flex;flex-direction:column;gap:10px}
.add-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--green);color:#fff;border:none;padding:12px;border-radius:30px;cursor:pointer;font-family:inherit;font-size:14px;font-weight:500;transition:background .2s}
.add-btn:hover{background:var(--green-dark)}
.add-btn svg{width:18px;height:18px}
/* 2 sütunlu ızgara: Büyüt/3D Gör üstte solda, Destek'e Sor tam onun
   altında aynı genişlikte; İncele sağda, Karşılaştır onun altında. */
.ba-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ba-karsilastir.active{background:var(--green);color:#fff;border-color:var(--green)}

/* ÜRÜN KARŞILAŞTIRMA */
.karsilastir-bar{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:45;
  background:var(--ink);color:#fff;border-radius:40px;padding:10px 10px 10px 20px;
  display:flex;align-items:center;gap:14px;box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.karsilastir-bar span{font-size:14px}
.karsilastir-temizle{background:rgba(255,255,255,.15);border:none;color:#fff;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;cursor:pointer}
.karsilastir-temizle svg{width:14px;height:14px}
.karsilastir-tablo{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;min-width:600px}
.kt-etiket{background:#f6f8f3;padding:12px;font-weight:600;font-size:13px;color:var(--green);display:flex;align-items:center}
.kt-hucre{background:var(--white);padding:12px;font-size:13.5px;text-align:center;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px}
.ba-mini{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px;border:1px solid var(--line);border-radius:30px;background:var(--white);cursor:pointer;font-family:inherit;font-size:13px;font-weight:500;color:var(--green);transition:all .2s;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ba-mini.ba-3d{border-color:var(--gold);color:#9a7418;background:linear-gradient(135deg,rgba(200,162,74,.08),rgba(200,162,74,.15))}
.ba-mini.ba-3d:hover{background:var(--gold);color:#3a2e08;border-color:var(--gold)}
.ba-mini:hover{border-color:var(--green);background:var(--green);color:#fff}
.ba-mini svg{width:16px;height:16px}

/* UÇAN SEPET ANİMASYONU */
.fly-clone{position:fixed;z-index:200;border-radius:12px;object-fit:cover;pointer-events:none;box-shadow:0 12px 30px rgba(0,0,0,.35);transition:left .85s cubic-bezier(.55,-0.35,.4,1),top .85s cubic-bezier(.55,-0.35,.4,1),width .85s ease,height .85s ease,opacity .85s ease,border-radius .85s ease}

/* LIGHTBOX (BÜYÜTME) */
.lightbox{position:fixed;inset:0;background:rgba(14,18,12,.93);z-index:120;display:none;align-items:center;justify-content:center;padding:30px}
.lightbox.open{display:flex;animation:fadeIn .25s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.lb-figure{max-width:92vw;text-align:center;margin:0}
.lb-figure img{max-width:100%;max-height:80vh;border-radius:14px;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.lb-figure model-viewer{width:min(92vw,640px);height:min(70vh,640px);border-radius:14px;background:#f2efe8;box-shadow:0 24px 70px rgba(0,0,0,.55);--poster-color:transparent}
.lb-figure figcaption{color:#fff;margin-top:16px;font-family:'Cormorant Garamond',serif;font-size:22px;letter-spacing:.5px}
.lb-3d-ipucu{color:rgba(255,255,255,.65);font-size:12.5px;margin-top:8px}
.lb-close{position:absolute;top:20px;right:20px;color:#fff;background:rgba(255,255,255,.14)}
.lb-close:hover{background:rgba(255,255,255,.28)}
.lb-close svg{width:26px;height:26px}

/* FEATURES */
.features{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:44px 0}
.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.feature{text-align:center}
.feature-ico{margin-bottom:10px;color:var(--green);display:flex;justify-content:center}
.feature-ico svg{width:38px;height:38px}
.feature h4{font-size:16px;color:var(--green);margin-bottom:2px}
.feature p{font-size:13px;color:var(--muted)}

/* FOOTER */
.footer{background:var(--green-dark);color:#cfe0d7;padding:54px 0 0;margin-top:0}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:34px;padding-bottom:40px}
.footer-logo{font-family:'Cormorant Garamond',serif;font-size:28px;letter-spacing:3px;color:#fff;margin-bottom:12px}
.footer h4{color:#fff;font-size:15px;margin-bottom:14px;font-weight:500}
.footer a{display:block;color:#cfe0d7;font-size:14px;padding:3px 0;transition:color .2s}
.footer a:hover{color:var(--gold-light)}
.footer p{font-size:14px;margin-bottom:6px}
.socials{display:flex;gap:12px;margin-top:16px}
.soc{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1);color:#fff;transition:all .22s}
.soc svg{width:20px;height:20px}
.soc:hover{transform:translateY(-3px)}
.soc-ig:hover{background:#E4405F}
.soc-fb:hover{background:#1877F2}
.soc-tt:hover{background:#000}
.soc-wa:hover{background:#25D366}
.fcontact{display:flex;align-items:center;gap:8px}
.fcontact svg{width:17px;height:17px;flex:none;opacity:.85}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:18px 0;font-size:13px;text-align:center;color:#9fbaad}

/* WHATSAPP FLOAT */
.wa-float{position:fixed;bottom:22px;right:22px;z-index:40;background:#25D366;color:#fff;padding:13px 20px;border-radius:40px;font-weight:600;box-shadow:0 8px 24px rgba(37,211,102,.45);display:flex;align-items:center;gap:9px;transition:transform .2s}
.wa-float .wa-ico{display:inline-flex}
.wa-float .wa-ico svg{width:24px;height:24px}
.wa-float:hover{transform:scale(1.06)}
.wa-float::after{content:"";position:absolute;inset:0;border-radius:40px;box-shadow:0 0 0 0 rgba(37,211,102,.5);animation:waPulse 2.2s infinite}
@keyframes waPulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

.yukari-cik-btn{
  position:fixed;bottom:22px;left:22px;z-index:39;width:44px;height:44px;
  border-radius:50%;background:var(--green);color:#fff;border:none;cursor:pointer;
  display:grid;place-items:center;box-shadow:0 8px 24px rgba(53,69,40,.3);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s,transform .25s,visibility .25s,background .2s;
}
.yukari-cik-btn svg{width:20px;height:20px;transform:rotate(-90deg)}
.yukari-cik-btn.show{opacity:1;visibility:visible;transform:translateY(0)}
.yukari-cik-btn:hover{background:var(--green-dark)}
@media(max-width:640px){ .yukari-cik-btn{bottom:18px;left:18px;width:40px;height:40px} }

/* CANLI DESTEK SOHBET BALONU */
.wa-chat{position:fixed;bottom:88px;right:22px;z-index:45;width:330px;max-width:calc(100vw - 32px);background:var(--white);border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.25);overflow:hidden;opacity:0;visibility:hidden;transform:translateY(20px) scale(.96);transform-origin:bottom right;transition:opacity .3s ease,transform .3s cubic-bezier(.2,.8,.2,1),visibility .3s}
.wa-chat.open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.wa-chat-head{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,var(--green),var(--green-dark));color:#fff;padding:15px 15px}
.wa-avatar{position:relative;width:46px;height:46px;border-radius:50%;background:var(--white);display:grid;place-items:center;flex:none;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.wa-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;background:var(--white)}
.wa-avatar svg{width:26px;height:26px;color:var(--green)}
.wa-online{position:absolute;bottom:1px;right:1px;width:11px;height:11px;border-radius:50%;background:#4ade80;border:2px solid #fff}
.wa-head-info{flex:1;line-height:1.3;min-width:0}
.wa-head-info strong{font-size:15.5px;letter-spacing:.2px}
.wa-status{display:flex;align-items:center;gap:5px;font-size:11px;opacity:.9;white-space:nowrap}
.wa-dot{width:6px;height:6px;border-radius:50%;background:#4ade80;display:inline-block;box-shadow:0 0 0 0 rgba(74,222,128,.7);animation:waDot 1.8s infinite}
@keyframes waDot{0%{box-shadow:0 0 0 0 rgba(74,222,128,.7)}70%{box-shadow:0 0 0 6px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
.wa-chat-close{background:none;border:none;color:#fff;cursor:pointer;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;opacity:.85;flex:none}
.wa-chat-close:hover{opacity:1;background:rgba(255,255,255,.15)}
.wa-chat-close svg{width:18px;height:18px}
.wa-chat-body{padding:18px 15px 12px;background:#EDE7DE;background-image:radial-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5))}
.wa-bubble{background:var(--white);border-radius:2px 14px 14px 14px;padding:12px 15px;font-size:14px;color:#303030;box-shadow:0 1px 2px rgba(0,0,0,.1);max-width:90%;margin-bottom:14px;line-height:1.55}
.wa-quick{display:flex;flex-direction:column;gap:9px}
.wa-quick button{display:flex;align-items:center;gap:10px;text-align:left;background:var(--white);border:1px solid #dfe4da;color:var(--ink);border-radius:14px;padding:11px 13px;font-family:inherit;font-size:13.5px;font-weight:500;cursor:pointer;transition:all .18s;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.wa-quick button .wq-ico{width:32px;height:32px;border-radius:9px;background:rgba(53,69,40,.09);color:var(--green);display:grid;place-items:center;flex:none;transition:all .18s}
.wa-quick button .wq-ico svg{width:17px;height:17px}
.wa-quick button>svg{width:16px;height:16px;margin-left:auto;color:var(--muted);flex:none;transition:transform .18s}
.wa-quick button:hover{border-color:var(--green);background:#f6f8f3}
.wa-quick button:hover .wq-ico{background:var(--green);color:#fff}
.wa-quick button:hover>svg{transform:translateX(3px);color:var(--green)}
.wa-chat-cta{display:flex;align-items:center;justify-content:center;gap:9px;background:#25D366;color:#fff;padding:15px;font-weight:600;font-size:14.5px;transition:background .2s}
.wa-chat-cta:hover{background:#1eb457}
.wa-chat-cta svg{width:20px;height:20px}

/* SİTE İÇİ CANLI SOHBET (wa-chat kutusunun içinde, quick butonların altında) */
.wa-sohbet-ayrac{display:flex;align-items:center;gap:10px;margin:16px 0 12px;color:#8a8a82;font-size:11.5px;text-transform:uppercase;letter-spacing:.5px}
.wa-sohbet-ayrac::before,.wa-sohbet-ayrac::after{content:"";flex:1;height:1px;background:#dfe4da}
.wa-thread{display:none;flex-direction:column;gap:8px;max-height:200px;overflow-y:auto;margin-bottom:12px;padding-right:2px}
.wa-balon{max-width:85%;padding:9px 12px;border-radius:13px;font-size:13.5px;line-height:1.5}
.wa-balon p{margin:0}
.wa-balon-musteri{align-self:flex-end;background:var(--green);color:#fff;border-bottom-right-radius:3px}
.wa-balon-admin{align-self:flex-start;background:var(--white);color:var(--ink);border:1px solid #dfe4da;border-bottom-left-radius:3px}
.wa-balon-sistem{align-self:center;background:#eef2ea;color:var(--green-dark);border-radius:20px;font-size:12.5px;text-align:center;max-width:95%}
.wa-urun-kart{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.18);border-radius:9px;padding:5px 7px;margin-bottom:6px}
.wa-balon-admin .wa-urun-kart{background:#f6f8f3}
.wa-urun-kart img{width:32px;height:32px;object-fit:cover;border-radius:6px;flex:none}
.wa-urun-kart span{display:flex;flex-direction:column;gap:1px;min-width:0}
.wa-urun-kart b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}
.wa-urun-kart small{font-size:11px;opacity:.85}
.wa-urun-onizleme{
  display:none;align-items:center;gap:8px;background:#f6f8f3;border:1px solid #dfe4da;
  border-radius:10px;padding:6px 8px;margin-bottom:8px;
}
.wa-urun-onizleme img{width:32px;height:32px;object-fit:cover;border-radius:6px;flex:none}
.wa-urun-onizleme span{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.wa-urun-onizleme b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-urun-onizleme small{font-size:11px;color:var(--muted)}
.wa-urun-onizleme button{flex:none;background:none;border:none;cursor:pointer;color:var(--muted);width:22px;height:22px;display:grid;place-items:center}
.wa-urun-onizleme button:hover{color:var(--ink)}
.wa-isim-form,.wa-mesaj-form{display:flex;gap:8px}
.wa-isim-form input,.wa-mesaj-form input{
  flex:1;border:1px solid #dfe4da;border-radius:20px;padding:10px 14px;
  font-family:inherit;font-size:13.5px;background:var(--white);
}
.wa-isim-form input:focus,.wa-mesaj-form input:focus{outline:none;border-color:var(--green)}
.wa-isim-form button,.wa-mesaj-form button{
  flex:none;background:var(--green);color:#fff;border:none;border-radius:20px;
  padding:0 16px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .2s;
}
.wa-mesaj-form button{width:40px;padding:0}
.wa-mesaj-form button svg{width:17px;height:17px}
.wa-isim-form button:hover,.wa-mesaj-form button:hover{background:var(--green-dark)}
/* Widget kapalıyken admin cevabı gelirse yeşil balonda küçük bir uyarı noktası */
.wa-float-rozetli::before{
  content:"";position:absolute;top:-3px;right:-3px;width:13px;height:13px;
  background:#e0393e;border:2px solid #fff;border-radius:50%;
}
@media(max-width:420px){
  .wa-chat{right:12px;bottom:80px;width:calc(100vw - 24px)}
}

/* CART PANEL */
.overlay{position:fixed;inset:0;background:rgba(20,30,25,.5);opacity:0;visibility:hidden;transition:.3s;z-index:69}
.overlay.open{opacity:1;visibility:visible}
.cart-panel{position:fixed;top:0;right:-440px;width:400px;max-width:90vw;height:100%;background:var(--white);z-index:70;display:flex;flex-direction:column;transition:right .32s;box-shadow:-10px 0 40px rgba(0,0,0,.15)}
.cart-panel.open{right:0}
.cart-head{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid var(--line)}
.cart-head h3{font-family:'Cormorant Garamond',serif;font-size:24px;color:var(--green)}
.cart-items{flex:1;overflow-y:auto;padding:12px 20px}
.cart-empty{text-align:center;color:var(--muted);padding:50px 20px}
.sepet-oneri{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
.sepet-oneri-baslik{display:block;font-size:12px;font-weight:600;color:var(--gold);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.sepet-oneri-kart{display:flex;align-items:center;gap:10px;background:#f6f8f3;border-radius:12px;padding:8px}
.sepet-oneri-kart img{width:48px;height:48px;object-fit:cover;border-radius:8px;flex:none}
.sepet-oneri-bilgi{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sepet-oneri-bilgi b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sepet-oneri-bilgi span{font-size:12.5px;color:var(--green);font-weight:600}
.sepet-oneri-kart .btn-add-lg{flex:none;border-radius:50%;width:34px;height:34px;padding:0!important;display:grid;place-items:center}
.sepet-oneri-kart .btn-add-lg svg{width:16px;height:16px}
.cart-item{position:relative;display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.cart-item img{width:66px;height:66px;object-fit:cover;border-radius:10px}
.cart-item-preview{position:fixed;width:260px;height:260px;padding:0;border-radius:14px;overflow:hidden;box-shadow:0 12px 32px rgba(0,0,0,.25);opacity:0;transform:scale(.95);pointer-events:none;transition:opacity .15s ease,transform .15s ease;z-index:200;background:var(--card,#fff)}
.cart-item-preview img{width:100%;height:100%;object-fit:cover;border-radius:0}
.cart-item-preview.show{opacity:1;transform:scale(1)}
@media (max-width:640px){.cart-item-preview{display:none}}
.ci-info{flex:1}
.ci-info h5{font-size:14.5px;font-weight:500;margin-bottom:2px}
.ci-price{color:var(--green);font-weight:600;font-size:14px}
.ci-controls{display:flex;align-items:center;gap:8px;margin-top:8px}
.qty-btn{width:28px;height:28px;border:1px solid var(--line);background:var(--white);border-radius:7px;cursor:pointer;display:grid;place-items:center;color:var(--ink)}
.qty-btn svg{width:15px;height:15px}
.qty-btn:hover{border-color:var(--green);color:var(--green)}
.ci-remove{margin-left:auto;background:none;border:none;color:var(--muted);cursor:pointer;font-size:12.5px;display:inline-flex;align-items:center;gap:4px}

/* FAVORİLER PANELİ */
.fav-add-btn{display:inline-flex;align-items:center;gap:6px;background:var(--green);color:#fff;border:none;padding:7px 13px;border-radius:20px;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:500;transition:background .2s}
.fav-add-btn:hover{background:var(--green-dark)}
.fav-add-btn svg{width:14px;height:14px}
.fav-tukendi{font-size:12px;color:var(--muted);background:#efece3;padding:6px 12px;border-radius:20px}
.fav-item .ci-controls{gap:10px}

/* ÜCRETSİZ KARGO ÇUBUĞU */
.kargo-bar{display:none;padding:14px 20px 4px}
.kargo-bar-msg{font-size:12.5px;color:var(--ink);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.sadakat-indirim-satiri{font-size:12.5px;color:var(--green);font-weight:600;background:#eef2ea;border-radius:8px;padding:8px 12px;margin:0 16px 12px}
.kargo-bar-msg b{color:var(--green);font-weight:700}
.kargo-bar-track{height:6px;border-radius:4px;background:var(--line);overflow:hidden}
.kargo-bar-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--green));border-radius:4px;transition:width .4s ease;width:0}
.kargo-bar.kargo-tamam .kargo-bar-msg{color:var(--green);font-weight:600}
.kargo-bar.kargo-tamam .kargo-bar-msg svg{width:14px;height:14px;color:var(--green)}
.ci-remove svg{width:14px;height:14px}
.ci-remove:hover{color:#c0392b}
.cart-empty svg{width:52px;height:52px;color:var(--line)}
.cart-foot{padding:20px;border-top:1px solid var(--line)}
.cart-total{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-size:16px}
.cart-total strong{font-size:24px;color:var(--green);font-family:'Cormorant Garamond',serif}

/* ---------- Kupon ---------- */
.coupon{margin-bottom:14px}
.puan-kullan{margin-bottom:14px}
.puan-kullan-satir{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--dark);cursor:pointer;
  border:1px dashed var(--line);border-radius:10px;padding:10px 12px}
.puan-kullan-satir input{width:17px;height:17px;accent-color:var(--green)}
.coupon.has-coupon .coupon-toggle,
.coupon.has-coupon .coupon-form{display:none}
.coupon.has-coupon .coupon-applied{display:flex}

.coupon-toggle{
  display:flex;align-items:center;gap:8px;width:100%;
  background:none;border:1px dashed var(--line);border-radius:10px;
  padding:9px 12px;cursor:pointer;font-family:inherit;font-size:13px;
  font-weight:500;color:var(--green);transition:border-color .2s,background .2s;
}
.coupon-toggle:hover{border-color:var(--gold);background:var(--cream)}
.coupon-toggle-ico{width:16px;height:16px;flex:none;color:var(--gold);display:flex}
.coupon-toggle-ico svg{width:100%;height:100%}
.coupon-toggle-text{flex:1;text-align:left}
.coupon-toggle-arrow{width:13px;height:13px;flex:none;color:var(--muted);transition:transform .25s}
.coupon-toggle-arrow svg{width:100%;height:100%}
.coupon.open .coupon-toggle-arrow{transform:rotate(90deg)}
.coupon.open .coupon-toggle{border-style:solid;border-color:var(--green);color:var(--green);border-bottom-left-radius:0;border-bottom-right-radius:0}

.coupon-form{
  display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease;
  border:1px solid var(--line);border-top:none;border-radius:0 0 10px 10px;
}
.coupon.open .coupon-form{grid-template-rows:1fr}
.coupon-form-inner{min-height:0;overflow:hidden}

.coupon-box{display:flex;align-items:center;gap:8px;padding:11px 12px}
.coupon-box-ico{width:15px;height:15px;flex:none;color:var(--muted)}
.coupon-box-ico svg{width:100%;height:100%}
.coupon-box input{
  flex:1;min-width:0;border:none;background:none;padding:0;
  font-family:inherit;font-size:13.5px;letter-spacing:.5px;outline:none;
  text-transform:uppercase;color:var(--ink);
}
.coupon-box input::placeholder{text-transform:none;letter-spacing:0;color:var(--muted)}
.coupon-box:focus-within{box-shadow:inset 0 0 0 1.5px var(--green)}
.coupon-apply{
  flex:none;background:var(--green);color:#fff;border:none;border-radius:8px;
  padding:8px 14px;font-family:inherit;font-size:12.5px;font-weight:600;
  cursor:pointer;transition:background .2s;
}
.coupon-apply:hover{background:var(--green-dark)}
.coupon-apply:disabled{opacity:.6;cursor:default}
.coupon-msg{font-size:12px;margin:0 12px 10px;min-height:0}
.coupon-msg:empty{margin:0}
.coupon-msg.err{color:#b5452e}

.coupon-applied{
  display:none;align-items:center;gap:10px;
  background:linear-gradient(135deg,rgba(53,69,40,.07),rgba(200,162,74,.09));
  border:1px solid var(--gold-light);border-radius:10px;padding:10px 12px;
}
.coupon-applied-ico{
  width:26px;height:26px;flex:none;border-radius:50%;background:var(--green);
  color:#fff;display:flex;align-items:center;justify-content:center;
}
.coupon-applied-ico svg{width:14px;height:14px}
.coupon-applied-info{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.coupon-applied-info b{font-size:13.5px;letter-spacing:.5px;color:var(--green)}
.coupon-applied-info small{font-size:11px;color:var(--muted)}
.coupon-applied-tutar{flex:none;font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:600;color:#b5452e}
.coupon-remove{flex:none;background:none;border:none;color:var(--muted);cursor:pointer;padding:4px;display:inline-flex;border-radius:50%;transition:color .2s,background .2s}
.coupon-remove:hover{color:#b5452e;background:rgba(181,69,46,.1)}
.coupon-remove svg{width:14px;height:14px}

/* MODAL */
.modal{position:fixed;inset:0;background:rgba(20,30,25,.55);z-index:80;display:none;align-items:center;justify-content:center;padding:20px}
.modal.open{display:flex}
.modal-box{background:var(--white);border-radius:var(--radius);padding:30px;width:100%;max-width:460px;position:relative;max-height:92vh;overflow-y:auto}
.checkout-adimlar{display:flex;justify-content:space-between;margin:18px 0 22px;position:relative}
.checkout-adimlar::before{content:"";position:absolute;top:13px;left:8%;right:8%;height:2px;background:var(--line);z-index:0}
.ca-adim{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;color:var(--muted);flex:1}
.ca-adim b{width:26px;height:26px;border-radius:50%;background:var(--white);border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--muted);transition:all .2s}
.ca-adim.aktif b{border-color:var(--green);color:var(--green);background:var(--white)}
.ca-adim.aktif{color:var(--green);font-weight:600}
.ca-adim.tamam b{background:var(--green);border-color:var(--green);color:#fff}
.ca-adim.tamam{color:var(--green)}
.modal-box h3{font-family:'Cormorant Garamond',serif;font-size:26px;color:var(--green);margin-bottom:4px}
.modal-sub{font-size:13.5px;color:var(--muted);margin-bottom:18px}
.modal-close{position:absolute;top:14px;right:14px}
#checkoutForm label{display:block;font-size:13.5px;font-weight:500;margin-bottom:14px;color:var(--ink)}
#checkoutForm input,#checkoutForm textarea,#checkoutForm select{width:100%;margin-top:5px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;font-family:inherit;font-size:14.5px;outline:none;background:var(--cream);transition:border .2s}
#checkoutForm input:focus,#checkoutForm textarea:focus,#checkoutForm select:focus{border-color:var(--green)}
.modal-total{background:var(--cream);border-radius:10px;padding:12px 14px;margin:6px 0 16px;display:flex;justify-content:space-between;align-items:center;font-size:15px}
.modal-total strong{color:var(--green);font-size:20px}
.modal-total-coupon{color:#b5452e;font-size:12.5px;margin:-8px 0 10px}
.hp-alan{position:absolute !important;left:-9999px !important;width:1px !important;height:1px !important;opacity:0 !important;margin:0 !important;padding:0 !important}
.modal-consent{display:flex !important;align-items:flex-start;gap:8px;font-size:12.5px !important;font-weight:400 !important;color:var(--muted);line-height:1.5;margin-bottom:16px !important}
.modal-consent input{width:auto !important;margin-top:2px !important;flex:none}
.modal-consent a{color:var(--green);text-decoration:underline}
.il-ilce-satir{display:flex;gap:10px}
.il-ilce-satir label{flex:1}

/* TOAST */
.toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--green-dark);color:#fff;padding:13px 24px;border-radius:30px;font-size:14px;opacity:0;visibility:hidden;transition:.3s;z-index:90;box-shadow:var(--shadow)}
.toast.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

/* SOSYAL KANIT (son satışlar bildirimi) */
.sosyal-kanit{
  position:fixed;left:18px;bottom:18px;max-width:300px;
  background:#fff;border:1px solid var(--line,#e8e4da);border-radius:14px;
  padding:12px 14px;box-shadow:var(--shadow);display:flex;gap:10px;align-items:center;
  opacity:0;visibility:hidden;transform:translateY(12px);transition:.35s;z-index:80;
}
.sosyal-kanit.show{opacity:1;visibility:visible;transform:translateY(0)}
.sosyal-kanit .sk-ikon{width:34px;height:34px;border-radius:50%;background:var(--green-soft,#eef3ea);color:var(--green);display:flex;align-items:center;justify-content:center;flex:0 0 auto;font-size:16px}
.sosyal-kanit .sk-metin{font-size:12.5px;line-height:1.4;color:var(--ink,#24291f)}
.sosyal-kanit .sk-metin b{color:var(--green)}
.sosyal-kanit .sk-zaman{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.sosyal-kanit .sk-kapat{background:none;border:none;color:var(--muted);cursor:pointer;font-size:16px;line-height:1;padding:2px;flex:0 0 auto}
@media (max-width:600px){ .sosyal-kanit{left:10px;right:10px;max-width:none;bottom:80px} }
@media (prefers-reduced-motion: reduce){ .sosyal-kanit{transition:none} }

/* SON SATIN ALIMLAR (sosyal kanıt) */
.son-alim{
  position:fixed;left:22px;bottom:22px;z-index:44;max-width:300px;
  display:flex;align-items:center;gap:11px;background:var(--white);
  border:1px solid var(--line);border-radius:14px;padding:12px 15px;
  box-shadow:0 14px 34px rgba(22,45,30,.16);
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .4s ease,transform .4s ease,visibility .4s;
}
.son-alim.show{opacity:1;visibility:visible;transform:translateY(0)}
.son-alim-ico{flex:none;width:32px;height:32px;border-radius:50%;background:#eef5ea;color:#3d7a30;display:grid;place-items:center}
.son-alim-ico svg{width:16px;height:16px}
.son-alim-metin{min-width:0;display:flex;flex-direction:column;gap:1px}
.son-alim-metin b{font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.son-alim-metin span{font-size:11.5px;color:var(--muted)}
@media(max-width:760px){
  .son-alim{left:10px;right:10px;max-width:none;bottom:calc(70px + env(safe-area-inset-bottom,0px))}
}

/* TERKEDİLEN SEPET HATIRLATMASI */
.sepet-hatirlat{
  position:fixed;right:22px;bottom:90px;z-index:85;max-width:340px;
  display:flex;align-items:center;gap:12px;background:var(--white);
  border:1px solid var(--line);border-radius:16px;padding:14px 16px;
  box-shadow:0 16px 40px rgba(22,45,30,.18);
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.97);
  transition:opacity .35s ease,transform .35s ease,visibility .35s;
}
.sepet-hatirlat.show{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.sepet-hatirlat-kapat{position:absolute;top:8px;right:8px;background:none;border:none;color:var(--muted);cursor:pointer;padding:4px;display:flex;border-radius:50%;transition:background .2s}
.sepet-hatirlat-kapat:hover{background:var(--cream)}
.sepet-hatirlat-kapat svg{width:14px;height:14px}
.sepet-hatirlat-ico{flex:none;width:38px;height:38px;border-radius:50%;background:var(--cream);color:var(--green);display:grid;place-items:center}
.sepet-hatirlat-ico svg{width:19px;height:19px}
.sepet-hatirlat-metin{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sepet-hatirlat-metin b{font-size:14px;color:var(--ink)}
.sepet-hatirlat-metin span{font-size:12px;color:var(--muted);line-height:1.4}
.sepet-hatirlat .btn-kucuk{flex:none;padding:9px 14px;font-size:12.5px;border-radius:20px}
@media(max-width:760px){
  .sepet-hatirlat{
    left:12px;right:12px;max-width:none;
    bottom:calc(66px + env(safe-area-inset-bottom,0px));
  }
}
@media(max-width:480px){
  .sepet-hatirlat{flex-wrap:wrap;padding:14px 16px 12px}
  .sepet-hatirlat .btn-kucuk{flex:1 1 100%;margin-top:6px}
}

/* RESPONSIVE */
@media(max-width:980px){
  .product-grid{grid-template-columns:repeat(3,1fr)}
  .cat-cards{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .features-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:980px){
  .flip-card{height:352px}
  .card-img{height:280px}
  /* Yatay menü sığmadan hamburger'e geç */
  .menu-toggle{display:grid}
  .nav{position:fixed;top:0;left:-280px;width:260px;height:100%;background:var(--white);flex-direction:column;gap:0;padding:80px 24px;margin:0;z-index:65;transition:left .3s;box-shadow:5px 0 30px rgba(0,0,0,.1);overflow-y:auto}
  .nav.open{left:0}
  .nav a{padding:12px 0;border-bottom:1px solid var(--line);width:100%;
         display:flex;align-items:center;gap:13px;white-space:normal}
  /* Kategori simgeleri sadece mobil menüde görünür — masaüstü menüsü
     yalın metin olarak kalır, tasarımı değişmez. */
  .nav-ico{display:inline-flex;flex:none;color:var(--green);opacity:.75}
  .nav-ico svg{width:19px;height:19px;display:block}
  .nav a:hover .nav-ico,.nav a.active .nav-ico{opacity:1}
  .nav-shopier .nav-ico{color:var(--shopier);opacity:1}
  .nav-shopier-ok{display:inline;margin-left:4px}
  .logo{margin-right:auto;margin-left:6px}
  .header-actions{margin-left:0}

  /* Mobil çekmecede "Diğer Kategoriler" artık yüzen bir kart değil,
     yerinde açılıp kapanan bir akordeon bölümü. */
  .nav-drop{width:100%}
  .nav-drop-toggle{width:100%;padding:12px 0;border-bottom:1px solid var(--line);justify-content:space-between}
  .nav-drop-toggle>span:first-child{display:flex;align-items:center;gap:13px}
  .nav-drop-menu{position:static;margin:0;padding:0;border:none;box-shadow:none;border-radius:0;opacity:1;visibility:visible;transform:none;max-height:0;overflow:hidden;transition:max-height .3s ease}
  .nav-drop.open .nav-drop-menu{max-height:320px}
  .nav-drop-menu a{padding:12px 0 12px 30px!important;border-bottom:1px solid var(--line)}
}
/* ---------- MOBİL ALT GEZİNME ÇUBUĞU ---------- */
/* admin/anasayfa.php'den kapatılan ana sayfa bölümü — !important ile
   bölümün kendi "içerik varsa göster" JS mantığının üzerine geçer. */
.anasayfa-gizli{display:none!important}
.mobil-navbar{display:none}
@media(max-width:760px){
  .menu-toggle{display:none !important}
  .header-actions{display:none}
  /* Logo alt navbar'daki "Ana Sayfa" sekmesine taşındığı için üst
     header'ı da boşluk bırakmayacak şekilde sıfırlıyoruz — nav (kategori
     çekmecesi) ve search-bar position:fixed/kendi yüksekliğiyle
     çalıştığı için header'ın küçülmesinden etkilenmiyorlar. */
  .logo{display:none}
  .header{border-bottom:none;box-shadow:none}
  .header-inner{height:0;min-height:0;padding:0;gap:0}
  /* Scroll'da eklenen "shrink" durumu (kaydırınca oval/yüzen header
     efekti) masaüstü içindir — .header.shrink .header-inner{height:60px}
     kuralı .header-inner'dan daha özgül olduğu için mobilde de devreye
     girip boş bir şerit bırakıyordu, burada tekrar sıfırlıyoruz. */
  .header.shrink{margin:0;border-radius:0;border:none;box-shadow:none;max-width:none;background:transparent}
  .header.shrink .header-inner{height:0}
  body{padding-bottom:calc(60px + env(safe-area-inset-bottom,0px))}
  .mobil-navbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:68;
    background:var(--white);border-top:1px solid var(--line);
    box-shadow:0 -6px 24px rgba(0,0,0,.08);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .mnav-item{
    flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;
    padding:9px 1px 7px;background:none;border:none;color:var(--muted);
    font-family:inherit;font-size:9.5px;font-weight:500;cursor:pointer;
    position:relative;text-decoration:none;transition:color .2s;
    white-space:nowrap;
  }
  .mnav-item.active,.mnav-item:active{color:var(--green)}
  .mnav-item.dolu{color:var(--green)}
  .mnav-item.dolu .mnav-ico svg{fill:var(--green)}
  .mnav-ico{width:20px;height:20px;transition:transform .2s}
  .mnav-ico svg{width:100%;height:100%}
  .mnav-item:active .mnav-ico{transform:scale(.88)}
  .mnav-logo-img{height:44px;width:auto;object-fit:contain;transition:transform .2s}
  .mnav-item:active .mnav-logo-img{transform:scale(.88)}
  .mnav-badge{
    position:absolute;top:3px;right:18%;background:var(--gold);color:#3a2e08;
    font-size:9px;font-weight:700;min-width:14px;height:14px;border-radius:8px;
    display:grid;place-items:center;padding:0 3px;border:1.5px solid #fff;
  }
  /* 7 sekme sığsın diye yatay iç boşluğu biraz kısıyoruz */
  .mnav-item{padding-left:0;padding-right:0}
  .mnav-item span:not(.mnav-ico):not(.mnav-badge){font-size:9px}
  /* Hesap sekmesi: giriş yapılınca yeşil vurgulanır */
  .mnav-hesap.girisli{color:var(--green)}
  .mnav-hesap.girisli .mnav-etiket{font-weight:700}
  /* WhatsApp sekmesi kendi marka renginde öne çıksın */
  .mnav-wa{color:#25D366}
  .mnav-wa.active,.mnav-wa:active{color:#1da851}
  /* Alt navbar mobilde göründüğü için ayrı yüzen WhatsApp balonuna gerek yok */
  .wa-float{display:none}
}
@media(max-width:760px){
  .product-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .cat-cards{grid-template-columns:repeat(3,1fr)}
  .section-head h2{font-size:32px}
  .cart-label{display:none}
  .cart-btn{padding:10px;border-radius:50%;width:44px;height:44px;justify-content:center}
  .flip-card{height:291px}
  .card-img{height:215px}
  .card-title{font-size:14px}
  .back{padding:18px 14px}
  .back-desc{font-size:12.5px;margin:5px 0 10px}
  .back-title{font-size:20px}
  .back-actions{gap:8px}
  .add-btn{padding:10px;font-size:13px}
  .ba-row{gap:6px}
  .ba-mini{padding:8px 4px;font-size:11.5px;gap:4px}
  .ba-mini svg{width:14px;height:14px;flex:none}
  .wa-text{display:none}
  .slides{height:400px}
  .slider-arrow{width:40px;height:40px}
  .slider-arrow.prev{left:12px}
  .slider-arrow.next{right:12px}
  .topbar-msg{font-size:12px}
  .header.shrink{margin:0;border-radius:0;border:none;box-shadow:none;background:transparent}
}
@media(max-width:600px){
  .flip-card{height:265px}
  .card-img{height:189px}
}
@media(max-width:520px){
  .topbar-inner{gap:10px;padding:5px 12px}
  .marquee-track{animation-duration:20s;font-size:12px}
  .marquee-track>span{padding:0 16px}
  .tsoc{width:26px;height:26px}
  .tsoc svg{width:15px;height:15px}
}
@media(max-width:480px){
  .flip-card{height:271px}
  .card-img{height:195px}
}
@media(max-width:420px){
  .cat-cards{grid-template-columns:repeat(3,1fr)}
  .slides{height:360px}
  .back{padding:14px 12px}
  .back-title{font-size:17px;margin:2px 0}
  .back-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:4px 0 8px}
  .back .card-price{margin-bottom:10px}
  .back-actions{gap:6px}
  .add-btn{padding:9px;font-size:12.5px}
  .ba-mini{font-size:10.5px;padding:7px 3px;gap:3px}
  .ba-mini svg{width:13px;height:13px}
}
/* Dokunmatik cihazlarda hover yok: flip'i tıklama ile yap */
@media(hover:none){
  .flip-card:hover .flip-inner{transform:none}
  .flip-card.flipped .flip-inner{transform:rotateY(180deg)}
  /* Bazı mobil tarayıcılarda backface-visibility 3D transform içinde
     tam güvenilir çalışmıyor; dönünce ön yüzün (fiyat rozeti, kalp)
     arkadan sızıp görünmesini kesin olarak engellemek için görünürlüğü
     JS'in eklediği .flipped sınıfına göre de zorluyoruz. transition
     eklenince "visibility" dönüşün SONUNDA devreye girer (CSS'in
     görünür→gizli geçişlerinde beklediği standart davranış), böylece
     dönüş animasyonu sırasında ani bir kaybolma olmaz. */
  .face{transition:visibility .65s}
  .flip-card.flipped .face.front{visibility:hidden}
  .flip-card:not(.flipped) .face.back{visibility:hidden}
}

/* ================= ÜRÜN DETAY SAYFASI ================= */
.product-detail{padding:34px 20px 20px}
.crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-bottom:24px;flex-wrap:wrap}
.crumb a{color:var(--green)}
.crumb a:hover{text-decoration:underline}
.crumb svg{width:14px;height:14px;opacity:.5}
.pd-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.pd-media{position:relative;border-radius:var(--radius);overflow:hidden;background:#f2efe8;border:1px solid var(--line)}
.pd-media img{width:100%;aspect-ratio:1/1;object-fit:cover;cursor:zoom-in;display:block;opacity:0;transition:opacity .35s}
.pd-media img.yuklendi{opacity:1}
.pd-media::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,#f2efe8 30%,#faf8f2 50%,#f2efe8 70%);
  background-size:200% 100%;animation:skeletonAkis 1.4s ease-in-out infinite;
}
.pd-media:has(img.yuklendi)::before{display:none}
.pd-zoom{position:absolute;bottom:16px;right:16px;display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.92);border:none;border-radius:30px;padding:9px 16px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:500;color:var(--green);box-shadow:0 4px 12px rgba(0,0,0,.12);transition:all .2s}
.pd-zoom:hover{background:var(--green);color:#fff}
.pd-zoom svg{width:16px;height:16px}
.pd-qr{position:absolute;bottom:16px;left:16px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.92);border:none;border-radius:50%;width:38px;height:38px;cursor:pointer;color:var(--green);box-shadow:0 4px 12px rgba(0,0,0,.12);transition:all .2s}
.pd-qr:hover{background:var(--green);color:#fff}
.pd-qr svg{width:18px;height:18px}

/* QR PAYLAŞIM MODALI */
.qr-modal{position:fixed;inset:0;background:rgba(20,25,15,.55);display:none;align-items:center;justify-content:center;z-index:200;padding:16px}
.qr-modal.open{display:flex}
.qr-kutu{background:#fff;border-radius:18px;padding:28px 24px;max-width:300px;width:100%;text-align:center;position:relative;box-shadow:0 24px 60px rgba(0,0,0,.25)}
.qr-kutu h3{font-family:'Cormorant Garamond',serif;font-size:19px;color:var(--green-dark,var(--green));margin:0 0 14px;padding-right:20px}
.qr-canvas-sarma{display:flex;align-items:center;justify-content:center;min-height:220px}
.qr-canvas-sarma canvas{border-radius:8px}
.qr-aciklama{font-size:12px;color:var(--muted);margin-top:12px}
.qr-kapat{position:absolute;top:14px;right:14px;background:none;border:none;font-size:22px;line-height:1;color:var(--muted);cursor:pointer}

/* CANLI KUR ÇEVİRİCİ */
.pd-kur{display:flex;align-items:center;gap:10px;margin-top:-6px;margin-bottom:6px}
.pk-yaklasik{font-size:13px;color:var(--muted)}
.pk-secim{display:inline-flex;gap:4px}
.pk-btn{font-size:11px;font-weight:600;color:var(--muted);background:none;border:1px solid var(--line,#e8e4da);border-radius:8px;padding:2px 7px;cursor:pointer}
.pk-btn.active{background:var(--green);border-color:var(--green);color:#fff}
.pd-thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.pd-thumb{width:60px;height:60px;border-radius:8px;overflow:hidden;padding:0;border:2px solid transparent;cursor:pointer;background:#f2efe8;transition:border-color .2s}
.pd-thumb-video{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:var(--green);color:#fff}
.pd-thumb-video svg{width:18px;height:18px}
.pd-thumb-video span{font-size:9px;font-weight:600}
#pdVideo{width:100%;aspect-ratio:1/1;object-fit:cover;background:#000}
.pd-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pd-thumb.active{border-color:var(--gold)}
.btn-add-lg:disabled{background:#d8d5ca;color:#8a887f;cursor:not-allowed}
.pd-cat{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);font-weight:600}
.pd-title{font-family:'Cormorant Garamond',serif;font-size:40px;font-weight:600;color:var(--ink);line-height:1.1;margin:8px 0 14px}
.pd-price{display:flex;align-items:baseline;gap:12px;margin-bottom:20px}
.pd-price-now{font-size:32px;font-weight:600;color:var(--green)}
.pd-price-old{font-size:19px;color:#c0392b;text-decoration:line-through}
.pd-desc{font-size:15.5px;color:#4a5048;line-height:1.7;margin-bottom:26px;padding-bottom:26px;border-bottom:1px solid var(--line)}
.pd-sertifika{display:flex;flex-wrap:wrap;gap:10px 18px;margin:-16px 0 20px;font-size:13.5px;color:#6b7168}
.pd-sertifika-oge b{color:#2c3128}
@media (max-width:640px){.pd-sertifika{gap:6px 14px;font-size:12.5px}}
.pd-qty{display:flex;align-items:center;gap:18px;margin-bottom:22px}
.pd-qty>span{font-weight:500}
.qty-box{display:flex;align-items:center;gap:16px;border:1px solid var(--line);border-radius:30px;padding:6px 16px}
.qty-box #qVal{min-width:22px;text-align:center;font-weight:600;font-size:16px}
.pd-actions{display:flex;flex-direction:column;gap:12px;margin-bottom:26px}
.btn-add-lg,.btn-wa-lg,.btn-shopier-lg{display:flex;align-items:center;justify-content:center;gap:10px;padding:15px;border:none;border-radius:40px;cursor:pointer;font-family:inherit;font-size:15.5px;font-weight:600;transition:all .2s}
/* Büyük eylem butonları — hepsi liquid fill kullanır, dolan renk
   her butonun kendi kimliğine göre --lq ile belirlenir. */
.btn-add-lg{background-color:var(--green);color:#fff;--lq:var(--gold)}
.btn-add-lg:hover{color:#3a2e08;transform:translateY(-2px);box-shadow:0 6px 18px rgba(200,162,74,.32)}
.btn-add-lg svg{width:20px;height:20px}
.btn-add-lg:disabled{background-color:#d8d5ca;color:#8a887f;cursor:not-allowed;
  background-image:none;transform:none;box-shadow:none}
.btn-wa-lg{background-color:#25D366;color:#fff;--lq:#128C7E}
.btn-wa-lg:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(18,140,126,.3)}
.btn-wa-lg svg{width:20px;height:20px}
/* Shopier — sepetteki ikincil satın alma yolu (bkz. .btn-shopier). Sepete
   Ekle asıl birincil eylem olduğu için burada da aynı çizgili/outline
   stil kullanılır; üç dolu buton yan yana olunca hangisinin öncelikli
   olduğu belirsizleşiyordu. Logo dosyası yoksa img gizlenir, buton
   yazıyla kalır. */
.btn-shopier-lg{background-color:transparent;color:var(--shopier);border:1.5px solid var(--shopier);text-decoration:none;--lq:var(--shopier)}
.btn-shopier-lg:hover{color:#fff;transform:translateY(-2px);box-shadow:0 6px 18px rgba(112,72,232,.28)}
.shopier-logo{height:20px;width:auto;display:block}
.btn-shopier-lg:hover .shopier-logo{filter:brightness(0) invert(1)}
.pd-destek{
  display:flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;
  color:var(--green);font-family:inherit;font-size:13.5px;font-weight:500;
  padding:2px 0 18px;text-decoration:underline;text-underline-offset:3px;
}
.pd-destek svg{width:16px;height:16px}
.pd-destek:hover{color:var(--green-dark)}
.haber-ver-form{display:flex;gap:8px;flex-wrap:wrap}
.haber-ver-form input{flex:1;min-width:180px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font-family:inherit;font-size:14px}
.haber-ver-tesekkur{color:var(--green);font-weight:600;font-size:14px;padding:10px 0}
.pd-sosyal-kanit{font-size:13px;color:var(--green);font-weight:600;margin:0 0 12px}
.pd-sosyal-kanit:empty{display:none}
.pd-varyant{margin:2px 0 16px}
.pd-varyant>span{display:block;font-size:12.5px;color:var(--muted);margin-bottom:8px;font-weight:600}
.pd-varyant-list{display:flex;gap:8px;flex-wrap:wrap}
.pd-varyant-btn{border:1px solid var(--line);background:var(--white);border-radius:8px;
  padding:8px 16px;font-size:13.5px;cursor:pointer;transition:all .2s;color:var(--dark)}
.pd-varyant-btn:hover{border-color:var(--green)}
.pd-varyant-btn.active{background:var(--green);border-color:var(--green);color:#fff}
.pd-perks{display:flex;gap:22px;flex-wrap:wrap}
.perk{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted)}
.perk svg{width:22px;height:22px;color:var(--green)}

/* Önceki/Sonraki ürün gezinme şeridi */
.pd-gezinme{
  display:flex;justify-content:space-between;gap:16px;
  margin:0 20px;padding:18px 0;border-top:1px solid var(--line);flex-wrap:wrap;
}
.pd-gezinme-link{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--muted);
  font-size:13.5px;max-width:47%;padding:8px 12px;border-radius:10px;transition:background .2s}
.pd-gezinme-link:hover{background:var(--cream)}
.pd-gezinme-link svg{width:16px;height:16px;color:var(--green);flex:none}
.pd-gezinme-link small{display:block;text-transform:uppercase;letter-spacing:.5px;font-size:11px;color:var(--muted)}
.pd-gezinme-link b{display:block;color:var(--dark);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-gezinme-onceki{margin-right:auto}
.pd-gezinme-sonraki{margin-left:auto;text-align:right}
@media(max-width:640px){
  .pd-gezinme{flex-direction:column}
  .pd-gezinme-link{max-width:100%}
}

/* Benzer ürünler */
.related-section{padding:20px 20px 60px}
.related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.rel-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:all .25s;display:block}
.rel-card:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
.rel-img{position:relative;aspect-ratio:1/1;overflow:hidden;background:#f2efe8}
.rel-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s,opacity .35s;opacity:0}
.rel-img img.yuklendi{opacity:1}
.rel-img::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,#f2efe8 30%,#faf8f2 50%,#f2efe8 70%);
  background-size:200% 100%;animation:skeletonAkis 1.4s ease-in-out infinite;
}
.rel-img:has(img.yuklendi)::before{display:none}
.rel-card:hover .rel-img img{transform:scale(1.06)}
.rel-body{padding:14px 16px 18px;display:flex;flex-direction:column;gap:5px}
.rel-title{font-size:15px;font-weight:500}

@media(max-width:760px){
  .pd-grid{grid-template-columns:1fr;gap:24px}
  .pd-title{font-size:30px}
  .pd-price-now{font-size:26px}
  .related-grid{grid-template-columns:repeat(2,1fr);gap:14px}
}

/* ================= SİPARİŞ TAKİP SAYFASI ================= */
.takip-sayfa{padding:50px 20px 80px;display:flex;justify-content:center}
.takip-kart{width:100%;max-width:520px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:36px 32px}
.takip-ico{width:50px;height:50px;border-radius:50%;background:var(--cream);color:var(--green);display:grid;place-items:center;margin-bottom:16px}
.takip-ico svg{width:24px;height:24px}
.takip-kart h1{font-family:'Cormorant Garamond',serif;font-size:28px;color:var(--green);margin-bottom:6px}
.takip-alt{font-size:13.5px;color:var(--muted);margin-bottom:24px;line-height:1.6}
#takipForm label{display:block;font-size:13.5px;font-weight:500;margin-bottom:14px;color:var(--ink)}
#takipForm input{width:100%;margin-top:5px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;font-family:inherit;font-size:14.5px;outline:none;background:var(--cream);transition:border .2s}
#takipForm input:focus{border-color:var(--green)}
#takipForm button{margin-top:6px}

.takip-hata{margin-top:20px;padding:12px 14px;border-radius:10px;background:#fbeceb;color:#a13c2a;font-size:13.5px;border:1px solid #f0cfc9}
.takip-iptal{padding:10px 12px;border-radius:8px;background:#fbeceb;color:#a13c2a;font-size:13px;margin-bottom:14px}

.takip-sonuc-kart{margin-top:24px;border-top:1px solid var(--line);padding-top:22px}
.takip-sonuc-ust{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px;flex-wrap:wrap;gap:8px}
.takip-sonuc-ust b{font-family:'Cormorant Garamond',serif;font-size:19px;color:var(--green);display:block;margin-bottom:4px}
.takip-tarih{font-size:12px;color:var(--muted)}
.durum-rozet-takip{display:inline-block;font-size:11.5px;font-weight:600;padding:3px 11px;border-radius:20px;background:var(--cream);color:var(--green)}
.durum-rozet-takip.d-iptal{background:#fbeceb;color:#a13c2a}
.durum-rozet-takip.d-tamamlandi{background:#e7f3ea;color:#2e7d4f}
.durum-rozet-takip.d-kargoda{background:#eef3fb;color:#2f5fa8}
.durum-rozet-takip.d-hazirlaniyor{background:#fbf3e0;color:#9a7418}

.takip-adimlar{display:flex;justify-content:space-between;margin-bottom:24px;position:relative}
.takip-adimlar::before{content:'';position:absolute;top:6px;left:6px;right:6px;height:2px;background:var(--line);z-index:0}
.takip-adim{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;z-index:1;text-align:center}
.takip-adim-nokta{width:13px;height:13px;border-radius:50%;background:var(--white);border:2px solid var(--line)}
.takip-adim-yazi{font-size:11px;color:var(--muted);letter-spacing:.2px}
.takip-adim.done .takip-adim-nokta{background:var(--green);border-color:var(--green)}
.takip-adim.done .takip-adim-yazi{color:var(--ink)}
.takip-adim.current .takip-adim-nokta{background:var(--gold);border-color:var(--gold);box-shadow:0 0 0 4px rgba(200,162,74,.25)}
.takip-adim.current .takip-adim-yazi{color:var(--green);font-weight:600}

.takip-kargo{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;background:var(--cream);border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin-bottom:14px;font-size:13.5px}
.takip-urunler{background:var(--cream);border-radius:10px;padding:12px 14px}
.takip-urun{display:flex;justify-content:space-between;font-size:13.5px;padding:5px 0;color:var(--ink)}
.takip-indirim{color:#b5452e}
.takip-toplam{border-top:1px solid var(--line);margin-top:4px;padding-top:9px;font-size:15px}
.takip-toplam b{color:var(--green);font-family:'Cormorant Garamond',serif;font-size:19px}

@media(max-width:480px){
  .takip-kart{padding:26px 20px}
  .takip-adim-yazi{font-size:9.5px}
}

/* ================= TAKI BAKIM REHBERİ (basit blog içeriği) ================= */
.blog-sayfa{max-width:720px;padding:50px 20px 80px;margin:0 auto}
.blog-sayfa h1{font-family:'Cormorant Garamond',serif;font-size:2.2rem;color:var(--green);margin-bottom:14px}
.blog-giris{color:var(--muted);font-size:15px;line-height:1.7;margin-bottom:34px}
.blog-yazi{margin-bottom:28px}
.blog-yazi h2{font-family:'Cormorant Garamond',serif;font-size:1.35rem;color:var(--green-dark);margin-bottom:8px}
.blog-yazi p{color:var(--dark);font-size:14.5px;line-height:1.75}
.blog-kapanis{margin-top:36px;padding-top:24px;border-top:1px solid var(--line);font-size:14.5px;color:var(--muted)}
.blog-kapanis a{color:var(--green);font-weight:600;text-decoration:underline}

/* ================= BİLGİ POPUP (Hakkımızda/İletişim/Kargo/İade/Çerez) ================= */
.info-modal{position:fixed;inset:0;background:rgba(20,30,25,.55);z-index:130;display:none;align-items:center;justify-content:center;padding:20px}
.info-modal.open{display:flex;animation:fadeIn .25s}
.info-box{background:var(--white);border-radius:var(--radius);max-width:560px;width:100%;max-height:88vh;overflow-y:auto;padding:34px 30px;position:relative;box-shadow:0 24px 70px rgba(0,0,0,.3)}
.info-close{position:absolute;top:14px;right:14px;background:#f1efe8;border:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.info-close:hover{background:#e6e2d8}
.info-close svg{width:20px;height:20px}
.info-title{font-family:'Cormorant Garamond',serif;font-size:30px;color:var(--green);margin-bottom:16px;padding-right:44px}
.info-title::after{content:"";display:block;width:50px;height:2px;background:var(--gold);margin-top:10px}
.info-content{font-size:15px;color:#4a5048;line-height:1.7}
.info-content p{margin-bottom:12px}
.info-list{list-style:none;margin:0 0 14px;padding:0}
.info-list li{position:relative;padding-left:22px;margin-bottom:10px}
.info-list li::before{content:"◆";position:absolute;left:0;color:var(--gold);font-size:11px;top:4px}
.info-content a{color:var(--green);font-weight:500}
.info-content a:hover{text-decoration:underline}
.info-cta{display:inline-flex;align-items:center;gap:9px;background:#25D366;color:#fff !important;padding:12px 22px;border-radius:30px;font-weight:600;margin-top:8px;text-decoration:none !important}
.info-cta:hover{background:#1eb457}
.info-cta svg{width:19px;height:19px}

/* ================= ÇEREZ ONAY BİLDİRİMİ ================= */
.cookie-bar{position:fixed;left:50%;bottom:12px;transform:translate(-50%,160%);width:calc(100% - 24px);max-width:920px;background:var(--white);border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.18);padding:16px 22px;z-index:110;display:flex;align-items:center;gap:18px;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.cookie-bar.show{transform:translate(-50%,0)}
.cookie-text{font-size:13.5px;color:#4a5048;line-height:1.5;flex:1;margin:0}
.cookie-text a{color:var(--green);font-weight:600;text-decoration:underline}
.cookie-actions{display:flex;gap:10px;flex:none}
.ck-btn{border:none;cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:600;padding:10px 22px;border-radius:30px;transition:all .2s}
.ck-accept{background:var(--green);color:#fff}
.ck-accept:hover{background:var(--green-dark)}
.ck-reject{background:#f1efe8;color:var(--ink)}
.ck-reject:hover{background:#e6e2d8}
@media(max-width:600px){
  .cookie-bar{flex-direction:column;align-items:stretch;gap:12px;padding:16px;bottom:0;border-radius:16px 16px 0 0;width:100%}
  .cookie-actions{gap:10px}
  .ck-btn{flex:1}
}

.pwa-kurulum-bar{
  position:fixed;left:50%;bottom:12px;transform:translate(-50%,160%);
  display:flex;align-items:center;gap:16px;background:var(--green-dark);color:#fff;
  padding:12px 18px;border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.25);
  z-index:105;transition:transform .4s cubic-bezier(.2,.8,.2,1);max-width:calc(100% - 24px);
}
.pwa-kurulum-bar.acik{transform:translate(-50%,0)}
.pwa-kurulum-bar span{font-size:13.5px;white-space:nowrap}
.pwa-kurulum-aksiyon{display:flex;gap:8px;flex:none}
.pwa-kurulum-aksiyon button{border:none;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:600;padding:7px 14px;border-radius:20px}
#pwaKurulumKabul{background:var(--gold);color:#3a2e08}
#pwaKurulumRed{background:rgba(255,255,255,.15);color:#fff}
@media(max-width:600px){ .pwa-kurulum-bar{flex-direction:column;align-items:stretch;text-align:center;bottom:70px} }


/* ============ PANEL AYARLI SLIDER (v2) ============ */
:root{
  --slider-h:480px;
  --slider-h-mobil:380px;
  --slider-gecis:1200ms;
  --slider-karartma:.55;
}
.slides{height:var(--slider-h)}
@media(max-width:640px){.slides{height:var(--slider-h-mobil)}}

/* geçiş hızı ayardan gelsin */
.slide{transition:opacity var(--slider-gecis) cubic-bezier(.4,0,.2,1),
                  transform var(--slider-gecis) cubic-bezier(.4,0,.2,1),
                  visibility var(--slider-gecis)}

/* Geçiş türü: kaydır */
#slider.gecis-kaydir .slide{transform:translateX(60px) scale(1)}
#slider.gecis-kaydir .slide.active{transform:translateX(0)}
/* Geçiş türü: zoom */
#slider.gecis-zoom .slide{transform:scale(1.12)}
#slider.gecis-zoom .slide.active{transform:scale(1)}

/* Ken Burns (yavaş yakınlaşma) */
#slider.ken-burns .slide.active.slide-medya{animation:kenBurns 12s ease-out forwards}
@keyframes kenBurns{from{transform:scale(1)}to{transform:scale(1.08)}}

/* Yazı hizalaması */
#slider.hiza-orta .slide{justify-content:center}
#slider.hiza-orta .slide-inner{text-align:center}
#slider.hiza-orta .hero-desc{margin-left:auto;margin-right:auto}
#slider.hiza-sag .slide{justify-content:flex-end}
#slider.hiza-sag .slide-inner{text-align:right}
#slider.hiza-sag .hero-desc{margin-left:auto}

/* Medya (resim/video/link) arkaplanlı slayt */
.slide-medya{background-size:cover;background-position:center;background-color:#26331d}
.slide-medya::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(120deg,rgba(38,51,29,var(--slider-karartma)),rgba(53,69,40,calc(var(--slider-karartma) * .75)))}
.slide-medya .slide-inner{position:relative;z-index:2}
.slide-bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;border:0;pointer-events:none}
/* YouTube/Vimeo iframe'i tam kaplasın */
iframe.slide-bg-video{width:100vw;height:56.25vw;min-height:100%;min-width:177.77vh;
  left:50%;top:50%;transform:translate(-50%,-50%)}


/* ---- Mobil odak & sigdirma ---- */
/* Odak noktasi: panelden secilen yon */
.slide-medya{background-position:var(--odak,center)}
.slide-medya .slide-bg-video{object-position:var(--odak,center)}

@media(max-width:640px){
  /* mobilde ayri odak */
  .slide-medya{background-position:var(--odak-mobil,center)}
  .slide-medya .slide-bg-video{object-position:var(--odak-mobil,center)}

  /* "Sigdir" modu: gorselin tamami gorunur (bosluk kalabilir) */
  .slide-medya.mobil-sigdir{background-size:contain;background-repeat:no-repeat;background-color:#26331d}
  .slide-medya.mobil-sigdir .slide-bg-video{object-fit:contain}

  /* "Otomatik" modu: yukseklik gorselin oranina gore JS ile ayarlanir,
     gorsel tam oturur; yazilar alt kisimda okunakli sekilde durur */
  .slide-medya.mobil-oto{background-size:100% 100%;background-repeat:no-repeat}
  .slide-medya.mobil-oto .slide-bg-video{object-fit:fill}
  .slide-medya.mobil-oto::before{background:linear-gradient(to top,
      rgba(38,51,29,calc(var(--slider-karartma) + .15)) 0%,
      rgba(38,51,29,calc(var(--slider-karartma) * .25)) 55%,
      transparent 100%)}
  .slide-medya.mobil-oto{align-items:flex-end}
  .slide-medya.mobil-oto .slide-inner{padding-bottom:26px}

  /* mobilde yazilar okunakli kalsin */
  .slide-inner{padding:40px 18px}
  .hero-desc{font-size:16px}
}

/* =========================================================
   KENDİ KUTUNU YAP (kutu-yap.html / js/kutu-yap.js)
   ========================================================= */
.kb-sayfa{padding:30px 0 140px;max-width:900px}
.kb-baslik{font-family:'Cormorant Garamond',serif;font-size:34px;color:var(--green-dark);margin-bottom:6px}
.kb-baslik-alt{color:var(--muted);font-size:15px;margin-bottom:28px}

.kb-adimlar{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px;flex-wrap:wrap;gap:8px}
.kb-adim{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;min-width:70px;text-align:center}
.kb-adim-no{width:34px;height:34px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font-weight:700;color:var(--muted);background:var(--white);transition:all .2s}
.kb-adim-ad{font-size:12.5px;color:var(--muted)}
.kb-adim.active .kb-adim-no{border-color:var(--gold);background:var(--gold);color:var(--white)}
.kb-adim.active .kb-adim-ad{color:var(--ink);font-weight:600}
.kb-adim.done .kb-adim-no{border-color:var(--green);background:var(--green);color:var(--white)}

.kb-icerik{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}
.kb-icerik h2{font-family:'Cormorant Garamond',serif;font-size:24px;color:var(--green-dark);margin-bottom:4px}
.kb-alt{color:var(--muted);font-size:14px;margin-bottom:20px}

/* Adım 1: kutu seçimi */
.kb-kutu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}
.kb-kutu-kart{border:2px solid var(--line);border-radius:var(--radius);background:var(--cream);padding:18px;display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;font-family:inherit;transition:border-color .2s,transform .2s}
.kb-kutu-kart:hover{transform:translateY(-2px)}
.kb-kutu-kart.secili{border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,162,74,.2)}
.kb-kutu-renk{width:64px;height:64px;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.kb-kutu-ad{font-size:14px;font-weight:600;text-align:center;color:var(--ink)}
.kb-kutu-fiyat{font-size:13px;color:var(--muted)}

/* Adım 2: hediye kategorileri */
.kb-kategori{border:1px solid var(--line);border-radius:10px;margin-bottom:10px;overflow:hidden}
.kb-kategori-baslik{width:100%;text-align:left;background:var(--cream);border:none;padding:14px 16px;font-size:15px;font-weight:600;color:var(--ink);cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-family:inherit}
.kb-kategori-ok{transition:transform .2s;color:var(--muted)}
.kb-kategori-baslik.acik .kb-kategori-ok{transform:rotate(180deg)}
.kb-kategori-icerik{padding:16px}
.kb-urun-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px}
.kb-urun-kart{border:1px solid var(--line);border-radius:10px;padding:10px;text-align:center;background:var(--white)}
.kb-urun-img{aspect-ratio:1/1;border-radius:8px;overflow:hidden;background:var(--cream);margin-bottom:8px}
.kb-urun-img img{width:100%;height:100%;object-fit:cover}
.kb-urun-ad{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kb-urun-fiyat{font-size:12.5px;color:var(--muted);margin-bottom:8px}
.kb-urun-ekle{width:100%;padding:8px;border-radius:8px;border:1.5px solid var(--green);background:var(--white);color:var(--green);font-weight:600;font-size:13px;cursor:pointer;transition:all .2s}
.kb-urun-ekle:hover{background:var(--green);color:var(--white)}
.kb-urun-ekle.eklendi{background:var(--green);color:var(--white)}

/* Adım 3: not formu */
.kb-not-form{display:flex;flex-direction:column;gap:16px;max-width:520px}
.kb-not-satir{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.kb-not-form label{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:600;color:var(--ink)}
.kb-not-form input,.kb-not-form textarea{border:1.5px solid var(--line);border-radius:8px;padding:10px 12px;font-family:inherit;font-size:14px;color:var(--ink);resize:vertical}
.kb-not-form input:focus,.kb-not-form textarea:focus{outline:none;border-color:var(--gold)}
.kb-karakter{text-align:right;font-size:12px;color:var(--muted)}

/* Adım 4: özet */
.kb-ozet-liste{border:1px solid var(--line);border-radius:10px;padding:6px 16px;margin-bottom:16px}
.kb-ozet-satir{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.kb-ozet-satir:last-child{border-bottom:none}
.kb-uyari{color:var(--muted);padding:14px 0;font-size:14px}
.kb-ozet-not{background:var(--cream);border-radius:10px;padding:14px 16px;margin-bottom:16px;font-size:13.5px;color:var(--ink)}
.kb-ozet-not b{display:block;margin-bottom:6px}
.kb-ozet-not p{margin:2px 0;color:var(--muted)}
.kb-ozet-toplam{display:flex;justify-content:space-between;align-items:center;font-size:17px;font-weight:700;color:var(--green-dark);padding:12px 2px;margin-bottom:16px;border-top:2px solid var(--line)}

/* Alt sabit özet çubuğu */
.kb-ozet-cubugu{position:sticky;bottom:0;margin-top:20px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;box-shadow:0 -6px 24px rgba(0,0,0,.08)}
.kb-cubuk-kalemler{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.kb-cubuk-kalem{background:var(--cream);border-radius:20px;padding:5px 12px;font-size:12.5px;color:var(--ink)}
.kb-cubuk-bos{font-size:13px;color:var(--muted)}
.kb-cubuk-alt{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.kb-cubuk-toplam{font-size:14px;color:var(--ink)}
.kb-cubuk-toplam b{color:var(--green-dark)}
.kb-cubuk-btnler{display:flex;gap:10px}

@media(max-width:640px){
  .kb-not-satir{grid-template-columns:1fr}
  .kb-icerik{padding:18px}
  .kb-cubuk-alt{flex-direction:column;align-items:stretch}
  .kb-cubuk-btnler{width:100%}
  .kb-cubuk-btnler .btn{flex:1}
}

/* ---------- Kendi Kutunu Yap: SOL KENARDAN AÇILAN PANEL ---------- */
.kb-panel{
  position:fixed;top:0;left:-560px;width:520px;max-width:94vw;height:100%;
  background:var(--cream);z-index:70;display:flex;flex-direction:column;
  transition:left .32s;box-shadow:10px 0 40px rgba(0,0,0,.18);
}
.kb-panel.open{left:0}
.kb-panel-head{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid var(--line);background:var(--white)}
.kb-panel-head h3{font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--green)}
.kb-panel-body{flex:1;overflow-y:auto;padding:20px}
.kb-panel .kb-icerik{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:none}
.kb-panel .kb-icerik h2{font-size:20px}
.kb-panel .kb-adimlar{margin-bottom:18px}
.kb-panel .kb-adim-ad{font-size:11px}
.kb-panel .kb-adim-no{width:28px;height:28px;font-size:13px}
.kb-panel .kb-kutu-grid{grid-template-columns:repeat(auto-fill,minmax(135px,1fr))}
.kb-panel .kb-urun-grid{grid-template-columns:repeat(auto-fill,minmax(115px,1fr))}
.kb-panel .kb-ozet-cubugu{position:static;margin:0;border:none;border-top:1px solid var(--line);border-radius:0;box-shadow:none;padding:16px 20px;background:var(--white)}
@media(max-width:640px){
  .kb-panel{width:100%;max-width:100%}
}

/* ---------- Kendi Kutunu Yap: SOL KENAR SEKMESİ ---------- */
.kutu-float{
  position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:45;
  background:var(--green);color:#fff;border:none;cursor:pointer;font-family:inherit;
  padding:16px 11px;border-radius:0 14px 14px 0;box-shadow:4px 6px 24px rgba(0,0,0,.18);
  display:flex;flex-direction:column;align-items:center;gap:8px;transition:padding .2s,background .2s;
}
.kutu-float:hover{padding-left:16px;background:var(--green-dark)}
.kutu-float-ico svg{width:20px;height:20px}
.kutu-float-text{writing-mode:vertical-rl;transform:rotate(180deg);font-size:12px;font-weight:600;letter-spacing:.3px;white-space:nowrap}
@media(max-width:760px){
  /* Mobilde de masaüstündeki gibi yazılı dikey sekme, ama "hayalet" —
     yarı saydam durur, dokununca belirginleşir (panel zaten soldan sağa
     doğru açılıyor). Alt navbar'ın üstünde kalması için biraz yukarı alınır. */
  .kutu-float{top:42%;padding:13px 9px;opacity:.55;background:rgba(53,69,40,.55)}
  .kutu-float:active{opacity:1;background:var(--green-dark)}
  .kutu-float-ico svg{width:18px;height:18px}
  .kutu-float-text{font-size:10.5px}
}
/* Sol kenar sekmesi masaüstüne özel olduğu için bu link sadece mobil
   hamburger çekmecesinde (nav 980px altında off-canvas olunca) görünür;
   .nav a{display:flex} kuralı 980px altında bunu ezip gösterir. */
.nav-kutu-mobile{display:none}