*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: 'Poppins', sans-serif; font-size: 14px; color: #222; background: #f5f5f5; }
    a { text-decoration: none; color: inherit; }

    /* TOP BAR */
    .topbar {
      background: #1a3c1a;
      color: #cde8c0;
      font-size: 12px;
      padding: 6px 0;
    }
    .topbar .inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .topbar .left {
      display: flex;
      gap: 24px;
      align-items: center;
    }
    .topbar .left span {
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .topbar .right {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .topbar .right a {
      color: #cde8c0;
      font-size: 12px;
    }
    .topbar .right .socials {
      display: flex;
      gap: 8px;
      margin-left: 8px;
    }
    .topbar .right .socials a {
      width: 22px; height: 22px;
      border-radius: 50%;
      background: rgba(255,255,255,0.15);
      display: flex; align-items: center; justify-content: center;
      font-size: 10px;
    }
    .topbar svg { width:13px; height:13px; fill:#cde8c0; flex-shrink:0; }

    /* NAVBAR */
    .navbar {
      background: #fff;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
      position: sticky; top: 0; z-index: 100;
    }
    .navbar .inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 68px;
    }
    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .brand .logo {
      width: 48px; height: 48px;
      background: #2a6e2a;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .brand .logo svg { width: 28px; height: 28px; fill: #fff; }
    .brand .name { line-height: 1.2; }
    .brand .name strong { font-size: 16px; font-weight: 700; color: #1a3c1a; display: block; }
    .brand .name span { font-size: 11px; color: #555; }
    nav { display: flex; align-items: center; gap: 4px; }
    nav a {
      padding: 8px 12px;
      font-size: 13px;
      font-weight: 500;
      color: #333;
      border-radius: 4px;
      transition: color 0.2s;
      display: flex; align-items: center; gap: 4px;
    }
    nav a:hover { color: #2a6e2a; }
    nav a.active { color: #2a6e2a; border-bottom: 2px solid #2a6e2a; }
    nav .caret { font-size: 9px; color: #999; }
    .nav-right { display: flex; align-items: center; gap: 10px; }
    .nav-right .search-btn {
      background: none; border: none; cursor: pointer;
      width: 36px; height: 36px;
      display: flex; align-items: center; justify-content: center;
      border-radius: 50%; transition: background 0.2s;
    }
    .nav-right .search-btn:hover { background: #f0f0f0; }
    .nav-right .search-btn svg { width: 18px; height: 18px; stroke: #333; fill: none; }
    .btn-ppdb {
      background: #2a6e2a;
      color: #fff !important;
      padding: 9px 18px !important;
      border-radius: 6px;
      font-weight: 600;
      font-size: 13px !important;
      transition: background 0.2s;
    }
    .btn-ppdb:hover { background: #1e5a1e !important; }

    /* HERO BANNER */
    .hero-banner {
      background: linear-gradient(rgba(20,50,20,0.72), rgba(20,50,20,0.72)),
                  url('https://images.unsplash.com/photo-1580582932707-520aed937b7b?w=1400&q=80') center/cover no-repeat;
      height: 140px;
      display: flex;
      align-items: flex-end;
      padding-bottom: 24px;
    }
    .hero-banner .inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
      width: 100%;
    }
    .hero-banner h1 { font-size: 30px; font-weight: 700; color: #fff; }
    .breadcrumb { margin-top: 6px; font-size: 13px; color: rgba(255,255,255,0.75); display: flex; gap: 6px; align-items: center; }
    .breadcrumb a { color: rgba(255,255,255,0.75); }
    .breadcrumb span { color: rgba(255,255,255,0.5); }

    /* MAIN CONTENT */
    .page-body {
      max-width: 1200px;
      margin: 32px auto;
      padding: 0 20px;
      display: grid;
      grid-template-columns: 1fr 300px;
      gap: 28px;
    }

    /* FILTER TABS */
    .filter-tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }
    .filter-tabs button {
      padding: 7px 18px;
      border-radius: 6px;
      border: 1px solid #ddd;
      background: #fff;
      font-size: 13px;
      font-family: 'Poppins', sans-serif;
      cursor: pointer;
      font-weight: 500;
      color: #444;
      transition: all 0.2s;
    }
    .filter-tabs button.active {
      background: #2a6e2a;
      color: #fff;
      border-color: #2a6e2a;
    }
    .filter-tabs button:hover:not(.active) { border-color: #2a6e2a; color: #2a6e2a; }

    /* ANNOUNCEMENT CARD */
    .ann-card {
      background: #fff;
      border-radius: 10px;
      border: 1px solid #eee;
      padding: 18px;
      display: flex;
      gap: 16px;
      margin-bottom: 14px;
      align-items: flex-start;
      transition: box-shadow 0.2s;
    }
    .ann-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.09); }
    .ann-icon {
      width: 72px; height: 72px;
      border-radius: 10px;
      flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
    }
    .ann-icon svg { width: 36px; height: 36px; fill: #fff; }
    .ann-icon.beasiswa-prestasi { background: #e84545; }
    .ann-icon.akademik { background: #2a6e2a; }
    .ann-icon.ppdb { background: #2a6e2a; }
    .ann-icon.libur { background: #7c4daf; }
    .ann-icon.beasiswa { background: #2a6e2a; }

    .ann-body { flex: 1; }
    .ann-top-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
    .ann-date-top { font-size: 12px; color: #888; display: flex; align-items: center; gap: 5px; }
    .ann-date-top svg { width:13px; height:13px; stroke:#aaa; fill:none; }

    .ann-badge {
      display: inline-block;
      padding: 2px 10px;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 6px;
    }
    .badge-penting { background: #fee2e2; color: #dc2626; }
    .badge-akademik { background: #dcfce7; color: #16a34a; }
    .badge-ppdb { background: #dcfce7; color: #16a34a; }
    .badge-libur { background: #ede9fe; color: #7c3aed; }
    .badge-beasiswa { background: #dbeafe; color: #2563eb; }

    .ann-title { font-size: 15px; font-weight: 600; color: #1a1a1a; margin-bottom: 6px; }
    .ann-desc { font-size: 13px; color: #666; line-height: 1.55; margin-bottom: 10px; }
    .ann-footer { display: flex; align-items: center; justify-content: space-between; }
    .ann-meta { display: flex; gap: 16px; align-items: center; }
    .ann-meta span { font-size: 12px; color: #888; display: flex; align-items: center; gap: 4px; }
    .ann-meta svg { width:13px; height:13px; fill:#bbb; }
    .btn-detail {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 7px 16px;
      border: 1.5px solid #2a6e2a;
      color: #2a6e2a;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      background: none;
      font-family: 'Poppins', sans-serif;
      transition: all 0.2s;
    }
    .btn-detail:hover { background: #2a6e2a; color: #fff; }
    .btn-detail svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }

    /* PAGINATION */
    .pagination {
      display: flex; gap: 6px; align-items: center;
      justify-content: center;
      margin-top: 24px;
    }
    .pagination button {
      width: 34px; height: 34px;
      border: 1px solid #ddd;
      background: #fff;
      border-radius: 6px;
      font-size: 13px;
      cursor: pointer;
      font-family: 'Poppins', sans-serif;
      color: #444;
      display: flex; align-items: center; justify-content: center;
      transition: all 0.2s;
    }
    .pagination button.active { background: #2a6e2a; color: #fff; border-color: #2a6e2a; }
    .pagination button:hover:not(.active) { border-color: #2a6e2a; color: #2a6e2a; }
    .pagination button svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }

    /* SIDEBAR */
    .sidebar { display: flex; flex-direction: column; gap: 20px; }
    .sidebar-box {
      background: #fff;
      border-radius: 10px;
      border: 1px solid #eee;
      padding: 18px;
    }
    .sidebar-box h3 {
      font-size: 14px;
      font-weight: 600;
      color: #1a3c1a;
      margin-bottom: 14px;
      padding-bottom: 10px;
      border-bottom: 2px solid #e8f5e9;
    }
    .search-bar {
      display: flex; gap: 0;
    }
    .search-bar input {
      flex: 1;
      padding: 9px 12px;
      border: 1px solid #ddd;
      border-right: none;
      border-radius: 6px 0 0 6px;
      font-size: 13px;
      font-family: 'Poppins', sans-serif;
      outline: none;
    }
    .search-bar input::placeholder { color: #bbb; }
    .search-bar button {
      padding: 0 13px;
      background: #2a6e2a;
      border: 1px solid #2a6e2a;
      border-radius: 0 6px 6px 0;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
    }
    .search-bar button svg { width: 15px; height: 15px; stroke: #fff; fill: none; }

    .category-list { list-style: none; }
    .category-list li {
      display: flex; justify-content: space-between; align-items: center;
      padding: 8px 0;
      border-bottom: 1px solid #f5f5f5;
      font-size: 13px; color: #444; cursor: pointer;
    }
    .category-list li:last-child { border-bottom: none; }
    .category-list li.active { color: #2a6e2a; font-weight: 600; }
    .category-list li .count {
      background: #e8f5e9; color: #2a6e2a;
      padding: 1px 8px; border-radius: 20px;
      font-size: 11px; font-weight: 600;
    }
    .category-list li:not(.active) .count { background: #f0f0f0; color: #777; }

    .recent-list { list-style: none; }
    .recent-list li {
      display: flex; align-items: flex-start; gap: 8px;
      padding: 8px 0;
      border-bottom: 1px solid #f5f5f5;
      font-size: 12.5px;
    }
    .recent-list li:last-child { border-bottom: none; }
    .recent-list .dot {
      width: 8px; height: 8px; border-radius: 50%;
      flex-shrink: 0; margin-top: 4px;
    }
    .dot-red { background: #ef4444; }
    .dot-blue { background: #3b82f6; }
    .dot-green { background: #22c55e; }
    .dot-yellow { background: #f59e0b; }
    .dot-purple { background: #a855f7; }
    .recent-list .title { color: #333; flex: 1; line-height: 1.4; }
    .recent-list .date { font-size: 11px; color: #aaa; white-space: nowrap; margin-left: 4px; }

    /* CALENDAR */
    .calendar { }
    .cal-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 12px;
    }
    .cal-header .month-year { font-size: 13px; font-weight: 600; color: #1a3c1a; }
    .cal-header button {
      background: none; border: none; cursor: pointer;
      font-size: 16px; color: #2a6e2a; padding: 2px 6px;
    }
    .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
    .cal-day-name {
      text-align: center; font-size: 11px; font-weight: 600;
      color: #888; padding: 4px 0;
    }
    .cal-cell {
      text-align: center; font-size: 12px; color: #555;
      padding: 6px 0; border-radius: 4px; cursor: pointer;
    }
    .cal-cell:hover { background: #e8f5e9; color: #2a6e2a; }
    .cal-cell.empty { color: transparent; pointer-events: none; }
    .cal-cell.today {
      background: #2a6e2a; color: #fff; font-weight: 700; border-radius: 50%;
      width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
      margin: 0 auto;
    }

    /* FOOTER */
    footer {
      background: #1a3c1a;
      color: #c8dfc8;
      margin-top: 40px;
    }
    .footer-main {
      max-width: 1200px;
      margin: 0 auto;
      padding: 40px 20px 30px;
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr 1.4fr;
      gap: 28px;
    }
    .footer-brand .logo-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
    .footer-brand .logo-wrap .logo {
      width: 42px; height: 42px; background: #2a6e2a; border-radius: 50%;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .footer-brand .logo-wrap .logo svg { width: 24px; height: 24px; fill: #fff; }
    .footer-brand .logo-wrap .name strong { font-size: 14px; color: #fff; display: block; }
    .footer-brand .logo-wrap .name span { font-size: 10px; color: #9fc89f; }
    .footer-brand p { font-size: 12px; color: #9fc89f; line-height: 1.6; margin-bottom: 14px; }
    .footer-socials { display: flex; gap: 8px; }
    .footer-socials a {
      width: 30px; height: 30px; border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.2);
      display: flex; align-items: center; justify-content: center;
      color: #cde8c0; font-size: 11px; font-weight: 700;
      transition: all 0.2s;
    }
    .footer-socials a:hover { background: #2a6e2a; border-color: #2a6e2a; }
    .footer-col h4 { font-size: 13px; font-weight: 600; color: #fff; margin-bottom: 14px; }
    .footer-col ul { list-style: none; }
    .footer-col ul li { margin-bottom: 8px; }
    .footer-col ul li a { font-size: 12px; color: #9fc89f; transition: color 0.2s; }
    .footer-col ul li a:hover { color: #fff; }
    .footer-col .contact-item { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px; }
    .footer-col .contact-item svg { width:13px; height:13px; fill:#9fc89f; flex-shrink:0; margin-top:2px; }
    .footer-col .contact-item span { font-size: 12px; color: #9fc89f; }
    .newsletter-desc { font-size: 12px; color: #9fc89f; margin-bottom: 12px; line-height: 1.5; }
    .newsletter-form { display: flex; gap: 0; }
    .newsletter-form input {
      flex: 1; padding: 8px 12px;
      background: rgba(255,255,255,0.1);
      border: 1px solid rgba(255,255,255,0.2);
      border-right: none;
      border-radius: 6px 0 0 6px;
      color: #fff; font-size: 12px;
      font-family: 'Poppins', sans-serif;
      outline: none;
    }
    .newsletter-form input::placeholder { color: rgba(255,255,255,0.4); }
    .newsletter-form button {
      padding: 8px 14px;
      background: #2a6e2a; border: 1px solid #2a6e2a;
      border-radius: 0 6px 6px 0;
      color: #fff; font-size: 12px; font-weight: 500;
      cursor: pointer; font-family: 'Poppins', sans-serif;
      transition: background 0.2s;
    }
    .newsletter-form button:hover { background: #1e5a1e; }
    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,0.1);
    }
    .footer-bottom .inner {
      max-width: 1200px; margin: 0 auto;
      padding: 16px 20px;
      display: flex; align-items: center; justify-content: space-between;
    }
    .footer-bottom span { font-size: 12px; color: #9fc89f; }
    .footer-bottom .links { display: flex; gap: 16px; }
    .footer-bottom .links a { font-size: 12px; color: #9fc89f; }
    .footer-bottom .links a:hover { color: #fff; }
    .back-top {
      position: fixed; bottom: 24px; right: 24px;
      width: 38px; height: 38px;
      background: #2a6e2a; color: #fff;
      border: none; border-radius: 6px;
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      font-size: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.2);
      transition: background 0.2s;
    }
    .back-top:hover { background: #1e5a1e; }
    .back-top svg { width: 16px; height: 16px; stroke: #fff; fill: none; }