/* TUNAI4D : website editorial dan katalog game 2026 / local-first */
:root{--green:#086c43;--emerald:#16b970;--forest:#073b2c;--deep:#09291f;--gold:#d9b256;--ink:#19342e;--muted:#576b64;--border:#dae6df;--surface:#ffffff;--canvas:#f3f8f4;--shadow:0 9px 27px rgba(12,55,38,.10)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--canvas);color:var(--ink);font:15px/1.75 system-ui,-apple-system,"Segoe UI",Arial,sans-serif;padding-bottom:76px}a{color:#0b7750;text-decoration:none}a:hover{text-decoration:underline}img{max-width:100%;height:auto}button,input,select{font:inherit}button{cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #c68b1c;outline-offset:3px}::selection{background:#a6f4c8;color:#062e1e}[hidden]{display:none!important}.container{width:min(1180px,calc(100% - 40px));margin-inline:auto}.skip{position:absolute;top:6px;left:-9999px;background:white;color:black;padding:8px 12px;z-index:1000}.skip:focus{left:10px}
.tinybar{background:#091e19;color:#d7eee1;border-bottom:2px solid #c4a155}.top-inner{min-height:46px;display:flex;gap:20px;align-items:center;justify-content:space-between}.site-id{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:850;color:white}.site-id img{width:27px;height:27px;object-fit:contain}.market-label{color:#f0d28f;letter-spacing:.10em;font-size:10px}.tiny-links{display:flex;gap:16px;align-items:center;font-size:12px}.tiny-links a{color:#d7eadd}.tiny-links .top-action{color:#052e1b;background:#dcca7a;padding:5px 13px;border-radius:3px;font-weight:900}.masthead{background:linear-gradient(#fff,#f6fbf8);border-bottom:1px solid #dce8e1}.mast-inner{display:flex;align-items:center;gap:25px;padding-block:14px;min-height:101px}.brandmark{flex:0 0 300px;display:block}.brandmark img{width:300px;max-height:72px;object-fit:contain}.searchform{display:flex;flex:1;min-width:0;overflow:hidden;background:white;border:1px solid #bdd6ca;border-radius:5px;box-shadow:0 4px 12px #0b4c2c12}.searchform input{flex:1;min-width:0;border:0;padding:13px 17px;outline:none;color:var(--ink);background:transparent}.searchform button{border:0;background:#0a6943;color:white;font-weight:800;padding:0 25px}.hamburger{display:none;background:#0b573a;border:0;color:white;border-radius:5px;padding:10px 13px;font-weight:750}
.category-nav{background:linear-gradient(115deg,#063d2b,#0c5a3d);border-bottom:4px solid var(--gold)}.category-inner{display:flex;align-items:stretch;justify-content:space-between}.category-inner a{display:block;color:#f0fff4;padding:12px 12px;font-size:13px;line-height:1.2;font-weight:760;white-space:nowrap}.category-inner a:hover,.category-inner a[aria-current=page]{background:#d9b45d;color:#0b3021;text-decoration:none}
.market-ribbon{background:#e8f3ea;border-bottom:1px solid #cfe0d5}.market-ribbon-inner{min-height:56px;display:flex;gap:18px;align-items:center;justify-content:space-between}.ribbon-copy{display:flex;gap:13px;align-items:center;font-size:13px;color:#405b4e}.ribbon-copy strong{color:#07583a;letter-spacing:.04em}.ribbon-actions{display:flex;gap:9px}.ribbon-actions a{font-size:12px;font-weight:850;border-radius:4px;padding:7px 15px;background:#cda84f;color:#142a1e}.ribbon-actions a:first-child{background:#086b43;color:white}
.announcement{margin:20px 0 18px;border-radius:5px;display:flex;align-items:center;min-height:42px;gap:0;background:#fff;border:1px solid #dce9de;overflow:hidden;box-shadow:0 3px 13px #1854340d}.ann-label{background:#0a6943;color:white;align-self:stretch;display:flex;align-items:center;padding:0 14px;font-weight:800;font-size:12px;white-space:nowrap}.ticker{flex:1;min-width:0;white-space:nowrap;overflow:hidden;font-size:13px;color:#36574a}.ticker span{display:inline-block;white-space:nowrap;animation:marquee 31s linear infinite;padding-left:20px}@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.breadcrumb{display:flex;gap:9px;flex-wrap:wrap;margin:19px 0 10px;color:#6c8275;font-size:12px}.breadcrumb a{color:#567869}.page-title{font-size:clamp(25px,3vw,37px);font-weight:850;line-height:1.25;letter-spacing:-.025em;margin:0 0 13px;border-left:5px solid var(--gold);padding-left:15px}.meta-row{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;color:#597266;font-size:12px;margin-bottom:21px;padding:10px 13px;background:#e8f1ea;border:1px solid #dbe8df;border-radius:5px}.tag{display:inline-block;padding:4px 9px;background:#0a7250;color:#fff;font-size:11px;letter-spacing:.04em;font-weight:850;border-radius:3px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:26px;align-items:start}.main-column,.side-column{min-width:0}.hero-frame{border:4px solid #cba650;background:#082f23;padding:13px;border-radius:7px;box-shadow:0 11px 29px #093e2b30}.hero-image{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;border-radius:3px}.gallery-label{margin-top:12px;border-left:4px solid var(--gold);background:#0f5138;color:#fce5a0;padding:10px 13px;display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:12px}.gallery-label span{color:#d8f3e0}.gallery-picks{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}.gallery-pick{border:2px solid #cbdacf;border-radius:7px;overflow:hidden;padding:3px;background:#fff;cursor:pointer;display:flex;align-items:center;gap:8px;text-align:left;font-size:11px;font-weight:750;color:#245844}.gallery-pick img{width:60px;aspect-ratio:1;object-fit:cover;flex:none;border-radius:3px}.gallery-pick.is-active{border-color:#0c9156;box-shadow:0 0 0 2px #22af6d25}.hero-quick{display:flex;gap:10px;margin:13px 0 0}.btn{display:inline-flex;justify-content:center;align-items:center;gap:7px;text-align:center;border-radius:5px;padding:12px 18px;font-weight:850;font-size:13px;text-decoration:none!important;transition:transform .16s,box-shadow .16s}.btn:hover{transform:translateY(-2px);box-shadow:0 5px 16px #113f2d26}.hero-quick .btn{flex:1}.btn-green{background:#087d4c;color:white!important;border:1px solid #06623e}.btn-gold{background:linear-gradient(180deg,#ffda77,#dfad3d);color:#173324!important;border:1px solid #bd912e}.btn-outline{background:white;border:1px solid #bad1bf;color:#17613b!important}.btn-block{display:flex;width:100%;margin-top:11px}
.summary{margin:19px 0;background:linear-gradient(120deg,#093f31,#116c4c);border:1px solid #0b4e39;color:#fff;padding:23px 26px;border-radius:6px;box-shadow:var(--shadow)}.summary h2{font-size:21px;margin:0 0 8px;line-height:1.35;color:#fff}.summary p{margin:0;color:#eafbef}.story-tabs{display:flex;overflow-x:auto;background:white;border:1px solid #e1e7e2;border-radius:5px;margin:22px 0 18px}.story-tabs a{padding:11px 17px;border-right:1px solid #e5ede7;color:#3d6753;white-space:nowrap;font-size:13px;font-weight:750}.story-tabs a:hover{background:#edfaef;text-decoration:none}.section-heading{font-size:23px;line-height:1.3;margin:25px 0 14px;background:white;border-left:5px solid var(--gold);padding:13px 16px;border-radius:4px}.colorbox{padding:24px 27px;border-radius:5px;margin:14px 0;color:white;box-shadow:0 7px 18px #16412c20;border-left:5px solid #e8bf6d}.colorbox h2,.colorbox h3{color:white;font-size:20px;line-height:1.35;margin:0 0 12px}.colorbox p{color:#fff;margin:0 0 12px;line-height:1.86}.colorbox p:last-child{margin-bottom:0}.colorbox ul{padding-left:20px;margin:8px 0}.colorbox li{line-height:1.75;margin:8px 0}.tone-forest{background:#144f3b}.tone-teal{background:#176066}.tone-navy{background:#243f59}.tone-plum{background:#4b3e69}.tone-brown{background:#685136}.tone-slate{background:#314e56}.tipnote{background:#fff7e4;border-left:4px solid var(--gold);padding:16px 19px;border-radius:3px;margin:18px 0;color:#634f28}.middle-ticker{background:#123c30;border:1px solid #186342;color:#f2d78a;border-radius:4px;overflow:hidden;white-space:nowrap;padding:10px 0;margin:20px 0;font-weight:750;font-size:12px}.middle-ticker span{display:inline-block;padding-left:100%;animation:midflow 29s linear infinite}@keyframes midflow{to{transform:translateX(-100%)}}
.card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:17px 0 22px}.content-card{display:block;border:1px solid #d7e6d9;border-radius:6px;overflow:hidden;background:white;box-shadow:0 3px 14px #153a270b;transition:transform .16s,box-shadow .16s;color:#214d3b}.content-card:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 9px 22px #153a2720}.content-card .strip{height:8px;background:linear-gradient(90deg,#0c8a55,#d6b15f)}.content-card:nth-child(3n+2) .strip{background:linear-gradient(90deg,#116567,#45ba9f)}.content-card:nth-child(3n+3) .strip{background:linear-gradient(90deg,#8c6b30,#d5be66)}.content-card-content{padding:17px 18px}.content-card small{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#6a8a78;font-weight:800}.content-card h3{font-size:16px;line-height:1.38;color:#193d2d;margin:8px 0}.content-card p{color:#60746a;font-size:13px;line-height:1.7;margin:0 0 9px}.content-card span{font-size:12px;font-weight:850;color:#057448}.section-kicker{color:#0a8054;font-size:12px;letter-spacing:.08em;font-weight:900;text-transform:uppercase}.panel{background:white;border:1px solid #d8e5da;border-radius:6px;overflow:hidden;box-shadow:var(--shadow);margin-bottom:16px}.panel-head{background:linear-gradient(100deg,#0a4a37,#116849);padding:14px 19px;color:#fff;border-bottom:3px solid var(--gold)}.panel-body{padding:18px}.panel-head strong{font-size:15px}.panel p{color:#596e61;font-size:13px}.panel .slogan{color:#0c8658;font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}.panel .value{font-size:25px;line-height:1.2;color:#204634;font-weight:850;margin:8px 0}.features{list-style:none;padding:0;margin:16px 0}.features li{display:flex;gap:8px;align-items:flex-start;margin:10px 0;font-size:12px;color:#52685d}.features li:before{content:'✓';color:#15885a;font-weight:900}.side-links a{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid #ebf0ed;padding:10px 0;font-size:13px;font-weight:760}.side-links a:last-child{border-bottom:0}.panel-note{background:#f5faf5;padding:16px 18px;font-size:12px;color:#5d7466}
.footer-main{background:#092a20;color:#e8f5e9;border-top:5px solid var(--gold);padding:35px 0 22px;margin-top:42px}.footer-cols{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:30px}.footer-cols img{width:235px}.footer-cols p{color:#c2d9ca;font-size:13px}.footer-cols h3{color:#ffdf86;margin:0 0 10px;font-size:16px}.footer-cols ul{margin:0;padding:0;list-style:none}.footer-cols li{margin:7px 0}.footer-cols a{color:#d0e7d6;font-size:13px}.copyright{border-top:1px solid #275242;color:#a9c5b3;margin-top:24px;padding-top:16px;font-size:12px;line-height:1.7}.sticky-actions{z-index:100;position:fixed;bottom:0;left:0;right:0;background:rgba(7,34,25,.97);border-top:3px solid #d5b156;box-shadow:0 -6px 20px #072a1b2e;padding:7px max(8px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom));display:flex;justify-content:center;gap:8px}.sticky-actions a{display:flex;gap:8px;align-items:center;justify-content:center;min-height:44px;max-width:240px;flex:1;border:1px solid #c3a24e;background:linear-gradient(120deg,#0b6845,#10492f);border-radius:5px;color:white;font-size:12px;font-weight:850;letter-spacing:.06em;text-align:center}.sticky-actions a:hover{background:#d6b057;color:#073c2b;text-decoration:none}.sticky-actions svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;flex:none}
.directory-toolbar{display:flex;gap:12px;align-items:center;margin:15px 0}.directory-search{border:1px solid #ceded2;flex:1;max-width:530px;padding:12px 15px;border-radius:5px;background:#fff}.directory-select{padding:12px;background:white;border:1px solid #ceded2;border-radius:5px;color:#244b38}.search-count{font-size:13px;color:#597160;font-weight:700;margin:9px 0}.empty{padding:25px;text-align:center;border:1px dashed #c9daca;background:white;color:#4f6f5e;border-radius:5px}.category-feature{padding:22px 24px;background:#fff;border:1px solid #dbe9df;border-radius:6px;margin:18px 0;color:#405e4d}.category-feature h2{margin:0 0 10px}.article-body .lead{font-size:16px;line-height:1.95;color:#315342;background:white;border:1px solid #dbe9e0;padding:22px 24px;border-radius:5px}.article-body section{scroll-margin-top:22px}.article-body h2{font-size:23px;line-height:1.35;margin:27px 0 13px;border-left:4px solid var(--gold);padding-left:12px}.article-body p{margin:11px 0;line-height:1.95;color:#3f584a}.article-body .editorial-box{background:#fff;border:1px solid #dbe8df;border-radius:6px;padding:17px 23px;margin:14px 0}.article-body .editorial-box h2{font-size:19px;margin:6px 0 10px}.article-body .editorial-box p{margin:8px 0}.article-body .editorial-box:nth-of-type(2n){background:#f3faf4}.article-body .aside{background:#e4f2e8;border-left:5px solid #159960;border-radius:5px;padding:18px 21px;margin:18px 0;color:#244c38}.article-body .aside h2{margin:0 0 10px;font-size:19px;border:0;padding:0}.article-body .aside p{margin:0;color:#375748}.article-body .steps{background:#0b4b37;color:white;border-radius:5px;padding:22px 25px;margin:20px 0}.article-body .steps h2{border:0;margin:0 0 13px;padding:0;color:#fff;font-size:19px}.article-body .steps ol{margin:0;padding-left:23px}.article-body .steps li{margin:8px 0;line-height:1.8}.article-navigation{display:flex;gap:10px;flex-wrap:wrap;margin:25px 0}.article-navigation a{padding:10px 13px;border:1px solid #cbdacf;background:white;color:#1b6647;border-radius:4px;font-size:12px;font-weight:800}.faq-list{display:grid;gap:10px;margin:15px 0}.faq-list details{background:white;border:1px solid #d4e4d6;border-radius:6px;overflow:hidden}.faq-list summary{cursor:pointer;padding:15px 18px;font-weight:800;color:#123f2d;background:#f5faf6;list-style:none;display:flex;justify-content:space-between;gap:12px}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary:after{content:'+';font-size:22px;line-height:1;color:#b58827}.faq-list details[open] summary:after{content:'−'}.faq-list details p{padding:3px 18px 18px;margin:0;color:#4c6654}.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0}.info-tile{background:#fff;border:1px solid #d8e7dc;border-top:4px solid #c8a34b;border-radius:5px;padding:18px 20px}.info-tile h3{font-size:16px;margin:0 0 8px}.info-tile p{color:#587060;font-size:13px;margin:0}.notfound{max-width:800px;margin:70px auto;min-height:45vh}.quiet{font-size:13px;color:#607568}.small-link{font-size:12px;font-weight:700}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media(max-width:1080px){.category-inner{overflow-x:auto;justify-content:start}.category-inner a{padding:12px 11px}.layout{grid-template-columns:minmax(0,1fr) 270px;gap:18px}.brandmark{flex-basis:260px}.brandmark img{width:260px}}
@media(max-width:760px){body{padding-bottom:74px;font-size:14px}.container{width:calc(100% - 28px)}.tiny-links .extra{display:none}.top-inner{min-height:40px}.mast-inner{flex-wrap:wrap;gap:10px;padding:11px 0;min-height:0}.brandmark{flex:1;min-width:180px}.brandmark img{width:222px;max-height:57px}.hamburger{display:block}.searchform{order:3;flex-basis:100%}.searchform input{padding:10px 12px}.searchform button{padding:0 14px}.category-nav{display:none}.category-nav.mobile-open{display:block}.category-inner{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}.category-inner a{white-space:normal;border-bottom:1px solid #216a4d;padding:10px 13px}.market-ribbon-inner{padding:8px 0;align-items:flex-start}.ribbon-copy{display:block;font-size:11px}.ribbon-copy strong,.ribbon-copy span{display:block}.ribbon-copy span{font-size:10px;line-height:1.35;margin-top:3px}.ribbon-actions{gap:4px;flex:none}.ribbon-actions a{padding:7px 9px;font-size:10px}.announcement{margin:14px 0}.page-title{font-size:25px}.layout{grid-template-columns:1fr;gap:18px}.hero-frame{padding:8px;border-width:3px}.gallery-label{font-size:11px}.gallery-label span{font-size:10px}.gallery-picks{gap:5px}.gallery-pick{display:block;text-align:center;font-size:10px;padding:4px}.gallery-pick img{display:block;width:100%;max-height:80px;object-fit:cover}.hero-quick{gap:7px}.hero-quick .btn{padding:11px 7px;font-size:11px}.summary{padding:18px 19px}.section-heading{font-size:20px}.colorbox{padding:20px}.colorbox h2{font-size:19px}.card-grid{gap:10px}.content-card-content{padding:12px 13px}.content-card h3{font-size:14px}.content-card p{font-size:12px}.footer-cols{grid-template-columns:repeat(2,1fr);gap:20px}.footer-cols>div:first-child{grid-column:1/-1}.sticky-actions{gap:5px;padding:6px 5px calc(6px + env(safe-area-inset-bottom))}.sticky-actions a{font-size:11px;min-height:45px;gap:5px}.sticky-actions svg{width:16px;height:16px}.directory-toolbar{flex-direction:column;align-items:stretch}.directory-search{max-width:none}.article-body .lead{padding:18px}.article-body .editorial-box{padding:15px}.info-grid{grid-template-columns:1fr}.story-tabs a{padding:10px 13px;font-size:12px}}
@media(max-width:430px){.tiny-links .top-action{padding:4px 8px}.brandmark img{width:195px}.card-grid{grid-template-columns:1fr}.ribbon-copy span{display:none}.gallery-label span{display:none}.features{display:grid;grid-template-columns:1fr 1fr;gap:0 7px}.features li{font-size:11px}.sticky-actions a{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ticker span,.middle-ticker span{animation:none;white-space:normal}.btn,.content-card{transition:none}}