/* ================================= */
/* HTML ROOT */
/* ================================= */

html{
background:#1a3a5c;
}


/* ================================= */
/* GLOBAL */
/* ================================= */

body{
margin:0;
font-family:Arial, Helvetica, sans-serif;
}


/* ================================= */
/* KHUSUS HALAMAN INDEX */
/* ================================= */

body:not(.page-input-nama){
background:linear-gradient(
180deg,
#2c78c9 0%,
#2c78c9 40%,
#2C78C9 100%
);
height:100vh;
max-height:100vh;
overflow:hidden;
}


/* ================================= */
/* OVERLAY INPUT NAMA */
/* ================================= */

#inputNamaOverlay{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.7);
justify-content:center;
align-items:center;
flex-direction:column;
z-index:1000;
}


/* ================================= */
/* KHUSUS HALAMAN INPUT NAMA */
/* ================================= */

body.page-input-nama{
background:rgba(26,58,92,0.85);
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
height:100vh;
min-height:100vh;
overflow:hidden;
}

body.page-input-nama .card-preview{
position:relative;
width:400px;
margin:0;
}

body.page-input-nama .btn-row{
margin-top:16px;
margin-bottom:0;
}


/* ================================= */
/* PAGE */
/* ================================= */

.page{
height:100vh;
max-height:100vh;
display:flex;
flex-direction:column;
justify-content:space-between;
padding:2vh 0;
box-sizing:border-box;
overflow:hidden;
}


/* ================================= */
/* HERO — DESKTOP */
/* ================================= */

.hero{
display:flex;
flex-direction:row;
justify-content:space-evenly;
align-items:center;
padding:0 5vw;
flex-wrap:nowrap;
margin-top:4.5vh;
}

.hero-left{
display:flex;
align-items:center;
justify-content:center;
flex:1;
}

.hero-center{
display:flex;
align-items:center;
justify-content:center;
flex:1;
}

.hero-right{
display:flex;
align-items:center;
justify-content:center;
flex:1;
margin-top:35px;
}

.hero-left img{
width:23.8vw;
max-width:323px;
}

.hero-center .logo-1{
width:20vw;
max-width:320px;
}

.hero-right .logo-2{
width:15vw;
max-width:346px;
}


/* ================================= */
/* TITLE */
/* ================================= */

.title{
text-align:center;
color:white;
font-size:23px;
font-weight:600;
margin:24px 0 6px 0;
text-shadow:0 1px 2px rgba(0,0,0,0.25);
}


/* ================================= */
/* CARDS — DESKTOP */
/* ================================= */

.cards{
display:flex;
justify-content:center;
align-items:center;
gap:16px;
margin:0;
margin-top:16px;
padding-bottom:70px;
}

.cards img{
width:16vw;
max-width:180px;
border-radius:22px;
box-shadow:0 6px 12px rgba(0,0,0,0.15);
transition:transform 0.25s ease, box-shadow 0.25s ease;
}

.card:hover{
transform:translateY(-10px);
box-shadow:0 14px 25px rgba(0,0,0,0.25);
cursor:pointer;
}


/* ================================= */
/* POPUP PREVIEW */
/* ================================= */

.preview-modal{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.7);
justify-content:center;
align-items:center;
z-index:999;
}

.preview-content{
position:relative;
text-align:center;
}

.preview-content img{
width:320px;
border-radius:20px;
}

.close{
position:absolute;
top:-40px;
right:-10px;
font-size:16px;
color:rgb(255,255,255);
cursor:pointer;
padding:6px 14px;
border-radius:20px;
font-weight:600;
letter-spacing:1px;
}

.swiper{
width:340px;
}


/* =============================== */
/* SWIPER NAVIGATION */
/* =============================== */

.swiper-button-next,
.swiper-button-prev{
width:36px !important;
height:36px !important;
background:#ffffff;
border-radius:50%;
box-shadow:0 2px 8px rgba(0,0,0,0.2);
}

.swiper-button-next::after,
.swiper-button-prev::after{
font-size:14px !important;
color:#2c78c9;
font-weight:900;
}


/* =============================== */
/* CARD PREVIEW (input-nama) */
/* =============================== */

.card-preview{
position:relative;
width:400px;
margin:60px auto 20px auto;
}

.card-preview img{
width:100%;
display:block;
}


/* =============================== */
/* NAMA BOX — frame text */
/* =============================== */

.nama-box{
position:absolute;
bottom:20px;
left:50%;
transform:translateX(-50%);
width:200px;
height:50px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}

.frame-text{
position:absolute;
width:100%;
height:100%;
object-fit:fill;
z-index:0;
}


/* =============================== */
/* INPUT DI KARTU */
/* =============================== */

#namaInput{
position:relative;
z-index:1;
width:85%;
height:100%;
max-width:85%;
border:none;
outline:none;
background:transparent;
text-align:center;
font-family:'El Messiri', sans-serif;
font-weight:600;
color:#313131;
font-size:19px; /* UBAH — dari 26px → 19px samakan placeholder */
padding:0 8px;
box-sizing:border-box;
white-space:nowrap;
overflow:hidden;
text-overflow:clip;
-webkit-box-shadow:none !important;
box-shadow:none !important;
-webkit-text-fill-color:#313131 !important;
}

#namaInput::placeholder{
color:rgba(49,49,49,0.4) !important;
-webkit-text-fill-color:rgba(49,49,49,0.4) !important;
opacity:1;
}

#namaInput:-webkit-autofill,
#namaInput:-webkit-autofill:hover,
#namaInput:-webkit-autofill:focus,
#namaInput:-webkit-autofill:active{
-webkit-box-shadow:none !important;
box-shadow:none !important;
-webkit-text-fill-color:#313131 !important;
transition:background-color 5000s ease-in-out 0s;
}


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

.btn-row{
display:flex;
justify-content:center;
align-items:center;
gap:20px;
margin-top:10px;
margin-bottom:40px;
}

.btn-img{
width:140px;
cursor:pointer;
transition:0.2s;
}

.btn-img:hover{
transform:scale(1.05);
}

.btn-img:active{
transform:scale(0.92);
}


/* =============================== */
/* BUTTON POPUP */
/* =============================== */

.preview-content .btn-img{
width:140px;
margin-top:16px;
display:block;
margin-left:auto;
margin-right:auto;
}


/* =============================== */
/* BUTTON SHARE */
/* =============================== */

.btn-share-row{
display:none;
justify-content:center;
align-items:center;
margin-top:5px;
}

.btn-share{
background:linear-gradient(135deg, #25D366, #128C7E);
color:white;
border:none;
border-radius:50px;
padding:10px 40px;
font-size:15px;
font-weight:600;
cursor:pointer;
transition:0.2s;
letter-spacing:1px;
box-shadow:0 4px 12px rgba(0,0,0,0.2);
}

.btn-share:hover{
transform:scale(1.05);
}

.btn-share:active{
transform:scale(0.95);
}

#inputNamaOverlay .btn-row{
margin-bottom:8px;
}

#inputNamaOverlay .btn-share-row{
display:flex;
margin-top:0;
}


/* =============================== */
/* HERO LOGOS WRAPPER — MOBILE */
/* =============================== */

.hero-logos{
display:none;
}


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

@media (max-width:768px){

body:not(.page-input-nama){
height:100vh;
max-height:100vh;
overflow-y:auto;
overflow-x:hidden;
}

body.page-input-nama{
background:rgba(0,0,0,0.7);
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
height:100vh;
overflow:hidden;
}

body.page-input-nama .card-preview{
width:88vw;
margin:0;
}

body.page-input-nama .btn-row{
margin-top:16px;
margin-bottom:0;
}

/* NAMA BOX — proporsional dengan kartu mobile */
body.page-input-nama .nama-box{
width:75%;
height:45px;      /* UBAH — dari 35px → 45px */
bottom:15px;
overflow:hidden;
}

/* FRAME TEXT — ikuti ukuran nama-box */
body.page-input-nama .frame-text{
width:100%;
height:100%;
object-fit:fill;
}

/* INPUT — 26px di mobile juga */
body.page-input-nama #namaInput{
font-size:35px;   /* UBAH — ideal untuk mobile */
width:78%;
max-width:78%;
overflow:hidden;
white-space:nowrap;
text-overflow:clip;
}

.page{
height:100vh;
min-height:100vh;
justify-content:flex-start;
padding:3vw 0 2vw 0;
overflow:hidden;
}

.hero{
flex-direction:column;
align-items:center;
gap:1vh;
padding:0 4vw;
flex-wrap:nowrap;
margin-top:0;
}

.hero-left{
order:1;
width:100%;
display:flex;
justify-content:center;
align-items:center;
}

.hero-center,
.hero-right{
display:none;
}

.hero-logos{
order:2;
display:flex;
flex-direction:row;
align-items:center;
justify-content:center;
gap:16px;
width:100%;
}

.hero-logos .logo-1{
width:23vw;
max-width:100px;
}

.hero-logos .logo-2{
width:35vw;
max-width:150px;
}

.hero-left img{
width:55vw;
max-width:240px;
}

.title{
font-size:14px;
margin:30px 0 8px 0;
}

#cardsDesktop{
display:none !important;
}

/* MOBILE SWIPER VERTIKAL */
#cardsMobile{
display:block !important;
width:100%;
box-sizing:border-box;
flex:1;
overflow:hidden;
}

.swiper-mobile{
width:100%;
height:calc(52vh + 10px);
padding:0 12vw !important;
box-sizing:border-box;
}

.swiper-mobile .swiper-slide{
display:flex;
justify-content:center;
align-items:center;
border-radius:16px;
overflow:hidden;
}

.swiper-mobile .swiper-slide img{
width:100%;
height:100%;
object-fit:cover;
border-radius:16px;
box-shadow:0 6px 12px rgba(0,0,0,0.15);
cursor:pointer;
transition:transform 0.25s ease, box-shadow 0.25s ease;
}

.swiper-mobile .swiper-slide img:active{
transform:scale(0.96);
}

.swiper-mobile .swiper-pagination{
right:4px !important;
left:auto !important;
}

.swiper-mobile .swiper-pagination-bullet{
background:#ffffff;
opacity:0.6;
}

.swiper-mobile .swiper-pagination-bullet-active{
opacity:1;
background:#ffffff;
}

.card-preview{
position:relative;
width:88vw;
margin:20px auto 0 auto;
top:auto;
left:auto;
transform:none;
}

.btn-row{
margin-top:10px;
margin-bottom:4px;
}

.btn-img{
width:100px;
}

.preview-content .btn-img{
width:100px;
}

.preview-content img{
width:78vw;
max-width:300px;
}

.swiper{
width:82vw;
max-width:320px;
}

.close{
top:-35px;
right:-10px;
font-size:16px;
padding:6px 14px;
border-radius:20px;
font-weight:600;
letter-spacing:1px;
}

.btn-share-row{
display:flex;
margin-top:4px;
}

}