.insa {
  position: relative;
  height: 620vh;
  margin-top: -68px;
}
.sahne-yapis {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(
      120% 90% at 70% 40%,
      #15151e 0%,
      var(--bg) 60%);
}
.sahne {
  position: absolute;
  inset: 0;
}
.sahne canvas {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity .9s var(--ease-out);
}
.sahne.hazir canvas {
  opacity: 1;
}
.sahne .yedek {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .9;
}
.sahne.hata canvas {
  display: none;
}
.sahne.hata .yedek {
  display: block;
}
.sahne-yapis .izgara {
  mask-image:
    radial-gradient(
      ellipse 70% 60% at 65% 45%,
      #000 20%,
      transparent 70%);
  opacity: .7;
}
.sahne-ufuk {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      58% 52% at 14% 24%,
      rgba(9, 9, 13, .94),
      rgba(9, 9, 13, .55) 45%,
      transparent 100%),
    radial-gradient(
      40% 40% at 8% 92%,
      rgba(9, 9, 13, .9),
      transparent 100%),
    linear-gradient(
      180deg,
      transparent 62%,
      rgba(9, 9, 13, .7) 88%,
      var(--bg));
}
@media (max-width: 760px) {
  .sahne-ufuk {
    background:
      radial-gradient(
        90% 40% at 30% 18%,
        rgba(9, 9, 13, .95),
        rgba(9, 9, 13, .5) 50%,
        transparent 100%),
      linear-gradient(
        180deg,
        transparent 55%,
        rgba(9, 9, 13, .85) 80%,
        var(--bg));
  }
}
.basliklar {
  position: absolute;
  left: clamp(20px, 5vw, 72px);
  top: clamp(96px, 15vh, 150px);
  right: clamp(20px, 5vw, 72px);
  max-width: 620px;
  pointer-events: none;
}
.baslik {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  opacity: 0;
  transform: translateY(16px);
  filter: blur(10px);
  transition:
    opacity .75s var(--ease-out),
    transform .95s cubic-bezier(.22, 1, .36, 1),
    filter .75s var(--ease-out);
}
.baslik.acik {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition-delay: .14s;
}
.baslik.gitti {
  transform: translateY(-14px);
  transition-duration:
    .5s,
    .6s,
    .5s;
}
.baslik h1,
.baslik h2 {
  font: 700 clamp(38px, 6vw, 86px)/.98 var(--baslik);
  letter-spacing: -.035em;
  font-variation-settings: "opsz" 96;
  margin: 0 0 14px;
  text-wrap: balance;
}
.baslik p {
  font-size: clamp(15px, 1.35vw, 19px);
  color: var(--yazi-2);
  margin: 0;
  max-width: 40ch;
}
.baslik h2 em,
.baslik h1 em {
  font-style: normal;
  color: var(--vurgu);
}
.dwg {
  position: absolute;
  right: clamp(20px, 5vw, 72px);
  top: clamp(96px, 15vh, 150px);
  display: grid;
  gap: 8px;
  justify-items: end;
  pointer-events: none;
}
.dwg span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px 0 10px;
  border-radius: 8px;
  border: 1px solid var(--cizgi-2);
  background: rgba(19, 19, 27, .85);
  backdrop-filter: blur(8px);
  font: 500 12.5px var(--mono);
  color: var(--yazi-2);
  letter-spacing: .02em;
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity .55s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: calc(var(--i) * 120ms);
}
.dwg span::before {
  content: "";
  width: 9px;
  height: 11px;
  border: 1.5px solid var(--vurgu);
  border-radius: 2px 4px 2px 2px;
}
.insa[data-asama="0"] .dwg span {
  opacity: 1;
  transform: none;
}
.insa:not([data-asama="0"]) .dwg span {
  transform: translateY(10px);
  transition-delay: calc(var(--i) * 40ms);
}
.ray {
  position: absolute;
  left: clamp(20px, 5vw, 72px);
  bottom: clamp(30px, 8vh, 76px);
  display: grid;
  gap: 4px;
  padding-left: 22px;
}
.ray::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--cizgi-2);
}
.ray::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--vurgu);
  transform-origin: top;
  transform: scaleY(var(--p, 0));
  transition: transform .15s linear;
}
.ray button {
  position: relative;
  appearance: none;
  background: none;
  border: 0;
  padding: 7px 8px 7px 10px;
  margin: 0 0 0 -4px;
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
  font: 600 12.5px var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--yazi-3);
  transition:
    color .2s,
    background .2s,
    transform 160ms var(--ease-out);
}
.ray button::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--cizgi-2);
  transition:
    border-color .2s,
    background .2s,
    transform .25s var(--ease-out);
}
.ray button:hover {
  color: var(--yazi);
}
.ray button:active {
  transform: scale(.97);
}
.ray button[aria-current] {
  color: var(--yazi);
}
.ray button[aria-current]::before {
  background: var(--vurgu);
  border-color: var(--vurgu);
  transform: scale(1.25);
  box-shadow: 0 0 0 4px rgba(255, 138, 66, .18);
}
.eylem {
  position: absolute;
  right: clamp(20px, 5vw, 72px);
  bottom: clamp(30px, 8vh, 76px);
  display: flex;
  gap: 10px;
}
.kaydir {
  position: absolute;
  left: 50%;
  bottom: clamp(26px, 6vh, 56px);
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 8px;
  font: 500 11.5px var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--yazi-3);
  pointer-events: none;
  transition: opacity .4s;
}
.kaydir i {
  width: 1px;
  height: 34px;
  background: linear-gradient(var(--vurgu), transparent);
  animation: kaydir-in 1.8s var(--ease-io) infinite;
  transform-origin: top;
}
@keyframes kaydir-in {
  0% {
    transform: scaleY(0);
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  100% {
    transform: scaleY(1);
    opacity: 0;
  }
}
.insa:not([data-asama="0"]) .kaydir {
  opacity: 0;
}
@media (max-width: 760px) {
  .insa {
    height: 560vh;
  }
  .basliklar {
    top: 86px;
    left: 18px;
    right: 18px;
  }
  .baslik h1,
  .baslik h2 {
    font-size: clamp(34px, 10.5vw, 52px);
    margin-bottom: 10px;
  }
  .baslik p {
    font-size: 15px;
  }
  .dwg {
    top: auto;
    bottom: 134px;
    right: 18px;
    gap: 6px;
  }
  .dwg span {
    height: 30px;
    font-size: 11.5px;
  }
  .ray {
    left: 18px;
    right: 18px;
    bottom: 22px;
    display: flex;
    gap: 2px;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .ray::-webkit-scrollbar {
    display: none;
  }
  .ray::before,
  .ray::after {
    display: none;
  }
  .ray button {
    padding: 8px 8px;
    margin: 0;
    font-size: 11px;
    letter-spacing: .06em;
    flex: none;
  }
  .ray button::before {
    left: 50%;
    top: auto;
    bottom: -1px;
    margin: 0 0 0 -2px;
    width: 4px;
    height: 4px;
  }
  .eylem {
    left: 18px;
    right: 18px;
    bottom: 70px;
  }
  .eylem .btn {
    flex: 1;
  }
  .kaydir {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .baslik,
  .dwg span {
    transition-duration: .2s;
    transform: none;
    filter: none;
  }
  .kaydir i {
    animation: none;
  }
}
.cizimler {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.ciz-kart {
  margin: 0;
  position: relative;
}
.ciz-kart.c-kesit {
  grid-column: span 4;
}
.ciz-kart.c-cephe {
  grid-column: span 2;
}
.ciz-kart.c-akso,
.ciz-kart.c-vaziyet,
.ciz-kart.c-pafta {
  grid-column: span 2;
}
.ciz-kart .ekran {
  margin: 0;
  height: 100%;
}
.c-kesit .ekran-ic {
  aspect-ratio: 21 / 9;
}
.c-cephe .ekran-ic {
  aspect-ratio: 21 / 9;
}
.c-akso .ekran-ic,
.c-vaziyet .ekran-ic,
.c-pafta .ekran-ic {
  aspect-ratio: 4 / 3;
}
.ciz-kart figcaption {
  position: absolute;
  left: 12px;
  bottom: 10px;
  font: 500 11.5px var(--mono);
  color: var(--yazi-3);
  letter-spacing: .08em;
  text-transform: uppercase;
  pointer-events: none;
}
@media (max-width: 960px) {
  .cizimler {
    grid-template-columns: repeat(2, 1fr);
  }
  .ciz-kart.c-kesit,
  .ciz-kart.c-cephe {
    grid-column: span 2;
  }
  .ciz-kart.c-akso,
  .ciz-kart.c-vaziyet {
    grid-column: span 1;
  }
  .ciz-kart.c-pafta {
    grid-column: span 2;
  }
  .c-pafta .ekran-ic {
    aspect-ratio: 16 / 10;
  }
}
@media (max-width: 520px) {
  .cizimler {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .ciz-kart,
  .ciz-kart.c-akso,
  .ciz-kart.c-vaziyet {
    grid-column: span 1;
  }
  .c-kesit .ekran-ic,
  .c-cephe .ekran-ic {
    aspect-ratio: 16 / 9;
  }
}
#cizimler {
  padding-top: 96px;
}
.secim {
  position: absolute;
  right: clamp(16px, 3vw, 48px);
  bottom: calc(clamp(30px, 8vh, 76px) + 50px);
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(12, 12, 18, .62);
  border: 1px solid var(--cizgi-2);
  backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.insa[data-asama="6"] .secim {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.secim-sira {
  display: grid;
  gap: 4px;
}
.secim-ad {
  font: 600 10.5px var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--yazi-2);
  padding-left: 2px;
}
.secim-kutular {
  display: grid;
  grid-template-columns: repeat(4, 100px);
  gap: 6px;
}
.secim-k {
  appearance: none;
  display: grid;
  grid-template-rows: 58px auto;
  gap: 4px;
  padding: 4px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  background: rgba(20, 20, 28, .7);
  border: 1px solid transparent;
  color: var(--yazi);
  text-decoration: none;
  min-width: 0;
  transition: border-color .2s, transform .15s var(--ease-out);
}
.secim-k img {
  width: 100%;
  height: 58px;
  object-fit: cover;
  border-radius: 5px;
  display: block;
  background: #1a1a22;
}
.secim-k b {
  font: 600 13px/1.2 var(--govde, inherit);
  padding: 0 2px 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.secim-k:hover {
  border-color: var(--yazi-3);
}
.secim-k:active {
  transform: scale(.97);
}
.secim-k[aria-pressed=true] {
  border-color: var(--vurgu);
}
.secim-k.kilit {
  grid-template-rows: 58px auto;
  align-content: start;
  justify-items: center;
  text-align: center;
  border: 1px dashed rgba(255, 138, 66, .45);
  background: rgba(255, 138, 66, .06);
}
.secim-k.kilit .ikon {
  display: grid;
  place-items: center;
  height: 58px;
  color: var(--vurgu);
}
.secim-k.kilit b {
  display: grid;
  gap: 1px;
  font-size: 12.5px;
  white-space: normal;
}
.secim-k.kilit small {
  font: 500 11px var(--govde, inherit);
  color: var(--yazi-2);
}
.insa[data-asama="6"] .eylem .btn {
  height: 38px;
  padding: 0 14px;
  font-size: 13px;
}
.sahne canvas {
  touch-action: pan-y;
}
.insa[data-asama="6"] .sahne canvas {
  cursor: grab;
}
.ray::before,
.ray::after {
  left: var(--ray-x, 4px) !important;
  top: var(--ray-ust, 6px) !important;
  bottom: var(--ray-alt, 6px) !important;
  width: 1px;
  transform-origin: top;
}
.ray::before {
  background: rgba(255, 255, 255, .18);
}
.ray button.gecti::before {
  background: var(--vurgu);
  border-color: var(--vurgu);
}
@media (max-width: 760px) {
  .secim {
    left: 10px;
    right: 10px;
    bottom: 112px;
    padding: 8px;
    max-height: 35vh;
  }
  .secim-kutular {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
  }
  .secim-k {
    grid-template-rows: 40px auto;
  }
  .secim-k img,
  .secim-k.kilit .ikon {
    height: 40px;
  }
  .secim-k b {
    font-size: 11px;
  }
  .secim-k.kilit b {
    font-size: 10.5px;
  }
}
.ray::after {
  transform: scaleY(var(--ray-p, 0)) !important;
}
.secim {
  padding: 6px 8px;
  gap: 5px;
  border-radius: 10px;
  bottom: calc(clamp(30px, 8vh, 76px) + 50px);
}
.secim-sira {
  display: flex;
  align-items: center;
  gap: 6px;
}
.secim-ad {
  width: 44px;
  font-size: 10px;
  letter-spacing: .1em;
  padding: 0;
}
.secim-kutular {
  display: flex;
  gap: 4px;
  grid-template-columns: none;
}
.secim-k,
.secim-k.kilit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 4px 8px;
  border-radius: 6px;
  grid-template-rows: none;
}
.secim-k b,
.secim-k.kilit b {
  font: 600 11.5px/1 var(--govde, inherit);
  padding: 0;
  display: inline;
  white-space: nowrap;
}
.secim-k.kilit .ikon {
  height: auto;
  width: auto;
  border: 0;
}
.secim-k.kilit b span {
  display: inline;
}
.gece-anahtar {
  position: absolute;
  right: clamp(16px, 3vw, 48px);
  top: clamp(80px, 12vh, 120px);
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  background: rgba(12, 12, 18, .62);
  border: 1px solid var(--cizgi-2);
  backdrop-filter: blur(8px);
  z-index: 3;
}
.gece-anahtar .ga {
  appearance: none;
  height: 24px;
  padding: 4px 9px;
  border-radius: 6px;
  border: 0;
  background: none;
  color: var(--yazi-2);
  font: 600 11.5px/1 var(--govde, inherit);
  cursor: pointer;
}
.gece-anahtar .ga[aria-pressed=true] {
  background: rgba(255, 138, 66, .18);
  color: var(--yazi);
  box-shadow: inset 0 0 0 1px var(--vurgu);
}
@media (max-width: 760px) {
  .secim {
    left: 8px;
    right: 8px;
    bottom: 112px;
    padding: 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .secim-sira {
    flex-wrap: nowrap;
  }
  .secim-kutular {
    flex-wrap: nowrap;
  }
  .gece-anahtar {
    top: auto;
    bottom: 186px;
    right: 8px;
  }
}
.secim {
  padding: 6px;
  border-radius: 12px;
}
.secim-kutular {
  display: flex;
  align-items: center;
  gap: 6px;
}
.secim-k,
.secim-k.kilit {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  background: rgba(20, 20, 28, .7);
}
.secim-k img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 7px;
  display: block;
}
.secim-k[aria-pressed=true] {
  border-color: var(--vurgu);
  box-shadow: 0 0 0 1px var(--vurgu);
}
.secim-k.kilit {
  border: 1px dashed rgba(255, 138, 66, .5);
  color: var(--vurgu);
  gap: 0;
  align-content: center;
}
.secim-k.kilit b {
  font: 600 11px/1 var(--govde, inherit);
  color: var(--yazi);
}
.secim-ayrac {
  width: 1px;
  height: 28px;
  background: var(--cizgi-2);
  margin: 0 2px;
}
.gece-dugme {
  position: absolute;
  right: clamp(16px, 3vw, 48px);
  top: clamp(80px, 12vh, 120px);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  color: var(--yazi);
  background: rgba(12, 12, 18, .62);
  border: 1px solid var(--cizgi-2);
  backdrop-filter: blur(8px);
}
.gece-dugme svg {
  grid-area: 1 / 1;
  transition: transform .45s var(--ease-out), opacity .3s;
}
.gece-dugme .ay {
  opacity: 0;
  transform: rotate(-90deg) scale(.6);
}
.gece-dugme.gece .gunes {
  opacity: 0;
  transform: rotate(90deg) scale(.6);
}
.gece-dugme.gece .ay {
  opacity: 1;
  transform: none;
}
@media (max-width: 760px) {
  .secim {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: 112px;
    padding: 5px;
    max-width: calc(100vw - 16px);
    overflow-x: auto;
  }
  .insa[data-asama="6"] .secim {
    transform: translateX(-50%);
  }
  .secim-k,
  .secim-k.kilit,
  .secim-k img {
    width: 40px;
    height: 40px;
  }
  .gece-dugme {
    top: 72px;
    right: 12px;
  }
}
.secim {
  display: grid;
  gap: 6px;
}
.secim-sira {
  display: grid;
  grid-template-columns: 62px auto;
  align-items: center;
  gap: 6px;
}
.secim-ad {
  width: auto;
  font: 500 11.5px/1 var(--govde, inherit);
  letter-spacing: 0;
  text-transform: none;
  color: var(--yazi-3);
}
@media (max-width: 760px) {
  .secim-sira {
    grid-template-columns: 56px auto;
  }
}
.secim {
  bottom: calc(clamp(30px, 8vh, 76px) + 60px) !important;
}
@media (max-width: 760px) {
  .secim {
    bottom: 128px !important;
  }
}
.eylem {
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.eylem-dug {
  display: flex;
  gap: 10px;
}
.eylem .secim {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
}
.insa:not([data-asama="6"]) .eylem .secim {
  display: none;
}
@media (max-width: 760px) {
  .eylem {
    align-items: stretch;
  }
  .eylem-dug .btn {
    flex: 1;
  }
  .eylem .secim {
    max-width: 100%;
    overflow-x: auto;
  }
}
@media (max-width: 760px) {
  .basliklar {
    right: 64px !important;
  }
  .secim-sira {
    grid-template-columns: 64px auto;
  }
}
.canli:not(.oyna),
.canli:not(.oyna)::before,
.canli:not(.oyna) *,
.canli:not(.oyna) *::before {
  animation-play-state: paused !important;
}
.ust-yazi.gor {
  opacity: 1;
  transform: none;
  overflow: clip;
  padding-bottom: 10px;
}
.ust-yazi.gor h2 {
  transform: translateY(105%);
  transition: transform .6s var(--ease-out);
}
.ust-yazi.gor.acik h2 {
  transform: none;
}
.ust-yazi.gor::after {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  margin-top: 4px;
  background: var(--vurgu);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease-out) .25s;
}
.ust-yazi.orta.gor::after {
  margin-inline: auto;
  transform-origin: center;
}
.ust-yazi.gor.acik::after {
  transform: none;
}
.ciz-kart .ekran {
  transition:
    transform .3s var(--ease-out),
    border-color .25s,
    box-shadow .3s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .ciz-kart:hover .ekran {
    transform: translateY(-4px);
    border-color: rgba(255, 138, 66, .45);
    box-shadow: 0 22px 44px -20px rgba(0, 0, 0, .9);
  }
}
.ciz-kart:active .ekran {
  transform: scale(.99);
  transition-duration: .12s;
}
.sayilar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 18px;
}
.sayilar div {
  border: 1px solid var(--cizgi);
  border-radius: 14px;
  background: var(--bg-2);
  padding: 18px 20px;
  display: grid;
  gap: 2px;
}
.sayilar b {
  font: 700 clamp(34px, 4vw, 48px)/1 var(--baslik);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--yazi);
}
.sayilar span {
  font: 500 13px var(--mono);
  letter-spacing: .02em;
  color: var(--yazi-3);
}
@media (max-width: 760px) {
  .sayilar {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .sayilar div {
    padding: 14px 16px;
  }
}
.adimlar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.adim {
  --g: calc(var(--i) * 1.5s);
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px 12px;
  padding: 12px 12px 18px;
  border-radius: var(--r);
  border: 1px solid var(--cizgi);
  background: var(--bg-2);
}
.adim::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--vurgu);
  opacity: 0;
  pointer-events: none;
  animation: a-vurgu 9s linear var(--g) infinite both;
}
@keyframes a-vurgu {
  0%, 2% {
    opacity: 0;
  }
  6%, 40% {
    opacity: .55;
  }
  48%, 100% {
    opacity: 0;
  }
}
.adim .sah {
  grid-column: 1 / -1;
}
.adim .no {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-left: 6px;
  border-radius: 50%;
  font: 700 14px var(--baslik);
  color: #1a0d04;
  background: var(--vurgu);
}
.adim h3 {
  font: 600 19px var(--baslik);
  margin: 0;
  letter-spacing: -.01em;
}
.sah {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  border: 1px solid var(--cizgi-2);
  background: #0b0b10;
  overflow: hidden;
}
.sah img {
  position: absolute;
  display: block;
}
.imlec {
  position: absolute;
  width: 14px;
  height: 20px;
  fill: #fff;
  stroke: #000;
  stroke-width: .8;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6));
}
.s1-alan {
  position: absolute;
  inset: 9% 9% 26% 9%;
  border-radius: 10px;
  border: 1.5px dashed var(--cizgi-2);
}
.s1-cer {
  position: absolute;
  inset: -1.5px;
  border-radius: 10px;
  border: 1.5px solid var(--vurgu);
  background: rgba(255, 138, 66, .06);
  opacity: 0;
  animation: s1-cer 9s var(--ease-out) var(--g) infinite both;
}
@keyframes s1-cer {
  0%, 12% {
    opacity: 0;
  }
  18%, 24% {
    opacity: 1;
  }
  32%, 100% {
    opacity: 0;
  }
}
.s1-plan {
  inset: 4%;
  width: 92%;
  height: 92%;
  object-fit: contain;
  animation: s1-plan 9s var(--ease-out) var(--g) infinite both;
}
@keyframes s1-plan {
  0%, 24% {
    opacity: 0;
    transform: scale(.94);
  }
  34%, 90% {
    opacity: 1;
    transform: none;
  }
  97%, 100% {
    opacity: 0;
    transform: none;
  }
}
.s1-dosya {
  position: absolute;
  left: 50%;
  top: 40%;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 12px 0 10px;
  border-radius: 8px;
  border: 1px solid var(--cizgi-2);
  background: var(--yuzey-2);
  font: 500 12px var(--mono);
  color: var(--yazi);
  white-space: nowrap;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .9);
  animation: s1-dosya 9s var(--ease-out) var(--g) infinite both;
}
.s1-dosya > i {
  width: 9px;
  height: 11px;
  border: 1.5px solid var(--vurgu);
  border-radius: 2px 4px 2px 2px;
}
@keyframes s1-dosya {
  0% {
    opacity: 0;
    transform: translate(-120%, -240%) rotate(-6deg);
  }
  4% {
    opacity: 1;
    transform: translate(-120%, -240%) rotate(-6deg);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0);
  }
  24% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(.9);
  }
  30%, 100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.6);
  }
}
.s1-imlec {
  left: 50%;
  top: 40%;
  margin: 14px 0 0 30px;
  animation: s1-imlec 9s var(--ease-out) var(--g) infinite both;
}
@keyframes s1-imlec {
  0% {
    opacity: 0;
    transform: translate(-260%, -340%);
  }
  4% {
    opacity: 1;
    transform: translate(-260%, -340%);
  }
  20%, 24% {
    opacity: 1;
    transform: none;
  }
  34%, 100% {
    opacity: 0;
    transform: translate(40%, 30%);
  }
}
.s1-km {
  position: absolute;
  left: 9%;
  right: 9%;
  bottom: 7%;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
}
.s1-km li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 600 10.5px/1 var(--mono);
  letter-spacing: .04em;
  color: var(--yazi);
  padding: 5px 7px;
  border-radius: 6px;
  border: 1px solid var(--cizgi-2);
  background: rgba(255, 255, 255, .03);
  animation: s1-km 9s var(--ease-out) calc(var(--g) + var(--i) * .22s) infinite both;
}
.s1-km li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--r);
}
@keyframes s1-km {
  0%, 32% {
    opacity: 0;
    transform: translateY(8px) scale(.9);
  }
  38%, 90% {
    opacity: 1;
    transform: none;
  }
  96%, 100% {
    opacity: 0;
    transform: none;
  }
}
.s2-plan {
  position: absolute;
  left: 4%;
  top: 8%;
  width: 44%;
  height: 84%;
}
.s2-plan img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: .9;
}
.s2-cizgi {
  position: absolute;
  inset: -6% 0;
  animation: s2-cizgi 9s var(--ease-out) var(--g) infinite both;
}
.s2-cizgi::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: var(--vurgu);
  box-shadow: 0 0 10px rgba(255, 138, 66, .8);
}
@keyframes s2-cizgi {
  0% {
    opacity: 0;
    transform: translateX(-50%);
  }
  4% {
    opacity: 1;
    transform: translateX(-50%);
  }
  22%, 90% {
    opacity: 1;
    transform: none;
  }
  97%, 100% {
    opacity: 0;
    transform: none;
  }
}
.s2-cikti {
  position: absolute;
  left: 52%;
  right: 4%;
  height: 27%;
  margin: 0;
  border-radius: 6px;
  border: 1px solid var(--cizgi);
  background: #0e0e14;
  top: calc(6% + var(--i) * 30.5%);
  animation: s2-cikti 9s var(--ease-out) calc(var(--g) + var(--i) * .5s) infinite both;
}
.s2-cikti img {
  inset: 6% 4% 6% 4%;
  width: 92%;
  height: 88%;
  object-fit: contain;
}
.s2-cikti b {
  position: absolute;
  left: 5px;
  top: 4px;
  z-index: 1;
  padding: 1px 5px;
  border-radius: 4px;
  background: #0e0e14;
  font: 600 9.5px var(--mono);
  letter-spacing: .06em;
  color: var(--yazi-3);
}
@keyframes s2-cikti {
  0%, 20% {
    opacity: 0;
    transform: translateX(-30%) scale(.86);
  }
  28%, 90% {
    opacity: 1;
    transform: none;
  }
  97%, 100% {
    opacity: 0;
    transform: none;
  }
}
.s3-kagit {
  position: absolute;
  left: 8%;
  top: 7%;
  height: 86%;
  aspect-ratio: 1100 / 1558;
  border-radius: 3px;
  overflow: hidden;
  background: #f2efe8;
  box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .95);
  animation: s3-kagit 9s var(--ease-out) var(--g) infinite both;
}
.s3-kagit img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.s3-antet {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 7.6%;
  background: rgba(255, 138, 66, .55);
  opacity: 0;
  animation: s3-antet 9s var(--ease-out) var(--g) infinite both;
}
@keyframes s3-kagit {
  0% {
    opacity: 0;
    transform: translateY(24%) rotate(-3deg);
  }
  16%, 92% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: translateY(-6%);
  }
}
@keyframes s3-antet {
  0%, 16% {
    opacity: 0;
  }
  22%, 28% {
    opacity: 1;
  }
  36%, 100% {
    opacity: 0;
  }
}
.s3-dug {
  position: absolute;
  right: 7%;
  top: 30%;
  display: grid;
  gap: 8px;
}
.s3-dug span {
  display: grid;
  place-items: center;
  width: 74px;
  height: 32px;
  border-radius: 8px;
  font: 600 12px var(--mono);
  letter-spacing: .06em;
  border: 1px solid var(--cizgi-2);
  background: var(--yuzey-2);
  color: var(--yazi);
  animation: s3-dug 9s var(--ease-out) var(--g) infinite both;
}
.s3-dug .s3-pdf {
  background:
    linear-gradient(
      180deg,
      var(--vurgu-2),
      var(--vurgu));
  color: #1a0d04;
  border-color: transparent;
  animation-name: s3-pdf;
}
@keyframes s3-dug {
  0%, 26% {
    opacity: 0;
    transform: translateX(10px);
  }
  32%, 92% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
  }
}
@keyframes s3-pdf {
  0%, 26% {
    opacity: 0;
    transform: translateX(10px);
  }
  32%, 45% {
    opacity: 1;
    transform: none;
  }
  47% {
    transform: scale(.92);
  }
  50%, 92% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
  }
}
.s3-imlec {
  right: 7%;
  top: 30%;
  margin: 18px 30px 0 0;
  animation: s3-imlec 9s var(--ease-out) var(--g) infinite both;
}
@keyframes s3-imlec {
  0%, 30% {
    opacity: 0;
    transform: translate(40px, 60px);
  }
  34% {
    opacity: 1;
    transform: translate(40px, 60px);
  }
  44%, 50% {
    opacity: 1;
    transform: none;
  }
  58%, 100% {
    opacity: 0;
    transform: translate(10px, 20px);
  }
}
.s3-bar {
  position: absolute;
  right: 7%;
  top: calc(30% + 84px);
  width: 74px;
  height: 4px;
  border-radius: 2px;
  background: var(--cizgi-2);
  overflow: hidden;
  animation: s3-dug 9s var(--ease-out) var(--g) infinite both;
}
.s3-bar i {
  position: absolute;
  inset: 0;
  background: var(--yesil);
  transform-origin: left;
  animation: s3-bar 9s var(--ease-out) var(--g) infinite both;
}
@keyframes s3-bar {
  0%, 50% {
    transform: scaleX(0);
  }
  68%, 100% {
    transform: scaleX(1);
  }
}
.s3-tik {
  position: absolute;
  right: calc(7% + 25px);
  top: calc(30% + 100px);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--yesil);
  animation: s3-tik 9s var(--ease-out) var(--g) infinite both;
}
.s3-tik::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 5px;
  width: 6px;
  height: 11px;
  border: solid #08130a;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
@keyframes s3-tik {
  0%, 68% {
    opacity: 0;
    transform: scale(.4);
  }
  74% {
    opacity: 1;
    transform: scale(1.12);
  }
  78%, 92% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
  }
}
@media (max-width: 960px) {
  .adimlar {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin-inline: auto;
    gap: 12px;
  }
  .adim {
    --g: 0s;
  }
}
#alanlar {
  padding-top: 40px;
}
.al-etiket {
  font: 600 14px var(--font);
  letter-spacing: .01em;
  color: var(--vurgu);
  margin: 34px 0 14px;
}
.ust-yazi + .al-etiket {
  margin-top: 0;
}
.alan-kart {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.ak {
  margin: 0;
  padding: 10px 10px 14px;
}
.ak.ak-genis,
.ak.ak-genis2 {
  grid-column: span 2;
}
.ak-sah {
  position: relative;
  flex: 1;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  border: 1px solid var(--cizgi-2);
  background: #0b0b10;
  overflow: hidden;
}
.ak-genis .ak-sah,
.ak-genis2 .ak-sah {
  aspect-ratio: auto;
  min-height: 180px;
}
.ak-sah > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: transform .45s var(--ease-out);
}
.ak-sah > .ekran-ic {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
}
.ak figcaption {
  font: 600 16px var(--baslik);
  letter-spacing: -.01em;
  padding: 12px 6px 0;
  color: var(--yazi);
}
@media (hover: hover) and (pointer: fine) {
  .ak:hover .ak-sah > svg {
    transform: scale(1.035);
  }
}
.ak:active {
  transform: scale(.99);
  transition-duration: .12s;
}
@media (max-width: 960px) {
  .alan-kart {
    grid-template-columns: 1fr 1fr;
  }
  .ak.ak-genis2 {
    grid-column: span 1;
  }
  .ak-genis2 .ak-sah {
    aspect-ratio: 16 / 10;
    min-height: 0;
  }
  .ak-genis .ak-sah {
    aspect-ratio: 2 / 1;
    min-height: 0;
  }
}
@media (max-width: 560px) {
  .alan-kart {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .ak.ak-genis {
    grid-column: span 1;
  }
  .ak-genis .ak-sah {
    aspect-ratio: 16 / 10;
  }
  .ak figcaption {
    font-size: 15px;
    padding-top: 10px;
  }
}
.ak-sah svg [pathLength] {
  stroke-dasharray: 1;
}
.v-bitki .vb-ad rect {
  fill: #3a3a48;
}
.vb-ay rect {
  transform-box: fill-box;
  transform-origin: center;
  animation: vb-ay 7s var(--ease-out) infinite both;
  animation-delay: calc(var(--c) * 90ms + var(--r) * 40ms);
}
@keyframes vb-ay {
  0%, 4% {
    opacity: 0;
    transform: scale(.2);
  }
  14%, 84% {
    opacity: 1;
    transform: none;
  }
  94%, 100% {
    opacity: 0;
    transform: scale(.6);
  }
}
.vk-arazi,
.vk-plat {
  fill: none;
  stroke-width: 2;
}
.vk-arazi {
  stroke: #ece6da;
  animation: ciz 7s var(--ease-out) infinite both;
}
.vk-plat {
  stroke: var(--vurgu);
  stroke-dasharray: 1;
  animation: ciz2 7s var(--ease-out) infinite both;
}
.vk-kazi {
  fill: rgba(255, 92, 108, .42);
  animation: belir 7s var(--ease-out) infinite both;
}
.vk-dolgu {
  fill: rgba(106, 166, 216, .45);
  animation: belir 7s var(--ease-out) infinite both;
  animation-name: belir2;
}
.vk-ok path {
  fill: none;
  stroke: #ece6da;
  stroke-width: 1.6;
}
.vk-ok {
  animation: belir3 7s var(--ease-out) infinite both;
}
.vk-m {
  fill: var(--yazi-2);
  font: 600 15px var(--mono);
  animation: belir3 7s var(--ease-out) infinite both;
}
@keyframes ciz {
  0% {
    stroke-dashoffset: 1;
  }
  24%, 92% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}
@keyframes ciz2 {
  0%, 22% {
    stroke-dashoffset: 1;
  }
  38%, 92% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}
@keyframes belir {
  0%, 38% {
    opacity: 0;
  }
  48%, 92% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes belir2 {
  0%, 48% {
    opacity: 0;
  }
  58%, 92% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes belir4 {
  0%, 28% {
    opacity: 0;
    transform: translateY(4px);
  }
  36%, 92% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
  }
}
@keyframes belir3 {
  0%, 60% {
    opacity: 0;
    transform: translateY(4px);
  }
  68%, 92% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
  }
}
.vd-zemin {
  fill: #12121a;
  stroke: var(--cizgi-2);
}
.vd-bina {
  fill: #2a2a36;
  stroke: #4a4a5c;
}
.vd-akis path {
  fill: none;
  stroke: #6aa6d8;
  stroke-width: 1.6;
  stroke-dasharray: 4 7;
  animation: akis 1.2s linear infinite;
}
@keyframes akis {
  to {
    stroke-dashoffset: -22;
  }
}
.vd-dusuk {
  fill: #6aa6d8;
}
.vd-halka {
  fill: none;
  stroke: #6aa6d8;
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  animation: halka 2s var(--ease-out) infinite;
}
@keyframes halka {
  0% {
    opacity: .9;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(3.6);
  }
}
.vd-bahce {
  fill: rgba(111, 154, 79, .22);
  stroke: #6f9a4f;
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
  transform-box: fill-box;
  transform-origin: center;
  animation: bahce 7s var(--ease-out) infinite both;
}
@keyframes bahce {
  0%, 30% {
    opacity: 0;
    transform: scale(.5);
  }
  40%, 90% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
  }
}
.vg-bina {
  fill: #e6ddcb;
}
.vg-g {
  fill: rgba(0, 0, 0, .55);
  stroke: rgba(255, 255, 255, .08);
}
.vg-s {
  fill: #ffd27a;
}
.vg-t {
  fill: var(--yazi);
  font: 600 15px var(--mono);
}
.vg-g1,
.vg-s1,
.vg-t1 {
  animation: vg1 9s var(--ease-out) infinite both;
}
.vg-g2,
.vg-s2,
.vg-t2 {
  animation: vg2 9s var(--ease-out) infinite both;
}
.vg-g3,
.vg-s3,
.vg-t3 {
  animation: vg3 9s var(--ease-out) infinite both;
}
@keyframes vg1 {
  0% {
    opacity: 0;
  }
  5%, 30% {
    opacity: 1;
  }
  36%, 100% {
    opacity: 0;
  }
}
@keyframes vg2 {
  0%, 31% {
    opacity: 0;
  }
  37%, 63% {
    opacity: 1;
  }
  69%, 100% {
    opacity: 0;
  }
}
@keyframes vg3 {
  0%, 64% {
    opacity: 0;
  }
  70%, 95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.vg-golge {
  filter: blur(.4px);
}
.vp-toprak {
  fill: #2b2219;
  animation: belir 7s var(--ease-out) infinite both;
  animation-name: pk-toprak;
}
@keyframes pk-toprak {
  0%, 16% {
    opacity: 0;
  }
  26%, 92% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.vp-zemin {
  fill: none;
  stroke: #ece6da;
  stroke-width: 2;
  animation: ciz 7s var(--ease-out) infinite both;
}
.vp-agac path,
.vp-agac circle {
  fill: none;
  stroke: #6f9a4f;
  stroke-width: 1.8;
  animation: ciz2 7s var(--ease-out) infinite both;
}
.vp-agac circle:nth-child(3) {
  animation-delay: .25s;
}
.vp-agac circle:nth-child(4) {
  animation-delay: .4s;
}
.vp-insan {
  fill: none;
  stroke: #ece6da;
  stroke-width: 1.6;
  animation: belir 7s var(--ease-out) infinite both;
}
.vp-insan circle {
  fill: #ece6da;
}
.vp-kot {
  animation: belir3 7s var(--ease-out) infinite both;
}
.vp-kot path {
  fill: var(--vurgu);
}
.vp-kot text {
  fill: var(--yazi-2);
  font: 600 10px var(--mono);
}
.v-tablo {
  position: absolute;
  inset: 10% 6%;
  display: grid;
  grid-auto-rows: 1fr;
  gap: 6px;
}
.vt-bas {
  display: flex;
  align-items: center;
  gap: 6px;
}
.vt-bas i {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: #3a3a48;
}
.vt-bas b {
  font: 600 11px var(--mono);
  color: #0b1a0f;
  background: var(--yesil);
  padding: 3px 7px;
  border-radius: 5px;
  animation: belir4 6s var(--ease-out) infinite both;
}
.vt-sat {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 6px;
  align-items: center;
  border-top: 1px solid var(--cizgi);
  padding-top: 6px;
}
.vt-sat i {
  height: 7px;
  border-radius: 4px;
  background: #c9c2b4;
  transform-origin: left;
  transform: scaleX(var(--w));
  animation: vt-hucre 6s var(--ease-out) calc(var(--i) * .18s) infinite both;
}
.vt-top i {
  background: var(--vurgu);
}
@keyframes vt-hucre {
  0%, 4% {
    transform: scaleX(0);
    opacity: 0;
  }
  16%, 88% {
    transform: scaleX(var(--w));
    opacity: 1;
  }
  96%, 100% {
    transform: scaleX(var(--w));
    opacity: 0;
  }
}
.v-mahal {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 84%;
  aspect-ratio: 5 / 3;
  transform: translate(-50%, -50%);
  perspective: 700px;
}
.v-mahal i {
  position: absolute;
  width: 20%;
  height: 33.333%;
  border: 1.5px solid #ece6da;
  border-radius: 1px;
}
.vm-taban {
  left: 20%;
  top: 33.333%;
  background:
    linear-gradient(#ece6da, #ece6da) 30% 100% / 26% 2px no-repeat,
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, .07) 0 1px,
      transparent 1px 12px),
    #15151d;
  animation: belir0 8s var(--ease-out) infinite both;
}
.vm-d {
  background: #1b1b24;
  animation: vm-ac 8s var(--ease-out) infinite both;
}
.vm-d::before {
  content: "";
  position: absolute;
  border: 1.5px solid #ece6da;
}
.vm-k {
  left: 20%;
  top: 0;
  transform-origin: 50% 100%;
  --r0: rotateX(-88deg);
}
.vm-k::before {
  left: 30%;
  width: 26%;
  bottom: -1.5px;
  height: 70%;
}
.vm-g {
  left: 20%;
  top: 66.666%;
  transform-origin: 50% 0;
  --r0: rotateX(88deg);
  animation-delay: .2s;
}
.vm-g::before {
  left: 18%;
  right: 18%;
  top: 22%;
  height: 34%;
  background: rgba(143, 196, 220, .25);
}
.vm-b {
  left: 0;
  top: 33.333%;
  transform-origin: 100% 50%;
  --r0: rotateY(88deg);
  animation-delay: .4s;
}
.vm-b::before {
  left: 24%;
  right: 24%;
  top: 26%;
  height: 30%;
  background: rgba(143, 196, 220, .25);
}
.vm-dg {
  left: 40%;
  top: 33.333%;
  transform-origin: 0 50%;
  --r0: rotateY(-88deg);
  animation-delay: .6s;
}
.vm-dg::before {
  left: 10%;
  right: 50%;
  bottom: 14%;
  top: 50%;
  background: #2c2c38;
}
.vm-tavan {
  left: 74%;
  top: 33.333%;
  border-style: dashed !important;
  background:
    radial-gradient(
      circle,
      #ffd27a 0 2.5px,
      transparent 3px) 0 0 / 50% 50% #15151d;
  background-position: 25% 25%;
  animation: vm-tavan 8s var(--ease-out) infinite both;
}
@keyframes belir0 {
  0% {
    opacity: 0;
  }
  6%, 92% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes vm-ac {
  0%, 8% {
    opacity: 0;
    transform: var(--r0);
  }
  12% {
    opacity: 1;
    transform: var(--r0);
  }
  26%, 88% {
    opacity: 1;
    transform: none;
  }
  96%, 100% {
    opacity: 0;
    transform: var(--r0);
  }
}
@keyframes vm-tavan {
  0%, 34% {
    opacity: 0;
    transform: translateX(-30%);
  }
  44%, 90% {
    opacity: 1;
    transform: none;
  }
  98%, 100% {
    opacity: 0;
  }
}
.v-malz {
  position: absolute;
  inset: 10% 8% 10% 8%;
  display: grid;
  grid-template-rows: repeat(4, 1fr) auto;
  gap: 7px;
}
.v-malz > div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  animation: vm-sat 6s var(--ease-out) calc(var(--i) * .2s) infinite both;
}
.v-malz img {
  height: 100%;
  aspect-ratio: 1;
  max-height: 28px;
  border-radius: 4px;
  object-fit: cover;
}
.v-malz > div i {
  height: 7px;
  border-radius: 4px;
  background: #3a3a48;
}
@keyframes vm-sat {
  0%, 4% {
    opacity: 0;
    transform: translateX(-14px);
  }
  14%, 88% {
    opacity: 1;
    transform: none;
  }
  96%, 100% {
    opacity: 0;
  }
}
.vm-cipler {
  margin: 0;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.vm-cipler span {
  font: 600 10.5px var(--mono);
  padding: 3px 7px;
  border-radius: 5px;
  border: 1px solid var(--cizgi-2);
  color: var(--yazi);
  animation: belir4 6s var(--ease-out) infinite both;
}
.vm-cipler span + span {
  background: var(--yesil);
  color: #0b1a0f;
  border-color: transparent;
  animation-delay: .15s;
}
.vi-oda {
  fill: #101017;
  stroke: #4a4a5c;
  stroke-width: 1.5;
}
.vi-hale circle {
  fill: url(#isikH);
  transform-box: fill-box;
  transform-origin: center;
  animation: vi-hale 6s var(--ease-out) calc(var(--i) * .3s) infinite both;
}
.vi-arm circle {
  fill: #ffd27a;
  animation: vi-arm 6s var(--ease-out) calc(var(--i) * .3s) infinite both;
}
@keyframes vi-hale {
  0%, 6% {
    opacity: 0;
    transform: scale(.5);
  }
  18%, 86% {
    opacity: 1;
    transform: none;
  }
  96%, 100% {
    opacity: 0;
    transform: scale(.9);
  }
}
@keyframes vi-arm {
  0%, 6% {
    opacity: .25;
  }
  12%, 86% {
    opacity: 1;
  }
  96%, 100% {
    opacity: .25;
  }
}
.vi-lx {
  fill: var(--yazi-2);
  font: 600 13px var(--mono);
  animation: belir3 6s var(--ease-out) infinite both;
}
.vt-oda {
  fill: #101017;
  stroke: #ece6da;
  stroke-width: 2;
}
.vt-donus {
  fill: rgba(106, 166, 216, .08);
  stroke: #6aa6d8;
  stroke-width: 1.4;
  stroke-dasharray: 4 4;
  transform-box: fill-box;
  transform-origin: center;
  animation: donus 16s linear infinite;
}
.vt-set {
  fill: #2c2c38;
  stroke: #c9c2b4;
  stroke-width: 1.2;
  animation: vt-set 10s var(--ease-out) infinite both;
}
.vt-s1 {
  animation-delay: 2s;
}
.vt-s2 {
  animation-delay: 4s;
}
.vt-s3 {
  animation-delay: 6s;
}
.vt-s4 {
  animation-delay: 8s;
}
@keyframes vt-set {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  4%, 18% {
    opacity: 1;
    transform: none;
  }
  22%, 100% {
    opacity: 0;
    transform: none;
  }
}
.vt-ad {
  position: absolute;
  right: 8px;
  top: 8px;
  display: grid;
}
.vt-ad span {
  grid-area: 1 / 1;
  justify-self: end;
  font: 600 11px var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--vurgu);
  padding: 3px 7px;
  border-radius: 5px;
  background: #1a120c;
  border: 1px solid rgba(255, 138, 66, .45);
  animation: vt-set 10s var(--ease-out) infinite both;
}
.vt-ad span:nth-child(2) {
  animation-delay: 2s;
}
.vt-ad span:nth-child(3) {
  animation-delay: 4s;
}
.vt-ad span:nth-child(4) {
  animation-delay: 6s;
}
.vt-ad span:nth-child(5) {
  animation-delay: 8s;
}
@keyframes donus {
  to {
    transform: rotate(360deg);
  }
}
.vr-dolu {
  fill: #3a3a48;
  animation: belir0 7s var(--ease-out) infinite both;
}
.vr-c {
  fill: none;
  stroke: #ece6da;
  stroke-width: 1.6;
}
.vr-kesit {
  stroke-width: 2.4;
  animation: ciz 7s var(--ease-out) infinite both;
}
.vr-kac .vr-c {
  stroke: var(--yazi-3);
  animation: ciz2 7s var(--ease-out) infinite both;
}
.vr-arka {
  animation: vr-arka 7s var(--ease-out) infinite both;
}
@keyframes vr-arka {
  0%, 36% {
    stroke-dashoffset: 1;
  }
  52%, 92% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}
.vr-insan {
  fill: none;
  stroke: var(--vurgu);
  stroke-width: 1.2;
  animation: belir3 7s var(--ease-out) infinite both;
}
.vr-insan circle {
  fill: var(--vurgu);
}
@media (prefers-reduced-motion: reduce) {
  .canli *,
  .canli::before,
  .adim::before {
    animation: none !important;
  }
  .adim::before,
  .s1-cer,
  .s3-antet,
  .s1-dosya,
  .s1-imlec,
  .s3-imlec,
  .s3-tik,
  .s3-bar {
    opacity: 0;
  }
  .vg-g2,
  .vg-s2,
  .vg-t2,
  .vg-g3,
  .vg-s3,
  .vg-t3,
  .vt-set:not(.vt-s0),
  .vt-ad span:not(:first-child),
  .vd-halka {
    opacity: 0;
  }
  .ak-sah svg [pathLength] {
    stroke-dashoffset: 0;
  }
  .ust-yazi.gor h2,
  .ust-yazi.gor::after {
    transform: none;
    transition: none;
  }
  .ciz-kart .ekran,
  .ak-sah > svg {
    transition: none;
  }
}
.ak-sah > .ak-vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ak-sah.ak-beyaz {
  background: #fff;
}
.ak-sah > .ak-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
  box-sizing: border-box;
}