/*
Theme Name: Diginate
Theme URI: https://diginate.com
Author: Diginate
Description: Tema toko online mewah dan responsif untuk menjual tema WordPress dan produk digital. Ditulis untuk PHP 8.4. Mendukung plugin Diginate Shop dan WooCommerce.
Version: 2.0.0
Requires at least: 6.4
Requires PHP: 8.1
License: GNU General Public License v2 or later
Text Domain: diginate
*/
:root{--bg:#090e0c;--bg2:#101a16;--line:rgba(214,184,120,.18);--tx:#f3efe6;--mut:#9aaba3;--g1:#ecd29a;--g2:#b58f48;--gold:#dcbf82;--on-gold:#17110a;--glow:rgba(214,184,120,.12)}
@media(prefers-color-scheme:light){:root:not([data-theme="dark"]){--bg:#f8f5ee;--bg2:#efe9dc;--line:rgba(120,92,36,.22);--tx:#16231f;--mut:#5a6962;--g1:#c9a45c;--g2:#8a6a2a;--gold:#8a6a2a;--on-gold:#fff;--glow:rgba(138,106,42,.1)}}
:root[data-theme="light"]{--bg:#f8f5ee;--bg2:#efe9dc;--line:rgba(120,92,36,.22);--tx:#16231f;--mut:#5a6962;--g1:#c9a45c;--g2:#8a6a2a;--gold:#8a6a2a;--on-gold:#fff;--glow:rgba(138,106,42,.1)}
*,*:before,*:after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);font:400 17px/1.7 "Plus Jakarta Sans",system-ui,sans-serif;overflow-x:hidden;transition:background .4s,color .4s}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(60% 50% at 80% 0%,var(--glow),transparent 70%),radial-gradient(50% 40% at 0% 60%,var(--glow),transparent 70%);z-index:-1}
h1,h2,h3{font-weight:600;line-height:1.12;margin:0;letter-spacing:-.025em;overflow-wrap:anywhere}
p{overflow-wrap:anywhere}a{color:inherit;text-decoration:none}img,iframe{max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--gold);color:var(--on-gold);padding:8px 14px;z-index:60}.skip:focus{left:8px}
[hidden]{display:none!important}
.wrap{max-width:1180px;margin:0 auto;padding:0 max(24px,env(safe-area-inset-right,0px)) 0 max(24px,env(safe-area-inset-left,0px))}
.gold{background:linear-gradient(120deg,var(--g1),var(--g2));-webkit-background-clip:text;background-clip:text;color:transparent}
#bar{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--g2),var(--g1));z-index:30}
header{position:fixed;top:0;left:0;right:0;z-index:20;padding-top:env(safe-area-inset-top,0px);border-bottom:1px solid transparent;transition:border-color .35s}
header:before{content:"";position:absolute;inset:0;z-index:-1;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);opacity:0;transition:opacity .35s}
header.s{border-color:var(--line)}header.s:before{opacity:1}
.admin-bar header,.admin-bar #bar{top:32px}
@media(max-width:782px){.admin-bar header,.admin-bar #bar{top:46px}}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;height:84px;transition:height .35s}
header.s .nav{height:64px}
.logo{font-weight:700;font-size:22px;letter-spacing:-.02em;white-space:nowrap}
.menu ul{display:flex;gap:34px;list-style:none;margin:0;padding:0;font-size:15px;color:var(--mut)}
.menu a{position:relative;padding:4px 0;transition:color .2s}
.menu a:after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s}
.menu a:hover{color:var(--tx)}.menu a:hover:after{transform:scaleX(1)}
.tools{display:flex;gap:10px;align-items:center}
.ic{width:42px;height:42px;border:1px solid var(--line);background:none;color:var(--tx);cursor:pointer;display:grid;place-items:center;border-radius:50%;font-size:16px;transition:.25s}
.ic:hover{border-color:var(--gold);color:var(--gold)}.burger{display:none}
.btn,.button,.woocommerce a.button,.woocommerce button.button,.woocommerce #respond input#submit{position:relative;display:inline-block;border:1px solid var(--g2);padding:14px 30px;font:600 15px/1.4 "Plus Jakarta Sans",sans-serif;cursor:pointer;background:none;color:var(--tx);border-radius:999px;transition:.3s;text-align:center}
.btn.fill,.woocommerce a.button.alt,.woocommerce button.button.alt{background:linear-gradient(120deg,var(--g1),var(--g2));color:var(--on-gold);border-color:transparent}
.btn.fill:hover{box-shadow:0 10px 30px -8px var(--g2);transform:translateY(-2px)}
.btn:not(.fill):hover,.woocommerce a.button:hover{border-color:var(--g1);color:var(--gold);background:none}
.btn:active{transform:scale(.97)}.sm{padding:10px 20px;font-size:14px}
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:72px;align-items:center;min-height:100vh;min-height:100svh;padding:140px 0 90px}
.hero h1{font-size:clamp(38px,5.6vw,72px)}
.hero p{color:var(--mut);max-width:44ch;margin:26px 0 38px;font-size:18px}
.cta{display:flex;gap:14px;flex-wrap:wrap}
.stats{display:flex;gap:40px;margin-top:56px;padding-top:28px;border-top:1px solid var(--line);flex-wrap:wrap}
.stats b{display:block;font-size:30px;font-weight:600}.stats span{color:var(--mut);font-size:14px}
.stage{perspective:1000px}
.frame{position:relative;border:1px solid var(--line);background:var(--bg2);padding:12px;border-radius:14px;box-shadow:0 50px 100px -40px rgba(0,0,0,.6);transform:translateY(calc(var(--p,0)*-.07px)) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg));transition:transform .15s ease-out}
.frame.float{position:absolute;right:-18px;bottom:-34px;width:46%;transform:translateY(calc(var(--p,0)*-.16px))}
.stage{position:relative}
.dots{display:flex;gap:6px;padding:2px 4px 10px}.dots i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.mock{background:var(--m1,#f4f1ea);color:#111;padding:14px;display:grid;gap:10px;aspect-ratio:4/3;overflow:hidden;align-content:start;border-radius:6px}
.mock .bar{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid #111;padding-bottom:8px;font-weight:700;font-size:14px}
.mock .bar span{width:40px;height:6px;background:var(--m2,#0f3d33)}
.mock .lead{background:var(--m2,#0f3d33);min-height:90px;padding:12px;display:flex;align-items:flex-end;color:#fff;font-weight:700;font-size:14px;line-height:1.2}
.mock .row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.mock .row div{height:40px;background:rgba(0,0,0,.1)}
section.sec{padding:clamp(64px,9vw,120px) 0;border-top:1px solid var(--line)}
.head{margin-bottom:56px;max-width:560px}.head h2{font-size:clamp(32px,4.2vw,50px)}.head p{color:var(--mut);margin:14px 0 0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:clamp(20px,3vw,30px)}
.card{padding:14px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,color-mix(in srgb,var(--bg2) 90%,transparent),transparent);transition:transform .2s ease-out,border-color .3s,box-shadow .4s;display:flex;flex-direction:column}
.card:hover{border-color:var(--g2);box-shadow:0 30px 60px -30px rgba(0,0,0,.55)}
.card .thumb{display:block;border-radius:8px;overflow:hidden;aspect-ratio:4/3;background:var(--bg2)}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.card:hover .thumb img,.card:hover .thumb .mock{transform:scale(1.04)}
.card .thumb .mock{height:100%;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.card h3{font-size:22px;margin:18px 6px 4px}.card small{color:var(--mut);font-size:15px;margin:0 6px;display:block}
.buy{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:auto 6px 6px;padding-top:18px}
.price,.price .amount,.price ins{font-weight:600;font-size:20px;text-decoration:none;color:var(--tx)}.price del{color:var(--mut);font-size:15px;font-weight:400}
.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:clamp(32px,5vw,56px)}
.feat>div{border-top:1px solid var(--line);padding-top:26px;position:relative}
.feat>div:before{content:"";position:absolute;top:-1px;left:0;height:1px;width:0;background:linear-gradient(90deg,var(--g1),var(--g2));transition:width 1.1s .2s cubic-bezier(.2,.7,.2,1)}
.feat>div.in:before{width:100%}.feat h3{font-size:21px;margin-bottom:10px}.feat p{margin:0;color:var(--mut)}
.band{text-align:center}.band h2{font-size:clamp(32px,4.6vw,56px);max-width:18ch;margin:0 auto 18px}.band p{color:var(--mut);margin:0 auto 34px;max-width:44ch}
footer.site{border-top:1px solid var(--line);padding:40px 0;color:var(--mut);font-size:15px}
footer.site .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.content{padding:140px 0 96px;max-width:780px}.content.wide{max-width:1180px}
.content h1{font-size:clamp(32px,4.4vw,52px);margin-bottom:24px}.content h2{margin:1.4em 0 .5em}
.content .meta{color:var(--mut);font-size:14px;margin-bottom:18px}.content a:not(.btn):not(.button){color:var(--gold)}
.content .pimg{border-radius:14px;overflow:hidden;margin-bottom:32px;border:1px solid var(--line)}
.content input,.content select,.content textarea{background:var(--bg2);border:1px solid var(--line);color:var(--tx);padding:12px 14px;font:inherit;border-radius:8px;max-width:100%}
.nav-links{display:flex;gap:10px;margin-top:40px}.nav-links .page-numbers{padding:8px 16px;border:1px solid var(--line);border-radius:999px}.nav-links .current{border-color:var(--gold);color:var(--gold)}
.woocommerce ul.products{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:28px;padding:0}
.woocommerce ul.products:before,.woocommerce ul.products:after{display:none}
.woocommerce ul.products li.product{width:auto!important;margin:0!important;float:none!important}
.woocommerce .price,.woocommerce div.product p.price{color:var(--gold)!important}
.woocommerce-message,.woocommerce-info{background:var(--bg2);color:var(--tx);border-top-color:var(--gold)}
.woocommerce table.shop_table,.woocommerce table.shop_table td,.woocommerce table.shop_table th{border-color:var(--line)}
/* gerak */
.js .rv,.js .grid>.card,.js .feat>div{opacity:0;transform:translateY(34px);filter:blur(6px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),filter .9s;transition-delay:var(--d,0s)}
.js .rv.in,.js .grid>.card.in,.js .feat>div.in{opacity:1;transform:none;filter:none}
.js .grid>.card.in{transition:transform .2s ease-out,border-color .3s,box-shadow .4s,opacity .9s;transition-delay:0s}
/* responsif */
.ci{display:none}
@media(min-width:1600px){body{font-size:18px}.wrap{max-width:1320px}}
@media(max-width:1000px){.hero{grid-template-columns:1fr;gap:64px;min-height:0;padding:124px 0 72px}.stage{max-width:580px;width:100%;margin:0 auto;padding-bottom:30px}}
@media(max-width:900px){.burger{display:grid}
.menu{position:fixed;inset:0;background:var(--bg);display:flex;justify-content:center;align-items:center;opacity:0;pointer-events:none;transition:opacity .35s;z-index:-1}
.menu ul{flex-direction:column;align-items:center;gap:30px;font-size:26px;color:var(--tx)}
.menu.open{opacity:1;pointer-events:auto}.nav{height:68px}.frame.float{right:-6px}}
@media(max-width:640px){.hero{padding:104px 0 56px;gap:48px}.hero p{font-size:17px;margin:20px 0 30px}.stats{margin-top:40px;gap:24px 28px}.stats b{font-size:26px}.head{margin-bottom:36px}.card{padding:12px}footer.site .wrap{flex-direction:column}}
@media(max-width:480px){.wrap{padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}.cw{display:none}.ci{display:inline}.cta{flex-direction:column}.cta .btn{width:100%}.frame.float{width:42%;right:0;bottom:-22px}}
@media(max-width:360px){.logo{font-size:19px}.hero h1{font-size:34px}.buy{flex-wrap:wrap}}
@media(max-height:520px) and (orientation:landscape){.hero{min-height:0;padding:96px 0 48px}}
@media(hover:none){.btn.sm,.ic{min-height:44px}.ic{min-width:44px}.card:hover{border-color:var(--line);box-shadow:none}.card:hover .thumb img,.card:hover .thumb .mock{transform:none}.card:active{transform:scale(.985)}.btn.fill:hover{transform:none;box-shadow:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}.js .rv,.js .grid>.card,.js .feat>div{opacity:1;transform:none;filter:none}}