:root {
    /* --- RENK PALETİ --- */
    --c-primary: #e12026;   /* Kırmızı */
    --c-secondary: #fdcc06; /* Sarı */
    --c-dark: #181818;
    --c-black: #000000;
    --c-white: #ffffff;
    --c-text: #333333;
    --c-danger: #ff5353;
    
    /* --- ARKA PLANLAR & EFEKTLER --- */
    --bg-overlay: rgba(0, 0, 0, .50);
    --bg-glass-white: rgba(255, 255, 255, 0.5);
    --blur-amt: 5px;
    
    /* --- TİPOGRAFİ --- */
    /* Elementor fontu yoksa Archivo kullanılır */
    --font-primary: 'LEMONMILK', sans-serif;
    
    /* --- ANIMASYON SÜRELERİ --- */
    --anim-fast: 250ms;
    --anim-med: 450ms;
    
    /* --- Z-INDEX KATMANLARI --- */
    --z-base: 1;
    --z-tooltip: 2;
    --z-overlay: 99999;
}

/* =========================================
   ANIMASYON TANIMLARI (Keyframes)
   ========================================= */

@keyframes revealTooltip {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes openModal {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}

@keyframes closeModal {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes fadeDown {
    to {
        opacity: 1;
        transform: translateY(0) translateX(-50%);
    }
}

@keyframes rotate {
    100% { transform: rotate(360deg); }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

/* =========================================
   GENEL BİLEŞENLER
   ========================================= */

/* Tab Başlığı */
.elementor-tab-title {
    background: linear-gradient(120deg, var(--c-primary), var(--c-secondary));
}

.modal-link {
    width: 100%;
    cursor: pointer;
}

/* Fiyat Etiketleri */
ul.fiyatlar, 
.fiyat {
    font-size: 16px;
    color: var(--c-black);
    font-weight: 900;
    text-align: center;
    border: 2px solid #ac8f6b!important;
    padding: 6px 8px;
    font-family: var(--font-primary);
}

ul.fiyatlar li span.tl, 
.fiyat span.tl {
    font-size: 70%;
}

/* Alerjen Listesi */
ul.alerjenler {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: start;
    gap: 4px;
    margin-bottom: 12px;
}

ul.alerjenler li {
    width: 28px;
    height: 28px;
}

/* Tooltip */
div#tooltip {
    background: var(--c-dark);
    color: var(--c-white);
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 20px;
    z-index: var(--z-tooltip);
    animation: revealTooltip 500ms forwards; /* Shorthand kullanıldı */
    font-family: var(--font-primary);
}

/* =========================================
   MODAL YAPISI
   ========================================= */

div#modal-product {
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
    top: 0;
    left: 0;
    z-index: var(--z-overlay);
    background: var(--bg-overlay);
    backdrop-filter: blur(var(--blur-amt)) grayscale(1);
    opacity: 0; /* Başlangıçta görünmez */
    pointer-events: none; /* Tıklamaları engelle */
}

/* Modal Açılma/Kapanma Durumları */
div#modal-product.animateOpen {
    animation: openModal var(--anim-med) forwards ease-in-out;
    pointer-events: unset; /* Tıklamaları aç */
    opacity: 1;
}

div#modal-product.animateClose {
    animation: closeModal var(--anim-fast) forwards ease-in-out;
}

/* Modal Kapat Butonu */
#modal-product .close {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 45px;
    height: 45px;
    background: var(--bg-glass-white);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    color: var(--c-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

#modal-product .close:hover {
    background: var(--c-danger);
    color: var(--c-white);
    transform: rotate(90deg);
    border-color: transparent;
}

#modal-product .close svg {
    width: 22px;
}

#modal-product .close path {
    fill: currentColor; /* SVG rengini parent'tan alır */
}

/* Modal İçerik Kutusu */
.modal-product-content {
    overflow-y: auto; /* Sadece dikey scroll */
    display: flex;
    flex-direction: column;
    gap: 1em;
    justify-content: flex-start; /* İçerik uzarsa baştan başlasın */
    align-items: center;
    margin: 30px 20px 100px 20px;
    max-width: 550px;
    width: 90%; /* Mobilde taşmayı önler */
    background: var(--c-white);
    max-height: 80vh; /* Çok uzun içerikte modalın ekrandan taşmasını engeller */
}

.modal-product-content .modal-product-content-inner {
    padding: 1em 3em 2em 3em;
    text-align: left;
    width: 100%;
}

.modal-product-content .modal-product-content-inner h2 {
    font-size: 18px;
    font-weight: 400;
    color: var(--c-black);
    margin-bottom: 12px;
    font-family: var(--font-primary);
}

.modal-product-content .modal-product-content-inner p {
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 12px;
    color: var(--c-black);
    font-family: var(--font-primary);
    font-weight: 100;
}

.modal-product-content .modal-product-content-inner .fiyat {
    color: var(--c-black);
    font-size: 20px;
    margin-bottom: 24px;
    display: inline-block;
    padding: 5px 12px;
}

/* Modal İçerisindeki Ekstra Öğeler */
div#modal-product strong {
    font-weight: 700;
}

div#modal-product .sut-tercihi {
    margin-bottom: 10px;
}

div#modal-product .sut-tercihi, 
div#modal-product .surup-tercihi {
    font-size: 12px;
    line-height: 14px;
}

#modal-product .logo {
    position: relative;
    width: 60px;
    text-align: center;
}

#modal-product .serit {
    bottom: 0;
    width: 100%;
    left: 0;
    max-width: 100vw;
    aspect-ratio: unset !important;
}

/* =========================================
   ÜRÜN GÖRSELLERİ & SPINNER
   ========================================= */

.product-image {
    display: block;
    height: auto;
    position: relative;
    width: 100%;
}

.product-image img,
.modal-product-content .product-image img {
    display: block;
    width: 100%;
    object-fit: cover;
	aspect-ratio: 1;
     /* Loop item için */
}

/* Modal içindeki resmin köşelerini düzelt */
.modal-product-content .product-image img {
    border-radius: 0;
    border-top-left-radius: 10px; /* Modalın köşesine uyum sağlar */
    border-top-right-radius: 10px;
}

.modal-product-content .product-image .sticker {
    aspect-ratio: unset;
    position: absolute;
    width: 180px;
    filter: drop-shadow(0px -6px 16px rgba(0, 0, 0, .15));
    right: 40%;
    transform: translateX(50%);
    bottom: 0;
    z-index: 2;
}

/* Loading Spinner */
.loading {
    display: block;
    height: 50px;
    width: 50px;
}

.spinner {
    animation: rotate 2s linear infinite;
    z-index: 2;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Margin yerine transform ile tam ortalama */
    width: 50px;
    height: 50px;
}

.spinner .path {
    stroke: var(--c-white);
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
}

div#modal-product .excerpt {
    font-size: 12px;
    line-height: 14px;
    margin-bottom: 16px;
    font-family: 'Outfit', sans-serif;
}