/* =====================================================================
   FSD Yazılım — Ana sayfa (v2)
   Home-only styling. Slider chrome reuses .hero* / .hero-tabs / .hero-tab*
   from site.css; everything below is prefixed .hm-*.
   Ported 1:1 from the design prototype (HomeSections.jsx / HomeSections2.jsx
   and the bespoke HeroComposite in HomePage.jsx).
   ===================================================================== */

/* =========================== HeroComposite (Slayt 1 illüstrasyonu) =========================== */
.hm-composite { position: relative; height: 400px; }
.hm-composite__panel {
  position: absolute; inset: 0; border-radius: 20px; overflow: hidden;
  background: linear-gradient(135deg, var(--blue-50), #FFFFFF 55%, var(--ink-50));
  border: 1px solid var(--border-subtle); box-shadow: var(--shadow-card);
}
.hm-composite__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(17,86,224,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,86,224,0.05) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Sol: üretim — kapak yüzeyleri */
.hm-composite__doors { position: absolute; left: 28px; top: 74px; display: flex; gap: 12px; align-items: flex-end; }
.hm-cdoor {
  width: 74px; border-radius: 6px; border: 1px solid rgba(10,20,32,0.14);
  box-shadow: var(--shadow-card); position: relative; flex: none;
}
.hm-cdoor::before { content: ""; position: absolute; inset: 11%; border: 1.5px solid rgba(255,255,255,0.65); border-radius: 3px; }
.hm-cdoor::after { content: ""; position: absolute; inset: 22%; border: 1px solid rgba(10,20,32,0.10); border-radius: 2px; }
.hm-cdoor--1 { height: 150px; background: linear-gradient(165deg, #F2EADF, #E2D4BE); }
.hm-cdoor--2 { height: 178px; background: linear-gradient(165deg, #B9C4AC, #98A88B); }
.hm-cdoor--3 { height: 128px; background: linear-gradient(165deg, #4A5563, #333E4C); }

/* Üretim ölçü çizgisi */
.hm-composite__dim { position: absolute; left: 28px; top: 52px; width: 246px; border-top: 1.5px solid var(--amber-500); }
.hm-composite__dim-label {
  position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--amber-600);
}
.hm-composite__dim-l { position: absolute; left: 0; top: -5px; width: 1.5px; height: 10px; background: var(--amber-500); }
.hm-composite__dim-r { position: absolute; right: 0; top: -5px; width: 1.5px; height: 10px; background: var(--amber-500); }

/* Orta: dönüşüm düğümü + akış çizgileri */
.hm-composite__flow1 { position: absolute; left: 296px; top: 96px; width: 96px; border-top: 2px dashed var(--blue-400); }
.hm-composite__flow2 { position: absolute; left: 296px; top: 232px; width: 96px; border-top: 2px dashed var(--blue-400); }
.hm-composite__flow3 { position: absolute; left: 336px; top: 96px; width: 2px; height: 138px; border-left: 2px dashed var(--blue-400); }
.hm-composite__node {
  position: absolute; left: 306px; top: 140px; width: 62px; height: 62px; border-radius: 16px;
  background: var(--brand-primary); box-shadow: 0 10px 26px rgba(17,86,224,0.35);
  display: flex; align-items: center; justify-content: center; z-index: 2;
}
.hm-composite__node img { border-radius: 10px; }
.hm-composite__flow-label {
  position: absolute; left: 276px; top: 214px; font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.12em; color: var(--brand-primary); white-space: nowrap;
}

/* Sağ: sonuç KPI kartları */
.hm-composite__kpis {
  position: absolute; right: 24px; top: 46px; bottom: 46px; width: 236px;
  display: grid; grid-template-rows: 1fr 1fr 1fr 1fr; gap: 10px;
}
.hm-kpi {
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 12px;
  box-shadow: var(--shadow-card); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;
}
.hm-kpi__label {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--text-muted);
}
.hm-kpi__dir { font-weight: 600; }
.hm-kpi__bars { display: flex; align-items: flex-end; gap: 4px; height: 26px; }
.hm-kpi__bar { flex: 1; background: var(--ink-100); border-radius: 2px; }

/* =========================== WhyBand =========================== */
.hm-why-card {
  display: flex; flex-direction: column; gap: 10px; padding: var(--space-6);
  border-top: 2px solid var(--brand-primary); background: var(--surface-subtle);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.hm-why-card__kpi {
  display: flex; align-items: center; gap: 8px; font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-primary);
}
.hm-why-card__t { font-family: var(--font-display); font-size: 18px; color: var(--text-heading); }
.hm-why-card__d { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.6; }

/* =========================== ShowcaseSection · FeatureRow =========================== */
.hm-showcase { display: flex; flex-direction: column; gap: var(--space-24); }
.hm-band { border-top: 1px solid var(--border-subtle); overflow: hidden; }
.hm-band--flip { background: var(--surface-subtle); }

.hm-feature { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--space-16); align-items: center; padding-top: var(--space-16); padding-bottom: var(--space-16); }
.hm-feature--flip { grid-template-columns: 1fr 1.05fr; }
.hm-feature__text { order: 1; }
.hm-feature--flip .hm-feature__text { order: 2; }
.hm-feature__visual { order: 2; }
.hm-feature--flip .hm-feature__visual { order: 1; }

.hm-feature__eyebrow {
  display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-primary);
}
.hm-feature__title {
  margin: 12px 0 0; font-family: var(--font-display); font-size: 30px; font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.2; color: var(--text-heading); text-wrap: pretty;
}
.hm-feature__lead { margin: 14px 0 0; font-size: var(--text-base); line-height: 1.65; color: var(--text-muted); text-wrap: pretty; }
.hm-feature__list { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.hm-feature__list li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: var(--text-sm); color: var(--text-body); line-height: 1.5;
}
.hm-feature__list li .fsd-ic { color: var(--green-600); margin-top: 2px; }
.hm-feature__cta { margin-top: 24px; }

/* =========================== CatalogGrid =========================== */
.hm-catalog-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap; }
.hm-catalog-grid { margin-top: var(--space-10); }
.hm-catalog-card { display: flex; flex-direction: column; gap: 10px; }
.hm-catalog-card__ic { color: var(--brand-primary); }
.hm-catalog-card__name { font-family: var(--font-display); font-size: 15.5px; color: var(--text-heading); }
.hm-catalog-card__tag { font-size: 13px; color: var(--text-muted); line-height: 1.5; }

.hm-reseller-row {
  display: flex; align-items: center; gap: var(--space-6); margin-top: var(--space-10);
  padding-top: var(--space-8); border-top: 1px solid var(--border-subtle); flex-wrap: wrap;
}
.hm-reseller-row__label {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-faint);
}
.hm-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px;
  border-radius: var(--radius-pill); background: var(--surface-card); border: 1px solid var(--border-subtle);
  font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--text-body); text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.hm-pill:hover { border-color: var(--ink-400); background: var(--surface-subtle); }
.hm-pill .fsd-ic { color: var(--brand-primary); }

/* =========================== ProcessSection =========================== */
.hm-process-grid { margin-top: var(--space-12); }
.hm-step {
  position: relative; padding: var(--space-6); background: var(--surface-inverse-raised);
  border: 1px solid var(--border-on-dark); border-radius: var(--radius-lg);
  display: flex; flex-direction: column; gap: 12px;
}
.hm-step__head { display: flex; align-items: center; justify-content: space-between; }
.hm-step__n { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; color: var(--amber-400); }
.hm-step__head .fsd-ic { color: var(--blue-400); }
.hm-step__t { font-family: var(--font-display); font-size: 18px; color: var(--text-on-dark); }
.hm-step__d { font-size: var(--text-sm); color: var(--text-on-dark-muted); line-height: 1.6; }

.hm-partner-row {
  display: flex; align-items: center; gap: var(--space-8); margin-top: var(--space-12);
  padding-top: var(--space-8); border-top: 1px solid var(--border-on-dark); flex-wrap: wrap;
}
.hm-partner-row__label {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-on-dark-muted);
}
.hm-partner-row__name { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: rgba(255,255,255,0.55); }

/* =========================== CtaSection =========================== */
.hm-cta {
  background: var(--surface-brand-tint); border: 1px solid var(--blue-100);
  border-radius: var(--radius-xl); padding: var(--space-16);
  display: grid; grid-template-columns: 1.2fr auto; gap: var(--space-12); align-items: center;
}
.hm-cta__title {
  margin: 0; font-family: var(--font-display); font-size: 30px; font-weight: 700;
  color: var(--text-heading); letter-spacing: -0.01em; text-wrap: pretty;
}
.hm-cta__lead { margin: 12px 0 0; font-size: var(--text-base); color: var(--text-muted); line-height: 1.6; max-width: 560px; }
.hm-cta__contact {
  display: flex; align-items: center; gap: 20px; margin-top: 18px;
  font-size: var(--text-sm); color: var(--text-body); flex-wrap: wrap;
}
.hm-cta__contact span { display: inline-flex; align-items: center; gap: 8px; }
.hm-cta__contact .fsd-ic { color: var(--brand-primary); }
.hm-cta__btns { display: flex; flex-direction: column; gap: 12px; }

/* =========================== Responsive =========================== */
@media (max-width: 960px) {
  .hm-feature, .hm-feature--flip { grid-template-columns: 1fr; gap: var(--space-8); }
  .hm-feature__text, .hm-feature--flip .hm-feature__text,
  .hm-feature__visual, .hm-feature--flip .hm-feature__visual { order: 0; }
  .hm-cta { grid-template-columns: 1fr; gap: var(--space-8); }
  .hm-cta__btns { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .hm-composite { transform: scale(0.82); transform-origin: top left; }
}