:root{
    --bg:#f4f7f9;
    --surface:#edf2f5;
    --text:#385572;
    --text-soft:#87a0b5;
    --primary:#2ea7df;

    --danger:#ef4444;
    --success:#10b981;
    --warning:#f59e0b;

    --soft-green:#dff1ea;
    --soft-pink:#f7dddd;
    --soft-yellow:#efe2a6;
    --soft-purple:#e7dcf3;
    --soft-blue:#dce7f7;
    --soft-mint:#d9f1ea;

    --alert-bg:#f9e3e3;
    --alert-border:#eba3a3;
    --alert-title:#a61f1f;
    --alert-text:#b02b2b;

    --fontTitle:20px;
    --fontSubTitle:18px;
    --fontBody:12px;
    --fontSubBody:10px;
    --fontIcon:22px;
    --fontIconBig:30px;
    --fontBig:33px;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family: "Plus Jakarta Sans", Arial, sans-serif;
    color:var(--text);
}

.mobile-page{
    width:100%;
    max-width:430px;
    min-height:100vh;
    margin:0 auto;
    padding:20px 18px 110px;
}

/* ===== hero / top profile header ===== */
.hero-top{
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #138fbe 0%, #2ea7df 100%);
    margin: -20px -18px 28px;
    color: #ffffff;
    border-radius: 0 0 24px 24px;
}

.hero-top::before{
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    top: -70px;
    right: -70px;
}

.hero-top::after{
    content: "";
    position: absolute;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: rgba(255,255,255,0.16);
    top: 26px;
    right: 34px;
}

/* sticky top bar */
.hero-topbar{
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 429px;
    z-index: 999;
    display: grid;
    grid-template-columns: 48px 1fr 40px;
    align-items: center;
    column-gap: 16px;
    padding: 18px 24px 10px;
    background: linear-gradient(135deg, #138fbe 0%, #2ea7df 100%);
    backdrop-filter: blur(6px);
    border-radius: 0 0 24px 24px;
}

.hero-logo{
    width:48px;
    height:48px;
    border-radius:50%;
    background:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    flex-shrink:0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

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

.hero-bell{
    position: relative;
    width:40px;
    height:40px;
    border-radius:14px;
    background: rgba(255,255,255,0.12);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:var(--fontIcon);
    color:#fff;
    flex-shrink:0;
}

.hero-bell-badge{
    position:absolute;
    top:-4px;
    right:-2px;
    width:14px;
    height:14px;
    border-radius:50%;
    background:#ff4b4b;
    border:2px solid #2ea7df;
}

.hero-main{
    position: relative;
    z-index: 2;
    padding: 80px 24px 24px;
}

.hero-greeting{
    font-size: var(--fontBody);
    line-height: 1.3;
    font-weight: 500;
    color: rgba(255,255,255,0.78);
    margin-bottom: 6px;
}

/* ===== nama ===== */
.hero-name{
    font-size: var(--fontIcon);
    line-height: 1.2;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 6px; /* diperkecil biar mepet */
}

/* ===== anggota ===== */
.hero-member-badge{
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: var(--fontSubBody);
    font-weight: 800;
    margin: 6px 0 8px;
    width: fit-content;
    backdrop-filter: blur(4px);
}

.hero-member-badge::before{
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 7px;
    background: currentColor;
}

.badge-success{
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

.badge-danger{
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

/* ===== nomor anggota ===== */
.hero-member-number{
    font-size: var(--fontIcon);
    color: rgba(255,255,255,0.75);
    font-weight: 500;
    margin-bottom: 18px; /* ini jarak ke "Total Simpanan" */
}

/* ===== label total ===== */
.hero-label{
    font-size: var(--fontSubTitle);
    line-height: 1.3;
    font-weight: 500;
    color: rgba(255,255,255,0.78);
    margin-bottom: 6px;
}

.hero-balance{
    font-size: var(--fontBig);
    line-height: 1.1;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.5px;
    margin-bottom: 6px;
}

.hero-subtext{
    font-size: var(--fontSubBody);
    line-height: 1.35;
    font-weight: 500;
    color: rgba(255,255,255,0.62);
}

.hero-login-bar{
    position: relative;
    z-index: 2;
    background: rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 8px 24px;
}

.hero-login-text{
    font-size: var(--fontBody);
    line-height: 1.35;
    font-weight: 500;
    color: rgba(255,255,255,0.88);
}

/* optional wrapper biar isi bawah tetap rapi */
.content-wrap{
    padding-bottom: 12px;
}

/* ===== stats ===== */
.stats-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:18px;
    margin-bottom:36px;
}

.stat-card{
    background:var(--surface);
    border-radius:25px;
    padding:20px 18px;
    min-height:100px;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
}

.stat-value{
    font-size:var(--fontTitle);
    line-height:1;
    font-weight:800;
    margin-bottom:14px;
    letter-spacing:-0.5px;
    color:#1f2937;
}

.stat-label{
    font-size:var(--fontSubTitle);
    line-height:1.28;
    font-weight:500;
    color:var(--text-soft);
}

.stat-value.danger{ color:#ef4444; }
.stat-value.success{ color:#10b981; }
.stat-value.warning{ color:#f59e0b; }

/* ===== title ===== */
.section-title{
    font-size:var(--fontSubTitle);
    line-height:1.1;
    font-weight:800;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--text-soft);
    margin-bottom:26px;
}

/* ===== service menu ===== */
.menu-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:20px 20px;
    margin-bottom:40px;
}

.menu-card{
    background:var(--surface);
    border-radius:25px;
    min-height:100px;
    padding:10px 18px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    text-align:center;
}

.menu-icon-box{
    width:72px;
    height:72px;
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:var(--fontIconBig);
    margin-top:12px;
    margin-bottom:10px;
}

.menu-icon-box.green{ background:var(--soft-green); }
.menu-icon-box.pink{ background:var(--soft-pink); }
.menu-icon-box.yellow{ background:var(--soft-yellow); }
.menu-icon-box.purple{ background:var(--soft-purple); }
.menu-icon-box.blue{ background:var(--soft-blue); }
.menu-icon-box.mint{ background:var(--soft-mint); }

.menu-label{
    font-size:var(--fontBody);
    line-height:1.2;
    font-weight:500;
    color:var(--text);
}

/* ===== alert ===== */
.alert-card{
    background:var(--alert-bg);
    border:2px solid var(--alert-border);
    border-radius:38px;
    padding:22px 22px;
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:18px;
}

.alert-icon{
    flex-shrink:0;
    font-size:var(--fontIconBig);
    line-height:1;
}

.alert-title{
    font-size:var(--fontTitle);
    line-height:1.15;
    font-weight:800;
    color:var(--alert-title);
    margin-bottom:6px;
}

.alert-desc{
    font-size:var(--fontSubTitle);
    line-height:1.35;
    font-weight:500;
    color:var(--alert-text);
}

/* ===== bottom nav ===== */
.bottom-nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    background:#ffffff;
    border-top:1px solid #dfe7ed;
    box-shadow:0 -4px 18px rgba(0,0,0,0.05);
    z-index:99;
}

.bottom-nav-inner{
    max-width:430px;
    margin:0 auto;
    height:84px;
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    align-items:center;
    padding:8px 8px 10px;
}

.nav-item{
    text-decoration:none;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    color:#97a8b8;
}

.nav-icon{
    font-size:var(--fontIcon);
    line-height:1;
}

.nav-label{
    font-size:var(--fontSubBody);
    line-height:1;
    font-weight:500;
}

.nav-item.active{
    color:#0ea5e9;
}


/* =========================
   TAB SIMPANAN CONTENT
   ========================= */

.simpanan-page{
    width:100%;
    max-width:430px;
    min-height:100vh;
    margin:0 auto;
    padding:20px 18px 100px;
}

/* hero card */
.simpanan-hero{
    position: relative;
    z-index: 2;
    padding: 80px 24px 24px;
}

.simpanan-hero-label{
    font-size: var(--fontSubTitle);
    line-height: 1.3;
    font-weight: 500;
    color: rgba(255,255,255,0.80);
    margin-bottom: 6px;
}

.simpanan-hero-total{
    font-size: var(--fontBig);
    line-height: 1.1;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.5px;
    margin-bottom: 24px;
}

.simpanan-summary-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.simpanan-summary-item{
    background: rgba(255,255,255,0.12);
    border-radius: 22px;
    padding: 16px 10px;
    text-align:center;
}

.simpanan-summary-value{
    font-size: var(--fontSubTitle);
    line-height: 1.1;
    font-weight: 800;
    color:#ffffff;
    margin-bottom: 4px;
}

.simpanan-summary-label{
    font-size: var(--fontBody);
    line-height: 1.2;
    font-weight: 500;
    color: rgba(255,255,255,0.72);
}

/* section title */
.simpanan-section-title{
    font-size: var(--fontIcon);
    line-height: 1.2;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #90a6b8;
    margin: 0 0 18px;
}

/* saving card */
.saving-card{
    background:#ffffff;
    border:2px solid #d9e5ec;
    border-radius: 30px;
    padding: 22px 22px 20px;
    margin-bottom: 20px;
}

.saving-card-top{
    display:flex;
    align-items:flex-start;
    gap:14px;
    margin-bottom: 20px;
}

.saving-card-icon{
    width:72px;
    height:72px;
    border-radius:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:var(--fontIconBig);
    flex-shrink:0;
}

.blue-soft{ background:#dff0f8; }
.purple-soft{ background:#e8e1f6; }
.yellow-soft{ background:#f5e8b8; }

.saving-card-info{
    flex:1;
    min-width:0;
}

.saving-card-title{
    font-size: var(--fontSubTitle);
    line-height: 1.15;
    font-weight: 800;
    color:#15283a;
    margin-bottom: 4px;
}

.saving-card-subtitle{
    font-size: var(--fontBody);
    line-height: 1.25;
    font-weight: 500;
    color:#8aa1b5;
}

.saving-badge{
    flex-shrink:0;
    padding: 10px 16px;
    border-radius: 999px;
    font-size: var(--fontBody);
    line-height: 1;
    font-weight: 800;
}

.saving-badge.active{
    background:#dce8ff;
    color:#2c66d6;
}

.saving-badge.done{
    background:#e6ddfb;
    color:#6e3bd1;
}

.saving-badge.running{
    background:#f4e5a9;
    color:#9f5a00;
}

.saving-amount{
    font-size: var(--fontTitle);
    line-height: 1.1;
    font-weight: 800;
    color:#1fa0d4;
    margin-bottom: 16px;
}

.saving-progress{
    width:100%;
    height:12px;
    background:#d8e3ea;
    border-radius:999px;
    overflow:hidden;
    margin-bottom: 14px;
}

.saving-progress-bar{
    height:100%;
    background:#22a4d8;
    border-radius:999px;
}

.saving-note{
    font-size: var(--fontBody);
    line-height: 1.25;
    font-weight: 500;
    color:#8aa1b5;
}

/* =========================
   SIMPANAN BERJANGKA DETAIL
   ========================= */

.saving-card-berjangka .saving-amount{
    margin-bottom: 20px;
}

.saving-berjangka-list{
    position: relative;
    margin-top: 4px;
    padding-left: 22px;
}

.saving-berjangka-list::before{
    content:"";
    position:absolute;
    left: 10px;
    top: 4px;
    bottom: 4px;
    width: 4px;
    border-radius: 999px;
    background: #d6ecf3;
}

.saving-berjangka-item{
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    text-decoration: none;
    padding: 0 0 18px 0;
    margin-bottom: 18px;
    border-bottom: 2px solid #dce8ee;
}

.saving-berjangka-item:last-child{
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.saving-berjangka-dot{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #23a6d9;
    flex-shrink: 0;
    margin-top: 8px;
    margin-left: -2px;
    position: relative;
    z-index: 2;
}

.saving-berjangka-content{
    flex: 1;
    min-width: 0;
}

.saving-berjangka-title{
    font-size: var(--fontBody);
    line-height: 1.2;
    font-weight: 800;
    color: #15283a;
    margin-bottom: 6px;
}

.saving-berjangka-sub{
    font-size: var(--fontBody);
    line-height: 1.35;
    font-weight: 500;
    color: #8aa1b5;
}

.saving-berjangka-arrow{
    font-size: var(--fontBig);
    line-height: 1;
    color: #9bb0c0;
    flex-shrink: 0;
    margin-top: 4px;
}

/* =========================
   ACTION BUTTONS BOTTOM
   ========================= */

.saving-actions{
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 18px 0 20px;
}

.saving-action-btn{
    width: 100%;
    min-height: 60px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    font-size: var(--fontSubTitle);
    line-height: 1.2;
    font-weight: 800;
    transition: all 0.2s ease;
}

.saving-action-btn-primary{
    background: #23a6d9;
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(35,166,217,0.16);
}

.saving-action-btn-primary:hover{
    background: #1d9ccc;
}

.saving-action-btn-outline{
    background: #ffffff;
    color: #23a6d9;
    border: 2px solid #23a6d9;
}

.saving-action-btn-outline:hover{
    background: #f5fcff;
}

/* ===== profit text (hijau) ===== */
.saving-profit{
    font-size: var(--fontBody);
    line-height: 1.3;
    font-weight: 600;
    color: #16a34a; /* hijau */
    margin-top: -6px;
    margin-bottom: 14px;
}

/* ===== divider ===== */
.saving-divider{
    width: 100%;
    height: 2px;
    background: #dbe6ec;
    border-radius: 999px;
    margin: 14px 0 16px;
}

/* ===== tambah produk ===== */
.saving-add-title{
    font-size: var(--fontBody);
    line-height: 1.2;
    font-weight: 800;
    color: #4b5f70;
    margin-bottom: 16px;
}

/* =========================
   SUB PAGE BERJANGKA
   ========================= */

.subpage{
    width:100%;
    max-width:430px;
    min-height:100vh;
    margin:0 auto;
    padding:0px 16px 90px;
}

/* header */
.sub-header{
    height: 58px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	border-bottom: 1px solid #e4edf5;
	background: #fff;
	margin: 0 -16px 16px;
}

.sub-back{
    position: absolute;
	left: 16px;
	width: 30px;
	height: 30px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	font-size: 24px;
	font-weight: 800;
	color: #7c8ca3;
	background: #f1f7fb;
}

.sub-title{
    font-size: 15px;
	font-weight: 900;
	color: #111827;
}

/* hero */
.sub-hero{
    border-radius:20px;
    padding:16px;
    color:#fff;
    margin-bottom:20px;
}

.sub-hero.berhadiah{
    background: linear-gradient(135deg,#ff9f1c,#ff7a00);
}

.sub-hero.cashback{
    background: linear-gradient(135deg,#1bbf83,#0e9f6e);
}

.sub-hero-title{
    font-weight:800;
    margin-bottom:6px;
}

.sub-hero-desc{
    font-size: var(--fontBody);
    opacity:0.9;
}

/* form */
.sub-label{
    font-size: var(--fontBody);
    font-weight:700;
    color:#8aa1b5;
    margin-bottom:8px;
}

.sub-input{
    width:100%;
    border-radius:12px;
    border:2px solid #d9e5ec;
    padding:12px;
    margin-bottom:16px;
    background: linear-gradient(135deg,#1ceedc,#58dbfc);
}

/* tenor */
.sub-tenor{
    display:flex;
    gap:10px;
    margin-bottom:16px;
}

.tenor-btn{
    padding:8px 16px; /* lebih kecil */
    border-radius:999px; /* biar pill */
    border:none;
    background:#eef4f8;
    font-weight:700;
    font-size:14px;

    flex: unset;          /* ❗ penting */
    width: auto;          /* ❗ biar tidak full */
    transition: all 0.2s ease;
}

.tenor-btn:hover{
    background:#dbeff7;
}

.tenor-btn.active{
    background:#23a6d9;
    color:#fff;
    box-shadow: 0 6px 14px rgba(35,166,217,0.25);
}

/* hadiah */
.sub-hadiah{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-bottom:16px;
}

.hadiah-item{
    padding:12px;
    border-radius:12px;
    border:2px solid #d9e5ec;
    font-weight:600;
}

.hadiah-item:hover{
    border-color:#23a6d9;
    transform: translateY(-2px);
}

.hadiah-item.active{
    border-color:#23a6d9;
    background:#f0fbff;
}

/* hadiah item layout */
.hadiah-item{
    padding:14px;
    border-radius:14px;
    border:2px solid #d9e5ec;
    background:#fff;
    display:flex;
    flex-direction:column;
    gap:6px;
    transition: all 0.2s ease;
}

/* header (title + badge sejajar) */
.hadiah-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

/* title */
.hadiah-title{
    font-weight:700;
    color:#15283a;
    font-size: var(--fontBody);
}

/* badge kanan */
.hadiah-badge{
    background:#e0edff;
    color:#2c66d6;
    font-size:12px;
    font-weight:700;
    padding:4px 10px;
    border-radius:999px;
    white-space:nowrap;
}

/* deskripsi */
.hadiah-desc{
    font-size:12px;
    color:#8aa1b5;
    line-height:1.3;
}

/* state aktif */
.hadiah-item.active{
    border-color:#23a6d9;
    background:#f0fbff;
}

/* result */
.sub-result{
    background:#e8f7ef;
    padding:14px;
    border-radius:14px;
    font-size: var(--fontBody);
    color:#166534;
    margin-bottom:16px;
}

/* syarat */
.sub-syarat{
    background:#f3f6f9;
    border-radius:14px;
    padding:14px;
    font-size: var(--fontBody);
    color:#6b7c8f;
    margin-bottom:20px;
}

.sub-syarat ul{
    padding-left:16px;
}

/* button */
.sub-btn{
    width:100%;
    background:#23a6d9;
    color:#fff;
    border:none;
    border-radius:18px;
    padding:16px;
    font-weight:800;
    margin-bottom:12px;
}

.sub-btn-outline{
    width:100%;
    background:#fff;
    border:2px solid #d9e5ec;
    border-radius:18px;
    padding:14px;
    font-weight:700;
}

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

.login-page{
    width:100%;
    max-width:430px;
    min-height:100vh;
    margin:0 auto;
    background:#ffffff;
    color:#385572;
    padding-bottom:32px;
}

.login-hero{
    background:linear-gradient(180deg, #12384a 0%, #23a8d5 100%);
    padding:54px 28px 44px;
    text-align:center;
    color:#ffffff;
}

.login-logo{
    width:126px;
    height:126px;
    border-radius:50%;
    background:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    margin:0 auto 28px;
    box-shadow:0 8px 20px rgba(0,0,0,0.12);
}

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

.login-hero h1{
    font-size:30px;
    line-height:1.2;
    font-weight:800;
    margin-bottom:8px;
}

.login-hero p{
    font-size:18px;
    line-height:1.3;
    font-weight:500;
    color:rgba(255,255,255,0.68);
}

.login-form{
    padding:26px 28px 0;
}

.form-group{
    margin-bottom:22px;
}

.form-group label{
    display:block;
    font-size:15px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:#90a6b8;
    margin-bottom:10px;
}

.form-group input{
    width:100%;
    height:58px;
    border:2px solid #d9e5ec;
    border-radius:18px;
    background:#eef4f7;
    padding:0 20px;
    font-size:18px;
    font-weight:500;
    color:#385572;
    outline:none;
    font-family:inherit;
}

.form-group input:focus{
    border-color:#23a8d5;
    background:#f7fcff;
}

.otp-row{
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    gap:10px;
}

.otp-row .otp-input{
    height:68px;
    padding:0;
    text-align:center;
    font-size:28px;
    font-weight:800;
    border-radius:18px;
}

.otp-row .otp-input:focus{
    border-color:#23a8d5;
    box-shadow:0 0 0 3px rgba(35,168,213,0.12);
}

.login-btn{
    width:100%;
    height:68px;
    border:none;
    border-radius:22px;
    background:#23a8d5;
    color:#ffffff;
    font-size:22px;
    font-weight:800;
    text-transform:uppercase;
    font-family:inherit;
    cursor:pointer;
    margin-top:8px;
}

.forgot-link{
    display:block;
    text-align:center;
    text-decoration:none;
    color:#1da4d4;
    font-size:18px;
    font-weight:500;
    margin:20px 0 24px;
}

.login-divider{
    width:100%;
    height:2px;
    background:#d9e5ec;
    margin-bottom:22px;
}

.register-btn{
    width:100%;
    height:68px;
    border-radius:22px;
    border:3px solid #23a8d5;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    text-decoration:none;
    color:#23a8d5;
    font-size:22px;
    font-weight:800;
    text-transform:uppercase;
}

.otp-request-btn{
    width:100%;
    height:48px;
    border:none;
    border-radius:16px;
    background:#e8f7fc;
    color:#1da4d4;
    font-size:16px;
    font-weight:800;
    font-family:inherit;
    cursor:pointer;
    margin-top:14px;
}

.otp-request-btn:disabled{
    background:#eef2f5;
    color:#9aaebb;
    cursor:not-allowed;
}

.login-alert{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:14px 16px;
    border-radius:18px;
    margin-bottom:20px;
    margin-top: 20px;
}

.login-alert-success{
    background:#fff1f2;
    border:2px solid #fecdd3;
    color:#0f7751;
}

.login-alert-icon-success{
    width:28px;
    height:28px;
    border-radius:50%;
    background:#00a86b;
    color:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:17px;
    font-weight:800;
    flex-shrink:0;
}

.login-alert-danger{
    background:#fff1f2;
    border:2px solid #fecdd3;
    color:#991b1b;
}

.login-alert-icon{
    width:28px;
    height:28px;
    border-radius:50%;
    background:#ef4444;
    color:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:17px;
    font-weight:800;
    flex-shrink:0;
}

.login-alert-title{
    font-size:15px;
    font-weight:800;
    line-height:1.2;
    margin-bottom:3px;
}

.login-alert-text{
    font-size:14px;
    font-weight:500;
    line-height:1.35;
}

/* mobile kecil */
@media (max-width:380px){
    .login-form{
        padding:24px 20px 0;
    }

    .otp-row{
        gap:7px;
    }

    .otp-row .otp-input{
        height:58px;
        border-radius:15px;
    }

    .login-hero h1{
        font-size:26px;
    }

    .login-logo{
        width:110px;
        height:110px;
    }
}

.pinjaman-page {
	width:100%;
    max-width:430px;
    min-height:100vh;
    margin:0 auto;
    padding:20px 18px 100px;
}

.pinjaman-section-title {
	margin: 18px 0 10px;
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .7px;
	color: #9aa9bd;
}

/* SUMMARY */
.loan-summary-card {
	background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.16));
    border-radius: 20px;
    padding: 24px;
    margin: 80px auto 30px;
    backdrop-filter: blur(4px);
    width: calc(100% - 24px);
    max-width: 390px;
}

.loan-summary-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.loan-summary-label {
	font-size: 11px;
	opacity: .9;
}

.loan-summary-amount {
	margin-top: 4px;
	font-size: 25px;
	font-weight: 900;
	line-height: 1.1;
}

.loan-summary-icon {
	width: 34px;
	height: 34px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,.18);
}

.loan-summary-progress {
	margin-top: 14px;
	height: 6px;
	border-radius: 999px;
	background: rgba(255,255,255,.28);
	overflow: hidden;
}

.loan-summary-progress-bar {
	height: 100%;
	border-radius: inherit;
	background: #fff;
}

.loan-summary-note {
	margin-top: 6px;
	display: flex;
	justify-content: space-between;
	font-size: 10px;
	opacity: .95;
}

/* ACTIVE */
.loan-active-card {
	padding: 14px;
	border-radius: 18px;
	border: 1px solid #ffb8b8;
	background: #ffe7e7;
}

.loan-active-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.loan-active-title {
	font-size: 13px;
	font-weight: 900;
	color: #111827;
}

.loan-active-subtitle {
	margin-top: 3px;
	font-size: 10px;
	color: #e34b4b;
}

.loan-active-status {
	font-size: 10px;
	font-weight: 900;
	color: #e22f2f;
}

.loan-active-info {
	margin-top: 12px;
	display: grid;
	gap: 6px;
}

.loan-active-info-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 10px;
	color: #d45a5a;
}

.loan-active-info-row strong {
	font-size: 11px;
	color: #ff3131;
}

.loan-pay-btn {
	margin-top: 14px;
	height: 42px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	font-size: 12px;
	font-weight: 900;
	color: #fff;
	background: #1baed0;
}

/* PRODUCT */
.loan-product-list {
	display: grid;
	gap: 10px;
}

.loan-product-item {
    position: relative; /* WAJIB */
	padding: 13px 12px;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	text-decoration: none;
	background: #f9fbfd;
	border: 1px solid #d9e3ef;
	box-shadow: 0 6px 18px rgba(30, 73, 112, .04);
}

.loan-product-content {
	min-width: 0;
}

.loan-product-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.loan-product-title {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 900;
	color: #1d2a3a;
}

.loan-product-subtitle {
	margin-top: 4px;
	font-size: 11px;
	line-height: 1.35;
	color: #6f7f95;
}

.loan-product-badge {
	position: absolute;
    top: 12px;
    right: 38px; /* biar tidak tabrakan arrow */
    
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
}

.loan-product-badge.blue {
	color: #2786e8;
	background: #e7f2ff;
}

.loan-product-badge.yellow {
	color: #b88600;
	background: #fff4c8;
}

.loan-product-badge.purple {
	color: #8140d7;
	background: #efe5ff;
}

.loan-product-arrow {
	position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}

/* ACTION */
.loan-actions {
	margin-top: 14px;
}

.loan-action-btn {
	height: 44px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	font-size: 13px;
	font-weight: 900;
}

.loan-action-btn-outline {
	color: #16a6c8;
	background: #fff;
	border: 1.5px solid #16a6c8;
}

/* sub pinjaman */
.loan-form-page {
	width:100%;
    max-width:430px;
    min-height:100vh;
    margin:0 auto;
    padding:0px 16px 90px;
}

.loan-form-header {
	height: 58px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	border-bottom: 1px solid #e4edf5;
	background: #fff;
	margin: 0 -16px 16px;
}

.loan-form-back {
	position: absolute;
	left: 16px;
	width: 30px;
	height: 30px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	font-size: 24px;
	font-weight: 800;
	color: #7c8ca3;
	background: #f1f7fb;
}

.loan-form-title {
	font-size: 15px;
	font-weight: 900;
	color: #111827;
}

/* HERO */
.loan-form-hero {
	padding: 16px;
	border-radius: 16px;
	color: #fff;
	margin-bottom: 16px;
}

.loan-form-hero.orange {
	background: linear-gradient(135deg, #ff9f1c, #e87900);
}

.loan-form-hero.purple {
	background: linear-gradient(135deg, #8b5cf6, #6d28d9);
}

.loan-form-hero-title {
	font-size: 13px;
	font-weight: 900;
	margin-bottom: 5px;
}

.loan-form-hero-subtitle {
	font-size: 11px;
	line-height: 1.45;
	opacity: .95;
}

/* FORM */
.loan-form-group {
	margin-bottom: 12px;
}

.loan-form-group label {
	display: block;
	margin-bottom: 6px;
	font-size: 10px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: .6px;
	color: #9aa9bd;
}

.loan-form-input {
	width: 100%;
	height: 42px;
	border-radius: 12px;
	border: 1px solid #d8e6ef;
	background: #f3f8fb;
	padding: 0 12px;
	font-size: 12px;
	font-weight: 600;
	color: #55708b;
	outline: none;
}

.loan-form-input:focus {
	border-color: #1baed0;
	background: #fff;
}

/* TENOR */
.loan-tenor-list {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.loan-tenor-btn {
	min-width: 58px;
	height: 34px;
	border: 0;
	border-radius: 11px;
	background: #edf5f9;
	color: #9aacbd;
	font-size: 11px;
	font-weight: 900;
}

.loan-tenor-btn.active {
	background: #1baed0;
	color: #fff;
}

.loan-tenor-btn.disabled {
	opacity: .45;
}

/* UPLOAD */
.loan-upload-box {
	height: 86px;
	border: 1.5px dashed #c9dce8;
	border-radius: 16px;
	background: #f3f8fb;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 10px !important;
	font-weight: 600 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	color: #98a9b9 !important;
	margin-bottom: 0 !important;
}

.loan-upload-icon {
	font-size: 18px;
	margin-bottom: 5px;
	color: #7892a7;
}

/* SUMMARY */
.loan-form-summary {
	margin: 14px 0;
	padding: 14px;
	border-radius: 16px;
	border: 1px solid #dceaf2;
	background: #fff;
}

/* tiap row */
.loan-form-summary-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 11px;
	color: #91a1b4;
	padding: 6px 0;
}

/* 🔥 GARIS PEMBATAS */
.loan-form-summary-row + .loan-form-summary-row {
	border-top: 1px solid #e3edf5;
	margin-top: 6px;
	padding-top: 10px;
}

.loan-form-summary-row strong {
	font-size: 13px;
	color: #159cc0;
}

.loan-submit-btn {
	width: 100%;
	height: 46px;
	border: 0;
	border-radius: 14px;
	background: #1baed0;
	color: #fff;
	font-size: 13px;
	font-weight: 900;
}

/* PROFIL */
.profil-page {
	width:100%;
    max-width:430px;
    min-height:100vh;
    margin:0 auto;
}

/* HERO */
.profile-hero-card {
	position: relative;
	padding: 28px 15px 18px;
	background: linear-gradient(135deg, #138fbe 0%, #2ea7df 100%);
	color: #fff;
	text-align: center;
	overflow: hidden;
	box-shadow: 0 12px 28px rgba(18, 160, 196, .22);
    border-radius: 0 0 24px 24px;
}

.profile-notif {
	position: absolute;
	top: 18px;
	right: 16px;
	width: 34px;
	height: 34px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,.18);
}

.profile-notif::after {
	content: "";
	position: absolute;
	top: 6px;
	right: 7px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #ff344f;
}

/* AVATAR */
.profile-avatar-wrap {
	position: relative;
	width: 78px;
	height: 78px;
	margin: 0 auto 10px;
}

.profile-avatar {
	width: 78px;
	height: 78px;
	border-radius: 50%;
	border: 3px solid rgba(255,255,255,.7);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	font-weight: 900;
	background: rgba(255,255,255,.18);

	overflow: hidden; /* 🔥 WAJIB */
}

.profile-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* 🔥 biar tidak gepeng */
    transition: transform 0.3s ease;
}

.profile-avatar-badge {
	position: absolute;
	right: -3px;
	bottom: 8px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 8px;
	font-weight: 900;
	background: #f5a400;
	border: 2px solid #fff;
}

.profile-name {
	font-size: 16px;
	font-weight: 900;
}

.profile-member-no {
	margin-top: 3px;
	font-size: 11px;
	opacity: .9;
}

.profile-badge-list {
	margin-top: 9px;
	display: flex;
	justify-content: center;
	gap: 6px;
}

.profile-badge {
	height: 22px;
	padding: 0 10px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	font-size: 10px;
	font-weight: 900;
}

.profile-badge.active {
	color: #1e9b69;
	background: #e7fff2;
}

.profile-badge.type {
	color: #286fd8;
	background: #e8f1ff;
}

.profile-badge.year {
	color: #6b55d9;
	background: #eeeaff;
}

/* MEMBER CARD */
.profile-member-card {
	margin-top: 14px;
	padding: 14px;
	border-radius: 18px;
	display: flex;
	justify-content: space-between;
	text-align: left;
	background: #073f63;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

.profile-member-label {
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: .5px;
	opacity: .7;
}

.profile-member-company {
	margin-top: 3px;
	font-size: 13px;
	font-weight: 900;
	line-height: 1.2;
}

.profile-member-code {
	margin-top: 13px;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 2px;
}

.profile-member-owner-label {
	margin-top: 12px;
	font-size: 8px;
	opacity: .65;
}

.profile-member-owner {
	font-size: 11px;
	font-weight: 900;
}

.profile-member-date {
	margin-top: 2px;
	font-size: 8px;
	opacity: .7;
}

.profile-member-card-right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: space-between;
}

.profile-member-logo {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
}
.profile-member-logo img{
    width: 24px;
    height: 24px;
}

.profile-member-qr {
	width: 54px;
	height: 54px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	color: #062f4c;
	background: #fff;
}

.profile-member-barcode {
    width: 160px;
    height: 50px;
    border-radius: 12px;
    background: #fff;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* MENU */
.profile-menu-list {
	border-radius: 18px;
	background: #fff;
	overflow: hidden;
	border: 1px solid #e4edf5;
    width: calc(100% - 24px);
    margin: 16px auto;
}

.profile-menu-item {
	min-height: 62px;
	padding: 12px 14px;
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	border-bottom: 1px solid #edf3f8;
}

.profile-menu-item:last-child {
	border-bottom: 0;
}

.profile-menu-icon {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	flex-shrink: 0;
}

.profile-menu-icon.pink {
	background: #f3eaff;
}

.profile-menu-icon.orange {
	background: #fff1df;
}

.profile-menu-icon.purple {
	background: #eee9ff;
}

.profile-menu-icon.red {
	background: #ffe9e4;
}

.profile-menu-content {
	flex: 1;
	min-width: 0;
}

.profile-menu-title {
	font-size: 13px;
	font-weight: 900;
	color: #13243a;
}

.profile-menu-subtitle {
	margin-top: 2px;
	font-size: 10px;
	line-height: 1.2;
	color: #7f90a5;
}

.profile-menu-arrow {
	font-size: 20px;
	color: #9aa9bd;
}

.profile-menu-check {
	width: 18px;
	height: 18px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 900;
	color: #fff;
	background: #46c77a;
}

.profile-menu-item.logout .profile-menu-title {
	color: #ff3b30;
}

.profile-form-page {
	padding: 0 16px 90px;
	background: #fff;

    width:100%;
    max-width:430px;
    min-height:100vh;
    margin:0 auto;
}

/* HEADER */
.profile-form-header {
	height: 58px;
	margin: 0 -16px 14px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid #e4edf5;
	background: #fff;
}

.profile-form-back {
	position: absolute;
	left: 16px;
	width: 30px;
	height: 30px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	font-size: 24px;
	font-weight: 800;
	color: #7c8ca3;
	background: #f1f7fb;
}

.profile-form-title {
	font-size: 15px;
	font-weight: 900;
	color: #111827;
}

.profile-form-edit {
	position: absolute;
	right: 16px;
	font-size: 12px;
	font-weight: 800;
	text-decoration: none;
	color: #0ea5d7;
}

/* AVATAR */
.profile-form-avatar-section {
	padding-top: 2px;
	text-align: center;
	margin-bottom: 18px;
}

.profile-form-avatar-wrap {
	position: relative;
	width: 72px;
	height: 72px;
	margin: 0 auto 8px;
}

.profile-form-avatar {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	font-weight: 900;
	color: #fff;
	background: linear-gradient(180deg, #149fc0, #0d8ab0);
	box-shadow: 0 6px 18px rgba(14, 165, 215, .25);
}

.profile-form-avatar-badge {
	position: absolute;
	right: -3px;
	bottom: 7px;
	width: 21px;
	height: 21px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 7px;
	font-weight: 900;
	color: #fff;
	background: #f5a400;
	border: 2px solid #fff;
}

.profile-form-photo-link {
	font-size: 11px;
	font-weight: 800;
	color: #0ea5d7;
	text-decoration: none;
}

/* FORM */
.profile-form-card {
	display: grid;
	gap: 14px; /* tambah spacing biar lega */
}

/* LABEL */
.profile-form-group label {
	display: block;
	margin-bottom: 6px;
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .6px;
	color: #9aa9bd;
}

/* INPUT */
.profile-form-input {
	width: 100%;
	height: 44px;
	border-radius: 12px;
	border: 1px solid #d8e6ef;
	background: #eef4f7;
	padding: 0 14px;
	font-size: 13px;
	font-weight: 600;
	color: #4f6680;
	outline: none;
	transition: all .2s ease;
}

/* FOCUS STATE */
.profile-form-input:focus {
	border-color: #18a8d1;
	background: #fff;
	color: #15243a;
	box-shadow: 0 0 0 2px rgba(24,168,209,0.08);
}

/* EDIT MODE */
.profile-form-card.is-editing .profile-form-input {
	background: #fff;
	border-color: #18a8d1;
	color: #15243a;
}

/* DISABLED / READONLY */
.profile-form-input:disabled,
.profile-form-input[readonly] {
	background: #f3f6f9;
	color: #9aa9bd;
	cursor: not-allowed;
}

/* UPLOAD */
.profile-form-upload {
	height: 76px;
	border-radius: 14px;
	border: 1px dashed #cdddea; /* ubah jadi dashed biar terasa upload */
	background: #eef4f7;
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: #95a5b7 !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	margin: 0 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	transition: all .2s ease;
}

.profile-form-card.is-editing .profile-form-upload {
	background: #fff;
	border-color: #18a8d1;
	cursor: pointer;
}

.profile-form-upload:hover {
	border-color: #18a8d1;
	color: #18a8d1 !important;
}

.profile-form-upload-icon {
	font-size: 14px;
	color: #b7c4d1;
}

/* BUTTON */
.profile-form-submit {
	margin-top: 6px;
	width: 100%;
	height: 48px;
	border: 0;
	border-radius: 14px;
	background: linear-gradient(135deg, #1baed0, #159ec0); /* lebih hidup */
	color: #fff;
	font-size: 14px;
	font-weight: 900;
	letter-spacing: .4px;
	transition: all .2s ease;
}

/* HOVER BUTTON */
.profile-form-submit:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 14px rgba(27,174,208,0.25);
}

/* DISABLED */
.profile-form-submit:disabled {
	opacity: .55;
	cursor: not-allowed;
	box-shadow: none;
	transform: none;
}

.profile-form-upload {
    display: block;
    width: 100%;
    height: 150px;
    border: 2px dashed #d6e2ec;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    background: #f7fbff;
}

#previewKtp {
    width: 100%;
    height: 100%;
}

#previewKtp img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 🔥 ini kunci */
    display: block;
}

.profile-form-upload-icon,
.profile-form-upload-text {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.profile-form-upload-icon {
    top: 35%;
    font-size: 24px;
    color: #9aa9bd;
}

.profile-form-upload-text {
    top: 55%;
    font-size: 12px;
    color: #9aa9bd;
}

/* PPOB */
.ppob-page {
	width:100%;
    max-width:430px;
    min-height:100vh;
    margin:0 auto;
    padding:20px 18px 110px;
}

/* HEADER */
.ppob-header-card {
	background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.16));
    border-radius: 20px;
    padding: 24px;
    margin: 100px auto 20px;
    backdrop-filter: blur(4px);
    width: calc(100% - 24px);
    max-width: 390px;
}

.ppob-header-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.ppob-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 900;
}

.ppob-logo {
	width: 24px;
}

.ppob-icons {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 11px;
}

.ppob-bell {
	width: 30px;
	height: 30px;
	background: rgba(255,255,255,0.2);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* SALDO */
.ppob-saldo-card {
	padding: 12px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.ppob-saldo-label {
	font-size: 10px;
}

.ppob-saldo-amount {
	font-size: 18px;
	font-weight: 900;
}

.ppob-topup-btn {
	padding: 6px 12px;
	border-radius: 10px;
	border: none;
	background: white;
	color: #16a8c9;
	font-weight: 800;
}

/* SECTION */
.ppob-section-title {
	margin: 16px 0 8px;
	font-size: 11px;
	font-weight: 900;
	color: #8da2b5;
	text-transform: uppercase;
}

/* GRID */
.ppob-grid {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 10px;
}

.ppob-item {
	background: #f3f7fa;
	border-radius: 14px;
	padding: 12px;
	text-align: center;
    cursor: pointer;
}

.ppob-icon {
	font-size: 18px;
	margin-bottom: 6px;
}

.ppob-name {
	font-size: 10px;
	font-weight: 800;
	color: #3a4b5c;
}

.ppob-icon {
	width: 42px;
	height: 42px;
	margin: 0 auto 8px;
	border-radius: 14px;
	background: #f4f7fb;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	color: #1f6feb;
}

.ppob-icon img {
	width: 32px;
	height: 32px;
	object-fit: contain;
}

.ppob-item {
	text-align: center;
}

.ppob-name {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}

.ppob-grid .ppob-item .fa-wallet {
	color: #00a86b;
}

.ppob-grid .ppob-item .fa-credit-card {
	color: #2563eb;
}

.ppob-grid .ppob-item .fa-money-bill-transfer {
	color: #f59e0b;
}

/* =========================
   PPOB SUB PAGE
   Input & Konfirmasi
========================= */

.ppob-sub-page {
    width:100%;
    max-width:430px;
    min-height:100vh;
    margin:0 auto;
    padding:0px 16px 90px;
}

/* CONTENT */
.ppob-sub-content {
	padding: 10px 28px 120px;
}

.ppob-center {
	text-align: center;
}

/* PRODUCT ICON */
.ppob-product-circle {
	width: 70px;
	height: 70px;
	border-radius: 50%;
	background: #fff1b9;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20px;
	color: #ff7a3d;
	font-size: 32px;
}

.ppob-product-circle img{
	max-width: 60px;
	height: auto;
}

.ppob-product-heading {
	font-size: 30px;
	font-weight: 900;
	color: #102233;
	text-align: center;
	margin-bottom: 6px;
}

/* FORM CARD */
.ppob-form-card {
	border: 2px solid #dcebf3;
	border-radius: 28px;
	padding: 24px;
	margin-bottom: 28px;
	background: #ffffff;
}

.ppob-form-group {
	margin-bottom: 22px;
}

.ppob-form-group:last-child {
	margin-bottom: 0;
}

.ppob-form-group label {
	display: block;
	font-size: 16px;
	color: #8aa6b8;
	margin-bottom: 10px;
	font-weight: 700;
}

.ppob-input,
.ppob-select {
	width: 100%;
	height: 58px;
	border: 2px solid #dcebf3;
	border-radius: 18px;
	padding: 0 18px;
	font-size: 14px;
	color: #102233;
	outline: none;
	background: #ffffff;
}

.ppob-select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, #536b7a 50%),
		linear-gradient(135deg, #536b7a 50%, transparent 50%);
	background-position: calc(100% - 22px) 25px, calc(100% - 15px) 25px;
	background-size: 7px 7px, 7px 7px;
	background-repeat: no-repeat;
}

.ppob-input:focus,
.ppob-select:focus {
	border-color: #25aad0;
	box-shadow: 0 0 0 3px rgba(37, 170, 208, 0.12);
}

.ppob-small-title {
	font-size: 22px;
	font-weight: 900;
	color: #102233;
	margin-bottom: 18px;
}

/* NOMINAL BOX */
.ppob-nominal-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.ppob-nominal-box {
	min-height: 118px;
	border: 2px solid #dcebf3;
	border-radius: 18px;
	padding: 20px;
	background: #ffffff;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	cursor: pointer;
	transition: 0.2s ease;
}

.ppob-nominal-box:hover {
	border-color: #25aad0;
}

.ppob-nominal-box.active {
	background: #eafcff;
	border-color: #25aad0;
}

.ppob-nominal-title {
	font-size: 16px;
	font-weight: 900;
	color: #102233;
	margin-bottom: 8px;
}

.ppob-nominal-price {
	font-size: 14px;
	color: #2b3a45;
}

.ppob-nominal-badge {
	align-self: flex-end;
	font-size: 10px;
	font-weight: 800;
	color: #25aad0;
}

.ppob-nominal-box.disabled {
	background: #f7f9fb;
	cursor: not-allowed;
	opacity: 0.7;
}

.ppob-nominal-box.disabled .ppob-nominal-title,
.ppob-nominal-box.disabled .ppob-nominal-price {
	color: #aab7c2;
}

.ppob-nominal-box.disabled .ppob-nominal-badge {
	color: #aab7c2;
	background: #eef2f6;
	padding: 4px 10px;
	border-radius: 999px;
}

/* BOTTOM BAR INPUT PAGE */
.ppob-bottom-bar {
	position: fixed;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 100%;
	max-width: 430px;
	background: #ffffff;
	border-top: 1px solid #dcebf3;
	padding: 18px 28px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	z-index: 99;
}

.ppob-bottom-label {
	font-size: 14px;
	color: #536b7a;
	margin-bottom: 4px;
}

.ppob-bottom-price {
	font-size: 17px;
	font-weight: 900;
	color: #102233;
}

.ppob-btn-pay-small {
	height: 40px;
	min-width: 120px;
	border-radius: 14px;
	background: #25aad0;
	color: #ffffff;
	font-size: 17px;
	font-weight: 900;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	padding: 0 24px;
	border: none;
}

.ppob-btn-pay-small:hover {
	background: #189bc0;
}

/* =========================
   KONFIRMASI TRANSAKSI
========================= */

.ppob-confirm-subtitle {
	font-size: 20px;
	color: #8aa6b8;
	text-align: center;
	margin-bottom: 30px;
}

.ppob-confirm-card {
	border: 2px solid #dcebf3;
	border-radius: 30px;
	padding: 26px 24px;
	margin: 32px 0 28px;
	text-align: left;
}

.ppob-confirm-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 18px;
	color: #8aa6b8;
}

.ppob-confirm-row strong {
	font-size: 20px;
	color: #102233;
	font-weight: 500;
}

.ppob-confirm-line {
	height: 2px;
	background: #dcebf3;
	margin: 14px 0;
}

.ppob-confirm-total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 22px;
}

.ppob-confirm-total span {
	font-size: 18px;
	font-weight: 900;
	color: #102233;
}

.ppob-confirm-total strong {
	font-size: 20px;
	font-weight: 900;
	color: #25aad0;
}

.ppob-source-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	margin: 26px 0;
}

.ppob-source-row span {
	color: #8aa6b8;
}

.ppob-source-row strong {
	color: #102233;
	font-weight: 900;
}

.ppob-pin-title {
	font-size: 18px;
	font-weight: 900;
	color: #8aa6b8;
	letter-spacing: 1px;
	margin: 26px 0 24px;
	text-align: center;
}

.ppob-pin-wrap {
	display: flex;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin-bottom: 30px;
}

.ppob-pin-input {
	width: 46px;
	height: 58px;
	border: 3px solid #dcebf3;
	border-radius: 16px;
	background: #ffffff;
	text-align: center;
	font-size: 24px;
	font-weight: 900;
	outline: none;
	color: #25aad0;
	caret-color: transparent;
}

.ppob-pin-input:focus,
.ppob-pin-input.filled {
	border-color: #25aad0;
	background: #eafcff;
}

.ppob-pin-input.filled {
	-webkit-text-security: disc;
}

.ppob-btn-primary,
.ppob-btn-secondary {
	width: 100%;
	height: 70px;
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	font-size: 20px;
	font-weight: 900;
	border: none;
}

.ppob-btn-primary {
	background: #25aad0;
	color: #ffffff;
	margin-bottom: 20px;
}

.ppob-btn-primary:hover {
	background: #189bc0;
}

.ppob-btn-secondary {
	background: #eef5f9;
	color: #536b7a;
	border: 2px solid #dcebf3;
}

.ppob-bottom-bar {
	bottom: 76px;
}


.ppob-btn-primary {
	opacity: 0.6;
	pointer-events: auto;
}

.ppob-btn-primary.active {
	opacity: 1;
}

.ppob-empty-nominal {
	grid-column: 1 / -1;
	padding: 20px;
	border: 2px dashed #dcebf3;
	border-radius: 18px;
	text-align: center;
	color: #8aa6b8;
	font-weight: 700;
}

.ppob-sub-content .ppob-section-title {
    margin: 18px 0 10px;
    padding-left: 2px;
    font-size: 11px;
    font-weight: 900;
    color: #8da2b5;
    text-transform: uppercase;
}

.ppob-sub-content .ppob-grid {
    margin-bottom: 18px;
}

@media (max-width: 390px) {
	.ppob-pin-wrap {
		gap: 8px;
	}

	.ppob-pin-input {
		border-radius: 16px;
		font-size: 24px;
	}
}



/* RESPONSIVE */
@media (max-width: 390px) {
	.ppob-sub-header {
		padding: 24px;
		gap: 20px;
	}

	.ppob-sub-back {
		width: 60px;
		height: 60px;
	}

	.ppob-sub-title {
		font-size: 26px;
	}

	.ppob-sub-content {
		padding: 28px 24px 120px;
	}

	.ppob-product-heading,
	.ppob-confirm-title {
		font-size: 28px;
	}

	.ppob-confirm-total strong {
		font-size: 34px;
	}

	.ppob-pin-box {
		width: 54px;
		height: 68px;
	}

	.ppob-nominal-box {
		min-height: 110px;
		padding: 16px;
	}
}