/* ===============================
   YPAI Elegant — Style Tweaks v2
   =============================== */

/* Palette */
:root{
  --brand:#10b981; --brand-600:#059669; --brand-700:#047857; --brand-50:#ecfdf5;
  --jade:#13c59a; --mint:#a7f3d0;
  --gold:#facc15; --gold-2:#fbbf24;
  --ink:#0b1324; --muted:#6b7280;
}

/* Base */
html,body{scroll-behavior:smooth}
body{background:#f6faf8;color:var(--ink)}
.ypai, .ypai *{ font-family:'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif }
h1,h2,h3{ font-family:'Playfair Display', Georgia, serif; letter-spacing:.2px }

/* Container tightening on wide screens */
@media (min-width:1100px){
  .container{ max-width: 1080px; margin: 0 auto; }
}

/* NAVBAR */
.nav{position:sticky;top:.5rem;z-index:20}
.ypai-nav{
  background:linear-gradient(100deg, rgba(4,120,87,.92), rgba(16,185,129,.82));
  backdrop-filter: blur(10px) saturate(150%);
  border:1px solid rgba(255,255,255,.20);
  border-radius:1.05rem; padding:.95rem 1.1rem;
  box-shadow:0 20px 64px -30px rgba(2,44,34,.50);
  display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  transition: box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.nav-scrolled .ypai-nav{
  background:linear-gradient(100deg, rgba(4,120,87,.96), rgba(16,185,129,.92));
  box-shadow:0 26px 80px -32px rgba(2,44,34,.6);
  border-color: rgba(255,255,255,.26);
}
.ypai-nav .brand{ color:#fff; display:flex; align-items:center; gap:.7rem; text-decoration:none }
.ypai-nav .brand img{ width:42px;height:42px;border-radius:999px; object-fit:contain; transition: transform .18s ease }
.ypai-nav .brand:hover img{ transform:scale(1.05) }
.ypai-nav .brand span{ font-weight:800; letter-spacing:.25px }
.ypai-nav a{ color:#e6fffb; text-decoration:none }
.ypai-nav .ypai-nav-right a{ margin-left:.45rem; padding:.58rem .9rem; border-radius:999px; transition:all .18s ease }
.ypai-nav .ypai-nav-right a:hover{ background:rgba(255,255,255,.12) }
.ypai-nav .ypai-nav-right a.active{ background:rgba(255,255,255,.20); color:#fff }

/* HERO — softer gradient, better spacing */
.hero{
  position:relative; overflow:hidden;
  border-radius:1.15rem; margin-top:.85rem;
  padding:2.8rem 1.5rem;
  color:#fff;
  background:
    radial-gradient(1400px 520px at 20% -20%, #c7f9e8, #10b981 55%, #047857 120%);
  box-shadow:0 32px 88px -40px rgba(4,120,87,.45);
}
/* micro-noise pattern (very light) */
.hero:after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.08;
  background-image:
    radial-gradient(circle at 10% 15%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 70% 35%, #fff 0 1px, transparent 2px);
  background-size: 140px 140px, 160px 160px;
}
.hero h1{
  font-size:clamp(26px, 4.3vw, 48px);  /* smaller than v1 */
  line-height:1.12; letter-spacing:.15px;
  text-shadow:0 4px 22px rgba(0,0,0,.22);
  margin:.1rem 0 .8rem; max-width:26ch;
}
.hero p{ color:#e6fffb; font-weight:500; max-width:60ch }

/* BUTTONS — gold gradient + press effect */
.btn{
  background: linear-gradient(180deg, var(--gold), var(--gold-2));
  color:#1f2937; border:none; border-radius:999px;
  padding:.75rem 1.15rem; font-weight:800; letter-spacing:.08px;
  box-shadow:0 16px 34px -18px rgba(251,191,36,.7);
  transition: transform .1s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 22px 48px -22px rgba(251,191,36,.82) }
.btn:active{ transform:translateY(0); box-shadow:0 12px 24px -16px rgba(251,191,36,.6) }
.btn.outline{ background:transparent; color:#fff; border:2px solid rgba(255,255,255,.78) }

/* CARDS / FORMS */
.card{ background:#fff; border:1px solid #e6e8ee; border-radius:1rem; padding:1.1rem; box-shadow:0 12px 34px -22px rgba(0,0,0,.20) }
input,textarea,select{ border-radius:.75rem; border:1px solid #cbd5e1; padding:.66rem .75rem; outline:none; transition:box-shadow .15s ease,border-color .15s ease }
input:focus,textarea:focus,select:focus{ border-color:#059669; box-shadow:0 0 0 3px rgba(16,185,129,.30) }

/* REVEAL */
.reveal{ opacity:0; transform:translateY(10px); transition: all .5s ease}
.reveal-in{ opacity:1; transform:none }

@media (max-width:640px){
  .hero{ padding:2.0rem 1.0rem }
  .ypai-nav{ border-radius:0; top:0 }
}
/* === Final Modern Polish — YPAI Elegant v3 === */

/* Warna dasar */
:root {
  --primary: #059669;
  --secondary: #047857;
  --accent: #facc15;
  --text-dark: #0f172a;
  --text-muted: #475569;
}

/* Perhalus teks semua */
html, body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "liga", "kern", "calt";
  background: #f9fafb;
}

/* Font utama */
body, .ypai, .ypai * {
  font-family: "Inter", "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text-dark);
}

/* Heading elegan */
h1, h2, h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--text-dark);
  line-height: 1.1;
}

/* Hero title besar */
.hero h1 {
  font-size: clamp(32px, 5vw, 52px);
  background: linear-gradient(90deg, #10b981, #047857);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Subjudul hero */
.hero p {
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1.6;
}

/* Tombol utama */
.btn-primary, .card .btn {
  background: var(--accent);
  color: #111;
  font-weight: 700;
  border: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-primary:hover, .card .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 25px -10px rgba(250,204,21,.5);
}

/* Program & Artikel Cards spacing */
.cards { margin-top: 2rem; }
.card h3 { font-weight: 700; }
.card p { font-size: 0.95rem; color: var(--text-muted); }

/* Footer halus */
footer { margin-top: 4rem; padding: 1rem 0; font-size: 0.85rem; color: #94a3b8; text-align: center; }

/* Responsif navbar */
@media (max-width: 768px) {
  .ypai-nav { flex-direction: column; align-items: flex-start; }
  .ypai-nav-right a, .dropbtn { display: block; width: 100%; text-align: left; padding: .7rem 1rem; }
  .dropdown-menu { position: static; box-shadow: none; border: 0; padding-left: 1rem; }
}