:root{
    --navy-950:#061A33;
    --navy-900:#0B2545;
    --navy-800:#123B6D;
    --navy-700:#1A4B85;
    --blue-600:#1D5EA8;
    --blue-500:#2B72C4;
    --blue-100:#E7F0FA;
    --gold-700:#A87A1F;
    --gold-600:#C6952C;
    --gold-400:#E8C468;
    --gold-100:#FBF1DC;
    --cream-50:#FBF8F1;
    --ink-900:#12202E;
    --ink-700:#2C3E4F;
    --gray-500:#5B6B7A;
    --gray-300:#B7C3CE;
    --white:#FFFFFF;
    --radius-sm:6px;
    --radius-md:10px;
    --radius-lg:18px;
    --shadow-sm:0 2px 8px rgba(11,37,69,0.08);
    --shadow-md:0 8px 28px rgba(11,37,69,0.14);
    --font-display:'Fraunces', Georgia, serif;
    --font-body:'Plus Jakarta Sans', -apple-system, sans-serif;
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:var(--font-body);
    color:var(--ink-900);
    background:var(--white);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%; display:block;}
  a{color:inherit; text-decoration:none;}
  ul{list-style:none;}
  button{font-family:inherit; cursor:pointer;}
  .container{
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:0 24px;
  }
  section{position:relative;}
  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:12.5px;
    font-weight:700;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--gold-700);
  }
  .eyebrow::before{
    content:'';
    width:22px;
    height:2px;
    background:var(--gold-600);
    display:inline-block;
  }
  h1,h2,h3,h4{
    font-family:var(--font-display);
    font-weight:600;
    color:var(--navy-900);
    line-height:1.2;
  }
  .section-head{
    max-width:640px;
    margin-bottom:44px;
  }
  .section-head h2{
    font-size:clamp(26px,3.4vw,38px);
    margin-top:10px;
  }
  .section-head p{
    color:var(--gray-500);
    margin-top:14px;
    font-size:15.5px;
  }
  .btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:13px 26px;
    border-radius:999px;
    font-weight:600;
    font-size:14.5px;
    border:1.5px solid transparent;
    transition:all .2s ease;
    white-space:nowrap;
  }
  .btn-gold{
    background:linear-gradient(180deg,var(--gold-400),var(--gold-600));
    color:var(--navy-950);
    box-shadow:0 6px 18px rgba(198,149,44,0.35);
  }
  .btn-gold:hover{transform:translateY(-2px); box-shadow:0 10px 22px rgba(198,149,44,0.45);}
  .btn-outline{
    border-color:rgba(255,255,255,0.4);
    color:var(--white);
  }
  .btn-outline:hover{background:rgba(255,255,255,0.1); border-color:var(--white);}
  .btn-navy{
    background:var(--navy-800);
    color:var(--white);
  }
  .btn-navy:hover{background:var(--navy-900); transform:translateY(-2px);}

  /* === TOP UTILITY BAR === */
  .topbar{
    background:var(--navy-950);
    color:var(--gray-300);
    font-size:12.5px;
  }
  .topbar .container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-top:8px;
    padding-bottom:8px;
    gap:16px;
  }
  .topbar-left{display:flex; gap:20px; flex-wrap:wrap;}
  .topbar-left span{display:inline-flex; align-items:center; gap:6px;}
  .topbar-right{display:flex; gap:14px; align-items:center;}
  .topbar-right a{
    width:26px; height:26px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,0.25);
    display:flex; align-items:center; justify-content:center;
    transition:.2s;
  }
  .topbar-right a:hover{background:var(--gold-600); border-color:var(--gold-600); color:var(--navy-950);}
  .font-size-toggle{display:flex; gap:4px; align-items:center; border-left:1px solid rgba(255,255,255,0.2); padding-left:14px; margin-left:4px;}
  .font-size-toggle button{
    background:transparent; border:1px solid rgba(255,255,255,0.25); color:var(--gray-300);
    width:22px; height:22px; border-radius:5px; font-size:11px; line-height:1;
  }

  /* === HEADER === */
  header.site-header{
    background:var(--white);
    border-bottom:1px solid #EDEEF1;
    position:sticky; top:0; z-index:100;
    box-shadow:0 1px 0 rgba(11,37,69,0.03);
  }
  .header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 0;
    min-height:76px;
  }
  .brand{display:flex; align-items:center; gap:12px; margin-right:32px;}
  .brand-mark{
    width:auto; height:56px;
    max-width:180px;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .brand-mark img{width:auto; height:54px; max-height:100%; object-fit:contain;}
  .brand-mark svg{width:26px; height:26px;}
  .brand-text .kop{
    font-size:10px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--gray-500);
    font-weight:700;
  }
  .brand-text .nama{
    font-family:var(--font-display);
    font-size:18px;
    font-weight:700;
    color:var(--navy-900);
    letter-spacing:0.01em;
  }
  nav.main-nav{display:flex; align-items:center; gap:2px;}
  nav.main-nav > ul{display:flex; align-items:center; gap:2px;}
  nav.main-nav li{position:relative;}
  nav.main-nav a{
    padding:9px 15px;
    font-size:14px;
    font-weight:600;
    color:var(--ink-700);
    border-radius:999px;
    transition:.2s;
    position:relative;
    display:flex;
    align-items:center;
    gap:5px;
  }
  nav.main-nav a:hover{color:var(--navy-900); background:var(--blue-100);}
  nav.main-nav > ul > li > a{white-space:nowrap; flex-shrink:0;}
  nav.main-nav a.active{color:var(--navy-900);}
  nav.main-nav a.active::after{
    content:'';
    position:absolute; left:15px; right:15px; bottom:3px;
    height:2px; background:var(--gold-600); border-radius:2px;
  }
  nav.main-nav li.has-dropdown > a .caret{
    width:6px; height:6px;
    border-right:1.6px solid currentColor;
    border-bottom:1.6px solid currentColor;
    transform:rotate(45deg);
    margin-top:-2px;
    transition:transform .2s;
    flex-shrink:0;
  }
  nav.main-nav li.has-dropdown:hover > a .caret,
  nav.main-nav li.has-dropdown:focus-within > a .caret{transform:rotate(225deg); margin-top:2px;}

  /* Dropdown panels */
  .dropdown-panel{
    position:absolute;
    top:calc(100% + 10px);
    left:0;
    background:var(--white);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-md);
    border:1px solid #ECEEF1;
    padding:14px;
    min-width:250px;
    opacity:0;
    visibility:hidden;
    transform:translateY(8px);
    transition:opacity .18s ease, transform .18s ease, visibility .18s;
    z-index:200;
  }
  .dropdown-panel.mega{
    display:flex;
    gap:32px;
    padding:24px;
  }
  li.has-dropdown:hover > .dropdown-panel,
  li.has-dropdown:focus-within > .dropdown-panel{
    opacity:1; visibility:visible; transform:translateY(0);
  }
  .dropdown-group{width:230px; flex-shrink:0;}
  .dropdown-group h6{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.07em;
    color:var(--gold-700);
    font-weight:800;
    margin-bottom:10px;
    padding:0 10px;
  }
  .dropdown-panel a{
    display:block;
    padding:8px 10px;
    font-size:13.5px;
    font-weight:500;
    color:var(--ink-700);
    border-radius:8px;
    white-space:normal;
    line-height:1.35;
  }
  .dropdown-panel a:hover{background:var(--blue-100); color:var(--navy-900);}
  .dropdown-panel a.active::after{display:none;}
  .header-cta{display:flex; align-items:center; gap:10px; margin-left:24px;}
  .icon-btn{
    width:40px; height:40px;
    border-radius:50%;
    border:1px solid #E3E6EA;
    background:var(--white);
    display:flex; align-items:center; justify-content:center;
    color:var(--navy-800);
    transition:.2s;
    flex-shrink:0;
  }
  .icon-btn:hover{background:var(--blue-100); border-color:var(--blue-100);}
  .icon-btn svg{width:18px; height:18px;}
  .header-cta .btn{
    padding:9.5px 20px;
    font-size:13.5px;
    gap:7px;
  }
  .btn-outline-navy{
    border:1.5px solid var(--navy-800);
    color:var(--navy-800);
    background:transparent;
  }
  .btn-outline-navy:hover{background:var(--navy-800); color:var(--white);}

  /* === OVERLAYS (search & login) === */
  .overlay{
    position:fixed; inset:0;
    background:rgba(6,26,51,0.55);
    backdrop-filter:blur(3px);
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding:110px 20px 20px;
    opacity:0; visibility:hidden;
    transition:opacity .2s ease, visibility .2s;
    z-index:300;
  }
  .overlay.active{opacity:1; visibility:visible;}
  .overlay.center{align-items:center; padding:20px;}

  .search-box{
    background:var(--white);
    width:100%; max-width:640px;
    border-radius:var(--radius-lg);
    box-shadow:0 30px 70px rgba(0,0,0,0.35);
    padding:28px;
    position:relative;
    transform:translateY(-12px);
    transition:transform .25s ease;
  }
  .overlay.active .search-box{transform:translateY(0);}
  .search-form{
    display:flex; align-items:center; gap:12px;
    border:2px solid var(--navy-900);
    border-radius:999px;
    padding:6px 8px 6px 20px;
  }
  .search-form svg{width:20px; height:20px; stroke:var(--navy-800); flex-shrink:0;}
  .search-form input{
    flex:1; border:none; outline:none;
    font-family:inherit; font-size:15.5px;
    padding:10px 0;
    background:transparent;
  }
  .search-suggestions{
    margin-top:18px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    font-size:13px; color:var(--gray-500);
  }
  .search-suggestions a{
    background:var(--blue-100); color:var(--navy-800);
    padding:6px 14px; border-radius:999px; font-weight:600; font-size:12.5px;
  }
  .search-suggestions a:hover{background:var(--gold-100); color:var(--gold-700);}

  .modal-box{
    background:var(--white);
    width:100%; max-width:400px;
    border-radius:var(--radius-lg);
    box-shadow:0 30px 70px rgba(0,0,0,0.35);
    padding:36px 32px 30px;
    position:relative;
    transform:translateY(-12px);
    transition:transform .25s ease;
  }
  .overlay.active .modal-box{transform:translateY(0);}
  .overlay-close{
    position:absolute; top:16px; right:16px;
    width:34px; height:34px; border-radius:50%;
    border:1px solid #E3E6EA; background:var(--white);
    display:flex; align-items:center; justify-content:center;
    font-size:14px; color:var(--gray-500);
  }
  .overlay-close:hover{background:#F3F4F6;}
  .modal-head{text-align:center; margin-bottom:26px;}
  .modal-head .brand-mark{margin:0 auto 14px;}
  .modal-head h3{font-size:21px; margin-bottom:6px;}
  .modal-head p{font-size:13.5px; color:var(--gray-500);}
  .login-form label{
    display:block; font-size:13px; font-weight:700; color:var(--ink-700);
    margin-bottom:16px;
  }
  .login-form input{
    display:block; width:100%; margin-top:7px;
    padding:12px 14px; border:1.5px solid #E3E6EA; border-radius:var(--radius-sm);
    font-family:inherit; font-size:14.5px; outline:none; transition:.2s;
  }
  .login-form input:focus{border-color:var(--navy-800);}
  .password-wrap{position:relative;}
  .password-wrap input{padding-right:44px !important;}
  .password-toggle{
    position:absolute; top:calc(50% + 3px); right:6px;
    transform:translateY(-50%);
    width:32px; height:32px; padding:0;
    display:flex; align-items:center; justify-content:center;
    background:transparent; border:0; border-radius:6px;
    color:var(--gray-500); cursor:pointer; transition:.15s;
  }
  .password-toggle:hover{color:var(--navy-800); background:rgba(11,37,69,0.05);}
  .password-toggle:focus-visible{outline:2px solid var(--navy-800); outline-offset:1px;}
  .password-toggle svg{width:18px; height:18px; display:block;}
  .password-toggle svg[hidden]{display:none;}
  .login-row{
    display:flex; justify-content:space-between; align-items:center;
    margin:-4px 0 20px; font-size:13px;
  }
  .login-row .checkbox{
    display:flex; align-items:center; gap:6px; font-weight:500; color:var(--gray-500); margin:0;
  }
  .login-row .checkbox input{width:auto; margin:0;}
  .login-row .forgot-link{color:var(--blue-600); font-weight:600;}
  .login-note{text-align:center; font-size:13px; color:var(--gray-500); margin-top:20px;}
  .login-note a{color:var(--blue-600); font-weight:700;}
  .menu-toggle{
    display:none;
    width:42px; height:42px;
    border-radius:10px;
    border:1px solid #E3E6EA;
    background:var(--white);
    align-items:center; justify-content:center;
  }
  .menu-toggle span, .menu-toggle span::before, .menu-toggle span::after{
    content:''; display:block; width:18px; height:2px; background:var(--navy-900); position:relative; transition:.2s;
  }
  .menu-toggle span::before{position:absolute; top:-6px;}
  .menu-toggle span::after{position:absolute; top:6px;}

  /* === HERO === */
  .hero{
    background:
      radial-gradient(1100px 500px at 85% -10%, rgba(198,149,44,0.18), transparent 60%),
      linear-gradient(160deg, var(--navy-900) 0%, var(--navy-950) 85%);
    color:var(--white);
    overflow:hidden;
    padding:78px 0 0;
    position:relative;
  }
  .hero::after{
    content:'';
    position:absolute;
    inset:0;
    z-index:1;
    opacity:0.08;
    pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg width='80' height='80' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='p' patternUnits='userSpaceOnUse' width='80' height='80'%3E%3Ccircle cx='40' cy='40' r='1.5' fill='%23d4a94e'/%3E%3Ccircle cx='0' cy='0' r='1.5' fill='%23d4a94e'/%3E%3Ccircle cx='80' cy='0' r='1.5' fill='%23d4a94e'/%3E%3Ccircle cx='0' cy='80' r='1.5' fill='%23d4a94e'/%3E%3Ccircle cx='80' cy='80' r='1.5' fill='%23d4a94e'/%3E%3Cpath d='M40 10 L44 20 L54 20 L46 26 L49 36 L40 30 L31 36 L34 26 L26 20 L36 20 Z' fill='none' stroke='%23d4a94e' stroke-width='0.6'/%3E%3Cpath d='M0 60 Q20 50 40 60 Q60 70 80 60' fill='none' stroke='%23d4a94e' stroke-width='0.5'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='80' height='80' fill='url(%23p)'/%3E%3C/svg%3E");
    background-size:80px 80px;
  }
  .hero::before{
    content:'';
    position:absolute;
    inset:0;
    z-index:0;
    opacity:0.15;
    pointer-events:none;
    background:url('/images/ornamen-talawang.png') right center/contain no-repeat;
  }
  .hero-grid{
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:40px;
    align-items:center;
    padding-bottom:60px;
    position:relative;
    z-index:2;
  }
  .hero-eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    background:rgba(232,196,104,0.12);
    border:1px solid rgba(232,196,104,0.35);
    color:var(--gold-400);
    padding:7px 16px;
    border-radius:999px;
    font-size:12.5px; font-weight:700;
    letter-spacing:0.08em; text-transform:uppercase;
  }
  .hero h1{
    color:var(--white);
    font-size:clamp(32px,4.6vw,54px);
    margin-top:20px;
    line-height:1.12;
  }
  .hero h1 em{
    font-style:normal;
    background:linear-gradient(90deg,var(--gold-400),var(--gold-600));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .hero p.lead{
    margin-top:20px;
    font-size:16.5px;
    color:#C7D4E3;
    max-width:520px;
  }
  .hero-actions{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap;}
  .hero-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:0;
    margin-top:52px;
    border-top:1px solid rgba(255,255,255,0.12);
    padding-top:26px;
  }
  .hero-stats div{padding-right:14px;}
  .hero-stats .num{
    font-family:var(--font-display);
    font-size:clamp(24px,2.6vw,32px);
    font-weight:700;
    color:var(--gold-400);
  }
  .hero-stats .label{font-size:12.5px; color:#9FB1C4; margin-top:4px;}

  .hero-visual{
    position:relative;
    display:flex; align-items:center; justify-content:center;
  }
  .hero-visual .hero-photo{
    position:relative;
    z-index:1;
    width:100%; max-width:1680px; height:auto;
    border-radius:0;
    object-fit:cover;
    box-shadow:none;
    animation:heroFloat 4s ease-in-out infinite;
  }
  @keyframes heroFloat{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-12px); }
  }
  .hero-visual .ring{
    position:absolute; border-radius:50%;
    border:1px dashed rgba(232,196,104,0.35);
  }
  .hero-visual .ring.r1{width:100%; height:100%; animation:spin 60s linear infinite;}
  .hero-visual .ring.r2{width:74%; height:74%; border-style:solid; border-color:rgba(232,196,104,0.18);}
  .hero-visual .seal{
    position:relative; z-index:2;
    width:56%; aspect-ratio:1/1;
    border-radius:50%;
    background:radial-gradient(circle at 32% 28%, var(--gold-400), var(--gold-700) 70%);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 20px 60px rgba(0,0,0,0.35), inset 0 0 0 6px rgba(255,255,255,0.25);
  }
  .hero-visual .seal svg{width:46%; height:46%;}
  @keyframes spin{from{transform:rotate(0);} to{transform:rotate(360deg);}}

  .hero-wave{display:block; width:100%; height:auto; position:relative; z-index:1; margin-top:-2px;}

  /* === MARQUEE / TRUST BAR === */
  .trustbar{
    background:var(--cream-50);
    border-bottom:1px solid #F0E9D6;
    padding:22px 0;
  }
  .trustbar .container{
    display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  }
  .trustbar-label{font-size:12.5px; color:var(--gray-500); font-weight:700; text-transform:uppercase; letter-spacing:0.08em;}
  .trustbar-logos{display:flex; gap:34px; flex-wrap:wrap; align-items:center;}
  .trustbar-logos span{
    font-family:var(--font-display); font-weight:600; color:var(--navy-800); font-size:14.5px; opacity:0.75;
  }

  /* === LAYANAN (SERVICES) === */
  .services{
    padding:96px 0;
    background:var(--white);
    position:relative;
    overflow:hidden;
  }
  .services::before{
    content:'';
    position:absolute;
    inset:0;
    background:url('/images/ornamen-talawang2.png') center center/auto 100% no-repeat;
    background-attachment:fixed;
    opacity:0.07;
    pointer-events:none;
  }
  .service-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
  }
  .service-card{
    border:1px solid #E9ECF0;
    border-radius:var(--radius-lg);
    padding:30px 24px;
    transition:.25s;
    background:var(--white);
  }
  .service-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-md);
    border-color:transparent;
  }
  .service-icon{
    width:52px; height:52px;
    border-radius:14px;
    background:var(--blue-100);
    display:flex; align-items:center; justify-content:center;
    margin-bottom:20px;
  }
  .service-icon svg{width:26px; height:26px; stroke:var(--navy-800);}
  .service-card h3{font-size:17.5px; margin-bottom:8px;}
  .service-card p{font-size:14px; color:var(--gray-500); margin-bottom:14px;}
  .service-card .link{
    font-size:13.5px; font-weight:700; color:var(--blue-600);
    display:inline-flex; align-items:center; gap:6px;
  }

  /* === PPID / INFORMASI PUBLIK BAND === */
  .ppid-band{
    background:
      url('/images/ornamen-banner-kiri.png') top left/200px auto no-repeat,
      url('/images/ornamen-banner-kanan.png') bottom right/200px auto no-repeat,
      linear-gradient(120deg, var(--navy-900), var(--navy-800));
    color:var(--white);
    padding:70px 0;
    position:relative;
    overflow:hidden;
  }
  .ppid-band::before{
    content:'';
    position:absolute; inset:0;
    background-image:radial-gradient(circle, rgba(232,196,104,0.5) 1px, transparent 1.5px);
    background-size:22px 22px;
    opacity:0.12;
  }
  .ppid-inner{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:center;
    position:relative; z-index:1;
  }
  .ppid-band .eyebrow{color:var(--gold-400);}
  .ppid-band .eyebrow::before{background:var(--gold-400);}
  .ppid-band h2{color:var(--white); font-size:clamp(24px,3vw,32px); margin-top:10px;}
  .ppid-band p{color:#C7D4E3; margin-top:16px; font-size:15px; max-width:480px;}
  .ppid-actions{display:flex; gap:14px; margin-top:26px; flex-wrap:wrap;}
  .ppid-cards{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
  .ppid-card{
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.14);
    border-radius:var(--radius-md);
    padding:20px;
  }
  .ppid-card .num{font-family:var(--font-display); font-size:26px; color:var(--gold-400); font-weight:700;}
  .ppid-card .lbl{font-size:13px; color:#C7D4E3; margin-top:6px;}

  /* === BERITA (NEWS) === */
  .news{padding:96px 0; background:var(--cream-50);}
  .news-head-row{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:44px; gap:20px; flex-wrap:wrap;}
  .news-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
  .news-card{
    background:var(--white);
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow-sm);
    transition:.25s;
  }
  .news-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-md);}
  .news-thumb{
    height:170px;
    background:linear-gradient(135deg,var(--blue-500),var(--navy-800));
    position:relative;
  }
  .news-thumb .tag{
    position:absolute; top:14px; left:14px;
    background:var(--gold-600); color:var(--navy-950);
    font-size:11px; font-weight:800; letter-spacing:0.05em; text-transform:uppercase;
    padding:5px 12px; border-radius:999px;
  }
  .news-body{padding:22px;}
  .news-date{font-size:12.5px; color:var(--gray-500); font-weight:600;}
  .news-body h3{font-size:16.5px; margin-top:8px; margin-bottom:10px; line-height:1.4;}
  .news-body p{font-size:13.5px; color:var(--gray-500);}

  /* === AGENDA === */
  .agenda{padding:96px 0; background:var(--white);}
  .agenda-list{display:flex; flex-direction:column;}
  .agenda-item{
    display:grid;
    grid-template-columns:110px 1fr auto;
    gap:24px;
    align-items:center;
    padding:22px 0;
    border-bottom:1px solid #EDEEF1;
  }
  .agenda-item:first-child{border-top:1px solid #EDEEF1;}
  .agenda-date{
    background:var(--navy-900);
    color:var(--white);
    border-radius:var(--radius-md);
    text-align:center;
    padding:12px 8px;
  }
  .agenda-date .d{font-family:var(--font-display); font-size:22px; font-weight:700; color:var(--gold-400); line-height:1;}
  .agenda-date .m{font-size:11px; text-transform:uppercase; letter-spacing:0.06em; margin-top:4px;}
  .agenda-info h4{font-size:16px; margin-bottom:6px;}
  .agenda-info span{font-size:13px; color:var(--gray-500);}
  .agenda-item .btn{padding:9px 18px; font-size:13px;}

  /* === STATISTIK === */
  .stats-band{
    background:var(--gold-100);
    padding:64px 0;
    border-top:1px solid #F0E4C4;
    border-bottom:1px solid #F0E4C4;
  }
  .stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center;}
  .stats-grid .num{font-family:var(--font-display); font-size:clamp(30px,3.4vw,42px); font-weight:700; color:var(--navy-900);}
  .stats-grid .lbl{font-size:13.5px; color:var(--ink-700); margin-top:6px; font-weight:600;}

  /* === CTA STRIP === */
  .cta-strip{
    background:var(--navy-950);
    color:var(--white);
    padding:60px 0;
  }
  .cta-inner{
    display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
  }
  .cta-inner h3{color:var(--white); font-size:clamp(20px,2.6vw,28px); max-width:520px;}

  /* === FOOTER === */
  footer{
    background:var(--navy-950); color:#9FB1C4; padding-top:70px;
    position:relative; overflow:hidden;
  }
  footer::before{
    content:'';
    position:absolute;
    inset:0;
    background:url('/images/ornamen-talawang-footer.png') right center/auto 100% no-repeat;
    opacity:0.04;
    pointer-events:none;
  }
  .footer-grid{
    display:grid;
    grid-template-columns:1.6fr 1fr 1fr 1fr;
    gap:40px;
    padding-bottom:50px;
    border-bottom:1px solid rgba(255,255,255,0.08);
    align-items:start;
  }
  .footer-brand{display:flex; gap:16px; align-items:center; margin-bottom:16px;}
  .footer-brand .brand-mark{flex-shrink:0;}
  .footer-brand .footer-desc{margin-bottom:0;}
  .footer-brand .nama{font-family:var(--font-display); color:var(--white); font-size:17px; font-weight:700;}
  .footer-col h5{color:var(--white); font-size:13.5px; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:18px;}
  .footer-col ul li{margin-bottom:11px; font-size:14px;}
  .footer-col ul li a:hover{color:var(--gold-400);}
  .footer-desc{font-size:14px; max-width:320px; margin-bottom:20px;}
  .footer-contact li{display:flex; gap:10px; margin-bottom:14px; font-size:13.5px;}
  .footer-bottom{
    display:flex; justify-content:space-between; align-items:center;
    padding:24px 0; font-size:12.5px; color:#7387A0; flex-wrap:wrap; gap:10px;
  }
  .footer-bottom a{color:#9FB1C4;}
  .back-to-top{
    width:38px; height:38px; border-radius:50%;
    background:var(--gold-600); color:var(--navy-950);
    display:flex; align-items:center; justify-content:center;
  }

  /* === RESPONSIVE === */
  @media (max-width:980px){
    nav.main-nav{
      position:fixed; top:0; right:-100%; height:100vh; width:300px;
      background:var(--white); flex-direction:column; align-items:flex-start;
      padding:90px 20px 24px; box-shadow:-10px 0 30px rgba(0,0,0,0.15);
      transition:right .3s ease; z-index:99;
      overflow-y:auto;
    }
    nav.main-nav.open{right:0;}
    nav.main-nav > ul{flex-direction:column; align-items:stretch; width:100%; gap:2px;}
    nav.main-nav li{width:100%;}
    nav.main-nav a{width:100%; padding:13px 12px;}
    .menu-toggle{display:flex;}

    /* dropdowns become inline accordions on mobile */
    .dropdown-panel, .dropdown-panel.mega{
      position:static;
      display:none;
      opacity:1; visibility:visible; transform:none;
      box-shadow:none; border:none;
      min-width:0; width:100%;
      flex-direction:column; gap:4px;
      padding:4px 0 4px 14px;
      background:var(--cream-50);
      border-radius:8px;
      margin:2px 0 6px;
    }
    li.has-dropdown.open > .dropdown-panel{display:flex;}
    li.has-dropdown:hover > .dropdown-panel,
    li.has-dropdown:focus-within > .dropdown-panel{display:none;}
    li.has-dropdown.open:hover > .dropdown-panel,
    li.has-dropdown.open:focus-within > .dropdown-panel{display:flex;}
    .dropdown-group{min-width:0;}
    .dropdown-panel a{padding:9px 10px; white-space:normal;}
    .header-cta .btn-navy-desktop{display:none;}
    #loginToggle{padding:10px 14px; font-size:13px;}
    .hero-grid{grid-template-columns:1fr;}
    .hero-visual{max-width:320px; margin:0 auto;}
    .service-grid{grid-template-columns:repeat(2,1fr);}
    .ppid-inner{grid-template-columns:1fr;}
    .news-grid{grid-template-columns:1fr;}
    .stats-grid{grid-template-columns:repeat(2,1fr); row-gap:30px;}
    .footer-grid{grid-template-columns:1fr 1fr; row-gap:36px;}
    .agenda-item{grid-template-columns:80px 1fr; row-gap:10px;}
    .agenda-item .btn{grid-column:1 / -1;}
  }
  @media (max-width:600px){
    .topbar-left span:nth-child(2){display:none;}
    .service-grid{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr;}
    .cta-inner{flex-direction:column; align-items:flex-start;}
    .hero-actions .btn{width:100%; justify-content:center;}
    #loginToggle{width:42px; height:42px; padding:0; border-radius:50%; justify-content:center;}
    #loginToggle .login-label{display:none;}
    .overlay{padding-top:90px;}
    .search-form{flex-wrap:wrap;}
    .search-form button{width:100%; justify-content:center;}
  }

  :focus-visible{outline:3px solid var(--gold-600); outline-offset:2px;}
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
  }

/* ======================================================
   INNER PAGE COMPONENTS (Profil, Informasi PPID, Laporan, Galeri, Kontak, FAQ)
   ====================================================== */

/* Page banner / breadcrumb */
.page-banner{
  background:
    radial-gradient(900px 400px at 90% -20%, rgba(198,149,44,0.16), transparent 60%),
    linear-gradient(160deg, var(--navy-900) 0%, var(--navy-950) 85%);
  color:var(--white);
  padding:56px 0 40px;
  position:relative;
  overflow:hidden;
}
.page-banner::before{
  content:'';
  position:absolute;
  top:0; left:0;
  width:280px; height:280px;
  background:url('/images/ornamen-banner-kiri.png') top left/contain no-repeat;
  opacity:0.2;
  pointer-events:none;
}
.page-banner::after{
  content:'';
  position:absolute;
  bottom:0; right:0;
  width:280px; height:280px;
  background:url('/images/ornamen-banner-kanan.png') bottom right/contain no-repeat;
  opacity:0.2;
  pointer-events:none;
}
.breadcrumb{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:13px; color:#9FB1C4; margin-bottom:14px;
}
.breadcrumb a{color:#C7D4E3; font-weight:600;}
.breadcrumb a:hover{color:var(--gold-400);}
.breadcrumb .sep{opacity:0.5;}
.breadcrumb .current{color:var(--gold-400); font-weight:600;}
.page-banner h1{
  color:var(--white);
  font-size:clamp(26px,3.6vw,38px);
}
.page-banner p{color:#C7D4E3; margin-top:12px; max-width:640px; font-size:15px;}

/* Generic inner content wrapper */
.page-content{padding:64px 0 90px; background:var(--white);}
.page-content.alt{background:var(--cream-50);}
.content-layout{display:grid; grid-template-columns:2.3fr 1fr; gap:48px; align-items:start;}
.prose h2{font-size:22px; margin:36px 0 14px;}
.prose h2:first-child{margin-top:0;}
.prose h3{font-size:17px; margin:26px 0 10px; color:var(--navy-800);}
.prose p{color:var(--ink-700); font-size:15px; margin-bottom:14px;}
.prose ul, .prose ol{margin:0 0 18px 22px; color:var(--ink-700); font-size:15px;}
.prose li{margin-bottom:8px;}
.prose strong{color:var(--navy-900);}

/* Sidebar */
.side-card{
  background:var(--cream-50);
  border:1px solid #F0E9D6;
  border-radius:var(--radius-lg);
  padding:24px;
  margin-bottom:20px;
}
.side-card h4{font-size:14px; text-transform:uppercase; letter-spacing:0.06em; color:var(--gold-700); margin-bottom:14px;}
.side-card ul li{margin-bottom:10px; font-size:14px;}
.side-card ul li a{color:var(--ink-700); font-weight:600;}
.side-card ul li a:hover{color:var(--blue-600);}
.side-card ul li a.active{color:var(--navy-900);}
.side-card.contact-mini p{font-size:13.5px; color:var(--gray-500); margin-bottom:10px;}
.side-card.contact-mini .btn{width:100%; justify-content:center; margin-top:6px;}

/* Org structure */
.org-box{
  border:2px dashed var(--gray-300);
  border-radius:var(--radius-lg);
  padding:40px 20px;
  text-align:center;
  color:var(--gray-500);
  background:var(--cream-50);
  margin:24px 0 32px;
}
.org-box svg{width:52px; height:52px; margin-bottom:14px; stroke:var(--navy-800);}
.org-list{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:10px;}
.org-list .org-item{
  background:var(--white); border:1px solid #E9ECF0; border-radius:var(--radius-md);
  padding:16px 18px;
}
.org-list .org-item .role{font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--gold-700); font-weight:800;}
.org-list .org-item .who{font-family:var(--font-display); font-size:16px; margin-top:6px; color:var(--navy-900);}

/* People grid (Profil Pimpinan / Pejabat Struktural) */
.people-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:10px;}
.people-card{
  border:1px solid #E9ECF0; border-radius:var(--radius-lg); overflow:hidden;
  transition:.2s; background:var(--white);
}
.people-card:hover{box-shadow:var(--shadow-md); transform:translateY(-4px);}
.people-photo{
  height:190px;
  background:linear-gradient(135deg,var(--blue-500),var(--navy-800));
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,0.85);
  font-family:var(--font-display); font-size:38px; font-weight:700;
}
.people-info{padding:18px;}
.people-info .name{font-size:15.5px; font-weight:700; color:var(--navy-900);}
.people-info .role{font-size:13px; color:var(--gray-500); margin-top:4px;}

/* Document / regulation table */
.doc-toolbar{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  margin-bottom:18px; flex-wrap:wrap;
}
.doc-search{
  display:flex; align-items:center; gap:8px;
  border:1.5px solid #E3E6EA; border-radius:999px; padding:8px 16px;
  min-width:260px; background:var(--white);
}
.doc-search svg{width:16px; height:16px; min-width:16px; min-height:16px; stroke:var(--gray-500); flex-shrink:0;}
.doc-search input{border:none; outline:none; font-family:inherit; font-size:13.5px; flex:1; background:transparent; color:var(--ink-800);}
.doc-filter-group{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.doc-select-wrap{
  position:relative; display:inline-flex; align-items:center;
}
.doc-select{
  appearance:none; -webkit-appearance:none;
  background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234A5568' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center no-repeat;
  border:1.5px solid #E3E6EA;
  border-radius:999px;
  padding:9px 36px 9px 16px;
  font-size:13.5px;
  font-weight:600;
  color:var(--navy-900);
  font-family:inherit;
  cursor:pointer;
  transition:.2s;
}
.doc-select:hover{border-color:var(--gold-500);}
.doc-select:focus{outline:none; border-color:var(--navy-900);}
.doc-reset-btn{
  display:inline-flex; align-items:center; gap:5px;
  font-size:12.5px; font-weight:600; color:var(--gray-500);
  padding:8px 14px; border-radius:999px;
  background:#F1F3F5; border:1px solid #E3E6EA;
  transition:.2s; text-decoration:none;
}
.doc-reset-btn:hover{background:#E3E6EA; color:var(--navy-900);}
.doc-count{font-size:13px; color:var(--gray-500);}
.doc-table-wrap{
  border:1px solid #E9ECF0; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-sm);
}
table.doc-table{width:100%; border-collapse:collapse; font-size:13.5px;}
table.doc-table thead{background:var(--navy-900); color:var(--white);}
table.doc-table thead th{padding:14px 18px; text-align:left; font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:0.04em;}
table.doc-table tbody tr{border-bottom:1px solid #EDEEF1;}
table.doc-table tbody tr:last-child{border-bottom:none;}
table.doc-table tbody tr:hover{background:var(--blue-100);}
table.doc-table tbody td{padding:14px 18px; color:var(--ink-700); vertical-align:middle;}
table.doc-table td.doc-title{font-weight:600; color:var(--navy-900);}
.doc-badge{
  display:inline-block; background:var(--gold-100); color:var(--gold-700);
  font-size:11px; font-weight:800; padding:4px 10px; border-radius:999px; text-transform:uppercase;
}
.dl-btn{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--blue-600); font-weight:700; font-size:13px;
}
.dl-btn svg{width:14px; height:14px;}
.pagination{display:flex; justify-content:center; gap:8px; margin-top:26px;}
.pagination a{
  width:36px; height:36px; border-radius:8px; border:1px solid #E3E6EA;
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; color:var(--ink-700);
}
.pagination a.active{background:var(--navy-900); color:var(--white); border-color:var(--navy-900);}
.pagination a:hover:not(.active){background:var(--blue-100);}

/* Procedure / SOP steps */
.step-list{display:flex; flex-direction:column; gap:0; margin-top:10px;}
.step-item{
  display:grid; grid-template-columns:52px 1fr; gap:20px;
  padding:22px 0; border-bottom:1px solid #EDEEF1; position:relative;
}
.step-item:first-child{padding-top:0;}
.step-num{
  width:44px; height:44px; border-radius:50%;
  background:var(--navy-900); color:var(--gold-400);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:17px;
  flex-shrink:0;
}
.step-body h4{font-size:16px; margin-bottom:6px; color:var(--navy-900);}
.step-body p{font-size:14px; color:var(--gray-500); margin:0;}

/* Fee / SLA table */
.fee-table{width:100%; border-collapse:collapse; margin-top:20px; font-size:14px;}
.fee-table thead th{background:var(--navy-900); color:var(--white); padding:14px 18px; text-align:left; font-size:12.5px; text-transform:uppercase; letter-spacing:0.04em;}
.fee-table tbody td{padding:14px 18px; border-bottom:1px solid #EDEEF1; color:var(--ink-700);}
.fee-table tbody tr:nth-child(even){background:var(--cream-50);}

/* Statement / Maklumat pledge box */
.pledge-box{
  background:linear-gradient(135deg, var(--navy-900), var(--navy-800));
  color:var(--white);
  border-radius:var(--radius-lg);
  padding:44px;
  text-align:center;
  position:relative;
  overflow:hidden;
  margin:16px 0 32px;
}
.pledge-box::before{
  content:'"';
  position:absolute; top:-30px; left:20px;
  font-family:var(--font-display); font-size:180px; color:rgba(232,196,104,0.12); line-height:1;
}
.pledge-box p{
  position:relative; z-index:1;
  font-family:var(--font-display); font-size:19px; line-height:1.6; color:#EAF0F8;
  max-width:680px; margin:0 auto;
}
.pledge-sign{margin-top:26px; position:relative; z-index:1;}
.pledge-sign .name{font-weight:700; color:var(--gold-400);}
.pledge-sign .title{font-size:13px; color:#9FB1C4;}

/* Service channels */
.channel-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:10px;}
.channel-card{border:1px solid #E9ECF0; border-radius:var(--radius-lg); padding:26px; text-align:center;}
.channel-card .service-icon{margin:0 auto 16px;}
.channel-card h4{font-size:15.5px; margin-bottom:8px;}
.channel-card p{font-size:13.5px; color:var(--gray-500);}
.channel-card .val{font-weight:700; color:var(--navy-900); margin-top:8px; font-size:14px;}

/* Gallery */
.gallery-filter{display:flex; gap:10px; margin-bottom:28px; flex-wrap:wrap;}
.gallery-filter button{
  padding:9px 20px; border-radius:999px; border:1.5px solid #E3E6EA; background:var(--white);
  font-size:13.5px; font-weight:600; color:var(--ink-700); transition:.2s;
}
.gallery-filter button.active, .gallery-filter button:hover{background:var(--navy-900); border-color:var(--navy-900); color:var(--white);}
.photo-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.photo-item{
  aspect-ratio:1/1; border-radius:var(--radius-md); overflow:hidden; position:relative;
  background:linear-gradient(135deg,var(--blue-500),var(--navy-800));
  display:flex; align-items:flex-end; padding:14px;
  transition:.25s;
}
.photo-item:hover{transform:scale(1.03); box-shadow:var(--shadow-md);}
.photo-item span{color:var(--white); font-size:12.5px; font-weight:600; position:relative; z-index:1;}
.photo-item::after{content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(6,26,51,0.75), transparent 60%);}
.video-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.video-item{border-radius:var(--radius-lg); overflow:hidden; border:1px solid #E9ECF0;}
.video-thumb{
  aspect-ratio:16/9; background:linear-gradient(135deg,var(--navy-800),var(--navy-950));
  display:flex; align-items:center; justify-content:center; position:relative;
}
.video-thumb .play{
  width:56px; height:56px; border-radius:50%; background:var(--gold-600);
  display:flex; align-items:center; justify-content:center; color:var(--navy-950);
}
.video-item .video-title{padding:16px; font-size:14px; font-weight:600; color:var(--navy-900);}

/* Contact page */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;}
.contact-info-list{display:flex; flex-direction:column; gap:22px; margin-top:24px;}
.contact-info-item{display:flex; gap:16px; align-items:flex-start;}
.contact-info-item .ic{
  width:44px; height:44px; border-radius:12px; background:var(--blue-100);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.contact-info-item .ic svg{width:20px; height:20px; stroke:var(--navy-800);}
.contact-info-item h4{font-size:14.5px; margin-bottom:4px;}
.contact-info-item p{font-size:13.5px; color:var(--gray-500); margin:0;}
.map-placeholder{
  margin-top:26px; height:220px; border-radius:var(--radius-lg);
  background:var(--cream-50); border:2px dashed var(--gray-300);
  display:flex; align-items:center; justify-content:center; color:var(--gray-500); font-size:13.5px;
}
.contact-form{background:var(--cream-50); border-radius:var(--radius-lg); padding:32px; border:1px solid #F0E9D6;}
.form-row{margin-bottom:18px;}
.form-row label{display:block; font-size:13px; font-weight:700; color:var(--ink-700); margin-bottom:8px;}
.form-row input, .form-row select, .form-row textarea{
  width:100%; padding:12px 14px; border:1.5px solid #E3E6EA; border-radius:var(--radius-sm);
  font-family:inherit; font-size:14px; outline:none; transition:.2s; background:var(--white);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{border-color:var(--navy-800);}
.form-row textarea{resize:vertical; min-height:110px;}
.form-two-col{display:grid; grid-template-columns:1fr 1fr; gap:16px;}

/* FAQ accordion */
.faq-list{display:flex; flex-direction:column; gap:12px; margin-top:10px;}
.faq-item{border:1px solid #E9ECF0; border-radius:var(--radius-md); overflow:hidden;}
.faq-question{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:18px 22px; cursor:pointer; font-weight:700; color:var(--navy-900); font-size:15px;
  background:var(--white);
}
.faq-question .qcaret{
  width:9px; height:9px; border-right:2px solid var(--gold-600); border-bottom:2px solid var(--gold-600);
  transform:rotate(45deg); transition:.2s; flex-shrink:0;
}
.faq-item.open .faq-question .qcaret{transform:rotate(225deg);}
.faq-answer{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.faq-answer-inner{padding:0 22px 20px; font-size:14px; color:var(--gray-500); line-height:1.7;}
.faq-item.open .faq-answer{max-height:400px;}

/* Stat mini cards for survey/statistics pages */
.mini-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:20px 0 34px;}
.mini-stat{background:var(--gold-100); border-radius:var(--radius-md); padding:20px; text-align:center;}
.mini-stat .n{font-family:var(--font-display); font-size:26px; font-weight:700; color:var(--navy-900);}
.mini-stat .l{font-size:12.5px; color:var(--ink-700); margin-top:4px;}

@media (max-width:980px){
  .content-layout{grid-template-columns:1fr;}
  .org-list{grid-template-columns:1fr;}
  .people-grid{grid-template-columns:repeat(2,1fr);}
  .channel-grid{grid-template-columns:1fr;}
  .photo-grid{grid-template-columns:repeat(2,1fr);}
  .video-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .form-two-col{grid-template-columns:1fr;}
  .mini-stats{grid-template-columns:repeat(2,1fr);}
  table.doc-table{font-size:12.5px;}
}
@media (max-width:600px){
  .people-grid{grid-template-columns:1fr;}
  .photo-grid{grid-template-columns:1fr 1fr;}
  .doc-toolbar{flex-direction:column; align-items:stretch;}
  .doc-table-wrap{overflow-x:auto;}
  table.doc-table{min-width:640px;}
}


/* ---------- Loading state tombol submit ---------- */
.btn-spinner{
  display:inline-block; width:15px; height:15px; margin-right:8px;
  border:2px solid rgba(127,127,127,0.35);
  border-top-color:currentColor;
  border-radius:50%;
  vertical-align:-2px;
  animation:btnspin .6s linear infinite;
}
@keyframes btnspin{ to{ transform:rotate(360deg); } }
button.is-loading, .btn.is-loading{ opacity:.85; cursor:progress; pointer-events:none; }

/* =========================================================
   FLOATING RIGHT SIDE ACTION DOCK & DRAWERS
   ========================================================= */
.side-action-dock {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9990;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(11, 37, 69, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 10px 6px;
  border-radius: 18px 0 0 18px;
  border: 1px solid rgba(211, 169, 74, 0.35);
  border-right: none;
  box-shadow: -4px 10px 30px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.dock-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: #E2E8F0;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  outline: none;
}

.dock-item:hover,
.dock-item:focus-visible {
  background: rgba(211, 169, 74, 0.22);
  color: #FFFFFF;
  border-color: rgba(211, 169, 74, 0.6);
  transform: translateX(-4px) scale(1.04);
  box-shadow: 0 4px 14px rgba(211, 169, 74, 0.3);
}

.dock-item:active {
  transform: translateX(-2px) scale(0.98);
}

.dock-icon {
  font-size: 17px;
  line-height: 1;
  color: var(--gold-400, #E0B85E);
  transition: transform 0.2s ease, color 0.2s ease;
}

.dock-item:hover .dock-icon {
  color: #FFFFFF;
  transform: scale(1.12);
}

.dock-label {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  margin-top: 3px;
  color: #CBD5E1;
  text-transform: uppercase;
}

.dock-item:hover .dock-label {
  color: var(--gold-300, #F3D999);
}

/* Floating Tooltip */
.side-dock-tooltip {
  position: fixed;
  pointer-events: none;
  background: #0B2545;
  color: #FFFFFF;
  font-size: 12.5px;
  font-weight: 600;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  padding: 7px 14px;
  border-radius: 8px;
  white-space: nowrap;
  z-index: 99999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%) translateX(6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.12);
  border-right: 3px solid var(--gold-500, #D3A94A);
}

.side-dock-tooltip.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

.side-dock-tooltip::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 5px 0 5px 6px;
  border-style: solid;
  border-color: transparent transparent transparent var(--gold-500, #D3A94A);
}

/* Backdrop */
.side-dock-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(11, 37, 69, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9995;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s;
}

.side-dock-backdrop.show {
  opacity: 1;
  visibility: visible;
}

/* Drawers */
.side-dock-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  max-width: 90vw;
  background: #FFFFFF;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.3);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.side-dock-drawer.show {
  transform: translateX(0);
}

.dock-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  background: var(--navy-900, #0B2545);
  color: #FFFFFF;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dock-drawer-title {
  font-size: 16px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.3px;
}

.dock-drawer-close {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #CBD5E1;
  font-size: 24px;
  line-height: 1;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.dock-drawer-close:hover {
  background: var(--danger, #DC2626);
  color: #FFFFFF;
}

.dock-drawer-body {
  padding: 22px;
  overflow-y: auto;
  flex: 1;
}

.dock-drawer-desc {
  font-size: 13px;
  color: var(--ink-600, #475569);
  line-height: 1.5;
  margin-bottom: 18px;
}

.dock-feature-group {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

.dock-group-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--navy-900, #0B2545);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dock-btn-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.dock-choice-btn {
  flex: 1;
  min-width: 70px;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid #CBD5E1;
  background: #FFFFFF;
  color: var(--ink-800, #1E293B);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.dock-choice-btn:hover {
  border-color: var(--navy-700, #133E70);
  color: var(--navy-900, #0B2545);
}

.dock-choice-btn.active {
  background: var(--navy-900, #0B2545);
  color: var(--gold-400, #E0B85E);
  border-color: var(--navy-900, #0B2545);
  box-shadow: 0 2px 8px rgba(11, 37, 69, 0.2);
}

.dock-toggle-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #EEF2F6;
  cursor: pointer;
}

.dock-toggle-item:last-child {
  border-bottom: none;
}

.dock-toggle-text b {
  font-size: 13px;
  display: block;
  color: var(--ink-900, #0F172A);
}

.dock-toggle-text small {
  font-size: 11px;
  color: var(--ink-500, #64748B);
  line-height: 1.3;
  display: block;
  margin-top: 2px;
  max-width: 230px;
}

.dock-switch-input {
  display: none;
}

.dock-switch-slider {
  width: 40px;
  height: 22px;
  background: #CBD5E1;
  border-radius: 20px;
  position: relative;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.dock-switch-slider::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  background: #FFFFFF;
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: transform 0.2s ease;
}

.dock-switch-input:checked + .dock-switch-slider {
  background: var(--gold-500, #D3A94A);
}

.dock-switch-input:checked + .dock-switch-slider::after {
  transform: translateX(18px);
}

.dock-reset-btn {
  width: 100%;
  padding: 11px;
  border-radius: 9px;
  border: 1px solid #CBD5E1;
  background: #FFFFFF;
  color: var(--ink-700, #334155);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.dock-reset-btn:hover {
  background: #F1F5F9;
  color: var(--danger, #DC2626);
  border-color: #FCA5A5;
}

/* Stat Grid Inside Drawer */
.dock-stat-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #16A34A;
  background: #DCFCE7;
  padding: 6px 12px;
  border-radius: 20px;
  margin-bottom: 16px;
}

.dock-pulse-dot {
  width: 8px;
  height: 8px;
  background: #16A34A;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.7);
  animation: dockPulse 1.8s infinite;
}

@keyframes dockPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(22, 163, 74, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

.dock-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.dock-stat-card {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 14px 12px;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}

.dock-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.dock-stat-card .stat-num {
  font-size: 20px;
  font-weight: 800;
  color: var(--navy-900, #0B2545);
  line-height: 1.2;
}

.dock-stat-card .stat-lbl {
  font-size: 11px;
  color: var(--ink-600, #475569);
  margin-top: 4px;
  font-weight: 500;
}

.dock-action-full-btn {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--gold-500, #D3A94A), var(--gold-600, #B78A2E));
  color: #0B2545;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(211, 169, 74, 0.35);
  transition: all 0.2s ease;
}

.dock-action-full-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(211, 169, 74, 0.45);
  color: #0B2545;
}

/* Accessibility Modifiers applied to HTML/BODY */
html.high-contrast {
  filter: contrast(130%) brightness(95%);
  background: #000000 !important;
}
html.high-contrast body {
  background: #000000 !important;
  color: #FFFFFF !important;
}
html.high-contrast a {
  color: #FFE600 !important;
}

html.grayscale-mode {
  filter: grayscale(100%) !important;
}

html.dyslexia-font, html.dyslexia-font body, html.dyslexia-font * {
  font-family: 'OpenDyslexic', 'Comic Sans MS', 'Trebuchet MS', Arial, sans-serif !important;
}

html.highlight-links a {
  text-decoration: underline 3px solid #D3A94A !important;
  background: rgba(211, 169, 74, 0.18) !important;
  border-radius: 3px;
}

html.line-height-boost body, html.line-height-boost p, html.line-height-boost li, html.line-height-boost a {
  line-height: 2 !important;
  letter-spacing: 0.04em !important;
}

@media (max-width: 768px) {
  .side-action-dock {
    top: auto;
    bottom: 20px;
    transform: none;
    border-radius: 16px 0 0 16px;
    padding: 6px 4px;
  }
  .dock-item {
    width: 44px;
    height: 44px;
  }
  .dock-icon {
    font-size: 15px;
  }
  .dock-label {
    display: none;
  }
}