/* =====================================================================
   ENGLISH ADVENTURE: EXPLORE BANGKALAN
   Tema "Auth Adventure" — dipakai di halaman masuk.php & daftar.php
   ===================================================================== */

:root {
    --pk-kayu-terang: #d9a463;
    --pk-kayu: #a86b3c;
    --pk-kayu-tua: #7a4a26;
    --pk-kayu-gelap: #5c3418;
    --pk-emas: #ffd166;
    --pk-emas-tua: #f2a541;
    --pk-laut-1: #bfe4f5;
    --pk-laut-2: #7fc7e8;
    --pk-laut-3: #3fa6d8;
    --pk-krem: #fdf3e1;
}

html, body { height: 100%; overflow-x: hidden; }

.panggung-auth{
    position: relative;
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    background:
        radial-gradient(circle at 20% 15%, rgba(255,255,255,.35), transparent 40%),
        repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 14px, transparent 14px 28px),
        linear-gradient(180deg, var(--pk-laut-1) 0%, var(--pk-laut-2) 45%, var(--pk-laut-3) 100%);
    overflow: hidden;
}
.panggung-auth::before{
    content:"";
    position:absolute; inset:0;
    background-image:
        radial-gradient(rgba(255,255,255,.55) 2px, transparent 2px),
        radial-gradient(rgba(255,255,255,.35) 1.5px, transparent 1.5px);
    background-size: 140px 140px, 90px 90px;
    background-position: 0 0, 40px 60px;
    opacity:.5;
    pointer-events:none;
}

/* Elemen dekoratif mengambang: kapal, awan, bintang */
.dekor-auth{
    position:absolute;
    opacity:.9;
    filter: drop-shadow(0 3px 4px rgba(0,0,0,.15));
    animation: mengombakAuth 5s ease-in-out infinite;
    pointer-events:none;
    user-select:none;
}
@keyframes mengombakAuth{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }

.awan-auth{
    position:absolute;
    opacity:.9;
    animation: melayangAwan 14s ease-in-out infinite;
    pointer-events:none;
}
@keyframes melayangAwan{ 0%,100%{transform:translateX(0);} 50%{transform:translateX(24px);} }

.bintang-auth{
    position:absolute; color:#fff; opacity:.85;
    animation: goyangBintang 1.6s ease-in-out infinite;
    pointer-events:none;
}

/* Kompas dekoratif pojok */
.kompas-auth{
    position:absolute; top:24px; left:24px;
    width:70px; height:70px; border-radius:50%;
    background: radial-gradient(circle at 35% 30%, #fff, #dfeaf5 70%);
    border:4px solid #fff;
    box-shadow: 0 6px 14px rgba(0,0,0,.18);
    display:flex; align-items:center; justify-content:center;
    z-index: 3;
}
.kompas-auth i{ color:#e14b4b; font-size:1.1rem; }

/* ---------------------------------------------------------------------
   KARTU FORM (papan kayu di atas, kartu putih melengkung di bawah)
   --------------------------------------------------------------------- */
.wadah-auth{
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 440px;
}

.papan-judul-auth{
    position: relative;
    text-align:center;
    background: linear-gradient(160deg, var(--pk-kayu-terang) 0%, var(--pk-kayu) 55%, var(--pk-kayu-tua) 100%);
    border: 4px solid var(--pk-kayu-gelap);
    border-radius: 18px 18px 0 0;
    padding: 22px 20px 34px;
    color: #fff7ea;
    box-shadow: 0 10px 24px rgba(90,50,20,.3);
}
.papan-judul-auth::before, .papan-judul-auth::after{
    content:"";
    position:absolute; top:9px;
    width:10px; height:10px; border-radius:50%;
    background: radial-gradient(circle at 35% 30%, #ffe9c2, #8a5a2a 70%);
    box-shadow: 0 2px 3px rgba(0,0,0,.4);
}
.papan-judul-auth::before{ left:12px; }
.papan-judul-auth::after{ right:12px; }
.papan-judul-auth .ikon-judul{
    font-size: 2.2rem;
    margin-bottom: 4px;
    display:inline-block;
    animation: mengombakAuth 3s ease-in-out infinite;
}
.papan-judul-auth .judul-besar{
    font-family: 'Fredoka One', cursive;
    font-size: 1.5rem;
    color: var(--pk-emas);
    text-shadow: 2px 2px 0 rgba(0,0,0,.35);
    margin-bottom: 4px;
}
.papan-judul-auth .subjudul{
    font-family:'Nunito', sans-serif;
    font-size:.85rem;
    opacity:.9;
}

.kartu-form-auth{
    position: relative;
    background: #ffffff;
    border-radius: 0 0 22px 22px;
    padding: 28px 26px 26px;
    margin-top: -14px;
    box-shadow: 0 18px 40px rgba(31,90,130,.3);
}

/* Input bergaya pil dengan ikon */
.input-auth{
    position: relative;
    margin-bottom: 16px;
}
.input-auth label{
    font-weight: 800;
    font-size: .8rem;
    color: var(--ea-teks, #1f2937);
    margin-bottom: 4px;
    display:block;
}
.input-auth .grup-input{
    display:flex;
    align-items:center;
    background: var(--ea-abu, #f4f6fb);
    border: 2px solid transparent;
    border-radius: 999px;
    padding: 4px 6px 4px 16px;
    transition: border-color .2s ease, background .2s ease;
}
.input-auth .grup-input:focus-within{
    border-color: var(--ea-kayu, #a86b3c);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(168,107,60,.15);
}
.input-auth .grup-input > i{
    color: var(--ea-kayu, #a86b3c);
    width: 20px;
    text-align:center;
    margin-right: 8px;
}
.input-auth input{
    border: none;
    background: transparent;
    outline: none;
    flex: 1;
    padding: 10px 6px;
    font-weight: 700;
    font-size: .92rem;
}

/* Tombol "mata" (tampilkan/sembunyikan kata sandi) — sebelumnya belum ada
   style sama sekali, jadi tampil sebagai tombol default browser yang merusak
   bentuk pil input. Sekarang dibuat bulat, transparan, dan senada tema coklat. */
.toggle-sandi{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-width: 34px;
    margin-left: 4px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--ea-kayu, #a86b3c);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.toggle-sandi i{
    /* Reset dari aturan umum ".grup-input > i" di atas: icon mata tidak perlu
       lebar/margin tambahan karena posisinya sudah diatur oleh .toggle-sandi sendiri. */
    width: auto;
    margin-right: 0;
    color: inherit;
}
.toggle-sandi:hover{
    background: rgba(168,107,60,.12);
    color: var(--ea-kayu-tua, #7a4a26);
}
.toggle-sandi:focus-visible{
    outline: 2px solid var(--ea-kayu, #a86b3c);
    outline-offset: 2px;
}

.btn-auth{
    width: 100%;
    border:none;
    border-radius: 999px;
    padding: 12px 18px;
    font-weight: 800;
    letter-spacing:.4px;
    color:#fff;
    box-shadow: 0 8px 18px rgba(0,0,0,.2), inset 0 -3px 0 rgba(0,0,0,.12);
    transition: transform .18s ease, box-shadow .18s ease;
}
.btn-auth:hover{ transform: translateY(-3px); color:#fff; }
.btn-auth-biru{ background: linear-gradient(160deg, var(--pk-kayu-terang), var(--pk-kayu)); }
.btn-auth-hijau{ background: linear-gradient(160deg, var(--pk-kayu), var(--pk-kayu-tua)); }

.tautan-auth{
    display:block;
    text-align:center;
    margin-top: 16px;
    font-size:.85rem;
    color: var(--ea-teks, #1f2937);
    text-decoration:none;
}
.tautan-auth strong{ color: var(--ea-biru, #2563eb); }

.pesan-error-auth{
    background: #fdecec;
    border: 2px solid #f2a3a3;
    color: #b3261e;
    border-radius: 14px;
    padding: 10px 14px;
    font-size: .85rem;
    font-weight: 700;
    margin-bottom: 16px;
    display:flex; align-items:center; gap:8px;
}

@media (max-width: 480px){
    .kompas-auth{ width:56px; height:56px; top:14px; left:14px; }
}

/* =====================================================================
   LOGIN SPLIT — panel form (kiri) + panel sambutan coklat melengkung (kanan)
   Dipakai khusus di masuk.php, terinspirasi layout "Sign In / Hello Friend"
   namun tetap memakai palet coklat kayu tema English Adventure.
   ===================================================================== */
.panggung-masuk-split{
    position: relative;
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
    background: linear-gradient(160deg, var(--pk-krem) 0%, #f3e0c0 100%);
    overflow: hidden;
}
.panggung-masuk-split::before{
    content:"";
    position:absolute; inset:0;
    background-image:
        radial-gradient(rgba(168,107,60,.10) 2px, transparent 2px),
        radial-gradient(rgba(168,107,60,.08) 1.5px, transparent 1.5px);
    background-size: 140px 140px, 90px 90px;
    background-position: 0 0, 40px 60px;
    pointer-events:none;
}

/* Blob-blob besar yang mengambang pelan di latar belakang, biar tidak polos */
.blob-latar{
    position: absolute;
    border-radius: 50%;
    filter: blur(4px);
    opacity: .55;
    pointer-events: none;
    z-index: 0;
    animation: mengapungBlob 9s ease-in-out infinite;
}
.blob-latar-1{
    width: 260px; height: 260px;
    top: -80px; left: -80px;
    background: radial-gradient(circle at 35% 30%, var(--pk-emas), var(--pk-kayu-terang) 70%);
    animation-delay: 0s;
}
.blob-latar-2{
    width: 320px; height: 320px;
    bottom: -120px; right: -100px;
    background: radial-gradient(circle at 35% 30%, var(--pk-kayu-terang), var(--pk-kayu) 70%);
    animation-delay: 2.2s;
}
.blob-latar-3{
    width: 160px; height: 160px;
    bottom: 8%; left: 4%;
    background: radial-gradient(circle at 35% 30%, #fff, var(--pk-emas) 70%);
    opacity: .4;
    animation-delay: 1.1s;
}
.blob-latar-4{
    width: 120px; height: 120px;
    top: 10%; right: 8%;
    background: radial-gradient(circle at 35% 30%, #fff, var(--pk-kayu-terang) 70%);
    opacity: .35;
    animation-delay: 3s;
}
@keyframes mengapungBlob{
    0%, 100%{ transform: translate(0,0) scale(1); }
    50%{ transform: translate(18px,-22px) scale(1.06); }
}

/* Ikon dekoratif mengambang (kapal, jangkar, bintang) di latar belakang */
.ikon-latar{
    position: absolute;
    color: var(--pk-kayu);
    opacity: .28;
    pointer-events: none;
    z-index: 0;
    animation: mengombakAuth 5s ease-in-out infinite;
}

.kotak-masuk-split{
    position: relative;
    z-index: 2;
    display: flex;
    width: 100%;
    max-width: 960px;
    min-height: 560px;
    background: #ffffff;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(92,52,24,.28);
    opacity: 0;
    transform: translateY(28px) scale(.97);
    animation: masukKotakSplit .7s cubic-bezier(.22,.9,.34,1) .1s forwards;
}
@keyframes masukKotakSplit{
    to{ opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- Panel kiri: form masuk ---- */
.panel-form-split{
    flex: 1 1 54%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 56px 52px;
}
.panel-form-split .judul-split{
    font-family: 'Fredoka One', cursive;
    font-size: 2rem;
    color: var(--pk-kayu-tua);
    margin-bottom: 6px;
    text-align: center;
}
.panel-form-split .judul-split.tanpa-subjudul{
    /* Halaman tanpa subjudul (mis. masuk.php): jarak ke form tetap sama seperti saat ada subjudul */
    margin-bottom: 28px;
}
.panel-form-split .subjudul-split{
    font-family: 'Nunito', sans-serif;
    font-size: .92rem;
    color: #7c7266;
    margin-bottom: 28px;
    text-align: center;
}
.panel-form-split .ikon-kompas-split{
    width: 54px; height: 54px;
    border-radius: 50%;
    background: linear-gradient(160deg, var(--pk-kayu-terang), var(--pk-kayu));
    color: #fff;
    display:flex; align-items:center; justify-content:center;
    font-size: 1.4rem;
    margin: 0 auto 18px;
    box-shadow: 0 8px 16px rgba(168,107,60,.35);
}
.panel-form-split form{
    width: 100%;
}

/* Animasi masuk berjenjang untuk isi panel kiri */
.panel-form-split .ikon-kompas-split,
.panel-form-split .judul-split,
.panel-form-split .subjudul-split,
.panel-form-split .pesan-error-auth,
.panel-form-split form{
    opacity: 0;
    transform: translateY(16px);
    animation: masukIsiSplit .55s ease forwards;
}
.panel-form-split .ikon-kompas-split{ animation-delay: .25s; }
.panel-form-split .judul-split{ animation-delay: .32s; }
.panel-form-split .subjudul-split{ animation-delay: .39s; }
.panel-form-split .pesan-error-auth{ animation-delay: .44s; }
.panel-form-split form{ animation-delay: .48s; }
@keyframes masukIsiSplit{
    to{ opacity: 1; transform: translateY(0); }
}

.tautan-daftar-mobile{ display:none; }

/* ---- Panel kanan: sambutan coklat melengkung ---- */
.panel-sambutan-split{
    flex: 1 1 46%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff7ea;
    padding: 48px 40px;
    background: linear-gradient(160deg, var(--pk-kayu-terang) 0%, var(--pk-kayu) 55%, var(--pk-kayu-tua) 100%);
    border-top-left-radius: 260px;
    border-bottom-left-radius: 260px;
    overflow: hidden;
}
.panel-sambutan-split::before{
    content:"";
    position:absolute; inset:0;
    background-image: radial-gradient(rgba(255,255,255,.5) 2px, transparent 2px);
    background-size: 120px 120px;
    background-position: 20px 30px;
    opacity:.35;
    pointer-events:none;
}
.panel-sambutan-split .dekor-split{
    position:absolute;
    color:#fff7ea;
    opacity:.5;
    animation: mengombakAuth 5s ease-in-out infinite;
    pointer-events:none;
}
.panel-sambutan-split .isi-sambutan{
    position: relative;
    z-index: 2;
    opacity: 0;
    transform: translateY(16px);
    animation: masukIsiSplit .6s ease .5s forwards;
}
.panel-sambutan-split .isi-sambutan .ikon-sambutan{
    font-size: 2.6rem;
    margin-bottom: 14px;
    color: var(--pk-emas);
    text-shadow: 2px 2px 0 rgba(0,0,0,.25);
}
.panel-sambutan-split h2{
    font-family: 'Fredoka One', cursive;
    font-size: 1.9rem;
    margin-bottom: 14px;
    text-shadow: 2px 2px 0 rgba(0,0,0,.25);
}
.panel-sambutan-split p{
    font-family: 'Nunito', sans-serif;
    font-size: .95rem;
    line-height: 1.6;
    opacity: .95;
    margin-bottom: 26px;
    max-width: 320px;
}
.btn-outline-split{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background: transparent;
    border: 2px solid #fff7ea;
    color: #fff7ea !important;
    font-weight: 800;
    letter-spacing: .5px;
    padding: 12px 30px;
    border-radius: 999px;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, transform .18s ease;
}
.btn-outline-split:hover{
    background: #fff7ea;
    color: var(--pk-kayu-tua) !important;
    transform: translateY(-3px);
}

@media (max-width: 860px){
    .kotak-masuk-split{ flex-direction: column; min-height: auto; max-width: 460px; }
    .panel-form-split{ padding: 42px 32px 32px; order: 2; }
    .panel-sambutan-split{
        order: 1;
        border-radius: 0;
        padding: 40px 28px;
    }
    .tautan-daftar-mobile{ display:block; }
}
@media (max-width: 480px){
    .panel-form-split{ padding: 34px 22px 26px; }
    .panel-sambutan-split{ padding: 32px 20px; }
    .panel-sambutan-split h2{ font-size: 1.5rem; }
}

/* =====================================================================
   DAFTAR SPLIT — mirror dari LOGIN SPLIT di atas.
   Bedanya: panel sambutan di KIRI, panel form (field-field daftar) di KANAN.
   Dipakai khusus di daftar.php. Cukup tukar urutan elemen di HTML,
   lalu class tambahan di bawah ini membalik arah lengkungan panelnya
   supaya lengkungan tetap "menempel" ke tengah (bukan ke pinggir luar).
   ===================================================================== */
.panel-sambutan-split.panel-sambutan-kiri{
    border-radius: 0;
    border-top-right-radius: 260px;
    border-bottom-right-radius: 260px;
}
.tautan-masuk-mobile{ display:none; }

@media (max-width: 860px){
    .panel-sambutan-split.panel-sambutan-kiri{ border-radius: 0; }
    .tautan-masuk-mobile{ display:block; }
}