/* =====================================================================
   MIREY  |  Tasarim sistemi
   Palet logodan turetildi: #3D434D murekkep, sedef zemin, celik hatlar.
   Vurgu rengi tek: kristal mavisi. Sadece indirim ve odak icin kullanilir.
   ===================================================================== */

:root {
  --gece:      #23272E;
  --murekkep:  #3D434D;   /* logo rengi - ana marka murekkebi */
  --celik:     #8C949E;   /* ikincil metin */
  --hat:       #DFE5EC;   /* saç teli cizgiler — soğuk */
  --hat-koyu:  #C4CDD8;
  /* Sayfa zemini, ürün fotoğraflarının soğuk beyaz zeminiyle aynı tonda:
     kart ile fotoğraf arasında görünür bir sınır kalmıyor, ürün sanki
     sayfanın üzerinde duruyor. Sıcak tona dönmek için --sedef: #F4F3F1 */
  --sedef:     #EDF1F6;   /* sayfa zemini — soğuk beyaz */
  --kagit:     #FFFFFF;
  --zemin-urun:#F2F5F9;   /* ürün görseli çerçevesi */
  --hat-soguk: #DDE4EC;
  --kristal:   #35617F;   /* tek vurgu */
  --indirim:   #A6394A;
  --yesil:     #2F6B4F;

  --serif:  "Bodoni Moda", "Didot", Georgia, "Times New Roman", serif;
  --govde:  "Jost", "Futura", "Century Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ol-1: .75rem;
  --ol-2: 1.25rem;
  --ol-3: 2rem;
  --ol-4: 3.25rem;
  --ol-5: 5rem;

  --en: 1280px;
  --gecis: 240ms cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--sedef);
  color: var(--murekkep);
  font-family: var(--govde);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--kristal);
  outline-offset: 3px;
}

/* ---------------------------------------------------------- tipografi */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: 0 0 .6em;
}
h1 { font-size: clamp(2rem, 4.2vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
h3 { font-size: 1.25rem; }

.etiket {
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--celik);
}

.serif-italik { font-family: var(--serif); font-style: italic; }

/* ---------------------------------------------------------- iskelet */
.kap {
  width: 100%;
  max-width: var(--en);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.bolum { padding-block: clamp(3rem, 7vw, 5.5rem); }
.bolum-dar { padding-block: clamp(2rem, 4vw, 3rem); }

.bolum-basi {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}
.bolum-basi h2 { margin: .2em 0 0; }

/* Imza ogesi: logodaki dort kollu yildiz, bolum ayraci olarak. */
.yildiz-ayrac {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--hat-koyu);
}
.yildiz-ayrac::before,
.yildiz-ayrac::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hat);
}
.yildiz {
  width: 12px; height: 12px;
  flex: none;
  background: currentColor;
  /* dort kollu parilti - logonun i noktasi */
  clip-path: polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%);
}

/* ---------------------------------------------------------- duyuru serit */
.duyuru {
  background: var(--gece);
  color: #EDECEA;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  padding: .65rem 1rem;
}

/* ---------------------------------------------------------- ust bar */
.ustbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(244, 243, 241, .92);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--hat);
}
.ustbar-ic {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  min-height: 76px;
}
.marka img { height: 26px; width: auto; }
.marka { justify-self: center; }

.ustbar-sol, .ustbar-sag {
  display: flex;
  align-items: center;
  gap: .35rem;
}
.ustbar-sag { justify-content: flex-end; }

.ikon-dugme {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .7rem;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
  border-radius: 2px;
  transition: color var(--gecis);
}
.ikon-dugme:hover { color: var(--kristal); }
.ikon-dugme svg { width: 19px; height: 19px; stroke-width: 1.4; }

.sepet-sayaci {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--murekkep);
  color: #fff;
  font-size: .66rem;
  font-weight: 500;
  display: inline-grid;
  place-items: center;
  line-height: 1;
}

/* ---------------------------------------------------------- menu */
.menu {
  border-bottom: 1px solid var(--hat);
  background: var(--sedef);
}
.menu-liste {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1rem, 3vw, 2.6rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu-liste > li { position: relative; }
.menu-liste > li > a {
  display: block;
  padding: .95rem 0;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  position: relative;
}
.menu-liste > li > a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .5rem;
  height: 1px;
  background: var(--murekkep);
  transform: scaleX(0);
  transition: transform var(--gecis);
}
.menu-liste > li:hover > a::after,
.menu-liste > li > a[aria-current="page"]::after { transform: scaleX(1); }

.altmenu {
  position: absolute;
  top: 100%;
  left: 50%;
  translate: -50% 0;
  min-width: 200px;
  background: var(--kagit);
  border: 1px solid var(--hat);
  padding: .5rem 0;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: all var(--gecis);
  box-shadow: 0 18px 40px -24px rgba(35, 39, 46, .45);
}
.menu-liste > li:hover .altmenu,
.menu-liste > li:focus-within .altmenu {
  opacity: 1; visibility: visible; transform: none;
}
.altmenu a {
  display: block;
  padding: .5rem 1.2rem;
  font-size: .85rem;
  white-space: nowrap;
}
.altmenu a:hover { background: var(--sedef); color: var(--kristal); }

/* mobil menu */
.mobil-ac { display: none; }
@media (max-width: 900px) {
  .menu { display: none; }
  .mobil-ac { display: inline-flex; }
  .ustbar-ic { min-height: 64px; }
  .marka img { height: 22px; }
  .gizle-mobil { display: none !important; }
}

.mobil-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--sedef);
  padding: 1.5rem;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform var(--gecis);
}
.mobil-menu[data-acik="1"] { transform: none; }
.mobil-menu ul { list-style: none; margin: 0; padding: 0; }
.mobil-menu > ul > li > a {
  display: block;
  padding: .85rem 0;
  border-bottom: 1px solid var(--hat);
  font-family: var(--serif);
  font-size: 1.35rem;
}
.mobil-menu .alt-liste a {
  display: block;
  padding: .4rem 0 .4rem 1rem;
  font-size: .9rem;
  color: var(--celik);
}

/* ---------------------------------------------------------- dugmeler */
.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .95rem 2rem;
  border: 1px solid var(--murekkep);
  background: var(--murekkep);
  color: #fff;
  font-family: var(--govde);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 0;
  transition: background var(--gecis), color var(--gecis), border-color var(--gecis);
}
.dugme:hover { background: var(--gece); border-color: var(--gece); }
.dugme:disabled { opacity: .45; cursor: not-allowed; }

.dugme-cizgi { background: none; color: var(--murekkep); }
.dugme-cizgi:hover { background: var(--murekkep); color: #fff; }

.dugme-blok { width: 100%; }
.dugme-kucuk { padding: .6rem 1.1rem; font-size: .7rem; }

.metin-link {
  border-bottom: 1px solid var(--hat-koyu);
  padding-bottom: 1px;
  transition: border-color var(--gecis), color var(--gecis);
}
.metin-link:hover { color: var(--kristal); border-color: var(--kristal); }

/* ---------------------------------------------------------- vitrin (hero) */
.vitrin {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  min-height: min(78vh, 660px);
  background: var(--kagit);
  border-bottom: 1px solid var(--hat);
}
.vitrin-metin {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 6vw, 5.5rem);
}
.vitrin-metin h1 {
  font-size: clamp(2.4rem, 5.6vw, 4.6rem);
  margin-bottom: .35em;
}
.vitrin-metin h1 em {
  font-style: italic;
  display: block;
}
.vitrin-metin p {
  max-width: 42ch;
  color: var(--celik);
  font-size: 1.02rem;
  margin: 0 0 2.2rem;
}
.vitrin-gorsel {
  position: relative;
  background: var(--sedef);
  overflow: hidden;
}
.vitrin-gorsel img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.vitrin-bos {
  display: grid;
  place-items: center;
  color: var(--hat-koyu);
}
.vitrin-bos .yildiz { width: 90px; height: 90px; }

@media (max-width: 860px) {
  .vitrin { grid-template-columns: 1fr; }
  .vitrin-gorsel { min-height: 320px; order: -1; }
}

/* ---------------------------------------------------------- urun izgara */
.izgara {
  align-items: stretch;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: clamp(1rem, 2.4vw, 2rem) clamp(.75rem, 1.8vw, 1.5rem);
}

/* =====================================================================
   ÜRÜN KARTI
   Tüm kartlar aynı yükseklikte. Görsel sabit oranlı, ad iki satıra
   kırpılıyor, fiyat her kartta aynı hizada. Kart yüksekliği içeriğe
   göre oynamıyor — ızgara düzgün duruyor.
   ===================================================================== */
.urun-kart {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--kagit);
  border: 1px solid var(--hat);
  transition: border-color var(--gecis), box-shadow var(--gecis);
}
.urun-kart:hover {
  border-color: var(--hat-koyu);
  box-shadow: 0 10px 30px -14px rgba(35, 45, 60, .18);
}

/* Görsel bölgesi: rozetler ve düğmeler bunun içinde konumlanır */
.urun-kart-ust { position: relative; overflow: hidden; }

.urun-kart-gorsel {
  display: block;
  aspect-ratio: 4 / 5;          /* her kartta aynı oran */
  background: var(--zemin-urun);
  overflow: hidden;
}
.urun-kart-gorsel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: scale 600ms cubic-bezier(.22,.61,.36,1);
}
.urun-kart:hover .urun-kart-gorsel img { scale: 1.04; }

.urun-kart-bos {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  background: var(--zemin-urun);
}
.urun-kart-bos .yildiz { width: 30px; height: 30px; opacity: .3; }

/* Rozetler */
.rozetler {
  position: absolute;
  top: .55rem; left: .55rem;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .3rem;
  pointer-events: none;
}
.rozetler .rozet {
  background: rgba(255,255,255,.94);
  border: 1px solid var(--hat);
  color: var(--murekkep);
  font-size: .6rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  padding: .22rem .45rem;
  line-height: 1.35;
}
.rozet-indirim  { background: var(--indirim); border-color: var(--indirim); color: #fff; }
.rozet-yeni     { background: var(--murekkep); border-color: var(--murekkep); color: #fff; }
.rozet-kampanya { background: var(--kmp, var(--kristal)); border-color: var(--kmp, var(--kristal)); color: #fff; }
.rozet-deneme   { border-color: var(--kristal); color: var(--kristal); }
.rozet-tukendi  { background: rgba(35,39,46,.82); border-color: transparent; color: #fff; }

/* Sepete ekle: görselin altından yükselir.
   Dokunmatik cihazda hep görünür — hover yok. */
.hizli-ekle {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 3;
  padding: .5rem;
  opacity: 0;
  translate: 0 100%;
  transition: opacity var(--gecis), translate var(--gecis);
}
.urun-kart:hover .hizli-ekle,
.urun-kart:focus-within .hizli-ekle { opacity: 1; translate: 0; }
.hizli-ekle form { margin: 0; }

.kart-dugme {
  display: block;
  width: 100%;
  padding: .62rem .5rem;
  border: 1px solid var(--murekkep);
  background: var(--murekkep);
  color: #fff;
  font: inherit;
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background var(--gecis), color var(--gecis);
}
.kart-dugme:hover { background: var(--gece); border-color: var(--gece); color: #fff; }
.kart-dugme-sade {
  background: rgba(255,255,255,.95);
  color: var(--murekkep);
  border-color: var(--murekkep);
}
.kart-dugme-sade:hover { background: var(--murekkep); color: #fff; }

/* Bilgi bölgesi: kalan yüksekliği doldurur, fiyat en altta hizalı */
.urun-kart-bilgi {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: .8rem .85rem .9rem;
  min-width: 0;
}
.urun-kart-kategori {
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--celik);
  margin-bottom: .3rem;
}
.urun-kart-ad {
  font-family: var(--govde);
  font-size: .92rem;
  font-weight: 400;
  line-height: 1.4;
  margin: 0 0 .55rem;
  /* İki satırda kırp: uzun ad kartı büyütmesin */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}
.urun-kart-ad a { color: var(--murekkep); }
.urun-kart-ad a:hover { color: var(--kristal); }

.urun-kart-alt {
  margin-top: auto;            /* fiyat her kartta aynı hizada */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  flex-wrap: wrap;
}
.fiyat-satiri { display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; }
.urun-kart-alt .fiyat { font-size: 1.02rem; }

@media (hover: none) {
  /* Dokunmatikte hover yok: düğme sürekli görünür */
  .hizli-ekle { opacity: 1; translate: 0; position: static; padding: .5rem .5rem 0; }
  .urun-kart-ust { overflow: visible; }
}
.fiyat { font-size: .95rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.fiyat-eski {
  font-size: .82rem;
  color: var(--celik);
  text-decoration: line-through;
}
.fiyat-indirimli { color: var(--indirim); }

/* ---------------------------------------------------------- kategori seridi */
.kategori-serit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--hat);
  border: 1px solid var(--hat);
}
.kategori-kutu {
  background: var(--kagit);
  padding: 2.2rem 1.2rem;
  text-align: center;
  transition: background var(--gecis);
}
.kategori-kutu:hover { background: var(--sedef); }
.kategori-kutu .ad {
  font-family: var(--serif);
  font-size: 1.15rem;
  display: block;
}
.kategori-kutu .adet { font-size: .7rem; letter-spacing: .12em; color: var(--celik); text-transform: uppercase; }

/* ---------------------------------------------------------- filtre + liste */
.liste-duzen {
  display: grid;
  grid-template-columns: 232px 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 900px) { .liste-duzen { grid-template-columns: 1fr; } }

.filtre { position: sticky; top: 96px; }
.filtre-grup { border-bottom: 1px solid var(--hat); padding: 1.1rem 0; }
.filtre-grup:first-child { padding-top: 0; }
.filtre-grup h3 {
  font-family: var(--govde);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--celik);
  margin-bottom: .8rem;
}
.filtre-grup ul { list-style: none; margin: 0; padding: 0; }
.filtre-grup li { margin-bottom: .4rem; }
.filtre-grup a { font-size: .9rem; }
.filtre-grup a:hover { color: var(--kristal); }
.filtre-grup a.secili { font-weight: 500; border-bottom: 1px solid var(--murekkep); }

.aralik-alan { display: flex; gap: .5rem; align-items: center; }
.aralik-alan input { width: 100%; }

.liste-basi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--hat);
  flex-wrap: wrap;
}
.sonuc-adedi { font-size: .8rem; color: var(--celik); }

/* ---------------------------------------------------------- form ogeleri */
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], input[type="search"],
select, textarea {
  width: 100%;
  padding: .8rem .9rem;
  border: 1px solid var(--hat-koyu);
  border-radius: 0;
  background: var(--kagit);
  color: var(--murekkep);
  font-family: var(--govde);
  font-size: .92rem;
  transition: border-color var(--gecis);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--murekkep);
}
textarea { min-height: 110px; resize: vertical; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%233D434D' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  background-size: 11px;
  padding-right: 2.2rem;
}

.alan { margin-bottom: 1.1rem; }
.alan label {
  display: block;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--celik);
  margin-bottom: .4rem;
}
.alan-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 620px) { .alan-ikili { grid-template-columns: 1fr; } }

.onay { display: flex; gap: .6rem; align-items: flex-start; font-size: .85rem; }
.onay input { width: auto; margin-top: .25rem; flex: none; }

.form-kutu {
  background: var(--kagit);
  border: 1px solid var(--hat);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

/* ---------------------------------------------------------- bildirimler */
.bildirim {
  padding: .85rem 1.1rem;
  border-left: 3px solid var(--murekkep);
  background: var(--kagit);
  font-size: .9rem;
  margin-bottom: 1rem;
}
.bildirim-basari { border-color: var(--yesil); }
.bildirim-hata { border-color: var(--indirim); }

.hata-metin { color: var(--indirim); font-size: .82rem; margin-top: .3rem; }

/* ---------------------------------------------------------- urun detay */
.urun-duzen {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: clamp(1.5rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 900px) { .urun-duzen { grid-template-columns: 1fr; } }

.galeri { display: grid; grid-template-columns: 76px 1fr; gap: .75rem; }
@media (max-width: 560px) { .galeri { grid-template-columns: 1fr; } }
.galeri-kucukler { display: flex; flex-direction: column; gap: .55rem; }
@media (max-width: 560px) { .galeri-kucukler { flex-direction: row; overflow-x: auto; } }
.galeri-kucukler button {
  padding: 0;
  border: 1px solid var(--hat);
  background: var(--kagit);
  cursor: pointer;
  aspect-ratio: 4/5;
  width: 76px;
  flex: none;
  overflow: hidden;
}
.galeri-kucukler button[aria-selected="true"] { border-color: var(--murekkep); }
.galeri-kucukler img { width: 100%; height: 100%; object-fit: cover; }
.galeri-buyuk {
  aspect-ratio: 4/5;
  background: var(--kagit);
  border: 1px solid var(--hat);
  overflow: hidden;
}
.galeri-buyuk img { width: 100%; height: 100%; object-fit: cover; }

.urun-bilgi h1 { margin-bottom: .25em; }
.urun-fiyat {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  margin: 1.2rem 0;
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
}
.urun-fiyat .fiyat-eski { font-size: 1rem; }

.adet-secici {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--hat-koyu);
  background: var(--kagit);
}
.adet-secici button {
  width: 42px; height: 46px;
  border: 0;
  background: none;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--murekkep);
}
.adet-secici input {
  width: 48px;
  height: 46px;
  border: 0;
  border-inline: 1px solid var(--hat);
  text-align: center;
  padding: 0;
  font-variant-numeric: tabular-nums;
}
.sepet-satiri { display: flex; gap: .75rem; margin: 1.5rem 0; flex-wrap: wrap; }
.sepet-satiri .dugme { flex: 1; min-width: 200px; }

/* kunye: taki damgasi gibi dizilmis teknik bilgi */
.kunye {
  border-top: 1px solid var(--hat);
  margin-top: 2rem;
}
.kunye dl {
  display: grid;
  grid-template-columns: 34% 1fr;
  margin: 0;
  font-size: .87rem;
}
.kunye dt {
  padding: .7rem 0;
  border-bottom: 1px solid var(--hat);
  color: var(--celik);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.kunye dd {
  padding: .7rem 0;
  border-bottom: 1px solid var(--hat);
  margin: 0;
}

.stok-bilgi { font-size: .82rem; }
.stok-var { color: var(--yesil); }
.stok-az { color: var(--indirim); }
.stok-yok { color: var(--celik); }

.guven-serit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hat);
  font-size: .78rem;
  color: var(--celik);
}
.guven-serit div { display: flex; gap: .5rem; align-items: flex-start; }
.guven-serit svg { width: 17px; height: 17px; flex: none; margin-top: 2px; stroke-width: 1.4; }

/* ---------------------------------------------------------- sepet */
.sepet-duzen {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
@media (max-width: 900px) { .sepet-duzen { grid-template-columns: 1fr; } }

.sepet-satir {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: 1.1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--hat);
  align-items: center;
}
.sepet-satir-gorsel { aspect-ratio: 4/5; background: var(--kagit); border: 1px solid var(--hat); overflow: hidden; }
.sepet-satir-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.sepet-satir h3 { font-size: 1.02rem; margin-bottom: .2rem; }
.sepet-satir-alt { display: flex; gap: 1rem; align-items: center; margin-top: .6rem; flex-wrap: wrap; }
.sil-dugme {
  border: 0; background: none; padding: 0;
  font-size: .76rem; color: var(--celik);
  text-decoration: underline; cursor: pointer;
}
.sil-dugme:hover { color: var(--indirim); }
@media (max-width: 560px) {
  .sepet-satir { grid-template-columns: 72px 1fr; }
  .sepet-satir > :last-child { grid-column: 2; text-align: right; }
}

.ozet {
  background: var(--kagit);
  border: 1px solid var(--hat);
  padding: 1.5rem;
  position: sticky;
  top: 96px;
}
.ozet-satir {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .5rem 0;
  font-size: .9rem;
}
.ozet-toplam {
  border-top: 1px solid var(--hat);
  margin-top: .6rem;
  padding-top: .9rem;
  font-size: 1.15rem;
  font-weight: 500;
}
.kargo-bar { margin: 1rem 0; }
.kargo-bar-yol { height: 3px; background: var(--hat); overflow: hidden; }
.kargo-bar-dolu { height: 100%; background: var(--murekkep); transition: width 400ms ease; }
.kargo-bar p { font-size: .76rem; color: var(--celik); margin: .5rem 0 0; }

.kupon-alan { display: flex; gap: .5rem; margin: 1rem 0; }
.kupon-alan input { flex: 1; }

/* ---------------------------------------------------------- odeme */
.odeme-duzen {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
@media (max-width: 940px) { .odeme-duzen { grid-template-columns: 1fr; } }

.odeme-blok { margin-bottom: 2.5rem; }
.odeme-blok h2 {
  font-size: 1.15rem;
  font-family: var(--govde);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--hat);
  margin-bottom: 1.3rem;
}
.odeme-secenek {
  display: flex;
  gap: .8rem;
  padding: 1rem;
  border: 1px solid var(--hat-koyu);
  margin-bottom: .7rem;
  cursor: pointer;
  transition: border-color var(--gecis);
}
.odeme-secenek:has(input:checked) { border-color: var(--murekkep); background: var(--kagit); }
.odeme-secenek input { width: auto; flex: none; margin-top: .3rem; }
.odeme-secenek strong { display: block; font-weight: 500; }
.odeme-secenek small { color: var(--celik); }

.mini-satir {
  display: flex;
  gap: .8rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--hat);
  font-size: .85rem;
}
.mini-satir img { width: 52px; aspect-ratio: 4/5; object-fit: cover; border: 1px solid var(--hat); }

/* ---------------------------------------------------------- basari */
.basari-kutu {
  max-width: 620px;
  margin-inline: auto;
  text-align: center;
  background: var(--kagit);
  border: 1px solid var(--hat);
  padding: clamp(2rem, 6vw, 3.5rem);
}
.basari-kutu .yildiz { width: 40px; height: 40px; margin: 0 auto 1.5rem; color: var(--murekkep); }
.siparis-no {
  font-family: var(--serif);
  font-size: 1.8rem;
  letter-spacing: .04em;
  margin: .5rem 0 1.5rem;
}
.havale-kutu {
  text-align: left;
  background: var(--sedef);
  padding: 1.2rem;
  margin: 1.5rem 0;
  font-size: .88rem;
}
.havale-kutu code {
  font-family: var(--govde);
  letter-spacing: .06em;
  font-size: .95rem;
  display: block;
  margin-top: .3rem;
}

/* ---------------------------------------------------------- hesap */
.hesap-duzen { display: grid; grid-template-columns: 220px 1fr; gap: 2.5rem; align-items: start; }
@media (max-width: 800px) { .hesap-duzen { grid-template-columns: 1fr; } }
.hesap-menu { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hat); }
.hesap-menu li { border-bottom: 1px solid var(--hat); }
.hesap-menu a { display: block; padding: .8rem 0; font-size: .9rem; }
.hesap-menu a.aktif { font-weight: 500; }
.hesap-menu a:hover { color: var(--kristal); }

.tablo { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tablo th {
  text-align: left;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--celik);
  font-weight: 500;
  padding: .7rem .6rem;
  border-bottom: 1px solid var(--hat-koyu);
}
.tablo td { padding: .85rem .6rem; border-bottom: 1px solid var(--hat); }
.tablo tr:hover td { background: var(--kagit); }

.durum {
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .25rem .55rem;
  border: 1px solid var(--hat-koyu);
  white-space: nowrap;
}
.durum-yeni { border-color: var(--kristal); color: var(--kristal); }
.durum-kargoda { border-color: var(--murekkep); color: var(--murekkep); }
.durum-teslim { border-color: var(--yesil); color: var(--yesil); }
.durum-iptal { border-color: var(--indirim); color: var(--indirim); }

/* ---------------------------------------------------------- icerik sayfasi */
.icerik { max-width: 68ch; }
.icerik p { margin: 0 0 1.1em; }
.icerik h2 { margin-top: 2em; }
.icerik ul { padding-left: 1.2rem; }
.icerik a { color: var(--kristal); text-decoration: underline; }

/* ---------------------------------------------------------- bos durum */
.bos-durum {
  text-align: center;
  padding: clamp(3rem, 8vw, 5rem) 1rem;
  border: 1px dashed var(--hat-koyu);
}
.bos-durum .yildiz { width: 32px; height: 32px; margin: 0 auto 1.2rem; color: var(--hat-koyu); }
.bos-durum h2 { margin-bottom: .3em; }
.bos-durum p { color: var(--celik); margin: 0 0 1.8rem; }

/* ---------------------------------------------------------- sayfalama */
.sayfalama {
  display: flex;
  justify-content: center;
  gap: .35rem;
  margin-top: 3rem;
}
.sayfalama a, .sayfalama span {
  min-width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  padding-inline: .7rem;
  border: 1px solid var(--hat);
  font-size: .85rem;
  background: var(--kagit);
}
.sayfalama a:hover { border-color: var(--murekkep); }
.sayfalama .aktif { background: var(--murekkep); border-color: var(--murekkep); color: #fff; }

/* ---------------------------------------------------------- alt bilgi */
.altbilgi {
  background: var(--gece);
  color: #C6C9CE;
  margin-top: clamp(3rem, 8vw, 6rem);
  padding-block: clamp(2.5rem, 6vw, 4rem) 1.5rem;
  font-size: .87rem;
}
.altbilgi a:hover { color: #fff; }
.altbilgi-izgara {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
@media (max-width: 860px) { .altbilgi-izgara { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 520px) { .altbilgi-izgara { grid-template-columns: 1fr; } }
.altbilgi h4 {
  font-family: var(--govde);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #FFF;
  margin-bottom: 1.1rem;
}
.altbilgi ul { list-style: none; margin: 0; padding: 0; }
.altbilgi li { margin-bottom: .55rem; }
.altbilgi img.logo { height: 24px; margin-bottom: 1.2rem; }
.altbilgi p { color: #9BA1AA; max-width: 34ch; }

.bulten-form { display: flex; gap: .5rem; margin-top: 1rem; }
.bulten-form input {
  background: transparent;
  border-color: rgba(255,255,255,.25);
  color: #fff;
}
.bulten-form input::placeholder { color: #7E858F; }
.bulten-form .dugme { border-color: #fff; background: #fff; color: var(--gece); padding-inline: 1.2rem; }
.bulten-form .dugme:hover { background: transparent; color: #fff; }

.altbilgi-son {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.5rem;
  font-size: .78rem;
  color: #7E858F;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------- hareket */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ekran okuyucu */
.gizli {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* =====================================================================
   MIREY CLUB
   Rozet rengi seviyeden gelir: element uzerinde --seviye tanimlanir.
   ===================================================================== */

.club-rozet {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .7rem;
  border: 1px solid var(--seviye, var(--celik));
  color: var(--seviye, var(--celik));
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.club-rozet::before {
  content: "";
  width: 9px; height: 9px;
  background: currentColor;
  clip-path: polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%);
}
.club-rozet-buyuk { padding: .5rem 1rem; font-size: .74rem; }

/* ---------------------------------------------------------- vitrin */
.club-vitrin {
  background: var(--gece);
  color: #E7E9EC;
  padding-block: clamp(3rem, 8vw, 5.5rem);
}
.club-vitrin .etiket { color: #8C949E; }
.club-vitrin h1 { color: #fff; font-size: clamp(2.4rem, 6vw, 4.2rem); margin-bottom: .2em; }
.club-vitrin-metin { max-width: 52ch; color: #AEB4BC; font-size: 1.02rem; }

/* ---------------------------------------------------------- uye karti */
.club-kart {
  background: var(--kagit);
  color: var(--murekkep);
  border: 1px solid var(--hat);
  padding: clamp(1.3rem, 3vw, 2rem);
  margin-top: 2.5rem;
  max-width: 560px;
}
.club-kart-ust {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}
.club-bakiye {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  line-height: 1;
  margin: .15em 0 .1em;
  font-variant-numeric: tabular-nums;
}
.club-tl { font-size: .82rem; color: var(--celik); }

.club-ilerleme { margin-top: 1.6rem; }
.club-ilerleme-yol { height: 3px; background: var(--hat); overflow: hidden; }
.club-ilerleme-dolu { height: 100%; background: var(--murekkep); transition: width 500ms ease; }
.club-ilerleme p { font-size: .82rem; color: var(--celik); margin: .6rem 0 0; }
.club-ilerleme-tam { font-size: .85rem; color: var(--yesil); margin: 1.4rem 0 0; }

.club-kart-alt { display: flex; gap: .6rem; margin-top: 1.6rem; flex-wrap: wrap; }

/* ---------------------------------------------------------- adimlar */
.club-adimlar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
}
.club-adimlar li { border-top: 1px solid var(--hat-koyu); padding-top: 1.1rem; }
.club-adim-no {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--hat-koyu);
  display: block;
  margin-bottom: .4rem;
}
.club-adimlar h3 { font-size: 1.15rem; margin-bottom: .35em; }
.club-adimlar p { color: var(--celik); font-size: .9rem; margin: 0; }

.club-ozet-cumle {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hat);
  font-family: var(--serif);
  font-size: 1.25rem;
}

/* ---------------------------------------------------------- seviyeler */
.club-seviyeler {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
}
.club-seviye {
  border: 1px solid var(--hat);
  padding: 1.5rem;
  position: relative;
  background: var(--sedef);
}
.club-seviye-aktif {
  border-color: var(--seviye);
  background: var(--kagit);
  box-shadow: inset 3px 0 0 var(--seviye);
}
.club-seviye-esik { font-size: .8rem; color: var(--celik); margin: .9rem 0 1rem; }
.club-seviye ul { list-style: none; margin: 0; padding: 0; font-size: .88rem; }
.club-seviye li { padding: .35rem 0; border-top: 1px solid var(--hat); }
.club-seviye-etiket {
  display: block;
  margin-top: 1rem;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--seviye);
}

/* ---------------------------------------------------------- davet */
.club-davet {
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  background: var(--kagit);
  border: 1px solid var(--hat);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
@media (max-width: 760px) { .club-davet { grid-template-columns: 1fr; } }
.club-kod-kutu { text-align: center; border-left: 1px solid var(--hat); padding-left: 1.5rem; }
@media (max-width: 760px) {
  .club-kod-kutu { border-left: 0; border-top: 1px solid var(--hat); padding: 1.5rem 0 0; }
}
.club-kod {
  font-family: var(--serif);
  font-size: 1.9rem;
  letter-spacing: .1em;
  margin: .4rem 0 1rem;
}

/* ---------------------------------------------------------- kurallar */
.club-kurallar {
  max-width: 70ch;
  padding-left: 0;
  list-style: none;
}
.club-kurallar li {
  padding: .6rem 0 .6rem 1.5rem;
  border-bottom: 1px solid var(--hat);
  font-size: .9rem;
  position: relative;
}
.club-kurallar li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.05rem;
  width: 8px; height: 8px;
  background: var(--hat-koyu);
  clip-path: polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%);
}

/* ---------------------------------------------------------- urun sayfasi satiri */
.club-satir {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .85rem;
  padding: .7rem .9rem;
  background: var(--kagit);
  border: 1px solid var(--hat);
  margin: 0 0 1rem;
}
.club-satir .yildiz { width: 12px; height: 12px; flex: none; color: var(--murekkep); }

/* ---------------------------------------------------------- odeme kutusu */
.club-odeme {
  background: var(--kagit);
  border: 1px solid var(--hat);
  padding: 1.2rem;
}
.club-odeme-ust {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
  font-size: .88rem;
}
.club-kazanim {
  font-size: .82rem;
  color: var(--yesil);
  margin: 1rem 0 0;
  padding-top: .8rem;
  border-top: 1px solid var(--hat);
}

/* ---------------------------------------------------------- ust bardaki club ikonu */
.club-ikon { position: relative; }
.club-ikon svg { stroke-width: 1.3; }

/* Uye olmayanda ici bos yildiz, uyede dolu ve seviye renginde */
.club-ikon-uye { color: var(--seviye, var(--murekkep)); }
.club-ikon-uye:hover { color: var(--seviye, var(--murekkep)); filter: brightness(.85); }

.puan-rozeti {
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: var(--seviye, var(--murekkep));
  color: #fff;
  font-size: .64rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  display: inline-grid;
  place-items: center;
  line-height: 1;
}

/* Uc ikon yan yana sigmadiginda once etiketler dusulur */
@media (max-width: 1100px) { .gizle-dar { display: none; } }
@media (max-width: 900px) {
  .club-ikon .puan-rozeti { font-size: .6rem; padding: 0 5px; }
}
@media (max-width: 420px) {
  .ustbar-sag { gap: .1rem; }
  .ikon-dugme { padding: .55rem .45rem; }
}

/* =====================================================================
   HERO SLIDER
   ===================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--gece);
  border-bottom: 1px solid var(--hat);
}

.hero-raylar { display: grid; }
/* Slaytlar ust uste; yalnizca aktif olan gorunur. Yukseklik en uzun
   slayta gore belirlenir, boylece gecislerde sayfa ziplamaz. */
.hero-slayt {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(420px, 46vw, 620px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 700ms ease;
}
.hero-slayt[data-aktif] { opacity: 1; visibility: visible; }

.hero-zemin { position: absolute; inset: 0; overflow: hidden; }
.hero-zemin img,
.hero-zemin video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Video yuklenip oynayana kadar poster gorunur */
.hero-video { position: absolute; inset: 0; opacity: 0; transition: opacity 600ms ease; }
.hero-video[data-oynuyor] { opacity: 1; }

.hero-perde {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(20,22,26,calc(var(--koyuluk) + .18)) 0%,
    rgba(20,22,26,var(--koyuluk)) 46%,
    rgba(20,22,26,calc(var(--koyuluk) * .35)) 100%);
}
.hero-orta .hero-perde {
  background: rgba(20,22,26,var(--koyuluk));
}

.hero-icerik { position: relative; width: 100%; }
.hero-metin { max-width: 46ch; }
.hero-orta .hero-metin { margin-inline: auto; text-align: center; }
.hero-sag  .hero-metin { margin-left: auto; text-align: right; }

.hero-yazi-acik { color: #fff; }
.hero-yazi-acik .etiket { color: rgba(255,255,255,.72); }
.hero-yazi-acik p { color: rgba(255,255,255,.86); }
.hero-yazi-acik .dugme {
  background: #fff; border-color: #fff; color: var(--gece);
}
.hero-yazi-acik .dugme:hover { background: transparent; color: #fff; border-color: #fff; }

.hero-yazi-koyu { color: var(--murekkep); }
.hero-yazi-koyu p { color: var(--celik); }

.hero-baslik {
  font-size: clamp(2.2rem, 5.4vw, 4.2rem);
  line-height: 1.05;
  margin: .1em 0 .45em;
  color: inherit;
  text-wrap: balance;
}
.hero-metin p {
  font-size: clamp(.95rem, 1.4vw, 1.05rem);
  margin: 0 0 2rem;
}

/* ---------------------------------------------------------- kontroller */
.hero-ok {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(20,22,26,.25);
  backdrop-filter: blur(4px);
  color: #fff;
  cursor: pointer;
  z-index: 3;
  transition: background var(--gecis), border-color var(--gecis);
}
.hero-ok:hover { background: rgba(20,22,26,.55); border-color: #fff; }
.hero-ok svg { width: 20px; height: 20px; stroke-width: 1.5; }
.hero-ok-sol { left: clamp(.6rem, 2vw, 1.5rem); }
.hero-ok-sag { right: clamp(.6rem, 2vw, 1.5rem); }
@media (max-width: 700px) { .hero-ok { display: none; } }

.hero-noktalar {
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  translate: -50% 0;
  display: flex;
  gap: .5rem;
  z-index: 3;
}
.hero-noktalar button {
  width: 28px; height: 3px;
  padding: 0;
  border: 0;
  background: rgba(255,255,255,.4);
  cursor: pointer;
  transition: background var(--gecis);
}
.hero-noktalar button:hover { background: rgba(255,255,255,.7); }
.hero-noktalar button[aria-selected="true"] { background: #fff; }

.hero-durdur {
  position: absolute;
  right: 1.2rem;
  bottom: 1.1rem;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  color: rgba(255,255,255,.6);
  cursor: pointer;
  z-index: 3;
}
.hero-durdur:hover { color: #fff; }
.hero-durdur svg { width: 15px; height: 15px; }
@media (max-width: 700px) { .hero-durdur { display: none; } }

/* Hareket azaltma tercihinde gecisler ani, video oynamaz */
@media (prefers-reduced-motion: reduce) {
  .hero-slayt { transition: none; }
  .hero-video { display: none; }
}

/* =====================================================================
   GORSELLI KATEGORI SERIDI
   ===================================================================== */
.kategori-serit-gorselli {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(.5rem, 1.2vw, 1rem);
  background: none;
  border: 0;
}
.kategori-gorsel-kutu {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--kagit);
}
.kategori-gorsel-kutu img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: scale 700ms cubic-bezier(.22,.61,.36,1);
}
.kategori-gorsel-kutu:hover img { scale: 1.05; }
.kategori-gorsel-kutu::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20,22,26,.55) 0%, rgba(20,22,26,.08) 45%, transparent 70%);
}
.kategori-gorsel-yazi {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.1rem;
  z-index: 2;
  color: #fff;
}
.kategori-gorsel-yazi .ad {
  font-family: var(--serif);
  font-size: 1.3rem;
  display: block;
  line-height: 1.2;
}
.kategori-gorsel-yazi .adet {
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
}

/* =====================================================================
   EDITORYAL BANT (hediye kutusu vb.)
   ===================================================================== */
.editoryal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: var(--kagit);
  border: 1px solid var(--hat);
}
@media (max-width: 800px) { .editoryal { grid-template-columns: 1fr; } }
.editoryal-gorsel { position: relative; min-height: 340px; overflow: hidden; }
.editoryal-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.editoryal-metin {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.8rem, 5vw, 3.5rem);
}
.editoryal-metin h2 { margin-bottom: .3em; }
.editoryal-metin p { color: var(--celik); max-width: 40ch; margin: 0 0 1.8rem; }
.editoryal-ters .editoryal-gorsel { order: 2; }

/* ---------------------------------------------------------- kampanya rozeti */
.rozet-kampanya {
  background: var(--kmp, var(--indirim));
  border-color: var(--kmp, var(--indirim));
  color: #fff;
}
.kampanya-satir {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  font-size: .85rem;
  padding: .7rem .9rem;
  background: var(--kagit);
  border: 1px solid var(--hat);
  border-left: 3px solid var(--kmp, var(--indirim));
  margin: 0 0 1rem;
}

/* Birden fazla duyuru varsa sirayla doner */
.duyuru { position: relative; overflow: hidden; }
.duyuru[data-duyuru-donen] .duyuru-metin { display: none; }
.duyuru[data-duyuru-donen] .duyuru-metin[data-aktif] { display: inline; }

/* ---------------------------------------------------------- favori */
.favori-form { position: absolute; top: .6rem; right: .6rem; z-index: 3; margin: 0; }
.favori-dugme {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hat);
  background: rgba(255,255,255,.92);
  color: var(--celik);
  cursor: pointer;
  border-radius: 50%;
  padding: 0;
  transition: color var(--gecis), border-color var(--gecis), scale 160ms ease;
}
.favori-dugme svg { width: 17px; height: 17px; stroke-width: 1.5; }
.favori-dugme:hover { color: var(--indirim); border-color: var(--indirim); }
.favori-dugme.favori-dolu { color: var(--indirim); border-color: var(--indirim); }
.favori-dugme:active { scale: .9; }

.favori-metin {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 0;
  border: 0;
  background: none;
  color: var(--celik);
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
}
.favori-metin svg { width: 17px; height: 17px; stroke-width: 1.5; }
.favori-metin:hover { color: var(--indirim); }
.favori-metin.favori-dolu { color: var(--indirim); }

/* =====================================================================
   YILDIZ PUANI
   ===================================================================== */
.yildiz-puan { display: inline-flex; gap: 2px; vertical-align: middle; }
.yildiz-puan .yp {
  width: 15px; height: 15px;
  display: inline-block;
  background: var(--hat-koyu);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.yildiz-puan .yp-dolu { background: #C9A227; }
.yildiz-puan .yp-yarim {
  background: linear-gradient(90deg, #C9A227 50%, var(--hat-koyu) 50%);
}
.yildiz-mini .yp { width: 11px; height: 11px; }
.yildiz-kucuk .yp { width: 13px; height: 13px; }
.yildiz-buyuk .yp { width: 20px; height: 20px; }

.kart-puan {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
  color: var(--celik);
  margin-bottom: .3rem;
}
.urun-puan {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .85rem;
  margin-bottom: .8rem;
}
.urun-puan:hover { color: var(--kristal); }

/* =====================================================================
   YORUMLAR
   ===================================================================== */
.yorum-duzen {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
@media (max-width: 800px) { .yorum-duzen { grid-template-columns: 1fr; } }

.yorum-ozet {
  background: var(--kagit);
  border: 1px solid var(--hat);
  padding: 1.4rem;
  text-align: center;
  position: sticky;
  top: 96px;
}
@media (max-width: 800px) { .yorum-ozet { position: static; } }
.yorum-ortalama {
  font-family: var(--serif);
  font-size: 3rem;
  line-height: 1;
  margin: 0 0 .4rem;
}
.yorum-adet { font-size: .82rem; color: var(--celik); margin: .6rem 0 0; }

.yorum-dagilim { margin-top: 1.2rem; text-align: left; }
.yorum-cubuk {
  display: grid;
  grid-template-columns: 12px 1fr 28px;
  align-items: center;
  gap: .5rem;
  margin-bottom: .3rem;
  font-size: .74rem;
  color: var(--celik);
}
.yorum-cubuk-no { text-align: center; font-variant-numeric: tabular-nums; }
.yorum-cubuk-yol { height: 4px; background: var(--hat); overflow: hidden; }
.yorum-cubuk-dolu { height: 100%; background: #C9A227; }
.yorum-cubuk-adet { text-align: right; font-variant-numeric: tabular-nums; }

.yorum {
  border-bottom: 1px solid var(--hat);
  padding: 1.4rem 0;
}
.yorum:first-of-type { padding-top: 0; }
.yorum-ust {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}
.yorum-ust time { font-size: .78rem; color: var(--celik); white-space: nowrap; }
.yorum-baslik { font-size: 1.05rem; margin: .4rem 0 0; }
.yorum-kim { font-size: .84rem; margin: .5rem 0; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.yorum-rozet {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .7rem;
  color: var(--yesil);
}
.yorum-rozet svg { width: 13px; height: 13px; stroke-width: 2.2; }
.yorum-metin { margin: .6rem 0; font-size: .93rem; }
.yorum-gorsel { display: inline-block; margin: .5rem 0; }
.yorum-gorsel img {
  width: 96px; height: 120px;
  object-fit: cover;
  border: 1px solid var(--hat);
}
.yorum-yanit {
  background: var(--kagit);
  border-left: 3px solid var(--murekkep);
  padding: .9rem 1.1rem;
  margin: .8rem 0 0;
}
.yorum-yanit p { margin: .3rem 0 0; font-size: .88rem; }
.yorum-alt { margin-top: .8rem; }

.faydali-dugme {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .8rem;
  border: 1px solid var(--hat-koyu);
  background: none;
  color: var(--celik);
  font: inherit;
  font-size: .78rem;
  cursor: pointer;
  transition: color var(--gecis), border-color var(--gecis);
}
.faydali-dugme svg { width: 15px; height: 15px; stroke-width: 1.5; }
.faydali-dugme:hover:not(:disabled) { color: var(--murekkep); border-color: var(--murekkep); }
.faydali-dugme:disabled { opacity: .55; cursor: default; }
.faydali-verildi { color: var(--yesil); border-color: var(--yesil); }

.yorum-form {
  background: var(--kagit);
  border: 1px solid var(--hat);
  padding: 1.5rem;
  margin-bottom: 2rem;
}
.yorum-dogrulandi {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  color: var(--yesil);
  margin: -.4rem 0 1rem;
}
.yorum-dogrulandi svg { width: 15px; height: 15px; stroke-width: 2.2; }

/* yildiz secici: sagdan sola dizilir ki hover soldan dolsun */
.yildiz-secici { display: inline-flex; flex-direction: row-reverse; gap: 3px; }
.yildiz-secici input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.yildiz-secici label {
  width: 30px; height: 30px;
  cursor: pointer;
  background: var(--hat-koyu);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  transition: background 120ms ease;
  margin: 0;
}
.yildiz-secici label:hover,
.yildiz-secici label:hover ~ label,
.yildiz-secici input:checked ~ label { background: #C9A227; }
.yildiz-secici input:focus-visible + label { outline: 2px solid var(--kristal); outline-offset: 2px; }

.yorum-urun {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .85rem;
  color: var(--celik);
  margin: .5rem 0;
}
.yorum-urun img { width: 34px; height: 42px; object-fit: cover; border: 1px solid var(--hat); }
.yorum-urun:hover { color: var(--kristal); }

/* =====================================================================
   MÜŞTERİ PANELİ
   ===================================================================== */
.hesap-menu a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
}
.menu-rozet {
  font-size: .68rem;
  padding: .1rem .4rem;
  background: var(--murekkep);
  color: #fff;
  border-radius: 9px;
  font-variant-numeric: tabular-nums;
}
.hesap-menu a.aktif .menu-rozet { background: var(--kristal); }

.hesap-sayilar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .8rem;
  margin-bottom: 1.5rem;
}
.hesap-sayi { background: var(--kagit); border: 1px solid var(--hat); padding: 1.1rem; }
.hesap-sayi strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.8rem;
  font-weight: 400;
  margin-top: .2rem;
  font-variant-numeric: tabular-nums;
}
.hesap-sayi small { display: block; font-size: .74rem; color: var(--celik); }

.hesap-kart {
  background: var(--kagit);
  border: 1px solid var(--hat);
  padding: 1.3rem;
  margin-bottom: 1.2rem;
}
.hesap-kart-vurgu { border-left: 3px solid var(--murekkep); }

/* sipariş ilerleme adımları */
.siparis-adim {
  list-style: none;
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
}
.siparis-adim li {
  flex: 1;
  position: relative;
  padding-top: 1.3rem;
  font-size: .76rem;
  color: var(--celik);
  text-align: center;
}
.siparis-adim li::before {
  content: "";
  position: absolute;
  top: 5px; left: 0; right: 0;
  height: 1px;
  background: var(--hat);
}
.siparis-adim li:first-child::before { left: 50%; }
.siparis-adim li:last-child::before  { right: 50%; }
.siparis-adim li.gecti::before { background: var(--murekkep); }
.siparis-adim-nokta {
  position: absolute;
  top: 0; left: 50%;
  translate: -50% 0;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--kagit);
  border: 1px solid var(--hat-koyu);
}
.siparis-adim li.gecti .siparis-adim-nokta { background: var(--murekkep); border-color: var(--murekkep); }
.siparis-adim li.gecti { color: var(--murekkep); }

/* sipariş kartı */
.siparis-kart {
  background: var(--kagit);
  border: 1px solid var(--hat);
  padding: 1.1rem 1.3rem;
  margin-bottom: .9rem;
}
.siparis-kart-ust {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}
.siparis-no-link { font-weight: 500; }
.siparis-no-link:hover { color: var(--kristal); }
.siparis-tarih { display: block; font-size: .78rem; color: var(--celik); margin-top: .15rem; }
.siparis-kart-orta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin: 1rem 0;
  flex-wrap: wrap;
}
.siparis-gorseller { display: flex; gap: .4rem; align-items: center; }
.siparis-gorseller img,
.siparis-gorsel-bos {
  width: 46px; height: 58px;
  object-fit: cover;
  border: 1px solid var(--hat);
  background: var(--sedef);
  display: grid;
  place-items: center;
}
.siparis-gorsel-bos .yildiz { width: 14px; height: 14px; color: var(--hat-koyu); }
.siparis-gorsel-fazla {
  font-size: .78rem;
  color: var(--celik);
  padding-left: .2rem;
}
.siparis-kart-tutar { text-align: right; }
.siparis-kart-tutar strong { display: block; font-size: 1.05rem; }
.siparis-kart-tutar span { font-size: .76rem; color: var(--celik); }
.siparis-kart-alt {
  display: flex;
  gap: .8rem;
  align-items: center;
  flex-wrap: wrap;
  padding-top: .9rem;
  border-top: 1px solid var(--hat);
}
.siparis-takip { font-size: .78rem; color: var(--celik); }
@media (max-width: 640px) { .siparis-bilgi-izgara { grid-template-columns: 1fr !important; } }

/* mini ürün şeridi */
.mini-urunler { display: flex; gap: .7rem; flex-wrap: wrap; }
.mini-urun {
  width: 108px;
  font-size: .78rem;
  line-height: 1.35;
}
.mini-urun img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border: 1px solid var(--hat);
  margin-bottom: .35rem;
}
.mini-urun:hover { color: var(--kristal); }
.mini-urun-eylem {
  display: block;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--kristal);
  margin-top: .2rem;
}

/* adres kartları */
.adres-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .9rem;
}
.adres-kart {
  background: var(--kagit);
  border: 1px solid var(--hat);
  padding: 1.1rem;
  font-size: .88rem;
}
.adres-varsayilan { border-color: var(--murekkep); box-shadow: inset 3px 0 0 var(--murekkep); }
.adres-kart-ust { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.adres-etiket {
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--murekkep);
  border: 1px solid var(--murekkep);
  padding: .1rem .35rem;
}
.adres-kart p { margin: .6rem 0; line-height: 1.7; }
.adres-eylem { display: flex; gap: .8rem; flex-wrap: wrap; padding-top: .6rem; border-top: 1px solid var(--hat); }
.adres-eylem .metin-link { font-size: .78rem; }

/* iade formu */
.iade-kalem {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .9rem 0;
  border-bottom: 1px solid var(--hat);
  cursor: pointer;
}
.iade-kalem input[type="checkbox"] { width: auto; flex: none; }
.iade-kalem img { width: 52px; aspect-ratio: 4/5; object-fit: cover; border: 1px solid var(--hat); }
.iade-kalem-bilgi { flex: 1; display: flex; flex-direction: column; gap: .15rem; }
.iade-adet input { width: 66px; padding: .4rem; }

/* ---------------------------------------------------------- PayTR çerçevesi */
.odeme-cerceve {
  max-width: 640px;
  margin-inline: auto;
  background: var(--kagit);
  border: 1px solid var(--hat);
  padding: .5rem;
  min-height: 500px;
}
.odeme-cerceve iframe { display: block; min-height: 480px; }
.durum-odeme_bekliyor { border-color: var(--uyari, #A98A54); color: #A98A54; }

/* =====================================================================
   TAKI DENEME
   ===================================================================== */
.deneme-ac {
  gap: .5rem;
  margin: 0 0 1rem;
}
.deneme-ac svg { width: 18px; height: 18px; stroke-width: 1.4; }

.deneme-perde {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(20, 22, 26, .78);
  backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  padding: clamp(.5rem, 3vw, 2rem);
  overflow-y: auto;
}
.deneme-kutu {
  background: var(--sedef);
  width: min(560px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  padding: clamp(1.1rem, 3vw, 1.8rem);
}
.deneme-basi {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.2rem;
}
.deneme-basi h2 { font-size: 1.3rem; margin: .2rem 0 0; }

.deneme-kipler {
  display: flex;
  gap: 0;
  border: 1px solid var(--hat-koyu);
  margin-bottom: 1.2rem;
}
.deneme-kipler button {
  flex: 1;
  padding: .6rem .4rem;
  border: 0;
  background: none;
  font: inherit;
  font-size: .78rem;
  letter-spacing: .05em;
  cursor: pointer;
  color: var(--celik);
  border-right: 1px solid var(--hat-koyu);
}
.deneme-kipler button:last-child { border-right: 0; }
.deneme-kipler button[aria-selected="true"] { background: var(--murekkep); color: #fff; }

/* ---------------------------------------------------------- canlı sahne */
.deneme-sahne {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--gece);
  overflow: hidden;
}
.deneme-sahne video,
.deneme-sahne canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ayna görüntüsü: kullanıcı kendini doğal görsün */
  transform: scaleX(-1);
}
.deneme-sahne video { display: none; }
.deneme-sahne[data-aktif="1"] video { display: block; }
.deneme-sahne[data-aktif="1"] .deneme-baslat { display: none; }

.deneme-baslat {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 1rem;
  text-align: center;
  padding: 1.5rem;
  color: #E7E9EC;
}
.deneme-baslat p { margin: 0; font-size: .92rem; }

.deneme-durum {
  font-size: .84rem;
  text-align: center;
  padding: .6rem;
  margin: .6rem 0 0;
  background: var(--kagit);
  border: 1px solid var(--hat);
}
.deneme-durum[data-tip="hata"] { border-color: var(--indirim); color: var(--indirim); }

.deneme-eylem {
  display: flex;
  gap: .6rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: .9rem;
}
.deneme-not {
  font-size: .76rem;
  color: var(--celik);
  text-align: center;
  margin: .7rem 0 0;
}
.deneme-baslat .deneme-not { color: rgba(255,255,255,.6); }

/* ---------------------------------------------------------- fotoğraf kipi */
.deneme-foto {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--kagit);
  border: 1px solid var(--hat);
  overflow: hidden;
  touch-action: none;
}
.deneme-foto img[data-foto-arka] { width: 100%; height: 100%; object-fit: cover; display: none; }
.deneme-foto[data-dolu="1"] img[data-foto-arka] { display: block; }
.deneme-foto[data-dolu="1"] .deneme-foto-bos { display: none; }
.deneme-foto-bos {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 1rem;
  text-align: center;
  padding: 1.5rem;
  color: var(--celik);
}
.deneme-foto-taki {
  position: absolute;
  width: 38%;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  cursor: grab;
  user-select: none;
  display: none;
  filter: drop-shadow(0 4px 10px rgba(20,22,26,.35));
}
.deneme-foto[data-dolu="1"] .deneme-foto-taki { display: block; }
.deneme-foto-taki:active { cursor: grabbing; }

.deneme-ayar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: .9rem;
}
.deneme-ayar label { display: block; }
.deneme-ayar span {
  display: block;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--celik);
  margin-bottom: .3rem;
}
.deneme-ayar input[type="range"] { width: 100%; }

/* ---------------------------------------------------------- gerçek boyut */
.deneme-olcu { text-align: center; }
.olcu-kart {
  height: 54px;
  width: 320px;
  max-width: 100%;
  margin: 1rem auto .6rem;
  border: 2px dashed var(--hat-koyu);
  border-radius: 8px;
  background: repeating-linear-gradient(45deg,
    transparent, transparent 6px, rgba(140,148,158,.12) 6px, rgba(140,148,158,.12) 12px);
}
.deneme-olcu input[type="range"] { width: min(320px, 100%); }
.olcu-urun {
  margin: 1.6rem auto .5rem;
  display: grid;
  place-items: center;
  gap: .5rem;
  min-height: 120px;
}
.olcu-urun img { max-width: 100%; height: auto; }
.olcu-etiket {
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--celik);
}

.deneme-uyari {
  font-size: .72rem;
  color: var(--celik);
  margin: 1.2rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid var(--hat);
  line-height: 1.6;
}

/* ürün kartında rozet */
.rozet-deneme {
  background: var(--kagit);
  border-color: var(--kristal);
  color: var(--kristal);
}

/* ---------------------------------------------------------- kategori SEO metni */
.kategori-seo {
  max-width: 72ch;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--hat);
  font-size: .92rem;
  color: var(--celik);
}
.kategori-seo h2, .kategori-seo h3 { color: var(--murekkep); font-size: 1.15rem; }
.kategori-seo p { margin: 0 0 1em; }
.kategori-seo a { color: var(--kristal); text-decoration: underline; }

/* =====================================================================
   IŞIK KATMANI
   Takı vitrinindeki spot aydınlatmasından esinlenildi. Üç davranış:
     1. Bölüm zeminlerinde yumuşak radyal yıkama
     2. Ürün görselinde imleci izleyen spot
     3. Metal üzerinde gezinen parıltı (hover)
   Hepsi hareket azaltma tercihine saygı duyar.
   ===================================================================== */

:root {
  --spot-guc: .55;          /* genel şiddet; azaltmak için düşürün */
  --parilti: rgba(255,255,255,.55);
}

/* ---------------------------------------------------------- bölüm yıkaması */
.bolum,
.bolum-dar {
  position: relative;
  isolation: isolate;
}
.bolum::before,
.bolum-dar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 65% at 50% -10%,
      rgba(255,255,255,.85) 0%,
      rgba(255,255,255,0) 62%);
}
/* Koyu bölümlerde ışık yukarıdan değil ortadan gelsin */
.club-vitrin { position: relative; isolation: isolate; }
.club-vitrin::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(80% 120% at 22% 0%,
      rgba(169,138,84,.16) 0%,
      rgba(169,138,84,0) 58%),
    radial-gradient(60% 100% at 88% 100%,
      rgba(53,97,127,.20) 0%,
      rgba(53,97,127,0) 60%);
}

/* Alt bilgide üstten sızan ışık */
.altbilgi { position: relative; isolation: isolate; }
.altbilgi::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(90% 70% at 50% 0%,
    rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 70%);
}

/* ---------------------------------------------------------- gradyan ayraçlar */
.yildiz-ayrac::before,
.yildiz-ayrac::after {
  background: linear-gradient(90deg,
    rgba(226,225,222,0) 0%, var(--hat) 30%, var(--hat) 70%, rgba(226,225,222,0) 100%);
}

.bolum-basi { position: relative; }
.bolum-basi::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -.9rem;
  height: 1px;
  background: linear-gradient(90deg, var(--hat-koyu) 0%, rgba(201,200,196,0) 55%);
}

/* ---------------------------------------------------------- ürün kartı spotu */
/* Ürün fotoğraflarının soğuk beyaz zeminiyle uyumlu gradyan.
   Sıcak tona dönmek isterseniz: #FFFFFF → #FAFAF9 → #F2F1EF */
.urun-kart-gorsel {
  position: relative;
  background:
    radial-gradient(70% 55% at 50% 22%, #FFFFFF 0%, #F6F9FC 55%, #EDF2F8 100%);
}

/* İmleç konumu JS ile --mx / --my olarak yazılır */
.urun-kart-gorsel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 320ms ease;
  background: radial-gradient(
    28% 28% at var(--mx, 50%) var(--my, 50%),
    rgba(255,255,255,calc(.42 * var(--spot-guc))) 0%,
    rgba(255,255,255,0) 70%);
  mix-blend-mode: soft-light;
}
.urun-kart:hover .urun-kart-gorsel::before { opacity: 1; }

/* Metal üzerinde gezinen parıltı */
.urun-kart-gorsel::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 45%;
  z-index: 3;
  pointer-events: none;
  transform: skewX(-18deg);
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    var(--parilti) 50%,
    rgba(255,255,255,0) 100%);
  opacity: 0;
}
.urun-kart:hover .urun-kart-gorsel::after {
  animation: parilti-gec 900ms cubic-bezier(.3,.6,.4,1) forwards;
}
@keyframes parilti-gec {
  0%   { left: -60%; opacity: 0; }
  18%  { opacity: .8; }
  100% { left: 115%; opacity: 0; }
}

/* ---------------------------------------------------------- ürün detay galerisi */
.galeri-buyuk {
  background:
    radial-gradient(65% 50% at 50% 28%, #FFFFFF 0%, #FAFAF9 58%, #F1F0EE 100%);
  position: relative;
}
.galeri-buyuk::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Vitrin camındaki hafif yansıma */
  background: linear-gradient(115deg,
    rgba(255,255,255,.28) 0%,
    rgba(255,255,255,0) 32%,
    rgba(255,255,255,0) 100%);
}

/* Video hazır olana kadar görünen poster karesi (LCP için) */
.hero-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-slayt[data-yuklendi="1"] .hero-poster { opacity: 0; transition: opacity 400ms ease; }

/* ---------------------------------------------------------- hero spotu */
.hero-zemin::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(70% 90% at 30% 40%,
    rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 60%);
}

/* ---------------------------------------------------------- düğme parıltısı */
.dugme {
  position: relative;
  overflow: hidden;
}
.dugme::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -50%;
  width: 40%;
  transform: skewX(-20deg);
  background: linear-gradient(90deg,
    rgba(255,255,255,0), rgba(255,255,255,.22), rgba(255,255,255,0));
  opacity: 0;
}
.dugme:hover::after { animation: parilti-gec 700ms ease forwards; }
.dugme-cizgi::after { background: linear-gradient(90deg,
    rgba(61,67,77,0), rgba(61,67,77,.10), rgba(61,67,77,0)); }

/* ---------------------------------------------------------- kategori kutusu ışığı */
.kategori-gorsel-kutu::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 400ms ease;
  background: radial-gradient(60% 50% at 50% 30%,
    rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 70%);
}
.kategori-gorsel-kutu:hover::before { opacity: 1; }

/* ---------------------------------------------------------- hareket azaltma */
@media (prefers-reduced-motion: reduce) {
  .urun-kart-gorsel::after,
  .dugme::after { display: none; }
  .urun-kart-gorsel::before { transition: none; }
}

/* =====================================================================
   INSTAGRAM ŞERİDİ
   ===================================================================== */
.instagram-bolum { background: var(--kagit); border-block: 1px solid var(--hat); }

.ig-takip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .88rem;
  padding: .5rem .9rem;
  border: 1px solid var(--hat-koyu);
  transition: border-color var(--gecis), color var(--gecis);
}
.ig-takip svg { width: 17px; height: 17px; stroke-width: 1.5; }
.ig-takip:hover { border-color: var(--murekkep); color: var(--murekkep); }

.ig-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(.4rem, 1vw, .8rem);
}
.ig-kutu {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--sedef);
  display: block;
}
.ig-kutu img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: scale 700ms cubic-bezier(.22,.61,.36,1);
}
.ig-kutu:hover img { scale: 1.06; }

.ig-perde {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: .8rem;
  color: #fff;
  background: linear-gradient(to top,
    rgba(20,22,26,.62) 0%, rgba(20,22,26,.10) 45%, rgba(20,22,26,0) 70%);
  opacity: 0;
  transition: opacity var(--gecis);
}
.ig-kutu:hover .ig-perde,
.ig-kutu:focus-visible .ig-perde { opacity: 1; }

.ig-tur {
  position: absolute;
  top: .6rem; right: .7rem;
  font-size: .8rem;
  opacity: .9;
}
.ig-kutu .ig-tur { opacity: .85; }
.ig-perde .ig-yazi { font-size: .78rem; line-height: 1.4; }
.ig-urun { font-size: .82rem; line-height: 1.35; }
.ig-urun small {
  display: block;
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  margin-top: .2rem;
}

/* Video/albüm rozeti perdeden bağımsız her zaman görünsün */
.ig-kutu > .ig-perde > .ig-tur { opacity: 1; }
.ig-kutu::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(20,22,26,.05);
}

.ig-alt { text-align: center; margin: 2rem 0 0; }

/* =====================================================================
   CAM KATMANI
   Cam efekti ancak ARKASINDA bir şey varsa cam gibi görünür: görsel,
   video ya da koyu zemin. Bu yüzden yalnızca öyle yerlere uygulanır.
   Düz beyaz üstünde uygulanırsa gri bir dikdörtgen olur, cam olmaz.
   ===================================================================== */

:root {
  --cam-zemin:  rgba(255,255,255,.16);
  --cam-koyu:   rgba(20,22,26,.52);
  --cam-hat:    rgba(255,255,255,.26);
  --cam-bulanik: 18px;
  --cam-yuvarlak: 18px;
}

/* Ortak cam gövdesi */
.cam,
.cam-koyu {
  -webkit-backdrop-filter: blur(var(--cam-bulanik)) saturate(150%);
  backdrop-filter: blur(var(--cam-bulanik)) saturate(150%);
  border: 1px solid var(--cam-hat);
  border-radius: var(--cam-yuvarlak);
  /* Üst kenarda ince bir ışık çizgisi — cam kalınlığı hissi verir */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    0 12px 34px -18px rgba(20,22,26,.55);
}
.cam { background: var(--cam-zemin); }
.cam-koyu { background: var(--cam-koyu); color: #F1F2F4; }

/* backdrop-filter desteklemeyen tarayıcıda saydamlığı azalt,
   yoksa yazı okunmaz */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cam      { background: rgba(255,255,255,.86); }
  .cam-koyu { background: rgba(20,22,26,.86); }
}

/* ---------------------------------------------------------- hero cam paneli */
.hero-metin.cam-panel {
  background: var(--cam-koyu);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid var(--cam-hat);
  border-radius: 22px;
  padding: clamp(1.5rem, 4vw, 2.6rem);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 20px 50px -26px rgba(20,22,26,.7);
}
.hero-sag .hero-metin.cam-panel  { margin-left: auto; }
.hero-orta .hero-metin.cam-panel { margin-inline: auto; }

/* ---------------------------------------------------------- kategori etiketi */
.kategori-gorsel-yazi.cam-plaka {
  left: .7rem; right: .7rem; bottom: .7rem;
  padding: .8rem .95rem;
  background: var(--cam-koyu);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--cam-hat);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24);
}
/* Cam plaka varken alttaki karartma gradyanı gereksiz */
.kategori-gorsel-kutu.cam-var::after { background: none; }

/* ---------------------------------------------------------- ürün kartı rozetleri */
.cam-var .rozet {
  background: rgba(255,255,255,.62);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  border-color: rgba(255,255,255,.5);
  border-radius: 20px;
}
.cam-var .rozet-indirim,
.cam-var .rozet-yeni,
.cam-var .rozet-kampanya { color: #fff; }
.cam-var .rozet-indirim { background: rgba(166,57,74,.82); }
.cam-var .rozet-yeni    { background: rgba(61,67,77,.82); }

/* Karta hover'da beliren sepet düğmesi */
.cam-var .hizli-ekle .dugme {
  background: rgba(20,22,26,.62);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border-color: rgba(255,255,255,.28);
  border-radius: 12px;
}
.cam-var .hizli-ekle .dugme:hover { background: rgba(20,22,26,.85); }

.cam-var .favori-dugme {
  background: rgba(255,255,255,.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-color: rgba(255,255,255,.5);
}

/* ---------------------------------------------------------- Instagram perdesi */
.ig-perde.cam-perde {
  background: linear-gradient(to top,
    rgba(20,22,26,.55) 0%, rgba(20,22,26,.10) 55%, rgba(20,22,26,0) 100%);
}
.ig-perde.cam-perde .ig-urun,
.ig-perde.cam-perde .ig-yazi {
  background: rgba(20,22,26,.42);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 11px;
  padding: .5rem .65rem;
}

/* ---------------------------------------------------------- deneme penceresi */
.deneme-kutu.cam-koyu-pencere {
  background: rgba(244,243,241,.72);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  backdrop-filter: blur(26px) saturate(150%);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 24px 60px -30px rgba(20,22,26,.6);
}

/* ---------------------------------------------------------- mobil menü */
.mobil-menu.cam-var {
  background: rgba(244,243,241,.82);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
}

/* ---------------------------------------------------------- üst bar */
.ustbar.cam-var {
  background: rgba(244,243,241,.62);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border-bottom-color: rgba(226,225,222,.7);
}

/* =====================================================================
   CAM İSTATİSTİK KARTLARI  (görsel üstünde, dikey dizili)
   ===================================================================== */
.rakam-bandi {
  position: relative;
  overflow: hidden;
  background: var(--gece);
  padding-block: clamp(3rem, 7vw, 5rem);
}
.rakam-bandi > img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .55;
}
.rakam-bandi::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    rgba(20,22,26,.72) 0%, rgba(20,22,26,.34) 55%, rgba(20,22,26,.15) 100%);
}
.rakam-ic { position: relative; z-index: 2; }

.rakam-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(.7rem, 1.6vw, 1.1rem);
  max-width: 640px;
}
.rakam-kart {
  background: var(--cam-koyu);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--cam-hat);
  border-radius: 20px;
  padding: 1.4rem 1.5rem;
  color: #F1F2F4;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26);
}
.rakam-kart strong {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 2.9rem);
  line-height: 1;
  letter-spacing: -.01em;
}
.rakam-kart span {
  display: block;
  margin-top: .55rem;
  font-size: .88rem;
  line-height: 1.5;
  color: rgba(241,242,244,.76);
}

/* =====================================================================
   WHATSAPP DÜĞMESİ
   ===================================================================== */
.wa-dugme {
  position: fixed;
  right: clamp(.8rem, 2.5vw, 1.6rem);
  bottom: clamp(.8rem, 2.5vw, 1.6rem);
  z-index: 150;
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding: .55rem 1.15rem .55rem .55rem;
  border-radius: 999px;
  background: rgba(24,26,30,.72);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 14px 38px -14px rgba(20,22,26,.75);
  color: #F1F2F4;
  transition: transform var(--gecis), background var(--gecis);
}
.wa-dugme:hover {
  transform: translateY(-2px);
  background: rgba(24,26,30,.85);
}
.wa-dugme:active { transform: translateY(0); }

.wa-ikon {
  width: 42px; height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
}
.wa-ikon svg { width: 22px; height: 22px; }

.wa-metin { display: flex; flex-direction: column; gap: .12rem; line-height: 1.25; }
.wa-durum {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .88rem;
  font-weight: 500;
}
.wa-nokta {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #8C949E;
  flex: none;
}
.wa-musait .wa-nokta {
  background: #25D366;
  box-shadow: 0 0 0 0 rgba(37,211,102,.55);
  animation: wa-nabiz 2.4s ease-out infinite;
}
@keyframes wa-nabiz {
  0%   { box-shadow: 0 0 0 0 rgba(37,211,102,.5); }
  70%  { box-shadow: 0 0 0 7px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
.wa-alt { font-size: .76rem; color: rgba(241,242,244,.66); }

/* Dar ekranda yalnızca ikon; yazı yer kaplamasın */
@media (max-width: 560px) {
  .wa-dugme { padding: .5rem; gap: 0; }
  .wa-metin { display: none; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .wa-dugme { background: rgba(24,26,30,.94); }
}
@media (prefers-reduced-motion: reduce) {
  .wa-musait .wa-nokta { animation: none; }
  .wa-dugme:hover { transform: none; }
}

/* =====================================================================
   STOK BİLDİRİMİ
   ===================================================================== */
.stok-bildirim {
  background: var(--kagit);
  border: 1px solid var(--hat);
  border-left: 3px solid var(--murekkep);
  padding: 1.2rem 1.3rem;
  margin: 0 0 1.2rem;
}
.stok-bildirim-basi { display: flex; gap: .9rem; align-items: flex-start; margin-bottom: 1rem; }
.stok-bildirim-ikon {
  width: 34px; height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--hat);
  color: var(--murekkep);
}
.stok-bildirim-ikon svg { width: 17px; height: 17px; stroke-width: 1.5; }
.stok-bildirim-basi strong { display: block; font-size: 1rem; margin-bottom: .2rem; }
.stok-bildirim-basi p { margin: 0; font-size: .87rem; color: var(--celik); line-height: 1.55; }

.stok-bekleyen {
  display: inline-block;
  margin-left: .3rem;
  font-size: .74rem;
  padding: .1rem .45rem;
  background: var(--murekkep);
  color: #fff;
  border-radius: 10px;
  white-space: nowrap;
}

.stok-bildirim-satir { display: flex; gap: .5rem; flex-wrap: wrap; }
.stok-bildirim-satir input { flex: 1; min-width: 190px; }
.stok-bildirim-satir .dugme { flex: none; }
.stok-bildirim-not,
.stok-bildirim-uye { font-size: .76rem; color: var(--celik); margin: .6rem 0 0; }
.stok-bildirim-sonuc {
  margin: .9rem 0 0;
  padding: .7rem .9rem;
  font-size: .87rem;
  background: #fff;
  border: 1px solid var(--yesil);
  color: var(--yesil);
}
.stok-bildirim-sonuc[data-tip="hata"] { border-color: var(--indirim); color: var(--indirim); }

/* =====================================================================
   TAKSİT
   ===================================================================== */
.taksit-satir { margin: -.4rem 0 1rem; }
.taksit-ac {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .1rem;
  padding: .55rem .85rem;
  border: 1px solid var(--hat-koyu);
  background: var(--kagit);
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: border-color var(--gecis);
}
.taksit-ac:hover { border-color: var(--murekkep); }
.taksit-ac strong { font-size: .92rem; font-weight: 500; }
.taksit-ac span {
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--kristal);
}

.taksit-perde {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(20,22,26,.7);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  padding: 1rem;
  overflow-y: auto;
}
.taksit-kutu {
  background: var(--sedef);
  width: min(430px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  padding: 1.5rem;
}
.taksit-tablo { width: 100%; border-collapse: collapse; font-size: .9rem; }
.taksit-tablo th {
  text-align: left;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--celik);
  font-weight: 400;
  padding: .5rem 0;
  border-bottom: 1px solid var(--hat-koyu);
}
.taksit-tablo td {
  padding: .65rem 0;
  border-bottom: 1px solid var(--hat);
  font-variant-numeric: tabular-nums;
}
.taksit-faizsiz td { color: var(--murekkep); }
.taksit-rozet {
  display: inline-block;
  margin-left: .35rem;
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .1rem .4rem;
  border: 1px solid var(--yesil);
  color: var(--yesil);
}


/* ---------------------------------------------------------- iletişim kartları */
.iletisim-kartlari {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: .8rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--hat);
}
.iletisim-kart {
  display: block;
  background: var(--kagit);
  border: 1px solid var(--hat);
  padding: 1.1rem 1.2rem;
  transition: border-color var(--gecis);
}
.iletisim-kart:hover { border-color: var(--murekkep); }
.iletisim-kart strong {
  display: block;
  margin-top: .25rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
}
.iletisim-adres { grid-column: 1 / -1; }
.iletisim-adres:hover { border-color: var(--hat); }
.iletisim-adres strong { font-weight: 400; font-size: .93rem; }

/* ---------------------------------------------------------- ürün etiketleri */
.urun-etiketler { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.urun-etiket {
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .25rem .55rem;
  border: 1px solid var(--et, var(--hat-koyu));
  color: var(--et, var(--celik));
}

/* ---------------------------------------------------------- grup fiyat notu */
.grup-fiyat-not {
  margin: -.6rem 0 1rem;
  padding: .5rem .75rem;
  background: var(--kagit);
  border-left: 2px solid var(--kristal);
  font-size: .84rem;
  color: var(--celik);
}
.grup-fiyat-not strong { color: var(--kristal); font-weight: 500; }
.grup-fiyat-not span { display: block; font-size: .78rem; margin-top: .15rem; }

/* =====================================================================
   TASARIM GÜNCELLEMESİ — yeni modüller
   ===================================================================== */

/* ---------------------------------------------------------- kayan şerit altyapısı */
.serit-sar {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.serit-sar::-webkit-scrollbar { display: none; }

.serit {
  display: flex;
  gap: clamp(.7rem, 1.4vw, 1.1rem);
  padding: 0 max(1.25rem, calc((100vw - var(--en)) / 2));
}
.serit > * { scroll-snap-align: start; flex: none; }

.serit-oklar { display: flex; gap: .4rem; }
.serit-ok {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--hat-koyu);
  background: var(--kagit);
  color: var(--murekkep);
  cursor: pointer;
  transition: all var(--gecis);
}
.serit-ok:hover { border-color: var(--murekkep); background: var(--murekkep); color: #fff; }
.serit-ok:disabled { opacity: .3; cursor: default; }
.serit-ok:disabled:hover { background: var(--kagit); color: var(--murekkep); border-color: var(--hat-koyu); }
.serit-ok svg { width: 17px; height: 17px; stroke-width: 1.6; }

/* ---------------------------------------------------------- kategori atlıkarınca */
.kategori-serit .kategori-kart {
  position: relative;
  width: clamp(200px, 22vw, 268px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--zemin-urun);
  display: block;
}
.kategori-kart img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: scale 700ms cubic-bezier(.22,.61,.36,1);
}
.kategori-kart:hover img { scale: 1.06; }
.kategori-kart-bos {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #fff 0%, var(--zemin-urun) 100%);
}
.kategori-kart-bos .yildiz { width: 30px; height: 30px; opacity: .35; }

.kategori-kart-yazi {
  position: absolute;
  left: .8rem; right: .8rem; bottom: .8rem;
  padding: .7rem .85rem;
  background: rgba(28, 34, 44, .58);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
}
.kategori-kart-yazi strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.18rem;
  font-weight: 400;
  letter-spacing: .01em;
}
.kategori-kart-yazi small {
  display: block;
  font-size: .66rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  opacity: .78;
  margin-top: .15rem;
}

/* ---------------------------------------------------------- müşteri görüşleri */
.gorus-bolum { overflow: hidden; }
.gorus-ozet { text-align: right; margin: 0; font-size: .86rem; color: var(--celik); }
.gorus-ozet strong {
  font-family: var(--serif);
  font-size: 1.7rem;
  color: var(--murekkep);
  display: block;
  line-height: 1;
}
.gorus-ozet span { display: block; margin-top: .2rem; }

.gorus-akis { display: grid; gap: 1rem; overflow: hidden; }
.gorus-sira {
  display: flex;
  gap: 1rem;
  width: max-content;
}

/* ÜST SIRA: sağa doğru kayar (soldan gelir)
   İçerik iki kez basıldığı için %50 kayınca başa dönmüş olur;
   dönüş görünmez, akış kesintisiz durur. */
.gorus-sira { animation: gorus-saga 68s linear infinite; }
@keyframes gorus-saga {
  from { translate: -50% 0; }
  to   { translate: 0 0; }
}

/* ALT SIRA: sola doğru kayar — ters yön, farklı hız.
   Aynı hızda olsalar iki sıra birlikte akıyor gibi görünür. */
.gorus-sira-ters { animation: gorus-sola 84s linear infinite; }
@keyframes gorus-sola {
  from { translate: 0 0; }
  to   { translate: -50% 0; }
}

.gorus-akis:hover .gorus-sira { animation-play-state: paused; }

.gorus-kart {
  width: clamp(268px, 26vw, 340px);
  flex: none;
  margin: 0;
  padding: 1.15rem 1.25rem;
  background: var(--kagit);
  border: 1px solid var(--hat);
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.gorus-ust { display: flex; align-items: center; justify-content: space-between; }
.gorus-yildiz { display: inline-flex; gap: .1rem; }
.gorus-yildiz svg { width: 15px; height: 15px; }
.gorus-onay {
  width: 19px; height: 19px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--yesil);
  color: #fff;
}
.gorus-onay svg { width: 11px; height: 11px; stroke-width: 3; }

.gorus-kart blockquote {
  margin: 0;
  font-size: .92rem;
  line-height: 1.62;
  color: var(--murekkep);
  flex: 1;
}
.gorus-kart figcaption {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding-top: .7rem;
  border-top: 1px solid var(--hat);
}
.gorus-harf {
  width: 32px; height: 32px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--sedef);
  border: 1px solid var(--hat);
  font-size: .8rem;
  color: var(--murekkep);
}
.gorus-kart figcaption strong { display: block; font-size: .86rem; font-weight: 500; }
.gorus-kart figcaption small { display: block; font-size: .74rem; color: var(--celik); }
.gorus-kart figcaption small a { color: var(--celik); }
.gorus-kart figcaption small a:hover { color: var(--kristal); }

@media (prefers-reduced-motion: reduce) {
  .gorus-sira { animation: none; }
  .gorus-akis { overflow-x: auto; }
}

/* ---------------------------------------------------------- yelpaze banner */
.yelpaze-bolum { overflow: hidden; }
.yelpaze-not { margin: 0; font-size: .86rem; color: var(--celik); max-width: 24ch; text-align: right; }

.yelpaze {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(-2rem, -1.5vw, 0rem);
  margin-top: clamp(1.5rem, 3vw, 2.6rem);
  padding: 1rem 0 2rem;
  perspective: 1400px;
}
.yelpaze-kare {
  position: relative;
  width: clamp(140px, 15vw, 240px);
  aspect-ratio: 3 / 4;
  flex: none;
  overflow: hidden;
  border-radius: 14px;
  background: var(--zemin-urun);
  box-shadow: 0 18px 46px -20px rgba(24, 32, 44, .34);
  z-index: var(--z, 1);
  rotate: var(--aci, 0deg);
  translate: 0 var(--kayma, 0);
  scale: var(--olcek, 1);
  transition: rotate 480ms var(--gecis), translate 480ms var(--gecis),
              scale 480ms var(--gecis), box-shadow 480ms var(--gecis);
  margin-inline: -.6rem;
}
.yelpaze-orta {
  width: clamp(180px, 20vw, 320px);
  z-index: 20;
  box-shadow: 0 26px 60px -22px rgba(24, 32, 44, .42);
}
.yelpaze-kare img { width: 100%; height: 100%; object-fit: cover; display: block; }

a.yelpaze-kare:hover {
  rotate: 0deg;
  translate: 0 -8px;
  scale: calc(var(--olcek, 1) + .05);
  z-index: 30;
  box-shadow: 0 30px 66px -20px rgba(24, 32, 44, .46);
}

.yelpaze-yazi {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.6rem .9rem .85rem;
  background: linear-gradient(180deg, rgba(20,26,36,0) 0%, rgba(20,26,36,.76) 100%);
  color: #fff;
}
.yelpaze-yazi strong {
  display: block;
  font-family: var(--serif);
  font-size: clamp(.9rem, 1.2vw, 1.1rem);
  font-weight: 400;
}
.yelpaze-yazi small {
  display: block;
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .8;
  margin-top: .1rem;
}

@media (max-width: 760px) {
  .yelpaze { overflow-x: auto; justify-content: flex-start; padding-inline: 1.25rem; scrollbar-width: none; }
  .yelpaze::-webkit-scrollbar { display: none; }
  .yelpaze-kare { rotate: 0deg; translate: 0; scale: 1; margin-inline: 0; }
  .yelpaze-orta { width: clamp(180px, 55vw, 260px); }
  .yelpaze-not { text-align: left; max-width: none; }
}

/* ---------------------------------------------------------- hediye şeridi (küçültüldü) */
.hediye-serit {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(1.2rem, 3vw, 2.6rem);
  background: var(--kagit);
  border: 1px solid var(--hat);
  overflow: hidden;
}
.hediye-gorsel { aspect-ratio: 16 / 11; overflow: hidden; }
.hediye-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hediye-yazi { padding: clamp(1.2rem, 2.5vw, 2rem) clamp(1.2rem, 2.5vw, 2.4rem) clamp(1.2rem, 2.5vw, 2rem) 0; }
.hediye-yazi h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin: .2rem 0 .7rem; }
.hediye-yazi p { color: var(--celik); max-width: 42ch; margin: 0 0 1.2rem; font-size: .93rem; }

@media (max-width: 720px) {
  .hediye-serit { grid-template-columns: 1fr; }
  .hediye-yazi { padding: 0 1.2rem 1.4rem; }
  .hediye-gorsel { aspect-ratio: 16 / 10; }
}

/* ---------------------------------------------------------- günlük (blog) kartları */
.yazi-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
}
.yazi-kart {
  display: flex;
  flex-direction: column;
  background: var(--kagit);
  border: 1px solid var(--hat);
  color: var(--murekkep);
  transition: border-color var(--gecis), box-shadow var(--gecis);
}
.yazi-kart:hover {
  border-color: var(--hat-koyu);
  box-shadow: 0 10px 30px -14px rgba(35, 45, 60, .18);
}
.yazi-kart-gorsel {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--zemin-urun);
}
.yazi-kart-gorsel img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: scale 700ms cubic-bezier(.22,.61,.36,1);
}
.yazi-kart:hover .yazi-kart-gorsel img { scale: 1.05; }
.yazi-kart-bos { width: 100%; height: 100%; display: grid; place-items: center; }
.yazi-kart-bos .yildiz { width: 28px; height: 28px; opacity: .3; }

.yazi-etiket {
  position: absolute;
  top: .6rem; left: .6rem;
  background: rgba(255,255,255,.95);
  border: 1px solid var(--hat);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .22rem .5rem;
}

.yazi-kart-govde { display: flex; flex-direction: column; flex: 1; padding: 1rem 1.1rem 1.1rem; }
.yazi-kart-govde h3 {
  font-family: var(--serif);
  font-size: 1.16rem;
  font-weight: 400;
  line-height: 1.32;
  margin: 0 0 .5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.yazi-kart-govde p {
  font-size: .88rem;
  color: var(--celik);
  line-height: 1.6;
  margin: 0 0 .9rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.yazi-kart-alt {
  margin-top: auto;
  display: flex;
  gap: .8rem;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--celik);
  padding-top: .7rem;
  border-top: 1px solid var(--hat);
}

/* ---------------------------------------------------------- alt bilgi üstü iletişim */
.iletisim-blok {
  position: relative;
  overflow: hidden;
  margin-top: clamp(2rem, 5vw, 4rem);
  padding: clamp(2.2rem, 5vw, 4.5rem) 0;
  background: var(--gece);
  isolation: isolate;
}
.iletisim-zemin {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
}
.iletisim-blok::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, rgba(20,26,36,.86) 0%, rgba(20,26,36,.52) 62%, rgba(20,26,36,.34) 100%);
}
.iletisim-blok-sade { background: var(--murekkep); }
.iletisim-blok-sade::after { background: none; }

.iletisim-ic {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 4vw, 4rem);
  align-items: center;
}
.iletisim-yazi { color: #fff; }
.iletisim-yazi .etiket { color: rgba(255,255,255,.62); }
.iletisim-yazi h2 {
  color: #fff;
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  margin: .3rem 0 .8rem;
  line-height: 1.14;
}
.iletisim-yazi h2 em { font-style: italic; color: #D9C7A8; }
.iletisim-yazi p { color: rgba(255,255,255,.76); max-width: 44ch; margin: 0 0 1.4rem; }

.iletisim-fisler { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.4rem; }
.iletisim-fis {
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 100px;
  padding: .35rem .9rem;
  font-size: .76rem;
  color: rgba(255,255,255,.86);
}
.iletisim-dogrudan { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .9rem; }
.iletisim-dogrudan a { color: #fff; border-bottom: 1px solid rgba(255,255,255,.35); }
.iletisim-dogrudan a:hover { border-bottom-color: #fff; }
.iletisim-dogrudan span { color: rgba(255,255,255,.4); }

.iletisim-form {
  background: rgba(30, 36, 47, .58);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 18px;
  padding: clamp(1.3rem, 3vw, 2.2rem);
}
.iletisim-alan { margin-bottom: 1.1rem; }
.iletisim-alan label {
  display: block;
  font-size: .72rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-bottom: .35rem;
}
.iletisim-alan input,
.iletisim-alan textarea {
  width: 100%;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.24);
  padding: .5rem 0;
  color: #fff;
  font: inherit;
  font-size: .95rem;
  border-radius: 0;
  transition: border-color var(--gecis);
}
.iletisim-alan textarea { resize: vertical; min-height: 3.4rem; }
.iletisim-alan input:focus,
.iletisim-alan textarea:focus { outline: none; border-bottom-color: #fff; }
.iletisim-alan input::placeholder,
.iletisim-alan textarea::placeholder { color: rgba(255,255,255,.34); }

.iletisim-dugme {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: .3rem;
  padding: .8rem 1.5rem;
  border: 0;
  border-radius: 100px;
  background: #fff;
  color: var(--gece);
  font: inherit;
  font-size: .88rem;
  cursor: pointer;
  transition: background var(--gecis), gap var(--gecis);
}
.iletisim-dugme:hover { background: #D9C7A8; gap: .9rem; }
.iletisim-dugme svg { width: 15px; height: 15px; stroke-width: 1.8; }

.iletisim-kvkk { font-size: .74rem; color: rgba(255,255,255,.5); margin: .9rem 0 0; }
.iletisim-kvkk a { color: rgba(255,255,255,.76); border-bottom: 1px solid rgba(255,255,255,.28); }

/* Robot tuzağı: ekranda görünmez, ekran okuyucudan da gizli */
.tuzak { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 860px) {
  .iletisim-ic { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------- bölüm başlığı bağlantısı */
.metin-baglanti {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .74rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--murekkep);
  white-space: nowrap;
  transition: gap var(--gecis);
}
.metin-baglanti:hover { gap: .7rem; color: var(--kristal); }
.metin-baglanti svg { width: 15px; height: 15px; stroke-width: 1.6; }

/* Başlıklardaki italik vurgu */
.bolum-basi h2 em { font-style: italic; color: var(--kristal); }

/* ---------------------------------------------------------- yazı sayfası */
.yazi-sayfa { max-width: 46rem; padding-block: clamp(1.5rem, 4vw, 3rem); }
.yazi-basi { margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.yazi-basi h1 {
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  line-height: 1.14;
  margin: .4rem 0 .8rem;
}
.yazi-bilgi {
  display: flex;
  gap: .9rem;
  font-size: .74rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--celik);
  margin: 0;
}
.yazi-kapak { margin: 0 0 clamp(1.4rem, 3vw, 2.4rem); }
.yazi-kapak img { width: 100%; height: auto; display: block; }
.yazi-govde { font-size: 1.02rem; line-height: 1.78; }
.yazi-govde h2 {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight: 400;
  margin: 2rem 0 .7rem;
}
.yazi-govde p { margin: 0 0 1.1rem; }
.yazi-govde ul, .yazi-govde ol { margin: 0 0 1.1rem; padding-left: 1.3rem; }
.yazi-govde li { margin-bottom: .45rem; }
.yazi-govde table { width: 100%; border-collapse: collapse; margin: 0 0 1.3rem; font-size: .93rem; }
.yazi-govde th {
  text-align: left;
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--celik);
  font-weight: 400;
  padding: .5rem 0;
  border-bottom: 1px solid var(--hat-koyu);
}
.yazi-govde td { padding: .55rem 0; border-bottom: 1px solid var(--hat); }
.yazi-govde em { color: var(--celik); }