/* css/styles.css */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;800&display=swap');

:root {
    --k-green: #96c11f;
    --k-blue: #00a29a;
    --glass-bg: rgba(255, 255, 255, 0.15);
    --glass-border: rgba(255, 255, 255, 0.3);
    --glass-shadow: 0 8px 32px 0 rgba(0, 162, 154, 0.37);
}

* {
    margin: 0; padding: 0; box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    /* HARAM SCROLLBAR */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
*::-webkit-scrollbar { display: none; /* Chrome, Safari and Opera */ }

body {
    background: linear-gradient(135deg, #e0f2f1 0%, #f1f8e9 100%);
    color: #333;
    height: 100vh;
    overflow: hidden; /* Prevent body scroll */
}

/* Container Native Desktop & Mobile */
#app-container {
    width: 100%;
    max-width: 100vw;
    height: 100vh;
    margin: 0 auto;
    position: relative;
}
@media (max-width: 768px) { #app-container { max-width: 100%; } }

/* NEO GLASSMORPHISM COMPONENTS */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    box-shadow: var(--glass-shadow);
}

/* LANDING PAGE MODAL (DUAL TONE) */
#landing-modal {
    position: absolute; top: 5%; left: 5%; right: 5%; bottom: 5%;
    display: flex; z-index: 1000;
    cursor: pointer; /* Click anywhere to close */
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.landing-left {
    flex: 1; background: linear-gradient(135deg, var(--k-green), #7aa114);
    border-radius: 20px 0 0 20px; padding: 40px; color: white;
    display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
}
.landing-right {
    flex: 1; background: var(--glass-bg); backdrop-filter: blur(20px);
    border-radius: 0 20px 20px 0; padding: 40px;
    display: flex; flex-direction: column; justify-content: center;
    border: 1px solid var(--glass-border); border-left: none;
}
.title-sehati { font-size: 3.5rem; font-weight: 800; letter-spacing: 2px; }
.text-se { color: #fff; }
.text-hati { color: var(--k-blue); text-shadow: 2px 2px 4px rgba(0,0,0,0.2); }
.sub-title { font-size: 1.2rem; font-weight: 600; white-space: nowrap; margin-bottom: 20px;}
.kadis-info { margin-top: auto; font-size: 0.9rem; border-top: 1px solid rgba(255,255,255,0.3); padding-top: 10px;}

/* 3D MODERN BUTTONS */
.btn-3d {
    background: linear-gradient(145deg, var(--k-blue), #008f88);
    color: white; border: none; padding: 12px 24px; border-radius: 12px;
    font-weight: 600; font-size: 1rem; cursor: pointer;
    box-shadow: 0 6px 0 #006e69, 0 10px 20px rgba(0,162,154,0.4);
    transition: all 0.1s ease; outline: none;
}
.btn-3d:active {
    transform: translateY(6px); box-shadow: 0 0 0 #006e69, 0 4px 6px rgba(0,162,154,0.4);
}
.btn-3d.green {
    background: linear-gradient(145deg, var(--k-green), #85ad1a);
    box-shadow: 0 6px 0 #6d8e15, 0 10px 20px rgba(150,193,31,0.4);
}
.btn-3d.green:active { box-shadow: 0 0 0 #6d8e15; transform: translateY(6px); }

/* CUSTOM SPA MODAL (REPLACE BROWSER ALERT) */
#custom-alert {
    position: fixed; top: -100px; left: 50%; transform: translateX(-50%);
    z-index: 9999; padding: 15px 30px; border-radius: 30px;
    transition: top 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* LOGIN / REGISTER MODAL */
#auth-modal {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.9);
    width: 400px; padding: 30px; opacity: 0; pointer-events: none;
    transition: all 0.4s ease; z-index: 900;
}
#auth-modal.active { opacity: 1; pointer-events: all; transform: translate(-50%, -50%) scale(1); }
.tab-headers { display: flex; margin-bottom: 20px; gap: 10px; }
.tab-btn { flex: 1; background: transparent; border: none; font-weight: 600; font-size: 1.1rem; color: #888; border-bottom: 3px solid transparent; cursor: pointer; padding-bottom: 5px; transition: 0.3s;}
.tab-btn.active { color: var(--k-blue); border-bottom: 3px solid var(--k-blue); }

/* FORMS 3D */
.input-3d {
    width: 100%; padding: 15px; margin-bottom: 15px; border-radius: 12px;
    border: none; background: #f0f5f5;
    box-shadow: inset 4px 4px 8px #d1d9d9, inset -4px -4px 8px #ffffff;
    font-size: 0.95rem; outline: none; color: #333; transition: 0.3s;
}
.input-3d:focus { box-shadow: inset 2px 2px 4px #d1d9d9, inset -2px -2px 4px #ffffff; }

/* MOBILE RESPONSIVE TWEAKS */
@media (max-width: 768px) {
    #landing-modal { flex-direction: column; top: 0; left: 0; right: 0; bottom: 0; border-radius: 0; }
    .landing-left { border-radius: 0; padding: 20px; }
    .landing-right { border-radius: 0; padding: 20px; border-left: 1px solid var(--glass-border); border-top: none; }
    .sub-title { white-space: normal; font-size: 1rem; }
}