body {
    margin: 0;
    font-family: Arial, sans-serif;
    display: flex;
    height: 100vh;
    overflow: hidden;
    max-width: none !important;
    color: #000;
    background-color: #f9f9f9;
}
.modal {
    inset: 0;
}


.modal .modal-dialog .modal-content {
    border-radius: 10px;
    background-color: rgb(255 255 255);
}
.btn {
    text-transform: none !important;
}
.text-color-theme {
    color: #000000;
}
.mainShowcase2-h315 {
    min-height: 300px !important;
}

.mainShowcase2-h125 {
    min-height: 160px !important;
}

.sold-out {
    position: relative;
    opacity: 0.5;
    pointer-events: none;
}

    .sold-out::after {
        content: "sold out";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 10px 20px;
        border-radius: 5px;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        z-index: 9999;
    }
.product-list {
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    border-right: 1px solid #ccc;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    /*margin-right: 450px;*/
    background: linear-gradient(90deg, rgba(59, 102, 134, .035) 1px, transparent 1px), linear-gradient(0deg, rgba(59, 102, 134, .035) 1px, transparent 1px), #ffffff00;
    background-size: 10px 10px, 10px 10px, auto;
}

.product-list-kds {
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    border-right: 1px solid #ccc;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    background: linear-gradient(90deg, rgba(59, 102, 134, .035) 1px, transparent 1px), linear-gradient(0deg, rgba(59, 102, 134, .035) 1px, transparent 1px), #ffffff00;
    background-size: 10px 10px, 10px 10px, auto;
}

.product-list-header {
    position: sticky;
    top: 0;
    background-color: #eeeeee !important;
    z-index: 10;
    padding: 1px 0px;
    border-bottom: 3px solid #dee2e6 !important;
}

.header-section {
    display: flex;
    justify-content: space-between;
    align-content: space-around;
    align-items: stretch;
}


.product-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
}

.product-detail-panel {
    padding: 15px 10px 0 10px;
    color: #000000;
}

.cart-panel {
    background-color: #f9f9f9;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100vh;
    position: sticky;
    top: 0;
    padding: 0;
    box-sizing: border-box;
    padding-bottom: 75px;
}

.cart-header h3 {
    margin: 0 0 10px 0;
}

.cart-items {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 10px;
}

.cart-summary {
    background: #fff;
    padding: 0 10px;
    border-top: 1px solid #ccc;
}

.swiper.categoriesswiper {
    overflow-x: hidden;
    width: 100%;
}

.swiper-wrapper {
    display: flex;
}

.swiper-slide {
    flex-shrink: 0;
    width: auto;
}

.category-button {
    padding: 6px 12px;
    cursor: pointer;
    white-space: nowrap;
    margin-right: 12px;
    padding: 7px !important;
}

    .category-button.active {
        background: #4CAF50;
        color: white;
    }

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

    .utility-buttons button {
        padding: 6px 12px;
        background: #ddd;
        border: 1px solid #bbb;
        cursor: pointer;
    }

.categoriesswiper .swiper-wrapper .swiper-slide {
    width: auto;
}


#barcodeInput {
    position: absolute;
    left: -9999px;
}

.manual-search-wrapper {
    display: none;
    padding: 10px;
}

    .manual-search-wrapper input {
        width: 100%;
        padding: 8px;
        font-size: 16px;
    }

.sidebar-cashier {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}


.right-panels-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    z-index: 999;
    display: flex;
    flex-direction: row; /* Yan yana durmaları için */
}

.sidebar-wrap-cashier {
    margin: 25px;
    width: 500px;
    background: #fff;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
}

#dvcartinfocashier {
    /*width: 450px;*/
    background: #f9f9f9;
    /*border-left: 1px solid #ccc;*/
}

.header-cashier {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    background-color: #343a40; /* örnek olarak koyu arka plan */
    color: #fff;
    padding: 10px 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.footer-cashier {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 10;
    box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.1);
}

.page-overlay-cashier {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2); /* şeffaf siyah */
    z-index: 998; /* sidebar 999 ise, bu hemen altı */
}



.cart-action-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.7);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.cart-action-container {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    height: 100%;
}

.cart-action-menu {
    background-color: rgb(255, 255, 255);
    padding: 20px;
    max-width: 400px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

@keyframes slideFadeIn {
    0% {
        transform: translateY(20px);
        opacity: 0;
    }

    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}




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

    .payment-grid button {
        height: 70px;
        font-size: 14px;
        white-space: normal;
    }


.counter-number {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 110px;
    max-width: 110px;
    flex-shrink: 0;
}

    .counter-number button {
        flex: 0 0 auto;
    }

.counter-value.editable-quantity {
    flex: 1 1 auto;
    text-align: center;
    min-width: 32px;
}

.editable-quantity {
    display: inline-block;
    background-color: #f8f9fa;
    border: 1px dashed #ced4da;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    min-width: 32px;
    text-align: center;
}

    .editable-quantity:hover {
        background-color: #e2f0ff;
        border-color: #0d6efd;
        box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
        color: #0d6efd;
    }


.campaign-btn.active {
    border-color: #0d6efd;
    background-color: #e7f1ff;
    color: #0d6efd;
}

#discountCampaignList .campaign-btn.active {
    background-color: #0d6efd;
    color: #fff;
    border-color: #0d6efd;
}

.campaign-btn {
    min-height: 60px;
    line-height: 1.2;
    padding: 6px 10px;
    word-break: break-word;
    white-space: normal;
}


.cart-summary .row {
    margin-bottom: 6px;
}

.cart-summary .text-end {
    text-align: right;
}

.cart-summary .badge {
    font-size: 0.75rem;
    vertical-align: middle;
}

.counter-number {
    border-radius: 0;
}

.payment-method-btn.active {
    border-color: #0d6efd;
    background-color: #e7f1ff;
    color: #0d6efd;
}

#paymentMethodList .payment-method-btn.active {
    background-color: #0d6efd;
    color: #fff;
    border-color: #0d6efd;
}

.payment-method-btn {
    min-height: 80px;
    line-height: 1.2;
    padding: 6px 3px;
    word-break: break-word;
    white-space: normal;
}


.month-button-wrapper {
    flex: 0 0 calc(100% / 12);
    max-width: calc(100% / 12);
}

    .month-button-wrapper .btn {
        font-size: 0.75rem;
        padding: 0.375rem 0.5rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 768px) {
    .month-button-wrapper {
        flex: 0 0 calc(100% / 6);
        max-width: calc(100% / 6);
    }
}

@media (max-width: 576px) {
    .month-button-wrapper {
        flex: 0 0 calc(100% / 4);
        max-width: calc(100% / 4);
    }
}

.form-check-input:checked {
    background-color: #7297f8 !important;
    border-color: #7297f8 !important;
}

/* =================================================
   KASA HEADER — TEK PARÇA, TEMİZ CSS
   - Kompakt header hizalama
   - Kategori butonları: dikey/yatay merkez, hover, aktif
   - Arama kutusu: div görünümü, input %100 alan
   - Dark mode, responsive ve reduced-motion destekli
=================================================*/

/* ------------------------------
   Değişkenler
-------------------------------*/
:root {
    --cat-h: 60px; /* kategori chip yüksekliği (xs'te düşürüyoruz) */
    --search-h: 45px; /* arama kutusu yüksekliği */
    --search-fs-min: .9rem;
    --search-fs-max: 1.05rem;
    --brand: #6c5ce7;
    --brand-2: #00d2ff;
    --cat-active-bg: #fff;
    --cat-active-fg: #111;
}

/* ------------------------------
   Kompakt header hizalama
-------------------------------*/
.product-list-header .header-section {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 48px;
}

/* ------------------------------
   Kategoriler: hizalama & temel stil
-------------------------------*/
.categoriesswiper .swiper-wrapper {
    align-items: center;
}
/* Swiper flex satır hizası */

.categoriesswiper .category-button {
    position: relative;
    display: flex; /* her yükseklikte metni ortalamak için */
    align-items: center;
    justify-content: center;
    height: var(--cat-h);
    padding: 0 .6rem; /* dikey 0, yatay rahat */
    line-height: 1;
    white-space: nowrap;
    border-radius: .35rem;
    box-sizing: border-box;
    transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
    will-change: transform;
    -webkit-tap-highlight-color: transparent;
}

    /* İnce gradient alt-çizgi (varsayılan kapalı) */
    .categoriesswiper .category-button::after {
        content: "";
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 2px;
        height: 2px;
        border-radius: 2px;
        background: #3b6686 !important;
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform .18s ease;
    }

    /* Hover efekti */
    .categoriesswiper .category-button:hover {
        background: rgba(0,0,0,.06);
        transform: translateY(-1px);
        box-shadow: 0 6px 14px rgba(0,0,0,.08);
        background-color: #ffffff;
    }

        .categoriesswiper .category-button:hover::after {
            transform: scaleX(1);
        }

    /* Klavye erişilebilirliği */
    .categoriesswiper .category-button:focus-visible {
        outline: none;
        box-shadow: 0 0 0 .15rem rgba(13,110,253,.25);
    }

        .categoriesswiper .category-button:focus-visible::after {
            transform: scaleX(1);
        }

    /* Aktif/Seçili durum (kalıcı vurgu) */
    .categoriesswiper .category-button.active,
    .categoriesswiper .category-button.is-active,
    .categoriesswiper .category-button[aria-current="true"],
    .categoriesswiper .category-button[data-active="1"] {
        color: var(--cat-active-fg);
        background: var(--cat-active-bg);
        /* çerçeve için inset shadow; reflow yok */
        box-shadow: inset 0 0 0 1px rgba(0,0,0,.10), 0 6px 14px rgba(0,0,0,.06);
        transform: translateY(-1px);
    }

        .categoriesswiper .category-button.active::after,
        .categoriesswiper .category-button.is-active::after,
        .categoriesswiper .category-button[aria-current="true"]::after,
        .categoriesswiper .category-button[data-active="1"]::after {
            transform: scaleX(1);
        }

/* ------------------------------
   Arama kutusu (div) + input %100
-------------------------------*/
#searchFormWrapper {
    position: relative;
    display: flex;
    align-items: center;
    height: var(--search-h);
    ps- */pe-* sınıflarını ezer */ border:1px solid rgba(0,0,0,.12);
    border-radius: .5rem;
    background: #fff; /* bg-light varsa sorun değil */
    box-shadow: inset 0 1px 2px rgba(0,0,0,.04);
    /* yükseklikle orantılı font */
    font-size: clamp(var(--search-fs-min), calc(var(--search-h) / 2.6), var(--search-fs-max));
}

    #searchFormWrapper:focus-within {
        border-color: rgba(0,0,0,.2);
        box-shadow: 0 0 0 .15rem rgba(13,110,253,.15), inset 0 1px 2px rgba(0,0,0,.06);
    }

    #searchFormWrapper #searchForm {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        padding: 0 .6rem !important; /* mevcut p-*/
    }

    #searchFormWrapper #searchInput {
        width: 100%;
        height: 100%;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        background: transparent;
        padding: 0 !important;
        margin: 0 !important;
        font: inherit; /* wrapper fontunu alır */
        line-height: 1.2;
    }
        /* Bootstrap .is-valid ikonunu kaldır */
        #searchFormWrapper #searchInput.is-valid {
            background-image: none !important;
            padding-right: 0 !important;
        }

/* ------------------------------
   Responsive (telefon)
-------------------------------*/
@media (max-width: 576px) {
    :root {
        --cat-h: 30px;
        --search-h: 36px;
    }

    #searchFormWrapper {
        width: 50% !important;
    }
}

/* ------------------------------
   Dark mode
-------------------------------*/
@media (prefers-color-scheme: dark) {
    :root {
        --cat-active-bg: rgba(255,255,255,.10);
        --cat-active-fg: #fff;
    }

    #searchFormWrapper {
        /*background: #151515;*/
        border-color: rgba(255,255,255,.12);
    }

        #searchFormWrapper:focus-within {
            border-color: rgba(255,255,255,.3);
            box-shadow: 0 0 0 .15rem rgba(255,255,255,.08), inset 0 1px 2px rgba(0,0,0,.5);
        }

    .categoriesswiper .category-button {
        color: #eee;
        background: rgba(255,255,255,.08);
    }

        .categoriesswiper .category-button:hover {
            background: rgba(255,255,255,.12);
            box-shadow: 0 6px 14px rgba(0,0,0,.5);
        }

        .categoriesswiper .category-button.active,
        .categoriesswiper .category-button.is-active,
        .categoriesswiper .category-button[aria-current="true"],
        .categoriesswiper .category-button[data-active="1"] {
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 6px 14px rgba(0,0,0,.50);
        }
}

/* ------------------------------
   Hareketi azalt tercihine saygı
-------------------------------*/
@media (prefers-reduced-motion: reduce) {
    .categoriesswiper .category-button,
    .categoriesswiper .category-button::after {
        transition: none;
    }
}


/* =========================================================
   ÜRÜN LİSTESİ — KART & LİSTE GÖRÜNÜMLERİ (CSS ONLY)
   - Başlık satırı (isim + adet)
   - Kart görünümü (QR_THEME_PRODUCT_SHOW_TYPE_CARD)
   - Liste görünümü (alternatif)
   - Hover/odak, "sold-out" örtüsü, görsel oranı, metin kısma
   - Dark mode + reduced-motion desteği
========================================================= */

:root {
    --brand: #6c5ce7;
    --brand-2: #00d2ff;
    --card-r: .75rem; /* kart köşe */
    --img-r: .5rem; /* görsel köşe */
    --shadow: 0 10px 24px rgba(0,0,0,.12);
    --shadow-lg: 0 14px 28px rgba(0,0,0,.16);
    --muted: rgba(0,0,0,.55);
}

/* -----------------------------------------
   Başlık satırı (isim + adet rozeti)
------------------------------------------*/
.main-container > .row:first-child h2 {
    font-weight: 700;
    letter-spacing: .2px;
}

.main-container > .row:first-child .link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .55rem;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(108,92,231,.12), rgba(0,210,255,.12));
    color: #111;
    border: 1px solid rgba(0,0,0,.06);
}

/* =========================================================
   ORTAK: kart içi görsel, metin, animasyonlar
========================================================= */

/* Görseller aynı oranı korusun; layout hoplamasın */
.menu-card-item figure,
.main-container .card.shadow-sm.mt-1 figure {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* kare */
    border-radius: var(--img-r);
    overflow: hidden;
    background: #f6f7f9;
}

    .menu-card-item figure img.lookupimg,
    .main-container .card.shadow-sm.mt-1 figure img.lookupimg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: var(--img-r);
        transition: transform .2s ease;
    }

/* Kart/liste başlığı tek satırda taşma yapmasın (2 satıra kadar) */
.main-container h6.text-color-theme {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #000;
}

/* "Sold out" ortak: görseli soluklaştır, etiketi göster */
.sold-out figure img.lookupimg {
    filter: grayscale(100%) opacity(.55);
}

.sold-out {
    position: relative;
    opacity: .65;
}

    .sold-out::after {
        content: "sold out";
        position: absolute;
        inset: .15rem .15rem auto auto;
        padding: .15rem .5rem;
        border-radius: .35rem;
        font-size: .75rem;
        font-weight: 700;
        letter-spacing: .2px;
        background-color: #fb737c;
        color: #fff;
        z-index: 2;
        font-size: 18px;
    }

/* =========================================================
   KART GÖRÜNÜMÜ (col-2 içindeki .menu-card-item)
========================================================= */

.menu-card-item {
    border: 1px solid transparent; /* hover’da sıçrama olmasın */
    border-radius: var(--card-r);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, filter .2s ease;
    transform-origin: center bottom;
    will-change: transform;
    background: #fff;
    padding: 5px 0;
}

    .menu-card-item:hover,
    .menu-card-item:focus-within {
        transform: translateY(-4px);
        box-shadow: var(--shadow);
        border-color: rgba(0,0,0,.08);
        filter: brightness(1.02);
    }

        .menu-card-item:hover .lookupimg {
            transform: scale(1.02);
        }

    /* Kart iç tipografi ve fiyat vurgusu */
    .menu-card-item .size-20 {
        font-weight: 500;
        letter-spacing: .2px;
    }

/* “Detay / Menü” olan kartları ufak işaretle (JS gerekmez) */
.menu-btn::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 4px;
    width: .45rem;
    height: .45rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
    box-shadow: 0 0 0 3px rgba(108,92,231,.15);
}

/* =========================================================
   LİSTE GÖRÜNÜMÜ (.col-12 > .card.shadow-sm.mt-1)
========================================================= */

/* Liste kartı zemin ve köşe */
.main-container .row.align-items-stretch > .col-12 > .card.shadow-sm.mt-1 {
    border: 1px solid rgba(0,0,0,.06);
    border-radius: var(--card-r);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

    .main-container .row.align-items-stretch > .col-12 > .card.shadow-sm.mt-1:hover,
    .main-container .row.align-items-stretch > .col-12 > .card.shadow-sm.mt-1:focus-within {
        transform: translateY(-2px);
        box-shadow: var(--shadow);
        border-color: rgba(0,0,0,.10);
    }

    /* Liste görselini sabitle (ör. 80px) ve metin hizası */
    .main-container .row.align-items-stretch > .col-12 > .card.shadow-sm.mt-1 .avatar {
        width: 84px;
        min-width: 84px;
        aspect-ratio: 1/1;
        border-radius: var(--img-r);
        overflow: hidden;
    }

    .main-container .row.align-items-stretch > .col-12 > .card.shadow-sm.mt-1 .row {
        align-items: center;
        gap: .35rem;
    }

    /* Sağ sütunda fiyat hizası ve buton */
    .main-container .row.align-items-stretch > .col-12 > .card.shadow-sm.mt-1 .col-auto.text-end {
        min-width: 140px;
    }

    .main-container .row.align-items-stretch > .col-12 > .card.shadow-sm.mt-1 .size-20 {
        font-weight: 800;
    }

    /* Liste hover’da görsel de hafif zoom */
    .main-container .row.align-items-stretch > .col-12 > .card.shadow-sm.mt-1:hover .lookupimg {
        transform: scale(1.02);
    }

/* =========================================================
   Eşit yükseklik (mevcut yapına saygılı)
========================================================= */
.row.align-items-stretch > [class*="col-"] {
    display: flex;
}

.row.align-items-stretch .card {
    width: 100%;
    height: 100%;
}

/* =========================================================
   DARK MODE
========================================================= */
@media (prefers-color-scheme: dark) {
    :root {
        --muted: rgba(255,255,255,.7);
    }

    .menu-card-item {
        /*background: #141414;*/
        border-color: rgba(255,255,255,.08);
    }

        .menu-card-item:hover,
        .menu-card-item:focus-within {
            box-shadow: var(--shadow-lg);
            border-color: rgba(255,255,255,.16);
        }

    .main-container .row.align-items-stretch > .col-12 > .card.shadow-sm.mt-1 {
        /*background: #141414;*/
        border-color: rgba(255,255,255,.12);
    }

        .main-container .row.align-items-stretch > .col-12 > .card.shadow-sm.mt-1:hover,
        .main-container .row.align-items-stretch > .col-12 > .card.shadow-sm.mt-1:focus-within {
            box-shadow: var(--shadow-lg);
            border-color: rgba(255,255,255,.2);
        }

    .sold-out::after {
        background: repeating-linear-gradient( 135deg, rgba(255,255,255,.85) 0, rgba(255,255,255,.85) 8px, rgba(255,255,255,.65) 8px, rgba(255,255,255,.65) 16px );
        color: #000;
    }
}

/* =========================================================
   HAREKET AZALTMA
========================================================= */
@media (prefers-reduced-motion: reduce) {
    .menu-card-item,
    .menu-card-item .lookupimg,
    .main-container .row.align-items-stretch > .col-12 > .card.shadow-sm.mt-1,
    .main-container .row.align-items-stretch > .col-12 > .card.shadow-sm.mt-1 .lookupimg {
        transition: none;
        transform: none;
    }
}


/* Hover'da çok hafif gradient (kart görünümü) */
.menu-card-item:hover,
.menu-card-item:focus-within {
    background: linear-gradient(180deg, rgba(108,92,231,.1), rgba(0,210,255,.03)) #fff;
}

/* Hover'da çok hafif gradient (liste görünümü) */
.main-container .row.align-items-stretch > .col-12 > .card.shadow-sm.mt-1:hover,
.main-container .row.align-items-stretch > .col-12 > .card.shadow-sm.mt-1:focus-within {
    background: linear-gradient(180deg, rgba(108,92,231,.1), rgba(0,210,255,.03)) #fff;
}

/* Ürün adını 3 satırda kırp (kart + liste) */
.main-container h6.text-color-theme {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* 3 satır */
    line-clamp: 3; /* destekleyen tarayıcılar için */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Dark mode'da gradient tonlarını biraz artır (yine çok hafif) */
@media (prefers-color-scheme: dark) {
    .menu-card-item:hover,
    .menu-card-item:focus-within {
        background: linear-gradient(180deg, rgba(108,92,231,.12), rgba(0,210,255,.08)) #141414;
    }

    .main-container .row.align-items-stretch > .col-12 > .card.shadow-sm.mt-1:hover,
    .main-container .row.align-items-stretch > .col-12 > .card.shadow-sm.mt-1:focus-within {
        background: linear-gradient(180deg, rgba(108,92,231,.12), rgba(0,210,255,.08)) #141414;
    }
}


/* menu/detay işaretçi noktası: varsayılan gri, hover'da renklensin */
.menu-btn {
    position: relative;
}
    /* noktanın konumu için gerekli */

    .menu-btn::before {
        content: "";
        position: absolute;
        top: -1px;
        left: 4px;
        width: .45rem;
        height: .45rem;
        border-radius: 999px;
        background: #9aa1a9; /* başlangıç: gri/siyah ton */
        box-shadow: 0 0 0 3px rgba(0,0,0,.10); /* hafif halka */
        transition: background .18s ease, box-shadow .18s ease;
    }

    /* kart veya buton hover/odakta renkli gradyan */
    .menu-card-item:hover .menu-btn::before,
    .menu-card-item:focus-within .menu-btn::before,
    .menu-btn:hover::before,
    .menu-btn:focus::before,
    .menu-btn[aria-expanded="true"]::before {
        background: linear-gradient(90deg, var(--brand, #6c5ce7), var(--brand-2, #00d2ff));
        box-shadow: 0 0 0 3px rgba(108,92,231,.22); /* hafif renklendirilmiş halka */
    }

/* (opsiyonel) sold-out ise hep nötr kalsın */
.sold-out .menu-btn::before {
    background: #bbb;
    box-shadow: 0 0 0 3px rgba(0,0,0,.10);
}

.sold-out .menu-card-item:hover .menu-btn::before,
.sold-out .menu-btn:hover::before { /* renge geçmesin */
    background: #bbb;
    box-shadow: 0 0 0 3px rgba(0,0,0,.10);
}

/* dark mode */
@media (prefers-color-scheme: dark) {
    .menu-btn::before {
        background: rgba(255,255,255,.55);
        box-shadow: 0 0 0 3px rgba(255,255,255,.10);
    }

    .menu-card-item:hover .menu-btn::before,
    .menu-card-item:focus-within .menu-btn::before,
    .menu-btn:hover::before,
    .menu-btn:focus::before,
    .menu-btn[aria-expanded="true"]::before {
        box-shadow: 0 0 0 3px rgba(255,255,255,.22);
    }
}

/* ================================================
   ARAMA SAYFASI — ÖZET ÇUBUĞU + LİSTE KARTLARI
   (HTML'i değiştirmeden uyumlu görünüm)
================================================ */

/* Değişkenler (mevcutla aynı renk dili) */
:root {
    --brand: #6c5ce7;
    --brand-2: #00d2ff;
    --card-r: .75rem;
    --img-r: .5rem;
    --shadow: 0 10px 24px rgba(0,0,0,.12);
    --shadow-lg: 0 14px 28px rgba(0,0,0,.16);
}

/* --------------------------------
   ÜST ÖZET (bg-success bloğunu güzelleştir)
---------------------------------*/
.main-container > .position-relative.bg-success.border {
    background: #3b6686 !important;
    color: rgb(255, 255, 255);
}

    .main-container > .position-relative.bg-success.border h5 {
        font-weight: 700;
        letter-spacing: .2px;
        margin: 0;
    }

    .main-container > .position-relative.bg-success.border > span.float-end {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        padding: .25rem .6rem;
        border-radius: 999px;
        background: rgba(255,255,255,.35);
        border: 1px solid rgba(0,0,0,.06);
        font-weight: 600;
    }

/* Üstteki “Daha Fazla Göster” (loadMoreBtnTop) */
#loadMoreBtnTop {
    border-radius: 999px;
    border-color: rgba(255,255,255,.9) !important;
    color: #fff !important;
    background: linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.10));
    backdrop-filter: blur(2px);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

    #loadMoreBtnTop:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 18px rgba(0,0,0,.12);
        background: linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,.14));
    }

/* --------------------------------
   LİSTE KARTI (col-12 > .card.shadow-sm.mt-1)
   — Önceki list görünümüyle aynı tat + hover gradient
---------------------------------*/
.main-container .row > .col-12 > .card.shadow-sm.mt-1 {
    border: 1px solid rgba(0,0,0,.06);
    border-radius: var(--card-r);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease, background .2s ease;
    background: #fff;
}

    .main-container .row > .col-12 > .card.shadow-sm.mt-1:hover,
    .main-container .row > .col-12 > .card.shadow-sm.mt-1:focus-within {
        transform: translateY(-2px);
        box-shadow: var(--shadow);
        border-color: rgba(0,0,0,.10);
        /* metni boğmayan çok hafif gradient */
        background: linear-gradient(180deg, rgba(108,92,231,.05), rgba(0,210,255,.03)) #fff;
    }

    /* Görsel oranı sabit ve hafif zoom */
    .main-container .row > .col-12 > .card.shadow-sm.mt-1 figure {
        position: relative;
        width: 84px;
        min-width: 84px;
        aspect-ratio: 1/1;
        border-radius: var(--img-r);
        overflow: hidden;
        background: #f6f7f9;
    }

        .main-container .row > .col-12 > .card.shadow-sm.mt-1 figure img.lookupimg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .2s ease;
        }

    .main-container .row > .col-12 > .card.shadow-sm.mt-1:hover img.lookupimg {
        transform: scale(1.02);
    }

    /* Satır hizası & sağ fiyat sütunu genişliği */
    .main-container .row > .col-12 > .card.shadow-sm.mt-1 .row {
        align-items: center;
        gap: .35rem;
    }

    .main-container .row > .col-12 > .card.shadow-sm.mt-1 .col-auto.text-end {
        min-width: 160px;
    }

    /* Fiyat vurgusu */
    .main-container .row > .col-12 > .card.shadow-sm.mt-1 .size-24 {
        font-weight: 800;
        letter-spacing: .2px;
    }

    /* “Ekle/Detay” butonu: şık outline chip */
    .main-container .row > .col-12 > .card.shadow-sm.mt-1 .border.float-end {
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        padding: .0rem .6rem;
        background: #fff;
        color: #111;
        transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
    }

        .main-container .row > .col-12 > .card.shadow-sm.mt-1 .border.float-end:hover {
            transform: translateY(-1px);
            border-color: transparent !important;
            box-shadow: 0 8px 18px rgba(0,0,0,.12);
            background: linear-gradient(90deg, rgba(108,92,231,.10), rgba(0,210,255,.08));
        }

/* Ürün adı 3 satırda kırp */
.main-container h6.text-color-theme {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sold-out uyumu (aynı dil) */
.main-container .card.sold-out figure img.lookupimg {
    filter: grayscale(100%) opacity(.55);
}

.main-container .card.sold-out {
    position: relative;
}

    .main-container .card.sold-out::after {
        content: "sold out";
        position: absolute;
        inset: .5rem .5rem auto auto;
        padding: .15rem .5rem;
        border-radius: .35rem;
        font-size: .75rem;
        font-weight: 700;
        letter-spacing: .2px;
        background: repeating-linear-gradient( 135deg, rgba(0,0,0,.75) 0, rgba(0,0,0,.75) 8px, rgba(0,0,0,.55) 8px, rgba(0,0,0,.55) 16px );
        color: #fff;
        z-index: 2;
    }

/* Alt “Daha Fazla Göster” butonu (loadMoreBtn) */
#loadMoreBtn {
    border-radius: 999px;
    border-color: rgba(13,110,253,.35);
    background: linear-gradient(90deg, rgba(108,92,231,.08), rgba(0,210,255,.06));
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

    #loadMoreBtn:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 18px rgba(0,0,0,.12);
        background: linear-gradient(90deg, rgba(108,92,231,.12), rgba(0,210,255,.10));
    }

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .main-container > .position-relative.bg-success.border {
        background: linear-gradient(90deg, rgba(108,92,231,.22), rgba(0,210,255,.18)) !important;
        color: #fff;
        border-color: rgba(255,255,255,.12) !important;
    }

        .main-container > .position-relative.bg-success.border > span.float-end {
            background: rgba(0,0,0,.25);
            border-color: rgba(255,255,255,.18);
            color: #fff;
        }

    .main-container .row > .col-12 > .card.shadow-sm.mt-1 {
        /*background: #141414;*/
        border-color: rgba(255,255,255,.12);
    }

        .main-container .row > .col-12 > .card.shadow-sm.mt-1:hover,
        .main-container .row > .col-12 > .card.shadow-sm.mt-1:focus-within {
            box-shadow: var(--shadow-lg);
            background: linear-gradient(180deg, rgba(108,92,231,.12), rgba(0,210,255,.08)) #141414;
            border-color: rgba(255,255,255,.2);
        }

    .main-container .card.sold-out::after {
        background: repeating-linear-gradient( 135deg, rgba(255,255,255,.85) 0, rgba(255,255,255,.85) 8px, rgba(255,255,255,.65) 8px, rgba(255,255,255,.65) 16px );
        color: #000;
    }

    #loadMoreBtn {
        background: linear-gradient(90deg, rgba(108,92,231,.16), rgba(0,210,255,.12));
        border-color: rgba(255,255,255,.25);
        color: #fff;
    }

    #loadMoreBtnTop {
        border-color: rgba(255,255,255,.9) !important;
    }
}

/* Hareket azaltma */
@media (prefers-reduced-motion: reduce) {
    .main-container .row > .col-12 > .card.shadow-sm.mt-1,
    .main-container .row > .col-12 > .card.shadow-sm.mt-1 .lookupimg,
    #loadMoreBtnTop, #loadMoreBtn {
        transition: none;
        transform: none;
    }
}


/* =========================================================
   PRODUCT DETAIL (pd-*) — DIALOG, MEDIA, EXTRAS, FOOTER
   - #sidebarPanel içindeki diyalogu sayfa ortasında göster
   - Diyalog max genişlik %60 (≤60vw), max yükseklik 90vh
   - Sticky header/footer, kaydırılabilir içerik
   - Dark mode & reduced motion desteği
========================================================= */
/* =========================================================
   AJAX MODAL KAPSAYICI (#productdetayload → modal katman)
========================================================= */

/* Arka plan overlay (JS kontrol ediyor; varsa bu kalsın) */
#pageOverlayCashier {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(0,0,0,.45);
    display: none;
}

/* İçerik geldiğinde modal gibi ortaya oturt */
#productdetayload {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 24px;
    pointer-events: none;
}

    #productdetayload:empty {
        display: none !important;
    }

    #productdetayload > * {
        pointer-events: auto;
    }

/* =========================================================
   PRODUCT DETAIL (pd-*) — dialog, header, body, footer
========================================================= */

:root {
    --brand: #6c5ce7;
    --brand-2: #00d2ff;
    --pd-bg: #ffffff;
    --pd-fg: #111;
    --pd-muted: rgba(0,0,0,.6);
    --pd-border: rgba(0,0,0,.08);
    --pd-shadow: 0 24px 60px rgba(0,0,0,.18);
    --pd-radius: 2px;
}

/* Diyalog kutusu */
#productdetayload .pd-dialog {
    width: min(60vw, 980px);
    max-width: 100%;
    max-height: 90vh;
    background: var(--pd-bg);
    color: var(--pd-fg);
    border-radius: var(--pd-radius);
    box-shadow: var(--pd-shadow);
    display: grid;
    grid-template-rows: auto minmax(0,1fr) auto; /* header / main / footer */
    overflow: hidden;
    overscroll-behavior: contain;
}

/* Başlık (sticky) */
#productdetayload .pd-header {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 12px 16px;
    background: #3b6686 !important;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.18);
}

#productdetayload .btn-close-ghost {
    border: 1px solid rgba(255,255,255,.65);
    background: transparent;
    color: #fff;
    padding: 6px 10px;
    border-radius: 10px;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

    #productdetayload .btn-close-ghost:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 18px rgba(0,0,0,.25);
        background: rgba(255,255,255,.12);
    }

/* İçerik (scroll alanı) */
#productdetayload .pd-main {
    padding: 16px;
    overflow: auto;
    background: radial-gradient(1200px 200px at 10% -10%, rgba(108,92,231,.06), transparent 60%), radial-gradient(1200px 200px at 90% -10%, rgba(0,210,255,.06), transparent 60%), var(--pd-bg);
}

/* Medya alanı */
#productdetayload .pd-media {
    margin-bottom: 12px;
}

#productdetayload .pd-figure {
    position: relative;
    width: 100%;
    max-height: 320px;
    border-radius: 12px;
    overflow: hidden;
    background: #f6f7f9;
    border: 1px solid var(--pd-border);
}

#productdetayload .pd-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    max-height: 128px;
}

#productdetayload .pd-chip {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(4px);
    border: 1px solid var(--pd-border);
    border-radius: 999px;
    padding: 4px 10px;
    font-weight: 700;
    font-size: .8rem;
    color: var(--pd-fg);
}

/* Başlık/description */
#productdetayload .pd-title-wrap {
    margin: 6px 0 10px;
}

#productdetayload .pd-title {
    margin: 0;
    font-weight: 800;
    letter-spacing: .2px;
    line-height: 1.25;
}

#productdetayload .pd-desc p {
    margin: 8px 0 0;
    color: var(--pd-muted);
}

/* Ekstra/Çeşni bölüm başlığı */
#productdetayload .pd-extras {
    background: transparent;
}

#productdetayload .pd-extras-head {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

#productdetayload .pd-extras-badge {
    padding: 6px 12px;
    border-radius: 0;
    background: #a4bdcf !important;
    border: 1px solid var(--pd-border);
    letter-spacing: .2px;
    color: #000000;
}

#productdetayload .pd-extras-sub {
    font-size: .8rem;
    color: var(--pd-muted);
}

/* Ekstra grid + item */
#productdetayload .pd-extras-body .row {
    margin-top: 4px;
}

#productdetayload .pd-extra-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--pd-border);
    border-radius: 10px;
    background: #fff;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}

    #productdetayload .pd-extra-item:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 18px rgba(0,0,0,.08);
        background: linear-gradient(90deg, rgba(108,92,231,.04), rgba(0,210,255,.03)) #fff;
    }

#productdetayload .pd-extra-price {
    margin-left: auto;
}

#productdetayload .pd-extra-item .form-check-input {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
}

#productdetayload .pd-extra-label {
    margin: 0;
    cursor: pointer;
    flex: 1;
    line-height: 1.2;
}

/* :has destekliyse ebeveyni de vurgula */
#productdetayload .pd-extra-item:has(.form-check-input:checked) {
    border-color: rgba(108,92,231,.45);
    box-shadow: 0 0 0 4px rgba(108,92,231,.12);
    background: linear-gradient(90deg, rgba(108,92,231,.06), rgba(0,210,255,.05)) #fff;
}

#productdetayload .form-check-input:checked + .pd-extra-label {
    font-weight: 700;
}

/* Alt bar (sticky) */
#productdetayload .pd-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding: 12px 16px;
    background: linear-gradient(180deg, rgba(108,92,231,.08), rgba(0,210,255,.06)) #fff;
    border-top: 1px solid var(--pd-border);
}

/* Toplam alanı — rozet + tutar */
#productdetayload .pd-total {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    letter-spacing: .2px;
}

#productdetayload .pd-total-label {
    padding: .25rem .6rem;
    background: #3b6686 !important;
    border: 1px solid rgba(0,0,0,.08);
    font-size: .85rem;
    font-weight: 700;
    color: #fff;
}

#productdetayload .pd-total-amount {
    font-size: 2rem;
}

/* Sepete Ekle CTA — belirgin */
#productdetayload .pd-cta-main {
    min-width: 180px;
    padding: .6rem 1rem;
    border: 0;
    border-radius: 12px;
    letter-spacing: .3px;
    background: #3b6686 !important;
    color: #fff;
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

    #productdetayload .pd-cta-main:hover {
        transform: translateY(-1px);
        box-shadow: 0 14px 28px rgba(0,0,0,.22);
    }

    #productdetayload .pd-cta-main.disabled,
    #productdetayload .pd-cta-main:disabled {
        opacity: .6;
        cursor: not-allowed;
        box-shadow: none;
        transform: none;
    }

/* Focus görünürlüğü (erişilebilirlik) */
#productdetayload .btn:focus-visible,
#productdetayload .form-check-input:focus-visible {
    outline: none;
    box-shadow: 0 0 0 .15rem rgba(13,110,253,.35);
}

/* Success overlay (opsiyonel) */
.pd-success-overlay {
    position: fixed;
    inset: 0;
    z-index: 1070;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.5);
    padding: 16px;
}

.pd-success-card {
    position: relative;
    width: 90%;
    max-width: 420px;
    background: #fff;
    color: var(--pd-fg);
    border-radius: 14px;
    box-shadow: var(--pd-shadow);
    padding: 20px 16px 16px;
    text-align: center;
}

.pd-success-close {
    position: absolute;
    top: 8px;
    right: 8px;
}

.pd-success-icon {
    font-size: 3rem;
    color: #28a745;
}

.pd-success-title {
    margin: 10px 0;
    font-weight: 800;
}

.pd-success-actions {
    display: grid;
    gap: 10px;
    margin-top: 8px;
}

#productdetayload .dashed-line {
    border-bottom: 2px dashed rgba(0,0,0,.15);
    height: 2px;
    width: 100%;
}

/* Responsive */
@media (max-width: 992px) {
    #productdetayload .pd-dialog {
        width: 92vw;
    }

    #productdetayload .pd-figure, #productdetayload .pd-image {
        max-height: 260px;
    }
}

@media (max-width: 576px) {
    #productdetayload {
        padding: 12px;
    }

        #productdetayload .pd-dialog {
            width: 96vw;
        }

        #productdetayload .pd-figure, #productdetayload .pd-image {
            max-height: 220px;
        }

        #productdetayload .pd-cta-main {
            min-width: 140px;
        }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        --pd-bg: #141414;
        --pd-fg: #f6f6f6;
        --pd-muted: rgba(255,255,255,.7);
        --pd-border: #a4bdcf;
    }

    #productdetayload .pd-dialog {
        box-shadow: 0 24px 60px rgba(0,0,0,.6);
    }

    #productdetayload .pd-main {
        background: radial-gradient(1200px 200px at 10% -10%, rgba(108,92,231,.12), transparent 60%), radial-gradient(1200px 200px at 90% -10%, rgba(0,210,255,.10), transparent 60%), var(--pd-bg);
    }

    #productdetayload .pd-figure {
        background: #1b1b1b;
        border-color: var(--pd-border);
    }

    #productdetayload .pd-chip {
        background: rgba(20,20,20,.7);
        color: #fff;
        border-color: var(--pd-border);
    }

    #productdetayload .pd-extra-item {
        background: #1a1a1a;
        border-color: var(--pd-border);
    }

        #productdetayload .pd-extra-item:hover {
            box-shadow: 0 10px 18px rgba(0,0,0,.55);
            background: linear-gradient(90deg, rgba(108,92,231,.10), rgba(0,210,255,.08)) #1a1a1a;
        }

    #productdetayload .pd-footer {
        background: linear-gradient(180deg, rgba(108,92,231,.14), rgba(0,210,255,.10)) #141414;
        border-top-color: var(--pd-border);
    }

    .pd-success-card {
        background: #1a1a1a;
        color: #fff;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    #productdetayload .pd-dialog,
    #productdetayload .pd-extra-item {
        transition: none;
    }

        #productdetayload .pd-extra-item:hover {
            transform: none;
        }
}
/* ===== Ekstralar başlık alanı ===== */
#productdetayload .pd-extras-title {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 6px;
    position: relative;
}

    #productdetayload .pd-extras-title::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -6px;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(0,0,0,.12), transparent);
    }

#productdetayload .pd-extras-badge {
    padding: 6px 12px;
    letter-spacing: .2px;
}

/* ===== Ekstra kart (tam tıklanabilir) ===== */
#productdetayload .pd-extra-tile {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 7px;
    border: 1.5px solid var(--pd-border);
    border-radius: 12px;
    cursor: pointer;
    margin: 3px;
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
}

    /* hover */
    #productdetayload .pd-extra-tile:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 22px rgba(0,0,0,.12);
        background: linear-gradient(90deg, rgba(108,92,231,.04), rgba(0,210,255,.03)) #fff;
    }

/* içerik */
#productdetayload .pd-extra-text {
    flex: 1;
    line-height: 1.2;
}

#productdetayload .pd-extra-price {
    color: #d0342c; /* text-danger tonu */
}

/* seçili görünüm (:has destek) */
#productdetayload .pd-extra-tile:has(.product-checkbox:checked) {
    border-color: rgba(108,92,231,.75);
    box-shadow: 0 0 0 4px rgba(108,92,231,.14), 0 16px 30px rgba(0,0,0,.12);
}

    /* Sol renk şeridi (seçili) #326d99 */
    #productdetayload .pd-extra-tile:has(.product-checkbox:checked)::before {
        content: "";
        position: absolute;
        left: 0;
        top: 8px;
        bottom: 8px;
        width: 4px;
        border-radius: 4px;
        background: linear-gradient(180deg, var(--brand,#6c5ce7), var(--brand-2,#00d2ff));
    }

/* Tik işareti (seçili) */
#productdetayload .pd-extra-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,.25);
    position: relative;
    flex: 0 0 20px;
}

#productdetayload .pd-extra-tile:has(.product-checkbox:checked) .pd-extra-check {
    border-color: transparent;
    background: linear-gradient(180deg, var(--brand,#6c5ce7), var(--brand-2,#00d2ff));
}

    #productdetayload .pd-extra-tile:has(.product-checkbox:checked) .pd-extra-check::after {
        content: "";
        position: absolute;
        left: 5px;
        top: 2px;
        width: 6px;
        height: 10px;
        border-right: 2px solid #fff;
        border-bottom: 2px solid #fff;
        transform: rotate(45deg);
    }

/* :has() desteklenmeyen tarayıcılar için basit fallback */
#productdetayload .product-checkbox:checked ~ .pd-extra-text {
    font-weight: 700;
}

/* Dark mode uyumu */
@media (prefers-color-scheme: dark) {
    #productdetayload .pd-extra-tile {
        background: #1a1a1a;
        border-color: var(--pd-border);
        box-shadow: 0 2px 10px rgba(0,0,0,.35);
    }

        #productdetayload .pd-extra-tile:hover {
            box-shadow: 0 14px 24px rgba(0,0,0,.55);
            background: linear-gradient(90deg, rgba(108,92,231,.10), rgba(0,210,255,.08)) #1a1a1a;
        }

    #productdetayload .pd-extras-title::after {
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
    }
}


/* ===== Ekstralar: arama barı ===== */
#productdetayload .pd-extras-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 12px 0 38px;
    border: 1px solid var(--pd-border);
    border-radius: 10px;
    background: #fff;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.04);
    margin: 10px 0 6px;
}

    #productdetayload .pd-extras-search:focus-within {
        border-color: rgba(13,110,253,.45);
        box-shadow: 0 0 0 .15rem rgba(13,110,253,.15), inset 0 1px 2px rgba(0,0,0,.06);
    }

#productdetayload .pd-extras-search-icon {
    position: absolute;
    left: 10px;
    font-size: 1rem;
    opacity: .6;
}

#productdetayload .pd-extras-search-input {
    width: 100%;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: .98rem;
}

#productdetayload .pd-extras-clear {
    position: absolute;
    right: 8px;
    border: 0;
    background: transparent;
    padding: 4px;
    color: rgba(0,0,0,.45);
}

    #productdetayload .pd-extras-clear:hover {
        color: rgba(0,0,0,.75);
    }

/* Sonuç yok mesajı */
#productdetayload .pd-extras-noresult {
    margin-top: 6px;
    font-size: .9rem;
    color: var(--pd-muted);
    text-align: center;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    #productdetayload .pd-extras-search {
        background: #1a1a1a;
        border-color: var(--pd-border);
    }

    #productdetayload .pd-extras-search-input {
        color: #fff;
    }

    #productdetayload .pd-extras-clear {
        color: rgba(255,255,255,.6);
    }

        #productdetayload .pd-extras-clear:hover {
            color: #fff;
        }
}

.counter-number > span {
    min-width: 43px;
    display: inline-block;
    text-align: center;
    font-size: 24px;
}

.avatar.avatar-30 {
    line-height: 30px;
    height: 40px;
    width: 40px;
    margin: 5px;
}

.pd-section-navbar button.active {
    background-color: #0d6efd;
    color: white;
    border-color: #0d6efd;
}

.cart-slider-wrapper {
    overflow: hidden;
    padding: 11px;
}

.cart-slider {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

    .cart-slider::-webkit-scrollbar {
        height: 6px;
    }

    .cart-slider::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 3px;
    }

.cart-circle-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid #ccc;
    background-color: #f8f9fa;
    color: #333;
    font-weight: bold;
    font-size: 1rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s ease;
}

    .cart-circle-btn:hover {
        border-color: #0d6efd;
        background-color: #e2e6ea;
    }

    .cart-circle-btn.active {
        background-color: #3b6686;
        color: white;
        border-color: #3b698b;
    }

.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    border-color: #dee2e6 #dee2e6 #f9f9f9;
    color: var(--cat-active-fg);
    background: var(--cat-active-bg);
    transform: translateY(-1px);
}

.bg-theme-cashier {
    background: #3b6686 !important;
    color: rgb(255, 255, 255);
}

.bg-theme-cashier-light {
    background: #3b66861f !important;
    color: rgb(255, 255, 255);
}

.btn-cashier-primary {
    color: #ffffff;
    background-color: #3b6686;
    border-color: #3b6686;
}

    .btn-cashier-primary:hover {
        color: #ffffff;
        background-color: #2c5472;
        border-color: #2c5472;
    }


.btn-cashier-outline-primary {
    color: #7297f8;
    border-color: #7297f8;
}

    .btn-cashier-outline-primary:hover {
        color: #000;
        background-color: #7297f8;
        border-color: #7297f8;
    }

.btn-theme-cashier-light {
    background: #3b66861f !important;
    border-color: #212529;
}

    .btn-theme-cashier-light:hover {
        background: #3b6686 !important;
        color: #fff !important;
    }

/* Kart iskeleti */
.address-card {
    position: relative;
    display: block;
    padding: 5px 5px 5px 25px;
    border: 1px solid var(--bs-border-color);
    box-shadow: var(--bs-box-shadow-sm);
    background: linear-gradient(90deg, rgba(59, 102, 134, .025) 1px, transparent 1px), linear-gradient(0deg, rgba(59, 102, 134, .025) 1px, transparent 1px), #3b66861c;
    background-size: 10px 10px, 10px 10px, auto; /* hafif grid hissi */
}

    /* Sol renk şeridi */
    .address-card::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 6px;
        background: linear-gradient(to bottom, var(--accent), var(--accent-2));
        border-top-left-radius: .75rem;
        border-bottom-left-radius: .75rem;
    }

    /* Sabit pin ikonu */
    .address-card .pin {
        position: absolute;
        left: 5px;
        top: 4px;
        font-size: 15px;
        opacity: .9;
    }

    /* Başlık ve metin */
    .address-card .addr-title {
        line-height: 1.2;
    }

    .address-card .addr-text {
        color: var(--bs-secondary-color);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.nav-link {
    padding: 0.5rem 1rem;
    color: #3b6686;
    text-decoration: none;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.note-field {
    position: relative;
}

.note-input {
    padding-left: 25px;
    padding-right: 6.5rem; /* sağda ikonlara yer aç */
    min-height: 56px;
    resize: vertical;
}

/* Sol üstte “floating” etiket */
.note-label {
    position: absolute;
    top: .35rem;
    left: .5rem;
    opacity: .85;
    pointer-events: none;
}

/* Sağ üst ikon kümesi */
.note-actions {
    position: absolute;
    top: .25rem;
    right: 2.5rem;
    gap: .35rem;
}

/* Sağ alt sayaç */
.note-count {
    position: absolute;
    right: 0;
    bottom: .45rem;
    font-size: .75rem;
}

/* Durumlara minik görsel vurgu (opsiyonel) */
.note-field.saving .note-input {
    outline: 2px dashed rgba(0,0,0,.08);
    outline-offset: -2px;
}

.note-field.error .note-input {
    box-shadow: inset 0 0 0 1px rgba(220,53,69,.4);
}

.note-field.saved .note-input {
    box-shadow: inset 0 0 0 1px rgba(25,135,84,.35);
}

/* Disabled alan */
.note-field.is-disabled .note-actions > * {
    opacity: .5;
    pointer-events: none;
}

.cart-summary-region.compact {
    position: sticky;
    bottom: 0;
    z-index: 5;
}


.cart-summary .summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .15rem 0;
    font-size: .94rem;
}

    .cart-summary .summary-row .label {
        color: var(--bs-secondary-color, #6c757d);
    }

    .cart-summary .summary-row.total {
        font-size: 1.05rem;
    }

    .cart-summary .summary-row.grand {
        font-size: 1.15rem;
    }

.cart-summary .dashed-line {
    border-top: 1px dashed rgba(0,0,0,.12);
    margin: .25rem 0;
}

.cart-summary .alert-compact {
    padding: .35rem .5rem;
    font-size: .8rem;
    margin: .5rem 0;
}

.cart-summary .chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .15rem .5rem;
    border-radius: 999px;
    font-size: .75rem;
    line-height: 1;
    border: 1px solid transparent;
    white-space: nowrap;
}

.chip-success {
    background: #e9f7ef;
    color: #1e7e34;
    border-color: rgba(30,126,52,.2);
}

.chip-danger {
    background: #fdecea;
    color: #b02a37;
    border-color: rgba(176,42,55,.2);
}

.chip-warning {
    background: #fff4e5;
    color: #ad6800;
    border-color: rgba(173,104,0,.2);
}

.chip-muted {
    background: #f1f3f5;
    color: #495057;
    border-color: rgba(0,0,0,.06);
}

.summary-meta {
    font-size: .78rem;
    color: var(--bs-secondary-color, #6c757d);
}

.summary-actions .btn {
    padding: .5rem .5rem;
}

    .summary-actions .btn i {
        font-size: 1.2rem;
    }

@media (min-width: 576px) {
    .cart-summary .summary-row.grand {
        font-size: 1.25rem;
    }
}


/* YELMER category grid (touch friendly) */
.yl-cat {
    --yl-cat-area-h: 360px; /* alan yüksekliği */
    --yl-cat-gap: .75rem; /* grid boşluğu */
    --yl-cat-btn-h: 84px; /* buton yüksekliği */
    --yl-cat-font: 1.075rem; /* yazı boyutu */
    --yl-cat-radius: 1rem; /* köşe yumuşaklığı */
}

    .yl-cat .yl-cat-grid-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .yl-cat .yl-cat-grid {
        display: grid;
        grid-template-columns: repeat(6, minmax(0,1fr)); /* geniş ekranda 6 sütun */
        gap: var(--yl-cat-gap);
        width: 100%;
        max-width: 1400px;
    }

    .yl-cat .yl-cat-button {
        display: flex;
        align-items: center;
        justify-content: center;
        height: var(--yl-cat-btn-h);
        padding: 3.75rem 1rem;
        font-size: var(--yl-cat-font);
        font-weight: 700;
        line-height: 1.2;
        border: 1px solid #3b6686b5;
        border-radius: var(--yl-cat-radius);
        background: #fff;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        transition: transform .08s ease, box-shadow .15s ease, background-color .15s ease;
    }

        .yl-cat .yl-cat-button:hover,
        .yl-cat .yl-cat-button:focus {
            transform: translateY(-1px);
            box-shadow: 0 6px 18px rgba(0,0,0,.06);
            text-decoration: none;
        }

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

/* Responsive (isteğe bağlı) */
@media (max-width: 991.98px) {
    .yl-cat {
        --yl-cat-area-h: 420px;
        --yl-cat-btn-h: 96px;
        --yl-cat-font: 1.15rem;
    }

        .yl-cat .yl-cat-grid {
            grid-template-columns: repeat(3, 1fr);
        }
    /* tablet */
}

@media (max-width: 575.98px) {
    .yl-cat {
        --yl-cat-area-h: auto;
    }
        /* mobilde yükseklik sıkmasın */
        .yl-cat .yl-cat-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    /* mobil */
}

/* yl-cat: başlık stili */
.yl-cat .yl-cat-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: .25rem 0 1rem;
    margin-top: 3em;
}

.yl-cat .yl-cat-title {
    margin: 0;
    font-weight: 800;
    line-height: 1.2;
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem);
    max-width: min(75ch, 92%);
    word-wrap: break-word;
}

.yl-cat .yl-cat-title-underline {
    margin-top: .4rem;
    height: 4px;
    width: 120px;
    max-width: 36%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(0,0,0,.08), rgba(0,0,0,.35), rgba(0,0,0,.08));
}

@media (max-width: 575.98px) {
    .yl-cat .yl-cat-title {
        font-size: clamp(1.25rem, 4.5vw, 1.75rem);
    }

    .yl-cat .yl-cat-title-underline {
        height: 3px;
    }
}

.btn-outline-secondary:disabled, .btn-outline-secondary.disabled {
    color: #c4c4c4;
    background-color: transparent;
}

.cash-hdr .cash-hdr__section {
    display: grid;
    grid-template-columns: auto 2fr 3.5fr;
    align-items: center;
    gap: .5rem;
    min-height: 68px;
}

.cash-hdr .cash-hdr__left, .cash-hdr .cash-hdr__right {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.cash-hdr .cash-hdr__center {
    min-width: 0; /* taşma kontrolü için kritik */
    display: flex;
    align-items: center;
    gap: .5rem;
}

    .cash-hdr .cash-hdr__center > * {
        flex: 1 1 auto;
        min-width: 0;
    }
/* Başlık */

.cash-hdr .cash-hdr__title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* =========================
   KDS — CONSOLIDATED STYLES
   ========================= */
/* ===== Header & Toolbar ===== */
.kds-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem;
    border-bottom: 1px solid var(--bs-border-color,#e9ecef);
}

.kds-header__left, .kds-header__right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    white-space: nowrap;
}

.kds-header__center {
    flex: 1 1 auto;
    min-width: 240px;
    display: flex;
    align-items: center;
}

.kds-header__logo img {
    display: block;
    max-height: 32px;
}

.kds-header__title {
    font-weight: 600;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kds-toolbar {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .25rem .5rem;
    border-radius: .5rem;
    border: 1px solid var(--bs-border-color,#e9ecef);
    justify-content: center;
    flex-wrap: wrap;
}

.kds-toolbar__sep {
    width: 1px;
    height: 24px;
    background: var(--bs-border-color,#e9ecef);
    margin: 0 .25rem;
}

.kds-toolbar__controls {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.kds-toolbar__spacer {
    margin-left: auto;
}

/* Highlight active buttons in icon groups */
#kdsColsGroup .btn.active, #kdsIntervalGroup .btn.active {
    color: #fff;
    background-color: #343a40;
    border-color: #343a40;
}

/* Small network status dots (request/response) */
.yl-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ced4da;
    margin-left: 6px;
    vertical-align: middle;
    box-shadow: 0 0 0 1px rgba(0,0,0,.05) inset;
}

    .yl-dot.is-on {
        background: #16a34a;
    }
/* green */

/* ===== Grid ===== */
.kds-grid {
    display: grid;
    grid-template-columns: repeat(var(--cols,8), minmax(0,1fr));
    gap: .75rem;
    align-items: start;
}

.kds-grid-item {
    display: block;
}

/* ===== Card (order) ===== */
.yl-kds-card {
    border-radius: 14px;
    border: 5px solid transparent;
    transition: border-color .2s, box-shadow .2s;
    background: #fff;
}

/* Card type accents */
.yl-type-delivery {
    border-color: #b7ebc6;
    box-shadow: 0 0 0 2px rgba(40,167,69,.08) inset;
}

.yl-type-pickup {
    border-color: #b3e5fc;
    box-shadow: 0 0 0 2px rgba(13,110,253,.06) inset;
}

.yl-type-dinein {
    border-color: #d7c5ff;
    box-shadow: 0 0 0 2px rgba(111,66,193,.06) inset;
}

.yl-type-neutral {
    border-color: #e9ecef;
    box-shadow: 0 0 0 2px rgba(0,0,0,.03) inset;
}

/* Card type accents */
.yl-bg-type-delivery {
    background-color: #b7ebc6;
}

.yl-bg-type-pickup {
    background-color: #b3e5fc;
}

.yl-bg-type-dinein {
    background-color: #d7c5ff;
}

.yl-bg-type-neutral {
    background-color: #e9ecef;
}

/* ---- Tip rozetleri ---- */
.yl-type-chip {
    border: 1px solid transparent;
    border-radius: 9999px;
    padding: 2px 8px;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.yl-type-chip--delivery {
    background: #dff5e6;
    border-color: #b7ebc6;
    color: #146c43;
}

.yl-type-chip--pickup {
    background: #e6f2ff;
    border-color: #b3e5fc;
    color: #0b5ed7;
}

.yl-type-chip--dinein {
    background: #efe6ff;
    border-color: #d7c5ff;
    color: #6f42c1;
}

.yl-type-chip--neutral {
    background: #f1f3f5;
    border-color: #e9ecef;
    color: #495057;
}

/* ---- Kartların tip şeridi (sol dikey çizgi) ---- */
.yl-kds-card {
    position: relative;
}

  /*  .yl-kds-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        border-radius: 4px 0 0 4px;
        background: var(--kds-type-accent, #adb5bd);
    }*/

    .yl-kds-card.yl-type-delivery {
        --kds-type-accent: #28a745;
    }

    .yl-kds-card.yl-type-pickup {
        --kds-type-accent: #0d6efd;
    }

    .yl-kds-card.yl-type-dinein {
        --kds-type-accent: #6f42c1;
    }

    .yl-kds-card.yl-type-neutral {
        --kds-type-accent: #adb5bd;
    }

/* Legend swatch’ları tip rengine boyansın */
.yl-legend-swatch.yl-bg-type-delivery {
    background: #b7ebc6;
}

.yl-legend-swatch.yl-bg-type-pickup {
    background: #b3e5fc;
}

.yl-legend-swatch.yl-bg-type-dinein {
    background: #d7c5ff;
}

.yl-legend-swatch.yl-bg-type-neutral {
    background: #e9ecef;
}


/* Due-time chip & generic chip */
.yl-kds-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .20rem;
    border-radius: 999px;
    color: #6c757d;
    font-size: .8rem;
    border: 1px solid #edf0f3;
    justify-content:center;
}

.yl-kds-chip-time {
    background: #fff7e6;
    color: #b76e00;
    border-color: #ffe2a8;
}

/* Progress */
.yl-kds-progress {
    margin: 0 3px;
    height: 6px;
    background: #eef1f4;
}

    .yl-kds-progress .progress-bar {
        background: #198754;
    }

/* ===== Line items ===== */
.yl-kds-items {
    margin: 0 3px;
    padding: 0;
    list-style: none;
}

.yl-kds-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    border-radius: 14px;
    margin: .6rem .1rem;
    padding: .1rem;
    cursor: pointer;
    user-select: none;
    outline: none;
    border: 3px dashed #3b66869e;
    transition: transform .1s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, opacity .15s ease;
}

    .yl-kds-item:focus {
        box-shadow: 0 0 0 2px rgba(13,110,253,.15);
    }

.yl-kds-line {
    align-items: flex-start;
    margin: 8px;
    justify-content: space-between;
}

.yl-kds-name {
    font-weight: 600;
    font-size: 18px;
    line-height: 21px;
}

.yl-kds-qty {
    font-weight: 600;
    min-width: 2.5rem;
    text-align: right;
}

.yl-kds-index {
    font-size: .75rem;
    line-height: 1;
    padding: .25rem .45rem;
    border-radius: 999px;
    background: #f1f3f5;
    color: #6c757d;
}

.yl-state-dot {
    place-items: center;
    border-radius: 999px;
}

/* Full-row states */
.yl-state-pending {
    color: #343a40;
}

.yl-state-preparing {
    background: #fff3cd82;
    color: #8a6c00;
}

.yl-state-ready {
    background: #d1f5e080;
    color: #0f5132;
}

.yl-state-canceled {
    background: #ffe1e1;
    color: #842029;
}

/* Child modifiers list */
.yl-kds-children {
    padding: 0 .25rem .16rem .25rem;
}

    .yl-kds-children .text-success,
    .yl-kds-children .text-danger {
    }

/* Toggleable action bar (opens on click) */
.yl-line-actions {
    display: none;
    gap: 1rem;
    padding: .6rem .75rem .8rem .75rem;
    border-top: 1px dashed rgba(0,0,0,.12);
    background: rgb(241 243 245);
    backdrop-filter: saturate(1.2);
}

.yl-kds-item.is-open .yl-line-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* Action buttons */
.yl-act {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,.08);
    background: #fff;
    font-size: .85rem;
}

    .yl-act i {
        font-size: 1.5rem;
    }

.yl-act-start {
    background: #e7f1ff;
}
/* play */
.yl-act-ready {
    background: #e8f5ee;
}
/* check */
.yl-act-cancel {
    background: #fde7ea;
}
/* x */

/* Busy overlay while posting */
.yl-line-busy {
    position: absolute;
    inset: 0;
    display: none;
    background: rgba(255,255,255,.6);
    backdrop-filter: saturate(120%) blur(1px);
    border-radius: 12px;
    align-items: center;
    justify-content: center;
}

.yl-kds-item.is-busy {
    pointer-events: none;
    opacity: .85;
}

    .yl-kds-item.is-busy .yl-line-busy {
        display: flex;
    }

/* ===== Urgency tints on card (JS adds) ===== */
.yl-urgency-warn {
    border-color: #ffd89e !important;
}

.yl-urgency-danger {
    border-color: #ffb3b3 !important;
}

/* ===== Responsive tweaks ===== */
@media (max-width:576px) {
    .kds-header {
        flex-wrap: wrap;
    }

    .kds-header__center {
        order: 3;
        width: 100%;
    }

    .kds-header__right {
        margin-left: auto;
    }

    .kds-header__title {
        max-width: 18ch;
    }

    .kds-toolbar {
        flex-wrap: wrap;
    }
}

/* Açıklama: 2 satır clamp + tıkla/aç */
.yl-kds-desc {
    position: relative;
    background: #fff;
    border-radius: 8px;
    /* not: .border .shadow sınıfları bootstrap’ten */
}
    /* 2 satırda kes */
    .yl-kds-desc.clamp-2 {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    /* Uzunsa (JS ile eklenir) cursor + fade overlay */
    .yl-kds-desc.is-clamped {
        cursor: pointer;
    }

        .yl-kds-desc.is-clamped::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 2.2em;
            /* Arkaplan beyazsa aşağıdaki iyi; farklı renk kullanıyorsanız güncelleyin */
            background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
            pointer-events: none;
        }
    /* Açılmış hali */
    .yl-kds-desc.is-expanded {
        -webkit-line-clamp: initial;
        display: block;
        max-height: none;
    }


/* ===== Legend (sağ-alt) ===== */
.yl-legend {
    position: fixed;
    right: 14px;
    bottom: 14px;
    width: 260px;
    max-width: calc(100vw - 24px);
    background: #fff;
    border: 1px solid var(--bs-border-color,#e9ecef);
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(0,0,0,.12);
    z-index: 1060;
    padding: .6rem .7rem;
    font-size: .92rem;
}

.yl-legend__hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .35rem;
}

.yl-legend__sec {
    margin-top: .4rem;
}

.yl-legend__ttl {
    font-size: .8rem;
    font-weight: 700;
    color: #6c757d;
    margin: .25rem 0 .3rem;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.yl-legend__row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .22rem 0;
}

/* satır durum örnekleri: mevcut .yl-state-* renklerini küçük yongalara uygula */
.yl-legend-swatch {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,.06);
    font-size: 14px;
}

/* tip ikonları */
.yl-legend-ico {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #f1f3f5;
    color: #495057;
    font-size: 14px;
    border: 1px solid rgba(0,0,0,.06);
}

/* floating toggle button */
.yl-legend-fab {
    position: fixed;
    right: 14px;
    bottom: 14px;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 0;
    background: #0d6efd;
    color: #fff;
    display: inline-grid;
    place-items: center;
    box-shadow: 0 6px 18px rgba(13,110,253,.35);
    z-index: 1059;
    cursor: pointer;
}

    .yl-legend-fab:hover {
        filter: brightness(.95);
    }


/* Unit şerit 2 kolon grid */
.yl-unit-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .25rem;
}

/* Satır ilerleme chip'i tüm genişliği kaplasın */
.yl-progress-chip {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    padding: .25rem .5rem;
    border-radius: .5rem;
    font-weight: 600;
    background: var(--bs-secondary-bg, #f2f2f2);
    color: var(--bs-secondary-color, #555);
}

/* Unit chip ortak stil */
.yl-unit-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .25rem .5rem;
    border-radius: .5rem;
    font-weight: 600;
    min-height: 32px;
}

/* Durum renkleri */
.yl-unit-pending {
    background: #f2f2f6;
    color: #555;
}

.yl-unit-preparing {
    background: #fff6d6;
    color: #8a6d00;
}

.yl-unit-ready {
    background: #e9f8ee;
    color: #1a7f3b;
}

.yl-unit-canceled {
    background: #fde8e8;
    color: #a12a2a;
    text-decoration: line-through;
}

/* Çip içi yazdırma butonu */
.yl-unit-print {
    line-height: 1;
    vertical-align: middle;
}

.yl-unit-ready .yl-unit-print i {
    opacity: .9;
}

.yl-unit-ready .yl-unit-print:hover i {
    opacity: 1;
}

/* Küçük metinler */
.yl-unit-label, .yl-progress-label {
    font-variant-numeric: tabular-nums;
}
.yl-unit-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

.yl-unit-chip {
    padding: 2px 1px;
}

.yl-unit-pending {
    background: #e9ecef;
    color: #212529
}

.yl-unit-preparing {
    background: #ffe08a;
    color: #212529
}

.yl-unit-ready {
    background: #8de4a2;
    color: #0b3d1d
}

.yl-unit-canceled {
    background: #f7b1b1;
    color: #6b1111;
    text-decoration: line-through
}

/* Son 20 dk → kırmızımsı arka plan */
.yl-kds-card.yl-urgency-critical {
    background: #ffe6e6; /* yumuşak kırmızı */
    outline: 2px solid #dc3545; /* kırmızı çerçeve */
}

/* Süresi geçmiş → daha belirgin kırmızı */
.yl-kds-card.yl-urgency-danger {
    background: #ffd6d6;
    outline: 2px solid #c82333;
}

/* (Opsiyonel) 10dk uyarı → amber */
.yl-kds-card.yl-urgency-warn {
    background: #fff4d6; /* amber */
    outline: 2px solid #ffc107;
}

/* (Opsiyonel) Son 5 dk’da hafif pulse animasyonu */
@keyframes kdsPulseRed {
    0% {
        box-shadow: 0 0 0 0 rgba(220,53,69,.35) inset;
    }

    100% {
        box-shadow: 0 0 0 14px rgba(220,53,69,0) inset;
    }
}

.yl-kds-card.yl-urgency-critical[data-due]:not(.yl-urgency-danger)[data-due] {
    /* istersen tüm critical'da pulse aç */
    /* animation: kdsPulseRed 1.5s ease-out infinite; */
}


/* Son 20 dk: yumuşak kırmızı arka plan + çerçeve */
.yl-kds-card.yl-urgency-critical {
    background: #ffe6e6; /* subtle kırmızı */
    outline: 2px solid #dc3545; /* kırmızı kenar */
    position: relative; /* pseudo element için */
}

    /* İnce pulse efekti (yalnızca critical) */
    .yl-kds-card.yl-urgency-critical::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        /* başlangıç iç ışıma (çok hafif) */
        box-shadow: inset 0 0 0 0 rgba(220, 53, 69, 0.22);
        animation: kdsPulseCritical 2.4s ease-in-out infinite;
        will-change: box-shadow;
        z-index: 0;
    }

/* Süresi geçmiş (danger) veya warn'da pulse yok */
.yl-kds-card.yl-urgency-danger::after,
.yl-kds-card.yl-urgency-warn::after {
    animation: none;
}

/* Pulse keyframes — çok ince genleşip sönsün */
@keyframes kdsPulseCritical {
    0% {
        box-shadow: inset 0 0 0 0 rgba(220, 53, 69, 0.22);
    }

    50% {
        box-shadow: inset 0 0 0 10px rgba(220, 53, 69, 0.06);
    }

    100% {
        box-shadow: inset 0 0 0 0 rgba(220, 53, 69, 0.22);
    }
}

/* Erişilebilirlik: hareket tercihine saygı göster */
@media (prefers-reduced-motion: reduce) {
    .yl-kds-card.yl-urgency-critical::after {
        animation: none !important;
    }
}


.yl-unit-print.is-printing {
    outline: 2px solid rgba(0,0,0,.25);
    transition: outline-color .5s ease;
}


/* Avatar çipi */
.customer-avatar {
    width: 44px;
    height: 44px;
    background: #f3f4f6;
    color: #374151;
    font-weight: 700;
}

/* Kartın nefes alması */
.customer-card .font-monospace {
    letter-spacing: .2px;
}

.order-type-btn {
    min-width: 7rem;
    border-radius: 5px !important;
}

/* KAPSAYICI: 3 bölgeli dikey düzen */
.cart-shell {
    display: flex;
    flex-direction: column;
    /* Yüksekliği, ekran ya da kolon yüksekliğine göre ayarlamak için: */
    height: 100%;
    max-height: 100vh;
    overflow: hidden; /* Orta alan taşmasını engelle, scroll'ı sadece orta alana bırak */
}

/* ÜST ve ALT sabit bölgeler */
.cart-header-region,
.cart-summary-region {
    flex: 0 0 auto; /* sabit yükseklik; içerik kadar */
    z-index: 2; /* orta bölgedeki içerik üstüne çıkmasın */
}

/* ORTA: sadece burası scroll olur */
.cart-body-region {
    flex: 1 1 auto; /* kalan alanı kapla */
    overflow: auto; /* gerekirse dikey kaydırma */
    -webkit-overflow-scrolling: touch; /* iOS akıcı scroll */
    background: #fff;
}

/* İsteğe bağlı: alt özet yukarıdan ayrışsın */
.cart-summary-region {
    box-shadow: 0 -1px 0 rgba(0,0,0,.06);
}

/* Kart satırları iç scroll'a uyumlu olsun */
.cart-body-region .cart-items {
    margin: 0;
}


.cart-line {
    padding: .25rem .25rem .5rem .25rem;
}

    .cart-line:hover {
        background: #f8f9fa;
        cursor: pointer;
    }

    .cart-line:focus {
        outline: 2px solid rgba(13,110,253,.25);
    }

.cart-line-actions {
    border: 1px dashed #dee2e6;
    border-radius: .5rem;
    background: #fff;
}

.cart-line-head .bi-chevron-down {
    transition: transform .15s ease;
}

.cart-line[aria-expanded="true"] .bi-chevron-down {
    transform: rotate(180deg);
}

[data-cart-locked="true"] .cart-line {
    cursor: default;
}

    [data-cart-locked="true"] .cart-line:hover {
        background: initial;
    }

/* order-type butonlarınız için (varsa) */
.order-type-bar .order-type-tabs .d-flex {
    justify-content: center; /* ortala */
    gap: .5rem;
}

.customer-chip {
    display: inline-flex;
    align-items: center;
    padding: .35rem .6rem;
    border: 1px solid #dee2e6;
    border-radius: 999px;
    background: #fff;
    font-weight: 500;
}

.order-type-bar {
    padding: .25rem .5rem;
}

.order-type-item {
    position: relative;
}

.order-type-radio {
    display: none;
}

.order-type-label {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem;
    border: 1px solid #dee2e6;
    border-radius: .75rem;
    background: #fff;
    color: #212529;
    cursor: pointer;
    user-select: none;
    transition: all .15s ease-in-out;
    font-weight: 500;
}

    .order-type-label i {
        font-size: 1rem;
    }

.order-type-radio:checked + .order-type-label {
    border-color: #0d6efd;
    color: #0d6efd;
    background: #e7f1ff;
    box-shadow: 0 0 0 2px rgba(13,110,253,.12) inset;
}

.order-type-radio:disabled + .order-type-label {
    opacity: .6;
    cursor: not-allowed;
}

.order-type-label:hover {
    border-color: #b6d1ff;
    background: #f3f8ff;
}


#timeSlotModal .card.delivery-option {
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
}

    #timeSlotModal .card.delivery-option:hover {
        transform: scale(1.02);
        box-shadow: 0 4px 10px rgba(0,0,0,.12);
    }

    #timeSlotModal .card.delivery-option.active {
        outline: 2px solid var(--bs-primary);
    }

.list-group-item.active {
    z-index: 2;
    color: #000000;
    background-color: #d0dfea;
    border-color: #ffffff;
}
#csw-stepper .badge {
    min-width: 24px;
    text-align: center;
}

#csw-stepper li[aria-disabled="true"] {
    opacity: .55;
    pointer-events: none;
}
/* — Sadece bu modal + stepper içinde uygula — */
#customerSelectionModal #csw-stepper .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 .55rem;
    font-weight: 600;
    border: 1px solid var(--csw-badge-border, rgba(0,0,0,.12));
    box-shadow: 0 1px 0 rgba(0,0,0,.04) inset;
    line-height: 1;
}

/* aktif adım rozeti */
#customerSelectionModal #csw-stepper li[aria-current="step"] .badge {
    border-color: var(--csw-badge-active-border, rgba(13,110,253,.35));
}

/* pasif/disabled adım */
#customerSelectionModal #csw-stepper li[aria-disabled="true"] {
    opacity: .55;
    pointer-events: none;
}

/* isteğe bağlı: yazı ve boşluklar */
#customerSelectionModal #csw-stepper li {
    gap: .4rem;
    font-size: .95rem;
}

/* renk varyantlarını sadece bu alan için yeniden tanımla */
#customerSelectionModal #csw-stepper .badge.text-bg-secondary {
    background-color: var(--csw-badge-muted-bg, #f3f4f6) !important;
    color: var(--csw-badge-muted-fg, #374151) !important;
    border-color: var(--csw-badge-muted-border, #e5e7eb) !important;
}

#customerSelectionModal #csw-stepper .badge.text-bg-primary {
    background-color: var(--csw-badge-primary-bg, #0d6efd) !important;
    color: #fff !important;
    border-color: var(--csw-badge-primary-border, #0b5ed7) !important;
}



/* ---- Sütun genişlikleri ---- */
.orderlist-table .col-id {
    width: 90px;
}

.orderlist-table .col-date {
    width: 140px;
}

.orderlist-table .col-amount {
    width: 150px;
}

.ind-cell {
    white-space: nowrap;
    vertical-align: middle;
}

/* Chips */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    font-size: .78rem;
    line-height: 1.1rem;
    max-width: 100%;
}

    .chip .chip-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .chip.placeholder {
        visibility: hidden;
    }

/* Ghost badge hizayı korur */
.badge.ghost {
    visibility: hidden;
}

/* Icon pills */
.indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #f6f7f9;
    border: 1px solid #e5e7eb;
    cursor: pointer;
}

    .indicator i {
        font-size: 1rem;
    }

    .indicator:hover {
        background: #eef1f5;
    }

    .indicator.placeholder {
        visibility: hidden;
    }

/* Status Filters → Columns-like neutral outline */
#kdsStatusGroup .kds-status-btn {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    gap: .35rem;
    font-weight: 500;
}

    /* Soldaki check ikonu sabit alan; metin sıçramasın */
    #kdsStatusGroup .kds-status-btn .sel {
        display: inline-flex;
        width: 1em;
        margin-right: .1rem;
        opacity: 0;
        transition: opacity .15s;
    }

/* Seçiliyken check ikonunu göster */
#kdsStatusGroup .btn-check:checked + .kds-status-btn .sel {
    opacity: .9;
}

/* İsteğe bağlı: seçiliyken çok hafif iç gölge */
#kdsStatusGroup .btn-check:checked + .kds-status-btn {
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}


/* === KDS: türüne göre çerçeve/başlık ayrımı (data-order-type) ===
   1: Delivery, 2: Pickup, 4: In Store, diğerleri: Unknown
   Markup zaten: <div class="yl-kds-card" data-order-type="..."> ... </div>
*/

/* Renk sabitleri (Bootstrap tonlarıyla uyumlu) */
:root {
    --kds-acc-delivery: #0d6efd; /* primary  */
    --kds-acc-pickup: #198754; /* success  */
    --kds-acc-instore: #6c757d; /* secondary*/
    --kds-acc-unknown: #adb5bd; /* gray-500 */
}

/* 1) Kart çerçevesi: sol şeritte ince vurgu */
.yl-kds-card {
    border: 3px solid transparent;
}

    .yl-kds-card[data-order-type="1"] {
        border-color: var(--kds-acc-delivery);
    }

    .yl-kds-card[data-order-type="2"] {
        border-color: var(--kds-acc-pickup);
    }

    .yl-kds-card[data-order-type="4"] {
        border-color: var(--kds-acc-instore);
    }
    /* bilinmeyen/boş */
    .yl-kds-card:not([data-order-type]),
    .yl-kds-card[data-order-type=""],
    .yl-kds-card[data-order-type]:not([data-order-type="1"]):not([data-order-type="2"]):not([data-order-type="4"]) {
        border-color: var(--kds-acc-unknown);
    }

    /* 2) Başlık bandı: sol kenarda aynı vurgu + çok hafif arka plan tonu */
    .yl-kds-card .yl-type-band {
        border: 3px solid transparent;
        background-color: var(--bs-body-bg);
    }

    .yl-kds-card[data-order-type="1"] .yl-type-band {
        border-color: var(--kds-acc-delivery);
        background-color: rgba(13,110,253,.04);
    }

    .yl-kds-card[data-order-type="2"] .yl-type-band {
        border-color: var(--kds-acc-pickup);
        background-color: rgba(25,135,84,.045);
    }

    .yl-kds-card[data-order-type="4"] .yl-type-band {
        border-color: var(--kds-acc-instore);
        background-color: rgba(108,117,125,.05);
    }

    .yl-kds-card:not([data-order-type]) .yl-type-band,
    .yl-kds-card[data-order-type=""] .yl-type-band,
    .yl-kds-card[data-order-type]:not([data-order-type="1"]):not([data-order-type="2"]):not([data-order-type="4"]) .yl-type-band {
        border-color: var(--kds-acc-unknown);
        background-color: rgba(173,181,189,.05);
    }

/* 3) Tür chip’i (ikon+metin) için minik vurgu — metni renklendirmez, sadece ikon */
.yl-type-chip i.bi {
    filter: opacity(.9);
}

.yl-kds-card[data-order-type="1"] .yl-type-chip i.bi {
    color: var(--kds-acc-delivery);
}

.yl-kds-card[data-order-type="2"] .yl-type-chip i.bi {
    color: var(--kds-acc-pickup);
}

.yl-kds-card[data-order-type="4"] .yl-type-chip i.bi {
    color: var(--kds-acc-instore);
}

.yl-kds-card:not([data-order-type]) .yl-type-chip i.bi,
.yl-kds-card[data-order-type=""] .yl-type-chip i.bi,
.yl-kds-card[data-order-type]:not([data-order-type="1"]):not([data-order-type="2"]):not([data-order-type="4"]) .yl-type-chip i.bi {
    color: var(--kds-acc-unknown);
}


:root {
    --yl-danger: var(--bs-danger, #dc3545);
    --yl-danger-rgb: var(--bs-danger-rgb, 220, 53, 69);
    --yl-danger-bg-subtle: var(--bs-danger-bg-subtle, #fff1f2);
    --yl-danger-border-subtle: var(--bs-danger-border-subtle, #ffd6da);
    --yl-body-bg: var(--bs-body-bg, #ffffff);
    --yl-border-color: var(--bs-border-color, #dee2e6);
    --yl-muted-bg: var(--bs-secondary-bg-subtle, #f8f9fa);
    --yl-muted-border: var(--bs-secondary-border-subtle, #eceff1);
}

/* ---------------- Aktif olmayan satır (genel) ---------------- */
.yl-kds-item.is-inactive {
    position: relative;
    background: var(--yl-muted-bg);
    border: 1px solid var(--yl-muted-border);
    border-left: 4px solid var(--yl-border-color);
    border-radius: .5rem;
    transition: opacity .2s ease, filter .2s ease, background-color .2s ease;
    opacity: .8;
    filter: grayscale(.08) contrast(.98);
}

    /* Satır içindeki tüm interaktif elemanları kilitle */
    .yl-kds-item.is-inactive .yl-unit-chip,
    .yl-kds-item.is-inactive [data-kds-action],
    .yl-kds-item.is-inactive [role="button"],
    .yl-kds-item.is-inactive .btn,
    .yl-kds-item.is-inactive [tabindex] {
        pointer-events: none !important;
        cursor: not-allowed !important;
        opacity: .75;
    }

/* ---------------- Silinmiş / İptal satır (status==90) ---------------- */
.yl-kds-item.is-removed {
    opacity: .72;
    filter: grayscale(.15) contrast(.97);
    border-color: var(--yl-danger-border-subtle);
    background-image: linear-gradient(135deg, rgba(var(--yl-danger-rgb), .06) 25%, transparent 25%, transparent 50%, rgba(var(--yl-danger-rgb), .06) 50%, rgba(var(--yl-danger-rgb), .06) 75%, transparent 75%, transparent);
    background-size: 12px 12px;
    background-color: var(--yl-danger-bg-subtle);
    border-left: 4px solid var(--yl-danger);
}

    /* Ürün adını çiz ve yumuşat */
    .yl-kds-item.is-removed .yl-kds-name {
        text-decoration: line-through;
        text-decoration-thickness: 2px;
        text-decoration-color: rgba(var(--yl-danger-rgb), .6);
        opacity: .85;
    }

    /* Sağ üst küçük rozet */
    .yl-kds-item.is-removed::after {
        content: "Removed";
        position: absolute;
        top: .35rem;
        right: .5rem;
        font-size: .72rem;
        font-weight: 600;
        color: var(--yl-danger);
        background: color-mix(in srgb, var(--yl-danger-bg-subtle) 92%, white 8%);
        border: 1px solid var(--yl-danger-border-subtle);
        padding: .05rem .4rem;
        border-radius: .35rem;
        line-height: 1.2;
        pointer-events: none;
    }

/* Hover'da minik geri bildirim (sadece görsel) */
.yl-kds-item.is-inactive:hover {
    opacity: .85;
    filter: grayscale(.05) contrast(.99);
}

.yl-kds-item.is-removed:hover {
    opacity: .80;
    filter: grayscale(.07) contrast(.99);
}

/* Panel kutusu */
.suggest-item {
    cursor: pointer;
}

.suggest-actions button {
    cursor: default;
}
/* butonlar normal kalsın */
.search-suggest-panel {
    position: absolute;
    z-index: 99999;
    width: min(680px, 100%);
    max-height: 600px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: .5rem;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
    margin-top: 6px;
    padding: 8px 8px 0px 8px;
    right: 0;
    top: 70px;
}

/* Her sonuç satırı: sol görsel, orta metin, sağ butonlar */
.suggest-item {
    display: grid;
    grid-template-columns: 60px 1fr 92px;
    gap: 10px;
    align-items: start;
    padding: 8px;
    border-radius: .5rem;
    border: 1px dashed;
}

    .suggest-item + .suggest-item {
        margin-top: 6px;
    }

    .suggest-item:hover {
        background: #f8f9fa;
    }

/* Sol görsel */
.suggest-thumb {
    width: 60px;
    border-radius: .5rem;
    background: #f1f3f5;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .suggest-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* Orta metin alanı */
.suggest-body {
    min-width: 0;
}
/* metin kırpma */
.suggest-title {
    font-weight: 600;
    line-height: 1.15;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.suggest-meta2 {
    margin-top: 4px;
    font-size: .825rem;
    color: #6c757d;
}

.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* Sağ dikey butonlar */
.suggest-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
    justify-content: flex-end;
}

    .suggest-actions .btn {
        width: 100%;
    }

/* Sticky footer (panel içinde hep görünsün) */
.suggest-footer {
    position: sticky;
    bottom: 0;
    background: #3b6686;
    padding: 10px 8px;
    margin: 8px -8px -8px -8px;
    border-top: 1px solid rgba(0, 0, 0, .08);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #ffffff;
}

.suggest-empty {
    padding: 16px;
    text-align: center;
    color: #6c757d;
}
.search-suggest-panel .suggest-banner {
    padding: 6px 10px;
    margin: 4px 0 6px;
    border-radius: 6px;
    background: rgba(255, 235, 59, .15); /* sarımsı */
    font-size: .9rem;
    font-weight: 500;
}
.btn-search-toggle.active {
    background-color: #e0eaff;
    border-color: #6ea8fe;
}

.f2-label {
    position: absolute;
    top: -10px;
    right: -4px;
    font-size: 0.55rem;
    background-color: #f1f1f1;
    color: #555;
    padding: 2px 4px;
    border-radius: 3px;
    border: 1px solid #ccc;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    font-weight: bold;
}

/* her zaman görünür */
#searchFormWrapper,
#searchFormWrapperbtn {
    display: block !important;
}
.search-suggest-panel .suggest-hint {
    padding: 4px 8px;
    margin: 0 0 6px;
    font-size: .85rem;
    color: #9aa0a6;
}

    .search-suggest-panel .suggest-hint a {
        color: #791111;
        text-decoration: underline;
        font-size: 18px;
    }


/* Buton temel yerleşim */
.yl-cat-button {
    position: relative;
    display: inline-flex;
    align-items: flex-end; /* etiket alt çizgiye yakın dursun */
    justify-content: center;
    min-height: 88px; /* gerekirse ayarla */
    padding: 16px 20px;
    border-radius: 16px;
    overflow: hidden;
    transition: transform .2s ease;
}

    /* Arka plan görseli katmanı (yalnızca görsel varsa) */
    .yl-cat-button.has-image::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: var(--btn-bg); /* Razor'dan set edilen değişken */
        background-size: cover;
        background-position: center;
        opacity: 0; /* başlangıçta soluk */
        transform: scale(1.05); /* hafif zoom */
        transition: opacity .25s ease, transform .25s ease;
        z-index: 1;
    }

    /* Karanlık/aydınlık okunuşu için üstte hafif bir degrade koruyucu */
    .yl-cat-button.has-image::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 1;
        opacity: .6; /* istersen azalt/çoğalt */
    }

/* Etiket (yazı) – saydam zeminle okunaklı kalsın */
.yl-cat-button__label {
    position: absolute;
    z-index: 2;
    padding: 8px 12px;
    background: rgb(255 255 255 / 85%);
    backdrop-filter: blur(2px);
    transition: transform .25s ease, background .25s ease;
    white-space: nowrap;
    width: 100%;
    text-align: center;
}

/* Hover efektleri: görsel belirginleşir, yazı biraz aşağı iner */
.yl-cat-button.has-image:hover::before {
    opacity: .85;
    transform: scale(1); /* zoom kalkar, netleşir */
}

.yl-cat-button.has-image:hover .yl-cat-button__label {
    transform: translateY(6px);
    background: rgba(255,255,255,0.82);
}

/* Görsel yoksa normal buton gibi davransın */
.yl-cat-button:not(.has-image) {
    border: 1px solid #b4b4b4;
}

/* Küçük dokunuşlar */
.yl-cat-button:active {
    transform: translateY(1px);
}
/* ========== Product row look ========== */
.product-row {
    border: 1px solid #e9ecef;
    border-left: 0;
    border-radius: 12px;
    overflow: hidden;
}

    .product-row:is(:hover, :focus-within) {
        box-shadow: 0 .4rem 1.1rem rgba(0,0,0,.08);
    }

/* Left status stripe */
.status-stripe {
    width: 6px;
    height: 100%;
    min-height: 76px;
}

.stripe-available {
    background: linear-gradient(180deg, #22c55e, #16a34a);
}

.stripe-soldout {
    background: linear-gradient(180deg, #adb5bd, #6c757d);
}

/* Thumb */
.product-thumb {
    position: relative;
    width: 76px;
    height: 76px;
    margin: 0;
}

    .product-thumb img {
        object-fit: cover;
        width: 100%;
        height: 100%;
        border-radius: 10px;
        display: block;
    }

/* Status pill on image */
.status-pill {
    position: absolute;
    bottom: -6px;
    left: 6px;
    color: #fff;
    font-size: .7rem;
    padding: 2px 6px;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

    .status-pill.bg-success {
        background: #22c55e;
    }

    .status-pill.bg-secondary {
        background: #6c757d;
    }

/* Title + PLU chip */
.product-title {
    line-height: 1.25;
    max-width: 52ch;
    font-size: 1.4rem;
}

.plu-chip {
    background: #eef2ff;
    color: #4338ca;
    border: 1px solid #c7d2fe;
    padding: 3px 8px;
    border-radius: 999px;
    font-weight: 600;
}

/* Price */
.price-lg {
    font-size: 1.75rem;
}

/* Sold-out full row tone */
.product-row.is-soldout {
    opacity: .85;
}

    .product-row.is-soldout .product-title {
        text-decoration: none;
    }



.products-grid {
    --gap: 10px;
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
    gap: var(--gap);
}

    .products-grid[data-cols="1"] {
        --cols: 1;
    }

    .products-grid[data-cols="2"] {
        --cols: 2;
    }

    .products-grid[data-cols="3"] {
        --cols: 3;
    }

    .products-grid[data-cols="4"] {
        --cols: 4;
    }

    .products-grid[data-cols="6"] {
        --cols: 6;
    }

.product-card {
    border: 1px solid #e9ecef;
    border-radius: 12px;
    background: #fff;
    padding: 10px;
    display: grid;
    grid-template-columns: 72px 1fr auto; /* 1 sütunda satır tipi */
    align-items: center;
    gap: 10px;
}

.products-grid[data-cols]:not([data-cols="1"]) .product-card {
    grid-template-columns: 1fr; /* çok sütunda kart tipi */
    grid-template-rows: auto 1fr auto;
}

.pc-img figure {
    margin: 0;
}

.pc-img img {
    display: block;
    width: 100%;
}

/* Görsel boyutu (S/M/L) */
.products-grid[data-img="s"] .pc-img {
    max-width: 120px;
    max-height: 240px;
}

.products-grid[data-img="m"] .pc-img {
    max-width: 120px;
    max-height: 240px;
}

.products-grid[data-img="l"] .pc-img {
    max-width: 120px;
    max-height: 240px;
}

/* 1 sütunda yatay; çok sütunda görsel üstte geniş */
.products-grid[data-cols="1"] .pc-img {
    width: 72px;
    height: 72px;
}

.products-grid:not([data-cols="1"]) .pc-img {
    width: 100%;
    height: 150px;
}

.pc-body .product-title {
    margin: 0;
    font-weight: 600;
    line-height: 1.2;
}

.products-grid[data-compact="1"] .pc-body .product-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.products-grid[data-compact="0"] .pc-body .product-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pc-body .meta {
    color: #6c757d;
    font-size: .85rem;
}

.plu-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f1f3f5;
    color: #495057;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: .75rem;
    font-weight: 600;
}

.pc-side {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pc-price {
    font-weight: 700;
    font-size: 1.5rem;
    text-align: center;
}

.pc-actions {
    display: flex;
    gap: 6px;
}

.products-grid:not([data-cols="1"]) .pc-side {
    flex-direction: column;
    align-items: stretch;
}

.products-grid:not([data-cols="1"]) .pc-actions {
    justify-content: center;
}

.products-grid[data-cols="1"] .pc-actions {
    justify-content: flex-end;
}

/* Sold out görünümü */
.product-card.row-soldout {
    background: #fff5f5;
    border-color: #ffc9c9;
}

    .product-card.row-soldout .product-title::before {
        content: "Unavailable";
        display: inline-block;
        background: #ffe3e3;
        color: #c92a2a;
        border-radius: 6px;
        padding: 2px 6px;
        margin-right: 6px;
        font-size: .75rem;
        font-weight: 700;
    }

    .product-card.row-soldout .pc-price {
        color: #adb5bd;
    }

.product-card:hover {
    box-shadow: 0 .25rem .75rem rgba(0,0,0,.06);
}

.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

@media (max-width: 576px) {
    .products-grid[data-cols="6"],
    .products-grid[data-cols="4"] {
        --cols: 2;
    }

    .products-grid[data-cols="3"] {
        --cols: 2;
    }
}



/* ===== Cashier 2-panel responsive layout (final) ===== */
:root {
    /* Default for >=1400px */
    --cashier-cart-w: 450px;
    --cashier-gap: 0px;
}

/* Left content keeps clear of the fixed cart on large screens */
.product-list {
    margin-right: var(--cashier-cart-w);
    min-width: 0;
}

/* Right cart panel */
.right-panels-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--cashier-cart-w);
    display: block;
    background: #fff;
    z-index: 1020;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Cart inner container should stretch */
#dvcartinfocashier {
    height: 100%;
}

/* ---------- Breakpoints (largest → smallest) ---------- */

/* <= 1399.98px (large tablet / small laptop) */
@media (max-width: 1399.98px) {
    :root {
        --cashier-cart-w: 420px;
    }
}

/* <= 1199.98px (tablet landscape) */
@media (max-width: 1199.98px) {
    :root {
        --cashier-cart-w: 360px;
    }
}


/* <= 1199.98px (tablet landscape) */
@media (max-width: 991.98px) {
    :root {
        --cashier-cart-w: 320px;
    }
}

/* <= 991.98px (tablet portrait & phones): stack layout */
@media (max-width: 691.98px) {
    :root {
        --cashier-cart-w: 300px;
    }

    .right-panels-wrapper {
        position: static; /* no longer fixed */
        width: auto;
        height: auto;
        max-height: none;
        border-left: 0;
        border-top: 1px solid rgba(0,0,0,.08);
    }

    .product-list {
        margin-right: 0; /* remove right offset */
    }
}

/* ---------- Dark mode touch-up ---------- */
@media (prefers-color-scheme: dark) {
    .right-panels-wrapper {
        background: #121212;
        border-left-color: rgba(255,255,255,.08);
        border-top-color: rgba(255,255,255,.08);
    }
}


/* ==== Category grid responsive columns: 6 → 5 → 4 → 3 → 2 ==== */
.yl-cat-grid-wrap {
    width: 100%;
}

.yl-cat-grid {
    display: grid;
    gap: 12px; /* kartlar arası boşluk */
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important; /* ≥1400px: 6 sütun */
}

/* ≥1200px and <1400px → 5 columns */
@media (max-width: 1399.98px) {
    .yl-cat-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
}

/* ≥992px and <1200px → 4 columns */
@media (max-width: 1199.98px) {
    .yl-cat-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr))!important;
    }
}

/* ≥768px and <992px → 3 columns */
@media (max-width: 991.98px) {
    .yl-cat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* <768px → 2 columns */
@media (max-width: 767.98px) {
    .yl-cat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* ==== Card/button visuals (optional, mevcut yapıya uyumlu) ==== */
.yl-cat-button {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
    min-height: 96px; /* küçük ekranlarda çok basık olmasın */
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.08);
    background: #fff;
    text-align: center;
    transition: transform .15s ease, box-shadow .15s ease;
}

    .yl-cat-button.has-image {
        background-image: var(--btn-bg);
        background-size: cover;
        background-position: center;
        color: #111;
    }

    .yl-cat-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0,0,0,.08);
    }

.yl-cat-button__label {
    font-weight: 600;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(255,255,255,.6);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* iki satıra kadar */
    -webkit-box-orient: vertical;
}

/* Dark scheme touch-up (isteğe bağlı) */
@media (prefers-color-scheme: dark) {
    .yl-cat-button {
        background: #111;
        border-color: rgba(255,255,255,.08);
    }

    .yl-cat-button__label {
        text-shadow: none;
        color: #eee;
    }
}


.mini-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.2);
    z-index: 2040; /* header vs. üstüne çıksın */
}

.mini-popup {
    position: fixed;
    width: 340px;
    max-height: 70vh;
    overflow: auto;
    z-index: 2050;
    background: #fff;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: .75rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
}

.mini-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem .75rem;
    border-bottom: 1px solid #eee;
}

.mini-popup-body {
    padding: .25rem 0;
}

.d-none {
    display: none !important;
}

@media (max-width: 480px) {
    .mini-popup {
        left: 50% !important;
        top: 15% !important;
        transform: translateX(-50%) !important;
        width: calc(100vw - 24px);
    }
}


#unpaidMarkOverlay .panel {
    max-width: 600px;
    margin: 16px auto;
    border-radius: 12px;
    top: 15%;
}
.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #3b6686;
    border-color: #ffffff;
}
.page-link {
    position: relative;
    display: block;
    color: #3b6686;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #dee2e6;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.cm-style-s1 {
    background: #1f2937;
    color: #ffffff;
}

.cm-style-s2 {
    background: #2563eb;
    color: #ffffff;
}

.cm-style-s3 {
    background: #059669;
    color: #ffffff;
}

.cm-style-s4 {
    background: #b45309;
    color: #ffffff;
}

.cm-style-s5 {
    background: #6d28d9;
    color: #ffffff;
}

.cm-style-s6 {
    background: #be123c;
    color: #ffffff;
}

.cm-style-s7 {
    background: #0f766e;
    color: #ffffff;
}

.cm-style-s8 {
    background: #111827;
    color: #f9fafb;
}

.cm-style-s9 {
    background: #facc15;
    color: #111827;
}

.cm-style-s10 {
    background: #e5e7eb;
    color: #111827;
}

.cm-styled {
    border-radius: .35rem;
    padding: .25rem .35rem;
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
}

/* === StyleKey → Renk Değişkenleri === */
:root {
    /* default (xxxx) nötr kalsın */
    --sk-bg: initial;
    --sk-fg: inherit;
    --sk-chip-bg: inherit;
    --sk-chip-fg: inherit;
}

/* Her sX için tone tanımı */
.styleKey-pd-extra-tile-s1,
.styleKey-pd-extra-text-s1,
.styleKey-pd-extra-price-s1,
.styleKey-pd-extra-check-s1 {
    --sk-bg: #1f2937;
    --sk-fg: #ffffff;
}

.styleKey-pd-extra-tile-s2,
.styleKey-pd-extra-text-s2,
.styleKey-pd-extra-price-s2,
.styleKey-pd-extra-check-s2 {
    --sk-bg: #2563eb;
    --sk-fg: #ffffff;
}

.styleKey-pd-extra-tile-s3,
.styleKey-pd-extra-text-s3,
.styleKey-pd-extra-price-s3,
.styleKey-pd-extra-check-s3 {
    --sk-bg: #059669;
    --sk-fg: #ffffff;
}

.styleKey-pd-extra-tile-s4,
.styleKey-pd-extra-text-s4,
.styleKey-pd-extra-price-s4,
.styleKey-pd-extra-check-s4 {
    --sk-bg: #b45309;
    --sk-fg: #ffffff;
}

.styleKey-pd-extra-tile-s5,
.styleKey-pd-extra-text-s5,
.styleKey-pd-extra-price-s5,
.styleKey-pd-extra-check-s5 {
    --sk-bg: #6d28d9;
    --sk-fg: #ffffff;
}

.styleKey-pd-extra-tile-s6,
.styleKey-pd-extra-text-s6,
.styleKey-pd-extra-price-s6,
.styleKey-pd-extra-check-s6 {
    --sk-bg: #be123c;
    --sk-fg: #ffffff;
}

.styleKey-pd-extra-tile-s7,
.styleKey-pd-extra-text-s7,
.styleKey-pd-extra-price-s7,
.styleKey-pd-extra-check-s7 {
    --sk-bg: #0f766e;
    --sk-fg: #ffffff;
}

.styleKey-pd-extra-tile-s8,
.styleKey-pd-extra-text-s8,
.styleKey-pd-extra-price-s8,
.styleKey-pd-extra-check-s8 {
    --sk-bg: #111827;
    --sk-fg: #f9fafb;
}

.styleKey-pd-extra-tile-s9,
.styleKey-pd-extra-text-s9,
.styleKey-pd-extra-price-s9,
.styleKey-pd-extra-check-s9 {
    --sk-bg: #facc15;
    --sk-fg: #111827;
}

.styleKey-pd-extra-tile-s10,
.styleKey-pd-extra-text-s10,
.styleKey-pd-extra-price-s10,
.styleKey-pd-extra-check-s10 {
    --sk-bg: #e5e7eb;
    --sk-fg: #111827;
}

/* xxxx → nötr (değişken set yok) */
.styleKey-pd-extra-tile-xxxx,
.styleKey-pd-extra-text-xxxx,
.styleKey-pd-extra-price-xxxx,
.styleKey-pd-extra-check-xxxx {
}

/* === Uygulama kuralları (tile/text/price/check) === */
.pd-extra-tile[class*="styleKey-pd-extra-tile-"] {
    /* arka planı yumuşak kullan: tam dolu istemezsen saydamlaştır */
    background: color-mix(in srgb, var(--sk-bg) 8%, #fff 92%);
    border-color: color-mix(in srgb, var(--sk-bg) 35%, #ddd);
}

.pd-extra-text[class*="styleKey-pd-extra-text-"] {
    color: var(--sk-bg); /* yazıyı ana tona çek */
}

.pd-extra-price[class*="styleKey-pd-extra-price-"] {
    color: var(--sk-bg);
    font-weight: 700;
}

.pd-extra-check[class*="styleKey-pd-extra-check-"] {
    border-color: var(--sk-bg);
}

.pd-extra-tile:has(.product-checkbox:checked) .pd-extra-check[class*="styleKey-pd-extra-check-"] {
    background: var(--sk-bg);
    border-color: var(--sk-bg);
}

    .pd-extra-tile:has(.product-checkbox:checked) .pd-extra-check[class*="styleKey-pd-extra-check-"]::after {
        border-color: var(--sk-fg);
    }
#filter-summary {
    font-style: italic;
    white-space: nowrap;
    user-select: none;
}