@font-face{font-family:"Plus Jakarta Sans";src:url(../fonts/plus-jakarta-sans-latin-wght-normal.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap;}
  @font-face{font-family:"Newsreader";src:url(../fonts/newsreader-latin-opsz-normal.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap;}

  /* ============ Token ============
     Dasar: indigo tarum (pewarna alami tenun NTT), emas dari logo, merah mengkudu sebagai aksen kecil. */
  /* Bawaan: latar krem. Tema gelap tersedia lewat tombol tema (pilihan tersimpan di peramban). */
  :root{
    --bg:#f7f1e3;--bg-2:#efe6d0;--panel:#fffaf0;--panel-hover:#fcf3e0;--ink:#1a1d3a;--ink-soft:#3d4165;--muted:#5d5a75;--accent:#7d5712;--accent-ink:#6a4608;--line:rgba(26,29,58,.14);--line-strong:rgba(125,87,18,.45);--tint:rgba(125,87,18,.09);--btn-bg:#1a1d3a;--btn-ink:#f3e3b4;--btn-glow:rgba(26,29,58,.7);--ghost-line:rgba(26,29,58,.34);--hdr:rgba(247,241,227,.88);--shadow:0 26px 50px -34px rgba(70,48,10,.38);--ok:#1f8f5c;--warn:#b86f12;
    --dark:#0b0e1f;
    --display:"Newsreader", Georgia, "Times New Roman", serif;
    --sans:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --radius:18px;
    color-scheme:light;
  }
  :root[data-theme="dark"]{ --bg:#0e1124;--bg-2:#131735;--panel:#171c3b;--panel-hover:#1d2348;--ink:#ece6d6;--ink-soft:#c4c0d2;--muted:#9a97b3;--accent:#e3c274;--accent-ink:#efd391;--line:rgba(236,230,214,.11);--line-strong:rgba(216,178,94,.42);--tint:rgba(216,178,94,.1);--btn-bg:linear-gradient(135deg,#efd391,#d8b25e 60%,#c19a45);--btn-ink:#1b1504;--btn-glow:rgba(216,178,94,.7);--ghost-line:rgba(236,230,214,.3);--hdr:rgba(14,17,36,.82);--shadow:0 30px 70px -40px rgba(0,0,0,.8);--ok:#5fd39a;--warn:#e3a54f; color-scheme:dark; }
  :root[data-theme="light"]{ --bg:#f7f1e3;--bg-2:#efe6d0;--panel:#fffaf0;--panel-hover:#fcf3e0;--ink:#1a1d3a;--ink-soft:#3d4165;--muted:#5d5a75;--accent:#7d5712;--accent-ink:#6a4608;--line:rgba(26,29,58,.14);--line-strong:rgba(125,87,18,.45);--tint:rgba(125,87,18,.09);--btn-bg:#1a1d3a;--btn-ink:#f3e3b4;--btn-glow:rgba(26,29,58,.7);--ghost-line:rgba(26,29,58,.34);--hdr:rgba(247,241,227,.88);--shadow:0 26px 50px -34px rgba(70,48,10,.38);--ok:#1f8f5c;--warn:#b86f12; color-scheme:light; }
  /* tombol tema tanpa JavaScript: kotak centang tersembunyi beralih ke tema gelap */
  :root:not([data-theme]):has(#themeChk:checked){ --bg:#0e1124;--bg-2:#131735;--panel:#171c3b;--panel-hover:#1d2348;--ink:#ece6d6;--ink-soft:#c4c0d2;--muted:#9a97b3;--accent:#e3c274;--accent-ink:#efd391;--line:rgba(236,230,214,.11);--line-strong:rgba(216,178,94,.42);--tint:rgba(216,178,94,.1);--btn-bg:linear-gradient(135deg,#efd391,#d8b25e 60%,#c19a45);--btn-ink:#1b1504;--btn-glow:rgba(216,178,94,.7);--ghost-line:rgba(236,230,214,.3);--hdr:rgba(14,17,36,.82);--shadow:0 30px 70px -40px rgba(0,0,0,.8);--ok:#5fd39a;--warn:#e3a54f; color-scheme:dark; }

  /* warna per kategori: dipakai ikon, label, dan filter agar tiap layanan mudah dikenali */
  .svc,.chip{--c:#e3c274;}
  [data-cat="belajar"],[for="r-belajar"]{--c:#8fb2ff;}
  [data-cat="dokumen"],[for="r-dokumen"]{--c:#f09a86;}
  [data-cat="cuaca"],[for="r-cuaca"]{--c:#62d4c5;}
  [data-cat="hiburan"],[for="r-hiburan"]{--c:#bea6ff;}
  @supports (color:light-dark(red,blue)){
    .svc,.chip{--c:light-dark(#8a5d0c,#e3c274);}
    [data-cat="belajar"],[for="r-belajar"]{--c:light-dark(#2d52c0,#8fb2ff);}
    [data-cat="dokumen"],[for="r-dokumen"]{--c:light-dark(#b23f29,#f09a86);}
    [data-cat="cuaca"],[for="r-cuaca"]{--c:light-dark(#0b7a6f,#62d4c5);}
    [data-cat="hiburan"],[for="r-hiburan"]{--c:light-dark(#6a42c2,#bea6ff);}
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;scroll-padding-top:84px;}
  body{
    margin:0;background:var(--bg);color:var(--ink);
    font-family:var(--sans);font-size:16px;font-weight:400;line-height:1.65;
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
    min-height:100vh;overflow-x:hidden;
  }
  /* Background motif tenun (gambar DDiCr) */
  body::before{
    content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
    background:
      linear-gradient(color-mix(in srgb,var(--bg) 80%,transparent),color-mix(in srgb,var(--bg) 80%,transparent)),
      url(../img/bg-tenun.jpg) center/cover no-repeat;
    background:
      linear-gradient(rgba(14,17,36,.8),rgba(14,17,36,.8)),
      url(../img/bg-tenun.jpg) center/cover no-repeat;
    background:
      linear-gradient(color-mix(in srgb,var(--bg) 80%,transparent),color-mix(in srgb,var(--bg) 80%,transparent)),
      url(../img/bg-tenun.jpg) center/cover no-repeat;
  }
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  h1,h2,h3,h4,p,ul,ol,figure{margin:0;}
  button{font:inherit;color:inherit;}
  :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 28px;}
  .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  .skip{position:absolute;left:16px;top:-64px;z-index:100;background:var(--accent-ink);color:#1b1504;font-weight:600;font-size:14px;padding:10px 16px;border-radius:8px;transition:top .2s;}
  .skip:focus{top:14px;}

  /* ============ Header ============ */
  .site-header{
    position:sticky;top:0;z-index:50;
    background:var(--hdr);
    -webkit-backdrop-filter:saturate(140%) blur(14px);backdrop-filter:saturate(140%) blur(14px);
    border-bottom:1px solid var(--line);
    transition:box-shadow .25s ease;
  }
  .site-header.scrolled{box-shadow:0 14px 30px -22px rgba(0,0,0,.55);}
  .nav{display:flex;align-items:center;gap:20px;height:68px;}
  .brand{display:flex;align-items:center;gap:12px;font-weight:600;font-size:15px;letter-spacing:-.005em;margin-right:auto;min-width:0;}
  .brand-mark{flex:none;width:42px;height:42px;border-radius:12px;background:var(--dark);display:grid;place-items:center;border:1px solid rgba(216,178,94,.35);}
  .brand-mark img{width:36px;height:36px;}
  .brand span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .brand .pt{font-style:normal;}
  .brand > span:last-child{word-spacing:.09em;}
  .nav-links{display:flex;align-items:center;gap:6px;}
  .nav-links .link{padding:8px 14px;border-radius:10px;font-size:15px;font-weight:500;color:var(--ink-soft);transition:color .2s,background .2s;}
  .nav-chk:focus-visible ~ .nav-toggle,.theme-chk:focus-visible ~ .theme-btn{outline:2px solid var(--accent);outline-offset:3px;}
  .nav-links .link:hover{color:var(--ink);background:var(--tint);}
  .icon-btn{
    flex:none;width:42px;height:42px;border-radius:12px;
    display:inline-grid;place-items:center;cursor:pointer;
    background:transparent;border:1px solid var(--line);color:var(--ink-soft);
    transition:color .2s,border-color .2s,background .2s;
  }
  .icon-btn:hover{color:var(--ink);border-color:var(--line-strong);background:var(--tint);}
  .icon-btn svg{width:20px;height:20px;}
  .nav-chk,.theme-chk,.cat-r{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
  .nav-toggle{display:none;}
  .nav-toggle .bars{display:grid;gap:5px;}
  .nav-toggle .bars i{display:block;width:18px;height:2px;border-radius:2px;background:currentColor;transition:transform .25s,opacity .2s;}
  .nav-chk:checked ~ .nav-toggle .bars i:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-chk:checked ~ .nav-toggle .bars i:nth-child(2){opacity:0;}
  .nav-chk:checked ~ .nav-toggle .bars i:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);transform-origin:0 50%;transform:scaleX(var(--p,0));}

  /* ============ Tombol ============ */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    padding:13px 24px;border-radius:12px;font-weight:600;font-size:15px;line-height:1.2;
    border:1px solid transparent;cursor:pointer;
    transition:transform .2s,box-shadow .2s,background .2s,border-color .2s;
  }
  .btn svg{width:18px;height:18px;}
  .btn-primary{background:var(--btn-bg);color:var(--btn-ink);}
  .btn-primary:hover{transform:translateY(-1px);box-shadow:0 14px 26px -14px var(--btn-glow);}
  .btn-quiet{border-color:var(--ghost-line);color:var(--ink);}
  .btn-quiet:hover{border-color:var(--accent);background:var(--tint);}
  .btn-sm{padding:9px 18px;font-size:14px;border-radius:10px;}

  /* ============ Hero ============ */
  .hero{padding:clamp(44px,7vw,96px) 0 clamp(56px,7vw,104px);}
  .hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(36px,6vw,92px);align-items:center;}
  .hero h1{
    font-family:var(--display);font-weight:500;
    font-size:clamp(2.6rem,5.4vw,4.6rem);line-height:1.04;letter-spacing:-.022em;
    max-width:13.5em;text-wrap:balance;
  }
  .lede{margin-top:26px;font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.65;color:var(--ink-soft);max-width:34em;}
  .cta-row{margin-top:34px;display:flex;flex-wrap:wrap;gap:12px;}
  .hero-note{margin-top:34px;font-size:14px;color:var(--muted);max-width:40em;}

  /* Kain tenun: satu-satunya momen bergerak di halaman (anyam masuk sekali saat dimuat) */
  .loom{
    position:relative;height:500px;border-radius:22px;overflow:hidden;
    background:var(--dark);border:1px solid rgba(216,178,94,.28);box-shadow:var(--shadow);
  }
  .loom-rows{position:absolute;inset:0;padding:18px 0;display:flex;flex-direction:column;justify-content:space-between;}
  .rows{display:flex;flex-direction:column;gap:6px;}
  .rows.flip{transform:scaleY(-1);}
  .b{display:block;background-repeat:repeat-x;background-position:0 50%;animation:weave 1s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * 110ms + 150ms);}
  @keyframes weave{from{clip-path:inset(0 100% 0 0);}to{clip-path:inset(0 0 0 0);}}
  /* setelah anyaman masuk, baris bermotif bergeser perlahan seperti kain yang ditarik di alat tenun */
  @keyframes slide{from{background-position:0 50%;}to{background-position:var(--tw) 50%;}}
  .b-3,.b-5{
    animation:weave 1s cubic-bezier(.2,.7,.2,1) both,slide var(--dur) linear infinite;
    animation-delay:calc(var(--i) * 110ms + 150ms),1.4s;
  }
  .b-3{--tw:36px;--dur:9s;}
  .b-5{--tw:28px;--dur:7s;animation-direction:normal,reverse;}
  .b-1{height:10px;background-color:#c4553a;}
  .b-2{height:6px;background-color:#d8b25e;}
  .b-3{height:36px;background-image:url(../img/loom-diamond.svg);}
  .b-4{height:4px;background-color:#d8b25e;opacity:.8;}
  .b-5{height:28px;background-image:url(../img/loom-zigzag.svg);}
  .b-6{height:8px;background-color:#c4553a;}
  .medal{
    position:absolute;left:50%;top:50%;translate:-50% -50%;
    width:206px;height:206px;border-radius:50%;background:var(--dark);
    box-shadow:0 0 0 9px var(--dark),0 0 0 10px rgba(216,178,94,.55);
    display:grid;place-items:center;
    animation:medal .8s ease-out 1s both;
  }
  .medal img{width:184px;height:184px;}
  @keyframes medal{from{opacity:0;scale:.92;}to{opacity:1;scale:1;}}

  /* ============ Bagian umum ============ */
  .section{padding:clamp(56px,7vw,96px) 0;}
  .split{display:grid;grid-template-columns:minmax(0,310px) minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:start;}
  .split h2{font-family:var(--display);font-weight:500;font-size:clamp(2rem,3.4vw,2.7rem);line-height:1.1;letter-spacing:-.018em;text-wrap:balance;}
  .split .intro{margin-top:14px;color:var(--ink-soft);font-size:15.5px;line-height:1.65;}

  /* ============ Layanan ============ */
  .side{position:sticky;top:96px;min-width:0;}
  .chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:28px;}
  .chip{
    display:flex;align-items:center;gap:8px;width:100%;min-width:0;
    padding:8px 10px;border-radius:12px;border:1px solid transparent;
    background:transparent;cursor:pointer;text-align:left;
    font-size:14.5px;font-weight:500;color:var(--ink-soft);
    transition:background .2s,color .2s,border-color .2s;
  }
  .chip[hidden]{display:none;}
  .chip:hover{background:var(--tint);color:var(--ink);}
  /* filter kategori tanpa JavaScript: radio tersembunyi + label */
  #r-belanja:checked ~ .main .svc:not([data-cat="belanja"]){display:none;}
  #r-belajar:checked ~ .main .svc:not([data-cat="belajar"]){display:none;}
  #r-dokumen:checked ~ .main .svc:not([data-cat="dokumen"]){display:none;}
  #r-cuaca:checked ~ .main .svc:not([data-cat="cuaca"]){display:none;}
  #r-hiburan:checked ~ .main .svc:not([data-cat="hiburan"]){display:none;}
  #r-fav:checked ~ .main .svc:not(.pinned){display:none;}
  #r-all:checked ~ .side label[for="r-all"]{background:var(--tint);border-color:var(--line-strong);color:var(--ink);font-weight:600;}
  #r-all:focus-visible ~ .side label[for="r-all"]{outline:2px solid var(--accent);outline-offset:2px;}
  #r-fav:checked ~ .side label[for="r-fav"]{background:var(--tint);border-color:var(--line-strong);color:var(--ink);font-weight:600;}
  #r-fav:focus-visible ~ .side label[for="r-fav"]{outline:2px solid var(--accent);outline-offset:2px;}
  #r-belanja:checked ~ .side label[for="r-belanja"]{background:var(--tint);border-color:var(--line-strong);color:var(--ink);font-weight:600;}
  #r-belanja:focus-visible ~ .side label[for="r-belanja"]{outline:2px solid var(--accent);outline-offset:2px;}
  #r-belajar:checked ~ .side label[for="r-belajar"]{background:var(--tint);border-color:var(--line-strong);color:var(--ink);font-weight:600;}
  #r-belajar:focus-visible ~ .side label[for="r-belajar"]{outline:2px solid var(--accent);outline-offset:2px;}
  #r-dokumen:checked ~ .side label[for="r-dokumen"]{background:var(--tint);border-color:var(--line-strong);color:var(--ink);font-weight:600;}
  #r-dokumen:focus-visible ~ .side label[for="r-dokumen"]{outline:2px solid var(--accent);outline-offset:2px;}
  #r-cuaca:checked ~ .side label[for="r-cuaca"]{background:var(--tint);border-color:var(--line-strong);color:var(--ink);font-weight:600;}
  #r-cuaca:focus-visible ~ .side label[for="r-cuaca"]{outline:2px solid var(--accent);outline-offset:2px;}
  #r-hiburan:checked ~ .side label[for="r-hiburan"]{background:var(--tint);border-color:var(--line-strong);color:var(--ink);font-weight:600;}
  #r-hiburan:focus-visible ~ .side label[for="r-hiburan"]{outline:2px solid var(--accent);outline-offset:2px;}
  .chip .ci{flex:none;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;color:var(--c);background:var(--tint);background:color-mix(in srgb,var(--c) 13%,transparent);transition:background .2s;}
  .chip .ci svg{width:17px;height:17px;}
  .chip:hover .ci{background:color-mix(in srgb,var(--c) 22%,transparent);}
  .chip .n{margin-left:auto;min-width:22px;padding:1px 6px;border-radius:99px;text-align:center;font-size:12.5px;font-weight:600;color:var(--muted);background:var(--tint);font-variant-numeric:tabular-nums;}

  .search-status{margin-top:16px;font-size:14px;color:var(--muted);min-height:1.65em;}

  .ledger{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:stretch;}
  .svc{
    position:relative;background:var(--panel);overflow:hidden;
    border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
    display:grid;grid-template-columns:60px minmax(0,1fr) 40px;grid-template-rows:auto auto 1fr auto;
    align-items:center;column-gap:16px;padding:24px 16px 22px 24px;
    transition:background .2s,border-color .2s;
  }
  .svc:hover{border-color:var(--line-strong);}
  .svc-main{display:contents;}
  .svc .ico{grid-row:1 / span 2;grid-column:1;}
  .svc h3{grid-row:1;grid-column:2;align-self:end;}
  .svc .tag{grid-row:2;grid-column:2;align-self:start;justify-self:start;margin-top:6px;}
  .svc .pin{grid-row:1 / span 2;grid-column:3;align-self:start;}
  .svc .svc-desc{grid-row:3;grid-column:1 / -1;align-self:start;margin-top:18px;padding-right:8px;max-width:none;}
  .svc .svc-go{grid-row:4;grid-column:1 / -1;justify-self:stretch;margin-top:20px;min-width:0;}

  /* motif tenun NTT pada kartu layanan: kisi ikat yang memudar dari pojok kanan atas */
  .svc{isolation:isolate;padding-top:24px;}
  .svc::after{content:"";position:absolute;pointer-events:none;z-index:-1;background-color:var(--c);transition:opacity .25s;}
  .svc::after{top:0;right:0;width:68%;height:150px;opacity:.12;
    -webkit-mask-image:url(../img/card-lattice.svg),radial-gradient(circle at 100% 0,#000,transparent 72%);mask-image:url(../img/card-lattice.svg),radial-gradient(circle at 100% 0,#000,transparent 72%);
    -webkit-mask-size:22px 22px,100% 100%;mask-size:22px 22px,100% 100%;
    -webkit-mask-position:right top,0 0;mask-position:right top,0 0;
    -webkit-mask-repeat:repeat,no-repeat;mask-repeat:repeat,no-repeat;
    -webkit-mask-composite:source-in;mask-composite:intersect;}
  .svc:hover::after,.svc.pinned::after{opacity:.24;}

  /* ponsel: dua kartu per baris, tata letak disusun menumpuk agar muat */
  @media (max-width:640px){
    .ledger{gap:10px;}
    .ledger .svc{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto 1fr auto;column-gap:6px;padding:16px 12px 14px 14px;}
    .ledger .svc .ico{grid-row:1;grid-column:1;justify-self:start;width:46px;height:46px;border-radius:13px;}
    .ledger .svc .ico svg{width:27px;height:27px;}
    .ledger .svc .pin{grid-row:1;grid-column:2;align-self:start;width:34px;height:34px;margin:-6px -4px 0 0;}
    .ledger .svc h3{grid-row:2;grid-column:1 / -1;align-self:start;margin-top:12px;font-size:1.08rem;}
    .ledger .svc .tag{grid-row:3;grid-column:1 / -1;margin-top:6px;padding:1px 9px;font-size:11.5px;}
    .ledger .svc .svc-desc{grid-row:4;grid-column:1 / -1;margin-top:10px;padding-right:0;font-size:12.5px;line-height:1.5;}
    .ledger .svc .svc-go{grid-row:5;grid-column:1 / -1;margin-top:14px;padding:9px 12px;gap:6px;font-size:13px;line-height:1.25;white-space:normal;}
    .ledger .svc .svc-go svg{width:15px;height:15px;flex:none;}
    .svc::after{height:110px;}
  }
  @media (max-width:330px){ .ledger{grid-template-columns:minmax(0,1fr);} }
  .svc:hover{background:var(--panel-hover);}
  .ico{
    position:relative;width:60px;height:60px;border-radius:17px;
    color:var(--c);background:var(--tint);border:1px solid var(--line);
    display:grid;place-items:center;
  }
  @supports (color:color-mix(in srgb,red,blue)){
    .ico{
      background:linear-gradient(150deg,color-mix(in srgb,var(--c) 24%,transparent),color-mix(in srgb,var(--c) 7%,transparent));
      border-color:color-mix(in srgb,var(--c) 34%,transparent);
      box-shadow:inset 0 1px 0 color-mix(in srgb,var(--c) 18%,transparent),0 10px 22px -14px var(--c);
    }
  }
  .ico svg{width:34px;height:34px;overflow:visible;}
  .ico svg .f{fill:currentColor;fill-opacity:.2;}
  .ico svg .s{fill:currentColor;stroke:none;}
  .svc h3{font-family:var(--display);font-weight:540;font-size:1.45rem;line-height:1.15;letter-spacing:-.012em;transition:color .2s;}
  .svc:hover h3{color:var(--accent-ink);}
  .tag{display:flex;width:fit-content;align-items:center;margin-top:8px;padding:2px 11px;border-radius:99px;font-size:12.5px;font-weight:600;line-height:1.6;color:var(--c);background:var(--tint);background:color-mix(in srgb,var(--c) 12%,transparent);}
  .svc-desc{margin-top:10px;font-size:15px;line-height:1.6;color:var(--ink-soft);max-width:36em;}
  .svc-go{
    justify-self:end;display:inline-flex;align-items:center;justify-content:space-between;gap:10px;white-space:nowrap;min-width:172px;
    padding:10px 16px 10px 18px;border-radius:99px;border:1px solid var(--line-strong);
    font-weight:600;font-size:14.5px;color:var(--accent-ink);background:var(--tint);
    transition:background .2s,color .2s,border-color .2s;
  }
  .svc-go svg{width:17px;height:17px;transition:transform .2s;}
  .svc:hover .svc-go{background:var(--btn-bg);color:var(--btn-ink);border-color:transparent;}
  .svc:hover .svc-go svg{transform:translateX(3px);}
  a.stretch::after{content:"";position:absolute;inset:0;z-index:1;}
  a.stretch:focus-visible{outline:none;}
  a.stretch:focus-visible::after{outline:2px solid var(--accent);outline-offset:-4px;border-radius:calc(var(--radius) - 4px);}
  .pin{
    display:none;position:relative;z-index:2;width:40px;height:40px;border-radius:50%;
    display:grid;place-items:center;cursor:pointer;
    background:transparent;border:0;color:var(--muted);
    transition:color .2s,background .2s;
  }
  .js .pin{display:grid;}
  .pin:hover{background:var(--tint);color:var(--accent);}
  .pin svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;}
  .pin[aria-pressed="true"]{color:var(--accent);}
  .pin[aria-pressed="true"] svg{fill:currentColor;}
  .no-result{margin-top:18px;color:var(--muted);font-size:15px;}
  .no-result[hidden]{display:none;}

  /* ============ Tentang ============ */
  .about{background:color-mix(in srgb,var(--bg-2) 88%,transparent);border-top:1px solid var(--line);}
  .about-list{display:grid;}
  .about-item{display:grid;grid-template-columns:minmax(0,210px) minmax(0,1fr);gap:12px 36px;padding:30px 0;border-top:1px solid var(--line);}
  .about-item:first-child{border-top:0;padding-top:4px;}
  .about-item h3{font-family:var(--display);font-weight:540;font-size:1.45rem;line-height:1.2;letter-spacing:-.01em;}
  .about-item p{color:var(--ink-soft);max-width:38em;}
  .steps{margin:0;padding:0;list-style:none;counter-reset:s;display:grid;gap:12px;max-width:38em;color:var(--ink-soft);}
  .steps li{counter-increment:s;display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;}
  .steps li::before{content:counter(s);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;color:var(--accent);border:1px solid var(--line-strong);background:var(--tint);}
  .steps b{color:var(--ink);font-weight:600;}

  /* ============ Footer ============ */
  footer{background:var(--dark);color:#cfcbe0;}
  .strip{height:22px;background-color:var(--dark);background-repeat:repeat-x;background-position:center;background-image:url(../img/footer-strip.svg);border-bottom:1px solid rgba(216,178,94,.22);}
  .foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:44px;padding:56px 0 44px;}
  .foot-brand{display:flex;gap:16px;align-items:flex-start;}
  .foot-brand img{width:72px;height:72px;flex:none;}
  .foot-brand p{font-size:14.5px;color:#a9a5c0;max-width:22em;}
  .foot-brand strong{display:block;font-family:var(--display);font-weight:540;font-size:1.3rem;color:#f1ead8;margin-bottom:4px;letter-spacing:-.01em;}
  footer h4{font-size:14px;font-weight:700;color:#efd391;margin-bottom:14px;letter-spacing:.01em;}
  footer ul{list-style:none;padding:0;display:grid;gap:9px;font-size:14.5px;}
  footer ul a{color:#cfcbe0;transition:color .2s;}
  footer ul a:hover{color:#efd391;text-decoration:underline;text-underline-offset:4px;}
  .foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding:22px 0 30px;border-top:1px solid rgba(236,230,214,.12);font-size:13.5px;color:#9a97b3;}

  .to-top{
    position:fixed;right:20px;bottom:20px;z-index:40;width:46px;height:46px;border-radius:14px;
    display:grid;place-items:center;background:var(--panel);color:var(--ink);
    border:1px solid var(--line-strong);box-shadow:var(--shadow);
    opacity:0;pointer-events:none;translate:0 8px;transition:opacity .25s,translate .25s;
  }
  .to-top.show{opacity:1;pointer-events:auto;translate:0 0;}
  .to-top svg{width:20px;height:20px;}


  /* ============ Animasi saat scroll ============
     Elemen diberi kelas .rv oleh JavaScript, lalu masuk (.in) ketika terlihat di layar. */
  .js .rv{transition:opacity .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms);}
  .js .rv:not(.in){opacity:0;transform:translateY(26px);}
  .js .chip.rv:not(.in){transform:translateX(-14px);}
  /* kain tenun di hero bergeser pelan dan memudar saat halaman digulir ke bawah (peramban yang mendukung) */
  @keyframes loomOut{to{transform:translateY(-44px) scale(.95);opacity:.3;}}
  @supports (animation-timeline:view()){
    .loom{animation:loomOut linear both;animation-timeline:view();animation-range:exit 0% exit 90%;}
  }

  /* ============ Responsif ============ */
  @media (max-width:980px){
    .split{grid-template-columns:minmax(0,1fr);gap:28px;}
    .side{position:static;}
    .chips{display:flex;overflow-x:auto;gap:8px;margin-left:-28px;margin-right:-28px;padding:2px 28px 6px;scrollbar-width:none;}
    .chips::-webkit-scrollbar{display:none;}
    .chip{width:auto;flex:none;border-color:var(--line);gap:10px;}
    .svc{grid-template-columns:60px minmax(0,1fr) 40px;column-gap:16px;row-gap:0;align-items:center;padding:22px 12px 20px 20px;}
    .svc-main{display:contents;}
    .svc .ico{grid-row:1 / span 2;grid-column:1;}
    .svc h3{grid-row:1;grid-column:2;align-self:end;}
    .tag{grid-row:2;grid-column:2;align-self:start;justify-self:start;margin-top:6px;}
    .pin{grid-row:1 / span 2;grid-column:3;}
    .svc-desc{grid-row:3;grid-column:1 / -1;margin-top:14px;padding-right:8px;max-width:none;}
    .svc-go{grid-row:4;grid-column:1 / -1;justify-self:start;margin-top:12px;min-width:0;}
    .foot-grid{grid-template-columns:1fr 1fr;}
    .foot-brand{grid-column:1 / -1;}
  }
  @media (max-width:900px){
    .hero-grid{grid-template-columns:1fr;}
    .loom{height:230px;order:-1;}
    .medal{width:150px;height:150px;}
    .medal img{width:134px;height:134px;}
    .b-5,.b-6{display:none;}
    .loom-rows{padding:14px 0;}
  }
  @media (max-width:860px){
    .nav-toggle{display:inline-grid;}
    .nav-links{
      display:none;position:absolute;left:0;right:0;top:100%;
      flex-direction:column;align-items:stretch;gap:2px;padding:12px 20px 20px;
      background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 24px 40px -24px rgba(0,0,0,.6);
    }
    .nav-chk:checked ~ .nav-links{display:flex;}
    .nav-links .link{padding:13px 12px;font-size:16px;}
    .nav-links .btn{margin-top:8px;padding:13px 18px;font-size:15px;}
    .about-item{grid-template-columns:1fr;}
  }
  @media (max-width:560px){
    .wrap{padding:0 20px;}
    .chips{margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px;}
    .brand span{font-size:14px;}
    .brand .pt{display:none;}
    .cta-row .btn{flex:1 1 100%;}
    .svc h3{font-size:1.4rem;}
    .section{padding:48px 0;}
    .hero{padding:28px 0 48px;}
    .hero-note{margin-top:26px;}
    .foot-grid{grid-template-columns:1fr;gap:32px;}
  }
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    *,*::before,*::after{animation:none !important;transition-duration:.01ms !important;}
  }
  /* "kurangi gerakan": animasi scroll tetap ada, tetapi hanya memudar pelan tanpa bergeser */
  @media (prefers-reduced-motion:reduce){
    .js .rv,.js .rv::before{transition-duration:.6s !important;}
    .js .rv:not(.in),.js .chip.rv:not(.in){transform:none;}
  }
  /* jeda anyaman per baris (tanpa atribut style agar patuh CSP) */
  .rows .b:nth-child(1){--i:0;}
  .rows .b:nth-child(2){--i:1;}
  .rows .b:nth-child(3){--i:2;}
  .rows .b:nth-child(4){--i:3;}
  .rows .b:nth-child(5){--i:4;}
  .rows .b:nth-child(6){--i:5;}