/* =========================================================
   YELIGOODS — style.css
   Tasarım yönü: "Tek renk üründen gelir."
   Arayüz tamamen siyah/beyaz; sitedeki tek renk, deri fotoğrafları.
   Ürünler galeri etiketi mantığıyla sunulur.
   Renk paleti: #111111 / #FFFFFF (başka hiçbir renk yok)
   ========================================================= */

:root{
  /* AÇIK TEMA — zemin beyaz, yazı siyah.
     --dark  = zemin rengi   (isim eski, anlam yeni)
     --cream = yazı rengi
     Koyu kalması gereken alanlar .dark-section ile ters çevrilir. */
  --dark: #FFFFFF;
  --dark-2: #EDEDED;           /* açık gri kutu/bölüm zemini */
  --cream: #111111;
  --cream-dim: rgba(17,17,17,0.60);
  --cream-faint: rgba(17,17,17,0.38);
  --accent: #111111;
  --line: rgba(17,17,17,0.12);
  --line-strong: rgba(17,17,17,0.26);
  --radius: 4px;
  --ease: cubic-bezier(.22,.8,.28,1);

  /* Marka fontu — yalnızca marka anlarında: bölüm başlıkları,
     ürün adı, menü bağlantıları. Her yerde kullanılmaz. */
  --display: 'Bodoni Moda', 'Times New Roman', serif;
  /* Gövde fontu — geometrik sans, didone ile eşleşir, Türkçe güvenli */
  --body: 'Jost', system-ui, -apple-system, sans-serif;
  /* Etiket / kod / fiyat */
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

/* Koyu alan — hero, duyuru şeridi, footer gibi yerlerde */
.dark-section{
  --dark: #111111;
  --dark-2: #1A1A1A;
  --cream: #FFFFFF;
  --cream-dim: rgba(255,255,255,0.62);
  --cream-faint: rgba(255,255,255,0.38);
  --accent: #FFFFFF;
  --line: rgba(255,255,255,0.13);
  --line-strong: rgba(255,255,255,0.26);
  background:var(--dark);
  color:var(--cream);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{
  scroll-behavior:smooth;
  /* overflow-x:hidden BURAYA KONULMAZ — position:sticky'yi bozar,
     navbar sayfa kaydırılınca yukarıda kalmaz. Taşma body'de tutulur. */
}
body{
  background:var(--dark);
  color:var(--cream);
  font-family:var(--body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;   /* hidden yerine clip: sticky çalışmaya devam eder */
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{list-style:none;}
button{font-family:inherit;}
.wrap{
  max-width:1200px; margin:0 auto;
  /* Yan boşluk ayrı tanımlı: satır içi "padding" yazılsa bile
     sol/sağ korunur, yalnızca üst/alt ezilir. */
  padding-left:22px !important;
  padding-right:22px !important;
  padding-top:0; padding-bottom:0;
}
@media (min-width:768px){ .wrap{padding-left:34px !important; padding-right:34px !important;} }

/* Dokunmatik cihazlarda tarayıcının mavi vurgusunu kaldır */
*{-webkit-tap-highlight-color:transparent;}

/* Fare veya dokunuşla tıklamada halka çıkmasın */
a:focus, button:focus, input:focus, textarea:focus, select:focus{outline:none;}

/* Klavyeyle gezinildiğinde markaya uygun bir gösterge kalsın */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible{
  outline:1px solid var(--accent);
  outline-offset:3px;
}

/* Renk ve çıtçıt seçicilerde halka yerine kendi işaretimiz var */
.tone-btn:focus, .variant-btn:focus,
.gal-dot:focus, .photo-thumb:focus{outline:none;}
.tone-btn:focus-visible, .variant-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px var(--dark), 0 0 0 3px var(--cream);
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  html{scroll-behavior:auto;}
}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

/* ---------- Tipografi sistemi ----------
   Display: yüksek kontrastlı didone — moda editoryali tavrı.
   Türkçe metinler gövde yazısında Inter ile set edilir (İ, ı, Ğ, Ş, Ç güvenli). */
/* Marka anları için yardımcı sınıf — YELIGOODS yazısı gibi yerlerde */
.display{font-family:var(--display); font-weight:400; letter-spacing:-0.015em; line-height:1.02; text-transform:none;}
/* Başlıklar da gövde fontunda — büyük harf, geniş aralık.
   Marka fontu (Bodoni) YALNIZCA YELIGOODS yazısında kalır. */
h1,h2,h3{
  font-family:var(--body);
  font-weight:400;
  letter-spacing:0.14em;
  text-transform:uppercase;
  line-height:1.25;
}

/* Marka yazısı — tek istisna */
/* YELIGOODS yazısı — nerede geçerse geçsin aynı font ve görünüm */
.brand-word, .wordmark{
  font-family:var(--display) !important;
  text-transform:none !important;
  font-weight:400;
  letter-spacing:0.16em;
  padding-left:0.16em;
  white-space:nowrap;
}
.label{
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--cream-faint);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--cream); color:var(--dark);
  padding:16px 30px; font-size:13px; font-weight:500; letter-spacing:0.14em;
  text-transform:uppercase; font-family:var(--mono);
  border-radius:var(--radius); border:1px solid var(--cream); cursor:pointer;
  transition:background .35s var(--ease), color .35s var(--ease);
}
.btn:hover{background:transparent; color:var(--cream);}
.btn-outline{background:transparent; color:var(--cream); border:1px solid var(--line-strong);}
.btn-outline:hover{background:var(--cream); color:var(--dark); border-color:var(--cream);}
.btn-block{width:100%;}
.btn:disabled{opacity:0.4; cursor:not-allowed;}

/* =========================================================
   LOADING SCREEN
   ========================================================= */
.loading-screen{
  position:fixed; inset:0; z-index:500;
  background:#FFFFFF;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  gap:24px;
  transition:opacity .6s ease;
}
.loading-screen.fade-out{opacity:0; pointer-events:none;}
.loading-logo{
  width:120px; height:120px; border-radius:50%;
  overflow:hidden; border:1px solid rgba(17,17,17,0.1);
  background:#FFFFFF;
}
.loading-logo img{width:100%; height:100%; object-fit:contain; padding:26px;}
.loading-bar{width:140px; height:1px; background:rgba(17,17,17,0.12); overflow:hidden;}
.loading-bar::after{
  content:""; display:block; height:100%; width:38%;
  background:#111111;
  animation:loading-sweep 1.05s ease-in-out infinite;
}
@keyframes loading-sweep{
  0%{transform:translateX(-100%);}
  100%{transform:translateX(365%);}
}
@media (prefers-reduced-motion: reduce){ .loading-bar::after{animation:none; width:100%;} }

/* ---------- Marquee ---------- */
.marquee{
  background:#111111; color:#FFFFFF;
  border-bottom:none;
  overflow:hidden; white-space:nowrap;
  padding:12px 0; position:relative; z-index:80;
}
.marquee-track{
  display:inline-flex;
  animation:marquee-scroll 46s linear infinite;
  will-change:transform;
  backface-visibility:hidden;      /* GPU katmanı, yeniden boyama yok */
  contain:layout paint;            /* dışarıyı etkilemesin */
}
.marquee-track span{
  /* Şerit siyah zeminli ama açık tema değişkenleri miras alıyor;
     rengi sabit beyaz veriyoruz, yoksa koyu gri kalıp kayboluyor. */
  color:rgba(255,255,255,.92);
  font-family:var(--mono); font-size:13px; letter-spacing:0.2em;
  text-transform:uppercase;
  padding:0 20px; display:inline-flex; align-items:center;
  gap:20px;                      /* logo iki yazının tam ortasında */
}
.mq-logo{
  width:19px; height:auto; flex-shrink:0;
  opacity:.9;
}
@keyframes marquee-scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@media (prefers-reduced-motion: reduce){ .marquee-track{animation:none;} }

/* ---------- Kargo kampanyası sayacı ----------
   Sayaç açıkken kayan yazı gizlenir, bant sayaca dönüşür.
   Süre dolunca JavaScript .kampanya-acik sınıfını kaldırır ve
   kayan yazı geri gelir. */
.marquee.kampanya-acik{padding:9px 0;}
.marquee.kampanya-acik .marquee-track{display:none;}
.kampanya{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:6px 16px;
  padding:0 20px; text-align:center;
}
.kampanya-metin{
  font-family:var(--mono); font-size:13px; letter-spacing:0.2em;
  text-transform:uppercase; color:#FFFFFF;
}
.kampanya-bitis{
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.12em;
  text-transform:uppercase; color:rgba(255,255,255,0.55);
}
.kampanya-sayac{display:inline-flex; align-items:flex-start; gap:5px;}
.kampanya-birim{
  display:inline-flex; flex-direction:column; align-items:center;
  min-width:30px;
}
.kampanya-birim b{
  font-family:var(--mono); font-size:17px; line-height:1; font-weight:500;
  color:#FFFFFF; font-variant-numeric:tabular-nums;
}
.kampanya-birim span{
  font-family:var(--mono); font-size:8px; letter-spacing:0.08em;
  text-transform:uppercase; color:rgba(255,255,255,0.5); margin-top:4px;
}
.kampanya-ayrac{
  font-family:var(--mono); font-size:15px; line-height:1; font-style:normal;
  color:rgba(255,255,255,0.4);
}
.kampanya .yok{display:none;}

/* ---------- Navbar ---------- */
header{
  position:sticky; top:0; z-index:90;
  background:rgba(255,255,255,0.97);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(17,17,17,.09);
  transition:box-shadow .3s ease;
}
/* Sayfa kaydırılınca navbar içerikten ayrılsın */
header.kaydi{box-shadow:0 1px 16px rgba(0,0,0,.07);}
.nav{
  /* Marka yazısı ızgara akışının DIŞINDA, navbar'a göre mutlak
     ortalanır. Izgarayla ortalamak imkânsızdı: sağdaki küme
     (dil + iki ikon) soldakinden çok daha geniş olduğu için
     sütunlar eşitlenemiyor ve yazı sola kayıyordu. */
  position:relative;
  display:flex; align-items:center; justify-content:space-between;
  padding:15px 0; gap:12px;
}
.brand-word{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%, -50%);
  pointer-events:auto; white-space:nowrap;
}
.nav-left{display:flex; align-items:center; justify-content:flex-start; gap:2px;}
.nav-right{display:flex; align-items:center; justify-content:flex-end; gap:2px;}
.brand-word{
  font-family:var(--display);
  font-size:clamp(16px, 4.2vw, 25px);
  letter-spacing:0.13em; font-weight:400;
  padding-left:0.13em;
}

.icon-btn{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; flex-shrink:0;
  border:none; background:transparent; cursor:pointer;
  color:var(--cream); position:relative;
  transition:opacity .25s ease;
}
.icon-btn:hover{opacity:0.6;}
.icon-btn svg{width:19px; height:19px;}
.menu-toggle svg{width:28px; height:28px;}
.cart-count{
  position:absolute; top:-2px; right:-4px;
  background:var(--cream); color:var(--dark);
  font-size:9.5px; font-weight:700; font-family:var(--mono);
  width:16px; height:16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.cart-count[data-empty="true"]{display:none;}

/* ---------- Fullscreen menu ---------- */
.fullscreen-menu{
  position:fixed; inset:0; z-index:200;
  background:#000000;                 /* tam siyah */
  color:#FFFFFF;
  display:flex; flex-direction:column;
  transform:translateX(-100%);
  transition:transform .5s var(--ease);
  overflow-y:auto;
}
.fullscreen-menu.open{transform:translateX(0);}
.fsm-head{
  position:relative; display:flex; align-items:center;
  min-height:66px; padding:14px 22px;
  background:transparent;
}
.fsm-close{
  width:42px; height:42px; margin-left:-10px;
  border:none; background:transparent; color:#FFFFFF;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.fsm-links{
  flex:1; display:flex; flex-direction:column;
  justify-content:flex-start; padding:10px 30px 0; gap:0;
}
@media (min-width:768px){ .fsm-links{
  flex:1; display:flex; flex-direction:column;
  justify-content:flex-start; padding:10px 30px 0; gap:0;
} }
.fsm-links a, .fsm-links button{
  display:flex; align-items:center;
  position:relative;
  font-family:var(--body);
  font-size:16px; font-weight:400;
  letter-spacing:.18em; text-transform:uppercase;
  color:#FFFFFF;
  padding:22px 0; text-align:left; line-height:1.2;
  background:transparent; border:none; cursor:pointer; width:100%;
  border-bottom:1px solid rgba(255,255,255,.13);
  transition:opacity .25s ease;
}
.fsm-links a:hover, .fsm-links button:hover{opacity:.55;}

/* Hover: hafifçe sağa kayar */
.fsm-foot{
  padding:22px 30px 30px;
  border-top:1px solid rgba(255,255,255,.13);
  display:flex; align-items:center; justify-content:center; gap:36px;
}
.fsm-foot a{color:rgba(255,255,255,.55); transition:color .25s ease; display:flex;}
.fsm-foot a:hover{color:#FFFFFF;}
@media (min-width:768px){ .fsm-foot{
  padding:22px 30px 30px;
  border-top:1px solid rgba(255,255,255,.13);
  display:flex; align-items:center; justify-content:center; gap:36px;
} }

/* ---------- Hero ---------- */
.hero{
  /* Hero videonun üstünde beyaz yazı olduğu için koyu kalır */
  --cream: #FFFFFF;
  --cream-dim: rgba(255,255,255,0.62);
  --line: rgba(255,255,255,0.13);
  position:relative; overflow:hidden;
  width:100%;
  max-width:100%;
  background:#000000;
  /* 50×60 oran (5:6) — yükseklik genişliğin 1.2 katı.
     aspect-ratio yerine hesaplanmış yükseklik: yatay taşma olmaz. */
  height:min(120vw, 88vh);
  min-height:540px;
  display:flex; align-items:center; justify-content:center;
}
.hero-video{
  /* inset:0 elemanı zaten esnetir. height:100% eklenirse, hero
     yüksekliği auto olduğunda (telefon düzeni) yüzde çözülemiyor
     ve video görünmez oluyordu — o yüzden yok. */
  position:absolute; inset:0;
  width:100%; min-height:100%;
  object-fit:cover; z-index:0;
  filter:grayscale(100%) contrast(1.08) brightness(.95);
  -webkit-filter:grayscale(100%) contrast(1.08) brightness(.95);
  background:var(--dark);
}
.hero-overlay{position:absolute; inset:0; z-index:1; background:rgba(17,17,17,0.42);}

.hero-content{
  position:relative; z-index:2; text-align:center;
  display:flex; flex-direction:column; align-items:center;
  padding:64px 22px;
}
.hero-tagline{
  text-shadow:0 2px 14px rgba(0,0,0,.75), 0 0 34px rgba(0,0,0,.5);
  font-family:var(--mono);
  font-size:clamp(11px, 2.2vw, 14px);
  letter-spacing:0.3em; text-transform:uppercase;
  color:rgba(255,255,255,.82);
  margin-bottom:38px;
  text-shadow:0 2px 10px rgba(0,0,0,.4);
}
/* Hero butonu: video üstünde dolu beyaz kutu olarak kaynaşıyordu.
   Çerçeveli/şeffaf hâli her zeminde net okunuyor. */
.hero-content .btn{
  margin-top:4px;
  background:#FFFFFF;
  color:#111111;
  border:1px solid #FFFFFF;
  box-shadow:none;
  padding:18px 40px;
  letter-spacing:.18em;
}
.hero-content .btn::before{background:#111111;}
.hero-content .btn:hover{color:#FFFFFF; border-color:#FFFFFF;}

/* ---------- Light section ---------- */
/* Açık gri bölüm — beyazla dönüşümlü kullanılır */
.light-section{
  --dark: #EDEDED;
  --dark-2: #E2E2E2;
  --cream: #111111;
  --cream-dim: rgba(17,17,17,0.60);
  --cream-faint: rgba(17,17,17,0.38);
  --accent: #111111;
  --line: rgba(17,17,17,0.12);
  --line-strong: rgba(17,17,17,0.26);
  background:var(--dark);
  color:var(--cream);
}

/* ---------- Section sistemi ---------- */
section{padding:96px 0;}
.section-head{margin-bottom:52px;}
.section-head .label{display:block; margin-bottom:16px;}
.section-head h2{font-size:clamp(22px, 2.4vw, 32px); max-width:24ch;}
.section-head .lede{
  color:var(--cream-dim); font-size:16px; max-width:44ch; margin-top:18px;
}

/* ---------- Koleksiyon: galeri etiketi sistemi ----------
   Signature: her ürün beyaz bir çerçeve içinde, altında ince bir çizgi
   ve monospace bir "etiket" bloğu — müze/galeri künyesi mantığı. */
.collection-grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:56px 34px;
}

.collection-card{background:transparent;}
.collection-card-img{
  display:block; width:100%; aspect-ratio:4/5; overflow:hidden;
  background:var(--dark-2); border:1px solid var(--line);
  border-radius:10px;
}
.collection-card-img img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--ease);
}
.collection-card:hover .collection-card-img img{transform:scale(1.035);}

.collection-card-body{padding-top:16px;}
.card-rule{height:1px; background:var(--line); margin-bottom:14px;}
.card-meta{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--cream-faint);
  margin-bottom:10px;
}
.collection-card h3{font-size:21px; margin-bottom:6px; letter-spacing:-0.01em;}
.collection-card .price{
  font-family:var(--mono); font-size:13px; color:var(--cream);
  margin-bottom:18px; letter-spacing:0.04em;
}
.collection-card-actions{display:flex; gap:10px;}
.collection-card-actions .btn{flex:1; padding:12px 10px; font-size:10px; letter-spacing:0.1em;}

/* ---------- Ürün ekranı ---------- */
.product-wrap{
  display:grid; grid-template-columns:1.15fr 1fr; gap:64px; align-items:start;
  padding-top:28px; padding-bottom:84px;   /* yan boşluk .wrap'ten gelir */
}

.product-gallery-main{
  width:100%; aspect-ratio:4/5; overflow:hidden; position:relative;
  cursor:zoom-in; background:var(--dark-2); border:1px solid var(--line);
  border-radius:12px;
}
/* Küçük fotoğraf şeridi — ürün başına birden fazla görsel olduğunda çıkar */
.photo-thumbs{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap;}
.photo-thumb{
  width:72px; height:90px; padding:0; cursor:pointer; overflow:hidden;
  border:1px solid var(--line); background:var(--dark-2);
  transition:border-color .25s ease, opacity .25s ease;
  opacity:0.65;
}
.photo-thumb img{width:100%; height:100%; object-fit:cover;}
.photo-thumb:hover{opacity:1;}
.photo-thumb.active{border-color:var(--cream); opacity:1;}

/* Bülten kaydı */

.variant-select{display:flex; flex-wrap:wrap; align-items:center; gap:14px;}
.variant-btn{
  width:56px; height:56px; border-radius:50%; cursor:pointer; position:relative;
  border:1px solid var(--line-strong); overflow:hidden;
  background-size:cover; background-position:center; padding:0;
  transition:transform .25s var(--ease);
}
.variant-btn:hover{transform:scale(1.07);}
.variant-btn.active::after{
  content:""; position:absolute; inset:-6px;
  border:1px solid var(--cream); border-radius:50%;
}
.variant-name{
  display:block; margin-top:14px;
  font-family:var(--mono); font-size:11px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--cream-dim);
}

.product-info .code{
  display:block; margin-bottom:16px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--cream-faint);
}
.product-info h1{font-size:clamp(21px,2.2vw,30px); margin-bottom:16px;}
.product-price{font-family:var(--mono); font-size:16px; letter-spacing:0.04em; margin-bottom:22px;}
.product-desc{color:var(--cream-dim); font-size:16.5px; margin-bottom:34px; max-width:42ch;}

.field-block{margin-bottom:30px;}
.field-label{
  display:block; margin-bottom:14px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--cream-faint);
}

.qty-control{display:flex; align-items:center; border:1px solid var(--line-strong); width:fit-content;}
.qty-control button{width:42px; height:42px; background:transparent; border:none; color:var(--cream); font-size:15px; cursor:pointer;}
.qty-control button:hover{opacity:0.55;}
.qty-control input{width:46px; text-align:center; background:transparent; border:none; color:var(--cream); font-size:14px; font-family:var(--mono);}

.total-line{
  display:flex; justify-content:space-between; align-items:baseline;
  padding-top:20px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--cream-faint); margin-bottom:22px;
}
.total-line strong{color:var(--cream); font-size:17px; letter-spacing:0.04em; font-weight:500;}

.info-row{
  display:flex; gap:11px; align-items:flex-start;
  font-size:12.5px; color:var(--cream-dim); margin-top:16px; line-height:1.6;
}
.info-row svg{width:15px; height:15px; flex-shrink:0; margin-top:3px;}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed; inset:0; z-index:200; background:rgba(17,17,17,0.96); display:none; align-items:center; justify-content:center; padding:28px;}
.lightbox.open{display:flex;}
.lightbox-box{width:min(520px, 92vw); aspect-ratio:4/5; overflow:hidden; border-radius:12px;}
.lightbox-box img{width:100%; height:100%; object-fit:cover;}
.lightbox-close{
  position:absolute; top:22px; right:22px; width:40px; height:40px;
  border:none; background:transparent; color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}

/* ---------- Our Story ---------- */
.story{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center;}
.story-visual{
  aspect-ratio:1/1; overflow:hidden;
  background:var(--dark-2);
  border:1px solid var(--line); border-radius:12px;
  max-width:300px; width:100%;
  justify-self:center;      /* sütun içinde ortalı, dört yanında boşluk */
  margin:0 auto;
}
.story-visual img{width:100%; height:100%; object-fit:cover;}
.story-copy h2{font-size:clamp(21px,2.2vw,30px); margin-bottom:22px; max-width:13ch;}
.story-copy p{color:var(--cream-dim); font-size:15.5px; margin-bottom:18px; max-width:46ch;}

/* Künye bloğu — istatistik şeridi yerine geçen imza öğesi */
.spec-list{margin-top:32px; border-top:1px solid var(--line);}
.spec-list div{
  display:grid; grid-template-columns:11ch 1fr; gap:16px;
  padding:13px 0; border-bottom:1px solid var(--line);
  font-size:13.5px;
}
.spec-list dt, .spec-list .k{
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--cream-faint); padding-top:2px;
}
.spec-list .v{color:var(--cream-dim);}

/* ---------- FAQ ---------- */
.faq-item{border-bottom:1px solid var(--line);}
.faq-item:first-child{border-top:1px solid var(--line);}
.faq-q{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:18px;
  background:transparent; border:none; color:var(--cream); text-align:left;
  padding:24px 0; font-size:15.5px; font-family:var(--body); cursor:pointer;
  letter-spacing:0.08em; text-transform:uppercase;
}
.faq-q .icon{font-size:19px; transition:transform .35s var(--ease); flex-shrink:0; font-family:var(--body); font-weight:300;}
.faq-item.open .faq-q .icon{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .4s var(--ease);}
.faq-a p{color:var(--cream-dim); font-size:15.5px; padding-bottom:24px; max-width:62ch;}

/* ---------- Contact ---------- */
.contact-block{text-align:center;}
.contact-block h2{font-size:clamp(22px,2.4vw,32px); margin-bottom:26px;}
.contact-line{
  display:inline-flex; align-items:center; gap:9px;
  color:var(--cream-dim); font-size:14.5px; margin:7px 14px;
  padding-bottom:3px; border-bottom:1px solid transparent;
  transition:border-color .25s ease, color .25s ease;
}
.contact-line:hover{color:var(--cream); border-color:var(--line-strong);}
.contact-block svg{width:15px; height:15px;}

/* ---------- Sepet ---------- */
.cart-overlay{position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:150; opacity:0; pointer-events:none; transition:opacity .35s ease;}
.cart-overlay.open{opacity:1; pointer-events:auto;}
.cart-drawer{
  position:fixed; top:0; right:0; height:100%; width:min(406px, 93vw);
  background:var(--dark); border-left:1px solid var(--line); z-index:160;
  transform:translateX(100%); transition:transform .45s var(--ease);
  display:flex; flex-direction:column;
}
.cart-drawer.open{transform:translateX(0);}
.cart-head{display:flex; justify-content:space-between; align-items:center; padding:22px 24px; border-bottom:1px solid var(--line);}
.cart-head h3{font-size:17px;}
.cart-close{background:transparent; border:none; color:var(--cream); cursor:pointer; display:flex;}
.cart-items{flex:1; overflow-y:auto; padding:6px 24px;}
.cart-item{display:grid; grid-template-columns:54px 1fr auto; gap:15px; padding:18px 0; border-bottom:1px solid var(--line); align-items:center;}
.cart-item-img{width:54px; height:66px; overflow:hidden; border-radius:6px; background-size:cover; background-position:center; background-color:var(--dark-2); border:1px solid var(--line);}
.cart-item-name{font-size:13.5px; margin-bottom:4px;}
.cart-item-meta{font-family:var(--mono); font-size:10px; letter-spacing:0.12em; color:var(--cream-faint); margin-bottom:8px;}
.cart-item-qty{display:flex; align-items:center; gap:9px;}
.cart-item-qty button{width:22px; height:22px; border:1px solid var(--line-strong); background:transparent; color:var(--cream); cursor:pointer; font-size:12px;}
.cart-item-price{font-family:var(--mono); font-size:12.5px; text-align:right; letter-spacing:0.03em;}
.cart-item-remove{background:transparent; border:none; color:var(--cream-faint); font-size:10.5px; cursor:pointer; text-decoration:underline; margin-top:7px;}
.cart-empty{color:var(--cream-dim); font-size:13.5px; padding:56px 20px; text-align:center;}
.cart-empty svg{width:26px; height:26px; margin:0 auto 16px; opacity:0.4; display:block;}
.cart-foot{padding:22px 24px; border-top:1px solid var(--line);}
.cart-subtotal{
  display:flex; justify-content:space-between; align-items:baseline; margin-bottom:18px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.18em; text-transform:uppercase; color:var(--cream-faint);
}
.cart-subtotal strong{color:var(--cream); font-size:16px; letter-spacing:0.03em; font-weight:500;}
/* Ara toplam + kargo dökümü; "Toplam" satırı ödenecek tutarı gösterir */
.cart-hesap{margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--line);}
.cart-hesap-satir{
  display:flex; justify-content:space-between; align-items:baseline; padding:3px 0;
  font-family:var(--mono); font-size:11px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--cream-dim);
}
.cart-hesap-satir.bedava span:last-child{color:var(--cream);}

/* ---------- Modal ---------- */
.modal-overlay{position:fixed; inset:0; background:rgba(0,0,0,0.75); z-index:180; display:none; align-items:center; justify-content:center; padding:20px;}
.modal-overlay.open{display:flex;}
.modal{width:min(470px, 100%); max-height:88vh; overflow-y:auto; background:var(--dark-2); border:1px solid var(--line); padding:34px;}
.modal h3{font-size:22px; margin-bottom:8px;}
.modal p.sub{color:var(--cream-dim); font-size:13px; margin-bottom:24px;}
.field{display:flex; flex-direction:column; gap:8px; margin-bottom:16px;}
.field label{font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--cream-faint);}
.field input, .field textarea{
  background:var(--dark); border:1px solid var(--line); color:var(--cream);
  padding:13px 14px; font-family:var(--body); font-size:14px; border-radius:var(--radius); resize:none;
}
.field input::placeholder, .field textarea::placeholder{color:var(--cream-faint);}
.modal-summary{background:var(--dark); border:1px solid var(--line); padding:15px 16px; font-size:12.5px; color:var(--cream-dim); margin-bottom:20px; max-height:120px; overflow-y:auto;}
.modal-close{background:transparent; border:none; color:var(--cream-faint); font-size:12px; cursor:pointer; text-decoration:underline; display:block; margin:16px auto 0;}

/* ---------- Politika sayfaları ---------- */
.policy-content{color:var(--cream-dim); font-size:15px; line-height:1.85;}
.policy-content h3{color:var(--cream); font-size:19px; margin:32px 0 10px;}
.policy-content p{margin-bottom:10px; max-width:64ch;}
.policy-content a{color:var(--cream); border-bottom:1px solid var(--line-strong);}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line); padding-top:64px;}
.footer-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:36px; padding-bottom:48px;}
.footer-col h4{
  font-family:var(--mono); font-size:10px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--cream-faint); margin-bottom:18px; font-weight:500;
}
.footer-col a, .footer-col p, .footer-col button{
  display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--cream-dim);
  margin-bottom:11px; background:transparent; border:none; text-align:left;
  cursor:pointer; padding:0; font-family:var(--body);
  transition:color .25s ease;
}
.footer-col a:hover, .footer-col button:hover{color:var(--cream);}
.footer-col svg{width:14px; height:14px; flex-shrink:0;}
.footer-brand .brand-word{display:block; margin-bottom:12px; font-size:22px;}
.footer-brand p{
  color:var(--cream-faint); font-family:var(--mono); font-size:10px;
  letter-spacing:0.16em; text-transform:uppercase; max-width:26ch;
}
.footer-bottom{border-top:1px solid var(--line); padding:24px 0; display:flex; justify-content:center;}
.footer-bottom p{font-family:var(--mono); font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--cream-faint);}

/* ---------- Reveal + Toast ---------- */
/* =========================================================
   ANİMASYON SİSTEMİ
   Hepsi hızlı, zarif ve sade tutuldu; prefers-reduced-motion
   tercih eden kullanıcılarda tamamen devre dışı kalır.
   ========================================================= */

/* Temel scroll reveal */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
.reveal.in{opacity:1; transform:translateY(0);}

/* Sıralı (staggered) giriş — koleksiyon kartları peş peşe belirir */
.collection-card.reveal{transition-delay:0s;}
.collection-card.reveal:nth-child(2){transition-delay:.12s;}
.collection-card.reveal:nth-child(3){transition-delay:.24s;}

/* Görsel maske açılımı — fotoğraf perde gibi açılır, sonra hafifçe yerine oturur */
.img-reveal{overflow:hidden;}
.img-reveal img{
  transform:scale(1.12);
  opacity:0;
  transition:transform 1.2s var(--ease), opacity .9s ease;
}
.img-reveal.in img{transform:scale(1); opacity:1;}

/* Hero giriş — marka adı ve slogan sırayla yükselir */
@keyframes hero-rise{
  from{opacity:0; transform:translateY(24px);}
  to{opacity:1; transform:translateY(0);}
}
/* Hero girişi loading ekranı kalktıktan SONRA başlar */

/* Buton — beyaz zemin ortadan dışa doğru açılır */
.btn{position:relative; overflow:hidden; isolation:isolate;}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--dark);
  transform:scaleX(0); transform-origin:center;
  transition:transform .45s var(--ease);
}
.btn:hover::before{transform:scaleX(1);}

/* Bağlantı altı çizgisi — soldan sağa çizilir */
.contact-line, .footer-col a{position:relative; width:fit-content; max-width:100%;}
.contact-line::after, .footer-col a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px;
  height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.contact-line:hover::after, .footer-col a:hover::after{transform:scaleX(1);}

/* Menü bağlantıları — sırayla belirir */
.fullscreen-menu.open .fsm-links a,
.fullscreen-menu.open .fsm-links button{
  animation:hero-rise .6s var(--ease) both;
}
.fullscreen-menu.open .fsm-links > *:nth-child(1){animation-delay:.18s;}
.fullscreen-menu.open .fsm-links > *:nth-child(2){animation-delay:.24s;}
.fullscreen-menu.open .fsm-links > *:nth-child(3){animation-delay:.30s;}
.fullscreen-menu.open .fsm-links > *:nth-child(4){animation-delay:.36s;}
.fullscreen-menu.open .fsm-links > *:nth-child(5){animation-delay:.42s;}
.fullscreen-menu.open .fsm-links > *:nth-child(6){animation-delay:.48s;}

/* Ürün fotoğrafı — yumuşak yakınlaştırma */
.product-gallery-main img{transition:transform 1s var(--ease), opacity .35s ease;}
.product-gallery-main:hover img{transform:scale(1.04);}

/* Sepet satırları — eklendiğinde kayarak girer */
@keyframes cart-in{
  from{opacity:0; transform:translateX(14px);}
  to{opacity:1; transform:translateX(0);}
}
.cart-item{animation:cart-in .45s var(--ease) both;}

/* Sayfa girişi — içerik yumuşak belirir */
@keyframes page-in{ from{opacity:0;} to{opacity:1;} }
main{animation:page-in .6s ease both;}

@media (prefers-reduced-motion: reduce){
  .hero-wordmark, .hero-tagline, .hero-content .btn,
  .fullscreen-menu.open .fsm-links a,
  .fullscreen-menu.open .fsm-links button,
  .cart-item, main{animation:none !important;}
  .img-reveal img{transform:none; opacity:1;}
  .btn::before{display:none;}
}

.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--cream); color:var(--dark); padding:15px 24px;
  font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  z-index:300; opacity:0; pointer-events:none;
  transition:opacity .3s ease, transform .4s var(--ease);
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}


/* ---------- Şeffaf logolar ---------- */
/* Tam ekran menü (beyaz zemin) — siyah yıldız */

.fsm-logo{height:40px; width:auto; max-width:52vw; object-fit:contain;}

/* Footer (koyu zemin) — beyaz yazılı logo */
.footer-logo{
  height:62px; width:auto; object-fit:contain;
  margin-bottom:14px; display:block;
}







/* ---------- Hero yazılı logo ---------- */
.hero-wordmark{
  margin:0 0 10px;
  line-height:0;
}
.hero-wordmark img{
  filter:drop-shadow(0 3px 16px rgba(0,0,0,.7));
  width:clamp(300px, 64vw, 580px);
  max-width:88vw;          /* hiçbir ekranda taşmaz */
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 6px 26px rgba(0,0,0,.5));
}
.hero-wordmark, .hero-tagline, .hero-content .btn{opacity:0;}
body.loaded .hero-wordmark{animation:hero-rise 1.1s var(--ease) .1s both;}
body.loaded .hero-tagline{animation:hero-rise 1.1s var(--ease) .35s both;}
body.loaded .hero-content .btn{animation:hero-rise 1.1s var(--ease) .55s both;}
@media (prefers-reduced-motion: reduce){
  .hero-wordmark, .hero-tagline, .hero-content .btn{opacity:1; animation:none !important;}
}


/* =========================================================
   RESPONSIVE SİSTEM
   Kırılma noktaları:
     ≤ 479px   küçük telefon
     ≤ 767px   telefon
     768–1023  tablet
     ≥ 1024    masaüstü
   Bu bölüm dosyanın sonunda olduğu için üstteki kuralları ezer.
   ========================================================= */

/* ---------- ORTAK: yatay taşmayı kesin engelle ---------- */
img, video, svg, canvas, iframe{max-width:100%;}
.wrap, section, header, footer, main{max-width:100%;}
input, select, textarea, button{max-width:100%;}

/* =========================================================
   MASAÜSTÜ (≥1024px)
   ========================================================= */
@media (min-width:1024px){
  .wrap{padding-left:48px !important; padding-right:48px !important;}
  .product-gallery{max-width:460px;}
  .showcase-frame{max-width:420px;}
  .featured-media{max-width:400px; margin-left:auto; margin-right:auto;}
  .hero{height:min(100vw, 86vh);}
  .collection-grid{grid-template-columns:repeat(3,1fr); gap:56px 34px;}
  .product-wrap{grid-template-columns:1.15fr 1fr; gap:64px;}
  .story{grid-template-columns:1fr 1fr; gap:70px;}
  .footer-grid{grid-template-columns:1.5fr 1fr 1fr 1fr;}
}

/* =========================================================
   TABLET (768–1023px)
   ========================================================= */
@media (min-width:768px) and (max-width:1023px){
  .wrap{padding-left:34px !important; padding-right:34px !important;}
  section{padding:76px 0;}

  /* Kare hero tablette çok uzun kalıyordu */
  .hero{height:min(88vw, 74vh); min-height:460px;}
  .hero-wordmark img{width:clamp(280px, 42vw, 380px);}

  /* Koleksiyon: 2 sütun rahat durur */
  .collection-grid{grid-template-columns:repeat(2,1fr); gap:46px 28px;}

  /* Ürün sayfası tablette de iki sütun kalabilir */
  .product-wrap{grid-template-columns:1fr 1fr; gap:40px;}
  .product-info h1{font-size:26px;}

  .story{grid-template-columns:1fr 1fr; gap:40px;}
  .story-copy h2{font-size:26px;}

  .footer-grid{grid-template-columns:1.4fr 1fr 1fr; gap:32px 26px;}
  .footer-col:last-child{grid-column:1 / -1;}

  .cart-drawer{width:min(420px, 70vw);}
}

/* =========================================================
   TELEFON (≤767px)
   ========================================================= */
@media (max-width:767px){
  .wrap{padding-left:20px !important; padding-right:20px !important;}
  section{padding:58px 0;}
  .section-head{margin-bottom:34px;}
  .section-head h2{font-size:clamp(17px, 4.6vw, 22px); max-width:100%;}
  .section-head .lede{font-size:15.5px; max-width:100%;}

  /* --- Navbar: dar ekranda sıkışmasın --- */
  .nav{padding:12px 0; gap:6px;}

  .icon-btn{width:40px; height:40px;}          /* dokunma alanı */
  .icon-btn svg{width:18px; height:18px;}
  .menu-toggle svg{width:25px; height:25px;}

  /* --- Kayan yazı --- */
  .marquee{padding:8px 0;}
  .marquee-track span{font-size:11.5px; letter-spacing:0.16em; padding:0 16px; gap:15px;}
  .mq-logo{width:16px;}

  .marquee.kampanya-acik{padding:7px 0;}
  .kampanya{gap:3px 12px; padding:0 14px;}
  .kampanya-metin{font-size:11px; letter-spacing:0.14em;}
  .kampanya-bitis{font-size:9.5px;}
  .kampanya-birim{min-width:26px;}
  .kampanya-birim b{font-size:15px;}
  .kampanya-birim span{font-size:7px;}
  .kampanya-ayrac{font-size:13px;}

  /* --- Hero --- */
  .hero{height:min(120vw, 84vh); min-height:500px; padding:0;}
  .hero-content{padding:40px 20px;}
  .hero-wordmark{margin-bottom:9px;}
  .hero-wordmark img{width:min(80vw, 340px);}
  .hero-tagline{font-size:10.5px; letter-spacing:0.24em; margin-bottom:30px;}

  /* --- Koleksiyon: tek sütun --- */
  .collection-grid{grid-template-columns:1fr; gap:44px;}
  .collection-card-img{aspect-ratio:1/1;}
  .collection-card h3{font-size:20px;}
  .collection-card-actions{gap:9px;}
  .collection-card-actions .btn{padding:14px 8px; font-size:10.5px; letter-spacing:0.08em;}

  /* --- Ürün sayfası --- */
  .product-wrap{
    grid-template-columns:1fr; gap:26px;
    padding-top:20px; padding-bottom:60px;
    text-align:center;                      /* telefonda her şey ortalı */
  }
  .product-info h1, .product-price, .product-desc,
  .tone-desc, .field-label, .variant-name{text-align:center;}
  .product-desc, .tone-desc{margin-left:auto; margin-right:auto;}
  .variant-select, .qty-control{justify-content:center;}
  .product-specs div{text-align:left;}      /* künye tablosu hizalı kalsın */
  .info-row{justify-content:center; text-align:left;}
  .product-gallery-main{aspect-ratio:1/1;}
  .product-info h1{font-size:19px;}
  .product-price{font-size:17px;}
  .product-desc{font-size:16px; max-width:100%;}
  .variant-btn{width:60px; height:60px;}       /* parmakla rahat seçim */
  .variant-select{gap:16px;}
  .qty-control button{width:46px; height:46px;}
  .qty-control input{width:50px;}
  .info-row{font-size:12.5px;}

  /* --- Hikaye --- */
  .story{grid-template-columns:1fr; gap:26px;}
  .story-visual{aspect-ratio:1/1; max-width:290px; justify-self:center; margin:6px auto;}
  .story-copy h2{font-size:clamp(17px, 4.6vw, 22px); max-width:100%;}
  .story-copy p{font-size:16px; max-width:100%;}

  /* --- SSS --- */
  .faq-q{font-size:14px; padding:20px 0; gap:12px; letter-spacing:.07em;}
  .faq-a p{font-size:15px; padding-bottom:20px;}

  /* --- İletişim --- */
  .contact-block h2{font-size:clamp(17px, 4.6vw, 22px);}

  /* --- Sepet --- */
  .cart-drawer{width:100%;}                    /* tam ekran */
  .cart-head{padding:18px 20px;}
  .cart-items{padding:6px 20px;}
  .cart-foot{padding:18px 20px;}
  .cart-item{grid-template-columns:52px 1fr auto; gap:12px;}

  /* --- Modal --- */
  .modal-overlay{padding:0; align-items:flex-end;}
  .modal{width:100%; max-height:92vh; border-radius:0; padding:26px 20px 30px;
         border-left:0; border-right:0; border-bottom:0;}
  .modal h3{font-size:19px;}
  .field input, .field textarea{font-size:16px;}  /* iOS yakınlaştırmasını önler */

  /* --- Menü --- */
  .fsm-links a, .fsm-links button{font-size:15px; padding:20px 0; letter-spacing:.16em;}
  .fsm-logo{height:34px;}
}

/* =========================================================
   KÜÇÜK TELEFON (≤479px)
   ========================================================= */
@media (max-width:479px){
  .wrap{padding-left:16px !important; padding-right:16px !important;}
  section{padding:48px 0;}


  .icon-btn{width:38px; height:38px;}

  .hero-content{padding:64px 16px 60px;}
  .hero-wordmark img{width:min(78vw, 260px);}
  .hero-tagline{font-size:9px; letter-spacing:0.2em;}
  .btn{padding:14px 22px; font-size:11px; letter-spacing:0.1em;}

  .collection-card-actions{flex-direction:column;}
  .collection-card-actions .btn{width:100%; padding:13px;}

  .variant-btn{width:54px; height:54px;}
  .variant-select{gap:13px;}

  .footer-grid{grid-template-columns:1fr; gap:26px;}
  .footer-col:first-child{grid-column:auto;}

  .story-stats{gap:22px;}
  .modal{padding:22px 16px 26px;}
}

/* =========================================================
   YATAY TELEFON — hero ekranı doldurmasın
   ========================================================= */
@media (max-width:900px) and (orientation:landscape){
  .hero-content{padding:56px 20px 50px;}
  .hero-wordmark img{width:min(38vw, 260px);}
  .fsm-links a, .fsm-links button{
  display:flex; align-items:center;
  position:relative;
  font-family:var(--body);
  font-size:16px; font-weight:400;
  letter-spacing:.18em; text-transform:uppercase;
  color:#FFFFFF;
  padding:22px 0; text-align:left; line-height:1.2;
  background:transparent; border:none; cursor:pointer; width:100%;
  border-bottom:1px solid rgba(255,255,255,.13);
  transition:opacity .25s ease;
}
}


/* =========================================================
   ÜRÜN VİTRİNİ (ana sayfa) — tek ürün, altında renk seçimi
   ========================================================= */
.showcase{
  display:grid; grid-template-columns:.88fr 1fr; gap:56px; align-items:center;
}
.showcase-frame{
  display:block; width:100%; max-width:440px; aspect-ratio:4/5; overflow:hidden;
  border:1px solid var(--line); border-radius:10px; background:var(--dark-2);
  box-shadow:0 24px 60px -22px rgba(0,0,0,.35);
}
.showcase-frame img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--ease), opacity .3s ease;
}
.showcase-frame:hover img{transform:scale(1.035);}

/* Renk noktaları — görselin hemen altında */
.showcase-colors{
  display:flex; gap:14px; align-items:center;
  margin-top:20px;
}
.tone-btn{
  width:36px; height:36px; border-radius:50%; cursor:pointer; position:relative;
  border:1px solid var(--line-strong); padding:0;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.25);
  transition:transform .2s ease, border-color .2s ease;
}
.tone-btn:hover{transform:scale(1.08);}
.tone-btn.active{border-color:var(--cream);}
.tone-btn.active::after{
  content:""; position:absolute; inset:-5px;
  border:1px solid var(--cream); border-radius:50%;
}
.showcase-tone{
  display:block; margin-top:12px;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--cream-dim);
}

.showcase-info .code{
  display:block; margin-bottom:14px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--cream-faint);
}
.showcase-name{font-size:clamp(19px,2vw,26px); margin-bottom:14px;}
.showcase-price{
  font-family:var(--mono); font-size:18px; letter-spacing:.04em;
  color:var(--accent); margin-bottom:20px;
}
.showcase-desc{color:var(--cream-dim); font-size:16.5px; margin-bottom:28px; max-width:40ch;}
.showcase-actions{display:flex; gap:12px; flex-wrap:wrap;}
.showcase-actions .btn{flex:1; min-width:150px;}

@media (max-width:1023px){
  .showcase{gap:36px;}
}
@media (max-width:767px){
  .showcase{grid-template-columns:1fr; gap:26px;}
  .showcase-frame{aspect-ratio:1/1;}
  .showcase-colors{gap:16px; margin-top:18px; justify-content:center;}
  .tone-btn{width:42px; height:42px;}
  .showcase-tone{text-align:center;}
  .showcase-name{font-size:clamp(17px,4.6vw,22px);}
  .showcase-desc{max-width:100%; font-size:15px; margin-bottom:22px;}
  .showcase-actions{flex-direction:column; gap:10px;}
  .showcase-actions .btn{width:100%; min-width:0;}
}


/* =========================================================
   GALERİ — ok düğmeleri ve nokta göstergesi
   ========================================================= */
.showcase-frame, .product-gallery-main{position:relative;}
.showcase-imglink{display:block; width:100%; height:100%;}

.gal-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(17,17,17,.1);
  color:#111111; cursor:pointer; z-index:3;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .3s ease, background .25s ease, transform .25s ease;
  box-shadow:0 4px 16px rgba(0,0,0,.15);
}
.gal-arrow svg{width:18px; height:18px;}
.gal-prev{left:14px;}
.gal-next{right:14px;}
.showcase-frame:hover .gal-arrow,
.product-gallery-main:hover .gal-arrow,
.showcase-frame:focus-within .gal-arrow,
.product-gallery-main:focus-within .gal-arrow{opacity:1;}
.gal-arrow:hover{background:#ffffff; transform:translateY(-50%) scale(1.06);}

.gal-dots{
  position:absolute; left:0; right:0; bottom:14px; z-index:3;
  display:flex; justify-content:center; gap:8px;
}
.gal-dot{
  width:7px; height:7px; border-radius:50%; padding:0; cursor:pointer;
  border:1px solid rgba(255,255,255,.85);
  background:transparent;
  transition:background .25s ease, transform .25s ease;
  box-shadow:0 1px 4px rgba(0,0,0,.4);
}
.gal-dot.active{background:#ffffff; transform:scale(1.15);}

/* Dokunmatik cihazda oklar hep görünsün */
@media (hover:none){
  .gal-arrow{opacity:.92;}
  .gal-arrow{width:38px; height:38px;}
  .gal-prev{left:10px;}
  .gal-next{right:10px;}
}
@media (max-width:479px){
  .gal-arrow{width:34px; height:34px;}
  .gal-arrow svg{width:15px; height:15px;}
}


/* =========================================================
   HESAP SAYFASI
   ========================================================= */
.account-wrap{padding-top:52px; padding-bottom:90px;}
.account-head{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap;}
.account-name{font-size:clamp(19px,2vw,26px); margin-bottom:6px;}
.account-email{color:var(--cream-dim); font-size:14px;}

.account-grid{display:grid; grid-template-columns:1fr 1fr; gap:28px;}

/* Giriş / kayıt kutusu — ortada tek sütun */
.auth-box{max-width:420px; margin:0 auto;}
.auth-pane{
  border:1px solid var(--line); border-radius:6px; padding:30px 26px;
  background:var(--dark-2);
}
.auth-pane h2{font-size:22px; margin-bottom:22px;}
.auth-pane .btn{margin-top:6px;}

/* Alttaki gri geçiş satırı */
.auth-switch{
  margin-top:20px; padding-top:18px;
  border-top:1px solid var(--line);
  text-align:center; font-size:13px;
  color:var(--cream-faint);
}
.auth-link{
  background:none; border:none; cursor:pointer; padding:0 0 1px;
  font-family:inherit; font-size:13px;
  color:var(--cream-dim);
  border-bottom:1px solid var(--line-strong);
  margin-left:5px;
  transition:color .25s ease, border-color .25s ease;
}
.auth-link:hover{color:var(--cream); border-color:var(--cream);}
.auth-card{
  border:1px solid var(--line); border-radius:6px; padding:28px 26px;
  background:var(--dark-2);
}
.auth-card h2{font-size:21px; margin-bottom:20px;}
.auth-card .btn{margin-top:6px;}

.auth-msg{margin-top:12px; font-size:13px; min-height:18px;}
.auth-msg.ok{color:var(--cream);}
.auth-msg.no{color:var(--cream-dim);}

/* Sipariş geçmişi */
.order-list{display:flex; flex-direction:column; gap:14px;}
.order-empty{color:var(--cream-faint); font-size:13.5px; padding:18px 0;}
.order-row{border:1px solid var(--line); border-radius:4px; padding:16px;}
.order-top{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:4px;}
.order-id{font-family:var(--mono); font-size:12.5px; letter-spacing:.08em;}
.order-status{
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--line-strong); padding:3px 9px; border-radius:2px; color:var(--cream-dim);
  white-space:nowrap;
}
.order-date{font-size:11.5px; color:var(--cream-faint); margin-bottom:10px;}
.order-items{margin-bottom:10px;}
.order-items li{font-size:13.5px; color:var(--cream-dim); list-style:none; margin-bottom:3px;}
.order-total{font-family:var(--mono); font-size:15px;}
.order-cargo{font-size:12px; color:var(--cream-dim); margin-top:8px;
  padding-top:8px; border-top:1px solid var(--line);}

@media (max-width:860px){
  .account-grid{grid-template-columns:1fr; gap:22px;}
}
@media (max-width:767px){
  .account-wrap{padding-top:36px; padding-bottom:64px;}
  .auth-card, .auth-pane{padding:24px 18px;}
  .account-head{align-items:flex-start;}
  .account-head .btn{width:100%;}
}


/* =========================================================
   E-POSTA DOĞRULAMA KUTUSU
   ========================================================= */
.verify-box{
  border:1px solid var(--line-strong); border-radius:6px;
  padding:22px 24px; margin-bottom:32px;
  background:var(--dark-2);
}
.verify-head{display:flex; gap:14px; align-items:flex-start; margin-bottom:18px;}
.verify-head svg{width:22px; height:22px; flex-shrink:0; margin-top:2px; opacity:.8;}
.verify-head strong{display:block; font-size:15px; margin-bottom:4px;}
.verify-head p{font-size:13px; color:var(--cream-dim); line-height:1.6;}

.verify-form{display:flex; gap:10px; align-items:stretch;}
.verify-form input{
  flex:1; min-width:0;
  background:var(--dark); border:1px solid var(--line-strong); color:var(--cream);
  padding:14px 16px; border-radius:var(--radius);
  font-family:var(--mono); font-size:22px; letter-spacing:.36em;
  text-align:center;
}
.verify-form input::placeholder{color:rgba(255,255,255,.18); letter-spacing:.36em;}
.verify-form input:focus{outline:none; border-color:var(--cream);}
.verify-form .btn{flex-shrink:0; padding:14px 24px;}

.verify-msg{margin-top:12px; font-size:13px; min-height:18px;}
.verify-msg.ok{color:var(--cream);}
.verify-msg.no{color:var(--cream-dim);}
.verify-box .auth-link{margin-left:0; margin-top:6px; display:inline-block;}

@media (max-width:479px){
  .verify-box{padding:18px 16px;}
  .verify-form{flex-direction:column;}
  .verify-form input{font-size:19px; letter-spacing:.3em;}
  .verify-form .btn{width:100%;}
}


/* ---------- E-posta doğrulama ---------- */
.verify-info{
  font-size:13.5px; color:var(--cream-dim);
  margin-bottom:22px; line-height:1.7;
}
.verify-email{display:block; color:var(--cream); margin-top:4px; word-break:break-all;}
.verify-hint{
  font-size:13px; color:var(--cream-faint);
  line-height:1.75; margin-bottom:6px;
}


/* ---------- Hero vinyeti ----------
   Kenarlardan merkeze doğru koyulaşan halka; videoyu çerçeveler
   ve ortadaki logoyu öne çıkarır. */



/* =========================================================
   ÇEREZ ŞERİDİ
   ========================================================= */
.cookie-bar{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:400;
  background:#1A1A1A; border:1px solid rgba(255,255,255,.16);
  border-radius:6px; padding:18px 20px;
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  box-shadow:0 18px 50px -14px rgba(0,0,0,.7);
  transform:translateY(140%); opacity:0;
  transition:transform .55s cubic-bezier(.22,.8,.28,1), opacity .4s ease;
  max-width:760px; margin:0 auto;
}
.cookie-bar.show{transform:translateY(0); opacity:1;}
.cookie-bar p{
  flex:1; min-width:220px;
  font-size:13px; line-height:1.65; color:rgba(255,255,255,.68);
}
.cookie-actions{display:flex; align-items:center; gap:16px; flex-shrink:0;}
.cookie-more{
  font-size:12.5px; color:rgba(255,255,255,.5);
  border-bottom:1px solid rgba(255,255,255,.2);
  transition:color .25s ease;
}
.cookie-more:hover{color:#fff;}
.cookie-accept{white-space:nowrap; padding:12px 24px; font-size:11.5px;}
.cookie-close{
  background:none; border:none; cursor:pointer; padding:6px;
  color:rgba(255,255,255,.4); display:flex; align-items:center;
  transition:color .25s ease;
}
.cookie-close:hover{color:#fff;}

@media (max-width:600px){
  .cookie-bar{left:12px; right:12px; bottom:12px; padding:16px; gap:14px;}
  .cookie-bar p{font-size:12.5px; min-width:0;}
  .cookie-actions{width:100%; justify-content:space-between;}
  .cookie-accept{flex:1; margin-left:12px;}
}

/* =========================================================
   ÜRÜN KÜNYESİ
   ========================================================= */
.product-specs{border-top:1px solid var(--line);}
.product-specs div{
  display:grid; grid-template-columns:11ch 1fr; gap:12px;
  padding:7px 0; border-bottom:1px solid var(--line);
  font-size:13.5px; align-items:baseline;
}
.product-specs .k{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--cream-faint);
}
.product-specs .v{color:var(--cream-dim);}
@media (max-width:479px){
  .product-specs div{grid-template-columns:9.5ch 1fr; gap:10px; padding:6px 0; font-size:12px;}
}

/* Renk notu */
.tone-desc{
  font-size:13px; color:var(--cream-dim);
  line-height:1.7; margin-top:10px; max-width:38ch;
}

/* =========================================================
   GÖRSEL UYUM — tüm görseller taşmaz, oranını korur
   ========================================================= */
img, video{max-width:100%; height:auto;}
.showcase-frame img, .product-gallery-main img,
.story-visual img, .lightbox-box img, .collection-card-img img{
  height:100%;                 /* çerçeveyi dolduranlar hariç */
}
.footer-logo, .hero-wordmark img, .loading-logo img{height:auto;}


/* =========================================================
   GÜVEN ŞERİDİ
   ========================================================= */
.trust{padding:30px 0;}
.trust-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  max-width:560px; margin:0 auto;
}
.trust-item{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  text-align:center;
}
.trust-item svg{width:19px; height:19px; opacity:.7;}
.trust-item span{
  font-family:var(--body); font-size:12px; line-height:1.4;
  color:var(--cream-dim);
}
@media (max-width:479px){
  .trust{padding:24px 0;}
  .trust-grid{gap:12px;}
  .trust-item span{font-size:10.5px;}
  .trust-item svg{width:17px; height:17px;}
}

/* =========================================================
   ÖNE ÇIKAN ÜRÜN
   ========================================================= */
.featured{padding:76px 0;}
.featured-inner{max-width:430px; margin:0 auto; text-align:center;}
.featured-media{
  aspect-ratio:1/1; overflow:hidden; border-radius:8px;
  background:var(--dark-2); margin-bottom:26px;
}
.featured-media img{width:100%; height:100%; object-fit:cover;}
.featured-price{
  font-family:var(--mono); font-size:17px; letter-spacing:.04em;
  color:var(--cream-dim); margin-bottom:22px;
}
.featured-tones{
  display:flex; justify-content:center; gap:16px; margin-bottom:28px;
}
.featured-btn{margin-bottom:16px;}
.featured-stock{
  font-family:var(--body); font-size:12.5px; color:var(--cream-faint);
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.featured-stock::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:#3BA55C; flex-shrink:0;
}
@media (max-width:767px){
  .featured{padding:52px 0;}
  .featured-media{margin-bottom:22px;}
}


/* =========================================================
   BÖLÜM GEÇİŞLERİ
   Açık temada beyaz ve açık gri bölümler dönüşümlü.
   Aradaki fark zaten yumuşak; sadece ince bir ayraç yeterli.
   Koyu hero ile açık gövde arasına yumuşak geçiş konur.
   ========================================================= */
.light-section{position:relative;}




/* Menü alt bilgisindeki sosyal ikonlar */
.fsm-foot svg{width:19px; height:19px;}
.fsm-account{
  display:block; padding:22px 0 4px;
  font-family:var(--body); font-size:14px;
  color:rgba(255,255,255,.45);
  letter-spacing:.04em;
  transition:color .25s ease;
}
.fsm-account:hover{color:#FFFFFF;}
@media (max-width:479px){
  .fsm-links{padding:6px 24px 0;}
  .fsm-links a, .fsm-links button{font-size:14.5px; padding:19px 0; letter-spacing:.15em;}
  .fsm-foot{padding:20px 24px 26px; gap:30px;}
}


/* Footer'daki YELIGOODS yazısı */
.footer-wordmark{
  display:block;
  font-size:22px;
  color:var(--cream);
  margin-bottom:12px;
}



/* =========================================================
   METİN SAYFALARI (politika, rehber)
   ========================================================= */
.text-page{padding:64px 0 90px;}
.text-body{max-width:66ch; margin:0 auto;}
.text-body h2{
  font-size:15px; letter-spacing:.14em; text-transform:uppercase;
  margin:38px 0 14px; padding-top:22px;
  border-top:1px solid var(--line);
}
.text-body h2:first-child{margin-top:0; padding-top:0; border-top:0;}
.text-body p{
  color:var(--cream-dim); font-size:16px; line-height:1.8;
  margin-bottom:14px;
}
.text-page .section-head{text-align:center; margin-bottom:46px;}
.text-page h1{font-size:clamp(20px,3.4vw,30px);}

@media (max-width:767px){
  .text-page{padding:40px 0 64px;}
  .text-body p{font-size:15.5px;}
  .text-body h2{font-size:13px; margin:30px 0 12px; padding-top:18px;}
  .text-page .section-head{margin-bottom:32px;}
}

/* Geri bağlantısı */
.back-link{
  display:inline-block;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--cream-faint);
  transition:color .25s ease;
}
.back-link:hover{color:var(--cream);}


/* Masaüstünde ürün görselleri bir tık küçük */
@media (min-width:1024px){

}


/* 4 haneli doğrulama kodu alanı */
.code-input{
  font-family:var(--mono);
  font-size:30px !important;
  letter-spacing:.5em;
  text-align:center;
  padding-left:.5em;
}


/* Yasal metinlerdeki üst uyarı ve madde satırları */
.text-note{
  padding:14px 16px; margin-bottom:30px;
  border:1px solid var(--line); border-radius:4px;
  font-size:13.5px !important; color:var(--cream-dim);
}
.text-li{
  padding-left:18px; position:relative;
  margin-bottom:9px !important;
}
.text-li::before{
  content:""; position:absolute; left:2px; top:.72em;
  width:5px; height:1px; background:var(--cream-faint);
}
.text-body strong{color:var(--cream); font-weight:500;}


/* Form alanlarında odak — mavi halka yerine kenar rengi koyulaşır */
.field input:focus, .field textarea:focus,
.auth-pane input:focus, .auth-pane textarea:focus,
.qty-control input:focus{
  outline:none;
  border-color:var(--cream);
}


/* =========================================================
   YORUMLAR
   ========================================================= */
.reviews{padding:76px 0;}
.review-summary{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin-top:18px; flex-wrap:wrap;
}
.stars{display:inline-flex; gap:2px; font-size:var(--s,14px); line-height:1;}
.star{color:var(--line-strong);}
.star.on{color:var(--cream);}
.review-avg{font-family:var(--mono); font-size:15px;}
.review-count{font-size:13px; color:var(--cream-faint);}

.review-list{
  max-width:660px; margin:0 auto 44px;
  display:flex; flex-direction:column; gap:20px;
}
.review{
  border:1px solid var(--line); border-radius:6px;
  padding:20px; background:var(--dark-2);
}
.review-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:14px; margin-bottom:12px; flex-wrap:wrap;
}
.review-who{display:flex; align-items:center; gap:12px;}
.review-avatar{
  width:40px; height:40px; border-radius:50%; object-fit:cover;
  flex-shrink:0; border:1px solid var(--line);
}
.review-avatar-bos{
  display:flex; align-items:center; justify-content:center;
  background:var(--cream); color:var(--dark);
  font-size:16px; font-weight:500;
}
.review-name{display:block; font-size:14.5px;}
.review-date{display:block; font-size:11.5px; color:var(--cream-faint); margin-top:2px;}
.review-text{font-size:15.5px; color:var(--cream-dim); line-height:1.75;}
.review-photo{
  display:block; margin-top:14px; max-width:220px;
  border-radius:5px; overflow:hidden; border:1px solid var(--line);
}
.review-photo img{width:100%; height:auto; display:block;}

/* Yorum formu */
.review-form-wrap{max-width:560px; margin:0 auto;}
.review-form{
  border:1px solid var(--line); border-radius:6px;
  padding:26px 24px; background:var(--dark-2);
}
.review-form h3{font-size:16px; margin-bottom:20px;}
.star-pick{display:flex; gap:6px;}
.star-btn{
  background:none; border:none; cursor:pointer; padding:2px;
  font-size:28px; line-height:1; color:var(--line-strong);
  transition:color .2s ease, transform .2s ease;
}
.star-btn:hover{transform:scale(1.12);}
.star-btn.on{color:var(--cream);}
.photo-pick{cursor:pointer; display:inline-flex; width:auto;}
.review-login{
  text-align:center; font-size:14px; color:var(--cream-dim);
  padding:24px 0;
}
.review-login a{border-bottom:1px solid var(--line-strong);}

@media (max-width:767px){
  .reviews{padding:52px 0;}
  .review{padding:17px;}
  .review-photo{max-width:100%;}
  .review-form{padding:22px 18px;}
}

/* =========================================================
   PROFİL RESMİ
   ========================================================= */
.avatar-row{display:flex; align-items:center; gap:20px; flex-wrap:wrap;}
.avatar-preview{
  width:78px; height:78px; border-radius:50%; overflow:hidden;
  border:1px solid var(--line); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--dark-2);
}
.avatar-preview img{width:100%; height:100%; object-fit:cover;}
.avatar-bos{
  font-size:28px; color:var(--cream-faint);
  font-family:var(--display);
}
.avatar-actions{display:flex; flex-direction:column; gap:10px; align-items:flex-start;}
.avatar-btn{cursor:pointer; display:inline-flex; width:auto; padding:12px 20px;}


/* =========================================================
   MASAÜSTÜ DÜZENİ
   Mobil ölçüler esas alınır; masaüstünde oranlı büyütülür.
   Amaç: aynı görünüm, geniş ekranda dağılmadan.
   ========================================================= */
@media (min-width:1024px){
  /* İçerik genişliği — satırlar okunamayacak kadar uzamasın */
  .wrap{max-width:1180px;}
  section{padding:88px 0;}

  .section-head{margin-bottom:52px;}
  .section-head .lede{font-size:15.5px; max-width:52ch;}

  /* Ürün vitrini — iki sütun, dengeli */
  .showcase{grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
  .showcase-info{max-width:420px;}
  .showcase-desc{font-size:15px; max-width:42ch;}

  /* Öne çıkan ürün */
  .featured-inner{max-width:480px;}

  /* Hikayemiz */
  .story{grid-template-columns:1.05fr .95fr; gap:64px; align-items:center;}
  .story-copy p{font-size:15px; max-width:46ch;}
  .story-visual{max-width:340px;}

  /* Ürün sayfası */
  .product-wrap{grid-template-columns:1fr 1fr; gap:60px;}
  .product-desc{font-size:15px; max-width:44ch;}

  /* SSS — ortada, dar sütun */
  .faq-list{max-width:780px; margin:0 auto;}

  /* Yorumlar */
  .review-list{max-width:720px;}
  .review-form-wrap{max-width:600px;}

  /* Hesap sayfası */
  .account-grid{grid-template-columns:1fr 1fr; gap:32px;}
  .auth-box{max-width:440px;}

  /* Metin sayfaları */
  .text-body{max-width:68ch;}

  /* Menü — geniş ekranda tam ekran yerine yan panel */
  .fullscreen-menu{max-width:440px; border-right:1px solid rgba(255,255,255,.1);}
  .fsm-links a, .fsm-links button{font-size:17px;}
}

/* Çok geniş ekranlar — içerik ortada kalsın, yayılmasın */
@media (min-width:1500px){
  .wrap{max-width:1280px;}
  .showcase{gap:76px;}
  .story{gap:78px;}
}

/* Fare olan cihazlarda hover etkileri açık, dokunmatikte kapalı */
@media (hover:hover) and (pointer:fine){
  .review:hover{border-color:var(--line-strong);}
  .showcase-frame:hover .gal-arrow{opacity:1;}
}


/* Kendi yorumunu silme */
.review-actions{
  margin-top:14px; padding-top:12px;
  border-top:1px solid var(--line);
  display:flex; justify-content:flex-end;
}
.review-del{
  background:none; border:none; cursor:pointer; padding:4px 0;
  font-family:var(--body); font-size:12.5px;
  color:var(--cream-faint);
  border-bottom:1px solid var(--line-strong);
  transition:color .25s ease, border-color .25s ease;
}
.review-del:hover{color:var(--cream); border-color:var(--cream);}


/* Onay bekleyen yorum — yalnızca sahibi görür */
.review-bekliyor{border-style:dashed;}
.review-pending{
  display:inline-block; margin-bottom:12px;
  font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--cream-faint);
  border:1px solid var(--line); border-radius:2px;
  padding:4px 10px;
}




/* Giriş panelinde iki alt satır — ilki çizgisiz, ikincisi ayraçlı */
.auth-switch + .auth-switch-son{
  margin-top:10px; padding-top:14px;
}
.auth-switch:not(.auth-switch-son){
  border-top:1px solid var(--line);
  padding-top:16px; margin-top:18px;
}
.auth-switch-son{border-top:0; padding-top:4px; margin-top:0;}


/* =========================================================
   PERFORMANS
   Ekran dışındaki bölümlerin çizimini erteler; uzun sayfada
   kaydırma akıcılığını belirgin şekilde artırır.
   ========================================================= */
/* content-visibility yalnızca bağlantı hedefi OLMAYAN bölümlerde.
   #story, #faq, #contact menüden çapa ile hedefleniyor; bu özellik
   açıkken tarayıcı yüksekliği tahmin ettiği için yanlış yere kaydırıyor. */
.reviews, .text-page{
  content-visibility:auto;
  contain-intrinsic-size:auto 600px;
}

/* Animasyonlu öğeler kendi katmanında kalsın — yeniden boyama azalır */
.cart-drawer, .fullscreen-menu, .modal-overlay, .cookie-bar{
  will-change:transform;
  backface-visibility:hidden;
}

/* Görseller yüklenirken zıplama olmasın */
.showcase-frame img, .product-gallery-main img,
.story-visual img, .featured-media img{
  display:block; width:100%; height:100%; object-fit:cover;
}

/* Dokunmatik cihazda gereksiz blur'u kaldır — düşük özellikli
   telefonlarda backdrop-filter kare düşmesine yol açıyor */
@media (hover:none) and (pointer:coarse){
  header{backdrop-filter:none; background:rgba(255,255,255,0.985);}
}

/* Hareket azaltma tercihi — tüm animasyonlar dursun */
@media (prefers-reduced-motion: reduce){
  .marquee-track{animation:none !important;}
  *{scroll-behavior:auto !important;}
}


/* =========================================================
   SİPARİŞ TAKİP ÇİZGİSİ (müşteri hesabı)
   ========================================================= */
.iz{
  display:flex; align-items:flex-start;
  margin:14px 0; padding:14px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.iz-adim{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:7px;
  position:relative; text-align:center;
}
.iz-adim::before{
  content:""; position:absolute; top:6px; left:-50%;
  width:100%; height:1px; background:var(--line);
}
.iz-adim:first-child::before{display:none;}
.iz-adim.gecti::before, .iz-adim.aktif::before{background:var(--cream-dim);}
.iz-nokta{
  width:13px; height:13px; border-radius:50%; position:relative; z-index:1;
  border:1px solid var(--line-strong); background:var(--dark); flex-shrink:0;
}
.iz-adim.gecti .iz-nokta{background:var(--cream); border-color:var(--cream);}
.iz-adim.aktif .iz-nokta{
  border-color:var(--cream);
  box-shadow:0 0 0 3px rgba(17,17,17,.1);
}
.iz-ad{
  font-family:var(--mono); font-size:9px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--cream-faint);
}
.iz-adim.gecti .iz-ad{color:var(--cream-dim);}
.iz-adim.aktif .iz-ad{color:var(--cream);}
.iz-iptal{
  margin:14px 0; padding:12px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  text-align:center; font-size:12.5px; color:var(--cream-faint);
}
@media (max-width:479px){
  .iz-ad{font-size:8px; letter-spacing:.02em;}
  .iz-nokta{width:11px; height:11px;}
}


/* =========================================================
   GOOGLE İLE GİRİŞ
   Düğmenin kendisini Google çiziyor; biz yalnızca çevresini
   siteye uyduruyoruz.
   ========================================================= */
.google-blok{margin-top:22px; text-align:center;}
.google-ayrac{
  display:block; position:relative;
  font-size:12.5px; color:var(--cream-faint);
  margin-bottom:18px;
}
.google-ayrac::before,
.google-ayrac::after{
  content:""; position:absolute; top:50%;
  width:calc(50% - 26px); height:1px; background:var(--line);
}
.google-ayrac::before{left:0;}
.google-ayrac::after{right:0;}

.google-btn-wrap{
  display:flex; justify-content:center;
  min-height:44px;          /* düğme gelene kadar zıplama olmasın */
}
.google-btn-wrap iframe{margin:0 auto !important;}


/* =========================================================
   DİL DEĞİŞTİRİCİ
   ========================================================= */
.lang-switch{
  display:flex; align-items:center; gap:4px;
  margin-left:6px; flex-shrink:0;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
}
.lang-btn{
  background:none; border:none; cursor:pointer; padding:6px 3px;
  font-family:inherit; font-size:inherit; letter-spacing:inherit;
  color:var(--cream-faint);
  transition:color .25s ease;
}
.lang-btn:hover{color:var(--cream-dim);}
.lang-btn.active{color:var(--cream);}
.lang-sep{color:var(--cream-faint); opacity:.45;}

@media (max-width:479px){
  .lang-switch{font-size:10px; gap:3px; margin-left:2px;}
  .lang-btn{padding:6px 2px;}
}


/* =========================================================
   KATEGORİ IZGARASI
   Tek ürün varken bölüm gizli; ikinci ürün eklenince görünür.
   ========================================================= */
.kategori-blok{margin-bottom:54px;}
.kategori-blok:last-child{margin-bottom:0;}
.kategori-ad{
  font-size:15px; letter-spacing:.16em; text-transform:uppercase;
  padding-bottom:14px; margin-bottom:26px;
  border-bottom:1px solid var(--line);
}
.kategori-urunler{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));
  gap:26px;
}
.urun-kart{display:flex; flex-direction:column; gap:10px;}
.urun-kart-foto{
  aspect-ratio:4/5; overflow:hidden; border-radius:5px;
  background:var(--dark-2);
}
.urun-kart-foto img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--ease);
}
.urun-kart:hover .urun-kart-foto img{transform:scale(1.04);}
.urun-kart-ad{font-size:14.5px; letter-spacing:.02em;}
.urun-kart-fiyat{
  font-family:var(--mono); font-size:13px; color:var(--cream-dim);
}
@media (max-width:479px){
  .kategori-urunler{grid-template-columns:repeat(2,1fr); gap:16px;}
  .kategori-blok{margin-bottom:40px;}
  .urun-kart-ad{font-size:13px;}
  .urun-kart-fiyat{font-size:12px;}
}

/* ---------- Alt bilgi: adres ve güvenli ödeme satırı ---------- */
.footer-col p.footer-adres{align-items:flex-start; cursor:default; line-height:1.55; margin-bottom:0;}
.footer-col p.footer-adres svg{margin-top:4px;}
.footer-bottom{flex-direction:column; align-items:center; gap:14px; text-align:center;}
.footer-odeme{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px 14px;}
.footer-odeme span{font-size:12.5px; color:var(--cream-dim);}
.footer-odeme img{height:16px; width:auto; opacity:.72; display:block;}

/* =========================================================
   YÜKLEME EKRANI GÜVENCESİ
   JavaScript yüklenmese ya da bir istek takılsa bile (ör. Instagram'ın
   uygulama içi tarayıcısı) yükleme ekranı 5 sn sonra kendiliğinden kapanır.
   ========================================================= */
.loading-screen{animation:loader-gec .6s ease 5s forwards;}
@keyframes loader-gec{to{opacity:0; visibility:hidden; pointer-events:none;}}

/* Hakkımızda: alt satırdaki kısa özet */
.story-points{
  margin-top:22px;
  font-family:var(--mono); font-size:11px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--cream-dim);
}

/* Güvenlik ağı: main.js hiç çalışmazsa (html'de yg-goster sınıfı eklenir) içerik gizli kalmaz */
.yg-goster .reveal{opacity:1; transform:none;}
.yg-goster .img-reveal img{opacity:1; transform:none;}

/* Ürün verisi gelene kadar boş çerçeve yerine sakin bir iskelet görünür */
.yg-yukleniyor [data-showcase] > *{visibility:hidden;}
.yg-yukleniyor [data-showcase]{position:relative; min-height:480px;}
.yg-yukleniyor [data-showcase]::before{
  content:""; position:absolute; left:0; right:0; top:0; height:420px; border-radius:12px; visibility:visible;
  background:linear-gradient(100deg, rgba(17,17,17,.04) 30%, rgba(17,17,17,.10) 50%, rgba(17,17,17,.04) 70%);
  background-size:200% 100%; animation:ygIskelet 1.4s linear infinite;
}
@keyframes ygIskelet{from{background-position:200% 0;} to{background-position:-200% 0;}}
@media (prefers-reduced-motion:reduce){ .yg-yukleniyor [data-showcase]::before{animation:none;} }

/* Fotoğraf yüklenemediğinde */
.gorsel-yok{position:relative;}
.gorsel-yok img{visibility:hidden;}
.gorsel-yok::after{
  content:attr(data-yok); position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--cream-dim);
}