/* Loader Overlay Container */
#page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #050505;
    backdrop-filter: blur(10px);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

#page-loader.hidden {
    opacity: 0;
    visibility: hidden;
}

/* 3D "Kutular Toplaniyor" Loader - altin sarisi / siyah */
.loader {
    --duration: 3000ms;
    --size: 32px;
    --gap: 6px;
    width: calc(var(--size) * 3 + var(--gap) * 2);
    height: calc(var(--size) * 3 + var(--gap) * 2);
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(60deg) rotateZ(45deg);
}

.loader .box {
    width: var(--size);
    height: var(--size);
    position: absolute;
    transform-style: preserve-3d;
}

/* Kutu konumlari: 3x3 izgara, ortasi bos (8 kutu). --x/--y her kutunun
   "ucup gelecegi" baslangic yonu/uzakligidir. */
.loader .box0 { top: 0; left: 0; --x: -70px; --y: -70px; animation: box-move0 var(--duration) infinite; }
.loader .box1 { top: 0; left: calc(var(--size) + var(--gap)); --x: 0px; --y: -90px; animation: box-move1 var(--duration) infinite; }
.loader .box2 { top: 0; left: calc((var(--size) + var(--gap)) * 2); --x: 70px; --y: -70px; animation: box-move2 var(--duration) infinite; }
.loader .box3 { top: calc(var(--size) + var(--gap)); left: 0; --x: -90px; --y: 0px; animation: box-move3 var(--duration) infinite; }
.loader .box4 { top: calc(var(--size) + var(--gap)); left: calc((var(--size) + var(--gap)) * 2); --x: 90px; --y: 0px; animation: box-move4 var(--duration) infinite; }
.loader .box5 { top: calc((var(--size) + var(--gap)) * 2); left: 0; --x: -70px; --y: 70px; animation: box-move5 var(--duration) infinite; }
.loader .box6 { top: calc((var(--size) + var(--gap)) * 2); left: calc(var(--size) + var(--gap)); --x: 0px; --y: 90px; animation: box-move6 var(--duration) infinite; }
.loader .box7 { top: calc((var(--size) + var(--gap)) * 2); left: calc((var(--size) + var(--gap)) * 2); --x: 70px; --y: 70px; animation: box-move7 var(--duration) infinite; }

/* Kup yuzleri (altin sarisi + iki ton koyu altin, 3D efekt icin) */
.loader .box > div {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #EAB308; /* Altin sarisi */
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.25);
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
    transform-style: preserve-3d;
}
.loader .box0 > div { animation: box-scale0 var(--duration) infinite; }
.loader .box1 > div { animation: box-scale1 var(--duration) infinite; }
.loader .box2 > div { animation: box-scale2 var(--duration) infinite; }
.loader .box3 > div { animation: box-scale3 var(--duration) infinite; }
.loader .box4 > div { animation: box-scale4 var(--duration) infinite; }
.loader .box5 > div { animation: box-scale5 var(--duration) infinite; }
.loader .box6 > div { animation: box-scale6 var(--duration) infinite; }
.loader .box7 > div { animation: box-scale7 var(--duration) infinite; }

.loader .box > div::before,
.loader .box > div::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
}

.loader .box > div::before {
    background: #CA8A04; /* Koyu altin - ust yuz */
    transform-origin: top;
    transform: rotateX(-90deg);
    top: 0; left: 0;
}

.loader .box > div::after {
    background: #A16207; /* En koyu altin - yan yuz */
    transform-origin: left;
    transform: rotateY(-90deg);
    top: 0; left: 0;
}

/* Yerdeki zemin/yansima */
.loader .ground {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.4;
    transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
    animation: ground var(--duration) infinite;
}

.loader .ground::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(234, 179, 8, 0.6) 0%, transparent 70%);
    opacity: 0;
    animation: ground-shine var(--duration) infinite;
}

/* Kutular sirayla rastgele yonlerden gelip 3x3 izgaraya yerlesir, hafifce
   ziplar, sonra hep birlikte asagi dusup donguyu basa sarar. */
@keyframes box-move0 {
    12% { transform: translate(var(--x), var(--y)); }
    25%, 52% { transform: translate(0, 0); }
    80% { transform: translate(0, -32px); }
    90%, 100% { transform: translate(0, 188px); }
}
@keyframes box-scale0 {
    6% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0); }
    14%, 100% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1); }
}

@keyframes box-move1 {
    16% { transform: translate(var(--x), var(--y)); }
    29%, 52% { transform: translate(0, 0); }
    80% { transform: translate(0, -32px); }
    90%, 100% { transform: translate(0, 188px); }
}
@keyframes box-scale1 {
    10% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0); }
    18%, 100% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1); }
}

@keyframes box-move2 {
    20% { transform: translate(var(--x), var(--y)); }
    33%, 52% { transform: translate(0, 0); }
    80% { transform: translate(0, -32px); }
    90%, 100% { transform: translate(0, 188px); }
}
@keyframes box-scale2 {
    14% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0); }
    22%, 100% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1); }
}

@keyframes box-move3 {
    24% { transform: translate(var(--x), var(--y)); }
    37%, 52% { transform: translate(0, 0); }
    80% { transform: translate(0, -32px); }
    90%, 100% { transform: translate(0, 188px); }
}
@keyframes box-scale3 {
    18% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0); }
    26%, 100% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1); }
}

@keyframes box-move4 {
    28% { transform: translate(var(--x), var(--y)); }
    41%, 52% { transform: translate(0, 0); }
    80% { transform: translate(0, -32px); }
    90%, 100% { transform: translate(0, 188px); }
}
@keyframes box-scale4 {
    22% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0); }
    30%, 100% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1); }
}

@keyframes box-move5 {
    32% { transform: translate(var(--x), var(--y)); }
    45%, 52% { transform: translate(0, 0); }
    80% { transform: translate(0, -32px); }
    90%, 100% { transform: translate(0, 188px); }
}
@keyframes box-scale5 {
    26% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0); }
    34%, 100% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1); }
}

@keyframes box-move6 {
    36% { transform: translate(var(--x), var(--y)); }
    49%, 52% { transform: translate(0, 0); }
    80% { transform: translate(0, -32px); }
    90%, 100% { transform: translate(0, 188px); }
}
@keyframes box-scale6 {
    30% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0); }
    38%, 100% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1); }
}

@keyframes box-move7 {
    40% { transform: translate(var(--x), var(--y)); }
    53%, 52% { transform: translate(0, 0); }
    80% { transform: translate(0, -32px); }
    90%, 100% { transform: translate(0, 188px); }
}
@keyframes box-scale7 {
    34% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0); }
    42%, 100% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1); }
}

@keyframes ground {
    0%, 65% { transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0); }
    75%, 90% { transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(1); }
    100% { transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0); }
}

@keyframes ground-shine {
    0%, 70% { opacity: 0; }
    75%, 87% { opacity: 0.5; }
    100% { opacity: 0; }
}