:root{
    --navy:#091C44;
    --navy-2:#16305f;
    --ink-dim:#4f6088;
    --orange:#EA8E3B;
    --orange-deep:#d67a26;
    --sand:#c99a5b;
    --bg-1:#fbfcfd;
    --bg-2:#eef2f7;
    --bg-3:#dde6f0;
    --white:#ffffff;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  body{
    font-family:'Inter',sans-serif;
    color:var(--navy);
    overflow-x:hidden;
    background:var(--bg-1);
  }
  .hero{
    position:relative;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    background:
      radial-gradient(ellipse 65% 55% at 88% 6%, rgba(234,142,59,0.10), transparent 60%),
      linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 45%, var(--bg-3) 100%);
  }

  .helm{
    position:absolute;
    top:-140px; right:-140px;
    width:520px; height:520px;
    opacity:0.06;
    z-index:0;
    animation:spin 90s linear infinite;
  }
  @keyframes spin{ to{ transform:rotate(360deg); } }

  nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:26px 6vw;
    position:relative;
    z-index:5;
  }
  .logo img{
    height:38px;
    width:auto;
    display:block;
  }
  .navlinks{
    display:none;
    gap:32px;
    font-size:0.9rem;
    color:var(--ink-dim);
  }
  .navlinks a{color:inherit;text-decoration:none;transition:color .2s;}
  .navlinks a:hover{color:var(--orange);}
  @media(min-width:900px){.navlinks{display:flex;}}
  .login-btn{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.78rem;
    border:1px solid rgba(9,28,68,0.22);
    padding:9px 18px;
    border-radius:100px;
    color:var(--navy);
    text-decoration:none;
    transition:border-color .2s, background .2s;
  }
  .login-btn:hover{border-color:var(--orange); background:rgba(234,142,59,0.08);}

  .hero-main{
    flex:1;
    display:grid;
    grid-template-columns:1fr;
    gap:40px;
    /*align-items:center;*/
    padding:20px 6vw 60px;
    max-width:1360px;
    margin:0 auto;
    width:100%;
    position:relative;
    z-index:2;
  }
  @media(min-width:960px){
    .hero-main{grid-template-columns:1.05fr 0.95fr; padding-top:30px;}
  }

  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-family:'IBM Plex Mono',monospace;
    font-size:0.72rem;
    letter-spacing:0.1em;
    color:var(--orange-deep);
    border:1px solid rgba(234,142,59,0.4);
    background:rgba(255,255,255,0.6);
    padding:6px 14px 6px 10px;
    border-radius:100px;
    margin-bottom:28px;
    opacity:0;
    animation:riseIn .7s ease forwards;
  }
  .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--orange);animation:pulse 2.2s ease-in-out infinite;}

  h1{
    font-family:'Fraunces',serif;
    font-weight:600;
    font-size:clamp(2.3rem, 5vw, 3.9rem);
    line-height:1.06;
    letter-spacing:-0.01em;
    max-width:12ch;
    color:var(--navy);
    opacity:0;
    animation:riseIn .8s ease .1s forwards;
  }
  h1 em{
    font-style:italic;
    color:var(--orange);
  }

  .sub{
    margin-top:22px;
    max-width:48ch;
    font-size:1.06rem;
    line-height:1.65;
    color:var(--ink-dim);
    opacity:0;
    animation:riseIn .8s ease .22s forwards;
  }

  .cta-row{
    margin-top:34px;
    display:flex;
    align-items:center;
    gap:22px;
    flex-wrap:wrap;
    opacity:0;
    animation:riseIn .8s ease .32s forwards;
  }
  .btn-primary{
    font-family:'Inter',sans-serif;
    font-weight:700;
    font-size:0.95rem;
    background:var(--orange);
    color:var(--navy);
    padding:15px 28px;
    border-radius:8px;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:8px;
    box-shadow:0 10px 24px -10px rgba(234,142,59,0.6);
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 28px -8px rgba(234,142,59,0.7);}
  .btn-ghost{
    font-size:0.92rem;
    color:var(--navy);
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:8px;
    border-bottom:1px solid rgba(9,28,68,0.3);
    padding-bottom:2px;
    transition:border-color .2s, color .2s;
  }
  .btn-ghost:hover{color:var(--orange-deep); border-color:var(--orange-deep);}

  .stats{
    margin-top:52px;
    display:flex;
    gap:40px;
    flex-wrap:wrap;
    align-items:flex-start;
    opacity:0;
    animation:riseIn .8s ease .42s forwards;
  }
  .stat-num{
    font-family:'Fraunces',serif;
    font-weight:600;
    font-size:1.75rem;
    color:var(--navy);
  }
  .stat-label{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.66rem;
    letter-spacing:0.05em;
    color:var(--ink-dim);
    text-transform:uppercase;
    margin-top:4px;
    max-width:14ch;
  }
  .anchor-sway{
    animation:sway 4s ease-in-out infinite;
    transform-origin:top center;
  }
  @keyframes sway{
    0%,100%{transform:rotate(-4deg);}
    50%{transform:rotate(4deg);}
  }

  .stage{
    position:relative;
    height:460px;
    opacity:0;
    animation:riseIn 1s ease .3s forwards;
  }
  .card{
    position:absolute;
    width:280px;
    background:var(--white);
    border:1px solid rgba(9,28,68,0.08);
    border-radius:16px;
    padding:22px;
    box-shadow:0 30px 55px -20px rgba(9,28,68,0.25);
    transition:transform .4s ease;
  }
  .card-back{
    top:14px; left:0;
    transform:rotate(-7deg);
    opacity:0.6;
  }
  .card-mid{
    top:56px; left:56px;
    transform:rotate(4deg);
    opacity:0.85;
  }
  .card-front{
    top:36px; left:104px;
    z-index:3;
  }
  .stage:hover .card-front{transform:translateY(-6px) rotate(-1deg);}

  .card-label{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.64rem;
    letter-spacing:0.08em;
    color:var(--orange-deep);
    text-transform:uppercase;
    margin-bottom:14px;
  }
  .match-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 0;
    border-bottom:1px solid rgba(9,28,68,0.07);
    font-size:0.9rem;
  }
  .match-row:last-child{border-bottom:none;}
  .term{color:var(--navy);}
  .flag{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:26px; height:20px;
    border-radius:3px;
    font-size:0.6rem;
    font-family:'IBM Plex Mono',monospace;
    color:var(--white);
  }
  .flag.a{background:var(--orange);}
  .flag.b{background:var(--navy);}
  .flag.c{background:var(--sand);}

  .chat-bubble-all{
    position:absolute;
    bottom:-10px; right:-16px;
    background:var(--navy);
    color:var(--white);
    font-size:0.8rem;
    font-weight:500;
    padding:10px 16px;
    border-radius:14px 14px 2px 14px;
    max-width:190px;
    box-shadow:0 12px 26px -8px rgba(9,28,68,0.35);
    z-index:4;
  }

  .chat-bubble-img{
    position:absolute;
    bottom:-100px; right:-16px;
    background:var(--navy);
    color:var(--white);
    font-size:0.8rem;
    font-weight:500;
    padding:10px 16px;
    border-radius:14px 14px 2px 14px;
    max-width:190px;
    box-shadow:0 12px 26px -8px rgba(9,28,68,0.35);
    z-index:4;
  }

  .chat-bubble {
      position: absolute;
      bottom: -10px; 
      right: -16px;
      background: var(--navy);
      color: var(--white);
      font-size: 0.8rem;
      font-weight: 500;
      padding: 10px 16px;
      border-radius: 14px 14px 2px 14px;
      max-width: 190px;
      box-shadow: 0 12px 26px -8px rgba(9,28,68,0.35);
      z-index: 4;
      
      /* Tambahan baru untuk menyembunyikan dan efek animasi */
      opacity: 0;
      visibility: hidden;
      transform: translateY(15px); /* Posisi agak ke bawah sedikit */
      transition: all 0.3s ease-in-out; /* Animasi mulus */
  }
  

  /* Class ini akan disuntikkan oleh JavaScript saat tombol diklik */
  .chat-bubble.show-bubble {
      opacity: 1;
      visibility: visible;
      transform: translateY(0); /* Kembali ke posisi semula */
  }

  .horizon{
    position:relative;
    width:100%;
    height:130px;
    overflow:hidden;
    z-index:2;
  }
  .ship{
    position:absolute;
    bottom:50px;
    left:-200px;
    width:170px;
    animation:sail 26s linear infinite;
  }
  @keyframes sail{
    from{ left:-200px; }
    to{ left:110%; }
  }
  .wave-layer{position:absolute; bottom:0; width:200%; height:80px;}
  .wave-1{animation:driftLeft 14s linear infinite;}
  .wave-2{animation:driftLeft 22s linear infinite reverse; opacity:0.7;}
  @keyframes driftLeft{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
  }

  @keyframes riseIn{
    from{opacity:0; transform:translateY(16px);}
    to{opacity:1; transform:translateY(0);}
  }
  @keyframes pulse{
    0%,100%{opacity:1;} 50%{opacity:0.35;}
  }

  @media (prefers-reduced-motion: reduce){
    *{animation:none !important; transition:none !important;}
    .eyebrow, h1, .sub, .cta-row, .stats, .stage{opacity:1;}
    .ship{left:20%;}
  }

  a:focus-visible, button:focus-visible{
    outline:2px solid var(--orange-deep);
    outline-offset:3px;
  }

  @media(max-width:640px){
    .stage{height:340px; transform:scale(0.82); transform-origin:top left;}
  }

  /* ==========================================================
   VOCABULARY LIST SECTION (FULL WIDTH & MODERN CARDS)
   ========================================================== */

/* Kontainer utama bagian bawah: ukurannya sejajar persis dengan hero-main */
.vocab-section {
  max-width: 1360px;
  width: 100%;
  margin: 0 auto;
  padding: 40px 6vw 80px;
  position: relative;
  z-index: 2;
}

/* Header Kategori (Judul & Ikon) */
.vocab-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 30px;
  padding-bottom: 16px;
  border-bottom: 2px solid rgba(9, 28, 68, 0.08);
}

.vocab-icon {
  font-size: 1.8rem;
  color: var(--orange);
}

.vocab-category-title {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  color: var(--navy);
  margin: 0;
}

/* Body kontainer agar item tersusun rapi ke bawah */
.vocab-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

/* Tampilan Kartu Kosakata (Details Main Item) */
.vocab-main-item {
  background: var(--white);
  border: 1px solid rgba(9, 28, 68, 0.1);
  border-radius: 12px;
  box-shadow: 0 4px 15px -5px rgba(9, 28, 68, 0.08);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vocab-main-item:hover {
  box-shadow: 0 10px 25px -8px rgba(9, 28, 68, 0.15);
}

/* Judul Kosakata yang bisa diklik */
.vocab-main-title {
  font-family: 'Inter', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navy);
  padding: 18px 24px;
  cursor: pointer;
  background: var(--white);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-left: 4px solid transparent;
  transition: all 0.2s ease;
}

.vocab-main-title:hover {
  color: var(--orange-deep);
  border-left-color: var(--orange);
  background: var(--bg-1);
}

/* Konten dalam Kartu setelah dibuka */
.vocab-content {
  padding: 20px 24px 24px;
  border-top: 1px solid rgba(9, 28, 68, 0.06);
  background: var(--bg-1);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Sub item (Definition, Function, Phrases, Practice) */
.vocab-sub-item {
  background: var(--white);
  border: 1px solid rgba(9, 28, 68, 0.08);
  border-radius: 8px;
  padding: 12px 16px;
}

.vocab-sub-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--orange-deep);
  cursor: pointer;
  margin-bottom: 8px;
}

.vocab-sub-content {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-dim);
  margin-top: 8px;
}

/* Styling Media (Gambar, Video, Iframe 3D) */
.vocab-media {
  width: 100%;
  max-width: 100%;
  border-radius: 10px;
  margin-bottom: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}