/* HostingRakyat: lapisan gaya "Jalur Gemilang" (T-131, owner 30/10 18:37: rombak total, warna ikut bendera Malaysia).
   Dimuat SETELAH samudra.css, jadi isi & susunan halaman sama, tampilannya beda.
   Warna bendera: biru #010066, merah #CC0001, kuning #FFCC00, putih. Font: Bricolage Grotesque (judul) + Manrope (teks).
   Bahasa bentuk: sudut tegas (8-10px), tombol "stiker" dengan bayangan padat, pita jalur merah-putih sebagai penanda. */
:root{
  --blue:#CC0001;--blue-d:#A30001;--blue-soft:#FFF1F1;          /* warna aksi utama = merah bendera */
  --ink:#0A0F4D;--ink-2:#141A66;--text:#2A2E4A;--mute:#5F6380;
  --fog:#F7F5EF;--line:#E4E1D6;--r:10px;
  --rk-biru:#010066;--rk-biru-2:#0A1A8F;--rk-merah:#CC0001;--rk-kuning:#FFCC00;--rk-krim:#FFFBF0;
  --rk-jalur:repeating-linear-gradient(90deg,#CC0001 0 28px,#fff 28px 56px);
}
body{font-family:Manrope,system-ui,sans-serif;background:var(--rk-krim)}
h1,h2,h3,h4{font-family:'Bricolage Grotesque',system-ui,sans-serif;letter-spacing:-.025em;font-weight:700}
::selection{background:var(--rk-kuning);color:var(--rk-biru)}

/* tombol stiker */
.btn{border-radius:8px;font-weight:700;letter-spacing:.005em;transition:transform .15s,box-shadow .15s,background .15s}
.btn-blue{background:var(--rk-merah);color:#fff;box-shadow:0 4px 0 #7A0001}
.btn-blue:hover{background:var(--blue-d);transform:translateY(-2px);box-shadow:0 6px 0 #7A0001}
.btn-blue:active{transform:translateY(2px);box-shadow:0 1px 0 #7A0001}
.btn-white{background:var(--rk-kuning);color:var(--rk-biru);box-shadow:0 4px 0 #B38F00}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 6px 0 #B38F00}
.btn-line{border:2px solid var(--rk-biru);color:var(--rk-biru);background:#fff}
.btn-line:hover{background:var(--rk-biru);color:#fff}
.btn-ghost{border:2px solid rgba(255,255,255,.55);color:#fff}
.btn-ghost:hover{background:#fff;color:var(--rk-biru)}
a:focus-visible,button:focus-visible,.btn:focus-visible{outline:3px solid var(--rk-kuning);outline-offset:2px}

/* header: putih bersih + pita jalur di bawah */
.hd{background:rgba(255,251,240,.94);border-bottom:0}
.hd::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:4px;background:var(--rk-jalur);opacity:.95}
.hd-nav{font-weight:600}
.hd-dash,.hd .btn-blue{border-radius:8px}

/* promo atas */
.promo{background:var(--rk-biru)!important}
.promo a{color:var(--rk-kuning)!important}

/* hero beranda & hero halaman: gradasi biru bendera + sorot merah & kuning + jalur miring samar */
.hero,.phero{background:radial-gradient(60% 70% at 85% 20%,rgba(204,0,1,.42),transparent 65%),radial-gradient(40% 50% at 95% 95%,rgba(255,204,0,.22),transparent 70%),radial-gradient(70% 80% at 10% 100%,rgba(10,26,143,.9),transparent 70%),linear-gradient(160deg,#010066 0%,#06126F 55%,#020748 100%)!important}
.hero::before,.phero::before{background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.045) 0 22px,transparent 22px 44px)!important;-webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 100%)!important;mask-image:linear-gradient(90deg,transparent 30%,#000 100%)!important;background-size:auto!important}
.hero::after,.phero::after{display:none!important}
.hero-pulse{display:none!important}
.hr-grad{background:radial-gradient(45% 55% at 70% 35%,rgba(204,0,1,.55),transparent 70%),radial-gradient(35% 45% at 85% 80%,rgba(255,204,0,.35),transparent 70%),linear-gradient(140deg,#010066 0%,#0A1A8F 60%,#010066 100%)!important;background-size:170% 170%!important}
.hero h1 span,.phero h1 span{color:var(--rk-kuning)!important;background:none}
.hero-kicker{display:inline-flex;align-items:center;gap:10px;color:#fff!important;font-weight:600}
.hero-kicker::before{content:"";width:22px;height:12px;border-radius:2px;background:linear-gradient(180deg,#CC0001 0 50%,#fff 50% 100%)}
.hero .hero-lead b,.phero .hero-lead b{color:var(--rk-kuning)}
.crumb a{color:var(--rk-kuning)!important}

/* section & judul: garis kuning pendek di atas judul seksi */
.sec h2,.prices h2,.banding h2{position:relative}
.split h2::before,.sec>.wrap>h2::before{content:"";display:block;width:56px;height:6px;margin-bottom:16px;border-radius:2px;background:linear-gradient(90deg,var(--rk-merah) 0 50%,var(--rk-kuning) 50% 100%)}

/* kartu paket */
.plan{border-radius:12px!important;border:2px solid var(--line)!important;background:#fff!important;box-shadow:none!important;transition:transform .2s,border-color .2s,box-shadow .2s}
.plan:hover{transform:translateY(-4px);border-color:var(--rk-biru)!important;box-shadow:8px 8px 0 var(--rk-biru)!important}
.plan-pilihan,.plan.plan-pilihan{border-color:var(--rk-merah)!important;box-shadow:8px 8px 0 var(--rk-merah)!important}
.plan-pita{background:var(--rk-biru)!important;color:#fff!important;border-radius:6px!important}
.plan-pilihan .plan-pita{background:var(--rk-merah)!important}
.plan .tag,.tag{background:var(--rk-kuning)!important;color:var(--rk-biru)!important;border-radius:6px!important;font-weight:700}
.plan-now strong{color:var(--rk-biru)!important}
.plan-was{color:#9A3B3B!important}
.plan-feat .ic{color:var(--rk-merah)}

/* kartu umum */
.tile,.use-card,.mini-card,.help-card,.svc,.spx-k,.mega-card,.faq-list details,.faq-side,.reg-grup,.why-grid>*,.untung>*{border-radius:12px!important}
.tile,.use-card,.help-card,.svc{border:2px solid var(--line)!important;box-shadow:none!important}
.tile:hover,.use-card:hover,.help-card:hover,.svc:hover{border-color:var(--rk-biru)!important;box-shadow:6px 6px 0 var(--rk-kuning)!important}
.mega-ic,.plan-ic,.sdak-ik{background:#FFF4CC!important;color:var(--rk-biru)!important;border-radius:8px!important}
.faq-list details[open]::before{background:var(--rk-merah)!important}
.faq-no{border-radius:6px!important}
.chip,.pchips span{border-radius:6px!important}

/* tab cari domain + kotak domain */
.tabs{border-radius:10px!important;border-color:rgba(255,255,255,.3)!important}
.tabs label{border-radius:7px!important}
.tabset input:checked+label,#t-dom:checked~.tabs label[for=t-dom],#t-move:checked~.tabs label[for=t-move]{background:var(--rk-kuning)!important;color:var(--rk-biru)!important}
.pane{border-radius:12px!important;border-top:5px solid var(--rk-merah)}
.dom-kotak{border-radius:10px!important}
.dom-tld button{border-radius:6px!important}

/* promo geser */
.pg{border-radius:8px!important}
.pg b{background:var(--rk-kuning)!important;color:var(--rk-biru)!important;border-radius:5px!important}

/* footer: biru bendera + pita jalur di atas */
.ft{background:var(--rk-biru)!important;color:#C9CCEE;position:relative}
.ft::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--rk-jalur)}
.ft h4{color:var(--rk-kuning)!important;font-family:'Bricolage Grotesque',system-ui,sans-serif}
.ft a:hover{color:#fff}

/* bagian gelap lain (band, CTA) */
.cta,.kapten-band,.wpband,.band{background:linear-gradient(135deg,#010066,#0A1A8F)!important}
.soon{border-radius:12px!important}

@media (max-width:760px){
  .plan:hover{box-shadow:none!important;transform:none}
  .plan-pilihan{box-shadow:5px 5px 0 var(--rk-merah)!important}
}
@media (prefers-reduced-motion:reduce){.btn,.plan,.tile{transition:none}}
@media (max-width:760px){.hero-kicker{display:block;text-align:center}.hero-kicker::before{display:inline-block;vertical-align:-1px;margin-right:8px}}
/* kartu paket versi gelap (Turbo WordPress): tetap biru bendera, teks terang (owner 30/10 19:32: teks hilang di latar putih) */
.plan.gelap{background:linear-gradient(160deg,#010066,#0A1A8F)!important;border-color:#010066!important;color:#C9CCEE}
.plan.gelap h2,.plan.gelap .plan-now,.plan.gelap .plan-now strong,.plan.gelap .plan-feat,.plan.gelap .plan-feat li{color:#fff!important}
.plan.gelap .plan-desc,.plan.gelap .plan-now span,.plan.gelap .plan-renew,.plan.gelap .plan-was{color:#C9CCEE!important}
.plan.gelap .plan-feat .ic{color:var(--rk-kuning)}
.plan.gelap:hover{box-shadow:8px 8px 0 var(--rk-kuning)!important}