:root {
    color-scheme: light;

    --navy: #071d48;
    --navy-light: #173978;

    --gold: #ca9634;
    --gold-light: #e1b65d;

    --text: #14213d;
    --muted: #5d687d;

    --panel-background: rgba(255, 255, 255, 0.84);
}


* {
    box-sizing: border-box;
}


html,
body {
    width: 100%;
    min-height: 100%;
}


body {
    min-height: 100vh;
    margin: 0;

    color: var(--text);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background-color: #d8d8d8;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.02),
            rgba(255, 255, 255, 0.02)
        ),
        url("/static/images/eski_foto.jpg");

    /*
    Fotoğraf ekranı tamamen kaplar.
    Kişi ve uçak ortada kalır.
    */
    background-size: cover;
    background-position: center 47%;
    background-repeat: no-repeat;
    background-attachment: fixed;
}


button,
input {
    font: inherit;
}


/*
Sayfa üç satır gibi çalışır:

1. Başlık
2. Ortadaki boş alan — kişinin yüzü burada görünür
3. Form
*/
.page {
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;

    display: grid;

    grid-template-rows:
        auto
        minmax(260px, 1fr)
        auto;

    justify-items: center;

    padding:
        clamp(26px, 4vh, 55px)
        16px
        clamp(22px, 3vh, 38px);
}


/* ==================================================
   ÜST BAŞLIK
================================================== */

.title-panel {
    width: min(88vw, 620px);

    padding:
        16px
        24px
        15px;

    text-align: center;

    background: rgba(255, 255, 255, 0.86);

    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.08);

    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}


.title-panel h1 {
    margin: 0;

    color: var(--navy);

    font-size: clamp(
        26px,
        3.3vw,
        42px
    );

    font-weight: 900;
    line-height: 1.04;
    letter-spacing: -0.7px;
}


.title-panel h1 span {
    display: block;
}


.title-subtitle {
    margin:
        13px
        0
        0;

    color: #202020;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(
        16px,
        1.6vw,
        21px
    );

    font-style: italic;
    font-weight: 500;
    line-height: 1.2;
}


/* ==================================================
   ALT FORM
================================================== */

.form-panel {
    width: min(88vw, 620px);

    align-self: end;

    padding:
        16px
        26px
        17px;

    background: var(--panel-background);

    box-shadow:
        0 10px 32px rgba(0, 0, 0, 0.12);

    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}


.description {
    max-width: 500px;

    margin:
        0
        auto
        9px;

    color: var(--muted);

    text-align: center;

    font-size: 14px;
    line-height: 1.45;
}


form {
    display: grid;
    gap: 9px;
}


label {
    color: var(--navy);

    font-size: 16px;
    font-weight: 800;
}


input {
    width: 100%;
    min-height: 52px;

    padding:
        11px
        16px;

    color: var(--text);

    background: rgba(255, 255, 255, 0.97);

    border: 2px solid var(--gold);
    border-radius: 15px;

    font-size: 17px;

    outline: none;

    box-shadow:
        0 0 0 4px rgba(202, 150, 52, 0.15);

    transition:
        border-color 150ms ease,
        box-shadow 150ms ease;
}


input:focus {
    border-color: #9e6e12;

    box-shadow:
        0 0 0 5px rgba(202, 150, 52, 0.22);
}


input:disabled {
    opacity: 0.72;
}


button {
    min-height: 53px;

    margin-top: 3px;
    padding:
        12px
        18px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--navy),
            var(--navy-light)
        );

    border: none;
    border-radius: 12px;

    box-shadow:
        0 9px 24px rgba(7, 29, 72, 0.28);

    font-size: 17px;
    font-weight: 900;

    cursor: pointer;

    transition:
        transform 150ms ease,
        box-shadow 150ms ease,
        opacity 150ms ease;
}


button:hover:not(:disabled) {
    transform: translateY(-2px);

    box-shadow:
        0 13px 29px rgba(7, 29, 72, 0.34);
}


button:active:not(:disabled) {
    transform: translateY(0);
}


button:disabled {
    cursor: wait;
    opacity: 0.72;
}


/* ==================================================
   İLERLEME ALANI
================================================== */

.status-panel {
    margin-top: 14px;
    padding: 14px;

    background: rgba(245, 247, 251, 0.97);

    border: 1px solid #d8dfeb;
    border-radius: 12px;
}


.status-panel p {
    margin: 0;
}


#status-message {
    margin-bottom: 11px;

    color: var(--navy);

    font-size: 15px;
    font-weight: 800;
}


.progress-track {
    width: 100%;
    height: 14px;

    overflow: hidden;

    background: #dce3ee;

    border-radius: 999px;
}


.progress-bar {
    width: 0;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            var(--gold),
            var(--gold-light)
        );

    border-radius: inherit;

    transition: width 350ms ease;
}


.progress-text {
    margin-top: 7px !important;

    color: var(--muted);

    text-align: right;

    font-size: 13px;
    font-weight: 800;
}


/* ==================================================
   HATA ALANI
================================================== */

.error-panel {
    margin-top: 13px;
    padding: 13px;

    color: #991d1d;

    background: rgba(255, 240, 240, 0.97);

    border: 1px solid #efbcbc;
    border-radius: 11px;

    font-size: 15px;
    line-height: 1.45;
}


.notice {
    margin:
        14px
        0
        0;

    color: var(--muted);

    text-align: center;

    font-size: 12px;
    line-height: 1.45;
}


[hidden] {
    display: none !important;
}


/* ==================================================
   DAR EKRAN / TELEFON
================================================== */

@media (max-width: 650px) {
    body {
        /*
        Telefonda fotoğraf daha fazla kırpılır.
        Bu değer kişinin yüzünü ortada tutar.
        */
        background-position: center 44%;
    }

    .page {
        grid-template-rows:
            auto
            minmax(220px, 1fr)
            auto;

        padding:
            20px
            10px
            16px;
    }

    .title-panel {
        width: 92%;

        padding:
            13px
            13px
            12px;
    }

    .title-panel h1 {
        font-size: clamp(
            22px,
            6.8vw,
            31px
        );

        letter-spacing: -0.4px;
    }

    .title-subtitle {
        margin-top: 9px;
        font-size: 15px;
    }

    .form-panel {
        width: 92%;

        padding:
            13px
            16px
            14px;
    }

    .description {
        margin-bottom: 7px;
        font-size: 13px;
    }

    label {
        font-size: 15px;
    }

    input {
        min-height: 49px;

        padding:
            10px
            14px;

        font-size: 16px;
    }

    button {
        min-height: 50px;
        font-size: 16px;
    }

    .notice {
        margin-top: 11px;
        font-size: 11px;
    }
}


/* ==================================================
   KISA YÜKSEKLİKLİ BİLGİSAYAR EKRANI
================================================== */

@media (min-width: 651px) and (max-height: 850px) {
    .page {
        grid-template-rows:
            auto
            minmax(190px, 1fr)
            auto;

        padding:
            22px
            14px
            18px;
    }

    .title-panel {
        padding:
            12px
            20px
            11px;
    }

    .title-panel h1 {
        font-size: clamp(
            25px,
            3vw,
            35px
        );
    }

    .title-subtitle {
        margin-top: 8px;
        font-size: 16px;
    }

    .form-panel {
        padding:
            12px
            22px
            13px;
    }

    .description {
        font-size: 13px;
    }

    input {
        min-height: 48px;
    }

    button {
        min-height: 49px;
    }
}
/* ==================================================
   ERİŞİM KODU EKRANI
================================================== */

.login-page {
    grid-template-rows:
        auto
        minmax(260px, 1fr)
        auto;
}


.login-panel {
    grid-row: 3;

    width: min(88vw, 520px);

    padding:
        22px
        28px
        20px;

    background: rgba(255, 255, 255, 0.86);

    box-shadow:
        0 10px 32px rgba(0, 0, 0, 0.12);

    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}


.login-description {
    margin:
        0
        auto
        16px;

    color: var(--muted);

    text-align: center;

    font-size: 15px;
    line-height: 1.5;
}


@media (max-width: 650px) {
    .login-page {
        grid-template-rows:
            auto
            minmax(220px, 1fr)
            auto;
    }

    .login-panel {
        width: 92%;

        padding:
            18px
            18px
            17px;
    }

    .login-description {
        margin-bottom: 13px;
        font-size: 14px;
    }
}

/* Ana beyaz paneli daha seffaf yap */
.form-panel {
    background: rgba(255, 255, 255, 0.68) !important;
    backdrop-filter: blur(1px) !important;
    -webkit-backdrop-filter: blur(1px) !important;
}
/* Yuzun daha belirgin gorunmesi icin panel seffafligi */
.form-panel {
    background: rgba(255, 255, 255, 0.58) !important;
    background-color: rgba(255, 255, 255, 0.58) !important;
    background-image: none !important;
    backdrop-filter: blur(0.5px) !important;
    -webkit-backdrop-filter: blur(0.5px) !important;
}

.status-panel {
    background-color: rgba(255, 255, 255, 0.68) !important;
}

/* MOBIL: Yuzu gostermek icin formu asagi indir */
@media (max-width: 700px) {

    /* Ust baslik kutusu */
    .title-panel {
        background: rgba(255, 255, 255, 0.50) !important;
        background-color: rgba(255, 255, 255, 0.50) !important;
        background-image: none !important;
        backdrop-filter: blur(0.5px) !important;
        -webkit-backdrop-filter: blur(0.5px) !important;
    }

    /* Alt ana form kutusu */
    .form-panel {
        margin-top: 115px !important;
        background: rgba(255, 255, 255, 0.50) !important;
        background-color: rgba(255, 255, 255, 0.50) !important;
        background-image: none !important;
        backdrop-filter: blur(0.5px) !important;
        -webkit-backdrop-filter: blur(0.5px) !important;
    }
}

/* SEAMLESS PANEL DUZELTMESI */
@media (max-width: 700px) {

    /* Ust ve alt ana beyaz paneller ayni opasitede */
    .title-panel {
        background: rgba(255, 255, 255, 0.50) !important;
        background-color: rgba(255, 255, 255, 0.50) !important;
        background-image: none !important;
        backdrop-filter: blur(0.5px) !important;
        -webkit-backdrop-filter: blur(0.5px) !important;
    }

    .form-panel {
        margin-top: 115px !important;
        background: rgba(255, 255, 255, 0.50) !important;
        background-color: rgba(255, 255, 255, 0.50) !important;
        background-image: none !important;
        backdrop-filter: blur(0.5px) !important;
        -webkit-backdrop-filter: blur(0.5px) !important;
    }

    /* Ic kutu artik ayri beyaz gorunmesin */
    .status-panel {
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* STATUS KARTINI INPUT VE BUTONLA AYNI HIZAYA CEK */
@media (max-width: 700px) {

    .status-panel {
        width: 100% !important;
        max-width: none !important;
        margin: 14px 0 0 0 !important;
        padding: 14px 10px 12px 10px !important;
        box-sizing: border-box !important;
        border-radius: 14px !important;
    }

    .status-panel .progress-wrap,
    .status-panel .download-btn,
    .status-panel .status-title,
    .status-panel .status-text,
    .status-panel p {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }
}