/* Xeniel Premium Frontend UI/UX Layer
   Safe self-hosted CSS: no external fonts/assets, CSP-friendly. */
:root {
  --surface: rgba(255, 255, 255, .78);
  --surface-strong: rgba(255, 255, 255, .94);
  --ink: #0f172a;
  --muted: #64748b;
  --ring: rgba(15, 118, 110, .18);
  --primary-rgb: 15 118 110;
  --accent-rgb: 198 106 50;
  --shadow-soft: 0 24px 80px rgba(15, 23, 42, .10);
  --shadow-glow: 0 30px 90px rgba(15, 118, 110, .25);
}

html { scroll-behavior: smooth; }
body {
  overflow-x: hidden;
  background:
    radial-gradient(circle at 15% 5%, color-mix(in srgb, var(--primary) 18%, transparent) 0, transparent 32rem),
    radial-gradient(circle at 90% 12%, color-mix(in srgb, var(--accent) 18%, transparent) 0, transparent 28rem),
    linear-gradient(180deg, #f8fafc 0%, #ffffff 48%, #f8fafc 100%);
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  opacity: .32;
  background-image: linear-gradient(rgba(15,23,42,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.055) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(to bottom, #000, transparent 75%);
}

.xeniel-progress {
  position: fixed; top: 0; left: 0; width: 0; height: 3px; z-index: 90;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  box-shadow: 0 0 24px color-mix(in srgb, var(--primary) 55%, transparent);
  transition: width .12s linear;
}

.site-shell-header {
  border-bottom: 1px solid rgba(226, 232, 240, .68) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.65) inset, 0 18px 55px rgba(15,23,42,.06) !important;
}
.site-shell-header.is-scrolled {
  background: rgba(255,255,255,.88) !important;
  box-shadow: 0 18px 70px rgba(15,23,42,.11) !important;
}
.site-logo-mark {
  position: relative; isolation: isolate;
  background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--accent) 65%, var(--primary))) !important;
}
.site-logo-mark::after {
  content: ''; position: absolute; inset: -7px; border-radius: 1.15rem; z-index: -1;
  background: radial-gradient(circle, color-mix(in srgb, var(--primary) 34%, transparent), transparent 68%);
  opacity: .7; filter: blur(8px);
}

.nav-pill {
  position: relative;
}
.nav-pill::before {
  content: ''; position: absolute; inset: 3px; border-radius: 999px; z-index: -1;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 14%, transparent), color-mix(in srgb, var(--accent) 12%, transparent));
  opacity: 0; transform: scale(.84); transition: .24s ease;
}
.nav-pill:hover::before { opacity: 1; transform: scale(1); }

.premium-section { position: relative; overflow: hidden; }
.premium-section::before {
  content: ''; position: absolute; inset: auto -10% -45% -10%; height: 28rem; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--primary) 9%, transparent), transparent 66%);
}
.reveal-up { opacity: 0; transform: translateY(22px) scale(.985); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal-up.is-visible { opacity: 1; transform: translateY(0) scale(1); }

.hero-premium {
  min-height: clamp(650px, 88vh, 920px);
  background:
    radial-gradient(circle at 80% 18%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 30rem),
    radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--primary) 20%, transparent), transparent 35rem),
    linear-gradient(135deg, #ffffff 0%, #f8fafc 45%, #ecfeff 100%);
}
.hero-orb {
  position: absolute; border-radius: 999px; pointer-events: none; filter: blur(1px);
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 26%, transparent), color-mix(in srgb, var(--accent) 24%, transparent));
  animation: xeniel-float 8s ease-in-out infinite;
}
.hero-orb.one { width: 18rem; height: 18rem; right: 6%; top: 14%; opacity: .35; }
.hero-orb.two { width: 11rem; height: 11rem; left: 7%; bottom: 14%; opacity: .22; animation-delay: -2.5s; }
.hero-orb.three { width: 7rem; height: 7rem; right: 42%; bottom: 18%; opacity: .20; animation-delay: -5s; }
@keyframes xeniel-float { 0%,100%{ transform: translate3d(0,0,0) rotate(0deg);} 50%{ transform: translate3d(0,-22px,0) rotate(8deg);} }

.eyebrow-premium {
  display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .85rem;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, transparent);
  background: color-mix(in srgb, var(--primary) 9%, white);
  box-shadow: 0 12px 36px color-mix(in srgb, var(--primary) 10%, transparent);
}
.eyebrow-premium::before {
  content: ''; width: .55rem; height: .55rem; border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary) 12%, transparent);
}
.gradient-title {
  background: linear-gradient(110deg, #0f172a 0%, #111827 35%, var(--primary) 68%, color-mix(in srgb, var(--accent) 75%, var(--primary)) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.btn-premium {
  position: relative; overflow: hidden; isolation: isolate;
  box-shadow: 0 20px 55px color-mix(in srgb, var(--primary) 26%, transparent) !important;
}
.btn-premium::after {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.28) 45%, transparent 70%);
  transform: translateX(-110%); transition: opacity .25s ease, transform .7s ease;
}
.btn-premium:hover::after { opacity: 1; transform: translateX(110%); }
.btn-ghost-premium { backdrop-filter: blur(14px); background: rgba(255,255,255,.72) !important; }

.media-frame { position: relative; perspective: 1100px; }
.media-frame::before {
  content: ''; position: absolute; inset: -1rem; border-radius: 2.8rem;
  background: conic-gradient(from 180deg at 50% 50%, var(--primary), var(--accent), #60a5fa, var(--primary));
  filter: blur(22px); opacity: .24; transform: rotate(2deg);
}
.media-frame img { position: relative; transform: rotateY(-4deg) rotateX(2deg); transition: transform .55s ease, filter .55s ease; }
.media-frame:hover img { transform: rotateY(0deg) rotateX(0deg) translateY(-4px); filter: saturate(1.07) contrast(1.03); }
.floating-card {
  position: absolute; z-index: 5; display: none;
  background: rgba(255,255,255,.86); backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,.8);
  box-shadow: var(--shadow-soft); border-radius: 1.5rem; padding: 1rem;
}
@media (min-width: 1024px) { .floating-card { display: block; } }

.glass-card {
  background: rgba(255,255,255,.68) !important; backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.86) !important;
  box-shadow: 0 18px 60px rgba(15,23,42,.08);
}
.feature-card-premium { position: relative; overflow: hidden; transform: translateZ(0); }
.feature-card-premium::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), color-mix(in srgb, var(--primary) 20%, transparent), transparent 34%);
  transition: opacity .25s ease;
}
.feature-card-premium:hover::before { opacity: 1; }
.feature-icon-premium {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 13%, white), color-mix(in srgb, var(--accent) 12%, white)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 14px 34px rgba(15,23,42,.09);
}

.gallery-premium { grid-auto-flow: dense; }
.gallery-item-premium:nth-child(4n+1) { grid-row: span 2; }
.gallery-item-premium img { min-height: 250px; }
.gallery-item-premium:nth-child(4n+1) img { min-height: 520px; }

.testimonial-premium {
  position: relative; overflow: hidden; min-height: 260px;
  background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.06)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 24px 70px rgba(0,0,0,.12);
}
.testimonial-premium::after {
  content: ''; position: absolute; width: 11rem; height: 11rem; right: -4rem; top: -4rem; border-radius: 999px;
  background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%);
}

.faq-item-premium { transition: .25s ease; }
.faq-item-premium button { width: 100%; text-align: left; }
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s ease; }
.faq-answer > div { overflow: hidden; }
.faq-item-premium.is-open .faq-answer { grid-template-rows: 1fr; }
.faq-plus { transition: transform .28s ease; }
.faq-item-premium.is-open .faq-plus { transform: rotate(45deg); }

.article-card-premium { position: relative; overflow: hidden; }
.article-card-premium::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, transparent), transparent 42%);
  transition: opacity .25s ease;
}
.article-card-premium:hover::after { opacity: 1; }

.contact-premium input,
.contact-premium textarea,
.contact-premium select,
form input,
form textarea,
form select {
  border-radius: 1rem !important;
  border-color: rgba(203,213,225,.9) !important;
  transition: box-shadow .22s ease, border-color .22s ease, transform .22s ease;
}
.contact-premium input:focus,
.contact-premium textarea:focus,
.contact-premium select:focus,
form input:focus,
form textarea:focus,
form select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary) 13%, transparent) !important;
  transform: translateY(-1px);
}

.footer-premium {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #0f172a 0%, #020617 100%) !important;
  color: white;
}
.footer-premium::before {
  content: ''; position: absolute; inset: -45% -10% auto -10%; height: 26rem; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--primary) 35%, transparent), transparent 64%);
}

.back-to-top {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 70; width: 3rem; height: 3rem;
  display: grid; place-items: center; border-radius: 1rem; color: white;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: 0 18px 45px color-mix(in srgb, var(--primary) 30%, transparent);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.92); transition: .25s ease;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }

.cursor-glow {
  position: fixed; width: 18rem; height: 18rem; border-radius: 999px; pointer-events: none; z-index: -1;
  background: radial-gradient(circle, color-mix(in srgb, var(--primary) 14%, transparent), transparent 68%);
  transform: translate(-50%, -50%); opacity: 0; transition: opacity .25s ease;
}
@media (hover: hover) and (pointer: fine) { .cursor-glow.is-active { opacity: 1; } }

.article-body-premium { font-size: 1.075rem; line-height: 1.9; }
.article-body-premium h2, .article-body-premium h3 { scroll-margin-top: 7rem; }
.article-hero-premium { background: radial-gradient(circle at 30% 0%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 32rem), linear-gradient(180deg,#fff,#f8fafc); }

@media (max-width: 768px) {
  .hero-premium { min-height: auto; }
  .gallery-item-premium:nth-child(4n+1) { grid-row: auto; }
  .gallery-item-premium:nth-child(4n+1) img { min-height: 260px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
  .reveal-up { opacity: 1 !important; transform: none !important; }
}
body{font-family:var(--font-body)} h1,h2,h3,.font-black{font-family:var(--font-heading)} .rounded-3xl,.glass-card,.feature-card-premium{border-radius:var(--radius)}
.stats-premium-card{position:relative;overflow:hidden;background:white;border:1px solid rgba(15,23,42,.08);box-shadow:0 18px 55px rgba(15,23,42,.08)}
.pricing-card-premium{background:white;border:1px solid rgba(15,23,42,.08);box-shadow:0 18px 70px rgba(15,23,42,.09);transition:.3s}.pricing-card-premium:hover{transform:translateY(-8px)}
.timeline-dot{box-shadow:0 0 0 8px color-mix(in srgb,var(--primary) 12%,transparent)}
.logo-wall-item{background:rgba(255,255,255,.72);border:1px solid rgba(15,23,42,.08);backdrop-filter:blur(14px)}
.form-builder-field input,.form-builder-field textarea,.form-builder-field select{width:100%;border:1px solid #cbd5e1;border-radius:1rem;padding:.85rem 1rem;background:white}.form-builder-field label{font-weight:800;color:#0f172a}.form-builder-field{margin-bottom:1rem}

/* Template: Sekolah Modern - bright academic campus */
body.template-school{
  background:
    linear-gradient(90deg, rgba(7,89,133,.07) 1px, transparent 1px),
    linear-gradient(0deg, rgba(22,163,74,.06) 1px, transparent 1px),
    radial-gradient(circle at 10% 4%, rgba(14,165,233,.20), transparent 28rem),
    radial-gradient(circle at 92% 18%, rgba(34,197,94,.18), transparent 30rem),
    #f6fbff;
  background-size: 42px 42px, 42px 42px, auto, auto, auto;
}
.template-school .site-shell-header{background:rgba(255,255,255,.92)!important;border-bottom:1px solid rgba(7,89,133,.15)!important}
.template-school .hero-premium{
  background:
    linear-gradient(115deg, rgba(255,255,255,.94) 0 48%, rgba(219,234,254,.78) 48% 100%),
    radial-gradient(circle at 78% 20%, rgba(22,163,74,.20), transparent 28rem);
}
.template-school .hero-premium::after{
  content:'';position:absolute;right:-6rem;bottom:-10rem;width:34rem;height:34rem;border-radius:999px;
  background:repeating-radial-gradient(circle, rgba(7,89,133,.12) 0 2px, transparent 2px 16px);
}
.template-school .hero-orb{border-radius:38% 62% 54% 46%;filter:none;opacity:.16}
.template-school .gradient-title{background:linear-gradient(105deg,#082f49,#075985 48%,#16a34a 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.template-school .eyebrow-premium{border-radius:.8rem;background:#e0f2fe;color:#075985}
.template-school .feature-card-premium,.template-school .stats-premium-card,.template-school .pricing-card-premium{
  background:linear-gradient(180deg,#fff,#f8fbff)!important;border:1px solid rgba(7,89,133,.13)!important;
  box-shadow:0 18px 55px rgba(7,89,133,.10);
}
.template-school .timeline-dot{background:#16a34a!important}
.template-school .gallery-item-premium{border:8px solid #fff;box-shadow:0 22px 70px rgba(7,89,133,.16)}
.template-school .footer-premium{background:linear-gradient(135deg,#082f49,#064e3b)!important}

/* Template: Bimbel Konversi Tinggi - dark neon conversion landing */
body.template-bimbel{
  background:
    radial-gradient(circle at 15% 0%, rgba(250,204,21,.22), transparent 25rem),
    radial-gradient(circle at 84% 8%, rgba(219,39,119,.24), transparent 30rem),
    linear-gradient(180deg,#050510,#090a13 48%,#050510);
  color:#e5e7eb;
}
.template-bimbel body,.template-bimbel .text-slate-900,.template-bimbel h1,.template-bimbel h2,.template-bimbel h3{color:#fff!important}
.template-bimbel .text-slate-600,.template-bimbel .text-slate-500,.template-bimbel .text-slate-400{color:#cbd5e1!important}
.template-bimbel .site-shell-header{background:rgba(5,5,16,.88)!important;border-bottom:1px solid rgba(250,204,21,.22)!important}
.template-bimbel .site-shell-header a,.template-bimbel .nav-pill{color:#f8fafc!important}
.template-bimbel .hero-premium{
  background:
    linear-gradient(135deg,rgba(5,5,16,.98),rgba(24,24,39,.96)),
    radial-gradient(circle at 78% 18%,rgba(250,204,21,.30),transparent 28rem),
    radial-gradient(circle at 25% 70%,rgba(219,39,119,.26),transparent 28rem);
}
.template-bimbel .hero-premium::before{
  content:'';position:absolute;inset:0;opacity:.18;pointer-events:none;
  background:linear-gradient(90deg, transparent 0 48%, rgba(250,204,21,.45) 48% 49%, transparent 49% 100%);
  background-size:38px 38px;
}
.template-bimbel .gradient-title{background:linear-gradient(95deg,#fff 0%,#facc15 48%,#db2777 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.template-bimbel .eyebrow-premium{background:rgba(250,204,21,.12);border-color:rgba(250,204,21,.45);color:#fde68a}
.template-bimbel .btn-premium{background:linear-gradient(135deg,#facc15,#db2777)!important;color:#050510!important;border:0!important}
.template-bimbel .btn-ghost-premium{background:rgba(255,255,255,.08)!important;color:#fff!important;border-color:rgba(255,255,255,.22)!important}
.template-bimbel section.bg-white,.template-bimbel section.bg-gray-50,.template-bimbel .premium-section{background:#090a13!important}
.template-bimbel .glass-card,.template-bimbel .feature-card-premium,.template-bimbel .stats-premium-card,.template-bimbel .pricing-card-premium,.template-bimbel .faq-item-premium,.template-bimbel .article-card-premium{
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.045))!important;
  border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:0 28px 90px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08);
}
.template-bimbel .pricing-card-premium{position:relative;overflow:hidden}
.template-bimbel .pricing-card-premium::before{
  content:'';position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,#facc15,#db2777);
}
.template-bimbel .testimonial-premium{background:linear-gradient(145deg,rgba(250,204,21,.16),rgba(219,39,119,.10))!important}
.template-bimbel .faq-plus{background:rgba(250,204,21,.16)!important;color:#facc15!important}
.template-bimbel .footer-premium{background:#030309!important}

/* Template: Company Profile Elegan - editorial monochrome and gold */
body.template-company{
  background:
    linear-gradient(90deg, rgba(17,24,39,.045) 1px, transparent 1px),
    linear-gradient(180deg,#f7f1e8 0%,#fffaf2 42%,#f0e7da 100%);
  background-size:76px 76px, auto;
}
.template-company .site-shell-header{background:rgba(247,241,232,.90)!important;border-bottom:1px solid rgba(17,24,39,.18)!important;box-shadow:none!important}
.template-company .site-logo-mark{border-radius:0!important;background:#111827!important;color:#f8fafc!important;box-shadow:none!important}
.template-company .nav-pill{border-radius:0!important;text-transform:uppercase;letter-spacing:.08em}
.template-company .hero-premium{
  min-height:clamp(720px,92vh,980px);
  background:
    linear-gradient(90deg,#f7f1e8 0 52%,#111827 52% 100%),
    radial-gradient(circle at 82% 20%,rgba(180,83,9,.26),transparent 26rem);
}
.template-company .hero-premium .text-slate-600{color:#4b5563!important}
.template-company .hero-premium .media-frame img{border-radius:0!important;filter:grayscale(.35) contrast(1.08)}
.template-company .gradient-title{background:linear-gradient(100deg,#111827 0 62%,#b45309 62% 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.template-company .eyebrow-premium{border-radius:0;background:transparent;border-color:#111827;color:#111827;letter-spacing:.16em}
.template-company .btn-premium{border-radius:0!important;background:#111827!important;color:#fff!important;box-shadow:12px 12px 0 #b45309!important}
.template-company .btn-ghost-premium{border-radius:0!important;background:transparent!important;border-color:#111827!important;color:#111827!important}
.template-company .premium-section.bg-white,.template-company section.bg-white{background:#fffaf2!important}
.template-company .premium-section.bg-gray-50,.template-company section.bg-gray-50{background:#f0e7da!important}
.template-company .glass-card,.template-company .feature-card-premium,.template-company .stats-premium-card,.template-company .pricing-card-premium,.template-company .logo-wall-item{
  border-radius:0!important;background:#fffaf2!important;border:1px solid rgba(17,24,39,.18)!important;box-shadow:none!important;
}
.template-company .feature-card-premium:hover{transform:translateY(-6px);box-shadow:10px 10px 0 rgba(180,83,9,.22)!important}
.template-company .logo-wall-item{text-transform:uppercase;letter-spacing:.14em;color:#111827!important}
.template-company .timeline-dot{border-radius:0!important;background:#b45309!important;box-shadow:0 0 0 8px rgba(180,83,9,.14)}
.template-company .gallery-item-premium{border-radius:0!important;filter:grayscale(.15)}
.template-company .footer-premium{background:#111827!important}

/* Homepage: Xeniel Flagship - high-contrast command center */
body.template-xeniel-flagship{
  background:
    linear-gradient(135deg, rgba(79,70,229,.10) 0 1px, transparent 1px 100%),
    linear-gradient(45deg, rgba(6,182,212,.10) 0 1px, transparent 1px 100%),
    linear-gradient(180deg,#f8fbff 0%,#eef7ff 38%,#ffffff 100%);
  background-size:56px 56px,56px 56px,auto;
}
.template-xeniel-flagship .site-shell-header{background:rgba(248,251,255,.86)!important;border-bottom:1px solid rgba(79,70,229,.16)!important;backdrop-filter:blur(18px)}
.template-xeniel-flagship .hero-premium{min-height:clamp(760px,94vh,1040px);background:linear-gradient(115deg,#f8fbff 0 49%,#0f172a 49% 100%)}
.template-xeniel-flagship .hero-premium::before{content:'';position:absolute;inset:0;opacity:.22;background:repeating-linear-gradient(90deg,transparent 0 34px,rgba(6,182,212,.35) 35px,transparent 36px)}
.template-xeniel-flagship .gradient-title{background:linear-gradient(100deg,#0f172a 0 42%,#4f46e5 62%,#06b6d4 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.template-xeniel-flagship .eyebrow-premium{background:#eef2ff;color:#3730a3;border-color:rgba(79,70,229,.24)}
.template-xeniel-flagship .media-frame img{border:10px solid #fff;box-shadow:0 40px 120px rgba(15,23,42,.28)}
.template-xeniel-flagship .floating-card{border-radius:1rem;background:#0f172a;color:white;border-color:rgba(255,255,255,.16)}
.template-xeniel-flagship .floating-card .text-slate-900,.template-xeniel-flagship .floating-card .text-primary{color:#fff!important}
.template-xeniel-flagship .feature-card-premium,.template-xeniel-flagship .stats-premium-card,.template-xeniel-flagship .pricing-card-premium,.template-xeniel-flagship .logo-wall-item{
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(238,247,255,.86))!important;
  border:1px solid rgba(79,70,229,.14)!important;
  box-shadow:0 24px 80px rgba(79,70,229,.11);
}
.template-xeniel-flagship .premium-section.bg-gray-50,.template-xeniel-flagship section.bg-gray-50{background:#eef7ff!important}
.template-xeniel-flagship .premium-section.bg-white,.template-xeniel-flagship section.bg-white{background:#f8fbff!important}
.template-xeniel-flagship .testimonial-premium{background:linear-gradient(135deg,#312e81,#0891b2)!important}
.template-xeniel-flagship .footer-premium{background:linear-gradient(135deg,#0f172a,#1e1b4b 55%,#164e63)!important}

/* Template: Restoran Signature - cinematic dining */
body.template-restaurant{
  background:
    linear-gradient(90deg,rgba(251,191,36,.08) 1px,transparent 1px),
    linear-gradient(180deg,#190807 0%,#2b0d0b 42%,#fff7ed 42%,#fffaf5 100%);
  background-size:84px 84px,auto;
}
.template-restaurant .site-shell-header{background:rgba(25,8,7,.90)!important;border-bottom:1px solid rgba(251,191,36,.24)!important}
.template-restaurant .site-shell-header a,.template-restaurant .nav-pill{color:#fff7ed!important}
.template-restaurant .hero-premium{background:linear-gradient(100deg,#190807 0 54%,#7f1d1d 54% 100%)}
.template-restaurant .hero-premium .text-slate-600,.template-restaurant .hero-premium h1,.template-restaurant .hero-premium h2{color:#fff7ed!important}
.template-restaurant .gradient-title{background:linear-gradient(100deg,#fff7ed,#fed7aa 48%,#f59e0b 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.template-restaurant .eyebrow-premium{background:rgba(251,191,36,.12);border-color:rgba(251,191,36,.32);color:#fde68a}
.template-restaurant .btn-premium{background:#d97706!important;color:#190807!important;box-shadow:0 18px 0 rgba(127,29,29,.65)!important}
.template-restaurant .btn-ghost-premium{background:transparent!important;color:#fff7ed!important;border-color:rgba(255,247,237,.38)!important}
.template-restaurant .premium-section.bg-white,.template-restaurant section.bg-white{background:#fffaf5!important}
.template-restaurant .premium-section.bg-gray-50,.template-restaurant section.bg-gray-50{background:#451a03!important;color:#fff7ed}
.template-restaurant section.bg-gray-50 > div > h2,.template-restaurant section.bg-gray-50 > div > .text-center h2,.template-restaurant section.bg-gray-50 > div > .max-w-3xl h2{color:#fff7ed!important}
.template-restaurant section.bg-gray-50 > div > .text-center p,.template-restaurant section.bg-gray-50 > div > .max-w-3xl p{color:#fed7aa!important}
.template-restaurant .feature-card-premium,.template-restaurant .stats-premium-card,.template-restaurant .pricing-card-premium,.template-restaurant .faq-item-premium{
  background:#fff7ed!important;border:1px solid rgba(127,29,29,.18)!important;box-shadow:0 18px 50px rgba(69,26,3,.14);
}
.template-restaurant .gallery-item-premium{border:8px solid #2b0d0b;border-radius:1rem!important}
.template-restaurant .testimonial-premium{background:linear-gradient(145deg,#7f1d1d,#451a03)!important}
.template-restaurant .footer-premium{background:#190807!important}

/* Template: Properti Skyline - architectural blueprint */
body.template-property{
  background:
    linear-gradient(90deg,rgba(14,165,233,.12) 1px,transparent 1px),
    linear-gradient(0deg,rgba(14,165,233,.10) 1px,transparent 1px),
    #f4f9ff;
  background-size:64px 64px;
}
.template-property .site-shell-header{background:rgba(15,23,42,.94)!important;border-bottom:1px solid rgba(14,165,233,.35)!important}
.template-property .site-shell-header a,.template-property .nav-pill{color:#e0f2fe!important}
.template-property .hero-premium{background:linear-gradient(90deg,#0f172a 0 50%,#e0f2fe 50% 100%);min-height:clamp(720px,92vh,980px)}
.template-property .hero-premium .text-slate-600,.template-property .hero-premium h1{color:#e0f2fe!important}
.template-property .gradient-title{background:linear-gradient(100deg,#f8fafc,#38bdf8);-webkit-background-clip:text;background-clip:text;color:transparent}
.template-property .eyebrow-premium{border-radius:0;background:transparent;border-color:#38bdf8;color:#7dd3fc;letter-spacing:.18em}
.template-property .btn-premium,.template-property .btn-ghost-premium{border-radius:0!important}
.template-property .btn-premium{background:#0ea5e9!important;color:#0f172a!important;box-shadow:10px 10px 0 rgba(125,211,252,.28)!important}
.template-property .btn-ghost-premium{background:transparent!important;color:#e0f2fe!important;border-color:#38bdf8!important}
.template-property .media-frame img,.template-property .gallery-item-premium,.template-property .glass-card,.template-property .feature-card-premium,.template-property .stats-premium-card,.template-property .pricing-card-premium,.template-property .logo-wall-item{border-radius:0!important}
.template-property .feature-card-premium,.template-property .stats-premium-card,.template-property .pricing-card-premium,.template-property .faq-item-premium{
  background:#ffffff!important;border:1px solid rgba(15,23,42,.16)!important;box-shadow:12px 12px 0 rgba(14,165,233,.10)!important;
}
.template-property .premium-section.bg-gray-50,.template-property section.bg-gray-50{background:#e0f2fe!important}
.template-property .footer-premium{background:#0f172a!important}

/* Template: Klinik Wellness - calm clinical trust */
body.template-clinic{
  background:
    linear-gradient(120deg,rgba(20,184,166,.08) 0 25%,transparent 25% 50%,rgba(15,118,110,.08) 50% 75%,transparent 75%),
    #f6fffc;
  background-size:72px 72px;
}
.template-clinic .site-shell-header{background:rgba(246,255,252,.92)!important;border-bottom:1px solid rgba(15,118,110,.14)!important}
.template-clinic .hero-premium{background:linear-gradient(135deg,#f6fffc 0%,#dffcf5 58%,#ffffff 100%)}
.template-clinic .gradient-title{background:linear-gradient(100deg,#0f766e,#115e59 48%,#14b8a6 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.template-clinic .eyebrow-premium{background:#ccfbf1;color:#0f766e;border-color:rgba(15,118,110,.18)}
.template-clinic .btn-premium{background:#0f766e!important;box-shadow:0 18px 45px rgba(15,118,110,.24)!important}
.template-clinic .feature-card-premium,.template-clinic .stats-premium-card,.template-clinic .pricing-card-premium,.template-clinic .faq-item-premium,.template-clinic .contact-premium{
  background:linear-gradient(180deg,#ffffff,#f0fdfa)!important;border:1px solid rgba(15,118,110,.12)!important;box-shadow:0 20px 60px rgba(15,118,110,.09);
}
.template-clinic .team img{border:6px solid #ccfbf1}
.template-clinic .testimonial-premium{background:linear-gradient(145deg,#0f766e,#14b8a6)!important}
.template-clinic .premium-section.bg-gray-50,.template-clinic section.bg-gray-50{background:#e6fffa!important}
.template-clinic .footer-premium{background:linear-gradient(135deg,#064e3b,#115e59)!important}

/* Template: Travel Expedition - cinematic map and sun */
body.template-travel{
  background:
    repeating-linear-gradient(135deg,rgba(12,74,110,.08) 0 2px,transparent 2px 28px),
    linear-gradient(180deg,#fff7ed,#e0f2fe 52%,#f8fafc);
}
.template-travel .site-shell-header{background:rgba(255,247,237,.88)!important;border-bottom:1px solid rgba(249,115,22,.20)!important}
.template-travel .hero-premium{background:linear-gradient(115deg,#0c4a6e 0 52%,#fed7aa 52% 100%)}
.template-travel .hero-premium .text-slate-600,.template-travel .hero-premium h1{color:#f8fafc!important}
.template-travel .gradient-title{background:linear-gradient(100deg,#f8fafc,#bae6fd 48%,#fb923c);-webkit-background-clip:text;background-clip:text;color:transparent}
.template-travel .eyebrow-premium{background:rgba(249,115,22,.14);border-color:rgba(251,146,60,.36);color:#fed7aa}
.template-travel .btn-premium{background:#f97316!important;color:#0c4a6e!important;box-shadow:0 20px 0 rgba(12,74,110,.42)!important}
.template-travel .btn-ghost-premium{background:transparent!important;color:#f8fafc!important;border-color:rgba(255,255,255,.42)!important}
.template-travel .media-frame img,.template-travel .gallery-item-premium{border-radius:2rem 2rem .35rem .35rem!important;border:8px solid #fff7ed}
.template-travel .feature-card-premium,.template-travel .stats-premium-card,.template-travel .pricing-card-premium{
  background:#fff7ed!important;border:1px solid rgba(12,74,110,.12)!important;box-shadow:0 22px 64px rgba(12,74,110,.12);
}
.template-travel .premium-section.bg-gray-50,.template-travel section.bg-gray-50{background:#e0f2fe!important}
.template-travel .testimonial-premium{background:linear-gradient(145deg,#0c4a6e,#f97316)!important}
.template-travel .footer-premium{background:#082f49!important}

/* Template: Portfolio Creator - brutalist creative studio */
body.template-portfolio{
  background:
    linear-gradient(90deg,#f8fafc 0 49%,#111827 49% 51%,#f8fafc 51%),
    repeating-linear-gradient(0deg,transparent 0 34px,rgba(17,24,39,.08) 35px,transparent 36px);
}
.template-portfolio .site-shell-header{background:#f8fafc!important;border-bottom:3px solid #111827!important;box-shadow:none!important}
.template-portfolio .site-logo-mark,.template-portfolio .btn-premium,.template-portfolio .btn-ghost-premium,.template-portfolio .glass-card,.template-portfolio .feature-card-premium,.template-portfolio .stats-premium-card,.template-portfolio .pricing-card-premium,.template-portfolio .gallery-item-premium{border-radius:0!important}
.template-portfolio .hero-premium{background:linear-gradient(90deg,#f8fafc 0 58%,#111827 58% 100%);min-height:clamp(740px,92vh,1000px)}
.template-portfolio .gradient-title{background:linear-gradient(100deg,#111827 0 62%,#e11d48 62% 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.template-portfolio .eyebrow-premium{background:#fff;border:2px solid #111827;color:#111827;border-radius:0}
.template-portfolio .btn-premium{background:#111827!important;color:#fff!important;box-shadow:10px 10px 0 #e11d48!important}
.template-portfolio .btn-ghost-premium{background:#fff!important;border:2px solid #111827!important;color:#111827!important}
.template-portfolio .media-frame img{border-radius:0!important;filter:contrast(1.08) saturate(1.05);box-shadow:18px 18px 0 #e11d48!important}
.template-portfolio .feature-card-premium,.template-portfolio .stats-premium-card,.template-portfolio .pricing-card-premium,.template-portfolio .faq-item-premium{
  background:#fff!important;border:2px solid #111827!important;box-shadow:10px 10px 0 rgba(225,29,72,.22)!important;
}
.template-portfolio .premium-section.bg-gray-50,.template-portfolio section.bg-gray-50{background:#f1f5f9!important}
.template-portfolio .testimonial-premium{background:#111827!important;border:2px solid #e11d48!important}
.template-portfolio .footer-premium{background:#111827!important}

/* Template: Impact Foundation - warm field journal */
body.template-impact{
  background:
    linear-gradient(90deg,rgba(22,101,52,.08) 1px,transparent 1px),
    linear-gradient(180deg,#fffbeb,#f0fdf4 56%,#fff7ed);
  background-size:46px 46px,auto;
}
.template-impact .site-shell-header{background:rgba(255,251,235,.90)!important;border-bottom:1px solid rgba(22,101,52,.18)!important}
.template-impact .hero-premium{background:linear-gradient(110deg,#fffbeb 0 54%,#166534 54% 100%)}
.template-impact .gradient-title{background:linear-gradient(100deg,#14532d,#166534 52%,#f59e0b);-webkit-background-clip:text;background-clip:text;color:transparent}
.template-impact .eyebrow-premium{background:#dcfce7;color:#166534;border-color:rgba(22,101,52,.22)}
.template-impact .btn-premium{background:#166534!important;color:#fff!important;box-shadow:0 18px 0 rgba(245,158,11,.36)!important}
.template-impact .media-frame img{border:10px solid #fffbeb;box-shadow:0 28px 80px rgba(22,101,52,.22)}
.template-impact .feature-card-premium,.template-impact .stats-premium-card,.template-impact .pricing-card-premium,.template-impact .faq-item-premium,.template-impact .logo-wall-item{
  background:#fffbeb!important;border:1px solid rgba(22,101,52,.15)!important;box-shadow:0 20px 54px rgba(22,101,52,.10);
}
.template-impact .premium-section.bg-gray-50,.template-impact section.bg-gray-50{background:#f0fdf4!important}
.template-impact .testimonial-premium{background:linear-gradient(145deg,#166534,#ca8a04)!important}
.template-impact .footer-premium{background:linear-gradient(135deg,#14532d,#422006)!important}

/* Template: Event Summit - stage energy */
body.template-event{
  background:
    linear-gradient(90deg,rgba(244,63,94,.12) 1px,transparent 1px),
    linear-gradient(0deg,rgba(109,40,217,.14) 1px,transparent 1px),
    #0b0718;
  background-size:58px 58px;
  color:#f8fafc;
}
.template-event .site-shell-header{background:rgba(11,7,24,.92)!important;border-bottom:1px solid rgba(244,63,94,.35)!important}
.template-event .site-shell-header a,.template-event .nav-pill,.template-event h1,.template-event h2,.template-event h3{color:#f8fafc!important}
.template-event .text-slate-900{color:#f8fafc!important}
.template-event .text-slate-600,.template-event .text-slate-500,.template-event .text-slate-400{color:#cbd5e1!important}
.template-event .hero-premium{background:linear-gradient(135deg,#0b0718 0%,#241044 52%,#6d28d9 100%);min-height:clamp(740px,92vh,1000px)}
.template-event .gradient-title{background:linear-gradient(100deg,#ffffff,#c4b5fd 44%,#fb7185);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.template-event .eyebrow-premium{background:rgba(244,63,94,.14);border-color:rgba(244,63,94,.38);color:#fecdd3}
.template-event .btn-premium{background:linear-gradient(135deg,#6d28d9,#f43f5e)!important;box-shadow:0 24px 60px rgba(244,63,94,.34)!important}
.template-event .btn-ghost-premium{background:rgba(255,255,255,.08)!important;color:#fff!important;border-color:rgba(255,255,255,.28)!important}
.template-event .premium-section.bg-white,.template-event section.bg-white,.template-event .premium-section.bg-gray-50,.template-event section.bg-gray-50{background:#0b0718!important}
.template-event .feature-card-premium,.template-event .stats-premium-card,.template-event .pricing-card-premium,.template-event .faq-item-premium,.template-event .logo-wall-item,.template-event .contact-premium,.template-event .article-card-premium{
  background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.05))!important;
  border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:0 28px 90px rgba(0,0,0,.32);
}
.template-event .testimonial-premium{background:linear-gradient(145deg,rgba(109,40,217,.8),rgba(244,63,94,.70))!important}
.template-event .footer-premium{background:#06030f!important}

/* Template: SaaS Command Center - live product control room */
body.template-saas{
  background:
    linear-gradient(90deg,rgba(34,197,94,.11) 1px,transparent 1px),
    linear-gradient(0deg,rgba(56,189,248,.10) 1px,transparent 1px),
    radial-gradient(circle at 18% 0%,rgba(34,197,94,.22),transparent 26rem),
    #07111f;
  background-size:44px 44px,44px 44px,auto,auto;
  color:#e5f7ee;
}
.template-saas .site-shell-header{background:rgba(7,17,31,.90)!important;border-bottom:1px solid rgba(34,197,94,.32)!important}
.template-saas .site-shell-header a,.template-saas .nav-pill,.template-saas h1,.template-saas h2,.template-saas h3{color:#f8fafc!important}
.template-saas .text-slate-900{color:#f8fafc!important}.template-saas .text-slate-600,.template-saas .text-slate-500,.template-saas .text-slate-400{color:#b6c8d6!important}
.template-saas .hero-premium{background:linear-gradient(120deg,#07111f 0 56%,#102a2b 56% 100%);min-height:clamp(760px,94vh,1040px)}
.template-saas .hero-premium::before{content:'';position:absolute;inset:0;opacity:.20;background:repeating-linear-gradient(90deg,transparent 0 38px,rgba(34,197,94,.55) 39px,transparent 40px)}
.template-saas .gradient-title{background:linear-gradient(100deg,#fff,#67e8f9 48%,#22c55e);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.template-saas .eyebrow-premium{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.40);color:#bbf7d0}
.template-saas .btn-premium{background:linear-gradient(135deg,#22c55e,#38bdf8)!important;color:#07111f!important;box-shadow:0 22px 70px rgba(34,197,94,.30)!important}
.template-saas .btn-ghost-premium{background:rgba(255,255,255,.08)!important;color:#fff!important;border-color:rgba(255,255,255,.25)!important}
.template-saas .premium-section.bg-white,.template-saas section.bg-white,.template-saas .premium-section.bg-gray-50,.template-saas section.bg-gray-50{background:#07111f!important}
.template-saas .feature-card-premium,.template-saas .stats-premium-card,.template-saas .pricing-card-premium,.template-saas .faq-item-premium,.template-saas .contact-premium,.template-saas .article-card-premium{
  background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.045))!important;border:1px solid rgba(34,197,94,.20)!important;box-shadow:0 28px 90px rgba(0,0,0,.35);
}
.template-saas .timeline-dot{background:#22c55e!important}.template-saas .testimonial-premium{background:linear-gradient(145deg,#0f172a,#16a34a)!important}.template-saas .footer-premium{background:#030712!important}

/* Template: Firma Hukum Prestise - chambers editorial */
body.template-legal{background:linear-gradient(90deg,rgba(63,29,29,.05) 1px,transparent 1px),linear-gradient(180deg,#fbf7ef,#fffaf2 52%,#f4eadc);background-size:90px 90px,auto}
.template-legal .site-shell-header{background:rgba(251,247,239,.92)!important;border-bottom:1px solid rgba(63,29,29,.18)!important;box-shadow:none!important}
.template-legal .site-logo-mark,.template-legal .btn-premium,.template-legal .btn-ghost-premium,.template-legal .glass-card,.template-legal .feature-card-premium,.template-legal .stats-premium-card,.template-legal .pricing-card-premium{border-radius:.25rem!important}
.template-legal .hero-premium{background:linear-gradient(90deg,#fbf7ef 0 54%,#3f1d1d 54% 100%);min-height:clamp(740px,92vh,1000px)}
.template-legal .gradient-title{background:linear-gradient(100deg,#3f1d1d 0 58%,#b45309 58%);-webkit-background-clip:text;background-clip:text;color:transparent}
.template-legal .eyebrow-premium{background:transparent;border-color:#3f1d1d;color:#3f1d1d;border-radius:.2rem;letter-spacing:.16em}
.template-legal .btn-premium{background:#3f1d1d!important;color:#fff!important;box-shadow:10px 10px 0 rgba(180,83,9,.35)!important}
.template-legal .btn-ghost-premium{background:#fffaf2!important;border-color:#3f1d1d!important;color:#3f1d1d!important}
.template-legal .premium-section.bg-white,.template-legal section.bg-white{background:#fffaf2!important}.template-legal .premium-section.bg-gray-50,.template-legal section.bg-gray-50{background:#f4eadc!important}
.template-legal .feature-card-premium,.template-legal .stats-premium-card,.template-legal .pricing-card-premium,.template-legal .faq-item-premium,.template-legal .logo-wall-item{background:#fffaf2!important;border:1px solid rgba(63,29,29,.18)!important;box-shadow:none!important}
.template-legal .timeline-dot{border-radius:.15rem!important;background:#b45309!important}.template-legal .footer-premium{background:#2b1212!important}

/* Template: Otomotif Showroom Elite - kinetic performance */
body.template-auto{background:repeating-linear-gradient(112deg,rgba(239,68,68,.10) 0 2px,transparent 2px 36px),linear-gradient(180deg,#050505,#111827 48%,#f8fafc 48%);color:#e5e7eb}
.template-auto .site-shell-header{background:rgba(5,5,5,.92)!important;border-bottom:1px solid rgba(239,68,68,.38)!important}.template-auto .site-shell-header a,.template-auto .nav-pill{color:#f8fafc!important}
.template-auto .hero-premium{background:linear-gradient(105deg,#050505 0 55%,#ef4444 55% 100%);min-height:clamp(740px,92vh,1000px)}
.template-auto .hero-premium h1,.template-auto .hero-premium .text-slate-600{color:#f8fafc!important}
.template-auto .gradient-title{background:linear-gradient(100deg,#fff,#fca5a5 45%,#ef4444);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.template-auto .eyebrow-premium{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.50);color:#fecaca;border-radius:0;text-transform:uppercase}
.template-auto .btn-premium,.template-auto .btn-ghost-premium,.template-auto .media-frame img,.template-auto .gallery-item-premium,.template-auto .feature-card-premium,.template-auto .stats-premium-card,.template-auto .pricing-card-premium{border-radius:0!important}
.template-auto .btn-premium{background:#ef4444!important;color:#050505!important;box-shadow:12px 12px 0 rgba(255,255,255,.18)!important}
.template-auto .btn-ghost-premium{background:rgba(255,255,255,.08)!important;color:#fff!important;border-color:rgba(255,255,255,.34)!important}
.template-auto .premium-section.bg-white,.template-auto section.bg-white{background:#f8fafc!important}.template-auto .premium-section.bg-gray-50,.template-auto section.bg-gray-50{background:#111827!important;color:#f8fafc}
.template-auto section.bg-gray-50 h2,.template-auto section.bg-gray-50 h3,.template-auto section.bg-gray-50 .text-slate-900{color:#fff!important}.template-auto section.bg-gray-50 .text-slate-600{color:#cbd5e1!important}
.template-auto .feature-card-premium,.template-auto .stats-premium-card,.template-auto .pricing-card-premium,.template-auto .faq-item-premium{background:#fff!important;border:1px solid rgba(17,24,39,.18)!important;box-shadow:10px 10px 0 rgba(239,68,68,.18)!important}
.template-auto .testimonial-premium{background:linear-gradient(145deg,#111827,#ef4444)!important}.template-auto .footer-premium{background:#050505!important}

/* Template: Beauty Aesthetic Lab - editorial rose glass */
body.template-beauty{background:radial-gradient(circle at 12% 4%,rgba(244,114,182,.20),transparent 26rem),radial-gradient(circle at 88% 12%,rgba(245,158,11,.16),transparent 26rem),linear-gradient(180deg,#fff7fb,#fffaf2 58%,#ffffff)}
.template-beauty .site-shell-header{background:rgba(255,247,251,.90)!important;border-bottom:1px solid rgba(190,24,93,.14)!important}
.template-beauty .hero-premium{background:linear-gradient(115deg,#fff7fb 0 54%,#fce7f3 54% 100%)}
.template-beauty .gradient-title{background:linear-gradient(100deg,#831843,#be185d 48%,#f59e0b);-webkit-background-clip:text;background-clip:text;color:transparent}
.template-beauty .eyebrow-premium{background:#fce7f3;color:#be185d;border-color:rgba(190,24,93,.18)}
.template-beauty .btn-premium{background:linear-gradient(135deg,#be185d,#f59e0b)!important;box-shadow:0 20px 55px rgba(190,24,93,.20)!important}
.template-beauty .media-frame img{border-radius:3rem 3rem 1rem 1rem!important;border:10px solid #fff}
.template-beauty .feature-card-premium,.template-beauty .stats-premium-card,.template-beauty .pricing-card-premium,.template-beauty .faq-item-premium,.template-beauty .contact-premium{background:rgba(255,255,255,.88)!important;border:1px solid rgba(190,24,93,.12)!important;box-shadow:0 24px 70px rgba(190,24,93,.08)}
.template-beauty .premium-section.bg-gray-50,.template-beauty section.bg-gray-50{background:#fff1f2!important}.template-beauty .testimonial-premium{background:linear-gradient(145deg,#be185d,#f59e0b)!important}.template-beauty .footer-premium{background:#831843!important}

/* Template: Fitness Performance Arena - hard contrast training floor */
body.template-fitness{background:linear-gradient(90deg,rgba(163,230,53,.10) 1px,transparent 1px),linear-gradient(180deg,#050505,#111827);background-size:52px 52px;color:#f8fafc}
.template-fitness .site-shell-header{background:rgba(5,5,5,.92)!important;border-bottom:1px solid rgba(163,230,53,.42)!important}.template-fitness .site-shell-header a,.template-fitness .nav-pill,.template-fitness h1,.template-fitness h2,.template-fitness h3{color:#f8fafc!important}
.template-fitness .text-slate-900{color:#f8fafc!important}.template-fitness .text-slate-600,.template-fitness .text-slate-500,.template-fitness .text-slate-400{color:#cbd5e1!important}
.template-fitness .hero-premium{background:linear-gradient(110deg,#050505 0 62%,#a3e635 62% 100%);min-height:clamp(760px,94vh,1040px)}
.template-fitness .gradient-title{background:linear-gradient(100deg,#fff,#bef264 50%,#a3e635);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.template-fitness .eyebrow-premium{background:rgba(163,230,53,.13);border-color:rgba(163,230,53,.42);color:#d9f99d;border-radius:.35rem}
.template-fitness .btn-premium{background:#a3e635!important;color:#050505!important;box-shadow:0 18px 0 rgba(255,255,255,.18)!important}
.template-fitness .btn-ghost-premium{background:rgba(255,255,255,.08)!important;color:#fff!important;border-color:rgba(255,255,255,.28)!important}
.template-fitness .premium-section.bg-white,.template-fitness section.bg-white,.template-fitness .premium-section.bg-gray-50,.template-fitness section.bg-gray-50{background:#080808!important}
.template-fitness .feature-card-premium,.template-fitness .stats-premium-card,.template-fitness .pricing-card-premium,.template-fitness .faq-item-premium,.template-fitness .contact-premium{background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04))!important;border:1px solid rgba(163,230,53,.24)!important;box-shadow:0 28px 80px rgba(0,0,0,.34)}
.template-fitness .timeline-dot{background:#a3e635!important}.template-fitness .testimonial-premium{background:linear-gradient(145deg,#111827,#4d7c0f)!important}.template-fitness .footer-premium{background:#050505!important}

/* Template: Agritech Harvest Network - modern field grid */
body.template-agritech{background:linear-gradient(90deg,rgba(22,101,52,.09) 1px,transparent 1px),radial-gradient(circle at 84% 6%,rgba(14,165,233,.20),transparent 28rem),linear-gradient(180deg,#f7fee7,#effef8 52%,#ffffff);background-size:50px 50px,auto,auto}
.template-agritech .site-shell-header{background:rgba(247,254,231,.90)!important;border-bottom:1px solid rgba(22,101,52,.18)!important}
.template-agritech .hero-premium{background:linear-gradient(112deg,#f7fee7 0 52%,#166534 52% 100%)}
.template-agritech .gradient-title{background:linear-gradient(100deg,#14532d,#166534 52%,#0ea5e9);-webkit-background-clip:text;background-clip:text;color:transparent}
.template-agritech .eyebrow-premium{background:#dcfce7;color:#166534;border-color:rgba(22,101,52,.22)}
.template-agritech .btn-premium{background:#166534!important;color:#fff!important;box-shadow:0 18px 0 rgba(14,165,233,.30)!important}
.template-agritech .feature-card-premium,.template-agritech .stats-premium-card,.template-agritech .pricing-card-premium,.template-agritech .faq-item-premium{background:#ffffff!important;border:1px solid rgba(22,101,52,.14)!important;box-shadow:0 22px 70px rgba(22,101,52,.09)}
.template-agritech .premium-section.bg-gray-50,.template-agritech section.bg-gray-50{background:#ecfeff!important}.template-agritech .testimonial-premium{background:linear-gradient(145deg,#166534,#0ea5e9)!important}.template-agritech .footer-premium{background:#14532d!important}

/* Template: Hotel Boutique Sanctuary - quiet hospitality */
body.template-hotel{background:radial-gradient(circle at 15% 8%,rgba(20,184,166,.18),transparent 26rem),radial-gradient(circle at 85% 12%,rgba(251,113,133,.16),transparent 24rem),linear-gradient(180deg,#f0fdfa,#fff7ed 58%,#ffffff)}
.template-hotel .site-shell-header{background:rgba(240,253,250,.90)!important;border-bottom:1px solid rgba(15,118,110,.16)!important}
.template-hotel .hero-premium{background:linear-gradient(112deg,#0f766e 0 52%,#fff7ed 52% 100%)}
.template-hotel .hero-premium h1,.template-hotel .hero-premium .text-slate-600{color:#f0fdfa!important}
.template-hotel .gradient-title{background:linear-gradient(100deg,#ffffff,#ccfbf1 50%,#fb7185);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.template-hotel .eyebrow-premium{background:rgba(255,247,237,.13);border-color:rgba(255,247,237,.38);color:#fff7ed}
.template-hotel .btn-premium{background:#fb7185!important;color:#082f2b!important;box-shadow:0 20px 0 rgba(15,118,110,.34)!important}
.template-hotel .btn-ghost-premium{background:rgba(255,255,255,.08)!important;color:#fff!important;border-color:rgba(255,255,255,.30)!important}
.template-hotel .media-frame img{border:10px solid #fff7ed;border-radius:2rem!important}
.template-hotel .feature-card-premium,.template-hotel .stats-premium-card,.template-hotel .pricing-card-premium,.template-hotel .faq-item-premium{background:#fff!important;border:1px solid rgba(15,118,110,.12)!important;box-shadow:0 24px 74px rgba(15,118,110,.10)}
.template-hotel .premium-section.bg-gray-50,.template-hotel section.bg-gray-50{background:#fff7ed!important}.template-hotel .testimonial-premium{background:linear-gradient(145deg,#0f766e,#fb7185)!important}.template-hotel .footer-premium{background:#0f3f3a!important}

/* Template: Fashion Commerce Editorial - stark magazine commerce */
body.template-fashion{background:linear-gradient(90deg,#fff 0 48%,#111827 48% 50%,#fff 50%),repeating-linear-gradient(0deg,transparent 0 44px,rgba(236,72,153,.10) 45px,transparent 46px)}
.template-fashion .site-shell-header{background:#fff!important;border-bottom:2px solid #111827!important;box-shadow:none!important}
.template-fashion .site-logo-mark,.template-fashion .btn-premium,.template-fashion .btn-ghost-premium,.template-fashion .media-frame img,.template-fashion .feature-card-premium,.template-fashion .stats-premium-card,.template-fashion .pricing-card-premium,.template-fashion .gallery-item-premium{border-radius:0!important}
.template-fashion .hero-premium{background:linear-gradient(90deg,#fff 0 56%,#111827 56% 100%);min-height:clamp(760px,94vh,1040px)}
.template-fashion .gradient-title{background:linear-gradient(100deg,#111827 0 60%,#ec4899 60%);-webkit-background-clip:text;background-clip:text;color:transparent}
.template-fashion .eyebrow-premium{background:#fff;border:2px solid #111827;color:#111827;border-radius:0;letter-spacing:.16em}
.template-fashion .btn-premium{background:#111827!important;color:#fff!important;box-shadow:10px 10px 0 #ec4899!important}.template-fashion .btn-ghost-premium{background:#fff!important;border:2px solid #111827!important;color:#111827!important}
.template-fashion .media-frame img{box-shadow:18px 18px 0 #ec4899!important}.template-fashion .premium-section.bg-gray-50,.template-fashion section.bg-gray-50{background:#fdf2f8!important}
.template-fashion .feature-card-premium,.template-fashion .stats-premium-card,.template-fashion .pricing-card-premium,.template-fashion .faq-item-premium{background:#fff!important;border:2px solid #111827!important;box-shadow:10px 10px 0 rgba(236,72,153,.18)!important}
.template-fashion .testimonial-premium{background:#111827!important;border:2px solid #ec4899!important}.template-fashion .footer-premium{background:#111827!important}

/* Template: Wealth Advisory Desk - private advisory calm */
body.template-wealth{background:linear-gradient(90deg,rgba(6,78,59,.06) 1px,transparent 1px),linear-gradient(180deg,#f7f4ea,#ffffff 52%,#ecfdf5);background-size:78px 78px,auto}
.template-wealth .site-shell-header{background:rgba(247,244,234,.92)!important;border-bottom:1px solid rgba(6,78,59,.18)!important;box-shadow:none!important}
.template-wealth .hero-premium{background:linear-gradient(105deg,#f7f4ea 0 54%,#064e3b 54% 100%);min-height:clamp(740px,92vh,1000px)}
.template-wealth .gradient-title{background:linear-gradient(100deg,#064e3b 0 55%,#d4af37 55%);-webkit-background-clip:text;background-clip:text;color:transparent}
.template-wealth .eyebrow-premium{background:transparent;border-color:#064e3b;color:#064e3b;letter-spacing:.15em}
.template-wealth .btn-premium{background:#064e3b!important;color:#fff!important;box-shadow:10px 10px 0 rgba(212,175,55,.40)!important}
.template-wealth .btn-ghost-premium{background:#fff!important;border-color:#064e3b!important;color:#064e3b!important}
.template-wealth .feature-card-premium,.template-wealth .stats-premium-card,.template-wealth .pricing-card-premium,.template-wealth .faq-item-premium,.template-wealth .logo-wall-item{background:#fffdf7!important;border:1px solid rgba(6,78,59,.16)!important;box-shadow:0 18px 50px rgba(6,78,59,.08)}
.template-wealth .premium-section.bg-gray-50,.template-wealth section.bg-gray-50{background:#ecfdf5!important}.template-wealth .timeline-dot{background:#d4af37!important}.template-wealth .testimonial-premium{background:linear-gradient(145deg,#064e3b,#a16207)!important}.template-wealth .footer-premium{background:#052e25!important}

/* Template: Logistik Fleet Command - industrial control tower */
body.template-logistics{background:linear-gradient(90deg,rgba(30,58,138,.11) 1px,transparent 1px),linear-gradient(0deg,rgba(249,115,22,.10) 1px,transparent 1px),linear-gradient(180deg,#eff6ff,#f8fafc 54%,#ffffff);background-size:60px 60px,60px 60px,auto}
.template-logistics .site-shell-header{background:rgba(30,58,138,.94)!important;border-bottom:1px solid rgba(249,115,22,.36)!important}.template-logistics .site-shell-header a,.template-logistics .nav-pill{color:#eff6ff!important}
.template-logistics .hero-premium{background:linear-gradient(110deg,#1e3a8a 0 58%,#f97316 58% 100%);min-height:clamp(740px,92vh,1000px)}
.template-logistics .hero-premium h1,.template-logistics .hero-premium .text-slate-600{color:#eff6ff!important}
.template-logistics .gradient-title{background:linear-gradient(100deg,#fff,#bfdbfe 52%,#fed7aa);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.template-logistics .eyebrow-premium{background:rgba(249,115,22,.14);border-color:rgba(249,115,22,.42);color:#fed7aa;border-radius:.25rem}
.template-logistics .btn-premium{background:#f97316!important;color:#111827!important;box-shadow:0 18px 0 rgba(191,219,254,.34)!important}.template-logistics .btn-ghost-premium{background:rgba(255,255,255,.08)!important;color:#fff!important;border-color:rgba(255,255,255,.30)!important}
.template-logistics .feature-card-premium,.template-logistics .stats-premium-card,.template-logistics .pricing-card-premium,.template-logistics .faq-item-premium{background:#fff!important;border:1px solid rgba(30,58,138,.16)!important;box-shadow:12px 12px 0 rgba(249,115,22,.10)!important}
.template-logistics .premium-section.bg-gray-50,.template-logistics section.bg-gray-50{background:#dbeafe!important}.template-logistics .timeline-dot{background:#f97316!important}.template-logistics .testimonial-premium{background:linear-gradient(145deg,#1e3a8a,#f97316)!important}.template-logistics .footer-premium{background:#172554!important}

/* Template: Arsitektur Interior Atelier - quiet spatial gallery */
body.template-architecture{background:linear-gradient(90deg,rgba(51,65,85,.07) 1px,transparent 1px),linear-gradient(180deg,#f8fafc,#f5efe8 56%,#ffffff);background-size:72px 72px,auto}
.template-architecture .site-shell-header{background:rgba(248,250,252,.92)!important;border-bottom:1px solid rgba(51,65,85,.16)!important;box-shadow:none!important}
.template-architecture .hero-premium{background:linear-gradient(90deg,#f8fafc 0 54%,#334155 54% 100%);min-height:clamp(740px,92vh,1000px)}
.template-architecture .gradient-title{background:linear-gradient(100deg,#1f2937 0 58%,#c08457 58%);-webkit-background-clip:text;background-clip:text;color:transparent}
.template-architecture .eyebrow-premium{background:#fff7ed;border-color:rgba(192,132,87,.28);color:#9a5f36;border-radius:.2rem;letter-spacing:.14em}
.template-architecture .btn-premium{background:#334155!important;color:#fff!important;box-shadow:10px 10px 0 rgba(192,132,87,.36)!important}.template-architecture .btn-ghost-premium{border-color:#334155!important;color:#334155!important}
.template-architecture .media-frame img,.template-architecture .feature-card-premium,.template-architecture .stats-premium-card,.template-architecture .pricing-card-premium,.template-architecture .gallery-item-premium{border-radius:.25rem!important}
.template-architecture .feature-card-premium,.template-architecture .stats-premium-card,.template-architecture .pricing-card-premium,.template-architecture .faq-item-premium{background:#fffaf5!important;border:1px solid rgba(51,65,85,.14)!important;box-shadow:0 20px 58px rgba(51,65,85,.08)}
.template-architecture .premium-section.bg-gray-50,.template-architecture section.bg-gray-50{background:#f5efe8!important}.template-architecture .timeline-dot{background:#c08457!important}.template-architecture .testimonial-premium{background:linear-gradient(145deg,#334155,#c08457)!important}.template-architecture .footer-premium{background:#1f2937!important}

/* Template: Wedding Planner Luxe - romantic production house */
body.template-wedding{background:radial-gradient(circle at 12% 8%,rgba(244,182,194,.28),transparent 26rem),radial-gradient(circle at 90% 12%,rgba(159,18,57,.14),transparent 24rem),linear-gradient(180deg,#fff7f8,#fff1f2 58%,#ffffff)}
.template-wedding .site-shell-header{background:rgba(255,247,248,.92)!important;border-bottom:1px solid rgba(159,18,57,.13)!important}
.template-wedding .hero-premium{background:linear-gradient(112deg,#fff7f8 0 54%,#9f1239 54% 100%)}
.template-wedding .gradient-title{background:linear-gradient(100deg,#881337,#9f1239 50%,#f4b6c2);-webkit-background-clip:text;background-clip:text;color:transparent}
.template-wedding .eyebrow-premium{background:#ffe4e6;color:#9f1239;border-color:rgba(159,18,57,.18)}
.template-wedding .btn-premium{background:#9f1239!important;color:#fff!important;box-shadow:0 18px 0 rgba(244,182,194,.46)!important}
.template-wedding .media-frame img{border:10px solid #fff;border-radius:3rem!important}
.template-wedding .feature-card-premium,.template-wedding .stats-premium-card,.template-wedding .pricing-card-premium,.template-wedding .faq-item-premium{background:#fff!important;border:1px solid rgba(159,18,57,.12)!important;box-shadow:0 24px 70px rgba(159,18,57,.08)}
.template-wedding .premium-section.bg-gray-50,.template-wedding section.bg-gray-50{background:#fff1f2!important}.template-wedding .testimonial-premium{background:linear-gradient(145deg,#9f1239,#f4b6c2)!important}.template-wedding .footer-premium{background:#881337!important}

/* Template: Cybersecurity SOC - threat console */
body.template-cyber{background:linear-gradient(90deg,rgba(6,182,212,.14) 1px,transparent 1px),linear-gradient(0deg,rgba(34,211,238,.10) 1px,transparent 1px),linear-gradient(180deg,#020617,#08111f);background-size:42px 42px;color:#e0f2fe}
.template-cyber .site-shell-header{background:rgba(2,6,23,.92)!important;border-bottom:1px solid rgba(6,182,212,.36)!important}.template-cyber .site-shell-header a,.template-cyber .nav-pill,.template-cyber h1,.template-cyber h2,.template-cyber h3{color:#f8fafc!important}
.template-cyber .text-slate-900{color:#f8fafc!important}.template-cyber .text-slate-600,.template-cyber .text-slate-500,.template-cyber .text-slate-400{color:#b6d6e3!important}
.template-cyber .hero-premium{background:radial-gradient(circle at 78% 18%,rgba(6,182,212,.26),transparent 27rem),linear-gradient(135deg,#020617,#0f172a 58%,#083344);min-height:clamp(760px,94vh,1040px)}
.template-cyber .gradient-title{background:linear-gradient(100deg,#fff,#67e8f9 52%,#06b6d4);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.template-cyber .eyebrow-premium{background:rgba(6,182,212,.12);border-color:rgba(6,182,212,.42);color:#a5f3fc;border-radius:.2rem}
.template-cyber .btn-premium{background:#06b6d4!important;color:#020617!important;box-shadow:0 22px 70px rgba(6,182,212,.28)!important}.template-cyber .btn-ghost-premium{background:rgba(255,255,255,.08)!important;color:#fff!important;border-color:rgba(255,255,255,.28)!important}
.template-cyber .premium-section.bg-white,.template-cyber section.bg-white,.template-cyber .premium-section.bg-gray-50,.template-cyber section.bg-gray-50{background:#020617!important}
.template-cyber .feature-card-premium,.template-cyber .stats-premium-card,.template-cyber .pricing-card-premium,.template-cyber .faq-item-premium,.template-cyber .contact-premium{background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04))!important;border:1px solid rgba(6,182,212,.22)!important;box-shadow:0 28px 90px rgba(0,0,0,.35)}
.template-cyber .timeline-dot{background:#06b6d4!important}.template-cyber .testimonial-premium{background:linear-gradient(145deg,#0f172a,#0891b2)!important}.template-cyber .footer-premium{background:#020617!important}

/* Template: Manufacturing Precision Plant - industrial spec sheet */
body.template-manufacturing{background:linear-gradient(90deg,rgba(31,41,55,.08) 1px,transparent 1px),linear-gradient(0deg,rgba(245,158,11,.10) 1px,transparent 1px),linear-gradient(180deg,#f3f4f6,#ffffff 58%,#fef3c7);background-size:58px 58px,58px 58px,auto}
.template-manufacturing .site-shell-header{background:rgba(31,41,55,.94)!important;border-bottom:1px solid rgba(245,158,11,.38)!important}.template-manufacturing .site-shell-header a,.template-manufacturing .nav-pill{color:#f9fafb!important}
.template-manufacturing .hero-premium{background:linear-gradient(110deg,#1f2937 0 58%,#f59e0b 58% 100%);min-height:clamp(740px,92vh,1000px)}
.template-manufacturing .hero-premium h1,.template-manufacturing .hero-premium .text-slate-600{color:#f9fafb!important}
.template-manufacturing .gradient-title{background:linear-gradient(100deg,#fff,#fcd34d 52%,#f59e0b);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.template-manufacturing .eyebrow-premium{background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.42);color:#fde68a;border-radius:.15rem;letter-spacing:.14em}
.template-manufacturing .btn-premium,.template-manufacturing .btn-ghost-premium,.template-manufacturing .media-frame img,.template-manufacturing .feature-card-premium,.template-manufacturing .stats-premium-card,.template-manufacturing .pricing-card-premium{border-radius:0!important}
.template-manufacturing .btn-premium{background:#f59e0b!important;color:#111827!important;box-shadow:10px 10px 0 rgba(255,255,255,.20)!important}.template-manufacturing .btn-ghost-premium{background:rgba(255,255,255,.08)!important;color:#fff!important;border-color:rgba(255,255,255,.30)!important}
.template-manufacturing .feature-card-premium,.template-manufacturing .stats-premium-card,.template-manufacturing .pricing-card-premium,.template-manufacturing .faq-item-premium{background:#fff!important;border:1px solid rgba(31,41,55,.16)!important;box-shadow:12px 12px 0 rgba(245,158,11,.10)!important}
.template-manufacturing .premium-section.bg-gray-50,.template-manufacturing section.bg-gray-50{background:#fef3c7!important}.template-manufacturing .timeline-dot{background:#f59e0b!important}.template-manufacturing .testimonial-premium{background:linear-gradient(145deg,#1f2937,#f59e0b)!important}.template-manufacturing .footer-premium{background:#111827!important}

/* Template: Recruitment Talent Hub - human operations */
body.template-talent{background:radial-gradient(circle at 16% 4%,rgba(67,56,202,.18),transparent 28rem),radial-gradient(circle at 88% 10%,rgba(20,184,166,.18),transparent 28rem),linear-gradient(180deg,#f8fbff,#eef2ff 54%,#ffffff)}
.template-talent .site-shell-header{background:rgba(248,251,255,.90)!important;border-bottom:1px solid rgba(67,56,202,.16)!important}
.template-talent .hero-premium{background:linear-gradient(112deg,#4338ca 0 52%,#ecfeff 52% 100%);min-height:clamp(740px,92vh,1000px)}
.template-talent .hero-premium h1,.template-talent .hero-premium .text-slate-600{color:#f8fafc!important}
.template-talent .gradient-title{background:linear-gradient(100deg,#fff,#c7d2fe 50%,#5eead4);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.template-talent .eyebrow-premium{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.30);color:#e0e7ff}
.template-talent .btn-premium{background:#14b8a6!important;color:#08111f!important;box-shadow:0 18px 0 rgba(67,56,202,.34)!important}.template-talent .btn-ghost-premium{background:rgba(255,255,255,.08)!important;color:#fff!important;border-color:rgba(255,255,255,.30)!important}
.template-talent .feature-card-premium,.template-talent .stats-premium-card,.template-talent .pricing-card-premium,.template-talent .faq-item-premium{background:#fff!important;border:1px solid rgba(67,56,202,.13)!important;box-shadow:0 24px 70px rgba(67,56,202,.10)}
.template-talent .premium-section.bg-gray-50,.template-talent section.bg-gray-50{background:#eef2ff!important}.template-talent .timeline-dot{background:#14b8a6!important}.template-talent .testimonial-premium{background:linear-gradient(145deg,#4338ca,#14b8a6)!important}.template-talent .footer-premium{background:#312e81!important}

/* Public supporting pages - flagship editorial treatment */
.page-tentang .hero-premium{background:linear-gradient(115deg,#f8fbff 0 50%,#eef2ff 50% 100%),radial-gradient(circle at 82% 20%,rgba(79,70,229,.24),transparent 28rem)}
.page-layanan .hero-premium{background:linear-gradient(120deg,#0f172a 0 52%,#e0f2fe 52% 100%)}
.page-layanan .hero-premium h1,.page-layanan .hero-premium .text-slate-600{color:#f8fafc!important}
.page-layanan .hero-premium .gradient-title{background:linear-gradient(100deg,#ffffff,#a5b4fc 50%,#67e8f9);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.page-layanan .hero-premium .btn-ghost-premium{background:rgba(255,255,255,.08)!important;color:#fff!important;border-color:rgba(255,255,255,.25)!important}
.page-faq .hero-premium{background:linear-gradient(135deg,#f8fbff,#eef2ff 55%,#ecfeff)}
.page-kontak .hero-premium{background:linear-gradient(110deg,#f8fbff 0 54%,#0f172a 54% 100%)}
.page-kontak .hero-premium .media-frame img{border:10px solid #fff}
.page-tentang .feature-card-premium,.page-layanan .feature-card-premium,.page-faq .feature-card-premium,.page-kontak .feature-card-premium{
  min-height:245px;
}
.page-tentang .timeline-dot,.page-faq .timeline-dot,.page-kontak .timeline-dot{background:#06b6d4!important}
.page-layanan .pricing-card-premium{position:relative;overflow:hidden}
.page-layanan .pricing-card-premium::before{content:'';position:absolute;inset:0 0 auto 0;height:6px;background:linear-gradient(90deg,#4f46e5,#06b6d4)}

.template-showcase-premium{background:#ffffff!important}
.template-showcase-grid{
  background:
    linear-gradient(180deg,#fff 0%,#fff 18%,#f7f9fd 100%),
    radial-gradient(circle at 50% 18%,rgba(36,82,179,.06),transparent 34rem);
}
.template-portfolio-head{align-items:flex-start!important}
.template-portfolio-toolbar{margin-top:.5rem}
.template-portfolio-toolbar select{letter-spacing:.02em;box-shadow:0 6px 18px rgba(15,23,42,.06)!important;border-color:#d8d8d8!important;background:#f7f7f8!important;color:#3f3f46!important}
.template-portfolio-toolbar button{box-shadow:0 6px 18px rgba(15,23,42,.04)!important;border-color:#d8d8d8!important;background:#fff!important;color:#444!important}
.template-category-select::after{
  content:'';position:absolute;inset:auto 1.2rem -.45rem 1.2rem;height:.9rem;border-radius:999px;
  background:rgba(15,23,42,.08);filter:blur(10px);z-index:-1;
}
.showcase-card-premium{isolation:isolate}
.template-portfolio-card{transition:transform .24s ease,filter .24s ease,opacity .22s ease}
.template-portfolio-card:hover{transform:translateY(-6px)}
.template-portfolio-card.is-hidden{display:none!important}
.template-site-thumb{
  height:520px;border-radius:.7rem;border:1px solid rgba(15,23,42,.09);background:#fff;
  box-shadow:0 10px 28px rgba(15,23,42,.10);transition:box-shadow .24s ease,transform .24s ease;
}
.template-portfolio-card:hover .template-site-thumb{box-shadow:0 18px 44px rgba(15,23,42,.16)}
.template-site-nav{height:28px;padding:0 .65rem;background:white;border-bottom:1px solid rgba(15,23,42,.055)}
.template-site-hero{height:155px;background:linear-gradient(135deg,var(--template-primary),var(--template-accent))}
.template-site-hero img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform .5s ease,filter .5s ease;filter:saturate(1.03) contrast(1.02)}
.template-portfolio-card:hover .template-site-hero img{transform:scale(1.07)}
.template-site-hero-overlay{background:linear-gradient(180deg,rgba(15,23,42,.08),rgba(15,23,42,.54))}
.template-site-hero-copy span{display:inline-flex;margin-bottom:.34rem;padding:.18rem .48rem;border-radius:999px;background:rgba(255,255,255,.90);color:#0f172a;font-size:.5rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.template-site-hero-copy strong{display:block;color:white;font-size:.82rem;line-height:1.12;font-weight:950;text-shadow:0 2px 12px rgba(0,0,0,.32)}
.template-site-body{height:337px;padding:.9rem .95rem 4.85rem;background:#fff;position:relative;overflow:hidden}
.template-site-body::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.92) 78%,#fff 100%);z-index:2;pointer-events:none}
.template-site-lines,.template-site-content-row,.template-site-feature-grid,.template-site-section,.template-site-mini-grid{position:relative;z-index:1}
.template-site-lines span{display:block;height:.42rem;border-radius:999px;background:#d9e0ea;margin-bottom:.36rem}
.template-site-content-row{display:grid;grid-template-columns:1fr .72fr;gap:.65rem;margin-top:.88rem}
.template-site-copy-stack{display:grid;gap:.32rem;align-content:start}.template-site-copy-stack span{height:.42rem;border-radius:999px;background:#dfe6ee}.template-site-copy-stack span:nth-child(1){width:92%}.template-site-copy-stack span:nth-child(2){width:72%}.template-site-copy-stack span:nth-child(3){width:86%}.template-site-copy-stack span:nth-child(4){width:58%}
.template-site-photo-card{height:5.1rem;border-radius:.28rem;background:linear-gradient(135deg,color-mix(in srgb,var(--template-primary) 24%,#dbe3ef),color-mix(in srgb,var(--template-accent) 28%,#eef2f7))}
.template-site-feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.36rem;margin-top:.88rem}
.template-site-feature-grid span{height:3rem;border-radius:.28rem;background:#f4f6f9;border:1px solid rgba(15,23,42,.06)}
.template-site-section{display:grid;grid-template-columns:.95fr 1fr;gap:.55rem;margin-top:.75rem;align-items:stretch}
.template-site-section>span{height:5.6rem;border-radius:.28rem;background:linear-gradient(135deg,color-mix(in srgb,var(--template-primary) 30%,#e2e8f0),color-mix(in srgb,var(--template-accent) 30%,#e2e8f0))}
.template-site-section div{display:grid;gap:.32rem;align-content:center}.template-site-section i{display:block;height:.48rem;border-radius:999px;background:#dbe3ef}.template-site-section i:nth-child(1){width:95%}.template-site-section i:nth-child(2){width:72%}.template-site-section i:nth-child(3){width:84%}
.template-site-mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;margin-top:.75rem}
.template-site-mini-grid span{height:4.1rem;border-radius:.28rem;background:#f1f5f9;border:1px solid rgba(15,23,42,.06)}
.template-site-badge{position:absolute;left:.75rem;top:.72rem;z-index:5;border-radius:.25rem;background:rgba(255,255,255,.92);color:#0f172a;font-size:.56rem;font-weight:950;letter-spacing:.08em;text-transform:uppercase;padding:.28rem .44rem;box-shadow:0 8px 20px rgba(15,23,42,.13)}
.template-portfolio-titlebar{position:absolute;left:.95rem;right:.95rem;bottom:.88rem;z-index:6;min-height:50px;border-radius:.24rem;background:#2452b3;color:white;display:flex;align-items:center;justify-content:space-between;gap:.65rem;padding:.72rem .85rem;font-size:.82rem;line-height:1.12;font-weight:900;box-shadow:0 10px 22px rgba(36,82,179,.28)}
.template-portfolio-titlebar svg{background:rgba(255,255,255,.20);border-radius:.18rem;padding:.14rem;box-sizing:content-box}
@media (min-width:1280px){.template-portfolio-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.template-site-thumb{height:488px}.template-site-body{height:305px}}
@media (max-width:640px){.template-site-thumb{height:470px}.template-site-body{height:287px}}
.showcase-card-premium:hover .template-cover-pattern{transform:scale(1.08) rotate(1deg)}
.template-cover-pattern{
  background:
    radial-gradient(circle at 20% 20%,color-mix(in srgb,var(--template-accent) 70%,transparent),transparent 38%),
    linear-gradient(135deg,var(--template-primary),color-mix(in srgb,var(--template-accent) 78%,#111827));
  transition:transform .6s ease;
}
.template-cover-pattern::before{
  content:'';position:absolute;inset:1rem;border:1px solid rgba(255,255,255,.35);border-radius:1.2rem;
}
.template-cover-pattern.template-school{background:linear-gradient(135deg,#e0f2fe,#16a34a)}
.template-cover-pattern.template-bimbel{background:radial-gradient(circle at 20% 10%,#facc15,transparent 32%),linear-gradient(135deg,#050510,#db2777)}
.template-cover-pattern.template-company{background:linear-gradient(90deg,#fff7ed 0 50%,#111827 50% 100%)}
.template-cover-pattern.template-restaurant{background:linear-gradient(135deg,#190807,#7f1d1d 55%,#d97706)}
.template-cover-pattern.template-property{background:linear-gradient(90deg,#0f172a 0 52%,#e0f2fe 52% 100%)}
.template-cover-pattern.template-clinic{background:linear-gradient(135deg,#f0fdfa,#0f766e)}
.template-cover-pattern.template-travel{background:linear-gradient(135deg,#0c4a6e,#38bdf8 48%,#f97316)}
.template-cover-pattern.template-portfolio{background:linear-gradient(90deg,#f8fafc 0 55%,#111827 55% 100%)}
.template-cover-pattern.template-impact{background:linear-gradient(135deg,#fffbeb,#166534 62%,#f59e0b)}
.template-cover-pattern.template-event{background:linear-gradient(135deg,#0b0718,#6d28d9 56%,#f43f5e)}
.template-cover-pattern.template-saas{background:radial-gradient(circle at 18% 12%,#22c55e,transparent 32%),linear-gradient(135deg,#07111f,#0f172a 52%,#38bdf8)}
.template-cover-pattern.template-legal{background:linear-gradient(90deg,#fbf7ef 0 52%,#3f1d1d 52% 100%)}
.template-cover-pattern.template-auto{background:repeating-linear-gradient(112deg,rgba(255,255,255,.18) 0 2px,transparent 2px 22px),linear-gradient(135deg,#050505,#111827 52%,#ef4444)}
.template-cover-pattern.template-beauty{background:radial-gradient(circle at 72% 18%,#f59e0b,transparent 28%),linear-gradient(135deg,#fff7fb,#be185d)}
.template-cover-pattern.template-fitness{background:linear-gradient(135deg,#050505 0 62%,#a3e635 62% 100%)}
.template-cover-pattern.template-agritech{background:linear-gradient(135deg,#f7fee7,#166534 55%,#0ea5e9)}
.template-cover-pattern.template-hotel{background:linear-gradient(135deg,#0f766e,#fff7ed 58%,#fb7185)}
.template-cover-pattern.template-fashion{background:linear-gradient(90deg,#fff 0 48%,#111827 48% 72%,#ec4899 72% 100%)}
.template-cover-pattern.template-wealth{background:linear-gradient(135deg,#f7f4ea,#064e3b 58%,#d4af37)}
.template-cover-pattern.template-logistics{background:linear-gradient(135deg,#1e3a8a,#bfdbfe 52%,#f97316)}
.template-cover-pattern.template-architecture{background:linear-gradient(90deg,#f8fafc 0 50%,#334155 50% 100%)}
.template-cover-pattern.template-wedding{background:radial-gradient(circle at 72% 20%,#f4b6c2,transparent 28%),linear-gradient(135deg,#fff7f8,#9f1239)}
.template-cover-pattern.template-cyber{background:linear-gradient(135deg,#020617,#0f172a 55%,#06b6d4)}
.template-cover-pattern.template-manufacturing{background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 2px,transparent 2px 28px),linear-gradient(135deg,#1f2937,#f59e0b)}
.template-cover-pattern.template-talent{background:linear-gradient(135deg,#4338ca,#ecfeff 58%,#14b8a6)}

.page-berita .article-hero-premium{
  background:
    radial-gradient(circle at 14% 4%,rgba(79,70,229,.18),transparent 30rem),
    radial-gradient(circle at 86% 8%,rgba(6,182,212,.18),transparent 30rem),
    linear-gradient(180deg,#f8fbff,#eef7ff 48%,#ffffff)!important;
}
.berita-grid{
  background:
    linear-gradient(90deg,rgba(79,70,229,.08) 1px,transparent 1px),
    linear-gradient(0deg,rgba(6,182,212,.08) 1px,transparent 1px);
  background-size:54px 54px;
}
.featured-article-premium{position:relative}
.featured-article-premium::after{
  content:'';position:absolute;inset:auto 2rem -1rem 2rem;height:2rem;border-radius:999px;
  background:linear-gradient(90deg,rgba(79,70,229,.18),rgba(6,182,212,.18));filter:blur(20px);z-index:-1;
}