/* styles.css - Modern sporty & professional (Light Theme) */
:root { /* Perubahan ini harus di dalam selector :root */
--accent:#8b5cf6; /* Bisa tetap ungu atau disesuaikan */
--accent2:#06b6d4; /* Bisa tetap biru muda atau disesuaikan */
--muted:#555; /* Warna teks sekunder yang lebih gelap */
--text:#222; /* Warna teks utama yang gelap */
--background-light:#f8f9fa; /* Latar belakang terang utama */
--card-background:#ffffff; /* Latar belakang kartu/elemen terang */
--border-light:#e0e0e0; /* Warna border yang lebih terang */

--max-width:1200px;
--radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{
    height:100%;
    font-family:'Poppins', Inter, ui-sans-serif;
    background: var(--background-light); /* Menggunakan latar belakang terang */
    color:var(--text); /* Menggunakan teks gelap */
    line-height:1.6
}
.container{max-width:var(--max-width);margin:0 auto;padding:24px}
.header{
    background:var(--card-background); /* Latar belakang header terang */
    border:1px solid var(--border-light); /* Border terang */
    border-radius:var(--radius);
    padding:18px;
    margin-bottom:24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08); /* Shadow yang lebih ringan */
    /* backdrop-filter:blur(8px); -- Mungkin tidak diperlukan pada tema terang */
}
.brand{display:flex;gap:12px;align-items:center}
.brand img{width:52px;height:52px;border-radius:10px;object-fit:cover;box-shadow:0 0 12px rgba(139,92,246,0.2)} /* Shadow lebih ringan */
.brand h1{font-size:20px;font-weight:600;margin:0;color:var(--accent)}
.nav{display:flex;gap:14px;flex-wrap:wrap}
.nav a{color:var(--muted);text-decoration:none;padding:10px 14px;border-radius:10px;transition:.3s;font-weight:500}
.nav a:hover{background:linear-gradient(90deg,var(--accent),var(--accent2));color:white;box-shadow:0 0 10px rgba(0,0,0,0.2)} /* Shadow lebih ringan */
.hero{
    padding:36px;
    background:linear-gradient(135deg,rgba(139,92,246,0.1),rgba(6,182,212,0.05)); /* Warna gradien yang lebih ringan */
    border-radius:var(--radius);
    margin-bottom:24px;
    text-align:center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* Shadow lebih ringan */
}
.hero h2{font-size:28px;font-weight:700;color:var(--accent)}
.hero p{margin-top:10px;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.card{
    background:var(--card-background); /* Latar belakang kartu terang */
    padding:20px;
    border-radius:var(--radius);
    box-shadow:0 4px 15px rgba(0,0,0,0.1); /* Shadow lebih ringan */
    transition:transform .3s, box-shadow .3s
}
.card:hover{transform:translateY(-6px);box-shadow:0 8px 20px rgba(0,0,0,0.15)} /* Shadow lebih ringan */
.card h3{margin-bottom:12px;color:var(--accent)}
.card p{color:var(--muted)}
.footer{
    margin-top:36px;
    padding:20px;
    text-align:center;
    color:var(--muted);
    font-size:14px;
    border-top:1px solid var(--border-light); /* Border terang */
}
.article{
    background:var(--card-background); /* Latar belakang artikel terang */
    padding:24px;
    border-radius:var(--radius);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Shadow lebih ringan */
}
.meta{font-size:13px;color:var(--muted);margin-bottom:12px}
.btn{display:inline-block;padding:12px 16px;border-radius:12px;background:linear-gradient(90deg,var(--accent),var(--accent2));color:white;text-decoration:none;font-weight:600;transition:.3s}
.btn:hover{opacity:.9;box-shadow:0 0 14px rgba(139,92,246,0.3)} /* Shadow lebih ringan */
.input{
    padding:12px;
    border-radius:10px;
    border:1px solid var(--border-light); /* Border terang */
    background:var(--card-background); /* Latar belakang input terang */
    color:var(--text);
}
.faq-item{border-bottom:1px solid var(--border-light);padding:14px 0} /* Border terang */
.faq-question{cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:600;color:var(--accent)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-item:target .faq-answer{max-height:500px;padding-top:12px}
.slot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.slot-card img{width:100%;height:180px;object-fit:cover;border-radius:12px;margin-bottom:14px;box-shadow:0 4px 12px rgba(0,0,0,0.15)} /* Shadow lebih ringan */
.slot-card h3{color:var(--accent);margin-bottom:6px}
.slot-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.slot-meta span{color:var(--muted)}
.list{list-style:none;padding:0;margin:0}
.list li{padding:14px 0;border-bottom:1px solid var(--border-light)} /* Border terang */
.list li a{color:var(--text);text-decoration:none;font-weight:500}
.breadcrumb{font-size:14px;color:var(--muted);margin-bottom:14px}
.center{text-align:center}
.muted{color:var(--muted)}
@media(max-width:768px){.header{flex-direction:column;align-items:flex-start;gap:12px}.hero h2{font-size:24px}}