: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;
}

/* Site Genel Tipografi */
body {
    font-family: var(--site-font-family, inherit);
}

.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: 12px;
        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: 10px;
    }

    .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 */
.search-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    max-height: 400px;
    overflow-y: auto;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    z-index: 99999;
    margin-top: 1px
}

.search-dropdown h6 {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 6px;
    border-bottom: 1px solid #f1f1f1;
    padding-bottom: 4px
}

.search-results-content {
    display: flex;
    gap: 15px
}

.search-results-content .col {
    flex: 1;
    min-width: 120px
}

.search-results-content ul {
    list-style: none;
    padding-left: 0;
    margin: 0
}

.search-results-content li {
    cursor: pointer;
    padding: 6px 8px;
    font-size: 14px;
    border-radius: 6px;
    transition: all 0.2s ease-in-out
}

.search-results-content li:hover {
    color: #fff
}

@media (max-width: 576px) {
    .search-results-content {
        flex-direction: column;
        gap: 8px
    }

    .search-results-content .col {
        width: 100%
    }
}

.search-count-info {
    background-color: #f9f9f9;
    font-size: 14px;
    padding: 8px 12px;
    border-radius: 8px;
    color: #444;
    margin-bottom: 8px
}

/* 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 {
    position: absolute;
    right: 8px;
    bottom: 8px;
    font-size: 10px;
    color: #b00;
}

/* --- 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)
    }
}

/* Small remaining responsive tweaks */
@media (max-width: 576px) {
    .search-input {
        font-size: 14px !important;
        padding: 10px 12px !important
    }

    .search-btn {
        padding: 10px 14px !important;
        font-size: 14px !important
    }
}

.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 relative */
.product-image-container {
    position: relative;
    display: inline-block;
    width: 100%;
}

.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 {
    padding: 10px;
}

.alt-banner-item img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.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
   =========================================== */
.search-visual-content {
    min-width: 500px;
}

.search-visual-categories {
    min-width: 180px;
    max-width: 220px;
}

.search-visual-cat-item:hover {
    color: var(--primaryColor);
    background-color: #f8f9fa;
    padding-left: 5px;
    transition: all 0.2s ease;
}

.search-visual-product {
    transition: background-color 0.2s ease;
}

.search-visual-product:hover {
    background-color: #f8f9fa;
}

.search-visual-product:last-child {
    border-bottom: none !important;
}

/* Mobil uyumluluk */
@media (max-width: 768px) {
    .search-visual-content {
        flex-direction: column !important;
        min-width: auto;
    }

    .search-visual-categories {
        min-width: 100%;
        max-width: 100%;
        border-right: none !important;
        border-bottom: 1px solid #eee;
        padding-right: 0 !important;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }

    .search-visual-categories ul {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }

    .search-visual-categories ul li {
        background: #f0f0f0;
        padding: 4px 10px !important;
        border-radius: 15px;
        font-size: 12px !important;
    }
}

/* ===========================================
   İ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;
}

.modern-search-form .search-input {
    width: 100%;
    padding: 12px 18px;
    padding-right: 52px;
    border: 1px solid var(--header-border);
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.3s ease;
    background: #f8f9fa;
}

.modern-search-form .search-input:focus {
    background: #fff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--primaryColor-rgb), 0.1);
}

.modern-search-form .search-btn {
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 6px;
    border: none;
    background: var(--header-accent);
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.modern-search-form .search-btn:hover {
    background: var(--header-secondary);
}

/* ===== 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;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

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

.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 ===== */
.mega-menu-wrapper {
    position: relative;
}

.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);
}

.mega-menu-dropdown {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    width: 100vw;
    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 a {
    display: block;
    padding: 14px 20px;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    position: relative;
}

.static-nav-links li a:hover {
    color: var(--header-accent);
}

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

.static-nav-links li a:hover::after {
    width: 80%;
}

/* ===== HEADER BÄ°LGÄ°LENDÄ°RME MESAJLARI ===== */
.header-announcement-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    margin-left: 15px;
    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;
}

/* 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 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 */
.header-announcement-slider {
    position: relative;
    width: 100%;
    height: 40px;
}

.header-announcement-slider .announcement-slide {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    padding: 0 15px;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

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

/* 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 */
    .modern-search-form .search-input {
        padding: 10px 14px;
        padding-right: 44px;
        font-size: 14px;
        border-radius: 10px;
    }

    .modern-search-form .search-btn {
        width: 34px;
        height: 34px;
        font-size: 13px;
        border-radius: 8px;
    }

    /* İ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;
}

.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-form i {
    position: absolute;
    left: 14px;
    color: #999;
    font-size: 14px;
}

.modern-mobile-nav .mobile-nav-search .search-input {
    width: 100%;
    padding: 12px 16px 12px 42px;
    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;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.img-grid-nav-item {
    position: static;
}

.img-grid-nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px 18px;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: all 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 */
.img-grid-dropdown {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    width: 100vw;
    background: #fff;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.25s ease;
    z-index: 1000;
    max-height: 70vh;
    overflow-y: auto;
}

.img-grid-nav-item:hover .img-grid-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.img-grid-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 30px 40px;
}

/* 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;
    transition: all 0.3s ease;
}

.img-grid-card:hover .img-grid-card-img {
    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: #333;
    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;
    }

    .img-grid-nav-link {
        padding: 12px 14px;
        font-size: 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: 10px 12px;
        font-size: 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;
    background: rgba(255, 255, 255, 0.2);
    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;
}

.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";
}

.hero-banner .banner-slider .slick-arrow:hover {
    background: rgba(255, 255, 255, 0.35);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.1);
}

.hero-banner .banner-slider .slick-arrow:active {
    transform: scale(0.95);
}

/* === 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;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.5);
    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;
    }
}

/* === 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;
    background: linear-gradient(180deg, #f8f9fa 0%, #fff 100%);
}

/* === 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;
}

.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) === */
.brands-section .brand-card {
    background: #fff;
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid #f0f0f0;
    transition: all 0.3s ease;
    min-width: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Fixed container for image */
    width: 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 {
    max-width: 100%;
    max-height: 68px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.brands-section .brand-card:hover img {
    transform: scale(1.05);
}

/* 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 {
        max-height: 56px;
    }
}

@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 {
        max-height: 50px;
    }
}

/* ============================================
   Ş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);
}

/* 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: 0px;
    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;
}

/* ===== 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 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 {
    opacity: 0.5;
    cursor: not-allowed;
    position: relative;
}

.product-detail-variant-btn.out-of-stock::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #9ca3af;
    transform: rotate(-10deg);
}

/* 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: flex;
    align-items: center;
    justify-content: center;
}

/* Main Image */
.gallery-main-img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    transition: opacity 0.3s ease, transform 0.3s ease;
    cursor: zoom-in;
    user-select: none;
}

.gallery-main-img:not(.active) {
    opacity: 0;
    position: absolute;
}

.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;
}

/* 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;
    }

    .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;
}

/* 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;
}

/* 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: 60px 20px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e9ecef;
}

.saved-carts-empty i {
    font-size: 64px;
    color: #dee2e6;
    margin-bottom: 20px;
}

.saved-carts-empty h5 {
    color: #333;
    margin-bottom: 8px;
}

.saved-carts-empty p {
    color: #666;
    margin-bottom: 20px;
}

/* 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;
}

/* 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;
    }
}

/* ==============================================
   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 * {
    position: static !important;
    float: none !important;
    clear: both !important;
    z-index: auto !important;
    transform: none !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;
    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;
    }
}

/* Header arama butonuyla uyum */
.modern-search-form .search-btn {
    border-radius: 0 8px 8px 0;
}

/* ============================================
   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 {
    height: auto !important;
    aspect-ratio: 4 / 3;
}

/* 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;
}

/* Fiyat alani alta sabitlensin */
.vitrin-slider-content .featured-product-card .rating-star {
    margin-top: auto;
}

/* 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 {
    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;
}

/* Ü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;
}

/* Buton ve input öncesi boşluk - flexbox ile alta it */
.vitrin-slider-content .featured-product-card .product-desc::after {
    content: '';
    flex: 1 1 auto;
    min-height: 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);
    }
}