/* CloudTheme — Violet/Cyan premium shortlink step design */
:root {
    --vs-bg: #0b0f1e;
    --vs-card: #161b34;
    --vs-border: rgba(255,255,255,0.08);
    --vs-primary: #7c5cff;
    --vs-primary2: #a78bfa;
    --vs-accent: #22d3ee;
    --vs-text: #e5e7eb;
    --vs-muted: #94a3b8;
    --vs-radius: 16px;
}

body.captcha-page { background: var(--vs-bg) !important; }
#mainNav.navbar-default { background: rgba(11,15,30,0.9) !important; border: none; }
#mainNav .navbar-brand { color: #fff !important; }
.main-footer, footer { background: var(--vs-bg) !important; color: var(--vs-muted) !important; }

.vs-wrap { max-width: 640px; margin: 40px auto; font-family: 'Inter', -apple-system, sans-serif; }
.vs-card { background: var(--vs-card); border: 1px solid var(--vs-border); border-radius: var(--vs-radius); box-shadow: 0 20px 60px rgba(0,0,0,0.4); overflow: hidden; }
.vs-header { background: linear-gradient(135deg, var(--vs-primary), var(--vs-accent)); padding: 22px 26px; text-align: center; }
.vs-header .vs-brand { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,0.85); margin-bottom: 6px; }
.vs-header .vs-title { font-size: 20px; font-weight: 800; color: #fff; }
.vs-body { padding: 28px 26px; color: var(--vs-text); }

.vs-progress-track { height: 6px; border-radius: 6px; background: #1e2440; overflow: hidden; margin-bottom: 24px; }
.vs-progress-fill { height: 100%; background: linear-gradient(90deg, var(--vs-primary), var(--vs-accent)); transition: width .4s ease; }

.vs-article { border: 1px solid var(--vs-border); border-radius: 12px; padding: 16px 18px; margin-bottom: 20px; background: rgba(124,92,255,0.05); }
.vs-article h4 { margin: 0 0 8px; font-size: 15px; color: #fff; font-weight: 700; }
.vs-article p { margin: 0; font-size: 13px; color: var(--vs-muted); line-height: 1.6; }

.vs-countdown-wrap { text-align: center; margin: 24px 0; }
.vs-countdown-num { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 16px; background: rgba(124,92,255,0.14); color: var(--vs-accent); font-size: 22px; font-weight: 800; margin-bottom: 8px; }
.vs-countdown-label { font-size: 12px; color: var(--vs-muted); text-transform: uppercase; letter-spacing: 0.5px; }

.vs-final-btn, .btn-captcha.vs-final-btn { width: 100%; padding: 14px; border: none; border-radius: 10px; background: linear-gradient(135deg, var(--vs-primary), var(--vs-accent)); color: #fff !important; font-weight: 700; font-size: 14px; cursor: pointer; }
.vs-final-btn:disabled { background: #2a3050; color: var(--vs-muted) !important; cursor: not-allowed; }

.vs-note { text-align: center; font-size: 12px; color: var(--vs-muted); margin-top: 12px; }

.vs-step-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border: 1px solid var(--vs-border); border-radius: 12px; margin-bottom: 10px; background: rgba(255,255,255,0.02); }
.vs-step-row.is-done { border-color: var(--vs-accent); background: rgba(34,211,238,0.06); }
.vs-step-row.is-locked { opacity: 0.5; }
.vs-step-left { display: flex; align-items: center; gap: 12px; }
.vs-step-num { width: 30px; height: 30px; border-radius: 50%; background: rgba(124,92,255,0.15); color: var(--vs-primary2); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.vs-step-row.is-done .vs-step-num { background: var(--vs-accent); color: #0b0f1e; }
.vs-step-title { font-weight: 700; font-size: 14px; color: #fff; }
.vs-step-desc { font-size: 11.5px; color: var(--vs-muted); }
.vs-offer-btn { border: none; border-radius: 8px; background: linear-gradient(135deg, var(--vs-primary), var(--vs-accent)); color: #fff; padding: 8px 16px; font-size: 12px; font-weight: 700; cursor: pointer; min-width: 100px; }
.vs-offer-btn:disabled { background: #2a3050; color: var(--vs-muted); cursor: not-allowed; }

/* ===== Homepage ===== */
header.shorten { background: radial-gradient(600px circle at 15% 20%, rgba(124,92,255,0.35), transparent 60%), radial-gradient(500px circle at 85% 30%, rgba(34,211,238,0.25), transparent 60%), linear-gradient(180deg, var(--vs-bg) 0%, #10152b 100%); padding:140px 0 110px; position:relative; overflow:hidden; }
header.shorten::after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:90px; background:#10152b; border-radius:50% 50% 0 0 / 100px 100px 0 0; }
header.shorten .intro-lead-in { font-size:16px; font-weight:600; color: var(--vs-accent); font-style:normal; margin-bottom:6px; letter-spacing:1px; text-transform:uppercase; }
header.shorten .intro-heading { font-size:48px; font-weight:800; margin-bottom:36px; letter-spacing:-1px; background: linear-gradient(90deg, #fff, var(--vs-accent)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
header.shorten .row .col-sm-8 { background:#fff; border-radius:100px; padding:6px; box-shadow:0 25px 60px rgba(0,0,0,0.35); }

section.steps { padding:80px 0 40px; background:#10152b; }
section.steps .step-img { width:72px; height:72px; margin:0 auto 18px; border-radius:20px; background: linear-gradient(135deg, var(--vs-primary), var(--vs-accent)); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(124,92,255,0.3); }
section.steps .step-img svg { width:32px; height:32px; stroke:#fff; }
section.steps .step-heading { font-size:16px; font-weight:700; color:#fff; }

.separator { background:#10152b; height:1px; }
.separator .container { border-top:1px solid var(--vs-border); }

section.features { padding:90px 0; background:#10152b; }
.section-subheading { color: var(--vs-accent); font-weight:700; font-size:13px; letter-spacing:2px; text-transform:uppercase; font-style:normal; }
.section-heading { font-size:32px; font-weight:800; color:#fff; margin-top:6px; }
.feature { background: var(--vs-card); border-radius:18px; padding:30px 26px; margin:10px; border:1px solid var(--vs-border); height:calc(100% - 20px); }
.feature-img { width:52px; height:52px; border-radius:14px; margin-bottom:16px; background: linear-gradient(135deg, rgba(124,92,255,0.18), rgba(34,211,238,0.18)); display:flex; align-items:center; justify-content:center; }
.feature-img svg { width:26px; height:26px; stroke: var(--vs-accent); }
.feature-heading { font-size:16px; font-weight:700; color:#fff; margin:0 0 8px; }
.feature-content { font-size:13.5px; color: var(--vs-muted); line-height:1.6; }

section.stats { padding:90px 0; background: var(--vs-bg); }
.stat-img { width:60px; height:60px; margin:0 auto 14px; border-radius:16px; background: linear-gradient(135deg, var(--vs-primary), var(--vs-accent)); display:flex; align-items:center; justify-content:center; }
.stat-img svg { width:28px; height:28px; stroke:#fff; }
.stat-num { font-size:36px; font-weight:800; background: linear-gradient(90deg, #fff, var(--vs-accent)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.stat-text { font-size:12px; font-weight:600; letter-spacing:1px; color: var(--vs-muted); text-transform:uppercase; }

section#contact { padding:90px 0; background:#10152b; }
section#contact form { background: var(--vs-card); border-radius:18px; padding:34px; border:1px solid var(--vs-border); }
section#contact .form-control { background: rgba(255,255,255,0.04); border:1px solid var(--vs-border); color: var(--vs-text); border-radius:10px; }

/* ===== Inner pages (Publisher Rates, Blog, dll yang pakai layout front tapi bukan homepage) ===== */
body.inner-page { background: var(--vs-bg); color: var(--vs-text); }
body.inner-page .container { color: var(--vs-text); }
body.inner-page h1, body.inner-page h2, body.inner-page h3, body.inner-page h4 { color: #fff; }
body.inner-page .advertising-rates { background: var(--vs-card); border: 1px solid var(--vs-border); border-radius: 16px; padding: 20px; margin: 30px 0; }
body.inner-page .nav-tabs { border-bottom: 1px solid var(--vs-border); }
body.inner-page .nav-tabs > li > a { color: var(--vs-muted); background: transparent; border: none; }
body.inner-page .nav-tabs > li.active > a { color: #fff !important; background: transparent !important; border: none !important; border-bottom: 2px solid var(--vs-primary) !important; }
body.inner-page .tab-content { padding-top: 16px; }
body.inner-page .table { color: var(--vs-text); }
body.inner-page .table > thead > tr > th { border-bottom: 2px solid var(--vs-border); color: var(--vs-muted); text-transform: uppercase; font-size: 12px; }
body.inner-page .table > tbody > tr > td { border-top: 1px solid var(--vs-border); }
body.inner-page .table-striped > tbody > tr:nth-of-type(odd) { background: rgba(255,255,255,0.02); }
body.inner-page .blog-item { background: var(--vs-card); border: 1px solid var(--vs-border); border-radius: 16px; padding: 24px; margin-bottom: 20px; }
body.inner-page .blog-item h3, body.inner-page .blog-item h2 { color: #fff; }
body.inner-page .blog-content { color: var(--vs-muted); line-height: 1.7; }
body.inner-page .pagination > li > a, body.inner-page .pagination > li > span { background: var(--vs-card); border: 1px solid var(--vs-border); color: var(--vs-muted); }
body.inner-page .pagination > .active > a { background: var(--vs-primary); border-color: var(--vs-primary); color: #fff; }
body.inner-page .form-control { background: rgba(255,255,255,0.04); border: 1px solid var(--vs-border); color: var(--vs-text); }
body.inner-page .panel, body.inner-page .link-details .panel { background: var(--vs-card); border: 1px solid var(--vs-border); color: var(--vs-text); }

/* ===== Halaman statis (Publisher Rates, Terms, Privacy, dll) & Blog ===== */
header.vs-page-hero {
    background: var(--vs-bg-alt, #10152b) !important;
    background-image: none !important;
    padding: 70px 0 !important;
    text-align: center;
    border-bottom: 1px solid var(--vs-border);
}
header.vs-page-hero .intro-lead-in {
    font-size: 28px !important; font-weight: 800 !important; color: #fff !important;
    text-shadow: none !important; font-style: normal !important;
}

.vs-page-content {
    background: var(--vs-card); border: 1px solid var(--vs-border); border-radius: 18px;
    padding: 32px; margin: 36px 0; color: var(--vs-text);
}
.vs-page-content h1, .vs-page-content h2, .vs-page-content h3, .vs-page-content h4 { color: #fff; margin-top: 0; }
.vs-page-content p { color: var(--vs-muted); line-height: 1.75; }
.vs-page-content a { color: var(--vs-accent); }
.vs-page-content ul, .vs-page-content ol { color: var(--vs-muted); line-height: 1.8; }

/* Publisher Rates: tab pills custom, tahan dari cascade CSS lama */
.vs-page-content .advertising-rates { background: transparent; border: none; padding: 0; margin: 0; }
.vs-page-content .advertising-rates .nav-tabs { border-bottom: 1px solid var(--vs-border) !important; display: flex; flex-wrap: wrap; gap: 6px; }
.vs-page-content .advertising-rates .nav-tabs > li { float: none; }
.vs-page-content .advertising-rates .nav-tabs > li > a {
    border: 1px solid var(--vs-border) !important; border-radius: 100px !important;
    background: rgba(255,255,255,0.03) !important; color: var(--vs-muted) !important;
    padding: 8px 18px !important; margin: 0 !important; font-weight: 600; font-size: 13px;
}
.vs-page-content .advertising-rates .nav-tabs > li.active > a,
.vs-page-content .advertising-rates .nav-tabs > li.active > a:hover,
.vs-page-content .advertising-rates .nav-tabs > li.active > a:focus {
    background: linear-gradient(135deg, var(--vs-primary), var(--vs-accent)) !important;
    color: #fff !important; border-color: transparent !important;
}
.vs-page-content .advertising-rates .tab-content { padding-top: 22px; }
.vs-page-content .advertising-rates .table { background: transparent; }
.vs-page-content .advertising-rates .table > thead > tr > th {
    border-bottom: 2px solid var(--vs-border) !important; color: var(--vs-muted) !important;
    text-transform: uppercase; font-size: 11.5px; letter-spacing: 0.5px;
}
.vs-page-content .advertising-rates .table > tbody > tr > td { border-top: 1px solid var(--vs-border) !important; color: var(--vs-text) !important; }

/* Blog list & single post */
.vs-blog-list .blog-item {
    background: rgba(255,255,255,0.02); border: 1px solid var(--vs-border); border-radius: 16px;
    padding: 26px; margin-bottom: 18px;
}
.vs-blog-list .blog-item .page-header { border-bottom: 1px solid var(--vs-border); margin-bottom: 12px; padding-bottom: 10px; }
.vs-blog-list .blog-item h3 a { color: #fff; text-decoration: none; }
.vs-blog-list .blog-item h3 a:hover { color: var(--vs-accent); }
.vs-blog-list .blog-content { color: var(--vs-muted); line-height: 1.7; }
.vs-blog-list .pagination > li > a, .vs-blog-list .pagination > li > span {
    background: var(--vs-card); border: 1px solid var(--vs-border); color: var(--vs-muted);
}
.vs-blog-list .pagination > .active > a { background: var(--vs-primary); border-color: var(--vs-primary); color: #fff; }