:root{
  --navy:#0B2942;
  --navy-deep:#071B2C;
  --teal:#0E7C7B;
  --sand:#F6F1E4;
  --sand-dark:#EDE4CE;
  --amber:#E8A33D;
  --coral:#E8664A;
  --ink:#10202C;
  --paper:#FFFDF9;
  --line: rgba(11,41,66,0.14);
  --shadow: 0 20px 50px -20px rgba(7,27,44,0.35);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Plus Jakarta Sans', sans-serif;
  background:var(--sand);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:'Fraunces', serif; font-weight:600; letter-spacing:-0.01em; color:var(--navy-deep);}
a{text-decoration:none; color:inherit;}
button{font-family:inherit; cursor:pointer; border:none;}
.wrap{max-width:1140px; margin:0 auto; padding:0 28px;}
.eyebrow{
  font-family:'Space Mono', monospace; text-transform:uppercase; font-size:12.5px;
  letter-spacing:0.14em; color:var(--teal); font-weight:700; display:flex; align-items:center; gap:10px; margin-bottom:12px;
}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--teal);}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 26px; border-radius:999px; font-weight:700; font-size:15px; transition:all .25s ease;}
.btn-primary{background:var(--amber); color:var(--navy-deep); box-shadow:0 10px 24px -8px rgba(232,163,61,0.6);}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 16px 30px -8px rgba(232,163,61,0.75);}
.btn-ghost-dark{background:transparent; color:var(--navy-deep); border:1.5px solid var(--line);}
.btn-ghost-dark:hover{border-color:var(--navy-deep); background:rgba(11,41,66,0.05);}

/* ---------- HEADER ---------- */
header{position:sticky; top:0; z-index:100; background:rgba(255,253,249,0.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:padding .3s ease;}
.nav{display:flex; align-items:center; justify-content:space-between; padding:18px 0; transition:padding .3s ease;}
header.shrink .nav{padding:12px 0;}
.logo{display:flex; align-items:center; gap:9px; color:var(--navy-deep); font-family:'Fraunces',serif; font-weight:700; font-size:21px;}
.logo-img{height:46px; width:46px; object-fit:cover; border-radius:50%; box-shadow:0 0 0 2px rgba(255,255,255,0.85);}
.logo .dot{width:9px; height:9px; border-radius:50%; background:var(--amber);}
.nav-links{display:flex; gap:32px; list-style:none;}
.nav-links a{color:#3a4a56; font-size:14.5px; font-weight:600; transition:color .2s ease;}
.nav-links a:hover{color:var(--teal);}
.nav-right{display:flex; align-items:center; gap:14px;}
.burger{display:none; flex-direction:column; gap:5px; background:none; padding:4px;}
.burger span{width:24px; height:2px; background:var(--navy-deep); border-radius:2px;}

/* ---------- HERO ---------- */
.hero{padding:70px 0 90px;}
.hero-grid{display:grid; grid-template-columns:1.15fr 0.85fr; gap:50px; align-items:center;}
.hero-text h1{font-size:clamp(34px,4.6vw,52px); line-height:1.08; margin-bottom:14px;}
.hero-tagline{font-family:'Fraunces',serif; font-style:italic; font-size:19px; color:var(--teal); margin-bottom:14px;}
.hero-desc{color:#4b5c68; font-size:16px; max-width:52ch; margin-bottom:26px;}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:26px;}
.hero-badges{display:flex; gap:10px; flex-wrap:wrap;}
.mini-badge{background:var(--paper); border:1px solid var(--line); padding:8px 14px; border-radius:999px; font-size:12.5px; font-weight:700; color:var(--navy-deep);}

.hero-card{background:var(--paper); border-radius:24px; box-shadow:var(--shadow); padding:36px 28px; text-align:center;}
.agent-photo{position:relative; width:140px; height:140px; margin:0 auto 18px;}
.agent-avatar{
  width:140px; height:140px; border-radius:50%; object-fit:cover;
  border:5px solid var(--sand-dark);
}
.float-badge{position:absolute; width:38px; height:38px; border-radius:50%; background:var(--amber); display:flex; align-items:center; justify-content:center; font-size:17px; box-shadow:var(--shadow);}
.float-badge-1{top:-4px; right:-6px;}
.float-badge-2{bottom:2px; left:-10px; background:var(--coral);}
.hero-card h3{font-size:22px; margin-bottom:2px;}
.agent-title{color:#5a6b78; font-size:13.5px; font-weight:600; margin-bottom:20px;}
.agent-stats{display:flex; justify-content:space-around; border-top:1px dashed var(--line); padding-top:18px;}
.agent-stats div{display:flex; flex-direction:column; gap:2px;}
.agent-stats b{font-family:'Fraunces',serif; font-size:19px; color:var(--navy-deep);}
.agent-stats span{font-size:11px; color:#7a8896; text-transform:uppercase; letter-spacing:.05em;}

/* ---------- GENERIC ---------- */
section.pad{padding:90px 0;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:48px; flex-wrap:wrap;}
.section-head h2{font-size:clamp(26px,3.2vw,38px);}
.section-head p{color:#4b5c68; max-width:42ch; margin-top:4px;}
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease;}
.reveal.visible{opacity:1; transform:translateY(0);}

/* ---------- ABOUT ---------- */
.about-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.about-card{background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:26px;}
.about-num{font-size:26px; margin-bottom:10px;}
.about-card h4{font-size:18px; margin-bottom:8px;}
.about-card p{font-size:14px; color:#5a6b78;}

/* ---------- SERVICES ---------- */
.service-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.service-card{background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:28px 22px; transition:transform .3s ease, box-shadow .3s ease;}
.service-card:hover{transform:translateY(-5px); box-shadow:var(--shadow);}
.service-icon{font-size:28px; width:52px; height:52px; border-radius:14px; background:var(--sand-dark); display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
.service-card h4{font-size:17px; margin-bottom:6px;}
.service-card p{font-size:13.5px; color:#5a6b78;}

/* ---------- WHY / PERSONAL BRANDING ---------- */
.why-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:50px; align-items:center;}
.quote-card{background:var(--navy-deep); color:var(--paper); border-radius:22px; padding:40px 32px; position:relative;}
.quote-card p{font-family:'Fraunces',serif; font-style:italic; font-size:20px; line-height:1.5; margin-bottom:18px;}
.quote-card span{font-family:'Space Mono',monospace; font-size:12.5px; color:var(--amber);}
.check-list{list-style:none; margin:22px 0; display:flex; flex-direction:column; gap:14px;}
.check-list li{display:flex; gap:12px; font-size:15px; color:#3a4a56; align-items:flex-start;}
.check-ico{background:var(--teal); color:var(--paper); width:22px; height:22px; min-width:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; margin-top:2px;}

/* ---------- STEPS ---------- */
.step-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.step-card{background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:26px 22px; position:relative;}
.step-no{font-family:'Fraunces',serif; font-size:32px; color:var(--sand-dark); font-weight:700; -webkit-text-stroke:1.5px var(--amber); display:block; margin-bottom:10px;}
.step-card h4{font-size:16px; margin-bottom:6px;}
.step-card p{font-size:13.5px; color:#5a6b78;}

/* ---------- TESTIMONI ---------- */
.test-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.test-card{background:var(--paper); border-radius:18px; padding:26px; border:1px solid var(--line);}
.stars{color:var(--amber); font-size:14px; letter-spacing:2px; margin-bottom:12px;}
.test-card p{font-size:14.5px; color:#3a4a56; margin-bottom:18px;}
.test-person{display:flex; align-items:center; gap:10px;}
.avatar{width:38px; height:38px; border-radius:50%; background:var(--navy); color:var(--amber); display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-weight:700;}
.test-name{font-weight:700; font-size:13.5px;}
.test-role{font-size:12px; color:#7a8896;}

/* ---------- PARTNER STRIP ---------- */
.partner-strip{background:var(--navy-deep); padding:36px 0;}
.partner-label{color:rgba(255,253,249,0.5); font-size:12px; text-transform:uppercase; letter-spacing:.1em; margin-bottom:16px; text-align:center;}
.partner-row{display:flex; justify-content:center; gap:14px; flex-wrap:wrap;}
.partner-chip{border:1px solid rgba(255,253,249,0.2); color:rgba(255,253,249,0.75); padding:9px 18px; border-radius:999px; font-size:13px; font-weight:600;}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:30px;}
.contact-info{background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:30px;}
.contact-row{display:flex; gap:16px; align-items:flex-start; padding:14px 0; border-bottom:1px dashed var(--line);}
.contact-row:last-of-type{border-bottom:none;}
.contact-ico{width:38px; height:38px; border-radius:10px; background:var(--sand-dark); display:flex; align-items:center; justify-content:center; font-size:16px;}
.contact-row div span{display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:#7a8896; font-weight:700;}
.contact-row div b{font-size:15px; color:var(--navy-deep); font-weight:700;}
.edit-note{margin-top:18px; font-size:12px; color:#8a9aa6; line-height:1.5;}
.edit-note code{background:var(--sand-dark); padding:2px 6px; border-radius:5px; font-family:'Space Mono',monospace;}

.contact-form{background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:30px; display:flex; flex-direction:column; gap:14px;}
.contact-form h4{font-size:19px; margin-bottom:4px;}
.form-row{display:flex; flex-direction:column; gap:6px;}
.form-row label{font-size:12px; font-weight:700; color:var(--teal); text-transform:uppercase; letter-spacing:.05em;}
.form-row input, .form-row textarea{
  border:1px solid var(--line); background:var(--sand); border-radius:10px; padding:12px 14px; font-family:inherit; font-size:14.5px; outline:none; resize:vertical;
}
.form-row input:focus, .form-row textarea:focus{border-color:var(--teal);}

/* ---------- FOOTER ---------- */
footer{background:var(--navy-deep); padding:60px 0 26px; margin-top:20px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px; padding-bottom:36px;}
.foot-grid h5{color:var(--paper); font-size:13px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:16px;}
.foot-grid ul{list-style:none; display:flex; flex-direction:column; gap:10px;}
.foot-grid a{color:rgba(255,253,249,0.62); font-size:14px; transition:color .2s ease;}
.foot-grid a:hover{color:var(--amber);}
.foot-grid p{color:rgba(255,253,249,0.55); font-size:14px; max-width:34ch; margin-top:12px;}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:22px; border-top:1px solid rgba(255,253,249,0.08); color:rgba(255,253,249,0.45); font-size:12.5px; flex-wrap:wrap; gap:10px;}

@media (max-width: 980px){
  .hero-grid, .why-grid, .contact-grid{grid-template-columns:1fr;}
  .about-grid, .service-grid, .step-grid{grid-template-columns:repeat(2,1fr);}
  .test-grid{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .nav-links{display:none;}
  .burger{display:flex;}
}
@media (max-width:600px){
  .about-grid, .service-grid, .step-grid{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}
/* =========================================================
   RAKSA TRAVEL — FINAL DARK / LIGHT MODE
   ========================================================= */

/* =========================================================
   LIGHT MODE DEFAULT
   ========================================================= */

:root {
    --navy: #0B2942;
    --navy-deep: #071B2C;
    --teal: #0E7C7B;

    --sand: #F6F1E4;
    --sand-dark: #EDE4CE;

    --amber: #E8A33D;
    --coral: #E8664A;

    --ink: #10202C;
    --paper: #FFFDF9;

    --line: rgba(11, 41, 66, 0.14);

    --shadow:
        0 20px 50px -20px rgba(7, 27, 44, 0.35);
}


/* =========================================================
   DARK MODE
   ========================================================= */

html.dark-mode {

    /* Background utama */
    --sand: #0A1118;

    /* Background card / section */
    --paper: #121B24;

    /* Background secondary */
    --sand-dark: #1B2731;

    /* Heading */
    --navy-deep: #F4F8FB;

    /* Text */
    --ink: #E8EEF2;

    /* Warna navy biasa */
    --navy: #173A55;

    /* Border */
    --line: rgba(255, 255, 255, 0.12);

    /* Shadow */
    --shadow:
        0 20px 50px -20px rgba(0, 0, 0, 0.55);
}


/* =========================================================
   BODY
   ========================================================= */

html.dark-mode body {
    background: var(--sand) !important;
    color: var(--ink) !important;
}


/* =========================================================
   HEADING
   ========================================================= */

html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4 {
    color: var(--navy-deep) !important;
}


/* =========================================================
   HEADER
   ========================================================= */

html.dark-mode header {
    background: rgba(10, 17, 24, 0.94) !important;
    border-bottom-color: var(--line) !important;
}


/* Logo */
html.dark-mode .logo {
    color: #FFFFFF !important;
}


/* Navigation */
html.dark-mode .nav-links a {
    color: #D7E0E7 !important;
}

html.dark-mode .nav-links a:hover {
    color: var(--teal) !important;
}


/* Burger */
html.dark-mode .burger span {
    background: #FFFFFF !important;
}


/* =========================================================
   HERO
   ========================================================= */

html.dark-mode .hero-desc {
    color: #C2CED7 !important;
}

html.dark-mode .hero-tagline {
    color: #2CB8B5 !important;
}

html.dark-mode .mini-badge {
    background: var(--paper) !important;
    color: #EDF4F8 !important;
    border-color: var(--line) !important;
}


/* Hero card */
html.dark-mode .hero-card {
    background: var(--paper) !important;
    color: var(--ink) !important;
    border-color: var(--line) !important;
    box-shadow: var(--shadow) !important;
}

html.dark-mode .agent-title {
    color: #B7C5CF !important;
}

html.dark-mode .agent-stats {
    border-top-color: var(--line) !important;
}

html.dark-mode .agent-stats b {
    color: #FFFFFF !important;
}

html.dark-mode .agent-stats span {
    color: #91A1AD !important;
}


/* =========================================================
   BUTTON
   ========================================================= */

html.dark-mode .btn-ghost-dark {
    color: #FFFFFF !important;
    border-color: rgba(255,255,255,0.2) !important;
}

html.dark-mode .btn-ghost-dark:hover {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.45) !important;
}


/* =========================================================
   SECTION HEAD
   ========================================================= */

html.dark-mode .section-head p {
    color: #B9C6CF !important;
}


/* =========================================================
   ABOUT CARD
   ========================================================= */

html.dark-mode .about-card {
    background: var(--paper) !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
}

html.dark-mode .about-card p {
    color: #BBC8D1 !important;
}


/* =========================================================
   SERVICE CARD
   ========================================================= */

html.dark-mode .service-card {
    background: var(--paper) !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
}

html.dark-mode .service-card h4 {
    color: #FFFFFF !important;
}

html.dark-mode .service-card p {
    color: #BCC8D1 !important;
}


/* icon service */
html.dark-mode .service-icon {
    background: var(--sand-dark) !important;
}


/* =========================================================
   WHY SECTION
   ========================================================= */

html.dark-mode .check-list li {
    color: #C3CED6 !important;
}

html.dark-mode .check-list li b {
    color: #FFFFFF !important;
}


/* =========================================================
   STEP CARD
   ========================================================= */

html.dark-mode .step-card {
    background: var(--paper) !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
}

html.dark-mode .step-card h4 {
    color: #FFFFFF !important;
}

html.dark-mode .step-card p {
    color: #BDC9D2 !important;
}

html.dark-mode .step-no {
    color: rgba(255,255,255,0.08) !important;
}


/* =========================================================
   TESTIMONI
   ========================================================= */

html.dark-mode .test-card {
    background: var(--paper) !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
}

html.dark-mode .test-card p {
    color: #C0CCD5 !important;
}

html.dark-mode .test-name {
    color: #FFFFFF !important;
}

html.dark-mode .test-role {
    color: #8FA0AC !important;
}


/* =========================================================
   PARTNER STRIP
   ========================================================= */

html.dark-mode .partner-strip {
    background: #050A0E !important;
}

html.dark-mode .partner-label {
    color: rgba(255,255,255,0.55) !important;
}

html.dark-mode .partner-chip {
    color: rgba(255,255,255,0.75) !important;
    border-color: rgba(255,255,255,0.18) !important;
}


/* =========================================================
   CONTACT
   ========================================================= */

html.dark-mode .contact-info {
    background: var(--paper) !important;
    border-color: var(--line) !important;
}

html.dark-mode .contact-row {
    border-bottom-color: var(--line) !important;
}

html.dark-mode .contact-ico {
    background: var(--sand-dark) !important;
}

html.dark-mode .contact-row div span {
    color: #8FA0AC !important;
}

html.dark-mode .contact-row div b {
    color: #FFFFFF !important;
}

html.dark-mode .edit-note {
    color: #8FA0AC !important;
}

html.dark-mode .edit-note code {
    background: var(--sand-dark) !important;
    color: #DCE7ED !important;
}


/* =========================================================
   FORM
   ========================================================= */

html.dark-mode .contact-form {
    background: var(--paper) !important;
    border-color: var(--line) !important;
}

html.dark-mode .contact-form h4 {
    color: #FFFFFF !important;
}

html.dark-mode .form-row label {
    color: #35C3C0 !important;
}

html.dark-mode .form-row input,
html.dark-mode .form-row textarea {
    background: #0E161E !important;
    color: #F4F8FB !important;
    border-color: var(--line) !important;
}

html.dark-mode .form-row input::placeholder,
html.dark-mode .form-row textarea::placeholder {
    color: #71818D !important;
}

html.dark-mode .form-row input:focus,
html.dark-mode .form-row textarea:focus {
    background: #101A23 !important;
    color: #FFFFFF !important;
    border-color: var(--teal) !important;
}


/* =========================================================
   FOOTER
   ========================================================= */

html.dark-mode footer {
    background: #050A0E !important;
}

html.dark-mode .foot-grid h5 {
    color: #FFFFFF !important;
}

html.dark-mode .foot-grid a {
    color: #B9C6CF !important;
}

html.dark-mode .foot-grid p {
    color: #8798A5 !important;
}

html.dark-mode .foot-bottom {
    color: #778894 !important;
    border-top-color: rgba(255,255,255,0.08) !important;
}


/* =========================================================
   MOBILE MENU
   ========================================================= */

html.dark-mode .nav-links {
    background: #121B24 !important;
}

html.dark-mode .nav-links a {
    color: #E5EDF2 !important;
}


/* =========================================================
   THEME BUTTON
   ========================================================= */

.theme-toggle {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--paper);

    color: var(--ink);

    border: 1px solid var(--line);

    font-size: 18px;

    cursor: pointer;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease;
}

.theme-toggle:hover {
    transform: scale(1.08);
}


/* =========================================================
   INLINE BACKGROUND FIX
   Ini penting karena HTML kamu memakai:
   background:var(--paper)
   ========================================================= */

html.dark-mode section[style*="background:var(--paper)"] {
    background: var(--paper) !important;
}


/* =========================================================
   SMOOTH TRANSITION
   ========================================================= */

body,
header,
section,
.hero-card,
.about-card,
.service-card,
.step-card,
.test-card,
.contact-info,
.contact-form,
.mini-badge,
.service-icon,
.contact-ico,
.form-row input,
.form-row textarea {
    transition:
        background-color .3s ease,
        color .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}