/* Hero telefonunda canlı akış ile Simkod eğitimini aynı ekran içinde ayıran katman. */
.sh-device-showcase .sh-device-feed,
.sh-device-showcase .sh-device-trust {
  transition: opacity 380ms ease, visibility 0s linear 380ms;
}

.sh-device-showcase .sh-simkod-demo-layer {
  position: absolute;
  z-index: 15;
  top: calc(58 * var(--sh-u));
  right: calc(13 * var(--sh-u));
  bottom: calc(9 * var(--sh-u));
  left: calc(13 * var(--sh-u));
  overflow: hidden;
  border-radius: calc(30 * var(--sh-u));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 380ms ease, visibility 0s linear 380ms;
}

.sh-device-showcase .sh-simkod-demo-mount {
  position: absolute;
  inset: 0 0 calc(78 * var(--sh-u));
  overflow: hidden;
  border-radius: calc(24 * var(--sh-u));
  background: #ebe7f3;
}

.sh-device-showcase .sh-simkod-demo-controls {
  position: absolute;
  right: calc(5 * var(--sh-u));
  bottom: calc(4 * var(--sh-u));
  left: calc(5 * var(--sh-u));
  z-index: 3;
  min-width: 0;
}

.sh-device-showcase .sh-simkod-demo-layer .skd-no-statusbar .sb,
.sh-device-showcase .sh-simkod-demo-layer .skd-no-statusbar .cu-sb {
  display: none;
}

.sh-device-showcase .sh-simkod-demo-layer .skd.skd-bar {
  gap: calc(5 * var(--sh-u));
  width: 100%;
}

.sh-device-showcase .sh-simkod-demo-layer .skd.skd-bar .prog {
  width: 100%;
  max-width: none;
  gap: calc(5 * var(--sh-u));
  margin: 0;
}

.sh-device-showcase .sh-simkod-demo-layer .skd.skd-bar .prog button {
  min-width: 0;
  padding: calc(3 * var(--sh-u)) 0;
}

.sh-device-showcase .sh-simkod-demo-layer .skd.skd-bar .lbl {
  margin-top: calc(4 * var(--sh-u));
  font-size: calc(8.5 * var(--sh-u));
}

.sh-device-showcase .sh-simkod-demo-layer .skd .ctl {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: calc(5 * var(--sh-u)) calc(7 * var(--sh-u));
}

.sh-device-showcase .sh-device-screen.is-simkod-education .sh-device-feed,
.sh-device-showcase .sh-device-screen.is-simkod-education .sh-device-trust {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.sh-device-showcase .sh-device-screen.is-simkod-education .sh-simkod-demo-layer {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

html[data-site-theme="dark"] .sh-device-showcase .sh-simkod-demo-mount {
  background: #161120;
  box-shadow: inset 0 0 0 1px rgba(216, 180, 254, .14);
}

html[data-site-theme="dark"] .sh-device-showcase .sh-simkod-demo-layer .skd.skd-root {
  background: linear-gradient(180deg, #ded8e9, #eee9f5 48%, #ddd6e8);
}

html[data-site-theme="dark"] .sh-device-showcase .sh-simkod-demo-layer .skd .ctl {
  border-color: rgba(216, 180, 254, .20);
  color: #f5efff;
  background: rgba(23, 17, 36, .94);
  box-shadow: 0 calc(8 * var(--sh-u)) calc(20 * var(--sh-u)) rgba(0, 0, 0, .32);
}

html[data-site-theme="dark"] .sh-device-showcase .sh-simkod-demo-layer .skd .ctl button,
html[data-site-theme="dark"] .sh-device-showcase .sh-simkod-demo-layer .skd .tm {
  color: #e9ddf8;
}

html[data-site-theme="dark"] .sh-device-showcase .sh-simkod-demo-layer .skd .ctl button:hover {
  background: rgba(168, 85, 247, .18);
}

/*
 * DARK telefon demosu: ana layout'taki global `section { position: relative
 * !important; }` kuralı, demo sahnelerinin absolute katman modelini eziyordu.
 * Mobilde çalışan sahne geometrisini HERO telefonunun her genişliğinde koru.
 * Böylece global section kuralı responsive/masaüstü görünümde sahne katmanlarını ezemez.
 */
@media (min-width: 0px) {
  html[data-site-theme="dark"] .sh-device-showcase .sh-simkod-demo-layer .skd .scene[data-scene="buy"],
  html[data-site-theme="dark"] .sh-device-showcase .sh-simkod-demo-layer .skd .scene[data-scene="sim"],
  html[data-site-theme="dark"] .sh-device-showcase .sh-simkod-demo-layer .skd .scene[data-scene="sms"] {
    position: absolute !important;
    inset: 0 !important;
    min-width: 0;
    min-height: 0;
    isolation: isolate;
  }

  /*
   * Panel-mode sahne alani 2px 10px 10px ic margine sahiptir. Sim, SMS ve
   * WhatsApp akislari icindeki tam-yuzey kabuklari bu margini kapatir; kartlarin kendi
   * padding ve radius degerleri degismez.
   */
  html[data-site-theme="dark"] .sh-device-showcase .sh-simkod-demo-layer .skd .scene[data-scene="sim"].is-active ~ .intro,
  html[data-site-theme="dark"] .sh-device-showcase .sh-simkod-demo-layer .skd .scene[data-scene="buy"].is-active ~ .intro,
  html[data-site-theme="dark"] .sh-device-showcase .sh-simkod-demo-layer .skd .scene[data-scene="sms"].is-active ~ .intro {
    inset: -2px -10px -10px;
    padding: 26px 34px 34px;
    border: 0;
    border-radius: 0;
    background: linear-gradient(160deg, #fff, #f6eeff);
    box-shadow: none;
  }

  html[data-site-theme="dark"] .sh-device-showcase .sh-simkod-demo-layer .skd .scene[data-scene="sim"] > .md,
  html[data-site-theme="dark"] .sh-device-showcase .sh-simkod-demo-layer .skd .scene[data-scene="sim"] > .mcall,
  html[data-site-theme="dark"] .sh-device-showcase .sh-simkod-demo-layer .skd .scene[data-scene="buy"] > .md {
    inset: -2px -10px -10px;
    padding: 16px 22px 24px;
    border-radius: 0;
    box-shadow: none;
  }

  html[data-site-theme="dark"] .sh-device-showcase .sh-simkod-demo-layer .skd .scene[data-scene="buy"] > .wav {
    inset: -2px -10px -10px;
    border-radius: 0;
  }

  html[data-site-theme="dark"] .sh-device-showcase .sh-simkod-demo-layer .skd .scene[data-scene="buy"] > .wav > .wv-phone,
  html[data-site-theme="dark"] .sh-device-showcase .sh-simkod-demo-layer .skd .scene[data-scene="buy"] > .wav > .wv-codev {
    padding: 32px 32px 0;
  }

  /* Keep the scene cover opaque; refresh only its content during handoff. */
  html[data-site-theme="dark"] .sh-device-showcase .sh-simkod-demo-layer .skd .intro.on.swapin {
    animation: none;
  }

  html[data-site-theme="dark"] .sh-device-showcase .sh-simkod-demo-layer .skd .intro.on.swapin > * {
    animation: sh-skd-dark-intro-content-swap 180ms cubic-bezier(.22, .61, .36, 1) both;
  }

  @keyframes sh-skd-dark-intro-content-swap {
    from { opacity: .58; transform: translateY(2px); }
    to { opacity: 1; transform: none; }
  }
}

/*
 * LIGHT telefon demosu da mobildeki ayni katman geometrisini tum HERO
 * genisliklerinde kullanir.
 */
@media (min-width: 0px) {
  html[data-site-theme="light"] .sh-device-showcase .sh-simkod-demo-layer .skd .scene[data-scene="buy"],
  html[data-site-theme="light"] .sh-device-showcase .sh-simkod-demo-layer .skd .scene[data-scene="sim"],
  html[data-site-theme="light"] .sh-device-showcase .sh-simkod-demo-layer .skd .scene[data-scene="sms"] {
    position: absolute !important;
    inset: 0 !important;
    min-width: 0;
    min-height: 0;
    isolation: isolate;
  }

  html[data-site-theme="light"] .sh-device-showcase .sh-simkod-demo-layer .skd .scene[data-scene="sim"].is-active ~ .intro,
  html[data-site-theme="light"] .sh-device-showcase .sh-simkod-demo-layer .skd .scene[data-scene="buy"].is-active ~ .intro,
  html[data-site-theme="light"] .sh-device-showcase .sh-simkod-demo-layer .skd .scene[data-scene="sms"].is-active ~ .intro {
    inset: -2px -10px -10px;
    padding: 26px 34px 34px;
    border: 0;
    border-radius: 0;
    background: linear-gradient(160deg, #fff, #f6eeff);
    box-shadow: none;
  }

  html[data-site-theme="light"] .sh-device-showcase .sh-simkod-demo-layer .skd .scene[data-scene="sim"] > .md,
  html[data-site-theme="light"] .sh-device-showcase .sh-simkod-demo-layer .skd .scene[data-scene="sim"] > .mcall,
  html[data-site-theme="light"] .sh-device-showcase .sh-simkod-demo-layer .skd .scene[data-scene="buy"] > .md {
    inset: -2px -10px -10px;
    padding: 16px 22px 24px;
    border-radius: 0;
    box-shadow: none;
  }

  html[data-site-theme="light"] .sh-device-showcase .sh-simkod-demo-layer .skd .scene[data-scene="buy"] > .wav {
    inset: -2px -10px -10px;
    border-radius: 0;
  }

  html[data-site-theme="light"] .sh-device-showcase .sh-simkod-demo-layer .skd .scene[data-scene="buy"] > .wav > .wv-phone,
  html[data-site-theme="light"] .sh-device-showcase .sh-simkod-demo-layer .skd .scene[data-scene="buy"] > .wav > .wv-codev {
    padding: 32px 32px 0;
  }

  html[data-site-theme="light"] .sh-device-showcase .sh-simkod-demo-layer .skd .intro.on.swapin {
    animation: none;
  }

  html[data-site-theme="light"] .sh-device-showcase .sh-simkod-demo-layer .skd .intro.on.swapin > * {
    animation: sh-skd-dark-intro-content-swap 180ms cubic-bezier(.22, .61, .36, 1) both;
  }
}

html[data-site-theme="light"] .sh-device-showcase .sh-simkod-demo-mount {
  background: #f2eff8;
  box-shadow: inset 0 0 0 1px rgba(124, 92, 190, .14);
}

@media (max-width: 720px) {
  .sh-device-showcase .sh-simkod-demo-layer .skd .ctl button {
    width: calc(30 * var(--sh-u));
    height: calc(30 * var(--sh-u));
  }

  .sh-device-showcase .sh-simkod-demo-layer .skd .ctl .pp {
    width: calc(36 * var(--sh-u));
    height: calc(36 * var(--sh-u));
  }

  .sh-device-showcase .sh-simkod-demo-layer .skd .tm {
    min-width: calc(62 * var(--sh-u));
    font-size: calc(9 * var(--sh-u));
  }
}