/* ============================================================
   ÇİÇEK ŞABLONU — ANA STİL
   Renkler panelden değiştirilir; site.js :root üzerine yazar.
   ============================================================ */

/* ---------- 0. DEĞİŞKENLER ---------- */
:root{
  --vurgu:#C24C68;
  --vurgu-koyu:#98314B;
  --koyu:#1B2A24;
  --zemin:#FBF6F1;
  --altin:#C9A227;
  --yuvarlak:20px;

  --kart:#FFFFFF;
  --metin:#23302B;
  --metin-sonuk:#6E7C76;
  --cizgi:rgba(27,42,36,.10);
  --golge:0 18px 50px -28px rgba(27,42,36,.45);
  --golge-yumusak:0 10px 30px -22px rgba(27,42,36,.4);
  --olcu:1200px;
  --basli:"Playfair Display",Georgia,"Times New Roman",serif;
  --govde:"Manrope","Segoe UI",system-ui,-apple-system,sans-serif;
  --gecis:.45s cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
/* DİKKAT: html veya body üzerine overflow-x (hidden/clip) KOYMAYIN.
   Kök öğede kaydırmayı kilitliyor ve yapışkan üst barı bozuyor.
   Yatay taşma çıkarsa taşıran öğe kaynağında düzeltilmeli. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--zemin);color:var(--metin);
  font-family:var(--govde);font-size:16.5px;line-height:1.7;
  overflow-wrap:break-word;
}
img{max-width:100%;display:block}
/* Boyutu ayrıca belirtilmemiş her simge makul kalsın (ölçüsüz SVG
   varsayılan 300x150 ile açılıp düzeni bozuyordu) */
svg{width:1em;height:1em;fill:currentColor;flex:none}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--basli);font-weight:700;line-height:1.14;margin:0;letter-spacing:-.01em}
p{margin:0}
::selection{background:var(--vurgu);color:#fff}

.kap{width:min(var(--olcu),92%);margin-inline:auto}
.gizli{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 1. AÇILIŞ EKRANI ---------- */
.acilis{
  position:fixed;inset:0;z-index:9999;
  display:grid;place-items:center;
  background:
    radial-gradient(1000px 620px at 50% 22%, rgba(194,76,104,.16), transparent 62%),
    linear-gradient(160deg,#14201B,#1B2A24 55%,#101915);
  transition:opacity .8s ease,visibility .8s ease;
}
.acilis--gizle{opacity:0;visibility:hidden}
.acilis--atla{display:none}
body.acilis-aktif{overflow:hidden}

.acilis__ic{text-align:center;padding:1rem;width:min(440px,88%)}

/* çizilen çiçek */
.acilis__cicek{width:132px;height:132px;margin:0 auto 1.6rem;position:relative}
.acilis__cicek svg{width:100%;height:100%;overflow:visible}
.acilis__yaprak{
  fill:none;stroke:var(--vurgu);stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:230;stroke-dashoffset:230;
  transform-origin:50px 74px;
  animation:acCiz 1.5s cubic-bezier(.6,.05,.2,1) forwards, acAc 1.1s cubic-bezier(.34,1.56,.64,1) forwards;
}
.acilis__yaprak:nth-of-type(1){animation-delay:.05s,.5s}
.acilis__yaprak:nth-of-type(2){animation-delay:.18s,.62s}
.acilis__yaprak:nth-of-type(3){animation-delay:.31s,.74s}
.acilis__yaprak:nth-of-type(4){animation-delay:.44s,.86s}
.acilis__yaprak:nth-of-type(5){animation-delay:.57s,.98s}
.acilis__sap{
  fill:none;stroke:#5E8B72;stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:120;stroke-dashoffset:120;
  animation:acCiz 1s ease-out .9s forwards;
}
.acilis__goz{
  fill:var(--altin);opacity:0;transform-origin:50px 74px;
  animation:acGoz .7s cubic-bezier(.34,1.56,.64,1) 1.25s forwards;
}
@keyframes acCiz{to{stroke-dashoffset:0}}
@keyframes acAc{
  from{transform:rotate(var(--don,0deg)) scale(.35)}
  to{transform:rotate(var(--don,0deg)) scale(1)}
}
@keyframes acGoz{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
.acilis__cicek::after{
  content:"";position:absolute;inset:-22%;border-radius:50%;
  background:radial-gradient(circle,rgba(194,76,104,.34),transparent 66%);
  animation:acNabiz 2.4s ease-out infinite;
}
@keyframes acNabiz{
  0%{transform:scale(.72);opacity:.85}
  70%{transform:scale(1.22);opacity:0}
  100%{opacity:0}
}

.acilis__ad{
  font-family:var(--basli);font-size:clamp(2.3rem,8vw,3.3rem);font-weight:700;
  color:#fff;margin:0;letter-spacing:.01em;
  opacity:0;animation:acBelir .9s ease-out 1.1s forwards;
}
.acilis__ad i{font-style:italic;color:var(--vurgu)}
.acilis__slogan{
  margin:.55rem 0 0;color:rgba(255,255,255,.62);
  font-size:.76rem;letter-spacing:.42em;text-transform:uppercase;
  opacity:0;animation:acBelir .9s ease-out 1.35s forwards;
}
@keyframes acBelir{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.acilis__bar{
  position:relative;height:2px;width:100%;margin:2.2rem 0 .9rem;
  background:rgba(255,255,255,.13);border-radius:2px;overflow:visible;
}
.acilis__dolgu{
  position:absolute;inset:0;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,var(--vurgu),var(--altin));border-radius:2px;
  animation:acBar 3s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes acBar{to{transform:scaleX(1)}}
.acilis__tomurcuk{
  position:absolute;top:50%;left:0;transform:translate(-50%,-50%);
  width:22px;height:22px;animation:acKay 3s cubic-bezier(.4,0,.2,1) forwards;
}
.acilis__tomurcuk svg{width:100%;height:100%;fill:var(--vurgu);
  animation:acDon 2.6s linear infinite}
@keyframes acKay{from{left:0}to{left:100%}}
@keyframes acDon{to{transform:rotate(360deg)}}
.acilis__yuzde{
  display:block;color:rgba(255,255,255,.5);
  font-size:.72rem;letter-spacing:.3em;font-weight:700;
}

/* düşen yapraklar */
.acilis__toz{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.acilis__toz i{
  position:absolute;top:-8%;width:11px;height:11px;border-radius:60% 10% 60% 10%;
  background:var(--vurgu);opacity:.5;
  animation:acDus linear infinite;
}
@keyframes acDus{
  0%{transform:translateY(-10vh) rotate(0)}
  100%{transform:translateY(112vh) rotate(540deg)}
}

/* ---------- 2. DUYURU ŞERİDİ ---------- */
.duyuru{
  background:var(--koyu);color:rgba(255,255,255,.86);
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.55rem 0;overflow:hidden;position:relative;z-index:60;
}
.duyuru__yol{display:flex;width:max-content;animation:kaydir 34s linear infinite}
.duyuru:hover .duyuru__yol{animation-play-state:paused}
.duyuru__yol span{padding-inline:2.2rem;white-space:nowrap;display:flex;align-items:center;gap:2.2rem}
.duyuru__yol span::after{content:"❀";color:var(--vurgu);font-size:.9rem}
@keyframes kaydir{to{transform:translateX(-50%)}}

/* ---------- 3. ÜST BAR ---------- */
.ust{
  position:sticky;top:0;z-index:80;
  background:rgba(251,246,241,.78);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  /* yalnız bunlar yumuşasın: backdrop-filter geçişe girerse menü
     açılırken konumlandırma bağlamı geç değişiyor */
  transition:background .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.ust--yapisik{
  background:rgba(251,246,241,.94);
  border-bottom-color:var(--cizgi);box-shadow:0 10px 30px -26px rgba(27,42,36,.7);
}
.ust__ic{
  width:min(var(--olcu),92%);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:76px;
}
.marka{display:flex;align-items:center;gap:.7rem}
.marka__isaret{
  width:42px;height:42px;display:grid;place-items:center;flex:none;
  border-radius:50%;background:var(--vurgu);color:#fff;
  transition:transform var(--gecis);
}
.marka__isaret svg{width:24px;height:24px;fill:currentColor}
.marka:hover .marka__isaret{transform:rotate(-14deg) scale(1.08)}
.marka__isaret img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.marka__yazi b{
  display:block;font-family:var(--basli);font-size:1.32rem;font-weight:700;
  line-height:1.05;letter-spacing:-.01em;
}
.marka__yazi b i{font-style:italic;color:var(--vurgu);margin-left:.16em}
.marka__yazi span{
  display:block;font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--metin-sonuk);margin-top:2px;
}

.menu{display:flex;align-items:center;gap:.2rem}
.menu__iletisim{display:none}
.menu > a{
  padding:.5rem .85rem;font-size:.92rem;font-weight:600;border-radius:99px;
  position:relative;transition:color .25s ease;
}
.menu > a::after{
  content:"";position:absolute;left:50%;bottom:.28rem;translate:-50% 0;
  width:0;height:2px;border-radius:2px;background:var(--vurgu);
  transition:width var(--gecis);
}
.menu > a:hover{color:var(--vurgu)}
.menu > a:hover::after,.menu > a[aria-current="page"]::after{width:18px}
.menu > a[aria-current="page"]{color:var(--vurgu)}

.ust__sag{display:flex;align-items:center;gap:.5rem}
.ust__ara{display:none}
.menu-dugme{
  display:none;width:44px;height:44px;border-radius:12px;
  border:1px solid var(--cizgi);background:#fff;
}
.menu-dugme{flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:0}
.menu-dugme span{display:block;width:18px;height:2px;background:var(--metin);border-radius:2px;transition:.3s cubic-bezier(.22,1,.36,1)}
.menu--acik ~ .ust__sag .menu-dugme span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu--acik ~ .ust__sag .menu-dugme span:nth-child(2){opacity:0;transform:scaleX(.2)}
.menu--acik ~ .ust__sag .menu-dugme span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.menu--acik ~ .ust__sag .menu-dugme{border-color:var(--vurgu)}

/* ---------- 4. DÜĞMELER ---------- */
.dugme{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.82rem 1.5rem;border-radius:99px;font-weight:700;font-size:.94rem;
  letter-spacing:.01em;position:relative;overflow:hidden;
  transition:transform var(--gecis),box-shadow var(--gecis),background .3s ease,color .3s ease;
}
.dugme svg{width:18px;height:18px;fill:currentColor;flex:none}
.dugme--dolu{background:var(--vurgu);color:#fff;box-shadow:0 14px 30px -18px var(--vurgu)}
.dugme--dolu:hover{transform:translateY(-3px);box-shadow:0 20px 38px -18px var(--vurgu)}
.dugme--koyu{background:var(--koyu);color:#fff}
.dugme--koyu:hover{transform:translateY(-3px);background:#243a31}
.dugme--wa{background:#25D366;color:#0B3B22;box-shadow:0 14px 30px -18px rgba(37,211,102,.9)}
.dugme--wa:hover{transform:translateY(-3px);background:#1fbe5b;color:#fff}
.dugme--cizgi{border:1.5px solid var(--koyu);color:var(--koyu)}
.dugme--cizgi:hover{background:var(--koyu);color:#fff;transform:translateY(-3px)}
.dugme--acik{background:#fff;color:var(--koyu);box-shadow:var(--golge-yumusak)}
.dugme--acik:hover{transform:translateY(-3px)}
.dugme--kucuk{padding:.6rem 1.05rem;font-size:.85rem}
/* dar ekranda kısa metin varyantı kullanılır */
.yazi-dar{display:none}
.dugme--genis{width:100%}
/* parlama efekti */
.dugme::before{
  content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);transition:left .7s ease;
}
.dugme:hover::before{left:130%}

/* ---------- 5. BÖLÜM BAŞLIKLARI ---------- */
.bolum{padding:clamp(3.6rem,8vw,6.5rem) 0;position:relative}
.bolum--acik{background:#fff}
.bolum--koyu{background:var(--koyu);color:rgba(255,255,255,.9)}
.bolum--koyu h2,.bolum--koyu h3{color:#fff}

.baslik-blok{max-width:640px;margin-bottom:2.8rem}
.baslik-blok--orta{margin-inline:auto;text-align:center}
.ustyazi{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;font-weight:800;
  color:var(--vurgu);margin-bottom:.9rem;
}
.ustyazi::before{content:"";width:26px;height:1.5px;background:currentColor}
.baslik-blok--orta .ustyazi::after{content:"";width:26px;height:1.5px;background:currentColor}
.bolum-baslik{font-size:clamp(1.85rem,4.4vw,2.9rem)}
.bolum-baslik em{font-style:italic;color:var(--vurgu)}
.bolum-alt{margin-top:1rem;color:var(--metin-sonuk);font-size:1.02rem}
.bolum--koyu .bolum-alt{color:rgba(255,255,255,.62)}

/* ---------- 6. HERO ---------- */
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--zemin),#F4EBE3);
  padding:clamp(3rem,7vw,5.5rem) 0 clamp(3.5rem,8vw,6rem);
}
.hero__ic{
  width:min(var(--olcu),92%);margin-inline:auto;
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center;
}
.hero__ust{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.4rem .95rem;border-radius:99px;background:#fff;box-shadow:var(--golge-yumusak);
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:var(--metin-sonuk);
}
.hero__ust svg{width:14px;height:14px;fill:var(--vurgu)}
.hero__ust b{color:var(--vurgu)}
.hero h1{
  font-size:clamp(2.5rem,6.4vw,4.5rem);margin:1.3rem 0 0;line-height:1.03;
}
.hero h1 em{
  font-style:italic;position:relative;display:inline-block;
  background:linear-gradient(96deg,var(--vurgu),var(--altin),var(--vurgu));
  background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:parla 7s linear infinite;
}
@keyframes parla{to{background-position:220% center}}
.hero__alt{margin-top:1.3rem;font-size:1.06rem;color:var(--metin-sonuk);max-width:52ch}
.hero__dugmeler{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.hero__mini{
  display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:2.4rem;
  padding-top:1.6rem;border-top:1px solid var(--cizgi);
}
.hero__mini div b{display:block;font-family:var(--basli);font-size:1.5rem;color:var(--koyu)}
.hero__mini div span{font-size:.78rem;color:var(--metin-sonuk);letter-spacing:.06em}

/* hero görsel yığını */
.hero__gorsel{position:relative;aspect-ratio:4/4.4}
.hero__cerceve{
  position:absolute;inset:0;border-radius:260px 260px var(--yuvarlak) var(--yuvarlak);
  overflow:hidden;box-shadow:var(--golge);
  animation:heroGir 1.1s cubic-bezier(.22,1,.36,1) both;
}
.hero__cerceve img{width:100%;height:100%;object-fit:cover;animation:kenBurns 18s ease-in-out infinite alternate}
@keyframes kenBurns{from{transform:scale(1)}to{transform:scale(1.05) translateY(-1.2%)}}
@keyframes heroGir{from{opacity:0;transform:translateY(38px) scale(.96)}to{opacity:1;transform:none}}
.hero__rozet{
  position:absolute;background:#fff;border-radius:16px;padding:.75rem 1rem;
  box-shadow:var(--golge);display:flex;align-items:center;gap:.6rem;
  font-size:.82rem;font-weight:700;
  animation:suzul 5s ease-in-out infinite;
}
.hero__rozet svg{width:20px;height:20px;fill:var(--vurgu)}
.hero__rozet--1{left:-6%;top:16%}
.hero__rozet--2{right:-4%;bottom:20%;animation-delay:1.4s}
@keyframes suzul{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
.hero__halka{
  position:absolute;right:-14%;top:-10%;width:56%;aspect-ratio:1;border-radius:50%;
  border:1.5px dashed rgba(194,76,104,.35);animation:acDon 40s linear infinite;
}

/* arka plan yaprakları */
.yapraklar{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.yapraklar i{
  position:absolute;width:14px;height:14px;border-radius:60% 10% 60% 10%;
  background:var(--vurgu);opacity:.16;animation:suzulUzun linear infinite;
}
@keyframes suzulUzun{
  0%{transform:translateY(-12vh) translateX(0) rotate(0);opacity:0}
  12%{opacity:.22}
  100%{transform:translateY(112vh) translateX(60px) rotate(420deg);opacity:0}
}

/* ---------- 7. ROZET KARTLARI ---------- */
.izgara{display:grid;gap:1.3rem}
.izgara--4{grid-template-columns:repeat(4,1fr)}
.izgara--3{grid-template-columns:repeat(3,1fr)}
.izgara--2{grid-template-columns:repeat(2,1fr)}

.kart{
  background:var(--kart);border-radius:var(--yuvarlak);padding:1.7rem;
  border:1px solid var(--cizgi);position:relative;overflow:hidden;
  transition:transform var(--gecis),box-shadow var(--gecis),border-color var(--gecis);
}
.kart::after{
  content:"";position:absolute;inset:auto -30% -60% auto;width:180px;height:180px;
  border-radius:50%;background:radial-gradient(circle,rgba(194,76,104,.14),transparent 70%);
  opacity:0;transition:opacity var(--gecis);
}
.kart:hover{transform:translateY(-7px);box-shadow:var(--golge);border-color:rgba(194,76,104,.28)}
.kart:hover::after{opacity:1}
.kart__ikon{
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
  background:rgba(194,76,104,.1);color:var(--vurgu);margin-bottom:1.1rem;
  transition:transform var(--gecis),background var(--gecis);
}
.kart__ikon svg{width:26px;height:26px;fill:currentColor}
.kart:hover .kart__ikon{transform:rotate(-8deg) scale(1.08);background:var(--vurgu);color:#fff}
.kart h3{font-size:1.16rem;margin-bottom:.5rem}
.kart p{color:var(--metin-sonuk);font-size:.94rem}

/* ---------- 8. ÜRÜN KARTI ---------- */
.urun-izgara{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.4rem;
}
.urun{
  position:relative;
  background:var(--kart);border-radius:var(--yuvarlak);overflow:hidden;
  border:1px solid var(--cizgi);display:flex;flex-direction:column;
  transition:transform var(--gecis),box-shadow var(--gecis);
}
.urun:hover{transform:translateY(-8px);box-shadow:var(--golge)}
.urun__gorsel{position:relative;aspect-ratio:1/1.06;overflow:hidden;background:#F2EAE3;display:block}
/* kartın tamamını kaplayan bağlantı katmanı */
.urun__ortu{position:absolute;inset:0;z-index:2}
.urun__ortu:focus-visible{outline:3px solid var(--vurgu);outline-offset:-3px;border-radius:var(--yuvarlak)}
.urun__gorsel img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.22,1,.36,1)}
.urun:hover .urun__gorsel img{transform:scale(1.09)}
.urun__gorsel::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(27,42,36,.58));
  opacity:0;transition:opacity var(--gecis);
}
.urun:hover .urun__gorsel::after{opacity:1}
.urun__hizli{
  position:absolute;left:.9rem;right:.9rem;bottom:.9rem;z-index:3;
  display:flex;gap:.5rem;opacity:0;transform:translateY(14px);
  transition:opacity var(--gecis),transform var(--gecis);
}
.urun:hover .urun__hizli{opacity:1;transform:none}
.urun__hizli .dugme{flex:1;padding:.62rem .5rem;font-size:.82rem;min-height:40px}

.urun__etiketler{position:absolute;top:.9rem;left:.9rem;z-index:3;display:flex;flex-direction:column;gap:.35rem;align-items:flex-start;pointer-events:none}
.rozet{
  padding:.28rem .7rem;border-radius:99px;font-size:.68rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;background:#fff;color:var(--koyu);
  box-shadow:var(--golge-yumusak);
}
.rozet--one{background:var(--altin);color:#3B2E05}
.rozet--yok{background:#8B8B8B;color:#fff}
.urun__govde{padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;flex:1}
.urun__ust{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--vurgu);font-weight:800;margin-bottom:.4rem}
.urun__ad{font-size:1.14rem;margin-bottom:.4rem;transition:color .25s ease}
.urun:hover .urun__ad{color:var(--vurgu)}
.urun__ozet{font-size:.88rem;color:var(--metin-sonuk);flex:1}
.urun__fiyat{
  display:flex;align-items:baseline;gap:.45rem;margin-top:1rem;
  padding-top:.9rem;border-top:1px dashed var(--cizgi);
}
.urun__fiyat b{font-family:var(--basli);font-size:1.32rem;color:var(--koyu)}
.urun__fiyat span{font-size:.74rem;color:var(--metin-sonuk)}
.urun__fiyat em{font-style:normal;font-size:.9rem;color:var(--vurgu);font-weight:700}

/* ---------- 9. FİLTRELER ---------- */
.katalog{display:grid;grid-template-columns:288px 1fr;gap:2rem;align-items:start}
.filtre-panel{
  background:#fff;border:1px solid var(--cizgi);border-radius:var(--yuvarlak);
  position:sticky;top:96px;max-height:calc(100vh - 120px);
  display:flex;flex-direction:column;overflow:hidden;
}
.filtre-govde{overflow-y:auto;padding:.2rem 1.2rem 1rem;flex:1;overscroll-behavior:contain}
.filtre-govde::-webkit-scrollbar{width:6px}
.filtre-govde::-webkit-scrollbar-thumb{background:var(--cizgi);border-radius:6px}

.filtre-basi{
  display:flex;align-items:center;gap:.6rem;
  padding:1.1rem 1.2rem .85rem;border-bottom:1px solid var(--cizgi);
}
.filtre-basi h3{font-size:1rem;display:flex;align-items:center;gap:.45rem;flex:1}
.filtre-basi h3 svg{width:17px;height:17px;fill:var(--vurgu)}
.filtre-temizle{font-size:.79rem;color:var(--vurgu);font-weight:800}
.filtre-temizle:hover{text-decoration:underline}
.filtre-kapat{display:none}
.filtre-alt{display:none}
/* karartma katmanı ızgarada yer kaplamamalı */
.filtre-ortu{
  position:fixed;inset:0;z-index:190;background:rgba(15,22,19,.55);
  opacity:0;visibility:hidden;transition:.3s ease;
}
.katalog__ic{min-width:0}

.filtre-grup{border-top:1px solid var(--cizgi)}
.filtre-grup:first-of-type{border-top:0}
.filtre-grup__bas{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;width:100%;
  font-weight:800;font-size:.8rem;letter-spacing:.07em;text-transform:uppercase;
  padding:.9rem 0;color:var(--koyu);
}
.filtre-grup__bas > span{display:flex;align-items:center;gap:.45rem;text-align:left}
.filtre-grup__sayi{
  font-style:normal;background:var(--vurgu);color:#fff;border-radius:99px;
  min-width:19px;height:19px;padding:0 5px;font-size:.68rem;font-weight:800;
  display:grid;place-items:center;letter-spacing:0;
}
.filtre-grup__bas svg{width:15px;height:15px;fill:var(--metin-sonuk);transition:transform .3s ease;flex:none}
.filtre-grup--kapali .filtre-grup__bas svg{transform:rotate(-90deg)}
.filtre-grup__ic{
  display:grid;grid-template-rows:1fr;
  transition:grid-template-rows .38s cubic-bezier(.22,1,.36,1);
}
.filtre-grup--kapali .filtre-grup__ic{grid-template-rows:0fr}
.filtre-grup__liste{overflow:hidden;min-height:0;display:grid;gap:1px;padding-bottom:.7rem}
.filtre-grup__liste .secenek--fazla{display:none}
.filtre-grup--genis .filtre-grup__liste .secenek--fazla{display:flex;animation:pulGir .3s ease both}
.secenek--bos{opacity:.45}
.filtre-daha{
  justify-self:start;font-size:.8rem;font-weight:800;color:var(--vurgu);
  padding:.45rem .4rem;
}
.filtre-daha:hover{text-decoration:underline}
.secenek{
  display:flex;align-items:center;gap:.6rem;padding:.42rem .4rem;border-radius:10px;
  font-size:.9rem;cursor:pointer;transition:background .2s ease,color .2s ease;
}
.secenek:hover{background:rgba(194,76,104,.07);color:var(--vurgu)}
.secenek input{position:absolute;opacity:0;pointer-events:none}
.secenek__kutu{
  width:18px;height:18px;border-radius:6px;border:1.5px solid var(--cizgi);flex:none;
  display:grid;place-items:center;transition:.25s ease;background:#fff;
}
.secenek--tek .secenek__kutu{border-radius:50%}
.secenek__kutu svg{width:11px;height:11px;fill:#fff;opacity:0;transform:scale(.4);transition:.25s ease}
.secenek input:checked + .secenek__kutu{background:var(--vurgu);border-color:var(--vurgu);transform:scale(1.06)}
.secenek input:checked + .secenek__kutu svg{opacity:1;transform:scale(1)}
.secenek input:focus-visible + .secenek__kutu{outline:2px solid var(--vurgu);outline-offset:2px}
.secenek__ad{flex:1}
.secenek__sayi{font-size:.75rem;color:var(--metin-sonuk)}

/* üst araç çubuğu */
.arac{
  display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;
  margin-bottom:1.2rem;
}
.ara-kutu{
  flex:1;min-width:200px;position:relative;
}
.ara-kutu svg{position:absolute;left:.95rem;top:50%;translate:0 -50%;width:17px;height:17px;fill:var(--metin-sonuk)}
.ara-kutu input{
  width:100%;padding:.78rem 1rem .78rem 2.6rem;border-radius:99px;
  border:1px solid var(--cizgi);background:#fff;outline:none;transition:.25s ease;
}
.ara-kutu input:focus{border-color:var(--vurgu);box-shadow:0 0 0 4px rgba(194,76,104,.12)}
.sirala{
  padding:.78rem 1rem;border-radius:99px;border:1px solid var(--cizgi);background:#fff;
  cursor:pointer;outline:none;
}
.filtre-ac{
  display:none;align-items:center;gap:.5rem;padding:.76rem 1.1rem;border-radius:99px;
  border:1px solid var(--cizgi);background:#fff;font-weight:700;font-size:.9rem;
}
.filtre-ac svg{width:16px;height:16px;fill:var(--vurgu)}
.filtre-ac i{display:none}
.filtre-ac i.dolu{
  display:grid;place-items:center;background:var(--vurgu);color:#fff;border-radius:99px;
  min-width:20px;height:20px;padding:0 5px;font-size:.72rem;font-style:normal;font-weight:800;
}
.sonuc-sayi{font-size:.86rem;color:var(--metin-sonuk);margin-left:auto}

/* seçili filtre pulları */
.pullar{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.1rem;min-height:0}
.pul{
  display:inline-flex;align-items:center;gap:.45rem;padding:.34rem .5rem .34rem .8rem;
  border-radius:99px;background:var(--koyu);color:#fff;font-size:.78rem;font-weight:600;
  animation:pulGir .35s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes pulGir{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.pul button{
  width:19px;height:19px;border-radius:50%;background:rgba(255,255,255,.2);
  display:grid;place-items:center;font-size:.8rem;line-height:1;transition:.2s ease;
}
.pul button:hover{background:var(--vurgu)}

/* hızlı amaç sekmeleri */
.hizli-filtre{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.5rem;margin-bottom:1.4rem;scrollbar-width:thin}
.hizli-filtre button{
  white-space:nowrap;padding:.55rem 1.1rem;border-radius:99px;border:1px solid var(--cizgi);
  background:#fff;font-size:.87rem;font-weight:600;transition:.25s ease;
}
.hizli-filtre button:hover{border-color:var(--vurgu);color:var(--vurgu);transform:translateY(-2px)}
.hizli-filtre button.aktif{background:var(--vurgu);border-color:var(--vurgu);color:#fff}

.bos-durum{
  grid-column:1/-1;text-align:center;padding:4rem 1rem;color:var(--metin-sonuk);
}
.bos-durum svg{width:56px;height:56px;fill:var(--cizgi);margin-bottom:1rem}

/* ---------- 10. ÜRÜN DETAY ---------- */
.iz{font-size:.82rem;color:var(--metin-sonuk);padding:1.4rem 0 0}
.iz a:hover{color:var(--vurgu)}
.detay{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(1.6rem,4vw,3.4rem);padding:2rem 0 1rem;align-items:start}
.detay__gorseller{position:sticky;top:96px}
.detay__ana{
  border-radius:var(--yuvarlak);overflow:hidden;aspect-ratio:1/1.05;background:#F2EAE3;
  box-shadow:var(--golge);cursor:zoom-in;position:relative;
}
.detay__ana img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.22,1,.36,1)}
.detay__ana:hover img{transform:scale(1.06)}
.detay__kucukler{display:flex;gap:.6rem;margin-top:.8rem;flex-wrap:wrap}
.detay__kucukler button{
  width:72px;aspect-ratio:1;border-radius:12px;overflow:hidden;border:2px solid transparent;
  transition:.25s ease;opacity:.7;
}
.detay__kucukler button img{width:100%;height:100%;object-fit:cover}
.detay__kucukler button:hover{opacity:1;transform:translateY(-3px)}
.detay__kucukler button.aktif{border-color:var(--vurgu);opacity:1}

.detay__bilgi h1{font-size:clamp(1.8rem,4vw,2.6rem);margin:.5rem 0 0}
.detay__fiyat{
  display:flex;align-items:baseline;gap:.6rem;margin:1.2rem 0;
}
.detay__fiyat b{font-family:var(--basli);font-size:2.1rem;color:var(--vurgu)}
.detay__fiyat span{font-size:.85rem;color:var(--metin-sonuk)}
.detay__ozet{color:var(--metin-sonuk);font-size:1.02rem}
.detay__aksiyon{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin:1.6rem 0}
.detay__aksiyon .dugme{padding:1rem}
.detay__guven{display:grid;gap:.6rem;margin-top:1.4rem;padding-top:1.4rem;border-top:1px solid var(--cizgi)}
.detay__guven div{display:flex;gap:.6rem;align-items:center;font-size:.9rem;color:var(--metin-sonuk)}
.detay__guven svg{width:18px;height:18px;fill:var(--vurgu);flex:none}

.detay__metin{margin-top:1.6rem;white-space:pre-line;color:var(--metin-sonuk)}
.ozellik-tablo{width:100%;border-collapse:collapse;margin-top:1.2rem;font-size:.92rem}
.ozellik-tablo td{padding:.7rem .4rem;border-bottom:1px solid var(--cizgi)}
.ozellik-tablo td:first-child{color:var(--metin-sonuk);width:40%}
.ozellik-tablo td:last-child{font-weight:600}

.etiket-sira{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.2rem}
.etiket{
  padding:.35rem .8rem;border-radius:99px;background:rgba(194,76,104,.08);
  color:var(--vurgu);font-size:.79rem;font-weight:700;transition:.25s ease;
}
a.etiket:hover{background:var(--vurgu);color:#fff;transform:translateY(-2px)}

/* sekmeler */
.sekme-bar{display:flex;gap:.4rem;border-bottom:1px solid var(--cizgi);margin-top:2.4rem;overflow-x:auto}
.sekme-bar button{
  padding:.8rem 1.2rem;font-weight:700;font-size:.92rem;white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px;color:var(--metin-sonuk);transition:.25s ease;
}
.sekme-bar button.aktif{color:var(--vurgu);border-bottom-color:var(--vurgu)}
.sekme-icerik{padding-top:1.4rem;animation:belirYukari .45s ease both}
@keyframes belirYukari{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- 11. GALERİ ---------- */
.galeri-izgara{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  grid-auto-rows:200px;gap:1rem;
}
.galeri-oge{
  position:relative;overflow:hidden;border-radius:var(--yuvarlak);cursor:zoom-in;
  background:#F2EAE3;
}
.galeri-oge:nth-child(6n+1){grid-row:span 2}
.galeri-oge:nth-child(6n+4){grid-column:span 2}
.galeri-oge img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.22,1,.36,1)}
.galeri-oge:hover img{transform:scale(1.1)}
.galeri-oge__ust{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:1.1rem;color:#fff;
  background:linear-gradient(180deg,transparent 40%,rgba(27,42,36,.75));
  opacity:0;transition:opacity var(--gecis);
}
.galeri-oge:hover .galeri-oge__ust{opacity:1}
.galeri-oge__ust b{font-family:var(--basli);font-size:1.1rem}
.galeri-oge__ust span{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--altin)}

/* büyüteç */
.buyutec{
  position:fixed;inset:0;z-index:9000;background:rgba(15,22,19,.94);
  display:grid;place-items:center;padding:2rem;opacity:0;visibility:hidden;transition:.35s ease;
}
.buyutec--acik{opacity:1;visibility:visible}
.buyutec img{max-width:92vw;max-height:84vh;border-radius:14px;animation:belirYukari .45s ease both;box-shadow:0 30px 90px rgba(0,0,0,.6)}
.buyutec__kapat,.buyutec__ok{
  position:absolute;width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;
  font-size:1.4rem;transition:.25s ease;backdrop-filter:blur(6px);
}
.buyutec__kapat:hover,.buyutec__ok:hover{background:var(--vurgu)}
.buyutec__kapat{top:1.4rem;right:1.4rem}
.buyutec__ok--sol{left:1.4rem;top:50%;translate:0 -50%}
.buyutec__ok--sag{right:1.4rem;top:50%;translate:0 -50%}
.buyutec__yazi{position:absolute;bottom:1.6rem;left:50%;translate:-50% 0;color:rgba(255,255,255,.75);font-size:.9rem}

/* ---------- 12. SÜREÇ / ADIMLAR ---------- */
.surec{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;counter-reset:adim}
.surec__oge{position:relative;padding-top:2.6rem}
.surec__oge::before{
  counter-increment:adim;content:"0" counter(adim);
  position:absolute;top:0;left:0;font-family:var(--basli);font-size:2.6rem;
  color:rgba(194,76,104,.22);font-weight:700;line-height:1;
  transition:color var(--gecis),transform var(--gecis);
}
.surec__oge:hover::before{color:var(--vurgu);transform:translateY(-4px)}
.surec__oge::after{
  content:"";position:absolute;top:1.2rem;left:3.4rem;right:-1rem;height:1px;
  background:repeating-linear-gradient(90deg,var(--cizgi) 0 6px,transparent 6px 12px);
}
.surec__oge:last-child::after{display:none}
.surec__oge h3{font-size:1.1rem;margin-bottom:.4rem}
.surec__oge p{font-size:.92rem;color:var(--metin-sonuk)}

/* ---------- 13. SAYAÇLAR ---------- */
.sayac-serit{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;text-align:center}
.sayac b{
  display:block;font-family:var(--basli);font-size:clamp(2rem,4.6vw,3rem);
  color:var(--vurgu);line-height:1.1;
}
.sayac span{font-size:.82rem;letter-spacing:.1em;color:var(--metin-sonuk)}
.bolum--koyu .sayac span{color:rgba(255,255,255,.6)}
.bolum--koyu .sayac b{color:var(--altin)}

/* ---------- 14. HAKKINDA ---------- */
.ikili{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.ikili__gorsel{position:relative;border-radius:var(--yuvarlak);overflow:hidden;aspect-ratio:4/3.4;box-shadow:var(--golge)}
.ikili__gorsel img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease}
.ikili__gorsel:hover img{transform:scale(1.06)}
.ikili__metin{white-space:pre-line;color:var(--metin-sonuk)}
.madde-liste{list-style:none;padding:0;margin:1.6rem 0 0;display:grid;gap:.7rem}
.madde-liste li{display:flex;gap:.7rem;align-items:flex-start;font-size:.96rem}
.madde-liste svg{width:20px;height:20px;fill:var(--vurgu);flex:none;margin-top:.15rem}

/* ---------- 15. YORUMLAR ---------- */
.yorum{
  background:#fff;border-radius:var(--yuvarlak);padding:1.7rem;border:1px solid var(--cizgi);
  position:relative;transition:transform var(--gecis),box-shadow var(--gecis);
}
.yorum:hover{transform:translateY(-6px);box-shadow:var(--golge)}
.yorum::before{
  content:"”";position:absolute;top:.2rem;right:1.2rem;font-family:var(--basli);
  font-size:4.5rem;color:rgba(194,76,104,.16);line-height:1;
}
.yildizlar{color:var(--altin);letter-spacing:.15em;margin-bottom:.7rem;font-size:.95rem}
.yorum p{font-size:.96rem;color:var(--metin-sonuk);font-style:italic}
.yorum b{display:block;margin-top:1rem;font-family:var(--basli);font-size:1.05rem}

/* ---------- 16. S.S.S. ---------- */
.sss{display:grid;gap:.7rem;max-width:820px;margin-inline:auto}
.sss details{
  background:#fff;border:1px solid var(--cizgi);border-radius:16px;overflow:hidden;
  transition:border-color .3s ease,box-shadow .3s ease;
}
.sss details[open]{border-color:rgba(194,76,104,.4);box-shadow:var(--golge-yumusak)}
.sss summary{
  padding:1.1rem 1.3rem;font-weight:700;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:1rem;align-items:center;
}
.sss summary::-webkit-details-marker{display:none}
.sss summary::after{
  content:"+";font-size:1.5rem;color:var(--vurgu);transition:transform .3s ease;line-height:1;
}
.sss details[open] summary::after{transform:rotate(45deg)}
.sss p{padding:0 1.3rem 1.2rem;color:var(--metin-sonuk);font-size:.95rem;animation:belirYukari .35s ease both}

/* ---------- 17. İLETİŞİM ---------- */
.iletisim-izgara{display:grid;grid-template-columns:1fr 1.15fr;gap:2rem;align-items:start}
.bilgi-kart{
  background:#fff;border:1px solid var(--cizgi);border-radius:var(--yuvarlak);padding:1.6rem;
}
.bilgi-satir{display:flex;gap:.9rem;padding:.9rem 0;border-bottom:1px solid var(--cizgi)}
.bilgi-satir:last-child{border-bottom:0}
.bilgi-satir svg{width:20px;height:20px;fill:var(--vurgu);flex:none;margin-top:.2rem}
.bilgi-satir b{display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--metin-sonuk);font-weight:800}
.bilgi-satir span{font-size:.98rem}
.bilgi-satir a:hover{color:var(--vurgu)}

.saat-tablo{width:100%;border-collapse:collapse;font-size:.94rem}
.saat-tablo td{padding:.6rem .2rem;border-bottom:1px solid var(--cizgi)}
.saat-tablo td:last-child{text-align:right;font-weight:600}
.saat-tablo tr.bugun td{color:var(--vurgu);font-weight:800}
.saat-tablo tr.bugun td:first-child::before{content:"● ";font-size:.7rem}
.acik-rozet{
  display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .9rem;border-radius:99px;
  font-size:.8rem;font-weight:800;margin-bottom:1rem;
}
.acik-rozet--acik{background:rgba(37,211,102,.14);color:#1B7F42}
.acik-rozet--kapali{background:rgba(194,76,104,.12);color:var(--vurgu)}
.acik-rozet i{width:8px;height:8px;border-radius:50%;background:currentColor;animation:nabiz 1.8s ease-in-out infinite}
@keyframes nabiz{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(1.4)}}

.harita{
  border-radius:var(--yuvarlak);overflow:hidden;border:1px solid var(--cizgi);
  min-height:380px;background:#EDE5DE;
}
.harita iframe{width:100%;height:100%;min-height:380px;border:0;display:block;filter:saturate(.9)}

/* form */
.form-alan{display:grid;gap:.9rem}
.alan label{display:block;font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--metin-sonuk);margin-bottom:.35rem}
.alan input,.alan select,.alan textarea{
  width:100%;padding:.8rem 1rem;border-radius:12px;border:1px solid var(--cizgi);
  background:#fff;outline:none;transition:.25s ease;
}
.alan textarea{min-height:120px;resize:vertical}
.alan input:focus,.alan select:focus,.alan textarea:focus{
  border-color:var(--vurgu);box-shadow:0 0 0 4px rgba(194,76,104,.12);
}
.alan-ikili{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}

/* ---------- 18. CTA ŞERİDİ ---------- */
.cta{
  position:relative;overflow:hidden;border-radius:var(--yuvarlak);
  background:linear-gradient(120deg,var(--koyu),#2C463A);color:#fff;
  padding:clamp(2.2rem,5vw,3.4rem);text-align:center;
}
.cta::before,.cta::after{
  content:"";position:absolute;border-radius:50%;
  background:radial-gradient(circle,rgba(194,76,104,.4),transparent 68%);
}
.cta::before{width:340px;height:340px;top:-140px;left:-90px}
.cta::after{width:300px;height:300px;bottom:-150px;right:-70px;background:radial-gradient(circle,rgba(201,162,39,.34),transparent 68%)}
.cta h2{font-size:clamp(1.6rem,4vw,2.5rem);position:relative}
.cta p{margin:.9rem auto 1.8rem;max-width:56ch;color:rgba(255,255,255,.72);position:relative}
.cta__dugmeler{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;position:relative}

/* ---------- 19. ALT BİLGİ ---------- */
.alt{background:var(--koyu);color:rgba(255,255,255,.68);padding:3.4rem 0 1.8rem;margin-top:0}
.alt__ic{
  width:min(var(--olcu),92%);margin-inline:auto;
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2rem;
}
.alt h4{color:#fff;font-size:1rem;margin-bottom:1rem;font-family:var(--govde);font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.alt a:hover{color:var(--vurgu)}
.alt__liste{display:grid;gap:.55rem;font-size:.92rem}
.alt__marka .marka__yazi b{color:#fff}
.alt__marka p{margin-top:1rem;font-size:.92rem;max-width:34ch}
.alt__sosyal{display:flex;gap:.6rem;margin-top:1.2rem}
.alt__sosyal a{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.08);transition:.25s ease;
}
.alt__sosyal a svg{width:18px;height:18px;fill:#fff}
.alt__sosyal a:hover{background:var(--vurgu);transform:translateY(-3px)}
.alt__telif{
  width:min(var(--olcu),92%);margin:2.4rem auto 0;padding-top:1.4rem;
  border-top:1px solid rgba(255,255,255,.08);text-align:center;font-size:.78rem;color:rgba(255,255,255,.42);
}

/* --- Created by Hamza — kırmızı yanıp sönen imza --- */
.alt__kredi{width:min(var(--olcu),92%);margin:14px auto 0;text-align:center}
.alt__kredi a{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.78rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:#FF3B3B;animation:krediYanipSon 1.6s ease-in-out infinite;transition:transform .2s ease;
}
.alt__kredi a::before,.alt__kredi a::after{
  content:"";width:6px;height:6px;transform:rotate(45deg);background:#FF3B3B;
}
.alt__kredi a:hover{
  color:#FF3B3B;transform:scale(1.07);animation-play-state:paused;opacity:1;
  text-shadow:0 0 16px rgba(255,59,59,.95);
}
@keyframes krediYanipSon{
  0%,100%{opacity:1;text-shadow:0 0 14px rgba(255,59,59,.9)}
  50%{opacity:.3;text-shadow:0 0 2px rgba(255,59,59,.2)}
}

/* ---------- 20. YÜZEN WHATSAPP ---------- */
.yuzen-wa{
  position:fixed;right:1.2rem;bottom:1.4rem;z-index:70;
  width:58px;height:58px;border-radius:50%;background:#25D366;
  display:grid;place-items:center;box-shadow:0 14px 32px -12px rgba(37,211,102,.8);
  transition:transform .3s ease;
}
.yuzen-wa svg{width:30px;height:30px;fill:#fff}
.yuzen-wa:hover{transform:scale(1.1) rotate(6deg)}
.yuzen-wa::after{
  content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;
  animation:halka 2.2s ease-out infinite;
}
@keyframes halka{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.7);opacity:0}}

/* yukarı çık */
.yukari{
  position:fixed;right:1.2rem;bottom:5.6rem;z-index:70;width:44px;height:44px;border-radius:50%;
  background:#fff;box-shadow:var(--golge);display:grid;place-items:center;
  opacity:0;visibility:hidden;transform:translateY(10px);transition:.3s ease;
}
.yukari svg{width:18px;height:18px;fill:var(--koyu)}
.yukari--gorunur{opacity:1;visibility:visible;transform:none}
.yukari:hover{background:var(--vurgu)}
.yukari:hover svg{fill:#fff}

/* ---------- 21. SAYFA BAŞLIĞI (iç sayfalar) ---------- */
.sayfa-bas{
  position:relative;overflow:hidden;padding:clamp(2.6rem,6vw,4.4rem) 0 clamp(2rem,4vw,3rem);
  background:linear-gradient(160deg,#F6EDE6,var(--zemin));text-align:center;
}
.sayfa-bas h1{font-size:clamp(2rem,5vw,3.2rem);margin-top:.6rem}
.sayfa-bas h1 em{font-style:italic;color:var(--vurgu)}
.sayfa-bas p{margin:1rem auto 0;max-width:58ch;color:var(--metin-sonuk)}

/* ---------- 22. KAYDIRINCA BELİRME ---------- */
.belir{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.belir--sol{transform:translateX(-30px)}
.belir--sag{transform:translateX(30px)}
.belir--zoom{transform:scale(.94)}
/* Yalnız saydamlıkla beliren varyant: transform kullanan bir kapsayıcı,
   içindeki position:fixed öğeleri (alt sipariş çubuğu) kendine bağlar. */
.belir--opak{transform:none}
.belir--acik{opacity:1;transform:none}
/* Dar ekranda yana kayarak beliren öğeler sayfayı yatay taşırıyordu */
@media (max-width:900px){
  .belir--sol,.belir--sag{transform:translateY(26px)}
}

/* ---------- 23. BİLDİRİM ---------- */
.bildirim{
  position:fixed;left:50%;bottom:1.4rem;translate:-50% 0;z-index:9500;
  background:var(--koyu);color:#fff;padding:.85rem 1.3rem;border-radius:99px;
  font-size:.9rem;font-weight:600;box-shadow:var(--golge);
  opacity:0;visibility:hidden;transform:translateY(16px);transition:.3s ease;
}
.bildirim--gor{opacity:1;visibility:visible;transform:none}

/* ---------- 24. DOKUNMATİK CİHAZLAR ----------
   Fareyle üzerine gelme olmadığı için gizli duran işlemler
   dokunmatikte hep görünür olur. */
@media (hover:none){
  .urun__gorsel::after{opacity:1;background:linear-gradient(180deg,transparent 52%,rgba(27,42,36,.55))}
  .urun__hizli{opacity:1;transform:none}
  .galeri-oge__ust{opacity:1;background:linear-gradient(180deg,transparent 46%,rgba(27,42,36,.72))}
  .dugme:hover,.kart:hover,.urun:hover,.yorum:hover{transform:none}
  .urun:hover .urun__gorsel img{transform:none}
}

/* ---------- 25. DUYARLILIK ---------- */
@media (max-width:1040px){
  .izgara--4{grid-template-columns:repeat(2,1fr)}
  .surec{grid-template-columns:repeat(2,1fr)}
  .surec__oge::after{display:none}
  .alt__ic{grid-template-columns:1fr 1fr}
  .katalog{grid-template-columns:250px 1fr;gap:1.4rem}
}

/* ---- tablet ve altı: filtre alttan açılan çekmece ---- */
@media (max-width:900px){
  .hero__ic{grid-template-columns:1fr;text-align:center}
  .hero__ust,.hero__mini{justify-content:center}
  .hero__alt{margin-inline:auto}
  .hero__dugmeler{justify-content:center}
  /* margin:auto ızgara öğesinin gerilmesini iptal ediyor; içerik tamamen
     absolute olduğu için genişlik 0'a düşüp görsel yok oluyordu. */
  .hero__gorsel{width:min(430px,100%);justify-self:center;aspect-ratio:4/4.1}
  .ikili{grid-template-columns:1fr}
  .iletisim-izgara{grid-template-columns:1fr}
  .detay{grid-template-columns:1fr}
  .detay__gorseller{position:static}
  .katalog{grid-template-columns:1fr;gap:0}

  .filtre-ac{display:inline-flex}
  .filtre-panel{
    position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;z-index:200;
    max-height:86vh;border-radius:26px 26px 0 0;border-bottom:0;
    transform:translateY(102%);transition:transform .42s cubic-bezier(.22,1,.36,1);
    box-shadow:0 -24px 60px -26px rgba(15,22,19,.5);
  }
  .filtre-panel--acik{transform:none}
  .filtre-panel::before{
    content:"";position:absolute;top:9px;left:50%;translate:-50% 0;
    width:46px;height:4px;border-radius:4px;background:var(--cizgi);
  }
  .filtre-basi{padding-top:1.55rem}
  .filtre-govde{max-height:none;padding-inline:1.15rem}
  .filtre-kapat{
    display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
    background:#F2ECE6;font-size:1.05rem;color:var(--metin-sonuk);flex:none;
  }
  .filtre-kapat:active{background:var(--vurgu);color:#fff}
  /* çekmecedeki her seçim parmakla rahat vurulabilsin */
  .secenek{padding:.62rem .45rem;min-height:46px;font-size:.94rem}
  .secenek__kutu{width:21px;height:21px}
  .filtre-temizle{display:inline-flex;align-items:center;padding:.6rem .3rem;min-height:44px}
  .filtre-daha{min-height:46px;padding:.6rem .45rem;font-size:.86rem}
  .filtre-grup__bas{padding:1rem 0;font-size:.84rem}
  .filtre-alt{
    display:grid;grid-template-columns:auto 1fr;gap:.6rem;background:#fff;
    padding:.85rem 1.15rem calc(.85rem + env(safe-area-inset-bottom,0px));
    border-top:1px solid var(--cizgi);
  }
  .filtre-alt .dugme{padding:.85rem 1.1rem}
  .filtre-ortu--acik{opacity:1;visibility:visible}
  body.filtre-acik{overflow:hidden}

  /* araç çubuğu: arama tam satır, altında iki eşit düğme */
  .arac{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
  .ara-kutu{grid-column:1/-1;min-width:0}
  .filtre-ac,.sirala{width:100%;justify-content:center;text-align:center}
  .sonuc-sayi{grid-column:1/-1;margin:0;text-align:center}
  .hizli-filtre{
    margin-inline:-4%;padding-inline:4%;scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    /* sağ kenar soluklaşsın: şeridin devam ettiği anlaşılsın */
    -webkit-mask-image:linear-gradient(90deg,#000 86%,rgba(0,0,0,.15));
    mask-image:linear-gradient(90deg,#000 86%,rgba(0,0,0,.15));
  }
  .hizli-filtre button{scroll-snap-align:start}
  .sekme-bar{
    -webkit-mask-image:linear-gradient(90deg,#000 88%,rgba(0,0,0,.2));
    mask-image:linear-gradient(90deg,#000 88%,rgba(0,0,0,.2));
  }
}

/* ---- mobil menü ---- */
@media (max-width:860px){
  /* ---------- MOBİL ÜST BAR ----------
     Telefonda üç öğe (marka + WhatsApp dairesi + hamburger) sıkışıyordu.
     WhatsApp zaten sağ altta yüzen düğmede olduğu için üstteki yerini
     doğrudan arama düğmesine bıraktı; slogan gizlendi, bar inceldi. */
  .duyuru{padding:.42rem 0;font-size:.68rem;letter-spacing:.08em}
  .ust{background:rgba(251,246,241,.92)}
  .ust__ic{min-height:60px;gap:.5rem;transition:min-height .3s ease}
  .marka{gap:.55rem;min-width:0;padding-block:.3rem}   /* dokunma hedefi 44px'e çıksın */
  .marka__isaret{width:36px;height:36px;transition:width .3s ease,height .3s ease}
  .marka__isaret svg{width:20px;height:20px}
  .marka__yazi{min-width:0}
  .marka__yazi b{font-size:1.14rem;white-space:nowrap;transition:font-size .3s ease}
  .marka__yazi span{display:none}          /* slogan bu boyutta okunmuyordu */

  .ust__wa{display:none}
  .ust__sag{
    gap:2px;padding:3px;border:1px solid rgba(194,76,104,.12);border-radius:18px;
    background:rgba(255,255,255,.62);
    box-shadow:0 12px 28px -24px rgba(27,42,36,.72),inset 0 1px 0 rgba(255,255,255,.92);
  }
  .ust__ara{
    display:grid;place-items:center;width:44px;height:44px;border-radius:14px;flex:none;
    border:1px solid rgba(194,76,104,.14);
    background:linear-gradient(145deg,rgba(194,76,104,.16),rgba(194,76,104,.07));
    color:var(--vurgu-koyu);box-shadow:inset 0 1px 0 rgba(255,255,255,.72);
    transition:transform .2s ease,background .25s ease,border-color .25s ease;
  }
  .ust__ara svg{width:18px;height:18px;fill:currentColor}
  .menu-dugme{
    display:flex;width:44px;height:44px;border-radius:14px;flex:none;
    border-color:rgba(27,42,36,.08);background:rgba(255,255,255,.82);
    box-shadow:inset 0 1px 0 #fff;
    transition:transform .2s ease,background .25s ease,border-color .25s ease,box-shadow .25s ease;
  }
  .menu-dugme span{width:18px;height:1.5px;background:var(--koyu)}
  .ust__ara:active,.menu-dugme:active{transform:scale(.94)}
  .ust__ara:focus-visible,.menu-dugme:focus-visible{
    outline:2px solid rgba(194,76,104,.42);outline-offset:2px;
  }
  .menu--acik ~ .ust__sag .menu-dugme{
    border-color:rgba(194,76,104,.24);background:rgba(194,76,104,.10);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
  }
  .menu--acik ~ .ust__sag .menu-dugme span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
  .menu--acik ~ .ust__sag .menu-dugme span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

  /* kaydırınca bar biraz toparlanır */
  .ust--yapisik .ust__ic{min-height:52px}
  .ust--yapisik .marka__isaret{width:32px;height:32px}
  .ust--yapisik .marka__yazi b{font-size:1.02rem}

  /* Menü açıkken üst bardaki bulanıklık kapatılır: backdrop-filter
     kendi içindeki position:fixed öğeleri kendine bağlar ve menü
     panelini üst barın altına kaydırıyordu. */
  body.menu-acik .ust{backdrop-filter:none;background:var(--zemin)}
  .menu{
    position:fixed;left:0;right:0;top:66px;height:calc(100dvh - 66px);
    background:var(--zemin);border-top:1px solid var(--cizgi);
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    padding:1rem 6% 2.4rem;overflow-y:auto;
    transform:translateY(calc(-100% - 66px));transition:transform .42s cubic-bezier(.22,1,.36,1);
    box-shadow:0 26px 50px -34px rgba(15,22,19,.7);
  }
  .menu--acik{transform:none}
  .menu > a{
    padding:1.05rem .3rem;border-bottom:1px solid var(--cizgi);border-radius:0;
    font-size:1.12rem;font-family:var(--basli);font-weight:700;
    opacity:0;transform:translateY(-10px);
  }
  .menu--acik > a{animation:menuGir .4s cubic-bezier(.22,1,.36,1) forwards}
  .menu--acik > a:nth-child(1){animation-delay:.06s}
  .menu--acik > a:nth-child(2){animation-delay:.11s}
  .menu--acik > a:nth-child(3){animation-delay:.16s}
  .menu--acik > a:nth-child(4){animation-delay:.21s}
  .menu--acik > a:nth-child(5){animation-delay:.26s}
  @keyframes menuGir{to{opacity:1;transform:none}}
  .menu > a::after{display:none}
  .menu > a[aria-current="page"]{color:var(--vurgu)}
  .menu__iletisim{
    display:grid;gap:.6rem;margin-top:1.6rem;
    opacity:0;animation:menuGir .4s ease .32s forwards;
  }
  .menu__iletisim .dugme{width:100%;padding:.95rem}
  .menu__adres{
    font-size:.86rem;color:var(--metin-sonuk);text-align:center;margin-top:.4rem;
  }
  .menu-dugme{display:flex}
  body.menu-acik{overflow:hidden}

  .alt__ic{grid-template-columns:1fr;gap:1.6rem;text-align:center}
  .alt__marka p{margin-inline:auto}
  .alt__sosyal{justify-content:center}
  .alt__liste{justify-items:center}
  .sayac-serit{grid-template-columns:repeat(2,1fr);gap:1.4rem}
  .galeri-oge:nth-child(6n+4){grid-column:span 1}
  .galeri-izgara{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px;gap:.7rem}
  .galeri-oge:nth-child(6n+1){grid-row:span 2}
}

/* ---- telefon ---- */
@media (max-width:600px){
  body{font-size:16px}
  .kap{width:92%}
  .bolum{padding:clamp(2.6rem,9vw,3.6rem) 0}
  .izgara--4,.izgara--3,.izgara--2,.surec{grid-template-columns:1fr}
  .alan-ikili{grid-template-columns:1fr}
  /* kategori kartları küçük olduğu için mobilde iki sütun kalır */
  .izgara--kategori{grid-template-columns:repeat(2,1fr);gap:.7rem}
  .izgara--kategori .kart{padding:1rem .7rem}
  .izgara--kategori .kart__ikon{width:42px;height:42px;border-radius:13px;margin-bottom:.7rem}
  .izgara--kategori .kart__ikon svg{width:21px;height:21px}
  .izgara--kategori h3{font-size:.92rem !important;line-height:1.25}

  /* iOS'ta yazı alanına dokununca ekran zıplamasın */
  input,select,textarea{font-size:16px}

  /* ürün kartları iki sütun, sıkı düzen */
  .urun-izgara{grid-template-columns:repeat(2,1fr);gap:.7rem}
  /* dokunmatikte üzerine gelme olmadığı için sipariş düğmeleri hep görünür */
  .urun__gorsel::after{opacity:1;background:linear-gradient(180deg,transparent 52%,rgba(27,42,36,.6))}
  .urun__hizli{opacity:1;transform:none}
  .galeri-oge__ust{opacity:1;background:linear-gradient(180deg,transparent 45%,rgba(27,42,36,.72))}
  .urun__govde{padding:.85rem .85rem 1rem}
  .urun__ad{font-size:.95rem;line-height:1.3}
  .urun__ozet{display:none}
  .urun__ust{font-size:.72rem;letter-spacing:.08em}
  .alt__kredi a{padding:.7rem 0;min-height:44px}
  .urun__fiyat{margin-top:.6rem;padding-top:.6rem}
  .urun__fiyat b{font-size:1.05rem}
  .urun__fiyat span{display:none}
  .urun__hizli{left:.5rem;right:.5rem;bottom:.5rem;gap:.35rem}
  .urun__hizli .dugme{padding:.6rem .3rem;font-size:.8rem;min-height:44px}
  .urun__hizli .dugme--acik{display:none}
  .rozet{font-size:.72rem;padding:.26rem .62rem}
  .ustyazi{font-size:.72rem;letter-spacing:.24em}
  .marka__yazi span{font-size:.7rem;letter-spacing:.16em}
  .duyuru{font-size:.72rem;letter-spacing:.1em}

  /* büyüteç: oklar görselin üstünü kapatmasın, alta alınır */
  .buyutec{padding:1rem}
  .buyutec img{max-height:62vh;max-width:94vw}
  .buyutec__kapat{width:46px;height:46px;top:1rem;right:1rem}
  .buyutec__ok{
    width:54px;height:54px;top:auto;translate:none;
    bottom:calc(1.1rem + env(safe-area-inset-bottom,0px));
  }
  .buyutec__ok--sol{left:calc(50% - 82px)}
  .buyutec__ok--sag{right:calc(50% - 82px)}
  .buyutec__yazi{
    bottom:calc(5.2rem + env(safe-area-inset-bottom,0px));
    width:80%;text-align:center;font-size:.84rem;
  }
  /* alt bilgi bağlantıları parmakla rahat seçilsin */
  .alt__liste{gap:.15rem}
  .alt__liste a,.alt__liste span{display:block;padding:.5rem .2rem;min-height:42px}
  .alt__sosyal a{width:46px;height:46px}

  .hero{padding-top:2rem}
  .hero h1{font-size:clamp(2.1rem,10vw,2.9rem)}
  .hero__mini{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;text-align:center}
  .hero__mini div b{font-size:1.2rem;white-space:nowrap}  /* "12" ile "+" ayrı satıra düşmesin */
  .hero__mini div span{font-size:.72rem;line-height:1.3;display:block}
  /* iki düğme yan yana sıkışınca yazı kırpılıyordu (.dugme overflow:hidden) */
  .hero__dugmeler{flex-direction:column;align-items:stretch}
  .hero__dugmeler .dugme{width:100%;min-width:0}
  .hero__rozet{padding:.5rem .7rem;font-size:.7rem;line-height:1.25}
  .hero__rozet svg{width:16px;height:16px}
  .hero__rozet--1{left:2%;top:10%}
  .hero__rozet--2{right:2%;bottom:12%}

  .baslik-blok{margin-bottom:1.8rem}
  .sayac-serit{grid-template-columns:repeat(2,1fr)}
  .cta{padding:2rem 1.2rem}
  .cta__dugmeler .dugme{width:100%}

  /* ürün detay: alt sabit sipariş çubuğu */
  .detay{padding-top:1.2rem}
  .detay__kucukler button{width:58px}
  .detay__aksiyon{
    position:fixed;left:0;right:0;bottom:0;z-index:75;margin:0;
    grid-template-columns:1fr 1fr;gap:.5rem;background:rgba(255,255,255,.96);
    backdrop-filter:blur(10px);border-top:1px solid var(--cizgi);
    padding:.7rem 4% calc(.7rem + env(safe-area-inset-bottom,0px));
    box-shadow:0 -14px 30px -26px rgba(0,0,0,.6);
  }
  .detay__aksiyon .dugme{padding:.9rem .6rem;font-size:.9rem;white-space:nowrap}
  .yazi-genis{display:none}
  .yazi-dar{display:inline}
  body[data-sayfa="urun"]{padding-bottom:78px}
  body[data-sayfa="urun"] .yuzen-wa{display:none}
  body[data-sayfa="urun"] .yukari{bottom:calc(84px + env(safe-area-inset-bottom,0px))}

  .sekme-bar button{padding:.85rem .9rem;font-size:.86rem;min-height:46px}
  .iz{font-size:.82rem;line-height:2.4}
  .iz a{padding:.55rem .15rem}
  .etiket{padding:.55rem .9rem;font-size:.82rem}
  .detay__kucukler button{width:62px}

  .yuzen-wa{
    width:52px;height:52px;right:.9rem;
    bottom:calc(.9rem + env(safe-area-inset-bottom,0px));
  }
  .yukari{
    width:40px;height:40px;right:.9rem;
    bottom:calc(4.9rem + env(safe-area-inset-bottom,0px));
  }
  .duyuru{font-size:.7rem}
  .bilgi-kart{padding:1.2rem}
  .harita,.harita iframe{min-height:280px}
  /* telefon / WhatsApp bağlantıları parmakla rahat seçilsin */
  .bilgi-satir{padding:1rem 0}
  .bilgi-satir a{display:inline-block;padding:.45rem 0;min-height:40px}
  .saat-tablo td{padding:.75rem .2rem}
}

@media (max-width:340px){
  .urun-izgara{grid-template-columns:1fr}
  .urun__ozet{display:block}
  .marka__yazi b{font-size:1.15rem}
  .hero__rozet{display:none}
}

/* ---------- 26. HAREKET AZALTMA ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .belir{opacity:1;transform:none}
  .acilis__yaprak,.acilis__sap{stroke-dashoffset:0}
  .acilis__ad,.acilis__slogan,.acilis__goz{opacity:1}
  .acilis__dolgu{transform:scaleX(1)}
}

/* ---------- 27. YAZDIRMA ---------- */
@media print{
  .ust,.alt,.yuzen-wa,.yukari,.duyuru,.acilis,.filtre-panel{display:none !important}
}