:root{
    --akp-navy: #0b1b3a;
    --akp-navy-2: #0a2457;
    --akp-white: #ffffff;
    --akp-text: rgba(255,255,255,.92);
    --akp-muted: rgba(255,255,255,.70);
    --akp-border: rgba(255,255,255,.18);
    --akp-glass: rgba(0,0,0,.22);   /* panel background */
    --akp-glass-2: rgba(0,0,0,.32); /* header/top */
    --akp-input: rgba(255,255,255,.14);
}

/* lock scroll when offcanvas open */
body.auth-lock{ overflow:hidden; }

/* Backdrop */
.auth-backdrop{
    position:fixed; inset:0;
    background: rgba(0,0,0,.55);
    z-index: 9998;
    opacity:0; visibility:hidden;
    transition: .2s ease;
}
.auth-backdrop.is-open{ opacity:1; visibility:visible; }

/* Offcanvas container */
.auth-offcanvas{
    position:fixed; top:0; right:0;
    height:100vh;
    width:420px; max-width:92vw;
    z-index:9999;
    transform: translateX(110%);
    transition: transform .25s ease;
    box-shadow:-18px 0 40px rgba(0,0,0,.22);
    overflow:hidden;
    display:flex; flex-direction:column;
    background: transparent;
}
.auth-offcanvas.is-open{ transform: translateX(0); }

/* Background image + overlay inside offcanvas */
.auth-offcanvas::before{
    content:"";
    position:absolute; inset:0;
    z-index:0;
    background:
    linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.16) 45%, rgba(0,0,0,.34) 100%), url("/assets/images/bg_laut.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: saturate(1.05) contrast(1.05);
    pointer-events:none;
}

/* Layered content */
.auth-oc-head, .auth-oc-tabs, .auth-oc-body{ position:relative; z-index:1; }

/* Header */
.auth-oc-head{
    padding: 18px 18px 14px;
    background: linear-gradient(180deg, var(--akp-glass-2), rgba(0,0,0,0));
    border-bottom: 1px solid rgba(255,255,255,.12);
}
.auth-oc-head-row{
    display:flex; align-items:flex-start; justify-content:space-between;
    gap: 12px;
}
.auth-oc-title{
    margin:0;
    font-weight: 800;
    font-size: 18px;
    color: var(--akp-text);
    letter-spacing:.2px;
}
.auth-oc-sub{
    margin:6px 0 0;
    font-size: 13px;
    color: var(--akp-muted);
    line-height:1.4;
}
.auth-oc-close{
    border:0; background:transparent;
    font-size: 24px; line-height: 1;
    color: rgba(255,255,255,.92);
    cursor:pointer;
    padding: 6px 10px;
    opacity: .9;
}
.auth-oc-close:hover{ opacity:1; }

/* Tabs (pill, readable) */
.auth-oc-tabs{
    padding: 12px 18px 0;
    display:flex;
    gap: 10px;
}
.auth-tab{
    flex:1;
    border-radius: 999px;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,.26);
    background: rgba(255,255,255,.12);
    color: rgba(255,255,255,.92);
    font-weight: 800;
    cursor:pointer;
    transition: .15s ease;
    display:flex; align-items:center; justify-content:center;
    gap: 8px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.auth-tab i{ opacity:.95; }
.auth-tab.is-active{
    background: rgba(255,255,255,.92);
    color: var(--akp-navy);
    border-color: rgba(255,255,255,.92);
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

/* Body area (NO white card) */
.auth-oc-body{
    padding: 14px 18px 18px;
    overflow:auto;
    flex:1;
}

/* Glass panel inside body (form container) */
.auth-panel-box{
    padding: 16px;
    border-radius: 18px;
    background: rgba(0,0,0,.10);
    border: 1px solid rgba(255,255,255,.14);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(16px);
}

.auth-panel{ display:none; }
.auth-panel.is-active{ display:block; }

/* Alerts */
.auth-alert{
    margin-bottom: 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(0,0,0,.22);
    color: rgba(255,255,255,.92);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    padding: 12px 14px;
}
.auth-alert ul{ margin: 6px 0 0; padding-left: 18px; }

/* Form */
.auth-form .form-group{ margin-bottom: 12px; }
.auth-form label{
    font-size: 13px;
    font-weight: 800;
    color: rgba(255,255,255,.92);
    margin-bottom: 6px;
    letter-spacing: .2px;
}

/* Input glass (50% feel + blur) */
.auth-form .form-control{
    height: 46px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.22);
    background: var(--akp-input);
    color: rgba(255,255,255,.95);
    box-shadow: none;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.auth-form .form-control::placeholder{ color: rgba(255,255,255,.70); }
.auth-form .form-control:focus{
    border-color: rgba(255,255,255,.42);
    box-shadow: 0 0 0 3px rgba(255,255,255,.10);
}

/* Input-group icon glass */
.auth-form .input-group-addon{
    border-radius: 14px 0 0 14px;
    border: 1px solid rgba(255,255,255,.22);
    border-right: 0;
    background: rgba(255,255,255,.10);
    color: rgba(255,255,255,.90);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.auth-form .input-group .form-control{
    border-left: 0;
    border-radius: 0 14px 14px 0;
}

/* Primary button (rounded, same for login/register) */
.auth-btn{
    width:100%;
    height: 48px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.92);
    color: var(--akp-navy);
    font-weight: 900;
    letter-spacing: .2px;
    transition: .12s ease;
}
.auth-btn:hover{ opacity:.96; transform: translateY(-1px); }
.auth-btn:active{ transform: translateY(0); }

/* Disabled button */
.auth-btn[disabled]{
    opacity: .55;
    cursor: not-allowed;
    transform: none;
}

.help-error{
    margin-top: 6px;
    font-size: 12px;
    color: rgba(255,200,200,.95);
}

@media (max-width: 420px){
    .auth-offcanvas{ width: 92vw; }
}

/* ===== Bootstrap 3 modal z-index fix ===== */
#successModal{
    position: fixed !important;
    inset: 0 !important;
    z-index: 40000 !important;
    overflow: auto !important;
    display: none;
}
#successModal .modal-dialog{
    margin: 10% auto !important;
    z-index: 20001 !important;
}
.modal-backdrop{ z-index: 19999 !important; }
body.modal-open{ overflow:hidden; }

/* Select field (tetap glass tapi teks gelap agar terbaca) */
.auth-form select.form-control{
background: rgba(255,255,255,.92) !important;
color: #0b1b3a !important;
border: 1px solid rgba(255,255,255,.35);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}

/* Dropdown list (Windows native) */
.auth-form select.form-control option{
background: #ffffff;
color: #0b1b3a;
}

/* Hover / selected item (beberapa browser support) */
.auth-form select.form-control option:checked{
background: #0a2457;
color: #ffffff;
}

/* ===== Eye toggle button (Bootstrap 3 input-group) ===== */
.auth-form .input-group .pw-toggle{
    border: 1px solid rgba(255,255,255,.22);
    border-left: 0;
    border-radius: 0 14px 14px 0;
    background: rgba(255,255,255,.10);
    color: rgba(255,255,255,.92);
    cursor: pointer;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.auth-form .input-group .pw-toggle:focus{
    outline: none;
}

.auth-form .input-group .pw-toggle:hover{
    background: rgba(255,255,255,.16);
}

/* Karena sekarang ada 2 addon (kiri & kanan), rapikan radius input */
.auth-form .input-group.has-eye .form-control{
    border-radius: 0;          /* tengah */
    border-left: 0;
    border-right: 0;
}

.modal-content {
    border-radius: 15px;
}

.modal-header {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.modal-body ol li {
    margin-bottom: 8px;
    font-size: 15px;
}

.modal { 
    z-index: 30000 !important; 
}

.modal.in .modal-dialog{ 
    z-index: 30001 !important; 
}

.modal-backdrop{ 
    z-index: 29999 !important; 
}

/* ===== AKP Modal: Professional + Scrollable (Bootstrap 3) ===== */

/* Lebarkan modal agar lebih “pro” */
.modal.akp-modal .modal-dialog{
    width: 920px;         /* naikkan dari 860 -> 920 (bisa 960 kalau mau) */
    max-width: 96vw;
    margin: 6vh auto;     /* posisi lebih enak */
}

/* Jaga rounded corner pojok modal */
.modal.akp-modal .modal-content{
    border-radius: 16px;
    overflow: hidden;     /* ini yang bikin pojok bawah kanan kiri ikut rounded */
    border: 0;
    box-shadow: 0 22px 60px rgba(0,0,0,.35);

    /* Layout: header + body(scroll) + footer */
    display: flex;
    flex-direction: column;
    max-height: 88vh;     /* modal tidak memenuhi layar */
    background: #fff;
}

.modal.akp-modal .modal-header,
.modal.akp-modal .modal-footer{
    flex: 0 0 auto;
    background: #fff;
}

.modal.akp-modal .modal-body{
    flex: 1 1 auto;       /* ambil sisa tinggi */
    overflow-y: auto;     /* scroll di body */
    -webkit-overflow-scrolling: touch;
    padding: 18px 20px 12px;
}

/* Scrollbar lebih halus (optional) */
.modal.akp-modal .modal-body::-webkit-scrollbar{ width: 8px; }
.modal.akp-modal .modal-body::-webkit-scrollbar-thumb{
    background: rgba(11,27,58,.18);
    border-radius: 10px;
}
.modal.akp-modal .modal-body::-webkit-scrollbar-track{
    background: rgba(11,27,58,.06);
    border-radius: 10px;
}

/* ===== Fix icon bullet supaya inline & menarik ===== */
.akp-req-item{
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.akp-req-bullet{
    width: 22px;
    height: 22px;
    border-radius: 50%;          /* true circle */
    flex: 0 0 22px;

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

    background: rgba(40,167,69,.08);  /* lebih subtle */
    color: #28a745;

    box-shadow: 0 0 0 1px rgba(40,167,69,.25);
    transition: all .2s ease;
}

.akp-req-bullet i{
    font-size: 11px;
    line-height: 1;
}

/* Sedikit hover modern effect */
.akp-req-item:hover .akp-req-bullet{
    background: #28a745;
    color: #fff;
}

/* Mobile: tetap enak */
@media (max-width: 480px){
    .modal.akp-modal .modal-dialog{ width: 96vw; margin: 4vh auto; }
    .modal.akp-modal .modal-content{ max-height: 92vh; }
}

/* ===== Modern AKP Sub List ===== */

.akp-sub-list{
    list-style: none;
    margin: 10px 0 0 0;
    padding-left: 18px;
    border-left: 2px solid rgba(11,27,58,.08); /* subtle vertical line */
}

.akp-sub-list li{
    position: relative;
    padding-left: 18px;
    margin-bottom: 6px;
    font-size: 14px;
    color: rgba(11,27,58,.75);
    line-height: 1.6;
}

/* Bullet kecil navy modern */
.akp-sub-list li::before{
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0b1b3a;
    opacity: .4;
}

/* Hover subtle */
.akp-sub-list li:hover{
    color: #0b1b3a;
}

.akp-sub-list li:hover::before{
    opacity: .7;
}

/* =========================================================
   AKP QUOTE SECTION
========================================================= */
.akp-quote-section{
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #ffffff;
    padding: 0;
}

.akp-quote-stage{
    position: relative;
    width: 100%;
    min-height: 760px;
    overflow: hidden;
    background-image: url('/landing/assets/img/quote/bg_quote.png');
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% auto; /* penting */
}

/* FOTO */
.akp-quote-person{
    position: absolute;
    left: 4%;
    bottom: 0;
    width: 31%;
    max-width: 620px;
    z-index: 3;
}

.akp-quote-person img{
    display: block;
    width: 100%;
    height: auto;
    max-height: 740px;
    object-fit: contain;
    object-position: bottom left;
}

/* AREA KANAN */
.akp-quote-content{
    position: relative;
    z-index: 4;
    min-height: 760px;
    margin-left: 34%;
    padding: 95px 70px 70px 20px; /* dinaikkan */
    display: flex;
    align-items: flex-start;      /* box naik ke atas */
    justify-content: center;
}

/* BOX QUOTE */
.akp-quote-box{
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

/* QUOTE ATAS */
.akp-quote-top{
    width: 100%;
    max-width: 700px;
    margin: 0 auto 22px;
    text-align: left;
}

.akp-quote-top img{
    width: 260px;
    max-width: 100%;
    height: auto;
    display: inline-block;
}

/* TEXT */
.akp-quote-text-wrap{
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
}

.akp-quote-text{
    margin: 0;
    font-size: 30px;
    line-height: 1.45;
    font-weight: 500;
    color: #2f2f2f;
    text-align: center;
}

/* QUOTE BAWAH */
.akp-quote-bottom{
    width: 100%;
    max-width: 700px;
    margin: 22px auto 22px;
    text-align: right;
}

.akp-quote-bottom img{
    width: 300px;
    max-width: 100%;
    height: auto;
    display: inline-block;
}

/* AUTHOR */
.akp-quote-author{
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.akp-quote-author h3{
    margin: 0 0 6px;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 700;
    color: #2f2f2f;
}

.akp-quote-author span{
    display: block;
    font-size: 18px;
    line-height: 1.3;
    color: #4b4b4b;
}
/* =========================================================
   RESPONSIVE TABLET
========================================================= */
@media (max-width: 991px){
    .akp-quote-stage{
        min-height: auto;
        padding: 40px 24px 40px;
        background-image: none !important;   /* wave dimatikan */
        background-color: #f7f9fc;           /* ganti background aman */
        background-size: initial;
        background-position: center center;
    }

    .akp-quote-person{
        position: relative;
        left: auto;
        bottom: auto;
        width: 100%;
        max-width: 300px;
        margin: 0 auto 20px;
    }

    .akp-quote-person img{
        display: block;
        width: 100%;
        height: auto;
        max-height: none;
        object-fit: contain;
        object-position: center bottom;
    }

    .akp-quote-content{
        min-height: auto;
        margin-left: 0;
        padding: 0;
        display: block;
    }

    .akp-quote-box{
        max-width: 100%;
        padding: 28px 22px;
        background: rgba(255,255,255,0.96);
        border-radius: 24px;
        box-shadow: 0 12px 35px rgba(10, 43, 95, 0.10);
    }

    .akp-quote-top,
    .akp-quote-text-wrap,
    .akp-quote-bottom,
    .akp-quote-author{
        max-width: 100%;
    }

    .akp-quote-top{
        margin: 0 auto 16px;
        text-align: left;
    }

    .akp-quote-top img{
        width: 150px;
    }

    .akp-quote-text{
        font-size: 20px;
        line-height: 1.65;
        text-align: center;
    }

    .akp-quote-bottom{
        margin: 16px auto 18px;
        text-align: right;
    }

    .akp-quote-bottom img{
        width: 170px;
    }

    .akp-quote-author h3{
        font-size: 22px;
    }

    .akp-quote-author span{
        font-size: 15px;
        line-height: 1.5;
    }
}


/* =========================================================
   RESPONSIVE MOBILE KECIL
========================================================= */
@media (max-width: 575px){
    .akp-quote-section{
        padding: 0;
    }

    .akp-quote-stage{
        padding: 28px 16px 32px;
        background-image: none !important;  /* pastikan wave hilang */
        background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
    }

    .akp-quote-person{
        max-width: 230px;
        margin-bottom: 16px;
    }

    .akp-quote-box{
        padding: 22px 16px;
        border-radius: 18px;
    }

    .akp-quote-top img{
        width: 120px;
    }

    .akp-quote-bottom img{
        width: 135px;
    }

    .akp-quote-text{
        font-size: 17px;
        line-height: 1.7;
    }

    .akp-quote-author h3{
        font-size: 18px;
        margin-bottom: 4px;
    }

    .akp-quote-author span{
        font-size: 14px;
    }
}