/* Puan hesaplayıcı sayfaları (F2.5) — /sinavlar/yks/yks-puan-hesaplama, /sinavlar/lgs/lgs-puan-hesaplama.
   Ölçüler orijinal Framer sayfasından (Container / Title Section / Sticky Left Panel / General banner / Boxes). */
.cl-wrap { max-width: 1440px; margin: 0 auto; padding: 0 100px; display: flex; align-items: stretch; justify-content: center; gap: 60px; }
.cl-left { flex: .5 0 0; min-width: 0; display: flex; flex-direction: column; gap: 60px; padding: 100px 0; }
.cl-sticky { position: sticky; top: 110px; display: flex; flex-direction: column; align-items: center; gap: 40px; }
.cl-title { width: 100%; display: flex; flex-direction: column; gap: 24px; }
.cl-eyebrow { margin: 0; font-size: 18px; line-height: 12px; color: #818181; }
.cl-h { margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: 32px; line-height: 32px; font-weight: 600; letter-spacing: -.96px; color: #191919; }
.cl-h__b { font-family: "Lobster Two", sans-serif; font-weight: 400; color: var(--cl-accent); }
.cl--yks { --cl-accent: #2563EB; }
.cl--lgs { --cl-accent: #EB636D; }

/* Banner (yalnız masaüstü) */
.cl-banner { position: relative; width: 100%; padding: 32px 0; border-radius: 32px; display: flex; flex-direction: column; align-items: center; gap: 20px;
  background: linear-gradient(rgb(245, 245, 247) 15%, rgb(190, 208, 249) 122%); }
.cl-banner::after { content: ""; position: absolute; inset: 0; border: 1px solid #E7E7EC; border-radius: inherit; pointer-events: none; }
.cl-banner__text { margin: 0; width: 259px; text-align: center; font-size: 22px; line-height: 26.4px; letter-spacing: -.44px; color: #0B2B5F; }
.cl-banner__text strong { font-weight: 600; }
.cl-banner__media { width: 100%; display: flex; flex-direction: column; align-items: center; }
/* Orijinalde lottie.host'tan yüklenen .lottie animasyonu (kuş). Dosya arşivde/erişimde yok → aynı boyutta boş alan (H madde). */
.cl-lottie { width: 100%; aspect-ratio: 1; }
.cl--lgs .btn-dl-orange { background: #EB636D; }
.cl--lgs .btn-dl-orange__arrow { background: #D9555F; }
.cl--lgs .btn-dl-orange:hover { background: #D9555F; }
.cl--lgs .btn-dl-orange:hover .btn-dl-orange__arrow { background: #BD3D46; }

/* Sağ: hesaplayıcı. Orijinal kod bileşeninin bağlamı: sans-serif 12px, line-height normal, siyah. */
.cl-right { flex: 1 0 0; min-width: 0; display: flex; gap: 10px; padding: 100px 0; }
.cl-calc { width: 100%; font-family: sans-serif; font-size: 12px; line-height: normal; letter-spacing: normal; color: #000; font-weight: 400; }
.cl-calc *, .cl-calc *::before, .cl-calc *::after { box-sizing: border-box; }
.cl-calc button, .cl-calc input, .cl-calc select { font-family: sans-serif; font-size: 13px; line-height: normal; letter-spacing: normal; margin: 0; }
.cl-calc button { cursor: pointer; }

/* CTA: LGS'de tek pembe Premium kartı */
.cta--pink .cta__card { border-color: #FEDFE1; }
.cta--pink .cta__label { color: #EB636D; }
.cta--pink .cta__title .script { color: #EB636D; }

@media (max-width: 1199.98px) {
  .cl-wrap { flex-direction: column; align-items: stretch; padding: 0 44px; gap: 60px; }
  .cl-left { flex: none; padding: 60px 0 0; }
  .cl-sticky { position: relative; top: 0; }
  .cl-title { align-items: center; text-align: center; }
  .cl-h { align-items: center; font-size: 44px; line-height: 44px; letter-spacing: -1.32px; }
  .cl-banner { display: none; }
  .cl-right { flex: none; padding: 0 0 60px; }
  /* orijinal: tablet CTA metin sütunu space-between (TR'de boşluk 46, EN'de uzun metinle 15); style.css sabit 46 yalnız TR'ye uyar */
  .cl .cta__text { justify-content: space-between; }
  .cl .cta__body { margin-top: 0; }
}
@media (max-width: 809.98px) {
  .cl-wrap { padding: 0 24px; gap: 40px; }
  .cl-left { padding: 40px 0 0; }
  .cl-h { font-size: 32px; line-height: 32px; letter-spacing: -.96px; }
  .cl-right { padding: 0 0 40px; }
  /* orijinal: turuncu/pembe kart mobilde içeriğe göre uzar (TR 588, EN 644); style.css'teki sabit 588 yalnız TR'ye uyar */
  .cl .cta--orange .cta__card, .cl .cta--pink .cta__card { height: auto; }
  .cl .cta__text { justify-content: flex-start; }
  .cl .cta__body { margin-top: 20px; }
}