/* Ana sayfa — özel ürün slider + görselli kategori vitrini */

/* Beyaz buton (hero için) */
.btn-light { background: #fff; color: #09090b; box-shadow: var(--shadow-sm); }
.btn-light:hover { background: #f4f4f5; transform: translateY(-1px); }

/* ============ HERO — ÖZEL ÜRÜN SLIDER ============ */
.hero-pro { padding-top: 1.25rem; }
.hp-frame {
  position: relative; border-radius: var(--radius-premium); overflow: hidden;
  background:
    radial-gradient(120% 120% at 85% 15%, color-mix(in srgb, var(--ac, #e41111) 22%, transparent), transparent 55%),
    linear-gradient(120deg, #0a0a0f 0%, #16161d 55%, #23232c 100%);
  color: #fff; box-shadow: var(--shadow-lg); isolation: isolate;
  transition: background .6s var(--ease);
}
.hp-frame::before {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 22px 22px; pointer-events: none;
}
.hp-stage { position: relative; min-height: 25rem; }
@media (min-width: 768px) { .hp-stage { min-height: 27rem; } }

.hp-slide {
  position: absolute; inset: 0; z-index: 1;
  display: grid; grid-template-columns: 1fr; align-items: center;
  gap: 1rem; padding: 2rem 1.5rem;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), visibility .5s;
}
.hp-slide.active { opacity: 1; visibility: visible; transform: none; }
@media (min-width: 860px) {
  .hp-slide { grid-template-columns: 1.05fr .95fr; gap: 2rem; padding: 3rem 3.5rem; }
}

.hp-info { position: relative; z-index: 2; max-width: 34rem; order: 2; }
@media (min-width: 860px) { .hp-info { order: 1; } }
.hp-badge {
  display: inline-flex; align-items: center; gap: .35rem; font-size: 11px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: #fff;
  background: color-mix(in srgb, var(--ac, #e41111) 90%, #000); border-radius: 9999px;
  padding: .4rem .85rem; margin-bottom: 1rem; box-shadow: 0 6px 18px color-mix(in srgb, var(--ac, #e41111) 45%, transparent);
}
.hp-brand { font-size: 12px; font-weight: 900; letter-spacing: .22em; text-transform: uppercase; color: #d4d4d8; margin-bottom: .4rem; }
.hp-title { font-size: clamp(1.5rem, 3.4vw, 2.5rem); font-weight: 850; line-height: 1.08; letter-spacing: -.03em; }
.hp-title a { color: #fff; }
.hp-title a:hover { color: #fca5a5; }
.hp-desc { margin: .9rem 0 1.1rem; font-size: 14px; line-height: 1.6; color: #a1a1aa; max-width: 30rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hp-price { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.hp-old { font-size: 15px; color: #71717a; text-decoration: line-through; }
.hp-new { font-size: clamp(1.6rem, 3.2vw, 2.2rem); font-weight: 900; letter-spacing: -.02em; }
.hp-inst { display: inline-flex; align-items: center; gap: .35rem; margin-top: .5rem; font-size: 12px; color: #d4d4d8; }
.hp-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.hp-trust { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.4rem; }
.hp-trust span { display: inline-flex; align-items: center; gap: .35rem; font-size: 11px; font-weight: 600; color: #a1a1aa; }
.hp-trust .icon { color: color-mix(in srgb, var(--ac, #e41111) 60%, #fff); }

.hp-visual {
  position: relative; z-index: 1; order: 1; display: grid; place-items: center;
  aspect-ratio: 16/11; min-height: 12rem;
}
@media (min-width: 860px) { .hp-visual { order: 2; aspect-ratio: auto; height: 100%; } }
.hp-visual img {
  position: relative; z-index: 2; max-width: 82%; max-height: 20rem; object-fit: contain;
  filter: drop-shadow(0 30px 45px rgba(0,0,0,.55));
  animation: hp-float 6s ease-in-out infinite;
}
@media (min-width: 860px) { .hp-visual img { max-height: 22rem; } }
.hp-glow {
  position: absolute; inset: 0; z-index: 1; margin: auto; width: 72%; aspect-ratio: 1; border-radius: 9999px;
  background: radial-gradient(circle, color-mix(in srgb, var(--ac, #e41111) 55%, transparent), transparent 62%);
  filter: blur(10px);
}
.hp-ring {
  position: absolute; inset: 0; z-index: 1; margin: auto; width: 64%; aspect-ratio: 1; border-radius: 9999px;
  border: 1px dashed color-mix(in srgb, var(--ac, #e41111) 40%, transparent);
  animation: hp-spin 26s linear infinite;
}
@keyframes hp-float { 0%,100% { transform: translateY(-6px); } 50% { transform: translateY(6px); } }
@keyframes hp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hp-visual img, .hp-ring { animation: none; } }

/* Oklar */
.hp-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; display: none;
  width: 2.75rem; height: 2.75rem; border-radius: 9999px; place-items: center;
  background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(6px); transition: all .2s var(--ease);
}
@media (min-width: 860px) { .hp-arrow { display: grid; } }
.hp-arrow:hover { background: #fff; color: #09090b; }
.hp-prev { left: 1rem; } .hp-next { right: 1rem; }

/* Progress — stage ile ray arasında ince ilerleme ayracı */
.hp-progress { position: relative; z-index: 4; height: 3px; background: rgba(255,255,255,.12); }
.hp-progress > span { display: block; height: 100%; width: 0; background: var(--ac, #e41111); transition: width .1s linear; }

/* Çoklu-ürün küçük resim rayı */
.hp-rail {
  position: relative; z-index: 4; display: flex; gap: .55rem;
  padding: .7rem; background: rgba(0,0,0,.32);
  overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.3) transparent;
}
.hp-rail::-webkit-scrollbar { height: 6px; }
.hp-rail::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 9999px; }
.hp-thumb {
  flex: 0 0 auto; scroll-snap-align: start; display: flex; align-items: center; gap: .6rem;
  width: 13rem; max-width: 62vw; padding: .5rem .7rem; text-align: left; cursor: pointer;
  border-radius: 1rem; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.05); color: #fff;
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.hp-thumb:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); transform: translateY(-2px); }
.hp-thumb.active { background: color-mix(in srgb, var(--ac, #e41111) 24%, #000); border-color: var(--ac, #e41111); }
.hp-thumb-media { flex: 0 0 auto; width: 2.9rem; height: 2.9rem; border-radius: .7rem; background: #fff; display: grid; place-items: center; overflow: hidden; }
.hp-thumb-media img { max-width: 88%; max-height: 88%; object-fit: contain; }
.hp-thumb-info { display: flex; flex-direction: column; min-width: 0; }
.hp-thumb-name { font-size: 12px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 8.5rem; }
.hp-thumb-price { font-size: 12px; font-weight: 800; color: #fca5a5; margin-top: .15rem; }
.hp-thumb.active .hp-thumb-price { color: #fff; }
@media (min-width: 860px) {
  .hp-rail { padding: .8rem 1rem; gap: .7rem; }
  .hp-thumb { width: calc((100% - 3.5rem) / 6); max-width: none; }
  .hp-thumb-name { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .hp-thumb { scroll-snap-type: none; } }

/* ============ KATEGORİ VİTRİNİ — GÖRSELLİ (3×2 eşit) ============ */
.cat-showcase { display: grid; grid-template-columns: repeat(2, 1fr); gap: .85rem; }
@media (min-width: 700px) { .cat-showcase { grid-template-columns: repeat(3, 1fr); gap: 1.1rem; } }

.cat-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--radius-premium); border: 1px solid var(--border);
  background: linear-gradient(165deg, #fff 0%, #f1f4f9 100%);
  box-shadow: var(--shadow-sm); transition: transform .28s var(--ease), box-shadow .28s var(--ease);
  min-height: 14rem;
}
.cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.cat-media { position: relative; flex: 1; display: grid; place-items: center; padding: 1.25rem; min-height: 8rem; }
.cat-media img { position: relative; z-index: 2; max-width: 70%; max-height: 8rem; object-fit: contain; transition: transform .3s var(--ease); filter: drop-shadow(0 12px 20px rgba(9,9,11,.18)); }
.cat-card:hover .cat-media img { transform: scale(1.07) rotate(-2deg); }
.cat-glow {
  position: absolute; inset: 0; z-index: 1; margin: auto; width: 70%; aspect-ratio: 1; border-radius: 9999px;
  background: radial-gradient(circle, color-mix(in srgb, var(--ac, #e41111) 22%, transparent), transparent 65%);
}
.cat-icon {
  position: relative; z-index: 2; display: grid; place-items: center; width: 3.25rem; height: 3.25rem;
  border-radius: 1rem; background: var(--ac, #e41111); color: #fff;
}
.cat-info { position: relative; z-index: 2; padding: 0 1.25rem 1.25rem; }
.cat-count { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ac, #e41111); background: color-mix(in srgb, var(--ac, #e41111) 12%, #fff); padding: .3rem .6rem; border-radius: 9999px; margin-bottom: .5rem; }
.cat-name { font-size: 1.1rem; font-weight: 900; letter-spacing: -.02em; }
.cat-tag { font-size: 12px; color: var(--muted); margin-top: .2rem; }
.cat-link { display: inline-flex; align-items: center; gap: .35rem; margin-top: .75rem; font-size: 12px; font-weight: 800; color: var(--ac, #e41111); }
.cat-card:hover .cat-link .icon { transform: translateX(3px); transition: transform .2s var(--ease); }

/* Karanlık mod uyumu */
:root[data-theme="dark"] .cat-card { background: linear-gradient(165deg, #18181b 0%, #101014 100%); border-color: var(--border); }
:root[data-theme="dark"] .cat-count { background: color-mix(in srgb, var(--ac, #e41111) 22%, #000); }
:root[data-theme="dark"] .cat-name { color: #f4f4f5; }
:root[data-theme="dark"] .btn-light { background: #f4f4f5; color: #09090b; }

/* ============ SWIPER ÜRÜN CAROUSEL ============ */
.prod-swiper { position: relative; padding: .25rem .25rem 1rem; }
.prod-swiper .swiper-slide { height: auto; width: clamp(12.5rem, 58vw, 15rem); }
@media (min-width: 768px) { .prod-swiper .swiper-slide { width: 31%; } }
@media (min-width: 1024px) { .prod-swiper .swiper-slide { width: calc((100% - 3rem) / 4); } }
.prod-swiper .swiper-slide > .product-card { height: 100%; }
.ps-arrow {
  position: absolute; top: 42%; transform: translateY(-50%); z-index: 5; display: none;
  width: 2.75rem; height: 2.75rem; border-radius: 9999px; place-items: center;
  background: #fff; color: var(--fg); border: 1px solid var(--border); box-shadow: var(--shadow-md);
  transition: all .2s var(--ease);
}
@media (min-width: 1024px) { .ps-arrow { display: grid; } }
.ps-arrow:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.ps-arrow.swiper-button-disabled { opacity: 0; pointer-events: none; }
.ps-prev { left: -.5rem; } .ps-next { right: -.5rem; }
:root[data-theme="dark"] .ps-arrow { background: var(--surface); color: var(--fg); border-color: var(--border); }

/* ============ İSTATİSTİK SAYAÇ ŞERİDİ ============ */
.stats-band { padding: 1rem 0 2rem; }
.stats-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-premium); overflow: hidden;
}
@media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }
.stat-box { background: #fff; padding: 1.75rem 1.25rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .35rem; transition: background .2s; }
.stat-box:hover { background: var(--surface-subtle); }
.stat-ic { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 9999px; background: var(--primary-soft); color: var(--primary); margin-bottom: .35rem; }
.stat-num { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 900; letter-spacing: -.03em; line-height: 1; }
.stat-lbl { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
:root[data-theme="dark"] .stat-box { background: var(--surface); }

/* ============ MARKA ŞERİDİ (kayan) ============ */
.brand-marquee { position: relative; overflow: hidden; padding: 1.5rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: #fff; }
:root[data-theme="dark"] .brand-marquee { background: var(--surface); }
.bm-track { display: flex; gap: 3rem; width: max-content; animation: bm-scroll 32s linear infinite; }
.brand-marquee:hover .bm-track { animation-play-state: paused; }
@keyframes bm-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.bm-item { flex-shrink: 0; font-size: 1.35rem; font-weight: 900; letter-spacing: -.02em; color: var(--muted-light); transition: color .2s; }
.bm-item:hover { color: var(--primary); }
.bm-fade { position: absolute; top: 0; bottom: 0; width: 5rem; z-index: 2; pointer-events: none; }
.bm-fade-l { left: 0; background: linear-gradient(90deg, #fff, transparent); }
.bm-fade-r { right: 0; background: linear-gradient(270deg, #fff, transparent); }
:root[data-theme="dark"] .bm-fade-l { background: linear-gradient(90deg, var(--surface), transparent); }
:root[data-theme="dark"] .bm-fade-r { background: linear-gradient(270deg, var(--surface), transparent); }
@media (prefers-reduced-motion: reduce) { .bm-track { animation: none; flex-wrap: wrap; } }

/* ============ NEDEN BİZ ============ */
.why-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 1rem; }
@media (min-width: 560px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .why-grid { grid-template-columns: repeat(4, 1fr); } }
.why-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-premium); padding: 1.75rem 1.5rem; box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.why-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.why-ic { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 1.1rem; background: var(--fg); color: #fff; margin-bottom: 1.1rem; transition: all .25s var(--ease); }
.why-card:hover .why-ic { background: var(--primary); transform: rotate(-6deg) scale(1.06); }
.why-card h3 { font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; }
.why-card p { font-size: 13px; line-height: 1.6; color: var(--muted); margin-top: .5rem; }
:root[data-theme="dark"] .why-card { background: var(--surface); }

/* ============ MARKALAR — LOGO DUVARI ============ */
.brand-wall { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
@media (min-width: 560px) { .brand-wall { grid-template-columns: repeat(3, 1fr); gap: .9rem; } }
@media (min-width: 992px)  { .brand-wall { grid-template-columns: repeat(6, 1fr); gap: 1rem; } }

.bw-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
  min-height: 9.75rem; padding: 1.25rem 1.1rem 1rem; border-radius: 1.15rem;
  border: 1px solid var(--border);
  background: linear-gradient(165deg, #ffffff 0%, #f2f5fa 100%);
  box-shadow: 0 4px 16px -10px rgba(15, 23, 42, .35);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.bw-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 40px -20px color-mix(in srgb, var(--ac) 55%, rgba(15, 23, 42, .5));
  border-color: color-mix(in srgb, var(--ac) 45%, var(--border));
}
/* köşe aksan halesi */
.bw-card::before {
  content: ""; position: absolute; top: -40%; right: -30%; width: 75%; aspect-ratio: 1; border-radius: 9999px;
  background: radial-gradient(circle, color-mix(in srgb, var(--ac) 22%, transparent), transparent 68%);
  opacity: .0; transition: opacity .35s var(--ease); pointer-events: none;
}
.bw-card:hover::before { opacity: 1; }
/* alt aksan çizgisi */
.bw-card::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--ac); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.bw-card:hover::after { transform: scaleX(1); }
/* parıltı süpürme */
.bw-sheen {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 62%);
  transform: translateX(-120%); transition: opacity .1s;
}
.bw-card:hover .bw-sheen { opacity: 1; animation: bwSheen .8s var(--ease) forwards; }
@keyframes bwSheen { to { transform: translateX(120%); } }

.bw-logo { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; text-align: center; }
/* gerçek marka logosu — viewBox oranını koru, sabit yükseklik */
.bw-img { height: 2.75rem; width: auto; max-width: 82%; object-fit: contain; transition: transform .3s var(--ease); }
.bw-card.has-logo:hover .bw-img { transform: scale(1.07); }
.bw-mark {
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: .9rem;
  background: var(--ac); color: #fff; font-weight: 900; font-size: 1.4rem; line-height: 1;
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--ac) 70%, transparent);
  transition: transform .3s var(--ease);
}
.bw-card:hover .bw-mark { transform: translateY(-2px) rotate(-4deg) scale(1.05); }
.bw-word { font-size: clamp(1rem, 2.4vw, 1.2rem); font-weight: 800; letter-spacing: -.02em; color: #17171f; }
.bw-foot { position: relative; display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .9rem; }
.bw-count { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); }
.bw-link {
  display: inline-flex; align-items: center; gap: .25rem; font-size: 11.5px; font-weight: 800; color: var(--ac);
  opacity: 0; transform: translateX(-4px); transition: opacity .28s var(--ease), transform .28s var(--ease);
}
.bw-card:hover .bw-link { opacity: 1; transform: none; }

/* Monogram (logosuz) kartlar karanlık modda koyu panel */
:root[data-theme="dark"] .bw-card:not(.has-logo) {
  background: linear-gradient(165deg, #191920 0%, #101014 100%);
  border-color: #26262d; box-shadow: 0 6px 20px -12px rgba(0, 0, 0, .7);
}
:root[data-theme="dark"] .bw-card:not(.has-logo) .bw-word { color: #f4f4f5; }
/* Logolu kartlar — gerçek sitedeki gibi her iki temada da açık panel (renkli logolar okunsun) */
:root[data-theme="dark"] .bw-card.has-logo {
  background: linear-gradient(165deg, #ffffff 0%, #eef2f8 100%);
  border-color: #e2e6ee; box-shadow: 0 8px 22px -14px rgba(0, 0, 0, .8);
}
:root[data-theme="dark"] .bw-card.has-logo .bw-count { color: #6b7280; }
:root[data-theme="dark"] .bw-sheen { background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.14) 48%, transparent 62%); }
:root[data-theme="dark"] .bw-card.has-logo .bw-sheen { background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 62%); }

/* ============ KAMPANYA GÖRSELLİ PROMO ============ */
.kampanya-promo {
  display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: center;
  padding: 1.5rem; border-radius: var(--radius-premium); border: 1px solid var(--border);
  background: #fff; box-shadow: var(--shadow-sm);
}
@media (min-width: 820px) { .kampanya-promo { grid-template-columns: .85fr 1.15fr; gap: 2.5rem; padding: 2rem; } }
.kp-media { position: relative; border-radius: 1.25rem; overflow: hidden; box-shadow: var(--shadow-lg); line-height: 0; }
.kp-media img { width: 100%; height: auto; display: block; }
.kp-badge {
  position: absolute; top: 1rem; left: 1rem; display: inline-flex; align-items: center; gap: .35rem;
  font-size: 12px; font-weight: 800; color: #fff; background: var(--primary); padding: .4rem .8rem; border-radius: 9999px; box-shadow: var(--shadow-md);
}
.kp-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--primary); }
.kp-title { font-size: clamp(1.5rem, 3.4vw, 2.2rem); font-weight: 900; letter-spacing: -.03em; margin-top: .5rem; line-height: 1.12; }
.kp-desc { font-size: 14px; line-height: 1.65; color: var(--muted); margin-top: .75rem; max-width: 34rem; }
.kp-timer { margin-top: 1.25rem; }
.kp-timer-label { display: inline-flex; align-items: center; gap: .35rem; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: .5rem; }
.kp-boxes { display: flex; gap: .5rem; font-variant-numeric: tabular-nums; }
.kp-boxes > div { background: var(--surface-subtle); border: 1px solid var(--border); border-radius: .9rem; padding: .55rem .8rem; text-align: center; min-width: 3.8rem; }
.kp-boxes b { display: block; font-size: 1.3rem; font-weight: 900; color: var(--fg); }
.kp-boxes small { font-size: 10px; font-weight: 700; color: var(--muted); }
.kp-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
:root[data-theme="dark"] .kampanya-promo { background: var(--surface); }
:root[data-theme="dark"] .kp-boxes > div { background: color-mix(in srgb, var(--fg) 6%, transparent); }
:root[data-theme="dark"] .kp-boxes b { color: #f4f4f5; }

/* ============ CENTER GSM'İN FAVORİLERİ — TEMALI KOYU VİTRİN ============ */
.fav-showcase {
  position: relative; margin: 2.5rem 0; padding: 3rem 0; overflow: hidden; color: #fff;
  background:
    radial-gradient(120% 120% at 15% 10%, rgba(124,58,237,.35), transparent 55%),
    radial-gradient(120% 120% at 90% 90%, rgba(228,17,17,.28), transparent 55%),
    linear-gradient(135deg, #1b1140 0%, #221a4d 45%, #141032 100%);
}
.fav-showcase::before {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: .5; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size: 24px 24px;
}
.fav-showcase > .container { position: relative; z-index: 1; }
.fs-head { text-align: center; max-width: 40rem; margin: 0 auto 1.75rem; }
.fs-eyebrow { display: inline-flex; align-items: center; gap: .4rem; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #fca5a5; }
.fs-eyebrow .icon { color: #fbbf24; }
.fs-title { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 900; letter-spacing: -.03em; margin-top: .5rem; }
.fs-sub { font-size: 14px; line-height: 1.6; color: #c7c5e0; margin-top: .6rem; }

/* ============ TESLİMAT + ÖDEME ÇÖZÜMLERİ ============ */
.lp-wrap { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 820px) { .lp-wrap { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } }
.lp-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-premium); padding: 1.75rem 1.5rem; box-shadow: var(--shadow-sm); }
.lp-head { display: flex; align-items: flex-start; gap: .9rem; margin-bottom: 1.25rem; }
.lp-ic { flex: 0 0 auto; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: .9rem; background: var(--fg); color: #fff; }
.lp-head h3 { font-size: 1.1rem; font-weight: 900; letter-spacing: -.02em; }
.lp-head p { font-size: 13px; line-height: 1.55; color: var(--muted); margin-top: .3rem; }
.lp-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.lp-tile {
  display: grid; place-items: center; text-align: center; min-height: 3rem; padding: .5rem .4rem;
  border-radius: .9rem; border: 1px solid var(--border); background: var(--surface-subtle);
  font-size: 13px; font-weight: 800; letter-spacing: -.01em; color: var(--fg);
  transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.lp-tile:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.lp-tile-pay { color: #1a1a5e; }
.lp-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.lp-trust span { display: inline-flex; align-items: center; gap: .4rem; font-size: 12px; font-weight: 600; color: var(--muted); }
.lp-trust .icon { color: var(--primary); }
:root[data-theme="dark"] .lp-card { background: var(--surface); }
:root[data-theme="dark"] .lp-tile { background: color-mix(in srgb, var(--fg) 6%, transparent); color: #f4f4f5; }
:root[data-theme="dark"] .lp-tile-pay { color: #c7d2fe; }

/* ============ KOYU CTA BANDI ============ */
.cta-band {
  position: relative; overflow: hidden; text-align: center; color: #fff;
  padding: 3rem 1.5rem; border-radius: var(--radius-premium);
  background:
    radial-gradient(90% 130% at 50% -10%, rgba(228,17,17,.35), transparent 60%),
    linear-gradient(160deg, #101014 0%, #09090b 60%, #16121f 100%);
  box-shadow: var(--shadow-lg);
}
@media (min-width: 768px) { .cta-band { padding: 4rem 2rem; } }
.cta-glow { position: absolute; inset: 0; z-index: 0; margin: auto; width: 45%; aspect-ratio: 1; border-radius: 9999px; background: radial-gradient(circle, rgba(228,17,17,.28), transparent 62%); filter: blur(20px); pointer-events: none; }
.cta-band > * { position: relative; z-index: 1; }
.cta-eyebrow { font-size: 12px; font-weight: 900; letter-spacing: .24em; text-transform: uppercase; color: #f87171; }
.cta-title { font-size: clamp(1.7rem, 4.5vw, 2.8rem); font-weight: 900; letter-spacing: -.03em; margin-top: .6rem; line-height: 1.08; }
.cta-sub { font-size: 14px; line-height: 1.6; color: #a1a1aa; margin: .8rem auto 0; max-width: 34rem; }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-top: 1.75rem; }
.cta-pill {
  display: inline-flex; align-items: center; gap: .45rem; padding: .7rem 1.35rem; border-radius: 9999px;
  font-size: 14px; font-weight: 700; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(6px); transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.cta-pill:hover { background: var(--primary); border-color: var(--primary); transform: translateY(-2px); }
.cta-pill .icon { color: currentColor; }

/* ============ SİNEMATİK HERO BANNER SLIDER ============ */
.hero-cine { padding-top: 1.25rem; }
.hc-frame {
  position: relative; border-radius: var(--radius-premium); overflow: hidden;
  background: #0a0e1a; box-shadow: var(--shadow-lg); isolation: isolate;
}
.hc-stage { position: relative; min-height: 24rem; }
@media (min-width: 768px) { .hc-stage { min-height: 30rem; } }
@media (min-width: 1200px) { .hc-stage { min-height: 32rem; } }

.hc-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .7s var(--ease), visibility .7s; }
.hc-slide.active { opacity: 1; visibility: visible; }
.hc-bg {
  position: absolute; inset: 0; z-index: 0;
  background-image: var(--bgm); background-size: cover; background-position: center; background-repeat: no-repeat;
  transform: scale(1.06);
}
@media (min-width: 900px) { .hc-bg { background-image: var(--bgd); } }
.hc-slide.active .hc-bg { animation: hc-kenburns 9s ease-out forwards; }
@keyframes hc-kenburns { from { transform: scale(1.12); } to { transform: scale(1.0); } }
@media (prefers-reduced-motion: reduce) { .hc-slide.active .hc-bg { animation: none; transform: none; } }

.hc-content {
  position: relative; z-index: 2; max-width: 40rem; height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  padding: 2.5rem 1.75rem;
}
@media (min-width: 768px) { .hc-content { padding: 3.5rem 4rem; } }
.hc-badge {
  display: inline-flex; align-items: center; gap: .4rem; align-self: flex-start;
  font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #fff;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(6px);
  border-radius: 9999px; padding: .5rem 1rem; margin-bottom: 1.25rem;
}
.hc-badge .icon { color: color-mix(in srgb, var(--ac, #3aa0ff) 70%, #fff); }
.hc-title { font-size: clamp(2rem, 5.6vw, 3.6rem); font-weight: 850; line-height: 1.03; letter-spacing: -.04em; color: #fff; text-shadow: 0 4px 30px rgba(0,0,0,.5); }
.hc-accent { color: color-mix(in srgb, var(--ac, #3aa0ff) 55%, #fff); }
.hc-desc { margin: 1.1rem 0 1.75rem; font-size: 15px; line-height: 1.6; color: #d4d8e4; max-width: 30rem; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.hc-cta { align-self: flex-start; }

/* Oklar */
.hc-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; display: none;
  width: 3rem; height: 3rem; border-radius: 9999px; place-items: center;
  background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(8px); transition: all .2s var(--ease);
}
@media (min-width: 900px) { .hc-arrow { display: grid; } }
.hc-arrow:hover { background: #fff; color: #0a0e1a; }
.hc-prev { left: 1.25rem; } .hc-next { right: 1.25rem; }

/* Kontroller */
.hc-controls { position: absolute; left: 1.75rem; bottom: 1.5rem; z-index: 4; display: flex; align-items: center; gap: 1rem; }
@media (min-width: 768px) { .hc-controls { left: 4rem; } }
.hc-dots { display: flex; gap: .45rem; }
.hc-dots button { width: 1.8rem; height: .32rem; border-radius: 9999px; background: rgba(255,255,255,.3); transition: all .3s var(--ease); }
.hc-dots button.active { width: 2.8rem; background: var(--ac, #fff); }
.hc-counter { font-size: 11px; font-weight: 700; color: #cbd2e0; font-variant-numeric: tabular-nums; }
.hc-progress { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; height: 3px; background: rgba(255,255,255,.12); }
.hc-progress > span { display: block; height: 100%; width: 0; background: var(--ac, #3aa0ff); transition: width .1s linear; box-shadow: 0 0 12px var(--ac, #3aa0ff); }

/* Fotoğraf tabanlı hero slaytları (dikey görsel → TEK BÜTÜN full-bleed, dikiş yok) */
.hc-slide-photo { background: #0a0e1a; }
/* Mobil: dikey görsel (--bgm) merkeze yakın */
.hc-slide-photo .hc-bg { background-size: cover; background-position: center 42%; }
/* Masaüstü: yatay görsel (--bgd) tüm hero'yu tek bütün doldurur */
@media (min-width: 900px) {
  .hc-slide-photo .hc-bg { background-size: cover; background-position: center; }
}
/* Metin okunurluğu için soldan sağa GEÇİŞLİ karartma (sert dikiş değil) */
.hc-slide-photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(6,10,26,.95) 0%, rgba(6,10,26,.72) 30%, rgba(6,10,26,.28) 55%, rgba(6,10,26,0) 80%);
}

/* ============ KATEGORİ SIRASI (6'lı tek sıra, kompakt, animasyonlu) ============ */
.cat-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: .85rem; }
@media (min-width: 560px) { .cat-row { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
@media (min-width: 1100px) { .cat-row { grid-template-columns: repeat(6, 1fr); } }
.catr-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm); transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.catr-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.catr-count {
  position: absolute; top: .6rem; left: .6rem; z-index: 2; font-size: 10px; font-weight: 800;
  letter-spacing: .05em; color: var(--ac, #e41111); background: color-mix(in srgb, var(--ac,#e41111) 12%, #fff);
  padding: .26rem .55rem; border-radius: 9999px;
}
.catr-media {
  position: relative; aspect-ratio: 1/1; display: grid; place-items: center; padding: 1rem;
  background: linear-gradient(165deg, #fff 0%, #eef1f6 100%);
}
.catr-media img { max-width: 76%; max-height: 76%; object-fit: contain; transition: transform .35s var(--ease); filter: drop-shadow(0 10px 16px rgba(9,9,11,.16)); }
.catr-card:hover .catr-media img { transform: scale(1.09) rotate(-2deg); }
.catr-media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--ac, #e41111); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.catr-card:hover .catr-media::after { transform: scaleX(1); }
.catr-icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 1rem; background: var(--ac, #e41111); color: #fff; }
.catr-info { padding: .85rem 1rem 1.15rem; text-align: center; }
.catr-name { font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
.catr-tag { font-size: 12px; color: var(--muted); margin-top: .2rem; }
:root[data-theme="dark"] .catr-card { background: var(--surface); }
:root[data-theme="dark"] .catr-media { background: linear-gradient(165deg, #17171d 0%, #101014 100%); }
:root[data-theme="dark"] .catr-name { color: var(--fg); }

/* ============ YENİ KATEGORİLER — özel temalı vitrinler ============ */
.newcats .container { display: flex; flex-direction: column; gap: 1.5rem; }
.nc-band { position: relative; overflow: hidden; border-radius: 1.5rem; padding: 1.85rem 1.6rem 1.6rem; box-shadow: var(--shadow-lg); }
.nc-gaming { background: radial-gradient(130% 150% at 100% 0%, #3a1d6e 0%, #14112e 46%, #0a0a18 100%); }
.nc-tv { background: radial-gradient(130% 150% at 0% 0%, #0b3a6b 0%, #0b1830 46%, #070c1a 100%); }
.nc-glow { position: absolute; width: 22rem; height: 22rem; border-radius: 9999px; filter: blur(64px); opacity: .5; pointer-events: none; }
.nc-gaming .nc-glow { right: -5rem; top: -7rem; background: radial-gradient(circle, #a855f7, transparent 70%); }
.nc-tv .nc-glow { left: -5rem; top: -7rem; background: radial-gradient(circle, #22d3ee, transparent 70%); }
.nc-head { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 1.25rem; margin-bottom: 1.3rem; }
.nc-eyebrow { display: inline-flex; align-items: center; gap: .4rem; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); padding: .3rem .75rem; border-radius: 9999px; }
.nc-gaming .nc-eyebrow .icon { color: #d8b4fe; }
.nc-tv .nc-eyebrow .icon { color: #67e8f9; }
.nc-title { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 900; letter-spacing: -.03em; color: #fff; margin-top: .65rem; line-height: 1.05; }
.nc-sub { font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.72); margin-top: .45rem; max-width: 34rem; }
.nc-cta { display: inline-flex; align-items: center; gap: .4rem; font-size: 13px; font-weight: 800; color: #0a0a18; background: #fff; padding: .62rem 1.15rem; border-radius: 9999px; white-space: nowrap; flex-shrink: 0; transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.nc-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -10px rgba(255,255,255,.45); }
.nc-cta .icon { transition: transform .18s var(--ease); }
.nc-cta:hover .icon { transform: translateX(3px); }
.nc-band .prod-swiper, .nc-band .swiper { position: relative; z-index: 2; }
@media (max-width: 640px) { .nc-head { flex-direction: column; align-items: flex-start; } }