.sss-page{
    background:#0b1322;
    color:#dce5f2;
}


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

.sss-hero{
    padding:80px 20px 55px;
    text-align:center;
}

.sss-hero .container{
    max-width:900px;
}

.sss-hero .eyebrow{
    color:#d8b35a;
    font-size:12px;
    font-weight:800;
    letter-spacing:1.5px;
    text-transform:uppercase;
    margin-bottom:12px;
}

.sss-hero h1{
    margin:0 0 16px;
    color:#fff;
    font-size:42px;
    line-height:1.2;
    font-weight:800;
}

.sss-hero p{
    max-width:700px;
    margin:0 auto;
    color:#8fa4c2;
    font-size:17px;
    line-height:1.7;
}


/* =========================================================
   FAQ
========================================================= */

.sss-section{
    padding:0 20px 80px;
}

.sss-container{
    width:100%;
    max-width:900px;
    margin:0 auto;
}

.sss-list{
    display:grid;
    gap:12px;
}

.sss-item{
    overflow:hidden;

    background:#111c2e;

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

    border-radius:14px;

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

.sss-item.open{
    border-color:rgba(216,179,90,.45);
}

.sss-question{
    width:100%;

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

    gap:20px;

    padding:21px 22px;

    border:0;

    background:transparent;

    color:#fff;

    font-family:inherit;
    font-size:16px;
    font-weight:800;

    text-align:left;

    cursor:pointer;
}

.sss-question:hover{
    color:#d8b35a;
}

.sss-plus{
    width:30px;
    height:30px;

    flex:0 0 30px;

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

    border-radius:50%;

    background:#1a2940;

    color:#d8b35a;

    font-size:21px;
    line-height:1;

    transition:
        transform .2s ease,
        background .2s ease;
}

.sss-item.open .sss-plus{
    transform:rotate(45deg);
    background:#243550;
}

.sss-answer{
    display:none;

    padding:0 22px 23px;

    color:#8fa4c2;

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

.sss-item.open .sss-answer{
    display:block;
}

.sss-answer p{
    margin:0;
}


/* =========================================================
   İLETİŞİM
========================================================= */

.sss-contact-section{
    padding:0 20px 90px;

    background:#0d1628;
}

.sss-contact-container{
    width:100%;
    max-width:900px;
    margin:0 auto;
}

.sss-contact-heading{
    padding:75px 0 30px;

    text-align:center;
}

.sss-contact-heading .eyebrow{
    color:#d8b35a;

    font-size:12px;
    font-weight:800;

    letter-spacing:1.5px;

    text-transform:uppercase;

    margin-bottom:10px;
}

.sss-contact-heading h2{
    margin:0 0 12px;

    color:#fff;

    font-size:32px;
    line-height:1.25;
}

.sss-contact-heading p{
    max-width:680px;

    margin:0 auto;

    color:#8fa4c2;

    font-size:16px;
    line-height:1.7;
}


/* FORM */

.sss-contact-form{
    background:#162237;

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

    border-radius:18px;

    padding:28px;

    box-shadow:
        0 15px 40px rgba(0,0,0,.18);
}

.sss-form-grid{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:17px;
}

.sss-form-group{
    display:flex;

    flex-direction:column;

    gap:7px;
}

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

.sss-form-group label{
    color:#dce5f2;

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

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

    padding:13px 14px;

    background:#0d1628;

    border:1px solid #2b3a52;

    border-radius:10px;

    color:#fff;

    font-family:inherit;
    font-size:14px;

    outline:none;
}

.sss-form-group textarea{
    min-height:150px;

    resize:vertical;
}

.sss-form-group input::placeholder,
.sss-form-group textarea::placeholder{
    color:#607696;
}

.sss-form-group input:focus,
.sss-form-group textarea:focus{
    border-color:#d8b35a;

    box-shadow:
        0 0 0 2px rgba(216,179,90,.12);
}

.sss-form-note{
    margin-top:12px;

    color:#7186a3;

    font-size:12px;
}

.sss-submit{
    margin-top:20px;

    display:flex;

    justify-content:flex-end;
}

.sss-submit button{
    border:0;

    cursor:pointer;
}

.sss-whatsapp{
    margin-top:14px;

    display:flex;

    justify-content:center;
}

.sss-whatsapp a{
    display:inline-flex;

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

    padding:11px 20px;

    border-radius:10px;

    background:#16b981;

    color:#fff;

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


/* =========================================================
   MESAJLAR
========================================================= */

.sss-alert{
    max-width:900px;

    margin:0 auto 20px;

    padding:14px 17px;

    border-radius:10px;

    font-size:14px;
}

.sss-alert.success{
    background:rgba(22,185,129,.12);

    border:1px solid rgba(22,185,129,.3);

    color:#74e5bc;
}

.sss-alert.error{
    background:rgba(229,57,53,.12);

    border:1px solid rgba(229,57,53,.3);

    color:#ffaaa7;
}


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

@media(max-width:700px){

    .sss-hero{
        padding:55px 18px 40px;
    }

    .sss-hero h1{
        font-size:30px;
    }

    .sss-hero p{
        font-size:14px;
    }

    .sss-section{
        padding:0 14px 60px;
    }

    .sss-question{
        padding:17px 16px;

        font-size:14px;
    }

    .sss-answer{
        padding:0 16px 19px;

        font-size:14px;
    }

    .sss-contact-section{
        padding:0 14px 65px;
    }

    .sss-contact-heading{
        padding:55px 0 25px;
    }

    .sss-contact-heading h2{
        font-size:25px;
    }

    .sss-contact-heading p{
        font-size:14px;
    }

    .sss-contact-form{
        padding:20px 16px;

        border-radius:15px;
    }

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

    .sss-form-group.full{
        grid-column:auto;
    }

    .sss-submit{
        display:block;
    }

    .sss-submit button{
        width:100%;
    }

}