@font-face {
    font-family: 'Figtree';
    src: url('Fonts/Figtree-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Figtree';
    src: url('Fonts/Figtree-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Figtree';
    src: url('Fonts/Figtree-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Figtree';
    src: url('Fonts/Figtree-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Figtree';
    src: url('Fonts/Figtree-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Figtree';
    src: url('Fonts/Figtree-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Figtree';
    src: url('Fonts/Figtree-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Figtree';
    src: url('Fonts/Figtree-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('Fonts/OpenSans-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('Fonts/OpenSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('Fonts/OpenSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('Fonts/OpenSans-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('Fonts/OpenSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('Fonts/OpenSans-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}


/* ==========================================================================
   GENEL RESET & GLOBAL STİLLER
   Kullanıldığı yer: Tüm sayfalar — html, body, * global elementler
   ========================================================================== */
/* General Bootstrap */

html {
    font-size: 100px;
    font-weight: 400;
    font-family: 'Figtree', sans-serif;
    overflow-x: hidden;
    overflow-y: auto;
    font-variant-ligatures: none;
    -webkit-font-variant-ligatures: none;
    -webkit-font-smoothing: antialiased;
}

html.lock {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    position: relative;
    min-height: 100vh;
    font-size: 0;
    background-color: #F5F8FF;
    color: #121212;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-appearance: none !important;
    -webkit-font-smoothing: antialiased;
}

*:focus {
    outline: none !important;
}

a {
    text-decoration: none;
}

b,
strong {
    font-weight: 700;
}

.vcenter {
    font-size: 0;
}

.vcenter>* {
    display: inline-block;
    vertical-align: middle;
}

.vcenter:before {
    content: '';
    display: inline-block;
    height: 100%;
    width: 0;
    vertical-align: middle;
}

.font * {
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

.font a {
    color: inherit;
}

.font img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
}


/* ==========================================================================
   SOSYAL MEDYA İKONLARI
   Kullanıldığı yer: Views/Shared/Footer.cshtml — a.social-icon.facebook vb.
   ========================================================================== */
/* Social Icons */

a.social-icon {
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    display: inline-block;
}

a.social-icon:before {
    font-family: FontAwesome;
    font-size: inherit;
    color: inherit;
    line-height: inherit;
}

a.social-icon.facebook:before {
    content: '\f09a';
}

a.social-icon.facebook-square:before {
    content: '\f082';
}

a.social-icon.facebook-official:before {
    content: '\f230';
}

a.social-icon.twitter:before {
    content: '\f099';
}

a.social-icon.twitter-square:before {
    content: '\f081';
}

a.social-icon.youtube:before {
    content: '\f16a';
}

a.social-icon.instagram:before {
    content: '\f16d';
}

a.social-icon.linkedin:before {
    content: '\f0e1';
}

a.social-icon.spotify:before {
    content: '\f1bc';
}

a.social-icon.medium:before {
    content: '\f23a';
}

a.social-icon.vimeo:before {
    content: '\f27d';
}

a.social-icon.facebook:hover,
a.social-icon.facebook-square:hover,
a.social-icon.facebook-official:hover {
    color: #3c5a96;
}

a.social-icon.facebook:active,
a.social-icon.facebook-square:active,
a.social-icon.facebook-official:active {
    color: #253e6f;
}

a.social-icon.twitter:hover,
a.social-icon.twitter-square:hover {
    color: #1dcaff;
}

a.social-icon.twitter:active,
a.social-icon.twitter-square:active {
    color: #00aced;
}

a.social-icon.youtube:hover {
    color: #e03130;
}

a.social-icon.youtube:active {
    color: #b11618;
}

a.social-icon.instagram:hover {
    color: #EE583F;
}

a.social-icon.instagram:active {
    color: #BD3381;
}

a.social-icon.linkedin:hover {
    color: #1176b5;
}

a.social-icon.linkedin:active {
    color: #0f496a
}

a.social-icon.spotify:hover {
    color: #1db954;
}

a.social-icon.spotify:active {
    color: #1d9e74
}


/* ==========================================================================
   YÜKLEME ANİMASYONU
   Kullanıldığı yer: Tüm sayfalar — alca.js tarafından gösterilir/gizlenir
   ========================================================================== */
/* Loading */

.loading {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: fixed;
    z-index: 999;
    background: rgba(0, 0, 0, .75);
    display: none;
}

.loading .load {
    width: 150px;
    animation: loading 3s linear infinite;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -75px;
    margin-top: -75px;
}

.loading .load .loading-inner {
    stroke-dashoffset: 0;
    stroke-dasharray: 300;
    stroke-width: 10;
    stroke-miterlimit: 10;
    stroke-linecap: round;
    animation: loading-circle 2s linear infinite;
    stroke: #F44336;
    fill: transparent;
}

@keyframes loading {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes loading-circle {
    0% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: -600;
    }
}



/* ==========================================================================
   CONTAINER & GENEL YARDIMCI SINIFLAR
   Kullanıldığı yer: Tüm sayfalar — .container, .full-width, .vcenter
   ========================================================================== */
/* General */

.container {
    position: relative;
    width: 16rem;
    max-width: 100%;
    padding-left: .3rem;
    padding-right: .3rem;
    margin-left: auto;
    margin-right: auto;
}


/* ==========================================================================
   BUTONLAR
   Kullanıldığı yer: Tüm formlar ve section'lar — .btn-default, .btn-icon, .btn-add
   ========================================================================== */
/* Buttons */

.btn-default {
    display: inline-block;
    vertical-align: middle;
    height: .52rem;
    padding-left: .32rem;
    padding-right: .32rem;
    text-align: center;
    border-radius: .32rem;
    background-color: #F44336;
    outline: none;
    border: none;
    cursor: pointer;
}

.btn-default:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    width: 0;
}

.btn-default span {
    display: inline-block;
    vertical-align: middle;
    font-weight: 600;
    font-size: .16rem;
    line-height: 1.25em;
    color: white;
}

.btn-default.blue {
    background-color: #005BA6;
}

.btn-default.white {
    background-color: white;
}

.btn-default.white span {
    color: #F44336;
}

.btn-default.large {
    height: .64rem;
}

.btn-default.large span {
    font-size: .18rem;
    line-height: 1.22em;
}

.btn-default.outline {
    background-color: transparent;
    border: 1px solid #F44336;
}

.btn-default img {
    width: .18rem;
    height: .18rem;
    vertical-align: middle;
    margin-right: .04rem;
}

.btn-default.outline span {
    color: #F44336;
}

.btn-icon {
    display: inline-block;
    vertical-align: middle;
    height: .5rem;
    padding-left: .24rem;
    padding-right: .24rem;
    border-radius: .04rem;
    background-color: #FCF9FA;
    border: 1px solid #C7E6C7;
}

.btn-icon:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: 100%;
}

.btn-icon img {
    display: inline-block;
    vertical-align: middle;
    width: .26rem;
}

.btn-icon span {
    display: inline-block;
    vertical-align: middle;
    font-weight: 600;
    font-size: .15rem;
    line-height: 1.2em;
    color: #F44336;
    text-align: center;
}

.btn-icon *+span {
    max-width: calc(100% - .36rem);
    margin-left: .1rem;
}

.btn-add {
    display: inline-block;
    vertical-align: middle;
    height: .4rem;
    padding-left: .24rem;
    padding-right: .24rem;
    border-radius: .04rem;
    background-color: #E8F5E8;
}

.btn-add:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: 100%;
}

.btn-add img {
    display: inline-block;
    vertical-align: middle;
    width: .1rem;
}

.btn-add span {
    display: inline-block;
    vertical-align: middle;
    font-weight: 600;
    font-size: .14rem;
    line-height: 1.2em;
    color: #F44336;
    text-align: center;
}

.btn-add *+span {
    max-width: calc(100% - .18rem);
    margin-left: .08rem;
}


/* ==========================================================================
   FORMLAR — GENEL
   Kullanıldığı yer: Views/Product/ProductDonation.cshtml, Views/Auth/Login.cshtml
   Elementler: form.general — input, textarea, .phone, .float label animasyonu
   ========================================================================== */
/* Forms */

form.general .form-item {
    position: relative;
}

form.general .form-item label.small {
    display: block;
    margin-bottom: .08rem;
    font-weight: 600;
    font-size: .15rem;
    line-height: 1.2em;
    color: #121212;
}

form.general .form-item input[type='text'],
form.general .form-item input[type='number'],
form.general .form-item input[type='email'],
form.general .form-item input[type='password'],
form.general .form-item input[type='date'],
form.general .form-item textarea {
    display: block;
    width: 100%;
    height: .56rem;
    padding-left: .2rem;
    padding-right: .2rem;
    font-weight: 500;
    font-size: .18rem;
    line-height: 1.22em;
    color: #121212;
    border-radius: .32rem;
    background-color: white;
    border: 1px solid #C3C3C3;
    box-shadow: none;
    outline: none;
}

form.general .form-item input[type='text']:focus,
form.general .form-item input[type='number']:focus,
form.general .form-item input[type='email']:focus,
form.general .form-item input[type='password']:focus,
form.general .form-item input[type='date']:focus,
form.general .form-item textarea:focus {
    border-color: #F44336;
}

form.general .form-item.light input[type='text'],
form.general .form-item.light input[type='number'],
form.general .form-item.light input[type='email'],
form.general .form-item.light input[type='password'],
form.general .form-item.light input[type='date'] {
    height: .64rem;
    font-size: .18rem;
    border: none;
}

form.general .form-item textarea {
    height: 1.12rem;
    padding-top: .14rem;
    padding-bottom: .14rem;
    resize: none;
}

form.general .form-item textarea.small {
    height: .7rem;
}

form.general .form-item .phone {
    position: relative;
}

form.general .form-item .phone input {
    padding-left: .8rem;
}

form.general .form-item .phone:before {
    content: '';
    position: absolute;
    height: calc(100% - 2px);
    width: .6rem;
    left: 1px;
    top: 1px;
    background-color: #EFECED;
    border-right: 1px solid #CCCCCC;
    border-radius: .32rem 0 0 .32rem;
}

form.general .form-item .phone:after {
    content: '+90';
    position: absolute;
    left: .3rem;
    top: 50%;
    margin-top: -.02rem;
    font-weight: 400;
    font-size: .19rem;
    line-height: 1.22em;
    color: #121212;
    opacity: .5;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

form.general .form-item .input-error {
    margin-top: .04rem;
    font-weight: 400;
    font-size: .14rem;
    line-height: 1.2em;
    color: #CD4444;
}

form.general .form-item:has(input[type="file"]) .input-error {
    color: #FFFF;
}

form.general .form-item[a-error] label {
    font-weight: 600;
    color: #CD4444;
}

form.general .form-item[a-error] input {
    border-color: #CD4444;
}

form.general .form-item[a-error] textarea {
    border-color: #CD4444;
}

form.general .form-item input[type='text'][disabled],
form.general .form-item input[type='number'][disabled],
form.general .form-item input[type='email'][disabled],
form.general .form-item input[type='password'][disabled],
form.general .form-item input[type='date'][disabled],
form.general .form-item textarea[disabled] {
    -webkit-text-fill-color: #757374;
    color: #757374;
    opacity: 1;
}

/* Float */

form.general .form-item.float input[type='text'],
form.general .form-item.float input[type='number'],
form.general .form-item.float input[type='email'],
form.general .form-item.float input[type='password'],
form.general .form-item.float input[type='date'],
form.general .form-item.float textarea {
    font-size: .16rem;
    padding-top: .1rem;
    padding-left: .15rem;
    padding-right: .15rem;
}

form.general .form-item.float label {
    position: absolute;
    max-width: calc(100% - .3rem);
    left: .24rem;
    top: 50%;
    font-weight: 500;
    font-size: .14rem;
    line-height: 1.2em;
    color: #121212;
    opacity: .7;
    cursor: text;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transition: .15s top linear, .15s font-size linear;
    -webkit-transition: .15s top linear, .15s font-size linear;
    -ms-transition: .15s top linear, .15s font-size linear;
    -moz-transition: .15s top linear, .15s font-size linear;
    -o-transition: .15s top linear, .15s font-size linear;
}

form.general .form-item.float.active label {
    top: .16rem;
    font-size: .12rem;
}


form.general .form-col .email-info {
    display: none;
    visibility: hidden;
}


/* --- Form: Dosya Yükleme --- */
/* File Upload */

form.general .file-upload {
    position: relative;
    padding: .48rem .8rem .4rem .8rem;
    border-radius: .04rem;
    background-color: white;
    border: 1px dashed #BDBABC;
}

form.general .file-upload .file-upload-content {
    text-align: center;
}

form.general .file-upload .icon {
    display: block;
    width: .36rem;
    margin-left: auto;
    margin-right: auto;
}

form.general .file-upload .file-upload-title {
    font-weight: 600;
    font-size: .18rem;
    line-height: 1.2em;
    color: #F44336;
}

form.general .file-upload *+.file-upload-title {
    margin-top: .16rem;
}

form.general .file-upload .file-upload-text {
    font-weight: 400;
    font-size: .16rem;
    line-height: 1.19em;
    color: #121212;
}

form.general .file-upload *+.file-upload-text {
    margin-top: .12rem;
}

form.general .file-upload .file-upload-actions {
    text-align: center;
}

form.general .file-upload *+.file-upload-actions {
    margin-top: .36rem;
}

form.general .file-upload .file-upload-actions .form-item {
    display: inline-block;
    vertical-align: middle;
    min-width: 1.5rem;
    padding: .1rem .2rem .13rem .2rem;
    margin: 0;
    text-align: center;
    border-radius: .04rem;
    background-color: #E8F5E8;
}

form.general .file-upload .file-upload-actions .form-item input {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0;
    z-index: 2;
    cursor: pointer;
}

form.general .file-upload .file-upload-actions .form-item label {
    font-weight: 600;
    font-size: .14rem;
    line-height: 1.2em;
    color: #F44336;
    text-align: center;
}


/* --- Form: Checkbox --- */
/* Checkbox */

form.general .form-item input[type='checkbox'] {
    position: absolute;
    left: -9999px;
}

form.general .form-item input[type='checkbox']~label {
    position: relative;
    display: block;
    padding-left: .32rem;
    font-weight: 500;
    font-size: .17rem;
    line-height: 1.4em;
    color: #121212;
    cursor: pointer;
}

form.general .form-item input[type='checkbox'][disabled]~label {
    cursor: default;
}

form.general .form-item input[type='checkbox']~label:before {
    content: '';
    position: absolute;
    width: .2rem;
    height: .2rem;
    left: 0;
    top: .02rem;
    border: 1px solid #F44336;
    border-radius: 0.06rem;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

form.general .form-item input[type='checkbox']:checked~label:before {
    background-color: #F44336;
}

form.general .form-item input[type='checkbox']:checked~label:after {
    content: '';
    position: absolute;
    width: .12rem;
    height: .08rem;
    left: .04rem;
    top: .08rem;
    background-image: url(Icons/k-check-white.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

form.general .form-item[a-error] input[type='checkbox']~label:before {
    border-color: #CD4444 !important;
}

form.general .form-item[a-error] input[type='checkbox']:checked~label:before {
    background-color: #CD4444 !important;
}

/* İletişim İzni Alt Seçenekleri Yan Yana Yerleşimi */
form.general .auth-subscription-children-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: .12rem;
    width: 100%;
    margin-top: .12rem;
}

form.general .auth-subscription-children-wrapper .form-item.auth-subscription-child {
    display: inline-block !important;
    vertical-align: middle !important;
    width: auto !important;
    margin: 0 !important;
}


/* --- Form: Radio Butonlar (tuş tipi seçim) --- */
/* Radio Item */

form.general .form-item .radio-item {
    display: inline-block;
    padding-left: .08rem;
    padding-right: .08rem;
    margin-right: .32rem;
    vertical-align: middle;
    margin-top: .18rem;
}

form.general .form-item .radio-item input[type='radio'] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

form.general .form-item .radio-item input[type='radio']~label {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding-left: .32rem;
    font-weight: 500;
    font-size: .17rem;
    line-height: 1.2em;
    color: #121212;
    cursor: pointer;
    min-width: unset;
    background-color: transparent;
    border: none;
    border-radius: 0;
    text-align: left;
}

form.general .form-item .radio-item input[type='radio']~label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: .20rem;
    height: .20rem;
    border: 1px solid #F44336;
    border-radius: 50%;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

form.general .form-item .radio-item input[type='radio']~label::after {
    content: "";
    position: absolute;
    left: .05rem;
    top: 50%;
    transform: translateY(-50%);
    width: .1rem;
    height: .1rem;
    border-radius: 50%;
    background-color: #F44336;
    opacity: 0;
    transition: opacity 0.15s ease;
}

form.general .form-item .radio-item input[type='radio'][disabled]~label {
    cursor: default;
    opacity: 0.6;
}

form.general .form-item .radio-item input[type='radio']:checked~label {
    color: #121212;
    background-color: transparent;
}

form.general .form-item .radio-item input[type='radio']:checked~label::after {
    opacity: 1;
}

/* --- Form: Radio Box (kart tipi seçim, ör. adres seçimi) --- */
/* Radio Box */

form.general .form-item .radio-box {
    position: relative;
    display: block;
}

form.general .form-item .radio-box input[type='radio'] {
    position: absolute;
    left: -9999px;
}

form.general .form-item .radio-box input[type='radio']~label {
    position: relative;
    display: flex;
    align-items: center;
    padding: .16rem .2rem;
    cursor: pointer;
    background: #FFFFFF;
    border: 1px solid #D5D5D5;
    border-radius: .08rem;
    transition: all 0.2s ease;
}

form.general .form-item[a-error] .radio-box input[type='radio']~label {
    border-color: #F44336;
}

form.general .form-item .radio-box input[type='radio'][disabled]~label {
    cursor: default;
}

form.general .form-item .radio-box .radio-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: .60rem;
    height: .52rem;
    font-weight: 600;
    font-size: .14rem;
    line-height: 1.2em;
    color: #FFFFFF;
    background: #F44336;
    border: none;
    border-radius: .04rem;
    flex-shrink: 0;
}

form.general .form-item .radio-box .radio-content {
    display: block;
    flex-grow: 1;
    margin-left: .2rem;
    max-width: none;
}

form.general .form-item .radio-box .radio-content .radio-title {
    font-weight: 500;
    font-size: .14rem;
    line-height: 1.2em;
    color: #121212;
    margin-bottom: .04rem;
}

form.general .form-item .radio-box .radio-content .radio-detail {
    font-weight: 600;
    font-size: .18rem;
    line-height: 1.4em;
    color: #121212;
}

form.general .form-item .radio-box .radio-price {
    font-weight: 600;
    font-size: .18rem;
    line-height: 1.2em;
    color: #121212;
    margin-left: .2rem;
    flex-shrink: 0;
}

form.general .form-item .radio-box .radio-actions {
    display: flex;
    align-items: center;
    gap: .16rem;
    margin-left: auto;
    flex-shrink: 0;
}

form.general .form-item .radio-box .radio-actions .btn-edit {
    font-weight: 500;
    font-size: .14rem;
    line-height: 1.2em;
    color: #121212;
    text-decoration: none;
    transition: color 0.2s ease;
}

form.general .form-item .radio-box .radio-actions .btn-edit:hover {
    color: #F44336;
}

form.general .form-item .radio-box .radio-actions .btn-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0;
}

form.general .form-item .radio-box .radio-actions .btn-remove img {
    width: .16rem;
    height: .16rem;
}

form.general .form-item .radio-box input[type='radio']:checked~label {
    background: #FFF6F2;
    border: 1px solid #F44336;
}

form.general .form-item .radio-box input[type='radio']:checked~label .radio-label {
    color: #FFFFFF;
    background: #F44336;
    border: none;
}


/* --- Form: Select2 Açılır Liste --- */
/* Select2 */

form.general .form-item .select2-container {
    width: 100% !important;
}

form.general .form-item .select2-container--default .select2-selection--single {
    height: .56rem;
    border: 1px solid #CCCCCC;
    border-radius: .32rem;
}


form.general .form-item .select2-container--default.select2-container--open .select2-selection--single {
    border-color: #F44336;
    border-radius: .04rem .04rem 0 0;
}

form.general .form-item[a-error] .select2-container--default .select2-selection--single {
    border-color: #CD4444 !important;
}

form.general .form-item .select2-container--default .select2-selection--single:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: 100%;
}

form.general .form-item .select2-container .select2-selection--single .select2-selection__rendered {
    display: inline-block;
    vertical-align: middle;
    padding-left: .2rem;
    padding-right: .56rem;
    font-weight: 500;
    font-size: .18rem;
    line-height: 1.2em;
    color: #121212;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

form.general .form-item .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #9E9B9D;
}

form.general .form-item .select2-container--default .select2-selection--single .select2-selection__arrow {
    position: absolute;
    height: auto;
    width: auto;
    top: 50%;
    right: .24rem;
    font-size: 0;
    transition: .3s all ease;
    -webkit-transition: .3s all ease;
    -ms-transition: .3s all ease;
    -moz-transition: .3s all ease;
    -o-transition: .3s all ease;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

form.general .form-item .select2-container--default .select2-selection--single .select2-selection__arrow:before {
    content: '';
    display: block;
    width: .13rem;
    height: .08rem;
    background-image: url(Icons/dropdown.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

form.general .form-item .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow {
    transform: translateY(-50%) rotate(180deg);
    -webkit-transform: translateY(-50%) rotate(180deg);
    -ms-transform: translateY(-50%) rotate(180deg);
    -moz-transform: translateY(-50%) rotate(180deg);
    -o-transform: translateY(-50%) rotate(180deg);
}

form.general .form-item .select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none;
}


/* --- Form: Select2 Açılır Liste Sonuç Paneli --- */
/* Select2 Dropdown */

.select2-dropdown {
    border: 1px solid #F44336;
    border-radius: 0 0 .04rem .04rem !important;
    background-color: white;
}

.select2-results__option {
    padding: .16rem .2rem;
    font-size: .14rem;
    line-height: 1.2em;
    color: #121212;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    color: #565e4f;
    background-color: rgba(86, 94, 79, .04);
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: rgba(86, 94, 79, .04);
}


/* Select2 Dropdown Search */

.select2-container--default .select2-search--dropdown .select2-search__field {
    height: .45rem;
    padding-left: .16rem;
    padding-right: .52rem;
    vertical-align: middle;
    font-weight: 400;
    font-size: .17rem;
    color: #121212;
    line-height: 1.2em;
    max-width: 100%;
    background-color: #fff;
}

/* ==========================================================================
   HEADER (ÜSTBILGI)
   Kullanıldığı yer: Views/Shared/Header.cshtml
   Elementler: header > .bar (üst şerit), header > .bottom (logo + menü + aksiyonlar)
   ========================================================================== */
/* Header */
header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 10;
}

header .bar {
    position: relative;
    padding-top: .12rem;
    padding-bottom: .12rem;
    background-color: #F5F8FF;
}

header .bar.transparent {
    background-color: transparent;
}


header .bar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header .bar .left {
    font-weight: 400;
    font-size: .16rem;
    line-height: 1.2em;
}

header .bar .left .bar-menu {
    position: relative;
    display: inline-block;
}

header .bar .left .bar-menu-title {
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.04rem;
}

header .bar .left .bar-menu-title img {
    width: 0.12rem;
    height: 0.12rem;
    transition: transform 0.2s ease;
}

header .bar .left .bar-menu:hover .bar-menu-title img {
    transform: rotate(180deg);
}

header .bar .left .bar-submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #ffffff;
    border-radius: 0.08rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 0.12rem 0;
    min-width: 2rem;
    z-index: 20;
    margin-top: 0.08rem;
}

header .bar .left .bar-submenu a {
    display: block;
    padding: 0.08rem 0.16rem;
    color: #121212 !important;
    text-decoration: none;
    font-size: 0.14rem;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
}

header .bar .left .bar-submenu a:hover {
    background-color: #f5f5f5;
    color: #001D85 !important;
}

header .bar .left .bar-menu:hover .bar-submenu {
    display: block;
}

header .bar .right {
    display: flex;
    gap: 1rem;
}

header .bar .right .social {
    display: flex;
    gap: .08rem;
}

header .bar .right .social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: .4rem;
    height: .4rem;
}

header .bar .right .social a::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

header .bar .right .social a.facebook::after {
    background-image: url(Icons/k-facebook.svg);
}

header .bar .right .social a.instagram::after {
    background-image: url(Icons/k-instagram.svg);
}

header .bar .right .social a.twitter::after {
    background-image: url(Icons/k-twitter.svg);
}

header .bar .right .social a.youtube::after {
    background-image: url(Icons/k-youtube.svg);
}

header .bar .right .social a.linkedin::after {
    background-image: url(Icons/k-linkedin.svg);
}

/* White Bar Styles */
header .bar.white {
    color: #fff;
    background-color: transparent;
}

header .bar.white .left {
    color: #fff;
}

header .bar.white .right .lang a {
    color: #fff;
}

header .bar.white .right .lang a.current {
    color: #fff;
}

header .bar.white .right .social a.facebook::after {
    background-image: url(Icons/k-facebook-white.svg);
}

header .bar.white .right .social a.instagram::after {
    background-image: url(Icons/k-instagram-white.svg);
}

header .bar.white .right .social a.twitter::after {
    background-image: url(Icons/k-twitter-white.svg);
}

header .bar.white .right .social a.youtube::after {
    background-image: url(Icons/k-youtube-white.svg);
}

header .bar.white .right .social a.linkedin::after {
    background-image: url(Icons/k-linkedin-white.svg);
}

header .bar .right .lang {
    display: inline-block;
    vertical-align: middle;
    width: 34.5%;
}

header .bar .right .lang a {
    font-weight: 500;
    font-size: .16rem;
    line-height: 1.4em;
    color: #121212;
}

header .bar .right .lang a.current {
    font-weight: 500;
    font-size: .16rem;
    line-height: 1.4em;
    color: #121212;
    opacity: 0.9;
}

header .bar .right .lang a::after {
    content: "/";
    margin-left: .06rem;
    margin-right: .06rem;
}

header .bar .right .lang a:last-of-type::after {
    content: none;
}

header .bottom {
    position: relative;
    padding-top: .15rem;
    padding-bottom: .15rem;
    transition: padding-top 0.3s ease-in-out;
}

header.scrolled .bottom {
    padding-top: 0;
}

header .bottom .container {
    position: static;
}

header .bottom .header-boxes {
    display: flex;
    width: 100%;
}

header .bottom .left-box {
    display: flex;
    align-items: center;
    background-color: white;
    border-radius: .2rem;
    padding: .08rem .24rem;
    flex-grow: 1;
    margin-right: .08rem;
    position: relative;
}

header .bottom .left-box .hamburger-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: .52rem;
    height: .52rem;
    background-color: #DADFF3;
    border-radius: 50%;
    margin-left: .16rem;
    flex-shrink: 0;
    transition: background-color .2s ease;
}

header .bottom .left-box .hamburger-menu-btn::after {
    content: '';
    display: block;
    width: .24rem;
    height: .24rem;
    background-image: url(Icons/k-hamburger-menu.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

header .bottom .left-box .hamburger-menu-btn.active {
    background-color: #005BA5;
}

header .bottom .left-box .hamburger-menu-btn.active::after {
    background-image: url(Icons/k-hamburger-menu-white.svg);
}

header .bottom .right-box {
    display: flex;
    align-items: center;
    background-color: white;
    border-radius: .2rem;
    padding: .14rem .12rem;
    min-width: 4.75rem;
}

header .bottom .logo {
    width: 1.42rem;
    height: .62rem;
}

header .bottom .logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

header .bottom .menu-wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-grow: 1;
}


header .bottom .menu-wrapper .lang {
    display: none;
    vertical-align: middle;
    width: 100%;
    padding: .1rem .16rem;
    position: absolute;
    top: calc(100% - 1.5rem);
    background: white;
}

header .bottom .menu-wrapper .lang a {
    font-weight: 500;
    font-size: .16rem;
    line-height: 1.4em;
    color: #121212;
    opacity: .4;
}

header .bottom .menu-wrapper .lang a.current {
    font-weight: 500;
    font-size: .16rem;
    line-height: 1.4em;
    color: #121212;
    opacity: 1;
}

header .bottom .menu-wrapper .lang a::after {
    content: "/";
    color: #121212;
    opacity: .4;
    margin-left: .06rem;
    margin-right: .06rem;
}

header .bottom .menu-wrapper .lang a:last-of-type::after {
    content: none;
}

header .bottom .menu-wrapper .language,
header .bottom .menu-wrapper .buttons {
    display: none;
}

header .bottom .menu-wrapper .menu {
    display: flex;
    align-items: center;
    gap: .1rem;
}

header .bottom .menu-wrapper .menu .menu-item {
    display: inline-block;
}

header .bottom .menu-wrapper .menu .menu-item a {
    display: inline-flex;
    align-items: center;
    font-weight: 500;
    font-size: .16rem;
    line-height: 1.2em;
    color: #001D85;
}

header .bottom .menu-wrapper .menu .menu-item a img.menu-down-icon {
    width: .18rem;
    height: .18rem;
    display: inline-block;
}

header .bottom .menu-wrapper .menu .menu-item>a {
    position: relative;
    padding: .1rem 0;
}

header .bottom .menu-wrapper .menu .menu-item>a::after {
    content: '';
    position: absolute;
    bottom: .04rem;
    left: .0rem;
    right: .1rem;
    height: 3px;
    background-color: #F44336;
    border-radius: 3px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease 0.2s;
}

header .bottom .menu-wrapper .menu .menu-item:hover>a::after {
    transform: scaleX(1);
    transition-delay: 0s;
}

header .bottom .menu-wrapper .menu .menu-item.active>a::after {
    transform: scaleX(1);
    transition-delay: 0s;
}

header .bottom .menu-wrapper .menu .sub-menu {
    display: none;
    position: absolute;
    width: 100%;
    left: 0;
    top: 100%;
    margin-top: 0.15rem;
    background-color: #FFF;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border-radius: 0.24rem;
    padding: 0.24rem;
    box-sizing: border-box;
    z-index: 1000;
}

header .bottom .menu-wrapper .menu .sub-menu.active,
header .bottom .menu-wrapper .menu .menu-item:hover .sub-menu {
    display: block;
}

header .bottom .menu-wrapper .menu .sub-menu::before {
    content: '';
    position: absolute;
    top: -0.18rem;
    left: 0;
    right: 0;
    height: 0.20rem;
    background-color: transparent;
}

header .bottom .menu-wrapper .menu .sub-menu .submenu-container {
    display: flex;
    gap: 0.4rem;
    position: relative;
    height: 3.64rem;
}

header .bottom .menu-wrapper .menu .sub-menu .submenu-container.product-menu {
    height: auto;
}

header .bottom .menu-wrapper .menu .sub-menu .product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.16rem;
    width: 100%;
}

header .bottom .menu-wrapper .menu .sub-menu .product-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 0.32rem;
    padding: 0.24rem 0.28rem;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    height: 1.6rem;
    box-sizing: border-box;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

header .bottom .menu-wrapper .menu .sub-menu .product-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

header .bottom .menu-wrapper .menu .sub-menu .product-card .card-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    z-index: 2;
}

header .bottom .menu-wrapper .menu .sub-menu .product-card .card-title {
    font-size: 0.2rem;
    font-weight: 700;
    color: #001D85;
    line-height: 1.2em;
}

header .bottom .menu-wrapper .menu .sub-menu .product-card .card-icon-wrapper {
    width: 0.4rem;
    height: 0.4rem;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

header .bottom .menu-wrapper .menu .sub-menu .product-card .card-icon-wrapper img {
    width: 0.19rem;
    height: 0.19rem;
    object-fit: contain;
}

header .bottom .menu-wrapper .menu .sub-menu .product-card .card-img {
    height: 95%;
    max-width: 50%;
    object-fit: contain;
    align-self: flex-end;
    margin-bottom: -0.12rem;
    z-index: 1;
}

header .bottom .menu-wrapper .menu .sub-menu .submenu-image-area {
    position: relative;
    width: 3.5rem;
    height: 3.64rem;
    flex-shrink: 0;
    border-radius: 0.2rem;
    overflow: hidden;
}

header .bottom .menu-wrapper .menu .sub-menu .submenu-image-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

header .bottom .menu-wrapper .menu .sub-menu .submenu-image-area .submenu-image-title {
    position: absolute;
    bottom: 0.24rem;
    left: 0.24rem;
    right: 0.24rem;
    color: white;
    font-size: 0.24rem;
    font-weight: 700;
    z-index: 2;
}

header .bottom .menu-wrapper .menu .sub-menu .submenu-image-area::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 60%);
    z-index: 1;
}

header .bottom .menu-wrapper .menu .sub-menu .submenu-categories {
    list-style: none;
    padding: .24rem 0;
    margin: 0;
    width: 2.6rem;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    box-sizing: border-box;
    height: 100%;
    overflow-y: auto;
}

header .bottom .menu-wrapper .menu .sub-menu .submenu-categories .category-item {
    position: static;
}

header .bottom .menu-wrapper .menu .sub-menu .submenu-categories .category-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.18rem;
    font-weight: 600;
    color: #001D85;
    padding: 0.04rem 0;
    text-decoration: none;
    transition: color 0.2s ease;
}

header .bottom .menu-wrapper .menu .sub-menu .submenu-categories .category-link span {
    position: relative;
    padding-bottom: 2px;
}

header .bottom .menu-wrapper .menu .sub-menu .submenu-categories .category-link span::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #F44336;
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

header .bottom .menu-wrapper .menu .sub-menu .submenu-categories .category-link:hover span::after,
header .bottom .menu-wrapper .menu .sub-menu .submenu-categories .category-item:hover .category-link span::after {
    transform: scaleX(1);
}

header .bottom .menu-wrapper .menu .sub-menu .submenu-categories .category-link .arrow-icon {
    width: 0.24rem;
    height: 0.24rem;
    filter: grayscale(100%);
    transition: filter 0.2s ease, transform 0.2s ease;
    opacity: .4;
}

header .bottom .menu-wrapper .menu .sub-menu .submenu-categories .category-link:hover .arrow-icon,
header .bottom .menu-wrapper .menu .sub-menu .submenu-categories .category-item:hover .category-link .arrow-icon {
    filter: none;
    opacity: 1;
}

header .bottom .menu-wrapper .menu .sub-menu .submenu-links {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 6rem;
    right: 0;
    flex-direction: column;
    gap: 0.18rem;
    box-sizing: border-box;
    padding: 0.24rem 0.15rem 0.24rem 0.9rem;
    overflow-y: auto;
}

header .bottom .menu-wrapper .menu .sub-menu .submenu-links a {
    font-size: 0.16rem;
    font-weight: 500;
    color: #001d85 !important;
    text-decoration: none;
    transition: color 0.2s ease;
    background-color: transparent !important;
}

header .bottom .menu-wrapper .menu .sub-menu .submenu-links a:hover {
    color: #F44336 !important;
}

header .bottom .menu-wrapper .menu .sub-menu .submenu-categories .category-item:hover .submenu-links {
    display: flex !important;
}

/* Aktif (bulunulan sayfa) kategori — hover gibi altı çizili kalsın */
header .bottom .menu-wrapper .menu .sub-menu .submenu-categories .category-item.active .category-link span::after {
    transform: scaleX(1);
}

/* Aktif (bulunulan sayfa) alt link */
header .bottom .menu-wrapper .menu .sub-menu .submenu-links a.active {
    color: #F44336 !important;
}

/* Görsel linki: tüm görsel alanını kaplasın ve gradyan overlay'in (::after z-index:1) üstünde tıklanabilsin */
header .bottom .menu-wrapper .menu .sub-menu .submenu-image-area .submenu-image-link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 3;
}

/* Görsel girilmemişse (no-image) sağdaki link sütununu sola çek — sol/sağ arası boşluk oluşmasın */
header .bottom .menu-wrapper .menu .sub-menu .submenu-container.no-image .submenu-links {
    left: 2.1rem;
}

/* ==========================================================================
   HAMBURGER DROPDOWN MENU STYLES
   ========================================================================== */
header .bottom .left-box .hamburger-menu-item {
    position: static;
    display: flex;
    align-items: center;
    align-self: stretch;
}

header .bottom .left-box .hamburger-menu-item .sub-menu {
    display: none;
    position: absolute;
    width: 100%;
    min-width: 10rem;
    left: 0;
    top: 100%;
    margin-top: 0.15rem;
    background-color: #FFF;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border-radius: 0.24rem;
    padding: 0.24rem;
    box-sizing: border-box;
    z-index: 1000;
}

header .bottom .left-box .hamburger-menu-item .sub-menu.active {
    display: block;
}

header .bottom .left-box .hamburger-menu-item .sub-menu::before {
    content: '';
    position: absolute;
    top: -0.18rem;
    left: 0;
    right: 0;
    height: 0.20rem;
    background-color: transparent;
}

header .bottom .left-box .hamburger-menu-item .sub-menu .submenu-container {
    display: flex;
    gap: 0.4rem;
    position: relative;
    height: 3.64rem;
}

header .bottom .left-box .hamburger-menu-item .submenu-content-area {
    width: calc(100% - 3.9rem);
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

header .bottom .left-box .hamburger-menu-item .submenu-title-bar {
    background-color: #E2E8FC;
    border-radius: 0.08rem;
    padding: 0.1rem 0.16rem;
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

header .bottom .left-box .hamburger-menu-item .submenu-title-bar a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    color: #001D85;
    font-weight: 700;
    font-size: 0.18rem;
    text-decoration: none;
}

header .bottom .left-box .hamburger-menu-item .submenu-title-bar a .title-arrow-icon {
    width: 0.2rem;
    height: 0.2rem;
    transition: transform 0.2s ease;
}

header .bottom .left-box .hamburger-menu-item .submenu-title-bar a:hover .title-arrow-icon {
    transform: translateX(4px);
}

header .bottom .left-box .hamburger-menu-item .sub-menu .submenu-categories {
    list-style: none;
    padding: .24rem 0 .24rem .2rem;
    margin: 0;
    width: 2.6rem;
    flex-shrink: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    box-sizing: border-box;
    flex-grow: 1;
    overflow-y: auto;
    min-height: 0;
    direction: rtl;
}

header .bottom .left-box .hamburger-menu-item .sub-menu .submenu-categories>* {
    direction: ltr;
}

header .bottom .left-box .hamburger-menu-item .sub-menu .submenu-categories .category-item {
    position: static;
}

header .bottom .left-box .hamburger-menu-item .sub-menu .submenu-categories .category-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.18rem;
    font-weight: 600;
    color: #001D85;
    padding: 0.04rem 0;
    text-decoration: none;
    transition: color 0.2s ease;
}

header .bottom .left-box .hamburger-menu-item .sub-menu .submenu-categories .category-link span {
    position: relative;
    padding-bottom: 2px;
}

header .bottom .left-box .hamburger-menu-item .sub-menu .submenu-categories .category-link span::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #F44336;
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

header .bottom .left-box .hamburger-menu-item .sub-menu .submenu-categories .category-link:hover span::after,
header .bottom .left-box .hamburger-menu-item .sub-menu .submenu-categories .category-item:hover .category-link span::after {
    transform: scaleX(1);
}

header .bottom .left-box .hamburger-menu-item .sub-menu .submenu-categories .category-link .arrow-icon {
    width: 0.24rem;
    height: 0.24rem;
    filter: grayscale(100%);
    transition: filter 0.2s ease, transform 0.2s ease;
    opacity: .4;
}

header .bottom .left-box .hamburger-menu-item .sub-menu .submenu-categories .category-link:hover .arrow-icon,
header .bottom .left-box .hamburger-menu-item .sub-menu .submenu-categories .category-item:hover .category-link .arrow-icon {
    filter: none;
    opacity: 1;
}

header .bottom .left-box .hamburger-menu-item .sub-menu .submenu-links {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 2.6rem;
    right: 0;
    max-width: calc(100% - 6.5rem);
    flex-direction: column;
    gap: 0.18rem;
    box-sizing: border-box;
    padding: 0.8rem 0.15rem 0.24rem 0.4rem;
    overflow-y: auto;
}

header .bottom .left-box .hamburger-menu-item .sub-menu .submenu-links a {
    font-size: 0.16rem;
    font-weight: 500;
    color: #001d85 !important;
    text-decoration: none;
    transition: color 0.2s ease;
    background-color: transparent !important;
}

header .bottom .left-box .hamburger-menu-item .sub-menu .submenu-links a:hover {
    color: #F44336 !important;
}

header .bottom .left-box .hamburger-menu-item .sub-menu .submenu-categories .category-item:hover .submenu-links {
    display: flex !important;
}

/* Hide scrollbars for submenu categories and links while keeping scroll functionality */
/* header .bottom .menu-wrapper .menu .sub-menu .submenu-categories,
header .bottom .menu-wrapper .menu .sub-menu .submenu-links,
header .bottom .left-box .hamburger-menu-item .sub-menu .submenu-links {
    -ms-overflow-style: none;
    scrollbar-width: none;
} */

/* header .bottom .menu-wrapper .menu .sub-menu .submenu-categories::-webkit-scrollbar,
header .bottom .menu-wrapper .menu .sub-menu .submenu-links::-webkit-scrollbar,
header .bottom .left-box .hamburger-menu-item .sub-menu .submenu-links::-webkit-scrollbar {
    display: none;
} */

header .bottom .left-box .hamburger-menu-item .submenu-image-area {
    position: relative;
    width: 3.5rem;
    height: 3.64rem;
    flex-shrink: 0;
    border-radius: 0.2rem;
    overflow: hidden;
    margin-left: auto;
}

header .bottom .left-box .hamburger-menu-item .submenu-image-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

header .bottom .left-box .hamburger-menu-item .submenu-image-area::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 60%);
    z-index: 1;
}

header .bottom .left-box .hamburger-menu-item .submenu-image-area .submenu-image-overlay {
    position: absolute;
    bottom: 0.24rem;
    left: 0.24rem;
    right: 0.24rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    z-index: 2;
}

header .bottom .left-box .hamburger-menu-item .submenu-image-area .submenu-image-overlay .submenu-image-title {
    color: white;
    font-size: 0.24rem;
    font-weight: 700;
    margin: 0;
    max-width: 70%;
    line-height: 1.2;
}

header .bottom .left-box .hamburger-menu-item .submenu-image-area .image-arrow-btn {
    width: 0.44rem;
    height: 0.44rem;
    background-color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, background-color 0.2s ease;
    text-decoration: none;
}

header .bottom .left-box .hamburger-menu-item .submenu-image-area .image-arrow-btn img {
    width: 0.16rem;
    height: 0.16rem;
}

header .bottom .left-box .hamburger-menu-item .submenu-image-area .image-arrow-btn:hover {
    transform: scale(1.1);
    background-color: #E2E8FC;
}

header .bottom .right-box .actions {
    display: flex;
    align-items: center;
    margin-right: .1rem;
}



header .bottom .right-box .buttons {
    display: flex;
    align-items: center;
    gap: .1rem;
}

header .bottom .right-box .buttons .btn-default {
    margin: 0;
}

header .bottom .right .actions .lang {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-right: .08rem;
    z-index: 2;
}

header .bottom .right .actions .lang .current {
    display: inline-block;
    width: .4rem;
    height: .4rem;
    text-align: center;
    border-radius: .04rem;
    line-height: 1.4em;
    font-size: .16rem;
    color: #121212;
    font-weight: 600;
    color: inherit;
    cursor: pointer;
    margin-right: 0;
}

header .bottom .right .actions .lang ul {
    position: absolute;
    top: 100%;
    left: 0;
    width: .4rem;
    background-color: white;
    opacity: 0;
    visibility: hidden;
    transform: translateY(.1rem);
    transition: all .3s ease;
    list-style: none;
}

header .bottom .right .actions .lang ul li a {
    line-height: 1.4em;
    padding: .07rem 0;
    height: auto;
    font-size: .16rem;
    font-weight: 600;
    color: inherit;
}

header .bottom .right-box .actions .icon-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: .52rem;
    height: .52rem;
}

header .bottom .right-box .actions .icon-link span.cart-count {
    position: absolute;
    width: 0.2rem;
    height: .2rem;
    right: 0;
    top: 0;
    background: #F44336;
    border-radius: 50%;
    color: #FFFFFF;
    text-align: center;
    line-height: .2rem;
    font-size: .12rem;
}

header .bottom .right-box .actions .icon-link:last-child {
    margin-right: 0;
}

header .bottom .right-box .actions .icon-link .search-container {
    position: absolute;
    width: 3rem;
    height: 1rem;
    padding: .3rem .2rem;
    background-color: #FFFFFF;
    border: 1px solid #001D85;
    top: 100%;
    right: 0;
    display: none;
    z-index: 99;
    border-radius: .08rem;
}

header .bottom .right-box .actions .icon-link.search:hover .search-container {
    display: block;
}

header .bottom .right-box .actions .icon-link .search-container form {
    width: 100%;
    height: 100%;
}

header .bottom .right-box .actions .icon-link .search-container form .form-item {
    position: relative;
    width: 100%;
    height: 100%;
}

header .bottom .right-box .actions .icon-link .search-container form .form-item input {
    width: 100%;
    height: 100%;
    font-size: .14rem;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid rgba(209, 202, 196, .9);
    outline: none;
}

header .bottom .right-box .actions .icon-link .search-container form .form-item[a-error] input {
    border-color: red;
}

header .bottom .right-box .actions .icon-link .search-container form .form-item span {
    position: absolute;
    width: .38rem;
    height: .38rem;
    right: 0;
    top: 50%;
    margin-top: -.19rem;
    background-image: url(Icons/k-menu-search.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
}

header .mobile-menu-drawer {
    display: none;
}

header .btn-menu {
    display: none;
}

/* ==========================================================================
   MAIN BANNER (ANA SAYFA BÜYÜK BAŞLIK BÖLÜMÜ)
   Kullanıldığı yer: Views/Home/HomeSlider.cshtml
   Elementler: section.main-banner — .title, .text, .image-container, .box
   ========================================================================== */
/* Main Banner */
section.main-banner {
    position: relative;
    padding-top: .72rem;
    background-color: #F5F8FF;
}

section.main-banner .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.4rem;
}

section.main-banner .title {
    display: inline-block;
    vertical-align: middle;
    width: 50%;
    font-weight: 700;
    font-size: .8rem;
    line-height: .9em;
    color: #001D85;
}

section.main-banner .text {
    display: inline-block;
    vertical-align: middle;
    width: 5.1rem;
    font-weight: 400;
    font-size: .2rem;
    line-height: 1.5em;
    color: #121212;
}

section.main-banner .text p+p {
    margin-top: 1.27em;
}

section.main-banner .text a {
    color: inherit;
}

section.main-banner .text a:after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: .12rem;
    height: .12rem;
    margin-left: .12rem;
    background-image: url(Icons/link.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

section.main-banner .image-container {
    position: relative;
    width: 100%;
    max-width: 16.8rem;
    margin: 0 auto;
}

section.main-banner *+.image-container {
    margin-top: .88rem;
}

section.main-banner .image-container .container {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}

section.main-banner .image-container .image {
    width: 100%;
}

section.main-banner .image-container .image.mobile {
    display: none;
}

section.main-banner .image-container .box {
    position: absolute;
    width: 3.7rem;
    height: 3.7rem;
    top: -.24rem;
    right: .54rem;
    padding: .24rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

section.main-banner .image-container .box:before {
    content: '';
    display: inline-block;
    vertical-align: bottom;
    width: 0;
    height: 100%;
}

section.main-banner .image-container .box .image-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: #005ba6;
    opacity: .5;
}

section.main-banner .image-container .box.yellow .image-layer {
    background-color: #D15500;
    opacity: .5;
}

section.main-banner .image-container .box .box-content {
    position: relative;
    display: inline-block;
    vertical-align: bottom;
}

section.main-banner .image-container .box .box-text {
    font-weight: 500;
    font-size: .28rem;
    line-height: 1.1em;
    color: #FFFFFF;
}

section.main-banner .image-container .box .box-bottom {
    padding: .08rem .16rem;
    font-weight: 500;
    font-size: .18rem;
    line-height: 1.33em;
    color: #FFFFFF;
    background-color: #f44336;
}

section.main-banner .image-container .box.yellow .box-bottom {
    background-color: #EFB44E;
}

section.main-banner .image-container .box *+.box-bottom {
    margin-top: .24rem;
}

section.main-banner .image-container .box .icon {
    position: absolute;
    width: .4rem;
    height: .4rem;
    top: .12rem;
    right: .12rem;
    background-color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

section.main-banner .image-container .box .icon img {
    width: .16rem;
    height: .16rem;
    transform: rotate(-45deg);
}

/* ==========================================================================
   MAIN SLIDER (ANA SAYFA SLIDER)
   Kullanıldığı yer: Views/Home/HomeSlider.cshtml
   Elementler: section.main-slider — .slider-container, .item, .owl-dots
   ========================================================================== */
/* Main Slider */
section.main-slider {
    position: relative;
    padding-top: .60rem;
    background-color: #F5F8FF;
}

section.main-slider .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.4rem;
}

section.main-slider .title {
    width: 60%;
    font-weight: 700;
    font-size: .80rem;
    line-height: 1.15em;
    color: #001D85;
}

section.main-slider .text {
    width: 5rem;
    font-weight: 400;
    font-size: .2rem;
    line-height: 1.5em;
    color: #121212;
}

section.main-slider .text p+p {
    margin-top: .24rem;
}

section.main-slider .text a:not(.btn-default) {
    color: inherit;
}

section.main-slider .text a:not(.btn-default):after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: .12rem;
    height: .12rem;
    margin-left: .12rem;
    background-image: url(Icons/link.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

section.main-slider .slider-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 6rem;
    margin-top: .58rem;
}

section.main-slider *+.slider-container {
    /* margin-top: .88rem; */
}

section.main-slider .slider-container .box {
    position: absolute;
    width: 3.7rem;
    height: 3.7rem;
    top: -.24rem;
    right: .54rem;
    padding: .24rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 3;
}

section.main-slider .slider-container .box:before {
    content: '';
    display: inline-block;
    vertical-align: bottom;
    width: 0;
    height: 100%;
}

section.main-slider .slider-container .box .image-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: #F44336;
    opacity: .5;
}

section.main-slider .slider-container .box.yellow .image-layer {
    background-color: #D15500;
    opacity: .5;
}

section.main-slider .slider-container .box .box-content {
    position: relative;
    display: inline-block;
    vertical-align: bottom;
}

section.main-slider .slider-container .box .box-text {
    font-weight: 500;
    font-size: .28rem;
    line-height: 1.1em;
    color: #FFFFFF;
}

section.main-slider .slider-container .box .box-bottom {
    padding: .08rem .16rem;
    font-weight: 500;
    font-size: .18rem;
    line-height: 1.33em;
    color: #FFFFFF;
    background-color: #F44336;
}

section.main-slider .slider-container .box.yellow .box-bottom {
    background-color: #EFB44E;
}

section.main-slider .slider-container .box *+.box-bottom {
    margin-top: .24rem;
}

section.main-slider .slider-container .box .icon {
    position: absolute;
    width: .4rem;
    height: .4rem;
    top: .12rem;
    right: .12rem;
    background-color: white;
}

section.main-slider .slider-container .box .icon img {
    position: absolute;
    width: .12rem;
    top: 50%;
    left: 50%;
    margin-top: -.06rem;
    margin-left: -.06rem;
}

section.main-slider .item {
    position: relative;
    width: 100%;
    height: 6rem;
}

section.main-slider .item>img {
    position: absolute;
    object-fit: cover;
    width: 100% !important;
    left: 0 !important;
    height: 100% !important;
}

section.main-slider .item .content {
    position: absolute;
    width: calc(100% - 1.4rem);
    height: auto;
    left: .7rem;
    bottom: 2rem;
}

section.main-slider .item .content .text {
    width: 100%;
    font-size: .72rem;
    font-weight: 500;
    color: #FFFFFF;
    line-height: .95em;
}

section.main-slider .item .content .link {
    font-size: .2rem;
    font-weight: 500;
    color: #FFFFFF;
}

section.main-slider .item .content .link a:after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: .12rem;
    height: .12rem;
    margin-left: .12rem;
    background-image: url(Icons/link-white.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

section.main-slider .item .content *+.link {
    margin-top: .4rem;
}

section.main-slider .owl-dots {
    position: absolute;
    width: calc(100% - 1.4rem);
    left: .7rem;
    bottom: .8rem;
}

section.main-slider .owl-dots .owl-dot {
    width: .8rem;
    height: .04rem;
    background-color: #FFFFFF;
    opacity: .3;
    display: inline-block;
}

section.main-slider .owl-dots .owl-dot+.owl-dot {
    margin-left: .12rem;
}

section.main-slider .owl-dots .owl-dot.active {
    opacity: 1;
}

/* ==========================================================================
   MAIN BOXES (SAYAÇLAR VE KUTULAR)
   Kullanıldığı yer: Views/Widget/HomeStatBoxes.cshtml
   Elementler: section.main-boxes — .top .box (sayaçlar), .bottom .boxes (renk kutular)
   ========================================================================== */
/* Main Boxes */

section.main-boxes {
    position: relative;
    padding-top: .6rem;
    padding-bottom: .8rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

section.main-boxes .top {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}

section.main-boxes .top .box {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    vertical-align: top;
    width: 25%;
    min-height: 2.6rem;
    height: auto;
    padding: .32rem .4rem;
    background-color: white;
    box-sizing: border-box;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

section.main-boxes .top .box:first-of-type {
    border-top-left-radius: .24rem;
    border-bottom-left-radius: .24rem;
}

section.main-boxes .top .box:last-of-type {
    border-top-right-radius: .24rem;
    border-bottom-right-radius: .24rem;
}

section.main-boxes .top .box+.box {
    border-left: 1px solid #F9F5F2;
}

section.main-boxes .top .box .text {
    font-weight: 600;
    font-size: .32rem;
    line-height: 1.15em;
    color: #121212;
    width: 100%;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
}

section.main-boxes .top .box .text>span {
    position: relative;
}

section.main-boxes .top .box .text>span>span:first-child {
    position: absolute;
    left: 0;
    top: 50%;
    white-space: nowrap;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

section.main-boxes .top .box .text>span>span:last-child {
    opacity: 0;
}

section.main-boxes .top .box .link {
    position: relative;
    margin-top: auto;
    font-weight: 600;
    font-size: .18rem;
    line-height: 1.22em;
    color: #121212;
}

section.main-boxes .top .box .link:after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: .12rem;
    height: .12rem;
    margin-left: .12rem;
    background-image: url(Icons/k-arrow-right-link.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

section.main-boxes .top .box:hover .link:after {
    opacity: 1;
    transform: translateX(0);
}

section.main-boxes *+.bottom {
    margin-top: 1rem;
}

section.main-boxes .bottom .title {
    position: relative;
    padding-top: .12rem;
    font-weight: 500;
    font-size: .24rem;
    line-height: 1.2em;
    color: #001D85;
    border-top: 1px solid #001D85;
}

section.main-boxes .bottom .promo {
    font-weight: 600;
    font-size: .42rem;
    line-height: 1.2em;
    color: #001D85;
}

section.main-boxes .bottom *+.promo {
    margin-top: .2rem;
}

section.main-boxes .bottom *+.boxes {
    margin-top: 1.1rem;
}

section.main-boxes .bottom .boxes .box {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 20%;
    height: 4.2rem;
    padding: .32rem;
    background-color: white;
    border-radius: .24rem;
}

section.main-boxes .bottom .boxes .box+.box {
    border-left: 4px solid #F9F5F2;
}

section.main-boxes .bottom .boxes .box .text {
    font-weight: 700;
    font-size: .28rem;
    line-height: 1.07em;
    color: #121212;
}

section.main-boxes .bottom .boxes .box img {
    position: absolute;
    max-width: 60%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

section.main-boxes .bottom .boxes .box img.hover {
    display: none;
}

section.main-boxes .bottom .boxes .box .link {
    position: absolute;
    left: .24rem;
    bottom: .32rem;
    font-weight: 700;
    font-size: .18rem;
    line-height: 1.22em;
    color: #121212;
    display: flex;
    flex-direction: column-reverse;
}

section.main-boxes .bottom .boxes .box .link.icon-show:after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: .24rem;
    height: .24rem;
    margin-bottom: .12rem;
    background-image: url(Icons/k-arrow-right-link.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}


/* ==========================================================================
   NEWS BOX (HABER KUTUSU)
   Kullanıldığı yer: Views/Widget/HomeNewsBox.cshtml
   Elementler: section.news-box — .boxes .box, .ribbon, .content .text, .date
   ========================================================================== */
/* News Box */

section.news-box {
    position: relative;
    padding-top: .8rem;
    padding-bottom: .6rem;
}

section.news-box .title {
    padding-top: .12rem;
    font-weight: 500;
    font-size: .24rem;
    line-height: 1.2em;
    color: #001D85;
    border-top: 1px solid #001D85;
}

section.news-box .title * {
    color: inherit;
}

section.news-box .boxes {
    position: relative;
    margin-left: -.1rem;
    margin-right: -.1rem;
}

section.news-box *+.boxes {
    margin-top: .4rem;
}

section.news-box .boxes .box {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 33.333%;
    padding-left: .1rem;
    padding-right: .1rem;
}

section.news-box .boxes .box .image {
    position: relative;
    width: 100%;
}

section.news-box .boxes .box .image img {
    width: 100%;
    border-radius: .24rem;
}

section.news-box .boxes .box .ribbon {
    position: absolute;
    padding: .04rem .08rem;
    left: .22rem;
    top: .12rem;
    font-weight: 600;
    font-size: .18rem;
    border-radius: .12rem;
    color: #FFFFFF;
}

section.news-box .boxes .box .content {
    padding: .2rem;
    padding-bottom: 0;
}

section.news-box .boxes .box .content .text {
    font-weight: 700;
    font-size: .28rem;
    line-height: 1.14em;
    color: #001D85;
}

section.news-box .boxes .box .content .date {
    font-weight: 500;
    font-size: .16rem;
    line-height: 1.19em;
    color: #121212;
}

section.news-box .boxes .box .content *+.date {
    margin-top: .2rem;
}

section.news-box .boxes .box .content .date .day {}

section.news-box .boxes .box .content .date .day:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 4px;
    height: 4px;
    margin-left: .06rem;
    margin-right: .08rem;
    background-color: #757374;
    border-radius: 2px;
}


/* ==========================================================================
   DONATE (BAĞIŞ FORMU BÖLÜMÜ)
   Kullanıldığı yer: Views/Widget/HomeDonate.cshtml
   Elementler: section.donate — .content, .title, .text, form, .line
   ========================================================================== */
/* Donate */

section.donate {
    position: relative;
    padding-top: 1.4rem;
    padding-bottom: 1.4rem;
    text-align: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

section.donate .content {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 7.6rem;
}

section.donate .title {
    padding-top: .2rem;
    font-weight: 600;
    font-size: .52rem;
    line-height: 1.19em;
    color: white;
    text-align: center;
    border-top: none;
}

section.donate .text {
    font-weight: 400;
    font-size: .2rem;
    line-height: 1.2em;
    color: white;
    text-align: center;
}

section.donate *+.text {
    margin-top: .3rem;
}

section.donate form {
    display: inline-block;
    width: 5.2rem;
}

section.donate *+form {
    margin-top: .6rem;
}

section.donate form .form-item {
    display: flex;
    justify-content: center;
    gap: 0.15rem;
    margin-bottom: 0.2rem;
}

section.donate form .form-item .radio-item {
    margin: 0;
    padding: 0;
}

section.donate form.general .form-item .radio-item input[type='radio']~label {
    min-width: 0;
    padding: 0.16rem 0.37rem;
    font-size: 0.22rem;
    font-weight: 600;
    color: white;
    border: 1px solid white;
    border-radius: 2rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: transparent;
}

section.donate form.general .form-item .radio-item input[type='radio']:checked~label {
    background-color: white;
    color: #F44336;
    border-color: white;
}

section.donate form .line {
    font-weight: 400;
    font-size: .16rem;
    line-height: 1.5em;
    color: white;
    text-align: center;
    margin-bottom: 0.2rem;
}

section.donate form .form-item.light {
    width: 100%;
}

section.donate form .form-item.light input {
    width: 100%;
    padding: 0.16rem 0.4rem;
    border-radius: 2.4rem;
    border: none;
    background-color: white;
    text-align: center;
    font-size: 0.16rem;
    color: #121212;
    box-sizing: border-box;
}

section.donate form .btn-default {
    background-color: #F44336 !important;
    border-color: #F44336 !important;
    color: white !important;
    border-radius: 2.4rem !important;
    padding: 0.16rem 0.4rem;
    font-size: 0.18rem;
    font-weight: 700;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    box-shadow: none;
    margin-top: 0.24rem;
}

section.donate form .btn-default:hover {
    background-color: #d32f2f !important;
    border-color: #d32f2f !important;
}

section.donate form.general .form-item .radio-item input[type='radio']~label::before,
section.donate form.general .form-item .radio-item input[type='radio']~label::after,
section.detail .form .donate-options .radio-item input[type='radio']~label::before,
section.detail .form .donate-options .radio-item input[type='radio']~label::after,
form.general .form-item .radio-box input[type='radio']~label::before,
form.general .form-item .radio-box input[type='radio']~label::after {
    display: none !important;
}

section.detail .form .donate-options .radio-item input[type='radio']~label {
    padding-left: 0.24rem !important;
}

/* ==========================================================================
   DONATION STATUS (BAĞIŞ DURUM ÇUBUĞU)
   Kullanıldığı yer: Views/Product/ProductDonation.cshtml — banner-light içinde
   Elementler: .donation-status — .donation-title, .donation-bar, .donation-text
   ========================================================================== */
/* Donation Status */

.donation-status .donation-title {
    font-weight: 400;
    font-size: 0.24rem;
    line-height: 1.167em;
    color: #121212;
}

.donation-status .donation-title .strong {
    font-weight: 600;
}


.donation-status .donation-bar {
    background-color: #8CB48C;
    border-radius: 0.1rem;
    width: 3.75rem;
    height: 0.2rem;
    margin-top: 0.12rem;
    position: relative;
}

.donation-status .donation-bar span {
    background-color: #F44336;
    position: absolute;
    top: 0;
    left: 0;
    height: .20rem;
    border-radius: .10rem;
}

.donation-status .donation-text {
    font-weight: 400;
    font-size: 0.18rem;
    line-height: 1.167em;
    color: #121212;
    padding-top: .2rem;
    width: 48%;
}

.donation-status .donation-text p+p {
    padding-top: 1em;
}

/* ==========================================================================
   BANNER LIGHT (SAYFA BAŞLIĞI / CATEGORY BANNER)
   Kullanıldığı yer: Views/Category/Category.cshtml, Views/Product/ProductDonation.cshtml
   Elementler: section.banner-light — .breadcrumb, .title, .btn-scroll, .donation-status
   ========================================================================== */
/* Banner Light */
section.banner-light {
    position: relative;
    background-color: #F5F8FF;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 5.4rem;
}

section.banner-light .container {
    height: 100%;
}

section.banner-light .content {
    position: relative;
    padding-top: 1rem;
    /* padding-bottom: 1.5rem; */
    height: 100%;

    z-index: 1;
}

section.banner-light.product .content {
    /* padding-bottom: .8rem; */
}

section.banner-light .content.white .title,
section.banner-light .content.white .breadcrumb a,
section.banner-light .content.white .breadcrumb span,
section.banner-light .content.white .donation-status .donation-title,
section.banner-light .content.white .donation-status .donation-text {
    color: white;
}

section.banner-light .bg-overlay {
    position: absolute;
    right: 0;
    width: 45%;
    object-fit: contain;
    height: 6.8rem;
    z-index: 1;
    top: -1.84rem;
}

section.banner-light .breadcrumb {
    position: absolute;
    max-width: 100%;
    left: 0;
    top: .24rem;
    white-space: nowrap;
    overflow: auto;
}

section.banner-light .breadcrumb a,
section.banner-light .breadcrumb span {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-weight: 400;
    font-size: .14rem;
    line-height: 1.19em;
    color: #525252;
}

section.banner-light .breadcrumb .page-menu {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-weight: 400;
    font-size: .14rem;
    line-height: 1.19em;
    color: #525252;
}

section.banner-light .breadcrumb>*+* {
    margin-left: .22rem;
}

section.banner-light .breadcrumb>*+*:before {
    content: '/';
    position: absolute;
    color: #525252;
    width: .06rem;
    top: 0;
    right: 100%;
    margin-right: .08rem;
}

section.banner-light .content.white .breadcrumb>*+*:before {
    color: #fff;
}

section.banner-light .breadcrumb .page-menu {}

section.banner-light .breadcrumb .page-menu:after {}

section.banner-light .breadcrumb .page-menu .page-sub {
    display: none;
}

.popup-donate .popup-container {
    transform: none !important;
    padding: 0.4rem !important;
}

.popup-donate .popup-container .form-item {
    padding: .1rem 0;
}

.popup-donate .popup-container .form-validate input[type='checkbox']~label:before {
    border: 1px solid #ff0000;
}

.popup-donate .popup-container .text {
    font-weight: 400;
    font-size: 0.24rem;
    line-height: 1.167em;
    color: #121212;
}

.popup-donate .popup-container .text a {
    text-decoration: underline;
    color: #0A380E;
}

.popup-donate form.general .form-item input[type='checkbox']~label {
    padding-top: .01rem;
}

.popup-donate form.general .form-validate input[type='checkbox']~label {
    padding-top: .01rem;
    color: #ff0000;
}

.popup-donate .form {
    margin-top: 0 !important;
}

.popup-donate .popup-container .btn-default {
    background-color: #C7E6C7;
    float: right;
}

.popup-donate .popup-container .btn-default span {
    color: #0A380E;
}

section.banner-light .title {
    max-width: calc(100% - 8rem);
    font-weight: 700;
    font-size: .80rem;
    line-height: 1em;
    color: #001D85;
}

section.banner-light .title.title-three-lines {
    font-size: .7rem;
}

section.banner-light .title.title-four-lines {
    font-size: .6rem;
}

section.banner-light.product .title {
    max-width: 100%;
}

section.banner-light .title+.donation-status {
    padding-top: .36rem;
}

section.banner-light .btn-scroll {
    position: absolute;
    left: 0;
    bottom: .5rem;
    font-weight: 600;
    font-size: .24rem;
    line-height: 1.2em;
    color: #121212;
}

section.banner-light .btn-scroll:after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: .24rem;
    height: .24rem;
    margin-left: .1rem;
    background-image: url(Icons/k-large-arrow-right.svg);
    background-size: .12rem .12rem;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid #F44336;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

section.banner-light .btn-scroll.down:after {
    transform: rotate(90deg);
}

/* ==========================================================================
   BANNER NEWS (HABER/İÇERİK SAYFASI BANNER)
   Kullanıldığı yer: Views/Content/ContentPage.cshtml
   Elementler: section.banner-news — .breadcrumb, .title, .date
   ========================================================================== */
/* Banner News */

section.banner-news {
    position: relative;
    background-color: white;
}

section.banner-news .content {
    position: relative;
    width: 7.6rem;
    padding-top: 1rem;
    padding-bottom: .8rem;
}

section.banner-news .content:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    left: 0;
    bottom: 0;
    background-color: #C4C4C4;
}

section.banner-news .breadcrumb {
    position: absolute;
    max-width: 100%;
    left: 0;
    top: .24rem;
    white-space: nowrap;
    overflow: auto;
}

section.banner-news .breadcrumb a {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-weight: 500;
    font-size: .16rem;
    line-height: 1.19em;
    color: #757374;
}

section.banner-news .breadcrumb span {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-weight: 500;
    font-size: .16rem;
    line-height: 1.19em;
    color: #121212;
}

section.banner-news .breadcrumb>*+* {
    margin-left: .3rem;
}

section.banner-news .breadcrumb>*+*:before {
    content: '';
    position: absolute;
    width: .06rem;
    height: .1rem;
    top: 50%;
    right: 100%;
    margin-right: .12rem;
    margin-top: -.03rem;
    background-image: url(Icons/breadcrumb.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

section.banner-news .title {
    font-weight: 600;
    font-size: .6rem;
    line-height: 1.13em;
    color: #121212;
}

section.banner-news .date {
    position: absolute;
    left: 0;
    bottom: .2rem;
    font-weight: 600;
    font-size: .16rem;
    line-height: 1.19em;
    color: #424041;
}

section.banner-news .date span {
    font-weight: 400;
}

section.banner-news .date .day:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 4px;
    height: 4px;
    margin-left: .06rem;
    margin-right: .08rem;
    background-color: #424041;
    border-radius: 2px;
}


/* ==========================================================================
   LIST (ÜRÜN LİSTESİ SAYFASI)
   Kullanıldığı yer: Views/Product/ProductList.cshtml
   Elementler: section.list — .left .filter, .right .items .item
   ========================================================================== */
/* List */

section.list {
    position: relative;
    padding-top: .6rem;
    padding-bottom: 1.6rem;
    background-color: #F5F8FF;
}

section.list .left {
    position: sticky;
    display: inline-flex;
    flex-direction: column;
    vertical-align: top;
    width: 25.32%;
    top: 2rem;
    /* Viewport ile sınırlı flex kolon: filtre kutusu içeride scroll eder, alttaki kısayol link sabit kalır. */
    max-height: calc(100vh - 2.4rem);
    padding-right: .4rem;
}

section.list .left .link {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 100%;
    padding: .26rem .64rem .28rem .32rem;
    margin-top: .12rem;
    font-weight: 500;
    font-size: .2rem;
    line-height: 1em;
    color: #FFF;
    border-radius: .04rem;
    background-color: rgb(244 67 54)
}

section.list .left .link:after {
    content: '';
    position: absolute;
    width: .12rem;
    height: .12rem;
    top: 50%;
    right: .32rem;
    margin-top: -.06rem;
    background-image: url(Icons/k-arrow-right-large-white.svg);
    transform: rotate(-45deg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

section.list .filter {
    padding: .32rem .24rem;
    border-radius: .24rem;
    background-color: white;
    /* Kalan alanı kaplar ve kendi içinde scroll eder; altındaki kısayol link (.left .link) sabit kalır. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

section.list .filter::-webkit-scrollbar {
    width: 0.075rem;
}

section.list .filter::-webkit-scrollbar-thumb {
    background: #C0C0C0;
}

section.list .filter::-webkit-scrollbar-thumb:hover {
    background-color: #757575;
}

section.list .filter .general {
    display: flex;
    flex-direction: column;
    gap: .24rem;
}

section.list .filter .form-grup {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

section.list .filter .form-grup .grup-title {
    font-weight: 600;
    font-size: .18rem;
    color: #121212;
    margin: 0;
}

section.list .filter .form-grup .grup-title.with-line {
    border-bottom: 1px solid #EFECED;
    padding-bottom: .12rem;
    margin-bottom: .04rem;
}

/* Kategori listesi artık checkbox (bkz. .filter-items) — bu link stilleri ürün listesinde
   KULLANILMIYOR, kökteki statik tasarım dosyaları (ok.html / yeni.html) referans aldığı için duruyor. */
section.list .filter .form-grup .grup-links {
    display: flex;
    flex-direction: column;
    gap: .16rem;
}

section.list .filter .form-grup .grup-link {
    font-weight: 400;
    font-size: .16rem;
    color: #121212;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: color .2s ease;
}

section.list .filter .form-grup .grup-link:hover {
    color: #001D85;
}

section.list .filter .form-grup .grup-link.active {
    font-weight: 700;
    color: #001D85;
}

section.list .filter .form-grup .grup-link .badge {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: .22rem;
    height: .22rem;
    background-color: #F5F1FF;
    border: 1px solid #B09CFF;
    border-radius: 50%;
    color: #7B57FF;
    font-size: .11rem;
    font-weight: 600;
}

section.list .filter .line {
    height: 1px;
    background-color: #EFECED;
    width: 100%;
    margin: 0;
}

section.list .filter input[type='checkbox']~label {
    font-weight: 400;
    font-size: .16rem;
}

section.list .filter .form-accordion .accordion-title {
    position: relative;
    padding-left: .32rem;
    font-weight: 400;
    font-size: .16rem;
    line-height: 1em;
    color: #121212;
    cursor: pointer;
}

section.list .filter .form-accordion .accordion-title:before {
    content: '';
    position: absolute;
    width: .2rem;
    height: .2rem;
    left: 0;
    top: 50%;
    margin-top: -.1rem;
    background-color: #FFF;
    border: 1px solid #005ba6;
    border-radius: 0.06rem;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

section.list .filter .form-accordion .accordion-title:after {
    content: '';
    position: absolute;
    width: .12rem;
    height: .12rem;
    top: 50%;
    left: .04rem;
    margin-top: -.06rem;
    background-image: url(Icons/k-menu-down.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform .2s ease;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

section.list .filter .form-accordion .accordion-item.active .accordion-title:after {
    transform: rotate(180deg);
}

section.list .filter .form-accordion .accordion-content {
    display: none;
    padding-top: .16rem;
    padding-left: .12rem;
}

section.list .filter .form-accordion .accordion-content input[type='checkbox']~label {
    font-weight: 400;
    font-size: .16rem;
}

section.list .filter .form-accordion .accordion-content .form-item+.form-item {
    margin-top: .12rem;
    padding-top: .12rem;
}

section.list .right {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 74.68%;
}

/* Sol filtre yokken (filtrelenecek bir şey olmayan sayfa) ürünler tam genişlik akar. */
section.list .right.full-width {
    width: 100%;
}

section.list .right .display {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .08rem;
    margin-top: 0;
    margin-bottom: .16rem;
}

section.list .right .display a {
    opacity: .6;
}

section.list .right .display a.active {
    opacity: 1;
}

section.list .right .display a+a {
    margin-left: .08rem;
}

section.list .list-banner {
    position: relative;
    overflow: hidden;
    border-radius: .04rem;
}

section.list .list-banner .image {
    width: 100%;
}

section.list .list-banner .image.mobile {
    display: none;
}

section.list .list-banner .content {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: .4rem;
}

section.list .list-banner .title {
    font-weight: 600;
    font-size: .6rem;
    line-height: .95em;
    color: white;
}

section.list .list-banner .btn-scroll {
    display: block;
    font-weight: 500;
    font-size: .2rem;
    line-height: 1.2em;
    color: white;
}

section.list .list-banner *+.btn-scroll {
    margin-top: .26rem;
}

section.list .list-banner .btn-scroll:after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: .12rem;
    height: .12rem;
    margin-left: .1rem;
    background-image: url(Icons/link-white-rotated.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

section.list .items {
    position: relative;
    display: block;
    margin-left: -.1rem;
    margin-right: -.1rem;
}

section.list *+.items {
    margin-top: .32rem;
}

section.list .items .title {
    padding-top: .12rem;
    margin-left: .1rem;
    margin-right: .1rem;
    margin-bottom: .2rem;
    font-weight: 500;
    font-size: .24rem;
    line-height: 1.2em;
    color: #121212;
    border-top: 2px solid #005BA6;
}

section.list .items.hide {
    display: none;
}

section.list .items .item {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: calc(33.333% - .2rem);
    margin: .1rem;
    padding: 0 !important;
    border-radius: .24rem;
    transition: .2s background-color ease, .2s box-shadow ease;
    -webkit-transition: .2s background-color ease, .2s box-shadow ease;
    -ms-transition: .2s background-color ease, .2s box-shadow ease;
    -moz-transition: .2s background-color ease, .2s box-shadow ease;
    -o-transition: .2s background-color ease, .2s box-shadow ease;
}

section.list .items.double .item {
    width: calc(50% - .2rem);
}

section.list .items.quadruple .item {
    width: calc(25% - .2rem);
}

section.list .items .item.hide {
    display: none;
}

section.list .items .item .image {
    width: 100%;
    object-fit: cover;
}

section.list .items .item .content {
    padding-top: .2rem;
}

section.list .items .item .content .name {
    position: relative;
    height: 2em;
    font-weight: 600;
    font-size: .18rem;
    line-height: 1em;
    color: #121212;
    overflow: hidden;
}

section.list .items .item .content .button {
    display: inline-block;
    padding: .11rem .16rem .11rem .24rem;
    margin-top: .12rem;
    font-weight: 600;
    font-size: .14rem;
    line-height: 1.2em;
    color: #ffffff;
    background-color: #F44336;
    border-radius: .32rem;
}

section.list .items .item .content .button:after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: .2rem;
    height: .2rem;
    background-size: .12rem .12rem;
    margin-left: .05rem;
    background-image: url(Icons/k-arrow-right-large-white.svg);
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid #FFF;
    border-radius: 50%;
}

section.list .items .item .content .price {
    margin-top: .12rem;
    font-weight: 700;
    font-size: .2rem;
    line-height: 1.2em;
    color: #121212;
}

section.list .items .item .content .price .old {
    margin-right: .08rem;
    font-weight: 500;
    font-size: .15rem;
    color: #9b9b9b;
    text-decoration: line-through;
}

/* Sol filtre: temizle butonu, "daha fazla" ve gizlenebilir spec değerleri */
section.list .filter .btn-clear-filter {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    font-weight: 600;
    font-size: .15rem;
    color: #F44336;
}

section.list .filter .btn-clear-filter:before {
    content: '';
    display: inline-block;
    width: .14rem;
    height: .14rem;
    margin-right: .06rem;
    background-image: url(Icons/menu-close.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* Filtre değer listesi: kategori, özellik ve durum grupları aynı hizalama/boşluk düzenini paylaşır. */
section.list .filter .filter-items {
    display: flex;
    flex-direction: column;
    gap: .16rem;
}

section.list .filter .filter-items .filter-item-hideable {
    display: none;
}

section.list .filter .filter-items.more-open .filter-item-hideable {
    display: block;
}

section.list .filter .filter-more {
    display: inline-block;
    margin-top: .04rem;
    font-weight: 600;
    font-size: .15rem;
    color: #001D85;
    cursor: pointer;
}

/* Sayfalama */
section.list .paging {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .08rem;
    margin-top: .4rem;
}

section.list .paging .page,
section.list .paging .arrow {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: .44rem;
    height: .44rem;
    padding: 0 .1rem;
    font-weight: 600;
    font-size: .16rem;
    line-height: 1;
    color: #121212;
    background-color: #FFF;
    border: 1px solid #E1E6F5;
    border-radius: .08rem;
    transition: .2s background-color ease, .2s color ease, .2s border-color ease;
}

section.list .paging a.page:hover,
section.list .paging a.arrow:hover {
    border-color: #001D85;
    color: #001D85;
}

section.list .paging .page.active {
    color: #FFF;
    background-color: #001D85;
    border-color: #001D85;
}

section.list .paging .dots {
    display: inline-flex;
    align-items: flex-end;
    padding: 0 .04rem;
    color: #9b9b9b;
    font-weight: 600;
}


/* ==========================================================================
   DETAIL (ÜRÜN DETAY / BAĞIŞ FORMU SAYFASI)
   Kullanıldığı yer: Views/Product/ProductDonation.cshtml
   Elementler: section.detail — .form (form-section, title, donate-options), .media (resim slider)
   ========================================================================== */
/* Detail */

section.detail {
    position: relative;
    padding-top: .7rem;
    padding-bottom: 1.4rem;
    background-color: #F5F8FF;
}

section.detail .container {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
}

section.detail .form {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 5.68rem);
    padding-left: 1.3rem;
    padding-right: 0rem;
    counter-reset: form-section;
}

section.detail .form .form-section {
    position: relative;
    margin-left: -.1rem;
    margin-right: -.1rem;
    counter-increment: form-section;
}

section.detail .form .form-section+.form-section {
    padding-top: .8rem;
}

section.detail .form .form-section:before {
    content: '';
    position: absolute;
    width: 1px;
    height: calc(100% + .3rem);
    left: -.46rem;
    top: 0;
    background-color: #B9BDD7;
}

section.detail .form .form-section:last-child:before {
    height: .8rem;
}

section.detail .form .title {
    position: relative;
    margin-left: .1rem;
    margin-right: .1rem;
    font-weight: 600;
    font-size: .24rem;
    line-height: 1.19em;
    color: #121212;
}

section.detail .form .title:before {
    content: counter(form-section);
    position: absolute;
    width: .48rem;
    height: .48rem;
    left: -.8rem;
    top: 0;
    font-weight: 500;
    font-size: .24rem;
    color: #001D85;
    border-radius: 50%;
    border: 1px solid #F44336;
    background-color: white;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

section.detail .form .title .info {
    font-size: .22rem;
    cursor: pointer;
}

section.detail .form .text {
    margin-left: .1rem;
    margin-right: .1rem;
    margin-top: .12rem;
    margin-bottom: .28rem;
    font-weight: 400;
    font-size: .2rem;
    line-height: 1.5em;
    color: #121212;
}

section.detail .form .title+.text {
    margin-top: .4rem;
}

section.detail .form .form-col {
    display: inline-block;
    vertical-align: top;
    width: 50%;
}

.full-width {
    width: 100% !important;
}

section.detail .form .form-item {
    width: auto;
    margin: .24rem .1rem 0;
}

section.detail .form .form-item.auth-subscription-parent {
    width: 100% !important;
    margin-bottom: .24rem;
}

section.detail .form .auth-subscription-children-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    width: 100%;
    margin: .12rem .1rem 0;
}

section.detail .form .auth-subscription-children-wrapper .form-item.auth-subscription-child {
    width: auto !important;
    margin: 0 !important;
}

section.detail .form .form-item.no-margin-top {
    margin-top: 0;
}

section.detail .form .btn-icon {
    margin: .12rem .1rem;
}

section.detail .form .warning {
    margin: .12rem .1rem;
    padding: .16rem .20rem;
    border-radius: .04rem;
    border: none;
    background-color: #FCF2E0;
}

section.detail .form .warning img {
    display: inline-block;
    vertical-align: top;
    width: .20rem;
    margin-top: .02rem;
}

section.detail .form .warning .warning-text {
    display: inline-block;
    vertical-align: top;
    font-weight: 400;
    font-size: .12rem;
    line-height: 1.4em;
    color: #D15500;
}

section.detail .form .warning *+.warning-text {
    width: calc(100% - .32rem);
    margin-left: .12rem;
}

section.detail .form .warning .warning-text b,
section.detail .form .warning .warning-text strong {
    text-decoration: underline;
}

section.detail .form .separator {
    display: inline-block;
    width: calc(100% - .2rem);
    height: 1px;
    margin: .24rem .1rem;
    background-color: #D4C7C0;
}

section.detail .form .separator.small {
    margin: .12rem .1rem;
}

section.detail .form .buttons {
    margin: .12rem .1rem;
}

section.detail .form .buttons .btn-default {
    min-width: 2.4rem;
    margin-right: .32rem;
}

section.detail .form .buttons .note {
    display: inline-block;
    vertical-align: middle;
    margin-top: .12rem;
    margin-bottom: .12rem;
    font-weight: 400;
    font-size: .15rem;
    line-height: 1.2em;
    color: #121212;
}

section.detail .form .certificate {
    position: relative;
    display: inline-block;
    width: calc(100% - .2rem);
    margin: .12rem .1rem;
    padding: .13rem;
    border: 2px solid #D5D5D5;
    border-radius: .08rem;
}

section.detail .form .certificate .input-error {
    display: none;
}

section.detail .form .certificate .certificate-title {
    display: block;
    width: 100%;
    font-weight: 600;
    font-size: .16rem;
    line-height: 1.19em;
    color: #D15500;
}

section.detail .form .certificate .certificate-title .btn-remove,
section.detail .form .certificate .certificate-title .btn-copy {
    cursor: pointer;
}

section.detail .form .certificate .certificate-header .form-item-main {
    display: flex;
}

section.detail .form .certificate .certificate-header .form-item input[type='checkbox']~label {
    font-size: .14rem;
    line-height: 1.4em;
}

section.detail .form .certificate .certificate-header .form-item input[type='checkbox']~label:before {
    background-color: white;
}

section.detail .form .certificate-excel {
    display: none;
}

section.detail .form *+.certificate-box {
    margin-top: .24rem;
}

section.detail .form .certificate-box+.certificate-box {
    margin-top: .08rem;
}

section.detail .form .certificate-box .box-body {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
}

section.detail .form .certificate-box .box-body .form-item {
    display: inline-block;
    vertical-align: top;
    margin: 0.1rem 0rem 0rem;
}

section.detail .form .certificate-box .box-body .form-item:first-child {
    border-radius: 0 0 0 .04rem;
}

section.detail .form .certificate-box .box-body .form-item:last-child {
    border-radius: 0 0 .04rem 0;
}

/* Yan yana sertifika alanları arasında border kaldırıldı */

section.detail .form .certificate-box .box-body .form-item input {
    border: none;
    height: .54rem;
    padding-left: .24rem;
    padding-right: .24rem;
    padding-top: .16rem;
    border: 1px solid #C3C3C3;
}

section.detail .form .certificate-box .box-body .phone-certificate-sms,
section.detail .form .certificate-box .box-body .date-certificate-date {
    display: none;
}

section.detail .form .date-certificate-date20 {
    display: none;
    margin-top: 0;
    width: 24.2%;
}

section.detail .form .certificate-select-date {
    display: flex;
    width: 52%;
}

section.detail .form .certificate-select-date-main {
    display: flex;
    align-items: center;
    width: 100%;
}


section.detail .form .certificate-select-date-main .input-error {
    display: none;
}

section.detail .form .btn-certificate-excel {
    width: 100%;
    width: -webkit-fill-available;
    margin: 0.1rem 0.1rem !important;
}

.certificate-date-bulk {
    margin: 0.1rem !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
}

.date-certificate-bulk {
    margin: 0.1rem !important;
    padding: 0 !important;
    width: 48% !important;
}

section.detail .form .certificate-box .box-body .form-item[a-error] input {
    border-width: 1px;
    border-style: solid;
    border-color: #CD4444
}

section.detail .form .certificate-box .box-body .form-item input:focus {
    /* border-color: transparent; */
}

section.detail .form .certificate-box .box-body .form-item.extra-small {
    width: 14%;
}

section.detail .form .certificate-box .box-body .form-item.small {
    width: 14%;
}

section.detail .form .certificate-box .box-body .form-item.medium {
    width: 30%;
}

section.detail .form .certificate-box .box-body .form-item.large {
    width: 35%;
}

section.detail .form .certificate-box .box-body .form-item.extra-large {
    width: 43%;
}

section.detail .form .certificate-box .box-body .form-item.extra-xlarge {
    width: 49.5%;
}

section.detail .form .certificate-add {
    position: relative;
    margin: .12rem .1rem;
    text-align: center;
}

section.detail .form .certificate-add .count {
    position: absolute;
    left: 0;
    top: 50%;
    font-weight: 500;
    font-size: .14rem;
    line-height: 1.2em;
    color: #757374;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

section.detail .form .certificate-add .btn-add {
    min-width: 3rem;
}

section.detail .form .donate-options {
    margin-top: .24rem;
}

section.detail .form .donate-options label.small {
    display: block;
    margin-bottom: .12rem;
    font-weight: 500;
    font-size: .16rem;
    line-height: 1.2em;
    color: #121212;
}

section.detail .form .donate-options .radio-item {
    display: inline-block;
    margin-right: .12rem;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: .12rem;
}

section.detail .form .donate-options .radio-item:first-child,
section.detail .form .donate-options label.small+.radio-item {
    margin-left: 0;
}

section.detail .form .donate-options .radio-item input[type='radio'] {
    position: absolute;
    left: -9999px;
}

section.detail .form .donate-options .radio-item input[type='radio']~label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.2rem;
    padding: .16rem .24rem;
    font-weight: 700;
    font-size: .16rem;
    line-height: 1.2em;
    color: #121212;
    background: #FFFFFF;
    border: 1px solid #F44336;
    border-radius: 2rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

section.detail .form .donate-options .radio-item input[type='radio']:checked~label {
    background: #F44336;
    color: #FFFFFF;
    border-color: #F44336;
}

section.detail .form .donate-options .form-col {
    display: block;
    width: 100%;
    margin-top: .16rem;
}

section.detail .form .donate-options .form-col .form-item {
    margin: 0;
    max-width: 4rem;
}

section.detail .form .donate-options .form-col input[type='text'] {
    width: 100%;
    height: .52rem;
    padding: 0 .24rem;
    border-radius: 2rem;
    border: 1px solid #D5D5D5;
    font-size: .16rem;
    font-weight: 500;
    color: #121212;
    background: #FFFFFF;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

section.detail .form .donate-options .form-col input[type='text']:focus {
    border-color: #F44336;
    outline: none;
}

/* --- Genel Wrapper --- */
section.detail .form .spec-selection {
    margin: .0rem .1rem .28rem .1rem;
}

section.detail .form .spec-selection+.spec-selection {
    margin-top: .08rem;
}

section.detail .form .spec-label {
    display: block;
    margin-bottom: .12rem;
    font-weight: 500;
    font-size: .2rem;
    line-height: 1.2em;
    color: #121212;
}

section.detail .form .spec-items {
    display: flex;
    flex-wrap: wrap;
    gap: .1rem;
}

/* --- Beden Butonları (Text) --- */
section.detail .form .spec-size-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: .6rem;
    height: .48rem;
    padding: 0 .16rem;
    font-weight: 500;
    font-size: .18rem;
    line-height: 1;
    color: #121212;
    text-decoration: none;
    border: 2px solid #EFECED;
    border-radius: .06rem;
    background-color: white;
    box-sizing: border-box;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

section.detail .form .spec-size-item:hover {
    border-color: #F44336;
}

section.detail .form .spec-size-item.active {
    color: white;
    border-color: #F44336;
    background-color: #F44336;
    pointer-events: none;
}

section.detail .form .spec-size-item.disabled {
    color: #CCCCCC;
    border-color: #EFECED;
    background-color: #FAFAFA;
    text-decoration: line-through;
    pointer-events: none;
    cursor: default;
}

/* --- Renk Swatch'ları (Resimli) --- */
section.detail .form .spec-color-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    width: .8rem;
    text-decoration: none;
    cursor: pointer;
}

section.detail .form .spec-color-item:hover .spec-color-img {
    border-color: #121212;
}

section.detail .form .spec-color-item.active .spec-color-img {
    border-color: #121212;
    box-shadow: 0 0 0 1px #121212;
}

section.detail .form .spec-color-item.disabled {
    opacity: .35;
    pointer-events: none;
    cursor: default;
}

section.detail .form .spec-color-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: .72rem;
    height: .72rem;
    border-radius: .06rem;
    border: 2px solid #EFECED;
    overflow: hidden;
    box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease;
}

section.detail .form .spec-color-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

section.detail .form .spec-color-name {
    display: block;
    margin-top: .06rem;
    font-weight: 400;
    font-size: .14rem;
    line-height: 1.2em;
    color: #666666;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: .8rem;
}

section.detail .form .spec-color-item.active .spec-color-name {
    color: #121212;
    font-weight: 500;
}

section.detail .form .donate-box {
    position: relative;
    padding: .26rem .16rem;
    margin: .16rem .1rem;
    border-radius: .16rem;
    background-color: #DADFF3;
}

section.detail .form .donate-box .donate-text {
    font-weight: 500;
    font-size: .14rem;
    line-height: 1.4em;
    color: #121212;
    margin-bottom: .24rem;
    margin-left: .12rem;
}

section.detail .form .donate-box .donate-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .16rem .24rem;
    border-radius: .12rem;
    background-color: white;
}

section.detail .form .donate-box .donate-item+.donate-text {
    padding-top: .16rem;
}

section.detail .form .donate-box *+.donate-item {
    margin-top: 0;
}

section.detail .form .donate-box .donate-item .form-item {
    width: auto;
    margin: 0;
    flex-grow: 1;
}

section.detail .form .donate-box .donate-item label {
    display: block;
    font-weight: 500;
    font-size: .14rem;
    line-height: 1.2em;
    color: #121212;
    margin-bottom: .04rem;
}

section.detail .form .donate-box .donate-item input {
    height: auto;
    padding: 0;
    font-weight: 600;
    font-size: .32rem;
    line-height: 1.2em;
    color: #121212;
    background: transparent;
    border: none;
    outline: none;
    -webkit-text-fill-color: #121212;
}

section.detail .form .donate-box .donate-item .btn-default {
    position: static;
    min-width: 2rem;
    height: .58rem;
    margin-left: .2rem;
    flex-shrink: 0;
    border-radius: 2rem;
}

section.detail .form .donate-box .donate-item.small {
    width: 50%;
}

section.detail .form .donate-box .donate-item.small .form-item {
    width: 100%;
}

section.detail .form .file-upload {
    margin: .12rem .1rem;
}

section.detail .media {
    position: sticky;
    display: inline-block;
    vertical-align: top;
    width: 5.68rem;
    top: 2rem;
}

section.detail .media .product-media-container {
    display: flex;
    flex-direction: row;
    gap: .16rem;
    align-items: flex-start;
}

section.detail .media .product-media-container .image,
section.detail .media .product-media-container .owl-carousel img,
section.detail .media .product-media-container .owl-carousel {
    width: 4.8rem;
    height: 4.8rem;
    object-fit: cover;
    border-radius: .24rem;
}

section.detail .media .product-media-container .image {
    width: 100%;
    height: 100%;
    border-radius: 0;

}

section.detail .media .product-media-container .owl-carousel {
    overflow: hidden;
}

section.detail .media .product-media-container .dots {
    display: flex;
    flex-direction: column;
    gap: .12rem;
    flex-shrink: 0;
}

section.detail .media .product-media-container .dots .item {
    width: .72rem;
    height: .72rem;
    border-radius: .18rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    opacity: .5;
    border: 2px solid transparent;
    transition: opacity .2s ease, border-color .2s ease;
    box-sizing: border-box;
}

section.detail .media .product-media-container .dots .item.active {
    opacity: 1;
    border-color: #001D85;
}

section.detail .preview {
    position: relative;
    width: 100%;
    font-family: "Open Sans";
    font-weight: 700;
}

section.detail .preview img {
    width: 100%;
}

section.detail .preview>span {
    position: absolute;
    width: 100%;
    left: 0;
    white-space: nowrap;
    font-size: .37rem;
    white-space: nowrap;
    transform-origin: top;
    text-align: center;
}

section.detail .preview.bold>span {
    font-weight: bold;
}

section.detail .preview>span>span {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}



section.long-cards {
    position: relative;
    padding-top: .6rem;
    padding-bottom: .6rem;
}

section.long-cards .section-title {
    font-size: .36rem;
    color: #001D85;
    font-weight: 700;
    margin-bottom: .4rem;
}

section.long-cards .cards-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .32rem;
}

section.long-cards .card-item {
    width: 3.56rem;
}

section.long-cards .card-link {
    text-decoration: none;
    display: block;
    color: inherit;
}

section.long-cards .card-cover {
    width: 3.56rem;
    height: 5.05rem;
    border-radius: .24rem;
    overflow: hidden;
    background-color: #f5f5f5;
    margin-bottom: .2rem;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

section.long-cards .card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

section.long-cards .card-year {
    font-size: .18rem;
    font-weight: 600;
    color: #121212;
    margin-bottom: .16rem;
}

section.long-cards .card-title {
    font-size: .18rem;
    font-weight: 700;
    color: #121212;
}

.button-container {
    position: relative;
    margin-top: .32rem;
    display: flex;
    width: 100% !important;
}

.button-container.btn-left {
    justify-content: flex-start;
}

.button-container.btn-center {
    justify-content: center;
}

.button-container.btn-right {
    justify-content: flex-end;
}

.button-container .container {
    display: flex;
}

.button-container.btn-left .container {
    justify-content: flex-start;
}

.button-container.btn-center .container {
    justify-content: center;
}

.button-container.btn-right .container {
    justify-content: flex-end;
}


/* ==========================================================================
   FOOTER (ALT BİLGİ)
   Kullanıldığı yer: Views/Shared/Footer.cshtml
   Elementler: footer — .top (logolar), .menu (linkler), .bottom (copyright)
   ========================================================================== */
/* Footer */

footer {
    position: relative;
    background-color: white;
}

footer .menu {
    position: relative;
    padding-top: .6rem;
    padding-bottom: .6rem;
}

footer .menu .footer-logo {
    margin-bottom: .4rem;
}

footer .menu .footer-logo img {
    height: .65rem;
    object-fit: contain;
}

footer .menu .footer-menu-items {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

footer .menu .item {
    display: inline-block;
    vertical-align: top;
    width: 20%;
    padding-right: .2rem;
}

footer .menu .item .title {
    margin-bottom: .20rem;
    font-weight: 700;
    font-size: .16rem;
    line-height: 1.22em;
    color: #001D85;
}

footer .menu .item .title a {
    display: inline-block;
    font-weight: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    text-decoration: none;
}

footer .menu .item .submenu-links>a {
    display: block;
    font-weight: 500;
    font-size: .15rem;
    line-height: 1.25em;
    color: #001D85;
    text-decoration: none;
    transition: color 0.2s ease;
}

footer .menu .item .submenu-links>a:hover {
    color: #F44336;
}

footer .menu .item .submenu-links a+a {
    margin-top: .12rem;
}

footer .bottom {
    padding-bottom: .4rem;
}

footer .bottom .footer-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #EFECED;
    padding-top: .3rem;
}

footer .bottom .footer-contact {
    width: 45%;
}

footer .bottom .footer-contact p {
    font-size: .14rem;
    line-height: 1.6em;
    color: #001D85;
    margin: 0;
    font-weight: 500;
}

footer .bottom .footer-contact p span {
    margin-right: .2rem;
}

footer .bottom .footer-contact p a {
    color: #001D85;
    text-decoration: none;
    margin-right: .2rem;
}

footer .bottom .footer-contact p a:last-child {
    margin-right: 0;
}

footer .bottom .footer-contact p a:hover {
    color: #F44336;
}

footer .bottom .footer-stamp {
    width: 15%;
    display: flex;
    justify-content: center;
}

footer .bottom .footer-stamp img {
    height: .65rem;
    object-fit: contain;
}

footer .bottom .footer-social-copyright {
    width: 40%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .15rem;
}

footer .bottom .footer-social {
    display: flex;
    gap: .24rem;
}

footer .bottom .footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: .32rem;
    height: .32rem;
}

footer .bottom .footer-social a img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

footer .bottom .footer-copyright {
    font-size: .14rem;
    color: #001D85;
    text-align: right;
    font-weight: 500;
}


/* ==========================================================================
   CART (SEPETİM SAYFASI)
   Kullanıldığı yer: Views/Cart/Cart.cshtml
   Elementler: section.cart — .cart-container .item, .cart-summary
   ========================================================================== */
/* Cart */

section.cart {
    position: relative;
    padding-top: .24rem;
    padding-bottom: 1.2rem;
}

section.cart .breadcrumb {
    position: relative;
    max-width: 100%;
    white-space: nowrap;
    overflow: auto;
}

section.cart .breadcrumb a {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-weight: 400;
    font-size: .14rem;
    line-height: 1.19em;
    color: #525252;
}

section.cart .breadcrumb span {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-weight: 400;
    font-size: .14rem;
    line-height: 1.19em;
    color: #525252;
}

section.cart .breadcrumb>*+* {
    margin-left: .22rem;
}

section.cart .breadcrumb>*+*:before {
    content: '/';
    position: absolute;
    color: #525252;
    width: .06rem;
    top: 0;
    right: 100%;
    margin-right: .08rem;
}

section.cart .title {
    font-weight: 700;
    font-size: .8rem;
    line-height: 1.36em;
    color: #001D85;
}

section.cart *+.title {
    margin-top: .64rem;
}

section.cart .cart-container {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 66.2%;
    padding: .28rem;
    margin-top: .44rem;
    background-color: white;
    border-radius: .08rem;
}

section.cart .cart-container .item {
    position: relative;
    min-height: .8rem;
    padding: .2rem 1.2rem .28rem .2rem;
    border-radius: .08rem;
    border: 1px solid #D5D5D5;
    cursor: pointer;
    transition: .2s border-color ease;
    -webkit-transition: .2s border-color ease;
    -ms-transition: .2s border-color ease;
    -moz-transition: .2s border-color ease;
    -o-transition: .2s border-color ease;
}

section.cart .cart-container .item+.item {
    margin-top: .08rem;
}

section.cart .cart-container .item .name {
    font-weight: 600;
    font-size: .18rem;
    line-height: 1.2em;
    color: #121212;
    transition: .2s color ease;
    -webkit-transition: .2s color ease;
    -ms-transition: .2s color ease;
    -moz-transition: .2s color ease;
    -o-transition: .2s color ease;
}

section.cart .cart-container .item .detail {
    font-weight: 400;
    font-size: .14rem;
    line-height: 1.2em;
    color: #121212;
}

section.cart .cart-container .item *+.detail {
    margin-top: .04rem;
}

section.cart .cart-container .item .category {
    font-weight: 400;
    font-size: .14rem;
    line-height: 1.2em;
    color: #121212;
}

section.cart .cart-container .item *+.category {
    margin-top: .28rem;
}

section.cart .cart-container .item .price {
    position: absolute;
    top: .2rem;
    right: .2rem;
    font-weight: 700;
    font-size: .18rem;
    line-height: 1.2em;
    color: #121212;
}

section.cart .cart-container .item .actions {
    position: absolute;
    bottom: .28rem;
    right: .2rem;
}

section.cart .cart-container .item .actions .btn-edit {
    display: inline-block;
    vertical-align: middle;
    font-weight: 400;
    font-size: .14rem;
    line-height: 1.2em;
    color: #121212;
}

section.cart .cart-container .item .actions .btn-remove {
    display: inline-block;
    vertical-align: middle;
    margin-left: .2rem;
}

section.cart .cart-container .item .actions .btn-remove img {
    width: .13rem;
}

section.cart .cart-container .note {
    font-weight: 400;
    font-size: .14rem;
    line-height: 1.2em;
    color: #121212;
}

section.cart .cart-container *+.note {
    margin-top: .24rem;
}

section.cart .cart-container .btn-default {
    background-color: rgb(0 91 166);
}

section.cart .cart-container *+.btn-default {
    margin-top: .4rem;
}

section.cart .cart-container .btn-default span {
    color: #FFF;
}

section.cart .cart-summary {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: calc(33.8% - .2rem);
    padding: .28rem;
    margin-top: .44rem;
    margin-left: .2rem;
    background-color: white;
    border-radius: .08rem;
}

section.cart .cart-summary .summary-title {
    font-weight: 500;
    font-size: .28rem;
    line-height: 1.2em;
    color: #121212;
}

section.cart .cart-summary .items {
    border: 1px solid #D5D5D5;
    border-radius: .08rem;
}

section.cart .cart-summary *+.items {
    margin-top: .32rem;
}

section.cart .cart-summary .items+.items {
    margin-top: .12rem;
}

section.cart .cart-summary .item {
    padding: .15rem .2rem .18rem .2rem;
}

section.cart .cart-summary .item+.item {
    border-top: 1px solid #D5D5D5;
}

section.cart .cart-summary .item span {
    display: inline-block;
    vertical-align: middle;
    width: 50%;
    font-weight: 400;
    font-size: .16rem;
    line-height: 1.2em;
    color: #121212;
}

section.cart .cart-summary .item span:last-child {
    text-align: right;
}

section.cart .cart-summary .items.green {
    border-color: #C7E6C7;
}

section.cart .cart-summary .items.green .item span {
    font-weight: 500;
    color: #0A380E;
}

section.cart .cart-summary .items.green .item span b,
section.cart .cart-summary .items.green .item span strong {
    color: #F44336;
}

section.cart .cart-summary .btn-default {
    width: 100%;
}

section.cart .cart-summary *+.btn-default {
    margin-top: .24rem;
}

section.cart .cart-summary *+.bottom {
    margin-top: .28rem;
}

section.cart .cart-summary .bottom .image {
    display: inline-block;
    vertical-align: top;
    width: .7rem;
    height: .34rem;
    padding-left: .2rem;
    padding-right: .2rem;
    margin-top: -.08rem;
}

section.cart .cart-summary .bottom .image img {
    width: .3rem;
}

section.cart .cart-summary .bottom .note {
    display: inline-block;
    vertical-align: top;
    font-weight: 400;
    font-size: .14rem;
    line-height: 1.2em;
    width: 100%;
    color: #121212;
    text-align: center;
}


/* ==========================================================================
   CHECKOUT (ÖDEME SAYFASI)
   Kullanıldığı yer: Views/Checkout/Checkout.cshtml
   Elementler: section.checkout — .payment (ödeme formu), .cart-summary (özet panel)
   ========================================================================== */
/* Checkout */

section.checkout {
    position: relative;
    padding-top: .4rem;
    padding-bottom: 2rem;
}

section.checkout .payment {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 66.2%;
}

section.checkout .payment .card {
    padding: .28rem;
    background-color: white;
    border-radius: .08rem;
}

section.checkout .payment .card+.card {
    margin-top: .24rem;
}

section.checkout .payment .card .card-title {
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: .28rem;
    line-height: 1.2em;
    color: #121212;
}

section.checkout .payment .card *+.card-title {
    margin-top: .48rem;
}

section.checkout .payment .card .card-title .btn-add-address,
section.detail .form .form-section .title .btn-add-address,
section.account .account-title .btn-add-address {
    display: inline-flex;
    align-items: center;
    padding: .11rem .2rem;
    padding-left: .36rem;
    margin-left: .2rem;
    font-weight: 600;
    font-size: .14rem;
    line-height: 1.2em;
    color: #F44336;
    border: 1px solid #F44336;
    border-radius: 2rem;
    background-image: url(/Content/Icons/k-plus-orange.svg);
    background-repeat: no-repeat;
    background-size: .18rem .18rem;
    background-position: left .12rem center;
    text-decoration: none;
    transition: all 0.2s ease;
}

section.checkout .payment .card .card-title .btn-add-address:hover,
section.detail .form .form-section .title .btn-add-address:hover,
section.account .account-title .btn-add-address:hover {
    background-color: #FFF6F2;
}

section.checkout .payment .card *+.content {
    margin-top: .3rem;
}

section.checkout .payment .card .content .form-item+.form-item {
    margin-top: .08rem;
}

section.checkout .payment .card .content .amount-box {
    background: #FFF6F2;
    border: 1px solid #F44336;
    border-radius: .08rem;
    padding: .11rem .13rem .13rem .13rem;
    display: inline-block;
}

section.checkout .payment .card .content .text {
    font-weight: 400;
    font-size: .2rem;
    line-height: 1.2em;
    color: #121212;
}

section.checkout .payment .card .content .text.amount {
    color: #F44336 !important;
}

section.checkout .payment .card .content .text.amount b {
    white-space: nowrap;
}

section.checkout .payment .card .content .text.pay-bank-info {
    margin-top: .1rem;
    font-size: .14rem !important;
}

section.checkout .payment .card .content .tab-menu {
    position: relative;
    margin: -.04rem;
    padding-bottom: .12rem;
}

section.checkout .payment .card .content .tab-menu:after {
    content: '';
    position: absolute;
    width: calc(100% - .08rem);
    height: 1px;
    top: 100%;
    left: .04rem;
    background-color: #EFECED;
}

section.checkout .payment .card .content .tab-menu a {
    display: inline-block;
    vertical-align: middle;
    margin: .04rem;
    padding: .2rem;
    padding-bottom: .22rem;
    font-weight: 500;
    font-size: .18rem;
    line-height: 1.2em;
    color: #121212;
    background: #FFFFFF;
    border-radius: .04rem;
    border: 1px solid #EFECED;
}

section.checkout .payment .card .content .tab-menu a.active {
    color: #F44336;
    background: #FFF6F2;
    border-color: #F44336;
}

section.checkout .payment .card .content .tab-container {
    padding-top: .32rem;
}

section.checkout .payment .card .content .tab-item {
    display: none;
}

section.checkout .payment .card .content .tab-item.active {
    display: block;
}

section.checkout .payment .card .content .payment-info {
    position: relative;
    width: 4.88rem;
    margin: -.12rem -.24rem;
    padding-top: .4rem;
    padding-bottom: .32rem;
}

section.checkout .payment .card .content *+.payment-info {
    margin-top: .2rem;
}

section.checkout .payment .card .content *+.payment-info:before {
    content: '';
    position: absolute;
    width: calc(100% - .48rem);
    height: 1px;
    bottom: 100%;
    left: .24rem;
    background-color: #EFECED;
}

section.checkout .payment .card .content .payment-info:after {
    content: '';
    position: absolute;
    width: calc(100% - .48rem);
    height: 1px;
    top: 100%;
    left: .24rem;
    background-color: #EFECED;
}

section.checkout .payment .card .content .payment-info .form-item {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - .48rem);
    margin: .12rem .24rem;
}

section.checkout .payment .card .content .payment-info .form-item.half {
    width: calc(50% - .48rem);
}

section.checkout .payment .card .content .payment-info .form-item.double input {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 50%;
    border-radius: .04rem 0 0 .04rem;
}

section.checkout .payment .card .content .payment-info .form-item.double input+input {
    border-radius: 0 .04rem .04rem 0;
    margin-left: -1px;
}

section.checkout .payment .card .content .payment-info .form-item.double input:focus {
    z-index: 2;
}

section.checkout .payment .card .content .payment-info .form-item .card-icon {
    position: absolute;
    top: .4rem;
    left: 100%;
    margin-left: .2rem;
}

section.checkout .payment .card .content *+.contracts {
    margin-top: .44rem;
}

section.checkout .payment .card .content .contracts .form-item+.form-item {
    margin-top: .18rem;
}

section.checkout .payment .card .content .btn-default {
    min-width: 4.4rem;
}

section.checkout .payment .card *+.btn-default {
    margin-top: .4rem;
}

section.checkout .payment .card .content .masterpass-masterpass-card {
    margin-bottom: -.12rem !important;
}

section.checkout .payment .card .content .masterpass-info {
    margin-top: 0 !important;
    padding-top: .32rem;
}

section.checkout .payment .card .content .masterpass-info .masterpass-details {
    margin: 0.12rem 0.24rem;
}

section.checkout .payment .card .content .masterpass-info .masterpass-details .text {
    width: calc(100% - 1.38rem);
    font-weight: 400;
    font-size: 0.14rem;
    line-height: 1.429em;
    color: #4a503e;
}

section.checkout .payment .card .content .masterpass-info .masterpass-details .text a {
    font-weight: 600;
}

section.checkout .payment .card .content .masterpass-info .masterpass-details img {
    width: 1.22rem;
}

section.checkout .payment .card .content .masterpass-info .masterpass-details *+img {
    margin-left: .16rem;
}

section.checkout .payment .card .content .masterpass-cards {
    padding-top: .24rem;
    padding-bottom: .12rem;
}

section.checkout .payment .card .content .masterpass-cards:after {
    display: none;
}

section.checkout .payment .card .content .masterpass-cards .masterpass-card-title {
    margin: 0 .24rem;
    font-weight: 600;
    font-size: 0.18rem;
    line-height: 1.111em;
    color: #121212;
}

section.checkout .payment .card .content .masterpass-cards .masterpass-card-container {
    position: relative;
    margin: .2rem;
}

section.checkout .payment .card .content .masterpass-cards .masterpass-card-container .form-item {
    display: inline-block;
    vertical-align: top;
    width: calc(50% - .08rem);
    margin: .04rem;
}

section.checkout .payment .card .content .masterpass-cards .masterpass-card-container label {
    display: block;
    background: #FFFFFF;
    border: 1px solid #E8E8E8;
    border-radius: .08rem;
    cursor: pointer;
}

section.checkout .payment .card .content .masterpass-cards .masterpass-card-container .masterpass-label {
    position: relative;
    padding: .12rem;
    padding-left: .36rem;
    font-weight: 500;
    font-size: 0.14rem;
    line-height: 1.143em;
    color: #333333;
    background: #FAFAFA;
    border-bottom: 1px solid #E8E8E8;
}

section.checkout .payment .card .content .masterpass-cards .masterpass-card-container .masterpass-label:before {
    content: '';
    position: absolute;
    width: .16rem;
    height: .16rem;
    top: 50%;
    left: .12rem;
    margin-top: -.08rem;
    background: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: .04rem;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

section.checkout .payment .card .content .masterpass-cards .masterpass-card-container input[type='radio']:checked+label .masterpass-label:before {
    border-color: #F44336;
}

section.checkout .payment .card .content .masterpass-cards .masterpass-card-container input[type='radio']:checked+label .masterpass-label:after {
    content: '';
    position: absolute;
    width: .08rem;
    height: .08rem;
    left: .16rem;
    top: 50%;
    margin-top: -.04rem;
    border-radius: .02rem;
    background-color: #F44336;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

section.checkout .payment .card .content .masterpass-cards .masterpass-card-container .masterpass-card-details {
    padding: .12rem;
}

section.checkout .payment .card .content .masterpass-cards .masterpass-card-container .masterpass-card-number {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - .4rem);
    font-weight: 600;
    font-size: 0.14rem;
    line-height: 1.429em;
    color: #333333;
}

section.checkout .payment .card .content .masterpass-cards .masterpass-card-container .masterpass-card-date {
    display: inline-block;
    vertical-align: middle;
    width: .4rem;
    font-weight: 600;
    font-size: 0.14rem;
    line-height: 1.429em;
    color: #333333;
    text-align: right;
}

section.checkout .payment .card .content .masterpass-cards .masterpass-card-container .masterpass-logo {
    padding: .08rem;
    margin-top: .16rem;
    background: #FFFFFF;
    border: 1px solid #E8E8E8;
    border-radius: .04rem;
}

section.checkout .payment .card .content .masterpass-cards .masterpass-card-container .masterpass-logo img {
    width: 1.16rem;
}

section.checkout .payment .card .content .masterpass-cards .masterpass-card-container .masterpass-remove-card {
    position: absolute;
    width: .16rem;
    height: .16rem;
    top: .13rem;
    right: .1rem;
    background-image: url(Icons/cart-remove.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 2;
}

section.checkout .payment .card .content .masterpass-cards .btn-default {
    margin: 0 .24rem;
    margin-top: .24rem;
}

section.checkout .cart-summary {
    position: sticky;
    display: inline-block;
    vertical-align: top;
    width: calc(33.8% - .2rem);
    padding: .28rem;
    margin-left: .2rem;
    background-color: white;
    border-radius: .08rem;
    top: 2rem;
}

section.checkout .cart-summary .summary-title {
    font-weight: 500;
    font-size: .28rem;
    line-height: 1.2em;
    color: #121212;
}

section.checkout .cart-summary .items {
    border: 1px solid #D5D5D5;
    border-radius: .08rem;
}

section.checkout .cart-summary *+.items {
    margin-top: .32rem;
}

section.checkout .cart-summary .items+.items {
    margin-top: .12rem;
}

section.checkout .cart-summary .item {
    padding: .15rem .2rem .18rem .2rem;
}

section.checkout .cart-summary .item+.item {
    border-top: 1px solid #EFECED;
}

section.checkout .cart-summary .item span {
    display: inline-block;
    vertical-align: middle;
    width: 50%;
    font-weight: 400;
    font-size: .16rem;
    line-height: 1.2em;
    color: #121212;
}

section.checkout .cart-summary .item span:last-child {
    text-align: right;
}

section.checkout .cart-summary .items.green {
    border-color: none;
}

section.checkout .cart-summary .items.green .item {
    background-color: #FFF6F2;
    border: 1px solid #F44336;
    border-radius: .08rem;
}


section.checkout .cart-summary .items.green .item span {
    font-weight: 600;
}

section.checkout .cart-summary .items.green .item span b,
section.checkout .cart-summary .items.green .item span strong {
    color: #F44336;
}

section.checkout .cart-summary .btn-default {
    width: 100%;
}

section.checkout .cart-summary *+.btn-default {
    margin-top: .24rem;
}

section.checkout .cart-summary *+.bottom {
    margin-top: .28rem;
}

section.checkout .cart-summary .bottom .note {
    font-weight: 400;
    font-size: .14rem;
    line-height: 1.2em;
    color: #121212;
    text-align: center;
}


/* ==========================================================================
   RESULT (BAŞARILI ÖDEME SONUÇ SAYFASI)
   Kullanıldığı yer: Views/Checkout/CheckoutSuccess.cshtml
   Elementler: section.result — .card, .card-icon, .items
   ========================================================================== */
/* Result */

section.result {
    position: relative;
    padding-top: .24rem;
    padding-bottom: 1.6rem;
}

section.result .breadcrumb {
    position: relative;
    max-width: 100%;
    white-space: nowrap;
    overflow: auto;
}

section.result .breadcrumb a {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-weight: 500;
    font-size: .16rem;
    line-height: 1.19em;
    color: #757374;
}

section.result .breadcrumb span {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-weight: 500;
    font-size: .16rem;
    line-height: 1.19em;
    color: #121212;
}

section.result .breadcrumb>*+* {
    margin-left: .3rem;
}

section.result .breadcrumb>*+*:before {
    content: '';
    position: absolute;
    width: .06rem;
    height: .1rem;
    top: 50%;
    right: 100%;
    margin-right: .12rem;
    margin-top: -.03rem;
    background-image: url(Icons/breadcrumb.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

section.result .breadcrumb+* {
    margin-top: 1.48rem;
}

section.result .card {
    padding: .28rem;
    padding-bottom: 1.2rem;
    text-align: center;
    background-color: white;
    box-shadow: 0 .5rem .5rem rgba(0, 0, 0, 0.05);
    border-radius: .04rem;
}

section.result .card .card-container {
    display: block;
    max-width: 7.6rem;
    margin-left: auto;
    margin-right: auto;
}

section.result .card .card-icon {
    display: block;
    width: .78rem;
    margin-top: -1.7rem;
    margin-left: auto;
    margin-right: auto;
}

section.result .card .title {
    font-weight: 500;
    font-size: .44rem;
    line-height: 1.2em;
    color: #F44336;
}

section.result .card *+.title {
    margin-top: .6rem;
}

section.result .card .text {
    font-weight: 400;
    font-size: .2rem;
    line-height: 1.2em;
    color: #121212;
}

section.result .card *+.text {
    margin-top: .24rem;
}

section.result .card .text+.text {
    margin-top: .32rem;
}

section.result .card .items {
    text-align: left;
}

section.result .card *+.items {
    margin-top: .6rem;
}

section.result .card .item {
    position: relative;
    min-height: .8rem;
    padding: .2rem 1.2rem .28rem .2rem;
    border-radius: .04rem;
    border: 1px solid #EFECED;
    transition: .2s border-color ease;
    -webkit-transition: .2s border-color ease;
    -ms-transition: .2s border-color ease;
    -moz-transition: .2s border-color ease;
    -o-transition: .2s border-color ease;
}

section.result .card .item+.item {
    margin-top: .08rem;
}

section.result .card .item .name {
    font-weight: 500;
    font-size: .18rem;
    line-height: 1.2em;
    color: #121212;
    transition: .2s color ease;
    -webkit-transition: .2s color ease;
    -ms-transition: .2s color ease;
    -moz-transition: .2s color ease;
    -o-transition: .2s color ease;
}

section.result .card .item .detail {
    font-weight: 400;
    font-size: .14rem;
    line-height: 1.2em;
    color: #121212;
}

section.result .card .item *+.detail {
    margin-top: .04rem;
}

section.result .card .item .category {
    font-weight: 400;
    font-size: .14rem;
    line-height: 1.2em;
    color: #121212;
}

section.result .card .item *+.category {
    margin-top: .28rem;
}

section.result .card .item .price {
    position: absolute;
    top: .2rem;
    right: .2rem;
    font-weight: 700;
    font-size: .18rem;
    line-height: 1.2em;
    color: #121212;
}


/* ==========================================================================
   AUTH (GİRİŞ / KAYIT SAYFASI)
   Kullanıldığı yer: Views/Auth/Login.cshtml, Views/Auth/Register.cshtml
   Elementler: section.auth — .auth-container, .form, .title, .link, .forgot-link
   ========================================================================== */
/* Auth */

section.auth {
    position: relative;
    padding-top: .24rem;
    padding-bottom: 1.6rem;
}

section.auth .breadcrumb {
    position: relative;
    max-width: 100%;
    white-space: nowrap;
    overflow: auto;
}

section.auth .breadcrumb a {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-weight: 500;
    font-size: .16rem;
    line-height: 1.19em;
    color: #757374;
}

section.auth .breadcrumb span {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-weight: 500;
    font-size: .16rem;
    line-height: 1.19em;
    color: #121212;
}

section.auth .breadcrumb>*+* {
    margin-left: .3rem;
}

section.auth .breadcrumb>*+*:before {
    content: '';
    position: absolute;
    width: .06rem;
    height: .1rem;
    top: 50%;
    right: 100%;
    margin-right: .12rem;
    margin-top: -.03rem;
    background-image: url(Icons/breadcrumb.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

section.auth .auth-container {
    position: relative;
    padding: .8rem;
    padding-bottom: 1.2rem;
    background-color: white;
    border-radius: .04rem;
    box-shadow: 0 .5rem .5rem rgba(0, 0, 0, 0.05);
}

section.auth *+.auth-container {
    margin-top: .4rem;
    border-radius: .32rem;
}

section.auth .auth-container .form {
    position: relative;
    display: block;
    width: 3.7rem;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

section.auth .auth-container .form .title {
    font-weight: 700;
    font-size: .44rem;
    line-height: 1.2em;
    color: #005BA6;
}

section.auth .auth-container .form .text {
    font-weight: 400;
    font-size: .2rem;
    line-height: 1.2em;
    color: #121212;
}

section.auth .auth-container .form *+.text {
    margin-top: .24rem;
}

section.auth .auth-container .form *+form {
    margin-top: .4rem;
}

section.auth .auth-container .form .form-item {
    text-align: left;
}

section.auth .auth-container .form .form-item.half {
    display: inline-block;
    vertical-align: middle;
    width: 50%;
}

section.auth .auth-container .form .form-item+.form-item {
    margin-top: .24rem;
}

section.auth .auth-container .form .form-item+.form-item.half-margin {
    margin-top: .12rem;
}

section.auth .auth-container .form .form-item input[type='checkbox']~label {
    padding-left: .36rem;
    padding-top: .05rem;
    padding-bottom: .04rem;
    font-size: .15rem;
}

section.auth .auth-container .form .form-item input[type='checkbox']~label a {
    text-decoration: underline;
    color: inherit;
}

section.auth .auth-container .form .form-item input[type='checkbox']~label:before {
    width: .24rem;
    height: .24rem;
}

section.auth .auth-container .form .form-item input[type='checkbox']:checked~label:after {
    width: .1rem;
    height: .08rem;
    left: .07rem;
    top: .08rem;
}

section.auth .auth-container .form .btn-default {
    width: 100%;
}

section.auth .auth-container .form *+.btn-default {
    margin-top: .4rem;
}

section.auth .auth-container .form .link {
    display: inline-block;
    font-weight: 400;
    font-size: .15rem;
    line-height: 1.2em;
    color: #121212;
    text-decoration: underline;
}

section.auth .auth-container .form *+.link {
    margin-top: .4rem;
}

section.auth .auth-container .form .forgot-link {
    display: inline-block;
    float: right;
    font-weight: 400;
    font-size: .15rem;
    line-height: 1.2em;
    color: #121212;
}


/* ==========================================================================
   BANNER (ARAYA GİREN GÖRSEL BANT)
   Kullanıldığı yer: Views/Widget/HomeBanner.cshtml
   Elementler: section.banner — .image-container, .box
   ========================================================================== */
/* Banner */

section.banner {
    position: relative;
}

section.banner:first-of-type {
    padding-top: 1rem;
}

section.banner:last-of-type {
    padding-bottom: 1rem;
}

section.banner .image-container {
    position: relative;
    width: 100%;
    max-width: 16.8rem;
    margin: 0 auto;
}

section.banner *+.image-container {
    margin-top: .88rem;
}

section.banner .image-container .container {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}

section.banner .image-container .image {
    width: 100%;
}

section.banner .image-container .image.mobile {
    display: none;
}


section.banner .image-container .box {
    position: absolute;
    width: 3.7rem;
    height: 3.7rem;
    top: 0;
    right: .24rem;
    padding: .2rem;
    background-color: #005ba6;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

section.banner .image-container .box .image-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: #005ba6;
    opacity: .5;
}

section.banner .image-container .box.yellow .image-layer {
    background-color: #D15500;
    opacity: .5;
}

section.banner:first-of-type .image-container .box {
    top: -.24rem;
    transform: none;
    -webkit-transform: none;
    -ms-transform: none;
    -moz-transform: none;
    -o-transform: none;
}

section.banner .image-container .box:before {
    content: '';
    display: inline-block;
    vertical-align: bottom;
    width: 0;
    height: 100%;
}

section.banner .image-container .box .box-content {
    position: relative;
    display: inline-block;
    vertical-align: bottom;
}

section.banner .image-container .box .box-text {
    font-weight: 500;
    font-size: .28rem;
    line-height: 1.1em;
    color: #FFFFFF;
}

section.banner .image-container .box .box-bottom {
    margin-top: .24rem;
    padding: .08rem .16rem;
    font-weight: 500;
    font-size: .18rem;
    line-height: 1.33em;
    color: #FFFFFF;
    background-color: #f44336;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

section.banner .image-container .box.yellow .box-bottom {
    background-color: #EFB44E;
}

section.banner .image-container .box .icon {
    position: absolute;
    width: .4rem;
    height: .4rem;
    top: .12rem;
    right: .12rem;
    background-color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

section.banner .image-container .box .icon img {
    width: .16rem;
    height: .16rem;
    transform: rotate(-45deg);
}



/* ==========================================================================
   DOUBLE BOXES (2'Lİ BÜYÜK KUTULAR)
   Kullanıldığı yer: Views/Widget/HomeBigBoxes.cshtml (data.ItemsOnLine == 2)
   Elementler: section.double-boxes — .box, .image-layer, .title, .icon
   Varyantlar: .hover, .opacity, .dark, .red
   ========================================================================== */
/* Double Boxes */

section.double-boxes {
    position: relative;
    padding-top: .6rem;
    padding-bottom: .8rem;
}

section.double-boxes .boxes {
    margin-left: -.1rem;
    margin-right: -.1rem;
}

section.double-boxes .box {
    position: relative;
    display: inline-block;
    vertical-align: top;
    height: 3.2rem;
    width: 100%;
    overflow: hidden;
    border-radius: .24rem;
    cursor: pointer;
}


section.double-boxes .box .image-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: #C7E6C7;
    opacity: .7;
}

section.double-boxes.dark .box .image-layer {
    background-color: transparent;
}

section.double-boxes .box .image {
    display: flex;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
}

section.double-boxes .box .image-layer:hover {
    opacity: .5;
}

section.double-boxes .box .image img {
    position: absolute;
}

section.double-boxes .box .text {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: .32rem;
    font-weight: 500;
    font-size: .32rem;
    line-height: 1em;
    color: #FFFFFF;
}

section.double-boxes .box .title {
    color: #ffffff;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    padding: .32rem;
    padding-right: .92rem;
    font-weight: 500;
    font-size: .32rem;
    line-height: 1em;
    z-index: 2;
}

section.double-boxes .box.center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: none;
}

section.double-boxes .box.center .title {
    position: relative;
    padding-right: 0rem;
    width: auto;
}

section.double-boxes .box.center .btn-default {
    z-index: 1;
}

section.double-boxes .box .icon {
    position: absolute;
    width: .4rem;
    height: .4rem;
    top: .28rem;
    right: .32rem;
    border-radius: 1000px;
    border: 1px solid white;
    z-index: 2;
}

section.double-boxes .box .icon:before {
    content: '';
    position: absolute;
    width: .18rem;
    height: .18rem;
    top: 50%;
    left: 50%;
    margin-top: -.09rem;
    margin-left: -.09rem;
    background-image: url(Icons/k-arrow-right-large-white.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* ==========================================================================
   TRIPLE BOXES (3'LÜ BÜYÜK KUTULAR)
   Kullanıldığı yer: Views/Widget/HomeBigBoxes.cshtml (data.ItemsOnLine == 3)
   Elementler: section.triple-boxes — .box-wrapper, .box, .image-layer, .title, .icon
   Varyantlar: .hover, .opacity, .dark, .red
   ========================================================================== */
/* Triple Boxes */

section.triple-boxes {
    position: relative;
    padding-top: .6rem;
    padding-bottom: .6rem;
}

section.triple-boxes:last-of-type {
    padding-bottom: 1.2rem;
}

section.triple-boxes .boxes {
    margin: -.1rem;
}

section.triple-boxes .box-wrapper {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: calc(33.333% - .2rem);
    margin: .1rem;
}

section.triple-boxes .box-wrapper.small {
    width: 3.31rem;
}

section.triple-boxes .box {
    position: relative;
    display: inline-block;
    vertical-align: top;
    height: 3.2rem;
    width: 100%;
    overflow: hidden;
    border-radius: .24rem;
    cursor: pointer;
}

section.triple-boxes .box-wrapper.small .box {
    height: 2.21rem;
}

section.triple-boxes .box .image {
    display: flex;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
}

section.triple-boxes .box .image.hover {
    filter: grayscale(100%);
}

section.triple-boxes .box .image img {
    position: absolute;
}

section.triple-boxes .box .image-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: #C7E6C7;
    opacity: .7;
}

section.triple-boxes .box .image-layer:hover {
    opacity: .5;
}

section.triple-boxes.dark .box .image-layer {
    background-color: transparent;
}

section.triple-boxes .box .text {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: .32rem;
    font-weight: 500;
    font-size: .32rem;
    line-height: 1em;
    color: #FFFFFF;
}

section.triple-boxes .box .title {
    color: #ffffff;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    padding: .32rem;
    padding-right: .92rem;
    font-weight: 500;
    font-size: .32rem;
    line-height: 1em;
    z-index: 2;
}

section.triple-boxes .box .icon {
    position: absolute;
    width: .4rem;
    height: .4rem;
    top: .28rem;
    right: .32rem;
    border-radius: 1000px;
    border: 1px solid white;
    z-index: 2;
}

section.triple-boxes .box .icon:before {
    content: '';
    position: absolute;
    width: .18rem;
    height: .18rem;
    top: 50%;
    left: 50%;
    margin-top: -.09rem;
    margin-left: -.09rem;
    background-image: url(Icons/k-arrow-right-large-white.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}


/* ==========================================================================
   FOUR BOXES (4'LÜ BÜYÜK KUTULAR)
   Kullanıldığı yer: Views/Widget/HomeBigBoxes.cshtml (data.ItemsOnLine == 4)
   Elementler: section.four-boxes — .box-wrapper, .box, .image-layer, .title, .icon
   Varyantlar: .hover, .opacity, .dark, .red
   ========================================================================== */
/* Four Boxes */

section.four-boxes {
    position: relative;
    padding-top: .6rem;
    padding-bottom: .6rem;
    background-color: #FFFFFF;
}

section.four-boxes:last-of-type {
    padding-bottom: 1.2rem;
}

section.four-boxes .boxes {
    margin: -.1rem;
}

section.four-boxes .box-wrapper {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: calc(25% - .2rem);
    margin: .1rem;
}

section.four-boxes .box {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 100%;
    height: 3.2rem;
    padding-top: calc((25% - .2rem) * .64);
}

section.four-boxes .box .image {
    display: flex;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
}

section.four-boxes .box .image.hover {
    filter: grayscale(100%);
}




section.four-boxes .box .image img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
}

section.four-boxes .box .image-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: #f44336;
    opacity: .8;
}



section.four-boxes.dark .box .image-layer {
    background-color: transparent;
}

section.four-boxes .box .text {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: .32rem;
    font-weight: 500;
    font-size: .36rem;
    line-height: 1em;
    color: #FFFFFF;
}

section.four-boxes .box .title {
    color: #ffffff;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    padding: .32rem;
    padding-right: .92rem;
    font-weight: 500;
    font-size: .32rem;
    line-height: 1em;
    z-index: 2;
}



section.four-boxes .box .icon {
    position: absolute;
    width: .4rem;
    height: .4rem;
    top: .12rem;
    right: .12rem;
    background-color: white;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

section.four-boxes .box .icon:before {
    content: '';
    width: .18rem;
    height: .18rem;
    transform: rotate(-45deg);
    background-image: url(Icons/k-large-arrow-right.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}



/* --- Genel Kutu Wrapper (double/triple/four-boxes ortak .boxes .box-wrapper) --- */
.boxes .box-wrapper {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: calc(50% - .2rem);
    /* height: 3.2rem; */
    margin: .1rem;
}

.boxes .box-wrapper .image.dark {
    /* grayscale efekti intentionally kapalı */
}

.boxes .box.light .image-layer {
    background-color: #000 !important;
    opacity: .6;
}

.boxes .box-wrapper .box.light .image-layer:hover {
    background-color: transparent !important;
    opacity: 1
}


.box-wrapper .title {
    font-weight: 500;
    font-size: .28rem;
    line-height: 1.14em;
    color: #121212;
}

.box-wrapper .title.outside {
    margin-top: .2rem;
}

.box-title-outside.font {
    color: #121212;
    font-size: .24rem;
}

/* ==========================================================================
   CONTENT (İÇERİK SAYFASI)
   Kullanıldığı yer: Views/Content/ContentPage.cshtml
   Elementler: section.content — .left (içerik, faq, dosyalar), .right (sticky resim/form)
   ========================================================================== */
/* Content */

section.content {
    position: relative;
    padding-top: .7rem;
    padding-bottom: 1.4rem;
}

section.content .left {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 5rem);
    padding-right: 1.4rem;
}

section.content .left .content-item *+.faq-item {
    margin-top: .3rem;
}

section.content .left .content-item .faq-item .question {
    font-weight: 500;
    font-size: .2rem;
    line-height: 1.5em;
    color: #121212;
    cursor: pointer;
}

section.content .left .content-item .faq-item .answer {
    font-weight: 400;
    font-size: .16rem;
    line-height: 1.5em;
    color: #121212;
    display: none;
}

section.content .left .content-item .faq-item *+.answer {
    margin-top: .1rem;
}

section.content .left .content-item+.content-item {
    margin-top: .6rem;
}

section.content .left .content-item h1,
section.content .left .content-item h2,
section.content .left .content-item h3,
section.content .left .content-item h4 {
    margin-bottom: .32rem;
    font-weight: 400;
    font-size: .44rem;
    line-height: 1.2em;
    color: #001D85;
}

section.content .left .content-item *+h1,
section.content .left .content-item *+h2,
section.content .left .content-item *+h3,
section.content .left .content-item *+h4 {
    margin-top: .32rem;
}

section.content .left .content-item h3 {
    font-size: .36rem;
    color: #001D85;
    font-weight: 600;
}

section.content .left .content-item h4 {
    font-size: .32rem;
}

section.content .left .content-item {
    font-weight: 400;
    font-size: .2rem;
    line-height: 1.5em;
    color: #121212;
}

section.content .left .content-item ul {
    list-style: none;
}

section.content .left .content-item ul li {
    position: relative;
    padding-left: .32rem;
}

section.content .left .content-item ul li+li {
    margin-top: .16rem;
}

section.content .left .content-item ul li:before {
    content: '';
    position: absolute;
    width: .16rem;
    height: .17rem;
    top: .07rem;
    left: 0;
    background-image: url(Icons/list-arrow.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

section.content .left .content-item p+p,
section.content .left .content-item p+ul,
section.content .left .content-item p+div,
section.content .left .content-item ul+p,
section.content .left .content-item ul+ul,
section.content .left .content-item ul+div,
section.content .left .content-item>div+p,
section.content .left .content-item>div+ul,
section.content .left .content-item>div+div {
    margin-top: 1.5em;
}

section.content .left .content-item a {
    color: inherit;
    font-weight: 500;
}

section.content .left .content-item iframe {
    width: 100%;
    height: 400px;
}

section.content .left .content-item .images {
    display: block;
    margin-left: -.06rem;
    margin-right: -.06rem;
}

section.content .left .content-item .images .image.full {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - .12rem);
    margin: .06rem;
}

section.content .left .content-item .images .image.half {
    width: calc(50% - .12rem);
    display: inline-block;
    vertical-align: top;
    margin-top: 0;
}

section.content .left .content-item .images .image.one-third {
    width: calc(33.333% - .12rem);
    display: inline-block;
    vertical-align: top;
    margin-top: 0;
}


section.content .left .content-item .images .image.one-fourth {
    width: calc(25% - .12rem);
    display: inline-block;
    vertical-align: top;
    margin-top: 0;
}

section.content .left .content-item .images .image img {
    width: 100%;
    border-radius: .24rem;
}

section.content .left .content-item .images .image .title {
    font-weight: 500;
    font-size: .24rem;
    line-height: 1.166em;
    color: #121212;
}

section.content .left .content-item .images .image *+.title {
    margin-top: .12rem;
}

section.content .left .content-item .images .image .text {
    font-weight: 400;
    font-size: .15rem;
    line-height: 1.166em;
    color: #121212;
}

section.content .left .content-item .images .image *+.text {
    margin-top: .08rem;
}

section.content .left .content-item *+.slider {
    margin-top: .4rem;
}

section.content .left .content-item .slider .note {
    font-weight: 400;
    font-size: .14rem;
    line-height: 1.2em;
    color: #121212;
}

section.content .left .content-item .slider *+.note {
    margin-top: .16rem;
}

section.content .left .content-item .slider .owl-nav {
    position: absolute;
    width: 100%;
    height: 0;
    left: 0;
    top: 50%;
}

section.content .left .content-item .slider .owl-nav div {
    position: absolute;
    width: .36rem;
    height: .36rem;
    margin-top: -.18rem;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

section.content .left .content-item .slider .owl-nav .owl-prev {
    left: .32rem;
    background-image: url(Icons/content-nav-prev.svg);
}

section.content .left .content-item .slider .owl-nav .owl-next {
    right: .32rem;
    background-image: url(Icons/content-nav-next.svg);
}

section.content .left .content-item table {
    border-spacing: 0px;
    border-collapse: collapse;
    border: 1px solid #CCCCCC;
}

section.content .left .content-item table tbody tr td,
section.content .left .content-item table thead tr th {
    padding: .15rem .13rem .2rem .13rem;
    text-align: left;
    border-color: #CCCCCC;
    font-size: .15rem;
    line-height: 1.2em;
}

section.content .left .content-item table thead tr th {
    background-color: #F3EDE8;
    font-weight: 700;
}

section.content .left .content-item table tbody tr:nth-child(2n) td {
    background-color: #FCF9FA;
}

section.content .left .content-item .file-container {
    padding: .2rem 0;
    margin: 0;
}

section.content .left .content-item .file-container+.file-container {
    border-top: 1px solid #E5DDD6;
}

section.content .left .content-item .file-container .file {
    display: inline-block;
}

section.content .left .content-item .file-container .file img {
    width: .2rem;
    height: .25rem;
    margin-right: .12rem;
    vertical-align: middle;
}

section.content .left .content-item .file-container .file span {
    font-weight: 500;
    font-size: .18rem;
    color: #121212;
    vertical-align: middle;
}

section.content .right {
    position: sticky;
    display: inline-block;
    vertical-align: top;
    width: 5rem;
    height: 5rem;
    top: 2rem;
    z-index: 1;
}

section+section.content .right:not(.no-margin) {
    margin-top: -3.2rem;
}

section.content .right .image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: .24rem;
}

section.content .right .nav {
    position: relative;
    margin-top: .12rem;
    text-align: center;
}

section.content .right .nav .dots {
    display: inline-block;
    vertical-align: middle;
    max-width: 3.52rem;
    white-space: nowrap;
    overflow: auto;
}

section.content .right .nav .dots::-webkit-scrollbar {
    width: 0;
    height: 0;
}

section.content .right .nav .dots::-webkit-scrollbar-thumb {
    background: transparent;
}

section.content .right .nav .dots::-webkit-scrollbar-thumb:hover {
    background: transparent;
}

section.content .right .nav .item {
    display: inline-block;
    vertical-align: middle;
    width: .8rem;
    height: .8rem;
    margin: .04rem;
    cursor: pointer;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

section.content .right .nav .prev,
section.content .right .nav .next {
    display: inline-block;
    vertical-align: middle;
    padding: .2rem;
}

section.content .right .nav .prev img,
section.content .right .nav .next img {
    width: .12rem;
}

section.content .right .form {
    position: relative;
    padding: .4rem;
    padding-top: .32rem;
    background-color: white;
    border-radius: .08rem;
    box-shadow: 0 .5rem .5rem rgba(0, 0, 0, 0.05);
}

section.content .right .form .text {
    font-weight: 400;
    font-size: .24rem;
    line-height: 1.166em;
    color: #121212;
}

section.content .right .form .text b {
    font-weight: 500;
    color: #F44336;
}

section.content .right .form *+form {
    margin-top: .4rem;
}

section.content .right .form .form-item+.form-item {
    margin-top: .2rem;
}

section.content .right .form .form-item label.small+.radio-item {
    margin-left: -.08rem;
}

section.content .right .form .form-item .radio-item input[type='radio']~label {
    font-size: .2rem;
    min-width: .75rem;
    border: 1px solid #DDDDDD;
}

section.content .right .form .btn-default {
    width: 100%;
}

section.content .right .form *+.btn-default {
    margin-top: .28rem;
}


/* ==========================================================================
   ACCOUNT (KULLANICI HESABI SAYFASI)
   Kullanıldığı yer: Views/Account/Account*.cshtml
   Elementler: section.account — .menu, .account-container, .addresses, .subs, .order
   ========================================================================== */
/* Account */

section.account {
    position: relative;
    padding-top: .6rem;
    padding-bottom: 1rem;
}

section.account .menu {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 3rem;
    padding: .28rem;
    background-color: white;
    border-radius: .08rem;
}

section.account .menu .title {
    font-weight: 600;
    font-size: .32rem;
    line-height: 1.2em;
    color: #121212;
}

section.account .menu .item+.item {
    margin-top: .12rem;
}

section.account .menu .title+.item {
    margin-top: .24rem;
}

section.account .menu .item a {
    font-weight: 400;
    font-size: .2rem;
    line-height: 1.2em;
    color: #121212;
}

section.account .menu .item a.active {
    font-weight: 700;
    color: #001D85;
}

section.account .account-container {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 3.2rem);
    padding: .28rem;
    margin-left: .2rem;
    background-color: white;
    border-radius: .08rem;
}

section.account .account-title {
    margin-bottom: .24rem;
    font-weight: 600;
    font-size: .32rem;
    line-height: 1.2em;
    color: #121212;
}

section.account *+.account-title {
    margin-top: .24rem;
}

section.account .account-title a:not(.btn-add-address) {
    display: inline-block;
    vertical-align: middle;
    padding: .04rem .08rem .06rem .08rem;
    margin-left: .2rem;
    font-weight: 600;
    font-size: .16rem;
    line-height: 1.2em;
    color: #121212;
    border: 1px solid #121212;
    border-radius: 2px;
}

section.account .scheduledorder-request .form-section {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}

section.account .scheduledorder-request .form-section .form-col {
    width: 100%;
}

section.account .scheduledorder-request .form-section .form-col .form-item button {
    width: 100%;
}

/* Account Form */
section.account .form {
    margin: -.1rem;
}

section.account .form .form-item {
    display: inline-block;
    vertical-align: top;
    width: calc(50% - .2rem);
    margin: .1rem;
}

section.account .form .form-item.auth-subscription-parent {
    width: calc(100% - .2rem);
}

section.account .form .auth-subscription-children-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    width: calc(100% - .2rem);
    margin: .1rem;
}

section.account .form .auth-subscription-children-wrapper .form-item.auth-subscription-child {
    width: auto;
    margin: 0;
}

section.account .form .btn-default {
    display: block;
    width: calc(50% - .2rem);
    margin: .1rem;
    margin-top: .32rem;
}


/* Account Addresses */

section.account .addresses .item {
    position: relative;
    display: block;
    padding: .23rem 2rem .26rem .21rem;
    background: #FFFFFF;
    border: 1px solid #EFECED;
    border-radius: .08rem;
}

section.account .addresses .item+.item {
    margin-top: .28rem;
}

section.account .addresses .item .address-content {
    display: inline-block;
    vertical-align: middle;
    max-width: calc(100% - 1.2rem);
    margin-left: .2rem;
}

section.account .addresses .item .address-content .address-title {
    font-weight: 500;
    font-size: .18rem;
    line-height: 1.2em;
    color: #121212;
}

section.account .addresses .item .address-content .address-detail {
    font-weight: 400;
    font-size: .14rem;
    line-height: 1.2em;
    color: #121212;
}

section.account .addresses .item .address-actions {
    position: absolute;
    right: .2rem;
    bottom: .28rem;
}

section.account .addresses .item .address-actions .btn-edit {
    display: inline-block;
    vertical-align: middle;
    font-weight: 400;
    font-size: .14rem;
    line-height: 1.2em;
    color: #121212;
}

section.account .addresses .item .address-actions .btn-remove {
    display: inline-block;
    vertical-align: middle;
    margin-left: .2rem;
}

section.account .addresses .item .address-actions .btn-remove img {
    width: .13rem;
}


/* Account Subs */

section.account .subs table {
    width: 100%;
    border-collapse: collapse;
}

section.account .subs table .collapse-content {
    display: none;
}

section.account .subs table .collapse-content.active {
    display: contents;
}

section.account .subs table .collapse-content th,
section.account .subs table .collapse-content td {
    height: auto;
    padding-top: .3rem;
    padding-bottom: .3rem;
}

section.account .subs table .collapse-content .form-section .custom-payment {
    display: grid;
    justify-content: center;
}

section.account .subs table .collapse-content .form-section .custom-payment+.form-col {
    margin-top: 0.2rem;
}

section.account .subs table .collapse-content .form-section .custom-payment .payment-info .form-item.double input {
    width: 49%;
}

section.account .subs table .collapse-content .form-section .custom-payment .payment-info .form-item.double input+input {
    margin-left: -4px;
}

section.account .subs table .collapse-content .form-section .form-col {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}

section.account .subs table .collapse-content .form-section .form-col+.form-col {
    margin-top: 0.2rem;
}

section.account .subs table .collapse-content .form-section .form-col .form-item {
    flex: 1 1 auto;
}

section.account .subs th,
section.account .subs td {
    height: .7rem;
    padding-left: .2rem;
    padding-right: .2rem;
    font-weight: 600;
    font-size: .18rem;
    line-height: 1.2em;
    color: #121212;
    border: 1px solid #EFECED;
    text-align: left;
}

section.account .subs th.small,
section.account .subs td.small {
    width: 2.4rem;
}

section.account .subs tbody tr:nth-child(odd) th,
section.account .subs tbody tr:nth-child(odd) td {
    background-color: #F4FAF3;
}

section.account .subs td {
    font-weight: 400;
}

section.account .subs td .btn-default {
    width: 100%;
}


/* Account Order Detail */

section.account .order .box {
    padding: .2rem;
    border: 1px solid #EFECED;
    border-radius: .08rem;
}

section.account .order .box+.box {
    margin-top: .32rem;
}

section.account .order .box .col {
    display: inline-block;
    vertical-align: top;
    width: 33.333%;
    padding: .12rem;
}

section.account .order .box .title {
    font-weight: 500;
    font-size: .28rem;
    line-height: 1.2em;
    color: #121212;
}

section.account .order .box .text {
    font-weight: 400;
    font-size: .16rem;
    line-height: 1.2em;
    color: #121212;
}

section.account .order .box *+.text {
    margin-top: .24rem;
}

section.account .order .box *+.title {
    margin-top: .32rem;
}

section.account .order table {
    width: 100%;
    margin-top: .16rem;
    border-collapse: collapse;
}

section.account .order table td {
    padding-top: .2rem;
    padding-bottom: .2rem;
    padding-right: .2rem;
    font-weight: 400;
    font-size: .18rem;
    line-height: 1.2em;
    color: #121212;
    text-align: left;
}

section.account .order table tr+tr td {
    border-top: 1px solid #C7E6C7;
}

section.account .order .summary {
    position: relative;
    width: 5rem;
    margin-left: calc(100% - 5rem);
}

section.account .order *+.summary {
    margin-top: .32rem;
}

section.account .order .summary .summary-title {
    font-weight: 500;
    font-size: .28rem;
    line-height: 1.2em;
    color: #121212;
}

section.account .order .summary .items {
    border: 1px solid #EFECED;
    border-radius: .04rem;
}

section.account .order .summary *+.items {
    margin-top: .32rem;
}

section.account .order .summary .items+.items {
    margin-top: .12rem;
}

section.account .order .summary .item {
    padding: .15rem .2rem .18rem .2rem;
    border-radius: .08rem;
}

section.account .order .summary .item+.item {
    border-top: 1px solid #EFECED;
}

section.account .order .summary .item span {
    display: inline-block;
    vertical-align: middle;
    width: 50%;
    font-weight: 400;
    font-size: .16rem;
    line-height: 1.2em;
    color: #121212;
}

section.account .order .summary .item span:last-child {
    text-align: right;
}

section.account .order .summary .items.green {
    border-color: #F44336;
}

section.account .order .summary .items.green .item span {
    font-weight: 500;
    color: #0A380E;
}

section.account .order .summary .items.green .item span b,
section.account .order .summary .items.green .item span strong {
    color: #F44336;
}


/* ==========================================================================
   CONTENT WITH MENU (MENÜLÜ İÇERİK SAYFASI — HABERLER, KİŞİ KUTULARI)
   Kullanıldığı yer: Views/Content/ContentPageWithMenu.cshtml
   Elementler: section.content-with-menu — .menu-wrapper, .content-wrapper, .news, .person-boxes, .teams
   ========================================================================== */
/* Content With Menu */

section.content-with-menu {
    position: relative;
    padding-top: .6rem;
    padding-bottom: 2rem;
    background-color: #F5F8FF;
}

section.content-with-menu .menu-wrapper {
    position: sticky;
    top: 2rem;
    display: inline-block;
    vertical-align: top;
    width: 25%;
    padding-right: .4rem;
}

section.content-with-menu .menu-wrapper .menu {
    position: relative;
    padding: .16rem .32rem;
    background-color: white;
    border-radius: .04rem;
    box-shadow: 0 .5rem .5rem rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

section.content-with-menu .menu-wrapper .menu a {
    display: block;
    padding-top: .24rem;
    padding-bottom: .24rem;
    font-weight: 500;
    font-size: .21rem;
    line-height: 1em;
    color: #121212;
}

section.content-with-menu .menu-wrapper .menu a+a {
    border-top: 1px solid #EFECED;
}

section.content-with-menu .menu-wrapper .menu a.active {
    color: #529754;
}

section.content-with-menu .menu-wrapper .menu .title {
    padding: .32rem;
    margin: -.16rem -.32rem 0 -.32rem;
    font-weight: 600;
    font-size: .2rem;
    line-height: 1em;
    color: #0A380E;
    background-color: #E8F5E8;
}

section.content-with-menu .content-wrapper {
    display: inline-block;
    vertical-align: top;
    width: 75%;
}


/* News */

section.content-with-menu .news {
    position: relative;
    display: inline-block;
    width: 100%;
    margin: -.3rem -.1rem;
}

section.content-with-menu .news .loading {
    width: 100%;
    height: auto;
    padding: .3rem;
    position: relative;
    background: white;
    text-align: center;
}

section.content-with-menu .news .loading img {
    width: .3rem;
}

section.content-with-menu .news .box {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 33.333%;
    padding: .3rem .1rem;
}

section.content-with-menu .news .box .image {
    position: relative;
    width: 100%;
    padding-top: 74%;
    overflow: hidden;
}

section.content-with-menu .news .box .image img {
    position: absolute;
}

section.content-with-menu .news .box *+.content {
    margin-top: .2rem;
}

section.content-with-menu .news .box .content .text {
    font-weight: 500;
    font-size: .28rem;
    line-height: 1.14em;
    color: #121212;
}

section.content-with-menu .news .box .content .date {
    font-weight: 400;
    font-size: .16rem;
    line-height: 1.19em;
    color: #757374;
}

section.content-with-menu .news .box .content *+.date {
    margin-top: .2rem;
}

section.content-with-menu .news .box .content .date .day:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 4px;
    height: 4px;
    margin-left: .06rem;
    margin-right: .08rem;
    background-color: #757374;
    border-radius: 2px;
}


/* Person Boxes */

section.content-with-menu .person-boxes {
    position: relative;
    display: inline-block;
    width: 100%;
    margin: -.4rem -.2rem;
}

section.content-with-menu .person-boxes .box {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 33.333%;
    padding: .4rem .2rem;
    text-align: center;
}

section.content-with-menu .person-boxes .box .image {
    display: block;
    width: calc(100% - .2rem);
    height: 0;
    padding-top: calc(100% - .2rem);
    margin-left: auto;
    margin-right: auto;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

section.content-with-menu .person-boxes .box .content {
    padding-left: .1rem;
    padding-right: .1rem;
}

section.content-with-menu .person-boxes .box *+.content {
    margin-top: .4rem;
}

section.content-with-menu .person-boxes .box .content .name {
    font-weight: 600;
    font-size: .28rem;
    line-height: 1.2em;
    color: #121212;
}

section.content-with-menu .person-boxes .box .content .title {
    font-weight: 500;
    font-size: .2rem;
    line-height: 1.2em;
    color: #757374;
}

section.content-with-menu .person-boxes .box .content *+.title {
    margin-top: .08rem;
}

section.content-with-menu .person-boxes .box .mail {
    padding-top: .16rem;
    font-weight: 400;
    font-size: .16rem;
    line-height: 1.2em;
    color: #757374;
    border-top: 1px solid #C4C4C4;
}

section.content-with-menu .person-boxes .box *+.mail {
    margin-top: .2rem;
}


/* Teams */

section.content-with-menu .teams {
    position: relative;
    display: inline-block;
    width: 100%;
}

section.content-with-menu .teams .item {
    position: relative;
    padding: .32rem;
    background-color: white;
    border-radius: .04rem;
    border: 1px solid #EFECED;
    box-shadow: 0 .5rem .5rem rgba(0, 0, 0, 0.05);
    cursor: pointer;
}

section.content-with-menu .teams .item+.item {
    margin-top: .12rem;
}

section.content-with-menu .teams .item .item-title {
    position: relative;
    padding-right: .32rem;
    font-weight: 400;
    font-size: .24rem;
    line-height: 1.2em;
    color: #121212;
}

section.content-with-menu .teams .item .item-title:after {
    content: '';
    position: absolute;
    width: .12rem;
    height: .12rem;
    right: 0;
    top: 50%;
    margin-top: -.06rem;
    background-image: url(Icons/menu-arrow.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: .3s all ease;
    -webkit-transition: .3s all ease;
    -ms-transition: .3s all ease;
    -moz-transition: .3s all ease;
    -o-transition: .3s all ease;
}

section.content-with-menu .teams .item.active .item-title:after {
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
}

section.content-with-menu .teams .item.active .item-title {
    font-weight: 600;
    color: #F44336;
    border-color: #C7E6C7;
}

section.content-with-menu .teams .item .content {
    display: none;
    padding-top: .6rem;
    padding-bottom: .6rem;
    cursor: default;
}

section.content-with-menu .teams .item .left {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 41.4%;
    padding-right: .9rem;
}

section.content-with-menu .teams .item .left .box {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 100%;
    padding-left: .1rem;
    padding-right: .1rem;
    text-align: center;
}

section.content-with-menu .teams .item .left .box .image {
    display: block;
    width: calc(100% - .2rem);
    height: 0;
    padding-top: calc(100% - .2rem);
    margin-left: auto;
    margin-right: auto;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

section.content-with-menu .teams .item .left .box .box-content {
    position: relative;
    padding-left: .1rem;
    padding-right: .1rem;
}

section.content-with-menu .teams .item .left .box *+.box-content {
    margin-top: .4rem;
}

section.content-with-menu .teams .item .left .box .box-content .name {
    font-weight: 600;
    font-size: .28rem;
    line-height: 1.2em;
    color: #121212;
}

section.content-with-menu .teams .item .left .box .box-content .title {
    font-weight: 500;
    font-size: .2rem;
    line-height: 1.2em;
    color: #757374;
}

section.content-with-menu .teams .item .left .box .box-content *+.title {
    margin-top: .08rem;
}

section.content-with-menu .teams .item .left .box .mail {
    padding-top: .16rem;
    font-weight: 400;
    font-size: .16rem;
    line-height: 1.2em;
    color: #757374;
    border-top: 1px solid #C4C4C4;
}

section.content-with-menu .teams .item .left .box *+.mail {
    margin-top: .2rem;
}

section.content-with-menu .teams .item .right {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 58.6%;
}

section.content-with-menu .teams .item .right .person {
    padding-top: .2rem;
    padding-bottom: .12rem;
}

section.content-with-menu .teams .item .right .person+.person {
    border-top: 1px solid #EFECED;
}

section.content-with-menu .teams .item .right .person .name {
    font-weight: 500;
    font-size: .2rem;
    line-height: 1.2em;
    color: #121212;
}

section.content-with-menu .teams .item .right .person .title {
    display: inline-block;
    vertical-align: middle;
    width: 60%;
    margin-top: .04rem;
    font-weight: 500;
    font-size: .16rem;
    line-height: 1.2em;
    color: #757374;
}

section.content-with-menu .teams .item .right .person .mail {
    display: inline-block;
    vertical-align: middle;
    width: 40%;
    margin-top: .04rem;
    font-weight: 400;
    font-size: .16rem;
    line-height: 1.2em;
    color: #757374;
}



/* ==========================================================================
   POPUP (MODAL PENCERELER)
   Kullanıldığı yer: Tüm sayfalar — alca.js ile gösterilir/gizlenir
   Elementler: .popup-wrapper — .popup-container, .btn-close, .popup-title, .popup-text
   Varyantlar: .custom-alert, .custom-image, .volunteer-confirm, .masterpass-popup
   ========================================================================== */
/* Popup */

.popup-wrapper {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    padding-top: .5rem;
    padding-bottom: .5rem;
    text-align: center;
    background-color: rgba(0, 0, 0, .5);
    z-index: 20;
    overflow: auto;
}

.popup-wrapper.custom-alert {
    z-index: 21;
}

.popup-wrapper:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: 100%;
}

.popup-wrapper .popup-container {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 8.24rem;
    max-width: 100%;
    padding: .28rem .32rem .4rem .32rem;
    text-align: left;
    background-color: white;
    border-radius: .08rem;
    transform: scale(0);
    border-radius: .24rem;
}

.popup-wrapper.custom-alert .popup-container {
    width: 5.24rem;
}

.popup-wrapper.custom-image .popup-container {
    padding: 0;
}

.popup-wrapper.custom-image .popup-container img {
    width: 100%;
}

.popup-wrapper .btn-close {
    position: absolute;
    width: .43rem;
    height: .46rem;
    top: .28rem;
    right: .32rem;
    background-color: #F0F0F0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-wrapper .btn-close img {
    width: .14rem;
}

.popup-wrapper .popup-title {
    padding-right: .2rem;
    font-weight: 600;
    font-size: .28rem;
    line-height: 1.2em;
    color: #121212;
}

.popup-wrapper .popup-text {
    font-weight: 400;
    font-size: .16rem;
    line-height: 1.2em;
    color: #121212;
}

.popup-wrapper *+.popup-text {
    margin-top: .32rem;
}

.popup-wrapper .form {
    margin-left: -.1rem;
    margin-right: -.1rem;
}

.popup-wrapper *+.form {
    margin-top: .3rem;
}

.popup-wrapper .form .form-item {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - .2rem);
    margin: .12rem .1rem;
}

.popup-wrapper .form .form-item.half {
    width: calc(50% - .2rem);
    position: relative;
}

.popup-wrapper .form .form-item.onethird {
    width: calc(33.333% - .2rem);
}

.popup-wrapper .btn-default {
    min-width: 2.1rem;
    margin: .12rem .1rem;
}

/* Volunteer Confirm Popup */

.popup-wrapper.volunteer-confirm .popup-container {
    width: 4.9rem;
}

.popup-wrapper.volunteer-confirm .btn-default {
    width: 100%;
    margin: 0 auto;
    margin-top: .24rem !important;
}

.popup-wrapper.volunteer-confirm .btn-default+* {
    margin-top: .24rem !important;
}

.popup-wrapper.volunteer-confirm .btn-close {
    top: .1rem;
}

/* Masterpass Popups */
.popup-wrapper.masterpass-popup .popup-container {
    width: 4.9rem;
}

.popup-wrapper.masterpass-popup .masterpass-icon {
    display: block;
    width: .96rem;
    margin: 0 auto;
}

.popup-wrapper.masterpass-popup .masterpass-icon+* {
    margin-top: .24rem;
}

.popup-wrapper.masterpass-popup .masterpass-title {
    font-weight: 500;
    font-size: 0.2rem;
    line-height: 1.2em;
    color: #121212;
    text-align: center;
}

.popup-wrapper.masterpass-popup .masterpass-title+* {
    margin-top: .24rem !important;
}

.popup-wrapper.masterpass-popup .form-item input {
    font-size: .14rem !important;
    text-align: center;
}

.popup-wrapper.masterpass-popup .form-item+* {
    margin-top: .16rem !important;
}

.popup-wrapper.masterpass-popup .btn-default {
    width: 100%;
    margin: 0;
}

.popup-wrapper.masterpass-popup .btn-default+* {
    margin-top: .24rem !important;
}

.popup-wrapper.masterpass-popup .masterpass-logo {
    display: block;
    width: 1.22rem;
    margin: 0 auto;
}


/* ==========================================================================
   NO ITEMS (SONUÇ BULUNAMADI MESAJI)
   Kullanıldığı yer: Views/Product/ProductList.cshtml
   Elementler: .no-items
   ========================================================================== */
/* No Items */

.no-items {
    padding-top: .5rem;
    padding-bottom: .5rem;
    font-size: .18rem;
    text-align: center;
}

.no-items * {
    color: inherit;
}

.no-items a {
    text-decoration: underline;
}

.no-shipping-warning {
    margin-top: .2rem;
    padding: .2rem .24rem;
    background-color: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: .06rem;
    font-size: .16rem;
    color: #5d4037;
    text-align: center;
}

.no-shipping-warning p {
    margin: 0 0 .16rem;
}

.no-shipping-warning .btn-change-address {
    display: inline-block;
    margin-top: .08rem;
}


/* ==========================================================================
   MAPS (HARİTA BÖLÜMLERİ — Google Maps InfoBox)
   Kullanıldığı yer: Views/Map/MapPage.cshtml
   NOT: Bu bölüm px kullanır — Google Maps InfoBox dışarıdan kontrol edildiği için rem dönüşümü yapılmamıştır
   Elementler: section.maps — .map-filter, .map-container, .info-box
   ========================================================================== */
/* Maps */

section.maps .hidden-item {
    display: none;
}

section.maps .map-filter {
    padding-top: .3rem;
    padding-bottom: .3rem;
}

section.maps .map-filter .form .form-item {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - .48rem);
    margin: .12rem .24rem;
}

section.maps .map-filter .form .form-item.half {
    max-width: 3rem;
    width: calc(50% - .2rem);
}

section.maps .map-filter .form button {
    margin: .12rem .24rem;
    display: inline-block;
    vertical-align: bottom;
}

section.maps .map-container {
    height: 5rem;
}

section.maps .map-container .info-box {
    width: 618px;
    max-width: 100%;
    border-radius: 5px;
    background-color: #FFFFFF;
}

section.maps .map-container .info-box .title {
    font-size: 18px;
    font-weight: 700;
    color: #F44336;
    padding: 10px;
    border-bottom: 1px solid #DDDDDD;
}

section.maps .map-container .info-box .description {
    padding: 10px;
    font-size: 14px;
    line-height: 28px;
}

section.maps .map-container .info-box *+.description {
    margin-top: 10px;
}

section.maps .map-container .info-box .images {
    margin-top: 10px;
}

section.maps .map-container .info-box .images .image+.image {
    margin-top: 10px;
}

section.maps .map-container .info-box .images .image img {
    width: 100%;
}

/* The End */

/* ==========================================================================
   CUSTOM PAYMENT (ÖZEL ÖDEME PANELİ)
   Kullanıldığı yer: Views/Account/AccountSubs.cshtml — abonelik ödemesi
   Elementler: .custom-payment — .payment-info, .tab-menu, .moneytransfer
   ========================================================================== */
/* Custom Detail Pages */
.custom-payment .payment-info {
    position: relative;
    width: 4.88rem;
}

.custom-payment .payment-info .form-item {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - .48rem) !important;
    margin: .12rem .1rem !important;
}

.custom-payment .payment-info .form-item.half {
    width: calc(50% - .48rem) !important;
}

.custom-payment .payment-info .form-item.double input {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 50%;
    border-radius: .04rem 0 0 .04rem;
}

.custom-payment .payment-info .form-item.double input+input {
    border-radius: 0 .04rem .04rem 0;
    margin-left: -1px;
}

.custom-payment .payment-info .form-item.double input:focus {
    z-index: 2;
}

.custom-payment .payment-info .form-item .card-icon {
    position: absolute;
    top: .4rem;
    left: 100%;
    margin-left: .2rem;
}

.custom-payment .moneytransfer+.moneytransfer {
    margin-top: .2rem;
}

.custom-payment .moneytransfer .moneytransfer-title {
    margin: 0 .1rem;
    display: block;
    width: 50%;
    font-weight: 600;
    font-size: .16rem;
    line-height: 1.19em;
    color: #D15500;
}

.custom-payment .moneytransfer-add {
    text-align: center;
}

.custom-payment *+.moneytransfer-add {
    margin-top: .2rem;
}

.custom-payment .tab-menu {
    position: relative;
    margin: .12rem .06rem;
}

.custom-payment .tab-menu a {
    display: inline-block;
    vertical-align: middle;
    margin: .04rem;
    padding: .2rem;
    padding-bottom: .22rem;
    font-weight: 500;
    font-size: .18rem;
    line-height: 1.2em;
    color: #121212;
    background: #FFFFFF;
    border-radius: .04rem;
    border: 1px solid #EFECED;
}

.custom-payment .tab-menu a.active {
    color: #0A380E;
    background: #F4FAF3;
    border-color: #A3D6A3;
}

.custom-payment .tab-container {
    padding-top: .32rem;
}

.custom-payment .tab-item {
    display: none;
}

.custom-payment .tab-item.active {
    display: block;
}

/* ==========================================================================
   PAGE RESULTS (SITE ARAMA SONUÇLARI)
   Kullanıldığı yer: Views/Search/SearchResults.cshtml
   Elementler: section.page-results — .item, .title, .text
   ========================================================================== */
/* Page Results */
section.page-results {
    padding-top: .6rem;
    padding-bottom: 1.6rem;
    background-color: #F5F8FF;
}

section.page-results .container {
    max-width: 11rem;
}

section.page-results .item {
    position: relative;
    padding-top: .2rem;
    padding-bottom: .2rem;
}

section.page-results .item:after {
    content: '';
    position: absolute;
    width: calc(100% - .08rem);
    height: 1px;
    top: 100%;
    left: .04rem;
    background-color: #EFECED;
}


section.page-results .item .title {
    font-weight: 500;
    font-size: .24rem;
    line-height: 1em;
    color: #121212;
}

section.page-results .item .text {
    font-size: .16rem;
    color: #F44336;
}

section.page-results .item *+.text {
    margin-top: .1rem;
}

/* ==========================================================================
   GENERIC TITLE (GENEL BAŞLIK BÖLÜMÜ)
   Kullanıldığı yer: Views/Widget/GenericTitle.cshtml
   Elementler: section.generic-title — h2
   ========================================================================== */
/* Generic Title */
section.generic-title {
    padding-top: .6rem;
    padding-bottom: .25rem;
    background-color: #F5F8FF;
    text-align: center;
}

section.generic-title h2 {
    font-weight: 600;
    font-size: .42rem;
    line-height: 1.2em;
    color: #001D85;
}

/* ==========================================================================
   SCROLL TO TOP BUTONU
   Kullanıldığı yer: Views/Product/ProductList.cshtml — 1000px+ scroll'da görünür
   Elementler: .scroll-top
   ========================================================================== */
.scroll-top {
    position: fixed;
    width: .7rem;
    height: .7rem;
    background-color: rgba(248, 223, 178, 1);
    bottom: .1rem;
    right: .1rem;
    border-radius: 50%;
    cursor: pointer;
    display: none;
}

.scroll-top img {
    position: absolute;
    width: .25rem;
    top: 50%;
    left: 50%;
    transform-origin: top left;
    -webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    -ms-transform-origin: top left;
    -o-transform-origin: top left;
    transform: rotate(-90deg) translate(-50%, -50%);
    -webkit-transform: rotate(-90deg) translate(-50%, -50%);
    -moz-transform: rotate(-90deg) translate(-50%, -50%);
    -ms-transform: rotate(-90deg) translate(-50%, -50%);
    -o-transform: rotate(-90deg) translate(-50%, -50%);
}

.cursor-pointer {
    cursor: pointer;
}



#city-wrapper .city-item {
    display: none;
}

#city-wrapper .city-item:first-child {
    display: block;
}

input:read-only {
    cursor: no-drop;
    background-color: #dddddd !important;
}

.birthdate-representative input:read-only {
    cursor: pointer;
    background-color: transparent !important;
}

/* ==========================================================================
   EPAF (ELEKTRONIK PARA AKTARMA FORMU SAYFASI)
   Kullanıldığı yer: Views/Epaf/EpafPage.cshtml
   Elementler: section.epaf, .epaf-content
   ========================================================================== */

section.epaf {
    position: relative;
    padding-top: .24rem;
    padding-bottom: 1.2rem;
}

.epaf-content {
    width: 100%;
    position: relative;
    display: inline-block;
    vertical-align: top;
    padding: 0.28rem;
    background-color: white;
    border-radius: 0.04rem;
    box-shadow: 0 0.5rem 0.5rem rgb(0 0 0 / 5%);
    margin-top: 0.96rem;
}

section.epaf .title {
    font-weight: 600;
    font-size: .4rem;
    line-height: 1.36em;
    color: #121212;
    text-align: center;
}

section.detail.epaf .form {
    width: 100%;
    padding: 0;
}


.certificate .popup-container {
    padding: .7rem;
    text-align: center;
}

section.detail .form input:read-only {
    background-color: white !important;
}

/* ==========================================================================
   FLATPICKR TARİH SEÇİCİ OVERRIDE
   Kullanıldığı yer: Views/Product/ProductDonation.cshtml — sertifika tarih seçimi
   ========================================================================== */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
    background: #F44336 !important;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #fff;
    border-color: #338c26 !important;
}

.flatpickr-confirm {
    background: #F44336;
    padding: 10px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.flatpickr-confirm svg {
    display: none;
}

/* ==========================================================================
   TEXT WITH IMAGE (FOOTER ÜSTÜ)
   ========================================================================== */
section.text-with-image {
    position: relative;
    padding-top: .4rem;
    padding-bottom: .1rem;
}

section.text-with-image .content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .24rem;
}

section.text-with-image .left {
    display: flex;
    flex-direction: column;
    gap: .32rem;
    max-width: 7.6rem;
    width: 100%;
}

section.text-with-image .left .title {
    font-size: .32rem;
    font-weight: 600;
    color: #001D85;
    line-height: 1.2em;
}

section.text-with-image .left .text {
    font-size: .20rem;
    font-weight: 400;
    color: #121212;
    line-height: 1.5em;
}

section.text-with-image .left .btn-wrapper {
    margin-top: .16rem;
}

section.text-with-image .right {
    flex-shrink: 0;
}

section.text-with-image .right .image-area {
    width: 5rem;
    height: 5rem;
    border-radius: .6rem;
    overflow: hidden;
}

section.text-with-image .right .image-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   ANIMATE LINE TEXT (FOOTER ÜSTÜ KAYAN YAZI)
   ========================================================================== */
section.animate-line-text {
    position: relative;
    background-color: #fff;
    padding: .64rem 0;
    overflow: hidden;
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
}

section.animate-line-text .ticker-wrapper {
    display: flex;
    white-space: nowrap;
    overflow: hidden;
}

section.animate-line-text .ticker-content {
    display: flex;
    flex-shrink: 0;
    animation: ticker-scroll2 20s linear infinite;
    align-items: center;
}

section.animate-line-text .ticker-item {
    display: flex;
    align-items: center;
    gap: .24rem;
    padding-right: .24rem;
}

section.animate-line-text .ticker-item .text {
    font-size: .54rem;
    font-weight: 800;
    color: #001D85;
    line-height: 1em;
}

section.animate-line-text .ticker-item .icon {
    height: .6rem;
    width: .6rem;
    object-fit: cover;
}

@keyframes ticker-scroll2 {
    0% {
        transform: translateX(0);
    }

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

section.animate-line-text .ticker-wrapper:hover .ticker-content {
    animation-play-state: paused;
}

/* ==========================================================================
   PRODUCT GENERIC LAYOUT REDESIGN CHANGES
   ========================================================================== */



/* Quantity Section */
section.detail .form .quantity-section {
    margin-top: .2rem;
}

section.detail .form .quantity-section label.small {
    display: block;
    margin-bottom: .1rem;
    font-weight: 500;
    font-size: .16rem;
    line-height: 1.2em;
    color: #121212;
}

section.detail .form .quantity-actions-row {
    display: flex;
    align-items: center;
    gap: .16rem;
}

section.detail .form .qty-picker {
    display: flex;
    align-items: center;
    border: 1px solid #D5D5D5;
    border-radius: 2rem;
    overflow: hidden;
    background-color: #FFFFFF;
    height: .58rem;
    box-sizing: border-box;
}

section.detail .form .qty-btn {
    width: .48rem;
    height: 100%;
    border: none;
    background: transparent;
    font-size: .2rem;
    font-weight: 500;
    color: #121212;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    transition: background-color .15s ease;
}

section.detail .form .qty-btn:hover {
    background-color: #FAFAFA;
}

section.detail .form .qty-input {
    width: .6rem;
    height: 100%;
    border: none;
    border-left: 1px solid #D5D5D5;
    border-right: 1px solid #D5D5D5;
    text-align: center;
    font-size: .18rem;
    font-weight: 600;
    color: #121212;
    outline: none;
    padding: 0;
    background: transparent;
    box-sizing: border-box;
}

/* Step 1 Add to Cart Button */
section.detail .form .btn-add-cart-step1 {
    min-width: 2.4rem;
    height: .58rem;
    border-radius: 2rem;
}


section.detail .form .product-features .features-title {
    font-weight: 600;
    font-size: .18rem;
    line-height: 1.2em;
    color: #121212;
    margin-bottom: .12rem;
}

section.detail .form .product-features .text.font ul {
    margin: 0;
    padding-left: .2rem;
    list-style-type: disc;
}

section.detail .form .product-features .text.font ul li {
    font-size: .16rem;
    line-height: 1.5em;
    color: #121212;
}

/* --- Redesigned Certificate Donation Forms --- */
section.detail .form .certificate {
    border-radius: .08rem !important;
    border: 1px solid #E3E8F4 !important;
    padding: .2rem !important;
}

section.detail .form .certificate .certificate-title {
    color: #001D85 !important;
    font-weight: 700 !important;
    font-size: .15rem !important;
    margin-bottom: .12rem;
}

section.detail .form .certificate .certificate-header .form-item-main {
    display: flex;
    flex-wrap: wrap;
    gap: .24rem;
    margin-bottom: .16rem;
    padding-left: .1rem;
}

section.detail .form .certificate .certificate-header .form-item-main .form-item {
    margin: 0 !important;
}

section.detail .form .certificate .certificate-header .form-item input[type='checkbox']~label {
    font-size: .14rem !important;
    color: #121212 !important;
    font-weight: 500 !important;
    padding-top: 0.03rem;
    padding-left: .28rem;
}

section.detail .form .certificate .certificate-header .form-item input[type='checkbox']~label:before {
    border-color: #F44336 !important;
}

section.detail .form .certificate .certificate-header .form-item input[type='checkbox']:checked~label:before {
    background-color: #F44336 !important;
}

section.detail .form .certificate-box .box-header {
    background-color: #E2E8F9;
    color: #121212;
    font-weight: 500;
    font-size: .13rem;
    padding: .1rem .16rem;
    border-radius: .02rem;
}

/* Static Payment Section Styling */
.static-payment-section .static-payment-body {
    padding-top: .08rem;
}

.static-payment-section .static-payment-body .quantity {
    min-width: 3rem;
    margin: 0 !important;
}

.static-amount-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .12rem;
    margin-bottom: .2rem;
}

.static-amount-pills .btn-amount-pill {
    flex: 0 0 auto;
    padding: .24rem;
    height: .52rem;
    border: 1.5px solid #F44336;
    background-color: #fff;
    color: #121212;
    font-size: .15rem;
    font-weight: 700;
    border-radius: 2rem;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.static-amount-pills .btn-amount-pill:hover {
    background-color: #FFF6F2;
}

/* Seçili tutar pill'i (JS .active) — kırmızı dolu; seçili değilken normal kalır. */
.static-amount-pills .btn-amount-pill.active {
    background-color: #F44336;
    color: #fff;
}

/* Tutar pill açıklaması — seçilen tutara göre panelden (dile göre) gelen metin. */
.static-payment-section .static-payment-body .pill-description {
    width: 100%;
    margin-top: .12rem;
    font-size: .14rem;
    font-weight: 500;
    line-height: 1.5;
    color: #757374;
    padding-bottom: .08rem;
}

/* Pill'ler ve "Bağış miktarını seçin" alt alta gelsin (parent .static-payment-body flex olduğu için) */
.static-payment-section .static-payment-body .static-amount-pills,
.static-payment-section .static-payment-body .static-other-amount {
    width: 100%;
}

.static-other-amount .other-amount-label {
    font-size: .14rem;
    font-weight: 600;
    color: #121212;
    margin-bottom: .08rem;
}

/* Radio düzenli bağış şablonlarında (Donation / Düzenli Bağış) seçilen tutar seçeneğinin dile göre açıklaması */
.donate-options .pill-description {
    width: 100%;
    margin-top: .12rem;
    font-size: .14rem;
    font-weight: 500;
    line-height: 1.5;
    color: #757374;
}

.static-other-amount .other-amount-input-wrapper {
    position: relative;
    width: 100%;
    max-width: 3rem;
    height: .54rem;
    border: 1px solid #D5D5D5;
    border-radius: 2rem;
    background: #fff;
    display: flex;
    align-items: center;
    padding: 0 .2rem;
    box-sizing: border-box;
}

.static-other-amount .other-amount-input-wrapper input {
    width: 100%;
    border: none;
    background: transparent;
    font-size: .16rem;
    font-weight: 500;
    color: #121212;
    outline: none;
    height: 100%;
    padding: 0;
}

.static-other-amount .other-amount-input-wrapper input::placeholder {
    color: #121212;
    opacity: 1;
}

.static-other-amount .other-amount-input-wrapper .currency-suffix {
    font-size: .15rem;
    font-weight: 600;
    color: #757374;
    margin-left: .08rem;
}

.static-other-amount .other-amount-input-wrapper:focus-within {
    border-color: #F44336;
}

/* Excel Import styling */
section.detail .form .btn-certificate-excel {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: .16rem .24rem;
    border: 1px solid #F44336 !important;
    border-radius: .08rem;
    background-color: #F3F6FC !important;
    color: #121212 !important;
    font-weight: 600 !important;
    font-size: .15rem !important;
    text-decoration: none;
    transition: all 0.2s ease;
    margin: .12rem .1rem !important;
    width: calc(100% - .2rem) !important;
    box-sizing: border-box;
}

section.detail .form .btn-certificate-excel img {
    width: .24rem;
    height: .24rem;
    margin-right: .12rem;
}

section.detail .form .certificate-excel {
    padding: .12rem .1rem;
}

section.detail .form .btn-certificate-form {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .08rem .16rem;
    border: 1.5px solid #F44336 !important;
    border-radius: 2rem;
    background: transparent;
    color: #001D85 !important;
    font-weight: 600;
    font-size: .14rem;
    text-decoration: none;
    cursor: pointer;
    margin-bottom: .16rem;
    transition: all 0.2s ease;
}

section.detail .form .file-upload {
    background-color: #F0F5FF !important;
    border: 1px solid #C3C3C3 !important;
    border-radius: .12rem !important;
    padding: .36rem .24rem !important;
}

section.detail .form .file-upload .file-upload-title {
    color: #001D85 !important;
    font-size: .16rem !important;
    font-weight: 600 !important;
    margin-top: .12rem;
}

section.detail .form .file-upload .file-upload-text {
    font-size: .14rem !important;
    color: #4E4E4E !important;
    line-height: 1.4em !important;
}

section.detail .form .file-upload .file-upload-text a {
    color: #F44336 !important;
    text-decoration: underline;
    font-weight: 600;
}

section.detail .form .file-upload .file-upload-actions {
    margin-top: .24rem !important;
}

section.detail .form .file-upload .file-upload-actions .form-item {
    background-color: #F44336 !important;
    border-radius: 2rem !important;
    padding: .12rem .32rem !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none !important;
    transition: all 0.2s ease;
}

section.detail .form .file-upload .file-upload-actions .form-item:hover {
    background-color: #d32f2f !important;
}

section.detail .form .file-upload .file-upload-actions .form-item label {
    color: #fff !important;
    font-weight: 600 !important;
    font-size: .14rem !important;
    padding: 0 !important;
}

section.detail .form .certificate-add .btn-add {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: auto !important;
    padding: .11rem .26rem !important;
    padding-left: .36rem !important;
    font-weight: 600 !important;
    font-size: .14rem !important;
    line-height: 1.2em !important;
    color: #F44336 !important;
    border: 1px solid #F44336 !important;
    border-radius: 2rem !important;
    background-color: transparent !important;
    background-image: url(/Content/Icons/k-plus-orange.svg) !important;
    background-repeat: no-repeat !important;
    background-size: .18rem .18rem !important;
    background-position: left .12rem center !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    min-width: unset !important;
}

section.detail .form .certificate-add .btn-add:hover {
    background-color: #FFF6F2 !important;
}

section.detail .form .certificate-add .btn-add::before {
    display: none !important;
}

section.detail .form .certificate-add .btn-add img {
    display: none !important;
}

section.detail .form .certificate-add .btn-add span {
    color: #F44336 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
}

.static-amount-pills .btn-amount-pill.active {
    background-color: #F44336;
    border-color: #F44336;
    color: #ffffff;
}

/* Credit Card Date Input Corner Radius Alignment */
.form-item.double.half.credit-card-date input:first-of-type,
form.general .form-item.double.half.credit-card-date input:first-of-type {
    border-top-left-radius: .32rem !important;
    border-bottom-left-radius: .32rem !important;
}

.form-item.double.half.credit-card-date input:last-of-type,
form.general .form-item.double.half.credit-card-date input:last-of-type {
    border-top-right-radius: .32rem !important;
    border-bottom-right-radius: .32rem !important;
}

/* Colors Cards Section */
section.colors-cards {
    position: relative;
    padding-top: .6rem;
    padding-bottom: .6rem;
}

section.colors-cards .section-title {
    font-size: .36rem;
    color: #001D85;
    font-weight: 700;
    margin-bottom: .4rem;
    line-height: 1.3em;
    max-width: 9rem;
}

section.colors-cards .cards-list {
    display: flex;
    flex-direction: column;
    gap: .08rem;
}

section.colors-cards .cards-list.wrap {
    flex-direction: row;
    flex-wrap: wrap;
}

section.colors-cards .color-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 6.68rem;
    height: 2.04rem;
    padding: .32rem .4rem;
    border-radius: .24rem;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

section.colors-cards .color-card .card-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

section.colors-cards .color-card .card-number {
    font-size: .64rem;
    font-weight: 700;
    line-height: 1em;
}

section.colors-cards .color-card .card-label {
    font-size: .2rem;
    font-weight: 700;
    line-height: 1.2em;
}

section.colors-cards .color-card .card-icon {
    width: .8rem;
    height: .8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

section.colors-cards .color-card .card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Content Table Section */
section.content-table {
    position: relative;
    padding-top: .4rem;
    padding-bottom: .6rem;
}

section.content-table .table-card {
    background-color: #ffffff;
    border: 1px solid #E2E6EA;
    border-radius: .24rem;
    overflow: hidden;
    width: 100%;
}

section.content-table .card-header {
    padding: .32rem .4rem;
}

section.content-table .table-title {
    font-size: .28rem;
    color: #001D85;
    font-weight: 700;
    line-height: 1.3em;
}

section.content-table .table-responsive {
    width: 100%;
    overflow-x: auto;
    border-top: 1px solid #E2E6EA;
}

section.content-table .styled-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}

section.content-table .styled-table th {
    background-color: #F5F6FA;
    padding: .24rem;
    font-size: .18rem;
    font-weight: 500;
    color: #121212;
    border-right: 1px solid #E2E6EA;
    border-bottom: 1px solid #E2E6EA;
}

section.content-table .styled-table th:last-child {
    border-right: none;
}

section.content-table .styled-table td {
    padding: .32rem .24rem;
    font-size: .2rem;
    font-weight: 700;
    color: #121212;
    border-right: 1px solid #E2E6EA;
}

section.content-table .styled-table td:last-child {
    border-right: none;
}


section.application-form-check {
    padding-top: .6rem;
    padding-bottom: .6rem;
    text-align: center;
}

section.application-form-check .application-form-check-wrapper {
    max-width: 9rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

section.application-form-check .icon {
    width: 0.6rem;
    height: 0.6rem;
    margin-bottom: .24rem;
    display: inline-block;
}

section.application-form-check .title {
    font-size: .24rem;
    font-weight: 700;
    margin-bottom: .16rem;
    line-height: 1.3em;
}

section.application-form-check .desc {
    font-size: .18rem;
    font-weight: 500;
    line-height: 1.5em;
    margin-bottom: .36rem;
    max-width: 6.4rem;
}

section.application-form-check form.general {
    display: flex;
    align-items: flex-start;
    gap: .16rem;
    justify-content: center;
    width: 100%;
    max-width: 5.6rem;
}

section.application-form-check .form-item {
    flex: 1;
    text-align: left;
    margin: 0 !important;
}

section.application-form-check .form-item label {
    position: static !important;
    transform: none !important;
    display: block;
    font-size: .14rem;
    font-weight: 600;
    color: #121212;
    margin-bottom: .08rem;
    opacity: 1 !important;
    pointer-events: auto !important;
}

section.application-form-check .form-item input[type='text'] {
    width: 100%;
    height: .52rem;
    border-radius: .32rem;
    border: 1px solid #C3C3C3;
    padding: 0 .24rem;
    font-size: .16rem;
    color: #121212;
    background-color: #FFF;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s ease;
}

section.application-form-check .form-item input[type='text']:focus {
    border-color: #F44336;
}

section.application-form-check .btn-default {
    margin-top: .24rem;
}

/* ==========================================================================
   STATS BOX ENHANCEMENTS (.TOP .BOX)
   ========================================================================== */
section.main-boxes .top .box {
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

section.main-boxes .top .box.has-bg-img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

section.main-boxes .top .box .center-icon {
    position: relative;
    align-self: center;
    margin: .24rem 0;
    width: 0.8rem;
    height: 0.8rem;
    object-fit: contain;
    pointer-events: none;
    opacity: 0.85;
    display: block;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

section.main-boxes .top .box .center-icon.hover {
    display: none;
}

section.main-boxes .top .box:hover .center-icon {
    display: none;
}

section.main-boxes .top .box:hover .center-icon.hover {
    display: block;
}

section.main-boxes .top .box:hover {
    transform: translateY(-4px);
    box-shadow: 0 .2rem .3rem rgba(0, 0, 0, .08);
}

section.main-boxes .top .box.hovered-bg .text,
section.main-boxes .top .box.hovered-bg .text>span,
section.main-boxes .top .box.hovered-bg .link {
    color: white !important;
}

section.main-boxes .top .box.hovered-bg .link:after {
    filter: brightness(0) invert(1);
}

section.main-boxes .top .box.hovered-bg .center-icon {
    opacity: 1;
}