/* modern.css */
.main-content { margin-top:90px; padding:20px; max-width:1200px; margin-left:auto; margin-right:auto; min-height:calc(100vh - 200px); }
.page-title { text-align:center; margin-bottom:50px; }
.page-title h1 { font-size:42px; font-weight:800; background:linear-gradient(135deg, var(--neon-cyan), #00ff88, var(--neon-purple)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 0 20px rgba(0,229,255,0.5)); margin-bottom:10px; }
.page-title p { color:rgba(255,255,255,0.6); font-size:16px; }

.modern-card { background:rgba(18,20,26,0.8); backdrop-filter:blur(8px); border-radius:24px; padding:25px; border:1px solid rgba(0,229,255,0.2); box-shadow:0 20px 40px rgba(0,0,0,0.5); transition:0.3s; position:relative; overflow:hidden; }
.modern-card:hover { transform:translateY(-8px); border-color:var(--neon-cyan); box-shadow:0 25px 50px rgba(0,229,255,0.3); }
.modern-card::before { content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:radial-gradient(circle at 50% 0%, rgba(0,229,255,0.1), transparent 70%); opacity:0; transition:0.3s; }
.modern-card:hover::before { opacity:1; }
.card-icon { font-size:48px; margin-bottom:15px; }
.card-title { font-size:22px; font-weight:700; margin-bottom:10px; color:#fff; }
.card-desc { color:#aaa; font-size:14px; margin-bottom:20px; line-height:1.6; }
.card-tag { display:inline-block; background:rgba(0,229,255,0.1); color:var(--neon-cyan); padding:4px 12px; border-radius:20px; font-size:12px; border:1px solid var(--neon-cyan); text-decoration:none; transition:0.2s; }
.card-tag:hover { background:var(--neon-cyan); color:black; }

.grid-2, .grid-3, .grid-4 { display:grid; gap:25px; margin-bottom:60px; }
.grid-2 { grid-template-columns:repeat(2,1fr); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-4 { grid-template-columns:repeat(4,1fr); }

.footer { background:rgba(8,8,12,0.95); backdrop-filter:blur(8px); border-top:1px solid rgba(0,229,255,0.1); padding:50px 20px 20px; margin-top:60px; }
.footer-container { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:40px; }
.footer-logo { color:var(--neon-cyan); font-size:24px; font-weight:800; margin-bottom:15px; }
.footer-desc { color:#aaa; font-size:14px; line-height:1.7; margin-bottom:20px; }
/* Social Icons */
.social-icons {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 30px;
    background: transparent;
    border: 2px solid;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: 0.2s;
}

.social-icon.wa {
    border-color: #25D366;
    color: #25D366;
}
.social-icon.wa:hover {
    background: #25D366;
    color: black;
}

.social-icon.tg {
    border-color: #0088cc;
    color: #0088cc;
}
.social-icon.tg:hover {
    background: #0088cc;
    color: black;
}

.social-icon.email {
    border-color: #ff4444;  /* warna merah untuk email */
    color: #ff4444;
}
.social-icon.email:hover {
    background: #ff4444;
    color: black;
}

.social-icon i {
    font-size: 18px;
}
.footer-title { color:#fff; font-size:18px; font-weight:600; margin-bottom:20px; }
.footer-links { list-style:none; }
.footer-links li { margin-bottom:12px; }
.footer-links a { color:#aaa; text-decoration:none; transition:0.2s; font-size:14px; }
.footer-links a:hover { color:var(--neon-cyan); padding-left:5px; }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.05); margin-top:40px; padding-top:20px; text-align:center; color:#777; font-size:13px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:15px; }
.status-badge { display:inline-flex; align-items:center; gap:5px; background:rgba(0,255,0,0.1); border:1px solid #0f0; color:#0f0; padding:5px 15px; border-radius:30px; font-size:12px; }
.status-badge i { font-size:8px; color:#0f0; }

@media (max-width:768px) { .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; } .footer-bottom { flex-direction:column; text-align:center; } }