/* ==================================================
   INTIME MUTFAK - PREMIUM ALT ŞERİT
   İnce / Minimal / Kurumsal
   ================================================== */

.intime-bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    z-index: 99999;

    background: rgba(20, 20, 20, 0.98);

    border-top: 1px solid rgba(255, 255, 255, 0.10);

    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.10);

    /* Normalde gizli */
    transform: translateY(110%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        transform 0.32s ease,
        opacity 0.22s ease,
        visibility 0.32s ease;
}


/* SAYFANIN ALTINA GELİNCE GÖRÜNÜR */

.intime-bottom-bar.intime-visible {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* ==================================================
   İÇ YAPI
   ================================================== */

.intime-bottom-inner {
    width: 100%;
    max-width: 1280px;

    height: 52px;

    margin: 0 auto;
    padding: 0 22px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    box-sizing: border-box;
}


/* ==================================================
   SOL - MARKA
   ================================================== */

.intime-bottom-brand {
    display: flex;
    align-items: center;

    gap: 14px;

    min-width: 0;

    color: #ffffff;
}


.intime-bottom-brand strong {
    font-size: 14px;
    line-height: 1;

    font-weight: 700;

    letter-spacing: 1.4px;

    white-space: nowrap;
}


.intime-bottom-brand span {
    position: relative;

    padding-left: 14px;

    font-size: 11px;
    line-height: 1;

    font-weight: 400;

    color: rgba(255, 255, 255, 0.52);

    white-space: nowrap;
}


/* İNCE AYIRICI */

.intime-bottom-brand span::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 1px;
    height: 16px;

    background: rgba(255, 255, 255, 0.15);

    transform: translateY(-50%);
}


/* ==================================================
   SAĞ - BUTONLAR
   ================================================== */

.intime-bottom-actions {
    display: flex;
    align-items: center;

    gap: 8px;

    flex-shrink: 0;
}


.intime-bottom-actions a {
    height: 34px;

    padding: 0 15px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    border-radius: 3px;

    font-size: 11px;
    line-height: 1;

    font-weight: 600;

    text-decoration: none !important;

    white-space: nowrap;

    transition:
        background 0.20s ease,
        border-color 0.20s ease,
        color 0.20s ease,
        transform 0.20s ease;
}


/* ==================================================
   WHATSAPP
   ================================================== */

.intime-whatsapp {
    color: rgba(255, 255, 255, 0.92) !important;

    background: transparent;

    border: 1px solid rgba(255, 255, 255, 0.20);
}


.intime-whatsapp:hover {
    color: #ffffff !important;

    background: rgba(255, 255, 255, 0.07);

    border-color: rgba(255, 255, 255, 0.32);

    transform: translateY(-1px);
}


/* ==================================================
   TEKLİF AL
   ================================================== */

.intime-offer {
    color: #161616 !important;

    background: #ffffff;

    border: 1px solid #ffffff;
}


.intime-offer:hover {
    color: #161616 !important;

    background: #eeeeee;

    border-color: #eeeeee;

    transform: translateY(-1px);
}


/* ==================================================
   TABLET
   ================================================== */

@media (max-width: 900px) {

    .intime-bottom-brand span {
        display: none;
    }

}


/* ==================================================
   MOBİL
   ================================================== */

@media (max-width: 768px) {

    .intime-bottom-inner {
        height: 54px;

        padding: 7px 10px;
    }


    .intime-bottom-brand {
        display: none;
    }


    .intime-bottom-actions {
        width: 100%;

        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 7px;
    }


    .intime-bottom-actions a {
        width: 100%;

        height: 40px;

        padding: 0 8px;

        font-size: 11px;

        border-radius: 3px;
    }

}


/* ==================================================
   ÇOK KÜÇÜK TELEFONLAR
   ================================================== */

@media (max-width: 360px) {

    .intime-bottom-actions a {
        font-size: 10px;
    }

}
/* ============================================================
   INTIME MUTFAK
   YUKARI ÇIK BUTONU - FINAL UX V3
   Dikey Yazı + Mini Ok + Yumuşak Geçiş
   ============================================================ */

#scrollTopBtn {
    position: fixed !important;

    /* Puan butonunun hemen üstü */
    right: 18px !important;
    bottom: 62px !important;

    width: 24px !important;
    height: 105px !important;

    padding: 0 !important;
    margin: 0 !important;

    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    overflow: visible !important;
    cursor: pointer !important;

    z-index: 99992 !important;

    /* Varsayılan görünür */
    opacity: 0.88 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    transform: translateY(0) !important;

    transition:
        opacity 0.45s ease,
        transform 0.45s ease !important;
}


/* ============================================================
   JS BUTONU GİZLERKEN
   ============================================================ */

#scrollTopBtn.intime-scroll-hidden {
    opacity: 0 !important;

    transform: translateY(7px) !important;

    pointer-events: none !important;
}


/* ============================================================
   JS BUTONU GÖSTERİRKEN
   ============================================================ */

#scrollTopBtn.intime-scroll-visible {
    opacity: 0.88 !important;

    transform: translateY(0) !important;

    pointer-events: auto !important;
}


/* ============================================================
   İÇ TAŞIYICI
   ============================================================ */

#scrollTopBtn > div {
    position: relative !important;

    width: 100% !important;
    height: 100% !important;

    padding: 0 !important;
    margin: 0 !important;

    background: transparent !important;
}


/* ============================================================
   PLATINMARKET ORİJİNAL YAZISINI GİZLE
   ============================================================ */

#scrollTopBtn > div > div {
    display: none !important;
}


/* ============================================================
   MİNİ YUKARI OK
   ============================================================ */

#scrollTopBtn svg {
    position: absolute !important;

    top: 3px !important;
    left: 50% !important;

    width: 12px !important;
    height: 8px !important;

    padding: 0 !important;
    margin: 0 !important;

    background: transparent !important;

    transform: translateX(-50%) !important;

    overflow: visible !important;
}


/* OK ÇİZGİSİ */

#scrollTopBtn svg path,
#scrollTopBtn svg polyline,
#scrollTopBtn svg line {
    stroke: #111111 !important;
    stroke-width: 2 !important;
}


/* ============================================================
   YUKARI ÇIK YAZISI
   ============================================================ */

#scrollTopBtn::after {
    content: "YUKARI ÇIK";

    position: absolute;

    left: 50%;
    top: 57px;

    display: block;

    width: max-content;

    padding: 0;
    margin: 0;

    background: transparent;

    color: #111111;

    font-family: Arial, sans-serif;

    font-size: 9px;
    font-weight: 700;
    line-height: 1;

    letter-spacing: 1.15px;

    white-space: nowrap;
    text-transform: uppercase;

    transform:
        translate(-50%, -50%)
        rotate(-90deg);

    transform-origin: center;

    pointer-events: none;
}


/* ============================================================
   HOVER
   ============================================================ */

#scrollTopBtn.intime-scroll-visible:hover {
    opacity: 1 !important;

    transform: translateY(-2px) !important;
}


/* ============================================================
   INTIME ALT ŞERİDİ GÖRÜNÜRKEN
   ============================================================ */

body:has(.intime-bottom-bar.intime-visible) #scrollTopBtn {
    bottom: 64px !important;
}


/* ============================================================
   MOBİL
   ============================================================ */

@media (max-width: 768px) {

    #scrollTopBtn {
        right: 9px !important;
        bottom: 62px !important;

        width: 22px !important;
        height: 100px !important;
    }

    #scrollTopBtn::after {
        top: 55px;

        font-size: 8px;
        font-weight: 700;

        letter-spacing: 1px;
    }

    #scrollTopBtn svg {
        top: 3px !important;

        width: 11px !important;
        height: 7px !important;
    }

    body:has(.intime-bottom-bar.intime-visible) #scrollTopBtn {
        bottom: 64px !important;
    }
}

/* İNTİME – Minimal premium scrollbar */
html {
    scrollbar-width: thin;
    scrollbar-color: #343434 transparent;
}

/* Chrome, Edge ve Safari */
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #343434;
    border: 2px solid #ffffff;
    border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
    background: #111111;
}

/* =====================================================
   İNTİME MUTFAK – SLIDER PAGINATION / 2026 UX
   SADE, PREMIUM VE MASAÜSTÜ UYUMLU
   ===================================================== */

@media screen and (min-width: 769px) {

    /* Slider kontrol alanı */
    #controls {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;

        width: 100% !important;
        height: 30px !important;

        margin: -30px 0 0 0 !important;
        padding: 0 !important;

        position: relative !important;
        z-index: 20 !important;

        list-style: none !important;
        background: transparent !important;
    }

    /* Pasif slider göstergeleri */
    #controls li {
        display: block !important;
        flex: 0 0 auto !important;

        width: 7px !important;
        height: 7px !important;

        margin: 0 !important;
        padding: 0 !important;

        background-color: rgba(255, 255, 255, 0.48) !important;
        border: 1px solid rgba(255, 255, 255, 0.82) !important;
        border-radius: 999px !important;

        box-shadow:
            0 1px 4px rgba(0, 0, 0, 0.35) !important;

        cursor: pointer !important;
        opacity: 0.90 !important;

        transition:
            width 0.30s ease,
            background-color 0.25s ease,
            border-color 0.25s ease,
            box-shadow 0.25s ease,
            opacity 0.25s ease !important;
    }

    /* Pasif noktanın üzerine gelindiğinde */
    #controls li:not(.current):hover {
        background-color: #ffffff !important;
        border-color: #ffffff !important;
        opacity: 1 !important;

        box-shadow:
            0 1px 5px rgba(0, 0, 0, 0.42) !important;
    }

    /* Aktif slider göstergesi */
    #controls li.current {
        width: 24px !important;
        height: 7px !important;

        background:
            linear-gradient(
                90deg,
                #e74c3c 0%,
                #c92832 100%
            ) !important;

        border-color: rgba(255, 255, 255, 0.90) !important;
        opacity: 1 !important;

        box-shadow:
            0 2px 7px rgba(0, 0, 0, 0.32),
            0 0 7px rgba(231, 76, 60, 0.30) !important;
    }

    /* Noktaların içindeki bağlantı */
    #controls li a {
        display: block !important;

        width: 100% !important;
        height: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;
        border: 0 !important;
        border-radius: inherit !important;

        /* 1-2-3 gibi numaraları görünmez yapar */
        color: transparent !important;
        font-size: 0 !important;
        line-height: 0 !important;
        text-indent: -9999px !important;

        overflow: hidden !important;
    }
}
/* ==========================================================
   INTIME MUTFAK — ANA SAYFA VİTRİN ŞERİTLERİ
   Vitrinler: #urunler_0 ile #urunler_9
   İçerik:
   - 957x50 px kategori görselleri
   - Başlık ikonları
   - Şık Tümünü Gör butonu
   - Masaüstü ve mobil görünüm
========================================================== */


/* ==========================================================
   TÜM VİTRİN ŞERİTLERİNİN ORTAK YAPISI
========================================================== */

#urunler_0 .icerik > p.baslik,
#urunler_1 .icerik > p.baslik,
#urunler_2 .icerik > p.baslik,
#urunler_3 .icerik > p.baslik,
#urunler_4 .icerik > p.baslik,
#urunler_5 .icerik > p.baslik,
#urunler_6 .icerik > p.baslik,
#urunler_7 .icerik > p.baslik,
#urunler_8 .icerik > p.baslik,
#urunler_9 .icerik > p.baslik {
    position: relative !important;

    width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
    box-sizing: border-box !important;

    margin: 10px 0 15px 0 !important;
    padding: 0 16px 0 15px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    overflow: hidden !important;

    color: #ffffff !important;
    font-family: "Open Sans", sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;

    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.35) !important;
}


/* ==========================================================
   VİTRİN ARKA PLAN GÖRSELLERİ
========================================================== */


/* 00 — En Çok Arananlar */

#urunler_0 .icerik > p.baslik {
    background-image:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.45) 0%,
            rgba(0, 0, 0, 0.10) 48%,
            rgba(0, 0, 0, 0.14) 100%
        ),
        url("https://platincdn.com/3526/dosyalar/images/00-en-cok-arananlar-957x50.png") !important;
}


/* 01 — Kafeterya Ekipmanları */

#urunler_1 .icerik > p.baslik {
    background-image:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.40) 0%,
            rgba(0, 0, 0, 0.08) 48%,
            rgba(0, 0, 0, 0.14) 100%
        ),
        url("https://platincdn.com/3526/dosyalar/images/01-kafeterya-ekipmanlari-957x50.png") !important;
}


/* 02 — Taşıma ve Servis Arabaları */

#urunler_2 .icerik > p.baslik {
    background-image:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.40) 0%,
            rgba(0, 0, 0, 0.08) 48%,
            rgba(0, 0, 0, 0.14) 100%
        ),
        url("https://platincdn.com/3526/dosyalar/images/02-tasima-servis-arabalari-957x50.png") !important;
}


/* 03 — Kafeterya Pişirme Ekipmanları */

#urunler_3 .icerik > p.baslik {
    background-image:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.40) 0%,
            rgba(0, 0, 0, 0.08) 48%,
            rgba(0, 0, 0, 0.14) 100%
        ),
        url("https://platincdn.com/3526/dosyalar/images/03-kafeterya-pisirme-ekipmanlari-957x50.png") !important;
}


/* 04 — Sunumlar Şimdi Daha Şık */

#urunler_4 .icerik > p.baslik {
    background-image:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.40) 0%,
            rgba(0, 0, 0, 0.08) 48%,
            rgba(0, 0, 0, 0.14) 100%
        ),
        url("https://platincdn.com/3526/dosyalar/images/04-sunumlar-simdi-daha-sik-957x50.png") !important;
}


/* 05 — Kahve Makineleri */

#urunler_5 .icerik > p.baslik {
    background-image:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.40) 0%,
            rgba(0, 0, 0, 0.08) 48%,
            rgba(0, 0, 0, 0.14) 100%
        ),
        url("https://platincdn.com/3526/dosyalar/images/05-kahve-makineleri-957x50.png") !important;
}


/* 06 — Teşhir ve Servis Hatları */

#urunler_6 .icerik > p.baslik {
    background-image:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.40) 0%,
            rgba(0, 0, 0, 0.08) 48%,
            rgba(0, 0, 0, 0.14) 100%
        ),
        url("https://platincdn.com/3526/dosyalar/images/06-teshir-servis-hatlari-957x50.png") !important;
}


/* 07 — İçecek ve Bar Ekipmanları */

#urunler_7 .icerik > p.baslik {
    background-image:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.40) 0%,
            rgba(0, 0, 0, 0.08) 48%,
            rgba(0, 0, 0, 0.14) 100%
        ),
        url("https://platincdn.com/3526/dosyalar/images/07-icecek-bar-ekipmanlari-957x50.png") !important;
}


/* 08 — Pasta Kalıpları */

#urunler_8 .icerik > p.baslik {
    background-image:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.40) 0%,
            rgba(0, 0, 0, 0.08) 48%,
            rgba(0, 0, 0, 0.14) 100%
        ),
        url("https://platincdn.com/3526/dosyalar/images/08-pasta-kaliplari-957x50.png") !important;
}


/* 09 — Pasta, Tatlı ve Baklava Teşhir Dolapları */

#urunler_9 .icerik > p.baslik {
    background-image:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.40) 0%,
            rgba(0, 0, 0, 0.08) 48%,
            rgba(0, 0, 0, 0.14) 100%
        ),
        url("https://platincdn.com/3526/dosyalar/images/09-pasta-tatli-baklava-teshir-dolaplari-957x50.png") !important;
}


/* ==========================================================
   BAŞLIK VE KATEGORİ İKONU
========================================================== */

#urunler_0 .intime-vitrin-baslik,
#urunler_1 .intime-vitrin-baslik,
#urunler_2 .intime-vitrin-baslik,
#urunler_3 .intime-vitrin-baslik,
#urunler_4 .intime-vitrin-baslik,
#urunler_5 .intime-vitrin-baslik,
#urunler_6 .intime-vitrin-baslik,
#urunler_7 .intime-vitrin-baslik,
#urunler_8 .intime-vitrin-baslik,
#urunler_9 .intime-vitrin-baslik {
    position: relative;
    z-index: 2;

    min-width: 0;

    display: flex;
    align-items: center;
    gap: 8px;

    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
}


#urunler_0 .intime-vitrin-baslik > svg,
#urunler_1 .intime-vitrin-baslik > svg,
#urunler_2 .intime-vitrin-baslik > svg,
#urunler_3 .intime-vitrin-baslik > svg,
#urunler_4 .intime-vitrin-baslik > svg,
#urunler_5 .intime-vitrin-baslik > svg,
#urunler_6 .intime-vitrin-baslik > svg,
#urunler_7 .intime-vitrin-baslik > svg,
#urunler_8 .intime-vitrin-baslik > svg,
#urunler_9 .intime-vitrin-baslik > svg {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;

    fill: none;
    stroke: #ffffff;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;

    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.75));
}


#urunler_0 .intime-vitrin-baslik > span,
#urunler_1 .intime-vitrin-baslik > span,
#urunler_2 .intime-vitrin-baslik > span,
#urunler_3 .intime-vitrin-baslik > span,
#urunler_4 .intime-vitrin-baslik > span,
#urunler_5 .intime-vitrin-baslik > span,
#urunler_6 .intime-vitrin-baslik > span,
#urunler_7 .intime-vitrin-baslik > span,
#urunler_8 .intime-vitrin-baslik > span,
#urunler_9 .intime-vitrin-baslik > span {
    overflow: hidden;

    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
}


/* ==========================================================
   TÜMÜNÜ GÖR BUTONU
========================================================== */

#urunler_0 .intime-tumunu-gor,
#urunler_1 .intime-tumunu-gor,
#urunler_2 .intime-tumunu-gor,
#urunler_3 .intime-tumunu-gor,
#urunler_4 .intime-tumunu-gor,
#urunler_5 .intime-tumunu-gor,
#urunler_6 .intime-tumunu-gor,
#urunler_7 .intime-tumunu-gor,
#urunler_8 .intime-tumunu-gor,
#urunler_9 .intime-tumunu-gor {
    position: relative;
    z-index: 3;

    height: 32px;
    box-sizing: border-box;

    margin: 0;
    padding: 0 5px 0 13px;

    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.16),
            rgba(255, 255, 255, 0.04)
        ),
        rgba(8, 8, 8, 0.74);

    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 18px;

    box-shadow:
        0 3px 9px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);

    font-family: "Open Sans", sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none !important;

    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);

    transition:
        color 0.22s ease,
        background-color 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.22s ease;
}


/* Butonun yuvarlak ok alanı */

#urunler_0 .intime-vitrin-ok,
#urunler_1 .intime-vitrin-ok,
#urunler_2 .intime-vitrin-ok,
#urunler_3 .intime-vitrin-ok,
#urunler_4 .intime-vitrin-ok,
#urunler_5 .intime-vitrin-ok,
#urunler_6 .intime-vitrin-ok,
#urunler_7 .intime-vitrin-ok,
#urunler_8 .intime-vitrin-ok,
#urunler_9 .intime-vitrin-ok {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #111111;
    background-color: #ffffff;
    border-radius: 50%;

    transition:
        color 0.22s ease,
        background-color 0.22s ease,
        transform 0.22s ease;
}


#urunler_0 .intime-vitrin-ok svg,
#urunler_1 .intime-vitrin-ok svg,
#urunler_2 .intime-vitrin-ok svg,
#urunler_3 .intime-vitrin-ok svg,
#urunler_4 .intime-vitrin-ok svg,
#urunler_5 .intime-vitrin-ok svg,
#urunler_6 .intime-vitrin-ok svg,
#urunler_7 .intime-vitrin-ok svg,
#urunler_8 .intime-vitrin-ok svg,
#urunler_9 .intime-vitrin-ok svg {
    width: 12px;
    height: 12px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* Buton hover efekti */

#urunler_0 .intime-tumunu-gor:hover,
#urunler_1 .intime-tumunu-gor:hover,
#urunler_2 .intime-tumunu-gor:hover,
#urunler_3 .intime-tumunu-gor:hover,
#urunler_4 .intime-tumunu-gor:hover,
#urunler_5 .intime-tumunu-gor:hover,
#urunler_6 .intime-tumunu-gor:hover,
#urunler_7 .intime-tumunu-gor:hover,
#urunler_8 .intime-tumunu-gor:hover,
#urunler_9 .intime-tumunu-gor:hover {
    color: #111111 !important;
    background: #ffffff;
    border-color: #ffffff;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);

    transform: translateX(-2px);
}


#urunler_0 .intime-tumunu-gor:hover .intime-vitrin-ok,
#urunler_1 .intime-tumunu-gor:hover .intime-vitrin-ok,
#urunler_2 .intime-tumunu-gor:hover .intime-vitrin-ok,
#urunler_3 .intime-tumunu-gor:hover .intime-vitrin-ok,
#urunler_4 .intime-tumunu-gor:hover .intime-vitrin-ok,
#urunler_5 .intime-tumunu-gor:hover .intime-vitrin-ok,
#urunler_6 .intime-tumunu-gor:hover .intime-vitrin-ok,
#urunler_7 .intime-tumunu-gor:hover .intime-vitrin-ok,
#urunler_8 .intime-tumunu-gor:hover .intime-vitrin-ok,
#urunler_9 .intime-tumunu-gor:hover .intime-vitrin-ok {
    color: #ffffff;
    background-color: #111111;
    transform: translateX(2px);
}


/* Klavye erişimi */

#urunler_0 .intime-tumunu-gor:focus,
#urunler_1 .intime-tumunu-gor:focus,
#urunler_2 .intime-tumunu-gor:focus,
#urunler_3 .intime-tumunu-gor:focus,
#urunler_4 .intime-tumunu-gor:focus,
#urunler_5 .intime-tumunu-gor:focus,
#urunler_6 .intime-tumunu-gor:focus,
#urunler_7 .intime-tumunu-gor:focus,
#urunler_8 .intime-tumunu-gor:focus,
#urunler_9 .intime-tumunu-gor:focus {
    outline: 2px solid rgba(255, 255, 255, 0.90);
    outline-offset: 2px;
}


/* ==========================================================
   MOBİL GÖRÜNÜM
========================================================== */

@media screen and (max-width: 600px) {

    #urunler_0 .icerik > p.baslik,
    #urunler_1 .icerik > p.baslik,
    #urunler_2 .icerik > p.baslik,
    #urunler_3 .icerik > p.baslik,
    #urunler_4 .icerik > p.baslik,
    #urunler_5 .icerik > p.baslik,
    #urunler_6 .icerik > p.baslik,
    #urunler_7 .icerik > p.baslik,
    #urunler_8 .icerik > p.baslik,
    #urunler_9 .icerik > p.baslik {
        height: 50px !important;
        min-height: 50px !important;
        padding: 0 8px 0 10px !important;
    }

    #urunler_0 .intime-vitrin-baslik,
    #urunler_1 .intime-vitrin-baslik,
    #urunler_2 .intime-vitrin-baslik,
    #urunler_3 .intime-vitrin-baslik,
    #urunler_4 .intime-vitrin-baslik,
    #urunler_5 .intime-vitrin-baslik,
    #urunler_6 .intime-vitrin-baslik,
    #urunler_7 .intime-vitrin-baslik,
    #urunler_8 .intime-vitrin-baslik,
    #urunler_9 .intime-vitrin-baslik {
        gap: 5px;
    }

    #urunler_0 .intime-vitrin-baslik > svg,
    #urunler_1 .intime-vitrin-baslik > svg,
    #urunler_2 .intime-vitrin-baslik > svg,
    #urunler_3 .intime-vitrin-baslik > svg,
    #urunler_4 .intime-vitrin-baslik > svg,
    #urunler_5 .intime-vitrin-baslik > svg,
    #urunler_6 .intime-vitrin-baslik > svg,
    #urunler_7 .intime-vitrin-baslik > svg,
    #urunler_8 .intime-vitrin-baslik > svg,
    #urunler_9 .intime-vitrin-baslik > svg {
        width: 16px;
        height: 16px;
        flex-basis: 16px;
    }

    #urunler_0 .intime-vitrin-baslik > span,
    #urunler_1 .intime-vitrin-baslik > span,
    #urunler_2 .intime-vitrin-baslik > span,
    #urunler_3 .intime-vitrin-baslik > span,
    #urunler_4 .intime-vitrin-baslik > span,
    #urunler_5 .intime-vitrin-baslik > span,
    #urunler_6 .intime-vitrin-baslik > span,
    #urunler_7 .intime-vitrin-baslik > span,
    #urunler_8 .intime-vitrin-baslik > span,
    #urunler_9 .intime-vitrin-baslik > span {
        max-width: 210px;
        font-size: 13px;
    }

    #urunler_0 .intime-tumunu-gor,
    #urunler_1 .intime-tumunu-gor,
    #urunler_2 .intime-tumunu-gor,
    #urunler_3 .intime-tumunu-gor,
    #urunler_4 .intime-tumunu-gor,
    #urunler_5 .intime-tumunu-gor,
    #urunler_6 .intime-tumunu-gor,
    #urunler_7 .intime-tumunu-gor,
    #urunler_8 .intime-tumunu-gor,
    #urunler_9 .intime-tumunu-gor {
        width: 28px;
        height: 28px;

        margin-left: 5px;
        padding: 0;

        gap: 0;

        border-radius: 50%;
    }

    .intime-tumunu-gor-metin {
        display: none;
    }

    #urunler_0 .intime-vitrin-ok,
    #urunler_1 .intime-vitrin-ok,
    #urunler_2 .intime-vitrin-ok,
    #urunler_3 .intime-vitrin-ok,
    #urunler_4 .intime-vitrin-ok,
    #urunler_5 .intime-vitrin-ok,
    #urunler_6 .intime-vitrin-ok,
    #urunler_7 .intime-vitrin-ok,
    #urunler_8 .intime-vitrin-ok,
    #urunler_9 .intime-vitrin-ok {
        width: 20px;
        height: 20px;
        flex-basis: 20px;
    }
}

@property --snake-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

/* Başlık + ürün kartının tamamı */
#PM_editorun_secimi {
    position: relative !important;
    isolation: isolate;
    border: 1px solid #dedede !important;
}

/* Çevresinde dolaşan siyah çizgi */
#PM_editorun_secimi::before {
    content: "";
    position: absolute;
    inset: -2px;
    z-index: 20;
    pointer-events: none;
    padding: 2px;

    background: conic-gradient(
        from var(--snake-angle),
        transparent 0deg,
        transparent 285deg,
        #777 305deg,
        #111 325deg,
        #000 340deg,
        transparent 360deg
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    animation: editorSnake 4s linear infinite;
}

@keyframes editorSnake {
    to {
        --snake-angle: 360deg;
    }
}

/* ==========================================================
   INTIME MUTFAK — ÜST ANA MENÜ TAM KOD
   Füme gradient + kırmızı vurgu
   Açılır Tüm Kategoriler menüsü korunur
========================================================== */


/* Ana menü şeridi */

.row3 {
    position: relative !important;
    overflow: visible !important;

    background:
        linear-gradient(
            100deg,
            #18191b 0%,
            #292a2d 45%,
            #202124 72%,
            #161719 100%
        ) !important;

    border: 0 !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 4px 14px rgba(0, 0, 0, 0.18) !important;
}


/* Alttaki ince İntime kırmızısı */

.row3::after {
    content: "";
    position: absolute;
    z-index: 2;

    right: 0;
    bottom: 0;
    left: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            rgba(128, 10, 14, 0.20) 0%,
            #be171d 28%,
            #ef4136 50%,
            #be171d 72%,
            rgba(128, 10, 14, 0.20) 100%
        );

    box-shadow:
        0 0 8px rgba(239, 65, 54, 0.30);

    pointer-events: none;
}


/* Ana menü listesi */

#ust_ek_menu_2,
#ust_ek_menu_2 > li {
    background: transparent !important;
}


/* Menü bağlantılarının ortak görünümü */

#ust_ek_menu_2 > li > a {
    position: relative !important;
    z-index: 5;

    display: block !important;
    box-sizing: border-box !important;

    color: rgba(255, 255, 255, 0.90) !important;
    background: transparent !important;

    text-decoration: none !important;

    transition:
        color 0.20s ease,
        background-color 0.20s ease !important;
}


#ust_ek_menu_2 > li > a > span {
    color: inherit !important;
    background: transparent !important;
}


/* Normal menü bağlantılarının hover görünümü */

#ust_ek_menu_2 > li:not(.tum_kategoriler) > a:hover {
    color: #ffffff !important;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0.025)
        ) !important;
}


/* Normal menü bağlantılarındaki kırmızı hover çizgisi */

#ust_ek_menu_2 > li:not(.tum_kategoriler) > a::after {
    content: "";
    position: absolute;

    right: 50%;
    bottom: 7px;
    left: 50%;

    height: 1px;

    background: #ef4136;

    opacity: 0;

    transition:
        right 0.22s ease,
        left 0.22s ease,
        opacity 0.22s ease;

    pointer-events: none;
}


#ust_ek_menu_2 > li:not(.tum_kategoriler) > a:hover::after {
    right: 14px;
    left: 14px;

    opacity: 1;
}


/* ==========================================================
   TÜM KATEGORİLER TETİKLEYİCİSİ
   Açılır menünün çalışmasına müdahale etmez
========================================================== */

#ust_ek_menu_2 > li.tum_kategoriler,
#ust_ek_menu_2 > li.tum_kategoriler > a {
    background: transparent !important;
}


#ust_ek_menu_2 > li.tum_kategoriler > a {
    color: rgba(255, 255, 255, 0.90) !important;
}


#ust_ek_menu_2 > li.tum_kategoriler:hover > a {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.07) !important;
}


/* Tüm Kategoriler için ekstra çizgi üretme */

#ust_ek_menu_2 > li.tum_kategoriler > a::after {
    display: none !important;
}


/* ==========================================================
   ANA SAYFA İKONU
========================================================== */

.row3 a.home {
    position: relative !important;
    z-index: 6;

    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.055) !important;

    transition:
        color 0.20s ease,
        background-color 0.20s ease !important;
}


.row3 a.home:hover {
    color: #ffffff !important;
    background-color: rgba(239, 65, 54, 0.18) !important;
}


.row3 a.home::after {
    display: none !important;
}


/* ==========================================================
   AÇILIR KATEGORİ MENÜSÜ
   Beyaz yapısı ve alt menüleri korunur
========================================================== */

#PopupMenu1,
#PopupMenu1 ul {
    z-index: 9999 !important;
}

/* ==========================================================
   INTIME MUTFAK — SOL ÜRÜN GRUPLARI MENÜSÜ
   Alan: #PM_kategoriler
   Uzun kategori listesi ve açılır alt menüler
========================================================== */


/* Ana kategori kutusu */

#PM_kategoriler .menum {
    position: relative;

    width: 100%;
    box-sizing: border-box;

    background-color: #ffffff;

    border: 1px solid #dedede;

    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.70);
}


/* ==========================================================
   ÜRÜN GRUPLARI BAŞLIĞI
========================================================== */

#PM_kategoriler .menum > .baslik {
    position: relative;

    min-height: 44px;
    box-sizing: border-box;

    margin: 0;
    padding: 0 15px;

    display: flex;
    align-items: center;

    overflow: hidden;

    color: #ffffff !important;

    background:
        linear-gradient(
            105deg,
            #18191b 0%,
            #292a2d 52%,
            #1b1c1e 100%
        ) !important;

    border: 0 !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.40);

    font-family: "Open Sans", sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.2px;
}


/* Başlığın altındaki kırmızı vurgu */

#PM_kategoriler .menum > .baslik::after {
    content: "";
    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            #9e1117 0%,
            #ef4136 50%,
            #9e1117 100%
        );

    box-shadow:
        0 0 7px rgba(239, 65, 54, 0.28);

    pointer-events: none;
}


/* Başlığın içindeki ikon ve yazı */

#PM_kategoriler .menum > .baslik,
#PM_kategoriler .menum > .baslik * {
    color: #ffffff !important;
}


/* ==========================================================
   ANA KATEGORİ LİSTESİ
========================================================== */

#PopupMenu1.Popup {
    width: 100%;
    box-sizing: border-box;

    margin: 0;
    padding: 0;

    overflow: visible;

    background-color: #ffffff;

    border: 0 !important;

    box-shadow: none !important;
}


/* Ana kategori satırları */

#PopupMenu1.Popup > li {
    position: relative;

    width: 100%;
    box-sizing: border-box;

    margin: 0;
    padding: 0;

    background-color: #ffffff;

    border: 0;
    border-bottom: 1px solid #e8e8e8;

    transition:
        background-color 0.18s ease,
        box-shadow 0.18s ease;
}


/* Son satırda alt çizgiyi kaldır */

#PopupMenu1.Popup > li:last-child {
    border-bottom: 0;
}


/* Ana kategori bağlantıları */

#PopupMenu1.Popup > li > a {
    position: relative;

    width: 100%;
    min-height: 40px;
    box-sizing: border-box;

    margin: 0;
    padding: 10px 34px 10px 14px;

    display: flex;
    align-items: center;

    color: #333333 !important;
    background-color: transparent !important;

    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;

    text-decoration: none !important;

    transition:
        color 0.18s ease,
        background-color 0.18s ease,
        padding-left 0.18s ease,
        box-shadow 0.18s ease;
}


/* Ana kategori hover */

#PopupMenu1.Popup > li:hover {
    background-color: #f5f5f5;
}


#PopupMenu1.Popup > li:hover > a {
    padding-left: 18px;

    color: #151515 !important;

    background:
        linear-gradient(
            90deg,
            rgba(239, 65, 54, 0.09) 0%,
            rgba(239, 65, 54, 0.025) 42%,
            rgba(255, 255, 255, 0) 100%
        ) !important;

    box-shadow:
        inset 3px 0 0 #ef4136;
}


/* Menü oklarının normal ve hover rengi */

#PopupMenu1.Popup li > a::after {
    color: #777777 !important;

    transition:
        color 0.18s ease,
        transform 0.18s ease;
}


#PopupMenu1.Popup li:hover > a::after {
    color: #ef4136 !important;
}


/* ==========================================================
   SAĞA AÇILAN ALT KATEGORİ PANELLERİ
========================================================== */

#PopupMenu1.Popup li > ul {
    min-width: 235px;
    box-sizing: border-box;

    margin: 0;
    padding: 6px 0;

    overflow: visible;

    background-color: #ffffff !important;

    border: 1px solid #d7d7d7 !important;
    border-left: 2px solid #ef4136 !important;

    box-shadow:
        7px 8px 22px rgba(0, 0, 0, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.80) !important;
}


/* Alt kategori satırları */

#PopupMenu1.Popup li > ul > li {
    position: relative;

    margin: 0;
    padding: 0;

    background-color: #ffffff !important;

    border: 0;
    border-bottom: 1px solid #ededed;

    transition:
        background-color 0.18s ease,
        box-shadow 0.18s ease;
}


#PopupMenu1.Popup li > ul > li:last-child {
    border-bottom: 0;
}


/* Alt kategori bağlantıları */

#PopupMenu1.Popup li > ul > li > a {
    position: relative;

    min-height: 38px;
    box-sizing: border-box;

    margin: 0;
    padding: 9px 32px 9px 14px;

    display: flex;
    align-items: center;

    color: #333333 !important;
    background-color: transparent !important;

    font-family: "Open Sans", sans-serif;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.4;

    text-decoration: none !important;

    transition:
        color 0.18s ease,
        background-color 0.18s ease,
        padding-left 0.18s ease,
        box-shadow 0.18s ease;
}


/* Alt kategori hover */

#PopupMenu1.Popup li > ul > li:hover > a {
    padding-left: 18px;

    color: #151515 !important;

    background:
        linear-gradient(
            90deg,
            rgba(239, 65, 54, 0.10) 0%,
            rgba(239, 65, 54, 0.025) 60%,
            rgba(255, 255, 255, 0) 100%
        ) !important;

    box-shadow:
        inset 3px 0 0 #ef4136;
}


/* Üçüncü seviye açılır paneller de aynı tasarımda */

#PopupMenu1.Popup li > ul li > ul {
    min-width: 235px;

    padding: 6px 0;

    background-color: #ffffff !important;

    border: 1px solid #d7d7d7 !important;
    border-left: 2px solid #ef4136 !important;

    box-shadow:
        7px 8px 22px rgba(0, 0, 0, 0.16) !important;
}


/* ==========================================================
   KLAVYE İLE KULLANIM
========================================================== */

#PopupMenu1.Popup a:focus {
    color: #151515 !important;

    background-color: #f5f5f5 !important;

    box-shadow:
        inset 3px 0 0 #ef4136;

    outline: 1px solid rgba(239, 65, 54, 0.35);
    outline-offset: -1px;
}


/* ==========================================================
   MENÜNÜN UZUNLUĞUNU VE ÇALIŞMASINI KORU
========================================================== */

#PM_kategoriler,
#PM_kategoriler .menum,
#PopupMenu1.Popup {
    height: auto !important;
    max-height: none !important;
}


/* Alt menülerin bannerın üzerinde görünmesi */

#PM_kategoriler,
#PM_kategoriler .menum,
#PopupMenu1.Popup,
#PopupMenu1.Popup li,
#PopupMenu1.Popup li > ul {
    z-index: 999 !important;
}

/* =====================================================
   İNTİME MUTFAK – YÜZEN SABİT ÜST MENÜ
   6PX KÖŞE / MASAÜSTÜ
   ===================================================== */

@media screen and (min-width: 769px) {

    /* Menü sabitlenince sayfanın sıçramasını engeller */
    #intime-menu-bosluk {
        display: none;
        width: 100%;
        height: 0;
    }

    #intime-menu-bosluk.aktif {
        display: block;
    }

    /* Kaydırma sonrasında yüzen menü */
    .row3.intime-menu-sabit {
        position: fixed !important;

        top: 12px !important;
        left: 18px !important;
        right: 18px !important;

        width: auto !important;
        margin: 0 !important;

        z-index: 99999 !important;
        overflow: visible !important;
        border-radius: 6px !important;

        box-shadow:
            0 10px 30px rgba(0, 0, 0, 0.18),
            0 3px 9px rgba(0, 0, 0, 0.10),
            0 1px 0 rgba(231, 76, 60, 0.65) !important;

        animation: intimeYuzenMenuGelis 0.40s
            cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* Yuvarlak köşelerde arka plan taşmasını engeller */
    .row3.intime-menu-sabit::before,
    .row3.intime-menu-sabit::after {
        border-radius: inherit;
    }

    /* Açılır kategori menüleri üstte görünmeye devam etsin */
    .row3.intime-menu-sabit #PopupMenu1,
    .row3.intime-menu-sabit .Popup,
    .row3.intime-menu-sabit ul {
        z-index: 100000 !important;
    }

    /* Üstten yumuşak giriş efekti */
    @keyframes intimeYuzenMenuGelis {
        from {
            transform: translateY(-115%);
            opacity: 0;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
}

/* =====================================================
   İNTİME MUTFAK – ANA SAYFA FİYAT GÖRÜNÜMÜ
   GÜVENLİ / SADECE CSS / MASAÜSTÜ
   ===================================================== */

@media screen and (min-width: 769px) {

    #PM_anasayfa_urunler .urun_fiyati > span {
        color: #24272b !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        line-height: 1.45 !important;
        letter-spacing: 0.05px !important;
        font-variant-numeric: tabular-nums;
    }
}

/* =====================================================
   İNTİME MUTFAK – KARE SEPET ÜRÜN SAYISI ROZETİ
   GÜVENLİ / SADECE CSS / MASAÜSTÜ
   ===================================================== */

@media screen and (min-width: 769px) {

    #ust_sepet_kismi .sepet_link > span {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        min-width: 20px !important;
        height: 20px !important;
        margin-left: 5px !important;
        padding: 0 5px !important;
        box-sizing: border-box !important;

        color: #ffffff !important;
        background-color: #e74c3c !important;

        border: 0 !important;
        border-radius: 3px !important;

        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 20px !important;
        vertical-align: middle !important;
    }
}

/* =========================================================
   INTIME MUTFAK — ANA BANNER ÜRÜN HOTSPOTLARI
   6 Banner / Minimal Ürün Kartı / Masaüstü
   ========================================================= */

@media screen and (min-width: 769px) {

    /* Hotspot bulunan banner */
    #PM_xml_banner #slider li.intime-hotspot-slide {
        position: relative !important;
    }

    /* Hotspot ana konum alanı */
    #PM_xml_banner .intime-hotspot-wrap {
        position: absolute !important;
        left: var(--intime-x) !important;
        top: var(--intime-y) !important;

        width: 0 !important;
        height: 0 !important;

        z-index: 80 !important;
        overflow: visible !important;

        font-family: "Open Sans", Arial, sans-serif !important;
    }

    /* =====================================================
       MİNİMAL HOTSPOT NOKTASI
       ===================================================== */

    #PM_xml_banner .intime-hotspot-button {
        position: absolute !important;
        left: -14px !important;
        top: -14px !important;

        width: 28px !important;
        height: 28px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        border: 1px solid rgba(255, 255, 255, .95) !important;
        border-radius: 50% !important;

        background: rgba(20, 22, 24, .76) !important;
        box-shadow:
            0 4px 12px rgba(0, 0, 0, .24),
            0 0 0 4px rgba(255, 255, 255, .13) !important;

        cursor: pointer !important;
        outline: none !important;
        z-index: 85 !important;

        appearance: none !important;
        -webkit-appearance: none !important;

        transition:
            background-color .22s ease,
            box-shadow .22s ease,
            transform .22s ease !important;
    }

    /* Ortadaki küçük kırmızı nokta */
    #PM_xml_banner .intime-hotspot-button::before {
        content: "" !important;

        display: block !important;

        width: 6px !important;
        height: 6px !important;

        border-radius: 50% !important;
        background: #e74c3c !important;

        box-shadow: 0 0 0 3px rgba(231, 76, 60, .18) !important;
    }

    /* Yumuşak nabız halkası */
    #PM_xml_banner .intime-hotspot-button::after {
        content: "" !important;

        position: absolute !important;
        inset: -7px !important;

        border: 1px solid rgba(255, 255, 255, .50) !important;
        border-radius: 50% !important;

        opacity: 0 !important;
        pointer-events: none !important;

        animation: intimeHotspotPulse 2.3s ease-out infinite !important;
    }

    #PM_xml_banner .intime-hotspot-button:hover {
        background: rgba(231, 76, 60, .94) !important;
        transform: scale(1.08) !important;

        box-shadow:
            0 5px 16px rgba(0, 0, 0, .28),
            0 0 0 5px rgba(231, 76, 60, .16) !important;
    }

    #PM_xml_banner .intime-hotspot-button:hover::before,
    #PM_xml_banner .intime-hotspot-wrap.is-open
        .intime-hotspot-button::before {
        background: #ffffff !important;
        box-shadow: none !important;
    }

    #PM_xml_banner .intime-hotspot-wrap.is-open
        .intime-hotspot-button {
        background: #e74c3c !important;

        box-shadow:
            0 5px 16px rgba(0, 0, 0, .30),
            0 0 0 5px rgba(231, 76, 60, .18) !important;
    }

    @keyframes intimeHotspotPulse {
        0% {
            transform: scale(.72);
            opacity: 0;
        }

        25% {
            opacity: .72;
        }

        100% {
            transform: scale(1.35);
            opacity: 0;
        }
    }

    /* =====================================================
       MİNİ ÜRÜN KARTI
       ===================================================== */

    #PM_xml_banner .intime-hotspot-card {
        position: absolute !important;
        top: 20px !important;

        display: flex !important;
        align-items: stretch !important;

        width: 318px !important;
        min-height: 124px !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #202124 !important;
        background: rgba(255, 255, 255, .98) !important;

        border: 1px solid rgba(0, 0, 0, .10) !important;
        border-top: 3px solid #e74c3c !important;
        border-radius: 3px !important;

        box-shadow:
            0 16px 38px rgba(0, 0, 0, .25),
            0 3px 10px rgba(0, 0, 0, .10) !important;

        overflow: hidden !important;

        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;

        transform: translateY(9px) scale(.98) !important;
        transform-origin: top center !important;

        transition:
            opacity .22s ease,
            visibility .22s ease,
            transform .22s ease !important;

        z-index: 82 !important;
    }

    /* Kart hotspotun solunda açılsın */
    #PM_xml_banner .intime-card-left
        .intime-hotspot-card {
        right: 20px !important;
    }

    /* Kart hotspotun sağında açılsın */
    #PM_xml_banner .intime-card-right
        .intime-hotspot-card {
        left: 20px !important;
    }

    /* Kart yukarı doğru açılsın */
    #PM_xml_banner .intime-card-up
        .intime-hotspot-card {
        top: auto !important;
        bottom: 20px !important;

        transform: translateY(-9px) scale(.98) !important;
        transform-origin: bottom center !important;
    }

    /* Açık kart */
    #PM_xml_banner .intime-hotspot-wrap.is-open
        .intime-hotspot-card {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) scale(1) !important;
    }

    /* Ürün görsel alanı */
    #PM_xml_banner .intime-hotspot-image-area {
        width: 102px !important;
        min-width: 102px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        padding: 10px !important;

        background:
            linear-gradient(145deg, #ffffff 0%, #f2f3f4 100%) !important;

        border-right: 1px solid #ececec !important;
        box-sizing: border-box !important;
    }

    #PM_xml_banner .intime-hotspot-image {
        display: block !important;

        width: 88px !important;
        height: 88px !important;

        max-width: 88px !important;
        max-height: 88px !important;

        margin: 0 !important;
        padding: 0 !important;

        object-fit: contain !important;
        object-position: center !important;

        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;

        transition: transform .28s ease !important;
    }

    #PM_xml_banner .intime-hotspot-card:hover
        .intime-hotspot-image {
        transform: scale(1.045) !important;
    }

    /* Kart metin alanı */
    #PM_xml_banner .intime-hotspot-content {
        flex: 1 1 auto !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;

        min-width: 0 !important;

        padding: 13px 14px 12px 14px !important;
        box-sizing: border-box !important;
    }

    #PM_xml_banner .intime-hotspot-label {
        display: block !important;

        margin: 0 0 5px 0 !important;
        padding: 0 !important;

        color: #e74c3c !important;

        font-size: 9px !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
        letter-spacing: 1.2px !important;
        text-transform: uppercase !important;
    }

    #PM_xml_banner .intime-hotspot-title {
        display: block !important;

        margin: 0 0 5px 0 !important;
        padding: 0 !important;

        color: #202124 !important;

        font-size: 14px !important;
        line-height: 1.28 !important;
        font-weight: 700 !important;

        text-align: left !important;
    }

    #PM_xml_banner .intime-hotspot-spec {
        display: block !important;

        margin: 0 0 9px 0 !important;
        padding: 0 !important;

        color: #707378 !important;

        font-size: 11px !important;
        line-height: 1.35 !important;
        font-weight: 400 !important;

        text-align: left !important;
    }

    #PM_xml_banner .intime-hotspot-link {
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;

        margin: auto 0 0 0 !important;
        padding: 0 0 2px 0 !important;

        color: #202124 !important;
        background: transparent !important;

        border: 0 !important;
        border-bottom: 1px solid #e74c3c !important;
        border-radius: 0 !important;

        font-size: 11px !important;
        line-height: 1.4 !important;
        font-weight: 700 !important;

        text-decoration: none !important;

        transition:
            color .20s ease,
            border-color .20s ease !important;
    }

    #PM_xml_banner .intime-hotspot-link:hover {
        color: #e74c3c !important;
        border-bottom-color: #202124 !important;
    }
}

/* Mobil Platin yapısına kesinlikle karışmaz */
@media screen and (max-width: 768px) {
    #PM_xml_banner .intime-hotspot-wrap {
        display: none !important;
    }
}

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
    #PM_xml_banner .intime-hotspot-button,
    #PM_xml_banner .intime-hotspot-card,
    #PM_xml_banner .intime-hotspot-image {
        transition: none !important;
        animation: none !important;
    }

    #PM_xml_banner .intime-hotspot-button::after {
        animation: none !important;
    }
}