/* Fotoğraf tabanlı, panelle bağlantılı cihaz sahnesi. */
.stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: #edf1f8;
  box-shadow: inset 0 1px 0 #fff, 0 16px 40px -30px #2f427c;
  -webkit-tap-highlight-color: transparent;
}
.stage-showroom { position: relative; }
.stage-scene {
  position: relative;
  aspect-ratio: 600 / 345;
  overflow: hidden;
  background: radial-gradient(ellipse at 52% 38%, #fff 0%, #f0f4fb 48%, #e1e8f2 100%);
}
.stage-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 32.9%, #cbd5e344 33%, transparent 33.2%, transparent 65.9%, #cbd5e344 66%, transparent 66.2%);
  pointer-events: none;
}
.stage-scene::after {
  content: "";
  position: absolute;
  inset: 82% 0 0;
  border-top: 1px solid #cbd4e280;
  background: linear-gradient(#e0e7f1, #eef2f8);
  pointer-events: none;
}
.stage-spotlight {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 48% 60%, #6387ff26, transparent 60%);
  pointer-events: none;
}
.stage-toolbar {
  position: absolute;
  z-index: 5;
  top: 12px;
  left: 16px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.stage-hint {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #53627b;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .025em;
}
.stage-hint::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #3c65da;
  box-shadow: 0 0 0 3px #3c65da15;
}
.stage-motion {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid #aebed44d;
  border-radius: 50%;
  background: #ffffff9c;
  color: #526585;
  cursor: pointer;
}
.stage-motion svg { width: 12px; height: 12px; fill: currentColor; }
.stage-motion .motion-play, .stage-motion[aria-pressed="true"] .motion-pause { display: none; }
.stage-motion[aria-pressed="true"] .motion-play { display: block; }
.device {
  position: absolute;
  z-index: 2;
  bottom: 7%;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  transition: transform 400ms var(--ease-out);
}
.device::before {
  content: "";
  position: absolute;
  inset: 8% -24% -5%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #5183ff30, transparent 70%);
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
}
.device::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: -2%;
  left: -10%;
  width: 125%;
  height: 9%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #24344a38, transparent 68%);
  pointer-events: none;
}
.device.is-on::before { opacity: 1; }
.device-visual {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(5px 7px 5px #22385422);
}
.device-visual::after {
  content: "";
  position: absolute;
  left: -20%;
  bottom: -4%;
  width: 140%;
  height: 11%;
  border: 1px solid #78b4ff;
  border-radius: 50%;
  background: radial-gradient(ellipse, #5d94ff38, transparent 70%);
  opacity: 0;
  pointer-events: none;
}
.device--boiler .device-visual::after { display: none; }
.device-status {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: -24px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border: 1px solid #cadcfb;
  border-radius: 7px;
  background: #f9fcfff2;
  box-shadow: 0 3px 12px #223c7114;
  color: #2f64bc;
  font: 500 9px var(--f-mono);
  line-height: 1.3;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 5px);
  transition: opacity 250ms ease, transform 350ms var(--ease-out);
  pointer-events: none;
}
.device-status::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: #679fff; box-shadow: 0 0 5px #679fff88; }
.device-status span { color: #697b96; font-family: var(--f-body); }
.device.is-on .device-status { opacity: 1; transform: translate(-50%, 0); }
.device--fridge .device-status { top: 22%; left: 100%; }
.device--boiler .device-status { top: 22%; left: 130%; border-color: #efd4b8; color: #b37736; }
.device--boiler .device-status::before { background: #e8ad66; box-shadow: 0 0 5px #e8ad6688; }
.device-photo { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.device--fridge { left: 8%; height: 81%; aspect-ratio: 584 / 1501; }
.device--washer { left: 33%; height: 51%; aspect-ratio: 863 / 1144; }
.device--dishwasher { left: 64%; height: 51%; aspect-ratio: 888 / 1135; }
.device--boiler { left: 66%; bottom: 62%; height: 34%; aspect-ratio: 759 / 1488; }
.device--boiler::after { display: none; }
.device-effect { position: absolute; pointer-events: none; }

/* Fotoğraftaki gerçek tambur ve çamaşırlar, sabit cam yansımasının ardında döner. */
.washer-drum {
  left: 24.1%;
  top: 27.3%;
  width: 51.7%;
  height: 39%;
  overflow: hidden;
  border-radius: 50%;
  background: url('../img/hero-washer.webp') 49.9% 44.75% / 193.42% 256.41%;
  box-shadow: inset 0 0 8px 2px #060f1c66;
}
.washer-glass {
  left: 23.5%;
  top: 26.8%;
  width: 53%;
  height: 40%;
  border-radius: 50%;
  background: linear-gradient(125deg, #ffffff28, transparent 34%, transparent 70%, #8fc2ff20);
  box-shadow: inset 0 0 0 1px #d9e9ff45;
}
.washer-led { top: 6.8%; right: 10.5%; color: #b7e0ff; font: 500 clamp(4px, .65vw, 7px) var(--f-mono); text-shadow: 0 0 5px #639bff; }
.fridge-cold { inset: 6% -24% 5%; overflow: hidden; }
.fridge-cold i {
  position: absolute;
  left: 78%;
  top: 15%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #9be1ff;
  box-shadow: 0 0 6px #58a5ff;
  opacity: 0;
}
.fridge-cold i:nth-child(2) { left: 82%; top: 43%; animation-delay: -1.3s; }
.fridge-cold i:nth-child(3) { left: 87%; top: 69%; animation-delay: -2.8s; }
.fridge-cold i:nth-child(4) { left: 16%; top: 28%; animation-delay: -.8s; }
.fridge-led { top: 11%; left: 45%; color: #9edfff; font: 500 clamp(4px, .7vw, 7px) var(--f-mono); text-shadow: 0 0 4px #88baff; }
.dishwasher-shine { inset: 3% 2% 7%; overflow: hidden; border-radius: 4px; }
.dishwasher-shine::before {
  content: "";
  position: absolute;
  inset: -10% auto -10% -90%;
  width: 55%;
  background: linear-gradient(90deg, transparent, #e8f6ff80, transparent);
  transform: skewX(-22deg);
  opacity: 0;
}
.dishwasher-sparkles { inset: 0; }
.dishwasher-sparkles i { position: absolute; width: 10px; height: 10px; color: #c7efff; opacity: 0; }
.dishwasher-sparkles i::before, .dishwasher-sparkles i::after { content: ""; position: absolute; background: currentColor; border-radius: 50%; }
.dishwasher-sparkles i::before { left: 45%; width: 10%; height: 100%; }
.dishwasher-sparkles i::after { top: 45%; width: 100%; height: 10%; }
.dishwasher-sparkles i:nth-child(1) { right: -2%; top: 19%; }
.dishwasher-sparkles i:nth-child(2) { left: 3%; top: 61%; animation-delay: -1.7s; }
.dishwasher-sparkles i:nth-child(3) { right: 12%; top: 79%; animation-delay: -3.2s; }
.dishwasher-bubbles { top: 8%; right: -8%; width: 20%; height: 60%; }
.dishwasher-bubbles i { position: absolute; right: 0; bottom: 0; width: 5px; height: 5px; border: 1px solid #78c8f5; border-radius: 50%; background: #c9f1ff55; opacity: 0; }
.dishwasher-bubbles i:nth-child(2) { right: 10px; width: 3px; height: 3px; animation-delay: -1.2s; }
.dishwasher-bubbles i:nth-child(3) { right: 4px; bottom: 30%; width: 4px; height: 4px; animation-delay: -2.4s; }
.boiler-heat { inset: 12% -45% 4%; z-index: -1; }
.boiler-heat i {
  position: absolute;
  inset: 16% 0;
  border: 1px solid #eead6a55;
  border-radius: 50%;
  opacity: 0;
}
.boiler-heat i:nth-child(2) { animation-delay: -1.5s; }
.boiler-led { left: 32%; top: 73%; width: 20%; height: 6%; border-radius: 4px; background: #62acff24; box-shadow: 0 0 7px #6fb3ff60; }
.stage-selectors {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  position: relative;
  z-index: 4;
  gap: 4px;
  padding: 8px;
  border-top: 1px solid #c8d3e366;
  background: #f9fbff;
}
.stage-selector {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 44px;
  padding: 6px 3px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: #657086;
  font-size: clamp(10px, 1vw, 12px);
  font-weight: 500;
  cursor: pointer;
  transition: color 200ms ease, background 200ms ease, border-color 200ms ease;
}
.stage-selector::before { content: ""; flex: none; width: 4px; height: 4px; border-radius: 50%; background: #b9c3d4; transition: background 200ms ease, box-shadow 200ms ease; }
.stage-selector.is-on { border-color: #cfdbf7; background: #eaf0ff; color: #244bc5; }
.stage-selector.is-on::before { background: #3c6aeb; box-shadow: 0 0 0 3px #3c6aeb16; }
.stage-custom { width: 100%; aspect-ratio: 600 / 380; object-fit: cover; }
.stage-custom[hidden], .stage[data-custom] > .stage-showroom { display: none; }

:root[data-theme="dark"] .stage { background: #141f31; border-color: #2c3c55; box-shadow: inset 0 1px 0 #ffffff09, 0 20px 50px -28px #000; }
:root[data-theme="dark"] .stage-scene { background: radial-gradient(ellipse at 48% 40%, #344866 0%, #202f46 46%, #141e30 100%); }
:root[data-theme="dark"] .stage-scene::after { border-color: #637c9d33; background: linear-gradient(#162337, #1c2b42); }
:root[data-theme="dark"] .stage-selectors { border-color: #435a7b55; background: #152135; }
:root[data-theme="dark"] .stage-selector { color: #a1b0c6; }
:root[data-theme="dark"] .stage-selector.is-on { color: #c0d1ff; background: #2c4274; border-color: #4664a2; }
:root[data-theme="dark"] .stage-hint { color: #b0bfd5; }
:root[data-theme="dark"] .stage-motion { background: #1a2c48; border-color: #50648577; color: #b7cae9; }
:root[data-theme="dark"] .device-visual { filter: drop-shadow(5px 8px 6px #0006); }
:root[data-theme="dark"] .device-status { border-color: #496da9; background: #1a2e4bf5; color: #b1d4ff; box-shadow: 0 3px 12px #0003; }
:root[data-theme="dark"] .device-status span { color: #a0b4d0; }
:root[data-theme="dark"] .device--boiler .device-status { border-color: #8e6743; color: #f1c18b; }

@media (hover: hover) and (pointer: fine) {
  .device:hover, .device:focus-visible { transform: translateY(-4px); }
  .device:hover::before { opacity: 1; }
  .stage-selector:hover { background: #dfe8fb; color: #244bc5; }
  :root[data-theme="dark"] .stage-selector:hover { background: #283b5c; color: #c0d1ff; }
}
@media (max-width: 480px) {
  .stage-toolbar { top: 8px; left: 12px; right: 8px; }
  .stage-hint { font-size: 9px; }
  .stage-selectors { padding: 6px; gap: 2px; }
  .stage-selector { gap: 5px; font-size: 10px; }
  .device-status { padding: 4px 5px; font-size: 7px; top: -20px; gap: 4px; }
  .device--fridge .device-status { left: 100%; }
  .device-status span { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .stage-spotlight { animation: stage-light 9s ease-in-out infinite alternate; }
  .device-visual { animation: device-arrive 900ms var(--ease-out) both; animation-delay: var(--arrival, 0ms); }
  .device--washer { --arrival: 100ms; }
  .device--dishwasher { --arrival: 200ms; }
  .device--boiler { --arrival: 300ms; }
  .washer-drum { animation: washer-turn 7s ease-in-out infinite; }
  .fridge-cold i { animation-name: cold-drift; animation-duration: 4.8s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
  .dishwasher-shine::before { animation: steel-shine 6.5s ease-in-out infinite; }
  .dishwasher-sparkles i { animation-name: clean-sparkle; animation-duration: 4.8s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
  .boiler-heat i { animation-name: heat-wave; animation-duration: 3s; animation-timing-function: ease-out; animation-iteration-count: infinite; }
  .boiler-led { animation: boiler-glow 2.8s ease-in-out infinite alternate; }
  .dishwasher-bubbles i { animation-name: wash-bubble; animation-duration: 3.6s; animation-timing-function: ease-out; animation-iteration-count: infinite; }
  .device.is-on .device-visual::after { animation: floor-ripple 3.2s ease-out infinite; }
  .device.is-on .washer-drum { animation-duration: 4.8s; }
  .stage.is-paused *, .stage.is-paused *::before, .stage.is-paused *::after,
  .stage.is-offscreen *, .stage.is-offscreen *::before, .stage.is-offscreen *::after,
  .stage[data-custom] *, .stage[data-custom] *::before { animation-play-state: paused !important; }
  @keyframes device-arrive { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes stage-light { to { opacity: .45; transform: translateX(7%); } }
  @keyframes washer-turn { 0%, 9% { transform: rotate(0); } 43%, 57% { transform: rotate(340deg); } 91%, 100% { transform: rotate(0); } }
  @keyframes cold-drift { 0%, 100% { opacity: 0; transform: translate(0, 8px) scale(.5); } 25% { opacity: .8; } 80% { opacity: 0; transform: translate(8px, -28px) scale(1.3); } }
  @keyframes steel-shine { 0%, 28% { opacity: 0; transform: translateX(0) skewX(-22deg); } 35% { opacity: .65; } 58%, 100% { opacity: 0; transform: translateX(390%) skewX(-22deg); } }
  @keyframes clean-sparkle { 0%, 45%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 58% { opacity: 1; transform: scale(1) rotate(15deg); } 72% { opacity: 0; transform: scale(.6) rotate(30deg); } }
  @keyframes heat-wave { 0% { opacity: 0; transform: scale(.65); } 25% { opacity: .55; } 100% { opacity: 0; transform: scale(1.45); } }
  @keyframes boiler-glow { to { opacity: .4; } }
  @keyframes floor-ripple { 0% { opacity: 0; transform: scale(.7); } 30% { opacity: .55; } 100% { opacity: 0; transform: scale(1.3); } }
  @keyframes wash-bubble { 0% { opacity: 0; transform: translateY(0) scale(.5); } 20% { opacity: .85; } 90%, 100% { opacity: 0; transform: translateY(-40px) scale(1.2); } }
}
@media (prefers-reduced-motion: reduce) {
  .stage-motion { display: none; }
  .device:hover { transform: none; }
}