/* ============================================================
   comparison-section — referans görselin birebir karşılığı
   Yalnız bu bölüme özgü sınıflar; başka sayfaya sızmaz.
   ============================================================ */
/* Özellikler sayfasında ilk bölüm: sabit üst çubuğun altından
   başlar. Ana sayfada sayfa ortasında durduğu için o üst boşluk
   gerekmez. */
.comparison-section { position: relative; background: #FCFDFE; overflow: hidden; scroll-margin-top: 80px; padding-top: 72px; }
.comparison-section.orta { padding-top: 0; }

/* ---------- ANA SAYFA ÖLÇEĞİ ----------
   Özellikler sayfasında bu bölüm sayfanın kendi başlığıdır ve
   büyük durur. Ana sayfada ise sayfa ortasında bir bölüm olduğu
   için başlık, rozetler ve sütun başlıkları bir kademe küçülür. */
.comparison-section.orta .comparison-hero h2 { font-size: 42px; letter-spacing: -.035em; }
.comparison-section.orta .comparison-hero p { font-size: 16px; }
.comparison-section.orta .comparison-benefit { min-height: 82px; padding: 18px 20px; gap: 13px; }
.comparison-section.orta .comparison-benefit img { width: 38px; height: 38px; flex-basis: 38px; }
.comparison-section.orta .comparison-benefit b { font-size: 17px; }
.comparison-section.orta .comparison-table th { font-size: 17px; padding: 17px 24px; }
.comparison-section.orta .comparison-table td { font-size: 15.5px; padding: 10px 24px; height: 46px; }
.comparison-section.orta .comparison-cta-text b { font-size: 25px; }
.comparison-section.orta .comparison-cta-text p { font-size: 15px; }
.comparison-section.orta .comparison-cta a { font-size: 17px; padding: 17px 30px; }
.comparison-section.orta .comparison-cta img { width: 66px; height: 66px; flex-basis: 66px; }
@media (max-width: 1100px) {
  .comparison-section.orta .comparison-hero h2 { font-size: 38px; }
}
@media (max-width: 767px) {
  .comparison-section.orta .comparison-hero h2 { font-size: 34px; }
  .comparison-section.orta .comparison-benefit b { font-size: 15px; }
}
.comparison-section::before {
  content: ""; position: absolute; right: -140px; top: -180px; width: 560px; height: 560px;
  background: linear-gradient(135deg, rgba(20,184,166,.11) 0%, rgba(20,184,166,.02) 60%, transparent 100%);
  transform: rotate(18deg); border-radius: 64px; pointer-events: none;
}
.comparison-inner { position: relative; max-width: 1220px; margin: 0 auto; padding: 60px 24px 72px; }

/* ---------- hero ---------- */
.comparison-hero { display: grid; grid-template-columns: 1fr 1.08fr; gap: 40px; align-items: center; }
.comparison-hero h1, .comparison-hero h2 {
  margin: 0; font-size: 58px; font-weight: 800; line-height: 1.02; letter-spacing: -.04em; color: #0F2D5B;
}
.comparison-hero p { margin: 20px 0 0; font-size: 17.5px; line-height: 1.6; color: #5B6C86; max-width: 520px; }

.comparison-device { position: relative; padding-bottom: 7%; }
.comparison-laptop { position: relative; width: 91%; }
.comparison-laptop-screen {
  border: 7px solid #2B3340; border-bottom-width: 13px; border-radius: 16px 16px 4px 4px;
  background: #2B3340; box-shadow: 0 22px 46px -20px rgba(15,45,91,.45);
}
.comparison-laptop-screen img { display: block; width: 100%; border-radius: 9px 9px 0 0; }
.comparison-laptop-base {
  height: 13px; margin: 0 -5%; border-radius: 0 0 16px 16px;
  background: linear-gradient(180deg, #D6DBE3 0%, #B8C0CC 100%);
  box-shadow: 0 8px 18px -8px rgba(15,45,91,.35);
}
.comparison-laptop-base::after { content: ""; display: block; width: 18%; height: 3px; margin: 0 auto; background: #9AA4B2; border-radius: 0 0 4px 4px; }
.comparison-phone {
  position: absolute; right: 0; bottom: -3%; width: 24%;
  border: 6px solid #1F2733; border-radius: 24px; background: #1F2733;
  box-shadow: 0 18px 36px -12px rgba(15,45,91,.5);
}
.comparison-phone img { display: block; width: 100%; border-radius: 18px; }

/* ---------- dört avantaj kartı ---------- */
.comparison-benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 34px; }
.comparison-benefit {
  display: flex; align-items: center; gap: 16px; min-height: 96px;
  background: #EEF6FD; border: 1px solid #DDEBF8; border-radius: 16px; padding: 22px 24px;
}
.comparison-benefit img { width: 46px; height: 46px; flex: 0 0 46px; }
.comparison-benefit b { font-size: 22px; font-weight: 800; color: #0F2D5B; letter-spacing: -.025em; line-height: 1.2; }

/* ---------- tablo ---------- */
.comparison-table-wrap {
  margin-top: 26px; background: #fff; border: 1px solid #DCE7F0; border-radius: 18px;
  overflow: hidden; box-shadow: 0 2px 8px rgba(15,45,91,.04), 0 18px 40px -30px rgba(15,45,91,.18);
}
.comparison-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.comparison-table col.c-feature { width: 44%; }
.comparison-table col.c-us,
.comparison-table col.c-them { width: 28%; }
.comparison-table th {
  padding: 20px 26px; font-size: 21px; font-weight: 800; color: #0F2D5B; text-align: left;
  border-bottom: 1px solid #DCE7F0; background: #F7FAFC;
}
.comparison-table th.c-us   { background: #D5F3EF; color: #0F2D5B; text-align: center; }
.comparison-table th.c-them { background: #ECEFF3; color: #4B5A70; text-align: center; }
.comparison-table td {
  height: 48px; padding: 10px 26px; font-size: 17px; color: #1E3A5F;
  border-bottom: 1px solid #EDF2F6; vertical-align: middle;
}
.comparison-table tr:last-child td { border-bottom: 0; }
/* referanstaki gibi: işaretler sütunun sol kısmında dikey bir çizgide,
   metin işaretin sağında */
.comparison-table td.c-us   { background: #EAF9F6; font-weight: 800; color: #0E7C70; text-align: left; padding-left: 11%; white-space: nowrap; }
.comparison-table td.c-them { background: #F4F6F9; color: #7A8AA0; text-align: left; padding-left: 11%; white-space: nowrap; }
.comparison-mark {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 50%; margin-right: 12px; vertical-align: -7px;
}
.comparison-mark svg { width: 15px; height: 15px; }
.comparison-mark-yes { background: #14B8A6; color: #fff; box-shadow: 0 2px 6px rgba(20,184,166,.35); }
.comparison-mark-no  { background: #C8D1DC; color: #fff; }

/* ---------- CTA ---------- */
.comparison-cta {
  display: flex; align-items: center; gap: 26px; min-height: 118px;
  margin-top: 26px; padding: 22px 32px; border-radius: 20px;
  background: linear-gradient(135deg, #E6F8F6 0%, #E3F2FA 100%); border: 1px solid #D3EEEB;
}
.comparison-cta img { width: 78px; height: 78px; flex: 0 0 78px; }
.comparison-cta-text { flex: 1; min-width: 0; }
.comparison-cta-text b { display: block; font-size: 30px; font-weight: 800; color: #0F2D5B; letter-spacing: -.03em; line-height: 1.15; }
.comparison-cta-text p { margin: 8px 0 0; font-size: 16.5px; line-height: 1.5; color: #5B6C86; }
.comparison-cta a {
  display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto;
  padding: 20px 36px; border-radius: 14px; background: #14B8A6; color: #fff;
  font-size: 19px; font-weight: 800; text-decoration: none; white-space: nowrap;
  box-shadow: 0 12px 24px -12px rgba(20,184,166,.6); transition: background .2s, transform .2s;
}
.comparison-cta a:hover { background: #0E9F8E; transform: translateY(-1px); }
.comparison-cta a svg { width: 20px; height: 20px; }

/* ---------- ana sayfadaki kısa başvuru şeridi ----------
   Kaldırılan uzun formun yerine üç alanlık hızlı yol.
   Yalnızca ana sayfada çizilir (Özellikler sayfasında yok). */
.comparison-strip {
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  margin-top: 16px; padding: 22px 30px; border-radius: 20px;
  background: #0F2D5B; color: #fff;
  box-shadow: 0 14px 34px -22px rgba(15,45,91,.65);
}
.comparison-strip-text { flex: 1 1 250px; min-width: 0; }
.comparison-strip-text b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.025em; }
.comparison-strip-text small { display: block; margin-top: 6px; font-size: 13px; line-height: 1.5; color: #A9BEDC; }
.comparison-strip-fields { display: flex; align-items: flex-end; gap: 12px; flex: 2 1 520px; }
.comparison-strip-fields label { display: flex; flex-direction: column; gap: 6px; flex: 1 1 0; min-width: 0; }
.comparison-strip-fields label span { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #A9BEDC; }
.comparison-strip-fields input {
  width: 100%; padding: 12px 14px; border-radius: 11px; border: 1px solid #2E4C7A;
  background: #16386B; color: #fff; font-size: 14.5px; font-family: inherit;
}
.comparison-strip-fields input::placeholder { color: #7A93BA; }
.comparison-strip-fields input:focus { outline: 2px solid #14B8A6; outline-offset: 1px; border-color: transparent; }
.comparison-strip-fields button {
  display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto;
  padding: 13px 24px; border-radius: 11px; border: 0; background: #14B8A6; color: #fff;
  font-size: 15px; font-weight: 800; font-family: inherit; cursor: pointer; white-space: nowrap;
  transition: background .2s, transform .2s;
}
.comparison-strip-fields button:hover { background: #0E9F8E; transform: translateY(-1px); }
.comparison-strip-fields button svg { width: 17px; height: 17px; }

@media (max-width: 900px) {
  .comparison-strip-fields { flex-wrap: wrap; }
  .comparison-strip-fields label { flex: 1 1 40%; }
  .comparison-strip-fields button { flex: 1 1 100%; justify-content: center; }
}
@media (max-width: 639px) {
  .comparison-strip { padding: 20px; gap: 16px; }
  .comparison-strip-text b { font-size: 18px; }
  .comparison-strip-fields label { flex: 1 1 100%; }
  .comparison-strip-fields button { min-height: 52px; }
}

/* ---------- masaüstü / mobil ayrımı ---------- */
.comparison-desktop { display: block; }
.comparison-mobile  { display: none; }

/* ---------- responsive ----------
   768px ve üzerinde masaüstü tablo aynen devam eder.
   767px altında tablo yerine özellik başına kart kullanılır;
   yatay kaydırma YOK, iki değer yan yana kalır.            */
@media (max-width: 1100px) {
  .comparison-hero h1, .comparison-hero h2 { font-size: 46px; }
  .comparison-benefit b { font-size: 19px; }
}
@media (max-width: 900px) {
  .comparison-hero { grid-template-columns: 1fr; }
  .comparison-laptop { width: 100%; }
  .comparison-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .comparison-cta { flex-wrap: wrap; }
}

@media (max-width: 767px) {
  .comparison-desktop { display: none; }
  .comparison-mobile  { display: block; margin-top: 22px; }

  .comparison-section::before { display: none; }
  .comparison-inner { padding: 36px 16px 46px; }

  /* sıra: başlık → açıklama → görsel → kartlar → karşılaştırma → CTA */
  .comparison-hero { display: flex; flex-direction: column; gap: 26px; }
  .comparison-device { order: 2; padding-bottom: 9%; }
  .comparison-hero h1, .comparison-hero h2 { font-size: 40px; line-height: 1.02; font-weight: 800; }
  .comparison-hero p { font-size: 16px; margin-top: 14px; }

  .comparison-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 26px; }
  .comparison-benefit { min-height: 84px; padding: 16px 14px; gap: 11px; }
  .comparison-benefit img { width: 38px; height: 38px; flex-basis: 38px; }
  .comparison-benefit b { font-size: 16px; line-height: 1.22; }

  /* özellik başına kart */
  .mobile-comparison-item {
    background: #fff; border: 1px solid #DCE7F0; border-radius: 14px;
    overflow: hidden; margin-bottom: 11px;
  }
  .mobile-comparison-item .feature-name {
    padding: 16px; font-size: 16px; font-weight: 650; color: #0F2D5B; line-height: 1.32;
    border-bottom: 1px solid #EDF2F6;
  }
  .comparison-values { display: grid; grid-template-columns: 1fr 1fr; }
  .yapiyon-value, .other-value {
    min-height: 68px; padding: 12px 14px;
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
  }
  .yapiyon-value { background: #E7FAF7; color: #008F87; }
  .other-value   { background: #F4F6F9; color: #718096; }
  .yapiyon-value .label, .other-value .label {
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .8;
  }
  .yapiyon-value strong { font-size: 14px; font-weight: 650; color: #008F87; line-height: 1.3; }
  .other-value > span:not(.label) { font-size: 14px; font-weight: 650; color: #718096; line-height: 1.3; }
  .comparison-values .comparison-mark {
    width: 18px; height: 18px; margin-right: 7px; vertical-align: -4px;
  }
  .comparison-values .comparison-mark svg { width: 11px; height: 11px; }

  /* CTA */
  .comparison-cta { padding: 22px 20px; gap: 16px; min-height: 0; }
  .comparison-cta img { width: 58px; height: 58px; flex-basis: 58px; }
  .comparison-cta-text b { font-size: 23px; }
  .comparison-cta-text p { font-size: 15px; }
  .comparison-cta a { width: 100%; min-height: 56px; justify-content: center; font-size: 17px; }
}

/* 2×2 ızgara 390px'de korunur; yalnızca çok dar ekranda
   (360px altı) başlık küçülür ve kartlar tek kolona düşer. */
@media (max-width: 359px) {
  .comparison-hero h1, .comparison-hero h2 { font-size: 34px; }
  .comparison-benefits { grid-template-columns: 1fr; }
  .comparison-benefit { min-height: 72px; }
}

/* şeritteki hata / başarı mesajı */
.comparison-strip-msg {
  flex: 1 1 100%; margin: 0 0 2px; padding: 11px 16px; border-radius: 11px;
  font-size: 14px; font-weight: 700; line-height: 1.45;
}
.comparison-strip-msg.ok   { background: #10B981; color: #fff; }
.comparison-strip-msg.hata { background: #FEE2E2; color: #B91C1C; }