:root{--navy:#202b63;--ink:#202947;--teal:#087e8b;--cyan:#32bfd1;--purple:#7560ef;--pink:#d86fba;--muted:#68738f;--paper:#f7f8fd;--line:#e3e7f3;--white:#fff;--pale:#edf3ff;--green:#167c69;--gold:#b57a12;--shadow:0 18px 50px rgba(31,42,95,.08)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--paper);font-family:Inter,"Segoe UI",Arial,sans-serif;color:var(--ink);line-height:1.62}a{color:inherit}.top{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.nav{max-width:1200px;margin:auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:18px}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--navy);font-weight:850;line-height:1.1}.mark{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--cyan),var(--purple));color:#fff;font-size:16px;box-shadow:0 7px 17px #7560ef33}.brand small{display:block;font-size:9px;letter-spacing:.17em;color:#7d87a4;margin-top:5px}.navlinks{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.navlinks a{font-size:12px;text-decoration:none;color:var(--muted);font-weight:700;padding:8px 10px;border-radius:9px;white-space:nowrap}.navlinks a:hover,.navlinks a.active{background:#edf0ff;color:var(--navy)}.menu{display:none;background:white;border:1px solid var(--line);padding:8px 10px;border-radius:10px;color:var(--navy);font-weight:800}.wrap{max-width:1200px;margin:auto;padding:30px 24px 68px}.hero{display:grid;grid-template-columns:1.08fr .92fr;gap:34px;align-items:center;padding:24px 0 40px}.eyebrow{font-size:11px;letter-spacing:.18em;font-weight:900;text-transform:uppercase;color:var(--teal)}h1{font-size:clamp(38px,5vw,62px);line-height:1.05;letter-spacing:-.052em;margin:15px 0 18px;color:var(--navy)}.gradient{background:linear-gradient(90deg,#24b8ce,var(--purple),var(--pink));background-clip:text;-webkit-background-clip:text;color:transparent}.lead{max-width:680px;font-size:17px;color:var(--muted);margin:0}.chips{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 22px}.chip{padding:7px 11px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:11px;color:#4e5a77;font-weight:750}.actions{display:flex;gap:10px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border-radius:12px;text-decoration:none;border:1px solid transparent;font-weight:850;font-size:13px;cursor:pointer;background:linear-gradient(100deg,#10b4c8,#6258ef);color:white;box-shadow:0 8px 20px #5959ee22}.btn:hover{transform:translateY(-1px)}.btn.light{background:#fff;border-color:var(--line);color:var(--navy);box-shadow:none}.hero-panel{position:relative;overflow:hidden;background:linear-gradient(145deg,#1c2a61 5%,#303d86 59%,#4d348a);color:#fff;border-radius:26px;padding:26px;box-shadow:0 28px 65px #202b6330;min-height:360px}.hero-panel:before,.hero-panel:after{content:"";position:absolute;border:1px solid #ffffff22;border-radius:50%;pointer-events:none}.hero-panel:before{width:280px;height:280px;right:-85px;top:-120px}.hero-panel:after{width:220px;height:220px;right:-60px;bottom:-125px}.panel-head{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px}.panel-label{font-size:10px;letter-spacing:.15em;font-weight:900;color:#a5f2fa}.panel-badge{font-size:10px;border:1px solid #ffffff45;background:#ffffff0c;padding:6px 9px;border-radius:999px}.path{position:relative;z-index:1;margin-top:24px;display:grid;gap:10px}.path-row{display:grid;grid-template-columns:42px 1fr;align-items:center;gap:12px;padding:12px 13px;border:1px solid #ffffff25;background:#ffffff0d;border-radius:15px}.path-no{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:#ffffff14;color:#a9f4fb;font-weight:900}.path-row b{display:block;font-size:14px}.path-row small{display:block;color:#d2d9f4;font-size:11px;margin-top:2px}.panel-foot{position:relative;z-index:1;color:#c7d1f2;font-size:11px;margin-top:16px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:4px 0 36px}.stat{padding:17px;background:#fff;border:1px solid var(--line);border-radius:15px}.stat strong{display:block;color:var(--navy);font-size:25px;line-height:1.1}.stat span{display:block;color:var(--muted);font-size:12px;margin-top:7px}.section{margin-top:37px;scroll-margin-top:90px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:17px}.section-head h2{margin:4px 0 0;color:var(--navy);font-size:clamp(24px,3vw,32px);line-height:1.15;letter-spacing:-.03em}.section-head p{max-width:600px;margin:0;color:var(--muted);font-size:13px}.grid{display:grid;gap:15px}.two{grid-template-columns:repeat(2,minmax(0,1fr))}.three{grid-template-columns:repeat(3,minmax(0,1fr))}.card{background:#fff;border:1px solid var(--line);border-radius:19px;padding:21px;box-shadow:0 6px 22px rgba(31,42,95,.035)}.card h3{font-size:17px;line-height:1.25;margin:0 0 8px;color:var(--navy)}.card p{font-size:13px;color:#5b6682;margin:0}.card p+p{margin-top:9px}.mini-label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);font-weight:900}.num{display:grid;place-items:center;width:39px;height:39px;border-radius:12px;background:linear-gradient(135deg,#e5fbfc,#eeeaff);color:var(--teal);font-weight:950;margin-bottom:13px}.lk-heading{display:flex;align-items:center;gap:14px;margin-bottom:14px}.lk-icon{flex:0 0 48px;width:48px;height:48px;display:grid;place-items:center;background:linear-gradient(135deg,#e8fafb,#eeeaff);border-radius:15px;color:var(--teal);font-weight:950;font-size:17px}.lk-heading h3{margin:0;color:var(--navy)}.lk-heading p{margin:3px 0 0;font-size:12px;color:var(--muted)}.tagrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.tag{border-radius:8px;background:#f1f4ff;color:#515f8a;font-size:10px;font-weight:800;padding:5px 8px}.detail-list{display:grid;gap:9px;margin-top:14px}.detail{display:grid;grid-template-columns:12px 1fr;gap:9px;color:#5b6682;font-size:13px}.detail:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cyan);margin-top:7px}.highlight{border-radius:20px;background:linear-gradient(120deg,#fff,#f0f4ff);border:1px solid #e0e6f8;padding:22px}.highlight h3{color:var(--navy);margin:0 0 8px}.highlight p{font-size:13px;color:#596582;margin:0}.quote{border-left:3px solid var(--purple);padding:4px 0 4px 16px;font-size:17px;font-weight:750;color:var(--navy);margin:0}.cycle{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}.cycle div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px}.cycle b{display:block;color:var(--teal);font-size:13px}.cycle span{display:block;color:var(--muted);font-size:11px;margin-top:4px}.timeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;position:relative}.timeline .card{position:relative;overflow:hidden}.timeline .card:before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:linear-gradient(90deg,var(--cyan),var(--purple))}.number-xl{font-size:31px;font-weight:950;line-height:1;color:#b8c4e9;margin:4px 0 14px}.roadmap{display:grid;gap:10px}.road{display:grid;grid-template-columns:38px 1fr;gap:12px;padding:14px;background:#fff;border:1px solid var(--line);border-radius:14px}.road-no{height:35px;width:35px;display:grid;place-items:center;background:#eef1ff;color:var(--navy);border-radius:11px;font-weight:900}.road b{display:block;font-size:13px;color:var(--navy)}.road p{font-size:12px;color:var(--muted);margin:3px 0 0}.docs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.doc{display:flex;gap:13px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:15px;padding:14px}.doc-icon{width:43px;height:47px;display:grid;place-items:center;flex:0 0 43px;border-radius:10px;background:#fff0f0;color:#b14348;font-weight:900;font-size:11px}.doc-meta{flex:1;min-width:0}.doc-meta b{display:block;font-size:13px;color:var(--navy)}.doc-meta small{display:block;color:var(--muted);font-size:11px;margin-top:3px}.doc-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}.doc-actions a{font-size:10px;font-weight:850;text-decoration:none;border:1px solid var(--line);border-radius:8px;padding:5px 8px;color:var(--navy)}.doc-actions a:hover{border-color:var(--teal);color:var(--teal)}.status-note{padding:17px 19px;background:#fffbf0;border:1px solid #f0dfb3;border-radius:15px;color:#73591b;font-size:12px}.status-note strong{display:block;font-size:13px;margin-bottom:4px}.footer{margin-top:48px;border-top:1px solid var(--line);padding-top:23px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:11px}.footer b{color:var(--navy)}.to-top{position:fixed;bottom:18px;right:18px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;box-shadow:var(--shadow);text-decoration:none;color:var(--navy);font-weight:900;z-index:10}
@media(max-width:900px){.nav{align-items:flex-start}.menu{display:inline-block}.navlinks{display:none;position:absolute;top:66px;left:12px;right:12px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}.navlinks.open{display:grid;grid-template-columns:repeat(2,1fr)}.hero{grid-template-columns:1fr}.hero-panel{min-height:0}.three{grid-template-columns:repeat(2,1fr)}.timeline{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.wrap{padding:20px 14px 48px}.nav{padding:10px 14px}.hero{padding-top:8px;gap:22px}h1{font-size:42px}.lead{font-size:15px}.hero-panel{padding:18px}.stats{grid-template-columns:repeat(2,1fr)}.section-head{display:block}.section-head p{margin-top:7px}.two,.three,.docs{grid-template-columns:1fr}.cycle{grid-template-columns:repeat(2,1fr)}.timeline{grid-template-columns:1fr}.card{padding:17px}.doc{align-items:flex-start}.doc-actions a{font-size:10px}}
@media print{.top,.actions,.to-top,.menu{display:none!important}body{background:white}.wrap{max-width:none;padding:0}.hero{grid-template-columns:1fr 1fr;padding:0 0 18px;gap:16px}h1{font-size:35px}.hero-panel{box-shadow:none;min-height:0}.section{break-inside:avoid;margin-top:20px}.card,.highlight,.doc,.road{box-shadow:none;break-inside:avoid}.stats{margin-bottom:12px}.footer{margin-top:20px}a{text-decoration:none}.navlinks{display:none}}

.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.gallery figure{margin:0;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:17px;box-shadow:0 6px 22px rgba(31,42,95,.035)}.gallery img{display:block;width:100%;height:205px;object-fit:contain;object-position:center top;background:#f6f8fc;border-bottom:1px solid var(--line)}.gallery figcaption{padding:12px 14px}.gallery figcaption b{display:block;font-size:13px;color:var(--navy);margin-bottom:4px}.gallery figcaption span{display:block;font-size:11px;color:var(--muted)}@media(max-width:900px){.gallery{grid-template-columns:1fr 1fr}}@media(max-width:600px){.gallery{grid-template-columns:1fr}.gallery img{height:auto;max-height:300px}}@media print{.gallery{grid-template-columns:repeat(3,1fr)}.gallery figure{break-inside:avoid}.gallery img{height:150px}}

/* Revisi visual: dark navy portfolio with the PPL portfolio's cyan-violet-pink identity */
:root{--navy:#eff4ff;--ink:#e7eeff;--teal:#62e5eb;--cyan:#49d3df;--purple:#8977ff;--pink:#f08bd5;--muted:#a5b4d6;--paper:#070b18;--line:#2a3967;--white:#101a35;--pale:#18264b;--green:#55e2b9;--gold:#f2c66d;--shadow:0 20px 55px rgba(0,0,0,.32)}
html{background:#070b18;color-scheme:dark}
body{background:radial-gradient(ellipse at 8% 3%,rgba(50,91,184,.22),transparent 36%),radial-gradient(ellipse at 92% 13%,rgba(117,86,239,.17),transparent 32%),#070b18;color:#e7eeff}
.top{background:rgba(7,11,24,.9);backdrop-filter:blur(16px);border-bottom:1px solid #27365f}
.brand{color:#f1f5ff}.brand small{color:#7fa1d5}.menu{background:#111c38;border-color:#2c3c69;color:#eef4ff}
.navlinks a{color:#a9b8d7}.navlinks a:hover,.navlinks a.active{background:#19284f;color:#73edf0}
.navlinks.open{background:#0d1630;border-color:#2b3a66}
.eyebrow{color:#62e5eb}
h1,.section-head h2{color:#f4f7ff}.gradient{background:linear-gradient(90deg,#61e8ee,#9588ff,#f18bd5);background-clip:text;-webkit-background-clip:text;color:transparent}
.lead{color:#b5c3e2}.chip{background:#111d3a;border-color:#2d3c69;color:#d5def7}
.btn.light{background:#111d3a;border-color:#334574;color:#edf3ff}.btn{box-shadow:0 10px 30px rgba(91,90,238,.2)}
.hero-panel{background:linear-gradient(145deg,#111e4a 0%,#20285e 52%,#402861 100%);box-shadow:0 28px 70px rgba(0,0,0,.28);border:1px solid #42518b}
.panel-foot{color:#c0ccef}.path-row{border-color:#ffffff27;background:#ffffff0b}
.stats .stat,.card,.highlight,.cycle div,.road,.doc,.gallery figure{background:linear-gradient(145deg,rgba(17,29,58,.98),rgba(12,21,43,.98));border-color:#293a67;box-shadow:0 10px 26px rgba(0,0,0,.15)}
.stat strong,.card h3,.lk-heading h3,.doc-meta b,.road b,.highlight h3,.quote{color:#edf3ff}.stat span,.section-head p,.card p,.lk-heading p,.detail,.highlight p,.cycle span,.road p,.doc-meta small,.footer{color:#aab8d6}
.num,.lk-icon{background:linear-gradient(135deg,#17394f,#2a2457);color:#66e6ec}.number-xl{color:#5e6f9e}.tag{background:#17254a;color:#c3d3f6;border:1px solid #2b3b68}
.highlight{background:linear-gradient(120deg,#111e3b,#171f48);border-color:#344475}.quote{border-left-color:#8c7aff}
.cycle div{background:#121e3b}.road-no{background:#20315c;color:#dce7ff}
.doc-icon{background:#34213c;color:#ffb5e8}.doc-actions a{border-color:#33436f;color:#d9e2fa}.doc-actions a:hover{border-color:#62e5eb;color:#62e5eb}
.status-note{background:rgba(97,72,23,.18);border-color:#806632;color:#f2d89a}.status-note strong{color:#ffe4a8}
.footer{border-color:#26365f}.footer b{color:#edf3ff}.to-top{background:#111d3a;border-color:#344573;color:#eaf1ff}
.gallery figure{overflow:hidden}.gallery img{background:#0a1024;border-color:#26355d}.gallery figcaption b{color:#edf3ff}.gallery figcaption span{color:#a5b4d6}
.profile-strip{display:grid;grid-template-columns:.8fr 1.2fr;gap:22px;align-items:center;padding:25px;margin:0 0 33px;border:1px solid #2b3b6c;border-radius:22px;background:linear-gradient(115deg,rgba(17,31,68,.95),rgba(26,24,65,.92));box-shadow:0 18px 45px rgba(0,0,0,.2)}
.profile-strip h2{font-size:clamp(20px,2.4vw,27px);line-height:1.15;margin:8px 0;color:#f2f6ff;letter-spacing:-.03em}.profile-strip p{margin:0;color:#adbbdc;font-size:13px}.profile-steps{display:grid;grid-template-columns:1fr 1fr;gap:10px}.profile-steps>div{padding:13px;border:1px solid #ffffff20;border-radius:13px;background:#ffffff08}.profile-steps span{display:inline-grid;place-items:center;width:25px;height:25px;background:linear-gradient(135deg,#30bccc,#8a76ff);border-radius:8px;color:#fff;font-size:10px;font-weight:900;margin-bottom:7px}.profile-steps b{display:block;color:#eef4ff;font-size:12px}.profile-steps small{display:block;color:#aebde0;font-size:10px;margin-top:4px;line-height:1.45}
.reflection-intro{display:flex;gap:15px;align-items:flex-start;margin:0 0 15px;padding:17px 19px;border:1px solid #2a3c70;border-radius:16px;background:linear-gradient(110deg,#111f42,#1a1d4a)}.intro-mark{flex:0 0 48px;width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(135deg,#30bfd0,#8370f6);font-weight:950;color:#fff;font-size:18px}.reflection-intro b{display:block;color:#f0f5ff;font-size:14px}.reflection-intro p{margin:4px 0 0;color:#afbedc;font-size:12px}
.reflection-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.reflection-card{min-width:0;padding:17px;border:1px solid #293a67;border-radius:18px;background:linear-gradient(150deg,#101b37,#0b142b);box-shadow:0 8px 24px rgba(0,0,0,.13)}.reflection-card-head{display:flex;align-items:center;gap:12px}.reflection-number{width:40px;height:40px;display:grid;place-items:center;flex:0 0 40px;border-radius:12px;background:linear-gradient(135deg,#1e556a,#382969);color:#a3f5f8;font-weight:950}.reflection-card h3{margin:3px 0 0;color:#f1f5ff;font-size:16px;line-height:1.3}.reflection-teaser{font-size:12px;color:#aab9d8;margin:12px 0 10px!important}.fourc-mini{display:flex;gap:5px;flex-wrap:wrap}.fourc-mini span{font-size:9px;font-weight:850;padding:4px 7px;border:1px solid #2a3c68;border-radius:7px;background:#142142;color:#9fb6df}.reflection-detail{margin-top:12px;border-top:1px solid #27365d;padding-top:10px}.reflection-detail summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:11px;font-weight:850;color:#71e6e9}.reflection-detail summary::-webkit-details-marker{display:none}.reflection-detail[open] summary{margin-bottom:12px}.reflection-detail summary span{font-size:16px}.fourc-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.fourc-item{padding:12px;border:1px solid #293966;border-radius:12px;background:#0d1730}.fourc-heading{display:flex;gap:9px;align-items:center;margin-bottom:8px}.fourc-heading>span{display:grid;place-items:center;width:27px;height:27px;border-radius:8px;background:#1e3d55;color:#8ef1f3;font-size:12px;font-weight:950}.fourc-challenge .fourc-heading>span{background:#46304a;color:#ffb4e7}.fourc-concept .fourc-heading>span{background:#322d60;color:#c7baff}.fourc-change .fourc-heading>span{background:#16483e;color:#91f2c9}.fourc-heading b{display:block;color:#eef3ff;font-size:12px}.fourc-heading small{display:block;color:#8fa0c8;font-size:9px;margin-top:1px}.fourc-item p{font-size:11px!important;line-height:1.65;color:#b7c5e2!important;margin:0!important}
.artifact-evidence{margin-top:13px;padding-top:12px;border-top:1px dashed #344474}.artifact-evidence>.mini-label{margin-bottom:7px}.artifact-line{padding:9px 0;border-bottom:1px solid #233154}.artifact-line:last-child{border-bottom:0}.artifact-line b{display:block;color:#dce8ff;font-size:11px}.artifact-line p{font-size:10px!important;color:#9facce!important;margin-top:3px!important}
.bridge-panel{margin-top:20px;padding:20px;border:1px solid #304176;border-radius:19px;background:linear-gradient(135deg,#111e3e,#1a1b48)}.bridge-panel h3{font-size:19px;color:#f1f5ff;margin:7px 0 14px}.bridge-list{display:grid;gap:9px}.bridge-item{display:grid;grid-template-columns:.72fr 1.1fr 1fr;gap:13px;padding:12px;border:1px solid #ffffff15;border-radius:12px;background:#ffffff06}.bridge-item b{font-size:12px;color:#dce8ff}.bridge-item span{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:#70dce2;font-weight:850}.bridge-item p{font-size:11px!important;color:#aebcda!important;margin:4px 0 0!important}
.competency-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.competency-card{padding:19px;border:1px solid #2c3d6d;border-radius:18px;background:linear-gradient(155deg,#101b37,#11162e);position:relative;overflow:hidden}.competency-card:before{content:'';height:3px;position:absolute;left:0;right:0;top:0;background:linear-gradient(90deg,#49d3df,#8977ff,#f08bd5)}.comp-index{font-size:27px;font-weight:950;color:#425583}.comp-kicker{font-size:9px;letter-spacing:.15em;color:#68e1e8;font-weight:950;margin:5px 0 9px}.competency-card h3{font-size:15px;line-height:1.3;color:#eff4ff;margin:0 0 9px}.competency-card p{color:#aebcda;font-size:11px;margin:0}.comp-link{margin-top:13px;padding-top:11px;border-top:1px solid #29375d}.comp-link b{display:block;font-size:10px;color:#c6baff}.comp-link span{display:block;font-size:10px;line-height:1.6;color:#9daed2;margin-top:4px}.competency-source{font-size:10px;color:#8799c1;margin-top:13px}
.seminar-timeline{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:14px}.seminar-timeline article{padding:15px;border:1px solid #2b3a67;border-radius:14px;background:#101a35;position:relative}.seminar-timeline article span{display:block;color:#6ee5e8;font-size:10px;font-weight:950;margin-bottom:10px}.seminar-timeline article b{display:block;color:#eaf1ff;font-size:12px;line-height:1.35}.seminar-timeline article p{color:#a9b8d9;font-size:11px;line-height:1.6;margin:7px 0 0}
@media(max-width:1050px){.competency-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.seminar-timeline{grid-template-columns:repeat(3,minmax(0,1fr))}.profile-strip{grid-template-columns:1fr}.bridge-item{grid-template-columns:1fr}}
@media(max-width:900px){.reflection-grid{grid-template-columns:1fr}.reflection-card{padding:15px}.profile-strip{padding:18px}.bridge-item{grid-template-columns:1fr}.seminar-timeline{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.fourc-grid{grid-template-columns:1fr}.profile-steps{grid-template-columns:1fr}.competency-grid,.seminar-timeline{grid-template-columns:1fr}.reflection-intro{padding:14px}.reflection-card h3{font-size:15px}.bridge-panel{padding:14px}}
@media print{html,body{background:#fff!important;color:#111!important;color-scheme:light}.top,.actions,.to-top,.menu{display:none!important}.card,.reflection-card,.fourc-item,.competency-card,.seminar-timeline article,.profile-strip,.bridge-panel{background:#fff!important;color:#111!important;box-shadow:none!important;border-color:#ccc!important;break-inside:avoid}.card h3,.section-head h2,.competency-card h3,.reflection-card h3,.fourc-heading b,.seminar-timeline article b{color:#111!important}.card p,.lead,.section-head p,.reflection-teaser,.fourc-item p,.seminar-timeline article p{color:#333!important}.reflection-detail{display:block}.reflection-detail summary{display:none}.reflection-detail:not([open])>*:not(summary){display:none}.fourc-item{break-inside:avoid}.reflection-grid{grid-template-columns:1fr 1fr}.competency-grid{grid-template-columns:repeat(2,1fr)}.seminar-timeline{grid-template-columns:repeat(3,1fr)}}

.lms-promptline,.lms-rubricline,.lk4-lms-map{margin:0 0 16px;padding:16px 18px;border:1px solid #2b3b6c;border-radius:16px;background:linear-gradient(120deg,#101d3b,#181b43)}.prompt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px}.prompt-grid>div{padding:11px;border:1px solid #ffffff18;border-radius:11px;background:#ffffff06}.prompt-grid span{display:block;color:#72e8eb;font-size:10px;font-weight:950;margin-bottom:5px}.prompt-grid b{font-size:11px;color:#e9f0ff;line-height:1.5}.lms-rubricline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.lms-rubricline span{font-size:9px;letter-spacing:.13em;font-weight:950;color:#6ee5e8;margin-right:4px}.lms-rubricline b{padding:7px 9px;background:#17264a;border:1px solid #2e3e6d;color:#dbe7ff;border-radius:8px;font-size:10px}.lk4-map-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:11px}.lk4-map-grid article{padding:13px;border:1px solid #2c3b69;background:#0d1730;border-radius:13px}.lk4-map-grid article>span{display:block;color:#67e2e7;font-size:9px;letter-spacing:.12em;font-weight:950;margin-bottom:6px}.lk4-map-grid b{display:block;color:#eff4ff;font-size:12px}.lk4-map-grid p{color:#adbbd9;font-size:11px;margin:6px 0 0;line-height:1.65}
@media(max-width:700px){.prompt-grid,.lk4-map-grid{grid-template-columns:1fr}.lms-rubricline{align-items:flex-start}.lms-rubricline b{width:100%}}
@media print{.lms-promptline,.lms-rubricline,.lk4-lms-map{background:#fff!important;border-color:#ccc!important}.prompt-grid>div,.lk4-map-grid article{background:#fff!important;border-color:#ccc!important}.prompt-grid b,.lk4-map-grid b{color:#111!important}.lk4-map-grid p{color:#333!important}}

/* Polesan portofolio: isi reflektif dan kartu mata kuliah tambahan */
.seminar-course-card{background:linear-gradient(145deg,#111c38,#11172f);border:1px solid #293a67;border-radius:18px;padding:21px;box-shadow:0 10px 26px rgba(0,0,0,.15)}
.seminar-course-card h3{color:#edf3ff}.seminar-course-card p{color:#aab8d6;font-size:13px}
.seminar-reflection-card{grid-column:span 1}
.reflection-section .section-head .eyebrow{color:#62e5eb}
@media(max-width:900px){.seminar-reflection-card{grid-column:auto}}

.seminar-steps{display:grid;gap:10px;margin-top:17px}
.seminar-steps>div{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start;padding:11px;border:1px solid #ffffff16;border-radius:12px;background:#ffffff05}
.seminar-steps>div>span{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:linear-gradient(135deg,#1e556a,#382969);color:#a3f5f8;font-size:10px;font-weight:950}
.seminar-steps b{display:block;color:#edf3ff;font-size:12px;line-height:1.35}
.seminar-steps small{display:block;color:#aab9d8;font-size:10px;line-height:1.55;margin-top:3px}

/* Tambahan sesuai revisi: foto profil dan aksen cahaya latar yang lembut. */
.profile-strip{grid-template-columns:112px minmax(0,.85fr) minmax(0,1.15fr);align-items:center}
.profile-portrait{display:block;width:112px;aspect-ratio:3/4;object-fit:cover;object-position:center top;border-radius:17px;border:1px solid #536393;box-shadow:0 0 0 5px rgba(113,132,211,.07),0 14px 34px rgba(0,0,0,.28);background:#f5f6fb}
.ambient-bg{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0;isolation:isolate;opacity:.58}
.top,.wrap{position:relative;z-index:1}
.top{z-index:30}
.light-orb{position:absolute;display:block;width:32vw;height:32vw;max-width:460px;max-height:460px;min-width:210px;min-height:210px;border-radius:50%;filter:blur(70px);opacity:.13;will-change:transform}
.orb-one{top:-13%;left:-10%;background:radial-gradient(circle,rgba(73,211,223,.9),rgba(73,211,223,0) 68%);animation:ambientFloatOne 26s ease-in-out infinite alternate}
.orb-two{top:28%;right:-13%;background:radial-gradient(circle,rgba(137,119,255,.95),rgba(137,119,255,0) 68%);animation:ambientFloatTwo 32s ease-in-out infinite alternate}
.orb-three{bottom:-20%;left:31%;background:radial-gradient(circle,rgba(240,139,213,.65),rgba(240,139,213,0) 68%);animation:ambientFloatThree 29s ease-in-out infinite alternate}
.light-line{position:absolute;display:block;width:46vw;height:1px;background:linear-gradient(90deg,transparent,rgba(111,227,238,.32),rgba(153,137,255,.28),transparent);filter:drop-shadow(0 0 5px rgba(111,227,238,.18));transform-origin:center;opacity:.32}
.line-one{top:23%;left:-12%;transform:rotate(-18deg);animation:lineDriftOne 24s ease-in-out infinite alternate}
.line-two{right:-14%;bottom:24%;transform:rotate(-18deg);background:linear-gradient(90deg,transparent,rgba(240,139,213,.22),rgba(111,227,238,.28),transparent);animation:lineDriftTwo 30s ease-in-out infinite alternate}
@keyframes ambientFloatOne{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(8vw,7vh,0) scale(1.12)}}
@keyframes ambientFloatTwo{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-7vw,8vh,0) scale(1.08)}}
@keyframes ambientFloatThree{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(5vw,-6vh,0) scale(1.14)}}
@keyframes lineDriftOne{from{translate:-2vw 0}to{translate:8vw 5vh}}
@keyframes lineDriftTwo{from{translate:4vw 0}to{translate:-8vw -4vh}}
@media(max-width:1050px){.profile-strip{grid-template-columns:100px minmax(0,1fr);}.profile-steps{grid-column:1/-1}.profile-portrait{width:100px}}
@media(max-width:600px){.profile-strip{grid-template-columns:76px minmax(0,1fr);gap:14px}.profile-portrait{width:76px;border-radius:13px}.profile-strip h2{font-size:21px}.profile-steps{grid-column:1/-1}.ambient-bg{opacity:.38}.light-orb{filter:blur(54px)}}
@media(prefers-reduced-motion:reduce){.ambient-bg *, .profile-portrait{animation:none!important;transition:none!important}}
@media print{.ambient-bg{display:none!important}.profile-strip{grid-template-columns:88px 1fr!important}.profile-portrait{width:88px;box-shadow:none}}



/* Identitas foto pada header: efek kilau tipis tanpa animasi menu navigasi. */
.brand{gap:10px;flex-shrink:0}
.brand-avatar{position:relative;overflow:hidden;isolation:isolate;border-radius:13px;background:linear-gradient(135deg,#49d3df,#8977ff,#f08bd5);padding:2px;box-shadow:0 0 0 1px rgba(118,222,244,.24),0 7px 20px rgba(89,90,238,.24);transition:transform .35s ease,box-shadow .35s ease}
.brand-avatar::before{content:"";position:absolute;inset:-50%;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.6) 49%,transparent 60%);transform:translateX(-115%) rotate(12deg);animation:avatarSheen 8s ease-in-out infinite;z-index:2;pointer-events:none}
.brand-avatar img{display:block;position:relative;width:100%;height:100%;object-fit:cover;object-position:50% 18%;border-radius:11px;z-index:1}
.brand:hover .brand-avatar{transform:translateY(-2px) scale(1.03);box-shadow:0 0 0 2px rgba(98,229,235,.25),0 10px 26px rgba(89,90,238,.3)}
.brand-copy{display:block}
@keyframes avatarSheen{0%,74%,100%{transform:translateX(-115%) rotate(12deg);opacity:0}78%{opacity:.75}90%{transform:translateX(115%) rotate(12deg);opacity:.7}91%{opacity:0}}

/* Animasi konten: kotak, kartu, poin refleksi, dan blok teks muncul saat digulir. */
.content-reveal{opacity:0;transform:translate3d(0,22px,0) scale(.992);filter:blur(2px);transition:opacity .68s cubic-bezier(.2,.75,.25,1),transform .68s cubic-bezier(.2,.75,.25,1),filter .68s ease;transition-delay:var(--content-delay,0ms);will-change:opacity,transform,filter}
.content-reveal.is-visible{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}
.content-reveal.is-visible>*{animation:contentChildIn .52s cubic-bezier(.2,.75,.25,1) both}
.content-reveal.is-visible>*:nth-child(1){animation-delay:.035s}
.content-reveal.is-visible>*:nth-child(2){animation-delay:.085s}
.content-reveal.is-visible>*:nth-child(3){animation-delay:.135s}
.content-reveal.is-visible>*:nth-child(4){animation-delay:.185s}
.content-reveal.is-visible>*:nth-child(5){animation-delay:.235s}
.content-reveal.is-visible>*:nth-child(6){animation-delay:.285s}
@keyframes contentChildIn{from{opacity:0;transform:translate3d(0,9px,0)}to{opacity:1;transform:translate3d(0,0,0)}}

/* Respons terhadap kursor: menghidupkan isi tanpa menggeser tata letak. */
.card,.reflection-card,.fourc-item,.stat,.highlight,.reflection-intro,.competency-card,.seminar-course-card,.seminar-timeline article,.bridge-panel,.bridge-item,.road,.cycle>div,.profile-steps>div,.gallery figure,.lms-promptline,.lms-rubricline,.lk4-lms-map,.lk4-map-grid article,.path-row,.prompt-grid>div,.chip,.tag,.fourc-mini span{transition:transform .3s cubic-bezier(.2,.75,.25,1),border-color .3s ease,box-shadow .3s ease,background-color .3s ease}
@media(hover:hover){
.card:hover,.reflection-card:hover,.stat:hover,.highlight:hover,.reflection-intro:hover,.competency-card:hover,.seminar-course-card:hover,.seminar-timeline article:hover,.bridge-panel:hover,.bridge-item:hover,.road:hover,.cycle>div:hover,.profile-steps>div:hover,.gallery figure:hover,.lms-promptline:hover,.lms-rubricline:hover,.lk4-lms-map:hover,.lk4-map-grid article:hover,.path-row:hover,.prompt-grid>div:hover{transform:translateY(-3px);border-color:rgba(98,229,235,.42);box-shadow:0 15px 32px rgba(0,0,0,.2),0 0 0 1px rgba(98,229,235,.055)}
.fourc-item:hover{transform:translateY(-2px);border-color:rgba(137,119,255,.5);box-shadow:0 10px 23px rgba(0,0,0,.2)}
.chip:hover,.tag:hover,.fourc-mini span:hover{transform:translateY(-2px);border-color:rgba(98,229,235,.45);box-shadow:0 5px 14px rgba(0,0,0,.16)}
}
/* Kotak interaktif punya sorotan warna halus ketika disentuh kursor. */
.card,.reflection-card,.fourc-item,.competency-card,.bridge-item,.road,.cycle>div,.profile-steps>div,.gallery figure,.seminar-timeline article,.lk4-map-grid article,.prompt-grid>div{position:relative}
.card::after,.reflection-card::after,.fourc-item::after,.competency-card::after,.bridge-item::after,.road::after,.cycle>div::after,.profile-steps>div::after,.gallery figure::after,.seminar-timeline article::after,.lk4-map-grid article::after,.prompt-grid>div::after{content:"";position:absolute;pointer-events:none;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 0%,rgba(105,230,239,.035) 36%,rgba(151,132,255,.075) 50%,transparent 70%);opacity:0;transition:opacity .35s ease}
@media(hover:hover){.card:hover::after,.reflection-card:hover::after,.fourc-item:hover::after,.competency-card:hover::after,.bridge-item:hover::after,.road:hover::after,.cycle>div:hover::after,.profile-steps>div:hover::after,.gallery figure:hover::after,.seminar-timeline article:hover::after,.lk4-map-grid article:hover::after,.prompt-grid>div:hover::after{opacity:1}}
@media(max-width:600px){.content-reveal{transform:translate3d(0,15px,0) scale(.996);filter:blur(1px)}.content-reveal.is-visible>*:nth-child(n){animation-delay:.035s}.brand-avatar{border-radius:12px}.brand-avatar img{border-radius:10px}}
@media(prefers-reduced-motion:reduce){.ambient-bg *, .brand-avatar,.brand-avatar::before,.content-reveal,.content-reveal.is-visible>*,.card,.reflection-card,.fourc-item,.stat,.highlight,.reflection-intro,.competency-card,.seminar-course-card,.seminar-timeline article,.bridge-panel,.bridge-item,.road,.cycle>div,.profile-steps>div,.gallery figure,.lms-promptline,.lms-rubricline,.lk4-lms-map,.lk4-map-grid article,.path-row,.prompt-grid>div,.chip,.tag,.fourc-mini span{animation:none!important;transition:none!important;filter:none!important;transform:none!important;opacity:1!important}}
@media print{.ambient-bg{display:none!important}.content-reveal{animation:none!important;transition:none!important;transform:none!important;filter:none!important;opacity:1!important}.content-reveal.is-visible>*{animation:none!important}.brand-avatar::before{display:none!important}}


/* Narasi perjalanan personal LK3: menonjolkan pengalaman nyata tanpa mengubah tema portofolio. */
.personal-journey{margin:18px 0 22px;padding:20px;border:1px solid #2b3b6c;border-radius:20px;background:linear-gradient(135deg,rgba(15,29,57,.88),rgba(24,23,61,.88))}
.personal-journey-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:14px}
.personal-journey-head h3{margin:5px 0 0;color:#f1f5ff;font-size:clamp(18px,2vw,23px);line-height:1.25}
.personal-journey-head p{max-width:490px;margin:0;color:#aab9d8;font-size:12px;line-height:1.65}
.personal-moments{align-items:stretch}
.journey-card{position:relative;overflow:hidden;min-height:215px;border-top:3px solid transparent;background:linear-gradient(150deg,#111c38,#0c152d);border-image:linear-gradient(90deg,#49d3df,#8977ff,#f08bd5) 1}
.journey-card h3{margin:8px 0 10px;color:#eff4ff;font-size:16px;line-height:1.3}
.journey-card p{color:#aebcda;font-size:12px;line-height:1.72}
.personal-journey .mini-label{color:#69e1e9}
@media(max-width:900px){.personal-journey-head{display:block}.personal-journey-head p{margin-top:8px}.journey-card{min-height:0}}
@media(max-width:600px){.personal-journey{padding:14px}.personal-journey-head h3{font-size:19px}}
@media print{.personal-journey{background:#fff!important;border-color:#ccc!important}.personal-journey-head h3,.journey-card h3{color:#111!important}.personal-journey-head p,.journey-card p{color:#333!important}.journey-card{background:#fff!important;border-color:#ccc!important;break-inside:avoid}}


/* Identitas pembimbing dan penguji pada bagian pembuka portofolio. */
.committee-strip{display:grid;gap:8px;margin:17px 0 20px;padding:14px 15px;border:1px solid #293b68;border-radius:15px;background:linear-gradient(120deg,rgba(16,29,57,.86),rgba(28,25,67,.78))}
.committee-item{display:grid;grid-template-columns:minmax(150px,.78fr) minmax(0,1.22fr);gap:12px;align-items:start}
.committee-item span{font-size:10px;line-height:1.55;letter-spacing:.05em;text-transform:uppercase;font-weight:850;color:#8fa4d5}
.committee-item strong{font-size:12px;line-height:1.55;color:#eff5ff;font-weight:800}
@media(max-width:600px){.committee-strip{padding:12px;gap:9px}.committee-item{grid-template-columns:1fr;gap:1px}.committee-item span{font-size:9px}.committee-item strong{font-size:12px}}
@media print{.committee-strip{background:#fff!important;border-color:#ccc!important}.committee-item span,.committee-item strong{color:#222!important}}