/* custom.css — gaya utama untuk tema Informatika School */
:root{
  --brand-blue: #0047AB;
  --brand-aqua: #00BFFF;
  --muted: #6c757d;
  --card-radius: 12px;
  --shadow-weak: 0 4px 18px rgba(2,6,23,0.06);
}

*{box-sizing:border-box}
body{
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:#222;
  background:#ffffff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* BRAND */
.brand-icon{ color:var(--brand-blue); font-size:1.35rem; }
.brand-text{ font-weight:700; color:#0b1b3a; }
.brand-text span{ color:var(--brand-aqua); }

/* HERO */
.hero-section{
  background: linear-gradient(90deg, rgba(0,70,171,0.92), rgba(0,191,255,0.8)), url('https://source.unsplash.com/1600x900/?technology,computer') center/cover no-repeat;
  min-height:420px;
  display:flex;
  align-items:center;
  border-bottom-left-radius:24px;
  border-bottom-right-radius:24px;
}

/* FEATURE CARDS */
.feature-card{ border-radius:var(--card-radius); transition:all .18s ease; }
.feature-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-weak); }

/* NEWS */
.news-card img{ height:140px; object-fit:cover; }

/* PAGE HEADER (elearning) */
.page-header{ border-bottom-left-radius:16px; border-bottom-right-radius:16px; }

/* GALLERY */
.gallery-grid .card{ border-radius:12px; overflow:hidden; }
.gallery-item{ transition:all .25s ease; }
.gallery-item.hide{ display:none !important; transform:scale(.98); opacity:.0; }

/* FORM */
.card form .form-control{ border-radius:8px; }

/* FOOTER */
.footer{ font-size:0.95rem; }

/* RESPONSIVE TWEAKS */
@media (max-width:768px){
  .hero-section{ padding:60px 0; min-height:360px; }
  .brand-text{ font-size:1rem; }
}
/* ==== Custom Style Informatika ==== */
body {
  font-family: 'Poppins', sans-serif;
  scroll-behavior: smooth;
}

.hero {
  background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.6)), url('../img/hero.jpg') center/cover no-repeat;
  height: 100vh;
}

.navbar-brand span {
  color: #00BFFF;
}

.btn-info {
  background-color: #00BFFF;
  border: none;
}

.btn-info:hover {
  background-color: #0099cc;
}

footer {
  font-size: 0.9rem;
}
pre code {
  background: #f4f4f4;
  display: block;
  padding: 1rem;
  border-radius: 6px;
  color: #212529;
  font-size: 0.9rem;
}

.page-header h1 {
  text-shadow: 1px 1px 4px rgba(0,0,0,0.3);
}

section h3 {
  color: #0047AB;
}
.border.bg-light button:hover {
  transform: scale(1.05);
  transition: 0.2s;
}
#hasilQuery {
  min-height: 80px;
  font-family: monospace;
  background: #f9f9f9;
}