:root{--g:#a4e34a;--g-d:#8fce38;--ink:#2b2b2b;--ink-2:#444;--ink-3:#6b6b6b;--bg-2:#f3f7f8;--line:#e2e8ea;--r:6px;--r-lg:10px;--wrap:970px}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--ink);background:#f9f9f9;line-height:1.65;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input{font-family:inherit}
svg{display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:#fff;padding:9px 14px;border:1px solid var(--line);border-radius:var(--r)}
:focus-visible{outline:2px solid var(--g-d);outline-offset:2px}

/* ---------- header ----------
   Acuan memakai bilah terang yang ikut warna halaman, bukan bilah gelap:
   latarnya transparan dan hanya dipisahkan garis rambut di bawah. Header
   tidak lengket — ia menggulung pergi bersama halaman. */
.hd{background:transparent;color:var(--ink);border-bottom:1px solid #d4d4d4;padding:14px 0}
/* Dua kolom, bukan flex+margin-auto: kolom kiri memegang logo, kolom kanan
   memegang daftar tautan yang rata kanan. Ini yang membuat logo tetap di
   tempatnya walau jumlah tautan berubah. */
.hd__nav{max-width:var(--wrap);margin:0 auto;padding:0 10px;display:grid;grid-template-columns:auto 1fr;align-items:center;min-height:40px}
.hd__burger{display:none;background:none;border:0;color:var(--ink);padding:0;cursor:pointer;width:24px;height:24px}
.logo{display:flex;align-items:center;gap:9px;font-size:22px;font-weight:700;white-space:nowrap;color:var(--ink)}
.logo__mark{width:28px;height:28px;flex:none;color:var(--g)}
.logo__mark svg{width:28px;height:28px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* Jarak antartautan 25px diukur dari acuan; teks 16px warna #333 supaya
   terbaca di latar terang tanpa menandingi judul hero. */
.hd__links{list-style:none;display:flex;gap:25px;justify-content:flex-end;align-items:center}
.hd__links a{color:#333;font-size:16px;font-weight:400}
.hd__links a:hover{color:var(--ink);text-decoration:underline}

.form{padding:46px 0 34px;text-align:center}
.form__title{font-size:33px;font-weight:700;line-height:1.28;margin-bottom:8px}
.form__sub{color:var(--ink-3);font-size:16px;margin-bottom:22px}
.form__form{display:flex;gap:8px;max-width:760px;margin:0 auto;align-items:stretch}
.form__input{flex:1;min-width:0;height:52px;border:2px solid var(--line);border-radius:var(--r);padding:0 15px;font-size:15.5px;outline:none}
.form__input:focus{border-color:var(--g-d)}
.form__paste{height:52px;padding:0 17px;border:2px solid var(--line);background:#fff;border-radius:var(--r);font-size:14px;font-weight:600;color:var(--ink-2);cursor:pointer}
.form__paste:hover{border-color:var(--g-d)}
.form__btn{height:52px;padding:0 26px;border:0;border-radius:var(--r);background:var(--g);color:#1d3d00;font-size:16px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:8px}
.form__btn svg{width:19px;height:19px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.form__btn:hover{background:var(--g-d)}
.form__btn:disabled{opacity:.65;cursor:default}

.loader{display:none;width:30px;height:30px;margin:22px auto 0;border:3px solid var(--line);border-top-color:var(--g-d);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.loader{animation-duration:2.4s}}
.result{display:none;max-width:760px;margin:22px auto 0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;text-align:left;background:#fff}
.result__top{display:flex;gap:12px;padding:14px}
.result__meta h3{font-size:15.5px;font-weight:700;margin-bottom:3px}
.result__meta p{color:var(--ink-3);font-size:13px}
.result__demo{padding:10px 14px;background:#fff8e1;border-top:1px solid #f0e2b0;font-size:12.5px;color:#7a5c00}

.svc{background:var(--bg-2);padding:30px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.svc__main{list-style:none;display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.svc__card{display:flex;flex-direction:column;align-items:center;gap:7px;width:118px;padding:15px 8px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);font-size:13px;font-weight:500;text-align:center}
.svc__card small{color:var(--ink-3);font-size:11.5px;font-weight:400;line-height:1.4}
.svc__ico{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff}
.svc__ico svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.svc__more{list-style:none;display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:16px}
.svc__more li{display:flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:99px;padding:6px 14px;font-size:13px;color:var(--ink-2)}
.svc__more .d{width:9px;height:9px;border-radius:50%;flex:none}

.how{padding:44px 0}
.how h2{text-align:center;font-size:25px;font-weight:700;margin-bottom:28px}
.how__list{list-style:none;display:flex;align-items:flex-start;justify-content:center;gap:18px}
.how__step{flex:1;min-width:0;max-width:300px;text-align:center}
.how__num{width:42px;height:42px;margin:0 auto 12px;border-radius:50%;background:var(--g);color:#1d3d00;display:grid;place-items:center;font-weight:700;font-size:18px}
.how__step h3{font-size:16px;font-weight:700;margin-bottom:6px}
.how__step p{color:var(--ink-3);font-size:14.5px}
.how__arrow{flex:none;padding-top:16px;color:#c9d4d7}
.how__arrow svg{width:26px;height:14px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}

.feat{background:var(--bg-2);padding:40px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.feat__list{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px}
.feat__el{text-align:center}
.feat__el>svg{width:36px;height:36px;margin:0 auto 12px;stroke:var(--g-d);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.feat__el h3{font-size:16px;font-weight:700;margin-bottom:6px}
.feat__el p{color:var(--ink-3);font-size:14.5px}
.feat__el p+p{margin-top:8px}

.art{padding:44px 0}
.art h2{font-size:25px;font-weight:700;margin-bottom:14px}
.art h3{font-size:18px;font-weight:700;margin:24px 0 10px}
.art p{color:var(--ink-2);font-size:15.5px;margin-bottom:12px}

.faq{background:var(--bg-2);padding:44px 0;border-top:1px solid var(--line)}
.faq__title{text-align:center;font-size:25px;font-weight:700;margin-bottom:24px}
.faq__box{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.faq__item+.faq__item{border-top:1px solid var(--line)}
.faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;background:none;border:0;padding:15px 17px;font-size:15.5px;font-weight:600;cursor:pointer;text-align:left}
.faq__arrow svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;transition:transform .18s}
.faq__item.open .faq__arrow svg{transform:rotate(180deg)}
.faq__a{display:none;padding:0 17px 15px;color:var(--ink-3);font-size:14.5px}
.faq__a p+p{margin-top:9px}
.faq__item.open .faq__a{display:block}

.note{border:1px dashed #d9b400;background:#fff8e1;border-radius:var(--r);padding:15px 17px;font-size:13.5px;line-height:1.75;color:#7a5c00;margin:26px 0}
.note p+p{margin-top:9px}
.empty-public{text-align:center;padding:50px 20px;color:var(--ink-3)}
.empty-public h2{font-size:20px;color:var(--ink);margin-bottom:8px}

.ft{background:#1f1f1f;color:#b9b9b9;padding:28px 0;font-size:14px;text-align:center}
.ft__bar{border-top:1px solid #2e2e2e;margin-top:16px;padding-top:16px;color:#7d7d7d;font-size:12px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

@media(max-width:860px){
  .how__list{flex-direction:column;align-items:center;gap:22px}
  .how__arrow{display:none}
  .how__step{max-width:340px}
}
/* Di bawah 768px acuan menyembunyikan daftar tautan dan memunculkan tombol
   menu 24px di kolom kiri, sementara logo bergeser ke kolom kanan yang
   melebar. Urutan kolom dibalik lewat grid, bukan lewat margin:auto. */
@media(max-width:768px){
  .hd__nav{grid-template-columns:24px 1fr;padding:0 10px;column-gap:0}
  .hd__burger{display:flex;align-items:center;justify-content:center}
  .hd__links{display:none;position:absolute;left:0;right:0;top:69px;background:#fff;flex-direction:column;gap:0;padding:6px 0;border-bottom:1px solid #d4d4d4;z-index:30}
  .hd__links.on{display:flex}
  .hd__links li{width:100%}
  .hd__links a{display:block;padding:12px 20px}
  .logo{font-size:19px;justify-content:center}
  .form{padding:32px 0 26px}
  .form__title{font-size:24px}
  .form__form{flex-wrap:wrap}
  .form__input{flex:1 1 100%;height:48px}
  .form__paste{flex:1;height:48px}
  .form__btn{flex:1;height:48px;justify-content:center;padding:0 18px}
  .art h2,.how h2,.faq__title{font-size:21px}
  .ft__bar{flex-direction:column;gap:6px}
}

/* Logo unggahan menggantikan ikon bawaan; tinggi dikunci agar header
   tidak melompat mengikuti proporsi gambar yang diunggah operator.
   Acuan memakai logo 167x40.
   Tinggi disetel mendekati tinggi kolom pencarian supaya logo terbaca,
   bukan sekadar menempel kecil di sudut. */
.brand-logo{height:40px;width:auto;max-width:167px;object-fit:contain;display:block}

/* ---- Blok penjelasan halaman depan ---- */
.page-note{margin:36px auto 8px;max-width:72ch;padding:20px 0 0;border-top:1px solid var(--line,#23262e)}
.page-note h2{margin:0 0 10px;font-size:15px;letter-spacing:-.01em}
.page-note p{margin:0 0 10px;color:var(--muted,#98a0ae);font-size:13px;line-height:1.75}
.page-note p:last-child{margin-bottom:0}

.form__eyebrow{margin:0 0 6px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.75}

/* === penyelarasan tampilan dengan acuan === */
:root{--g:#7ED214;--g-d:#6cbb0d}

/* Kotak pencarian jadi fokus utama: bingkai tebal warna aksen, sudut siku.
   Ini yang paling menentukan kemiripan dengan acuan. */
.form__input{height:50px;border:5px solid var(--g);border-radius:0;padding:0 14px;background:#fff}
.form__input:focus{border-color:var(--g-d)}
.form__input::placeholder{color:#9aa0a6}

/* Tombol utama: satu warna aksen penuh, teks putih tebal, sudut siku.
   Ukuran disamakan dengan kotak input supaya keduanya terbaca satu baris. */
.form__btn{height:50px;border-radius:0;background:var(--g);color:#fff;font-weight:700;font-size:14px}
.form__btn:hover{background:var(--g-d)}
.form__btn svg{stroke:#fff;width:18px;height:18px}

.form__paste{height:50px;border-radius:0;border:2px solid var(--line);color:#333}
.form__paste:hover{border-color:var(--g)}

/* Tipografi disamakan: acuan memakai Roboto hanya untuk judul, dan
   Helvetica/Arial untuk teks isi. */
body{font-family:Arial,Helvetica,sans-serif}
.form__title,.how h2,.feat__el h3,.faq__title,.svc__card,.art h2,.art h3{font-family:Roboto,sans-serif}
.form__title{font-size:30px;color:#434343}
.form__sub{color:#5f5f5f}

/* Jarak hero dirapatkan sedikit supaya form terlihat tepat di bawah judul. */
.form{padding:42px 0 30px}

/* ---- Satu permukaan rata ----
   Acuan memakai satu latar #f9f9f9 tanpa putus dari header sampai kaki
   halaman. Pita berwarna selang-seling membuat halaman terbaca sebagai
   produk lain, jadi latar blok disamakan dan pemisahnya cukup garis rambut. */
.svc,.feat,.faq{background:transparent}
.svc{border-top:1px solid #e6e6e6;border-bottom:1px solid #e6e6e6}
.feat{border-top:1px solid #e6e6e6;border-bottom:1px solid #e6e6e6}
.faq{border-top:1px solid #e6e6e6}

/* Kartu tetap putih supaya tetap terbaca di atas latar terang. */
.svc__card,.svc__more li,.faq__box{background:#fff}

/* ---- Kaki halaman terang ----
   Acuan tidak memakai blok gelap di bawah; warnanya menyatu dengan badan
   halaman dan hanya dipisahkan garis. Teks #333 di atas #f9f9f9 tetap
   punya kontras yang aman dibaca. */
.ft{background:transparent;color:#333;border-top:1px solid #d4d4d4}
.ft__bar{border-top:1px solid #e0e0e0;color:#666}
.ft a{color:#006caa}

@media(max-width:768px){
  .form__input{height:48px;border-width:4px}
  .form__btn,.form__paste{height:48px}
  .form__title{font-size:24px}
}

/* platform-logo */
.svc__logo{width:26px;height:26px;object-fit:contain;display:block;border-radius:6px}
.svc__dot-logo{width:18px;height:18px;object-fit:contain;display:block;border-radius:4px;flex:0 0 auto}
.svc__card.is-link{color:inherit;text-decoration:none;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.svc__card.is-link:hover{border-color:var(--brand,#1f6feb);box-shadow:0 4px 14px rgba(15,23,42,.10);transform:translateY(-2px)}
.svc__card.is-link:focus-visible{outline:2px solid var(--brand,#1f6feb);outline-offset:2px}
.svc__more-link{display:flex;align-items:center;gap:7px;color:inherit;text-decoration:none}
.svc__more li:has(.svc__more-link){padding:0}
.svc__more li:has(.svc__more-link) .svc__more-link{padding:6px 14px;border-radius:99px}
.svc__more li:has(.svc__more-link):hover{border-color:var(--brand,#1f6feb)}
.svc__more-link:focus-visible{outline:2px solid var(--brand,#1f6feb);outline-offset:2px;border-radius:99px}
@media (prefers-reduced-motion:reduce){.svc__card.is-link{transition:none}.svc__card.is-link:hover{transform:none}}

/* dl-hasil */
.result__links{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}
.dlbtn{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink-1,#14161a);font-size:13px;font-weight:600;text-decoration:none;line-height:1.2;transition:border-color .15s ease,background .15s ease,transform .15s ease}
.dlbtn:hover{border-color:var(--brand,#1f6feb);background:#f6f9ff;transform:translateY(-1px)}
.dlbtn:focus-visible{outline:2px solid var(--brand,#1f6feb);outline-offset:2px}
.dlbtn--utama{background:var(--brand,#1f6feb);border-color:var(--brand,#1f6feb);color:#fff}
.dlbtn--utama:hover{background:#1a5fd0;border-color:#1a5fd0}
.dlbtn--audio{border-style:dashed}
@media (prefers-reduced-motion:reduce){.dlbtn{transition:none}.dlbtn:hover{transform:none}}