/* ============================================================
   LUXORA — Premium Minimal E-Ticaret Teması
============================================================ */

:root {
  --cream:       #eef3fb;
  --cream-light: #f7f9fc;
  --beige:       #e2e8f0;
  --beige-soft:  #cbd5e1;
  --tan:         #2d5bd1;
  --tan-dark:    #1f46ad;
  --dark:        #1f2937;
  --dark-soft:   #374151;
  --text:        #263241;
  --text-muted:  #697586;
  --text-light:  #9aa5b1;
  --white:       #ffffff;
  --border:      #dde3ea;
  --star:        #f59e0b;
  --font-head:   'Cormorant Garamond', Georgia, serif;
  --font-body:   'Jost', 'Inter', system-ui, sans-serif;
}

* , *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); color: var(--text); background: var(--white); line-height: 1.6; font-size: 15px; font-weight: 300; }
a { text-decoration: none; color: inherit; transition: color .25s; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
h1,h2,h3,h4 { font-family: var(--font-head); font-weight: 500; letter-spacing: .01em; }

.container { max-width: 1440px; margin: 0 auto; padding: 0 24px; }
.main-content { min-height: 60vh; }

/* ============================================================
   BUTTONS
============================================================ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 36px; font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  cursor: pointer; border: none; transition: all .3s; font-family: var(--font-body); }
.btn-primary { background: var(--tan); color: var(--white); }
.btn-primary:hover { background: var(--tan-dark); }
.btn-secondary { background: transparent; color: var(--dark); border: 1px solid var(--dark); }
.btn-secondary:hover { background: var(--dark); color: var(--white); }
.btn-light { background: var(--white); color: var(--dark); }
.btn-light:hover { background: var(--tan); color: var(--white); }
.btn-block { width: 100%; }
.btn-sm { padding: 10px 22px; font-size: 11px; }

/* ============================================================
   TOPBAR
============================================================ */
.topbar { background: var(--cream); border-bottom: 1px solid var(--border); font-size: 12px; letter-spacing: .05em; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; }
.topbar-center { flex: 1; text-align: center; color: var(--text-muted); letter-spacing: .12em; text-transform: uppercase; font-size: 11px; }
.topbar-links { display: flex; gap: 22px; }
.topbar-links a { color: var(--dark); font-size: 12px; font-weight: 500; }
.topbar-links a:hover { color: var(--tan-dark); }

/* ============================================================
   HEADER
============================================================ */
.site-header { background: var(--white); position: sticky; top: 0; z-index: 200; border-bottom: 1px solid var(--border); will-change: auto; transform: none !important; transition: none !important; box-shadow: 0 1px 0 rgba(0,0,0,.04); }
.header-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; padding: 18px 0; gap: 24px; }
.site-logo { font-family: var(--font-head); font-size: 30px; font-weight: 600; letter-spacing: .1em; color: var(--dark); display: flex; align-items: center; line-height: 1; justify-self: start; }
.site-logo small { display: block; font-family: var(--font-body); font-size: 9px; letter-spacing: .42em; color: var(--text-muted); text-align: left; margin-top: 2px; font-weight: 400; }
.main-nav { display: flex; gap: 4px; justify-content: center; flex-wrap: nowrap; }
.main-nav a { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dark); position: relative; display: flex; align-items: center; gap: 5px; padding: 8px 13px; border-radius: 50px; border: 1px solid transparent; white-space: nowrap; transition: background .25s, border-color .25s, color .25s; }
.main-nav a::after { display: none; }
.main-nav a:hover { background: var(--cream-light); border-color: var(--border); }
.main-nav a.active { background: var(--cream); border-color: var(--tan); color: var(--tan-dark); }
.header-actions { display: flex; gap: 22px; align-items: center; justify-content: flex-end; }
.hdr-act { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--dark); transition: .2s; }
.hdr-act:hover { color: var(--tan-dark); transform: translateY(-2px); }
.hdr-act-ic { position: relative; display: flex; align-items: center; justify-content: center; }
.hdr-act svg { width: 24px; height: 24px; stroke-width: 1.6; }
.hdr-act-lbl { font-size: 12px; font-weight: 500; letter-spacing: .01em; }
.hdr-act.filled svg { color: var(--dark); }
.hdr-act.filled:hover svg { color: var(--tan-dark); }
.hdr-badge { position: absolute; top: -8px; right: -10px; background: var(--tan-dark); color: #fff; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 50px; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; }
.cart-badge { position: absolute; top: -7px; right: -9px; background: var(--dark); color: var(--white); border-radius: 50%; width: 17px; height: 17px; font-size: 10px; display: flex; align-items: center; justify-content: center; font-weight: 500; }

/* ============================================================
   HERO SLIDER
============================================================ */
.hero { position: relative; padding: 0; background: transparent; margin: 16px 0 0; }
.hero-slider { position: relative; border-radius: 20px; overflow: hidden; isolation: isolate; }
.hero-slide { display: none; align-items: center; min-height: 440px; background-size: cover; background-position: center; position: relative; animation: heroFade .6s ease; }
.hero-slide.active { display: flex; }
@keyframes heroFade { from { opacity: 0; } to { opacity: 1; } }
.hero-text { position: relative; z-index: 2; max-width: 560px; padding: 48px 60px; }
.hero-eyebrow { font-size: 12px; letter-spacing: .25em; text-transform: uppercase; color: var(--tan-dark); margin-bottom: 22px; font-weight: 500; }
.hero-text h1 { font-size: 52px; line-height: 1.08; color: var(--dark); margin-bottom: 22px; font-weight: 600; }
.hero-text--center { margin: 0 auto; text-align: center; }
.hero-text--right { margin-left: auto; text-align: right; }
.hero-text p { font-size: 16px; color: var(--text-muted); max-width: 400px; margin-bottom: 38px; font-weight: 300; }
.hero-slide::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(246,249,254,.85) 0%, rgba(246,249,254,.5) 45%, transparent 75%); z-index:1; }

/* --- Hero Slider Ok Butonları (modern cam efekti) --- */
.hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--dark); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 6; border: 1px solid rgba(255,255,255,.65); box-shadow: 0 8px 28px -6px rgba(31,41,55,.35); transition: all .28s cubic-bezier(.4,0,.2,1); opacity: 0; }
.hero-slider:hover .hero-arrow { opacity: 1; }
.hero-arrow:hover { background: var(--dark); color: #fff; border-color: var(--dark); transform: translateY(-50%) scale(1.08); box-shadow: 0 12px 34px -6px rgba(31,41,55,.5); }
.hero-arrow:active { transform: translateY(-50%) scale(.96); }
.hero-arrow svg { width: 22px; height: 22px; transition: transform .28s; }
.hero-arrow.prev { left: 22px; }
.hero-arrow.next { right: 22px; }
.hero-arrow.prev:hover svg { transform: translateX(-2px); }
.hero-arrow.next:hover svg { transform: translateX(2px); }
@media(max-width:768px){
  .hero-arrow { width: 42px; height: 42px; opacity: 1; background: rgba(255,255,255,.9); }
  .hero-arrow.prev { left: 10px; } .hero-arrow.next { right: 10px; }
  .hero-arrow svg { width: 18px; height: 18px; }
}

/* --- Hero Slider Noktaları (aktif genişleyen pill) --- */
.hero-dots { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); display: flex; gap: 9px; z-index: 6; padding: 9px 14px; border-radius: 50px; background: rgba(255,255,255,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.5); box-shadow: 0 6px 20px -8px rgba(31,41,55,.3); }
.hero-dot { width: 9px; height: 9px; border-radius: 50px; background: rgba(31,41,55,.28); cursor: pointer; transition: all .32s cubic-bezier(.4,0,.2,1); }
.hero-dot:hover { background: rgba(31,41,55,.5); }
.hero-dot.active { width: 28px; background: linear-gradient(135deg, var(--tan), var(--tan-dark)); box-shadow: 0 2px 8px -1px rgba(45,91,209,.5); }

/* --- Hero CTA Butonu (ok ikonlu, modern) --- */
.btn.hero-cta { position: relative; overflow: hidden; border-radius: 50px; padding: 16px 32px; background: linear-gradient(135deg, var(--dark), var(--dark-soft)); box-shadow: 0 12px 30px -10px rgba(31,41,55,.55); transition: all .3s cubic-bezier(.4,0,.2,1); }
.btn.hero-cta::before { content:''; position:absolute; top:0; left:-120%; width:60%; height:100%; background:linear-gradient(120deg, transparent, rgba(255,255,255,.28), transparent); transform:skewX(-20deg); transition:left .6s; }
.btn.hero-cta:hover { background: linear-gradient(135deg, var(--tan), var(--tan-dark)); transform: translateY(-3px); box-shadow: 0 18px 40px -10px rgba(45,91,209,.6); }
.btn.hero-cta:hover::before { left: 130%; }
.btn.hero-cta svg { width: 18px; height: 18px; transition: transform .3s; }
.btn.hero-cta:hover svg { transform: translateX(5px); }

/* ============================================================
   CATEGORY CARDS — Orbital Tasarım
============================================================ */
@keyframes catIn { from { opacity: 0; transform: translateY(30px) scale(.9); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes orbitSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.cat-circles { padding: 44px 0 34px; }
.cat-circle-grid { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; }
.cat-circle-grid::-webkit-scrollbar { height: 6px; display: none; }
.cat-circle-grid:hover { scrollbar-width: thin; scrollbar-color: var(--beige-soft) transparent; }
.cat-circle-grid:hover::-webkit-scrollbar { display: block; }
.cat-circle-grid::-webkit-scrollbar-track { background: transparent; }
.cat-circle-grid::-webkit-scrollbar-thumb { background: var(--beige-soft); border-radius: 10px; }
.cat-circle-grid::-webkit-scrollbar-thumb:hover { background: var(--tan); }

/* --- Kart: dikey eksen, dairesel görsel üstte --- */
.cat-circle { position: relative; display: flex; flex-direction: column; align-items: center; text-decoration: none; cursor: pointer; animation: catIn .6s cubic-bezier(.22,1,.36,1) both; }
.cat-circle:nth-child(1) { animation-delay: .03s; }
.cat-circle:nth-child(2) { animation-delay: .09s; }
.cat-circle:nth-child(3) { animation-delay: .15s; }
.cat-circle:nth-child(4) { animation-delay: .21s; }
.cat-circle:nth-child(5) { animation-delay: .27s; }
.cat-circle:nth-child(6) { animation-delay: .33s; }
.cat-circle:nth-child(7) { animation-delay: .39s; }
.cat-circle:nth-child(8) { animation-delay: .45s; }

/* --- Dairesel görsel alanı --- */
.cat-circle-img { position: relative; width: 82%; aspect-ratio: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: visible; margin: 0 auto; background: linear-gradient(150deg, #ffffff 0%, #f0f4ff 55%, #e4ecff 100%); border: 1px solid rgba(31,70,173,.08); box-shadow: none; transition: transform .45s cubic-bezier(.22,1,.36,1), border-color .45s; }
.cat-circle:hover .cat-circle-img { transform: translateY(-8px); border-color: rgba(45,91,209,.35); box-shadow: none; }

/* Dönen kesikli orbital halka */
.cat-circle-img::before { content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 1.5px dashed rgba(45,91,209,.22); animation: orbitSpin 26s linear infinite; transition: border-color .4s; }
.cat-circle:hover .cat-circle-img::before { border-color: rgba(45,91,209,.5); animation-duration: 9s; }

/* İç parlak halka */
.cat-circle-img::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; border: 1px solid rgba(255,255,255,.85); box-shadow: inset 0 2px 8px rgba(255,255,255,.9); pointer-events: none; }

/* Görsel */
.cat-circle-img img { width: 82%; height: 82%; object-fit: cover; border-radius: 50%; filter: none; transition: transform .5s cubic-bezier(.34,1.56,.64,1); position: relative; z-index: 1; }
.cat-circle:hover .cat-circle-img img { transform: scale(1.08) rotate(-2deg); }

/* Placeholder SVG */
.cat-circle-img svg { width: 38%; height: 38%; color: var(--tan-dark); opacity: .45; transition: .45s cubic-bezier(.34,1.56,.64,1); position: relative; z-index: 1; }
.cat-circle:hover .cat-circle-img svg { opacity: .85; transform: scale(1.14) rotate(-3deg); }

/* Hover'da alttan yükselen ışıma — kaldırıldı */
.cat-circle-img .cat-glow { display: none; }
.cat-circle:hover .cat-glow { display: none; }

/* --- İsim etiketi: glassmorphism pill --- */
.cat-circle span { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 6px; margin-top: -16px; padding: 9px 18px 10px; font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--dark); text-align: center; background: rgba(255,255,255,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(31,70,173,.12); border-radius: 50px; box-shadow: none; transition: all .4s cubic-bezier(.22,1,.36,1); white-space: nowrap; }
.cat-circle:hover span { background: var(--dark); color: #fff; border-color: var(--dark); box-shadow: none; transform: translateY(2px); }

/* Ok göstergesi */
.cat-circle span::after { content: '→'; font-size: 13px; max-width: 0; opacity: 0; overflow: hidden; transform: translateX(-4px); transition: all .35s cubic-bezier(.22,1,.36,1); color: var(--tan); }
.cat-circle:hover span::after { max-width: 18px; opacity: 1; transform: translateX(0); }

/* Kategoriler başlığı — ortalanmış dekoratif (Seçenek C) */
.cat-head-ornate { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 36px; }
.cat-head-ornate h2 { font-size: 36px; font-weight: 600; color: var(--dark); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.cat-orn-star { color: var(--tan); font-size: 18px; animation: ornPulse 2.5s ease-in-out infinite; }
.cat-orn-star:last-of-type { animation-delay: 1.25s; }
@keyframes ornPulse { 0%,100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.25); } }
.cat-orn-line { width: 90px; height: 1.5px; background: linear-gradient(90deg, transparent, var(--tan)); border-radius: 2px; }
.cat-orn-line:last-child { background: linear-gradient(90deg, var(--tan), transparent); }
@media(max-width:600px){ .cat-head-ornate { gap: 12px; } .cat-head-ornate h2 { font-size: 26px; } .cat-orn-line { width: 50px; } }

/* Ortalanmış "Tümünü Gör" linki (ornate başlıkların altında) */
.ornate-view-all { text-align: center; margin: -18px 0 26px; }
.ornate-view-all a { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); padding: 8px 22px; border: 1px solid var(--border); border-radius: 50px; transition: .25s; background: #fff; }
.ornate-view-all a:hover { color: var(--tan-dark); border-color: var(--tan); background: var(--cream-light); }
.ornate-view-all a svg { transition: transform .25s; }
.ornate-view-all a:hover svg { transform: translateX(3px); }

/* ============================================================
   SECTION HEADER
============================================================ */
.section { padding: 22px 0 28px; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.section-head h2 { font-size: 34px; color: var(--dark); letter-spacing: .04em; text-transform: uppercase; font-weight: 500; }
.section-head .view-all { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); display: flex; align-items: center; gap: 8px; font-weight: 500; }
.section-head .view-all:hover { color: var(--tan-dark); }

/* ============================================================
   PRODUCT GRID & CARD
============================================================ */
.product-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 28px; }
.product-card { background: var(--white); position: relative; transition: .3s; }
.product-img { position: relative; aspect-ratio: 1; background: var(--cream-light); overflow: hidden; margin-bottom: 18px; }
.product-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.product-card:hover .product-img img { transform: scale(1.04); }
.no-img { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-light); font-size: 13px; letter-spacing: .1em; }
/* (Eski tekli favori düzeni kaldırıldı — card-actions kullanılıyor) */
.product-tags .badge-discount { position: static; background: linear-gradient(135deg, #ff5a5f, #e11d2a); color: #fff; padding: 5px 11px; font-size: 11px; font-weight: 700; letter-spacing: .02em; border-radius: 50px; box-shadow: 0 4px 10px -3px rgba(225,29,42,.55); display: inline-block; }
.product-add { position: absolute; bottom: 0; left: 0; right: 0; background: var(--dark); color: var(--white); text-align: center; padding: 14px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; transform: translateY(100%); transition: .3s; cursor: pointer; border: none; width: 100%; font-family: var(--font-body); font-weight: 500; }
.product-img:hover .product-add { transform: translateY(0); }
.product-add:hover { background: var(--tan-dark); }
.product-name { font-family: var(--font-body); font-size: 14px; font-weight: 400; color: var(--text); margin-bottom: 8px; letter-spacing: .02em; }
.product-price { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 8px; }
.price { font-size: 16px; font-weight: 500; color: var(--dark); letter-spacing: .03em; }
.old-price { font-size: 13px; color: var(--text-light); text-decoration: line-through; }
.product-rating { display: flex; align-items: center; gap: 6px; }
.stars { color: var(--star); font-size: 13px; letter-spacing: 1px; }
.rating-count { font-size: 12px; color: var(--text-muted); }

/* ============================================================
   PROMO BANNER (Sezon İndirimi)
============================================================ */
.promo-banner { background: var(--cream); position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 230px; margin-bottom: 70px; }
.promo-text { padding: 50px 0 50px 56px; z-index: 2; }
.promo-eyebrow { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--tan-dark); margin-bottom: 14px; font-weight: 500; }
.promo-text h2 { font-size: 42px; color: var(--dark); margin-bottom: 14px; letter-spacing: .06em; }
.promo-text p { color: var(--text-muted); margin-bottom: 26px; font-weight: 300; }
.promo-visual { position: relative; height: 100%; min-height: 230px; }
.promo-visual img { width: 100%; height: 100%; object-fit: cover; }
.promo-circle { position: absolute; top: 50%; right: 80px; transform: translateY(-50%); width: 150px; height: 150px; border-radius: 50%; background: var(--dark); color: var(--white); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 3; }
.promo-circle .pct { font-family: var(--font-head); font-size: 46px; font-weight: 600; line-height: 1; }
.promo-circle .lbl { font-size: 10px; letter-spacing: .14em; margin-top: 4px; }

/* ============================================================
   FEATURES BAR — Modern Kartlar
============================================================ */
/* --- Giriş animasyonu --- */
@keyframes featureIn { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes featurePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(45,91,209,.18); } 50% { box-shadow: 0 0 0 9px rgba(45,91,209,0); } }
@keyframes featureShine { from { transform: translateX(-130%) rotate(18deg); } to { transform: translateX(230%) rotate(18deg); } }

.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 20px 0 25px; }

/* --- Kart --- */
.feature { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 0; background: transparent; border: none; border-radius: 0; overflow: visible; cursor: default; animation: featureIn .6s cubic-bezier(.22,1,.36,1) both; }
.feature:nth-child(1) { animation-delay: .05s; }
.feature:nth-child(2) { animation-delay: .14s; }
.feature:nth-child(3) { animation-delay: .23s; }
.feature:nth-child(4) { animation-delay: .32s; }
.feature::before, .feature::after { display: none; }

/* Kart iç yüzeyi — katmanlı degrade + kesik köşe */
.feature-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; width: 100%; height: 100%; padding: 30px 24px 26px; background: linear-gradient(160deg, #ffffff 0%, #f6f8fe 55%, #edf2ff 100%); border: 1px solid rgba(45,91,209,.1); border-radius: 20px 20px 20px 4px; overflow: hidden; transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s cubic-bezier(.22,1,.36,1), border-color .4s, background .4s; box-shadow: 0 2px 10px -4px rgba(31,41,55,.07); }
.feature:hover .feature-card { transform: translateY(-9px); border-color: rgba(45,91,209,.38); background: linear-gradient(160deg, #ffffff 0%, #f2f6ff 50%, #e6eeff 100%); box-shadow: 0 28px 56px -18px rgba(31,70,173,.26), 0 10px 22px -10px rgba(31,41,55,.1); }

/* Hover ışık süpürmesi */
.feature-card .fx-shine { position: absolute; top: -40%; left: 0; width: 45%; height: 180%; background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%); transform: translateX(-130%) rotate(18deg); pointer-events: none; z-index: 3; }
.feature:hover .fx-shine { animation: featureShine .75s ease forwards; }

/* Sağ üst dekoratif halkalar */
.feature-card .fx-rings { position: absolute; top: -26px; right: -26px; width: 110px; height: 110px; border-radius: 50%; border: 1.5px solid rgba(45,91,209,.1); transition: .45s; z-index: 0; }
.feature-card .fx-rings::before { content: ''; position: absolute; inset: 16px; border-radius: 50%; border: 1.5px solid rgba(45,91,209,.14); }
.feature-card .fx-rings::after { content: ''; position: absolute; inset: 34px; border-radius: 50%; background: rgba(45,91,209,.06); }
.feature:hover .fx-rings { transform: scale(1.18) rotate(12deg); border-color: rgba(45,91,209,.22); }

/* --- İkon rozeti --- */
.feature-icon { position: relative; z-index: 2; width: 62px; height: 62px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 18px 18px 18px 5px; background: linear-gradient(145deg, var(--tan) 0%, var(--tan-dark) 100%); color: var(--white); margin-bottom: 20px; transition: transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .45s, border-radius .45s; box-shadow: 0 8px 20px -6px rgba(31,70,173,.4); animation: featurePulse 3.2s ease-in-out infinite; }
.feature:nth-child(2) .feature-icon { animation-delay: .8s; }
.feature:nth-child(3) .feature-icon { animation-delay: 1.6s; }
.feature:nth-child(4) .feature-icon { animation-delay: 2.4s; }
.feature-icon svg { width: 27px; height: 27px; stroke-width: 1.5; transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
.feature:hover .feature-icon { transform: scale(1.1) rotate(-5deg); border-radius: 50%; box-shadow: 0 14px 30px -8px rgba(31,70,173,.55); animation-play-state: paused; }
.feature:hover .feature-icon svg { transform: scale(1.12); }

/* --- Metin --- */
.feature-body { position: relative; z-index: 2; }
.feature-kicker { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-head); font-size: 9.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--tan-dark); opacity: .75; margin-bottom: 7px; transition: .35s; }
.feature-kicker::before { content: ''; width: 14px; height: 1.5px; background: linear-gradient(90deg, var(--tan), var(--tan-dark)); border-radius: 2px; transition: width .35s cubic-bezier(.22,1,.36,1); }
.feature:hover .feature-kicker { opacity: 1; }
.feature:hover .feature-kicker::before { width: 24px; }
.feature-title { font-family: var(--font-body); font-size: 16px; font-weight: 650; color: var(--dark); letter-spacing: .01em; margin-bottom: 6px; transition: color .3s, transform .35s cubic-bezier(.22,1,.36,1); }
.feature:hover .feature-title { color: var(--tan-dark); transform: translateX(3px); }
.feature-desc { font-size: 12.5px; font-weight: 300; color: var(--text-muted); line-height: 1.6; transition: transform .35s cubic-bezier(.22,1,.36,1); }
.feature:hover .feature-desc { transform: translateX(3px); }

/* Numara şeridi kaldırıldı — kart alt boşluğu düzenli */
.feature-card { padding-bottom: 28px; }

/* ============================================================
   FOOTER
============================================================ */
.site-footer { background: #17233d; color: var(--beige-soft); padding: 70px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 48px; padding-bottom: 50px; }
.footer-logo { font-family: var(--font-head); font-size: 28px; font-weight: 600; letter-spacing: .12em; color: var(--white); margin-bottom: 18px; }
.footer-about p { font-size: 14px; line-height: 1.8; color: var(--text-light); margin-bottom: 24px; font-weight: 300; }
.footer-social { display: flex; gap: 14px; }
.footer-social a { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--beige-soft); transition: .25s; }
.footer-social a:hover { background: var(--tan-dark); border-color: var(--tan-dark); color: var(--white); }
.footer-social svg { width: 16px; height: 16px; }
.footer-col h4, .footer-newsletter > h4, .footer-tags h4 { font-family: var(--font-body); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--white); margin-bottom: 22px; font-weight: 500; line-height: 1.4; }
.footer-col ul li { margin-bottom: 13px; }
.footer-col ul a { font-size: 14px; color: var(--text-light); font-weight: 300; }
.footer-col ul a:hover { color: var(--tan); }
.footer-accordion-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0; margin: 0 0 22px; color: var(--white); background: transparent; border: 0; font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: .16em; line-height: 1.4; text-align: left; text-transform: uppercase; cursor: default; pointer-events: none; }
.footer-accordion-icon { display: none; width: 20px; height: 20px; flex: 0 0 20px; transition: transform .3s cubic-bezier(.22,1,.36,1); }
.footer-accordion-panel { overflow: visible; }

@media (max-width: 768px) {
  .footer-grid { gap: 28px; }
  .footer-accordion { min-width: 0; border-top: 1px solid rgba(255,255,255,.12); }
  .footer-accordion + .footer-accordion { margin-top: -28px; }
  .footer-accordion:nth-of-type(3) { border-bottom: 1px solid rgba(255,255,255,.12); }
  .footer-accordion-toggle { height: 54px; min-height: 54px; margin: 0; padding: 15px 2px; cursor: pointer; pointer-events: auto; }
  .footer-accordion-toggle:focus-visible { outline: 2px solid var(--tan); outline-offset: 3px; }
  .footer-accordion-icon { display: block; }
  .footer-accordion.is-open .footer-accordion-icon { transform: rotate(180deg); }
  .footer-grid.footer-accordion-ready .footer-accordion-panel { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .35s cubic-bezier(.22,1,.36,1), opacity .25s; }
  .footer-grid.footer-accordion-ready .footer-accordion.is-open .footer-accordion-panel { opacity: 1; }
  .footer-accordion-panel ul { padding: 2px 2px 14px; }
  .footer-accordion-panel li { margin-bottom: 0; }
  .footer-accordion-panel a { display: flex; align-items: center; min-height: 38px; }
}
.footer-newsletter p { font-size: 14px; color: var(--text-light); line-height: 1.7; margin-bottom: 18px; font-weight: 300; }
.newsletter-form { display: flex; border: 1px solid rgba(255,255,255,.2); }
.newsletter-form input { flex: 1; background: transparent; border: none; padding: 13px 16px; color: var(--white); font-size: 13px; outline: none; font-family: var(--font-body); }
.newsletter-form input::placeholder { color: var(--text-light); }
.newsletter-form button { background: transparent; border: none; padding: 0 16px; color: var(--white); cursor: pointer; }
.newsletter-form button:hover { color: var(--tan); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 26px 0; display: flex; align-items: center; justify-content: space-between; }
.footer-bottom p { font-size: 13px; color: var(--text-light); font-weight: 300; }
.footer-pay { display: flex; align-items: center; gap: 14px; color: var(--text-light); font-size: 13px; }
.footer-pay span { font-weight: 500; letter-spacing: .05em; }

/* ============================================================
   ALERTS
============================================================ */
.alert { padding: 14px 20px; margin: 16px 0; font-size: 13px; letter-spacing: .03em; }
.alert-success { background: #eef3ea; color: #4a6638; border-left: 3px solid #7a9456; }
.alert-error { background: #f8ecea; color: #8a4034; border-left: 3px solid #c06a58; }
.alert-info { background: var(--cream); color: var(--tan-dark); border-left: 3px solid var(--tan); }

.page-title { font-size: 38px; color: var(--dark); margin: 48px 0 32px; text-align: center; letter-spacing: .04em; }
.breadcrumb { padding: 24px 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.breadcrumb a:hover { color: var(--tan-dark); }
.empty-state { text-align: center; padding: 80px 20px; color: var(--text-muted); }
.empty-state p { font-size: 17px; margin-bottom: 26px; font-family: var(--font-head); }

/* Pagination */
.pagination { display: flex; gap: 6px; justify-content: center; margin-top: 48px; }
.pagination a { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); font-size: 13px; }
.pagination a:hover { border-color: var(--dark); }
.pagination .active { background: var(--dark); color: var(--white); border-color: var(--dark); }

/* Forms */
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.form-input { width: 100%; padding: 14px 18px; border: 1.5px solid var(--border); border-radius: 12px; font-size: 14.5px; font-family: var(--font-body); background: var(--cream-light); transition: .22s; }
.form-input:focus { outline: none; border-color: var(--tan); background: #fff; box-shadow: 0 0 0 4px rgba(45,91,209,.12); }

/* Auth box */
.auth-box { max-width: 440px; margin: 60px auto; padding: 48px; border: 1px solid var(--border); }
.auth-box h1 { font-size: 32px; text-align: center; margin-bottom: 32px; }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 1024px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .cat-circle-grid { grid-template-columns: repeat(4, 1fr); row-gap: 32px; }
  .features { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 768px) {
  .container { padding: 0 20px; }
  .header-inner { grid-template-columns: auto 1fr auto; gap: 10px; padding: 12px 0; align-items: center; }
  .main-nav { display: none; }
  .site-logo { font-size: 19px; letter-spacing: .06em; line-height: 1.05; justify-content: center; }
  .site-logo .logo-img { max-height: 38px; width: auto; }
  .site-logo small { font-size: 8px; letter-spacing: .3em; }
  .header-actions { gap: 14px; flex-wrap: nowrap; }
  .hdr-act svg { width: 22px; height: 22px; }
  .hdr-act.hide-mobile { display: none; }   /* Hesabım & Favoriler alt navbar'da var */
  .hdr-act-lbl { display: block; font-size: 10.5px; }  /* Mobilde de etiket görünsün (Ara/Karşılaştır/Sepetim) */
  .hero-slide { min-height: 340px; }
  .hero-text { padding: 36px 24px; max-width: 100%; }
  .hero-text h1 { font-size: 32px; }
  .hero-slide::before { background: linear-gradient(90deg, rgba(246,249,254,.92) 0%, rgba(246,249,254,.7) 60%, rgba(246,249,254,.4) 100%); }
  .hero-slider { overflow: visible; }
  .hero-dots {
    position: relative; bottom: auto; left: auto; transform: none;
    justify-content: center; margin-top: 12px;
    background: var(--cream-light); border: 1px solid var(--border);
    box-shadow: none; padding: 8px 14px;
  }
  .product-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
  .cat-circle-grid { grid-template-columns: repeat(3, 1fr); }
  .promo-banner { grid-template-columns: 1fr; }
  .promo-visual { display: none; }
  .features { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 16px; }
}

/* ============================================================
   FAZ 1 — Ek Stiller
============================================================ */
.product-tags { position:absolute; top:12px; left:12px; display:flex; flex-direction:column; gap:6px; z-index:3; align-items:flex-start; }
.ptag { padding:5px 11px; font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#fff; border-radius:50px; box-shadow:0 4px 10px -3px rgba(0,0,0,.28); backdrop-filter:saturate(1.2); }
.tag-new { background:linear-gradient(135deg,#12c48b,#0a9f6e); box-shadow:0 4px 10px -3px rgba(10,159,110,.55); }
.tag-deal { background:linear-gradient(135deg,#ff5a5f,#e11d2a); box-shadow:0 4px 10px -3px rgba(225,29,42,.5); }
.tag-ship { background:linear-gradient(135deg,var(--tan),var(--tan-dark)); box-shadow:0 4px 10px -3px rgba(45,91,209,.5); }
.fav-form { position:absolute; top:14px; right:14px; z-index:3; margin:0; }

/* Detay galeri */
.detail-gallery { display:flex; flex-direction:column; gap:14px; max-width:460px; }
.detail-main-img { background: var(--cream-light); border-radius:12px; overflow:hidden; aspect-ratio: 1/1; display:flex; align-items:center; justify-content:center; }
.detail-main-img img { width:100%; height:100%; object-fit:contain; border-radius:12px; }
.detail-thumbs { display:flex; gap:10px; flex-wrap:wrap; }
.detail-thumbs img { width:72px; height:72px; object-fit:cover; border-radius:8px; cursor:pointer; border:2px solid transparent; }
.detail-thumbs img:hover, .detail-thumbs img.active { border-color:var(--tan); }
.detail-rating { margin-bottom:14px; }
.bank-price { background:var(--cream); padding:8px 14px; display:inline-block; margin-bottom:12px; font-size:14px; border-radius:4px; }
.free-ship-tag { color:#3b7a57; font-weight:500; font-size:13px; margin-bottom:12px; }

/* Günün fırsatı sayaç */
.deal-countdown { background:#111528; color:#fff; padding:14px 18px; border-radius:8px; margin-bottom:18px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.deal-label { font-size:13px; letter-spacing:.05em; }
.countdown { font-family:var(--font-head); font-size:24px; font-weight:600; color:var(--tan); }

/* Varyant seçim */
.variant-select { margin:18px 0; }
.variant-row { display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.variant-row label { font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); min-width:60px; }
.variant-options { display:flex; gap:8px; flex-wrap:wrap; }
.variant-opt { padding:8px 16px; border:1px solid var(--border); cursor:pointer; font-size:13px; min-width:36px; min-height:36px; display:inline-flex; align-items:center; justify-content:center; border-radius:4px; transition:.2s; }
.variant-opt { background:#fff; color:var(--dark); }
.variant-opt:hover { border-color:var(--dark); }
.variant-opt.selected { border-color:var(--dark); background:var(--dark); color:#fff; }
/* Renk butonu seçili: dış halka (arka plan renk olduğu için) */
.variant-opt.is-color { border-radius:50%; width:36px; height:36px; padding:0; border:2px solid var(--border); }
.variant-opt.is-color.selected { background:inherit; box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--dark); border-color:#fff; }
.variant-opt.is-color:hover { transform:scale(1.08); }

.detail-actions { display:flex; gap:12px; margin:18px 0; }
.btn-action { background:none; border:1px solid var(--border); padding:10px 18px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; transition:.2s; font-family:var(--font-body); }
.btn-action:hover { border-color:var(--dark); color:var(--tan-dark); }

/* Yorumlar */
.reviews-section { padding:0; border-top:none; margin-top:0; }
.reviews-section h2 { font-size:26px; margin-bottom:24px; }
.review-date { color:var(--text-light); font-size:12px; margin-left:8px; }

/* Karşılaştırma tablosu */
.compare-table { width:100%; border-collapse:collapse; }
.compare-table th, .compare-table td { padding:16px; border:1px solid var(--border); text-align:center; font-size:14px; }
.compare-table th { background:var(--cream-light); }

@media (max-width:768px){
  .detail-thumbs img { width:56px; height:56px; }
  .variant-row { flex-direction:column; align-items:flex-start; }
}

/* ============================================================
   HEADER LOGO + NAV DROPDOWN + SAYFALAR + SİPARİŞ TAKİBİ
============================================================ */
.logo-img { max-height: 62px; width: auto; display: block; }
.nav-dropdown { position: relative; }
.nav-dropdown > a { cursor: pointer; }
.nav-dropdown-menu { position: absolute; top: 100%; left: 0; background: #fff; min-width: 200px; box-shadow: 0 10px 30px rgba(0,0,0,.1); border: 1px solid var(--border); border-radius: 8px; padding: 8px 0; opacity: 0; visibility: hidden; transform: translateY(8px); transition: .2s; z-index: 100; }
.nav-dropdown.open .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown-toggle { cursor: pointer; }
.nav-dropdown-menu a { display: block; padding: 9px 18px; font-size: 13px; color: var(--text); letter-spacing: 0; text-transform: none; }
.nav-dropdown-menu a:hover { background: var(--cream); color: var(--tan-dark); }

/* ===== Sonsuz derinlikli kategori menüsü (masaüstü flyout) ===== */
.nav-cat-mega { padding: 8px; min-width: 235px; }
.nav-cat-mega .cat-menu, .nav-cat-mega .cat-menu ul { list-style: none; margin: 0; padding: 0; }
.nav-cat-mega .cat-menu li { position: relative; }
.nav-cat-mega .cat-menu a { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 14px; font-size: 13px; color: var(--text); border-radius: 8px; text-transform: none; letter-spacing: 0; white-space: nowrap; }
.nav-cat-mega .cat-menu a:hover { background: var(--cream); color: var(--tan-dark); }
.nav-cat-mega .cat-menu .cm-l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nav-cat-mega .cat-menu .cm-l > span { overflow: hidden; text-overflow: ellipsis; }
.dd-cat-icon.dd-cat-ph { display: flex; align-items: center; justify-content: center; color: var(--tan-dark); }
.dd-cat-icon.dd-cat-ph svg { width: 18px; height: 18px; }
.nav-cat-mega .cm-arrow { color: var(--text-light); font-size: 17px; line-height: 1; }
.nav-cat-mega .cat-submenu { position: absolute; top: -8px; left: 100%; min-width: 220px; background: #fff; box-shadow: 0 12px 34px rgba(0,0,0,.13); border: 1px solid var(--border); border-radius: 10px; padding: 8px; opacity: 0; visibility: hidden; transform: translateX(8px); transition: .18s; z-index: 130; }
.nav-cat-mega li.has-sub:hover > .cat-submenu { opacity: 1; visibility: visible; transform: translateX(0); }

/* ===== Sonsuz derinlikli kategori akordiyonu (mobil drawer) ===== */
.dcat { border-bottom: 1px solid #f3f1ec; }
.dcat-sub .dcat { border-bottom: none; }
.dcat-row { display: flex; align-items: center; }
.dcat-link { flex: 1; display: flex; align-items: center; gap: 14px; padding: 15px 22px; font-size: 15.5px; font-weight: 500; color: var(--dark); }
.dcat-thumb { width: 22px; height: 22px; border-radius: 5px; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.dcat-thumb img { width: 100%; height: 100%; object-fit: cover; }
.dcat-thumb svg { width: 21px; height: 21px; color: var(--tan-dark); }
.dcat-toggle { width: 46px; height: 46px; margin-right: 6px; border: none; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-light); flex-shrink: 0; }
.dcat-toggle svg { width: 18px; height: 18px; transition: transform .2s; }
.dcat.open > .dcat-row > .dcat-toggle svg { transform: rotate(90deg); }
.dcat-sub { display: none; margin-left: 34px; border-left: 2px solid var(--cream); }
.dcat.open > .dcat-sub { display: block; }
.dcat-sub .dcat-link { padding: 13px 18px; font-size: 14.5px; font-weight: 400; color: var(--text); }

/* İçerik sayfaları */
.page-content { background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 44px 48px; box-shadow: 0 8px 40px -28px rgba(31,41,55,.2); }
.page-body { font-size: 16px; line-height: 1.85; color: var(--text); }
.page-body > br { display: block; content: ''; margin-top: 8px; }
.page-body h2 { font-size: 24px; margin: 28px 0 14px; }
.page-body h3 { font-size: 19px; margin: 22px 0 10px; }
.page-body p { margin-bottom: 16px; }
.page-body ul, .page-body ol { margin: 0 0 16px 22px; }
.page-body li { margin-bottom: 8px; }
.page-body a { color: var(--tan-dark); text-decoration: underline; }
.page-body table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.page-body table td, .page-body table th { border: 1px solid var(--border); padding: 10px; }

/* Sipariş takibi */
.track-box { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 30px; margin-bottom: 24px; }
.track-result { background: var(--cream-light); border: 1px solid var(--border); border-radius: 12px; padding: 24px; margin-top: 20px; }
.track-result h3 { font-size: 20px; margin-bottom: 16px; }
.track-table { width: 100%; border-collapse: collapse; }
.track-table td { padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.track-table td:first-child { color: var(--text-muted); }
.track-table td:last-child { text-align: right; }
.alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 18px; font-size: 14px; }
.alert-error { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.alert-success { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }

/* ============================================================
   MODERNİZASYON KATMANI (v2) — cila & rafine dokunuşlar
============================================================ */
body { font-size: 15.5px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Ürün kartları — modern, yumuşak yükselme */
.product-card { background: var(--white); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; padding-bottom: 16px; transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s, border-color .35s; }
.product-card:hover { transform: translateY(-8px); box-shadow: 0 26px 50px -26px rgba(45,91,209,.5); border-color: rgba(45,91,209,.35); }
.product-card .product-img { border-radius: 0; overflow: hidden; background: linear-gradient(135deg, #f6f9fe, #e2e9f7); position: relative; margin-bottom: 14px; }
.product-card .product-img img { transition: transform .7s cubic-bezier(.2,.7,.3,1); }
.product-card:hover .product-img img { transform: scale(1.07); }
.product-name { font-family: var(--font-body); font-size: 14.5px; font-weight: 500; letter-spacing: .01em; color: var(--text); margin: 0 16px 8px; line-height: 1.45; min-height: 2.9em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .2s; }
.product-card:hover .product-name { color: var(--tan-dark); }
.product-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 16px; }
.product-price .price { font-size: 19px; font-weight: 700; color: var(--dark); letter-spacing: .01em; }
.product-price .old-price { font-size: 13px; color: var(--text-light); text-decoration: line-through; }
.product-campaign-note { display:flex; align-items:center; gap:5px; margin:6px 16px 0; min-height:16px; color:#0f766e; font-size:11px; font-weight:700; line-height:16px; }
.product-campaign-note i { font-size:10px; }
.product-rating { display: flex; align-items: center; gap: 6px; margin: 9px 16px 0; }
.product-rating .stars { color: var(--star); font-size: 13px; letter-spacing: 1px; }
.product-rating .rating-count { font-size: 12px; color: var(--text-light); }

/* Favori kalp butonu — kart üstü */
.fav-form { position: absolute; top: 10px; right: 10px; margin: 0; z-index: 6; }
.product-fav { width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.95); backdrop-filter: blur(6px); box-shadow: 0 4px 14px -4px rgba(17,21,40,.3); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text); opacity: 0; transform: translateY(-6px); transition: .25s; }
.product-card:hover .product-fav { opacity: 1; transform: translateY(0); }
.product-fav:hover { background: var(--tan); color: #fff; transform: scale(1.12); }
.product-fav svg { width: 16px; height: 16px; display: block; }
@media(max-width:768px){ .product-fav { opacity: 1; transform: none; } }

/* Sepete ekle — kartta hover'da kayar */
.product-add { position: absolute; left: 12px; right: 12px; bottom: 12px; background: linear-gradient(135deg, var(--tan), var(--tan-dark)); color: #fff; border: none; padding: 13px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; cursor: pointer; opacity: 0; transform: translateY(12px); transition: .32s cubic-bezier(.2,.7,.3,1); border-radius: 50px; box-shadow: 0 10px 24px -8px rgba(45,91,209,.6); }
.product-card:hover .product-add { opacity: 1; transform: translateY(0); }
.product-add:hover { filter: brightness(1.07); box-shadow: 0 14px 30px -8px rgba(45,91,209,.75); }
.product-add:disabled { background: var(--beige-soft); color: var(--text-muted); cursor: not-allowed; box-shadow: none; filter: none; }

/* Bölüm başlıkları — ince çizgi vurgusu */
.section { padding: 28px 0; }
.section-head h2 { position: relative; }
.section-head h2::after { content:''; position:absolute; left:0; bottom:-12px; width:48px; height:2px; background:var(--tan); }

/* Promo banner derinlik */
.promo-banner { border-radius: 6px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(31,41,55,.25); }

/* Genel buton köşe yumuşatma */
.btn { border-radius: 10px; }

/* Breadcrumb rafine */
.breadcrumb { font-size: 12px; letter-spacing: .06em; color: var(--text-muted); padding: 26px 0; text-transform: uppercase; }
.breadcrumb a:hover { color: var(--tan-dark); }
.page-title { font-size: 40px; font-weight: 500; color: var(--dark); margin: 8px 0 28px; letter-spacing: .02em; }

/* ============================================================
   ÜRÜN LİSTE SAYFASI (filtre + grid)
============================================================ */
.list-layout { display: grid; grid-template-columns: 260px 1fr; gap: 48px; padding: 10px 0 80px; align-items: start; }
.filters { position: sticky; top: 110px; background: var(--cream-light); border-radius: 10px; padding: 26px 24px; }
.filters .filter-group { margin-bottom: 22px; }
.filters .filter-group h4 { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--dark); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.filters input[type=number] { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; margin-bottom: 8px; background: #fff; font-family: var(--font-body); }
.filters input:focus { outline: none; border-color: var(--tan); }
.filters .btn { width: 100%; margin-top: 4px; }
.list-main { min-width: 0; }
.list-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 28px; padding-bottom: 18px; border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 14px; }
.list-header h1 { font-size: 30px; font-weight: 500; color: var(--dark); }
.list-header h1 small { font-size: 14px; color: var(--text-light); font-family: var(--font-body); font-weight: 300; margin-left: 6px; }
.list-header select { padding: 10px 16px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; background: #fff; font-family: var(--font-body); cursor: pointer; color: var(--dark); }
.list-header select:focus { outline: none; border-color: var(--tan); }
.sub-cats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.sub-cat-chip { padding: 8px 18px; background: var(--cream-light); border: 1px solid var(--border); border-radius: 50px; font-size: 13px; color: var(--dark); transition: .2s; }
.sub-cat-chip:hover { background: var(--dark); color: #fff; border-color: var(--dark); }
.list-main .product-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px; }
@media(max-width:1024px){ .list-main .product-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media(max-width:992px){
  .list-layout { grid-template-columns: 1fr; gap: 20px; }
  .filters { position: static; }
  .list-main .product-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
}

/* ============================================================
   3'LÜ PROMO BANNER (anasayfa)
============================================================ */
.promo-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding: 8px 0 28px; }
.promo-card { border-radius: 16px; padding: 36px 32px; min-height: 200px; display: flex; align-items: center; position: relative; overflow: hidden; transition: transform .3s; }
.promo-card:hover { transform: translateY(-4px); }
.promo-card--mint { background: linear-gradient(135deg,#d8efe4,#c4e8d6); }
.promo-card--pink { background: linear-gradient(135deg,#fbdce5,#f8cdd9); }
.promo-card--blue { background: linear-gradient(135deg,#d6e4fb,#c5d8f7); }
.promo-card-text { position: relative; z-index: 2; max-width: 75%; }
.promo-card-text h3 { font-family: var(--font-body); font-size: 24px; font-weight: 800; color: #000; margin-bottom: 10px; line-height: 1.2; }
.promo-card-text p { font-size: 14.5px; color: var(--dark); margin-bottom: 22px; line-height: 1.5; font-weight: 500; }
.promo-card-btn { display: inline-block; background: var(--dark); color: #fff; padding: 12px 26px; border-radius: 50px; font-size: 13px; font-weight: 500; letter-spacing: .03em; transition: .25s; }
.promo-card-btn:hover { background: var(--tan); color: #fff; }
/* Dekoratif daire (görseldeki ürün görseli yerine) */
.promo-card::after { content: ''; position: absolute; right: -40px; bottom: -40px; width: 150px; height: 150px; border-radius: 50%; background: rgba(255,255,255,.35); }
.promo-card--mint::after { background: rgba(255,255,255,.4); }

@media(max-width:900px){ .promo-cards { grid-template-columns: 1fr 1fr; } }
@media(max-width:600px){ .promo-cards { grid-template-columns: 1fr; gap: 16px; } .promo-card { min-height: 150px; padding: 28px 26px; } }

/* İletişim sayfası */
.contact-layout { display: grid; grid-template-columns: 320px 1fr; gap: 48px; padding-bottom: 70px; align-items: start; }
.contact-info { background: var(--cream-light); border-radius: 12px; padding: 30px; }
.contact-info h3 { font-size: 22px; margin-bottom: 18px; }
.contact-info p { margin-bottom: 16px; font-size: 14px; line-height: 1.7; }
.contact-form-box { background: #fff; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-input { width: 100%; padding: 14px 18px; border: 1.5px solid var(--border); border-radius: 12px; font-size: 14.5px; font-family: var(--font-body); background: var(--cream-light); transition: .22s; }
.form-input:focus { outline: none; border-color: var(--tan); background: #fff; box-shadow: 0 0 0 4px rgba(45,91,209,.12); }
.form-group label { display: block; font-size: 13px; margin-bottom: 6px; color: var(--text); font-weight: 500; }

/* Blog tekil */
.blog-single { max-width: 780px; margin: 0 auto; padding-bottom: 50px; }
.blog-single-hero {
  position: relative; border-radius: 18px; overflow: hidden;
  margin-bottom: 32px; box-shadow: 0 12px 40px -16px rgba(31,41,55,.2);
}
.blog-single-img { width: 100%; max-height: 420px; object-fit: cover; display: block; }
.blog-single-header { margin-bottom: 36px; }
.blog-single-header h1 {
  font-size: 38px; line-height: 1.25; margin-bottom: 16px;
  font-family: var(--font-head); font-weight: 600; color: var(--dark);
}
.blog-meta {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  color: var(--text-muted); font-size: 13.5px;
}
.blog-meta-item {
  display: inline-flex; align-items: center; gap: 6px;
}
.blog-meta-item svg { opacity: .55; }
.blog-content { font-size: 16px; line-height: 1.9; color: var(--text); }
.blog-content p { margin-bottom: 18px; }
.blog-content h2, .blog-content h3 { margin-top: 32px; margin-bottom: 14px; color: var(--dark); }
.blog-content img { border-radius: 12px; margin: 20px 0; }
.blog-content blockquote {
  border-left: 3px solid var(--tan); margin: 24px 0; padding: 16px 22px;
  background: var(--cream-light); border-radius: 0 12px 12px 0;
  font-style: italic; color: var(--text-muted);
}
.blog-share {
  display: flex; align-items: center; gap: 10px;
  margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--border);
}
.blog-share-label { font-size: 14px; font-weight: 600; color: var(--dark); }
.blog-comments {
  max-width: 780px; margin: 44px auto 0; padding-top: 36px; padding-bottom: 60px;
  border-top: 1px solid var(--border);
}
.blog-comments h3 {
  font-size: 22px; margin-bottom: 24px; font-family: var(--font-head);
  display: flex; align-items: center; gap: 10px; color: var(--dark);
}
.blog-comments h3 svg { opacity: .5; }
@media (max-width: 640px) {
  .blog-single-header h1 { font-size: 26px; }
  .blog-single-hero { border-radius: 14px; margin-bottom: 24px; }
  .blog-meta { gap: 12px; font-size: 12.5px; }
  .blog-content { font-size: 15px; }
}

@media(max-width:768px){ .contact-layout { grid-template-columns: 1fr; gap: 24px; } .form-row-2 { grid-template-columns: 1fr; } }

/* ============================================================
   BLOG KARTLARI
============================================================ */
@keyframes blogCardIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  padding: 20px 0 60px;
}
.blog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  background: #fff;
  border: 1px solid #e3e9f3;
  border-radius: 8px;
  box-shadow: 0 10px 30px -24px rgba(31, 41, 55, .48);
  animation: blogCardIn .55s cubic-bezier(.22, 1, .36, 1) both;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s, border-color .35s;
}
.blog-card:nth-child(2) { animation-delay: .08s; }
.blog-card:nth-child(3) { animation-delay: .16s; }
.blog-card:hover {
  transform: translateY(-8px);
  border-color: rgba(45, 91, 209, .34);
  box-shadow: 0 26px 56px -30px rgba(31, 70, 173, .58), 0 12px 24px -20px rgba(31, 41, 55, .38);
}
.blog-card:focus-visible {
  outline: 3px solid rgba(45, 91, 209, .28);
  outline-offset: 4px;
}

.blog-card-img {
  position: relative;
  aspect-ratio: 16 / 10;
  margin: 8px 8px 0;
  overflow: hidden;
  border-radius: 6px;
  background: linear-gradient(145deg, #f6f9fe, #e5ecf8);
}
.blog-card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17, 24, 39, .04), transparent 45%, rgba(17, 24, 39, .2));
  pointer-events: none;
}
.blog-card-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.22, 1, .36, 1), filter .35s;
}
.blog-card:hover .blog-card-img img { transform: scale(1.075); }
.blog-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px 20px 0;
}
.blog-card-date {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  margin: 0 0 12px;
  color: var(--tan-dark);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .04em;
}
.blog-card-date svg { flex: 0 0 auto; }
.blog-card-body h3 {
  min-height: 2.8em;
  margin: 0 0 10px;
  padding: 0;
  color: var(--dark);
  font-family: var(--font-body);
  font-size: 18.5px;
  font-weight: 700;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  transition: color .25s;
}
.blog-card:hover .blog-card-body h3 { color: var(--tan-dark); }
.blog-card-body p {
  flex: 1;
  margin: 0 0 20px;
  padding: 0;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.7;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.blog-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 62px;
  margin: auto -20px 0;
  padding: 12px 14px 12px 20px;
  border-top: 1px solid #edf0f5;
  background: #fbfcfe;
}
.blog-card-link {
  color: var(--dark);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
  transition: color .25s;
}
.blog-card-arrow {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: #fff;
  background: var(--tan-dark);
  box-shadow: 0 8px 18px -10px rgba(31, 70, 173, .75);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), background .25s, box-shadow .25s;
}
.blog-card:hover .blog-card-link { color: var(--tan-dark); }
.blog-card:hover .blog-card-arrow {
  transform: translateX(3px);
  background: var(--tan);
  box-shadow: 0 10px 20px -9px rgba(45, 91, 209, .8);
}

@media(max-width:900px){ .reviews-grid, .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media(max-width:640px){
  .reviews-grid, .blog-grid { grid-template-columns: 1fr; }
  .blog-grid { gap: 18px; padding-bottom: 40px; }
  .blog-card-body h3 { min-height: auto; }
  .review-text { min-height: auto; }
}
@media(prefers-reduced-motion:reduce){
  .blog-card { animation: none; transition: none; }
  .blog-card-img img, .blog-card-link, .blog-card-arrow { transition: none; }
}
/* BLOG KARTLARI - ÜRÜN KARTI DİLİ */
.blog-card {
  border-radius: 18px;
  border-color: var(--border);
  padding-bottom: 16px;
  box-shadow: 0 4px 20px -14px rgba(31, 41, 55, .16);
}
.blog-card:hover {
  transform: translateY(-8px);
  border-color: rgba(45, 91, 209, .35);
  box-shadow: 0 26px 50px -26px rgba(45, 91, 209, .5);
}
.blog-card-img {
  aspect-ratio: 16 / 10;
  margin: 0 0 14px;
  border-radius: 0;
}
.blog-card-body { padding: 0 16px; }
.blog-card-date { margin-bottom: 9px; }
.blog-card-body h3 {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
  margin-bottom: 8px;
}
.blog-card-body p {
  font-size: 13.5px;
  line-height: 1.6;
  margin-bottom: 16px;
}
.blog-card-footer {
  min-height: 44px;
  margin: 0;
  padding: 0 8px 0 16px;
  border: 1px solid rgba(45, 91, 209, .16);
  border-radius: 50px;
  background: #f4f7fd;
  transition: background .3s, border-color .3s, box-shadow .3s;
}
.blog-card-link {
  color: var(--tan-dark);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.blog-card-arrow {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--tan), var(--tan-dark));
  box-shadow: none;
}
.blog-card:hover .blog-card-footer {
  border-color: transparent;
  background: linear-gradient(135deg, var(--tan), var(--tan-dark));
  box-shadow: 0 10px 24px -8px rgba(45, 91, 209, .6);
}
.blog-card:hover .blog-card-link { color: #fff; }
.blog-card:hover .blog-card-arrow { background: rgba(255, 255, 255, .2); box-shadow: none; }
@media(max-width:640px){ .blog-card-body { padding-left: 18px; padding-right: 18px; } }
/* Blog liste karti: acik zeminde okuma linki okunabilir kalir */
.blog-card--listing:hover .blog-card-link,
.blog-card--listing:focus-visible .blog-card-link { color: var(--tan-dark); }
/* Blog liste sayfa başlığı */
.blog-page-head { text-align: center; padding: 10px 0 36px; }
.blog-page-head .page-title { margin-bottom: 8px; }
.blog-page-head p { color: var(--text-muted); font-size: 16px; }

/* ============================================================
   MÜŞTERİ DENEYİMLERİ (testimonials)
============================================================ */
.testimonials {
  padding: 52px 0 46px;
  background: #fff;
}
.testimonials-head {
  max-width: 640px;
  margin: 0 auto 30px;
  text-align: center;
}
.testimonials-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 18px;
  padding: 8px 14px;
  border: 1px solid #dbe5f4;
  border-radius: 50px;
  background: #f6f9ff;
  color: var(--tan-dark);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
}
.testimonials-head h2 {
  margin: 0 0 9px;
  color: var(--dark);
  font-size: 30px;
  font-weight: 650;
  line-height: 1.2;
}
.testimonials-head p { color: var(--text-muted); font-size: 15px; line-height: 1.6; }
.testimonial-slider { max-width: 100%; margin: 0 auto; overflow: hidden; }
.testimonial-track {
  display: flex;
  align-items: stretch;
  gap: 24px;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
.testimonial-slide {
  display: flex;
  flex: 0 0 calc((100% - 48px) / 3);
  min-width: 0;
  padding: 12px 0 12px;
}
.testimonial-card {
  width: 100%;
  min-height: 326px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e1e8f3;
  border-top: 1px solid #e1e8f3;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 28px -24px rgba(24, 43, 79, .44);
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.testimonial-card:hover {
  transform: translateY(-6px);
  border-color: rgba(45, 91, 209, .32);
  box-shadow: 0 24px 44px -26px rgba(31, 70, 173, .46);
}
.testimonial-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 70px;
  padding: 20px 22px 10px;
}
.testimonial-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 7px 9px;
  border: 1px solid #f1e0ac;
  border-radius: 6px;
  background: #fffaf0;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 1px;
}
.testimonial-stars span { color: #d9e2ee; }
.testimonial-stars span.on { color: #eba719; }
.testimonial-quote {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #edf3ff;
  color: var(--tan-dark);
  font-family: Georgia, serif;
  font-size: 35px;
  font-weight: 700;
  line-height: 1;
}
.testimonial-text {
  flex: 1;
  min-height: 7em;
  margin: 0;
  padding: 8px 22px 24px;
  color: #33415a;
  font-size: 15px;
  font-style: normal;
  font-weight: 450;
  line-height: 1.75;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
.testimonial-author {
  min-height: 74px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 22px;
  border-top: 1px solid #e7edf6;
  background: #f9fbfe;
}
.testimonial-avatar {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tan), var(--tan-dark));
  box-shadow: 0 5px 14px -8px rgba(31, 70, 173, .65);
  color: #fff;
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 600;
}
.testimonial-avatar img { width: 100%; height: 100%; object-fit: cover; }
.testimonial-name {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--dark);
  font-size: 15px;
  font-weight: 700;
}
.testimonial-name .verified {
  width: 17px;
  height: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #28b777;
  color: #fff;
  font-size: 10px;
}
.testimonial-product { margin-top: 3px; color: var(--text-muted); font-size: 12px; line-height: 1.35; }
.testimonial-nav { display: flex; justify-content: center; gap: 12px; margin-top: 18px; }
.testi-btn {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dfe7f3;
  border-radius: 50%;
  background: #fff;
  color: var(--tan-dark);
  box-shadow: 0 8px 20px -12px rgba(31, 70, 173, .45);
  cursor: pointer;
  font-size: 23px;
  line-height: 1;
  transition: transform .2s, background .2s, border-color .2s, color .2s;
}
.testi-btn:hover {
  transform: translateY(-2px);
  border-color: var(--tan-dark);
  background: var(--tan-dark);
  color: #fff;
}
@media(max-width:1024px){ .testimonial-slide { flex-basis: calc((100% - 24px) / 2); } }
@media(max-width:700px){ .testimonial-slide { flex-basis: 100%; } }
@media(max-width:640px){
  .testimonials { padding: 40px 0 36px; }
  .testimonials-head h2 { font-size: 27px; }
  .testimonial-card { min-height: 0; }
  .testimonial-card-head { padding: 19px 19px 8px; }
  .testimonial-text { min-height: auto; padding: 8px 19px 22px; font-size: 14.5px; }
  .testimonial-author { padding: 13px 19px; }
}
@media(prefers-reduced-motion:reduce){ .testimonial-card, .testimonial-track, .testi-btn { transition: none; } }
/* ============================================================
   MOBİL ALT NAVBAR
============================================================ */
.mobile-nav { display: none; }
@media(max-width:768px){
  .mobile-nav {
    display: flex;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 300;
    background: #fff;
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 16px -8px rgba(31,41,55,.18);
    padding: 6px 2px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .mobile-nav a {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 7px 2px; color: var(--text-muted); position: relative;
    font-size: 0;
  }
  .mobile-nav a svg { width: 23px; height: 23px; }
  .mobile-nav a span:not(.mobile-nav-badge) { font-size: 10.5px; letter-spacing: .01em; font-weight: 500; }
  .mobile-nav a.active { color: var(--tan-dark); }
  .mobile-nav a.active svg { stroke: var(--tan-dark); }
  .mobile-nav-badge {
    position: absolute; top: 2px; right: 50%; transform: translateX(16px);
    background: var(--dark); color: #fff; font-size: 10px !important; font-weight: 600;
    min-width: 17px; height: 17px; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 4px;
  }
  /* Alt navbar yüksekliği kadar sayfa altına boşluk (içerik gizlenmesin) */
  body { padding-bottom: 64px; }
  /* Footer'ın alt navbar'a denk gelmemesi için */
  .site-footer, footer { margin-bottom: 0; }
}

/* ============================================================
   HEADER SABİTLEME (kesin) — mobilde fixed
============================================================ */
@media(max-width:768px){
  /* Topbar mobilde gizlensin (yer kaplamasın, kayma hissi vermesin) */
  .topbar { display: none; }
  /* Header tam sabit */
  .site-header {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    z-index: 500;
    background: #fff;
    box-shadow: 0 2px 10px -4px rgba(31,41,55,.15);
  }
  /* Header yüksekliği kadar içeriği aşağı it */
  body { padding-top: 70px; }
  /* Header iç boşluğunu mobilde küçült */
}

/* ============================================================
   YENİ ÖZELLİKLER — kargo çubuğu, whatsapp, stok, günün fırsatı
============================================================ */
/* Ücretsiz kargo ilerleme çubuğu */
.freeship-bar { background: var(--cream-light); border-radius: 10px; padding: 14px 16px; margin-bottom: 18px; }
.freeship-bar.done { background: #e7f6ee; }
.freeship-text { font-size: 13px; color: var(--text); margin-bottom: 8px; }
.freeship-bar.done .freeship-text { color: #1a8a4f; margin-bottom: 0; }
.freeship-text strong { color: var(--tan-dark); }
.freeship-track { height: 7px; background: #e3dccb; border-radius: 4px; overflow: hidden; }
.freeship-fill { height: 100%; background: linear-gradient(90deg, var(--tan), var(--tan-dark)); border-radius: 4px; transition: width .4s; }

/* Düşük stok uyarısı */
.stock-info .low-stock { color: #d9480f; font-weight: 600; font-size: 14px; background: #fff4ed; padding: 6px 12px; border-radius: 6px; display: inline-block; }
.stock-info .in-stock { color: #2b8a4f; }
.stock-info .out-stock { color: #c92a2a; }

/* WhatsApp sabit buton */
.scroll-top {
  position: fixed; right: 18px; bottom: 84px; z-index: 350;
  width: 56px; height: 56px; border-radius: 50%;
  background: #fff; color: var(--dark); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px -4px rgba(31,41,55,.15);
  cursor: pointer; opacity: 0; visibility: hidden;
  transition: opacity .3s, visibility .3s, transform .25s;
}
.scroll-top.visible { opacity: 1; visibility: visible; }
.scroll-top:hover { transform: scale(1.08); background: var(--dark); color: #fff; border-color: var(--dark); }
.scroll-top svg { width: 28px; height: 28px; }
.wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 350; width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px -6px rgba(37,211,102,.6); transition: transform .25s; }
.wa-float:hover { transform: scale(1.08); color: #fff; }
.wa-float svg { width: 32px; height: 32px; }
@media(max-width:768px){
  .scroll-top { bottom: 138px; right: 14px; width: 50px; height: 50px; }
  .scroll-top svg { width: 26px; height: 26px; }
  .wa-float { bottom: 78px; right: 14px; width: 50px; height: 50px; }
  .wa-float svg { width: 28px; height: 28px; }
}

/* Günün fırsatı (anasayfa) — premium tasarım */
@keyframes dealGlow { 0%,100% { box-shadow: 0 0 40px -10px rgba(45,91,209,.15); } 50% { box-shadow: 0 0 60px -10px rgba(45,91,209,.3); } }
@keyframes dealBadgePulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes dealShine { from { transform: translateX(-150%) rotate(12deg); } to { transform: translateX(250%) rotate(12deg); } }
@keyframes dealTick { 0%,100% { opacity: 1; } 50% { opacity: .5; } }

.deal-day { position: relative; display: grid; grid-template-columns: 400px 1fr; gap: 48px; align-items: center; background: linear-gradient(145deg, #0d1225 0%, #151d3a 40%, #1a2748 100%); border-radius: 24px; padding: 44px; overflow: hidden; animation: dealGlow 4s ease-in-out infinite; }
/* Dekoratif arka plan desenleri */
.deal-day::before { content: ''; position: absolute; top: -80px; right: -80px; width: 300px; height: 300px; border-radius: 50%; border: 1.5px solid rgba(45,91,209,.12); pointer-events: none; }
.deal-day::after { content: ''; position: absolute; bottom: -60px; left: 30%; width: 200px; height: 200px; border-radius: 50%; border: 1.5px solid rgba(45,91,209,.08); pointer-events: none; }
/* Işık süpürmesi */
.deal-day .deal-shine { position: absolute; top: -50%; left: 0; width: 40%; height: 200%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.04), transparent); transform: translateX(-150%) rotate(12deg); pointer-events: none; z-index: 1; animation: dealShine 6s ease-in-out infinite; }

.deal-day-media { position: relative; z-index: 2; border-radius: 18px; overflow: hidden; background: rgba(255,255,255,.06); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(4px); }
.deal-day-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.deal-day:hover .deal-day-media img { transform: scale(1.05); }
.deal-day-ph { font-family: var(--font-head); font-size: 40px; color: var(--tan); }
.deal-day-badge { position: absolute; top: 16px; left: 16px; background: linear-gradient(135deg, #ff5a5f, #e11d2a); color: #fff; font-size: 14px; font-weight: 800; padding: 9px 18px; border-radius: 50px; letter-spacing: .03em; box-shadow: 0 6px 20px -4px rgba(225,29,42,.6); animation: dealBadgePulse 2.5s ease-in-out infinite; z-index: 3; }

.deal-day-info { position: relative; z-index: 2; }
.deal-day-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: rgba(45,91,209,.15); color: #7db4ff; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; padding: 8px 18px; border-radius: 50px; border: 1px solid rgba(45,91,209,.25); margin-bottom: 16px; }
.deal-day-info h2 { font-size: 28px; font-weight: 600; color: #fff; margin-bottom: 12px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.deal-day-info > p { color: rgba(255,255,255,.6); font-size: 15px; margin-bottom: 20px; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.deal-day-price { display: flex; align-items: baseline; gap: 16px; margin-bottom: 22px; }
.deal-day-price .now { font-size: 34px; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.deal-day-price .was { font-size: 18px; color: rgba(255,255,255,.4); text-decoration: line-through; }

.deal-day .deal-countdown { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(135deg, var(--tan), var(--tan-dark)); border: none; padding: 16px 36px; border-radius: 50px; margin-bottom: 24px; box-shadow: 0 10px 30px -8px rgba(45,91,209,.5); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1; }
.deal-day .deal-countdown > span:first-child { color: rgba(255,255,255,.85); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1; }
.deal-day .countdown { font-family: var(--font-body); font-size: 13px; font-weight: 700; color: #fff; letter-spacing: .1em; line-height: 1; animation: dealTick 2s ease-in-out infinite; }

.deal-day .btn-primary { background: linear-gradient(135deg, var(--tan), var(--tan-dark)); border: none; box-shadow: 0 10px 30px -8px rgba(45,91,209,.5); border-radius: 50px; padding: 16px 36px; font-size: 13px; font-weight: 700; letter-spacing: .1em; line-height: 1; transition: all .3s; }
.deal-day .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 16px 40px -8px rgba(45,91,209,.65); filter: brightness(1.1); }

@media(max-width:768px){
  .deal-day { grid-template-columns: 1fr; gap: 24px; padding: 28px 22px; }
  .deal-day-media { max-width: 320px; margin: 0 auto; }
  .deal-day-info h2 { font-size: 22px; }
  .deal-day-price .now { font-size: 28px; }
  .deal-day .countdown { font-size: 18px; }
}

/* ============================================================
   HEADER GÜNCELLEME — logo sola, kategori ikonu, pill menü
============================================================ */
/* Kategoriler menüsündeki küçük logo ikonu */

/* Pill menüde dropdown konumu bozulmasın */
.nav-dropdown { position: relative; }
.nav-dropdown-menu { top: calc(100% + 6px); }

/* Logo görseli olmadığında metin logosu da büyük dursun */
.site-logo { white-space: nowrap; }

/* Aktif sayfa pill'i için ana sayfa linkini de kapsa */
@media(min-width:769px){
  .main-nav a { white-space: nowrap; }
}

/* ============================================================
   HEADER v3 — dropdown kategori ikonları + sepet/favori badge
============================================================ */
/* Dropdown menüsündeki kategori ikonları (açılınca görünür) */
.nav-dropdown-menu a { display: flex; align-items: center; gap: 12px; }
.dd-cat-icon { width: 28px; height: 28px; border-radius: 7px; object-fit: cover; background: var(--cream-light); flex-shrink: 0; }
.dd-cat-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tan); flex-shrink: 0; margin: 0 10px; }

/* Header ikonlarındaki sayaç rozetleri ikon dairesine göre konumlansın */
.header-actions .hdr-badge { box-shadow: 0 2px 6px -1px rgba(0,0,0,.25); }

/* Logo görseli ile metin arası boşluk */
.site-logo .logo-img { margin: 0; }

/* Orta boy ekranlarda header sığsın */
@media(min-width:769px) and (max-width:1280px){
  .header-inner { gap: 16px; }
  .main-nav { gap: 2px; }
  .main-nav a { padding: 8px 10px; font-size: 11px; letter-spacing: .04em; }
  .site-logo { font-size: 26px; }
  .site-logo .logo-img { max-height: 54px; }
  .header-actions { gap: 12px; }
  .hdr-act-lbl { display: block; font-size: 10.5px; }
  .hdr-act svg { width: 21px; height: 21px; }
}


/* ============================================================
   YENİ ÜRÜNLER ALTI BANNER (after_products) — referans stili
============================================================ */
.ap-banner-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 22px; }
.ap-banner-grid.single { grid-template-columns: 1fr; }
.ap-banner {
  position: relative; border-radius: 0; overflow: hidden; min-height: 240px;
  display: flex; align-items: center;
  background-size: cover; background-position: center right;
  background-color: var(--cream-light);
  box-shadow: 0 10px 32px -18px rgba(31,41,55,.3); transition: transform .35s, box-shadow .35s;
}
.ap-banner:hover { transform: translateY(-4px); box-shadow: 0 20px 44px -22px rgba(31,41,55,.4); }
/* Sol tarafta yazıyı okunaklı kılan açık degrade katman */
.ap-banner::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(247,242,234,.96) 0%, rgba(247,242,234,.85) 38%, rgba(247,242,234,0) 70%);
}
.ap-banner-content { position: relative; z-index: 2; padding: 40px 44px; max-width: 60%; }
.ap-banner-eyebrow { display: inline-block; font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--tan-dark); margin-bottom: 12px; }
.ap-banner-content h3 { font-family: var(--font-head); font-size: 36px; font-weight: 500; color: var(--dark); line-height: 1.12; margin-bottom: 12px; text-transform: uppercase; letter-spacing: .02em; }
.ap-banner-content p { font-size: 15px; color: var(--text); opacity: .9; margin-bottom: 22px; line-height: 1.5; max-width: 420px; }
.ap-banner-btn { display: inline-block; background: var(--dark); color: #fff; font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 14px 30px; border-radius: 50px; transition: background .25s; }
.ap-banner:hover .ap-banner-btn { background: var(--tan-dark); }
/* Sağdaki yuvarlak indirim rozeti */
.ap-banner-badge {
  position: absolute; right: 36px; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 130px; height: 130px; border-radius: 50%; background: var(--dark); color: #fff;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--font-head); font-size: 20px; font-weight: 600; line-height: 1.15; padding: 16px;
  box-shadow: 0 12px 30px -10px rgba(31,41,55,.5);
}
@media(max-width:768px){
  .ap-banner { min-height: 200px; }
  .ap-banner::before { background: linear-gradient(90deg, rgba(247,242,234,.97) 0%, rgba(247,242,234,.9) 60%, rgba(247,242,234,.55) 100%); }
  .ap-banner-content { max-width: 100%; padding: 28px; }
  .ap-banner-content h3 { font-size: 26px; }
  .ap-banner-badge { width: 88px; height: 88px; font-size: 14px; right: 16px; padding: 10px; }
}
@media(max-width:480px){
  .ap-banner-badge { display: none; }
}

/* Banner section boşluğunu daralt */
.ap-section { padding: 0 24px !important; margin-top: -8px; }

/* Promo kartında görsel arka plan varsa yazı okunsun */
.promo-card[style*="background-image"] { position: relative; }
.promo-card[style*="background-image"]::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(255,255,255,.62), rgba(255,255,255,.15) 55%, transparent 80%); z-index:1; }
.promo-card[style*="background-image"] .promo-card-text { position: relative; z-index: 2; }

/* Kategoriler ile Yeni Ürünler arasını sıkıştır */
.cat-circles { padding-bottom: 24px; }
.cat-circles + section { padding-top: 24px; }

/* Testimonial avatar görseli */
.testimonial-avatar { overflow: hidden; }
.testimonial-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* ============================================================
   SIKÇA SORULAN SORULAR (anasayfa akordeon)
============================================================ */
.faq-section { background: #fff; }
.faq-list { max-width: 100%; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.faq-item { background: #fff; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 0; overflow: hidden; box-shadow: 0 4px 16px -14px rgba(31,41,55,.15); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; background: none; border: none; cursor: pointer; font-size: 16px; font-weight: 500; color: var(--dark); text-align: left; font-family: var(--font-body); }
.faq-q:hover { color: var(--tan-dark); }
.faq-icon { flex-shrink: 0; transition: transform .3s; color: var(--tan-dark); }
.faq-item.open .faq-icon { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-item.open .faq-a { max-height: 400px; }
.faq-a-inner { padding: 0 24px 22px; color: var(--text-muted); font-size: 14.5px; line-height: 1.65; }
@media(max-width:768px){ .faq-list { grid-template-columns: 1fr; } }

/* Footer logo görseli */
.footer-logo-img { max-height: 60px; width: auto; display: block; background: #fff; padding: 8px 12px; border-radius: 10px; }

/* Özellikler barı mobilde 2x2 — yeni premium kart tasarımına uyumlu */
@media(max-width:768px){
  .features { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; padding: 20px 0 24px !important; }
  .feature-card { padding: 22px 16px 22px !important; border-radius: 16px 16px 16px 4px !important; }
  .feature-icon { width: 50px !important; height: 50px !important; margin-bottom: 14px !important; border-radius: 14px 14px 14px 4px !important; }
  .feature-icon svg { width: 22px !important; height: 22px !important; }
  .feature-kicker { font-size: 8.5px !important; margin-bottom: 5px !important; }
  .feature-kicker::before { width: 10px !important; }
  .feature-title { font-size: 13.5px !important; }
  .feature-desc { font-size: 11.5px !important; }
  .feature-card .fx-rings { width: 70px !important; height: 70px !important; top: -18px !important; right: -18px !important; }
}
@media(max-width:400px){
  .features { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .feature-card { padding: 18px 12px 18px !important; }
  .feature-icon { width: 44px !important; height: 44px !important; }
  .feature-icon svg { width: 20px !important; height: 20px !important; }
}

/* Özellikler barı ile Kategoriler arasını daralt */
.features { padding-bottom: 24px; }
.cat-circles { padding-top: 14px; }

/* ============================================================
   GENİŞLETİLMİŞ ÜRÜN FİLTRESİ
============================================================ */
.filter-group { margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--border); }
.filter-group:last-of-type { border-bottom: none; }
.filter-group h4 { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dark); margin-bottom: 14px; }
.filter-cats { display: flex; flex-direction: column; gap: 2px; }
.filter-cat {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #5e6c80;
  font-size: 14.5px;
  line-height: 1.25;
}
.filter-cat:hover { border-color: #dce6f5; background: #f5f8fd; color: var(--tan-dark); }
.filter-cat.active {
  border-color: #cfddf5;
  background: #eaf1ff;
  color: var(--tan-dark);
  font-weight: 700;
}
.filter-cat.active::before {
  content: '';
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--tan);
}
.filter-sub-cats {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0 5px 12px;
  padding-left: 9px;
  border-left: 1px solid #dce6f4;
}
.filter-sub-cat {
  min-height: 30px;
  padding-top: 5px;
  padding-bottom: 5px;
  color: #718095;
  font-size: 13.5px;
}
.filter-sub-cat.active { color: var(--tan-dark); }
.filter-price { gap: 7px; }
.filters .filter-price input,
.filter-select {
  min-height: 40px;
  margin: 0;
  padding: 9px 10px;
  border: 1px solid #dce5f1;
  border-radius: 6px;
  background: #fff;
  color: var(--dark);
  font-size: 13px;
}
.filter-price input:focus,
.filter-select:focus {
  outline: 0;
  border-color: var(--tan);
  box-shadow: 0 0 0 3px rgba(45, 91, 209, .11);
}
.filter-price span { color: #a3afc0; }
.filter-check {
  width: 100%;
  min-height: 36px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 7px 0;
  color: #4b5a70;
  cursor: pointer;
  font-size: 13.5px;
  line-height: 1.4;
}
.filter-check input {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin: 2px 0 0;
  accent-color: var(--tan);
}
.filter-check:hover { color: var(--tan-dark); }
.filters .btn { min-height: 42px; margin-top: 10px; border-radius: 6px; }
.filters .btn + .btn { margin-top: 8px; }
@media(max-width:992px){
  .filters { border-radius: 18px 18px 0 0; box-shadow: 0 -12px 36px rgba(18, 34, 61, .22); }
  .filters-head { min-height: 64px; padding: 0 20px; }
  .filters-close { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid #dfe7f3; border-radius: 50%; background: #fff; }
  .filters form { padding: 2px 20px 30px; }
}
/* ============================================================
   FİLTRE PANELİ - YENİ TASARIM
============================================================ */
.filters {
  overflow: hidden;
  padding: 0;
  border: 1px solid #dfe7f3;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 32px -28px rgba(31, 70, 173, .52);
}
.filters-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: 0 18px;
  border-bottom: 1px solid #e6edf6;
  background: #f8faff;
  color: var(--dark);
  font-size: 15px;
  font-weight: 700;
}
.filters-head span::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 16px;
  margin-right: 9px;
  vertical-align: -3px;
  border-radius: 2px;
  background: var(--tan);
}
.filters-close { display: none; }
.filters form { padding: 2px 18px 18px; }
.filters .filter-group {
  margin: 0;
  padding: 18px 0;
  border-bottom: 1px solid #e8eef7;
}
.filters .filter-group:last-of-type { border-bottom: none; }
.filters .filter-group h4 {
  position: relative;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  color: #34435d;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: .1em;
}
.filter-cats { gap: 4px; }
.filter-cat {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #5e6c80;
  font-size: 14.5px;
  line-height: 1.25;
}
.filter-cat:hover { border-color: #dce6f5; background: #f5f8fd; color: var(--tan-dark); }
.filter-cat.active {
  border-color: #cfddf5;
  background: #eaf1ff;
  color: var(--tan-dark);
  font-weight: 700;
}
.filter-cat.active::before {
  content: '';
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--tan);
}
.filter-sub-cats {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0 5px 12px;
  padding-left: 9px;
  border-left: 1px solid #dce6f4;
}
.filter-sub-cat {
  min-height: 30px;
  padding-top: 5px;
  padding-bottom: 5px;
  color: #718095;
  font-size: 13.5px;
}
.filter-sub-cat.active { color: var(--tan-dark); }
.filter-price { gap: 7px; }
.filters .filter-price input,
.filter-select {
  min-height: 40px;
  margin: 0;
  padding: 9px 10px;
  border: 1px solid #dce5f1;
  border-radius: 6px;
  background: #fff;
  color: var(--dark);
  font-size: 13px;
}
.filter-price input:focus,
.filter-select:focus {
  outline: 0;
  border-color: var(--tan);
  box-shadow: 0 0 0 3px rgba(45, 91, 209, .11);
}
.filter-price span { color: #a3afc0; }
.filter-check {
  width: 100%;
  min-height: 36px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 7px 0;
  color: #4b5a70;
  cursor: pointer;
  font-size: 13.5px;
  line-height: 1.4;
}
.filter-check input {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin: 2px 0 0;
  accent-color: var(--tan);
}
.filter-check:hover { color: var(--tan-dark); }
.filters .btn { min-height: 42px; margin-top: 10px; border-radius: 6px; }
.filters .btn + .btn { margin-top: 8px; }
@media(max-width:992px){
  .filters { border-radius: 18px 18px 0 0; box-shadow: 0 -12px 36px rgba(18, 34, 61, .22); }
  .filters-head { min-height: 64px; padding: 0 20px; }
  .filters-close { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid #dfe7f3; border-radius: 50%; background: #fff; }
  .filters form { padding: 2px 20px 30px; }
}
/* ============================================================
   ÜRÜN DETAY SAYFASI (referans düzeni)
============================================================ */
.detail-price-row {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 18px 0 16px;
}
.detail-price-row .detail-price { margin: 0; }
.detail-price-row .detail-note {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--cream-light); color: var(--tan-dark);
  font-size: 12.5px; font-weight: 500;
  padding: 5px 12px; border-radius: 50px; margin: 0;
}
.detail-price-row .stock-info { margin: 0; }
.detail-price-row .stock-info .in-stock,
.detail-price-row .stock-info .out-stock,
.detail-price-row .stock-info .low-stock {
  font-size: 13px; padding: 5px 12px; border-radius: 50px; display: inline-block;
}
.detail-price-row .stock-info .in-stock { background: #ecfdf5; color: #15803d; font-weight: 600; }
.detail-price-row .stock-info .out-stock { background: #fef2f2; color: #b91c1c; font-weight: 600; }
.detail-price-row .stock-info .low-stock { background: #fff7ed; color: #c2410c; font-weight: 600; font-size: 12.5px; }
.detail-price { display: flex; align-items: center; gap: 14px; margin: 18px 0 16px; flex-wrap: wrap; }
.detail-price .old-price { font-size: 17px; color: var(--text-light); text-decoration: line-through; }
.detail-price .price-lg { font-size: 30px; font-weight: 700; color: #c0392b; }
.detail-price .badge-discount { background: #c0392b; color: #fff; font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 6px; }

/* KDV notu */
.detail-note { display: inline-flex; align-items: center; gap: 6px; background: var(--cream-light); color: var(--tan-dark); font-size: 13px; font-weight: 500; padding: 6px 14px; border-radius: 50px; }
.detail-note svg { flex-shrink: 0; }

/* Havale/EFT kutusu */
.bank-price-box { display: flex; align-items: center; gap: 10px; background: #eafaf1; border: 1px solid #cdeedb; padding: 14px 18px; border-radius: 10px; margin-bottom: 14px; }
.bank-label { color: #1a7d4b; font-weight: 600; font-size: 15px; }
.bank-amount { color: #16a34a; font-weight: 700; font-size: 19px; }

/* Ücretsiz kargo */
.free-ship-tag { display: inline-flex; align-items: center; gap: 7px; color: #1a7d4b; font-size: 14px; font-weight: 600; margin-bottom: 16px; }

/* Adet + sepete ekle */
.detail-qty-label { font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--text-muted); margin-bottom: 8px; }
.qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.qty-stepper input { width: 56px; height: 46px; border: none; text-align: center; font-size: 16px; font-weight: 600; -moz-appearance: textfield; }
.qty-stepper input::-webkit-outer-spin-button, .qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.buy-actions { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 10px; margin-top: 16px; align-items: stretch; }
.btn-buy { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 600; letter-spacing: .03em; padding: 15px 12px; white-space: nowrap; border-radius: 10px; }
.btn-buynow { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 600; letter-spacing: .03em; padding: 15px 12px; white-space: nowrap; border-radius: 10px; }
.btn-icon-action { width: 50px; border: 1px solid var(--border); background: #fff; border-radius: 10px; cursor: pointer; color: var(--text-muted); display: flex; align-items: center; justify-content: center; transition: .2s; }
.btn-icon-action:hover { border-color: var(--tan); color: var(--tan-dark); background: var(--cream-light); }
.btn-icon-action.active { border-color: var(--tan-dark); color: var(--tan-dark); background: var(--cream-light); }

/* Telefon / WhatsApp sipariş */
.order-channels { display: flex; gap: 10px; margin: 18px 0; }
.order-ch { flex: 1; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 14px; border: 1px solid var(--border); border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--dark); transition: .2s; }
.order-ch:hover { border-color: var(--tan); background: var(--cream-light); color: var(--tan-dark); }

/* Etiketler + paylaş */
.detail-tags, .detail-share { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.tags-label { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.detail-tag { font-size: 12.5px; color: var(--text-muted); background: var(--cream-light); padding: 5px 12px; border-radius: 50px; transition: .2s; }
.detail-tag:hover { background: var(--cream); color: var(--tan-dark); }
.share-btn { width: 34px; height: 34px; border-radius: 50%; background: var(--cream-light); display: flex; align-items: center; justify-content: center; color: var(--text-muted); transition: .2s; }
.share-btn:hover { background: var(--dark); color: #fff; }

/* Görsel zoom */
.detail-main-img { position: relative; cursor: zoom-in; }
.detail-main-img img { transition: transform .2s; }
.zoom-hint { position: absolute; bottom: 12px; right: 12px; background: rgba(31,41,55,.7); color: #fff; font-size: 12px; padding: 6px 12px; border-radius: 50px; display: inline-flex; align-items: center; gap: 6px; pointer-events: none; }

/* Lightbox */
.lightbox { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.9); z-index: 9999; align-items: center; justify-content: center; cursor: zoom-out; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 90%; max-height: 90%; object-fit: contain; border-radius: 8px; }
.lightbox-close { position: absolute; top: 20px; right: 30px; color: #fff; font-size: 42px; cursor: pointer; line-height: 1; }

/* ============================================================
   ÜRÜN DETAY — yan yana düzen (sol görsel, sağ bilgi)
============================================================ */
.product-detail { display: grid; grid-template-columns: 460px 1fr; gap: 48px; align-items: start; margin: 24px 0 50px; }
.detail-info { min-width: 0; }
.detail-main-img { width: 100%; aspect-ratio: 1/1; background: var(--cream-light); border-radius: 14px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.detail-main-img img { width: 100%; height: 100%; object-fit: cover; }
@media(max-width:900px){
  .product-detail { grid-template-columns: 1fr; gap: 28px; }
  .detail-gallery { max-width: 100%; }
}

/* Boş favori/sepet büyük ikon */
.big-empty { padding: 60px 20px; text-align: center; }
.big-empty-icon { width: 96px; height: 96px; margin: 0 auto 20px; color: var(--tan); background: var(--cream-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.big-empty-icon svg { width: 48px; height: 48px; }
.big-empty p { font-size: 17px; color: var(--text-muted); margin-bottom: 22px; }

/* ============================================================
   HESABIM — soldan dikey menü
============================================================ */
.account-layout { display: grid; grid-template-columns: 280px 1fr; gap: 32px; align-items: start; margin-bottom: 50px; }
.account-sidebar { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 10px; position: sticky; top: 90px; box-shadow: 0 8px 30px -22px rgba(31,41,55,.2); }
.account-user { display: flex; align-items: center; gap: 13px; padding: 18px 16px; margin: 6px 6px 10px; background: linear-gradient(135deg, var(--cream), var(--cream-light)); border-radius: 14px; }
.account-avatar { width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, var(--tan), var(--tan-dark)); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-size: 22px; font-weight: 600; flex-shrink: 0; box-shadow: 0 4px 12px -3px rgba(45,91,209,.5); }
.account-uname { font-weight: 600; color: var(--dark); font-size: 15px; }
.account-umail { font-size: 12.5px; color: var(--text-muted); }
.account-nav { display: flex; flex-direction: column; gap: 2px; }
.account-nav a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; color: var(--text); font-size: 14.5px; font-weight: 500; transition: .2s; position: relative; }
.account-nav a svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--text-muted); transition: .2s; }
.account-nav a:hover { background: var(--cream-light); color: var(--dark); transform: translateX(2px); }
.account-nav a:hover svg { color: var(--tan-dark); }
.account-nav a.active { background: linear-gradient(135deg, var(--tan), var(--tan-dark)); color: #fff; box-shadow: 0 6px 16px -6px rgba(45,91,209,.6); }
.account-nav a.active svg { color: #fff; }
.account-logout { color: #c0392b !important; margin-top: 6px; border-top: 1px solid var(--border); border-radius: 0 0 12px 12px !important; }
.account-logout svg { color: #c0392b !important; }
.account-logout:hover { background: #fef2f2 !important; }
.account-logout { margin-top: 6px; border-top: 1px solid var(--border); color: #c0392b !important; }
.account-logout svg { color: #c0392b !important; }
.account-content { min-width: 0; }
.account-content .empty-state, .account-content .big-empty { background: #fff; border: 1px solid var(--border); border-radius: 18px; min-height: 380px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 8px 30px -22px rgba(31,41,55,.18); }
.account-content .card-box { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 28px; margin-bottom: 22px; }
.account-content .card-box h3 { font-size: 18px; margin-bottom: 18px; color: var(--dark); }
@media(max-width:768px){
  .account-layout { grid-template-columns: 1fr; gap: 18px; }
  .account-sidebar { position: static; }
  .account-nav { flex-direction: row; flex-wrap: wrap; }
  .account-nav a { flex: 1; min-width: 120px; justify-content: center; }
}

/* ============================================================
   ARAMA PANELİ (header ikon → açılır büyük arama)
============================================================ */
.search-overlay { display: none; position: fixed; inset: 0; background: rgba(31,41,55,.45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); z-index: 2000; opacity: 0; transition: opacity .3s; }
.search-overlay.open { display: block; opacity: 1; }
.search-panel { background: #fff; padding: 48px 24px 40px; transform: translateY(-30px); transition: transform .35s cubic-bezier(.16,1,.3,1); box-shadow: 0 24px 60px -20px rgba(0,0,0,.3); }
.search-overlay.open .search-panel { transform: translateY(0); }
.search-close { position: absolute; top: 20px; right: 28px; background: none; border: none; font-size: 40px; line-height: 1; color: var(--text-muted); cursor: pointer; transition: .2s; }
.search-close:hover { color: var(--dark); transform: rotate(90deg); }
.search-panel-inner { max-width: 720px; margin: 0 auto; }
.search-panel-title { font-family: var(--font-head); font-size: 30px; font-weight: 500; color: var(--dark); text-align: center; margin-bottom: 26px; }
.search-big-form { display: flex; align-items: center; gap: 12px; background: var(--cream-light); border: 2px solid var(--border); border-radius: 16px; padding: 8px 8px 8px 20px; transition: border-color .2s; }
.search-big-form:focus-within { border-color: var(--tan); }
.search-big-icon { width: 24px; height: 24px; color: var(--text-muted); flex-shrink: 0; }
.search-big-form input { flex: 1; border: none; background: none; font-size: 18px; padding: 14px 6px; color: var(--dark); outline: none; }
.search-big-btn { background: var(--dark); color: #fff; border: none; border-radius: 12px; padding: 14px 32px; font-size: 15px; font-weight: 600; cursor: pointer; transition: .2s; }
.search-big-btn:hover { background: var(--tan-dark); }
.search-suggest { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 20px; justify-content: center; }
.search-suggest-label { font-size: 13px; color: var(--text-muted); }
.search-suggest a { font-size: 13px; color: var(--text); background: var(--cream-light); padding: 7px 16px; border-radius: 50px; transition: .2s; }
.search-suggest a:hover { background: var(--cream); color: var(--tan-dark); }
@media(max-width:600px){
  .search-panel { padding: 36px 16px 30px; }
  .search-panel-title { font-size: 24px; }
  .search-big-form { flex-wrap: wrap; padding: 12px; }
  .search-big-form input { width: 100%; }
  .search-big-btn { width: 100%; }
}

/* Arama sonuç bandı + boş ekran */
.search-result-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; background: var(--cream-light); border: 1px solid var(--border); border-radius: 14px; padding: 18px 24px; margin: 18px 0 24px; }
.search-result-info { display: flex; align-items: center; gap: 12px; color: var(--text); font-size: 15px; }
.search-result-info svg { width: 22px; height: 22px; color: var(--tan-dark); flex-shrink: 0; }
.search-result-info strong { color: var(--dark); }
.search-result-form { display: flex; align-items: center; background: #fff; border: 1px solid var(--border); border-radius: 50px; overflow: hidden; }
.search-result-form input { border: none; outline: none; padding: 10px 18px; font-size: 14px; width: 220px; }
.search-result-form button { border: none; background: var(--dark); color: #fff; width: 44px; height: 40px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.search-result-form button svg { width: 17px; height: 17px; }
.search-result-form button:hover { background: var(--tan-dark); }
.search-empty h3 { font-family: var(--font-head); font-size: 26px; color: var(--dark); margin-bottom: 10px; font-weight: 500; }
.search-empty { max-width: 480px; margin: 0 auto; }
@media(max-width:600px){ .search-result-form input { width: 130px; } }

/* Testimonial responsive slide genişliği */
@media(max-width:1024px){ .testimonial-slide { flex: 0 0 calc((100% - 24px) / 2); } }
@media(max-width:700px){ .testimonials { padding: 30px 0; } .testimonial-slider { padding: 0; } .testimonial-slide { flex: 0 0 100%; min-width: 100%; } .testimonial-track { gap: 0; } .testimonial-card { padding: 26px 24px 22px; } .testimonials-head h2 { font-size: 24px; } }

/* Footer etiketler */
.footer-tags { margin-top: 24px; }
.footer-tags h4 { margin-bottom: 22px; }
.footer-tags-list { display: flex; flex-wrap: wrap; gap: 8px; }
.footer-tags-list a { font-size: 12px; padding: 5px 12px; border: 1px solid rgba(255,255,255,.18); border-radius: 50px; color: rgba(255,255,255,.7); transition: .2s; }
.footer-tags-list a:hover { background: var(--tan); border-color: var(--tan); color: var(--white); }

/* ============================================================
   BİLGİ SAYFALARI — modern (hero + sidebar kart + içerik kart)
============================================================ */
.page-hero { background: linear-gradient(135deg, var(--cream) 0%, var(--cream-light) 100%); padding: 26px 0 24px; margin-bottom: 30px; border-radius: 0 0 20px 20px; }
.page-hero .breadcrumb { margin-bottom: 10px; font-size: 13px; color: var(--text-muted); }
.page-hero .breadcrumb a { color: var(--text-muted); }
.page-hero .breadcrumb a:hover { color: var(--tan-dark); }
.page-hero .breadcrumb span { margin: 0 8px; }
.page-hero h1 { font-family: var(--font-head); font-size: 32px; font-weight: 500; color: var(--dark); }
.page-layout { display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: start; margin-bottom: 56px; }
.page-sidebar { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 22px; position: sticky; top: 90px; }
.page-sidebar h4 { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px; }
.page-sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.page-sidebar nav a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-radius: 10px; color: var(--text); font-size: 14.5px; transition: .2s; }
.page-sidebar nav a svg { color: var(--text-light); transition: .2s; }
.page-sidebar nav a:hover { background: var(--cream-light); color: var(--dark); }
.page-sidebar nav a:hover svg { transform: translateX(3px); color: var(--tan-dark); }
.page-sidebar nav a.active { background: var(--cream); color: var(--tan-dark); font-weight: 600; }
.page-sidebar nav a.active svg { color: var(--tan-dark); }
@media(max-width:900px){
  .page-layout { grid-template-columns: 1fr; gap: 20px; }
  .page-sidebar { position: static; }
  .page-sidebar nav { flex-direction: row; flex-wrap: wrap; }
  .page-sidebar nav a { flex: 1; min-width: 140px; }
  .page-hero h1 { font-size: 30px; }
  .page-content { padding: 28px 22px; }
}

/* ============================================================
   İLETİŞİM SAYFASI — modern
============================================================ */
.contact-wrap { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: start; margin-bottom: 40px; }
.contact-info-col h3, .contact-form-col h3 { font-family: var(--font-head); font-size: 24px; font-weight: 500; color: var(--dark); margin-bottom: 14px; }
.contact-intro { color: var(--text-muted); font-size: 15px; line-height: 1.7; margin-bottom: 26px; }
.contact-cards { display: flex; flex-direction: column; gap: 14px; }
.contact-card { display: flex; align-items: flex-start; gap: 16px; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; transition: .2s; }
.contact-card:hover { border-color: var(--tan); box-shadow: 0 8px 24px -16px rgba(31,41,55,.18); }
.contact-card-icon { width: 46px; height: 46px; flex-shrink: 0; background: var(--cream); color: var(--tan-dark); border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.contact-card-icon svg { width: 22px; height: 22px; }
.contact-card-label { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-light); }
.contact-card p { margin: 3px 0 0; color: var(--text); font-size: 14.5px; line-height: 1.5; }
.contact-card a { color: var(--text); }
.contact-card a:hover { color: var(--tan-dark); }
.contact-socials { margin-top: 28px; }
.contact-socials-label { font-size: 13px; font-weight: 600; color: var(--text-muted); display: block; margin-bottom: 12px; }
.contact-social-list { display: flex; gap: 10px; }
.contact-social-list a { width: 44px; height: 44px; border-radius: 12px; background: var(--cream-light); border: 1px solid var(--border); color: var(--text-muted); display: flex; align-items: center; justify-content: center; transition: .2s; }
.contact-social-list a svg { width: 20px; height: 20px; }
.contact-social-list a:hover { background: var(--dark); color: #fff; border-color: var(--dark); transform: translateY(-3px); }
.contact-form-col { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 32px; box-shadow: 0 4px 24px -16px rgba(31,41,55,.12); }
.contact-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form .form-group { margin-bottom: 16px; }
.contact-form label { display: block; font-size: 13px; font-weight: 500; color: var(--text); margin-bottom: 6px; }
.contact-form .form-input { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; font-size: 14px; font-family: inherit; transition: border .2s; }
.contact-form .form-input:focus { outline: none; border-color: var(--tan); }
.contact-map { border-radius: 18px; overflow: hidden; margin-bottom: 50px; border: 1px solid var(--border); }
.contact-map iframe { width: 100%; height: 380px; border: 0; display: block; }
@media(max-width:900px){
  .contact-wrap { grid-template-columns: 1fr; gap: 28px; }
  .contact-form-row { grid-template-columns: 1fr; }
  .contact-form-col { padding: 24px; }
}

/* ============================================================
   KAMPANYALAR (blog tarzı)
============================================================ */
.campaign-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-bottom: 50px; }
.campaign-card { background: #fff; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; transition: .25s; display: flex; flex-direction: column; }
.campaign-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px -24px rgba(31,41,55,.25); }
.campaign-card-img { height: 200px; background: var(--cream-light) center/cover no-repeat; position: relative; }
.campaign-badge { position: absolute; top: 14px; left: 14px; background: #c0392b; color: #fff; font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: 50px; letter-spacing: .03em; }
.campaign-card-body { padding: 22px 24px 24px; flex: 1; display: flex; flex-direction: column; }
.campaign-card-body h3 { font-family: var(--font-head); font-size: 21px; font-weight: 500; color: var(--dark); margin-bottom: 10px; }
.campaign-card-body p { color: var(--text-muted); font-size: 14px; line-height: 1.6; margin-bottom: 14px; flex: 1; }
.campaign-date { font-size: 12.5px; color: var(--tan-dark); font-weight: 600; margin-bottom: 12px; }
.campaign-more { font-size: 14px; font-weight: 600; color: var(--dark); transition: .2s; }
.campaign-card:hover .campaign-more { color: var(--tan-dark); }

/* Kampanya detay */
.campaign-detail { max-width: 860px; margin: 0 auto 40px; }
.campaign-detail-img { position: relative; border-radius: 20px; overflow: hidden; margin-bottom: 26px; }
.campaign-detail-img img { width: 100%; max-height: 420px; object-fit: cover; display: block; }
.campaign-period { display: flex; gap: 24px; flex-wrap: wrap; background: var(--cream-light); border-radius: 12px; padding: 16px 20px; margin-bottom: 26px; font-size: 14px; color: var(--text-muted); }
.campaign-period strong { color: var(--dark); }
.campaign-content { font-size: 16px; line-height: 1.8; color: var(--text); margin-bottom: 30px; }
.campaign-cta { text-align: center; margin-bottom: 40px; }
.campaign-others { border-top: 1px solid var(--border); padding-top: 40px; margin-bottom: 50px; }
.campaign-others h3 { font-family: var(--font-head); font-size: 26px; font-weight: 500; color: var(--dark); margin-bottom: 24px; text-align: center; }
@media(max-width:900px){ .campaign-grid { grid-template-columns: 1fr 1fr; gap: 18px; } }
@media(max-width:600px){ .campaign-grid { grid-template-columns: 1fr; } }

/* ============================================================
   ÜRÜN KARTI GALERİ GEZİNME (ürüne girmeden foto kaydır)
============================================================ */
.product-img { position: relative; }
.card-gallery { position: relative; width: 100%; height: 100%; }
.product-img-link { display: block; width: 100%; height: 100%; }
.card-gallery img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.card-gallery img.active { opacity: 1; position: relative; }
.card-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.92); border: none; font-size: 18px; color: var(--dark); cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: .25s; z-index: 3; box-shadow: 0 2px 10px -3px rgba(0,0,0,.3); }
.card-nav.prev { left: 8px; }
.card-nav.next { right: 8px; }
.product-card:hover .card-nav { opacity: 1; }
.card-nav:hover { background: var(--dark); color: #fff; }
.card-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; z-index: 3; }
.card-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.6); transition: .2s; }
.card-dots span.on { background: #fff; width: 16px; border-radius: 3px; }
@media(max-width:768px){ .card-nav { opacity: 1; width: 28px; height: 28px; font-size: 15px; top: 58%; z-index: 2; } }

/* ============================================================
   TOAST BİLGİ BARI (sepete/favoriye ekleme bildirimi)
============================================================ */
.toast-wrap { position: fixed; top: 90px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast { background: var(--dark); color: #fff; padding: 14px 22px; border-radius: 12px; font-size: 14px; font-weight: 500; box-shadow: 0 12px 32px -10px rgba(0,0,0,.45); display: flex; align-items: center; gap: 10px; min-width: 240px; max-width: 360px; opacity: 0; transform: translateX(40px); transition: .35s cubic-bezier(.16,1,.3,1); pointer-events: auto; }
.toast.show { opacity: 1; transform: translateX(0); }
.toast::before { content: ''; width: 22px; height: 22px; flex-shrink: 0; background-size: contain; background-repeat: no-repeat; }
.toast-success { background: var(--dark); }
.toast-success::before { content: '✓'; display: flex; align-items: center; justify-content: center; background: #3b7a57; border-radius: 50%; font-size: 13px; font-weight: 700; }
.toast-error { background: #7a2e2e; }
.toast-error::before { content: '!'; display: flex; align-items: center; justify-content: center; background: #c0392b; border-radius: 50%; font-size: 13px; font-weight: 700; }
.toast-info::before, .toast-warning::before { content: 'i'; display: flex; align-items: center; justify-content: center; background: var(--tan); border-radius: 50%; font-size: 13px; font-weight: 700; }
@media(max-width:600px){ .toast-wrap { top: auto; bottom: 80px; right: 12px; left: 12px; } .toast { min-width: 0; max-width: none; } }

/* Hesabım içi favori grid (sidebar yanında) */
.account-fav-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media(min-width:1100px){ .account-fav-grid { grid-template-columns: repeat(3, 1fr); } }
@media(max-width:600px){ .account-fav-grid { grid-template-columns: 1fr 1fr; gap: 12px; } }

/* ============================================================
   HESABIM — ADRESLER
============================================================ */
.addr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 28px; }
.addr-card { border: 1px solid var(--border); border-radius: 14px; padding: 18px; transition: .2s; }
.addr-card.is-default { border-color: var(--tan); background: var(--cream-light); }
.addr-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.addr-card-head strong { font-size: 15px; color: var(--dark); }
.addr-badge { font-size: 11px; background: var(--tan); color: #fff; padding: 2px 9px; border-radius: 50px; font-weight: 600; }
.addr-body { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; margin-bottom: 12px; }
.addr-actions { display: flex; gap: 14px; }
.addr-actions form { margin: 0; }
.addr-link { background: none; border: none; font-size: 13px; color: var(--tan-dark); cursor: pointer; font-weight: 600; padding: 0; }
.addr-link:hover { text-decoration: underline; }
.addr-del { color: #c0392b; }
.addr-empty { grid-column: 1/-1; padding: 24px; text-align: center; color: var(--text-muted); border: 1px dashed var(--border); border-radius: 14px; }
.addr-form-card { border: 1px solid var(--border); border-radius: 16px; padding: 24px; }
.addr-form-card h3 { font-family: var(--font-head); font-size: 22px; font-weight: 500; margin-bottom: 18px; color: var(--dark); }
.addr-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media(max-width:700px){ .addr-grid, .addr-form-row { grid-template-columns: 1fr; } }

/* ============================================================
   HESABIM — GELİŞMİŞ (özet, hediye çeki, destek, iade)
============================================================ */
/* Özet istatistik kartları */
.acc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.acc-stat { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 16px; }
.acc-stat-ic { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.acc-stat-ic svg { width: 22px; height: 22px; }
.acc-stat-lbl { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.acc-stat-val { display: block; font-size: 24px; font-weight: 700; color: var(--dark); }
.acc-welcome { background: var(--cream-light); border-radius: 14px; padding: 18px 20px; font-size: 14px; line-height: 1.6; color: var(--text); margin-bottom: 22px; }

/* Hediye çekleri */
.gift-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.gift-card { position: relative; background: linear-gradient(135deg, var(--dark), #2c2620); color: #fff; border-radius: 16px; padding: 22px; overflow: hidden; }
.gift-card.used { opacity: .55; }
.gift-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.gift-label { font-size: 11px; letter-spacing: .12em; opacity: .7; }
.gift-amount { font-size: 26px; font-weight: 700; color: var(--tan); }
.gift-code { font-family: monospace; font-size: 18px; letter-spacing: 2px; padding: 8px 12px; background: rgba(255,255,255,.1); border-radius: 8px; display: inline-block; margin-bottom: 14px; }
.gift-meta { display: flex; gap: 16px; font-size: 12px; opacity: .75; }
.gift-used-badge { position: absolute; top: 14px; right: -28px; background: #c0392b; color: #fff; font-size: 11px; padding: 3px 30px; transform: rotate(45deg); }

/* Destek/iade talebi listesi */
.ticket-list { display: flex; flex-direction: column; gap: 10px; }
.ticket-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; transition: .2s; }
a.ticket-row:hover { border-color: var(--tan); box-shadow: 0 6px 18px -12px rgba(31,41,55,.2); }
.ticket-code { font-size: 12px; color: var(--text-muted); margin-left: 8px; }
.ticket-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 12px; }
.ticket-status { font-size: 11px; font-weight: 600; padding: 3px 11px; border-radius: 50px; }
.status-open, .status-pending { background: #fef3c7; color: #b45309; }
.status-answered, .status-approved { background: #dbeafe; color: #1d4ed8; }
.status-closed, .status-completed { background: #dcfce7; color: #15803d; }
.status-rejected { background: #fee2e2; color: #b91c1c; }

/* Destek chat */
.chat-thread { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
.chat-msg { display: flex; flex-direction: column; max-width: 80%; }
.chat-msg.from-user { align-self: flex-end; align-items: flex-end; }
.chat-msg.from-admin { align-self: flex-start; }
.chat-bubble { padding: 12px 16px; border-radius: 14px; font-size: 14px; line-height: 1.5; }
.from-user .chat-bubble { background: var(--dark); color: #fff; border-bottom-right-radius: 4px; }
.from-admin .chat-bubble { background: var(--cream-light); color: var(--text); border-bottom-left-radius: 4px; }
.chat-time { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

@media(max-width:700px){ .acc-stats { grid-template-columns: 1fr 1fr; } .gift-grid { grid-template-columns: 1fr; } }

/* ============================================================
   MODERN FORM ELEMANLARI (input, textarea, select / dropdown)
============================================================ */
.account-content .form-control,
.addr-form-card .form-control,
.card-box .form-control,
.form-control {
  width: 100%;
  padding: 14px 18px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  font-size: 14.5px;
  font-family: var(--font-body);
  background: var(--cream-light);
  color: var(--text);
  transition: .22s;
  line-height: 1.4;
}
.form-control:focus {
  outline: none;
  border-color: var(--tan);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(45,91,209,.12);
}
.form-control::placeholder { color: var(--text-light); }
textarea.form-control { resize: vertical; min-height: 110px; }

/* Select / dropdown — oval + özel ok */
select.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 46px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
}
select.form-control:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c9a877' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* Form label modern */
.account-content .form-group label,
.addr-form-card label,
.card-box .form-group label {
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 9px; font-weight: 600;
}

/* ============================================================
   SEPET SAYFASI — modern düzen
============================================================ */
.cart-layout { display: grid; grid-template-columns: 1fr 360px; gap: 28px; align-items: start; margin-bottom: 60px; }

/* Sol: ürün listesi */
.cart-items { display: flex; flex-direction: column; gap: 12px; }
.cart-item {
  display: grid;
  grid-template-columns: 90px 1fr auto auto auto;
  align-items: center;
  gap: 18px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  transition: .2s;
}
.cart-item:hover { box-shadow: 0 10px 30px -20px rgba(31,41,55,.22); }
.cart-img {
  width: 90px; height: 90px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--cream-light);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 28px;
}
.cart-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-info { min-width: 0; }
.cart-item-info a { font-size: 15px; font-weight: 500; color: var(--dark); display: block; margin-bottom: 6px; line-height: 1.3; }
.cart-item-info a:hover { color: var(--tan-dark); }
.cart-item-info > div { font-size: 13px; color: var(--text-muted); }

/* Adet kontrolü */
.cart-qty .qty-form { display: flex; align-items: center; border: 1.5px solid var(--border); border-radius: 50px; overflow: hidden; background: #fff; }
.qty-btn { width: 36px; height: 40px; border: none; background: transparent; font-size: 18px; cursor: pointer; color: var(--dark); transition: .15s; display: flex; align-items: center; justify-content: center; }
.qty-btn:hover { background: var(--cream-light); color: var(--tan-dark); }
.qty-input { width: 44px; height: 40px; border: none; text-align: center; font-size: 14px; font-weight: 600; color: var(--dark); background: transparent; -moz-appearance: textfield; }
.qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cart-item-total { font-size: 16px; font-weight: 600; color: var(--dark); white-space: nowrap; text-align: right; min-width: 90px; }
.btn-remove {
  width: 34px; height: 34px; border-radius: 50%;
  border: none; background: var(--cream-light);
  color: var(--text-muted); font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: .2s; flex-shrink: 0;
}
.btn-remove:hover { background: #fee2e2; color: #dc2626; }
.cart-items > form { margin-top: 8px; }

/* Sağ: özet kutusu */
.cart-summary-box { position: sticky; top: 90px; }
.summary-card { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 26px; box-shadow: 0 10px 36px -24px rgba(31,41,55,.22); }
.summary-card h3 { font-family: var(--font-head); font-size: 22px; font-weight: 500; color: var(--dark); margin-bottom: 20px; }
.summary-row { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; font-size: 14px; color: var(--text); border-bottom: 1px solid var(--border); }
.summary-row.discount { color: #16a34a; }
.summary-row.total { border-bottom: none; border-top: 2px solid var(--dark); margin-top: 6px; padding-top: 16px; font-size: 19px; font-weight: 700; color: var(--dark); }
.summary-card .btn-block { margin-top: 8px; }

/* Ücretsiz kargo barı */
.freeship-bar { background: var(--cream-light); border-radius: 12px; padding: 14px 16px; margin-bottom: 18px; }
.freeship-bar.done { background: #ecfdf5; }
.freeship-text { font-size: 13px; color: var(--text); margin-bottom: 8px; }
.freeship-track { height: 7px; background: rgba(0,0,0,.08); border-radius: 50px; overflow: hidden; }
.freeship-fill { height: 100%; background: linear-gradient(90deg, var(--tan), var(--tan-dark)); border-radius: 50px; transition: width .4s; }
.freeship-bar.done .freeship-text { margin-bottom: 0; }

@media(max-width:900px){
  .cart-layout { grid-template-columns: 1fr; }
  .cart-summary-box { position: static; }
}
@media(max-width:560px){
  .cart-item { grid-template-columns: 70px 1fr auto; grid-template-areas: "img info remove" "img qty total"; gap: 10px 14px; }
  .cart-img { width: 70px; height: 70px; grid-area: img; }
  .cart-item-info { grid-area: info; }
  .cart-qty { grid-area: qty; }
  .cart-item-total { grid-area: total; text-align: right; align-self: center; }
  .cart-item > form:last-child { grid-area: remove; justify-self: end; }
}

/* Çoklu banka hesabı (checkout) */
.bank-info .bank-acc { padding: 12px 0; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 14px; font-size: 13px; }
.bank-info .bank-acc:last-child { border-bottom: none; }
.bank-acc-logo { width: 48px; height: 48px; object-fit: contain; border-radius: 8px; background: #fff; padding: 4px; border: 1px solid var(--border); flex-shrink: 0; }
.bank-acc-info { display: flex; flex-direction: column; gap: 2px; }
.bank-acc-name { font-weight: 600; color: var(--dark); }

/* ============================================================
   BANKA HESAP BİLGİLERİ SAYFASI
============================================================ */
.page-bank-list { display: flex; flex-direction: column; gap: 14px; }
.page-bank-card { border: 1px solid var(--border); border-radius: 16px; background: var(--cream-light); overflow: hidden; transition: .2s; }
.page-bank-card:hover { box-shadow: 0 10px 30px -22px rgba(31,41,55,.25); }
/* Açılır başlık */
.page-bank-head { width: 100%; display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: none; border: none; cursor: pointer; text-align: left; }
.page-bank-logo { width: 88px; height: 56px; object-fit: contain; background: #fff; border-radius: 10px; padding: 8px; border: 1px solid var(--border); flex-shrink: 0; }
.page-bank-logo--ph { display: flex; align-items: center; justify-content: center; color: var(--tan); }
.page-bank-logo--ph svg { width: 28px; height: 28px; }
.page-bank-name { flex: 1; font-size: 17px; font-weight: 600; color: var(--dark); }
.page-bank-chev { width: 20px; height: 20px; color: var(--text-muted); transition: transform .3s; flex-shrink: 0; }
.page-bank-card.open .page-bank-chev { transform: rotate(180deg); }
/* Açılır gövde */
.page-bank-body { max-height: 0; overflow: hidden; transition: max-height .35s ease, padding .35s ease; padding: 0 20px; }
.page-bank-card.open .page-bank-body { max-height: 400px; padding: 0 20px 18px; }
.page-bank-row { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; font-size: 14px; color: var(--text-muted); border-top: 1px dashed var(--border); }
.page-bank-row span { flex-shrink: 0; }
.page-bank-row strong { color: var(--dark); text-align: right; word-break: break-all; }
.page-bank-iban { font-family: monospace; letter-spacing: .5px; cursor: pointer; }
.page-bank-iban:hover { color: var(--tan-dark); }
@media(max-width:560px){ .page-bank-head { gap: 12px; padding: 14px 16px; } .page-bank-logo { width: 70px; height: 48px; } .page-bank-name { font-size: 15px; } .page-bank-row { flex-direction: column; gap: 2px; } .page-bank-row strong { text-align: left; } }

/* ============ STOK BİLDİRİMİ ============ */
.stock-alert-box { background: var(--cream-light); border: 1px solid var(--border); border-radius: 14px; padding: 20px; margin: 16px 0; }
.stock-alert-head { display: flex; align-items: center; gap: 8px; color: #b45309; margin-bottom: 6px; }
.stock-alert-box p { font-size: 14px; color: var(--text-muted); margin-bottom: 14px; }
.stock-alert-row { display: flex; gap: 10px; }
.stock-alert-row .form-input { flex: 1; }
.stock-alert-msg { margin-top: 10px; font-size: 13px; }
.stock-alert-msg.ok { color: #16a34a; }
.stock-alert-msg.err { color: #dc2626; }

/* ============ BEDEN TABLOSU ============ */
.size-chart-box { border: 1px solid var(--border); border-radius: 12px; margin: 16px 0; overflow: hidden; }
.size-chart-box summary { padding: 14px 18px; cursor: pointer; font-weight: 600; color: var(--dark); display: flex; align-items: center; gap: 10px; list-style: none; }
.size-chart-box summary::-webkit-details-marker { display: none; }
.size-chart-box[open] summary { border-bottom: 1px solid var(--border); }
.size-chart-content { padding: 18px; font-size: 14px; line-height: 1.7; }
.size-chart-content table { width: 100%; border-collapse: collapse; }
.size-chart-content th, .size-chart-content td { border: 1px solid var(--border); padding: 8px 12px; text-align: center; }

/* ============ SORU & CEVAP ============ */
.qa-section { max-width: none; margin: 0; padding: 0; }
.qa-section h2 { font-family: var(--font-head); font-size: 28px; font-weight: 500; margin-bottom: 22px; color: var(--dark); }
.qa-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 30px; }
.qa-item { border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; background: #fff; }
.qa-q, .qa-a { display: flex; gap: 12px; }
.qa-a { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
.qa-badge { width: 28px; height: 28px; border-radius: 50%; background: var(--dark); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.qa-badge-a { background: var(--tan-dark); }
.qa-q p, .qa-a p { margin-top: 3px; color: var(--text); font-size: 14px; line-height: 1.6; }
.qa-form-box { background: var(--cream-light); border-radius: 16px; padding: 24px; }
.qa-form-box h3 { font-family: var(--font-head); font-size: 20px; margin-bottom: 16px; color: var(--dark); }
@media(max-width:560px){ .stock-alert-row { flex-direction: column; } .qa-section h2 { font-size: 22px; } }

/* ============ SOSYAL KANIT ROZETLERİ ============ */
.social-proof { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.sp-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 50px; }
.sp-hot { background: #fff1f0; color: #d4380d; }
.sp-view { background: #f0f5ff; color: #1d39c4; }
.sp-low { background: #fff7e6; color: #d46b08; animation: sp-pulse 2s infinite; }
@keyframes sp-pulse { 0%,100%{opacity:1} 50%{opacity:.65} }

/* Günün fırsatı sayacı — premium */
.deal-countdown { display: inline-flex; align-items: center; gap: 12px; background: linear-gradient(135deg, #1a1a2e, #16213e); border: 1px solid rgba(45,91,209,.3); padding: 16px 24px; border-radius: 14px; margin: 16px 0; box-shadow: 0 10px 30px -10px rgba(0,0,0,.4); }
.deal-label { font-size: 14px; font-weight: 600; color: #7db4ff; }
.countdown { font-family: var(--font-body); font-size: 22px; font-weight: 800; color: #fff; letter-spacing: .05em; text-shadow: 0 0 20px rgba(45,91,209,.5); }
/* ============ CANLI ARAMA SONUÇLARI ============ */
.search-live-results { margin-top: 16px; max-height: 380px; overflow-y: auto; display: none; }
.search-live-results.show { display: block; }
.slr-item { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 12px; transition: .15s; }
.slr-item:hover { background: var(--cream-light); }
.slr-item img, .slr-noimg { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; background: var(--cream-light); flex-shrink: 0; }
.slr-name { flex: 1; font-size: 14px; color: var(--dark); }
.slr-price { font-weight: 700; color: var(--tan-dark); font-size: 14px; white-space: nowrap; }
.slr-empty { padding: 20px; text-align: center; color: var(--text-muted); font-size: 14px; }

/* ============ SEPET ÇAPRAZ SATIŞ ============ */
.cart-suggest { margin-top: 40px; }
.cart-suggest h2 { font-family: var(--font-head); font-size: 24px; font-weight: 500; color: var(--dark); margin-bottom: 20px; }

/* ============ MİSAFİR → ÜYE DAVETİ ============ */
.guest-convert { margin-top: 30px; padding: 28px; background: var(--cream-light); border-radius: 18px; border: 1px solid var(--border); }
.gc-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--tan); color: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.gc-icon svg { width: 28px; height: 28px; }
.guest-convert h3 { font-family: var(--font-head); font-size: 22px; color: var(--dark); margin-bottom: 8px; }
.guest-convert p { font-size: 14px; color: var(--text-muted); margin-bottom: 18px; line-height: 1.6; }

/* ============ KART AKSİYON BUTONLARI (favori + karşılaştır) ============ */
.card-actions { position: absolute !important; top: 10px; right: 10px; left: auto; bottom: auto; display: flex !important; flex-direction: column !important; gap: 8px; z-index: 5; align-items: flex-end; }
.card-actions form { margin: 0; line-height: 0; width: 36px; height: 36px; flex: 0 0 36px; }
.card-actions button { padding: 0 !important; margin: 0; font-size: 0; }
.card-actions .product-fav,
.card-actions .product-cmp { position: static !important; top: auto !important; right: auto !important; opacity: 1; transform: none; width: 36px; height: 36px; min-width: 36px; max-width: 36px; max-height: 36px; padding: 0; flex: 0 0 36px; background: rgba(255,255,255,.97); border: 1px solid rgba(0,0,0,.06); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--dark); transition: .2s; box-shadow: 0 2px 6px rgba(0,0,0,.12); overflow: hidden; }
.product-card:hover .card-actions .product-fav,
.product-card:hover .card-actions .product-cmp { opacity: 1; transform: translateX(0); }
.card-actions .product-cmp:hover { background: var(--tan-dark); color: #fff; }
.card-actions .product-fav:hover { background: var(--dark); color: #fff; }
.card-actions .product-cmp svg,
.card-actions .product-fav svg { width: 16px; height: 16px; display: block; }
.card-actions .product-fav.active,
.card-actions .product-cmp.active { background: var(--tan-dark); color: #fff; opacity: 1; transform: translateX(0); }
/* Mobilde her zaman görünür */
@media(max-width:768px){
  .card-actions .product-fav,
  .card-actions .product-cmp { opacity: 1; transform: translateX(0); }
}

/* ============ HEMEN AL BUTONU ============ */
.btn-dark { background: var(--dark); color: #fff; border: none; }
.btn-dark:hover { background: #000; color: #fff; }
/* Mobilde buy-actions: Sepete Ekle + Hemen Al üst satır, ikonlar alt satır */
@media(max-width:560px){
  .buy-actions { grid-template-columns: 1fr 1fr; gap: 10px; }
  .btn-buy, .btn-buynow { font-size: 13.5px; padding: 16px 10px; }
  .btn-icon-action { width: 100%; height: 48px; }
}

/* ============ ÖDEME YÖNTEMİ SEÇİMİ ============ */
.payment-option {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; margin-bottom: 10px;
  border: 1.5px solid var(--border); border-radius: 14px;
  cursor: pointer; transition: .18s; font-size: 15px; font-weight: 500;
  background: #fff;
}
.payment-option:hover { border-color: var(--tan); background: var(--cream-light); }
.payment-option input[type="radio"] { width: 20px; height: 20px; accent-color: var(--tan-dark); cursor: pointer; flex-shrink: 0; }
.payment-option:has(input:checked), .payment-option.selected { border-color: var(--tan-dark); background: var(--cream-light); box-shadow: 0 0 0 3px rgba(45,91,209,.15); }

/* ============ GOOGLE İLE GİRİŞ ============ */
.auth-divider { display: flex; align-items: center; text-align: center; margin: 20px 0; color: var(--text-muted); font-size: 13px; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.auth-divider span { padding: 0 14px; }
.btn-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 13px; border: 1.5px solid var(--border); border-radius: 12px; background: #fff; color: var(--dark); font-size: 15px; font-weight: 600; cursor: pointer; transition: .2s; text-decoration: none; }
.btn-google:hover { border-color: var(--tan); background: var(--cream-light); }

/* ============ HAMBURGER + YAN MENÜ (DRAWER) ============ */
.hamburger-btn { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; border: none; background: transparent; cursor: pointer; color: var(--dark); padding: 0; margin-right: 4px; border-radius: 10px; transition: .2s; }
.hamburger-btn:hover { background: var(--cream-light); }
.hamburger-btn svg { width: 24px; height: 24px; }

.drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); opacity: 0; visibility: hidden; transition: .3s; z-index: 998; }
.drawer-overlay.open { opacity: 1; visibility: visible; }

.drawer { position: fixed; top: 0; left: 0; width: 86%; max-width: 360px; height: 100%; background: #fff; z-index: 999; transform: translateX(-100%); transition: transform .32s cubic-bezier(.4,0,.2,1); overflow-y: auto; box-shadow: 4px 0 30px rgba(0,0,0,.18); }
.drawer.open { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 22px 18px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: #fff; z-index: 2; }
.drawer-head span { font-family: var(--font-head); font-size: 19px; font-weight: 600; letter-spacing: .08em; color: var(--dark); }
.drawer-close { border: none; background: transparent; cursor: pointer; color: var(--dark); padding: 4px; display: flex; }

.drawer-nav { padding: 6px 0 40px; }
.drawer-link { display: flex; align-items: center; gap: 14px; padding: 15px 22px; color: var(--dark); text-decoration: none; font-size: 15.5px; font-weight: 500; border-bottom: 1px solid #f3f1ec; transition: .15s; }
.drawer-link:hover { background: var(--cream-light); }
.drawer-ic { width: 22px; height: 22px; flex-shrink: 0; color: var(--tan-dark); display: flex; align-items: center; justify-content: center; }
.drawer-ic svg { width: 20px; height: 20px; }

/* Kategori satırı — solda küçük görsel */
.drawer-cat { border-bottom: 1px solid #f3f1ec; }
.drawer-cat-main { position: relative; border-bottom: none; }
.drawer-cat-thumb { width: 38px; height: 38px; border-radius: 9px; overflow: hidden; flex-shrink: 0; background: var(--cream-light); display: flex; align-items: center; justify-content: center; }
.drawer-cat-thumb img { width: 100%; height: 100%; object-fit: cover; }
.drawer-cat-thumb svg { width: 19px; height: 19px; color: var(--tan-dark); }
.drawer-cat-name { flex: 1; }
.drawer-expand { border: none; background: transparent; padding: 8px; cursor: pointer; color: #9aa1ab; display: flex; transition: transform .25s; margin: -8px -8px -8px 0; }
.drawer-cat.open .drawer-expand { transform: rotate(90deg); }
.drawer-sub { max-height: 0; overflow: hidden; transition: max-height .3s ease; background: var(--cream-light); }
.drawer-cat.open .drawer-sub { max-height: 500px; }
.drawer-sub-link { display: block; padding: 12px 22px 12px 76px; color: var(--text); text-decoration: none; font-size: 14px; border-top: 1px solid #ece9e2; transition: .15s; }
.drawer-sub-link:hover { color: var(--tan-dark); padding-left: 80px; }

/* Hamburger sadece mobil/tablette görünür */
@media(max-width: 992px){
  .hamburger-btn { display: flex; }
  .main-nav { display: none; }   /* üst yatay menü gizlenir, drawer kullanılır */
}

/* Çok dar ekran: header sıkışmasını önle ama etiketleri KORU */
@media (max-width: 430px){
  .hdr-act-lbl { display: block; font-size: 9.5px; }
  .header-actions { gap: 13px; }
  .site-logo .logo-img { max-height: 32px; }
  .hamburger-btn { width: 36px; height: 36px; margin-right: 0; }
  .hdr-act svg { width: 20px; height: 20px; }
}

/* ============ MOBİL FİLTRE BARI (TRENDYOL TARZI) ============ */
.mobile-filter-bar { display: none; }
.filters-overlay { display: none; }
.filters-head { display: none; }

@media (max-width: 992px) {
  .mobile-filter-bar { display: flex; gap: 12px; margin-top: 20px; margin-bottom: 18px; align-items: stretch; }
  .mfb-btn { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 12px 20px; background: var(--dark); color: #fff; border: none; border-radius: 12px; font-size: 14.5px; font-weight: 600; cursor: pointer; }
  .mfb-sort { flex: 1; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 12px; background: #fff; font-size: 14px; font-family: inherit; }

  /* Filtreler paneli: alttan açılır */
  .filters { position: fixed; bottom: 0; left: 0; right: 0; max-height: 88vh; background: #fff; z-index: 1000; transform: translateY(100%); visibility: hidden; transition: transform .32s cubic-bezier(.4,0,.2,1), visibility 0s linear .32s; overflow-y: auto; border-radius: 22px 22px 0 0; box-shadow: 0 -10px 40px rgba(0,0,0,.2); padding: 0 20px 30px; }
  .filters.open { transform: translateY(0); visibility: visible; transition: transform .32s cubic-bezier(.4,0,.2,1), visibility 0s; }
  .filters-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 0 14px; position: sticky; top: 0; background: #fff; border-bottom: 1px solid var(--border); margin-bottom: 16px; z-index: 2; }
  .filters-head span { font-family: var(--font-head); font-size: 20px; font-weight: 600; color: var(--dark); }
  .filters-close { border: none; background: transparent; cursor: pointer; color: var(--dark); padding: 4px; display: flex; }

  .filters-overlay { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45); opacity: 0; visibility: hidden; transition: .3s; z-index: 999; }
  .filters-overlay.open { opacity: 1; visibility: visible; }

  /* Liste başındaki eski sıralama select'i mobilde gizle (mfb-sort var) */
  .list-header select { display: none; }
}

/* Drawer başlık logosu */
.drawer-logo { display: flex; align-items: center; text-decoration: none; }
.drawer-logo img { max-height: 38px; width: auto; }
.drawer-logo span { font-family: var(--font-head); font-size: 20px; font-weight: 700; color: var(--dark); letter-spacing: .02em; }

/* ============ ÜRÜN AÇIKLAMA KARTLARI ============ */
.detail-desc {
  background: var(--cream-light);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 20px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text);
  margin: 4px 0 14px;
}
.detail-full-desc {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 26px 28px;
  margin-top: 24px;
  line-height: 1.8;
  color: var(--text);
  font-size: 15px;
}
.detail-full-desc h3 {
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--cream-light);
}
@media(max-width:560px){
  .detail-full-desc { padding: 20px; border-radius: 14px; }
  .detail-desc { padding: 14px 16px; }
}

/* ============================================================
   MOBİL YATAY KAYMA DÜZELTMESİ — tüm cihazlara uyum
   Sticky header'ı bozmamak için overflow-x: CLIP (hidden DEĞİL);
   clip kaydırma kabı oluşturmaz → sticky + dikey kaydırma çalışır.
============================================================ */
@supports (overflow: clip) {
  @media (max-width: 1024px) {
    html, body { overflow-x: clip; }
  }
}
body { overflow-wrap: break-word; word-wrap: break-word; }
img, svg, video, iframe { max-width: 100%; }
iframe, video { height: auto; }

/* Kategori kartları mobil düzeltme */
@media (max-width: 420px) {
  .cat-circle-grid { gap: 10px; }
  .cat-circle span { font-size: 10.5px; padding: 10px 6px 11px; }
  .cat-circle span::after { display: none; }
  .cat-circle:hover span { padding-right: 6px; }
}

/* Geniş tablolar mobilde: sayfa yerine tablo kendi içinde yatay kayar */
@media (max-width: 768px) {
  .orders-table, .track-table, .compare-table {
    display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
}

/* Ürün açıklaması / sayfa içeriğindeki gömülü medya taşmasın */
.detail-full-desc img, .detail-full-desc iframe,
.detail-desc img, .detail-desc iframe,
.page-content img, .page-content iframe { max-width: 100%; height: auto; }

/* ============================================================
   ÜRÜN DETAY TABLARI
============================================================ */
.product-tabs { margin-top: 48px; }
.product-tabs-nav {
  display: flex; gap: 0;
  border-bottom: 2px solid var(--border);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.product-tabs-nav::-webkit-scrollbar { display: none; }
.tab-btn {
  position: relative;
  background: none; border: none; cursor: pointer;
  padding: 16px 28px;
  font-size: 14.5px; font-weight: 600;
  color: var(--text-muted); white-space: nowrap;
  letter-spacing: .01em;
  transition: color .25s;
  font-family: var(--font-body);
  display: inline-flex; align-items: center; gap: 9px;
  margin-bottom: -2px;
  border-bottom: 2px solid transparent;
}
.tab-btn svg { opacity: .5; transition: opacity .25s; flex-shrink: 0; }
.tab-btn:hover { color: var(--dark); }
.tab-btn:hover svg { opacity: .8; }
.tab-btn.active {
  color: var(--tan-dark);
  border-bottom-color: var(--tan-dark);
}
.tab-btn.active svg { opacity: 1; stroke: var(--tan-dark); }
.tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  background: var(--cream); color: var(--text-muted);
  border-radius: 50px; font-size: 11.5px; font-weight: 700;
  line-height: 1; margin-left: 2px;
  transition: background .25s, color .25s;
}
.tab-btn.active .tab-count {
  background: linear-gradient(135deg, var(--tan), var(--tan-dark));
  color: #fff;
}
.tab-panel {
  display: none;
  padding: 32px 0;
  animation: tabFadeIn .3s ease;
}
@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tab-panel.active { display: block; }
.tab-panel-body { line-height: 1.85; color: var(--text); font-size: 15px; }
.tab-panel-body img, .tab-panel-body iframe { max-width: 100%; height: auto; }
.tab-panel .qa-list,
.tab-panel .qa-form-box { max-width: none; }
@media (max-width: 700px) {
  .product-tabs-nav { gap: 0; }
  .tab-btn { padding: 14px 18px; font-size: 13px; gap: 7px; }
  .tab-btn svg { width: 16px; height: 16px; }
  .tab-count { min-width: 20px; height: 20px; font-size: 10.5px; }
  .tab-panel { padding: 24px 0; }
}
@media (max-width: 480px) {
  .tab-btn { padding: 12px 12px; font-size: 12px; gap: 5px; }
  .tab-btn svg { width: 14px; height: 14px; }
}

/* Ürün kartı "Sepete Ekle": width:100% + left/right:12px sağa taşırıyordu → ortala */
.product-add { width:auto; }

/* ============================================================
   HESABIM PANELİ — GENEL DÜZENLEME
   ============================================================ */

/* Sayfa başlığı hesap sayfalarında sola hizalı ve ölçülü */
.account-layout { margin-top: 6px; }
.account-content > .page-title,
.container > .page-title { margin-bottom: 22px; }

/* --- İçerik kartı --- */
.account-content .panel-card {
  background: #fff; border: 1px solid var(--border); border-radius: 16px;
  padding: 0; overflow: hidden; margin-bottom: 22px;
  box-shadow: 0 8px 30px -24px rgba(31,41,55,.25);
}
.account-content .panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 22px; border-bottom: 1px solid var(--border); background: var(--cream-light);
}
.account-content .panel-head h3 { font-size: 17px; margin: 0; color: var(--dark); font-family: var(--font-head); }
.account-content .panel-body { padding: 22px; }

/* --- Tablolar (sipariş, iade, hediye çeki) --- */
.orders-table, .account-content table.data-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: #fff; border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
  box-shadow: 0 8px 30px -24px rgba(31,41,55,.25);
}
.orders-table thead th, .account-content table.data-table thead th {
  background: var(--cream-light); color: var(--text-muted);
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.orders-table tbody td, .account-content table.data-table tbody td {
  padding: 16px 18px; border-bottom: 1px solid var(--border);
  font-size: 14.5px; color: var(--text); vertical-align: middle;
}
.orders-table tbody tr:last-child td,
.account-content table.data-table tbody tr:last-child td { border-bottom: none; }
.orders-table tbody tr { transition: background .18s; }
.orders-table tbody tr:hover { background: #fbf9f5; }
.orders-table td:first-child { font-weight: 600; color: var(--dark); }
.orders-table td:last-child, .orders-table th:last-child { text-align: right; }

/* --- Durum rozetleri --- */
.account-content .badge,
.orders-table .badge {
  display: inline-block; padding: 5px 13px; border-radius: 50px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
  background: var(--cream); color: var(--text);
}
.badge.status-pending, .badge.status-open      { background: #fef3c7; color: #b45309; }
.badge.status-confirmed, .badge.status-preparing { background: #e0e7ff; color: #4338ca; }
.badge.status-shipped, .badge.status-answered, .badge.status-approved { background: #dbeafe; color: #1d4ed8; }
.badge.status-delivered, .badge.status-closed, .badge.status-completed { background: #dcfce7; color: #15803d; }
.badge.status-cancelled, .badge.status-rejected, .badge.status-refunded { background: #fee2e2; color: #b91c1c; }

/* --- Butonlar (panel içi) --- */
.account-content .btn-sm { padding: 8px 16px; font-size: 13px; border-radius: 9px; }

/* --- Sipariş detay: özet kutusu --- */
.order-summary { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.order-summary .sum-row {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 7px 0; font-size: 14.5px; color: var(--text);
}
.order-summary .sum-row.total {
  margin-top: 8px; padding-top: 14px; border-top: 1px dashed var(--border);
  font-size: 17px; font-weight: 700; color: var(--dark);
}
.order-summary .sum-row.discount span:last-child { color: #15803d; }

/* --- Adres / bilgi kutusu --- */
.info-box {
  background: var(--cream-light); border: 1px solid var(--border);
  border-radius: 13px; padding: 16px 18px; line-height: 1.85; font-size: 14.5px;
}
.info-box strong { color: var(--dark); }

/* --- Boş durum --- */
.account-content .empty-state p, .account-content .big-empty p {
  color: var(--text-muted); font-size: 15px; margin: 14px 0 18px;
}
.account-content .big-empty-icon svg { width: 54px; height: 54px; color: var(--beige-soft); }

/* --- Destek konuşma balonları --- */
.chat-thread { display: flex; flex-direction: column; gap: 16px; margin: 4px 0 8px; }
.chat-msg { display: flex; flex-direction: column; max-width: 78%; }
.chat-msg.from-user { align-self: flex-start; align-items: flex-start; }
.chat-msg.from-admin { align-self: flex-end; align-items: flex-end; }
.chat-bubble {
  padding: 13px 17px; border-radius: 15px; font-size: 14.5px; line-height: 1.65;
  background: var(--cream-light); color: var(--text); border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.chat-msg.from-admin .chat-bubble {
  background: linear-gradient(135deg, var(--tan), var(--tan-dark));
  color: #fff; border-color: transparent;
  border-bottom-left-radius: 15px; border-bottom-right-radius: 4px;
}
.chat-time { font-size: 11.5px; color: var(--text-light); margin-top: 5px; }

/* --- Sayfalama --- */
.account-content .pagination { display: flex; gap: 6px; justify-content: center; margin-top: 24px; }
.account-content .pagination a {
  min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 10px; font-size: 14px; color: var(--text); background: #fff;
}
.account-content .pagination a:hover { border-color: var(--tan); color: var(--tan-dark); }
.account-content .pagination a.active {
  background: linear-gradient(135deg, var(--tan), var(--tan-dark)); color: #fff; border-color: transparent;
}

/* --- Mobil: tabloyu kart görünümüne çevir --- */
@media (max-width: 700px) {
  .orders-table { border: none; box-shadow: none; background: transparent; }
  .orders-table thead { display: none; }
  .orders-table, .orders-table tbody, .orders-table tr, .orders-table td { display: block; width: 100%; }
  .orders-table tr {
    background: #fff; border: 1px solid var(--border); border-radius: 14px;
    padding: 14px 16px; margin-bottom: 12px;
  }
  .orders-table tbody td {
    border: none; padding: 6px 0; display: flex; justify-content: space-between;
    align-items: center; gap: 14px; text-align: right;
  }
  .orders-table tbody td::before {
    content: attr(data-label); font-size: 12px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--text-muted); text-align: left;
  }
  .orders-table td:last-child { justify-content: flex-end; padding-top: 12px; }
  .chat-msg { max-width: 92%; }
}

/* Kampanya içeriklerinden gösterilen açılış duyurusu */
.campaign-popup { position:fixed; inset:0; z-index:1200; display:grid; place-items:center; padding:24px; }
.campaign-popup[hidden] { display:none; }
.campaign-popup__backdrop { position:absolute; inset:0; background:rgba(13,25,45,.72); backdrop-filter:blur(5px); }
.campaign-popup__dialog { position:relative; z-index:1; width:min(100%,800px); min-height:410px; max-height:calc(100vh - 48px); overflow:auto; display:grid; grid-template-columns:minmax(280px,46%) minmax(0,1fr); background:#fff; border:1px solid rgba(255,255,255,.38); border-radius:8px; box-shadow:0 32px 90px rgba(3,12,27,.52); }
.campaign-popup__dialog--text { display:block; min-height:0; max-width:560px; }
.campaign-popup__image { width:100%; height:100%; min-height:410px; object-fit:cover; background:#e9f3f0; }
.campaign-popup__content { position:relative; display:flex; min-height:410px; flex-direction:column; justify-content:center; padding:44px 44px 38px; background:#fcfdfd; }
.campaign-popup__eyebrow { display:flex; align-items:center; gap:8px; margin-bottom:15px; color:#607187; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.campaign-popup__eyebrow span { width:30px; height:2px; background:#0f766e; }
.campaign-popup__badge { align-self:flex-start; margin-bottom:14px; padding:5px 9px; border:1px solid #b8dfd4; border-radius:4px; background:#f0faf7; color:#0f766e; font-size:11px; font-weight:700; line-height:1; }
.campaign-popup__content h2 { margin:0 38px 14px 0; color:#17233d; font-family:'Cormorant Garamond',serif; font-size:37px; font-weight:600; line-height:1.06; }
.campaign-popup__content p { max-width:330px; margin:0 0 28px; color:#526174; font-size:14px; line-height:1.75; }
.campaign-popup__footer { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.campaign-popup__action { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:42px; padding:10px 15px; border:1px solid #17233d; border-radius:5px; background:#17233d; color:#fff; font:700 13px/1 'Jost',sans-serif; text-decoration:none; cursor:pointer; transition:background .2s,transform .2s,border-color .2s; }
.campaign-popup__action span { font-size:18px; line-height:12px; }

.campaign-popup__action:hover { background:#0f766e; border-color:#0f766e; color:#fff; transform:translateY(-1px); }

.campaign-popup__date { color:#718096; font-size:11px; }
.campaign-popup__close { position:absolute; z-index:3; top:14px; right:14px; width:38px; height:38px; display:grid; place-items:center; padding:0; border:2px solid #fff; border-radius:50%; background:#17233d; color:#fff; cursor:pointer; box-shadow:0 4px 15px rgba(3,12,27,.28); transition:background .2s,transform .2s; }
.campaign-popup__close span { display:block; font-family:Arial,sans-serif; font-size:27px; font-weight:300; line-height:30px; transform:translateY(-1px); }
.campaign-popup__close:hover { background:#0f766e; transform:rotate(90deg); }
.campaign-popup__close:focus-visible, .campaign-popup__action:focus-visible { outline:3px solid #86efcf; outline-offset:3px; }
@media (max-width:640px) { .campaign-popup { padding:14px; } .campaign-popup__dialog { display:block; min-height:0; max-width:430px; max-height:calc(100vh - 28px); } .campaign-popup__image { display:block; min-height:0; max-height:225px; aspect-ratio:16/9; } .campaign-popup__content { min-height:0; padding:30px 24px 28px; } .campaign-popup__content h2 { margin-right:32px; font-size:31px; } .campaign-popup__close { top:10px; right:10px; width:36px; height:36px; } }
.gift-card-checkout { padding:22px; border:1px solid var(--border); border-radius:18px; background:#fff; box-shadow:0 10px 36px -24px rgba(31,41,55,.22); }
.gift-card-checkout h3 { margin:0 0 12px; color:#17233d; font-size:15px; }

.cart-gift-card { margin:12px 0; padding:12px; border:1px solid #b8dfd4; border-radius:6px; background:#f7fcfa; }
.cart-gift-card label { display:block; margin-bottom:7px; color:#17233d; font-size:12px; font-weight:700; }
.cart-gift-card .form-input { min-width:0; flex:1; }
.cart-gift-card__selected { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:9px; color:#0f766e; font-size:12px; }
.cart-gift-card__remove { padding:0; border:0; background:none; color:#526174; font-size:12px; text-decoration:underline; cursor:pointer; }

.gift-card-checkout .form-input { min-width:0; flex:1; }
.gift-card-checkout__selected { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; color:#0f766e; font-size:12px; }
.gift-card-checkout__remove { padding:0; border:0; background:none; color:#526174; font-size:12px; text-decoration:underline; cursor:pointer; }

/* Checkout: özet/ödeme solda, teslimat bilgileri sağda. */
.checkout-layout--organized { display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,.92fr); gap:22px; align-items:start; }
.checkout-left-column { display:grid; grid-column:2; gap:14px; }
.checkout-order-form { display:contents; }
.checkout-payment-section { grid-column:2; }
.checkout-address-section { grid-column:1; grid-row:1 / span 3; }
.checkout-error { grid-column:2; }
.checkout-layout--organized .checkout-section { margin:0; }
.checkout-layout--organized .checkout-address-section { position:sticky; top:18px; }
.checkout-layout--organized .checkout-section h3 { margin-bottom:16px; }
.payment-options { display:grid; gap:8px; }
.checkout-layout--organized .form-consent { margin:18px 0 14px; font-size:13px; line-height:1.55; }
.checkout-layout--organized .form-consent label { display:flex; gap:8px; align-items:flex-start; cursor:pointer; }
.checkout-layout--organized .form-consent input { margin-top:3px; }
@media (max-width:900px) { .checkout-layout--organized { grid-template-columns:1fr; } .checkout-payment-section, .checkout-address-section { grid-column:1; grid-row:auto; } .checkout-address-section { position:static; } }
.checkout-summary-product { display:grid; grid-template-columns:52px minmax(0,1fr) auto; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid #edf0f4; }
.checkout-summary-product__image { width:52px; height:52px; display:block; object-fit:cover; border:1px solid #e4e9ef; border-radius:6px; background:#f7f9fb; }
.checkout-summary-product__fallback { display:grid; place-items:center; color:#718096; font-size:10px; font-weight:700; }
.checkout-summary-product__info { min-width:0; display:grid; gap:3px; }
.checkout-summary-product__info strong { overflow:hidden; color:#17233d; font-size:13px; font-weight:700; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.checkout-summary-product__info span, .checkout-summary-product__info small { overflow:hidden; color:#718096; font-size:11px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.checkout-summary-product__total { color:#17233d; font-size:13px; white-space:nowrap; }
.checkout-summary-product + hr { margin-top:12px; }
@media (max-width:420px) { .checkout-summary-product { grid-template-columns:46px minmax(0,1fr); } .checkout-summary-product__image { width:46px; height:46px; } .checkout-summary-product__total { grid-column:2; justify-self:start; } }
/* Adres ve fatura formu */
.address-page-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:20px; }
.address-page-heading h2 { margin:0 0 5px; font-size:20px; color:var(--dark); }
.address-page-heading p { margin:0; color:var(--text-muted); font-size:13px; }
.addr-card { border-radius:8px; background:#fff; }
.addr-card.is-default { border-color:var(--primary); background:#fff; box-shadow:0 4px 14px rgba(23,35,61,.06); }
.addr-invoice-summary { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:0 0 14px; padding-top:10px; border-top:1px solid var(--border); font-size:12px; color:var(--text-muted); }
.addr-invoice-summary span { color:var(--primary); font-weight:700; }
.addr-edit { display:contents; }
.addr-edit summary { list-style:none; cursor:pointer; color:var(--tan-dark); font-size:13px; font-weight:600; }
.addr-edit summary::-webkit-details-marker { display:none; }
.addr-edit[open] { flex-basis:100%; order:2; }
.addr-edit .address-form { width:100%; margin-top:14px; padding-top:16px; border-top:1px solid var(--border); }
.address-form-section { padding:0 0 18px; margin-bottom:18px; border-bottom:1px solid var(--border); }
.address-form-section:last-of-type { border-bottom:0; }
.address-form-section h4 { margin:0 0 14px; color:var(--dark); font-size:15px; }
.invoice-type-options { display:flex; gap:10px; margin:0 0 16px; }
.invoice-type-options label { position:relative; flex:1; margin:0 !important; cursor:pointer; }
.invoice-type-options input { position:absolute; opacity:0; pointer-events:none; }
.invoice-type-options span { display:block; padding:11px 12px; border:1px solid var(--border); border-radius:6px; text-align:center; color:var(--text-muted); font-size:13px; font-weight:700; transition:.18s; }
.invoice-type-options input:checked + span { border-color:var(--primary); background:#17233d; color:#fff; }
.invoice-corporate[hidden], .invoice-individual[hidden] { display:none; }
.checkout-invoice-fields { margin:20px 0; padding-top:18px; border-top:1px solid var(--border); }
.checkout-invoice-fields h4 { margin:0 0 14px; font-size:15px; color:var(--dark); }
@media(max-width:700px) { .address-page-heading { align-items:start; } .invoice-type-options { gap:8px; } }.invoice-address-toggle { margin:18px 0 12px; padding-top:16px; border-top:1px solid var(--border); }
.invoice-address-toggle label { display:flex; align-items:center; gap:8px; margin:0 !important; color:var(--dark) !important; font-size:13px !important; font-weight:700 !important; letter-spacing:0 !important; text-transform:none !important; cursor:pointer; }
.invoice-address-toggle input { width:16px; height:16px; accent-color:#17233d; }
.invoice-address-fields { padding:16px; border:1px solid var(--border); border-radius:6px; background:#fafbfd; }
.invoice-address-fields[hidden] { display:none; }
/* Kategori sayısı değişse de kart ölçüsünü sabit tut. */
.cat-circle-grid { align-items: flex-start; }
.cat-circle { flex: 0 0 160px; width: 160px; }
.cat-circle-img { width: 132px; }
@media (max-width: 700px) {
  .cat-circle { flex-basis: 126px; width: 126px; }
  .cat-circle-img { width: 104px; }
}
/* Dairesel dış halkanın kaydırma alanında üstten kırpılmasını engelle. */
.cat-circle-grid { padding-top: 12px; }
/* Hover'daki yukarı hareket (-8px) ve dış halkanın taşması için güvenli alan. */
.cat-circle-grid { padding-top: 24px; }
/* Kategori etiketinde hover renk değişimi ve ok göstergesi kullanılmasın. */
.cat-circle:hover span { background: rgba(255,255,255,.82); color: var(--dark); border-color: rgba(31,70,173,.12); transform: none; }
.cat-circle span::after { display: none; }
/* Kategori etiketi için yumuşak, parlak hover vurgusu. */
.cat-circle:hover span { background: #eaf2ff; color: #17233d; border-color: #7da3f7; box-shadow: 0 5px 14px rgba(67,111,210,.16); }
/* Kategori satırında yatay kaydırma kullanılabilir kalsın, çubuk görünmesin. */
.cat-circle-grid:hover { scrollbar-width: none; }
.cat-circle-grid:hover::-webkit-scrollbar { display: none; }
/* Checkout mobil: masaüstü grid konumlarını sıfırla, tüm blokları tam genişlikte sırala. */
@media (max-width: 900px) {
  .checkout-layout--organized { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .checkout-left-column,
  .checkout-payment-section,
  .checkout-address-section,
  .checkout-error { grid-column: 1; grid-row: auto; min-width: 0; width: 100%; }
  .checkout-left-column { display: grid; gap: 14px; }
  .checkout-layout--organized .checkout-address-section { position: static; }
  .checkout-layout--organized .summary-card,
  .checkout-layout--organized .checkout-section,
  .checkout-layout--organized .gift-card-checkout { width: 100%; }
}
@media (max-width: 560px) {
  .checkout-layout--organized { gap: 14px; }
  .checkout-layout--organized .summary-card { padding: 20px 16px; border-radius: 12px; }
  .checkout-layout--organized .checkout-section { padding: 20px 16px; }
}
/* Son gezdiklerin: kategori başlığına uyumlu fakat daha kompakt. */
.recently-viewed .cat-head-ornate { margin-bottom: 28px; }
.recently-viewed .cat-head-ornate h2 { font-size: 28px; }
.recently-viewed { margin-bottom: 56px; }
@media (max-width: 600px) {
  .recently-viewed .cat-head-ornate h2 { font-size: 22px; }
  .recently-viewed { margin-bottom: 36px; }
}
/* Sipariş başarı ekranı */
.success-page { max-width: 1040px; padding-top: 48px; padding-bottom: 64px; }
.order-success { border: 1px solid #dce4ee; border-radius: 8px; background: #fff; box-shadow: 0 18px 44px rgba(23,35,61,.08); overflow: hidden; }
.order-success__hero { display:flex; align-items:center; gap:20px; padding:32px 36px 28px; border-bottom:1px solid #e9eef4; }
.order-success__check { display:grid; place-items:center; flex:0 0 54px; width:54px; height:54px; border-radius:50%; color:#fff; background:#16a36a; font-size:23px; box-shadow:0 7px 18px rgba(22,163,106,.22); }
.order-success__eyebrow { display:block; margin-bottom:4px; color:#16815a; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.order-success__hero h1 { margin:0; color:#17233d; font-size:30px; letter-spacing:0; }
.order-success__hero p { margin:7px 0 0; color:#66758a; font-size:14px; line-height:1.55; }
.order-success__reference { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:18px; padding:18px 36px; background:#f7f9fc; border-bottom:1px solid #e9eef4; }
.order-success__reference div { display:grid; gap:3px; }
.order-success__reference div:last-child { text-align:right; }
.order-success__reference span { color:#758398; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.order-success__reference strong { color:#17233d; font-size:15px; }
.order-success__copy { width:34px; height:34px; display:grid; place-items:center; border:1px solid #dbe4f0; border-radius:6px; color:#4569b9; background:#fff; cursor:pointer; transition:.2s; }
.order-success__copy:hover, .order-success__copy.is-copied { color:#fff; background:#4569b9; border-color:#4569b9; }
.order-success__grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(240px,.75fr); gap:18px; padding:28px 36px; }
.order-success__panel { min-width:0; padding:20px; border:1px solid #e0e7ef; border-radius:7px; background:#fff; }
.order-success__panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.order-success__panel-head h2 { margin:0; color:#17233d; font-size:16px; letter-spacing:0; }
.order-success__panel-head > i { color:#4569b9; font-size:16px; }
.order-success__status { padding:5px 8px; border-radius:4px; color:#9a6500; background:#fff6d8; font-size:11px; font-weight:700; }
.order-success__status.is-paid { color:#087b54; background:#e8f7f0; }
.order-success__items { border-top:1px solid #edf1f5; }
.order-success__item { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid #edf1f5; }
.order-success__item-name { min-width:0; display:grid; gap:3px; }
.order-success__item-name strong { overflow:hidden; color:#26354b; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.order-success__item-name span, .order-success__item > span { color:#77869a; font-size:12px; }
.order-success__item > strong { color:#17233d; font-size:13px; white-space:nowrap; }
.order-success__more { padding-top:12px; color:#63738a; font-size:12px; }
.order-success__payment { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; color:#6c7b90; font-size:13px; }
.order-success__payment i { margin-right:6px; color:#4569b9; }
.order-success__payment strong { color:#26354b; }
.order-success__delivery { display:grid; align-content:start; gap:6px; color:#66758a; font-size:13px; line-height:1.55; }
.order-success__delivery strong { color:#17233d; font-size:14px; }
.order-success__actions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; padding:0 36px 30px; }
.order-success__actions .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; }
.order-success__guest { display:flex; align-items:center; gap:14px; padding:18px 36px; border-top:1px solid #e7edf4; color:#607087; background:#f9fbfd; }
.order-success__guest > i { display:grid; place-items:center; flex:0 0 36px; width:36px; height:36px; border:1px solid #d5e1f0; border-radius:50%; color:#4569b9; }
.order-success__guest div { min-width:0; display:grid; gap:2px; }
.order-success__guest strong { color:#26354b; font-size:13px; }
.order-success__guest span { font-size:12px; }
.order-success__guest a { margin-left:auto; color:#3159ad; font-size:13px; font-weight:700; white-space:nowrap; }
@media (max-width: 700px) {
  .success-page { padding-top:24px; padding-bottom:32px; }
  .order-success__hero { align-items:flex-start; gap:14px; padding:24px 20px; }
  .order-success__check { flex-basis:44px; width:44px; height:44px; font-size:18px; }
  .order-success__hero h1 { font-size:24px; }
  .order-success__reference { grid-template-columns:1fr auto; gap:12px; padding:16px 20px; }
  .order-success__reference div:last-child { grid-column:1; text-align:left; }
  .order-success__copy { grid-column:2; grid-row:1 / span 2; }
  .order-success__grid { grid-template-columns:1fr; gap:12px; padding:18px 20px; }
  .order-success__panel { padding:16px; }
  .order-success__actions { padding:0 20px 24px; }
  .order-success__actions .btn { width:100%; }
  .order-success__guest { align-items:flex-start; padding:16px 20px; }
  .order-success__guest a { margin-left:0; }
}
/* Başarı ekranı ikonları: ikon fontuna bağlı olmadan her ortamda görünür. */
.order-success__check svg { width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.order-success__copy svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.order-success__panel-icon { width:19px; height:19px; fill:none; stroke:#4569b9; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.order-success__inline-icon { width:15px; height:15px; vertical-align:-3px; margin-right:6px; fill:none; stroke:#4569b9; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.order-success__button-icon { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
/* Sipariş takip ekranı */
.order-track-page { max-width:1040px; padding-top:28px; padding-bottom:64px; }
.order-track-hero { display:flex; align-items:center; gap:18px; max-width:760px; margin:0 auto 28px; text-align:left; }
.order-track-hero__icon { display:grid; place-items:center; flex:0 0 52px; width:52px; height:52px; border:1px solid #cddcf0; border-radius:50%; color:#315eb9; background:#f2f6ff; }
.order-track-hero__icon svg { width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.order-track-hero > div:last-child > span { display:block; margin-bottom:4px; color:#315eb9; font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.order-track-hero h1 { margin:0; color:#17233d; font-size:30px; letter-spacing:0; }
.order-track-hero p { margin:7px 0 0; color:#68778c; font-size:14px; line-height:1.55; }
.order-track-shell { display:grid; align-items:start; gap:20px; }
.order-track-search, .order-track-result { border:1px solid #dce5ef; border-radius:8px; background:#fff; box-shadow:0 12px 34px rgba(23,35,61,.05); }
.order-track-search { padding:24px; }
.order-track-search h2 { margin:0 0 6px; color:#17233d; font-size:18px; letter-spacing:0; }
.order-track-search > p { margin:0 0 20px; color:#718096; font-size:13px; line-height:1.55; }
.order-track-form { display:grid; gap:4px; }
.order-track-form .form-group { margin-bottom:12px; }
.order-track-form label { color:#526277; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.order-track-form .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; }
.order-track-form .btn svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.order-track-error { display:flex; align-items:flex-start; gap:8px; margin:0 0 16px; padding:11px; border:1px solid #f3c9c5; border-radius:6px; color:#a03932; background:#fff5f4; font-size:12px; line-height:1.45; }
.order-track-error svg { flex:0 0 16px; width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.order-track-result { overflow:hidden; }
.order-track-result__head { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:22px 24px; border-bottom:1px solid #e8edf3; background:#f8fafc; }
.order-track-result__head div { display:grid; gap:3px; }
.order-track-result__head span { color:#728197; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.order-track-result__head h2 { margin:0; color:#17233d; font-size:18px; letter-spacing:0; }
.order-track-result__head > strong { color:#17233d; font-size:18px; white-space:nowrap; }
.order-track-progress { display:grid; grid-template-columns:repeat(5,1fr); gap:0; padding:26px 24px 20px; overflow:hidden; }
.order-track-step { position:relative; display:grid; justify-items:center; gap:8px; min-width:0; color:#94a1b2; font-size:10px; font-weight:700; line-height:1.3; text-align:center; }
.order-track-step::before { content:''; position:absolute; top:10px; left:0; width:50%; height:2px; background:#dce4ed; }
.order-track-step::after { content:''; position:absolute; top:10px; right:0; width:50%; height:2px; background:#dce4ed; }
.order-track-step:first-child::before, .order-track-step:last-child::after { display:none; }
.order-track-step.is-done::before, .order-track-step.is-done::after { background:#38a67c; }
.order-track-step i { position:relative; z-index:1; display:grid; place-items:center; width:22px; height:22px; border:2px solid #dce4ed; border-radius:50%; color:#fff; background:#fff; font-size:12px; font-style:normal; }
.order-track-step.is-done { color:#2d8666; }
.order-track-step.is-done i { border-color:#38a67c; background:#38a67c; }
.order-track-step.is-current i { box-shadow:0 0 0 4px rgba(56,166,124,.15); }
.order-track-state { display:grid; gap:4px; margin:22px 24px 4px; padding:14px; border:1px solid #f1d092; border-radius:6px; color:#865907; background:#fff9e9; font-size:13px; }
.order-track-state span { color:#8a7346; font-size:12px; line-height:1.5; }
.order-track-result__details { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(220px,.85fr); gap:18px; padding:20px 24px; }
.order-track-result__details section { min-width:0; padding:16px; border:1px solid #e2e8f0; border-radius:6px; }
.order-track-result__details h3 { margin:0 0 12px; color:#17233d; font-size:14px; letter-spacing:0; }
.order-track-items > div { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:10px; padding:10px 0; border-top:1px solid #edf1f5; }
.order-track-items > div:first-child { border-top:0; padding-top:0; }
.order-track-items span { display:grid; min-width:0; gap:3px; }
.order-track-items strong { overflow:hidden; color:#26354b; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.order-track-items small, .order-track-items em { color:#78879a; font-size:11px; font-style:normal; }
.order-track-items b { color:#17233d; font-size:12px; white-space:nowrap; }
.order-track-address { display:grid; gap:5px; color:#6b7a8e; font-size:12px; line-height:1.5; }
.order-track-address strong { color:#26354b; font-size:13px; }
.order-track-cargo { display:flex; align-items:center; gap:6px; margin-top:6px; padding-top:10px; border-top:1px solid #edf1f5; color:#315eb9; font-weight:700; }
.order-track-cargo svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.order-track-meta { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 18px; padding:15px 24px; border-top:1px solid #e8edf3; color:#718096; font-size:12px; }
.order-track-meta strong { color:#344359; }
@media (max-width:760px) { .order-track-page { padding-top:20px; padding-bottom:36px; } .order-track-hero { align-items:flex-start; margin-bottom:20px; } .order-track-hero h1 { font-size:24px; } .order-track-shell { grid-template-columns:1fr; gap:14px; } .order-track-search { padding:20px; } .order-track-result__head, .order-track-result__details, .order-track-meta { padding-left:18px; padding-right:18px; } .order-track-progress { padding:22px 12px 18px; } .order-track-step { font-size:9px; } .order-track-result__details { grid-template-columns:1fr; gap:12px; } }
@media (max-width:420px) { .order-track-hero { gap:12px; } .order-track-hero__icon { flex-basis:42px; width:42px; height:42px; } .order-track-result__head { align-items:flex-start; flex-direction:column; gap:8px; } .order-track-progress { padding-left:6px; padding-right:6px; } .order-track-step { font-size:8px; } .order-track-items > div { grid-template-columns:minmax(0,1fr) auto; } .order-track-items b { grid-column:2; } }
/* Sipariş takip başlığını içerik alanının soluna hizala. */
.order-track-hero { max-width: none; margin: 0 0 28px; }
@media (max-width: 760px) { .order-track-hero { margin: 0 0 20px; } }
/* Sepet satırı AJAX ile güncellendiğinde kısa görsel geri bildirim. */
.cart-item-updated { animation: cartItemUpdate .45s ease-out; }
@keyframes cartItemUpdate { 0% { background:#edf5ff; } 100% { background:#fff; } }