/* ==========================================================================
Tongkrongan Clipper - UI Kit
Styling komponen biar dashboard / member area konsisten sama landing page.
CARA PAKAI:
1) Import font Google (Sora, Plus Jakarta Sans, Space Mono) - sudah via @import di bawah,
atau taruh font di biar lebih cepat.
2) di halaman dashboard.
3) Pakai class .tk-* pada elemen (lihat styleguide.html buat contoh markup).
Semua warna diambil dari CSS variables di :root - ganti di satu tempat kalau perlu.
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');
:root{
/* ====== DESIGN SYSTEM - token warna disamakan 1:1 dengan landing page
(deploy/index.html :root). Ini sumber tunggal warna buat member + admin area. ====== */
color-scheme:dark;
/* surfaces */
--bg:#000000;
--bg-2:#070708;
--panel:#0a0a0b; /* card gelap (fitur/campaign) */
--panel-soft:#18181d; /* card netral (testimoni/faq/stat) - tambahan komponen */
--panel-2:#131316; /* samakan dgn landing */
--glass:rgba(22,15,44,.55);
--field:#141417; /* background input/field - samakan dgn landing (.su-form select) */
/* text */
--ink:#f4f1fc;
--muted:#aeadb6;
--faint:#94929e;
/* brand */
--v:#8b6bff; --v-hi:#cfc2ff; --v-deep:#5a34e6;
--cy:#38e0ff; --cy-hi:#a9f1ff; --cy-deep:#0bb6d6;
--good:#5ce9ac; --bad:#e0608a;
/* lines */
--line:rgba(150,120,255,.12); /* samakan dgn landing */
--line-2:rgba(163,133,255,.28);
/* gradients */
--grad:linear-gradient(135deg,#e7dfff 0%,#9a7dff 42%,#5f39ea 100%);
--grad-2:linear-gradient(135deg,#9f81ff,#5f39e6);
--grad-cy:linear-gradient(135deg,#bff3ff 0%,#38e0ff 45%,#0bb6d6 100%);
--grad-soft:linear-gradient(150deg,rgba(139,107,255,.22),rgba(90,52,230,.05));
/* type */
--sans:"Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
--display:"Sora",var(--sans);
--mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
--radius:18px;
}
/* Opsional: kelas pembungkus area dashboard */
.tk{font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased}
.tk *,.tk *::before,.tk *::after{box-sizing:border-box}
/* -------- Buttons -------- */
.tk-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--display);font-weight:600;font-size:15px;line-height:1;border-radius:12px;padding:13px 24px;cursor:pointer;border:1px solid transparent;text-decoration:none;transition:transform .15s,box-shadow .2s,background .2s}
.tk-btn:disabled,.tk-btn[disabled]{opacity:.45;cursor:not-allowed;filter:grayscale(.3);box-shadow:none;transform:none}
.tk-btn:disabled::after,.tk-btn[disabled]::after{display:none}
.tk-btn-primary{background:var(--grad);color:#fff;text-shadow:0 1px 2px rgba(28,14,66,.4);position:relative;overflow:hidden;box-shadow:0 14px 38px -12px rgba(139,107,255,.8),inset 0 1px 0 rgba(255,255,255,.35)}
/* shine sweep - sama persis kayak tombol di landing page */
.tk-btn-primary::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.55) 48%,rgba(255,255,255,.55) 52%,transparent 66%);
transform:translateX(-135%);animation:btnsweep 3.6s ease-in-out infinite}
.tk-btn-primary>*{position:relative;z-index:1}
.tk-btn-primary:hover{transform:translateY(-2px);box-shadow:0 22px 52px -12px rgba(139,107,255,.95),inset 0 1px 0 rgba(255,255,255,.5)}
.tk-btn-primary:hover::after{animation-duration:1.4s}
@keyframes btnsweep{0%{transform:translateX(-135%)}55%,100%{transform:translateX(135%)}}
.tk-btn-ghost{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.2);color:var(--ink)}
.tk-btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.32)}
.tk-btn-danger{background:rgba(224,96,138,.14);border-color:rgba(224,96,138,.4);color:var(--bad)}
.tk-btn-danger:hover{background:rgba(224,96,138,.24);border-color:rgba(224,96,138,.6)}
.tk-btn-sm{padding:9px 16px;font-size:13.5px;border-radius:10px}
/* -------- Card base -------- */
.tk-card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px;transition:transform .25s cubic-bezier(.22,.61,.36,1),border-color .25s}
.tk-card:hover{border-color:var(--line-2)}
.tk-card--neutral{background:var(--panel-soft)}
/* -------- Badge / pill -------- */
.tk-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;border-radius:999px;padding:5px 11px;font-weight:700}
.tk-badge--good{color:var(--good);background:rgba(92,233,172,.1);border:1px solid rgba(92,233,172,.3)}
.tk-badge--violet{color:var(--v-hi);background:var(--grad-soft);border:1px solid var(--line-2)}
.tk-badge--wait{color:var(--faint);background:rgba(150,120,255,.08);border:1px solid var(--line)}
.tk-badge--calc{color:#ffce6b;background:rgba(255,190,80,.12);border:1px solid rgba(255,190,80,.32)}
/* -------- Stat tile -------- */
.tk-stat .n{font-family:var(--display);font-weight:800;font-size:34px;letter-spacing:-.02em;color:#fff;line-height:1}
.tk-stat .n.is-grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.tk-stat .n.is-cy{background:var(--grad-cy);-webkit-background-clip:text;background-clip:text;color:transparent}
.tk-stat .l{font-size:12.5px;color:var(--muted);margin-top:6px}
/* -------- Progress bar -------- */
.tk-prog{height:7px;border-radius:999px;background:rgba(150,120,255,.14);overflow:hidden}
.tk-prog>i{display:block;height:100%;background:var(--grad);border-radius:999px;box-shadow:0 0 14px rgba(139,107,255,.6)}
/* -------- Form input -------- */
.tk-field{display:flex;flex-direction:column;gap:8px}
.tk-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.tk-input{width:100%;background:var(--field);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:13px 15px;color:var(--ink);font-family:var(--sans);font-size:15px;outline:none;transition:border-color .2s}
.tk-input:focus{border-color:var(--v)}
.tk-input::placeholder{color:var(--faint)}
/* -------- Campaign card -------- */
@property --csweep{syntax:"";inherits:false;initial-value:0deg}
.tk-camp{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:20px;overflow:hidden;transition:transform .18s,border-color .2s}
.tk-camp:hover{transform:translateY(-3px);border-color:var(--line-2)}
.tk-camp::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;padding:1.6px;background:conic-gradient(from var(--csweep),transparent 0deg 250deg,rgba(190,200,255,.35) 288deg,#fff 316deg,var(--v) 338deg,transparent 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .25s}
.tk-camp:hover::after{opacity:1;animation:csweep 2.4s linear infinite}
@keyframes csweep{to{--csweep:360deg}}
.tk-camp__img{display:block;position:relative;aspect-ratio:1200/800;overflow:hidden;background:radial-gradient(90% 120% at 70% 10%,#7b52ec,#33196e 60%,#0d0820);text-decoration:none;color:inherit;cursor:pointer}
.tk-camp__img img{width:100%;height:100%;object-fit:cover;display:block}
.tk-camp__img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(8,5,18,.9))}
/* watermark ukuran rekomendasi - nempel di banner kosong (belum ada foto asli), ilang otomatis begitu banner_url diisi */
.tk-banner-size{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;font-family:var(--mono);font-size:13px;letter-spacing:.08em;color:rgba(255,255,255,.22);white-space:nowrap;pointer-events:none;text-align:center}
.tk-banner-size small{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;margin-top:4px;color:rgba(255,255,255,.16)}
.tk-camp__tag{position:absolute;top:14px;right:14px;z-index:2;font-family:var(--display);font-weight:600;font-size:12.5px;color:#fff;background:rgba(16,11,34,.42);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px);border-radius:999px;padding:8px 15px}
.tk-camp__brand{position:absolute;left:17px;bottom:15px;z-index:2;font-family:var(--display);font-weight:700;font-size:16.5px;color:#fff}
.tk-camp__joined{position:absolute;right:14px;bottom:15px;z-index:2;display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.03em;color:#5ce9ac;background:rgba(10,26,20,.5);border:1px solid rgba(92,233,172,.42);backdrop-filter:blur(8px);border-radius:999px;padding:6px 10px}
.tk-camp__joined svg{width:12px;height:12px}
.tk-camp__type{position:absolute;top:14px;left:14px;z-index:2;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(8,5,18,.85);border:1px solid var(--line-2);border-radius:999px;padding:7px 13px}
.tk-camp__body{padding:18px}
.tk-camp__body h3{font-family:var(--display);font-weight:700;font-size:18px;margin:0 0 10px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-camp__price{display:flex;align-items:baseline;gap:7px;margin-bottom:16px}
.tk-camp__price .rp{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.02em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.tk-camp__price .per{font-size:14px;color:var(--faint)}
.tk-camp__meta{display:flex;justify-content:space-between;align-items:center;font-size:13.5px;margin-bottom:13px}
.tk-camp__meta .dl{color:var(--faint)}
.tk-camp__meta .dt{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
/* -------- Testimonial card -------- */
.tk-testi{background:var(--panel-soft);border:1px solid var(--line);border-radius:18px;padding:22px 24px;display:flex;flex-direction:column;gap:15px}
.tk-testi .stars{display:flex;gap:3px;color:var(--v)}
.tk-testi .stars svg{width:14px;height:14px}
.tk-testi .quote{font-size:14.5px;color:var(--ink);line-height:1.62}
.tk-testi .quote b{color:var(--v-hi);font-weight:600}
.tk-testi .foot{display:flex;align-items:center;gap:12px;margin-top:auto}
.tk-testi .av{width:42px;height:42px;border-radius:12px;overflow:hidden;flex:0 0 auto}
.tk-testi .av img{width:100%;height:100%;object-fit:cover;display:block}
.tk-testi .name{font-family:var(--display);font-weight:600;font-size:14px}
.tk-testi .handle{font-family:var(--mono);font-size:11px;color:var(--faint)}
.tk-testi .earn{margin-left:auto;font-family:var(--display);font-weight:700;font-size:14.5px;color:var(--good);background:rgba(92,233,172,.12);border:1px solid rgba(92,233,172,.36);border-radius:999px;padding:9px 15px;text-shadow:0 0 12px rgba(92,233,172,.5);white-space:nowrap}
/* -------- Payout / bukti pembayaran card -------- */
.tk-payout{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px;display:flex;flex-direction:column;justify-content:center}
.tk-payout .head{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.tk-payout .ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:rgba(92,233,172,.14);border:1px solid rgba(92,233,172,.32);color:var(--good);flex:0 0 auto}
.tk-payout .ic svg{width:18px;height:18px}
.tk-payout .head b{font-family:var(--display);font-weight:700;font-size:14px}
.tk-payout .amt{font-family:var(--display);font-weight:800;font-size:28px;letter-spacing:-.02em;color:var(--good);text-shadow:0 0 16px rgba(92,233,172,.4);margin-bottom:6px}
.tk-payout .who{font-size:13.5px;color:var(--ink);font-weight:600}
.tk-payout .meta{font-family:var(--mono);font-size:11px;color:var(--faint);margin-top:16px;display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:14px}
.tk-payout .meta-row{display:flex;justify-content:space-between}
.wd-hcount{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--v-hi);background:var(--grad-soft);border:1px solid var(--line-2);border-radius:999px;padding:6px 12px;margin-top:14px;width:fit-content}
.wd-hcount.open{color:var(--good);background:rgba(92,233,172,.12);border-color:rgba(92,233,172,.3)}
.tk-tip{position:relative}
.tk-tip::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%);background:#16121f;border:1px solid var(--line-2);color:var(--ink);font-size:11.5px;font-weight:500;padding:8px 13px;border-radius:9px;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s,visibility .15s;box-shadow:0 16px 34px -12px rgba(0,0,0,.75);z-index:20}
.tk-tip[data-tip=""]::after{display:none}
.tk-tip:hover::after{opacity:1;visibility:visible}
/* -------- Table row (buat list di dashboard) -------- */
.tk-row{display:flex;align-items:center;gap:14px;padding:13px 14px;border:1px solid var(--line);border-radius:13px;background:rgba(150,120,255,.03)}
.tk-row+.tk-row{margin-top:10px}
.tk-row .thumb{width:42px;height:42px;border-radius:10px;background:var(--grad-2);flex:0 0 auto;display:grid;place-items:center;color:#0a0518}
/* -------- Skeleton loader (shimmer) -------- */
.skel{position:relative;overflow:hidden;background:rgba(255,255,255,.05);border-radius:8px}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent);animation:skelshine 1.25s infinite}
@keyframes skelshine{100%{transform:translateX(100%)}}
.skel-line{height:13px;width:82%}
.skel-line.sm{width:55%}
.skel-card{height:92px;border-radius:16px;margin-bottom:12px}
.skel-stat{height:96px;border-radius:18px}
@media (prefers-reduced-motion:reduce){.skel::after{animation:none}}