:root {
    --bg: rgb(22, 22, 22);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--bg);
}

body {
    display: grid;
    place-items: center;
    font-family: Arial, Helvetica, sans-serif;
    color: #fff;
}

.stage {
    position: relative;
    width: min(100vw, calc(100vh * 1.777777778));
    height: min(100vh, calc(100vw / 1.777777778));
    aspect-ratio: 2560 / 1440;
    background: var(--bg);
    overflow: hidden;
    isolation: isolate;
}

.bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--bg);
}

.content-layer,
.sketch-layer {
    position: absolute;
    display: block;
    object-fit: fill;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    opacity: 0;
}

.sketch-layer {
    z-index: 2;
    animation:
        sketchAppear 2.8s ease forwards,
        sketchFloat 16s ease-in-out infinite;
}

.sketch-tower {
    animation-delay: .35s, 3.2s;
}

.sketch-big_a {
    animation-delay: .55s, 3.4s;
}

.sketch-tree {
    animation-delay: .75s, 3.6s;
}

.sketch-house {
    animation-delay: .95s, 3.8s;
}

.sketch-right_plan {
    animation-delay: 1.15s, 4.0s;
}

@keyframes sketchAppear {
    from {
        opacity: 0;
    }

    to {
        opacity: .72;
    }
}

@keyframes sketchFloat {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
        opacity: .69;
    }

    25% {
        transform: translate3d(2.8px, -1.8px, 0);
        opacity: .76;
    }

    50% {
        transform: translate3d(-2.4px, 1.9px, 0);
        opacity: .72;
    }

    75% {
        transform: translate3d(1.8px, 1.2px, 0);
        opacity: .75;
    }
}

.content-layer {
    z-index: 5;
    animation: contentAppear 2.2s ease forwards;
}

.content-logo {
    animation-delay: 1.05s;
}

.content-slogan {
    animation-delay: 1.55s;
}

.content-title {
    animation-delay: 1.90s;
}

.content-contact {
    animation-delay: 2.50s;
}

.content-footer {
    animation-delay: 3.10s;
}

@keyframes contentAppear {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.ambient {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    opacity: 0;
    background: rgba(255, 255, 255, .018);
    animation: ambientIn 2.2s 3.8s ease forwards;
}

@keyframes ambientIn {
    to {
        opacity: 1;
    }
}

.hotspot {
    position: absolute;
    z-index: 12;
    display: block;
    cursor: pointer;
    text-decoration: none;
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none;
    user-select: none;
    touch-action: manipulation;
}

.hotspot:focus,
.hotspot:focus-visible,
.hotspot:active,
.hotspot:visited {
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.yellow-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
}

.hotspot:hover .yellow-overlay,
.hotspot:active .yellow-overlay,
.hotspot.touch-active .yellow-overlay {
    opacity: 1;
}

.hs-linkedin {
    left: 52.5%;
    top: 7.2%;
    width: 38.0%;
    height: 12.2%;
}

.hs-phone {
    left: 58.65%;
    top: 45.35%;
    width: 14.30%;
    height: 4.80%;
}

.hs-email {
    left: 58.65%;
    top: 51.85%;
    width: 20.80%;
    height: 4.80%;
}

.hs-website {
    left: 58.65%;
    top: 58.25%;
    width: 14.60%;
    height: 4.80%;
}

.hs-instagram {
    left: 58.65%;
    top: 64.62%;
    width: 13.60%;
    height: 4.80%;
}

.hs-maps {
    left: 58.65%;
    top: 71.00%;
    width: 21.40%;
    height: 11.70%;
}

.hs-mimari-proje {
    left: 8.8%;
    top: 84.1%;
    width: 16.5%;
    height: 9.0%;
}

.hs-ic-mimari {
    left: 31.0%;
    top: 84.1%;
    width: 18.0%;
    height: 9.0%;
}

.hs-uygulama {
    left: 60.0%;
    top: 84.1%;
    width: 16.0%;
    height: 9.0%;
}

.hs-danismanlik {
    left: 81.2%;
    top: 84.1%;
    width: 16.0%;
    height: 9.0%;
}

.placeholder {
    position: fixed;
    inset: 0;
    display: none;
    place-items: center;
    background: var(--bg);
    color: #fff;
    z-index: 50;
    text-decoration: none;
}

.placeholder.visible {
    display: grid;
}

.placeholder-inner {
    text-align: center;
    opacity: 0;
    animation: prepAppear 2.6s ease forwards;
}

.placeholder-title {
    font-size: clamp(28px, 3.4vw, 56px);
    letter-spacing: .08em;
    font-weight: 300;
    color: #ffffff;
}

.placeholder-sub {
    margin-top: 18px;
    font-size: clamp(12px, 1.1vw, 16px);
    letter-spacing: .14em;
    color: rgba(255, 255, 255, .42);
}

@keyframes prepAppear {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

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

@supports (height: 100dvh) {
    .stage {
        width: min(100vw, calc(100dvh * 1.777777778));
        height: min(100dvh, calc(100vw / 1.777777778));
    }

    .placeholder {
        min-height: 100dvh;
    }
}

@media (pointer: coarse) {
    .service-link::before {
        content: "";
        position: absolute;
        left: -2%;
        right: -2%;
        top: -34%;
        bottom: -34%;
        background: transparent;
        pointer-events: auto;
    }

    .hotspot {
        -webkit-tap-highlight-color: transparent !important;
    }

    .placeholder-title {
        font-size: clamp(27px, 8vw, 48px);
    }

    .placeholder-sub {
        font-size: clamp(12px, 3.6vw, 16px);
    }
}

@media (max-width: 767px) and (orientation: portrait) {
    body {
        min-height: 100dvh;
    }

    .stage {
        width: 100vw;
        height: 56.25vw;
        max-height: 100dvh;
    }
}

@media (prefers-reduced-motion: reduce) {
    .content-layer,
    .sketch-layer {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .ambient {
        animation: none;
        opacity: 1;
    }

    .placeholder-inner {
        animation: none;
        opacity: 1;
        transform: none;
    }
}