/*
Theme Name: Selaras
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: 2.0.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:#170a12;
  --deep:#10060d;
  --surface:#2a1220;
  --soft:#14334d;
  --ink:#f7ecdc;
  --ink-soft:#e5c2d2;
  --teal:#f2a2c0;
  --bright:#ffd3e4;
  --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(242,162,192,.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:#9d2460;top:-180px;left:-120px;animation:aurora1 14s ease-in-out infinite alternate}
.hero::after{width:460px;height:460px;background:#500f2b;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(242,162,192,.1);border:1px solid rgba(242,162,192,.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(242,162,192,.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,#b04a72,#d97ba6);color:#fff;padding:15px 34px;border-radius:14px;font-weight:700;font-size:17px;overflow:hidden;box-shadow:0 12px 30px rgba(217,123,166,.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(217,123,166,.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(242,162,192,.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(242,162,192,.5);box-shadow:0 22px 44px rgba(0,0,0,.35)}
.card .ico{width:56px;height:56px;border-radius:16px;background:rgba(242,162,192,.1);border:1px solid rgba(242,162,192,.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(242,162,192,.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(242,162,192,.12);border-radius:var(--radius);padding:26px;transition:transform .3s ease,border-color .3s ease}
.post-item:hover{transform:translateX(6px);border-color:rgba(242,162,192,.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(242,162,192,.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(242,162,192,.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(242,162,192,.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,#500f2b,#b04a72)}
.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(242,162,192,.12);border:1px solid rgba(242,162,192,.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(242,162,192,.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(242,162,192,.12);border-radius:var(--radius)}
.step .num{display:inline-flex;width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#b04a72,#d97ba6);color:#fff;font-family:"Montserrat",sans-serif;font-size:21px;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(217,123,166,.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(242,162,192,.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,#b04a72,#f2a2c0);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(242,162,192,.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,#831843,#500f2b 55%,#0d2438);overflow:hidden}
.cta-banner::before{content:"";position:absolute;width:380px;height:380px;border-radius:50%;background:rgba(242,162,192,.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:#831843;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:#9d2460;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,#500f2b,#b04a72)}
.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}
}

.countdown{display:flex;gap:10px;justify-content:center;margin-top:28px;flex-wrap:wrap}
.cd-box{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:14px;min-width:72px;padding:10px 8px;font-size:12.5px;color:var(--ink-soft)}
.cd-box strong{display:block;font-family:"Montserrat",sans-serif;font-size:24px;color:var(--ink)}

/* Foto asli: katalog, showcase beranda, galeri halaman */
.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))}

/* ===== VARIAN LAYOUT PER DEMO (anti template) ===== */
@font-face{font-family:"Playfair Display";src:url("assets/fonts/PlayfairDisplay.ttf") format("truetype");font-weight:400 900;font-display:swap}
@font-face{font-family:"Archivo";src:url("assets/fonts/Archivo.ttf") format("truetype");font-weight:100 900;font-display:swap}

/* Kerangka hero bersama */
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center;text-align:left}
.hero-grid .stats{justify-content:flex-start}
.hero-grid p{margin-left:0;margin-right:0}
.hero-pic img{width:100%;height:470px;object-fit:cover;border-radius:22px;display:block;box-shadow:0 34px 70px rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.14)}
.hero-foto{background-size:cover;background-position:center;padding:180px 0 170px}
.hero-foto::before{content:"";position:absolute;inset:0;width:auto;height:auto;border-radius:0;filter:none;opacity:1;animation:none;background:linear-gradient(180deg,rgba(5,5,8,.42),rgba(5,5,8,.78));top:0;left:0}
.hero-foto .stat{background:rgba(10,10,14,.55);backdrop-filter:blur(8px)}
.hero-wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:72px;fill:var(--bg);z-index:3;pointer-events:none}
@media(max-width:880px){.hero-grid{grid-template-columns:1fr;text-align:center}.hero-grid .stats{justify-content:center}.hero-pic img{height:300px}.hero-foto{padding:130px 0 120px}}

/* kedai: RasaNusa, serif hangat, titik rempah */
body.v-kedai h1,body.v-kedai .section h2,body.v-kedai .content article h2{font-family:"Playfair Display",serif;font-weight:700;letter-spacing:.2px}
body.v-kedai .section{background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.7px);background-size:22px 22px}
body.v-kedai .card,body.v-kedai .product{border-radius:22px}
body.v-kedai .hero-pic img{border-radius:120px 22px 22px 22px}

/* foto: DapurRempah, hero foto penuh */
body.v-foto .product{border-radius:14px}
body.v-foto .p-visual{height:190px}
body.v-foto .badge{backdrop-filter:blur(6px)}

/* anggun: Selaras, serif lembut romantis */
body.v-anggun h1,body.v-anggun .section h2,body.v-anggun .content article h2{font-family:"Playfair Display",serif;font-weight:600}
body.v-anggun .hero p{font-style:italic}
body.v-anggun .badge{letter-spacing:4.5px}
body.v-anggun .hero{background-image:radial-gradient(ellipse 340px 130px at 12% 18%,rgba(255,255,255,.06),transparent),radial-gradient(ellipse 340px 130px at 88% 78%,rgba(255,255,255,.05),transparent)}
body.v-anggun .card,body.v-anggun .product,body.v-anggun .stat{border-radius:26px}
body.v-anggun .btn{border-radius:999px}

/* klinik: SehatKita, bersih tegas */
body.v-klinik .card,body.v-klinik .product,body.v-klinik .stat,body.v-klinik .cd-box{border-radius:10px}
body.v-klinik .hero{background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:46px 46px}
body.v-klinik .hero-pic img{border-radius:14px;height:430px}
body.v-klinik .p-visual{height:170px}

/* arsitek: GriyaNusa, grid denah, rata kiri */
body.v-arsitek .hero{text-align:left}
body.v-arsitek .hero p{margin-left:0}
body.v-arsitek .hero .stats{justify-content:flex-start}
body.v-arsitek .hero{background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:38px 38px}
body.v-arsitek .section h2{text-align:left}
body.v-arsitek .section .sub{margin-left:0;text-align:left}
body.v-arsitek .product{border-radius:6px;border-left:4px solid var(--teal)}
body.v-arsitek .card{border-radius:6px}
body.v-arsitek .p-visual{height:180px}

/* teknis: PrimaJasa, Archivo tebal, garis diagonal */
body.v-teknis h1,body.v-teknis .section h2{font-family:"Archivo",sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.6px}
body.v-teknis .section.alt{background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 12px,transparent 12px 26px)}
body.v-teknis .card,body.v-teknis .product{border-radius:8px}
body.v-teknis .btn{border-radius:8px}

/* ceria: RuangCerdas, bulat ramah */
body.v-ceria .card,body.v-ceria .product,body.v-ceria .stat{border-radius:28px}
body.v-ceria .btn{border-radius:999px}
body.v-ceria .hero{background-image:radial-gradient(rgba(255,255,255,.07) 2.2px,transparent 3px);background-size:30px 30px}
body.v-ceria .section h2{font-family:"Poppins",sans-serif;font-weight:700}
body.v-ceria .p-visual{height:170px;border-radius:20px}

/* barber: RapiBarber, tajam maskulin */
body.v-barber h1,body.v-barber .section h2{font-family:"Archivo",sans-serif;font-weight:850;text-transform:uppercase;letter-spacing:1.2px}
body.v-barber .card,body.v-barber .product,body.v-barber .stat{border-radius:4px}
body.v-barber .btn{border-radius:4px}
body.v-barber .hero::after{content:"";position:absolute;left:0;right:0;bottom:0;top:auto;width:auto;height:12px;border-radius:0;filter:none;opacity:.9;animation:none;background:repeating-linear-gradient(45deg,var(--teal) 0 18px,transparent 18px 36px,rgba(255,255,255,.85) 36px 44px,transparent 44px 62px)}
body.v-barber .p-visual{height:180px;border-radius:4px}

/* ombak: JelajahNusa, hero foto plus gelombang */
body.v-ombak .card,body.v-ombak .product{border-radius:20px}
body.v-ombak .p-visual{height:190px}

/* senja: TerasSenja, matahari sore dan serif */
body.v-senja h1,body.v-senja .section h2,body.v-senja .content article h2{font-family:"Playfair Display",serif;font-weight:700}
body.v-senja .hero-foto::after{content:"";position:absolute;width:330px;height:330px;border-radius:50%;filter:none;opacity:.9;animation:none;top:4%;right:5%;left:auto;bottom:auto;background:radial-gradient(circle,#ffe3b0 0%,#f5b95e 52%,rgba(245,185,94,0) 72%);z-index:1}
body.v-senja .card,body.v-senja .product{border-radius:18px}
body.v-senja .p-visual{height:180px}

/* studio: KaryaDimas, galeri masonry */
body.v-studio .hero-pic{order:-1}
body.v-studio .hero-pic img{border-radius:10px;height:430px}
body.v-studio .products{display:block;columns:2;column-gap:20px}
body.v-studio .product{break-inside:avoid;margin-bottom:20px;border-radius:10px}
body.v-studio .p-visual{height:230px}
body.v-studio .section h2{text-align:left}
body.v-studio .section .sub{margin-left:0;text-align:left}
@media(max-width:700px){body.v-studio .products{columns:1}}

/* majalah: WartaKita, koran klasik */
body.v-majalah h1,body.v-majalah .section h2,body.v-majalah .content article h2{font-family:"Playfair Display",serif;font-weight:800}
body.v-majalah .hero{text-align:left}
body.v-majalah .hero p{margin-left:0}
body.v-majalah .hero .stats{justify-content:flex-start}
body.v-majalah .badge{border-radius:0;letter-spacing:4px}
body.v-majalah .products{display:flex;flex-direction:column;gap:0}
body.v-majalah .product{display:grid;grid-template-columns:210px 1fr;gap:22px;align-items:stretch;border-radius:0;border:none;border-top:1px solid rgba(255,255,255,.16);background:transparent;padding:22px 0;box-shadow:none}
body.v-majalah .product .p-visual{grid-row:span 3;height:auto;min-height:150px;margin-bottom:0;border-radius:4px}
body.v-majalah .product .p-row{align-self:end}
@media(max-width:700px){body.v-majalah .product{grid-template-columns:1fr}body.v-majalah .product .p-visual{min-height:170px}}

/* produk: HydraKu, fokus jualan */
body.v-produk .hero-pic img{height:520px;border-radius:26px}
body.v-produk .price{font-size:27px}
body.v-produk .product .btn{width:100%}
body.v-produk .product{border-radius:20px}
body.v-produk .badge{font-size:14px;padding:9px 22px}