/* ==========================================================
   PLATIN ESCORT
   ULTRA SHOWCASE V9
   NORMAL + AMP ORTAK VITRIN TASARIMI
   ========================================================== */

.lux-showcase{
    position:relative;
    margin:42px 0 58px;
}

.lux-showcase-intro{
    position:relative;
    overflow:hidden;

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

    margin-bottom:24px;
    padding:30px 34px;

    border:1px solid rgba(231,205,148,.17);
    border-radius:18px;

    background:
        radial-gradient(
            620px 220px at 8% 0,
            rgba(223,192,121,.10),
            transparent 72%
        ),
        linear-gradient(
            125deg,
            #15181b 0%,
            #0b0d0f 60%,
            #08090b 100%
        );

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

.lux-showcase-intro:before{
    content:"";
    position:absolute;
    left:32px;
    top:0;

    width:270px;
    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #d8bb79,
            #fff0c5,
            transparent
        );
}

.lux-showcase-intro>div:first-child{
    position:relative;
    z-index:2;
}

.lux-showcase-intro>div:first-child>span{
    display:block;

    margin-bottom:9px;

    color:#d6b771;

    font-size:10px;
    font-weight:800;
    letter-spacing:.18em;
}

.lux-showcase-intro h2{
    margin:0;

    color:#f1eee7;

    font-size:clamp(28px,3vw,42px);
    line-height:1.02;
    letter-spacing:-.035em;
}

.lux-showcase-intro p{
    max-width:720px;

    margin:11px 0 0;

    color:#8f9291;

    font-size:13px;
    line-height:1.7;
}

.lux-showcase-seal{
    position:relative;

    flex:0 0 auto;

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

    min-width:185px;

    padding:12px 15px;

    border:1px solid rgba(220,191,126,.16);
    border-radius:12px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.01)
        );
}

.lux-showcase-seal b{
    width:45px;
    height:45px;

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

    border:1px solid rgba(229,199,135,.68);
    border-radius:50%;

    color:#e0c482;

    font:700 23px Georgia,serif;

    background:
        radial-gradient(
            circle at 35% 25%,
            #33312d,
            #101214 55%,
            #070809
        );
}

.lux-showcase-seal span{
    color:#777b7d;

    font-size:8px;
    font-weight:800;
    line-height:1.45;
    letter-spacing:.16em;
}


/* ==========================================================
   TIER KABUK
   ========================================================== */

.lux-tier{
    --lux-accent:#d3b36c;
    --lux-accent-soft:rgba(211,179,108,.11);
    --lux-accent-line:rgba(211,179,108,.36);

    position:relative;
    overflow:hidden;

    margin-bottom:25px;
    padding:22px;

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

    background:
        radial-gradient(
            620px 240px at 8% 0,
            var(--lux-accent-soft),
            transparent 72%
        ),
        linear-gradient(
            145deg,
            #131619,
            #080a0c
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 8px 0 #030405,
        0 28px 60px rgba(0,0,0,.38);
}

.lux-tier:before{
    content:"";

    position:absolute;

    left:28px;
    right:28px;
    top:0;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--lux-accent),
            rgba(255,255,255,.75),
            var(--lux-accent),
            transparent
        );

    opacity:.72;
}

.lux-tier-vip{
    --lux-accent:#e1c57f;
    --lux-accent-soft:rgba(225,197,127,.105);
    --lux-accent-line:rgba(225,197,127,.38);
}

.lux-tier-platinum{
    --lux-accent:#dce4e8;
    --lux-accent-soft:rgba(199,219,229,.075);
    --lux-accent-line:rgba(208,225,233,.32);
}

.lux-tier-gold{
    --lux-accent:#c99e51;
    --lux-accent-soft:rgba(201,158,81,.085);
    --lux-accent-line:rgba(201,158,81,.32);
}

.lux-tier-head{
    position:relative;
    z-index:2;

    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;

    margin-bottom:20px;
    padding:3px 4px 17px;

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

.lux-tier-title>span{
    display:block;

    margin-bottom:6px;

    color:var(--lux-accent);

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

.lux-tier-title h2{
    margin:0;

    color:#f1eee7;

    font-size:28px;
    line-height:1.05;
    letter-spacing:-.025em;
}

.lux-tier-title p{
    margin:7px 0 0;

    color:#777c7e;

    font-size:11px;
    line-height:1.5;
}

.lux-tier-count{
    flex:0 0 auto;

    display:flex;
    align-items:baseline;
    gap:7px;

    padding:8px 12px;

    border:1px solid var(--lux-accent-line);
    border-radius:9px;

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

.lux-tier-count strong{
    color:var(--lux-accent);
    font-size:18px;
}

.lux-tier-count span{
    color:#707578;

    font-size:8px;
    font-weight:800;
    letter-spacing:.12em;
}


/* ==========================================================
   GRID HIERARCHY
   VIP 2 / PLATIN 3 / GOLD 4
   ========================================================== */

.lux-grid{
    position:relative;
    z-index:2;

    display:grid;
    gap:16px;
}

.lux-tier-vip .lux-grid{
    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:20px;
}

.lux-tier-platinum .lux-grid{
    grid-template-columns:
        repeat(3,minmax(0,1fr));
}

.lux-tier-gold .lux-grid{
    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:13px;
}


/* ==========================================================
   KART
   ========================================================== */

.lux-card{
    position:relative;

    min-width:0;

    border-radius:18px;

    transition:
        transform .28s ease;
}

.lux-card:hover{
    transform:translateY(-5px);
}

.lux-card-frame{
    position:relative;
    overflow:hidden;

    height:100%;

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

    background:#090b0d;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.09),
        0 7px 0 rgba(2,3,4,.95),
        0 22px 45px rgba(0,0,0,.43);
}

.lux-card-frame:before{
    content:"";

    position:absolute;
    z-index:5;

    left:16%;
    right:16%;
    top:0;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--lux-accent,#d3b36c),
            transparent
        );

    pointer-events:none;
}

.lux-card-vip{
    --lux-accent:#e1c57f;
}

.lux-card-platinum{
    --lux-accent:#dce4e8;
}

.lux-card-gold{
    --lux-accent:#c99e51;
}

.lux-card-vip .lux-card-frame{
    border-color:
        rgba(225,197,127,.20);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 8px 0 #030405,
        0 30px 58px rgba(0,0,0,.48),
        0 0 38px rgba(225,197,127,.025);
}

.lux-card-platinum .lux-card-frame{
    border-color:
        rgba(214,227,233,.15);
}

.lux-card-gold .lux-card-frame{
    border-color:
        rgba(201,158,81,.16);
}


/* FOTO */

.lux-photo{
    position:relative;

    display:block;
    overflow:hidden;

    text-decoration:none;

    background:#08090a;
}

.lux-img{
    display:block;

    width:100%;
}

.lux-photo>img{
    display:block;

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

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

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

    background:#08090a;
}

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

.lux-photo-shade{
    position:absolute;

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

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.08) 0%,
            transparent 45%,
            rgba(0,0,0,.15) 66%,
            rgba(3,4,5,.92) 100%
        );

    pointer-events:none;
}

.lux-number{
    position:absolute;

    right:14px;
    bottom:14px;

    z-index:3;

    color:rgba(255,255,255,.11);

    font:700 50px/1 Georgia,serif;

    letter-spacing:-.07em;
}

.lux-card-vip .lux-number{
    font-size:70px;
}


/* TOP BADGES */

.lux-topbar{
    position:absolute;

    z-index:4;

    left:12px;
    right:12px;
    top:12px;

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

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

    min-height:28px;

    padding:6px 9px;

    border-radius:7px;

    background:
        rgba(6,7,8,.86);

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

.lux-tier-badge{
    color:var(--lux-accent,#d3b36c);

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

.lux-top-status{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:5px;
}

.lux-featured{
    color:#e7ca83;

    border:
        1px solid rgba(225,197,127,.23);
}

.lux-online{
    color:#79dfa0;

    border:
        1px solid rgba(95,211,139,.21);
}

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

    margin-right:5px;

    border-radius:50%;

    background:#55dc89;

    box-shadow:
        0 0 9px rgba(85,220,137,.65);
}


/* ==========================================================
   FLOATING INFO PANEL
   ========================================================== */

.lux-panel{
    position:relative;
    z-index:8;

    margin:-70px 12px 12px;
    padding:17px;

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

    background:
        linear-gradient(
            150deg,
            rgba(24,27,30,.97),
            rgba(10,12,14,.985)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.085),
        0 17px 34px rgba(0,0,0,.45);
}

.lux-card-vip .lux-panel{
    margin-top:-88px;
    padding:21px;
}

.lux-name-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}

.lux-name-row h3{
    min-width:0;

    margin:0;

    color:#f2efe8;

    font-size:20px;
    line-height:1.05;
    letter-spacing:-.025em;
}

.lux-card-vip .lux-name-row h3{
    font-size:28px;
}

.lux-check{
    width:19px;
    height:19px;

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

    margin-left:4px;

    border-radius:50%;

    color:#fff;
    background:#147df5;

    font-size:11px;

    vertical-align:2px;

    box-shadow:
        0 0 12px rgba(20,125,245,.28);
}

.lux-rank{
    flex:0 0 auto;

    color:var(--lux-accent,#d3b36c);

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

.lux-meta{
    display:flex;
    flex-wrap:wrap;
    gap:5px;

    margin-top:9px;
}

.lux-meta span{
    padding:4px 7px;

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

    color:#8e9395;

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

.lux-meta .verified-text{
    color:#67aef9;

    border-color:
        rgba(48,133,230,.20);
}

.lux-short{
    margin:11px 0 0;

    min-height:34px;

    color:#a3a6a6;

    font-size:10px;
    line-height:1.55;
}

.lux-card-vip .lux-short{
    font-size:12px;
    line-height:1.65;
}

.lux-tags{
    display:flex;
    flex-wrap:wrap;
    gap:5px;

    margin-top:12px;
}

.lux-tags span{
    padding:5px 7px;

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

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

    color:#777c7e;

    font-size:8px;
}


/* ==========================================================
   ACTIONS
   ========================================================== */

.lux-actions{
    display:grid;
    grid-template-columns:
        minmax(0,1.2fr)
        minmax(0,.8fr);

    gap:7px;

    margin-top:15px;
}

.lux-actions a{
    min-height:38px;

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

    padding:9px 10px;

    border-radius:8px;

    text-align:center;
    text-decoration:none;

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

.lux-profile-btn{
    color:#e9e5dc;

    border:
        1px solid rgba(255,255,255,.13);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.015)
        );
}

.lux-profile-btn b{
    color:var(--lux-accent,#d3b36c);
}

.lux-contact-btn{
    color:#e3c57f;

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

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

.lux-contact-whatsapp{
    color:#71dc99;

    border-color:
        rgba(73,205,124,.25);

    background:
        rgba(73,205,124,.055);
}

.lux-contact-phone{
    color:#7ab7f7;

    border-color:
        rgba(70,147,230,.24);

    background:
        rgba(70,147,230,.055);
}

.lux-contact-telegram{
    color:#77bff0;

    border-color:
        rgba(60,157,218,.24);

    background:
        rgba(60,157,218,.055);
}

.lux-full{
    grid-column:1/-1;
}


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

@media(max-width:1100px){

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

    .lux-tier-gold .lux-grid{
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }

}


/* ==========================================================
   MOBILE PREMIUM
   ========================================================== */

@media(max-width:760px){

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

    .lux-showcase-intro{
        padding:22px 19px;

        border-radius:15px;
    }

    .lux-showcase-intro h2{
        font-size:29px;
    }

    .lux-showcase-seal{
        display:none;
    }

    .lux-tier{
        margin-bottom:18px;
        padding:12px;

        border-radius:16px;
    }

    .lux-tier-head{
        align-items:center;

        padding:
            5px 3px
            13px;
    }

    .lux-tier-title h2{
        font-size:22px;
    }

    .lux-tier-title p{
        font-size:9px;
    }

    .lux-tier-count{
        padding:7px 9px;
    }

    .lux-tier-vip .lux-grid,
    .lux-tier-platinum .lux-grid,
    .lux-tier-gold .lux-grid{
        grid-template-columns:1fr;
        gap:15px;
    }

    .lux-card{
        max-width:520px;
        width:100%;
        margin:0 auto;
    }

    .lux-panel,
    .lux-card-vip .lux-panel{
        margin:
            -72px 10px
            10px;

        padding:16px;
    }

    .lux-card-vip .lux-name-row h3,
    .lux-name-row h3{
        font-size:23px;
    }

    .lux-short,
    .lux-card-vip .lux-short{
        font-size:11px;
        min-height:0;
    }

    .lux-actions a{
        min-height:42px;
        font-size:9px;
    }

}


/* ==========================================================
   VERY SMALL MOBILE
   ========================================================== */

@media(max-width:390px){

    .lux-actions{
        grid-template-columns:1fr;
    }

    .lux-actions a,
    .lux-full{
        grid-column:auto;
    }

    .lux-top-status{
        max-width:52%;
    }

    .lux-featured,
    .lux-online,
    .lux-tier-badge{
        padding:5px 7px;
        font-size:7px;
    }

}
