/* =========================================================
   SETUP.TR AUTH PAGE
   ÇİZİM / SKETCH TEMA
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Michroma&display=swap");

:root {
    --paper: #f2f1ec;
    --paper-light: #faf9f5;
    --white: #ffffff;

    --ink: #111111;
    --ink-soft: #303030;
    --gray: #777777;
    --gray-light: #bcbcbc;

    --shadow: #d3d2cc;

    --radius: 22px;
    --transition: 0.25s ease;
}


/* =========================================================
   RESET
   ========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    min-height: 100vh;

    font-family:
        "Segoe UI",
        Tahoma,
        Geneva,
        Verdana,
        sans-serif;

    color: var(--ink);

    background-color: var(--paper);

    /*
        Defter kağıdı / grid görünümü
    */
    background-image:
        linear-gradient(
            rgba(0, 0, 0, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.035) 1px,
            transparent 1px
        );

    background-size: 24px 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 35px 20px;
}


/* =========================================================
   ANA ALAN
   ========================================================= */

.auth-main {
    /*
        P0-04 (Faz 5.3.2) — KONUMLANDIRMA BAĞLAMI.

        `.auth-message` MUTLAK konumludur (aşağıda açıklandığı gibi bu
        zorunludur). `auth.html` dışındaki auth sayfalarında mesaj,
        `.auth-card`ın KARDEŞİ olarak `.auth-main`in doğrudan çocuğudur.
        `.auth-main` konumlanmadan bu sayfalarda mesajın içinde bulunduğu
        konumlandırma bağlamı YOKTUR; tarayıcı ilk konumlanmış ata
        (`.auth-card`) ya da viewport'a göre çözdüğü için mesaj bir ekran
        aşağı düşüyordu.

        `position: relative` yerleşimi DEĞİŞTİRMEZ; yalnızca bu öğelerin
        konumlandırma bağlamını `.auth-main`e sabitler. `.modal-overlay`
        `position: fixed`, `.center-divider` ve `.panel-decoration` ise
        zaten konumlanmış kendi atalarına sahiptir — hiçbiri etkilenmez.

        `min-height: calc(100vh - 70px)`: bu 70px, `hesap-ayarlari.html`
        sayfasındaki ortak menü çubuğunun yüksekliği içindi.
        Bileşen (`components/nav-bar`) `.site-header` ile
        68px verir ve çubuk yapışkandır; bu pay kartın ortalanmasını
        bozmaz — başlık eskiden boş duran alana oturur.
    */
    position: relative;

    width: 100%;
    min-height: calc(100vh - 70px);

    display: flex;
    align-items: center;
    justify-content: center;
}


/* =========================================================
   ANA KART
   ========================================================= */

.auth-card {
    position: relative;

    width: min(1100px, 100%);

    display: grid;
    grid-template-columns: 1fr 1fr;

    background: var(--paper-light);

    border: 2px solid var(--ink);

    border-radius: var(--radius);

    box-shadow:
        9px 9px 0 var(--shadow);

    overflow: visible;

    /*
        Hafif el ile çizilmiş kağıt hissi
    */
    transform: rotate(-0.25deg);
}


/* Ek çizgi */
.auth-card::before {
    content: "";

    position: absolute;

    left: 10px;
    right: 12px;
    top: 8px;
    bottom: 10px;

    border: 1px solid rgba(0, 0, 0, 0.4);

    border-radius: 19px;

    pointer-events: none;
}


/* =========================================================
   PANELLER
   ========================================================= */

.auth-panel {
    position: relative;

    padding: 44px 55px 40px;

    min-height: 650px;
}


.login-panel {
    padding-right: 60px;
}


.register-panel {
    padding-left: 60px;
}


/* =========================================================
   BAŞLIKLAR
   ========================================================= */

.auth-title {
    font-family:
        "Segoe Print",
        "Comic Sans MS",
        cursive;

    font-size: clamp(2rem, 4vw, 3rem);

    font-weight: 500;

    line-height: 1;

    text-transform: none;

    margin-bottom: 17px;

    display: inline-block;

    transform: rotate(-1deg);
}


.register-panel .auth-title {
    transform: rotate(1deg);
}


/* Başlığın altındaki el çizimi */

.title-line {
    position: relative;

    width: 65%;

    height: 10px;

    margin-bottom: 42px;
}


.title-line::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    top: 3px;

    height: 2px;

    background: var(--ink);

    transform: rotate(-1deg);
}


.title-line::after {
    content: "";

    position: absolute;

    width: 10px;
    height: 10px;

    right: -5px;
    top: -1px;

    background: var(--ink);

    border-radius: 50%;
}


/* =========================================================
   ORTA AYIRICI
   ========================================================= */

.center-divider {
    position: absolute;

    top: 35px;
    bottom: 35px;

    left: 50%;

    width: 2px;

    transform:
        translateX(-50%)
        rotate(1deg);

    z-index: 5;
}


/* Ana dikey çizgi */

.center-divider::before {
    content: "";

    position: absolute;

    inset: 0;

    background: var(--ink);

    opacity: 0.85;
}


/* Karalama efekti */

.center-divider::after {
    content: "";

    position: absolute;

    left: -7px;
    top: 32%;

    width: 15px;
    height: 150px;

    border-left: 2px solid var(--ink);
    border-right: 2px solid var(--ink);

    border-radius: 50%;

    transform: rotate(-12deg);
}


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

.auth-form {
    width: 100%;
}


.form-group {
    margin-bottom: 26px;
}


.form-group label {
    display: block;

    margin-bottom: 8px;

    font-family:
        "Segoe Print",
        "Comic Sans MS",
        cursive;

    font-size: 0.95rem;

    color: var(--ink);

    transform: rotate(-0.5deg);
}


/* =========================================================
   INPUT
   ========================================================= */

.form-group input {
    display: block;

    width: 100%;

    height: 57px;

    padding: 0 17px;

    border: 2px solid var(--ink);

    border-radius: 5px;

    background: var(--white);

    color: var(--ink);

    font-family:
        "Segoe UI",
        Tahoma,
        sans-serif;

    font-size: 1rem;

    outline: none;

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        background var(--transition);

    /*
        Hafif yamukluk
    */
    transform: rotate(-0.4deg);

    box-shadow:
        4px 4px 0 rgba(0, 0, 0, 0.14);
}


.register-panel .form-group input {
    transform: rotate(0.4deg);
}


.form-group input::placeholder {
    color: #7f7f7f;

    font-family:
        "Segoe Print",
        "Comic Sans MS",
        cursive;
}


.form-group input:focus {
    background: #fff;

    border-color: var(--ink);

    transform:
        rotate(0deg)
        translateY(-2px);

    box-shadow:
        6px 6px 0 rgba(0, 0, 0, 0.18);
}


/* =========================================================
   ŞİFRE ALANI
   ========================================================= */

.password-container {
    position: relative;
}


.password-container input {
    padding-right: 85px;
}


.toggle-password {
    position: absolute;

    right: 12px;
    top: 50%;

    transform: translateY(-50%);

    border: 0;

    background: transparent;

    color: var(--ink);

    font-family:
        "Segoe Print",
        "Comic Sans MS",
        cursive;

    font-size: 0.78rem;

    cursor: pointer;

    padding: 5px;

    transition: var(--transition);
}


.toggle-password:hover {
    text-decoration: underline;

    transform:
        translateY(-50%)
        rotate(-3deg);
}


/* =========================================================
   SKETCH BUTON
   ========================================================= */

.sketch-button {
    position: relative;

    width: 100%;

    min-height: 55px;

    padding: 13px 20px;

    border: 2px solid var(--ink);

    background: var(--white);

    color: var(--ink);

    cursor: pointer;

    font-family:
        "Segoe Print",
        "Comic Sans MS",
        cursive;

    font-size: 1rem;

    font-weight: 600;

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        background var(--transition);

    clip-path: polygon(
        3% 5%,
        98% 0%,
        96% 90%,
        2% 96%
    );

    box-shadow:
        4px 4px 0 rgba(0, 0, 0, 0.20);
}


/* Ana login/register butonu */

.primary-button {
    background: var(--ink);

    color: var(--white);

    margin-top: 8px;

    transform: rotate(-0.7deg);
}


.register-panel .primary-button {
    transform: rotate(0.7deg);
}


/* Hover */

.sketch-button:hover {
    transform:
        translateY(-3px)
        rotate(-1deg);

    box-shadow:
        7px 7px 0 rgba(0, 0, 0, 0.22);
}


.register-panel .sketch-button:hover {
    transform:
        translateY(-3px)
        rotate(1deg);
}


/*
    Faz 5.3.2 — MEŞGUL / DEVRE DIŞI GÖRÜNÜMÜ.

    Sorun: `auth.js`, `hesap-ayarlari.js` ve `sifre-sifirla.js` istek
    sırasında düğmeye `loading` sınıfı ekliyor ve `disabled` yapıyordu,
    ancak depoda `.loading` için HİÇBİR CSS kuralı yoktu. Yani düğme
    yalnızca düzeltilemeyen bir `disabled` durumuna geçiyor, gönderim
    sürdüğü görünmüyordu.

    Not: düğmenin METNİ zaten JavaScript tarafından değiştiriliyor
    ("Gönderiliyor...", "Güncelleniyor..."); buradaki stiller o geri
    bildirimi görsel olarak destekler ve çift gönderimi göze çarpar.
*/
.sketch-button:disabled,
.sketch-button.loading {
    cursor: progress;

    opacity: 0.72;

    transform: none;

    box-shadow:
        2px 2px 0 rgba(0, 0, 0, 0.16);
}


/*
    Devre dışı düğme "kalkmasın": hover kuralı (0,2,0) bu kuralı
    (0,3,0) yenmeli, aksi halde imleç üzerine gelince düğme hareket
    ediyordu.
*/
.sketch-button:disabled:hover,
.sketch-button.loading:hover {
    transform: none;

    box-shadow:
        2px 2px 0 rgba(0, 0, 0, 0.16);
}


/* Tıklama */

.sketch-button:active {
    transform:
        translate(3px, 3px)
        rotate(0deg);

    box-shadow:
        2px 2px 0 rgba(0, 0, 0, 0.2);
}


/* Disabled */

.sketch-button:disabled {
    cursor: not-allowed;

    opacity: 0.55;

    transform: none;

    box-shadow: none;
}


/* =========================================================
   EK BUTONLAR
   ========================================================= */

.auth-extra {
    margin-top: 22px;

    display: flex;
    flex-direction: column;

    gap: 16px;
}


/*
    Faz 5.3.2 / P0-09 — `.google-button` kuralı KALDIRILDI.

    Depoda gerçek bir Google kimlik doğrulama arka ucu yok; düğme yalnızca
    işlevsiz bir eylem sunuyordu. `auth.html`den de kaldırıldı. Yerine sahte
    bir alternatif konmadık.
*/
.secondary-button {
    background: transparent;

    font-size: 0.88rem;

    transform: rotate(-0.5deg);
}


.secondary-button:hover {
    background: #eeeeeb;
}


/* =========================================================
   PANEL DEKORASYONLARI
   ========================================================= */

.panel-decoration {
    position: absolute;

    width: 65px;
    height: 35px;

    pointer-events: none;
}


.top-left {
    top: 18px;
    left: 20px;

    border-top: 3px solid var(--ink);
    border-left: 3px solid var(--ink);

    transform:
        rotate(12deg)
        skewX(-15deg);
}


.top-right {
    top: 18px;
    right: 20px;

    border-top: 3px solid var(--ink);
    border-right: 3px solid var(--ink);

    transform:
        rotate(-12deg)
        skewX(15deg);
}


/* =========================================================
   AUTH MESAJI
   ========================================================= */

/*
    P0-04 (Faz 5.3.2) — NEDEN MUTLAK KONUM?

    `.auth-main` bir FLEX kapsayıcıdır ve yönü satırdır. `hesap-ayarlari`
    sayfasında `.auth-mainin` üç çocuğu vardır (iki `.auth-card` + mesaj).
    Mesaj akışa girerse üçüncü bir flex öğesi olur ve kartların yanına
    sıkışır. Akış dışı kalmak zorunlu olduğu için `position: absolute`
    korunur.

    P0-04 — `bottom: -42px` -> `top: 100%` + `margin-top`.

    Sorun: negatif `bottom`, mesajın KENDİ yüksekliği kadar yukarı
    ölçülür. Konumlandırma bağlamı yanlış çözüldüğünde (`hesap-ayarlari`,
    `sifre-sifirla`, `e-posta-dogrula`) mesaj, `.auth-mainin` `min-height`
    değerinin sonuna yapışıp viewport'un ~1 ekran ALTINA düşüyordu; kart
    ile arasındaki boşluk büyüyor ve mesaj görünmüyordu.

    Çözüm: `top: 100%` + `margin-top` mesajı konumlandırma bağlamının DİP
    noktasına, yani ilgili kartın hemen altına yapıştırır. Kart yüksekliği
    ne olursa olsun sonuç değişmez; hesaplamak için JavaScript gerekmez.

    P0-05 (Faz 5.3.2) — GÖRÜNÜR KUTU.

    Auth sayfaları `style.css` YÜKLEMEZ; `style.css`teki
    `.auth-message.success/.error` kuralları bu sayfalarda hiç uygulanmaz.
    Dolayısıyla başarı ve hata metni neredeyse aynı görünürdü. Aşağıda hem
    kutu/hayalet çizgi (sketch) görünümü hem de `::before` ile metin ÖNEKI
    tanımlanır; ayrım yalnızca renge dayanmaz.
*/
.auth-message {
    position: absolute;

    left: 40px;
    right: 40px;

    top: 100%;

    margin-top: 18px;

    padding: 12px 18px;

    border: 2px solid var(--ink);

    border-radius: 10px;

    background: var(--white);

    box-shadow:
        4px 4px 0 var(--shadow);

    text-align: center;

    min-height: 24px;

    font-family:
        "Segoe Print",
        "Comic Sans MS",
        cursive;

    font-size: 0.9rem;

    line-height: 1.45;

    color: var(--ink);

    z-index: 10;
}


/*
    Boş mesaj kutusu görünmesin.

    `display: none` DEĞİL: `role="status"` olan bir canlı bölge
    `display:none` iken metin alırsa ekran okuyucular duyurmaz.
    Bunun yerine yalnızca KUTU ölçüleri sıfırlanır; öğe akışta ve
    duyurulabilir kalır.
*/
.auth-message:empty {
    padding: 0;

    margin-top: 0;

    border-width: 0;

    box-shadow: none;

    min-height: 0;
}


/*
    P0-05 — BAŞARI / HATA AYRIMI.

    `::before` içeriği bir METİN İŞARETİDİR; ekran okuyucu metni zaten
    okuduğu için ek bilgi yüklemez, ama renk körlüğünde ya da düşük
    kontrastta durum yine de okunur:
        •  bilgi   (varsayılan)
        ✓  başarı
        ×  hata

    Renkler `style.css`teki mevcut yeşil/kırmızı paletten ve
    `.state-box.is-success/.is-error` tonlarından seçildi; yeni bir tasarım
    sistemi veya yeni palet eklenmedi.
*/
.auth-message::before {
    content: "\2022";

    display: inline-block;

    margin-right: 8px;

    font-family:
        "Segoe UI",
        Tahoma,
        sans-serif;

    font-weight: 700;
}


.auth-message.success {
    border-color: #2f7d32;

    border-left-width: 10px;

    background: #f3fbf3;

    color: #1b4d21;
}


.auth-message.success::before {
    content: "\2713";
}


.auth-message.error {
    border-color: #a1201a;

    border-left-width: 10px;

    background: #fff4f4;

    color: #7d1814;
}


.auth-message.error::before {
    content: "\00D7";
}


/*
    P0-04 — Tek panelli sayfalarda (`sifre-sifirla`, `e-posta-dogrula`)
    mesaj kartla aynı genişlikte hizalanır. `auth.html`de mesaj kartın
    İÇİNDE olduğundan bu kardeş seçicisi orada tutmaz; `hesap-ayarlari`
    kartları çift panelli olduğu için orada da tutmaz.
*/
.auth-card.single-panel ~ .auth-message {
    left: 50%;

    right: auto;

    width: min(620px, calc(100% - 40px));

    transform: translateX(-50%);
}


/* =========================================================
   INPUT VALIDATION
   ========================================================= */

.form-group input:invalid:not(:placeholder-shown) {
    border-color: #555;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    body {
        padding: 25px 15px;
    }

    .auth-panel {
        padding-left: 35px;
        padding-right: 35px;
    }

    .login-panel {
        padding-right: 40px;
    }

    .register-panel {
        padding-left: 40px;
    }

}


/* =========================================================
   MOBİL
   ========================================================= */

@media (max-width: 720px) {

    body {
        padding: 20px 12px;

        align-items: flex-start;
    }


    .auth-main {
        min-height: auto;

        padding-top: 15px;
        padding-bottom: 50px;
    }


    .auth-card {
        display: block;

        width: 100%;

        transform: none;

        border-radius: 17px;

        box-shadow:
            6px 6px 0 var(--shadow);
    }


    .auth-card::before {
        border-radius: 14px;
    }


    .auth-panel {
        min-height: auto;

        padding: 35px 25px 35px;
    }


    .login-panel {
        border-bottom: 0;
    }


    .register-panel {
        padding-top: 45px;
    }


    /*
        Ortadaki çizgiyi yatay ayırıcı yapıyoruz
    */

    .center-divider {
        position: relative;

        top: auto;
        left: auto;
        bottom: auto;

        width: calc(100% - 50px);

        height: 35px;

        margin: 0 auto;

        transform: none;
    }


    .center-divider::before {
        position: absolute;

        top: 50%;
        left: 0;
        right: 0;

        width: 100%;
        height: 2px;

        transform: translateY(-50%);
    }


    .center-divider::after {
        left: 50%;
        top: -12px;

        width: 80px;
        height: 35px;

        border-top: 2px solid var(--ink);
        border-bottom: 2px solid var(--ink);

        transform:
            translateX(-50%)
            rotate(4deg);
    }


    .auth-title {
        font-size: 2.2rem;
    }


    .title-line {
        margin-bottom: 32px;
        width: 75%;
    }


    .form-group {
        margin-bottom: 22px;
    }


    /*
        P0-04 — Mobilde de mesaj karta bağlı kalsın.

        Önceden `position: relative` idi; bu durumda mesaj `.auth-main`in
        flex öğesi oluyor ve `sifre-sifirla` / `e-posta-dogrula`
        sayfalarında kartın YANINA sıkışıyordu. Aynı `top: 100%` yaklaşımı
        mobilde de geçerlidir; yalnızca kenar boşlukları daraltılır.
    */

    .auth-message {
        left: 20px;
        right: 20px;

        margin-top: 14px;

        padding: 11px 14px;
    }


    .auth-card.single-panel ~ .auth-message {
        left: 20px;

        right: 20px;

        width: auto;

        transform: none;
    }


    .auth-card.single-panel .auth-panel {
        padding: 35px 25px;
    }


    .modal-card {
        padding: 32px 24px;
    }

}


/* =========================================================
   KÜÇÜK TELEFON
   ========================================================= */

@media (max-width: 420px) {

    body {
        padding: 10px;
    }


    .auth-panel {
        padding-left: 20px;
        padding-right: 20px;
    }


    .auth-title {
        font-size: 2rem;
    }


    .form-group input {
        height: 53px;
    }


    .sketch-button {
        min-height: 52px;
        font-size: 0.92rem;
    }


    .top-left,
    .top-right {
        display: none;
    }

}


/* =========================================================
   MODAL
   ========================================================= */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 20px;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-card {
    position: relative;
    width: min(450px, 100%);
    background: var(--paper-light);
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    box-shadow: 9px 9px 0 var(--shadow);
    padding: 40px 35px;
    transform: rotate(-0.5deg) scale(0.95);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal-card {
    transform: rotate(-0.5deg) scale(1);
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 35px;
    height: 35px;
    border: 2px solid var(--ink);
    background: var(--white);
    border-radius: 50%;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.modal-close:hover {
    background: var(--ink);
    color: var(--white);
    transform: rotate(90deg);
}

.modal-title {
    font-family: "Segoe Print", "Comic Sans MS", cursive;
    font-size: 1.8rem;
    margin-bottom: 10px;
    transform: rotate(-1deg);
}

.modal-description {
    font-size: 0.95rem;
    color: var(--ink-soft);
    margin-bottom: 25px;
    line-height: 1.5;
}

.modal-footer {
    margin-top: 20px;
    text-align: center;
}

/* Geliştirme modunda sıfırlama bağlantısını gösterir */
.dev-result {
    margin-top: 20px;

    padding: 14px 16px;

    border: 2px dashed var(--ink);

    border-radius: 8px;

    background: #fffbe9;
}

.dev-result-title {
    font-family: "Segoe Print", "Comic Sans MS", cursive;
    font-size: 0.8rem;
    color: var(--gray);
    margin-bottom: 8px;
}

.dev-result-link {
    font-size: 0.82rem;
    color: var(--ink);
    word-break: break-all;
    line-height: 1.45;
}

.back-link {
    background: none;
    border: none;
    color: var(--ink);
    font-family: "Segoe Print", "Comic Sans MS", cursive;
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: underline;
    transition: var(--transition);
}

.back-link:hover {
    color: var(--gray);
    transform: rotate(-1deg);
}

/* =========================================================
   RESET PASSWORD SAYFASI
   ========================================================= */

.reset-info {
    font-size: 0.95rem;
    color: var(--ink-soft);
    margin-bottom: 25px;
    line-height: 1.5;
}

/* =========================================================
   TEK PANELLİ KART
   ========================================================= */

.auth-card.single-panel {
    grid-template-columns: 1fr;
    width: min(620px, 100%);
}

.auth-card.single-panel .auth-panel {
    min-height: auto;
    padding: 44px 55px 46px;
}

.auth-card.single-panel .center-divider {
    display: none;
}

/* =========================================================
   DURUM KUTULARI
   ========================================================= */

.state-box {
    padding: 22px 24px;

    margin-bottom: 26px;

    border: 2px solid var(--ink);

    border-radius: 8px;

    background: var(--white);

    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.14);
}

.state-text {
    font-family:
        "Segoe Print",
        "Comic Sans MS",
        cursive;

    font-size: 0.98rem;

    line-height: 1.55;

    margin-bottom: 16px;
}

.state-box.is-error {
    background: #fff4f4;
}

.state-box.is-success {
    background: #f3fbf3;
}

.state-box .sketch-button {
    margin-top: 0;
}

/* =========================================================
   BİLGİ / İPUCU METİNLERİ
   ========================================================= */

.form-hint {
    font-size: 0.92rem;

    color: var(--ink-soft);

    line-height: 1.55;

    margin-bottom: 24px;

    padding: 14px 16px;

    background: #f0efe9;

    border-left: 4px solid var(--ink);

    border-radius: 0 6px 6px 0;
}

.section-title {
    font-family:
        "Segoe Print",
        "Comic Sans MS",
        cursive;

    font-size: 1.2rem;

    margin: 6px 0 22px;

    transform: rotate(-0.5deg);
}

.account-email {
    font-size: 0.95rem;

    color: var(--ink-soft);

    margin-bottom: 18px;

    word-break: break-all;
}

.verify-status {
    font-size: 0.9rem;

    padding: 12px 15px;

    border: 2px dashed var(--ink);

    border-radius: 8px;

    margin-bottom: 24px;

    line-height: 1.5;
}

.verify-status.is-pending {
    background: #fffbe9;
}

.verify-status.is-verified {
    background: #f3fbf3;
}

.verify-status a {
    color: var(--ink);

    font-weight: 600;
}

/* =========================================================
   ŞİFRE GÜCÜ GÖSTERGESİ
   ========================================================= */

.strength-meter {
    margin-top: 12px;
}

.strength-bars {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 6px;

    margin-bottom: 7px;
}

.strength-bar {
    height: 7px;

    border: 2px solid var(--ink);

    border-radius: 3px;

    background: var(--white);

    transition: background var(--transition);
}

.strength-label {
    font-family:
        "Segoe Print",
        "Comic Sans MS",
        cursive;

    font-size: 0.78rem;

    color: var(--gray);
}

/* Şifre kuralları (kayıt formu) */
.password-rules {
    list-style: none;

    margin-top: 14px;

    display: flex;

    flex-wrap: wrap;

    gap: 8px 14px;
}

.password-rules li {
    font-size: 0.76rem;

    font-family:
        "Segoe Print",
        "Comic Sans MS",
        cursive;

    color: var(--gray);

    padding-left: 20px;

    position: relative;

    transition: color var(--transition);
}

.password-rules li::before {
    content: "○";

    position: absolute;

    left: 0;

    top: 50%;

    transform: translateY(-50%);
}

.password-rules li.is-met {
    color: #2f7d32;
}

.password-rules li.is-met::before {
    content: "●";
}

/* Renk skalası - data-score değerine göre */
.strength-meter[data-score="1"] .strength-bar.is-active {
    background: #d64545;
}

.strength-meter[data-score="2"] .strength-bar.is-active {
    background: #d98a2b;
}

.strength-meter[data-score="3"] .strength-bar.is-active {
    background: #6b9b3a;
}

.strength-meter[data-score="4"] .strength-bar.is-active {
    background: #2f7d32;
}

/* =========================================================
   BİTİŞ METNİ
   ========================================================= */

.back-link.is-disabled {
    opacity: 0.6;

    pointer-events: none;
}


/*
    Faz 5.3.2 / doğrulama "tekrar gönder" bağlantısı.

    Sorun: `pointer-events: none` YALNIZCA fareyi engeller. Bağlantı
    `<a>` olduğu için klavyede odaklanabilir ve Enter/Space ile yine de
    tetiklenir; kullanıcı "gönderiliyor" yazısını görse bile isteği
    tekrar tekrar ateşleyebiliyordu.

    `aria-disabled="true"` ile de kapatıyoruz (bkz.
    `e-posta-dogrula.js` / `hesap-ayarlari.js` içindeki meşgul bayrağı):
    fare, dokunma ve klavye yollarının ÜÇÜ de durdurulur, bağlantı yine
    de bağlantı olarak okunur. Görsel olarak da "pasif" görünür: imleç
    değişir, alt çizgi kaybolur.
*/
.back-link[aria-disabled="true"],
.back-link.is-disabled {
    opacity: 0.65;

    cursor: default;

    text-decoration: none;
}


/* =========================================================
   ERİŞİLEBİLİRLİK
   ========================================================= */

/*
    J.9 (Faz 5.3.2) — GÖRÜNÜR KLAVYE ODAĞI.

    `.form-group input` taban kuralı `outline: none` ile tarayıcının
    varsayılan halkasını siliyor ve bir ikame de yoktu; klavye
    kullanıcısı hangi alanda olduğunu göremiyordu.

    `outline: none` SİLİNMEDİ (aksi halde odak halkası her yerde
    belirir ve tutarsız bir görsel sistem oluşur). Yerine kasıtlı bir
    `:focus-visible` tedavisi kondu:
      - `outline` bir ÇİZGİ kalınlığı + boşluk olarak eklenir, yani
        temel durumda zaten görünür bir fark vardır (renk tek başına
        taşımıyor),
      - `:focus-visible` sayesinde fare tıklamasında halka görünmez,
        klavyede belirir,
      - kapsam yalnızca auth yüzeyidir (`.auth-main` ve modal);
        sitenin geri kalanı bu fazda değiştirilmedi.
*/
.auth-main a:focus-visible,
.auth-main button:focus-visible,
.auth-main input:focus-visible,
.modal-overlay a:focus-visible,
.modal-overlay button:focus-visible,
.modal-overlay input:focus-visible {
    outline: 3px solid var(--ink);

    outline-offset: 3px;
}


/*
    Odak halkası, alanın `rotate()` dönüşü ve "yukarı kalkma"
    animasyonu ile çakışmasın; halka kutunun dışında kalsın.
*/
.form-group input:focus-visible {
    outline: 3px solid var(--ink);

    outline-offset: 3px;

    transform:
        rotate(0deg)
        translateY(-2px);
}


/*
    J.9 — ŞİFRE GÖSTER/GİZLE düğmesi odak halkası.
    Düğme saydam bir `<button>` olduğu için halka `outline-offset` ile
    yazının üstüne binmesin diye kısa tutulur. Seçici, yukarıdaki genel
    `.auth-main button:focus-visible` kuralını (0,2,1) yenebilmek için
    `.auth-main` önekiyle yazıldı (0,3,0).
*/
.auth-main .toggle-password:focus-visible {
    outline: 3px solid var(--ink);

    outline-offset: 1px;

    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

}

/* =========================================================
   ANA SAYFA İLE UYUMLU KOYU / CAM AUTH YÜZEYİ
   ========================================================= */

:root {
    --paper: #08090e;
    --paper-light: rgba(13, 15, 23, .82);
    --white: rgba(255, 255, 255, .08);
    --ink: #f5f5f5;
    --ink-soft: #c4c6cf;
    --gray: #a5a6b0;
    --gray-light: #777984;
    --shadow: rgba(0, 0, 0, .36);
}

body {
    color: var(--ink);
    background-color: #000;
    background-image:
        linear-gradient(rgba(5, 6, 10, .68), rgba(5, 6, 10, .84)),
        url("../components/backgrounds/other-backgrounds.svg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    background-attachment: fixed;
    font-family: "Trebuchet MS", Arial, sans-serif;
}

.auth-card,
.modal-card,
.state-box {
    border: 1px solid rgba(255, 255, 255, .17);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .095), rgba(255, 255, 255, .035));
    box-shadow:
        0 18px 50px rgba(0, 0, 0, .4),
        inset 0 1px 0 rgba(255, 255, 255, .06);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transform: none;
}

.auth-card::before {
    border-color: rgba(255, 255, 255, .11);
    border-radius: 14px;
}

.auth-panel {
    color: #f5f5f5;
}

.register-panel {
    border-left: 1px solid rgba(255, 255, 255, .12);
}

.auth-title,
.modal-title,
.section-title,
.state-text {
    color: #f5f5f5;
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-weight: 700;
    transform: none;
}

.title-line::before,
.title-line::after {
    background: linear-gradient(90deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .28));
}

.center-divider::before,
.center-divider::after,
.top-left,
.top-right {
    border-color: rgba(255, 255, 255, .19);
}

.center-divider::before {
    background: rgba(255, 255, 255, .16);
}

.form-group label {
    color: #e8e9ee;
    font-family: "Trebuchet MS", Arial, sans-serif;
    transform: none;
}

.form-group input,
.vault-modal__field select,
.vault-modal__field input[type="file"] {
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 10px;
    background: rgba(255, 255, 255, .075);
    color: #f5f5f5;
    font-family: "Trebuchet MS", Arial, sans-serif;
    transform: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.form-group input::placeholder {
    color: #a5a6b0;
    font-family: "Trebuchet MS", Arial, sans-serif;
}

.register-panel .form-group input {
    transform: none;
}

.form-group input:focus,
.form-group input:focus-visible {
    border-color: rgba(255, 255, 255, .68);
    background: rgba(8, 10, 17, .88);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .14);
    transform: none;
}

.form-group input:invalid:not(:placeholder-shown) {
    border-color: rgba(248, 113, 113, .76);
}

.toggle-password,
.back-link,
.secondary-button {
    color: #e8e9ee;
    font-family: "Trebuchet MS", Arial, sans-serif;
    transform: none;
}

.toggle-password:hover,
.back-link:hover {
    color: #fff;
    transform: none;
}

.sketch-button {
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 10px;
    background: rgb(14, 14, 26);
    color: #f5f5f5;
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-weight: 700;
    clip-path: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
}

.primary-button,
.register-panel .primary-button,
.secondary-button,
.register-panel .sketch-button {
    transform: none;
}

.sketch-button:hover,
.register-panel .sketch-button:hover {
    border-color: rgba(255, 255, 255, .72);
    background: linear-gradient(135deg, rgba(221, 219, 219, 0.18), rgba(221, 220, 220, 0.07));
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .3);
}

.sketch-button:active {
    transform: translateY(1px) scale(.98);
}

.sketch-button:disabled,
.sketch-button.loading,
.sketch-button:disabled:hover,
.sketch-button.loading:hover {
    border-color: rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .06);
    color: #a5a6b0;
    transform: none;
    box-shadow: none;
}

.secondary-button:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.auth-message,
.verify-status,
.form-hint,
.dev-result {
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 12px;
    background: rgba(255, 255, 255, .075);
    color: #e8e9ee;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}

.auth-message.success,
.state-box.is-success,
.verify-status.is-verified {
    border-color: rgba(74, 222, 128, .48);
    background: rgba(74, 222, 128, .11);
    color: #c5f6d4;
}

.auth-message.error,
.state-box.is-error {
    border-color: rgba(248, 113, 113, .52);
    background: rgba(248, 113, 113, .11);
    color: #fecaca;
}

.verify-status.is-pending {
    border-color: rgba(251, 191, 36, .48);
    background: rgba(251, 191, 36, .1);
    color: #fde7ae;
}

.auth-message.success::before,
.auth-message.error::before {
    color: currentColor;
}

.form-hint {
    border-left: 3px solid rgba(255, 255, 255, .55);
}

.verify-status a,
.dev-result-link,
.account-email {
    color: #e8e9ee;
}

.password-rules li,
.strength-label {
    color: #b8bac4;
    font-family: "Trebuchet MS", Arial, sans-serif;
}

.password-rules li.is-met {
    color: #86efac;
}

.strength-bar {
    border-color: rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .07);
}

.modal-overlay {
    background: rgba(0, 0, 0, .72);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.modal-overlay.active .modal-card,
.modal-card {
    transform: none;
}

.modal-close {
    border-color: rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .08);
    color: #f5f5f5;
}

.modal-close:hover {
    background: rgba(255, 255, 255, .16);
    color: #fff;
    transform: none;
}

.modal-description,
.reset-info {
    color: #c4c6cf;
}

.auth-main a:focus-visible,
.auth-main button:focus-visible,
.auth-main input:focus-visible,
.modal-overlay a:focus-visible,
.modal-overlay button:focus-visible,
.modal-overlay input:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .9);
    outline-offset: 3px;
}

.auth-title {
    font-family: "Michroma", "Trebuchet MS", Arial, sans-serif;
    font-weight: 400;
    letter-spacing: -.035em;
    transform: none;
}

.form-group input {
    min-height: 44px;
    transform: none;
}

.toggle-password {
    transform: translateY(-50%);
}

.toggle-password:hover {
    color: #fff;
    transform: translateY(-50%);
}

.sketch-button {
    min-height: 44px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 7px;
    background: rgba(255, 255, 255, .075);
    color: #f5f5f5;
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-weight: 700;
    clip-path: none;
    transform: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .26);
}

.primary-button {
    border-color: rgba(255, 255, 255, .24);
    background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.486));
}

.sketch-button:hover,
.register-panel .sketch-button:hover {
    border-color: rgba(255, 255, 255, .72);
    background: linear-gradient(135deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .07));
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .3);
}

.sketch-button:active:not(:disabled):not(.loading) {
    transform: translateY(1px);
}

.sketch-button:disabled,
.sketch-button.loading,
.sketch-button:disabled:hover,
.sketch-button.loading:hover {
    transform: none;
}

.account-actions {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

@media (max-width: 760px) {
    body {
        background-attachment: scroll;
    }

    .register-panel {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .12);
    }

    .auth-card {
        overflow: hidden;
    }

}

@media (prefers-reduced-motion: reduce) {
    .sketch-button,
    .modal-card,
    .modal-close {
        transition: none;
    }
}

/* Hesap ayarları: geri dönüş ve oturum eylemlerini ayır. */
.account-settings-page .auth-extra {
    margin-top: 22px;
    gap: 10px;
}

.account-settings-page .auth-extra .back-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 7px;
    background: rgba(255, 255, 255, .04);
    color: #e8e9ee;
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    transform: none;
}

@media (hover: hover) {
    .account-settings-page .auth-extra .back-link:hover {
        border-color: rgba(255, 255, 255, .42);
        background: rgba(255, 255, 255, .09);
        color: #fff;
        transform: translateX(-2px);
    }
}

.account-settings-page .auth-extra .back-link:focus-visible,
.account-settings-page .account-actions [data-logout]:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .9);
    outline-offset: 3px;
}

.account-settings-page .account-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.account-settings-page .account-actions [data-logout] {
    width: auto;
    min-height: 44px;
    margin-top: 0;
    padding: 10px 18px;
    border: 1px solid rgba(248, 113, 113, .38);
    border-radius: 7px;
    background: rgba(248, 113, 113, .08);
    color: #fecaca;
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-decoration: none;
    text-transform: none;
    clip-path: none;
    transform: none;
    box-shadow: none;
}

@media (hover: hover) {
    .account-settings-page .account-actions [data-logout]:hover:not([aria-disabled="true"]) {
        border-color: rgba(248, 113, 113, .62);
        background: rgba(248, 113, 113, .16);
        color: #fff;
        transform: translateY(-1px);
        box-shadow: none;
    }
}

.account-settings-page .account-actions [data-logout]:active:not([aria-disabled="true"]) {
    transform: translateY(1px);
}

.account-settings-page .account-actions [data-logout][aria-disabled="true"] {
    cursor: progress;
    opacity: .65;
    transform: none;
}