/* ============================================
   GRAPHITE POST: css/pages/checkout-form.css  ("Katalog")
   ============================================
   Yalnız ödeme sayfası. Ortak şeyler (token, düğme, bağlantı, form alanı,
   plate, calendar, header, footer) css/styles.css'te. Kural: TASARIM_DILI.md.

   Sayfa sırası: başlık → sipariş özeti (çizim + künye + fiyat + içindekiler +
   takvim) → form → güvence. Masaüstünde özet solda, form sağda; telefonda
   özet formun üstünde, kısa, "What's included" açılır-kapanır.

   Bu sayfada bilerek YOK: "Subscribe" düğmesi, bülten, sosyal
   bağlantılar (dikkat dağıtır), sarı uyarı kutusu (düz not oldu).

   Bu bir ödeme sayfası: tek iş var, o da formu doldurmak. Özet düz yazı (çizim,
   ad, fiyat, içindekiler, takvim), bölümler arasında çizgi yok, italik etiket
   yok (italik yalnız eser adlarına: plaka künyesindeki "Owl" gibi).
   ============================================ */

/* --------------------------------------------------------------------------
   1. Üst bölüm: logo, geri bağlantısı, gece anahtarı
   -------------------------------------------------------------------------- */
.checkout-nav__back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 1rem;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
  transition: text-decoration-color 0.15s ease, color 0.15s ease;
}

.checkout-nav__back:hover {
  color: var(--ink);
  text-decoration-color: currentColor;
}

@media (max-width: 899px) {
  /* tek satır: logo · geri · gece anahtarı (ikinci "bağlantılar" satırı yok) */
  .checkout-nav .site-nav__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "logo back toggle";
    column-gap: var(--s3);
    min-height: 60px;
  }

  .checkout-nav__back {
    grid-area: back;
    justify-self: end;
    font-size: 0.9375rem;
  }

  .checkout-nav .dark-mode-toggle {
    width: 44px;
    height: 44px;
    margin-right: -10px;     /* simge içerik kenarında dursun */
  }
}

/* --------------------------------------------------------------------------
   2. Sayfa başı
   -------------------------------------------------------------------------- */
.checkout {
  padding: var(--s6) 0 0;
}

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

.checkout__head h1 {
  margin: 0;
  max-width: 36ch;
}

.checkout__subtitle {
  margin: var(--s3) 0 0;
  max-width: 36rem;
  color: var(--ink-2);
}

@media (min-width: 900px) {
  .checkout {
    padding-top: var(--s7);
  }

  .checkout__head {
    margin-bottom: var(--s7);
  }
}

/* --------------------------------------------------------------------------
   3. Yerleşim: telefonda üst üste (özet · form · güvence), masaüstünde
      solda özet + güvence, sağda form
   -------------------------------------------------------------------------- */
.checkout__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--s6);
}

@media (max-width: 899px) {
  .summary,
  .checkout__form,
  .guarantee {
    max-width: 40rem;
  }

  /* Çizim büyüdü (104 → 156px); ilk form alanı ilk ekranda kalsın diye telefonda
     boşluklar biraz sıkı */
  .checkout {
    padding-top: var(--s5);
  }

  .checkout__head {
    margin-bottom: var(--s5);
  }

  .checkout__layout {
    row-gap: var(--s5);
  }
}

@media (min-width: 900px) {
  .checkout__layout {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-areas:
      "summary   form"
      "guarantee form";
    grid-template-rows: auto 1fr;
    column-gap: clamp(48px, 6vw, 96px);
    row-gap: var(--s6);
    align-items: start;
  }

  .summary { grid-area: summary; }
  .checkout__form { grid-area: form; max-width: 36rem; }
  .guarantee { grid-area: guarantee; }
}

/* --------------------------------------------------------------------------
   4. Sipariş özeti
   -------------------------------------------------------------------------- */
/* çizim + ad + fiyat. Satın alınan şey küçük kalmasın: telefonda 156px, masaüstünde
   220px (eskiden 104 / 200). Telefonda plaka solda iki satır boyunca durur; ad, fiyat
   ve künye sağ sütunda (künye plakanın taban çizgisinde), böylece büyüyen çizim formun
   ilk alanını aşağı itmez. Masaüstünde plaka solda ve künyesi altında, yazı sağda. */
.summary__head {
  display: grid;
  grid-template-columns: clamp(124px, 40vw, 156px) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: var(--s4);
  row-gap: var(--s3);
  align-items: start;
}

/* JS çizimi bu kutuya koyar; kutu ve <figure> yerleşime katılmaz, plaka ile
   künye doğrudan ızgaranın öğesi olur */
.summary__plate-slot,
.summary__plate {
  display: contents;
}

.summary__plate .plate__sheet {
  grid-column: 1;
  grid-row: 1 / span 2;
  clip-path: none;               /* büyüteç düğmesi yok: taşma payı gerekmiyor */
}

.summary__plate .plate__caption {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  margin: 0;
  padding-right: 0;
  font-size: 0.9375rem;
  line-height: 1.4;
}

.summary__title {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

/* çizim yoksa (hediye; çizimi bilinmeyen ay): yazı tam genişlik */
.summary__head:not(:has(.plate)) {
  grid-template-columns: minmax(0, 1fr);
}

.summary__head:not(:has(.plate)) .summary__title {
  grid-column: 1;
}

.summary__name {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.2;
}

.summary__kind {
  margin: var(--s1) 0 0;
  color: var(--ink-2);
}

.summary__price {
  margin: var(--s3) 0 0;
  font-size: 1.25rem;
  line-height: 1.3;
}

/* "one-time purchase" fiyatın yanında düz yazı (tireden bölünmesin); fiyatın kendisi mavi */
.summary__price .price {
  font-size: 1.25rem;
}

.summary__price-note {
  font-size: 1rem;
  color: var(--ink-2);
  white-space: nowrap;
}

.summary__note {
  margin: var(--s2) 0 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-2);
}

@media (min-width: 900px) {
  .summary__head {
    grid-template-columns: 220px minmax(0, 1fr);
    grid-template-rows: auto;
    column-gap: var(--s5);
  }

  .summary__plate .plate__sheet {
    grid-row: 1;
  }

  .summary__plate .plate__caption {
    grid-column: 1;
    align-self: start;
    font-size: var(--fs-small);
    line-height: 1.5;
  }

  .summary__title {
    padding-top: var(--s1);
  }
}

/* "What's included": düz başlık + liste. Telefonda açılır-kapanır (+ / −),
   masaüstünde hep açık ve etkileşimsiz (JS .summary__box--static ekler). */
.summary__box {
  margin-top: var(--s5);
}

.summary__box > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  list-style: none;
  cursor: pointer;
  color: var(--ink);
}

.summary__box > summary::-webkit-details-marker {
  display: none;
}

.summary__box > summary::after {
  content: "+";
  font-style: normal;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--pencil);
}

.summary__box[open] > summary::after {
  content: "\2212";
}

.summary__box--static > summary {
  min-height: 0;
  padding-top: 0;
  cursor: default;
  pointer-events: none;
}

.summary__box--static > summary::after {
  display: none;
}

/* Telefonda "What's included" daha az boşlukla (ilk form alanı ilk ekranda kalsın) */
@media (max-width: 899px) {
  .summary__box {
    margin-top: var(--s3);
  }

  .summary__box > summary {
    min-height: 44px;
  }
}

/* çok dar telefon (320): sağ sütun ad + fiyat için dar kalıyor */
@media (max-width: 359px) {
  .summary__name {
    font-size: 1.25rem;
  }

  .summary__price,
  .summary__price .price {
    font-size: 1.125rem;
  }
}

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

.summary__box--static .summary__list {
  padding-top: var(--s2);
}

.summary__list li {
  padding: 3px 0;
  font-size: 1.0625rem;
  line-height: 1.5;
}

/* takvim: ortak .calendar paragrafı, burada çizgisiz düz yazı */
.summary__calendar {
  margin: 0;
  padding-top: 0;
  max-width: none;
  border-top: 0;
}

/* --------------------------------------------------------------------------
   5. Form
   -------------------------------------------------------------------------- */
.checkout__form {
  display: grid;
  gap: var(--s5);
  align-content: start;
}

.checkout__form .field {
  margin: 0;
}

.checkout__optional {
  font-size: 0.875rem;
  color: var(--pencil);
}

/* adres alanları: iki sütun (şehir · bölge, posta kodu · ülke); telefonda tek */
.checkout__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s5);
}

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

  .checkout__grid .field--wide {
    grid-column: 1 / -1;
  }
}

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

/* "Recipient's address" ara başlığı: düz yazı (italik etiket değil) */
.checkout__group {
  margin: 0;
  font-size: 1.0625rem;
  color: var(--ink);
}

/* hediye kutusu: tek satır, çizgisiz; dokunma alanı ≥ 52px */
.checkout__gift-toggle {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.checkout__gift-toggle label {
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 56px;
  margin: 0;
  cursor: pointer;
  font-size: 1rem;
  color: var(--ink);
}

.checkout__gift-toggle input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--hair-strong);
  background: var(--page);
  cursor: pointer;
}

.checkout__gift-toggle input[type="checkbox"]::before {
  content: "";
  width: 14px;
  height: 14px;
  background: var(--btn-fg);
  clip-path: polygon(0 55%, 14% 41%, 38% 65%, 86% 14%, 100% 28%, 38% 93%);
  transform: scale(0);
}

.checkout__gift-toggle input[type="checkbox"]:checked {
  background: var(--btn-bg);
  border-color: var(--btn-bg);
}

.checkout__gift-toggle input[type="checkbox"]:checked::before {
  transform: scale(1);
}

/* Hediye alanları: yalnızca göster / gizle. (Eskiden max-height: 700px ile
   kesiliyordu ve "Gift note" görünmüyordu; artık yükseklik sınırı yok.) */
.checkout__gift-fields {
  display: none;
}

.checkout__gift-fields--visible {
  display: block;
}

.checkout__gift-inner {
  display: grid;
  gap: var(--s5);
}

/* düğme + üstündeki not + altındaki satır */
.checkout__actions {
  display: grid;
  gap: var(--s3);
}

/* "You'll be redirected to Gumroad…": düğmenin ÜSTÜNDE. Hata olunca bu satır
   hata cümlesine dönüşür (JS rengi verir); renk + sol çizgi + metin birlikte. */
.checkout__note {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.checkout__note--error {
  padding-left: var(--s3);
  border-left: 2px solid var(--color-error);
}

.checkout__submit {
  width: 100%;
  min-height: 52px;
  padding: 14px 24px;
  font-size: 1.0625rem;
}

.checkout__trust {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--pencil);
}

/* --------------------------------------------------------------------------
   6. Güvence: sayfada zaten olan dört cümle, çizgisiz düz paragraf
   -------------------------------------------------------------------------- */
.guarantee {
  padding-top: var(--s2);
}

.guarantee .guarantee__label {
  margin: 0 0 var(--s2);
  font-size: 1rem;
  color: var(--ink);
}

.guarantee p {
  margin: 0 0 var(--s2);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-2);
}

.guarantee p:last-child {
  margin-bottom: 0;
}

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

/* --------------------------------------------------------------------------
   7. Alt bölüm: ortak footer'ın bu sayfaya kırpılmış hâli (bülten ve sosyal
      bağlantı yok). Telefonda bağlantılar parmakla rahat vurulsun (≥ 44px).
   -------------------------------------------------------------------------- */
/* Yatay boşluk ve kenar boşluğu ortak kuraldan gelir (styles.css, "Dokunma
   hedefleri"): telefonda her bağlantının 10px yan dolgusu var ve satırın
   -10px kenar boşluğu yazıyı logonun sol kenarına oturtur. Burada yalnız
   yükseklik sabitlenir (her genişlikte ≥ 44px, yazı dikey ortada); yan dolguya
   ve `gap`e dokunulmaz. Önceden `padding: 11px 0` yan dolguyu siliyordu,
   negatif kenar boşluğu kalıyordu ve yazılar 10px sola kayıyordu. */
.checkout-page .footer__nav a,
.checkout-page .footer__email a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 0;
}

.checkout-page .footer__top {
  padding-bottom: var(--s5);
}

/* --------------------------------------------------------------------------
   8. Hediye kutusu: dokunma hedefi ≥ 44px (telefon / tablet / dokunmatik)
   Görünen kare yine 24×24 (1px kenar, aynı dolgu, aynı onay işareti); onay
   kutusunun KENDİ kutusu 44×44 olur, −10px kenar boşluğu satırdaki yerini
   (24px) ve etiketle arasındaki boşluğu aynı tutar. Kenar ve dolgu artık
   kutunun kendisinde değil ::after'dadır; ::before onay işareti olarak
   kalır (üstte). Odak halkası da görünen kareyi sarar (44px'lik görünmez
   kutuyu değil; ortak `input:focus` halkasıyla aynı: 2px, 1px dışarıda).
   Etiket zaten tıklanabilir ve 56px yüksek.
   -------------------------------------------------------------------------- */
@media (max-width: 899px), (pointer: coarse) {
  .checkout__gift-toggle input[type="checkbox"] {
    width: 44px;
    height: 44px;
    margin: -10px;
    border: 0;
    background: transparent;
  }

  .checkout__gift-toggle input[type="checkbox"]:checked {
    border-color: transparent;
    background: transparent;
  }

  .checkout__gift-toggle input[type="checkbox"]::after {
    content: "";
    grid-area: 1 / 1;
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    border: 1px solid var(--hair-strong);
    background: var(--page);
  }

  .checkout__gift-toggle input[type="checkbox"]:checked::after {
    border-color: var(--btn-bg);
    background: var(--btn-bg);
  }

  .checkout__gift-toggle input[type="checkbox"]::before {
    grid-area: 1 / 1;
    place-self: center;
    z-index: 1;
  }

  /* odak halkası: ortak `input:focus` kuralı (styles.css) 2px mavi halkayı
     1px dışarıda, ":focus" ile (fareyle de) çizer; aynısı görünen karede kalsın */
  .checkout__gift-toggle input[type="checkbox"]:focus {
    outline: none;
  }

  .checkout__gift-toggle input[type="checkbox"]:focus::after {
    outline: 2px solid var(--link);
    outline-offset: 1px;
  }
}