/* ==========================================================================
   TÜLAY TASARIM — BİLEŞEN KÜTÜPHANESİ
   tokens.css'e bağımlıdır. Ham değer yoktur.
   Sıra: 1 Temel · 2 Yerleşim · 3 Tipografi · 4 Buton · 5 Header · 6 Hero
         7 Güven · 8 Ürün · 9 Kategori · 10 Hikâye · 11 Yorum · 12 Instagram
         13 SSS · 14 Adımlar · 15 Ürün detay · 16 Form · 17 Footer · 18 Yardımcı
   ========================================================================== */

/* ==== 1. TEMEL ========================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--ust-bar) + var(--bo-5));
}

body {
  margin: 0;
  background: var(--renk-porselen);
  color: var(--renk-murekkep);
  font-family: var(--font-govde);
  font-size: var(--fs-govde);
  line-height: var(--lh-govde);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, picture { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: var(--renk-bakir-koyu); text-decoration: none; }
a:hover { color: var(--renk-bakir); }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: none;
  box-shadow: var(--golge-odak);
  border-radius: var(--kose-xs);
}

::selection { background: var(--renk-bakir-sis); color: var(--renk-murekkep); }

/* Klavye kullanıcıları için atlama linki */
.atla {
  position: absolute; left: var(--bo-4); top: calc(-1 * var(--bo-10));
  z-index: var(--z-ipucu);
  background: var(--renk-murekkep); color: var(--renk-porselen);
  padding: var(--bo-3) var(--bo-5); border-radius: var(--kose-hap);
  transition: top var(--sure) var(--egri);
}
.atla:focus { top: var(--bo-4); color: var(--renk-porselen); }


/* ==== 2. YERLEŞİM ======================================================= */
.kap { width: 100%; max-width: var(--en-max); margin-inline: auto; padding-inline: var(--oluk); }
.kap-dar { max-width: var(--en-dar); }

.bolum { padding-block: var(--bolum-y); position: relative; }
.bolum-genis { padding-block: var(--bolum-y-genis); }
.bolum-krem { background: var(--renk-krem); }
.bolum-kum  { background: var(--renk-kum); }

/* Yumuşak geçiş: kremden porselene organik dalga yerine ince çizgi */
.ayirici { border: 0; height: 1px; background: var(--renk-cizgi); margin: 0; }

/* Logodaki yaprak dalından türetilen bölüm ayırıcısı */
.yaprak-ayirici {
  display: flex; align-items: center; justify-content: center; width: 100%; overflow: hidden;
  gap: var(--bo-3); color: var(--renk-bakir-acik);
  margin-block: var(--bo-6);
}
.yaprak-ayirici::before, .yaprak-ayirici::after {
  content: ""; height: 1px; width: min(120px, 18vw); min-width: 0; flex-shrink: 1;
  background: linear-gradient(to right, transparent, var(--renk-bakir-acik));
}
.yaprak-ayirici::after { background: linear-gradient(to left, transparent, var(--renk-bakir-acik)); }

.izgara { display: grid; gap: var(--bo-5); }
.iki-kolon { display: grid; gap: clamp(var(--bo-6), 5vw, var(--bo-9)); align-items: center; }
@media (min-width: 900px) { .iki-kolon { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .iki-kolon-genis { grid-template-columns: 1.15fr .85fr; } }


/* ==== 3. TİPOGRAFİ ===================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-baslik);
  font-weight: var(--fw-orta);
  line-height: var(--lh-baslik);
  letter-spacing: var(--ls-baslik);
  color: var(--renk-murekkep);
  margin: 0 0 var(--bo-4);
}
h1 { font-size: var(--fs-1); }
h2 { font-size: var(--fs-2); }
h3 { font-size: var(--fs-3); }
h4 { font-size: var(--fs-4); font-family: var(--font-govde); font-weight: var(--fw-kalin); }
p  { margin: 0 0 var(--bo-4); }
p:last-child { margin-bottom: 0; }

/* Başlık içinde italik vurgu — markanın "el yazısı" tonu */
.vurgu { font-style: italic; color: var(--renk-bakir); font-weight: var(--fw-normal); }

/* Eyebrow / kaş — her bölümün üstündeki küçük etiket */
.kas {
  display: inline-flex; align-items: center; gap: var(--bo-2);
  font-family: var(--font-govde); font-size: var(--fs-kas);
  font-weight: var(--fw-orta); letter-spacing: var(--ls-kas);
  text-transform: uppercase; color: var(--renk-bakir);
  margin: 0 0 var(--bo-4);
}
.kas::before {
  content: ""; width: 22px; height: 1px; background: var(--renk-bakir-orta);
}
.kas-orta { justify-content: center; }
.kas-orta::after { content: ""; width: 22px; height: 1px; background: var(--renk-bakir-orta); }

.giris { font-size: var(--fs-buyuk); line-height: var(--lh-genis); color: var(--renk-murekkep-2); }
.metin { max-width: var(--en-metin); }
.orta { text-align: center; margin-inline: auto; }
.mini { font-size: var(--fs-mini); color: var(--renk-murekkep-3); }
.kucuk { font-size: var(--fs-kucuk); }

.baslik-blok { max-width: 60ch; margin-bottom: var(--bo-7); }
.baslik-blok.orta { text-align: center; margin-inline: auto; }
.baslik-blok h2 { margin-bottom: var(--bo-3); }


/* ==== 4. BUTON ========================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--bo-2);
  font-family: var(--font-govde); font-size: var(--fs-kucuk); font-weight: var(--fw-orta);
  letter-spacing: .01em; line-height: 1;
  padding: 1.05em 1.9em; border: 1px solid transparent; border-radius: var(--kose-hap);
  cursor: pointer; text-align: center; white-space: nowrap;
  transition: background var(--sure) var(--egri), color var(--sure) var(--egri),
              border-color var(--sure) var(--egri), transform var(--sure-hizli) var(--egri),
              box-shadow var(--sure) var(--egri);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 1.05em; height: 1.05em; flex: none; }

.btn-birincil { background: var(--renk-bakir); color: var(--renk-ipek); box-shadow: var(--golge-1); }
.btn-birincil:hover { background: var(--renk-bakir-koyu); color: var(--renk-ipek); box-shadow: var(--golge-2); }

.btn-ikincil {
  background: transparent; color: var(--renk-murekkep); border-color: var(--renk-cizgi-koyu);
}
.btn-ikincil:hover { border-color: var(--renk-bakir); color: var(--renk-bakir-koyu); background: var(--renk-bakir-sis); }

.btn-yumusak { background: var(--renk-bakir-sis); color: var(--renk-bakir-koyu); }
.btn-yumusak:hover { background: var(--renk-bakir-acik); color: var(--renk-murekkep); }

.btn-beyaz { background: var(--renk-ipek); color: var(--renk-murekkep); }
.btn-beyaz:hover { background: var(--renk-krem); color: var(--renk-bakir-koyu); }

.btn-link {
  background: none; border: 0; padding: 0; color: var(--renk-bakir-koyu);
  font-weight: var(--fw-orta); font-size: var(--fs-kucuk);
  display: inline-flex; align-items: center; gap: var(--bo-2);
}
.btn-link::after { content: "→"; transition: transform var(--sure) var(--egri); }
.btn-link:hover::after { transform: translateX(4px); }

.btn-sm { padding: .8em 1.4em; font-size: var(--fs-mini); }
.btn-lg { padding: 1.2em 2.3em; font-size: var(--fs-govde); }
.btn-blok { width: 100%; white-space: normal; }
.btn-grup { display: flex; flex-wrap: wrap; gap: var(--bo-3); }


/* ==== 5. HEADER ======================================================== */
.duyuru {
  background: var(--renk-murekkep); color: var(--renk-kum);
  font-size: var(--fs-mini); text-align: center;
  padding: var(--bo-2) var(--oluk);
}
.duyuru b { color: var(--renk-ipek); font-weight: var(--fw-orta); }
.duyuru-ek { display: none; }
@media (min-width: 620px) { .duyuru-ek { display: inline; } }

.ust {
  position: sticky; top: 0; z-index: var(--z-sabit);
  background: rgba(253,250,246,.88);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--renk-cizgi);
}
.ust-ic {
  height: var(--ust-bar);
  display: flex; align-items: center; justify-content: space-between; gap: var(--bo-5);
}

/* Marka kilidi = gerçek logo mührü + metin kilit. Logonun içindeki yazı
   120px altında okunmaz; bu yüzden ad metinle yazılır, logo amblem durur. */
.marka { display: inline-flex; align-items: center; gap: var(--bo-3); }
.marka:hover { color: inherit; }
.marka-mark { width: 34px; height: 34px; flex: none; color: var(--renk-bakir); }
.marka-muhur {
  width: 42px; height: 42px; flex: none;
  border-radius: var(--kose-hap); overflow: hidden;
  background: var(--renk-ipek); border: 1px solid var(--renk-cizgi);
  display: grid; place-items: center;
}
/* %122: logonun beyaz kenar boşluğunu kırpar, çelenk daireyi doldurur */
.marka-muhur img { width: 122%; height: 122%; object-fit: cover; }
.marka-muhur-lg { width: 52px; height: 52px; }
.marka-yazi { display: grid; line-height: 1; }
.marka-ust {
  font-size: var(--fs-kas); letter-spacing: var(--ls-kas); text-transform: uppercase;
  color: var(--renk-bakir); font-weight: var(--fw-orta);
}
.marka-alt {
  font-family: var(--font-baslik); font-size: 1.5rem; font-weight: var(--fw-orta);
  letter-spacing: var(--ls-marka); color: var(--renk-murekkep); margin-top: 2px;
}

.nav { display: none; }
@media (min-width: 1000px) {
  .nav { display: flex; align-items: center; gap: var(--bo-5); }
}
.nav-link {
  position: relative; color: var(--renk-murekkep-2); font-size: var(--fs-kucuk);
  padding-block: var(--bo-2);
}
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--renk-bakir); transition: right var(--sure) var(--egri);
}
.nav-link:hover { color: var(--renk-murekkep); }
.nav-link:hover::after, .nav-link[aria-current="page"]::after { right: 0; }
.nav-link[aria-current="page"] { color: var(--renk-bakir-koyu); }

.ust-aksiyon { display: flex; align-items: center; gap: var(--bo-3); }
.ikon-btn {
  width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--renk-cizgi); border-radius: var(--kose-hap);
  background: transparent; color: var(--renk-murekkep-2); cursor: pointer;
  transition: all var(--sure) var(--egri);
}
.ikon-btn:hover { border-color: var(--renk-bakir); color: var(--renk-bakir); background: var(--renk-bakir-sis); }
.ikon-btn svg { width: 18px; height: 18px; }
.ust-aksiyon .btn { display: none; }
@media (min-width: 640px) { .ust-aksiyon .btn { display: inline-flex; } }
.menu-btn { display: inline-flex; }
@media (min-width: 1000px) { .menu-btn { display: none; } }

/* Mobil menü */
.mobil-menu {
  position: fixed; inset: 0; z-index: var(--z-menu);
  background: var(--renk-porselen);
  padding: var(--bo-5) var(--oluk) var(--bo-8);
  display: grid; align-content: start; gap: var(--bo-2);
  transform: translateY(-8px); opacity: 0; pointer-events: none;
  transition: opacity var(--sure) var(--egri), transform var(--sure) var(--egri);
  overflow-y: auto;
}
.mobil-menu[data-acik="true"] { transform: none; opacity: 1; pointer-events: auto; }
.mobil-menu-bas { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--bo-5); }
.mobil-menu a.mobil-link {
  font-family: var(--font-baslik); font-size: var(--fs-3); color: var(--renk-murekkep);
  padding: var(--bo-3) 0; border-bottom: 1px solid var(--renk-cizgi);
}
.mobil-menu a.mobil-link:hover { color: var(--renk-bakir); }
.mobil-menu .btn { margin-top: var(--bo-5); }


/* ==== 6. HERO ========================================================== */
.hero { position: relative; padding-block: clamp(var(--bo-7), 7vw, var(--bo-9)); overflow: hidden; }
.hero-ic { display: grid; gap: clamp(var(--bo-7), 6vw, var(--bo-8)); align-items: center; }
@media (min-width: 940px) { .hero-ic { grid-template-columns: 1.05fr .95fr; } }

.hero h1 { font-size: var(--fs-devasa); line-height: var(--lh-siki); letter-spacing: var(--ls-devasa); }
.hero .giris { max-width: 46ch; margin-bottom: var(--bo-6); }

/* Yumuşak renk lekeleri — soğuk porselen hamurunun mermer dokusu */
.leke {
  position: absolute; border-radius: 50%; filter: blur(70px);
  opacity: .5; pointer-events: none; z-index: -1;
}
.leke-1 { width: 42vw; height: 42vw; background: var(--renk-pembe-sis); top: -12vw; right: -8vw; }
.leke-2 { width: 34vw; height: 34vw; background: var(--renk-adacayi-sis); bottom: -14vw; left: -10vw; }
.leke-3 { width: 26vw; height: 26vw; background: var(--renk-altin-sis); top: 30%; left: 40%; opacity: .35; }

/* Hero görsel kompozisyonu — kemer formu marka imzası */
.hero-gorsel { position: relative; display: grid; place-items: center; }
.kemer {
  border-radius: var(--kose-kemer);
  overflow: hidden;
  display: grid; place-items: center; padding: var(--bo-5);
  background:
    radial-gradient(120% 90% at 50% 12%, var(--kart-1, var(--renk-krem)) 0%, transparent 62%),
    radial-gradient(90% 80% at 18% 100%, var(--kart-2, var(--renk-kum)) 0%, transparent 70%),
    var(--renk-krem);
  box-shadow: var(--golge-3);
  border: 1px solid var(--renk-cizgi);
}
.kemer > svg, .hero-yuzen > svg { width: 100%; height: 100%; }
.hero-yuzen {
  display: grid; place-items: center; padding: var(--bo-3);
  background:
    radial-gradient(120% 90% at 50% 12%, var(--kart-1, var(--renk-krem)) 0%, transparent 62%),
    var(--renk-ipek);
}
.kemer-foto { padding: 0; }
.kemer-foto > svg { padding: 0; }
.hero-kemer { width: min(100%, 400px); aspect-ratio: 1 / 1.12; padding: var(--bo-4); }
.hero-yuzen {
  position: absolute; width: min(42%, 190px); aspect-ratio: 1;
  border-radius: var(--kose-lg); overflow: hidden;
  background: var(--renk-ipek); box-shadow: var(--golge-3);
  border: 1px solid var(--renk-cizgi);
}
.hero-yuzen-1 { left: -4%; bottom: 10%; }
.hero-yuzen-2 { right: -2%; top: 6%; width: min(34%, 150px); }
@media (max-width: 520px) {
  .hero-yuzen-1 { left: -6%; bottom: 4%; width: 38%; }
  .hero-yuzen-2 { right: -4%; top: 2%; width: 30%; }
}

/* Logo damgası — gerçek logo görseli sadece ≥120px kullanılır */
.logo-damga { width: clamp(140px, 22vw, 230px); mix-blend-mode: multiply; }

/* Logo mührü — görselin üstüne oturan yuvarlak damga */
.logo-muhur {
  position: absolute; z-index: 3; right: -6%; bottom: 4%;
  width: clamp(104px, 15vw, 148px); aspect-ratio: 1;
  border-radius: 50%; overflow: hidden; background: var(--renk-ipek);
  border: 1px solid var(--renk-cizgi); box-shadow: var(--golge-3);
  display: grid; place-items: center;
}
.logo-muhur img { width: 118%; height: 118%; object-fit: cover; }
@media (max-width: 900px) { .logo-muhur { right: 2% !important; left: auto !important; } }

/* Hero altındaki mikro güven satırı */
.mikro-guven {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: var(--bo-4);
  margin-top: var(--bo-6); padding-top: var(--bo-5);
  border-top: 1px solid var(--renk-cizgi);
  font-size: var(--fs-mini); color: var(--renk-murekkep-2);
}
.mikro-guven span { display: flex; align-items: flex-start; gap: var(--bo-2); line-height: var(--lh-orta); }
.mikro-guven svg { width: 16px; height: 16px; color: var(--renk-adacayi-koyu); flex: none; margin-top: 2px; }


/* ==== 7. GÜVEN BANDI & ROZETLER ======================================== */
.guven-bant {
  background: var(--renk-krem); border-block: 1px solid var(--renk-cizgi);
  padding-block: var(--bo-6);
}
.guven-izgara { display: grid; gap: var(--bo-5); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 780px) { .guven-izgara { grid-template-columns: repeat(4, 1fr); } }

.guven-oge { display: grid; gap: var(--bo-2); }
.guven-oge svg { width: 26px; height: 26px; color: var(--renk-bakir); }
.guven-oge b { font-size: var(--fs-kucuk); font-weight: var(--fw-kalin); }
.guven-oge p { font-size: var(--fs-mini); color: var(--renk-murekkep-2); line-height: var(--lh-orta); }

.rozet {
  display: inline-flex; align-items: center; gap: var(--bo-2);
  font-size: var(--fs-mini); font-weight: var(--fw-orta);
  padding: .42em .95em; border-radius: var(--kose-hap);
  background: var(--renk-bakir-sis); color: var(--renk-bakir-koyu);
}
.rozet svg { width: 14px; height: 14px; }
.rozet-yesil { background: var(--renk-basari-sis); color: var(--renk-basari); }
.rozet-altin { background: var(--renk-altin-sis); color: #8A6F26; }
.rozet-pembe { background: var(--renk-pembe-sis); color: var(--renk-pembe-koyu); }
.rozet-adacayi { background: var(--renk-adacayi-sis); color: var(--renk-adacayi-koyu); }

/* Sayı vurguları */
.sayi-izgara { display: grid; gap: var(--bo-6); grid-template-columns: repeat(2, 1fr); text-align: center; }
@media (min-width: 780px) { .sayi-izgara { grid-template-columns: repeat(4, 1fr); } }
.sayi { font-family: var(--font-baslik); font-size: var(--fs-1); color: var(--renk-bakir); line-height: 1; }
.sayi-etiket { font-size: var(--fs-mini); color: var(--renk-murekkep-2); margin-top: var(--bo-2); }


/* ==== 8. ÜRÜN KARTI ==================================================== */
.urun-izgara { display: grid; gap: clamp(var(--bo-4), 2.5vw, var(--bo-6)); grid-template-columns: repeat(2, 1fr); }
.urun-izgara > *, .kategori-izgara > *, .guven-izgara > * { min-width: 0; }
@media (min-width: 760px) { .urun-izgara { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .urun-izgara.dort { grid-template-columns: repeat(4, 1fr); } }

.urun-kart {
  position: relative; display: flex; flex-direction: column;
  background: var(--renk-ipek); border: 1px solid var(--renk-cizgi);
  border-radius: var(--kose-md); overflow: hidden;
  transition: transform var(--sure) var(--egri), box-shadow var(--sure) var(--egri),
              border-color var(--sure) var(--egri);
}
.urun-kart:hover { transform: translateY(-4px); box-shadow: var(--golge-2); border-color: var(--renk-bakir-acik); }

.urun-gorsel {
  position: relative; aspect-ratio: 1; display: grid; place-items: center;
  background:
    radial-gradient(120% 90% at 50% 15%, var(--kart-1, var(--renk-krem)) 0%, transparent 60%),
    radial-gradient(90% 80% at 20% 100%, var(--kart-2, var(--renk-kum)) 0%, transparent 70%),
    var(--renk-krem);
  overflow: hidden;
}
.urun-gorsel svg { width: 72%; height: 72%; transition: transform var(--sure-yavas) var(--egri); }
.urun-kart:hover .urun-gorsel svg { transform: scale(1.045) rotate(-1deg); }

.urun-etiket {
  position: absolute; top: var(--bo-3); left: var(--bo-3); z-index: 2;
  font-size: var(--fs-kas); letter-spacing: .06em; text-transform: uppercase;
  font-weight: var(--fw-kalin);
  padding: .4em .8em; border-radius: var(--kose-hap);
  background: rgba(255,255,255,.92); color: var(--renk-bakir-koyu);
  backdrop-filter: blur(6px);
}
.urun-etiket-sag { left: auto; right: var(--bo-3); background: var(--renk-murekkep); color: var(--renk-ipek); }

.urun-govde { padding: var(--bo-4); display: flex; flex-direction: column; gap: var(--bo-2); flex: 1; }
.urun-kategori { font-size: var(--fs-kas); letter-spacing: .1em; text-transform: uppercase; color: var(--renk-murekkep-3); }
.urun-ad { font-family: var(--font-baslik); font-size: var(--fs-4); font-weight: var(--fw-orta); margin: 0; }
.urun-ad a { color: var(--renk-murekkep); }
.urun-ad a:hover { color: var(--renk-bakir-koyu); }
.urun-not { font-size: var(--fs-mini); color: var(--renk-murekkep-2); line-height: var(--lh-orta); }
.urun-alt {
  margin-top: auto; padding-top: var(--bo-3);
  display: flex; align-items: center; justify-content: space-between; gap: var(--bo-3);
}
.urun-fiyat { font-family: var(--font-baslik); font-size: var(--fs-3); color: var(--renk-murekkep); }
.urun-fiyat s { font-family: var(--font-govde); font-size: var(--fs-mini); color: var(--renk-murekkep-3); margin-right: var(--bo-2); }

/* Stok durumu */
.stok { display: inline-flex; align-items: center; gap: var(--bo-2); font-size: var(--fs-mini); color: var(--renk-murekkep-2); }
.stok::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--renk-basari); }
.stok-son::before { background: var(--renk-uyari); }
.stok-yok::before { background: var(--renk-murekkep-3); }


/* ==== 9. KATEGORİ KARTI ================================================ */
.kategori-izgara { display: grid; gap: var(--bo-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .kategori-izgara { grid-template-columns: repeat(4, 1fr); } }

.kategori-kart {
  position: relative; display: block; text-align: center;
  padding: var(--bo-5) var(--bo-4) var(--bo-5);
  background: var(--renk-ipek); border: 1px solid var(--renk-cizgi);
  border-radius: var(--kose-kemer);
  transition: all var(--sure) var(--egri);
}
.kategori-kart:hover { border-color: var(--renk-bakir-acik); box-shadow: var(--golge-2); transform: translateY(-3px); }
.kategori-kart svg { width: 84px; height: 84px; margin: 0 auto var(--bo-3); }
.kategori-kart b { display: block; font-family: var(--font-baslik); font-size: var(--fs-4); color: var(--renk-murekkep); }
.kategori-kart span { font-size: var(--fs-mini); color: var(--renk-murekkep-3); }


/* ==== 10. HİKÂYE / ATÖLYE ============================================== */
.hikaye-gorsel { position: relative; }
.hikaye-kemer { width: min(100%, 460px); aspect-ratio: 5 / 6; }
.imza {
  font-family: var(--font-baslik); font-style: italic; font-size: var(--fs-3);
  color: var(--renk-bakir); margin-top: var(--bo-5);
}
.alinti {
  margin: 0; padding-left: var(--bo-5);
  border-left: 2px solid var(--renk-bakir-acik);
  font-family: var(--font-baslik); font-size: var(--fs-3); font-style: italic;
  line-height: var(--lh-orta); color: var(--renk-murekkep);
}

/* Bilgi kutusu — yasal/güven notları için */
.bilgi {
  display: flex; gap: var(--bo-3); padding: var(--bo-4) var(--bo-5);
  background: var(--renk-adacayi-sis); border: 1px solid rgba(85,128,116,.2);
  border-radius: var(--kose-md); font-size: var(--fs-kucuk); color: var(--renk-murekkep-2);
}
.bilgi svg { width: 20px; height: 20px; flex: none; color: var(--renk-adacayi-koyu); margin-top: 2px; }
.bilgi-krem { background: var(--renk-bakir-sis); border-color: var(--renk-cizgi-bakir); }
.bilgi-krem svg { color: var(--renk-bakir); }


/* ==== 11. YORUMLAR ===================================================== */
.yorum-izgara { display: grid; gap: var(--bo-5); }
.yorum-izgara > * { min-width: 0; }
@media (min-width: 620px) { .yorum-izgara { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 920px) { .yorum-izgara { grid-template-columns: repeat(3, 1fr); } }

.yorum-kart {
  background: var(--renk-ipek); border: 1px solid var(--renk-cizgi);
  border-radius: var(--kose-md); padding: var(--bo-5);
  display: flex; flex-direction: column; gap: var(--bo-3);
  box-shadow: var(--golge-1);
}
.yildiz { display: inline-flex; gap: 2px; color: var(--renk-altin); }
.yildiz svg { width: 15px; height: 15px; }
.yorum-metin { font-size: var(--fs-kucuk); line-height: var(--lh-genis); color: var(--renk-murekkep); margin: 0; }
.yorum-kisi { margin-top: auto; display: flex; align-items: center; gap: var(--bo-3); padding-top: var(--bo-3); border-top: 1px solid var(--renk-cizgi); }
.avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--renk-bakir-sis); color: var(--renk-bakir-koyu);
  font-weight: var(--fw-kalin); font-size: var(--fs-mini);
}
.yorum-kisi b { display: block; font-size: var(--fs-kucuk); }
.yorum-kisi span { font-size: var(--fs-mini); color: var(--renk-murekkep-3); }


/* ==== 12. INSTAGRAM ŞERİDİ ============================================= */
.ig-izgara { display: grid; gap: var(--bo-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .ig-izgara { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .ig-izgara { grid-template-columns: repeat(6, 1fr); } }

.ig-kare {
  position: relative; aspect-ratio: 1; border-radius: var(--kose-sm); overflow: hidden;
  display: grid; place-items: center; background: var(--renk-krem);
  border: 1px solid var(--renk-cizgi);
}
.ig-kare svg.urun-svg { width: 80%; height: 80%; }
.ig-kare::after {
  content: ""; position: absolute; inset: 0;
  background: var(--renk-murekkep); opacity: 0;
  transition: opacity var(--sure) var(--egri);
}
.ig-kare:hover::after { opacity: .12; }
.ig-ikon {
  position: absolute; z-index: 2; color: var(--renk-ipek);
  opacity: 0; transition: opacity var(--sure) var(--egri);
  width: 24px; height: 24px;
}
.ig-kare:hover .ig-ikon { opacity: 1; }


/* ==== 13. SSS AKORDİYON ================================================ */
.sss { display: grid; gap: var(--bo-3); max-width: var(--en-dar); margin-inline: auto; }
.sss-oge {
  background: var(--renk-ipek); border: 1px solid var(--renk-cizgi);
  border-radius: var(--kose-md); overflow: hidden;
  transition: border-color var(--sure) var(--egri);
}
.sss-oge[data-acik="true"] { border-color: var(--renk-bakir-acik); box-shadow: var(--golge-1); }
.sss-soru {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: var(--bo-4) var(--bo-5); display: flex; align-items: center; justify-content: space-between;
  gap: var(--bo-4); font-size: var(--fs-govde); font-weight: var(--fw-orta);
}
.sss-soru:hover { color: var(--renk-bakir-koyu); }
.sss-isaret {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--renk-cizgi-koyu); display: grid; place-items: center;
  color: var(--renk-bakir); transition: transform var(--sure) var(--egri), background var(--sure) var(--egri);
}
.sss-oge[data-acik="true"] .sss-isaret { transform: rotate(45deg); background: var(--renk-bakir-sis); }
.sss-cevap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--sure) var(--egri); }
.sss-oge[data-acik="true"] .sss-cevap { grid-template-rows: 1fr; }
.sss-cevap > div { overflow: hidden; }
.sss-cevap p, .sss-cevap ul {
  padding: 0 var(--bo-5) var(--bo-5); margin: 0;
  font-size: var(--fs-kucuk); color: var(--renk-murekkep-2); line-height: var(--lh-genis);
}
.sss-cevap ul { padding-left: calc(var(--bo-5) + var(--bo-4)); }


/* ==== 14. ADIMLAR (Nasıl sipariş verilir) ============================== */
.adim-izgara { display: grid; gap: var(--bo-6); counter-reset: adim; }
@media (min-width: 820px) { .adim-izgara { grid-template-columns: repeat(3, 1fr); } }
.adim { position: relative; padding-top: var(--bo-6); }
.adim::before {
  counter-increment: adim; content: counter(adim);
  position: absolute; top: 0; left: 0;
  font-family: var(--font-baslik); font-size: var(--fs-2); color: var(--renk-bakir-acik); line-height: 1;
}
.adim h3 { font-size: var(--fs-4); font-family: var(--font-govde); font-weight: var(--fw-kalin); margin-bottom: var(--bo-2); }
.adim p { font-size: var(--fs-kucuk); color: var(--renk-murekkep-2); }


/* ==== 15. ÜRÜN DETAY =================================================== */
.kirinti { font-size: var(--fs-mini); color: var(--renk-murekkep-3); margin-bottom: var(--bo-5); }
.kirinti a { color: var(--renk-murekkep-2); }
.kirinti span { margin-inline: var(--bo-2); }

.detay { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(var(--bo-6), 4vw, var(--bo-8)); }
@media (min-width: 940px) { .detay { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; } }

.galeri { display: grid; gap: var(--bo-3); }
.galeri-ana {
  aspect-ratio: 1; border-radius: var(--kose-md); overflow: hidden;
  display: grid; place-items: center; border: 1px solid var(--renk-cizgi);
  background:
    radial-gradient(120% 90% at 50% 12%, var(--kart-1, var(--renk-krem)) 0%, transparent 62%),
    radial-gradient(90% 80% at 18% 100%, var(--kart-2, var(--renk-kum)) 0%, transparent 70%),
    var(--renk-krem);
}
.galeri-ana svg { width: 76%; height: 76%; }
.galeri-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--bo-3); }
.galeri-thumbs > * { min-width: 0; }
.galeri-thumb {
  aspect-ratio: 1; border-radius: var(--kose-sm); overflow: hidden; cursor: pointer;
  border: 1px solid var(--renk-cizgi); background: var(--renk-krem);
  display: grid; place-items: center; padding: var(--bo-2);
  transition: all var(--sure) var(--egri);
}
.galeri-thumb[aria-selected="true"] { border-color: var(--renk-bakir); box-shadow: 0 0 0 1px var(--renk-bakir); }
.galeri-thumb:hover { border-color: var(--renk-bakir-acik); }

.detay-bas { margin-bottom: var(--bo-5); }
.detay-bas h1 { font-size: var(--fs-1); margin-bottom: var(--bo-3); }
.detay-fiyat {
  font-family: var(--font-baslik); font-size: var(--fs-2); color: var(--renk-murekkep);
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--bo-2) var(--bo-3);
  margin-bottom: var(--bo-2);
}
.detay-kdv { font-family: var(--font-govde); font-size: var(--fs-mini); color: var(--renk-murekkep-3); }

.satin-kutu {
  background: var(--renk-krem); border: 1px solid var(--renk-cizgi);
  border-radius: var(--kose-md); padding: var(--bo-5);
  display: grid; gap: var(--bo-4); margin-block: var(--bo-5);
}
.satin-kutu .btn-birincil { font-size: var(--fs-govde); padding: 1.15em 1.9em; }
.satin-not { font-size: var(--fs-mini); color: var(--renk-murekkep-2); text-align: center; line-height: var(--lh-orta); }

.secim { display: grid; gap: var(--bo-2); }
.secim-etiket { font-size: var(--fs-mini); font-weight: var(--fw-kalin); }
.secim-liste { display: flex; flex-wrap: wrap; gap: var(--bo-2); }
.secim-nokta {
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--renk-cizgi-koyu); box-shadow: var(--golge-ic);
  transition: all var(--sure) var(--egri);
}
.secim-nokta[aria-selected="true"] { box-shadow: 0 0 0 2px var(--renk-porselen), 0 0 0 3.5px var(--renk-bakir); }

.ozellik-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--bo-3); }
.ozellik-liste li { display: flex; gap: var(--bo-3); font-size: var(--fs-kucuk); color: var(--renk-murekkep-2); }
.ozellik-liste li::before {
  content: ""; flex: none; width: 8px; height: 8px; margin-top: .55em; border-radius: 50%;
  background: var(--renk-bakir-acik); box-shadow: 0 0 0 3px var(--renk-bakir-sis);
}

/* Sekmeler */
.sekme-bas { display: flex; gap: var(--bo-2); flex-wrap: wrap; border-bottom: 1px solid var(--renk-cizgi); margin-bottom: var(--bo-5); }
.sekme-btn {
  background: none; border: 0; cursor: pointer; padding: var(--bo-3) var(--bo-4);
  font-size: var(--fs-kucuk); font-weight: var(--fw-orta); color: var(--renk-murekkep-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.sekme-btn[aria-selected="true"] { color: var(--renk-bakir-koyu); border-bottom-color: var(--renk-bakir); }
.sekme-panel[hidden] { display: none; }

/* Tablo (bakım / kargo bilgisi) */
.tablo { width: 100%; border-collapse: collapse; font-size: var(--fs-kucuk); }
.tablo th, .tablo td { text-align: left; padding: var(--bo-3) var(--bo-4); border-bottom: 1px solid var(--renk-cizgi); }
.tablo th { font-weight: var(--fw-kalin); width: 40%; color: var(--renk-murekkep); }
.tablo td { color: var(--renk-murekkep-2); }


/* ==== 16. FİLTRE & FORM ================================================ */
.filtre { display: flex; flex-wrap: wrap; gap: var(--bo-2); margin-bottom: var(--bo-6); }
.cip {
  background: transparent; border: 1px solid var(--renk-cizgi-koyu); border-radius: var(--kose-hap);
  padding: .6em 1.2em; font-size: var(--fs-mini); font-weight: var(--fw-orta);
  color: var(--renk-murekkep-2); cursor: pointer; transition: all var(--sure) var(--egri);
}
.cip:hover { border-color: var(--renk-bakir); color: var(--renk-bakir-koyu); }
.cip[aria-pressed="true"] { background: var(--renk-murekkep); border-color: var(--renk-murekkep); color: var(--renk-porselen); }

.form { display: grid; gap: var(--bo-4); }
.alan { display: grid; gap: var(--bo-2); }
.alan label { font-size: var(--fs-mini); font-weight: var(--fw-kalin); }
.alan input, .alan textarea, .alan select {
  width: 100%; font: inherit; font-size: var(--fs-kucuk); color: var(--renk-murekkep);
  background: var(--renk-ipek); border: 1px solid var(--renk-cizgi-koyu);
  border-radius: var(--kose-sm); padding: var(--bo-3) var(--bo-4);
  transition: border-color var(--sure) var(--egri), box-shadow var(--sure) var(--egri);
}
.alan textarea { min-height: 130px; resize: vertical; }
.alan input:focus, .alan textarea:focus, .alan select:focus {
  outline: none; border-color: var(--renk-bakir); box-shadow: 0 0 0 3px var(--renk-bakir-sis);
}
.alan input::placeholder, .alan textarea::placeholder { color: var(--renk-murekkep-3); }
.alan-ipucu { font-size: var(--fs-mini); color: var(--renk-murekkep-3); }
@media (min-width: 640px) { .alan-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bo-4); } }

.onay { display: flex; gap: var(--bo-3); align-items: flex-start; font-size: var(--fs-mini); color: var(--renk-murekkep-2); }
.onay input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--renk-bakir); flex: none; }


/* ==== 17. FOOTER ======================================================= */
.footer { background: var(--renk-murekkep); color: var(--renk-kum); padding-block: var(--bolum-y) var(--bo-6); margin-top: var(--bo-8); }
.footer a { color: var(--renk-kum); }
.footer a:hover { color: var(--renk-ipek); }
.footer-izgara { display: grid; gap: var(--bo-7); }
@media (min-width: 780px) { .footer-izgara { grid-template-columns: 1.4fr 1fr 1fr 1.1fr; } }

.footer-marka .marka-mark { width: 44px; height: 44px; color: var(--renk-bakir-acik); }
.footer-marka .marka-ust { color: var(--renk-bakir-acik); }
.footer-marka .marka-alt { color: var(--renk-ipek); font-size: 1.9rem; }
.footer-marka p { font-size: var(--fs-mini); color: rgba(247,240,231,.7); max-width: 34ch; margin-top: var(--bo-4); }
.footer h4 {
  color: var(--renk-ipek); font-size: var(--fs-kas); letter-spacing: var(--ls-kas);
  text-transform: uppercase; font-family: var(--font-govde); margin-bottom: var(--bo-4);
}
.footer-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--bo-3); font-size: var(--fs-kucuk); }
.footer-liste a { color: rgba(247,240,231,.78); }

.sosyal { display: flex; gap: var(--bo-3); margin-top: var(--bo-4); }
.sosyal a {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(247,240,231,.22); color: var(--renk-kum);
  transition: all var(--sure) var(--egri);
}
.sosyal a:hover { background: var(--renk-bakir); border-color: var(--renk-bakir); color: var(--renk-ipek); }
.sosyal svg { width: 18px; height: 18px; }

.footer-alt {
  margin-top: var(--bo-7); padding-top: var(--bo-5);
  border-top: 1px solid rgba(247,240,231,.16);
  display: flex; flex-wrap: wrap; gap: var(--bo-3) var(--bo-5);
  justify-content: space-between; align-items: center;
  font-size: var(--fs-mini); color: rgba(247,240,231,.62);
}
.odeme-ikon { display: flex; gap: var(--bo-2); align-items: center; opacity: .85; }
.odeme-ikon span {
  font-size: 10px; letter-spacing: .06em; padding: .35em .6em; border-radius: var(--kose-xs);
  border: 1px solid rgba(247,240,231,.25);
}

/* Yüzen mesaj butonu (Instagram) */
.mesaj-float {
  position: fixed; right: var(--bo-5); bottom: var(--bo-5); z-index: var(--z-sabit);
  display: inline-flex; align-items: center; gap: var(--bo-3);
  background: var(--renk-ipek); color: var(--renk-murekkep);
  border: 1px solid var(--renk-cizgi); border-radius: var(--kose-hap);
  padding: var(--bo-3) var(--bo-4); box-shadow: var(--golge-3);
  font-size: var(--fs-mini); font-weight: var(--fw-orta);
  transition: all var(--sure) var(--egri);
}
.mesaj-float:hover { transform: translateY(-2px); color: var(--renk-bakir-koyu); }
.mesaj-float svg { width: 20px; height: 20px; color: var(--renk-bakir); flex: none; }
@media (max-width: 560px) { .mesaj-float span { display: none; } .mesaj-float { padding: var(--bo-3); } }


/* ==== 18. YARDIMCI ===================================================== */
.sayfa-bas { padding-block: clamp(var(--bo-7), 6vw, var(--bo-8)) var(--bo-6); background: var(--renk-krem); border-bottom: 1px solid var(--renk-cizgi); position: relative; overflow: hidden; }
.sayfa-bas + .bolum { padding-top: var(--bo-7); }
.sayfa-bas + .guven-bant { border-top: 0; }
.sayfa-bas h1 { margin-bottom: var(--bo-3); }
.sayfa-bas .giris { max-width: 56ch; }

.gizli-gorsel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Kaydırma ile beliren içerik */
.goster { opacity: 0; transform: translateY(18px); transition: opacity var(--sure-yavas) var(--egri), transform var(--sure-yavas) var(--egri); }
.goster.gorunur { opacity: 1; transform: none; }

.serit { display: flex; gap: var(--bo-4); overflow-x: auto; padding-bottom: var(--bo-3); scroll-snap-type: x mandatory; }
.serit > * { flex: 0 0 min(280px, 78vw); scroll-snap-align: start; }

.cta-blok {
  background: var(--renk-bakir-sis); border: 1px solid var(--renk-cizgi-bakir);
  border-radius: var(--kose-lg); padding: clamp(var(--bo-6), 5vw, var(--bo-8));
  text-align: center; position: relative; overflow: hidden;
}
.cta-blok h2 { margin-bottom: var(--bo-3); }
.cta-blok .giris { max-width: 48ch; margin: 0 auto var(--bo-5); }

.liste-temiz { list-style: none; padding: 0; margin: 0; }
.tik-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--bo-3); }
.tik-liste li { display: flex; gap: var(--bo-3); font-size: var(--fs-kucuk); color: var(--renk-murekkep-2); }
.tik-liste svg { width: 18px; height: 18px; flex: none; color: var(--renk-adacayi-koyu); margin-top: 2px; }

/* ==== 19. RENK YOLLARI (Colorways) =====================================
   Her ürün bir renk yolu sınıfı taşır. SVG yer tutucu ve kart zemini
   rengini buradan miras alır. Gerçek fotoğrafa geçildiğinde bu sınıflar
   yalnızca kart zeminini boyamaya devam eder — hiçbir şey bozulmaz.
   ====================================================================== */
[class*="cw-"] { --c-tel: var(--renk-bakir-orta); }

.cw-pembe      { --c1: var(--renk-pembe);      --c2: var(--renk-inci);   --c3: var(--renk-altin);       --c4: var(--renk-adacayi);
                 --kart-1: var(--renk-pembe-sis);   --kart-2: var(--renk-krem); }
.cw-adacayi    { --c1: var(--renk-adacayi);    --c2: var(--renk-inci);   --c3: var(--renk-altin);       --c4: var(--renk-adacayi-koyu);
                 --kart-1: var(--renk-adacayi-sis); --kart-2: var(--renk-krem); }
.cw-krem       { --c1: var(--renk-inci);       --c2: var(--renk-krem);   --c3: var(--renk-altin);       --c4: var(--renk-adacayi);
                 --kart-1: var(--renk-krem);        --kart-2: var(--renk-kum); }
.cw-labradorit { --c1: var(--renk-labradorit); --c2: var(--renk-inci);   --c3: var(--renk-adacayi);     --c4: var(--renk-adacayi-koyu);
                 --kart-1: #EAEEF2;                 --kart-2: var(--renk-krem); }
.cw-ametist    { --c1: var(--renk-ametist);    --c2: var(--renk-inci);   --c3: var(--renk-altin);       --c4: var(--renk-adacayi);
                 --kart-1: #F1EBF4;                 --kart-2: var(--renk-krem); }
.cw-akik       { --c1: var(--renk-akik);       --c2: var(--renk-inci);   --c3: var(--renk-altin);       --c4: var(--renk-adacayi);
                 --kart-1: var(--renk-bakir-sis);   --kart-2: var(--renk-krem); }
.cw-altin      { --c1: var(--renk-altin);      --c2: var(--renk-inci);   --c3: var(--renk-bakir-orta);  --c4: var(--renk-adacayi);
                 --kart-1: var(--renk-altin-sis);   --kart-2: var(--renk-krem); }
.cw-inci       { --c1: var(--renk-inci);       --c2: #FFFFFF;            --c3: var(--renk-bakir-acik);  --c4: var(--renk-adacayi);
                 --kart-1: #FBF6F1;                 --kart-2: var(--renk-kum); }

/* ==== 20. CANLI VİTRİN (Shopier eşitlemesi) ============================ */
/* Gerçek ürün fotoğrafı kare alanı doldurur; SVG yer tutucuyla aynı hover. */
.urun-gorsel > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform var(--sure-yavas) var(--egri);
}
.urun-kart:hover .urun-gorsel > img { transform: scale(1.045) rotate(-1deg); }

/* --- Kart galerisi: yatay kaydırma + snap ----------------------------- */
.kaydirak {
  position: absolute; inset: 0;
  display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
}
.kaydirak::-webkit-scrollbar { display: none; }
.kaydirak img {
  flex: 0 0 100%; width: 100%; height: 100%;
  object-fit: cover; scroll-snap-align: center; scroll-snap-stop: always;
}

.kaydirak-noktalar {
  position: absolute; left: 0; right: 0; bottom: var(--bo-3); z-index: 2;
  display: flex; justify-content: center; gap: var(--bo-2);
  pointer-events: none;
}
.kaydirak-nokta {
  pointer-events: auto;
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: var(--kose-hap);
  background: var(--renk-ipek); opacity: .55; cursor: pointer;
  box-shadow: var(--golge-1);
  transition: opacity var(--sure) var(--egri), transform var(--sure) var(--egri);
}
.kaydirak-nokta[aria-current="true"] { opacity: 1; transform: scale(1.35); }

.kaydirak-ok {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  display: grid; place-items: center;
  width: 30px; height: 30px; padding: 0;
  border: 1px solid var(--renk-cizgi); border-radius: var(--kose-hap);
  background: var(--renk-ipek); color: var(--renk-murekkep);
  cursor: pointer; opacity: 0;
  transition: opacity var(--sure) var(--egri), color var(--sure) var(--egri);
}
.kaydirak-ok svg { width: 15px; height: 15px; }
.kaydirak-ok-onceki { left: var(--bo-2); }
.kaydirak-ok-sonraki { right: var(--bo-2); }
.urun-kart:hover .kaydirak-ok, .kaydirak-ok:focus-visible { opacity: .95; }
.kaydirak-ok:hover { color: var(--renk-bakir-koyu); }
/* Dokunmatikte hover yok — oklar gizli kalır, parmakla kaydırma zaten çalışır */
@media (hover: none) { .kaydirak-ok { display: none; } }

/* Ürünler yüklenirken görünen iskelet kartlar */
.urun-iskelet { pointer-events: none; }
.iskelet-parla {
  background: linear-gradient(100deg,
    var(--renk-krem) 35%, var(--renk-kum) 50%, var(--renk-krem) 65%);
  background-size: 200% 100%;
  animation: iskelet-parla var(--sure-iskelet) linear infinite;
}
@keyframes iskelet-parla { to { background-position: -200% 0; } }
.iskelet-satir { display: block; height: var(--bo-3); border-radius: var(--kose-xs); }
.iskelet-satir.iskelet-genis { height: var(--bo-5); width: 70%; }
.iskelet-satir.iskelet-kisa { width: 45%; }

/* Vitrin boş ya da yüklenemedi: bilgi kutusu ızgaranın tamamını kaplar */
.urun-izgara .vitrin-bos { grid-column: 1 / -1; justify-content: center; }

@media print {
  .ust, .duyuru, .mesaj-float, .footer { display: none; }
}