/* KSC R8 HERO BALANCE */
/* Ana sayfa hero alanını ekrana daha iyi sığdırır, üst boşluğu açar, auth başlığını dengeler. */

html body.ksc-r8-hero-balance {
  overflow-x: hidden !important;
}

/* Üst menü ile ilk çerçeve arasında boşluk */
html body.ksc-r8-hero-balance .hero,
html body.ksc-r8-hero-balance .intro,
html body.ksc-r8-hero-balance .book-hero,
html body.ksc-r8-hero-balance .auth-hero,
html body.ksc-r8-hero-balance [class*="hero"]:first-of-type {
  margin-top: 18px !important;
  padding-top: clamp(22px, 2.6vw, 34px) !important;
  padding-bottom: clamp(18px, 2.2vw, 28px) !important;
}

/* Ana sayfa büyük sol başlık - daha kompakt */
html body.ksc-r8-hero-balance .hero h1,
html body.ksc-r8-hero-balance .hero h1 *,
html body.ksc-r8-hero-balance .intro h1,
html body.ksc-r8-hero-balance .intro h1 *,
html body.ksc-r8-hero-balance [class*="hero"] h1,
html body.ksc-r8-hero-balance [class*="hero"] h1 *,
html body.ksc-r8-hero-balance [class*="headline"],
html body.ksc-r8-hero-balance [class*="headline"] * {
  font-size: clamp(28px, 3.1vw, 42px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.025em !important;
  max-width: 670px !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* Sol açıklama metni ve alıntı alanı sıkışmasın */
html body.ksc-r8-hero-balance .hero p,
html body.ksc-r8-hero-balance .intro p,
html body.ksc-r8-hero-balance [class*="hero"] p {
  max-width: 690px !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

html body.ksc-r8-hero-balance blockquote,
html body.ksc-r8-hero-balance .quote,
html body.ksc-r8-hero-balance [class*="quote"] {
  padding-top: 18px !important;
  padding-bottom: 16px !important;
}

/* Sağ auth kartı ve başlığı */
html body.ksc-r8-hero-balance .ksc-public-auth-card,
html body.ksc-r8-hero-balance .ksc-public-auth-shell {
  max-width: 350px !important;
  min-width: 0 !important;
  padding-top: 18px !important;
  padding-bottom: 16px !important;
}

html body.ksc-r8-hero-balance .ksc-public-auth-card h1,
html body.ksc-r8-hero-balance .ksc-public-auth-card h1 *,
html body.ksc-r8-hero-balance .ksc-public-auth-card h2,
html body.ksc-r8-hero-balance .ksc-public-auth-card h2 *,
html body.ksc-r8-hero-balance .ksc-public-auth-card h3,
html body.ksc-r8-hero-balance .ksc-public-auth-card h3 *,
html body.ksc-r8-hero-balance .ksc-public-auth-shell h1,
html body.ksc-r8-hero-balance .ksc-public-auth-shell h1 *,
html body.ksc-r8-hero-balance .ksc-public-auth-shell h2,
html body.ksc-r8-hero-balance .ksc-public-auth-shell h2 *,
html body.ksc-r8-hero-balance .ksc-public-auth-shell h3,
html body.ksc-r8-hero-balance .ksc-public-auth-shell h3 * {
  font-size: clamp(18px, 1.7vw, 24px) !important;
  line-height: 1.16 !important;
  letter-spacing: -0.012em !important;
  max-width: 260px !important;
  margin-bottom: 10px !important;
}

/* Butonlar ve küçük kartlar düzenli kalsın */
html body.ksc-r8-hero-balance .ksc-public-auth-button,
html body.ksc-r8-hero-balance .btn,
html body.ksc-r8-hero-balance button {
  min-height: 42px !important;
  padding: 9px 16px !important;
}

html body.ksc-r8-hero-balance .card h1,
html body.ksc-r8-hero-balance .card h2,
html body.ksc-r8-hero-balance .card h3,
html body.ksc-r8-hero-balance [data-ksc-book-card] h1,
html body.ksc-r8-hero-balance [data-ksc-book-card] h2,
html body.ksc-r8-hero-balance [data-ksc-book-card] h3 {
  font-size: clamp(19px, 1.7vw, 26px) !important;
  line-height: 1.14 !important;
}

/* Mobil */
@media (max-width: 768px) {
  html body.ksc-r8-hero-balance .hero,
  html body.ksc-r8-hero-balance .intro,
  html body.ksc-r8-hero-balance .book-hero,
  html body.ksc-r8-hero-balance .auth-hero,
  html body.ksc-r8-hero-balance [class*="hero"]:first-of-type {
    margin-top: 14px !important;
    padding-top: 18px !important;
    padding-bottom: 16px !important;
  }

  html body.ksc-r8-hero-balance .hero h1,
  html body.ksc-r8-hero-balance .hero h1 *,
  html body.ksc-r8-hero-balance .intro h1,
  html body.ksc-r8-hero-balance .intro h1 *,
  html body.ksc-r8-hero-balance [class*="hero"] h1,
  html body.ksc-r8-hero-balance [class*="hero"] h1 *,
  html body.ksc-r8-hero-balance [class*="headline"],
  html body.ksc-r8-hero-balance [class*="headline"] * {
    font-size: clamp(26px, 6.7vw, 36px) !important;
    max-width: 100% !important;
  }

  html body.ksc-r8-hero-balance .ksc-public-auth-card h1,
  html body.ksc-r8-hero-balance .ksc-public-auth-card h2,
  html body.ksc-r8-hero-balance .ksc-public-auth-card h3,
  html body.ksc-r8-hero-balance .ksc-public-auth-shell h1,
  html body.ksc-r8-hero-balance .ksc-public-auth-shell h2,
  html body.ksc-r8-hero-balance .ksc-public-auth-shell h3 {
    font-size: clamp(18px, 5.2vw, 22px) !important;
    max-width: 100% !important;
  }
}