/* ============================================================================
   KAMPANYA POPUP - resimli, tiklaninca hedef URL'e gider
   ----------------------------------------------------------------------------
   - Distribütör popup'indan tamamen ayri (kp-* prefix)
   - Görsel <img> yerine background-image (sag tik 'resmi kaydet' icin
     gercek img elementi yok); ustte seffaf shield katmani sürükle-bırak
     hedefi (gercek img'i koruyor)
   - z-index 1145 - memory: "Modal z-index min 1140 (mobile-bottom-bar 1110 üstü)"
   - Tasarim: glassmorphism close, multi-layer shadow, ince altin highlight
     ring (Herbalife yesil/altin paletine hafif gonderme), smooth pop-in
   ========================================================================== */

.kp-popup {
    position: fixed;
    inset: 0;
    z-index: 1145;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    pointer-events: auto;
    /* Fade-in seffaf -> tam opak; backdrop ve panel ayni anda gelir */
    animation: kp-fade-in 240ms ease-out;
}

.kp-popup[hidden] {
    display: none;
}

@keyframes kp-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* BACKDROP - daha derin blur + radial gradient (merkezde daha karanlik,
   kenarda hafif aydinlik; sahnenin orta noktasini panele cekiyor) */
.kp-popup__backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center, rgba(15, 23, 42, 0.82) 0%, rgba(15, 23, 42, 0.72) 100%);
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    cursor: pointer;
}

/* PANEL - sadece pozisyon konteyneri; background/shadow icerideki .media'da
   olmali ki close butonu .panel'in DISINA cikabilsin (overflow:visible). */
.kp-popup__panel {
    position: relative;
    background: transparent;
    overflow: visible;

    /* Kare panel - kullaniciya kare gorsel onerdik, ust/alt bosluk olmasin.
       min(440px, 90vw, 80vh) yatay/dikey ekran sinirlarini birlikte tutar;
       cok dar veya cok kisa ekranlarda da panel taSmaz, aspect 1:1 korunur. */
    width: min(440px, 90vw, 80vh);
    aspect-ratio: 1 / 1;

    animation: kp-pop-in 380ms cubic-bezier(0.16, 1.05, 0.36, 1);

    /* Tum panel icin kopyalama/secimi engelle (caydirici) */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* Pop-in: hafif yukaridan + scale + opacity; spring-out kullaniciya
   "profesyonel" hissi verir */
@keyframes kp-pop-in {
    0%   { transform: translateY(20px) scale(0.94); opacity: 0; }
    60%  { opacity: 1; }
    100% { transform: translateY(0)    scale(1);    opacity: 1; }
}

/* Ekran okuyucu icin baslik - gorsel olarak gizle */
.kp-popup__sr-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* CLOSE - glassmorphism stili, panel'in sag UST dis kosesinde havada duruyor.
   Backdrop-blur ile arkadaki backdrop'a uyumlu cam efekti. */
.kp-popup__close {
    position: absolute;
    top: -16px;
    right: -16px;
    z-index: 5;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    color: #ffffff;
    font-size: 26px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Multi-layer shadow: yumusak ring + derin gölge + ic highlight */
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06),
        0 8px 24px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);

    transition:
        background 200ms ease,
        transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
        border-color 200ms ease;
}

.kp-popup__close:hover {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.6);
    transform: scale(1.08) rotate(90deg);
}

.kp-popup__close:focus-visible {
    outline: none;
    background: rgba(255, 255, 255, 0.32);
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow:
        0 0 0 3px rgba(212, 175, 55, 0.55),
        0 8px 24px rgba(0, 0, 0, 0.45);
}

/* Cok dar ekranlarda close panel icine al (disarda kalirsa ekrana tasar) */
@media (max-width: 380px) {
    .kp-popup__close {
        top: 10px;
        right: 10px;
        width: 38px;
        height: 38px;
        font-size: 22px;
    }
}

/* CTA - tum panel'i sarmalayan link (varsa). Border-radius + shadow .media'da
   oldugu icin CTA sadece tikla-alani; vurguyu media'ya birakiyoruz. */
.kp-popup__cta {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    border-radius: 18px;
    overflow: hidden;
    /* Hover'da hafif lift - "tiklanabilirim" sinyali */
    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.kp-popup__cta:hover {
    transform: translateY(-2px);
}

.kp-popup__cta:hover .kp-popup__media {
    box-shadow:
        0 0 0 1px rgba(212, 175, 55, 0.35),
        0 24px 70px rgba(0, 0, 0, 0.55),
        0 8px 22px rgba(0, 0, 0, 0.35);
}

/* MEDIA: background-image konteyneri.
   - <img> yok - sag tik "resmi kaydet" cikmaz
   - 18px radius (panel-kose modern oran)
   - Multi-layer shadow: subtle highlight ring + derin altta golge
   - Inner highlight (ust kenarda ince beyaz cizgi) ile "kaldirilmis kart" hissi
   - Gorsel KARE yuklendiyse #f1f5f9 fallback hic gorunmez */
.kp-popup__media {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 18px;
    overflow: hidden;
    background-color: #f8fafc;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;

    /* Profesyonel multi-layer shadow */
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 24px 60px rgba(0, 0, 0, 0.5),
        0 8px 20px rgba(0, 0, 0, 0.3);

    transition: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Ekstra kopya engeli */
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none; /* iOS uzun basinca "Save Image" cikmasin */
}

/* Ust kenarda ince highlight cizgi - "physical card" hissi */
.kp-popup__media::before {
    content: '';
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.6) 50%,
        transparent 100%);
    z-index: 3;
    pointer-events: none;
}

/* SHIELD - media uzerinde seffaf overlay, drag/right-click hedefi.
   Tum genis link CTA'sini bozmaz cunku shield kendisi clickable degil;
   parent <a> click bubble ile yakalar. */
.kp-popup__shield {
    position: absolute;
    inset: 0;
    background: transparent;
    z-index: 2;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}

/* Reduce motion - WCAG */
@media (prefers-reduced-motion: reduce) {
    .kp-popup,
    .kp-popup__panel,
    .kp-popup__cta,
    .kp-popup__media,
    .kp-popup__close {
        animation: none !important;
        transition: none !important;
    }
}

/* Body kilidi - JS .kampanya-popup-open ekler */
body.kampanya-popup-open {
    overflow: hidden;
}