body{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial;line-height:1.4;margin:18px;background:#f6f8fb;color:#122}
    .container{max-width:980px;margin:0 auto;background:#fff;padding:18px;border-radius:10px;box-shadow:0 6px 20px rgba(10,40,80,.06)}
    h1{margin:0 0 8px;font-size:20px}
    .meta{color:#556; margin-bottom:12px}
    .controls{margin:12px 0 18px}
    button{background:#0077cc;color:#fff;border:0;padding:10px 14px;border-radius:8px;cursor:pointer}
    button:disabled{opacity:.6;cursor:not-allowed}
    .info-grid{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:10px}
    .info-card{background:#f8fbff;padding:10px;border-radius:8px;border:1px solid #e6f2fb;min-width:140px}
    table{width:100%;border-collapse:collapse;margin-top:10px}
    th{background:#0077cc;color:#fff;padding:10px;text-align:left;border-radius:4px}
    td{padding:10px;border-bottom:1px solid #eef6fb}
    .link-btn{background:none;border:0;color:#0077cc;cursor:pointer;font-weight:600}
    .muted{color:#667}

    /* modal */
    .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;z-index:2000}
    .modal{background:#fff;border-radius:12px;max-width:540px;width:92%;max-height:80vh;overflow:auto;box-shadow:0 30px 80px rgba(5,20,40,.3)}
    .modal-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid #eef6fb}
    .modal-body{padding:12px 14px}
    .modal-close{background:none;border:0;font-size:20px;cursor:pointer;color:#667}
    .schedule-list{list-style:none;padding:0;margin:0}
    .schedule-list li{padding:8px 0;border-bottom:1px solid #f1f8fc}
    .hidden{display:none}
    .error{color:#b00;background:#fee;padding:8px;border-radius:6px;border:1px solid #f5c2c2}
    /* Loading overlay */
    .loading-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.4);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 9999;
    }
    .loading-overlay.active {
      display: flex;
    }
    .spinner {
      border: 4px solid rgba(255, 255, 255, 0.3);
      border-top: 4px solid #0077cc;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      animation: spin 1s linear infinite;
    }
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

/* Reset kecil */
    *,*::before,*::after{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      line-height:1.45;
      color:#222;
      background: #f6f8fb;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }

    /* hide mobile menu by default (desktop) */
    .menu { display: none; }

    :root{
      --accent:#0077cc;
      --accent-2:#00a3d9;
      --muted:#7b8a97;
      --card:#ffffff;
      --radius:10px;
      --maxw:1100px;
    }

    .container{
      max-width:var(--maxw);
      margin:20px auto;
      padding:24px;
    }

    /* Header / Nav */
    header.site-header{
      background: linear-gradient(90deg,var(--accent),var(--accent-2));
      color:#fff;
      padding:12px 0;
      position:sticky;
      top:0;
      z-index:40;
      box-shadow:0 4px 18px rgba(0,0,0,.08);
    }
    .header-inner{
      display:flex;
      gap:16px;
      align-items:center;
      justify-content:space-between;
      max-width:var(--maxw);
      margin:0 auto;
      padding:0 24px;
    }
    .brand{
      display:flex;
      gap:12px;
      align-items:center;
      text-decoration:none;
      color:inherit;
    }
    .logo{
      width:44px;
      height:44px;
      background:rgba(255,255,255,.12);
      border-radius:10px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:700;
      font-size:18px;
    }
    .brand h1{
      margin:0;
      font-size:18px;
      letter-spacing:.2px;
    }
    /* Nav */
    nav.main-nav{
      display:flex;
      gap:12px;
      align-items:center;
    }
    nav a{
      color:#fff;
      text-decoration:none;
      padding:8px 12px;
      border-radius:8px;
      font-size:14px;
    }
    nav a:hover{background:rgba(255,255,255,.08)}

    /* Responsive nav (checkbox hack) */
    .menu-toggle{
      display:none;
    }
    .hamburger{
      display:none;
      cursor:pointer;
      width:44px;
      height:44px;
      border-radius:8px;
      align-items:center;
      justify-content:center;
      background:rgba(255,255,255,.08);
    }
    .hamburger span{
      display:block;
      width:20px;
      height:2px;
      background:#fff;
      position:relative;
    }
    .hamburger span::before,.hamburger span::after{
      content:"";
      position:absolute;
      left:0;
      width:20px;
      height:2px;
      background:#fff;
      transition:transform .25s;
    }
    .hamburger span::before{top:-6px}
    .hamburger span::after{top:6px}

    /* Hero */
    .hero{
      padding:15px 0;
      display:flex;
      align-items:center;
      justify-content:center;
      background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
    }
    .hero-inner{
      width: 980px;
      text-align:center;
      padding:28px;
      background:linear-gradient(180deg,#ffffff, #fbfdff);
      border-radius:var(--radius);
      box-shadow:0 8px 30px rgba(27,47,72,.06);
    }
    .hero h2{margin:0 0 12px;font-size:28px;color:#0b2540}
    .hero p{margin:0 0 18px;color:var(--muted)}
    .btn{
      display:inline-block;
      padding:12px 18px;
      background:var(--accent);
      color:#fff;
      text-decoration:none;
      border-radius:8px;
      font-weight:600;
    }
    .btn.secondary{
      background:#e7f7ff;
      color:var(--accent-2);
      margin-left:8px;
      border:1px solid rgba(0,0,0,.04);
    }

    /* Features grid */
    .grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:18px;
      margin-top:24px;
    }
    .card{
      background:var(--card);
      padding:18px;
      border-radius:12px;
      box-shadow:0 6px 18px rgba(19,40,64,.04);
    }
    .card h3{margin:0 0 8px;font-size:16px;color:#0b2540}
    .card p{margin:0;color:var(--muted);font-size:14px}

    /* Section title */
    .section-title{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin:28px 0 12px;
    }
    .section-title h3{margin:0;font-size:18px;color:#14324a}

    /* Two column layout */
    .two-col{
      display:grid;
      grid-template-columns:2fr 1fr;
      gap:18px;
      align-items:start;
    }

    /* Contact card / form */
    form.contact{
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    input[type="text"],input[type="email"],textarea{
      padding:10px 12px;
      border-radius:8px;
      border:1px solid #e3eef8;
      background:#fbfeff;
      resize:vertical;
      font-size:14px;
    }
    textarea{min-height:120px}
    .footnote{font-size:13px;color:var(--muted)}

    /* Footer */
    footer.site-footer{
      margin-top:36px;
      padding:24px 0;
      color:#5b6b78;
      font-size:14px;
    }
    .footer-inner{
      display:flex;
      gap:12px;
      align-items:center;
      justify-content:space-between;
      max-width:var(--maxw);
      margin:0 auto;
      padding:0 24px;
    }

    /* small screens */
    @media (max-width:880px){
      .grid{grid-template-columns:repeat(2,1fr)}
      .two-col{grid-template-columns:1fr}
    }
    @media (max-width:640px){
      .grid{grid-template-columns:1fr}
      .header-inner{padding:0 12px}
      nav.main-nav{display:none}
      .hamburger{display:flex}
      .menu-toggle:checked + .hamburger span{background:transparent}
      .menu-toggle:checked + .hamburger span::before{transform:rotate(45deg) translate(4px,4px)}
      .menu-toggle:checked + .hamburger span::after{transform:rotate(-45deg) translate(4px,-4px)}
      /* When checked, show the nav as vertical menu */
      .menu{
        display:none;
        position:absolute;
        top:64px;
        right:12px;
        background:var(--card);
        box-shadow:0 10px 30px rgba(11,38,64,.12);
        border-radius:10px;
        overflow:hidden;
        width:200px;
      }
      .menu a{display:block;padding:12px 16px;color:#14324a}
      .menu-toggle:checked ~ .menu{display:block}
    }

    /* small helpers */
    .muted{color:var(--muted)}
    .center{text-align:center}

    /* styles for selects and inline form in hero */
    select {
    padding:10px 12px;
    border-radius:8px;
    border:1px solid #e3eef8;
    background:#fbfeff;
    font-size:14px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    }
    .select-row{
    display:flex;
    gap:10px;
    justify-content:center;
    flex-wrap:wrap;
    margin:12px 0;
    }
    select.small{width:220px}
    select.large{width:220px}
    .hero-form-actions{display:flex;gap:10px;justify-content:center;align-items:center;margin-top:8px}

    #backToTop { position: fixed; right: 18px; bottom: 18px; width:48px; height:48px; border-radius:50%; background:#0077cc; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,.2); cursor:pointer; z-index:10000; opacity:0; transform:translateY(20px); transition:opacity .2s, transform .2s; }
    #backToTop.show { opacity:1; transform:translateY(0); }
    #backToTop:focus{outline:2px solid rgba(255,255,255,.2)}
    #backToTop svg{width:20px;height:20px}