:root {
    --primaryColor: #FF0013;
    --primary-color: var(--primaryColor);
    --primary-hover: color-mix(in srgb, var(--primaryColor) 85%, black);
    --primaryColor-light: color-mix(in srgb, var(--primaryColor) 15%, white);
    --primaryColor-lighter: color-mix(in srgb, var(--primaryColor) 8%, white);
    --primaryColor-rgb: 34, 0, 155;
    /* RGB values for rgba() usage */
    --secondaryColor: #000000;
}

/* === Font Awesome "Free" alias ===
   _head_css.cshtml yalnız yerel PRO build'i yükler (vendor/font-awesome.css →
   "Font Awesome 6 Pro" ailesi). Bu dosyadaki ve mobile-nav.css'teki bazı kurallar ise
   "Font Awesome 6 Free" ailesine referans verir (slick okları, tükendi ikonu,
   nav chevron, checkbox tiki, breadcrumb oku) → aile tanımsız kalınca ikonlar
   boş kutu (tofu) çıkıyordu. Alias "Free" adını mevcut PRO webfont dosyalarına
   bağlar; PRO solid, FREE solid'in glyph süpersetidir. URL bu css'in
   klasöründen çözülür: /user-assets/css/webfonts/... */
@font-face {
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url("webfonts/fa-solid-900.woff2") format("woff2"),
        url("webfonts/fa-solid-900.ttf") format("truetype");
}

@font-face {
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("webfonts/fa-regular-400.woff2") format("woff2"),
        url("webfonts/fa-regular-400.ttf") format("truetype");
}

/* Back-to-top: görünmezken tıklamayı engellemesin */
.back-to-top {
    pointer-events: none;
}

.back-to-top.show {
    pointer-events: auto;
}

/* Site Genel Tipografi */
body {
    font-family: var(--site-font-family, inherit);
    /* Çok açık gri zemin: beyaz ürün kartları/tablolar zeminden ayrışsın.
       Kendi arka planı olmayan bölümler (footer, ürün detay, sepet) dosya sonunda beyaza sabitlendi. */
    background-color: #f6f7f9;
}

/* iOS Safari: overflow-x hidden fix - body/html'de çalışmıyor */
html,
body {
    max-width: 100vw;
    overflow-x: hidden;
}

/* NOT: html'e scrollbar-gutter:stable veya overflow-y:scroll KOYMA!
   Sayfanın gerçek scrollbar'ı BODY'de (body::-webkit-scrollbar { width:10px }, app.css).
   html'e ayrı bir oluk/scrollbar eklemek, body'nin 10px scrollbar'ının YANINDA ~20px'lik BOŞ
   beyaz bir oluk daha rezerve ediyor → sağ üst köşede 30px'lik beyaz boşluk (topbar kenara ulaşamıyor).
   html varsayılan kalmalı; scroll+scrollbar tek noktada (body) toplanır, boşluk oluşmaz. */

/* Body her viewport'ta full-width — header nav siyah barı kenarlara kadar uzar, sayfa içeriği kesilmez.
   Header inner / nav-container / Bootstrap container'lar zaten kendi içinde max-width ile ortalanır. */

/* iOS Safari: tüm container'ların viewport'u aşmasını engelle */
.container,
.container-fluid {
    max-width: 100%;
}

/* İçerik HİÇBİR ekranda kenara yapışmasın — her viewport'ta sağdan soldan
   viewport ile orantılı, makul bir boşluk bırakılır. clamp(min, tercih, maks):
   küçük ekranda en az 16px, büyük ekranda en fazla 72px boşluk. İçerik ekranın
   çoğunu kullanmaya devam eder; sabit bir genişliğe KISILMAZ.
   NOT: Hem .container HEM .container-fluid hedeflenir — bazı sayfalar (bülten,
   sayfa, dokümanlar) .container kullanıyor; sadece .container-fluid hedeflense
   o sayfalar kenara yapışık kalırdı. app.css'teki "padding:0" bu longhand
   ile ezilir (custom.css daha sonra yüklenir).
   (Boşluğu büyütmek/küçültmek için 4vw veya 72px değerlerini değiştir.) */
.container,
.container-fluid {
    padding-left: clamp(16px, 4vw, 72px);
    padding-right: clamp(16px, 4vw, 72px);
}

.cookie {
    position: fixed;
    bottom: 10px;
    z-index: 99999;
    background: #000;
    color: #fff;
    padding: 20px 30px;
    border-radius: 8px;
    font-family: tahoma;
    font-size: 13px;
    left: 100px;
    right: 100px;
    display: none;
}

.cookie-left {
    float: left
}

.cookie-right {
    float: right
}

.cc-link {
    color: #ccc;
    margin-left: 10px
}

.cc-link:hover {
    color: #fff
}

.cc-dismiss {
    background: #666;
    color: #fff;
    padding: 10px 15px;
    border-radius: 4px
}

.cc-dismiss:hover {
    background: #fff;
    color: #000
}

.text-small {
    font-size: 1px;
    line-height: 18px
}

/* Header / Navigation */
.primary-navigation .nav>li {
    color: #666;
    font-size: 13px
}

.primary-navigation .nav>li span {
    color: black;
    display: block
}

.navbar-nav .nav-item i {
    font-size: 1.733em;
    min-height: 30px
}

.navbar-currencies li {
    list-style: none;
    font-size: 13px
}

.navbar-currencies li span {
    padding-right: 10px
}

.navbar-currencies {
    margin: 7px 70px 7px 10px;
    color: #666
}

.navbar-nav .nav-item {
    text-align: center;
    margin: 0 10px
}

.navbar-nav .nav-item .header-menu-label {
    font-size: 14px;
    display: block
}

.site-header-cart .header-menu-label {
    font-size: 13px;
    display: block
}

.header-cart .count {
    background: black;
    color: white;
    font-size: 10px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    border-radius: 50%;
    position: absolute;
    margin: -10px 0 0 -5px;
}

.dropdown-menu-mini-cart {
    left: -260px
}

.dropdown-menu-account {
    padding: 15px;
    font-size: 14px;
    width: 400px
}

.dropdown-menu-account .account-menu-title {
    width: 100%;
    display: inline-block;
    margin-bottom: 15px;
    text-align: center;
    font-weight: 500
}

.dropdown-menu-account .account-menu-title span {
    width: 100%;
    display: inline-block;
    font-weight: 400
}

.dropdown-menu-account .account-menu-bakiye {
    width: 100%;
    display: inline-block;
    margin-bottom: 25px;
    text-align: center;
    font-weight: 500
}

.dropdown-menu-account .account-menu-link {
    width: 48%;
    display: inline-block;
    margin-bottom: 5px;
    text-align: left;
    font-weight: 400
}

.dropdown-menu-account .account-menu-link i {
    font-size: 17px;
    padding-right: 5px;
    width: 26px
}

.no-padding {
    padding: 0 !important
}

.payment-icon-image {
    height: 42px
}

/* DataTables tweaks */
div.dataTables_wrapper div.dataTables_filter,
div.dataTables_wrapper div.dataTables_filter label {
    width: 100% !important;
    margin: 0 !important
}

div.dataTables_filter input {
    width: 99% !important;
    border-color: #999;
    padding: 7px 10px;
    font-size: 14px
}

.AccountStatement #menu-departments-menu {
    display: none
}

.listTable {
    font-size: 13px
}

.listTable .btn {
    font-weight: normal;
    font-size: 13px;
    padding: 1px 30px
}

.order-details {
    font-size: 14px
}

.order-details td {
    font-size: 13px;
    padding: 5px
}

.miniTable {
    font-size: 14px
}

.miniTable td {
    padding: 5px;
    vertical-align: middle
}

.miniTable td a {
    padding: 0;
    font-size: 13px;
    color: var(--primary-hover)
}

.modal50 {
    width: 50% !important;
    max-width: 50% !important
}

.modal60 {
    width: 60% !important;
    max-width: 60% !important
}

.modal70 {
    width: 70% !important;
    max-width: 70% !important
}

.modal80 {
    width: 80% !important;
    max-width: 80% !important
}

.modal90 {
    width: 96% !important;
    max-width: 96% !important
}

.modalheightlarge {
    height: 92%
}

.AccountPanelMenu {
    margin: 0 0 15px 0
}

.AccountPanelMenu ul {
    padding-left: 0 !important
}

.AccountPanelMenu li {
    display: inline
}

li .page-numbers.current {
    background-color: #f5363e !important
}

.productName {
    min-height: 42px;
    color: black;
    line-height: 16px
}

.productImage {
    min-height: 300px
}

.productCode {
    min-height: 20px;
    font-family: Tahoma;
    font-size: 12px
}

.productPrice {
    min-height: 20px;
    width: 100%;
    margin: 10px 0
}

.productPrice span {
    width: 50%;
    float: left
}

.productPrice .salesPrice {
    color: #f5363e;
    font-weight: 500;
    font-size: 18px
}

.productPrice .old-price {
    color: #666;
    text-align: right;
    text-decoration: line-through;
    font-size: 16px
}

.productQuantity {
    float: left;
    width: 30%;
    margin-right: 10%
}

.productQuantity input {
    border-radius: 8px;
    border: 1px solid #ccc;
    padding: 5px;
    text-align: center;
    width: 80px
}

.productAddToCart {
    float: left;
    width: 60%
}


.products .product:hover {
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.2);
    z-index: 1
}

.color-white {
    color: white !important
}


.productListSmallImages {
    float: left;
    width: 12%;
    text-align: center
}

.productListSmallInfo {
    float: left;
    width: 62%;
    margin: 0 3%
}

.productListSmallActions {
    float: left;
    width: 20%;
    padding-top: 30px
}

.productListSmall {
    float: left;
    width: 100%;
    border-bottom: 1px solid #ccc;
    padding: 10px 0
}


.productListSmallName {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 10px;
    color: black
}

.productListCode {
    font-size: 13px
}

.productListSmallStock {
    font-size: 13px;
    margin: 5px 0
}


.productListSmallPrice .productListSalesPrice {
    color: #f5363e;
    font-weight: 500;
    font-size: 18px;
    margin-right: 25px
}

.productListSmallPrice .productListOldPrice {
    color: #666;
    text-align: right;
    text-decoration: line-through;
    font-size: 16px
}

.productListSmallImages img {
    max-height: 100px;
    display: inline-block !important
}


.products .productListSmall:hover {
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.2);
    z-index: 99999
}


.select2-container .select2-selection--single,
.select2-container--default .select2-selection--single .select2-selection__rendered {
    height: 42px !important;
    line-height: 42px !important
}

.customForm label {
    margin-bottom: 0px;
    font-weight: 400
}

.nav-item .fa-table {
    font-size: 24px !important
}


#table .products {
    margin-right: 0 !important;
    margin-left: 0 !important;
    display: contents !important
}

#table .productsTableImg {
    height: 80px
}

#table p {
    font-size: 12px
}


.addToCartSmall {
    padding: 6px 10px;
    font-size: 15px;
    background: #096
}

.addToCartTable {
    padding: 4px 6px;
    font-size: 14px;
    background: #096;
    color: #fff;
    border-radius: 2px;
    margin-left: 5px
}

.productTableListPrice {
    color: #666;
    font-weight: 400;
    font-size: 16px;
    text-align: right
}

.productTableSalesPrice {
    color: #f5363e;
    font-weight: 500;
    font-size: 16px;
    text-align: right
}

.productTableSalesStock {
    text-align: center
}

.productTableSalesPrice p {
    color: #999;
    font-weight: normal;
    font-size: 16px !important;
    text-decoration: line-through
}

.pageTitle {
    width: 100%;
    background: #f0f0f0;
    border-radius: 4px;
    padding: 10px 20px;
    font-weight: 500;
    color: black;
    border-left: 10px solid var(--primaryColor);
    margin-bottom: 30px
}

.customTable td {
    padding: 5px 10px;
    font-size: 14px;
    vertical-align: middle
}

.productDetailHeader {
    padding: 5px 15px;
    border-radius: 0;
    background: none;
    display: block !important;
    text-align: right
}

.productDetailHeader .btn-close {
    padding: 0px 10px;
    border-radius: 4px;
    background: #ddd;
    font-size: 22px;
    font-weight: 500
}

.product-thumbnail {
    margin: 3px
}

.producDetailName {
    float: left;
    width: 100%;
    font-weight: 500;
    color: black;
    font-size: 18px
}

.producDetailCode {
    float: left;
    width: 100%;
    margin: 2px 0
}

.producDetailShortDescription {
    float: left;
    width: 100%;
    color: #999;
    font-size: 13px
}

.producDetailPrice .productDetailSalesPrice {
    color: #f5363e;
    font-weight: 500;
    font-size: 16px;
    margin-right: 25px
}

.producDetailPrice .productDetailOldPrice {
    color: #666;
    text-align: right;
    text-decoration: line-through;
    font-size: 16px
}

.producDetailAction {
    float: left;
    width: 100%
}

.producDetailNameDescription {
    float: left;
    width: 100%;
    margin-top: 40px
}


.productDetailQuantity {
    float: left;
    margin-right: 20px
}

.productDetailQuantity input {
    border-radius: 8px;
    border: 1px solid #ccc;
    padding: 5px;
    text-align: center;
    width: 80px
}

.productDetailAddToCart {}

.producDetailPriceTable td {
    padding: 5px 10px
}

.producDetailPriceTable {
    margin: 20px 0;
    float: left;
    width: 100%;
    border-collapse: collapse
}

.producDetailPriceText {
    font-size: 14px;
    width: 100px
}

.producDetailPriceValue {
    color: black;
    width: 140px
}


.productDetailWarehouse {
    float: left;
    width: 100%;
    margin: 15px 0
}

.productDetailWarehouse h5 {
    font-size: 15px;
    font-weight: 400;
    color: #333
}

.productDetailWarehouse span {
    color: #096;
    font-size: 15px;
    display: inline-block;
    background: #f2f1f1;
    border-radius: 6px;
    padding: 5px 10px;
    margin: 5px 5px 0 0;
    text-align: center
}

.productDetailWarehouse .out-of-stock {
    color: #666
}


.product-select-group {
    display: inline-block;
    min-width: 200px
}

.productTableListe td {
    vertical-align: middle;
    padding: 4px 10px;
    font-size: 14px
}

.productTableListe input {
    padding: 5px !important;
    font-size: 13px
}

.productTableListe .input-group-text {
    padding: 5px;
    font-size: 12px;
    border-radius: 0 6px 6px 0;
    border: none
}

.productTableListe .sablon-group {
    display: inline-block;
    margin-right: 5px
}

.productTableListe .sablon-group select {
    padding: 2px 8px;
    font-size: 13px;
    min-width: 180px
}

.sablon-aciklama {
    position: absolute;
    margin-top: -26px;
    margin-left: 400px
}

.productListCard {
    width: 19%;
    margin: 1% 0.5%
}

.productListCard img {
    width: 100%
}

.productListCardName {
    background-color: rgba(0, 0, 0, 0.6);
    position: absolute;
    width: 92%;
    bottom: 7px;
    margin: 4%;
    padding: 2%;
    text-align: center
}

.productListCardName span {
    font-weight: 400;
    font-size: 20px;
    color: #fff
}


.productListCard:hover .productListCardName {
    background-color: var(--primary-hover)
}

.ruloLabel {
    position: absolute;
    width: 50px;
    height: 50px;
    background: #fcaf17;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    right: 20px;
    top: 20px
}

.ruloLabel img {
    width: 30px;
    height: 30px;
    display: inline
}


.amountClass input {
    background: #000;
    color: #fff;
    border: none;
    font-weight: 500;
    font-size: 24px;
    width: 100px;
    display: block;
    padding: 10px 15px;
    border-radius: 6px 0 0 6px;
    line-height: 24px
}

.amountClass .input-group-text {
    background: #333;
    color: #fff;
    border: none;
    font-weight: 500;
    font-size: 20px;
    width: 50px;
    display: block;
    padding: 10px 15px;
    border-radius: 0 6px 6px 0;
    line-height: 24px
}

.widget_shopping_cart_content a:hover {
    color: #fff !important
}

.cartItemsDetail {
    color: #666;
    font-size: 12px;
    font-weight: normal
}

.mini_cart_item a:hover {
    color: red !important
}

#mainCategorySelect,
#subCategorySelect {
    min-width: 260px;
    background: #00babe;
    color: white;
    border-color: #00b9bd
}

/* Dropdowns & user menu (single consolidated block) */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 160px;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: none;
    flex-direction: column;
    z-index: 999;
    padding: 8px 0;
}

.dropdown-menu a {
    padding: 10px 16px;
    display: flex;
    align-items: center;
    color: #333;
    font-size: 14px;
    text-decoration: none;
    transition: background 0.3s
}

.dropdown-menu a i {
    margin-right: 8px;
    color: #888
}

.dropdown-menu a:hover {
    background-color: #f0f0f0
}

.dropdown-wrapper:hover .dropdown-menu {
    display: flex
}

.headerUser {
    position: relative;
    z-index: 9999
}

.user-button {
    background: transparent;
    border: none;
    color: #333;
    font-weight: 500;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 6px;
    transition: background 0.3s ease
}

.user-button:hover {
    background-color: #f5f5f5
}

.dropdown-icon {
    margin-left: 6px;
    font-size: 12px
}

.headerUserIon {
    font-size: 18px;
    margin-right: 5px
}

.headerUserIonOnlıne {
    font-size: 18px;
    margin-right: -10px
}

.headerUser p {
    font-size: 14px
}

.page-item.active .page-link {
    background-color: #000 !important;
    border-color: #000 !important
}

#searchTotals {
    font-weight: 500
}

#searchCategories,
#searchProducts {
    margin: 2px 5px !important
}

#searchProducts span {
    font-size: 13px
}

.checkoutLeft {
    float: left;
    width: 50%;
    font-size: 14px;
    font-weight: normal
}

.checkoutRight {
    float: left;
    width: 50%
}

.checkoutLeftBox {
    background: #f0f0f0;
    padding: 2%;
    border-radius: 6px;
    width: 100%
}

.checkoutRightBox {
    background: #f0f0f0;
    padding: 5%;
    border-radius: 6px;
    width: 100%
}

.checkoutLeftBox label,
.checkoutRightBox label {
    font-weight: normal !important
}

.checkoutLeftBox p,
.checkoutRightBox p {
    margin-bottom: 2px
}

.checkoutSelect {
    padding: 5px 10px;
    width: 240px;
    font-size: 14px;
    height: 40px
}

.checkoutRightBox th,
.checkoutRightBox td {
    padding: 3px;
    font-size: 14px
}

.ibanList {
    background: #f0f0f0;
    padding: 15px;
    border-radius: 8px;
    margin-top: 10px;
    display: none
}

.ibanList th {
    padding: 5px
}

.ibanList tbody td {
    border-bottom: 1px solid #bfbebe;
    border-top: 1px solid #fff
}

#cart_table .product-name {
    border-bottom: 1px solid #bfbebe;
    border-top: 1px solid #fff;
    color: black
}

#cart_table .product-name span {
    line-height: 16px;
    color: #f5363e;
    font-size: 13px;
    display: inline-block
}

.bg-primary2 {
    background: #f5363e
}

.bg-primary2 .close {
    opacity: 1;
    color: #fff
}

.spinner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    visibility: hidden
}

.site-content {
    margin-bottom: 40px
}

.AccountStatement .text-info {
    font-size: 13px !important;
    font-weight: normal !important
}

.btn-success-2 {
    background: #00b10b;
    color: white
}

.btn-success-2:hover {
    background: #007908;
    color: white
}

.form-select.select2 {
    padding: 10px 15px;
    height: 42px !important
}

#InstallmentRadios .form-check {
    background: #ececec;
    padding: 3px 11px;
    border-radius: 5px;
    margin: 0
}

#InstallmentRadios .form-check-input[type="radio"] {
    visibility: hidden
}

#InstallmentRadios .form-check-input[type="radio"]:checked+label {
    color: #f00;
    font-weight: 500
}

/* NAV */
.mega-nav {
    position: relative;
    font-family: Arial, sans-serif;
    z-index: 999;
    border-top: 1px solid #EAEAEC;
    border-bottom: 1px solid #EAEAEC
}

.mega-nav-menu {
    margin: 0;
    padding: 0;
    list-style: none;
    display: contents;
    width: 100%
}

.mega-nav-menu>li>a {
    font-family: "Bai Jamjuree", sans-serif;
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 0;
    color: #0C0C0D;
    text-decoration: none;
    padding: 10px;
    display: block;
    transition: background 0.3s;
    text-align: center;
    min-height: 70px
}

.mega-nav-menu>li>a:hover {
    background: #000;
    color: white
}

.mega-nav-menu>li>a:hover span {

    color: white !important
}

/* MEGA DROPDOWN */
.mega-nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: none;
    box-sizing: border-box
}

.mega-nav-parent:hover .mega-nav-dropdown {
    display: block
}

.mega-nav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12%, 1fr));
    gap: 30px
}

.mega-nav-item {
    text-align: center
}

.mega-nav-item img {
    width: 100%;
    max-width: 100px;
    border-radius: 8px;
    transition: transform 0.3s
}

.mega-nav-item img:hover {
    transform: scale(1.05)
}

.mega-nav-item span {
    display: block;
    margin: 1px;
    font-size: 14px;
    color: #333;
    font-weight: 600;
    font-family: "Bai Jamjuree", sans-serif
}

.mega-nav-sub span {
    font-weight: 500;
}

.mega-nav-item span:hover {
    color: var(--primaryColor) !important
}







.product-discount {
    background: var(--primaryColor);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    margin-bottom: 8px;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    margin: 20px
}

.free-shipping {
    background: #ff0;
    color: #000;
    font-size: 13px;
    font-family: tahoma;
    margin: 5px;
    padding: 3px 15px;
    border-radius: 6px;
    text-align: center
}

.price-box {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.featured-product-card {
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 16px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04)
}

.featured-product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08)
}

.featured-product-card .disabled {
    color: #ccc;
    border-color: #ccc
}

.featured-product-card input {
    float: left
}

.featured-product-card button {
    float: right
}

.select2 .selection {
    width: 100%
}

/* ============================================
   FLOATING SOCIAL MEDIA BAR
   ============================================ */
.floating-social-bar {
    position: fixed;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 999;
}

/* Desktop: Buttons container always visible */
.floating-social-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.floating-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.floating-social-btn i {
    font-size: 20px;
    transition: transform 0.3s ease;
}

.floating-social-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.floating-social-btn:hover i {
    transform: scale(1.1);
}

/* Platform Renkleri */
.social-whatsapp {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
}

.social-whatsapp:hover {
    background: linear-gradient(135deg, #2be076 0%, #159a8a 100%);
    color: #fff;
}

.social-facebook {
    background: linear-gradient(135deg, #1877F2 0%, #0d5bbf 100%);
}

.social-facebook:hover {
    background: linear-gradient(135deg, #3b8ff5 0%, #1068d9 100%);
    color: #fff;
}

.social-instagram {
    background: linear-gradient(135deg, #E4405F 0%, #FCAF45 100%);
}

.social-instagram:hover {
    background: linear-gradient(135deg, #f0526f 0%, #fdb955 100%);
    color: #fff;
}

.social-twitter {
    background: linear-gradient(135deg, #000000 0%, #333333 100%);
}

.social-twitter:hover {
    background: linear-gradient(135deg, #222222 0%, #444444 100%);
    color: #fff;
}

.social-youtube {
    background: linear-gradient(135deg, #FF0000 0%, #cc0000 100%);
}

.social-youtube:hover {
    background: linear-gradient(135deg, #ff3333 0%, #e60000 100%);
    color: #fff;
}

/* Tooltip on hover */
.floating-social-btn::before {
    content: attr(title);
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: #1f2937;
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.floating-social-btn::after {
    content: '';
    position: absolute;
    right: calc(100% + 4px);
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: #1f2937;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.floating-social-btn:hover::before,
.floating-social-btn:hover::after {
    opacity: 1;
    visibility: visible;
}

/* WhatsApp pulse animation */
.social-whatsapp {
    animation: whatsappPulse 2s infinite;
}

@keyframes whatsappPulse {

    0%,
    100% {
        box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
    }

    50% {
        box-shadow: 0 4px 20px rgba(37, 211, 102, 0.5);
    }
}

.social-whatsapp:hover {
    animation: none;
}

/* Toggle Button (Mobile Only) */
.floating-social-toggle {
    display: none;
}

/* Floating Social Bar - Mobile */
@media (max-width: 768px) {
    .floating-social-bar {
        flex-direction: column-reverse;
        right: 12px;
        bottom: 80px;
        top: auto;
        transform: none;
        gap: 0;
        align-items: flex-end;
    }

    /* Toggle Button */
    .floating-social-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--primaryColor) 0%, var(--primary-hover) 100%);
        color: #fff;
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        transition: all 0.3s ease;
        z-index: 2;
    }

    .floating-social-toggle i {
        font-size: 20px;
        transition: transform 0.3s ease;
    }

    .floating-social-bar.expanded .floating-social-toggle i {
        transform: rotate(45deg);
    }

    /* Social Buttons Container */
    .floating-social-buttons {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 8px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(20px);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .floating-social-bar.expanded .floating-social-buttons {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .floating-social-btn {
        width: 44px;
        height: 44px;
        opacity: 0;
        transform: scale(0.5);
        transition: all 0.2s ease;
    }

    .floating-social-bar.expanded .floating-social-btn {
        opacity: 1;
        transform: scale(1);
    }

    /* Stagger animation for buttons */
    .floating-social-bar.expanded .floating-social-btn:nth-child(1) {
        transition-delay: 0.05s;
    }

    .floating-social-bar.expanded .floating-social-btn:nth-child(2) {
        transition-delay: 0.1s;
    }

    .floating-social-bar.expanded .floating-social-btn:nth-child(3) {
        transition-delay: 0.15s;
    }

    .floating-social-bar.expanded .floating-social-btn:nth-child(4) {
        transition-delay: 0.2s;
    }

    .floating-social-bar.expanded .floating-social-btn:nth-child(5) {
        transition-delay: 0.25s;
    }

    .floating-social-btn i {
        font-size: 18px;
    }

    /* Hide tooltip on mobile */
    .floating-social-btn::before,
    .floating-social-btn::after {
        display: none;
    }

    /* Backdrop when expanded */
    .floating-social-bar::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0);
        pointer-events: none;
        transition: background 0.3s ease;
        z-index: -1;
    }

    .floating-social-bar.expanded::before {
        background: rgba(0, 0, 0, 0.3);
        pointer-events: auto;
    }
}

@media (max-width: 576px) {
    .floating-social-bar {
        right: 10px;
        bottom: 80px;
    }

    .floating-social-toggle {
        width: 44px;
        height: 44px;
    }

    .floating-social-toggle i {
        font-size: 18px;
    }

    .floating-social-btn {
        width: 40px;
        height: 40px;
    }

    .floating-social-btn i {
        font-size: 16px;
    }
}

/* Eski whatsBtn gizle (geriye uyumluluk) */
.whatsBtn {
    display: none !important;
}

/* Responsive Custom */
@media(max-width:576px) {
    .m-none {
        display: none !important
    }

    .cookie {
        text-align: center
    }

    .cookie-right {
        text-align: center;
        margin-top: 20px;
        width: 100%
    }

    .AccountPanelMenu {
        margin: 10px 0 15px 0
    }

    .AccountPanelMenu a {
        padding: 5px;
        font-size: 12px
    }

    #primary {
        margin-top: 20px
    }

    #bannersBlock img {
        width: 100%;
        height: auto
    }

    .categories-section h2 {
        font-size: 22px
    }

    .productListCard {
        width: 49%;
        margin: 0.5% 0.5%
    }

    .productListCardName span {
        font-size: 16px
    }

    #mainCategorySelect,
    #subCategorySelect {
        margin: 3px 0;
        width: 100% !important
    }

    .checkoutLeft {
        width: 100%
    }

    .checkoutRight {
        width: 100%;
        margin-top: 25px
    }

    .modal50 {
        width: 96% !important;
        max-width: 96% !important
    }

    .site-footer {
        text-align: center
    }
}

.mr-2 {
    margin-right: 20px
}

.modalDetail div {
    padding: 2px 5px
}

footer {
    margin-top: 45px
}

.footer-title {
    font-size: 15px;
    font-weight: 600;
    color: #000;
    margin-bottom: 8px
}

/* Slider controls */
.custom-prev,
.custom-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.6);
    border: none;
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px
}

.custom-prev {
    left: 20px
}

.custom-next {
    right: 20px
}

.slider {
    position: relative;
    height: 6px;
    background: #ddd;
    border-radius: 6px;
    margin-top: 10px
}

.slider .progress {
    position: absolute;
    height: 100%;
    background: var(--primaryColor);
    border-radius: 6px;
    z-index: 1
}

.slider input[type="range"] {
    position: absolute;
    width: 100%;
    top: -6px;
    height: 18px;
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    z-index: 2
}

.headerCartButton {
    position: relative;
    padding: 6px 10px;
    border-radius: 8px;
    transition: background 0.3s ease;
    align-items: center;
    color: #000
}

.headerCartButton:hover {
    background-color: #f4f4f4
}

.headerCartButton i.fa-cart-shopping {
    font-size: 18px;
    position: relative;
    margin-right: 0px
}

.headerCartButton .cart-counter {
    position: absolute;
    top: -16px;
    right: 10px;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    text-align: center;
    line-height: 18px;
    display: inline-block;
    z-index: 2;
    box-shadow: 0 0 0 2px #fff;
    transition: transform 0.2s ease
}

.headerCartButton:hover .cart-counter {
    transform: scale(1.1)
}

.headerCartButton h6 {
    margin: 0 0 0 8px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap
}

.modern-shortcuts {
    flex-wrap: wrap;
    gap: 16px
}

.shortcut-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    color: white;
    background-color: transparent;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease
}

.shortcut-link:hover {
    background-color: #ffffff;
    color: var(--primaryColor)
}

.shortcut-link i {
    font-size: 16px
}

@media (max-width: 576px) {
    .modern-shortcuts {
        justify-content: center;
        gap: 10px;
        padding: 10px
    }

    .shortcut-link {
        font-size: 13px;
        padding: 5px 10px
    }

    .shortcut-link i {
        font-size: 14px
    }
}

/* Search dropdown stilleri: "ARAMA KUTUSU YENİDEN TASARIM" bloğunda (eski kopya kaldırıldı) */

/* Product list view */
.product-list-view {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #eee;
    background-color: #fff;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s ease
}

.product-list-view:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08)
}

.product-list-view .image-box {
    width: 120px;
    height: 120px;
    flex-shrink: 0
}

.product-list-view .image-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px
}

.product-list-view .product-desc {
    display: flex;
    align-items: center;
    height: 100%;
    min-height: 100px
}

.product-list-view .product-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.product-list-view .text {
    font-size: 14px;
    color: #777;
    line-height: 1.4
}

.product-list-view .button-box {
    min-width: 160px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    gap: 8px
}

.product-list-view .cus-btn-2 {
    background-color: #f9c800;
    color: #000;
    font-weight: 600;
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    width: 100%
}

.product-list-view .cus-btn-2:hover {
    background-color: #e5b400;
    color: #000
}

.product-list-view .form-control {
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    width: 80px
}

@media (max-width: 768px) {
    .product-list-view {
        flex-direction: column;
        align-items: stretch;
        gap: 12px
    }

    .product-list-view .image-box {
        width: 100%;
        text-align: center
    }

    .product-list-view .image-box img {
        max-width: 100px
    }

    .product-list-view .button-box {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%
    }

    .product-list-view .cus-btn-2 {
        width: auto;
        flex: 1
    }

    .product-list-view .form-control {
        width: 60px
    }
}

/* List view controls */
.list-view-count {
    padding: 8px 12px;
    height: 38px;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 14px
}

.list-view-count:focus {
    border-color: #f9c800;
    outline: none;
    box-shadow: 0 0 0 2px rgba(249, 200, 0, 0.3)
}

.list-view-button {
    background-color: #f9c800;
    border: none;
    color: #000;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 6px;
    transition: all 0.3s ease;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px
}

.list-view-button:hover {
    background-color: #e5b400;
    color: #000;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1)
}

@media (max-width: 576px) {

    .list-view-button,
    .list-view-count {
        width: 100% !important
    }

    .d-flex.align-items-center.gap-2.mb-2 {
        flex-direction: column;
        align-items: stretch;
        gap: 8px
    }
}

/* Account forms and sidebar */
.account-form-modern {
    padding: 30px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04)
}

.account-label {
    font-weight: 600;
    margin-bottom: 6px;
    color: #333;
    font-size: 15px;
    display: block
}

.account-input {
    width: 100%;
    padding: 25px 18px 25px 40px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 15px;
    background-color: #fafafa;
    transition: border 0.3s ease
}

.account-input:focus {
    border-color: var(--primaryColor);
    background-color: #fff;
    box-shadow: 0 0 0 2px rgba(255, 102, 0, 0.1);
    outline: none
}

.input-icon-wrapper {
    position: relative
}

.input-icon-wrapper i {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: #999;
    font-size: 16px;
    z-index: 2;
    pointer-events: none
}

.account-sidebar-menu {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    background: #fff
}

.account-sidebar-menu .list-group-item {
    border: none;
    border-bottom: 1px solid #f0f0f0;
    padding: 14px 18px;
    font-size: 15px;
    font-weight: 500;
    transition: background 0.3s ease, color 0.3s ease
}

.account-sidebar-menu .list-group-item:last-child {
    border-bottom: none
}

.account-sidebar-menu .list-group-item a {
    color: #333;
    text-decoration: none;
    width: 100%;
    display: flex;
    align-items: center;
    transition: color 0.3s ease
}

.account-sidebar-menu .list-group-item i {
    font-size: 16px;
    min-width: 24px;
    text-align: center;
    color: #6c757d;
    transition: color 0.3s ease
}

.account-sidebar-menu .list-group-item:hover a,
.account-sidebar-menu .list-group-item:hover i {
    color: var(--primaryColor)
}

.account-sidebar-menu .list-group-item.active,
.account-sidebar-menu .list-group-item.active a {
    background-color: var(--primaryColor);
    color: #fff !important
}

.account-sidebar-menu .list-group-item.active i {
    color: #fff !important
}

@media (max-width: 768px) {
    .account-sidebar-menu {
        font-size: 14px
    }

    .account-sidebar-menu .list-group-item {
        padding: 12px 14px
    }
}

/* Address / invoice / bank tables - modern styles */
.address-action-bar {
    position: relative;
    z-index: 2
}

.btn-action {
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    text-align: center
}

.btn-shipment {
    background-color: #000;
    color: #fff;
    border: none
}

.btn-shipment:hover {
    background-color: var(--primaryColor);
    color: #000
}

.btn-add {
    background-color: transparent;
    border: 2px solid #000;
    color: #000
}

.btn-add:hover {
    background-color: var(--primaryColor);
    color: #000;
    border-color: var(--primaryColor)
}

@media (min-width: 992px) {
    .address-action-bar {
        position: sticky;
        top: 30px;
        justify-content: flex-end
    }
}

.modern-address-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    font-size: 14px;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden
}

.modern-address-table thead {
    background-color: #f8f9fa;
    font-weight: 600;
    text-transform: uppercase
}

.modern-address-table thead th {
    padding: 14px 12px;
    color: #000;
    border-bottom: 1px solid #e0e0e0;
    white-space: nowrap
}

.modern-address-table tbody td {
    padding: 12px 10px;
    vertical-align: middle;
    border-bottom: 1px solid #f0f0f0
}

.modern-address-table tbody tr:hover {
    background-color: #fffbe6
}

.modern-address-table .edit-btn {
    background-color: var(--primaryColor);
    border: none;
    color: #fff;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 6px
}

.modern-address-table .edit-btn:hover {
    background-color: #000;
    color: #fff
}

.modern-address-table .delete-btn {
    background-color: var(--primaryColor);
    border: none;
    color: #fff;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 6px
}

.modern-address-table .delete-btn:hover {
    background-color: #a4161a
}

@media (max-width: 768px) {
    .modern-address-table thead {
        display: none
    }

    .modern-address-table,
    .modern-address-table tbody,
    .modern-address-table tr,
    .modern-address-table td {
        display: block;
        width: 100%
    }

    .modern-address-table tr {
        margin-bottom: 15px;
        border: 1px solid #eaeaea;
        border-radius: 8px;
        padding: 10px;
        background-color: #fff
    }

    .modern-address-table td {
        text-align: right;
        padding-left: 50%;
        position: relative;
        min-height: 40px
    }

    .modern-address-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        font-weight: 600;
        color: #444;
        text-align: left
    }
}

/* Modern bank table */
.modern-bank-table {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    font-size: 15px
}

.modern-bank-table thead th {
    background-color: #f9f9f9;
    font-weight: 600;
    color: #333;
    padding: 12px 15px;
    border-bottom: 2px solid #eee
}

.modern-bank-table tbody td {
    padding: 12px 15px;
    vertical-align: middle;
    border-top: 1px solid #f0f0f0
}

.modern-bank-table tbody tr:hover {
    background-color: #fffdee;
    box-shadow: inset 2px 0 0 var(--primaryColor);
    transition: background-color 0.3s
}

@media (max-width: 768px) {
    .modern-bank-table thead {
        display: none
    }

    .modern-bank-table,
    .modern-bank-table tbody,
    .modern-bank-table tr,
    .modern-bank-table td {
        display: block;
        width: 100%
    }

    .modern-bank-table tr {
        margin-bottom: 15px;
        border: 1px solid #eaeaea;
        border-radius: 8px;
        padding: 10px
    }

    .modern-bank-table td {
        text-align: right;
        padding-left: 50%;
        position: relative
    }

    .modern-bank-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        font-weight: 600;
        text-align: left;
        color: #555
    }
}

.iban-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-family: monospace;
    word-break: break-word
}

.iban-text {
    flex: 1;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.copy-iban-btn {
    background-color: var(--primaryColor);
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 14px;
    color: #000;
    cursor: pointer;
    transition: 0.3s
}

.copy-iban-btn:hover {
    background-color: #000;
    color: #fff
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px
}

.info-card {
    background: #f9f9f9;
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
    display: flex;
    flex-direction: column;
    font-family: "Bai Jamjuree", sans-serif
}

.info-card label {
    font-weight: 600;
    font-size: 14px;
    color: #444;
    margin-bottom: 8px
}

.info-card .card-value {
    background: #eceff1;
    padding: 10px 14px;
    border-radius: 6px;
    font-family: monospace;
    font-size: 15px;
    color: #222;
    word-break: break-word
}

@media (max-width: 576px) {
    .info-grid {
        grid-template-columns: 1fr
    }
}

/* Misc modernizations */
.custom-card {
    background: #fff;
    border: 1px solid #e3e3e3;
    border-left: 4px solid var(--primaryColor);
    border-radius: 8px
}

.customForm label {
    font-weight: 600;
    font-size: 14px
}

.btn-esbi {
    background-color: var(--primaryColor);
    border: none;
    color: #fff;
    transition: all 0.3s ease-in-out
}

.btn-esbi:hover {
    background-color: #000;
    color: #fff
}

@media (max-width: 768px) {
    .custom-card {
        padding: 1.5rem 1rem
    }
}

.custom-input-group {
    position: relative
}

.payment-amount {
    padding-right: 55px;
    border: 2px solid var(--primaryColor);
    border-radius: 8px;
    font-size: 18px;
    height: 48px;
    transition: all 0.2s ease-in-out
}

.payment-amount:focus {
    outline: none;
    border-color: #bfa100;
    box-shadow: 0 0 0 4px rgba(254, 203, 0, 0.2)
}

.currency-addon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: bold;
    color: #333;
    pointer-events: none
}

@media (max-width: 576px) {
    .payment-amount {
        font-size: 16px;
        height: 44px
    }
}

.input-with-icon {
    position: relative
}

.input-with-icon i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    font-size: 16px;
    pointer-events: none
}

.input-with-icon input,
.input-with-icon textarea {
    padding-left: 40px;
    border-radius: 8px;
    border: 1px solid #ddd;
    height: 48px;
    transition: border-color 0.2s ease-in-out
}

.input-with-icon input:focus,
.input-with-icon textarea:focus {
    border-color: var(--primaryColor);
    box-shadow: 0 0 0 3px rgba(254, 203, 0, 0.2);
    outline: none
}

.input-with-icon textarea {
    resize: vertical;
    min-height: 80px
}

.inv-label {
    min-width: 110px;
    font-weight: 600;
    color: #212529
}

.btn-pdf-modern {
    background-color: var(--primaryColor);
    color: #000;
    border: 1px solid var(--primaryColor);
    font-weight: 600
}

.btn-pdf-modern:hover {
    background-color: #000;
    color: #fff;
    border-color: #000
}

.btn-print {
    font-weight: 600
}

@media (max-width: 576px) {
    .inv-label {
        min-width: 96px
    }
}

.modern-invoice-table thead th {
    background-color: var(--primaryColor);
    color: #fff;
    font-weight: 400;
    border-bottom: 1px solid #ddd
}

.modern-invoice-table tbody tr:hover {
    background-color: rgba(254, 203, 0, 0.1);
    transition: background-color 0.2s ease
}


.modern-invoice-table td.text-end {
    font-variant-numeric: tabular-nums
}

@media (max-width: 576px) {

    .modern-invoice-table th,
    .modern-invoice-table td {
        white-space: nowrap;
        padding: 0.4rem
    }
}

.invoice-summary-card {
    background: #fff;
    border: 1px solid #e3e3e3;
    border-top: 4px solid var(--primaryColor);
    border-radius: 8px;
    padding: 1.5rem;
    font-size: 15px
}

.invoice-summary-card .summary-item {
    display: flex;
    justify-content: space-between;
    padding: 0.4rem 0;
    border-bottom: 1px solid #f2f2f2
}

.invoice-summary-card .summary-item:last-child {
    border-bottom: none
}

.invoice-summary-card .label {
    font-weight: 500;
    color: #555
}

.invoice-summary-card .value {
    font-weight: 600;
    color: #000
}

.invoice-summary-card .total {
    background: rgba(254, 203, 0, 0.1);
    border-radius: 6px;
    padding: 0.6rem;
    margin-top: 0.5rem
}

.invoice-summary-card .total .label {
    font-weight: 700;
    color: #000
}

.invoice-summary-card .total .value {
    font-weight: 800;
    color: #d17a00;
    /* Genel toplamın öne çıkması için turuncu ton */
    font-size: 1.1rem
}

/* Kart başlığına marka vurgusu */
.transfer-card .accent-pill {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--primaryColor);
    box-shadow: 0 0 0 4px rgba(254, 203, 0, 0.22)
}

/* Kart gövdesi ayracı (başlıktan sonra ince çizgi) */
.transfer-card .card-body {
    border-top: 1px solid #f1f1f1
}

/* Definition list satırları daha okunaklı */
.definition-list dt {
    font-weight: 600;
    letter-spacing: .2px
}

.definition-list dd {
    margin-bottom: .4rem;
    /* Bootstrap varsayılanını yumuşat */
}

.definition-list dt:not(:first-of-type) {
    padding-top: .6rem;
    border-top: 1px dashed #eee
}

.definition-list dd+dt {
    padding-top: .6rem;
    border-top: 1px dashed #eee;
}

/* Rakamları hizalı ve düzgün gösterelim */
.amount-mono {
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Küçük ekranlarda biraz daha sıkı layout */
@media (max-width: 576px) {
    .definition-list dt {
        margin-top: .25rem;
    }

    .transfer-card .card-header h5 {
        font-size: 1rem;
    }
}

/* Üst başlık vurgusu */
.accent-pill {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--primaryColor);
    box-shadow: 0 0 0 4px rgba(254, 203, 0, 0.22);
}

/* Kart genel dokunuş */
.tx-card .card-body {
    border-top: 1px solid #f1f1f1;
}

/* “@Model.FISTURU” rozeti */
.tx-type-badge {
    background-color: var(--primaryColor);
    color: #fff;
    border: 1px solid var(--primaryColor);
    font-weight: 600;
    padding: .4rem .6rem;
    border-radius: .5rem;
}

/* Satır yapısı: etiket + değer */
.tx-row {
    display: flex;
    align-items: baseline;
    gap: .5rem;
}

.tx-label {
    min-width: 110px;
    color: #6c757d;
    font-weight: 600;
}

.tx-value {
    color: #212529;
}

/* Bölüm ayraçları */
.tx-section-divider {
    border-bottom: 1px dashed #e9ecef;
}

/* Rakam hizası düzgün olsun */
.amount-mono {
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Küçük ekranda etiket daha dar olsun */
@media (max-width: 576px) {
    .tx-label {
        min-width: 90px;
    }
}

/* KART genel */
.pd-card {
    border: 1px solid #eaeaea;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .04);
    padding: 20px;
}

/* Sağ kolon sticky (desktop) */
@media (min-width:1200px) {
    .pd-sticky {
        position: sticky;
        top: 24px;
    }
}

/* Başlık ve breadcrumb */
.pd-breadcrumb a {
    color: #000;
}

.pd-breadcrumb a:hover {
    text-decoration: underline;
}

.pd-title {
    line-height: 1.2;
    letter-spacing: .2px;
    font-size: 22px;
}

/* --- GALERİ --- */
.pd-gallery {
    overflow: hidden;
}

.pd-main .detail-image {
    aspect-ratio: 1 / 1;
    /* kare alan */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafafa;
    border-radius: 12px;
}

.pd-main img {
    max-height: 540px;
    object-fit: contain;
    transition: transform .25s ease;
    cursor: zoom-in;
}

.pd-main img:hover {
    transform: scale(1.03);
}

/* Thumbnail rayı */
.pd-thumbs {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
    overflow: auto;
    padding-bottom: 4px;
}

.pd-thumbs .nav-image {
    width: 74px;
    height: 74px;
    flex: 0 0 auto;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}

.pd-thumbs .nav-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.pd-thumbs .nav-image:hover {
    transform: translateY(-2px);
}

.pd-thumbs .slick-current .nav-image,
.pd-thumbs .nav-image.is-active {
    border-color: var(--primaryColor);
    box-shadow: 0 0 0 3px rgba(254, 203, 0, .18);
}

/* Slick ok/dot’ları görünür ve içe gömülü */
.product-slider .slick-arrow,
.product-slider-asnav .slick-arrow {
    background: #fff;
    border: 1px solid #e9e9e9;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
}

.product-slider .slick-prev {
    left: 10px;
}

.product-slider .slick-next {
    right: 10px;
}

.product-slider .slick-dots {
    bottom: 10px;
}

/* --- FİYAT & ROSET --- */
.label.white {
    background: var(--primaryColor);
    color: #000;
    border-radius: 8px;
    padding: 6px 10px;
}

/* --- VARYANT butonları --- */
.variant-btn {
    border: 1px solid #e6e6e6;
    background: #fff;
    color: #111;
    padding: 10px 12px;
    border-radius: 10px;
    font-weight: 600;
    transition: all .2s ease;
    position: relative;
}

.variant-btn:hover {
    border-color: #bbb;
}

.variant-btn.out-of-stock {
    color: #999;
    background: #f6f6f6;
    border-style: dashed;
}

.variant-btn .variant-stock-label {
    display: block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #b00;
    margin-top: 2px;
    line-height: 1;
}

/* --- Adet alanı --- */
.pd-qty .input-area {
    border: 1.5px solid #e6e6e6;
    border-radius: 12px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    height: 48px;
    background: #fff;
}

.pd-qty .decrement,
.pd-qty .increment {
    width: 46px;
    height: 100%;
    border: 0;
    background: #fafafa;
    font-size: 20px;
    font-weight: 700;
    transition: background .15s;
}

.pd-qty .decrement:hover,
.pd-qty .increment:hover {
    background: #f0f0f0;
}

.pd-qty .number {
    width: 64px;
    border: 0;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
}

/* İnce gri ayraç */
.hr-line {
    height: 1px;
    background: #efefef;
    margin-top: 18px;
}

/* ===== Tabs – kart & zemin ===== */
.pd-tabs {
    --ink: #111;
    --muted: #6b7280;
    --line: #ececec;
    --accent: #ff2b2b;
    --accent-soft: rgba(255, 43, 43, .12);
}

.pd-tabs .pd-tabs-card {
    border: 1px solid var(--line);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .06);
    padding: clamp(24px, 1.667vw, 64px) clamp(48px, 3.333vw, 96px);
}

/* Sekme başlıklarını pill + underline efekti ile modernize */
.pd-tabs-list {
    border-bottom: none !important;
    gap: 10px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    padding: 15px;
}

.pd-tab {
    position: relative !important;
    border: none !important;
    background: #f9f9f9 !important;
    color: #333 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 10px 18px !important;
    border-radius: 30px !important;
    transition: all 0.25s ease !important;
    overflow: hidden !important;
}

.pd-tab:hover {
    background: #f1f1f1 !important;
    color: #000 !important;
}

/* Aktif durum: hem sarı pill hem underline */
.pd-tab.active {
    background: var(--primaryColor) !important;
    color: #000 !important;
    box-shadow: 0 4px 12px rgba(254, 203, 0, 0.4) !important;
}

.pd-tab.active::after {
    content: "" !important;
    position: absolute !important;
    left: 20% !important;
    bottom: -4px !important;
    width: 60% !important;
    height: 3px !important;
    background: var(--primaryColor) !important;
    border-radius: 2px !important;
    box-shadow: 0 4px 8px rgba(254, 203, 0, 0.5) !important;
}

/* Mobile uyum */
@media (max-width: 576px) {
    .pd-tab {
        flex: 1 1 auto;
        text-align: center;
    }
}


/* ===== Panel içi grid ===== */
.pd-panel {
    padding: 8px 4px 22px;
}

.pd-descgrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 32px;
    align-items: start;
}

@media (max-width: 1200px) {
    .pd-descgrid {
        grid-template-columns: 1fr;
    }
}

/* Rich text okunabilirlik */
.pd-richtext,
.pd-side {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.75;
}

.pd-richtext h1,
.pd-richtext h2,
.pd-richtext h3 {
    color: var(--ink);
    margin: 18px 0 8px;
    font-weight: 800;
}

.pd-richtext p {
    margin: 0 0 10px;
}

.pd-richtext ul {
    margin: 8px 0 14px 0;
    padding: 0;
    list-style: none;
}

.pd-richtext ul li {
    position: relative;
    padding-left: 20px;
    margin: 6px 0;
}

.pd-richtext ul li::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    position: absolute;
    left: 0;
    top: .65em;
    box-shadow: 0 0 0 4px var(--accent-soft);
}

/* Sağ sütun (resimli açıklama / öne çıkan kutu) */
.pd-side {
    border: 1px dashed var(--line);
    border-radius: 14px;
    padding: 14px;
    background: linear-gradient(180deg, #fff, #fafafa);
}

/* Responsive video (iframe) */
.pd-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    border-radius: 14px;
    margin: 14px 0;
}

.pd-video iframe,
.pd-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* ===== Teknik özellikler – her içerik türünü güzelleştir ===== */

/* UL liste tekniği */
#nav-spec ul {
    list-style: none;
    margin: 10px 0 4px;
    padding: 0;
    columns: 2;
    column-gap: 28px;
}

@media (max-width: 768px) {
    #nav-spec ul {
        columns: 1;
    }
}

#nav-spec ul li {
    break-inside: avoid;
    padding: 7px 0 7px 20px;
    position: relative;
    color: var(--muted);
}

#nav-spec ul li::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: #d7dbe3;
    position: absolute;
    left: 0;
    top: 12px;
}

/* Tablo tekniği */
#nav-spec table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 8px 0 14px;
}

#nav-spec th,
#nav-spec td {
    padding: 12px 14px;
    text-align: left;
    font-size: 14px;
}

#nav-spec thead th {
    background: #f7f8fb;
    color: #222;
    font-weight: 800;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

#nav-spec tbody tr {
    border-bottom: 1px solid #f0f0f0;
}

#nav-spec tbody tr:nth-child(odd) {
    background: #fcfdff;
}

#nav-spec tbody td:first-child {
    color: #111;
    font-weight: 700;
    width: 38%;
}

#nav-spec tbody td:last-child {
    color: var(--muted);
}

/* Tanım listesi (dl/dt/dd) desteği */
#nav-spec dl {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 10px 16px;
    margin: 0;
}

#nav-spec dt {
    font-weight: 800;
    color: #111;
}

#nav-spec dd {
    margin: 0;
    color: var(--muted);
}

/* Boş/placeholder mesajı (içerik yoksa göstermek için .is-empty ekleyebilirsin) */
#nav-spec.is-empty::before {
    content: "Teknik özellik bilgileri yakında eklenecektir.";
    display: block;
    text-align: center;
    color: #9aa0aa;
    padding: 32px 0;
}

/* Baskı dostu (müşteri çıktı almak isterse) */
@media print {
    .pd-tabs-nav {
        position: static;
    }

    .pd-tabs-card {
        box-shadow: none;
        border: none;
    }

    .pd-side {
        border: none;
        background: transparent;
    }
}

.discount-timer-dynamic {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 12px 0;
    padding: 8px 12px;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-family: "Segoe UI", sans-serif;
}

.discount-timer-dynamic .timer-segment {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 50px;
}

.discount-timer-dynamic .timer-number {
    font-size: 18px;
    font-weight: bold;
    color: var(--primaryColor);
}

.discount-timer-dynamic .timer-label {
    font-size: 12px;
    color: #6c757d;
}

.discount-timer-dynamic.timer-ended {
    background: #ffe5e5;
    color: var(--primaryColor);
    font-weight: bold;
    text-align: center;
    justify-content: center;
}

.discount-timer-wrapper {
    text-align: center;
    margin-top: 10px;
}

.discount-timer-title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
}

/* ===== OVERLAY DISCOUNT TIMER ===== */
.discount-timer-overlay {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
    background: linear-gradient(135deg, rgba(var(--primaryColor-rgb), 0.95) 0%, rgba(var(--primaryColor-rgb), 0.95) 100%);
    color: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 5;
    animation: timerPulse 2s ease-in-out infinite;
}

.discount-timer-overlay i {
    font-size: 14px;
    animation: timerIcon 1s ease-in-out infinite;
}

.discount-timer-overlay .timer-text {
    display: flex;
    align-items: center;
    gap: 2px;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.5px;
}

.discount-timer-overlay .timer-text span:not(.timer-text) {
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 4px;
    border-radius: 3px;
    min-width: 22px;
    text-align: center;
    display: inline-block;
}

.discount-timer-overlay.timer-urgent {
    background: linear-gradient(135deg, rgba(var(--primaryColor-rgb), 0.98) 0%, rgba(var(--primaryColor-rgb), 0.98) 100%);
    animation: timerUrgent 0.5s ease-in-out infinite;
}

.discount-timer-overlay.timer-ended {
    background: rgba(107, 114, 128, 0.9);
    animation: none;
}

.discount-timer-overlay.timer-ended::after {
    content: 'Süre Doldu';
}

.discount-timer-overlay.timer-ended .timer-text,
.discount-timer-overlay.timer-ended i {
    display: none;
}

@keyframes timerPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.9;
    }
}

@keyframes timerIcon {

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

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

@keyframes timerUrgent {

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

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

/* Mobile responsive for overlay timer */
@media (max-width: 576px) {
    .discount-timer-overlay {
        padding: 6px 10px;
        font-size: 11px;
        bottom: 6px;
        left: 6px;
        right: 6px;
    }

    .discount-timer-overlay i {
        font-size: 12px;
    }

    .discount-timer-overlay .timer-text span:not(.timer-text) {
        min-width: 18px;
        padding: 1px 3px;
    }
}

.sticky-toggle {
    position: fixed;
    right: 12px;
    bottom: 150px;
    z-index: 1060;
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
}

.sticky-toggle .btn-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(20, 20, 50, 0.18);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    font-weight: 600;
}

.sticky-toggle .btn-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(20, 20, 50, 0.2);
}

.sticky-toggle .btn-toggle .fa-icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

@media (max-width: 520px) {
    .sticky-toggle {
        right: 12px;
        bottom: 110px;
    }

    .sticky-toggle .btn-toggle {
        padding: 9px 12px;
        font-size: 13px;
    }

    .sticky-toggle .btn-text {
        display: none;
    }
}

#iframePaymentModalBody .sticky-toggle .btn-toggle {
    display: none !important;
}

/* Carousel prev/next consolidated earlier */

/* Product-action (consolidated and responsive) */
.product-action {
    display: flex;
    gap: 10px;
    margin-top: 12px
}

@media (max-width: 576px) {
    .product-action {
        flex-direction: column;
        gap: 8px
    }

    .add-to-cart-btn,
    .quantity-input {
        width: 100%
    }
}

/* Single definition for quantity input used across components */
.quantity-input {
    width: 70px;
    height: 40px;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    appearance: textfield;
    transition: border-color 0.2s ease-in-out
}

.quantity-input:focus {
    outline: none;
    border-color: #ffcc00;
    box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.2)
}

.add-to-cart-btn {
    background-color: #ffe600;
    color: #000;
    font-weight: 600;
    font-size: 15px;
    padding: 10px 20px;
    border: 2px solid #ffe600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.25s ease-in-out
}

.add-to-cart-btn:hover {
    background-color: #fff;
    color: #000;
    border-color: #ffe600;
    box-shadow: 0 0 0 2px rgba(255, 230, 0, 0.4)
}

/* Consolidated account menu and animations */
.accountMenu .dropdown-toggle {
    background-color: transparent;
    border: none;
    padding: 8px 12px;
    border-radius: 6px
}

.accountMenu .dropdown-toggle:hover {
    background-color: #f0f0f0
}

.accountMenu .dropdown-menu {
    min-width: 220px;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    padding: 10px 0;
    border: none
}

.accountMenu .dropdown-item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    font-size: 15px;
    color: #333
}

.accountMenu .dropdown-item i {
    margin-right: 10px;
    font-size: 16px;
    color: #666;
    width: 20px;
    text-align: center
}

.accountMenu .dropdown-item:hover {
    background-color: #f7f7f7
}

.accountMenu .dropdown-item[href="/cikis"] {
    color: #d32f2f
}

.accountMenu .dropdown-item[href="/cikis"] i {
    color: #d32f2f
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px)
    }

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

.quantityinput {
    padding: 8px !important
}

.ProductListDiv {
    margin-bottom: 15px;
    border-radius: 15px;
}

.ProductListDivImgage {
    text-align: center;
    margin: 0 8px;
}

.ProductListDivDesc {
    text-align: center;
    margin: 0 8px;
}

.ProductListDivQuantity {
    text-align: center;
    margin: 0 8px;
}

.ProductListDivQuantity button {
    background: var(--primaryColor);
    border: none;
    color: white;
    font-size: 20px;
    border-radius: 50%;
    width: 46px;
    height: 46px;
}

.ProductListDivQuantity button:hover {
    background: black;
}

.ProductListDivQuantity .fa-ban {
    color: #ccc;
    font-size: 36px
}


.ProductListDivQuantity input {
    font-size: 20px;
    text-align: center;
    width: 80px;
    border-radius: 7px;
    margin: 0px 20px;
    height: 42px;
    padding: 5px;
    border: 1px solid #ccc;
}

.text-left {
    text-align: left
}

.ProductListDivDesc a {
    font-weight: 500;
    font-size: 18px
}

/* All Categories Styles */

.page-title {
    font-size: 24px;
    font-weight: 600;
    color: #333;
}

.search-wrapper {
    max-width: 500px;
}

#categorySearch {
    border-radius: 4px;
    padding: 10px 16px;
    border: 1px solid #ddd;
    font-size: 15px;
}

#categorySearch:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

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

@media (max-width: 992px) {
    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .categories-grid {
        grid-template-columns: 1fr;
    }
}

.category-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.category-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.category-main {
    display: flex;
    align-items: center;
    padding: 16px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #f0f0f0;
}

.category-main:hover {
    background: #fafafa;
}

.category-image-wrapper {
    width: 50px;
    height: 50px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f5f5f5;
}

.category-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.category-info {
    margin-left: 14px;
    flex: 1;
}

.category-title {
    margin: 0 0 4px 0;
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

.sub-count {
    font-size: 13px;
    color: #777;
}

.subcategories-wrapper {
    padding: 10px;
}

.subcategories-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.subcategory-item {
    display: block;
    padding: 5px 10px;
    background: #fafafa;
    border-radius: 3px;
    text-decoration: none;
    color: #555;
    font-size: 14px;
    transition: all 0.2s ease;
}

.subcategory-item:hover {
    background: #f0f0f0;
    color: #007bff;
}

.subcategory-item span {
    display: inline;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.no-results {
    text-align: center;
    padding: 40px 20px;
    color: #999;
}

.search-highlight {
    background-color: #fff3cd;
    padding: 1px 3px;
    border-radius: 2px;
    display: inline;
    white-space: normal;
}

.category-title,
.subcategory-item span {
    word-break: break-word;
    white-space: normal;
}

/* All Categories Styles End */

/* Yeni Ürün */
.badge-new {
    background: #4c4c4c;
    color: white;
}

/* Sağ üst köşe */
.product-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
}

/* ============================================
   MODERN TÜKENDİ (OUT OF STOCK) TASARIMI
   Köşe badge + hafif grayscale efekti
   ============================================ */

/* Tükendi Badge - Sol Alt Köşe */
.out-of-stock-overlay {
    position: absolute;
    bottom: 12px;
    left: 12px;
    top: auto;
    right: auto;
    transform: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 5;
    backdrop-filter: blur(4px);
}

/* Tükendi ikonu */
.out-of-stock-overlay::before {
    content: '\f00d';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
}

/* Tükendi olan ürün resmini hafif grileştir */
.product-image-container:has(.out-of-stock-overlay) img,
.image-box:has(.out-of-stock-overlay) img {
    filter: grayscale(40%) opacity(0.85);
    transition: filter 0.3s ease;
}

/* Hover'da grayscale kaldır */
.product-image-container:hover:has(.out-of-stock-overlay) img,
.image-box:hover:has(.out-of-stock-overlay) img {
    filter: grayscale(20%) opacity(0.95);
}

/* Tükendi Badge - Mobil Responsive */
@media (max-width: 576px) {

    .out-of-stock-overlay,
    .out-of-stock-overlay-favorite,
    .featured-product-card .out-of-stock-overlay {
        bottom: 8px;
        left: 8px;
        padding: 5px 10px;
        font-size: 10px;
        gap: 5px;
        border-radius: 5px;
    }

    .out-of-stock-overlay::before,
    .out-of-stock-overlay-favorite::before {
        width: 14px;
        height: 14px;
        font-size: 9px;
    }
}

/* :has() desteklemeyen tarayıcılar için fallback */
@supports not selector(:has(*)) {

    .out-of-stock-overlay~img,
    .out-of-stock-overlay+img {
        filter: grayscale(40%) opacity(0.85);
    }
}

/* ============================================
   MODERN TÜKENDİ TASARIMI - SON
   ============================================ */

/* Ürün resmi container - global */
.product-image-container {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    padding: 12px;
    box-sizing: border-box;
}

/* Bootstrap .img-fluid override - specificity 0,1,1 > 0,1,0 */
.product-image-container img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

.favorite-heart {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0;
    transform: scale(0.8);
}

.product-image-container:hover .favorite-heart,
.product-image-container .favorite-heart.favorite-visible {
    opacity: 1;
    transform: scale(1);
}

.favorite-heart:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.1);
}

.favorite-heart i {
    font-size: 18px;
    color: var(--primaryColor);
    transition: all 0.2s ease;
}

.favorite-heart.favorite-active i {
    color: var(--primaryColor);
}

.favorite-heart:not(.favorite-active) i {
    color: #999;
}

.favorite-heart:hover i {
    transform: scale(1.2);
}

.alt-banner-container {
    margin: 20px 0;
}

.alt-banner-item {
    /* Tema grid'iyle uyum: .row negatif margin -8px (app.css), item padding da 8px
       olmalı ki satır kenarları hero ile aynı hizada otursun (10px'te 2px içeri kayıyordu). */
    padding: 8px;
}

.alt-banner-item img {
    width: 100%;
    height: auto;
    /* Hero ve yan bannerlarla aynı yuvarlaklık (tek sapan buydu) */
    border-radius: 12px;
    display: block;
}

/* Çoklu-kolon banner satırlarında görselleri eşit yüksekliğe getir → hizalama.
   Kullanıcı tercihi: kırparak doldur (cover). Tam-genişlik tek banner (col-12)
   hariç tutulur; tek görselde hizalama sorunu yok, gereksiz kırpma önlenir.
   NOT: ResimGenislik/Yukseklik bilinen bannerlarda Index.cshtml (AltBannerAspectStyles)
   aynı satırdaki gerçek oranların medyanını inline style="aspect-ratio:.." olarak basar
   ve bu sabit 5/8 değerini ezer — bu kural yalnızca boyutu bilinmeyen eski bannerlar
   için fallback'tir. */
.alt-banner-item:not(.col-12) img {
    aspect-ratio: 5 / 8;
    /* portre katalog kartı oranı — tek satırlık, kolayca ayarlanır */
    object-fit: cover;
    /* kutuyu kırparak doldurur, oran korunur */
}

.banner-group-title {
    font-size: 24px;
    font-weight: bold;
    margin: 30px 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #eee;
}

.vitrin-nav-buttons {
    display: flex;
    gap: 10px;
}

.vitrin-nav-btn {
    width: 40px;
    height: 40px;
    border: 2px solid #007bff;
    background: white;
    color: #007bff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 18px;
    font-weight: bold;
}

.vitrin-nav-btn:hover {
    background: #007bff;
    color: white;
    transform: scale(1.1);
}

.vitrin-nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.vitrin-nav-btn:disabled:hover {
    background: white;
    color: #007bff;
    transform: none;
}

.vitrin-slider {
    overflow: hidden;
    position: relative;
}

.vitrin-slider-content {
    display: flex;
    transition: transform 0.5s ease;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.vitrin-slider-content::-webkit-scrollbar {
    display: none;
}

.vitrin-slider-content .featured-product-card {
    flex: 0 0 auto;
    width: 280px;
}

@media (max-width: 768px) {
    .vitrin-slider-content .featured-product-card {
        width: 250px;
    }
}

@media (max-width: 576px) {
    .vitrin-slider-content .featured-product-card {
        width: 220px;
    }
}

/* Favorites page styles */

.favorites-page {
    padding: 40px 0;
    background-color: #f8f9fa;
}

.favorites-header {
    background: white;
    padding: 30px;
    border-radius: 10px;
    margin-bottom: 30px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.favorites-header h2 {
    margin: 0;
    color: #333;
    font-weight: 700;
    font-size: 28px;
}

.favorites-count {
    color: #666;
    font-size: 16px;
    margin-top: 8px;
}

.favorite-product-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.favorite-product-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-4px);
}

.favorite-product-image {
    position: relative;
    height: 250px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 15px;
}

.favorite-product-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.favorite-product-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--primaryColor);
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    z-index: 2;
}

.favorite-remove-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 3;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.favorite-remove-btn:hover {
    background: var(--primaryColor);
    transform: scale(1.1);
}

.favorite-remove-btn:hover i {
    color: white;
}

.favorite-remove-btn i {
    color: var(--primaryColor);
    font-size: 18px;
    transition: color 0.3s ease;
}

/* Favoriler sayfası için tükendi badge */
.out-of-stock-overlay-favorite {
    position: absolute;
    bottom: 12px;
    left: 12px;
    top: auto;
    right: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 1;
}

.out-of-stock-overlay-favorite::before {
    content: '\f00d';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
}

.favorite-product-info {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.favorite-product-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    line-height: 1.4;
    min-height: 44px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.favorite-product-title a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.favorite-product-title a:hover {
    color: #007bff;
}

.favorite-product-variant {
    font-size: 13px;
    color: #666;
    margin-bottom: 10px;
    padding: 6px 10px;
    background: #f8f9fa;
    border-radius: 6px;
    display: inline-block;
}

.favorite-product-price {
    margin-top: auto;
    padding-top: 15px;
}

.favorite-price-current {
    font-size: 20px;
    font-weight: 700;
    color: var(--primaryColor);
}

.favorite-price-original {
    font-size: 14px;
    color: #999;
    text-decoration: line-through;
    margin-left: 8px;
}

.favorite-price-normal {
    font-size: 20px;
    font-weight: 700;
    color: #333;
}

.favorite-product-actions {
    margin-top: 15px;
    display: flex;
    gap: 10px;
}

.favorite-btn-add-cart {
    flex: 1;
    background: #007bff;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

.favorite-btn-add-cart:hover {
    background: #0056b3;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.favorite-btn-add-cart:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
}

.empty-favorites {
    text-align: center;
    padding: 80px 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.empty-favorites-icon {
    font-size: 80px;
    color: #ddd;
    margin-bottom: 20px;
}

.empty-favorites h3 {
    color: #333;
    margin-bottom: 10px;
}

.empty-favorites p {
    color: #666;
    margin-bottom: 30px;
}

.empty-favorites a {
    display: inline-block;
    background: #007bff;
    color: white;
    padding: 12px 30px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.empty-favorites a:hover {
    background: #0056b3;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.favorite-stock-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 10px;
}

.stock-in {
    background: #d4edda;
    color: #155724;
}

.stock-out {
    background: #f8d7da;
    color: #721c24;
}

/* Favorites page styles end */

/* Whatsapp share */

.whatsapp-share-container {
    margin-top: 15px;
}

.whatsapp-share-container a {
    transition: all 0.3s ease;
    font-weight: 500;
    background-color: #25D366;
    border-color: #25D366;
}

.whatsapp-share-container a:hover {
    background-color: #128C7E !important;
    border-color: #128C7E !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(37, 211, 102, 0.3);
}

.whatsapp-share-container a i {
    font-size: 20px;
}

/* Whatsapp share end */

.main-menu__list .submenu span {
    color: white !important;
    font-size: 13px;
}

/* Mobil Filtre Toggle Butonu */
.mobile-filter-toggle {
    display: none;
    width: 100%;
    padding: 12px 16px;
    background: var(--primaryColor);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    margin-bottom: 16px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.mobile-filter-toggle:hover {
    background: var(--primary-hover);
}

.mobile-filter-toggle i {
    margin-right: 8px;
    transition: transform 0.3s ease;
}

.mobile-filter-toggle.active i {
    transform: rotate(180deg);
}

/* Mobil görünümde sidebar */
.mobile-sidebar-wrapper {
    margin-bottom: 20px;
}

@media screen and (max-width: 1199.98px) {
    #mobileFilterSidebar:not(.show) {
        display: none !important;
    }

    .mobile-filter-toggle {
        display: block !important;
    }
}

/* Desktop görünümde sidebar her zaman görünür */
@media screen and (min-width: 1200px) {
    #mobileFilterSidebar {
        display: block !important;
    }

    .mobile-filter-toggle {
        display: none !important;
    }

}

@media(max-width:576px) {
    .container-fluid {
        padding: 0 5vw;
        width: 100%;
    }
}

.header-buttons i {
    font-size: 20px
}

.header-top>div>div>div {
    height: 19px;
    line-height: 13px;
}

.account .form-control {
    font-size: 15px;
    padding: 12px
}

/* DataTables Arama Kutusu */
.dataTables_filter {
    margin-bottom: 15px;
}

.dataTables_filter input {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dataTables_filter input:focus {
    border-color: var(--primaryColor);
    box-shadow: 0 0 0 3px rgba(51, 51, 51, 0.1);
    outline: none;
}

.dataTables_filter input::placeholder {
    color: #999;
}

/* DataTables genel düzenlemeler */
.dataTables_wrapper .row {
    margin-bottom: 10px;
}

.dt-buttons .btn-primary {
    background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
    border: none;
}

.dt-buttons .btn-primary:hover {
    background: linear-gradient(135deg, #0b5ed7 0%, #0a58ca 100%);
}

/* Görsel arama kutusu stilleri: "ARAMA KUTUSU YENİDEN TASARIM" bloğunda (eski kopya kaldırıldı) */

/* ===========================================
   İndirim Etiketi - Köşeyi düzelt
   =========================================== */
.featured-product-card .image-box {
    overflow: hidden;
    border-radius: 8px 8px 0 0;
}

.featured-product-card .image-box .sale-label {
    border-radius: 8px 0 6px 0;
}

.shop-detail .detail-wrapper .product-image-container .gallery-main img {
    background: white !important;
}

/* ===========================================
   MODERN HEADER - 2024 REDESIGN
   =========================================== */

/* CSS Variables for Header */
:root {
    --header-bg: #ffffff;
    --header-text: #333333;
    --header-accent: var(--primaryColor);
    --header-secondary: #000000;
    --header-border: #e5e5e5;
    --header-hover: #f8f9fa;
    --header-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* ===== HEADER CONTAINER ===== */
.modern-header {
    background: var(--header-bg);
    box-shadow: var(--header-shadow);
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
}

.modern-header-inner {
    max-width: 1400px;
    margin: 0 auto;
}

/* ===== HEADER TOP ROW ===== */
.modern-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    gap: 24px;
    border-bottom: 1px solid var(--header-border);
    max-width: 1400px;
    margin: 0 auto;
}

/* Logo */
.modern-header-logo {
    flex-shrink: 0;
}

.modern-header-logo img {
    height: var(--header-logo-height, 48px);
    width: auto;
    object-fit: contain;
}

/* Search Box */
.modern-header-search {
    flex: 0 1 520px;
    min-width: 280px;
}

.modern-search-form {
    position: relative;
    display: flex;
    align-items: center;
}

/* Input/buton stilleri: "ARAMA KUTUSU YENİDEN TASARIM" bloğunda (eski kopya kaldırıldı) */

/* ===== CURRENCY PILLS ===== */
.modern-currency-pills {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.currency-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: #f5f5f5;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--header-secondary);
    transition: all 0.2s ease;
}

.currency-pill:hover {
    background: #e0e0e0;
}

.currency-pill .currency-symbol {
    color: var(--header-accent);
    font-weight: 700;
}

/* ===== HEADER ACTIONS ===== */
.modern-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.header-action-btn {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: var(--header-text);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    text-decoration: none;
}

.header-action-btn:hover {
    background: var(--header-hover);
    color: var(--header-accent);
}

.header-action-btn .badge {
    position: absolute;
    top: 0px;
    right: 0px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--header-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Cart Button Special */
.header-cart-btn {
    background: var(--header-secondary);
    color: #fff;
}

.header-cart-btn:hover {
    background: var(--header-accent);
    color: #fff;
}

/* ===== ACCOUNT SUMMARY DROPDOWN ===== */
.account-summary-wrapper {
    position: relative;
}

.account-summary-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--header-secondary);
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.account-summary-btn:hover {
    background: var(--header-accent);
}

.account-summary-btn i {
    font-size: 14px;
}

.account-summary-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 320px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1001;
    overflow: hidden;
}

.account-summary-wrapper:hover .account-summary-panel,
.account-summary-panel.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.account-panel-header {
    background: linear-gradient(135deg, var(--header-secondary), #333);
    color: #fff;
    padding: 16px 20px;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.account-panel-header i {
    font-size: 16px;
}

.account-panel-section {
    padding: 16px 20px;
    border-bottom: 1px solid var(--header-border);
}

.account-panel-section:last-child {
    border-bottom: none;
}

.account-panel-section h6 {
    font-size: 11px;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Balance Cards */
.balance-cards {
    display: grid;
    /* auto-fit: tek kart tüm satırı doldurur (örn. Bay.t — sadece Cari Bakiye),
       iki kart varken (TL + Döviz) yine iki kolon olur. */
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
}

.balance-card {
    background: #f8f9fa;
    padding: 12px;
    border-radius: 8px;
    text-align: center;
}

/* Panelde tek bakiye kartı kaldığında (döviz kapalı / Bay.t) daha dolgun göster */
.balance-card:only-child {
    padding: 18px 16px;
}

.balance-card:only-child .value {
    font-size: 20px;
}

.balance-card .label {
    font-size: 11px;
    color: #666;
    margin-bottom: 4px;
}

.balance-card .value {
    font-size: 15px;
    font-weight: 700;
    color: var(--header-secondary);
}

.balance-card.warning .value {
    color: var(--header-accent);
}

/* Info Rows */
.account-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.account-info-row .label {
    font-size: 13px;
    color: #666;
}

.account-info-row .value {
    font-size: 13px;
    font-weight: 600;
    color: var(--header-secondary);
}

.account-info-row.warning .value {
    color: var(--header-accent);
}

/* Representative Card */
.rep-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f8f9fa;
    padding: 12px;
    border-radius: 8px;
}

.rep-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--header-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.rep-avatar.rep-avatar-photo {
    background: transparent;
    padding: 0;
    overflow: hidden;
}

.rep-avatar.rep-avatar-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.rep-info {
    flex: 1;
}

.rep-info .name {
    font-weight: 600;
    font-size: 14px;
    color: var(--header-secondary);
}

.rep-info .contact-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.rep-info .contact-details .contact-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #555;
    text-decoration: none;
    padding: 6px 10px;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    transition: all 0.2s ease;
}

.rep-info .contact-details .contact-item:hover {
    background: var(--header-accent);
    color: #fff;
    border-color: var(--header-accent);
}

.rep-info .contact-details .contact-item i {
    font-size: 13px;
    width: 16px;
    text-align: center;
    color: var(--header-accent);
}

.rep-info .contact-details .contact-item:hover i {
    color: #fff;
}

.rep-info .contact-details .contact-item span {
    font-size: 12px;
    word-break: break-all;
}

/* ===== HEADER BOTTOM / NAVIGATION ===== */
.modern-header-nav {
    background: var(--header-secondary);
    padding: 0;
}

.modern-nav-container {
    display: flex;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ===== MEGA MENU ===== */
/* position:static → dropdown'ın hizalandığı kutu .modern-header (sticky) olur, wrapper değil.
   Tip-2 (.img-grid-nav-item) ve Tip-3 (.hier-mega-item) ile aynı desen. */
.mega-menu-wrapper {
    position: static;
}

.mega-menu-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    background: var(--header-accent);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.mega-menu-trigger:hover {
    background: var(--primary-hover);
}

.mega-menu-trigger i:last-child {
    font-size: 10px;
    transition: transform 0.3s ease;
}

.mega-menu-wrapper:hover .mega-menu-trigger i:last-child {
    transform: rotate(180deg);
}

/* position:absolute + top:100% → panel her zaman header'ın (sticky) hemen altına yapışır.
   Eskiden position:fixed + top:auto idi: tarayıcı "auto" konumu YALNIZCA ilk layout'ta hesaplar,
   scroll'da güncellemez. Sayfa aşağı kaydırılınca header yukarı yapışıyor ama panel ilk hesaplanan
   viewport konumunda donup kaldığı için arada topbar yüksekliği kadar boşluk kalıyordu.
   width:100vw da kaldırıldı — 100vw scrollbar'ı da sayıp yatay taşma yaratıyor; left/right:0 yeterli. */
.mega-menu-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 1000;
    max-height: 70vh;
    overflow-y: auto;
}

.mega-menu-wrapper:hover .mega-menu-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mega-menu-content {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 25px;
    max-width: 1600px;
    margin: 0 auto;
    padding: 30px 40px;
}

/* Custom scrollbar for mega menu */
.mega-menu-content::-webkit-scrollbar {
    width: 6px;
}

.mega-menu-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.mega-menu-content::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.mega-menu-content::-webkit-scrollbar-thumb:hover {
    background: var(--header-accent);
}

.mega-menu-column {
    padding: 0 15px;
    border-right: 1px solid #eee;
}

.mega-menu-column:last-child {
    border-right: none;
}

.mega-menu-item {
    margin-bottom: 16px;
}

.mega-menu-item:last-child {
    margin-bottom: 0;
}

.mega-menu-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    color: var(--header-secondary);
    text-decoration: none;
    font-weight: 600;
    font-size: 12px;
    transition: color 0.2s ease;
}

.mega-menu-link i {
    color: var(--header-accent);
    font-size: 11px;
    width: 16px;
}

.mega-menu-link:hover {
    color: var(--header-accent);
}

.mega-menu-sub {
    list-style: none;
    padding: 0;
    margin: 3px 0 0 20px;
}

.mega-menu-sub li {
    margin-bottom: 2px;
}

.mega-menu-sub a {
    color: #666;
    text-decoration: none;
    font-size: 11px;
    transition: all 0.2s ease;
    display: block;
    padding: 1px 0;
}

.mega-menu-sub a:hover {
    color: var(--header-accent);
    padding-left: 5px;
}

.mega-menu-sub .view-all {
    color: var(--header-accent);
    font-weight: 500;
}

.mega-menu-footer {
    background: #f8f9fa;
    padding: 12px 20px;
    border-radius: 0 0 12px 12px;
    border-top: 1px solid #eee;
}

.view-all-categories {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--header-secondary);
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    transition: color 0.2s ease;
}

.view-all-categories:hover {
    color: var(--header-accent);
}

/* ===== STATIC NAV LINKS ===== */
.static-nav-links {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    margin-left: 10px;
}

.static-nav-links li {
    margin: 0 2px;
}

.static-nav-links li a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    color: #fff;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.2px;
    border-radius: 8px;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
    position: relative;
}

.static-nav-links li a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
}

.static-nav-links li a:focus-visible {
    outline: 2px solid var(--header-accent);
    outline-offset: 2px;
}

/* Aktif sayfa görünümü (controller/JS class="active" verirse) */
.static-nav-links li a.active {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

/* ===== HEADER BİLGİLENDİRME MESAJLARI ===== */
.header-announcement-wrapper {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    margin-left: 12px;
    overflow: hidden;
}

.header-announcement {
    color: #fff;
    font-size: 14px;
    line-height: 1.4;
}

.header-announcement a {
    color: var(--header-accent, #fff);
    text-decoration: underline;
}

.header-announcement a:hover {
    opacity: 0.8;
}

/* Bilgilendirme mesajının tamamına link (HeaderBilgilendirme.Link doluysa) —
   "Kategoriler" butonu ile aynı dikey yükseklik ve dikdörtgen bütünlükte buton.
   Parent .header-announcement-static'in 10px 15px padding'i nefes alanı olarak korunur. */
/* Link içerdiğinde static wrapper'ın padding'i sıfırlanır — header üzerinde dış gri alan görünmez, sadece düz text kalır. Normal HTML mesajları için full padding korunur. */
.header-announcement-static:has(.header-announcement-link) {
    padding: 0;
}

.header-announcement .header-announcement-link,
.header-announcement .header-announcement-link:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 22px;
    box-sizing: border-box;
    background: transparent;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.3px;
    line-height: 1;
    text-transform: none;
    transition: color 0.2s ease;
}

.header-announcement .header-announcement-link:hover,
.header-announcement .header-announcement-link:focus {
    background: transparent;
    color: #fff;
    text-decoration: none;
    opacity: 0.85;
    transform: none;
}

/* Sabit Stil */
.header-announcement-static {
    padding: 10px 15px;
}

/* Kayan Yazı (Marquee) Stil */
.header-announcement-marquee {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.header-announcement-marquee .marquee-content {
    display: inline-flex;
    animation: marquee-scroll var(--marquee-duration, 30s) linear infinite;
}

.header-announcement-marquee .marquee-item {
    display: inline-block;
    padding: 10px 50px 10px 0;
}

@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.header-announcement-marquee:hover .marquee-content {
    animation-play-state: paused;
}

/* Slayt (Fade) Stil — slaytlar grid hücresinde üst üste yığılır, en geniş mesaja göre boyutlanır */
.header-announcement-slider {
    display: grid;
    width: 100%;
}

.header-announcement-slider .announcement-slide {
    grid-area: 1 / 1;
    padding: 10px 15px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0.5s;
}

.header-announcement-slider .announcement-slide.active {
    opacity: 1;
    visibility: visible;
}

/* Animasyonlu (Daktilo / Yazı Efekti) Stil */
.header-announcement-typing {
    padding: 10px 15px;
    white-space: nowrap;
}

.header-announcement-typing .typing-cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 2px;
    background: currentColor;
    vertical-align: text-bottom;
    animation: typing-blink 0.7s steps(1) infinite;
}

@keyframes typing-blink {

    0%,
    50% {
        opacity: 1;
    }

    50.01%,
    100% {
        opacity: 0;
    }
}

/* Mobilde gizle */
@media (max-width: 991px) {
    .header-announcement-wrapper {
        display: none;
    }
}

/* ===== TÜM KATEGORİLER ÖZEL BUTON ===== */
.static-nav-links li.nav-btn-item {
    margin-left: 10px;
}

.static-nav-links li.nav-btn-item a {
    padding: 0;
}

.static-nav-links li.nav-btn-item a::after {
    display: none;
}

.nav-all-categories-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 10px 20px !important;
    background: linear-gradient(135deg, var(--header-accent) 0%, var(--primary-hover) 100%);
    color: #fff !important;
    border-radius: 25px;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(var(--primaryColor-rgb), 0.3);
    transition: all 0.3s ease !important;
    border: 2px solid transparent;
}

.nav-all-categories-btn i {
    font-size: 14px;
    transition: transform 0.3s ease;
}

.nav-all-categories-btn:hover {
    background: linear-gradient(135deg, var(--primary-hover) 0%, var(--header-accent) 100%);
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--primaryColor-rgb), 0.4);
}

.nav-all-categories-btn:hover i {
    transform: rotate(90deg);
}

/* Alternatif: Çerçeveli versiyon (outline style) */
.nav-all-categories-btn.outline-style {
    background: transparent;
    border: 2px solid var(--header-accent);
    color: var(--header-accent) !important;
    box-shadow: none;
}

.nav-all-categories-btn.outline-style:hover {
    background: var(--header-accent);
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(var(--primaryColor-rgb), 0.3);
}

/* Old menu styles - keep for compatibility */
.modern-nav-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    margin: 0;
    padding: 0;
}

.modern-nav-menu>li>a {
    display: block;
    padding: 14px 20px;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    position: relative;
}

.modern-nav-menu>li>a:hover,
.modern-nav-menu>li>a.active {
    background: rgba(255, 255, 255, 0.1);
    color: var(--header-accent);
}

.modern-nav-menu>li>a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: var(--header-accent);
    transition: width 0.3s ease;
}

.modern-nav-menu>li>a:hover::after,
.modern-nav-menu>li>a.active::after {
    width: 100%;
}

/* ===== MOBILE BOTTOM NAVIGATION ===== */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.1);
    z-index: 999;
    padding: 8px 0;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
}

.mobile-bottom-nav-inner {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    text-decoration: none;
    color: #666;
    font-size: 11px;
    font-weight: 500;
    transition: all 0.2s ease;
    border-radius: 8px;
}

.mobile-nav-item i {
    font-size: 20px;
}

.mobile-nav-item:hover,
.mobile-nav-item.active {
    color: var(--header-accent);
    background: rgba(var(--primaryColor-rgb), 0.05);
}

.mobile-nav-item.active i {
    transform: scale(1.1);
}

/* ===== MOBILE HEADER TOGGLE (Hamburger Menü) ===== */
.mobile-header-toggle {
    display: none;
    width: 44px;
    height: 44px;
    border: none;
    background: var(--mobile-toggle-bg, var(--primaryColor));
    color: var(--mobile-toggle-icon-color, #ffffff);
    font-size: 22px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.mobile-header-toggle:hover {
    opacity: 0.85;
    transform: scale(1.02);
}

.mobile-header-toggle i {
    color: inherit;
}

/* ===== RESPONSIVE BREAKPOINTS ===== */

/* Tablet and below */
@media (max-width: 991px) {

    /* 3 Satırlı Mobil Header Layout */
    .modern-header-top {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "menu logo ."
            "actions actions actions"
            "search search search";
        gap: 12px 8px;
        padding: 12px 16px;
        max-width: 100%;
        align-items: center;
    }

    /* Satır 1: Menü Butonu (Sol - Varsayılan) */
    .mobile-header-toggle {
        grid-area: menu;
        display: flex;
        align-items: center;
        justify-content: center;
        order: 0;
    }

    /* Toggle Sağda - Grid yapısını değiştir */
    .mobile-toggle-right .modern-header-top {
        grid-template-areas:
            ". logo menu"
            "actions actions actions"
            "search search search";
    }

    .mobile-toggle-right .mobile-header-toggle {
        justify-self: end;
    }

    /* ===== MOBİL LOGO POZİSYONU AYARLARI ===== */

    /* Logo Sol (Toggle Sağda olmalı - admin panelinde çakışma engellenir) */
    .mobile-logo-left.mobile-toggle-right .modern-header-top {
        grid-template-areas:
            "logo . menu"
            "actions actions actions"
            "search search search";
    }

    .mobile-logo-left .modern-header-logo {
        justify-self: start;
    }

    /* Logo Sağ (Toggle Solda olmalı) */
    .mobile-logo-right:not(.mobile-toggle-right) .modern-header-top {
        grid-template-areas:
            "menu . logo"
            "actions actions actions"
            "search search search";
    }

    .mobile-logo-right .modern-header-logo {
        justify-self: end;
    }

    /* Logo Orta - varsayılan, ek kural gerekmez */
    .mobile-logo-center .modern-header-logo {
        justify-self: center;
    }

    /* ===== MOBİL LOGO POZİSYONU AYARLARI SON ===== */

    /* Satır 1: Logo (Orta) */
    .modern-header-logo {
        grid-area: logo;
        justify-self: center;
        order: 1;
    }

    .modern-header-logo img {
        height: var(--header-logo-height-mobile, 40px);
    }

    /* Satır 2: İkonlar (Ortalanmış) */
    .modern-header-actions {
        grid-area: actions;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 12px;
        order: 2;
        width: 100%;
        padding: 8px 0;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Mobilde menü toggle'ı actions'dan çıkar - zaten grid'de ayrı */
    .modern-header-actions .mobile-header-toggle {
        display: none;
    }

    /* Satır 3: Arama Kutusu (Full Width) */
    .modern-header-search {
        grid-area: search;
        width: 100%;
        max-width: 100%;
        order: 3;
    }

    /* Döviz Pills gizle */
    .modern-currency-pills {
        display: none;
    }

    /* Desktop Navigation gizle */
    .modern-header-nav {
        display: none;
    }

    /* Hesap Özeti Buton - Sadece ikon */
    .account-summary-btn {
        width: 42px;
        height: 42px;
        padding: 0;
        border-radius: 10px;
        justify-content: center;
        background: var(--primary-color, rgba(255, 255, 255, 0.15));
        color: #fff;
    }

    .account-summary-btn i {
        color: #fff;
        font-size: 16px;
    }

    .account-summary-btn span {
        display: none;
    }

    /* Header Action Butonları - Tüm ikonlar görünür */
    .header-action-btn {
        width: 42px;
        height: 42px;
        font-size: 16px;
        background: var(--primary-color, rgba(255, 255, 255, 0.15));
        border-radius: 10px;
        color: #fff;
    }

    .header-action-btn i {
        color: #fff;
    }

    .header-action-btn:hover,
    .account-summary-btn:hover {
        background: var(--header-accent);
        color: #fff;
    }

    /* Dropdown Toggle */
    .modern-header-actions .dropdown .header-action-btn {
        background: var(--primary-color, rgba(255, 255, 255, 0.15));
        color: #fff;
    }

    /* Menü Toggle Butonu - CSS değişkenleri kullanılıyor (base style'da tanımlı) */
}

/* Mobile (767px ve altı) */
@media (max-width: 767px) {
    .mobile-bottom-nav {
        display: block;
    }

    body {
        padding-bottom: 70px;
    }

    .modern-header-top {
        padding: 10px 12px;
        gap: 10px 6px;
    }

    /* Logo biraz daha büyük */
    .modern-header-logo img {
        height: var(--header-logo-height-mobile, 40px);
    }

    /* Arama kutusu responsive kuralları: "ARAMA KUTUSU YENİDEN TASARIM" bloğunda */

    /* İkon butonları */
    .header-action-btn {
        width: 40px;
        height: 40px;
        font-size: 15px;
    }

    .account-summary-btn {
        width: 40px;
        height: 40px;
    }

    /* Hesap Özeti Panel - Alt kısımda */
    .account-summary-panel {
        position: fixed;
        top: auto;
        bottom: 80px;
        right: 10px;
        left: 10px;
        width: auto;
        max-height: 60vh;
        overflow-y: auto;
    }

    /* İkinci satır border'larını incelt */
    .modern-header-actions {
        padding: 6px 0;
        gap: 10px;
    }
}

/* Küçük Mobil (480px ve altı) */
@media (max-width: 480px) {
    .modern-header-top {
        padding: 8px 10px;
        gap: 8px 4px;
    }

    .modern-header-actions {
        gap: 6px;
    }

    .header-action-btn {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .account-summary-btn {
        width: 36px;
        height: 36px;
    }

    .modern-header-logo img {
        height: var(--header-logo-height-mobile, 40px);
    }

    /* Menü toggle butonu */
    .mobile-header-toggle {
        width: 38px;
        height: 38px;
    }
}

/* ===== MODERN MOBILE NAVIGATION DRAWER ===== */
.mobile-nav__wrapper {
    z-index: 9998 !important;
}

.mobile-nav__wrapper .mobile-nav__content {
    background-color: var(--mobile-nav-bg, #fff) !important;
    color: var(--mobile-nav-text, #333);
    z-index: 9999 !important;
    width: 320px !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
}

/* ===== MODERN MOBILE NAV - HEADER ===== */
.modern-mobile-nav .mobile-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--mobile-nav-bg, #fff);
    position: sticky;
    top: 0;
    z-index: 10;
    gap: 12px;
}

.modern-mobile-nav .mobile-nav-close {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border: none;
    background: color-mix(in srgb, var(--mobile-nav-text, #333) 10%, transparent);
    color: var(--mobile-nav-text, #333);
    border-radius: 10px;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modern-mobile-nav .mobile-nav-close:hover {
    background: var(--mobile-nav-accent, var(--primaryColor));
    color: var(--mobile-nav-bg, #fff);
    transform: rotate(90deg);
}

.modern-mobile-nav .mobile-nav-logo {
    flex: 1;
    display: flex;
    justify-content: center;
    padding-right: 40px;
    /* Close buton genişliği kadar sağa padding - gerçek ortalama için */
}

.modern-mobile-nav .mobile-nav-logo img {
    height: var(--mobile-nav-logo-height, 50px);
    width: auto;
    max-width: 180px;
    object-fit: contain;
}

/* ===== USER SECTION ===== */
.modern-mobile-nav .mobile-nav-user-section {
    padding: 16px 20px;
    background: color-mix(in srgb, var(--mobile-nav-bg, #fff) 92%, #000);
    border-bottom: 1px solid color-mix(in srgb, var(--mobile-nav-text, #333) 15%, transparent);
}

.modern-mobile-nav .mobile-nav-greeting {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--mobile-nav-text, #333);
    font-size: 14px;
    margin-bottom: 12px;
}

.modern-mobile-nav .mobile-nav-greeting i {
    font-size: 24px;
    color: var(--mobile-nav-accent, var(--header-accent));
}

.modern-mobile-nav .mobile-nav-greeting strong {
    color: var(--mobile-nav-text, #1a1a2e);
}

.modern-mobile-nav .mobile-nav-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.modern-mobile-nav .mobile-stat-card {
    background: #fff;
    border-radius: 10px;
    padding: 12px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid #e9ecef;
}

.modern-mobile-nav .mobile-stat-card .stat-label {
    display: block;
    font-size: 11px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.modern-mobile-nav .mobile-stat-card .stat-value {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #1a1a2e;
}

.modern-mobile-nav .mobile-stat-card.currency {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 10px;
}

/* Limit, bakiye kartlarının altında tam genişlikte durur. */
.modern-mobile-nav .mobile-stat-card.limit {
    grid-column: 1 / -1;
}

/* Döviz kartı gizliyken (değer yok / döviz kapalı) Bakiye TL satırı tek başına doldurur;
   döviz görünür olunca (app.js .has-doviz ekler) ikisi yan yana gelir. */
.modern-mobile-nav .mobile-stat-card.tl-balance {
    grid-column: 1 / -1;
}

.modern-mobile-nav .mobile-nav-stats.has-doviz .mobile-stat-card.tl-balance {
    grid-column: auto;
}

.modern-mobile-nav .mobile-stat-card .currency-item {
    font-size: 13px;
    color: #333;
}

.modern-mobile-nav .mobile-stat-card .currency-item .symbol {
    color: var(--header-accent);
    font-weight: 600;
}

/* ===== SEARCH BOX ===== */
.modern-mobile-nav .mobile-nav-search {
    padding: 16px 20px;
    background: var(--mobile-nav-bg, #fff);
    border-bottom: 1px solid #e9ecef;
}

.modern-mobile-nav .mobile-nav-search .search-form {
    position: relative;
    display: flex;
    align-items: center;
}

.modern-mobile-nav .mobile-nav-search .search-input {
    width: 100%;
    padding: 12px 46px 12px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    font-size: 14px;
    background: #f8f9fa;
    transition: all 0.3s ease;
}

.modern-mobile-nav .mobile-nav-search .search-input:focus {
    outline: none;
    border-color: var(--header-accent);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(var(--primaryColor-rgb), 0.1);
}

/* ===== SECTION STYLES ===== */
.modern-mobile-nav .mobile-nav-section {
    padding: 16px 20px;
    border-bottom: 1px solid color-mix(in srgb, var(--mobile-nav-text, #333) 15%, transparent);
}

.modern-mobile-nav .mobile-nav-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--mobile-nav-text, #333);
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.modern-mobile-nav .mobile-nav-section-title i {
    color: var(--header-accent);
}

/* ===== CATEGORY LIST ===== */
.modern-mobile-nav .mobile-category-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.modern-mobile-nav .mobile-category-item {
    border-bottom: 1px solid color-mix(in srgb, var(--mobile-nav-text, #333) 10%, transparent);
}

.modern-mobile-nav .mobile-category-item:last-child {
    border-bottom: none;
}

.modern-mobile-nav .mobile-category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--mobile-category-header-text, var(--mobile-nav-text, #333));
}

.modern-mobile-nav .mobile-category-link {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    color: inherit;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s ease;
}

/* Submenu linkleri için MobileNavTextColor */
.modern-mobile-nav .mobile-category-submenu .mobile-category-link {
    color: var(--mobile-nav-text, #333);
}

.modern-mobile-nav .mobile-category-link:hover {
    color: var(--header-accent);
}

.modern-mobile-nav .mobile-category-link .category-icon {
    display: none;
}

/* category-icon gizlendi - hover stili gereksiz */

.modern-mobile-nav .mobile-category-toggle {
    width: 36px;
    height: 36px;
    border: none;
    background: #f5f5f5;
    color: #666;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modern-mobile-nav .mobile-category-toggle:hover {
    background: var(--header-accent);
    color: #fff;
}

.modern-mobile-nav .mobile-category-toggle.expanded {
    background: var(--header-accent);
    color: #fff;
}

.modern-mobile-nav .mobile-category-toggle.expanded i {
    transform: rotate(90deg);
}

.modern-mobile-nav .mobile-category-toggle i {
    transition: transform 0.3s ease;
}

/* ===== SUBMENU ===== */
.modern-mobile-nav .mobile-category-submenu {
    list-style: none;
    margin: 0;
    padding: 0 0 8px 20px;
    display: none;
    background-color: var(--mobile-nav-bg, #fff) !important;
    color: var(--mobile-nav-text, #333);
    border-radius: 0 0 8px 8px;
}

.modern-mobile-nav .mobile-category-submenu.show {
    display: block;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

.modern-mobile-nav .mobile-category-submenu .mobile-category-item {
    border-bottom: none;
}


.modern-mobile-nav .mobile-category-submenu .mobile-category-link:hover {
    color: var(--header-accent);
}

/* Level styling */
.modern-mobile-nav .mobile-category-item.level-1 .mobile-category-link {
    padding-left: 15px;
}

.modern-mobile-nav .mobile-category-item.level-2 .mobile-category-link {
    padding-left: 30px;
}

/* ===== QUICK LINKS ===== */
.modern-mobile-nav .mobile-quick-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.modern-mobile-nav .mobile-quick-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 12px;
    background: #f8f9fa;
    border-radius: 12px;
    color: #333;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.modern-mobile-nav .mobile-quick-link:hover {
    background: #fff;
    border-color: var(--header-accent);
    color: var(--header-accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--primaryColor-rgb), 0.15);
}

.modern-mobile-nav .mobile-quick-link i {
    font-size: 20px;
    color: var(--header-accent);
}

/* ===== FOOTER ===== */
.modern-mobile-nav .mobile-nav-footer {
    margin-top: auto;
    padding: 20px;
    background: color-mix(in srgb, var(--mobile-nav-bg, #fff) 95%, #000);
    border-top: 1px solid color-mix(in srgb, var(--mobile-nav-text, #333) 15%, transparent);
}

.modern-mobile-nav .mobile-nav-contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.modern-mobile-nav .contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--mobile-nav-text, #333);
    opacity: 0.8;
    text-decoration: none;
    font-size: 13px;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.modern-mobile-nav .contact-item:hover {
    color: var(--header-accent);
}

.modern-mobile-nav .contact-item i {
    width: 32px;
    height: 32px;
    background: color-mix(in srgb, var(--mobile-nav-text, #333) 10%, var(--mobile-nav-bg, #fff));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mobile-nav-accent, var(--primaryColor));
    font-size: 14px;
}

.modern-mobile-nav .mobile-nav-social {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.modern-mobile-nav .social-link {
    width: 40px;
    height: 40px;
    background: color-mix(in srgb, var(--mobile-nav-text, #333) 10%, var(--mobile-nav-bg, #fff));
    border: 1px solid color-mix(in srgb, var(--mobile-nav-text, #333) 20%, transparent);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mobile-nav-text, #333);
    opacity: 0.7;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.modern-mobile-nav .social-link:hover {
    background: var(--mobile-nav-accent, var(--primaryColor));
    border-color: var(--mobile-nav-accent, var(--primaryColor));
    color: var(--mobile-nav-bg, #fff);
    opacity: 1;
    transform: translateY(-2px);
}

/* Hide old close button */
.mobile-nav__wrapper .mobile-nav__close {
    display: none !important;
}

/* Hide old logo-box */
.mobile-nav__wrapper .logo-box {
    display: none !important;
}

/* ===== HIDE OLD HEADER ELEMENTS ===== */
.modern-header .header-top,
.modern-header .modern-shortcuts {
    display: none !important;
}

/* ===== USER DROPDOWN MODERN STYLE ===== */
.modern-user-dropdown {
    min-width: 200px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    border: none;
    padding: 8px 0;
    margin-top: 10px;
}

.modern-user-dropdown .dropdown-item {
    padding: 10px 20px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s ease;
}

.modern-user-dropdown .dropdown-item:hover {
    background: var(--header-hover);
    color: var(--header-accent);
}

.modern-user-dropdown .dropdown-item i {
    width: 20px;
    text-align: center;
    color: #888;
}

.modern-user-dropdown .dropdown-item:hover i {
    color: var(--header-accent);
}

/* ===== ANIMATION ===== */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

.modern-header {
    animation: slideDown 0.3s ease;
}

/* ============================================================
   TİP 0: KLASİK YATAY MENÜ STİLLERİ
   ============================================================ */
.classic-nav-menu {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
    flex: 1;
}

.classic-nav-menu>li {
    position: relative;
}

.classic-nav-menu>li>a {
    display: block;
    padding: 12px 14px;
    color: #fff;
    font-size: var(--nav-font-size, 13px);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.classic-nav-menu>li>a:hover {
    color: var(--header-accent);
    background: var(--header-hover);
}

/* Chevron icon for dropdowns */
.classic-nav-menu>li.has-dropdown>a::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 9px;
    margin-left: 5px;
    transition: transform 0.2s ease;
    display: inline-block;
}

.classic-nav-menu>li.has-dropdown:hover>a::after {
    transform: rotate(180deg);
}

/* Classic Dropdown */
.classic-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    padding: 8px 0;
    list-style: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease;
    z-index: 1000;
}

.classic-nav-menu>li.has-dropdown:hover .classic-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.classic-dropdown li a {
    display: block;
    padding: 10px 20px;
    color: #333;
    font-size: var(--dropdown-font-size, 13px);
    text-decoration: none;
    transition: all 0.2s ease;
}

.classic-dropdown li a:hover {
    background: var(--header-hover);
    color: var(--header-accent);
    padding-left: 24px;
}

.classic-dropdown li a.view-all {
    color: var(--header-accent);
    font-weight: 600;
    border-top: 1px solid #eee;
    margin-top: 4px;
    padding-top: 12px;
}

/* Dropdown Divider */
.classic-dropdown li.dropdown-divider {
    height: 1px;
    margin: 8px 0;
    background: #eee;
    padding: 0;
}

/* Dropdown icon alignment */
.classic-dropdown li a i {
    width: 18px;
    text-align: center;
    color: var(--header-accent);
}

/* ============================================================
   TİP 2: RESİMLİ KATEGORİ GRİD STİLLERİ
   ============================================================ */
.image-category-wrapper {
    position: relative;
}

.image-category-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--header-accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.image-category-trigger:hover {
    background: var(--header-secondary);
}

.image-category-trigger i:last-child {
    font-size: 10px;
    transition: transform 0.2s ease;
}

.image-category-wrapper:hover .image-category-trigger i:last-child {
    transform: rotate(180deg);
}

/* Image Category Dropdown */
.image-category-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 900px;
    max-width: calc(100vw - 40px);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.25s ease;
    z-index: 1000;
    margin-top: 10px;
}

.image-category-wrapper:hover .image-category-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Image Category Grid */
.image-category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-height: 500px;
    overflow-y: auto;
    padding-right: 8px;
}

.image-category-grid::-webkit-scrollbar {
    width: 6px;
}

.image-category-grid::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.image-category-grid::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.image-category-grid::-webkit-scrollbar-thumb:hover {
    background: var(--header-accent);
}

/* Image Category Card */
.image-category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px 12px;
    background: #f8f9fa;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.25s ease;
    border: 2px solid transparent;
}

.image-category-card:hover {
    background: #fff;
    border-color: var(--header-accent);
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(var(--primaryColor-rgb), 0.15);
}

.image-category-img {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

.image-category-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

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

.image-category-placeholder {
    background: linear-gradient(135deg, #f1f1f1 0%, #e5e5e5 100%);
}

.image-category-placeholder i {
    font-size: 32px;
    color: #bbb;
}

.image-category-card:hover .image-category-placeholder i {
    color: var(--header-accent);
}

.image-category-title {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    line-height: 1.3;
    max-height: 2.6em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.image-category-card:hover .image-category-title {
    color: var(--header-accent);
}

/* Image Category Footer */
.image-category-footer {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #eee;
    text-align: center;
}

.image-category-footer .view-all-categories {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--header-hover);
    color: var(--header-accent);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.image-category-footer .view-all-categories:hover {
    background: var(--header-accent);
    color: #fff;
}

/* ============================================================
   TİP 2: RESİMLİ KATEGORİ GRİD - YENİ TASARIM (IMG-GRID)
   Ana kategoriler üstte, hover'da alt kategoriler resimli grid
   ============================================================ */
.img-grid-nav {
    display: flex;
    align-items: center;
    /* Taşarsa 2. satıra sar — kırpma yok. Auto-fit script'inin sarma tespiti (offsetTop) için
       ÖN KOŞUL; script koşmazsa görsel güvenlik ağı (Tip-3 .hier-mega-nav deseninin ikizi). */
    flex-wrap: wrap;
    row-gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.img-grid-nav-item {
    position: static;
}

.img-grid-nav-link {
    display: flex;
    align-items: center;
    /* --imggrid-fit-* yalnız auto-fit script'i set eder (Tip-2 dalı, _header.cshtml); yokken =
       admin/tema değeri. Tip-3'teki --hier-fit-* zincirinin ikizi. */
    gap: var(--imggrid-fit-gap, 6px);
    padding: var(--imggrid-fit-pad, 14px 18px);
    color: #fff;
    text-decoration: none;
    font-size: var(--imggrid-fit-font, var(--nav-font-size, 14px));
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--imggrid-fit-ls, 0.3px);
    /* Yalnız hover'ın değiştirdiği özellikler: 'all' olsaydı auto-fit'in padding/font adımları
       animasyonlanır, senkron offsetTop ölçümü ara değeri okurdu (aşırı sıkıştırma). */
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
}

.img-grid-nav-link i {
    font-size: 10px;
    transition: transform 0.3s ease;
}

.img-grid-nav-item:hover .img-grid-nav-link,
.img-grid-nav-item.active .img-grid-nav-link {
    background: var(--item-color, var(--header-accent));
    color: #fff;
    border-bottom-color: var(--item-color, var(--header-accent));
}

.img-grid-nav-item:hover .img-grid-nav-link i {
    transform: rotate(180deg);
}

/* Full Width Dropdown */
/* Konumlandırma gerekçesi için bkz. .mega-menu-dropdown — aynı scroll boşluğu bugu buradaydı.
   .img-grid-nav-item zaten position:static, bu yüzden hizalama kutusu .modern-header (sticky) olur. */
.img-grid-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    /* Hover'lı linkin 3px alt border'ıyla birleşip kesintisiz accent hattı oluşturur */
    border-top: 3px solid var(--header-accent);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.25s ease;
    /* Kapanış anında (gecikme yalnız açılışta — bkz. :hover) */
    transition-delay: 0ms;
    z-index: 1000;
    max-height: 70vh;
    overflow-y: auto;
}

.img-grid-nav-item:hover .img-grid-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    /* Hover-intent: menü üzerinden çapraz geçerken panel açılıp kapanmaz (Tip-3 deseni) */
    transition-delay: 120ms;
}

/* Nav container ile aynı kutu (1400px / 0 20px) → panel grid'i menü öğelerinin tam altında durur */
.img-grid-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 30px 20px;
}

/* 8 Column Image Grid */
.img-grid-content {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 20px;
}

/* Image Grid Card */
.img-grid-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    padding: 15px 10px;
    border-radius: 12px;
    transition: all 0.25s ease;
    background: transparent;
}

.img-grid-card:hover {
    background: #f8f9fa;
    transform: translateY(-5px);
}

.img-grid-card-img {
    width: 100px;
    height: 100px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    /* Ürün kartıyla (.pc-card--starakim) aynı çerçeve dili → görsel havada durmaz, kutu okunur */
    border: 1px solid #eef0f3;
    transition: all 0.3s ease;
}

.img-grid-card:hover .img-grid-card-img {
    border-color: var(--header-accent);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.img-grid-card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.img-grid-card:hover .img-grid-card-img img {
    transform: scale(1.08);
}

/* Placeholder for missing images */
.img-grid-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
}

.img-grid-placeholder i {
    font-size: 36px;
    color: #ccc;
    transition: all 0.3s ease;
}

.img-grid-card:hover .img-grid-placeholder i {
    color: var(--header-accent);
    transform: scale(1.1);
}

/* Card Title */
.img-grid-card-title {
    font-size: 12px;
    font-weight: 600;
    color: #2b2f36;
    line-height: 1.4;
    max-height: 2.8em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.img-grid-card:hover .img-grid-card-title {
    color: var(--header-accent);
}

/* Footer - View All Link */
.img-grid-footer {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    text-align: center;
}

.img-grid-view-all {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    background: var(--header-accent);
    color: #fff;
    border-radius: 25px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.img-grid-view-all:hover {
    background: var(--header-secondary);
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(var(--primaryColor-rgb), 0.3);
}

.img-grid-view-all i {
    transition: transform 0.3s ease;
}

.img-grid-view-all:hover i {
    transform: translateX(5px);
}

/* Custom Scrollbar for Dropdown */
.img-grid-dropdown::-webkit-scrollbar {
    width: 8px;
}

.img-grid-dropdown::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.img-grid-dropdown::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

.img-grid-dropdown::-webkit-scrollbar-thumb:hover {
    background: var(--header-accent);
}

/* ============================================================
   RESPONSIVE: MEGA MENÜ, KLASİK MENÜ & RESİMLİ KATEGORİ
   ============================================================ */

/* 1400px ve altı: img-grid 6 sütun */
@media (max-width: 1400px) {
    .img-grid-content {
        grid-template-columns: repeat(6, 1fr);
        gap: 15px;
    }

    .img-grid-card-img {
        width: 85px;
        height: 85px;
    }

    /* Fit zinciri burada da korunur: düz literal olsaydı source-order ile base'i ezer,
       script'in bu bantta set ettiği değer sessizce çöpe giderdi. Fallback = eski literal. */
    .img-grid-nav-link {
        padding: var(--imggrid-fit-pad, 12px 14px);
        font-size: var(--imggrid-fit-font, 13px);
    }
}

/* 1200px ve altı: img-grid 5 sütun, diğer ayarlar */
@media (max-width: 1200px) {
    .classic-nav-menu>li>a {
        padding: 10px 12px;
        font-size: 13px;
    }

    .mega-menu-content {
        grid-template-columns: repeat(4, 1fr);
    }

    .image-category-dropdown {
        width: 700px;
    }

    .image-category-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .img-grid-content {
        grid-template-columns: repeat(5, 1fr);
        gap: 12px;
    }

    .img-grid-card-img {
        width: 75px;
        height: 75px;
    }

    .img-grid-card-title {
        font-size: 11px;
    }

    .img-grid-nav-link {
        padding: var(--imggrid-fit-pad, 10px 12px);
        font-size: var(--imggrid-fit-font, 12px);
    }

    .img-grid-container {
        padding: 25px 30px;
    }
}

/* 991px ve altı: Mobil menüye geç */
@media (max-width: 991px) {

    .classic-nav-menu,
    .image-category-wrapper,
    .mega-menu-wrapper,
    .img-grid-nav {
        display: none;
    }
}

/* ============================================================
   MODERN CART SIDEBAR
   ============================================================ */

/* Ana Konteyner */
#sidebar-cart.modern-cart-sidebar {
    position: fixed;
    top: 0;
    right: -450px;
    width: 420px;
    max-width: 100vw;
    height: 100vh;
    background: #fff;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.15);
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#sidebar-cart.modern-cart-sidebar[style*="right: 0"],
#sidebar-cart.modern-cart-sidebar[style*="right:0"] {
    right: 0;
}

/* Overlay */
#sidebar-cart-curtain {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3px);
    z-index: 10000;
    opacity: 0;
    display: none;
    transition: opacity 0.3s ease;
}

/* === HEADER === */
.cart-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: linear-gradient(135deg, var(--header-accent) 0%, var(--primary-hover) 100%);
    color: #fff;
    flex-shrink: 0;
}

.cart-header-content {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cart-header-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.cart-header-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cart-header-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: white;
}

.cart-header-count {
    font-size: 13px;
    opacity: 0.9;
    font-weight: 500;
}

.cart-close-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: 10px;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

/* === PRODUCT LIST === */
.cart-product-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    margin: 0;
    list-style: none;
    background: #f8f9fa;
}

.cart-product-list::-webkit-scrollbar {
    width: 6px;
}

.cart-product-list::-webkit-scrollbar-track {
    background: transparent;
}

.cart-product-list::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 3px;
}

.cart-product-list::-webkit-scrollbar-thumb:hover {
    background: var(--header-accent);
}

/* === EMPTY CART STATE === */
.cart-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 30px;
    height: 100%;
}

.empty-cart-icon {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    animation: emptyCartPulse 2s ease-in-out infinite;
}

@keyframes emptyCartPulse {

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

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

.empty-cart-icon i {
    font-size: 40px;
    color: #bbb;
}

.empty-cart-title {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 700;
    color: #333;
}

.empty-cart-text {
    margin: 0 0 24px;
    font-size: 14px;
    color: #777;
    line-height: 1.5;
    max-width: 280px;
}

.empty-cart-promo {
    background: #e8f4fd;
    border: 1px solid #b8daff;
    color: #004085;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 20px;
}

.empty-cart-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: linear-gradient(135deg, var(--header-accent) 0%, var(--primary-hover) 100%);
    color: #fff;
    text-decoration: none;
    border-radius: 25px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(var(--primaryColor-rgb), 0.3);
}

.empty-cart-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--primaryColor-rgb), 0.4);
    color: #fff;
}

.empty-cart-btn i {
    font-size: 14px !important;
    transition: transform 0.3s ease;
}

.empty-cart-btn:hover i {
    transform: translateX(5px);
}

/* === PRODUCT CARD === */
.cart-product-card {
    background: #fff;
    border-radius: 12px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: all 0.2s ease;
}

.cart-product-card:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.cart-product-inner {
    display: flex;
    padding: 14px;
    gap: 14px;
}

/* Ürün Görseli */
.cart-product-image {
    width: 85px;
    height: 85px;
    min-width: 85px;
    border-radius: 10px;
    overflow: hidden;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

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

/* Ürün Bilgileri */
.cart-product-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cart-product-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
}

.cart-product-name {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    text-decoration: none;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
}

.cart-product-name:hover {
    color: var(--header-accent);
}

.cart-product-remove {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border: none;
    background: #fee;
    color: #c00;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-product-remove:hover {
    background: #c00;
    color: #fff;
    transform: scale(1.1);
}

/* Badge'ler */
.cart-product-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 10px;
}

.cart-product-badges .badge {
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 600;
}

/* Alt Kısım */
.cart-product-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.cart-product-price {
    font-size: 15px;
    font-weight: 700;
    color: var(--header-accent);
}

.cart-product-price del {
    font-size: 12px;
    color: #999;
    font-weight: 400;
    margin-right: 6px;
}

/* Adet Seçici */
.cart-quantity-selector {
    display: flex;
    align-items: center;
    background: #f5f5f5;
    border-radius: 8px;
    overflow: hidden;
}

.cart-qty-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: #555;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-qty-btn:hover {
    background: var(--header-accent);
    color: #fff;
}

.cart-qty-btn.decrement:hover {
    border-radius: 8px 0 0 8px;
}

.cart-qty-btn.increment:hover {
    border-radius: 0 8px 8px 0;
}

.cart-qty-input {
    width: 36px;
    height: 32px;
    border: none;
    background: transparent;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.cart-qty-input:focus {
    outline: none;
}

/* === FOOTER === */
.cart-sidebar-footer {
    background: #fff;
    border-top: 1px solid #eee;
    padding: 20px 24px;
    flex-shrink: 0;
}

.cart-total-section {
    margin-bottom: 16px;
}

.cart-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-total-label {
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

.cart-total-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--header-accent);
}

.cart-action-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cart-checkout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 24px;
    background: linear-gradient(135deg, var(--header-accent) 0%, var(--primary-hover) 100%);
    color: #fff;
    text-decoration: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(var(--primaryColor-rgb), 0.3);
}

.cart-checkout-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(var(--primaryColor-rgb), 0.4);
    color: #fff;
}

.cart-checkout-btn i:last-child {
    transition: transform 0.3s ease;
}

.cart-checkout-btn:hover i:last-child {
    transform: translateX(5px);
}

/* === RESPONSIVE === */
@media (max-width: 480px) {
    #sidebar-cart.modern-cart-sidebar {
        width: 100vw;
        right: -100vw;
    }

    .cart-sidebar-header {
        padding: 16px 20px;
    }

    .cart-header-icon {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }

    .cart-header-title {
        font-size: 16px;
    }

    .cart-product-list {
        padding: 12px;
    }

    .cart-product-inner {
        padding: 12px;
        gap: 12px;
    }

    .cart-product-image {
        width: 70px;
        height: 70px;
        min-width: 70px;
    }

    .cart-product-name {
        font-size: 13px;
    }

    .cart-sidebar-footer {
        padding: 16px 20px;
    }

    .cart-total-value {
        font-size: 20px;
    }

    .cart-checkout-btn {
        padding: 14px 20px;
        font-size: 14px;
    }
}

/* ============================================
   MODERN HERO BANNER STYLES
   ============================================ */

/* === Hero Banner Container === */
.hero-banner.py-24 {
    padding-top: 24px;
    padding-bottom: 24px;
}

/* Use Bootstrap gutter variables instead of gap to preserve grid */
.hero-banner>.container-fluid>.row {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
}

/* === Main Banner Slider Container === */
.hero-banner .banner-slider {
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.hero-banner .banner-slider .banner-right {
    border-radius: 12px;
    overflow: hidden;
}

.hero-banner .banner-slider img {
    border-radius: 12px;
    transition: transform 0.8s ease-out;
}

/* Subtle zoom effect on active slide */
/*.hero-banner .banner-slider .slick-active img {
    animation: heroZoomIn 6s ease-out forwards;
}

@keyframes heroZoomIn {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.05);
    }
}*/

/* === Modern Glassmorphism Arrow Buttons === */
.hero-banner .banner-slider .slick-arrow {
    width: 48px;
    height: 48px;
    /* Koyu cam: beyaz letterbox bandında da resim üzerinde de beyaz ikon okunur
       (beyaz cam + beyaz ikon beyaz bantta kayboluyordu — kontrast kuralı) */
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    z-index: 10;
    transition: all 0.3s ease;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.hero-banner .banner-slider .slick-arrow::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 16px;
    color: #fff;
    opacity: 1;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    line-height: 1;
}

.hero-banner .banner-slider .slick-prev {
    left: 20px;
}

.hero-banner .banner-slider .slick-prev::before {
    content: "\f053";
}

.hero-banner .banner-slider .slick-next {
    right: 20px;
}

.hero-banner .banner-slider .slick-next::before {
    content: "\f054";
}

/* Hover: koyu camdan tema rengine. transform'da translate(0,-50%) KORUNMALI — slick-theme
   dikey ortalamayı transform ile yapar (vendor/slick-theme.css), yalnız scale yazmak oku
   aşağı zıplatır. Beyaz ikon accent zeminde okunur (yukarıdaki kontrast kuralı korunur). */
.hero-banner .banner-slider .slick-arrow:hover {
    background: var(--header-accent);
    border-color: var(--header-accent);
    transform: translate(0, -50%) scale(1.08);
}

.hero-banner .banner-slider .slick-arrow:active {
    transform: translate(0, -50%) scale(0.96);
}

/* === Modern Pill Dots Navigation === */
.hero-banner .banner-slider .slick-dots {
    bottom: 16px;
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.hero-banner .banner-slider .slick-dots li {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
}

.hero-banner .banner-slider .slick-dots li button {
    width: 10px;
    height: 10px;
    padding: 0;
    /* Koyu dolgu + açık kontur: hem beyaz letterbox bandında hem resim üzerinde görünür */
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.25);
    transition: all 0.4s ease;
    cursor: pointer;
}

.hero-banner .banner-slider .slick-dots li button::before {
    display: none;
}

.hero-banner .banner-slider .slick-dots li.slick-active button {
    width: 32px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.hero-banner .banner-slider .slick-dots li:hover button {
    background: rgba(255, 255, 255, 0.8);
}

/* === Side Banners Container === */
.hero-banner .side-banners-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
}

/* Make sure columns align properly on desktop */
@media (min-width: 1200px) {
    .hero-banner .col-xl-4 {
        display: flex;
        flex-direction: column;
    }

    .hero-banner .side-banners-container {
        flex: 1;
    }
}

.hero-banner .col-xl-4 .banner-right {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 0 !important;
    flex: 1;
}

.hero-banner .col-xl-4 .banner-right .banner-content-right.v-2 {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-banner .col-xl-4 .banner-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    transition: transform 0.5s ease;
}

/* Side Banner Hover Effect with Overlay */
.hero-banner .col-xl-4 .banner-right::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 100%);
    border-radius: 12px;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

/*.hero-banner .col-xl-4 .banner-right:hover img {
    transform: scale(1.05);
}*/

.hero-banner .col-xl-4 .banner-right:hover::after {
    opacity: 1;
}

/* === Mobile Responsive Styles === */
@media (max-width: 1199px) {

    /* Side Banners - Horizontal Scroll on Tablet/Mobile */
    .hero-banner .side-banners-container {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 8px;
    }

    .hero-banner .side-banners-container::-webkit-scrollbar {
        display: none;
    }

    .hero-banner .col-xl-4 .banner-right {
        flex: 0 0 auto;
        width: calc(50% - 8px);
        min-width: 280px;
        scroll-snap-align: start;
    }

    .hero-banner .col-xl-4 .banner-right img {
        aspect-ratio: auto;
        height: auto;
    }
}

@media (max-width: 991px) {

    /* Hide arrow buttons on mobile - swipe instead */
    .hero-banner .banner-slider .slick-arrow {
        display: none !important;
    }

    /* Smaller dots on mobile */
    .hero-banner .banner-slider .slick-dots {
        bottom: 12px;
        gap: 6px;
    }

    .hero-banner .banner-slider .slick-dots li button {
        width: 8px;
        height: 8px;
    }

    .hero-banner .banner-slider .slick-dots li.slick-active button {
        width: 24px;
    }
}

@media (max-width: 767px) {
    .hero-banner.py-24 {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .hero-banner .col-xl-4 .banner-right {
        min-width: 220px;
    }
}

@media (max-width: 575px) {
    .hero-banner .side-banners-container {
        gap: 12px;
    }

    .hero-banner .col-xl-4 .banner-right {
        width: calc(85% - 6px);
        min-width: 200px;
    }

    .hero-banner .banner-slider .slick-dots {
        bottom: 10px;
    }
}

/* === Mobil Side Banners - Alt Alta (Stacked) Görünüm === */
@media (max-width: 1199px) {
    .hero-banner .side-banners-container.side-banners-stacked {
        flex-direction: column;
        overflow-x: visible;
        overflow-y: visible;
        scroll-snap-type: none;
        -webkit-overflow-scrolling: auto;
    }

    .hero-banner .side-banners-container.side-banners-stacked .banner-right {
        width: 100%;
        min-width: unset;
        flex: none;
        scroll-snap-align: none;
        margin-bottom: 12px;
    }

    .hero-banner .side-banners-container.side-banners-stacked .banner-right:last-child {
        margin-bottom: 0;
    }
}

@media (max-width: 575px) {
    .hero-banner .side-banners-container.side-banners-stacked {
        gap: 10px;
    }

    .hero-banner .side-banners-container.side-banners-stacked .banner-right {
        margin-bottom: 10px;
    }
}

/* === Sağ Banner Kolonu - Slider ile Tam Hizalama (desktop) ===
   Sağ slotlardaki resimler doğal en-boy oranlarında yüksekliklenince
   sol slider'dan kısa kalıyor ve altta boşluk oluşuyordu. Burada
   yükseklik zinciri (kolon → container → slot → image-area → img)
   uçtan uca %100'e sabitlenir; resim object-fit:cover ile kutuyu doldurur.
   Böylece banner ölçüleri ne olursa olsun sağ kolon sol slider ile
   birebir aynı hizada başlar ve biter. */
@media (min-width: 1200px) {
    .hero-banner>.container-fluid>.row {
        align-items: stretch;
    }

    .hero-banner .col-xl-4 {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .hero-banner .col-xl-4 .side-banners-container {
        display: flex;
        flex-direction: column;
        gap: 16px;
        flex: 1 1 auto;
        height: auto;
        min-height: 0;
    }

    /* İki slot her zaman eşit yükseklikte (tek slot varsa tamamını kaplar) */
    .hero-banner .col-xl-4 .side-banners-container>.banner-right {
        flex: 1 1 0;
        min-height: 0;
        height: auto;
        position: relative;
        overflow: hidden;
    }

    /* Yükseklik zinciri: hiçbir ara katman doğal yüksekliğe düşmemeli */
    .hero-banner .col-xl-4 .banner-right .banner-content-right,
    .hero-banner .col-xl-4 .banner-right .banner-content-right.v-2,
    .hero-banner .col-xl-4 .banner-right .image-area,
    .hero-banner .col-xl-4 .banner-right .image-area>a,
    .hero-banner .col-xl-4 .banner-right .side-banner-slider,
    .hero-banner .col-xl-4 .banner-right .side-banner-slider .slick-list,
    .hero-banner .col-xl-4 .banner-right .side-banner-slider .slick-track,
    .hero-banner .col-xl-4 .banner-right .side-banner-slider .slick-slide,
    .hero-banner .col-xl-4 .banner-right .side-banner-slider .slick-slide>div {
        height: 100%;
        min-height: 0;
    }

    .hero-banner .col-xl-4 .banner-right .banner-content-right.v-2 {
        display: block;
    }

    .hero-banner .col-xl-4 .banner-right .image-area>a {
        display: block;
    }

    .hero-banner .col-xl-4 .banner-right img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        aspect-ratio: auto;
        border-radius: 12px;
    }
}

/* === Slick init öncesi FOUC/uzama engeli ===
   Slick yüklenene kadar tüm slaytlar normal blok olarak alt alta diziliyor,
   bu yüzden hero alanı devasa uzuyor, sonra init olunca yerine oturuyordu.
   Çözüm: init'ten önce sadece ilk slayt render edilsin, kutu nihai
   en-boy oranıyla yer ayırsın ve içerik hazır olana kadar görünmesin. */
.hero-banner .banner-slider:not(.slick-initialized) {
    visibility: hidden;
    /* Konteyner oranı sunucudan (--hero-ar, Index.cshtml banner-slider inline style);
       boyut bilinmeyen tenantlarda 1140/462 fallback. Index.cshtml'deki img kuralı
       AYNI değişkeni okur → iki kutu asla ayrışmaz. */
    aspect-ratio: var(--hero-ar, 1140 / 462);
    overflow: hidden;
}

.hero-banner .banner-slider:not(.slick-initialized)>.banner-right:not(:first-child) {
    display: none;
}

.hero-banner .banner-slider.slick-initialized {
    visibility: visible;
}

/* === Letterbox slaytlarda bulanık kenar dolgusu ===
   Oranı kutuya uymayan banner kırpılmaz (inline object-fit: contain);
   kutunun boş kalan kenarları beyaz boşluk yerine AYNI görselin blur'lanmış
   haliyle dolar (TV letterbox deseni). --lb-img sunucudan inline basılır
   (Index.cshtml hero + yan banner). Görsel zaten cache'te — ekstra istek yok. */
.image-area.banner-letterbox {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

.image-area.banner-letterbox::before {
    content: "";
    position: absolute;
    inset: -32px;
    /* blur halosu kutu dışına taşar, kenarda koyu halka oluşmaz */
    background-image: var(--lb-img);
    background-size: cover;
    background-position: center;
    filter: blur(28px) saturate(1.05);
    z-index: 0;
}

.image-area.banner-letterbox>a,
.image-area.banner-letterbox>img {
    position: relative;
    z-index: 1;
    height: 100%;
}

.side-banner-slider:not(.slick-initialized) {
    visibility: hidden;
    overflow: hidden;
}

.side-banner-slider:not(.slick-initialized)>.image-area:not(:first-child) {
    display: none;
}

/* === Side Banner Slider Styles === */
.side-banner-slider {
    visibility: hidden;
    width: 100%;
    height: 100%;
    position: relative;
}

.side-banner-slider.slick-initialized {
    visibility: visible;
}

/* Override slick default margin for dotted slider */
.side-banner-slider.slick-dotted.slick-slider {
    margin-bottom: 0;
}

/* Slick height fix */
.side-banner-slider .slick-list,
.side-banner-slider .slick-track,
.side-banner-slider .slick-slide,
.side-banner-slider .slick-slide>div {
    height: 100%;
}

.side-banner-slider .image-area {
    width: 100%;
    height: 100%;
}

.side-banner-slider .image-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

/* Side Banner Slider Arrows */
.side-banner-slider .slick-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 0;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.side-banner-slider .slick-arrow:hover {
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.side-banner-slider .slick-prev {
    left: 8px;
}

.side-banner-slider .slick-next {
    right: 8px;
}

.side-banner-slider .slick-prev:before,
.side-banner-slider .slick-next:before {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 14px;
    color: #333;
    opacity: 1;
}

.side-banner-slider .slick-prev:before {
    content: '\f053';
}

.side-banner-slider .slick-next:before {
    content: '\f054';
}

/* Side Banner Slider Dots */
.side-banner-slider .slick-dots {
    bottom: 8px;
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.side-banner-slider .slick-dots li {
    margin: 0;
    width: auto;
    height: auto;
}

.side-banner-slider .slick-dots li button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    font-size: 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.side-banner-slider .slick-dots li button:before {
    display: none;
}

.side-banner-slider .slick-dots li.slick-active button {
    background: #fff;
    width: 20px;
    border-radius: 4px;
}

.side-banner-slider .slick-dots li:hover button {
    background: rgba(255, 255, 255, 0.8);
}

/* Hide arrows on mobile for side banners */
@media (max-width: 1199px) {
    .side-banner-slider .slick-arrow {
        display: none !important;
    }
}

/* ============================================
   MODERN VITRIN / PRODUCT CAROUSEL STYLES
   ============================================ */

/* === Section Container === */
.recommended-product.py-40 {
    padding: 48px 0;
    /* Zemin gri body'den gelsin: eski #f8f9fa→#fff gradient'i gri zeminde ayrımını yitiriyordu. */
    background: transparent;
}

/* === Section Header (top-bar) === */
.recommended-product .top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e9ecef;
}

.recommended-product .top-bar h5 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.recommended-product .top-bar h5::before {
    content: '';
    width: 4px;
    height: 24px;
    background: linear-gradient(180deg, var(--primaryColor) 0%, color-mix(in srgb, var(--primaryColor) 70%, white) 100%);
    border-radius: 2px;
}

/* === Modern Navigation Buttons === */
.vitrin-nav-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vitrin-nav-btn {
    width: 44px;
    height: 44px;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #333;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 18px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.vitrin-nav-btn:hover {
    background: var(--primaryColor);
    color: #fff;
    transform: scale(1.08);
    box-shadow: 0 4px 16px rgba(var(--primaryColor-rgb), 0.3);
}

.vitrin-nav-btn:active {
    transform: scale(0.95);
}

.vitrin-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.vitrin-nav-btn:disabled:hover {
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    transform: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* === Progress Dots === */
.vitrin-progress-dots {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: 8px;
}

.vitrin-progress-dot {
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background: #dee2e6;
    transition: all 0.3s ease;
    cursor: pointer;
}

.vitrin-progress-dot.active {
    width: 24px;
    background: var(--primaryColor);
}

.vitrin-progress-dot:hover:not(.active) {
    background: #adb5bd;
}

/* === Vitrin Slider Container === */
.vitrin-slider {
    overflow: hidden;
    position: relative;
    border-radius: 16px;
}

.vitrin-slider-content {
    display: flex;
    align-items: stretch;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 8px 4px 16px;
    scroll-snap-type: x mandatory;
}

.vitrin-slider-content::-webkit-scrollbar {
    display: none;
}

/* === Modern Product Card === */
.featured-product-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
    position: relative;
}

.vitrin-slider-content .featured-product-card {
    flex: 0 0 auto;
    width: 350px;
    scroll-snap-align: start;
}

.featured-product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
    border-color: transparent;
}

/* === Product Image Box === */
.featured-product-card .image-box {
    position: relative;
    overflow: hidden;
    background: #fff;
    margin-bottom: 0 !important;
}

.featured-product-card .image-box .product-image-gallery {
    height: 220px !important;
}

.featured-product-card .image-box img {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* === Sale Label (Discount Badge) - Compact Pill === */
.featured-product-card .sale-label {
    position: absolute;
    top: 10px;
    left: 10px;
    background: linear-gradient(135deg, var(--primaryColor) 0%, color-mix(in srgb, var(--primaryColor) 70%, white) 100%);
    color: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    z-index: 5;
    box-shadow: 0 2px 6px rgba(var(--primaryColor-rgb), 0.25);
    line-height: 1.2;
}

/* === New Product Badge - Circle on Right === */
.featured-product-card .badge-new,
.featured-product-card .product-badge.badge-new {
    position: absolute;
    top: 10px;
    right: 10px;
    left: auto;
    background: linear-gradient(135deg, var(--primaryColor) 0%, color-mix(in srgb, var(--primaryColor) 70%, white) 100%);
    color: #fff;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 700;
    z-index: 5;
    box-shadow: 0 2px 8px rgba(0, 184, 148, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    letter-spacing: 0.3px;
}

/* === Favorite Heart Button === */
.featured-product-card .favorite-heart {
    position: absolute;
    top: 58px;
    right: 10px;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: scale(0.8);
}

.featured-product-card:hover .favorite-heart,
.featured-product-card .favorite-heart.favorite-active,
.featured-product-card .favorite-heart.favorite-visible {
    opacity: 1;
    transform: scale(1);
}

.featured-product-card .favorite-heart i {
    font-size: 18px;
    color: #adb5bd;
    transition: all 0.3s ease;
}

.featured-product-card .favorite-heart:hover i {
    color: var(--primaryColor);
    transform: scale(1.15);
}

.featured-product-card .favorite-heart.favorite-active i {
    color: var(--primaryColor);
}

/* === Product Gallery Dots === */
.featured-product-card .product-gallery-dots {
    bottom: 12px !important;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    padding: 6px 10px;
    border-radius: 20px;
}

.featured-product-card .gallery-dot {
    width: 6px !important;
    height: 6px !important;
    background: rgba(255, 255, 255, 0.5) !important;
}

.featured-product-card .gallery-dot.active {
    background: #fff !important;
    width: 16px !important;
    border-radius: 3px !important;
}

/* === Out of Stock Overlay - Modern Badge === */
.featured-product-card .out-of-stock-overlay {
    position: absolute;
    bottom: 12px;
    left: 12px;
    top: auto;
    right: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 4;
}

/* Tükendi olan featured card resmini hafif grileştir */
.featured-product-card:has(.out-of-stock-overlay) .image-box img,
.featured-product-card:has(.out-of-stock-overlay) .product-image-gallery img {
    filter: grayscale(40%) opacity(0.85);
    transition: filter 0.3s ease;
}

.featured-product-card:hover:has(.out-of-stock-overlay) .image-box img,
.featured-product-card:hover:has(.out-of-stock-overlay) .product-image-gallery img {
    filter: grayscale(20%) opacity(0.95);
}

/* === Product Description === */
.featured-product-card .product-desc {
    padding: 16px;
}

.featured-product-card .product-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 12px;
    text-align: center;
    min-height: 40px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.featured-product-card .product-title a {
    color: #1a1a2e;
    text-decoration: none;
    transition: color 0.2s ease;
}

.featured-product-card .product-title a:hover {
    color: var(--primaryColor);
}

/* === Price Display === */
.featured-product-card .rating-star {
    margin-bottom: 14px !important;
    padding: 12px;
    background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%) !important;
    border-radius: 10px;
    border: 1px solid #e9ecef;
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.featured-product-card .rating-star h6 {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
}

.featured-product-card .rating-star h6 strong {
    font-size: 20px;
    color: var(--primaryColor);
    font-weight: 800;
    letter-spacing: -0.5px;
}

.featured-product-card .rating-star h6 .text-decoration-line-through {
    font-size: 13px;
    color: #adb5bd !important;
    order: -1;
}

/* Price info text */
.featured-product-card .rating-star small {
    font-size: 11px;
    color: #6c757d;
    margin-top: 4px;
}

/* === Discount Badges (Bayi/Cari İndirimi) === */
.featured-product-card .product-discount {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);
    color: #6c5ce7;
    font-size: 11px;
    font-weight: 600;
    border-radius: 12px;
}

/* === Modern Countdown Timer === */
.featured-product-card .discount-timer-wrapper {
    background: linear-gradient(135deg, color-mix(in srgb, var(--primaryColor) 70%, white) 0%, var(--primaryColor) 100%);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
}

.featured-product-card .discount-timer-title {
    display: block;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 8px;
    text-align: center;
}

.featured-product-card .discount-timer-dynamic {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.featured-product-card .timer-segment {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 6px 10px;
    min-width: 42px;
}

.featured-product-card .timer-number {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.featured-product-card .timer-label {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    margin-top: 2px;
}

/* Timer pulse animation for last hour */
@keyframes timerPulse {

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

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

.featured-product-card .discount-timer-wrapper.urgent {
    animation: timerPulse 1s ease-in-out infinite;
}

/* === Quantity + Add to Cart Container === */
.featured-product-card .product-desc {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
}

/* === Modern Quantity Input === */
.featured-product-card input[type="number"] {
    width: 100% !important;
    height: 44px;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    text-align: center;
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 10px;
    margin-right: 0;
    transition: all 0.2s ease;
    background: #f8f9fa;
    display: block !important;
    float: none !important;
}

.featured-product-card input[type="number"]:hover {
    border-color: #dee2e6;
    background: #fff;
}

.featured-product-card input[type="number"]:focus {
    border-color: var(--primaryColor);
    background: #fff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--primaryColor-rgb), 0.1);
}

/* === Add to Cart Button === */
.featured-product-card .cus-btn-2 {
    width: 100%;
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--primaryColor) 0%, color-mix(in srgb, var(--primaryColor) 70%, white) 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    float: none !important;
    margin-top: auto;
}

.featured-product-card .cus-btn-2:hover {
    background: linear-gradient(135deg, var(--primary-hover) 0%, color-mix(in srgb, var(--primaryColor) 80%, white) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(var(--primaryColor-rgb), 0.35);
}

.featured-product-card .cus-btn-2 i {
    font-size: 14px;
}

/* === Responsive Adjustments === */
@media (max-width: 1200px) {
    .vitrin-slider-content .featured-product-card {
        width: 260px;
    }
}

@media (max-width: 992px) {
    .recommended-product.py-40 {
        padding: 40px 0;
    }

    .recommended-product .top-bar h5 {
        font-size: 1.25rem;
    }

    .vitrin-nav-btn {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .vitrin-slider-content .featured-product-card {
        width: 240px;
    }
}

@media (max-width: 768px) {
    .recommended-product.py-40 {
        padding: 32px 0;
    }

    .recommended-product .top-bar {
        margin-bottom: 16px;
        padding-bottom: 25px;
    }

    .recommended-product .top-bar h5 {
        font-size: 1.125rem;
    }

    .vitrin-progress-dots {
        display: none;
    }

    .vitrin-slider-content {
        gap: 16px;
        padding: 4px 2px 12px;
    }

    .vitrin-slider-content .featured-product-card {
        width: 220px;
    }

    .featured-product-card .image-box .product-image-gallery {
        height: 180px !important;
    }

    .featured-product-card .product-desc {
        padding: 12px;
    }

    .featured-product-card .product-title {
        font-size: 13px;
        min-height: 36px;
    }

    .featured-product-card .rating-star h6 strong {
        font-size: 18px;
    }

    .featured-product-card .rating-star {
        padding: 10px;
    }
}

@media (max-width: 576px) {
    .recommended-product .top-bar {
        flex-wrap: nowrap;
        gap: 20px;
        align-items: center;
    }

    .recommended-product .top-bar h5 {
        font-size: 25px;
        flex: 1;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .vitrin-progress-dots {
        display: none !important;
    }

    .vitrin-nav-buttons {
        gap: 6px;
        flex-shrink: 0;
    }

    .vitrin-nav-btn {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    .vitrin-slider-content .featured-product-card {
        width: calc(85vw - 32px);
        max-width: 280px;
    }

    .featured-product-card .favorite-heart {
        opacity: 1;
        transform: scale(1);
    }

    .featured-product-card .cus-btn-2 {
        padding: 10px 14px;
        font-size: 13px;
    }

    .featured-product-card input[type="number"] {
        height: 40px;
        font-size: 14px;
        margin-bottom: 8px;
    }

    .featured-product-card .rating-star {
        padding: 10px;
        margin-bottom: 10px !important;
    }

    .featured-product-card .rating-star h6 strong {
        font-size: 17px;
    }

    .featured-product-card .timer-segment {
        padding: 4px 8px;
        min-width: 36px;
    }

    .featured-product-card .timer-number {
        font-size: 14px;
    }
}

/* === Brands Section (Markalar) === */
/* --bcs-* değişkenleri BaseController.BuildBrandClassicStyle ile basılır (BrandShowcase admin paneli).
   Fallback'ler bugünkü sabit değerlerle birebir aynı → config yokken sıfır regresyon. */
.brands-section .brand-card {
    background: var(--bcs-card-bg, #fff);
    border-radius: var(--bcs-radius, 12px);
    padding: 16px 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--bcs-card-border, #f0f0f0);
    transition: all 0.3s ease;
    min-width: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Fixed container for image */
    width: var(--bcs-card-w, 200px);
    height: 100px;
    flex-shrink: 0;
}

.brands-section .brand-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border-color: transparent;
}

.brands-section .brand-card img {
    width: 100%;
    height: var(--bcs-logo-h, 68px);
    object-fit: contain;
    object-position: center;
    transition: transform 0.3s ease;
}

.brands-section .brand-card:hover img {
    transform: scale(1.05);
}

.bcs-card-name {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    color: inherit;
}

/* Gri logolar, üzerine gelince renklensin (admin toggle: ClassicGrayscale) */
.brands-section.bcs-grayscale .brand-card img {
    filter: grayscale(1);
    opacity: 0.72;
    transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

.brands-section.bcs-grayscale .brand-card:hover img {
    filter: grayscale(0);
    opacity: 1;
}

/* Logo Izgara stili (ClassicStyle=grid): sabit ızgara, nav yok, satır/kolon admin'den ayarlanır */
.bcs-grid {
    display: grid;
    grid-template-columns: repeat(var(--bcs-grid-cols, 6), 1fr);
    gap: 20px;
}

.bcs-grid .brand-card {
    width: auto;
    height: auto;
    min-height: 100px;
}

@media (max-width: 768px) {
    .bcs-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}

/* Akan Logo Bandı stili (ClassicStyle=marquee) — site-brand-strip ile aynı @keyframes sbs-marquee'yi kullanır */
.brands-section.bcs-style-marquee .bcs-marquee-outer {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}

.brands-section.bcs-style-marquee .bcs-track {
    display: flex;
    gap: 20px;
    width: max-content;
    flex: 0 0 auto;
    animation: sbs-marquee var(--bcs-duration, 40s) linear infinite;
    will-change: transform;
}

.brands-section.bcs-style-marquee:hover .bcs-track {
    animation-play-state: paused;
}

@media (max-width: 991.98px) {
    .brands-section.bcs-style-marquee .bcs-marquee-outer {
        -webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
        mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .brands-section.bcs-style-marquee .bcs-marquee-outer {
        overflow-x: auto;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .brands-section.bcs-style-marquee .bcs-track {
        animation: none;
        width: auto;
    }
}

/* Brands Section - Responsive */
@media (max-width: 768px) {
    .brands-section .brand-card {
        width: 160px;
        height: 80px;
        min-width: 140px;
        padding: 12px 16px;
    }

    .brands-section .brand-card img {
        height: min(var(--bcs-logo-h, 68px), 56px);
    }

    /* Grid stilinde ızgara kolon genişliği geçerli kalsın — sabit mobil kart genişliği ezmesin */
    .bcs-grid .brand-card {
        width: auto;
        height: auto;
        min-height: 80px;
    }
}

@media (max-width: 576px) {
    .brands-section .brand-card {
        width: 140px;
        height: 70px;
        min-width: 120px;
        padding: 10px 14px;
        border-radius: 10px;
    }

    .brands-section .brand-card img {
        height: min(var(--bcs-logo-h, 68px), 50px);
    }

    .bcs-grid .brand-card {
        width: auto;
        height: auto;
        min-height: 70px;
    }
}

/* ============================================
   ŞUBELER SECTION - Modern Branch Cards
   ============================================ */

.subeler-section {
    background: #f8f9fa;
}

.subeler-section.py-40 {
    padding: 48px 0;
}

/* Section Header - Vitrin tarzında tutarlı */
.subeler-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid #e9ecef;
}

.subeler-header h5 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.subeler-header h5::before {
    content: '';
    width: 4px;
    height: 24px;
    background: linear-gradient(180deg, var(--primaryColor) 0%, var(--primary-hover) 100%);
    border-radius: 2px;
}

/* Şube Card */
.sube-card {
    display: block;
    text-decoration: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    background: #fff;
}

.sube-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    text-decoration: none;
}

/* Image Container */
.sube-image-container {
    position: relative;
    overflow: hidden;
    height: 250px;
}

.sube-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sube-card:hover .sube-image {
    transform: scale(1.1);
}

/* Overlay Gradient */
.sube-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.1) 50%,
            rgba(0, 0, 0, 0.5) 100%);
    transition: opacity 0.3s ease;
}

.sube-card:hover .sube-overlay {
    background: linear-gradient(180deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.2) 50%,
            rgba(0, 0, 0, 0.6) 100%);
}

/* Badge - Glassmorphism */
.sube-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.sube-badge i {
    font-size: 14px;
    color: var(--primaryColor);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.sube-card:hover .sube-badge {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

/* Şubeler Section - Responsive */
@media (max-width: 992px) {
    .subeler-section.py-40 {
        padding: 40px 0;
    }

    .sube-image-container {
        height: 200px;
    }

    .subeler-header h5 {
        font-size: 1.35rem;
    }
}

@media (max-width: 768px) {
    .subeler-section.py-40 {
        padding: 32px 0;
    }

    .subeler-header {
        margin-bottom: 20px;
        padding-bottom: 12px;
    }

    .subeler-header h5 {
        font-size: 1.25rem;
    }

    .subeler-header h5::before {
        height: 20px;
    }

    .sube-image-container {
        height: 180px;
    }

    .sube-badge {
        padding: 8px 14px;
        font-size: 13px;
        top: 12px;
        left: 12px;
    }

    .sube-badge i {
        font-size: 13px;
    }

    .sube-card:hover {
        transform: translateY(-4px);
    }
}

@media (max-width: 576px) {
    .subeler-section.py-40 {
        padding: 24px 0;
    }

    .subeler-header h5 {
        font-size: 1.1rem;
    }

    .sube-image-container {
        height: 160px;
    }

    .sube-badge {
        padding: 6px 12px;
        font-size: 12px;
        top: 10px;
        left: 10px;
        gap: 6px;
    }

    .sube-badge i {
        font-size: 12px;
    }

    .sube-card {
        border-radius: 12px;
    }
}

/* ============================================
   BENEFITS SECTION - Modern Feature Cards
   ============================================ */

.benefits-section {
    background: linear-gradient(180deg, #f8f9fa 0%, #fff 100%);
    padding: 48px 0;
    border-bottom: 1px solid #e9ecef;
}

/* Grid Layout - 6 columns on desktop */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}

/* Benefit Card */
.benefit-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 16px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    border: 1px solid #f0f0f0;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: default;
}

.benefit-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
    border-color: transparent;
}

/* Icon Container - Gradient Circle */
.benefit-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primaryColor-lighter) 0%, var(--primaryColor-light) 100%);
    border-radius: 50%;
    margin-bottom: 16px;
    transition: all 0.3s ease;
}

.benefit-icon i {
    font-size: 24px;
    color: var(--primaryColor);
    transition: transform 0.3s ease;
}

.benefit-card:hover .benefit-icon {
    background: linear-gradient(135deg, var(--primaryColor) 0%, var(--primary-hover) 100%);
    transform: scale(1.1);
}

.benefit-card:hover .benefit-icon i {
    color: #fff;
    transform: scale(1.1);
}

/* Content */
.benefit-content h6 {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0 0 6px 0;
    line-height: 1.3;
}

.benefit-content p {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
    line-height: 1.4;
}

/* Benefits Section - Responsive */
@media (max-width: 1200px) {
    .benefits-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .benefit-card {
        padding: 20px 14px;
    }
}

@media (max-width: 992px) {
    .benefits-section {
        padding: 40px 0;
    }

    .benefits-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .benefit-icon {
        width: 56px;
        height: 56px;
    }

    .benefit-icon i {
        font-size: 22px;
    }

    .benefit-content h6 {
        font-size: 14px;
    }

    .benefit-content p {
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    .benefits-section {
        padding: 32px 0;
    }

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

    .benefit-card {
        padding: 18px 12px;
        border-radius: 12px;
    }

    .benefit-icon {
        width: 52px;
        height: 52px;
        margin-bottom: 12px;
    }

    .benefit-icon i {
        font-size: 20px;
    }

    .benefit-card:hover {
        transform: translateY(-3px);
    }
}

@media (max-width: 576px) {
    .benefits-section {
        padding: 24px 0;
    }

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

    .benefit-card {
        padding: 16px 10px;
        border-radius: 10px;
    }

    .benefit-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 10px;
    }

    .benefit-icon i {
        font-size: 18px;
    }

    .benefit-content h6 {
        font-size: 13px;
        margin-bottom: 4px;
    }

    .benefit-content p {
        font-size: 11px;
        line-height: 1.3;
    }
}

/* ============================================
   FOOTER - Modern Light Theme
   ============================================ */

/* Main Footer Container - Fix alignment */
footer .footer-wrapper {
    align-items: flex-start !important;
    gap: 32px;
    padding: 48px 0;
}

/* Store Description - Left Column */
footer .footer-wrapper .store-desc {
    padding-right: 24px;
}

/* Phone Box - Modern Style */
footer .footer-wrapper .store-desc .icon-box {
    width: 56px;
    height: 56px;
    min-width: 56px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primaryColor-lighter) 0%, var(--primaryColor-light) 100%);
    border: none !important;
    border-radius: 12px;
    transition: all 0.3s ease;
}

footer .footer-wrapper .store-desc .icon-box:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(var(--primaryColor-rgb), 0.2);
}

footer .footer-wrapper .store-desc .icon-box i {
    color: var(--primaryColor) !important;
    font-size: 22px !important;
}

footer .footer-wrapper .store-desc>a:first-child {
    margin-bottom: 24px !important;
}

footer .footer-wrapper .store-desc>a:first-child h5 {
    font-size: 1.5rem;
    font-weight: 700;
}

/* Contact Info Items */
footer .footer-wrapper .store-desc .footer-link a {
    padding: 8px 0;
    transition: all 0.3s ease;
    border-radius: 8px;
}

footer .footer-wrapper .store-desc .footer-link a:hover {
    padding-left: 8px;
    background: #f8f9fa;
}

footer .footer-wrapper .store-desc .footer-link .img-box {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border: none !important;
    border-radius: 8px;
    transition: all 0.3s ease;
}

footer .footer-wrapper .store-desc .footer-link .img-box i {
    font-size: 14px;
}

footer .footer-wrapper .store-desc .footer-link a:hover .img-box {
    background: var(--primaryColor);
}

footer .footer-wrapper .store-desc .footer-link a:hover .img-box i {
    color: #fff !important;
}

/* Social Links Section */
footer .footer-wrapper .store-desc>p.fw-500 {
    font-size: 14px;
    color: #374151;
    margin-top: 8px;
}

/* Social Icons - Black Background, White Icon */
footer .social-link {
    display: flex !important;
    gap: 10px;
}

/* Footer Link Blocks - Menu Columns */
footer .footer-wrapper .footer-link-block {
    min-width: 160px;
}

/* Footer Title - Column Headers */
footer .footer-link-block .footer-title {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 16px;
    padding-bottom: 12px;
    position: relative;
}

footer .footer-link-block .footer-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 32px;
    height: 3px;
    background: var(--primaryColor);
    border-radius: 2px;
}

/* Menu Links */
footer .footer-link-block ul li {
    margin-bottom: 10px;
}

footer .footer-link-block ul li a {
    font-size: 14px;
    color: #6b7280 !important;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    position: relative;
    padding-left: 0;
}

footer .footer-link-block ul li a::before {
    content: '';
    width: 0;
    height: 2px;
    background: var(--primaryColor);
    position: absolute;
    left: 0;
    bottom: -2px;
    transition: width 0.3s ease;
}

footer .footer-link-block ul li a:hover {
    color: var(--primaryColor) !important;
    padding-left: 8px;
}

footer .footer-link-block ul li a:hover::before {
    width: 100%;
}

/* PDF File Links */
footer .footer-link-block ul li a .fa-file-pdf {
    margin-right: 6px;
    font-size: 16px;
}

/* Footer Bottom Bar */
footer .footer-bottom-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    border-top: 1px solid #e5e7eb;
    margin-top: 0;
}

footer .footer-bottom-bar p {
    font-size: 14px;
    color: #6b7280;
}

footer .footer-bottom-bar a {
    color: var(--primaryColor);
    font-weight: 500;
    transition: color 0.3s ease;
}

footer .footer-bottom-bar a:hover {
    color: #1f2937;
}

/* Payment Icons */
footer .payment-cards img {
    height: 32px;
    opacity: 0.7;
    transition: all 0.3s ease;
}

footer .payment-cards img:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Footer Currency (FooterDovizKuruGoster parametresi ile) */
footer .footer-bottom-right {
    flex-wrap: wrap;
}

footer .footer-currency {
    display: flex;
    align-items: center;
    gap: 10px;
}

footer .footer-currency-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 4px 12px;
    white-space: nowrap;
}

footer .footer-currency-item i {
    color: var(--primaryColor);
    font-size: 12px;
}

/* HR Line */
footer .hr-line {
    border-color: #e5e7eb;
    margin: 0;
}

/* ============================================
   FOOTER - Responsive Styles
   ============================================ */

@media (max-width: 1200px) {
    footer .footer-wrapper {
        gap: 28px;
    }

    footer .footer-wrapper .store-desc {
        width: 35% !important;
    }

    footer .footer-wrapper .footer-link-block {
        width: 20% !important;
    }
}

@media (max-width: 1024px) {
    footer .footer-wrapper {
        padding: 40px 0;
    }

    footer .footer-wrapper .store-desc {
        width: 100% !important;
        padding-right: 0;
        padding-bottom: 32px;
        border-bottom: 1px solid #e5e7eb;
        margin-bottom: 16px;
    }

    footer .footer-wrapper .footer-link-block {
        width: 30% !important;
    }
}

@media (max-width: 768px) {
    footer .footer-wrapper {
        padding: 32px 0;
        gap: 24px;
    }

    footer .footer-wrapper .footer-link-block {
        width: 45% !important;
    }

    footer .footer-link-block .footer-title {
        font-size: 15px;
        margin-bottom: 14px;
    }

    footer .footer-bottom-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        text-align: left;
    }

    footer .social-link li a {
        width: 36px;
        height: 36px;
    }

    footer .social-link li a i {
        font-size: 15px;
    }

    footer .social-link li a i {
        font-size: 16px;
    }
}

@media (max-width: 576px) {
    footer .footer-wrapper {
        padding: 24px 0;
        gap: 24px;
    }

    footer .footer-wrapper .store-desc {
        text-align: left;
    }

    footer .footer-wrapper .store-desc>a:first-child {
        justify-content: flex-start;
    }

    footer .footer-wrapper .store-desc .footer-link a {
        justify-content: flex-start;
    }

    footer .footer-wrapper .store-desc>p.fw-500 {
        text-align: left;
    }

    footer .social-link {
        justify-content: flex-start;
    }

    footer .footer-wrapper .footer-link-block {
        width: 100% !important;
        text-align: left;
        padding-bottom: 20px;
        border-bottom: 1px solid #f3f4f6;
    }

    footer .footer-wrapper .footer-link-block:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    footer .footer-link-block .footer-title::after {
        left: 0;
        transform: none;
    }

    footer .footer-link-block ul li a {
        justify-content: flex-start;
    }

    footer .footer-link-block ul li a:hover {
        padding-left: 8px;
    }

    footer .footer-link-block ul li a::before {
        left: 0;
        transform: none;
    }

    footer .footer-bottom-bar {
        align-items: flex-start;
        text-align: left;
    }

    footer .footer-bottom-bar p {
        font-size: 12px;
    }

    footer .payment-cards img {
        height: 26px;
    }

    footer .social-link li a {
        width: 34px;
        height: 34px;
    }

    footer .social-link li a i {
        font-size: 14px;
    }
}

/* ============================================
   ARAMA KUTUSU YENİDEN TASARIM - v2.0
   ============================================
   Bu bölümü silmek için:
   "ARAMA KUTUSU YENİDEN TASARIM - v2.0" ile
   "ARAMA KUTUSU YENİDEN TASARIM - SON" arasını silin
   ============================================ */

/* ===== ANA ARAMA INPUT STİLLERİ ===== */
.modern-search-form {
    position: relative;
}

.modern-search-form .search-input {
    width: 100%;
    padding: 14px 20px;
    padding-right: 54px;
    border: 2px solid #e5e7eb;
    border-radius: 14px;
    font-size: 15px;
    color: #1f2937;
    background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.modern-search-form .search-input::placeholder {
    color: #9ca3af;
    font-weight: 400;
}

.modern-search-form .search-input:hover {
    border-color: #d1d5db;
    background: #fff;
}

.modern-search-form .search-input:focus {
    background: #fff;
    outline: none;
    box-shadow: 0 0 0 4px rgba(var(--primaryColor-rgb), 0.08),
        0 4px 12px rgba(0, 0, 0, 0.05);
}

/* ===== ARAMA BUTONU ===== */
.modern-search-form .search-btn {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 12px;
    background: var(--primary-color);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-search-form .search-btn i {
    font-size: 16px;
    transition: transform 0.3s ease;
}

.modern-search-form .search-btn:hover {
    background: #000;
}

.modern-search-form .search-btn:hover i {
    transform: scale(1.1);
}

.modern-search-form .search-btn:active {
    transform: translateY(-50%) scale(0.98);
}

/* ===== ARAMA DROPDOWN ===== */
.search-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: auto;
    width: 560px;
    max-width: 90vw;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12),
        0 4px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid #e5e7eb;
    z-index: 1000;
    max-height: 480px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: searchDropdownSlideIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes searchDropdownSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

/* Scrollbar Styling */
.search-dropdown::-webkit-scrollbar {
    width: 6px;
}

.search-dropdown::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 3px;
}

.search-dropdown::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.search-dropdown::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* ===== SONUÇ SAYISI BİLGİSİ ===== */
.search-count-info {
    padding: 12px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 12px 12px 0 0;
}

.search-count-info strong {
    color: var(--primaryColor);
    font-weight: 600;
}

/* ===== YENİ ARAMA DROPDOWN TASARIMI ===== */
.search-results-container {
    flex: 1;
    overflow-y: auto;
    display: block !important;
}

/* Eski search-total gizle, yeni footer kullanıyoruz */
.search-dropdown .search-total {
    display: none !important;
}

.search-dropdown-content {
    padding: 0;
}

/* Section Başlıkları */
.search-section {
    border-bottom: 1px solid #f3f4f6;
}

.search-section:last-child {
    border-bottom: none;
}

.search-section-title {
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 16px 8px;
    margin: 0;
    background: #fafafa;
}

/* Ürünler - 2 Sütun Grid */
.search-products-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.search-product-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.15s ease;
    border-bottom: 1px solid #f5f5f5;
}

.search-product-item:hover {
    background: #f9fafb;
}

.search-product-item:nth-child(odd) {
    border-right: 1px solid #f5f5f5;
}

.search-product-item img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    border-radius: 6px;
    background: #fff;
    flex-shrink: 0;
}

.search-product-info {
    flex: 1;
    min-width: 0;
}

.search-product-name {
    font-size: 13px;
    font-weight: 500;
    color: #1f2937;
    line-height: 1.35;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-product-name strong,
.search-product-name b {
    color: var(--primaryColor);
    font-weight: 700;
}

.search-product-price {
    font-size: 13px;
    color: #059669;
    font-weight: 600;
}

.search-product-price .old-price {
    color: #9ca3af;
    text-decoration: line-through;
    font-weight: 400;
    margin-right: 6px;
    font-size: 12px;
}

/* Link Listesi (Kategoriler, Markalar, Etiketler) */
.search-links-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 16px 14px;
}

.search-link-item {
    display: inline-block;
    padding: 6px 12px;
    font-size: 12px;
    color: #4b5563;
    background: #f3f4f6;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.search-link-item:hover {
    background: var(--primaryColor);
    color: #fff;
}

/* "+X ürün daha" linki */
.search-link-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--primaryColor);
    background: transparent;
    border: 1px dashed var(--primaryColor);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.search-link-more:hover {
    background: var(--primaryColor);
    color: #fff;
    border-style: solid;
}

.search-link-more i {
    font-size: 10px;
    transition: transform 0.2s ease;
}

.search-link-more:hover i {
    transform: translateX(3px);
}

/* Eski stiller uyumluluk için */
.search-visual-product-price {
    font-weight: 600;
    color: var(--primaryColor);
    font-size: 14px;
    white-space: nowrap;
}

/* ===== METİN MOD (VARSAYILAN) ===== */
.search-results-content {
    display: flex;
    gap: 0;
    padding: 16px;
}

.search-results-content .col {
    flex: 1;
    min-width: 0;
    padding: 0 16px;
    border-right: 1px solid #f3f4f6;
}

.search-results-content .col:last-child {
    border-right: none;
}

.search-results-content h6 {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #f3f4f6;
}

.search-results-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.search-results-content li {
    padding: 8px 10px;
    font-size: 13px;
    color: #4b5563;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
    margin-bottom: 4px;
}

.search-results-content li:hover {
    background: var(--primaryColor);
    color: #fff;
}

.search-results-content li:last-child {
    margin-bottom: 0;
}

/* ===== TÜM SONUÇLARI GÖR BUTONU ===== */
.search-dropdown .btn-see-all,
.search-dropdown a[href*="arama"],
.search-dropdown .search-seeall {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    background: #f8fafc;
    border-top: 1px solid #e5e7eb;
    color: var(--primaryColor);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 0 0 12px 12px;
    cursor: pointer;
}

.search-dropdown .btn-see-all:hover,
.search-dropdown a[href*="arama"]:hover,
.search-dropdown .search-seeall:hover {
    background: var(--primaryColor);
    color: #fff;
}

.search-dropdown .btn-see-all i,
.search-dropdown a[href*="arama"] i {
    transition: transform 0.3s ease;
}

.search-dropdown .btn-see-all:hover i,
.search-dropdown a[href*="arama"]:hover i {
    transform: translateX(4px);
}

/* ===== DROPDOWN FOOTER ===== */
.search-dropdown-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #f8fafc;
    border-top: 1px solid #e5e7eb;
    border-radius: 0 0 12px 12px;
    flex-shrink: 0;
}

.search-result-count {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
}

.search-dropdown-footer .search-seeall {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primaryColor);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 6px 12px;
    border-radius: 6px;
    background: transparent;
    border: none;
    width: auto;
}

.search-dropdown-footer .search-seeall:hover {
    background: var(--primaryColor);
    color: #fff;
}

.search-dropdown-footer .search-seeall i {
    font-size: 11px;
    transition: transform 0.2s ease;
}

.search-dropdown-footer .search-seeall:hover i {
    transform: translateX(3px);
}

/* ===== GÖRSEL MOD STİLLERİ ===== */
.search-visual-content {
    display: flex;
    max-height: 380px;
    overflow-y: auto;
}

.search-visual-categories {
    min-width: 180px;
    max-width: 200px;
    background: #f8fafc;
    border-right: 1px solid #e5e7eb;
    padding: 8px 0;
}

.search-visual-cat-item {
    padding: 8px 16px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    transition: all 0.15s ease;
}

.search-visual-cat-item:hover {
    background: #fff;
    color: var(--primaryColor);
}

.search-visual-products {
    flex: 1;
    padding: 8px;
}

.search-visual-product {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.search-visual-product:hover {
    background: #f3f4f6;
}

.search-visual-product img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 6px;
    background: #fff;
    flex-shrink: 0;
}

.search-visual-product-info {
    flex: 1;
    min-width: 0;
}

.search-visual-product-name {
    font-size: 13px;
    font-weight: 500;
    color: #1f2937;
    line-height: 1.3;
    margin-bottom: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-visual-product-price {
    font-size: 12px;
}

/* ===== KLAVYE NAVİGASYONU (aktif öğe) ===== */
.search-link-item.is-active,
.search-link-more.is-active,
.search-dropdown-footer .search-seeall.is-active {
    background: var(--primaryColor);
    color: #fff;
}

.search-visual-product.is-active,
.search-visual-cat-item.is-active {
    background: #f3f4f6;
}

/* ===== LOADING DURUMU ===== */
.search-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    font-size: 13px;
    color: #6b7280;
}

/* ===== MOBİL DRAWER ARAMASI (buton + akış/accordion dropdown) ===== */
.modern-mobile-nav .mobile-nav-search {
    align-items: flex-start;
}

.modern-mobile-nav .mobile-nav-search .search-btn {
    position: absolute;
    right: 6px;
    top: 6px;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 8px;
    background: var(--primaryColor);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
}

.modern-mobile-nav .mobile-nav-search .search-dropdown {
    position: static;
    width: 100%;
    max-width: 100%;
    box-shadow: none;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin-top: 8px;
    max-height: 55vh;
    animation: none;
}

/* ===== ARAMA RESPONSIVE - TABLET ===== */
@media (max-width: 992px) {
    .modern-search-form .search-input {
        padding: 12px 18px;
        padding-right: 50px;
        font-size: 14px;
        border-radius: 12px;
    }

    .modern-search-form .search-btn {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }

    .modern-search-form .search-btn i {
        font-size: 14px;
    }

    .search-dropdown {
        border-radius: 14px;
    }

    .search-visual-categories {
        min-width: 160px;
        max-width: 180px;
    }
}

/* ===== ARAMA RESPONSIVE - MOBİL ===== */
@media (max-width: 768px) {
    .modern-search-form .search-input {
        padding: 12px 16px;
        padding-right: 46px;
        font-size: 14px;
        border-radius: 12px;
        border-width: 1.5px;
    }

    .modern-search-form .search-input:focus {
        box-shadow: 0 0 0 3px rgba(var(--primaryColor-rgb), 0.1);
    }

    .modern-search-form .search-btn {
        width: 36px;
        height: 36px;
        right: 5px;
        border-radius: 10px;
    }

    .modern-search-form .search-btn i {
        font-size: 13px;
    }

    .search-dropdown {
        position: absolute;
        left: 0;
        right: 0;
        width: auto;
        max-height: 70vh;
        border-radius: 12px;
    }

    .search-count-info {
        border-radius: 12px 12px 0 0;
    }

    /* Ürün Grid Mobil - Tek sütun */
    .search-products-grid {
        grid-template-columns: 1fr !important;
    }

    /* Dropdown Footer Mobil */
    .search-dropdown-footer {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .search-dropdown-footer .search-seeall {
        width: 100%;
        justify-content: center;
    }

    /* Görsel Mod Mobil */
    .search-visual-content {
        flex-direction: column;
    }

    .search-visual-categories {
        min-width: 100%;
        max-width: 100%;
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
    }

    /* Metin Mod Mobil */
    .search-results-content {
        flex-direction: column;
        gap: 16px;
        padding: 16px;
    }

    .search-results-content .col {
        width: 100%;
        padding: 0;
        border-right: none;
        border-bottom: 1px solid #f3f4f6;
        padding-bottom: 16px;
    }

    .search-results-content .col:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .search-results-content h6 {
        font-size: 11px;
        margin-bottom: 10px;
    }

    .search-results-content li {
        padding: 8px 10px;
        font-size: 13px;
    }

    /* Tüm Sonuçları Gör Mobil */
    .search-dropdown .btn-see-all,
    .search-dropdown a[href*="arama"] {
        padding: 12px 16px;
        font-size: 13px;
    }
}

/* ===== ARAMA RESPONSIVE - KÜÇÜK MOBİL ===== */
@media (max-width: 576px) {
    .modern-search-form .search-input {
        padding: 10px 14px;
        padding-right: 42px;
        font-size: 13px;
        border-radius: 10px;
    }

    .modern-search-form .search-btn {
        width: 32px;
        height: 32px;
        right: 5px;
        border-radius: 8px;
    }

    .modern-search-form .search-btn i {
        font-size: 12px;
    }

    .search-dropdown {
        left: 0;
        right: 0;
        max-height: 65vh;
        border-radius: 10px;
    }

    .search-count-info {
        border-radius: 10px 10px 0 0;
    }

    .search-dropdown .search-seeall {
        border-radius: 0 0 10px 10px;
    }
}

/* ============================================
   ARAMA KUTUSU YENİDEN TASARIM - SON
   ============================================ */

/* ============================================
   MODERN SHOP GRID TOPBAR
   Kategori sayfası filtreleme çubuğu
   Mobile-first responsive tasarım
   ============================================ */

.shop-grid-topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* ===== FIRST BLOCK - Sol taraf ===== */
.shop-grid-topbar .first-block {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

/* Grid/List View Butonları */
.shop-grid-topbar .visual-btns {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #f3f4f6;
    padding: 4px;
    border-radius: 8px;
}

.shop-grid-topbar .visual-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: transparent;
    transition: all 0.2s ease;
    cursor: pointer;
}

.shop-grid-topbar .visual-box:hover {
    background: rgba(255, 255, 255, 0.8);
}

.shop-grid-topbar .visual-box.active {
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.shop-grid-topbar .visual-box svg {
    width: 18px;
    height: 18px;
}

.shop-grid-topbar .visual-box.active svg path {
    fill: var(--primaryColor, #ff0013);
}

/* Ürün Sayısı */
.shop-grid-topbar .results p {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    white-space: nowrap;
}

/* ===== LAST BLOCK - Sağ taraf ===== */
.shop-grid-topbar .last-block {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.shop-grid-topbar .last-block>.d-flex {
    gap: 10px !important;
    flex-wrap: wrap;
}

/* Sırala ve Göster dropdown'ları - mobilde de görünür */
.shop-grid-topbar .last-block .d-lg-flex.d-none {
    display: flex !important;
}

/* Dropdown Container */
.shop-grid-topbar .drop-container {
    position: relative;
}

.shop-grid-topbar .wrapper-dropdown {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}

.shop-grid-topbar .wrapper-dropdown:hover {
    border-color: var(--primaryColor, #ff0013);
    box-shadow: 0 0 0 3px rgba(var(--primaryColor-rgb), 0.08);
}

.shop-grid-topbar .wrapper-dropdown .selected-display {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shop-grid-topbar .wrapper-dropdown .arrow {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.shop-grid-topbar .wrapper-dropdown.active .arrow {
    transform: rotate(0deg) !important;
}

/* Dropdown Menü */
.shop-grid-topbar .topbar-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: auto;
    min-width: 180px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    padding: 6px;
    list-style: none;
    margin: 0;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
}

.shop-grid-topbar .wrapper-dropdown.active .topbar-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.shop-grid-topbar .topbar-dropdown .item {
    padding: 0;
    margin: 0;
}

.shop-grid-topbar .topbar-dropdown .item a {
    display: block;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.shop-grid-topbar .topbar-dropdown .item a:hover {
    background: #f3f4f6;
    color: var(--primaryColor, #ff0013);
}

.shop-grid-topbar .topbar-dropdown .item a.active {
    background: rgba(var(--primaryColor-rgb), 0.08);
    color: var(--primaryColor, #ff0013);
}

/* Sırala Label */
.shop-grid-topbar .last-block p.dark-gray {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    white-space: nowrap;
}

/* Stok Checkbox */
.shop-grid-topbar .check-block {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.shop-grid-topbar .check-block:hover {
    border-color: var(--primaryColor, #ff0013);
}

.shop-grid-topbar .check-block input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primaryColor, #ff0013);
    cursor: pointer;
}

.shop-grid-topbar .check-block label {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    white-space: nowrap;
    cursor: pointer;
}

/* ===== TABLET RESPONSIVE (577px - 992px) ===== */
@media (max-width: 992px) {
    .shop-grid-topbar {
        padding: 12px 14px;
        gap: 10px;
    }

    .shop-grid-topbar .first-block {
        gap: 12px;
    }

    .shop-grid-topbar .visual-box {
        width: 34px;
        height: 34px;
    }

    .shop-grid-topbar .wrapper-dropdown {
        padding: 7px 10px;
        min-width: 90px;
        font-size: 12px;
    }

    .shop-grid-topbar .check-block {
        padding: 7px 10px;
    }

    .shop-grid-topbar .check-block label {
        font-size: 12px;
    }
}

/* ===== MOBİL RESPONSIVE (576px ve altı) - YENİ DÜZEN ===== */
@media (max-width: 576px) {
    .shop-grid-topbar {
        flex-direction: column;
        align-items: stretch;
        padding: 12px;
        gap: 10px;
        border-radius: 10px;
    }

    /* Grid/List butonlarını mobilde gizle */
    .shop-grid-topbar .visual-btns {
        display: none !important;
    }

    /* ===== ÜST SATIR: Ürün Sayısı (sol) + Stok Filtresi (sağ) ===== */
    .shop-grid-topbar .first-block {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        gap: 10px;
        order: 1;
    }

    .shop-grid-topbar .results {
        flex: 1;
    }

    .shop-grid-topbar .results p {
        font-size: 13px;
        font-weight: 500;
        color: #374151;
        text-align: left;
        margin: 0;
    }

    /* ===== ALT SATIR: Dropdown'lar yan yana ===== */
    .shop-grid-topbar .last-block {
        width: 100%;
        order: 2;
        flex-wrap: nowrap;
    }

    .shop-grid-topbar .last-block>.d-flex {
        display: flex !important;
        width: 100%;
        gap: 8px;
        flex-wrap: nowrap;
    }

    /* Sırala label'ını gizle */
    .shop-grid-topbar .last-block p.dark-gray {
        display: none;
    }

    /* Sıralama dropdown container - mobilde flex: 1 */
    .shop-grid-topbar .last-block>.d-flex>.d-flex {
        flex: 1;
    }

    /* Dropdown'lar %50 genişlikte */
    .shop-grid-topbar .drop-container {
        flex: 1;
    }

    /* First-block içindeki mobil stok checkbox */
    .shop-grid-topbar .first-block>.check-block {
        padding: 6px 12px;
        border-radius: 20px;
        background: #f3f4f6;
        border: 1px solid #e5e7eb;
        margin: 0;
        flex-shrink: 0;
    }

    .shop-grid-topbar .first-block>.check-block:has(input:checked) {
        background: rgba(var(--primaryColor-rgb, 255, 0, 19), 0.1);
        border-color: var(--primaryColor, #ff0013);
    }

    .shop-grid-topbar .first-block>.check-block input[type="checkbox"] {
        width: 14px;
        height: 14px;
    }

    .shop-grid-topbar .first-block>.check-block label {
        font-size: 11px;
        font-weight: 500;
        white-space: nowrap;
    }

    .shop-grid-topbar .wrapper-dropdown {
        width: 100%;
        padding: 10px 12px;
        min-width: 0;
        font-size: 12px;
        justify-content: space-between;
    }

    .shop-grid-topbar .wrapper-dropdown .selected-display {
        font-size: 12px;
        flex: 1;
        text-align: left;
    }

    .shop-grid-topbar .wrapper-dropdown .arrow {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
    }

    /* Dropdown menü mobil */
    .shop-grid-topbar .topbar-dropdown {
        min-width: 160px;
        left: 0;
        right: auto;
    }

    /* Sağdaki dropdown için sağa hizala */
    .shop-grid-topbar .drop-container:last-child .topbar-dropdown {
        left: auto;
        right: 0;
    }

    .shop-grid-topbar .topbar-dropdown .item a {
        padding: 10px 12px;
        font-size: 12px;
    }

    /* ===== STOK FİLTRESİ - Üst satırda sağda ===== */
    .shop-grid-topbar .check-block {
        padding: 6px 12px;
        border-radius: 20px;
        background: #f3f4f6;
        border: 1px solid #e5e7eb;
        margin: 0;
        flex-shrink: 0;
    }

    .shop-grid-topbar .check-block:has(input:checked) {
        background: rgba(var(--primaryColor-rgb, 255, 0, 19), 0.1);
        border-color: var(--primaryColor, #ff0013);
    }

    .shop-grid-topbar .check-block input[type="checkbox"] {
        width: 14px;
        height: 14px;
    }

    .shop-grid-topbar .check-block label {
        font-size: 11px;
        font-weight: 500;
    }

    /* Last-block içindeki stok checkbox'unu mobilde gizle (first-block'ta zaten var) */
    .shop-grid-topbar .last-block .check-block,
    .shop-grid-topbar .last-block .d-none.d-lg-flex {
        display: none !important;
    }
}

/* ===== ÇOK KÜÇÜK MOBİL (400px ve altı) ===== */
@media (max-width: 400px) {
    .shop-grid-topbar {
        padding: 10px;
        gap: 10px;
    }

    .shop-grid-topbar .visual-box {
        width: 30px;
        height: 30px;
    }

    .shop-grid-topbar .visual-box svg {
        width: 14px;
        height: 14px;
    }

    .shop-grid-topbar .results p {
        font-size: 11px;
    }

    .shop-grid-topbar .wrapper-dropdown {
        padding: 7px 8px;
        font-size: 11px;
    }

    .shop-grid-topbar .wrapper-dropdown .selected-display {
        font-size: 11px;
    }

    .shop-grid-topbar .check-block label {
        font-size: 11px;
    }
}

/* ============================================
   MODERN SHOP GRID TOPBAR - SON
   ============================================ */

/* ============================================
   MOBİL ÜRÜN GÖRÜNÜMÜ - İKİ KOLON (HOPİ TARZI)
   Admin panelden açılıp kapatılabilir kompakt grid
   ============================================ */

/* Mobil 2 Kolon aktifken uygulanan stiller */
@media (max-width: 576px) {

    /* İki kolon grid wrapper - KRİTİK: flex-wrap açıkça belirtilmeli */
    /* NOT: gap kullanılmaz çünkü col-6 (%50) + gap = %100'ü aşar ve 2. ürün alta düşer */
    .mobile-grid-two-col {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    .mobile-grid-two-col [data-product-card] {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    /* Kompakt kart container */
    .mobile-grid-two-col .featured-product-card {
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }

    /* Kompakt resim alanı */
    .mobile-grid-two-col .image-box,
    .mobile-grid-two-col .product-image-container {
        padding: 8px !important;
        aspect-ratio: 1 / 1 !important;
        margin-bottom: 8px !important;
    }

    /* Resim galeri noktaları küçült */
    .mobile-grid-two-col .product-gallery-dots {
        bottom: 4px;
    }

    .mobile-grid-two-col .gallery-dot {
        width: 5px;
        height: 5px;
    }

    /* Favori butonu küçült */
    .mobile-grid-two-col .favorite-heart {
        width: 28px;
        height: 28px;
        font-size: 12px;
        top: 4px;
        right: 4px;
    }

    /* İndirim badge küçült */
    .mobile-grid-two-col .sale-label {
        font-size: 10px;
        padding: 2px 6px;
    }

    /* YENİ badge küçült */
    .mobile-grid-two-col .product-badge.badge-new {
        font-size: 9px;
        padding: 2px 5px;
    }

    /* Ürün açıklaması */
    .mobile-grid-two-col .product-desc {
        padding: 0 8px 8px 8px !important;
    }

    /* Stok kodu */
    .mobile-grid-two-col .stock-code-value {
        font-size: 10px !important;
    }

    /* Stok sayısı */
    .mobile-grid-two-col .stock-amount-value {
        font-size: 10px !important;
        margin-bottom: 4px !important;
    }

    .mobile-grid-two-col .stock-amount-value span {
        font-size: 10px !important;
    }

    /* Ürün başlığı - ortalı, kesilmez */
    .mobile-grid-two-col .product-title {
        margin-bottom: 4px !important;
        text-align: center !important;
    }

    .mobile-grid-two-col .product-title a {
        font-size: 11px !important;
        line-height: 1.3 !important;
    }

    /* İndirim etiketleri */
    .mobile-grid-two-col .product-discount {
        font-size: 9px !important;
        padding: 2px 4px !important;
    }

    /* Fiyat kutusu */
    .mobile-grid-two-col .price-box {
        margin-bottom: 8px !important;
    }

    .mobile-grid-two-col .price-box h6 {
        font-size: 12px !important;
    }

    .mobile-grid-two-col .price-box h6 span.fw-bold {
        font-size: 13px !important;
    }

    .mobile-grid-two-col .price-box h6 span.text-decoration-line-through {
        font-size: 10px !important;
    }

    /* Kargo ücretsiz etiketi */
    .mobile-grid-two-col .free-shipping {
        font-size: 9px !important;
        padding: 2px 4px !important;
    }

    /* Sepete ekle butonu */
    .mobile-grid-two-col .align-items-center.gap-2 {
        flex-direction: column;
        gap: 4px !important;
    }

    .mobile-grid-two-col .quantityinput,
    .mobile-grid-two-col input[type="number"] {
        width: 100% !important;
        height: 32px !important;
        font-size: 12px !important;
        padding: 4px 8px !important;
    }

    .mobile-grid-two-col .cus-btn-2 {
        padding: 6px 10px !important;
        font-size: 11px !important;
        width: 100% !important;
    }

    .mobile-grid-two-col .btn-notification-stock {
        font-size: 10px !important;
        padding: 6px 8px !important;
    }

    /* İndirim sayacı küçült */
    .mobile-grid-two-col .discount-timer-overlay {
        font-size: 9px !important;
        padding: 3px 6px !important;
    }

    .mobile-grid-two-col .discount-timer-overlay .timer-text {
        font-size: 9px !important;
    }

    /* TÜKENDİ overlay */
    .mobile-grid-two-col .out-of-stock-overlay {
        font-size: 11px !important;
    }

    /* Badge'ler küçült */
    .mobile-grid-two-col .product-badges-top-left,
    .mobile-grid-two-col .product-badges-bottom-left {
        max-width: 90%;
    }

    .mobile-grid-two-col .product-badge-custom {
        font-size: 8px !important;
        padding: 2px 4px !important;
    }

    .mobile-grid-two-col .product-badge-image {
        max-height: 18px !important;
    }
}

/* Tek kolon için ekstra stil gerekmez - varsayılan davranış kullanılır */

/* ============================================
   MOBİL ÜRÜN RESİM DÜZELTME
   Gallery inline style override + mobil aspect-ratio
   ============================================ */
@media (max-width: 768px) {

    /* Gallery'nin inline style'larını (height:250px, position-relative) override et */
    .product-image-container .product-image-gallery {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        height: auto !important;
    }

    /* Tek kolon mobil: 4:3 oran koru */
    .mobile-grid-single-col .product-image-container,
    .mobile-grid-single-col .image-box {
        aspect-ratio: 4 / 3;
        padding: 10px;
    }

    /* Anasayfa önerilen ürünler */
    .recommended-product .product-image-container {
        aspect-ratio: 4 / 3;
        padding: 10px;
    }
}

/* ============================================
   MOBİL ÜRÜN RESİM DÜZELTME - SON
   ============================================ */

/* ============================================
   MOBİL ÜRÜN GÖRÜNÜMÜ - SON
   ============================================ */

/* ============================================
   MODERN DESKTOP BREADCRUMB
   Kategori sayfası breadcrumb tasarımı
   ============================================ */

/* Ana Container */
nav.breadcrumb.category-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 12px 16px;
    margin: 0 0 16px 0;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    list-style: none;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

nav.breadcrumb.category-breadcrumb::-webkit-scrollbar {
    display: none;
}

/* Breadcrumb Item */
.category-breadcrumb .breadcrumb-item {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    color: #6b7280;
}

/* Home Link - İkon */
.category-breadcrumb .breadcrumb-home {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #f3f4f6;
    border-radius: 8px;
    color: #6b7280;
    text-decoration: none;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.category-breadcrumb .breadcrumb-home:hover {
    background: var(--primaryColor, #ff0013);
    color: #fff;
}

.category-breadcrumb .breadcrumb-home i {
    font-size: 14px;
}

/* Separator - Chevron */
.category-breadcrumb .breadcrumb-separator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    color: #d1d5db;
    font-size: 10px;
    flex-shrink: 0;
}

.category-breadcrumb .breadcrumb-separator i {
    font-size: 10px;
}

/* Normal Link */
.category-breadcrumb .breadcrumb-link {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    color: #6b7280;
    text-decoration: none;
    font-weight: 500;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.category-breadcrumb .breadcrumb-link:hover {
    background: #f3f4f6;
    color: var(--primaryColor, #ff0013);
}

/* Current/Active Item */
.category-breadcrumb .breadcrumb-current {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: rgba(var(--primaryColor-rgb), 0.08);
    color: var(--primaryColor, #ff0013);
    font-weight: 600;
    font-style: normal;
    border-radius: 6px;
    /* 30 karaktere kadar serbest - masaüstünde sınır yok */
}

/* ===== TABLET RESPONSIVE ===== */
@media (max-width: 992px) {
    nav.breadcrumb.category-breadcrumb {
        padding: 10px 14px;
        border-radius: 8px;
    }

    .category-breadcrumb .breadcrumb-home {
        width: 30px;
        height: 30px;
    }

    .category-breadcrumb .breadcrumb-link,
    .category-breadcrumb .breadcrumb-current {
        padding: 5px 10px;
        font-size: 12px;
    }
}

/* ===== MOBİL RESPONSIVE ===== */
@media (max-width: 576px) {
    nav.breadcrumb.category-breadcrumb {
        padding: 10px 12px;
        margin-bottom: 12px;
        gap: 0;
    }

    .category-breadcrumb .breadcrumb-home {
        width: 28px;
        height: 28px;
        min-width: 28px;
    }

    .category-breadcrumb .breadcrumb-home i {
        font-size: 12px;
    }

    .category-breadcrumb .breadcrumb-separator {
        width: 20px;
    }

    .category-breadcrumb .breadcrumb-separator i {
        font-size: 9px;
    }

    .category-breadcrumb .breadcrumb-link {
        padding: 4px 8px;
        font-size: 12px;
    }

    .category-breadcrumb .breadcrumb-current {
        padding: 4px 10px;
        font-size: 12px;
        /* Mobilde de serbest, horizontal scroll var */
    }
}

/* ===== ÇOK KÜÇÜK MOBİL ===== */
@media (max-width: 400px) {
    nav.breadcrumb.category-breadcrumb {
        padding: 8px 10px;
    }

    .category-breadcrumb .breadcrumb-home {
        width: 26px;
        height: 26px;
        min-width: 26px;
    }

    .category-breadcrumb .breadcrumb-link,
    .category-breadcrumb .breadcrumb-current {
        padding: 4px 6px;
        font-size: 11px;
    }
}

/* ============================================
   MODERN DESKTOP BREADCRUMB - SON
   ============================================ */

/* ============================================
   ÜRÜN GALLERY (Çoklu Resim) STİLLERİ
   Kategori sayfası ürün kartları için
   ============================================ */

/* Gallery Container */
.product-image-gallery {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.product-image-gallery a {
    display: block;
    width: 100%;
    height: 100%;
}

/* Gallery Resimleri */
.product-gallery-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.product-gallery-img.active {
    opacity: 1;
}

/* Gallery Dots (Noktalar) */
.product-gallery-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 10;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
}

.gallery-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.gallery-dot:hover {
    background: rgba(255, 255, 255, 0.8);
    transform: scale(1.2);
}

.gallery-dot.active {
    background: var(--primaryColor, #ff0013);
}

/* Image Container içindeki gallery için uyum */
.product-image-container .product-image-gallery {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* Mobil için dots */
@media (max-width: 576px) {
    .product-gallery-dots {
        bottom: 8px;
        gap: 5px;
        padding: 3px 6px;
    }

    .gallery-dot {
        width: 6px;
        height: 6px;
    }
}

/* ============================================
   ÜRÜN GALLERY STİLLERİ - SON
   ============================================ */

/* ============================================
   MODERN KATEGORİ LİSTESİ (SIDEBAR)
   Tree view tasarımı - Bağlantı çizgileri ile
   ============================================ */

/* Dinamik Kategori Başlığı */
.category-header-dynamic {
    display: flex;
    align-items: center;
    gap: 12px;
}

.category-header-dynamic h6 {
    margin: 0;
    flex: 1;
}

.category-header-dynamic .category-header-link {
    color: #1f2937;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.category-header-dynamic .category-header-link:hover {
    color: var(--primaryColor, #ff0013);
}

.category-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #f3f4f6;
    border-radius: 8px;
    color: #6b7280;
    text-decoration: none;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.category-back-btn:hover {
    background: var(--primaryColor, #ff0013);
    color: #fff;
}

.category-back-btn i {
    font-size: 14px;
}

/* Parent kategori gizleme - alt kategoriler direkt gösterilsin */
.parent-category-item>.arrow-block,
#categoryTree .parent-category-item>.arrow-block,
#categoryTree>li.parent-category-item>.arrow-block,
ul#categoryTree>.parent-category-item>.arrow-block {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.parent-category-item>.sub-checkboxesx,
#categoryTree .parent-category-item>.sub-checkboxesx,
#categoryTree>li.parent-category-item>.sub-checkboxesx {
    margin-left: 0 !important;
    padding-left: 0 !important;
    border-left: none !important;
    margin-top: 0 !important;
}

/* Ana Liste Container */
#categoryTree.category-root {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

#categoryTree.category-root>li {
    list-style: none !important;
    margin-bottom: 4px;
}

#categoryTree.category-root li {
    list-style: none !important;
}

#categoryTree.category-root ul {
    padding-left: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* Checkbox Group - Her kategori satırı */
#categoryTree .checkbox-group {
    position: relative;
    margin-bottom: 2px;
}

/* Arrow Block - Ana kategori kutusu */
#categoryTree>.checkbox-group>.arrow-block {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 14px !important;
    margin-bottom: 0 !important;
    background: linear-gradient(135deg, #f8f9fa 0%, #f3f4f6 100%) !important;
    border-radius: 10px !important;
    border: 1px solid #e5e7eb !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

#categoryTree>.checkbox-group>.arrow-block:hover {
    background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%) !important;
    border-color: var(--primaryColor, #ff0013) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* Alt kategorilerde arrow-block */
#categoryTree .arrow-block {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 12px !important;
    margin-bottom: 0 !important;
    background: transparent !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

#categoryTree .arrow-block:hover {
    background: rgba(0, 0, 0, 0.03) !important;
}

/* Kategori Link */
#categoryTree .category-link {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #374151 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    padding-right: 10px !important;
    position: relative !important;
}

#categoryTree .category-link:hover {
    color: var(--primaryColor, #ff0013) !important;
}

/* Aktif Kategori Link */
#categoryTree .category-link.active-link {
    color: var(--primaryColor, #ff0013) !important;
    font-weight: 600 !important;
}

/* Ana kategori aktif göstergesi - sol çizgi */
#categoryTree>.checkbox-group>.arrow-block .category-link.active-link::before {
    content: '' !important;
    position: absolute !important;
    left: -14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 4px !important;
    height: 70% !important;
    background: var(--primaryColor, #ff0013) !important;
    border-radius: 0 3px 3px 0 !important;
}

/* Toggle Icon */
#categoryTree .toggle-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    background: #e5e7eb !important;
    border-radius: 6px !important;
    color: #6b7280 !important;
    font-size: 11px !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    flex-shrink: 0 !important;
}

#categoryTree .toggle-icon:hover {
    background: var(--primaryColor, #ff0013) !important;
    color: #fff !important;
    transform: scale(1.05) !important;
}

#categoryTree .toggle-icon.rotated {
    transform: rotate(180deg) !important;
    background: var(--primaryColor, #ff0013) !important;
    color: #fff !important;
}

/* ===== TREE VIEW - BAĞLANTI ÇİZGİLERİ ===== */
/* NOT: display jQuery tarafından kontrol ediliyor, CSS'de tanımlanmadı */

/* Alt Kategoriler - 1. Seviye (sub-checkboxesx) */
#categoryTree .sub-checkboxesx {
    margin-top: 8px;
    margin-left: 20px;
    padding-left: 16px;
    border-left: 2px solid #d1d5db;
    position: relative;
}

/* Alt Kategoriler - 2+ Seviye (sub-checkboxes) */
#categoryTree .sub-checkboxes {
    margin-top: 6px;
    margin-left: 16px;
    padding-left: 14px;
    border-left: 2px solid #d1d5db;
    position: relative;
}

/* Tree bağlantı noktası - her alt kategoride yatay çizgi */
#categoryTree .sub-checkboxesx>.checkbox-group::before,
#categoryTree .sub-checkboxes>.checkbox-group::before {
    content: '' !important;
    position: absolute !important;
    left: -16px !important;
    top: 18px !important;
    width: 12px !important;
    height: 2px !important;
    background: #e5e7eb !important;
}

/* Alt kategorilerde hover efekti */
#categoryTree .sub-checkboxesx>.checkbox-group>.arrow-block:hover,
#categoryTree .sub-checkboxes>.checkbox-group>.arrow-block:hover {
    background: rgba(var(--primaryColor-rgb), 0.06) !important;
    border-radius: 6px !important;
}

/* Alt kategori linkleri */
#categoryTree .sub-checkboxesx .category-link,
#categoryTree .sub-checkboxes .category-link {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #4b5563 !important;
}

#categoryTree .sub-checkboxesx .category-link:hover,
#categoryTree .sub-checkboxes .category-link:hover {
    color: var(--primaryColor, #ff0013) !important;
}

/* Alt kategori toggle icon - daha küçük */
#categoryTree .sub-checkboxesx .toggle-icon,
#categoryTree .sub-checkboxes .toggle-icon {
    width: 24px !important;
    height: 24px !important;
    font-size: 10px !important;
}

/* Nested sub-checkboxes için daha derin indent */
#categoryTree .sub-checkboxes .sub-checkboxes {
    margin-left: 14px !important;
    padding-left: 12px !important;
    border-left-color: #d1d5db !important;
}

/* Aktif alt kategori */
#categoryTree .sub-checkboxesx .category-link.active-link,
#categoryTree .sub-checkboxes .category-link.active-link {
    color: var(--primaryColor, #ff0013) !important;
    font-weight: 600 !important;
}

/* Aktif alt kategoride sol nokta göstergesi */
#categoryTree .sub-checkboxesx .category-link.active-link::before,
#categoryTree .sub-checkboxes .category-link.active-link::before {
    content: '' !important;
    position: absolute !important;
    left: -20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 6px !important;
    height: 6px !important;
    background: var(--primaryColor, #ff0013) !important;
    border-radius: 50% !important;
}

/* Animasyonlar - jQuery slideToggle kullanıyor, CSS animation gereksiz */

@keyframes categorySlideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

/* ===== KATEGORİ - MOBİL RESPONSIVE ===== */
@media (max-width: 992px) {
    #categoryTree>.checkbox-group>.arrow-block {
        padding: 14px 16px;
    }

    #categoryTree .category-link {
        font-size: 14px;
    }

    #categoryTree .toggle-icon {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }

    #categoryTree .sub-checkboxesx,
    #categoryTree .sub-checkboxes {
        margin-left: 16px;
        padding-left: 14px;
    }

    #categoryTree .sub-checkboxesx>.checkbox-group::before,
    #categoryTree .sub-checkboxes>.checkbox-group::before {
        left: -14px;
        width: 10px;
    }
}

@media (max-width: 576px) {
    #categoryTree>.checkbox-group>.arrow-block {
        padding: 14px;
    }

    #categoryTree .category-link {
        font-size: 14px;
    }

    #categoryTree .sub-checkboxesx .arrow-block,
    #categoryTree .sub-checkboxes .arrow-block {
        padding: 10px;
    }

    #categoryTree .sub-checkboxesx .toggle-icon,
    #categoryTree .sub-checkboxes .toggle-icon {
        width: 28px;
        height: 28px;
    }

    #categoryTree .sub-checkboxesx,
    #categoryTree .sub-checkboxes {
        margin-left: 12px !important;
        padding-left: 12px !important;
    }
}

/* ============================================
   MODERN KATEGORİ LİSTESİ - SON
   ============================================ */

/* ============================================
   MODERN FİLTRE PANELİ
   ============================================ */

/* ===== KATEGORİ-FİLTRE AYIRICI ===== */
.category-filter-separator {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    padding: 0 4px;
}

.category-filter-separator::before,
.category-filter-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, #e5e7eb 20%, #e5e7eb 80%, transparent);
}

.category-filter-separator span {
    font-size: 11px;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.category-filter-separator i {
    font-size: 12px;
    color: var(--primaryColor, #ff0013);
    margin-right: 6px;
}

/* Ana Container */
.modern-filters-container {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
}

/* ===== AKTİF FİLTRELER BÖLÜMÜ ===== */
.active-filters-section {
    background: linear-gradient(135deg, #fef3f2 0%, #fff 100%);
    border: 1px solid var(--primaryColor-light);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
}

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

.active-filters-title {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}

.active-filters-title i {
    color: var(--primaryColor, #ff0013);
    margin-right: 6px;
}

.clear-all-filters {
    font-size: 12px;
    color: #6b7280;
    text-decoration: none;
    transition: color 0.2s;
}

.clear-all-filters:hover {
    color: var(--primaryColor, #ff0013);
}

.active-filters-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    font-size: 12px;
    color: #374151;
    transition: all 0.2s;
}

.filter-chip:hover {
    border-color: var(--primaryColor, #ff0013);
}

.filter-chip i {
    font-size: 10px;
    color: #9ca3af;
}

.filter-chip-price {
    background: linear-gradient(135deg, #fef3c7 0%, #fff 100%);
    border-color: #fcd34d;
}

.chip-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    background: #f3f4f6;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
}

.chip-remove:hover {
    background: var(--primaryColor, #ff0013);
    color: #fff;
}

.chip-remove i {
    font-size: 8px;
    color: inherit;
}

/* ===== SCROLL ALANI ===== */
.filters-scroll-area {
    max-height: calc(100vh - 400px);
    overflow-y: auto;
    padding-right: 4px;
}

.filters-scroll-area::-webkit-scrollbar {
    width: 4px;
}

.filters-scroll-area::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 2px;
}

.filters-scroll-area::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 2px;
}

.filters-scroll-area::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* ===== ACCORDION FİLTRE ÖĞESİ ===== */
.filter-accordion-item {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: all 0.2s;
}

.filter-accordion-item:hover {
    border-color: #d1d5db;
}

.filter-accordion-item:last-child {
    margin-bottom: 0;
}

/* Accordion Header */
.filter-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: #f9fafb;
    cursor: pointer;
    transition: background 0.2s;
    user-select: none;
}

.filter-accordion-header:hover {
    background: #f3f4f6;
}

.filter-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.filter-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    color: #6b7280;
    font-size: 14px;
    flex-shrink: 0;
}

.filter-title {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
}

.filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--primaryColor, #ff0013);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    border-radius: 10px;
}

.filter-arrow {
    color: #9ca3af;
    font-size: 12px;
    transition: transform 0.3s ease;
}

.filter-accordion-header.collapsed .filter-arrow {
    transform: rotate(-90deg);
}

/* Accordion Body */
.filter-accordion-body {
    display: none;
    padding: 0 16px 16px;
    background: #fff;
}

.filter-accordion-body.show {
    display: block;
}

/* ===== ARAMA KUTUSU ===== */
.filter-search-box {
    position: relative;
    margin-bottom: 12px;
    margin-top: 12px;
}

.filter-search-box i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 14px;
}

.filter-search-box input {
    width: 100%;
    padding: 10px 12px 10px 38px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 13px;
    color: #374151;
    transition: all 0.2s;
    background: #f9fafb;
}

.filter-search-box input:focus {
    outline: none;
    border-color: var(--primaryColor, #ff0013);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(var(--primaryColor-rgb), 0.1);
}

.filter-search-box input::placeholder {
    color: #9ca3af;
}

/* ===== FİLTRE OPSİYON LİSTESİ ===== */
.filter-options-list {
    max-height: 280px;
    overflow-y: auto;
    margin-top: 8px;
}

.filter-options-list::-webkit-scrollbar {
    width: 4px;
}

.filter-options-list::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 2px;
}

/* ===== MODERN CHECKBOX ===== */
.filter-checkbox-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    margin-bottom: 4px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-checkbox-item:hover {
    background: #f3f4f6;
}

.filter-checkbox-item.checked {
    background: rgba(var(--primaryColor-rgb), 0.05);
}

.filter-checkbox-item input[type="checkbox"] {
    display: none;
}

.custom-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 2px solid #d1d5db;
    border-radius: 5px;
    margin-right: 12px;
    transition: all 0.2s;
    flex-shrink: 0;
}

.custom-checkbox i {
    font-size: 10px;
    color: #fff;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s;
}

.filter-checkbox-item:hover .custom-checkbox {
    border-color: var(--primaryColor, #ff0013);
}

.filter-checkbox-item.checked .custom-checkbox,
.filter-checkbox-item input:checked+.custom-checkbox {
    background: var(--primaryColor, #ff0013);
    border-color: var(--primaryColor, #ff0013);
}

.filter-checkbox-item.checked .custom-checkbox i,
.filter-checkbox-item input:checked+.custom-checkbox i {
    opacity: 1;
    transform: scale(1);
}

.filter-label {
    flex: 1;
    font-size: 13px;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.filter-count {
    font-size: 12px;
    color: #9ca3af;
    margin-left: 8px;
    padding: 2px 8px;
    background: #f3f4f6;
    border-radius: 10px;
}

/* ===== FİYAT FİLTRESİ (Radio Button) ===== */
.price-options-list {
    padding-top: 12px;
}

.filter-checkbox-item input[type="radio"] {
    display: none;
}

.filter-checkbox-item input[type="radio"]+.custom-checkbox {
    border-radius: 50%;
}

.filter-checkbox-item input[type="radio"]:checked+.custom-checkbox {
    background: var(--primaryColor, #ff0013);
    border-color: var(--primaryColor, #ff0013);
}

.filter-checkbox-item input[type="radio"]:checked+.custom-checkbox i {
    opacity: 1;
    transform: scale(1);
}

/* ===== FİLTRE BUTONLARI ===== */
.filter-actions {
    padding: 16px;
    margin-top: 20px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    position: relative;
    z-index: 10;
}

.filter-apply-btn {
    width: 100%;
    padding: 14px 20px;
    background: var(--primaryColor, #ff0013);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(var(--primaryColor-rgb), 0.25);
}

.filter-apply-btn:hover {
    background: var(--primaryColorDark, #e00011);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--primaryColor-rgb), 0.35);
}

.filter-apply-btn:active {
    transform: translateY(0);
}

.filter-apply-btn i {
    font-size: 12px;
}

/* ===== MOBİL RESPONSIVE ===== */
@media (max-width: 1199.98px) {
    .modern-filters-container {
        padding: 16px;
    }

    .filters-scroll-area {
        max-height: calc(100vh - 300px);
    }
}

@media (max-width: 768px) {
    .filter-accordion-header {
        padding: 12px 14px;
    }

    .filter-icon {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .filter-title {
        font-size: 13px;
    }

    .filter-checkbox-item {
        padding: 12px 10px;
    }

    .custom-checkbox {
        width: 22px;
        height: 22px;
    }

    .filter-apply-btn {
        padding: 16px;
        font-size: 15px;
    }
}

@media (max-width: 576px) {
    .active-filters-chips {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
    }

    .filter-chip {
        flex-shrink: 0;
    }

    .filters-scroll-area {
        max-height: calc(100vh - 250px);
    }
}

/* ========================================
   MODERN PAGINATION
   ======================================== */

.modern-pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 40px 0;
    margin-top: 20px;
}

.pagination-container {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    padding: 8px;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e7eb;
}

/* Pagination Buttons (Prev/Next) */
.pagination-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    color: #374151;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.pagination-btn:hover:not(.disabled) {
    background: var(--primaryColor, #ff0013);
    border-color: var(--primaryColor, #ff0013);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--primaryColor-rgb), 0.25);
}

.pagination-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.pagination-btn i {
    font-size: 12px;
}

/* Page Numbers Container */
.pagination-numbers {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
}

/* Page Number */
.pagination-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #4b5563;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.pagination-number:hover:not(.active) {
    background: #f3f4f6;
    color: #1f2937;
}

.pagination-number.active {
    background: var(--primaryColor, #ff0013);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(var(--primaryColor-rgb), 0.3);
}

/* Ellipsis */
.pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    color: #9ca3af;
    font-size: 14px;
    font-weight: 500;
}

/* Page Info */
.pagination-info {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6b7280;
    font-size: 13px;
}

.pagination-info strong {
    color: #1f2937;
    font-weight: 600;
}

.pagination-info-divider {
    color: #d1d5db;
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 768px) {
    .modern-pagination {
        padding: 24px 0;
    }

    .pagination-container {
        padding: 6px;
        gap: 4px;
    }

    .pagination-btn {
        padding: 10px 12px;
    }

    .pagination-btn-text {
        display: none;
    }

    .pagination-btn i {
        font-size: 14px;
    }

    .pagination-numbers {
        gap: 2px;
        padding: 0 4px;
    }

    .pagination-number {
        min-width: 36px;
        height: 36px;
        padding: 0 8px;
        font-size: 13px;
    }

    .pagination-ellipsis {
        min-width: 24px;
        height: 36px;
    }

    .pagination-info {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .pagination-container {
        width: 100%;
        justify-content: space-between;
    }

    .pagination-numbers {
        flex: 1;
        justify-content: center;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .pagination-number {
        min-width: 32px;
        height: 32px;
        font-size: 12px;
        flex-shrink: 0;
    }

    .pagination-ellipsis {
        min-width: 20px;
        height: 32px;
    }

    .pagination-info {
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
    }

    .pagination-info-divider {
        display: none;
    }
}

/* ============================================
   PRODUCT DETAIL - MODERN TASARIM
   ============================================ */

/* Container */
.product-detail-container {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Breadcrumb - Products sayfası ile uyumlu */
.product-detail-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
    border-radius: 10px;
    border: 1px solid #e9ecef;
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.product-detail-breadcrumb .breadcrumb-home {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--primary-color, #f97316);
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.product-detail-breadcrumb .breadcrumb-home:hover {
    background: var(--primary-hover);
    transform: scale(1.05);
}

.product-detail-breadcrumb .breadcrumb-home i {
    font-size: 14px;
}

.product-detail-breadcrumb .breadcrumb-separator {
    color: #9ca3af;
    font-size: 12px;
}

.product-detail-breadcrumb .breadcrumb-link {
    color: #6b7280;
    text-decoration: none;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.product-detail-breadcrumb .breadcrumb-link:hover {
    color: var(--primary-color, #f97316);
    background: rgba(var(--primaryColor-rgb), 0.08);
}

.product-detail-breadcrumb .breadcrumb-current {
    color: #111827;
    font-weight: 600;
    padding: 4px 8px;
}

/* Ürün Header - Başlık ve Meta Bilgiler */
.product-detail-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.product-detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.product-detail-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.product-detail-badge.badge-brand {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    color: #0369a1;
    border: 1px solid #bae6fd;
}

.product-detail-badge.badge-brand i {
    color: #0ea5e9;
}

.product-detail-badge.badge-stock {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    color: #166534;
    border: 1px solid #bbf7d0;
}

.product-detail-badge.badge-stock.out-of-stock {
    background: linear-gradient(135deg, var(--primaryColor-lighter) 0%, var(--primaryColor-light) 100%);
    color: #991b1b;
    border: 1px solid var(--primaryColor-light);
}

.product-detail-badge.badge-stock i {
    font-size: 10px;
}

.product-detail-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
    margin: 0;
}

.product-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    color: #6b7280;
    font-size: 0.9rem;
}

.product-detail-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.product-detail-meta-item .meta-label {
    color: #9ca3af;
}

.product-detail-meta-item .meta-value {
    color: #374151;
    font-weight: 500;
}

.product-detail-meta-item .meta-value.clickable {
    color: var(--primary-color, #f97316);
    cursor: pointer;
    transition: color 0.2s ease;
}

.product-detail-meta-item .meta-value.clickable:hover {
    text-decoration: underline;
}

/* Stok Bilgisi */
/* Stok Bilgisi - Kompakt Tasarım */
.product-detail-stock-info {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 16px 0;
}

.product-detail-stock-info .stock-summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #ecfdf5;
    border-radius: 20px;
    font-size: 0.85rem;
}

.product-detail-stock-info .stock-count {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: #059669;
}

.product-detail-stock-info .stock-count i {
    color: #10b981;
    font-size: 0.9rem;
}

.product-detail-stock-info .warehouse-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.product-detail-stock-info .warehouse-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #f1f5f9;
    border-radius: 16px;
    font-size: 0.8rem;
    color: #64748b;
}

.product-detail-stock-info .warehouse-item i {
    color: #94a3b8;
    font-size: 0.7rem;
}

/* Fiyat Kartı */
.product-detail-price-card {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 2px solid var(--primary-color);
    border-radius: 12px;
    padding: 20px;
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
}

.product-detail-price-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background: var(--primary-color, #f97316);
    opacity: 0.1;
    border-radius: 0 0 0 80px;
}

.product-detail-discounts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.product-detail-discount-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--primary-color, #f97316);
    color: #fff;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

.product-detail-prices {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px;
}

.product-detail-prices .price-old,
.product-detail-original-price {
    font-size: 1.1rem;
    color: #9ca3af;
    text-decoration: line-through;
}

.product-detail-prices .price-current,
.product-detail-current-price {
    font-size: 1.75rem;
    font-weight: 700;
    color: #111827;
}

.product-detail-kdv-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #6b7280;
    width: 100%;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #e5e7eb;
}

.product-detail-kdv-info i {
    color: var(--primary-color, #f97316);
}

.product-detail-kdv-info strong {
    color: #374151;
}

.product-detail-kdv-info .kdv-dahil {
    color: #374151;
    font-weight: 500;
}

/* Fiyat Gizli Uyarı */
.product-detail-price-hidden {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 16px;
}

.product-detail-price-hidden i {
    font-size: 2rem;
    color: #94a3b8;
}

.product-detail-price-hidden strong {
    display: block;
    font-size: 1rem;
    color: #374151;
    margin-bottom: 4px;
}

.product-detail-price-hidden p {
    margin: 0;
    font-size: 0.9rem;
    color: #6b7280;
}

/* Varyant Seçici */
.product-detail-variants {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 16px;
}

.product-detail-variant-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.product-detail-variant-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
}

.product-detail-variant-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.product-detail-variant-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    padding: 10px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.product-detail-variant-btn:hover {
    border-color: var(--primary-color, #f97316);
    color: var(--primary-color, #f97316);
}

.product-detail-variant-btn.active {
    border-color: var(--primary-color, #f97316);
    background: var(--primary-color, #f97316);
    color: #fff;
}

.product-detail-variant-btn.out-of-stock {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 14px;
    opacity: 1;
    color: #6b7280;
    background: #f9fafb;
    border-style: dashed;
    cursor: not-allowed;
    position: relative;
}

.product-detail-variant-btn.out-of-stock .variant-text {
    text-decoration: line-through;
    text-decoration-color: #9ca3af;
    text-decoration-thickness: 1px;
}

.product-detail-variant-btn.out-of-stock::after {
    content: none;
}

/* Sepete Ekle Bölümü */
/* Sepete Ekle Row - Yan Yana Düzen */
.product-detail-add-cart-row {
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin-top: 20px;
}

.product-detail-add-cart {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.product-detail-quantity-row {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

.product-detail-quantity {
    display: flex;
    align-items: center;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    flex-shrink: 0;
}

.product-detail-quantity input[type="button"] {
    width: 44px;
    height: 48px;
    border: none;
    background: #f9fafb;
    color: #374151;
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.product-detail-quantity input[type="button"]:hover {
    background: #f3f4f6;
    color: var(--primary-color);
}

.product-detail-quantity input[type="button"]:active {
    background: #e5e7eb;
}

.product-detail-quantity input[type="text"] {
    width: 50px;
    height: 48px;
    border: none;
    border-left: 1px solid #e5e7eb;
    border-right: 1px solid #e5e7eb;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    background: #fff;
}

.product-detail-quantity input:focus {
    outline: none;
}

.product-detail-add-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 24px;
    background: var(--primary-color, #f97316);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.product-detail-add-btn:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--primaryColor-rgb), 0.3);
}

.product-detail-add-btn i {
    font-size: 1.1rem;
}

/* Yardımcı Butonlar */
.product-detail-helper-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 16px;
    margin-bottom: 20px;
}

.product-detail-helper-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    color: #374151;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.product-detail-helper-btn:hover {
    border-color: var(--primary-color, #f97316);
    color: var(--primary-color, #f97316);
    background: rgba(var(--primaryColor-rgb), 0.05);
}

.product-detail-helper-btn.btn-whatsapp {
    border-color: #22c55e;
    color: #16a34a;
    grid-column: span 2;
}

.product-detail-helper-btn.btn-whatsapp:hover {
    background: #22c55e;
    color: #fff;
    border-color: #22c55e;
}

.product-detail-helper-btn.btn-active {
    border-color: #ef4444;
    color: #ef4444;
}

.product-detail-helper-btn.btn-active:hover {
    background: #ef4444;
    color: #fff;
}

/* Avantajlar Listesi */
.product-detail-benefits {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: #f9fafb;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    margin-top: 16px;
}

.product-detail-benefit {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: #374151;
}

.product-detail-benefit i {
    width: 20px;
    color: var(--primary-color, #f97316);
}

.product-detail-benefit.benefit-success i {
    color: #22c55e;
}

.product-detail-benefit.benefit-info i {
    color: #3b82f6;
}

/* Stok Durumu Badge Renkler */
.stock-status-in {
    color: #16a34a;
}

.stock-status-out {
    color: var(--primaryColor);
}

/* Depo Listesi */
.product-detail-warehouses {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: #f9fafb;
    border-radius: 8px;
    margin-top: 8px;
}

.product-detail-warehouse-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #374151;
}

.product-detail-warehouse-item i {
    color: var(--primary-color, #f97316);
    font-size: 8px;
}

/* Benzer Ürünler Mini Kutular */
.product-detail-similar-products {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    background: #f9fafb;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
}

.product-detail-similar-title {
    width: 100%;
    font-size: 0.85rem;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 4px;
}

.product-detail-similar-item {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    cursor: pointer;
}

.product-detail-similar-item:hover {
    border-color: var(--primary-color, #f97316);
    transform: scale(1.1);
}

.product-detail-similar-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Miktar Seçici - Yeni Stiller */
.product-detail-quantity .quantity-btn {
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    color: #374151;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-detail-quantity .quantity-btn:hover {
    background: #f3f4f6;
    color: var(--primary-color, #f97316);
}

.product-detail-quantity .quantity-input {
    width: 60px;
    height: 44px;
    border: none;
    border-left: 1px solid #e5e7eb;
    border-right: 1px solid #e5e7eb;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    background: transparent;
}

.product-detail-quantity .quantity-input:focus {
    outline: none;
}

/* Sepete Ekle Butonu - Yeni Stiller */
.product-detail-cart-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.product-detail-cart-btn:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--primaryColor-rgb), 0.35);
}

.product-detail-cart-btn i {
    font-size: 1.2rem;
}

.product-detail-cart-btn.out-of-stock {
    background: #6b7280;
}

.product-detail-cart-btn.out-of-stock:hover {
    background: #4b5563;
    transform: none;
    box-shadow: none;
}

/* Yardımcı Butonlar - Yeni Stiller */
.helper-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    color: #374151;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.helper-btn:hover {
    border-color: var(--primary-color, #f97316);
    color: var(--primary-color, #f97316);
    background: rgba(var(--primaryColor-rgb), 0.05);
}

.helper-btn.helper-btn-price {
    border-color: #22c55e;
    color: #16a34a;
}

.helper-btn.helper-btn-price:hover {
    background: #22c55e;
    color: #fff;
    border-color: #22c55e;
}

.helper-btn.helper-btn-whatsapp {
    border-color: #25d366;
    color: #25d366;
}

.helper-btn.helper-btn-whatsapp:hover {
    background: #25d366;
    color: #fff;
    border-color: #25d366;
}

/* Avantajlar - Yeni Stiller */
.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
}

.benefit-item i {
    font-size: 1.2rem;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.benefit-item div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.benefit-item strong {
    font-size: 0.9rem;
    color: #111827;
}

.benefit-item span {
    font-size: 0.8rem;
    color: #6b7280;
}

/* Ücretsiz Kargo Banner - Özel Tasarım */
.free-shipping-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border: 2px solid #3b82f6;
    border-radius: 12px;
    margin-top: 20px;
}

.free-shipping-banner .shipping-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: #3b82f6;
    border-radius: 50%;
    flex-shrink: 0;
}

.free-shipping-banner .shipping-icon i {
    font-size: 1.3rem;
    color: #fff;
}

.free-shipping-banner .shipping-content {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
}

.free-shipping-banner .shipping-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1e40af;
}

.free-shipping-banner .shipping-amount {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1d4ed8;
    background: #fff;
    padding: 2px 10px;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.free-shipping-banner .shipping-text {
    font-size: 0.85rem;
    color: #1e40af;
}

/* Bu üründe kargo ücretsiz - Yeşil tema */
.free-shipping-banner.free-shipping-product {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    border-color: #22c55e;
}

.free-shipping-banner.free-shipping-product .shipping-icon {
    background: #22c55e;
}

.free-shipping-banner.free-shipping-product .shipping-label {
    color: #166534;
    font-size: 1rem;
}

.free-shipping-banner.free-shipping-product .shipping-text {
    color: #15803d;
    width: 100%;
}

/* Ayırıcı Çizgi */
.product-detail-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #e5e7eb 20%, #e5e7eb 80%, transparent 100%);
    margin: 4px 0;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .product-detail-container {
        padding: 16px;
        gap: 16px;
    }

    .product-detail-breadcrumb {
        padding: 10px 12px;
        gap: 6px;
        font-size: 0.85rem;
    }

    .product-detail-breadcrumb .breadcrumb-home {
        width: 28px;
        height: 28px;
    }

    .product-detail-title {
        font-size: 1.25rem;
    }

    .product-detail-meta {
        gap: 12px;
        font-size: 0.85rem;
    }

    .product-detail-price-card {
        padding: 16px;
    }

    .product-detail-current-price {
        font-size: 1.5rem;
    }

    .product-detail-quantity-row {
        flex-direction: column;
    }

    .product-detail-quantity {
        width: 100%;
        justify-content: center;
    }

    .product-detail-add-btn {
        width: 100%;
    }

    .product-detail-helper-buttons {
        grid-template-columns: 1fr;
    }

    .product-detail-helper-btn.btn-whatsapp {
        grid-column: span 1;
    }

    /* Yeni Mobile Stiller */
    .product-detail-prices .price-current {
        font-size: 1.5rem;
    }

    .product-detail-add-cart-row {
        flex-direction: column;
        gap: 10px;
    }

    .product-detail-quantity {
        width: 100%;
        justify-content: center;
    }

    .product-detail-cart-btn {
        padding: 14px 20px;
        font-size: 1rem;
        width: 100%;
    }

    .helper-btn {
        padding: 10px 12px;
        font-size: 0.85rem;
    }

    .product-detail-helper-buttons {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .product-detail-stock-info {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
    }

    .benefit-item {
        padding: 10px;
    }

    .benefit-item i {
        font-size: 1rem;
    }

    .benefit-item strong {
        font-size: 0.85rem;
    }

    .benefit-item span {
        font-size: 0.75rem;
    }

    /* Ücretsiz Kargo Banner Mobile */
    .free-shipping-banner {
        padding: 12px 16px;
        gap: 12px;
    }

    .free-shipping-banner .shipping-icon {
        width: 40px;
        height: 40px;
    }

    .free-shipping-banner .shipping-icon i {
        font-size: 1.1rem;
    }

    .free-shipping-banner .shipping-amount {
        font-size: 1.1rem;
    }

    .free-shipping-banner .shipping-label,
    .free-shipping-banner .shipping-text {
        font-size: 0.8rem;
    }
}

/* ============================================
   MODERN NOTIFICATION POPUP (SweetAlert2)
   ============================================ */

.modern-notification-popup {
    border-radius: 20px !important;
    padding: 0 !important;
    max-width: 420px !important;
    width: 95% !important;
}

.modern-notification-popup .swal2-html-container {
    padding: 0 !important;
    margin: 0 !important;
}

.modern-notification-popup .swal2-actions {
    padding: 0 24px 24px !important;
    gap: 12px;
}

.modern-notification-popup .modern-confirm-btn {
    border-radius: 12px !important;
    padding: 14px 28px !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.4) !important;
    transition: all 0.2s ease !important;
}

.modern-notification-popup .modern-confirm-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.5) !important;
}

.modern-notification-popup .modern-cancel-btn {
    border-radius: 12px !important;
    padding: 14px 28px !important;
    font-weight: 500 !important;
    background: transparent !important;
    color: #6b7280 !important;
    border: 2px solid #e5e7eb !important;
}

.modern-notification-popup .modern-cancel-btn:hover {
    background: #f3f4f6 !important;
    border-color: #d1d5db !important;
}

/* Content Styling */
.modern-notification-content {
    text-align: left;
}

.notification-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 24px 20px;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-bottom: 1px solid #a7f3d0;
}

.notification-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.notification-icon i {
    font-size: 1.5rem;
    color: #fff;
}

.notification-title h3 {
    margin: 0 0 4px;
    font-size: 1.25rem;
    font-weight: 700;
    color: #166534;
}

.notification-title p {
    margin: 0;
    font-size: 0.85rem;
    color: #15803d;
}

/* Product Card */
.notification-product-card {
    margin: 20px 24px;
    padding: 16px;
    background: #f9fafb;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

.notification-product-card .product-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 12px;
    line-height: 1.4;
}

.notification-product-card .product-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px dashed #d1d5db;
}

.notification-product-card .price-label {
    font-size: 0.8rem;
    color: #6b7280;
}

.notification-product-card .price-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: #059669;
}

/* Form Styling */
.notification-form {
    padding: 0 24px 20px;
}

.modern-input-group {
    display: flex;
    align-items: center;
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 12px;
    transition: all 0.2s ease;
}

.modern-input-group:focus-within {
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

.modern-input-group .input-icon {
    padding: 0 16px;
    color: #9ca3af;
}

.modern-input-group:focus-within .input-icon {
    color: #22c55e;
}

.modern-input-group .modern-input {
    flex: 1;
    border: none;
    padding: 14px 16px 14px 0;
    font-size: 0.95rem;
    background: transparent;
    outline: none;
    color: #374151;
}

.modern-input-group .modern-input::placeholder {
    color: #9ca3af;
}

.modern-input-group .input-suffix {
    padding: 14px 16px;
    font-weight: 600;
    color: #6b7280;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    border-radius: 0 10px 10px 0;
}

.input-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #6b7280;
    margin: -4px 0 16px;
    padding-left: 4px;
}

.input-hint i {
    color: #9ca3af;
}

/* Modern Checkbox */
.modern-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    padding: 12px;
    background: #f9fafb;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;
}

.modern-checkbox:hover {
    background: #f3f4f6;
}

.modern-checkbox input[type="checkbox"] {
    display: none;
}

.modern-checkbox .checkmark {
    width: 22px;
    height: 22px;
    border: 2px solid #d1d5db;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
    margin-top: 1px;
}

.modern-checkbox .checkmark::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 12px;
    color: #fff;
    opacity: 0;
    transform: scale(0);
    transition: all 0.2s ease;
}

.modern-checkbox input[type="checkbox"]:checked+.checkmark {
    background: #22c55e;
    border-color: #22c55e;
}

.modern-checkbox input[type="checkbox"]:checked+.checkmark::after {
    opacity: 1;
    transform: scale(1);
}

.modern-checkbox .checkbox-text {
    font-size: 0.85rem;
    color: #4b5563;
    line-height: 1.5;
}

.modern-checkbox .checkbox-text a {
    color: #22c55e;
    font-weight: 600;
    text-decoration: none;
}

.modern-checkbox .checkbox-text a:hover {
    text-decoration: underline;
}

/* Stock Notification - Blue Theme */
.modern-stok-popup .modern-confirm-btn {
    background: #3b82f6 !important;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4) !important;
}

.modern-stok-popup .modern-confirm-btn:hover {
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5) !important;
}

.notification-header-stock {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
    border-bottom-color: #93c5fd !important;
}

.notification-icon-stock {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

.notification-header-stock .notification-title h3 {
    color: #1e40af !important;
}

.notification-header-stock .notification-title p {
    color: #1d4ed8 !important;
}

.notification-product-card-stock {
    border-color: #bfdbfe;
}

.notification-product-card .product-stock-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px dashed #d1d5db;
    color: var(--primaryColor);
    font-size: 0.9rem;
    font-weight: 500;
}

.notification-product-card .product-stock-status i {
    font-size: 1rem;
}

.modern-input-group-stock:focus-within {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

.modern-input-group-stock:focus-within .input-icon {
    color: #3b82f6 !important;
}

.modern-checkbox-stock input[type="checkbox"]:checked+.checkmark {
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
}

.modern-checkbox-stock .checkbox-text a {
    color: #3b82f6 !important;
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .modern-notification-popup {
        max-width: 100% !important;
        margin: 10px !important;
    }

    .notification-header {
        padding: 20px;
        gap: 12px;
    }

    .notification-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
    }

    .notification-icon i {
        font-size: 1.25rem;
    }

    .notification-title h3 {
        font-size: 1.1rem;
    }

    .notification-product-card {
        margin: 16px;
        padding: 14px;
    }

    .notification-form {
        padding: 0 16px 16px;
    }

    .modern-input-group .modern-input {
        padding: 12px 12px 12px 0;
        font-size: 0.9rem;
    }

    .modern-notification-popup .swal2-actions {
        padding: 0 16px 20px !important;
        flex-direction: column;
    }

    .modern-notification-popup .modern-confirm-btn,
    .modern-notification-popup .modern-cancel-btn {
        width: 100% !important;
        margin: 0 !important;
    }
}

/* ========================================
   MODERN PRODUCT GALLERY - v2.0
   ======================================== */

/* Main Gallery Container */
.product-gallery {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: row;
    gap: 16px;
    margin-top: 55px;
}

/* Main Image Wrapper */
.gallery-main-wrapper {
    flex: 1;
    min-width: 0;
    order: 2;
}

.gallery-main-image-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    /*background: linear-gradient(135deg, #fafbfc 0%, #f0f2f5 100%);*/
    border-radius: 12px;
    overflow: hidden;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    /* iOS Safari: aspect-ratio fallback */
    min-height: 0;
}

/* Main Image */
.gallery-main-img {
    width: 90%;
    height: 90%;
    object-fit: contain;
    -webkit-object-fit: contain;
    object-position: center;
    -webkit-object-position: center;
    transition: opacity 0.3s ease, transform 0.3s ease;
    cursor: zoom-in;
    user-select: none;
    -webkit-user-select: none;
}

.gallery-main-img:not(.active) {
    opacity: 0;
    position: absolute;
    width: 90%;
    height: 90%;
}

.gallery-main-img.active {
    opacity: 1;
}

.gallery-main-img:hover {
    transform: scale(1.02);
}

/* Video Wrapper */
.gallery-video-wrapper {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: #000;
    border-radius: 12px;
}

.gallery-video-wrapper.active {
    display: flex;
}

.gallery-video-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 12px;
}

/* Navigation Arrows */
.gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: #333;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

.gallery-main-image-container:hover .gallery-arrow {
    opacity: 1;
}

.gallery-arrow:hover {
    background: var(--primaryColor);
    color: #fff;
    transform: translateY(-50%) scale(1.1);
}

.gallery-arrow-prev {
    left: 12px;
}

.gallery-arrow-next {
    right: 12px;
}

/* Image Counter */
.gallery-counter {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    backdrop-filter: blur(4px);
    z-index: 10;
}

/* Zoom Button */
.gallery-zoom-btn {
    position: absolute;
    bottom: 12px;
    left: 12px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: #333;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

.gallery-main-image-container:hover .gallery-zoom-btn {
    opacity: 1;
}

.gallery-zoom-btn:hover {
    background: var(--primaryColor);
    color: #fff;
    transform: scale(1.1);
}

/* Badges */
.gallery-badges {
    position: absolute;
    left: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 10;
}

.gallery-badges-top {
    top: 12px;
}

.gallery-badges-bottom {
    bottom: 60px;
}

.gallery-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.gallery-badge-img {
    max-height: 28px;
    border-radius: 4px;
}

/* Favorite Button - Now part of gallery-actions */
/* Base styles moved to .gallery-action-btn in GALLERY ACTION BUTTONS section */

@keyframes heartBeat {

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

    25% {
        transform: scale(1.2);
    }

    50% {
        transform: scale(0.95);
    }

    75% {
        transform: scale(1.1);
    }
}

.gallery-favorite.active i {
    animation: heartBeat 0.6s ease;
}

/* Thumbnails Container */
.gallery-thumbs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    order: 1;
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--primaryColor) #f0f0f0;
}

.gallery-thumbs::-webkit-scrollbar {
    width: 5px;
}

.gallery-thumbs::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 10px;
}

.gallery-thumbs::-webkit-scrollbar-thumb {
    background: var(--primaryColor);
    border-radius: 10px;
}

/* Thumbnail Button */
.gallery-thumb {
    position: relative;
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border: 2px solid transparent;
    border-radius: 10px;
    background: #fff;
    padding: 4px;
    cursor: pointer;
    transition: all 0.25s ease;
    overflow: hidden;
}

.gallery-thumb:hover {
    border-color: var(--primaryColor);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.gallery-thumb.active {
    border-color: var(--primaryColor);
    box-shadow: 0 0 0 3px rgba(var(--primaryColor-rgb), 0.15);
}

.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 6px;
}

/* Video Thumbnail Icon */
.gallery-thumb-video-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
}

.gallery-thumb-video-icon i {
    width: 28px;
    height: 28px;
    background: var(--primaryColor);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 10px;
    padding-left: 2px;
}

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

.gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    background: rgba(0, 0, 0, 0.97);
}

.gallery-lightbox.active {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}

.lightbox-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.lightbox-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px 100px;
    /* Boş/karartılmış alan tıklarını alttaki .lightbox-overlay'e geçir (dışa tıkla → kapat).
       Overlay z-index:-1 olduğu için content üstte kalıyor ve tıklamayı yutuyordu. */
    pointer-events: none;
}

/* Etkileşimli elemanlar yeniden tıklanabilir; görsele tıklamak kapatmaz (standart lightbox) */
.lightbox-close,
.lightbox-arrow,
.lightbox-img,
.lightbox-thumbs,
.lightbox-counter,
.lightbox-video-wrapper {
    pointer-events: auto;
}

/* Close Button */
.lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: rotate(90deg);
}

/* Lightbox Counter */
.lightbox-counter {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    padding: 10px 24px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 500;
    backdrop-filter: blur(4px);
    z-index: 10;
}

/* Lightbox Main Area */
.lightbox-main {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
}

/* Lightbox Arrows */
.lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
    backdrop-filter: blur(4px);
}

.lightbox-arrow:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-50%) scale(1.1);
}

.lightbox-arrow-prev {
    left: 20px;
}

.lightbox-arrow-next {
    right: 20px;
}

/* Lightbox Image Wrapper */
.lightbox-image-wrapper {
    max-width: 85%;
    max-height: 75vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-img {
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease;
}

.lightbox-video-wrapper {
    width: 90vw;
    max-width: 1000px;
    aspect-ratio: 16/9;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
}

.lightbox-video-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Lightbox Thumbnails */
.lightbox-thumbs {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 16px;
    max-width: 90%;
    overflow-x: auto;
    backdrop-filter: blur(8px);
}

.lightbox-thumbs::-webkit-scrollbar {
    height: 4px;
}

.lightbox-thumbs::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

.lightbox-thumbs::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.4);
    border-radius: 2px;
}

.lightbox-thumb {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    border: 2px solid transparent;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    padding: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
}

.lightbox-thumb:hover {
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.08);
}

.lightbox-thumb.active {
    border-color: #fff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

.lightbox-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 5px;
    background: #fff;
}

/* ========================================
   RESPONSIVE - MOBILE
   ======================================== */

@media (max-width: 991.98px) {
    .product-gallery {
        flex-direction: column;
        padding: 12px;
        gap: 12px;
    }

    .gallery-main-wrapper {
        order: 1;
    }

    /* iOS Safari: ensure image stays contained on mobile */
    .gallery-main-img {
        width: 90% !important;
        height: 90% !important;
        max-width: 90%;
        max-height: 90%;
        object-fit: contain !important;
        -webkit-object-fit: contain !important;
    }

    .gallery-thumbs {
        flex-direction: row;
        order: 2;
        max-height: none;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 4px 0;
    }

    .gallery-thumbs::-webkit-scrollbar {
        height: 4px;
        width: auto;
    }

    .gallery-thumb {
        width: 64px;
        height: 64px;
    }

    .gallery-arrow {
        opacity: 1;
        width: 38px;
        height: 38px;
        font-size: 14px;
    }

    .gallery-arrow-prev {
        left: 8px;
    }

    .gallery-arrow-next {
        right: 8px;
    }

    .gallery-zoom-btn {
        opacity: 1;
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .gallery-counter {
        padding: 5px 12px;
        font-size: 12px;
    }

    /* Lightbox Mobile */
    .lightbox-content {
        padding: 50px 10px 90px;
    }

    .lightbox-arrow {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }

    .lightbox-arrow-prev {
        left: 8px;
    }

    .lightbox-arrow-next {
        right: 8px;
    }

    .lightbox-close {
        top: 12px;
        right: 12px;
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .lightbox-counter {
        top: 16px;
        padding: 8px 16px;
        font-size: 13px;
    }

    .lightbox-image-wrapper {
        max-width: 95%;
    }

    .lightbox-img {
        max-height: 60vh;
    }

    .lightbox-thumbs {
        padding: 8px 12px;
        gap: 8px;
        bottom: 12px;
    }

    .lightbox-thumb {
        width: 52px;
        height: 52px;
    }
}

@media (max-width: 575.98px) {
    .product-gallery {
        padding: 10px;
        border-radius: 12px;
    }

    .gallery-main-image-container {
        border-radius: 10px;
    }

    .gallery-thumb {
        width: 56px;
        height: 56px;
        border-radius: 8px;
    }

    .gallery-arrow {
        width: 34px;
        height: 34px;
        font-size: 12px;
    }

    .gallery-badges {
        left: 8px;
    }

    .gallery-badges-top {
        top: 8px;
    }

    .gallery-badge {
        padding: 4px 8px;
        font-size: 10px;
    }

    .lightbox-arrow {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }

    .lightbox-thumb {
        width: 46px;
        height: 46px;
    }
}

/* ========================================
   MODERN PRODUCT TABS - v2.0
   ======================================== */

/* Description Section */
.product-description {
    padding: 0 0 40px;
}

.product-description .description-wrapper {
    padding: 24px;
}

/* Nav Tabs Wrapper */
.nav-tabs-wrapper {
    position: relative;
}

/* Modern Nav Tabs */
.product-description .nav-tabs {
    border: none;
    gap: 8px;
    padding-bottom: 0;
    margin-bottom: 0;
    flex-wrap: wrap;
}

.product-description .nav-tabs .nav-link {
    border: none;
    border-radius: 12px;
    padding: 14px 28px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
    background: #f3f4f6;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.product-description .nav-tabs .nav-link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--primaryColor);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.product-description .nav-tabs .nav-link:hover {
    color: var(--primaryColor);
    background: rgba(var(--primaryColor-rgb), 0.08);
}

.product-description .nav-tabs .nav-link.active {
    color: #fff;
    background: var(--primaryColor);
    box-shadow: 0 4px 15px rgba(var(--primaryColor-rgb), 0.35);
}

.product-description .nav-tabs .nav-link.active:hover {
    background: var(--primary-hover, var(--primaryColor));
}

/* Scroll Indicator */
.nav-tabs-scroll-indicator {
    display: none;
}

/* Tab Content */
.product-description .tab-content {
    padding-top: 24px;
}

.product-description .tab-pane {
    animation: fadeInTab 0.4s ease;
}

@keyframes fadeInTab {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* ========================================
   PRODUCT DESCRIPTION CONTENT - v2.0
   Modern, Responsive Content Styling
   ======================================== */

.product-description-content {
    display: flex;
    gap: 40px;
}

.product-description-text,
.product-description-image {
    flex: 1;
    min-width: 0;
}

/* Base Typography */
.product-description-text .light-gray,
.product-description-image .light-gray {
    color: #4b5563;
    line-height: 1.8;
    font-size: 15px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Paragraphs */
.product-description-text .light-gray p {
    margin-bottom: 18px;
}

.product-description-text .light-gray p:last-child {
    margin-bottom: 0;
}

/* Headings */
.product-description-text .light-gray h1 {
    font-size: 28px;
    font-weight: 700;
    color: #111827;
    margin: 32px 0 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--primaryColor);
}

.product-description-text .light-gray h2 {
    font-size: 24px;
    font-weight: 600;
    color: #1f2937;
    margin: 28px 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e7eb;
}

.product-description-text .light-gray h3 {
    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
    margin: 24px 0 12px;
}

.product-description-text .light-gray h4 {
    font-size: 18px;
    font-weight: 600;
    color: #374151;
    margin: 20px 0 10px;
}

.product-description-text .light-gray h5 {
    font-size: 16px;
    font-weight: 600;
    color: #374151;
    margin: 16px 0 8px;
}

.product-description-text .light-gray h6 {
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 14px 0 8px;
}

.product-description-text .light-gray h1:first-child,
.product-description-text .light-gray h2:first-child,
.product-description-text .light-gray h3:first-child,
.product-description-text .light-gray h4:first-child,
.product-description-text .light-gray h5:first-child,
.product-description-text .light-gray h6:first-child {
    margin-top: 0;
}

/* Links */
.product-description-text .light-gray a {
    color: var(--primaryColor);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.2s ease;
}

.product-description-text .light-gray a:hover {
    border-bottom-color: var(--primaryColor);
}

/* Lists - Unordered */
.product-description-text .light-gray ul {
    list-style: none;
    padding-left: 0;
    margin: 20px 0;
}

.product-description-text .light-gray ul li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
    line-height: 1.7;
}

.product-description-text .light-gray ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 8px;
    height: 8px;
    background: var(--primaryColor);
    border-radius: 50%;
}

/* Nested Lists */
.product-description-text .light-gray ul ul {
    margin: 10px 0 10px 20px;
}

.product-description-text .light-gray ul ul li::before {
    width: 6px;
    height: 6px;
    background: transparent;
    border: 2px solid var(--primaryColor);
}

/* Lists - Ordered */
.product-description-text .light-gray ol {
    list-style: none;
    padding-left: 0;
    margin: 20px 0;
    counter-reset: item;
}

.product-description-text .light-gray ol li {
    position: relative;
    padding-left: 36px;
    margin-bottom: 12px;
    line-height: 1.7;
    counter-increment: item;
}

.product-description-text .light-gray ol li::before {
    content: counter(item);
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    background: var(--primaryColor);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Images */
.product-description-text .light-gray img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 24px 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-description-text .light-gray img:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

/* Tables */
.product-description-text .light-gray table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    font-size: 14px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.product-description-text .light-gray table th {
    background: linear-gradient(135deg, var(--primaryColor) 0%, var(--primary-hover, var(--primaryColor)) 100%);
    color: #fff;
    font-weight: 600;
    padding: 14px 16px;
    text-align: left;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.product-description-text .light-gray table td {
    padding: 14px 16px;
    border-bottom: 1px solid #e5e7eb;
    color: #4b5563;
}

.product-description-text .light-gray table tr:nth-child(even) {
    background: #f9fafb;
}

.product-description-text .light-gray table tr:hover {
    background: rgba(var(--primaryColor-rgb), 0.05);
}

.product-description-text .light-gray table tr:last-child td {
    border-bottom: none;
}

/* ========================================
   CONTENT SANDBOX - HTML editör çıktısı container'dan taşmasın.
   Aciklama (Teknik Özellikler) içinde inline position:absolute/fixed,
   negatif margin, floatlı yapı varsa altındaki section'ı ezerdi.
   ======================================== */
.product-description {
    position: relative;
    overflow: hidden;
}

.product-description .description-wrapper {
    overflow: hidden;
}

.product-description .tab-content {
    position: relative;
    overflow: hidden;
}

.product-description-text {
    position: relative;
    overflow: hidden;
}

.product-description-text .light-gray {
    position: relative;
    overflow: hidden;
}

.product-description-text .light-gray::after {
    content: '';
    display: table;
    clear: both;
}

/* Sadece HTML editörden gelen inline position kaçışlarını engelle —
   mevcut tipografi kurallarındaki ul li / ::before gibi position: relative'i bozma */
.product-description-text .light-gray [style*="position: absolute"],
.product-description-text .light-gray [style*="position:absolute"],
.product-description-text .light-gray [style*="position: fixed"],
.product-description-text .light-gray [style*="position:fixed"],
.product-description-text .light-gray [style*="position: sticky"],
.product-description-text .light-gray [style*="position:sticky"] {
    position: static !important;
}

.product-description-text .light-gray img {
    max-width: 100%;
    height: auto;
}

/* Blockquote */
.product-description-text .light-gray blockquote {
    margin: 24px 0;
    padding: 20px 24px;
    background: linear-gradient(135deg, #f8f9fa 0%, #f3f4f6 100%);
    border-left: 4px solid var(--primaryColor);
    border-radius: 0 12px 12px 0;
    font-style: italic;
    color: #4b5563;
}

.product-description-text .light-gray blockquote p {
    margin: 0;
}

.product-description-text .light-gray blockquote cite {
    display: block;
    margin-top: 12px;
    font-size: 13px;
    color: #6b7280;
    font-style: normal;
}

/* Code */
.product-description-text .light-gray code {
    background: #f3f4f6;
    padding: 2px 8px;
    border-radius: 4px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 13px;
    color: var(--primaryColor);
}

.product-description-text .light-gray pre {
    background: #1f2937;
    color: #e5e7eb;
    padding: 20px;
    border-radius: 12px;
    margin: 24px 0;
    overflow-x: auto;
    font-size: 13px;
    line-height: 1.6;
}

.product-description-text .light-gray pre code {
    background: none;
    padding: 0;
    color: inherit;
}

/* Videos & Iframes */
.product-description-text .light-gray iframe,
.product-description-text .light-gray video {
    max-width: 100%;
    border-radius: 12px;
    margin: 24px 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Video Wrapper for Responsive */
.product-description-text .light-gray .video-wrapper,
.product-description-text .light-gray .embed-responsive {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    /* 16:9 */
    margin: 24px 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.product-description-text .light-gray .video-wrapper iframe,
.product-description-text .light-gray .embed-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Horizontal Rule */
.product-description-text .light-gray hr {
    border: none;
    height: 2px;
    background: linear-gradient(90deg, transparent, #e5e7eb, transparent);
    margin: 32px 0;
}

/* Strong & Bold */
.product-description-text .light-gray strong,
.product-description-text .light-gray b {
    font-weight: 600;
    color: #1f2937;
}

/* Emphasis */
.product-description-text .light-gray em,
.product-description-text .light-gray i:not([class]) {
    font-style: italic;
}

/* Mark/Highlight */
.product-description-text .light-gray mark {
    background: rgba(var(--primaryColor-rgb), 0.15);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Small Text */
.product-description-text .light-gray small {
    font-size: 13px;
    color: #6b7280;
}

/* Image with Right Align */
.product-description-image .light-gray {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.product-description-image .light-gray img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* PDF Viewer */
.pdf-viewer-container {
    background: #f3f4f6;
    border-radius: 12px;
    overflow: hidden;
}

.pdf-iframe {
    width: 100%;
    height: 600px;
    border: none;
}

/* ========================================
   MODERN TABS - RESPONSIVE
   ======================================== */

@media (max-width: 991.98px) {
    .product-description .description-wrapper {
        padding: 20px;
    }

    .product-description .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 6px;
        padding-bottom: 4px;
    }

    .product-description .nav-tabs::-webkit-scrollbar {
        display: none;
    }

    .product-description .nav-tabs .nav-link {
        padding: 12px 20px;
        font-size: 13px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .nav-tabs-scroll-indicator {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 40px;
        height: 100%;
        background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.9));
        pointer-events: none;
        z-index: 5;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .nav-tabs-wrapper.scrollable .nav-tabs-scroll-indicator {
        opacity: 1;
    }

    .product-description-content {
        flex-direction: column;
        gap: 24px;
    }
}

@media (max-width: 575.98px) {
    .product-description .description-wrapper {
        padding: 16px;
        border-radius: 16px;
    }

    .product-description .nav-tabs .nav-link {
        padding: 10px 16px;
        font-size: 12px;
        border-radius: 10px;
    }

    .product-description .tab-content {
        padding-top: 20px;
    }

    .product-description-text .light-gray,
    .product-description-image .light-gray {
        font-size: 14px;
        line-height: 1.7;
    }

    /* Mobile Content Optimizations */
    .product-description-text .light-gray h1 {
        font-size: 22px;
        margin: 24px 0 12px;
    }

    .product-description-text .light-gray h2 {
        font-size: 20px;
        margin: 20px 0 10px;
    }

    .product-description-text .light-gray h3 {
        font-size: 18px;
        margin: 18px 0 10px;
    }

    .product-description-text .light-gray h4,
    .product-description-text .light-gray h5,
    .product-description-text .light-gray h6 {
        font-size: 16px;
        margin: 14px 0 8px;
    }

    .product-description-text .light-gray ul li,
    .product-description-text .light-gray ol li {
        padding-left: 24px;
        margin-bottom: 10px;
    }

    .product-description-text .light-gray ol li::before {
        width: 20px;
        height: 20px;
        font-size: 11px;
    }

    .product-description-text .light-gray img {
        margin: 16px 0;
        border-radius: 8px;
    }

    .product-description-text .light-gray img:hover {
        transform: none;
    }

    /* Responsive Tables */
    .product-description-text .light-gray table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 16px -16px;
        width: calc(100% + 32px);
        border-radius: 0;
    }

    .product-description-text .light-gray table th,
    .product-description-text .light-gray table td {
        padding: 10px 12px;
        font-size: 13px;
        white-space: nowrap;
    }

    .product-description-text .light-gray blockquote {
        margin: 16px 0;
        padding: 16px;
    }

    .product-description-text .light-gray iframe,
    .product-description-text .light-gray video {
        margin: 16px 0;
        border-radius: 8px;
    }

    .product-description-text .light-gray hr {
        margin: 24px 0;
    }

    .pdf-iframe {
        height: 400px;
    }
}

/* ============================================
   GALLERY ACTION BUTTONS - v4.0
   Sağ üst köşe - Paylaş & Favori yan yana
   ============================================ */

/* Actions Container - Gallery Top Right */
.gallery-actions {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 15;
}

/* Common Action Button Style */
.gallery-action-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.gallery-action-btn i {
    font-size: 16px;
    color: #495057;
    transition: all 0.2s ease;
}

.gallery-action-btn:hover {
    background: #fff;
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Share Button */
.gallery-share-btn:hover i {
    color: var(--primaryColor, #007bff);
}

.gallery-share-dropdown.open .gallery-share-btn {
    background: var(--primaryColor, #007bff);
}

.gallery-share-dropdown.open .gallery-share-btn i {
    color: #fff;
}

/* Favorite Button */
.gallery-action-btn.gallery-favorite:hover i {
    color: var(--primaryColor);
}

.gallery-action-btn.gallery-favorite.active {
    background: var(--primaryColor);
}

.gallery-action-btn.gallery-favorite.active i {
    color: #fff;
}

/* Share Dropdown Container */
.gallery-share-dropdown {
    position: relative;
}

/* Dropdown Menu */
.gallery-share-dropdown .share-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.95);
    transform-origin: top right;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
    overflow: hidden;
}

.gallery-share-dropdown.open .share-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* Dropdown Items */
.share-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: #333;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.15s ease;
    cursor: pointer;
}

.share-dropdown-item:hover {
    background: #f8f9fa;
}

.share-dropdown-item i {
    width: 18px;
    font-size: 15px;
    text-align: center;
}

/* Platform Icon Colors */
.share-dropdown-item.share-whatsapp i {
    color: #25D366;
}

.share-dropdown-item.share-facebook i {
    color: #1877F2;
}

.share-dropdown-item.share-twitter i {
    color: #000;
}

.share-dropdown-item.share-telegram i {
    color: #0088cc;
}

.share-dropdown-item.share-pinterest i {
    color: #E60023;
}

.share-dropdown-item.share-linkedin i {
    color: #0A66C2;
}

.share-dropdown-item.share-email i {
    color: #6c757d;
}

.share-dropdown-item.share-copy i {
    color: var(--primaryColor, #007bff);
}

/* Hover States */
.share-dropdown-item.share-whatsapp:hover {
    background: #25D366;
    color: #fff;
}

.share-dropdown-item.share-whatsapp:hover i {
    color: #fff;
}

.share-dropdown-item.share-facebook:hover {
    background: #1877F2;
    color: #fff;
}

.share-dropdown-item.share-facebook:hover i {
    color: #fff;
}

.share-dropdown-item.share-twitter:hover {
    background: #000;
    color: #fff;
}

.share-dropdown-item.share-twitter:hover i {
    color: #fff;
}

.share-dropdown-item.share-telegram:hover {
    background: #0088cc;
    color: #fff;
}

.share-dropdown-item.share-telegram:hover i {
    color: #fff;
}

.share-dropdown-item.share-pinterest:hover {
    background: #E60023;
    color: #fff;
}

.share-dropdown-item.share-pinterest:hover i {
    color: #fff;
}

.share-dropdown-item.share-linkedin:hover {
    background: #0A66C2;
    color: #fff;
}

.share-dropdown-item.share-linkedin:hover i {
    color: #fff;
}

.share-dropdown-item.share-email:hover {
    background: #6c757d;
    color: #fff;
}

.share-dropdown-item.share-email:hover i {
    color: #fff;
}

.share-dropdown-item.share-copy:hover {
    background: var(--primaryColor, #007bff);
    color: #fff;
}

.share-dropdown-item.share-copy:hover i {
    color: #fff;
}

/* Copied State */
.share-dropdown-item.share-copy.copied {
    background: #28a745;
    color: #fff;
}

.share-dropdown-item.share-copy.copied i {
    color: #fff;
}

/* Divider */
.share-dropdown-divider {
    height: 1px;
    background: #e9ecef;
    margin: 4px 0;
}

/* Responsive */
@media (max-width: 576px) {
    .gallery-actions {
        top: 10px;
        right: 10px;
        gap: 6px;
    }

    .gallery-action-btn {
        width: 36px;
        height: 36px;
    }

    .gallery-action-btn i {
        font-size: 14px;
    }

    .gallery-share-dropdown .share-dropdown-menu {
        min-width: 160px;
    }

    .share-dropdown-item {
        padding: 10px 14px;
        font-size: 12px;
    }
}


/* ============================================
   MODERN SIGN-IN / REGISTER PAGE STYLES
   ============================================ */

/* Home Button */
.auth-home-btn {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1000;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--primaryColor);
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.auth-home-btn:hover {
    background: var(--primaryColor);
    color: #fff;
    transform: translateX(-3px);
    box-shadow: 0 6px 25px rgba(var(--primaryColor-rgb), 0.35);
}

.auth-home-btn i {
    font-size: 16px;
    transition: transform 0.3s ease;
}

.auth-home-btn:hover i {
    transform: translateX(-3px);
}

/* Page Wrapper */
.auth-page-wrapper {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--primaryColor-lighter) 0%, #ffffff 100%);
}

/* Split Container */
.auth-split-container {
    display: flex;
    min-height: 100vh;
}

/* Banner Section (Left) */
.auth-banner-section {
    flex: 0 0 45%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(135deg, var(--primaryColor) 0%, color-mix(in srgb, var(--primaryColor) 70%, #000) 100%);
}

.auth-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(var(--primaryColor-rgb), 0.85) 0%, rgba(var(--primaryColor-rgb), 0.6) 100%);
    z-index: 1;
}

.auth-banner-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

.auth-banner-slider .slick-list,
.auth-banner-slider .slick-track,
.auth-banner-slider .slick-slide,
.auth-banner-slider .slick-slide>div {
    height: 100%;
}

.auth-banner-slide {
    height: 100%;
}

.auth-banner-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.auth-banner-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 40px;
    color: #fff;
}

.auth-banner-content h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 16px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.auth-banner-content p {
    font-size: 1.1rem;
    opacity: 0.9;
    max-width: 300px;
    margin: 0 auto;
}

/* Slider Dots */
.auth-banner-slider .slick-dots {
    position: absolute;
    bottom: 30px;
    z-index: 3;
}

.auth-banner-slider .slick-dots li button:before {
    color: #fff;
    opacity: 0.5;
}

.auth-banner-slider .slick-dots li.slick-active button:before {
    color: #fff;
    opacity: 1;
}

/* Form Section (Right) */
.auth-form-section {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: #fff;
}

.auth-form-container {
    width: 100%;
    max-width: 520px;
    padding: 0 24px;
}

/* Logo */
.auth-logo {
    text-align: center;
    margin-bottom: 32px;
}

.auth-logo img {
    max-height: 60px;
    width: auto;
}

/* Main Tabs (Giriş / Kayıt) */
.auth-main-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 28px;
    background: var(--primaryColor-lighter);
    padding: 6px;
    border-radius: 12px;
}

.auth-main-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    border: none;
    background: transparent;
    color: var(--primaryColor);
    font-size: 15px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.auth-main-tab:hover {
    background: rgba(var(--primaryColor-rgb), 0.1);
}

.auth-main-tab.active {
    background: var(--primaryColor);
    color: #fff;
    box-shadow: 0 4px 15px rgba(var(--primaryColor-rgb), 0.35);
}

.auth-main-tab i {
    font-size: 16px;
}

/* Sub Tabs (Müşteri / Bayi) */
.auth-sub-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 24px;
    border-bottom: 2px solid #e2e8f0;
}

.auth-sub-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.auth-sub-tab::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--primaryColor);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.auth-sub-tab:hover {
    color: var(--primaryColor);
}

.auth-sub-tab.active {
    color: var(--primaryColor);
}

.auth-sub-tab.active::after {
    transform: scaleX(1);
}

.auth-sub-tab i {
    font-size: 14px;
}

/* Auth Panel */
.auth-panel {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* Form Card */
.auth-form-card {
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(10px);
    }

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

/* Form Row */
.auth-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Input Group */
.auth-input-group {
    position: relative;
    margin-bottom: 20px;
}

.auth-input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 16px;
    z-index: 1;
    pointer-events: none;
}

.auth-input {
    width: 100%;
    padding: 16px 18px 16px 50px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 15px;
    color: #1e293b;
    background: #f8fafc;
    transition: all 0.3s ease;
    height: auto;
    min-height: 54px;
}

.auth-input:focus {
    outline: none;
    border-color: var(--primaryColor);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(var(--primaryColor-rgb), 0.1);
}

.auth-input::placeholder {
    color: #94a3b8;
}

.auth-input.is-invalid {
    border-color: #ef4444;
    background: #fef2f2;
}

/* Password Toggle */
.auth-password-toggle {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s ease;
}

.auth-password-toggle:hover {
    color: var(--primaryColor);
}

/* Auth Options (Remember + Forgot) */
.auth-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

/* Checkbox */
.auth-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: #64748b;
    position: relative;
    padding-left: 28px;
}

.auth-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.auth-checkbox .checkmark {
    position: absolute;
    left: 0;
    top: 2px;
    height: 18px;
    width: 18px;
    background: #f1f5f9;
    border: 2px solid #e2e8f0;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.auth-checkbox:hover .checkmark {
    border-color: var(--primaryColor);
}

.auth-checkbox input:checked~.checkmark {
    background: var(--primaryColor);
    border-color: var(--primaryColor);
}

.auth-checkbox .checkmark::after {
    content: '';
    position: absolute;
    display: none;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.auth-checkbox input:checked~.checkmark::after {
    display: block;
}

.auth-agreement {
    margin-bottom: 20px;
}

/* =============== ÜYELİK / GİZLİLİK SÖZLEŞMESİ MODALI =============== */
/* Kayıt formundaki onay kutusu modalsız işaretlenemez — kilit olduğunu belli etmek için */
.auth-agreement .checkmark {
    cursor: pointer;
}

#agreementModal .modal-content {
    border: none;
    border-radius: 12px;
}

#agreementModal .modal-header {
    background: var(--primaryColor);
    color: #fff;
    border-radius: 12px 12px 0 0;
    border-bottom: none;
}

#agreementModal .modal-header .modal-title {
    font-size: 17px;
    font-weight: 600;
    color: #fff;
}

#agreementModal .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.agreement-body {
    max-height: 60vh;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.7;
    color: #334155;
}

.agreement-body img,
.agreement-body table {
    max-width: 100%;
    height: auto;
}

.agreement-body h1,
.agreement-body h2,
.agreement-body h3 {
    font-size: 17px;
    font-weight: 600;
    color: #1e293b;
    margin-top: 18px;
}

.agreement-loading,
.agreement-error {
    padding: 32px 8px;
    text-align: center;
    color: #64748b;
}

.agreement-footer {
    display: block;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    border-radius: 0 0 12px 12px;
}

/* Kaydırma uyarısı: açık zemin + koyu yazı (kontrast kuralı) */
.agreement-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fef3c7;
    color: #78350f;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    margin-bottom: 12px;
}

.agreement-hint.agreement-hint-done {
    background: #dcfce7;
    color: #14532d;
}

.agreement-accept {
    margin-bottom: 14px;
    color: #334155;
    font-weight: 500;
}

/* Kilitliyken tıklanabilir görünmesin */
.agreement-accept input:disabled ~ .checkmark {
    background: #e2e8f0;
    border-color: #cbd5e1;
    cursor: not-allowed;
}

.agreement-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.agreement-actions .btn {
    min-width: 120px;
}

.agreement-actions .btn-primary {
    background: var(--primaryColor);
    border-color: var(--primaryColor);
    color: #fff;
}

.agreement-actions .btn-primary:disabled {
    background: #cbd5e1;
    border-color: #cbd5e1;
    color: #ffffff;
    opacity: 1;
}

@media (max-width: 575.98px) {
    .agreement-body {
        max-height: 55vh;
    }

    .agreement-actions .btn {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* Auth Link */
.auth-link {
    color: var(--primaryColor);
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.auth-link:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

/* Primary Button */
.auth-btn-primary {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 28px;
    background: var(--primaryColor);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(var(--primaryColor-rgb), 0.35);
    margin-top: 8px;
}

.auth-btn-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--primaryColor-rgb), 0.45);
}

.auth-btn-primary:active {
    transform: translateY(0);
}

.auth-btn-primary i {
    font-size: 18px;
}

/* Captcha Container */
.auth-captcha-container {
    margin-bottom: 20px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
}

.auth-label {
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #475569;
}

.auth-captcha-box {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.auth-captcha-box canvas {
    border-radius: 8px;
    border: 2px solid #e2e8f0;
    background: #fff;
}

.auth-captcha-refresh {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--primaryColor-light);
    color: var(--primaryColor);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.auth-captcha-refresh:hover {
    background: var(--primaryColor);
    color: #fff;
}

.auth-captcha-input {
    max-width: 200px;
    padding-left: 16px !important;
}

/* Error Messages */
.auth-error {
    display: none;
    color: #ef4444;
    font-size: 13px;
    margin-top: 6px;
}

.auth-error:not(:empty) {
    display: block;
}

/* Alert */
.auth-alert {
    margin-top: 16px;
    text-align: center;
}

/* File Uploads */
.auth-file-uploads {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

.auth-file-group {
    background: #f8fafc;
    border: 2px dashed #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    transition: all 0.3s ease;
}

.auth-file-group:hover {
    border-color: var(--primaryColor);
    background: var(--primaryColor-lighter);
}

.auth-file-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #475569;
    margin-bottom: 10px;
}

.auth-file-label i {
    font-size: 16px;
    color: var(--primaryColor);
}

.auth-file-input {
    width: 100%;
    font-size: 12px;
    color: #64748b;
}

.auth-file-input::file-selector-button {
    padding: 8px 12px;
    border: none;
    background: var(--primaryColor);
    color: #fff;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    margin-right: 10px;
    transition: background 0.2s ease;
}

.auth-file-input::file-selector-button:hover {
    background: var(--primary-hover);
}

.auth-file-hint {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 6px;
}

/* Footer */
.auth-footer {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
    text-align: center;
}

.auth-footer p {
    font-size: 13px;
    color: #94a3b8;
    margin: 0;
}

/* ============================================
   AUTH PAGE RESPONSIVE STYLES
   ============================================ */

/* Tablet */
@media (max-width: 991px) {
    .auth-home-btn {
        top: 15px;
        left: 15px;
        padding: 10px 16px;
        font-size: 13px;
    }

    .auth-split-container {
        flex-direction: column;
    }

    .auth-banner-section {
        flex: 0 0 auto;
        min-height: 250px;
    }

    .auth-banner-content h2 {
        font-size: 2rem;
    }

    .auth-form-section {
        padding: 30px 20px;
    }

    .auth-form-container {
        max-width: 500px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .auth-home-btn {
        top: 10px;
        left: 10px;
        padding: 8px 14px;
        font-size: 12px;
        gap: 6px;
    }

    .auth-home-btn span {
        display: none;
    }

    .auth-home-btn i {
        font-size: 18px;
    }

    .auth-banner-section {
        display: none;
    }

    .auth-page-wrapper {
        background: #fff;
    }

    .auth-form-section {
        padding: 60px 16px 20px;
        min-height: 100vh;
    }

    .auth-form-container {
        padding: 0;
    }

    .auth-logo {
        margin-bottom: 24px;
    }

    .auth-logo img {
        max-height: 50px;
    }

    .auth-main-tabs {
        margin-bottom: 20px;
    }

    .auth-main-tab {
        padding: 12px 16px;
        font-size: 14px;
    }

    .auth-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .auth-input {
        padding: 12px 14px 12px 44px;
        font-size: 14px;
    }

    .auth-btn-primary {
        padding: 14px 20px;
        font-size: 15px;
    }

    .auth-file-uploads {
        grid-template-columns: 1fr;
    }

    .auth-options {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .auth-main-tabs {
        flex-direction: column;
        gap: 8px;
    }

    .auth-main-tab {
        width: 100%;
    }

    .auth-sub-tabs {
        flex-direction: column;
        border-bottom: none;
        gap: 8px;
        background: #f8fafc;
        padding: 8px;
        border-radius: 10px;
    }

    .auth-sub-tab {
        padding: 10px 14px;
        border-radius: 8px;
    }

    .auth-sub-tab::after {
        display: none;
    }

    .auth-sub-tab.active {
        background: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }
}

/* ============================================
   MODERN SWEETALERT2 MODAL STYLES
   (Şifremi Unuttum, Uyarılar vb.)
   ============================================ */

/* Modal Container */
.swal2-popup.auth-swal-popup {
    border-radius: 20px;
    padding: 32px 28px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    max-width: 420px;
    width: 90%;
}

/* Title */
.swal2-popup.auth-swal-popup .swal2-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
    padding: 0;
}

/* Subtitle / HTML Content */
.swal2-popup.auth-swal-popup .swal2-html-container {
    font-size: 14px;
    color: #64748b;
    margin: 0 0 24px 0;
    padding: 0;
}

/* Input Label */
.swal2-popup.auth-swal-popup .swal2-input-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--primaryColor);
    margin-bottom: 12px;
}

/* Input Field */
.swal2-popup.auth-swal-popup .swal2-input {
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 18px;
    font-size: 15px;
    color: #1e293b;
    background: #f8fafc;
    transition: all 0.3s ease;
    margin: 0;
    height: auto;
    min-height: 54px;
    box-shadow: none;
}

.swal2-popup.auth-swal-popup .swal2-input:focus {
    border-color: var(--primaryColor);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(var(--primaryColor-rgb), 0.1);
    outline: none;
}

.swal2-popup.auth-swal-popup .swal2-input::placeholder {
    color: #94a3b8;
}

/* Validation Message */
.swal2-popup.auth-swal-popup .swal2-validation-message {
    background: #fef2f2;
    color: #dc2626;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 16px 0 0 0;
    font-size: 13px;
    border: none;
}

.swal2-popup.auth-swal-popup .swal2-validation-message::before {
    content: '\f06a';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-right: 8px;
    color: #dc2626;
}

/* Actions Container */
.swal2-popup.auth-swal-popup .swal2-actions {
    margin-top: 24px;
    gap: 12px;
}

/* Confirm Button */
.swal2-popup.auth-swal-popup .swal2-confirm {
    background: var(--primaryColor) !important;
    border-radius: 10px !important;
    padding: 14px 28px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 15px rgba(var(--primaryColor-rgb), 0.35) !important;
    transition: all 0.3s ease !important;
    border: none !important;
}

.swal2-popup.auth-swal-popup .swal2-confirm:hover {
    background: var(--primary-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--primaryColor-rgb), 0.45) !important;
}

.swal2-popup.auth-swal-popup .swal2-confirm:focus {
    box-shadow: 0 4px 15px rgba(var(--primaryColor-rgb), 0.35), 0 0 0 3px rgba(var(--primaryColor-rgb), 0.2) !important;
}

/* Cancel Button */
.swal2-popup.auth-swal-popup .swal2-cancel {
    background: #f1f5f9 !important;
    color: #64748b !important;
    border-radius: 10px !important;
    padding: 14px 28px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    border: none !important;
}

.swal2-popup.auth-swal-popup .swal2-cancel:hover {
    background: #e2e8f0 !important;
    color: #475569 !important;
}

/* Close Button */
.swal2-popup.auth-swal-popup .swal2-close {
    color: #94a3b8;
    font-size: 28px;
    transition: color 0.2s ease;
}

.swal2-popup.auth-swal-popup .swal2-close:hover {
    color: var(--primaryColor);
}

/* Icon Styles */
.swal2-popup.auth-swal-popup .swal2-icon {
    margin: 0 auto 20px;
    border-width: 3px;
}

.swal2-popup.auth-swal-popup .swal2-icon.swal2-success {
    border-color: #22c55e;
    color: #22c55e;
}

.swal2-popup.auth-swal-popup .swal2-icon.swal2-success .swal2-success-line-tip,
.swal2-popup.auth-swal-popup .swal2-icon.swal2-success .swal2-success-line-long {
    background: #22c55e;
}

.swal2-popup.auth-swal-popup .swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(34, 197, 94, 0.3);
}

.swal2-popup.auth-swal-popup .swal2-icon.swal2-error {
    border-color: #ef4444;
    color: #ef4444;
}

.swal2-popup.auth-swal-popup .swal2-icon.swal2-warning {
    border-color: #f59e0b;
    color: #f59e0b;
}

.swal2-popup.auth-swal-popup .swal2-icon.swal2-info {
    border-color: var(--primaryColor);
    color: var(--primaryColor);
}

.swal2-popup.auth-swal-popup .swal2-icon.swal2-question {
    border-color: var(--primaryColor);
    color: var(--primaryColor);
}

/* Backdrop */
.swal2-backdrop-show {
    background: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(4px);
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .swal2-popup.auth-swal-popup {
        padding: 24px 20px;
        border-radius: 16px;
    }

    .swal2-popup.auth-swal-popup .swal2-title {
        font-size: 1.25rem;
    }

    .swal2-popup.auth-swal-popup .swal2-actions {
        flex-direction: column;
        width: 100%;
    }

    .swal2-popup.auth-swal-popup .swal2-confirm,
    .swal2-popup.auth-swal-popup .swal2-cancel {
        width: 100% !important;
        margin: 0 !important;
    }
}

/* ============================================
   MODERN ACCOUNT PAGE STYLES
   ============================================ */

/* Account Page Container */
.account-page-container {
    padding: 20px 0;
}

/* Account Sidebar */
.account-sidebar {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.account-sidebar-header {
    background: linear-gradient(135deg, var(--primaryColor) 0%, var(--primary-hover, var(--primaryColor)) 100%);
    padding: 24px 20px;
    text-align: center;
    color: #fff;
}

.account-sidebar-greeting {
    font-size: 13px;
    opacity: 0.9;
    margin-bottom: 4px;
}

.account-sidebar-name {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: #fff;
}

.account-sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.account-sidebar-menu .list-group-item {
    border: none;
    border-bottom: 1px solid #f0f0f0;
    padding: 0;
}

.account-sidebar-menu .list-group-item:last-child {
    border-bottom: none;
}

.account-sidebar-menu .list-group-item a {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    color: #444;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.account-sidebar-menu .list-group-item a:hover {
    background: rgba(var(--primaryColor-rgb, 0, 0, 0), 0.04);
    color: var(--primaryColor);
    padding-left: 24px;
}

.account-sidebar-menu .list-group-item a.active {
    background: rgba(var(--primaryColor-rgb, 0, 0, 0), 0.08);
    color: var(--primaryColor);
    border-left: 3px solid var(--primaryColor);
}

.account-sidebar-menu .list-group-item a i {
    width: 24px;
    font-size: 16px;
    margin-right: 12px;
    text-align: center;
    color: #888;
    transition: color 0.2s ease;
}

.account-sidebar-menu .list-group-item a:hover i,
.account-sidebar-menu .list-group-item a.active i {
    color: var(--primaryColor);
}

.account-sidebar-menu .list-group-item a.text-danger {
    color: #dc3545;
}

.account-sidebar-menu .list-group-item a.text-danger i {
    color: #dc3545;
}

.account-sidebar-menu .list-group-item a.text-danger:hover {
    background: rgba(220, 53, 69, 0.08);
}

/* Account Content Area */
.account-content {
    padding-left: 30px;
}

@media (max-width: 991px) {
    .account-content {
        padding-left: 0;
        margin-top: 20px;
    }
}

/* Account Section Cards */
.account-section-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
    margin-bottom: 24px;
    overflow: hidden;
}

.account-section-header {
    display: flex;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #f0f0f0;
    background: #fafafa;
}

.account-section-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--primaryColor) 0%, var(--primary-hover, var(--primaryColor)) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
}

.account-section-icon i {
    color: #fff;
    font-size: 18px;
}

.account-section-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #333;
}

.account-section-subtitle {
    margin: 2px 0 0;
    font-size: 13px;
    color: #888;
}

.account-section-body {
    padding: 24px;
}

/* Account Form Inputs */
.account-form-group {
    margin-bottom: 20px;
}

.account-form-group:last-child {
    margin-bottom: 0;
}

.account-form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    margin-bottom: 8px;
}

.account-form-input {
    width: 100%;
    padding: 14px 16px;
    padding-left: 48px;
    border: 2px solid #e8e8e8;
    border-radius: 12px;
    font-size: 14px;
    color: #333;
    background: #fff;
    transition: all 0.2s ease;
}

.account-form-input:focus {
    outline: none;
    border-color: var(--primaryColor);
    box-shadow: 0 0 0 4px rgba(var(--primaryColor-rgb, 0, 0, 0), 0.1);
}

.account-form-input:disabled {
    background: #f5f5f5;
    cursor: not-allowed;
}

.account-input-wrapper {
    position: relative;
}

.account-input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    font-size: 16px;
    pointer-events: none;
    transition: color 0.2s ease;
}

.account-input-wrapper:focus-within .account-input-icon {
    color: var(--primaryColor);
}

/* Password Toggle Button */
.account-password-toggle {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #aaa;
    font-size: 16px;
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s ease;
}

.account-password-toggle:hover {
    color: var(--primaryColor);
}

/* Password Section Hidden by Default */
.account-password-section {
    display: none;
    animation: fadeInSection 0.3s ease;
}

.account-password-section.show {
    display: block;
}

@keyframes fadeInSection {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

/* Change Password Button */
.account-change-password-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: #f0f0f0;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    color: #555;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.account-change-password-btn:hover {
    background: var(--primaryColor);
    border-color: var(--primaryColor);
    color: #fff;
}

.account-change-password-btn.active {
    background: var(--primaryColor);
    border-color: var(--primaryColor);
    color: #fff;
}

/* Submit Button */
.account-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 32px;
    background: linear-gradient(135deg, var(--primaryColor) 0%, var(--primary-hover, var(--primaryColor)) 100%);
    border: none;
    border-radius: 12px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(var(--primaryColor-rgb, 0, 0, 0), 0.25);
}

.account-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--primaryColor-rgb, 0, 0, 0), 0.35);
}

.account-submit-btn:active {
    transform: translateY(0);
}

.account-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* Account Admin Menu */
.account-admin-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
}

.account-admin-menu li a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.account-admin-menu li a.btn-primary-custom {
    background: var(--primaryColor);
    color: #fff;
}

.account-admin-menu li a.btn-outline-custom {
    background: transparent;
    border: 2px solid var(--primaryColor);
    color: var(--primaryColor);
}

.account-admin-menu li a.btn-outline-custom:hover {
    background: var(--primaryColor);
    color: #fff;
}

/* Form Message inside Account */
.account-form-message {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 500;
    animation: fadeInMessage 0.3s ease;
}

.account-form-message-success {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.account-form-message-error {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

/* Mobile Sidebar Toggle */
.account-mobile-toggle {
    display: none;
    width: 100%;
    padding: 14px 20px;
    background: #fff;
    border: 2px solid #e8e8e8;
    border-radius: 12px;
    color: #444;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 16px;
    transition: all 0.2s ease;
}

.account-mobile-toggle:hover {
    border-color: var(--primaryColor);
    color: var(--primaryColor);
}

.account-mobile-toggle i {
    margin-right: 10px;
}

@media (max-width: 991px) {
    .account-mobile-toggle {
        display: flex;
        align-items: center;
    }

    .account-sidebar {
        display: none;
    }

    .account-sidebar.show {
        display: block;
        margin-bottom: 20px;
    }
}

/* Responsive Account Form */
@media (max-width: 768px) {
    .account-section-header {
        padding: 16px 18px;
    }

    .account-section-body {
        padding: 18px;
    }

    .account-section-icon {
        width: 40px;
        height: 40px;
    }

    .account-section-icon i {
        font-size: 16px;
    }

    .account-section-title {
        font-size: 15px;
    }

    .account-form-input {
        padding: 12px 14px;
        padding-left: 44px;
    }

    .account-submit-btn {
        padding: 14px 24px;
        font-size: 14px;
    }
}

/* ============================================
   COMPANY INFORMATION PAGE STYLES
   ============================================ */

/* Readonly Input Styling */
.account-form-input-readonly {
    width: 100%;
    padding: 14px 16px;
    padding-left: 48px;
    border: 2px solid #e8e8e8;
    border-radius: 12px;
    font-size: 14px;
    color: #555;
    background: #f8f9fa;
    cursor: default;
}

.account-form-input-readonly:focus {
    outline: none;
}

/* Company Name Display */
.account-company-name {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    padding: 14px 16px;
    padding-left: 48px;
    background: linear-gradient(135deg, rgba(var(--primaryColor-rgb, 0, 0, 0), 0.05) 0%, rgba(var(--primaryColor-rgb, 0, 0, 0), 0.02) 100%);
    border-radius: 12px;
    border: 2px solid rgba(var(--primaryColor-rgb, 0, 0, 0), 0.1);
}

/* Logo Preview Section */
.account-logo-preview {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 12px;
    border: 2px dashed #e0e0e0;
    margin-bottom: 16px;
}

.account-logo-image {
    width: 200px;
    height: 100px;
    object-fit: contain;
    background: #fff;
    border-radius: 8px;
    padding: 8px;
    border: 1px solid #e8e8e8;
}

.account-logo-info {
    flex: 1;
}

.account-logo-info p {
    margin: 0;
    font-size: 13px;
    color: #666;
    line-height: 1.5;
}

/* File Upload Styling */
.account-file-upload {
    position: relative;
}

.account-file-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e8e8e8;
    border-radius: 10px;
    font-size: 14px;
    color: #555;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.account-file-input:hover {
    border-color: var(--primaryColor);
}

.account-file-input:focus {
    outline: none;
    border-color: var(--primaryColor);
    box-shadow: 0 0 0 4px rgba(var(--primaryColor-rgb, 0, 0, 0), 0.1);
}

.account-file-input::file-selector-button {
    padding: 8px 16px;
    margin-right: 12px;
    background: var(--primaryColor);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
}

.account-file-input::file-selector-button:hover {
    background: var(--primary-hover, var(--primaryColor));
}

.account-file-hint {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: #888;
}

/* Document Cards */
.account-document-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media (max-width: 576px) {
    .account-document-grid {
        grid-template-columns: 1fr;
    }
}

.account-document-card {
    padding: 20px;
    background: #f8f9fa;
    border-radius: 12px;
    border: 2px solid #e8e8e8;
    text-align: center;
    transition: all 0.2s ease;
}

.account-document-card:hover {
    border-color: var(--primaryColor);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.account-document-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primaryColor) 0%, var(--primary-hover, var(--primaryColor)) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}

.account-document-icon i {
    font-size: 22px;
    color: #fff;
}

.account-document-icon.uploaded {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}

.account-document-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
}

.account-document-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--primaryColor);
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.account-document-link:hover {
    background: var(--primary-hover, var(--primaryColor));
    color: #fff;
    transform: translateY(-2px);
}

/* Upload Button */
.account-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.25);
}

.account-upload-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.35);
}

/* Error Alert */
.account-error-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 12px;
    color: #721c24;
    margin-bottom: 24px;
}

.account-error-alert i {
    font-size: 20px;
}

.account-error-alert span {
    font-weight: 500;
}

/* ===============================================
   USER MENU DROPDOWN - Sepet Sayfalari icin
   =============================================== */

.user-menu-dropdown {
    position: relative;
    display: inline-block;
}

.user-menu-dropdown-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    transition: all 0.2s ease;
}

.user-menu-dropdown-btn:hover {
    background: #f8f9fa;
    border-color: var(--primaryColor);
    color: var(--primaryColor);
}

.user-menu-dropdown-btn i:first-child {
    font-size: 18px;
    color: var(--primaryColor);
}

.user-menu-dropdown-name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu-dropdown-arrow {
    font-size: 10px;
    transition: transform 0.2s ease;
}

.user-menu-dropdown-btn[aria-expanded="true"] .user-menu-dropdown-arrow {
    transform: rotate(180deg);
}

.user-menu-dropdown-list {
    min-width: 240px;
    padding: 8px 0;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    margin-top: 8px !important;
}

.user-menu-dropdown-list .dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    font-size: 14px;
    color: #333;
    transition: all 0.15s ease;
}

.user-menu-dropdown-list .dropdown-item i {
    width: 20px;
    text-align: center;
    color: #666;
}

.user-menu-dropdown-list .dropdown-item:hover {
    background: #f8f9fa;
    color: var(--primaryColor);
}

.user-menu-dropdown-list .dropdown-item:hover i {
    color: var(--primaryColor);
}

.user-menu-dropdown-list .dropdown-item.active {
    background: rgba(var(--primaryColor-rgb), 0.1);
    color: var(--primaryColor);
    font-weight: 600;
}

.user-menu-dropdown-list .dropdown-item.active i {
    color: var(--primaryColor);
}

.user-menu-dropdown-list .dropdown-divider {
    margin: 8px 16px;
    border-color: #e9ecef;
}

/* Primary Link - Alisverise Devam Et */
.user-menu-dropdown-primary {
    background: linear-gradient(135deg, var(--primaryColor) 0%, var(--primary-hover) 100%) !important;
    color: #fff !important;
    font-weight: 600 !important;
    margin: 0 8px 0 8px;
    border-radius: 8px !important;
}

.user-menu-dropdown-primary i {
    color: #fff !important;
}

.user-menu-dropdown-primary:hover {
    opacity: 0.9;
    color: #fff !important;
}

/* Logout Link */
.user-menu-dropdown-logout {
    color: #dc3545 !important;
}

.user-menu-dropdown-logout i {
    color: #dc3545 !important;
}

.user-menu-dropdown-logout:hover {
    background: #fff5f5 !important;
}

/* Mobile */
@media (max-width: 576px) {
    .user-menu-dropdown-name {
        display: none;
    }

    .user-menu-dropdown-btn {
        padding: 8px 12px;
    }

    .user-menu-dropdown-list {
        min-width: 220px;
        right: 0;
        left: auto !important;
    }
}

/* ===============================================
   CART PAGE STYLES - Sepet Sayfasi
   =============================================== */

/* Cart Page Header */
.cart-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e9ecef;
}

.cart-page-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #333;
}

.cart-page-title i {
    color: var(--primaryColor);
}

.cart-page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Cart Table Desktop */
.cart-table-desktop {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    overflow: hidden;
    table-layout: fixed;
    width: 100%;
}

.cart-table-desktop thead th {
    padding: 14px 12px;
    font-weight: 600;
    font-size: 13px;
    color: #333;
    background: #f8f9fa;
    border-bottom: 2px solid #e9ecef;
    white-space: nowrap;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.cart-table-desktop tbody td {
    padding: 14px 12px;
    vertical-align: middle;
    font-size: 14px;
    border-bottom: 1px solid #f0f0f0;
}

.cart-table-desktop tbody tr:last-child td {
    border-bottom: none;
}

.cart-table-desktop tbody tr:hover {
    background-color: #fafafa;
}

/* Product name styling */
.cart-table-desktop td a.text-dark {
    font-weight: 500;
    color: #333 !important;
    text-decoration: none;
    transition: color 0.2s;
}

.cart-table-desktop td a.text-dark:hover {
    color: var(--primaryColor) !important;
}

/* Quantity controller in cart */
.cart-quantity-controller {
    background: #f5f5f5;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid #e0e0e0;
}

.cart-quantity-controller input.decrement,
.cart-quantity-controller input.increment {
    width: 34px;
    height: 36px;
    border: none;
    background: transparent;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    color: #666;
}

.cart-quantity-controller input.decrement:hover,
.cart-quantity-controller input.increment:hover {
    background: #e9ecef;
    color: var(--primaryColor);
}

.cart-quantity-controller input.number {
    width: 50px;
    height: 36px;
    border: none;
    background: #fff;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    border-left: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
}

/* Cart Delete Button */
.cart-delete-btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff5f5;
    border: 1px solid #ffcdd2;
    border-radius: 8px;
    color: #dc3545;
    cursor: pointer;
    transition: all 0.2s;
}

.cart-delete-btn:hover {
    background: #dc3545;
    border-color: #dc3545;
    color: #fff;
}

/* Summary rows styling */
.cart-table-desktop tbody tr.border-top td {
    border-top: 2px solid #e9ecef !important;
    background: #fafafa;
    padding-top: 12px;
    padding-bottom: 10px;
}

/* Cart Summary Box */
.cart-summary-box {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 20px;
    position: sticky;
    top: 100px;
}

.cart-summary-title {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e9ecef;
}

/* Cart Mobile Cards */
.cart-mobile-card {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
}

.cart-mobile-card-header {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.cart-mobile-card-img {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid #e9ecef;
}

.cart-mobile-card-info {
    flex: 1;
}

.cart-mobile-card-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
    line-height: 1.4;
}

.cart-mobile-card-price {
    font-size: 16px;
    font-weight: 700;
    color: var(--primaryColor);
}

.cart-mobile-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

/* Cart Empty State */
.cart-empty-state {
    text-align: center;
    padding: 60px 20px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e9ecef;
}

/* Main cart page empty state icon (not sidebar) */
.cart .cart-empty-state>i {
    font-size: 64px;
    color: #dee2e6;
    margin-bottom: 20px;
}

.cart-empty-state h4 {
    color: #333;
    margin-bottom: 8px;
}

.cart-empty-state p {
    color: #666;
    margin-bottom: 20px;
}

/* Cart Action Buttons */
.cart-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.2s;
}

.cart-action-btn i {
    font-size: 14px;
}

/* Cart Button Colors */
/* Alışverişe Devam Et - Primary Color */
.cart-btn-continue {
    background: var(--primaryColor);
    color: #fff;
    border: none;
}

.cart-btn-continue:hover {
    background: var(--primary-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--primaryColor-rgb), 0.3);
}

/* Yazdır - Green */
.cart-btn-print {
    background: #28a745;
    color: #fff;
    border: none;
}

.cart-btn-print:hover {
    background: var(--primary-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--primaryColor-rgb), 0.3);
}

/* Kaydet - Blue */
.cart-btn-save {
    background: #0d6efd;
    color: #fff;
    border: none;
}

.cart-btn-save:hover {
    background: var(--primary-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--primaryColor-rgb), 0.3);
}

/* Kayıtlı Sepetler - Green */
.cart-btn-saved {
    background: #28a745;
    color: #fff;
    border: none;
}

.cart-btn-saved:hover {
    background: var(--primary-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--primaryColor-rgb), 0.3);
}

/* Boşalt - Red */
.cart-btn-clear {
    background: #dc3545;
    color: #fff;
    border: none;
}

.cart-btn-clear:hover {
    background: var(--primary-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--primaryColor-rgb), 0.3);
}

/* Mobile Responsive */
@media (max-width: 991px) {
    .cart-page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .cart-page-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .cart-summary-box {
        position: static;
        margin-top: 24px;
    }
}

@media (max-width: 576px) {
    .cart-page-actions {
        flex-direction: column;
    }

    .cart-page-actions .btn,
    .cart-page-actions .user-menu-dropdown {
        width: 100%;
    }

    .cart-page-actions .user-menu-dropdown-btn {
        width: 100%;
        justify-content: center;
    }

    .cart-action-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ===============================================
   CART TABLE MODERN STYLES
   =============================================== */

/* Table Container with Card Effect */
.cart .table-responsive {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    border: 1px solid #e9ecef;
}

/* Table Header */
.cart-table-desktop thead th {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    color: #495057;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 16px 12px;
    border-bottom: 2px solid #dee2e6;
    white-space: nowrap;
}

/* Table Body Rows */
.cart-table-desktop tbody tr {
    transition: all 0.2s ease;
    border-bottom: 1px solid #f0f0f0;
}

.cart-table-desktop tbody tr:hover {
    background-color: rgba(var(--primaryColor-rgb), 0.03);
}

.cart-table-desktop tbody tr:last-child {
    border-bottom: none;
}

.cart-table-desktop tbody td {
    padding: 16px 12px;
    vertical-align: middle;
}

/* Product Image */
.cart-table-desktop td img {
    border-radius: 8px;
    border: 1px solid #e9ecef;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cart-table-desktop td img:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Product Name Link */
.cart-table-desktop td a.text-dark,
.cart-table-desktop td .text-decoration-none.text-dark {
    font-weight: 600;
    color: #333 !important;
    transition: color 0.2s;
    line-height: 1.4;
}

.cart-table-desktop td a.text-dark:hover,
.cart-table-desktop td .text-decoration-none.text-dark:hover {
    color: var(--primaryColor) !important;
}

/* KDV Badge */
.cart-table-desktop .badge.bg-secondary {
    background: #6c757d !important;
    font-size: 11px;
    padding: 5px 10px;
    border-radius: 6px;
    font-weight: 500;
}

/* Discount Badges */
.cart-table-desktop .badge.bg-success {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    font-size: 10px;
    padding: 4px 8px;
    border-radius: 4px;
}

.cart-table-desktop .badge.bg-info {
    background: linear-gradient(135deg, #17a2b8 0%, #6610f2 100%) !important;
    font-size: 10px;
    padding: 4px 8px;
    border-radius: 4px;
}

.cart-table-desktop .badge.bg-warning {
    background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%) !important;
    color: #212529 !important;
    font-size: 10px;
    padding: 4px 8px;
    border-radius: 4px;
}

/* Quantity Controller - Modern Style */
.cart-table-desktop .quantity-controller,
.cart-table-desktop .quantity-wrap {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.cart-table-desktop .quantity-controller input.decrement,
.cart-table-desktop .quantity-controller input.increment,
.cart-table-desktop .quantity-wrap input.decrement,
.cart-table-desktop .quantity-wrap input.increment {
    width: 36px;
    height: 38px;
    border: none;
    background: transparent;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    color: #666;
}

.cart-table-desktop .quantity-controller input.decrement:hover,
.cart-table-desktop .quantity-controller input.increment:hover,
.cart-table-desktop .quantity-wrap input.decrement:hover,
.cart-table-desktop .quantity-wrap input.increment:hover {
    background: var(--primaryColor);
    color: #fff;
}

.cart-table-desktop .quantity-controller input.number,
.cart-table-desktop .quantity-wrap input.number {
    width: 50px;
    height: 38px;
    border: none;
    border-left: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    background: #fff;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: #333;
}

/* Price Display */
.cart-table-desktop .fw-bold {
    font-size: 14px;
}

.cart-table-desktop .text-decoration-line-through {
    font-size: 12px;
    opacity: 0.7;
}

/* Total Price Column */
.cart-table-desktop td:nth-last-child(2) .fw-bold {
    color: var(--primaryColor);
    font-size: 15px;
}

/* Delete Button */
.cart-table-desktop td a.text-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: #fff5f5;
    border: 1px solid #ffcdd2;
    border-radius: 8px;
    color: #dc3545;
    transition: all 0.2s;
}

.cart-table-desktop td a.text-danger i {
    font-size: 16px;
}

/* ===============================================
   CART MOBILE LIST STYLES
   =============================================== */

.cart-mobile-item {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    border: 1px solid #e9ecef;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.2s;
}

.cart-mobile-item:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* Mobile Product Image */
.cart-mobile-item img {
    border-radius: 10px;
    border: 1px solid #e9ecef;
}

/* Mobile Product Name */
.cart-mobile-item .fw-bold.small.text-dark a {
    font-size: 14px;
    line-height: 1.4;
}

/* Mobile Delete Button */
.cart-mobile-item a.text-danger {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff5f5;
    border-radius: 6px;
    transition: all 0.2s;
}

.cart-mobile-item a.text-danger:hover {
    background: #dc3545;
    color: #fff !important;
}

/* Mobile Quantity Buttons */
.cart-mobile-item input.decrement,
.cart-mobile-item input.increment {
    min-width: 36px;
    font-weight: 600;
}

.cart-mobile-item input.number {
    font-weight: 700;
}

/* Mobile Price */
.cart-mobile-item .text-primary {
    color: var(--primaryColor) !important;
    font-weight: 700;
}

/* ===============================================
   CART EMPTY STATE
   =============================================== */

.cart-empty {
    padding: 60px 20px;
}

.cart-empty img {
    opacity: 0.6;
    margin-bottom: 20px;
}

.cart-empty .h4,
.cart-empty .h5 {
    color: #333;
    font-weight: 600;
}

.cart-empty .text-muted {
    font-size: 14px;
}

/* ===============================================
   CART SUMMARY / CHECKOUT BOX
   =============================================== */

.checkout-box {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #e9ecef;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

@media (min-width: 1200px) {
    .checkout-box {
        position: sticky;
        top: 100px;
    }
}

/* Checkout Box Labels */
.checkout-box .form-label {
    font-weight: 600;
    color: #495057;
    font-size: 13px;
}

/* Checkout Box Radio Buttons */
.checkout-box .form-check-input:checked {
    background-color: var(--primaryColor);
    border-color: var(--primaryColor);
}

/* Checkout Box Dividers */
.checkout-box .hr-line {
    border-color: #e9ecef;
    margin: 16px 0;
}

/* Checkout Total */
.checkout-box .title-price h5,
.checkout-box .title-price h6 {
    font-weight: 600;
}

.checkout-box .color-primary {
    color: var(--primaryColor);
}

/* Payment Button */
.checkout-box .cus-btn.active-btn {
    background: linear-gradient(135deg, var(--primaryColor) 0%, var(--primary-hover) 100%);
    border: none;
    padding: 14px 24px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 10px;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(var(--primaryColor-rgb), 0.3);
}

.checkout-box .cus-btn.active-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--primaryColor-rgb), 0.4);
}

/* ===============================================
   FREE SHIPPING BANNER
   =============================================== */

.cart .alert-success,
.cart .alert-info {
    border-radius: 10px;
    font-size: 14px;
}

.cart .alert-success {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    border: 1px solid #28a745;
}

.cart .alert-info {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border: 1px solid #2196f3;
}

/* ===============================================
   CART LOADING STATE
   =============================================== */

.cart-loading {
    padding: 60px 20px;
}

.cart-loading .spinner-border {
    color: var(--primaryColor) !important;
}

/* ===============================================
   HAVALE INFO BOX
   =============================================== */

#havaleBilgiDiv .card {
    border-radius: 12px;
    overflow: hidden;
}

#havaleBilgiDiv .card-body h6 {
    color: #333;
}

#havaleBilgiDiv table th {
    font-weight: 600;
    color: #495057;
}

/* ===============================================
   CART TABLE SUMMARY ROWS
   =============================================== */

.cart-table-desktop tbody tr.border-top td {
    background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
    font-weight: 600;
    padding-top: 14px;
    padding-bottom: 14px;
}

/* ===============================================
   SAVED CARTS PAGE STYLES
   =============================================== */

/* Saved Carts Table Container */
.saved-carts-table {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    border: 1px solid #e9ecef;
}

.saved-carts-table .table {
    margin-bottom: 0;
}

.saved-carts-table thead th {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    color: #495057;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 16px 12px;
    border-bottom: 2px solid #dee2e6;
    white-space: nowrap;
}

.saved-carts-table tbody tr {
    transition: all 0.2s ease;
    border-bottom: 1px solid #f0f0f0;
}

.saved-carts-table tbody tr:hover {
    background-color: rgba(var(--primaryColor-rgb), 0.03);
}

.saved-carts-table tbody tr:last-child {
    border-bottom: none;
}

.saved-carts-table tbody td {
    padding: 16px 12px;
    vertical-align: middle;
}

/* Cart Name Column */
.saved-carts-table td:first-child {
    font-weight: 600;
    color: #333;
}

/* Date Column */
.saved-carts-table td:nth-child(2) {
    color: #666;
    font-size: 13px;
}

/* Product Count Badge */
.saved-carts-table td:nth-child(3) {
    font-weight: 600;
    color: var(--primaryColor);
}

/* Total Amount */
.saved-carts-table td:nth-child(4) {
    font-weight: 700;
    color: #333;
    font-size: 15px;
}

/* Action Buttons */
.saved-carts-table .btn-primary {
    background: var(--primaryColor);
    border-color: var(--primaryColor);
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.2s;
}

.saved-carts-table .btn-primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--primaryColor-rgb), 0.3);
}

.saved-carts-table .btn-outline-danger {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.2s;
}

.saved-carts-table .btn-outline-danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

/* Mobile Card View for Saved Carts */
.saved-cart-card {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    border: 1px solid #e9ecef;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.2s;
}

.saved-cart-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    border-color: rgba(var(--primaryColor-rgb), 0.2);
}

.saved-cart-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.saved-cart-card-title {
    font-weight: 600;
    font-size: 16px;
    color: #333;
    margin: 0;
}

.saved-cart-card-date {
    font-size: 12px;
    color: #888;
}

.saved-cart-card-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 12px;
}

.saved-cart-card-stat {
    text-align: center;
}

.saved-cart-card-stat-value {
    font-weight: 700;
    font-size: 18px;
    color: var(--primaryColor);
}

.saved-cart-card-stat-label {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
}

.saved-cart-card-actions {
    display: flex;
    gap: 8px;
}

.saved-cart-card-actions .btn {
    flex: 1;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
}

/* Empty State for Saved Carts */
.saved-carts-empty {
    text-align: center;
    padding: 36px 20px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e9ecef;
}

/* DOĞRUDAN ÇOCUK (> i): yalnızca boş-durum illüstrasyon ikonunu büyütür.
   Eskiden ".saved-carts-empty i" idi ve alttaki butonun içindeki ikonu da
   64px yapıyordu — buton kocaman bir kare gibi görünüyordu. Bu blok
   Kaydedilmiş Sepetler, Tekliflerim, Teklif Taleplerim, Gelen Teklifler ve
   Teklif Al ekranlarının hepsinde kullanılıyor; düzeltme beşini birden kapsar. */
.saved-carts-empty > i {
    font-size: 40px;
    color: #dee2e6;
    margin-bottom: 14px;
    display: block;
}

/* Boş-durum içindeki buton/bağlantı ikonları normal metin boyutunda kalır. */
.saved-carts-empty .btn i,
.saved-carts-empty a i {
    font-size: inherit;
    color: inherit;
    margin-bottom: 0;
    display: inline;
}

.saved-carts-empty .btn {
    padding: 8px 18px;
    font-size: 14px;
}

.saved-carts-empty h5 {
    color: #333;
    margin-bottom: 6px;
    font-size: 17px;
}

.saved-carts-empty p {
    color: #666;
    margin-bottom: 14px;
    font-size: 14px;
}

/* Responsive */
@media (max-width: 768px) {
    .saved-carts-table {
        display: none;
    }

    .saved-carts-mobile {
        display: block;
    }
}

@media (min-width: 769px) {
    .saved-carts-mobile {
        display: none;
    }
}

/* ===============================================
   SAVED CART DETAIL PAGE STYLES
   =============================================== */

/* Info Banner */
.saved-cart-info-banner {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border: none;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.saved-cart-info-banner i {
    font-size: 24px;
    color: #1976d2;
}

.saved-cart-info-banner p {
    margin: 0;
    color: #1565c0;
    font-size: 14px;
}

/* Summary Cards */
.saved-cart-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.saved-cart-summary-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #e9ecef;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: all 0.2s;
}

.saved-cart-summary-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.saved-cart-summary-card.highlight {
    border-color: var(--primaryColor);
    background: linear-gradient(135deg, #fff 0%, rgba(var(--primaryColor-rgb), 0.03) 100%);
}

.saved-cart-summary-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-size: 20px;
}

.saved-cart-summary-icon.blue {
    background: #e3f2fd;
    color: #1976d2;
}

.saved-cart-summary-icon.green {
    background: #e8f5e9;
    color: #388e3c;
}

.saved-cart-summary-icon.orange {
    background: #fff3e0;
    color: #f57c00;
}

.saved-cart-summary-icon.red {
    background: #ffebee;
    color: #d32f2f;
}

.saved-cart-summary-icon.primary {
    background: rgba(var(--primaryColor-rgb), 0.1);
    color: var(--primaryColor);
}

.saved-cart-summary-label {
    font-size: 12px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.saved-cart-summary-value {
    font-size: 22px;
    font-weight: 700;
    color: #333;
}

.saved-cart-summary-value.text-success {
    color: #388e3c !important;
}

.saved-cart-summary-value.text-danger {
    color: #d32f2f !important;
}

/* Detail Table */
.saved-cart-detail-table {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    border: 1px solid #e9ecef;
    margin-bottom: 24px;
}

.saved-cart-detail-table .table {
    margin-bottom: 0;
}

.saved-cart-detail-table thead th {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    color: #495057;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 16px 12px;
    border-bottom: 2px solid #dee2e6;
    white-space: nowrap;
}

.saved-cart-detail-table tbody tr {
    transition: all 0.2s ease;
    border-bottom: 1px solid #f0f0f0;
}

.saved-cart-detail-table tbody tr:hover {
    background-color: rgba(var(--primaryColor-rgb), 0.03);
}

.saved-cart-detail-table tbody td {
    padding: 16px 12px;
    vertical-align: middle;
}

/* Product Name in Table */
.saved-cart-detail-table .product-name {
    font-weight: 600;
    color: #333;
    margin-bottom: 2px;
}

.saved-cart-detail-table .product-warning {
    font-size: 12px;
    color: #d32f2f;
}

/* Status Badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 14px;
}

.status-badge.success {
    background: #e8f5e9;
    color: #388e3c;
}

.status-badge.warning {
    background: #fff3e0;
    color: #f57c00;
}

.status-badge.unknown {
    background: #f5f5f5;
    color: #888;
}

/* Table Footer */
.saved-cart-detail-table tfoot th {
    background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
    padding: 14px 12px;
    font-weight: 600;
}

/* Mobile Card View for Detail */
.saved-cart-detail-mobile {
    display: none;
}

.saved-cart-detail-card {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    border: 1px solid #e9ecef;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.saved-cart-detail-card.unavailable {
    border-color: #ffcdd2;
    background: #fff8f8;
}

.saved-cart-detail-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.saved-cart-detail-card-title {
    font-weight: 600;
    font-size: 15px;
    color: #333;
    margin: 0;
    flex: 1;
}

.saved-cart-detail-card-qty {
    background: #f0f0f0;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #666;
}

.saved-cart-detail-card-warning {
    color: #d32f2f;
    font-size: 12px;
    margin-top: 4px;
}

.saved-cart-detail-card-prices {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid #f0f0f0;
}

.saved-cart-detail-card-price {
    text-align: center;
}

.saved-cart-detail-card-price-label {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.saved-cart-detail-card-price-value {
    font-size: 14px;
    font-weight: 600;
}

/* Action Section */
.saved-cart-action-section {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #e9ecef;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.saved-cart-action-info h5 {
    margin: 0 0 4px;
    font-size: 16px;
    color: #333;
}

.saved-cart-action-info p {
    margin: 0;
    font-size: 13px;
    color: #666;
}

.saved-cart-action-btn {
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 10px;
    background: var(--primaryColor);
    border: none;
    color: #fff;
    transition: all 0.2s;
    white-space: nowrap;
}

.saved-cart-action-btn:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--primaryColor-rgb), 0.3);
    color: #fff;
}

/* Responsive */
@media (max-width: 991px) {
    .saved-cart-detail-table {
        display: none;
    }

    .saved-cart-detail-mobile {
        display: block;
    }

    .saved-cart-action-section {
        flex-direction: column;
        text-align: center;
    }

    .saved-cart-action-btn {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .saved-cart-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .saved-cart-detail-card-prices {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .saved-cart-detail-card-price {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }
}

/* ===============================================
   ORDERS PAGE STYLES (Siparişlerim)
   =============================================== */

/* Orders Page Header */
.orders-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid #f0f0f0;
}

.orders-page-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #333;
}

.orders-page-title i {
    color: var(--primaryColor);
}

/* Orders Table Container */
.orders-table-container {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    border: 1px solid #e9ecef;
    padding: 20px;
}

/* DataTables Wrapper */
.orders-table-container .dataTables_wrapper {
    padding: 0;
}

/* Search Box */
.orders-table-container .dataTables_filter {
    margin-bottom: 16px;
}

.orders-table-container .dataTables_filter input {
    border: 2px solid #e9ecef;
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 14px;
    transition: all 0.2s;
    width: 280px !important;
}

.orders-table-container .dataTables_filter input:focus {
    border-color: var(--primaryColor);
    box-shadow: 0 0 0 3px rgba(var(--primaryColor-rgb), 0.1);
    outline: none;
}

.orders-table-container .dataTables_filter input::placeholder {
    color: #aaa;
}

/* Export Buttons - Cart style */
.orders-table-container .dt-buttons {
    display: flex;
    gap: 8px;
}

/* Override DataTables default button styles */
.orders-table-container button.dt-button.buttons-excel,
.orders-table-container button.dt-button.buttons-pdf,
.orders-table-container a.dt-button.buttons-excel,
.orders-table-container a.dt-button.buttons-pdf {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 500;
    border-radius: 8px !important;
    border: none !important;
    transition: all 0.2s;
    cursor: pointer;
    background-image: none !important;
    filter: none !important;
    box-shadow: none !important;
}

.orders-table-container button.dt-button.buttons-excel,
.orders-table-container a.dt-button.buttons-excel {
    background: #28a745 !important;
    background-color: #28a745 !important;
    color: #fff !important;
}

.orders-table-container button.dt-button.buttons-excel:hover,
.orders-table-container a.dt-button.buttons-excel:hover {
    background: var(--primary-hover) !important;
    background-color: var(--primary-hover) !important;
    color: #fff !important;
}

.orders-table-container button.dt-button.buttons-pdf,
.orders-table-container a.dt-button.buttons-pdf {
    background: #dc3545 !important;
    background-color: #dc3545 !important;
    color: #fff !important;
}

.orders-table-container button.dt-button.buttons-pdf:hover,
.orders-table-container a.dt-button.buttons-pdf:hover {
    background: var(--primary-hover) !important;
    background-color: var(--primary-hover) !important;
    color: #fff !important;
}

/* Orders Table */
#siparisTable {
    width: 100% !important;
    border-collapse: separate;
    border-spacing: 0;
}

#siparisTable thead th {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    color: #495057;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 14px 12px;
    border-bottom: 2px solid #dee2e6;
    white-space: nowrap;
}

#siparisTable tbody tr {
    transition: all 0.2s ease;
}

#siparisTable tbody tr:hover {
    background-color: rgba(var(--primaryColor-rgb), 0.03);
}

#siparisTable tbody td {
    padding: 14px 12px;
    vertical-align: middle;
    border-bottom: 1px solid #f0f0f0;
}

#siparisTable tbody tr:last-child td {
    border-bottom: none;
}

/* Status Badges - Simple style */
#siparisTable .badge {
    font-size: 11px;
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: 600;
}

/* Detail Button in Table */
#siparisTable td .btn-success {
    background: #28a745;
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    padding: 6px 14px;
    border-radius: 8px;
    border: none;
    font-weight: 500;
}

#siparisTable td .btn-success:hover {
    background: var(--primary-hover);
}

/* Detail Button */
#siparisTable .open-modal {
    cursor: pointer !important;
    transition: all 0.2s;
    background: #28a745;
    border-radius: 8px;
}

#siparisTable .open-modal:hover {
    background: var(--primary-hover);
}

/* Pagination Container - Bootstrap 5 DataTables */
.orders-table-container .dataTables_paginate {
    display: flex;
    align-items: center;
}

.orders-table-container .dataTables_paginate .pagination {
    margin: 0;
    gap: 4px;
}

.orders-table-container .dataTables_paginate .page-item .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 14px;
    border-radius: 10px !important;
    font-size: 14px;
    font-weight: 500;
    color: #666;
    background: #fff;
    border: 1px solid #e0e0e0;
    cursor: pointer;
    transition: all 0.15s;
}

.orders-table-container .dataTables_paginate .page-item .page-link:hover {
    background: #f8f9fa;
    border-color: #ccc;
    color: #333;
}

.orders-table-container .dataTables_paginate .page-item.active .page-link {
    background: var(--primaryColor) !important;
    border-color: var(--primaryColor) !important;
    color: #fff !important;
    font-weight: 600;
}

.orders-table-container .dataTables_paginate .page-item.disabled .page-link {
    opacity: 0.4;
    cursor: not-allowed;
    background: #f5f5f5;
    pointer-events: none;
}

.orders-table-container .dataTables_paginate .page-item:first-child .page-link,
.orders-table-container .dataTables_paginate .page-item:last-child .page-link {
    font-weight: 500;
    padding: 0 16px;
}

/* Info Text - Styled like second screenshot */
.orders-table-container .dataTables_info {
    font-size: 13px;
    color: #888;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Pagination Wrapper - Full width with info on left, pagination on right */
.orders-table-container .row.mt-3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
    margin-top: 16px !important;
}

/* Pending Order Modal */
#pendingOrderModal .modal-content {
    border-radius: 16px;
    border: none;
    overflow: hidden;
}

#pendingOrderModal .modal-header {
    background: linear-gradient(135deg, var(--primaryColor) 0%, var(--primary-hover) 100%);
    color: #fff;
    padding: 16px 24px;
    border: none;
}

#pendingOrderModal .modal-title {
    font-weight: 600;
    font-size: 18px;
}

#pendingOrderModal .modal-header .btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.8;
}

#pendingOrderModal .modal-header .btn-close:hover {
    opacity: 1;
}

#pendingOrderModal .modal-body {
    padding: 24px;
}

#pendingOrderModal .table {
    border-radius: 8px;
    overflow: hidden;
}

#pendingOrderModal .table thead th {
    background: #f8f9fa;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #495057;
    border-bottom: 2px solid #dee2e6;
}

#pendingOrderModal .table tbody td {
    vertical-align: middle;
}

#pendingOrderModal .table-warning {
    background-color: #fff8e1 !important;
}

#pendingOrderModal .modal-footer {
    padding: 16px 24px;
    border-top: 1px solid #f0f0f0;
}

/* Order Empty State */
.orders-empty {
    text-align: center;
    padding: 60px 20px;
}

.orders-empty i {
    font-size: 64px;
    color: #dee2e6;
    margin-bottom: 20px;
}

.orders-empty h5 {
    color: #333;
    margin-bottom: 8px;
}

.orders-empty p {
    color: #666;
    margin-bottom: 20px;
}

/* Responsive */
@media (max-width: 991px) {
    .orders-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .orders-table-container .dataTables_filter input {
        width: 100% !important;
    }

    .orders-table-container .dt-buttons {
        width: 100%;
    }

    .orders-table-container button.dt-button.buttons-excel,
    .orders-table-container button.dt-button.buttons-pdf,
    .orders-table-container a.dt-button.buttons-excel,
    .orders-table-container a.dt-button.buttons-pdf {
        flex: 1;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .orders-table-container {
        padding: 12px;
    }

    #siparisTable thead th {
        font-size: 11px;
        padding: 10px 8px;
    }

    #siparisTable tbody td {
        padding: 10px 8px;
        font-size: 13px;
    }

    .orders-table-container .dataTables_paginate .page-item .page-link {
        min-width: 32px;
        height: 32px;
        padding: 0 8px;
        font-size: 12px;
    }
}

/* ========================================
   ORDER PREVIEW MODAL - MODERN DESIGN
   ======================================== */

.order-preview-modal {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Header */
.order-preview-header {
    background: var(--primaryColor);
    color: #fff;
    padding: 20px 24px;
    border: none;
}

.order-preview-title-wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
}

.order-preview-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.order-preview-header .modal-title {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
}

.order-preview-status {
    margin-top: 2px;
}

.order-preview-status .badge {
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 20px;
    font-weight: 500;
}

/* Body */
.order-preview-body {
    padding: 0;
    max-height: 50vh;
    overflow-y: auto;
}

/* Table View */
.order-preview-table {
    display: block;
}

.order-preview-table table {
    margin: 0;
}

.order-preview-table thead th {
    background: #f8f9fa;
    color: #666;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 14px 16px;
    border-bottom: 2px solid #e9ecef;
    white-space: nowrap;
}

.order-preview-table tbody tr {
    transition: background 0.15s;
}

.order-preview-table tbody tr:hover {
    background: #f8f9fa;
}

.order-preview-table tbody td {
    padding: 14px 16px;
    vertical-align: middle;
    border-bottom: 1px solid #f0f0f0;
}

.order-preview-table tbody tr:last-child td {
    border-bottom: none;
}

/* Product Image in Table */
.order-preview-table .order-item-image {
    width: 50px;
    height: 50px;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid #eee;
    background: #fff;
}

/* Product Name */
.order-preview-table .order-item-name {
    font-weight: 600;
    color: #333;
    font-size: 14px;
}

/* Quantity Badge */
.order-preview-table .order-item-qty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 28px;
    background: #f0f0f0;
    border-radius: 6px;
    font-weight: 600;
    font-size: 13px;
    color: #333;
}

/* Price Styles */
.order-preview-table .order-item-price {
    font-weight: 600;
    color: #333;
}

.order-preview-table .order-item-price-sub {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
}

.order-preview-table .order-item-price-old {
    font-size: 12px;
    color: #aaa;
    text-decoration: line-through;
}

/* Discount Row */
.order-preview-table .discount-row {
    background: #fffbeb !important;
}

.order-preview-table .discount-row td {
    padding: 10px 16px;
    font-size: 13px;
}

.order-preview-table .discount-text {
    color: #b45309;
    display: flex;
    align-items: center;
    gap: 6px;
}

.order-preview-table .discount-text i {
    color: #f59e0b;
}

.order-preview-table .discount-amount {
    color: #dc2626;
    font-weight: 600;
}

/* Mobile View */
.order-preview-mobile {
    display: none;
    padding: 16px;
}

.order-preview-mobile-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
}

.order-preview-mobile-card:last-child {
    margin-bottom: 0;
}

.order-preview-mobile-header {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.order-preview-mobile-image {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid #eee;
    background: #fff;
    flex-shrink: 0;
}

.order-preview-mobile-info {
    flex: 1;
    min-width: 0;
}

.order-preview-mobile-name {
    font-weight: 600;
    color: #333;
    font-size: 14px;
    margin-bottom: 4px;
    line-height: 1.3;
}

.order-preview-mobile-qty {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #666;
}

.order-preview-mobile-prices {
    display: flex;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

.order-preview-mobile-price-item {
    text-align: center;
}

.order-preview-mobile-price-label {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.order-preview-mobile-price-value {
    font-weight: 600;
    color: #333;
    font-size: 14px;
}

.order-preview-mobile-price-sub {
    font-size: 11px;
    color: #888;
}

/* Mobile Discount Card */
.order-preview-mobile-discount {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.order-preview-mobile-discount-text {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #b45309;
    font-size: 13px;
}

.order-preview-mobile-discount-text i {
    color: #f59e0b;
}

.order-preview-mobile-discount-amount {
    color: #dc2626;
    font-weight: 600;
    font-size: 14px;
}

/* Footer */
.order-preview-footer {
    background: #f8f9fa;
    padding: 16px 24px;
    border-top: 1px solid #e9ecef;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.order-preview-totals {
    display: flex;
    justify-content: flex-end;
    gap: 24px;
    flex-wrap: wrap;
}

.order-preview-total-item {
    text-align: right;
}

.order-preview-total-label {
    font-size: 13px;
    color: #666;
    margin-bottom: 2px;
}

.order-preview-total-value {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.order-preview-total-value.total-main {
    font-size: 20px;
    color: var(--primaryColor);
}

.order-preview-close-btn {
    background: #6b7280;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s;
    align-self: flex-end;
}

.order-preview-close-btn:hover {
    background: var(--primary-hover);
    color: #fff;
}

/* Empty State */
.order-preview-empty {
    text-align: center;
    padding: 48px 24px;
    color: #888;
}

.order-preview-empty i {
    font-size: 48px;
    color: #ddd;
    margin-bottom: 16px;
}

.order-preview-empty p {
    font-size: 14px;
    margin: 0;
}

/* Loading State */
.order-preview-loading {
    text-align: center;
    padding: 48px 24px;
}

.order-preview-loading .spinner-border {
    width: 32px;
    height: 32px;
    color: var(--primaryColor);
}

.order-preview-loading p {
    margin-top: 12px;
    color: #888;
    font-size: 14px;
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 768px) {
    .order-preview-modal .modal-dialog {
        margin: 8px;
        max-width: calc(100% - 16px);
    }

    .order-preview-header {
        padding: 16px;
    }

    .order-preview-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .order-preview-header .modal-title {
        font-size: 16px;
    }

    .order-preview-body {
        max-height: 60vh;
    }

    /* Hide table, show mobile cards */
    .order-preview-table {
        display: none;
    }

    .order-preview-mobile {
        display: block;
    }

    .order-preview-footer {
        padding: 16px;
    }

    .order-preview-totals {
        gap: 16px;
        justify-content: space-between;
    }

    .order-preview-total-item {
        text-align: left;
    }

    .order-preview-total-value.total-main {
        font-size: 18px;
    }

    .order-preview-close-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==============================================
   SİPARİŞLER - YÜKLENİYOR GÖSTERGESİ
   ============================================== */

.orders-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.orders-loading-content {
    text-align: center;
    padding: 40px 20px;
}

.orders-loading .spinner-border {
    width: 48px;
    height: 48px;
    border-width: 4px;
    color: var(--primaryColor);
    margin-bottom: 16px;
}

.orders-loading-content p {
    margin: 0;
    font-size: 15px;
    color: #666;
    font-weight: 500;
}

/* ==============================================
   HESAP EKSTRESİ - SAYFA STİLLERİ
   ============================================== */

/* Sayfa Başlığı */
.statement-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 0;
}

.statement-page-title {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 12px;
}

.statement-page-title i {
    color: var(--primaryColor);
    font-size: 24px;
}

/* Filtre Paneli */
.statement-filter-panel {
    background: #fff;
    border-radius: 16px;
    padding: 20px 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    margin-bottom: 20px;
}

.statement-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

/* Cari Bakiye Kartı */
.statement-balance-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, var(--primaryColor) 0%, var(--primary-hover) 100%);
    color: #fff;
    padding: 16px 20px;
    border-radius: 14px;
    min-width: 220px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.statement-balance-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.statement-balance-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.statement-balance-label {
    font-size: 12px;
    opacity: 0.9;
    font-weight: 500;
}

.statement-balance-value {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.statement-balance-status {
    font-size: 11px;
    background: rgba(255, 255, 255, 0.25);
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
    margin-top: 4px;
}

/* Tarih Filtreleri */
.statement-date-filters {
    display: flex;
    gap: 16px;
    align-items: flex-end;
}

.statement-date-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.statement-date-item label {
    font-size: 13px;
    font-weight: 500;
    color: #555;
    margin: 0;
}

.statement-date-input {
    position: relative;
    display: flex;
    align-items: center;
}

.statement-date-input i {
    position: absolute;
    left: 14px;
    color: #888;
    font-size: 14px;
    pointer-events: none;
    z-index: 1;
}

.statement-date-input input {
    width: 150px;
    padding: 10px 14px 10px 40px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 14px;
    color: #333;
    background: #fff;
    transition: all 0.2s ease;
}

.statement-date-input input:focus {
    outline: none;
    border-color: var(--primaryColor);
    box-shadow: 0 0 0 3px rgba(var(--primaryColor-rgb), 0.1);
}

.statement-date-input input::placeholder {
    color: #aaa;
}

/* Döviz Seçimi */
.statement-currency-filter {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.statement-currency-filter label {
    font-size: 13px;
    font-weight: 500;
    color: #555;
    margin: 0;
}

.statement-currency-filter #dovizTipi {
    min-width: 160px;
}

.statement-currency-filter .dx-texteditor.dx-editor-outlined {
    background: #fff !important;
    border: 1px solid #ddd !important;
    border-radius: 10px !important;
    height: 42px !important;
}

.statement-currency-filter .dx-texteditor.dx-editor-outlined.dx-state-focused {
    border-color: var(--primaryColor) !important;
    box-shadow: 0 0 0 3px rgba(var(--primaryColor-rgb), 0.1) !important;
}

/* Sorgula Butonu */
.statement-search-btn {
    background: var(--primaryColor);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    margin-top: auto;
    align-self: flex-end;
}

.statement-search-btn:hover {
    background: var(--primary-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.statement-search-btn:active {
    transform: translateY(0);
}

.statement-search-btn i {
    font-size: 14px;
}

/* Tablo Container */
.statement-table-container {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* Yükleniyor Göstergesi */
.statement-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.statement-loading-content {
    text-align: center;
    padding: 40px 20px;
}

.statement-loading .spinner-border {
    width: 48px;
    height: 48px;
    border-width: 4px;
    color: var(--primaryColor);
    margin-bottom: 16px;
}

.statement-loading-content p {
    margin: 0;
    font-size: 15px;
    color: #666;
    font-weight: 500;
}

/* DataTables Wrapper */
.statement-table-container .dataTables_wrapper {
    padding: 0;
}

/* Arama Kutusu */
.statement-table-container .dataTables_filter {
    margin-bottom: 16px;
}

.statement-table-container .dataTables_filter input {
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 10px 16px 10px 40px;
    font-size: 14px;
    min-width: 250px;
    transition: all 0.2s ease;
}

.statement-table-container .dataTables_filter input:focus {
    outline: none;
    border-color: var(--primaryColor);
    box-shadow: 0 0 0 3px rgba(var(--primaryColor-rgb), 0.1);
}

.statement-table-container .dataTables_filter input::placeholder {
    color: #aaa;
}

/* Export Butonları */
.statement-table-container .dt-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.statement-table-container button.dt-button,
.statement-table-container a.dt-button {
    background: #f8f9fa !important;
    background-image: none !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 10px !important;
    padding: 10px 18px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #333 !important;
    transition: all 0.2s ease !important;
    filter: none !important;
}

.statement-table-container button.dt-button:hover,
.statement-table-container a.dt-button:hover {
    background: #e9ecef !important;
    border-color: #ccc !important;
}

.statement-table-container button.btn-export-excel,
.statement-table-container a.btn-export-excel {
    background: #28a745 !important;
    border-color: #28a745 !important;
    color: #fff !important;
}

.statement-table-container button.btn-export-excel:hover,
.statement-table-container a.btn-export-excel:hover {
    background: #218838 !important;
    border-color: #1e7e34 !important;
}

.statement-table-container button.btn-export-pdf,
.statement-table-container a.btn-export-pdf {
    background: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #fff !important;
}

.statement-table-container button.btn-export-pdf:hover,
.statement-table-container a.btn-export-pdf:hover {
    background: #c82333 !important;
    border-color: #bd2130 !important;
}

/* Tablo */
.statement-table-container table.dataTable {
    border-collapse: separate !important;
    border-spacing: 0;
    width: 100% !important;
}

.statement-table-container table.dataTable thead th {
    background: #f8f9fa;
    border-bottom: 2px solid #e9ecef;
    padding: 14px 16px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #555;
}

.statement-table-container table.dataTable tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
    vertical-align: middle;
}

.statement-table-container table.dataTable tbody tr:hover {
    background: #fafbfc;
}

.statement-table-container table.dataTable tbody tr:last-child td {
    border-bottom: none;
}

/* Fiş No Link */
.statement-fis-link {
    color: var(--primaryColor);
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.statement-fis-link:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

.statement-fis-no {
    color: #333;
    font-weight: 500;
}

.statement-fis-type {
    color: #666;
    font-size: 13px;
}

/* Vade rozeti (B2B_Tanimlar.EkstreVadeGoster — sadece Bay.t).
   Koyu zeminde daima beyaz yazı: kontrast kuralı. */
.statement-vade-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

/* Vadesi geçmiş */
.statement-vade-badge.gecikme {
    background: #c62828;
    color: #fff;
}

/* Vadesi bugün */
.statement-vade-badge.bugun {
    background: #b26a00;
    color: #fff;
}

/* Vadesi gelmemiş */
.statement-vade-badge.bekliyor {
    background: #2e7d32;
    color: #fff;
}

/* Vadesi olmayan hareket (havale, nakit, KK fişi) */
.statement-vade-badge.empty {
    background: transparent;
    color: #9ca3af;
    font-weight: 500;
}

/* Borç/Alacak/Bakiye Renkleri */
.statement-borc {
    color: #dc3545;
    font-weight: 600;
}

.statement-alacak {
    color: #28a745;
    font-weight: 600;
}

.statement-bakiye-positive {
    color: #28a745;
    font-weight: 700;
}

.statement-bakiye-negative {
    color: #dc3545;
    font-weight: 700;
}

/* Tablo Hücre Stilleri */
.statement-date {
    font-weight: 500;
    color: #374151;
}

.statement-link {
    color: var(--primaryColor);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.statement-link:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

.statement-type-badge {
    display: inline-block;
    padding: 4px 10px;
    background: #f3f4f6;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #4b5563;
}

.statement-amount {
    font-weight: 600;
    color: var(--secondaryColor);
}

/* Pagination */
.statement-table-container .dataTables_paginate {
    margin-top: 20px;
}

.statement-table-container .dataTables_paginate .pagination {
    gap: 6px;
    justify-content: flex-end;
}

.statement-table-container .dataTables_paginate .page-item .page-link {
    border: 1px solid #e0e0e0;
    border-radius: 10px !important;
    padding: 8px 14px;
    font-size: 14px;
    color: #555;
    background: #fff;
    min-width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.statement-table-container .dataTables_paginate .page-item .page-link:hover {
    background: #f5f5f5;
    border-color: #ccc;
    color: #333;
}

.statement-table-container .dataTables_paginate .page-item.active .page-link {
    background: var(--primaryColor) !important;
    border-color: var(--primaryColor) !important;
    color: #fff !important;
}

.statement-table-container .dataTables_paginate .page-item.disabled .page-link {
    background: #f8f9fa;
    color: #bbb;
    cursor: not-allowed;
}

/* Info */
.statement-table-container .dataTables_info {
    font-size: 13px;
    color: #666;
    padding-top: 16px;
}

/* Empty State */
.statement-empty {
    text-align: center;
    padding: 60px 20px;
}

.statement-empty i {
    font-size: 60px;
    color: #ddd;
    margin-bottom: 20px;
}

.statement-empty h5 {
    font-size: 18px;
    font-weight: 600;
    color: #555;
    margin-bottom: 10px;
}

.statement-empty p {
    font-size: 14px;
    color: #888;
    margin: 0;
}

/* ==============================================
   HESAP EKSTRESİ - MOBİL RESPONSIVE
   ============================================== */

@media (max-width: 991px) {
    .statement-page-header {
        margin-bottom: 16px;
    }

    .statement-page-title {
        font-size: 18px;
    }

    .statement-page-title i {
        font-size: 20px;
    }

    .statement-filter-panel {
        padding: 16px;
    }

    .statement-filter-row {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .statement-balance-card {
        width: 100%;
        justify-content: center;
    }

    .statement-date-filters {
        flex-direction: column;
        width: 100%;
    }

    .statement-date-item {
        width: 100%;
    }

    .statement-date-input input {
        width: 100%;
    }

    .statement-currency-filter {
        width: 100%;
    }

    .statement-currency-filter #dovizTipi {
        width: 100%;
    }

    .statement-search-btn {
        width: 100%;
        justify-content: center;
        padding: 14px 24px;
    }

    .statement-table-container {
        padding: 16px;
        border-radius: 12px;
        overflow-x: auto;
    }

    .statement-table-container .dataTables_filter input {
        min-width: 100%;
        width: 100%;
    }

    .statement-table-container .dt-buttons {
        flex-wrap: wrap;
        justify-content: center;
    }

    .statement-table-container button.dt-button,
    .statement-table-container a.dt-button {
        flex: 1;
        min-width: 120px;
        justify-content: center;
    }

    .statement-table-container .dataTables_paginate .page-item .page-link {
        min-width: 34px;
        height: 34px;
        padding: 6px 10px;
        font-size: 13px;
    }
}

@media (max-width: 576px) {
    .statement-balance-card {
        padding: 14px 16px;
    }

    .statement-balance-icon {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }

    .statement-balance-value {
        font-size: 16px;
    }

    .statement-table-container table.dataTable thead th,
    .statement-table-container table.dataTable tbody td {
        padding: 10px 8px;
        font-size: 12px;
    }

    .statement-table-container table.dataTable thead th {
        font-size: 10px;
    }
}

/* ==============================================
   FATURA DETAY SAYFASI
   Modern, Responsive Invoice Detail Page
   ============================================== */

/* Sayfa Başlığı */
.invoice-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    padding: 20px 24px;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.invoice-detail-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.invoice-detail-title-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.invoice-detail-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--secondaryColor);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.invoice-detail-title i {
    color: var(--primaryColor);
    font-size: 24px;
}

.invoice-detail-number {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}

.invoice-detail-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.invoice-detail-efatura-btn {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    background: linear-gradient(135deg, var(--primaryColor), var(--primary-hover));
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.invoice-detail-efatura-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    color: #fff;
}

/* Fatura Bilgi Kartları */
.invoice-info-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.invoice-info-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    padding: 18px 20px;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border: 1px solid #f0f0f0;
    transition: all 0.2s ease;
}

.invoice-info-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.invoice-info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--primaryColor-lighter);
    color: var(--primaryColor);
    font-size: 20px;
    flex-shrink: 0;
}

.invoice-info-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.invoice-info-label {
    font-size: 12px;
    color: #9ca3af;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.invoice-info-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--secondaryColor);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ürün Tablosu Container */
.invoice-items-container {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    margin-bottom: 24px;
}

.invoice-items-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    border-bottom: 1px solid #f0f0f0;
    background: linear-gradient(135deg, #fafafa 0%, #fff 100%);
}

.invoice-items-header h5 {
    font-size: 16px;
    font-weight: 700;
    color: var(--secondaryColor);
    margin: 0;
}

.invoice-items-header h5 i {
    color: var(--primaryColor);
}

.invoice-items-count {
    font-size: 13px;
    color: #6b7280;
    background: #f3f4f6;
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 500;
}

/* Desktop Tablo */
.invoice-items-table {
    display: block;
    overflow-x: auto;
}

.invoice-items-table table {
    width: 100%;
    border-collapse: collapse;
}

.invoice-items-table thead th {
    background: #f9fafb;
    padding: 14px 16px;
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e5e7eb;
    white-space: nowrap;
}

.invoice-items-table tbody td {
    padding: 16px;
    font-size: 14px;
    color: #374151;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}

.invoice-items-table tbody tr:hover {
    background: #fafafa;
}

.invoice-items-table tbody tr:last-child td {
    border-bottom: none;
}

.invoice-item-code {
    display: inline-block;
    background: #f3f4f6;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    font-family: 'Consolas', 'Monaco', monospace;
}

/* Mobile Kartlar */
.invoice-items-mobile {
    display: none;
    padding: 16px;
    gap: 12px;
}

.invoice-item-card {
    background: #fafafa;
    border-radius: 12px;
    padding: 16px;
    border: 1px solid #e5e7eb;
}

.invoice-item-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.invoice-item-card-header .invoice-item-code {
    background: #fff;
    border: 1px solid #e5e7eb;
}

.invoice-item-kdv {
    font-size: 11px;
    font-weight: 600;
    color: var(--primaryColor);
    background: var(--primaryColor-lighter);
    padding: 4px 8px;
    border-radius: 6px;
}

.invoice-item-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--secondaryColor);
    margin-bottom: 12px;
    line-height: 1.4;
}

.invoice-item-card-details {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

.invoice-item-detail {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.invoice-item-detail .label {
    font-size: 11px;
    color: #9ca3af;
    font-weight: 500;
}

.invoice-item-detail .value {
    font-size: 13px;
    color: #374151;
    font-weight: 600;
}

.invoice-item-card-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px dashed #e5e7eb;
}

.invoice-item-card-total .label {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
}

.invoice-item-card-total .value {
    font-size: 16px;
    font-weight: 700;
    color: var(--primaryColor);
}

/* Özet Bölümü */
.invoice-summary-section {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    flex-wrap: wrap;
}

.invoice-summary-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    min-width: 320px;
    max-width: 380px;
}

.invoice-summary-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

.invoice-summary-card-header i {
    font-size: 16px;
}

.invoice-summary-tl .invoice-summary-card-header {
    background: linear-gradient(135deg, var(--primaryColor), var(--primary-hover));
}

.invoice-summary-currency .invoice-summary-card-header {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

.invoice-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid #f0f0f0;
}

.invoice-summary-row:last-child {
    border-bottom: none;
}

.invoice-summary-row .label {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}

.invoice-summary-row .value {
    font-size: 14px;
    color: var(--secondaryColor);
    font-weight: 600;
}

.invoice-summary-row.currency-rate {
    background: #fafafa;
}

.invoice-summary-row.currency-rate .value {
    font-size: 12px;
    color: #6b7280;
}

.invoice-summary-row.total {
    background: linear-gradient(135deg, #fafafa, #f5f5f5);
    padding: 18px 20px;
}

.invoice-summary-row.total .label {
    font-size: 15px;
    font-weight: 700;
    color: var(--secondaryColor);
}

.invoice-summary-row.total .value {
    font-size: 18px;
    font-weight: 700;
    color: var(--primaryColor);
}

/* ==============================================
   FATURA DETAY - RESPONSIVE
   ============================================== */

@media (max-width: 1200px) {
    .invoice-info-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991px) {
    .invoice-detail-header {
        padding: 16px 20px;
    }

    .invoice-detail-title {
        font-size: 18px;
    }

    .invoice-detail-title i {
        font-size: 20px;
    }

    .invoice-summary-section {
        justify-content: stretch;
    }

    .invoice-summary-card {
        min-width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .invoice-detail-header {
        flex-direction: column;
        align-items: stretch;
    }

    .invoice-detail-header-left {
        justify-content: flex-start;
    }

    .invoice-detail-header-right {
        justify-content: stretch;
    }

    .invoice-detail-efatura-btn {
        width: 100%;
        justify-content: center;
    }

    .invoice-info-cards {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .invoice-info-card {
        padding: 14px 16px;
    }

    .invoice-info-icon {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .invoice-info-value {
        font-size: 14px;
    }

    /* Desktop tablo gizle, mobile kartlar göster */
    .invoice-items-table {
        display: none;
    }

    .invoice-items-mobile {
        display: flex;
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .invoice-detail-header {
        padding: 14px 16px;
        border-radius: 12px;
    }

    .invoice-detail-title {
        font-size: 16px;
    }

    .invoice-info-cards {
        grid-template-columns: 1fr;
    }

    .invoice-info-card {
        padding: 12px 14px;
    }

    .invoice-items-container {
        border-radius: 12px;
    }

    .invoice-items-header {
        padding: 14px 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .invoice-items-header h5 {
        font-size: 14px;
    }

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

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

    .invoice-item-card-total .value {
        font-size: 15px;
    }

    .invoice-summary-card {
        border-radius: 12px;
    }

    .invoice-summary-card-header {
        padding: 14px 16px;
        font-size: 13px;
    }

    .invoice-summary-row {
        padding: 12px 16px;
    }

    .invoice-summary-row .label {
        font-size: 12px;
    }

    .invoice-summary-row .value {
        font-size: 13px;
    }

    .invoice-summary-row.total .label {
        font-size: 14px;
    }

    .invoice-summary-row.total .value {
        font-size: 16px;
    }
}

/* ==============================================
   POS İŞLEMLERİ SAYFASI
   Modern POS Transactions Page
   ============================================== */

/* Empty State */
.pos-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #9ca3af;
}

.pos-empty-state i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.pos-empty-state p {
    font-size: 16px;
    margin: 0;
}

/* Table Wrapper */
.pos-table-wrapper {
    display: block;
    overflow-x: auto;
}

.pos-table-wrapper table thead th {
    background: #f9fafb;
    padding: 14px 16px;
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e5e7eb;
    white-space: nowrap;
}

.pos-table-wrapper table tbody td {
    padding: 16px;
    font-size: 14px;
    color: #374151;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}

.pos-table-wrapper table tbody tr:hover {
    background: #fafafa;
}

.pos-table-wrapper table tbody tr:last-child td {
    border-bottom: none;
}

/* ID Badge */
.pos-id-badge {
    display: inline-block;
    background: #f3f4f6;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    font-family: 'Consolas', 'Monaco', monospace;
}

/* Date */
.pos-date {
    font-weight: 500;
    color: #374151;
}

/* Status Badges */
.pos-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.pos-status-success {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    color: #166534;
}

.pos-status-failed {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    color: #991b1b;
}

/* Source Badge */
.pos-source-badge {
    display: inline-block;
    padding: 4px 10px;
    background: #f3f4f6;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #4b5563;
}

/* Installment */
.pos-installment {
    font-weight: 500;
    color: #374151;
}

/* Amount */
.pos-amount {
    font-weight: 700;
    font-size: 15px;
    color: var(--secondaryColor);
}

/* Card Holder */
.pos-cardholder {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}

/* POS Provider */
.pos-provider {
    display: inline-block;
    padding: 3px 8px;
    background: #eff6ff;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #1e40af;
}

/* Transaction ID */
.pos-txn-id {
    font-size: 12px;
    font-family: 'Consolas', 'Monaco', monospace;
    color: #6b7280;
    word-break: break-all;
}

/* Dekont Button */
.pos-dekont-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    background: linear-gradient(135deg, var(--primaryColor), var(--primary-hover));
    color: #fff;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.pos-dekont-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    color: #fff;
}

/* Mobile Cards */
.pos-mobile-cards {
    display: none;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
}

.pos-mobile-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
}

.pos-mobile-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.pos-mobile-card-id .label {
    font-size: 11px;
    color: #9ca3af;
    font-weight: 500;
}

.pos-mobile-card-id .value {
    font-size: 14px;
    font-weight: 700;
    color: var(--secondaryColor);
}

.pos-mobile-card-body {
    padding: 16px;
}

.pos-mobile-card-row {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
}

.pos-mobile-card-row:last-child {
    margin-bottom: 0;
}

.pos-mobile-card-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pos-mobile-card-item .label {
    font-size: 11px;
    color: #9ca3af;
    font-weight: 500;
}

.pos-mobile-card-item .label i {
    color: var(--primaryColor);
}

.pos-mobile-card-item .value {
    font-size: 13px;
    color: #374151;
    font-weight: 600;
}

.pos-mobile-card-item .value.amount {
    font-size: 15px;
    font-weight: 700;
    color: var(--primaryColor);
}

.pos-mobile-card-footer {
    padding: 12px 16px;
    border-top: 1px solid #e5e7eb;
    background: #fafafa;
}

.pos-mobile-card-footer .pos-dekont-btn {
    width: 100%;
    justify-content: center;
    padding: 12px;
}

/* ==============================================
   POS İŞLEMLERİ - RESPONSIVE
   ============================================== */

@media (max-width: 991px) {
    .pos-table-wrapper {
        display: none;
    }

    .pos-mobile-cards {
        display: flex;
    }
}

@media (max-width: 576px) {
    .pos-mobile-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .pos-mobile-card-row {
        flex-direction: column;
        gap: 12px;
    }
}

/* ==============================================
   DEKONT SAYFASI
   Modern Receipt Page (Standalone)
   ============================================== */

/* Body */
.dekont-body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #f5f5f5;
    margin: 0;
    padding: 20px;
    min-height: 100vh;
    color: #1f2937;
}

/* Container */
.dekont-container {
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

/* Header */
.dekont-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px;
    background: linear-gradient(135deg, var(--primaryColor), var(--primary-hover));
    color: #fff;
    flex-wrap: wrap;
    gap: 16px;
}

.dekont-header-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dekont-title {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.dekont-title i {
    font-size: 28px;
}

.dekont-number {
    font-size: 14px;
    opacity: 0.9;
    font-weight: 500;
}

.dekont-header-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Buttons */
.dekont-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dekont-btn-print {
    background: #fff;
    color: var(--primaryColor);
}

.dekont-btn-print:hover {
    background: #f0f0f0;
    transform: translateY(-2px);
}

.dekont-btn-email {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.dekont-btn-email:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.dekont-btn.success {
    background: #22c55e !important;
    color: #fff !important;
    border-color: #22c55e !important;
}

.dekont-btn.error {
    background: #ef4444 !important;
    color: #fff !important;
    border-color: #ef4444 !important;
}

/* Section */
.dekont-section {
    border-bottom: 1px solid #e5e7eb;
}

.dekont-section:last-child {
    border-bottom: none;
}

.dekont-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 32px;
    background: #f9fafb;
    font-size: 15px;
    font-weight: 700;
    color: var(--secondaryColor);
    border-bottom: 1px solid #e5e7eb;
}

.dekont-section-header i {
    color: var(--primaryColor);
    font-size: 18px;
}

.dekont-section-body {
    padding: 24px 32px;
}

/* Info Grid */
.dekont-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.dekont-info-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dekont-info-item.full-width {
    grid-column: 1 / -1;
}

.dekont-info-item .label {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dekont-info-item .value {
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
}

.dekont-info-item .value.highlight {
    color: var(--primaryColor);
    font-weight: 700;
}

.dekont-info-item .value.amount {
    font-size: 18px;
    font-weight: 700;
    color: var(--primaryColor);
}

/* Commitment */
.dekont-commitment {
    background: #f9fafb;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 24px;
}

.dekont-commitment p {
    font-size: 13px;
    line-height: 1.7;
    color: #4b5563;
    margin: 0;
}

/* Signature Area */
.dekont-signature-area {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.dekont-signature-box {
    text-align: center;
}

.signature-label {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.signature-space {
    height: 100px;
    border: 2px dashed #e5e7eb;
    border-radius: 8px;
    background: #fafafa;
}

/* Error State */
.dekont-error-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding-top: 80px;
}

.dekont-error-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: 40px;
    max-width: 500px;
    text-align: center;
}

.dekont-error-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dekont-error-icon i {
    font-size: 40px;
    color: #dc2626;
}

.dekont-error-content h3 {
    font-size: 20px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 12px;
}

.dekont-error-content p {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 24px;
    line-height: 1.6;
}

.dekont-back-btn {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--primaryColor), var(--primary-hover));
    color: #fff;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.dekont-back-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    color: #fff;
}

/* Print Styles */
@media print {
    .printnone {
        display: none !important;
    }

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

    .dekont-container {
        box-shadow: none;
        border-radius: 0;
    }

    .dekont-section-header {
        background: #f0f0f0 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .dekont-commitment {
        background: #f5f5f5 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .signature-space {
        border: 1px solid #ccc;
    }
}

/* ==============================================
   DEKONT - RESPONSIVE
   ============================================== */

@media (max-width: 768px) {
    .dekont-body {
        padding: 12px;
    }

    .dekont-header {
        padding: 20px;
        flex-direction: column;
        align-items: flex-start;
    }

    .dekont-header-actions {
        width: 100%;
    }

    .dekont-btn {
        flex: 1;
        justify-content: center;
    }

    .dekont-title {
        font-size: 20px;
    }

    .dekont-section-header {
        padding: 16px 20px;
        font-size: 14px;
    }

    .dekont-section-body {
        padding: 20px;
    }

    .dekont-info-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .dekont-signature-area {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .signature-space {
        height: 80px;
    }
}

@media (max-width: 480px) {
    .dekont-header-actions {
        flex-direction: column;
    }

    .dekont-btn {
        width: 100%;
    }

    .dekont-error-card {
        padding: 30px 20px;
    }

    .dekont-error-icon {
        width: 60px;
        height: 60px;
    }

    .dekont-error-icon i {
        font-size: 30px;
    }
}

/* ==============================================
   BANKA BİLGİLERİ SAYFASI
   Modern Bank Information Page
   ============================================== */

/* Page Header */
.bank-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
    padding: 20px 24px;
    background: linear-gradient(135deg, var(--primaryColor), var(--primary-hover));
    border-radius: 12px;
    color: #fff;
}

.bank-page-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
}

.bank-page-title i {
    font-size: 24px;
}

.bank-count {
    background: rgba(255, 255, 255, 0.2);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
}

/* Empty State */
.bank-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    text-align: center;
}

.bank-empty-state i {
    font-size: 64px;
    color: #ddd;
    margin-bottom: 20px;
}

.bank-empty-state p {
    font-size: 16px;
    color: #888;
    margin: 0;
}

/* Cards Grid */
.bank-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 20px;
}

/* Bank Card */
.bank-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid #eee;
}

.bank-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
}

/* Logo Section */
.bank-card-logo-section {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: linear-gradient(135deg, #fafafa, #fff);
    border-bottom: 1px solid #eee;
    min-height: 90px;
}

.bank-card-logo-img {
    max-width: 180px;
    max-height: 70px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.bank-card-logo-placeholder {
    width: 100px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primaryColor), var(--primary-hover));
    color: #fff;
    border-radius: 12px;
}

.bank-card-logo-placeholder i {
    font-size: 28px;
}

/* Bank Name Section */
.bank-card-name-section {
    padding: 14px 24px;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    text-align: center;
}

.bank-card-name {
    font-size: 17px;
    font-weight: 700;
    color: #1f2937;
    letter-spacing: 0.3px;
}

/* Card Body */
.bank-card-body {
    padding: 20px 24px;
}

.bank-card-info {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
}

.bank-card-info-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primaryColor-lighter);
    color: var(--primaryColor);
    border-radius: 8px;
    flex-shrink: 0;
}

.bank-card-info-icon i {
    font-size: 14px;
}

.bank-card-info-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bank-card-info-label {
    font-size: 12px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bank-card-info-value {
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
}

/* IBAN Section */
.bank-card-iban {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 16px;
}

.bank-card-iban-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 12px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bank-card-iban-header i {
    color: var(--primaryColor);
}

.bank-card-iban-value {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bank-card-iban-value .iban-text {
    font-family: 'Courier New', Courier, monospace;
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
    letter-spacing: 1.5px;
    line-height: 1.6;
    padding: 10px 12px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    user-select: all;
    /* Override old .iban-text styles */
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    word-break: break-all;
    flex: unset;
}

/* Copy Button */
.bank-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--primaryColor);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.bank-copy-btn:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
}

.bank-copy-btn.copied {
    background: #10b981;
}

.bank-copy-btn i {
    font-size: 12px;
}

/* ==============================================
   BANKA BİLGİLERİ - RESPONSIVE
   ============================================== */

@media (max-width: 768px) {
    .bank-page-header {
        padding: 16px 20px;
    }

    .bank-page-title {
        font-size: 18px;
    }

    .bank-page-title i {
        font-size: 20px;
    }

    .bank-cards-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .bank-card-logo-section {
        padding: 20px;
        min-height: 80px;
    }

    .bank-card-logo-img {
        max-width: 150px;
        max-height: 55px;
    }

    .bank-card-name-section {
        padding: 12px 20px;
    }

    .bank-card-body {
        padding: 16px 20px;
    }

    .bank-card-name {
        font-size: 16px;
    }

    .bank-card-iban-value .iban-text {
        font-size: 14px;
        letter-spacing: 1px;
        padding: 10px;
    }

    .bank-copy-btn {
        width: 100%;
        justify-content: center;
        padding: 12px;
    }
}

@media (max-width: 480px) {
    .bank-page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .bank-card-logo-img {
        max-width: 130px;
        max-height: 50px;
    }

    .bank-card-logo-placeholder {
        width: 80px;
        height: 50px;
    }

    .bank-card-logo-placeholder i {
        font-size: 22px;
    }

    .bank-card-iban-value .iban-text {
        font-size: 12px;
        letter-spacing: 0.5px;
        padding: 8px 10px;
    }
}

/* ==============================================
   BİLDİRİM ABONELİKLERİM SAYFASI
   Notification Subscriptions Page
   ============================================== */

/* Page Header */
.subscription-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
    padding: 20px 24px;
    background: linear-gradient(135deg, var(--primaryColor), var(--primary-hover));
    border-radius: 12px;
    color: #fff;
}

.subscription-page-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
}

.subscription-page-title i {
    font-size: 24px;
}

.subscription-count {
    background: rgba(255, 255, 255, 0.2);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
}

/* Empty State */
.subscription-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    text-align: center;
}

.subscription-empty-state i {
    font-size: 64px;
    color: #ddd;
    margin-bottom: 20px;
}

.subscription-empty-state h5 {
    font-size: 20px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 12px;
}

.subscription-empty-state p {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 24px;
    max-width: 400px;
    line-height: 1.6;
}

.subscription-browse-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--primaryColor);
    color: #fff;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.subscription-browse-btn:hover {
    background: var(--primary-hover);
    color: #fff;
    transform: translateY(-2px);
}

/* Subscription List */
.subscription-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Subscription Card */
.subscription-card {
    display: flex;
    align-items: stretch;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid #eee;
    overflow: hidden;
    transition: all 0.3s ease;
}

.subscription-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.subscription-card-deleting {
    opacity: 0.5;
    pointer-events: none;
}

/* Product Image */
.subscription-card-image {
    flex-shrink: 0;
    width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    padding: 12px;
}

.subscription-card-image img {
    width: 96px;
    height: 96px;
    object-fit: contain;
    border-radius: 8px;
}

/* Card Content */
.subscription-card-content {
    flex: 1;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.subscription-card-header {
    margin-bottom: 8px;
}

.subscription-product-name {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    text-decoration: none;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.subscription-product-name:hover {
    color: var(--primaryColor);
}

.subscription-product-code {
    font-size: 12px;
    color: #6b7280;
}

.subscription-card-details {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.subscription-variant {
    display: inline-block;
    padding: 4px 10px;
    background: #f3f4f6;
    border-radius: 6px;
    font-size: 12px;
    color: #4b5563;
}

.subscription-card-info {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.subscription-info-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.subscription-info-item .label {
    color: #6b7280;
}

.subscription-info-item .value {
    font-weight: 600;
    color: #374151;
}

.subscription-info-item .value.target {
    color: var(--primaryColor);
}

/* Card Actions */
.subscription-card-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 10px;
    padding: 16px 20px;
    background: #fafafa;
    border-left: 1px solid #eee;
    min-width: 160px;
}

/* Type Badge */
.subscription-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
}

.subscription-type-stock {
    background: #dbeafe;
    color: #1d4ed8;
}

.subscription-type-price {
    background: #dcfce7;
    color: #16a34a;
}

/* Status Badge */
.subscription-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
}

.subscription-status-waiting {
    background: #fef3c7;
    color: #d97706;
}

.subscription-status-sent {
    background: #e5e7eb;
    color: #6b7280;
}

/* Delete Button */
.subscription-delete-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #fff;
    color: #dc2626;
    border: 1px solid #fecaca;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.subscription-delete-btn:hover {
    background: #dc2626;
    color: #fff;
    border-color: #dc2626;
}

/* ==============================================
   BİLDİRİM ABONELİKLERİ - RESPONSIVE
   ============================================== */

@media (max-width: 992px) {
    .subscription-card {
        flex-wrap: wrap;
    }

    .subscription-card-image {
        width: 100px;
    }

    .subscription-card-image img {
        width: 76px;
        height: 76px;
    }

    .subscription-card-actions {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        width: 100%;
        border-left: none;
        border-top: 1px solid #eee;
        min-width: unset;
    }
}

@media (max-width: 768px) {
    .subscription-page-header {
        padding: 16px 20px;
    }

    .subscription-page-title {
        font-size: 18px;
    }

    .subscription-page-title i {
        font-size: 20px;
    }

    .subscription-card {
        flex-direction: column;
    }

    .subscription-card-image {
        width: 100%;
        padding: 16px;
    }

    .subscription-card-image img {
        width: 100px;
        height: 100px;
    }

    .subscription-card-content {
        padding: 16px;
    }

    .subscription-product-name {
        white-space: normal;
    }

    .subscription-card-info {
        flex-direction: column;
        gap: 8px;
    }

    .subscription-card-actions {
        padding: 12px 16px;
        gap: 8px;
    }

    .subscription-type-badge,
    .subscription-status-badge {
        flex: 1;
        justify-content: center;
    }

    .subscription-delete-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .subscription-page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .subscription-empty-state {
        padding: 40px 16px;
    }

    .subscription-empty-state i {
        font-size: 48px;
    }

    .subscription-empty-state h5 {
        font-size: 18px;
    }
}

/* ==============================================
   BAYİ SÖZLEŞME YÜKLEME BANNER'I
   ============================================== */
.bayi-sozlesme-banner {
    width: 100%;
    color: #fff;
    font-size: 14px;
    line-height: 1.4;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    position: relative;
    z-index: 1040;
}

.bayi-sozlesme-banner__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.bayi-sozlesme-banner__icon {
    font-size: 18px;
    flex-shrink: 0;
}

.bayi-sozlesme-banner__text {
    flex: 1;
    min-width: 200px;
    font-weight: 500;
}

.bayi-sozlesme-banner__btn {
    background: rgba(255, 255, 255, 0.95);
    color: #1a1a1a;
    padding: 6px 16px;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
    font-size: 13px;
    transition: background 0.15s ease, transform 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.bayi-sozlesme-banner__btn:hover {
    background: #fff;
    color: #000;
    transform: translateY(-1px);
    text-decoration: none;
}

.bayi-sozlesme-banner--yuklenmedi {
    background: linear-gradient(90deg, #b91c1c 0%, #dc2626 100%);
}

.bayi-sozlesme-banner--bekliyor {
    background: linear-gradient(90deg, #b45309 0%, #d97706 100%);
}

.bayi-sozlesme-banner--reddedildi {
    background: linear-gradient(90deg, #7f1d1d 0%, #991b1b 100%);
}

@media (max-width: 576px) {
    .bayi-sozlesme-banner__inner {
        padding: 10px 14px;
        gap: 8px;
    }

    .bayi-sozlesme-banner__text {
        font-size: 13px;
    }

    .bayi-sozlesme-banner__btn {
        padding: 5px 12px;
        font-size: 12px;
    }
}

/* ==============================================
   DESTEK TALEPLERİ (SUPPORT TICKETS)
   ============================================== */

/* Page Header */
.support-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    background: linear-gradient(135deg, var(--primaryColor, #2563eb) 0%, var(--primary-hover, #1d4ed8) 100%);
    border-radius: 16px;
    margin-bottom: 24px;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.2);
}

.support-page-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.support-page-title {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    margin: 0;
}

.support-page-title i {
    font-size: 26px;
    opacity: 0.9;
}

/* New Ticket Button */
.support-new-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
}

.support-new-btn:hover {
    background: #fff;
    color: var(--primaryColor, #2563eb);
    border-color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.support-new-btn i {
    font-size: 14px;
}

/* Table Container */
.support-table-container {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    padding: 24px;
    overflow: hidden;
}

.support-table-container .dataTables_wrapper .row:last-child {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #f1f5f9;
}

/* DataTables Wrapper */
.support-table-container .dataTables_wrapper {
    padding: 0;
}

/* DataTables Top Row (Length + Filter) */
.support-table-container .dataTables_wrapper .row:first-child {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

/* Length Dropdown */
.support-table-container .dataTables_length {
    display: flex;
    align-items: center;
    gap: 8px;
}

.support-table-container .dataTables_length label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    color: #64748b;
}

.support-table-container .dataTables_length select {
    padding: 10px 36px 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    color: #374151;
    background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23374151' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") no-repeat right 12px center/12px;
    appearance: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.support-table-container .dataTables_length select:focus {
    outline: none;
    border-color: var(--primaryColor, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Search Filter */
.support-table-container .dataTables_filter {
    display: flex;
    align-items: center;
}

.support-table-container .dataTables_filter label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    color: #64748b;
}

.support-table-container .dataTables_filter input {
    padding: 10px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    min-width: 220px;
    color: #374151;
    transition: all 0.2s ease;
}

.support-table-container .dataTables_filter input:focus {
    outline: none;
    border-color: var(--primaryColor, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.support-table-container .dataTables_filter input::placeholder {
    color: #9ca3af;
}

/* Loading State */
.support-loading {
    padding: 80px 20px;
    text-align: center;
}

.support-loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.support-loading-content .spinner-border {
    width: 48px;
    height: 48px;
    color: var(--primaryColor, #2563eb);
}

.support-loading-content p {
    color: #6b7280;
    font-size: 15px;
    margin: 0;
}

/* Empty State */
.support-empty-state {
    padding: 80px 20px;
    text-align: center;
}

.support-empty-state i {
    font-size: 64px;
    color: #d1d5db;
    margin-bottom: 20px;
}

.support-empty-state h5 {
    font-size: 20px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.support-empty-state p {
    color: #6b7280;
    font-size: 14px;
    margin-bottom: 24px;
}

.support-browse-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--primaryColor, #2563eb);
    color: #fff;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.support-browse-btn:hover {
    background: var(--primary-hover, #1d4ed8);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* Table Styling */
.support-table-container .dataTables_scroll {
    overflow-x: auto;
}

#supportTable,
.support-table-container table.dataTable {
    width: 100% !important;
    margin: 0;
    border-collapse: separate !important;
    border-spacing: 0;
    table-layout: auto;
}

#supportTable thead {
    background: #f8fafc;
}

#supportTable thead th {
    padding: 16px 20px;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}

#supportTable tbody tr {
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.2s ease;
}

#supportTable tbody tr:hover {
    background: #f8fafc;
}

#supportTable tbody td {
    padding: 16px 20px;
    vertical-align: middle;
}

/* Table Cell Styles */
.support-ticket-no {
    display: inline-block;
    padding: 6px 12px;
    background: linear-gradient(135deg, var(--primaryColor, #2563eb) 0%, var(--primary-hover, #1d4ed8) 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    border-radius: 8px;
    letter-spacing: 0.3px;
}

.support-ticket-title {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    display: block;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.support-ticket-subject {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: #f1f5f9;
    color: #475569;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
}

.support-ticket-date {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
}

/* Status Badges */
.support-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.support-status-pending {
    background: #fef3c7;
    color: #d97706;
}

.support-status-approved {
    background: #dcfce7;
    color: #16a34a;
}

.support-status-rejected {
    background: #fee2e2;
    color: #dc2626;
}

/* Detail Button */
.support-detail-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #f1f5f9;
    color: var(--primaryColor, #2563eb);
    border-radius: 10px;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.support-detail-btn:hover {
    background: var(--primaryColor, #2563eb);
    color: #fff;
    transform: scale(1.1);
}

/* Mobile Cards - Hidden by Default */
.support-mobile-cards {
    display: none;
}

.support-mobile-card {
    border-bottom: 1px solid #f1f5f9;
    padding: 16px 20px;
}

.support-mobile-card:last-child {
    border-bottom: none;
}

.support-mobile-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.support-mobile-ticket-no {
    display: inline-block;
    padding: 6px 12px;
    background: linear-gradient(135deg, var(--primaryColor, #2563eb) 0%, var(--primary-hover, #1d4ed8) 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    border-radius: 8px;
}

.support-mobile-card-body {
    margin-bottom: 12px;
}

.support-mobile-title {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 8px;
    line-height: 1.4;
}

.support-mobile-info {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.support-mobile-subject,
.support-mobile-date {
    font-size: 13px;
    color: #64748b;
}

.support-mobile-card-footer {
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
}

.support-mobile-detail-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    background: var(--primaryColor, #2563eb);
    color: #fff;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.support-mobile-detail-btn:hover {
    background: var(--primary-hover, #1d4ed8);
    color: #fff;
}

/* DataTable Customization */
.support-table-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
    flex-wrap: wrap;
    gap: 12px;
}

.support-table-length select {
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    color: #475569;
}

.support-table-search input {
    padding: 10px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    min-width: 220px;
    transition: all 0.2s ease;
}

.support-table-search input:focus {
    outline: none;
    border-color: var(--primaryColor, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.support-table-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-top: 1px solid #f1f5f9;
    flex-wrap: wrap;
    gap: 12px;
}

.support-table-info {
    font-size: 13px;
    color: #64748b;
}

/* DataTables Pagination */
.support-table-container .dataTables_paginate {
    margin-top: 0;
}

.support-table-container .dataTables_paginate .pagination {
    gap: 6px;
    justify-content: flex-end;
}

.support-table-container .dataTables_paginate .page-item .page-link {
    border: 1px solid #e0e0e0;
    border-radius: 10px !important;
    padding: 8px 14px;
    font-size: 14px;
    color: #555;
    background: #fff;
    min-width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.support-table-container .dataTables_paginate .page-item .page-link:hover {
    background: #f5f5f5;
    border-color: #ccc;
    color: #333;
}

.support-table-container .dataTables_paginate .page-item.active .page-link {
    background: var(--primaryColor) !important;
    border-color: var(--primaryColor) !important;
    color: #fff !important;
}

.support-table-container .dataTables_paginate .page-item.disabled .page-link {
    background: #f8f9fa;
    color: #bbb;
    cursor: not-allowed;
}

/* DataTables Info */
.support-table-container .dataTables_info {
    font-size: 13px;
    color: #666;
    padding-top: 16px;
}

/* ==============================================
   DESTEK TALEPLERİ - RESPONSIVE
   ============================================== */

@media (max-width: 992px) {
    .support-table-container .dataTables_wrapper {
        display: none !important;
    }

    .support-mobile-cards {
        display: block;
    }

    .support-table-container {
        padding: 16px;
    }
}

@media (max-width: 768px) {
    .support-page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 16px 20px;
    }

    .support-page-title {
        font-size: 18px;
    }

    .support-page-title i {
        font-size: 22px;
    }

    .support-new-btn {
        justify-content: center;
        padding: 10px 16px;
    }

    .support-table-container .dataTables_wrapper .row:first-child {
        flex-direction: column;
        align-items: stretch;
    }

    .support-table-container .dataTables_length,
    .support-table-container .dataTables_filter {
        width: 100%;
    }

    .support-table-container .dataTables_length label,
    .support-table-container .dataTables_filter label {
        width: 100%;
        flex-wrap: wrap;
    }

    .support-table-container .dataTables_filter input {
        width: 100%;
        min-width: 100%;
    }

    .support-table-container .dataTables_paginate .page-item .page-link {
        min-width: 34px;
        height: 34px;
        padding: 6px 10px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .support-page-header {
        padding: 14px 16px;
    }

    .support-mobile-card {
        padding: 14px 16px;
    }

    .support-mobile-info {
        flex-direction: column;
        gap: 6px;
    }

    .support-empty-state {
        padding: 50px 16px;
    }

    .support-empty-state i {
        font-size: 48px;
    }

    .support-empty-state h5 {
        font-size: 18px;
    }
}

/* ==============================================
   YENİ DESTEK TALEBİ FORMU
   ============================================== */

/* Form Card */
.support-form-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.support-form-header {
    padding: 20px 24px;
    background: linear-gradient(135deg, var(--primaryColor, #2563eb) 0%, var(--primary-hover, #1d4ed8) 100%);
}

.support-form-header h5 {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.support-form-header h5 i {
    font-size: 22px;
    opacity: 0.9;
}

.support-form-body {
    padding: 24px;
}

/* Form Groups */
.support-form-group {
    margin-bottom: 20px;
}

.support-form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.support-form-label .text-danger {
    color: #dc2626;
}

.support-form-input,
.support-form-select,
.support-form-textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14px;
    color: #1f2937;
    transition: all 0.2s ease;
    background: #fff;
}

.support-form-input:focus,
.support-form-select:focus,
.support-form-textarea:focus {
    outline: none;
    border-color: var(--primaryColor, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.support-form-input::placeholder,
.support-form-textarea::placeholder {
    color: #9ca3af;
}

.support-form-textarea {
    min-height: 120px;
    resize: vertical;
}

.support-form-select {
    cursor: pointer;
}

.support-form-hint {
    display: block;
    font-size: 12px;
    color: #6b7280;
    margin-top: 6px;
}

/* File Upload */
.support-file-upload {
    border: 2px dashed #e5e7eb;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    transition: all 0.2s ease;
    cursor: pointer;
}

.support-file-upload:hover {
    border-color: var(--primaryColor, #2563eb);
    background: #f8fafc;
}

.support-file-upload i {
    font-size: 32px;
    color: #9ca3af;
    margin-bottom: 12px;
}

.support-file-upload p {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

.support-file-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

/* Form Actions */
.support-form-actions {
    display: flex;
    gap: 12px;
    padding-top: 8px;
}

.support-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: var(--primaryColor, #2563eb);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.support-submit-btn:hover {
    background: var(--primary-hover, #1d4ed8);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
}

.support-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.support-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: #f3f4f6;
    color: #4b5563;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.support-back-btn:hover {
    background: #e5e7eb;
    color: #374151;
}

/* ==============================================
   DESTEK TALEBİ DETAY
   ============================================== */

/* Detail Card */
.support-detail-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.support-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    background: linear-gradient(135deg, var(--primaryColor, #2563eb) 0%, var(--primary-hover, #1d4ed8) 100%);
    flex-wrap: wrap;
}

.support-detail-header h5 {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.support-detail-header h5 i {
    font-size: 22px;
    opacity: 0.9;
}

.support-detail-status {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    backdrop-filter: blur(4px);
}

.support-detail-body {
    padding: 24px;
}

/* Info Grid */
.support-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}

.support-detail-info-card {
    background: #f8fafc;
    border-radius: 12px;
    padding: 20px;
}

.support-detail-info-table {
    width: 100%;
}

.support-detail-info-table th {
    width: 40%;
    padding: 8px 0;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    text-align: left;
    vertical-align: top;
}

.support-detail-info-table td {
    padding: 8px 0;
    font-size: 14px;
    color: #1f2937;
    font-weight: 500;
}

/* Detail Sections */
.support-detail-section {
    margin-bottom: 24px;
}

.support-detail-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 12px;
}

.support-detail-section-title i {
    color: var(--primaryColor, #2563eb);
    font-size: 16px;
}

.support-detail-content {
    background: #f8fafc;
    border-radius: 12px;
    padding: 20px;
    font-size: 14px;
    line-height: 1.7;
    color: #374151;
}

/* Product List in Detail */
.support-detail-products {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.support-detail-product-item {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px 16px;
}

.support-detail-product-code {
    font-size: 13px;
    font-weight: 700;
    color: var(--primaryColor, #2563eb);
    margin-bottom: 4px;
}

.support-detail-product-name {
    font-size: 14px;
    color: #374151;
    margin-bottom: 4px;
}

.support-detail-product-qty {
    font-size: 13px;
    color: #6b7280;
}

/* Attachments */
.support-detail-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.support-detail-attachment {
    width: 100px;
    height: 100px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;
}

.support-detail-attachment:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.support-detail-attachment img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.support-detail-attachment-pdf {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    cursor: pointer;
}

.support-detail-attachment-pdf i {
    font-size: 32px;
    color: #dc2626;
    margin-bottom: 6px;
}

.support-detail-attachment-pdf span {
    font-size: 11px;
    color: #6b7280;
}

/* Admin Response */
.support-detail-response {
    border-radius: 12px;
    padding: 20px;
    font-size: 14px;
    line-height: 1.7;
}

.support-detail-response-approved {
    background: #dcfce7;
    border-left: 4px solid #16a34a;
    color: #166534;
}

.support-detail-response-rejected {
    background: #fee2e2;
    border-left: 4px solid #dc2626;
    color: #991b1b;
}

/* Detail Actions */
.support-detail-actions {
    padding-top: 8px;
    border-top: 1px solid #f1f5f9;
    margin-top: 24px;
}

/* ==============================================
   DESTEK TALEBİ DETAY - RESPONSIVE
   ============================================== */

@media (max-width: 768px) {
    .support-detail-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 16px 20px;
    }

    .support-detail-header h5 {
        font-size: 18px;
    }

    .support-detail-body {
        padding: 20px;
    }

    .support-detail-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .support-form-body {
        padding: 20px;
    }

    .support-form-actions {
        flex-direction: column;
    }

    .support-submit-btn,
    .support-back-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==============================================
   HESAP SİLME SAYFASI (DELETE ACCOUNT)
   ============================================== */

.delete-account-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.delete-account-wrapper {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

/* Logo */
.delete-account-logo {
    text-align: center;
}

.delete-account-logo img {
    max-height: 60px;
    width: auto;
}

/* Ana Kart */
.delete-account-card {
    width: 100%;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

/* Header */
.delete-account-header {
    text-align: center;
    padding: 32px 24px 24px;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-bottom: 1px solid #fecaca;
}

.delete-account-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    border-radius: 50%;
    box-shadow: 0 8px 24px rgba(220, 38, 38, 0.3);
}

.delete-account-icon i {
    font-size: 36px;
    color: #fff;
}

.delete-account-header h2 {
    font-size: 22px;
    font-weight: 700;
    color: #991b1b;
    margin: 0 0 8px;
}

.delete-account-header p {
    font-size: 14px;
    color: #b91c1c;
    margin: 0;
    font-weight: 500;
}

/* Uyarı Kutusu */
.delete-account-warning {
    margin: 24px;
    padding: 20px;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 14px;
}

.delete-account-warning-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    color: #92400e;
    margin-bottom: 14px;
}

.delete-account-warning-title i {
    font-size: 18px;
    color: #d97706;
}

.delete-account-warning-list {
    margin: 0;
    padding-left: 20px;
    color: #78350f;
    font-size: 13px;
    line-height: 1.7;
}

.delete-account-warning-list li {
    margin-bottom: 6px;
}

.delete-account-warning-list li:last-child {
    margin-bottom: 0;
}

/* Doğrulama Alanı */
.delete-account-verify {
    padding: 24px;
    border-top: 1px solid #f1f5f9;
}

.delete-account-verify-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
}

.delete-account-verify-title i {
    font-size: 16px;
    color: var(--primaryColor, #2563eb);
}

.delete-account-verify>p {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 20px;
}

/* Input Group */
.delete-account-input-group {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.delete-account-input-icon {
    position: absolute;
    left: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 16px;
    z-index: 1;
}

.delete-account-input {
    width: 100%;
    padding: 14px 48px 14px 48px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 15px;
    color: #1e293b;
    transition: all 0.2s ease;
    background: #f8fafc;
}

.delete-account-input:focus {
    outline: none;
    border-color: var(--primaryColor, #2563eb);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

.delete-account-input::placeholder {
    color: #94a3b8;
}

.delete-account-password-toggle {
    position: absolute;
    right: 16px;
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 16px;
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s ease;
}

.delete-account-password-toggle:hover {
    color: #64748b;
}

/* Butonlar */
.delete-account-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.delete-account-btn-delete {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.delete-account-btn-delete:hover {
    background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.35);
}

.delete-account-btn-delete:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.delete-account-btn-cancel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 24px;
    background: #f1f5f9;
    color: #475569;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.delete-account-btn-cancel:hover {
    background: #e2e8f0;
    color: #1e293b;
}

/* Footer */
.delete-account-footer {
    text-align: center;
}

.delete-account-footer p {
    font-size: 13px;
    color: #94a3b8;
    margin: 0;
}

/* ==============================================
   HESAP SİLME - RESPONSIVE
   ============================================== */

@media (max-width: 576px) {
    .delete-account-page {
        padding: 20px 16px;
    }

    .delete-account-card {
        border-radius: 16px;
    }

    .delete-account-header {
        padding: 24px 20px 20px;
    }

    .delete-account-icon {
        width: 70px;
        height: 70px;
    }

    .delete-account-icon i {
        font-size: 30px;
    }

    .delete-account-header h2 {
        font-size: 20px;
    }

    .delete-account-warning {
        margin: 16px;
        padding: 16px;
    }

    .delete-account-verify {
        padding: 20px 16px;
    }

    .delete-account-btn-delete,
    .delete-account-btn-cancel {
        padding: 14px 20px;
        font-size: 14px;
    }
}

/* ========================================
   FAVORİLERİM SAYFASI STİLLERİ
   ======================================== */

/* Sayfa Header */
.favorites-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 24px 28px;
    background: linear-gradient(135deg, var(--primaryColor, #2563eb) 0%, color-mix(in srgb, var(--primaryColor, #2563eb) 80%, #000) 100%);
    border-radius: 16px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.favorites-page-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.favorites-page-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
}

.favorites-page-title i {
    font-size: 24px;
}

.favorites-count-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    backdrop-filter: blur(10px);
}

.favorites-shop-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #fff;
    color: var(--primaryColor, #2563eb);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.favorites-shop-btn:hover {
    background: #f8fafc;
    color: var(--primaryColor, #2563eb);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.favorites-shop-btn i {
    font-size: 16px;
}

/* Ürün Grid */
.favorites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

/* Ürün Kartı */
.favorites-product-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
}

.favorites-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.favorites-product-card.favorites-card-removing {
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.2s ease;
}

/* Ürün Resmi */
.favorites-product-image {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: #f8fafc;
}

.favorites-product-image-link {
    display: block;
    width: 100%;
    height: 100%;
}

.favorites-product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 16px;
    transition: transform 0.4s ease;
}

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

/* İndirim Badge */
.favorites-discount-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    border-radius: 8px;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}

/* Favorilerden Çıkar Butonu */
.favorites-remove-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: none;
    border-radius: 50%;
    color: var(--primaryColor, #2563eb);
    font-size: 18px;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.favorites-remove-btn:hover {
    background: #fef2f2;
    color: #dc2626;
    transform: scale(1.1);
}

/* Stokta Yok Overlay */
.favorites-out-of-stock {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    z-index: 5;
    backdrop-filter: blur(2px);
}

.favorites-out-of-stock i {
    font-size: 32px;
    opacity: 0.9;
}

/* Ürün Bilgileri */
.favorites-product-info {
    padding: 20px;
}

.favorites-product-title {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

.favorites-product-title a {
    color: #1e293b;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
}

.favorites-product-title a:hover {
    color: var(--primaryColor, #2563eb);
}

/* Varyasyon Bilgisi */
.favorites-product-variant {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #f1f5f9;
    border-radius: 6px;
    font-size: 12px;
    color: #64748b;
    margin-bottom: 12px;
}

.favorites-product-variant i {
    font-size: 11px;
}

/* Stok Durumu */
.favorites-stock-status {
    margin-bottom: 12px;
}

.favorites-stock-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
}

.favorites-stock-badge.stock-available {
    background: #ecfdf5;
    color: #059669;
}

.favorites-stock-badge.stock-unavailable {
    background: #fef2f2;
    color: #dc2626;
}

.favorites-stock-badge i {
    font-size: 12px;
}

/* Fiyat Alanı */
.favorites-product-price {
    margin-bottom: 16px;
}

.favorites-price-wrapper {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}

.favorites-price-current {
    font-size: 20px;
    font-weight: 700;
    color: var(--primaryColor, #2563eb);
}

.favorites-price-normal {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
}

.favorites-price-original {
    font-size: 14px;
    color: #94a3b8;
    text-decoration: line-through;
}

.favorites-price-kdv {
    font-size: 11px;
    color: #64748b;
    padding: 2px 6px;
    background: #f1f5f9;
    border-radius: 4px;
}

.favorites-price-login {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #f8fafc;
    border-radius: 8px;
    font-size: 13px;
    color: #64748b;
}

.favorites-price-login i {
    color: var(--primaryColor, #2563eb);
}

/* Ürün Aksiyonları */
.favorites-product-actions {
    display: flex;
    gap: 10px;
}

.favorites-detail-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--primaryColor, #2563eb);
    color: #fff;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.favorites-detail-btn:hover {
    background: var(--primary-hover, #1d4ed8);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.favorites-detail-btn i {
    font-size: 16px;
}

/* Boş Durum */
.favorites-empty-state {
    text-align: center;
    padding: 80px 24px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.favorites-empty-icon {
    width: 120px;
    height: 120px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-radius: 50%;
}

.favorites-empty-icon i {
    font-size: 48px;
    color: #f87171;
}

.favorites-empty-state h3 {
    margin: 0 0 12px;
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
}

.favorites-empty-state p {
    margin: 0 0 28px;
    font-size: 15px;
    color: #64748b;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.favorites-empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    background: linear-gradient(135deg, var(--primaryColor, #2563eb) 0%, color-mix(in srgb, var(--primaryColor, #2563eb) 80%, #000) 100%);
    color: #fff;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
}

.favorites-empty-btn:hover {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 6px 25px rgba(37, 99, 235, 0.4);
}

.favorites-empty-btn i {
    font-size: 18px;
}

/* ========================================
   FAVORİLERİM RESPONSIVE STİLLER
   ======================================== */

@media (max-width: 991.98px) {
    .favorites-page-header {
        padding: 20px 24px;
    }

    .favorites-page-title {
        font-size: 20px;
    }

    .favorites-page-title i {
        font-size: 22px;
    }

    .favorites-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 20px;
    }
}

@media (max-width: 767.98px) {
    .favorites-page-header {
        padding: 16px 20px;
        border-radius: 12px;
        margin-bottom: 20px;
    }

    .favorites-page-header-left {
        flex-wrap: wrap;
        gap: 10px;
    }

    .favorites-page-title {
        font-size: 18px;
    }

    .favorites-page-title i {
        font-size: 20px;
    }

    .favorites-count-badge {
        padding: 5px 12px;
        font-size: 12px;
    }

    .favorites-shop-btn {
        padding: 10px 18px;
        font-size: 13px;
        border-radius: 8px;
    }

    .favorites-shop-btn span {
        display: none;
    }

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

    .favorites-product-card {
        border-radius: 12px;
    }

    .favorites-product-image img {
        padding: 12px;
    }

    .favorites-discount-badge {
        top: 8px;
        left: 8px;
        padding: 4px 8px;
        font-size: 11px;
        border-radius: 6px;
    }

    .favorites-remove-btn {
        top: 8px;
        right: 8px;
        width: 34px;
        height: 34px;
        font-size: 15px;
    }

    .favorites-out-of-stock {
        font-size: 12px;
    }

    .favorites-out-of-stock i {
        font-size: 24px;
    }

    .favorites-product-info {
        padding: 14px;
    }

    .favorites-product-title {
        font-size: 13px;
        margin-bottom: 6px;
    }

    .favorites-product-variant {
        font-size: 11px;
        padding: 3px 8px;
        margin-bottom: 8px;
    }

    .favorites-stock-status {
        margin-bottom: 8px;
    }

    .favorites-stock-badge {
        padding: 4px 8px;
        font-size: 11px;
    }

    .favorites-price-current,
    .favorites-price-normal {
        font-size: 16px;
    }

    .favorites-price-original {
        font-size: 12px;
    }

    .favorites-price-kdv {
        font-size: 10px;
    }

    .favorites-price-login {
        font-size: 11px;
        padding: 8px 10px;
    }

    .favorites-product-actions {
        gap: 8px;
    }

    .favorites-detail-btn {
        padding: 10px 12px;
        font-size: 12px;
        border-radius: 8px;
    }

    .favorites-detail-btn span {
        display: none;
    }

    .favorites-empty-state {
        padding: 60px 20px;
        border-radius: 16px;
    }

    .favorites-empty-icon {
        width: 100px;
        height: 100px;
        margin-bottom: 20px;
    }

    .favorites-empty-icon i {
        font-size: 40px;
    }

    .favorites-empty-state h3 {
        font-size: 20px;
    }

    .favorites-empty-state p {
        font-size: 14px;
        margin-bottom: 24px;
    }

    .favorites-empty-btn {
        padding: 12px 28px;
        font-size: 14px;
        border-radius: 10px;
    }
}

@media (max-width: 575.98px) {
    .favorites-page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .favorites-shop-btn {
        width: 100%;
        justify-content: center;
    }

    .favorites-shop-btn span {
        display: inline;
    }

    .favorites-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .favorites-product-card {
        display: flex;
        flex-direction: row;
    }

    .favorites-product-image {
        width: 120px;
        min-width: 120px;
        aspect-ratio: 1;
    }

    .favorites-product-image img {
        padding: 10px;
    }

    .favorites-product-info {
        flex: 1;
        padding: 14px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .favorites-product-title {
        font-size: 14px;
        -webkit-line-clamp: 2;
    }

    .favorites-stock-status {
        margin-bottom: 6px;
    }

    .favorites-product-price {
        margin-bottom: 10px;
    }

    .favorites-price-wrapper {
        gap: 6px;
    }

    .favorites-price-current,
    .favorites-price-normal {
        font-size: 15px;
    }

    .favorites-detail-btn {
        padding: 8px 12px;
    }

    .favorites-detail-btn span {
        display: inline;
    }
}


/* =====================================================
   CONTACT PAGE - MODERN RESPONSIVE DESIGN
   ===================================================== */

/* Page Container */
.contact-page {
    font-family: var(--site-font-family, 'Bai Jamjuree', sans-serif);
}

/* ===== MAP SECTION ===== */
.contact-map-wrapper {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    background: #f5f5f5;
}

.contact-map-wrapper iframe {
    width: 100%;
    height: 400px;
    border: none;
    display: block;
}

@media (max-width: 768px) {
    .contact-map-wrapper iframe {
        height: 300px;
    }
}

@media (max-width: 480px) {
    .contact-map-wrapper iframe {
        height: 250px;
    }
}

/* ===== CONTACT GRID ===== */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

@media (max-width: 991px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* ===== CARD STYLES ===== */
.contact-form-card,
.contact-info-card {
    background: #fff;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    border: 1px solid #f0f0f0;
}

@media (max-width: 576px) {

    .contact-form-card,
    .contact-info-card {
        padding: 24px 20px;
        border-radius: 12px;
    }
}

/* Card Header */
.contact-card-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
}

.contact-card-header .header-icon {
    width: 56px;
    height: 56px;
    min-width: 56px;
    background: var(--primaryColor-lighter, rgba(255, 0, 19, 0.08));
    color: var(--primaryColor, #FF0013);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.contact-card-header h4 {
    margin: 0 0 4px 0;
    font-size: 22px;
    font-weight: 600;
    color: #1a1a1a;
}

.contact-card-header .header-desc {
    margin: 0;
    font-size: 14px;
    color: #6d6d6d;
    line-height: 1.5;
}

@media (max-width: 576px) {
    .contact-card-header .header-icon {
        width: 48px;
        height: 48px;
        min-width: 48px;
        font-size: 18px;
        border-radius: 12px;
    }

    .contact-card-header h4 {
        font-size: 18px;
    }

    .contact-card-header .header-desc {
        font-size: 13px;
    }
}

/* ===== CONTACT FORM ===== */
.contact-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 576px) {
    .contact-form .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

.contact-form .form-group {
    margin-bottom: 20px;
}

.contact-form label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 8px;
}

.contact-form label i {
    color: var(--primaryColor, #FF0013);
    font-size: 14px;
    width: 16px;
}

.contact-form .form-control {
    width: 100%;
    padding: 14px 16px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-family: inherit !important;
    background: #fff !important;
    color: #333 !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
    outline: none !important;
}

.contact-form .form-control:focus {
    border-color: var(--primaryColor, #FF0013) !important;
    box-shadow: 0 0 0 3px var(--primaryColor-lighter, rgba(255, 0, 19, 0.1)) !important;
}

.contact-form .form-control::placeholder {
    color: #aaa;
}

.contact-form textarea.form-control {
    min-height: 140px !important;
    max-height: 200px !important;
    resize: vertical;
}

/* Submit Button */
.contact-form .btn-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 32px;
    background: var(--primaryColor, #FF0013);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
}

.contact-form .btn-submit:hover {
    background: var(--primary-hover, #e00011);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 0, 19, 0.25);
}

.contact-form .btn-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* Alert Messages */
.contact-form .alert-msg {
    display: none;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
}

.contact-form .alert-msg.success {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
}

.contact-form .alert-msg.error {
    background: #ffebee;
    color: #c62828;
    border: 1px solid #ffcdd2;
}

.contact-form .alert-msg i {
    margin-right: 8px;
}

/* ===== INFO ITEMS ===== */
.contact-info-card .info-items {
    margin-bottom: 28px;
}

.contact-info-card .info-item {
    display: flex;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid #f0f0f0;
}

.contact-info-card .info-item:last-child {
    border-bottom: none;
}

.contact-info-card .info-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    background: var(--primaryColor-lighter, rgba(255, 0, 19, 0.08));
    color: var(--primaryColor, #FF0013);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.contact-info-card .info-content h6 {
    margin: 0 0 6px 0;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
}

.contact-info-card .info-content p,
.contact-info-card .info-content a {
    margin: 0;
    font-size: 14px;
    color: #6d6d6d;
    line-height: 1.6;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-info-card .info-content a:hover {
    color: var(--primaryColor, #FF0013);
}

@media (max-width: 576px) {
    .contact-info-card .info-item {
        padding: 14px 0;
        gap: 12px;
    }

    .contact-info-card .info-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
        font-size: 16px;
        border-radius: 10px;
    }

    .contact-info-card .info-content h6 {
        font-size: 13px;
    }

    .contact-info-card .info-content p,
    .contact-info-card .info-content a {
        font-size: 13px;
    }
}

/* ===== SOCIAL SECTION ===== */
.contact-info-card .social-section {
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
}

.contact-info-card .social-section h6 {
    margin: 0 0 16px 0;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
}

.contact-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.contact-social-links li {
    margin: 0;
}

.contact-social-links a {
    width: 48px;
    height: 48px;
    background: var(--primaryColor-lighter, rgba(255, 0, 19, 0.08));
    color: var(--primaryColor, #FF0013);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all 0.3s ease;
}

.contact-social-links a:hover {
    background: var(--primaryColor, #FF0013);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(255, 0, 19, 0.25);
}

@media (max-width: 576px) {
    .contact-social-links a {
        width: 44px;
        height: 44px;
        font-size: 18px;
        border-radius: 10px;
    }

    .contact-social-links {
        gap: 10px;
    }
}

/* ===== FOOTER DYNAMIC COLORS ===== */

/* İkon renkleri dinamik */
.footer-icon-dynamic,
.footer-icon-dynamic i {
    color: var(--primaryColor) !important;
}

.footer-phone-dynamic {
    color: var(--primaryColor) !important;
}

/* Sosyal medya linkleri dinamik */
.footer-social-dynamic li a i {
    color: #fff !important;
    transition: all 0.3s ease;
}

.footer-social-dynamic li a:hover i {
    color: #fff !important;
}

/* PDF ikon rengi */
.footer-pdf-icon {
    color: #dc3545 !important;
}

/* ===== FOOTER GİRİŞ PROMPT KARTI ===== */
.footer-login-prompt {
    background: linear-gradient(135deg, var(--primaryColor-lighter) 0%, #fff 100%);
    border: 1px solid rgba(var(--primaryColor-rgb), 0.15);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.login-prompt-icon {
    width: 56px;
    height: 56px;
    background: var(--primaryColor);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin: 0 auto 12px;
}

.login-prompt-text {
    color: #555;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 16px;
}

.footer-login-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--primaryColor);
    color: #fff !important;
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-login-btn:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--primaryColor-rgb), 0.3);
}

.footer-register-link {
    display: block;
    margin-top: 12px;
    font-size: 12px;
    color: #777;
    text-decoration: none;
}

.footer-register-link span {
    color: var(--primaryColor);
    font-weight: 600;
}

.footer-register-link:hover span {
    text-decoration: underline;
}

/* Mobile optimization */
@media (max-width: 576px) {
    .footer-login-prompt {
        padding: 16px;
    }

    .login-prompt-icon {
        width: 48px;
        height: 48px;
        font-size: 18px;
    }
}

/* ===== STATIC PAGE (Ara Sayfalar) - MODERN DESIGN ===== */
.static-page {
    min-height: 60vh;
}

/* Kart yapısı */
.static-page-card {
    background: #fff;
    border-radius: 16px;
    padding: 40px 48px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* CKEditor içeriği için tipografi */
.static-page-content {
    font-family: var(--site-font-family, 'Bai Jamjuree', sans-serif);
    font-size: 15px;
    line-height: 1.8;
    color: #444;
}

.static-page-content h1,
.static-page-content h2,
.static-page-content h3,
.static-page-content h4,
.static-page-content h5,
.static-page-content h6 {
    color: #222;
    font-weight: 600;
    margin-top: 1.5em;
    margin-bottom: 0.75em;
}

.static-page-content h1:first-child,
.static-page-content h2:first-child,
.static-page-content h3:first-child {
    margin-top: 0;
}

.static-page-content h1 {
    font-size: 2em;
}

.static-page-content h2 {
    font-size: 1.6em;
}

.static-page-content h3 {
    font-size: 1.35em;
}

.static-page-content h4 {
    font-size: 1.15em;
}

.static-page-content p {
    margin-bottom: 1em;
}

.static-page-content ul,
.static-page-content ol {
    padding-left: 1.5em;
    margin-bottom: 1em;
}

.static-page-content li {
    margin-bottom: 0.5em;
}

.static-page-content a {
    color: var(--primaryColor);
    text-decoration: underline;
}

.static-page-content a:hover {
    color: var(--primary-hover);
}

.static-page-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1em 0;
}

.static-page-content blockquote {
    border-left: 4px solid var(--primaryColor);
    padding-left: 20px;
    margin: 1.5em 0;
    font-style: italic;
    color: #555;
}

.static-page-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
}

.static-page-content table th,
.static-page-content table td {
    border: 1px solid #e0e0e0;
    padding: 10px 12px;
    text-align: left;
}

.static-page-content table th {
    background: var(--primaryColor-lighter);
    font-weight: 600;
}

.static-page-content table tr:nth-child(even) {
    background: #fafafa;
}

/* Boş içerik */
.static-page-empty {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}

.static-page-empty i {
    font-size: 48px;
    margin-bottom: 16px;
    display: block;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .static-page-card {
        padding: 24px 20px;
        border-radius: 12px;
    }

    .static-page-content {
        font-size: 14px;
        line-height: 1.7;
    }

    .static-page-content h1 {
        font-size: 1.6em;
    }

    .static-page-content h2 {
        font-size: 1.4em;
    }

    .static-page-content h3 {
        font-size: 1.2em;
    }
}

@media (max-width: 480px) {
    .static-page-card {
        padding: 20px 16px;
    }
}

/* ===== CKEDITOR CONTENT RESET ===== */
/* Harici sitelerden yapıştırılan içeriklerdeki inline style'ları ezerek tutarlı görünüm sağlar */

/* Ürün açıklaması ve statik sayfalarda inline font-family ezilecek */
#nav-desc .light-gray *,
.static-page-content * {
    font-family: inherit !important;
}

/* Gereksiz div'lerin etkisini minimize et - sadece doğrudan çocuklar için */
#nav-desc .light-gray>div:not([class]),
.static-page-content>div:not([class]) {
    display: block;
    margin: 0;
    padding: 0;
}

/* Class'sız span'ların stillerini sıfırla */
#nav-desc .light-gray span:not([class]),
.static-page-content span:not([class]) {
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

/* İç içe div'ler için - layout bozulmasını önle */
#nav-desc .light-gray div div:not([class]),
.static-page-content div div:not([class]) {
    display: block;
    margin: 0;
    padding: 0;
}

/* Inline style ile gelen width/height override */
#nav-desc .light-gray p,
#nav-desc .light-gray div:not([class]),
.static-page-content p,
.static-page-content div:not([class]) {
    width: auto !important;
    max-width: 100% !important;
}

/* ===== AGGRESSIVE CONTENT ISOLATION ===== */
/* epey.com gibi harici sitelerden kopyalanan inline CSS'leri tamamen ezer */

/* Position ve Float reset - tum elementler */
#nav-desc .light-gray *,
.static-page-content *,
.product-description-text .light-gray * {
    float: none !important;
    clear: both !important;
    z-index: auto !important;
    transform: none !important;
}

/* position: static'i li DISINDA uygula.
   Madde imleri `ul li::before` / `ol li::before` ile ciziliyor ve li'nin
   position: relative'ine dayaniyor (bkz. .product-description-text .light-gray ul li).
   li static yapilinca imlerin hizalandigi kutu .light-gray oluyor ve butun
   madde imleri aciklamanin sol ust kosesine, ilk harfin uzerine yigiliyordu. */
#nav-desc .light-gray *:not(li),
.static-page-content *:not(li),
.product-description-text .light-gray *:not(li) {
    position: static !important;
}

/* li static degil relative olur: hem yapistirilan inline position kacislarini engeller
   hem de ::before madde imlerinin kendi satirina hizalanmasini garanti eder */
#nav-desc .light-gray li,
.static-page-content li,
.product-description-text .light-gray li {
    position: relative !important;
}

/* Sabit boyut degerlerini kaldir (img, iframe, video haric) */
#nav-desc .light-gray *:not(img):not(iframe):not(video):not(table):not(th):not(td),
.static-page-content *:not(img):not(iframe):not(video):not(table):not(th):not(td),
.product-description-text .light-gray *:not(img):not(iframe):not(video):not(table):not(th):not(td) {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
}

/* Tablo genisliklerini responsive yap */
#nav-desc .light-gray table,
.static-page-content table,
.product-description-text .light-gray table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
    border-collapse: collapse;
}

#nav-desc .light-gray th,
#nav-desc .light-gray td,
.static-page-content th,
.static-page-content td,
.product-description-text .light-gray th,
.product-description-text .light-gray td {
    width: auto !important;
    min-width: 0 !important;
    padding: 8px 12px !important;
    border: 1px solid #e0e0e0 !important;
    background: transparent !important;
}

/* img, iframe, video icin responsive davranis */
#nav-desc .light-gray img,
#nav-desc .light-gray iframe,
#nav-desc .light-gray video,
.static-page-content img,
.static-page-content iframe,
.static-page-content video,
.product-description-text .light-gray img,
.product-description-text .light-gray iframe,
.product-description-text .light-gray video {
    max-width: 100% !important;
    height: auto !important;
}

/* Margin asiri degerlerini sifirla */
#nav-desc .light-gray *,
.static-page-content *,
.product-description-text .light-gray * {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Background-image harici URL'leri engelle (img haric) */
#nav-desc .light-gray *:not(img),
.static-page-content *:not(img),
.product-description-text .light-gray *:not(img) {
    background-image: none !important;
    background: transparent !important;
}

/* Display degerlerini normalize et */
#nav-desc .light-gray div,
.static-page-content div,
.product-description-text .light-gray div {
    display: block !important;
}

#nav-desc .light-gray span,
.static-page-content span,
.product-description-text .light-gray span {
    display: inline !important;
}

#nav-desc .light-gray ul,
.static-page-content ul,
.product-description-text .light-gray ul {
    display: block !important;
}

/* Madde imi: statik sayfalarda tarayiciya birakilir, urun aciklamasinda ise
   ul li::before ile ciziliyor. Burada disc'i zorlamak cift madde imi olusturuyordu. */
.static-page-content ul {
    list-style: disc !important;
    padding-left: 20px !important;
}

#nav-desc .light-gray li,
.static-page-content li,
.product-description-text .light-gray li {
    display: list-item !important;
}

/* Visibility ve opacity garantisi */
#nav-desc .light-gray *,
.static-page-content *,
.product-description-text .light-gray * {
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    clip: auto !important;
}

/* Color inherit - harici renkleri ezme */
#nav-desc .light-gray *:not(a),
.static-page-content *:not(a),
.product-description-text .light-gray *:not(a) {
    color: inherit !important;
}

/* ================================== */
/* BARKOD TARAMA STILLERI - MODERN    */
/* ================================== */

/* Header Search Container - Flex duzeni */
.modern-header-search {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Masaustu - Barkod butonu (Arama butonu ile ayni stil) */
.barcode-scan-btn {
    background: var(--primaryColor, #FF0013);
    border: none;
    color: #fff;
    font-size: 16px;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.barcode-scan-btn:hover {
    background: var(--primary-hover, #cc0010);
    transform: scale(1.05);
}

.barcode-scan-btn:active {
    transform: scale(0.95);
}

/* Mobil - Barkod butonu */
.mobile-nav-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 15px;
}

.mobile-nav-search .search-form {
    flex: 1;
    position: relative;
}

.barcode-scan-btn-mobile {
    background: var(--primaryColor, #FF0013);
    border: none;
    color: #fff;
    font-size: 18px;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.barcode-scan-btn-mobile:hover {
    background: var(--primary-hover, #cc0010);
    transform: scale(1.05);
}

/* ================================== */
/* BARKOD MODAL - MODERN TASARIM      */
/* ================================== */

.barcode-modal-dialog {
    max-width: 420px;
    margin: 15px auto;
}

.barcode-modal-content {
    border: none;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Modal Header */
.barcode-modal-header {
    background: var(--primaryColor, #FF0013);
    color: #fff;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.barcode-modal-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 600;
}

.barcode-modal-title i {
    font-size: 22px;
}

.barcode-modal-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 16px;
}

.barcode-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

/* Modal Body - Kamera Alani */
.barcode-modal-body {
    background: #1a1a2e;
    min-height: 300px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Barkod Okuyucu */
.barcode-reader-container {
    width: 100%;
    height: 100%;
}

#barcode-reader {
    width: 100% !important;
    border: none !important;
}

#barcode-reader video {
    width: 100% !important;
    object-fit: cover;
}

#barcode-reader__scan_region {
    background: transparent !important;
    border: none !important;
}

#barcode-reader__dashboard_section,
#barcode-reader__dashboard_section_swaplink,
#barcode-reader__header_message {
    display: none !important;
}

/* Yukleniyor Animasyonu */
.barcode-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    z-index: 10;
}

.barcode-loading-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--primaryColor, #FF0013);
    border-radius: 50%;
    animation: barcode-spin 1s linear infinite;
    margin: 0 auto 15px;
}

@keyframes barcode-spin {
    to {
        transform: rotate(360deg);
    }
}

.barcode-loading p {
    font-size: 14px;
    opacity: 0.8;
    margin: 0;
}

/* Hata Durumu */
.barcode-error {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    padding: 20px;
    z-index: 10;
}

.barcode-error-icon {
    width: 70px;
    height: 70px;
    background: rgba(255, 193, 7, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
}

.barcode-error-icon i {
    font-size: 32px;
    color: #ffc107;
}

.barcode-error-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px;
    color: #fff;
}

.barcode-error-text {
    font-size: 13px;
    opacity: 0.7;
    margin: 0;
    color: #fff;
}

/* Modal Footer */
.barcode-modal-footer {
    background: #fff;
    padding: 16px 20px;
    text-align: center;
    border-top: 1px solid #eee;
}

.barcode-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    color: #666;
    margin: 0;
}

.barcode-hint i {
    color: var(--primaryColor, #FF0013);
}

/* Basarili Sonuc */
.barcode-result {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    padding: 12px 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
    font-weight: 500;
}

.barcode-result i {
    font-size: 18px;
}

/* Responsive */
@media (max-width: 576px) {
    .barcode-modal-dialog {
        margin: 10px;
        max-width: calc(100% - 20px);
    }

    .barcode-modal-body {
        min-height: 280px;
    }

    .barcode-modal-title {
        font-size: 16px;
    }

    .barcode-modal-title i {
        font-size: 20px;
    }
}

/* ============================================
   MOBILE ACCOUNT SIDEBAR FIX
   ============================================ */

/* Reset excessive padding on mobile */
@media (max-width: 991px) {
    #mobileSidebar {
        padding-right: 0 !important;
        padding-left: 0 !important;
        width: 100%;
    }

    #mobileSidebar.active {
        display: block;
        margin-bottom: 20px;
    }
}

@media (max-width: 767px) {
    #mobileSidebar {
        padding: 0 !important;
        margin-bottom: 16px;
    }

    .account-sidebar {
        border-radius: 12px;
        margin: 0;
    }

    .account-sidebar-header {
        padding: 18px 16px;
    }

    .account-sidebar-greeting {
        font-size: 12px;
    }

    .account-sidebar-name {
        font-size: 16px;
    }

    .account-sidebar-menu .list-group-item a {
        padding: 12px 16px;
        font-size: 13px;
    }

    .account-sidebar-menu .list-group-item a i {
        font-size: 14px;
        width: 20px;
        margin-right: 10px;
    }
}

@media (max-width: 480px) {
    .account-sidebar {
        border-radius: 10px;
    }

    .account-sidebar-header {
        padding: 16px 14px;
    }

    .account-sidebar-name {
        font-size: 15px;
    }

    .account-sidebar-menu .list-group-item a {
        padding: 11px 14px;
        font-size: 12.5px;
    }

    .account-mobile-toggle {
        padding: 12px 16px;
        font-size: 13px;
    }
}

/* ===========================================
   ANASAYFA VITRINI - KUTU STANDARDIZASYONU
   =========================================== */

/* 1. VITRIN SLIDER - Kart genisligi */
.vitrin-slider-content .featured-product-card {
    flex: 0 0 350px;
    width: 350px;
    min-width: 350px;
    max-width: 350px;
}

/* 2. GORSEL ALANI - Sabit aspect-ratio */
.vitrin-slider-content .featured-product-card .product-image-gallery,
.vitrin-slider-content .featured-product-card .image-box {
    height: auto !important;
    aspect-ratio: 4 / 3;
}

/* Benzer ürünler: a tag container'ı doldursun */
.vitrin-slider-content .product-image-container>a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* 3. BASLIK ALANI - Minimum yukseklik (2-3 satir icin) */
.vitrin-slider-content .featured-product-card .product-title,
.vitrin-slider-content .featured-product-card h6.product-title {
    min-height: 56px;
    line-height: 1.4;
}

/* 4. URUN BILGI ALANI - Flexbox ile fiyat/buton alta sabitle */
.vitrin-slider-content .featured-product-card .product-desc {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Buton alta sabitlensin */
.vitrin-slider-content .featured-product-card .product-desc>button:last-child,
.vitrin-slider-content .featured-product-card .product-desc>.cus-btn-2:last-of-type,
.vitrin-slider-content .featured-product-card .product-desc>a.cus-btn-2:last-of-type {
    margin-top: auto;
}

/* 5. MOBIL UYUMLULUK */
@media (max-width: 992px) {
    .vitrin-slider-content .featured-product-card {
        flex: 0 0 280px;
        width: 280px;
        min-width: 280px;
        max-width: 280px;
    }
}

@media (max-width: 576px) {
    .vitrin-slider-content .featured-product-card {
        flex: 0 0 240px;
        width: 240px;
        min-width: 240px;
        max-width: 240px;
    }

    .vitrin-slider-content .featured-product-card .product-title,
    .vitrin-slider-content .featured-product-card h6.product-title {
        min-height: 48px;
        font-size: 0.9rem;
    }
}

/* ===========================================
   BENZER URUNLER - KUTU STANDARDIZASYONU
   (ProductDetail sayfasi)
   =========================================== */

/* 1. GORSEL ALANI - Sabit aspect-ratio */
#vitrin-slider-benzer .featured-product-card .image-box,
#vitrin-slider-benzer .featured-product-card .product-image-container {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f7f8fb;
    border-radius: 8px;
}

/* 2. Gorsel icin object-fit */
#vitrin-slider-benzer .featured-product-card .image-box img,
#vitrin-slider-benzer .featured-product-card .product-image-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-height: 100%;
}

/* 3. URUN BILGI ALANI - Flexbox ile fiyat alta sabitle */
#vitrin-slider-benzer .featured-product-card .product-info {
    display: flex;
    flex-direction: column;
    flex: 1;
}

#vitrin-slider-benzer .featured-product-card .product-info .product-price {
    margin-top: auto;
}

/* ============================================
   Ücretli Kargo Badge & Banner
   ============================================ */

/* Ücretli Kargo Badge - Ürün kartı */
.paid-shipping {
    background: #dc3545;
    color: #fff;
    font-size: 13px;
    font-family: tahoma;
    margin: 5px;
    padding: 2px 8px;
    border-radius: 3px;
    display: inline-block;
}

/* Ücretli Kargo Banner - Ürün detay */
.paid-shipping-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #fff5f5 0%, #ffe0e0 100%);
    border: 1px solid #dc3545;
    border-radius: 12px;
    margin-top: 10px;
}

/* ===== HEADER ACTIONS GRUPLANDIRMA ===== */
/* Sol ve Sağ grup için flex düzeni */
.modern-header-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-shrink: 0;
}

.header-actions-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.header-actions-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ===== LABELED ACTION BUTTONS (İkon + Text) ===== */
.header-action-btn-labeled {
    width: auto !important;
    padding: 8px 14px !important;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.header-action-btn-labeled i {
    font-size: 16px;
}

.header-action-btn-labeled span {
    font-size: 13px;
    font-weight: 500;
}

/* Dropdown toggle için ok işareti gizle */
.header-action-btn-labeled.dropdown-toggle::after {
    display: none;
}

/* Tablet (991px ve altı) */
@media (max-width: 991px) {
    .modern-header-actions {
        justify-content: center;
        gap: 10px;
    }

    .header-actions-left,
    .header-actions-right {
        gap: 6px;
    }

    /* Labeled butonlarda text'i gizle, sadece ikon göster */
    .header-action-btn-labeled {
        width: 42px !important;
        height: 42px;
        padding: 0 !important;
        justify-content: center;
    }

    .header-action-btn-labeled span {
        display: none;
    }

    .header-action-btn-labeled i {
        font-size: 16px;
    }
}

/* Mobile (767px ve altı) */
@media (max-width: 767px) {
    .modern-header-actions {
        gap: 8px;
    }

    .header-actions-left,
    .header-actions-right {
        gap: 4px;
    }

    .header-action-btn-labeled {
        width: 40px !important;
        height: 40px;
    }

    .header-action-btn-labeled i {
        font-size: 15px;
    }
}

/* Küçük Mobil (480px ve altı) */
@media (max-width: 480px) {
    .modern-header-actions {
        gap: 6px;
    }

    .header-actions-left,
    .header-actions-right {
        gap: 3px;
    }

    .header-action-btn-labeled {
        width: 36px !important;
        height: 36px;
    }

    .header-action-btn-labeled i {
        font-size: 14px;
    }
}

/* ===========================================
   VİTRİN KARTLARI - EŞİT YÜKSEKLİK DÜZELTMESİ
   =========================================== */

/* Vitrin slider - kartları aynı yüksekliğe zorla */
.vitrin-slider-content {
    align-items: stretch !important;
}

/* Kart - tam yükseklik ve flexbox */
.vitrin-slider-content .featured-product-card {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 100% !important;
}

/* Resim alanı - sabit yükseklik */
.vitrin-slider-content .featured-product-card .image-box {
    flex-shrink: 0;
}

/* Benzer ürünler / Vitrin - product-image-wrapper düzeltmesi */
.vitrin-slider-content .product-image-wrapper,
.product-image-container .product-image-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vitrin-slider-content .product-image-wrapper img,
.product-image-container .product-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    -webkit-object-fit: contain;
    object-position: center;
    -webkit-object-position: center;
}

/* Ürün açıklama alanı - esnek, boşluğu doldur */
.vitrin-slider-content .featured-product-card .product-desc {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0;
}

/* Ürün başlığı - sabit yükseklik */
.vitrin-slider-content .featured-product-card .product-title {
    min-height: 44px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-shrink: 0;
}

/* Fiyat alanı - orta bölge */
.vitrin-slider-content .featured-product-card .rating-star {
    min-height: 72px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0;
}

/* Input ve buton container - en alta sabitle */
.vitrin-slider-content .featured-product-card .product-desc>input[type="number"],
.vitrin-slider-content .featured-product-card .product-desc>button,
.vitrin-slider-content .featured-product-card .product-desc>a.cus-btn-2 {
    flex-shrink: 0;
}


/* ================================== */
/* MOBİL SAFE AREA - iOS/Android      */
/* ================================== */
/* iOS notch/dynamic island ve Android için üst boşluk */
@media (max-width: 991px) {
    .modern-header {
        padding-top: calc(env(safe-area-inset-top, 0px) + 25px);
    }
}

/* ================================== */
/* GENİŞ EKRAN HEADER NAVIGATION      */
/* SIKIŞTIRMA (1500px+ viewport)      */
/* ================================== */
/* 1500px üstü viewport'larda body sınırlandığında (1400 veya 1600) menü
   container 1400px max-width'te kalır — 9 menü item (8 + Diğer) bu container'a
   default padding ile sığmaz. Padding/font düşürülerek hem 1600 (müşteri) hem
   1920 (geliştirici) ekranında "Diğer" görünür olur. Default kuralı (specificity
   0,1,2) bu kural parent ile (0,2,2) + dosya sonu source order ile kazanır. */
@media (min-width: 1500px) {
    .modern-nav-container .classic-nav-menu>li>a {
        padding: 12px 9px;
        font-size: 12px;
    }

    /* Tip-2 (.img-grid-nav-link) ve Tip-3 (.hier-mega-link) override'ları KALDIRILDI: geniş ekran
       sıkıştırma görevi artık auto-fit script'lerinde (_header.cshtml Tip-2/Tip-3 dalları). Buradaki
       kurallar kalsaydı specificity (0,2,0) ile base'teki --imggrid-fit-* / --hier-fit-* zincirlerini
       ezerlerdi. Tip-0 kuralı yukarıda aynen durur. */
}

/* ============================================================
   TİP 3: HİYERARŞİK MEGA MENÜ STİLLERİ (3 KATMAN)
   Ana Menü → Alt Başlık → Alt-Alt Liste yapısı (StarAkım benzeri)
   ============================================================ */
/* Tip-3 nav çubuğu arka planı — parametrik (yalnız modern-header-nav--hier'de; global nav'a dokunmaz) */
.modern-header-nav--hier {
    background: var(--hier-nav-bg, var(--header-secondary));
}

/* Tip-3 üst çubuk düzeni — global .modern-nav-container'dan (paylaşımlı, 4 tip) BAĞIMSIZ, tam parametrik.
   Specificity 0,2,0 > global 0,1,0 → garantili kazanır. display:flex KORUNUR (align-items:center dikey
   ortalama + .hier-mega-nav flex:1 tuvali için). Genişlik/padding parametrik; null config → fallback = bugünkü
   literal (1400px / 0 20px) → piksel-piksel aynı. Global kurala DOKUNULMAZ → Tip 0/1/2 etkilenmez. */
.modern-header-nav--hier .modern-nav-container {
    display: flex;
    align-items: center;
    /* Menü bloğunu konumlar (Sola/Ortala/Sağa). ul içerik-genişliğinde (flex-grow:0) olunca gerçekten etkir. */
    justify-content: var(--hier-nav-align, flex-start);
    margin: 0 auto;
    max-width: var(--hier-nav-maxw, 1400px);
    padding: var(--hier-nav-padding, 0 20px);
}

.hier-mega-nav {
    display: flex;
    align-items: center;
    /* Taşarsa 2. satıra sar — kırpma yok, hepsi görünür (clamp yetmezse son çare güvenlik ağı) */
    flex-wrap: wrap;
    /* Öğe dağıtımı (wrap satırları + "Yay"da space-between). Blok konumu container'da yapılır. */
    justify-content: var(--hier-nav-justify, flex-start);
    list-style: none;
    margin: 0;
    padding: 0;
    /* Yatayda öğe padding'i ayırır; row-gap yalnız SARdığında satır arası (tek satırda etkisiz) */
    column-gap: 0;
    row-gap: 4px;
    /* grow: start/center/end=0 (içerik-genişliği → container ortalar); between=1 (dolar → space-between yayar).
       Fallback 1 1 auto = eski flex:1 (tek çocuk için aynı) → kaydetmemiş tenant piksel-piksel aynı. */
    flex: var(--hier-nav-grow, 1) 1 auto;
}

.hier-mega-item {
    position: static;
    /* Dropdown nav'a göre full-width açılsın */
}

.hier-mega-link {
    display: flex;
    align-items: center;
    gap: 6px;
    /* --hier-fit-* yalnız auto-fit script'i set eder (menü tek satıra sığmıyorsa görünmez adımlarla
       kısar); yokken = admin/tema değeri. Geniş ekranda font/boşluk admin ne dediyse O. */
    padding: var(--hier-fit-pad, var(--hier-link-padding, 12px 14px));
    color: var(--hier-link-color, #fff);
    font-size: var(--hier-fit-font, var(--nav-font-size, 13px));
    font-weight: var(--hier-link-weight, 500);
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.hier-mega-link:hover,
.hier-mega-link:focus-visible {
    color: var(--hier-link-hover, var(--header-accent));
    background: var(--hier-link-hover-bg, var(--header-hover));
}

/* Aktif (bulunulan) kategori vurgusu */
.hier-mega-link[aria-current] {
    color: var(--hier-link-hover, var(--header-accent));
    box-shadow: inset 0 -2px 0 0 var(--hier-link-hover, var(--header-accent));
}

.hier-mega-link i {
    font-size: 9px;
    transition: transform 0.2s ease;
}

.hier-mega-item.has-children:hover .hier-mega-link i {
    transform: rotate(180deg);
}

/* Geniş, viewport tabanlı dropdown — body merkezleme ile uyumlu */
.hier-mega-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--hier-panel-bg, #fff);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
    border-radius: 0 0 12px 12px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.25s ease;
    transition-delay: 0ms;
    /* kapanış anında */
    z-index: 1000;
}

.hier-mega-item.has-children:hover .hier-mega-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    /* hover-intent: açılış gecikmeli → çapraz fare geçişinde titreme olmaz. 0 = anında. */
    transition-delay: var(--hier-open-delay, 120ms);
}

.hier-mega-container {
    max-width: var(--hier-panel-maxw, 1400px);
    margin: 0 auto;
    padding: var(--hier-panel-padding, 28px 24px);
    /* Çok geniş kategorilerde panel ekranı taşırmasın — içeride kaydır */
    max-height: min(70vh, 640px);
    overflow-y: auto;
}

.hier-mega-grid {
    /* Masonry akış: gruplar kolonlara yukarıdan-aşağı akar, kısa gruplar tek kolonda paketlenir,
       yükseklik dengelenir (StarAkım benzeri). Grid'in eşit-hücre ragged boşluğu biter. */
    columns: var(--hier-cols, 4);
    column-gap: var(--hier-col-gap, 40px);
}

.hier-mega-column {
    /* Her grup kolon içinde bölünmeden paketlensin */
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: var(--hier-row-gap, 22px);
    width: 100%;
    min-width: 0;
}

/* Alt kategorisi olmayan L2 → sade normal link (kalın turuncu başlık DEĞİL) */
.hier-mega-standalone-link {
    display: block;
    padding: var(--hier-item-padding, 5px 0);
    color: var(--hier-item-color, #444);
    font-weight: 400;
    font-size: var(--dropdown-font-size, 13px);
    text-decoration: none;
    transition: all 0.15s ease;
}

.hier-mega-standalone-link:hover {
    color: var(--hier-item-hover, var(--header-accent, #FF0013));
    padding-left: 6px;
}

/* Dar masaüstünde kolon sayısını 3 ile sınırla (admin değeri daha büyükse). Panel <992px zaten gizli. */
@media (max-width: 1200px) {
    .hier-mega-grid {
        columns: min(var(--hier-cols, 4), 3);
    }
}

.hier-mega-col-title {
    display: block;
    font-size: var(--hier-title-size, 15px);
    font-weight: var(--hier-title-weight, 600);
    color: var(--hier-title-color, var(--header-accent, #FF0013));
    text-decoration: none;
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--hier-border-color, #eee);
    transition: color 0.2s ease;
}

.hier-mega-col-title:hover {
    color: var(--hier-title-color, var(--header-accent, #FF0013));
    opacity: 0.8;
}

.hier-mega-sublist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hier-mega-sublist li a {
    display: block;
    padding: var(--hier-item-padding, 5px 0);
    color: var(--hier-item-color, #444);
    font-size: var(--dropdown-font-size, 13px);
    text-decoration: none;
    transition: all 0.15s ease;
}

.hier-mega-sublist li a:hover {
    color: var(--hier-item-hover, var(--header-accent, #FF0013));
    padding-left: 6px;
}

.hier-mega-sublist li a.view-all {
    color: var(--hier-item-hover, var(--header-accent, #FF0013));
    font-weight: 600;
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--hier-border-color, #f0f0f0);
}

/* 1500-1799 ve 1800+ breakpoint'lerinde body 1400/1600 max-width sınırlı,
   dropdown container max-width: 1400px ile zaten uyumlu — taşma olmaz. */
@media (max-width: 991.98px) {

    /* Mobilde hier-mega-nav gizlenir; mobile drawer (_MenuRecursive) zaten 3 katman recursive. */
    .hier-mega-nav {
        display: none;
    }
}

/* ============================================================
   MENÜ-ALTI MARKA ŞERİDİ (Brand Strip / Instagram-story tarzı)
   İzole blok — yalnız _SiteBrandStrip.cshtml render edilince görünür.
   Tüm ölçüler parametrik CSS var'larından gelir (BaseController inline basar);
   var yoksa fallback = makul varsayılan. Diğer menü tipleri/modülleri etkilemez.
   ============================================================ */
.site-brand-strip {
    width: 100%;
    background: var(--bs-bg, transparent);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* Konum=belowHero: hero banner altında serbest şerit — header'a yapışık çizgi görünümü yok */
.site-brand-strip.sbs-below-hero {
    margin: 8px 0 4px;
    border-bottom: 0;
}

.site-brand-strip .sbs-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.site-brand-strip .sbs-track {
    display: flex;
    align-items: flex-start;
    gap: var(--bs-gap, 20px);
    overflow-x: auto;
    scroll-behavior: smooth;
    flex: 1;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
}

.site-brand-strip .sbs-track::-webkit-scrollbar {
    display: none;
}

.site-brand-strip .sbs-item {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: calc(var(--bs-size, 64px) + 24px);
    text-decoration: none;
    color: inherit;
    padding: 5px;
}

.site-brand-strip .sbs-avatar {
    width: var(--bs-size, 64px);
    height: var(--bs-size, 64px);
    border-radius: var(--bs-radius, 50%);
    border: var(--bs-ring-w, 2px) solid var(--bs-ring, var(--header-accent, #FF0013));
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 6px;
    box-sizing: border-box;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    /* hafif spring easing — hover'da canlı büyüme hissi */
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease;
}

/* Konik gradyan halka (Instagram-story hissi): düz border yerine ring renginden türeyen
   gradyan; RingWidth=0 iken border 0 → halka yine görünmez. Desteklemeyen tarayıcı
   yukarıdaki düz border fallback'inde kalır. */
@supports (background: conic-gradient(red, blue)) and (color: color-mix(in srgb, red 50%, #fff)) {
    .site-brand-strip .sbs-avatar {
        border-color: transparent;
        background:
            linear-gradient(#fff, #fff) padding-box,
            conic-gradient(from 210deg,
                var(--bs-ring, var(--header-accent, #FF0013)),
                color-mix(in srgb, var(--bs-ring, var(--header-accent, #FF0013)) 45%, #fff),
                var(--bs-ring, var(--header-accent, #FF0013))) border-box;
    }
}

.site-brand-strip .sbs-item:hover .sbs-avatar {
    transform: translateY(-3px) scale(1.08);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

/* Hover glow ring renginden türesin (destekleyen tarayıcıda üstteki gri gölgeyi ezer) */
@supports (color: color-mix(in srgb, red 50%, transparent)) {
    .site-brand-strip .sbs-item:hover .sbs-avatar {
        box-shadow: 0 6px 18px color-mix(in srgb, var(--bs-ring, var(--header-accent, #FF0013)) 35%, transparent);
    }
}

.site-brand-strip .sbs-avatar img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.site-brand-strip .sbs-name {
    font-size: var(--bs-name-size, 12px);
    color: var(--bs-name-color, inherit);
    text-align: center;
    line-height: 1.2;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.18s ease;
}

/* İsim hover'da renklenir; tenant NameColor set ettiyse o öncelikli kalır (kontrast bozulmaz) */
.site-brand-strip .sbs-item:hover .sbs-name {
    color: var(--bs-name-color, var(--bs-ring, var(--header-accent, #FF0013)));
    font-weight: 600;
}

.site-brand-strip .sbs-nav {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: #fff;
    color: #333;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: background 0.15s ease, color 0.15s ease;
}

.site-brand-strip .sbs-nav:hover {
    background: var(--header-accent, #FF0013);
    color: #fff;
    border-color: var(--header-accent, #FF0013);
}

/* Ok butonları yalnız taşma varsa (JS sbs-has-overflow ekler) ve masaüstünde görünür */
.site-brand-strip.sbs-has-overflow .sbs-nav {
    display: flex;
}

@media (max-width: 991.98px) {

    /* Mobilde oklar gizli — parmakla kaydırma; şerit biraz daha sıkışık */
    .site-brand-strip.sbs-has-overflow .sbs-nav {
        display: none;
    }

    .site-brand-strip .sbs-inner {
        padding: 10px 12px;
    }
}

/* ============================================================
   SATIR BAŞINA ÜRÜN SAYISI (parametrik) — hem klasik hem modern grid.
   Row'a .pg-cols + --pg-cols (BaseController/Index/_ProductList basar). YALNIZ ≥1200px'te
   ürün kolonlarını (.pg-prod-col) calc(100%/N)'e çeker; alt breakpoint'lerde Bootstrap
   col-lg/md + mobil sınıfları korunur. Banner kolonlarına dokunmaz (marker yok).
   ============================================================ */
@media (min-width: 1200px) {
    .pg-cols>.pg-prod-col {
        flex: 0 0 calc(100% / var(--pg-cols, 4));
        max-width: calc(100% / var(--pg-cols, 4));
    }
}

/* ============================================================
   MODERN - STARAKIM ÜRÜN KARTI (temiz markup — _Card_starakim.cshtml)
   YALNIZ yeni .pc-card--starakim'e uygulanır; mevcut .featured-product-card'a HİÇ DOKUNMAZ.
   Accent/köşe/badge parametrik (--pg-accent / --pg-radius / --pg-badge-radius — body'den miras).
   ============================================================ */
.pc-card--starakim {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: var(--pg-radius, 18px);
    padding: 12px;
    box-shadow: 0 2px 10px rgba(20, 22, 45, .07);
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}

.pc-card--starakim:hover {
    box-shadow: 0 16px 38px rgba(20, 22, 45, .12);
    transform: translateY(-5px);
}

/* Görsel — 4:3 (kareden daha kısa → kart küçük/kompakt) */
.pc-card--starakim .pc-media {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 10px;
}

.pc-card--starakim .pc-media-link {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    padding: 8px;
    background: #fff;
}

.pc-card--starakim .pc-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform .3s ease;
}

.pc-card--starakim:hover .pc-img {
    transform: scale(1.04);
}

/* Badge'ler */
.pc-card--starakim .pc-badge {
    position: absolute;
    top: 10px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--pg-badge-radius, 50%);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    z-index: 2;
}

.pc-card--starakim .pc-badge--new {
    left: 10px;
    background: #fff;
    color: var(--pg-accent, var(--header-accent, #FF0013));
    border: 1.5px solid var(--pg-accent, var(--header-accent, #FF0013));
    font-size: 11px;
    font-weight: 600;
}

.pc-card--starakim .pc-badge--disc {
    right: 10px;
    background: var(--pg-accent, var(--header-accent, #FF0013));
    color: #fff;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .14);
}

/* Ürün detay kampanya rozeti — koyu mor zemin, beyaz yazı (kontrast kuralı). */
.product-detail-discount-badge.pd-campaign-badge {
    background: #7c3aed;
    color: #fff;
    border-color: #7c3aed;
}

/* Kampanya rozeti — indirim rozetinin altında, geniş pill. Koyu zeminde beyaz yazı (kontrast kuralı). */
.pc-card--starakim .pc-badge--campaign {
    right: 10px;
    top: 58px;
    width: auto;
    height: auto;
    padding: 5px 10px;
    border-radius: 6px;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    background: #7c3aed;
    color: #fff;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .14);
}

.pc-card--starakim .pc-oos {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: rgba(20, 22, 45, .78);
    color: #fff;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    z-index: 3;
}

/* Favori */
.pc-card--starakim .pc-fav {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #eef0f3;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
    color: #a7adb5;
    cursor: pointer;
    z-index: 2;
    transition: color .15s ease, transform .15s ease;
}

.pc-card--starakim .pc-fav:hover {
    transform: scale(1.1);
}

.pc-card--starakim .pc-fav.is-active {
    color: var(--pg-accent, var(--header-accent, #FF0013));
}

/* Gövde */
.pc-card--starakim .pc-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.pc-card--starakim .pc-brand {
    font-size: .78rem;
    color: #9aa0a6;
    font-weight: 500;
    margin-bottom: 2px;
}

/* Stok kodu satırı — markadan ayrı, biraz daha koyu/kalın ki kod gibi okunsun */
.pc-card--starakim .pc-code {
    font-size: .78rem;
    color: #5f6368;
    font-weight: 600;
    letter-spacing: .01em;
    margin-bottom: 4px;
}

.pc-card--starakim .pc-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #2b2f36;
    font-size: .88rem;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
    margin-bottom: 8px;
    min-height: 2.3em;
}

.pc-card--starakim .pc-name:hover {
    color: var(--pg-accent, var(--header-accent, #FF0013));
}

/* Bayi/Cari indirim chip'leri — açık accent-ton zemin + koyu yazı (kontrast kuralı, accent rengi ne olursa olsun okunur) */
.pc-card--starakim .pc-discounts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: -2px 0 8px;
}

.pc-card--starakim .pc-disc {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    background: #f4f5f7;
    color: #3c4046;
    background: color-mix(in srgb, var(--pg-accent, var(--header-accent, #FF0013)) 10%, #fff);
    color: color-mix(in srgb, var(--pg-accent, var(--header-accent, #FF0013)) 80%, #000);
    border: 1px solid color-mix(in srgb, var(--pg-accent, var(--header-accent, #FF0013)) 22%, #fff);
}

/* Ücretli Kargo chip'i — açık amber zemin + koyu yazı (kontrast kuralı) */
.pc-card--starakim .pc-ship {
    background: #fff7e6;
    color: #92600a;
    border: 1px solid #f5dfb0;
}

/* Stok satırı — klasik grid paritesi ("Stok Sayısı: X" / "Stokta Var" / birimli). Etiket soluk, değer koyu. */
.pc-card--starakim .pc-stock {
    font-size: .78rem;
    color: #8b9096;
    margin-bottom: 4px;
}

.pc-card--starakim .pc-stock b {
    color: #2b2f36;
    font-weight: 600;
}

.pc-card--starakim .pc-stock-sub {
    font-size: .72rem;
    color: #9aa0a6;
    margin: -2px 0 4px;
}

/* Çoklu resim galerisi — global .product-gallery-img/.gallery-dot stilleri + app.js reuse.
   pc-media-link'in 8px iç boşluğuna uysun ve .pc-img'in transform-only transition'ı opacity fade'i ezmesin. */
.pc-card--starakim .pc-media .product-gallery-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 8px;
    object-fit: contain;
    transition: opacity .3s ease, transform .3s ease;
}

.pc-card--starakim .pc-gallery-dots {
    bottom: 8px;
    background: rgba(20, 22, 45, .35);
    backdrop-filter: blur(4px);
}

.pc-card--starakim .gallery-dot.active {
    background: var(--pg-accent, var(--header-accent, #FF0013));
}

/* Tükendi kart resmi hafif grileşir (klasik parite) */
.pc-card--starakim.is-oos .pc-img {
    filter: grayscale(40%) opacity(.85);
}

/* Özel badge'ler (B2B_UrunBadge) — sol üst (Yeni varsa altına kayar) + sol alt */
.pc-card--starakim .pc-badge-custom {
    position: absolute;
    left: 10px;
    z-index: 2;
    max-width: 70%;
}

.pc-card--starakim .pc-badge-custom--top {
    top: 10px;
}

.pc-card--starakim .pc-badge--new~.pc-badge-custom--top {
    top: 58px;
}

.pc-card--starakim .pc-badge-custom--bottom {
    bottom: 10px;
}

.pc-card--starakim .pc-badge-custom .product-badge-image {
    max-width: 64px;
    max-height: 32px;
    object-fit: contain;
    display: block;
}

.pc-card--starakim .pc-badge-custom .product-badge-custom {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
}

/* Alt satır: fiyat solda + aksiyon sağda */
.pc-card--starakim .pc-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    row-gap: 8px;
    margin-top: auto;
}

.pc-card--starakim .pc-price {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pc-card--starakim .pc-old {
    font-size: 12px;
    font-weight: 500;
    color: #b3b8bf;
    text-decoration: line-through;
}

.pc-card--starakim .pc-new {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--pg-accent, var(--header-accent, #FF0013));
    white-space: nowrap;
}

.pc-card--starakim .pc-contact {
    font-size: 12px;
    color: #9aa0a6;
}

/* Aksiyon butonu (yuvarlak) */
.pc-card--starakim .pc-cart {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--pg-accent, var(--header-accent, #FF0013));
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .16);
    transition: transform .15s ease, box-shadow .15s ease;
}

.pc-card--starakim .pc-cart:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .22);
}

/* "Sepete Ekle" (metinsiz button.pc-cart) → sepet SVG ikonu */
.pc-card--starakim button.pc-cart:not(.pc-cart--notify)::before {
    content: "";
    width: 20px;
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.pc-card--starakim .pc-cart i {
    font-size: 16px;
}

/* Miktar stepper — sepet butonunun soluna hizalı [− 1 +] pill (fiyat solda, sağda pill+ikon) */
.pc-card--starakim .pc-qty {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.pc-card--starakim .pc-qty-stepper {
    display: inline-flex;
    align-items: center;
    height: 42px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

.pc-card--starakim .pc-qty-btn {
    flex: 0 0 auto;
    width: 26px;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #4b5563;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition: background .12s ease;
}

.pc-card--starakim .pc-qty-btn:hover {
    background: #f3f4f6;
    color: #111827;
}

.pc-card--starakim .pc-qty-input {
    width: 36px;
    height: 100%;
    padding: 0 2px;
    border: none;
    border-left: 1px solid #eef0f2;
    border-right: 1px solid #eef0f2;
    border-radius: 0;
    background: #fff;
    color: #1f2937;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}

.pc-card--starakim .pc-qty-input:focus {
    outline: none;
}

/* Native number spinner'larını gizle (Chrome/Safari) */
.pc-card--starakim .pc-qty-input::-webkit-outer-spin-button,
.pc-card--starakim .pc-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Vitrin/benzer slider'ında starakim kartı: sabit genişlikli slide (grid kolonu değil) */
.vitrin-slider-content .pc-slide {
    position: relative;
    flex: 0 0 auto;
    width: 230px;
}

.vitrin-slider-content .pc-slide .pc-card--starakim {
    width: 100%;
    height: 100%;
}

/* Mobil: biraz daha kompakt */
@media (max-width: 575.98px) {
    .pc-card--starakim {
        padding: 10px;
    }

    .pc-card--starakim .pc-name {
        font-size: .88rem;
    }

    .pc-card--starakim .pc-new {
        font-size: 1.05rem;
    }

    .pc-card--starakim .pc-cart {
        width: 42px;
        height: 42px;
    }

    .pc-card--starakim .pc-qty {
        gap: 4px;
    }

    .pc-card--starakim .pc-qty-btn {
        width: 22px;
        font-size: 16px;
    }

    .pc-card--starakim .pc-qty-input {
        width: 30px;
    }

    .pc-card--starakim .pc-badge {
        width: 40px;
        height: 40px;
    }

    .vitrin-slider-content .pc-slide {
        width: 180px;
    }
}

/* ============= BIRIM SUFFIX (BirimliIslemler) ============= */
/* ============= BIRIMLI ISLEMLER UI ============= */
/* Birimli mod input'u (type="number") için: type="text" ile aynı boyut.
   Chrome'un native number input arrow'ları gizlenir, ondalık girişe izin verilir. */
.product-detail-quantity input[type="number"] {
    width: 70px;
    height: 48px;
    border: none;
    border-left: 1px solid #e5e7eb;
    border-right: 1px solid #e5e7eb;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    background: #fff;
    -moz-appearance: textfield;
}

.product-detail-quantity input[type="number"]::-webkit-outer-spin-button,
.product-detail-quantity input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Sepete-Ekle satırı: input grubu + birim badge + buton arasında ferah boşluk */
.product-detail-add-cart-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: stretch;
}

/* Birim badge — input'un yanında dik duran şık etiket (gradient + border) */
.product-detail-birim-badge {
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    background: linear-gradient(135deg, #f8f9fa 0%, #eef0f3 100%);
    border: 1px solid #d8dde3;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #4a5568;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    white-space: nowrap;
    user-select: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

/* Sepet sayfasındaki ürün kartında birim ad alt yazısı */
.cart-product-birim {
    text-align: right;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

/* ============================================================
   Statik sayfa sol hızlı menü (Politikalarımız sidebar)
   Page.cshtml + _StaticPageSidebar.cshtml ile kullanılır.
   ============================================================ */
.static-page-sidebar {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 22px 20px;
    position: sticky;
    top: 110px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.static-page-sidebar .sidebar-title {
    font-weight: 700;
    font-size: 16px;
    color: #111;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 2px solid var(--primaryColor, #FF0013);
    text-transform: none;
}

.static-page-sidebar .sidebar-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.static-page-sidebar .sidebar-list li {
    margin: 2px 0;
}

.static-page-sidebar .sidebar-list li a {
    display: block;
    padding: 9px 12px;
    color: #4b5563;
    text-decoration: none;
    border-radius: 6px;
    transition: background-color .15s ease, color .15s ease;
    font-size: 14.5px;
    line-height: 1.35;
}

.static-page-sidebar .sidebar-list li a:hover {
    background: #f3f4f6;
    color: #111;
}

.static-page-sidebar .sidebar-list li a.active {
    background: var(--primaryColor, #FF0013);
    color: #fff;
    font-weight: 600;
}

/* === Vitrin Yanı Banner (Tip=8) — Kart yaklaşımı (v2) ===
   Banner artık slider/grid'in içinde bir kart olarak yer alır,
   ürün kartı (featured-product-card) ile aynı görsel ailenin parçası. */

/* Vitrin slider içinde banner kart — 350px sabit width (ürün kartı ile aynı).
   align-self: stretch ile slider'daki diğer kartlarla aynı yüksekliğe match olur. */
.vitrin-banner-kart {
    flex: 0 0 auto;
    width: 350px;
    scroll-snap-align: start;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    align-self: stretch;
    position: relative;
}

.vitrin-banner-kart:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.10);
    border-color: transparent;
}

.vitrin-banner-kart>a,
.vitrin-banner-kart>img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 360px;
}

.vitrin-banner-kart img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Önerilen Ürünler grid'inde banner kart — col-xxl-3 vs. parent col'u doldurur,
   featured-product-card ile aynı yüksekliği alır (grid stretch). */
.onerilen-banner-kart {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    height: 100%;
    min-height: 360px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.onerilen-banner-kart:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.10);
    border-color: transparent;
}

.onerilen-banner-kart>a,
.onerilen-banner-kart>img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 360px;
}

.onerilen-banner-kart img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Mobile davranış */
@media (max-width: 991.98px) {
    .vitrin-banner-kart {
        width: 280px;
    }

    .vitrin-banner-kart>a,
    .vitrin-banner-kart>img {
        min-height: 320px;
    }

    .onerilen-banner-kart {
        min-height: 240px;
    }

    .onerilen-banner-kart>a,
    .onerilen-banner-kart>img {
        min-height: 240px;
    }
}

/* Ürün listeleme - Paylaş butonu */
.product-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background: #fff;
    color: #333;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: all .15s ease;
    white-space: nowrap;
}

.product-share-btn:hover {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}

.product-share-btn i {
    font-size: 15px;
}

/* ============================================================================
   ÜST ŞERİT (TOPBAR) — parametrik, admin "Üst Şerit" builder'ından yönetilir.
   Renkler --topbar-bg / --topbar-text CSS değişkenlerinden gelir (partial inline set eder).
   Kontrast kuralı: koyu zemin default (#111) → açık yazı (#fff).
   ============================================================================ */
.site-topbar {
    /* ---- token'lar: partial wrapper'da inline set edilir; burada fallback ---- */
    --topbar-font-size: 13px;
    --topbar-font-weight: 500;
    --topbar-letter-spacing: 0.02em;
    --topbar-text-transform: none;
    --topbar-icon-size: 13px;
    --topbar-item-gap: 20px;
    --topbar-link-opacity: 0.85;
    --topbar-transition: 180ms;
    --topbar-pill-radius: 8px;
    --topbar-underline-offset: 4px;
    --topbar-underline-thickness: 1px;
    /* accent boşsa yazı renginden türetilir → monokrom, kontrast otomatik güvenli */
    --topbar-accent: var(--topbar-text, #ffffff);
    /* hairline/dolgu renkleri metin/accent'ten türetilir (color-mix); eski tarayıcı için rgba fallback */
    --topbar-divider-color: rgba(255, 255, 255, 0.22);
    --topbar-divider-color: color-mix(in srgb, var(--topbar-text) 22%, transparent);
    --topbar-hover-bg: rgba(255, 255, 255, 0.12);
    --topbar-hover-bg: color-mix(in srgb, var(--topbar-accent) 16%, transparent);
    --topbar-hover-bg-active: color-mix(in srgb, var(--topbar-accent) 24%, transparent);

    background: var(--topbar-bg, #111111);
    color: var(--topbar-text, #ffffff);
    min-height: var(--topbar-height, 40px);
    width: 100%;
    font-size: var(--topbar-font-size);
    font-weight: var(--topbar-font-weight);
    letter-spacing: var(--topbar-letter-spacing);
    line-height: 1.2;
    /* açık zeminli şerit header'a karışmasın diye theme-aware ince ayraç */
    border-bottom: 1px solid color-mix(in srgb, var(--topbar-text) 12%, transparent);
}

.site-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: var(--topbar-height, 40px);
}

.site-topbar-inner.boxed {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}

.site-topbar-inner.full {
    width: 100%;
    padding: 0 24px;
}

.site-topbar-col {
    /* Genişlik ORANSAL: kolonlar --col-w değerine göre toplam genişliği paylaşır.
       Böylece kaç kolon olursa olsun (2, 3, 5...) asla taşmaz — flex-basis:0 + grow. */
    flex-grow: var(--col-w, 6);
    flex-shrink: 1;
    flex-basis: 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 18px;
}

.site-topbar-col.align-left {
    justify-content: flex-start;
}

.site-topbar-col.align-center {
    justify-content: center;
}

.site-topbar-col.align-right {
    justify-content: flex-end;
}

/* Ortak widget kabı */
.site-topbar .tb-widget {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

/* ---- MENÜ LİNKLERİ: sakin dinlenme + seçilebilir hover varyantı ---- */
.site-topbar .tb-menu {
    gap: var(--topbar-item-gap);
    flex-wrap: wrap;
}

.site-topbar .tb-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: var(--topbar-text, #ffffff);
    text-decoration: none;
    white-space: nowrap;
    opacity: var(--topbar-link-opacity);
    text-transform: var(--topbar-text-transform);
    transition: opacity var(--topbar-transition) ease,
        background-color var(--topbar-transition) ease,
        color var(--topbar-transition) ease;
}

.site-topbar .tb-link:hover,
.site-topbar .tb-link:focus-visible {
    opacity: 1;
}

/* VARYANT: underline (varsayılan) — soldan büyüyen accent hairline (GPU-dostu scaleX) */
.site-topbar[data-tb-link="underline"] .tb-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(-1 * var(--topbar-underline-offset));
    height: var(--topbar-underline-thickness);
    background: var(--topbar-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--topbar-transition) ease;
}

.site-topbar[data-tb-link="underline"] .tb-link:hover::after,
.site-topbar[data-tb-link="underline"] .tb-link:focus-visible::after,
.site-topbar[data-tb-link="underline"] .tb-link[aria-current]::after {
    transform: scaleX(1);
}

/* VARYANT: pill — yumuşak yuvarlak dolgu (padding önceden ayrılır → layout kaymaz) */
.site-topbar[data-tb-link="pill"] .tb-link,
.site-topbar[data-tb-link="pill"] .tb-contact-item {
    padding: 5px 10px;
    border-radius: var(--topbar-pill-radius);
}

.site-topbar[data-tb-link="pill"] .tb-link:hover,
.site-topbar[data-tb-link="pill"] .tb-contact-item:hover {
    background: var(--topbar-hover-bg);
    opacity: 1;
    /* NOT: font-weight değiştirilmez — metin genişleyip komşuları oynatır (reflow jitter). Dolgu hover sinyali yeterli. */
}

.site-topbar[data-tb-link="pill"] .tb-link[aria-current],
.site-topbar[data-tb-link="pill"] .tb-link.is-active {
    background: var(--topbar-hover-bg-active);
    opacity: 1;
    font-weight: 600;
}

/* VARYANT: plain — yalnız opaklık (ek kural gerekmez) */

/* ---- AYRAÇ: gap ortasında 1px hairline (data-tb-divider=on) ---- */
.site-topbar[data-tb-divider="on"] .tb-menu {
    gap: 0;
}

.site-topbar[data-tb-divider="on"] .tb-menu .tb-link {
    padding-inline: calc(var(--topbar-item-gap) / 2);
}

.site-topbar[data-tb-divider="on"] .tb-menu .tb-link:not(:first-child) {
    border-inline-start: 1px solid var(--topbar-divider-color);
}

/* ---- İKONLU İLETİŞİM: ikon yazıdan bağımsız, hover'da accent'e döner ---- */
.site-topbar .tb-contact {
    gap: var(--topbar-item-gap);
    flex-wrap: wrap;
}

.site-topbar .tb-contact.vertical {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.site-topbar .tb-contact-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--topbar-text, #ffffff);
    text-decoration: none;
    white-space: nowrap;
    opacity: var(--topbar-link-opacity);
    transition: opacity var(--topbar-transition) ease,
        background-color var(--topbar-transition) ease,
        color var(--topbar-transition) ease;
}

.site-topbar .tb-contact-item:hover {
    opacity: 1;
    color: var(--topbar-accent);
}

.site-topbar .tb-contact-item i,
.site-topbar .tb-social-link i,
.site-topbar .tb-cur i {
    font-size: var(--topbar-icon-size);
    line-height: 1;
}

/* ---- SOSYAL: minimal; pill varyantında yuvarlak chip ---- */
.site-topbar .tb-social {
    gap: calc(var(--topbar-item-gap) * 0.7);
}

.site-topbar .tb-social-link {
    color: var(--topbar-text, #ffffff);
    opacity: var(--topbar-link-opacity);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--topbar-transition) ease,
        transform var(--topbar-transition) ease,
        color var(--topbar-transition) ease,
        background-color var(--topbar-transition) ease;
}

.site-topbar .tb-social-link:hover {
    opacity: 1;
    color: var(--topbar-accent);
    transform: translateY(-1px);
}

.site-topbar[data-tb-link="pill"] .tb-social-link {
    width: calc(var(--topbar-icon-size) + 14px);
    height: calc(var(--topbar-icon-size) + 14px);
    border-radius: 999px;
}

.site-topbar[data-tb-link="pill"] .tb-social-link:hover {
    background: var(--topbar-hover-bg);
    transform: none;
}

/* ---- DÖVİZ: sakin hairline pill + hizalı rakam + accent sembol ---- */
.site-topbar .tb-currency {
    gap: var(--topbar-item-gap);
}

.site-topbar .tb-cur {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    font-weight: var(--topbar-font-weight);
    font-variant-numeric: tabular-nums;
    padding: 2px 9px;
    border: 1px solid var(--topbar-divider-color);
    border-radius: 999px;
}

.site-topbar .tb-cur i {
    color: var(--topbar-accent);
}

/* ---- ÖZEL METİN/HTML ---- */
.site-topbar .tb-text {
    color: var(--topbar-text, #ffffff);
}

.site-topbar .tb-text a {
    color: var(--topbar-accent);
    text-decoration: underline;
}

.site-topbar .tb-text p {
    margin: 0;
}

/* ---- KLAVYE ERİŞİLEBİLİRLİĞİ ---- */
.site-topbar :is(.tb-link, .tb-contact-item, .tb-social-link):focus-visible {
    outline: 2px solid var(--topbar-text, #ffffff);
    outline-offset: 1px;
    opacity: 1;
}

/* ---- TAM-YÜKSEKLİK TIKLAMA ALANI (Fitts + WCAG 2.5.8) ----
   Anchor kutusunu BÜYÜTMEDEN görünmez ::before overlay ile hedefi bar yüksekliğine taşır.
   Metni/underline'ı oynatmaz; 200px'lik barlarda absürt hedef olmasın diye 44px cap. */
.site-topbar .tb-contact-item,
.site-topbar .tb-social-link {
    position: relative;
}

.site-topbar .tb-link::before,
.site-topbar .tb-contact-item::before,
.site-topbar .tb-social-link::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: min(var(--topbar-height, 40px), 44px);
}

/* dikey iletişim listesinde üst üste binmesin */
.site-topbar .tb-contact.vertical .tb-contact-item::before {
    height: 100%;
}

/* döviz pill'i kontrol değil → hedef genişletme yok (zaten yukarıda dahil değil) */

/* ---- HAREKET HASSASİYETİ ---- */
@media (prefers-reduced-motion: reduce) {

    .site-topbar .tb-link,
    .site-topbar .tb-link::after,
    .site-topbar .tb-contact-item,
    .site-topbar .tb-social-link {
        transition: none;
    }

    .site-topbar .tb-social-link:hover {
        transform: none;
    }
}

/* Mobil: default gizli; showOnMobile açıksa TEK YATAY-KAYDIRMALI 40px satır (dev dikey blok değil) */
@media (max-width: 991px) {
    .site-topbar:not(.show-mobile) {
        display: none;
    }

    .site-topbar.show-mobile {
        position: relative;
    }

    .site-topbar.show-mobile .site-topbar-inner {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 16px;
        padding: 0 16px;
        scrollbar-width: none;
        /* Firefox */
        -webkit-overflow-scrolling: touch;
    }

    .site-topbar.show-mobile .site-topbar-inner::-webkit-scrollbar {
        display: none;
    }

    /* WebKit */
    .site-topbar.show-mobile .site-topbar-col {
        flex: 0 0 auto;
        max-width: none;
        justify-content: flex-start;
    }

    /* sağ kenar fade — kaydırma ipucu (--topbar-bg tabanlı, kontrast kuralına uyar) */
    .site-topbar.show-mobile::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 28px;
        pointer-events: none;
        background: linear-gradient(to right, transparent, var(--topbar-bg, #111111));
    }
}

/* ============================================================
   #4 — Marka şeridi: SÜREKLİ AKAN BANT (marquee).
   Partial .sbs-marquee-mode ekleyince item'lar ikiye katlanır; track translateX(-50%) ile
   kesintisiz döner (iki yarı birebir aynı olduğu için -50%'de başa dönüş dikişsiz). Hover'da
   durur; prefers-reduced-motion'da animasyon kapanıp manuel yatay kaydırma devreye girer.
   ============================================================ */
.site-brand-strip.sbs-marquee-mode .sbs-inner {
    overflow: hidden;
    /* Kenarlarda yumuşak fade — akan bant kenardan "kesilmek" yerine erir */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}

@media (max-width: 991.98px) {
    .site-brand-strip.sbs-marquee-mode .sbs-inner {
        -webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
        mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
    }
}

.site-brand-strip.sbs-marquee-mode .sbs-track {
    overflow: visible;
    width: max-content;
    flex: 0 0 auto;
    animation: sbs-marquee var(--sbs-duration, 40s) linear infinite;
    will-change: transform;
}

.site-brand-strip.sbs-marquee-mode:hover .sbs-track {
    animation-play-state: paused;
}

@keyframes sbs-marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-brand-strip.sbs-marquee-mode .sbs-inner {
        overflow-x: auto;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .site-brand-strip.sbs-marquee-mode .sbs-track {
        animation: none;
        width: auto;
    }

    .site-brand-strip .sbs-item:hover .sbs-avatar {
        transform: none;
    }
}

/* ============================================================
   #8 — Anasayfa "Önerilen Ürünler" (.pg-cols) grid'inde kart alt kenarlarını eşitle.
   Kolon, satırdaki en uzun öğeye göre gerilir (align-items:stretch); ancak legacy
   .featured-product-card kolonun içinde blok çocuk olup height:100% almadığından, ürün adı
   satır sayısı / görsel yüksekliği değişince kart içeriğe göre kısa kalıp ALTLARI kayıyordu.
   Kolonu flex yapıp kartı %100 yükseklikle gererek tüm kart altlarını hizalarız.
   (Vitrin yatay slider'da kart zaten doğrudan flex-item olduğundan otomatik gerilir — dokunmaya gerek yok.)
   ============================================================ */
.pg-cols>[class*="col-"] {
    display: flex;
    flex-direction: column;
}

.pg-cols .featured-product-card {
    height: 100%;
    width: 100%;
}

/* ============================================================
   GRİ SAYFA ZEMİNİ (body #f6f7f9 — dosya başı) SONRASI DÜZELTMELER
   Amaç: beyaz ürün kartları/tablolar zeminden ayrışsın. Aşağıda yalnızca
   "gri zemin üzerinde durmaması gereken" bölümler beyaza sabitlenir; kendi
   beyaz kartı olan bölümler (ürün açıklaması, sepet tablosu, statik sayfa
   kartı) bilerek transparan bırakılır — kart etkisi oradan gelir.
   ============================================================ */

/* Footer'ın kendi arka planı yoktu, beyaz kalmalı. */
footer {
    background: #fff;
}

/* Ürün detay ana bölümü: galeri + ürün bilgisi beyaz kart içinde değil,
   doğrudan zeminde duruyor — beyaz "kağıt" olarak kalır. */
section.shop-detail {
    background: #fff;
}

/* Vitrin / ürün liste / marka bölümlerindeki eski #EAEAEC bandı yerine tek tonlu
   sayfa zemini kullanılır; ayrımı artık kart gölgeleri sağlıyor. */
section.featured-product-sec.bg-lightest-gray,
section.brands-section.bg-lightest-gray {
    background-color: transparent;
}

/* ============================================================
   TEKLİF MODÜLÜ
   Bayinin kendi müşterisine verdiği teklif belgesi ekranları.
   Koyu zeminlerde daima açık yazı kullanılır (kontrast kuralı).
   ============================================================ */

/* Sepetteki "Teklif Hazırla" butonu - Amber */
.cart-btn-quote {
    background: #b45309;
    color: #fff;
    border: none;
}

.cart-btn-quote:hover {
    background: #92400e;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(180, 83, 9, 0.3);
}

/* Panel kartları */
.quote-panel {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px 18px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}

.quote-panel-title {
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.quote-panel-title i {
    color: var(--primaryColor, #b45309);
}

.quote-panel-hint {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 12px;
}

.quote-info-line {
    font-size: 13px;
    line-height: 1.7;
    color: #374151;
}

/* Logo daveti / önizleme */
.quote-logo-invite {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 10px;
    padding: 12px 16px;
    margin-top: 12px;
}

.quote-logo-invite-text {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #78350f;
    font-size: 13px;
}

.quote-logo-invite-text i {
    font-size: 22px;
    color: #b45309;
}

.quote-logo-invite-text strong {
    display: block;
}

.quote-logo-invite-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.quote-logo-invite-actions .form-control {
    max-width: 260px;
}

.quote-logo-preview {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px 16px;
    margin-top: 12px;
    font-size: 13px;
    color: #4b5563;
}

.quote-logo-preview img {
    max-height: 46px;
    max-width: 160px;
    object-fit: contain;
}

/* Satır tablosu */
.quote-lines-table th {
    background: #f3f4f6;
    color: #374151;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.quote-line-name {
    font-weight: 600;
    color: #1f2937;
    font-size: 13px;
}

.quote-line-code {
    font-size: 11px;
    color: #9ca3af;
}

.quote-line-base {
    color: #6b7280;
    font-size: 12px;
}

.quote-line-zam {
    max-width: 90px;
    margin: 0 auto;
}

/* Toplamlar */
.quote-totals {
    margin-top: 14px;
    margin-left: auto;
    max-width: 360px;
}

.quote-total-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
    color: #4b5563;
    border-bottom: 1px solid #f0f1f3;
}

.quote-total-row.quote-total-grand {
    border-bottom: none;
    border-top: 2px solid #374151;
    margin-top: 6px;
    padding-top: 10px;
    font-size: 16px;
    font-weight: 700;
    color: #111827;
}

/* Durum rozetleri - koyu zemin + beyaz yazı */
.quote-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
    color: #fff;
    white-space: nowrap;
}

.quote-badge-0 { background: #6b7280; } /* Taslak */
.quote-badge-1 { background: #2563eb; } /* Sunuldu */
.quote-badge-2 { background: #15803d; } /* Kabul */
.quote-badge-3 { background: #b91c1c; } /* Ret */
.quote-badge-4 { background: #374151; } /* İptal */

.quote-badge-expired {
    background: #b45309;
    display: block;
    width: fit-content;
    margin: 4px auto 0;
}

@media (max-width: 767.98px) {
    .quote-logo-invite,
    .quote-logo-invite-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .quote-logo-invite-actions .form-control {
        max-width: 100%;
    }

    .quote-totals {
        max-width: 100%;
    }
}

/* Teklif satırı: bayi alış fiyatı — SADECE düzenleme ekranında, çıktıda yok */
.quote-line-cost {
    font-size: 11px;
    color: #b45309;
    margin-top: 2px;
}

/* Miktar hücresi: input + birim etiketi */
.quote-qty-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
}

.quote-qty-wrap .quote-line-miktar {
    max-width: 80px;
}

.quote-qty-unit {
    font-size: 11px;
    color: #6b7280;
    white-space: nowrap;
}

/* Önizleme modalı içindeki iframe zemini */
#quotePreviewFrame {
    background: #f5f5f5;
}

/* Teklif ekranı: dövizli teklifte TL karşılığı satırı */
.quote-total-row.quote-total-tl {
    border-bottom: none;
    margin-top: 4px;
    padding: 8px 10px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-weight: 600;
    color: #1e3a5f;
}

/* Teklif listesi: durum select'i — seçim değişince anında kaydedilir.
   Renkler koyu zemin + beyaz yazı (kontrast kuralı). */
.quote-status-select {
    min-width: 132px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 4px 26px 4px 10px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.quote-status-select:disabled { opacity: .6; cursor: wait; }

/* Açılır listedeki seçenekler beyaz zeminde koyu yazı olmalı (aksi halde okunmaz) */
.quote-status-select option { color: #1f2937; background: #fff; }

.quote-status-0 { background-color: #6b7280; }  /* Taslak */
.quote-status-1 { background-color: #2563eb; }  /* Sunuldu */
.quote-status-2 { background-color: #15803d; }  /* Kabul */
.quote-status-3 { background-color: #b91c1c; }  /* Ret */
.quote-status-4 { background-color: #374151; }  /* İptal */

/* ---------------------------------------------------------------
   Deploy hazırlık bandı — deploy öncesi kısa süre görünen bilgi şeridi.
   B2B_Tanimlar.DeployHazirlikModu penceresi açıkken _Layout render eder.

   Zemin tenant'ın ana rengi (--primaryColor): bant siteye yamanmış bir
   uyarı gibi değil, sitenin parçası gibi görünsün. Alt çizgi aynı rengin
   koyusu. Yazı her zaman beyaz (kontrast kuralı) — ana renk olarak açık
   bir ton seçilirse okunabilirlik için --primaryColor-hover değil doğrudan
   koyulaştırılmış bir değer kullanmak gerekir.
   --------------------------------------------------------------- */
.deploy-bakim-bandi {
    background: var(--primaryColor, #92400e);
    color: #fff;
    padding: 10px 16px;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
    border-bottom: 2px solid color-mix(in srgb, var(--primaryColor, #92400e) 75%, black);
}

.deploy-bakim-bandi strong { color: #fff; font-weight: 700; }

@media (max-width: 576px) {
    .deploy-bakim-bandi { font-size: 13px; padding: 8px 12px; }
}

/* ============================================================
   Kampanya vitrini marka şeridi (B2B_Tanimlar.KampanyaVitrinMarkaLogolari)
   Ana sayfa "Kampanyalı Ürünler" vitrininin üstünde durur; her öğe o markanın
   kampanyalı ürünlerine gider (/kampanyali-urunler?markaId=N).
   Menü-altı .site-brand-strip'ten BAĞIMSIZ — onun marquee/config mantığı burada yok.
   ============================================================ */
.campaign-brand-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 2px 12px;
    margin-bottom: 4px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.campaign-brand-strip::-webkit-scrollbar { height: 4px; }
.campaign-brand-strip::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.18); border-radius: 4px; }

.campaign-brand-strip .cbs-item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.campaign-brand-strip .cbs-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 104px;
    height: 56px;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-sizing: border-box;
    overflow: hidden;
}

.campaign-brand-strip .cbs-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Logosu yüklenmemiş marka: ad yazılı chip (açık zemin + koyu yazı = okunur kontrast) */
.campaign-brand-strip .cbs-name {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 104px;
    height: 56px;
    padding: 6px 14px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-sizing: border-box;
    color: #212529;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

.campaign-brand-strip .cbs-item:hover .cbs-logo,
.campaign-brand-strip .cbs-item:hover .cbs-name {
    border-color: var(--primaryColor, #FF0013);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.campaign-brand-strip .cbs-item:hover { transform: translateY(-2px); }

.campaign-brand-strip .cbs-item:hover .cbs-name { color: var(--primaryColor, #FF0013); }

@media (max-width: 576px) {
    .campaign-brand-strip { gap: 8px; padding-bottom: 10px; }
    .campaign-brand-strip .cbs-logo { width: 88px; height: 48px; }
    .campaign-brand-strip .cbs-name { min-width: 88px; height: 48px; font-size: 12px; padding: 6px 10px; }
}

/* ============================================================
   Ürün seçimi (toplu sepete ekleme / teklif talebi)
   ProductSelection.js sürer. Kart görselinin sol üstünde durur;
   starakım kartında favori ikonunun karşı köşesidir.
   ============================================================ */

.pg-select-wrap {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 5;
    line-height: 0;
}

.pg-select {
    display: inline-block;
    cursor: pointer;
    margin: 0;
}

.pg-select input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.pg-select-box {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 2px solid #cbd5e1;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
    transition: background .15s ease, border-color .15s ease;
    position: relative;
}

.pg-select input:checked + .pg-select-box {
    background: var(--primaryColor, #1f2937);
    border-color: var(--primaryColor, #1f2937);
}

/* Onay imi — koyu zemin üzerinde BEYAZ (kontrast kuralı) */
.pg-select input:checked + .pg-select-box::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.pg-select input:focus-visible + .pg-select-box {
    outline: 2px solid var(--primaryColor, #1f2937);
    outline-offset: 2px;
}

/* Varyasyonu seçilmemiş ürün — listeden seçilemez */
.pg-select--disabled {
    cursor: not-allowed;
    opacity: .45;
}

/* ---------- Sticky seçim çubuğu ---------- */

#product-selection-bar {
    position: sticky;
    bottom: 0;
    z-index: 1030;
    background: #1f2937;          /* koyu zemin → beyaz yazı */
    color: #fff;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 -4px 18px rgba(0, 0, 0, .18);
    padding: 12px 16px;
    margin-top: 16px;
}

#product-selection-bar,
#product-selection-bar a,
#product-selection-bar button {
    font-size: 14px;
}

.pg-sel-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.pg-sel-count {
    font-weight: 600;
    margin-right: auto;
    background: none;
    border: 0;
    color: #fff;
    padding: 6px 0;
    cursor: pointer;
}

.pg-sel-count:hover { text-decoration: underline; }

.pg-sel-btn {
    border: 0;
    border-radius: 8px;
    padding: 8px 16px;
    font-weight: 600;
    cursor: pointer;
}

.pg-sel-btn--cart   { background: #fff;    color: #1f2937; }
.pg-sel-btn--quote  { background: #f59e0b; color: #1f2937; }   /* amber üzerinde koyu yazı */
.pg-sel-btn--clear  { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.45); }

.pg-sel-btn:disabled { opacity: .6; cursor: default; }

/* ---------- Seçilenler listesi ---------- */

[data-selection-list] { display: none; }
[data-selection-list].is-open {
    display: block;
    max-height: 220px;
    overflow-y: auto;
    margin-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .18);
    padding-top: 10px;
}

.pg-sel-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    font-size: 13px;
}

.pg-sel-row-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-sel-row-qty  { opacity: .85; white-space: nowrap; }

.pg-sel-row-del {
    background: none;
    border: 0;
    color: #fca5a5;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

/* ---------- Eklenemeyen ürünler ---------- */

[data-selection-failures] {
    display: none;
    margin-top: 10px;
    background: rgba(255, 255, 255, .08);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    max-height: 160px;
    overflow-y: auto;
}

.pg-sel-fail-title { font-weight: 600; margin-bottom: 4px; }

.pg-sel-fail-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 0;
    opacity: .9;
}

@media (max-width: 575.98px) {
    .pg-sel-actions { gap: 8px; }
    .pg-sel-btn { flex: 1 1 auto; padding: 8px 10px; }
    .pg-sel-count { flex: 1 0 100%; margin-bottom: 4px; }
}

/* ==========================================================================
   Ürün yorumu / puanı + soru-cevap
   Renkler tema değişkenlerinden gelir; sabit hex kullanılmaz ki tenant renk
   ayarı (B2B_Tanimlar.PrimaryColor) buraya da yansısın.
   ========================================================================== */

.rating-stars { display: inline-flex; gap: 2px; color: #f5a623; font-size: .95rem; line-height: 1; }
.rating-stars .fa-regular { color: #d5d5d5; }

/* Ürün adının altındaki özet — JSON-LD aggregateRating'in GÖRÜNÜR karşılığı */
.product-rating-inline {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 6px 0 10px; text-decoration: none; color: inherit;
}
.product-rating-inline:hover { text-decoration: none; }
.product-rating-inline .rating-value { font-weight: 700; font-size: .95rem; }
.product-rating-inline .rating-count { font-size: .85rem; color: #6b7280; }

.product-reviews, .product-questions { padding: 4px 0 8px; }

/* ---- özet blok ---- */
.reviews-summary {
    display: flex; flex-wrap: wrap; gap: 28px; align-items: center;
    padding: 18px 20px; margin-bottom: 20px;
    background: #f8f9fa; border-radius: 12px;
}
.reviews-summary-score { text-align: center; min-width: 130px; }
.reviews-summary-score .score-value { font-size: 2.4rem; font-weight: 700; line-height: 1; }
.reviews-summary-score .score-count { font-size: .82rem; color: #6b7280; margin-top: 6px; }
.reviews-summary-bars { flex: 1 1 260px; min-width: 240px; }

.rating-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.rating-bar-label { width: 42px; font-size: .82rem; color: #6b7280; white-space: nowrap; }
.rating-bar-label .fa-star { color: #f5a623; font-size: .75rem; }
.rating-bar-track { flex: 1; height: 8px; background: #e5e7eb; border-radius: 6px; overflow: hidden; }
.rating-bar-fill { display: block; height: 100%; background: var(--primaryColor, #dc2626); border-radius: 6px; }
.rating-bar-count { width: 34px; text-align: right; font-size: .82rem; color: #6b7280; }

/* ---- form ---- */
.review-form {
    padding: 18px 20px; margin-bottom: 20px;
    border: 1px solid #e5e7eb; border-radius: 12px; background: #fff;
}
.review-form-title { font-weight: 700; margin-bottom: 12px; }
.review-form-hint { font-size: .82rem; color: #6b7280; margin-top: 8px; }

.review-star-picker { display: flex; align-items: center; gap: 4px; margin-bottom: 12px; }
.review-star-picker .star-btn {
    background: none; border: 0; padding: 2px 3px; cursor: pointer;
    color: #d5d5d5; font-size: 1.5rem; line-height: 1;
}
.review-star-picker .star-btn.active,
.review-star-picker .star-btn:hover { color: #f5a623; }
.star-picker-hint { margin-left: 10px; font-size: .85rem; color: #6b7280; }

.review-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.review-char-count { font-size: .78rem; color: #9ca3af; }

/* ---- bildirim / boş durum ---- */
/* Not: flex + gap kullaniyor -> icerik TEK bir eleman (span) icinde olmali.
   Dogrudan yazilan metin/link parcalari ayri anonim flex item olur ve
   aralarina gap: 10px girer ("giris yapin ." gibi kopuk gorunum). */
.reviews-notice {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; margin-bottom: 18px;
    background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px;
    color: #1e40af; font-size: .9rem;
}
.reviews-notice a { color: #1d4ed8; font-weight: 600; }

.reviews-empty { text-align: center; padding: 34px 16px; color: #9ca3af; }
.reviews-empty i { font-size: 2rem; display: block; margin-bottom: 10px; }
.reviews-empty p { margin: 0; font-size: .92rem; }

/* ---- yorum listesi ---- */
.review-item { padding: 16px 0; border-bottom: 1px solid #eef0f2; }
.review-item:last-child { border-bottom: 0; }
.review-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.review-author { font-weight: 600; font-size: .9rem; }
.review-date { font-size: .8rem; color: #9ca3af; margin-left: auto; }
.review-title { font-weight: 600; margin-bottom: 4px; }
.review-body { font-size: .92rem; line-height: 1.6; color: #374151; white-space: pre-line; }

/* Koyu zeminde açık yazı (kontrast kuralı) */
.verified-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px; border-radius: 999px;
    background: #16a34a; color: #fff; font-size: .72rem; font-weight: 600;
}

.review-reply {
    margin-top: 10px; padding: 10px 14px;
    background: #f8f9fa; border-left: 3px solid var(--primaryColor, #dc2626); border-radius: 0 8px 8px 0;
    font-size: .88rem; color: #374151;
}
.review-reply-label { display: block; font-weight: 600; margin-bottom: 4px; font-size: .8rem; color: #6b7280; }

/* ---- soru-cevap ---- */
.question-item { padding: 14px 0; border-bottom: 1px solid #eef0f2; }
.question-item:last-child { border-bottom: 0; }
.question-row { display: flex; gap: 10px; align-items: flex-start; }
.question-row + .question-row { margin-top: 10px; }
.answer-row { padding-left: 22px; }

.qa-badge {
    flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .74rem; font-weight: 700; color: #fff;
}
.qa-badge-q { background: #6b7280; }
.qa-badge-a { background: var(--primaryColor, #dc2626); }

.qa-content { flex: 1 1 auto; }
.qa-text { font-size: .92rem; line-height: 1.55; color: #374151; white-space: pre-line; }
.qa-meta { font-size: .78rem; color: #9ca3af; margin-top: 3px; }

/* ---- sayfalayıcı ---- */
.review-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }
.review-pager span { font-size: .86rem; color: #6b7280; }

@media (max-width: 575.98px) {
    .reviews-summary { gap: 16px; padding: 14px; }
    .reviews-summary-score { min-width: 100%; }
    .review-date { margin-left: 0; width: 100%; }
    .review-form { padding: 14px; }
}

/* Ürün kartında puan satırı */
.pc-rating { display: flex; align-items: center; gap: 6px; margin: 2px 0 4px; }
.pc-rating .rating-stars { font-size: .8rem; }
.pc-rating-count { font-size: .75rem; color: #9ca3af; }

/* ============================================
   GÖRSEL TEMBEL YÜKLEME — SKELETON
   lazy-images.js görseli indirdiğinde kapsayıcıya .img-ready, görsele .is-loaded ekler.
   Görsel gelene kadar boş beyaz kutu yerine hafif bir shimmer görünür; pop-in böylece
   "yükleniyor" gibi okunur. Ölçü/oran kurallarına dokunulmaz — kapsayıcıların yüksekliği
   zaten sabit (.pc-media-link aspect-ratio, .image-box height vb.).
   ============================================ */
.product-image-gallery::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, #f2f4f7 30%, #e9edf3 50%, #f2f4f7 70%);
    background-size: 300% 100%;
    animation: pcSkeletonShimmer 1.2s ease-in-out infinite;
    pointer-events: none;
}

/* Görsel indi — shimmer durur ve silinir. */
.product-image-gallery.img-ready::before {
    opacity: 0;
    animation: none;
    transition: opacity .25s ease;
}

@keyframes pcSkeletonShimmer {
    0%   { background-position: 150% 0; }
    100% { background-position: -50% 0; }
}

/* Hareket azaltma tercihi açıkken shimmer düz zemine düşer. */
@media (prefers-reduced-motion: reduce) {
    .product-image-gallery::before {
        animation: none;
        background: #f2f4f7;
    }
}

/* Ürün detay — "Teklif İste" butonu.
   Sepete Ekle ile karışmasın diye outline; amber zemin üzerinde koyu yazı
   (kontrast kuralı: açık zemin → koyu yazı). */
.product-detail-cart-btn.btn-request-quote {
    background: #fff;
    color: #1f2937;
    border: 2px solid #f59e0b;
}

.product-detail-cart-btn.btn-request-quote:hover:not(:disabled) {
    background: #f59e0b;
    color: #1f2937;
}

.product-detail-cart-btn.btn-request-quote:disabled {
    opacity: .6;
    cursor: default;
}