/* COMPACT TYPOGRAPHY + AIRY LAYOUT
 * Hedef: Stripe/Linear/Notion tonu — kompakt fontlar, geni nefes.
 * 8'in katlari vertical rhythm: 24, 32, 48, 64, 80, 96.
 * Bu dosya en son yuklenir, !important ile inline style'lari yener.
 */

/* ---- Base ---- */
html { font-size: 14px !important; }
body {
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
}

/* ---- Container ---- */
.container-kolaybi {
  max-width: 1140px !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
}
@media (max-width: 768px) {
  .container-kolaybi { padding-left: 20px !important; padding-right: 20px !important; }
}

/* ====== TIPOGRAFI (kompakt) ====== */
main h1,
main .h-hero-v4 {
  font-size: 28px !important;
  line-height: 1.18 !important;
  letter-spacing: -.5px !important;
  font-weight: 700 !important;
}
@media (min-width: 768px) { main h1, main .h-hero-v4 { font-size: 32px !important; } }
@media (min-width: 992px) { main h1, main .h-hero-v4 { font-size: 38px !important; line-height: 1.15 !important; letter-spacing: -.8px !important; } }

main h2,
main .h-section {
  font-size: 18px !important;
  line-height: 1.3 !important;
  letter-spacing: -.2px !important;
  font-weight: 700 !important;
}
@media (min-width: 768px) { main h2, main .h-section { font-size: 22px !important; } }
@media (min-width: 992px) { main h2, main .h-section { font-size: 24px !important; } }

main h3 { font-size: 15px !important; line-height: 1.35 !important; font-weight: 700 !important; }
main h4, main h5, main h6 { font-size: 13.5px !important; font-weight: 700 !important; }

main .body-lg {
  font-size: 13.5px !important;
  line-height: 1.6 !important;
}

.stat-num { font-size: 26px !important; line-height: 1 !important; letter-spacing: -.5px !important; }
@media (min-width: 768px) { .stat-num { font-size: 32px !important; } }

.section-eyebrow {
  font-size: 10.5px !important;
  padding: 4px 10px !important;
  letter-spacing: .08em !important;
}
.pill { font-size: 11px !important; padding: 4px 10px !important; }

/* ====== BUTONLAR ====== */
.kb-btn-primary {
  height: 38px !important;
  padding: 0 18px !important;
  font-size: 13px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}
.kb-btn-secondary {
  padding: 9px 16px !important;
  font-size: 13px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}
.kb-btn-success { padding: 10px 18px !important; font-size: 13px !important; border-radius: 8px !important; }

/* ====== NAV + PROMO ====== */
.nav-link { font-size: 13.5px !important; padding: 6px 11px !important; font-weight: 500 !important; }
header > div { height: 68px !important; }
header img { height: 48px !important; max-height: 48px !important; }
.promo-bar { font-size: 12px !important; }
.promo-bar > div { padding: 7px 24px !important; }

/* ====== MEGA MENU (Takip Modulleri dropdown) — kucult ====== */
.mm-card {
  width: 600px !important;
  padding: 18px !important;
  border-radius: 12px !important;
}
.mm-card > div {
  gap: 20px !important;
}
.mm-card p {
  margin: 0 0 8px !important;
  font-size: 10px !important;
}
.mm-item {
  padding: 7px !important;
  gap: 9px !important;
}
.mm-glyph {
  width: 26px !important;
  height: 26px !important;
  font-size: 9px !important;
  border-radius: 7px !important;
}
.mm-item > div:last-child > div:first-child {
  font-size: 12px !important;
}
.mm-item > div:last-child > div:last-child {
  font-size: 10.5px !important;
  line-height: 1.35 !important;
}

/* ====== SECTION SPACING — TUM SECTIONLARA UNIFORM AIRY ====== */
/* Universal: main'deki tum dogrudan section'lar */
main > section {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}
@media (min-width: 992px) {
  main > section {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
}
@media (max-width: 767px) {
  main > section {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }
}

/* .section-pad zaten ust kuralla kaplaniyor — gec tutarliligi icin */
.section-pad {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}
@media (min-width: 992px) {
  .section-pad { padding-top: 80px !important; padding-bottom: 80px !important; }
}
@media (max-width: 767px) {
  .section-pad { padding-top: 44px !important; padding-bottom: 44px !important; }
}

/* HERO — dramatik nefes, ekstra padding */
main > section:first-of-type {
  padding-top: 64px !important;
  padding-bottom: 96px !important;
}
@media (min-width: 992px) {
  main > section:first-of-type {
    padding-top: 88px !important;
    padding-bottom: 120px !important;
  }
}
@media (max-width: 767px) {
  main > section:first-of-type {
    padding-top: 48px !important;
    padding-bottom: 64px !important;
  }
}

/* ====== RESIM/MOCKUP CAP ====== */
main img,
section img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* Hero gorsel — boyutu yeterli olsun */
main img[src*="hero-mali"],
main img[src*="al-ai-fatura"] {
  max-height: 460px !important;
  width: 100% !important;
  object-fit: cover !important;
  border-radius: 16px !important;
}

/* Dashboard / panel mockuplari */
main img[src*="dashboard"],
main img[src*="panel.png"],
main img[src*="beyannameler.png"] {
  max-height: 480px !important;
  object-fit: contain !important;
}

/* Telefon mockup */
main img[src*="phones"],
main img[src*="mobile"] {
  max-height: 520px !important;
  object-fit: contain !important;
}

/* Loop ve modul gorselleri — orta boyut */
main img[src*="loop-"],
main img[src*="module-"] {
  max-height: 360px !important;
  object-fit: contain !important;
}

/* Blog gorselleri */
main img[src*="blog-"] {
  max-height: 220px !important;
  width: 100% !important;
  object-fit: cover !important;
}

/* Footer + promo bar logosu kucuk kalsin (header'a dokunma — yukarida 48px) */
footer img,
.promo-bar img {
  max-height: 28px !important;
  width: auto !important;
}

/* ====== KARTLAR — nefes ====== */
.card-pop {
  border-radius: 12px !important;
  padding: 20px !important;
}

/* ====== FORM ====== */
.form-input { padding: 10px 14px !important; font-size: 13.5px !important; border-radius: 8px !important; }
.form-label { font-size: 12px !important; margin-bottom: 6px !important; }

/* ====== FOOTER ====== */
.site-footer { padding: 56px 0 32px !important; }
.site-footer .col-h { font-size: 12.5px !important; margin-bottom: 14px !important; }
.site-footer a { font-size: 13px !important; padding: 4px 0 !important; }

/* ====== ELEMENTLER ARASI GAP'LER — vertical rhythm ====== */
main p { margin-top: 12px !important; margin-bottom: 12px !important; }
main ul, main ol { margin-top: 12px !important; margin-bottom: 12px !important; }
/* Buton gruplari */
main .kb-btn-primary + .kb-btn-secondary,
main .kb-btn-secondary + .kb-btn-primary { margin-left: 8px !important; }

/* Hero icindeki grid esit columlar daha balanced */
main > section:first-of-type .grid-2 { gap: 56px !important; }
@media (min-width: 992px) {
  main > section:first-of-type .grid-2 { gap: 72px !important; }
}

/* ====== DASHBOARD MOCKUP (Tek Panel) — CompactPanelMock JSX kullaniliyor
 * Bento-style focused mockup: 1 hero KPI + 2 mini metric
 * Dogal boyutta ~480x440, AL kadin foto ile yan yana benzer olcu
 * Scale/zoom yok — text natural size, okunabilir
 */
@media (min-width: 992px) {
  .dash-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 56px !important;
    align-items: center !important;
  }
}

/* ====== CARDS LOOP (Otomasyon bolumu) — zoom ile kucult ====== */
@media (min-width: 992px) {
  .loop-grid {
    grid-template-columns: 1fr 1.2fr !important;
    gap: 40px !important;
  }
}
/* Sag mockup card'i zoom ile orantili kucult — kirpilma yok */
.loop-grid > div:nth-child(2) {
  zoom: 0.82;
  margin-inline: auto !important;
}
@media (max-width: 768px) {
  .loop-grid > div:nth-child(2) { zoom: 0.95; }
}
/* Sol mini-kartlar — padding ve icon kucult (zoom yerine spesifik) */
.loop-grid > div:nth-child(1) > button {
  padding: 12px !important;
  gap: 8px !important;
}
.loop-grid > div:nth-child(1) > button > div:first-child {
  width: 36px !important;
  height: 36px !important;
  font-size: 14px !important;
  border-radius: 9px !important;
}
.loop-grid > div:nth-child(1) > button > span:nth-of-type(1) {
  font-size: 13px !important;
}
.loop-grid > div:nth-child(1) > button > span:nth-of-type(2) {
  font-size: 11px !important;
  line-height: 1.45 !important;
}

/* ====== KOBI CARDS (Ozel Araclar bolumu) — kucult ====== */
div.card-pop {
  padding: 14px !important;
}
div.card-pop > div:first-child {
  /* 120px gorsel alan -> 80px */
  height: 80px !important;
  border-radius: 9px !important;
}
div.card-pop > div:first-child span:last-child {
  font-size: 22px !important;
}
div.card-pop > h3 {
  margin-top: 12px !important;
  font-size: 14px !important;
}
div.card-pop > p {
  margin-top: 6px !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
}

/* Steps section — 4 adim numaralari ve metni kompakt */
.steps-grid > div .step-num {
  width: 28px !important;
  height: 28px !important;
  font-size: 12px !important;
}
.steps-grid > div h3 {
  margin-top: 12px !important;
  font-size: 14px !important;
}
.steps-grid > div p {
  margin-top: 6px !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
}

/* ====== APP SHELL MOCK (Modul Detay sayfasi) — zoom ile kesintisiz ====== */
.mock-window {
  border-radius: 10px !important;
  zoom: 0.7;
  max-width: 900px !important;
  margin-inline: auto !important;
}
@media (min-width: 1200px) {
  .mock-window { zoom: 0.75; }
}
@media (max-width: 768px) {
  .mock-window { zoom: 0.9; }
}
/* Mock-window icindeki padding/min-height'lere DOKUNMA — zoom hepsini halleder */

/* ====== PRICING — buyuk fiyat numerasini kucult ====== */
.price-card {
  padding: 18px !important;
  border-radius: 12px !important;
}
.price-card h3 { font-size: 14px !important; }
.price-card .tag { font-size: 10px !important; padding: 3px 10px !important; }
/* Buyuk fiyat — letter-spacing + font-weight 800 olan span'leri yakala */
.price-card span[style*="letter-spacing"][style*="font-weight: 800"],
.price-card span[style*="font-size: 40"],
.price-card span[style*="font-size: 44"] {
  font-size: 26px !important;
  letter-spacing: -.4px !important;
}
.plans-grid { gap: 16px !important; margin-top: 36px !important; }

/* ====== COMPARISON tablosu — satir paddinglerini sikistir ====== */
.container-kolaybi > div[style*="border-radius: 16"][style*="grid-template-columns"] {
  /* tablonun ic gridi */
}
section.section-pad div[style*="gridTemplateColumns: \"1.6fr 1fr 1fr 1fr\""],
section.section-pad div[style*="grid-template-columns: 1.6fr 1fr 1fr 1fr"] {
  padding: 12px 16px !important;
  gap: 8px !important;
}

/* ====== TESTIMONIALS — alintilarin padding'i ====== */
.quote-grid .card-pop {
  padding: 16px !important;
}
.quote-grid .card-pop p {
  font-size: 13px !important;
  line-height: 1.5 !important;
}

/* ====== CTA STRIP — h3 ve buton sade ====== */
section[style*="background: linear-gradient(90deg"] h3,
main section > .container-kolaybi > div h3[style*="font-size: 26"] {
  font-size: 18px !important;
  letter-spacing: -.3px !important;
}

/* ====== AL SECTION buyuk h2 (fontSize: 48) ====== */
main section[id="al"] h2 {
  font-size: 22px !important;
  line-height: 1.2 !important;
  letter-spacing: -.4px !important;
  font-weight: 700 !important;
}
@media (min-width: 992px) {
  main section[id="al"] h2 { font-size: 28px !important; }
}

/* ====== HAKKIMIZDA, ILETISIM, SSS, FIYATLAR sayfa basliklarini kucult ====== */
/* h1.h-section inline fontSize:38 -> 28 lg */
main h1.h-section { font-size: 24px !important; line-height: 1.2 !important; }
@media (min-width: 992px) { main h1.h-section { font-size: 30px !important; } }

/* ====== FOOTER grid sikilastir ====== */
.foot-grid { gap: 24px !important; }

/* ====== MOBIL phone-img wrapper — gosterim kucult ====== */
.phone-img img {
  max-height: 460px !important;
  margin-inline: auto !important;
}

/* CardsLoop sag mocku zaten yukarda zoom ile kucultuldu — ic icerige dokunma */

/* ====== ICON SVG'ler — buyuk olanlari kucult ====== */
main svg[width="22"], main svg[height="22"] { width: 16px !important; height: 16px !important; }
main svg[width="24"], main svg[height="24"] { width: 18px !important; height: 18px !important; }
main svg[width="48"], main svg[height="48"] { width: 36px !important; height: 36px !important; }
/* Promo bar / nav / footer icon'larini etkilemesin */
header svg, footer svg, .promo-bar svg { width: auto !important; height: auto !important; }
.kb-btn-primary svg, .kb-btn-secondary svg, .kb-btn-success svg { width: 12px !important; height: 12px !important; }