/* ======================
   RESET
====================== */

* {
    box-sizing: border-box;
}

html, body {

    margin: 0;
    padding: 0;

    height: 100%;

    font-family: Arial, sans-serif;

    background: linear-gradient(
        to bottom,
        #0b1f14,
        #123524
    );

    color: white;

}



/* ======================
   APP LAYOUT
====================== */

#app {

    max-width: 500px;

    margin: auto;

    width: 100%;

    height: 100vh;

    display: flex;

    flex-direction: column;

}



/* ======================
   VIEW
====================== */

#view {

    flex: 1;

    overflow-y: auto;

    padding: 15px;

    padding-bottom: 90px;

    width: 100%;

    transition: opacity 0.2s;

}



/* ======================
   MENU
====================== */

#menu {

    position: fixed;

    bottom: 0;

    left: 0;
    right: 0;

    max-width: 500px;

    margin: auto;

    height: 70px;

    display: flex;

    justify-content: space-around;

    align-items: center;

    backdrop-filter: blur(10px);

    background: rgba(20,40,30,0.8);

    border-top: 1px solid #1f7a4c;

    z-index: 1000;

}



#menu button {

    background: none;

    border: none;

    color: #d9c27a;

    font-size: 20px;

    display: flex;

    flex-direction: column;

    align-items: center;

    transition: 0.2s;

}



#menu span {

    font-size: 10px;

}



#menu button.active {

    color: #3fa36a;

    transform: scale(1.1);

}



/* ======================
   CARD
====================== */

.card {

    background: #13291d;

    border-radius: 14px;

    padding: 15px;

    margin-bottom: 15px;

    box-shadow: 0 0 10px #000;

    width: 100%;

}



/* ======================
   INPUT
====================== */

/* ======================
INPUT FIX
====================== */

input,
select,
textarea {

width: 100%;

padding: 8px;

margin: 5px 0 10px 0;

border-radius: 6px;

border: 1px solid #444;

background: #ffffff;

color: #000;

font-size: 14px;

box-sizing: border-box;

}


label {

font-size: 12px;

opacity: 0.7;

display: block;

margin-top: 5px;

}


button {

padding: 8px 12px;

border-radius: 6px;

border: none;

background: #d9c27a;

color: #000;

cursor: pointer;

margin-top: 5px;
margin-right: 5px;

}


button:hover {

opacity: 0.8;

}


/* ======================
   PROFILE AVATAR
====================== */

#v_avatar {

    width: 100px;
    height: 100px;

    border-radius: 50%;

    object-fit: cover;

    border: 3px solid #d9c27a;

    display: block;
    margin: auto;
    margin-bottom: 10px;

}



/* ======================
   SPLASH
====================== */

#splash {

    position: fixed;

    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background: #0b1f14;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 9999;

    transition: opacity 0.4s;

}



#splashContent {

    width: 100%;
    height: 100%;

    position: relative;

}



#splashBg {

    width: 100%;
    height: 100%;

    object-fit: cover;

}



#loader {

    position: absolute;

    bottom: 80px;

    left: 50%;

    transform: translateX(-50%);

    width: 40px;
    height: 40px;

    border-radius: 50%;

    border: 4px solid #ffffff44;

    border-top: 4px solid #d9c27a;

    animation: spin 1s linear infinite;

}



@keyframes spin {

    0% {
        transform: translateX(-50%) rotate(0deg);
    }

    100% {
        transform: translateX(-50%) rotate(360deg);
    }

}

/* ======================
   FORM DESIGN
====================== */

.formCard {

    max-width: 400px;

    margin: auto;

}


.inputGroup {

    margin-bottom: 10px;

}


label {

    font-size: 12px;

    color: #d9c27a;

}


.inputIcon {

    display: flex;

    align-items: center;

    background: #0f2418;

    border-radius: 8px;

    padding: 8px;

}


.inputIcon i {

    margin-right: 8px;

    color: #d9c27a;

}


.inputIcon input {

    border: none;

    background: transparent;

    flex: 1;

    color: white;

    font-size: 16px;

}


.secondaryBtn {

    background: #555;

}

/* ======================
   FORM CLEAN
====================== */

.formCard {

    max-width: 400px;

    margin: auto;

    text-align: center;

}


.formCard h2 {

    margin-bottom: 15px;

}


.formCard input {

    width: 100%;

    padding: 14px;

    margin: 8px 0;

    border-radius: 10px;

    border: none;

    background: #0f2418;

    color: white;

    font-size: 16px;

}


.formCard button {

    width: 100%;

    margin-top: 10px;

}


.secondaryBtn {

    background: #444;

}
#progressBar {

    position: absolute;

    bottom: 60px;

    left: 50%;

    transform: translateX(-50%);

    width: 80%;

    max-width: 400px;

    height: 8px;

    background: rgba(255,255,255,0.25);

    border-radius: 20px;

    overflow: hidden;

    z-index: 5;

}


#progressFill {

    width: 0%;

    height: 100%;

    background: linear-gradient(
    90deg,
    #caa84a,
    #f5e6a3
);

    transition: width 0.2s;

}
#progressText {

    position: absolute;

    bottom: 90px;

    left: 50%;

    transform: translateX(-50%);

    color: white;

    font-size: 18px;

    font-weight: bold;

    z-index: 10;

}

/* ======================
KONTO DASHBOARD
====================== */

.kontoHeader {

text-align: center;
padding: 20px;

}

.kontoAvatar {

width: 90px;
height: 90px;

border-radius: 50%;

border: 3px solid #d9c27a;

object-fit: cover;

margin-bottom: 10px;

}

.kontoName {

font-size: 18px;
font-weight: bold;

}

.kontoRole {

font-size: 12px;
color: #d9c27a;

margin-bottom: 10px;

}

.kontoGrid {

display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;

}

.kontoTile {

background: #13291d;

border-radius: 12px;

padding: 15px;

text-align: center;

cursor: pointer;

box-shadow: 0 0 10px #000;

transition: 0.2s;

}

.kontoTile:hover {

transform: scale(1.05);

}

.kontoIcon {

font-size: 28px;
margin-bottom: 5px;

}

.kontoSmall {

font-size: 11px;
opacity: 0.7;

}

.kontoLogout {

margin-top: 15px;

}

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

.profileHeader {

text-align: center;
padding: 20px;

}

.profileAvatar {

width: 110px;
height: 110px;

border-radius: 50%;

border: 4px solid #d9c27a;

object-fit: cover;

margin-bottom: 10px;

}

.profileName {

font-size: 20px;
font-weight: bold;

}

.profileBadge {

display: inline-block;

padding: 4px 10px;

border-radius: 10px;

background: #d9c27a;

color: #000;

font-size: 12px;

margin-top: 5px;

}


/* ======================
PROFILE CARD
====================== */

.profileCard {

padding: 15px;

}

.profileRow {

display: flex;
justify-content: space-between;

padding: 6px 0;

border-bottom: 1px solid #222;

}

.profileLabel {

opacity: 0.7;
font-size: 12px;

}

.profileValue {

font-weight: bold;

}

.profileEditBtn {

margin-top: 10px;

}

.avatarBox {

position: relative;
display: inline-block;

}

.avatarEditIcon {

position: absolute;

right: 0;
bottom: 0;

background: #d9c27a;
color: #000;

border-radius: 50%;

padding: 5px;

font-size: 12px;

}

.adminHeader{

display:flex;

align-items:center;

justify-content:space-between;

gap:10px;

}

.adminHeader h2{

margin:0;

font-size:18px;

}

.adminHeader button{

background:#333;
color:#fff;

}