/* =========================================================
   FALAICI - ANALIZ SAYFASI
========================================================= */

.analysis-page{
    min-height:100vh;

    background:
        radial-gradient(
            circle at 80% 10%,
            rgba(130,45,170,.14),
            transparent 28%
        ),
        #08060a;
}


/* =========================================================
   HERO
========================================================= */

.analysis-hero{
    padding:80px 0 35px;
    text-align:center;
}

.analysis-heading{
    max-width:820px;
}

.analysis-heading h1{
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:clamp(48px,5vw,76px);

    line-height:1;

    font-weight:500;

    letter-spacing:-2px;
}

.analysis-heading h1 span{
    display:block;

    color:var(--gold);
}

.analysis-heading p{
    max-width:650px;

    margin:22px auto 0;

    color:#a89fab;

    font-size:17px;

    line-height:1.8;
}


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

.analysis-form-section{
    padding:35px 0 120px;
}

.analysis-layout{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        360px;

    gap:28px;

    align-items:start;
}


/* =========================================================
   ANA KARTLAR
========================================================= */

.analysis-form-card,
.analysis-side-card{
    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius:26px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.018)
        );

    box-shadow:
        0 25px 70px
        rgba(0,0,0,.22);
}

.analysis-form-card{
    padding:42px;
}


/* =========================================================
   FORM BÖLÜM BAŞLIKLARI
========================================================= */

.form-section-title{
    display:flex;

    gap:18px;

    align-items:flex-start;

    margin-bottom:28px;
}

.form-section-title > span{
    flex:0 0 42px;

    width:42px;
    height:42px;

    display:grid;

    place-items:center;

    border:
        1px solid
        rgba(231,189,109,.28);

    border-radius:50%;

    color:var(--gold);

    font-size:12px;

    font-weight:700;
}

.form-section-title h2{
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:28px;

    font-weight:500;

    color:#f6f0f7;
}

.form-section-title p{
    margin-top:5px;

    color:#8e8592;

    font-size:14px;

    line-height:1.6;
}


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

.form-grid{
    display:grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap:18px;
}

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

.form-full{
    grid-column:1 / -1;
}


/* =========================================================
   LABEL
========================================================= */

.form-group label{
    display:flex;

    align-items:center;

    gap:7px;

    margin-bottom:9px;

    color:#eee8f0;

    font-size:14px;

    font-weight:600;
}

.form-group label strong{
    color:var(--gold);
}

.form-group label small{
    color:#746c78;

    font-size:11px;

    font-weight:400;
}


/* =========================================================
   INPUT / SELECT / TEXTAREA
========================================================= */

.form-group input,
.form-group select,
.form-group textarea{
    width:100%;

    border:
        1px solid
        rgba(255,255,255,.11);

    border-radius:12px;

    outline:none;

    background:#0d0911;

    color:#f7f1f7;

    font:inherit;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.form-group input,
.form-group select{
    height:54px;

    padding:0 15px;
}

.form-group textarea{
    min-height:145px;

    padding:15px;

    resize:vertical;

    line-height:1.6;
}

.form-group input::placeholder,
.form-group textarea::placeholder{
    color:#5f5763;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    border-color:
        rgba(231,189,109,.55);

    box-shadow:
        0 0 0 3px
        rgba(231,189,109,.07);
}

.form-group input:disabled{
    opacity:.38;

    cursor:not-allowed;
}


/* Tarayıcı select menülerinde koyu tema desteği */

.form-group select{
    color-scheme:dark;
}


/* =========================================================
   YARDIM METNİ
========================================================= */

.field-help{
    display:block;

    margin-top:8px;

    color:#756d79;

    font-size:12px;

    line-height:1.5;
}


/* =========================================================
   DOĞUM SAATİ SEÇENEKLERİ
========================================================= */

.accuracy-options{
    display:grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap:12px;
}

.choice-card{
    min-height:112px;

    padding:17px;

    display:flex !important;

    align-items:flex-start !important;

    gap:12px !important;

    margin:0 !important;

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius:14px;

    background:
        rgba(255,255,255,.018);

    cursor:pointer;

    transition:
        border-color .2s ease,
        background .2s ease,
        transform .2s ease;
}

.choice-card:hover{
    border-color:
        rgba(231,189,109,.28);

    background:
        rgba(231,189,109,.025);

    transform:
        translateY(-1px);
}

.choice-card input{
    width:16px !important;

    height:16px !important;

    min-height:16px !important;

    margin:3px 0 0;

    accent-color:#d8aa53;
}

.choice-card span{
    display:block;
}

.choice-card strong{
    display:block;

    color:#f3edf5 !important;

    font-size:14px;
}

.choice-card small{
    display:block;

    margin-top:4px;

    color:#817984 !important;

    font-size:12px !important;

    line-height:1.45;
}


/* =========================================================
   AYIRAÇ
========================================================= */

.form-divider{
    height:1px;

    margin:22px 0 38px;

    background:
        rgba(255,255,255,.07);
}


/* =========================================================
   BİLGİ NOTU
========================================================= */

.form-notice{
    margin-top:8px;

    padding:17px;

    display:flex;

    gap:12px;

    border:
        1px solid
        rgba(231,189,109,.12);

    border-radius:12px;

    background:
        rgba(231,189,109,.035);
}

.form-notice > span{
    color:var(--gold);
}

.form-notice p{
    color:#928995;

    font-size:12px;

    line-height:1.6;
}


/* =========================================================
   GÖNDERİM / ÖDEME
========================================================= */

.analysis-submit-area{
    margin-top:30px;

    padding-top:28px;

    border-top:
        1px solid
        rgba(255,255,255,.07);
}

.submit-price{
    margin-bottom:18px;

    display:flex;

    justify-content:space-between;

    align-items:center;
}

.submit-price span{
    color:#918894;

    font-size:14px;
}

.submit-price strong{
    color:var(--gold2);

    font-size:26px;
}

.analysis-submit{
    width:100% !important;

    border:0;

    cursor:pointer;

    gap:10px;

    font-size:16px;
}

.analysis-submit:disabled{
    opacity:.65;

    cursor:wait;

    transform:none;
}

.payment-note{
    margin-top:12px;

    text-align:center;

    color:#6f6872;

    font-size:11px;

    line-height:1.5;
}


/* =========================================================
   SAĞ ANALİZ KARTI
========================================================= */

.analysis-side-card{
    position:sticky;

    top:105px;

    padding:30px;
}

.analysis-side-card h2{
    margin-bottom:26px;

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

    font-size:30px;

    line-height:1.2;

    font-weight:500;
}

.analysis-side-card ul{
    list-style:none;
}

.analysis-side-card li{
    padding:15px 0;

    display:flex;

    gap:12px;

    align-items:flex-start;

    border-bottom:
        1px solid
        rgba(255,255,255,.06);
}

.analysis-side-card li > span{
    width:26px;

    flex:0 0 26px;

    color:var(--gold);

    text-align:center;
}

.analysis-side-card li strong{
    display:block;

    color:#ded7e1;

    font-size:13px;
}

.analysis-side-card li small{
    display:block;

    margin-top:3px;

    color:#817986;

    font-size:11px;

    line-height:1.45;
}


/* =========================================================
   SAĞ FİYAT KUTUSU
========================================================= */

.side-price-box{
    margin-top:24px;

    padding:20px;

    text-align:center;

    border:
        1px solid
        rgba(231,189,109,.14);

    border-radius:16px;

    background:
        rgba(231,189,109,.035);
}

.side-price-box span,
.side-price-box small{
    display:block;

    color:#817985;

    font-size:11px;
}

.side-price-box strong{
    display:block;

    margin:3px 0;

    color:var(--gold2);

    font-size:30px;
}


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

body.modal-open{
    overflow:hidden;
}

.falaici-modal{
    position:fixed;

    inset:0;

    z-index:9999;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:20px;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:
        opacity .22s ease,
        visibility .22s ease;
}

.falaici-modal.is-open{
    opacity:1;

    visibility:visible;

    pointer-events:auto;
}


/* MODAL ARKA PLAN */

.falaici-modal-backdrop{
    position:absolute;

    inset:0;

    background:
        rgba(4,2,7,.78);

    backdrop-filter:
        blur(10px);

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


/* MODAL KUTUSU */

.falaici-modal-dialog{
    position:relative;

    z-index:2;

    width:100%;

    max-width:460px;

    max-height:
        calc(100vh - 28px);

    overflow-y:auto;

    padding:
        42px
        34px
        32px;

    border:
        1px solid
        rgba(231,189,109,.2);

    border-radius:24px;

    text-align:center;

    background:
        radial-gradient(
            circle at 50% 0,
            rgba(145,50,179,.18),
            transparent 45%
        ),
        #0e0a12;

    box-shadow:
        0 35px 100px
        rgba(0,0,0,.55);

    transform:
        translateY(14px)
        scale(.98);

    transition:
        transform .22s ease;
}

.falaici-modal.is-open
.falaici-modal-dialog{
    transform:
        translateY(0)
        scale(1);
}


/* MODAL KAPAT */

.falaici-modal-close{
    position:absolute;

    top:14px;

    right:16px;

    width:34px;

    height:34px;

    display:grid;

    place-items:center;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius:50%;

    background:
        rgba(255,255,255,.025);

    color:#9c949f;

    font-size:22px;

    cursor:pointer;

    transition:
        color .2s ease,
        border-color .2s ease,
        background .2s ease;
}

.falaici-modal-close:hover{
    color:#ffffff;

    border-color:
        rgba(231,189,109,.25);

    background:
        rgba(255,255,255,.05);
}


/* MODAL İKON */

.falaici-modal-icon{
    width:64px;

    height:64px;

    margin:
        0 auto 22px;

    display:grid;

    place-items:center;

    border:
        1px solid
        rgba(231,189,109,.35);

    border-radius:50%;

    background:
        rgba(231,189,109,.06);

    color:var(--gold2);

    font-size:24px;

    box-shadow:
        0 0 35px
        rgba(181,90,203,.12);
}


/* MODAL BAŞLIK */

.falaici-modal h2{
    margin-bottom:14px;

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

    font-size:30px;

    font-weight:500;
}


/* MODAL MESAJ */

.falaici-modal-message{
    white-space:pre-line;

    color:#aaa1ae;

    font-size:14px;

    line-height:1.75;

    overflow-wrap:anywhere;
}


/* MODAL BUTONU */

.falaici-modal-button{
    width:100% !important;

    margin-top:26px;

    border:0;

    cursor:pointer;
}


/* HATA MODALI */

.falaici-modal-error
.falaici-modal-icon{
    border-color:
        rgba(220,93,113,.35);

    background:
        rgba(220,93,113,.07);

    color:#f2a2af;
}


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

@media(max-width:950px){

    .analysis-layout{
        grid-template-columns:1fr;
    }

    .analysis-side-card{
        position:static;
    }

}


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

@media(max-width:650px){

    .analysis-hero{
        padding:
            55px
            0
            25px;
    }

    .analysis-heading h1{
        font-size:46px;
    }

    .analysis-heading p{
        font-size:15px;
    }

    .analysis-form-section{
        padding-top:20px;

        padding-bottom:80px;
    }

    .analysis-form-card{
        padding:
            25px
            18px;
    }

    .form-grid{
        grid-template-columns:1fr;
    }

    .accuracy-options{
        grid-template-columns:1fr;
    }

    .form-section-title{
        gap:13px;
    }

    .form-section-title h2{
        font-size:24px;
    }

    .submit-price strong{
        font-size:24px;
    }

}


/* =========================================================
   KÜÇÜK MOBİL
========================================================= */

@media(max-width:600px){

    .falaici-modal{
        padding:14px;
    }

    .falaici-modal-dialog{
        max-width:none;

        padding:
            38px
            22px
            24px;

        border-radius:20px;
    }

    .falaici-modal h2{
        font-size:26px;
    }

    .falaici-modal-message{
        font-size:13px;
    }

}


/* =========================================================
   ÇOK KÜÇÜK EKRANLAR
========================================================= */

@media(max-width:420px){

    .analysis-heading h1{
        font-size:40px;

        letter-spacing:-1.5px;
    }

    .analysis-form-card{
        padding:
            22px
            15px;
    }

    .form-section-title > span{
        width:38px;

        height:38px;

        flex-basis:38px;
    }

    .form-section-title h2{
        font-size:22px;
    }

    .analysis-side-card{
        padding:24px 20px;
    }

    .falaici-modal-dialog{
        padding:
            36px
            18px
            22px;
    }

}