* {margin:0; padding:0; box-sizing:border-box;}
body {font-family:"Segoe UI", Arial, sans-serif; background:#f9f9f9;}

/* HEADER */
header {width:100%; z-index:999; position:relative;}
.container {max-width:1100px; margin:0 auto; width:100%; padding:0 15px;}

/* HEADER ATAS */
.header-top-wrapper {background:#f0f0f0; color:#333; width:100%;}
.header-top {display:flex; justify-content:space-between; align-items:center; padding:10px 0; flex-wrap:wrap;}
.logo-nama {display:flex; align-items:center; gap:12px;}
.logo-nama img {height:30px;}
.logo-nama .nama-sekolah {display:flex; flex-direction:column; line-height:1.2;}
.logo-nama .nama-sekolah h1 {font-size:20px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#006400;}
.logo-nama .nama-sekolah p {font-size:15px; font-style:italic; color:#444; font-weight:600;}
.header-info {display:flex; flex-direction:column; align-items:flex-end; gap:6px;}
.social-icons {display:flex; gap:10px;}
.social-icons a {color:#006400; font-size:18px; width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#e6e6e6; transition:0.3s; text-decoration:none;}
.social-icons a:hover {background:#ffcc00; color:#003300; transform:translateY(-2px);}
.info-links {display:flex; gap:15px; font-size:14px; font-weight:600;}
.info-links a {color:#006400; text-decoration:none; transition:0.3s;}
.info-links a:hover {color:#000;}
.header-separator {width:100%; height:4px; background:#ffcc00;}

/* HEADER BAWAH (MENU) */
.header-bottom {background:#006400; position:relative;}
.main-menu {display:flex; justify-content:flex-start; flex-wrap:wrap; gap:25px; padding:12px 0;}
.main-menu > li {position:relative; list-style:none;}
.main-menu > li > a {text-decoration:none; color:#fff; font-size:15px; font-weight:600; letter-spacing:0.3px; transition:0.3s; padding:8px 5px; display:inline-block;}
.main-menu > li > a:hover {color:#ffcc00;}
.dropdown {position: fixed; left: 0; right: 0; top: 0; background: #fff; box-shadow: 0 5px 20px rgba(0,0,0,0.15); border-top: 2px solid #ffcc00; display: none; padding: 25px 0; z-index: 998;}
.dropdown .content {max-width:1060px; margin:0 auto; display:grid; grid-template-columns:repeat(4, 1fr); gap:25px;}
.dropdown h3 {color:#006400; font-size:16px; font-weight:700; margin-bottom:10px;}
.dropdown ul {list-style:none;}
.dropdown ul li a {display:block; text-decoration:none; color:#333; font-size:14px; padding:4px 0; transition:0.3s;}
.dropdown ul li a:hover {color:#006400; padding-left:5px;}
.main-menu > li .dropdown-hover-area {position: absolute; top: 100%; left: 0; right: 0; height: 15px; display: block;}
.main-menu > li:hover .dropdown, .main-menu > li .dropdown:hover {display: block; animation: fadeIn 0.3s ease-in-out;}
@keyframes fadeIn {from {opacity:0; transform:translateY(0);} to {opacity:1; transform:translateY(0);}}



/* SEARCH POPUP MODAL */
.search-popup-overlay {
  display: none;
  position: fixed;
  inset:0;
  background: rgba(0,0,0,0.5);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.search-popup {
  background:#fff;
  padding:20px 25px;
  border-radius:8px;
  max-width:500px;
  width:90%;
  box-shadow:0 8px 25px rgba(0,0,0,0.25);
  position: relative;
}
.search-popup .close-search {
  position:absolute; top:10px; right:10px;
  background:none; border:none; font-size:22px; cursor:pointer; color:#333;
}

/* SEARCH BOX WITH ICONS INSIDE INPUT */
.search-box {position:relative; width:100%;}
.search-box input {
  width:100%;
  padding:10px 45px 10px 45px; /* left for logo, right for search */
  border:1px solid #ccc;
  border-radius:25px;
  font-size:16px;
}
.search-box img.search-logo {
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  height:30px;
}
.search-box .search-btn {
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  background:none;
  border:none;
  font-size:18px;
  cursor:pointer;
  color:#006400;
}