/* ==========================================================================
   Menu Layanan Aplikasi — FBE UII
   Tema    : FBE design system (navy #031E53, kuning #F7CA26, sudut 90°)
   Tipografi: Lato (heading) · Roboto (body) · Montserrat (menu/label)
   ========================================================================== */

:root{
  /* --- Warna: token FBE UII --- */
  --navy:        #031E53;
  --navy-deep:   #041159;
  --navy-mid:    #06337B;
  --ink:         #070513;
  --gray:        #3A3A3B;
  --gray-deep:   #2E2E30;
  --gray-mid:    #4C4C4F;
  --muted:       #56688C;
  --muted-2:     #7B7B7C;
  --line:        #EBEBEB;
  --line-2:      #DFE3E9;
  --page:        #F6F7F9;
  --surface:     #FFFFFF;
  --surface-2:   #FCFDFF;
  --gold:        #F7CA26;
  --gold-300:    #FADB6E;
  --gold-50:     #FEFAE9;
  --focus:       #031E53;

  /* --- Tipografi --- */
  --font-head: "Lato", "Montserrat", system-ui, sans-serif;
  --font-body: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-nav:  "Montserrat", "Lato", system-ui, sans-serif;

  /* --- Ritme & ukuran --- */
  --maxw:   1180px;
  --gutter: clamp(20px, 4vw, 32px);
  --gap:    20px;
  --ease:   cubic-bezier(.2,.7,.3,1);
}

/* ---------------------------------------------------------------- reset -- */
*,*::before,*::after{ box-sizing:border-box; }

html{
  color-scheme:light;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--surface);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.6;
  text-wrap:pretty;
  -webkit-font-smoothing:antialiased;
}

::selection{ background:var(--gold-300); }

h1,h2,h3{ font-family:var(--font-head); font-weight:700; margin:0; line-height:1.2; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
img{ max-width:100%; }

.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* --------------------------------------------------------- skip to content */
.skip{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:99;
  background:var(--gold);
  color:var(--ink);
  font-family:var(--font-nav);
  font-size:.8125rem;
  font-weight:700;
  padding:10px 14px;
  text-decoration:none;
}
.skip:focus{ left:16px; top:12px; }

/* ---------------------------------------------------------------- header -- */
.site-header{
  position:relative;
  z-index:40;
  background:var(--surface);
  border-bottom:1px solid var(--line);
}

.site-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:84px;
  padding-block:14px;
}

.brand{ display:inline-flex; align-items:center; text-decoration:none; }
.brand__logo{
  display:block;
  width:auto;
  height:clamp(38px, 4.4vw, 48px);
}
.brand:focus-visible{ outline:2px solid var(--navy); outline-offset:6px; }

.nav{
  display:flex;
  align-items:center;
  gap:clamp(14px, 1.7vw, 28px);
  flex-wrap:wrap;
  justify-content:flex-end;
}
.nav a{
  font-family:var(--font-nav);
  font-weight:600;
  font-size:13px;
  letter-spacing:.01em;
  color:var(--ink);
  text-decoration:none;
  padding:8px 0;
  border-bottom:2px solid transparent;
  transition:color .18s var(--ease), border-color .18s var(--ease);
}
.nav a:hover,
.nav a:focus-visible,
.nav a[aria-current="page"]{
  color:var(--navy);
  border-bottom-color:var(--gold);
  outline:none;
}
.nav a:focus-visible{ outline:2px solid var(--navy); outline-offset:4px; }

/* Menu seluler (tanpa JavaScript) */
.nav-drawer{ display:none; position:static; }

.nav-drawer__btn{
  list-style:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border:1px solid var(--line-2);
  background:var(--surface);
  color:var(--navy);
  font-family:var(--font-nav);
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
}
.nav-drawer__btn::-webkit-details-marker{ display:none; }
.nav-drawer__btn::after{ content:"\25BE"; font-size:10px; line-height:1; }
.nav-drawer[open] .nav-drawer__btn{
  border-color:var(--gold);
  background:var(--gold-50);
}
.nav-drawer__btn:focus-visible{ outline:2px solid var(--navy); outline-offset:3px; }

.nav-drawer__panel{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  display:flex;
  flex-direction:column;
  padding:6px var(--gutter) 14px;
  background:var(--surface);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  box-shadow:0 18px 32px rgba(3,30,83,.10);
}
.nav-drawer__panel a{
  padding:13px 0;
  border-bottom:1px solid var(--line);
  font-family:var(--font-nav);
  font-size:13px;
  font-weight:600;
  color:var(--ink);
  text-decoration:none;
}
.nav-drawer__panel a:last-child{ border-bottom:0; }
.nav-drawer__panel a:hover,
.nav-drawer__panel a:focus-visible,
.nav-drawer__panel a[aria-current="page"]{
  color:var(--navy);
  box-shadow:inset 0 -2px 0 var(--gold);
  outline:none;
}

/* ------------------------------------------------------------------ hero -- */
.hero{
  /* abu netral FBE (facultygray) menggantikan gradient biru */
  background:linear-gradient(135deg, var(--gray-deep) 0%, var(--gray) 55%, var(--gray-mid) 100%);
  border-bottom:4px solid var(--gold);
  color:#FFFFFF;
  padding-block:clamp(48px, 7vw, 76px) clamp(44px, 6vw, 64px);
}
/* .hero__inner memakai .wrap sehingga padding kiri/kanan sama dengan kartu layanan */

.kicker{
  font-family:var(--font-body);
  font-weight:700;
  font-size:.75rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:14px;
}
.hero__title{
  font-family:var(--font-head);
  font-weight:700;
  font-size:clamp(2rem, 4.4vw, 3.375rem);
  line-height:1.1;
  letter-spacing:-.02em;
  color:#FFFFFF;
  max-width:24ch;
}
.hero__lead{
  margin-top:18px;
  max-width:34rem;
  font-size:1.125rem;
  line-height:1.7;
  color:rgba(255,255,255,.82);
}
.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 26px;
  border:1px solid transparent;
  border-radius:0;
  font-family:var(--font-nav);
  font-size:.875rem;
  font-weight:700;
  line-height:1;
  text-decoration:none;
  transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.btn--gold{ background:var(--gold); color:var(--ink); }
.btn--gold:hover,
.btn--gold:focus-visible{ background:#FFFFFF; color:var(--navy); }
.btn--ghost{ background:transparent; border-color:rgba(255,255,255,.5); color:#FFFFFF; }
.btn--ghost:hover,
.btn--ghost:focus-visible{ background:#FFFFFF; border-color:#FFFFFF; color:var(--navy); }
.btn:focus-visible{ outline:2px solid #FFFFFF; outline-offset:3px; }

/* ---------------------------------------------------------------- konten -- */
main{ background:var(--page); }

.section{
  padding-block:clamp(44px, 6vw, 72px) clamp(52px, 7vw, 80px);
  scroll-margin-top:24px;
}

.section__head{ max-width:760px; margin-bottom:clamp(22px, 3vw, 32px); }

.eyebrow{
  font-family:var(--font-body);
  font-weight:700;
  font-size:.75rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:8px;
}

.section__title{
  position:relative;
  font-size:clamp(1.5rem, 2.6vw, 2rem);
  color:var(--navy);
  padding-bottom:14px;
}
.section__title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:40px;
  height:3px;
  background:var(--gold);
}

.section__sub{
  margin-top:14px;
  max-width:62ch;
  color:var(--muted-2);
}

/* ------------------------------------------------------------------ grid -- */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:var(--gap);
}

/* ------------------------------------------------------------------ card -- */
.card{
  display:flex;
  flex-direction:column;
  gap:12px;
  height:100%;
  padding:clamp(20px, 2.4vw, 26px);
  background:var(--surface);
  border:1px solid var(--line);
  border-top:3px solid var(--gold);
  border-radius:0;                 /* sudut 90 derajat */
  box-shadow:none;
  color:inherit;
  text-decoration:none;
  transition:border-color .18s var(--ease),
             box-shadow .18s var(--ease),
             transform .18s var(--ease);
}

.card__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }

.card__mark{
  display:grid;
  place-items:center;
  min-width:56px;
  height:46px;
  padding-inline:8px;
  background:var(--navy);
  color:var(--gold);
  border-radius:0;
  font-family:var(--font-nav);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.08em;
  transition:background .18s var(--ease), color .18s var(--ease);
}

.card__arrow{
  width:22px;
  height:22px;
  flex:none;
  color:var(--navy);
  transition:color .18s var(--ease), transform .18s var(--ease);
}

.card__title{
  font-family:var(--font-head);
  font-size:1.375rem;
  font-weight:700;
  color:var(--navy);
  line-height:1.25;
  min-block-size:2.5em;
}
.card__desc{ color:var(--muted); font-size:.95rem; line-height:1.6; }

/* ------------------------------------------------------------- interaksi */
.card:hover,
.card:focus-visible{
  border-color:var(--gold);
  box-shadow:0 14px 34px rgba(4,17,89,.10);
  transform:translateY(-2px);
  outline:none;
}
.card:hover .card__arrow,
.card:focus-visible .card__arrow{ transform:translateX(4px); }
.card:hover .card__mark,
.card:focus-visible .card__mark{ background:var(--gold); color:var(--ink); }

.card:focus-visible{
  outline:2px solid var(--navy);
  outline-offset:3px;
  box-shadow:0 14px 34px rgba(4,17,89,.10);
}

/* ---------------------------------------------------------------- footer -- */
.foot-main{
  background:var(--gold);
  color:var(--ink);
  padding-block:clamp(36px, 5vw, 52px) clamp(30px, 4vw, 44px);
}

.foot-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr);
  gap:clamp(24px, 4vw, 56px);
  align-items:start;
}

.foot-brand__link{
  display:inline-block;
  text-decoration:none;
}
.foot-brand__link:focus-visible{
  outline:2px solid var(--navy);
  outline-offset:6px;
}

.foot-brand__logo{
  display:block;
  width:auto;
  height:40px;
  margin-bottom:16px;
}
.foot-brand__name{
  font-family:var(--font-head);
  font-size:1.125rem;
  font-weight:700;
  line-height:1.4;
  color:var(--navy);
}

.foot-info{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:24px;
}
.foot-info__title{
  font-family:var(--font-head);
  font-size:.8125rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--navy);
  margin-bottom:8px;
}
.foot-info p{
  font-size:.9375rem;
  line-height:1.65;
  color:#1C2733;
}
.foot-info a{
  color:var(--navy);
  text-decoration:underline;
  text-underline-offset:2px;
}
.foot-info a:hover,
.foot-info a:focus-visible{ color:#8A6D00; }

.foot-bottom{ background:var(--navy); color:#FCFDFF; }
.foot-bottom .wrap{ padding-block:14px; text-align:center; }
.foot-bottom p{ font-size:.8125rem; line-height:1.5; color:inherit; }

/* ----------------------------------------------------------- responsive -- */
@media (max-width:860px){
  .nav{ display:none; }
  .nav-drawer{ display:block; }
  .site-header__inner{ min-height:72px; }
}

@media (max-width:820px){
  .foot-grid{ grid-template-columns:1fr; }
}

@media (max-width:599px){
  .site-header__inner{ min-height:64px; padding-block:12px; }
  .brand__logo{ height:36px; }
  .hero{ padding-block:44px 48px; }
  .hero__lead{ font-size:1rem; }
  .foot-info{ grid-template-columns:1fr; gap:20px; }
  .foot-brand__logo{ height:34px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition-duration:.001ms !important; animation-duration:.001ms !important; }
  .card:hover{ transform:none; }
  .card:hover .card__arrow{ transform:none; }
}