/* ============================================
   GRAPHITE POST: css/pages/gift-card.css  ("Katalog")
   ============================================
   Yazdırılabilir hediye kartı (gift-card.html) ve aynı kartın küçük örneği
   (gift.html, #card bölümü, o sayfa bu dosyayı da bağlar). Ortak şeyler
   (token, düğme, form alanı, bağlantı) css/styles.css'te. Kural:
   TASARIM_DILI.md.

   KART BİR FİZİKSEL NESNEDİR (kâğıda basılır): ekranda da, gece modunda da,
   kâğıtta da aynı kâğıt beyazı + koyu mürekkep. Bu yüzden kartın renkleri
   sayfa token'larını (--page, --ink: gece modunda tersine döner) DEĞİL,
   aşağıdaki kart-yerel değerleri kullanır (zarfın --env-* renkleri gibi,
   bkz. index.css). Kartta tek gerçek öğe: sanatçının el yazısı logosu
   (web-optimized/logo-nav-3x.png). Çizim/plaka YOK: hangi çizimin yola
   çıkacağı bilinmeden karta bir çizim koymak söz vermek olur.

   Kartın içinde de site kuralı geçerli: italik etiket yok (yalnız eser adı
   italik olur), iç çizgi yok. Yalnız dış kenar çizgisi kalır: kâğıt kenarı,
   sayfa zemininde görünsün diye.

   Kartın içindeki her ölçü kartın kendi genişliğine bağlıdır (cqw), bu yüzden
   ekrandaki önizleme ile kâğıttaki baskı aynı orantıdadır.
   ============================================ */

/* --------------------------------------------------------------------------
   1. Sayfa: tek sütun. Etiket sütunu yok, çizgi yok, italik etiket yok.
   Sıra (telefonda da masaüstünde de aynı): geri bağlantısı, başlık, giriş
   cümlesi, kart (nesne ilk ekranda), alanlar, çıkış.
   -------------------------------------------------------------------------- */
.giftcard-page {
  padding-top: var(--s6);
  padding-bottom: var(--section);
}

.giftcard-page__back {
  display: inline-block;
  margin-bottom: var(--s5);
  font-size: var(--fs-small);
}

.giftcard-page h1 {
  margin: 0 0 var(--s3);
}

.giftcard-page__subtitle {
  max-width: var(--measure);
  margin: 0 0 var(--s7);
  color: var(--ink-2);
}

/* Kartın genişliği = alanların genişliği: tek sütun, soldan hizalı. 40rem
   (640px): kartın gerçek boyutuna (7 inç ≈ 672px) yakın, yani ekrandaki kart
   kâğıttakiyle aynı büyüklükte okunur. */
.giftcard-layout {
  display: grid;
  grid-template-columns: minmax(0, 40rem);
  grid-template-areas:
    "card"
    "editor";
  row-gap: var(--s6);
  align-items: start;
}

.giftcard-preview-wrap {
  grid-area: card;
}

.giftcard-editor {
  grid-area: editor;
}

/* İki ad yan yana, ay seçimi ve düğme tam genişlikte: form kartın altında
   kısa kalır, kart yazarken ekranda görünür kalır. */
@media (min-width: 600px) {
  .giftcard-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--s5);
  }

  .giftcard-editor > .field:nth-child(3),
  .giftcard-editor > .giftcard-editor__print,
  .giftcard-editor > .giftcard-editor__note {
    grid-column: 1 / -1;
  }

  .giftcard-editor > .giftcard-editor__print {
    justify-self: start;
  }
}

.giftcard-editor .field {
  margin-bottom: var(--s5);
}

.giftcard-editor__print {
  min-height: 46px;
  padding: 12px 28px;
}

.giftcard-editor__note {
  margin: var(--s4) 0 0;
  max-width: 30rem;
}

/* Çıkış: gift.html'in kapanış sorusunun aynısı; düz yazı ve iki bağlantı,
   çizgi yok. Baskıda gizli (yalnız kart basılır). */
.giftcard-close {
  margin-top: clamp(80px, 10vw, 144px);
}

.giftcard-close__title {
  max-width: 20ch;
  margin: 0 0 var(--s3);
  font-size: var(--fs-h3);
}

.giftcard-close .giftcard-close__note {
  margin: 0 0 var(--s3);
}

.giftcard-close .giftcard-close__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s6);
  margin: 0;
}

/* --------------------------------------------------------------------------
   2. Kart
   -------------------------------------------------------------------------- */
.giftcard-card {
  --card-paper: #FBFBF9;
  --card-ink: #1F1F1F;       /* = --ink (açık tema); kart basılı nesne, koyu modda ters dönmez */
  --card-ink-2: #4A4A4A;     /* = --ink-2 (açık tema) */
  --card-hair: rgba(31, 31, 31, 0.46);

  container-type: inline-size;
  display: grid;
  width: 100%;
  max-width: 40rem;
  aspect-ratio: 7 / 5;
  background: var(--card-paper);
  color: var(--card-ink);
  border: 1px solid var(--card-hair);
}

.giftcard-card p {
  margin: 0;
}

.giftcard-card__inner {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 24px 28px 22px;                  /* cqw desteklemeyen eski tarayıcılar için */
  padding: 5.5cqw 6cqw 5cqw;
}

.giftcard-card__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  gap: 4cqw;
  padding-bottom: 14px;
  padding-bottom: 3.2cqw;
}

.giftcard-card__logo {
  width: 110px;
  width: 24cqw;
  height: auto;
  flex: none;
}

.giftcard-card__eyebrow {
  font-size: 0.8125rem;
  font-size: max(0.75rem, 2.8cqw);
  line-height: 1.3;
  text-align: right;
  color: var(--card-ink-2);
}

.giftcard-card__main {
  align-self: center;
  padding: 12px 0;
  padding: 3cqw 0;
}

.giftcard-card__for-label,
.giftcard-card__from-label {
  font-size: 0.8125rem;
  font-size: max(0.75rem, 2.8cqw);
  line-height: 1.3;
  color: var(--card-ink-2);
}

.giftcard-card__for-name {
  margin-top: 0.6cqw;
  font-size: 1.75rem;
  font-size: max(1.5rem, 7.4cqw);
  line-height: 1.1;
  overflow-wrap: anywhere;
  color: var(--card-ink);
}

.giftcard-card__message {
  max-width: 34ch;
  margin-top: 14px;
  margin-top: 3.4cqw;
  font-size: 0.875rem;
  font-size: max(0.8125rem, 3.3cqw);
  line-height: 1.5;
  color: var(--card-ink-2);
}

.giftcard-card__month {
  color: var(--card-ink);
}

.giftcard-card__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  gap: 4cqw;
  padding-top: 14px;
  padding-top: 3.2cqw;
}

.giftcard-card__from {
  min-width: 0;
  font-size: 1rem;
  font-size: max(0.9375rem, 3.6cqw);
  line-height: 1.3;
  overflow-wrap: anywhere;
  color: var(--card-ink);
}

.giftcard-card__from-label {
  margin-right: 1.2cqw;
}

.giftcard-card__url {
  flex: none;
  font-size: 0.8125rem;
  font-size: max(0.75rem, 2.8cqw);
  color: var(--card-ink-2);
}

/* Küçük örnek (gift.html): aynı kart, daha dar sütunda */
.giftcard-card--sample {
  max-width: 30rem;
}

/* --------------------------------------------------------------------------
   3. Baskı
   Yalnız kart basılır: başlık, alt bölüm, alanlar, çerez bandı DISPLAY:NONE
   (visibility:hidden yer kaplar ve boş sayfa üretir). Kart 7×5 inç; Letter
   ve A4'ün yazdırılabilir genişliğine (≥ 184 mm) sığar. Renkler zaten kağıt
   güvenli; yalnız sayfa zeminini beyaza zorla (gece modundaki koyu zemin
   "arka plan grafikleri" açıksa kartın çevresine sızmasın).
   -------------------------------------------------------------------------- */
@page {
  margin: 0.5in;
}

@media print {
  /* color-scheme: dark (gece modu) tuvalin rengini de koyulaştırır; sayfa
     kenar boşlukları dahil her şey beyaz kalsın */
  html,
  html.dark-mode {
    color-scheme: light !important;
    background: #ffffff !important;
  }

  body.giftcard {
    background: #ffffff !important;
    color: #1F1F1F !important;
  }

  body.giftcard > *:not(main) {
    display: none !important;
  }

  body.giftcard .giftcard-page {
    max-width: none;
    padding: 0;
  }

  body.giftcard .giftcard-page > *:not(.giftcard-layout) {
    display: none !important;
  }

  body.giftcard .giftcard-layout {
    display: block;
  }

  body.giftcard .giftcard-editor {
    display: none !important;
  }

  body.giftcard .giftcard-card {
    width: 7in;
    max-width: none;
    height: 5in;
    aspect-ratio: auto;
    margin: 0 auto;
    background: #ffffff;
    break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* Çıkış bağlantıları: dokunma kutusu ≥ 44px (yazı ve altı çizgi aynı kalır) */
@media (max-width: 899px), (pointer: coarse) {
  .giftcard-close__links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* --------------------------------------------------------------------------
   Dokunma hedefi (telefon / tablet / dokunmatik): ≥ 44px
   "Back to Gift Subscriptions": kutu büyür, aynı kadar negatif kenar boşluğu
   yerleşimi (22,4 + 24px) ve taban çizgisini aynı tutar.
   -------------------------------------------------------------------------- */
@media (max-width: 899px), (pointer: coarse) {
  .giftcard-page__back {
    padding-block: 11px;     /* 22,4 + 22 = 44,4px */
    margin-top: -11px;
    margin-bottom: calc(var(--s5) - 11px);
    position: relative;
  }

  /* klavye odak halkası yazının hemen çevresinde kalsın (inset = dolgu) */
  .giftcard-page__back:focus-visible {
    outline: none;
  }

  .giftcard-page__back:focus-visible::after {
    content: "";
    position: absolute;
    inset: 11px 0;
    outline: 2px solid var(--link);
    outline-offset: 3px;
  }
}