/* Kerem HI — page layout + responsive rules.
   Component internals live in ds/components.js (inline styles);
   the !important overrides below are the mobile escape hatch for those. */

/* NavBar sticky; yüksekliği padding'e bağlı, mobilde küçülüyor. */
:root { --nav-h: 55px; }

.hi-section {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 96px var(--page-gutter) 0 var(--page-gutter);
}

/* HERO */
.hero-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 88px var(--page-gutter) 72px var(--page-gutter);
}
.hero-title {
  font: var(--text-hero);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 24px 0 0 0;
  color: var(--text-primary);
}
.hero-twist {
  font: italic 400 62px var(--font-serif);
  text-transform: none;
  color: var(--accent);
}
.hero-body {
  font: var(--text-body);
  color: var(--text-muted);
  max-width: 540px;
  margin: 26px 0 0 0;
}
.hero-ctas {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 36px;
}

/* Menüden bölüme geçiş kayarak olsun. NavBar sticky olduğu için hedef bölüm
   navın altında kalmasın: pay = nav yüksekliği + nefes payı. */
html { scroll-behavior: smooth; }
.hi-section { scroll-margin-top: calc(var(--nav-h) + 24px); }

/* Hareket hassasiyeti olan kullanıcılarda animasyon istemiyoruz. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* GRIDS */
.plans-grid { display: grid; gap: 16px; }
.plans-grid.top { grid-template-columns: repeat(3, 1fr); margin-top: 40px; }
.plans-grid.bottom { grid-template-columns: repeat(2, 1fr); margin-top: 16px; }
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }

/* Testimonial (bundle component): alıntılar farklı satır sayısında olduğu için
   yazar/rol bloğu kartın altına yaslanır — üç kartta da aynı hizada durur. */
.testi-grid > div { display: flex; flex-direction: column; }
.testi-grid > div > div:first-child { flex: 1; }

/* PlanCard (bundle component): rozet absolute konumlanır, bundle da boşluğu
   yalnızca rozetli kartlarda ayırır. Rozetsiz kartlar 20px yukarı kayıyordu.
   Rozet <span>, başlık ilk <div> — boşluğu her kartta ayır. */
.plans-grid > div > div:nth-of-type(1) { margin-top: 20px !important; }

/* Fiyat notu bir ya da iki satır olabiliyor; tek satırlık notu olan kartın
   özellik listesi yukarı kaçıyordu. İki satırlık taban yükseklik ver. */
.plans-grid > div > div:nth-of-type(2) > div:last-child {
  min-height: 41px;
  min-height: 2lh;
}

.spec-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border-default);
}

/* TABLET */
@media (max-width: 1023px) {
  .plans-grid.top { grid-template-columns: repeat(2, 1fr); }
  .testi-grid { grid-template-columns: repeat(2, 1fr); }
}

/* MOBILE */
@media (max-width: 719px) {
  :root { --page-gutter: 20px; --nav-h: 43px; }

  .hi-section { padding-top: 64px; }
  .hero-inner { padding-top: 56px; padding-bottom: 48px; }
  .hero-title { font: 800 42px/1 var(--font-display); letter-spacing: -0.01em; text-transform: uppercase; }
  .hero-twist { font: italic 400 40px var(--font-serif); }

  .plans-grid.top, .plans-grid.bottom, .testi-grid { grid-template-columns: 1fr; }
  .spec-row { grid-template-columns: 1fr; gap: 6px; }

  /* NavBar (bundle component — inline styles need !important) */
  .hi-nav { padding: 14px var(--page-gutter) !important; }
  .hi-nav-links { gap: 14px !important; }

  /* StatStrip 4'lü şerit -> 2x2 */
  .hero-stats > div { grid-template-columns: repeat(2, 1fr) !important; }
  .hero-stats > div > div { border-right: none !important; padding-left: 0 !important; padding-bottom: 14px; }

  /* Changelog: sürüm kolonu daralt */
  .changelog-list > div { grid-template-columns: 84px 1fr !important; gap: 16px !important; }

  /* Karşılaştırma tablosu: kolonlara min genişlik ver, tablo yana kaydırılsın */
  .hi-compare .hi-compare-grid {
    grid-template-columns: minmax(124px, 1.4fr) repeat(5, minmax(96px, 1fr)) !important;
  }
  .hi-compare .hi-compare-grid > div:first-child { padding-left: 12px !important; padding-right: 12px !important; }

  /* Section başlıkları */
  .hi-section h2 { font-size: 32px !important; }
  .hi-section h2 span { font-size: 31px !important; }
}

@media (max-width: 479px) {
  .hi-nav-link { display: none; }
}