:root{
--bg:#050505;
--panel:#0b0b0b;
--orange:#ff6a00;
--amber:#ff9b3d;
--line:rgba(255,119,26,.28);
--text:#f5f4f2;
--muted:#898684;
--green:#35e784
}


*{
box-sizing:border-box
}


html{
scroll-behavior:smooth
}


body{

margin:0;

background:#030303;

color:var(--text);

font-family:
Inter,
"Segoe UI",
Arial,
sans-serif;

}



.ambient{

position:fixed;

inset:0;

pointer-events:none;

background:

radial-gradient(
circle at 74% 27%,
rgba(255,94,0,.14),
transparent 28%
),

radial-gradient(
circle at 12% 70%,
rgba(255,94,0,.08),
transparent 30%
),

linear-gradient(
115deg,
#050505,
#090909 60%,
#030303
);

z-index:-1;

}




.site-shell{

width:min(1600px,calc(100% - 42px));

margin:26px auto;

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

border-radius:24px;

overflow:hidden;

box-shadow:
0 35px 110px #000;

background:

linear-gradient(
150deg,
rgba(14,14,14,.97),
rgba(4,4,4,.98)
);

}





/* =========================
HEADER
========================= */


.topbar{

min-height:112px;

display:flex;

align-items:center;

justify-content:space-between;

padding:18px 30px;

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

}



.identity{

display:flex;

align-items:center;

gap:22px;

text-decoration:none;

color:white;

}



.identity img{

width:92px;

height:92px;

object-fit:cover;

border-radius:23px;

border:1px solid #ff741b;

box-shadow:
0 0 34px rgba(255,91,0,.2);

}



.identity span{

display:grid;

gap:8px;

}



.identity b{

font-size:25px;

letter-spacing:1.8px;

}



.identity em{

color:var(--orange);

font-style:normal;

}



.identity small{

color:#918e8b;

letter-spacing:2.4px;

font-size:10px;

}





.main-nav{

display:flex;

align-items:center;

border:

1px solid rgba(255,255,255,.1);

border-radius:17px;

padding:8px;

background:

rgba(5,5,5,.65);

}



.main-nav a{

position:relative;

overflow:hidden;

padding:18px 25px;

color:#dedbd8;

text-decoration:none;

font-weight:750;

font-size:14px;

letter-spacing:.4px;

border-radius:11px;

transition:.24s;

}



.main-nav a:hover{

color:#fff;

background:
rgba(255,101,0,.09);

}





/* =========================
HERO
========================= */


.hero{

min-height:610px;

display:grid;

grid-template-columns:.78fr 1.22fr;

align-items:center;

position:relative;

overflow:hidden;

background:

linear-gradient(
90deg,
rgba(6,6,6,.98),
rgba(6,6,6,.82) 37%,
rgba(255,92,0,.035)
);

}




.hero-copy{

padding:

66px 18px 54px 54px;

z-index:3;

}




.hero h1{

font-size:

clamp(56px,5.4vw,92px);

font-weight:300;

line-height:.94;

letter-spacing:-3px;

margin:0;

color:#f3f3f3;

}



.hero h1 span{

color:var(--orange);

}





.hero-copy>p{

text-transform:uppercase;

color:#8b8784;

letter-spacing:3.2px;

line-height:1.8;

font-size:13px;

margin:

39px 0 42px;

}





.online{

display:flex;

align-items:center;

gap:12px;

color:#777371;

font-size:10px;

}



.online i{

width:9px;

height:9px;

border-radius:50%;

background:var(--orange);

box-shadow:

0 0 16px var(--orange);

}





.hero-machine{

min-height:610px;

position:relative;

display:grid;

place-items:center;

}



.glass{

position:absolute;

width:80%;

height:78%;

border-radius:45px;

border:

1px solid rgba(255,151,83,.55);

background:

linear-gradient(
145deg,
rgba(255,255,255,.08),
rgba(255,89,0,.025),
rgba(0,0,0,.4)
);

}





.glass-front{

display:grid;

place-items:center;

overflow:hidden;

}




.glass-front img{

width:min(410px,58%);

aspect-ratio:1;

object-fit:cover;

border-radius:38px;

position:relative;

z-index:3;

filter:

drop-shadow(0 24px 40px #000);

}
/* =========================
   METRIC BAR
========================= */


.metric-bar{

position:relative;

z-index:5;

margin:

0 18px 22px;

min-height:100px;

border:

1px solid rgba(255,255,255,.11);

border-radius:18px;

background:

rgba(9,9,9,.93);

display:grid;

grid-template-columns:

repeat(4,1fr) 1.25fr;

align-items:center;

padding:

15px 22px;

box-shadow:

0 18px 55px rgba(0,0,0,.45);

}



.metric-bar article{

display:flex;

gap:14px;

align-items:center;

padding:

4px 18px;

border-right:

1px solid rgba(255,255,255,.06);

}



.metric-icon{

width:57px;

height:57px;

border:

1px solid #77320d;

border-radius:12px;

display:grid;

place-items:center;

color:var(--orange);

font-size:26px;

background:

rgba(255,91,0,.035);

}



.metric-bar small{

font-size:9px;

color:#a4a09c;

}



.metric-bar b{

font-size:23px;

margin:5px 0;

}



.metric-bar em{

font-style:normal;

font-size:9px;

color:#a4a09c;

}



.qualities{

font-size:10px;

letter-spacing:2px;

color:#8c8885;

text-align:center;

}





/* =========================
   BRAND GRID FINAL
========================= */


.brand-grid{

display:grid;

grid-template-columns:repeat(5,1fr);

gap:18px;

padding:

35px 30px;

}



.brand-card{

height:130px;

border:

1px solid rgba(255,255,255,.09);

border-radius:18px;

background:

linear-gradient(
145deg,
#101010,
#080808
);

display:flex;

align-items:center;

justify-content:center;

transition:.3s;

}



.brand-card img{

width:85px;

height:55px;

object-fit:contain;

filter:

grayscale(1)

brightness(1.7);

opacity:.8;

transition:.3s;

}



.brand-card:hover{

transform:translateY(-6px);

border-color:#ff6a00;

box-shadow:

0 20px 45px rgba(0,0,0,.5);

}



.brand-card:hover img{

filter:none;

opacity:1;

transform:scale(1.12);

}



.xiaomi{

border-color:

rgba(255,103,16,.5);

}





/* =========================
   SERVICE SHOWCASE FINAL
========================= */


.service-showcase{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:22px;

padding:

35px 30px 45px;

background:

radial-gradient(
circle at top,
rgba(255,106,0,.12),
transparent 38%
);

}





.service-showcase article{

min-height:260px;

border-radius:20px;

border:

1px solid rgba(255,106,0,.25);

background:

linear-gradient(
145deg,
rgba(25,14,8,.95),
rgba(5,5,5,.98)
);

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

transition:.35s;

position:relative;

overflow:hidden;

}




.service-showcase article:hover{

transform:

translateY(-7px);

border-color:#ff6a00;

box-shadow:

0 25px 60px rgba(0,0,0,.55),

inset 0 0 40px rgba(255,106,0,.08);

}





.service-showcase .featured{

border-color:#ff6a00;

box-shadow:

inset 0 0 35px rgba(255,106,0,.08);

}





.service-mark{

width:62px;

height:62px;

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

background:

linear-gradient(
145deg,
#ff8a00,
#ff4d00
);

color:white;

font-size:18px;

font-weight:900;

box-shadow:

0 0 30px rgba(255,106,0,.45);

}





.service-showcase h2{

font-size:20px;

letter-spacing:1.5px;

margin:

15px 0 10px;

color:white;

}





.service-showcase p{

margin:4px 0;

font-size:11px;

letter-spacing:1px;

color:#999;

}





.service-showcase strong{

margin-top:15px;

font-size:15px;

color:#ff9b3d;

}
/* =========================
   ACCESS GRID
========================= */


.access-grid{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:18px;

padding:

25px 30px 40px;

}



.access-grid a{

position:relative;

overflow:hidden;

min-height:160px;

padding:30px;

border:

1px solid rgba(255,106,0,.28);

border-radius:20px;

text-decoration:none;

background:

linear-gradient(
135deg,
rgba(255,106,0,.08),
rgba(255,255,255,.02)
);

display:flex;

flex-direction:column;

justify-content:flex-end;

transition:.3s;

}



.access-grid a:hover{

transform:translateY(-6px);

border-color:#ff6a00;

box-shadow:

0 25px 55px rgba(0,0,0,.5);

}



.access-grid span{

font-size:10px;

letter-spacing:2px;

color:#ff6a00;

font-weight:900;

}



.access-grid b{

font-size:23px;

margin:

10px 0;

color:white;

}



.access-grid small{

font-size:11px;

color:#999;

}





/* =========================
TOTAL STATS
========================= */


.total-stats{

display:grid;

grid-template-columns:

1.2fr 1fr 1fr;

border-top:

1px solid rgba(255,106,0,.25);

border-bottom:

1px solid rgba(255,106,0,.25);

background:#090909;

}



.total-stats article{

min-height:150px;

padding:

35px;

display:flex;

align-items:center;

gap:25px;

border-right:

1px solid rgba(255,106,0,.15);

}



.total-stats article:last-child{

border-right:0;

}



.total-stats i{

font-style:normal;

font-size:25px;

color:#ff6a00;

}



.total-stats strong{

font-size:34px;

color:#ff6a00;

}



.total-stats b{

font-size:17px;

letter-spacing:1px;

}



.total-stats small{

font-size:10px;

color:#888;

}





/* =========================
FINAL CTA
========================= */


.final-cta{

display:grid;

grid-template-columns:

80px 1fr auto;

align-items:center;

gap:25px;

padding:

30px 40px;

background:

linear-gradient(
90deg,
#150800,
#090909
);

border-bottom:

1px solid rgba(255,106,0,.25);

}



.final-cta img{

width:70px;

height:70px;

border-radius:18px;

border:

1px solid #ff6a00;

}



.final-cta small{

color:#ff6a00;

letter-spacing:2px;

}



.final-cta h2{

margin:8px 0;

font-size:26px;

}



.final-cta a{

padding:

18px 35px;

background:#ff6a00;

color:white;

font-weight:900;

text-decoration:none;

border-radius:12px;

box-shadow:

0 0 30px rgba(255,106,0,.35);

}




/* =========================
FOOTER
========================= */


footer{

padding:

28px 35px;

display:flex;

justify-content:space-between;

border-top:

1px solid rgba(255,255,255,.06);

color:#777;

font-size:10px;

letter-spacing:1.5px;

}





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


@media(max-width:1100px){


.hero{

grid-template-columns:1fr;

}


.hero-machine{

min-height:480px;

}



.metric-bar{

grid-template-columns:

repeat(2,1fr);

}



.brand-grid{

grid-template-columns:

repeat(4,1fr);

}



.service-showcase{

grid-template-columns:

repeat(2,1fr);

}



.access-grid{

grid-template-columns:

1fr;

}



.total-stats{

grid-template-columns:

1fr;

}


.total-stats article{

border-right:0;

border-bottom:

1px solid rgba(255,106,0,.15);

}


}





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


@media(max-width:720px){


.site-shell{

width:100%;

margin:0;

border-radius:0;

}



.topbar{

padding:14px;

flex-direction:column;

}



.identity img{

width:65px;

height:65px;

}



.identity b{

font-size:20px;

}



.main-nav{

width:100%;

display:grid;

grid-template-columns:

repeat(2,1fr);

}



.main-nav a{

padding:

13px 8px;

font-size:11px;

text-align:center;

}



.hero-copy{

padding:

45px 22px;

}



.hero h1{

font-size:50px;

}



.hero-machine{

min-height:380px;

}



.glass{

width:90%;

height:75%;

}



.glass-front img{

width:220px;

}




.metric-bar{

grid-template-columns:

1fr;

margin:

0 12px;

}



.metric-bar article{

border-right:0;

border-bottom:

1px solid rgba(255,255,255,.08);

}



.brand-grid{

grid-template-columns:

repeat(2,1fr);

padding:

25px 14px;

}



.brand-card{

height:110px;

}



.brand-card img{

width:90px;

}




.service-showcase{

grid-template-columns:

1fr;

padding:

20px 14px;

}



.service-showcase article{

min-height:230px;

}



.access-grid{

padding:

15px;

}



.total-stats article{

padding:

25px 20px;

}



.final-cta{

grid-template-columns:

60px 1fr;

padding:

25px 18px;

}



.final-cta a{

grid-column:

1/-1;

text-align:center;

}



.final-cta h2{

font-size:18px;

}



footer{

flex-direction:column;

gap:12px;

padding:

22px;

}



}
/* =====================================
   FORCE SERVICE GRID FIX
===================================== */

.service-showcase{
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:22px !important;
    padding:35px 30px 45px !important;
}


.service-showcase article,
.service-showcase article:nth-child(4),
.service-showcase article:nth-child(5),
.service-showcase article:nth-child(6){

    grid-column:auto !important;

    min-height:260px !important;

}


.service-showcase article:nth-child(1),
.service-showcase article:nth-child(2),
.service-showcase article:nth-child(3){

    grid-column:auto !important;

}


.service-showcase article:nth-child(4),
.service-showcase article:nth-child(5),
.service-showcase article:nth-child(6){

    grid-column:auto !important;

}



/* RESPONSIVE */

@media(max-width:1100px){

.service-showcase{

grid-template-columns:repeat(2,1fr) !important;

}

}



@media(max-width:720px){

.service-showcase{

grid-template-columns:1fr !important;

}

}
/* ==========================================
   FELICIA AUTH FINAL CENTER LAYOUT V5
========================================== */


/* ===============================
   BRAND CENTER
================================ */

.brand-grid{

    display:grid!important;

    grid-template-columns:repeat(5,170px)!important;

    justify-content:center!important;

    align-items:center!important;

    gap:16px!important;

    padding:45px 30px 35px!important;

}


.brand-card{

    height:125px!important;

    display:flex!important;

    align-items:center!important;

    justify-content:center!important;

    border-radius:18px!important;

}



.brand-card img{

    width:125px!important;

    height:55px!important;

    object-fit:contain!important;

    filter:grayscale(1) brightness(1.8);

    opacity:.85;

}


/* LOGO SIZE */

.brand-card.xiaomi img{

    width:70px!important;

    height:70px!important;

}


.brand-card.samsung img{

    width:140px!important;

}


.brand-card.realme img{

    width:145px!important;

}


.brand-card.infinix img{

    width:145px!important;

}


.brand-card.oneplus img{

    width:90px!important;

}



/* ===============================
 SERVICE GRID
================================ */


.service-showcase{


    display:grid!important;


    grid-template-columns:repeat(3,1fr)!important;


    gap:18px!important;


    padding:35px 45px 50px!important;


}



.service-showcase article{


    min-height:260px!important;


    grid-column:auto!important;


    border-radius:20px!important;


    display:flex!important;


    flex-direction:column!important;


    justify-content:center!important;


    align-items:center!important;


    text-align:center!important;


}



/* BARIS BAWAH TENGAH */

.service-showcase article:nth-child(4){

    grid-column:1!important;

}


.service-showcase article:nth-child(5){

    grid-column:2!important;

}


.service-showcase article:nth-child(6){

    grid-column:3!important;

}



/* ICON */

.service-mark{

    width:58px!important;

    height:58px!important;

    border-radius:15px!important;

}



/* TEXT */

.service-showcase h2{

    font-size:20px!important;

    letter-spacing:2px!important;

}



.service-showcase p{

    font-size:11px!important;

}



.service-showcase strong{

    color:#ff9b3d!important;

}




/* ===============================
 RESPONSIVE
================================ */


@media(max-width:1100px){


.brand-grid{

grid-template-columns:repeat(3,1fr)!important;

}


.service-showcase{

grid-template-columns:repeat(2,1fr)!important;

}


}



@media(max-width:700px){


.brand-grid{

grid-template-columns:repeat(2,1fr)!important;

padding:25px 15px!important;

}



.service-showcase{

grid-template-columns:1fr!important;

padding:20px 15px!important;

}


}
/* =================================
 FELICIA PREMIUM COMING SOON POPUP
================================= */


.felicia-notify{

position:fixed;

inset:0;

z-index:999999;

display:flex;

align-items:center;

justify-content:center;

background:rgba(0,0,0,.78);

backdrop-filter:blur(12px);

opacity:0;

transition:.35s ease;

}


.felicia-notify.show{

opacity:1;

}



.notify-box{

width:420px;

max-width:90%;

padding:35px;

text-align:center;

border-radius:24px;

background:

linear-gradient(
145deg,
#171717,
#050505
);


border:1px solid rgba(255,106,0,.5);


box-shadow:

0 0 60px rgba(255,106,0,.35),

0 30px 80px rgba(0,0,0,.8);


animation:

feliciaPop .35s ease;


}



.notify-icon{

width:80px;

height:80px;

margin:auto;

display:flex;

align-items:center;

justify-content:center;

font-size:40px;

border-radius:50%;

background:

linear-gradient(
135deg,
#ff6a00,
#ff9b3d
);


box-shadow:

0 0 35px rgba(255,106,0,.6);

}



.notify-box h2{

margin:22px 0 8px;

color:#fff;

font-size:24px;

letter-spacing:2px;

}



.notify-box p{

color:#999;

font-size:12px;

letter-spacing:2px;

}



.notify-status{

display:inline-block;

margin:18px 0;

padding:10px 22px;

border-radius:30px;

background:#ff6a00;

color:#fff;

font-weight:900;

letter-spacing:2px;

box-shadow:

0 0 25px rgba(255,106,0,.5);

}



.notify-box small{

display:block;

color:#777;

line-height:1.8;

font-size:11px;

letter-spacing:1px;

}



.notify-box button{

margin-top:25px;

padding:12px 35px;

border:1px solid #ff6a00;

background:transparent;

color:#ff8a2b;

border-radius:30px;

cursor:pointer;

font-weight:800;

transition:.25s;

}



.notify-box button:hover{

background:#ff6a00;

color:white;

box-shadow:0 0 25px rgba(255,106,0,.5);

}



@keyframes feliciaPop{

from{

transform:scale(.8) translateY(30px);

opacity:0;

}

to{

transform:scale(1) translateY(0);

opacity:1;

}

}
/* ===================================
 FELICIA TELEGRAM COMMUNITY BUTTON
=================================== */


.telegram-box{

margin-top:32px;

width:420px;

max-width:100%;

height:82px;

display:flex;

align-items:center;

gap:18px;

padding:14px 20px;

text-decoration:none;

border-radius:18px;

border:1px solid rgba(255,106,0,.45);

background:

linear-gradient(
135deg,
rgba(255,106,0,.12),
rgba(10,10,10,.95)
);


box-shadow:

0 0 35px rgba(255,106,0,.12),

inset 0 0 25px rgba(255,106,0,.05);


transition:.3s;

}



.telegram-box:hover{

transform:translateY(-5px);

border-color:#ff6a00;

box-shadow:

0 20px 45px rgba(0,0,0,.7),

0 0 35px rgba(255,106,0,.35);

}



.telegram-icon{

width:52px;

height:52px;

border-radius:50%;

display:grid;

place-items:center;

background:#ff6a00;

color:white;

font-size:25px;

box-shadow:

0 0 25px rgba(255,106,0,.6);

}



.telegram-box div:nth-child(2){

display:grid;

gap:5px;

}



.telegram-box strong{

color:white;

font-size:15px;

letter-spacing:1px;

}



.telegram-box span{

font-size:10px;

letter-spacing:2px;

color:#ff963d;

}



.telegram-box b{

margin-left:auto;

font-size:32px;

color:#ff6a00;

}



@media(max-width:720px){

.telegram-box{

height:72px;

}

.telegram-box strong{

font-size:12px;

}

}
/* =========================================
   FELICIA HERO POSITION PREMIUM V4
========================================= */


.hero{

    align-items:center;

}



.hero-copy{

    transform:translateY(-45px);

}



.hero h1{

    margin-top:-35px;

    font-weight:300;

}



.hero-copy>p{

    margin-top:32px;

}



/* Telegram button spacing */

.telegram-box{

    margin-top:28px;

}



/* ONLINE STATUS */

.online{

    margin-top:22px;

}



/* kanan image lebih balance */

.hero-machine{

    transform:translateY(-10px);

}



.glass-front img{

    width:min(430px,60%);

}



/* tablet */

@media(max-width:1100px){


.hero-copy{

    transform:none;

}


.hero h1{

    margin-top:0;

}


.hero-machine{

    transform:none;

}


}



/* mobile */

@media(max-width:720px){


.hero-copy{

    padding-top:35px;

    transform:none;

}


.hero h1{

    margin-top:0;

}


.telegram-box{

    width:100%;

}



}
/* =====================================
 FELICIA MOBILE OVERFLOW FIX V6
===================================== */


@media(max-width:820px){


html,
body{

overflow-x:hidden!important;
width:100%!important;

}



.site-shell{

width:100%!important;
margin:0!important;
border-radius:0!important;

}



/* HEADER */

.topbar{

display:flex!important;
flex-direction:row!important;
align-items:center!important;
justify-content:space-between!important;

padding:10px 14px!important;

min-height:75px!important;

}



.identity{

max-width:75%!important;

}



.identity img{

width:48px!important;
height:48px!important;

}



.identity b{

font-size:15px!important;

}



.identity small{

font-size:7px!important;

}



/* HERO FIX */

.hero{

display:flex!important;
flex-direction:column!important;

height:auto!important;
min-height:0!important;

}



.hero-copy{

width:100%!important;

padding:35px 20px 10px!important;

transform:none!important;

}



.hero h1{

font-size:44px!important;

line-height:1!important;

letter-spacing:-1px!important;

margin:0!important;

}



.hero-copy p{

font-size:9px!important;

line-height:2!important;

letter-spacing:1.2px!important;

margin:25px 0!important;

}



/* TELEGRAM */

.telegram-box{

width:100%!important;

height:70px!important;

margin-top:15px!important;

}



.telegram-box strong{

font-size:11px!important;

}



.telegram-box span{

font-size:8px!important;

}



/* IMAGE */

.hero-machine{

position:relative!important;

width:100%!important;

height:330px!important;

min-height:330px!important;

display:flex!important;

justify-content:center!important;

align-items:center!important;

transform:none!important;

}



.glass{

position:absolute!important;

width:88%!important;

height:75%!important;

right:auto!important;

}



.glass-back{

transform:translate(-10px,-10px)!important;

}



.glass-front{

transform:none!important;

}



.glass-front img{

width:170px!important;

height:170px!important;

}



/* METRIC */

.metric-bar{

display:flex!important;

flex-direction:column!important;

margin:0 12px 20px!important;

padding:10px!important;

}



.metric-bar article{

width:100%!important;

border-right:0!important;

}



.qualities{

padding:15px!important;

}



/* BRAND */

.brand-grid{

display:grid!important;

grid-template-columns:repeat(2,1fr)!important;

gap:10px!important;

padding:20px 14px!important;

}



.brand-card{

height:95px!important;

}



.brand-card img{

max-width:90px!important;

height:38px!important;

}



/* SERVICE */

.service-showcase{

display:grid!important;

grid-template-columns:1fr!important;

gap:14px!important;

padding:15px!important;

}



.service-showcase article{

grid-column:auto!important;

min-height:210px!important;

}



/* ACCESS */

.access-grid{

display:grid!important;

grid-template-columns:1fr!important;

}



/* CTA */

.final-cta{

display:grid!important;

grid-template-columns:55px 1fr!important;

}



.final-cta a{

grid-column:1/-1!important;

}



}



/* HP KECIL */

@media(max-width:390px){


.hero h1{

font-size:38px!important;

}


.hero-machine{

height:280px!important;

min-height:280px!important;

}


.glass-front img{

width:140px!important;
height:140px!important;

}


}
/* =====================================
 FELICIA SERVICE MOBILE CARD FIX V7
===================================== */

@media(max-width:820px){


.service-showcase{

display:flex!important;

flex-direction:column!important;

width:100%!important;

padding:20px 14px!important;

gap:16px!important;

}



.service-showcase article,
.service-showcase article:nth-child(4),
.service-showcase article:nth-child(5){

display:flex!important;

grid-column:auto!important;

width:100%!important;

min-height:230px!important;

margin:0!important;

transform:none!important;

}



.service-showcase article:hover,
.service-showcase .featured{

transform:none!important;

}



.service-showcase h2{

font-size:18px!important;

margin:16px 0 8px!important;

}



.service-showcase p{

font-size:10px!important;

line-height:1.8!important;

}



.service-mark{

width:55px!important;

height:55px!important;

font-size:15px!important;

}



.service-showcase strong{

font-size:14px!important;

margin-top:12px!important;

}



/* hilangkan kartu keluar layar */

.service-showcase *{

max-width:100%!important;

box-sizing:border-box!important;

}


}
/* =========================
   ONLINE STATUS
========================= */

.service-status{

margin-top:20px;

margin-bottom:15px;

display:inline-flex;

align-items:center;

gap:8px;

padding:7px 18px;

border-radius:30px;

font-size:12px;

font-weight:900;

letter-spacing:1px;

color:#00ff88;

background:
rgba(0,255,136,.08);

border:
1px solid rgba(0,255,136,.5);

box-shadow:
0 0 20px rgba(0,255,136,.35);

}


.status-dot{

width:10px;

height:10px;

border-radius:50%;

background:#00ff88;

box-shadow:
0 0 15px #00ff88;

animation:
onlinePulse 1.5s infinite;

}


@keyframes onlinePulse{

0%{

transform:scale(1);

opacity:1;

}


50%{

transform:scale(1.5);

opacity:.4;

}


100%{

transform:scale(1);

opacity:1;

}

}



.service-showcase article strong{

display:block;

margin-top:10px;

color:#ff8500;

font-size:16px;

}
/* =================================
   TELEGRAM + QRIS BUY CREDIT BOX
================================= */


.telegram-box,
.qris-buy{

width:420px;

height:80px;

display:flex;

align-items:center;

padding:0 20px;

border-radius:18px;

text-decoration:none;

color:#fff;

transition:.35s;

box-sizing:border-box;

}



/* =========================
   TELEGRAM
========================= */


.telegram-box{


background:

linear-gradient(
145deg,
rgba(255,115,0,.12),
rgba(15,15,15,.95)
);


border:

1px solid rgba(255,115,0,.5);


}



.telegram-box:hover,
.qris-buy:hover{


transform:translateY(-5px);


box-shadow:

0 0 35px rgba(255,115,0,.45);


}




/* =========================
   ICON
========================= */


.telegram-icon,
.qris-icon{


width:48px;

height:48px;


display:flex;

align-items:center;

justify-content:center;


background:#ff7200;


border-radius:16px;


font-size:22px;

font-weight:900;


color:#fff;


box-shadow:

0 0 25px rgba(255,115,0,.6);


margin-right:18px;


}




/* =========================
   TEXT
========================= */


.telegram-content,
.qris-text{


display:flex;

flex-direction:column;

flex:1;


}



.telegram-content strong,
.qris-text strong{


font-size:15px;


font-weight:800;


letter-spacing:1px;


}



.telegram-content span,
.qris-text small{


margin-top:5px;


font-size:10px;


letter-spacing:2px;


color:#ff8500;


}




/* =========================
   ARROW
========================= */


.telegram-box b,
.qris-arrow{


font-size:32px;


font-weight:900;


color:#ff8500;


}



/* =========================
   QRIS BUTTON
========================= */


.qris-buy{


margin-top:15px;


background:

linear-gradient(
145deg,
rgba(255,115,0,.18),
rgba(10,10,10,.95)
);



border:

1px solid #ff7200;


box-shadow:

0 0 25px rgba(255,115,0,.15);


}



.qris-buy:hover{


border-color:#ffae00;


}





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


@media(max-width:600px){


.telegram-box,
.qris-buy{


width:100%;

height:75px;


}



.telegram-content strong,
.qris-text strong{


font-size:13px;


}


}