:root{
    --navy:#0B2A4A;
    --navy-800:#123458;
    --blue:#1A5FC4;
    --blue-600:#134A9C;
    --blue-50:#EAF3FB;
    --sky-100:#DCEBFA;
    --ink:#0B2A4A;
    --muted:#5C7690;
    --yellow:#FFC629;
    --white:#ffffff;
    --line:#E1EAF3;
    --shadow:0 0.625rem 1.75rem rgba(11,42,74,0.08);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --blue-50:#081a2c; --sky-100:#0d2338; --white:#0f253d;
      --ink:#eaf3fb; --muted:#a9c2da; --line:#1c3a58;
    }
  }
  :root[data-theme="dark"]{
    --blue-50:#081a2c; --sky-100:#0d2338; --white:#0f253d;
    --ink:#eaf3fb; --muted:#a9c2da; --line:#1c3a58;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0; background:var(--blue-50); color:var(--ink);
    font-family:'Inter',ui-sans-serif,system-ui,sans-serif; line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  img,svg{max-width:100%;display:block;}
  a{color:inherit;}
  h1,h2,h3,h4{ font-family:'Poppins',ui-sans-serif,system-ui,sans-serif; margin:0; line-height:1.22; }
  p{margin:0;}
  .wrap{ max-width:75rem; margin:0 auto; padding:0 1.75rem; }
  section{ padding:5rem 0; }
  @media (max-width:720px){ section{ padding:3.25rem 0; } }

  /* ---- nav ---- */
  header.site{
    position:sticky; top:0; z-index:60;
    background:rgba(255,255,255,0.88); backdrop-filter:blur(0.75rem); -webkit-backdrop-filter:blur(0.75rem);
    border-bottom:1px solid var(--line);
    transition:box-shadow .25s ease, border-color .25s ease, background .25s ease;
  }
  header.site.scrolled{
    background:rgba(255,255,255,0.97);
    border-color:transparent;
    box-shadow:0 0.625rem 1.875rem rgba(11,42,74,0.09);
  }
  nav.wrap{ position:relative; display:flex; align-items:center; justify-content:space-between; height:4.875rem; gap:1.5rem; max-width:none; width:100%; padding:0 2.25rem; }
  .brand{ display:flex; align-items:center; gap:0.6875rem; text-decoration:none; flex:none; }
  .brand .mark{
    width:2.625rem; height:2.625rem; border-radius:0.625rem; flex:none; overflow:hidden;
    display:flex; align-items:center; justify-content:center; position:relative;
    box-shadow:0 0.375rem 0.875rem rgba(11,42,74,0.18);
  }
  .brand .mark svg{ width:2.625rem; height:2.625rem; display:block; }
  .brand .mark img{ width:100%; height:100%; object-fit:cover; display:block; }
  .brand small{ display:block; font-size:0.66rem; color:var(--muted); font-weight:500; line-height:1.3; white-space:nowrap; }
  .brand b{ font-family:'Poppins'; font-weight:700; font-size:1.06rem; display:block; color:var(--ink); letter-spacing:0.01em; line-height:1.2; }

  .nav-links{
    display:flex; align-items:center; gap:2.375rem; list-style:none; margin:0; padding:0; background:none;
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  }
  .nav-link{
    display:inline-flex; align-items:center; color:var(--muted); text-decoration:none;
    font-size:0.95rem; font-weight:600; padding:0.5rem 0.125rem; border-radius:0;
    border-bottom:0.1562rem solid transparent;
    transition:color .15s ease, border-color .15s ease; white-space:nowrap;
  }
  .nav-link:hover{ color:var(--blue); }
  .nav-link.active{ color:var(--blue); background:none; box-shadow:none; border-bottom-color:var(--blue); }

  @media (max-width:1360px) and (min-width:1181px){
    .nav-link{ font-size:0.9rem; }
    .nav-links{ gap:1.625rem; }
  }

  .nav-cta{ display:flex; align-items:center; gap:0.75rem; flex:none; }
  .icon-btn{
    width:2.5rem; height:2.5rem; border-radius:50%; border:1px solid var(--line); background:var(--white);
    display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none;
    transition:border-color .15s ease, background .15s ease;
  }
  .icon-btn:hover{ border-color:var(--blue); background:var(--blue-50); }
  .icon-btn svg{ width:1rem; height:1rem; stroke:var(--muted); transition:stroke .15s ease; }
  .icon-btn:hover svg{ stroke:var(--blue); }
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
    padding:0.6875rem 1.5rem; border-radius:6.25rem; font-weight:700; font-size:0.87rem;
    text-decoration:none; border:0.0938rem solid transparent; cursor:pointer;
    font-family:'Inter'; transition:background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease, box-shadow .15s ease;
  }
  .btn:active{ transform:scale(.98); }
  .btn-blue{ background:var(--blue); color:#fff; box-shadow:0 0.5rem 1.125rem rgba(26,95,196,0.28); }
  .btn-blue:hover{ background:var(--blue-600); box-shadow:0 0.625rem 1.375rem rgba(26,95,196,0.36); }
  .btn-outline{ background:transparent; color:var(--blue); border-color:var(--blue); }
  .btn-outline:hover{ background:var(--blue-50); }
  .btn-outline-light{ background:rgba(255,255,255,0.08); color:#fff; border-color:rgba(255,255,255,0.4); }
  .btn-outline-light:hover{ background:rgba(255,255,255,0.16); }
  .btn-block{ width:100%; }
  .btn-sm{ padding:0.5625rem 1.125rem; font-size:0.82rem; }
  .menu-toggle{ display:none; background:none; border:none; color:var(--ink); padding:0.5rem; cursor:pointer; flex:none; }
  @media (max-width:1180px){
    nav.wrap{ padding:0 1.25rem; }
    .nav-links{
      position:absolute; top:calc(100% + 0.625rem); left:1rem; right:1rem; transform:none; background:var(--white);
      flex-direction:column; align-items:stretch; padding:0.625rem; gap:0.125rem;
      display:none; border-radius:1.125rem; box-shadow:0 1rem 2.5rem rgba(11,42,74,0.16); border:1px solid var(--line);
    }
    .nav-links.open{ display:flex; }
    .nav-link{ padding:0.8125rem 1rem; width:100%; border-radius:0.75rem; }
    .nav-link.active{ box-shadow:none; }
    .menu-toggle{ display:block; }
    .icon-btn{ display:none; }
  }

  .eyebrow{ display:inline-flex; align-items:center; gap:0.5rem; color:var(--blue); font-weight:700; font-size:0.85rem; margin-bottom:0.75rem; }
  .section-head h2{ font-size:clamp(1.5rem,2.6vw,1.9rem); font-weight:700; }
  .section-head p{ color:var(--muted); margin-top:0.625rem; font-size:0.98rem; max-width:56ch; }

  /* ---- hero ---- */
  .hero{ padding:0; }
  .hero-banner{ position:relative; width:100%; overflow:hidden; aspect-ratio:16/9; }
  @media (max-width:720px){ .hero-banner{ aspect-ratio:4/5; } }
  .hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%; }
  .hero-overlay{
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(8,26,50,.35) 0%, rgba(8,26,50,.55) 45%, rgba(8,26,50,.82) 100%);
  }
  .hero-content{
    position:relative; z-index:2; height:100%;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; color:#fff; padding-top:1.5rem; padding-bottom:6.875rem;
  }
  .hero-content span.tag{ color:#d9e6f6; font-weight:600; font-size:1.08rem; }
  .hero-content h1{ font-size:clamp(2.6rem,6vw,4rem); font-weight:800; margin-top:0.625rem; color:#fff; text-shadow:0 0.125rem 0.875rem rgba(0,0,0,0.25); line-height:1.12; }
  .hero-content h1 b{ color:var(--yellow); }
  .hero-content p.lead{ margin:1.375rem auto 0; color:#e3ecf8; font-size:1.16rem; max-width:48ch; }
  .hero-ctas{ display:flex; gap:0.875rem; margin-top:2rem; flex-wrap:wrap; justify-content:center; }
  .hero-ctas .btn{ padding:0.8125rem 1.75rem; font-size:0.95rem; }

  .quick-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:3.5rem; }
  @media (max-width:800px){ .quick-grid{ grid-template-columns:repeat(2,1fr); } }
  .quick-card{
    background:var(--white); border:1px solid var(--line); border-radius:1rem; padding:1.25rem;
    display:flex; align-items:center; gap:0.875rem; text-decoration:none; box-shadow:var(--shadow);
  }
  .quick-card .qi{ width:2.625rem; height:2.625rem; border-radius:0.6875rem; background:var(--sky-100); display:flex; align-items:center; justify-content:center; flex:none; }
  .quick-card .qi svg{ width:1.25rem; height:1.25rem; stroke:var(--blue); }
  .quick-card b{ display:block; font-size:0.9rem; color:var(--ink); }
  .quick-card span{ display:block; font-size:0.76rem; color:var(--muted); margin-top:0.125rem; }

  .announce-bar{
    margin-top:1.375rem; background:var(--sky-100); border-radius:0.875rem; padding:1rem 1.375rem;
    display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  }
  .announce-bar .a-left{ display:flex; align-items:center; gap:0.75rem; font-size:0.88rem; }
  .announce-bar .a-left svg{ width:1.125rem; height:1.125rem; stroke:var(--blue); flex:none; }
  .announce-bar b{ color:var(--ink); font-weight:700; }
  .announce-bar .a-date{ font-size:0.8rem; color:var(--muted); font-weight:600; }

  .why-title{ margin-top:4rem; text-align:left; }
  .why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; margin-top:1.875rem; }
  @media (max-width:800px){ .why-grid{ grid-template-columns:repeat(2,1fr); } }
  .why-card{ text-align:left; }
  .why-card .wi{ width:3.25rem; height:3.25rem; border-radius:0.875rem; background:var(--sky-100); display:flex; align-items:center; justify-content:center; margin-bottom:0.875rem; }
  .why-card .wi svg{ width:1.5rem; height:1.5rem; stroke:var(--blue); }
  .why-card b{ display:block; font-size:0.95rem; color:var(--ink); margin-bottom:0.25rem; }
  .why-card span{ display:block; font-size:0.83rem; color:var(--muted); }

  /* ---- tentang ---- */
  .about-grid{ display:grid; grid-template-columns:1fr 0.85fr; gap:3.25rem; align-items:stretch; }
  @media (max-width:940px){ .about-grid{ grid-template-columns:1fr; } }
  .about-copy p{ color:var(--muted); margin-top:1rem; max-width:58ch; font-size:0.98rem; text-align:justify; text-justify:inter-word; }
  .vm-grid{ display:grid; grid-template-columns:1fr; gap:1.375rem; margin-top:1.875rem; }
  .vm-item b{ display:flex; align-items:center; gap:0.5625rem; color:var(--ink); font-size:0.95rem; margin-bottom:0.5rem; }
  .vm-item b .vi{ width:1.875rem; height:1.875rem; border-radius:0.5625rem; background:var(--sky-100); display:flex; align-items:center; justify-content:center; flex:none; }
  .vm-item b svg{ width:0.9375rem; height:0.9375rem; stroke:var(--blue); }
  .vm-item ol{ margin:0; padding-left:1.125rem; color:var(--muted); font-size:0.88rem; display:flex; flex-direction:column; gap:0.375rem; }
  .vm-item p{ text-align:justify; text-justify:inter-word; }

  .about-right{ display:flex; flex-direction:column; margin-top:2.125rem; }
  .kontak-box{
    margin-top:2.25rem; background:var(--white); border:1px solid var(--line); border-radius:1.125rem; padding:1.75rem 1.875rem;
  }
  .kontak-box h4{ font-size:0.95rem; margin-bottom:1.125rem; }
  .kontak-rows{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
  @media (max-width:700px){ .kontak-rows{ grid-template-columns:1fr; } }
  .kontak-rows .kr{ display:flex; gap:0.625rem; align-items:flex-start; font-size:0.85rem; }
  .kontak-rows svg{ width:1rem; height:1rem; stroke:var(--blue); flex:none; margin-top:0.125rem; }
  .kontak-rows b{ display:block; font-size:0.78rem; color:var(--muted); font-weight:600; }
  .kontak-rows span{ color:var(--ink); font-weight:500; }

  .about-visual{ position:relative; border-radius:1.5rem; overflow:hidden; flex:1; min-height:16.25rem; background:var(--sky-100); }
  .about-visual svg{ position:absolute; inset:0; width:100%; height:100%; }
  .about-visual img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  }

  /* ---- galeri ---- */
  .gallery-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.375rem; margin-top:1.875rem; }
  @media (max-width:720px){ .gallery-grid{ grid-template-columns:1fr; } }
  .gallery-card{ margin:0; border-radius:1.125rem; overflow:hidden; box-shadow:var(--shadow); background:var(--white); }
  .gallery-card img{
    display:block; width:100%; aspect-ratio:4/3; object-fit:cover;
    -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 80%, transparent 100%);
    mask-image:linear-gradient(to bottom, #000 0%, #000 80%, transparent 100%);
  }
  .gallery-card figcaption{ padding:0.875rem 1.125rem; font-size:0.85rem; font-weight:600; color:var(--ink); }

  /* ---- panduan ---- */
  .panduan-head{ display:grid; grid-template-columns:1fr auto; gap:1.875rem; align-items:center; }
  @media (max-width:800px){ .panduan-head{ grid-template-columns:1fr; } }
  .panduan-illus{ width:10rem; height:6.875rem; }
  .tab-switch{ display:inline-flex; gap:0.25rem; background:var(--sky-100); padding:0.3125rem; border-radius:6.25rem; margin-top:1.625rem; }
  .tab-switch button{
    border:none; background:transparent; padding:0.625rem 1.25rem; border-radius:6.25rem; font-family:'Inter';
    font-weight:700; font-size:0.85rem; color:var(--muted); cursor:pointer;
  }
  .tab-switch button.active{ background:var(--blue); color:#fff; }
  .pg-panel{ display:none; margin-top:2.125rem; }
  .pg-panel.active{ display:block; }

  .timeline{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
  @media (max-width:760px){ .timeline{ grid-template-columns:repeat(2,1fr); } }
  .tl-item{ position:relative; padding-top:0.875rem; }
  .tl-item::before{ content:''; position:absolute; top:1.25rem; left:50%; right:-50%; height:0.125rem; background:var(--line); }
  .tl-item:last-child::before{ display:none; }
  .tl-dot{ width:2.5rem; height:2.5rem; border-radius:50%; background:var(--sky-100); border:0.125rem solid var(--blue); display:flex; align-items:center; justify-content:center; margin:0 auto 0.75rem; position:relative; z-index:1; }
  .tl-dot svg{ width:1.125rem; height:1.125rem; stroke:var(--blue); }
  .tl-item b{ display:block; text-align:center; font-size:0.82rem; color:var(--ink); }
  .tl-item span{ display:block; text-align:center; font-size:0.77rem; color:var(--muted); margin-top:0.1875rem; }

  .req-cols{ display:grid; grid-template-columns:1fr 1fr; gap:2.25rem; margin-top:2.75rem; }
  @media (max-width:700px){ .req-cols{ grid-template-columns:1fr; } }
  .req-cols h4{ font-size:0.92rem; margin-bottom:1rem; }
  .req-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.75rem; }
  .req-list li{ display:flex; gap:0.625rem; font-size:0.9rem; color:var(--ink); }
  .req-list li svg{ width:1rem; height:1rem; stroke:var(--blue); flex:none; margin-top:0.1875rem; }

  .dl-banner{
    margin-top:2.25rem; background:var(--sky-100); border-radius:1rem; padding:1.25rem 1.5rem;
    display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  }
  .dl-banner .d-left{ display:flex; align-items:center; gap:0.875rem; }
  .dl-banner .d-left svg{ width:1.375rem; height:1.375rem; stroke:var(--blue); flex:none; }
  .dl-banner b{ display:block; font-size:0.92rem; color:var(--ink); }
  .dl-banner span{ font-size:0.82rem; color:var(--muted); }

  .steps{ display:flex; flex-direction:column; max-width:40rem; }
  .step{ display:flex; gap:1.125rem; position:relative; padding-bottom:1.875rem; }
  .step:last-child{ padding-bottom:0; }
  .step:not(:last-child)::before{ content:''; position:absolute; left:0.9375rem; top:2.125rem; bottom:0; width:0.0938rem; background:var(--line); }
  .step .num{ flex:none; width:2rem; height:2rem; border-radius:50%; background:var(--blue); color:#fff; font-family:'Poppins'; font-weight:700; display:flex; align-items:center; justify-content:center; font-size:0.85rem; z-index:1; }
  .step h4{ font-size:0.95rem; font-weight:700; margin-bottom:0.3125rem; }
  .step p{ color:var(--muted); font-size:0.87rem; max-width:42ch; }

  /* ---- formasi ---- */
  .formasi-toolbar{ display:flex; gap:0.75rem; margin-top:2.125rem; flex-wrap:wrap; }
  .search-field{
    flex:2; min-width:13.75rem; display:flex; align-items:center; gap:0.625rem;
    border:1px solid var(--line); border-radius:0.75rem; padding:0.75rem 1rem; background:var(--white);
  }
  .search-field svg{ width:1rem; height:1rem; stroke:var(--muted); flex:none; }
  .search-field input{ border:none; outline:none; background:transparent; font-size:0.9rem; width:100%; color:var(--ink); font-family:'Inter'; }
  select.filter{ flex:1; min-width:8.75rem; border:1px solid var(--line); border-radius:0.75rem; padding:0.75rem 0.875rem; background:var(--white); font-family:'Inter'; font-size:0.86rem; color:var(--ink); }
  .formasi-toolbar .btn{ flex:none; }
  .formasi-count{ margin-top:1.25rem; font-size:0.85rem; color:var(--muted); }
  .formasi-count b{ color:var(--ink); }
  .formasi-list{ display:flex; flex-direction:column; gap:0.875rem; margin-top:1rem; }
  .formasi-item{
    display:flex; align-items:center; gap:1.125rem; background:var(--white); border:1px solid var(--line);
    border-radius:1rem; padding:1.125rem 1.375rem; flex-wrap:wrap; transition:box-shadow .15s ease;
  }
  .formasi-item:hover{ box-shadow:var(--shadow); }
  .fi-icon{ width:2.875rem; height:2.875rem; border-radius:0.75rem; background:var(--sky-100); display:flex; align-items:center; justify-content:center; flex:none; }
  .fi-icon svg{ width:1.3125rem; height:1.3125rem; stroke:var(--blue); }
  .fi-main{ flex:1; min-width:11.25rem; }
  .fi-main b{ display:block; font-size:0.95rem; color:var(--ink); }
  .fi-badge{ display:inline-block; margin-top:0.3125rem; font-size:0.72rem; font-weight:700; color:var(--blue); background:var(--sky-100); padding:0.1875rem 0.625rem; border-radius:6.25rem; }
  .fi-meta{ display:flex; gap:1rem; flex-wrap:wrap; font-size:0.82rem; color:var(--muted); flex:1; min-width:11.25rem; }
  .fi-meta span{ display:flex; align-items:center; gap:0.375rem; }
  .fi-meta svg{ width:0.875rem; height:0.875rem; stroke:var(--muted); }
  .fi-right{ display:flex; align-items:center; gap:1rem; flex:none; }
  .fi-deadline{ font-size:0.8rem; color:var(--muted); text-align:right; }
  .fi-deadline b{ display:block; color:var(--ink); font-size:0.83rem; }
  .empty-state{ text-align:center; padding:2.75rem 1.25rem; color:var(--muted); font-size:0.9rem; display:none; }

  /* ---- faq ---- */
  .faq-head{ display:grid; grid-template-columns:1fr auto; gap:1.875rem; align-items:center; }
  @media (max-width:800px){ .faq-head{ grid-template-columns:1fr; } }
  .faq-illus{ width:9.375rem; height:6.875rem; }
  .faq-tabs{ display:flex; gap:0.5rem; margin-top:1.875rem; flex-wrap:wrap; }
  .faq-tab{ border:1px solid var(--line); background:var(--white); color:var(--muted); padding:0.5625rem 1.125rem; border-radius:6.25rem; font-size:0.83rem; font-weight:700; cursor:pointer; font-family:'Inter'; }
  .faq-tab.active{ background:var(--blue); color:#fff; border-color:var(--blue); }
  .faq-list{ margin-top:1.375rem; display:flex; flex-direction:column; gap:0.625rem; }
  .faq-item{ border:1px solid var(--line); border-radius:0.875rem; background:var(--white); overflow:hidden; }
  .faq-item.open{ border-color:var(--blue); }
  .faq-q{ width:100%; text-align:left; background:none; border:none; padding:1.125rem 1.375rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; cursor:pointer; font-family:'Inter'; font-size:0.92rem; font-weight:600; color:var(--ink); }
  .faq-q svg{ width:1.0625rem; height:1.0625rem; stroke:var(--blue); flex:none; transition:transform .18s ease; }
  .faq-item.open .faq-q svg{ transform:rotate(45deg); }
  .faq-a{ max-height:0; overflow:hidden; transition:max-height .22s ease; }
  .faq-a-inner{ padding:0 1.375rem 1.125rem; color:var(--muted); font-size:0.88rem; max-width:66ch; }
  .helpdesk-note{ margin-top:1.625rem; background:var(--sky-100); border-radius:1rem; padding:1.125rem 1.375rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
  .helpdesk-note b{ display:block; font-size:0.9rem; color:var(--ink); }
  .helpdesk-note span{ font-size:0.82rem; color:var(--muted); }

  /* ---- masuk / daftar ---- */
  .auth-shell{ display:grid; grid-template-columns:1fr 1fr; border-radius:1.625rem; overflow:hidden; box-shadow:var(--shadow); }
  @media (max-width:860px){ .auth-shell{ grid-template-columns:1fr; } }
  .auth-visual{
    position:relative; background:linear-gradient(165deg,var(--navy),#173a63); color:#fff;
    padding:3.25rem 2.75rem; display:flex; flex-direction:column; justify-content:flex-end; min-height:28.75rem; overflow:hidden;
  }
  .auth-visual svg.towers{ position:absolute; inset:0; width:100%; height:100%; opacity:0.5; }
  .auth-visual h3{ position:relative; font-size:1.5rem; font-weight:700; max-width:14ch; }
  .auth-visual p{ position:relative; margin-top:0.75rem; color:rgba(255,255,255,0.75); font-size:0.9rem; max-width:32ch; }
  .auth-form{ background:var(--white); padding:3.25rem 2.75rem; display:flex; flex-direction:column; justify-content:center; }
  .auth-form h3{ font-size:1.35rem; font-weight:700; color:var(--ink); }
  .auth-form > p.sub{ color:var(--muted); margin-top:0.5rem; font-size:0.88rem; }
  .field{ margin-top:1.125rem; }
  .field label{ display:block; font-size:0.82rem; font-weight:700; margin-bottom:0.4375rem; color:var(--ink); }
  .field-input{ display:flex; align-items:center; gap:0.625rem; border:1px solid var(--line); border-radius:0.6875rem; padding:0.75rem 0.875rem; }
  .field-input:focus-within{ border-color:var(--blue); }
  .field-input svg{ width:1rem; height:1rem; stroke:var(--muted); flex:none; }
  .field-input input{ border:none; outline:none; width:100%; font-family:'Inter'; font-size:0.9rem; background:transparent; color:var(--ink); }
  .remember-row{ display:flex; justify-content:space-between; align-items:center; margin-top:0.875rem; }
  .remember{ display:flex; align-items:center; gap:0.5rem; font-size:0.83rem; color:var(--muted); }
  .remember input{ width:0.9375rem; height:0.9375rem; }
  .forgot{ font-size:0.83rem; font-weight:700; color:var(--blue); text-decoration:none; }
  .auth-form .btn{ margin-top:1.375rem; }
  .auth-or{ display:flex; align-items:center; gap:0.875rem; margin-top:1.375rem; color:var(--muted); font-size:0.85rem; }
  .auth-or::before,.auth-or::after{ content:''; flex:1; height:1px; background:var(--line); }
  .auth-form .btn-google{ margin-top:1.125rem; display:flex; align-items:center; justify-content:center; gap:0.625rem; background:var(--white); color:var(--ink); border:1.5px solid var(--line); box-shadow:none; font-weight:600; }
  .btn-google svg{ width:1.125rem; height:1.125rem; flex:none; }
  .btn-google:hover{ border-color:var(--blue); filter:none; }
  .btn-google:disabled{ opacity:.6; cursor:not-allowed; }
  .signup-row{ text-align:center; margin-top:1.125rem; font-size:0.85rem; color:var(--muted); }
  .signup-row a{ color:var(--blue); font-weight:700; text-decoration:none; cursor:pointer; }
  .form-note{ margin-top:0.875rem; font-size:0.76rem; color:var(--muted); text-align:center; display:none; }
  .auth-panel{ display:none; }
  .auth-panel.active{ display:block; }

  /* ---- footer ---- */
  footer{ background:var(--navy); color:rgba(255,255,255,0.75); padding:3.5rem 0 1.5rem; }
  .foot-grid{ display:grid; grid-template-columns:1.5fr 0.8fr 0.8fr 1.1fr; gap:2.5rem; }
  @media (max-width:800px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
  .foot-brand p{ margin-top:0.875rem; font-size:0.86rem; max-width:30ch; }
  .foot-social{ display:flex; gap:0.625rem; margin-top:1.125rem; }
  .foot-social a{ width:2rem; height:2rem; border-radius:0.5rem; background:rgba(255,255,255,0.09); display:flex; align-items:center; justify-content:center; text-decoration:none; }
  .foot-social svg{ width:0.875rem; height:0.875rem; stroke:#fff; }
  .foot-col h5{ color:#fff; font-size:0.85rem; font-weight:700; margin-bottom:0.875rem; }
  .foot-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.625rem; }
  .foot-col a{ color:rgba(255,255,255,0.72); text-decoration:none; font-size:0.84rem; }
  .foot-col a:hover{ color:#fff; }
  .foot-col li.plain{ font-size:0.84rem; }
  .foot-bottom{ border-top:1px solid rgba(255,255,255,0.14); margin-top:2.5rem; padding-top:1.25rem; font-size:0.78rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:0.75rem; }
  .pln-badge{ background:var(--yellow); color:#231400; font-family:'Poppins'; font-weight:800; font-size:0.72rem; padding:0.3125rem 0.625rem; border-radius:0.375rem; letter-spacing:0.02em; }

  ::selection{ background:var(--yellow); color:#231400; }
  :focus-visible{ outline:0.125rem solid var(--blue); outline-offset:0.125rem; }
  @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ transition:none !important; } }

  /* ---- modal detail formasi ---- */
  .modal-backdrop{
    display:none; position:fixed; inset:0; background:rgba(11,42,74,0.5); z-index:200;
    align-items:center; justify-content:center; padding:1.25rem;
  }
  .modal-backdrop.open{ display:flex; }
  .modal-box{
    background:var(--white); border-radius:1.25rem; padding:2rem 2.125rem; width:100%; max-width:35rem;
    max-height:88vh; overflow-y:auto;
  }
  .modal-box h3{ font-family:'Poppins'; font-size:1.2rem; font-weight:700; color:var(--ink); }
  .modal-box h4{ font-family:'Poppins'; color:var(--ink); }

/* ===================== SINERGI premium theme (override layer) ===================== */
:root{
  --grad:linear-gradient(135deg,#1A5FC4 0%,#0B4AA8 55%,#0B2A4A 100%);
  --radius:1.25rem; --ease:cubic-bezier(.2,.7,.2,1);
  --shadow:0 0.125rem 0.25rem rgba(11,42,74,.04),0 0.875rem 2.125rem -10px rgba(11,42,74,.16);
  --shadow-lg:0 1.625rem 3.75rem -20px rgba(11,42,74,.32);
}
body{background:radial-gradient(68.75rem 30rem at 92% -8%,rgba(0,163,180,.10),transparent 60%),var(--blue-50);}
h1,h2,h3{letter-spacing:-.02em;}
:focus-visible{outline:0.1875rem solid var(--yellow);outline-offset:0.1875rem;border-radius:0.5rem;}
::selection{background:var(--yellow);color:var(--navy);}

/* nav */
header.site{background:rgba(255,255,255,.72);backdrop-filter:saturate(180%) blur(1rem);-webkit-backdrop-filter:saturate(180%) blur(1rem);}
header.site.scrolled{box-shadow:0 0.75rem 2.5rem -12px rgba(11,42,74,.22);}
nav.wrap{height:4.5rem;}
.nav-link{position:relative;font-weight:600;}
.nav-link::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:0.1875rem;border-radius:0.1875rem;background:var(--yellow);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1);}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) header.site{background:rgba(8,26,44,.75);}}

/* buttons */
.btn{border-radius:62.4375rem;font-weight:600;letter-spacing:.01em;transition:transform .25s var(--ease),box-shadow .25s var(--ease),filter .25s;}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:none;}
.btn-blue{background:var(--grad);box-shadow:0 0.625rem 1.5rem -8px rgba(26,95,196,.6);}
.btn-blue:hover{background:var(--grad);filter:brightness(1.1);box-shadow:0 1rem 1.875rem -8px rgba(26,95,196,.7);}
.btn-outline{border-width:0.0938rem;}

/* hero */
.hero-banner{aspect-ratio:auto;min-height:clamp(33.75rem,84vh,46.25rem);}
.hero-overlay{background:linear-gradient(105deg,rgba(6,22,42,.93) 0%,rgba(11,42,74,.72) 48%,rgba(11,42,74,.22) 100%),linear-gradient(0deg,rgba(6,22,42,.7),transparent 42%);}
.hero-content{align-items:flex-start;text-align:left;justify-content:center;padding-bottom:10rem;}
.hero-content>*{animation:rise .8s var(--ease) both;}
.hero-content>*:nth-child(2){animation-delay:.08s;}
.hero-content>*:nth-child(3){animation-delay:.16s;}
.hero-content>*:nth-child(4){animation-delay:.24s;}
@keyframes rise{from{opacity:0;transform:translateY(1.125rem);}}
.hero-content span.tag{display:inline-flex;align-items:center;gap:0.625rem;padding:0.5rem 1rem;border-radius:62.4375rem;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(0.5rem);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;}
.hero-content span.tag::before{content:"";width:0.5rem;height:0.5rem;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 0.25rem rgba(255,198,41,.25);}
.hero-content h1{font-size:clamp(2.9rem,6.5vw,5.2rem);line-height:1.04;margin-top:1.25rem;}
.hero-content h1 b{display:block;font-size:.46em;font-weight:700;margin-top:1rem;letter-spacing:-.01em;}
.hero-content p.lead{margin:1.375rem 0 0;max-width:52ch;font-size:1.12rem;}
.hero-ctas{justify-content:flex-start;}
.hero-ctas .btn{padding:0.9375rem 2.125rem;font-size:1rem;}
.hero-ctas .btn-blue{background:var(--yellow);color:var(--navy);box-shadow:0 0.875rem 1.875rem -8px rgba(255,198,41,.55);}
.hero-ctas .btn-blue:hover{background:#ffd34d;filter:none;}
@media (max-width:720px){.hero-content{padding-bottom:8.125rem;}}

/* quick cards floating over hero */
.quick-grid{margin-top:-88px;position:relative;z-index:3;}
.quick-card{border-radius:var(--radius);padding:1.375rem;box-shadow:var(--shadow-lg);transition:transform .3s var(--ease),box-shadow .3s;}
.quick-card:hover{transform:translateY(-6px);}
.quick-card .qi{background:var(--grad);border-radius:0.875rem;}
.quick-card .qi svg{stroke:#fff;}

/* section heads & cards */
.section-head h2{font-size:clamp(1.6rem,3vw,2.3rem);}
.eyebrow{display:inline-flex;align-items:center;gap:0.625rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.78rem;color:var(--blue);}
.eyebrow::before{content:"";width:1.75rem;height:0.1875rem;border-radius:0.1875rem;background:var(--yellow);}
.why-card,.vm-item,.formasi-item,.faq-item,.gallery-card,.step,.kontak-box,.dl-banner{border-radius:var(--radius);}
.why-card,.vm-item,.formasi-item,.gallery-card{box-shadow:var(--shadow);transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;}
.why-card:hover,.formasi-item:hover,.gallery-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(26,95,196,.35);}
.formasi-item{position:relative;overflow:hidden;}
.formasi-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0.25rem;background:var(--yellow);transform:scaleY(0);transition:transform .3s var(--ease);}
.formasi-item:hover::before{transform:scaleY(1);}
.fi-icon{background:var(--grad);border-radius:0.875rem;}
.fi-icon svg{stroke:#fff;}
.fi-badge{border-radius:62.4375rem;background:var(--sky-100);color:var(--blue-600);font-weight:600;}
.gallery-card{overflow:hidden;}
.gallery-card img{transition:transform .6s var(--ease);}
.gallery-card:hover img{transform:scale(1.05);}
.tab-switch button.active,.faq-tab.active{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 0.5rem 1.25rem -8px rgba(26,95,196,.6);}
.faq-item{transition:box-shadow .3s,border-color .3s;}
.faq-item.open{box-shadow:var(--shadow);border-color:rgba(26,95,196,.35);}

/* auth, modal, footer */
.auth-shell{border-radius:1.75rem;overflow:hidden;box-shadow:var(--shadow-lg);}
.field-input{border-radius:0.75rem;transition:box-shadow .2s,border-color .2s;}
.field-input:focus-within{border-color:var(--blue);box-shadow:0 0 0 0.25rem rgba(26,95,196,.15);}
.modal-backdrop{backdrop-filter:blur(0.375rem);-webkit-backdrop-filter:blur(0.375rem);background:rgba(6,22,42,.55);}
.modal-box{border-radius:1.5rem;box-shadow:var(--shadow-lg);animation:pop .35s var(--ease);}
@keyframes pop{from{opacity:0;transform:translateY(1rem) scale(.97);}}
footer{border-top:0.25rem solid var(--yellow);}

/* scroll reveal (kelas ditambahkan oleh JS; konten tetap terlihat tanpa JS) */
.reveal{opacity:0;transform:translateY(1.375rem);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .hero-content>*,.modal-box{animation:none;}
  html{scroll-behavior:auto;}
}

/* ===================== Upgrade 2: depth, motion, data strip ===================== */
html{scrollbar-color:var(--blue) var(--blue-50);}
#scrollBar{position:fixed;top:0;left:0;height:0.1875rem;width:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--yellow),#00A3B4);z-index:100;}

/* hero: zoom sinar, cahaya, petir dekoratif */
.hero-bg{animation:kb 24s ease-in-out infinite alternate;}
@keyframes kb{from{transform:scale(1);}to{transform:scale(1.09);}}
.hero-overlay::before{content:"";position:absolute;width:62vmin;height:62vmin;right:-8vmin;bottom:-18vmin;background:radial-gradient(circle,rgba(0,163,180,.5),transparent 65%);filter:blur(1.5rem);animation:float 9s ease-in-out infinite alternate;}
.hero-banner::after{content:"";position:absolute;right:7%;top:50%;width:min(32vw,25rem);aspect-ratio:1;transform:translateY(-58%) rotate(8deg);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 4 14h6l-1 8 9-12h-6l1-8z' fill='%23FFC629'/%3E%3C/svg%3E") center/contain no-repeat;opacity:.15;filter:drop-shadow(0 0 1.875rem rgba(255,198,41,.6));z-index:1;pointer-events:none;animation:float 7s ease-in-out infinite alternate;}
@keyframes float{from{translate:0 0;}to{translate:0 -18px;}}
@media (max-width:720px){.hero-banner::after{display:none;}}

/* kilau tombol */
.btn-blue{position:relative;overflow:hidden;}
.btn-blue::after{content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);transition:left .7s var(--ease);pointer-events:none;}
.btn-blue:hover::after{left:140%;}

/* spotlight kartu mengikuti kursor */
.quick-card,.why-card{position:relative;}
.quick-card::after,.why-card::after,.formasi-item::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(20rem circle at var(--mx,50%) var(--my,50%),rgba(26,95,196,.11),transparent 62%);opacity:0;transition:opacity .3s;}
.quick-card:hover::after,.why-card:hover::after,.formasi-item:hover::after{opacity:1;}

/* pita statistik */
.stats-band{background:var(--grad);position:relative;overflow:hidden;padding:0;}
.stats-band::before{content:"";position:absolute;inset:0;background:radial-gradient(38.75rem 13.75rem at 12% 0,rgba(255,198,41,.2),transparent 70%),radial-gradient(32.5rem 15rem at 92% 100%,rgba(0,163,180,.4),transparent 70%);}
.stats-band .wrap{position:relative;display:grid;grid-template-columns:repeat(4,1fr);padding-top:2.875rem;padding-bottom:2.875rem;}
.stat{position:relative;text-align:center;color:#fff;padding:0 0.75rem;}
.stat+.stat::before{content:"";position:absolute;left:0;top:10%;bottom:10%;width:1px;background:rgba(255,255,255,.18);}
.stat b{display:block;font-family:'Poppins',sans-serif;font-size:clamp(2rem,4.2vw,3rem);font-weight:800;line-height:1.1;color:var(--yellow);}
#stDeadline{font-size:clamp(1.3rem,2.6vw,1.9rem);padding-top:.5em;}
.stat span{font-size:.88rem;color:#cfe0f5;}
@media (max-width:720px){.stats-band .wrap{grid-template-columns:repeat(2,1fr);row-gap:1.875rem;}.stat:nth-child(3)::before{display:none;}}

/* pita nilai AKHLAK */
.ribbon{overflow:hidden;background:var(--navy);padding:1rem 0;}
.ribbon-track{display:flex;width:max-content;animation:marquee 34s linear infinite;}
.ribbon:hover .ribbon-track{animation-play-state:paused;}
.ribbon span{display:inline-flex;align-items:center;gap:3.5rem;padding-left:1.75rem;font-family:'Poppins',sans-serif;font-weight:600;font-size:.85rem;letter-spacing:.26em;text-transform:uppercase;color:#b9cde6;}
.ribbon span::after{content:"";width:0.5rem;height:0.5rem;background:var(--yellow);transform:rotate(45deg);margin-right:1.75rem;}
@keyframes marquee{to{transform:translateX(-50%);}}

/* judul gradien, latar titik, footer */
.section-head h2{background:linear-gradient(90deg,var(--ink) 30%,var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent;}
section[style*="sky-100"]{background-image:radial-gradient(rgba(26,95,196,.08) 1px,transparent 1px)!important;background-size:1.375rem 1.375rem!important;}
footer{background:linear-gradient(180deg,#0B2A4A,#061a30);}
@media (prefers-reduced-motion:reduce){.hero-bg,.hero-overlay::before,.hero-banner::after,.ribbon-track{animation:none;}}

/* ===================== Upgrade 3: perbaikan layout & galeri ===================== */
html,body{overflow-x:clip;}
section{padding:6rem 0;}
@media (max-width:720px){section{padding:3.5rem 0;}}
.hero{padding:0 0 6rem;}
@media (max-width:720px){.hero{padding-bottom:3.5rem;}}

/* pengumuman & kartu "mengapa" */
.announce-bar{border-radius:var(--radius);box-shadow:var(--shadow);}
.why-title{margin-top:4.5rem;}
.why-grid{gap:1.375rem;margin-top:2.125rem;}
.why-card{padding:1.75rem 1.5rem;background:var(--white);border:1px solid var(--line);overflow:hidden;}
.why-card .wi{background:var(--grad);width:3.375rem;height:3.375rem;border-radius:1rem;box-shadow:0 0.625rem 1.25rem -8px rgba(26,95,196,.55);}
.why-card .wi svg{stroke:#fff;}
.why-card b{font-size:1.02rem;margin-bottom:0.375rem;}
.why-card span{line-height:1.55;}
.vm-item b .vi{background:var(--grad);}
.vm-item b .vi svg{stroke:#fff;}
@media (max-width:1000px){.why-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.why-grid{grid-template-columns:1fr;}}

/* foto "Tentang": bingkai kuning + badge kaca */
.about-right{position:relative;}
.about-right::before{content:"";position:absolute;inset:1rem -14px -14px 1rem;border:0.1875rem solid var(--yellow);border-radius:1.875rem;z-index:0;}
.about-visual{z-index:1;border-radius:1.625rem;box-shadow:var(--shadow-lg);min-height:21.25rem;}
.about-visual img{transition:transform 1.2s var(--ease);}
.about-visual:hover img{transform:scale(1.04);}
.about-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,22,42,.65),transparent 45%);pointer-events:none;}
@media (max-width:900px){.about-right::before{display:none;}}

/* gradasi warna pada foto (identitas PLN: biru navy + kilau kuning) */
.about-visual img,.hero-bg{filter:saturate(1.08) contrast(1.04);}
.about-visual::after{background:
  linear-gradient(0deg,rgba(6,22,42,.72) 0%,rgba(6,22,42,0) 48%),
  linear-gradient(135deg,rgba(26,95,196,.42) 0%,rgba(11,74,168,.12) 45%,rgba(255,198,41,.16) 100%);
  mix-blend-mode:normal;}
.about-visual::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);pointer-events:none;}
.hero-overlay{background:
  linear-gradient(105deg,rgba(6,22,42,.93) 0%,rgba(11,42,74,.7) 48%,rgba(26,95,196,.22) 100%),
  linear-gradient(0deg,rgba(6,22,42,.85) 0%,transparent 45%);}

/* ===================== Upgrade 4: Visi/Misi & pencarian ===================== */
.about-copy p,.vm-item p{text-align:left;}
.vm-grid{gap:1.125rem;}
.vm-item{position:relative;overflow:hidden;background:var(--white);border:1px solid var(--line);padding:1.375rem 1.625rem 1.375rem 1.875rem;}
.vm-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0.3125rem;background:linear-gradient(180deg,var(--yellow),var(--blue));}
.vm-item b{font-size:1.02rem;margin-bottom:0.625rem;}
.vm-item ol{padding-left:1.25rem;gap:0.5rem;line-height:1.55;}
.icon-btn{cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s,border-color .25s;}
.icon-btn:hover{transform:translateY(-2px);border-color:var(--blue);box-shadow:0 0.5rem 1.125rem -8px rgba(26,95,196,.5);}

.sx-backdrop{position:fixed;inset:0;z-index:200;display:none;align-items:flex-start;justify-content:center;padding:12vh 1.25rem 1.25rem;background:rgba(6,22,42,.55);backdrop-filter:blur(0.375rem);-webkit-backdrop-filter:blur(0.375rem);}
.sx-backdrop.open{display:flex;}
.sx-box{width:100%;max-width:38.75rem;background:var(--white);border-radius:1.375rem;box-shadow:var(--shadow-lg);overflow:hidden;animation:pop .3s var(--ease);}
.sx-input{display:flex;align-items:center;gap:0.75rem;padding:1rem 1.25rem;border-bottom:1px solid var(--line);}
.sx-input svg{width:1.25rem;height:1.25rem;stroke:var(--blue);flex:none;}
.sx-input input{flex:1;border:0;outline:0;background:transparent;font:inherit;font-size:1.02rem;color:var(--ink);}
.sx-input kbd{font-size:.7rem;padding:0.1875rem 0.5rem;border-radius:0.375rem;border:1px solid var(--line);color:var(--muted);}
.sx-results{max-height:min(56vh,26.25rem);overflow:auto;padding:0.5rem;}
.sx-label{padding:0.625rem 0.75rem 0.25rem;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.sx-item{display:block;width:100%;text-align:left;border:0;background:transparent;font:inherit;padding:0.6875rem 0.875rem;border-radius:0.75rem;cursor:pointer;color:var(--ink);}
.sx-item b{display:block;font-size:.92rem;}
.sx-item span{display:block;font-size:.78rem;color:var(--muted);margin-top:0.125rem;}
.sx-item:hover,.sx-item.active{background:var(--sky-100);}
.sx-empty{padding:1.75rem 1rem;text-align:center;color:var(--muted);font-size:.9rem;}


/* ===================== Upgrade 5: Foto Tentang (kolase) & teks rata kanan-kiri ===================== */
.about-copy p,.vm-item p{text-align:justify;text-justify:inter-word;hyphens:auto;}
.about-copy p{max-width:none;}
.vm-item ol{text-align:justify;}

.about-right{position:relative;margin-top:2.125rem;min-height:32.5rem;padding:0 0 2.875rem 0;}
.about-right::before{
  content:"";position:absolute;z-index:0;top:-16px;right:-16px;width:62%;height:62%;
  border-radius:2rem;border:0;inset:auto;top:-16px;right:-16px;
  background:
    radial-gradient(circle,rgba(255,255,255,.55) 0.0938rem,transparent 0.125rem) 0 0/1rem 1rem,
    linear-gradient(135deg,var(--yellow),#ffdf7a 55%,rgba(255,198,41,0));
  opacity:.9;
}
.about-right::after{
  content:"";position:absolute;z-index:0;left:-18px;bottom:0.5rem;width:46%;height:46%;
  border-radius:2rem;background:linear-gradient(135deg,rgba(26,95,196,.9),rgba(11,74,168,.35));
  filter:blur(.2px);
}
.about-visual{
  position:relative;z-index:1;flex:none;width:88%;margin-left:auto;height:30rem;min-height:0;
  border-radius:1.875rem;box-shadow:0 1.875rem 3.75rem -22px rgba(6,22,42,.55);
}
.about-visual img{object-position:38% 22%;filter:saturate(1.12) contrast(1.06);}
.about-visual::after{
  background:
    linear-gradient(0deg,rgba(6,22,42,.88) 0%,rgba(6,22,42,.35) 30%,rgba(6,22,42,0) 55%),
    linear-gradient(140deg,rgba(26,95,196,.38) 0%,rgba(11,74,168,.06) 45%,rgba(255,198,41,.22) 100%);
}
.about-cap{position:absolute;z-index:3;right:1.625rem;bottom:1.5rem;width:52%;color:#fff;text-align:right;}
.about-cap span{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);margin-bottom:0.375rem;}
.about-cap b{display:block;font-size:1rem;line-height:1.35;font-weight:600;}

.about-mini{
  position:absolute;z-index:4;left:0;bottom:0;width:48%;margin:0;aspect-ratio:4/3;
  border-radius:1.375rem;overflow:hidden;border:0.3125rem solid #fff;
  box-shadow:0 1.375rem 2.75rem -16px rgba(6,22,42,.6);
}
.about-mini img{width:100%;height:100%;object-fit:cover;object-position:50% 60%;display:block;transition:transform 1s var(--ease);}
.about-mini:hover img{transform:scale(1.06);}

.about-badge{
  position:absolute;z-index:4;top:2.125rem;left:0;display:flex;align-items:center;gap:0.75rem;
  padding:0.75rem 1.125rem 0.75rem 0.75rem;border-radius:1.125rem;
  background:rgba(255,255,255,.82);backdrop-filter:blur(0.75rem);-webkit-backdrop-filter:blur(0.75rem);
  border:1px solid rgba(255,255,255,.9);box-shadow:0 1rem 2.125rem -14px rgba(6,22,42,.5);
  animation:aboutFloat 5s ease-in-out infinite;
}
.about-badge .bi{width:2.5rem;height:2.5rem;border-radius:0.75rem;background:var(--grad);display:flex;align-items:center;justify-content:center;flex:none;}
.about-badge .bi svg{width:1.25rem;height:1.25rem;stroke:var(--yellow);fill:var(--yellow);}
.about-badge b{display:block;font-size:.88rem;color:var(--ink);line-height:1.2;}
.about-badge div span{font-size:.75rem;color:var(--muted);font-weight:500;}
@keyframes aboutFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media (prefers-reduced-motion:reduce){.about-badge{animation:none;}}

@media (max-width:940px){
  .about-right{min-height:0;margin-top:0.625rem;padding-bottom:2.5rem;}
  .about-visual{height:25rem;width:92%;}
  .about-right::before,.about-right::after{display:block;}
}
@media (max-width:520px){
  .about-visual{height:21.25rem;width:100%;}
  .about-cap{display:none;}
  .about-mini{width:52%;left:-6px;}
  .about-badge{top:1rem;left:-6px;}
}


/* ===================== Upgrade 6: penyesuaian foto baru ===================== */
.about-visual img{object-position:50% 34%;filter:saturate(1.15) contrast(1.05) brightness(1.02);}
.about-visual::after{
  background:
    linear-gradient(0deg,rgba(6,22,42,.72) 0%,rgba(6,22,42,.18) 26%,rgba(6,22,42,0) 46%),
    linear-gradient(140deg,rgba(255,198,41,.16) 0%,rgba(255,198,41,0) 40%);
}
.about-mini img{object-position:50% 62%;filter:saturate(1.1) contrast(1.05);}
/* ---- Presisi spasi: bagian Informasi & Panduan (skala 0.5 / 0.75 / 1 / 1.5 / 2.5 rem) ---- */
#panduan .panduan-head{gap:2.5rem;align-items:center;}
#panduan .panduan-head .section-head h2{margin:0;line-height:1.25;max-width:40ch;}
#panduan .panduan-head .eyebrow{margin-bottom:1rem;}
#panduan .panduan-illus{flex:none;}
#panduan .pg-panel{margin-top:3rem;}
#panduan .pg-title{font-size:1rem;line-height:1.3;margin:0 0 1.5rem;}
#panduan .timeline{gap:1.5rem;row-gap:2rem;}
#panduan .tl-item{padding:0 0.5rem;}
#panduan .tl-item::before{top:calc(1.25rem - 1px);left:50%;right:calc(-50% - 1.5rem);height:2px;}
#panduan .tl-dot{margin:0 auto 1rem;flex:none;}
#panduan .tl-item b{font-size:0.9rem;line-height:1.3;}
#panduan .tl-item span{font-size:0.82rem;line-height:1.45;margin-top:0.25rem;}
#panduan .req-cols{margin-top:3rem;padding-top:3rem;border-top:1px solid var(--line);gap:3rem;align-items:start;}
#panduan .req-cols h4{font-size:1rem;line-height:1.3;margin:0 0 1.25rem;}
#panduan .req-list{gap:0.875rem;}
#panduan .req-list li{gap:0.75rem;font-size:0.92rem;line-height:1.5;align-items:flex-start;}
#panduan .req-list li svg{width:1.125rem;height:1.125rem;margin-top:0.1875rem;}
@media (max-width:800px){
  #panduan .panduan-head{gap:1.5rem;}
  #panduan .panduan-illus{display:none;}
  #panduan .pg-panel{margin-top:2.25rem;}
}
@media (max-width:760px){
  #panduan .timeline{gap:1.5rem 1rem;}
  #panduan .tl-item::before{right:calc(-50% - 1rem);}
  #panduan .tl-item:nth-child(2n)::before{display:none;}
}
@media (max-width:700px){
  #panduan .req-cols{gap:2rem;margin-top:2.25rem;padding-top:2.25rem;}
}

/* ---- Panel foto pada kartu Masuk/Daftar ---- */
.auth-visual{background:var(--navy);}
.auth-visual .auth-photo{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 18%;}
.auth-visual::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,42,74,0) 0%,rgba(11,42,74,0) 42%,rgba(11,42,74,.72) 70%,rgba(11,42,74,.94) 100%);}
.auth-visual #authVisualCopy{position:relative;z-index:2;}
.auth-visual h3{text-shadow:0 2px 14px rgba(0,0,0,.35);}
.auth-visual p{color:rgba(255,255,255,.88);}
@media (max-width:860px){.auth-visual{min-height:27rem;}.auth-visual .auth-photo{object-position:center 18%;}}

/* ---- Panel Masuk/Daftar v2: foto bersih di atas, teks di blok navy di bawah (tidak menimpa wajah) ---- */
.auth-visual{padding:0;justify-content:flex-start;min-height:0;background:var(--navy);}
.auth-visual::before{display:none;}
.auth-visual .auth-photo{position:relative;inset:auto;display:block;width:100%;height:auto;flex:1 1 0;min-height:15rem;object-fit:cover;object-position:center 8%;
  -webkit-mask-image:linear-gradient(180deg,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,#000 80%,transparent 100%);}
.auth-visual #authVisualCopy{flex:none;padding:0.25rem 2.5rem 2.25rem;margin-top:-0.5rem;}
.auth-visual h3{max-width:none;font-size:1.45rem;line-height:1.3;text-shadow:none;text-wrap:balance;}
.auth-visual p{max-width:44ch;margin-top:0.5rem;color:rgba(255,255,255,.82);font-size:0.9rem;line-height:1.55;}
@media (max-width:860px){
  .auth-visual{min-height:0;}
  .auth-visual .auth-photo{flex:none;height:17rem;min-height:0;object-position:center 10%;}
  .auth-visual #authVisualCopy{padding:0.25rem 1.5rem 1.75rem;}
}

/* ---- Panel Masuk/Daftar v3: foto penuh, teks di bawah dengan gradasi ---- */
.auth-visual{padding:3rem 2.5rem 2.25rem;justify-content:flex-end;min-height:28.75rem;background:var(--navy);}
.auth-visual::before{display:block;content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,42,74,0) 0%,rgba(11,42,74,0) 58%,rgba(11,42,74,.78) 84%,rgba(11,42,74,.94) 100%);}
.auth-visual .auth-photo{position:absolute;inset:0;width:100%;height:100%;min-height:0;flex:none;object-fit:cover;object-position:center 88%;-webkit-mask-image:none;mask-image:none;}
.auth-visual #authVisualCopy{position:relative;z-index:2;padding:0;margin:0;}
.auth-visual h3{max-width:20ch;font-size:1.45rem;line-height:1.3;text-wrap:balance;}
.auth-visual p{max-width:36ch;}
@media (max-width:860px){
  .auth-visual{min-height:31rem;padding:2.5rem 1.5rem 1.75rem;}
  .auth-visual .auth-photo{height:100%;object-position:center 90%;}
  .auth-visual #authVisualCopy{padding:0;}
}

/* HP: foto di atas, teks di blok navy di bawahnya (tidak menimpa wajah) */
@media (max-width:860px){
  .auth-visual{min-height:0;padding:0;justify-content:flex-start;}
  .auth-visual::before{display:none;}
  .auth-visual .auth-photo{position:relative;inset:auto;display:block;width:100%;height:22rem;object-position:center 78%;
    -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,#000 82%,transparent 100%);}
  .auth-visual #authVisualCopy{padding:0.25rem 1.5rem 1.75rem;margin-top:-0.5rem;}
}