:root{
    --deep:      #051428;
    --trench:    #071c38;
    --navy:      #0c3466;
    --ocean:     #145a9e;
    --aqua:      #2f9bc9;
    --foam:      #a9e6df;
    --pearl:     #eef8fb;
    --gleam:     #f2cf8e;
    --ink:       #06172c;
    --line:      rgba(169,230,223,0.18);
    --shadow:    0 20px 60px rgba(2,12,26,0.45);
  }
  *{ margin:0; padding:0; box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    font-family:'Manrope', sans-serif;
    background:var(--deep);
    color:var(--pearl);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{ font-family:'Fraunces', serif; font-weight:600; letter-spacing:-0.01em; }
  a{ color:inherit; text-decoration:none; }
  ::selection{ background:var(--gleam); color:var(--ink); }

  .wrap{ max-width:1180px; margin:0 auto; padding:0 32px; }

  .eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-size:0.72rem; letter-spacing:0.28em; text-transform:uppercase;
    color:var(--gleam); font-weight:700;
  }
  .eyebrow::before{ content:""; width:26px; height:1px; background:var(--gleam); display:inline-block; }

  /* ---------- HEADER ---------- */
  header.page-head{
    position:relative; padding:70px 0 50px; text-align:center; overflow:hidden;
    background:
      radial-gradient(ellipse 120% 60% at 50% 0%, #1c6ba8 0%, transparent 60%),
      linear-gradient(180deg, #0d3f74 0%, #082347 55%, var(--deep) 100%);
    border-bottom:1px solid var(--line);
  }
  .back-link{
    position:absolute; top:28px; left:32px;
    display:inline-flex; align-items:center; gap:8px;
    font-size:0.78rem; font-weight:700; letter-spacing:0.04em;
    color:var(--foam); border:1px solid var(--line); border-radius:999px;
    padding:8px 16px 8px 14px; background:rgba(7,28,56,0.4); transition:.3s;
  }
  .back-link:hover{ background:var(--aqua); color:var(--pearl); border-color:transparent; }
  header.page-head h1{ font-size:clamp(1.8rem, 4.5vw, 2.8rem); margin:16px 0 12px; }
  header.page-head p{ color:rgba(238,248,251,0.7); font-size:0.95rem; max-width:520px; margin:0 auto; }

  /* ---------- TRAVEL TABLE ---------- */
  main{ padding:60px 0 120px; }
  .travel-table-wrap{
    overflow-x:auto; border:1px solid var(--line); border-radius:20px;
    background:linear-gradient(160deg, rgba(255,255,255,0.03), rgba(7,28,56,0.4));
    box-shadow:var(--shadow); -webkit-overflow-scrolling:touch;
  }
  table.travel-table{ width:100%; border-collapse:collapse; min-width:860px; font-size:0.83rem; }
  .travel-table thead th{
    position:sticky; top:0; background:#0c3466; color:var(--pearl); text-align:left;
    padding:14px 16px; font-size:0.68rem; letter-spacing:0.09em; text-transform:uppercase;
    font-weight:800; white-space:nowrap; z-index:1;
  }
  .travel-table tbody td{
    padding:12px 16px; border-bottom:1px solid var(--line);
    color:rgba(238,248,251,0.85); vertical-align:top; line-height:1.5;
  }
  .travel-table tbody tr:last-child td{ border-bottom:none; }
  .travel-table tbody tr:hover td{ background:rgba(169,230,223,0.06); }
  .travel-table td.col-no{ text-align:center; width:44px; color:var(--gleam); font-weight:700; }
  .travel-table td.col-date{ white-space:nowrap; color:var(--foam); font-weight:600; }
  .travel-table td.col-type{ white-space:nowrap; }
  .travel-table .badge{
    display:inline-block; font-size:0.62rem; font-weight:800; letter-spacing:0.05em;
    text-transform:uppercase; color:var(--ink); background:var(--foam);
    border-radius:999px; padding:3px 10px;
  }

  /* ---------- REKAP SECTIONS ---------- */
  .rekap-sec{ padding:56px 0; border-top:1px dashed var(--line); }
  .rekap-sec:first-of-type{ border-top:none; padding-top:0; }
  .rekap-head{ margin-bottom:22px; }
  .rekap-head h2{ font-size:clamp(1.25rem, 2.6vw, 1.6rem); margin:10px 0 6px; }
  .rekap-head p{ color:rgba(238,248,251,0.6); font-size:0.85rem; }
  .rekap-table-wrap{
    overflow-x:auto; border:1px solid var(--line); border-radius:18px;
    background:linear-gradient(160deg, rgba(255,255,255,0.03), rgba(7,28,56,0.4));
    box-shadow:var(--shadow); -webkit-overflow-scrolling:touch; margin-bottom:16px;
  }
  table.rekap-table{ width:100%; border-collapse:collapse; min-width:640px; font-size:0.82rem; }
  .rekap-table thead th{
    background:#0c3466; color:var(--pearl); text-align:left;
    padding:12px 14px; font-size:0.66rem; letter-spacing:0.08em; text-transform:uppercase;
    font-weight:800; white-space:nowrap;
  }
  .rekap-table tbody td{
    padding:10px 14px; border-bottom:1px solid var(--line);
    color:rgba(238,248,251,0.85); vertical-align:top; line-height:1.5;
  }
  .rekap-table tbody tr:last-child td{ border-bottom:none; }
  .rekap-table tbody tr:hover td{ background:rgba(169,230,223,0.06); }
  .rekap-table td.col-no{ text-align:center; width:38px; color:var(--gleam); font-weight:700; }
  .rekap-table td.col-date{ white-space:nowrap; color:var(--foam); font-weight:600; }
  .rekap-table tr.jumlah-row td{ background:rgba(242,207,142,0.08); font-weight:800; color:var(--gleam); }
  .rekap-note{ font-size:0.78rem; color:rgba(238,248,251,0.55); line-height:1.7; }
  .rekap-note b{ color:var(--foam); }
  .rekap-two-col{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
  .month-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
  .month-card h3{
    font-family:'Manrope',sans-serif; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--ink); background:var(--gleam); padding:8px 12px; border-radius:10px 10px 0 0; font-weight:800;
  }
  .month-card{ border:1px solid var(--line); border-radius:10px; overflow:hidden; background:rgba(255,255,255,0.02); }
  .month-card table{ width:100%; border-collapse:collapse; font-size:0.72rem; }
  .month-card th{ background:rgba(12,52,102,0.7); color:var(--pearl); padding:5px 8px; text-align:left; font-weight:700; }
  .month-card td{ padding:5px 8px; border-top:1px solid var(--line); color:rgba(238,248,251,0.8); }
  .month-card tr.jumlah-row td{ background:rgba(242,207,142,0.1); font-weight:800; color:var(--gleam); }
  .quick-nav{
    display:flex; flex-wrap:wrap; gap:8px; margin:0 0 46px; padding-bottom:26px; border-bottom:1px solid var(--line);
  }
  .quick-nav a{
    font-size:0.72rem; font-weight:700; color:var(--foam); border:1px solid var(--line);
    border-radius:999px; padding:7px 14px; transition:.25s;
  }
  .quick-nav a:hover{ background:var(--aqua); color:var(--pearl); border-color:transparent; }

  @media (max-width:900px){
    .rekap-two-col{ grid-template-columns:1fr; }
    .month-grid{ grid-template-columns:repeat(2, 1fr); }
  }
  @media (max-width:520px){
    .month-grid{ grid-template-columns:1fr; }
  }

  /* ---------- FOOTER ---------- */
  footer{ background:#030d1c; padding:40px 0 28px; text-align:center; border-top:1px solid var(--line); }
  footer p{ font-size:0.78rem; color:rgba(238,248,251,0.45); }
  footer .fandom{ color:var(--gleam); font-weight:700; }

  @media (max-width:640px){
    .wrap{ padding:0 18px; }
    header.page-head{ padding:80px 0 40px; }
    .back-link{ top:18px; left:18px; padding:7px 14px 7px 12px; font-size:0.72rem; }
  }