/* ═══════════════════════════════════════════════════════
   VELKRONE — main.css
   Tüm sayfalara ait stiller (index / hakkimizda / koleksiyonlar)
   ═══════════════════════════════════════════════════════ */


/* ╔══════════════════════════════════════╗
   ║  1. ORTAK SAYFA BİLEŞENLERİ         ║
   ╚══════════════════════════════════════╝ */

/* ── Ortak Page Hero ── */
.page-hero {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 48px 64px;
  overflow: hidden;
}

.page-hero-content {
  position: relative;
  z-index: 2;
}

.page-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 20px;
}

.page-title {
  font-family: 'Pirata One', serif;
  font-size: clamp(60px, 10vw, 130px);
  line-height: 0.9;
  color: #fff;
  letter-spacing: 0.01em;
}

/* ── Footer CTA (hakkımızda + koleksiyonlar) ── */
.footer-cta {
  text-align: center;
  padding: 120px 48px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.footer-cta-title {
  font-family: 'Pirata One', serif;
  font-size: clamp(40px, 7vw, 96px);
  margin-bottom: 32px;
  line-height: 1;
}

.footer-cta-link {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #000;
  background: #fff;
  text-decoration: none;
  padding: 16px 40px;
  border-radius: 50px;
  transition: background 0.25s, color 0.25s;
}

.footer-cta-link:hover { background: rgba(255,255,255,0.85); }


/* ╔══════════════════════════════════════╗
   ║  2. INDEX — ANASAYFA                ║
   ╚══════════════════════════════════════╝ */

body.page-index {
  overflow-y: scroll;
  width: 100vw;
}

/* ── Hero ── */
.hero {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-brand {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  line-height: 0;
  font-size: 0;
}

.hero-brand svg {
  display: block;
  width: 100%;
  height: 80vh;
  overflow: visible;
}

.hero-model {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  height: 92%;
  pointer-events: none;
}

.hero-model img {
  height: 100%;
  width: auto;
  object-fit: contain;
  object-position: top center;
  display: block;
  opacity: 1;
  transition: opacity 0.45s ease, filter 0.1s linear;
  will-change: filter;
}

.hero-model img.fade-out { opacity: 0; }

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.45) 100%);
  z-index: 3;
  pointer-events: none;
}

/* ── Tagline ── */
.tagline {
  position: absolute;
  bottom: 110px;
  left: 36px;
  z-index: 10;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  max-width: 160px;
  color: #fff;
}

/* ── Index Nav (animasyonlu) ── */
.page-index .nav-logo {
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  padding: 8px 0;
  transition: max-width 0.52s cubic-bezier(0.4,0,0.2,1),
              opacity    0.3s  ease 0.12s,
              padding    0.52s cubic-bezier(0.4,0,0.2,1);
}

.page-index .nav-bar.expanded .nav-logo {
  max-width: 140px;
  opacity: 1;
  padding: 8px 18px;
}

.page-index .nav-divider {
  width: 0;
  height: 20px;
  overflow: hidden;
  opacity: 0;
  transition: width  0.42s cubic-bezier(0.4,0,0.2,1) 0.08s,
              opacity 0.28s ease 0.22s,
              margin  0.42s cubic-bezier(0.4,0,0.2,1) 0.08s;
  margin: 0;
}

.page-index .nav-bar.expanded .nav-divider {
  width: 1px;
  opacity: 1;
  margin: 0 10px;
}

.page-index .nav-btns-wrap {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
}

/* Non-index sayfalarda model butonları gizle, site linkleri her zaman görünsün */
:not(.page-index) .nav-model-btns { display: none; }
:not(.page-index) .nav-site-btns  { opacity: 1; pointer-events: all; }

.page-index .nav-model-btns,
.page-index .nav-site-btns {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: opacity 0.32s ease;
  white-space: nowrap;
}

.page-index .nav-site-btns {
  opacity: 0;
  pointer-events: none;
}

.page-index .nav-bar.expanded .nav-model-btns { opacity: 0; pointer-events: none; }
.page-index .nav-bar.expanded .nav-site-btns  { opacity: 1; pointer-events: all; }

/* Mağaza — sağ taraf, logoyla aynı anda simetrik genişler */
.page-index .nav-logo-right {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  padding: 8px 0;
  border-radius: 40px;
  transition: max-width 0.52s cubic-bezier(0.4,0,0.2,1),
              opacity    0.3s  ease 0.12s,
              padding    0.52s cubic-bezier(0.4,0,0.2,1),
              color 0.25s,
              background 0.25s;
}

.page-index .nav-bar.expanded .nav-logo-right {
  max-width: 120px;
  opacity: 1;
  padding: 8px 20px;
}

.page-index .nav-bar.expanded .nav-logo-right:hover { color: #fff; background: rgba(255,255,255,0.08); }

/* Sağ ayırıcı — sol divider ile eş zamanlı */
.page-index .nav-divider-right {
  width: 0;
  height: 20px;
  overflow: hidden;
  opacity: 0;
  transition: width  0.42s cubic-bezier(0.4,0,0.2,1) 0.08s,
              opacity 0.28s ease 0.22s,
              margin  0.42s cubic-bezier(0.4,0,0.2,1) 0.08s;
  margin: 0;
}

.page-index .nav-bar.expanded .nav-divider-right {
  width: 1px;
  opacity: 1;
  margin: 0 10px;
}

/* Sepet & Profil ikonları */
.nav-icons-right {
  display: flex;
  align-items: center;
  gap: 2px;
}

.page-index .nav-icons-right {
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  transition: max-width 0.52s cubic-bezier(0.4,0,0.2,1),
              opacity    0.3s  ease 0.12s;
}

.page-index .nav-bar.expanded .nav-icons-right {
  max-width: 150px;
  opacity: 1;
  overflow: visible;
}

.nav-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.25s, background 0.25s;
  flex-shrink: 0;
}

.nav-icon-btn:hover { color: #fff; background: rgba(255,255,255,0.08); }

.nav-btn {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px 20px;
  border-radius: 40px;
  transition: background 0.25s, color 0.25s;
  white-space: nowrap;
}

.nav-btn:hover  { color: #fff; }
.nav-btn.active { background: #fff; color: #000; }

.nav-btn.plus {
  color: rgba(255,255,255,0.55);
  padding: 8px 16px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}

.nav-btn.plus:hover { color: #fff; }

/* ── Nav Popup ── */
.nav-popup {
  position: fixed;
  left: 50%;
  transform: translateX(-50%) scale(0.96) translateY(10px);
  z-index: 1500;
  width: min(560px, 88vw);
  background: rgba(35,35,35,0.68);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border-radius: 24px;
  padding: 36px 40px 30px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.34,1.26,0.64,1);
}

.nav-popup.open {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) scale(1) translateY(0);
}

.nav-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 28px;
}

.nav-popup-brand {
  font-family: 'Pirata One', serif;
  font-size: 20px;
  letter-spacing: 0.06em;
  color: #fff;
}

.nav-popup-tagline {
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255,255,255,0.85);
  text-align: right;
}

.nav-popup-links {
  display: flex;
  flex-direction: column;
}

.nav-popup-item {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 16px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  text-decoration: none;
  transition: opacity 0.2s;
}

.nav-popup-item:last-child { border-bottom: 1px solid rgba(255,255,255,0.1); }
.nav-popup-item:hover { opacity: 0.65; }

.nav-popup-thumb {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #1a1a1a;
}

.nav-popup-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: grayscale(100%);
}

.nav-popup-item-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 40px;
  letter-spacing: 0.04em;
  color: #fff;
  text-transform: uppercase;
  line-height: 1;
}

.nav-popup-social {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 26px;
}

.nav-popup-social a {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
  text-decoration: none;
  width: fit-content;
  transition: color 0.2s;
}

.nav-popup-social a:hover { color: #fff; }

/* ── About / Statement ── */
/* ╔══════════════════════════════════════╗
   ║  GOTİK TASARIM DİLİ                  ║
   ║  Tekrar kullanılabilir parçalar      ║
   ╚══════════════════════════════════════╝

   --kemik: saf beyaz yerine kırık/kemik tonu. Gotikte yüzeyler taş ve
   parşömendir; %100 beyaz steril ve dijital durur, ornamanları bu tonda
   tutmak sıcaklık verir ve metnin beyazından ayrışmalarını sağlar. */
:root {
  --kemik: #c8bfae;
  --kemik-sonuk: rgba(200, 191, 174, 0.34);
}

/* ── Sivri kemer ornamanı ── */
.orn-arch {
  display: block;
  width: clamp(52px, 5vw, 72px);
  height: auto;
  margin: 0 auto 30px;
  stroke: var(--kemik-sonuk);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

.orn-arch-in { stroke: rgba(200, 191, 174, 0.16); }

/* ── Ortasında baklava olan saç teli çizgi ── */
.orn-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: min(360px, 70%);
  margin: 0 auto;
}

.orn-rule::before,
.orn-rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,191,174,0.3));
}

.orn-rule::after { background: linear-gradient(90deg, rgba(200,191,174,0.3), transparent); }

.orn-rule i {
  width: 5px;
  height: 5px;
  flex-shrink: 0;
  background: var(--kemik);
  transform: rotate(45deg);
}

/* ── İki yanı çizgili bölüm etiketi ── */
.section-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 0 26px;
}

.section-label span {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.42em;      /* gotik yazıtların seyrek harf aralığı */
  text-transform: uppercase;
  color: var(--kemik);
  padding-left: 0.42em;        /* son harfin sağındaki boşluğu dengele */
}

.section-label::before,
.section-label::after {
  content: '';
  width: clamp(24px, 4vw, 52px);
  height: 1px;
  background: rgba(200,191,174,0.28);
}

/* ── Versal (drop cap) — tezhipli el yazması geleneği ── */
.dropcap {
  float: left;
  font-family: 'Pirata One', serif;
  font-size: 3.1em;
  line-height: 0.78;
  color: var(--kemik);
  margin: 0.04em 0.12em 0 0;
}

/* ╔══════════════════════════════════════╗
   ║  Manifesto bölümü                    ║
   ╚══════════════════════════════════════╝ */
/* DİKKAT: .manifesto adı hakkimizda.html'de zaten kullanılıyor
   (max-width:1100px'lik dev ifade paragrafı). Bu bölüm .beyan adını
   kullanır — aynı adı paylaşsalardı iki sayfa da birbirini bozardı. */
.beyan {
  position: relative;
  background: #000;
  padding: clamp(90px, 12vw, 165px) 40px clamp(80px, 10vw, 140px);
  overflow: hidden;
  z-index: 10;
}

/* Grain: gotik yüzeyler pürüzsüz değildir. feTurbulence ile ince bir
   baskı dokusu — düz siyahın dijital boşluğunu kırıyor. */
.beyan-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.32;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Dev soluk blackletter harf — sayfa hero'larındaki filigran diliyle aynı */
.beyan-sigil {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -48%);
  font-family: 'Pirata One', serif;
  /* Harf okunacak kadar küçük olmalı: daha büyükken sadece ortası görünüyor
     ve gri bir kütle gibi duruyordu, filigran olduğu anlaşılmıyordu. */
  font-size: clamp(230px, 29vw, 440px);
  line-height: 0.8;
  color: rgba(255,255,255,0.03);
  pointer-events: none;
  user-select: none;
}

.beyan-inner {
  position: relative;
  z-index: 1;
  max-width: 940px;
  margin: 0 auto;
  text-align: center;
}

.beyan-line {
  font-family: 'Pirata One', serif;
  font-size: clamp(38px, 6.4vw, 88px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: 0.012em;
  color: #fff;
  margin: 0 0 clamp(38px, 5vw, 60px);
  text-wrap: balance;
}

.beyan-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 68px);
  margin-top: clamp(40px, 5vw, 62px);
  text-align: left;
}

/* Sütunlar arası dikey saç teli — gotik mimarinin bölmeli düşeyliği */
.beyan-cols > p + p {
  position: relative;
  padding-left: clamp(32px, 5vw, 68px);
  margin-left: calc(-1 * clamp(32px, 5vw, 68px) / 2);
}

.beyan-cols > p + p::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: linear-gradient(180deg, rgba(200,191,174,0.22), transparent);
}

.beyan-cols p {
  font-size: clamp(13.5px, 1.05vw, 16px);
  line-height: 1.75;
  color: rgba(255,255,255,0.62);
  margin: 0;
}

/* Kemik çerçeveli, hover'da dolan buton — ornamanlarla aynı tonda ki
   bölümün içinden çıkmış görünsün, üstüne yapıştırılmış gibi durmasın. */
.beyan-btn {
  display: inline-block;
  margin-top: clamp(46px, 5.5vw, 68px);
  padding: 15px 44px;
  border: 1px solid rgba(200,191,174,0.32);
  border-radius: 40px;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--kemik);
  text-decoration: none;
  transition: background 0.26s, color 0.26s, border-color 0.26s;
}

.beyan-btn:hover {
  background: var(--kemik);
  color: #000;
  border-color: var(--kemik);
}

.beyan-btn:focus-visible {
  outline: 1px solid var(--kemik);
  outline-offset: 3px;
}

@media (max-width: 768px) {
  .beyan { padding-left: 24px; padding-right: 24px; }

  .beyan-cols {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }

  /* Tek sütunda dikey ayırıcı anlamsız kalıyor */
  .beyan-cols > p + p {
    padding-left: 0;
    margin-left: 0;
    padding-top: 26px;
  }

  .beyan-cols > p + p::before {
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, rgba(200,191,174,0.22), transparent);
  }
}

/* ── Categories ── */
/* ╔══════════════════════════════════════╗
   ║  Kategoriler — gotik triptik          ║
   ╚══════════════════════════════════════╝
   Kartlar sivri kemerle maskeleniyor: yan yana dizildiklerinde altar
   panosu / kilise penceresi hissi veriyor. Maske SVG clipPath ile
   (index.html'deki #vkKemer), çünkü border-radius sivri uç veremez. */
.kategoriler {
  position: relative;
  background: #000;
  padding: clamp(70px, 8vw, 110px) 40px clamp(90px, 11vw, 140px);
}

.kategoriler-bas {
  text-align: center;
  margin-bottom: clamp(48px, 6vw, 76px);
}

.kategoriler-baslik {
  font-family: 'Pirata One', serif;
  font-size: clamp(30px, 4.4vw, 58px);
  font-weight: 400;
  line-height: 1.1;
  color: #fff;
  margin: 0;
}

.kategoriler-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 30px);
  max-width: 1180px;
  margin: 0 auto;
}

.kat-kart {
  display: block;
  text-decoration: none;
  color: inherit;
}

.kat-gorsel {
  position: relative;
  display: block;
  aspect-ratio: 3/4;
  background: #111;
  clip-path: url(#vkKemer);
  overflow: hidden;
}

.kat-gorsel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: grayscale(45%) contrast(1.12) brightness(0.82);
  transition: transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94), filter 0.6s ease;
}

.kat-kart:hover .kat-gorsel img {
  transform: scale(1.06);
  filter: grayscale(0%) contrast(1.15) brightness(1);
}

/* Kemerin içini alttan karartan perde — ad her görselde okunur kalsın */
.kat-gorsel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 45%, rgba(0,0,0,0.6) 100%);
  pointer-events: none;
}

.kat-alt {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  padding-top: 18px;
  text-align: center;
}

.kat-ad {
  font-family: 'Pirata One', serif;
  font-size: clamp(19px, 1.8vw, 26px);
  letter-spacing: 0.03em;
  color: #fff;
  transition: color 0.25s;
}

.kat-kart:hover .kat-ad { color: var(--kemik); }

.kat-adet {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .kategoriler-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .kategoriler { padding-left: 24px; padding-right: 24px; }
  .kategoriler-grid { gap: 12px; }

  /* Tek sütuna düşürmüyoruz: kemer formu ikili dizilince de triptik
     ritmini koruyor, tek sütunda dev ve hantal görünüyor. */
  .kat-alt {
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding-top: 12px;
  }
}

/* ── Bestsellers ── */
/* ╔══════════════════════════════════════╗
   ║  Çok satanlar                        ║
   ╚══════════════════════════════════════╝
   Kartlar mağazadaki .product-card bileşeninin aynısı; burada sadece
   kaydırıcı içindeki genişlikleri veriliyor. Kart tasarımı tek yerde
   duruyor, iki sayfa aynı anda güncelleniyor. */
.bestsellers {
  background: #000;
  padding: 0 40px clamp(90px, 11vw, 130px);
}

.bestsellers-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-top: clamp(40px, 5vw, 60px);
  margin-bottom: clamp(36px, 4.5vw, 54px);
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* .section-label ortalanmış geliyor; başlıkta sola yaslıyoruz */
.bs-bas .section-label { justify-content: flex-start; margin-bottom: 16px; }
.bs-bas .section-label::before { display: none; }

.bestsellers-title {
  font-family: 'Pirata One', serif;
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 400;
  line-height: 1.05;
  color: #fff;
  margin: 0;
}

.bestsellers-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.bs-tumu {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kemik);
  text-decoration: none;
  padding: 0 14px 3px 0;
  border-bottom: 1px solid rgba(200,191,174,0.3);
  transition: color 0.22s, border-color 0.22s;
}

.bs-tumu:hover { color: #fff; border-color: #fff; }

.bs-arrow {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(200,191,174,0.24);
  border-radius: 50%;
  color: var(--kemik);
  cursor: pointer;
  transition: background 0.22s, color 0.22s, border-color 0.22s, opacity 0.22s;
}

.bs-arrow:hover:not(:disabled) { background: #fff; color: #000; border-color: #fff; }
.bs-arrow:disabled { opacity: 0.2; cursor: default; }

.bs-slider-wrap { overflow: hidden; position: relative; }

/* --bs-gorunen: aynı anda kaç kart görünecek. initBsSlider bu değeri
   buradan okuyor, böylece kırılım noktaları yalnızca CSS'te tanımlı. */
.bs-track {
  --bs-gorunen: 3;
  display: flex;
  gap: 44px;
  transition: transform 0.56s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.bs-item {
  flex: 0 0 calc((100% - (var(--bs-gorunen) - 1) * 44px) / var(--bs-gorunen));
  min-width: 0;
}

.bs-progress-wrap {
  margin-top: 26px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.bs-progress-bar {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.1);
  position: relative;
  overflow: hidden;
}

.bs-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--kemik);
  transition: width 0.56s cubic-bezier(0.4, 0, 0.2, 1);
}

.bs-progress-count {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .bs-track { --bs-gorunen: 2; gap: 28px; }
  .bs-item { flex-basis: calc((100% - 28px) / 2); }
}

@media (max-width: 600px) {
  .bestsellers { padding-left: 24px; padding-right: 24px; }

  /* 1.15 → sağdaki kartın kenarı görünür kalsın; kaydırılabildiği
     ok tuşlarına bakmadan anlaşılır */
  .bs-track { --bs-gorunen: 1.15; gap: 14px; }
  .bs-item { flex-basis: calc((100% - 14px) / 1.15); }

  .bestsellers-header { flex-direction: column; align-items: flex-start; gap: 18px; }
  .bs-tumu { margin-right: auto; }
}

/* ╔══════════════════════════════════════╗
   ║  3. HAKKIMIZDA                      ║
   ╚══════════════════════════════════════╝ */

/* ── Nav (statik) ── */
.page-hakkimizda .nav-bar,
.page-koleksiyonlar .nav-bar,
.page-magaza .nav-bar,
.page-urun .nav-bar,
.page-giris .nav-bar,
.page-hesabim .nav-bar {
  top: 20px;
}

.page-hakkimizda .nav-logo,
.page-koleksiyonlar .nav-logo,
.page-magaza .nav-logo,
.page-urun .nav-logo,
.page-giris .nav-logo,
.page-hesabim .nav-logo {
  max-width: none;
  opacity: 1;
  padding: 8px 18px;
  overflow: visible;
}

.page-hakkimizda .nav-divider,
.page-koleksiyonlar .nav-divider,
.page-magaza .nav-divider,
.page-urun .nav-divider,
.page-giris .nav-divider,
.page-hesabim .nav-divider {
  width: 1px;
  height: 20px;
  opacity: 1;
  margin: 0 10px;
  overflow: visible;
}

/* Nav-logo-right ve ikonlar diğer sayfalarda her zaman görünür */
.page-hakkimizda .nav-logo-right,
.page-koleksiyonlar .nav-logo-right,
.page-magaza .nav-logo-right,
.page-urun .nav-logo-right,
.page-giris .nav-logo-right,
.page-hesabim .nav-logo-right {
  max-width: none;
  opacity: 1;
  padding: 8px 20px;
  overflow: visible;
}

.page-hakkimizda .nav-icons-right,
.page-koleksiyonlar .nav-icons-right,
.page-magaza .nav-icons-right,
.page-urun .nav-icons-right,
.page-giris .nav-icons-right,
.page-hesabim .nav-icons-right {
  max-width: none;
  opacity: 1;
}

/* Ortak nav-logo-right stili (tüm sayfalar) */
.nav-logo-right {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  white-space: nowrap;
  border-radius: 40px;
  transition: background 0.25s, color 0.25s;
}

.nav-logo-right:hover { color: #fff; background: rgba(255,255,255,0.08); }
.nav-logo-right.active { background: #fff; color: #000; }
.nav-logo-right.active:hover { background: rgba(255,255,255,0.88); color: #000; }

/* ── Page Hero (hakkımızda) ── */
.page-hakkimizda .page-hero {
  min-height: 65vh;
}

.page-hakkimizda .page-eyebrow {
  color: rgba(255,255,255,0.4);
}

.page-hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, transparent 40%, rgba(0,0,0,0.9) 100%);
  z-index: 1;
}

.page-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  filter: grayscale(20%) contrast(1.1);
}

/* ── Sections ── */
.section {
  padding: 100px 48px;
  max-width: 1400px;
  margin: 0 auto;
}

.section-divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  border: none;
  margin: 0 48px;
  width: calc(100% - 96px);
}

.manifesto {
  font-size: clamp(26px, 3.8vw, 58px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  max-width: 1100px;
}

.values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 80px;
}

.value-card {
  background: #0d0d0d;
  padding: 48px 36px;
  border: 1px solid rgba(255,255,255,0.06);
}

.value-num {
  font-family: 'Pirata One', serif;
  font-size: 48px;
  color: rgba(255,255,255,0.08);
  margin-bottom: 24px;
  line-height: 1;
}

.value-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}

.value-text {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  color: rgba(255,255,255,0.5);
}

/* ╔══════════════════════════════════════╗
   ║  4. KOLEKSİYONLAR                  ║
   ╚══════════════════════════════════════╝ */

/* ── Page Hero (koleksiyonlar) ── */
.page-koleksiyonlar .page-hero {
  min-height: 55vh;
  background: #000;
}

.page-koleksiyonlar .page-eyebrow {
  color: rgba(255,255,255,0.35);
}

.page-subtitle {
  margin-top: 24px;
  font-size: clamp(14px, 1.2vw, 18px);
  font-weight: 400;
  color: rgba(255,255,255,0.4);
  max-width: 480px;
  line-height: 1.6;
}

.hero-bg-text {
  position: absolute;
  bottom: -20px;
  right: -10px;
  font-family: 'Pirata One', serif;
  font-size: 28vw;
  line-height: 1;
  color: rgba(255,255,255,0.03);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* ── Filter Bar ── */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 24px 48px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  overflow-x: auto;
  scrollbar-width: none;
}

.filter-bar::-webkit-scrollbar { display: none; }

.filter-btn {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
  padding: 8px 18px;
  border-radius: 40px;
  transition: background 0.22s, color 0.22s, border-color 0.22s;
  white-space: nowrap;
}

.filter-btn:hover { color: #fff; border-color: rgba(255,255,255,0.3); }
.filter-btn.active { background: #fff; color: #000; border-color: #fff; }

/* ── Featured Card ── */
.featured-wrap { padding: 48px 48px 0; }

.featured-card {
  position: relative;
  width: 100%;
  aspect-ratio: 16/7;
  overflow: hidden;
  background: #111;
  cursor: pointer;
}

.featured-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  filter: grayscale(20%) contrast(1.1);
  transition: transform 0.8s ease, filter 0.8s ease;
}

.featured-card:hover img { transform: scale(1.03); filter: grayscale(0%) contrast(1.15); }

.featured-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.7) 0%, transparent 55%);
  pointer-events: none;
}

.featured-info { position: absolute; left: 48px; bottom: 48px; z-index: 2; }

.featured-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 12px;
}

.featured-name {
  font-family: 'Pirata One', serif;
  font-size: clamp(28px, 4.5vw, 64px);
  line-height: 1;
  color: #fff;
  margin-bottom: 16px;
}

.featured-link {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #000;
  background: #fff;
  text-decoration: none;
  padding: 10px 24px;
  border-radius: 40px;
  transition: background 0.22s;
}

.featured-link:hover { background: rgba(255,255,255,0.85); }

/* ── Collection Grid ── */
.collection-grid-wrap {
  padding: 3px 48px 80px;
  margin-top: 3px;
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}

.col-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 2/3;
  background: #111;
  cursor: pointer;
}

.col-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  filter: grayscale(30%) contrast(1.1);
  transition: transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94), filter 0.7s ease;
}

.col-card:hover img { transform: scale(1.05); filter: grayscale(0%) contrast(1.15); }

.col-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.8) 100%);
  pointer-events: none;
}

.col-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 28px 24px;
  z-index: 2;
}

.col-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 8px;
}

.col-name {
  font-size: clamp(16px, 1.6vw, 22px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  margin-bottom: 10px;
}

.col-link {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  transition: color 0.25s, border-color 0.25s;
}

.col-card:hover .col-link { color: #fff; border-color: #fff; }

/* ── Band (2-kolon) ── */
.band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 0 48px;
}

.band-card {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #111;
  cursor: pointer;
}

.band-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(25%) contrast(1.1);
  transition: transform 0.7s ease, filter 0.7s ease;
}

.band-card:hover img { transform: scale(1.04); filter: grayscale(0%) contrast(1.15); }

.band-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 35%, rgba(0,0,0,0.75) 100%);
  pointer-events: none;
}

.band-info { position: absolute; bottom: 28px; left: 28px; z-index: 2; }

.band-name {
  font-family: 'Pirata One', serif;
  font-size: clamp(22px, 3vw, 44px);
  line-height: 1;
  color: #fff;
  margin-bottom: 10px;
}

.band-link {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  transition: color 0.22s, border-color 0.22s;
}

.band-card:hover .band-link { color: #fff; border-color: #fff; }

/* ── Koleksiyonlar Footer CTA ── */
.page-koleksiyonlar .footer-cta {
  margin-top: 80px;
}


/* ╔══════════════════════════════════════╗
   ║  5. MAĞAZA                          ║
   ╚══════════════════════════════════════╝ */

/* ── Shop Hero ── */
.page-magaza .page-hero.shop-hero {
  min-height: 46vh;
  background: #000;
}

.page-magaza .page-eyebrow {
  color: rgba(255,255,255,0.35);
}

/* ── Shop Toolbar ── */
/* ╔══════════════════════════════════════╗
   ║  MAĞAZA — sol filtre rayı + grid     ║
   ╚══════════════════════════════════════╝ */

.shop-layout {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  border-top: 1px solid rgba(255,255,255,0.07);
}

/* ── Sol ray ── */
.shop-rail {
  border-right: 1px solid rgba(255,255,255,0.07);
}

.shop-rail-inner {
  position: sticky;
  top: 88px;                       /* yapışkan nav'ın altında kalsın */
  max-height: calc(100vh - 88px);
  overflow-y: auto;
  padding: 32px 28px 40px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.14) transparent;
}

.shop-rail-inner::-webkit-scrollbar { width: 4px; }
.shop-rail-inner::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.14);
  border-radius: 4px;
}

.rail-group { margin-bottom: 34px; }
.rail-group:last-of-type { margin-bottom: 24px; }

.rail-title {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.32);
  margin: 0 0 14px;
}

/* ── Kategori listesi ──
   Pill değil dikey liste: rayda pill'ler dağınık durur, ayrıca
   üstteki nav'ın pill diliyle çakışırdı. Aktif olan sol kenardan
   ince beyaz bir çizgiyle işaretlenir. */
.rail-cats { list-style: none; margin: 0; padding: 0; }

.rail-cat {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 7px 0 7px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  text-align: left;
  transition: color 0.2s;
}

.rail-cat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 1px;
  height: 14px;
  background: #fff;
  transition: transform 0.24s cubic-bezier(.4,0,.2,1);
}

.rail-cat:hover { color: rgba(255,255,255,0.85); }

.rail-cat.active { color: #fff; }
.rail-cat.active::before { transform: translateY(-50%) scaleY(1); }

.rail-cat-name { letter-spacing: 0.01em; }

.rail-cat-count {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,0.25);
  flex-shrink: 0;
}

.rail-cat.active .rail-cat-count { color: rgba(255,255,255,0.5); }

/* ── Onay kutuları (malzeme / durum) ── */
.rail-checks { list-style: none; margin: 0; padding: 0; }

.rail-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  cursor: pointer;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  transition: color 0.2s;
}

.rail-check:hover { color: rgba(255,255,255,0.85); }
.rail-check input { position: absolute; opacity: 0; width: 0; height: 0; }

.rail-box {
  position: relative;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.25);
  transition: background 0.18s, border-color 0.18s;
}

.rail-box::after {
  content: '';
  position: absolute;
  left: 3.5px;
  top: 0.5px;
  width: 4px;
  height: 8px;
  border: solid #000;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.18s cubic-bezier(.4,0,.2,1);
}

.rail-check input:checked ~ .rail-box {
  background: #fff;
  border-color: #fff;
}

.rail-check input:checked ~ .rail-box::after { transform: rotate(45deg) scale(1); }

.rail-check input:focus-visible ~ .rail-box {
  outline: 1px solid rgba(255,255,255,0.6);
  outline-offset: 2px;
}

.rail-label { flex: 1; }
.rail-check input:checked ~ .rail-label { color: #fff; }

/* ── Fiyat: iki uçlu kaydırıcı ──
   İki range input üst üste bindirilir; ikisi de pointer-events:none olur,
   sadece tutamakları tıklanabilir kalır. Aksi halde üstteki input alttakinin
   tutamağını tamamen bloke ederdi. */
.rail-price { padding-top: 4px; }

.price-slider {
  position: relative;
  height: 20px;
  margin-bottom: 12px;
}

.price-track,
.price-fill {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 1px;
}

.price-track {
  left: 0;
  right: 0;
  background: rgba(255,255,255,0.16);
}

.price-fill { background: #fff; }

.price-slider input[type="range"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20px;
  margin: 0;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: none;
}

.price-slider input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  pointer-events: all;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  border: none;
  cursor: grab;
  transition: transform 0.15s;
}

.price-slider input[type="range"]::-webkit-slider-thumb:active { transform: scale(1.25); cursor: grabbing; }

.price-slider input[type="range"]::-moz-range-thumb {
  pointer-events: all;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  border: none;
  cursor: grab;
}

.price-slider input[type="range"]::-moz-range-track { background: none; }

.price-values {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,0.45);
}

/* ── Sağ taraf: araç çubuğu ── */
.shop-main { min-width: 0; }

.shop-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 48px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.shop-bar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  flex-shrink: 0;
}

/* Mobilde görünür, masaüstünde ray hep açık olduğu için gizli */
.shop-filter-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.7);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 9px 16px;
  border-radius: 40px;
  cursor: pointer;
}

.shop-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 40px;
  background: #fff;
  color: #000;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

/* ── Yoğunluk anahtarı ── */
.density-switch {
  display: flex;
  gap: 2px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 40px;
  padding: 3px;
}

.density-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 26px;
  background: transparent;
  border: none;
  border-radius: 40px;
  cursor: pointer;
  color: rgba(255,255,255,0.35);
  transition: background 0.2s, color 0.2s;
}

.density-btn svg rect { fill: currentColor; }
.density-btn:hover { color: rgba(255,255,255,0.75); }

.density-btn.active {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

/* ── Seçili filtre chip'leri ── */
.shop-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 16px 48px 0;
}

.shop-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  border-radius: 40px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.shop-chip:hover { background: rgba(255,255,255,0.13); border-color: rgba(255,255,255,0.28); }
.shop-chip-x { font-size: 14px; line-height: 1; color: rgba(255,255,255,0.5); }
.shop-chip:hover .shop-chip-x { color: #fff; }

.shop-chip-clear {
  background: none;
  border: none;
  color: rgba(255,255,255,0.4);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 6px 8px;
  transition: color 0.2s;
}

.shop-chip-clear:hover { color: #fff; }

/* ── "Daha Fazla" ── */
.shop-more-wrap { text-align: center; padding-top: 48px; }

.shop-more {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 15px 46px;
  border-radius: 40px;
  cursor: pointer;
  transition: background 0.24s, color 0.24s, border-color 0.24s;
}

.shop-more:hover { background: #fff; color: #000; border-color: #fff; }

.shop-more-info {
  margin: 14px 0 0;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.28);
}

.shop-empty-reset {
  margin-top: 20px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 12px 28px;
  border-radius: 40px;
  cursor: pointer;
  transition: background 0.24s, color 0.24s;
}

.shop-empty-reset:hover { background: #fff; color: #000; }

/* Mobil sheet örtüsü — masaüstünde hiç kullanılmaz */
.shop-rail-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 880;
}

/* Sheet başlığı ve "Sonuçları Gör": yalnızca mobil sheet modunda görünür */
.rail-sheet-head,
.rail-sheet-apply { display: none; }

/* ── Orta genişlik: ray daralır, grid en fazla 4 sütun ── */
@media (max-width: 1200px) {
  .shop-layout { grid-template-columns: 208px minmax(0, 1fr); }
  .shop-rail-inner { padding: 28px 20px 36px; }
  .shop-bar, .shop-chips { padding-left: 28px; padding-right: 28px; }
  .product-grid-wrap { padding: 28px 28px 64px; }
  /* 6 sütun bu genişlikte kart bilgisini okunmaz yapıyor.
     .shop-main ile sarmalı ŞART: .product-grid temel kuralı bu dosyada
     aşağıda tanımlı ve @media özgüllük eklemediği için onu ezemiyor. */
  .shop-main .product-grid { grid-template-columns: repeat(min(var(--shop-cols, 4), 4), minmax(0, 1fr)); }
}

/* ── Mobil: ray alttan açılan sheet olur ── */
@media (max-width: 900px) {
  .shop-layout { grid-template-columns: minmax(0, 1fr); }

  .shop-rail {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 890;
    max-height: 82vh;
    background: #0d0d0d;
    border-right: none;
    border-top: 1px solid rgba(255,255,255,0.1);
    border-radius: 18px 18px 0 0;
    transform: translateY(100%);
    transition: transform 0.34s cubic-bezier(.4,0,.2,1);
  }

  .shop-rail.open { transform: translateY(0); }

  .shop-rail-inner {
    position: static;
    max-height: 82vh;
    padding: 0 24px 24px;
  }

  /* Sheet başlığı kaydırılırken üstte kalsın */
  .rail-sheet-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0 14px;
    margin-bottom: 8px;
    background: #0d0d0d;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }

  .rail-sheet-title {
    font-family: 'Pirata One', serif;
    font-size: 19px;
    letter-spacing: 0.05em;
    color: #fff;
  }

  .rail-sheet-close {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06);
    border: none;
    border-radius: 50%;
    color: rgba(255,255,255,0.6);
    font-size: 18px;
    cursor: pointer;
  }

  /* Sheet'in altına yapışsın: aksi halde kullanıcı butona ulaşmak için
     bütün filtre listesini sonuna kadar kaydırmak zorunda kalıyor. */
  .rail-sheet-apply {
    position: sticky;
    bottom: 0;
    display: block;
    width: 100%;
    margin-top: 8px;
    box-shadow: 0 -14px 18px 10px #0d0d0d;
    background: #fff;
    color: #000;
    border: none;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 15px;
    border-radius: 40px;
    cursor: pointer;
  }

  /* Dokunmatikte hedefler büyüsün */
  .rail-cat { padding-top: 10px; padding-bottom: 10px; font-size: 14px; }
  .rail-check { padding: 9px 0; font-size: 14px; }
  .rail-box { width: 16px; height: 16px; }
  .rail-box::after { left: 4.5px; top: 1px; width: 5px; height: 10px; }

  .shop-filter-toggle { display: inline-flex; }

  .shop-bar {
    flex-wrap: wrap;
    padding: 14px 20px;
    gap: 10px;
  }

  .shop-chips { padding: 14px 20px 0; }
  .product-grid-wrap { padding: 20px 20px 56px; }

  /* Yoğunluk anahtarı mobilde yer kaplıyor; telefonda 2 sütun zaten doğru */
  .density-switch { display: none; }
  .shop-main .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
  .shop-result-count { display: none; }   /* sayı chip'lerin yanında zaten var */
}

.shop-result-count {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.3);
  white-space: nowrap;
}

.shop-sort {
  position: relative;
  display: flex;
  align-items: center;
}

.sort-select {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.65);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 36px 8px 16px;
  border-radius: 40px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.22s, color 0.22s;
}

.sort-select:hover,
.sort-select:focus {
  border-color: rgba(255,255,255,0.3);
  color: #fff;
}

.sort-select option {
  background: #1a1a1a;
  color: #fff;
  text-transform: none;
  font-weight: 400;
}

.sort-chevron {
  position: absolute;
  right: 12px;
  color: rgba(255,255,255,0.4);
  pointer-events: none;
}

/* ── Product Grid ── */
.product-grid-wrap {
  padding: 48px 48px 80px;
  min-height: 40vh;
}

.product-grid {
  display: grid;
  /* --shop-cols yoğunluk anahtarından gelir (2 / 4 / 6).
     Mağaza dışındaki sayfalarda tanımsız kalır, 4'e düşer. */
  grid-template-columns: repeat(var(--shop-cols, 4), minmax(0, 1fr));
  gap: 3px;
}

/* ── Product Card ── */
.product-card {
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 3:4 dikey — ürün fotoğrafları böyle çekilmiş. Kare denenmişti ama
   kadife üzerine dikey kompozisyonlarda zincir/küpe kadraj dışında
   kalıyordu; parça dikeyi kullanıyor. */
.product-card-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/4;
  background: #0d0d0d;
}

/* Takı gibi küçük objeler 3/4 çerçevede çok boşluk bırakıyor.
   Bu kart sınıfları yalnızca magaza.html'de kullanılıyor (index kendi
   .bs-card'ını kullanır), o yüzden temel kuralı doğrudan değiştiriyoruz. */

/* Görsel ve ad için link sarmalayıcı */
.product-card-img-link {
  display: block;
  text-decoration: none;
}

.product-name-link {
  text-decoration: none;
  color: inherit;
}
.product-name-link:hover .product-name { color: rgba(255,255,255,0.7); }

.product-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  filter: grayscale(20%) contrast(1.08);
  transition: transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94), filter 0.7s ease;
}

.product-card:hover .product-card-img img {
  transform: scale(1.05);
  filter: grayscale(0%) contrast(1.12);
}

/* İkinci görsel: kapağın üstünde durur, hover'da yumuşak geçişle açılır.
   Yalnızca galerisi olan ürünlerde basılır (bkz. renderGrid).
   Dokunmatikte hover yok — orada galeri ürün sayfasında. */
.product-card-img-alt {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94);
}

.product-card:hover .product-card-img-alt { opacity: 1; }

/* ── Product Badge ── */
.product-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 2px;
  pointer-events: none;
}

.product-badge.best {
  background: #fff;
  color: #000;
}

.product-badge.new {
  background: #000;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.28);
}

.product-badge.sale {
  background: #c8102e;
  color: #fff;
}

/* ── Hover Actions ── */
.product-actions-hover {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.product-card:hover .product-actions-hover {
  opacity: 1;
  transform: translateY(0);
}

.btn-wishlist {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  color: rgba(255,255,255,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.22s, color 0.22s, border-color 0.22s;
}

.btn-wishlist:hover,
.btn-wishlist.active {
  background: #fff;
  color: #000;
  border-color: #fff;
}

/* ── Product Info ──
   Önceki hali her satırı 5px arayla diziyordu: etiket, ad, malzeme ve fiyat
   eşit aralıkta olunca hiçbiri diğerinden ayrışmıyor, blok sıkışık okunuyordu.
   Artık gruplu: etiket+ad+malzeme bir küme, fiyat+buton ayrı bir küme,
   aralarında belirgin boşluk var. */
.product-card-info {
  flex: 1;                       /* fiyat bloğunu alta itebilmek için */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 18px 2px 24px;
}

.product-tag {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.26);
  margin-bottom: 10px;
}

.product-name {
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  line-height: 1.35;
}

/* Malzeme satırı. Etiketle aynı gri tonda ve aynı puntoda olduğu için
   ikisi tek bir bulanık blok gibi görünüyordu; biraz açtım ve
   büyük harfi kaldırdım ki adın altında ayrı bir bilgi olarak okunsun. */
.product-sizes {
  font-size: 11.5px;
  font-weight: 400;
  color: rgba(255,255,255,0.42);
  letter-spacing: 0.02em;
  margin-top: 7px;
}

/* margin-top:auto → bir satırdaki kartların adı 1 veya 2 satır olsa da
   fiyatlar ve butonlar aynı hizada durur */
.product-card-footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 13px;
  width: 100%;
  margin-top: auto;
  padding-top: 18px;
}

.product-price {
  font-size: clamp(13px, 1.1vw, 16px);
  font-weight: 800;
  color: #fff;
}

.product-price .old-price {
  font-size: 11px;
  font-weight: 400;
  color: rgba(255,255,255,0.28);
  text-decoration: line-through;
  margin-right: 6px;
}

/* Alt çizgili metin yerine çerçeveli buton: kart genişliğine yayılan bir
   alt çizgi ayırıcıya benziyordu, tıklanabilir olduğu okunmuyordu.
   Ayrıca dokunmatikte hedef alanı bir metin satırından çok daha büyük. */
.product-btn {
  display: block;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  padding: 11px 10px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 40px;
  transition: background 0.22s, color 0.22s, border-color 0.22s;
  white-space: nowrap;
}

.product-btn:hover {
  background: #fff;
  color: #000;
  border-color: #fff;
}

.product-card:hover .product-btn {
  color: #fff;
  border-color: rgba(255,255,255,0.42);
}

.product-card:hover .product-btn:hover {
  color: #000;
  border-color: #fff;
}

/* ── Empty State ── */
.shop-empty {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
  gap: 14px;
}

.shop-empty-title {
  font-size: 22px;
  font-weight: 700;
  color: rgba(255,255,255,0.65);
  letter-spacing: -0.01em;
}

.shop-empty-sub {
  font-size: 14px;
  color: rgba(255,255,255,0.3);
}

/* ── Mağaza Footer CTA ── */
.page-magaza .footer-cta {
  margin-top: 40px;
}

/* ════════════════════════════════
   Profil Dropdown
════════════════════════════════ */
.nav-profile-wrap {
  position: relative;
}

.nav-profile-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 210px;
  background: #111;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  padding: 1rem;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.22s cubic-bezier(0.22,1,0.36,1),
              transform 0.22s cubic-bezier(0.22,1,0.36,1);
  z-index: 1100;
}

.nav-profile-dropdown.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.nav-profile-name {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-profile-email {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.3);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-profile-divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 0.75rem 0;
}

.nav-profile-account {
  display: block;
  color: rgba(255,255,255,0.6);
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0;
  margin-bottom: 0.6rem;
  transition: color 0.2s;
}
.nav-profile-account:hover { color: #fff; }

.nav-profile-logout {
  background: none;
  border: none;
  color: rgba(255,255,255,0.4);
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s;
}
.nav-profile-logout:hover { color: #fff; }

/* ── Hakkımızda mobil yerleşimi ── */
@media (max-width: 768px) {
  .page-hakkimizda .page-hero {
    min-height: 70svh;
    padding: 0 20px 40px;
  }

  .page-hakkimizda .page-title {
    font-size: clamp(52px, 18vw, 76px);
  }

  .page-hakkimizda .section {
    width: 100%;
    padding: 64px 20px;
  }

  .page-hakkimizda .section-divider {
    width: calc(100% - 40px);
    margin: 0 20px;
  }

  .page-hakkimizda .manifesto {
    font-size: clamp(26px, 8vw, 38px);
    overflow-wrap: anywhere;
  }

  .page-hakkimizda .values {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 48px;
  }

  .page-hakkimizda .value-card {
    min-width: 0;
    padding: 32px 24px;
  }


  .page-hakkimizda .footer-cta {
    padding: 80px 20px;
  }
}

/* ╔══════════════════════════════════════╗
   ║  YASAL SAYFALAR                      ║
   ╚══════════════════════════════════════╝
   Bilerek sade: gotik dil markanın sesi, ama sözleşme metni okunmak
   zorunda. Pirata One ve ornaman yok; ölçü dar, satır arası geniş. */
.yasal {
  background: #0d0d0d;
  padding: clamp(120px, 14vw, 170px) 24px clamp(80px, 9vw, 120px);
}

.yasal-inner {
  max-width: 760px;        /* ~75 karakter: uzun metin için okuma ölçüsü */
  margin: 0 auto;
}

.yasal-bas {
  padding-bottom: 26px;
  margin-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.yasal-baslik {
  font-family: 'Inter', sans-serif;
  font-size: clamp(24px, 3.4vw, 38px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #fff;
  margin: 12px 0 0;
}

.yasal-tarih {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.3);
  margin: 14px 0 0;
}

.yasal-govde {
  font-size: 14.5px;
  line-height: 1.85;
  color: rgba(255,255,255,0.72);
}

.yasal-govde h2 {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  margin: 42px 0 14px;
}

.yasal-govde h3 {
  font-size: 13.5px;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  margin: 26px 0 10px;
}

.yasal-govde p { margin: 0 0 14px; }
.yasal-govde ul, .yasal-govde ol { margin: 0 0 16px; padding-left: 22px; }
.yasal-govde li { margin-bottom: 8px; }
.yasal-govde strong { color: #fff; font-weight: 700; }

.yasal-govde a {
  color: var(--kemik);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.yasal-govde a:hover { color: #fff; }

/* Künye tablosu */
.yasal-kunye {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 18px;
  font-size: 13.5px;
}

.yasal-kunye th,
.yasal-kunye td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.yasal-kunye th {
  width: 38%;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
}

.yasal-kunye td { color: #fff; }

/* Doldurulmamış firma bilgisi — göze batması kasıtlı */
.firma-eksik {
  display: inline-block;
  background: rgba(200,32,32,0.16);
  border: 1px dashed rgba(255,90,90,0.55);
  color: #ff9b9b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 1px 7px;
  border-radius: 3px;
}

.yasal-uyari {
  display: flex;
  gap: 12px;
  background: rgba(200,32,32,0.1);
  border: 1px solid rgba(255,90,90,0.32);
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 34px;
  font-size: 13px;
  line-height: 1.65;
  color: #ffc9c9;
}

.yasal-uyari strong { color: #fff; }

/* Sayfalar arası gezinme */
.yasal-diger {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 56px;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.yasal-diger a {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 40px;
  padding: 7px 15px;
  transition: color 0.2s, border-color 0.2s;
}

.yasal-diger a:hover { color: #fff; border-color: rgba(255,255,255,0.35); }
.yasal-diger a[aria-current="page"] { color: #000; background: #fff; border-color: #fff; }

/* ── Hakkımızda: hikâye, zanaat, söz ──
   Sayfa artık manken ajansı içeriği taşımıyor; anasayfadaki gotik
   dili (section-label, dropcap, orn-rule) sürdürüyor. */
.hak-ifade {
  font-family: 'Pirata One', serif;
  font-size: clamp(32px, 5vw, 68px);
  font-weight: 400;
  line-height: 1.08;
  color: #fff;
  margin: 0 0 clamp(34px, 4vw, 48px);
}

.hak-alt-baslik {
  font-family: 'Pirata One', serif;
  font-size: clamp(24px, 3.2vw, 40px);
  font-weight: 400;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 12px;
}

.hak-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  max-width: 980px;
}

.hak-cols p {
  font-size: clamp(13.5px, 1.05vw, 16px);
  line-height: 1.8;
  color: rgba(255,255,255,0.62);
  margin: 0;
}

/* Sözler: numaralı kart değil, baklava işaretli liste — zanaat
   kartlarıyla aynı ritmi tekrarlamasın */
.hak-soz {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

.hak-soz li {
  background: #0d0d0d;
  border: 1px solid rgba(255,255,255,0.06);
  padding: 40px 34px;
}

.hak-soz h3 {
  position: relative;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 12px;
  padding-left: 18px;
}

.hak-soz h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  background: var(--kemik);
  transform: rotate(45deg);
}

.hak-soz p {
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255,255,255,0.5);
  margin: 0;
}

.hak-soz a { color: var(--kemik); text-decoration: underline; text-underline-offset: 3px; }
.hak-soz a:hover { color: #fff; }

@media (max-width: 900px) {
  .hak-cols { grid-template-columns: minmax(0, 1fr); }
  .hak-soz  { grid-template-columns: minmax(0, 1fr); }
}

/* Özgün iyzico marka bandı; oranı ve renkleri korunur. */
.site-footer-payments{display:flex;justify-content:center;padding:24px 20px;border-top:1px solid rgba(255,255,255,.1)}
.site-footer-payments img{display:block;width:min(456px,100%);height:auto;object-fit:contain}
.checkout-payment-brand{display:flex;justify-content:center;margin:8px 0 14px}
.checkout-payment-brand img{width:180px;max-width:100%;height:auto}

.hak-hikaye a{color:#c8bfae;text-underline-offset:3px}