:root {
    --brand: #f5b301;
    --brand2: #1f2937;
    --soft: #f7f7fb;
    --card: #ffffff;
    --muted: #6b7280;
    --ring: rgba(245,179,1,.25);
}

body {
    background: var(--soft);
    color: #111827;
}

.topbar {
    background: #0b1220;
    color: #e5e7eb;
}

    .topbar a {
        color: #e5e7eb;
        text-decoration: none;
    }

        .topbar a:hover {
            color: #fff;
        }

.brandbar {
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,.06);
}

.brand-logo {
    height: 44px;
}

.nav-pills .nav-link {
    color: #111827;
}

    .nav-pills .nav-link.active {
        background: var(--brand);
        color: #111827;
    }

.hero {
    background: #111827;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

/* the hero wrapper must be the positioning parent */
.hero-full {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}

    /* make the carousel itself define the hero height */
    .hero-full .hero-bg,
    .hero-full .carousel,
    .hero-full .carousel-inner,
    .hero-full .carousel-item {
        height: 260px;
    }

    /* slides fill hero */
    .hero-full .carousel-item {
        position: relative;
    }

    /* image fills slide */
    .hero-full .carousel .hero-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* overlay sits on top of images */
    .hero-full .hero-overlay {
        position: absolute;
        inset: 0;
        z-index: 2;
        background: linear-gradient(90deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.40) 35%, rgba(0,0,0,.20) 65%, rgba(0,0,0,.05) 100%);
    }

    /* content must be absolute to stay inside hero */
    .hero-full .hero-content {
        position: absolute;
        inset: 0;
        z-index: 3;
        display: flex;
        align-items: center;
        color: #fff;
    }

    /* arrows above all */
    .hero-full .carousel-control-prev,
    .hero-full .carousel-control-next {
        z-index: 4;
    }
    /* indicator container */
    .hero-full .carousel-indicators {
        position: absolute;
        bottom: 12px;
        margin: 0;
        justify-content: center;
        z-index: 4;
    }

        /* each indicator = underscore */
        .hero-full .carousel-indicators [data-bs-target] {
            width: 22px;
            height: 3px;
            border-radius: 2px;
            background-color: rgba(255,255,255,.45);
            margin: 0 4px;
            opacity: 1;
        }

        /* active underscore */
        .hero-full .carousel-indicators .active {
            background-color: #fff;
        }


/* responsive heights */
@media (max-width: 768px) {
    .hero-bg {
        height: 300px;
    }
}

.hero-title {
    font-weight: 800;
    letter-spacing: .2px;
}

.hero-sub {
    color: rgba(255,255,255,.85);
}

.panel {
    background: var(--card);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 1rem;
    box-shadow: 0 8px 20px rgba(0,0,0,.05);
}

.panel-h {
    padding: .9rem 1rem;
    border-bottom: 1px solid rgba(0,0,0,.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.panel-b {
    padding: 1rem;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .6rem;
    border-radius: 999px;
    background: #f3f4f6;
    color: #111827;
    font-size: .82rem;
    border: 1px solid rgba(0,0,0,.06);
    cursor: pointer;
    user-select: none;
}

    .chip:hover {
        box-shadow: 0 0 0 .25rem var(--ring);
    }

    .chip.active {
        background: rgba(245,179,1,.18);
        border-color: rgba(245,179,1,.35);
    }

.product-card {
    height: 100%;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 1rem;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 24px rgba(0,0,0,.06);
    transition: transform .12s ease, box-shadow .12s ease;
}

    .product-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 30px rgba(0,0,0,.10);
    }

.p-media {
    height: 140px;
    background: radial-gradient(120px 120px at 20% 20%, rgba(245,179,1,.55), transparent 55%), radial-gradient(140px 140px at 80% 10%, rgba(59,130,246,.35), transparent 60%), linear-gradient(135deg, #111827, #374151);
    position: relative;
}

.p-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
    color: rgba(255,255,255,.92);
    text-shadow: 0 10px 25px rgba(0,0,0,.35);
}

.badge-discount {
    position: absolute;
    top: .5rem;
    left: .5rem;
    background: var(--brand);
    color: #111827;
    font-weight: 700;
    font-size: .75rem; /* 🔑 smaller text */
    line-height: 1;
    border-radius: 999px;
    padding: .25rem .45rem; /* 🔑 tighter padding */

    box-shadow: 0 6px 14px rgba(0,0,0,.15);
    white-space: nowrap;
}

    .badge-discount i {
        font-size: .7rem; /* 🔑 smaller lightning icon */
        margin-right: .25rem;
    }

@media (max-width: 576px) {
    .badge-discount {
        font-size: .7rem;
        padding: .22rem .4rem;
    }
}

.p-body {
    padding: 1rem;
}

.p-title {
    font-weight: 800;
    font-size: 1rem;
    margin: 0 0 .35rem 0;
    line-height: 1.2;
}

.p-meta {
    color: var(--muted);
    font-size: .86rem;
}

.p-price {
    display: flex;
    align-items: baseline;
    gap: .5rem;
}

    .p-price .now {
        font-weight: 900;
        font-size: 1.1rem;
    }

    .p-price .was {
        color: #9ca3af;
        text-decoration: line-through;
        font-size: .9rem;
    }

.btn-brand {
    background: var(--brand);
    border-color: rgba(0,0,0,.06);
    color: #111827;
    font-weight: 800;
}

    .btn-brand:hover {
        filter: brightness(.98);
        box-shadow: 0 0 0 .25rem var(--ring);
    }

.btn-ghost {
    background: #fff;
    border: 1px solid rgba(0,0,0,.10);
    color: #111827;
    font-weight: 700;
}

    .btn-ghost:hover {
        box-shadow: 0 0 0 .25rem rgba(17,24,39,.10);
    }

.footer {
    background: #0b1220;
    color: #cbd5e1;
    margin-top: 2rem;
    border-top: 1px solid rgba(255,255,255,.08);
}

    .footer a {
        color: #e5e7eb;
        text-decoration: none;
    }

        .footer a:hover {
            color: #fff;
        }

.small-muted {
    color: #9ca3af;
    font-size: .86rem;
}

.sticky-aside {
    position: sticky;
    top: 1rem;
}

@media (min-width: 992px) {
    .hero-img {
        height: 260px;
    }
}
/* 1) Smaller "Sepete Ekle" button */
.product-card .addCart {
    padding: .28rem .5rem;
    font-size: .78rem;
    line-height: 1.1;
    border-radius: .6rem;
    white-space: nowrap;
}

/* 2) Prevent mobile horizontal scroll */
html, body {
    overflow-x: hidden;
}

.panel, .hero-wrap, .brandbar, .topbar {
    max-width: 100%;
}

.input-group {
    max-width: 100%;
}
<style >
/* floating cart button */
/* floating cart button */
.cart-fab {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1080;
    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

/* cart rows */
.cart-row {
    display: flex;
    gap: .75rem;
    align-items: center;
    border: 1px solid rgba(0,0,0,.10);
    border-radius: .85rem;
    padding: .6rem .7rem;
    background: #fff;
}

    .cart-row .ct {
        flex: 1;
        min-width: 0;
    }

        .cart-row .ct .nm {
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .cart-row .ct .sm {
            font-size: .85rem;
            color: #6c757d;
        }

.qty {
    display: flex;
    align-items: center;
    gap: .35rem;
}

    .qty button {
        width: 28px;
        height: 28px;
        border-radius: .6rem;
        padding: 0;
    }

    .qty .q {
        width: 34px;
        text-align: center;
        font-weight: 600;
    }

.ck-modal {
    border-radius: 1.2rem;
    overflow: hidden;
}

.ck-title {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: .2px;
}

.ck-card, .ck-summary {
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 1rem;
    background: #fff;
}

.ck-card-h {
    padding: .85rem 1rem;
    font-weight: 700;
    border-bottom: 1px solid rgba(0,0,0,.06);
    background: rgba(15,23,42,.03);
}

.ck-card-b {
    padding: 1rem;
}

.ck-input {
    border-radius: .85rem;
    padding: .65rem .75rem;
}

.ck-req {
    color: #dc3545;
    font-weight: 800;
}

.ck-pay {
    border: 1px dashed rgba(0,0,0,.15);
    border-radius: .9rem;
    padding: .85rem .9rem;
    background: rgba(15,23,42,.02);
}

.ck-summary {
    padding: 1rem;
    position: sticky;
    top: 0;
}

.ck-items {
    max-height: 280px;
    overflow: auto;
    padding-right: .25rem;
}

.ck-totals {
    border-top: 1px solid rgba(0,0,0,.08);
    padding-top: .85rem;
}

.ck-grand {
    font-size: 1.05rem;
}
#CheckoutModal .modal-body {
    position: relative;
}

#CheckoutModal .ck-alerts {
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(6px);
}
.p-media {
    cursor: zoom-in;
    position: relative;
}

.p-media .imgdots {
position: absolute;
left: 10px;
bottom: 10px;
display: flex;
gap: 6px;
}

.p-media .imgdots span {
width: 7px;
height: 7px;
border-radius: 50%;
background: rgba(255,255,255,.35);
}

.p-media .imgdots span.on {
    background: rgba(255,255,255,.9);
}





/* ---------- Topbar: responsive, not mobile-only ---------- */
.topbar .topbar-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    align-items: center;
    justify-content: space-between;
}

.topbar-left, .topbar-right {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    min-width: 0;
}

.topbar-item, .topbar-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    text-decoration: none;
}

.topbar-text {
    min-width: 0;
}

/* Address truncation only when it needs it */
#cfgTopAddress .topbar-text {
    display: inline-block;
    max-width: 520px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Cart default = inline (desktop/tablet) */
.cart-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border-radius: .8rem;
}

/* ---------- Brandbar: desktop/tablet wrap naturally ---------- */
.brandbar-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    flex-wrap: wrap;
}

.brand-left {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
}

/* mobile-only divider */
@media (max-width: 991.98px) {
    .brand-left {
        width: 100%;
        padding-bottom: .65rem;
        margin-bottom: .65rem;
        border-bottom: 1px solid rgba(0,0,0,.12);
    }
        .brand-left .lh-sm {
            margin-left: auto; /* pushes text to the right */
            text-align: right; /* right-align text */
        }
}
/* Categories default (desktop/tablet): wrap grid-like */
.cats {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-end;
}

/* ---------- PHONE behavior ---------- */
@media (max-width: 575.98px) {
    /* topbar becomes 2 rows */
    .topbar-wrap {
        flex-direction: column;
        align-items: flex-start;
    }

    .topbar-right {
        width: 100%;
        justify-content: flex-start;
    }

    #cfgTopAddress .topbar-text {
        max-width: 100%;
    }

    /* categories become swipeable chips */
    .cats {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: .25rem;
        justify-content: flex-start;
        scrollbar-width: none;
    }

        .cats::-webkit-scrollbar {
            display: none;
        }

        .cats .btn {
            white-space: nowrap;
        }

    /* cart becomes FAB on phones only */
    .cart-btn {
        position: fixed;
        right: 14px;
        bottom: 14px;
        z-index: 1050;
        border-radius: 999px;
        padding: .65rem .85rem;
        box-shadow: 0 10px 30px rgba(0,0,0,.18);
    }

    /* hide "Sepet" text on tiny screens, keep icon + badge */
    .cart-text {
        display: none;
    }

    /* badge tighter on FAB */
    .cart-count {
        margin-left: .35rem !important;
    }
}

/* ---------- TABLET tuning (keeps desktop look, avoids crowding) ---------- */
@media (min-width: 576px) and (max-width: 991.98px) {
    #cfgTopAddress .topbar-text {
        max-width: 360px;
    }
    /* prevents pushing */
    .cats {
        justify-content: flex-start;
    }
    /* looks better on tablet */
}
/* floating cart (mobile only) */
.cart-fab {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 1050;
    border-radius: 999px;
    padding: .65rem .85rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

    .cart-fab #CartCountMobile {
        position: absolute;
        top: -8px;
        right: -8px;
        border-radius: 999px;
        padding: .3rem .45rem;
    }

/* prevent FAB covering content on phones */
@media (max-width: 575.98px) {
    body {
        padding-bottom: 84px;
    }
}
.p-media-img {
    position: relative;
    background: #111827;
    overflow: hidden;
}

    .p-media-img .p-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.products-loading {
    padding: 2.25rem 0;
    text-align: center;
}

    .products-loading .spinner {
        font-size: 1.4rem;
    }

    .products-loading .txt {
        margin-top: .6rem;
        font-size: .95rem;
    }