/* Mobile service hero system — loaded after legacy page overrides. */
.service-mobile-hero-media {
    display: none;
}

.coffee-reference-footer svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.coffee-reference-footer svg .is-filled {
    fill: currentColor;
    stroke: none;
}

body.public-shell main svg.lucide {
    flex: 0 0 auto;
    visibility: visible;
    opacity: 1;
    stroke: currentColor;
}

@media (max-width: 767px) {
    /* Shared image panel: a real banner, never a text background. */
    .service-mobile-hero-media {
        position: relative;
        display: block;
        width: 100%;
        height: 205px;
        min-height: 205px;
        overflow: hidden;
        border: 1px solid rgba(244, 208, 118, .24);
        border-radius: 18px;
        background: #0a0b1c;
        box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 18px 42px rgba(0, 0, 0, .26);
    }

    .service-mobile-hero-media::after {
        position: absolute;
        inset: auto 0 0;
        height: 34%;
        pointer-events: none;
        background: linear-gradient(0deg, rgba(6, 7, 20, .58), transparent);
        content: "";
    }

    .service-mobile-hero-media > img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        filter: brightness(1.04) saturate(1.06) contrast(1.02);
    }

    /* Rüya Yorumu: visual first, copy second. */
    body.public-shell main.magic-page.landing-page--dream .landing-hero {
        padding: 8px 12px 16px !important;
    }

    body.public-shell main.magic-page.landing-page--dream .landing-hero-grid {
        display: flex !important;
        min-height: 0 !important;
        flex-direction: column !important;
        gap: 0 !important;
        overflow: hidden !important;
        border: 1px solid rgba(244, 208, 118, .22) !important;
        border-radius: 22px !important;
        background: linear-gradient(155deg, rgba(24, 20, 49, .98), rgba(8, 10, 25, .99)) !important;
        box-shadow: 0 24px 58px rgba(0, 0, 0, .30) !important;
    }

    body.public-shell main.magic-page.landing-page--dream .landing-visual {
        position: relative !important;
        inset: auto !important;
        order: 1 !important;
        display: block !important;
        width: 100% !important;
        height: 208px !important;
        min-height: 208px !important;
        max-height: 208px !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(244, 208, 118, .18) !important;
        border-radius: 0 !important;
        background: #090a1b !important;
        box-shadow: none !important;
    }

    body.public-shell main.magic-page.landing-page--dream .landing-visual::after {
        position: absolute !important;
        inset: auto 0 0 !important;
        z-index: 2 !important;
        height: 34% !important;
        background: linear-gradient(0deg, rgba(7, 8, 22, .5), transparent) !important;
        content: "" !important;
    }

    body.public-shell main.magic-page.landing-page--dream .landing-visual > div:first-child,
    body.public-shell main.magic-page.landing-page--dream .landing-visual > div:nth-child(2),
    body.public-shell main.magic-page.landing-page--dream .landing-visual .grid {
        display: none !important;
    }

    body.public-shell main.magic-page.landing-page--dream .landing-visual .relative,
    body.public-shell main.magic-page.landing-page--dream .landing-visual .relative > div:first-child {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
    }

    body.public-shell main.magic-page.landing-page--dream .landing-visual img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: center 44% !important;
        filter: brightness(1.02) saturate(1.08) contrast(1.02) !important;
    }

    body.public-shell main.magic-page.landing-page--dream .landing-hero-copy {
        position: relative !important;
        z-index: 1 !important;
        order: 2 !important;
        max-width: none !important;
        padding: 18px 16px 17px !important;
        background: radial-gradient(circle at 100% 0, rgba(139, 83, 215, .14), transparent 40%) !important;
    }

    body.public-shell main.magic-page.landing-page--dream .landing-hero-copy h1 {
        max-width: none !important;
        margin-top: 13px !important;
        font-size: clamp(28px, 8vw, 34px) !important;
        line-height: 1.06 !important;
        letter-spacing: -.02em !important;
        text-shadow: none !important;
    }

    body.public-shell main.magic-page.landing-page--dream .landing-hero-copy > p.mt-5 {
        margin-top: 10px !important;
        font-size: 14px !important;
        line-height: 1.55 !important;
        color: rgba(255, 255, 255, .78) !important;
        text-shadow: none !important;
    }

    body.public-shell main.magic-page.landing-page--dream .landing-hero-copy > p.mt-3,
    body.public-shell main.magic-page.landing-page--dream .landing-hero-copy > p.mt-5.text-xs {
        display: none !important;
    }

    body.public-shell main.magic-page.landing-page--dream .landing-hero-copy > div.mt-7.flex {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        margin-top: 14px !important;
    }

    body.public-shell main.magic-page.landing-page--dream .landing-hero-copy > div.mt-7.flex a {
        min-height: 46px !important;
        padding: 0 10px !important;
        border-radius: 13px !important;
        font-size: 12px !important;
        text-align: center !important;
    }

    body.public-shell main.magic-page.landing-page--dream .landing-hero-copy > div.mt-7.grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
        margin-top: 12px !important;
    }

    body.public-shell main.magic-page.landing-page--dream .landing-hero-copy > div.mt-7.grid > div {
        min-height: 48px !important;
        justify-content: center !important;
        padding: 7px 5px !important;
        border-radius: 12px !important;
        font-size: 10px !important;
        line-height: 1.25 !important;
        text-align: center !important;
    }

    /* Numerology, Yıldızname, Palm, Angel Cards and Love Message. */
    body.public-shell main.magic-page.special-premium-page .special-premium-hero {
        display: flex !important;
        min-height: 0 !important;
        height: auto !important;
        flex-direction: column !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 1px solid rgba(244, 208, 118, .22) !important;
        border-radius: 22px !important;
        background: linear-gradient(155deg, rgba(24, 20, 49, .98), rgba(8, 10, 25, .99)) !important;
        box-shadow: 0 24px 58px rgba(0, 0, 0, .30) !important;
    }

    body.public-shell main.magic-page.special-premium-page .special-visual {
        position: relative !important;
        inset: auto !important;
        order: 1 !important;
        display: block !important;
        width: 100% !important;
        height: 208px !important;
        min-height: 208px !important;
        max-height: 208px !important;
        overflow: hidden !important;
        opacity: 1 !important;
        filter: none !important;
        pointer-events: none !important;
    }

    body.public-shell main.magic-page.special-premium-page .special-visual::before {
        position: absolute !important;
        inset: auto 0 0 !important;
        z-index: 2 !important;
        width: auto !important;
        height: 34% !important;
        border: 0 !important;
        background: linear-gradient(0deg, rgba(7, 8, 22, .5), transparent) !important;
        box-shadow: none !important;
        content: "" !important;
        transform: none !important;
    }

    body.public-shell main.magic-page.special-premium-page .special-visual::after {
        display: none !important;
    }

    body.public-shell main.magic-page.special-premium-page .special-desktop-emblem {
        position: absolute !important;
        inset: 0 !important;
        z-index: 1 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #090a1b !important;
        box-shadow: none !important;
    }

    body.public-shell main.magic-page.special-premium-page .special-desktop-emblem img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: center 44% !important;
        filter: brightness(1.03) saturate(1.07) contrast(1.02) !important;
        transform: none !important;
    }

    body.public-shell main.magic-page.special-premium-page .special-phone,
    body.public-shell main.magic-page.special-premium-page .special-orbit,
    body.public-shell main.magic-page.special-premium-page .special-float {
        display: none !important;
    }

    body.public-shell main.magic-page.special-premium-page .special-premium-copy {
        position: relative !important;
        z-index: 1 !important;
        order: 2 !important;
        display: flex !important;
        min-height: 0 !important;
        padding: 17px 16px 16px !important;
        background: radial-gradient(circle at 100% 0, rgba(139, 83, 215, .14), transparent 40%) !important;
    }

    body.public-shell main.magic-page.special-premium-page .special-premium-copy > h1 {
        max-width: none !important;
        margin-top: 13px !important;
        font-size: clamp(28px, 8vw, 34px) !important;
        line-height: 1.06 !important;
        letter-spacing: -.02em !important;
        text-shadow: none !important;
    }

    body.public-shell main.magic-page.special-premium-page .special-premium-copy > p {
        max-width: none !important;
        margin-top: 10px !important;
        color: rgba(255, 255, 255, .78) !important;
        font-size: 14px !important;
        line-height: 1.55 !important;
        text-shadow: none !important;
    }

    body.public-shell main.magic-page.special-premium-page .special-premium-actions {
        display: grid !important;
        max-width: none !important;
        grid-template-columns: 1fr auto !important;
        gap: 10px !important;
        margin-top: 14px !important;
    }

    body.public-shell main.magic-page.special-premium-page .special-premium-actions a {
        width: 100% !important;
        min-height: 46px !important;
        padding: 0 13px !important;
        border-radius: 13px !important;
        font-size: 12px !important;
    }

    body.public-shell main.magic-page.special-premium-page .special-premium-actions span {
        display: flex !important;
        align-items: center !important;
        font-size: 10px !important;
        white-space: nowrap !important;
    }

    body.public-shell main.magic-page.special-premium-page .special-premium-mini {
        display: grid !important;
        max-width: none !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
        margin-top: 12px !important;
    }

    body.public-shell main.magic-page.special-premium-page .special-premium-mini article {
        display: grid !important;
        min-height: 62px !important;
        grid-template-columns: 1fr !important;
        align-content: center !important;
        justify-items: center !important;
        padding: 7px 5px !important;
        border-radius: 12px !important;
        text-align: center !important;
    }

    body.public-shell main.magic-page.special-premium-page .special-premium-mini article svg {
        width: 19px !important;
        height: 19px !important;
        margin: 0 !important;
        color: #f6d77e !important;
    }

    body.public-shell main.magic-page.special-premium-page .special-premium-mini article strong {
        margin-top: 5px !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
    }

    body.public-shell main.magic-page.special-premium-page .special-premium-mini article small {
        display: none !important;
    }

    /* Tarot and Katina: dedicated image block above the copy. */
    body.public-shell main.magic-page.tarot-page > section:first-of-type,
    body.public-shell main.magic-page.katina-theme > section:first-of-type {
        min-height: 0 !important;
        height: auto !important;
        padding: 8px 12px 16px !important;
        background: transparent !important;
    }

    body.public-shell main.magic-page.tarot-page > section:first-of-type > img,
    body.public-shell main.magic-page.tarot-page > section:first-of-type > div.absolute {
        display: none !important;
    }

    body.public-shell .service-mobile-hero-media--tarot img {
        object-position: center 48%;
    }

    body.public-shell main.magic-page.tarot-page > section:first-of-type > .mx-auto,
    body.public-shell main.magic-page.katina-theme > section:first-of-type > .mx-auto {
        min-height: 0 !important;
        margin-top: 0 !important;
        padding: 17px 16px !important;
        border: 1px solid rgba(244, 208, 118, .18) !important;
        border-top: 0 !important;
        border-radius: 0 0 20px 20px !important;
        background: linear-gradient(155deg, rgba(24, 20, 49, .98), rgba(8, 10, 25, .99)) !important;
    }

    body.public-shell main.magic-page.tarot-page > section:first-of-type > .service-mobile-hero-media,
    body.public-shell main.magic-page.katina-theme > section:first-of-type > .service-mobile-hero-media {
        border-radius: 20px 20px 0 0 !important;
    }

    body.public-shell main.magic-page.tarot-page > section:first-of-type h1,
    body.public-shell main.magic-page.katina-theme > section:first-of-type h1 {
        margin-top: 13px !important;
        font-size: clamp(28px, 8vw, 34px) !important;
        line-height: 1.06 !important;
    }

    body.public-shell main.magic-page.tarot-page > section:first-of-type h1 + p,
    body.public-shell main.magic-page.katina-theme > section:first-of-type h1 + p {
        margin-top: 10px !important;
        color: rgba(255, 255, 255, .78) !important;
        font-size: 14px !important;
        line-height: 1.55 !important;
    }

    body.public-shell main.magic-page.tarot-page > section:first-of-type .mt-8,
    body.public-shell main.magic-page.katina-theme > section:first-of-type .mt-8 {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin-top: 14px !important;
    }

    body.public-shell main.magic-page.tarot-page > section:first-of-type a,
    body.public-shell main.magic-page.katina-theme > section:first-of-type a {
        min-height: 46px !important;
        justify-content: center !important;
        padding: 0 13px !important;
        font-size: 12px !important;
    }

    .service-mobile-hero-media--katina {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        background: radial-gradient(circle at 50% 30%, rgba(216, 97, 158, .28), transparent 38%), linear-gradient(145deg, #2b132d, #0a0a1b);
    }

    .service-mobile-hero-media--katina::after {
        height: 45%;
    }

    .service-mobile-hero-media--katina img {
        width: 116px;
        height: 174px;
        border: 1px solid rgba(244, 208, 118, .36);
        border-radius: 10px;
        object-fit: cover;
        box-shadow: 0 18px 38px rgba(0, 0, 0, .42);
    }

    .service-mobile-hero-media--katina img:first-child {
        transform: translateX(20px) rotate(-10deg) scale(.9);
    }

    .service-mobile-hero-media--katina img:nth-child(2) {
        z-index: 2;
        transform: translateY(-2px);
    }

    .service-mobile-hero-media--katina img:nth-child(3) {
        transform: translateX(-20px) rotate(10deg) scale(.9);
    }

    /* Aşk Uyumu and Burçlar: same visual-first structure. */
    body.public-shell main.magic-page.love-compatibility-page .love-intro,
    body.public-shell main.magic-page.horoscope-page > section > div:first-child {
        padding: 0 0 17px !important;
        overflow: hidden !important;
        border-radius: 22px !important;
        background: linear-gradient(155deg, rgba(31, 18, 46, .98), rgba(8, 10, 25, .99)) !important;
    }

    body.public-shell main.magic-page.love-compatibility-page .love-intro > :not(.service-mobile-hero-media),
    body.public-shell main.magic-page.horoscope-page > section > div:first-child > .relative.z-10 {
        margin-right: 16px !important;
        margin-left: 16px !important;
    }

    body.public-shell main.magic-page.love-compatibility-page .love-intro > .service-mobile-hero-media,
    body.public-shell main.magic-page.horoscope-page .service-mobile-hero-media {
        height: 205px !important;
        min-height: 205px !important;
        margin: 0 0 17px !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(244, 208, 118, .18) !important;
        border-radius: 0 !important;
    }

    body.public-shell main.magic-page.horoscope-page > section > div:first-child > div.absolute {
        display: none !important;
    }

    body.public-shell .service-mobile-hero-media--love img {
        object-position: center 38%;
    }

    body.public-shell .service-mobile-hero-media--zodiac img {
        object-position: center 43%;
    }

    /* Coffee already has a separate mobile image; keep it clean and uncluttered. */
    body.public-shell .coffee-reference-page .coffee-mobile-hero-art {
        height: 205px !important;
        min-height: 205px !important;
        margin: 14px 0 16px !important;
        overflow: hidden !important;
        border: 1px solid rgba(244, 208, 118, .24) !important;
        border-radius: 18px !important;
        box-shadow: 0 18px 42px rgba(0, 0, 0, .26) !important;
    }

    body.public-shell .coffee-reference-page .coffee-mobile-hero-art .coffee-hero-orbit,
    body.public-shell .coffee-reference-page .coffee-mobile-hero-art .coffee-hero-image {
        width: 100% !important;
        height: 100% !important;
        border: 0 !important;
        border-radius: 0 !important;
        object-fit: cover !important;
        object-position: 56% center !important;
    }

    body.public-shell .coffee-reference-page .coffee-mobile-hero-art .coffee-floating-note {
        display: none !important;
    }

    /* Keep all service icons readable on dark mobile panels. */
    body.public-shell main.magic-page svg.lucide {
        min-width: 1em;
        min-height: 1em;
        color: currentColor;
        stroke-width: 2.15;
    }
}