/* =====================================================================
 * SEO ONE TOOLS — tema "Noir & Gold"
 * Dimuat PALING AKHIR di setiap halaman, jadi menimpa gaya bawaan halaman
 * tanpa mengubah markup/JS. Semua warna lewat variabel di :root.
 * ===================================================================== */

:root{
  --font-ui:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-display:"Playfair Display",Georgia,"Times New Roman",serif;
  --bg:#f6f1e7;--bg2:#efdfbb;--bg3:#efe7d8;
  --surface:rgba(255,255,255,.82);--surface2:#faf6ee;--surface-solid:#fffdf8;--th-bg:#f3ead7;
  --border:rgba(140,108,40,.2);--border-strong:rgba(168,130,47,.45);
  --text:#1c170f;--muted:#6f6656;
  --gold:#a8822f;--gold2:#c9a24e;--gold3:#8a6a20;
  --accent:#a8822f;--accent-h:#8f6d22;--accent2:#b8913d;
  --op:#0f8a5f;--danger:#c0392b;--code:#8a6a20;
  --on-gold:#1a1305;
  --glow:0 0 0 1px rgba(168,130,47,.18),0 18px 50px -18px rgba(120,88,20,.35);
  --shadow:0 1px 0 rgba(255,255,255,.7) inset,0 10px 30px -12px rgba(60,44,10,.18),0 30px 70px -30px rgba(60,44,10,.22);
  --shadow-sm:0 1px 2px rgba(60,44,10,.08);
  --ring:0 0 0 3px rgba(168,130,47,.22);
  --grad-gold:linear-gradient(135deg,#8a6a20 0%,#c9a24e 38%,#f0d898 52%,#c9a24e 66%,#8a6a20 100%);
  --grad-gold-soft:linear-gradient(90deg,#b8913d,#e2c278);
}
:root[data-theme=dark]{
  --bg:#060607;--bg2:#1c1508;--bg3:#0a0c11;
  --surface:rgba(19,19,22,.72);--surface2:rgba(255,255,255,.035);--surface-solid:#111114;--th-bg:#141417;
  --border:rgba(212,175,95,.14);--border-strong:rgba(212,175,95,.42);
  --text:#f3eee4;--muted:#a19a8a;
  --gold:#d4af5f;--gold2:#f4dc9a;--gold3:#a9823a;
  --accent:#d4af5f;--accent-h:#e9c87a;--accent2:#e2bf6e;
  --op:#3ecf8e;--danger:#ff6b6b;--code:#f4dc9a;
  --on-gold:#1a1305;
  --glow:0 0 0 1px rgba(212,175,95,.22),0 22px 60px -20px rgba(212,175,95,.28);
  --shadow:0 1px 0 rgba(255,255,255,.04) inset,0 18px 40px -18px rgba(0,0,0,.8),0 40px 90px -40px rgba(0,0,0,.9);
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --ring:0 0 0 3px rgba(212,175,95,.25);
  --grad-gold:linear-gradient(135deg,#a9823a 0%,#d4af5f 35%,#f7e3a8 50%,#d4af5f 65%,#a9823a 100%);
  --grad-gold-soft:linear-gradient(90deg,#c9a24e,#f4dc9a);
}

/* ---------- dasar ---------- */
html{scroll-behavior:smooth}
body{
  font-family:var(--font-ui)!important;letter-spacing:-.005em;color:var(--text);
  background:
    radial-gradient(1100px 620px at 85% -10%,var(--bg2),transparent 60%),
    radial-gradient(900px 600px at -5% 105%,var(--bg3),transparent 60%),
    var(--bg) fixed!important;
}
/* cahaya emas yang bergerak sangat pelan + tekstur halus */
body::before{
  content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(40% 35% at 20% 15%,rgba(212,175,95,.10),transparent 70%),
    radial-gradient(35% 30% at 80% 70%,rgba(212,175,95,.07),transparent 70%);
  animation:luxDrift 26s ease-in-out infinite alternate;
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root:not([data-theme=dark]) body::before{opacity:.8}
@keyframes luxDrift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(4%,3%,0) scale(1.08)}}
::selection{background:rgba(212,175,95,.35);color:var(--text)}
*{scrollbar-width:thin;scrollbar-color:rgba(212,175,95,.35) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:rgba(212,175,95,.28);border-radius:10px;border:3px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(212,175,95,.5);background-clip:padding-box}

/* ---------- tipografi ---------- */
/* warna solid, BUKAN gradasi teks: background-clip:text mengubah emoji di judul jadi siluet */
h1{
  font-family:var(--font-display)!important;font-weight:700!important;
  font-size:clamp(1.7rem,2.4vw,2.3rem)!important;letter-spacing:-.01em!important;line-height:1.15;
  margin:6px 0 10px!important;color:var(--text)!important;
  text-shadow:0 2px 24px rgba(212,175,95,.18);
}
h1::after{content:"";display:block;width:64px;height:2px;margin-top:12px;border-radius:2px;background:var(--grad-gold-soft)}
.card h2,h2{font-family:var(--font-ui);font-weight:700;letter-spacing:-.015em}
.sub{color:var(--muted)!important;font-size:.95rem!important}
code{font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;color:var(--code)}

/* ---------- bar atas: brand + menu + user ---------- */
.chrome{position:sticky;top:0;z-index:50;padding:14px 22px 10px!important}
.topbar,.appbar{
  background:color-mix(in srgb,var(--surface-solid) 70%,transparent)!important;
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--border)!important;border-radius:18px!important;
  padding:10px 12px 10px 18px!important;
  box-shadow:var(--shadow-sm),0 12px 40px -24px rgba(0,0,0,.6)!important;
  position:relative;
}
.appbar{position:sticky;top:12px;z-index:50}
.topbar::after,.appbar::after{
  content:"";position:absolute;left:24px;right:24px;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.55;
}
.brandtop{font-family:var(--font-display)!important;font-size:17px!important;font-weight:700!important;letter-spacing:.02em!important}
.brandtop b{background:var(--grad-gold)!important;background-size:200% 100%!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;animation:luxShine 6s linear infinite}
.brandtop .brandlogo{width:30px!important;height:30px!important;filter:drop-shadow(0 4px 12px rgba(212,175,95,.35))}
.nav a.nl{
  color:var(--muted)!important;font-weight:600!important;font-size:13.5px!important;
  padding:9px 16px!important;border-radius:11px!important;position:relative;
  transition:color .2s,background .2s!important;
}
.nav a.nl:hover{color:var(--text)!important;background:rgba(212,175,95,.08)!important}
.nav a.nl.on,.nav a.nl.on:hover{
  color:var(--on-gold)!important;background:var(--grad-gold)!important;background-size:220% 100%!important;
  box-shadow:0 6px 20px -6px rgba(212,175,95,.6),inset 0 1px 0 rgba(255,255,255,.45)!important;
  animation:luxShine 7s linear infinite;
}
@keyframes luxShine{0%{background-position:0% 50%}100%{background-position:220% 50%}}
.who{color:var(--muted)!important}
.who .role{color:var(--gold)!important}
.badge.admin{background:rgba(212,175,95,.14)!important;color:var(--gold)!important;border:1px solid rgba(212,175,95,.35)}
.badge.operator{background:rgba(62,207,142,.12)!important;color:var(--op)!important;border:1px solid rgba(62,207,142,.3)}
a.out,.btn-ghost{
  border-radius:10px!important;border:1px solid var(--border)!important;background:transparent!important;
  color:var(--muted)!important;transition:.2s!important;
}
a.out:hover,.btn-ghost:hover{color:var(--text)!important;border-color:var(--border-strong)!important;background:rgba(212,175,95,.06)!important}
a.out.admin,.btn-ghost.admin{color:var(--gold)!important;border-color:rgba(212,175,95,.3)!important}
.theme-tgl{
  background:transparent!important;border:1px solid var(--border)!important;color:var(--muted)!important;
  border-radius:999px!important;font-weight:600!important;transition:.2s!important;
}
.theme-tgl:hover{color:var(--text)!important;border-color:var(--border-strong)!important}

/* ---------- kartu / panel ---------- */
.card{
  background:linear-gradient(var(--surface),var(--surface)) padding-box,
             linear-gradient(160deg,rgba(212,175,95,.38),rgba(212,175,95,.06) 35%,rgba(212,175,95,.04) 65%,rgba(212,175,95,.28)) border-box!important;
  border:1px solid transparent!important;border-radius:20px!important;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:var(--shadow)!important;padding:24px!important;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s!important;
}
.card:hover{box-shadow:var(--glow),var(--shadow)!important}
.card h2{font-size:1.12rem!important;gap:10px!important}
.card h2::before{
  content:"";width:4px;height:18px;border-radius:3px;background:var(--grad-gold-soft);flex:none;
  box-shadow:0 0 12px rgba(212,175,95,.5);
}
.muted,.hint{color:var(--muted)!important}
.badge{
  background:rgba(212,175,95,.12)!important;color:var(--gold)!important;border:1px solid rgba(212,175,95,.3);
  font-weight:700!important;letter-spacing:.04em;border-radius:999px!important;
}
.card h2 .badge[style]{border-color:transparent}

/* ---------- tombol ---------- */
button,.btn{
  font-family:var(--font-ui)!important;font-weight:700!important;letter-spacing:.01em;
  color:var(--on-gold)!important;background:var(--grad-gold)!important;background-size:200% 100%!important;
  border:0!important;border-radius:12px!important;
  box-shadow:0 8px 22px -10px rgba(212,175,95,.75),inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(0,0,0,.12)!important;
  transition:background-position .6s ease,transform .15s ease,box-shadow .25s ease,filter .2s!important;
}
button:hover:not(:disabled),.btn:hover{background-position:100% 50%!important;transform:translateY(-1px);box-shadow:0 14px 30px -12px rgba(212,175,95,.85),inset 0 1px 0 rgba(255,255,255,.5)!important}
button:active:not(:disabled){transform:translateY(0)}
button:disabled{opacity:.45!important;filter:grayscale(.3);box-shadow:none!important}
button.alt,button.ghost,button.sm.ghost,.mini:not(.danger){
  color:var(--text)!important;background:var(--surface2)!important;
  border:1px solid var(--border)!important;box-shadow:none!important;
}
button.alt:hover:not(:disabled),button.ghost:hover:not(:disabled){border-color:var(--border-strong)!important;background:rgba(212,175,95,.08)!important}
button.danger,.mini.danger,button.dz{
  color:#fff!important;background:linear-gradient(135deg,#a8322b,#d9534f)!important;
  box-shadow:0 8px 22px -12px rgba(217,83,79,.8)!important;
}
.theme-tgl{box-shadow:none!important;background:transparent!important;color:var(--muted)!important;font-weight:600!important}
/* tombol ikon kecil di dalam kolom input (Panel Admin: lihat/buat/salin password) */
button.pw-ic{background:transparent!important;box-shadow:none!important;color:var(--muted)!important;border-radius:8px!important;padding:4px 7px!important}
button.pw-ic:hover:not(:disabled){background:rgba(212,175,95,.12)!important;transform:none;box-shadow:none!important}
.topbtns button{border-radius:16px!important;padding:16px 20px!important;text-align:left}
.topbtns button.alt{background:var(--surface)!important}
.topbtns .cap{opacity:.75!important;font-weight:500!important}

/* ---------- input ---------- */
input[type=text],input[type=password],input[type=number],input[type=search],input[type=email],textarea,select{
  font-family:var(--font-ui);background:color-mix(in srgb,var(--surface-solid) 65%,transparent)!important;
  border:1px solid var(--border)!important;color:var(--text)!important;border-radius:12px!important;
  transition:border-color .2s,box-shadow .2s!important;
}
textarea{font-family:"JetBrains Mono",ui-monospace,Consolas,monospace!important}
input:focus,textarea:focus,select:focus{outline:none!important;border-color:var(--gold)!important;box-shadow:var(--ring)!important}
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--muted) 75%,transparent)!important}
input[type=file]{color:var(--muted)}
input[type=file]::file-selector-button{
  font-family:var(--font-ui);font-weight:600;margin-right:12px;padding:8px 14px;border-radius:10px;cursor:pointer;
  border:1px solid var(--border-strong);background:rgba(212,175,95,.1);color:var(--gold);
}
.uploadbox,.dropzone{border:1.5px dashed var(--border-strong)!important;background:rgba(212,175,95,.035)!important;border-radius:16px!important}
.uploadbox.compact{border-style:solid!important;border-color:var(--border)!important}
pre{background:color-mix(in srgb,var(--surface-solid) 70%,transparent)!important;border:1px solid var(--border)!important;border-radius:12px!important}

/* ---------- statistik & ringkasan ---------- */
.sumcard,.sumbox{
  background:linear-gradient(180deg,rgba(212,175,95,.07),rgba(212,175,95,.015))!important;
  border:1px solid var(--border)!important;border-radius:16px!important;
}
.sumcard .v,.sumbox .n{font-family:var(--font-display)!important;font-weight:700!important;font-size:1.8rem!important}
.sumcard::before{background:var(--grad-gold-soft)!important;opacity:.9!important}
.sumcard.ok::before{background:var(--op)!important}
.sumcard.cut::before{background:var(--danger)!important}
.stat,.chip{border-radius:999px!important;border:1px solid var(--border)!important;background:var(--surface2)!important}
.stat b{color:var(--gold)!important}
.stat.on,.chip.clk.active{outline:0!important;border-color:var(--gold)!important;background:rgba(212,175,95,.14)!important;box-shadow:var(--ring)}
.notice{border-radius:14px!important}
.notice.ok{border-color:rgba(62,207,142,.45)!important;background:rgba(62,207,142,.08)!important;color:var(--op)!important}
.notice.warn,.warn{color:var(--gold)!important}
.notice.warn{border-color:rgba(212,175,95,.45)!important;background:rgba(212,175,95,.08)!important}

/* ---------- progress ---------- */
.pbar{height:12px!important;border-radius:999px!important;background:rgba(212,175,95,.07)!important;border:1px solid var(--border)!important}
.pbar>i{border-radius:999px!important;background:var(--grad-gold)!important;background-size:200% 100%!important;box-shadow:0 0 14px rgba(212,175,95,.55)}
.pbar.run>i{animation:luxShine 1.6s linear infinite!important}
.live-dot{background:var(--gold)!important;box-shadow:0 0 0 0 rgba(212,175,95,.6);animation:luxPing 1.6s infinite!important}
@keyframes luxPing{0%{box-shadow:0 0 0 0 rgba(212,175,95,.55)}100%{box-shadow:0 0 0 9px rgba(212,175,95,0)}}

/* ---------- tabel ---------- */
.resgrid{border:1px solid var(--border)!important;border-radius:16px!important;background:color-mix(in srgb,var(--surface-solid) 55%,transparent)}
table{border-collapse:separate;border-spacing:0}
.restab th,table th{
  background:var(--th-bg)!important;color:var(--gold)!important;font-size:.68rem!important;
  letter-spacing:.09em!important;text-transform:uppercase;font-weight:700!important;
  box-shadow:inset 0 -1px 0 var(--border-strong)!important;
}
.restab td,table td{border-bottom:1px solid color-mix(in srgb,var(--border) 70%,transparent)!important}
.restab tbody tr:nth-child(even){background:rgba(212,175,95,.025)!important}
.restab tbody tr:hover,table tbody tr:hover{background:rgba(212,175,95,.08)!important}
.restab a.cek{background:rgba(212,175,95,.12)!important;color:var(--gold)!important;border:1px solid rgba(212,175,95,.35);border-radius:8px!important}
.restab a.cek:hover{background:var(--grad-gold)!important;color:var(--on-gold)!important}
.b-yes{background:rgba(62,207,142,.12)!important;color:var(--op)!important;border:1px solid rgba(62,207,142,.4)!important}
a.dl{color:var(--gold)!important;text-decoration:none;border-bottom:1px dashed rgba(212,175,95,.4)}
a.dl:hover{border-bottom-style:solid}

/* ---------- beranda (dashboardPage) ---------- */
.hero{position:relative;margin:26px 0 30px;padding:46px 40px;border-radius:26px;overflow:hidden;
  background:linear-gradient(var(--surface),var(--surface)) padding-box,
             linear-gradient(135deg,rgba(212,175,95,.55),rgba(212,175,95,.05) 40%,rgba(212,175,95,.35)) border-box;
  border:1px solid transparent;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.hero::before{content:"";position:absolute;width:520px;height:520px;right:-140px;top:-260px;border-radius:50%;
  background:radial-gradient(circle,rgba(212,175,95,.22),transparent 65%);pointer-events:none}
.hero .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.hero .eyebrow::before{content:"";width:26px;height:1px;background:var(--gold)}
.hero h1{font-size:clamp(2rem,3.6vw,3.1rem)!important;margin:14px 0 10px!important}
.hero h1::after{display:none}
.hero h1 em{font-style:italic;background:var(--grad-gold);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:luxShine 6s linear infinite}
.hero p{color:var(--muted);margin:0;max-width:620px;font-size:1rem;line-height:1.7}
.grid{gap:22px!important;grid-template-columns:repeat(auto-fill,minmax(310px,1fr))!important}
.grid .card{padding:28px!important;overflow:hidden}
.grid .card:hover{transform:translateY(-6px)}
.grid .card::before{display:none!important}
.grid .card .ic{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:18px;
  background:linear-gradient(145deg,rgba(212,175,95,.22),rgba(212,175,95,.04));border:1px solid rgba(212,175,95,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 26px -12px rgba(212,175,95,.6)}
.grid .card h3{font-family:var(--font-display)!important;font-size:1.45rem!important;font-weight:700!important;margin:0 0 12px!important}
.grid .card .feat{list-style:none;padding:0!important;margin:0 0 22px!important;line-height:1.9!important}
.grid .card .feat li{position:relative;padding-left:20px}
.grid .card .feat li::before{content:"";position:absolute;left:2px;top:.78em;width:7px;height:7px;transform:rotate(45deg);background:var(--grad-gold-soft);border-radius:1px}
.grid .card .go{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.88rem;color:var(--gold);letter-spacing:.02em}
.grid .card .go i{font-style:normal;transition:transform .25s}
.grid .card:hover .go i{transform:translateX(5px)}
.grid .card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,236,190,.10) 48%,transparent 66%);background-size:250% 100%;background-position:120% 0;transition:background-position .9s ease}
.grid .card:hover::after{background-position:-40% 0}
.divider{background:linear-gradient(90deg,transparent,var(--gold),transparent)!important;opacity:.4!important}

/* ---------- halaman login ---------- */
form.box{
  width:380px!important;padding:44px 36px!important;border-radius:24px!important;
  background:linear-gradient(var(--surface),var(--surface)) padding-box,
             linear-gradient(160deg,rgba(212,175,95,.6),rgba(212,175,95,.06) 45%,rgba(212,175,95,.4)) border-box!important;
  border:1px solid transparent!important;box-shadow:var(--shadow),0 0 80px -30px rgba(212,175,95,.45)!important;
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
}
form.box .dot{background:var(--grad-gold)!important;width:60px!important;height:60px!important;border-radius:18px!important;box-shadow:0 14px 34px -12px rgba(212,175,95,.8)}
form.box h1{font-size:1.9rem!important}
form.box h1::after{margin:12px auto 0}
form.box input{padding:13px 15px!important}

/* ---------- aksesibilitas & layar kecil ---------- */
:focus-visible{outline:none!important;box-shadow:var(--ring)!important}
@media(max-width:700px){
  .hero{padding:30px 22px}
  .card{padding:18px!important}
  .chrome{position:static}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}