/* ===============================
   IZBEL QR MENU WOW STABLE
   =============================== */

:root {
    --card-radius: 20px;
    --brand-primary: #0ea5e9;
    --brand-accent: #0f172a;
    --bg-soft: #f6f7fb;
}

/* ===== CARD ===== */

.product-card {
    position: relative;
    border-radius: var(--card-radius);
    background: #fff;
    border: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 12px 26px rgba(15,23,42,.08);
    transition: all .18s ease;
    overflow: hidden;
}

    .product-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 26px 60px rgba(15,23,42,.14);
    }

    /* Glow frame */
    .product-card::before {
        content: "";
        position: absolute;
        inset: -1px;
        border-radius: var(--card-radius);
        background: linear-gradient( 135deg, rgba(14,165,233,.45), rgba(99,102,241,.30), rgba(16,185,129,.25) );
        opacity: 0;
        transition: .25s ease;
        pointer-events: none;
    }

    .product-card:hover::before {
        opacity: 1;
    }

/* ===== IMAGE ===== */

.p-cover {
    position: relative;
    overflow: hidden;
}

.p-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.product-card:hover .p-img {
    transform: scale(1.08);
}

/* gradient overlay */
.p-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.32));
    pointer-events: none;
}

/* shine effect */
.p-cover::before {
    content: "";
    position: absolute;
    top: -70%;
    left: -80%;
    width: 140%;
    height: 240%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
    transform: rotate(20deg);
    opacity: 0;
    transition: .5s ease;
}

.product-card:hover .p-cover::before {
    opacity: 1;
    left: 100%;
}

/* ===== BADGES ===== */

.p-badges {
    position: absolute;
    left: 12px;
    top: 12px;
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    z-index: 3;
}

.p-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .65rem;
    font-size: .75rem;
    font-weight: 800;
    border-radius: 999px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(0,0,0,.08);
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 22px rgba(0,0,0,.16);
    white-space: nowrap;
}

/* ===== CONTENT ===== */

.p-title {
    font-weight: 900;
    letter-spacing: -.4px;
}

.p-desc {
    color: rgba(15,23,42,.65);
}

.p-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: .8rem;
}

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

.p-cta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .8rem;
    border-radius: 999px;
    border: 1px solid rgba(15,23,42,.12);
    background: rgba(255,255,255,.95);
    font-weight: 700;
    font-size: .85rem;
    transition: .15s;
}

    .p-cta:hover {
        background: var(--brand-primary);
        color: #fff;
        border-color: var(--brand-primary);
    }

/* ===== HERO ===== */

.page-hero {
    border-radius: var(--card-radius);
    border: 1px solid rgba(15,23,42,.08);
    background: radial-gradient(600px 200px at 10% 0%, rgba(14,165,233,.10), transparent 60%), radial-gradient(500px 200px at 90% 0%, rgba(99,102,241,.10), transparent 60%), #fff;
    box-shadow: 0 14px 44px rgba(15,23,42,.08);
}

.hero-title {
    font-weight: 900;
    letter-spacing: -.6px;
}

.hero-sub {
    color: rgba(15,23,42,.65);
}

/* ===== BACK BUTTON ===== */

.back-btn {
    border-radius: 999px;
    border: 1px solid rgba(15,23,42,.12);
    background: #fff;
    font-weight: 700;
    transition: .15s;
}

    .back-btn:hover {
        background: var(--brand-primary);
        color: #fff;
        border-color: var(--brand-primary);
    }

/* ===== SIDE CARD ===== */

.side-card {
    border-radius: var(--card-radius);
    border: 1px solid rgba(15,23,42,.08);
    background: #fff;
    box-shadow: 0 12px 26px rgba(15,23,42,.08);
}

.mini-row {
    padding: .55rem;
    border-radius: 14px;
    transition: .15s;
}

    .mini-row:hover {
        background: rgba(15,23,42,.03);
        transform: translateY(-1px);
    }

/* ===== TO TOP ===== */

.to-top {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1030;
    border-radius: 999px;
    padding: .6rem .9rem;
    border: 1px solid rgba(15,23,42,.12);
    background: #fff;
    box-shadow: 0 18px 50px rgba(15,23,42,.18);
    font-weight: 800;
    display: none;
    transition: .15s;
}

    .to-top:hover {
        background: var(--brand-primary);
        color: #fff;
        border-color: var(--brand-primary);
    }

@media (max-width:991.98px) {
    .to-top {
        right: 14px;
        bottom: 14px;
    }
}
/* Bootstrap ratio bağımsız, garantili resim alanı */
.p-aspect {
    width: 100%;
    aspect-ratio: 4 / 3; /* resim alanı mutlaka oluşur */
    position: relative;
    background: #eef2f7; /* resim gelmezse bile boşluk rengi */
}

    .p-aspect > .p-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }