/* sc-css-marker: r2 (deploy tespiti icin — silinebilir)
   =============================================================================
   Sometimes Craft
   Tüm tasarım token'ları :root içinde. Renk/tip/boşluk buradan değişir.
   ========================================================================== */

:root {
  /* deri paleti */
  --chocolate: #3b2a1e;
  --taba:      #b07d4e;
  --black:     #1c1a18;
  --cream:     #cdbfa6;

  /* zemin & yüzeyler — hardgraft'ın taş grisi ailesi (#dadad2 birebir ölçüldü).
     Deri paleti (yukarıda) DEĞİŞMEDİ; değişen yalnız "kâğıt" zemin. */
  --paper:     #dadad2;   /* ana taş grisi zemin */
  --paper-2:   #d0d0c7;   /* alternatif bölüm zemini */
  --tile:      #c8c8bd;   /* ürün tile'ı */
  --line-rule: #b3b3a7;   /* ince ayraç çizgileri */

  /* mürekkep (metin) — hardgraft saf siyah kullanıyor; biz kıl payı sıcak bir
     siyaha gidiyoruz. Kontrast ölçüldü: ink 10.9-13.1:1, ink-soft en kötü
     durumda (tile üstünde) 4.91:1 → WCAG AA gövde eşiğinin üstünde. */
  --ink:       #14140f;
  --ink-soft:  #4f4f45;   /* ikincil metin: fiyat, renk sayısı, not */

  /* tipografi — SERIF ana, sans yalnız küçük UI.
     hardgraft'ın sistemi: mrs-eaves (serif) her yerde + Poppins yalnız 11-16px
     işlevsel metinlerde. Marka dokümanı da aynısını söylüyor: "2 font yeter:
     Serif (ana), Sans-serif (küçük metin)".
     Newsreader'ı Mrs Eaves'e daha yakın bir şeyle (EB Garamond / Libre
     Baskerville) değiştirmek istersen TEK satır: aşağıdaki --font-body. */
  --font-body: "Newsreader", Georgia, "Times New Roman", serif;
  --font-ui:   "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-em:   "Newsreader", Georgia, "Times New Roman", serif;

  /* boşluk ölçeği */
  --pad-x:   clamp(1.25rem, 6vw, 7rem);
  --section: clamp(5rem, 14vh, 11rem);   /* dikey bölüm boşluğu */
  --gap:     clamp(1.5rem, 4vw, 3rem);

  --maxw: 1180px;

  /* logo ölçüsü — tek yerden ayarla (width:auto, oran korunur)
     header : logo-wordmark.jpg — "craft" YOK, oran 4.583:1.
              26px kutu → el yazısı ~22.4px, yani eski görünümden %10 BÜYÜK.
     footer : logo.jpg — "craft" VAR, oran 3.393:1.
              28px kutu → eski 24px'e göre %15 BÜYÜK.
     ⚠ boyu değiştirirsen index.html'deki width/height değerlerini de güncelle
       (header 119x26, footer 95x28) — yoksa layout shift olur. */
  --logo-h: 26px;          /* header — wordmark (craft'sız) */
  --logo-h-footer: 28px;   /* footer — tam logo (craft'lı) */

  /* hareket */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --reveal-dur: .9s;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.02rem, 0.97rem + 0.3vw, 1.16rem);   /* serif optik olarak küçük okunur */
  line-height: 1.6;
  letter-spacing: normal;                                 /* serif pozitif tracking istemez */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3, p { margin: 0; }

/* görünür focus — her yerde */
:focus-visible {
  outline: 2px solid var(--chocolate);
  outline-offset: 4px;
}

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

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 50;
  background: var(--ink); color: var(--paper);
  padding: .7rem 1.1rem; text-decoration: none; font-size: .95rem;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ------------------------------------------------------------------ header */
.site-header {
  position: sticky; top: 0; z-index: 30;
  display: flex;                 /* logo SOLDA, sağ blok karşıda */
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem var(--pad-x);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-rule);
}
.brand {
  display: inline-flex; align-items: center;
  text-decoration: none;
}
.header-right {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}
/* dil degistirici — sessiz metin, aktif olan koyu ve alti cizili */
.lang {
  font-family: var(--font-ui);
  font-size: .8rem;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: baseline;
  gap: .3rem;
  color: var(--ink-soft);
}
.lang-btn {
  padding: 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  font: inherit;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.lang-btn:hover, .lang-btn:focus-visible { color: var(--ink); }
.lang-btn.is-on {
  color: var(--ink);
  border-bottom-color: var(--ink);
  cursor: default;
}
.lang-sep { color: var(--line-rule); }

/* Dil degistirici mobilde GIZLENMEZ — orada daha da gerekli. Yer sikisirsa
   once .header-tag ("marked series." / "all pieces") gider, dil kalir. */
@media (max-width: 380px) { .lang { font-size: .74rem; gap: .22rem; } }

.header-tag {
  font-family: var(--font-ui);
  color: var(--ink-soft);
  font-size: .8rem;
  letter-spacing: 0.04em;
}
@media (max-width: 540px) { .header-tag { display: none; } }
/* header'daki sessiz "search" baglantisi — dil dugmesiyle ayni dilde */
.header-search {
  font-family: var(--font-ui);
  font-size: .8rem;
  letter-spacing: 0.04em;
  padding: 0;
  border: 0; border-bottom: 1px solid transparent;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.header-search:hover, .header-search:focus-visible,
.header-search[aria-expanded="true"] { color: var(--ink); border-bottom-color: var(--ink); }

/* arama satiri — kutu degil, tek cizgi */
.section-search {
  max-width: var(--maxw);
  margin: 0 auto clamp(1.5rem, 4vw, 2.5rem);
  display: flex; align-items: center; gap: .75rem;
  border-bottom: 1px solid var(--line-rule);
  padding-bottom: .5rem;
}
.section-search[hidden] { display: none; }
.search-input {
  flex: 1 1 auto;
  border: 0; background: transparent;
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 1rem + .8vw, 1.6rem);
  color: var(--ink);
  padding: .2rem 0;
}
.search-input:focus { outline: none; }
.search-input::placeholder { color: var(--ink-soft); opacity: .7; }
/* tarayicinin kendi temizleme carpisini gizle — kendi butonumuz var */
.search-input::-webkit-search-cancel-button { display: none; }
.search-close {
  border: 0; background: transparent; cursor: pointer;
  color: var(--ink-soft); font-size: 1.4rem; line-height: 1; padding: 0 .2rem;
}
.search-close:hover, .search-close:focus-visible { color: var(--ink); }

.search-status {
  max-width: var(--maxw);
  margin: 0 auto clamp(1.5rem, 4vw, 2.5rem);
  font-family: var(--font-ui);
  font-size: .85rem;
  color: var(--ink-soft);
}
.search-status[hidden] { display: none; }

.header-back {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.header-back:hover, .header-back:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--ink-soft);
}

/* sepet düğmesi (header) */
/* Sepet: ikon DEĞİL, metin — hardgraft'taki "Cart: 0" gibi. Rozet artık
   sayının kendisi, o yüzden sıfırken de görünür (gizlenmez). */
.cart-toggle {
  display: inline-flex;
  align-items: baseline;
  gap: .3rem;
  padding: 0;
  font-family: var(--font-ui);
  font-size: .8rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: transparent;
  border: 0;
  cursor: pointer;
  line-height: 1;
}
.cart-toggle:hover, .cart-toggle:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.cart-badge {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}
.cart-badge.pulse { animation: cart-pop .4s var(--ease); }
@keyframes cart-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* logo — ŞEFFAF zeminli PNG (assets/logo.png + logo-wordmark.png).
   Eskiden JPEG + mix-blend-mode:multiply kullanılıyordu; JPEG'in beyazı tam #fff
   olmadığı için header'da soluk bir kutu kalıyordu. Şeffaf alpha ile blend'e
   gerek yok, logo her zeminde temiz oturuyor. (logo.jpg duruyor: Shopier kapak
   görseli ve favicon fallback'i onu kullanıyor — Shopier raster istiyor.) */
.logo {
  height: var(--logo-h);
  width: auto;
  display: block;
}
.logo--footer {
  height: var(--logo-h-footer);
  filter: invert(1);          /* koyu footer: siyah çizgi → beyaz; alpha korunur */
}

/* fallback wordmark — logo yüklenmezse (kırık görsel yerine metin) */
.wordmark {
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.04em;
  font-size: 1rem;
}

/* ------------------------------------------------------------------ EN/TR satır sistemi */
.line { display: block; }
.line .en {
  display: block;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.12;
  font-size: clamp(1.6rem, 1.1rem + 2.4vw, 3rem);
}
.line--hero .en { font-size: clamp(2.4rem, 1.4rem + 5vw, 5rem); font-weight: 400; }
.line--big  .en { font-size: clamp(2rem, 1.2rem + 4vw, 4.2rem); font-weight: 400; }
.line--sub  .en { font-size: clamp(1.1rem, 1rem + 1vw, 1.6rem); font-weight: 400; }

/* editorial italik serif — yalnızca bir-iki vurgu */
/* Gövde artık serif olduğu için .em yalnız italiğe düşüyor (aynı aile). */
.em, .manifesto-end {
  font-family: var(--font-em);
  font-style: italic;
}

/* ------------------------------------------------------------------ CTA / butonlar */
/* CTA: kutu YOK. Keskin köşeli 1px çerçeve + sans yazı, sayfanın geri kalanı
   serif olduğu için jenerik arayüz butonu gibi duruyordu. Artık serif ve tek
   bir mürekkep çizgisi — editoryal, el yapımı hissine yakın. */
.cta {
  font-family: var(--font-body);
  display: inline-block;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  padding: 0 0 .3rem;
  text-decoration: none;
  font-size: clamp(1.05rem, 1rem + .3vw, 1.3rem);
  letter-spacing: normal;
  color: var(--ink);
  border: 0;
  border-bottom: 1px solid var(--ink);
  background: transparent;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.cta:hover, .cta:focus-visible {
  color: var(--ink-soft);
  border-bottom-color: var(--ink-soft);
}

/* ------------------------------------------------------------------ bölüm iskeleti */
main > section {
  padding-block: var(--section);
  padding-inline: var(--pad-x);
  border-bottom: 1px solid var(--line-rule);
}
main > section:last-child { border-bottom: 0; }

/* ------------------------------------------------------------------ hero */
.hero {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  min-height: 82vh;
}
/* Hero gorseli artik DIKEY ve urune sikica kirpik (seffaf PNG). Dikey bir
   gorselde max-width yanlis olcu: genisligi sinirlasan bile boy 1.9 katina
   cikiyor. Dogru sinir yukseklik — ekrana gore olceklensin. */
.hero-media img {
  width: auto;
  max-width: 100%;
  max-height: 58vh;
  margin-inline: auto;
}
.hero-text { max-width: 32ch; }
.line--sub { margin-top: 1.1rem; }

@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; text-align: left; min-height: auto; }
  .hero-media { order: -1; }
}

/* ------------------------------------------------------------------ band (deri yüzeyi) */
.band--texture {
  background-color: var(--tile);
  background-image: url("../assets/texture.svg");
  background-size: 220px 220px;
  background-repeat: repeat;
}
.band-text { max-width: var(--maxw); margin-inline: auto; }

/* ------------------------------------------------------------------ ürünler */
.products { background: var(--paper); }
.section-head { max-width: var(--maxw); margin: 0 auto clamp(2.5rem, 6vw, 4rem); }
.section-title .en { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.6rem); font-weight: 400; }
/* hardgraft'taki "Card Cases 8" gibi — başlığın yanında sessiz adet */
.section-count {
  margin-left: .6rem;
  color: var(--ink-soft);
  font-size: clamp(.85rem, .8rem + .4vw, 1.05rem);
  font-variant-numeric: tabular-nums;
}

/* Grid: sütun arası dar, satır arası GENİŞ — görsel dominant, sayfa nefes alır. */
.product-grid {
  max-width: var(--maxw);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(1.25rem, 2.5vw, 2.25rem);
  row-gap: clamp(3rem, 6vw, 5rem);
}
@media (max-width: 880px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .product-grid { grid-template-columns: 1fr; } }

.product { display: flex; flex-direction: column; }
/* Kart linkleri: gorsel ve ad detay sayfasina goturur. Link olduklari
   belli olmasin diye alt cizgi/renk yok; ad hover'da yumusuyor. */
.product-link { display: block; text-decoration: none; color: inherit; }
.product-name-link {
  text-decoration: none;
  color: inherit;
  transition: color .3s var(--ease);
}
.product:hover .product-name-link,
.product-name-link:focus-visible { color: var(--ink-soft); }

/* Medya: kare, ÇERÇEVESİZ — kartı görsel taşır (hardgraft dili). */
.product-media {
  position: relative;
  /* Gorsellerin fonu marka zeminine (#dadad2) oturtuldu; kutunun zemini de
     AYNI olmali, yoksa gorselin kenari cizgi gibi belli olur. */
  background: var(--paper);
  aspect-ratio: 1 / 1;
  display: grid; place-items: center;
  overflow: hidden;
}
/* gerçek foto → hücreyi doldurur */
.product-media img { width: 100%; height: 100%; object-fit: cover; }
/* çizgi-SVG silüet → doldurmaz; nefes alır ve zemine kaynar.
   (main.js .svg uzantılı görsele .is-sketch verir; gerçek foto gelince kalkar) */
.product-media.is-sketch img {
  width: 72%; height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* Hover fısıltısı: foto hafif saydamlaşır, üstünde kısa bir cümle belirir.
   YALNIZ gerçek imleçli cihazlarda (aşağıdaki @media) — dokunmatikte "hover"
   takılı kalıp yazıyı ekranda bırakmasın. */
.product-whisper {
  position: absolute;
  left: 8%; right: 8%;
  top: 50%; transform: translateY(-50%);
  text-align: center;
  color: var(--ink);
  font-size: .95rem;
  line-height: 1.35;
  letter-spacing: 0.01em;
  opacity: 0;
  pointer-events: none;          /* yazı tıklamayı yakalamasın */
  transition: opacity .35s var(--ease);
}

/* 100'üncü hover — nadir olduğu için editorial italik serif hak ediyor */
.product.is-egg .product-whisper {
  font-family: var(--font-em);
  font-style: italic;
  font-size: 1.08rem;
}

@media (hover: hover) and (pointer: fine) {
  .product-media img { transition: opacity .35s var(--ease); }
  .product:hover .product-media img,
  .product:focus-within .product-media img { opacity: .28; }
  .product:hover .product-whisper,
  .product:focus-within .product-whisper { opacity: 1; }
}

/* "new" etiketi — köşede, sessiz */
.product-tag {
  font-family: var(--font-ui);
  position: absolute; top: .7rem; left: .7rem;
  padding: .18rem .5rem;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  color: var(--ink);
  font-size: .7rem; letter-spacing: 0.08em;
}

/* Bilgi bloğu: ortalı ve az — "ad . renk" / fiyat / renk sayısı. */
.product-info { padding-top: 1.1rem; text-align: center; }
.product-name { font-weight: 400; font-size: 1.1rem; letter-spacing: normal; }
.product-color { font-weight: 400; }   /* "ad . renk" aynı ağırlıkta devam eder */
.product-price {
  font-family: var(--font-ui);
  margin-top: .3rem;
  color: var(--ink-soft); font-size: .95rem;
  font-variant-numeric: tabular-nums;
}
.product-colors {
  font-family: var(--font-ui);
  margin-top: .25rem;
  color: var(--ink-soft); font-size: .78rem; letter-spacing: 0.04em;
}
/* marka iç sesi — sessiz kalır, ürünü bastırmaz */
.product-note {
  margin-top: .7rem;
  color: var(--ink-soft); font-size: .85rem;
}

/* Siparişe ekle: kutu DEĞİL, sessiz metin eylemi — grid'i görsele bırakır. */
.buy {
  margin-top: .9rem;
  align-self: center;
  padding: .1rem 0;
  border: 0; border-bottom: 1px solid var(--line-rule);
  background: transparent;
  font-family: var(--font-ui); font-size: .85rem; letter-spacing: 0.04em;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.buy:hover, .buy:focus-visible { color: var(--ink); border-bottom-color: var(--ink); }

/* Fiyati olmayan urun: buton degil <span>. Tiklanabilir gorunmemeli —
   alt cizgi yok, imlec degismez, sepete eklenemez. */
.buy.is-passive {
  display: inline-block;
  border-bottom-color: transparent;
  color: var(--ink-soft);
  cursor: default;
  opacity: .7;
  letter-spacing: 0.06em;
}

.price-note {
  font-family: var(--font-ui);
  max-width: var(--maxw);
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  color: var(--ink-soft);
  font-size: .85rem;
  text-align: center;
}

/* ------------------------------------------------------------------ ürün detay
   Grid'de kucuk ve sessiz; burada BUYUK. hardgraft'in urun sayfasindaki his:
   gorsel kadraji doldurur, altinda az sayida satir, bol bosluk. */
.piece {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(3rem, 10vh, 7rem) var(--pad-x) var(--section);
  min-height: 70vh;
}
@media (max-width: 860px) {
  .piece { grid-template-columns: 1fr; text-align: left; }
}

.piece-media {
  position: relative;
  background: var(--paper);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.piece-media img {
  width: 100%; height: 100%; object-fit: cover;
}
/* Buyutec katmani: ana gorselin uzerinde durur, normalde saydam.
   Yakinlastirma transform ile DEGIL, background-size + background-position ile
   yapiliyor (bkz. product.js installZoom — gerekcesi orada yazili). */
.piece-zoom-layer {
  position: absolute; inset: 0;
  background-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s var(--ease);
}
.piece-media.is-zoom .piece-zoom-layer { opacity: 1; }

/* galeri: ana gorselin altinda kucuk resim seridi */
.piece-thumbs {
  display: flex; gap: .6rem; flex-wrap: wrap;
  margin-top: .6rem;
}
.piece-thumb {
  width: 72px; height: 72px;
  padding: 0; border: 1px solid transparent; background: var(--paper);
  cursor: pointer; overflow: hidden; line-height: 0;
  opacity: .62;
  transition: opacity .3s var(--ease), border-color .3s var(--ease);
}
.piece-thumb img { width: 100%; height: 100%; object-fit: cover; }
.piece-thumb:hover, .piece-thumb:focus-visible { opacity: 1; }
.piece-thumb.is-on { opacity: 1; border-color: var(--ink); cursor: default; }

/* imlec: buyutec oldugu belli olsun */
@media (hover: hover) and (pointer: fine) { .piece-media { cursor: zoom-in; } }
@media (hover: none) { .piece-media { cursor: pointer; } }

/* "yakindan bak" ipucu — kose altta, sessiz; yakinlastirinca kaybolur */
.piece-zoom-hint {
  position: absolute; left: .7rem; bottom: .7rem;
  padding: .18rem .5rem;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  color: var(--ink-soft);
  font-family: var(--font-ui);
  font-size: .7rem; letter-spacing: 0.06em;
  pointer-events: none;
  transition: opacity .3s var(--ease);
}
.piece-media.is-zoom .piece-zoom-hint { opacity: 0; }

.piece-info { max-width: 38ch; }
.piece-name {
  font-weight: 400;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: normal;
}
.piece-note {
  margin-top: 1rem;
  color: var(--ink-soft);
  font-size: clamp(1.02rem, .98rem + .3vw, 1.2rem);
}
.piece-price {
  font-family: var(--font-ui);
  margin-top: 1.4rem;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.piece-colors {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .5rem .7rem;
  margin-top: 1rem;
  font-family: var(--font-ui);
  font-size: .82rem;
  color: var(--ink-soft);
}
.piece-colors-key { letter-spacing: 0.04em; }
.piece-swatches { display: inline-flex; gap: .4rem; }
/* Renk noktalari yalnizca BILGI — secim degil. Siparis {id, qty} tasiyor;
   renk secimi eklenecekse hem sepet hem sunucu katalogu degismeli. */
.piece-swatch {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--swatch);
  border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
  display: inline-block;
}

.buy--piece {
  margin-top: 1.8rem;
  align-self: start;
  font-size: .95rem;
}

.piece-meta {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: 1.2rem;
  border-top: 1px solid var(--line-rule);
  font-family: var(--font-ui);
  font-size: .82rem;
  color: var(--ink-soft);
  line-height: 1.7;
}

.piece-missing {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(5rem, 18vh, 10rem) var(--pad-x);
}

/* ------------------------------------------------------------------ statement / trust */
.statement { background: var(--paper-2); }
.statement, .trust { text-align: left; }
.statement .line--sub, .trust .line { max-width: var(--maxw); margin-inline: auto; }
.statement .section-head { margin: 0; }
.statement > .line, .trust > .line { max-width: var(--maxw); margin-inline: auto; }

/* ------------------------------------------------------------------ süreç */
.process { background: var(--paper); }
.process-tiles {
  max-width: var(--maxw);
  margin: 0 auto clamp(2rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
}
.process-tiles .tile {
  aspect-ratio: 1 / 1;
  background-color: var(--tile);
  overflow: hidden;
  display: block;
}
.process-tiles .tile img { width: 100%; height: 100%; object-fit: cover; }
.process > .line { max-width: var(--maxw); margin-inline: auto; }
@media (max-width: 720px) { .process-tiles { grid-template-columns: repeat(2, 1fr); } }

/* ------------------------------------------------------------------ manifesto */
.manifesto { background: var(--paper-2); }
.manifesto-body {
  max-width: 34ch;
  margin-inline: auto;
  text-align: center;
}
.manifesto-body p {
  margin-block: clamp(1.2rem, 3vw, 1.8rem);
  line-height: 1.7;
  color: var(--ink);
}
.manifesto-end {
  font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem);
  margin-top: clamp(2.5rem, 6vw, 4rem) !important;
  color: var(--chocolate);
}

/* ------------------------------------------------------------------ closing */
.closing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  background: var(--paper);
}
.closing-media img { width: 100%; max-width: 520px; }
@media (max-width: 820px) {
  .closing { grid-template-columns: 1fr; }
  .closing-media { order: -1; }
}

/* ------------------------------------------------------------------ footer */
.site-footer {
  padding: clamp(3rem, 8vw, 5rem) var(--pad-x);
  display: flex; flex-wrap: wrap; gap: .5rem 2rem;
  align-items: baseline; justify-content: space-between;
  background: var(--ink);
  color: var(--paper);
}
.footer-mark { font-weight: 500; letter-spacing: 0.04em; }
.footer-note { font-family: var(--font-ui); color: color-mix(in srgb, var(--paper) 65%, transparent); font-size: .85rem; }

/* iletişim + sosyal — sessiz metin linkleri, altı çizgisi hover'da belirir */
.footer-links {
  font-family: var(--font-ui);
  font-size: .85rem;
  display: flex; flex-wrap: wrap; gap: .35rem 1.25rem;
}
.footer-links a {
  color: color-mix(in srgb, var(--paper) 65%, transparent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.footer-links a:hover, .footer-links a:focus-visible {
  color: var(--paper);
  border-bottom-color: color-mix(in srgb, var(--paper) 45%, transparent);
}

/* footer'daki yasal belge linkleri */
.footer-docs {
  font-family: var(--font-ui);
  font-size: .78rem;
  display: flex; flex-wrap: wrap; gap: .3rem 1.1rem;
  flex-basis: 100%;
  margin-top: .8rem;
}
.footer-docs a {
  color: color-mix(in srgb, var(--paper) 55%, transparent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.footer-docs a:hover, .footer-docs a:focus-visible {
  color: var(--paper);
  border-bottom-color: color-mix(in srgb, var(--paper) 40%, transparent);
}

/* ------------------------------------------------------------------ yasal metin sayfasi */
.doc {
  max-width: 62ch;
  margin-inline: auto;
  padding: clamp(3rem, 9vh, 6rem) var(--pad-x) var(--section);
}
.doc-title {
  font-weight: 400;
  font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem);
  line-height: 1.1;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
.doc-block { margin-bottom: clamp(1.8rem, 4vw, 2.6rem); }
.doc-block h2 {
  font-family: var(--font-ui);
  font-size: .8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: .6rem;
}
.doc-block p { margin-bottom: .7rem; line-height: 1.7; }
.doc-seller { color: var(--ink-soft); }
/* hazir olmayan belge */
.doc-soon {
  font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem);
  color: var(--ink-soft);
  margin-bottom: 1rem;
}
.doc-soon-contact { font-family: var(--font-ui); font-size: .9rem; color: var(--ink-soft); }
.doc-soon-contact a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-rule); }
.doc-soon-tag {
  font-family: var(--font-ui);
  font-size: .7rem; letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-left: .5rem;
}

.doc-list { list-style: none; padding: 0; }
.doc-list li { margin-bottom: .8rem; font-size: 1.15rem; }
.doc-list a, .doc-back a {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid var(--line-rule);
  transition: border-color .3s var(--ease);
}
.doc-list a:hover, .doc-back a:hover,
.doc-list a:focus-visible, .doc-back a:focus-visible { border-bottom-color: var(--ink); }
.doc-back {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: 1.2rem;
  border-top: 1px solid var(--line-rule);
  font-family: var(--font-ui); font-size: .85rem;
}

/* telif — en sessiz satir, footer'in altinda */
.footer-legal {
  font-family: var(--font-ui);
  font-size: .78rem;
  color: color-mix(in srgb, var(--paper) 45%, transparent);
  flex-basis: 100%;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}


/* ------------------------------------------------------------------ scroll-reveal
   hardgraft'ın AOS ("animate on scroll") sistemi ölçülerek alındı. Fark şurada:
   BÖLÜMÜ blok halinde açmıyoruz, ELEMANLARI tek tek ve küçük hareketle açıyoruz.
   Ölçülen orijinal değerler:
     görsel : opacity .001 + scale(1.05) → none,  0.5s
     metin  : opacity .001 + translateY(15px) → none, 1s
   Kademe (stagger) data-reveal-step ile; hardgraft 50ms adım kullanıyor,
   biz 80ms — bizde eleman sayısı az, biraz daha belirgin olsun.

   opacity .001 (0 değil): bazı tarayıcılar tam 0'da katmanı atıp geçişi
   tekletiyor — hardgraft da .001 kullanıyor, aynısını yapıyoruz. */
[data-reveal] {
  opacity: .001;
  will-change: opacity, transform;
}
[data-reveal="text"] {
  transform: translateY(15px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
[data-reveal="img"] {
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
/* scale yalnız masaüstünde — dar ekranda kırpılma/kayma yapmasın (hardgraft da öyle) */
@media (min-width: 750px) {
  [data-reveal="img"] { transform: scale(1.05); }
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* kademeli açılma — aynı bölümdeki elemanlar sırayla */
[data-reveal-step="1"] { transition-delay: .08s; }
[data-reveal-step="2"] { transition-delay: .16s; }
[data-reveal-step="3"] { transition-delay: .24s; }
[data-reveal-step="4"] { transition-delay: .32s; }
[data-reveal-step="5"] { transition-delay: .40s; }

/* ------------------------------------------------------------------ sepet drawer */
.cart-overlay {
  position: fixed; inset: 0; z-index: 40;
  background: color-mix(in srgb, var(--ink) 38%, transparent);
  backdrop-filter: blur(2px);
}

.cart-drawer {
  position: fixed; top: 0; right: 0; z-index: 45;
  width: min(400px, 92vw);
  height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--paper);
  border-left: 1px solid var(--line-rule);
  box-shadow: -18px 0 50px -30px color-mix(in srgb, var(--ink) 60%, transparent);
  transform: translateX(100%);
  transition: transform .5s var(--ease);
}
.cart-drawer.is-open { transform: translateX(0); }

/* Drawer işlevsel bir yüzey → sans. Başlık ve ürün adı serif kalır. */
.cart-drawer { font-family: var(--font-ui); }
.cart-title, .cart-line-name { font-family: var(--font-body); }

.cart-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem 1.5rem 1.1rem;
  border-bottom: 1px solid var(--line-rule);
}
.cart-title { font-size: 1.1rem; font-weight: 500; letter-spacing: 0.01em; }
.cart-close {
  background: transparent; border: 0; cursor: pointer;
  color: var(--ink-soft); font-size: 1.5rem; line-height: 1; padding: .2rem .3rem;
}
.cart-close:hover, .cart-close:focus-visible { color: var(--ink); }

.cart-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1rem 1.5rem;
}
.cart-empty {
  padding: 2.5rem 0;
  color: var(--ink-soft);
}

.cart-line {
  padding: 1rem 0;
  border-bottom: 1px solid var(--line-rule);
}
.cart-line-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
}
.cart-line-name { font-weight: 500; }
.cart-line-price { color: var(--ink-soft); font-size: .9rem; white-space: nowrap; }

.cart-qty {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: .7rem;
}
.qbtn, .cart-remove {
  width: 30px; height: 30px;
  display: inline-grid; place-items: center;
  background: transparent;
  border: 1px solid var(--line-rule);
  color: var(--ink);
  cursor: pointer;
  font-size: 1rem; line-height: 1;
}
.qbtn:hover, .qbtn:focus-visible { border-color: var(--ink); }
.qval { min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; }
.cart-remove {
  margin-left: .5rem;
  border-color: transparent;
  color: var(--ink-soft);
  font-size: 1.2rem;
}
.cart-remove:hover, .cart-remove:focus-visible { color: var(--ink); border-color: var(--line-rule); }

.cart-foot {
  border-top: 1px solid var(--line-rule);
  padding: 1.2rem 1.5rem calc(1.2rem + env(safe-area-inset-bottom));
}
.cart-foot:empty { display: none; }
.cart-subtotal {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 1rem;
}
.cart-subtotal-key { text-transform: lowercase; }
.cart-subtotal-val { font-weight: 500; }

.cart-checkout {
  width: 100%;
  display: block;
  padding: .9rem 1rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  transition: background var(--reveal-dur) var(--ease), color var(--reveal-dur) var(--ease);
}
.cart-checkout { font-size: .98rem; letter-spacing: 0.03em; }
.cart-checkout:hover, .cart-checkout:focus-visible {
  background: transparent; color: var(--ink);
}
.cart-checkout:disabled { opacity: .55; cursor: default; pointer-events: none; }

/* adet tavanina gelindiginde cikan not — hata degil, davet */
.cart-cap {
  margin-bottom: .8rem;
  padding: .6rem .7rem;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  color: var(--ink-soft);
  font-size: .8rem;
  line-height: 1.5;
}
.cart-cap a { color: var(--ink); }

.cart-note {
  margin-top: .8rem;
  color: var(--ink-soft);
  font-size: .78rem;
}

.cart-error {
  margin-top: .9rem;
  color: var(--chocolate);
  font-size: .85rem;
}

/* ------------------------------------------------------------------ ödeme ara adımı */
.pay-interstitial {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  padding: var(--pad-x);
  text-align: center;
  background: var(--paper);
  opacity: 0;
  pointer-events: none;            /* aktif DEĞİLken tıklamayı yakalama */
  transition: opacity .4s var(--ease);
}
.pay-interstitial.is-on { opacity: 1; pointer-events: auto; }

/* hidden özniteliği display:grid'i EZMESİN — kapalıyken katman hiç var olmasın.
   (asıl bug buydu: hidden opacity:0 ile görünmez yapıyordu ama fixed+inset:0
   katman tüm tıklamaları yutuyordu.) */
.pay-interstitial[hidden] { display: none !important; }


/* hareket azaltma — her şey anında, geçiş yok, smooth scroll kapalı */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .cta, .buy, .cart-checkout { transition: none !important; }
  .product-whisper, .product-media img { transition: none !important; }
  .piece-media img { transition: none !important; }
  .cart-drawer { transition: none !important; }
  .pay-interstitial { transition: none !important; }
  .cart-badge.pulse { animation: none !important; }
}