/* =========================================================
   ART ADR - Preloader
   Adalet terazisi salinir, dengeye oturur, logo belirir,
   perde iki yana acilir.
   ========================================================= */

.artadr-pre {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 50% 0%, #21538a 0%, rgba(33, 83, 138, 0) 58%),
        linear-gradient(160deg, #1e4a76 0%, #183d61 45%, #0f2840 100%);
    background-size: 100% 100%, 200% 200%;
    animation: artadrPreFlow 14s ease-in-out infinite;
}

@keyframes artadrPreFlow {
    0%, 100% { background-position: 50% 0%, 0% 50%; }
    50%      { background-position: 50% 0%, 100% 50%; }
}

/* ---- isik seritleri icin katman (nokta deseni yok) ---- */
.artadr-pre__grid {
    position: absolute;
    inset: -25%;
    pointer-events: none;
}

/* ---- capraz gecen isik seritleri ---- */
.artadr-pre__grid::before,
.artadr-pre__grid::after {
    content: "";
    position: absolute;
    top: -30%;
    bottom: -30%;
    width: 160px;
    transform: rotate(18deg);
    filter: blur(26px);
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(193, 193, 193, .18) 45%,
            rgba(255, 255, 255, .24) 55%,
            rgba(255, 255, 255, 0) 100%);
    animation: artadrStreak 11s ease-in-out infinite;
}

.artadr-pre__grid::after {
    width: 90px;
    animation-duration: 15s;
    animation-delay: -5s;
    opacity: .7;
}

@keyframes artadrStreak {
    0% {
        left: -20%;
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        left: 115%;
        opacity: 0;
    }
}

/* ---- yumusak isik bulutu ---- */
.artadr-pre__aurora {
    position: absolute;
    width: 900px;
    height: 900px;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .35;
    background:
        radial-gradient(circle at 35% 40%, rgba(193, 193, 193, .50) 0%, rgba(193, 193, 193, 0) 62%),
        radial-gradient(circle at 65% 60%, rgba(30, 74, 118, .85) 0%, rgba(30, 74, 118, 0) 62%);
    animation: artadrAurora 12s ease-in-out infinite alternate;
}

@keyframes artadrAurora {
    0%   { transform: translate3d(-14%, -8%, 0) scale(1); }
    100% { transform: translate3d(12%, 10%, 0) scale(1.15); }
}

/* ---- terazinin arkasinda donen hale (lacivert + gri) ---- */
.artadr-pre__halo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 620px;
    height: 620px;
    margin: -340px 0 0 -310px;
    border-radius: 50%;
    filter: blur(2px);
    opacity: .5;
    background: conic-gradient(from 0deg,
            rgba(193, 193, 193, 0) 0deg,
            rgba(193, 193, 193, .34) 55deg,
            rgba(255, 255, 255, .16) 95deg,
            rgba(193, 193, 193, 0) 165deg,
            rgba(30, 74, 118, .55) 240deg,
            rgba(193, 193, 193, .22) 310deg,
            rgba(193, 193, 193, 0) 360deg);
    -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 0) 34%, #000 46%, #000 62%, rgba(0, 0, 0, 0) 74%);
    mask-image: radial-gradient(circle, rgba(0, 0, 0, 0) 34%, #000 46%, #000 62%, rgba(0, 0, 0, 0) 74%);
    animation: artadrHalo 16s linear infinite;
}

@keyframes artadrHalo {
    to { transform: rotate(360deg); }
}

/* ---- kenarlarda koyu vinyet ---- */
.artadr-pre__vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(120% 90% at 50% 45%,
            rgba(15, 40, 64, 0) 40%,
            rgba(15, 40, 64, .55) 100%);
}

/* ---- genisleyen halkalar ---- */
.artadr-pre__rings {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
}

.artadr-pre__rings span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 190px;
    height: 190px;
    margin: -95px 0 0 -95px;
    border: 1px solid rgba(193, 193, 193, .45);
    border-radius: 50%;
    opacity: 0;
    animation: artadrRing 3.6s cubic-bezier(.2, .7, .3, 1) infinite;
}

.artadr-pre__rings span:nth-child(2) { animation-delay: 1.2s; }
.artadr-pre__rings span:nth-child(3) { animation-delay: 2.4s; }

@keyframes artadrRing {
    0%   { transform: scale(.5); opacity: 0; }
    15%  { opacity: .7; }
    100% { transform: scale(3.6); opacity: 0; }
}

/* ---- sahne ---- */
.artadr-pre__stage {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 24px;
}

/* ---- terazi ---- */
.artadr-pre__scale {
    width: 210px;
    height: auto;
    color: #ffffff;
    filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .35));
    opacity: 0;
    animation: artadrScaleIn .9s cubic-bezier(.2, .8, .2, 1) .1s forwards;
}

@keyframes artadrScaleIn {
    from { opacity: 0; transform: translateY(18px) scale(.94); }
    to   { opacity: 1; transform: none; }
}

/* cizgiler cizilerek belirir */
.artadr-pre__scale .ln {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    animation: artadrDraw 1.4s ease .15s forwards;
}

@keyframes artadrDraw {
    to { stroke-dashoffset: 0; }
}

.artadr-pre__scale .dot {
    opacity: 0;
    animation: artadrDot .6s ease .7s forwards;
}

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

/* kiris salinir, kefeler dik kalir */
.artadr-pre__beam {
    transform-origin: 130px 52px;
    animation: artadrSwing 2.8s ease-in-out .6s infinite;
}

.artadr-pre__pan {
    transform-origin: 40px 52px;
    animation: artadrSwingRev 2.8s ease-in-out .6s infinite;
}

.artadr-pre__pan--r {
    transform-origin: 220px 52px;
}

@keyframes artadrSwing {
    0%, 100% { transform: rotate(-11deg); }
    50%      { transform: rotate(11deg); }
}

@keyframes artadrSwingRev {
    0%, 100% { transform: rotate(11deg); }
    50%      { transform: rotate(-11deg); }
}

/* ---- logo ---- */
.artadr-pre__brand {
    position: relative;
    margin-top: 26px;
    overflow: hidden;
    opacity: 0;
    animation: artadrRise .9s cubic-bezier(.2, .8, .2, 1) .55s forwards;
}

.artadr-pre__brand img {
    display: block;
    height: 74px;
    width: auto;
    filter: brightness(0) invert(1);
}

/* logonun uzerinden gecen isik */
.artadr-pre__sheen {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -30%;
    width: 70px;
    transform: skewX(-22deg);
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, .55) 50%,
            rgba(255, 255, 255, 0) 100%);
    animation: artadrSheen 2.8s ease-in-out 1.3s infinite;
}

@keyframes artadrSheen {
    0%   { left: -30%; opacity: 0; }
    12%  { opacity: 1; }
    55%  { left: 110%; opacity: 0; }
    100% { left: 110%; opacity: 0; }
}

/* ---- alt yazi ---- */
.artadr-pre__words {
    margin: 16px 0 0;
    font-family: "Inter Tight", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .34em;
    color: rgba(193, 193, 193, .95);
    opacity: 0;
    animation: artadrRise .9s cubic-bezier(.2, .8, .2, 1) .8s forwards;
}

/* ---- ilerleme cubugu ---- */
.artadr-pre__meter {
    position: relative;
    width: 240px;
    height: 3px;
    margin-top: 26px;
    border-radius: 3px;
    background: rgba(193, 193, 193, .25);
    overflow: hidden;
    opacity: 0;
    animation: artadrRise .9s cubic-bezier(.2, .8, .2, 1) .95s forwards;
}

.artadr-pre__fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0%;
    border-radius: 3px;
    background: linear-gradient(90deg, rgba(193, 193, 193, .6) 0%, #c1c1c1 45%, #ffffff 100%);
    box-shadow: 0 0 14px rgba(193, 193, 193, .85);
    transition: width .25s ease-out;
}

.artadr-pre__pct {
    display: flex;
    align-items: baseline;
    gap: 2px;
    margin-top: 12px;
    font-family: "Inter Tight", sans-serif;
    color: #fff;
    opacity: 0;
    animation: artadrRise .9s cubic-bezier(.2, .8, .2, 1) 1.05s forwards;
}

.artadr-pre__pct b {
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.artadr-pre__pct i {
    font-size: 13px;
    font-style: normal;
    color: rgba(193, 193, 193, .9);
}

@keyframes artadrRise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

/* ---- perde ---- */
.artadr-pre__curtain {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50.5%;
    background: linear-gradient(160deg, #1e4a76 0%, #183d61 45%, #0f2840 100%);
    z-index: 4;
    transform: translateX(0);
    transition: transform 1s cubic-bezier(.76, 0, .24, 1);
    opacity: 0;
    pointer-events: none;
}

.artadr-pre__curtain--l { left: 0; }
.artadr-pre__curtain--r { right: 0; }

/* ---- kapanis ---- */
.artadr-pre.is-done .artadr-pre__beam,
.artadr-pre.is-done .artadr-pre__pan {
    animation: artadrSettle .8s cubic-bezier(.2, .9, .2, 1) forwards;
}

@keyframes artadrSettle {
    to { transform: rotate(0deg); }
}

.artadr-pre.is-done .artadr-pre__stage {
    animation: artadrFlash .85s ease .35s forwards;
}

@keyframes artadrFlash {
    0%   { transform: scale(1); opacity: 1; filter: brightness(1); }
    35%  { filter: brightness(1.7); }
    100% { transform: scale(1.09); opacity: 0; filter: brightness(1); }
}

.artadr-pre.is-done .artadr-pre__grid,
.artadr-pre.is-done .artadr-pre__aurora,
.artadr-pre.is-done .artadr-pre__halo,
.artadr-pre.is-done .artadr-pre__vignette,
.artadr-pre.is-done .artadr-pre__rings {
    opacity: 0;
    transition: opacity .6s ease;
}

.artadr-pre.is-open .artadr-pre__curtain {
    opacity: 1;
}

.artadr-pre.is-open .artadr-pre__curtain--l { transform: translateX(-101%); }
.artadr-pre.is-open .artadr-pre__curtain--r { transform: translateX(101%); }

.artadr-pre.is-open {
    background: transparent;
    animation: none;
}

.artadr-pre.is-gone {
    display: none;
}

/* sayfa yuklenirken kaydirma kilitli */
body.artadr-pre-lock {
    overflow: hidden;
}

/* ---- kucuk ekran ---- */
@media (max-width: 575px) {
    .artadr-pre__scale { width: 160px; }
    .artadr-pre__brand img { height: 56px; }
    .artadr-pre__words { font-size: 10px; letter-spacing: .22em; }
    .artadr-pre__meter { width: 190px; }
}

/* ---- hareket azaltma ---- */
@media (prefers-reduced-motion: reduce) {
    .artadr-pre,
    .artadr-pre * {
        animation: none !important;
    }

    .artadr-pre__scale,
    .artadr-pre__brand,
    .artadr-pre__words,
    .artadr-pre__meter,
    .artadr-pre__pct {
        opacity: 1;
    }

    .artadr-pre__scale .ln {
        stroke-dashoffset: 0;
    }

    .artadr-pre__scale .dot {
        opacity: 1;
    }
}

/* =========================================================
   EK KATMANLAR
   ========================================================= */

/* ---- amblem: terazi + ilerleme halkasi ---- */
.artadr-pre {
    --p: 0;
    /* 0 -> 1 yukleme orani, JS yazar */
    --mx: 0;
    --my: 0;
}

.artadr-pre__emblem {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
    height: 300px;
    transform: translate3d(calc(var(--mx) * 14px), calc(var(--my) * 14px), 0);
    transition: transform .35s ease-out;
}

.artadr-pre__ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    pointer-events: none;
}

.artadr-pre__ring circle {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
}

.artadr-pre__ring .track {
    stroke: rgba(193, 193, 193, .22);
}

.artadr-pre__ring .bar {
    stroke: #c1c1c1;
    stroke-dasharray: 578;
    stroke-dashoffset: calc(578 - 578 * var(--p));
    transition: stroke-dashoffset .3s ease-out;
    filter: drop-shadow(0 0 6px rgba(193, 193, 193, .8));
}

/* terazi amblemin ortasinda kalsin */
.artadr-pre__scale {
    position: relative;
    z-index: 1;
    width: 190px;
}

/* Salinim genligi yukleme ilerledikce azalir:
   sure dolduginda terazi kendiliginden dengeye gelir. */
.artadr-pre__beam {
    --tilt: calc((1 - var(--p)) * 12deg);
    animation: artadrSwingDyn 2.8s ease-in-out .6s infinite;
}

.artadr-pre__pan {
    --tilt: calc((1 - var(--p)) * 12deg);
    animation: artadrSwingDynRev 2.8s ease-in-out .6s infinite;
}

@keyframes artadrSwingDyn {
    0%, 100% { transform: rotate(calc(var(--tilt) * -1)); }
    50%      { transform: rotate(var(--tilt)); }
}

@keyframes artadrSwingDynRev {
    0%, 100% { transform: rotate(var(--tilt)); }
    50%      { transform: rotate(calc(var(--tilt) * -1)); }
}

/* ---- tamamlaninca patlayan halka ---- */
.artadr-pre__burst {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    margin: -100px 0 0 -100px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .85);
    opacity: 0;
    pointer-events: none;
}

.artadr-pre.is-done .artadr-pre__burst {
    animation: artadrBurst .85s cubic-bezier(.2, .7, .3, 1) forwards;
}

@keyframes artadrBurst {
    0% {
        opacity: .95;
        transform: scale(.55);
        box-shadow: 0 0 0 0 rgba(193, 193, 193, .55);
    }

    100% {
        opacity: 0;
        transform: scale(2.6);
        box-shadow: 0 0 60px 20px rgba(193, 193, 193, 0);
    }
}

/* ---- donen kelimeler ---- */
.artadr-pre__words {
    position: relative;
    height: 20px;
    overflow: hidden;
}

.artadr-pre__words .w {
    position: absolute;
    left: 50%;
    top: 0;
    white-space: nowrap;
    transform: translate(-50%, 110%);
    opacity: 0;
    transition: transform .55s cubic-bezier(.2, .8, .2, 1), opacity .45s ease;
}

.artadr-pre__words .w.is-on {
    transform: translate(-50%, 0);
    opacity: 1;
}

.artadr-pre__words .w.is-out {
    transform: translate(-50%, -110%);
    opacity: 0;
}

/* ---- perde: capraz kesim ---- */
.artadr-pre__curtain {
    width: 60%;
    transform: skewX(-9deg) translateX(0);
}

.artadr-pre__curtain--l {
    left: -6%;
}

.artadr-pre__curtain--r {
    right: -6%;
}

.artadr-pre.is-open .artadr-pre__curtain--l {
    transform: skewX(-9deg) translateX(-108%);
}

.artadr-pre.is-open .artadr-pre__curtain--r {
    transform: skewX(-9deg) translateX(108%);
}

/* perdenin on kenarinda ince gri isik */
.artadr-pre__curtain--l::after,
.artadr-pre__curtain--r::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg,
            rgba(193, 193, 193, 0) 0%,
            rgba(193, 193, 193, .9) 50%,
            rgba(193, 193, 193, 0) 100%);
}

.artadr-pre__curtain--l::after { right: 0; }
.artadr-pre__curtain--r::after { left: 0; }

/* ---- fare parallaxi ---- */
.artadr-pre__aurora {
    transform: translate3d(calc(var(--mx) * -26px), calc(var(--my) * -20px), 0);
    transition: transform .5s ease-out;
}

.artadr-pre__brand,
.artadr-pre__words,
.artadr-pre__meter,
.artadr-pre__pct {
    will-change: transform;
}

@media (max-width: 575px) {
    .artadr-pre__emblem {
        width: 220px;
        height: 220px;
    }

    .artadr-pre__scale {
        width: 140px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .artadr-pre__emblem,
    .artadr-pre__aurora {
        transform: none;
    }

    .artadr-pre__burst {
        display: none;
    }
}

/* =========================================================
   Hizalama notu
   Terazi cizimi viewBox icinde y=29 ile y=198 arasinda duruyordu;
   210 birimlik kutuda bu, cizimi 6px asagida birakiyor ve halka ile
   ust uste gelmiyordu. viewBox yuksekligini 227'ye cikararak (ust ve
   alt bosluk esit: 29 birim) cizimi kendi kutusunda tam ortaladik.
   Boylece halka ve patlama icin kaydirma gerekmiyor.
   ========================================================= */
