/* Profil publik: mode gelap yang konsisten untuk landing, Tentang Rayon,
   Grand Design, dan Struktur Organisasi. Berlaku hanya saat data-theme=dark.
   Warna terang disisakan hanya untuk teks di atas permukaan gelap. */
html[data-theme="dark"] .profileLanding,
html[data-theme="dark"] .grandDesignPage,
html[data-theme="dark"] .aboutRayon,
html[data-theme="dark"] .structurePage{
  background:#0b192b;
  color:#eaf3fc;
}

/* PROFIL */
html[data-theme="dark"] .profileHero{
  background:radial-gradient(circle at 82% 18%,rgba(58,113,180,.18),transparent 35%),
    linear-gradient(120deg,#0e263f,#142e4a 62%,#112339);
  border-color:#284763;
}
html[data-theme="dark"] .profileHeroTitle,
html[data-theme="dark"] .profileDoorTitle{color:#edf5ff}
html[data-theme="dark"] .profileHeroName{color:#9ccfff}
html[data-theme="dark"] .profileHeroLine,
html[data-theme="dark"] .profileIntroText{color:#c4d6e8}
html[data-theme="dark"] .profileWatermark{color:rgba(150,194,242,.13)}
html[data-theme="dark"] .profileDoor{
  border-color:#35516c;
  color:#eaf3fc;
}
html[data-theme="dark"] .profileDoor:last-child{border-color:#35516c}
html[data-theme="dark"] .profileDoor:hover,
html[data-theme="dark"] .profileDoor:focus-visible{border-color:#e7c34f}
html[data-theme="dark"] .profileDoorNum{color:rgba(159,199,237,.23)}
html[data-theme="dark"] .profileDoorDesc{color:#b5c9dd}
html[data-theme="dark"] .profileDoorArrow{
  color:#f5c928;
  display:grid;
  place-items:center;
  width:45px;
  height:45px;
  border-radius:13px;
  background:rgba(29,63,96,.7);
  border:1px solid rgba(104,152,192,.24);
  font-size:30px;
}
html[data-theme="dark"] .profileDoor:hover .profileDoorArrow,
html[data-theme="dark"] .profileDoor:focus-visible .profileDoorArrow{
  background:rgba(245,201,40,.16);
  border-color:rgba(245,201,40,.38);
}
html[data-theme="dark"] .profileStatement{background:linear-gradient(115deg,#0c365e,#174b79)}
html[data-theme="dark"] .profileStatementKicker{color:#f5c928}
html[data-theme="dark"] .profileStatementWords{color:#fff}

/* GRAND DESIGN */
html[data-theme="dark"] .grandHero{
  background:radial-gradient(circle at 88% 14%,rgba(40,132,190,.17),transparent 38%),
    linear-gradient(115deg,#0c243d,#142e4a 65%,#10243c);
  border-color:#284763;
}
html[data-theme="dark"] .grandHero h1,
html[data-theme="dark"] .grandSectionTitle,
html[data-theme="dark"] .grandNarrative h2,
html[data-theme="dark"] .grandFocus h2,
html[data-theme="dark"] .grandDirection strong{
  color:#edf5ff;
}
html[data-theme="dark"] .grandLead,
html[data-theme="dark"] .grandDirection p,
html[data-theme="dark"] .grandNarrativeText,
html[data-theme="dark"] .grandFocusText{color:#c4d6e8}
html[data-theme="dark"] .grandHero:after{color:rgba(149,192,233,.06)}
html[data-theme="dark"] .grandSectionKicker{color:#a7d4ff}
html[data-theme="dark"] .grandDirections,
html[data-theme="dark"] .grandFocus{background:#0b192b}
html[data-theme="dark"] .grandDirectionsGrid,
html[data-theme="dark"] .grandDirection,
html[data-theme="dark"] .grandFocusList,
html[data-theme="dark"] .grandFocusItem{border-color:#35516c}
html[data-theme="dark"] .grandDirectionNum{color:rgba(155,193,232,.23)}
html[data-theme="dark"] .grandDirection:nth-child(even) .grandDirectionNum{color:rgba(245,201,40,.40)}
html[data-theme="dark"] .grandNarrative{
  background:#112941;
  border-color:#35516c;
}
html[data-theme="dark"] .grandFocusNo{color:rgba(162,200,235,.4)}
html[data-theme="dark"] .grandPeriodBox{
  background:#173b5b;
  border-color:#f5c928;
}
html[data-theme="dark"] .grandPeriodBox select{color:#f4f8ff}
html[data-theme="dark"] .grandPeriodBox option{background:#102841;color:#f0f7ff}
html[data-theme="dark"] .grandClosing{background:linear-gradient(105deg,#0c365e,#153f65)}
html[data-theme="dark"] .grandClosingText{color:#fff}

/* TENTANG RAYON */
html[data-theme="dark"] .aboutHero{
  background:radial-gradient(circle at 80% 18%,rgba(60,125,185,.20),transparent 39%),
    linear-gradient(125deg,#0d263f,#16344f 65%,#11253d);
  border-color:#284763;
}
html[data-theme="dark"] .aboutHero:before{border-color:rgba(147,190,229,.19)}
html[data-theme="dark"] .aboutHero h1,
html[data-theme="dark"] .aboutIntroText,
html[data-theme="dark"] .aboutScopeTitle,
html[data-theme="dark"] .aboutProgram strong{color:#edf5ff}
html[data-theme="dark"] .aboutHeroLine,
html[data-theme="dark"] .aboutScopeLead,
html[data-theme="dark"] .aboutGreetings{color:#c4d6e8}
html[data-theme="dark"] .aboutMonogram{color:rgba(152,194,230,.13)}
html[data-theme="dark"] .aboutEyebrow,
html[data-theme="dark"] .aboutSlogan,
html[data-theme="dark"] .aboutFaculty{color:#a9d5ff}
html[data-theme="dark"] .aboutIdentity{border-color:#35516c}
html[data-theme="dark"] .aboutIdentityLabel,
html[data-theme="dark"] .aboutProgram small{color:#a9bfd3}
html[data-theme="dark"] .aboutScope{
  background:#112941;
  border-color:#35516c;
}
html[data-theme="dark"] .aboutScope:after{color:rgba(159,193,224,.065)}
html[data-theme="dark"] .aboutPrograms,
html[data-theme="dark"] .aboutProgram{border-color:#35516c}
html[data-theme="dark"] .aboutNumber{color:rgba(157,198,233,.27)}
html[data-theme="dark"] .aboutRole{background:linear-gradient(110deg,#0c365e,#154771)}
html[data-theme="dark"] .aboutRole h2{color:#fff}
html[data-theme="dark"] .aboutRoleText{color:#dbe9f7}

/* STRUKTUR ORGANISASI */
html[data-theme="dark"] .structureHero{
  background:radial-gradient(circle at 84% 12%,rgba(49,126,190,.20),transparent 38%),
    linear-gradient(120deg,#0b253f,#13324c 64%,#11273e);
  border-color:#284763;
}
html[data-theme="dark"] .structureHero:after{color:rgba(156,193,229,.065)}
html[data-theme="dark"] .structureHero h1{color:#edf5ff}
html[data-theme="dark"] .structureLead,
html[data-theme="dark"] .structureCaption p{color:#c4d6e8}
html[data-theme="dark"] .structurePeriod{
  background:#173b5b;
  border-color:#f5c928;
}
html[data-theme="dark"] .structurePeriod select{color:#f4f8ff}
html[data-theme="dark"] .structurePeriod option{background:#102841;color:#f0f7ff}
html[data-theme="dark"] .structurePeople{
  background:#0b192b;
  border-color:#35516c;
}
html[data-theme="dark"] .structureCaption{
  background:#10263e;
  border-color:#35516c;
}
html[data-theme="dark"] .structurePeriodBadge{
  background:#214565;
  color:#b9ddff;
}
html[data-theme="dark"] .publicSectionHead h2{color:#9dcfff}
html[data-theme="dark"] .publicSectionHead p,
html[data-theme="dark"] .publicDivisionTitle,
html[data-theme="dark"] .orgGroupTitle{color:#edf5ff}
html[data-theme="dark"] .publicDivisionTitle,
html[data-theme="dark"] .orgGroup,
html[data-theme="dark"] .orgGroupTitleRow{border-color:#35516c!important}
html[data-theme="dark"] .orgGroupSubtitle{color:#b3c8da!important}
html[data-theme="dark"] .memberCard{
  background:linear-gradient(145deg,#17324c,#10263d);
  border-color:#35516c;
  box-shadow:0 10px 25px rgba(0,0,0,.20);
  color:#edf5ff;
}
html[data-theme="dark"] .memberCard:hover,
html[data-theme="dark"] .memberCard:focus-visible,
html[data-theme="dark"] .memberCard.isPrimed{
  border-color:#f5c928;
  box-shadow:0 16px 35px rgba(0,0,0,.35);
  outline:2px solid rgba(245,201,40,.55);
  outline-offset:2px;
}
html[data-theme="dark"] .memberAvatar{
  border-color:#274c6e;
  background:#2c475e;
}
html[data-theme="dark"] .memberRole{color:#a9d5ff!important}
html[data-theme="dark"] .memberName{color:#eef7ff}
html[data-theme="dark"] .orgEmpty,
html[data-theme="dark"] .structureEmpty{color:#a9bfd3}

/* Modal rincian orang dan ikon tutup: tidak menyisakan kotak putih silau. */
html[data-theme="dark"] .memberModalDialog{
  background:#11283f;
  color:#eaf3fc;
  border:1px solid #35516c;
}
html[data-theme="dark"] .memberModalName{color:#f0f7ff}
html[data-theme="dark"] .memberModalRole{color:#a9d5ff}
html[data-theme="dark"] .memberModalField{background:#1a3853}
html[data-theme="dark"] .memberModalField b{color:#aac5dc}
html[data-theme="dark"] .memberModalField span{color:#edf5ff}
html[data-theme="dark"] .memberModalClose{
  background:#264761;
  color:#f5c928;
  border:1px solid #466987;
}
html[data-theme="dark"] .memberModalClose:hover{background:#315a79}
html[data-theme="dark"] .memberModalPhoto{background:#29435b;color:#c5d6e8}

/* Elemen yang berada di atas permukaan gelap boleh putih;
   aksen tautan, ikon arah, dan kontrol lebih mudah dikenali dengan biru/emas. */
html[data-theme="dark"] .profileLanding .pageKicker,
html[data-theme="dark"] .grandDesignPage .pageKicker,
html[data-theme="dark"] .aboutRayon .pageKicker,
html[data-theme="dark"] .structurePage .pageKicker{
  color:#f5c928;
}
html[data-theme="dark"] .profileLanding a:focus-visible,
html[data-theme="dark"] .grandDesignPage a:focus-visible,
html[data-theme="dark"] .aboutRayon a:focus-visible,
html[data-theme="dark"] .structurePage a:focus-visible{
  outline:2px solid #f5c928;
  outline-offset:4px;
}
@media(prefers-reduced-motion:reduce){
  html[data-theme="dark"] .profileDoorArrow{transition:none}
}

/* SEO core pages: Profil identity copy and Tentang Website. */
html[data-theme="dark"] .profileIdentityText{color:#c4d6e8}
html[data-theme="dark"] .websiteAboutLinks a{color:#a9d5ff;border-color:rgba(169,213,255,.42)}
html[data-theme="dark"] .websiteAbout{background:#0b192b;color:#eaf3fc}
html[data-theme="dark"] .websiteAboutHero{
  background:radial-gradient(circle at 82% 18%,rgba(58,113,180,.18),transparent 35%),
    linear-gradient(120deg,#0e263f,#142e4a 62%,#112339);
  border-color:#284763;
}
html[data-theme="dark"] .websiteAboutHero h1,
html[data-theme="dark"] .websiteAboutCard h2{color:#edf5ff}
html[data-theme="dark"] .websiteAboutLead,
html[data-theme="dark"] .websiteAboutCard p{color:#c4d6e8}
html[data-theme="dark"] .websiteAboutGrid,
html[data-theme="dark"] .websiteAboutCard{border-color:#35516c}
html[data-theme="dark"] .websiteAbout .pageKicker{color:#f5c928}
html[data-theme="dark"] .websiteAbout a:focus-visible{outline:2px solid #f5c928;outline-offset:4px}