/*
Theme Name: RasaNusa
Theme URI: https://it.khairys.web.id
Author: Khairys IT
Author URI: https://it.khairys.web.id
Description: Theme custom demo buatan Khairys IT. Tampilan gelap teal elegan dengan animasi halus, ikon SVG, hero, kartu layanan, dan halaman blog. Dibangun dari nol pakai PHP, CSS, dan JS standar WordPress.
Version: 1.3.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: khairys-demo
*/

@font-face{font-family:"Poppins";src:url("assets/fonts/Poppins-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Poppins";src:url("assets/fonts/Poppins-SemiBold.ttf") format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Poppins";src:url("assets/fonts/Poppins-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Montserrat";src:url("assets/fonts/Montserrat-ExtraBold.ttf") format("truetype");font-weight:800;font-display:swap}

:root{
  --bg:#17100a;
  --deep:#100a05;
  --surface:#26180d;
  --soft:#14334d;
  --ink:#f7ecdc;
  --ink-soft:#d9c3a3;
  --teal:#f0a848;
  --bright:#ffd9a0;
  --gold:#e9c766;
  --radius:20px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Poppins","Segoe UI",system-ui,Arial,sans-serif;line-height:1.65;overflow-x:hidden}
a{color:var(--bright);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1100px;margin:0 auto;padding:0 22px}

/* Header */
.site-header{position:sticky;top:0;background:rgba(6,18,32,.85);backdrop-filter:blur(12px);border-bottom:1px solid rgba(240,168,72,.14);z-index:50}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:15px;padding-bottom:15px}
.brand{font-family:"Montserrat",sans-serif;font-weight:800;font-size:23px;color:var(--ink);letter-spacing:.5px}
.brand span{color:var(--teal)}
.main-nav ul{display:flex;gap:24px;list-style:none;margin:0;padding:0}
.main-nav a{color:var(--ink-soft);font-weight:600;font-size:15px;position:relative;padding-bottom:3px}
.main-nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--teal);transition:width .35s ease}
.main-nav a:hover{color:var(--bright);text-decoration:none}
.main-nav a:hover::after{width:100%}

/* Hero dengan aurora bergerak */
.hero{position:relative;padding:110px 0 95px;text-align:center;overflow:hidden;background:var(--deep)}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;pointer-events:none}
.hero::before{width:520px;height:520px;background:#92400e;top:-180px;left:-120px;animation:aurora1 14s ease-in-out infinite alternate}
.hero::after{width:460px;height:460px;background:#5f2c0e;bottom:-200px;right:-100px;animation:aurora2 18s ease-in-out infinite alternate}
@keyframes aurora1{from{transform:translate(0,0) scale(1)}to{transform:translate(120px,60px) scale(1.15)}}
@keyframes aurora2{from{transform:translate(0,0) scale(1.1)}to{transform:translate(-100px,-50px) scale(.95)}}
.hero .wrap{position:relative;z-index:2}
.hero .badge{display:inline-block;background:rgba(240,168,72,.1);border:1px solid rgba(240,168,72,.35);color:var(--bright);padding:7px 18px;border-radius:999px;font-size:13px;font-weight:700;letter-spacing:2.5px;animation:fadeDown .8s ease both}
.hero h1{font-family:"Montserrat",sans-serif;font-size:52px;line-height:1.13;margin:26px 0 18px;animation:fadeUp .9s ease .1s both;background:linear-gradient(90deg,#fff 20%,var(--bright) 50%,#fff 80%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:fadeUp .9s ease .1s both,shineText 6s linear infinite}
@keyframes shineText{to{background-position:200% center}}
.hero p{color:var(--ink-soft);font-size:19px;max-width:660px;margin:0 auto 34px;animation:fadeUp .9s ease .22s both}
.hero .stats{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:44px;animation:fadeUp .9s ease .4s both}
.hero .stat{border:1px solid rgba(240,168,72,.22);background:rgba(38,24,13,.6);border-radius:14px;padding:12px 22px;font-size:14px;color:var(--ink-soft)}
.hero .stat strong{display:block;font-size:19px;color:var(--ink);font-family:"Montserrat",sans-serif}
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeDown{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:translateY(0)}}

/* Tombol dengan efek kilau */
.btn{position:relative;display:inline-block;background:linear-gradient(135deg,#c05a2e,#e08a4c);color:#fff;padding:15px 34px;border-radius:14px;font-weight:700;font-size:17px;overflow:hidden;box-shadow:0 12px 30px rgba(224,138,76,.28);transition:transform .3s ease,box-shadow .3s ease;animation:fadeUp .9s ease .3s both}
.btn:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(224,138,76,.38);text-decoration:none}
.btn::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:shineBtn 3.2s ease infinite}
@keyframes shineBtn{0%,55%{left:-80%}100%{left:160%}}

/* Bagian umum */
.section{padding:76px 0;position:relative}
.section h2{font-family:"Montserrat",sans-serif;text-align:center;font-size:35px;margin:0 0 10px}
.section .sub{text-align:center;color:var(--ink-soft);margin:0 auto 40px;max-width:580px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:20px}
.card{background:linear-gradient(165deg,var(--surface),#1d1207);border:1px solid rgba(240,168,72,.14);border-radius:var(--radius);padding:30px 26px;transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease}
.card:hover{transform:translateY(-8px);border-color:rgba(240,168,72,.5);box-shadow:0 22px 44px rgba(0,0,0,.35)}
.card .ico{width:56px;height:56px;border-radius:16px;background:rgba(240,168,72,.1);border:1px solid rgba(240,168,72,.3);display:flex;align-items:center;justify-content:center}
.card .ico svg{width:27px;height:27px;stroke:var(--bright);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card h3{margin:16px 0 7px;font-size:20px;font-weight:600}
.card p{color:var(--ink-soft);margin:0;font-size:15px}
.order-box{background:linear-gradient(170deg,var(--surface),#1d1207);border:1px solid rgba(240,168,72,.2);border-radius:24px;padding:36px;max-width:660px;margin:0 auto;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.post-list{display:grid;gap:18px;max-width:780px;margin:0 auto}
.post-item{background:var(--surface);border:1px solid rgba(240,168,72,.12);border-radius:var(--radius);padding:26px;transition:transform .3s ease,border-color .3s ease}
.post-item:hover{transform:translateX(6px);border-color:rgba(240,168,72,.45)}
.post-item h3{margin:0 0 6px}
.post-item p{color:var(--ink-soft);margin:0}
.content{max-width:780px;margin:0 auto;padding:52px 22px}
.content h1{font-family:"Montserrat",sans-serif;line-height:1.25}
.meta{color:var(--ink-soft);font-size:14px}
.site-footer{background:var(--deep);border-top:1px solid rgba(240,168,72,.14);padding:38px 0;text-align:center;color:var(--ink-soft);font-size:15px}

/* Animasi muncul saat scroll */
.rv{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:translateY(0)}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}.rv-d4{transition-delay:.32s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;transition-duration:.001s !important}
  .rv{opacity:1;transform:none}
}
@media (max-width:640px){
  .hero{padding:76px 0 70px}
  .hero h1{font-size:34px}
  .section h2{font-size:27px}
  .main-nav ul{gap:15px}
  .order-box{padding:26px 20px}
}

/* Bagian tambahan v1.2: produk, langkah, testimoni, FAQ, CTA, halaman dalam */
.section.alt{background:rgba(38,24,13,.45)}
.wrap.narrow{max-width:820px}
.products{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.product{background:linear-gradient(165deg,var(--surface),#1d1207);border:1px solid rgba(240,168,72,.14);border-radius:var(--radius);padding:22px;transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease}
.product:hover{transform:translateY(-8px);border-color:rgba(240,168,72,.5);box-shadow:0 22px 44px rgba(0,0,0,.35)}
.p-visual{height:130px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.p-visual svg{width:54px;height:54px;stroke:#fff;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.92}
.p-visual.v1{background:linear-gradient(135deg,#5f2c0e,#c05a2e)}
.p-visual.v2{background:linear-gradient(135deg,#7c2d12,#c2410c)}
.p-visual.v3{background:linear-gradient(135deg,#713f12,#ca8a04)}
.product h3{margin:0 0 6px;font-size:19px}
.product p{color:var(--ink-soft);font-size:14.5px;margin:0 0 16px;min-height:66px}
.p-row{display:flex;align-items:center;justify-content:space-between}
.price{font-family:"Montserrat",sans-serif;font-size:19px;color:var(--bright)}
.pesan-btn{background:rgba(240,168,72,.12);border:1px solid rgba(240,168,72,.45);color:var(--bright);padding:9px 20px;border-radius:11px;font-weight:700;font-size:14.5px;cursor:pointer;font-family:inherit;transition:background .25s ease,transform .25s ease}
.pesan-btn:hover{background:rgba(240,168,72,.25);transform:translateY(-2px)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:20px}
.step{text-align:center;padding:28px 20px;background:rgba(38,24,13,.6);border:1px solid rgba(240,168,72,.12);border-radius:var(--radius)}
.step .num{display:inline-flex;width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#c05a2e,#e08a4c);color:#fff;font-family:"Montserrat",sans-serif;font-size:21px;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(224,138,76,.3)}
.step h3{margin:14px 0 6px;font-size:18px}
.step p{color:var(--ink-soft);font-size:14.5px;margin:0}
.slider{max-width:760px;margin:0 auto;text-align:center;background:linear-gradient(165deg,var(--surface),#1d1207);border:1px solid rgba(240,168,72,.16);border-radius:24px;padding:40px 36px;position:relative;min-height:250px}
.slide{display:none;animation:fadeUp .6s ease both}
.slide.active{display:block}
.avatar{width:62px;height:62px;border-radius:50%;margin:0 auto 16px;background:linear-gradient(135deg,#c05a2e,#f0a848);display:flex;align-items:center;justify-content:center;font-family:"Montserrat",sans-serif;font-size:20px;color:#fff}
.quote{font-size:18.5px;line-height:1.65;margin:0 0 14px}
.who{color:var(--ink-soft);font-size:14.5px;margin:0}
.dots{margin-top:22px;display:flex;gap:9px;justify-content:center}
.dot{width:11px;height:11px;border-radius:50%;border:0;background:rgba(169,195,207,.35);cursor:pointer;padding:0;transition:background .3s ease,transform .3s ease}
.dot.active{background:var(--teal);transform:scale(1.25)}
.faq{display:grid;gap:12px}
.faq-item{background:var(--surface);border:1px solid rgba(240,168,72,.14);border-radius:16px;overflow:hidden}
.faq-q{width:100%;background:none;border:0;color:var(--ink);font-family:inherit;font-size:16.5px;font-weight:600;text-align:left;padding:19px 22px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq-ico{color:var(--teal);font-size:24px;font-weight:400;transition:transform .35s ease;flex:none}
.faq-item.open .faq-ico{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s ease}
.faq-a p{color:var(--ink-soft);margin:0;padding:0 22px 19px;font-size:15.5px}
.cta-banner{position:relative;text-align:center;border-radius:26px;padding:56px 30px;background:linear-gradient(120deg,#8a3b12,#5f2c0e 55%,#0d2438);overflow:hidden}
.cta-banner::before{content:"";position:absolute;width:380px;height:380px;border-radius:50%;background:rgba(240,168,72,.22);filter:blur(80px);top:-160px;right:-80px}
.cta-banner h2{color:#fff;margin:0 0 10px;position:relative}
.cta-banner p{color:#d7ecec;max-width:560px;margin:0 auto 26px;position:relative}
.btn-light{background:#fff;color:#8a3b12;box-shadow:0 12px 30px rgba(0,0,0,.3);animation:none;position:relative}
.btn-light:hover{color:#6d3410}
.wa-float{position:fixed;right:22px;bottom:22px;width:58px;height:58px;border-radius:50%;background:#22c55e;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 30px rgba(34,197,94,.45);z-index:90;transition:transform .3s ease}
.wa-float:hover{transform:scale(1.1);text-decoration:none}
.wa-float svg{width:29px;height:29px;fill:#fff}
.wa-float::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(34,197,94,.6);animation:waPulse 2.2s ease-out infinite}
@keyframes waPulse{from{transform:scale(1);opacity:1}to{transform:scale(1.55);opacity:0}}
.page-hero{position:relative;padding:64px 0 52px;text-align:center;background:var(--deep);overflow:hidden}
.page-hero::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:#92400e;filter:blur(100px);opacity:.4;top:-200px;left:8%}
.page-hero h1{font-family:"Montserrat",sans-serif;font-size:40px;margin:0;position:relative;animation:fadeUp .8s ease both}
.content article h2{font-family:"Montserrat",sans-serif;margin-top:34px}
.content article p,.content article li{color:#efdfc8}
.content article ul{padding-left:20px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin:26px 0}
.tile{border-radius:16px;padding:26px;color:#fff;min-height:150px;display:flex;flex-direction:column;justify-content:flex-end}
.tile h3{margin:0 0 4px;color:#fff}
.tile p{margin:0;font-size:14px;color:rgba(255,255,255,.85)}
.tile.t1{background:linear-gradient(140deg,#5f2c0e,#c05a2e)}
.tile.t2{background:linear-gradient(140deg,#1e3a5f,#2563eb)}
.tile.t3{background:linear-gradient(140deg,#4a044e,#a21caf)}
.tile.t4{background:linear-gradient(140deg,#713f12,#d97706)}
@media (max-width:760px){
  .main-nav ul{flex-wrap:wrap;justify-content:flex-end;row-gap:4px}
  .main-nav a{font-size:13.5px}
  .slider{padding:30px 22px}
  .page-hero h1{font-size:30px}
  .wa-float{width:52px;height:52px;right:16px;bottom:16px}
}

/* Foto asli */
.p-visual{overflow:hidden;padding:0}
.p-visual img{width:100%;height:100%;object-fit:cover;display:block}
.showcase{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.showcase figure{margin:0;border-radius:18px;overflow:hidden;position:relative;border:1px solid rgba(255,255,255,.1)}
.showcase img{width:100%;height:230px;object-fit:cover;display:block;transition:transform .6s ease}
.showcase figure:hover img{transform:scale(1.06)}
.showcase figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 12px;font-size:14px;font-weight:600;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.72))}
.ggrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin:24px 0}
.ggrid figure{margin:0;border-radius:16px;overflow:hidden;position:relative}
.ggrid img{width:100%;height:210px;object-fit:cover;display:block;transition:transform .6s ease}
.ggrid figure:hover img{transform:scale(1.06)}
.ggrid figcaption{position:absolute;left:0;right:0;bottom:0;padding:24px 14px 10px;font-size:13.5px;font-weight:600;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.72))}