:root{
--emerald:#065f46;
--emerald2:#059669;
--emerald-light:#10b981;
--bg:#f8fafc;
--card-shadow:0 8px 30px rgba(6,95,70,0.08);
--transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{
background:var(--bg);
font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
}

/* ==================== SPLASH ==================== */
#splash-screen{
position:fixed;inset:0;
background:linear-gradient(135deg,#065f46 0%,#059669 100%);
display:flex;flex-direction:column;
align-items:center;justify-content:center;
z-index:9999;
color:white;
animation:fadeOut 0.8s ease 6.5s forwards;
}
@keyframes fadeOut{
to{opacity:0;visibility:hidden}
}

.splash-logo{
width:100px;height:100px;
margin-bottom:20px;
animation:logoFloat 2s ease-in-out infinite;
filter:drop-shadow(0 10px 25px rgba(0,0,0,0.2));
}
@keyframes logoFloat{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-15px)}
}

.splash-title{
font-size:clamp(1.5rem,5vw,2.5rem);
font-weight:800;
letter-spacing:3px;
margin-bottom:15px;
text-shadow:0 4px 15px rgba(0,0,0,0.3);
}

.loader{
width:50px;height:50px;
border:4px solid rgba(255,255,255,0.2);
border-top:4px solid white;
border-radius:50%;
animation:spin 1s linear infinite;
}
@keyframes spin{
to{transform:rotate(360deg)}
}

/* ==================== NAVBAR ==================== */
.glass-nav{
background:rgba(255,255,255,0.95);
backdrop-filter:blur(20px) saturate(180%);
border:none;
box-shadow:0 2px 20px rgba(0,0,0,0.05);
position:sticky;top:0;z-index:1040;
transition:var(--transition);
}

.nav-logo-wrapper{
display:flex;align-items:center;gap:12px;
}
.nav-logo{
width:42px;height:42px;
border-radius:12px;
object-fit:cover;
transition:var(--transition);
}
.nav-logo:hover{transform:scale(1.05)}

.nav-text h5{
font-size:1.1rem;font-weight:700;
margin:0;color:#065f46;
line-height:1.2;
}
.nav-text small{
font-size:0.7rem;
color:#6b7280;
font-weight:500;
letter-spacing:0.5px;
}

.btn-login{
background:linear-gradient(135deg,#059669,#10b981);
border:none;
padding:10px 24px;
border-radius:25px;
font-weight:600;
font-size:0.9rem;
color:white;
box-shadow:0 4px 15px rgba(5,150,105,0.3);
transition:var(--transition);
}
.btn-login:hover{
transform:translateY(-2px);
box-shadow:0 6px 25px rgba(5,150,105,0.4);
}

/* ==================== HERO ==================== */
.hero-section{
background:linear-gradient(135deg,#065f46 0%,#059669 50%,#10b981 100%);
padding:80px 0 100px;
position:relative;
overflow:hidden;
}
.hero-section::before{
content:'';
position:absolute;
top:0;left:0;right:0;bottom:0;
background:url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="1" fill="white" opacity="0.1"/></svg>');
opacity:0.4;
}
.hero-section::after{
content:'';
position:absolute;
bottom:-2px;left:0;right:0;
height:80px;
background:var(--bg);
border-radius:50% 50% 0 0 / 100% 100% 0 0;
}

.hero-content{
position:relative;z-index:2;
text-align:center;
color:white;
animation:fadeInUp 0.8s ease;
}
@keyframes fadeInUp{
from{opacity:0;transform:translateY(30px)}
to{opacity:1;transform:translateY(0)}
}

.hero-badge{
display:inline-block;
background:rgba(255,255,255,0.2);
backdrop-filter:blur(10px);
padding:8px 20px;
border-radius:25px;
font-size:0.85rem;
font-weight:600;
margin-bottom:20px;
letter-spacing:1px;
}

.hero-title{
font-size:clamp(1.8rem,6vw,3rem);
font-weight:800;
line-height:1.2;
margin-bottom:15px;
}
.hero-subtitle{
font-size:clamp(1rem,3vw,1.3rem);
font-weight:300;
opacity:0.95;
margin-bottom:25px;
}

/* ==================== PRAYER TIMES ==================== */
.prayer-section{
margin-top:-50px;
position:relative;
z-index:10;
}

.prayer-card{
background:white;
border-radius:24px;
padding:20px;
box-shadow:var(--card-shadow);
animation:slideUp 0.6s ease 0.3s both;
}
@keyframes slideUp{
from{opacity:0;transform:translateY(40px)}
to{opacity:1;transform:translateY(0)}
}

.prayer-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px;
}

.prayer-item{
background:linear-gradient(135deg,#f0fdf4 0%,#ecfdf5 100%);
border-radius:16px;
padding:16px 8px;
text-align:center;
transition:var(--transition);
border:1px solid #d1fae5;
position:relative;
overflow:hidden;
}
.prayer-item::before{
content:'';
position:absolute;
top:0;left:0;
width:100%;height:3px;
background:linear-gradient(90deg,#059669,#10b981);
transform:scaleX(0);
transform-origin:left;
transition:transform 0.4s ease;
}
.prayer-item:active{
transform:scale(0.95);
}
.prayer-item:active::before{
transform:scaleX(1);
}

.prayer-name{
font-size:0.75rem;
font-weight:700;
color:#065f46;
text-transform:uppercase;
letter-spacing:0.5px;
margin-bottom:6px;
}
.prayer-time{
font-size:1.1rem;
font-weight:800;
color:#059669;
font-variant-numeric:tabular-nums;
}

/* ==================== SECTION CARD ==================== */
.section-card{
background:white;
border-radius:24px;
padding:28px;
box-shadow:var(--card-shadow);
border:1px solid #f3f4f6;
animation:slideUp 0.6s ease 0.5s both;
transition:var(--transition);
}
.section-card:hover{
box-shadow:0 12px 40px rgba(6,95,70,0.12);
}

.section-title{
font-size:1.3rem;
font-weight:700;
color:#065f46;
margin-bottom:16px;
display:flex;
align-items:center;
gap:10px;
}
.section-title::before{
content:'';
width:4px;height:24px;
background:linear-gradient(180deg,#059669,#10b981);
border-radius:2px;
}

.sambutan-text{
color:#6b7280;
line-height:1.8;
font-size:0.95rem;
}

.btn-selengkapnya{
background:transparent;
border:2px solid #059669;
color:#059669;
padding:10px 24px;
border-radius:20px;
font-weight:600;
font-size:0.9rem;
transition:var(--transition);
display:inline-flex;
align-items:center;
gap:8px;
}
.btn-selengkapnya:hover{
background:#059669;
color:white;
transform:translateX(5px);
}

/* ==================== FOOTER ==================== */
.main-footer{
background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);
color:#cbd5e1;
padding:50px 0 100px;
margin-top:60px;
position:relative;
}
.main-footer::before{
content:'';
position:absolute;
top:0;left:0;right:0;
height:1px;
background:linear-gradient(90deg,transparent,#334155,transparent);
}

.footer-title{
font-weight:700;
color:white;
margin-bottom:16px;
font-size:1.1rem;
}

.footer-info{
display:flex;
align-items:start;
gap:12px;
margin-bottom:12px;
}
.footer-info i{
color:#10b981;
margin-top:3px;
font-size:1.1rem;
}
.footer-info p{
margin:0;
line-height:1.6;
font-size:0.9rem;
}

.footer-bottom{
text-align:center;
margin-top:40px;
padding-top:30px;
border-top:1px solid #334155;
font-size:0.85rem;
color:#94a3b8;
}

/* ==================== MOBILE BOTTOM NAV ==================== */
.mobile-bottom-nav{
position:fixed;
bottom:0;left:0;right:0;
height:70px;
background:rgba(255,255,255,0.98);
backdrop-filter:blur(20px) saturate(180%);
border-top:1px solid #f3f4f6;
display:none;
align-items:center;
justify-content:space-around;
z-index:1050;
box-shadow:0 -4px 20px rgba(0,0,0,0.08);
}

.nav-item{
flex:1;
text-align:center;
color:#9ca3af;
text-decoration:none;
transition:var(--transition);
padding:8px;
position:relative;
}
.nav-item i{
display:block;
font-size:1.3rem;
margin-bottom:4px;
transition:var(--transition);
}
.nav-item span{
display:block;
font-size:0.7rem;
font-weight:600;
}
.nav-item.active{
color:#059669;
}
.nav-item.active i{
transform:scale(1.1);
}

.fab-wrapper{
position:relative;
flex:0 0 70px;
}
.fab-login{
position:absolute;
top:-35px;
left:50%;
transform:translateX(-50%);
width:60px;height:60px;
background:linear-gradient(135deg,#059669,#10b981);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:white;
box-shadow:0 8px 25px rgba(5,150,105,0.4);
cursor:pointer;
transition:var(--transition);
border:4px solid white;
}
.fab-login:active{
transform:translateX(-50%) scale(0.9);
}
.fab-login i{
font-size:1.4rem;
}

/* ==================== MODAL ==================== */
.modal-overlay{
position:fixed;
inset:0;
background:rgba(6,95,70,0.9);
backdrop-filter:blur(12px);
z-index:2000;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
animation:fadeIn 0.3s ease;
}
@keyframes fadeIn{
from{opacity:0}
to{opacity:1}
}

.modal-container{
background:white;
border-radius:28px;
width:100%;
max-width:420px;
overflow:hidden;
box-shadow:0 25px 50px rgba(0,0,0,0.3);
animation:modalSlideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes modalSlideUp{
from{transform:translateY(100px);opacity:0}
to{transform:translateY(0);opacity:1}
}

.modal-tabs{
display:flex;
background:#f9fafb;
}
.tab-btn{
flex:1;
border:none;
background:transparent;
padding:18px;
font-weight:700;
font-size:0.95rem;
color:#6b7280;
border-bottom:3px solid transparent;
transition:var(--transition);
cursor:pointer;
}
.tab-btn.active-tab{
background:white;
color:#065f46;
border-bottom-color:#059669;
}

.modal-form{
padding:32px 24px;
}
.modal-form input{
width:100%;
padding:14px 18px;
border:2px solid #e5e7eb;
border-radius:14px;
margin-bottom:16px;
font-size:0.95rem;
transition:var(--transition);
}
.modal-form input:focus{
outline:none;
border-color:#059669;
box-shadow:0 0 0 3px rgba(5,150,105,0.1);
}

.btn-submit{
width:100%;
padding:14px;
border:none;
border-radius:14px;
font-weight:700;
font-size:1rem;
transition:var(--transition);
cursor:pointer;
}
.btn-submit.login{
background:linear-gradient(135deg,#059669,#10b981);
color:white;
}
.btn-submit.register{
background:#0f172a;
color:white;
}
.btn-submit:active{
transform:scale(0.98);
}

.modal-footer{
background:#f9fafb;
padding:20px;
text-align:center;
}
.btn-close-modal{
background:transparent;
border:none;
color:#6b7280;
font-weight:600;
cursor:pointer;
font-size:0.9rem;
transition:var(--transition);
}
.btn-close-modal:hover{
color:#065f46;
}

/* ==================== RESPONSIVE ==================== */
@media(max-width:768px){
.mobile-bottom-nav{display:flex}
body{padding-bottom:90px}

.glass-nav .container{padding:12px 16px}
.btn-login{font-size:0.85rem;padding:8px 18px}

.hero-section{padding:60px 0 80px}
.prayer-section{margin-top:-40px}
.prayer-card{padding:16px}
.prayer-grid{gap:10px}
.prayer-item{padding:12px 6px}
.prayer-name{font-size:0.7rem}
.prayer-time{font-size:1rem}

.section-card{padding:20px;margin-bottom:20px}
.main-footer{padding:40px 0 90px}
}

@media(min-width:769px){
.prayer-grid{
grid-template-columns:repeat(6,1fr);
gap:16px;
}
.prayer-item{padding:20px 12px}

body{padding-bottom:0}
}

/* ==================== UTILITIES ==================== */
.d-none{display:none!important}
.d-flex{display:flex!important}

.active-prayer{
    background:#059669;
    border-radius:12px;
    transform:scale(1.05);
    transition:.3s;
}

.active-prayer .prayer-name{
    color:#ffffff;
    font-weight:bold;
}

.active-prayer .prayer-time{
    color:#ffffff; /* JAM JADI PUTIH */
    font-weight:bold;
}

/* Section Berita SIKASEP 2026 */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 15px;
}
.news-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
    border: 1px solid #eee;
}
.news-card:hover {
    transform: translateY(-5px);
}
.news-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}
.news-body {
    padding: 15px;
}
.news-date {
    font-size: 0.75rem;
    color: #666;
    margin-bottom: 5px;
    display: block;
}
.news-title {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 10px;
    color: #2c3e50;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Update Navigasi agar Horizontal & Profesional */
.nav-menu-desktop {
    display: none; 
    list-style: none;
    margin: 0 auto; /* Menempatkan menu di tengah */
    padding: 0;
    gap: 25px; /* Jarak antar menu */
    align-items: center;
}

.nav-link-desktop {
    color: var(--emerald); /* Menggunakan variabel warna Bapak */
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    transition: var(--transition);
    white-space: nowrap; /* Mencegah teks turun ke bawah */
}

.nav-link-desktop:hover {
    color: var(--emerald-light);
    transform: translateY(-2px);
}

/* Memastikan Logo tidak terlalu besar dan teks di sampingnya rapi */
.nav-logo-wrapper {
    flex-shrink: 0; /* Logo tidak akan gepeng */
}

@media (min-width: 992px) {
    .nav-menu-desktop {
        display: flex !important; /* Paksa muncul di desktop */
    }
}