@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@500;600;700;800&display=swap');

:root{
  --bg:#060608;
  --fg:#ffffff;
  --muted:#cfcfd6;
  --gold:#d6a31e;
  --gold-2:#fbbf24;
  --gold-metallic:linear-gradient(135deg, #bf8c1d 0%, #f5db8b 50%, #c99324 100%);
  --accent:#f0c24a;
  --card:rgba(18, 18, 26, 0.75);
  --card-border:rgba(214, 163, 30, 0.2);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:'Inter',-apple-system,BlinkMacSystemFont,'Poppins','Segoe UI',Roboto,Helvetica,Arial,sans-serif;scroll-behavior:smooth}
a{color:var(--fg);text-decoration:none}
h1,h2,h3,.brand .title{font-family:'Outfit',sans-serif;letter-spacing:0.5px}
.container{max-width:1080px;margin:0 auto;padding:24px}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:14px}
.brand img{width:44px;height:44px;border-radius:50%;box-shadow:0 0 0 2px #c48b0b44,0 0 0 6px #000}
.brand .title{font-weight:800;letter-spacing:1px}
.badge{display:inline-block;margin-left:8px;padding:4px 12px;border-radius:999px;background:var(--gold-metallic);color:#000;font-weight:700;font-size:12px;box-shadow:0 2px 8px rgba(214,163,30,0.4)}
.actions a{padding:10px 14px;border-radius:12px;border:1px solid #2a2a33;margin-left:8px;transition:all 0.3s ease}
.actions .primary{background:var(--gold-metallic);color:#000;border:0;font-weight:700;box-shadow:0 4px 12px rgba(214,163,30,0.3)}
.actions .primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(214,163,30,0.5)}
.hero{padding:66px 0;background:radial-gradient(1200px 600px at 100% -10%,rgba(246,211,101,.10),transparent 60%)}
.hero h1{font-size:42px;line-height:1.15;margin:0 0 12px;font-weight:800;letter-spacing:.3px}
.hero p{color:var(--muted);font-size:18px;margin:0 0 22px}
.hero .cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.button{padding:14px 18px;border-radius:14px;border:1px solid #2a2a33;display:inline-flex;align-items:center;gap:10px;font-weight:600;transition:all 0.3s ease}
.button.primary{background:var(--gold-metallic);color:#000;border:0;font-weight:800;box-shadow:0 4px 12px rgba(214,163,30,0.3)}
.button.primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(214,163,30,0.5)}
.button.ghost{background:#14141a}
.button.ghost:hover{background:rgba(214,163,30,0.1);border-color:var(--gold)}
.section{padding:36px 0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--card);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--card-border);border-radius:20px;padding:22px;box-shadow:0 15px 35px rgba(0,0,0,0.6);transition:all 0.3s cubic-bezier(0.16, 1, 0.3, 1)}
.card:hover{transform:translateY(-5px);border-color:rgba(245, 219, 139, 0.6);box-shadow:0 20px 40px rgba(214, 163, 30, 0.15)}
.card h3{margin:0 0 8px;font-size:20px;color:#fff}
.card p{margin:0;color:var(--muted);line-height:1.6}
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.process .step{background:var(--card);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--card-border);border-radius:20px;padding:20px;box-shadow:0 15px 35px rgba(0,0,0,0.6);transition:all 0.3s cubic-bezier(0.16, 1, 0.3, 1)}
.process .step:hover{transform:translateY(-5px);border-color:rgba(245, 219, 139, 0.6);box-shadow:0 20px 40px rgba(214, 163, 30, 0.15)}
.step .num{font-weight:800;background:var(--gold-metallic);color:#000;display:inline-block;padding:6px 12px;border-radius:999px;margin-bottom:10px;box-shadow:0 4px 10px rgba(214,163,30,0.3)}
.footer{border-top:1px solid #1e1f26;color:#a7a7b3;padding:32px 0;margin-top:32px}
small a{color:#a7a7b3;text-decoration:underline}
@media(max-width:900px){.cards{grid-template-columns:1fr 1fr}.process{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.hero h1{font-size:30px}.cards{grid-template-columns:1fr}.process{grid-template-columns:1fr}.actions{display:none}}

/* Ara Tatil CTA Banner */
.cta-section{margin:50px 0}
.cta-banner{
  background:linear-gradient(135deg,rgba(214,163,30,0.18),rgba(18,18,26,0.85));
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(245,219,139,0.3);
  border-radius:24px;
  padding:48px 32px;
  text-align:center;
  position:relative;
  overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,0.6);
}
.cta-banner::before{
  content:'';
  position:absolute;
  top:-50%;
  right:-20%;
  width:400px;
  height:400px;
  background:radial-gradient(circle,rgba(246,211,101,0.15),transparent 70%);
  pointer-events:none;
}
.cta-content{position:relative;z-index:1}
.cta-icon{
  font-size:64px;
  margin-bottom:16px;
  animation:float 3s ease-in-out infinite;
}
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}
.cta-banner h2{
  font-size:32px;
  margin:0 0 12px;
  font-weight:800;
  background:var(--gold-metallic);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.cta-banner p{
  color:var(--muted);
  font-size:18px;
  margin:0 0 28px;
  max-width:600px;
  margin-left:auto;
  margin-right:auto;
}
.cta-button{
  font-size:18px;
  padding:16px 32px;
  background:var(--gold-metallic) !important;
  color:#000 !important;
  font-weight:800 !important;
  border-radius:16px;
  box-shadow:0 4px 16px rgba(214,163,30,0.3);
  transition:all 0.3s ease;
}
.cta-button:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(214,163,30,0.6);
}
@media(max-width:640px){
  .cta-banner{padding:32px 20px}
  .cta-banner h2{font-size:24px}
  .cta-banner p{font-size:16px}
  .cta-icon{font-size:48px}
}