:root {
  --ink:#14243c;
  --muted:#637188;
  --blue:#075be8;
  --dark:#083580;
  --cream:#fffaf2;
  --line:#e6ebf2;
  --orange:#ff990f
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:'DM Sans','Segoe UI',Arial,sans-serif;
  line-height:1.6
}
a {
  color:inherit;
  text-decoration:none
}
button,a {
  -webkit-tap-highlight-color:transparent
}
a:focus-visible {
  outline:3px solid var(--orange);
  outline-offset:4px
}
h1,h2,h3,p {
  margin-top:0
}
h1,h2,h3 {
  font-family:Manrope,'Segoe UI',sans-serif;
  line-height:1.15;
  letter-spacing:-.045em
}
.container {
  width:min(1180px,calc(100% - 48px));
  margin-inline:auto
}
.skip-link {
  position:absolute;
  top:-60px;
  left:20px;
  z-index:100;
  padding:10px 16px;
  background:#fff
}
.skip-link:focus {
  top:10px
}
.site-header {
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(16px)
}
.nav-wrap {
  display:flex;
  align-items:center;
  gap:30px;
  min-height:82px
}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  min-width:240px
}
.brand img {
  display:block;
  width:158px;
  max-height:52px;
  object-fit:contain
}
.brand span {
  font-size:.61rem;
  color:var(--blue);
  font-weight:800;
  letter-spacing:.19em;
  border-left:1px solid #cbd6e8;
  padding-left:12px
}
.site-nav {
  display:flex;
  justify-content:center;
  gap:31px;
  flex:1
}
.site-nav a {
  font-size:.9rem;
  font-weight:700;
  color:#34465d;
  white-space:nowrap
}
.site-nav a:hover,.footer-main a:hover,.footer-bottom a:hover {
  color:var(--blue)
}
.login-link {
  margin-left:auto;
  color:var(--blue);
  font-weight:800;
  white-space:nowrap;
  border:1px solid #c4d8ff;
  border-radius:100px;
  padding:10px 21px;
  transition:.2s
}
.login-link:hover {
  background:#ebf3ff
}
.hero {
  background:radial-gradient(circle at 80% 30%,#2c72e8 0%,transparent 40%),linear-gradient(120deg,#082a71 0%,#0955c8 58%,#194ac8 100%);
  overflow:hidden;
  color:#fff
}
.hero-grid {
  min-height:635px;
  display:grid;
  grid-template-columns:1fr .86fr;
  align-items:center;
  gap:40px
}
.hero-copy {
  padding:80px 0;
  position:relative;
  z-index:2
}
.eyebrow {
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:#dce9ff;
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.16em
}
.dot {
  width:8px;
  height:8px;
  background:var(--orange);
  border-radius:50%;
  box-shadow:0 0 0 5px rgba(255,153,15,.16)
}
.hero h1 {
  font-size:clamp(3.1rem,5.25vw,5.35rem);
  margin:24px 0;
  max-width:700px;
  font-weight:800
}
.hero h1 em {
  color:#ffc263;
  font-style:normal
}
.hero-copy>p {
  font-size:1.08rem;
  color:#e0eafb;
  max-width:520px;
  line-height:1.85
}
.hero-actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:27px;
  margin-top:35px
}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  border-radius:12px;
  padding:15px 23px;
  font-weight:800;
  white-space:nowrap;
  transition:transform .2s,box-shadow .2s
}
.btn:hover {
  transform:translateY(-3px)
}
.btn-light {
  background:#fff;
  color:#073f9d;
  box-shadow:0 12px 28px rgba(2,21,67,.13)
}
.hero-text-link {
  font-weight:700;
  color:#fff;
  border-bottom:1px solid #97bcff;
  padding-bottom:5px
}
.hero-text-link span {
  margin-left:8px
}
.hero-note {
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:71px;
  font-size:.79rem;
  color:#dce9ff
}
.note-icon {
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  width:31px;
  height:31px;
  border-radius:9px;
  color:#ffbf4f
}
.hero-art {
  height:500px;
  position:relative;
  display:grid;
  place-items:center
}
.art-orbit {
  position:absolute;
  border:1px solid rgba(255,255,255,.19);
  border-radius:50%;
  width:480px;
  height:480px
}
.orbit-two {
  width:370px;
  height:370px;
  border-style:dashed;
  transform:rotate(28deg)
}
.art-core {
  position:relative;
  display:flex;
  flex-direction:column;
  width:350px;
  min-height:430px;
  background:linear-gradient(150deg,#fff,#edf4ff);
  border:1px solid #fff;
  border-radius:28px;
  padding:38px;
  color:var(--dark);
  box-shadow:0 35px 80px rgba(0,24,83,.29);
  transform:rotate(5deg)
}
.art-small {
  font-size:.64rem;
  font-weight:800;
  letter-spacing:.17em;
  color:#5380bd
}
.art-core strong {
  font:800 clamp(3rem,4.7vw,4.65rem)/1.07 Manrope,sans-serif;
  letter-spacing:-.07em;
  margin:auto 0
}
.art-core i {
  color:var(--blue);
  font-style:normal
}
.art-line {
  height:1px;
  background:#d9e5f5;
  width:100%;
  margin-bottom:18px
}
.art-bottom {
  font-size:.76rem;
  color:#667999;
  font-weight:700
}
.float-chip {
  position:absolute;
  background:#fff;
  color:var(--dark);
  font-size:.77rem;
  font-weight:800;
  box-shadow:0 15px 40px rgba(0,28,91,.18);
  padding:14px 17px;
  border-radius:13px;
  z-index:2
}
.chip-one {
  top:46px;
  left:4px;
  transform:rotate(-6deg)
}
.chip-two {
  right:-4px;
  bottom:55px;
  transform:rotate(5deg)
}
.section {
  padding:105px 0;
  scroll-margin-top:82px
}
.intro {
  background:var(--cream)
}
.intro-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:95px;
  align-items:start
}
.section-tag {
  color:var(--blue);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.16em
}
.intro h2,.section-heading h2,.testimonial h2 {
  font-size:clamp(2.25rem,3.6vw,3.55rem);
  margin:20px 0
}
.intro h2 span,.section-heading h2 span,.testimonial h2 span {
  color:var(--blue)
}
.intro-text {
  padding-top:31px;
  color:var(--muted);
  font-size:1.02rem;
  line-height:1.95
}
.intro-text p {
  margin-bottom:17px
}
.text-link {
  display:inline-flex;
  gap:18px;
  color:var(--blue);
  font-weight:800;
  margin-top:13px;
  border-bottom:1px solid #b6cffd;
  padding-bottom:6px
}
.courses {
  background:#fff
}
.section-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:45px;
  margin-bottom:38px
}
.section-heading h2 {
  margin-bottom:0
}
.section-heading>p {
  color:var(--muted);
  max-width:295px;
  line-height:1.8;
  margin:0 0 5px
}
.course-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px
}
.course-card {
  min-width:0;
  border:1px solid var(--line);
  border-radius:17px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 9px 26px rgba(15,41,80,.05);
  transition:box-shadow .2s,transform .2s
}
.course-card:hover {
  transform:translateY(-5px);
  box-shadow:0 18px 40px rgba(15,41,80,.11)
}
.course-art {
  height:184px;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:22px;
  color:#fff;
  background:radial-gradient(circle at 75% 20%,#6096f8,transparent 40%),linear-gradient(135deg,#063384,#126bdf)
}
.course-art:after {
  content:'';
  position:absolute;
  width:260px;
  height:260px;
  border:1px solid rgba(255,255,255,.26);
  border-radius:50%;
  right:-50px;
  bottom:-130px;
  box-shadow:0 0 0 33px rgba(255,255,255,.07),0 0 0 68px rgba(255,255,255,.05)
}
.course-art.art-2 {
  background:radial-gradient(circle at 80% 10%,#b47bff,transparent 45%),linear-gradient(135deg,#3b258a,#1166b6)
}
.course-art.art-3 {
  background:radial-gradient(circle at 75% 18%,#f3bb69,transparent 40%),linear-gradient(135deg,#073579,#167bc2)
}
.course-code {
  align-self:flex-start;
  background:rgba(255,255,255,.2);
  border:1px solid rgba(255,255,255,.3);
  border-radius:100px;
  font-size:.68rem;
  font-weight:800;
  padding:5px 11px;
  max-width:90%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.course-glyph {
  position:absolute;
  right:48px;
  top:36px;
  font-size:5rem;
  line-height:1;
  opacity:.85
}
.course-art-label {
  font-weight:800;
  font-size:.68rem;
  letter-spacing:.2em;
  position:relative;
  z-index:1
}
.course-content {
  padding:24px
}
.course-category {
  font-size:.65rem;
  font-weight:800;
  color:var(--blue);
  letter-spacing:.13em
}
.course-content h3 {
  font-size:1.27rem;
  min-height:2.6em;
  margin:12px 0
}
.course-content p {
  font-size:.87rem;
  color:var(--muted);
  line-height:1.7;
  min-height:4.9em;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden
}
.course-bottom {
  border-top:1px solid var(--line);
  padding-top:17px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px
}
.course-bottom small {
  color:var(--muted);
  font-size:.76rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.course-bottom a {
  color:var(--blue);
  font-size:.8rem;
  font-weight:800;
  white-space:nowrap
}
.course-empty {
  grid-column:1/-1;
  text-align:center;
  background:#f5f9ff;
  border:1px dashed #bed3f6;
  border-radius:18px;
  padding:54px 25px
}
.course-empty>span {
  font-size:2rem;
  color:var(--orange)
}
.course-empty h3 {
  margin:15px 0 7px
}
.course-empty p {
  color:var(--muted);
  margin:0
}
.testimonial {
  background:#f5f8fd
}
.testimonial-box {
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  padding:48px 60px;
  display:grid;
  grid-template-columns:80px 1fr 110px;
  align-items:center;
  gap:25px;
  position:relative;
  overflow:hidden
}
.quote-mark {
  font:800 8rem/1 Georgia,serif;
  color:#bed3ff;
  align-self:start
}
.testimonial h2 {
  margin:16px 0
}
.testimonial p {
  color:var(--muted);
  max-width:630px;
  line-height:1.8;
  margin:0
}
.testimonial-accent {
  font-size:8rem;
  color:#ffdb9d;
  opacity:.8
}
.contact-section {
  padding:76px 0;
  background:linear-gradient(110deg,#07347d,#0759d5);
  color:#fff;
  scroll-margin-top:82px
}
.contact-grid {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:38px
}
.contact-section .section-tag {
  color:#ffca75
}
.contact-section h2 {
  font-size:clamp(2rem,3.5vw,3.2rem);
  margin:16px 0 9px
}
.contact-section p {
  color:#dceaff;
  margin:0
}
.contact-actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap
}
.btn-outline {
  color:#fff;
  border:1px solid #9bc0f2
}
.site-footer {
  background:#0d1f37;
  color:#d7e0ec
}
.footer-main {
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:55px;
  padding:64px 0 54px
}
.footer-brand {
  display:inline-block;
  background:#fff;
  border-radius:10px;
  padding:6px 10px
}
.footer-brand img {
  display:block;
  width:180px;
  max-height:62px;
  object-fit:contain
}
.footer-main p {
  color:#a7b8cb;
  margin:17px 0 0;
  max-width:280px;
  font-size:.87rem
}
.footer-main>div:not(:first-child) {
  display:flex;
  flex-direction:column;
  gap:9px
}
.footer-main strong {
  color:#fff;
  margin-bottom:12px;
  font-size:.9rem
}
.footer-main a,.footer-main span {
  font-size:.86rem
}
.footer-bottom {
  border-top:1px solid #294057;
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:20px 0;
  color:#91a4bc;
  font-size:.78rem
}
@media(max-width:990px) {
  .brand {
    min-width:auto
  }
  .brand span {
    display:none
  }
  .site-nav {
    gap:17px
  }
  .hero-grid {
    grid-template-columns:1fr .74fr
  }
  .hero-art {
    transform:scale(.8);
    transform-origin:center
  }
  .intro-grid {
    gap:45px
  }
  .course-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .testimonial-box {
    grid-template-columns:55px 1fr
  }
  .testimonial-accent {
    display:none
  }
  .contact-grid {
    align-items:flex-start;
    flex-direction:column
  }
}
@media(max-width:700px) {
  .container {
    width:min(100% - 34px,1180px)
  }
  .nav-wrap {
    min-height:66px;
    gap:12px;
    flex-wrap:wrap;
    padding:8px 0
  }
  .brand img {
    width:136px
  }
  .login-link {
    padding:7px 13px;
    font-size:.81rem
  }
  .site-nav {
    order:3;
    width:100%;
    justify-content:space-between;
    overflow-x:auto;
    gap:17px;
    padding:4px 0 6px
  }
  .site-nav a {
    font-size:.73rem
  }
  .hero-grid {
    display:block;
    min-height:auto
  }
  .hero-copy {
    padding:74px 0 20px
  }
  .hero h1 {
    font-size:clamp(2.6rem,9vw,4rem)
  }
  .hero-copy>p {
    font-size:.98rem
  }
  .hero-note {
    margin-top:43px;
    font-size:.72rem
  }
  .hero-art {
    height:340px;
    transform:scale(.68);
    transform-origin:top center;
    margin-bottom:-95px
  }
  .section {
    padding:72px 0;
    scroll-margin-top:108px
  }
  .intro-grid {
    grid-template-columns:1fr;
    gap:8px
  }
  .intro-text {
    padding-top:0
  }
  .section-heading {
    align-items:start;
    flex-direction:column;
    gap:12px
  }
  .course-grid {
    grid-template-columns:1fr
  }
  .course-content h3,.course-content p {
    min-height:0
  }
  .testimonial-box {
    display:block;
    padding:35px 28px
  }
  .quote-mark {
    font-size:4.5rem;
    height:45px
  }
  .contact-section {
    padding:66px 0;
    scroll-margin-top:108px
  }
  .footer-main {
    grid-template-columns:1fr 1fr;
    gap:35px;
    padding:50px 0
  }
  .footer-main>div:first-child {
    grid-column:1/-1
  }
}
@media(max-width:390px) {
  .site-nav {
    gap:12px
  }
  .site-nav a {
    font-size:.68rem
  }
  .hero-actions {
    gap:22px
  }
  .hero-art {
    margin-left:-22px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    transition:none!important
  }
}
.course-art {
  position:relative;
  overflow:hidden
}
.course-thumbnail {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover
}
.course-art:has(.course-thumbnail) .course-code,.course-art:has(.course-thumbnail) .course-art-label {
  position:relative;
  z-index:1;
  background:rgba(5,32,83,.75);
  color:#fff;
  padding:4px 8px;
  border-radius:5px
}
/* Hero image layout: overrides the original two-column hero grid. */
#beranda.hero {
  position:relative;
  display:block;
  width:100%;
  min-height:760px;
  background:#071b47;
  color:#fff;
  overflow:hidden;
  isolation:isolate;
}
#beranda.hero::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(3,15,48,.54),rgba(3,15,48,.16) 46%,transparent 72%);
}
#beranda.hero .hero-bg {
  display:block;
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center center;
}
#beranda.hero .hero-grid {
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  width:min(1180px,calc(100% - 48px));
  min-height:760px;
  margin-inline:auto;
  grid-template-columns:none;
  gap:0;
}
#beranda.hero .hero-copy {
  position:relative;
  z-index:2;
  width:100%;
  max-width:650px;
  padding:70px 0;
}
#beranda.hero .hero-copy h1 {
  max-width:650px;
}
@media (max-width:700px) {
  #beranda.hero, #beranda.hero .hero-grid {
    min-height:680px;
  }
  #beranda.hero .hero-grid {
    width:calc(100% - 34px);
    align-items:flex-start;
  }
  #beranda.hero .hero-bg {
    object-position:63% center;
  }
  #beranda.hero::before {
    background:linear-gradient(180deg,rgba(3,15,48,.95),rgba(3,15,48,.72) 65%,rgba(3,15,48,.2));
  }
  #beranda.hero .hero-copy {
    max-width:100%;
    padding:58px 0 35px;
  }
}
/* Course thumbnail stays above decorative shapes; fallback glyph remains for empty paths. */
.course-art.has-thumbnail::after {
  display:none;
}
.course-art.has-thumbnail .course-thumbnail {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}
.course-art.has-thumbnail .course-code,
.course-art.has-thumbnail .course-art-label {
  position:relative;
  z-index:2;
  background:rgba(5,32,83,.75);
  color:#fff;
  padding:4px 8px;
  border-radius:5px;
}