/* =============================================================
   CHATOPYA — Ana Sayfa
   -------------------------------------------------------------
   Yalnizca ana sayfada yuklenir. Tum degerler token katmanindan
   gelir; burada sabit renk/olcu yazilmaz.
   ============================================================= */

/* ---------- HERO ---------- */
.hm-hero {
  background: var(--cy-surface-alt);
  border-bottom: 1px solid var(--cy-ink-050);
  padding-block: var(--cy-space-16) var(--cy-space-16);
}
.hm-hero-grid {
  display: grid;
  /* Gorsel sutunu bilerek metinden daha genis: ekran goruntuleri
     (rapor/tablo) kucuk gosterilince okunmuyordu, oran 5/6'dan 4/7'ye
     cekilerek gorsel belirgin buyutuldu. */
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: var(--cy-space-12);
  align-items: center;
}
.hm-hero-text { display: flex; flex-direction: column; gap: var(--cy-space-5, 1.25rem); }
.hm-hero h1 {
  margin: 0;
  font-size: clamp(2rem, 1.2rem + 2.6vw, var(--cy-text-4xl));
  font-weight: 700;
  line-height: var(--cy-leading-tight);
}
.hm-hero-lead {
  margin: 0;
  font-size: var(--cy-text-lg);
  line-height: 1.65;
  color: var(--cy-ink-700);
  max-width: 34em;
}
.hm-cta-row { display: flex; flex-wrap: wrap; gap: var(--cy-space-3); }
.hm-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cy-space-2) var(--cy-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--cy-text-sm);
  font-weight: 600;
  color: var(--cy-ink-500);
}
.hm-trust li { display: flex; align-items: center; gap: var(--cy-space-2); }
.hm-trust i { color: var(--cy-brand-600); }

.hm-shot {
  border: 1px solid var(--cy-ink-100);
  border-radius: var(--cy-radius-xl);
  overflow: hidden;
  background: var(--cy-surface);
  box-shadow: var(--cy-shadow-lg);
}
.hm-shot img { display: block; width: 100%; height: auto; }

/* Video kutusu: 16:9 alan onceden ayrilir, meta veri yuklenirken
   sayfa ziplamaz. */
.hm-shot-video { aspect-ratio: 16 / 9; }
.hm-shot-video video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Ekran goruntusu slaytlari: .hm-shot img zaten width:100%;height:auto
   veriyor (ust taraf) — urun sayfalarindaki .pr-hero-shot ile ayni
   mantik. Once burada 16:9 kutu + dolgu + object-fit:contain ile
   ortalanmis kucuk bir onizleme deneniyordu; ekran goruntusu zaten
   kendi icinde bosluklu oldugundan bu, gorseli kucuk ve okunmasi zor
   gosteriyordu ("kucuk gorsel" — bkz. proje hafizasi, ayni sorunun
   onceki tekrari). Dogal en-boy oraniyla, tam genislikte gosteriliyor;
   slaytlar arasi yukseklik farki autoHeight:true ile yumusatiliyor. */

/* ---------- HERO SLAYT GECISI ----------
   Metin uzunlugu slayttan slayta degisir (ör. video slaytindaki guven
   listesi digerlerinde yok); autoHeight ile konteyner her slaytin
   gercek yuksekligine yumusakca uyarlanir, sabit yukseklikte bosluk/
   tasma olmaz. */
.hm-hero-swiper { --swiper-theme-color: var(--cy-brand); }
.hm-hero-swiper .swiper-slide { height: auto; }

/* ---------- CAROUSEL KONTROLLERI (paylasilan) ----------
   Hero ve kullanim senaryolari carousel'i ayni ok/nokta gorunumunu
   kullanir; ileride eklenecek yeni carousel'ler de bu siniflari
   yeniden kullanmali (bkz. .hm-cases-swiper). */
.hm-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cy-space-4);
  margin-top: var(--cy-space-8);
}
.hm-carousel-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--cy-surface);
  border: 1px solid var(--cy-ink-200);
  color: var(--cy-ink-700);
  cursor: pointer;
  transition: border-color var(--cy-duration) var(--cy-ease), color var(--cy-duration) var(--cy-ease);
}
.hm-carousel-arrow:hover { border-color: var(--cy-brand-600); color: var(--cy-brand); }
.hm-carousel-arrow.swiper-button-disabled { opacity: 0.35; cursor: default; pointer-events: none; }

.hm-carousel-pagination { position: static; display: flex; align-items: center; gap: var(--cy-space-2); width: auto; }
.hm-carousel-pagination .swiper-pagination-bullet {
  width: 8px; height: 8px; margin: 0;
  background: var(--cy-ink-200);
  opacity: 1;
  transition: width var(--cy-duration) var(--cy-ease), background-color var(--cy-duration) var(--cy-ease);
}
.hm-carousel-pagination .swiper-pagination-bullet-active {
  width: 22px;
  border-radius: var(--cy-radius-pill);
  background: var(--cy-brand);
}

/* ---------- MARKA SERIDI ---------- */
.hm-logos { padding-block: var(--cy-space-8); border-bottom: 1px solid var(--cy-ink-050); }
.hm-logos-label {
  text-align: center;
  margin-bottom: var(--cy-space-6);
  font-size: var(--cy-text-xs);
  font-weight: 700;
  letter-spacing: var(--cy-tracking-wide);
  text-transform: uppercase;
  color: var(--cy-ink-400);
}
.hm-logos .swiper-slide { display: flex; align-items: center; justify-content: center; }
.hm-logos img {
  max-height: 38px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter var(--cy-duration) var(--cy-ease), opacity var(--cy-duration) var(--cy-ease);
}
.hm-logos img:hover { filter: grayscale(0); opacity: 1; }

/* ---------- BOLUM BASLIGI ---------- */
.hm-head { display: flex; flex-direction: column; gap: var(--cy-space-3); max-width: 46rem; }
.hm-head.is-center { margin-inline: auto; text-align: center; align-items: center; }
.hm-head h2 {
  margin: 0;
  font-size: clamp(1.6rem, 1.1rem + 1.6vw, var(--cy-text-3xl));
  font-weight: 600;
  line-height: 1.15;
}
.hm-head p { margin: 0; font-size: var(--cy-text-base); line-height: var(--cy-leading-body); color: var(--cy-ink-500); }

/* ---------- NEDIR + KARSILASTIRMA ---------- */
.hm-explain {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--cy-space-12);
  align-items: start;
}
.hm-explain-copy { display: flex; flex-direction: column; gap: var(--cy-space-4); }
.hm-explain-copy p { margin: 0; line-height: var(--cy-leading-body); color: var(--cy-ink-700); }

.hm-compare {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--cy-ink-100);
  border-radius: var(--cy-radius-lg);
  overflow: hidden;
  font-size: var(--cy-text-sm);
}
.hm-compare caption { text-align: left; padding-bottom: var(--cy-space-3); color: var(--cy-ink-500); font-size: var(--cy-text-xs); }
.hm-compare th, .hm-compare td { padding: var(--cy-space-4); text-align: left; vertical-align: top; }
.hm-compare thead th { background: var(--cy-surface-sunk); font-weight: 700; color: var(--cy-ink-700); border-bottom: 1px solid var(--cy-ink-100); }
.hm-compare thead th:first-child { font-size: var(--cy-text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--cy-ink-400); }
.hm-compare .hm-col-api { background: #E9F6F1; color: var(--cy-brand); }
.hm-compare tbody th { font-weight: 600; color: var(--cy-ink-900); }
.hm-compare tbody tr + tr th,
.hm-compare tbody tr + tr td { border-top: 1px solid var(--cy-ink-050); }
.hm-compare td.hm-cell-api { background: var(--cy-surface-alt); font-weight: 600; color: var(--cy-ink-900); }
.hm-compare td:not(.hm-cell-api) { color: var(--cy-ink-500); }

/* ---------- YÖNETİM PANELİ ---------- */
.hm-panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--cy-space-12);
  align-items: center;
}
.hm-panel-copy { display: flex; flex-direction: column; gap: var(--cy-space-4); }
.hm-panel-copy h2 {
  margin: 0;
  font-size: clamp(1.6rem, 1.1rem + 1.6vw, var(--cy-text-3xl));
  font-weight: 600;
  line-height: 1.15;
}
.hm-panel-copy p { margin: 0; line-height: var(--cy-leading-body); color: var(--cy-ink-700); }
.hm-panel-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--cy-space-3); }
.hm-panel-list li { display: flex; gap: var(--cy-space-3); align-items: flex-start; font-size: var(--cy-text-sm); line-height: 1.6; color: var(--cy-ink-700); }
.hm-panel-list i { color: var(--cy-brand-600); margin-top: 3px; flex-shrink: 0; }

.hm-panel-shot {
  border: 1px solid var(--cy-ink-100);
  border-radius: var(--cy-radius-xl);
  overflow: hidden;
  background: var(--cy-surface);
  box-shadow: var(--cy-shadow-lg);
}
.hm-panel-shot img { display: block; width: 100%; height: auto; }

/* ---------- KANALLAR ---------- */
.hm-channels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--cy-space-6); }
.hm-channel {
  display: flex;
  flex-direction: column;
  gap: var(--cy-space-3);
  background: var(--cy-surface);
  border: 1px solid var(--cy-ink-100);
  border-radius: var(--cy-radius-lg);
  padding: var(--cy-space-6);
  transition: border-color var(--cy-duration) var(--cy-ease), transform var(--cy-duration) var(--cy-ease), box-shadow var(--cy-duration) var(--cy-ease);
}
.hm-channel:hover { border-color: var(--cy-action); transform: translateY(-2px); box-shadow: var(--cy-shadow-sm); }
.hm-channel h3 { margin: 0; font-size: var(--cy-text-xl); font-weight: 600; }
.hm-channel p { margin: 0; font-size: var(--cy-text-sm); line-height: 1.65; color: var(--cy-ink-500); }
.hm-channel .cy-link-accent { margin-top: auto; align-self: flex-start; }
.hm-channel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  color: #fff;
  font-size: 1.5rem;
}
.hm-channel-icon.is-whatsapp { background: #25D366; }
.hm-channel-icon.is-instagram { background: linear-gradient(45deg, #F58529 0%, #DD2A7B 50%, #8134AF 100%); }
.hm-channel-icon.is-messenger { background: linear-gradient(45deg, #0695FF 0%, #A334FA 60%, #FF6968 100%); }
.hm-channel-icon.is-telegram { background: #229ED9; }

.hm-channel-perks {
  list-style: none;
  margin: var(--cy-space-8) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--cy-space-3) var(--cy-space-8);
}
.hm-channel-perks li { display: flex; align-items: center; gap: var(--cy-space-2); font-size: var(--cy-text-sm); font-weight: 600; color: var(--cy-ink-700); }
.hm-channel-perks i { color: var(--cy-brand-600); }

/* ---------- KULLANIM SENARYOLARI ----------
   Sabit 3 sutunlu grid yerine carousel: ileride daha fazla senaryo
   eklenecek, sabit grid'de sutun sayisi degistikce duzen bozulurdu.
   Swiper varsayilan olarak esit yukseklikte slayt uretmiyor; bu yuzden
   .swiper-slide + .hm-case burada height:100% ile esitleniyor. */
.hm-cases-swiper .swiper-slide { height: auto; }
.hm-case {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--cy-surface);
  border: 1px solid var(--cy-ink-100);
  border-radius: var(--cy-radius-lg);
  overflow: hidden;
}
.hm-case-shot {
  aspect-ratio: 12 / 5;
  background: var(--cy-surface-sunk);
  border-bottom: 1px solid var(--cy-ink-100);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--cy-space-4);
}
/* Kirpmak yerine tamamini goster: uc ekran goruntusunun icerik yerlesimi
   birbirinden cok farkli, tek bir object-position ucune de uymuyordu. */
.hm-case-shot img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: var(--cy-radius-sm);
  box-shadow: var(--cy-shadow-sm);
}
.hm-case-body { display: flex; flex-direction: column; gap: var(--cy-space-3); padding: var(--cy-space-6); flex-grow: 1; }
.hm-case-body h3 { margin: 0; font-size: var(--cy-text-xl); font-weight: 600; }
.hm-case-body p { margin: 0; font-size: var(--cy-text-sm); line-height: 1.65; color: var(--cy-ink-500); flex-grow: 1; }

/* ---------- ADIMLAR ---------- */
.hm-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--cy-space-6); }
.hm-step { display: flex; flex-direction: column; gap: var(--cy-space-2); border-top: 3px solid var(--cy-ink-100); padding-top: var(--cy-space-5, 1.25rem); }
.hm-step:first-child { border-top-color: var(--cy-action); }
.hm-step-no { font-family: var(--cy-font-display); font-size: var(--cy-text-xs); font-weight: 700; color: var(--cy-brand-600); letter-spacing: 0.06em; }
.hm-step h3 { margin: 0; font-size: var(--cy-text-xl); font-weight: 600; }
.hm-step p { margin: 0; font-size: var(--cy-text-sm); line-height: 1.65; color: var(--cy-ink-500); }

/* ---------- ENTEGRASYONLAR (koyu) ---------- */
.hm-integrations { background: var(--cy-surface-dark); color: var(--cy-on-dark); padding-block: var(--cy-space-16); }
.hm-integrations h2, .hm-integrations h3 { color: #fff; }
.hm-integrations .hm-head p { color: var(--cy-on-dark); }
.hm-integrations .cy-eyebrow { color: #7FB8A8; }
.hm-int-top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--cy-space-6); margin-bottom: var(--cy-space-8); }
.hm-int-top .hm-head { flex-grow: 1; }
.hm-int-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--cy-space-4); }
.hm-int-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--cy-space-2);
  min-height: 104px;
  padding: var(--cy-space-4);
  border-radius: var(--cy-radius-lg);
  background: var(--cy-surface-dark-2);
  border: 1px solid var(--cy-border-dark);
  color: #DCEDE7;
  font-size: var(--cy-text-sm);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: border-color var(--cy-duration) var(--cy-ease), transform var(--cy-duration) var(--cy-ease);
}
.hm-int-tile:hover { border-color: var(--cy-action); color: #fff; transform: translateY(-2px); }
.hm-int-tile img { width: 32px; height: 32px; object-fit: contain; border-radius: 6px; }
.hm-int-tile i { font-size: 1.5rem; }

/* ---------- FIYAT OZETI ---------- */
.hm-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cy-space-6); }
.hm-plan {
  display: flex;
  flex-direction: column;
  gap: var(--cy-space-4);
  background: var(--cy-surface);
  border: 1px solid var(--cy-ink-100);
  border-radius: var(--cy-radius-lg);
  padding: var(--cy-space-6);
}
.hm-plan.is-featured { border: 2px solid var(--cy-action); }
.hm-plan h3 { margin: 0; font-size: var(--cy-text-xl); font-weight: 600; }
.hm-plan-desc { margin: 0; font-size: var(--cy-text-sm); color: var(--cy-ink-500); }
.hm-plan-price { display: flex; align-items: baseline; gap: var(--cy-space-2); }
.hm-plan-price b { font-family: var(--cy-font-display); font-size: 2.25rem; font-weight: 700; color: var(--cy-ink-900); }
.hm-plan-price span { font-size: var(--cy-text-sm); color: var(--cy-ink-500); }
.hm-plan ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--cy-space-2); font-size: var(--cy-text-sm); color: var(--cy-ink-700); }
.hm-plan ul li { display: flex; gap: var(--cy-space-2); align-items: flex-start; }
.hm-plan ul i { color: var(--cy-brand-600); margin-top: 3px; }
.hm-plan .cy-btn { margin-top: auto; }
.hm-plan-note { text-align: center; margin: 0; font-size: var(--cy-text-sm); color: var(--cy-ink-500); }

/* ---------- SSS ---------- */
.hm-faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--cy-space-12); align-items: start; }
.hm-faq { border-top: 1px solid var(--cy-ink-100); }
.hm-faq details { border-bottom: 1px solid var(--cy-ink-100); }
.hm-faq summary {
  display: flex;
  align-items: center;
  gap: var(--cy-space-4);
  padding: var(--cy-space-5, 1.25rem) 0;
  min-height: 48px;
  font-family: var(--cy-font-display);
  font-size: var(--cy-text-lg);
  font-weight: 600;
  color: var(--cy-ink-900);
  cursor: pointer;
  list-style: none;
}
.hm-faq summary::-webkit-details-marker { display: none; }
.hm-faq summary::after {
  content: "";
  flex-shrink: 0;
  margin-left: auto;
  width: 12px; height: 12px;
  border-right: 2.5px solid var(--cy-ink-400);
  border-bottom: 2.5px solid var(--cy-ink-400);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--cy-duration) var(--cy-ease);
}
.hm-faq details[open] summary::after { transform: rotate(-135deg) translate(-4px, -4px); }
.hm-faq details > p { margin: 0 0 var(--cy-space-5, 1.25rem); font-size: var(--cy-text-base); line-height: var(--cy-leading-body); color: var(--cy-ink-500); max-width: 62ch; }

/* ---------- SON CTA ---------- */
.hm-cta { background: var(--cy-brand); padding-block: var(--cy-space-12); }
.hm-cta-inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cy-space-8); }
.hm-cta-copy { flex-grow: 1; min-width: 18rem; display: flex; flex-direction: column; gap: var(--cy-space-2); }
.hm-cta h2 { margin: 0; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); font-weight: 600; color: #fff; line-height: 1.2; }
.hm-cta p { margin: 0; color: #C4E3D9; line-height: 1.6; }

/* =============================================================
   DUYARLI DAVRANIS
   ============================================================= */
@media (max-width: 991.98px) {
  .hm-hero-grid,
  .hm-explain,
  .hm-faq-grid { grid-template-columns: minmax(0, 1fr); gap: var(--cy-space-8); }
  .hm-panel-grid { grid-template-columns: minmax(0, 1fr); gap: var(--cy-space-8); }
  .hm-cards,
  .hm-plans { grid-template-columns: minmax(0, 1fr); }
  .hm-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-channels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-int-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hm-hero { padding-block: var(--cy-space-12); }
}

@media (max-width: 575.98px) {
  .hm-steps { grid-template-columns: minmax(0, 1fr); }
  .hm-channels { grid-template-columns: minmax(0, 1fr); }
  .hm-int-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-cta-row .cy-btn { width: 100%; }

  /* Karsilastirma tablosu dar ekranda yatay kaydirilir */
  .hm-compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .hm-compare { min-width: 30rem; }
}