/* ═══════════════════════════════════════════════════════════════
   CIPTAIN LABS · OFFICIAL BRAND KIT & DESIGN TOKENS
   Acuan Resmi: Ciptain-Labs-Brand-Kit.html
   "Ide kamu, kami ciptain."
   ═══════════════════════════════════════════════════════════════ */

/* ── GOOGLE FONTS IMPORT ───────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Poppins:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* ── ROOT DESIGN TOKENS ────────────────────────────────────── */
:root {
    /* Brand Palette */
    --ind:   #1E1B4B; /* Midnight Indigo — utama gelap */
    --vio:   #7C3AED; /* Electric Violet — aksen utama / identitas */
    --ora:   #FF7A3D; /* Spark Orange — aksi / CTA / badge */
    --mint:  #2DD4BF; /* Mint Tech — pendukung / focus */
    --cloud: #F8F7FF; /* Soft Cloud — latar bersih */
    --slate: #334155; /* Slate — teks isi */
    --line:  #E2E0F5; /* Border / garis pemisah */
    --surf:  #FFFFFF; /* Surface / card background */
    --acc:   #7C3AED;
    --head:  #1E1B4B;

    /* Legacy Token Aliases mapped to Ciptain Colors */
    --gold:         #7C3AED;
    --gold-dark:    #1E1B4B;
    --gold-light:   #F8F7FF;
    --gold-glow:    rgba(124, 58, 237, 0.15);
    --gold-grad:    linear-gradient(135deg, #7C3AED 0%, #9061F9 50%, #FF7A3D 100%);
    --luxury-grad:  linear-gradient(135deg, #7C3AED 0%, #1E1B4B 100%);
    --sidebar-bg:   #1E1B4B;
    --sb-bg:        #1E1B4B;

    /* Typography Roles */
    --font-head: 'Sora', sans-serif;
    --font-sub:  'Poppins', sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ── BASE TYPOGRAPHY ───────────────────────────────────────── */
body {
    font-family: var(--font-body);
    color: var(--slate);
    background-color: var(--cloud);
}

h1, h2, h3, h4, .brand-font {
    font-family: var(--font-head);
    color: var(--head);
}

h5, h6, .btn, .nav-link, .a-tab-btn, .settings-tab-btn {
    font-family: var(--font-sub);
}

/* ── CIPTAIN LOGO & WORDMARK COMPONENTS ────────────────────── */
.ciptain-wordmark {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: var(--s, 24px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--lc, #1E1B4B);
    display: inline-block;
    text-decoration: none;
    vertical-align: middle;
    white-space: nowrap;
}

.ciptain-wordmark .brand-main {
    display: block;
    line-height: 1;
    white-space: nowrap;
}

.ciptain-wordmark b {
    color: var(--ora, #FF7A3D) !important;
    font-weight: 700;
    display: inline !important;
}

.ciptain-wordmark .labs,
.ciptain-wordmark .sub {
    display: block;
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: calc(var(--s, 24px) * 0.28);
    letter-spacing: 0.48em;
    color: var(--lb, var(--mint, #2DD4BF));
    margin-top: 0.32em;
    line-height: 1;
    text-transform: uppercase;
}

/* Horizontal variant if needed */
.ciptain-wordmark.horizontal,
.ciptain-wordmark.inline {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
}
.ciptain-wordmark.horizontal .labs,
.ciptain-wordmark.inline .labs,
.ciptain-wordmark.horizontal .sub,
.ciptain-wordmark.inline .sub {
    display: inline-block;
    margin-top: 0;
}

/* Wordmark Light Variant (for Dark Backgrounds like Sidebar/Hero/Footer) */
.ciptain-wordmark.light {
    --lc: #F8F7FF;
    --lb: #2DD4BF;
}

/* Wordmark Dark Variant (for Light Backgrounds) */
.ciptain-wordmark.dark {
    --lc: #1E1B4B;
    --lb: #7C3AED;
}

/* ── CIPTAIN ICON BADGE ('c' with orange dot) ───────────────── */
.ciptain-icon-badge {
    width: var(--w, 36px);
    height: var(--w, 36px);
    background: var(--vio, #7C3AED);
    border-radius: 26%;
    display: grid;
    place-items: center;
    position: relative;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: calc(var(--w, 36px) * 0.62);
    line-height: 1;
    color: #FFFFFF;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.3);
    user-select: none;
}

.ciptain-icon-badge i,
.ciptain-icon-badge .dot {
    position: absolute;
    top: 16%;
    right: 16%;
    width: 15%;
    height: 15%;
    background: var(--ora, #FF7A3D);
    border-radius: 20%;
}

/* ── CIPTAIN BUTTONS ────────────────────────────────────────── */
.btn-ciptain-primary,
.btn-gold {
    background: var(--vio) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 999px !important;
    font-family: var(--font-sub) !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.25) !important;
}

.btn-ciptain-primary:hover,
.btn-gold:hover {
    background: var(--ora) !important;
    color: var(--ind) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 122, 61, 0.35) !important;
}

.btn-ciptain-cta,
.btn-ora {
    background: var(--ora) !important;
    color: var(--ind) !important;
    border: none !important;
    border-radius: 999px !important;
    font-family: var(--font-sub) !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 15px rgba(255, 122, 61, 0.3) !important;
}

.btn-ciptain-cta:hover,
.btn-ora:hover {
    background: var(--vio) !important;
    color: #FFFFFF !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.35) !important;
}

.btn-ciptain-ghost {
    background: transparent !important;
    color: var(--vio) !important;
    border: 2px solid var(--vio) !important;
    border-radius: 999px !important;
    font-family: var(--font-sub) !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

.btn-ciptain-ghost:hover {
    background: var(--vio) !important;
    color: #FFFFFF !important;
}

/* ── CIPTAIN FORM CONTROLS ─────────────────────────────────── */
.form-control:focus,
.premium-input:focus,
.a-input:focus {
    outline: 3px solid var(--mint) !important;
    border-color: var(--vio) !important;
    box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.2) !important;
}

/* ── SIDEBAR BRANDING OVERRIDES ────────────────────────────── */
.sidebar,
.admin-sidebar {
    background: var(--ind) !important;
    border-right-color: rgba(226, 224, 245, 0.1) !important;
}

.sidebar .nav-link.active,
.sb-link.active {
    background: rgba(124, 58, 237, 0.25) !important;
    color: #FFFFFF !important;
    border-left: 3px solid var(--ora) !important;
}

.sidebar-badge,
.sb-brand-pill {
    background: rgba(45, 212, 191, 0.15) !important;
    color: var(--mint) !important;
    border: 1px solid rgba(45, 212, 191, 0.3) !important;
}

/* ── BRAND TOUCHES (hover orange, focus mint, selection, scrollbar) ── */
::selection { background: rgba(124, 58, 237, 0.22); color: var(--ind); }

a { color: var(--vio); }
a:hover { color: #6D28D9; }

:focus-visible { outline: 3px solid var(--mint); outline-offset: 2px; }

.btn-primary,
.btn-brand {
    background: var(--vio) !important;
    border-color: var(--vio) !important;
    color: #FFFFFF !important;
    border-radius: 999px;
    font-family: var(--font-sub);
    font-weight: 600;
    transition: all .18s ease;
}
.btn-primary:hover,
.btn-brand:hover {
    background: var(--ora) !important;
    border-color: var(--ora) !important;
    color: var(--ind) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(255, 122, 61, 0.32);
}

.btn-outline-primary {
    color: var(--vio); border: 2px solid var(--vio);
    border-radius: 999px; font-family: var(--font-sub); font-weight: 600;
}
.btn-outline-primary:hover { background: var(--vio); color: #fff; border-color: var(--vio); }

.badge.bg-primary, .bg-primary { background-color: var(--vio) !important; }
.text-primary { color: var(--vio) !important; }
.border-primary { border-color: var(--vio) !important; }
.text-warning { color: var(--ora) !important; }

.card, .a-card, .stat-card {
    border-color: var(--line);
    border-radius: 20px;
}

.form-control, .form-select, .a-input, .premium-input {
    border: 2px solid var(--line);
    border-radius: 12px;
    font-family: var(--font-body);
}

/* Tagline chip (usage: <span class="ciptain-tagline">Ide kamu, kami ciptain.</span>) */
.ciptain-tagline {
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--ora);
}

/* Eyebrow label above section headings */
.section-accent, .eyebrow {
    font-family: var(--font-sub);
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: .78rem;
    color: var(--vio);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #C4B5FD; border-radius: 999px; border: 2px solid var(--cloud); }
::-webkit-scrollbar-thumb:hover { background: var(--vio); }