/* SEMAR - layar masuk kreatif, versi cerah (owner 21 Okt 2026): kanvas krem terang, benang & jahitan berwarna hidup
   (garmen BPS), judul besar gelap, kotak putih. Tanpa pilihan aplikasi. Kerangka aplikasi di semar.css tidak disentuh. */
.layar-seni{position:relative; isolation:isolate; overflow:hidden auto; background:#FFF9F1; color:#1A1A1A; border-top:0; padding:0; place-items:stretch}
.seni{position:fixed; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(120% 90% at 0% 0%, #FFE9D6 0%, #FFF9F1 45%, #F6F1FF 100%)}
.seni-svg{width:100%; height:100%; display:block}
#sm-gumpal1 stop:first-child{stop-color:#FF7A59}#sm-gumpal1 stop{stop-opacity:.0}#sm-gumpal1 stop:first-child{stop-opacity:.38}
#sm-gumpal2 stop:first-child{stop-color:#FFC93C; stop-opacity:.45}
#sm-gumpal3 stop:first-child{stop-color:#A57BFF; stop-opacity:.32}
.gumpal{mix-blend-mode:multiply; transform-box:fill-box; transform-origin:center; animation:sm-apung 22s ease-in-out infinite alternate}
.g2{animation-duration:27s; animation-delay:-6s}
.g3{animation-duration:31s; animation-delay:-12s}
.benang{fill:none; stroke-width:3; stroke-linecap:round; opacity:.95; animation:sm-goyang 14s ease-in-out infinite alternate}
.b2{stroke-width:2.2; opacity:.85; animation-delay:-4s}
.b3{stroke-width:1.6; opacity:.7; animation-delay:-8s}
.jahit{fill:none; stroke:#E0452B; stroke-width:1.5; stroke-dasharray:3 9; opacity:.5; animation:sm-jalan 18s linear infinite}
.j2{stroke:#7B3FF2; opacity:.4; animation-direction:reverse}
.jarum circle{fill:#E0452B; opacity:.7; animation:sm-kedip 3.2s ease-in-out infinite}
.jarum circle:nth-child(2){fill:#7B3FF2; animation-delay:-1.1s}.jarum circle:nth-child(3){fill:#F9B72F; animation-delay:-2.2s}
.seni-svg rect{opacity:.5}
@keyframes sm-apung{from{transform:translate(0,0) scale(1)}to{transform:translate(40px,-30px) scale(1.12)}}
@keyframes sm-goyang{from{transform:translateY(0)}to{transform:translateY(-14px)}}
@keyframes sm-jalan{to{stroke-dashoffset:-240}}
@keyframes sm-kedip{0%,100%{opacity:.25}50%{opacity:.9}}
@media (prefers-reduced-motion:reduce){.gumpal,.benang,.jahit,.jarum circle{animation:none}}

.masuk-panggung{min-height:100%; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(330px,410px); align-items:center; gap:clamp(24px,5vw,72px);
  padding:max(28px,calc(var(--atas) + 20px)) clamp(18px,5vw,72px) max(28px,calc(var(--bawah) + 20px)); max-width:1240px; margin:0 auto; width:100%}
.masuk-cerita{color:#1A1A1A}
.cerita-kecil{font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:#B5121B; margin:0 0 16px; font-weight:800}
.cerita-besar{font-size:clamp(40px,6.2vw,84px); line-height:.98; letter-spacing:-.03em; margin:0; font-weight:900; color:#16120F}
.cerita-besar span{display:inline-block}
.cerita-besar span:nth-child(2){font-style:italic; font-weight:300; background:linear-gradient(90deg,#FF7A1A,#E0452B 45%,#B32BD9 80%,#6E3CF0); -webkit-background-clip:text; background-clip:text; color:transparent}
.cerita-ket{max-width:44ch; font-size:16.5px; line-height:1.6; color:#4A433D; margin:22px 0 0}

.masuk-kotak.kaca{max-width:410px; width:100%; justify-self:end; background:#FFFFFF; color:#1A1A1A; border-radius:24px; padding:28px 24px 22px;
  box-shadow:0 24px 60px rgba(120,60,20,.16), 0 2px 6px rgba(26,26,26,.06); border:1px solid #F1E6DA}
.masuk-kotak.kaca .logo{width:78px; margin:0 auto 16px}
/* logo SEMAR berwarna (pengganti logo BPS, owner 21 Okt 2026) */
.merek-semar{display:flex; align-items:center; gap:12px; margin:0 0 18px; text-align:left}
.tanda-semar{width:54px; height:54px; flex:none; border-radius:16px; box-shadow:0 10px 24px rgba(193,59,224,.28), 0 3px 8px rgba(255,77,61,.25)}
.kata-semar{display:flex; flex-wrap:wrap; align-items:baseline; font-weight:900; font-size:30px; line-height:1; letter-spacing:.04em}
.kata-semar .k-s{color:#FF9F1C}.kata-semar .k-e{color:#FF4D3D}.kata-semar .k-m{color:#E0307A}.kata-semar .k-a{color:#B03BE0}.kata-semar .k-r{color:#5B3DF5}
.kata-semar small{flex-basis:100%; margin-top:5px; font-size:11px; font-weight:800; letter-spacing:.24em; text-transform:uppercase; color:#8A7F76}
.masuk-kotak.kaca .judul-login{text-align:left; font-size:22px; font-weight:800; margin:0 0 8px}
.catatan-lanjut{margin:0 0 14px; padding:10px 12px; border-radius:12px; font-size:13.5px; line-height:1.45; text-align:left;
  background:linear-gradient(135deg,rgba(255,138,31,.12),rgba(123,63,242,.12)); border:1px solid rgba(123,63,242,.25); color:#2A2140}
.catatan-lanjut b{background:linear-gradient(90deg,#FF8A1F,#C04BE0 55%,#1FA2FF); -webkit-background-clip:text; background-clip:text; color:transparent}
.masuk-kotak.kaca .kaki{text-align:center}

@media (max-width:900px){
  .masuk-panggung{grid-template-columns:1fr; gap:18px; padding-top:max(22px,calc(var(--atas) + 16px))}
  .masuk-cerita{text-align:center}
  .cerita-kecil{margin-bottom:10px}
  .cerita-besar{font-size:clamp(34px,10vw,52px)}
  .cerita-ket{margin:12px auto 0; font-size:14px}
  .masuk-kotak.kaca{justify-self:center; padding:22px 18px 18px}
}
@media (max-width:380px){.cerita-ket{display:none}}