/* Otomatik birleştirildi: build.py — düzenlemek için css/sections/*.css */

/* ===== 08b-simulator.css ===== */
/* ==========================================================================
   Hesaplayıcı (#simulator) — js/simulator.js mantığı aynen korunur.
   Sol: açık yüzeyde kontroller · Sağ: koyu sonuç paneli (büyük sayı + grafik)
   ========================================================================== */

#simulator .sim-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

@media (min-width: 1024px) {
  #simulator .sim-layout {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 20px;
  }
}

/* ---------- Kontroller ---------- */
#simulator .sim-controls {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: clamp(24px, 3vw, 40px);
  border-radius: var(--radius-lg);
  background: var(--paper);
}

#simulator .sim-field {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#simulator .sim-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
}

#simulator .sim-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

#simulator .sim-range-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

#simulator .sim-segment {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  background: var(--paper-2);
  border-radius: 14px;
}

#simulator .sim-segment--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#simulator .sim-seg-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-2);
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.25;
  padding: 10px 4px;
  min-height: 46px;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

#simulator .sim-seg-btn small {
  display: block;
  font-weight: 500;
  font-size: 0.75rem;
  opacity: 0.75;
}

#simulator .sim-seg-btn:hover {
  color: var(--text);
}

#simulator .sim-seg-btn[aria-pressed="true"] {
  background: var(--white);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(5, 13, 25, 0.08), 0 4px 12px -4px rgba(5, 13, 25, 0.12);
}

#simulator .sim-seg-btn:focus-visible,
#simulator .sim-chip:focus-visible,
#simulator .sim-range:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Range */
#simulator .sim-range {
  --fill: 50%;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 28px;
  background: transparent;
  margin: 0;
  cursor: pointer;
}

#simulator .sim-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--radius-pill);
  background: linear-gradient(to right, var(--text) 0, var(--text) var(--fill), #d5d8d0 var(--fill), #d5d8d0 100%);
}

#simulator .sim-range::-moz-range-track {
  height: 4px;
  border-radius: var(--radius-pill);
  background: #d5d8d0;
}

#simulator .sim-range::-moz-range-progress {
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--text);
}

#simulator .sim-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -10px;
  border-radius: 50%;
  background: var(--white);
  border: 0;
  box-shadow: 0 0 0 1px rgba(5, 13, 25, 0.12), 0 4px 10px rgba(5, 13, 25, 0.2);
}

#simulator .sim-range::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--white);
  border: 0;
  box-shadow: 0 0 0 1px rgba(5, 13, 25, 0.12), 0 4px 10px rgba(5, 13, 25, 0.2);
}

#simulator .sim-range-scale {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--text-3);
  margin-top: -6px;
}

#simulator .sim-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#simulator .sim-chip {
  appearance: none;
  border: 1px solid rgba(12, 22, 38, 0.14);
  background: transparent;
  color: var(--text-2);
  font-weight: 500;
  font-size: 0.875rem;
  padding: 7px 14px;
  min-height: 38px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

#simulator .sim-chip:hover {
  border-color: rgba(12, 22, 38, 0.32);
  color: var(--text);
}

#simulator .sim-chip[aria-pressed="true"] {
  background: var(--text);
  border-color: var(--text);
  color: #fff;
}

#simulator .sim-battery {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--paper-2);
  font-size: 0.875rem;
  color: var(--text-2);
}

#simulator .sim-battery span {
  color: var(--text-3);
}

/* ---------- Sonuç paneli (koyu) ---------- */
#simulator .sim-results {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
  padding: clamp(24px, 3.4vw, 48px);
  border-radius: var(--radius-lg);
  background: var(--night);
  color: var(--on-dark);
}

#simulator .sim-results::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -20%;
  top: -40%;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(126, 211, 95, 0.22), rgba(126, 211, 95, 0) 68%);
  pointer-events: none;
  animation: sim-glow 9s ease-in-out infinite alternate;
}

@keyframes sim-glow {
  to {
    transform: translate(-12%, 10%) scale(1.15);
  }
}

.js #simulator:not(.is-inview) .sim-results::before {
  animation-play-state: paused;
}

#simulator .sim-hero-result__label {
  font-size: 0.95rem;
  color: var(--on-dark-2);
}

#simulator .sim-hero-result__value {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 2px 0 6px;
  font-family: var(--font-display);
  line-height: 0.95;
}

#simulator .sim-hero-result__value strong {
  font-size: clamp(5rem, 3rem + 9vw, 9.5rem);
  font-weight: 600;
  letter-spacing: -0.06em;
  color: var(--accent-bright);
  font-variant-numeric: tabular-nums;
}

#simulator .sim-hero-result__value span {
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--on-dark);
}

#simulator .sim-hero-result__sub {
  color: var(--on-dark-2);
  font-size: 0.975rem;
}

#simulator .sim-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 24px;
  margin: 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

@media (min-width: 640px) {
  #simulator .sim-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

#simulator .sim-metric {
  min-width: 0;
}

#simulator .sim-metric dt {
  font-size: 0.8rem;
  color: var(--on-dark-3);
  line-height: 1.35;
}

#simulator .sim-metric dd {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: var(--on-dark);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Grafik */
#simulator .sim-chart-wrap {
  margin-top: auto;
}

#simulator .sim-chart-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 14px;
  font-size: 0.85rem;
  color: var(--on-dark-2);
}

#simulator .sim-legend {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 0.8rem;
  color: var(--on-dark-3);
}

#simulator .sim-legend li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#simulator .sim-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

#simulator .sim-dot--sun {
  background: var(--accent-bright);
}

#simulator .sim-dot--bat {
  background: #5d7ba8;
}

#simulator .sim-chart {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: 3px;
  align-items: end;
  height: 140px;
  padding-bottom: 1px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

#simulator .sim-bar {
  display: flex;
  align-items: flex-end;
  height: 100%;
}

#simulator .sim-bar__fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 3px 3px 1px 1px;
  background: rgba(255, 255, 255, 0.1);
  transform: scaleY(0.03);
  transform-origin: bottom;
  transition: transform 0.7s var(--ease-out), background-color 0.4s var(--ease);
}

#simulator .sim-bar.is-sun .sim-bar__fill {
  background: linear-gradient(180deg, var(--accent-bright), var(--accent));
}

#simulator .sim-bar.is-battery .sim-bar__fill {
  background: #3f5f8f;
}

#simulator .sim-chart-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 0.75rem;
  color: var(--on-dark-3);
  font-variant-numeric: tabular-nums;
}

#simulator .sim-foot {
  margin-top: 24px;
  max-width: 64em;
  font-size: 0.85rem;
  color: var(--text-3);
}

/* ===== 15-cta.css ===== */
/* ==========================================================================
   Son CTA bandı (#cta) — tüm sayfaların sonunda. Koyu bant, büyük slogan.
   ========================================================================== */
#cta {
  position: relative;
  isolation: isolate;
  overflow: clip;
  text-align: center;
  padding-block: clamp(112px, 14vw, 220px);
}

/* Ufukta doğan güneş halesi */
#cta::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -55%;
  width: min(1400px, 160vw);
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(126, 211, 95, 0.28) 0%, rgba(77, 163, 56, 0.1) 30%, rgba(5, 13, 25, 0) 62%);
  pointer-events: none;
  animation: cta-rise 10s ease-in-out infinite alternate;
}

@keyframes cta-rise {
  from {
    transform: translateY(6%) scale(0.96);
    opacity: 0.8;
  }

  to {
    transform: translateY(0) scale(1.04);
    opacity: 1;
  }
}

#cta .cta-band__inner {
  display: grid;
  justify-items: center;
  max-width: 980px;
  margin-inline: auto;
}

#cta .cta-band__title {
  font-size: var(--fs-hero);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.045em;
  max-width: 12ch;
}

#cta .cta-band__on {
  position: relative;
  display: inline-block;
  color: var(--accent-bright);
  text-shadow: 0 0 28px rgba(126, 211, 95, 0.55);
  animation: cta-neon 5s linear infinite;
}

@keyframes cta-neon {
  0%,
  10%,
  62%,
  100% {
    opacity: 1;
  }

  4% {
    opacity: 0.4;
  }

  6% {
    opacity: 1;
  }

  8% {
    opacity: 0.6;
  }

  60% {
    opacity: 0.85;
  }
}

#cta .cta-band__text {
  margin-top: clamp(20px, 2.4vw, 32px);
  max-width: 32em;
  font-size: var(--fs-lead);
  color: var(--on-dark-2);
}

#cta .cta-band__actions {
  justify-content: center;
  margin-top: clamp(32px, 3.6vw, 48px);
}

.js #cta:not(.is-inview) .cta-band__on {
  animation-play-state: paused;
}

/* ===== 20-iletisim-form.css ===== */
/* ==========================================================================
   İletişim · giriş + form (#iletisim, sayfanın ilk bölümü: .page-hero zemini)
   Solda büyük başlık + doğrudan iletişim, sağda form paneli.
   Form mantığı js/contact.js içinde; #cf-* id'leri ve .cf-* sınıfları ona bağlı.
   ========================================================================== */
#iletisim {
  --cf-field-r: 14px;
  padding-bottom: clamp(72px, 4rem + 4vw, 136px);
}

/* Yerleşim: mobilde başlık → form → iletişim; masaüstünde iki kolon */
#iletisim .contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "intro"
    "form"
    "direct";
  gap: clamp(40px, 6vw, 56px);
}

#iletisim .contact__intro { grid-area: intro; min-width: 0; }
#iletisim .contact__direct { grid-area: direct; min-width: 0; }
#iletisim .cf-panel { grid-area: form; }

@media (min-width: 1024px) {
  #iletisim .contact__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "intro form"
      "direct form";
    column-gap: clamp(56px, 6vw, 112px);
    row-gap: 56px;
    align-items: start;
  }

  /* İletişim bilgileri giriş metninin hemen altında; form sağda boyunca uzar */
  #iletisim .contact__direct {
    align-self: start;
  }
}

/* Başlık: hero ölçeğinde ama iki kolona sığacak kadar */
#iletisim .page-hero__title {
  font-size: clamp(2.75rem, 1.7rem + 4.2vw, 5.5rem);
  max-width: 9ch;
}

#iletisim .page-hero__text {
  max-width: 26em;
}

/* Doğrudan iletişim: ince ayraçlı sade satırlar */
#iletisim .contact__direct {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--line);
}

#iletisim .contact__direct > li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  grid-template-areas:
    "icon label"
    "icon value";
  column-gap: 16px;
  row-gap: 4px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}

#iletisim .contact__icon {
  grid-area: icon;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: var(--accent-strong);
}

#iletisim .contact__label {
  grid-area: label;
  font-size: var(--fs-kicker);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}

#iletisim .contact__value {
  grid-area: value;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--text);
  overflow-wrap: anywhere;
}

#iletisim .contact__value a,
#iletisim a.contact__value {
  color: var(--text);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: color var(--dur-fast) var(--ease), background-size 0.5s var(--ease-out);
}

#iletisim .contact__value a:hover,
#iletisim a.contact__value:hover {
  color: var(--accent-strong);
  background-size: 100% 1px;
}

#iletisim .contact__value--lg {
  justify-self: start;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

#iletisim .contact__sep {
  margin-inline: 8px;
  color: var(--text-3);
}

/* Dar ekranda web adresleri alt alta; ayraç sarkmasın */
@media (max-width: 479px) {
  #iletisim .contact__value a {
    display: table;
  }

  #iletisim .contact__sep {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Form paneli
   -------------------------------------------------------------------------- */
#iletisim .cf-panel {
  position: relative;
  min-width: 0;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 28px 20px 24px;
  box-shadow: var(--shadow-sm);
}

@media (min-width: 600px) {
  #iletisim .cf-panel {
    padding: 44px 44px 40px;
  }
}

@media (min-width: 1280px) {
  #iletisim .cf-panel {
    padding: 52px 56px 48px;
  }
}

#iletisim .cf-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 28px;
}

#iletisim .cf-head__title {
  font-size: var(--fs-h3);
  margin: 0;
}

#iletisim .cf-required-note {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--text-3);
}

#iletisim .cf-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

@media (min-width: 600px) {
  #iletisim .cf-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 20px;
  }

  #iletisim .cf-field--full {
    grid-column: 1 / -1;
  }
}

#iletisim .cf-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

#iletisim .cf-label {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
}

#iletisim .cf-req {
  color: var(--accent-strong);
  font-weight: 600;
}

#iletisim .cf-opt {
  margin-left: auto;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-3);
}

/* Girdiler: dolu zemin, büyük dokunma alanı. iOS yakınlaştırmasın diye ≥ 16px */
#iletisim .cf-input {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 56px;
  padding: 14px 18px;
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--paper);
  border: 1px solid transparent;
  border-radius: var(--cf-field-r);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

#iletisim .cf-input::placeholder {
  color: var(--text-3);
  opacity: 0.8;
}

#iletisim .cf-input:hover {
  border-color: var(--paper-2);
  background: var(--paper-2);
}

#iletisim .cf-input:focus {
  background: var(--white);
  border-color: var(--text);
  box-shadow: 0 0 0 4px rgba(77, 163, 56, 0.16);
}

#iletisim .cf-input[aria-invalid="true"] {
  background: var(--error-bg);
  border-color: var(--error);
}

#iletisim .cf-input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--error) 14%, transparent);
}

#iletisim .cf-textarea {
  min-height: 148px;
  resize: vertical;
}

#iletisim .cf-select-wrap {
  position: relative;
}

#iletisim .cf-select {
  padding-right: 48px;
  cursor: pointer;
}

#iletisim .cf-select:invalid {
  color: var(--text-3);
}

#iletisim .cf-select option {
  color: var(--text);
}

#iletisim .cf-select-arrow {
  position: absolute;
  right: 18px;
  top: 50%;
  translate: 0 -50%;
  color: var(--text-2);
  pointer-events: none;
  transition: rotate var(--dur-fast) var(--ease);
}

#iletisim .cf-select-wrap:focus-within .cf-select-arrow {
  rotate: 180deg;
}

#iletisim .cf-hint,
#iletisim .cf-error {
  margin: 0;
}

#iletisim .cf-hint {
  font-size: var(--fs-small);
  color: var(--text-3);
}

#iletisim .cf-error {
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.4;
  color: var(--error);
}

#iletisim .cf-error:empty {
  display: none;
}

#iletisim .cf-error:not(:empty) {
  animation: cf-in 0.4s var(--ease-out);
}

/* Honeypot: görsel olarak gizli */
#iletisim .cf-hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* KVKK onayı */
#iletisim .cf-consent {
  margin-top: 24px;
}

#iletisim .cf-check {
  position: relative;
}

#iletisim .cf-check__input {
  position: absolute;
  top: 0;
  left: 0;
  width: 26px;
  height: 26px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

#iletisim .cf-check__label {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-2);
  cursor: pointer;
}

#iletisim .cf-check__box {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1.5px solid rgba(12, 22, 38, 0.22);
  border-radius: 8px;
  background: var(--white);
  color: #fff;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

#iletisim .cf-check__box svg {
  width: 15px;
  height: 15px;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset 0.35s var(--ease-out);
}

#iletisim .cf-check__label:hover .cf-check__box {
  border-color: rgba(12, 22, 38, 0.4);
}

#iletisim .cf-check__input:checked + .cf-check__label .cf-check__box {
  background: var(--accent);
  border-color: var(--accent);
}

#iletisim .cf-check__input:checked + .cf-check__label .cf-check__box svg {
  stroke-dashoffset: 0;
}

#iletisim .cf-check__input:focus-visible + .cf-check__label .cf-check__box {
  box-shadow: 0 0 0 4px rgba(77, 163, 56, 0.22);
}

#iletisim .cf-check__input[aria-invalid="true"] + .cf-check__label .cf-check__box {
  border-color: var(--error);
  background: var(--error-bg);
}

/* Gönder */
#iletisim .cf-actions {
  margin-top: 28px;
}

#iletisim .cf-submit {
  width: 100%;
}

@media (min-width: 600px) {
  #iletisim .cf-submit {
    width: auto;
    min-width: 220px;
  }
}

#iletisim .cf-submit:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}

#iletisim .cf-spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: cf-spin 0.8s linear infinite;
}

#iletisim .cf-submit.is-loading .cf-spinner {
  display: inline-block;
}

#iletisim .cf-submit.is-loading .cf-submit__icon {
  display: none;
}

#iletisim .cf-submit:disabled {
  cursor: progress;
  opacity: 0.85;
  transform: none;
}

@keyframes cf-spin {
  to { rotate: 360deg; }
}

/* Hata uyarısı (gönderim başarısız) + mailto yedeği */
#iletisim .cf-alert {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 28px;
  padding: 18px 20px;
  border: 1px solid var(--error-line);
  border-radius: var(--radius);
  background: var(--error-bg);
  color: var(--text);
  animation: cf-in 0.5s var(--ease-out);
}

#iletisim .cf-alert[hidden] {
  display: none;
}

#iletisim .cf-alert__icon {
  flex: 0 0 auto;
  color: var(--error);
  margin-top: 1px;
}

#iletisim .cf-alert__text {
  font-size: 0.9375rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

#iletisim .cf-alert__text a {
  color: var(--text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#iletisim .cf-alert__mail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 12px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  background: var(--text);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease);
}

#iletisim .cf-alert__mail:hover {
  background: var(--brand-navy);
  color: #fff;
}

@keyframes cf-in {
  from { opacity: 0; translate: 0 -6px; }
  to { opacity: 1; translate: 0 0; }
}

/* Başarı durumu */
#iletisim .cf-success {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 420px;
  justify-content: center;
  padding: 24px 0;
  outline: none;
  animation: cf-in 0.6s var(--ease-out);
}

#iletisim .cf-success[hidden] {
  display: none;
}

#iletisim .cf-success__check {
  width: 72px;
  height: 72px;
  margin-bottom: 28px;
  border-radius: 50%;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: cf-pulse 1.6s var(--ease-out) 0.9s 1;
}

#iletisim .cf-success__circle {
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  animation: cf-draw 0.7s var(--ease-out) 0.1s forwards;
}

#iletisim .cf-success__tick {
  stroke-width: 3;
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
  animation: cf-draw 0.5s var(--ease-out) 0.6s forwards;
}

@keyframes cf-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes cf-pulse {
  0% { box-shadow: 0 0 0 0 rgba(77, 163, 56, 0.3); }
  100% { box-shadow: 0 0 0 20px rgba(77, 163, 56, 0); }
}

#iletisim .cf-success__title {
  font-size: var(--fs-h2);
  margin: 0 0 14px;
}

#iletisim .cf-success__text {
  max-width: 26em;
  margin: 0 0 32px;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--text-2);
}

/* Ekran okuyucu durum bölgesi (görsel olarak gizli) */
#iletisim .cf-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ===== 30-home-kanit.css ===== */
/* Anasayfa · Kanıt şeridi (#kanit): 4 büyük sayı, sayaçlı */
#kanit {
  background: var(--white);
  padding-block: clamp(56px, 7vw, 104px);
  border-bottom: 1px solid var(--line);
}

/* ===== 31-home-manifesto.css ===== */
/* Anasayfa · Manifesto (#neden): tek cümlelik büyük tipografi, kaydırdıkça aydınlanır */
#neden {
  background: var(--white);
  padding-block: clamp(96px, 14vw, 220px);
}

#neden .display {
  max-width: 22ch;
}

/* ===== 32-home-uc-islev.css ===== */
/* Anasayfa · Bir bank, üç işlev (#uc-islev): büyük ürün görseli + işaret noktaları */
#uc-islev .uc-islev__media {
  aspect-ratio: 703 / 800;
}

@media (min-width: 960px) {
  #uc-islev .split {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }
}

#uc-islev .split__body h2 {
  margin-bottom: clamp(24px, 3vw, 40px);
}

#uc-islev .btn-row {
  margin-top: clamp(28px, 3vw, 40px);
}

/* ===== 33-home-story.css ===== */
/* ==========================================================================
   Anasayfa · Gündüz → gece scroll anlatımı (#gunden-geceye)
   main.js, [data-story] köküne data-step="0..4" yazar ve aktif adıma
   .is-active ekler. Sahne yalnızca CSS + inline SVG'dir.
   ========================================================================== */

#gunden-geceye .muted-dark {
  color: var(--on-dark-3);
}

#gunden-geceye .head {
  margin-bottom: clamp(32px, 4vw, 56px);
}

/* ---------- Yerleşim ---------- */
#gunden-geceye .story__grid {
  position: relative;
}

#gunden-geceye .story__stage-wrap {
  position: sticky;
  top: var(--nav-h-scrolled);
  z-index: 2;
  padding-top: 8px;
  padding-bottom: 12px;
  background: var(--night);
}

/* Mobilde metin sahnenin altına kayarken yumuşak geçiş */
#gunden-geceye .story__stage-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 40px;
  background: linear-gradient(180deg, var(--night), rgba(5, 13, 25, 0));
  pointer-events: none;
}

#gunden-geceye .story__stage {
  position: relative;
  height: 46vh;
  height: 46svh;
  min-height: 260px;
  max-height: 460px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  transform: translateZ(0);
}

#gunden-geceye .story__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
}

#gunden-geceye .story__step {
  min-height: 62vh;
  padding-top: 32px;
  opacity: 0.28;
  transition: opacity 0.6s var(--ease);
}

#gunden-geceye .story__step:last-child {
  min-height: 48vh;
}

#gunden-geceye .story__step.is-active {
  opacity: 1;
}

#gunden-geceye .story__step-time {
  display: block;
  margin-bottom: 14px;
  font-size: var(--fs-kicker);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-bright);
  font-variant-numeric: tabular-nums;
}

#gunden-geceye .story__step h3 {
  font-size: clamp(1.75rem, 1.3rem + 2vw, 3rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin-bottom: 16px;
  max-width: 14ch;
}

#gunden-geceye .story__step p {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--on-dark-2);
  max-width: 26em;
}

@media (min-width: 960px) {
  #gunden-geceye .story__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(48px, 6vw, 96px);
  }

  #gunden-geceye .story__stage-wrap {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    top: calc(50vh - min(37vh, 330px) + 24px);
    padding-top: 0;
    padding-bottom: 0;
    background: none;
  }

  #gunden-geceye .story__stage-wrap::after {
    display: none;
  }

  #gunden-geceye .story__stage {
    height: min(74vh, 660px);
    max-height: none;
  }

  #gunden-geceye .story__steps {
    grid-column: 1;
    grid-row: 1;
  }

  #gunden-geceye .story__step {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 82vh;
    padding-top: 0;
  }

  #gunden-geceye .story__step:first-child {
    min-height: 60vh;
    justify-content: flex-start;
    padding-top: 12vh;
  }

  #gunden-geceye .story__step:last-child {
    min-height: 70vh;
  }
}

/* ---------- Gökyüzü ---------- */
#gunden-geceye .story__sky,
#gunden-geceye .story__sky-layer,
#gunden-geceye .story__stars {
  position: absolute;
  inset: 0;
}

#gunden-geceye .story__sky {
  z-index: -3;
  background: linear-gradient(180deg, #f2a86b 0%, #f8d3a6 48%, #eef0ea 100%);
}

#gunden-geceye .story__sky-layer {
  opacity: 0;
  transition: opacity 1.4s var(--ease);
}

#gunden-geceye .story__sky-layer--noon {
  background: linear-gradient(180deg, #4f9be0 0%, #a3cff2 55%, #e7f2f6 100%);
}

#gunden-geceye .story__sky-layer--dusk {
  background: linear-gradient(180deg, #27356e 0%, #b55d78 52%, #f2a571 100%);
}

#gunden-geceye .story__sky-layer--night {
  background: linear-gradient(180deg, #02070f 0%, #081830 60%, #0e2647 100%);
}

#gunden-geceye[data-step="1"] .story__sky-layer--noon,
#gunden-geceye[data-step="2"] .story__sky-layer--noon,
#gunden-geceye[data-step="3"] .story__sky-layer--dusk,
#gunden-geceye[data-step="4"] .story__sky-layer--night {
  opacity: 1;
}

#gunden-geceye .story__stars {
  z-index: -2;
  opacity: 0;
  transition: opacity 1.4s var(--ease);
  --star: rgba(255, 255, 255, 0.7);
}

/* Parıltı: eskiden filter: brightness() canlandırılıyordu (her kare tüm sahne yeniden
   boyanıyordu). Şimdi %70 parlaklıkta taban (::before) + üstte opaklığı salınan tam
   parlak kopya (::after): yalnızca opacity → GPU'da birleşir, boyama yok. */
#gunden-geceye .story__stars::before,
#gunden-geceye .story__stars::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, var(--star), transparent),
    radial-gradient(1px 1px at 28% 32%, var(--star), transparent),
    radial-gradient(1.5px 1.5px at 46% 12%, var(--star), transparent),
    radial-gradient(1px 1px at 63% 28%, var(--star), transparent),
    radial-gradient(1.5px 1.5px at 78% 9%, var(--star), transparent),
    radial-gradient(1px 1px at 88% 36%, var(--star), transparent),
    radial-gradient(1px 1px at 20% 44%, var(--star), transparent),
    radial-gradient(1px 1px at 55% 40%, var(--star), transparent),
    radial-gradient(1.5px 1.5px at 36% 6%, var(--star), transparent),
    radial-gradient(1px 1px at 94% 20%, var(--star), transparent);
}

#gunden-geceye .story__stars::after {
  --star: #fff;
  opacity: 0;
  animation: story-twinkle 4s ease-in-out infinite alternate;
}

#gunden-geceye[data-step="4"] .story__stars {
  opacity: 1;
}

@keyframes story-twinkle {
  to {
    opacity: 1;
  }
}

/* ---------- Güneş yayı ---------- */
#gunden-geceye .story__arc {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 86%;
  width: 2px;
  height: 66%;
  translate: -1px -100%;
  transform-origin: 50% 100%;
  transform: rotate(-56deg);
  transition: transform 1.8s var(--ease-out);
}

#gunden-geceye[data-step="1"] .story__arc { transform: rotate(-12deg); }
#gunden-geceye[data-step="2"] .story__arc { transform: rotate(18deg); }
#gunden-geceye[data-step="3"] .story__arc { transform: rotate(52deg); }
#gunden-geceye[data-step="4"] .story__arc { transform: rotate(96deg); }

#gunden-geceye .story__sun {
  position: absolute;
  top: 0;
  left: 50%;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  background: radial-gradient(circle, #fffbe8 0%, #ffe08a 45%, #ffc04a 100%);
  box-shadow: 0 0 40px 12px rgba(255, 210, 110, 0.55), 0 0 120px 40px rgba(255, 200, 90, 0.25);
  transition: opacity 1.2s var(--ease), box-shadow 1.2s var(--ease);
}

#gunden-geceye[data-step="0"] .story__sun,
#gunden-geceye[data-step="3"] .story__sun {
  background: radial-gradient(circle, #fff3dc 0%, #ffb45c 55%, #f47c3c 100%);
  box-shadow: 0 0 40px 14px rgba(255, 150, 80, 0.5), 0 0 120px 40px rgba(255, 120, 60, 0.22);
}

#gunden-geceye[data-step="4"] .story__sun {
  opacity: 0;
}

#gunden-geceye .story__moon {
  position: absolute;
  z-index: -1;
  top: 18%;
  right: 18%;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  box-shadow: inset -10px 6px 0 0 #f4f1de;
  opacity: 0;
  translate: 0 20px;
  transition: opacity 1.2s var(--ease), translate 1.6s var(--ease-out);
  filter: drop-shadow(0 0 12px rgba(244, 241, 222, 0.35));
}

/* Ay yalnızca gece görünür; filtreli katman gündüz boşuna çizilmesin */
#gunden-geceye:not([data-step="4"]) .story__moon {
  visibility: hidden;
  transition: opacity 1.2s var(--ease), translate 1.6s var(--ease-out), visibility 0s 1.2s;
}

#gunden-geceye[data-step="4"] .story__moon {
  opacity: 1;
  translate: 0 0;
}

#gunden-geceye .story__ground {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16%;
  background: linear-gradient(180deg, #d9dcd3 0%, #c7cbc0 100%);
  transition: filter 1.4s var(--ease);
}

#gunden-geceye[data-step="3"] .story__ground {
  filter: brightness(0.82) saturate(1.1) hue-rotate(-8deg);
}

#gunden-geceye[data-step="4"] .story__ground {
  filter: brightness(0.25) saturate(0.6);
}

/* ---------- Bank (SVG) ---------- */
#gunden-geceye .story__bench {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 4%;
  width: min(94%, 560px);
  height: auto;
  translate: -50% 0;
  overflow: visible;
}

#gunden-geceye .story__bench * {
  transition: fill 1.2s var(--ease), stroke 1.2s var(--ease), opacity 0.9s var(--ease), filter 1.2s var(--ease);
}

#gunden-geceye .story__pole,
#gunden-geceye .story__block {
  fill: #4da338;
}

#gunden-geceye .story__panel {
  fill: #4da338;
}

#gunden-geceye .story__surface {
  fill: #1d3a63;
}

#gunden-geceye .story__cells {
  stroke: rgba(170, 205, 245, 0.35);
  stroke-width: 1.2;
}

#gunden-geceye .story__seat {
  fill: #c68b54;
}

#gunden-geceye .story__shade {
  fill: rgba(5, 13, 25, 0.28);
  opacity: 0;
}

#gunden-geceye .story__port {
  fill: #2c4a2a;
}

#gunden-geceye .story__phone {
  fill: #0c1626;
  opacity: 0;
}

#gunden-geceye .story__phone-fill {
  fill: #7ed35f;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scaleY(0.15);
}

#gunden-geceye .story__flow {
  stroke: #9dff7a;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 2 12;
  opacity: 0;
  filter: drop-shadow(0 0 4px rgba(126, 211, 95, 0.9));
  animation: story-flow 0.9s linear infinite;
}

@keyframes story-flow {
  to {
    stroke-dashoffset: -14;
  }
}

/* Akış görünmediği adımlarda durur (SVG çizgi animasyonu her kare yeniden boyar) */
#gunden-geceye:is([data-step="0"], [data-step="4"]) .story__flow--down,
#gunden-geceye:is([data-step="0"], [data-step="1"], [data-step="2"]) .story__flow--out {
  animation-play-state: paused;
}

/* Düşük güç: akış ve dolum aynen sürer, yalnızca ışıma filtresi kalkar */
html.is-lowpower #gunden-geceye .story__flow {
  filter: none;
}

/* Panel üretimde: hücreler parlar */
#gunden-geceye[data-step="1"] .story__surface,
#gunden-geceye[data-step="2"] .story__surface,
#gunden-geceye[data-step="3"] .story__surface {
  fill: #3b7fd0;
  filter: drop-shadow(0 0 10px rgba(159, 211, 255, 0.85));
}

#gunden-geceye[data-step="1"] .story__cells,
#gunden-geceye[data-step="2"] .story__cells,
#gunden-geceye[data-step="3"] .story__cells {
  stroke: rgba(220, 240, 255, 0.7);
}

#gunden-geceye[data-step="1"] .story__shade,
#gunden-geceye[data-step="2"] .story__shade {
  opacity: 1;
}

#gunden-geceye[data-step="3"] .story__shade {
  opacity: 0.5;
}

#gunden-geceye[data-step="1"] .story__flow--down,
#gunden-geceye[data-step="2"] .story__flow--down,
#gunden-geceye[data-step="3"] .story__flow--down,
#gunden-geceye[data-step="3"] .story__flow--out,
#gunden-geceye[data-step="4"] .story__flow--out {
  opacity: 1;
}

#gunden-geceye[data-step="3"] .story__port,
#gunden-geceye[data-step="4"] .story__port {
  fill: #9dff7a;
  filter: drop-shadow(0 0 6px #7ed35f);
}

#gunden-geceye[data-step="3"] .story__phone,
#gunden-geceye[data-step="4"] .story__phone,
#gunden-geceye[data-step="3"] .story__phone-fill,
#gunden-geceye[data-step="4"] .story__phone-fill {
  opacity: 1;
}

#gunden-geceye[data-step="3"] .story__phone-fill {
  transform: scaleY(0.6);
  transition: transform 2.4s var(--ease-out), opacity 0.6s var(--ease);
}

#gunden-geceye[data-step="4"] .story__phone-fill {
  transform: scaleY(1);
  transition: transform 2.4s var(--ease-out), opacity 0.6s var(--ease);
}

/* Gece: gövde karanlıkta, şarj noktası ışık */
#gunden-geceye[data-step="4"] .story__pole,
#gunden-geceye[data-step="4"] .story__block,
#gunden-geceye[data-step="4"] .story__panel {
  fill: #24521b;
}

#gunden-geceye[data-step="4"] .story__seat {
  fill: #5d4129;
}

#gunden-geceye[data-step="4"] .story__surface {
  fill: #0b1a2e;
}

#gunden-geceye[data-step="4"] .story__cells {
  stroke: rgba(170, 205, 245, 0.12);
}

#gunden-geceye[data-step="0"] .story__pole,
#gunden-geceye[data-step="0"] .story__block,
#gunden-geceye[data-step="0"] .story__panel,
#gunden-geceye[data-step="3"] .story__pole,
#gunden-geceye[data-step="3"] .story__block,
#gunden-geceye[data-step="3"] .story__panel {
  fill: #3f8f30;
}

/* ---------- HUD ---------- */
#gunden-geceye .story__hud {
  position: absolute;
  z-index: 3;
  top: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

#gunden-geceye .story__time,
#gunden-geceye .story__battery,
#gunden-geceye .story__readout {
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / calc(0.18 + 0.04 * var(--glass-solid)));
  -webkit-backdrop-filter: var(--glass, blur(14px) saturate(160%));
  backdrop-filter: var(--glass, blur(14px) saturate(160%));
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

#gunden-geceye .story__time {
  position: relative;
  display: inline-grid;
  padding: 8px 14px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}

#gunden-geceye .story__time [data-s],
#gunden-geceye .story__readout [data-s] {
  grid-area: 1 / 1;
  opacity: 0;
  translate: 0 8px;
  transition: opacity 0.5s var(--ease), translate 0.6s var(--ease-out);
}

#gunden-geceye .story__battery {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  font-size: 0.8rem;
  font-weight: 600;
}

@media (max-width: 599px) {
  #gunden-geceye .story__battery-label {
    display: none;
  }
}

#gunden-geceye .story__battery-bar {
  position: relative;
  width: 44px;
  height: 14px;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: 4px;
  padding: 1.5px;
}

#gunden-geceye .story__battery-bar::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 3.5px;
  width: 2.5px;
  height: 4px;
  border-radius: 0 2px 2px 0;
  background: rgba(255, 255, 255, 0.85);
}

#gunden-geceye .story__battery-bar i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: #7ed35f;
  transform-origin: left;
  transform: scaleX(0.25);
  transition: transform 1.6s var(--ease-out);
}

#gunden-geceye[data-step="1"] .story__battery-bar i { transform: scaleX(0.45); }
#gunden-geceye[data-step="2"] .story__battery-bar i { transform: scaleX(0.92); }
#gunden-geceye[data-step="3"] .story__battery-bar i { transform: scaleX(0.74); }
#gunden-geceye[data-step="4"] .story__battery-bar i { transform: scaleX(0.48); }

#gunden-geceye .story__readout {
  position: absolute;
  z-index: 3;
  top: 62px;
  left: 14px;
  display: grid;
  padding: 12px 18px;
  border-radius: 18px;
  min-width: 150px;
}

#gunden-geceye .story__readout strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#gunden-geceye .story__readout span {
  display: block;
  margin-top: 4px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
}

#gunden-geceye[data-step="0"] [data-s="0"],
#gunden-geceye[data-step="1"] [data-s="1"],
#gunden-geceye[data-step="2"] [data-s="2"],
#gunden-geceye[data-step="3"] [data-s="3"],
#gunden-geceye[data-step="4"] [data-s="4"] {
  opacity: 1;
  translate: 0 0;
}

/* Gündüz açık gökyüzünde cam etiketler okunur kalsın */
#gunden-geceye[data-step="1"] :is(.story__time, .story__battery, .story__readout),
#gunden-geceye[data-step="2"] :is(.story__time, .story__battery, .story__readout),
#gunden-geceye[data-step="0"] :is(.story__time, .story__battery, .story__readout) {
  background: rgb(5 13 25 / calc(0.32 + 0.1 * var(--glass-solid)));
}

/* Adım noktaları */
#gunden-geceye .story__dots {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 25px;
  translate: -50% 0;
  display: flex;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 6px;
  border-radius: var(--radius-pill);
  background: rgb(5 13 25 / calc(0.35 + 0.1 * var(--glass-solid)));
  -webkit-backdrop-filter: var(--glass, blur(10px));
  backdrop-filter: var(--glass, blur(10px));
}

#gunden-geceye .story__dots li {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.4);
  font-size: 0;
  overflow: hidden;
  transition: width 0.6s var(--ease-out), background-color 0.4s var(--ease);
}

#gunden-geceye .story__dots li[data-s] {
  opacity: 1;
}

#gunden-geceye[data-step="0"] .story__dots [data-s="0"],
#gunden-geceye[data-step="1"] .story__dots [data-s="1"],
#gunden-geceye[data-step="2"] .story__dots [data-s="2"],
#gunden-geceye[data-step="3"] .story__dots [data-s="3"],
#gunden-geceye[data-step="4"] .story__dots [data-s="4"] {
  width: 26px;
  background: #7ed35f;
}

@media (min-width: 960px) {
  #gunden-geceye .story__hud {
    top: 24px;
    left: 24px;
    right: 24px;
  }

  #gunden-geceye .story__readout {
    top: 76px;
    left: 24px;
    padding: 16px 22px;
  }

  #gunden-geceye .story__readout span {
    font-size: 0.85rem;
  }

  #gunden-geceye .story__dots {
    top: 34px;
    padding: 6px;
  }
}

@media (min-width: 1280px) {
  #gunden-geceye .story__dots {
    top: 26px;
    padding: 4px;
    gap: 2px;
  }

  #gunden-geceye .story__dots li {
    width: auto;
    height: auto;
    padding: 5px 11px;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.72);
    background: transparent;
  }

  #gunden-geceye[data-step="0"] .story__dots [data-s="0"],
  #gunden-geceye[data-step="1"] .story__dots [data-s="1"],
  #gunden-geceye[data-step="2"] .story__dots [data-s="2"],
  #gunden-geceye[data-step="3"] .story__dots [data-s="3"],
  #gunden-geceye[data-step="4"] .story__dots [data-s="4"] {
    width: auto;
    color: var(--night);
    background: #7ed35f;
  }
}

@media (min-width: 960px) {
  #gunden-geceye .story__bench {
    bottom: 3%;
    width: min(78%, 600px);
  }
}

.js #gunden-geceye:not(.is-inview) .story__flow,
.js #gunden-geceye:not(.is-inview) .story__stars::after,
#gunden-geceye:not([data-step="4"]) .story__stars::after {
  animation-play-state: paused;
}

/* ===== 34-home-galeri.css ===== */
/* Anasayfa · Kullanım alanları yatay galerisi (#alanlar) — js/carousel.js */
#alanlar .head {
  margin-bottom: clamp(32px, 4vw, 56px);
}

#alanlar .galeri__intro {
  display: grid;
  gap: 18px;
  justify-items: start;
}

@media (min-width: 960px) {
  #alanlar .galeri__intro {
    justify-self: end;
  }
}

/* ===== 35-home-kesintisiz.css ===== */
/* Anasayfa · Dayanıklılık / afet (#kesintisiz): koyu bant, kısa mesaj */
#kesintisiz .kesintisiz__media {
  aspect-ratio: 4 / 5;
}

@media (min-width: 600px) {
  #kesintisiz .kesintisiz__media {
    aspect-ratio: 4 / 3;
  }
}

#kesintisiz .kesintisiz__media img {
  filter: saturate(0.85) brightness(0.9);
}

#kesintisiz .kesintisiz__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 13, 25, 0.1) 30%, rgba(5, 13, 25, 0.85) 100%);
  pointer-events: none;
}

#kesintisiz .kesintisiz__caption {
  position: absolute;
  z-index: 1;
  left: clamp(20px, 3vw, 32px);
  right: clamp(20px, 3vw, 32px);
  bottom: clamp(20px, 3vw, 32px);
  display: grid;
  gap: 10px;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--on-dark-2);
}

#kesintisiz .kesintisiz__caption strong {
  color: var(--on-dark);
}

#kesintisiz .kesintisiz__caption span + span {
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

#kesintisiz .kesintisiz__facts {
  list-style: none;
  margin: clamp(32px, 4vw, 48px) 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

#kesintisiz .kesintisiz__facts li {
  display: grid;
  gap: 2px;
  padding-block: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

@media (min-width: 640px) {
  #kesintisiz .kesintisiz__facts li {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 24px;
    align-items: baseline;
  }
}

#kesintisiz .kesintisiz__facts strong {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--on-dark);
}

#kesintisiz .kesintisiz__facts span {
  color: var(--on-dark-2);
  font-size: 0.95rem;
}

/* ===== 36-home-surec.css ===== */
/* Anasayfa · Kurumlar için süreç (#kurumlar): Keşif → Kurulum → İzleme */
#kurumlar {
  background: var(--white);
}

#kurumlar .surec__cta {
  margin-top: clamp(32px, 4vw, 56px);
}

/* ===== 40-urun-hero.css ===== */
/* Ürün · Sayfa başı (.urun-hero): solda büyük başlık, sağda büyük ürün görseli.
   Boşluklar ve container diğer alt sayfalarla aynı (.page-hero, .container). */
.urun-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}

@media (min-width: 1024px) {
  .urun-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  }
}

.urun-hero__content {
  max-width: 660px;
}

.urun-hero .urun-hero__title {
  max-width: 12ch;
}

.urun-hero__title .hl {
  color: var(--accent);
}

.urun-hero__actions {
  margin-top: clamp(28px, 3vw, 40px);
}

.js .urun-hero .urun-hero__actions.reveal { --rd: 0.5s; }
.js .urun-hero .urun-hero__media.reveal { --rd: 0.15s; }

/* Görsel */
.urun-hero__media {
  position: relative;
  width: 100%;
  max-width: 640px;
  justify-self: center;
}

@media (min-width: 1024px) {
  .urun-hero__media {
    justify-self: end;
  }
}

.urun-hero__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--paper-2);
  box-shadow: var(--shadow-lg);
  transform: translateZ(0);
}

@media (min-width: 600px) and (max-width: 1023px) {
  .urun-hero__frame {
    aspect-ratio: 5 / 4;
  }
}

@media (min-width: 1024px) {
  .urun-hero__frame {
    aspect-ratio: auto;
    height: clamp(560px, calc(100vh - var(--nav-h) - 120px), 760px);
  }
}

.urun-hero__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% 15%;
  animation: urun-hero-drift 18s ease-in-out infinite alternate;
}

@keyframes urun-hero-drift {
  from {
    transform: scale(1.02) translate(0, 0);
  }

  to {
    transform: scale(1.07) translate(-1%, 0.5%);
  }
}

/* Cam rozetler: .glass-badge (styles.css §6). Çip sağ üstte. */
.urun-hero__chip {
  left: auto;
  bottom: auto;
  right: 16px;
  top: 16px;
  gap: 8px;
  padding: 8px 14px;
  font-size: 0.8125rem;
  animation: urun-hero-float 6s ease-in-out infinite alternate;
}

.urun-hero__chip svg {
  width: 16px;
  height: 16px;
  color: var(--accent-strong);
}

@keyframes urun-hero-float {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-8px);
  }
}

@media (min-width: 768px) {
  .urun-hero__chip {
    left: auto;
    bottom: auto;
    right: 24px;
    top: 24px;
  }
}

.js .urun-hero:not(.is-inview) .urun-hero__frame img,
.js .urun-hero:not(.is-inview) .urun-hero__chip {
  animation-play-state: paused;
}

/* ===== 41-urun-anatomi.css ===== */
/* Ürün · Anatomi (#urun-anatomi): işaretli ürün görseli + dört parça */
#urun-anatomi .urun-anatomi__media {
  aspect-ratio: 703 / 800;
}

@media (min-width: 960px) {
  #urun-anatomi .urun-anatomi__split {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }
}

#urun-anatomi .split__body h2 {
  margin-bottom: clamp(24px, 3vw, 40px);
}

#urun-anatomi .hotspot__label {
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease), transform 0.4s var(--ease-out);
}

/* Parça listesi: ince ayraçlı satırlar */
#urun-anatomi .urun-anatomi__parts {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

#urun-anatomi .urun-anatomi__parts li {
  position: relative;
  padding: 22px 0 22px 28px;
  border-bottom: 1px solid var(--line);
  transition: background-color 0.4s var(--ease);
}

#urun-anatomi .urun-anatomi__parts li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 33px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(77, 163, 56, 0.25);
  transition: box-shadow 0.4s var(--ease), transform 0.4s var(--ease-out);
}

#urun-anatomi .urun-anatomi__parts h3 {
  font-size: 1.375rem;
  margin-bottom: 6px;
}

#urun-anatomi .urun-anatomi__parts p {
  color: var(--text-2);
  max-width: 32em;
}

/* Satır ↔ işaret noktası eşleşmesi */
#urun-anatomi .urun-anatomi__parts li:hover::before {
  box-shadow: 0 0 0 6px rgba(77, 163, 56, 0.18);
  transform: scale(1.15);
}

#urun-anatomi:has(.urun-anatomi__parts li[data-part="panel"]:hover) .urun-anatomi__spot[data-part="panel"] .hotspot__label,
#urun-anatomi:has(.urun-anatomi__parts li[data-part="govde"]:hover) .urun-anatomi__spot[data-part="govde"] .hotspot__label,
#urun-anatomi:has(.urun-anatomi__parts li[data-part="oturma"]:hover) .urun-anatomi__spot[data-part="oturma"] .hotspot__label,
#urun-anatomi:has(.urun-anatomi__parts li[data-part="ayak"]:hover) .urun-anatomi__spot[data-part="ayak"] .hotspot__label {
  background: var(--text);
  color: #fff;
  transform: scale(1.08);
}

#urun-anatomi:has(.urun-anatomi__spot[data-part="panel"]:hover) .urun-anatomi__parts li[data-part="panel"]::before,
#urun-anatomi:has(.urun-anatomi__spot[data-part="govde"]:hover) .urun-anatomi__parts li[data-part="govde"]::before,
#urun-anatomi:has(.urun-anatomi__spot[data-part="oturma"]:hover) .urun-anatomi__parts li[data-part="oturma"]::before,
#urun-anatomi:has(.urun-anatomi__spot[data-part="ayak"]:hover) .urun-anatomi__parts li[data-part="ayak"]::before {
  box-shadow: 0 0 0 6px rgba(77, 163, 56, 0.18);
  transform: scale(1.15);
}

/* Dar ekranda etiketler küçülür */
@media (max-width: 420px) {
  #urun-anatomi .hotspot__label {
    padding: 5px 10px;
    font-size: 0.75rem;
  }
}

/* ===== 42-urun-nasil.css ===== */
/* Ürün · Nasıl çalışır (#urun-nasil): koyu bant, gündüz/gece anahtarı ve
   güneşten şarj çıkışına akan enerji hattı. Anahtar yalnızca CSS: bölümün
   başındaki iki radyo düğmesi, kardeş seçicilerle sahneyi değiştirir. */
#urun-nasil {
  overflow: clip;
  isolation: isolate;
}

#urun-nasil > .container {
  position: relative;
  z-index: 1;
}

/* Radyo düğmeleri görünmez ama klavyeyle seçilebilir */
#urun-nasil .urun-nasil__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

/* Gökyüzü: gündüz sıcak hale, gece serin ışık ve yıldızlar */
#urun-nasil .urun-nasil__sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

#urun-nasil .urun-nasil__sky span {
  position: absolute;
  inset: 0;
  transition: opacity 1.4s var(--ease);
}

#urun-nasil .urun-nasil__sky-day {
  background:
    radial-gradient(60% 55% at 88% 0%, rgba(255, 206, 110, 0.16) 0%, rgba(126, 211, 95, 0.06) 45%, rgba(5, 13, 25, 0) 75%);
  animation: urun-nasil-breathe 9s ease-in-out infinite alternate;
}

#urun-nasil .urun-nasil__sky-night {
  opacity: 0;
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(1px 1px at 27% 8%, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 46% 22%, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(1px 1px at 63% 12%, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 30%, rgba(255, 255, 255, 0.45), transparent 60%),
    radial-gradient(1px 1px at 91% 9%, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(1px 1px at 36% 38%, rgba(255, 255, 255, 0.35), transparent 60%),
    radial-gradient(55% 50% at 85% 0%, rgba(110, 150, 230, 0.16) 0%, rgba(5, 13, 25, 0) 72%);
}

@keyframes urun-nasil-breathe {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.08) translate(-2%, 2%);
  }
}

#urun-mod-gece:checked ~ .urun-nasil__sky .urun-nasil__sky-day {
  opacity: 0;
}

#urun-mod-gece:checked ~ .urun-nasil__sky .urun-nasil__sky-night {
  opacity: 1;
}

/* Başlık */
#urun-nasil .urun-nasil__dim {
  color: var(--on-dark-3);
}

#urun-nasil .urun-nasil__intro {
  display: grid;
  gap: 24px;
  justify-items: start;
}

@media (min-width: 960px) {
  #urun-nasil .urun-nasil__intro {
    justify-self: end;
    max-width: 34em;
  }
}

/* Gündüz / gece anahtarı */
#urun-nasil .urun-nasil__toggle {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

#urun-nasil .urun-nasil__toggle label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 22px;
  border-radius: var(--radius-pill);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--on-dark-2);
  cursor: pointer;
  user-select: none;
  transition: color 0.4s var(--ease);
}

#urun-nasil .urun-nasil__toggle label:hover {
  color: var(--on-dark);
}

#urun-nasil .urun-nasil__toggle svg {
  width: 18px;
  height: 18px;
}

#urun-nasil .urun-nasil__toggle-thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: var(--radius-pill);
  background: var(--on-dark);
  transition: transform 0.6s var(--ease-out);
}

#urun-mod-gece:checked ~ .container .urun-nasil__toggle-thumb {
  transform: translateX(100%);
}

#urun-mod-gunduz:checked ~ .container label[for="urun-mod-gunduz"],
#urun-mod-gece:checked ~ .container label[for="urun-mod-gece"] {
  color: var(--night);
}

#urun-mod-gunduz:focus-visible ~ .container label[for="urun-mod-gunduz"],
#urun-mod-gece:focus-visible ~ .container label[for="urun-mod-gece"] {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Enerji hattı. Mobil: dikey (nokta solda). ≥960: yatay, altı kolon.
   Darbe her segmentte 0,8 sn yol alır; noktalar darbe gelince parlar.
   -------------------------------------------------------------------------- */
#urun-nasil .urun-flow {
  list-style: none;
  margin: clamp(48px, 6vw, 88px) 0 0;
  padding: 0;
}

#urun-nasil .urun-flow__step {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 28px;
  grid-template-areas:
    "dot title icon"
    ". text icon";
  column-gap: 18px;
  row-gap: 4px;
  padding-bottom: 30px;
}

#urun-nasil .urun-flow__step:last-child {
  padding-bottom: 0;
}

#urun-nasil .urun-flow__step > :is(svg, .urun-flow__dot, h3, p) {
  transition: opacity 0.7s var(--ease);
}

#urun-nasil .urun-flow__icon {
  grid-area: icon;
  width: 28px;
  height: 28px;
  color: var(--accent-bright);
}

#urun-nasil .urun-flow__dot {
  grid-area: dot;
  align-self: center;
  justify-self: center;
  position: relative;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent-bright);
  box-shadow: 0 0 0 6px rgba(126, 211, 95, 0.12);
}

#urun-nasil .urun-flow__dot::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  background: rgba(126, 211, 95, 0.45);
  opacity: 0;
  transform: scale(0.6);
  animation: urun-dot-d 4.8s linear calc(var(--k) * 0.8s) infinite;
}

#urun-nasil .urun-flow__step h3 {
  grid-area: title;
  font-size: 1.1875rem;
  letter-spacing: -0.015em;
}

#urun-nasil .urun-flow__step p {
  grid-area: text;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--on-dark-2);
}

/* Segment: bu noktadan bir sonrakine */
#urun-nasil .urun-flow__line {
  position: absolute;
  left: 10px;
  top: 22px;
  width: 2px;
  height: calc(100% - 14px);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}

#urun-nasil .urun-flow__line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(126, 211, 95, 0) 0%, var(--accent-bright) 70%, #fff 100%);
  transform: translateY(-100%);
  animation: urun-run-dv 4.8s linear calc(var(--k) * 0.8s) infinite;
}

@media (min-width: 960px) {
  #urun-nasil .urun-flow {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  #urun-nasil .urun-flow__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 14px;
    text-align: center;
  }

  #urun-nasil .urun-flow__icon {
    width: 40px;
    height: 40px;
    margin-bottom: 26px;
  }

  #urun-nasil .urun-flow__dot {
    margin-bottom: 28px;
  }

  #urun-nasil .urun-flow__step h3 {
    margin-bottom: 8px;
  }

  #urun-nasil .urun-flow__step p {
    max-width: 13em;
  }

  /* Nokta merkezi: 40 + 26 + 5,5 px */
  #urun-nasil .urun-flow__line {
    left: calc(50% + 16px);
    top: 70.5px;
    width: calc(100% - 32px);
    height: 2px;
  }

  #urun-nasil .urun-flow__line::after {
    background: linear-gradient(90deg, rgba(126, 211, 95, 0) 0%, var(--accent-bright) 70%, #fff 100%);
    transform: translateX(-100%);
    animation-name: urun-run-dh;
  }
}

@keyframes urun-run-dv {
  0% { transform: translateY(-100%); }
  16.667%, 100% { transform: translateY(100%); }
}

@keyframes urun-run-dh {
  0% { transform: translateX(-100%); }
  16.667%, 100% { transform: translateX(100%); }
}

@keyframes urun-run-nv {
  0% { transform: translateY(-100%); }
  33.333%, 100% { transform: translateY(100%); }
}

@keyframes urun-run-nh {
  0% { transform: translateX(-100%); }
  33.333%, 100% { transform: translateX(100%); }
}

@keyframes urun-dot-d {
  0% { opacity: 0; transform: scale(0.6); }
  3% { opacity: 1; transform: scale(1.3); }
  15%, 100% { opacity: 0; transform: scale(2.4); }
}

@keyframes urun-dot-n {
  0% { opacity: 0; transform: scale(0.6); }
  6% { opacity: 1; transform: scale(1.3); }
  30%, 100% { opacity: 0; transform: scale(2.4); }
}

/* Gece: güneş, panel ve şarj kontrol söner; akış bataryadan başlar */
#urun-mod-gece:checked ~ .container .urun-flow__step:nth-child(-n+3) > :is(svg, .urun-flow__dot, h3, p) {
  opacity: 0.26;
}

#urun-mod-gece:checked ~ .container .urun-flow__step:nth-child(-n+3) .urun-flow__line::after,
#urun-mod-gece:checked ~ .container .urun-flow__step:nth-child(-n+3) .urun-flow__dot::after {
  animation: none;
  opacity: 0;
}

#urun-mod-gece:checked ~ .container .urun-flow__step:nth-child(n+4) .urun-flow__line::after {
  animation: urun-run-nv 2.4s linear calc((var(--k) - 3) * 0.8s) infinite;
}

#urun-mod-gece:checked ~ .container .urun-flow__step:nth-child(n+4) .urun-flow__dot::after {
  animation: urun-dot-n 2.4s linear calc((var(--k) - 3) * 0.8s) infinite;
}

@media (min-width: 960px) {
  #urun-mod-gece:checked ~ .container .urun-flow__step:nth-child(n+4) .urun-flow__line::after {
    animation-name: urun-run-nh;
  }
}

/* Batarya gece öne çıkar */
#urun-nasil .urun-flow__step--store .urun-flow__icon {
  transition: color 0.6s var(--ease), transform 0.8s var(--ease-out);
}

#urun-mod-gece:checked ~ .container .urun-flow__step--store .urun-flow__icon {
  color: #fff;
  transform: scale(1.12);
}

.js #urun-nasil:not(.is-inview) .urun-flow__line::after,
.js #urun-nasil:not(.is-inview) .urun-flow__dot::after,
.js #urun-nasil:not(.is-inview) .urun-nasil__sky-day {
  animation-play-state: paused;
}

/* --------------------------------------------------------------------------
   Mod özeti: büyük sayı + iki cümle; gündüz/gece arasında geçiş
   -------------------------------------------------------------------------- */
#urun-nasil .urun-nasil__modes {
  display: grid;
  margin-top: clamp(48px, 6vw, 88px);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

#urun-nasil .urun-nasil__mode {
  grid-area: 1 / 1;
  display: grid;
  gap: 12px 48px;
  align-items: center;
  transition: opacity 0.6s var(--ease), transform 0.8s var(--ease-out), visibility 0s linear 0s;
}

@media (min-width: 768px) {
  #urun-nasil .urun-nasil__mode {
    grid-template-columns: auto minmax(0, 1fr);
  }
}

#urun-nasil .urun-nasil__mode-value {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--on-dark);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#urun-nasil .urun-nasil__mode-value span {
  margin-left: 0.14em;
  font-size: 0.42em;
  letter-spacing: -0.01em;
  color: var(--accent-bright);
}

#urun-nasil .urun-nasil__mode-text {
  margin: 0;
  max-width: 36em;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--on-dark-2);
}

#urun-nasil .urun-nasil__mode-text strong {
  color: var(--on-dark);
  font-weight: 600;
}

#urun-nasil .urun-nasil__mode--night,
#urun-mod-gece:checked ~ .container .urun-nasil__mode--day {
  opacity: 0;
  transform: translateY(16px);
  visibility: hidden;
  transition: opacity 0.5s var(--ease), transform 0.8s var(--ease-out), visibility 0s linear 0.5s;
}

#urun-mod-gece:checked ~ .container .urun-nasil__mode--night {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition: opacity 0.6s var(--ease) 0.2s, transform 0.8s var(--ease-out) 0.2s, visibility 0s linear 0s;
}

/* ===== 43-urun-neden.css ===== */
/* Ürün · Neden ChargeON (#urun-neden): solda yapışkan başlık, sağda büyük
   tipografili dört gerekçe (kart yok, ince ayraçlar) */
#urun-neden .urun-neden__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(40px, 5vw, 64px);
}

#urun-neden .urun-neden__head > * + * {
  margin-top: var(--space-5);
}

#urun-neden .urun-neden__head h2 {
  max-width: 12ch;
}

#urun-neden .urun-neden__head .t-lead {
  max-width: 26em;
}

@media (min-width: 960px) {
  #urun-neden .urun-neden__grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: var(--space-8);
    align-items: start;
  }

  #urun-neden .urun-neden__head {
    position: sticky;
    top: calc(var(--nav-h) + 48px);
  }
}

#urun-neden .urun-neden__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(12, 22, 38, 0.12);
}

#urun-neden .urun-neden__list li {
  padding-block: clamp(28px, 3.4vw, 48px);
  border-bottom: 1px solid rgba(12, 22, 38, 0.12);
}

#urun-neden .urun-neden__list h3 {
  font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.75rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin-bottom: 14px;
  transition: color 0.4s var(--ease), transform 0.6s var(--ease-out);
}

#urun-neden .urun-neden__list p {
  max-width: 34em;
  color: var(--text-2);
}

@media (hover: hover) {
  #urun-neden .urun-neden__list li:hover h3 {
    color: var(--accent-strong);
    transform: translateX(6px);
  }
}

/* Formül: Bank + Gölgelik + Şarj noktası = ChargeON */
#urun-neden .urun-neden__formula {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: clamp(28px, 3vw, 40px);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
}

#urun-neden .urun-neden__formula span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  border-radius: var(--radius-pill);
  background: var(--white);
  box-shadow: inset 0 0 0 1px rgba(12, 22, 38, 0.08);
}

#urun-neden .urun-neden__formula svg {
  width: 16px;
  height: 16px;
  color: var(--accent-strong);
}

#urun-neden .urun-neden__formula strong i {
  font-family: var(--font-text);
  font-size: 0.9375rem;
}

#urun-neden .urun-neden__formula i {
  font-style: normal;
  font-weight: 500;
  color: var(--text-3);
}

#urun-neden .urun-neden__formula strong {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: var(--accent-strong);
}

/* ===== 44-urun-degerler.css ===== */
/* Ürün · Bir bakışta (#urun-degerler): dört ana değer + teknik sayfaya geçiş */
#urun-degerler .urun-degerler__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  margin-top: clamp(48px, 5vw, 72px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

#urun-degerler .urun-degerler__foot p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-3);
}

@media (max-width: 420px) {
  #urun-degerler .stat-row__value {
    font-size: 2.375rem;
  }
}

/* ===== 50-teknik-hero.css ===== */
/* Teknik · Sayfa başı (#top.teknik-hero): büyük başlık + sayfa içi bağlantılar */
.teknik-hero .page-hero__title {
  max-width: 12ch;
}

.teknik-hero__jump {
  margin-top: clamp(28px, 4vw, 48px);
}

.teknik-hero__jump ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.teknik-hero__jump a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid rgba(12, 22, 38, 0.14);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.55);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.teknik-hero__jump a:hover {
  background: var(--white);
  border-color: rgba(12, 22, 38, 0.3);
  color: var(--text);
  text-decoration: none;
}

.teknik-hero__jump a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Bir bakışta: dört temel değer (masaüstünde sağ kolonda) */
.teknik-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(40px, 5vw, 64px);
  align-items: end;
}

@media (min-width: 1024px) {
  .teknik-hero__grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  }
}

.teknik-hero__glance {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid rgba(12, 22, 38, 0.14);
}

.teknik-hero__glance > div {
  display: grid;
  gap: 6px;
  padding: 20px 16px 20px 0;
  border-bottom: 1px solid rgba(12, 22, 38, 0.14);
  min-width: 0;
}

.teknik-hero__glance > div:nth-child(even) {
  padding-left: 20px;
  border-left: 1px solid rgba(12, 22, 38, 0.14);
}

.teknik-hero__glance dt {
  font-size: 0.875rem;
  color: var(--text-2);
}

.teknik-hero__glance dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.teknik-hero__glance dd span {
  margin-left: 0.18em;
  font-size: 0.45em;
  letter-spacing: -0.01em;
  color: var(--accent-strong);
}

/* ===== 51-teknik-3d.css ===== */
/* Teknik · İnteraktif 3D (#tasarim-3d): koyu bant, büyük sahne, sade kontroller.
   Mantık js/viewer3d.js'te ([data-v3d] kökü ve data-v3d-* öğelerine bağlı).
   JS'in oluşturduğu .v3d-hotspot düğmelerinin tüm görünümü burada. */

#tasarim-3d .teknik-3d {
  position: relative;
}

/* Sahne */
#tasarim-3d .teknik-3d__stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: clamp(380px, 118vw, 540px);
  border-radius: var(--radius-lg);
  background: var(--night);
}

/* Gündüz zemini ayrı katmanda: gece geçişinde köşelerde açık renk kılcal çizgi kalmaz */
#tasarim-3d .teknik-3d__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(110% 80% at 50% 0%, #ffffff 0%, rgba(255, 255, 255, 0) 62%),
    linear-gradient(180deg, #e6eef4 0%, var(--paper) 58%, #e6ebde 100%);
}

@media (min-width: 600px) {
  #tasarim-3d .teknik-3d__stage {
    height: clamp(440px, 70vw, 600px);
  }
}

@media (min-width: 1024px) {
  #tasarim-3d .teknik-3d__stage {
    height: clamp(560px, 50vw, 720px);
    border-radius: var(--radius-xl);
  }
}

/* Gece: sahne zemini koyulaşır */
#tasarim-3d .teknik-3d__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 55% at 50% 100%, rgba(126, 211, 95, 0.16) 0%, rgba(126, 211, 95, 0) 70%),
    linear-gradient(180deg, var(--night) 0%, var(--night-2) 60%, var(--night-3) 100%);
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}

#tasarim-3d .teknik-3d.is-night .teknik-3d__stage::before {
  opacity: 1;
}

#tasarim-3d .teknik-3d__canvas {
  position: absolute;
  inset: 0;
  cursor: grab;
}

#tasarim-3d .teknik-3d__canvas:active {
  cursor: grabbing;
}

#tasarim-3d .teknik-3d__canvas canvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
}

/* İşaret noktaları (JS boş .v3d-hotspot düğmelerini üretir; numara yok) */
#tasarim-3d .teknik-3d__hotspots {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#tasarim-3d .teknik-3d__hotspots .v3d-hotspot {
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 4px 14px rgba(5, 13, 25, 0.22);
  transition: background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
  will-change: transform;
}

#tasarim-3d .teknik-3d__hotspots .v3d-hotspot::before {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: var(--accent);
  transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

#tasarim-3d .teknik-3d__hotspots .v3d-hotspot::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  animation: teknik-3d-pulse 2.4s var(--ease-out) infinite;
}

#tasarim-3d .teknik-3d__hotspots .v3d-hotspot:hover,
#tasarim-3d .teknik-3d__hotspots .v3d-hotspot:focus-visible,
#tasarim-3d .teknik-3d__hotspots .v3d-hotspot.is-active {
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(77, 163, 56, 0.35), 0 6px 18px rgba(5, 13, 25, 0.28);
}

#tasarim-3d .teknik-3d__hotspots .v3d-hotspot:hover::before,
#tasarim-3d .teknik-3d__hotspots .v3d-hotspot:focus-visible::before,
#tasarim-3d .teknik-3d__hotspots .v3d-hotspot.is-active::before {
  transform: scale(1.5);
}

#tasarim-3d .teknik-3d__hotspots .v3d-hotspot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

#tasarim-3d .teknik-3d__hotspots .v3d-hotspot.is-behind {
  opacity: 0.4;
}

#tasarim-3d .teknik-3d.is-dims .teknik-3d__hotspots .v3d-hotspot {
  opacity: 0.3;
}

.js #tasarim-3d:not(.is-inview) .teknik-3d__hotspots .v3d-hotspot::after {
  animation-play-state: paused;
}

@keyframes teknik-3d-pulse {
  0% {
    transform: scale(0.7);
    opacity: 0.9;
  }

  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* Mod rozeti */
#tasarim-3d .teknik-3d__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  /* 3D canvas'ın üstünde: cam yerine neredeyse opak zemin (her kare bulanıklaştırma yok) */
  background: rgba(255, 255, 255, 0.92);
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 600;
  pointer-events: none;
  transition: background-color 0.6s var(--ease), color 0.6s var(--ease);
}

#tasarim-3d .teknik-3d__badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f2b632;
  box-shadow: 0 0 0 3px rgba(242, 182, 50, 0.25);
  transition: background-color 0.6s var(--ease), box-shadow 0.6s var(--ease);
}

#tasarim-3d .teknik-3d.is-night .teknik-3d__badge {
  background: rgba(255, 255, 255, 0.1);
  color: var(--on-dark);
}

#tasarim-3d .teknik-3d.is-night .teknik-3d__badge::before {
  background: var(--accent-bright);
  box-shadow: 0 0 0 3px rgba(126, 211, 95, 0.25), 0 0 10px rgba(126, 211, 95, 0.8);
}

/* İpucu (yalnızca geniş ekranda) */
#tasarim-3d .teknik-3d__hint {
  display: none;
  position: absolute;
  top: 16px;
  right: 16px;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.6);
  color: var(--text-2);
  font-size: 0.8125rem;
  pointer-events: none;
  transition: background-color 0.6s var(--ease), color 0.6s var(--ease);
}

#tasarim-3d .teknik-3d__hint svg {
  width: 15px;
  height: 15px;
  color: var(--accent-strong);
}

#tasarim-3d .teknik-3d.is-night .teknik-3d__hint {
  background: rgba(255, 255, 255, 0.08);
  color: var(--on-dark-2);
}

#tasarim-3d .teknik-3d.is-night .teknik-3d__hint svg {
  color: var(--accent-bright);
}

@media (min-width: 600px) {
  #tasarim-3d .teknik-3d[data-state="ready"] .teknik-3d__hint {
    display: inline-flex;
  }
}

/* Seçili parça başlığı */
#tasarim-3d .teknik-3d__caption {
  position: absolute;
  left: 50%;
  bottom: 18px;
  max-width: calc(100% - 32px);
  margin: 0;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  background: var(--text);
  color: var(--on-dark);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 10px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease-out);
}

#tasarim-3d .teknik-3d__caption.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

#tasarim-3d .teknik-3d.is-night .teknik-3d__caption {
  background: var(--white);
  color: var(--text);
}

/* Yükleniyor / yedek görsel */
#tasarim-3d .teknik-3d__loading,
#tasarim-3d .teknik-3d__fallback {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--text-2);
  font-size: 0.9375rem;
}

#tasarim-3d .teknik-3d[data-state="loading"] .teknik-3d__loading,
#tasarim-3d .teknik-3d[data-state="idle"] .teknik-3d__fallback,
#tasarim-3d .teknik-3d[data-state="fallback"] .teknik-3d__fallback {
  display: flex;
}

#tasarim-3d .teknik-3d__spinner {
  width: 32px;
  height: 32px;
  border: 2px solid rgba(12, 22, 38, 0.12);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: teknik-3d-spin 0.9s linear infinite;
}

@keyframes teknik-3d-spin {
  to {
    transform: rotate(360deg);
  }
}

#tasarim-3d .teknik-3d__fallback {
  padding: clamp(16px, 3vw, 40px);
}

#tasarim-3d .teknik-3d__fallback img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  border-radius: var(--radius);
  object-fit: contain;
}

#tasarim-3d .teknik-3d[data-state="idle"] .teknik-3d__badge,
#tasarim-3d .teknik-3d[data-state="fallback"] .teknik-3d__badge,
#tasarim-3d .teknik-3d[data-state="idle"] .teknik-3d__toolbar,
#tasarim-3d .teknik-3d[data-state="fallback"] .teknik-3d__toolbar {
  display: none;
}

/* Kontroller */
#tasarim-3d .teknik-3d__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
}

#tasarim-3d .teknik-3d__seg {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.05);
  max-width: 100%;
}

#tasarim-3d .teknik-3d__seg-btn {
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--on-dark-2);
  font-family: var(--font-text);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

#tasarim-3d .teknik-3d__seg-btn:hover {
  color: var(--on-dark);
  background: rgba(255, 255, 255, 0.06);
}

#tasarim-3d .teknik-3d__seg-btn[aria-pressed="true"] {
  background: var(--white);
  color: var(--text);
}

#tasarim-3d .teknik-3d__toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#tasarim-3d .teknik-3d__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--on-dark);
  font-family: var(--font-text);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

#tasarim-3d .teknik-3d__toggle svg {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--accent-bright);
  transition: color var(--dur-fast) var(--ease);
}

#tasarim-3d .teknik-3d__toggle:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.4);
}

#tasarim-3d .teknik-3d__toggle[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--night);
}

#tasarim-3d .teknik-3d__toggle[aria-pressed="true"] svg {
  color: var(--night);
}

#tasarim-3d .teknik-3d__toggle[aria-pressed="true"]:hover {
  background: var(--accent-bright);
  border-color: var(--accent-bright);
}

#tasarim-3d .teknik-3d__seg-btn:focus-visible,
#tasarim-3d .teknik-3d__toggle:focus-visible,
#tasarim-3d .teknik-3d__part:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
}

@media (max-width: 599px) {
  #tasarim-3d .teknik-3d__toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  #tasarim-3d .teknik-3d__seg {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #tasarim-3d .teknik-3d__seg-btn {
    padding: 0 4px;
  }

  #tasarim-3d .teknik-3d__toggles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #tasarim-3d .teknik-3d__toggle {
    flex-direction: column;
    gap: 6px;
    min-height: 64px;
    padding: 8px 4px;
    border-radius: var(--radius);
    font-size: 0.8125rem;
    white-space: normal;
    text-align: center;
  }
}

/* Parçalar: kart değil, ince çizgili sekme sırası */
#tasarim-3d .teknik-3d__parts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 32px;
  list-style: none;
  margin: clamp(32px, 4vw, 56px) 0 0;
  padding: 0;
}

@media (min-width: 600px) {
  #tasarim-3d .teknik-3d__parts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  #tasarim-3d .teknik-3d__parts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

#tasarim-3d .teknik-3d__part {
  position: relative;
  display: grid;
  gap: 6px;
  width: 100%;
  height: 100%;
  padding: 20px 0 24px;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  align-content: start;
}

#tasarim-3d .teknik-3d__part::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  background: var(--accent-bright);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease-out);
}

#tasarim-3d .teknik-3d__part[aria-pressed="true"]::before,
#tasarim-3d .teknik-3d__part.is-hover::before {
  transform: scaleX(1);
}

#tasarim-3d .teknik-3d__part-title {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--on-dark);
}

#tasarim-3d .teknik-3d__part-text {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--on-dark-3);
  transition: color var(--dur-fast) var(--ease);
}

#tasarim-3d .teknik-3d__part:hover .teknik-3d__part-text,
#tasarim-3d .teknik-3d__part[aria-pressed="true"] .teknik-3d__part-text,
#tasarim-3d .teknik-3d__part.is-hover .teknik-3d__part-text {
  color: var(--on-dark-2);
}

@media (max-width: 599px) {
  #tasarim-3d .teknik-3d__seg-btn {
    font-size: 0.8125rem;
  }

  #tasarim-3d .teknik-3d__hotspots .v3d-hotspot {
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
  }

  #tasarim-3d .teknik-3d__hotspots .v3d-hotspot::before {
    inset: 7px;
  }
}

/* ===== 52-teknik-cizim.css ===== */
/* Teknik · Teknik çizim (#teknik-cizim): beyaz bant, büyük ve temiz çizim */
#teknik-cizim .teknik-cizim__figure {
  margin: 0;
}

#teknik-cizim .teknik-cizim__sheet {
  position: relative;
  padding: clamp(16px, 4vw, 64px) clamp(8px, 4vw, 64px) clamp(12px, 2.5vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
}

#teknik-cizim .teknik-cizim__sheet img {
  display: block;
  width: 100%;
  max-width: 924px;
  height: auto;
  margin-inline: auto;
}

/* Görünüş adları: çizimdeki iki görünüşün altına hizalı */
#teknik-cizim .teknik-cizim__views {
  display: grid;
  grid-template-columns: 37% 63%;
  max-width: 924px;
  margin: clamp(8px, 1.5vw, 16px) auto 0;
  font-size: clamp(0.75rem, 0.7rem + 0.3vw, 0.875rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: center;
}

#teknik-cizim .teknik-cizim__views span + span {
  padding-left: 6%;
}

#teknik-cizim .teknik-cizim__caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 24px;
  margin-top: 16px;
  font-size: var(--fs-small);
  color: var(--text-3);
}

#teknik-cizim .teknik-cizim__caption span:first-child {
  color: var(--text-2);
  font-weight: 500;
}

/* Dar ekranda çizim okunur boyutta kalır; levha kendi içinde yatay kayar */
@media (max-width: 599px) {
  #teknik-cizim .teknik-cizim__sheet {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  #teknik-cizim .teknik-cizim__sheet img,
  #teknik-cizim .teknik-cizim__views {
    width: 600px;
    max-width: none;
  }

  #teknik-cizim .teknik-cizim__caption span:first-child::after {
    content: " · yana kaydırın";
    font-weight: 400;
    color: var(--text-3);
  }
}

/* ===== 53-teknik-ozellikler.css ===== */
/* Teknik · Özellikler (#teknik-ozellikler): tablo yerine sade etiket–değer grupları */
#teknik-ozellikler .teknik-spec {
  border-top: 1px solid rgba(12, 22, 38, 0.16);
}

#teknik-ozellikler .teknik-spec__group {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  padding-block: clamp(32px, 4vw, 56px);
  border-bottom: 1px solid var(--paper-2);
}

#teknik-ozellikler .teknik-spec__group:last-child {
  border-bottom: 0;
}

@media (min-width: 960px) {
  #teknik-ozellikler .teknik-spec__group {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--space-8);
  }
}

#teknik-ozellikler .teknik-spec__intro {
  display: grid;
  align-content: start;
  gap: 8px;
}

@media (min-width: 960px) {
  #teknik-ozellikler .teknik-spec__intro {
    position: sticky;
    top: calc(var(--nav-h) + 24px);
    align-self: start;
  }
}

#teknik-ozellikler .teknik-spec__icon {
  width: 28px;
  height: 28px;
  margin-bottom: 8px;
  color: var(--accent-strong);
}

#teknik-ozellikler .teknik-spec__title {
  font-size: var(--fs-h3);
  line-height: 1.1;
}

#teknik-ozellikler .teknik-spec__sub {
  margin: 0;
  color: var(--text-2);
  font-size: 0.9375rem;
}

#teknik-ozellikler .teknik-spec__list {
  margin: 0;
}

#teknik-ozellikler .teknik-spec__list > div {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 16px;
  align-items: baseline;
  padding-block: 16px;
  border-bottom: 1px solid rgba(12, 22, 38, 0.08);
}

#teknik-ozellikler .teknik-spec__list > div:first-child {
  padding-top: 4px;
}

#teknik-ozellikler .teknik-spec__list > div:last-child {
  border-bottom: 0;
}

#teknik-ozellikler .teknik-spec__list dt {
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--text-2);
}

#teknik-ozellikler .teknik-spec__list dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

#teknik-ozellikler .teknik-spec__list dd small {
  display: block;
  margin-top: 4px;
  font-family: var(--font-text);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--accent-strong);
}

#teknik-ozellikler .teknik-spec__note {
  max-width: 44em;
  margin: clamp(24px, 3vw, 40px) 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(12, 22, 38, 0.16);
  font-size: var(--fs-small);
  color: var(--text-3);
}

/* ===== 54-teknik-enerji.css ===== */
/* Teknik · Enerji hesabı (#teknik-enerji): koyu bant, üç büyük adım + 45 çizgilik şerit */
#teknik-enerji .teknik-enerji__steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

#teknik-enerji .teknik-enerji__steps > li {
  position: relative;
  display: grid;
  gap: 10px;
  padding-block: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  min-width: 0;
}

/* Adımlar arası ok (mobilde aşağı, masaüstünde sağa) */
#teknik-enerji .teknik-enerji__steps > li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: -7px;
  width: 12px;
  height: 12px;
  border-right: 1.5px solid var(--accent-bright);
  border-bottom: 1.5px solid var(--accent-bright);
  background: var(--night);
  transform: rotate(45deg);
}

@media (min-width: 960px) {
  #teknik-enerji .teknik-enerji__steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  #teknik-enerji .teknik-enerji__steps > li {
    padding: 40px 40px 44px;
    border-bottom: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
  }

  #teknik-enerji .teknik-enerji__steps > li:first-child {
    padding-left: 0;
    border-left: 0;
  }

  #teknik-enerji .teknik-enerji__steps > li + li::before {
    left: -7px;
    top: 50%;
    margin-top: -6px;
    border-bottom: 0;
    border-top: 1.5px solid var(--accent-bright);
  }
}

#teknik-enerji .teknik-enerji__label {
  font-size: 0.9375rem;
  color: var(--on-dark-2);
}

#teknik-enerji .teknik-enerji__value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--on-dark);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#teknik-enerji .teknik-enerji__approx {
  margin-right: 0.08em;
  font-weight: 500;
  color: var(--on-dark-3);
}

#teknik-enerji .teknik-enerji__unit {
  margin-left: 0.14em;
  font-size: 0.42em;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--accent-bright);
}

#teknik-enerji .teknik-enerji__result .teknik-enerji__value {
  color: var(--accent-bright);
}

#teknik-enerji .teknik-enerji__formula {
  font-size: 0.875rem;
  color: var(--on-dark-3);
  font-variant-numeric: tabular-nums;
}

/* 45 çizgi: 42'si dolar (görününce sırayla) */
#teknik-enerji .teknik-enerji__meter {
  margin-top: clamp(40px, 5vw, 64px);
}

#teknik-enerji .teknik-enerji__bars {
  display: grid;
  grid-template-columns: repeat(45, minmax(0, 1fr));
  gap: clamp(2px, 0.45vw, 6px);
  height: clamp(36px, 5vw, 56px);
}

#teknik-enerji .teknik-enerji__bars i {
  display: block;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
  position: relative;
}

#teknik-enerji .teknik-enerji__bars i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.6s var(--ease-out);
  transition-delay: calc(var(--i) * 28ms + 0.2s);
}

#teknik-enerji .teknik-enerji__meter.is-visible .teknik-enerji__bars i:not(.is-off)::after {
  transform: scaleY(1);
}

.js:not(.js-ready) #teknik-enerji .teknik-enerji__bars i:not(.is-off)::after {
  transform: scaleY(1);
}

#teknik-enerji .teknik-enerji__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 24px;
  margin: 14px 0 0;
  font-size: 0.875rem;
  color: var(--on-dark-3);
}

#teknik-enerji .teknik-enerji__note {
  max-width: 46em;
  margin: clamp(32px, 4vw, 48px) 0 0;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--on-dark-3);
}

#teknik-enerji .teknik-enerji__nowrap {
  white-space: nowrap;
}

/* ===== 55-teknik-bakim.css ===== */
/* Teknik · Dayanıklılık ve bakım (#teknik-bakim): solda özellik listesi, sağda bakım paneli */
#teknik-bakim .teknik-bakim__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(40px, 5vw, 64px);
  align-items: start;
}

@media (min-width: 960px) {
  #teknik-bakim .teknik-bakim__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(48px, 6vw, 96px);
  }
}

#teknik-bakim .teknik-bakim__care {
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--radius-lg);
  background: var(--paper);
}

#teknik-bakim .teknik-bakim__care-title {
  margin-bottom: clamp(16px, 2vw, 24px);
  font-size: var(--fs-h3);
}

#teknik-bakim .teknik-bakim__list {
  margin: 0;
  border-top: 1px solid rgba(12, 22, 38, 0.1);
}

#teknik-bakim .teknik-bakim__list > div {
  display: grid;
  gap: 4px;
  padding-block: 18px;
  border-bottom: 1px solid rgba(12, 22, 38, 0.1);
}

#teknik-bakim .teknik-bakim__list dt {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
}

#teknik-bakim .teknik-bakim__list dd {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-2);
}

#teknik-bakim .teknik-bakim__note {
  margin: 20px 0 0;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--text-3);
}

/* ===== 60-kullanim-hero.css ===== */
/* Kullanım Alanları · Sayfa başı (.kullanim-hero): başlık solda, ürün görseli sağda */
.kullanim-hero .kullanim-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}

@media (min-width: 960px) {
  .kullanim-hero .kullanim-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}

.kullanim-hero .page-hero__title {
  max-width: 12ch;
}

.kullanim-hero .page-hero__title .hl {
  color: var(--accent);
}

.kullanim-hero .kullanim-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: clamp(28px, 3.5vw, 44px) 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-2);
}

.kullanim-hero .kullanim-hero__meta li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.kullanim-hero .kullanim-hero__meta svg {
  width: 20px;
  height: 20px;
  color: var(--accent-strong);
}

.js .kullanim-hero .kullanim-hero__meta.reveal { --rd: 0.5s; }
.js .kullanim-hero .kullanim-hero__media.reveal { --rd: 0.15s; }

.kullanim-hero .kullanim-hero__media {
  position: relative;
  width: 100%;
  max-width: 560px;
  justify-self: center;
}

@media (min-width: 960px) {
  .kullanim-hero .kullanim-hero__media {
    justify-self: end;
  }
}

.kullanim-hero .kullanim-hero__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--paper-2);
  box-shadow: var(--shadow-lg);
}

@media (min-width: 600px) and (max-width: 959px) {
  .kullanim-hero .kullanim-hero__frame {
    aspect-ratio: 1 / 1;
  }
}

/* Masaüstü: rozet ilk ekranda kalsın */
@media (min-width: 960px) {
  .kullanim-hero .kullanim-hero__frame {
    aspect-ratio: auto;
    height: clamp(460px, calc(100vh - var(--nav-h) - 190px), 640px);
  }
}

.kullanim-hero .kullanim-hero__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% 50%;
  animation: kullanim-hero-drift 16s ease-in-out infinite alternate;
}

@keyframes kullanim-hero-drift {
  from {
    transform: scale(1.02) translate(0, 0);
  }

  to {
    transform: scale(1.08) translate(-1.5%, -1%);
  }
}

.js .kullanim-hero:not(.is-inview) .kullanim-hero__frame img {
  animation-play-state: paused;
}

/* Cam rozet (.glass-badge, styles.css §6): üç küçük alan görseli + kısa ifade */
.kullanim-hero .kullanim-hero__badge {
  gap: 14px;
  max-width: calc(100% - 32px);
  padding: 8px 18px 8px 8px;
}

.kullanim-hero .kullanim-hero__thumbs {
  display: inline-flex;
  flex: none;
}

.kullanim-hero .kullanim-hero__thumbs img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--white);
  background: var(--paper-2);
}

.kullanim-hero .kullanim-hero__thumbs picture + picture img {
  margin-left: -12px;
}

@media (max-width: 420px) {
  .kullanim-hero .kullanim-hero__badge {
    gap: 10px;
    padding-right: 14px;
  }

  .kullanim-hero .kullanim-hero__thumbs img {
    width: 30px;
    height: 30px;
  }

  .kullanim-hero .kullanim-hero__thumbs picture + picture img {
    margin-left: -10px;
  }
}

.js .kullanim-hero__media:not(.is-visible) .kullanim-hero__badge {
  opacity: 0;
}

.js .kullanim-hero__media.is-visible .kullanim-hero__badge {
  animation: kullanim-badge-in 0.9s var(--ease-out) 1s both;
}

@keyframes kullanim-badge-in {
  from {
    opacity: 0;
    translate: 0 12px;
    scale: 0.96;
  }

  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

/* ===== 61-kullanim-alanlar.css ===== */
/* Kullanım Alanları · Alan galerisi (#kullanim-alanlar): büyük/küçük karışık bento.
   Görseller düşük çözünürlüklü; karo boyutları her görselin doğal genişliğini
   aşmayacak şekilde seçildi (üniversiteler / sosyal tesisler yalnızca küçük karoda). */
#kullanim-alanlar .kullanim-bento {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

#kullanim-alanlar .kullanim-tile {
  position: relative;
  min-width: 0;
}

#kullanim-alanlar .kullanim-tile__media {
  position: relative;
  height: 100%;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper-2);
  isolation: isolate;
}

#kullanim-alanlar .kullanim-tile__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}

#kullanim-alanlar .kullanim-tile__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 13, 25, 0) 30%, rgba(5, 13, 25, 0.35) 55%, rgba(5, 13, 25, 0.82) 100%);
  pointer-events: none;
}

#kullanim-alanlar .kullanim-tile:hover .kullanim-tile__media img {
  transform: scale(1.05);
}

#kullanim-alanlar .kullanim-tile__caption {
  position: absolute;
  left: clamp(20px, 2.4vw, 28px);
  right: clamp(20px, 2.4vw, 28px);
  bottom: clamp(18px, 2.2vw, 26px);
  z-index: 1;
  color: #fff;
}

#kullanim-alanlar .kullanim-tile__caption h3 {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #fff;
}

#kullanim-alanlar .kullanim-tile__caption p {
  margin: 6px 0 0;
  max-width: 34em;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.8);
}

/* Büyük karo: daha büyük başlık */
#kullanim-alanlar .kullanim-tile--sahil .kullanim-tile__caption h3 {
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
  letter-spacing: -0.03em;
}

#kullanim-alanlar .kullanim-tile--sahil .kullanim-tile__caption p {
  max-width: 28em;
  font-size: 1rem;
}

/* Küçük karo: solda küçük görsel, sağda metin (paper yüzey) */
#kullanim-alanlar .kullanim-tile--compact .kullanim-tile__media {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  aspect-ratio: auto;
  min-height: 112px;
  padding: 10px 20px 10px 10px;
  background: var(--paper);
  border-radius: var(--radius);
  transition: background-color var(--dur-fast) var(--ease);
}

#kullanim-alanlar .kullanim-tile--compact:hover .kullanim-tile__media {
  background: var(--paper-2);
}

#kullanim-alanlar .kullanim-tile--compact .kullanim-tile__media::after {
  content: none;
}

#kullanim-alanlar .kullanim-tile--compact .kullanim-tile__media img {
  position: relative;
  inset: auto;
  width: 132px;
  height: 100%;
  min-height: 92px;
  max-height: 132px;
  border-radius: 12px;
}

#kullanim-alanlar .kullanim-tile--compact .kullanim-tile__caption {
  position: static;
  color: var(--text);
}

#kullanim-alanlar .kullanim-tile--compact .kullanim-tile__caption h3 {
  font-size: 1.125rem;
  color: var(--text);
}

#kullanim-alanlar .kullanim-tile--compact .kullanim-tile__caption p {
  margin-top: 4px;
  font-size: 0.9rem;
  color: var(--text-2);
}

/* Afet bölümüne geçiş karosu (koyu) */
#kullanim-alanlar .kullanim-tile__jump {
  position: relative;
  display: grid;
  align-content: center;
  gap: 4px;
  height: 100%;
  min-height: 112px;
  padding: 18px 76px 18px 24px;
  border-radius: var(--radius);
  background: var(--night);
  color: var(--on-dark);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
}

#kullanim-alanlar .kullanim-tile__jump::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -60px;
  top: 50%;
  width: 220px;
  aspect-ratio: 1;
  border-radius: 50%;
  translate: 0 -50%;
  background: radial-gradient(circle, rgba(126, 211, 95, 0.32) 0%, rgba(77, 163, 56, 0.08) 45%, rgba(5, 13, 25, 0) 70%);
  animation: kullanim-jump-glow 4s ease-in-out infinite alternate;
}

@keyframes kullanim-jump-glow {
  from {
    opacity: 0.6;
    scale: 0.9;
  }

  to {
    opacity: 1;
    scale: 1.1;
  }
}

.js #kullanim-alanlar:not(.is-inview) .kullanim-tile__jump::before {
  animation-play-state: paused;
}

#kullanim-alanlar .kullanim-tile__jump:hover {
  text-decoration: none;
}

#kullanim-alanlar .kullanim-tile__jump-label {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

#kullanim-alanlar .kullanim-tile__jump-text {
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--on-dark-2);
}

#kullanim-alanlar .kullanim-tile__jump svg {
  position: absolute;
  right: 22px;
  top: 50%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  padding: 9px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--accent-bright);
  transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

#kullanim-alanlar .kullanim-tile__jump:hover svg {
  transform: translateY(3px);
  background: rgba(126, 211, 95, 0.12);
  border-color: rgba(126, 211, 95, 0.4);
}

/* Tablet: iki kolon */
@media (min-width: 600px) {
  #kullanim-alanlar .kullanim-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  #kullanim-alanlar .kullanim-tile--sahil {
    grid-column: 1 / -1;
  }

  #kullanim-alanlar .kullanim-tile--sahil .kullanim-tile__media {
    aspect-ratio: 16 / 9;
  }

  #kullanim-alanlar .kullanim-tile--link {
    grid-column: 1 / -1;
  }
}

/* Masaüstü: 12 kolonlu bento
   Satır 1–2: Sahil (büyük) | Hastane, Meydan
   Satır 3–5: Millet | Kamu | Üniversiteler, Sosyal Tesisler, Afet geçişi */
@media (min-width: 960px) {
  #kullanim-alanlar .kullanim-bento {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(2, clamp(200px, 17vw, 236px)) repeat(3, clamp(118px, 10vw, 132px));
    gap: 20px;
  }

  #kullanim-alanlar .kullanim-tile__media,
  #kullanim-alanlar .kullanim-tile--sahil .kullanim-tile__media {
    aspect-ratio: auto;
  }

  #kullanim-alanlar .kullanim-tile--sahil {
    grid-column: 1 / span 7;
    grid-row: 1 / span 2;
  }

  #kullanim-alanlar .kullanim-tile--hastane {
    grid-column: 8 / span 5;
    grid-row: 1;
  }

  #kullanim-alanlar .kullanim-tile--meydan {
    grid-column: 8 / span 5;
    grid-row: 2;
  }

  #kullanim-alanlar .kullanim-tile--millet {
    grid-column: 1 / span 4;
    grid-row: 3 / span 3;
  }

  #kullanim-alanlar .kullanim-tile--kamu {
    grid-column: 5 / span 4;
    grid-row: 3 / span 3;
  }

  #kullanim-alanlar .kullanim-tile--compact,
  #kullanim-alanlar .kullanim-tile--link {
    grid-column: 9 / span 4;
  }

  #kullanim-alanlar .kullanim-tile--compact .kullanim-tile__media,
  #kullanim-alanlar .kullanim-tile__jump {
    min-height: 0;
  }

  #kullanim-alanlar .kullanim-tile--compact .kullanim-tile__media img {
    width: 120px;
    min-height: 0;
    max-height: none;
  }

  #kullanim-alanlar .kullanim-tile--compact .kullanim-tile__media {
    grid-template-columns: 120px minmax(0, 1fr);
  }
}

/* ===== 62-kullanim-afet.css ===== */
/* Kullanım Alanları · Afet toplanma alanları (#kullanim-afet): koyu bant.
   "Olağan gün / Şebeke kesildiğinde" anahtarı görseldeki durumu değiştirir
   (js/kullanim.js data-mode yazar; JS yoksa iki durum metni de görünür). */
#kullanim-afet .kullanim-afet__split {
  align-items: center;
}

#kullanim-afet .kullanim-afet__visual {
  display: grid;
  gap: 20px;
  min-width: 0;
}

#kullanim-afet .kullanim-afet__media {
  aspect-ratio: 16 / 9;
  max-width: 540px;
  width: 100%;
  background: var(--night-2);
}

#kullanim-afet .kullanim-afet__media img {
  transition: filter 1.2s var(--ease), transform 1.6s var(--ease-out);
  filter: saturate(0.95) brightness(0.95);
}

#kullanim-afet .kullanim-afet__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 13, 25, 0.35) 0%, rgba(5, 13, 25, 0) 40%, rgba(5, 13, 25, 0.25) 100%);
  transition: background-color 1.2s var(--ease);
  pointer-events: none;
}

#kullanim-afet[data-mode="kriz"] .kullanim-afet__media img {
  filter: saturate(0.25) brightness(0.55);
  transform: scale(1.04);
}

#kullanim-afet[data-mode="kriz"] .kullanim-afet__media::after {
  background-color: rgba(5, 13, 25, 0.25);
}

/* Durum hapları: Şebeke / ChargeON */
#kullanim-afet .kullanim-afet__status {
  position: absolute;
  z-index: 1;
  top: 16px;
  left: 16px;
  right: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#kullanim-afet .kullanim-afet__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 12px;
  border-radius: var(--radius-pill);
  background: rgb(5 13 25 / calc(0.55 + 0.17 * var(--glass-solid)));
  -webkit-backdrop-filter: var(--glass, blur(12px));
  backdrop-filter: var(--glass, blur(12px));
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--on-dark);
}

#kullanim-afet .kullanim-afet__pill i {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-bright);
  transition: background-color 0.5s var(--ease);
}

#kullanim-afet .kullanim-afet__pill--on i::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--accent-bright);
  animation: kullanim-afet-pulse 1.8s var(--ease-out) infinite;
}

@keyframes kullanim-afet-pulse {
  from {
    opacity: 0.9;
    transform: scale(0.6);
  }

  to {
    opacity: 0;
    transform: scale(1.8);
  }
}

.js #kullanim-afet:not(.is-inview) .kullanim-afet__pill i::after {
  animation-play-state: paused;
}

#kullanim-afet[data-mode="kriz"] .kullanim-afet__pill--grid i {
  background: var(--signal-off);
}

#kullanim-afet[data-mode="kriz"] .kullanim-afet__pill--grid {
  color: var(--on-dark-2);
}

#kullanim-afet .kullanim-afet__pill--grid::after {
  content: "açık";
  font-weight: 500;
  color: var(--on-dark-2);
}

#kullanim-afet[data-mode="kriz"] .kullanim-afet__pill--grid::after {
  content: "kesik";
}

#kullanim-afet .kullanim-afet__pill--on::after {
  content: "çalışıyor";
  font-weight: 500;
  color: var(--accent-bright);
}

/* Anahtar (segmented control) */
#kullanim-afet .kullanim-afet__switch {
  position: relative;
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  max-width: 420px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--night-2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  isolation: isolate;
}

.js #kullanim-afet .kullanim-afet__switch {
  display: grid;
}

#kullanim-afet .kullanim-afet__opt {
  position: relative;
  z-index: 1;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--on-dark-2);
  cursor: pointer;
  transition: color 0.4s var(--ease);
}

#kullanim-afet .kullanim-afet__opt[aria-pressed="true"] {
  color: var(--night);
}

#kullanim-afet .kullanim-afet__opt:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
}

#kullanim-afet .kullanim-afet__thumb {
  position: absolute;
  z-index: 0;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: var(--radius-pill);
  background: var(--white);
  transition: transform 0.6s var(--ease-out), background-color 0.6s var(--ease);
}

#kullanim-afet[data-mode="kriz"] .kullanim-afet__thumb {
  transform: translateX(100%);
  background: var(--accent-bright);
}

/* Durum metinleri: JS ile tek tek, JS yoksa ikisi birden */
#kullanim-afet .kullanim-afet__states {
  display: grid;
  max-width: 600px;
}

#kullanim-afet .kullanim-afet__state {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--on-dark-2);
}

#kullanim-afet .kullanim-afet__state strong {
  color: var(--on-dark);
  font-weight: 600;
}

.js #kullanim-afet .kullanim-afet__state {
  grid-area: 1 / 1;
  transition: opacity 0.5s var(--ease), translate 0.6s var(--ease-out);
}

.js #kullanim-afet[data-mode="normal"] .kullanim-afet__state--kriz,
.js #kullanim-afet[data-mode="kriz"] .kullanim-afet__state--normal {
  opacity: 0;
  translate: 0 8px;
  visibility: hidden;
}

/* Olgular: ince ayraçlı satırlar */
#kullanim-afet .kullanim-afet__facts {
  list-style: none;
  margin: clamp(28px, 3.5vw, 44px) 0 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

#kullanim-afet .kullanim-afet__facts li {
  display: grid;
  gap: 2px;
  padding-block: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

@media (min-width: 640px) {
  #kullanim-afet .kullanim-afet__facts li {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 24px;
    align-items: baseline;
  }
}

#kullanim-afet .kullanim-afet__facts strong {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--on-dark);
}

#kullanim-afet .kullanim-afet__facts span {
  font-size: 0.95rem;
  color: var(--on-dark-2);
}

#kullanim-afet .kullanim-afet__foot {
  font-size: 0.8125rem;
  color: var(--on-dark-3);
}

/* Mobilde önce başlık, sonra görsel ve anahtar */
@media (max-width: 959px) {
  #kullanim-afet .kullanim-afet__visual {
    order: 2;
  }
}

/* ===== 63-kullanim-kurulum.css ===== */
/* Kullanım Alanları · Kurulum şeridi (#kullanim-kurulum): başlık + üç kısa ifade, kart yok */
#kullanim-kurulum .kullanim-kurulum__grid {
  display: grid;
  gap: clamp(40px, 5vw, 64px);
}

#kullanim-kurulum .kullanim-kurulum__head {
  margin-bottom: 0;
}

#kullanim-kurulum .kullanim-kurulum__head .kicker {
  margin-bottom: var(--space-5);
}

#kullanim-kurulum .kullanim-kurulum__head .t-lead {
  max-width: 26em;
}

#kullanim-kurulum .kullanim-kurulum__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}

#kullanim-kurulum .kullanim-kurulum__list li {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 18px;
  align-content: start;
  padding-block: 24px;
}

/* İnce üst çizgi: görününce soldan çizilir */
#kullanim-kurulum .kullanim-kurulum__list li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(12, 22, 38, 0.14);
  transform-origin: left;
}

#kullanim-kurulum .kullanim-kurulum__list li::after {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.js #kullanim-kurulum .kullanim-kurulum__list li.reveal:not(.is-visible)::before {
  transform: scaleX(0);
}

.js #kullanim-kurulum .kullanim-kurulum__list li.reveal.is-visible::before {
  animation: kullanim-line 1.2s var(--ease-out) var(--rd, 0s) both;
}

@keyframes kullanim-line {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

#kullanim-kurulum .kullanim-kurulum__list svg {
  grid-row: span 2;
  width: 28px;
  height: 28px;
  margin-top: 4px;
  color: var(--accent-strong);
}

#kullanim-kurulum .kullanim-kurulum__list strong {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--text);
}

#kullanim-kurulum .kullanim-kurulum__list span {
  font-size: 0.975rem;
  line-height: 1.5;
  color: var(--text-2);
}

@media (min-width: 960px) {
  #kullanim-kurulum .kullanim-kurulum__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(28px, 3vw, 48px);
  }

  #kullanim-kurulum .kullanim-kurulum__list li {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding-top: 32px;
  }

  #kullanim-kurulum .kullanim-kurulum__list svg {
    grid-row: auto;
    margin: 0 0 8px;
  }
}

/* ===== 70-iletisim-surec.css ===== */
/* İletişim · Sonra ne olur? (#sonra): üç sade adım, beyaz bant */
#sonra {
  background: var(--white);
}

#sonra .steps h3 {
  max-width: 14ch;
}

/* ===== 71-iletisim-sss.css ===== */
/* İletişim · Sık sorulanlar (#sss): koyu bant, solda başlık, sağda açılır-kapanır satırlar */
#sss .sss__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(40px, 5vw, 64px);
}

@media (min-width: 960px) {
  #sss .sss__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(56px, 7vw, 120px);
    align-items: start;
  }

  #sss .sss__intro {
    position: sticky;
    top: calc(var(--nav-h) + 40px);
  }
}

#sss .sss__intro h2 {
  max-width: 12ch;
  margin-bottom: var(--space-5);
}

#sss .sss__intro .t-lead {
  max-width: 24em;
  margin-bottom: var(--space-6);
}

/* Liste */
#sss .sss__list {
  border-bottom: 1px solid var(--night-3);
}

#sss .sss__item {
  border-top: 1px solid var(--night-3);
}

/* Yumuşak açılma (destekleyen tarayıcılarda yükseklik geçişi) */
#sss .sss__item {
  interpolate-size: allow-keywords;
}

#sss .sss__item::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size 0.5s var(--ease-out), content-visibility 0.5s allow-discrete;
}

#sss .sss__item[open]::details-content {
  block-size: auto;
}

#sss summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 64px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--on-dark);
  transition: color var(--dur-fast) var(--ease);
}

#sss summary::-webkit-details-marker {
  display: none;
}

#sss summary:hover {
  color: #fff;
}

#sss summary:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Artı → eksi ikonu */
#sss .sss__icon {
  position: relative;
  flex: none;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), rotate 0.5s var(--ease-out);
}

#sss .sss__icon::before,
#sss .sss__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1.5px;
  margin: -0.75px 0 0 -6px;
  border-radius: 1px;
  background: var(--on-dark);
  transition: rotate 0.5s var(--ease-out), opacity var(--dur-fast) var(--ease);
}

#sss .sss__icon::after {
  rotate: 90deg;
}

#sss summary:hover .sss__icon {
  border-color: rgba(255, 255, 255, 0.45);
}

#sss .sss__item[open] .sss__icon {
  rotate: 180deg;
  border-color: var(--accent-bright);
}

#sss .sss__item[open] .sss__icon::after {
  rotate: 0deg;
}

#sss .sss__item[open] .sss__icon::before,
#sss .sss__item[open] .sss__icon::after {
  background: var(--accent-bright);
}

/* Yanıt */
#sss .sss__a {
  padding: 0 56px 28px 0;
}

#sss .sss__a p {
  max-width: 36em;
  color: var(--on-dark-2);
  font-size: 1.0625rem;
  line-height: 1.65;
}

#sss .sss__item[open] .sss__a {
  animation: sss-in 0.6s var(--ease-out);
}

@keyframes sss-in {
  from { opacity: 0; translate: 0 -8px; }
  to { opacity: 1; translate: 0 0; }
}

@media (max-width: 599px) {
  #sss .sss__a {
    padding-right: 0;
  }
}