/* ==========================================================================
   Endüstriyel Enerji İzleme — concept demo page styles (cozumler/enerji-izleme.html)
   Scoped to main.case-enerji-izleme. Shared demo-page rules live in case.css
   (loaded first); this file only holds this demo's own art direction.
   ========================================================================== */

.case-enerji-izleme .nowrap { white-space: nowrap; }

/* Hero label column: hypothetical company + "Konsept demo" chip.
   Side by side on phones, stacked under each other from the split breakpoint. */
.case-enerji-izleme .case-hero__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
@media (min-width: 900px) {
  .case-enerji-izleme .case-hero__tags { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* The three-line Problem lead: balance only on wide screens (on phones
   balance leaves a ragged, too-narrow block). */
@media (max-width: 899px) {
  .case-enerji-izleme .prose > p.lead { text-wrap: wrap; }
}

/* wide.svg window geometry (see case.css → .case-wide). */
.case-enerji-izleme .case-wide { --win-x: 100; --win-y: 70; }

/* ---------- Proposed rollout plan ----------
   Steps in one row stretch to equal height; give the description the spare
   space so every "Ay x–y" tag sits on the same line. */
.case-enerji-izleme .enerji-plan .step { grid-template-rows: auto auto 1fr auto; }

/* ---------- "Neyi ölçeriz" band ----------
   --case is #121212, so the band reads as plain ink. Carry the demo's lime
   (--case-dot) into the stat rules — the same lime the product screens use
   for their key numbers. */
.case-enerji-izleme .case-band .stat { border-top-color: var(--case-dot); }

/* ---------- Teknoloji ve önerilen ekip ----------
   The credits title is justified (case.css) to push the team count right; a
   two-word name ("Önerilen ekip") would be spread apart, so keep it atomic. */
.case-enerji-izleme .case-credits__name { display: inline-block; }