:root {
    --account-dark: #282828;
    --account-bg: #f3f2ef;
    --account-card: #ffffff;
    --account-border: #cfcfcf;
    --account-soft-border: #d9dde6;
    --account-text: #080b12;
    --account-muted: #6f737b;
    --account-icon: #17191f;
    --account-radius: 8px;
    --account-shadow: 0 8px 20px rgba(0, 0, 0, .045);
    --account-transition: 220ms ease;
    --account-soft: #f3f5f9;
    --account-soft-2: #eef1f6;
    --account-pink: #ff36df;
    --account-pink-soft: #fff0fc;
}


.account-page {
    min-height: 100vh;
    background: var(--account-bg);
}

.account-container {
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
}

.account-hero {
    background: var(--account-dark);
    padding: 20px 0 53px;
}

.account-breadcrumb {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 22px;
    font-size: 16px;
    font-weight: 400;
    color: #f5f5f5;
}

.account-breadcrumb i {
    font-size: 17px;
    color: #cfd0d2;
    transform: translateY(1px);
}
.account-title {
    margin: 0 0 29px;
    color: #ffffff;
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -.25px;
}

.account-top-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 29px;
    margin-bottom: 19px;
}

.account-card {
    background: var(--account-card);
    border: 1px solid var(--account-border);
    border-radius: var(--account-radius);
    box-shadow: var(--account-shadow);
    transition: transform var(--account-transition), box-shadow var(--account-transition), border-color var(--account-transition);
}

.account-card:hover {
    transform: translateY(-2px);
    border-color: #bfc0c4;
    box-shadow: 0 13px 28px rgba(0, 0, 0, .075);
}

.profile-card {
    min-height: 121px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 23px 22px 20px;
}

.profile-main {
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 0;
}

.account-avatar {
    width: 63px;
    height: 63px;
    flex: 0 0 63px;
    border-radius: 50%;
    background: #15171d;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.2px;
}

.profile-name {
    margin: 0 0 7px;
    font-size: 21px;
    font-weight: 500;
    letter-spacing: -.25px;
}

.profile-meta {
    display: block;
    margin-bottom: 3px;
    color: #6f737b;
    font-size: 15px;
    font-weight: 400;
}

.profile-phone {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6f737b;
    font-size: 15px;
    font-weight: 400;
}

.profile-phone i {
    color: #19b95b;
    font-size: 15px;
    font-weight: 700;
}

.profile-settings {
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    color: #696b70;
    font-size: 29px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color var(--account-transition), transform var(--account-transition);
}

.profile-settings:hover {
    color: #15171d;
    transform: rotate(22deg);
}

.address-card {
    min-height: 121px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 23px 19px 20px;
}

.address-title {
    margin: 0 0 8px;
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -.2px;
}

.address-label {
    margin: 0 0 5px;
    font-size: 17px;
    font-weight: 700;
}

.address-text {
    margin: 0;
    font-size: 15px;
    color: #0d1118;
    max-width: 610px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-arrow {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border: 0;
    background: transparent;
    color: #6f7073;
    font-size: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--account-transition), color var(--account-transition);
}

.account-card:hover .card-arrow,
.account-action:hover .card-arrow {
    transform: translateX(4px);
    color: #15171d;
}

.shortcut-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 29px;
}

.shortcut-card {
    height: 69px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border-radius: 6px;
    background: #ffffff;
    border: 1px solid #d1d1d1;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.25px;
    transition: transform var(--account-transition), box-shadow var(--account-transition), background-color var(--account-transition);
}

.shortcut-card i {
    font-size: 31px;
    color: var(--account-icon);
}

.shortcut-card:hover {
    transform: translateY(-2px);
    background: #fafafa;
    box-shadow: 0 11px 24px rgba(0, 0, 0, .08);
}

.account-content {
    padding: 19px 0 60px;
}

.account-row-card {
    min-height: 98px;
    padding: 0 21px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 19px;
}

.row-card-left {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
}

.row-card-left i {
    width: 36px;
    color: var(--account-icon);
    font-size: 35px;
    line-height: 1;
    text-align: center;
}

.row-card-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.2px;
}

.row-card-desc {
    margin-left: auto;
    color: #737780;
    font-size: 16px;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 480px;
}

.account-box-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 29px;
    margin-top: 1px;
}

.account-box {
    min-height: 168px;
    padding: 19px 20px 21px;
}

.account-box-title {
    margin: 0 0 13px;
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -.15px;
}

.box-button-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.box-button {
    min-height: 89px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--account-soft-border);
    border-radius: 8px;
    background: #f6f7f9;
    overflow: hidden;
    transition: border-color var(--account-transition), background-color var(--account-transition), transform var(--account-transition), box-shadow var(--account-transition);
}

.box-button-icon {
    width: 100%;
    min-height: 57px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--account-soft-border);
}

.box-button-icon i {
    color: var(--account-icon);
    font-size: 35px;
    line-height: 1;
}

.box-button-text {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 31px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.1px;
}

.box-button:hover {
    background: #ffffff;
    border-color: #c5cad3;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .06);
}

@media (max-width: 1199.98px) {
    .account-container {
        max-width: 960px;
    }

    .account-top-grid,
    .account-box-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .shortcut-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .row-card-desc {
        max-width: 360px;
    }
}

@media (max-width: 767.98px) {
    .account-container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .account-hero {
        padding: 17px 0 28px;
    }

    .account-breadcrumb {
        font-size: 14px;
        margin-bottom: 18px;
    }

    .account-title {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .profile-card,
    .address-card {
        min-height: auto;
        padding: 18px;
        align-items: flex-start;
    }

    .profile-main {
        align-items: flex-start;
        gap: 13px;
    }

    .account-avatar {
        width: 56px;
        height: 56px;
        flex-basis: 56px;
        font-size: 17px;
    }

    .profile-name,
    .address-title {
        font-size: 20px;
    }

    .address-card {
        position: relative;
        padding-right: 48px;
    }

    .address-text {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .address-card .card-arrow {
        position: absolute;
        top: 18px;
        right: 14px;
    }

    .shortcut-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .shortcut-card {
        height: 62px;
        justify-content: flex-start;
        padding: 0 22px;
        font-size: 21px;
    }

    .shortcut-card i {
        width: 38px;
        text-align: center;
        font-size: 29px;
    }

    .account-content {
        padding: 15px 0 42px;
    }

    .account-row-card {
        min-height: auto;
        padding: 17px 16px;
        align-items: flex-start;
        margin-bottom: 14px;
    }

    .row-card-left {
        gap: 13px;
        align-items: flex-start;
    }

    .row-card-left i {
        width: 32px;
        font-size: 31px;
    }

    .row-card-title {
        font-size: 20px;
    }

    .row-card-desc {
        display: block;
        margin: 7px 0 0;
        max-width: none;
        white-space: normal;
        font-size: 15px;
    }

    .account-row-card {
        position: relative;
        padding-right: 48px;
    }

    .account-row-card .card-arrow {
        position: absolute;
        top: 17px;
        right: 13px;
    }

    .account-box {
        min-height: auto;
        padding: 18px 14px 16px;
    }

    .account-box-title {
        font-size: 20px;
        margin-bottom: 12px;
    }

    .box-button-grid {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .box-button {
        min-height: 74px;
        flex-direction: row;
        justify-content: flex-start;
    }

    .box-button-icon {
        width: 72px;
        min-height: 72px;
        border-bottom: 0;
        border-right: 1px solid var(--account-soft-border);
    }

    .box-button-icon i {
        font-size: 31px;
    }

    .box-button-text {
        min-height: auto;
        padding-left: 16px;
        font-size: 16px;
    }
}

.form-pass {
max-width: 460px;
}

.password-form-intro {
margin: 0 0 27px;
font-size: 16px;
font-weight: 400;
line-height: 1.45;
color: #02040a;
}

.password-change-form {
width: 100%;
}

.password-input-field {
position: relative;
margin-bottom: 16px;
}

.password-form-label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

.password-form-input {
width: 100%;
height: 50px;
border: 1px solid #b8c5dc;
border-radius: 7px;
background: #ffffff;
padding: 0 58px 0 16px;
color: #1a2232;
font-size: 18px;
font-weight: 400;
outline: 0;
transition: border-color var(--account-transition), box-shadow var(--account-transition), background-color var(--account-transition);
}

.password-form-input::placeholder {
color: #7180a3;
opacity: 1;
}

.password-form-input:focus {
border-color: #7085ad;
box-shadow: 0 0 0 3px rgba(112, 133, 173, .14);
}

.password-change-form .password-toggle {
position: absolute;
top: 50%;
right: 14px;
width: 34px;
height: 34px;
padding: 0;
border: 0;
background: transparent;
color: #7486aa;
font-size: 26px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
transform: translateY(-50%);
transition: color var(--account-transition), transform var(--account-transition);
}

.password-change-form .password-toggle:hover,
.password-change-form .password-toggle:focus {
color: #455b85;
}

.password-policy-list {
display: flex;
flex-direction: column;
gap: 10px;
margin: 16px 0 24px 5px;
padding: 0;
list-style: none;
color: #556070;
font-size: 14px;
font-weight: 400;
line-height: 1.2;
}

.password-match-hint {
display: none;
margin: -5px 0 12px 2px;
color: #9a2432;
font-size: 13px;
font-weight: 600;
line-height: 1.3;
}

.password-match-hint.is-visible {
display: block;
}

.password-policy-list li {
position: relative;
padding-left: 14px;
transition: color var(--account-transition);
}

.password-policy-list li::before {
content: "";
position: absolute;
left: 0;
top: .48em;
width: 7px;
height: 7px;
border-radius: 50%;
background: #b7b7b7;
transform: translateY(-50%);
transition: background-color var(--account-transition);
}

.password-policy-list li.is-valid {
color: #16834a;
}

.password-policy-list li.is-valid::before {
background: #23a45d;
}

.password-policy-list li.is-invalid {
color: #9a5660;
}

.password-policy-list li.is-invalid::before {
background: #ce6973;
}

.password-submit {
width: 100%;
height: 50px;
border: 0;
border-radius: 7px;
background: #c6c6c6;
color: #ffffff;
font-size: 18px;
font-weight: 800;
letter-spacing: 0;
cursor: not-allowed;
transition: background-color var(--account-transition), transform var(--account-transition), box-shadow var(--account-transition);
}

.password-submit.is-ready {
background: #15171d;
cursor: pointer;
}

.password-submit.is-ready:hover {
transform: translateY(-1px);
box-shadow: 0 10px 22px rgba(21, 23, 29, .16);
}

.password-alert {
display: flex;
align-items: flex-start;
gap: 9px;
margin: 0 0 16px;
padding: 12px 13px;
border-radius: 7px;
font-size: 14px;
font-weight: 600;
line-height: 1.35;
}

.password-alert i {
font-size: 17px;
line-height: 1.2;
}

.password-alert-error {
border: 1px solid #f2c6ce;
background: #fff3f5;
color: #8a2432;
}

.password-alert-success {
border: 1px solid #bfe6cf;
background: #f1fff6;
color: #16643a;
}

@media (max-width: 420px) {
    .profile-card {
        position: relative;
        padding-right: 48px;
    }

    .profile-settings {
        position: absolute;
        top: 15px;
        right: 12px;
    }

    .profile-meta,
    .profile-phone {
        font-size: 14px;
    }
}

.account-breadcrumb {
display: flex;
align-items: center;
gap: 8px;
padding-top: 20px;
margin-bottom: 20px;
color: #5f6570;
font-size: 15px;
font-weight: 400;
}

.account-breadcrumb a {
transition: color var(--account-transition);
}

.account-breadcrumb a:hover {
color: var(--account-pink);
}

.account-breadcrumb i {
color: #8e94a0;
font-size: 15px;
transform: translateY(1px);
}

.account-layout {
display: grid;
grid-template-columns: 238px minmax(0, 1fr);
gap: 29px;
align-items: start;
}

.account-sidebar {
display: flex;
flex-direction: column;
gap: 14px;
}

.sidebar-card {
background: var(--account-card);
border: 1px solid var(--account-border);
border-radius: var(--account-radius);
overflow: hidden;
transition: border-color var(--account-transition), box-shadow var(--account-transition);
}

.sidebar-card:hover {
border-color: #c9ced8;
box-shadow: 0 10px 25px rgba(18, 25, 38, .055);
}

.sidebar-user {
padding: 17px 11px 9px;
}

.sidebar-hello {
margin: 0 0 16px;
font-size: 16px;
font-weight: 700;
letter-spacing: -.1px;
}

.sidebar-hello span {
display: inline-block;
margin-left: 2px;
font-size: 16px;
}

.sidebar-bonus {
background: #eef1f6;
border-radius: 5px;
padding: 9px 10px;
}

.bonus-row {
display: flex;
align-items: center;
min-height: 28px;
gap: 8px;
font-size: 15px;
font-weight: 700;
}

.bonus-row i {
width: 18px;
height: 18px;
border-radius: 2px;
background: #202329;
color: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
}

.bonus-row .bonus-arrow {
margin-left: auto;
background: transparent;
color: #202329;
width: auto;
height: auto;
font-size: 20px;
}

.sidebar-menu {
padding: 10px;
}

.sidebar-menu-list {
display: flex;
flex-direction: column;
gap: 3px;
margin: 0;
padding: 0;
list-style: none;
}

.sidebar-menu-link {
display: flex;
align-items: center;
gap: 11px;
min-height: 40px;
padding: 0 12px;
border-radius: 7px;
font-size: 15px;
font-weight: 500;
color: #171a21;
transition: background-color var(--account-transition), color var(--account-transition), transform var(--account-transition);
}

.sidebar-menu-link i {
width: 18px;
color: #686d76;
font-size: 18px;
text-align: center;
transition: color var(--account-transition);
}

.sidebar-menu-link:hover {
background: #f8f3fb;
color: var(--account-pink);
transform: translateX(2px);
}

.sidebar-menu-link:hover i {
color: var(--account-pink);
}

.sidebar-menu-link.active {
background: var(--account-pink-soft);
color: var(--account-pink);
font-weight: 700;
}

.sidebar-menu-link.active i {
color: var(--account-pink);
}

.sidebar-help-title {
padding: 15px 19px 13px;
border-bottom: 1px solid var(--account-border);
font-size: 16px;
font-weight: 700;
}

.sidebar-help-list {
display: flex;
flex-direction: column;
gap: 4px;
padding: 11px 10px 12px;
}

.account-main {
min-width: 0;
margin-bottom: 30px;
}

.orders-heading {
margin: 1px 0 24px;
font-size: 27px;
font-weight: 800;
letter-spacing: -.35px;
}

.ayarlar {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}

.account-setting {
min-height: 82px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 0 17px;
border: 1px solid var(--account-border);
border-radius: 8px;
background: #ffffff;
color: #151922;
transition: border-color var(--account-transition), box-shadow var(--account-transition), transform var(--account-transition), color var(--account-transition);
}

.account-setting-info {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}

.account-setting-info span {
font-size: 16px;
font-weight: 700;
line-height: 1.25;
}

.user-icon {
width: 44px;
height: 44px;
flex: 0 0 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--account-soft-border);
border-radius: 8px;
background: var(--account-soft);
color: var(--account-icon);
font-size: 22px;
}

.account-setting > i {
flex: 0 0 auto;
color: #7b818c;
font-size: 18px;
transition: color var(--account-transition), transform var(--account-transition);
}

.account-setting:hover {
transform: translateY(-2px);
border-color: var(--account-pink);
color: var(--account-pink);
box-shadow: 0 10px 24px rgba(18, 25, 38, .07);
}

.account-setting:hover .user-icon {
border-color: rgba(255, 54, 223, .38);
background: var(--account-pink-soft);
color: var(--account-pink);
}

.account-setting:hover > i {
color: var(--account-pink);
transform: translateX(3px);
}

.orders-toolbar {
display: flex;
align-items: center;
gap: 9px;
margin-bottom: 18px;
}

.orders-search {
position: relative;
width: 316px;
flex: 0 0 316px;
}

.orders-search i {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: #587095;
font-size: 19px;
}

.orders-search .form-control {
height: 50px;
border: 1px solid #bcc7db;
border-radius: 7px;
padding-left: 44px;
padding-right: 14px;
font-size: 16px;
font-weight: 500;
color: #273142;
box-shadow: none;
}

.orders-search .form-control::placeholder {
color: #4e5b70;
}

.orders-date {
position: relative;
width: 170px;
flex: 0 0 170px;
}

.orders-date .form-control {
height: 50px;
border: 1px solid #bcc7db;
border-radius: 7px;
padding-left: 15px;
padding-right: 43px;
font-size: 15px;
color: #7f8ca2;
box-shadow: none;
}

.orders-date i {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
color: #617390;
font-size: 19px;
pointer-events: none;
}

.orders-date-picker {
position: absolute;
right: 0;
top: 0;
width: 50px;
height: 50px;
opacity: 0;
border: 0;
padding: 0;
cursor: pointer;
}

.toolbar-divider {
width: 1px;
height: 50px;
margin: 0 10px;
background: #d4d7df;
}

.order-filter-group {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}

.order-filter-btn {
height: 47px;
padding: 0 21px;
border-radius: 17px;
border: 1px solid #bcc7db;
background: #ffffff;
color: #293348;
font-size: 16px;
font-weight: 500;
transition: color var(--account-transition), background-color var(--account-transition), border-color var(--account-transition), box-shadow var(--account-transition), transform var(--account-transition);
}

.order-filter-btn:hover {
transform: translateY(-1px);
border-color: var(--account-pink);
color: var(--account-pink);
box-shadow: 0 8px 18px rgba(255, 54, 223, .11);
}

.order-filter-btn.active {
background: var(--account-pink-soft);
border: 2px solid var(--account-pink);
color: var(--account-pink);
font-weight: 600;
}

.orders-list {
display: flex;
flex-direction: column;
gap: 14px;
}

.orders-payment-alert {
margin: -2px 0 16px;
padding: 13px 16px;
border: 1px solid rgba(16, 185, 129, .28);
border-radius: 7px;
background: rgba(16, 185, 129, .08);
color: #047857;
font-size: 15px;
font-weight: 600;
}

.order-card {
min-height: 107px;
display: grid;
grid-template-columns: 122px minmax(0, 1fr) 330px 38px;
align-items: center;
gap: 18px;
padding: 14px 18px;
border: 1px solid var(--account-border);
border-radius: 7px;
background: #ffffff;
transition: border-color var(--account-transition), box-shadow var(--account-transition), transform var(--account-transition);
}

.order-card:hover {
transform: translateY(-2px);
border-color: #c4cad5;
box-shadow: 0 13px 28px rgba(18, 25, 38, .065);
}

.order-images {
display: flex;
align-items: center;
min-width: 0;
}

.order-thumb-link {
position: relative;
display: block;
width: 66px;
height: 66px;
border-radius: 50%;
border: 1px solid #e9edf4;
background: #ffffff;
overflow: hidden;
box-shadow: 0 0 0 1px rgba(232, 236, 245, .5);
transition: transform var(--account-transition);
}

.order-thumb-link:hover {
transform: scale(1.04);
}

.order-thumb-link img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}

.order-thumb-link + .order-thumb-link {
margin-left: -24px;
}

.order-thumb-bg {
width: 100%;
height: 100%;
border-radius: 50%;
background:
    radial-gradient(circle at 32% 32%, rgba(255, 255, 255, .9) 0 18%, transparent 19%),
    linear-gradient(135deg, #eff2f7, #d7deea);
}

.order-thumb-bg.dark {
background:
    linear-gradient(135deg, rgba(255, 54, 223, .16), rgba(255, 255, 255, 0) 42%),
    linear-gradient(135deg, #333b45, #11161d);
}

.order-thumb-bg.blue {
background:
    radial-gradient(circle at 65% 38%, rgba(255, 54, 223, .18) 0 18%, transparent 19%),
    linear-gradient(135deg, #edf5ff, #c7d8ef);
}

.order-more {
margin-left: 5px;
font-size: 15px;
font-weight: 700;
color: #11151c;
white-space: nowrap;
}

.order-info {
min-width: 0;
}

.order-no,
.order-date {
margin: 0;
font-size: 15px;
font-weight: 500;
color: #02040a;
}

.order-no strong,
.order-date strong {
font-weight: 400;
}

.order-date {
margin-top: 4px;
}

.order-price {
margin: 5px 0 0;
font-size: 16px;
font-weight: 00;
color: #02040a;
letter-spacing: -.2px;
}

.order-status {
color: var(--account-pink);
font-size: 17px;
font-weight: 700;
letter-spacing: -.1px;
}

.order-go {
width: 34px;
height: 34px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: #35383e;
font-size: 28px;
transition: color var(--account-transition), transform var(--account-transition), background-color var(--account-transition);
}

.order-card:hover .order-go {
color: var(--account-pink);
background: var(--account-pink-soft);
transform: translateX(4px);
}

.orders-empty {
display: none;
padding: 24px 18px;
border: 1px dashed #cfd7e6;
border-radius: 7px;
background: #fff;
color: #5b687c;
font-size: 16px;
font-weight: 600;
text-align: center;
}

.orders-empty.is-visible {
display: block;
}

@media (max-width: 1199.98px) {
.account-container {
    max-width: 960px;
}

.account-layout {
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 22px;
}

.orders-toolbar {
    align-items: stretch;
    flex-wrap: wrap;
}

.orders-search {
    width: calc(100% - 184px);
    flex: 1 1 320px;
}

.orders-date {
    flex: 0 0 170px;
}

.toolbar-divider {
    display: none;
}

.order-filter-group {
    width: 100%;
    margin-top: 2px;
}

.order-card {
    grid-template-columns: 106px minmax(0, 1fr) 230px 34px;
    gap: 14px;
}
}

@media (max-width: 991.98px) {
.account-page {
    padding-top: 16px;
}

.account-layout {
    grid-template-columns: 1fr;
    gap: 22px;
}

.account-sidebar {
    gap: 12px;
}

.sidebar-user {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px;
    align-items: center;
    gap: 14px;
    padding: 13px;
}

.sidebar-hello {
    margin-bottom: 0;
}

.sidebar-menu {
    overflow-x: auto;
    padding: 9px;
}

.sidebar-menu-list {
    flex-direction: row;
    width: max-content;
    min-width: 100%;
}

.sidebar-menu-link {
    white-space: nowrap;
    min-height: 42px;
}

.sidebar-help-list {
    flex-direction: row;
    overflow-x: auto;
}

.orders-heading {
    margin-bottom: 17px;
}

.ayarlar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 767.98px) {
.account-container {
    padding-left: 14px;
    padding-right: 14px;
}

.account-breadcrumb {
    font-size: 14px;
    margin-bottom: 15px;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 2px;
}

.sidebar-user {
    grid-template-columns: 1fr;
}

.sidebar-bonus {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.bonus-row {
    min-height: 34px;
}

.bonus-row .bonus-arrow {
    display: none;
}

.orders-heading {
    font-size: 24px;
}

.ayarlar {
    grid-template-columns: 1fr;
    gap: 11px;
}

.account-setting {
    min-height: 72px;
    padding: 0 14px;
}

.user-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    font-size: 20px;
}

.orders-toolbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.orders-search,
.orders-date {
    width: 100%;
    flex: none;
}

.order-filter-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.order-filter-btn {
    width: 100%;
    height: 45px;
    padding: 0 12px;
    border-radius: 14px;
    font-size: 15px;
}

.orders-list {
    gap: 12px;
}

.order-card {
    min-height: auto;
    grid-template-columns: 82px minmax(0, 1fr) 32px;
    grid-template-areas:
        "images info go"
        "status status status";
    gap: 11px 13px;
    padding: 14px;
}

.order-images {
    grid-area: images;
}

.order-info {
    grid-area: info;
}

.order-status {
    grid-area: status;
    padding-top: 9px;
    border-top: 1px solid #edf0f5;
    font-size: 16px;
}

.order-go {
    grid-area: go;
    align-self: center;
}

.order-thumb-link {
    width: 58px;
    height: 58px;
}

.order-thumb-link + .order-thumb-link {
    margin-left: -33px;
}

.order-more {
    margin-left: 2px;
    font-size: 14px;
}

.order-no,
.order-date {
    font-size: 15px;
}

.order-price {
    font-size: 19px;
}
}

@media (max-width: 420px) {
.sidebar-bonus {
    grid-template-columns: 1fr;
}

.order-filter-group {
    grid-template-columns: 1fr;
}

.order-card {
    grid-template-columns: 70px minmax(0, 1fr) 30px;
    padding: 13px;
}

.order-thumb-link {
    width: 54px;
    height: 54px;
}

.order-thumb-link + .order-thumb-link {
    display: none;
}

.order-more {
    margin-left: 4px;
}
}

.membership-form-pass {
max-width: none;
}

.membership-flash {
margin-bottom: 18px;
}

.membership-info-grid {
align-items: flex-start;
}

.membership-card {
background: #ffffff;
border: 1px solid #c7c7c7;
border-radius: 8px;
overflow: hidden;
transition: border-color var(--account-transition), box-shadow var(--account-transition), transform var(--account-transition);
}

.membership-card:hover {
border-color: #b7b7b7;
box-shadow: 0 12px 28px rgba(18, 25, 38, .07);
transform: translateY(-1px);
}

.membership-card-header {
min-height: 53px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 0 21px;
background: #f1f1f1;
}

.membership-card-header h2 {
margin: 0;
font-size: 20px;
font-weight: 800;
line-height: 1.2;
letter-spacing: 0;
color: #07090f;
}

.membership-edit-btn,
.membership-row-action {
border: 0;
background: transparent;
padding: 5px 0;
color: var(--account-pink);
font-size: 16px;
font-weight: 700;
line-height: 1;
transition: color var(--account-transition), transform var(--account-transition);
}

.membership-edit-btn:hover,
.membership-row-action:hover,
.membership-edit-btn:focus,
.membership-row-action:focus {
color: #cf16b7;
transform: translateY(-1px);
}

.membership-view-panel {
padding: 0 19px;
}

.membership-info-row,
.membership-contact-row {
display: grid;
grid-template-columns: 120px minmax(0, 1fr);
align-items: center;
min-height: 50px;
border-bottom: 1px solid #c9c9c9;
transition: background-color var(--account-transition);
}

.membership-info-row:last-child,
.membership-contact-item:last-child .membership-contact-row {
border-bottom: 0;
}

.membership-info-row:hover,
.membership-contact-row:hover {
background: #fbfbfb;
}

.membership-label {
font-size: 16px;
font-weight: 500;
color: #2c3444;
line-height: 1.35;
}

.membership-value {
min-width: 0;
font-size: 16px;
font-weight: 500;
color: #343943;
line-height: 1.35;
word-break: break-word;
}

.membership-contact-card .membership-card-header {
min-height: 53px;
}

.membership-contact-item {
padding: 0 19px;
}

.membership-contact-row {
grid-template-columns: 120px minmax(0, 1fr) 74px;
column-gap: 12px;
}

.membership-contact-value {
display: inline-flex;
align-items: center;
gap: 3px;
}

.membership-check {
color: #09b451;
font-size: 18px;
font-weight: 800;
line-height: 1;
transform: translateY(1px);
}

.membership-edit-panel,
.membership-contact-form {
padding: 20px 19px 21px;
background: #ffffff;
}

.membership-field-label {
display: block;
margin-bottom: 7px;
font-size: 14px;
font-weight: 700;
color: #424956;
line-height: 1.25;
}

.membership-control {
min-height: 46px;
border: 1px solid #c2cad9;
border-radius: 7px;
font-size: 15px;
font-weight: 500;
color: #1f2633;
box-shadow: none;
transition: border-color var(--account-transition), box-shadow var(--account-transition);
}

.membership-control:focus {
border-color: #788aaa;
box-shadow: 0 0 0 3px rgba(120, 138, 170, .16);
}

.membership-checkbox-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}

.membership-checkbox {
min-height: 46px;
display: flex;
align-items: center;
gap: 10px;
padding: 0 13px;
border: 1px solid #c2cad9;
border-radius: 7px;
background: #ffffff;
cursor: pointer;
transition: border-color var(--account-transition), background-color var(--account-transition), color var(--account-transition);
}

.membership-checkbox:hover {
border-color: var(--account-pink);
background: #fff8fe;
}

.membership-checkbox input {
width: 18px;
height: 18px;
accent-color: var(--account-pink);
}

.membership-checkbox span {
font-size: 15px;
font-weight: 700;
color: #252c38;
}

.membership-form-actions,
.membership-inline-form {
display: flex;
align-items: center;
gap: 10px;
margin-top: 16px;
}

.membership-inline-form {
margin-top: 0;
}

.membership-inline-form .membership-control {
flex: 1 1 auto;
min-width: 0;
}

.membership-save-btn,
.membership-cancel-btn {
min-height: 44px;
border-radius: 7px;
padding: 0 18px;
font-size: 15px;
font-weight: 800;
transition: border-color var(--account-transition), background-color var(--account-transition), color var(--account-transition), box-shadow var(--account-transition), transform var(--account-transition);
}

.membership-save-btn {
border: 1px solid #15171d;
background: #15171d;
color: #ffffff;
}

.membership-save-btn:hover,
.membership-save-btn:focus {
background: #000000;
border-color: #000000;
box-shadow: 0 9px 20px rgba(21, 23, 29, .16);
transform: translateY(-1px);
}

.membership-cancel-btn {
border: 1px solid #d4d8e1;
background: #ffffff;
color: #4c5564;
}

.membership-cancel-btn:hover,
.membership-cancel-btn:focus {
border-color: #c7cad3;
background: #f6f7fa;
color: #15171d;
}

@media (max-width: 1199.98px) {
.membership-info-grid {
    row-gap: 18px;
}
}

@media (max-width: 767.98px) {
.membership-card-header {
    min-height: auto;
    padding: 16px;
}

.membership-card-header h2 {
    font-size: 19px;
}

.membership-view-panel,
.membership-contact-item {
    padding: 0 16px;
}

.membership-info-row {
    grid-template-columns: 1fr;
    align-items: flex-start;
    gap: 5px;
    min-height: auto;
    padding: 14px 0;
}

.membership-contact-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "label action"
        "value action";
    align-items: center;
    min-height: auto;
    gap: 5px 12px;
    padding: 14px 0;
}

.membership-contact-row .membership-label {
    grid-area: label;
}

.membership-contact-row .membership-contact-value {
    grid-area: value;
}

.membership-contact-row .membership-row-action {
    grid-area: action;
    align-self: center;
}

.membership-label {
    font-size: 15px;
}

.membership-value {
    font-size: 16px;
}

.membership-edit-panel,
.membership-contact-form {
    padding: 17px 16px 18px;
}

.membership-checkbox-grid {
    grid-template-columns: 1fr;
}

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

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

.membership-save-btn,
.membership-cancel-btn {
    width: 100%;
}
}

@media (max-width: 420px) {
.membership-card-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
}

.membership-edit-btn {
    align-self: flex-start;
}

.membership-contact-row {
    grid-template-columns: 1fr;
    grid-template-areas:
        "label"
        "value"
        "action";
}

.membership-contact-row .membership-row-action {
    justify-self: flex-start;
}

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

.address-page {
padding: 22px 0 58px;
}

.address-list-head {
margin-bottom: 29px;
}

.address-back-link {
display: inline-flex;
align-items: center;
gap: 4px;
margin-bottom: 6px;
color: var(--account-pink);
font-size: 16px;
font-weight: 600;
line-height: 1.2;
transition: color var(--account-transition), transform var(--account-transition);
}

.address-back-link i {
font-size: 19px;
line-height: 1;
}

.address-back-link:hover {
color: #cf16b7;
transform: translateX(-2px);
}

.address-title-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
}

.address-title-row h1 {
margin: 0;
font-size: 27px;
font-weight: 800;
line-height: 1.15;
color: #06080e;
letter-spacing: 0;
}

.address-add-btn,
.address-save-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
border: 0;
border-radius: 7px;
background: #17181d;
color: #ffffff;
font-size: 16px;
font-weight: 800;
line-height: 1;
padding: 0 20px;
transition: background-color var(--account-transition), box-shadow var(--account-transition), transform var(--account-transition);
}

.address-add-btn:hover,
.address-save-btn:hover,
.address-add-btn:focus,
.address-save-btn:focus {
background: #000000;
color: #ffffff;
box-shadow: 0 10px 22px rgba(21, 23, 29, .18);
transform: translateY(-1px);
}

.address-page .address-card-grid {
align-items: stretch;
}
.address-default-select-row {
display: flex;
align-items: center;
gap: 14px;
min-height: 64px;
padding: 12px 15px;
border: 1px solid #d6d9e0;
border-radius: 8px;
background: #f8f9fb;
}

.address-default-select-row label {
flex: 0 0 auto;
margin: 0;
color: #222936;
font-size: 15px;
font-weight: 800;
line-height: 1.2;
}

.address-default-select-row .address-control {
max-width: 390px;
min-height: 44px;
padding-top: 0;
font-size: 15px;
}

.address-default-status {
min-width: 96px;
color: #687184;
font-size: 13px;
font-weight: 600;
}

.address-page .default-address-label {
    position: absolute;
    top: 5px;
    left: 5px;
    color: #8b8b8b;
}
.address-page .address-card {
display: block;
position: relative;
min-height: 209px;
height: 100%;
padding: 30px 30px 19px;
border: 1px solid #cfcfcf;
border-radius: 8px;
background: #ffffff;
transition: border-color var(--account-transition), box-shadow var(--account-transition), transform var(--account-transition);
}

.address-page .address-card:hover {
border-color: #bababa;
box-shadow: 0 12px 27px rgba(18, 25, 38, .07);
transform: translateY(-2px);
}

.address-page .address-card-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
margin-bottom: 4px;
}

.address-card-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 14px;
flex: 0 0 auto;
}

.address-page .address-card h2 {
margin: 0;
font-size: 18px;
font-weight: 800;
line-height: 1.25;
color: #07090f;
text-transform: uppercase;
letter-spacing: 0;
}

.address-edit-link,
.address-delete-link {
flex: 0 0 auto;
color: var(--account-pink);
font-size: 16px;
font-weight: 700;
line-height: 1.2;
border: 0;
background: transparent;
padding: 0;
font-family: inherit;
cursor: pointer;
transition: color var(--account-transition), transform var(--account-transition);
}

.address-delete-form {
margin: 0;
}

.address-edit-link:hover,
.address-delete-link:hover {
color: #cf16b7;
transform: translateY(-1px);
}

.address-delete-link {
color: #a5a5a5;
}

.address-delete-link:hover {
color: #040404;
}

.address-page .address-card-text {
margin: 0 0 11px;
max-width: 495px;
color: #06080f;
font-size: 16px;
font-weight: 400;
line-height: 1.36;
}

.address-page .address-card-person {
margin: 0 0 2px;
color: #06080f;
font-size: 16px;
font-weight: 400;
line-height: 1.35;
text-transform: uppercase;
}

.address-page .address-card-meta {
display: flex;
flex-direction: column;
gap: 1px;
margin: 0;
font-size: 16px;
line-height: 1.35;
}

.address-page .address-card-meta div {
display: grid;
grid-template-columns: 64px minmax(0, 1fr);
gap: 0;
}

.address-page .address-card-meta dt {
color: #666b75;
font-weight: 400;
}

.address-page .address-card-meta dd {
margin: 0;
color: #06080f;
font-weight: 400;
word-break: break-word;
}

.address-empty {
max-width: 520px;
padding: 32px;
border: 1px solid #d1d1d1;
border-radius: 8px;
background: #ffffff;
text-align: center;
}

.address-empty i {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
margin-bottom: 12px;
border-radius: 50%;
background: var(--account-pink-soft);
color: var(--account-pink);
font-size: 24px;
}

.address-empty h2 {
margin: 0 0 8px;
font-size: 22px;
font-weight: 800;
}

.address-empty p {
margin: 0 0 18px;
color: #5f6570;
font-size: 15px;
line-height: 1.45;
}

.address-form-shell {
width: 100%;
max-width: 600px;
}

.address-form {
width: 100%;
background: #ffffff;
}

.address-form-section {
padding: 15px 16px 16px;
border-bottom: 7px solid #f1f1f5;
}

.address-form-section:first-child {
padding-top: 4px;
}

.address-form-section h2 {
margin: 0 0 16px;
font-size: 16px;
font-weight: 800;
line-height: 1.25;
color: #0d1016;
}

.address-sr-label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

.address-floating-label {
position: absolute;
z-index: 2;
margin: 7px 0 0 12px;
font-size: 11px;
font-weight: 500;
line-height: 1;
color: #606775;
pointer-events: none;
}

.address-control {
min-height: 48px;
border: 1px solid #c9ccd4;
border-radius: 6px;
background-color: #ffffff;
color: #1f2633;
font-size: 15px;
font-weight: 500;
box-shadow: none;
transition: border-color var(--account-transition), box-shadow var(--account-transition), background-color var(--account-transition);
}

.address-control::placeholder {
color: #818898;
opacity: 1;
}

.address-control:focus {
border-color: #8f9bb4;
box-shadow: 0 0 0 3px rgba(143, 155, 180, .16);
}

.address-control:disabled {
background-color: #f7f8fb;
color: #7f8796;
opacity: 1;
}

.address-code-select,
.address-country-select {
padding-top: 15px;
font-size: 15px;
font-weight: 600;
}

.address-textarea {
min-height: 120px;
padding-top: 12px;
resize: none;
line-height: 1.4;
}

.address-counter {
margin-top: 4px;
color: #697080;
font-size: 12px;
font-weight: 500;
line-height: 1;
text-align: right;
}

.address-info-note {
display: flex;
align-items: center;
gap: 10px;
min-height: 40px;
margin-top: 17px;
padding: 9px 10px;
border-radius: 6px;
background: #eaf6ff;
color: #1e2632;
font-size: 13px;
font-weight: 500;
line-height: 1.25;
}

.address-info-note i {
width: 19px;
height: 19px;
flex: 0 0 19px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #63bff2;
color: #ffffff;
font-size: 14px;
font-weight: 800;
}

.address-default-check {
display: flex;
align-items: center;
gap: 9px;
margin: -2px 0 0;
color: #1c2430;
font-size: 14px;
font-weight: 600;
cursor: pointer;
}

.address-default-check input {
width: 18px;
height: 18px;
accent-color: #17181d;
}

.address-radio-group {
display: flex;
align-items: center;
gap: 28px;
margin-bottom: 14px;
}

.address-radio {
display: inline-flex;
align-items: center;
gap: 9px;
min-height: 28px;
color: #242b38;
font-size: 15px;
font-weight: 500;
cursor: pointer;
}

.address-radio input {
width: 20px;
height: 20px;
accent-color: #26272b;
}

.address-invoice-fields {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}

.address-invoice-fields .address-info-note {
margin-top: 0;
}

.address-form > .address-save-btn {
width: calc(100% - 14px);
min-height: 49px;
margin: 13px 7px 0;
font-size: 17px;
border-radius: 6px;
}

@media (max-width: 991.98px) {
.address-page {
    padding-top: 18px;
}

.address-title-row {
    align-items: stretch;
}

.address-page .address-card {
    min-height: auto;
}
}

@media (max-width: 767.98px) {
.address-page {
    padding: 16px 0 42px;
}

.address-list-head {
    margin-bottom: 21px;
}

.address-title-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 13px;
}

.address-title-row h1 {
    font-size: 26px;
}

.address-add-btn {
    width: 100%;
}

.address-page .address-card {
    padding: 18px 16px;
}

.address-default-select-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.address-default-select-row .address-control {
    max-width: none;
}

.address-default-status {
    min-width: 0;
}

.address-page .address-card-top {
    gap: 12px;
}

.address-card-actions {
    gap: 10px;
}

.address-page .address-card h2 {
    font-size: 17px;
}

.address-page .address-card-text,
.address-page .address-card-person,
.address-page .address-card-meta {
    font-size: 15px;
}

.address-page .address-card-meta div {
    grid-template-columns: 88px minmax(0, 1fr);
}

.address-form-shell {
    max-width: none;
}

.address-form-section {
    padding-left: 12px;
    padding-right: 12px;
}
}

@media (max-width: 420px) {
.address-back-link {
    font-size: 15px;
}

.address-page .address-card-top {
    align-items: flex-start;
}

.address-edit-link,
.address-delete-link {
    font-size: 15px;
}

.address-radio-group {
    gap: 22px;
}

.address-info-note {
    align-items: flex-start;
}
}


/*############################################################
-> SİPARİŞ DETAY
############################################################*/


:root {
    --acc-text: #11141b;
    --acc-muted: #69707c;
    --acc-border: #d8dce3;
    --acc-soft: #f3f5f8;
    --acc-pink: #ff36df;
    --acc-pink-soft: #fff0fc;
    --acc-pink-card: #fff0fc;
    --acc-lime: #dcff35;
    --acc-black: #17191f;
    --acc-radius: 8px;
    --acc-transition: 220ms ease;
}

.account-page {
    min-height: 100vh;
    padding: 17px 0 70px;
    background: #fff;
}

.account-container {
    max-width: 1190px;
    margin: 0 auto;
    padding-left: 14px;
    padding-right: 14px;
}

.account-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 17px;
    color: #626a76;
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
}

.account-breadcrumb i {
    color: #8c939e;
    font-size: 13px;
}

.account-breadcrumb a:hover {
    color: var(--acc-pink);
}

.account-layout {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.account-sidebar {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.sidebar-card {
    background: #fff;
    border: 1px solid var(--acc-border);
    border-radius: var(--acc-radius);
    overflow: hidden;
    transition: box-shadow var(--acc-transition), border-color var(--acc-transition);
}

.sidebar-card:hover {
    border-color: #c9ced8;
    box-shadow: 0 10px 22px rgba(18, 25, 38, .055);
}

.sidebar-user {
    padding: 12px 8px 8px;
}

.sidebar-hello {
    margin: 0 0 13px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.1px;
}

.sidebar-bonus {
    background: #eef1f6;
    border-radius: 4px;
    padding: 7px 8px;
}

.bonus-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    font-size: 13px;
    font-weight: 700;
}

.bonus-row i {
    width: 16px;
    height: 16px;
    border-radius: 2px;
    background: #1d2026;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
}

.bonus-row .bonus-arrow {
    margin-left: auto;
    width: auto;
    height: auto;
    background: transparent;
    color: #202329;
    font-size: 17px;
}

.sidebar-menu {
    padding: 8px;
}

.sidebar-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-menu-link {
    min-height: 33px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 8px;
    border-radius: 6px;
    color: #1a1d24;
    font-size: 13px;
    font-weight: 500;
    transition: background-color var(--acc-transition), color var(--acc-transition), transform var(--acc-transition);
}

.sidebar-menu-link i {
    width: 16px;
    text-align: center;
    color: #666d78;
    font-size: 15px;
    transition: color var(--acc-transition);
}

.sidebar-menu-link:hover {
    background: #f8f3fb;
    color: var(--acc-pink);
    transform: translateX(2px);
}

.sidebar-menu-link:hover i,
.sidebar-menu-link.active i {
    color: var(--acc-pink);
}

.sidebar-menu-link.active {
    background: var(--acc-pink-soft);
    color: var(--acc-pink);
    font-weight: 700;
}

.sidebar-help-title {
    padding: 11px 14px 10px;
    border-bottom: 1px solid var(--acc-border);
    font-size: 14px;
    font-weight: 700;
}

.sidebar-help-list {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.account-main {
    min-width: 0;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin: 0 0 12px;
    color: var(--acc-pink);
    font-size: 13px;
    font-weight: 700;
}

.back-link:hover {
    color: #d900bd;
}

.page-title {
    margin: 0 0 16px;
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -.35px;
}

.order-status-hero {
    min-height: 73px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--acc-pink-card);
    border: 1px solid #ffd6f8;
    border-radius: 7px;
    margin-bottom: 9px;
}

.status-check {
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    border-radius: 50%;
    background: var(--acc-pink);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.status-hero-content {
    min-width: 0;
}

.status-title {
    margin: 0 0 10px;
    color: var(--acc-pink);
    font-size: 20px;
    font-weight: 800;
}

.status-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 11px;
    color: #12151c;
    font-size: 14px;
}

.status-meta strong {
    font-weight: 800;
}

.status-meta .vr-line {
    width: 1px;
    height: 18px;
    background: #d5b8d2;
}

.copy-icon {
    color: var(--acc-pink);
    font-size: 14px;
    transform: translateY(1px);
}

.tracking-card {
    border: 1px solid var(--acc-border);
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    margin-bottom: 14px;
}

.invoice-bar {
    height: 31px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    background: #f1f2f4;
    border-bottom: 1px solid #e1e4ea;
    font-size: 12px;
    font-weight: 800;
}

.invoice-bar i {
    margin-right: 5px;
    font-size: 13px;
}

.progress-area {
    padding: 17px 33px 7px;
}

.order-progress {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0 auto;
    max-width: 705px;
}

.order-progress::before {
    content: "";
    position: absolute;
    top: 11px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: #292b31;
}

.progress-step {
    position: relative;
    text-align: center;
    z-index: 1;
}

.step-dot {
    width: 14px;
    height: 14px;
    margin: 4px auto 8px;
    border-radius: 50%;
    border: 1px solid #3a3d43;
    background: #fff;
    color: #3a3d43;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
}

.progress-step.done .step-dot,
.progress-step.active .step-dot {
    background: #fff;
}

.progress-step.active .step-dot {
    width: 22px;
    height: 22px;
    margin-top: 0;
    background: #17191f;
    color: #fff;
    border-color: #17191f;
    font-size: 13px;
}

.step-label {
    font-size: 12px;
    font-weight: 800;
    line-height: 1.1;
}

.shipment-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 16px;
    margin: 4px 14px 10px;
    padding: 10px 12px;
    background: var(--acc-pink-card);
    border-radius: 5px;
}

.shipment-left {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.shipment-left i {
    font-size: 25px;
    color: #15171d;
}

.shipment-name {
    font-size: 16px;
    font-weight: 500;
}

.shipment-name strong {
    font-weight: 700;
}

.shipment-name span {
    color: #6a707c;
    font-size: 12px;
}

.shipment-date {
    margin-top: 2px;
    color: #6a707c;
    font-size: 12px;
}

.cargo-no {
    color: #6a707c;
    font-size: 12px;
    white-space: nowrap;
}

.cargo-no strong {
    color: #4a505b;
    font-weight: 700;
}

.cargo-btn {
    height: 36px;
    min-width: 99px;
    border: 0;
    border-radius: 5px;
    background: #17191f;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    transition: transform var(--acc-transition), background-color var(--acc-transition);
}

.cargo-btn:hover {
    transform: translateY(-1px);
    background: #000;
}

.products-list {
    padding: 0 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.order-product-card {
    border: 1px solid var(--acc-border);
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    transition: box-shadow var(--acc-transition), transform var(--acc-transition), border-color var(--acc-transition);
}

.order-product-card:hover {
    transform: translateY(-1px);
    border-color: #c8ced8;
    box-shadow: 0 10px 22px rgba(18, 25, 38, .055);
}

.product-row {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 260px;
    gap: 13px;
    align-items: center;
    padding: 11px 12px 10px;
}

.product-photo-link {
    width: 54px;
    height: 54px;
    border-radius: 7px;
    border: 1px solid #d8dde7;
    overflow: hidden;
    display: block;
    background: #fff;
    transition: transform var(--acc-transition);
}

.product-photo-link:hover {
    transform: scale(1.04);
}

.product-photo-bg {
    width: 100%;
    height: 100%;
    display: block;
    background:
        radial-gradient(circle at 70% 28%, rgba(255, 54, 223, .16) 0 15%, transparent 16%),
        linear-gradient(135deg, #f4f5f7, #cfd5df 48%, #1c222b 49%, #2b333e);
}

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

.product-title {
    margin: 0 0 8px;
    color: #11141b;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
}

.product-qty {
    margin: 0 0 5px;
    color: #707781;
    font-size: 12px;
}

.product-variation {
    margin: -3px 0 5px;
    color: #707781;
    font-size: 12px;
    line-height: 1.35;
}

.product-price {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
}

.product-price-old {
    margin: 0 0 2px;
    color: #8b919b;
    font-size: 14px;
    font-weight: 400;
    text-decoration: line-through;
}

.product-actions {
    display: grid;
    flex-direction: column;
    gap: 5px;

}

.product-action-btn {
    height: 31px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 800;
    transition: transform var(--acc-transition), background-color var(--acc-transition), border-color var(--acc-transition);
}

.btn-rate {
    border: 1px solid #1e2229;
    background: #fff;
    color: #15171d;
}

.btn-rate:hover {
    transform: translateY(-1px);
    border-color: var(--acc-pink);
    color: var(--acc-pink);
}
.btn-return {
    border: unset;
    color: #716f6f;
    font-weight: 600;
}
.btn-return:hover {
    color: #ffffff;
    background-color: #999999 !important;
}

.btn-buy-again {
    border: 1px solid var(--acc-pink);
    background: var(--acc-pink);
    color: #fff;
}

.btn-buy-again:hover {
    transform: translateY(-1px);
    background: #b7b7b7;
}

.store-question {
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 11px 0 14px;
    border-top: 1px solid var(--acc-border);
    color: #15171d;
    font-size: 12px;
    font-weight: 800;
}

.store-question i:first-child {
    margin-right: 5px;
}

.store-question i:last-child {
    color: #a7acb5;
}

.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 14px;
}

.info-card {
    border: 1px solid var(--acc-border);
    border-radius: 7px;
    background: #fff;
    padding: 15px 15px 13px;
}

.info-title {
    margin: 0 0 12px;
    font-size: 17px;
    font-weight: 800;
}

.address-block + .address-block {
    margin-top: 21px;
}

.address-name {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 800;
}

.address-text,
.address-phone {
    margin: 0;
    font-size: 13px;
    line-height: 1.2;
}

.payment-logo {
    width: 93px;
    height: 31px;
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    font-size: 23px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.8px;
    color: #5aaa27;
}

.payment-logo span:first-child {
    color: #e92329;
    margin-right: 1px;
}

.card-installment {
    margin: 0 0 3px;
    font-size: 14px;
    font-weight: 800;
}

.card-paid {
    margin: 0 0 12px;
    font-size: 13px;
}

.payment-lines {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 7px;
}

.payment-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
}

.payment-line.pink {
    color: var(--acc-pink);
}

.payment-line strong {
    font-weight: 800;
}

.payment-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
    font-size: 15px;
    font-weight: 800;
}

.bonus-alert {
    min-height: 31px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 9px;
    border-radius: 5px;
    background: var(--acc-lime);
    color: #334000;
    font-size: 11.5px;
    font-weight: 700;
}

.bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.support-card {
    min-height: 82px;
}

.support-title {
    margin-bottom: 11px;
}

.support-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    min-width: 113px;
    border: 1px solid #1e2229;
    border-radius: 4px;
    background: #fff;
    font-size: 12px;
    font-weight: 800;
    transition: transform var(--acc-transition), color var(--acc-transition), border-color var(--acc-transition);
}

.support-btn:hover {
    transform: translateY(-1px);
    border-color: var(--acc-pink);
    color: var(--acc-pink);
}

.support-btn i {
    margin-right: 5px;
}

.legal-card {
    min-height: 82px;
    padding: 0;
    overflow: hidden;
}

.legal-link {
    height: 41px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    padding: 0 24px;
    font-size: 12px;
    font-weight: 700;
    border-bottom: 1px solid #edf0f4;
}

.legal-card button.legal-link {
    width: 100%;
    border-top: 0;
    border-right: 0;
    border-left: 0;
    background: #fff;
    color: inherit;
    text-align: left;
}

.legal-link:last-child {
    border-bottom: 0;
}

.legal-link i {
    color: #a3a8b1;
}

.legal-link:hover {
    color: var(--acc-pink);
}

@media (max-width: 991.98px) {
    .account-container {
        max-width: 760px;
    }

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

    .sidebar-user {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 190px;
        align-items: center;
        gap: 10px;
        padding: 10px;
    }

    .sidebar-hello {
        margin: 0;
    }

    .sidebar-menu {
        overflow-x: auto;
    }

    .sidebar-menu-list {
        flex-direction: row;
        width: max-content;
        min-width: 100%;
    }

    .sidebar-menu-link {
        white-space: nowrap;
    }

    .sidebar-help-list {
        flex-direction: row;
        overflow-x: auto;
    }

    .detail-grid,
    .bottom-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .account-page {
        padding-top: 14px;
    }

    .account-container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .account-breadcrumb {
        overflow-x: auto;
        padding-bottom: 2px;
        margin-bottom: 14px;
    }

    .sidebar-user {
        grid-template-columns: 1fr;
    }

    .sidebar-bonus {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 7px;
    }

    .bonus-row .bonus-arrow {
        display: none;
    }

    .page-title {
        font-size: 23px;
        margin-bottom: 13px;
    }

    .order-status-hero {
        align-items: flex-start;
        padding: 14px;
    }

    .status-title {
        font-size: 18px;
    }

    .status-meta {
        display: grid;
        grid-template-columns: 1fr;
        gap: 5px;
        font-size: 13px;
    }

    .status-meta .vr-line {
        display: none;
    }

    .progress-area {
        padding: 14px 14px 8px;
        overflow-x: auto;
    }

    .order-progress {
        min-width: 580px;
    }

    .shipment-bar {
        grid-template-columns: 1fr;
        gap: 9px;
        margin: 4px 10px 10px;
    }

    .cargo-no {
        white-space: normal;
    }

    .cargo-btn {
        width: 100%;
    }

    .products-list {
        padding: 0 10px 13px;
    }

    .product-row {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 11px;
    }

    .product-actions {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .store-question {
        height: auto;
        min-height: 36px;
        gap: 10px;
        font-size: 11.5px;
    }

    .info-card {
        padding: 14px;
    }

    .legal-link {
        justify-content: space-between;
        padding: 0 16px;
    }
}

@media (max-width: 420px) {
    .sidebar-bonus {
        grid-template-columns: 1fr;
    }

    .product-actions {
        grid-template-columns: 1fr;
    }

    .order-status-hero {
        gap: 10px;
    }

    .status-check {
        width: 23px;
        height: 23px;
        flex-basis: 23px;
    }
}



/*############################################################
<- SİPARİŞ DETAY
############################################################*/



/*############################################################
-> YORUMLAR DETAY
############################################################*/

.account-page{
    min-height:100vh;
    padding:17px 0 70px;
    background:#fff;
}

.account-container{
    max-width:1190px;
    margin:0 auto;
    padding-left:14px;
    padding-right:14px;
}

.account-breadcrumb{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:17px;
    color:#626a76;
    font-size:14px;
    font-weight:400;
    white-space:nowrap;
}

.account-breadcrumb i{
    color:#8c939e;
    font-size:13px;
}

.account-breadcrumb a:hover{
    color:var(--acc-pink);
}

.account-layout{
    display:grid;
    grid-template-columns:170px minmax(0, 1fr);
    gap:20px;
    align-items:start;
}

.account-sidebar{
    display:flex;
    flex-direction:column;
    gap:11px;
}

.sidebar-card{
    background:#fff;
    border:1px solid var(--acc-border);
    border-radius:var(--acc-radius);
    overflow:hidden;
    transition:border-color var(--acc-transition), box-shadow var(--acc-transition);
}

.sidebar-card:hover{
    border-color:#c9ced8;
    box-shadow:0 10px 22px rgba(18,25,38,.055);
}

.sidebar-user{
    padding:12px 8px 8px;
}

.sidebar-hello{
    margin:0 0 13px;
    font-size:15px;
    font-weight:700;
    letter-spacing:-.1px;
}

.sidebar-bonus{
    background:#eef1f6;
    border-radius:4px;
    padding:7px 8px;
}

.bonus-row{
    display:flex;
    align-items:center;
    gap:6px;
    min-height:24px;
    font-size:13px;
    font-weight:700;
}

.bonus-row i{
    width:16px;
    height:16px;
    border-radius:2px;
    background:#1d2026;
    color:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:9px;
}

.bonus-row .bonus-arrow{
    margin-left:auto;
    width:auto;
    height:auto;
    background:transparent;
    color:#202329;
    font-size:17px;
}

.sidebar-menu{
    padding:8px;
}

.sidebar-menu-list{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:2px;
}

.sidebar-menu-link{
    min-height:33px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 8px;
    border-radius:6px;
    color:#1a1d24;
    font-size:13px;
    font-weight:500;
    transition:background-color var(--acc-transition), color var(--acc-transition), transform var(--acc-transition);
}

.sidebar-menu-link i{
    width:16px;
    text-align:center;
    color:#666d78;
    font-size:15px;
    transition:color var(--acc-transition);
}

.sidebar-menu-link:hover{
    background:#f8f3fb;
    color:var(--acc-pink);
    transform:translateX(2px);
}

.sidebar-menu-link:hover i,
.sidebar-menu-link.active i{
    color:var(--acc-pink);
}

.sidebar-menu-link.active{
    background:var(--acc-pink-soft);
    color:var(--acc-pink);
    font-weight:700;
}

.sidebar-help-title{
    padding:11px 14px 10px;
    border-bottom:1px solid var(--acc-border);
    font-size:14px;
    font-weight:700;
}

.sidebar-help-list{
    padding:8px;
    display:flex;
    flex-direction:column;
    gap:2px;
}

.account-main{
    min-width:0;
}

.reviews-page-title{
    margin:3px 0 22px;
    font-size:24px;
    font-weight:800;
    letter-spacing:-.28px;
}

.reviews-tabs{
    display:flex;
    align-items:flex-end;
    gap:0;
    border-bottom:1px solid #d9dce3;
    margin-bottom:22px;
}

.reviews-tab{
    min-width:235px;
    height:38px;
    display:inline-flex;
    align-items:flex-start;
    justify-content:center;
    border:0;
    background:transparent;
    color:#141821;
    font-size:15px;
    font-weight:500;
    position:relative;
    transition:color var(--acc-transition);
}

.reviews-tab:hover{
    color:var(--acc-pink);
}

.reviews-tab.active{
    font-weight:800;
}

.reviews-tab.active::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-1px;
    height:2px;
    background:var(--acc-pink);
}

.reviews-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:15px;
}

.review-filter-year{
    width:150px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:0 13px;
    border:1px solid var(--acc-border);
    border-radius:6px;
    background:#fff;
    color:#252a34;
    font-size:13px;
    font-weight:500;
    transition:border-color var(--acc-transition), box-shadow var(--acc-transition);
}

.review-filter-year:hover{
    border-color:var(--acc-pink);
    box-shadow:0 8px 18px rgba(255,54,223,.08);
}

.review-sort-btn{
    height:40px;
    min-width:149px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:0 15px;
    border:1px solid var(--acc-border);
    border-radius:8px;
    background:#fff;
    color:#171b23;
    font-size:14px;
    font-weight:500;
    transition:border-color var(--acc-transition), color var(--acc-transition), box-shadow var(--acc-transition), transform var(--acc-transition);
}

.review-sort-btn:hover{
    color:var(--acc-pink);
    border-color:var(--acc-pink);
    transform:translateY(-1px);
    box-shadow:0 8px 18px rgba(255,54,223,.08);
}

.review-list-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px 14px;
}

.review-item-card{
    border:1px solid var(--acc-border);
    border-radius:10px;
    background:#fff;
    padding:15px 16px;
    transition:border-color var(--acc-transition), box-shadow var(--acc-transition), transform var(--acc-transition);
}

.review-item-card:hover{
    border-color:#c8ced8;
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(18,25,38,.055);
}

.review-item-inner{
    display:grid;
    grid-template-columns:78px minmax(0, 1fr);
    gap:15px;
    align-items:start;
}

.review-thumb-link{
    width:74px;
    height:74px;
    border:1px solid #d9dfe8;
    border-radius:8px;
    overflow:hidden;
    display:block;
    background:#fff;
    transition:transform var(--acc-transition);
}

.review-thumb-link:hover{
    transform:scale(1.04);
}

.review-product-bg{
    width:100%;
    height:100%;
    background:linear-gradient(135deg, #f3f4f7 0%, #e3e7ee 30%, #bfc8d6 45%, #d7dde8 46%, #f6f8fb 100%);
}

.review-product-bg.dark{
    background:
        linear-gradient(135deg, rgba(255,84,0,.22) 0%, rgba(255,84,0,0) 25%),
        linear-gradient(135deg, #222833 0%, #1d232c 50%, #2d3643 50%, #404a59 100%);
}

.review-product-bg.monitor{
    background:
        linear-gradient(180deg, #fdfefe 0%, #f1f3f6 100%);
    position:relative;
}

.review-product-bg.monitor::before{
    content:"";
    position:absolute;
    left:14px;
    right:14px;
    top:16px;
    height:28px;
    border-radius:2px;
    background:linear-gradient(135deg, #002b48, #4781a6 45%, #d9edf7 100%);
    border:2px solid #222631;
}

.review-product-bg.monitor::after{
    content:"";
    position:absolute;
    width:16px;
    height:20px;
    left:50%;
    bottom:11px;
    transform:translateX(-50%);
    border-bottom:3px solid #616775;
    border-left:3px solid transparent;
    border-right:3px solid transparent;
}

.review-product-bg.case{
    background:
        linear-gradient(135deg, #f4f5f8 0%, #e4e8ef 100%);
    position:relative;
}

.review-product-bg.case::before{
    content:"";
    position:absolute;
    left:23px;
    top:12px;
    width:27px;
    height:46px;
    border-radius:3px;
    background:linear-gradient(180deg, #353d4a, #232933);
    box-shadow:inset 0 0 0 2px #4f5867;
}

.review-product-bg.ram{
    background:linear-gradient(135deg, #f4f6f9, #eceff4);
    position:relative;
}

.review-product-bg.ram::before{
    content:"";
    position:absolute;
    left:8px;
    right:8px;
    top:30px;
    height:13px;
    border-radius:2px;
    background:#242933;
    box-shadow:0 0 0 2px #d6dce7;
}

.review-product-bg.ssd{
    background:linear-gradient(135deg, #f7f8fa, #eceff4);
    position:relative;
}

.review-product-bg.ssd::before{
    content:"";
    position:absolute;
    left:11px;
    right:11px;
    top:30px;
    height:11px;
    background:#20252d;
    border-radius:2px;
}

.review-product-bg.cable{
    background:linear-gradient(135deg, #fbfcfd, #edf1f5);
    position:relative;
}

.review-product-bg.cable::before{
    content:"";
    position:absolute;
    width:54px;
    height:54px;
    border-radius:50%;
    border:7px solid #1f232a;
    border-top-color:transparent;
    top:14px;
    left:10px;
}

.review-product-bg.paste{
    background:linear-gradient(135deg, #fbfcfd, #eef2f6);
    position:relative;
}

.review-product-bg.paste::before{
    content:"";
    position:absolute;
    width:44px;
    height:7px;
    background:#d8dee7;
    border-radius:4px;
    transform:rotate(-48deg);
    top:31px;
    left:14px;
    box-shadow:0 0 0 2px #bcc5d3 inset;
}

.review-title{
    margin:1px 0 7px;
    font-size:16px;
    font-weight:500;
    line-height:1.25;
    color:#1a1f28;
    letter-spacing:-.1px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.review-order-date{
    margin:0 0 9px;
    color:#5f6774;
    font-size:12.5px;
    font-weight:500;
}

.review-card-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}

.review-rating{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:max-content;
}

.review-rating .stars{
    display:flex;
    align-items:center;
    gap:1px;
    color:#17191f;
    font-size:12px;
    line-height:1;
}

.review-rating .score{
    font-size:14px;
    font-weight:700;
    min-width:26px;
    text-align:right;
}

.review-action-btn{
    height:30px;
    padding:0 14px;
    border:0;
    border-radius:6px;
    background:#17191f;
    color:#fff;
    font-size:12px;
    font-weight:800;
    transition:background-color var(--acc-transition), transform var(--acc-transition), box-shadow var(--acc-transition);
}

.review-action-btn:hover{
    background:#000;
    transform:translateY(-1px);
    box-shadow:0 8px 18px rgba(23,25,31,.15);
}

.review-modal .modal-dialog{
    max-width:400px;
    height: 100%;
}

.review-modal .modal-content{
    border:0;
    border-radius:0;
    min-height:100vh;
    box-shadow:none;
}

.review-modal .modal-header{
    height:66px;
    padding:0 16px;
    border-bottom:1px solid #e0e3e7;
    align-items:center;
}

.review-modal .btn-close{
    margin:0;
    padding:0;
    background:none;
    opacity:1;
    width:auto;
    height:auto;
    font-size:24px;
    line-height:1;
    color:#5b626d;
    box-shadow:none;
}

.review-modal .modal-title{
    flex:1;
    text-align:center;
    margin-right:24px;
    font-size:17px;
    font-weight:500;
    color:#374151;
}

.review-modal .modal-body{
    padding:0;
    background:#fff;
}

.review-popup-product{
    display:grid;
    grid-template-columns:72px minmax(0, 1fr);
    gap:13px;
    align-items:center;
    padding:11px 18px;
    background:#f1f1f1;
    border-bottom:1px solid #ededed;
}

.popup-product-thumb{
    width:60px;
    height:60px;
    border:1px solid #d6dce6;
    border-radius:6px;
    overflow:hidden;
    background:#fff;
    display:block;
}

.popup-product-title{
    margin:0;
    color:#17202d;
    font-size:14px;
    font-weight:500;
    line-height:1.25;
    letter-spacing:-.1px;
}

.review-popup-section{
    padding:18px 20px;
    border-bottom:1px solid #ededed;
}

.popup-rate-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.popup-question{
    margin:0;
    color:#11141b;
    font-size:18px;
    font-weight:800;
    letter-spacing:-.18px;
}

.popup-stars{
    display:flex;
    align-items:center;
    gap:6px;
}

.popup-stars button{
    width:32px;
    height:32px;
    padding:0;
    border:0;
    background:none;
    color:#d8d8d8;
    font-size:32px;
    line-height:1;
    transition:transform var(--acc-transition), color var(--acc-transition);
}

.popup-stars button:hover{
    transform:scale(1.07);
    color:#bdbdbd;
}

.popup-stars button.active{
    color:#17191f;
}

.popup-point-box{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:18px;
    padding:11px 13px;
    border-radius:9px;
    background:var(--acc-lime);
    color:#15171d;
    font-size:13px;
    line-height:1.35;
    font-weight:500;
}

.popup-point-box i{
    width:18px;
    height:18px;
    border-radius:3px;
    background:#202329;
    color:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    flex:0 0 18px;
}

.popup-textarea-wrap{
    margin-top:16px;
    position:relative;
}

.popup-textarea{
    width:100%;
    min-height:101px;
    resize:none;
    border:1px solid #b9bec8;
    border-radius:8px;
    padding:18px 18px 30px;
    font-size:16px;
    color:#222;
    outline:none;
    transition:border-color var(--acc-transition), box-shadow var(--acc-transition);
}

.popup-textarea::placeholder{
    color:#7b818c;
}

.popup-textarea:focus{
    border-color:var(--acc-pink);
    box-shadow:0 0 0 3px rgba(255,54,223,.08);
}

.popup-counter{
    position:absolute;
    right:12px;
    bottom:11px;
    color:#6b7380;
    font-size:13px;
    font-weight:500;
}

.popup-photo-row{
    display:flex;
    align-items:center;
    gap:12px;
    padding-top:16px;
}

.popup-photo-label{
    min-width:74px;
    color:#141820;
    font-size:16px;
    font-weight:800;
    line-height:1.05;
}

.popup-photo-optional{
    color:#808791;
    font-size:14px;
    font-weight:500;
}

.popup-photo-boxes{
    display:flex;
    align-items:center;
    gap:10px;
    margin-left:auto;
}

.popup-upload-box{
    width:58px;
    height:48px;
    border:1px dashed #909090;
    border-radius:6px;
    background:#fff;
    color:#202329;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:29px;
    transition:border-color var(--acc-transition), color var(--acc-transition), background-color var(--acc-transition);
}

.popup-upload-box:hover{
    border-color:var(--acc-pink);
    color:var(--acc-pink);
    background:#fff8fe;
}

.popup-sub-rating-title{
    margin:0 0 10px;
    font-size:17px;
    font-weight:800;
    color:#12161e;
    letter-spacing:-.12px;
}

.popup-sub-rating-title .optional{
    font-weight:500;
    color:#808791;
}

.popup-sub-rating-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}

.popup-sub-rating-left{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.popup-store-badge{
    min-width:27px;
    height:24px;
    padding:0 6px;
    border-radius:6px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#3cb94f;
    color:#fff;
    font-size:18px;
    font-weight:800;
    line-height:1;
}

.popup-store-name{
    font-size:18px;
    font-weight:800;
    color:#11141b;
}

.popup-cargo-name{
    font-size:18px;
    font-weight:700;
    color:#11141b;
}

.popup-switch-row{
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px 20px 15px;
    border-bottom:1px solid #ededed;
}

.popup-form-switch .form-check-input{
    width:55px;
    height:30px;
    margin-top:0;
    cursor:pointer;
    border-color:#cecece;
    background-color:#d9d9d9;
    box-shadow:none;
}

.popup-form-switch .form-check-input:checked{
    background-color:#17191f;
    border-color:#17191f;
}

.popup-switch-label{
    color:#4a505a;
    font-size:17px;
    font-weight:500;
}

.popup-rule-text{
    padding:18px 20px 24px;
    color:#777d88;
    font-size:14px;
    line-height:1.35;
}

.popup-rule-text a{
    color:#7a6f71;
    text-decoration:underline;
}

.popup-rule-text a:hover{
    color:var(--acc-pink);
}

@media (min-width: 576px){
    .review-modal .modal-dialog{
        margin:0 auto;
    }
    .review-modal .modal-content{
        min-height:auto;
        height:auto;
        border-radius:0;
    }
}

@media (max-width: 991.98px){
    .account-container{
        max-width:760px;
    }

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

    .sidebar-user{
        display:grid;
        grid-template-columns:minmax(0,1fr) 190px;
        align-items:center;
        gap:10px;
        padding:10px;
    }

    .sidebar-hello{
        margin:0;
    }

    .sidebar-menu{
        overflow-x:auto;
    }

    .sidebar-menu-list{
        flex-direction:row;
        width:max-content;
        min-width:100%;
    }

    .sidebar-menu-link{
        white-space:nowrap;
    }

    .sidebar-help-list{
        flex-direction:row;
        overflow-x:auto;
    }

    .review-list-grid{
        grid-template-columns:1fr;
    }
}

@media (max-width: 767.98px){
    .account-page{
        padding-top:14px;
    }

    .account-container{
        padding-left:12px;
        padding-right:12px;
    }

    .account-breadcrumb{
        overflow-x:auto;
        padding-bottom:2px;
        margin-bottom:14px;
    }

    .sidebar-user{
        grid-template-columns:1fr;
    }

    .sidebar-bonus{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:7px;
    }

    .bonus-row .bonus-arrow{
        display:none;
    }

    .reviews-page-title{
        font-size:22px;
        margin-bottom:16px;
    }

    .reviews-tabs{
        overflow-x:auto;
        white-space:nowrap;
    }

    .reviews-tab{
        min-width:220px;
        justify-content:flex-start;
        padding:0 12px;
    }

    .reviews-toolbar{
        flex-direction:column;
        align-items:stretch;
    }

    .review-filter-year{
        width:100%;
    }

    .review-sort-btn{
        width:100%;
    }

    .review-item-card{
        padding:14px;
    }

    .review-item-inner{
        grid-template-columns:68px minmax(0,1fr);
        gap:12px;
    }

    .review-thumb-link{
        width:64px;
        height:64px;
    }

    .review-title{
        font-size:15px;
    }

    .review-card-footer{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }

    .review-action-btn{
        width:100%;
        height:34px;
    }

    .review-modal .modal-dialog{
        max-width:100%;
        margin:0;
    }

    .review-modal .modal-content{
        min-height:100vh;
    }

    .review-modal .modal-header{
        padding:0 14px;
    }

    .review-modal .modal-title{
        margin-right:18px;
        font-size:16px;
    }

    .review-popup-product{
        grid-template-columns:64px minmax(0,1fr);
        gap:12px;
        padding:11px 14px;
    }

    .popup-product-thumb{
        width:58px;
        height:58px;
    }

    .review-popup-section{
        padding:16px 14px;
    }

    .popup-rate-row{
        flex-direction:column;
        align-items:flex-start;
    }

    .popup-question{
        font-size:16px;
    }

    .popup-stars{
        gap:4px;
    }

    .popup-stars button{
        width:28px;
        height:28px;
        font-size:28px;
    }

    .popup-textarea{
        min-height:96px;
        padding:16px 16px 28px;
        font-size:15px;
    }

    .popup-photo-row{
        flex-wrap:wrap;
        gap:10px;
    }

    .popup-photo-boxes{
        width:100%;
        margin-left:0;
        justify-content:flex-start;
    }

    .popup-sub-rating-row{
        flex-direction:column;
        align-items:flex-start;
    }

    .popup-switch-row{
        padding:14px;
    }

    .popup-rule-text{
        padding:16px 14px 22px;
    }
}

@media (max-width: 420px){
    .sidebar-bonus{
        grid-template-columns:1fr;
    }

    .popup-photo-boxes{
        gap:8px;
    }

    .popup-upload-box{
        width:52px;
        height:46px;
    }
}




/*############################################################
<- YORUMLAR
############################################################*/




/*############################################################
-> DEĞERLENDİRMELER
############################################################*/



.comment-page{
    min-height:100vh;
    padding:17px 0 70px;
    background:#fff;
}

.comment-container{
    max-width:1190px;
    margin:0 auto;
    padding-left:14px;
    padding-right:14px;
}

.comment-breadcrumb{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:17px;
    color:#626a76;
    font-size:14px;
    font-weight:400;
    white-space:nowrap;
}

.comment-breadcrumb i{
    color:#8c939e;
    font-size:13px;
}

.comment-breadcrumb a:hover{
    color:var(--acc-pink);
}

.comment-layout{
    display:grid;
    grid-template-columns:170px minmax(0, 1fr);
    gap:20px;
    align-items:start;
}

.comment-sidebar{
    display:flex;
    flex-direction:column;
    gap:11px;
}

.sidebar-card{
    background:#fff;
    border:1px solid var(--acc-border);
    border-radius:var(--acc-radius);
    overflow:hidden;
    transition:border-color var(--acc-transition), box-shadow var(--acc-transition);
}

.sidebar-card:hover{
    border-color:#c9ced8;
    box-shadow:0 10px 22px rgba(18,25,38,.055);
}

.sidebar-user{
    padding:12px 8px 8px;
}

.sidebar-hello{
    margin:0 0 13px;
    font-size:15px;
    font-weight:700;
    letter-spacing:-.1px;
}

.sidebar-bonus{
    background:#eef1f6;
    border-radius:4px;
    padding:7px 8px;
}

.bonus-row{
    display:flex;
    align-items:center;
    gap:6px;
    min-height:24px;
    font-size:13px;
    font-weight:700;
}

.bonus-row i{
    width:16px;
    height:16px;
    border-radius:2px;
    background:#1d2026;
    color:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:9px;
}

.bonus-row .bonus-arrow{
    margin-left:auto;
    width:auto;
    height:auto;
    background:transparent;
    color:#202329;
    font-size:17px;
}

.sidebar-menu{
    padding:8px;
}

.sidebar-menu-list{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:2px;
}

.sidebar-menu-link{
    min-height:33px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 8px;
    border-radius:6px;
    color:#1a1d24;
    font-size:13px;
    font-weight:500;
    transition:background-color var(--acc-transition), color var(--acc-transition), transform var(--acc-transition);
}

.sidebar-menu-link i{
    width:16px;
    text-align:center;
    color:#666d78;
    font-size:15px;
    transition:color var(--acc-transition);
}

.sidebar-menu-link:hover{
    background:#f8f3fb;
    color:var(--acc-pink);
    transform:translateX(2px);
}

.sidebar-menu-link:hover i,
.sidebar-menu-link.active i{
    color:var(--acc-pink);
}

.sidebar-menu-link.active{
    background:var(--acc-pink-soft);
    color:var(--acc-pink);
    font-weight:700;
}

.sidebar-help-title{
    padding:11px 14px 10px;
    border-bottom:1px solid var(--acc-border);
    font-size:14px;
    font-weight:700;
}

.sidebar-help-list{
    padding:8px;
    display:flex;
    flex-direction:column;
    gap:2px;
}

.comment-main{
    min-width:0;
}

.reviews-page-title{
    margin:3px 0 22px;
    font-size:24px;
    font-weight:800;
    letter-spacing:-.28px;
}

.reviews-tabs{
    display:flex;
    align-items:flex-end;
    gap:0;
    border-bottom:1px solid #d9dce3;
    margin-bottom:22px;
}

.reviews-tab{
    min-width:235px;
    height:38px;
    display:inline-flex;
    align-items:flex-start;
    justify-content:center;
    border:0;
    background:transparent;
    color:#141821;
    font-size:15px;
    font-weight:500;
    position:relative;
    transition:color var(--acc-transition);
}

.reviews-tab:hover{
    color:var(--acc-pink);
}

.reviews-tab.active{
    font-weight:800;
}

.reviews-tab.active::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-1px;
    height:2px;
    background:var(--acc-pink);
}

.reviews-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:15px;
}

.review-filter-year{
    width:150px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:0 13px;
    border:1px solid var(--acc-border);
    border-radius:6px;
    background:#fff;
    color:#252a34;
    font-size:13px;
    font-weight:500;
    transition:border-color var(--acc-transition), box-shadow var(--acc-transition);
}

.review-filter-year:hover{
    border-color:var(--acc-pink);
    box-shadow:0 8px 18px rgba(255,54,223,.08);
}

.review-sort-btn{
    height:40px;
    min-width:149px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:0 15px;
    border:1px solid var(--acc-border);
    border-radius:8px;
    background:#fff;
    color:#171b23;
    font-size:14px;
    font-weight:500;
    transition:border-color var(--acc-transition), color var(--acc-transition), box-shadow var(--acc-transition), transform var(--acc-transition);
}

.review-sort-btn:hover{
    color:var(--acc-pink);
    border-color:var(--acc-pink);
    transform:translateY(-1px);
    box-shadow:0 8px 18px rgba(255,54,223,.08);
}

.review-list-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px 14px;
}

.review-item-card{
    border:1px solid var(--acc-border);
    border-radius:10px;
    background:#fff;
    padding:15px 16px;
    transition:border-color var(--acc-transition), box-shadow var(--acc-transition), transform var(--acc-transition);
}

.review-item-card:hover{
    border-color:#c8ced8;
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(18,25,38,.055);
}

.review-item-inner{
    display:grid;
    grid-template-columns:78px minmax(0, 1fr);
    gap:15px;
    align-items:start;
}

.review-thumb-link{
    width:74px;
    height:74px;
    border:1px solid #d9dfe8;
    border-radius:8px;
    overflow:hidden;
    display:block;
    background:#fff;
    transition:transform var(--acc-transition);
}

.review-thumb-link:hover{
    transform:scale(1.04);
}

.review-product-bg{
    width:100%;
    height:100%;
    background:linear-gradient(135deg, #f3f4f7 0%, #e3e7ee 30%, #bfc8d6 45%, #d7dde8 46%, #f6f8fb 100%);
}

.review-product-bg.dark{
    background:
        linear-gradient(135deg, rgba(255,84,0,.22) 0%, rgba(255,84,0,0) 25%),
        linear-gradient(135deg, #222833 0%, #1d232c 50%, #2d3643 50%, #404a59 100%);
}

.review-product-bg.monitor{
    background:
        linear-gradient(180deg, #fdfefe 0%, #f1f3f6 100%);
    position:relative;
}

.review-product-bg.monitor::before{
    content:"";
    position:absolute;
    left:14px;
    right:14px;
    top:16px;
    height:28px;
    border-radius:2px;
    background:linear-gradient(135deg, #002b48, #4781a6 45%, #d9edf7 100%);
    border:2px solid #222631;
}

.review-product-bg.monitor::after{
    content:"";
    position:absolute;
    width:16px;
    height:20px;
    left:50%;
    bottom:11px;
    transform:translateX(-50%);
    border-bottom:3px solid #616775;
    border-left:3px solid transparent;
    border-right:3px solid transparent;
}

.review-product-bg.case{
    background:
        linear-gradient(135deg, #f4f5f8 0%, #e4e8ef 100%);
    position:relative;
}

.review-product-bg.case::before{
    content:"";
    position:absolute;
    left:23px;
    top:12px;
    width:27px;
    height:46px;
    border-radius:3px;
    background:linear-gradient(180deg, #353d4a, #232933);
    box-shadow:inset 0 0 0 2px #4f5867;
}

.review-product-bg.ram{
    background:linear-gradient(135deg, #f4f6f9, #eceff4);
    position:relative;
}

.review-product-bg.ram::before{
    content:"";
    position:absolute;
    left:8px;
    right:8px;
    top:30px;
    height:13px;
    border-radius:2px;
    background:#242933;
    box-shadow:0 0 0 2px #d6dce7;
}

.review-product-bg.ssd{
    background:linear-gradient(135deg, #f7f8fa, #eceff4);
    position:relative;
}

.review-product-bg.ssd::before{
    content:"";
    position:absolute;
    left:11px;
    right:11px;
    top:30px;
    height:11px;
    background:#20252d;
    border-radius:2px;
}

.review-product-bg.cable{
    background:linear-gradient(135deg, #fbfcfd, #edf1f5);
    position:relative;
}

.review-product-bg.cable::before{
    content:"";
    position:absolute;
    width:54px;
    height:54px;
    border-radius:50%;
    border:7px solid #1f232a;
    border-top-color:transparent;
    top:14px;
    left:10px;
}

.review-product-bg.paste{
    background:linear-gradient(135deg, #fbfcfd, #eef2f6);
    position:relative;
}

.review-product-bg.paste::before{
    content:"";
    position:absolute;
    width:44px;
    height:7px;
    background:#d8dee7;
    border-radius:4px;
    transform:rotate(-48deg);
    top:31px;
    left:14px;
    box-shadow:0 0 0 2px #bcc5d3 inset;
}

.review-title{
    margin:1px 0 7px;
    font-size:16px;
    font-weight:500;
    line-height:1.25;
    color:#1a1f28;
    letter-spacing:-.1px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.review-order-date{
    margin:0 0 9px;
    color:#5f6774;
    font-size:12.5px;
    font-weight:500;
}

.review-card-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}

.review-rating{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:max-content;
}

.review-rating .stars{
    display:flex;
    align-items:center;
    gap:1px;
    color:#17191f;
    font-size:12px;
    line-height:1;
}

.review-rating .score{
    font-size:14px;
    font-weight:700;
    min-width:26px;
    text-align:right;
}

.review-action-btn{
    height:30px;
    padding:0 14px;
    border:0;
    border-radius:6px;
    background:#17191f;
    color:#fff;
    font-size:12px;
    font-weight:800;
    transition:background-color var(--acc-transition), transform var(--acc-transition), box-shadow var(--acc-transition);
}

.review-action-btn:hover{
    background:#000;
    transform:translateY(-1px);
    box-shadow:0 8px 18px rgba(23,25,31,.15);
}

.review-modal .modal-dialog{
    max-width:400px;
    height: 100%;
}

.review-modal .modal-content{
    border:0;
    border-radius:0;
    min-height:100vh;
    box-shadow:none;
}

.review-modal .modal-header{
    height:66px;
    padding:0 16px;
    border-bottom:1px solid #e0e3e7;
    align-items:center;
}

.review-modal .btn-close{
    margin:0;
    padding:0;
    background:none;
    opacity:1;
    width:auto;
    height:auto;
    font-size:24px;
    line-height:1;
    color:#5b626d;
    box-shadow:none;
}

.review-modal .modal-title{
    flex:1;
    text-align:center;
    margin-right:24px;
    font-size:17px;
    font-weight:500;
    color:#374151;
}

.review-modal .modal-body{
    padding:0;
    background:#fff;
}

.review-popup-product{
    display:grid;
    grid-template-columns:72px minmax(0, 1fr);
    gap:13px;
    align-items:center;
    padding:11px 18px;
    background:#f1f1f1;
    border-bottom:1px solid #ededed;
}

.popup-product-thumb{
    width:60px;
    height:60px;
    border:1px solid #d6dce6;
    border-radius:6px;
    overflow:hidden;
    background:#fff;
    display:block;
}

.popup-product-title{
    margin:0;
    color:#17202d;
    font-size:14px;
    font-weight:500;
    line-height:1.25;
    letter-spacing:-.1px;
}

.review-popup-section{
    padding:18px 20px;
    border-bottom:1px solid #ededed;
}

.popup-rate-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.popup-question{
    margin:0;
    color:#11141b;
    font-size:18px;
    font-weight:800;
    letter-spacing:-.18px;
}

.popup-stars{
    display:flex;
    align-items:center;
    gap:6px;
}

.popup-stars button{
    width:32px;
    height:32px;
    padding:0;
    border:0;
    background:none;
    color:#d8d8d8;
    font-size:32px;
    line-height:1;
    transition:transform var(--acc-transition), color var(--acc-transition);
}

.popup-stars button:hover{
    transform:scale(1.07);
    color:#bdbdbd;
}

.popup-stars button.active{
    color:#17191f;
}

.popup-point-box{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:18px;
    padding:11px 13px;
    border-radius:9px;
    background:var(--acc-lime);
    color:#15171d;
    font-size:13px;
    line-height:1.35;
    font-weight:500;
}

.popup-point-box i{
    width:18px;
    height:18px;
    border-radius:3px;
    background:#202329;
    color:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    flex:0 0 18px;
}

.popup-textarea-wrap{
    margin-top:16px;
    position:relative;
}

.popup-textarea{
    width:100%;
    min-height:101px;
    resize:none;
    border:1px solid #b9bec8;
    border-radius:8px;
    padding:18px 18px 30px;
    font-size:16px;
    color:#222;
    outline:none;
    transition:border-color var(--acc-transition), box-shadow var(--acc-transition);
}

.popup-textarea::placeholder{
    color:#7b818c;
}

.popup-textarea:focus{
    border-color:var(--acc-pink);
    box-shadow:0 0 0 3px rgba(255,54,223,.08);
}

.popup-counter{
    position:absolute;
    right:12px;
    bottom:11px;
    color:#6b7380;
    font-size:13px;
    font-weight:500;
}

.popup-photo-row{
    display:flex;
    align-items:center;
    gap:12px;
    padding-top:16px;
}

.popup-photo-label{
    min-width:74px;
    color:#141820;
    font-size:16px;
    font-weight:800;
    line-height:1.05;
}

.popup-photo-optional{
    color:#808791;
    font-size:14px;
    font-weight:500;
}

.popup-photo-boxes{
    display:flex;
    align-items:center;
    gap:10px;
    margin-left:auto;
}

.popup-upload-box{
    width:58px;
    height:48px;
    border:1px dashed #909090;
    border-radius:6px;
    background:#fff;
    color:#202329;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:29px;
    transition:border-color var(--acc-transition), color var(--acc-transition), background-color var(--acc-transition);
}

.popup-upload-box:hover{
    border-color:var(--acc-pink);
    color:var(--acc-pink);
    background:#fff8fe;
}

.popup-sub-rating-title{
    margin:0 0 10px;
    font-size:17px;
    font-weight:800;
    color:#12161e;
    letter-spacing:-.12px;
}

.popup-sub-rating-title .optional{
    font-weight:500;
    color:#808791;
}

.popup-sub-rating-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}

.popup-sub-rating-left{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.popup-store-badge{
    min-width:27px;
    height:24px;
    padding:0 6px;
    border-radius:6px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#3cb94f;
    color:#fff;
    font-size:18px;
    font-weight:800;
    line-height:1;
}

.popup-store-name{
    font-size:18px;
    font-weight:800;
    color:#11141b;
}

.popup-cargo-name{
    font-size:18px;
    font-weight:700;
    color:#11141b;
}

.popup-switch-row{
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px 20px 15px;
    border-bottom:1px solid #ededed;
}

.popup-form-switch .form-check-input{
    width:55px;
    height:30px;
    margin-top:0;
    cursor:pointer;
    border-color:#cecece;
    background-color:#d9d9d9;
    box-shadow:none;
}

.popup-form-switch .form-check-input:checked{
    background-color:#17191f;
    border-color:#17191f;
}

.popup-switch-label{
    color:#4a505a;
    font-size:17px;
    font-weight:500;
}

.popup-rule-text{
    padding:18px 20px 24px;
    color:#777d88;
    font-size:14px;
    line-height:1.35;
}

.popup-rule-text a{
    color:#7a6f71;
    text-decoration:underline;
}

.popup-rule-text a:hover{
    color:var(--acc-pink);
}

@media (min-width: 576px){
    .review-modal .modal-dialog{
        margin:0 auto;
    }
    .review-modal .modal-content{
        min-height:auto;
        height:auto;
        border-radius:0;
    }
}

@media (max-width: 991.98px){
    .comment-container{
        max-width:760px;
    }

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

    .sidebar-user{
        display:grid;
        grid-template-columns:minmax(0,1fr) 190px;
        align-items:center;
        gap:10px;
        padding:10px;
    }

    .sidebar-hello{
        margin:0;
    }

    .sidebar-menu{
        overflow-x:auto;
    }

    .sidebar-menu-list{
        flex-direction:row;
        width:max-content;
        min-width:100%;
    }

    .sidebar-menu-link{
        white-space:nowrap;
    }

    .sidebar-help-list{
        flex-direction:row;
        overflow-x:auto;
    }

    .review-list-grid{
        grid-template-columns:1fr;
    }
}

@media (max-width: 767.98px){
    .comment-page{
        padding-top:14px;
    }

    .comment-container{
        padding-left:12px;
        padding-right:12px;
    }

    .comment-breadcrumb{
        overflow-x:auto;
        padding-bottom:2px;
        margin-bottom:14px;
    }

    .sidebar-user{
        grid-template-columns:1fr;
    }

    .sidebar-bonus{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:7px;
    }

    .bonus-row .bonus-arrow{
        display:none;
    }

    .reviews-page-title{
        font-size:22px;
        margin-bottom:16px;
    }

    .reviews-tabs{
        overflow-x:auto;
        white-space:nowrap;
    }

    .reviews-tab{
        min-width:220px;
        justify-content:flex-start;
        padding:0 12px;
    }

    .reviews-toolbar{
        flex-direction:column;
        align-items:stretch;
    }

    .review-filter-year{
        width:100%;
    }

    .review-sort-btn{
        width:100%;
    }

    .review-item-card{
        padding:14px;
    }

    .review-item-inner{
        grid-template-columns:68px minmax(0,1fr);
        gap:12px;
    }

    .review-thumb-link{
        width:64px;
        height:64px;
    }

    .review-title{
        font-size:15px;
    }

    .review-card-footer{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }

    .review-action-btn{
        width:100%;
        height:34px;
    }

    .review-modal .modal-dialog{
        max-width:100%;
        margin:0;
    }

    .review-modal .modal-content{
        min-height:100vh;
    }

    .review-modal .modal-header{
        padding:0 14px;
    }

    .review-modal .modal-title{
        margin-right:18px;
        font-size:16px;
    }

    .review-popup-product{
        grid-template-columns:64px minmax(0,1fr);
        gap:12px;
        padding:11px 14px;
    }

    .popup-product-thumb{
        width:58px;
        height:58px;
    }

    .review-popup-section{
        padding:16px 14px;
    }

    .popup-rate-row{
        flex-direction:column;
        align-items:flex-start;
    }

    .popup-question{
        font-size:16px;
    }

    .popup-stars{
        gap:4px;
    }

    .popup-stars button{
        width:28px;
        height:28px;
        font-size:28px;
    }

    .popup-textarea{
        min-height:96px;
        padding:16px 16px 28px;
        font-size:15px;
    }

    .popup-photo-row{
        flex-wrap:wrap;
        gap:10px;
    }

    .popup-photo-boxes{
        width:100%;
        margin-left:0;
        justify-content:flex-start;
    }

    .popup-sub-rating-row{
        flex-direction:column;
        align-items:flex-start;
    }

    .popup-switch-row{
        padding:14px;
    }

    .popup-rule-text{
        padding:16px 14px 22px;
    }
}

@media (max-width: 420px){
    .sidebar-bonus{
        grid-template-columns:1fr;
    }

    .popup-photo-boxes{
        gap:8px;
    }

    .popup-upload-box{
        width:52px;
        height:46px;
    }
}


.history-title {
    margin: 3px 0 28px;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.28px;
}

.history-tabs {
    display: flex;
    align-items: flex-end;
    border-bottom: 1px solid #d9dce3;
    margin-bottom: 30px;
}

.history-tab {
    min-width: 300px;
    height: 40px;
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    border: 0;
    background: transparent;
    color: #141821;
    font-size: 16px;
    font-weight: 500;
    position: relative;
    transition: color var(--acc-transition);
}

.history-tab:hover {
    color: var(--acc-pink);
}

.history-tab.active {
    font-weight: 800;
}

.history-tab.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--acc-pink);
}

.history-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.history-year-btn {
    width: 154px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 14px;
    border: 1px solid var(--acc-border);
    border-radius: 6px;
    background: #fff;
    color: #252a34;
    font-size: 14px;
    font-weight: 500;
    transition: border-color var(--acc-transition), box-shadow var(--acc-transition);
}

.history-year-btn:hover {
    border-color: var(--acc-pink);
    box-shadow: 0 8px 18px rgba(255, 54, 223, .08);
}

.history-sort-btn {
    height: 42px;
    min-width: 170px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 17px;
    border: 1px solid var(--acc-border);
    border-radius: 8px;
    background: #fff;
    color: #171b23;
    font-size: 15px;
    font-weight: 800;
    transition: border-color var(--acc-transition), color var(--acc-transition), box-shadow var(--acc-transition), transform var(--acc-transition);
}

.history-sort-btn i {
    font-size: 18px;
}

.history-sort-btn:hover {
    color: var(--acc-pink);
    border-color: var(--acc-pink);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(255, 54, 223, .08);
}

.history-review-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 17px;
}

.history-review-card {
    position: relative;
    min-height: 172px;
    border: 1px solid var(--acc-border);
    border-radius: 8px;
    background: #fff;
    padding: 35px 20px 25px;
    transition: transform var(--acc-transition), border-color var(--acc-transition), box-shadow var(--acc-transition);
}

.history-review-card:hover {
    transform: translateY(-2px);
    border-color: #c8ced8;
    box-shadow: 0 10px 24px rgba(18, 25, 38, .055);
}

.history-card-actions {
    position: absolute;
    top: 14px;
    right: 19px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--acc-pink);
    font-size: 14px;
    font-weight: 700;
}

.history-card-actions button,
.history-card-actions a {
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--acc-pink);
    font: inherit;
    transition: color var(--acc-transition);
}

.history-card-actions button:hover,
.history-card-actions a:hover {
    color: #d900bd;
}

.history-review-top {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 14px;
    padding-right: 68px;
    margin-bottom: 13px;
}

.history-thumb-link {
    width: 82px;
    height: 82px;
    border: 1px solid #d9dfe8;
    border-radius: 7px;
    overflow: hidden;
    display: block;
    background: #fff;
    transition: transform var(--acc-transition);
}

.history-thumb-link:hover {
    transform: scale(1.04);
}

.history-review-bg {
    width: 100%;
    height: 100%;
    display: block;
    background: linear-gradient(135deg, #f3f4f7 0%, #e3e7ee 30%, #bfc8d6 45%, #d7dde8 46%, #f6f8fb 100%);
}

.history-review-bg.tablet {
    background:
        radial-gradient(circle at 50% 34%, rgba(255, 255, 255, .9) 0 14%, transparent 15%),
        linear-gradient(135deg, #eff6ff 0%, #dbeafe 34%, #3b82f6 35%, #60a5fa 72%, #dbeafe 73%);
}

.history-review-bg.headphone {
    background:
        radial-gradient(circle at 42% 44%, #ffe5ef 0 18%, transparent 19%),
        radial-gradient(circle at 64% 43%, #ffe5ef 0 18%, transparent 19%),
        linear-gradient(135deg, #fff 0%, #f4f6f9 100%);
    position: relative;
}

.history-review-bg.headphone::before {
    content: "";
    position: absolute;
    width: 45px;
    height: 45px;
    left: 18px;
    top: 13px;
    border-radius: 50% 50% 0 0;
    border: 7px solid #f5b2c8;
    border-bottom: 0;
}

.history-product-title {
    margin: 4px 0 15px;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.24;
    letter-spacing: -.15px;
    color: #151922;
}

.history-order-date {
    margin: 0;
    color: #19202b;
    font-size: 14px;
    font-weight: 500;
}

.history-comment-box {
    min-height: 82px;
    padding: 16px 18px;
    border-radius: 6px;
    background: #f3f3f3;
}

.history-rating-row {
    display: flex;
    align-items: center;
    gap: 27px;
    margin-bottom: 9px;
}

.history-stars {
    display: flex;
    align-items: center;
    gap: 1px;
    color: #15171f;
    font-size: 14px;
    line-height: 1;
}

.history-score {
    color: #15171f;
    font-size: 17px;
    font-weight: 800;
}

.history-comment-text {
    margin: 0;
    color: #151922;
    font-size: 14px;
    line-height: 1.32;
}

.history-comment-text strong {
    font-weight: 800;
}
.rewpopup-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}
.rewpopup-footer button {
    width: 90%;
    background-color: #777777;
    color: #fff;
}
.rewpopup-footer button:hover {
    background-color: #303030;
    color: #fff;
}

/*############################################################
<- DEĞERLENDİRMELER
############################################################*/
.review-product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.review-image-strip {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.review-image-strip img,
.popup-upload-box.has-image img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
}

.popup-stars button.active {
    color: #f6b400;
}

.account-empty-state {
    padding: 24px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 8px;
    color: #667085;
}