/* ============================================
   GRAPHITE POST: css/pages/store.css
   ============================================
   Yalnız "Original Drawings" (store.html + js/store.js). Ortak şeyler
   (token, düğme, bağlantı, form alanı, page-head, faq, header, footer)
   css/styles.css'te. Kural: TASARIM_DILI.md + BRIEF-v3.

   Eser dokunulmaz: katalogdan gelen çizim kendi oranında durur (kırpma yok),
   üstüne filtre / opaklık / rozet / gölge konmaz; satıldı bilgisi yazıyla
   künyededir. Çizimin etrafında yalnız 1px çizgi vardır (kâğıt kenarı
   sayfa renginden ayırt edilsin diye).

   Bu sayfa bir mağaza listesi, süslü bir sayfa değil:
   · Katalog yüklenemezse / boşsa görünen şey düz bir bilgi cümlesidir
     (giriş cümlesi gibi büyük yazı, çizgi, "içerik" havası yok).
   · Yüklenen çizimler eşit karo değil: her biri kendi oranında, o oranla
     orantılı genişlikte durur; aralarında çizgi yok, boşluk var.
   · "How It Works" ve "Questions" tek okuma sütunu: başlık üstte, metin altta.
   ============================================ */

/* --------------------------------------------------------------------------
   1. Sayfa başı: .page-head (ortak). Yalnız giriş cümlesinin genişliği.
   -------------------------------------------------------------------------- */
/* ilk ekranda çizimin büyük kısmı görünsün diye başlık bandı sıkı */
.store-head {
  padding: var(--s7) 0 var(--s6);
}

.store-head .lede {
  max-width: 52ch;
}

/* --------------------------------------------------------------------------
   2. Katalog
   -------------------------------------------------------------------------- */
.orig-catalog {
  padding: 0;
}

/* Yükleniyor / boş katalog / istek hatası: biri görünür, öbürleri gizli.
   Düz bir durum cümlesi: gövde boyutunda, soluk renkte, çizgisiz. */
.orig-notice {
  max-width: var(--measure, 36rem);
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink-2);
}

.orig-notice--quiet {
  color: var(--pencil);
}

/* düz bağlantı görünümlü düğme (bağlantıyla aynı: altı çizili) */
.orig-retry,
.orig-entry__more,
.orig-sheet__close {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font: inherit;
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.orig-retry:hover,
.orig-entry__more:hover,
.orig-sheet__close:hover {
  color: var(--link-hover);
}

/* "Try again" (hata satırı) cümlenin içinde duruyor, 27px yüksekti. Telefonda /
   dokunmatikte dikey dolgu dokunma alanını ≥44px yapar; eşit negatif kenar
   boşluğu satırın boyunu ve yazının yerini aynen korur. */
@media (max-width: 899px), (pointer: coarse) {
  .orig-retry {
    padding: 14px 0;
    margin: -14px 0;
  }
}

/* Her çizim bir giriş: çizim kendi oranında ve o oranla orantılı genişlikte
   (dik çizim dar, yatay çizim geniş; alanları yaklaşık eşit), yanında künye.
   Girişler arasında çizgi yok, boşluk var. Tek sütundan geniş ekranda iki
   öğe yan yana durur; sığmazsa künye alta iner (flex-wrap). */
.orig-entry {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s5) clamp(32px, 5vw, 80px);
  padding: 0 0 var(--s9);
}

.orig-entry:first-child {
  padding-top: var(--s2);
}

.orig-entry:last-child {
  padding-bottom: var(--s8);
}

/* Çizim: kendi oranında. Düğme yalnız tıklanabilir alandır; çizgi 1px.
   --ar (genişlik/yükseklik) store.js yükleme sonrası yazar; gelene dek 3:4. */
.orig-entry__plate {
  display: block;
  flex: 0 1 auto;
  width: min(calc(100% - 20rem), calc(var(--ar, 0.75) * 36rem), 46rem);   /* 20rem: künye hep yanında kalsın */
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--hair);
}

.orig-entry__plate:hover {
  box-shadow: 0 0 0 1px var(--ink-2);
}

.orig-entry__img {
  display: block;
  width: 100%;
  height: auto;
}

/* künye çizimin yanında; sığmazsa altına iner */
.orig-entry__caption {
  flex: 1 1 16rem;
  max-width: 28rem;
  padding-top: var(--s1);
}

/* eser adı: italik (italik yalnız eser adlarına ayrılmıştır) */
.orig-entry__title {
  margin: 0;
  font-size: var(--fs-h2);
  font-style: italic;
}

/* künye: "2026. Graphite on paper. 150×210 mm." */
.orig-entry__meta {
  margin: var(--s2) 0 0;
  color: var(--ink-2);
}

/* fiyat düz bir satır; kart/rozet değil */
.orig-entry__price {
  margin: var(--s5) 0 0;
  font-size: var(--fs-h3);
  line-height: 1.3;
}

.orig-entry__state {
  font-size: var(--fs-body);
  font-style: normal;     /* "Reserved." bir eser adı değil; store.js <i> koyuyor */
  color: var(--ink-2);
}

/* satıldı: yazıyla, künyenin altında; çizime dokunulmaz */
.orig-entry__sold {
  margin: var(--s5) 0 0;
  color: var(--ink-2);
}

.orig-entry__sold i {
  font-style: normal;     /* "Sold." bir eser adı değil; store.js <i> koyuyor */
}

.orig-entry__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s5);
  margin: var(--s5) 0 0;
}

.orig-entry__more {
  padding: 10px 0;
}

@media (max-width: 899px) {
  .orig-entry {
    display: block;
    padding: 0 0 var(--s8);
  }

  .orig-entry__plate {
    width: min(100%, 30rem);
  }

  .orig-entry__caption {
    max-width: none;
    padding-top: var(--s5);
  }
}

/* Telefon (≤699): ilk çizimin fiyatı ve "Inquire about this piece" düğmesi ilk
   ekranda, açık çerez bandının (≈111px) üstünde kalsın; künye çizimin ALTINDA
   durur (katalog düzeni, sıra değişmez). Çizim KIRPILMAZ: çerçevenin GENİŞLİĞİ
   ekran yüksekliğine göre sınırlanır, resim kendi oranını korur (--ar =
   genişlik/yükseklik, store.js yükleme sonrası yazar; gelene dek 3:4).
   --reserve = çizim dışında o ilk ekranı dolduran her şey: üst çubuk (98px) + başlık
   + giriş cümlesi + künye (ad, ölçü, fiyat, düğme) + çerez bandı + nefes payı.
   375-430 px genişlikte ölçüldü (≤370'te giriş cümlesi bir satır daha sarar).
   Çok kısa ekranda çizim 9rem'den dar olmaz (yoksa pul gibi kalır); orada
   açık bant düğmenin üstünü örter (bant cevaplanınca düğme ilk ekranda). */
@media (max-width: 699px) {
  .store-head {
    padding: var(--s5) 0 var(--s4);
  }

  .orig-entry:first-child {
    padding-top: var(--s3);
  }

  .orig-entry__caption {
    padding-top: var(--s3);
  }

  .orig-entry__price,
  .orig-entry__actions {
    margin-top: var(--s3);
  }

  .orig-entry__plate {
    --reserve: 588px;
    width: min(100%, max(9rem, calc((100vh - var(--reserve)) * var(--ar, 0.75))));
    width: min(100%, max(9rem, calc((100svh - var(--reserve)) * var(--ar, 0.75))));
  }
}

/* --------------------------------------------------------------------------
   3. Nasıl işliyor + SSS, tek okuma sütunu: başlık üstte, metin altta.
   Bölümleri çizgi değil boşluk ayırır.
   -------------------------------------------------------------------------- */
.orig-how,
.orig-faq {
  padding: var(--s8) 0 0;
}

.orig-faq {
  padding-bottom: var(--s9);
}

.orig-how .container > *,
.orig-faq .container > * {
  max-width: var(--measure, 36rem);
}

.orig-how .section-title,
.orig-faq .section-title {
  margin: 0 0 var(--s4);
  font-size: clamp(1.5rem, 1.3rem + 0.7vw, 1.875rem);
  line-height: 1.2;
}

/* üç cümle; numara/daire/çizgi yok, sıra cümlelerin sırasındadır */
.orig-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.orig-steps li {
  max-width: none;
  margin: 0 0 var(--s3);
  padding: 0;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink);
}

.orig-steps li:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   4. Çizim sayfası (detay): düz kâğıt, 1px çizgi; gölge, yuvarlak köşe, bulanıklık yok
   -------------------------------------------------------------------------- */
body.sheet-open {
  overflow: hidden;
}

.orig-sheet[hidden] {
  display: none;
}

.orig-sheet {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s5);
}

/* arkası düz ikinci kâğıt (yarı saydam perde ve bulanıklık yok) */
.orig-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: var(--band);
}

.orig-sheet__dialog {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  grid-template-rows: auto 1fr;
  align-items: start;
  width: 100%;
  max-width: 62rem;
  max-height: 100%;
  overflow-y: auto;
  background: var(--page);
  border: 1px solid var(--hair-strong);
  outline: none;
}

/* kapat çubuğu kaydırırken de elde kalır */
.orig-sheet__bar {
  position: sticky;
  top: 0;
  z-index: 2;
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  padding: 0 var(--s5);
  background: var(--page);
  border-bottom: 1px solid var(--hair);
}

.orig-sheet__close {
  padding: 12px 0;
}

.orig-sheet__media {
  padding: var(--s5);
}

.orig-sheet__img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 0 0 1px var(--hair);
}

/* küçük resimler de kendi oranında; seçili olan çizgiyle belli (soluklaştırma yok) */
.orig-sheet__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s4);
}

.orig-sheet__thumbs[hidden] {
  display: none;
}

.orig-sheet__thumb {
  width: 56px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--hair);
}

.orig-sheet__thumb img {
  display: block;
  width: 100%;
  height: auto;
}

.orig-sheet__thumb.is-active {
  outline: 2px solid var(--ink);
  outline-offset: 0;
}

.orig-sheet__info {
  padding: var(--s5) var(--s5) var(--s6) var(--s4);
}

.orig-sheet__title {
  margin: 0;
  font-size: var(--fs-h2);
  font-style: italic;
}

.orig-sheet__meta {
  margin: var(--s2) 0 0;
  color: var(--ink-2);
}

.orig-sheet__meta[hidden] {
  display: none;
}

.orig-sheet__desc {
  margin-top: var(--s4);
  max-width: var(--measure);
}

.orig-sheet__desc p + p {
  margin-top: var(--s3);
}

.orig-sheet__edition {
  margin: var(--s4) 0 0;
  font-size: var(--fs-small);
  color: var(--pencil);
}

.orig-sheet__edition[hidden] {
  display: none;
}

.orig-sheet__transaction {
  margin-top: var(--s6);
}

.orig-sheet__price {
  margin: 0;
  font-size: var(--fs-h3);
  color: var(--link);
}

.orig-sheet__status {
  margin: var(--s1) 0 var(--s4);
  color: var(--ink-2);
}

.orig-sheet__inquire[hidden] {
  display: none;
}

.orig-sheet__sold {
  margin: 0;
  color: var(--ink-2);
}

.orig-sheet__sold[hidden] {
  display: none;
}

/* sorgu formu: alanlar ortak `.field` */
.orig-form[hidden] {
  display: none;
}

.orig-form .field__error {
  margin: 0 0 var(--s3);
}

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

.orig-form__result {
  margin: var(--s3) 0 0;
  line-height: 1.6;
  color: var(--ink-2);
}

.orig-form__result:empty {
  display: none;
}

.orig-form__result--success {
  color: var(--ink);
}

.orig-form__result--error {
  color: var(--color-error);
}

@media (max-width: 599px) {
  /* aynı sınır detay sayfasındaki resim için */
  .orig-sheet__image {
    width: min(100%, calc(56vh * var(--ar, 0.75)));
    width: min(100%, calc(56svh * var(--ar, 0.75)));
  }
}

@media (max-width: 899px) {
  .orig-sheet {
    padding: 0;
  }

  .orig-sheet__dialog {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    max-width: none;
    height: 100%;
    border: 0;
  }

  .orig-sheet__bar {
    padding: 0 var(--gut);
  }

  .orig-sheet__media {
    max-width: 32rem;
    padding: var(--s4) var(--gut) 0;
  }

  .orig-sheet__info {
    padding: var(--s5) var(--gut) var(--s7);
  }
}