/* 8648 Platform Ana Sayfa v1 */
:root {
    --pf-bg: #f6f7fb;
    --pf-surface: #ffffff;
    --pf-text: #111827;
    --pf-muted: #667085;
    --pf-line: #e5e7eb;
    --pf-primary: #5b3df5;
    --pf-primary-dark: #3923bc;
    --pf-radius-lg: 32px;
    --pf-radius-md: 22px;
    --pf-shadow: 0 24px 70px rgba(15, 23, 42, .09);
}

* {
    box-sizing: border-box;
}

body {
    background: var(--pf-bg);
}

.pf-home {
    overflow: hidden;
    color: var(--pf-text);
}

.pf-shell {
    width: min(1220px, calc(100% - 36px));
    margin-inline: auto;
}

.pf-hero {
    position: relative;
    min-height: 660px;
    display: flex;
    align-items: center;
    color: #fff;
    background:
        radial-gradient(circle at 74% 22%, rgba(139, 92, 246, .46), transparent 34%),
        radial-gradient(circle at 12% 82%, rgba(14, 165, 233, .22), transparent 32%),
        linear-gradient(135deg, #111827 0%, #1e1b4b 53%, #312e81 100%);
}

.pf-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 130px;
    background: linear-gradient(to bottom, transparent, rgba(246,247,251,.06));
    pointer-events: none;
}

.pf-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(430px, .95fr);
    gap: 54px;
    align-items: center;
    padding-block: 84px 126px;
}

.pf-kicker,
.pf-section-heading > span,
.pf-card-tag,
.pf-brand-head span,
.pf-final-card > div > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: .13em;
    font-size: 12px;
    font-weight: 900;
}

.pf-kicker {
    padding: 9px 13px;
    color: #ddd6fe;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
}

.pf-hero-copy h1 {
    max-width: 760px;
    margin: 25px 0 20px;
    font-size: clamp(44px, 5.5vw, 76px);
    line-height: .98;
    letter-spacing: -.045em;
}

.pf-hero-copy h1 span {
    display: block;
    color: #c4b5fd;
}

.pf-hero-copy > p {
    max-width: 710px;
    margin: 0;
    color: #d8dce6;
    font-size: 18px;
    line-height: 1.75;
}

.pf-hero-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.pf-hero-pills span {
    padding: 10px 13px;
    font-size: 13px;
    font-weight: 800;
    color: #f3f4f6;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    background: rgba(255,255,255,.07);
}

.pf-hero-visual {
    position: relative;
    min-height: 460px;
}

.pf-orbit {
    position: absolute;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
}

.pf-orbit-one {
    width: 410px;
    height: 410px;
    right: 20px;
    top: 18px;
}

.pf-orbit-two {
    width: 290px;
    height: 290px;
    right: 80px;
    top: 78px;
}

.pf-visual-card {
    position: absolute;
    width: 220px;
    min-height: 210px;
    padding: 25px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 28px;
    backdrop-filter: blur(17px);
    box-shadow: 0 30px 70px rgba(0,0,0,.22);
}

.pf-visual-card strong,
.pf-visual-card small {
    display: block;
}

.pf-visual-card strong {
    margin-top: 12px;
    font-size: 22px;
}

.pf-visual-card small {
    margin-top: 6px;
    color: rgba(255,255,255,.74);
    line-height: 1.45;
}

.pf-visual-icon {
    display: block;
    width: 100%;
    height: 105px;
}

.pf-visual-icon svg {
    width: 100%;
    height: 100%;
}

.pf-visual-car {
    left: 0;
    top: 110px;
    color: #818cf8;
    background: linear-gradient(145deg, rgba(79,70,229,.42), rgba(17,24,39,.54));
    transform: rotate(-4deg);
}

.pf-visual-beauty {
    right: 0;
    top: 12px;
    color: #f472b6;
    background: linear-gradient(145deg, rgba(236,72,153,.35), rgba(76,29,149,.40));
    transform: rotate(5deg);
}

.pf-visual-food {
    right: 26px;
    bottom: 0;
    color: #34d399;
    background: linear-gradient(145deg, rgba(16,185,129,.33), rgba(15,23,42,.48));
    transform: rotate(-2deg);
}

.pf-search-section {
    position: relative;
    z-index: 5;
    margin-top: -66px;
}

.pf-search-panel {
    padding: 32px;
    background: #fff;
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 28px;
    box-shadow: var(--pf-shadow);
}

.pf-search-heading {
    margin-bottom: 22px;
}

.pf-search-heading h2 {
    font-size: 32px !important;
}

.pf-search-tabs {
    display: flex;
    gap: 10px;
    padding: 7px;
    background: #f2f4f7;
    border-radius: 16px;
}

.pf-search-tab {
    flex: 1;
    min-height: 48px;
    border: 0;
    border-radius: 12px;
    color: #475467;
    background: transparent;
    font-weight: 900;
    font-size: 15px;
    cursor: pointer;
    transition: .2s ease;
}

.pf-search-tab span {
    margin-right: 5px;
}

.pf-search-tab.is-active {
    color: #fff;
    background: linear-gradient(135deg, var(--pf-primary), #7c3aed);
    box-shadow: 0 12px 28px rgba(91,61,245,.24);
}

.pf-universal-search {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    margin-top: 15px;
}

.pf-search-input-wrap {
    position: relative;
}

.pf-search-input-wrap svg {
    position: absolute;
    width: 22px;
    height: 22px;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    fill: none;
    stroke: #667085;
    stroke-width: 2;
    stroke-linecap: round;
}

.pf-search-input-wrap input {
    width: 100%;
    min-height: 60px;
    padding: 0 18px 0 52px;
    border: 1px solid #d0d5dd;
    border-radius: 15px;
    outline: none;
    font-size: 16px;
    color: var(--pf-text);
    background: #fff;
    transition: .2s ease;
}

.pf-search-input-wrap input:focus {
    border-color: var(--pf-primary);
    box-shadow: 0 0 0 4px rgba(91,61,245,.10);
}

.pf-universal-search > button {
    min-width: 130px;
    padding: 0 26px;
    border: 0;
    border-radius: 15px;
    color: #fff;
    background: #111827;
    font-weight: 900;
    font-size: 16px;
    cursor: pointer;
}

.pf-search-examples {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    color: #98a2b3;
    font-size: 13px;
}

.pf-search-examples button {
    padding: 7px 10px;
    border: 1px solid #eaecf0;
    border-radius: 999px;
    color: #475467;
    background: #fff;
    cursor: pointer;
}

.pf-categories-section,
.pf-how-section,
.pf-vehicle-data-section,
.pf-final-cta {
    padding: 100px 0;
}

.pf-section-heading {
    max-width: 760px;
    margin-bottom: 38px;
}

.pf-section-heading > span {
    color: var(--pf-primary);
}

.pf-section-heading h2 {
    margin: 10px 0 12px;
    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.06;
    letter-spacing: -.035em;
}

.pf-section-heading p {
    margin: 0;
    color: var(--pf-muted);
    font-size: 17px;
    line-height: 1.7;
}

.pf-centered {
    margin-inline: auto;
    text-align: center;
}

.pf-category-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.pf-category-card {
    display: flex;
    flex-direction: column;
    min-height: 590px;
    overflow: hidden;
    color: var(--pf-text);
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--pf-line);
    border-radius: 28px;
    box-shadow: 0 16px 45px rgba(15,23,42,.06);
    transition: transform .25s ease, box-shadow .25s ease;
}

.pf-category-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 65px rgba(15,23,42,.12);
}

.pf-category-art {
    height: 270px;
    display: grid;
    place-items: center;
    padding: 18px;
    overflow: hidden;
}

.pf-category-art svg {
    width: 100%;
    height: 100%;
}

.pf-category-vehicle .pf-category-art {
    background: linear-gradient(135deg, #eef2ff, #ede9fe);
}

.pf-category-cosmetic .pf-category-art {
    background: linear-gradient(135deg, #fdf2f8, #fff7ed);
}

.pf-category-food .pf-category-art {
    background: linear-gradient(135deg, #ecfdf5, #ecfeff);
}

.pf-category-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 27px;
}

.pf-card-tag {
    color: var(--pf-primary);
}

.pf-category-content h3 {
    margin: 12px 0 12px;
    font-size: 25px;
    line-height: 1.15;
    letter-spacing: -.02em;
}

.pf-category-content p {
    margin: 0;
    color: var(--pf-muted);
    line-height: 1.65;
}

.pf-card-links {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 20px 0;
}

.pf-card-links span {
    padding: 7px 9px;
    border-radius: 999px;
    color: #475467;
    background: #f2f4f7;
    font-size: 12px;
    font-weight: 800;
}

.pf-category-content > strong {
    margin-top: auto;
    color: var(--pf-primary-dark);
}

.pf-how-section {
    background: #fff;
}

.pf-how-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.pf-how-grid article {
    position: relative;
    padding: 28px;
    border: 1px solid var(--pf-line);
    border-radius: 22px;
    background: #fff;
}

.pf-how-grid article > span {
    position: absolute;
    right: 20px;
    top: 18px;
    color: #d0d5dd;
    font-size: 31px;
    font-weight: 900;
}

.pf-how-icon {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    margin-bottom: 28px;
    color: #fff;
    background: linear-gradient(135deg, var(--pf-primary), #7c3aed);
    border-radius: 15px;
    font-size: 25px;
    font-weight: 900;
}

.pf-how-grid h3 {
    margin: 0 0 9px;
    font-size: 19px;
}

.pf-how-grid p {
    margin: 0;
    color: var(--pf-muted);
    line-height: 1.6;
    font-size: 14px;
}

.pf-principles-section {
    padding: 110px 0;
    color: #fff;
    background:
        radial-gradient(circle at 8% 22%, rgba(91,61,245,.30), transparent 26%),
        linear-gradient(135deg, #101828, #1d2939);
}

.pf-principles-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.pf-dark-kicker {
    color: #c4b5fd;
}

.pf-principles-grid > div:first-child h2 {
    margin: 19px 0;
    font-size: clamp(38px, 4.2vw, 58px);
    line-height: 1.03;
    letter-spacing: -.04em;
}

.pf-principles-grid > div:first-child p {
    margin: 0;
    max-width: 650px;
    color: #d0d5dd;
    font-size: 17px;
    line-height: 1.75;
}

.pf-principle-list {
    display: grid;
    gap: 14px;
}

.pf-principle-list article {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 17px;
    padding: 21px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;
    background: rgba(255,255,255,.05);
}

.pf-principle-list b {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    color: #ddd6fe;
    background: rgba(124,58,237,.25);
    border-radius: 14px;
}

.pf-principle-list h3 {
    margin: 0 0 6px;
}

.pf-principle-list p {
    margin: 0;
    color: #bfc5d0;
    line-height: 1.5;
}

.pf-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.pf-stat-grid article {
    padding: 28px;
    border: 1px solid var(--pf-line);
    border-radius: 20px;
    background: #fff;
}

.pf-stat-grid strong,
.pf-stat-grid span {
    display: block;
}

.pf-stat-grid strong {
    color: var(--pf-primary);
    font-size: 38px;
    letter-spacing: -.04em;
}

.pf-stat-grid span {
    margin-top: 3px;
    color: var(--pf-muted);
    font-weight: 800;
}

.pf-brand-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin: 55px 0 20px;
}

.pf-brand-head span {
    color: var(--pf-primary);
}

.pf-brand-head h3 {
    margin: 7px 0 0;
    font-size: 27px;
}

.pf-brand-head a {
    color: var(--pf-primary-dark);
    font-weight: 900;
    text-decoration: none;
}

.pf-brand-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.pf-brand-card {
    min-width: 0;
    padding: 17px;
    color: var(--pf-text);
    text-decoration: none;
    border: 1px solid var(--pf-line);
    border-radius: 17px;
    background: #fff;
    transition: .2s ease;
}

.pf-brand-card:hover {
    transform: translateY(-3px);
    border-color: #c4b5fd;
}

.pf-brand-logo {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    overflow: hidden;
    margin-bottom: 12px;
    color: var(--pf-primary);
    background: #f4f3ff;
    border-radius: 12px;
    font-weight: 900;
}

.pf-brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pf-brand-logo span {
    width: 100%;
    height: 100%;
    place-items: center;
}

.pf-brand-card strong,
.pf-brand-card small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pf-brand-card small {
    margin-top: 4px;
    color: var(--pf-muted);
    font-size: 11px;
}

.pf-final-cta {
    padding-top: 0;
}

.pf-final-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 36px;
    align-items: center;
    padding: 45px;
    color: #fff;
    border-radius: 28px;
    background: linear-gradient(135deg, #5b3df5, #7c3aed 55%, #9333ea);
    box-shadow: 0 30px 70px rgba(91,61,245,.25);
}

.pf-final-card h2 {
    margin: 10px 0 8px;
    font-size: 36px;
}

.pf-final-card p {
    margin: 0;
    color: #ede9fe;
}

.pf-final-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 9px;
}

.pf-final-actions a {
    padding: 12px 15px;
    color: #fff;
    text-decoration: none;
    font-weight: 900;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 12px;
    background: rgba(255,255,255,.10);
}

.pf-final-actions a:first-child {
    color: #4c1d95;
    background: #fff;
}

@media (max-width: 1050px) {
    .pf-hero-grid {
        grid-template-columns: 1fr;
        padding-top: 70px;
    }

    .pf-hero-visual {
        min-height: 420px;
        max-width: 650px;
        width: 100%;
        margin-inline: auto;
    }

    .pf-category-grid {
        grid-template-columns: 1fr;
    }

    .pf-category-card {
        display: grid;
        grid-template-columns: minmax(280px, .9fr) 1.1fr;
        min-height: 0;
    }

    .pf-category-art {
        height: auto;
        min-height: 390px;
    }

    .pf-how-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pf-brand-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .pf-principles-grid {
        gap: 42px;
    }

    .pf-final-card {
        grid-template-columns: 1fr;
    }

    .pf-final-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 760px) {
    .pf-shell {
        width: min(100% - 24px, 1220px);
    }

    .pf-hero {
        min-height: auto;
    }

    .pf-hero-grid {
        padding: 58px 0 110px;
    }

    .pf-hero-copy h1 {
        font-size: 45px;
    }

    .pf-hero-copy > p {
        font-size: 16px;
    }

    .pf-hero-visual {
        min-height: 600px;
    }

    .pf-orbit-one {
        width: 320px;
        height: 320px;
        right: 50%;
        transform: translateX(50%);
    }

    .pf-orbit-two {
        width: 230px;
        height: 230px;
        right: 50%;
        transform: translateX(50%);
    }

    .pf-visual-card {
        width: min(260px, 75vw);
    }

    .pf-visual-car {
        left: 0;
        top: 20px;
    }

    .pf-visual-beauty {
        right: 0;
        top: 200px;
    }

    .pf-visual-food {
        left: 20px;
        right: auto;
        bottom: 0;
    }

    .pf-search-panel {
        padding: 20px;
    }

    .pf-search-tabs {
        flex-direction: column;
    }

    .pf-universal-search {
        grid-template-columns: 1fr;
    }

    .pf-universal-search > button {
        min-height: 54px;
    }

    .pf-categories-section,
    .pf-how-section,
    .pf-vehicle-data-section,
    .pf-final-cta {
        padding: 75px 0;
    }

    .pf-category-card {
        display: flex;
    }

    .pf-category-art {
        min-height: 260px;
        height: 260px;
    }

    .pf-how-grid,
    .pf-stat-grid {
        grid-template-columns: 1fr;
    }

    .pf-principles-grid {
        grid-template-columns: 1fr;
    }

    .pf-brand-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .pf-brand-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pf-final-card {
        padding: 29px;
    }

    .pf-final-card h2 {
        font-size: 29px;
    }

    .pf-final-actions {
        flex-direction: column;
    }

    .pf-final-actions a {
        text-align: center;
    }
}

@media (max-width: 430px) {
    .pf-hero-copy h1 {
        font-size: 39px;
    }

    .pf-visual-card {
        width: 235px;
    }

    .pf-visual-beauty {
        top: 205px;
    }
}


/* MUCGroup benzeri premium kategori görselleri */
.pf-muc-art {
    position: relative;
    min-height: 300px;
    padding: 0 !important;
    overflow: hidden;
    background: #0f172a !important;
}

.pf-muc-scene {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 300px;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 20% 25%, rgba(124,58,237,.36), transparent 34%),
        radial-gradient(circle at 80% 72%, rgba(14,165,233,.25), transparent 34%),
        linear-gradient(145deg, #111827, #1e1b4b 58%, #312e81);
}

.pf-muc-cosmetic {
    background:
        radial-gradient(circle at 25% 20%, rgba(244,114,182,.38), transparent 34%),
        radial-gradient(circle at 82% 76%, rgba(249,115,22,.22), transparent 32%),
        linear-gradient(145deg, #2e1065, #831843 58%, #9d174d);
}

.pf-muc-food {
    background:
        radial-gradient(circle at 22% 20%, rgba(52,211,153,.31), transparent 33%),
        radial-gradient(circle at 82% 76%, rgba(6,182,212,.24), transparent 32%),
        linear-gradient(145deg, #052e16, #064e3b 58%, #0f766e);
}

.pf-muc-grid {
    position: absolute;
    inset: 0;
    opacity: .16;
    background-image:
        linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.7), transparent);
}

.pf-muc-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(1px);
    border: 1px solid rgba(255,255,255,.16);
    background: linear-gradient(145deg, rgba(255,255,255,.17), rgba(255,255,255,.03));
    box-shadow: inset 0 0 30px rgba(255,255,255,.08), 0 24px 70px rgba(0,0,0,.24);
}

.pf-orb-a {
    width: 180px;
    height: 180px;
    top: -65px;
    right: -35px;
}

.pf-orb-b {
    width: 90px;
    height: 90px;
    left: 34px;
    bottom: -25px;
}

.pf-muc-device,
.pf-food-panel {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(76%, 360px);
    height: 178px;
    transform: translate(-50%, -50%) rotate(-4deg);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 24px;
    background: rgba(255,255,255,.11);
    box-shadow: 0 32px 65px rgba(0,0,0,.27);
    backdrop-filter: blur(16px);
}

.pf-device-top,
.pf-food-panel-head {
    height: 34px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 13px;
    border-bottom: 1px solid rgba(255,255,255,.13);
}

.pf-device-top span,
.pf-food-panel-head span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,.50);
}

.pf-device-screen {
    padding: 16px 19px;
}

.pf-mini-label {
    color: rgba(255,255,255,.62);
    letter-spacing: .14em;
    font-size: 9px;
    font-weight: 900;
}

.pf-car-silhouette {
    position: relative;
    width: 210px;
    height: 65px;
    margin: 12px auto 6px;
    border-radius: 42px 55px 20px 20px;
    background: linear-gradient(90deg, #818cf8, #c084fc);
    box-shadow: inset 0 10px 20px rgba(255,255,255,.18);
}

.pf-car-silhouette::before {
    content: "";
    position: absolute;
    left: 40px;
    right: 42px;
    top: -25px;
    height: 38px;
    border-radius: 30px 38px 0 0;
    background: linear-gradient(135deg, #a5b4fc, #7c3aed);
}

.pf-wheel {
    position: absolute;
    bottom: -13px;
    width: 28px;
    height: 28px;
    border: 7px solid #0f172a;
    border-radius: 50%;
    background: #dbeafe;
}

.pf-wheel-one { left: 35px; }
.pf-wheel-two { right: 35px; }

.pf-data-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 13px;
}

.pf-data-row span {
    width: 58px;
    height: 6px;
    border-radius: 99px;
    background: rgba(255,255,255,.24);
}

.pf-floating-chip {
    position: absolute;
    z-index: 4;
    padding: 8px 11px;
    color: #fff;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    background: rgba(15,23,42,.38);
    backdrop-filter: blur(13px);
    box-shadow: 0 12px 28px rgba(0,0,0,.16);
    font-size: 11px;
    font-weight: 900;
}

.pf-chip-one { left: 22px; top: 30px; }
.pf-chip-two { right: 20px; top: 88px; }
.pf-chip-three { left: 42px; bottom: 25px; }

.pf-cosmetic-podium {
    position: absolute;
    left: 50%;
    bottom: 28px;
    width: 220px;
    height: 60px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.07));
    box-shadow: 0 24px 45px rgba(0,0,0,.25);
}

.pf-cosmetic-bottle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 112px;
    height: 160px;
    transform: translate(-50%, -54%);
    border-radius: 35px 35px 30px 30px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,255,255,.12)),
        linear-gradient(160deg, #f9a8d4, #fb7185 60%, #f97316);
    border: 1px solid rgba(255,255,255,.45);
    box-shadow: inset 10px 12px 22px rgba(255,255,255,.26), 0 30px 60px rgba(0,0,0,.27);
}

.pf-bottle-cap {
    position: absolute;
    left: 50%;
    top: -28px;
    width: 58px;
    height: 36px;
    transform: translateX(-50%);
    border-radius: 12px 12px 8px 8px;
    background: linear-gradient(145deg, #fff, #d8b4fe);
    box-shadow: 0 10px 20px rgba(0,0,0,.15);
}

.pf-bottle-label {
    position: absolute;
    left: 16px;
    right: 16px;
    top: 60px;
    display: grid;
    place-items: center;
    height: 48px;
    color: #831843;
    border-radius: 15px;
    background: rgba(255,255,255,.78);
    font-weight: 900;
    letter-spacing: .08em;
}

.pf-food-panel {
    transform: translate(-50%, -50%) rotate(3deg);
}

.pf-food-map {
    position: relative;
    height: calc(100% - 34px);
    overflow: hidden;
    background:
        linear-gradient(35deg, transparent 47%, rgba(255,255,255,.13) 48%, rgba(255,255,255,.13) 52%, transparent 53%),
        linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.03));
}

.pf-food-map::before,
.pf-food-map::after {
    content: "";
    position: absolute;
    border: 2px solid rgba(255,255,255,.18);
    border-radius: 50%;
}

.pf-food-map::before {
    width: 180px;
    height: 180px;
    left: -50px;
    top: -55px;
}

.pf-food-map::after {
    width: 130px;
    height: 130px;
    right: -25px;
    bottom: -45px;
}

.pf-pin {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 5px solid #fff;
    border-radius: 50% 50% 50% 0;
    background: #10b981;
    transform: rotate(-45deg);
    box-shadow: 0 10px 18px rgba(0,0,0,.22);
}

.pf-pin-one { left: 30%; top: 30%; }
.pf-pin-two { left: 60%; top: 44%; background: #22d3ee; }
.pf-pin-three { right: 18%; top: 18%; background: #fbbf24; }

@media (max-width: 1050px) {
    .pf-muc-art,
    .pf-muc-scene {
        min-height: 390px;
    }
}

@media (max-width: 760px) {
    .pf-muc-art,
    .pf-muc-scene {
        min-height: 280px;
    }

    .pf-muc-device,
    .pf-food-panel {
        width: 78%;
    }
}