/* ==========================================================
   PLATIN ESCORT SHOWCASE V10
   3 SUTUN / HER SUTUN 4 KART
   ========================================================== */

.pe-showcase{
    margin:44px 0 55px;
}

.pe-showcase-head{
    position:relative;
    overflow:hidden;

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

    margin-bottom:22px;
    padding:27px 30px;

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

    background:
        radial-gradient(
            550px 220px at 8% 0,
            rgba(211,179,108,.10),
            transparent 70%
        ),
        linear-gradient(
            130deg,
            #181b1e,
            #0a0c0e
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 7px 0 #030405,
        0 26px 55px rgba(0,0,0,.40);
}

.pe-showcase-head:before{
    content:"";

    position:absolute;
    left:30px;
    top:0;

    width:270px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #d6b66f,
            #fff1c4,
            transparent
        );
}

.pe-showcase-head>div:first-child>span{
    color:#d3b36c;

    font-size:9px;
    font-weight:900;
    letter-spacing:.18em;
}

.pe-showcase-head h2{
    margin:8px 0 5px;

    color:#f1eee8;

    font-size:34px;
    line-height:1;
    letter-spacing:-.035em;
}

.pe-showcase-head p{
    margin:0;

    color:#898d8f;

    font-size:11px;
}

.pe-showcase-logo{
    flex:0 0 auto;

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

    padding:9px 13px;

    border:1px solid rgba(211,179,108,.18);
    border-radius:10px;

    background:rgba(255,255,255,.025);
}

.pe-showcase-logo b{
    width:42px;
    height:42px;

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

    border:1px solid rgba(225,195,129,.70);
    border-radius:50%;

    color:#e0c27a;

    background:#090b0c;

    font:700 22px Georgia,serif;
}

.pe-showcase-logo span{
    color:#6f7476;

    font-size:7px;
    font-weight:800;
    line-height:1.4;
    letter-spacing:.15em;
}


/* ==========================================================
   3 ANA SUTUN
   ========================================================== */

.pe-columns{
    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:17px;

    align-items:start;
}

.pe-column{
    --pe-accent:#d3b36c;

    position:relative;
    overflow:hidden;

    padding:14px;

    border:1px solid rgba(255,255,255,.09);
    border-radius:17px;

    background:
        radial-gradient(
            360px 150px at 50% 0,
            rgba(255,255,255,.035),
            transparent 70%
        ),
        linear-gradient(
            180deg,
            #121517,
            #080a0b
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 7px 0 #030405,
        0 25px 50px rgba(0,0,0,.36);
}

.pe-column-vip{
    --pe-accent:#e5c87f;
}

.pe-column-platinum{
    --pe-accent:#dbe8ed;
}

.pe-column-gold{
    --pe-accent:#cf9e4b;
}

.pe-column:before{
    content:"";

    position:absolute;
    left:15%;
    right:15%;
    top:0;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--pe-accent),
            transparent
        );
}

.pe-column-head{
    min-height:90px;

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

    margin-bottom:13px;
    padding:8px 6px 14px;

    border-bottom:1px solid rgba(255,255,255,.065);
}

.pe-column-head span{
    color:var(--pe-accent);

    font-size:8px;
    font-weight:900;
    letter-spacing:.18em;
}

.pe-column-head h2{
    margin:4px 0 2px;

    color:#f2efe8;

    font-size:26px;
    line-height:1;
}

.pe-column-head p{
    margin:0;

    color:#676c6e;

    font-size:9px;
}

.pe-column-head>strong{
    width:37px;
    height:37px;

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

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

    color:var(--pe-accent);

    background:#090b0c;

    font-size:13px;
}


/* ==========================================================
   DORT KART ALT ALTA
   ========================================================== */

.pe-stack{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.pe-card{
    position:relative;

    border-radius:15px;
}

.pe-frame{
    position:relative;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.15);
    border-radius:15px;

    background:#070809;

    box-shadow:
        0 7px 0 #020304,
        0 18px 35px rgba(0,0,0,.45);
}

.pe-photo{
    position:relative;

    display:block;

    overflow:hidden;

    text-decoration:none;

    color:#fff;
}

.pe-photo>img{
    display:block;

    width:100%;
    aspect-ratio:4/5;

    object-fit:cover;
    object-position:center;
}

.pe-photo amp-img{
    display:block;

    background:#08090a;
}

.pe-photo amp-img img{
    object-fit:cover;
    object-position:center;
}


/* ==========================================================
   NEON DONGUSU
   ========================================================== */

.pe-neon-1 .pe-frame{
    animation:pe-neon-a 7s ease-in-out infinite;
}

.pe-neon-2 .pe-frame{
    animation:pe-neon-b 8s ease-in-out infinite;
}

.pe-neon-3 .pe-frame{
    animation:pe-neon-c 7.5s ease-in-out infinite;
}

.pe-neon-4 .pe-frame{
    animation:pe-neon-d 8.5s ease-in-out infinite;
}

.pe-neon-5 .pe-frame{
    animation:pe-neon-e 7.8s ease-in-out infinite;
}

.pe-neon-6 .pe-frame{
    animation:pe-neon-f 8.2s ease-in-out infinite;
}


@keyframes pe-neon-a{

    0%,100%{
        border-color:rgba(130,92,255,.78);
        box-shadow:
            0 0 8px rgba(130,92,255,.30),
            0 0 22px rgba(130,92,255,.16),
            0 7px 0 #020304;
    }

    50%{
        border-color:rgba(46,170,255,.80);
        box-shadow:
            0 0 9px rgba(46,170,255,.32),
            0 0 25px rgba(46,170,255,.18),
            0 7px 0 #020304;
    }

}

@keyframes pe-neon-b{

    0%,100%{
        border-color:rgba(36,208,219,.75);
        box-shadow:
            0 0 8px rgba(36,208,219,.28),
            0 0 23px rgba(36,208,219,.15),
            0 7px 0 #020304;
    }

    50%{
        border-color:rgba(216,84,247,.78);
        box-shadow:
            0 0 9px rgba(216,84,247,.30),
            0 0 25px rgba(216,84,247,.16),
            0 7px 0 #020304;
    }

}

@keyframes pe-neon-c{

    0%,100%{
        border-color:rgba(226,187,83,.76);
        box-shadow:
            0 0 8px rgba(226,187,83,.28),
            0 0 24px rgba(226,187,83,.15),
            0 7px 0 #020304;
    }

    50%{
        border-color:rgba(247,81,145,.75);
        box-shadow:
            0 0 9px rgba(247,81,145,.28),
            0 0 24px rgba(247,81,145,.16),
            0 7px 0 #020304;
    }

}

@keyframes pe-neon-d{

    0%,100%{
        border-color:rgba(40,191,255,.78);
        box-shadow:
            0 0 8px rgba(40,191,255,.30),
            0 0 24px rgba(40,191,255,.15),
            0 7px 0 #020304;
    }

    50%{
        border-color:rgba(112,255,167,.70);
        box-shadow:
            0 0 9px rgba(112,255,167,.27),
            0 0 24px rgba(112,255,167,.15),
            0 7px 0 #020304;
    }

}

@keyframes pe-neon-e{

    0%,100%{
        border-color:rgba(210,77,255,.72);
        box-shadow:
            0 0 8px rgba(210,77,255,.27),
            0 0 24px rgba(210,77,255,.14),
            0 7px 0 #020304;
    }

    50%{
        border-color:rgba(242,185,72,.75);
        box-shadow:
            0 0 9px rgba(242,185,72,.28),
            0 0 24px rgba(242,185,72,.15),
            0 7px 0 #020304;
    }

}

@keyframes pe-neon-f{

    0%,100%{
        border-color:rgba(70,142,255,.76);
        box-shadow:
            0 0 8px rgba(70,142,255,.29),
            0 0 24px rgba(70,142,255,.15),
            0 7px 0 #020304;
    }

    50%{
        border-color:rgba(255,79,118,.72);
        box-shadow:
            0 0 9px rgba(255,79,118,.27),
            0 0 24px rgba(255,79,118,.15),
            0 7px 0 #020304;
    }

}


/* ==========================================================
   FOTO UST BILGI
   ========================================================== */

.pe-shade{
    position:absolute;

    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.13) 0%,
            transparent 35%,
            rgba(0,0,0,.13) 50%,
            rgba(2,3,4,.97) 100%
        );
}

.pe-top{
    position:absolute;

    z-index:5;

    left:10px;
    right:10px;
    top:10px;

    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:6px;
}

.pe-tier,
.pe-featured,
.pe-online{
    display:inline-flex;
    align-items:center;

    min-height:25px;

    padding:5px 7px;

    border:1px solid rgba(255,255,255,.16);
    border-radius:6px;

    background:rgba(7,8,9,.82);

    font-size:7px;
    font-weight:900;
    letter-spacing:.08em;

    backdrop-filter:blur(9px);
}

.pe-tier{
    color:#e4c67d;
}

.pe-state{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:4px;
}

.pe-featured{
    color:#f0cf7b;

    border-color:rgba(230,190,94,.22);
}

.pe-online{
    color:#68e59b;

    border-color:rgba(75,218,130,.24);
}

.pe-online i{
    width:6px;
    height:6px;

    margin-right:4px;

    border-radius:50%;

    background:#4ce083;

    box-shadow:
        0 0 10px rgba(76,224,131,.75);
}


/* ==========================================================
   BILGI DIREKT RESIM UZERINDE
   ========================================================== */

.pe-overlay{
    position:absolute;

    z-index:6;

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

    padding:
        65px 14px
        14px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(5,7,9,.20) 12%,
            rgba(7,9,11,.86) 48%,
            rgba(5,7,9,.98) 100%
        );
}

.pe-name{
    display:flex;
    align-items:center;
    gap:7px;
}

.pe-name h3{
    min-width:0;

    margin:0;

    color:#fff;

    font-size:22px;
    line-height:1.05;

    text-shadow:
        0 3px 15px rgba(0,0,0,.75);
}

.pe-blue-check{
    width:19px;
    height:19px;

    flex:0 0 19px;

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

    border:2px solid #fff;
    border-radius:50%;

    color:#fff;
    background:#1385f5;

    font-size:10px;
    font-weight:900;

    box-shadow:
        0 0 14px rgba(19,133,245,.65);
}

.pe-approved{
    margin-top:5px;

    color:#73baff;

    font-size:7px;
    font-weight:900;
    letter-spacing:.08em;
}

.pe-meta{
    display:flex;
    flex-wrap:wrap;
    gap:4px;

    margin-top:8px;
}

.pe-meta span{
    padding:4px 6px;

    border:1px solid rgba(255,255,255,.10);
    border-radius:5px;

    color:#c1c4c5;

    background:rgba(255,255,255,.035);

    font-size:7px;
    font-weight:800;
}

.pe-short{
    margin:8px 0 0;

    color:#a8acad;

    font-size:9px;
    line-height:1.45;
}

.pe-tags{
    display:flex;
    flex-wrap:wrap;
    gap:4px;

    margin-top:7px;
}

.pe-tags span{
    padding:4px 6px;

    border:1px solid rgba(255,255,255,.08);
    border-radius:5px;

    color:#8d9294;

    font-size:7px;
}


/* ==========================================================
   BUTONLAR
   ========================================================== */

.pe-actions{
    display:grid;
    grid-template-columns:1.25fr .75fr;
    gap:6px;

    margin-top:11px;
}

.pe-actions a{
    min-height:35px;

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

    padding:8px;

    border-radius:7px;

    text-decoration:none;

    font-size:7px;
    font-weight:900;
    letter-spacing:.05em;
}

.pe-contact.wa{
    color:#75e39d;

    border:1px solid rgba(67,206,120,.27);

    background:
        rgba(48,178,98,.09);
}

.pe-contact.call{
    color:#77bcff;

    border:1px solid rgba(70,155,238,.27);

    background:
        rgba(48,129,207,.09);
}

.pe-profile{
    color:#e4c67d;

    border:1px solid rgba(211,179,108,.23);

    background:
        rgba(211,179,108,.07);
}

.pe-empty{
    padding:25px 12px;

    text-align:center;

    border:1px dashed rgba(255,255,255,.10);
    border-radius:10px;

    color:#63686a;

    font-size:9px;
}


/* TABLET */

@media(max-width:1050px){

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

    .pe-column-gold{
        grid-column:1/-1;
    }

    .pe-column-gold .pe-stack{
        display:grid;

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

}


/* MOBILE */

@media(max-width:700px){

    .pe-showcase{
        margin-top:28px;
        margin-bottom:38px;
    }

    .pe-showcase-head{
        padding:22px 18px;
    }

    .pe-showcase-head h2{
        font-size:28px;
    }

    .pe-showcase-logo{
        display:none;
    }

    .pe-columns{
        grid-template-columns:1fr;
        gap:18px;
    }

    .pe-column-gold{
        grid-column:auto;
    }

    .pe-column-gold .pe-stack{
        display:flex;
    }

    .pe-column{
        padding:12px;
    }

    .pe-column-head{
        min-height:75px;
    }

    .pe-name h3{
        font-size:24px;
    }

}


/* KULLANICI AZ HAREKET TERCIH EDIYORSA */

@media(prefers-reduced-motion:reduce){

    .pe-frame{
        animation:none;
    }

}