/* SetorAkun public theme V3.0 — Deep Navy / Neon Cyan / Gold
 * Applied after base style.css on visitor pages only.
 * No external fonts, scripts, trackers or libraries.
 * Existing layout, mobile grid and public form behavior are preserved.
 */
:root{
 --ink:#edf7ff;--muted:#9bb2ce;--navy:#061326;--navy2:#0c2445;
 --blue:#1183ff;--blue2:#0065e5;--green:#00a676;
 --bg:#051124;--line:#25476e;--card:#0c213d;--soft:#0d2a4d;
 --gold:#ffca52;--cyan:#18d9ff;--shadow:0 10px 30px rgba(0,0,0,.19);
}
html{background:#051124;color-scheme:dark}
body{background:radial-gradient(ellipse 67% 26% at 91% 8%,rgba(0,115,255,.13),transparent),linear-gradient(180deg,#061329 0%,#061628 50%,#061323 100%);color:var(--ink)}
a{transition:color .16s,border-color .16s,background-color .16s}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.topbar{background:rgba(3,14,32,.98);border-bottom:1px solid rgba(39,199,255,.35);box-shadow:0 2px 20px #0006;}
.topbar:after{content:"";position:absolute;bottom:-1px;left:6%;right:6%;height:1px;background:linear-gradient(90deg,transparent,rgba(18,211,255,.5),rgba(251,194,83,.36),transparent);pointer-events:none}
.brand{font-size:22px;letter-spacing:-.8px;color:#fff}
.brand-blue{color:#59b8ff}.brand small{color:#a2dfff}
.brand-symbol{background:linear-gradient(145deg,#1be5ff,#1466e9 78%);box-shadow:0 0 0 1px #6cdeff69,0 0 17px #008dff58;color:white}
.mainnav a{color:#c1d7ee}.mainnav a:hover,.mainnav a.active{background:#1469ca2b;color:#e8fbff;box-shadow:inset 0 -2px #35d5ff}
.btn{font-weight:830}
.btn-blue{background:linear-gradient(110deg,#007afa,#0b5bce);color:#fff;box-shadow:0 1px 0 #36e5ff3d inset}
.btn-blue:hover{background:#126bda}
.btn-white,.nav-cta,.hero-actions .btn-white{background:linear-gradient(110deg,#ffe39a,#f6b32d);color:#142037;border:1px solid #ffe3a4;box-shadow:0 3px 14px #e2a21b26}
.btn-white:hover,.nav-cta:hover{background:#ffd46e}
.btn-outline,.btn-outline-light{background:#0a1c34;border:1px solid #2784b4;color:#d1edff}
.btn-outline:hover,.btn-outline-light:hover{background:#11375b;border-color:#35deff}
.btn-muted{background:#163457;color:#d6eaff}
.hero{background:linear-gradient(90deg,#071833ee 0%,#091d3de0 48%,#09152cb3 100%),url("esports-pattern.svg") center/cover no-repeat; border:1px solid #2067a5;border-radius:20px;box-shadow:0 13px 40px #0008,0 0 30px #045bd61a inset;}
.hero:after{border-color:#2ccfff19;box-shadow:0 0 0 44px #0ad8ff05,0 0 0 90px #ffcd4104}
.hero-kicker,.eyebrow{color:#3fe1ff}
.hero h1{color:#fff;text-shadow:0 2px 4px #0004}
.hero h1 span{color:#3cb7ff}
.hero p,.hero-caption{color:#cadff7}
.hero-supplier{color:#75dbff}
.hero-visual{background:linear-gradient(145deg,#082245,#06142b);border:1px solid #35ccff;box-shadow:0 0 25px #009dff30,0 15px 36px #0008;color:#e9f5ff;transform:rotate(2deg)}
.visual-top{color:#fff}.visual-top span{color:#56cbff}.visual-line{background:#34648a}
.visual-row .icon{color:#39d8ff}.visual-check{color:#48ebc4}
.visual-pill{background:#073d3d;color:#6af4d6}
.route-card{background:linear-gradient(145deg,#0d2548,#06182e);border:1px solid #24517b;box-shadow:0 9px 22px #0004;color:#f0f7ff}
.route-card:hover{border-color:#2dd6ff;box-shadow:0 0 0 1px #1fcaff70,0 8px 25px #0005}
.route-card>.icon{color:#5ed8ff}.route-card small{color:#a7c7e3}
.route-icon.blue{background:#103762;color:#28dcff}.route-icon.green{background:#093e43;color:#26dfb8}.route-icon.orange{background:#49361c;color:#ffd26c}
.section-head h2,.page-heading h1{color:#f3f8ff}.section-head p,.page-heading p{color:#9db9d5}
.section-head a,.inline-link{color:#45dcff}.section-head a:hover,.inline-link:hover{color:#ffe3a0}
.game-tile{background:linear-gradient(#102e51,#091d36);border:1px solid #255984;color:#f2f9ff;box-shadow:0 4px 15px #0004}
.game-tile:hover{border-color:#47dbff;box-shadow:0 0 0 1px #00d5ff40,0 7px 20px #001325}
.game-shape{background:#16406b;color:#4fdcff}
.game-tile:has(.game-logo) .game-shape{background:#0c2546}
.game-tile:has(.game-logo)>span:last-child{background:#0a213d}
.listing-card{background:linear-gradient(180deg,#102849,#061a32);border:1px solid #25618c;box-shadow:0 5px 21px #0006}
.listing-card:hover{border-color:#4fbeff;box-shadow:0 8px 28px #00111e}
.card-media{background:#0b3254}.game-pill{background:#eaf8ff;color:#093459;font-weight:900}
.card-info{color:#eaf4ff}.card-title{color:#f8fbff}.card-spec{color:#9ac3e7}
.card-price,.detail-price{color:#ffca52!important;text-shadow:0 1px 0 #0003}
.card-seller{color:#9fc2e5}
.btn-green{background:linear-gradient(95deg,#059873,#00b885);color:#fff}.btn-green:hover{background:#00a87b}
.btn-card{border:1px solid #1eddaa5c}
.empty-state{background:#0b223e;border-color:#28557c;color:#edf8ff}
.empty-state p{color:#9fc0da}
.steps{background:linear-gradient(135deg,#0b2a4f,#071c34);border-color:#23639b}
.steps p{color:#a7c8e7}.steps-list>div{background:#0b1e35;border:1px solid #244c70}.steps-list b{color:#ffce66}.steps-list small{color:#9abbdd}
.footer{background:#030e1d;border-top:1px solid #14416f;color:#dbeeff}
.footer p,.footgrid a,.copyright{color:#a1bbd8}.footgrid b{color:#fff}.copyright{border-top-color:#234363}
.page-pad{color:#e6f4ff}
.page-heading{border-bottom:1px solid #154367;padding-bottom:16px}
.filterbar,.form-card,.detail-side,.summary-grid>div{background:#0b2039;border:1px solid #25527c;box-shadow:0 8px 25px #0004}
.search-input{background:#08182d;border-color:#326389;color:#dcefff}
.search-input .icon{color:#5fcaff}.search-input input{color:#f0faff}
input::placeholder,textarea::placeholder{color:#8fa9c6;opacity:1}
.filterbar select,.field input,.field select,.field textarea,.inline-form input,.row-form select{background:#08182c;border:1px solid #315c82;color:#f0f9ff}
.field input:focus,.field textarea:focus,.field select:focus,.search-input:focus-within{border-color:#1bcffb;box-shadow:0 0 0 2px #0dcfff26;outline:0}
.field small,.field>span,.muted,.small,.hint,.microcopy,.results-count{color:#a6c3df}
.form-card h2,.form-card h3,.form-card-head>b{color:#f3f9ff}
.form-card-head>b span{color:#092a4f;background:#58ceff}
.choice-card{background:#0c213e;border-color:#31557a;color:#eff9ff}
.choice-card:has(input:checked){background:#0d3151;border-color:#20cefb;box-shadow:0 0 0 1px #1fb7f85e}
.choice-card small{color:#acccdf}.choice-card input{accent-color:#1bd1ff}
.choice-icon{background:#11416a;color:#4edbff}
.spec-fields{background:#0b2744;border:1px solid #20476a}
.uploadbox{background:#071b33;border-color:#2d78a8;color:#e3f5ff}
.uploadbox:hover{border-color:#1ce5ff}
.checkline,.secure-note,.notice{color:#cee6f6}
.secure-note,.notice{background:#103457;border:1px solid #2a7297}
.notice.error{background:#512a2c;border-color:#944b54;color:#ffe4e2}
.checkline input{accent-color:#20c7ff}
.form-aside .side-panel{background:#0d2848;border:1px solid #26577f;color:#d6edff}
.form-aside .side-panel p,.form-aside .side-panel small{color:#afd0e9}
.side-step span{color:#ffcc60}
.side-panel.side-soft{background:#0b2742}
.seller-edit{border-color:#30618a;background:#07192f}
.seller-edit summary{color:#66dcff}
.status{background:#163555;color:#c4e3ff}.status.baru{background:#4a3b1c;color:#ffdb7d}.status.ditawar{background:#173f6b;color:#75d9ff}.status.disetujui,.status.aktif,.status.selesai{background:#0e513f;color:#83ffd4}.status.ditolak,.status.ditutup,.status.terjual,.status.disembunyikan{background:#522732;color:#ffb2bd}
.summary-grid strong{color:#ffd264}
.breadcrumbs{color:#8bbce4}.detail-gallery img{border-color:#2c5b81;background:#09223d}
.seller-block{background:#09223d;border-color:#2b557a}.seller-block .icon{color:#59c9ff}.seller-block small{color:#a3bed7}
.spec-table>div{border-color:#294567}.spec-table dt{color:#a6c1d9}
.detail-side{border-color:#2673a5}.detail-side h1{color:#fff}
.rekber-hero{background:linear-gradient(115deg,#061a36e8,#0a2c57d1),url('esports-pattern.svg') center/cover no-repeat;border:1px solid #1d9ede;box-shadow:0 7px 35px #0004}
.rekber-hero p{color:#c7e8fb}
.step-stack>div>span{background:#0d4773;color:#74edff}
.step-stack small{color:#a8c2dd}
.spec-table dd,.body-copy{color:#e7f8ff}
.form-card>p{color:#b9d0e5}
.form-card hr{border-color:#345170}
.breadcrumbs a{color:#51dbff}
.report-link{color:#ffb2ac}
.status,.game-pill{white-space:nowrap}
/* small screen: retain original 4-across games / 2-across listings */
@media(max-width:700px){
 body{background:linear-gradient(180deg,#07172b,#061528)}
 .topbar{background:#041329}
 .brand{font-size:19px}
 .hero{background:radial-gradient(circle at 100% 3%,#1765a364,transparent 60%),linear-gradient(120deg,#0a2651,#06162f);border-color:#23659b;box-shadow:none}
 .hero:after{opacity:.35}
 .route-card{background:#0b223f}
 .game-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 .listing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .bottomnav{background:#081a30;border-top:1px solid #25547c;box-shadow:0 -5px 18px #0005}
 .bottomnav>a{color:#a8c7e5}.bottomnav .icon{color:#56cfff}
 .form-card{padding:16px}.form-layout{grid-template-columns:1fr}
 .form-aside{display:none}
 .field input,.field select,.field textarea{font-size:16px}
 .detail-side{position:static}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}.btn:hover{transform:none}}
/* Detail contrast polish for all public transactional pages */
.uploadbox small{color:#a1c6e5}.side-step span{background:#17446e;color:#86e9ff}
.side-soft a{color:#61deff}.side-soft>.icon{color:#ffd16b}
.hint,.microcopy{color:#a9c6de}
.bulk-list{background:#0b2441;border-color:#2a628e;color:#e7f5ff}
.bulk-list th{background:#103b60;color:#effaff}
.bulk-list td,.bulk-list th{border-color:#315577}.bulk-list p{color:#accce5}
.photo-preview img{border-color:#3672a3}
.status.baru,.status.ditawar{border:1px solid #3a6385}
.breadcrumbs a:hover{color:#f9d67f}
.notice{color:#d5f0ff}
.form-card .seller-edit{background:#0a223c}

/* V3.1 — real, optimized gaming-art hero, only on visitor-facing pages.
 * Preserve the existing layout, forms, admin UI and mobile performance. */
@media (min-width:701px) {
 .hero {
   background-image:linear-gradient(90deg,rgba(2,13,30,.77) 0%,rgba(3,15,34,.37) 53%,rgba(3,15,34,.12) 100%),url("hero-esports-v31.webp");
   background-position:center;
   background-size:cover;
   background-repeat:no-repeat;
   border-color:#18bdff;
   box-shadow:inset 0 0 28px #00bfff20,0 10px 26px #0007;
 }
 .hero-visual{background:linear-gradient(145deg,rgba(6,24,48,.94),rgba(5,16,33,.97));backdrop-filter:blur(3px)}
}
@media(max-width:700px){
 .hero{background:radial-gradient(circle at 100% 3%,#1765a364,transparent 60%),linear-gradient(120deg,#0a2651,#06162f);}
}

/* V3.2 - Reframe esports artwork so the character is not hidden by the offer card.
 * Desktop hero only; no JS, no new media, and no change to the mobile layout.
 * Keep the existing optimized asset hero-esports-v31.webp.
 */
@media (min-width:701px) {
  .hero {
    background-color:#061529;
    background-image:
      linear-gradient(90deg,rgba(3,15,35,.90) 0%,rgba(3,15,35,.55) 43%,rgba(3,15,35,.10) 60%,rgba(3,15,35,.60) 100%),
      url("hero-esports-v31.webp"),
      url("esports-pattern.svg");
    background-position:center,13% center,center;
    background-size:100% 100%,auto 98%,cover;
    background-repeat:no-repeat;
    border-color:#19b7ff;
    box-shadow:inset 0 0 28px rgba(0,188,255,.14),0 10px 30px rgba(0,0,0,.42);
  }
  .hero-visual {background:linear-gradient(145deg,rgba(4,20,42,.94),rgba(3,15,32,.97));}
}

/* V3.3 — seamless hero artwork. No box edges, title stays legible.
   Leaves all existing page functionality, mobile layout, and admin untouched. */
@media (min-width:701px) {
  .hero {
    isolation:isolate;
    background-color:#06152a;
    background-image:
      radial-gradient(ellipse at 79% 39%,rgba(0,113,205,.14),transparent 56%),
      linear-gradient(100deg,#041329 0%,#091f3b 59%,#07203c 100%),
      url('esports-pattern.svg');
    background-size:100% 100%,100% 100%,cover;
    background-position:center;
  }
  .hero::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background-image:url('hero-esports-v31.webp');
    background-position:55% center;
    background-size:auto 105%;
    background-repeat:no-repeat;
    opacity:.85;
    -webkit-mask-image:linear-gradient(90deg, transparent 0%,transparent 36%,rgba(0,0,0,.25) 50%,#000 66%,#000 76%,transparent 96%);
    mask-image:linear-gradient(90deg, transparent 0%,transparent 36%,rgba(0,0,0,.25) 50%,#000 66%,#000 76%,transparent 96%);
  }
  .hero::after{z-index:1;pointer-events:none;}
  .hero-content,.hero-visual{position:relative;z-index:2;}
  .hero-content{filter:drop-shadow(0 2px 4px rgba(2,10,20,.15));}
}
@media (max-width:700px){
 .hero::before{content:none;}
}


/* V3.4 — Mobile gaming theme: lightweight mobile-specific artwork.
   Keep game cards 4 per row, listing cards 2 per row, and all forms unchanged.
   Character is decorative only; gradients ensure readable text. */
@media (max-width:700px) {
  body {
    background:
      radial-gradient(ellipse 85% 20% at 97% 11%,rgba(0,170,255,.13),transparent 75%),
      radial-gradient(ellipse 75% 13% at 4% 56%,rgba(6,95,224,.11),transparent 80%),
      linear-gradient(180deg,#06162b 0%,#061324 100%);
  }
  .hero {
    isolation:isolate;
    background:
      linear-gradient(130deg,rgba(2,13,32,.15),rgba(0,100,204,.12)),
      url('esports-pattern.svg') center/cover no-repeat,
      linear-gradient(125deg,#06152e,#07325b 76%,#07192f);
    border-color:#188cce;
    box-shadow:inset 0 0 26px rgba(3,145,255,.13),0 7px 20px rgba(0,0,0,.25);
  }
  .hero::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    display:block;
    opacity:.56;
    background-image:url('hero-esports-mobile-v34.webp');
    background-position:right -24px top -18px;
    background-size:auto 83%;
    background-repeat:no-repeat;
    -webkit-mask-image:linear-gradient(90deg,transparent 3%,rgba(0,0,0,.26) 35%,#000 95%);
    mask-image:linear-gradient(90deg,transparent 3%,rgba(0,0,0,.26) 35%,#000 95%);
  }
  .hero::after {
    z-index:0;
    pointer-events:none;
    opacity:.3;
  }
  .hero-content {position:relative;z-index:1;}
  .hero h1,.hero p,.hero-caption {text-shadow:0 1px 9px rgba(1,9,25,.68);}
  .route-card {border-color:#2077a8;box-shadow:inset 0 1px rgba(54,220,255,.10);}
  .route-card:nth-child(3){border-color:#8b6b31;}
  .hero-actions .btn-white {box-shadow:0 3px 12px rgba(245,185,54,.21);}
}