/* ==========================================================================
   QR Menü Özel CSS Stylesheet (Vanilla CSS, Modern UI, Dark/Light Mode)
   ========================================================================== */

/* Yatay kaydırılabilir menü için scrollbar gizleme */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Kategori Butonları Aktif Stili */
.cat-btn.active {
    background-color: var(--category-menu-color) !important;
    color: white !important;
    border-color: var(--category-menu-color) !important;
}

/* Modal Açılış Animasyonu */
@keyframes modalFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.modal-content {
    animation: modalFadeIn 0.3s ease-out forwards;
}

body {
    font-family: 'Inter', sans-serif;
    transition: background-color 0.3s, color 0.3s;
    background:
        radial-gradient(circle at top left, rgba(255,255,255,0.92), transparent 34rem),
        linear-gradient(135deg, #e9ecef 0%, #f6f3ed 48%, #eceff3 100%);
}
.dark body {
    background:
        radial-gradient(circle at top left, rgba(63,63,70,0.28), transparent 32rem),
        linear-gradient(135deg, #09090b 0%, #111113 52%, #171717 100%);
}
.menu-shell {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.72) 0%, var(--menu-surface) 20rem),
        var(--menu-surface);
}
.dark .menu-shell {
    --menu-surface: #111113;
    --menu-ink: #fafafa;
    --menu-muted: #a1a1aa;
    --menu-line: rgba(255, 255, 255, 0.09);
    background: linear-gradient(180deg, rgba(39,39,42,0.72) 0%, #111113 20rem), #111113;
}
.hero-panel {
    border-bottom: 1px solid var(--menu-line);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}
.default-banner {
    position: relative;
    background:
        radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--primary) 34%, white), transparent 14rem),
        radial-gradient(circle at 82% 20%, color-mix(in srgb, var(--banner-accent-color) 28%, white), transparent 12rem),
        linear-gradient(135deg, color-mix(in srgb, var(--primary) 82%, #111827) 0%, color-mix(in srgb, var(--banner-accent-color) 48%, #f8fafc) 50%, color-mix(in srgb, var(--primary) 58%, #111827) 100%);
}
.default-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.11) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,0.11) 1px, transparent 1px);
    background-size: 22px 22px;
    opacity: 0.55;
}
.default-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.42), transparent 60%);
}
.dark .default-banner {
    background:
        radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--primary) 28%, #18181b), transparent 14rem),
        radial-gradient(circle at 78% 24%, color-mix(in srgb, var(--banner-accent-color) 22%, #18181b), transparent 12rem),
        linear-gradient(135deg, #18181b 0%, color-mix(in srgb, var(--banner-accent-color) 32%, #27272a) 52%, color-mix(in srgb, var(--primary) 22%, #09090b) 100%);
}
.hero-panel h1 {
    color: var(--menu-ink) !important;
    font-size: 2rem !important;
    line-height: 1.08 !important;
    font-weight: 900 !important;
}
.table-pill {
    background: var(--menu-ink) !important;
    color: var(--menu-surface) !important;
    box-shadow: 0 12px 28px rgba(24, 24, 27, 0.18) !important;
}
.glass-action {
    background: rgba(255, 255, 255, 0.76) !important;
    border: 1px solid rgba(255, 255, 255, 0.58) !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14) !important;
}
.dark .glass-action {
    background: rgba(24, 24, 27, 0.72) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}
.category-bar {
    background: rgba(247, 247, 245, 0.88);
    border-color: var(--menu-line);
}
.dark .category-bar { background: rgba(17, 17, 19, 0.86); }
.cat-btn {
    border: 1px solid var(--menu-line) !important;
    box-shadow: none !important;
}
.cat-btn.active {
    background-color: var(--category-menu-color) !important;
    border-color: var(--category-menu-color) !important;
    box-shadow: 0 10px 24px rgba(24,24,27,0.18) !important;
}
.dark .cat-btn.active {
    background-color: #fafafa !important;
    color: #111113 !important;
    border-color: #fafafa !important;
}
.search-input {
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.07);
}
#liveSearchInput {
    border-radius: 22px !important;
    padding-top: 0.9rem !important;
    padding-bottom: 0.9rem !important;
    background: rgba(255,255,255,0.92) !important;
    border-color: var(--menu-line) !important;
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.07) !important;
}
.dark #liveSearchInput {
    background: rgba(39,39,42,0.82) !important;
}
.product-card {
    height: auto !important;
    min-height: 152px;
    border-radius: 26px !important;
    border-color: var(--menu-line) !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.07) !important;
    background: rgba(255, 255, 255, 0.88) !important;
}
.dark .product-card {
    background: rgba(39, 39, 42, 0.72) !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28) !important;
}
.product-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 22px 55px rgba(15, 23, 42, 0.12) !important;
}
.product-card > div:first-child {
    padding: 1rem !important;
    background: transparent !important;
    backdrop-filter: none !important;
}
.product-card > div:last-child {
    width: 132px !important;
    margin: 10px 10px 10px 0;
    border-radius: 22px;
    overflow: hidden;
}
.price-chip {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary, #2563eb) 10%, white);
    padding: 0.35rem 0.72rem;
}
.dark .price-chip {
    background: color-mix(in srgb, var(--primary, #2563eb) 22%, #18181b);
}

/* Swiper Fixes */
.swiper-pagination-bullet-active { background: var(--primary, #2563eb) !important; }
/* Erişilebilirlik: Swiper nokta butonları minimum dokunma alanı */
.swiper-pagination-bullet {
    width: 36px !important;
    height: 36px !important;
    margin: 0 2px !important;
    padding: 12px !important; /* Gerçek tıklanabilir alanı 36x36 yapar */
    background-clip: content-box !important; /* Sadece iç kısmı boyar (12x12 görünür) */
    box-sizing: border-box !important;
}

.cat-btn.active > div {
    background-color: rgba(255, 255, 255, 0.25) !important;
}

/* Micro-animations */
@keyframes bounce-sm {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(0.95); }
}
.animate-bounce-sm { animation: bounce-sm 0.2s ease-in-out; }

@keyframes fade-in-up {
    0% { opacity: 0; transform: translateY(15px); }
    100% { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fade-in-up 0.4s ease-out forwards; }
.cat-btn.active {
    background-color: var(--category-menu-color) !important;
    border-color: var(--category-menu-color) !important;
    color: var(--menu-surface) !important;
    box-shadow: 0 10px 24px rgba(24,24,27,0.18) !important;
}
.dark .cat-btn.active {
    background-color: #fafafa !important;
    border-color: #fafafa !important;
    color: #111113 !important;
}

/* Pixel Kafe Temasi */
.menu-theme-pixel_cafe {
    --pixel-cream: #fff5e3;
    --pixel-paper: #fffaf0;
    --pixel-ink: #5a2f22;
    --pixel-muted: #8d6554;
    --pixel-border: #d99a70;
    --pixel-shadow: #efc7a4;
    --pixel-pink: #ef7182;
    --pixel-pink-dark: #b94a5a;
    --pixel-mint: #dff1dd;
    --primary: #d85f72;
    --pixel-category-shadow: color-mix(in srgb, var(--category-menu-color) 68%, #5a2f22);
    background:
        linear-gradient(90deg, rgba(217,154,112,0.12) 1px, transparent 1px),
        linear-gradient(0deg, rgba(217,154,112,0.12) 1px, transparent 1px),
        radial-gradient(circle at 12% 8%, rgba(239,113,130,0.18), transparent 11rem),
        linear-gradient(180deg, #ffe8c9 0%, #fff7e8 42%, #ffeeda 100%);
    background-size: 18px 18px, 18px 18px, auto, auto;
    color: var(--pixel-ink);
}
.menu-theme-pixel_cafe .menu-shell {
    max-width: 540px;
    background:
        linear-gradient(180deg, rgba(255,250,240,0.96) 0%, rgba(255,245,227,0.98) 24rem),
        var(--pixel-cream);
    border-left: 4px solid rgba(217,154,112,0.55);
    border-right: 4px solid rgba(217,154,112,0.55);
    box-shadow: 0 20px 0 rgba(185,74,90,0.12), 0 28px 70px rgba(90,47,34,0.22) !important;
}
.menu-theme-pixel_cafe .menu-shell::before {
    content: "♡  ☕  ✦  🍰";
    position: absolute;
    inset: 10px 0 auto 0;
    z-index: 1;
    pointer-events: none;
    text-align: center;
    color: rgba(185,74,90,0.42);
    font-family: 'Pixelify Sans', 'Inter', sans-serif;
    font-size: 1rem;
    letter-spacing: 10px;
}
.menu-theme-pixel_cafe .hero-panel {
    background: linear-gradient(180deg, #fff1dc 0%, #fffaf0 100%) !important;
    border-bottom: 3px solid var(--pixel-border);
    box-shadow: 0 5px 0 var(--pixel-shadow) !important;
}
.menu-theme-pixel_cafe .hero-panel > .w-full {
    height: 174px !important;
    background:
        linear-gradient(90deg, rgba(90,47,34,0.08) 1px, transparent 1px),
        linear-gradient(0deg, rgba(90,47,34,0.08) 1px, transparent 1px),
        linear-gradient(135deg, #ffe0bd 0%, #ffd8df 48%, #fff5e3 100%) !important;
    background-size: 14px 14px, 14px 14px, auto !important;
}
.menu-theme-pixel_cafe .hero-panel > .w-full::after {
    content: "";
    position: absolute;
    inset: 18px;
    border: 2px dashed rgba(217,154,112,0.65);
    border-radius: 18px;
    pointer-events: none;
}
.menu-theme-pixel_cafe .default-banner {
    background:
        radial-gradient(circle at 22% 22%, color-mix(in srgb, var(--banner-accent-color) 30%, transparent), transparent 11rem),
        radial-gradient(circle at 78% 30%, color-mix(in srgb, var(--primary) 18%, #fffaf0), transparent 10rem),
        linear-gradient(90deg, rgba(90,47,34,0.08) 1px, transparent 1px),
        linear-gradient(0deg, rgba(90,47,34,0.08) 1px, transparent 1px),
        linear-gradient(135deg, color-mix(in srgb, var(--primary) 18%, #ffe0bd) 0%, color-mix(in srgb, var(--banner-accent-color) 22%, #ffd8df) 48%, #fff5e3 100%) !important;
    background-size: auto, auto, 14px 14px, 14px 14px, auto !important;
}
.menu-theme-pixel_cafe .default-banner::before {
    content: "☕  ♡  🍰  ✦";
    position: absolute;
    inset: 2rem 0 auto 0;
    text-align: center;
    font-family: 'Pixelify Sans', 'Inter', sans-serif;
    font-size: 1.35rem;
    color: rgba(90,47,34,0.42);
    letter-spacing: 0.8rem;
    background: none;
    opacity: 1;
}
.menu-theme-pixel_cafe .default-banner::after {
    background: linear-gradient(to top, rgba(90,47,34,0.28), transparent 62%);
}
.menu-theme-pixel_cafe .hero-panel h1,
.menu-theme-pixel_cafe .category-section h2 span,
.menu-theme-pixel_cafe .product-name,
.menu-theme-pixel_cafe .price-chip {
    font-family: 'Pixelify Sans', 'Inter', sans-serif;
}
.menu-theme-pixel_cafe .hero-panel h1 {
    color: var(--pixel-ink) !important;
    text-shadow: 2px 2px 0 #ffd0d8;
}
.menu-theme-pixel_cafe .hero-panel h1::before,
.menu-theme-pixel_cafe .hero-panel h1::after {
    content: "♥";
    color: var(--pixel-pink);
    font-size: 1.05rem;
    margin: 0 0.55rem;
    vertical-align: 0.18rem;
}
.menu-theme-pixel_cafe .hero-panel .w-28 {
    border: 3px solid var(--pixel-border) !important;
    border-radius: 22px !important;
    box-shadow: 5px 5px 0 #f3b4bd !important;
    background: #fffaf0 !important;
}
.menu-theme-pixel_cafe .hero-panel .w-28 img {
    border-radius: 16px !important;
}
.menu-theme-pixel_cafe .table-pill,
.menu-theme-pixel_cafe .glass-action {
    border: 2px solid var(--pixel-border) !important;
    border-radius: 14px !important;
    background: #fffaf0 !important;
    color: var(--pixel-ink) !important;
    box-shadow: 3px 3px 0 var(--pixel-shadow) !important;
}
.menu-theme-pixel_cafe .category-bar {
    background: rgba(255,243,223,0.96) !important;
    border-top: 3px solid rgba(217,154,112,0.45);
    border-bottom: 3px solid var(--pixel-border);
    box-shadow: 0 4px 0 var(--pixel-shadow) !important;
}
.menu-theme-pixel_cafe .cat-btn {
    border: 2px solid var(--pixel-border) !important;
    border-radius: 14px !important;
    background: #fffaf0 !important;
    color: var(--pixel-ink) !important;
    box-shadow: 3px 3px 0 var(--pixel-shadow) !important;
    font-family: 'Pixelify Sans', 'Inter', sans-serif;
}
.pixel-cat-icon {
    display: none;
}
.menu-theme-pixel_cafe .pixel-cat-icon {
    display: inline-flex;
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 1.75rem;
    align-items: center;
    justify-content: center;
    margin-right: 0.45rem;
    border: 2px solid var(--pixel-border);
    border-radius: 8px;
    background: #fff8eb;
    color: var(--pixel-ink);
    box-shadow: 2px 2px 0 var(--pixel-shadow);
}
.menu-theme-pixel_cafe .pixel-cat-icon i {
    font-size: 0.92rem;
    line-height: 1;
    color: inherit;
}
.menu-theme-pixel_cafe .cat-btn.active .pixel-cat-icon {
    background: #fffaf0;
    border-color: #fffaf0;
    color: var(--pixel-category-shadow);
    box-shadow: 2px 2px 0 rgba(90,47,34,0.28);
}
.menu-theme-pixel_cafe .cat-btn.active {
    background: var(--category-menu-color) !important;
    border-color: var(--pixel-category-shadow) !important;
    color: #fffaf0 !important;
    box-shadow: 3px 3px 0 var(--pixel-category-shadow) !important;
}
.menu-theme-pixel_cafe #liveSearchInput {
    border: 3px solid var(--pixel-border) !important;
    border-radius: 16px !important;
    background: #fffaf0 !important;
    color: var(--pixel-ink) !important;
    box-shadow: 4px 4px 0 var(--pixel-shadow) !important;
}
.menu-theme-pixel_cafe .category-section h2 {
    color: var(--pixel-ink) !important;
}
.menu-theme-pixel_cafe .category-section h2 > div:first-child {
    width: 10px !important;
    height: 30px !important;
    border-radius: 0 !important;
    background: var(--category-menu-color) !important;
    box-shadow: 3px 3px 0 var(--pixel-shadow);
}
.menu-theme-pixel_cafe .product-card {
    position: relative;
    border: 3px solid var(--pixel-border) !important;
    border-radius: 18px !important;
    background: var(--pixel-paper) !important;
    box-shadow: 5px 5px 0 var(--pixel-shadow) !important;
    color: var(--pixel-ink) !important;
}
.menu-theme-pixel_cafe .product-card:hover {
    transform: translate(-1px, -2px) !important;
    box-shadow: 7px 7px 0 var(--pixel-shadow) !important;
}
.menu-theme-pixel_cafe .product-card::before {
    content: "♡";
    position: absolute;
    top: 8px;
    right: 136px;
    z-index: 2;
    color: rgba(239,113,130,0.72);
    font-family: 'Pixelify Sans', 'Inter', sans-serif;
    font-size: 1.1rem;
}
.menu-theme-pixel_cafe .product-card > div:first-child {
    background: transparent !important;
}
.menu-theme-pixel_cafe .product-card > div:last-child {
    background: #fff1dc !important;
    border-left: 3px dashed #efc7a4;
    border-radius: 12px !important;
}
.menu-theme-pixel_cafe .product-card > div:last-child img {
    position: relative;
    z-index: 10 !important;
}
.menu-theme-pixel_cafe .product-name {
    color: var(--pixel-ink) !important;
    font-size: 1.12rem !important;
    line-height: 1.06 !important;
}
.menu-theme-pixel_cafe .product-card p {
    color: var(--pixel-muted) !important;
}
.menu-theme-pixel_cafe .product-meta-row span,
.menu-theme-pixel_cafe .product-card [class*="rounded-full"] {
    border-radius: 8px !important;
}
.menu-theme-pixel_cafe .product-meta-row span {
    border: 1px solid rgba(217,154,112,0.55);
    background: #fff8eb !important;
    color: var(--pixel-ink) !important;
    font-weight: 800;
}
.menu-theme-pixel_cafe .price-chip {
    border: 2px solid #e78595;
    border-radius: 12px;
    background: #ffe0e6 !important;
    color: var(--pixel-pink-dark) !important;
    box-shadow: 2px 2px 0 #f5b3bd;
}
.menu-theme-pixel_cafe .modal-content,
.menu-theme-pixel_cafe #cartBar {
    border: 3px solid var(--pixel-border) !important;
    background: #fffaf0 !important;
    color: var(--pixel-ink) !important;
    box-shadow: 0 -5px 0 var(--pixel-shadow), 0 -14px 45px rgba(90,47,34,0.18) !important;
}
.menu-theme-pixel_cafe button.bg-gradient-to-r,
.menu-theme-pixel_cafe #mainFab {
    border: 2px solid var(--pixel-pink-dark) !important;
    background: var(--pixel-pink) !important;
    box-shadow: 4px 4px 0 var(--pixel-pink-dark) !important;
    border-radius: 14px !important;
}
.menu-theme-pixel_cafe footer::before {
    content: "☕  🍪  ♡";
    display: block;
    margin-bottom: 0.5rem;
    color: var(--pixel-pink);
    font-size: 1.1rem;
}
.menu-theme-pixel_cafe #infoModal .modal-content {
    border-radius: 20px !important;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(217,154,112,0.1) 1px, transparent 1px),
        linear-gradient(0deg, rgba(217,154,112,0.1) 1px, transparent 1px),
        #fffaf0 !important;
    background-size: 14px 14px, 14px 14px, auto;
}
.menu-theme-pixel_cafe #infoModal .bg-gradient-to-r {
    background: #f5c2ad !important;
    border-bottom: 3px solid var(--pixel-border);
    color: var(--pixel-ink) !important;
}
.menu-theme-pixel_cafe #infoModal .bg-gradient-to-r h3 {
    color: var(--pixel-ink) !important;
    font-family: 'Pixelify Sans', 'Inter', sans-serif;
    text-shadow: 2px 2px 0 #ffe5db;
}
.menu-theme-pixel_cafe #infoModal .bg-gradient-to-r h3::before {
    content: "☕";
    margin-right: 0.45rem;
}
.menu-theme-pixel_cafe #infoModal .bg-gradient-to-r .w-10 {
    background: #fffaf0 !important;
    border: 2px solid var(--pixel-border);
    border-radius: 10px !important;
    color: var(--pixel-pink-dark) !important;
    box-shadow: 2px 2px 0 var(--pixel-shadow);
}
.menu-theme-pixel_cafe #infoModal .bg-gradient-to-r .w-10 i,
.menu-theme-pixel_cafe #infoModal .bg-gradient-to-r button i {
    color: var(--pixel-pink-dark) !important;
}
.menu-theme-pixel_cafe #infoModal .bg-gradient-to-r button {
    background: #fffaf0 !important;
    border: 2px solid var(--pixel-border);
    border-radius: 10px !important;
    box-shadow: 2px 2px 0 var(--pixel-shadow);
}
.menu-theme-pixel_cafe #infoModal .p-5 > div,
.menu-theme-pixel_cafe #infoModal .p-5 > a {
    background: #fff8eb !important;
    border: 2px solid var(--pixel-border) !important;
    border-radius: 16px !important;
    box-shadow: 4px 4px 0 var(--pixel-shadow) !important;
}
.menu-theme-pixel_cafe #infoModal .p-5 > div:hover,
.menu-theme-pixel_cafe #infoModal .p-5 > a:hover {
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 var(--pixel-shadow) !important;
}
.menu-theme-pixel_cafe #infoModal .p-5 .w-8,
.menu-theme-pixel_cafe #infoModal .p-5 .w-10 {
    background: #ffe0e6 !important;
    color: var(--pixel-pink-dark) !important;
    border: 2px solid #e78595;
    border-radius: 10px !important;
    box-shadow: 2px 2px 0 #f5b3bd;
}
.menu-theme-pixel_cafe #infoModal .p-5 .w-8 i,
.menu-theme-pixel_cafe #infoModal .p-5 .w-10 i {
    color: var(--pixel-pink-dark) !important;
}
.menu-theme-pixel_cafe #infoModal p,
.menu-theme-pixel_cafe #infoModal span {
    color: var(--pixel-ink) !important;
}
.menu-theme-pixel_cafe #infoModal p[class*="uppercase"],
.menu-theme-pixel_cafe #infoModal span[class*="uppercase"] {
    color: var(--pixel-muted) !important;
    font-family: 'Pixelify Sans', 'Inter', sans-serif;
    letter-spacing: 0 !important;
}
.menu-theme-pixel_cafe #infoModal button[onclick="copyWifi()"],
.menu-theme-pixel_cafe #infoModal button[onclick="toggleWifiQR()"] {
    background: #ffe0e6 !important;
    color: var(--pixel-pink-dark) !important;
    border: 2px solid #e78595 !important;
    border-radius: 10px !important;
    box-shadow: 2px 2px 0 #f5b3bd !important;
    font-family: 'Pixelify Sans', 'Inter', sans-serif;
}
.menu-theme-pixel_cafe #infoModal #wifiQrContainer img {
    border: 4px solid #fffaf0 !important;
    border-radius: 14px !important;
    box-shadow: 4px 4px 0 var(--pixel-shadow) !important;
    image-rendering: pixelated;
}
.menu-theme-pixel_cafe .product-detail-footer {
    background:
        linear-gradient(90deg, rgba(217,154,112,0.11) 1px, transparent 1px),
        linear-gradient(0deg, rgba(217,154,112,0.11) 1px, transparent 1px),
        #fff8eb !important;
    background-size: 14px 14px, 14px 14px, auto;
    border-top: 3px solid var(--pixel-border) !important;
    box-shadow: 0 -4px 0 var(--pixel-shadow) !important;
}
.menu-theme-pixel_cafe .product-detail-footer span:first-child {
    color: var(--pixel-muted) !important;
    font-family: 'Pixelify Sans', 'Inter', sans-serif;
    letter-spacing: 0 !important;
}
.menu-theme-pixel_cafe .product-detail-footer [id^="price_display_"] {
    display: inline-flex;
    align-items: center;
    background: #fff3df;
    color: #4a2419 !important;
    border: 3px solid var(--pixel-pink-dark);
    border-radius: 14px;
    padding: 0.55rem 0.9rem 0.45rem;
    box-shadow: 4px 4px 0 #f5b3bd;
    font-family: 'Pixelify Sans', 'Inter', sans-serif;
    font-size: 2.1rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    min-width: 8.9rem;
    justify-content: center;
    text-shadow: 1px 1px 0 #ffffff, 2px 2px 0 #ffd0d8;
}
.menu-theme-pixel_cafe .product-detail-footer .flex.items-center.border-2 {
    background: #fffaf0 !important;
    border-color: var(--pixel-border) !important;
    border-radius: 14px !important;
    box-shadow: 3px 3px 0 var(--pixel-shadow) inset;
}
.menu-theme-pixel_cafe .product-detail-footer input[type="number"] {
    color: var(--pixel-ink) !important;
    font-family: 'Pixelify Sans', 'Inter', sans-serif;
}
.menu-theme-pixel_cafe [id^="modal_"] .modal-content {
    border-radius: 22px 22px 0 0 !important;
    background: #fffaf0 !important;
}
.menu-theme-pixel_cafe [id^="modal_"] .modal-content > .w-full.h-64,
.menu-theme-pixel_cafe [id^="modal_"] .modal-content > .w-full.md\:h-72 {
    border-bottom: 3px solid var(--pixel-border);
    background: #fff1dc !important;
}
.menu-theme-pixel_cafe [id^="modal_"] .absolute.bottom-4.left-4 span {
    border: 2px solid var(--pixel-border) !important;
    border-radius: 10px !important;
    background: #fffaf0 !important;
    color: var(--pixel-ink) !important;
    box-shadow: 3px 3px 0 var(--pixel-shadow) !important;
    font-family: 'Pixelify Sans', 'Inter', sans-serif;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.menu-theme-pixel_cafe [id^="modal_"] .absolute.bottom-4.left-4 span i {
    color: var(--pixel-pink-dark) !important;
}
.menu-theme-pixel_cafe .product-detail-body {
    background:
        linear-gradient(90deg, rgba(217,154,112,0.08) 1px, transparent 1px),
        linear-gradient(0deg, rgba(217,154,112,0.08) 1px, transparent 1px),
        #fffaf0 !important;
    background-size: 14px 14px, 14px 14px, auto;
}
.menu-theme-pixel_cafe .product-detail-body h3 {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    color: var(--pixel-ink) !important;
    font-family: 'Pixelify Sans', 'Inter', sans-serif;
    font-size: 2rem !important;
    line-height: 1.05 !important;
    text-shadow: 2px 2px 0 #ffd0d8;
}
.menu-theme-pixel_cafe .product-detail-body h3::before {
    content: "✦";
    color: var(--pixel-pink);
    font-size: 1.05rem;
    margin-right: 0.45rem;
    text-shadow: none;
}
.menu-theme-pixel_cafe .product-detail-body h3::after {
    content: "♡";
    color: var(--pixel-pink);
    font-size: 1rem;
    margin-left: 0.5rem;
    text-shadow: none;
}
.menu-theme-pixel_cafe .product-detail-body > .flex.flex-wrap span {
    border: 2px solid var(--pixel-border) !important;
    border-radius: 10px !important;
    background: #fff8eb !important;
    color: var(--pixel-ink) !important;
    box-shadow: 2px 2px 0 var(--pixel-shadow) !important;
    font-family: 'Pixelify Sans', 'Inter', sans-serif;
}
.menu-theme-pixel_cafe .product-detail-body > .flex.flex-wrap span i {
    color: var(--pixel-pink-dark) !important;
}
.menu-theme-pixel_cafe .product-detail-body > p {
    width: fit-content;
    max-width: 100%;
    background: #fff8eb;
    border: 2px dashed rgba(217,154,112,0.78);
    border-radius: 14px;
    padding: 0.85rem 1rem;
    color: var(--pixel-muted) !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    box-shadow: 3px 3px 0 rgba(239,199,164,0.72);
}

/* ==========================================================================
   YENİ EKLENEN İYİLEŞTİRME STİLLERİ
   ========================================================================== */

/* 1. Dinamik Temalı Butonlar (color-mix ile) */
.btn-primary {
    background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 70%, black)) !important;
    color: white !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important;
}
.btn-primary:hover {
    opacity: 0.95 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
}
.btn-primary:active {
    transform: translateY(0) !important;
}

.btn-success {
    background: linear-gradient(135deg, var(--success, #10b981), color-mix(in srgb, var(--success, #10b981) 70%, black)) !important;
    color: white !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 5px 15px rgba(16, 185, 129, 0.2) !important;
}
.btn-success:hover {
    opacity: 0.95 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3) !important;
}
.btn-success:active {
    transform: translateY(0) !important;
}

/* 2. Pixel Cafe Teması İçin Ek Modallar ve Butonlar */
.menu-theme-pixel_cafe .modal-content button,
.menu-theme-pixel_cafe .modal-content a {
    border: 2px solid var(--pixel-border) !important;
    border-radius: 12px !important;
    background: #fff8eb !important;
    color: var(--pixel-ink) !important;
    box-shadow: 2px 2px 0 var(--pixel-shadow) !important;
    font-family: 'Pixelify Sans', 'Inter', sans-serif !important;
    font-weight: 700 !important;
}
.menu-theme-pixel_cafe .modal-content button:hover,
.menu-theme-pixel_cafe .modal-content a:hover {
    transform: translate(-1px, -1px) !important;
    box-shadow: 3px 3px 0 var(--pixel-shadow) !important;
}
.menu-theme-pixel_cafe .modal-content button:active,
.menu-theme-pixel_cafe .modal-content a:active {
    transform: translate(1px, 1px) !important;
    box-shadow: 1px 1px 0 var(--pixel-shadow) !important;
}

/* Kapat butonu ve özel durumları düzeltme */
.menu-theme-pixel_cafe .modal-content button[onclick^="closeModal"],
.menu-theme-pixel_cafe .modal-content button.absolute {
    background: #ffe0e6 !important;
    border-color: #e78595 !important;
    color: var(--pixel-pink-dark) !important;
    box-shadow: 2px 2px 0 #f5b3bd !important;
    border-radius: 50% !important;
    width: 2.25rem !important;
    height: 2.25rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Özel başlık ve yazı tipleri */
.menu-theme-pixel_cafe .modal-content h3,
.menu-theme-pixel_cafe .modal-content h4 {
    font-family: 'Pixelify Sans', 'Inter', sans-serif !important;
    color: var(--pixel-ink) !important;
    text-shadow: 1px 1px 0 #ffffff, 2px 2px 0 #ffe5db;
}

/* Input ve Textarea piksel uyumluluğu */
.menu-theme-pixel_cafe textarea,
.menu-theme-pixel_cafe input:not([type="radio"]):not([type="checkbox"]) {
    border: 3px solid var(--pixel-border) !important;
    border-radius: 16px !important;
    background: #fffaf0 !important;
    color: var(--pixel-ink) !important;
    box-shadow: 2px 2px 0 var(--pixel-shadow) inset, 2px 2px 0 rgba(0,0,0,0.05) !important;
    font-family: 'Pixelify Sans', 'Inter', sans-serif !important;
}

/* 3. Kategori Kaydırma Gölgeleri (Scroll Hint) */
.cat-scroll-hint-left {
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.9) 0%, transparent 100%);
}
.dark .cat-scroll-hint-left {
    background-image: linear-gradient(to right, rgba(17, 17, 19, 0.9) 0%, transparent 100%);
}
.menu-theme-pixel_cafe .cat-scroll-hint-left {
    background-image: linear-gradient(to right, rgba(255, 243, 223, 0.96) 0%, transparent 100%) !important;
}

.cat-scroll-hint-right {
    background-image: linear-gradient(to left, rgba(255, 255, 255, 0.9) 0%, transparent 100%);
}
.dark .cat-scroll-hint-right {
    background-image: linear-gradient(to left, rgba(17, 17, 19, 0.9) 0%, transparent 100%);
}
.menu-theme-pixel_cafe .cat-scroll-hint-right {
    background-image: linear-gradient(to left, rgba(255, 243, 223, 0.96) 0%, transparent 100%) !important;
}

/* 4. Arama İkonu Renk Uyumu */
.menu-theme-pixel_cafe .fa-search {
    color: var(--pixel-ink) !important;
}

/* 5. Görseli Olmayan Ürün Fallback Tasarımı */
.menu-theme-pixel_cafe .product-card > div:last-child > div {
    background-color: #fff1dc !important;
    border-radius: 12px !important;
    color: var(--pixel-border) !important;
}

/* 6. Mobil / Küçük Ekran Kart Yerleşimi İyileştirmesi */
@media (max-width: 400px) {
    .product-card {
        min-height: 160px;
    }
    .product-card > div:last-child {
        width: 100px !important;
    }
    .product-card::before {
        right: 104px !important;
    }
}