/* ====================================================
   GÜVENLİ ALIŞVERİŞ — özel landing page
   Sitenin kendi marka dili (renk/font/spacing/grid-12) üzerine kurulu
   editorial/luxury bir sayfa. Mimari/içerik/ikon sabit — bu dosya
   sadece görsel cila: tipografi, boşluk, hover, tablet/mobil ayrımı.
   ==================================================== */

/* Tüm section'lar aynı (beyaz) zeminde — ayrım renk yerine ince üst border ile yapılır. */
.ga-trust, .ga-editorial, .ga-timeline, .ga-package, .ga-split, .ga-why, .ga-faq.faq, .ga-cta {
  border-top: 1px solid var(--renk-cizgi);
}

.ga-eyebrow {
  display: inline-block; font-size: var(--fs-13); font-weight: var(--fw-semibold);
  letter-spacing: .16em; text-transform: uppercase; color: var(--renk-marka);
  margin-bottom: var(--space-24);
}
.ga-h2 {
  font-family: var(--font-baslik); font-size: clamp(34px, 3.8vw, 58px);
  line-height: 1.15; color: var(--renk-metin); margin-bottom: var(--space-28);
}
.ga-h2--center { text-align: center; margin-bottom: 72px; }
.ga-h3 { font-family: var(--font-baslik); font-size: var(--fs-28); line-height: 1.25; color: var(--renk-metin); margin-bottom: var(--space-18); }
.ga-p { font-size: var(--fs-16); line-height: 1.85; color: var(--renk-metin-soft); max-width: 460px; }

.ga-link {
  display: inline-flex; align-items: center; gap: var(--space-10); font-size: var(--fs-15);
  font-weight: var(--fw-semibold); color: var(--renk-metin); text-decoration: none;
  border-bottom: 1.5px solid var(--renk-marka); padding-bottom: 3px;
  transition: color .3s ease, gap .3s ease, border-color .3s ease;
}
.ga-link:hover { color: var(--renk-marka); gap: var(--space-14); }
.ga-link .icon { width: 16px; height: 16px; transition: transform .3s ease; }
.ga-link:hover .icon { transform: translateX(2px); }

/* Görsel placeholder */
.ga-ph {
  border: 1px solid var(--renk-cizgi); border-radius: var(--radius);
  background: var(--renk-soft); display: flex; align-items: center; justify-content: center;
  color: var(--renk-metin-soft); font-size: var(--fs-13); letter-spacing: .04em;
}
.ga-ph--45 { aspect-ratio: 4 / 5; }
.ga-ph--sq { aspect-ratio: 1 / 1; }

/* İkon placeholder */
.ga-ic {
  width: 56px; height: 56px; border-radius: var(--radius-full); background: var(--renk-panel-2);
  display: flex; align-items: center; justify-content: center; color: var(--renk-marka);
  font-size: var(--fs-11); margin-bottom: var(--space-24);
  transition: background .35s ease, color .35s ease, transform .35s ease;
}
/* Yüklenen ikon SVG/PNG'leri, orijinal renginden (stroke/fill) bağımsız olarak marka
   rengine boyanır — <span> üzerinde mask kullanılır, gerçek img pikseli olmadığı için
   sadece mask'in şekli görünür, rengi tamamen background-color'dan gelir. */
.ga-ic__img {
  display: block; width: 55%; height: 55%;
  -webkit-mask-image: var(--ic-src); mask-image: var(--ic-src);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  background-color: var(--renk-marka);
}
.ga-trust__card:hover .ga-ic__img { background-color: var(--renk-beyaz); }
.ga-ic--sm { width: 40px; height: 40px; font-size: var(--fs-11); margin-bottom: 0; }
.ga-ic--lg { width: 76px; height: 76px; font-size: 12px; }

/* Premium checklist — tüm bölümlerde ortak, daha nefes alan dikey ritim */
.ga-checklist { list-style: none; padding: 0; margin: var(--space-56) 0 var(--space-44); display: flex; flex-direction: column; gap: var(--space-24); }
.ga-checklist li { display: flex; align-items: center; gap: var(--space-16); font-size: var(--fs-16); color: var(--renk-metin); line-height: 1.4; }
.ga-check-ic {
  width: 26px; height: 26px; border-radius: var(--radius-full); background: var(--renk-koyu); color: var(--renk-beyaz);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ga-check-ic .icon { width: 12px; height: 12px; }

/* ---------- 1. HERO ---------- */
.ga-hero { padding: 30px 0; overflow-x: hidden; }
.ga-hero__grid { grid-template-columns: repeat(12, 1fr); align-items: center; display: grid; gap: var(--grid-gap); min-height: 680px; }
.ga-hero__content { grid-column: 1 / 6; min-width: 0; }
.ga-hero__media { grid-column: 6 / 13; }
.ga-hero__title {
  font-family: var(--font-baslik); font-size: clamp(34px, 3.4vw, 52px); line-height: 1.15;
  color: var(--renk-metin); max-width: 440px; margin-bottom: var(--space-36);
  overflow-wrap: break-word;
}
.ga-hero__desc { font-size: var(--fs-18); line-height: 1.85; color: var(--renk-metin-soft); max-width: 420px; margin-bottom: var(--space-54); }
.ga-hero__content .btn { padding: 18px 40px; margin-bottom: 72px; transition: transform .3s ease, box-shadow .3s ease, background .3s ease; }
.ga-hero__content .btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }

/* Trust badge'leri — yumuşak pill görünümü */
.ga-hero__badges { display: flex; gap: var(--space-16); flex-wrap: wrap; }
.ga-hero__badge {
  display: flex; align-items: center; gap: var(--space-10);
  padding: var(--space-10) var(--space-18) var(--space-10) var(--space-10);
  border-radius: var(--radius-pill); background: var(--renk-soft); border: 1px solid var(--renk-cizgi);
}
.ga-hero__badge .ga-ic--sm { width: 32px; height: 32px; background: var(--renk-beyaz); }
.ga-hero__badge span:last-child { font-size: var(--fs-12); font-weight: var(--fw-semibold); letter-spacing: .02em; color: var(--renk-metin-soft); }

/* ---------- 2. TRUST FEATURES ---------- */
.ga-trust { padding: 30px 0; }
.ga-trust__grid { grid-template-columns: repeat(12, 1fr); display: grid; gap: var(--grid-gap); }
.ga-trust__card {
  grid-column: span 3; border: 1px solid var(--renk-cizgi); border-radius: 20px;
  background: var(--renk-beyaz); padding: 52px 36px; min-height: 280px;
  display: flex; flex-direction: column;
  transition: box-shadow .4s cubic-bezier(.4,0,.2,1), transform .4s cubic-bezier(.4,0,.2,1), border-color .4s ease;
}
.ga-trust__card:hover { box-shadow: 0 28px 64px rgba(94,35,55,.16); transform: translateY(-8px); border-color: var(--renk-nude); }
.ga-trust__card .ga-ic { width: 64px; height: 64px; }
.ga-trust__card:hover .ga-ic { background: var(--renk-marka); color: var(--renk-beyaz); transform: scale(1.05); }
.ga-trust__title { font-size: var(--fs-20); font-weight: var(--fw-semibold); color: var(--renk-metin); margin-bottom: var(--space-14); }
.ga-trust__desc { font-size: var(--fs-15); line-height: 1.75; color: var(--renk-metin-soft); }

/* ---------- 3. EDİTORYAL — 60/40 oran, görsel odak ---------- */
.ga-editorial { padding: 30px 0; }
.ga-editorial__grid { grid-template-columns: repeat(12, 1fr); align-items: center; display: grid; gap: var(--grid-gap); }
.ga-editorial__media { grid-column: 1 / 8; }
.ga-editorial__media .ga-ph { aspect-ratio: 6 / 7; }
.ga-hero__img, .ga-editorial__img, .ga-package__img, .ga-cta__img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.ga-editorial__content { grid-column: 8 / 13; }
.ga-editorial__content .ga-h2 { margin-bottom: var(--space-24); }
.ga-editorial__content .ga-link { margin-top: var(--space-16); }

/* ---------- 4. TIMELINE — "Siparişinizin Yolculuğu": sade, minimal, sadece numara ---------- */
.ga-timeline { padding: 30px 0; }
.ga-timeline__head { text-align: center; margin-bottom: 80px; }
/* Diğer section başlıklarından bir tık daha küçük — hero başlığıyla karışmasın */
.ga-timeline__title-main { font-size: clamp(28px, 3vw, 44px); margin-bottom: var(--space-20); }
.ga-timeline__intro { font-size: var(--fs-16); line-height: 1.75; color: var(--renk-metin-soft); max-width: 460px; margin: 0 auto; }

/* 5 adım tam genişlikte, eşit aralıklarla dağıtılır — ilk ve son adım container kenarına dayanır (grid-column: span N ile 12 kolona tam bölünmediği için soldan/sağdan eşitsiz boşluk oluşuyordu, flex ile düzeltildi). */
.ga-timeline__track { display: flex; justify-content: space-between; position: relative; gap: var(--space-20); }
.ga-timeline__track::before {
  content: ""; position: absolute; top: 40px; left: 40px; right: 40px;
  height: 1px; background: linear-gradient(90deg, transparent, var(--renk-cizgi) 8%, var(--renk-cizgi) 92%, transparent); z-index: 0;
}
.ga-timeline__step {
  flex: 1 1 0; min-width: 0; text-align: center; display: flex; flex-direction: column; align-items: center;
  position: relative; z-index: 1; padding: var(--space-16); border-radius: var(--radius);
  transition: transform .35s ease, box-shadow .35s ease, background .35s ease;
}
.ga-timeline__step:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(94,35,55,.1); }
.ga-timeline__num {
  width: 80px; height: 80px; border-radius: var(--radius-full); background: var(--renk-beyaz);
  border: 1px solid var(--renk-cizgi); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-baslik); font-size: var(--fs-30); color: var(--renk-marka); margin-bottom: var(--space-28);
  transition: border-color .35s ease, background .35s ease, color .35s ease;
}
.ga-timeline__step:hover .ga-timeline__num { border-color: var(--renk-marka); background: var(--renk-marka); color: var(--renk-beyaz); }
.ga-timeline__title { font-size: 17px; font-weight: var(--fw-semibold); color: var(--renk-metin); margin-bottom: var(--space-10); }
.ga-timeline__desc { font-size: var(--fs-13); font-weight: var(--fw-light); line-height: 1.85; color: var(--renk-metin-soft); max-width: 180px; }

/* ---------- 4.5 PAKET ÖNİZLEME ---------- */
.ga-package { padding: 30px 0; }
.ga-package__grid { grid-template-columns: repeat(12, 1fr); align-items: center; display: grid; gap: var(--grid-gap); }
.ga-package__media { grid-column: 1 / 6; }
.ga-package__media .ga-ph { aspect-ratio: 4 / 5; }
.ga-package__content { grid-column: 7 / 13; }

/* ---------- 5. ÖDEME & KARGO ---------- */
.ga-split { padding: 30px 0; }
.ga-split__grid { grid-template-columns: repeat(12, 1fr); display: grid; gap: var(--grid-gap); }
.ga-split__card {
  grid-column: span 6; border: 1px solid var(--renk-cizgi); border-radius: var(--radius);
  background: var(--renk-beyaz); padding: 56px 48px; min-height: 420px; display: flex; flex-direction: column;
}
.ga-split__card .ga-p { min-height: calc(1.85em * 3); }
.ga-split__card .ga-checklist { margin-top: var(--space-28); margin-bottom: 0; gap: var(--space-18); }
.ga-split__card .ga-checklist li { min-height: calc(1.4em * 2); align-items: flex-start; }
.ga-split__card .ga-checklist .ga-check-ic { margin-top: 2px; }
/* Ödeme/kargo logoları — tek satırda 4 eşit parça (grid), taşarsa yeni satıra sarar. */
.ga-split__logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-14); margin-top: var(--space-44); }
.ga-split__logo {
  width: 100%; height: 52px; border: 1px solid var(--renk-cizgi); border-radius: var(--radius);
  background: var(--renk-beyaz); display: flex; align-items: center; justify-content: center;
  color: var(--renk-metin-soft); font-size: var(--fs-11); padding: var(--space-8);
}
.ga-split__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ---------- 6. NEDEN NIGHT OBSESSION — editorial bilgi karoları ---------- */
.ga-why { padding: 30px 0; }
.ga-why__grid { grid-template-columns: repeat(12, 1fr); display: grid; gap: var(--grid-gap); }
.ga-why__intro { grid-column: 1 / 5; }
.ga-why__cards { grid-column: 5 / 13; grid-template-columns: repeat(2, 1fr); display: grid; gap: var(--space-24); }
.ga-why__card {
  border: 1px solid var(--renk-cizgi); border-radius: 20px; background: var(--renk-beyaz); padding: 44px 36px;
  transition: box-shadow .4s cubic-bezier(.4,0,.2,1), transform .4s cubic-bezier(.4,0,.2,1), border-color .4s ease;
}
.ga-why__card:hover { box-shadow: 0 24px 52px rgba(94,35,55,.12); transform: translateY(-6px); border-color: var(--renk-nude); }
.ga-why__card .ga-ic { width: 52px; height: 52px; }
.ga-why__title { font-size: var(--fs-16); font-weight: var(--fw-semibold); color: var(--renk-metin); margin-bottom: var(--space-12); }
.ga-why__desc { font-size: var(--fs-14); line-height: 1.75; color: var(--renk-metin-soft); max-width: 220px; }

/* ---------- 7. SIKÇA SORULAN SORULAR — .faq/.faq-item deseni, ferah/pürüzsüz ---------- */
.faq.ga-faq { padding: 30px 0; }
/* 12 kolonluk grid içinde 1 kolon boşluk solda/sağda (2/12) — içerik 10 kolon kullanır */
.ga-faq .grid-12 { grid-template-columns: repeat(12, 1fr); display: grid; }
.ga-faq__inner { grid-column: 2 / 12; }
.faq__title { font-family: var(--font-baslik); font-size: var(--fs-42); color: var(--renk-metin); text-align: center; margin: 0 0 64px; }
.faq__title:has(+ .ga-faq__desc) { margin-bottom: 0; }
.ga-faq__desc { text-align: center; margin: 0 auto var(--space-32); max-width: 560px; line-height: 1.6; }
.faq__grid { display: flex; gap: var(--space-28); align-items: flex-start; }
.faq__col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-18); }
.faq-item {
  border: 1px solid var(--renk-cizgi); border-radius: var(--radius); background: var(--renk-beyaz); overflow: hidden;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.faq-item:hover { border-color: var(--renk-nude); box-shadow: 0 12px 32px rgba(94,35,55,.07); }
.faq-item__q {
  width: 100%; display: flex; align-items: center; gap: var(--space-18);
  padding: var(--space-28) var(--space-28); background: none; border: none; cursor: pointer;
  font-size: var(--fs-16); font-weight: var(--fw-semibold); color: var(--renk-metin); text-align: left;
}
.faq-item__q-ic {
  width: 38px; height: 38px; min-width: 38px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  background: var(--renk-soft); color: var(--renk-marka); transition: background .3s ease, color .3s ease;
}
.faq-item.is-open .faq-item__q-ic { background: var(--renk-marka); color: var(--renk-beyaz); }
.faq-item__q-ic .icon { width: 16px; height: 16px; }
.faq-item__q-text { flex: 1; }
.faq-item__chev { color: var(--renk-metin-soft); flex: 0 0 auto; transition: transform .4s cubic-bezier(.4,0,.2,1); }
.faq-item.is-open .faq-item__chev { transform: rotate(180deg); }
.faq-item__a { padding: 0 var(--space-28) var(--space-28); color: var(--renk-metin-soft); font-size: var(--fs-15); line-height: 1.85; }
.faq-item__a p { margin: 0; }

/* ---------- 8. CTA BANNER — sayfanın final premium beyanı ---------- */
.ga-cta { padding: 30px 0 80px; }
.ga-cta__grid {
  grid-template-columns: repeat(12, 1fr); display: grid; align-items: center; gap: var(--grid-gap);
  border: 1px solid var(--renk-cizgi); border-radius: var(--radius); background: var(--renk-panel);
  padding: 112px; min-height: 540px;
}
.ga-cta__content { grid-column: 1 / 8; }
.ga-cta__content .ga-h2 { font-size: clamp(36px, 4vw, 60px); margin-bottom: var(--space-28); }
.ga-cta__content .ga-p { margin-bottom: var(--space-44); font-size: var(--fs-18); }
.ga-cta__content .btn { padding: 20px 48px; font-size: var(--fs-16); transition: transform .3s ease, box-shadow .3s ease; }
.ga-cta__content .btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.ga-cta__media { grid-column: 8 / 13; }
.ga-cta__media .ga-ph { aspect-ratio: 4 / 3; }

/* ====================================================
   RESPONSIVE — TABLET (768px–989px): iki kolonlu bölümler dengeli
   yeniden kurulur, sadece küçültülmez.
   ==================================================== */
@media (min-width: 768px) and (max-width: 989px) {
  .ga-hero { padding: 48px 0; }
  .ga-hero__grid { min-height: 0; grid-template-columns: repeat(12, 1fr); gap: var(--space-36); }
  .ga-hero__content { grid-column: 1 / 13; text-align: center; }
  .ga-hero__desc { max-width: 560px; margin-left: auto; margin-right: auto; }
  .ga-hero__badges { justify-content: center; }
  .ga-hero__media { grid-column: 1 / 13; }
  .ga-hero__media .ga-ph { aspect-ratio: 16 / 9; }

  .ga-trust { padding: 40px 0; }
  .ga-trust__grid { grid-template-columns: repeat(2, 1fr); }
  .ga-trust__card { grid-column: span 1; min-height: 0; padding: 40px 32px; }

  .ga-editorial { padding: 40px 0; }
  .ga-editorial__grid { grid-template-columns: repeat(12, 1fr); }
  .ga-editorial__media, .ga-package__media { grid-column: 1 / 6; }
  .ga-editorial__content { grid-column: 6 / 13; }
  .ga-package__content { grid-column: 7 / 13; }

  .ga-timeline { padding: 40px 0; }
  .ga-timeline__track { flex-wrap: wrap; row-gap: 56px; }
  .ga-timeline__track::before { display: none; }
  .ga-timeline__step { flex: 0 0 calc(33.333% - var(--space-20) * 2 / 3); }

  .ga-package { padding: 40px 0; }

  .ga-split { padding: 40px 0; }
  .ga-split__card { padding: 56px 44px; min-height: 0; }

  .ga-why { padding: 40px 0; }
  .ga-why__grid { grid-template-columns: repeat(12, 1fr); }
  .ga-why__intro { grid-column: 1 / 13; text-align: center; margin-bottom: var(--space-20); }
  .ga-why__intro .ga-p { margin-left: auto; margin-right: auto; }
  .ga-why__cards { grid-column: 1 / 13; }

  .ga-faq { padding: 40px 0; }
  .faq__grid { flex-direction: column; }

  .ga-cta { padding: 60px 0 60px; }
  .ga-cta__grid { padding: 64px 48px; min-height: 0; grid-template-columns: repeat(12, 1fr); }
  .ga-cta__content { grid-column: 1 / 13; text-align: center; }
  .ga-cta__content .ga-p { margin-left: auto; margin-right: auto; }
  .ga-cta__media { grid-column: 3 / 11; }
}

/* ====================================================
   RESPONSIVE — MOBİL (max-width: 767px): okunabilirlik önceliği,
   büyük dokunma alanları, doğal akış.
   ==================================================== */
@media (max-width: 767px) {
  .ga-hero { padding: var(--space-32) 0; }
  .ga-hero__grid { min-height: 0; gap: var(--space-36); }
  .ga-hero__title { margin-bottom: var(--space-24); }
  .ga-hero__desc { margin-bottom: var(--space-36); }
  .ga-hero__content .btn { display: block; text-align: center; margin-bottom: var(--space-36); padding: 18px 32px; }
  .ga-hero__badges { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-12); }
  .ga-hero__badge { padding: var(--space-8) var(--space-14) var(--space-8) var(--space-8); }

  .ga-hero__grid, .ga-editorial__grid, .ga-package__grid, .ga-split__grid, .ga-why__grid, .ga-cta__grid { grid-template-columns: repeat(6, 1fr); gap: var(--space-28); }
  .ga-hero__content, .ga-hero__media,
  .ga-editorial__content, .ga-editorial__media,
  .ga-package__content, .ga-package__media,
  .ga-why__intro, .ga-why__cards,
  .ga-cta__content, .ga-cta__media { grid-column: 1 / 7; }
  .ga-editorial__media, .ga-package__media { order: -1; }

  .ga-h2 { font-size: clamp(28px, 8vw, 38px); }
  .ga-p { font-size: var(--fs-16); max-width: none; }
  .ga-checklist { gap: var(--space-18); margin: var(--space-28) 0 var(--space-32); }

  .ga-trust__grid { grid-template-columns: 1fr 1fr; gap: var(--space-14); }
  .ga-trust__card { grid-column: span 1; min-height: 0; padding: var(--space-28) var(--space-20); }
  .ga-trust__card:hover { transform: none; }

  .ga-timeline__track { flex-direction: column; gap: var(--space-36); }
  .ga-timeline__track::before { display: none; }
  .ga-timeline__step { flex: 1 1 auto; flex-direction: row; text-align: left; align-items: flex-start; gap: var(--space-20); }
  .ga-timeline__num { margin-bottom: 0; flex-shrink: 0; width: 58px; height: 58px; font-size: var(--fs-20); }
  .ga-timeline__desc { max-width: none; }
  .ga-timeline__head { margin-bottom: var(--space-44); }

  .ga-split__card { grid-column: 1 / 7; min-height: 0; padding: var(--space-44) var(--space-28); }
  .ga-split__card .ga-p { min-height: 0; }
  .ga-split__card .ga-checklist li { min-height: 0; align-items: center; }

  .ga-why__cards { grid-template-columns: repeat(2, 1fr); gap: var(--space-16); }
  .ga-why__card { padding: var(--space-24) var(--space-20); }
  .ga-why__desc { max-width: none; }

  .ga-cta__grid { padding: var(--space-44) var(--space-24); min-height: 0; }
  .ga-cta__content .btn { display: block; text-align: center; }

  .ga-trust, .ga-editorial, .ga-timeline, .ga-package, .ga-split, .ga-why, .ga-faq { padding: 40px 0; }
  .ga-cta { padding: 40px 0 48px; }

  .ga-faq .grid-12 { grid-template-columns: 1fr; }
  .ga-faq__inner { grid-column: 1; }
  .faq__grid { flex-direction: column; }
  .faq__title { font-size: var(--fs-28); margin-bottom: var(--space-36); }
  .faq__title:has(+ .ga-faq__desc) { margin-bottom: 0; }
  .ga-faq__desc { margin-bottom: var(--space-32); max-width: none; }
  .faq-item__q { padding: var(--space-20) var(--space-20); min-height: 64px; }
  .faq-item__a { padding: 0 var(--space-20) var(--space-20); }
}