:root{
  --navy:#0b3767;
  --navy-2:#171738;
  --teal:#14cdb5;
  --teal-dark:#079f92;
  --ink:#102b50;
  --muted:#71869b;
  --line:#dce9f1;
  --soft:#f4faff;
  --soft-mint:#effcf8;
  --white:#fff;
  --shadow:0 16px 42px rgba(16,43,80,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:#f7fbfd;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
/* Header + drawer disamakan persis dengan landing page Course. */
.site-header{
  height:58px;
  padding:0 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#1b1a3b;
  position:relative;
  z-index:30;
  border:0;
}
.brand img{width:115px;height:auto}
.menu-toggle{
  width:42px;height:42px;border:0;background:transparent;color:#fff;
  display:grid;place-items:center;font-size:28px;padding:0;
}
.menu-toggle i{font-size:27px}
.menu-backdrop{position:fixed;inset:0;background:rgba(8,10,27,.52);z-index:90}
.mobile-drawer{
  position:fixed;top:0;right:0;width:min(88vw,360px);height:100dvh;padding:22px;
  background:#fff;z-index:100;transform:translateX(105%);transition:transform .25s ease;
  overflow:auto;box-shadow:-20px 0 48px rgba(18,20,44,.16)
}
.mobile-drawer.open{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.drawer-head img{width:118px; filter: brightness(0) saturate(100%);}
.drawer-close{width:40px;height:40px;border-radius:50%;border:1px solid #e7e8ef;background:#fff;color:#1b1a3b;font-size:18px}
.drawer-nav,.mentor-links{display:grid;gap:5px}
.drawer-nav a,.mentor-links a{min-height:46px;padding:0 12px;border-radius:12px;display:flex;align-items:center;gap:12px;color:#1b1a3b;font-weight:700;font-size:14px}
.drawer-nav a:hover,.mentor-links a:hover{background:#f5f7fa}
.drawer-nav i{width:22px;text-align:center;color:#078899}
.mentor-links a{justify-content:space-between;font-weight:600}
.mentor-links i{font-size:11px;color:#a0a4b6}
.drawer-divider{height:1px;background:#e7e8ef;margin:20px 0}
.drawer-label{margin:0 10px 8px;color:#8b8fa5;font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:800}

/* Footer disamakan persis dengan landing page Course. */
.site-footer{padding:29px 28px 30px;background:#1b1a3b;border-top:0;text-align:center;color:#a9c4d8}
.site-footer img{width:120px;margin:0 auto}
.site-footer p{margin:0;color:#a9c4d8;font-size:9.5px;line-height:1.4}


.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#f0f8fd 0%,#f7fbfd 100%)}
.hero::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:-160px;top:-190px;background:rgba(20,205,181,.09)}
.hero-inner{width:min(1180px,calc(100% - 40px));margin:auto;padding:72px 0 56px;position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:#0aa99a;text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:850}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--teal);border-radius:99px}
h1{margin:12px 0 12px;font-size:clamp(36px,5vw,60px);line-height:1;letter-spacing:-.045em;color:#0d315d}
.hero p{max-width:680px;margin:0;color:var(--muted);font-size:16px;line-height:1.7}
.mentor-listing{width:min(1180px,calc(100% - 40px));margin:0 auto;padding:48px 0 74px}
.listing-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:26px}
.listing-head h2{margin:0 0 7px;font-size:30px;letter-spacing:-.035em;color:#0d315d}
.listing-head p{margin:0;color:var(--muted);font-size:14px}
.mentor-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.mentor-card{background:#f4faff;border:1px solid var(--line);border-radius:19px;overflow:hidden;box-shadow:0 8px 24px rgba(17,60,90,.04);transition:transform .22s ease,box-shadow .22s ease}
.mentor-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.mentor-photo{height:310px;position:relative;overflow:hidden;background:linear-gradient(145deg,#dff8f3,#e5f2ff)}
.mentor-photo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:74px;background:linear-gradient(180deg,rgba(244,250,255,0),rgba(244,250,255,.9))}
.mentor-photo img{width:100%;height:100%;object-fit:contain;object-position:center bottom;padding:20px 22px 0}
.mentor-body{padding:18px 18px 20px}
.mentor-body h3{margin:0 0 5px;color:#0b3767;font-size:17px;line-height:1.25}
.mentor-role{margin:0;color:#698097;font-size:12px;line-height:1.45}
.mentor-desc{margin:13px 0 0;color:#60788d;font-size:11.5px;line-height:1.55}
.mentor-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}
.mentor-tags span{padding:5px 9px;border:1px solid #d8e7f0;border-radius:999px;background:#fff;color:#60788f;font-size:9px}
.card-link{display:inline-flex;align-items:center;gap:7px;margin-top:16px;color:#079e91;font-size:11px;font-weight:850}


/* detail */
.profile-hero{background:linear-gradient(180deg,#f0f8fd,#fff)}
.profile-grid{width:min(1100px,calc(100% - 40px));margin:auto;padding:56px 0;display:grid;grid-template-columns:minmax(330px,.82fr) minmax(0,1.18fr);gap:50px;align-items:center}
.profile-portrait{min-height:520px;border-radius:28px;overflow:hidden;position:relative;background:linear-gradient(145deg,#dff8f3,#dceeff);box-shadow:var(--shadow)}
.profile-portrait img{position:absolute;inset:18px 18px 0;width:calc(100% - 36px);height:calc(100% - 18px);object-fit:contain;object-position:center bottom}
.profile-kicker{display:inline-flex;padding:7px 12px;border:1px solid #a9ddd4;border-radius:999px;color:#079d90;background:#f4fffc;text-transform:uppercase;letter-spacing:.1em;font-size:10px;font-weight:850}
.profile-copy h1{font-size:clamp(34px,5vw,35px);margin:14px 0 9px;line-height:1.02}
.profile-role{font-size:16px;color:#5f7890;margin:0 0 21px}
.profile-intro{font-size:14px;line-height:1.75;color:#60788d;max-width:650px}
.profile-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.profile-actions a{padding:11px 15px;border-radius:12px;font-size:11px;font-weight:800}
.btn-primary{background:var(--teal);color:#072f42}
.btn-secondary{border:1px solid var(--line);background:#fff;color:#0b3767}
.profile-main{width:min(1100px,calc(100% - 40px));margin:0 auto;padding:12px 0 72px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.info-card{padding:24px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 7px 22px rgba(13,49,93,.035)}
.info-card.wide{grid-column:1/-1}
.info-card .icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#e8fbf7;color:#08a795;font-size:17px}
.info-card h2{margin:14px 0 8px;font-size:20px;letter-spacing:-.025em;color:#0d315d}
.info-card p,.info-card li{color:#657d92;font-size:12.5px;line-height:1.7}
.info-card ul{padding-left:18px;margin:9px 0 0}
.back-row{width:min(1100px,calc(100% - 40px));margin:0 auto;padding:22px 0 0}
.back-row a{display:inline-flex;align-items:center;gap:8px;color:#0a9f92;font-size:12px;font-weight:800}

@media(max-width:820px){
  .hero-inner{width:calc(100% - 32px);padding:30px 0 0px}
  h1{font-size:30px}
  .hero p{font-size:13px;line-height:1.6}
  .mentor-listing{width:calc(100% - 28px);padding:20px 0 30px}
  .listing-head h2{font-size:24px}
  .listing-head p{font-size:12px}
  .mentor-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .mentor-photo{height:190px}
  .mentor-photo img{padding:10px 7px 0}
  .mentor-body{padding:12px 11px 14px}
  .mentor-body h3{font-size:14px}
  .mentor-role{font-size:11px; font-weight: 800;}
  .mentor-desc{font-size:10px;line-height:1.45;margin-top:9px}
  .mentor-tags{gap:5px;margin-top:10px}
  .mentor-tags span{font-size:9px;padding:4px 6px}
  .card-link{font-size:11px;margin-top:11px}
  .profile-grid{width:calc(100% - 28px);padding:28px 0 34px;grid-template-columns:1fr;gap:24px}
  .profile-portrait{min-height:390px;border-radius:22px}
  .profile-copy h1{font-size:22px}
  .profile-role{font-size:13px}
  .profile-intro{font-size:12px}
  .profile-main{width:calc(100% - 28px);grid-template-columns:1fr;padding-bottom:50px;gap:12px}
  .info-card.wide{grid-column:auto}
  .info-card{padding:18px}
  .info-card h2{font-size:18px}
  .info-card p,.info-card li{font-size:11.5px}
  .back-row{width:calc(100% - 28px)}
}

@media(max-width:370px){
  .mentor-grid{gap:8px}
  .mentor-photo{height:170px}
  .mentor-body h3{font-size:11px}
}

/* =========================================================
   v1.1.0 - DESKTOP EXPERIENCE
   Mobile layout <= 820px intentionally remains unchanged.
   ========================================================= */
.desktop-nav{display:none}

@media (min-width:821px){
  body{background:#f5f9fc}
  .site-header{
    height:76px;
    padding:0 max(36px,calc((100vw - 1240px)/2));
    position:sticky;
    top:0;
    z-index:80;
    background:#171738;
    box-shadow:0 8px 24px rgba(18,19,49,.12);
  }
  .brand img{width:138px}
  .menu-toggle{display:none}
  .desktop-nav{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:6px;
  }
  .desktop-nav a{
    min-height:42px;
    padding:0 13px;
    border-radius:11px;
    display:inline-flex;
    align-items:center;
    color:#d8d9e8;
    font-size:13px;
    font-weight:700;
    transition:background .18s ease,color .18s ease,transform .18s ease;
  }
  .desktop-nav a:hover{background:rgba(255,255,255,.08);color:#fff}
  .desktop-nav .desktop-cta{
    margin-left:8px;
    padding:0 19px;
    background:linear-gradient(90deg,#22d8b6,#11bdb0);
    color:#10213e;
    box-shadow:0 8px 20px rgba(20,207,179,.18);
  }
  .desktop-nav .desktop-cta:hover{background:linear-gradient(90deg,#35dfc0,#20cabc);color:#0b2445;transform:translateY(-1px)}

  /* Mentor listing hero */
  .hero{
    min-height:210px;
    background:
      radial-gradient(circle at 82% 38%,rgba(20,205,181,.16),transparent 28%),
      linear-gradient(135deg,#eef8fc 0%,#f7fbfd 62%,#effcf8 100%);
  }
  .hero-inner{
    width:min(1180px,calc(100% - 72px));
    padding:30px 0 10px;
  }
  .eyebrow{font-size:12px}
  h1{font-size:56px;max-width:760px}
  .hero p{max-width:none;font-size:16px;line-height:1.75}

  .mentor-listing{
    width:min(1180px,calc(100% - 72px));
    padding:0px 0 30px;
  }
  .listing-head{margin-bottom:32px}
  .listing-head h2{font-size:34px}
  .listing-head p{font-size:14px}
  .mentor-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px;
  }
  .mentor-card{border-radius:22px;background:#f4faff}
  .mentor-photo{height:350px}
  .mentor-photo img{padding:24px 26px 0}
  .mentor-body{padding:22px 22px 24px}
  .mentor-body h3{font-size:19px;line-height:1.3}
  .mentor-role{font-size:13px}
  .mentor-desc{font-size:12.5px;line-height:1.65}
  .mentor-tags span{font-size:10px;padding:6px 10px}
  .card-link{font-size:12px;margin-top:18px}

  /* Mentor detail */
  .back-row{
    width:min(1180px,calc(100% - 72px));
    padding-top:34px;
  }
  .back-row a{font-size:13px}
  .profile-hero{
    background:
      radial-gradient(circle at 78% 18%,rgba(20,205,181,.10),transparent 30%),
      linear-gradient(180deg,#f2f9fd,#fff);
  }
  .profile-grid{
    width:min(1120px,calc(100% - 72px));
    padding:58px 0 72px;
    grid-template-columns:minmax(360px,.86fr) minmax(0,1.14fr);
    gap:68px;
  }
  .profile-portrait{min-height:560px;border-radius:30px}
  .profile-copy h1{font-size:44px;line-height:1.02;margin-top:16px}
  .profile-role{font-size:17px}
  .profile-intro{font-size:15px;line-height:1.8}
  .profile-kicker{font-size:11px;padding:8px 13px}
  .profile-actions{margin-top:28px}
  .profile-actions a{padding:13px 18px;font-size:12px;border-radius:13px}

  .profile-main{
    width:min(1120px,calc(100% - 72px));
    padding:18px 0 90px;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px;
  }
  .info-card{padding:28px;border-radius:21px}
  .info-card .icon{width:48px;height:48px;border-radius:14px;font-size:19px}
  .info-card h2{font-size:22px;margin-top:16px}
  .info-card p,.info-card li{font-size:13.5px;line-height:1.75}

  .site-footer{padding:34px 28px 36px}
  .site-footer img{width:132px}
  .site-footer p{font-size:10.5px}
}

@media (min-width:821px) and (max-width:1080px){
  .site-header{padding-left:28px;padding-right:28px}
  .desktop-nav a{font-size:12px;padding-left:9px;padding-right:9px}
  .mentor-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .profile-grid{gap:42px;grid-template-columns:minmax(320px,.9fr) minmax(0,1.1fr)}
  .profile-copy h1{font-size:37px}
}