/* Temporary site entrance for soneryilmaz.com */

html.coming-soon-mounted,
html.coming-soon-mounted body {
  min-height: 100%;
  overflow: hidden;
}

.coming-soon,
.coming-soon * {
  box-sizing: border-box;
}

.coming-soon {
  --cs-bg: #02080b;
  --cs-bg-2: #061419;
  --cs-text: #f4efe5;
  --cs-muted: rgba(244, 239, 229, 0.68);
  --cs-dim: rgba(244, 239, 229, 0.38);
  --cs-line: rgba(101, 206, 219, 0.38);
  --cs-line-soft: rgba(244, 239, 229, 0.14);
  --cs-cyan: #65cedb;
  --cs-cyan-strong: #8cf4ff;
  --cs-warm: #d8b98a;
  --cs-shadow: rgba(0, 0, 0, 0.42);

  position: fixed;
  inset: 0;
  z-index: 10000;
  min-height: 100dvh;
  overflow: auto;
  color: var(--cs-text);
  background:
    linear-gradient(145deg, rgba(2, 8, 11, 0.96) 0%, rgba(3, 13, 17, 0.98) 45%, rgba(1, 6, 9, 1) 100%),
    var(--cs-bg);
  font-family: "DM Sans", Arial, sans-serif;
  isolation: isolate;
}

.coming-soon::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(101, 206, 219, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(101, 206, 219, 0.06) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: linear-gradient(90deg, transparent, black 30%, black 72%, transparent);
  opacity: 0.42;
}

.coming-soon::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(115deg, transparent 0 45%, rgba(101, 206, 219, 0.11) 54%, transparent 66%),
    linear-gradient(82deg, transparent 0 52%, rgba(216, 185, 138, 0.10) 60%, transparent 69%);
  opacity: 0.75;
  pointer-events: none;
}

.coming-frame {
  position: relative;
  width: calc(100% - 48px);
  min-height: calc(100dvh - 48px);
  margin: 24px;
  padding: 48px 56px 42px;
  border: 1px solid rgba(101, 206, 219, 0.36);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(6, 20, 25, 0.60), rgba(2, 8, 11, 0.22)),
    rgba(2, 8, 11, 0.62);
  box-shadow: 0 30px 90px var(--cs-shadow);
  display: flex;
  flex-direction: column;
  gap: 42px;
  overflow: hidden;
}

.coming-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(244, 239, 229, 0.06), transparent);
  transform: translateX(-100%);
  animation: coming-frame-sheen 8s ease-in-out infinite;
  pointer-events: none;
}

.coming-header,
.coming-footer {
  position: relative;
  z-index: 2;
}

.coming-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.coming-brand {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  color: var(--cs-text);
  text-decoration: none;
}

.coming-logo {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 48px;
  line-height: 1;
  font-weight: 500;
}

.coming-brand-line {
  width: 1px;
  height: 58px;
  background: rgba(244, 239, 229, 0.38);
}

.coming-name {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 30px;
  line-height: 1.1;
  font-weight: 400;
}

.coming-status {
  font-family: "DM Mono", Consolas, monospace;
  font-size: 12px;
  color: var(--cs-dim);
}

.coming-main {
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(330px, 0.78fr) minmax(380px, 1fr);
  align-items: center;
  gap: 54px;
}

.coming-copy {
  max-width: 560px;
  padding-top: 40px;
}

.coming-title {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 112px;
  line-height: 0.96;
  font-weight: 400;
  color: var(--cs-text);
}

.coming-title span {
  display: block;
}

.coming-lede {
  width: min(100%, 480px);
  margin: 34px 0 34px;
  color: var(--cs-muted);
  font-size: 22px;
  line-height: 1.55;
  font-weight: 300;
}

.coming-mail {
  display: inline-flex;
  align-items: center;
  min-height: 72px;
  gap: 20px;
  padding: 0 28px;
  border: 1px solid var(--cs-cyan);
  border-radius: 8px;
  color: var(--cs-cyan-strong);
  background: rgba(2, 8, 11, 0.55);
  text-decoration: none;
  font-size: 22px;
  line-height: 1;
  box-shadow: 0 0 0 1px rgba(101, 206, 219, 0.08), 0 18px 42px rgba(0, 0, 0, 0.26);
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease, color 220ms ease;
}

.coming-mail svg {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
}

.coming-mail:hover,
.coming-mail:focus-visible {
  color: var(--cs-text);
  border-color: var(--cs-cyan-strong);
  background: rgba(101, 206, 219, 0.12);
  transform: translateY(-2px);
  outline: none;
}

.coming-visual {
  position: relative;
  min-height: 620px;
  align-self: stretch;
}

.coming-visual::before {
  content: "";
  position: absolute;
  top: 4%;
  right: -18%;
  width: 92%;
  height: 92%;
  border: 1px solid rgba(101, 206, 219, 0.22);
  border-radius: 8px;
  transform: skewY(-8deg);
  opacity: 0.55;
}

.coming-flow {
  position: absolute;
  inset: 0;
  filter: drop-shadow(0 0 18px rgba(101, 206, 219, 0.22));
}

.coming-flow path {
  fill: none;
  stroke-linecap: round;
  stroke-width: 1.2;
  transform-box: fill-box;
  transform-origin: center;
  vector-effect: non-scaling-stroke;
  animation: coming-flow-wave 9s ease-in-out infinite;
}

.coming-flow .cyan {
  stroke: rgba(101, 206, 219, 0.72);
}

.coming-flow .warm {
  stroke: rgba(216, 185, 138, 0.68);
}

.coming-flow .soft {
  stroke: rgba(244, 239, 229, 0.22);
}

.coming-flow path:nth-child(2n) {
  animation-duration: 10.5s;
  animation-delay: -2.2s;
}

.coming-flow path:nth-child(3n) {
  animation-duration: 12s;
  animation-delay: -4.4s;
}

.coming-flow path:nth-child(4n) {
  animation-direction: reverse;
}

.coming-node,
.coming-dot,
.coming-rail {
  position: absolute;
  display: block;
  pointer-events: none;
}

.coming-node {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(244, 239, 229, 0.78);
  border-radius: 50%;
  background: rgba(2, 8, 11, 0.9);
  box-shadow: 0 0 0 5px rgba(101, 206, 219, 0.12), 0 0 22px rgba(101, 206, 219, 0.24);
  animation: coming-node-float 6.8s ease-in-out infinite;
}

.coming-node::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: inherit;
  background: var(--cs-cyan);
}

.coming-node--a {
  left: 18%;
  top: 55%;
  --node-x: 10px;
  --node-y: -14px;
  animation-delay: -1s;
}

.coming-node--b {
  left: 33%;
  top: 37%;
  --node-x: -8px;
  --node-y: 12px;
  animation-delay: -2.6s;
}

.coming-node--c {
  left: 40%;
  top: 27%;
  --node-x: 7px;
  --node-y: 10px;
  animation-delay: -4s;
}

.coming-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cs-cyan);
  opacity: 0.75;
  animation: coming-dot-drift var(--dot-speed, 7.4s) ease-in-out infinite;
}

.coming-dot--a { left: 12%; top: 28%; --dot-x: 28px; --dot-y: 46px; --dot-speed: 8.4s; animation-delay: -0.8s; }
.coming-dot--b { left: 28%; top: 48%; --dot-x: -22px; --dot-y: -38px; --dot-speed: 7.2s; animation-delay: -2.1s; }
.coming-dot--c { right: 18%; top: 22%; --dot-x: -34px; --dot-y: 28px; --dot-speed: 9.6s; animation-delay: -3.4s; background: var(--cs-warm); }
.coming-dot--d { right: 8%; top: 56%; --dot-x: -26px; --dot-y: -42px; --dot-speed: 8.8s; animation-delay: -1.6s; }
.coming-dot--e { left: 48%; bottom: 17%; --dot-x: 36px; --dot-y: -24px; --dot-speed: 10.2s; animation-delay: -4.8s; background: var(--cs-warm); }

.coming-rail {
  right: 30%;
  top: 4%;
  width: 1px;
  height: 42%;
  background: linear-gradient(to bottom, transparent, rgba(101, 206, 219, 0.60), transparent);
}

.coming-rail--second {
  right: 14%;
  top: 12%;
  height: 62%;
  opacity: 0.45;
}

.coming-points {
  position: absolute;
  right: -12%;
  bottom: 2%;
  width: 72%;
  aspect-ratio: 1.15;
  background-image: radial-gradient(rgba(101, 206, 219, 0.55) 1px, transparent 1px);
  background-size: 18px 18px;
  transform: rotate(-18deg) skewX(18deg);
  opacity: 0.55;
  mask-image: linear-gradient(115deg, transparent 5%, black 40%, transparent 84%);
}

.coming-footer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  color: var(--cs-muted);
  font-family: "DM Mono", Consolas, monospace;
  font-size: 16px;
}

.coming-footer-line {
  height: 1px;
  background: linear-gradient(90deg, rgba(244, 239, 229, 0.28), rgba(101, 206, 219, 0.62));
}

.coming-footer-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cs-cyan);
  box-shadow: 0 0 14px rgba(101, 206, 219, 0.8);
}

@keyframes coming-frame-sheen {
  0%, 68%, 100% {
    transform: translateX(-100%);
  }
  82% {
    transform: translateX(100%);
  }
}

@keyframes coming-flow-wave {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(0deg) scaleY(1);
  }
  35% {
    transform: translate3d(7px, -5px, 0) rotate(0.8deg) scaleY(1.018);
  }
  68% {
    transform: translate3d(-5px, 6px, 0) rotate(-0.65deg) scaleY(0.992);
  }
}

@keyframes coming-node-float {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(var(--node-x, 8px), var(--node-y, -10px), 0);
  }
}

@keyframes coming-dot-drift {
  0%, 100% {
    opacity: 0.26;
    transform: translate3d(0, 0, 0) scale(0.82);
  }
  45% {
    opacity: 1;
    transform: translate3d(calc(var(--dot-x, 22px) * 0.72), calc(var(--dot-y, -28px) * 0.72), 0) scale(1.22);
  }
  72% {
    opacity: 0.72;
    transform: translate3d(var(--dot-x, 22px), var(--dot-y, -28px), 0) scale(0.96);
  }
}

@keyframes coming-pulse {
  0%, 100% {
    opacity: 0.30;
    transform: scale(0.86);
  }
  45% {
    opacity: 1;
    transform: scale(1.18);
  }
}

@media (max-width: 980px) {
  .coming-frame {
    width: calc(100% - 32px);
    min-height: calc(100dvh - 32px);
    margin: 16px;
    padding: 34px 30px 30px;
    gap: 28px;
  }

  .coming-status {
    display: none;
  }

  .coming-main {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .coming-copy {
    max-width: 620px;
    padding-top: 22px;
  }

  .coming-title {
    font-size: 82px;
  }

  .coming-lede {
    font-size: 19px;
  }

  .coming-visual {
    min-height: 330px;
    margin-top: -10px;
  }
}

@media (min-width: 981px) and (max-height: 920px) {
  .coming-frame {
    padding: 34px 56px 30px;
    gap: 24px;
  }

  .coming-brand-line {
    height: 48px;
  }

  .coming-logo {
    font-size: 42px;
  }

  .coming-name {
    font-size: 27px;
  }

  .coming-copy {
    padding-top: 16px;
  }

  .coming-title {
    font-size: 94px;
  }

  .coming-lede {
    margin: 24px 0 28px;
    font-size: 20px;
  }

  .coming-mail {
    min-height: 64px;
    font-size: 20px;
  }

  .coming-visual {
    min-height: 500px;
  }

  .coming-footer {
    font-size: 14px;
  }
}

@media (max-width: 620px) {
  .coming-frame {
    width: calc(100% - 20px);
    min-height: calc(100dvh - 20px);
    margin: 10px;
    padding: 24px 18px 22px;
  }

  .coming-brand {
    gap: 16px;
  }

  .coming-logo {
    font-size: 38px;
  }

  .coming-brand-line {
    height: 42px;
  }

  .coming-name {
    font-size: 22px;
  }

  .coming-title {
    font-size: 56px;
  }

  .coming-lede {
    margin: 24px 0;
    font-size: 17px;
  }

  .coming-mail {
    width: 100%;
    min-height: 64px;
    justify-content: center;
    padding: 0 18px;
    gap: 14px;
    font-size: 17px;
  }

  .coming-mail svg {
    width: 24px;
    height: 24px;
  }

  .coming-visual {
    min-height: 260px;
  }

  .coming-footer {
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .coming-soon *,
  .coming-soon::before,
  .coming-soon::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  .coming-mail:hover,
  .coming-mail:focus-visible {
    transform: none;
  }
}