/* ==========================================================================
   Yardimo ana sayfa bolumleri
   Hero disindaki her sey bu dosyada; hero kabugu kritik CSS icinde de var.
   ========================================================================== */

/* --------------------------------------------------------- 1. hero devami */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-4);
}

/* Hero'daki sohbet penceresi maketi widget-demo.css icinde (panel onizlemesi
   ile ortak). Isaretleme: src/views/partials/widget-preview.njk */

/* GERCEK widget acikken maket sonuk kalir: ikisi ayni ekranda ust uste
   biniyordu. Sinifi site.js yaziyor (widget'in `yardimo:open` olayi). */
.hero__media { transition: opacity .2s ease, visibility .2s ease; }

body.yn-open .hero__media {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero__media { transition: none; }
}

/* --------------------------------------------------- 2. deger seridi band */
.values-band { padding-bottom: var(--section-y); }

.values {
  border-top: 1px solid var(--c-border);
  padding-top: var(--s-6);
  margin-top: var(--s-8);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
}
.value {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
}
.value svg {
  width: 24px;
  height: 24px;
  color: var(--c-primary);
  flex: none;
  margin-top: 2px;
}
.value h3 {
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: 0;
}
.value p { color: var(--c-text-2); font-size: var(--fs-sm); }

@media (max-width: 760px) {
  .values { grid-template-columns: 1fr; gap: var(--s-3); margin-top: var(--s-8); }
}

/* ------------------------------------------------------------ 5. sektorler */
.sector-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-2);
}
.sector {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text);
}
.sector svg { width: 24px; height: 24px; color: var(--c-primary); flex: none; }

@media (max-width: 900px) { .sector-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .sector-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ------------------------------------------------------- 6. fiyat CTA kart */
.plan-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
  padding: var(--s-6);
  background: var(--c-primary-light);
  border: 1px solid var(--c-primary-ring);
  border-radius: var(--r-lg);
}
.plan-card h2 { max-width: 22ch; }
.plan-card p { color: var(--c-text-2); max-width: 58ch; }
.plan-card .btn { margin-top: var(--s-1); }

@media (max-width: 560px) { .plan-card { padding: var(--s-3); } }