/* =====================================================================
   Hanguk: halaman sambutan (landing page) untuk pengunjung baru.
   Navy dan merah, terpisah dari tema aplikasi; semua kelas berawalan lp-
   agar tidak bertabrakan dengan app.css/design.css. Gambar: img/sambut/.
   ===================================================================== */
.lp{
  --lp-navy:#0A2A57; --lp-navy-2:#0E3E77; --lp-navy-3:#061C3B; --lp-blue:#1455A3; --lp-blue-2:#1F6BD1;
  --lp-red:#D91A2A; --lp-red-2:#F0313F; --lp-red-soft:rgba(217,26,42,.10);
  --lp-bg:#FFFFFF; --lp-soft:#F3F6FB; --lp-card:#FFFFFF; --lp-ink:#0D2C58; --lp-text:#33445E; --lp-muted:#5B6B82; --lp-line:#E1E8F1;
  --lp-shadow:0 1px 2px rgba(10,42,87,.05),0 10px 28px -14px rgba(10,42,87,.22);
  --lp-r:16px;
  background:var(--lp-bg); color:var(--lp-text); font-family:"Plus Jakarta Sans","Noto Sans KR",system-ui,sans-serif;
  font-size:16px; line-height:1.6; min-height:100svh; overflow-x:clip;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .lp{--lp-bg:#06142A;--lp-soft:#0A1D3A;--lp-card:#0D2345;--lp-ink:#EAF1FB;--lp-text:#C9D6E8;--lp-muted:#9DB0CA;--lp-line:#1C355B;--lp-red-soft:rgba(240,49,63,.16);--lp-shadow:0 1px 2px rgba(0,0,0,.3),0 12px 30px -14px rgba(0,0,0,.6)}
}
:root[data-theme="dark"] .lp{--lp-bg:#06142A;--lp-soft:#0A1D3A;--lp-card:#0D2345;--lp-ink:#EAF1FB;--lp-text:#C9D6E8;--lp-muted:#9DB0CA;--lp-line:#1C355B;--lp-red-soft:rgba(240,49,63,.16);--lp-shadow:0 1px 2px rgba(0,0,0,.3),0 12px 30px -14px rgba(0,0,0,.6)}
body.bare:has(.lp){background:var(--lp-bg,#fff)}
.lp *,.lp *::before,.lp *::after{box-sizing:border-box}
.lp h1,.lp h2,.lp h3{color:var(--lp-ink);margin:0;letter-spacing:-.03em;line-height:1.15}
.lp p{margin:0}
.lp a{color:inherit}
.lp svg{width:1.2em;height:1.2em;flex-shrink:0}
.lp [lang="ko"]{font-family:"Noto Sans KR",sans-serif;font-weight:700}
.lp-wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}

/* ---------- tombol ---------- */
.lp-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:11px 20px;border-radius:12px;border:1px solid transparent;font:inherit;font-size:.92rem;font-weight:800;line-height:1.2;text-decoration:none;cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s;white-space:nowrap}
.lp-btn:hover{transform:translateY(-2px)}
.lp-btn:active{transform:translateY(0)}
.lp-btn.lp-lg{min-height:52px;padding:14px 24px;font-size:1rem}
.lp-red{background:linear-gradient(160deg,var(--lp-red-2),var(--lp-red));color:#fff!important;box-shadow:0 10px 22px -10px rgba(217,26,42,.7)}
.lp-blue{background:var(--lp-blue);color:#fff!important;box-shadow:0 10px 22px -12px rgba(20,85,163,.7)}
.lp-ghost{background:transparent;color:var(--lp-ink);border-color:var(--lp-line)}
.lp-ghost:hover{border-color:var(--lp-ink)}
.lp-glass{background:rgba(255,255,255,.08);color:#fff!important;border-color:rgba(255,255,255,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.lp-glass:hover{background:rgba(255,255,255,.16)}
.lp :focus-visible{outline:3px solid #FFC23D;outline-offset:3px}

/* ---------- menu atas ---------- */
.lp-top{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--lp-bg) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;padding-top:env(safe-area-inset-top,0px);transition:border-color .2s,box-shadow .2s}
.lp-top.scrolled{border-bottom-color:var(--lp-line);box-shadow:0 8px 24px -18px rgba(10,42,87,.4)}
.lp-nav{display:flex;align-items:center;gap:14px;height:70px}
.lp-brand{display:flex;align-items:center;gap:11px;border:0;background:none;padding:0;cursor:pointer;color:var(--lp-ink);text-align:left;font:inherit;flex-shrink:0}
.lp-brand .logo{width:40px;height:40px;font-size:1.25rem}
.lp-brand b{display:block;font-size:1.15rem;font-weight:800;letter-spacing:.06em;line-height:1.1}
.lp-brand small{display:block;font-size:.75rem;font-weight:600;color:var(--lp-muted);letter-spacing:0}
.lp-links{display:flex;align-items:center;justify-content:center;gap:4px;flex:1}
.lp-links button{position:relative;border:0;background:none;font:inherit;font-size:.92rem;font-weight:700;color:var(--lp-ink);padding:10px 12px;cursor:pointer;border-radius:8px;white-space:nowrap}
.lp-links button:hover{color:var(--lp-red)}
.lp-links button[aria-current]::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:3px;border-radius:3px;background:var(--lp-red)}
.lp-only-menu{display:none!important}
.lp-hamb{display:none;place-items:center;width:44px;height:44px;border:1px solid var(--lp-line);border-radius:12px;background:var(--lp-card);color:var(--lp-ink);cursor:pointer}
.lp-hamb svg{width:22px;height:22px}

/* ---------- hero ---------- */
.lp-hero{position:relative;display:flex;flex-direction:column;overflow:hidden;color:#fff;
  background:radial-gradient(900px 500px at 85% 20%,rgba(31,107,209,.45),transparent 60%),radial-gradient(600px 400px at 0% 100%,rgba(217,26,42,.18),transparent 60%),linear-gradient(105deg,var(--lp-navy-3),var(--lp-navy) 45%,var(--lp-navy-2))}
.lp-hero-bg{position:absolute;top:0;right:0;bottom:0;width:58%;display:grid;place-items:center}
.lp-hero-art{width:min(100%,560px);padding:24px 32px;opacity:.95}
.lp-hero-art .hero-art{padding:0}
.lp-hero-art .hero-art svg{width:100%;height:auto;max-height:none}
.lp-hero-art .hero-art>span{display:none}
/* hero.webp panorama 3:1 (2171x724): gadis berkimono di sekitar 70% dari kiri, sisi kiri langit/Fuji/sakura
   untuk area teks. Foto mengisi seluruh hero (cover); di HP tampil 3:2 di bawah teks dengan potongan ke arah gadis.
   Sisi kiri digelapkan tipis agar teks terbaca */
.lp-hero-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.lp-hero-bg.ada-foto{width:100%}
.lp-hero-bg.ada-foto .lp-hero-art{display:none}
/* foto terlihat utuh seperti gambar sumber; hanya area teks di kiri yang digelapkan tipis agar terbaca */
.lp-hero-bg.ada-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,28,59,.82) 0%,rgba(6,28,59,.62) 32%,rgba(6,28,59,.18) 50%,transparent 62%),linear-gradient(0deg,rgba(6,28,59,.55),transparent 26%)}
.lp-hero:has(.ada-foto) .lp-hero-copy{text-shadow:0 2px 14px rgba(4,16,38,.45)}
.lp-hero-in{position:relative;z-index:1;display:flex;align-items:center;min-height:min(560px,calc(100svh - 70px));padding-top:48px;padding-bottom:48px}
.lp-hero-copy{max-width:600px}
.lp-eyebrow{display:flex;align-items:center;gap:12px;font-size:.78rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--lp-ink);margin-bottom:14px!important}
.lp-eyebrow::before{content:"";width:26px;height:6px;border-radius:6px;background:var(--lp-red);flex-shrink:0}
.lp-hero .lp-eyebrow{color:#fff}
.lp-hero h1{color:#fff;font-size:clamp(2.2rem,5vw,3.75rem);font-weight:800;letter-spacing:-.045em;line-height:1.05;margin-bottom:20px}
.lp-hero h1 em{position:relative;font-style:normal;color:#FF3A48;white-space:nowrap}
.lp-hero h1 em::after{content:"";position:absolute;left:2%;right:-2%;bottom:-.12em;height:.13em;border-radius:99px;background:var(--lp-red-2);transform:rotate(-1.5deg)}
.lp-lead{font-size:1.06rem;line-height:1.7;color:#DCE7F7;max-width:54ch}
.lp-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.lp-perks{list-style:none;margin:34px 0 0;padding:20px 0 0;display:grid;grid-template-columns:repeat(4,auto);gap:12px 26px;border-top:1px solid rgba(255,255,255,.14);justify-content:start}
.lp-perks li{display:flex;align-items:center;gap:10px;font-size:.88rem;line-height:1.35;color:#DCE7F7}
.lp-perks li b{display:block;color:#fff;font-weight:800}
.lp-perks svg{width:28px;height:28px;color:#fff;opacity:.9}

/* ---------- judul bagian ---------- */
.lp-intro h2,.lp-head h2{font-size:clamp(1.7rem,3vw,2.3rem);font-weight:800}
.lp-intro p:not(.lp-eyebrow),.lp-head p:not(.lp-eyebrow){margin-top:12px!important;color:var(--lp-muted);font-size:1rem;line-height:1.7}

/* ---------- sektor kerja ---------- */
.lp-sektor{padding:72px 0;background:var(--lp-bg)}
.lp-sektor-in{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:36px;align-items:start}
.lp-sektor .lp-intro{position:sticky;top:96px}
.lp-sektor .lp-btn{margin-top:22px}
.lp-sektor-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.lp-kartu{position:relative;display:flex;flex-direction:column;border-radius:var(--lp-r);background:var(--lp-card);border:1px solid var(--lp-line);box-shadow:var(--lp-shadow);overflow:hidden;transition:transform .25s,box-shadow .25s}
.lp-kartu-img{position:relative;height:168px;overflow:hidden;background:linear-gradient(150deg,#1D5FB8,var(--lp-navy) 75%)}
.lp-kartu-ganti{position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.22)}
.lp-kartu-ganti svg{width:96px;height:96px;stroke-width:1.2}
.lp-kartu-img::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 10%,rgba(255,255,255,.18),transparent 45%)}
.lp-kartu .lp-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%;transition:transform .5s}
/* ikon besar dan kilau hanya pengganti saat foto belum ada; tidak boleh menimpa foto */
.lp-kartu-img.ada-foto .lp-kartu-ganti,.lp-kartu-img.ada-foto::before{display:none}
.lp-kartu-ic{position:absolute;left:16px;top:142px;z-index:2;display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:var(--lp-blue-2);color:#fff;border:3px solid var(--lp-card);box-shadow:0 6px 14px -6px rgba(10,42,87,.5)}
.lp-kartu-ic svg{width:24px;height:24px}
.lp-kartu-isi{padding:34px 18px 20px}
.lp-kartu h3{font-size:1.05rem;font-weight:800;margin-bottom:8px}
.lp-kartu p{font-size:.92rem;line-height:1.6;color:var(--lp-muted)}
.lp-kartu p b{color:var(--lp-text)}

/* ---------- program ---------- */
.lp-program{position:relative;padding:72px 0;color:#fff;overflow:hidden;
  background:radial-gradient(700px 380px at 10% 0%,rgba(31,107,209,.35),transparent 60%),linear-gradient(105deg,#06366E,#052A57 55%,#04224A)}
.lp-program::before{content:"";position:absolute;inset:0;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.2'%3E%3Cpath d='M0 24h48M24 0v48M0 0l48 48M48 0L0 48'/%3E%3Crect x='14' y='14' width='20' height='20' transform='rotate(45 24 24)'/%3E%3C/g%3E%3C/svg%3E");mask-image:linear-gradient(90deg,#000,transparent 70%)}
.lp-program-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:30px}
.lp-program h2{color:#fff}
.lp-program .lp-eyebrow{color:#fff}
.lp-program-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.lp-prog{display:flex;flex-direction:column;gap:14px;padding:22px 20px;border-radius:var(--lp-r);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);transition:background .2s,transform .2s}
.lp-prog-ic{display:grid;place-items:center;flex-shrink:0;align-self:flex-start;width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.1);color:#fff}
.lp-prog-ic svg{width:26px;height:26px}
.lp-prog h3{color:#fff;font-size:1.02rem;font-weight:800;margin-bottom:8px}
.lp-prog h3 em{display:inline-block;font-style:normal;font-size:.72rem;font-weight:800;letter-spacing:.04em;padding:3px 8px;border-radius:99px;background:#FFC23D;color:#3A2600;vertical-align:2px;margin-left:4px}
.lp-prog p{font-size:.9rem;line-height:1.6;color:#CFDDF0}

/* ---------- materi ---------- */
.lp-materi{padding:76px 0;background:var(--lp-soft)}
.lp-head{max-width:720px;margin-bottom:34px}
.lp-langkah{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;counter-reset:x}
.lp-tahap{padding:22px 20px;border-radius:var(--lp-r);background:var(--lp-card);border:1px solid var(--lp-line);box-shadow:var(--lp-shadow)}
.lp-tahap-no{display:inline-block;font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--lp-red);background:var(--lp-red-soft);padding:5px 10px;border-radius:8px;margin-bottom:12px}
.lp-tahap h3{font-size:1.08rem;font-weight:800;margin-bottom:10px}
.lp-tahap h3 span{display:block;font-size:.9rem;color:var(--lp-muted);margin-top:4px;letter-spacing:0}
.lp-tahap p{font-size:.92rem;color:var(--lp-muted)}
.lp-tahap ol{margin:0;padding-left:1.8em;font-size:.9rem;line-height:1.45;color:var(--lp-text);display:grid;gap:5px}
.lp-tahap ol li::marker{color:var(--lp-muted);font-weight:700;font-size:.85em}
.lp-tahap{display:flex;flex-direction:column;align-items:flex-start}
/* cuplikan topik: beberapa bab saja, sisanya "terkunci" agar pengunjung membukanya di mode demo */
.lp-cuplik{list-style:none;margin:4px 0 18px;padding:0;display:grid;gap:8px;width:100%}
.lp-cuplik li{display:flex;flex-direction:column;gap:1px;padding:10px 12px;border-radius:10px;background:var(--lp-soft);font-size:.92rem;font-weight:700;color:var(--lp-ink);line-height:1.35}
.lp-cuplik li small{font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--lp-muted)}
.lp-cuplik .lp-sisa{flex-direction:row;align-items:center;gap:8px;background:none;border:1.5px dashed var(--lp-line);color:var(--lp-muted);font-weight:600}
.lp-cuplik .lp-sisa svg{width:16px;height:16px}
.lp-intip{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:.92rem;color:var(--lp-blue-2);text-decoration:none}
.lp-intip svg{transition:transform .2s}
@media (hover:hover){.lp-intip:hover svg{transform:translateX(4px)}}
.lp-tahap-hangul{background:linear-gradient(160deg,var(--lp-navy),var(--lp-navy-2));border-color:transparent;color:#DCE7F7}
.lp-tahap-hangul h3{color:#fff}
.lp-tahap-hangul h3 span,.lp-tahap-hangul p{color:#C6D6EE}
.lp-tahap-hangul .lp-tahap-no{background:rgba(255,255,255,.12);color:#fff}
.lp-tahap-hangul ul{list-style:none;margin:16px 0 22px;padding:0;display:grid;gap:9px;font-size:.9rem;line-height:1.45;color:#E4EDF9}
.lp-tahap-hangul li{display:flex;gap:9px}
.lp-tahap-hangul li::before{content:"";flex-shrink:0;width:7px;height:7px;margin-top:.5em;border-radius:50%;background:var(--lp-red-2)}
.lp-tahap-hangul .lp-btn{margin-top:auto}

/* ---------- FAQ ---------- */
.lp-faq{padding:76px 0;background:var(--lp-bg)}
.lp-faq-in{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:36px;align-items:start}
.lp-faq-list{display:grid;gap:10px}
.lp-faq details{border:1px solid var(--lp-line);border-radius:14px;background:var(--lp-card);transition:border-color .2s}
.lp-faq details[open]{border-color:var(--lp-blue-2);box-shadow:var(--lp-shadow)}
.lp-faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;font-weight:700;color:var(--lp-ink);cursor:pointer;list-style:none}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary::after{content:"+";flex-shrink:0;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--lp-soft);color:var(--lp-blue-2);font-size:1.2rem;font-weight:700;transition:transform .2s}
.lp-faq details[open] summary::after{transform:rotate(45deg)}
.lp-faq details p{padding:0 20px 18px;color:var(--lp-muted);font-size:.95rem;line-height:1.7}

/* ---------- ajakan dan kaki ---------- */
.lp-ajak{padding:0 0 76px;background:var(--lp-bg)}
.lp-ajak-in{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:40px;padding-bottom:40px;border-radius:24px;color:#fff;
  background:radial-gradient(500px 260px at 100% 0%,rgba(240,49,63,.35),transparent 60%),linear-gradient(110deg,var(--lp-navy-3),var(--lp-navy-2))}
.lp-ajak-in{width:calc(100% - 2 * clamp(16px,4vw,40px));max-width:calc(1240px - 2 * clamp(16px,4vw,40px));padding-left:clamp(22px,4vw,48px);padding-right:clamp(22px,4vw,48px)}
.lp-ajak h2{color:#fff;font-size:clamp(1.4rem,2.6vw,2rem);font-weight:800}
.lp-ajak p{color:#CFDDF0;margin-top:8px!important}
.lp-ajak .lp-cta{margin-top:0}
.lp-foot{background:var(--lp-navy-3);color:#A9BBD4;padding:28px 0 calc(28px + env(safe-area-inset-bottom,0px));font-size:.85rem}
.lp-foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px}
.lp-foot b{color:#fff;letter-spacing:.08em}
.lp-foot a{color:#fff;text-decoration:none;font-weight:700}
.lp-foot a:hover{text-decoration:underline}

@media (hover:hover){
  .lp-kartu:hover{transform:translateY(-4px);box-shadow:0 22px 40px -22px rgba(10,42,87,.45)}
  .lp-kartu:hover .lp-foto{transform:scale(1.05)}
  .lp-prog:hover{background:rgba(255,255,255,.11);transform:translateY(-3px)}
}

/* ---------- layar sedang ---------- */
/* judul di atas kartu: empat kartu sektor/program butuh lebar penuh */
@media (max-width:1320px){
  .lp-sektor-in{grid-template-columns:minmax(0,1fr);gap:28px}
  .lp-sektor .lp-intro{position:static;max-width:680px}
}
@media (max-width:1180px){
  .lp-faq-in{grid-template-columns:minmax(0,1fr);gap:28px}
  .lp-faq .lp-intro{max-width:640px}
  .lp-langkah{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp-perks{grid-template-columns:repeat(2,auto)}
}
@media (max-width:1100px){
  .lp-nav .lp-pjg{display:none}
}
/* layar lebar: hero pendek (maks. 540px), judul cukup 2 baris; teks diberi bayangan tegas
   karena lapisan merah di kiri dibuat tipis (semi transparan) */
@media (min-width:861px){
  .lp-hero-in{min-height:min(540px,calc(100svh - 70px));padding-top:40px;padding-bottom:40px}
  .lp-hero-copy{max-width:680px}
  .lp-hero:has(.ada-foto) .lp-hero-copy{text-shadow:0 1px 3px rgba(48,6,16,.55),0 3px 22px rgba(48,6,16,.5)}
  .lp-hero .lp-cta .lp-red{text-shadow:none}
  .lp-hero-foto{object-position:72% 35%}
}
@media (max-width:980px){
  .lp-links button{padding:10px 8px;font-size:.88rem}
  .lp-masuk{display:none}
  .lp-sektor-grid,.lp-program-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- HP ---------- */
@media (max-width:860px){
  .lp-nav{height:64px;gap:10px}
  .lp-brand{flex:1;min-width:0}
  .lp-brand .logo{width:36px;height:36px;font-size:1.1rem}
  .lp-brand b{font-size:1.05rem}
  .lp-hamb{display:grid}
  .lp-nav>.lp-red{min-height:44px;padding:10px 14px;font-size:.85rem}
  .lp-links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;padding:8px 16px 18px;background:var(--lp-bg);border-bottom:1px solid var(--lp-line);box-shadow:0 18px 30px -18px rgba(10,42,87,.35)}
  .lp-links.open{display:flex}
  .lp-links button{text-align:left;padding:14px 4px;font-size:1rem;border-radius:0;border-bottom:1px solid var(--lp-line)}
  .lp-links button[aria-current]::after{left:auto;right:4px;top:50%;bottom:auto;width:8px;height:8px;border-radius:50%;transform:translateY(-50%)}
  .lp-only-menu{display:inline-flex!important;margin-top:14px}
  .lp-hero-bg{position:relative;order:2;width:100%;height:240px;margin-top:-8px}
  .lp-hero-art{width:min(100%,400px);padding:0 16px 8px}
  .lp-hero-bg.ada-foto{height:auto;aspect-ratio:3/2}
  .lp-hero-foto{object-position:72% 50%}
  .lp-hero-bg.ada-foto::after{background:linear-gradient(180deg,var(--lp-navy-3) 0%,rgba(6,28,59,.1) 40%,transparent 70%,rgba(6,28,59,.5))}
  .lp-hero-in{min-height:0;padding-top:36px;padding-bottom:16px}
  .lp-lead{font-size:1rem}
  .lp-cta .lp-btn{flex:1 1 220px}
  .lp-perks{gap:14px 18px;margin-top:28px}
  .lp-perks li{font-size:.85rem}
  .lp-perks svg{width:24px;height:24px}
  .lp-sektor,.lp-program,.lp-materi,.lp-faq{padding:52px 0}
  .lp-ajak{padding-bottom:52px}
}
@media (max-width:560px){
  .lp-daftar svg,.lp-nav .lp-pjg{display:none}
  .lp-sektor-grid{grid-template-columns:minmax(0,1fr);gap:14px}
  .lp-kartu{flex-direction:row}
  .lp-kartu-img{width:118px;height:auto;min-height:140px;flex-shrink:0}
  .lp-kartu-ganti svg{width:56px;height:56px}
  .lp-kartu-ic{left:92px;top:14px;width:40px;height:40px}
  .lp-kartu-ic svg{width:20px;height:20px}
  .lp-kartu-isi{padding:16px 16px 16px 30px}
  .lp-kartu h3{font-size:1rem}
  .lp-kartu p{font-size:.88rem}
  .lp-program-grid,.lp-langkah{grid-template-columns:minmax(0,1fr)}
  .lp-prog{flex-direction:row;gap:14px;padding:18px 16px}
  .lp-prog-ic{width:44px;height:44px}
  .lp-ajak-in{padding-top:30px;padding-bottom:30px;border-radius:20px}
  .lp-foot-in{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  .lp *{transition:none!important}
  .lp-btn:hover,.lp-kartu:hover,.lp-prog:hover{transform:none}
}
/* Nihongo: dua bagian buku + kartu Huruf = tiga kolom */
.lp-langkah{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1180px){.lp-langkah{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.lp-langkah{grid-template-columns:minmax(0,1fr)}}

/* ---------- Nihongo: halaman sambutan merah-emas (bukan navy seperti Hanguk) ---------- */
.lp{--lp-navy:#9E2035;--lp-navy-2:#C23543;--lp-navy-3:#6E1427;--lp-blue:#B4253A;--lp-blue-2:#CF2340;--lp-red:#CF2340;--lp-red-2:#E63A4F;--lp-red-soft:rgba(207,35,64,.09);
  --lp-soft:#FFF5EA;--lp-ink:#46232A;--lp-text:#5B3A3E;--lp-muted:#86625F;--lp-line:#F0DDC8;--lp-bg:#FFFDF8}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lp{--lp-bg:#140709;--lp-soft:#1C0B0F;--lp-card:#24111A;--lp-ink:#F6ECE8;--lp-text:#E2CCC8;--lp-muted:#C2A4A0;--lp-line:#3E2128}}
:root[data-theme="dark"] .lp{--lp-bg:#140709;--lp-soft:#1C0B0F;--lp-card:#24111A;--lp-ink:#F6ECE8;--lp-text:#E2CCC8;--lp-muted:#C2A4A0;--lp-line:#3E2128}
.lp-hero{background:radial-gradient(900px 500px at 85% 20%,rgba(255,188,109,.3),transparent 60%),radial-gradient(600px 400px at 0% 100%,rgba(88,10,30,.3),transparent 60%),linear-gradient(115deg,#7E1529,#A21D32 45%,#C9363F)}
.lp-hero-bg.ada-foto::after{background:linear-gradient(90deg,rgba(110,20,39,.88) 0%,rgba(110,20,39,.65) 32%,rgba(110,20,39,.18) 50%,transparent 62%),linear-gradient(0deg,rgba(94,15,32,.55),transparent 26%)}
/* layar lebar: lapisan merah semi transparan agar pemandangan di kiri ikut terlihat; teks tetap terbaca lewat bayangan teks */
@media (min-width:861px){.lp-hero-bg.ada-foto::after{background:linear-gradient(90deg,rgba(110,20,39,.52) 0%,rgba(110,20,39,.44) 30%,rgba(110,20,39,.24) 48%,transparent 62%),linear-gradient(0deg,rgba(94,15,32,.38),transparent 24%)}}
/* HP: foto di bawah teks, tidak tertutup tulisan; cukup dibaurkan tipis di tepi atas, warna asli foto dipertahankan */
@media (max-width:860px){.lp-hero-bg.ada-foto::after{background:linear-gradient(180deg,rgba(160,32,52,.75) 0%,rgba(160,32,52,0) 22%)}}
.lp-hero h1 em{color:#FFD36A}
.lp-hero h1 em::after{background:#FFD36A}
.lp-eyebrow::before{background:#E8A320}
.lp-hero .lp-eyebrow::before{background:#FFD36A}
.lp-btn.lp-red{background:linear-gradient(155deg,#FFE89A 0%,#FFD05A 48%,#F9B82F 100%);color:#6A3511!important;box-shadow:inset 0 1px 0 #FFF9D4,0 3px 0 #C5891C,0 8px 16px -9px rgba(130,66,19,.5)}
.lp-btn.lp-blue{background:var(--lp-blue)}
.lp-kartu-img{background:linear-gradient(150deg,#D4434C,#8E1B30 75%)}
.lp-kartu-ic{background:#CF2340}
.lp-program{background:radial-gradient(700px 380px at 10% 0%,rgba(255,188,109,.25),transparent 60%),linear-gradient(105deg,#8E1B30,#7A1428 55%,#5E0F20)}
.lp-prog h3 em{background:#FFD36A}
.lp-faq summary::after{color:#CF2340}
.lp-faq details[open]{border-color:#CF2340}
.lp-intip{color:#CF2340}
.lp-tahap-hangul{background:linear-gradient(160deg,#A21D32,#7A1428)}
.lp-ajak-in{background:radial-gradient(500px 260px at 100% 0%,rgba(255,211,106,.3),transparent 60%),linear-gradient(110deg,#7E1529,#B4253A)}
.lp-foot{background:#5E0F20;color:#F0CFC8}
.lp :focus-visible{outline-color:#FFD36A}