/* ============================================
   GRAPHITE POST: css/pages/gift.css
   ============================================
   Yalnız hediye sayfası (gift.html). Ortak şeyler (token, düğme, bağlantı,
   photo, section-title, note) css/styles.css'te. Kural: TASARIM_DILI.md.

   Sayfanın asıl nesnesi: vellum'a sarılı, elde tutulan paketin fotoğrafı.
   O büyük durur; çevresi sessizdir. Sayfa sırası: hero (#hero: başlık üstte
   tek başına; altında solda yazı + üç seçenek, sağda büyük fotoğraf) →
   alt yarı (.gift-lower: yazdırılabilir kart #card ve nasıl işler #how; ay
   seçimi, gönderim günü, teslim süreleri ve bir fotoğraf; eskiden #how ve
   #shipping iki bölümdü ve aynı şeyi söylüyordu) → kapanış (#cta).

   Hero ana sayfa hero'sunun aynası DEĞİL: orada fotoğraf solda ve başlık yan
   sütunda; burada başlık iki sütunun üstünde, kendi satırında. Telefonda sıra
   işaretleme sırası (başlık, giriş, seçenekler, not, fotoğraf): ilk "Give 3
   months" düğmesi ilk ekranda (390×844, altta ~110px çerez bandının üstünde).
   Telefonda düğmeler sütun genişliğinde (ana sayfadaki teklif düğmeleri gibi).

   Bölümler aynı biçimde DEĞİL, her biri içeriğinin biçiminde:
     #card + #how  telefonda alt alta (yazı, sonra nesne). Masaüstünde YAN YANA,
                   nesne önce: solda gerçek kartın örneği, sağda gerçek fotoğraf,
                   ikisi aynı çizgiden başlar (aynı genişlik, aynı 4:3 kutu);
                   altlarında kendi yazıları. Sağ yarı artık boş değil.
     #cta          iki düğme, tek satır (güvence bağlantısı)
   Bölümler arasında çizgi YOK; boşluk ayırır ve her boşluk farklıdır.

   Bölüm id'leri (#options, #card, #cta) DEĞİŞMEZ: main.js, bağlantı kaynağı
   etiketini (?src=gift-…) en yakın id'den üretir. Seçenekler #options içinde
   durur (etiket: gift-options), kapanış #cta (gift-cta).
   ============================================ */

main {
  /* Hero: solda yazı ve seçenekler, sağda fotoğraf (başlık ikisinin üstünde, tek başına) */
  --gift-cols: minmax(0, 5fr) minmax(0, 7fr);
  --gift-gap: clamp(32px, 4vw, 56px);
}

/* Rakam aralığı ("5-10") tire yerinden bölünmesin */
.nb {
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   1. Hero. Başlık sayfanın en üstünde, kendi satırında (ana sayfa hero'su gibi
   "fotoğraf + yan yana başlık" değil). Telefonda sıra: başlık, giriş paragrafı,
   seçenekler, not, fotoğraf (işaretleme sırası): ilk "Give 3 months" düğmesi
   ilk ekranda. Masaüstünde başlığın altında iki sütun: solda yazı + seçenekler,
   sağda büyük fotoğraf (elin uzattığı paket seçeneklere doğru).
   -------------------------------------------------------------------------- */
.gift-hero {
  padding: var(--s5) 0 clamp(72px, 9vw, 128px);
}

.gift-hero__title {
  max-width: 16em;
  margin: 0 0 var(--s5);
  font-size: var(--fs-h1);
  line-height: 1.12;
  text-wrap: balance;
}

/* .gift-hero öneki: ortak `p:last-child` (özgüllük 0,1,1) alt boşluğu sıfırlamasın */
.gift-hero .gift-hero__desc {
  max-width: 34rem;
  margin: 0 0 var(--s6);
  color: var(--ink-2);
}

.gift-hero .gift-hero__note {
  margin: var(--s6) 0 0;
  max-width: 34rem;
}

.gift-hero__photo {
  max-width: 44rem;
  margin: var(--s7) 0 0;
}

/* Telefonda başlık 32px'te dört satıra bölünüyordu ("hand-drawn" bölünmez, "every
   month," ve "for a while." ayrı satırlara düşüyordu); 28px'te üç satır. Geniş
   ekranda boyut ortak h1 ölçüsünde kalır. */
@media (max-width: 479px) {
  .gift-hero__title {
    font-size: 1.75rem;
  }
}

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

  .gift-hero__grid {
    display: grid;
    grid-template-columns: var(--gift-cols);
    grid-template-areas:
      "title title"
      "text  photo";
    column-gap: var(--gift-gap);
    align-items: start;
  }

  .gift-hero__title {
    grid-area: title;
    margin-bottom: var(--s7);
  }

  .gift-hero__text {
    grid-area: text;
  }

  .gift-hero__photo {
    grid-area: photo;
    max-width: none;
    margin: 0;
  }
}

/* Seçenekler: düz bloklar. Kart yok, çizgi yok, fiyat tablosu yok; her blok
   bir ad + fiyat satırı, bir cümle, bir düğme. Bloklar yalnız boşlukla ayrılır.
   İki abonelik (3 / 6 ay) yan yana, tek baskı altta ayrı (telefonda hepsi alt alta). */
.gift-options {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s6) var(--s5);
}

@media (min-width: 600px) {
  .gift-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gift-option--single {
    grid-column: 1 / -1;
  }
}

.gift-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.gift-option__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--s4);
  margin: 0 0 var(--s2);
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: 0;
}

.gift-option__head .price {
  font-size: inherit;
}

.gift-option .gift-option__text {
  max-width: 30rem;
  margin: 0 0 var(--s4);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-2);
}

.gift-option .btn {
  min-height: 46px;
  padding: 12px 28px;
}

/* Telefon: düğmeler sütun genişliğinde (ana sayfadaki `.offer__actions .btn`
   ile aynı: blok, %100). Yan yana duran iki düğme yerine her biri kendi
   satırında; parmak için geniş hedef. */
@media (max-width: 599px) {
  .gift-option .btn {
    display: block;
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   2. Bölümler: ortak iskelet yok; yalnız başlık boşluğu ve bölümler arası
   boşluk (her biri farklı)
   -------------------------------------------------------------------------- */
.gift-band .gift-band__title {
  margin: 0 0 var(--s5);
}

/* --- Yazdırılabilir kart: tek sütun --- */
.gift-handover .gift-handover__text {
  max-width: var(--measure);
  margin: 0 0 var(--s6);
}

.gift-handover__card {
  max-width: 30rem;
  margin: 0 0 var(--s6);
}

.gift-handover .gift-handover__action {
  margin: 0;
}

/* --- Nasıl işler: dört kısa paragraf, altında gerçek bir fotoğraf (telefonda
   tek sütun, #card'ın altında; masaüstünde #card'ın yanında, aşağıda) --- */
.gift-how {
  margin-top: clamp(72px, 9vw, 128px);
}

.gift-how__text p {
  max-width: var(--measure);
  margin-bottom: var(--s4);
}

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

.gift-how__photo {
  width: min(100%, 28rem);
  margin: var(--s6) 0 0;
}

/* Telefon: kart düğmesi de sütun genişliğinde (yukarıdaki seçenek düğmeleriyle aynı) */
@media (max-width: 599px) {
  .gift-handover__action .btn {
    display: block;
    width: 100%;
  }
}

/* Alt yarı, masaüstü (≥900): #card ve #how YAN YANA, iki eşit sütun. Eskiden ikisi
   tek dar sütunda alt alta duruyordu (kart 30rem, fotoğraf 28rem) ve sağ yarı
   boştu. Şimdi her sütunda NESNE ÖNCE (flex `order`; DOM sırası telefon sırası
   olarak kalır: yazı, sonra nesne), altında kendi başlığı ve yazısı. İki nesne
   aynı genişlikte ve aynı 4:3 kutuda (fotoğraf 1600×1200; kart 7:5, kutunun
   üstüne oturur, altında ~%5'lik pay kalır): aynı çizgiden başlar, iki başlık
   da aynı yüksekliğe düşer. Kartın kenarı ve kâğıdı basılı nesne olarak kalır
   (gift-card.css, yazdırılabilir nesne istisnası); yalnız boyutu büyür. Sütun
   boyu farkı (#how'un yazısı daha uzun) doğal: sütunlar kendi başına biter,
   aralarında çizgi ya da dolgu hilesi yok. */
@media (min-width: 900px) {
  .gift-lower {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gift-gap);
    align-items: start;
  }

  .gift-lower .gift-band {
    display: flex;
    flex-direction: column;
  }

  /* yan yana: ikincinin üstünde telefondaki bölüm boşluğu yok */
  .gift-lower .gift-how {
    margin-top: 0;
  }

  .gift-handover__card,
  .gift-how__photo {
    order: -1;
    width: 100%;
    margin: 0 0 var(--s7);
  }

  .gift-handover__card {
    max-width: none;
    aspect-ratio: 4 / 3;
  }

  /* gift-card.css `.giftcard-card--sample { max-width: 30rem }` (0,1,0); bu seçici
     (0,2,0) sütunu doldurur. Kart cqw ile ölçeklenir: yazı oranı değişmez. */
  .gift-handover__card .giftcard-card--sample {
    max-width: none;
  }
}

/* --------------------------------------------------------------------------
   3. Kapanış: iki çerçeveli düğme (dolgulu düğme sayfanın başında) ve güvence
   bağlantısı. Başlık yok: düğmeler kendi başına okunur.
   -------------------------------------------------------------------------- */
.gift-close {
  margin-top: clamp(64px, 8vw, 112px);
  padding-bottom: var(--section);
}

.gift-close__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}

.gift-close__actions .btn {
  min-height: 46px;
  padding: 12px 28px;
}

.gift-close .gift-close__guarantee {
  margin: var(--s4) 0 0;
}

/* Telefon: iki düğme alt alta, sütun genişliğinde (ana sayfadaki teklif
   düğmeleri gibi) */
@media (max-width: 599px) {
  .gift-close__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .gift-close__actions .btn {
    display: block;
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   4. Dokunma alanı (telefon / dokunmatik): cümle içi bağlantılar 17-21px
   yüksekliğindeydi. Satır kutusuna dokunmayan dikey dolgu (satır içi kutuda
   yerleşimi değiştirmez; sarılan bağlantıda her satır parçası büyür) alanı
   ≥44px yapar; yazı, altı çizgi ve satır aralığı aynı kalır. Düğmeler
   ≥44px.
   -------------------------------------------------------------------------- */
@media (max-width: 899px), (pointer: coarse) {
  .gift-hero__note a,
  .gift-close__guarantee a {
    padding-block: 14px;
  }

  .gift-option__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}