```css
/* =========================================================
   SEYDA AKADEMİ
   LOGIN PAGE
========================================================= */
/* ---------------------------------------------------------
   BACKGROUND
--------------------------------------------------------- */
.login-background {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: radial-gradient( circle at 10% 10%, rgba(117, 83, 245, .14), transparent 32% ), radial-gradient( circle at 90% 85%, rgba(79, 110, 245, .12), transparent 35% ), #f8f8fc;
}


.background-shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}


.shape-one {
    width: 280px;
    height: 280px;
    top: -150px;
    right: -100px;
    background: rgb(77, 246, 148, 0.08);
}


.shape-two {
    width: 220px;
    height: 220px;
    bottom: -120px;
    left: -100px;
    background: rgb(79, 245, 138, 0.25);
}


.shape-three {
    width: 90px;
    height: 90px;
    top: 18%;
    left: -40px;
    background: rgb(79, 245, 138, 0.27);
}


/* ---------------------------------------------------------
   LOGIN PAGE
--------------------------------------------------------- */

.login-page {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 20px;
    overflow: hidden;
}


/* ---------------------------------------------------------
   LOGIN CONTAINER
--------------------------------------------------------- */

.login-container {
    width: 100%;
    max-width: 430px;
    animation: loginEnter .7s cubic-bezier(.22, 1, .36, 1);
}


@keyframes loginEnter {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ---------------------------------------------------------
   BRAND
--------------------------------------------------------- */

.brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 30px;
}


.brand-logo {
    position: relative;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    overflow: hidden;
    background: linear-gradient( 145deg, #42C6A5, #0f8769 );
    color: #fff;
    box-shadow: 0 12px 30px rgba(98, 70, 226, .28);
}


    .brand-logo::before {
        content: "";
        position: absolute;
        width: 70px;
        height: 70px;
        top: -45px;
        right: -35px;
        border-radius: 50%;
        background: rgba(255,255,255,.18);
    }


    .brand-logo img {
        position: relative;
        z-index: 2;
        width: 80%;
        margin: 0 auto;
    }


.brand-name {
    display: flex;
    flex-direction: column;
    line-height: 1;
}


    .brand-name strong {
        color: #24232c;
        font-size: 24px;
        font-weight: 800;
        letter-spacing: -.7px;
    }


    .brand-name span {
        margin-top: 5px;
        color: #42C6A5;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 2px;
        text-transform: uppercase;
    }


/* ---------------------------------------------------------
   WELCOME
--------------------------------------------------------- */

.welcome {
    margin-bottom: 30px;
    text-align: center;
}


    .welcome h1 {
        color: #20202a;
        font-size: 30px;
        font-weight: 750;
        letter-spacing: -.8px;
    }


    .welcome p {
        max-width: 310px;
        margin: 9px auto 0;
        color: #858592;
        font-size: 14px;
        line-height: 1.65;
    }


/* ---------------------------------------------------------
   INPUT GROUP
--------------------------------------------------------- */

.input-group {
    margin-bottom: 19px;
}


    .input-group label {
        display: block;
        margin-bottom: 8px;
        margin-left: 3px;
        color: #3e3d48;
        font-size: 13px;
        font-weight: 650;
    }


.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 57px;
    border: 1px solid #e6e5ed;
    border-radius: 16px;
    background: rgba(255,255,255,.88);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}


    .input-wrapper:focus-within {
        border-color: #42C6A5;
        box-shadow: 0 0 0 4px rgba(66,198,165,.09);
        transform: translateY(-1px);
    }


.input-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    margin-left: 17px;
    color: #aaa9b4;
    transition: color .2s ease;
}


.input-wrapper:focus-within
.input-icon {
    color: #42C6A5;
}


.input-wrapper input {
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: 0 15px;
    border: 0;
    background: transparent;
    color: #292832;
    font-size: 15px;
    font-weight: 500;
}


    .input-wrapper input::placeholder {
        color: #aaa9b4;
        font-weight: 400;
    }


/* ---------------------------------------------------------
   PASSWORD TOGGLE
--------------------------------------------------------- */

.password-toggle {
    width: 45px;
    height: 100%;
    flex: 0 0 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #42C6A5;
    transition: color .2s ease;
}


    .password-toggle:hover {
        color: #42C6A5;
    }


    .password-toggle svg {
        width: 20px;
        height: 20px;
    }


.eye-closed {
    display: none;
}


/* ---------------------------------------------------------
   INPUT ERROR
--------------------------------------------------------- */

.input-error {
    min-height: 0;
    margin-top: 5px;
    margin-left: 4px;
    color: #e05252;
    font-size: 11px;
}


.input-group.has-error
.input-wrapper {
    border-color: #e05252;
    box-shadow: 0 0 0 4px rgba(224,82,82,.07);
}


/* ---------------------------------------------------------
   OPTIONS
--------------------------------------------------------- */

.login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 4px 2px 22px;
}


.remember {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #777681;
    font-size: 12px;
    cursor: pointer;
}


    .remember input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }


.custom-checkbox {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #d8d6e1;
    border-radius: 5px;
    background: #fff;
    color: transparent;
    transition: background .2s ease, border-color .2s ease;
}


    .custom-checkbox svg {
        width: 13px;
        height: 13px;
    }


.remember input:checked + .custom-checkbox {
    border-color: #42C6A5;
    background: #42C6A5;
    color: #fff;
}


.forgot-password {
    color: #42C6A5;
    font-size: 12px;
    font-weight: 650;
}


/* ---------------------------------------------------------
   MESSAGE
--------------------------------------------------------- */

.login-message {
    display: none;
    align-items: center;
    gap: 8px;
    margin-bottom: 13px;
    padding: 11px 13px;
    border-radius: 11px;
    background: #fff0f0;
    color: #d84d4d;
    font-size: 12px;
}


    .login-message.success {
        background: #edf9f1;
        color: #2b9a55;
    }


.message-icon {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: currentColor;
}


/* ---------------------------------------------------------
   LOGIN BUTTON
--------------------------------------------------------- */

.login-button {
    position: relative;
    width: 100%;
    height: 57px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient( 135deg, #42C6A5, #0ea348 );
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 12px 25px rgba(104, 73, 230, .25);
    transition: transform .2s ease, box-shadow .2s ease;
}


    .login-button::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 110deg, transparent 25%, rgba(255,255,255,.14) 50%, transparent 75% );
        transform: translateX(-100%);
    }


    .login-button:hover::before {
        animation: buttonShine .8s ease;
    }


@keyframes buttonShine {

    to {
        transform: translateX(100%);
    }
}


.login-button:active {
    transform: scale(.985);
    box-shadow: 0 7px 18px rgba(104, 73, 230, .20);
}


.button-text {
    position: relative;
    z-index: 2;
}


.button-arrow {
    position: absolute;
    right: 18px;
    width: 19px;
    height: 19px;
    opacity: .75;
}


.button-loader {
    display: none;
    position: absolute;
    width: 19px;
    height: 19px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: loader .7s linear infinite;
}


@keyframes loader {

    to {
        transform: rotate(360deg);
    }
}


.login-button.loading
.button-text,
.login-button.loading
.button-arrow {
    opacity: 0;
}


.login-button.loading
.button-loader {
    display: block;
}


.login-button:disabled {
    cursor: default;
}


/* ---------------------------------------------------------
   REGISTER
--------------------------------------------------------- */

.register-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 24px;
    color: #8b8a95;
    font-size: 12px;
}


.register-button {
    color: #42C6A5;
    font-size: 12px;
    font-weight: 700;
}


/* ---------------------------------------------------------
   FOOTER
--------------------------------------------------------- */

.login-footer {
    margin-top: 28px;
    color: #b1b0b9;
    font-size: 10px;
    text-align: center;
}


/* =========================================================
   SHORT SCREENS
========================================================= */

@media (max-height: 750px) {

    .login-page {
        padding: 12px 20px;
    }


    .brand {
        margin-bottom: 18px;
    }


    .brand-logo {
        width: 46px;
        height: 46px;
        border-radius: 14px;
    }


        .brand-logo span {
            font-size: 22px;
        }


    .brand-name strong {
        font-size: 21px;
    }


    .brand-name span {
        margin-top: 4px;
        font-size: 10px;
    }


    .welcome {
        margin-bottom: 18px;
    }


        .welcome h1 {
            font-size: 26px;
        }


        .welcome p {
            margin-top: 6px;
            font-size: 12px;
            line-height: 1.45;
        }


    .input-group {
        margin-bottom: 11px;
    }


        .input-group label {
            margin-bottom: 5px;
            font-size: 12px;
        }


    .input-wrapper {
        height: 50px;
        border-radius: 14px;
    }


    .login-options {
        margin-bottom: 15px;
    }


    .login-button {
        height: 51px;
        border-radius: 14px;
    }


    .register-area {
        margin-top: 15px;
    }


    .login-footer {
        margin-top: 12px;
    }
}


/* =========================================================
   VERY SHORT SCREENS
========================================================= */

@media (max-height: 620px) {

    .login-page {
        padding: 7px 18px;
    }


    .brand {
        margin-bottom: 9px;
    }


    .brand-logo {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }


        .brand-logo span {
            font-size: 19px;
        }


    .brand-name strong {
        font-size: 19px;
    }


    .brand-name span {
        margin-top: 3px;
        font-size: 9px;
    }


    .welcome {
        margin-bottom: 9px;
    }


        .welcome h1 {
            font-size: 22px;
        }


        .welcome p {
            display: none;
        }


    .input-group {
        margin-bottom: 7px;
    }


        .input-group label {
            margin-bottom: 3px;
            font-size: 11px;
        }


    .input-wrapper {
        height: 45px;
        border-radius: 13px;
    }


    .input-icon {
        width: 17px;
        height: 17px;
        margin-left: 13px;
    }


    .input-wrapper input {
        padding: 0 12px;
        font-size: 13px;
    }


    .password-toggle {
        width: 40px;
        flex-basis: 40px;
    }


    .login-options {
        margin-bottom: 9px;
    }


    .login-button {
        height: 46px;
        border-radius: 13px;
    }


    .register-area {
        margin-top: 9px;
    }


    .login-footer {
        display: none;
    }
}


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

@media (min-width: 700px) {

    .login-page {
        padding: 40px;
    }


    .login-container {
        padding: 42px;
        border: 1px solid rgba(255,255,255,.7);
        border-radius: 30px;
        background: rgba(255,255,255,.72);
        box-shadow: 0 25px 80px rgba(40,35,80,.08);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }
}
/* =========================================
   VERIFICATION BOTTOM SHEET
========================================= */

.verification-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(5, 5, 15, 0);
    visibility: hidden;
    opacity: 0;
    transition: opacity .3s ease, background .3s ease, visibility .3s ease;
}

    .verification-overlay.active {
        visibility: visible;
        opacity: 1;
        background: rgba(5, 5, 15, .68);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }


/* =========================================
   SHEET
========================================= */

.verification-sheet {
    width: 100%;
    max-width: 520px;
    position: relative;
    padding: 10px 24px calc(24px + env(safe-area-inset-bottom));
    border-radius: 30px 30px 0 0;
    background: linear-gradient( 180deg, rgba(30, 28, 48, .98), rgba(15, 15, 27, .99) );
    border: 1px solid rgba(255,255,255,.08);
    border-bottom: 0;
    box-shadow: 0 -20px 60px rgba(0,0,0,.45);
    transform: translateY(100%);
    transition: transform .4s cubic-bezier(.22,1,.36,1);
}

.verification-overlay.active .verification-sheet {
    transform: translateY(0);
}


/* =========================================
   HANDLE
========================================= */

.verification-handle {
    width: 42px;
    height: 4px;
    margin: 0 auto 22px;
    border-radius: 10px;
    background: rgba(255,255,255,.20);
}


/* =========================================
   CLOSE
========================================= */

.verification-close {
    position: absolute;
    top: 18px;
    right: 20px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.75);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: .2s ease;
}

    .verification-close:active {
        transform: scale(.92);
    }


/* =========================================
   ICON
========================================= */

.verification-icon {
    width: 64px;
    height: 64px;
    margin: 2px auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: linear-gradient( 135deg, #7c5cff, #5275ff );
    color: #fff;
    font-size: 27px;
    box-shadow: 0 12px 35px rgba(100,80,255,.30);
}

.verification-title {
    color: #fff;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 9px;
}

.verification-description {
    max-width: 350px;
    margin: 0 auto;
    color: rgba(255,255,255,.55);
    text-align: center;
    font-size: 13px;
    line-height: 1.65;
}

    .verification-description strong {
        color: #a99aff;
        font-weight: 600;
    }


/* =========================================
   CODE
========================================= */

.verification-code {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 25px 0 12px;
}

.code-input {
    width: 46px;
    height: 54px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 13px;
    outline: none;
    background: rgba(255,255,255,.055);
    color: #fff;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

    .code-input:focus {
        border-color: #8065ff;
        background: rgba(124,92,255,.10);
        box-shadow: 0 0 0 3px rgba(124,92,255,.10);
    }


/* =========================================
   MESSAGE
========================================= */

.verification-message {
    min-height: 19px;
    margin-bottom: 9px;
    color: #ff7185;
    text-align: center;
    font-size: 12px;
}


/* =========================================
   BUTTON
========================================= */

.verification-button {
    width: 100%;
    height: 52px;
    border: 0;
    border-radius: 15px;
    background: linear-gradient( 135deg, #7c5cff, #5d78ff );
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(100,80,255,.25);
    transition: transform .2s ease;
}

    .verification-button:active {
        transform: scale(.98);
    }


/* =========================================
   LOADING
========================================= */

.verification-spinner {
    display: none;
    width: 18px;
    height: 18px;
    margin: auto;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: verificationSpin .7s linear infinite;
}

.verification-button.loading
.verification-button-text {
    display: none;
}

.verification-button.loading
.verification-spinner {
    display: block;
}

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


/* =========================================
   RESEND
========================================= */

.verification-resend {
    margin-top: 19px;
    text-align: center;
    color: rgba(255,255,255,.42);
    font-size: 12px;
}

    .verification-resend button {
        margin-left: 4px;
        padding: 0;
        border: 0;
        background: transparent;
        color: #9d8cff;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
    }

        .verification-resend button:disabled {
            opacity: .35;
            cursor: default;
        }

.verification-timer {
    min-height: 16px;
    margin-top: 7px;
    color: rgba(255,255,255,.30);
    text-align: center;
    font-size: 11px;
}


/* =========================================
   SMALL SCREEN
========================================= */

@media (max-height: 650px) {

    .verification-sheet {
        padding-top: 7px;
    }

    .verification-icon {
        width: 52px;
        height: 52px;
        margin-bottom: 12px;
        font-size: 22px;
    }

    .verification-title {
        font-size: 19px;
    }

    .verification-code {
        margin-top: 18px;
    }

    .code-input {
        width: 40px;
        height: 47px;
    }
}


/* =========================================
   RESET PASSWORD MODAL
========================================= */

.reset-password-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(5, 5, 15, 0);
    visibility: hidden;
    opacity: 0;
    transition: opacity .3s ease, background .3s ease, visibility .3s ease;
}


    .reset-password-overlay.active {
        visibility: visible;
        opacity: 1;
        background: rgba(5, 5, 15, .68);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }


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

.reset-password-modal {
    width: 100%;
    max-width: 420px;
    position: relative;
    padding: 30px 25px 25px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 28px;
    background: linear-gradient( 180deg, rgba(30, 28, 48, .99), rgba(15, 15, 27, .99) );
    box-shadow: 0 25px 80px rgba(0,0,0,.45);
    transform: scale(.94) translateY(15px);
    opacity: 0;
    transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .25s ease;
}


.reset-password-overlay.active
.reset-password-modal {
    transform: scale(1) translateY(0);
    opacity: 1;
}


/* =========================================
   CLOSE
========================================= */

.reset-password-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.7);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: .2s ease;
}


    .reset-password-close:active {
        transform: scale(.92);
    }


/* =========================================
   ICON
========================================= */

.reset-password-icon {
    width: 62px;
    height: 62px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 19px;
    background: linear-gradient( 135deg, #42C6A5, #27AA8A );
    color: #fff;
    box-shadow: 0 12px 35px rgba(66,198,165,.28);
}


    .reset-password-icon svg {
        width: 30px;
        height: 30px;
    }


/* =========================================
   TITLE
========================================= */

.reset-password-title {
    margin: 0 0 8px;
    color: #fff;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
}


.reset-password-description {
    max-width: 320px;
    margin: 0 auto 24px;
    color: rgba(255,255,255,.52);
    text-align: center;
    font-size: 13px;
    line-height: 1.6;
}


/* =========================================
   FIELD
========================================= */

.reset-password-field {
    margin-bottom: 15px;
}


    .reset-password-field label {
        display: block;
        margin-bottom: 7px;
        margin-left: 3px;
        color: rgba(255,255,255,.72);
        font-size: 12px;
        font-weight: 600;
    }


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

.reset-password-input {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 53px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 15px;
    background: rgba(255,255,255,.055);
    transition: border-color .2s ease, box-shadow .2s ease;
}


    .reset-password-input:focus-within {
        border-color: #42C6A5;
        box-shadow: 0 0 0 3px rgba(66,198,165,.10);
    }


    .reset-password-input input {
        width: 100%;
        height: 100%;
        min-width: 0;
        padding: 0 48px 0 15px;
        border: 0;
        outline: none;
        background: transparent;
        color: #fff;
        font-size: 14px;
    }


        .reset-password-input input::placeholder {
            color: rgba(255,255,255,.30);
        }


/* =========================================
   PASSWORD TOGGLE
========================================= */

.reset-password-toggle {
    position: absolute;
    right: 4px;
    width: 44px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.38);
    cursor: pointer;
    transition: color .2s ease;
}


    .reset-password-toggle:hover {
        color: #42C6A5;
    }


    .reset-password-toggle svg {
        width: 19px;
        height: 19px;
    }


.reset-eye-closed {
    display: none;
}


/* =========================================
   MESSAGE
========================================= */

.reset-password-message {
    min-height: 18px;
    margin: 2px 3px 9px;
    color: #ff7185;
    text-align: center;
    font-size: 11px;
}


/* =========================================
   BUTTON
========================================= */

.reset-password-button {
    position: relative;
    width: 100%;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 15px;
    background: linear-gradient( 135deg, #42C6A5, #27AA8A );
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 12px 30px rgba(66,198,165,.24);
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}


    .reset-password-button:active {
        transform: scale(.98);
        box-shadow: 0 7px 20px rgba(66,198,165,.18);
    }


    .reset-password-button:disabled {
        cursor: default;
        opacity: .7;
    }


/* =========================================
   LOADING
========================================= */

.reset-password-spinner {
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,.30);
    border-top-color: #fff;
    border-radius: 50%;
    animation: resetPasswordSpin .7s linear infinite;
}


.reset-password-button.loading
.reset-password-button-text {
    display: none;
}


.reset-password-button.loading
.reset-password-spinner {
    display: block;
}


@keyframes resetPasswordSpin {

    to {
        transform: rotate(360deg);
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 480px) {

    .reset-password-overlay {
        padding: 15px;
    }


    .reset-password-modal {
        padding: 27px 20px 21px;
        border-radius: 25px;
    }


    .reset-password-icon {
        width: 58px;
        height: 58px;
    }


    .reset-password-title {
        font-size: 20px;
    }
}
/* =========================================================
   PRAYER CARD
========================================================= */
.p-3 {
    padding: 1rem;
}

.prayer-card {
    width: 100%;
    padding: 15px;
    border: 1px solid rgba(66,198,165,.12);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 10px 35px rgba(30,70,60,.07);
}


/* =========================================================
   CARD HEADER
========================================================= */

.prayer-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}


.prayer-card-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}


.prayer-card-heading-icon {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(66,198,165,.11);
    color: #42C6A5;
}


    .prayer-card-heading-icon svg {
        width: 20px;
        height: 20px;
    }


.prayer-card-title {
    color: #252a29;
    font-size: 14px;
    font-weight: 750;
}


.prayer-card-date {
    margin-top: 2px;
    color: #999f9d;
    font-size: 10px;
}


/* =========================================================
   CITY SELECT
========================================================= */

.prayer-city {
    position: relative;
    width: 125px;
    height: 38px;
    flex: 0 0 125px;
    display: flex;
    align-items: center;
    border: 1px solid rgba(66,198,165,.16);
    border-radius: 11px;
    background: rgba(66,198,165,.055);
    color: #42C6A5;
    overflow: hidden;
}


    .prayer-city > svg:first-child {
        width: 15px;
        height: 15px;
        flex: 0 0 15px;
        margin-left: 10px;
    }


    .prayer-city select {
        width: 100%;
        height: 100%;
        padding: 0 25px 0 7px;
        border: 0;
        outline: 0;
        appearance: none;
        -webkit-appearance: none;
        background: transparent;
        color: #3d4542;
        font-size: 11px;
        font-weight: 650;
        cursor: pointer;
    }


        .prayer-city select option {
            color: #333;
            background: #fff;
        }


.prayer-select-arrow {
    position: absolute;
    right: 8px;
    width: 13px;
    height: 13px;
    pointer-events: none;
    color: #42C6A5;
}


/* =========================================================
   PRAYER TIMES SCROLL
========================================================= */

.prayer-times-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}


    .prayer-times-scroll::-webkit-scrollbar {
        display: none;
    }


.prayer-times {
    display: flex;
    gap: 8px;
    width: max-content;
}


/* =========================================================
   PRAYER ITEM
========================================================= */

.prayer-time {
    width: 73px;
    min-width: 73px;
    padding: 10px 5px 9px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #edf0ef;
    border-radius: 14px;
    background: #fafcfb;
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}


    .prayer-time:active {
        transform: scale(.97);
    }


.prayer-time-icon {
    width: 30px;
    height: 30px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(66,198,165,.10);
    color: #42C6A5;
}


    .prayer-time-icon svg {
        width: 17px;
        height: 17px;
    }


.prayer-time span {
    margin-bottom: 2px;
    color: #929896;
    font-size: 9px;
    font-weight: 600;
}


.prayer-time strong {
    color: #26302d;
    font-size: 13px;
    font-weight: 750;
    letter-spacing: -.2px;
}


/* =========================================================
   ACTIVE / CURRENT PRAYER
========================================================= */

.prayer-time.active {
    border-color: rgba(66,198,165,.35);
    background: linear-gradient( 145deg, rgba(66,198,165,.12), rgba(66,198,165,.045) );
    box-shadow: 0 5px 15px rgba(66,198,165,.10);
}


    .prayer-time.active .prayer-time-icon {
        background: #42C6A5;
        color: #fff;
    }


    .prayer-time.active span {
        color: #42C6A5;
    }


    .prayer-time.active strong {
        color: #249879;
    }


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .prayer-card {
        padding: 12px;
        border-radius: 19px;
    }


    .prayer-card-top {
        gap: 7px;
    }


    .prayer-card-heading-icon {
        width: 35px;
        height: 35px;
        flex-basis: 35px;
    }


    .prayer-card-title {
        font-size: 13px;
    }


    .prayer-card-date {
        font-size: 9px;
    }


    .prayer-city {
        width: 112px;
        flex-basis: 112px;
        height: 35px;
    }


    .prayer-time {
        width: 68px;
        min-width: 68px;
    }
}
.category-section {
    width: 100%;
    margin-top: 24px;
}


/* HEADER */
.sa-back-button {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 13px;
    background: #f3f7f5;
    color: #252b29;
    cursor: pointer;
    margin-right:15px;
    -webkit-tap-highlight-color: transparent;
    transition: background .2s ease, transform .2s ease;
}

    .sa-back-button svg {
        width: 21px;
        height: 21px;
    }

    .sa-back-button:active {
        transform: scale(.90);
        background: #e8f5f1;
    }
.category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.mt-0
{
    margin-top:0!important;
}
.category-header-x {
    justify-content: start;
}
    .category-header h2 {
        margin: 0;
        color: #252b29;
        font-size: 17px;
        font-weight: 750;
        letter-spacing: -.3px;
    }
.category-header-x h2 { 
    font-size: 27px;
    line-height: 1.15;
    font-weight: 700;
    white-space: nowrap;
}


    .category-header span {
        display: block;
        margin-top: 3px;
        color: #9a9f9d;
        font-size: 10px;
    }
.category-header-x > div {
   width:calc(100% - 40px);
}

.category-all {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 5px 7px;
    border: 0;
    background: transparent;
    color: #42C6A5;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

    .category-all svg {
        width: 14px;
        height: 14px;
    }


/* GRID */

.category-grid {
    display: grid!important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}


/* CARD */

.category-card {
    position: relative;
    width: 100%;
    height: 155px;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 19px;
    background: #fff;
    cursor: pointer;
    box-shadow: 0 7px 24px rgba(30, 70, 60, .08);
    transition: transform .2s ease, box-shadow .2s ease;
}

    .category-card:active {
        transform: scale(.97);
    }


/* IMAGE */

.category-image {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

    .category-image img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        transition: transform .35s ease;
    }

.category-card:hover .category-image img {
    transform: scale(1.05);
}


/* OVERLAY */

.category-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( to bottom, rgba(0, 0, 0, .02) 15%, rgba(0, 0, 0, .12) 45%, rgba(0, 0, 0, .72) 100% );
}


/* CONTENT */

.category-content {
    position: absolute;
    left: 13px;
    right: 10px;
    bottom: 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

    .category-content > span {
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.25;
        text-align: left;
        text-shadow: 0 1px 6px rgba(0, 0, 0, .4);
    }


/* ARROW */

.category-arrow {
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(255, 255, 255, .18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
}

    .category-arrow svg {
        width: 15px;
        height: 15px;
    }


/* SMALL MOBILE */

@media (max-width: 380px) {

    .category-section {
        margin-top: 20px;
    }

    .category-grid {
        gap: 9px;
    }

    .category-card {
        height: 140px;
        border-radius: 16px;
    }

    .category-content {
        left: 10px;
        right: 8px;
        bottom: 9px;
    }

        .category-content > span {
            font-size: 11px;
        }

    .category-arrow {
        width: 24px;
        height: 24px;
        flex-basis: 24px;
        border-radius: 8px;
    }

        .category-arrow svg {
            width: 13px;
            height: 13px;
        }
}
.category-container {
    position: relative;
    width: 100%;
    min-height: 150px;
}


/* KATEGORİ LOADING */

.category-loading {
    width: 100%;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #9a9f9d;
    font-size: 10px;
    font-weight: 600;
}


/* SPINNER */

.category-spinner {
    width: 30px;
    height: 30px;
    border: 3px solid rgba(66, 198, 165, .15);
    border-top-color: #42C6A5;
    border-radius: 50%;
    animation: categorySpin .8s linear infinite;
}


@keyframes categorySpin {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* KATEGORİLER BAŞLANGIÇTA GİZLİ */

#categoryGrid {
    display: none;
}


/* BOŞ DURUM */

.category-empty {
    width: 100%;
    padding: 30px 10px;
    text-align: center;
    color: #9a9f9d;
    font-size: 11px;
}
.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 68px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    align-items: center;
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(0, 0, 0, .05); 
    box-shadow: 0 10px 35px rgba(0, 0, 0, .10), 0 2px 8px rgba(0, 0, 0, .04);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    z-index: 9999;
    padding: 5px; 
}
.mb-30{
    margin-bottom:60px;
}
/* NORMAL ITEM */
.bottom-nav-item {
    height: 58px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 0;
    background: transparent;
    color: #9a9f9d;
    cursor: pointer;
    transition: color .2s ease, transform .2s ease;
}

    .bottom-nav-item:active {
        transform: scale(.90);
    }


/* ICON */

.bottom-nav-icon {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all .2s ease;
}


/* TEXT */

.bottom-nav-item span {
    font-size: 9px;
    font-weight: 600;
    white-space: nowrap;
}


/* ACTIVE */

.bottom-nav-item.active {
    color: #42C6A5;
}

    .bottom-nav-item.active .bottom-nav-icon {
        transform: translateY(-1px);
    }


/* CENTER BUTTON */

.bottom-nav-center {
    width: 54px;
    height: 54px;
    justify-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    cursor: pointer;
    transition: transform .2s ease;
}

    .bottom-nav-center:active {
        transform: scale(.88);
    }

.bottom-nav-center-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    background: #42C6A5;
    color: #fff;
    font-size: 20px;
    box-shadow: 0 8px 18px rgba(66, 198, 165, .30);
}
    .bottom-nav-center-icon svg {
        width: 26px;
        height: 26px;
        display: block;
    }
.sa-page-search {
    position: relative;
    width: 100%;
    height: 48px;
    display: flex;
    margin-bottom:25px;
    align-items: center;
    padding: 0 14px;
    background: #f5f8f7;
    border: 1px solid rgba(0,0,0,.04);
    border-radius: 15px;
    transition: .2s ease;
}

    .sa-page-search:focus-within {
        background: #fff;
        border-color: rgba(66,198,165,.35);
        box-shadow: 0 0 0 3px rgba(66,198,165,.08);
    }

.sa-page-search-icon {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    color: #9ca5a2;
}

.sa-page-search input {
    width: 100%;
    height: 100%;
    padding: 0 10px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #252b29;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
}

    .sa-page-search input::placeholder {
        color: #a4aaa8;
    }

#pageSearchClear {
    width: 28px;
    height: 28px;
    display: none;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #e5ebe9;
    color: #7d8582;
    cursor: pointer;
}

    #pageSearchClear svg {
        width: 13px;
        height: 13px;
    }

.sa-question-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: scroll;
    gap: 11px;
    height: calc(100vh - 230px);
}


/* ÜST */

.sa-question-card-top {
    display: flex;
    align-items: center;
    min-width: 0;
}


/* SORU İKONU */

.sa-question-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: rgba(66, 198, 165, .10);
    color: #42C6A5;
}

    .sa-question-icon svg {
        width: 21px;
        height: 21px;
    }


/* İÇERİK */

.sa-question-content {
    min-width: 0;
    flex: 1;
    margin-left: 11px;
}

    .sa-question-content h3 {
        margin: 0;
        color: #252b29;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

.sa-question-date {
    margin-top: 5px;
    color: #a0a7a4;
    font-size: 9px;
    font-weight: 500;
}


/* OK */

.sa-question-arrow {
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 7px;
    color: #a3aaa7;
}

    .sa-question-arrow svg {
        width: 17px;
        height: 17px;
    }


/* İSTATİSTİKLER */

.sa-question-stats {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #f0f3f2;
}

.sa-question-stat {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #969e9b;
    font-size: 10px;
    font-weight: 600;
}

    .sa-question-stat svg {
        width: 15px;
        height: 15px;
    }


    /* FAVORİ */

    .sa-question-stat:last-child {
        color: #e28b9b;
    }

.question-search-empty {
    width: 100%;
    display: none;
    flex-direction: column;
    align-items: center;
    padding: 45px 20px;
    text-align: center;
}

.question-search-empty-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    border-radius: 16px;
    background: rgba(66, 198, 165, .10);
    color: #42C6A5;
}

    .question-search-empty-icon svg {
        width: 22px;
        height: 22px;
    }

.question-search-empty strong {
    color: #252b29;
    font-size: 13px;
    font-weight: 700;
}

.question-search-empty span {
    margin-top: 5px;
    color: #9da5a2;
    font-size: 10px;
    line-height: 1.5;
}

.category-empty {
    width: 100%;
    min-height: 150px;
    padding: 25px 15px;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #9a9f9d;
}

.category-empty-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    border-radius: 15px;
    background: rgba(66,198,165,.10);
    color: #42C6A5;
}

    .category-empty-icon svg {
        width: 22px;
        height: 22px;
    }

.category-empty strong {
    display: block;
    margin-bottom: 4px;
    color: #363d3a;
    font-size: 12px;
    font-weight: 700;
}

.category-empty span {
    display: block;
    color: #a0a7a4;
    font-size: 10px;
    line-height: 1.5;
}
.article-detail {
    min-height: 100%;
    background: #f7faf9;
    padding-bottom: 40px;
}


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

.article-hero {
    position: relative;
    width: 100%;
    height: 310px;
    overflow: hidden;
    background: #17201d;
}


    .article-hero img {
        position: absolute;
        width: 100%;
        height: 115%;
        left: 0;
        top: -7%;
        object-fit: cover;
        transform: scale(1.03);
        will-change: transform;
        transition: transform .08s linear;
    }


/* ==============================
   GRADIENT
============================== */

.article-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 180deg, rgba(0,0,0,.28) 0%, transparent 40%, rgba(0,0,0,.65) 100% );
    pointer-events: none;
}


/* ==============================
   BACK
============================== */

.article-back,
.article-favorite {
    position: absolute;
    top: 18px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 14px;
    background: rgba(255,255,255,.16);
    color: #fff;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 3;
    box-shadow: 0 8px 25px rgba(0,0,0,.12);
}


.article-back {
    left: 16px;
}


.article-favorite {
    right: 16px;
}


    .article-back svg,
    .article-favorite svg {
        width: 20px;
        height: 20px;
    }


/* ==============================
   BODY
============================== */

.article-body {
    position: relative;
    margin-top: -32px;
    padding: 24px 18px 35px;
    border-radius: 28px 28px 0 0;
    background: #fff;
    z-index: 5;
    box-shadow: 0 -10px 40px rgba(0,0,0,.07);
}


/* ==============================
   CATEGORY
============================== */

.article-category {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border-radius: 10px;
    background: rgba(66,198,165,.10);
    color: #42C6A5;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}


    .article-category span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #42C6A5;
    }


/* ==============================
   TITLE
============================== */

.article-body h1 {
    margin: 15px 0 8px;
    color: #202724;
    font-size: 27px;
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -.7px;
}


/* ==============================
   DATE
============================== */

.article-meta {
    display: flex;
    align-items: center;
    color: #a0a7a4;
    font-size: 11px;
}


    .article-meta > div {
        display: flex;
        align-items: center;
        gap: 6px;
    }


    .article-meta svg {
        width: 15px;
        height: 15px;
    }


/* ==============================
   STATS
============================== */

.article-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 20px;
}


.article-stat {
    min-height: 72px;
    padding: 11px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: #f7faf9;
    text-align: center;
}


    .article-stat svg {
        width: 18px;
        height: 18px;
        margin-bottom: 4px;
        color: #42C6A5;
    }


    .article-stat strong {
        color: #303734;
        font-size: 13px;
        font-weight: 800;
    }


    .article-stat span {
        margin-top: 2px;
        color: #a1a7a4;
        font-size: 9px;
    }


/* ==============================
   CONTENT
============================== */

.article-content {
    margin-top: 27px;
    color: #555d59; 
}


    .article-content p {
        margin: 0 0 17px;
        text-align:left!important;
    }


    .article-content h2 {
        margin: 25px 0 10px;
        color: #252b28;
        font-size: 19px;
    }


    .article-content img {
        width: 100%;
        height: auto;
        margin: 10px 0 20px;
        border-radius: 17px;
    }


/* ==============================
   LIKE
============================== */

.article-like {
    width: 100%;
    height: 54px;
    margin-top: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 0;
    border-radius: 17px;
    background: linear-gradient( 135deg, #42C6A5, #36b896 );
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 12px 30px rgba(66,198,165,.25);
    transition: transform .2s ease, box-shadow .2s ease;
}


    .article-like:active {
        transform: scale(.97);
        box-shadow: 0 6px 18px rgba(66,198,165,.20);
    }


    .article-like svg {
        width: 20px;
        height: 20px;
    }
/* =========================================
   MOBILE ALERT
========================================= */

.sa-alert-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 20, 18, .45);
    opacity: 0;
    visibility: hidden;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: opacity .25s ease, visibility .25s ease;
}


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


/* =========================================
   ALERT
========================================= */

.sa-alert {
    width: 100%;
    max-width: 340px;
    padding: 27px 22px 22px;
    border-radius: 25px;
    background: #fff;
    text-align: center;
    box-shadow: 0 25px 70px rgba(0,0,0,.18);
    transform: scale(.88) translateY(15px);
    transition: transform .3s cubic-bezier(.22,1,.36,1);
}


.sa-alert-overlay.active .sa-alert {
    transform: scale(1) translateY(0);
}


/* =========================================
   ICON
========================================= */

.sa-alert-icon {
    width: 62px;
    height: 62px;
    margin: 0 auto 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: rgba(66,198,165,.11);
    color: #42C6A5;
}


    .sa-alert-icon svg {
        width: 29px;
        height: 29px;
    }


/* =========================================
   TITLE
========================================= */

.sa-alert h3 {
    margin: 0;
    color: #252b28;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.2px;
}


/* =========================================
   MESSAGE
========================================= */

.sa-alert p {
    margin: 9px auto 20px;
    max-width: 280px;
    color: #8b928f;
    font-size: 12px;
    line-height: 1.65;
}


/* =========================================
   BUTTON
========================================= */

.sa-alert-button {
    width: 100%;
    height: 48px;
    border: 0;
    border-radius: 14px;
    background: #42C6A5;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 9px 22px rgba(66,198,165,.22);
    transition: transform .15s ease, box-shadow .15s ease;
}


    .sa-alert-button:active {
        transform: scale(.97);
        box-shadow: 0 5px 14px rgba(66,198,165,.18);
    }


/* =========================================
   TYPES
========================================= */

.sa-alert.success .sa-alert-icon {
    background: rgba(66,198,165,.11);
    color: #42C6A5;
}


.sa-alert.error .sa-alert-icon {
    background: rgba(230,83,83,.10);
    color: #e65353;
}


.sa-alert.warning .sa-alert-icon {
    background: rgba(241,177,62,.12);
    color: #e5a32e;
}


.sa-alert.info .sa-alert-icon {
    background: rgba(82,130,230,.11);
    color: #527ee6;
}
.article-favorite.active {
    color: #e53950;
}

    .article-favorite.active .heart-path {
        fill: currentColor;
        stroke: currentColor; 
        animation: heartPop .45s cubic-bezier(.25, .8, .25, 1);
    }

@keyframes heartPop {
    0% {
        transform: scale(.88);
    }

    35% {
        transform: scale(1.06);
    }

    65% {
        transform: scale(.99);
    }

    100% {
        transform: scale(1);
    }
}
.fs-27{
    font-size:27px!important;
}
.sa-search-page {
    min-height: 100%;
    padding: 0 16px 35px;
    background: linear-gradient( 180deg, #f3faf7 0, #f8faf9 260px, #f8faf9 100% );
}


/* HEADER */

.sa-search-header {
    height: 76px;
    display: flex;
    align-items: center;
    gap: 13px;
}


.sa-search-back {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.88);
    color: #26302c;
    box-shadow: 0 7px 22px rgba(32,70,57,.07);
}


    .sa-search-back svg {
        width: 20px;
        height: 20px;
    }


.sa-search-header-title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.6px;
    color: #202925;
}


.sa-search-header-subtitle {
    margin-top: 2px;
    font-size: 10px;
    color: #89938e;
}


/* SEARCH */

.sa-search-main {
    padding-top: 5px;
}


.sa-search-input-wrap {
    height: 58px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    border: 1px solid rgba(66,198,165,.12);
    border-radius: 19px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 12px 32px rgba(41,92,74,.08);
    transition: .2s ease;
}


    .sa-search-input-wrap:focus-within {
        border-color: rgba(66,198,165,.4);
        box-shadow: 0 12px 32px rgba(41,92,74,.08), 0 0 0 4px rgba(66,198,165,.08);
    }


.sa-search-input-icon {
    width: 21px;
    height: 21px;
    display: flex;
    color: #42b997;
}


    .sa-search-input-icon svg {
        width: 100%;
        height: 100%;
    }


.sa-search-input-wrap input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 12px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #29332f;
    font-size: 13px;
}


    .sa-search-input-wrap input::placeholder {
        color: #a4aca8;
    }


.sa-search-clear {
    width: 28px;
    height: 28px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: #edf4f1;
    color: #7e8984;
}


    .sa-search-clear.visible {
        display: flex;
    }


    .sa-search-clear svg {
        width: 14px;
        height: 14px;
    }


/* WELCOME */

.sa-search-welcome {
    padding: 38px 20px 28px;
    text-align: center;
}


.sa-search-welcome-icon {
    width: 66px;
    height: 66px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    background: linear-gradient( 145deg, rgba(66,198,165,.18), rgba(66,198,165,.06) );
    color: #42b997;
}


    .sa-search-welcome-icon svg {
        width: 29px;
        height: 29px;
    }


.sa-search-welcome h2 {
    margin: 17px 0 7px;
    color: #27302c;
    font-size: 18px;
    font-weight: 800;
}


.sa-search-welcome p {
    max-width: 290px;
    margin: auto;
    color: #929c97;
    font-size: 11px;
    line-height: 1.65;
}


/* SECTION */

.sa-search-section {
    margin-top: 8px;
}


.sa-search-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    color: #38423e;
    font-size: 12px;
    font-weight: 750;
}


    .sa-search-section-title button {
        border: 0;
        padding: 0;
        background: transparent;
        color: #42b997;
        font-size: 10px;
    }


/* TAGS */

.sa-search-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}


    .sa-search-tags button {
        height: 35px;
        padding: 0 14px;
        border: 1px solid #e3eee9;
        border-radius: 12px;
        background: rgba(255,255,255,.9);
        color: #54615b;
        font-size: 10px;
        font-weight: 600;
        box-shadow: 0 4px 12px rgba(40,80,65,.04);
        transition: .18s ease;
    }


        .sa-search-tags button:active {
            transform: scale(.95);
            background: #edf9f5;
            color: #42ad91;
        }


/* HISTORY */

.sa-search-history {
    display: flex;
    flex-direction: column;
    border-radius: 17px;
    overflow: hidden;
    background: rgba(255,255,255,.78);
    box-shadow: 0 6px 20px rgba(40,80,65,.04);
}


.sa-history-item {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 13px;
    border-bottom: 1px solid #eef2f0;
}


    .sa-history-item:last-child {
        border-bottom: 0;
    }


.sa-history-icon {
    width: 29px;
    height: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #f0f7f4;
    color: #87938e;
}


    .sa-history-icon svg {
        width: 14px;
        height: 14px;
    }


.sa-history-text {
    flex: 1;
    color: #59645f;
    font-size: 11px;
}


.sa-history-arrow {
    color: #a3aca8;
}


/* LOADING */

.sa-search-loading {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 35px 0;
    color: #8c9691;
    font-size: 10px;
}


.sa-search-spinner {
    width: 17px;
    height: 17px;
    border: 2px solid #dce9e4;
    border-top-color: #42b997;
    border-radius: 50%;
    animation: saSearchSpin .7s linear infinite;
}


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


/* RESULTS */

.sa-search-results {
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding-top: 20px;
}


.sa-search-result {
    position: relative;
    display: flex;
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(230,237,234,.8);
    border-radius: 19px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 8px 24px rgba(36,78,64,.055);
    transition: transform .18s ease, box-shadow .18s ease;
}


    .sa-search-result:active {
        transform: scale(.985);
    }


.sa-search-result-image {
    width: 78px;
    height: 78px;
    flex: 0 0 78px;
    overflow: hidden;
    border-radius: 15px;
    background: #edf3f0;
}


    .sa-search-result-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


.sa-search-result-content {
    min-width: 0;
    flex: 1;
    padding: 2px 0;
}


.sa-search-result-title {
    margin: 0 0 8px;
    color: #29322e;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


.sa-search-result-description {
    margin-bottom: 9px;
    color: #929b97;
    font-size: 9px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


.sa-search-result-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #9aa39f;
    font-size: 8px;
}


    .sa-search-result-meta span {
        display: flex;
        align-items: center;
        gap: 4px;
    }


    .sa-search-result-meta svg {
        width: 12px;
        height: 12px;
        color: #42b997;
    }


.sa-search-result-arrow {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #f1f7f4;
    color: #7c8983;
}


    .sa-search-result-arrow svg {
        width: 13px;
        height: 13px;
    }


/* EMPTY */

.sa-search-empty {
    display: none;
    flex-direction: column;
    align-items: center;
    padding: 70px 25px;
    text-align: center;
}


.sa-search-empty-icon {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 23px;
    background: rgba(66,198,165,.09);
    color: #42b997;
}


    .sa-search-empty-icon svg {
        width: 29px;
        height: 29px;
    }


.sa-search-empty h3 {
    margin: 16px 0 6px;
    color: #343d39;
    font-size: 15px;
}


.sa-search-empty p {
    max-width: 270px;
    margin: 0;
    color: #9aa39f;
    font-size: 10px;
    line-height: 1.6;
}
.sa-search-group-list {
    overflow: hidden;
    border: 1px solid rgba(229,236,233,.9);
    border-radius: 18px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 8px 25px rgba(35,75,62,.045);
}

.sa-search-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.sa-search-group-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sa-search-group-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
}

    .sa-search-group-icon svg {
        width: 17px;
        height: 17px;
    }

    .sa-search-group-icon.category {
        background: rgba(66,198,165,.11);
        color: #42b997;
    }

    .sa-search-group-icon.discussion {
        background: rgba(112,91,218,.10);
        color: #7561d8;
    }

    .sa-search-group-icon.question {
        background: rgba(71,137,220,.10);
        color: #4d8bd8;
    }

.sa-search-group-title > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sa-search-group-title strong {
    color: #303936;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
}

.sa-search-group-title span {
    color: #9aa39f;
    font-size: 8px;
    font-weight: 500;
}
.sa-search-item {
    position: relative;
    min-height: 68px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    background: #fff;
    transition: background .18s ease, transform .18s ease;
}


    .sa-search-item + .sa-search-item {
        border-top: 1px solid #edf1ef;
    }


    .sa-search-item:active {
        background: #f7fbf9;
    }


/* =========================================
   IMAGE
========================================= */

.sa-search-item-image {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    overflow: hidden;
    border-radius: 13px;
    background: #edf3f0;
}


    .sa-search-item-image img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }


/* =========================================
   ICON
========================================= */

.sa-search-item-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
}


    .sa-search-item-icon svg {
        width: 21px;
        height: 21px;
    }


    .sa-search-item-icon.category {
        background: rgba(66,198,165,.09);
        color: #42b997;
    }


    .sa-search-item-icon.discussion {
        background: rgba(112,91,218,.08);
        color: #7561d8;
    }


    .sa-search-item-icon.question {
        background: rgba(71,137,220,.08);
        color: #4d8bd8;
    }


/* =========================================
   CONTENT
========================================= */

.sa-search-item-content {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-right: 25px;
}


    .sa-search-item-content strong {
        color: #303936;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }


    .sa-search-item-content span {
        color: #a0a8a4;
        font-size: 8px;
        font-weight: 500;
    }


/* =========================================
   ARROW
========================================= */

.sa-search-item-arrow {
    width: 27px;
    height: 27px;
    position: absolute;
    right: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #f3f7f5;
    color: #9aa49f;
}


    .sa-search-item-arrow svg {
        width: 14px;
        height: 14px;
    }

     
/* =========================================================
   SEYDA AKADEMİ
   PROFİL SAYFASI
========================================================= */
.sa-profile-page {
    width: 100%;
    min-height: 100%;
    background: #f7faf9;
    color: #303936;
    box-sizing: border-box;
    overflow-x: hidden;
}


/* =========================================================
   PROFİL HERO
========================================================= */

.sa-profile-hero {
    position: relative;
    width: 100%;
    padding: 30px 20px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    background: radial-gradient( circle at 50% -20%, rgba(66,198,165,.20), transparent 55% ), #ffffff;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    box-shadow: 0 8px 30px rgba(35,75,62,.045);
}


/* =========================================================
   AVATAR
========================================================= */

.sa-profile-avatar {
    position: relative;
    width: 88px;
    height: 88px;
    margin-bottom: 13px;
}


    .sa-profile-avatar img {
        width: 88px;
        height: 88px;
        display: block;
        object-fit: cover;
        border-radius: 50%;
        border: 4px solid #ffffff;
        background: #edf4f1;
        box-shadow: 0 8px 25px rgba(42,99,82,.14);
    }


.sa-profile-avatar-edit {
    position: absolute;
    right: -1px;
    bottom: 1px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 3px solid #ffffff;
    border-radius: 50%;
    background: #42C6A5;
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(66,198,165,.30);
    -webkit-tap-highlight-color: transparent;
    transition: transform .2s ease, box-shadow .2s ease;
}


    .sa-profile-avatar-edit:active {
        transform: scale(.91);
        box-shadow: 0 2px 7px rgba(66,198,165,.25);
    }


    .sa-profile-avatar-edit svg {
        width: 13px;
        height: 13px;
    }


/* =========================================================
   NAME
========================================================= */

.sa-profile-name {
    max-width: 90%;
    overflow: hidden;
    color: #29322f;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
}


.sa-profile-email {
    max-width: 90%;
    margin-top: 4px;
    overflow: hidden;
    color: #9aa49f;
    font-size: 9px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
}


/* =========================================================
   STATS
========================================================= */

.sa-profile-stats {
    width: min(100%, 330px);
    min-height: 65px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 22px;
    padding: 7px 5px;
    box-sizing: border-box;
    border: 1px solid #e9efec;
    border-radius: 17px;
    background: rgba(250,252,251,.9);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}


.sa-profile-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}


    .sa-profile-stat strong {
        color: #303936;
        font-size: 14px;
        font-weight: 800;
        line-height: 1;
    }


    .sa-profile-stat span {
        color: #99a39e;
        font-size: 8px;
        font-weight: 600;
        line-height: 1;
    }


.sa-profile-stat-divider {
    width: 1px;
    height: 25px;
    background: #e5ece9;
}


/* =========================================================
   CONTENT
========================================================= */

.sa-profile-content {
    width: 100%;
    padding: 21px 15px 35px;
    box-sizing: border-box;
}


/* =========================================================
   SECTION TITLE
========================================================= */

.sa-profile-section-title {
    margin: 4px 5px 9px;
    color: #89938e;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .55px;
}


/* =========================================================
   MENU CONTAINER
========================================================= */

.sa-profile-menu {
    width: 100%;
    overflow: hidden;
    margin-bottom: 21px;
    border: 1px solid #e7eeeb;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 7px 22px rgba(35,75,62,.035);
}


/* =========================================================
   MENU ITEM
========================================================= */

.sa-profile-menu-item {
    position: relative;
    width: 100%;
    min-height: 70px;
    display: flex;
    align-items: center;
    padding: 10px 12px;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .18s ease, transform .18s ease;
}


    .sa-profile-menu-item + .sa-profile-menu-item {
        border-top: 1px solid #edf1ef;
    }


    .sa-profile-menu-item:active {
        background: #f8faf9;
    }


/* =========================================================
   MENU ICON
========================================================= */

.sa-profile-menu-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 11px;
    border-radius: 13px;
}


    .sa-profile-menu-icon svg {
        width: 20px;
        height: 20px;
    }


    /* GREEN */

    .sa-profile-menu-icon.green {
        background: rgba(66,198,165,.11);
        color: #42b997;
    }


    /* BLUE */

    .sa-profile-menu-icon.blue {
        background: rgba(72,139,219,.10);
        color: #4c8bd7;
    }


    /* PINK */

    .sa-profile-menu-icon.pink {
        background: rgba(225,91,126,.09);
        color: #d96487;
    }


    /* ORANGE */

    .sa-profile-menu-icon.orange {
        background: rgba(239,158,67,.10);
        color: #df963f;
    }


    /* GRAY */

    .sa-profile-menu-icon.gray {
        background: rgba(104,116,111,.09);
        color: #7c8782;
    }


    /* RED */

    .sa-profile-menu-icon.red {
        background: rgba(221,81,81,.09);
        color: #d85c5c;
    }


/* =========================================================
   MENU CONTENT
========================================================= */

.sa-profile-menu-content {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}


    .sa-profile-menu-content strong {
        overflow: hidden;
        color: #353e3a;
        font-size: 10px;
        font-weight: 750;
        line-height: 1.3;
        white-space: nowrap;
        text-overflow: ellipsis;
    }


    .sa-profile-menu-content span {
        overflow: hidden;
        color: #a0a9a5;
        font-size: 8px;
        font-weight: 500;
        line-height: 1.3;
        white-space: nowrap;
        text-overflow: ellipsis;
    }


/* =========================================================
   ARROW
========================================================= */

.sa-profile-menu-arrow {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 7px;
    border-radius: 9px;
    background: #f4f7f6;
    color: #a2aaa6;
}


    .sa-profile-menu-arrow svg {
        width: 13px;
        height: 13px;
    }


/* =========================================================
   LOGOUT
========================================================= */

.sa-profile-menu-item.logout {
    min-height: 68px;
}


    .sa-profile-menu-item.logout .sa-profile-menu-content strong {
        color: #d35d5d;
    }


    .sa-profile-menu-item.logout .sa-profile-menu-content span {
        color: #b1aaa9;
    }


    .sa-profile-menu-item.logout:active {
        background: #fff8f8;
    }


/* =========================================================
   VERSION
========================================================= */

.sa-profile-version {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 2px;
    color: #b0b8b4;
    font-size: 8px;
    font-weight: 600;
    line-height: 1.6;
    text-align: center;
}


    .sa-profile-version span {
        color: #c2c9c6;
        font-size: 7px;
        font-weight: 500;
    }


/* =========================================================
   HOVER
========================================================= */

@media (hover: hover) {

    .sa-profile-menu-item:hover {
        background: #fbfcfc;
    }


        .sa-profile-menu-item:hover
        .sa-profile-menu-arrow {
            background: #eef7f4;
            color: #42b997;
        }


    .sa-profile-avatar-edit:hover {
        transform: scale(1.06);
    }
}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 360px) {

    .sa-profile-hero {
        padding-top: 24px;
    }


    .sa-profile-avatar,
    .sa-profile-avatar img {
        width: 78px;
        height: 78px;
    }


    .sa-profile-name {
        font-size: 16px;
    }


    .sa-profile-stats {
        margin-top: 18px;
    }


    .sa-profile-content {
        padding-left: 12px;
        padding-right: 12px;
    }


    .sa-profile-menu-item {
        min-height: 65px;
        padding-left: 9px;
        padding-right: 9px;
    }


    .sa-profile-menu-icon {
        width: 39px;
        height: 39px;
        flex-basis: 39px;
        margin-right: 9px;
    }


        .sa-profile-menu-icon svg {
            width: 18px;
            height: 18px;
        }
}


/* =========================================================
   LARGE PHONES
========================================================= */

@media (min-width: 430px) {

    .sa-profile-content {
        padding-left: 18px;
        padding-right: 18px;
    }


    .sa-profile-hero {
        padding-top: 34px;
    }


    .sa-profile-menu-item {
        min-height: 73px;
    }
}



 
.sa-profile-edit-sheet {
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #f7faf9;
    transform: translateY(100%);
    visibility: hidden;
    transition: transform .38s cubic-bezier(.22,.8,.25,1), visibility 0s linear .38s;
    overflow: hidden;
}


.sa-profile-edit-sheet.active {
    transform: translateY(0);
    visibility: visible;
    transition: transform .38s cubic-bezier(.22,.8,.25,1), visibility 0s linear 0s;
}


/* =========================================================
   HEADER
========================================================= */

.sa-profile-edit-header {
    width: 100%;
    min-height: 67px;
    flex: 0 0 67px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    box-sizing: border-box;
    background: #ffffff;
    border-bottom: 1px solid #e9efec;
    box-shadow: 0 4px 18px rgba(35,75,62,.035);
}


.sa-profile-edit-back {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: #f1f6f4;
    color: #59635f;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}


    .sa-profile-edit-back:active {
        transform: scale(.93);
    }


    .sa-profile-edit-back svg {
        width: 19px;
        height: 19px;
    }


/* =========================================================
   TITLE
========================================================= */

.sa-profile-edit-title {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-left: 11px;
}


    .sa-profile-edit-title strong {
        color: #303936;
        font-size: 13px;
        font-weight: 800;
        line-height: 1.3;
    }


    .sa-profile-edit-title span {
        margin-top: 2px;
        color: #9ca6a1;
        font-size: 8px;
        font-weight: 500;
    }


/* =========================================================
   SAVE
========================================================= */

.sa-profile-edit-save {
    height: 35px;
    padding: 0 13px;
    border: 0;
    border-radius: 11px;
    background: #42C6A5;
    color: #ffffff;
    font-family: inherit;
    font-size: 9px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 5px 14px rgba(66,198,165,.20);
    -webkit-tap-highlight-color: transparent;
}


    .sa-profile-edit-save:active {
        transform: scale(.95);
    }


/* =========================================================
   CONTENT
========================================================= */

.sa-profile-edit-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 25px 16px 45px;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}


/* =========================================================
   AVATAR
========================================================= */

.sa-profile-edit-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 27px;
}


.sa-profile-edit-avatar-image {
    position: relative;
    width: 94px;
    height: 94px;
}


    .sa-profile-edit-avatar-image img {
        width: 94px;
        height: 94px;
        display: block;
        object-fit: cover;
        border-radius: 50%;
        border: 4px solid #ffffff;
        background: #edf3f0;
        box-shadow: 0 8px 28px rgba(38,91,75,.13);
    }


.sa-profile-change-photo {
    position: absolute;
    right: 0;
    bottom: 1px;
    width: 31px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 3px solid #ffffff;
    border-radius: 50%;
    background: #42C6A5;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(66,198,165,.25);
    cursor: pointer;
}


    .sa-profile-change-photo svg {
        width: 14px;
        height: 14px;
    }


.sa-profile-edit-avatar > span {
    margin-top: 9px;
    color: #8f9a95;
    font-size: 8px;
    font-weight: 600;
}


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

.sa-profile-form {
    width: 100%;
}


.sa-profile-form-group {
    margin-bottom: 17px;
}


    .sa-profile-form-group label {
        display: block;
        margin: 0 3px 7px;
        color: #707b76;
        font-size: 9px;
        font-weight: 800;
    }


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

.sa-profile-input {
    width: 100%;
    height: 52px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    box-sizing: border-box;
    border: 1px solid #e4ebe8;
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 5px 18px rgba(35,75,62,.025);
    transition: border-color .2s ease, box-shadow .2s ease;
}


    .sa-profile-input:focus-within {
        border-color: rgba(66,198,165,.5);
        box-shadow: 0 5px 20px rgba(66,198,165,.06), 0 0 0 3px rgba(66,198,165,.06);
    }


    .sa-profile-input svg {
        width: 17px;
        height: 17px;
        flex: 0 0 17px;
        margin-right: 10px;
        color: #a1aaa6;
    }


    .sa-profile-input input {
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        outline: 0;
        background: transparent;
        color: #343d39;
        font-family: inherit;
        font-size: 10px;
        font-weight: 600;
    }


        .sa-profile-input input::placeholder {
            color: #aeb6b2;
            font-weight: 500;
        }


/* =========================================================
   TEXTAREA
========================================================= */

.sa-profile-textarea {
    width: 100%;
    padding: 13px 14px;
    box-sizing: border-box;
    border: 1px solid #e4ebe8;
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 5px 18px rgba(35,75,62,.025);
    transition: border-color .2s ease, box-shadow .2s ease;
}


    .sa-profile-textarea:focus-within {
        border-color: rgba(66,198,165,.5);
        box-shadow: 0 5px 20px rgba(66,198,165,.06), 0 0 0 3px rgba(66,198,165,.06);
    }


    .sa-profile-textarea textarea {
        width: 100%;
        min-height: 90px;
        display: block;
        padding: 0;
        border: 0;
        outline: 0;
        resize: none;
        background: transparent;
        color: #343d39;
        font-family: inherit;
        font-size: 10px;
        font-weight: 500;
        line-height: 1.6;
    }


        .sa-profile-textarea textarea::placeholder {
            color: #aeb6b2;
        }


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 360px) {

    .sa-profile-edit-header {
        padding-left: 12px;
        padding-right: 12px;
    }


    .sa-profile-edit-content {
        padding-left: 13px;
        padding-right: 13px;
    }
}
 
.sa-profile-questions-sheet {
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #f7faf9;
    transform: translateY(100%);
    visibility: hidden;
    overflow: hidden;
    transition: transform .38s cubic-bezier(.22,.8,.25,1), visibility 0s linear .38s;
}


.sa-profile-questions-sheet.active {
    transform: translateY(0);
    visibility: visible;
    transition: transform .38s cubic-bezier(.22,.8,.25,1), visibility 0s linear 0s;
}


/* =========================================================
   HEADER
========================================================= */

.sa-profile-questions-header {
    width: 100%;
    min-height: 67px;
    flex: 0 0 67px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    box-sizing: border-box;
    background: #ffffff;
    border-bottom: 1px solid #e8efec;
    box-shadow: 0 4px 18px rgba(35,75,62,.035);
}


.sa-profile-questions-back {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: #f1f6f4;
    color: #59635f;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}


    .sa-profile-questions-back:active {
        transform: scale(.93);
    }


    .sa-profile-questions-back svg {
        width: 19px;
        height: 19px;
    }


/* =========================================================
   TITLE
========================================================= */

.sa-profile-questions-title {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-left: 11px;
}


    .sa-profile-questions-title strong {
        color: #303936;
        font-size: 13px;
        font-weight: 800;
        line-height: 1.3;
    }


    .sa-profile-questions-title span {
        margin-top: 2px;
        color: #9ca6a1;
        font-size: 8px;
        font-weight: 500;
    }


/* =========================================================
   COUNT
========================================================= */

.sa-profile-questions-count {
    min-width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    box-sizing: border-box;
    border-radius: 10px;
    background: rgba(66,198,165,.10);
    color: #42b997;
    font-size: 9px;
    font-weight: 800;
}


/* =========================================================
   CONTENT
========================================================= */

.sa-profile-questions-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 17px 15px 35px;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}


/* =========================================================
   LIST
========================================================= */

.sa-profile-questions-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}


/* =========================================================
   QUESTION CARD
========================================================= */

.sa-profile-question-card {
    position: relative;
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
    border: 1px solid #e5ece9;
    border-radius: 17px;
    background: #ffffff;
    box-shadow: 0 6px 20px rgba(35,75,62,.035);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .18s ease, background .18s ease;
}


    .sa-profile-question-card:active {
        transform: scale(.985);
        background: #fbfcfc;
    }


/* =========================================================
   CARD TOP
========================================================= */

.sa-profile-question-top {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}


.sa-profile-question-status {
    display: inline-flex;
    align-items: center;
    height: 23px;
    padding: 0 8px;
    border-radius: 8px;
    font-size: 7px;
    font-weight: 800;
}


    .sa-profile-question-status.answered {
        background: rgba(66,198,165,.10);
        color: #42ae91;
    }


    .sa-profile-question-status.waiting {
        background: rgba(239,158,67,.10);
        color: #d9943e;
    }


.sa-profile-question-date {
    margin-left: auto;
    color: #a2aaa6;
    font-size: 7px;
    font-weight: 500;
}


/* =========================================================
   QUESTION TITLE
========================================================= */

.sa-profile-question-title {
    color: #303936;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.5;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}


/* =========================================================
   CARD BOTTOM
========================================================= */

.sa-profile-question-bottom {
    display: flex;
    align-items: center;
    margin-top: 13px;
    padding-top: 11px;
    border-top: 1px solid #edf1ef;
}


.sa-profile-question-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #9da7a2;
    font-size: 7px;
    font-weight: 600;
}


    .sa-profile-question-meta + .sa-profile-question-meta {
        margin-left: 13px;
    }


    .sa-profile-question-meta svg {
        width: 13px;
        height: 13px;
    }


.sa-profile-question-arrow {
    width: 25px;
    height: 25px;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #f3f7f5;
    color: #9da7a2;
}


    .sa-profile-question-arrow svg {
        width: 13px;
        height: 13px;
    }


/* =========================================================
   LOADING
========================================================= */

.sa-profile-questions-loading {
    width: 100%;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


.sa-profile-questions-spinner {
    width: 28px;
    height: 28px;
    border: 2.5px solid rgba(66,198,165,.15);
    border-top-color: #42C6A5;
    border-radius: 50%;
    animation: profileQuestionSpin .75s linear infinite;
}


@keyframes profileQuestionSpin {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


.sa-profile-questions-loading span {
    margin-top: 10px;
    color: #9ca6a1;
    font-size: 8px;
    font-weight: 600;
}


/* =========================================================
   EMPTY
========================================================= */

.sa-profile-questions-empty {
    width: 100%;
    min-height: 300px;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    box-sizing: border-box;
    text-align: center;
}


.sa-profile-questions-empty-icon {
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    border-radius: 21px;
    background: rgba(66,198,165,.09);
    color: #42b997;
}


    .sa-profile-questions-empty-icon svg {
        width: 28px;
        height: 28px;
    }


.sa-profile-questions-empty strong {
    color: #4c5652;
    font-size: 12px;
    font-weight: 800;
}


.sa-profile-questions-empty span {
    max-width: 230px;
    margin-top: 7px;
    color: #a0aaa5;
    font-size: 8px;
    font-weight: 500;
    line-height: 1.6;
}


/* =========================================================
   SMALL DEVICES
========================================================= */

@media (max-width: 360px) {

    .sa-profile-questions-content {
        padding-left: 12px;
        padding-right: 12px;
    }


    .sa-profile-question-card {
        padding: 13px;
    }
}

.sa-profile-question-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.sa-profile-question-meta svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.sa-profile-question-meta:first-child svg {
    color: #ef6f86;
}

.sa-profile-question-meta:last-child svg {
    color: #8f9b96;
}
 
/* =========================================================
   CHAT PAGE
========================================================= */
.sa-chat-page {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: #f7faf9;
    overflow: hidden;
}


/* =========================================================
   HEADER
========================================================= */

.sa-chat-header {
    position: relative;
    height: 64px;
    min-height: 64px;
    flex: 0 0 64px;
    display: flex;
    align-items: center;
    padding: 0 11px;
    box-sizing: border-box;
    background: #ffffff;
    border-bottom: 1px solid #e8efec;
    box-shadow: 0 3px 18px rgba(35,75,62,.035);
    z-index: 20;
}


/* =========================================================
   BACK
========================================================= */

.sa-chat-back {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: #f2f6f4;
    color: #68736e;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .16s ease;
}


    .sa-chat-back svg {
        width: 19px;
        height: 19px;
    }


    .sa-chat-back:active {
        transform: scale(.91);
    }


/* =========================================================
   TITLE
========================================================= */

.sa-chat-header-title {
    min-width: 0;
    flex: 1;
    margin-left: 11px;
}


    .sa-chat-header-title strong {
        display: block;
        overflow: hidden;
        color: #303936;
        font-size: 13px;
        font-weight: 800;
        line-height: 1.3;
        white-space: nowrap;
        text-overflow: ellipsis;
    }


/* =========================================================
   HEADER ACTIONS
========================================================= */

.sa-chat-header-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: 5px;
}


/* =========================================================
   VIEW COUNT
========================================================= */

.sa-chat-header-stat {
    height: 34px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 5px;
    color: #929d98;
    font-size: 8px;
    font-weight: 700;
}


    .sa-chat-header-stat svg {
        width: 16px;
        height: 16px;
    }


/* =========================================================
   LIKE
========================================================= */

.sa-chat-header-action {
    width: auto;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 0 5px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #87928d;
    font-family: inherit;
    font-size: 8px;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .16s ease, color .2s ease;
}


    .sa-chat-header-action svg {
        width: 17px;
        height: 17px;
        transition: transform .25s cubic-bezier(.34,1.56,.64,1);
    }


    .sa-chat-header-action.active {
        color: #ef6f86;
    }


        .sa-chat-header-action.active svg {
            fill: currentColor;
        }


    .sa-chat-header-action:active {
        transform: scale(.91);
    }


/* =========================================================
   SHARE
========================================================= */

.sa-chat-header-share {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #87928d;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .16s ease;
}


    .sa-chat-header-share svg {
        width: 18px;
        height: 18px;
    }


    .sa-chat-header-share:active {
        transform: scale(.91);
    }


/* =========================================================
   MESSAGES
========================================================= */

.sa-chat-messages {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 18px 13px 15px;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}


    .sa-chat-messages::-webkit-scrollbar {
        display: none;
    }


/* =========================================================
   DATE
========================================================= */

.sa-chat-date {
    width: max-content;
    margin: 2px auto 17px;
    padding: 5px 9px;
    border-radius: 8px;
    background: #edf3f0;
    color: #929d98;
    font-size: 7px;
    font-weight: 700;
}


/* =========================================================
   MESSAGE
========================================================= */

.sa-chat-message {
    width: 100%;
    display: flex;
    margin-bottom: 9px;
}


    .sa-chat-message.incoming {
        justify-content: flex-start;
    }


    .sa-chat-message.outgoing {
        justify-content: flex-end;
    }


/* =========================================================
   BUBBLE
========================================================= */

.sa-chat-bubble {
    position: relative;
    max-width: 78%;
    padding: 10px 11px 19px;
    border-radius: 15px;
    box-sizing: border-box;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.5;
    word-break: break-word;
}


/* GELEN */

.sa-chat-message.incoming .sa-chat-bubble {
    border-bottom-left-radius: 5px;
    background: #ffffff;
    border: 1px solid #e8eeeb;
    color: #404945;
    box-shadow: 0 4px 14px rgba(35,75,62,.025);
}


/* GİDEN */

.sa-chat-message.outgoing .sa-chat-bubble {
    border-bottom-right-radius: 5px;
    background: #42c6a5;
    color: #ffffff;
    box-shadow: 0 5px 14px rgba(66,198,165,.16);
}


/* =========================================================
   TIME
========================================================= */

.sa-chat-time {
    position: absolute;
    right: 9px;
    bottom: 5px;
    font-size: 6px;
    font-weight: 600;
}


.sa-chat-message.incoming .sa-chat-time {
    color: #a1aaa6;
}


.sa-chat-message.outgoing .sa-chat-time {
    color: rgba(255,255,255,.72);
}


/* =========================================================
   COMPOSER
========================================================= */

.sa-chat-composer {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 7px;
    padding: 9px 11px;
    padding-bottom: calc(9px + env(safe-area-inset-bottom));
    background: #ffffff;
    border-top: 1px solid #e8efec;
    box-shadow: 0 -4px 20px rgba(35,75,62,.035);
    z-index: 20;
}


/* =========================================================
   EMOJI
========================================================= */

.sa-chat-emoji {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: #f2f6f4;
    color: #7f8985;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}


    .sa-chat-emoji svg {
        width: 18px;
        height: 18px;
    }


    .sa-chat-emoji:active {
        transform: scale(.92);
    }


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

.sa-chat-composer textarea {
    flex: 1;
    min-width: 0;
    min-height: 38px;
    max-height: 105px;
    resize: none;
    padding: 10px 12px;
    box-sizing: border-box;
    border: 1px solid #e4ebe8;
    border-radius: 13px;
    outline: none;
    background: #f7faf9;
    color: #3e4844;
    font-family: inherit;
    font-size: 10px;
    font-weight: 500;
    line-height: 18px;
    transition: border-color .2s ease, background .2s ease;
}


    .sa-chat-composer textarea::placeholder {
        color: #a4ada9;
    }


    .sa-chat-composer textarea:focus {
        border-color: rgba(66,198,165,.45);
        background: #ffffff;
    }


/* =========================================================
   SEND
========================================================= */

.sa-chat-send {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: #42c6a5;
    color: #ffffff;
    box-shadow: 0 5px 14px rgba(66,198,165,.22);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .16s ease, opacity .16s ease;
}


    .sa-chat-send svg {
        width: 17px;
        height: 17px;
    }


    .sa-chat-send:active {
        transform: scale(.91);
    }


    .sa-chat-send.disabled {
        opacity: .45;
        pointer-events: none;
    }


/* =========================================================
   SMALL DEVICES
========================================================= */

@media (max-width: 360px) {

    .sa-chat-header {
        padding-left: 9px;
        padding-right: 9px;
    }

    .sa-chat-header-actions {
        gap: 0;
    }

    .sa-chat-header-stat {
        padding: 0 3px;
    }

    .sa-chat-header-action {
        padding: 0 3px;
    }

    .sa-chat-messages {
        padding-left: 10px;
        padding-right: 10px;
    }

    .sa-chat-bubble {
        max-width: 82%;
    }
}
.profilebackbutton{
    position:absolute;
    top:15px;
    left:15px;
    z-index:99;
}
.sa-profile-favorite-card {
    position: relative;
    display: flex;
    align-items: stretch;
    min-height: 94px;
    background: #ffffff;
    border: 1px solid #e7efec;
    border-radius: 17px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(35,75,62,.045);
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}

    .sa-profile-favorite-card:active {
        transform: scale(.985);
    }
/* IMAGE */

.sa-profile-favorite-image {
    width: 92px;
    min-width: 92px;
    background: #eef5f2;
    overflow: hidden;
}

    .sa-profile-favorite-image img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }
/* NO IMAGE */

.sa-profile-favorite-no-image {
    width: 92px;
    min-width: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient( 145deg, #eef8f4, #e4f2ed );
    color: #42C6A5;
}

    .sa-profile-favorite-no-image svg {
        width: 27px;
        height: 27px;
    }
/* BODY */

.sa-profile-favorite-body {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 12px 12px 11px 13px;
}
/* TOP */

.sa-profile-favorite-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 7px;
}

.sa-profile-favorite-type {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 7px;
    background: #eaf8f4;
    color: #35a98e;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

    .sa-profile-favorite-type.question {
        background: #f1f4f3;
        color: #697570;
    }

.sa-profile-favorite-date {
    flex-shrink: 0;
    color: #9aa49f;
    font-size: 9px;
    font-weight: 500;
}
/* TITLE */

.sa-profile-favorite-title {
    color: #303936;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
/* BOTTOM */

.sa-profile-favorite-bottom {
    display: flex;
    align-items: center;
    margin-top: auto;
    padding-top: 8px;
}

.sa-profile-favorite-arrow { 
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px; 
    color: #78847f;
}

    .sa-profile-favorite-arrow svg {
        width: 15px;
        height: 15px;
    }
.sa-profile-favorite-remove {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 7px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: #fff1f2;
    color: #e46b76;
    cursor: pointer;
    transition: .2s ease;
}

    .sa-profile-favorite-remove svg {
        width: 15px;
        height: 15px;
    }

    .sa-profile-favorite-remove:active {
        transform: scale(.9);
        background: #ffe2e5;
    } 
/* ==========================================
   SORU SOR
========================================== */
.sa-ask-page {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: #f7faf9;
}


/* HEADER */

.sa-ask-header {
    height: 64px;
    min-height: 64px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: #ffffff;
    border-bottom: 1px solid #e7efec;
    box-shadow: 0 3px 18px rgba(35,75,62,.04);
    z-index: 10;
}


.sa-ask-back {
    width: 39px;
    height: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: #f1f6f4;
    color: #68736e;
}

    .sa-ask-back svg {
        width: 20px;
        height: 20px;
    }


.sa-ask-header-content {
    margin-left: 11px;
}

    .sa-ask-header-content strong {
        display: block;
        color: #303936;
        font-size: 14px;
        font-weight: 800;
    }

    .sa-ask-header-content span {
        display: block;
        margin-top: 2px;
        color: #8a9691;
        font-size: 10px;
    }


/* CONTENT */

.sa-ask-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px 14px 30px;
    -webkit-overflow-scrolling: touch;
}


/* SECTION */

.sa-ask-section {
    margin-bottom: 20px;
}


.sa-ask-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}


.sa-ask-label {
    display: block;
    margin-bottom: 8px;
    color: #39433f;
    font-size: 11px;
    font-weight: 800;
}

.sa-ask-label-row .sa-ask-label {
    margin-bottom: 0;
}

.sa-ask-label small {
    margin-left: 4px;
    color: #a0aaa6;
    font-size: 9px;
    font-weight: 500;
}


.sa-ask-label-row > span {
    color: #9aa49f;
    font-size: 9px;
}


/* INPUT */

.sa-ask-input-wrap {
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    background: #ffffff;
    border: 1px solid #e1ebe7;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(35,75,62,.025);
}


    .sa-ask-input-wrap svg {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        margin-right: 10px;
        color: #42C6A5;
    }


    .sa-ask-input-wrap input {
        width: 100%;
        border: 0;
        outline: 0;
        background: transparent;
        color: #303936;
        font-family: inherit;
        font-size: 13px;
        font-weight: 600;
    }


        .sa-ask-input-wrap input::placeholder,
        .sa-ask-textarea-wrap textarea::placeholder {
            color: #a2aca8;
            font-weight: 500;
        }


/* CATEGORY */

.sa-ask-category {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 12px;
    border: 1px solid #e1ebe7;
    border-radius: 15px;
    background: #ffffff;
    text-align: left;
    box-shadow: 0 4px 15px rgba(35,75,62,.025);
}


.sa-ask-category-left {
    display: flex;
    align-items: center;
    min-width: 0;
}


.sa-ask-category-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    border-radius: 11px;
    background: #e9f8f3;
    color: #42C6A5;
}

    .sa-ask-category-icon svg {
        width: 19px;
        height: 19px;
    }


.sa-ask-category-left strong {
    display: block;
    color: #303936;
    font-size: 12px;
    font-weight: 750;
}

.sa-ask-category-left span {
    display: block;
    margin-top: 2px;
    color: #9aa49f;
    font-size: 9px;
}


.sa-ask-category-arrow {
    width: 17px;
    height: 17px;
    color: #9ba6a1;
}


/* TEXTAREA */

.sa-ask-textarea-wrap {
    padding: 12px;
    background: #ffffff;
    border: 1px solid #e1ebe7;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(35,75,62,.025);
}


    .sa-ask-textarea-wrap textarea {
        width: 100%;
        min-height: 145px;
        resize: none;
        border: 0;
        outline: 0;
        background: transparent;
        color: #303936;
        font-family: inherit;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.6;
    }


/* ATTACHMENTS */

.sa-ask-attachments {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}


.sa-ask-attachment {
    min-height: 105px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border: 1px solid #e1ebe7;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 4px 15px rgba(35,75,62,.025);
}


    .sa-ask-attachment:active {
        transform: scale(.98);
    }


.sa-ask-attachment-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 7px;
    border-radius: 13px;
}


    .sa-ask-attachment-icon svg {
        width: 21px;
        height: 21px;
    }


    .sa-ask-attachment-icon.photo {
        background: #e9f8f3;
        color: #42C6A5;
    }


    .sa-ask-attachment-icon.audio {
        background: #edf2ff;
        color: #637de0;
    }


.sa-ask-attachment strong {
    color: #38423e;
    font-size: 11px;
    font-weight: 800;
}


.sa-ask-attachment span {
    margin-top: 3px;
    color: #9aa49f;
    font-size: 9px;
}


/* PHOTOS */

.sa-ask-photo-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
    margin-top: 10px;
}


.sa-ask-photo {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 12px;
    background: #eaf2ef;
}


    .sa-ask-photo img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }


.sa-ask-photo-remove {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 23px;
    height: 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(20,30,27,.7);
    color: #ffffff;
}

    .sa-ask-photo-remove svg {
        width: 12px;
        height: 12px;
    }


/* AUDIO */

.sa-ask-audio-box {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #dcebe6;
    border-radius: 15px;
    background: #ffffff;
}


.sa-ask-audio-icon {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #e9f8f3;
    color: #42C6A5;
}


    .sa-ask-audio-icon svg {
        width: 19px;
        height: 19px;
    }


.sa-ask-audio-info {
    min-width: 0;
    flex: 1;
}


    .sa-ask-audio-info strong {
        display: block;
        color: #3a4440;
        font-size: 10px;
        font-weight: 800;
    }


    .sa-ask-audio-info span {
        display: block;
        margin-top: 2px;
        color: #99a49f;
        font-size: 9px;
    }


.sa-ask-audio-box audio {
    width: 105px;
    height: 32px;
}


.sa-ask-audio-delete {
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: #fff0f1;
    color: #df6974;
}


    .sa-ask-audio-delete svg {
        width: 15px;
        height: 15px;
    }


/* SUBMIT */

.sa-ask-submit {
    width: 100%;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 0;
    border-radius: 16px;
    background: #42C6A5;
    color: #ffffff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 8px 22px rgba(66,198,165,.22);
}


    .sa-ask-submit:active {
        transform: scale(.985);
    }


    .sa-ask-submit svg {
        width: 18px;
        height: 18px;
    }


/* INFO */

.sa-ask-info {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 12px;
    padding: 0 5px;
}


    .sa-ask-info svg {
        width: 15px;
        height: 15px;
        flex: 0 0 15px;
        color: #98a49f;
    }


    .sa-ask-info span {
        color: #98a49f;
        font-size: 9px;
        line-height: 1.5;
    }




.sa-ask-audio-record-button {
    position: relative;
    overflow: hidden;
    transition: background .25s ease, border-color .25s ease, transform .2s ease;
}


/* ==========================================
   NORMAL MİKROFON
========================================== */

.sa-ask-record-visual {
    position: relative;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 7px;
}


.sa-ask-record-mic {
    position: relative;
    z-index: 3;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #edf2ff;
    color: #637de0;
    transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease;
}

    .sa-ask-record-mic svg {
        width: 21px;
        height: 21px;
    }


/* ==========================================
   SES DALGALARI
========================================== */

.sa-ask-record-waves {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

    .sa-ask-record-waves i {
        display: block;
        width: 3px;
        height: 7px;
        border-radius: 10px;
        background: #ef6674;
    }


/* ==========================================
   KAYIT MODU
========================================== */

.sa-ask-audio-record-button.recording {
    border-color: #ffd9dd;
    background: #fff7f8;
    box-shadow: 0 6px 22px rgba(239,102,116,.10);
}


    .sa-ask-audio-record-button.recording
    .sa-ask-record-mic {
        background: #ef6674;
        color: #ffffff;
        box-shadow: 0 0 0 6px rgba(239,102,116,.10), 0 0 0 12px rgba(239,102,116,.055);
        animation: saRecordingPulse 1.25s ease-in-out infinite;
    }


    .sa-ask-audio-record-button.recording
    .sa-ask-record-waves {
        opacity: 1;
    }


        /* Ses dalgaları */

        .sa-ask-audio-record-button.recording
        .sa-ask-record-waves i:nth-child(1) {
            animation: saWave1 .7s ease-in-out infinite;
        }

        .sa-ask-audio-record-button.recording
        .sa-ask-record-waves i:nth-child(2) {
            animation: saWave2 .6s ease-in-out infinite;
        }

        .sa-ask-audio-record-button.recording
        .sa-ask-record-waves i:nth-child(3) {
            animation: saWave3 .5s ease-in-out infinite;
        }

        .sa-ask-audio-record-button.recording
        .sa-ask-record-waves i:nth-child(4) {
            animation: saWave2 .65s ease-in-out infinite reverse;
        }

        .sa-ask-audio-record-button.recording
        .sa-ask-record-waves i:nth-child(5) {
            animation: saWave1 .8s ease-in-out infinite reverse;
        }


@keyframes saWave1 {
    0%, 100% {
        height: 6px;
    }

    50% {
        height: 17px;
    }
}


@keyframes saWave2 {
    0%, 100% {
        height: 9px;
    }

    50% {
        height: 24px;
    }
}


@keyframes saWave3 {
    0%, 100% {
        height: 8px;
    }

    50% {
        height: 30px;
    }
}


@keyframes saRecordingPulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.07);
    }
}


/* Kayıt yazıları */

.sa-ask-audio-record-button.recording strong {
    color: #df5967;
}

.sa-ask-audio-record-button.recording span {
    color: #e77c87;
}


/* Küçük kırmızı kayıt noktası */

.sa-ask-audio-record-button.recording strong::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 5px;
    vertical-align: 1px;
    border-radius: 50%;
    background: #ef6674;
    animation: saRecordingDot .8s ease-in-out infinite;
}

@keyframes saRecordingDot {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: .25;
    }
}
.sa-category-sheet {
    position: fixed;
    inset: 0;
    z-index: 9999;
    visibility: hidden;
    pointer-events: none;
}

    .sa-category-sheet.active {
        visibility: visible;
        pointer-events: auto;
    }


/* BACKDROP */

.sa-category-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 29, 26, .38);
    opacity: 0;
    transition: opacity .28s ease;
}

.sa-category-sheet.active .sa-category-sheet-backdrop {
    opacity: 1;
}


/* PANEL */

.sa-category-sheet-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    padding: 8px 14px 20px;
    background: #ffffff;
    border-radius: 25px 25px 0 0;
    transform: translateY(100%);
    transition: transform .34s cubic-bezier(.22,.8,.25,1);
    box-shadow: 0 -10px 40px rgba(30,60,50,.12);
}

.sa-category-sheet.active .sa-category-sheet-panel {
    transform: translateY(0);
}


/* HANDLE */

.sa-category-sheet-handle {
    width: 38px;
    height: 4px;
    margin: 2px auto 14px;
    border-radius: 10px;
    background: #dce5e1;
}


/* HEADER */

.sa-category-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

    .sa-category-sheet-header strong {
        display: block;
        color: #303936;
        font-size: 15px;
        font-weight: 800;
    }

    .sa-category-sheet-header span {
        display: block;
        margin-top: 3px;
        color: #99a49f;
        font-size: 10px;
    }


#askCategoryClose {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 11px;
    background: #f2f6f4;
    color: #7d8984;
}

    #askCategoryClose svg {
        width: 16px;
        height: 16px;
    }


/* SEARCH */

.sa-category-search {
    height: 44px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    margin-bottom: 12px;
    border: 1px solid #e1ebe7;
    border-radius: 13px;
    background: #f8fbfa;
}

    .sa-category-search svg {
        width: 17px;
        height: 17px;
        margin-right: 8px;
        color: #8b9892;
    }

    .sa-category-search input {
        width: 100%;
        border: 0;
        height:44px;
        outline: 0;
        background: transparent;
        color: #303936;
        font-family: inherit;
        font-size: 12px;
    }

        .sa-category-search input::placeholder {
            color: #a2aca8;
        }


/* LIST */

.sa-category-list {
    overflow-y: auto;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
}


/* ITEM */

.sa-category-item {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 10px;
    margin-bottom: 7px;
    border: 1px solid transparent;
    border-radius: 15px;
    background: #f8faf9;
    text-align: left;
    transition: background .2s ease, border-color .2s ease, transform .15s ease;
}

    .sa-category-item:active {
        transform: scale(.985);
    }

    .sa-category-item.active {
        border-color: rgba(66,198,165,.28);
        background: #eefaf6;
    }


/* ICON */

.sa-category-item-icon {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    border-radius: 11px;
    background: #e5f7f1;
    color: #42C6A5;
}

    .sa-category-item-icon svg {
        width: 19px;
        height: 19px;
    }


/* TEXT */

.sa-category-item-content {
    flex: 1;
    min-width: 0;
}

    .sa-category-item-content strong {
        display: block;
        overflow: hidden;
        color: #35403b;
        font-size: 11px;
        font-weight: 750;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .sa-category-item-content span {
        display: block;
        margin-top: 2px;
        color: #9ba6a1;
        font-size: 9px;
    }


/* CHECK */

.sa-category-item-check {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    border-radius: 50%;
    background: #e7eeeb;
    color: transparent;
}

.sa-category-item.active .sa-category-item-check {
    background: #42C6A5;
    color: #ffffff;
}

.sa-category-item-check svg {
    width: 14px;
    height: 14px;
}


/* EMPTY */

.sa-category-empty {
    padding: 30px 10px;
    text-align: center;
    color: #9aa49f;
    font-size: 11px;
}


/* LOADING */

.sa-category-loading {
    padding: 30px;
    text-align: center;
    color: #9aa49f;
    font-size: 10px;
}
body.sa-category-open {
    overflow: hidden;
}

.sa-chat-photo {
    margin-bottom: 7px;
    overflow: hidden;
    border-radius: 12px;
}

.sa-chat-photo img {
    display: block;
    width: 100%;
    max-width: 240px;
    height: auto;
    border-radius: 12px;
    cursor: pointer;
}
.sa-chat-wave-player {
    width: 260px;
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 11px;
    margin-bottom: 7px;
    border-radius: 15px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(66,198,165,.15);
    box-sizing: border-box;
}

.sa-chat-message.outgoing .sa-chat-wave-player {
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.16);
}

.sa-chat-wave-play {
    width: 38px;
    height: 38px;
    min-width: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #42C6A5;
    color: #fff;
    box-shadow: 0 4px 12px rgba(66,198,165,.25);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

    .sa-chat-wave-play svg {
        width: 17px;
        height: 17px;
    }

.sa-chat-wave-pause-icon {
    display: none;
}

.sa-chat-wave-player.playing .sa-chat-wave-play-icon {
    display: none;
}

.sa-chat-wave-player.playing .sa-chat-wave-pause-icon {
    display: block;
}

.sa-chat-wave-content {
    min-width: 0;
    flex: 1;
}

.sa-chat-waveform {
    width: 100%;
    height: 34px;
    cursor: pointer;
}

.sa-chat-wave-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2px;
}

.sa-chat-wave-label {
    font-size: 10px;
    font-weight: 700;
    color: #71827d;
}

.sa-chat-message.outgoing .sa-chat-wave-label {
    color: rgba(255,255,255,.72);
}

.sa-chat-wave-time {
    font-size: 10px;
    font-weight: 600;
    color: #82918d;
    font-variant-numeric: tabular-nums;
}

.sa-chat-message.outgoing .sa-chat-wave-time {
    color: rgba(255,255,255,.72);
}
.sa-chat-message.outgoing .sa-chat-wave-player {
    background: rgba(255,255,255,.13);
}

.sa-chat-message.outgoing .sa-chat-waveform {
    opacity: .95;
}
.sa-chat-photo {
    margin-bottom: 7px;
    overflow: hidden;
    border-radius: 13px;
    max-width: 240px;
}

    .sa-chat-photo a {
        display: block;
        text-decoration: none;
    }

    .sa-chat-photo img {
        display: block;
        width: 100%;
        max-width: 240px;
        height: auto;
        border-radius: 13px;
        object-fit: cover;
        cursor: zoom-in;
        transition: transform .2s ease;
    }

        .sa-chat-photo img:active {
            transform: scale(.97);
        }


.sa-questions-page {
    min-height: 100%;
    background: #f7faf9;
    color: #26332f;
    padding-bottom: 60px;
    box-sizing: border-box;
}


/* =========================
   HEADER
========================= */

.sa-questions-header {
    position: sticky;
    top: 0;
    z-index: 20;
    height: 68px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    background: rgba(247,250,249,.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(38,51,47,.06);
}

.sa-questions-back,
.sa-questions-search-button {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #53625e;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

    .sa-questions-back:active,
    .sa-questions-search-button:active {
        transform: scale(.92);
        background: rgba(66,198,165,.08);
    }

    .sa-questions-back svg,
    .sa-questions-search-button svg {
        width: 21px;
        height: 21px;
    }

.sa-questions-header-title {
    flex: 1;
    min-width: 0;
    margin-left: 5px;
}

    .sa-questions-header-title strong {
        display: block;
        font-size: 18px;
        line-height: 21px;
        font-weight: 800;
        letter-spacing: -.35px;
        color: #26332f;
    }

    .sa-questions-header-title span {
        display: block;
        margin-top: 2px;
        font-size: 11px;
        line-height: 15px;
        color: #84918d;
    }


/* =========================
   SEARCH
========================= */

.sa-questions-search-wrap {
    display: none;
    padding: 10px 16px 2px;
}

    .sa-questions-search-wrap.active {
        display: block;
    }

.sa-questions-search {
    height: 45px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid rgba(38,51,47,.07);
    box-shadow: 0 4px 18px rgba(37,61,53,.045);
}

    .sa-questions-search > svg {
        width: 19px;
        height: 19px;
        flex-shrink: 0;
        color: #8c9995;
    }

    .sa-questions-search input {
        flex: 1;
        min-width: 0;
        height: 100%;
        padding: 0 10px;
        border: 0;
        outline: 0;
        background: transparent;
        font-family: inherit;
        font-size: 13px;
        color: #26332f;
    }

        .sa-questions-search input::placeholder {
            color: #a2ada9;
        }

    .sa-questions-search button {
        width: 30px;
        height: 30px;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: #eef4f2;
        color: #70807a;
    }

        .sa-questions-search button.active {
            display: flex;
        }

        .sa-questions-search button svg {
            width: 13px;
            height: 13px;
        }


/* =========================
   FILTER
========================= */

.sa-questions-filter-wrap {
    padding: 15px 16px 9px;
}

.sa-questions-filter {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .sa-questions-filter::-webkit-scrollbar {
        display: none;
    }

    .sa-questions-filter button {
        flex-shrink: 0;
        height: 36px;
        padding: 0 14px;
        border: 1px solid rgba(38,51,47,.07);
        border-radius: 12px;
        background: #ffffff;
        color: #71807b;
        font-family: inherit;
        font-size: 11px;
        font-weight: 700;
        cursor: pointer;
        transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
    }

        .sa-questions-filter button:active {
            transform: scale(.97);
        }

        .sa-questions-filter button.active {
            background: #42C6A5;
            border-color: #42C6A5;
            color: #ffffff;
            box-shadow: 0 5px 14px rgba(66,198,165,.20);
        }


/* =========================
   CONTENT
========================= */

.sa-questions-content {
    padding: 3px 16px 20px;
}

.sa-questions-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100vh;
    overflow: scroll;
}



.sa-question-card {
    width: 100%;
    padding: 14px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .045);
    border-radius: 18px;
    box-shadow: 0 6px 20px rgba(30, 70, 60, .055);
    transition: transform .2s ease, box-shadow .2s ease;
}

    .sa-question-card:active {
        transform: scale(.985);
        box-shadow: 0 3px 12px rgba(30, 70, 60, .05);
    }


.sa-question-cardx {
    position: relative;
    padding: 15px 14px 13px;
    background: #ffffff;
    border: 1px solid rgba(38,51,47,.055);
    border-radius: 17px;
    box-shadow: 0 5px 20px rgba(37,61,53,.045);
    cursor: pointer; 
    transition: transform .18s ease, box-shadow .18s ease;
}

    .sa-question-cardx:active {
        transform: scale(.985);
        box-shadow: 0 3px 12px rgba(37,61,53,.04);
    }

.sa-question-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 9px;
}

.sa-question-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 23px;
    padding: 0 8px;
    border-radius: 8px;
    font-size: 9px;
    font-weight: 800;
}

    .sa-question-status::before {
        content: "";
        width: 5px;
        height: 5px;
        border-radius: 50%;
    }

    .sa-question-status.answered {
        color: #238a70;
        background: rgba(66,198,165,.11);
    }

        .sa-question-status.answered::before {
            background: #42C6A5;
        }

    .sa-question-status.waiting {
        color: #a87922;
        background: rgba(229,178,76,.12);
    }

        .sa-question-status.waiting::before {
            background: #e2b04b;
        }

.sa-question-date {
    font-size: 10px;
    color: #9aa6a2;
    white-space: nowrap;
}

.sa-question-title {
    padding-right: 22px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 750;
    letter-spacing: -.15px;
    color: #2c3935;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sa-question-category {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    margin-top: 9px;
    padding: 5px 8px;
    border-radius: 8px;
    background: #f1f6f4;
    color: #6d7b76;
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sa-question-bottom {
    display: flex;
    align-items: center;
    margin-top: 13px;
    padding-top: 11px;
    border-top: 1px solid #f0f3f2;
}

.sa-question-meta {
    display: flex;
    align-items: center;
    gap: 13px;
    color: #899590;
    font-size: 10px;
    font-weight: 600;
}

    .sa-question-meta span {
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

    .sa-question-meta svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
    }

    .sa-question-meta .like-icon {
        color: #dc7d98;
    }

    .sa-question-meta .answer-icon {
        color: #42C6A5;
    }

    .sa-question-meta .view-icon {
        color: #87948f;
    }

.sa-question-arrow {
    width: 18px;
    height: 18px;
    margin-left: auto;
    color: #a1aca8;
}


/* =========================
   LOADING
========================= */

.sa-questions-loading {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sa-question-skeleton {
    padding: 15px;
    background: #ffffff;
    border-radius: 17px;
    border: 1px solid rgba(38,51,47,.04);
    overflow: hidden;
}

.sa-question-skeleton-top {
    width: 80px;
    height: 20px;
    border-radius: 7px;
    background: linear-gradient( 90deg, #edf2f0 25%, #f7f9f8 50%, #edf2f0 75% );
    background-size: 200% 100%;
    animation: saQuestionSkeleton 1.3s infinite;
}

.sa-question-skeleton-title {
    width: 92%;
    height: 14px;
    margin-top: 14px;
    border-radius: 6px;
    background: linear-gradient( 90deg, #edf2f0 25%, #f7f9f8 50%, #edf2f0 75% );
    background-size: 200% 100%;
    animation: saQuestionSkeleton 1.3s infinite;
}

    .sa-question-skeleton-title.short {
        width: 62%;
        margin-top: 7px;
    }

.sa-question-skeleton-bottom {
    width: 45%;
    height: 12px;
    margin-top: 16px;
    border-radius: 6px;
    background: linear-gradient( 90deg, #edf2f0 25%, #f7f9f8 50%, #edf2f0 75% );
    background-size: 200% 100%;
    animation: saQuestionSkeleton 1.3s infinite;
}

@keyframes saQuestionSkeleton {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}


/* =========================
   EMPTY
========================= */

.sa-questions-empty {
    min-height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 25px;
    text-align: center;
}

.sa-questions-empty-icon {
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    border-radius: 20px;
    background: rgba(66,198,165,.09);
    color: #42C6A5;
}

    .sa-questions-empty-icon svg {
        width: 28px;
        height: 28px;
    }

.sa-questions-empty strong {
    font-size: 14px;
    font-weight: 800;
    color: #33413c;
}

.sa-questions-empty span {
    max-width: 260px;
    margin-top: 6px;
    font-size: 11px;
    line-height: 17px;
    color: #8b9893;
}


/* =========================
   ASK BUTTON
========================= */

.sa-questions-ask-button {
    position: fixed;
    right: 17px;
    bottom: calc(18px + env(safe-area-inset-bottom));
    z-index: 30;
    height: 47px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 17px;
    border: 0;
    border-radius: 16px;
    background: #42C6A5;
    color: #ffffff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 9px 25px rgba(66,198,165,.28);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

    .sa-questions-ask-button svg {
        width: 17px;
        height: 17px;
    }

    .sa-questions-ask-button:active {
        transform: scale(.95);
    }


/* =========================
   NO RESULT
========================= */

.sa-questions-no-result {
    padding: 45px 20px;
    text-align: center;
}

.sa-questions-no-result-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    background: #eef4f2;
    color: #8a9993;
}

    .sa-questions-no-result-icon svg {
        width: 24px;
        height: 24px;
    }

.sa-questions-no-result strong {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: #52605b;
}

.sa-questions-no-result span {
    display: block;
    margin-top: 5px;
    font-size: 10px;
    color: #98a49f;
}
.sa-questions-more-loading {
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

    .sa-questions-more-loading span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #42C6A5;
        animation: saQuestionsLoadingDot 1s infinite ease-in-out;
    }

        .sa-questions-more-loading span:nth-child(2) {
            animation-delay: .15s;
        }

        .sa-questions-more-loading span:nth-child(3) {
            animation-delay: .3s;
        }

@keyframes saQuestionsLoadingDot {

    0%, 70%, 100% {
        transform: scale(.65);
        opacity: .45;
    }

    35% {
        transform: scale(1);
        opacity: 1;
    }
}


/*kabe sayfası*/
.sa-qibla-page {
    min-height: 100vh;
    background: #f7fbfa;
    color: #172722;
    overflow-x: hidden;
}


/* HEADER */

.sa-qibla-header {
    height: 64px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid rgba(20,40,35,.07);
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(14px);
}

.sa-qibla-back {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 13px;
    background: #f1f8f6;
    color: #183c34;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .sa-qibla-back svg {
        width: 22px;
        height: 22px;
    }

.sa-qibla-header-title {
    min-width: 0;
}

    .sa-qibla-header-title div {
        font-size: 17px;
        line-height: 20px;
        font-weight: 800;
    }

    .sa-qibla-header-title span {
        display: block;
        margin-top: 2px;
        font-size: 11px;
        color: #81918d;
    }


/* CONTENT */

.sa-qibla-content {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 18px 18px 40px;
}


/* LOCATION */

.sa-qibla-location {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px;
    background: #fff;
    border: 1px solid rgba(66,198,165,.12);
    border-radius: 17px;
    box-shadow: 0 5px 20px rgba(22,70,59,.05);
}

.sa-qibla-location-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 13px;
    background: rgba(66,198,165,.12);
    color: #42C6A5;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .sa-qibla-location-icon svg {
        width: 21px;
        height: 21px;
    }

.sa-qibla-location strong {
    display: block;
    font-size: 14px;
    font-weight: 800;
}

.sa-qibla-location span {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    line-height: 15px;
    color: #87938f;
}


/* COMPASS */

.sa-qibla-compass-wrap {
    display: flex;
    justify-content: center;
    padding: 28px 0 10px;
}

.sa-qibla-compass {
    width: min(82vw, 330px);
    height: min(82vw, 330px);
    position: relative;
    border-radius: 50%;
    background: radial-gradient( circle at center, #ffffff 0%, #f9fcfb 55%, #eef7f4 100% );
    box-shadow: 0 18px 45px rgba(24,65,55,.10), inset 0 0 0 1px rgba(66,198,165,.08);
}


/* RING */

.sa-qibla-compass-ring {
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(66,198,165,.18);
    border-radius: 50%;
}

.qibla-degree {
    position: absolute;
    font-size: 13px;
    font-weight: 900;
    color: #7b8985;
}

.degree-n {
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    color: #42C6A5;
}

.degree-e {
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
}

.degree-s {
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
}

.degree-w {
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
}


/* TICKS */

.qibla-tick {
    position: absolute;
    left: 50%;
    top: 4px;
    width: 1px;
    height: 8px;
    background: rgba(100,125,118,.35);
    transform-origin: center 155px;
}

.tick-1 {
    transform: translateX(-50%) rotate(45deg);
}

.tick-2 {
    transform: translateX(-50%) rotate(135deg);
}

.tick-3 {
    transform: translateX(-50%) rotate(225deg);
}

.tick-4 {
    transform: translateX(-50%) rotate(315deg);
}


/* DIAL */

.sa-qibla-dial {
    position: absolute;
    inset: 28px;
    border-radius: 50%;
    transition: transform .08s linear;
    pointer-events: none;
}

.sa-qibla-cardinal {
    position: absolute;
    font-size: 11px;
    font-weight: 800;
    color: #9aa7a3;
}

.cardinal-n {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.cardinal-e {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.cardinal-s {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.cardinal-w {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}


/* KIBLE OKU */

.sa-qibla-arrow {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transform-origin: center;
    transition: transform .08s linear;
}

.sa-qibla-arrow-head {
    position: absolute;
    top: 38px;
    color: #42C6A5;
    filter: drop-shadow( 0 5px 10px rgba(66,198,165,.25) );
}

    .sa-qibla-arrow-head svg {
        width: 35px;
        height: 53px;
    }

.sa-qibla-kaaba {
    width: 47px;
    height: 47px;
    margin-top: 8px;
    border-radius: 15px;
    background: #173d34;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(23,61,52,.22);
}

    .sa-qibla-kaaba svg {
        width: 25px;
        height: 25px;
    }


/* CENTER */

.sa-qibla-center {
    position: absolute;
    width: 14px;
    height: 14px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #fff;
    border: 3px solid #42C6A5;
    box-shadow: 0 0 0 5px rgba(66,198,165,.08);
    z-index: 10;
}


/* DEGREE */

.sa-qibla-degree-info {
    text-align: center;
    margin-top: 4px;
}

.sa-qibla-degree-value {
    font-size: 35px;
    line-height: 40px;
    font-weight: 900;
    letter-spacing: -1px;
    color: #173d34;
}

.sa-qibla-degree-label {
    margin-top: 2px;
    font-size: 12px;
    color: #87938f;
}


/* STATUS */

.sa-qibla-status {
    margin-top: 22px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(66,198,165,.10);
}

.sa-qibla-status-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 12px;
    background: #f0f8f6;
    color: #42C6A5;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .sa-qibla-status-icon svg {
        width: 20px;
        height: 20px;
    }

.sa-qibla-status strong {
    display: block;
    font-size: 13px;
    font-weight: 800;
}

.sa-qibla-status span {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    line-height: 15px;
    color: #899590;
}


/* START */

.sa-qibla-start {
    width: 100%;
    height: 54px;
    margin-top: 14px;
    border: 0;
    border-radius: 17px;
    background: #42C6A5;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 9px 24px rgba(66,198,165,.24);
    cursor: pointer;
}

    .sa-qibla-start:active {
        transform: scale(.985);
    }

    .sa-qibla-start svg {
        width: 20px;
        height: 20px;
    }


/* HELP */

.sa-qibla-help {
    margin-top: 15px;
    padding: 14px;
    border-radius: 15px;
    background: #eef8f5;
}

    .sa-qibla-help strong {
        display: block;
        font-size: 12px;
        font-weight: 800;
        color: #31584f;
    }

    .sa-qibla-help p {
        margin: 5px 0 0;
        font-size: 11px;
        line-height: 17px;
        color: #71827d;
    }