@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700;900&display=swap');

html, body {
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #182038; /* Koyu lacivert yedek renk */
    overflow: hidden;
    font-family: 'Fredoka', sans-serif;
    position: relative;
}

/* Ev görselinin kendisini arka plana bulanık ve loş şekilde yayarak odaklanma etkisi yaratır */
body::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../images/background.png');
    background-size: cover;
    background-position: center;
    filter: blur(25px) brightness(0.5); /* Derinlik hissi için bulanıklaştırma ve karartma */
    transform: scale(1.1); /* Blur kenarlarındaki beyazlığı yok etmek için hafifçe büyütüldü */
    z-index: 1;
    pointer-events: none;
}

/* Evin tam olarak ekrana sığmasını sağlayan ve kaydırmayı engelleyen ana kapsayıcı */
.app-container {
    position: relative;
    z-index: 10; /* Arka plandaki blur efektinin üzerinde durmasını sağlar */
    height: 100vh;
    aspect-ratio: 680/1024; /* Orijinal görsel en-boy oranı */
    max-width: 100vw;
    max-height: 100vh;
    box-shadow: 0 15px 40px rgba(0,0,0,0.3);
    background-image: url('../images/background.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

/* Görsel üzerindeki tıklanabilir alanlar (hotspots) */
.hotspot {
    position: absolute;
    cursor: pointer;
    border-radius: 4px;
    z-index: 10;
    transition: background-color 0.15s ease, transform 0.1s ease;
}

/* Tıklama veya Hover geri bildirimi */
.hotspot:hover {
    background-color: rgba(255, 255, 255, 0.12);
}
.hotspot:active {
    transform: scale(0.97);
}

/* --- Hotspot Koordinat Haritası (Yüzdesel) --- */

/* Menü Linkleri */
.nav-link-1 { top: 13.6%; left: 16%; width: 14%; height: 2.6%; }
.nav-link-2 { top: 13.6%; left: 32%; width: 10%; height: 2.6%; }
.nav-link-3 { top: 13.6%; left: 45%; width: 10%; height: 2.6%; }
.nav-link-4 { top: 13.6%; left: 57%; width: 10%; height: 2.6%; }
.nav-link-5 { top: 13.6%; left: 70%; width: 15%; height: 2.6%; }

/* Üst Kategori Pencereleri */
.win-1 { top: 18.2%; left: 9.5%; width: 18%; height: 11%; border-radius: 45px 45px 0 0; }
.win-2 { top: 18.2%; left: 29.5%; width: 18%; height: 11%; border-radius: 45px 45px 0 0; }
.win-3 { top: 18.2%; left: 51.5%; width: 18%; height: 11%; border-radius: 45px 45px 0 0; }
.win-4 { top: 18.2%; left: 71.5%; width: 18%; height: 11%; border-radius: 45px 45px 0 0; }

/* Kapıyı Aç Butonu */
.door-btn {
    top: 42.1%;
    left: 41.5%;
    width: 17%;
    height: 3.5%;
    border-radius: 8px;
}

/* Footer İletişim Kartı (Düzeltildi: Ekrandan Taşmaz) */
.contact-btn { top: 76.5%; left: 2.2%; width: 23%; height: 12.5%; border-radius: 12px; }

/* Footer Nav Linkleri */
.f-link-1 { top: 79.5%; left: 28%; width: 14%; height: 3%; }
.f-link-2 { top: 79.5%; left: 43%; width: 18%; height: 3%; }
.f-link-3 { top: 79.5%; left: 63%; width: 10%; height: 3%; }

/* Footer Sosyal Medya Butonları */
.soc-1 { top: 79.5%; left: 77.8%; width: 6%; height: 4%; border-radius: 50%; }
.soc-2 { top: 79.5%; left: 83.8%; width: 6%; height: 4%; border-radius: 50%; }
.soc-3 { top: 79.5%; left: 89.8%; width: 6%; height: 4%; border-radius: 50%; }

/* --- DİNAMİK ÜRÜN KARTLARI ÜST ÜSTE BİNDİRME ALANI --- */
.products-overlay-container {
    position: absolute;
    top: 55.2%;
    left: 10.5%;
    width: 79%;
    height: 17.5%;
    z-index: 20;
    pointer-events: none; /* Altındaki görselin tıklanabilirliğini etkilemez */
}

/* Ürünleri yan yana konumlandıracak sarmalayıcı */
.prod-card-wrapper {
    position: absolute;
    top: 0;
    height: 100%;
    width: 22.5%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Beyaz kartı alta yaslar */
    align-items: center;
    pointer-events: auto; /* Kartların içini tıklanabilir yapar */
}

/* Görsel üzerindeki kart pozisyonları (Tam orijinal kartların üzerine oturur) */
.card-pos-1 { left: 0.5%; }
.card-pos-2 { left: 26.2%; }
.card-pos-3 { left: 51.6%; }
.card-pos-4 { left: 77%; }

/* Resim Alanı: Ezilip büzülmeyi önlemek için mutlak konumlandırma (absolute) ile üste bindirildi */
.slipper-image-area {
    position: absolute;
    top: -7%; /* Resmi tam olarak beyaz kartın üst sınırıyla birleştirir */
    width: 100%;
    height: 52%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 5; /* Kartın önünde durmasını garanti eder */
}
.slipper-img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    filter: drop-shadow(3px 4px 2px rgba(0,0,0,0.3));
}

/* Beyaz Kart Yapısı */
.info-card {
    background: #ffffff;
    border: 3px solid #2b2725;
    border-radius: 8px;
    width: 100%;
    height: 54%; /* Sabit yükseklik, flexbox tarafından sıkıştırılamaz */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 6px 4px;
    box-shadow: 0 4px 0 #2b2725;
    position: relative;
    z-index: 2;
}

/* Yazı Tasarımları (Görseldeki font ve renk tonları) */
.prod-name {
    font-size: 0.65rem;
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.col-blue { color: #1b4965; }
.col-pink { color: #cc6088; }
.col-teal { color: #0a7060; }
.col-dark { color: #2b2725; }

.prod-price {
    font-size: 0.85rem;
    font-weight: 900;
    color: #c93e2a;
    line-height: 1;
}

/* Orijinal Mavi "Sepete Ekle" Butonu Tasarımı */
.add-btn {
    background: #3e7ecf;
    color: #ffffff;
    border: 2px solid #2b2725;
    border-radius: 6px;
    width: 90%;
    height: 32%;
    font-size: 0.62rem;
    font-weight: 900;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.1s ease;
    box-shadow: 0 2px 0 #2b2725;
    font-family: 'Fredoka', sans-serif;
}
.add-btn:hover {
    background: #eed95b;
    color: #2b2725;
}
.add-btn:active {
    transform: translateY(1.5px);
    box-shadow: none;
}

/* Kapı Açıldığında Çıkan Karşılama Balonu */
.speech-bubble {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #ffffff 0%, #fffdf0 100%);
    border: 4px solid #2b2725;
    border-radius: 20px;
    padding: 16px;
    text-align: center;
    box-shadow: 0 12px 25px rgba(0,0,0,0.35), 0 5px 0 #2b2725;
    z-index: 100;
    display: none;
    width: 230px;
    font-family: 'Fredoka', sans-serif;
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
    0% { transform: translateX(-50%) scale(0.6); opacity: 0; }
    100% { transform: translateX(-50%) scale(1); opacity: 1; }
}

.speech-bubble::after {
    content: '';
    position: absolute;
    bottom: -11px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 11px 11px 0;
    border-style: solid;
    border-color: #fffdf0 transparent;
    display: block;
    width: 0;
}

.speech-bubble::before {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 15px 15px 0;
    border-style: solid;
    border-color: #2b2725 transparent;
    display: block;
    width: 0;
    z-index: -1;
}

/* Sepet Widget'ı */
.cart-widget {
    position: absolute;
    top: 1.8%;
    right: 2.5%;
    background: #eed95b;
    border: 3px solid #2b2725;
    border-radius: 30px;
    padding: 6px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 0.95rem;
    box-shadow: 4px 4px 0 #2b2725;
    cursor: pointer;
    z-index: 50;
    transition: transform 0.2s;
}
.cart-widget:hover {
    transform: scale(1.05);
}
.cart-badge {
    background: #c93e2a;
    color: white;
    border: 2px solid #2b2725;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

/* Aktif Kategori Vurguları */
.hotspot.active-window {
    background-color: rgba(238, 217, 91, 0.4) !important;
    border: 3px solid #eed95b;
    box-shadow: 0 0 15px #eed95b, inset 0 0 10px rgba(255,255,255,0.6);
    animation: pulseGlow 1.8s infinite alternate;
}

.hotspot.active-nav {
    background-color: rgba(255, 255, 255, 0.25) !important;
    border-bottom: 3px solid #eed95b;
}

@keyframes pulseGlow {
    0% { box-shadow: 0 0 8px #eed95b; }
    100% { box-shadow: 0 0 20px #eed95b, inset 0 0 15px rgba(255,235,59,0.8); }
}

/* Ev İçi Kategori Başlık Tabelası */
.category-banner-board {
    position: absolute;
    top: 48.2%;
    left: 50%;
    transform: translateX(-50%);
    background: #eed95b;
    border: 3px solid #2b2725;
    border-radius: 20px;
    padding: 3px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 0 #2b2725, 0 6px 12px rgba(0,0,0,0.2);
    z-index: 25;
    pointer-events: none;
    white-space: nowrap;
}
.category-banner-board .cat-icon {
    font-size: 1.1rem;
}
.category-banner-board .cat-title {
    font-weight: 900;
    color: #2b2725;
    font-size: 0.9rem;
    letter-spacing: 0.3px;
}
.category-banner-board .cat-badge-count {
    background: #2b2725;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 10px;
}

/* Raf Sayfalama Okları */
.shelf-pagination {
    position: absolute;
    top: 73.2%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 25;
}
.shelf-nav-btn {
    background: #ffffff;
    border: 2.5px solid #2b2725;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #2b2725;
    cursor: pointer;
    box-shadow: 0 2px 0 #2b2725;
    transition: all 0.15s ease;
}
.shelf-nav-btn:hover:not(:disabled) {
    background: #eed95b;
    transform: scale(1.1);
}
.shelf-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}
.page-indicator {
    font-size: 0.75rem;
    font-weight: 800;
    color: #ffffff;
    background: rgba(43, 39, 37, 0.85);
    padding: 2px 10px;
    border-radius: 12px;
    border: 1.5px solid rgba(255,255,255,0.3);
}

/* Ürün Kartı Vurguları ve Animasyonlar */
.products-overlay-container {
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.products-overlay-container.changing {
    opacity: 0;
    transform: translateY(5px);
}
.prod-badge {
    position: absolute;
    top: -12px;
    right: 2px;
    background: #c93e2a;
    color: #fff;
    font-size: 0.55rem;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 8px;
    border: 1.5px solid #2b2725;
    z-index: 10;
    box-shadow: 0 2px 0 #2b2725;
}
.prod-card-wrapper {
    cursor: pointer;
    transition: transform 0.2s ease;
}
.prod-card-wrapper:hover {
    transform: translateY(-3px);
}

/* ULTRA PREMİUM ÇİZGİ FİLM POPUP MODAL STİLLERİ */
.modal-backdrop.show {
    opacity: 0.7;
    backdrop-filter: blur(10px);
}

.cartoon-modal .modal-content {
    background: linear-gradient(160deg, #ffffff 0%, #fffdf3 100%);
    border: 4px solid #2b2725;
    border-radius: 26px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5), 0 10px 0 #2b2725;
    font-family: 'Fredoka', sans-serif;
    position: relative;
    overflow: hidden;
}

.cartoon-modal .modal-header {
    border-bottom: 3.5px solid #2b2725;
    background: #fdf6e2;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.btn-close-cartoon {
    background: #2b2725;
    color: #eed95b;
    border: 2px solid #2b2725;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    box-shadow: 0 2px 0 #2b2725;
}

.btn-close-cartoon:hover {
    background: #c93e2a;
    color: #ffffff;
    transform: rotate(90deg) scale(1.1);
}

/* Modal Ürün Görsel Alanı */
.modal-img-stage {
    position: relative;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(238, 217, 91, 0.35) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 20px;
    margin: 0 10px;
}

.modal-slipper-img {
    max-height: 180px;
    object-fit: contain;
    filter: drop-shadow(4px 10px 8px rgba(0,0,0,0.3));
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal-img-stage:hover .modal-slipper-img {
    transform: scale(1.12) rotate(-3deg);
}

/* Modal Rozetler */
.modal-cat-badge {
    background: #fffdf0;
    color: #2b2725;
    border: 2.5px solid #eed95b;
    font-size: 0.8rem;
    font-weight: 900;
    padding: 4px 12px;
    border-radius: 12px;
    box-shadow: 0 2px 0 #2b2725;
}

.modal-discount-badge {
    background: #c93e2a;
    color: #ffffff;
    border: 2px solid #2b2725;
    font-size: 0.8rem;
    font-weight: 900;
    padding: 4px 12px;
    border-radius: 12px;
    box-shadow: 0 2px 0 #2b2725;
}

.price-pill-box {
    background: #ffffff;
    border: 3px solid #2b2725;
    border-radius: 30px;
    display: inline-flex;
    align-items: center;
    padding: 6px 20px;
    box-shadow: 0 4px 0 #2b2725;
}

.old-price-text {
    text-decoration: line-through;
    color: #888;
    font-size: 1rem;
    font-weight: 700;
}

.current-price-text {
    color: #c93e2a;
    font-size: 1.6rem;
    font-weight: 900;
}

/* Beden Seçim Çipleri */
.size-label {
    font-weight: 900;
    color: #2b2725;
    font-size: 0.95rem;
}

.size-chip {
    background: #ffffff;
    border: 2.5px solid #2b2725;
    border-radius: 12px;
    padding: 6px 16px;
    font-weight: 900;
    font-size: 0.95rem;
    color: #2b2725;
    cursor: pointer;
    box-shadow: 0 3px 0 #2b2725;
    transition: all 0.15s ease;
}

.size-chip:hover {
    background: #eed95b;
    transform: translateY(-2px);
}

.size-chip.selected {
    background: #3e7ecf;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 0 #2b2725;
}

.size-chip.out-of-stock {
    background: #f1f5f9;
    color: #94a3b8;
    border-color: #cbd5e1;
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.65;
    text-decoration: line-through;
}

.size-chip.out-of-stock:hover {
    background: #f1f5f9;
    transform: none;
}

.size-chip .stock-tag {
    font-size: 0.65rem;
    font-weight: 700;
    margin-left: 3px;
    opacity: 0.85;
}

.modal-stock-info {
    font-size: 0.85rem;
    min-height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Modal Butonlar */
.modal-add-btn {
    background: linear-gradient(180deg, #3e7ecf 0%, #2b61a7 100%);
    color: #ffffff;
    border: 3.5px solid #2b2725;
    border-radius: 16px;
    font-size: 1.1rem;
    font-weight: 900;
    padding: 12px 0;
    box-shadow: 0 6px 0 #2b2725;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: 'Fredoka', sans-serif;
}

.modal-add-btn:hover {
    background: #eed95b;
    color: #2b2725;
    transform: translateY(-2px);
    box-shadow: 0 8px 0 #2b2725;
}

.modal-add-btn:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #2b2725;
}

/* Sepet Modal Detayları */
.cart-header-icon {
    background: #eed95b;
    border: 2.5px solid #2b2725;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 0 #2b2725;
    font-size: 1.2rem;
}

.cartoon-input {
    border: 3px solid #2b2725 !important;
    border-radius: 12px 0 0 12px !important;
    font-weight: 700;
    font-family: 'Fredoka', sans-serif;
}

.promo-apply-btn {
    border: 3px solid #2b2725 !important;
    border-radius: 0 12px 12px 0 !important;
    box-shadow: 0 3px 0 #2b2725;
}

.cart-summary-card {
    background: #fdf6e2;
    border: 3px dashed #2b2725;
    border-radius: 18px;
    padding: 16px;
}

.divider-dashed {
    border-bottom: 2px dashed #2b2725;
}

.cartoon-btn-secondary {
    border: 3px solid #2b2725;
    border-radius: 12px;
    font-weight: 800;
    box-shadow: 0 3px 0 #2b2725;
}

.cartoon-checkout-btn {
    background: #2ea44f;
    border: 3.5px solid #2b2725;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 900;
    box-shadow: 0 5px 0 #2b2725;
    padding: 8px 20px;
}

.cartoon-checkout-btn:hover {
    background: #eed95b;
    color: #2b2725;
}

/* Toast Bildirim */
.custom-toast {
    position: fixed;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: #2b2725;
    color: #eed95b;
    border: 3px solid #eed95b;
    padding: 12px 24px;
    border-radius: 30px;
    font-weight: 800;
    font-size: 0.95rem;
    z-index: 9999;
    opacity: 0;
    transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}
.custom-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* Sepete Ekleme Uçma Efekti */
.fly-item {
    position: absolute;
    z-index: 9999;
    width: 32px;
    height: 32px;
    background: #eed95b;
    color: #2b2725;
    border: 2.5px solid #2b2725;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    opacity: 0.95;
    pointer-events: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    transition: all 0.75s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Sepet Sıçrama Efekti */
@keyframes cartBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.25) rotate(-10deg); }
}
.cart-bounce {
    animation: cartBounce 0.4s ease;
}

.cart-item-img {
    width: 55px;
    height: 55px;
    object-fit: contain;
    background: #f8f9fa;
    border: 2px solid #2b2725;
    border-radius: 8px;
    padding: 2px;
}
.cart-item-title {
    font-size: 0.9rem;
    color: #2b2725;
}

/* Mobil Cihazlar İçin Buton İyileştirmesi (Taşmayı önler) */
@media (max-width: 500px) {
    .add-btn span {
        display: none; /* Mobilde 'Sepete Ekle' yazısını gizler */
    }
    .add-btn {
        width: 28px;
        height: 28px;
        border-radius: 50%; /* Butonu yuvarlak sepet ikonu yapar */
        padding: 0;
        font-size: 0.95rem;
        box-shadow: 0 2px 0 #2b2725;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .add-btn i {
        margin: 0;
    }
    
    .prod-name {
        font-size: 0.52rem;
    }
    .prod-price {
        font-size: 0.72rem;
    }
    
    .category-banner-board {
        padding: 2px 10px;
        font-size: 0.75rem;
    }
    .category-banner-board .cat-title {
        font-size: 0.75rem;
    }
}

/* Ana Sayfaya Dön Buton Rozeti */
.home-back-badge {
    position: absolute;
    top: 1.8%;
    left: 2.5%;
    background: #3e7ecf;
    color: #ffffff !important;
    border: 3px solid #2b2725;
    border-radius: 30px;
    padding: 6px 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
    font-size: 0.9rem;
    text-decoration: none;
    box-shadow: 4px 4px 0 #2b2725;
    z-index: 50;
    transition: all 0.2s ease;
}
.home-back-badge:hover {
    background: #eed95b;
    color: #2b2725 !important;
    transform: scale(1.05);
}

/* URUNLER.HTML - EV İÇİ KOMPLE ÜRÜN KATEGORİ ALANI (FULL HOUSE INTERIOR) */
.full-house-products-container {
    position: absolute;
    top: 31.5%;
    left: 7.5%;
    width: 85%;
    height: 46%;
    z-index: 20;
    background: rgba(253, 246, 226, 0.95);
    border: 4px solid #2b2725;
    border-radius: 18px;
    box-shadow: inset 0 0 20px rgba(43, 39, 37, 0.15), 0 8px 20px rgba(0,0,0,0.3);
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 10px;
    overflow: hidden;
    backdrop-filter: blur(4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.full-house-products-container.changing {
    opacity: 0;
    transform: scale(0.97);
}

/* Ev İçi Raf Ürün Kartı */
.house-shelf-card {
    background: #ffffff;
    border: 2.5px solid #2b2725;
    border-radius: 12px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 0 #2b2725;
    position: relative;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.house-shelf-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 7px 0 #2b2725;
    background: #fffdf5;
}

.house-shelf-card .shelf-img-box {
    width: 100%;
    height: 52%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.house-shelf-card .shelf-slipper-img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    filter: drop-shadow(2px 4px 3px rgba(0,0,0,0.25));
    transition: transform 0.2s ease;
}

.house-shelf-card:hover .shelf-slipper-img {
    transform: scale(1.08) rotate(-2deg);
}

.house-shelf-card .shelf-card-info {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.house-shelf-card .shelf-prod-name {
    font-size: 0.7rem;
    font-weight: 900;
    line-height: 1.1;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.house-shelf-card .shelf-prod-price {
    font-size: 0.82rem;
    font-weight: 900;
    color: #c93e2a;
}

.house-shelf-card .shelf-add-btn {
    background: #3e7ecf;
    color: #ffffff;
    border: 2px solid #2b2725;
    border-radius: 6px;
    width: 100%;
    padding: 3px 0;
    font-size: 0.65rem;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 2px 0 #2b2725;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: all 0.1s ease;
}

/* ÜRÜN ROZETLERİ (ÇOK SATAN, FIRSAT, YENİ - KARTIN İÇİNDE NET GÖRÜNÜR) */
.prod-badge {
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    background: #c93e2a !important;
    color: #ffffff !important;
    font-size: 0.65rem !important;
    font-weight: 900 !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    border: 1.5px solid #2b2725 !important;
    z-index: 20 !important;
    box-shadow: 0 2px 0 /* REFERANS GÖRSEL UYUMLU BİREBİR EV İÇİ DÜZENİ */
.ref-layout-container {
    position: absolute;
    top: 16.5%;
    left: 6.5%;
    width: 87%;
    height: 56.8%;
    z-index: 20;
    background: #fdf7e7;
    border: 3.5px solid #2b2725;
    border-radius: 16px;
    box-shadow: inset 0 0 15px rgba(212, 184, 134, 0.4), 0 8px 25px rgba(0,0,0,0.35);
    padding: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: 'Fredoka', sans-serif;
}

/* Üst Ahşap Tabela Barı */
.ref-top-wooden-bar {
    background: linear-gradient(180deg, #eec170 0%, #d49a37 100%);
    border: 3px solid #2b2725;
    border-radius: 12px;
    padding: 4px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 3px 0 #2b2725;
    flex-shrink: 0;
}

.ref-back-pill-btn {
    background: #3e7ecf;
    color: #ffffff !important;
    border: 2px solid #2b2725;
    border-radius: 20px;
    font-weight: 900;
    font-size: 0.78rem;
    padding: 3px 12px;
    text-decoration: none;
    box-shadow: 0 2.5px 0 #2b2725;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s ease;
}

.ref-back-pill-btn:hover {
    background: #eed95b;
    color: #2b2725 !important;
    transform: translateY(-1px);
}

.ref-wooden-title-board {
    background: #fef5db;
    border: 2.5px solid #2b2725;
    border-radius: 10px;
    font-weight: 900;
    color: #2b2725;
    font-size: 0.95rem;
    padding: 2px 20px;
    box-shadow: 0 2.5px 0 #2b2725;
    letter-spacing: 0.3px;
}

.ref-sort-box {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 800;
    color: #2b2725;
}

.ref-sort-select {
    background: #ffffff;
    border: 2px solid #2b2725;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 2px 6px;
    color: #2b2725;
    cursor: pointer;
    outline: none;
    box-shadow: 0 2px 0 #2b2725;
}

/* Ev İçi 2 Sütunlu Gövde */
.ref-split-body {
    display: flex;
    gap: 10px;
    flex-grow: 1;
    margin-top: 6px;
    overflow: hidden;
}

/* Sol Filtre Paneli (Sidebar) */
.ref-sidebar {
    width: 28%;
    background: #f8eee0;
    border: 2.5px solid #2b2725;
    border-radius: 10px;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.05);
    overflow-y: auto;
}

.ref-filter-title {
    font-weight: 900;
    font-size: 0.78rem;
    color: #2b2725;
    border-bottom: 2px dashed #d4b886;
    padding-bottom: 2px;
    margin-bottom: 4px;
}

.ref-subcats-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.subcat-filter-item {
    font-size: 0.68rem;
    font-weight: 800;
    color: #5d4f3e;
    text-decoration: none;
    padding: 3px 6px;
    border-radius: 6px;
    transition: all 0.12s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.subcat-filter-item:hover, .subcat-filter-item.active {
    background: #eed95b;
    color: #2b2725;
    font-weight: 900;
    box-shadow: 0 1.5px 0 #2b2725;
}

.ref-sizes-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.size-filter-chip {
    background: #ffffff;
    border: 1.5px solid #2b2725;
    border-radius: 6px;
    font-weight: 900;
    font-size: 0.65rem;
    padding: 2px 6px;
    color: #2b2725;
    cursor: pointer;
    transition: all 0.12s ease;
    box-shadow: 0 1.5px 0 #2b2725;
}

.size-filter-chip:hover, .size-filter-chip.active {
    background: #3e7ecf;
    color: #ffffff;
}

/* Sağ Ürün Paneli */
.ref-main-content {
    width: 72%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

.ref-breadcrumb-bar {
    font-size: 0.68rem;
    font-weight: 800;
    color: #8c7965;
    margin-bottom: 4px;
}

.ref-product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 8px;
    flex-grow: 1;
    overflow: hidden;
    transition: opacity 0.12s ease;
}

.ref-product-grid.changing {
    opacity: 0;
}

/* Birebir Referans Ürün Kartı */
.ref-product-card {
    background: #ffffff;
    border: 2.5px solid #2b2725;
    border-radius: 10px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 3.5px 0 #2b2725;
    position: relative;
    cursor: pointer;
    transition: all 0.15s ease;
    overflow: hidden;
}

.ref-product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 0 #2b2725;
    background: #fffdf5;
}

.ref-card-img-box {
    width: 100%;
    height: 58%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.ref-card-img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    filter: drop-shadow(2px 4px 3px rgba(0,0,0,0.22));
    transition: transform 0.2s ease;
}

.ref-product-card:hover .ref-card-img {
    transform: scale(1.08) rotate(-2deg);
}

.ref-card-title {
    font-size: 0.72rem;
    font-weight: 900;
    color: #2b2725;
    margin-top: 2px;
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ref-card-price {
    font-size: 0.85rem;
    font-weight: 900;
    color: #c93e2a;
    margin-top: 1px;
}

/* Alt Sayfalama Barı */
.ref-footer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 4px;
    border-top: 2px dashed #e4d3b8;
    margin-top: 4px;
}

.ref-pagination-info {
    font-size: 0.65rem;
    font-weight: 800;
    color: #7d6e5d;
}

.ref-page-buttons {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ref-page-btn {
    background: #ffffff;
    border: 1.5px solid #2b2725;
    border-radius: 6px;
    font-weight: 900;
    font-size: 0.68rem;
    padding: 2px 8px;
    color: #2b2725;
    cursor: pointer;
    box-shadow: 0 1.5px 0 #2b2725;
    transition: all 0.12s ease;
}

.ref-page-btn:hover, .ref-page-btn.active {
    background: #3e7ecf;
    color: #ffffff;
}

/* Mobil Uyumlu Kurallar (max-width: 650px) */
@media (max-width: 650px) {
    .ref-layout-container {
        top: 25.5% !important;
        left: 5% !important;
        width: 90% !important;
        height: 51.5% !important;
        padding: 5px !important;
    }

    .ref-top-wooden-bar {
        padding: 2px 6px !important;
    }

    .ref-back-pill-btn {
        font-size: 0.65rem !important;
        padding: 2px 6px !important;
    }

    .ref-wooden-title-board {
        font-size: 0.75rem !important;
        padding: 1px 8px !important;
    }

    .ref-sort-box {
        font-size: 0.62rem !important;
    }

    .ref-sort-select {
        font-size: 0.62rem !important;
        padding: 1px 3px !important;
    }

    .ref-sidebar {
        width: 32% !important;
        padding: 4px !important;
    }

    .ref-filter-title {
        font-size: 0.65rem !important;
    }

    .subcat-filter-item {
        font-size: 0.58rem !important;
        padding: 2px 3px !important;
    }

    .size-filter-chip {
        font-size: 0.55rem !important;
        padding: 1px 4px !important;
    }

    .ref-main-content {
        width: 68% !important;
    }

    .ref-breadcrumb-bar {
        font-size: 0.6rem !important;
    }

    .ref-product-card {
        padding: 4px !important;
    }

    .ref-card-img-box {
        height: 52% !important;
    }

    .ref-card-title {
        font-size: 0.62rem !important;
    }

    .ref-card-price {
        font-size: 0.75rem !important;
    }

    .ref-pagination-info {
        font-size: 0.58rem !important;
    }

    .ref-page-btn {
        font-size: 0.6rem !important;
        padding: 1px 5px !important;
    }

    /* Footer İletişim ve Sosyal Medya Butonlarının Taşmasını Engelleme */
    .contact-btn {
        top: 75.8% !important;
        left: 2.2% !important;
        width: 24% !important;
        height: 12% !important;
        border-radius: 10px !important;
    }

    .f-link-1 { top: 78.5% !important; }
    .f-link-2 { top: 78.5% !important; }
    .f-link-3 { top: 78.5% !important; }


/* Üye Giriş / Kayıt Modal Sekmeleri */
.cartoon-tab-group {
    background: #f1f5f9;
    padding: 5px;
    border-radius: 14px;
    border: 2px solid #2b2725;
}

.cartoon-tab-btn {
    border: none;
    border-radius: 10px;
    font-weight: 800;
    font-size: 0.9rem;
    color: #64748b;
    padding: 8px;
    transition: all 0.2s ease;
}

.cartoon-tab-btn.active {
    background: #3e7ecf;
    color: #ffffff;
    box-shadow: 0 3px 0 #2b2725;
}