/* ============================================
   GRAPHITE POST: css/pages/index.css  ("Katalog")
   ============================================
   Yalnız ana sayfa. Ortak şeyler (token, düğme, bağlantı, header, footer,
   plate, faq, calendar) css/styles.css'te. Kural: TASARIM_DILI.md.

   Sayfa sırası: hero (ay'ın baskısı + ay'ın kartı: ay çizimi ve geyik kartı) → masa
   fotoğrafları (.desk: bu ayın koleksiyonu, hero'nun hemen ardından; kendi not satırı;
   telefonda 2, masaüstünde 3, doğal oranda) → geçmiş sayılar (#editions, geçmiş baskılar
   aynı ölçekte, en yeni başta, yalnız ad + ay) → sanatçı (#artist) → süreç fotoğrafları
   (#process, elin kanıtı: Horse'un üç aşaması, tek küçük satır, mektubun ardından) →
   seçenekler (#pricing, güvence yanında; telefonda bir fotoğraf: güvenceden önce kapalı
   zarf) → SSS (#faq, iki sütun) → kapanış (fotoğraf + düğme; telefonda alt alta, geniş
   ekranda hero'nun eksenini yansıtır).

   Telefonda fotoğrafsız en uzun dikey aralık ≤ 1,5 ekran (1266px, 390x844)
   olmalı; bölüm başı boşluklarını artırırsan yeniden ölç.

   Bölüm id'leri DEĞİŞMEZ: main.js, bağlantı kaynağı etiketini (?src=home-…)
   en yakın id'den üretir.

   Her bölümün KENDİ kompozisyonu var; ortak "iki sütun" iskeleti yok. İki
   sütun yalnız iki şey gerçekten yan yana duruyorsa: hero (çizim + satın alma
   bilgisi), seçenekler (abonelik + güvencesi), sanatçı (mektup + portre), kapanış
   (fotoğraf + düğme). Sağ sütun hepsinde aynı eksende (--cols). Bölümler
   arası çizgi YOK: aralarını boşluk ayırır, boşluklar içeriğe göre değişir.
   Fotoğraflar kırpılmaz (object-fit yok): her kutu resmin kendi oranında.
   ============================================ */

.home main {
  position: relative;
  overflow-x: clip;
}

/* --------------------------------------------------------------------------
   1. Hero: önce çizim (masaüstü), telefonda önce ne satıldığı + eylem
   -------------------------------------------------------------------------- */
.hero {
  padding: var(--s6) 0 0;       /* alt boşluğu sıradaki bölüm koyar (içeriğe göre değişir) */
  border-top: 0;
}

.hero__content {
  display: grid;
  grid-template-columns: var(--cols);
  column-gap: var(--col-gap);
  align-items: start;
}

.hero__plate {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  /* ÇİZİM KUTUSUNUN GENİŞLİĞİ (--sheet-w) ve geyik kartının yeri tek değerden gelir.
     Kart, ay çiziminin alt sağ köşesine konur ve sağ kenardan TAŞAR (kağıdın o köşesi
     boş: ay'ın dış kenarı ≈ %75,5'te, kart %79'dan başlar). Taşan pay (çizim genişliğinin
     %25'i) sütuna sığsın diye çizim, sütunun (genişlik + boşluğun %35'i) / 1,25'i kadar:
     yani kartın sağ kenarı sütunun sağ kenarını boşluğa en çok %35 geçer. Yüzdeler
     kullanım yerinde çözülür (genişlik, sol, üst boşluk: hepsi figürün genişliği). */
  --cap: calc((100% + var(--col-gap) * 0.35) / 1.25);
  --sheet-w: var(--cap);
}

.hero__plate .plate__sheet {
  width: var(--sheet-w);
}

/* GEYİK KARTI: setin ikinci gerçek parçası. Düz bir görüntü (moon-deer-fawn-card-v1:
   IMG_8524'ten, kartın dört köşesine göre düzleştirilmiş, beyazı çizimin kâğıdına
   eşitlenmiş), çizimin alt sağ köşesine konmuş. Gerçek bir kartın köşeleri yuvarlak
   (yarıçap kart genişliğinin %5'i, ölçüldü) ve masada yatan bir kâğıdın gölgesi var; bu
   ikisi nesnenin kendisinden gelir, süs değil. Çizimin üstüne yalnız boş kâğıt gelir
   (kartın sol üst köşesi ay'ın dış kenarından ≈ %3,5 uzakta). Çizimin ölçüsüne oranlı:
   genişlik %46, sol %79, üst %75 (çizimin yüksekliğinin: 0,75 / 0,7059 = 1,0625 genişlik),
   yani her ekranda aynı yerde. Hafif eğim (-1°) kartın fotoğraftaki doğal duruşu gibi.
   Bağlantı değil, büyüteç yok: fare altından geçsin diye pointer-events kapalı. */
.hero__fawn {
  position: absolute;
  z-index: 1;
  top: 0;
  left: calc(var(--sheet-w) * 0.79);
  width: calc(var(--sheet-w) * 0.46);
  margin-top: calc(var(--sheet-w) * 1.0625);
  transform: rotate(-1deg);
  pointer-events: none;
}

.hero__fawn img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 5% / 5.43%;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.12), 0 8px 20px rgb(0 0 0 / 0.10);
}

/* Kart çizimin altından ≈ %7 (çizim genişliğinin) sarkar: künye satırı ve "Look closer"
   o kadar aşağıdan başlar (kartın altına kalmasın). Çift (çizim + kart) çizimin 1,25 katı
   genişliğinde: künye o genişlikte, "Look closer" kartın sağ kenarına hizalı (sağ: çizim
   genişliğinin %25'i dışarıda). */
.hero__plate .plate__caption {
  margin-top: calc(var(--sheet-w) * 0.07 + 12px);
  max-width: calc(var(--sheet-w) * 1.25);
}

.hero__plate .originals__loupe-btn {
  top: calc(104.9% + 12px);   /* çizim yüksekliğinin %4,9'u = kartın sarkması */
  right: -25%;
}

/* düğme çizimin ALTINDA ve kartın sağ kenarında durur; ortak kural camı altta 56px'te,
   sağda 2px'te kırpar. Düğme kartın sarkması kadar aşağı indiği ve çizimin sağına taştığı
   için pay büyür. */
.hero__plate .plate__sheet {
  clip-path: inset(-2px -26% -96px -2px);
}

/* ≥ 900px: çizimin altındaki künye ve "Look closer" ilk ekranın kıvrımının üstünde
   kalsın. Çizim kutusunun yüksekliği = 100svh − K: header 73 + hero üst boşluğu 32 +
   künye satırı ve düğme (çizimin altında ≈ 48px: künye 12 boşluk + 2 satır, düğme
   10 − 6 + 44) + kartın sarkması (≈ 25px) + 12px nefes = 190. Yalnız ÖLÇEK: kırpma yok,
   filtre yok. Alt sınır üst sınırın %94'ü (en çok ≈ %6 küçülür). 0,7059 = çizimin en-boy
   oranı (yüzde taşınan --sheet-w'da satır içi --ar okunamaz). */
@media (min-width: 900px) {
  .hero__plate {
    --sheet-w: min(var(--cap), max(calc(var(--cap) * 0.94), calc((100svh - 190px) * 0.7059)));
  }
}

.hero__text {
  grid-column: 2;
  grid-row: 1;
  padding-top: var(--s2);
  max-width: 38rem;
}

.hero__title {
  margin: 0;
  font-size: clamp(2.25rem, 1.7rem + 2.2vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.012em;
}

.hero__title-sub {
  display: block;
  margin-top: 8px;
  font-size: var(--fs-lede);
  font-style: normal;          /* italik yalnız eser adı için; alt başlık dik */
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--ink-2);
}

/* ne satıldığı: sitenin kendi cümlesi (meta açıklamasından) */
.hero__lede {
  margin: var(--s4) 0 0;
  max-width: 28ch;
  font-size: var(--fs-lede);
  line-height: 1.4;
  color: var(--ink);
}

/* takvim paragrafının altında (ilk ekrandan çıktı; metin aynı) */
.hero__subtitle {
  margin: var(--s4) 0 0;
  max-width: 36ch;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--ink-2);
}

.hero__offer {
  margin-top: var(--s5);
}

.hero__card-pricing {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.3;
}

.hero__card-items {
  margin: var(--s2) 0 0;
  padding: 0;
}

.hero__card-items li {
  padding: 2px 0;
  font-size: var(--fs-body);
  line-height: 1.5;
}

.hero__card-founding {
  margin: var(--s3) 0 0;
  font-size: var(--fs-note);
  line-height: 1.5;
  color: var(--ink-2);
}

.hero__actions {
  margin-top: var(--s5);
}

.hero__cta {
  padding: 14px 36px;
  font-size: 1.0625rem;
}

/* düğmenin hemen altında: iptal ve iade (sitenin kendi cümleleri) */
.hero__assure {
  margin: var(--s3) 0 0;
  max-width: 34rem;
  font-size: var(--fs-note);
  line-height: 1.5;
  color: var(--ink);
}

.hero__actions .hero__card-note {
  margin: var(--s2) 0 0;
  max-width: 34rem;
  font-size: var(--fs-note);
  line-height: 1.55;
  color: var(--ink-2);
  text-align: left;
}

/* ortak .calendar'ın üst çizgisi burada gereksiz: aralarını boşluk ayırır */
.hero__calendar {
  margin-top: var(--s5);
  padding-top: 0;
  border-top: 0;
}

/* rakam aralığı ("5 to 10") ortadan bölünmesin (gift.html ile aynı) */
.nb {
  white-space: nowrap;
}

/* hero'nun hemen ardından (HTML'de ayrı <section class="desk">; kap sınıfı
   .hero__desk-strip CLAUDE.md'deki ad olarak kalıyor): bu ayın koleksiyonunun fotoğrafları,
   ayın hikâyesi başka bir şeyle kesilmesin. Üstündeki boşluk hero'dan sonraki ilk bant
   boşluğu (telefonda 48px, 600px'ten itibaren 64 ile 96px arası). Altındaki bölüm
   boşluğunu sıradaki bölüm (#editions) kendi üst boşluğu olarak koyar. */
.desk {
  padding: var(--s7) 0 0;
}

@media (min-width: 600px) {
  .desk {
    padding-top: clamp(64px, 7vw, 96px);
  }
}

/* tek satır, fotoğrafların hemen üstünde: koleksiyonun adı ve ay (künyelerle aynı sessiz
   ölçü ve renk). .process__note (süreç fotoğraflarının notu) aynı kuralı paylaşır: yazı
   boyu, renk ve fotoğrafa uzaklık özdeş kalsın. */
.desk__note,
.process__note {
  margin: 0 0 var(--s4);
  font-size: var(--fs-note);
  line-height: 1.4;
  color: var(--ink-2);
}

/* masa fotoğrafları: bu ayın setinden gerçek fotoğraflar, hepsi kendi oranında, kırpmasız
   (object-fit yok). Notun hemen altında.
   < 600px (telefon): a ve c ALT ALTA, her biri tam sütun genişliğinde, aralarında 12px
   (notun altında tek grup gibi okunsun); her kutunun yüksekliği resmin oranından gelir.
   600-899px (tablet): a ve c YAN YANA, aynı yükseklikte, ikisi birlikte tam sütun
   genişliği. HİZALANMIŞ SATIR (justified row): genişlikler kendi oranlarını izler
   (--ar = genişlik / yükseklik, flex-grow olarak; flex-basis 0 olduğu için her kutu =
   (satır − boşluklar) × oran / oranlar toplamı, yani yükseklikler eşit). Boşluk 16px.
   ≥ 900px: aynı satır, üç fotoğraf (b yuvası da görünür), boşluk 24px, tüm sütun.
   b yuvası 900px'in altında display:none (tembel yüklenen gizli resim indirilmez); aynı
   dosya #pricing'de .pricing__photo--post olarak yalnız telefon ve tablette görünür, yani
   hiçbir ekranda aynı dosya iki kez görünmez. a ve c yuvalarının dosyaları sayfada
   başka yerde yok.
   Bu ayın fotoğrafları yataydır (≈ 4:3, oranlar 1,3333, 1,3180 ve 1,3344): kutu yüksekliği
   oran ve genişlikten gelir, sabit yükseklik ya da en-boy kuralı yok. */
.strip {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin: 0;
  padding: 0;
}

.strip__item--b {
  display: none;
}

.strip__item {
  flex: 0 0 auto;
  min-width: 0;
  margin: 0;
}

@media (min-width: 600px) {
  .strip {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--s4);
  }

  .strip__item {
    flex: var(--ar) 1 0%;
  }
}

@media (min-width: 900px) {
  .strip {
    gap: var(--s5);
  }

  .strip__item--b {
    display: block;
  }
}

.strip__item picture,
.strip__item img {
  display: block;
  width: 100%;
  height: auto;
}

/* 700-899: iki sütun kalır; yalnız dar telefonda tek sütun.
   Telefonda `.hero__text` ve `.hero__actions` kutuları çözülür (display:
   contents) ki çizim metin blokları arasına girebilsin ve her parça kendi
   sırasını alsın; kaynak sırası değişmez.
   İLK EKRAN (N1): telefonda ilk ekranda, kaydırmadan, bunlar görünür: tek
   cümle (büyük), çizimin TAMAMI (gerekirse biraz küçülür, kırpılmaz), "Subscribe",
   altında iptal cümlesi ve "For $7.99/month, you’ll get:" satırı (liste ondan
   hemen sonra başlar, ilk ekranın altından devam eder). Markanın adı ilk
   ekranda iki kez durmasın diye h1 telefonda çizilmez: gezinti çubuğundaki logo
   zaten "Graphite Post" diyor; h1 DOM'da kalır (arama motoru, ekran okuyucu).
   Biçim styles.css'teki .sr-only ile aynı. Üç yükseklik bandı (çerez bandı AÇIKKEN
   bile ana eylem ve fiyat satırı bandın üstünde kalsın):
     ≥ 780px   cümle → çizimin TAMAMI (künye + "Look closer" yan yana) → "Subscribe"
               → iptal cümlesi → fiyat satırı
     681-779   aynı sıra; künye çizimin sağına geçer (ölü şerit işe yarar)
     ≤ 680     cümle → "Subscribe" → iptal cümlesi → çizim → fiyat satırı + liste
               (çizim + düğme + fiyat bu boyda aynı ekrana sığmıyor; eylem önce) */
@media (max-width: 699px) {
  .hero {
    padding-top: var(--s4);
  }

  .hero__content {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__text,
  .hero__actions {
    display: contents;
  }

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

  .hero__lede {
    order: 2;
    grid-column: 1;
    margin-top: 0;
    max-width: 34rem;
    font-size: clamp(1.25rem, 5.6vw, 1.5rem);
    line-height: 1.25;
  }

  .hero__cta {
    order: 3;
    grid-column: 1;
    display: block;
    width: 100%;
    max-width: 34rem;
    margin-top: var(--s4);
    padding: 12px 0;
    text-align: center;
  }

  .hero__assure { order: 3; grid-column: 1; max-width: 34rem; }

  .hero__plate {
    order: 4;
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    max-width: 440px;
    margin-top: var(--s6);
    /* kart sağa taştığı için çizim sütunun %80'i (kartın sağ kenarı sütunun sağ kenarı) */
    --sheet-w: 80%;
    /* cümlenin (hero__lede) üçüncü satırı: 479px'e kadar cümle üç satır, daha geniş
       ekranda iki. İlk ekran hesaplarına (aşağıdaki iki yükseklik bandı) eklenir. */
    --lede-extra: calc(clamp(1.25rem, 5.6vw, 1.5rem) * 1.25);
  }

  @media (min-width: 480px) {
    .hero__plate {
      --lede-extra: 0px;
    }
  }

  .hero__offer { order: 5; grid-column: 1; margin-top: var(--s5); }
  .hero__actions .hero__card-note { order: 6; grid-column: 1; margin-top: var(--s4); }
  .hero__calendar { order: 7; grid-column: 1; max-width: 34rem; }
  .hero__subtitle { order: 8; grid-column: 1; max-width: 34rem; }
}

/* ≥ 780px yükseklik: çizim düğmeden ÖNCE, tam görünür. Genişlik <figure>'a
   verilir; künye çizimin altında, "Look closer" künyenin SAĞINDA (taban düzen,
   styles.css; künye ~2 satır, düğme 44px yüksek). Altındaki sütunun toplamı
   (ölçüldü, 390x844): gezinti 98 + üst boşluk 12 + cümle 2 satır + boşluk +
   künye satırı + düğme + iptal cümlesi (2 satır) + fiyat satırı + boşluklar
   = K (380); çizimin yüksekliği = 100svh − K.
   --reserve = açık çerez bandının ÖLÇÜLEN yüksekliği (main.js, --banner-h).
   Cümle ya da iptal cümlesi bir satır fazla sararsa K aynı miktarda artar:
   "Prints of my original pencil drawings, delivered to your door every month."
   479px'e kadar üç satır (480'den geniş ekranda iki), bu yüzden K'ya o üçüncü
   satırın yüksekliği (--lede-extra = cümlenin yazı boyu × 1,25) eklenir; yoksa
   fiyat satırı açık çerez bandının altında kalırdı (390x844'te ≈9px). Çizim
   bu yüzden 390x844'te ≈ %7 küçülür; kırpma yok. */
@media (max-width: 699px) and (min-height: 780px) {
  .hero {
    padding-top: 8px;
  }

  .hero__plate {
    --reserve: 0px;
    order: 3;
    margin-top: 8px;
  }

  /* çizim kutusu yüksekliğe göre küçülür; figür tam genişlikte kalır ki künye
     ve "Look closer" aynı satırda, sütunun iki ucunda dursun */
  .hero__plate {
    --sheet-w: min(80%, max(150px, calc((100svh - 380px - var(--lede-extra) - var(--reserve)) * 0.7059)));
  }

  .hero__plate .plate__sheet {
    position: static;
    clip-path: none;
  }

  /* açık çerez bandının gerçek yüksekliği: main.js ölçer ve --banner-h yazar
     (≥360px ≈64, 320px ≈77; güvenli alan dahil); yedek değer JS gelmeden önce */
  body:has(.cookie-banner--visible) .hero__plate {
    --reserve: var(--banner-h, 64px);
  }

  /* künye solda, "Look closer" aynı satırın sağ ucunda (düğme figürün alt sağ
     köşesine oturur: çizim kutusu static, düğmenin yerleşim kutusu figür).
     Dokunmatikte cam yok, kırpma yolu kapalı. */
  .hero__plate {
    position: relative;
  }

  /* künye, kartın solunda biter (kart çizimin altından sarkar); "Look closer" kartın
     altında, figürün alt sağ köşesinde */
  .hero__plate .plate__caption {
    margin-top: 8px;
    min-height: 44px;
    max-width: none;
    padding: 0 max(7rem, calc(100% - var(--sheet-w) * 0.79 + 8px)) 0 0;
    font-size: 0.8125rem;
    line-height: 1.3;
  }

  .hero__plate .originals__loupe-btn {
    top: auto;
    right: 0;
    bottom: 0;
    left: auto;
    margin: 0;
  }

  .hero__cta {
    order: 4;
    margin-top: 6px;
    padding: 10px 0;
  }

  .hero__assure {
    order: 4;
    margin-top: 8px;
  }

  .hero__offer {
    margin-top: 12px;
  }
}

/* 681-779px yükseklik: çizim dar kalacağı için künye + büyüteç çizimin
   SAĞINA geçer; sütun genişliği yüksekliğe göre. ≥350px genişlik: daha dar
   ekranda sağ sütun (≈46px) künyeyi ve "Look closer" yazısını kırpardı; orada
   alttaki varsayılan düzen (çizim düğmeden sonra) kalır. */
@media (max-width: 699px) and (min-width: 350px) and (min-height: 681px) and (max-height: 779px) {
  .hero {
    padding-top: 12px;
  }

  .hero__plate {
    --reserve: 0px;
    order: 3;
    margin-top: 12px;
    width: 100%;
    max-width: none;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 14px;
    align-items: start;
    /* 341 = 326 + kartın çizimin altından sarkması (≈ %7 çizim genişliği, ≈ 15px) */
    --sheet-w: min(220px, max(150px, calc((100svh - 341px - var(--lede-extra) - var(--reserve)) * 0.7059)));
    /* sarkan kart düğmenin altına inmesin: figür o kadar uzar */
    margin-bottom: calc(var(--sheet-w) * 0.07);
  }

  /* açık çerez bandının gerçek yüksekliği: main.js ölçer ve --banner-h yazar
     (≥360px ≈64, 320px ≈77; güvenli alan dahil); yedek değer JS gelmeden önce */
  body:has(.cookie-banner--visible) .hero__plate {
    --reserve: var(--banner-h, 64px);
  }

  .hero__plate .plate__sheet {
    clip-path: none;   /* dokunmatikte cam yok */
  }

  .hero__plate .plate__caption {
    margin: 0;
    padding: 0;
    max-width: none;
    font-size: 0.8125rem;
    line-height: 1.3;
  }

  /* "Look closer" çizimin yanında, KARTIN ÜSTÜNDE (kart çizimin alt %25'ini ve sağdaki
     boşluğun ilk %25'ini kaplar) */
  .hero__plate .originals__loupe-btn {
    top: auto;
    right: auto;
    bottom: calc(25% + 4px);
    left: calc(100% + 14px);
    white-space: nowrap;
  }

  .hero__cta {
    order: 4;
    margin-top: 12px;
  }

  .hero__assure {
    order: 4;
    margin-top: 8px;
  }

  .hero__offer {
    margin-top: 14px;
  }
}

/* --------------------------------------------------------------------------
   2. #editions, geçmiş sayılar: sessiz bir dizin. Geçmiş baskılar (en yeni başta)
   AYNI ölçekte (hepsi aynı kâğıt boyutu), tek taban çizgisinde; altlarında yalnız ad ve ay. Her kart
   tek bir bağlantı: plaka + ad + ay (büyüteç düğmeleri kaldırıldı; "Look closer"
   yalnız hero plakasında, gallery ve past-editions kendi sayfalarında tutuyor).
   Kaydırıcı, ok, kesilen kenar yok: masaüstünde (≥ 1100px) hepsi tek satırda, sütun
   sayısı baskı sayısını izler (grid-auto-flow: column; yedi baskıda 1200px'te plaka ≈ 143px,
   `sizes` yedi sütuna göre yazıldı; ≈ 9 baskıdan sonra plakalar çok küçülür, o zaman iki
   satıra bölmek gerekir), tablette üç, telefonda iki sütun; yeni baskı eklenince son satır
   kısa kalabilir, sola hizalı. Plaka satırı alt kenardan hizalı (bir baskı diğerinden birkaç px
   uzun olsa da tabanları aynı çizgide); künye satırı ondan sonra başlar (subgrid).
   -------------------------------------------------------------------------- */
.wall {
  padding: clamp(80px, 8vw, 112px) 0 0;
}

.wall .section-title {
  margin-bottom: var(--s3);
}

.wall__lede {
  max-width: 40rem;
  margin: 0;
  font-size: var(--fs-lede);
  line-height: 1.45;
}

.wall__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--s4);
  row-gap: var(--s7);
  margin: var(--s7) 0 0;
  padding: 0;
}

@media (min-width: 600px) {
  .wall__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--s5);
  }
}

@media (min-width: 1100px) {
  .wall__grid {
    grid-template-columns: none;
    grid-auto-flow: column;                    /* her baskı yeni bir sütun: hepsi tek satırda */
    grid-auto-columns: minmax(0, 1fr);
    column-gap: 20px;
  }
}

.wall__item {
  margin: 0;
}

.wall__link {
  display: block;
  color: var(--ink);
  text-decoration: none;
}

.wall__link:hover {
  color: var(--ink);
}

.wall__link:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 6px;
}

.wall__sheet {
  position: relative;
  display: block;
  box-shadow: 0 0 0 1px var(--hair);
}

.wall__sheet picture,
.wall__sheet img {
  display: block;
  width: 100%;
  height: auto;
}

/* sessiz dizin: plakanın altında yalnız eserin adı ve ayı. Fiyat ve düğme
   kartlarda yok (aşağıda tek satır, ayrıntı past-editions.html'de). */
.wall__label {
  display: flex;
  flex-direction: column;
  justify-content: space-between;   /* subgrid satırı en uzun künyeye uyar: aylar aynı çizgide */
  margin-top: var(--s3);
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--ink-2);
}

.wall__title {
  display: block;
  font-size: var(--fs-note);
  font-style: normal;          /* "Collection" eser adı değil: dik */
  line-height: 1.3;
  color: var(--ink);
}

.wall__title i {
  font-style: italic;          /* yalnız eserin adı */
}

.wall__month {
  display: block;
}

/* tek cümle, tek bağlantı: kartların altında bir kez */
.wall__buy {
  margin: var(--s6) 0 0;
  font-size: 1rem;
  line-height: 1.5;
}

.wall__cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;            /* dokunma alanı */
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.wall__cta:hover {
  color: var(--link-hover);
}

.wall__cta:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

.dark-mode .wall__sheet {
  box-shadow: none;            /* koyu zeminde kâğıdın kenarı zaten görünür */
}

/* tabanlar aynı çizgide: her kartın plaka satırı ortak, künye satırı ortak */
@supports (grid-template-rows: subgrid) {
  .wall__item {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: 0;
  }

  .wall__link {
    display: grid;
    grid-column: 1;
    grid-row: 1 / span 2;
    grid-template-rows: subgrid;
    row-gap: 0;
  }

  .wall__sheet {
    grid-row: 1;
    align-self: end;
  }

  .wall__label {
    grid-row: 2;
  }
}

/* --------------------------------------------------------------------------
   3. #artist: portre büyük (sağda), mektup tek sakin sütun (solda). Telefonda
   başlık → portre → mektup.
   -------------------------------------------------------------------------- */
.artist {
  padding: clamp(104px, 12vw, 176px) 0 0;
}

.artist__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  grid-template-areas:
    "title image"
    "text  image"
    "text  facts";
  grid-template-rows: auto auto 1fr;
  column-gap: var(--col-gap);
  align-items: start;
}

.artist__title {
  grid-area: title;
  margin: 0 0 var(--s6);
}

.artist__image {
  grid-area: image;
  margin: 0;
}

.artist__image picture,
.artist__image img {
  display: block;
  width: 100%;
  height: auto;
}

.artist__text {
  grid-area: text;
  max-width: var(--measure);
}

.artist__text p {
  margin-bottom: 1.1em;
}

/* künye notu: masaüstünde portrenin hemen altında (portre sütununda ölü şerit
   kalmasın), telefonda mektubun sonunda. Çizgisiz, daha küçük ve soluk. */
.artist__facts {
  grid-area: facts;
  max-width: var(--measure);
  margin: var(--s4) 0 0;
  font-size: var(--fs-note);
  color: var(--ink-2);
}

@media (max-width: 899px) {
  .artist {
    padding-top: clamp(96px, 20vw, 128px);
  }

  .artist__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "title"
      "image"
      "text"
      "facts";
    grid-template-rows: auto;
    row-gap: var(--s5);
  }

  .artist__title {
    margin-bottom: 0;
  }

  /* tablette portre tüm genişliği kaplamasın (telefonda zaten sütun kadar) */
  .artist__image {
    max-width: 34rem;
  }

  .artist__text {
    margin-top: var(--s2);
  }

  .artist__facts {
    margin-top: var(--s3);
  }
}

/* --------------------------------------------------------------------------
   4. #process, elin kanıtı: bir at, üç aşama (taslak → katmanlar → son)
   Mektubun (#artist) ardından, fiyatlardan önce; bilerek küçük. Tam fotoğraflar (masa,
   kalemler, silgi görünsün; kırpma yok), HER ekranda tek satır, üçü aynı yükseklikte,
   kendi 3:4 oranında (üçü de 3:4 olduğundan genişlikler eşit çıkar; bu kasıtlı bir "eşit
   kare" değil, fotoğrafların kendi oranıdır). Genişlik yükseklikten gelir: her kutunun
   temel genişliği = --process-h × oran (300px yükseklikte 225px); satır bundan dar olunca
   üç kutu AYNI oranda daralır (flex-shrink temel genişliğe orantılı), yani yükseklikler
   hep eşit kalır. Telefonda üçü sütuna yan yana sığar (390px'te ≈ 109px), tablet ve
   masaüstünde satır en çok 300px yüksek, sütuna yayılmaz, sol kenara hizalı. Altyazı her
   fotoğrafın hemen altında, telefonda bir boy küçük (en çok iki satır). Üstündeki bölüm
   boşluğunu bu bölüm, altındakini #pricing koyar. Kaydırmaya bağlı sahne yok.
   < 900px: not satırın ÜSTÜNDE (HTML sırası). ≥ 900px: iki sütunlu ızgara, HTML sırası
   aynı kalır (not, sonra liste) ama not satırın SAĞINA gelir: satır solda (kapsayıcının sol
   kenarında, 300px yüksek fotoğraflar), not sağda, üst kenarları aynı hizada, sola hizalı,
   en çok 28ch, aradaki boşluk 48px. Satırın sütunu en çok kendi doğal genişliği kadar
   (3 × 225 + 2 × 24 = 723px), not sütunu en az 12rem (192px). Kapsayıcı satır + boşluk +
   28ch'lik not için yetmeyince (900 ile ≈ 1075px arası) önce not 192px'e kadar daralır,
   sonra satır daralır ve üç fotoğraf aynı oranda küçülür (900px'te ≈ 245px yüksek).
   Amaç, satırın sağında boş şerit kalmaması.
   -------------------------------------------------------------------------- */
.process {
  padding: var(--s9) 0 0;
}

@media (min-width: 900px) {
  .process {
    padding-top: clamp(96px, 9vw, 128px);
  }

  .process .container {
    display: grid;
    grid-template-columns: minmax(0, max-content) minmax(12rem, 1fr);
    column-gap: var(--s7);
    align-items: start;
  }

  .process__row {
    grid-column: 1;
    grid-row: 1;
  }

  .process__note {
    grid-column: 2;
    grid-row: 1;
    max-width: 28ch;
    margin: 0;
  }
}

.process__row {
  --process-h: 300px;
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  margin: 0;
  padding: 0;
}

@media (min-width: 600px) {
  .process__row {
    gap: var(--s5);
  }
}

.process__item {
  flex: 0 1 calc(var(--process-h) * var(--ar));
  min-width: 0;
  margin: 0;
}

.process__item figure {
  margin: 0;
}

.process__item picture,
.process__item img {
  display: block;
  width: 100%;
  height: auto;
}

.process__caption {
  margin-top: var(--s2);
  font-size: var(--fs-small);
  line-height: 1.3;
  color: var(--ink-2);
}

@media (min-width: 600px) {
  .process__caption {
    margin-top: var(--s3);
    font-size: var(--fs-note);
    line-height: 1.4;
  }
}

/* --------------------------------------------------------------------------
   5. #pricing, seçenekler: üç kısa blok, her birinin düğmesi kendi altında.
   Sol etiket sütunu, çizgi, kart yok: boşluk ayırır. Etiket (dik, ikincil renk)
   içeriğinin üstünde. Telefonda üst üste (abonelik, hediye, tek baskı, kapalı zarf
   fotoğrafı, güvence). Bir zarfın içindekiler fotoğrafı burada değil: her ekranda
   hero'nun hemen altındaki masa şeridinde (.strip__item--c).
   Geniş ekranda iki sütun, ikisi de gerçekten çift: abonelik + güvencesi yan yana;
   altında iki ikincil seçenek (hediye, tek baskı). Sağ sütun hero ile aynı eksende.
   Kapalı zarf fotoğrafı yalnız telefon ve tablette (≤ 899px): geniş ekranda ızgara
   garantiyi ana teklifin yanında tutuyor, fotoğrafa yer yok (aşağıda display:none;
   tembel yüklenen gizli resim indirilmez). Aynı dosya masaüstünde masa şeridinin
   ikinci yuvasında (.strip__item--b) görünür.
   -------------------------------------------------------------------------- */
.pricing {
  padding: clamp(96px, 11vw, 160px) 0 0;
}

.decision__head {
  margin-bottom: var(--s8);
}

.decision__head .section-title {
  margin: 0;
}

.decision__kicker {
  margin: var(--s3) 0 0;
  font-size: var(--fs-lede);
  font-style: normal;
  line-height: 1.4;
  color: var(--ink-2);
}

.offers {
  display: grid;
  row-gap: var(--s8);
  max-width: var(--measure);
}

.offer__label {
  margin: 0 0 var(--s2);
  font-size: var(--fs-note);
  line-height: 1.45;
  color: var(--ink-2);
}

.decision__headline {
  margin: 0;
  font-size: var(--fs-h2);
  line-height: 1.2;
}

.offer--main .decision__headline {
  font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  line-height: 1.1;
}

/* dokunma alanı ≥44px, görünüm aynı: dolgu alanı büyütür, eksi kenar boşluğu
   satırın yüksekliğini eskisi gibi tutar */
.decision__headline a {
  display: inline-block;
  padding-block: 7px;
  margin-block: -7px;
  color: var(--ink);
}

.decision__headline a:hover {
  color: var(--link-hover);
}

.offer > p:not(.offer__label):not(.decision__headline) {
  margin: var(--s2) 0 0;
}

.offer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s4);
}

.offer__actions .btn {
  padding: 12px 20px;
}

.offer--main .offer__actions .btn {
  padding: 14px 32px;
  font-size: 1.0625rem;
}

/* düğmenin altında tek satır not (geçmiş sayı bağlantısı) */
.offer > .offer__actions + p.note {
  margin-top: var(--s4);
  color: var(--ink-2);
}

/* güvence: çizgisiz, etiketsiz düz metin (kargo ve iade sözleri) */
.decision__guarantee {
  max-width: var(--measure);
  margin-top: clamp(72px, 9vw, 112px);
}

.decision__promises {
  margin: 0 0 var(--s4);
  padding: 0;
}

.decision__promises li {
  padding: 5px 0;
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--ink);
}

.decision__guarantee .note {
  margin: 0 0 var(--s4);
  color: var(--ink-2);
}

.decision__stat {
  margin: 0;
  font-size: var(--fs-note);
  line-height: 1.6;
  color: var(--ink-2);
}

/* kapalı zarf fotoğrafı (telefon, tablet): sütun genişliğinde (en çok 440px), kendi
   oranında, kırpmasız. Üç teklifin 64px altında ve altındaki güvenceye 32px: ikisi bir
   birim. */
.pricing__photo {
  width: 100%;
  max-width: 440px;
  margin: 0;
}

.pricing__photo picture,
.pricing__photo img {
  display: block;
  width: 100%;
  height: auto;
}

.pricing__photo--post {
  margin-top: var(--s8);
}

/* telefon ve tablet: yazı basamağı ve boşluk (≤ 899px). Fotoğraf araya girince
   başlıklar bölüm başı olarak okunmalı: h2 26 → 34, ana fiyat 32 → 44 (tek
   gösteriş boyu, karar noktasında), alt teklif başlıkları 26 → 22 (artık "Prices"
   ile aynı seviyede değil); "Prices" başlığı içeriğine 64 yerine 32px. Bölüm
   başı boşluğu içeriğe göre: seçenekler 120 (karar; üstündeki süreç satırından
   ayırır), SSS 88 (seçeneklerin devamı). */
@media (max-width: 899px) {
  .pricing__photo--post + .decision__guarantee {
    margin-top: var(--s6);
  }

  .section-title {
    font-size: 2.125rem;
  }

  .pricing {
    padding-top: clamp(120px, 20vw, 144px);
  }

  .decision__head {
    margin-bottom: var(--s6);
  }

  .offer--main .decision__headline {
    font-size: 2.75rem;
  }

  .offer:not(.offer--main) .decision__headline {
    font-size: 1.375rem;
  }
}

@media (max-width: 599px) {
  .offer__actions .btn {
    display: block;
    width: 100%;
  }
}

@media (min-width: 900px) {
  .pricing__photo {
    display: none;
  }

  .pricing .container {
    display: grid;
    grid-template-columns: var(--cols);
    column-gap: var(--col-gap);
    row-gap: var(--s8);
    align-items: start;
  }

  .decision__head {
    grid-column: 1 / -1;
    margin-bottom: 0;
  }

  /* üç blok doğrudan ızgaraya girer: abonelik sol üstte, güvence onun yanında */
  .offers {
    display: contents;
  }

  .offer--main {
    grid-column: 1;
    grid-row: 2;
  }

  .decision__guarantee {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
  }

  .offers .offer:nth-child(2) {
    grid-column: 1;
    grid-row: 3;
  }

  .offers .offer:nth-child(3) {
    grid-column: 2;
    grid-row: 3;
  }
}

/* --------------------------------------------------------------------------
   6. #faq: çizgisiz (satırları boşluk ayırır). Telefonda tek sütun; geniş ekranda
   iki bağımsız sütun (4 + 4): bir soru açılınca yalnız kendi sütunu uzar, yan
   sütun kıpırdamaz. <details> davranışı ve "+" / "−" işareti ortak (styles.css).
   -------------------------------------------------------------------------- */
.faq {
  padding: clamp(88px, 9vw, 128px) 0 0;
}

.faq .section-title {
  margin: 0 0 var(--s5);
}

.faq__list {
  max-width: 42rem;
}

@media (min-width: 900px) {
  .faq__list {
    display: grid;
    grid-template-columns: var(--cols);   /* sağ sütun hero / seçenekler ile aynı eksende */
    column-gap: var(--col-gap);
    align-items: start;
    max-width: none;
  }
}

/* ortak kural iki soru arasına çizgi koyuyor; ana sayfada boşluk yeter */
.faq__item + .faq__item {
  border-top: 0;
}

.faq__question {
  padding-block: 12px;
  font-size: 1.125rem;
}

.faq__question::after {
  top: 10px;
}

.faq__answer {
  padding: 0 0 var(--s4);
}

/* --------------------------------------------------------------------------
   7. #final-cta, kapanış: gerçek bir fotoğraf (bu ayın baskısı zarfından çıkıyor),
   altında düğme ve altında tek satır, hepsi sola hizalı: TEK nesne gibi okunur.
   Telefon ve tablette (≤ 899px) fotoğraf ve düğme sütun genişliğinde (en çok
   440px, hero çizimiyle aynı), düğme tam genişlik, fotoğrafa 16px yakın.
   Geniş ekranda (≥ 900px) hero'nun eksenini yansıtır: fotoğraf çizimin sütununda
   (sol, hero çiziminin genişliğinde), düğme ve satırı metin ekseninde (sağ),
   fotoğrafın ALT kenarına oturur; sağ üst bilerek boş, sayfa orada biter.
   Üst boşluk telefon ve tablette 120 (sayfanın son sözü SSS'nin devamı gibi
   okunmasın); geniş ekranda eski değer (72 → 96): masaüstünde fotoğrafsız aralık
   uzamasın (1440x900'de 1452px, 1280x800'de 1414px).
   -------------------------------------------------------------------------- */
.final-cta {
  padding: 120px 0 clamp(48px, 5vw, 72px);
}

@media (min-width: 900px) {
  .final-cta {
    padding-top: clamp(72px, 7vw, 96px);
  }
}

.final-cta__inner {
  display: grid;
  row-gap: var(--s4);
  justify-items: start;
}

.final-cta__photo,
.final-cta__text {
  width: 100%;
  max-width: 440px;
  margin: 0;
}

.final-cta__photo picture,
.final-cta__photo img {
  display: block;
  width: 100%;
  height: auto;
}

.final-cta__btn {
  display: block;
  width: 100%;
  padding: 14px 0;
  font-size: 1.0625rem;
}

/* düğmenin altında: sitenin kendi cümlesi (hero'daki ve fiyat bölümündeki ile aynı) */
.final-cta__note {
  margin: var(--s3) 0 0;
  font-size: var(--fs-note);
  line-height: 1.5;
  color: var(--ink);
}

@media (min-width: 900px) {
  .final-cta__inner {
    grid-template-columns: var(--cols);
    column-gap: var(--col-gap);
    align-items: end;
    justify-items: stretch;
  }

  .final-cta__photo {
    max-width: none;
  }

  .final-cta__text {
    max-width: 36rem;
  }

  .final-cta__btn {
    display: inline-block;
    width: auto;
    padding: 14px 36px;
  }
}