/* BulkMetrik Studio — shared shell and focused public redesign. */
:root{--s-bg:#0f1113;--s-surface:#16181c;--s-raised:#1e2126;--s-text:#eceef1;--s-muted:#a1a7b0;--s-line:#2b2f36;--s-accent:#f2cf50;--s-accent-ink:#f2cf50;--s-mark:#f2cf50;--s-on-accent:#1c1b10;--s-font:'Geist',Arial,sans-serif;--s-mono:'Geist Mono',monospace;--s-ease:cubic-bezier(.22,1,.36,1);--s-stage:#191c20;--m-dr:#5b9cf8;--m-auth:#27c93f;--m-spam:#f87171;--s-star-off:rgba(255,255,255,.16);--s-mark-dim:rgba(242,207,80,.13);--s-mark-line:rgba(242,207,80,.32)}
:root[data-theme=light]{--s-bg:#f6f7f9;--s-surface:#ffffff;--s-raised:#eceef2;--s-text:#1f2227;--s-muted:#5d636d;--s-line:#dde0e6;--s-accent:#e8bb00;--s-accent-ink:#8a6d00;--s-mark:#e8c000;--s-on-accent:#222015;--s-stage:#eef0f3;--m-dr:#1f66c4;--m-auth:#067a32;--m-spam:#c93b3b;--s-star-off:#d3d6df;--s-mark-dim:rgba(232,192,0,.14);--s-mark-line:rgba(232,192,0,.32)}
.studio-page{margin:0;background:var(--s-bg);color:var(--s-text);font:400 15px/1.6 var(--s-font);-webkit-font-smoothing:antialiased;overflow-wrap:break-word;--text-main:var(--s-text);--text-muted:var(--s-muted);--bg-color:var(--s-bg);--border-color:var(--s-line)}
/* Normalisasi kontrol formulir: button/input/textarea/select tidak mewarisi font dari induknya secara bawaan. Aturan ini DULU ada di studio-public.css, yang dimuat SETELAH berkas ini — bobotnya sama dengan aturan komponen (0,1,0), jadi urutan berkas yang menentukan dan reset ini menang atas .studio-menu-link, .studio-theme, dan .studio-burger. Akibatnya tombol "Produk" tampil 15px di halaman .studio-public dan 12px di halaman lain. Ditaruh di sini, sebelum komponen, reset tetap mengurus kontrol di isi halaman tapi tidak lagi menimpa font yang sudah ditetapkan komponen. */
.studio-public :where(button,input,textarea,select){font:inherit}
/* Sorotan saat teks diblok untuk disalin. Memakai --s-mark, emas yang sama
   dengan penanda hias, dan --s-on-accent untuk tulisannya -- pasangan warna
   yang sudah dipakai tombol emas, jadi kontrasnya tidak perlu ditebak lagi.
   Keduanya token, sehingga mode terang ikut menyesuaikan sendiri.
   text-shadow dimatikan: bayangan teks tidak ikut berganti warna saat
   disorot dan akan terlihat kotor di atas latar emas. */
::selection{background:var(--s-mark);color:var(--s-on-accent);text-shadow:none}
.studio-page *,.studio-nav *,.studio-footer *{box-sizing:border-box}.studio-page :is(h1,h2,h3,h4,p,figure,dl,dd){margin:0}.studio-page a{color:inherit}.studio-page :where(button,input){font:inherit}.studio-page button{cursor:pointer}.studio-page img{max-width:100%;display:block}.studio-page [hidden],.studio-nav [hidden]{display:none!important}
.studio-shell{width:100%;max-width:1440px;padding-inline:clamp(20px,3.35vw,48px);margin-inline:auto}.s-eyebrow{font:400 10px/1.6 var(--s-mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--s-muted)}/* Label bertitik mengikuti .ds-eyebrow factory.ai: titik 8px, jarak 12px,
   huruf 12px, dan letter-spacing NEGATIF. Yang terakhir itu intinya --
   label kita sebelumnya direnggangkan +1,2px seperti teks legal, sedangkan
   punya mereka dirapatkan -0,24px sehingga terbaca sebagai satu blok kecil
   yang padat.

   :has() dipakai supaya aturan ini HANYA menyentuh label yang memang
   bertitik. Label di kartu produk dan panel menu tidak bertitik, dan tidak
   ikut berubah. */
.s-eyebrow:is(:has(.s-eyebrow-dot),:has(.journal-status-dot)){display:inline-flex;align-items:center;gap:12px;font-size:12px;letter-spacing:-.24px}
.s-eyebrow-dot{display:block;flex:0 0 8px;width:8px;height:8px;background:var(--s-mark);border:1px solid transparent;border-radius:50%;margin-right:0;vertical-align:0}
.s-button{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:42px;padding:10px 17px;border:1px solid var(--s-line);border-radius:3px;background:transparent;color:var(--s-text);font:400 11px/1.4 var(--s-mono);text-transform:uppercase;letter-spacing:.05px;text-decoration:none;cursor:pointer;position:relative;isolation:isolate;transition:background-color .2s,border-color .2s,transform .2s;white-space:nowrap;overflow:hidden}
.s-button-primary{background:var(--s-accent);border-color:var(--s-accent);color:var(--s-on-accent)!important}.s-button-ink{background:var(--s-text);border-color:var(--s-text);color:var(--s-bg)!important}.s-button>span[aria-hidden]{font-family:var(--s-font);font-size:18px;line-height:14px;transition:transform .2s}.s-button:hover>span[aria-hidden]{transform:translate(2px,-1px)}.s-button:hover{border-color:var(--s-muted)}.s-button:active{transform:translateY(1px)}.s-button-primary:hover{border-color:var(--s-accent);background:var(--s-accent)}
.s-button-primary::after{content:"";position:absolute;right:0;top:0;width:12px;height:100%;background:repeating-linear-gradient(135deg,transparent 0 3px,rgba(20,22,15,.18) 3px 4px);background-size:12px 12px;opacity:0;transition:opacity .2s;animation:s-stripes 1s linear infinite;animation-play-state:paused}.s-button-primary:is(:hover,:focus-visible)::after{opacity:1;animation-play-state:running}@keyframes s-stripes{to{background-position:12px 0}}
.s-text-link{font:500 12px/1.5 var(--s-font);text-decoration:none;display:inline-flex;gap:12px;align-items:center;padding-block:6px}.s-text-link span{transition:transform .2s}.s-text-link:hover span{transform:translateX(4px)}
:is(.studio-page,.studio-nav,.studio-footer) :is(a,button,summary):focus-visible{outline:2px solid var(--s-accent);outline-offset:5px}:is(.studio-page,.studio-nav,.studio-footer) :is(input,textarea,select):focus-visible{outline:2px solid var(--s-muted);outline-offset:2px}:root[data-theme=light] :is(.studio-page,.studio-nav) :is(a,button,summary):focus-visible{outline-color:#756013}
.studio-page .studio-skip,.studio-skip{position:fixed;top:8px;left:16px;z-index:200;background:var(--s-accent);color:var(--s-on-accent);padding:10px 16px;font:13px var(--s-font);transform:translateY(-180%);text-decoration:none}.studio-skip:focus{transform:none}
.studio-nav{position:sticky;top:0;z-index:80;color:var(--s-text);background:var(--s-bg);font-family:var(--s-font);border-bottom:1px solid transparent;transition:border-color .2s}.studio-nav.is-scrolled{border-color:var(--s-line)}.studio-nav-inner{height:76px;padding:0 24px;max-width:1800px;margin:auto;display:flex;align-items:center;gap:28px;position:relative}.studio-brand{display:inline-flex;gap:10px;align-items:center;text-decoration:none!important;border:0!important;color:var(--s-text)!important;flex-shrink:0;font:600 18px/1 var(--s-font);letter-spacing:1.3px;white-space:nowrap}.studio-brand img{object-fit:contain;display:block;flex-shrink:0}.studio-menu{display:flex;align-items:center;gap:25px;margin-left:auto}.studio-menu-link{border:0;background:none;display:flex;align-items:center;gap:7px;padding:12px 0;font:400 12px/1.4 var(--s-font);text-decoration:none;color:var(--s-text);cursor:pointer;white-space:nowrap;transition:color .2s}/* Lampu sorot: begitu kursor masuk ke menu, butir lain meredup ke 60% dan
   yang disorot tetap penuh. Diukur dari factory.ai, dan ini bagian yang
   membuat daftarnya terasa merespons -- bukan cuma satu butir berubah. */
.studio-menu:has(.studio-menu-link:hover) .studio-menu-link:not(:hover){opacity:.6}
.studio-menu-link{position:relative;transition:color .2s,opacity .25s}
/* Garis mengikuti warna teks lewat currentColor, jadi ia ikut jadi emas
   bersama hurufnya alih-alih diwarnai terpisah dan berisiko tidak sinkron. */
.studio-menu-link::after{content:"";position:absolute;left:0;bottom:9px;height:1px;width:0;background:currentColor;transition:width .3s ease-in-out}
.studio-menu-link:hover{color:var(--s-mark)}
.studio-menu-link:hover::after{width:100%}
.studio-menu-link[aria-current]{color:var(--s-muted)}.studio-products-toggle>span{font-size:17px;transition:transform .25s}.studio-products-toggle[aria-expanded=true]>span{transform:rotate(45deg)}
.studio-nav-actions{display:flex;align-items:center;gap:9px}.studio-nav-actions .s-button{font-size:10px;min-height:34px;padding:8px 12px;gap:10px}.studio-theme,.studio-burger{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;color:var(--s-text);background:none;border:1px solid transparent;border-radius:3px;cursor:pointer;font-size:14px}.studio-theme:hover,.studio-burger:hover{border-color:var(--s-line)}.studio-burger{display:none;flex-direction:column;gap:5px}.studio-burger span{width:18px;height:1px;background:currentColor;transition:transform .2s}.studio-burger[aria-expanded=true] span:first-child{transform:translateY(3px) rotate(45deg)}.studio-burger[aria-expanded=true] span:last-child{transform:translateY(-3px) rotate(-45deg)}.studio-mobile-contact{display:none}
.studio-mega{position:absolute;top:calc(100% - 3px);left:24px;right:24px;width:min(1040px,calc(100% - 48px));margin-inline:auto;padding:28px;border:1px solid var(--s-line);border-radius:5px;background:var(--s-surface);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;box-shadow:0 20px 50px -25px #0006;animation:s-menu-in .35s var(--s-ease)}.studio-mega a{padding:10px 22px;text-decoration:none;color:var(--s-text);display:flex;flex-direction:column;gap:14px;min-width:0}.studio-mega a:first-child{padding-left:8px}.studio-mega a+a{border-left:1px solid var(--s-line)}.studio-mega strong{font-size:17px;font-weight:500;line-height:1.5}.studio-mega strong span{margin-left:7px;font-size:14px}.studio-mega small{font-size:13px;color:var(--s-muted);line-height:1.65;max-width:280px}/* Panel Produk memakai pola yang sama. text-decoration:underline diganti
   garis tumbuh supaya geraknya sama dengan menu dan footer -- garis bawaan
   muncul seketika dan tidak bisa dianimasikan lebarnya. */
.studio-mega:has(a:hover) a:not(:hover){opacity:.6}
.studio-mega a{transition:opacity .25s}
.studio-mega strong{position:relative;width:fit-content;transition:color .2s}
.studio-mega strong::after{content:"";position:absolute;left:0;bottom:-4px;height:1px;width:0;background:currentColor;transition:width .3s ease-in-out}
.studio-mega a:hover strong{color:var(--s-mark)}
.studio-mega a:hover strong::after{width:100%}@keyframes s-menu-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.studio-footer{padding:0 24px 24px;background:var(--s-bg);font-family:var(--s-font);color:#eceef1}.studio-footer-panel{max-width:1752px;min-height:400px;margin:auto;border-radius:10px;background:#16181c;border:1px solid #2b2f36;padding:48px;display:grid;grid-template-columns:1.25fr 1fr;gap:64px}.studio-footer-brand{display:flex;align-items:flex-start;flex-direction:column;justify-content:flex-end}.studio-footer-brand .s-eyebrow{color:#a1a7b0;margin-bottom:auto;padding-bottom:60px;font-size:9px}.studio-footer-brand .studio-brand{font-size:28px;color:#eef0f3!important;letter-spacing:1px}.studio-footer-brand p{color:#a1a7b0;font-size:14px;line-height:1.6;margin:20px 0 0}.studio-footer-directory{display:flex;flex-direction:column;justify-content:space-between;gap:55px}.studio-footer-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}.studio-footer-links h2{color:#eceef1;font-size:13px;line-height:1.4;font-weight:500;margin:0 0 18px}.studio-footer-links a{display:block;color:#a1a7b0;text-decoration:none;font-size:12px;line-height:1.55;padding:5px 0}/* Tautan direktori footer, mengikuti daftar Resources di factory.ai: saat
   disorot teksnya berubah emas dan garis 1px tumbuh dari kiri ke kanan.
   currentColor dipakai supaya garisnya ikut berubah emas bersama teksnya,
   bukan diwarnai terpisah dan berisiko tidak sinkron.

   width:fit-content WAJIB di sini. Tautannya display:block, jadi kotaknya
   selebar kolom -- tanpa ini garisnya akan memanjang jauh melewati huruf
   terakhir. Tetap satu tautan per baris karena blok. */
.studio-footer-links a{position:relative;width:fit-content}
.studio-footer-links a::after{content:"";position:absolute;left:0;bottom:4px;height:1px;width:0;background:currentColor;transition:width .3s ease-in-out}
.studio-footer-links a:hover,.studio-footer-links a:focus-visible{color:#f2cf50}
.studio-footer-links a:hover::after,.studio-footer-links a:focus-visible::after{width:100%}.studio-footer-bottom{font:10px/1.6 var(--s-mono);color:#a1a7b0;display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:25px;border-top:1px solid #2f333a}.studio-footer-bottom a{color:#eceef1;font-size:9px;text-decoration:none}.studio-footer-bottom a span{padding-left:8px}
/* Home — original geometry and real product workflow. */
.s-hero{text-align:center;padding-top:65px;padding-bottom:58px}.s-hero-mark{width:42px;height:42px;object-fit:contain;margin:0 auto 25px!important}.s-hero .s-eyebrow{margin-bottom:22px}.s-hero h1{font-size:clamp(38px,4.6vw,67px);font-weight:500;line-height:1.02;letter-spacing:-2.9px;text-transform:uppercase;max-width:1100px;margin:0 auto}.s-hero-copy{max-width:610px;margin:25px auto 0!important;color:var(--s-muted);font-size:15px;line-height:1.75}.s-hero-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:29px}.s-quick-check{width:min(455px,100%);margin:24px auto 0;padding:0 12px;border:1px solid transparent;background:var(--s-raised);display:flex;align-items:center;gap:10px;min-height:38px}.s-quick-check:focus-within{border-color:var(--s-muted)}.s-quick-check>span{font:11px var(--s-mono);color:var(--s-muted)}.s-quick-check input{width:100%;min-width:0;color:var(--s-text);background:none;border:0;outline:none!important;font:11px/1.6 var(--s-mono);padding:10px 0}.s-quick-check input::placeholder{color:var(--s-muted);opacity:1}.s-quick-check button{border:0;background:none;color:var(--s-text);padding:7px 0 7px 7px;font:10px var(--s-mono);white-space:nowrap;min-height:38px}.s-quick-check button span{margin-left:7px;font-size:15px}
.s-hero h1,.s-hero-copy,.s-hero-actions,.s-quick-check{animation:s-enter .8s var(--s-ease) both}.s-hero-copy{animation-delay:.08s}.s-hero-actions{animation-delay:.16s}.s-quick-check{animation-delay:.23s}@keyframes s-enter{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.s-stage-wrap{padding-inline:24px;max-width:1800px;margin:auto}.s-stage{position:relative;isolation:isolate;overflow:hidden;border:1px solid var(--s-line);border-radius:10px;background:var(--s-stage);padding:30px 6% 38px}.s-stage-header{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1100px;margin:0 auto 24px;font:9px var(--s-mono);text-transform:uppercase;letter-spacing:.7px;color:var(--s-muted)}.s-stage-header>span:first-child{display:flex;align-items:center;gap:8px}.s-stage-header i{display:inline-block;width:5px;height:5px;background:var(--s-accent);border-radius:50%}.s-contours{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;color:var(--s-muted)}.s-contours-a{opacity:.13;animation:s-orbit 70s linear infinite}.s-contours-b{animation:s-orbit 90s linear infinite reverse}.s-contours .orbit-lines{opacity:.13}.s-contours .orbit-dots{fill:var(--s-mark);opacity:.6}@keyframes s-orbit{to{transform:rotate(360deg)}}
.s-workspace{background:var(--s-bg);border:1px solid var(--s-line);border-radius:6px;max-width:1140px;margin:auto;box-shadow:0 26px 65px -28px #0008;display:grid;grid-template-columns:185px minmax(0,1fr);min-height:385px;overflow:hidden}.s-workspace-side{border-right:1px solid var(--s-line);padding:24px 16px;display:flex;flex-direction:column;gap:27px}.s-workspace-logo{font:500 10px var(--s-mono);display:flex;align-items:center;gap:8px;letter-spacing:.6px}.s-workspace-logo img{width:19px;height:19px}.s-workspace-tabs{display:flex;flex-direction:column;gap:7px}.s-workspace-tab{border:0;background:none;text-align:left;color:var(--s-muted);font:12px var(--s-font);padding:10px 11px;display:flex;align-items:center;gap:10px;border-radius:3px;white-space:nowrap}.s-workspace-tab>span{font:9px var(--s-mono);opacity:1}.s-workspace-tab[aria-selected=true]{background:var(--s-raised);color:var(--s-text);box-shadow:inset 2px 0 var(--s-accent)}.s-workspace-tab:hover{color:var(--s-text)}.s-workspace-note{font:9px/1.75 var(--s-mono);color:var(--s-muted);margin-top:auto!important}.s-workspace-note i{width:4px;height:4px;background:var(--s-accent);display:inline-block;margin-right:5px}.s-workspace-content{min-width:0;padding:25px 27px 20px}.s-preview-head{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;margin-bottom:24px}.s-preview-head h2{font-size:17px;line-height:1.4;letter-spacing:-.3px;font-weight:500}.s-preview-head p{font:10px var(--s-mono);color:var(--s-muted);margin-top:7px}.s-preview-badge{font:9px/1.5 var(--s-mono);color:var(--s-muted);border:1px solid var(--s-line);padding:5px 7px;white-space:nowrap;border-radius:2px}.s-metric-table{overflow:auto;max-width:100%;scrollbar-width:thin;scrollbar-color:var(--s-line) transparent}.s-metric-table table{width:100%;border-collapse:collapse;white-space:nowrap;font:11px var(--s-mono);min-width:894px;text-align:left}.s-metric-table th{font-weight:400;font-size:9px;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap;color:var(--s-muted);padding:10px 8px;border-block:1px solid var(--s-line)}.s-metric-table td{padding:17px 8px;border-bottom:1px solid var(--s-line);color:var(--s-text)}.s-metric-table th:first-child,.s-metric-table td:first-child{padding-left:0}.s-metric-table td:first-child{font-family:var(--s-font);font-size:12px}.s-metric-table td:last-child{padding-right:0}.s-bmr{display:inline-flex;flex-direction:column;align-items:center;gap:5px;line-height:1}.s-stars{display:inline-flex;gap:1px;font-size:11px;line-height:1}.s-stars .fa-star,.s-stars .fa-star-half-stroke{color:var(--s-mark)}.s-stars .far.fa-star{color:var(--s-star-off)}.s-metric-table tr:nth-child(2) .s-bar-fill{animation-delay:.1s}.s-metric-table tr:nth-child(3) .s-bar-fill{animation-delay:.2s}@keyframes s-score{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.s-preview-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;font:9px/1.7 var(--s-mono);color:var(--s-muted);margin-top:23px}.s-preview-bottom a{color:var(--s-text);white-space:nowrap;text-decoration:none;border-bottom:1px solid var(--s-line);padding-bottom:3px}.s-stage-caption{max-width:1080px;margin:20px auto 0!important;display:flex;align-items:center;justify-content:space-between;gap:20px;font:9px/1.7 var(--s-mono);color:var(--s-muted)}.s-stage-caption span:last-child{text-align:right}.s-stage-caption strong{font-weight:400;color:var(--s-text)}
.s-market-demo{display:grid;grid-template-columns:1fr 1fr;gap:27px;align-items:center}.s-domain-object{position:relative;aspect-ratio:1.6;display:grid;place-items:center;background:var(--s-surface);border:1px solid var(--s-line);overflow:hidden}.s-domain-object::before{content:"";position:absolute;width:130px;height:130px;border:1px solid var(--s-line);border-radius:50%;box-shadow:0 0 0 22px var(--s-surface),0 0 0 23px var(--s-line),0 0 0 45px var(--s-surface),0 0 0 46px var(--s-line)}.s-domain-object strong{z-index:1;font:500 16px var(--s-mono);background:var(--s-bg);border:1px solid var(--s-line);padding:12px 16px;box-shadow:0 12px 30px -15px #0008}.s-market-spec{margin:0}.s-market-spec>div{padding:10px 0;border-bottom:1px solid var(--s-line)}.s-market-spec dt{font:9px var(--s-mono);color:var(--s-muted);margin-bottom:5px}.s-market-spec dd{font-size:12px}.s-preview-journal{display:grid;gap:0}.s-preview-journal a{padding:14px 0;border-bottom:1px solid var(--s-line);display:flex;justify-content:space-between;gap:25px;color:var(--s-text);text-decoration:none}.s-preview-journal a:first-child{border-top:1px solid var(--s-line)}.s-preview-journal small{font:9px var(--s-mono);color:var(--s-muted);display:block;margin-bottom:7px}.s-preview-journal strong{font-size:12px;font-weight:400;line-height:1.55;display:block}.s-preview-journal a>span{align-self:center;color:var(--s-muted)}
.s-proof{display:grid;grid-template-columns:1.25fr repeat(3,1fr);align-items:center;gap:30px;padding-block:42px;border-bottom:1px solid var(--s-line);margin-bottom:90px}.s-proof-label{font-size:13px;line-height:1.7;color:var(--s-muted);max-width:220px}.s-proof-item strong{font-size:32px;font-weight:400;letter-spacing:-1px;line-height:1.2;display:block}.s-proof-item span{font:9px/1.6 var(--s-mono);text-transform:uppercase;letter-spacing:.5px;color:var(--s-muted);display:block;margin-top:8px}
.s-section{padding-block:0 90px}.s-section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:30px;margin-bottom:36px}.s-section-heading h2{font-size:clamp(27px,3vw,43px);font-weight:400;letter-spacing:-1.5px;line-height:1.1;margin-top:17px}.s-section-heading p{font-size:14px;color:var(--s-muted);line-height:1.75;max-width:380px;padding-top:28px}.s-products-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--s-line);border-bottom:1px solid var(--s-line)}.s-product-card{padding:31px 29px 29px 0;display:flex;flex-direction:column;min-width:0}.s-product-card+.s-product-card{padding-left:29px;border-left:1px solid var(--s-line)}.s-product-card:last-child{padding-right:0}.s-product-card .s-eyebrow{font-size:9px}.s-product-icon{width:42px;height:42px;margin:31px 0 23px;color:var(--s-text)}.s-product-icon svg{width:100%;height:100%;display:block}.s-product-card h3{font-size:24px;font-weight:450;letter-spacing:-.8px;line-height:1.25;margin-bottom:15px}.s-product-card p{font-size:13px;color:var(--s-muted);line-height:1.8;max-width:315px;margin-bottom:22px}.s-product-meta{font:9px var(--s-mono);color:var(--s-muted);padding-top:2px;margin-top:auto;margin-bottom:25px;display:flex;gap:12px;flex-wrap:wrap}.s-product-card>.s-text-link{align-self:flex-start}
.s-process{display:grid;grid-template-columns:1fr 1fr;gap:100px;border-top:1px solid var(--s-line);padding-top:24px}.s-process-intro{padding-top:11px}.s-process-intro h2{font-size:clamp(30px,3.25vw,46px);font-weight:400;letter-spacing:-1.6px;line-height:1.08;margin-top:23px;max-width:440px}.s-process-intro p{font-size:14px;line-height:1.8;color:var(--s-muted);max-width:350px;margin-top:24px}.s-process-intro .s-text-link{margin-top:25px}.s-methods{margin:0;padding:0;list-style:none}.s-methods li{padding:25px 0;border-bottom:1px solid var(--s-line);display:grid;grid-template-columns:27px minmax(0,1fr);gap:18px}.s-methods li:first-child{padding-top:11px}.s-methods li>span{font:10px/1.9 var(--s-mono);color:var(--s-muted)}.s-methods h3{font-size:20px;font-weight:400;line-height:1.3;letter-spacing:-.5px;margin-bottom:9px}.s-methods p{font-size:13px;color:var(--s-muted);line-height:1.75;max-width:440px}
.s-latest .s-section-heading{align-items:end;border-top:1px solid var(--s-line);padding-top:22px}.s-latest-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.s-latest-card{min-width:0}.s-latest-card>a{display:block;text-decoration:none}.s-latest-image{aspect-ratio:1.75;overflow:hidden;border-radius:4px;background:var(--s-raised);position:relative;border:1px solid var(--s-line)}.s-latest-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--s-ease)}.s-latest-card a:hover img{transform:scale(1.035)}.s-latest-image>span{position:absolute;inset:0;display:grid;place-items:center;font:25px var(--s-mono);color:var(--s-muted);z-index:0}.s-latest-image img{position:relative;z-index:1}.s-latest-meta{font:9px/1.6 var(--s-mono);text-transform:uppercase;letter-spacing:.2px;color:var(--s-muted);margin-top:19px;display:flex;justify-content:space-between;gap:12px}.s-latest-card h3{font-size:18px;font-weight:450;letter-spacing:-.3px;line-height:1.45;margin-top:12px}.s-latest-card .s-text-link{font-size:11px;margin-top:17px}.s-start{padding-block:55px 65px;display:flex;align-items:center;justify-content:space-between;gap:35px;border-top:1px solid var(--s-line)}.s-start h2{font-size:clamp(29px,3.1vw,44px);font-weight:400;letter-spacing:-1.5px;line-height:1.12;max-width:650px}.s-start p{color:var(--s-muted);font-size:13px;margin-top:16px}.s-start-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.s-pending{opacity:0;transform:translateY(20px)}[data-reveal]{transition:opacity .7s var(--s-ease),transform .7s var(--s-ease)}.studio-page.page-idle *,.studio-page.page-idle *::before,.studio-page.page-idle *::after{animation-play-state:paused!important}
@media(min-width:1800px){.s-hero{padding-top:90px}.s-hero h1{font-size:72px}}
@media(max-width:1150px){.studio-nav-inner{gap:22px}.studio-menu{gap:20px}.studio-contact{display:none}.s-workspace{grid-template-columns:160px minmax(0,1fr)}.s-workspace-side{padding:22px 12px}.s-stage{padding-inline:5%}.s-process{gap:55px}.studio-footer-panel{gap:45px;padding:40px;grid-template-columns:1fr 1.25fr}.s-hero h1{font-size:56px;letter-spacing:-2.1px}}
@media(max-width:900px){.studio-nav-inner{height:68px;padding-inline:20px}.studio-brand{font-size:17px}.studio-menu{position:absolute;top:100%;left:0;right:0;padding:22px 24px;background:var(--s-bg);border-bottom:1px solid var(--s-line);display:none;margin:0;max-height:calc(100dvh - 68px);overflow:auto;align-items:stretch;gap:0}.studio-menu.is-open{display:flex;flex-direction:column;animation:s-menu-in .25s var(--s-ease)}.studio-menu-link{padding:15px 0;font-size:15px;border-bottom:1px solid var(--s-line);justify-content:space-between}.studio-menu-link::after{display:none}.studio-menu:has(.studio-menu-link:hover) .studio-menu-link:not(:hover){opacity:1}.studio-products-toggle{width:100%;text-align:left}.studio-mega{position:static;display:flex;flex-direction:column;padding:8px 0 12px;border:0;background:none;box-shadow:none;gap:5px}.studio-mega a,.studio-mega a:first-child{padding:15px 12px;border-left:1px solid var(--s-line)}.studio-mega strong{font-size:14px}.studio-mega small{display:none}.studio-mega a{gap:7px}.studio-burger{display:flex}.studio-nav-actions{margin-left:auto}.studio-mobile-contact{display:flex}.s-hero{padding-top:50px}.s-hero h1{font-size:clamp(36px,6vw,54px);letter-spacing:-1.7px}.s-hero-copy{font-size:14px;max-width:560px}.s-stage-wrap{padding-inline:20px}.s-stage{padding:24px 24px 25px}.s-workspace{grid-template-columns:145px minmax(0,1fr)}.s-workspace-content{padding:22px 20px}.s-workspace-tab{font-size:11px;padding:10px 8px}.s-workspace-logo{font-size:9px}.s-preview-head h2{font-size:15px}.s-preview-badge{font-size:8px}.s-proof{gap:22px;grid-template-columns:1fr 1fr 1fr;margin-bottom:65px}.s-proof-label{grid-column:1/-1;max-width:none}.s-proof-item strong{font-size:28px}.s-section{padding-bottom:65px}.s-section-heading h2{font-size:34px}.s-section-heading p{max-width:300px}.s-product-card{padding:24px 19px 24px 0}.s-product-card+.s-product-card{padding-left:19px}.s-product-card h3{font-size:21px}.s-product-card p{font-size:12px}.s-product-meta{gap:8px;line-height:1.7}.s-process{gap:35px}.s-methods h3{font-size:19px}.s-latest-grid{gap:18px}.s-latest-card h3{font-size:16px}.s-start-actions{flex-direction:column}.studio-footer{padding-inline:20px}.studio-footer-panel{grid-template-columns:1fr;gap:45px;padding:34px}.studio-footer-brand .s-eyebrow{padding-bottom:25px}.studio-footer-brand p{display:none}.studio-footer-directory{gap:35px}.studio-footer-links{max-width:600px}}
@media(max-width:600px){.studio-login{display:none!important}.studio-nav-inner{height:64px}.studio-brand{font-size:16px;gap:9px;letter-spacing:.9px}.studio-brand img{width:26px;height:26px}.studio-theme,.studio-burger{width:34px;height:38px}.studio-nav-actions{gap:5px}.s-hero{padding-top:35px;padding-bottom:35px}.s-hero-mark{width:32px;height:32px;margin-bottom:22px!important}.s-hero .s-eyebrow{font-size:8px;letter-spacing:.75px;margin-bottom:20px}.s-hero h1{font-size:clamp(30px,7.6vw,44px);letter-spacing:-1.3px;line-height:1.05}.s-hero-copy{font-size:13px;line-height:1.7;margin-top:20px!important}.s-hero-actions{margin-top:24px;gap:8px}.s-button{font-size:10px;gap:10px;padding:10px 13px;min-height:42px}.s-quick-check{margin-top:20px;gap:7px;padding-inline:9px}.s-quick-check input{font-size:10px}.s-quick-check button{font-size:9px}.s-stage-wrap{padding-inline:12px}.s-stage{padding:17px 12px 18px;border-radius:7px}.s-stage-header{font-size:8px;gap:10px;margin-bottom:17px}.s-stage-header>span:last-child{display:none}.s-workspace{display:block;min-height:0}.s-workspace-side{border-right:0;border-bottom:1px solid var(--s-line);padding:8px;display:block}.s-workspace-logo,.s-workspace-note{display:none!important}.s-workspace-tabs{flex-direction:row;gap:3px;justify-content:space-between}.s-workspace-tab{padding:10px 8px;font-size:10px;gap:5px;justify-content:center;flex:1}.s-workspace-tab>span{display:none}.s-workspace-tab[aria-selected=true]{box-shadow:inset 0 -2px var(--s-accent)}.s-workspace-content{padding:20px 15px}.s-preview-head{margin-bottom:18px;gap:10px}.s-preview-head p{font-size:8px;margin-top:6px}.s-preview-badge{font-size:7px;padding:4px}.s-preview-head h2{font-size:14px}.s-metric-table td{padding-block:15px}.s-preview-bottom{gap:15px;align-items:flex-start;flex-direction:column;margin-top:19px;font-size:8px}.s-stage-caption{font-size:8px;flex-direction:column;align-items:flex-start;gap:7px;margin-top:15px!important}.s-stage-caption span:last-child{text-align:left}.s-market-demo{gap:15px;grid-template-columns:1fr}.s-domain-object{aspect-ratio:2.7}.s-market-spec{display:grid;grid-template-columns:1fr 1fr;gap:12px}.s-market-spec dd{font-size:11px}.s-preview-journal strong{font-size:11px}.s-preview-journal a{padding:12px 0}.s-proof{padding-block:29px;gap:20px 12px;margin-bottom:48px}.s-proof-label{font-size:12px}.s-proof-item strong{font-size:25px;letter-spacing:-1px}.s-proof-item span{font-size:8px;line-height:1.65;margin-top:5px}.s-section{padding-bottom:50px}.s-section-heading{flex-direction:column;gap:15px;margin-bottom:27px}.s-section-heading h2{font-size:30px;letter-spacing:-1px;margin-top:13px}.s-section-heading p{padding-top:0;font-size:13px;max-width:none}.s-products-grid{grid-template-columns:1fr}.s-product-card,.s-product-card+.s-product-card{padding:26px 0;border-left:0}.s-product-card+.s-product-card{border-top:1px solid var(--s-line)}.s-product-icon{width:36px;height:36px;margin:23px 0 17px}.s-product-card h3{font-size:25px}.s-product-card p{font-size:13px;max-width:420px;margin-bottom:17px}.s-product-meta{margin-bottom:16px;font-size:9px}.s-process{grid-template-columns:1fr;gap:30px;padding-top:20px}.s-process-intro h2{font-size:33px;margin-top:17px;max-width:360px}.s-process-intro p{margin-top:18px;font-size:13px;max-width:none}.s-process-intro .s-text-link{margin-top:16px}.s-methods li{padding-block:22px;gap:12px}.s-latest .s-section-heading{align-items:flex-start;gap:18px}.s-latest-grid{grid-template-columns:1fr;gap:30px}.s-latest-card h3{font-size:20px}.s-latest-card .s-text-link{margin-top:10px}.s-start{padding:30px 0 45px;align-items:flex-start;flex-direction:column;gap:25px}.s-start h2{font-size:31px;letter-spacing:-1px}.s-start p{font-size:12px}.s-start-actions{flex-direction:row;justify-content:flex-start}.studio-footer{padding:0 12px 12px}.studio-footer-panel{padding:28px 24px;gap:35px;border-radius:8px}.studio-footer-brand .studio-brand{font-size:23px;gap:10px}.studio-footer-brand .studio-brand img{width:30px;height:30px}.studio-footer-brand .s-eyebrow{font-size:8px;padding-bottom:24px}.studio-footer-links{gap:20px 13px}.studio-footer-links h2{font-size:12px;margin-bottom:12px}.studio-footer-links a{font-size:11px;padding-block:6px}.studio-footer-bottom{font-size:9px;gap:14px;align-items:flex-start}.studio-footer-bottom a{font-size:8px;max-width:110px}.studio-footer-directory{gap:26px}}
@media(max-width:360px){.studio-nav-inner{padding-inline:16px;gap:12px}.studio-brand{font-size:14px}.studio-brand img{width:24px;height:24px}.s-hero h1{font-size:30px}.s-workspace-tab{padding-inline:5px}.studio-footer-links{grid-template-columns:1fr 1fr;gap:24px}.s-proof-item strong{font-size:22px}.s-proof-item span{font-size:7px}.s-preview-badge{display:none}}
@media(prefers-reduced-motion:reduce){.studio-page *,.studio-page *::before,.studio-page *::after,.studio-nav *,.studio-footer *{animation:none!important;transition:none!important;scroll-behavior:auto!important}.s-pending{opacity:1;transform:none}}
@media(scripting:none) and (max-width:900px){.studio-menu{display:flex;position:static;flex-wrap:wrap;max-height:none;overflow:visible;flex-direction:row;gap:15px;padding:10px 0;width:100%;order:3;border:0}.studio-nav-inner{height:auto;flex-wrap:wrap;padding-block:14px}.studio-menu-link{font-size:12px;padding:5px 0}.studio-products-toggle,.studio-burger{display:none}.studio-nav{position:relative}}

.studio-mobile-auth,.s-table-hint{display:none}.studio-page section[id]{scroll-margin-top:95px}
@media(max-width:900px){.studio-mobile-auth{display:flex}}
@media(max-width:600px){.s-table-hint{display:block;font:8px/1.6 var(--s-mono);color:var(--s-muted);margin-top:10px!important}.s-table-hint span{margin-left:5px}}

@media(prefers-reduced-motion:no-preference){html:has(.studio-page){scroll-behavior:smooth}}

/* Pratinjau metrik di beranda memakai bahasa visual yang sama dengan tabel
   hasil cek gratis: titik + angka + bilah. Warna menandai METRIKNYA, bukan
   bagus-buruknya nilai — biru Domain Rating, hijau Domain/Page Authority,
   merah Spam Score. Nilai --m-* disalin dari studio-public.css karena
   beranda tidak memuat berkas tersebut. */
.s-metric-table .s-metric{display:inline-flex;align-items:center;gap:7px}
.s-metric-table .s-dot{width:8px;height:8px;border-radius:50%;flex:none}
.s-metric-table /* 28px, bukan 36. Tebalnya SAMA dengan dashboard (5px, terukur di
   keduanya) -- yang berbeda panjangnya: bilah dashboard berhenti di
   ~27,7px, yang ini 36px. Bilah 5px sepanjang 36px terbaca jauh lebih
   tipis daripada 5px sepanjang 28px; yang dilihat mata nisbahnya,
   bukan tingginya. */
.s-bar{width:28px;height:5px;border-radius:3px;background:var(--s-line);flex:none;overflow:hidden}
.s-metric-table .s-bar-fill{display:block;height:100%;border-radius:3px;transform-origin:left;animation:s-score 1s var(--s-ease) both}
.s-metric-table .ds-val{font:12px var(--s-mono);display:inline-block;min-width:23px}
/* Satuan di sel metrik -- sejauh ini hanya % pada Spam Score, satu-satunya
   kolom di tabel itu yang memang persentase dan bukan skor 0-100.
   Ditarik rapat ke angkanya: .s-metric memberi jarak 7px antar bagiannya,
   dan jarak sebesar itu antara "2" dan "%" membuat keduanya terbaca
   sebagai dua hal. Lebih kecil dan lebih redup daripada angkanya -- yang
   dibaca orang angkanya, satuan cuma menerangkan diukur dengan apa. */
/* Ukuran, bobot, dan jaraknya disamakan dengan .ck-satuan di dashboard.
   Jarak lamanya 2px -- angka yang sama dengan dashboard -- tapi
   glifnya lebih kecil (9,5 vs 10,5) dan lebih tipis (400 vs 500),
   sehingga celah yang sama terbaca lebih lebar. Sekarang 1px:
   gap 7px milik .s-metric dikurangi margin -6px. */
.s-metric .s-satuan{font:500 10.5px var(--s-mono);color:var(--s-muted);margin-left:-6px;flex:none}
.s-metric-table :is(.s-dot,.s-bar-fill).m-dr{background:var(--m-dr)}
.s-metric-table :is(.s-dot,.s-bar-fill).m-auth{background:var(--m-auth)}
.s-metric-table :is(.s-dot,.s-bar-fill).m-spam{background:var(--m-spam)}
.s-metric-table .s-plain{font:11px var(--s-mono);color:var(--s-muted)}
.s-metric-table .ds-dom-wrap{display:inline-flex;align-items:center;gap:10px}
.s-metric-table .ds-favicon{width:16px;height:16px;flex:none;border-radius:2px}

/* Tooltip kepala kolom. Dipindah dari studio-tools.css ke berkas ini karena
   beranda memakainya juga dan tidak memuat studio-tools.css. Aturan .th-src
   baru: tanpa penanda visual, tidak ada yang tahu kepala kolom bisa disinggahi.
   cursor default, bukan help — tidak ada yang bisa diklik di sini. */
.th-src{cursor:default;padding-bottom:2px;border-bottom:1px dotted var(--s-muted)}
.th-src:is(:hover,:focus-visible){color:var(--s-text);border-bottom-color:var(--s-text)}
#th-tip{position:fixed;z-index:1300;max-width:260px;pointer-events:none;padding:15px;background:var(--s-surface);border:1px solid var(--s-line);border-radius:3px;box-shadow:0 12px 34px -18px #0009;opacity:0;transition:opacity .15s ease}
#th-tip.show{opacity:1}
.th-tip-head{display:flex;justify-content:space-between;font:9px var(--s-mono);gap:12px;border-bottom:1px solid var(--s-line);padding-bottom:10px;margin-bottom:10px;color:var(--s-muted);text-transform:none;letter-spacing:normal}
.th-tip-src{color:var(--s-accent-ink);font-weight:600}
.th-tip-body{font:12px/1.8 var(--s-font);color:var(--s-text);text-transform:none;letter-spacing:normal}
.s-metric-table :is(th,td):not(:first-child){text-align:center}
.s-metric-table :is(th,td):last-child{padding-right:8px}

/* Tanda hias kecil (titik, bilah, panah) di mode terang.
 *
 * Ada TIGA emas, dan membedakannya itu penting:
 *   --s-accent      isian tombol; keterbacaan ditanggung teks gelap di atasnya
 *   --s-accent-ink  emas TEKS (tautan, tanggal, label) — harus lolos kontras,
 *                   jadi terpaksa gelap (#8a6d00) dan memang terbaca kecokelatan
 *   --s-mark        emas TANDA HIAS (bintang, titik, bilah) — tidak membawa
 *                   teks, jadi boleh benar-benar kuning (#e8c000)
 *
 * Kuning yang digelapkan secara fisik menjadi cokelat: hue-nya tetap ~50°,
 * yang turun hanya kecerahannya (63% terbaca kuning, 27% terbaca cokelat).
 * Karena itu tanda hias tidak bisa ikut --s-accent-ink tanpa tampak cokelat,
 * dan teks tidak bisa ikut --s-mark tanpa kehilangan keterbacaan.
 *
 * Di mode gelap ketiganya memang sama, jadi aturan ini khusus tema terang.
 *
 * Selektor diawali :root[data-theme=light] agar bobotnya melebihi aturan asal
 * di berkas masing-masing, yang dimuat setelah berkas ini.
 */
:root[data-theme=light] :is(.s-eyebrow-dot,.s-stage-header i,.s-workspace-note i,.tkq-dot,.ckp-fill,.q-mid,.journal-status-dot){background:var(--s-mark)}
:root[data-theme=light] .auth-tab.active::after{background:var(--s-mark)}
:root[data-theme=light] .studio-public .micro-label .live{background:var(--s-mark)}
:root[data-theme=light] .studio-blog .journal-category::after{background:var(--s-mark)}
:root[data-theme=light] .studio-blog .journal-card-link:hover .journal-arrow{background:var(--s-mark)}
:root[data-theme=light] .studio-information .cmp-box.good .cmp-head::before{background:var(--s-mark)}

/* Jembatan tak terlihat antara tombol Produk dan panelnya.
   Panel duduk ~1px di bawah tepi bawah kelompoknya, dan celah setipis itu
   cukup membuat pointer sesaat tidak berada di atas keduanya — pointerleave
   menyala lalu menu tertutup. Celah itu melebar sesaat ketika nav menambah
   garis bawah pada scroll, yang membuatnya menutup saat halaman digulir.
   Jembatan ini menutup celahnya tanpa mengubah tampilan. */
.studio-mega::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}

/* Pemilih bahasa di navigasi. Mengikuti bahasa visual nav: mono kecil,
   garis tipis, yang aktif ditandai latar terangkat — bukan warna aksen,
   supaya tidak bersaing perhatian dengan tombol ajakan di sebelahnya. */
.studio-lang{display:flex;align-items:center;border:1px solid var(--s-line);border-radius:3px;overflow:hidden;flex:none}
.studio-lang a{padding:8px 9px;font:400 10px/1 var(--s-mono);letter-spacing:.5px;color:var(--s-muted);text-decoration:none;transition:color .2s,background-color .2s}
.studio-lang a+a{border-left:1px solid var(--s-line)}
.studio-lang a:hover{color:var(--s-text)}
.studio-lang a[aria-current]{background:var(--s-raised);color:var(--s-text)}

/* Keterangan "dokumen ini hanya tersedia dalam bahasa Indonesia".
   Penanda ini sudah lama ditulis di privasi.php, syarat.php, dan
   panduan-metrik.php, tetapi gayanya hanya ada di public-theme.css —
   berkas yang TIDAK dimuat halaman studio, jadi selama ini tampil polos. */
.studio-page .language-note{margin:0 0 22px;padding:11px 14px;border:1px solid var(--s-line);border-left:2px solid var(--s-mark);border-radius:3px;background:var(--s-surface);font:400 12px/1.7 var(--s-font);color:var(--s-muted)}

/* ══ Pratinjau beranda: pengurut kolom, buka domain, popup detail ══
   Versi publik dari tiga hal yang sudah ada di halaman BulkMetrik dashboard.
   Warna cincin memakai token metrik yang sama dengan bilah di tabel
   (--m-dr biru, --m-auth hijau, --m-spam merah) supaya satu angka tidak
   berganti arti saat berpindah dari tabel ke popup. */
.s-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* pengurut kolom */
th[data-sort]{padding:0}
.s-sort{display:inline-flex;align-items:center;gap:4px;width:100%;padding:10px 5px;border:0;background:none;color:inherit;font:inherit;text-transform:inherit;letter-spacing:inherit;cursor:pointer;justify-content:center}
.s-metric-table th:first-child .s-sort{justify-content:flex-start;padding-left:0}
.s-sort-ic{width:6px;height:10px;flex:none;opacity:.45;background:currentColor;transition:opacity .18s;
    -webkit-mask:var(--s-sort-both) center/6px 10px no-repeat;mask:var(--s-sort-both) center/6px 10px no-repeat}
.s-sort:hover .s-sort-ic{opacity:.9}
th[aria-sort="ascending"] .s-sort-ic{opacity:1;-webkit-mask-image:var(--s-sort-up);mask-image:var(--s-sort-up)}
th[aria-sort="descending"] .s-sort-ic{opacity:1;-webkit-mask-image:var(--s-sort-down);mask-image:var(--s-sort-down)}
th[aria-sort]:not([aria-sort="none"]) .s-sort{color:var(--s-text)}
/* Tabel hasil cek gratis memakai padding sel sendiri (16px 14px), jadi
   tombolnya harus memikul padding itu, bukan padding milik tabel hero. */
.fc-table .s-sort{padding:16px 14px}
.fc-table .th-dom .s-sort{justify-content:flex-start}
:root{
    --s-sort-both:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7 11"><path d="M3.5 0 6 3.4H1zM3.5 11 1 7.6h5z"/></svg>');
    --s-sort-up:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7 11"><path d="M3.5 1 6.5 6h-6z"/></svg>');
    --s-sort-down:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7 11"><path d="M3.5 10 .5 5h6z"/></svg>');
}

/* buka domain di Google (site:) */
/* Ikon polos dan SELALU terlihat, sama dengan .ck-dom-go di dashboard.
   Dua bedanya dulu: kotak 18x18 berlatar saat disorot membuatnya terbaca
   sebagai tombol padahal ia cuma tautan bantu, dan opacity:0 membuatnya
   muncul hanya ketika barisnya disorot -- di layar sentuh itu berarti
   tidak pernah muncul sama sekali. */
.s-dom-go{margin-left:6px;flex:none;color:var(--s-muted);font-size:10.5px;text-decoration:none;transition:color .15s}
.s-dom-go:hover,.s-dom-go:focus-visible{color:var(--s-text)}

/* tombol detail */
/* Cukup lebar untuk kata DETAIL di kepala kolom. Sebelumnya 32px karena
   kepalanya disembunyikan — padahal tabel di dashboard menampilkannya. */
.s-col-act{width:58px;text-align:center}
.s-metric-table th.s-col-act{padding:10px 5px}
.s-detail-btn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:1px solid var(--s-line);border-radius:3px;background:var(--s-bg);color:var(--s-muted);font-size:10px;cursor:pointer;transition:color .18s,border-color .18s,background-color .18s}
.s-detail-btn:hover{color:var(--s-text);border-color:var(--s-muted);background:var(--s-raised)}

/* popup */
/* ══ PENYELARASAN TABEL PRATINJAU ══
   Tabel ilustrasi di hero menampilkan kolom yang sama persis dengan tabel
   hasil Bulk Metrik, jadi ia harus terbaca sebagai tabel yang sama. Angka di
   bawah diambil dari pengukuran .ba-table.wide, bukan dikira-kira.

   Tepi kiri dan kanan tetap nol: tabel ini menempel pada tepi
   .s-workspace-content, sedangkan yang di dashboard duduk di dalam kartu
   berpadding sendiri. Menyalin 16px-nya akan membuat kolom domain menjorok
   masuk tanpa alasan. */
.s-metric-table th{
    font:700 10.5px var(--s-mono);letter-spacing:1px;padding:10px 9px;
}
.s-metric-table td{padding:11px 9px}
.s-metric-table :is(th,td):first-child{padding-left:0}
.s-metric-table :is(th,td):last-child{padding-right:0}

/* Nama domain monospasi, sama dengan sel domain di dashboard. Deretan nama
   domain memang lebih mudah dipindai dengan lebar aksara tetap -- titik dan
   garis jatuh di kolom yang sama dari baris ke baris. */
.s-metric-table td:first-child{font:12.8px var(--s-mono)}
.s-metric-table .ds-favicon{width:15px;height:15px;border-radius:3px}
.s-metric-table .ds-dom-wrap{gap:8px}

/* BMR: bintang lebih rapat ke skornya. */
.s-metric-table .s-bmr{gap:3px}
.s-metric-table .s-stars{font-size:10.5px}

/* Sel metrik: jarak dan lebar minimum. Lebar minimum 78px yang membuat titik,
   angka, dan bilah berbaris lurus dari satu kolom ke kolom berikutnya --
   tanpanya tiap kolom melebar sendiri mengikuti isinya. */
.s-metric-table .s-metric{gap:6px;min-width:78px}
.s-metric-table .ds-val{min-width:22px}

/* Tombol detail: latar transparan, bukan --s-bg. Latar gelap di dalam sel
   yang juga gelap membuatnya terlihat seperti lubang. */
.s-detail-btn{background:transparent;font-size:10.5px}
.s-detail-overlay{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;padding:20px;background:#000b}
.s-detail-overlay[hidden]{display:none}
.s-detail-box{width:100%;max-width:760px;max-height:90vh;overflow:auto;border:1px solid var(--s-line);border-radius:6px;background:var(--s-surface);box-shadow:0 30px 70px -20px #0008}
.s-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:22px;border-bottom:1px solid var(--s-line)}
.s-detail-head h3{margin:10px 0 0;font-size:19px;font-weight:500;letter-spacing:-.3px}
.s-detail-close{width:32px;height:32px;flex:none;border:1px solid var(--s-line);border-radius:3px;background:transparent;color:var(--s-text);font-size:17px;line-height:1;cursor:pointer}
.s-detail-close:hover{background:var(--s-raised)}
.s-detail-body{padding:24px 22px}
.s-rings{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:22px}
.s-ring-item{text-align:center;min-width:0}
.s-ring{width:100%;max-width:54px}
.s-ring-bg{fill:none;stroke:var(--s-line);stroke-width:3}
.s-ring-fg{fill:none;stroke-width:3;stroke-linecap:round;transition:stroke-dasharray .5s var(--s-ease)}
.s-ring-txt{fill:var(--s-text);font:500 9px var(--s-mono);text-anchor:middle}
.s-ring.r-bmr .s-ring-fg{stroke:var(--s-mark)}
.s-ring.r-dr .s-ring-fg{stroke:var(--m-dr,#5b9cf8)}
.s-ring.r-auth .s-ring-fg{stroke:var(--m-auth,#27c93f)}
.s-ring.r-spam .s-ring-fg{stroke:var(--m-spam,#f87171)}
.s-ring-lbl{margin-top:7px;font:400 8px/1.5 var(--s-mono);letter-spacing:.4px;text-transform:uppercase;color:var(--s-muted)}
.s-detail-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:0 0 18px;background:var(--s-line);border:1px solid var(--s-line);border-radius:3px;overflow:hidden}
.s-detail-facts>div{padding:13px 14px;background:var(--s-surface);min-width:0}
.s-detail-facts dt{font:400 8px/1.6 var(--s-mono);letter-spacing:.4px;text-transform:uppercase;color:var(--s-muted)}
.s-detail-facts dd{margin:4px 0 0;font:400 13px var(--s-font);color:var(--s-text);word-break:break-all}
.s-detail-facts dd .s-stars{font-size:13px}
/* Catatan ditata seperti kaki popup dashboard (.ckd-foot): garis pemisah
   di atas, rata tengah, huruf kecil. Sebelumnya ia paragraf lepas yang
   menggantung di antara kartu terakhir dan tombol, tanpa pemisah apa pun. */
.s-detail-body .s-detail-note{margin:18px 0 16px;padding-top:13px;border-top:1px solid var(--s-line);text-align:center;font:400 11px/1.7 var(--s-font);color:var(--s-muted)}
.s-detail-cta{width:100%}
@media(max-width:560px){
    .s-rings{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
    .s-detail-facts{grid-template-columns:minmax(0,1fr)}
    .s-detail-head,.s-detail-body{padding:18px}
}

/* ── Isi popup detail: traffic, tren, keyword, negara, halaman ──
   Menyalin SUSUNAN popup detail dashboard, bukan sekadar isinya: hero,
   cincin, dan tiap seksi masing-masing sebuah KARTU dengan latar turun
   satu tingkat dan garis tepi sendiri; judul seksi memakai ikon emas;
   grafik tren punya label sumbu dan tooltip. Versi sebelumnya di sini
   datar tanpa kartu, sehingga hierarkinya hilang dan tidak terbaca
   sebagai produk yang sama.

   Yang berbeda dari dashboard hanya kosakata visual studio: sudut 3px
   (bukan 11px) dan bobot huruf 500 (bukan 800), supaya tetap satu
   keluarga dengan halaman publik lainnya. */

/* kartu hero: traffic di kiri, BMR dipisah garis di kanan */
/* --s-raised, BUKAN --s-bg. Kotak popupnya --s-surface; dengan --s-bg
   kartu di dalamnya jadi lebih gelap daripada wadahnya alias tenggelam,
   sedangkan popup dashboard memakai --bg-raise sehingga kartunya timbul.
   Dua arah yang berlawanan untuk isi yang sama. */
.s-d-hero{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;padding:13px 14px;margin-bottom:12px;border:1px solid var(--s-line);border-radius:3px;background:var(--s-raised)}
.s-d-hero-main{min-width:0}
.s-d-traffic{font:500 clamp(22px,4vw,28px)/1 var(--s-mono);letter-spacing:-1px;color:var(--s-text)}
.s-d-traffic-lbl{margin-top:5px;font:400 9px/1.5 var(--s-mono);letter-spacing:1px;text-transform:uppercase;color:var(--s-muted)}
.s-d-cost{margin-top:6px;font:400 12px/1.6 var(--s-font);color:var(--s-muted)}
.s-d-cost b{color:var(--s-text);font-weight:500}
/* Ikon di baris nilai traffic dan baris umur/IP: lebih kecil dan lebih
   redup daripada teksnya, sama dengan .ckd-hero-sub i di dashboard. */
.s-d-cost i,.s-d-meta i{color:var(--s-muted);font-size:10px;margin-right:2px}
/* umur + IP: dipisah garis tipis, bukan kartu baru — dua nilai sependek
   "12 thn" dan sebuah alamat IP tidak sebanding dengan satu kotak penuh */
.s-d-meta{display:flex;flex-wrap:wrap;gap:7px 16px;margin-top:9px;padding-top:8px;border-top:1px solid var(--s-line)}
.s-d-meta span{display:inline-flex;align-items:center;gap:6px;font:400 11px/1.5 var(--s-mono);color:var(--s-muted)}
.s-d-meta b{color:var(--s-text);font-weight:500}
.s-d-bmr{flex:none;text-align:center;padding-left:14px;border-left:1px solid var(--s-line)}
.s-d-bmr .s-stars{display:inline-flex;justify-content:center;font-size:11px}
.s-d-score{margin-top:5px;font:500 18px/1 var(--s-mono);color:var(--s-text)}
.s-d-score span{font-size:.55em;color:var(--s-muted)}
.s-d-bmr-lbl{margin-top:5px;font:400 8px/1.5 var(--s-mono);letter-spacing:.8px;text-transform:uppercase;color:var(--s-muted)}

/* kartu cincin */
/* Sewarna kotak popupnya. Hanya .s-d-hero yang timbul -- di dashboard pun
   begitu: .ckd-hero memakai --bg-raise, .ckd-metrics-box --bg-soft. */
.s-rings{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:13px 14px;margin-bottom:12px;border:1px solid var(--s-line);border-radius:3px;background:var(--s-surface)}
.s-ring-item{text-align:center;min-width:0}
/* 50px: cincin ini menampilkan satu angka dua digit — lebih besar dari itu
   hanya memakan tinggi tanpa jadi lebih terbaca. */
.s-ring{width:100%;max-width:50px}
.s-ring-bg{fill:none;stroke:var(--s-line);stroke-width:3}
.s-ring-fg{fill:none;stroke-width:3;stroke-linecap:round;transition:stroke-dasharray .5s var(--s-ease)}
.s-ring-txt{fill:var(--s-text);font:500 10px var(--s-mono);text-anchor:middle}
.s-ring.r-dr .s-ring-fg{stroke:var(--m-dr,#5b9cf8)}
.s-ring.r-auth .s-ring-fg{stroke:var(--m-auth,#27c93f)}
.s-ring.r-spam .s-ring-fg{stroke:var(--m-spam,#f87171)}
.s-ring-lbl{margin-top:6px;font:400 8.5px/1.45 var(--s-mono);letter-spacing:.6px;text-transform:uppercase;color:var(--s-muted);word-break:break-word}

/* kartu seksi */
/* Sewarna kotak popupnya, sama dengan .ckd-sec di dashboard: yang
   memisahkan cuma garisnya. Latar yang lebih gelap membuat tiap bagian
   terbaca sebagai jendela terpisah, padahal ia bagian dari satu laporan. */
.s-d-sec{padding:16px 18px;margin-bottom:14px;border:1px solid var(--s-line);border-radius:3px;background:var(--s-surface)}
.s-d-sec .s-d-sec-t{display:flex;align-items:center;gap:8px;margin:0 0 10px;font:500 12.5px/1.4 var(--s-font);letter-spacing:-.1px;color:var(--s-text)}
/* --s-mark, BUKAN --s-accent-ink. Ikon ini tanda hias, bukan teks: emas
   teks sengaja digelapkan agar terbaca (#8a6d00), dan pada ikon sekecil
   ini hasilnya terlihat cokelat, bukan emas. */
/* Ikon judul bagian: ikut warna teks, BUKAN emas. Emas di sistem ini
   berarti "ini yang akan kamu tekan" atau "ini nilainya" -- bintang BMR,
   tombol utama, titik penanda label. Ikon yang cuma menamai sebuah bagian
   ("Keyword teratas", "Negara teratas") bukan keduanya, dan mewarnainya
   emas membuat penanda itu berhenti berarti apa-apa. */
.s-d-sec-t i{color:inherit;font-size:11.5px}
.s-d-sec-t em{margin-left:auto;font:400 9px/1.5 var(--s-mono);font-style:normal;letter-spacing:.6px;text-transform:uppercase;color:var(--s-muted)}
.s-d-2col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:14px}
.s-d-2col>.s-d-sec{margin-bottom:0}

/* grafik tren + tooltip */
.s-trend-wrap{position:relative}
/* height:auto, BUKAN angka tetap. Tinggi tetap 96px sementara viewBox-nya
   90 membuat gambarnya diregangkan menegak; digabung dengan
   preserveAspectRatio="none" di markupnya, regangannya jadi tidak sama
   antara mendatar dan menegak -- garis 2,5 tergambar 3,1px mendatar dan
   2,7px menegak, ujung bulatnya jadi lonjong, dan kemiringan garisnya
   sendiri berubah. Dashboard memakai height:auto + xMidYMid meet. */
.s-trend-svg{display:block;width:100%;height:auto;overflow:visible}
/* Gradien, bukan opacity rata. Isian rata .1 berakhir dengan batas tegas
   di dasar grafik; dashboard meluruhkannya ke nol lewat linearGradient
   .18 -> 0 sehingga yang terbaca tetap GARISNYA, bukan bidangnya.
   Gradiennya didefinisikan di dalam SVG dan memakai currentColor, jadi
   ia ikut hijau/merah tanpa aturan tambahan. */
.s-trend-area{fill:url(#sTrendGrad);stroke:none}
/* 2,5 seperti .ckd-trend di dashboard. Pada SVG yang melar mengikuti
   lebar popup, garis 1,5 terlihat jauh lebih tipis daripada yang
   dimaksud -- tebalnya ikut mengecil saat viewBox diperkecil. */
/* stroke:currentColor -- INI yang hilang. Aturan ini tidak pernah menyebut
   stroke sama sekali, dan bawaan SVG untuk stroke adalah none. Jadi garis
   trennya TIDAK PERNAH tergambar: yang selama ini terlihat sebagai "garis"
   cuma tepi atas isian gradien, yang memang lembut dan pudar. Itu sebabnya
   ia terbaca jauh lebih tipis daripada garis 2,5px milik dashboard --
   dashboard menyetel stroke langsung di markupnya (stroke="var(--green)"),
   sementara di sini warnanya diserahkan ke CSS yang lupa menyebutnya.
   currentColor, bukan warna tetap, supaya ia ikut .s-trend.is-up/.is-down. */
.s-trend-line{fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
/* Garis bantu mendatar, sama dengan dashboard: tanpa itu tinggi
   garisnya tidak punya acuan apa pun. */
.s-trend-grid{stroke:var(--s-line);stroke-width:1}
/* Garis tegak putus-putus yang mengikuti titik yang sedang ditunjuk.
   Tanpa ini tooltip melayang tanpa menunjuk apa pun. */
.s-trend-vline{stroke:var(--s-muted);stroke-width:1;stroke-dasharray:3 3;display:none}
/* Titik SELALU terlihat, sama dengan dashboard. Versi sebelumnya
   menyembunyikannya sampai disorot -- di layar sentuh itu berarti tidak
   pernah terlihat, dan grafiknya kehilangan penanda bulannya. */
.s-trend-dot{fill:currentColor}
.s-trend-hit{fill:transparent;cursor:pointer}
.s-trend.is-up{color:var(--m-auth,#27c93f)}
.s-trend.is-down{color:var(--m-spam,#f87171)}
.s-trend-x{display:flex;justify-content:space-between;gap:4px;margin-top:7px;font:400 9px/1.5 var(--s-mono);color:var(--s-muted)}
.s-trend-x span{flex:1;text-align:center;white-space:nowrap;overflow:hidden}
/* Tepinya --s-line, bukan --s-muted. --s-muted itu warna TEKS sekunder
   (#a1a7b0); dipakai sebagai garis ia jadi bingkai putih menyala di
   sekeliling tooltip. Latarnya --s-raised supaya terangkat dari kartunya,
   sama dengan .ckd-tip yang memakai --bg-raise. */
.s-trend-tip{position:absolute;display:none;z-index:5;pointer-events:none;transform:translateX(-50%);white-space:nowrap;padding:7px 11px;border:1px solid var(--s-line);border-radius:3px;background:var(--s-raised);box-shadow:0 12px 30px -16px #000a}
.s-trend-tip-d{margin-bottom:4px;font:400 9px/1.4 var(--s-mono);color:var(--s-muted)}
.s-trend-tip-v{display:flex;align-items:center;gap:7px;font:400 11px/1.4 var(--s-font);color:var(--s-muted)}
.s-trend-tip-v b{font:500 11px var(--s-mono);color:var(--s-text)}
/* Titik tooltip mengambil warna TREN, bukan currentColor: induknya
   .s-trend-tip-v menetapkan warna teks abu, jadi currentColor di sini
   menghasilkan titik abu yang tidak menandai apa pun. */
.s-trend-tip-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
/* Emas, sama dengan .ckd-tip-dot di dashboard. Titik ini menandai NILAI
   yang sedang dibaca, bukan arah trennya -- arah sudah dinyatakan warna
   garisnya. */
.s-trend-tip-dot{background:var(--s-mark)}



/* tabel keyword & halaman */
.s-d-table{width:100%;border-collapse:collapse;font:400 12.5px/1.55 var(--s-font)}
.s-d-table th{padding:8px 10px;text-align:left;white-space:nowrap;border-bottom:1px solid var(--s-line);font:400 9px/1.6 var(--s-mono);letter-spacing:1px;text-transform:uppercase;color:var(--s-muted)}
.s-d-table td{padding:9px 10px;border-bottom:1px solid var(--s-line);color:var(--s-text)}
.s-d-table tr:last-child td{border-bottom:0}
.s-d-table th:not(:first-child),.s-d-table td:not(:first-child){text-align:right}
.s-d-table th:first-child,.s-d-table td:first-child{padding-left:0;overflow-wrap:anywhere}
.s-d-table th:last-child,.s-d-table td:last-child{padding-right:0}
/* Mewarisi huruf sel tabel, sama seperti .ckd-url di dashboard yang tidak
   menyetel apa pun selain pemenggalan. Monospasi 11,5px membuat kolom ini
   terbaca sebagai kode, padahal ia nama halaman. */
.s-d-url{font:400 12.5px/1.55 var(--s-font);color:var(--s-text);word-break:break-all}
/* Kapsul emas, sama dengan .ckd-pos di dashboard. Emas di sini masih
   mengikuti aturannya: peringkat di Google itu NILAI, sejenis dengan
   bintang BMR -- bukan ikon dan bukan hiasan. */
.s-pos{display:inline-block;min-width:30px;padding:2px 7px;border:1px solid var(--s-mark-line);border-radius:20px;font:400 10px var(--s-mono);color:var(--s-accent-ink);background:var(--s-mark-dim)}

/* negara: bilah emas, sama dengan dashboard */
.s-cty{display:flex;align-items:center;gap:10px;padding:5px 0}
/* Bendera + kode dibungkus satu kelompok berlebar tetap, sama dengan
   .ckd-src-l di dashboard: tanpa lebar tetap, bilah di kanannya mulai
   pada posisi berbeda tiap baris. */
.s-cty-l{display:inline-flex;align-items:center;gap:7px;width:62px;flex:none}
.s-flag{width:18px;height:auto;border-radius:2px;flex:none}
.s-cty-c{font:400 11px var(--s-mono);color:var(--s-muted)}
.s-cty-bar{flex:1;height:5px;border-radius:3px;background:var(--s-line);overflow:hidden}
.s-cty-bar i{display:block;height:100%;border-radius:3px;background:var(--s-mark)}
.s-cty-v{flex:none;width:48px;text-align:right;font:400 11px var(--s-mono);color:var(--s-muted)}

@media(max-width:700px){
    .s-d-hero{grid-template-columns:1fr}
    .s-d-bmr{text-align:left;padding-left:0;padding-top:14px;border-left:0;border-top:1px solid var(--s-line)}
    .s-rings{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
    .s-d-2col{grid-template-columns:1fr}
}

/* ── Teks yang menyusun diri ──
   Huruf asli TIDAK pernah ditukar. Ia cuma dibuat tembus pandang selama giliran
   acaknya, dan aksara acak digambar di ::after di atasnya. Karena kotak huruf
   aslinya yang tetap memegang tata letak, tidak ada satu piksel pun yang
   bergeser selama animasi -- dan pembaca layar maupun mesin pencari tetap
   melihat judul yang utuh.

   data-acak kosong = huruf belum dapat giliran: aslinya tembus pandang,
   ::after tidak menggambar apa-apa, tapi ruangnya sudah dipesan. */
.s-scr{position:relative}
.s-scr[data-acak]{color:transparent}
.s-scr[data-acak]::after{
    content:attr(data-acak); position:absolute; top:0; left:50%;
    /* --sk menyetel lebar aksara acak agar pas di kotak huruf aslinya. Tanpa
       itu glyph lebar di slot sempit meluber ke huruf tetangganya. */
    /* --ty menurunkan aksara ke tempatnya (dipakai gulungan merek);
       --sk menyetel lebarnya agar pas di kotak huruf aslinya. */
    transform:translate(-50%,var(--ty,0)) scaleX(var(--sk,1)); transform-origin:center top;
    color:var(--s-text); pointer-events:none;
}

/* Lambang di navbar berputar saat disorot; huruf di sebelahnya berganti
   salinan. Keduanya dipicu dari satu tautan yang sama.

   Tiap huruf punya salinan kedua di ::before yang menunggu tepat satu tinggi
   baris di atasnya. Saat digeser 100% ke bawah, yang asli keluar dari jendela
   dan salinannya mendarat pas di tempatnya. Karena yang bergerak cuma
   transform, seluruhnya dikerjakan compositor -- tidak ada satu piksel pun yang
   digambar ulang, dan itulah yang membuatnya terasa halus.

   overflow:hidden dipasang di kata utuhnya, bukan di tiap huruf: satu jendela
   untuk sepuluh huruf, bukan sepuluh jendela yang masing-masing harus diurus
   perataan garis dasarnya. */
/* overflow:hidden dan transisi transform dulu melayani gulungan salinan.
   Dengan aksara acak keduanya tidak dipakai lagi: yang berubah cuma isi
   ::after, tidak ada yang bergerak keluar kotaknya. */
.studio-brand span{display:inline-flex}
.studio-brand .s-scr{display:inline-block}
/* Huruf asli dan salinannya digerakkan SENDIRI-SENDIRI, bukan oleh satu
   transform bersama. Dengan begitu jaraknya boleh lebih dari satu tinggi huruf
   (115%) sehingga yang lama benar-benar lewat ambang jendela, sementara yang
   baru tetap mendarat presisi di nol. */
/* Dipakai sekejap saat huruf dikembalikan ke posisi awal. Inline style
   tidak menjangkau ::before, jadi pengembalian tanpa transisi harus
   lewat kelas di induknya -- kalau tidak, salinannya akan terlihat
   melayang naik kembali. */
.studio-brand img{transition:transform .55s var(--s-ease)}
.studio-brand:hover img,.studio-brand:focus-visible img{transform:rotate(180deg)}
@media(prefers-reduced-motion:reduce){.studio-brand:hover img,.studio-brand:focus-visible img{transform:none}}

/* ── Lambang di puncak hero ──
   Tanpa pendar. Versi sebelumnya menganimasikan cahaya di sekelilingnya; yang
   pertama lewat filter drop-shadow (terlihat patah karena radius kaburnya
   dibulatkan ke nilai diskrit), lalu lewat opacity. Sekarang cahayanya dilepas
   seluruhnya, bukan sekadar diperhalus, jadi tidak ada lagi yang berdenyut di
   puncak halaman.

   Yang tersisa cuma koreografi masuk yang sama dengan h1, paragraf, dan
   tombolnya: berjalan sekali lalu berhenti. */
/* Putaran DIGABUNG ke dalam satu keyframe bersama gerak masuknya. Dua
   animasi yang sama-sama menyentuh transform tidak bisa berdampingan --
   yang belakangan menimpa seluruhnya, dan gerak masuknya akan hilang.

   Isian dibuat backwards, bukan both: both menahan nilai keyframe terakhir
   selamanya, dan transform yang tertahan itu akan mengalahkan putaran saat
   disorot di bawah. Dengan backwards, begitu animasinya selesai elemen
   kembali ke gaya dasarnya dan sorotnya bisa bekerja. */
.s-hero-mark{animation:s-mark-in 1.1s var(--s-ease) backwards;transition:transform .55s var(--s-ease)}
@keyframes s-mark-in{from{opacity:0;transform:translateY(16px) rotate(-180deg)}to{opacity:1;transform:translateY(0) rotate(0)}}
.s-hero-mark:hover{transform:rotate(180deg)}
@media(prefers-reduced-motion:reduce){.s-hero-mark:hover{transform:none}}
.s-hero .s-eyebrow{animation:s-enter .8s var(--s-ease) .06s both}

/* ══ Diagram alur pengecekan (beranda, bagian 03) ══
   Alurnya digambar, bukan diceritakan: satu rantai dari domain masuk sampai
   hasilnya diterima, bercabang dua di tengah — yang menyusun skor dan yang
   tidak — lalu bertemu lagi di basis data.

   Denyut dibuat dari stroke-dasharray + stroke-dashoffset, BUKAN <animateMotion>
   atau offset-path. Alasannya satu: aturan prefers-reduced-motion dan penjeda
   bagian-terlihat di studio.js hanya berkuasa atas animasi CSS — animasi SMIL
   akan terus berjalan walau pengunjung memintanya berhenti.

   Setiap jalur diberi pathLength="100" di markup, sehingga satu nilai dasharray
   berlaku sama untuk garis lurus 40px maupun kurva sepanjang ratusan piksel.

   max-width pada .s-flow-svg BUKAN hiasan: tanpa itu SVG melar mengikuti lebar
   wadah, dan seluruh isinya ikut membesar berapa pun angka di dalam viewBox
   dikecilkan. Dipatok sepadan dengan lebar viewBox supaya satu unit = satu
   piksel. */
.s-flow-fig{margin:0}
/* SVG-nya lebar; di layar sempit digeser, pola yang sama dengan tabel metrik
   di hero. min-width menjaga teks di dalamnya tetap terbaca alih-alih
   mengecil ikut lebar layar. */
.s-flow-canvas{overflow-x:auto;overscroll-behavior-x:contain}
.s-flow-canvas:focus-visible{outline:2px solid var(--s-muted);outline-offset:3px}
.s-flow-svg{display:block;width:100%;max-width:1040px;min-width:820px;height:auto;margin-inline:auto}

.s-fd-box{fill:var(--s-surface);stroke:var(--s-line);stroke-width:1}
.s-fd-line{fill:none;stroke:var(--s-line);stroke-width:1}
/* Jalur pintas digambar putus-putus: ia bukan bagian dari rantai, melainkan
   jalan lain yang hanya dipakai bila salinannya masih berlaku. */
.s-fd-dash{stroke-dasharray:3 4}
.s-fd-head{fill:var(--s-line)}
.s-fd-sep{fill:none;stroke:var(--s-line);stroke-width:1;opacity:.55}
.s-fd-sep-full{opacity:1}
.s-fd-ic{fill:none;stroke:var(--s-muted);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.s-fd-t{fill:var(--s-text);font:400 13px var(--s-font)}
.s-fd-s{fill:var(--s-muted);font:400 8.5px var(--s-mono);letter-spacing:.8px}
.s-fd-src{fill:var(--s-text);font:400 10px var(--s-mono)}
/* Nama penyedia jadi penanda kecil rata kanan: yang dicari pembaca adalah
   metriknya, penyedianya hanya keterangan. */
.s-fd-tag{fill:var(--s-muted);font:400 7.5px var(--s-mono);letter-spacing:.6px;text-anchor:end}
.s-fd-mid{text-anchor:middle}

/* Basis data: tutup elips di atas, dua rusuk melintang, dasar melengkung.

   Warna garis hanya ditulis di grup, tidak di tiap bagian: animasi kedip
   mengubah stroke milik grup, dan begitu bagian-bagiannya menetapkan stroke
   sendiri, nilai anak akan menang dan kedipnya tidak pernah terlihat. */
.s-fd-db{stroke:var(--s-line);stroke-width:1;animation:s-fd-store 2.4s var(--s-ease) infinite}
.s-fd-db-body{fill:var(--s-raised)}
.s-fd-db-lid{fill:var(--s-surface)}
.s-fd-db-rib{fill:none;opacity:.75}

/* Skor digambar sebagai cincin yang terisi saat denyut tiba, bukan angka diam. */
.s-fd-ring-bg{fill:none;stroke:var(--s-line);stroke-width:2.5}
.s-fd-ring{fill:none;stroke:var(--s-mark);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:0 100;animation:s-fd-fill 2.4s var(--s-ease) infinite}
@keyframes s-fd-fill{0%,22%{stroke-dasharray:0 100}55%,88%{stroke-dasharray:57 100}100%{stroke-dasharray:0 100}}

.s-fd-pulse{fill:none;stroke:var(--s-mark);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:9 100;stroke-dashoffset:109;animation:s-fd-run 2.4s linear infinite}
/* Jalur pintas berdenyut lebih lambat dan tidak sefase dengan rantai utama:
   ia jalur alternatif, bukan bagian dari urutan yang sama. */
.s-fd-pulse-alt{animation-duration:3.6s;animation-delay:1.2s;stroke-width:1.4}
@keyframes s-fd-run{to{stroke-dashoffset:0}}

.s-fd-src-dot{fill:var(--s-mark);opacity:.2;animation:s-fd-blink 2.4s var(--s-ease) infinite}
@keyframes s-fd-blink{0%,62%,100%{opacity:.2}18%,38%{opacity:1}}
/* Tabungnya berkedip tepat setelah denyut terakhir tiba — itulah saat
   hasilnya benar-benar ditulis. */
@keyframes s-fd-store{0%,58%,100%{stroke:var(--s-line)}72%,80%{stroke:var(--s-mark)}}

.s-flow-fig .s-flow-note{font-size:12px;line-height:1.75;color:var(--s-muted);max-width:760px;margin-top:16px}

@media(max-width:600px){
    .s-flow-svg{min-width:800px}
    .s-flow-fig .s-flow-note{font-size:12.5px;margin-top:12px}
}