/* =========================================================
   ZYNN STORE — CYBER NEON TOTAL REDESIGN V5
   Target: index.php + digital-store.php
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@600;700&family=Inter:wght@500;600;700;800;900&display=swap');

:root{
  --z-bg:#020613;
  --z-bg2:#050b1f;
  --z-panel:rgba(5,12,32,.72);
  --z-panel2:rgba(8,20,48,.62);
  --z-line:rgba(66,245,255,.24);
  --z-line2:rgba(177,87,255,.22);
  --z-text:#f4fbff;
  --z-muted:#8ea2bf;
  --z-cyan:#35f6ff;
  --z-blue:#1688ff;
  --z-purple:#9d46ff;
  --z-pink:#ff3df2;
  --z-green:#2fffbd;
  --z-card:rgba(5,12,30,.78);
  --z-radius:24px;
  --z-shadow:0 28px 90px rgba(0,0,0,.60), 0 0 80px rgba(25,128,255,.10);
}

*{box-sizing:border-box!important}
html{background:var(--z-bg)!important;scroll-behavior:smooth!important}
html,body{min-height:100%;overflow-x:hidden!important}
body{
  margin:0!important;
  color:var(--z-text)!important;
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;
  background:
    radial-gradient(circle at 14% 5%, rgba(44,241,255,.22), transparent 26%),
    radial-gradient(circle at 87% 1%, rgba(174,58,255,.24), transparent 28%),
    radial-gradient(circle at 58% 56%, rgba(19,105,255,.16), transparent 34%),
    linear-gradient(180deg,#030716 0%,#061127 46%,#02040e 100%)!important;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;
  background-image:
    linear-gradient(rgba(54,246,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54,246,255,.045) 1px, transparent 1px),
    radial-gradient(circle at 18% 30%, rgba(54,246,255,.22) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 20%, rgba(157,70,255,.28) 0 1px, transparent 2px);
  background-size:48px 48px,48px 48px,88px 88px,76px 76px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.26));
}
body::after{
  content:"";position:fixed;inset:-20%;z-index:-2;pointer-events:none;opacity:.65;
  background:
    conic-gradient(from 110deg at 15% 60%, transparent 0 67%, rgba(44,241,255,.18), transparent 74%),
    conic-gradient(from 220deg at 88% 28%, transparent 0 70%, rgba(255,61,242,.13), transparent 78%);
  filter:blur(28px);animation:zAurora 13s ease-in-out infinite alternate;
}
@keyframes zAurora{0%{transform:translate3d(-1%,0,0) rotate(-1deg)}100%{transform:translate3d(2%,1%,0) rotate(2deg)}}

/* Ambient particles injected by JS */
.z-particle{position:fixed;z-index:-1;width:3px;height:3px;border-radius:999px;background:var(--z-cyan);box-shadow:0 0 14px var(--z-cyan);opacity:.45;animation:zParticle 8s linear infinite;pointer-events:none}
@keyframes zParticle{from{transform:translateY(20vh);opacity:0}15%{opacity:.55}to{transform:translateY(-110vh);opacity:0}}

/* main wrappers */
body > *:not(script):not(style){position:relative;z-index:1}
a{color:inherit}

/* ================= HEADER LIKE THE MOCKUP ================= */
.navbar,.navbar-digital{
  width:min(100% - 28px,1280px)!important;
  margin:18px auto 0!important;
  height:74px!important;
  display:grid!important;
  grid-template-columns:auto 1fr auto!important;
  align-items:center!important;
  gap:22px!important;
  padding:0 20px!important;
  border-radius:30px!important;
  border:1px solid rgba(67,246,255,.22)!important;
  background:linear-gradient(180deg,rgba(7,17,42,.78),rgba(4,10,26,.70))!important;
  box-shadow:0 20px 80px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.12), 0 0 70px rgba(23,136,255,.12)!important;
  backdrop-filter:blur(22px)!important;-webkit-backdrop-filter:blur(22px)!important;
  position:sticky!important;top:12px!important;z-index:1000!important;
  overflow:visible!important;
}
.navbar::before,.navbar-digital::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(110deg,rgba(53,246,255,.80),transparent 32%,rgba(157,70,255,.55) 67%,rgba(53,246,255,.50));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
}
.brand,.nav-brand{display:flex!important;align-items:center!important;gap:12px!important;font-family:'Rajdhani','Inter',sans-serif!important;font-size:22px!important;font-weight:700!important;letter-spacing:.02em!important;color:#fff!important;text-shadow:0 0 18px rgba(53,246,255,.34)!important;min-width:max-content!important}
.brand-logo,.nav-logo{width:48px!important;height:48px!important;border-radius:16px!important;object-fit:cover!important;box-shadow:0 0 0 1px rgba(53,246,255,.28),0 0 28px rgba(53,246,255,.35)!important;background:#020715!important}
.brand-logo{content:url('../cyber-v4/zynn-logo.svg')!important}
.nav-logo{content:url('../cyber-v4/zynn-logo.svg')!important}
.cyber-menu{display:flex;align-items:center;justify-content:center;gap:30px;min-width:0}
.cyber-menu a{position:relative;text-decoration:none;color:rgba(238,248,255,.70);font-size:13px;font-weight:800;letter-spacing:.01em;transition:.2s ease}
.cyber-menu a:hover,.cyber-menu a.active{color:#fff;text-shadow:0 0 14px rgba(53,246,255,.65)}
.cyber-menu a.active::after,.cyber-menu a:hover::after{content:"";position:absolute;left:50%;bottom:-24px;width:48px;height:3px;border-radius:9px;background:linear-gradient(90deg,var(--z-cyan),var(--z-purple));transform:translateX(-50%);box-shadow:0 0 18px var(--z-cyan)}
.nav-right,.nav-user{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:12px!important;min-width:max-content!important}
#userBox{display:none!important}
#navUserBtn,.nav-user-pill,.nav-login-btn,.nav-right a[href*="google-login"]{
  height:46px!important;padding:0 16px 0 7px!important;border-radius:999px!important;border:1px solid rgba(113,209,255,.32)!important;
  background:linear-gradient(180deg,rgba(15,31,68,.82),rgba(5,11,26,.88))!important;color:#fff!important;text-decoration:none!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 28px rgba(22,136,255,.13)!important;backdrop-filter:blur(15px)!important;
  display:inline-flex!important;align-items:center!important;gap:9px!important;font-weight:900!important;font-size:13px!important;cursor:pointer!important;
}
#navUserBtn img,.nav-user-avatar{width:34px!important;height:34px!important;border-radius:999px!important;object-fit:cover!important;border:1px solid rgba(53,246,255,.32)!important;box-shadow:0 0 18px rgba(53,246,255,.24)!important}
.nav-user-initial{width:34px!important;height:34px!important;border-radius:999px!important;display:grid!important;place-items:center!important;background:linear-gradient(135deg,var(--z-blue),var(--z-purple))!important;color:#fff!important;font-weight:900!important}
#navUserMenu{background:rgba(3,8,21,.94)!important;border:1px solid rgba(53,246,255,.25)!important;border-radius:20px!important;box-shadow:0 22px 70px rgba(0,0,0,.55),0 0 42px rgba(53,246,255,.12)!important;backdrop-filter:blur(20px)!important;overflow:hidden!important;min-width:220px!important}
#navUserMenu a,#navUserMenu div{font-family:'Inter',sans-serif!important}

/* ================= SEARCH ================= */
.search-wrapper,.ds-search-wrap{width:min(100% - 28px,1280px)!important;margin:18px auto 22px!important;padding:0!important;position:relative!important}
.search-wrapper::before,.ds-search-wrap::before{content:"\f002";font-family:'Font Awesome 6 Free';font-weight:900;position:absolute;left:21px;top:50%;transform:translateY(-50%);z-index:2;color:var(--z-cyan);font-size:14px;text-shadow:0 0 16px rgba(53,246,255,.65)}
#searchInput,.ds-search{
  width:100%!important;height:62px!important;padding:0 22px 0 52px!important;border-radius:24px!important;outline:none!important;
  color:#eefbff!important;background:linear-gradient(180deg,rgba(13,31,70,.72),rgba(4,11,29,.72))!important;
  border:1px solid rgba(80,222,255,.24)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 20px 52px rgba(0,0,0,.28)!important;
  backdrop-filter:blur(18px)!important;font-size:15px!important;font-weight:800!important;transition:.25s ease!important;
}
#searchInput::placeholder,.ds-search::placeholder{color:rgba(222,239,255,.46)!important}
#searchInput:focus,.ds-search:focus{border-color:rgba(53,246,255,.72)!important;box-shadow:0 0 0 4px rgba(53,246,255,.10),0 0 48px rgba(53,246,255,.15)!important}

/* ================= HERO / BANNER ================= */
.banner-wrapper{width:min(100% - 28px,1280px)!important;margin:0 auto!important;padding:0!important;display:block!important}
.banner-slider{
  position:relative!important;width:100%!important;aspect-ratio:16/6.8!important;min-height:330px!important;border-radius:36px!important;overflow:hidden!important;
  border:1px solid rgba(53,246,255,.24)!important;background:#030817!important;box-shadow:var(--z-shadow), inset 0 1px 0 rgba(255,255,255,.10), 0 0 90px rgba(53,246,255,.09)!important;
}
.banner-slider::before{content:"PREMIUM DIGITAL PRODUCTS";position:absolute;left:64px;top:64px;z-index:4;color:var(--z-cyan);font-family:'Rajdhani';font-weight:700;letter-spacing:.42em;font-size:14px;text-shadow:0 0 16px rgba(53,246,255,.75)}
.banner-slider::after{content:"Premium Apps\A Unlimited Power\A Akses aplikasi premium terbaik dengan harga paling hemat.";white-space:pre-line;position:absolute;left:64px;top:104px;z-index:4;width:min(420px,48%);font-family:'Inter';font-weight:900;font-size:clamp(32px,4.1vw,64px);line-height:.98;letter-spacing:-.06em;color:#fff;text-shadow:0 4px 34px rgba(0,0,0,.45)}
.banner-track{display:flex!important;height:100%!important;transition:transform .75s cubic-bezier(.2,.8,.2,1)!important}
.banner-item{position:relative!important;min-width:100%!important;height:100%!important;display:block!important;text-decoration:none!important;background:#040a18!important}
.banner-item:nth-child(1) img{content:url('../cyber-v4/hero-zynn-cyber.png')!important}
.banner-item:nth-child(2) img{content:url('../cyber-v4/banner-cyber-2.png')!important}
.banner-item:nth-child(3) img{content:url('../cyber-v4/banner-cyber-3.png')!important}
.banner-item:nth-child(4) img{content:url('../cyber-v4/banner-cyber-4.png')!important}
.banner-item img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;filter:saturate(1.15) contrast(1.08) brightness(.95)!important;transform:scale(1.006);animation:zHeroFloat 8s ease-in-out infinite alternate!important;pointer-events:none!important}
@keyframes zHeroFloat{to{transform:scale(1.04) translate3d(-8px,-4px,0)}}
.banner-arrow{position:absolute!important;top:50%!important;transform:translateY(-50%)!important;width:52px!important;height:52px!important;border-radius:999px!important;z-index:7!important;border:1px solid rgba(53,246,255,.25)!important;background:rgba(4,10,24,.72)!important;color:#fff!important;font-size:34px!important;display:grid!important;place-items:center!important;line-height:1!important;box-shadow:0 14px 38px rgba(0,0,0,.38),0 0 28px rgba(53,246,255,.14)!important;backdrop-filter:blur(14px)!important;cursor:pointer!important;transition:.22s ease!important}
.banner-arrow:hover{background:rgba(15,38,81,.84)!important;box-shadow:0 0 38px rgba(53,246,255,.25)!important}
.banner-arrow.left{left:26px!important}.banner-arrow.right{right:26px!important}
.banner-arrow:active{transform:translateY(-50%) scale(.94)!important}

/* ================= TABS ================= */
.tab-switch,.ds-tabs{width:min(100% - 28px,1280px)!important;margin:26px auto 24px!important;padding:7px!important;border-radius:999px!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;background:rgba(255,255,255,.065)!important;border:1px solid rgba(53,246,255,.18)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 20px 52px rgba(0,0,0,.30)!important;backdrop-filter:blur(18px)!important}
.tab-btn,.ds-tab{height:54px!important;border:0!important;border-radius:999px!important;background:transparent!important;color:rgba(225,239,255,.62)!important;font-size:15px!important;font-weight:950!important;text-decoration:none!important;display:flex!important;align-items:center!important;justify-content:center!important;letter-spacing:-.015em!important;cursor:pointer!important;transition:.26s ease!important;position:relative!important;overflow:hidden!important}
.tab-btn::before,.ds-tab::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--z-cyan),#36a9ff,var(--z-purple));opacity:0;border-radius:inherit;transition:.25s ease;box-shadow:0 0 34px rgba(53,246,255,.32)}
.tab-btn.active,.ds-tab.active{color:#02101e!important;text-shadow:none!important}
.tab-btn.active::before,.ds-tab.active::before{opacity:1}.tab-btn>*{position:relative}.tab-btn,.ds-tab{z-index:1}.tab-btn::after,.ds-tab::after{content:"";position:absolute;inset:1px;border-radius:inherit;background:linear-gradient(110deg,rgba(255,255,255,.34),transparent 35%,rgba(255,255,255,.1));opacity:.35;mix-blend-mode:screen}

/* ================= SECTIONS + TITLES ================= */
.section{width:min(100% - 28px,1280px)!important;max-width:1280px!important;margin:0 auto!important;padding:0 0 64px!important}
.section h2,.ds-section-title{position:relative!important;margin:28px 0 20px!important;color:#fff!important;font-size:clamp(26px,3vw,42px)!important;line-height:1!important;font-weight:950!important;letter-spacing:-.065em!important;text-shadow:0 0 24px rgba(53,246,255,.16)!important}
.section h2::before,.ds-section-title::before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--z-cyan);box-shadow:0 0 18px var(--z-cyan);margin-right:12px;vertical-align:middle;transform:rotate(45deg)}
.section h2::after,.ds-section-title::after{content:"";display:block;width:118px;height:4px;border-radius:99px;margin-top:16px;background:linear-gradient(90deg,var(--z-cyan),var(--z-purple),transparent);box-shadow:0 0 24px rgba(53,246,255,.65)}

/* ================= HOMEPAGE PRODUCT CARDS ================= */
.grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:18px!important;margin-bottom:46px!important}
.card{position:relative!important;isolation:isolate!important;overflow:hidden!important;border-radius:26px!important;cursor:pointer!important;background:linear-gradient(180deg,rgba(12,27,63,.78),rgba(4,10,25,.86))!important;border:1px solid rgba(53,246,255,.22)!important;box-shadow:0 24px 62px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.11)!important;transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,border-color .28s ease!important;min-height:286px!important;display:flex!important;flex-direction:column!important;align-items:stretch!important}
.card::before{content:"";position:absolute;inset:-1px;z-index:-1;background:radial-gradient(circle at 10% 0,rgba(53,246,255,.26),transparent 36%),radial-gradient(circle at 100% 20%,rgba(157,70,255,.22),transparent 38%);opacity:.95;transition:.28s ease!important}
.card::after{content:"Lihat Produk  →";position:absolute;left:22px;right:22px;bottom:20px;height:42px;border-radius:999px;background:linear-gradient(90deg,rgba(157,70,255,.78),rgba(0,181,255,.76));border:1px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-weight:950;font-size:13px;color:#fff;box-shadow:0 0 24px rgba(53,246,255,.20);opacity:.98;transition:.25s ease!important}
.card:hover{transform:translateY(-10px) scale(1.018)!important;border-color:rgba(53,246,255,.62)!important;box-shadow:0 36px 100px rgba(0,0,0,.55),0 0 46px rgba(53,246,255,.14)!important}.card:hover::after{box-shadow:0 0 38px rgba(53,246,255,.36);filter:brightness(1.12)}
.card img{width:100%!important;height:154px!important;aspect-ratio:auto!important;object-fit:contain!important;display:block!important;margin:0!important;padding:30px!important;background:linear-gradient(180deg,rgba(2,7,18,.62),rgba(3,9,24,.24))!important;filter:drop-shadow(0 18px 26px rgba(0,0,0,.45)) saturate(1.08)!important;transition:transform .32s ease!important;pointer-events:none!important}.card:hover img{transform:scale(1.08) rotate(-1deg)}
.card span{display:block!important;min-height:92px!important;padding:14px 20px 70px!important;text-align:left!important;color:#fff!important;background:transparent!important;font-size:20px!important;font-weight:950!important;line-height:1.05!important;letter-spacing:-.045em!important;position:relative!important}.card span::after{content:"Resmi • Premium";display:block;margin-top:8px;color:var(--z-cyan);font-size:13px;font-weight:800;letter-spacing:0;text-shadow:0 0 14px rgba(53,246,255,.38)}

/* ================= DIGITAL STORE ================= */
.app{width:100%!important;max-width:none!important;margin:0!important;padding:0 0 80px!important;background:transparent!important;color:var(--z-text)!important}
.ds-search-wrap{margin-top:18px!important}
.wallet-card{position:relative!important;overflow:hidden!important;width:min(100% - 28px,1280px)!important;margin:0 auto 24px!important;padding:34px!important;border-radius:36px!important;background:linear-gradient(135deg,rgba(8,18,47,.92),rgba(6,19,48,.78))!important;border:1px solid rgba(53,246,255,.22)!important;box-shadow:var(--z-shadow),inset 0 1px 0 rgba(255,255,255,.12)!important;backdrop-filter:blur(20px)!important}
.wallet-card::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,8,22,.22),rgba(3,8,22,.66)),url('../cyber-v4/hero-zynn-cyber.png') center right/auto 100% no-repeat;opacity:.9;pointer-events:none}.wallet-card::after{content:"";position:absolute;width:360px;height:360px;right:-100px;top:-120px;border-radius:50%;background:radial-gradient(circle,rgba(53,246,255,.42),transparent 65%);animation:zOrb 7s ease-in-out infinite alternate;pointer-events:none}@keyframes zOrb{to{transform:translate(-30px,36px) scale(1.12)}}
.wallet-card>*{position:relative;z-index:2}.wallet-top{display:flex!important;justify-content:space-between!important;align-items:flex-start!important;gap:18px!important;margin-bottom:28px!important}.wallet-user{font-size:13px!important;color:rgba(235,248,255,.68)!important;font-weight:800!important}.wallet-top div[style*="font-weight"]{font-family:'Rajdhani','Inter'!important;font-size:clamp(22px,3vw,34px)!important;line-height:1!important;font-weight:700!important;letter-spacing:.02em!important;text-transform:uppercase!important;color:#fff!important;text-shadow:0 0 26px rgba(53,246,255,.20)!important}.wallet-badge{border-radius:999px!important;border:1px solid rgba(53,246,255,.26)!important;background:rgba(255,255,255,.08)!important;color:#eaffff!important;padding:10px 16px!important;font-size:12px!important;font-weight:950!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.10)!important;white-space:nowrap!important}.wallet-balance-label{color:rgba(235,248,255,.62)!important;font-weight:850!important;font-size:13px!important;margin-bottom:10px!important}.wallet-balance-value{font-family:'Rajdhani','Inter'!important;font-size:clamp(44px,7vw,82px)!important;line-height:.9!important;font-weight:700!important;letter-spacing:-.025em!important;color:#fff!important;text-shadow:0 0 38px rgba(53,246,255,.28)!important;margin-bottom:26px!important}.wallet-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,220px))!important;gap:14px!important}.wallet-btn{height:56px!important;border-radius:18px!important;border:1px solid rgba(255,255,255,.18)!important;background:linear-gradient(90deg,var(--z-cyan),var(--z-purple))!important;color:#031020!important;font-size:15px!important;font-weight:950!important;box-shadow:0 16px 40px rgba(53,246,255,.18)!important;cursor:pointer!important;transition:.22s ease!important}.wallet-btn.secondary{background:rgba(4,9,23,.45)!important;color:#fff!important;border-color:rgba(122,219,255,.28)!important}.wallet-btn:hover{transform:translateY(-3px)!important;filter:brightness(1.12)!important;box-shadow:0 0 38px rgba(53,246,255,.28)!important}
.ds-service-row{width:min(100% - 28px,1280px)!important;margin:0 auto 30px!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important}.ds-service-link{text-decoration:none!important;color:inherit!important}.ds-service-box{min-height:92px!important;border-radius:24px!important;padding:18px!important;display:flex!important;align-items:center!important;gap:16px!important;background:linear-gradient(180deg,rgba(12,27,63,.78),rgba(4,10,25,.86))!important;border:1px solid rgba(53,246,255,.20)!important;box-shadow:0 20px 54px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.10)!important;transition:.25s ease!important}.ds-service-box:hover{transform:translateY(-6px)!important;border-color:rgba(53,246,255,.56)!important;box-shadow:0 28px 70px rgba(0,0,0,.42),0 0 38px rgba(53,246,255,.16)!important}.ds-service-icon{width:58px!important;height:58px!important;border-radius:18px!important;background:linear-gradient(135deg,rgba(53,246,255,.18),rgba(157,70,255,.18))!important;border:1px solid rgba(53,246,255,.24)!important;display:grid!important;place-items:center!important;box-shadow:0 0 32px rgba(53,246,255,.12)!important;flex:0 0 auto!important}.ds-service-icon img{width:38px!important;height:38px!important;object-fit:contain!important;filter:drop-shadow(0 0 14px rgba(53,246,255,.40))}.ds-service-title{font-size:17px!important;font-weight:950!important;color:#fff!important;line-height:1.1!important;letter-spacing:.02em!important}.ds-service-text::after{content:"Aktivasi instan";display:block;color:rgba(234,246,255,.58);font-size:12px;font-weight:700;margin-top:5px}.ds-service-link:nth-child(2) .ds-service-text::after{content:"Followers & Likes"}.ds-service-arrow{margin-left:auto!important;font-size:32px!important;color:var(--z-cyan)!important;text-shadow:0 0 18px rgba(53,246,255,.45)}
.ds-grid{width:min(100% - 28px,1280px)!important;margin:0 auto 58px!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:18px!important}.ds-card{position:relative!important;overflow:hidden!important;border-radius:26px!important;text-decoration:none!important;color:#fff!important;background:linear-gradient(180deg,rgba(12,27,63,.78),rgba(4,10,25,.86))!important;border:1px solid rgba(53,246,255,.20)!important;box-shadow:0 24px 62px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.11)!important;transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,border-color .28s ease!important}.ds-card::before{content:"";position:absolute;inset:-1px;background:radial-gradient(circle at 20% 0,rgba(53,246,255,.22),transparent 35%),radial-gradient(circle at 90% 15%,rgba(157,70,255,.18),transparent 38%);opacity:.8;pointer-events:none}.ds-card:hover{transform:translateY(-10px) scale(1.016)!important;border-color:rgba(53,246,255,.58)!important;box-shadow:0 36px 100px rgba(0,0,0,.55),0 0 48px rgba(53,246,255,.16)!important}.ds-media{position:relative!important;aspect-ratio:16/10!important;background:#030814!important;overflow:hidden!important}.ds-media img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;filter:saturate(1.14) contrast(1.06)!important;transition:.35s ease!important}.ds-card:hover .ds-media img{transform:scale(1.07)!important}.ds-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(3,8,21,.92));pointer-events:none}.ds-meta{position:relative!important;padding:18px 18px 70px!important;min-height:132px!important;background:transparent!important}.ds-title{font-size:20px!important;line-height:1.05!important;font-weight:950!important;color:#fff!important;letter-spacing:-.045em!important;margin-bottom:9px!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important}.ds-title::after{content:"Resmi • Premium";display:block;color:var(--z-cyan);font-size:13px;font-weight:800;letter-spacing:0;margin-top:8px;text-shadow:0 0 14px rgba(53,246,255,.38)}.ds-price{display:flex!important;flex-direction:column!important;gap:4px!important}.price-old{font-size:12px!important;color:rgba(190,205,225,.62)!important;text-decoration:line-through!important;font-weight:800!important}.price-new{position:absolute!important;left:18px!important;right:18px!important;bottom:18px!important;height:42px!important;border-radius:999px!important;background:linear-gradient(90deg,rgba(157,70,255,.78),rgba(0,181,255,.76))!important;display:flex!important;align-items:center!important;justify-content:center!important;color:#fff!important;font-size:14px!important;font-weight:950!important;box-shadow:0 0 24px rgba(53,246,255,.22)!important;text-shadow:none!important}.flash-badge,.bestseller-badge{position:absolute!important;z-index:5!important;border-radius:999px!important;border:1px solid rgba(255,255,255,.22)!important;box-shadow:0 10px 24px rgba(0,0,0,.32)!important;font-size:10px!important;font-weight:950!important;letter-spacing:.02em!important;padding:7px 10px!important;backdrop-filter:blur(12px)!important}.flash-badge{top:12px!important;left:12px!important;background:linear-gradient(135deg,#ff3d71,#ffb020)!important;color:#fff!important}.bestseller-badge{top:12px!important;right:12px!important;background:linear-gradient(135deg,#8b5cf6,#35f6ff)!important;color:#fff!important}.flash-timer{width:min(100% - 28px,1280px)!important;margin:0 auto 16px!important;border-radius:18px!important;padding:14px 18px!important;background:rgba(255,61,113,.11)!important;border:1px solid rgba(255,61,113,.25)!important;color:#fff!important;font-weight:950!important;box-shadow:0 0 26px rgba(255,61,113,.14)!important}

/* ================= FLOATING HELP ================= */
#cs-pill,#cs-bubble{position:fixed!important;z-index:99999!important;right:26px!important;bottom:26px!important;background:linear-gradient(90deg,rgba(53,246,255,.94),rgba(157,70,255,.94))!important;color:#031020!important;border-radius:999px!important;border:1px solid rgba(255,255,255,.24)!important;box-shadow:0 22px 62px rgba(0,0,0,.38),0 0 42px rgba(53,246,255,.28)!important;backdrop-filter:blur(18px)!important;cursor:pointer!important}#cs-pill{min-width:270px!important;height:72px!important;display:flex!important;align-items:center!important;gap:13px!important;padding:0 20px!important}.cs-avatar{width:44px!important;height:44px!important;border-radius:999px!important;background:rgba(3,8,21,.82)!important;color:#fff!important;display:grid!important;place-items:center!important;box-shadow:0 0 28px rgba(3,8,21,.45)!important}.cs-title{font-size:16px!important;font-weight:950!important;color:#031020!important}.cs-sub{font-size:12px!important;font-weight:800!important;color:rgba(3,16,32,.74)!important}#cs-bubble{width:64px!important;height:64px!important;display:none!important;align-items:center!important;justify-content:center!important}.show{opacity:1!important;transform:translateY(0) scale(1)!important}.hide{opacity:0!important;transform:translateY(12px) scale(.96)!important;pointer-events:none!important}

/* ================= FOOTER / MODAL ================= */
.zy-footer{width:min(100% - 28px,1280px)!important;margin:20px auto 80px!important;border-radius:30px!important;background:linear-gradient(180deg,rgba(9,21,50,.70),rgba(3,8,21,.78))!important;border:1px solid rgba(53,246,255,.18)!important;box-shadow:0 24px 70px rgba(0,0,0,.35)!important;backdrop-filter:blur(18px)!important;overflow:hidden!important;color:#dcecff!important}.zy-footer a{color:#dcecff!important}.zy-footer-title,.zy-footer-heading{color:#fff!important;text-shadow:0 0 18px rgba(53,246,255,.22)!important}.deposit-overlay{backdrop-filter:blur(16px)!important;background:rgba(1,4,12,.72)!important}.deposit-modal{border-radius:28px!important;background:linear-gradient(180deg,rgba(9,21,50,.96),rgba(3,8,21,.98))!important;border:1px solid rgba(53,246,255,.24)!important;box-shadow:0 32px 100px rgba(0,0,0,.62),0 0 60px rgba(53,246,255,.13)!important;color:#fff!important}.deposit-input,.nominal-item{background:rgba(255,255,255,.07)!important;border:1px solid rgba(53,246,255,.20)!important;color:#fff!important;border-radius:16px!important}.deposit-submit{background:linear-gradient(90deg,var(--z-cyan),var(--z-purple))!important;color:#031020!important;border:0!important;border-radius:18px!important;font-weight:950!important}.deposit-close{color:#fff!important;background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:12px!important}

/* Animated reveal */
.z-reveal{opacity:0!important;transform:translateY(26px) scale(.985)!important;transition:opacity .75s ease, transform .75s cubic-bezier(.2,.8,.2,1)!important}.z-reveal.z-in{opacity:1!important;transform:translateY(0) scale(1)!important}

/* ================= RESPONSIVE ================= */
@media (max-width: 1060px){
  .cyber-menu{display:none!important}.navbar,.navbar-digital{grid-template-columns:auto auto!important;justify-content:space-between!important;width:calc(100% - 24px)!important;height:68px!important;margin-top:10px!important;padding:0 14px!important;border-radius:24px!important}.brand,.nav-brand{font-size:18px!important}.brand-logo,.nav-logo{width:44px!important;height:44px!important;border-radius:15px!important}.grid,.ds-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.banner-slider{aspect-ratio:16/8!important;min-height:280px!important}.banner-slider::before{left:38px;top:40px}.banner-slider::after{left:38px;top:78px;width:54%;font-size:44px}.wallet-card{padding:28px!important}.wallet-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width: 720px){
  body{background:
    radial-gradient(circle at 0 0, rgba(53,246,255,.22), transparent 34%),
    radial-gradient(circle at 100% 18%, rgba(157,70,255,.20), transparent 34%),
    linear-gradient(180deg,#041024 0%,#06142c 42%,#02050f 100%)!important;}
  .navbar,.navbar-digital{top:8px!important;width:calc(100% - 20px)!important;height:62px!important;border-radius:22px!important;padding:0 12px!important;gap:8px!important}.brand span,.nav-brand-text{font-size:17px!important}.brand-logo,.nav-logo{width:40px!important;height:40px!important;border-radius:14px!important}#navUserBtn,.nav-user-pill,.nav-login-btn,.nav-right a[href*="google-login"]{height:42px!important;padding:0 12px 0 5px!important;font-size:12px!important;max-width:132px!important}#navUserBtn img,.nav-user-avatar,.nav-user-initial{width:32px!important;height:32px!important}.search-wrapper,.ds-search-wrap{width:calc(100% - 20px)!important;margin:14px auto 18px!important}#searchInput,.ds-search{height:58px!important;border-radius:20px!important;font-size:14px!important}.banner-wrapper{width:calc(100% - 20px)!important}.banner-slider{aspect-ratio:16/9!important;min-height:0!important;border-radius:26px!important}.banner-slider::before{left:22px;top:22px;font-size:9px;letter-spacing:.32em}.banner-slider::after{left:22px;top:48px;width:54%;font-size:clamp(22px,7.8vw,34px);line-height:1.02}.banner-arrow{width:42px!important;height:42px!important;font-size:28px!important}.banner-arrow.left{left:12px!important}.banner-arrow.right{right:12px!important}.tab-switch,.ds-tabs{width:calc(100% - 20px)!important;margin:20px auto 20px!important}.tab-btn,.ds-tab{height:48px!important;font-size:14px!important}.section{width:calc(100% - 20px)!important;padding-bottom:42px!important}.section h2,.ds-section-title{font-size:27px!important;margin:24px 0 18px!important}.grid,.ds-grid{width:100%!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}.card{min-height:238px!important;border-radius:22px!important}.card img{height:124px!important;padding:22px!important}.card span{font-size:16px!important;padding:12px 14px 62px!important}.card::after{left:14px;right:14px;bottom:14px;height:38px;font-size:12px}.wallet-card{width:calc(100% - 20px)!important;border-radius:26px!important;padding:22px!important}.wallet-card::before{background:linear-gradient(90deg,rgba(3,8,22,.30),rgba(3,8,22,.78)),url('../cyber-v4/hero-zynn-cyber.png') center right/auto 100% no-repeat}.wallet-top{margin-bottom:22px!important}.wallet-badge{font-size:11px!important;padding:8px 10px!important;max-width:150px!important;overflow:hidden;text-overflow:ellipsis}.wallet-balance-value{font-size:42px!important}.wallet-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}.wallet-btn{height:48px!important;border-radius:16px!important}.ds-service-row{width:calc(100% - 20px)!important;gap:12px!important}.ds-service-box{min-height:80px!important;padding:12px!important;border-radius:20px!important}.ds-service-icon{width:50px!important;height:50px!important;border-radius:16px!important}.ds-service-title{font-size:13px!important}.ds-service-text::after{font-size:11px}.ds-service-arrow{font-size:24px!important}.ds-grid{width:calc(100% - 20px)!important}.ds-card{border-radius:22px!important}.ds-media{aspect-ratio:1/1!important}.ds-meta{padding:14px 14px 62px!important;min-height:122px!important}.ds-title{font-size:16px!important}.price-new{left:14px!important;right:14px!important;bottom:14px!important;height:38px!important;font-size:13px!important}#cs-pill{right:18px!important;bottom:18px!important;height:62px!important;min-width:238px!important;padding:0 14px!important}.cs-avatar{width:40px!important;height:40px!important}.cs-title{font-size:14px!important}.cs-sub{font-size:11px!important}.zy-footer{width:calc(100% - 20px)!important;margin-bottom:76px!important;border-radius:24px!important}
}
@media (max-width: 390px){.brand span,.nav-brand-text{max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.grid,.ds-grid{gap:12px!important}.card{min-height:226px!important}.card img{height:112px!important;padding:20px!important}.wallet-balance-value{font-size:38px!important}.banner-slider::after{font-size:24px}.banner-slider::before{font-size:8px}.ds-service-title{font-size:12px!important}.ds-service-icon{width:46px!important;height:46px!important}.ds-service-icon img{width:31px!important;height:31px!important}}

/* home desktop composition: hero + balance card like the mockup */
.cyber-home-hero{width:min(100% - 28px,1280px)!important;margin:0 auto!important;display:grid!important;grid-template-columns:minmax(0,1.92fr) minmax(320px,.82fr)!important;gap:22px!important;align-items:stretch!important}
.cyber-home-hero .banner-wrapper{width:100%!important;margin:0!important}.cyber-home-hero .banner-slider{min-height:390px!important;height:100%!important;aspect-ratio:auto!important}.cyber-balance-card{position:relative;overflow:hidden;border-radius:34px;border:1px solid rgba(53,246,255,.24);background:linear-gradient(180deg,rgba(11,25,60,.76),rgba(3,8,21,.90));box-shadow:var(--z-shadow),inset 0 1px 0 rgba(255,255,255,.12);padding:28px;min-height:390px;backdrop-filter:blur(20px);isolation:isolate}.cyber-balance-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 9%,rgba(53,246,255,.34),transparent 25%),radial-gradient(circle at 28% 60%,rgba(157,70,255,.22),transparent 38%);z-index:-2}.cyber-balance-card::after{content:"";position:absolute;left:22px;right:22px;bottom:112px;height:88px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 130'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop stop-color='%2335f6ff'/%3E%3Cstop offset='.55' stop-color='%239d46ff'/%3E%3Cstop offset='1' stop-color='%23ff3df2'/%3E%3C/linearGradient%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='4'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M0 94 C52 86 62 44 106 55 C151 67 153 102 199 72 C250 39 252 78 286 58 C326 34 334 3 375 20 C401 31 399 54 420 49' fill='none' stroke='url(%23g)' stroke-width='5' filter='url(%23b)' opacity='.72'/%3E%3Cpath d='M0 94 C52 86 62 44 106 55 C151 67 153 102 199 72 C250 39 252 78 286 58 C326 34 334 3 375 20 C401 31 399 54 420 49' fill='none' stroke='url(%23g)' stroke-width='2.5'/%3E%3C/svg%3E") center/100% 100% no-repeat;opacity:.86;pointer-events:none}.cyber-chip{display:inline-flex;padding:8px 12px;border-radius:999px;border:1px solid rgba(53,246,255,.22);background:rgba(255,255,255,.07);color:var(--z-cyan);font-size:12px;font-weight:950;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 0 18px rgba(53,246,255,.14)}.cyber-balance-card h3{margin:20px 0 10px;font-size:17px;color:rgba(239,249,255,.82);font-weight:900}.cyber-balance-card strong{display:block;font-family:'Rajdhani','Inter';font-size:clamp(44px,4vw,60px);line-height:.9;color:#fff;text-shadow:0 0 32px rgba(53,246,255,.30)}.cyber-balance-card p{margin:18px 0 84px;color:rgba(223,238,255,.65);line-height:1.55;font-size:14px;font-weight:650}.cyber-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}.cyber-actions a{height:52px;border-radius:17px;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:14px;font-weight:950;border:1px solid rgba(255,255,255,.16)}.cyber-actions a:first-child{background:linear-gradient(90deg,var(--z-cyan),var(--z-purple));color:#031020;box-shadow:0 0 28px rgba(53,246,255,.22)}.cyber-actions a:last-child{background:rgba(255,255,255,.055);color:#fff}.cyber-quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.cyber-quick-grid a{text-decoration:none;border-radius:18px;border:1px solid rgba(53,246,255,.18);background:rgba(255,255,255,.055);padding:13px;min-height:82px;color:#fff;display:grid;gap:4px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08);transition:.25s ease}.cyber-quick-grid a:hover{transform:translateY(-4px);border-color:rgba(53,246,255,.52);box-shadow:0 0 32px rgba(53,246,255,.13)}.cyber-quick-grid i{color:var(--z-cyan);font-size:20px;text-shadow:0 0 16px rgba(53,246,255,.5)}.cyber-quick-grid span{font-weight:950;font-size:13px}.cyber-quick-grid small{font-size:11px;color:rgba(223,238,255,.56);font-weight:700}.cyber-stats-strip{width:min(100% - 28px,1280px);margin:24px auto 44px;border-radius:24px;border:1px solid rgba(53,246,255,.18);background:linear-gradient(180deg,rgba(12,27,63,.64),rgba(4,10,25,.80));box-shadow:0 24px 62px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.10);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;overflow:hidden;backdrop-filter:blur(18px)}.cyber-stats-strip div{min-height:86px;display:grid;grid-template-columns:44px auto;grid-template-rows:1fr 1fr;align-content:center;column-gap:12px;padding:18px 22px;border-right:1px solid rgba(255,255,255,.07)}.cyber-stats-strip div:last-child{border-right:0}.cyber-stats-strip i{grid-row:1/3;width:44px;height:44px;border-radius:15px;display:grid!important;place-items:center;background:linear-gradient(135deg,rgba(53,246,255,.16),rgba(157,70,255,.16));color:var(--z-cyan);text-shadow:0 0 16px rgba(53,246,255,.45)}.cyber-stats-strip strong{font-size:22px;line-height:1;color:#fff;font-weight:950}.cyber-stats-strip span{font-size:12px;color:rgba(223,238,255,.62);font-weight:750}.cyber-home-hero .banner-slider::after{width:min(410px,44%)}
@media(max-width:1060px){.cyber-home-hero{grid-template-columns:1fr!important;width:calc(100% - 24px)!important}.cyber-home-hero .banner-slider{min-height:280px!important;aspect-ratio:16/8!important}.cyber-balance-card{min-height:0}.cyber-stats-strip{width:calc(100% - 24px);grid-template-columns:repeat(2,minmax(0,1fr))}.cyber-stats-strip div:nth-child(2){border-right:0}.cyber-stats-strip div:nth-child(1),.cyber-stats-strip div:nth-child(2){border-bottom:1px solid rgba(255,255,255,.07)}}
@media(max-width:720px){.cyber-home-hero{width:calc(100% - 20px)!important;gap:18px!important}.cyber-home-hero .banner-slider{aspect-ratio:16/9!important;min-height:0!important}.cyber-balance-card{display:none}.cyber-stats-strip{width:calc(100% - 20px);grid-template-columns:repeat(2,minmax(0,1fr));border-radius:20px;margin:18px auto 32px}.cyber-stats-strip div{min-height:76px;padding:14px;grid-template-columns:36px auto;column-gap:10px}.cyber-stats-strip i{width:36px;height:36px;border-radius:12px}.cyber-stats-strip strong{font-size:18px}.cyber-stats-strip span{font-size:11px}}