/* ==========================================================================
   CloudTheme Pro — tampilan AdLinkFly (gradasi lembut, nav pill, ombak)
   Dimuat SETELAH CSS lama, jadi menimpa semuanya. Tanpa gambar eksternal.
   ========================================================================== */

/* 1. Token ------------------------------------------------------------- */
:root {
    --cl-ink: #0f172a;
    --cl-ink-2: #1e293b;
    --cl-ultra: #6366f1;
    --cl-ultra-d: #4f52e0;
    --cl-ultra-soft: #eef0ff;
    --cl-violet: #8b5cf6;
    --cl-teal: #14b8a6;
    --cl-sky: #22c1e0;
    --cl-blue: #3b82f6;
    --cl-amber: #f5b82e;
    --cl-green: #10b981;
    --cl-signal: #14b8a6;
    --cl-signal-d: #0f9d8e;
    --cl-paper: #f1f2fc;
    --cl-line: #e4e6f5;
    --cl-muted: #64708a;

    --cl-grad: linear-gradient(90deg, #6366f1, #8b5cf6);
    --cl-grad-2: linear-gradient(90deg, #7c6cf0, #22c1e0);
    --cl-rainbow: linear-gradient(90deg, #14b8a6, #3b82f6 45%, #8b5cf6 75%, #f59e0b);

    --cl-display: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --cl-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

    --cl-ease: cubic-bezier(.22, .8, .24, 1);
    --cl-spring: cubic-bezier(.34, 1.56, .64, 1);

    --w-bot-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 60Q360 0 720 60T1440 60V120H0Z'/%3E%3C/svg%3E");
    --w-top-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 60Q360 120 720 60T1440 60V0H0Z'/%3E%3C/svg%3E");
    --w-bot-lav: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='%23f0f1fc' d='M0 60Q360 0 720 60T1440 60V120H0Z'/%3E%3C/svg%3E");
    --w-top-lav: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='%23f0f1fc' d='M0 60Q360 120 720 60T1440 60V0H0Z'/%3E%3C/svg%3E");
}

/* 2. Dasar ------------------------------------------------------------- */
html { font-size: 16px; scroll-behavior: smooth; scroll-padding-top: 100px; }
body {
    font-family: var(--cl-body); font-size: 16px; line-height: 1.6;
    color: var(--cl-ink); background: #fff; overflow-x: hidden;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--cl-display); font-weight: 800; text-transform: none;
    letter-spacing: -.025em; line-height: 1.15; color: var(--cl-ink);
}
a { color: var(--cl-ultra); transition: color .2s; }
a:hover, a:focus { color: var(--cl-ultra-d); }
::selection { background: #c7c9ff; color: var(--cl-ink); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, .btn:focus-visible {
    outline: 3px solid rgba(99, 102, 241, .55); outline-offset: 3px;
}
main { display: block; }
.container { width: auto; max-width: 1030px; }
@media (min-width: 768px) { .container { width: auto; } }

.cl-skip {
    position: absolute; left: 12px; top: -64px; z-index: 3000; padding: 10px 18px;
    border-radius: 12px; background: var(--cl-ink); color: #fff; font-weight: 600;
    transition: top .2s var(--cl-ease);
}
.cl-skip:focus { top: 12px; color: #fff; }

.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); animation: cl-ping 2s ease-out infinite; }

/* ikon gradien */
.is-purple { --g: linear-gradient(135deg, #6366f1, #8b5cf6); }
.is-violet { --g: linear-gradient(135deg, #7c5cf6, #6366f1); }
.is-indigo { --g: linear-gradient(135deg, #5b6cf6, #7c5cf6); }
.is-blue   { --g: linear-gradient(135deg, #3b82f6, #22c1e0); }
.is-teal   { --g: linear-gradient(135deg, #14b8a6, #22c1c3); }
.is-mint   { --g: linear-gradient(135deg, #2dd4bf, #22d3ee); }
.is-green  { --g: linear-gradient(135deg, #10b981, #34d399); }
.is-amber  { --g: linear-gradient(135deg, #f5b82e, #f59e0b); }
.cl-step.is-amber { --g: linear-gradient(135deg, #f5b82e, #84cc16); }
.cl-ico {
    display: inline-grid; place-items: center; flex: 0 0 auto;
    width: 40px; height: 40px; border-radius: 12px;
    background: var(--g, var(--cl-grad)); color: #fff; font-size: 16px;
    box-shadow: 0 10px 20px -10px rgba(99, 102, 241, .7);
}

/* 3. Navigasi (pill) ---------------------------------------------------- */
.navbar-default.cl-nav {
    margin: 0; padding: 14px 0; background: transparent; border: 0; box-shadow: none;
    text-transform: none; font-family: var(--cl-body);
    transition: padding .3s var(--cl-ease);
}
.navbar-default.cl-nav > .container {
    position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
    width: calc(100% - 30px); max-width: 1000px; margin: 0 auto; padding: 6px 12px 6px 14px;
    background: rgba(255, 255, 255, .94); border: 1px solid rgba(226, 229, 247, .9); border-radius: 999px;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 10px 30px -14px rgba(76, 81, 191, .35);
    transition: box-shadow .3s, background-color .3s;
}
.navbar-default.cl-nav > .container::before, .navbar-default.cl-nav > .container::after { display: none; }
.navbar-default.cl-nav > .container::after {
    display: block; content: ""; position: absolute; left: 26px; right: 26px; bottom: -1px; height: 2px;
    border-radius: 2px; background: var(--cl-rainbow); opacity: .75;
    transform-origin: left; animation: cl-line 1.2s var(--cl-ease) .3s both;
}
.navbar-default.cl-nav.is-scrolled > .container, .navbar-default.cl-nav.affix > .container {
    background: rgba(255, 255, 255, .98); box-shadow: 0 16px 40px -16px rgba(76, 81, 191, .5);
}
.navbar-default.cl-nav.is-scrolled, .navbar-default.cl-nav.affix { padding: 8px 0; background: transparent; box-shadow: none; }

.navbar-default.cl-nav .navbar-header { float: none; margin: 0; }
.navbar-default.cl-nav .navbar-brand,
.cl-footer .navbar-brand {
    display: inline-flex; align-items: center; float: none; height: 42px; margin: 0 !important; padding: 0 6px;
    font-family: var(--cl-display); font-size: 21px; font-weight: 800; letter-spacing: .07em; line-height: 1; text-transform: uppercase;
    background: linear-gradient(90deg, #1d4ed8, #3b82f6 70%, #4f8cff); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: #2563eb;
}
.navbar-default.cl-nav .navbar-brand:hover, .navbar-default.cl-nav .navbar-brand:focus { color: #2563eb; opacity: .9; }
.cl-nav .navbar-brand:not(.logo-image)::before, .cl-footer .navbar-brand:not(.logo-image)::before {
    content: ""; flex: 0 0 auto; width: 38px; height: 38px; margin-right: 10px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%231d4ed8'/%3E%3Cstop offset='1' stop-color='%233b82f6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M20 2l15.6 9v18L20 38 4.4 29V11z' fill='url(%23g)'/%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='20' cy='20' r='4.2'/%3E%3Cpath d='M20 15.8V10M20 24.2V30M16.4 17.9L11.4 15M23.6 22.1L28.6 25M23.6 17.9L28.6 15M16.4 22.1L11.4 25'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Ccircle cx='20' cy='9' r='1.9'/%3E%3Ccircle cx='20' cy='31' r='1.9'/%3E%3Ccircle cx='10.5' cy='14.5' r='1.9'/%3E%3Ccircle cx='29.5' cy='25.5' r='1.9'/%3E%3Ccircle cx='29.5' cy='14.5' r='1.9'/%3E%3Ccircle cx='10.5' cy='25.5' r='1.9'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform .6s var(--cl-spring);
}
.cl-nav .navbar-brand:not(.logo-image):hover::before { transform: rotate(60deg) scale(1.06); }
.navbar-default.cl-nav .navbar-brand.logo-image { padding: 0 6px; -webkit-text-fill-color: initial; background: none; }
.navbar-default.cl-nav .navbar-brand.logo-image img { height: 100%; width: auto; max-height: 38px; }

.navbar-default.cl-nav .navbar-collapse { padding: 0; border: 0; box-shadow: none; }
@media (min-width: 768px) {
    .navbar-default.cl-nav .navbar-collapse.collapse { display: flex !important; flex: 1 1 auto; width: auto; justify-content: flex-end; height: auto !important; overflow: visible; }
}
.navbar-default.cl-nav .navbar-nav { display: flex; align-items: center; gap: 2px; float: none; margin: 0; }
@media (min-width: 768px) { .navbar-default.cl-nav .navbar-right { margin-right: 0; } }
.navbar-default.cl-nav .navbar-nav > li { float: none; }
.navbar-default.cl-nav .navbar-nav > li > a {
    position: relative; padding: 9px 16px; border: 1px solid transparent; border-radius: 999px;
    font-size: 14.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #0f172a; line-height: 1.2;
    transition: background-color .25s, border-color .25s, color .25s, transform .3s var(--cl-ease);
}
.navbar-default.cl-nav .navbar-nav > li > a::after { display: none; }
.navbar-default.cl-nav .navbar-nav > li > a:hover,
.navbar-default.cl-nav .navbar-nav > li > a:focus { background: #f4f5ff; color: var(--cl-ultra); transform: translateY(-1px); }
.navbar-default.cl-nav .navbar-nav > .active > a,
.navbar-default.cl-nav .navbar-nav > .active > a:hover,
.navbar-default.cl-nav .navbar-nav > .active > a:focus {
    background: #f6f7ff; border-color: #e6e8f8; color: #0f172a; box-shadow: 0 6px 16px -10px rgba(99, 102, 241, .5);
}
.navbar-default.cl-nav .navbar-nav > .open > a, .navbar-default.cl-nav .navbar-nav > .open > a:focus { background: #f4f5ff; color: var(--cl-ultra); }
.cl-nav .dropdown-menu {
    margin-top: 12px; padding: 8px; border: 1px solid var(--cl-line); border-radius: 16px;
    box-shadow: 0 24px 50px -20px rgba(76, 81, 191, .45); animation: cl-rise .25s var(--cl-ease) both;
}
.cl-nav .dropdown-menu > li > a { padding: 9px 14px; border-radius: 10px; font-weight: 500; color: var(--cl-ink); }
.cl-nav .dropdown-menu > li > a:hover, .cl-nav .dropdown-menu > li > a:focus { background: var(--cl-ultra-soft); color: var(--cl-ultra); }
.navbar-default.cl-nav .navbar-toggle { margin: 0; padding: 11px 10px; border: 0; border-radius: 12px; background: transparent; }
.navbar-default.cl-nav .navbar-toggle .icon-bar { background: var(--cl-ink); transition: transform .3s, opacity .3s; }
.navbar-default.cl-nav .navbar-toggle:hover, .navbar-default.cl-nav .navbar-toggle:focus { background: #f4f5ff; }

/* 4. Tombol & komponen umum -------------------------------------------- */
.btn { border-radius: 999px; font-weight: 600; padding: 10px 22px; transition: background-color .25s, border-color .25s, color .25s, transform .25s var(--cl-spring), box-shadow .25s; }
.btn:active { transform: scale(.97); }
.btn-lg { padding: 14px 32px; font-size: 16px; }
.btn-primary { background: var(--cl-grad); border: 0; color: #fff; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: var(--cl-grad); color: #fff; box-shadow: 0 14px 26px -12px rgba(99, 102, 241, .8); transform: translateY(-1px); }
.btn-success { background: linear-gradient(90deg, #14b8a6, #22c1c3); border: 0; color: #fff; }
.btn-success:hover, .btn-success:focus, .btn-success:active { background: linear-gradient(90deg, #0f9d8e, #14b8a6); color: #fff; box-shadow: 0 14px 26px -12px rgba(20, 184, 166, .8); }
.btn-default { background: #fff; border: 1px solid var(--cl-line); color: var(--cl-ink); }
.btn-default:hover, .btn-default:focus { background: #f6f7ff; border-color: #c9ccf3; color: var(--cl-ultra); }

.cl-btn {
    position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 10px;
    height: 46px; padding: 0 26px; border: 0; border-radius: 999px;
    background: var(--cl-grad); color: #fff; font-weight: 700; font-size: 14px; line-height: 1;
    box-shadow: 0 16px 30px -14px rgba(99, 102, 241, .85);
    transition: transform .3s var(--cl-spring), box-shadow .3s;
}
.cl-btn::after, .cl-hero #shorten button.btn-captcha::after, .cl-contact-form .btn-contact::after {
    content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-20deg);
}
.cl-btn:hover::after, .cl-hero #shorten button.btn-captcha:hover::after, .cl-contact-form .btn-contact:hover::after { left: 130%; transition: left .7s var(--cl-ease); }
.cl-btn:hover, .cl-btn:focus { color: #fff; transform: translateY(-3px); box-shadow: 0 22px 34px -14px rgba(99, 102, 241, .9); }

.form-control {
    height: auto; min-height: 44px; padding: 10px 16px; border: 1px solid var(--cl-line); border-radius: 12px;
    box-shadow: none; color: var(--cl-ink); background: #fff; transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.form-control:focus { border-color: var(--cl-ultra); box-shadow: 0 0 0 4px rgba(99, 102, 241, .14); }
.panel { border: 1px solid var(--cl-line); border-radius: 20px; box-shadow: 0 20px 44px -30px rgba(76, 81, 191, .4); overflow: hidden; }
.alert { border: 0; border-radius: 14px; }
.pagination > li > a, .pagination > li > span { border: 1px solid var(--cl-line); color: var(--cl-ink); margin: 0 3px; border-radius: 12px !important; }
.pagination > .active > a, .pagination > .active > span { background: var(--cl-grad); border-color: transparent; }

/* tabel (Payment Proof, Rates, dsb.) */
.table-responsive { border: 0; }
.table { margin-bottom: 0; border-collapse: separate; border-spacing: 0; }
.table > thead > tr > th {
    padding: 16px 20px; border: 0; background: linear-gradient(90deg, #eaf0ff, #f1ecff); color: #475069;
    font-family: var(--cl-body); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle;
}
.table > thead > tr > th:first-child { border-radius: 16px 0 0 0; }
.table > thead > tr > th:last-child { border-radius: 0 16px 0 0; }
.table > tbody > tr > td { padding: 18px 20px; border-top: 1px solid #eef0fa; vertical-align: middle; font-weight: 600; transition: background-color .25s; }
.table-striped > tbody > tr:nth-of-type(odd), .table-hover > tbody > tr:hover { background: transparent; }
.table > tbody > tr:hover > td { background: #f8f8ff; }
.table-bordered, .table-bordered > thead > tr > th, .table-bordered > tbody > tr > td { border: 0; }
.table-bordered > tbody > tr > td { border-top: 1px solid #eef0fa; }

/* tab & pill (Banner / Interstitial / Popup) */
.nav-tabs { border: 0; display: inline-flex; gap: 6px; padding: 6px; background: #fff; border: 1px solid var(--cl-line); border-radius: 18px; box-shadow: 0 10px 26px -18px rgba(76, 81, 191, .5); }
.nav-pills { display: inline-flex; gap: 6px; padding: 6px; background: #fff; border: 1px solid var(--cl-line); border-radius: 18px; box-shadow: 0 10px 26px -18px rgba(76, 81, 191, .5); }
.nav-tabs > li, .nav-pills > li { float: none; margin: 0; }
.nav-tabs > li > a, .nav-pills > li > a { margin: 0; padding: 11px 22px; border: 1px solid #f0f1fb; border-radius: 13px; background: #fff; color: #475069; font-weight: 700; font-size: 14px; transition: all .3s var(--cl-ease); }
.nav-tabs > li > a:hover, .nav-pills > li > a:hover { background: #f6f7ff; color: var(--cl-ultra); border-color: #e6e8f8; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus,
.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
    border-color: transparent; background: linear-gradient(90deg, #14b8a6, #22c1b0); color: #fff; box-shadow: 0 12px 22px -12px rgba(20, 184, 166, .9);
}

/* 5. Ombak -------------------------------------------------------------- */
.cl-wave {
    position: absolute; left: 0; width: 100%; height: 90px; z-index: 2; pointer-events: none;
    background-size: 1440px 100%; background-repeat: repeat-x; animation: cl-wave 26s linear infinite;
}
.cl-wave--bot-white, .cl-wave--bot-lav { bottom: -1px; }
.cl-wave--top-white, .cl-wave--top-lav { top: -1px; }
.cl-wave--bot-white { background-image: var(--w-bot-white); }
.cl-wave--top-white { background-image: var(--w-top-white); animation-direction: reverse; }
.cl-wave--bot-lav { background-image: var(--w-bot-lav); animation-direction: reverse; }
.cl-wave--top-lav { background-image: var(--w-top-lav); }

/* 6. Hero --------------------------------------------------------------- */
header.cl-hero {
    position: relative; overflow: hidden; height: auto; min-height: 0; padding: 196px 0 168px; border: 0; text-align: center; color: var(--cl-ink);
    background: radial-gradient(55% 70% at 6% 6%, #ddd7ff 0, transparent 70%), radial-gradient(50% 60% at 96% 4%, #c9f0f8 0, transparent 70%), linear-gradient(180deg, #f5f4ff 0%, #fbfbff 60%, #fff 100%);
}
header.cl-hero .container { position: relative; z-index: 3; }
.cl-blobs { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cl-blobs i { position: absolute; border-radius: 50%; filter: blur(64px); opacity: .55; translate: var(--px, 0) var(--py, 0); transition: translate .6s var(--cl-ease); animation: cl-drift 16s ease-in-out infinite alternate; }
.cl-blobs .b1 { width: 380px; height: 380px; left: -90px; top: -60px; background: #c8bfff; }
.cl-blobs .b2 { width: 340px; height: 340px; right: -60px; top: -40px; background: #a9e9f5; animation-delay: -4s; }
.cl-blobs .b3 { width: 300px; height: 300px; left: 18%; bottom: 40px; background: #cdbfff; opacity: .4; animation-delay: -8s; }
.cl-blobs .b4 { width: 240px; height: 240px; right: 14%; bottom: 20px; background: #b5ecf5; opacity: .35; animation-delay: -11s; }

.cl-chip {
    position: absolute; z-index: 3; display: flex; align-items: center; gap: 9px; padding: 8px 14px 8px 9px;
    background: rgba(255, 255, 255, .92); border: 1px solid rgba(231, 233, 249, .95); border-radius: 12px; text-align: left;
    box-shadow: 0 16px 34px -16px rgba(76, 81, 191, .45); translate: var(--px, 0) var(--py, 0); transition: translate .5s var(--cl-ease);
    animation: cl-float 6.5s ease-in-out infinite;
}
.cl-chip small { display: block; font-size: 10px; font-weight: 500; color: var(--cl-muted); line-height: 1.2; }
.cl-chip b { display: block; font-size: 12.5px; font-weight: 700; color: var(--cl-ink); line-height: 1.25; }
.cl-chip b.is-green { color: #0fa77a; }
.cl-chip-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: #fff; font-size: 12px; }
.cl-chip-ico.is-blue { background: linear-gradient(135deg, #3b82f6, #22c1e0); }
.cl-chip-ico.is-violet { background: linear-gradient(135deg, #7c5cf6, #6366f1); }
.cl-chip-ico.is-teal { background: linear-gradient(135deg, #14b8a6, #22c1c3); }
.cl-chip-ico.is-amber { background: linear-gradient(135deg, #f5b82e, #f59e0b); }
.cl-chip.c1 { left: 7%; top: 28%; }
.cl-chip.c2 { right: 8%; top: 31%; animation-delay: -2s; }
.cl-chip.c3 { left: 6%; top: 62%; animation-delay: -4s; }
.cl-chip.c4 { right: 14%; top: 74%; animation-delay: -1s; }

.cl-badge {
    display: inline-flex; align-items: center; gap: 7px; margin-bottom: 16px; padding: 4px 12px;
    background: rgba(255, 255, 255, .85); border: 1px solid #e8eaf8; border-radius: 999px;
    font-size: 11px; font-weight: 600; color: #334155; box-shadow: 0 8px 18px -12px rgba(76, 81, 191, .5);
    animation: cl-rise .7s var(--cl-ease) both;
}
.cl-hero-title { margin: 0; font-size: clamp(2.5rem, 5.6vw, 3.9rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.08; }
.cl-hero-title .l1, .cl-hero-title .l2 { display: block; }
.js .cl-hero-title:not(.in) .l1, .js .cl-hero-title:not(.in) .l2 { opacity: 0; }
.js .cl-hero-title.in .l1 { animation: cl-rise .8s var(--cl-ease) .05s both; }
.js .cl-hero-title.in .l2 { animation: cl-rise .8s var(--cl-ease) .2s both; }
.cl-grad {
    position: relative; display: inline-block; font-style: normal;
    background: linear-gradient(90deg, #6d5df6, #4f8cf7 55%, #1fc2b3); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    background-size: 200% 100%; animation: cl-shimmer 6s ease-in-out infinite alternate;
}
.cl-grad svg { position: absolute; left: 2%; bottom: -10px; width: 96%; height: 12px; fill: none; stroke: #22c1b0; stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 260; stroke-dashoffset: 260; }
.cl-hero-title.in .cl-grad svg { animation: cl-draw 1.1s var(--cl-ease) .9s forwards; }
.no-pro .cl-grad svg { stroke-dashoffset: 0; }
.cl-hero-sub { max-width: 400px; margin: 22px auto 30px; font-size: 14.5px; line-height: 1.7; color: #6b7692; animation: cl-rise .8s var(--cl-ease) .35s both; }

.cl-hero #shorten { max-width: 520px; margin: 0 auto; animation: cl-rise .8s var(--cl-ease) .5s both; }
.cl-hero #shorten .form-group {
    position: relative; display: flex; align-items: center; margin: 0; padding: 6px 6px 6px 18px;
    background: #fff; border: 1px solid #e8eaf8; border-radius: 999px; box-shadow: 0 20px 44px -22px rgba(99, 102, 241, .55);
    transition: border-color .25s, box-shadow .25s, transform .3s var(--cl-ease);
}
.cl-hero #shorten .form-group:hover { transform: translateY(-2px); }
.cl-hero #shorten .form-group:focus-within { border-color: var(--cl-ultra); box-shadow: 0 0 0 4px rgba(99, 102, 241, .16), 0 24px 46px -22px rgba(99, 102, 241, .6); }
.cl-hero #shorten .cl-input-icon { position: static; transform: none; flex: 0 0 auto; color: #8f93d6; font-size: 14px; pointer-events: none; }
.cl-hero #shorten .form-group input.form-control.input-lg {
    flex: 1 1 auto; width: auto; min-width: 0; height: 42px; min-height: 0; padding: 0 12px;
    background: transparent; border: 0; border-radius: 999px; box-shadow: none; font-size: 13.5px; color: var(--cl-ink);
}
.cl-hero #shorten .form-control::-webkit-input-placeholder { color: #8e97b3; }
.cl-hero #shorten .form-control::-moz-placeholder { color: #8e97b3; opacity: 1; }
.cl-hero #shorten button.btn-captcha {
    position: relative; overflow: hidden; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 40px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--cl-grad); color: #fff;
    font-family: var(--cl-body); font-weight: 700; font-size: 13px; box-shadow: 0 12px 22px -12px rgba(99, 102, 241, .9);
    transition: transform .3s var(--cl-spring), box-shadow .3s;
}
.cl-hero #shorten button.btn-captcha i { font-size: 12px; transition: transform .35s var(--cl-ease); }
.cl-hero #shorten button.btn-captcha:hover i { transform: translate(3px, -3px) rotate(8deg); }
.cl-hero #shorten button.btn-captcha:active { transform: scale(.95); }
.cl-hero #shorten .form-group.captcha { display: block; margin-top: 14px; padding: 0; background: transparent; border: 0; box-shadow: none; }

.cl-hero .add-link-result { max-width: 520px; margin: 14px auto 0; text-align: left; }
.cl-hero .add-link-result > * { animation: cl-rise .55s var(--cl-ease) both; }
.cl-hero .add-link-result .input-group { width: 100%; }
.cl-hero .add-link-result .form-control { height: 48px; background: #fff; border: 1px solid var(--cl-line); border-radius: 999px 0 0 999px; font-size: 14px; }
.cl-hero .add-link-result .input-group-btn .btn { height: 48px; border-radius: 0 999px 999px 0; background: var(--cl-grad); border: 0; color: #fff; }
.cl-hero .add-link-result .alert { margin: 0; }

.cl-hero-points {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; margin: 28px 0 0; padding: 0; list-style: none;
    font-size: 11.5px; font-weight: 500; color: #6b7692; animation: cl-rise .8s var(--cl-ease) .65s both;
}
.cl-hero-points i { margin-right: 5px; color: var(--cl-ultra); }

/* 7. Judul bagian ------------------------------------------------------- */
.cl-section-head { max-width: 640px; margin: 0 auto 48px; text-align: center; }
.cl-eyebrow {
    display: inline-block; margin-bottom: 14px; padding: 5px 14px; border-radius: 999px; background: #eef0ff; color: #5b5ee8;
    font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.cl-eyebrow.is-dark { background: rgba(255, 255, 255, .08); color: #c3c8ff; border: 1px solid rgba(255, 255, 255, .14); }
.cl-eyebrow.is-glass { background: rgba(255, 255, 255, .18); color: #fff; border: 1px solid rgba(255, 255, 255, .28); }
.cl-h2 { margin: 0 0 12px; font-size: clamp(1.8rem, 3.6vw, 2.5rem); font-weight: 800; letter-spacing: -.035em; }
.cl-lede { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--cl-muted); }
.cl-section-head.is-light .cl-h2 { color: #fff; }
.cl-section-head.is-light .cl-lede { color: rgba(255, 255, 255, .82); }

/* 8. Langkah ------------------------------------------------------------ */
section.cl-steps { position: relative; padding: 80px 0 100px; background: #fff; }
.cl-steps-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 0; padding: 0; list-style: none; }
.cl-step, .cl-feature, .cl-stat { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.cl-step {
    position: relative; overflow: hidden; padding: 24px 20px 30px; border: 1px solid #eceefb; border-radius: 18px;
    background: radial-gradient(120px 90px at var(--mx, 85%) var(--my, 0%), rgba(139, 92, 246, .1), transparent), linear-gradient(160deg, #fff, #f8f8ff);
    box-shadow: 0 22px 44px -30px rgba(76, 81, 191, .5);
    transition: box-shadow .35s, border-color .35s, transform .25s var(--cl-ease);
}
.cl-step:hover { border-color: #d9dcf8; box-shadow: 0 30px 54px -28px rgba(76, 81, 191, .6); }
.cl-step-no { position: absolute; top: 8px; right: 16px; font-family: var(--cl-display); font-size: 2.7rem; font-weight: 800; line-height: 1; color: rgba(99, 102, 241, .1); transition: transform .5s var(--cl-ease), color .3s; }
.cl-step:hover .cl-step-no { transform: translateY(-4px) scale(1.08); color: rgba(99, 102, 241, .18); }
.cl-step .cl-ico { margin-bottom: 38px; transition: transform .5s var(--cl-spring); }
.cl-step:hover .cl-ico { transform: rotate(-8deg) scale(1.1); }
.cl-step h3 { margin: 0 0 6px; font-size: 14.5px; font-weight: 700; }
.cl-step p { margin: 0; font-size: 12px; line-height: 1.6; color: var(--cl-muted); }
.cl-step::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, #34d399, #14b8a6, transparent); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--cl-ease) .5s; }
.cl-steps-list.in .cl-step::after, .no-pro .cl-step::after { transform: scaleX(1); }

.cl-minis { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 34px 0 0; padding: 0; list-style: none; }
.cl-minis li { display: flex; align-items: center; gap: 10px; padding: 9px 16px; background: #fff; border: 1px solid #eceefb; border-radius: 12px; box-shadow: 0 12px 26px -20px rgba(76, 81, 191, .55); transition: transform .3s var(--cl-spring), box-shadow .3s; }
.cl-minis li:hover { transform: translateY(-3px); box-shadow: 0 18px 30px -20px rgba(76, 81, 191, .7); }
.cl-minis i { color: var(--cl-ultra); font-size: 13px; }
.cl-minis span { text-align: left; }
.cl-minis b { display: block; font-size: 12px; line-height: 1.2; }
.cl-minis small { display: block; font-size: 8.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8a93ad; }
.cl-cta { margin-top: 30px; text-align: center; }
.cl-cta small { display: block; margin-top: 10px; font-size: 11px; color: #8a93ad; }

/* 9. Bagian gelap -------------------------------------------------------- */
section.cl-dark {
    position: relative; overflow: hidden; padding: 150px 0 170px; color: #cbd5f5;
    background: linear-gradient(115deg, #06292e 0%, #0d1830 42%, #1b1450 100%);
}
.cl-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(40% 50% at 10% 25%, rgba(20, 184, 166, .28), transparent 70%), radial-gradient(40% 55% at 92% 80%, rgba(124, 92, 246, .3), transparent 70%); animation: cl-glow 12s ease-in-out infinite alternate; }
.cl-dark .container { position: relative; z-index: 3; }
.cl-dark-grid { display: grid; grid-template-columns: 1fr 1.08fr; gap: 56px; align-items: center; }
.cl-dark-copy .cl-eyebrow { margin-bottom: 18px; }
.cl-dark-copy .cl-h2 { max-width: 380px; color: #fff; text-align: left; font-size: clamp(1.7rem, 3.2vw, 2.2rem); }
.cl-dark-copy .cl-lede { max-width: 380px; margin-bottom: 22px; color: #a9b4d8; font-size: 13px; }
.cl-info { display: flex; gap: 14px; margin-top: 12px; padding: 14px 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; transition: background-color .3s, transform .3s var(--cl-ease), border-color .3s; }
.cl-info:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .2); transform: translateX(6px); }
.cl-info .cl-ico { width: 32px; height: 32px; border-radius: 10px; font-size: 13px; }
.cl-info h4 { margin: 0 0 3px; font-size: 13px; font-weight: 700; color: #fff; letter-spacing: 0; }
.cl-info p { margin: 0; font-size: 11.5px; line-height: 1.6; color: #98a3cb; }

.cl-check { padding: 14px; background: linear-gradient(160deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .04)); border: 1px solid rgba(255, 255, 255, .15); border-radius: 22px; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cl-check-top { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 12px; font-size: 11.5px; font-weight: 700; color: #e5e9ff; }
.cl-check-top .fa-bolt { margin-right: 4px; color: #2dd4bf; }
.cl-live { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; color: #7ee2b8; }
.cl-check-hero { display: flex; align-items: flex-end; justify-content: space-between; padding: 16px 18px; background: linear-gradient(120deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; }
.cl-check-hero small { display: block; font-size: 10.5px; color: #98a3cb; }
.cl-check-hero strong { display: block; margin-top: 8px; font-family: var(--cl-display); font-size: 2rem; font-weight: 800; letter-spacing: -.03em; color: #fff; }
.cl-bars { display: flex; align-items: flex-end; gap: 7px; height: 66px; }
.cl-bars span { width: 13px; height: var(--h); border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg, var(--c), rgba(255, 255, 255, .15)); transform: scaleY(.04); transform-origin: bottom; }
.cl-check.in .cl-bars span { animation: cl-grow 1s var(--cl-ease) both, cl-bar 3.2s ease-in-out 1.2s infinite alternate; }
.cl-check.in .cl-bars span:nth-child(2) { animation-delay: .12s, 1.4s; }
.cl-check.in .cl-bars span:nth-child(3) { animation-delay: .24s, 1.7s; }
.cl-check.in .cl-bars span:nth-child(4) { animation-delay: .36s, 2s; }
.cl-check.in .cl-bars span:nth-child(5) { animation-delay: .48s, 2.3s; }
.no-pro .cl-bars span { transform: none; }
.cl-check-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0; }
.cl-check-tiles > div { padding: 14px 8px 12px; text-align: center; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; transition: transform .3s var(--cl-ease), background-color .3s; }
.cl-check-tiles > div:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .09); }
.cl-check-tiles .cl-ico { width: 30px; height: 30px; margin-bottom: 8px; border-radius: 9px; font-size: 12px; }
.cl-check-tiles b { display: block; font-size: 11px; color: #fff; line-height: 1.3; }
.cl-check-tiles small { display: block; margin-top: 2px; font-size: 9.5px; color: #8e99c4; line-height: 1.3; }
.cl-check-rows { margin: 0; padding: 0; list-style: none; }
.cl-check-rows li { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding: 10px 14px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09); border-radius: 10px; font-size: 11.5px; }
.cl-check-rows span { color: #a9b4d8; }
.cl-check-rows b { color: #fff; font-weight: 700; }
.cl-check-rows b i { margin-left: 6px; color: #2dd4bf; }

/* 10. Fitur --------------------------------------------------------------- */
section.cl-features { position: relative; padding: 70px 0 110px; background: #f0f1fc; }
.cl-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cl-feature {
    position: relative; overflow: hidden; padding: 22px 22px 26px; border: 1px solid rgba(99, 102, 241, .1); border-radius: 16px;
    box-shadow: 0 20px 40px -32px rgba(76, 81, 191, .55); transition: box-shadow .35s, border-color .35s, transform .25s var(--cl-ease);
}
.cl-feature.t-lav { background: linear-gradient(150deg, #fff 45%, #efeaff); }
.cl-feature.t-sky { background: linear-gradient(150deg, #fff 45%, #e6f6fd); }
.cl-feature.t-mint { background: linear-gradient(150deg, #fff 45%, #e8f8f4); }
.cl-feature:hover { border-color: rgba(99, 102, 241, .28); box-shadow: 0 30px 50px -30px rgba(76, 81, 191, .7); }
.cl-feature .cl-ico { margin-bottom: 40px; width: 34px; height: 34px; border-radius: 10px; font-size: 14px; transition: transform .5s var(--cl-spring); }
.cl-feature:hover .cl-ico { transform: translateY(-4px) rotate(-8deg) scale(1.1); }
.cl-feature h3 { position: relative; margin: 0 0 6px; font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.cl-feature p { position: relative; margin: 0; max-width: 92%; font-size: 12px; line-height: 1.65; color: var(--cl-muted); }
.cl-wm { position: absolute; right: 12px; bottom: 4px; font-size: 76px; line-height: 1; color: rgba(99, 102, 241, .07); transition: transform .6s var(--cl-ease), color .3s; }
.cl-feature:hover .cl-wm { transform: translate(-6px, -6px) rotate(-10deg) scale(1.1); color: rgba(99, 102, 241, .12); }

/* 11. Testimoni ------------------------------------------------------------ */
section.cl-testimonials { position: relative; padding: 130px 0 110px; background: linear-gradient(#f7f7fd, #fff); }
section.cl-testimonials::before { content: ""; position: absolute; top: -1px; left: 0; width: 100%; height: 90px; background: var(--w-top-lav) repeat-x; background-size: 1440px 100%; animation: cl-wave 30s linear infinite; }
.cl-testimonials .container { position: relative; }
.cl-ts { max-width: 1000px; margin: 0 auto; padding: 40px 48px; background: #fff; border: 1px solid #eceefb; border-radius: 18px; box-shadow: 0 30px 60px -40px rgba(76, 81, 191, .45); }
.cl-ts-viewport { display: grid; }
.cl-ts-slide { grid-area: 1 / 1; display: grid; grid-template-columns: 170px 1fr; align-items: center; gap: 30px; margin: 0; opacity: 0; visibility: hidden; transform: translateX(calc(var(--dir, 1) * 36px)); transition: opacity .6s var(--cl-ease), transform .6s var(--cl-ease), visibility .6s; }
.cl-ts-slide.is-active { opacity: 1; visibility: visible; transform: none; }
.cl-ts-slide.is-out { transform: translateX(calc(var(--dir, 1) * -36px)); }
.cl-ts-who { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cl-ts-avatar { display: block; width: 68px; height: 68px; margin-bottom: 8px; padding: 3px; border-radius: 50%; background: var(--cl-grad-2); box-shadow: 0 14px 26px -12px rgba(99, 102, 241, .7); }
.cl-ts-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; border: 3px solid #fff; border-radius: 50%; background: #eef0ff; }
.cl-ts-who b { font-size: 13px; font-weight: 700; }
.cl-ts-who small { display: block; margin: 2px 0 6px; font-size: 10.5px; color: var(--cl-muted); }
.cl-ts-who small i { color: var(--cl-ultra); }
.cl-stars { color: #f5a623; font-size: 11px; letter-spacing: 1px; }
.cl-stars i { display: inline-block; animation: cl-twinkle 2.4s ease-in-out infinite; }
.cl-stars i:nth-child(2) { animation-delay: .15s; } .cl-stars i:nth-child(3) { animation-delay: .3s; }
.cl-stars i:nth-child(4) { animation-delay: .45s; } .cl-stars i:nth-child(5) { animation-delay: .6s; }
.cl-ts blockquote { margin: 0; padding: 4px 0 4px 30px; border: 0; border-left: 2px solid #e3e5fa; font-size: 15px; line-height: 1.7; font-weight: 500; color: var(--cl-ink); }
.cl-quote-mark { display: block; margin-bottom: 10px; font-size: 22px; color: #6366f1; opacity: .85; }
.cl-ts blockquote .content, .cl-ts blockquote .content p { margin: 0; font-size: 15px; }
.cl-ts-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 30px; }
.cl-ts-btn { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--cl-ultra); font-size: 13px; transition: background-color .25s, transform .3s var(--cl-spring); }
.cl-ts-btn:hover { background: var(--cl-ultra-soft); transform: scale(1.12); }
.cl-ts-dots { display: inline-flex; align-items: center; gap: 6px; }
.cl-ts-dots i { width: 6px; height: 6px; border-radius: 6px; background: #d4d7f2; cursor: pointer; transition: width .4s var(--cl-ease), background-color .3s; }
.cl-ts-dots i.is-active { width: 24px; background: var(--cl-grad); background-color: var(--cl-ultra); }

/* 12. Statistik --------------------------------------------------------------- */
section.cl-stats {
    position: relative; overflow: hidden; padding: 150px 0 160px; color: #fff;
    background: radial-gradient(40% 60% at 85% 20%, rgba(255, 255, 255, .16), transparent 70%), linear-gradient(120deg, #5556ee 0%, #7059f3 55%, #8b5cf6 100%);
}
.cl-stats .container { position: relative; z-index: 3; }
.cl-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cl-stat { padding: 26px 20px 24px; text-align: center; background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .22); border-radius: 16px; transition: background-color .3s, box-shadow .3s, transform .25s var(--cl-ease); }
.cl-stat:hover { background: rgba(255, 255, 255, .2); box-shadow: 0 26px 44px -26px rgba(20, 10, 90, .7); }
.cl-stat-icon { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-bottom: 8px; border-radius: 10px; background: rgba(255, 255, 255, .2); font-size: 14px; animation: cl-float 5s ease-in-out infinite; }
.cl-stat-num { font-family: var(--cl-display); font-size: 2.3rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.cl-stat-text { font-size: 12px; color: rgba(255, 255, 255, .85); }

/* 13. Kontak -------------------------------------------------------------------- */
section.cl-contact { padding: 40px 0 100px; background: #fff; }
.cl-contact-card { display: grid; grid-template-columns: .82fr 1.18fr; overflow: hidden; border: 1px solid #eceefb; border-radius: 20px; box-shadow: 0 40px 80px -44px rgba(30, 27, 75, .55); }
.cl-contact-side { position: relative; padding: 38px 32px; color: #b8c2e6; background: radial-gradient(70% 50% at 0% 100%, rgba(124, 92, 246, .35), transparent 70%), linear-gradient(160deg, #082a36 0%, #121a3d 55%, #1d1450 100%); }
.cl-contact-side .cl-eyebrow { margin-bottom: 18px; }
.cl-contact-side .cl-h2 { color: #fff; font-size: 1.65rem; }
.cl-contact-side > p { margin: 0 0 18px; font-size: 12px; line-height: 1.7; }
.cl-reply { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; font-size: 10.5px; font-weight: 600; color: #dfe4ff; }
.cl-contact-side ul { margin: 22px 0 0; padding: 0; list-style: none; }
.cl-contact-side li { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 12.5px; font-weight: 600; color: #fff; transition: transform .3s var(--cl-ease); }
.cl-contact-side li:hover { transform: translateX(6px); }
.cl-contact-side li .cl-ico { width: 28px; height: 28px; border-radius: 9px; font-size: 12px; }
.cl-contact-form { padding: 30px 32px 28px; background: #fff; }
.cl-contact-form .cl-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cl-contact-form .form-group { margin-bottom: 12px; }
.cl-contact-form .form-control { min-height: 42px; padding: 10px 14px; background: #f8f9fe; border: 1px solid #e8eaf6; border-radius: 10px; font-size: 12.5px; }
.cl-contact-form .form-control:focus { background: #fff; border-color: var(--cl-ultra); }
.cl-contact-form textarea.form-control { min-height: 110px; resize: vertical; }
.cl-contact-form .help-block { margin: 2px 0 0; font-size: 11px; }
.cl-contact-form .checkbox label, .cl-contact-form label { font-size: 11px; font-weight: 500; color: var(--cl-muted); }
.cl-contact-form label b { font-weight: 500; }
.cl-contact-form .btn-contact {
    position: relative; overflow: hidden; width: 100%; height: 44px; padding: 0; border: 0; border-radius: 10px;
    background: var(--cl-grad); color: #fff; font-size: 13px; font-weight: 700; box-shadow: 0 16px 28px -14px rgba(99, 102, 241, .85);
}
.cl-contact-form .btn-contact i { margin-right: 6px; transition: transform .35s var(--cl-ease); }
.cl-contact-form .btn-contact:hover i { transform: translate(3px, -3px) rotate(8deg); }
.cl-contact-form .btn-contact:hover { transform: translateY(-2px); }

/* 14. Footer ------------------------------------------------------------------------ */
footer.cl-footer { position: relative; padding: 100px 0 40px; color: #b8c2e6; background: radial-gradient(40% 50% at 8% 20%, rgba(20, 184, 166, .16), transparent 70%), linear-gradient(115deg, #082a2d 0%, #0f1530 45%, #1b1450 100%); }
.cl-footer-line { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--cl-rainbow); opacity: .8; }
.cl-footer-card { display: grid; grid-template-columns: 1.7fr .85fr 1.15fr; gap: 36px; padding: 40px 44px; background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .04)); border: 1px solid rgba(255, 255, 255, .13); border-radius: 28px; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .65); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.cl-footer .navbar-brand { margin: 0 0 14px !important; padding: 0; height: 40px; }
.cl-tagline { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px; padding: 6px 13px; background: rgba(16, 185, 129, .15); border: 1px solid rgba(16, 185, 129, .35); border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #6ee7b7; }
.cl-footer-brand p { max-width: 380px; margin: 0 0 20px; font-size: 13px; line-height: 1.8; color: #b4bee3; }
.cl-pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cl-pills li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .13); border-radius: 999px; font-size: 11.5px; font-weight: 600; color: #fff; transition: transform .3s var(--cl-spring), background-color .3s; }
.cl-pills li:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .13); }
.cl-pills i { color: #5eead4; }
.cl-footer-col h5 { position: relative; margin: 6px 0 22px; padding-bottom: 10px; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.cl-footer-col h5::after { content: ""; position: absolute; left: 0; bottom: 0; width: 24px; height: 2px; border-radius: 2px; background: var(--cl-grad-2); }
.cl-footer .bottom-menu ul { margin: 0; padding: 0; }
.cl-footer .bottom-menu li { margin-bottom: 14px; }
.cl-footer .bottom-menu a { position: relative; display: inline-block; padding-left: 16px; font-size: 13px; font-weight: 500; color: #d5dbf5; transition: color .25s, transform .3s var(--cl-ease); }
.cl-footer .bottom-menu a::before { content: ""; position: absolute; left: 0; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: #7c6cf0; transition: transform .3s var(--cl-spring), background-color .3s; }
.cl-footer .bottom-menu a:hover { color: #fff; transform: translateX(4px); }
.cl-footer .bottom-menu a:hover::before { transform: scale(1.5); background: #5eead4; }
.cl-footer .social-links ul { margin: 0 0 18px; padding: 0; }
.cl-footer .social-links ul li { padding: 0 8px 0 0; }
.cl-footer .social-links ul li a { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; font-size: 16px; transition: background-color .25s, transform .35s var(--cl-spring), box-shadow .25s; }
.cl-footer .social-links ul li a:hover, .cl-footer .social-links ul li a:focus { background: var(--cl-grad); border-color: transparent; color: #fff; transform: translateY(-4px) rotate(-6deg); box-shadow: 0 14px 24px -12px rgba(99, 102, 241, .9); }
.cl-help { display: flex; gap: 12px; padding: 14px 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; }
.cl-help .cl-ico { width: 32px; height: 32px; border-radius: 10px; font-size: 13px; }
.cl-help p { margin: 0; font-size: 12.5px; line-height: 1.55; color: #c3cbea; }
.cl-footer .payment-methods { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 36px; margin-top: 24px; padding: 18px 28px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); border-radius: 20px; }
.cl-footer .payment-methods img { display: block; max-height: 30px; width: auto; filter: grayscale(1) brightness(1.6); opacity: .7; transition: filter .3s, opacity .3s, transform .35s var(--cl-spring); }
.cl-footer .payment-methods img:hover { filter: none; opacity: 1; transform: translateY(-3px); }
.cl-copy { margin-top: 24px; text-align: center; }
.cl-copy span { display: inline-block; padding: 10px 22px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #d5dbf5; }

.cl-top {
    position: fixed; right: 22px; bottom: 22px; z-index: 1000; display: grid; place-items: center; width: 46px; height: 46px;
    border-radius: 50%; background: var(--cl-grad); color: #fff; box-shadow: 0 16px 30px -12px rgba(99, 102, 241, .8);
    opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .3s, visibility .3s, transform .4s var(--cl-spring);
}
.cl-top.show { opacity: 1; visibility: visible; transform: none; }
.cl-top:hover, .cl-top:focus { color: #fff; transform: translateY(-4px); }

/* 15. Halaman dalam ---------------------------------------------------------------- */
header.cl-page-hero, body.inner-page main > header:not(.cl-hero) {
    position: relative; height: auto; min-height: 0; padding: 138px 0 50px; border: 0; text-align: center; color: var(--cl-ink);
    background: radial-gradient(45% 80% at 4% 0%, #ddd7ff 0, transparent 70%), radial-gradient(45% 80% at 98% 0%, #c9f0f8 0, transparent 70%), linear-gradient(180deg, #f6f5ff, #fff);
}
header.cl-page-hero::before { content: ""; position: absolute; left: -5%; right: -5%; top: 0; height: 190px; opacity: .6; pointer-events: none; background: radial-gradient(60% 100% at 20% 0%, rgba(255, 255, 255, .9), transparent 70%); }
.cl-page-title, body.inner-page main > header:not(.cl-hero) h1 { position: relative; margin: 0; font-size: clamp(2rem, 4.2vw, 2.9rem); font-weight: 800; letter-spacing: -.04em; animation: cl-rise .7s var(--cl-ease) both; }
.cl-title-bar, body.inner-page main > header:not(.cl-hero) .container::after { display: block; content: none; }
.cl-title-bar { width: 46px; height: 4px; margin: 14px auto 0; border-radius: 4px; background: var(--cl-grad); transform: scaleX(0); animation: cl-bar-in .7s var(--cl-ease) .3s forwards; }
body.inner-page main > header:not(.cl-hero) h1::after { content: ""; display: block; width: 46px; height: 4px; margin: 14px auto 0; border-radius: 4px; background: var(--cl-grad); animation: cl-bar-in .7s var(--cl-ease) .3s both; }
section.cl-page-body { padding: 10px 0 100px; }
.cl-card {
    position: relative; padding: 46px 52px 52px; background: #fff; border: 1px solid #f0f1fb; border-radius: 28px;
    box-shadow: 0 34px 80px -44px rgba(76, 81, 191, .45); animation: cl-rise .8s var(--cl-ease) .15s both;
}
.cl-card::before { content: ""; position: absolute; top: 0; left: 28px; right: 28px; height: 2px; background: var(--cl-rainbow); border-radius: 2px; transform-origin: left; animation: cl-line 1.1s var(--cl-ease) .4s both; }
.cl-prose { max-width: none; font-size: 15px; line-height: 1.8; color: #334155; }
.cl-prose h2 { margin: 1.6em 0 .6em; font-size: 1.6rem; }
.cl-prose h3 { margin: 1.5em 0 .5em; font-size: 1.25rem; }
.cl-prose p { margin: 0 0 1.2em; }
.cl-prose a { text-decoration: underline; text-underline-offset: 3px; }
.cl-prose ul, .cl-prose ol { padding-left: 1.3em; margin-bottom: 1.2em; }
.cl-prose img { max-width: 100%; height: auto; border-radius: 16px; }
.cl-prose blockquote { margin: 1.6em 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--cl-ultra); font-size: 1.05rem; color: var(--cl-ink); }


/* 20. Halaman tautan: captcha, banner, interstitial (dipertahankan) ----------- */
body.captcha-page, body.banner-page, body.interstitial-page { background: var(--cl-paper); }

body.captcha-page #mainNav,
body.banner-page #mainNav,
body.interstitial-page #mainNav {
    margin-bottom: 0; padding: 14px 0;
    background: transparent; background-image: none; border: 0;
}
body.captcha-page .navbar-default.cl-nav,
body.banner-page .navbar-default.cl-nav,
body.interstitial-page .navbar-default.cl-nav { padding: 14px 0; }

.box-main {
    margin: 40px 0 28px; padding: 44px 28px;
    background: #fff; border: 1px solid var(--cl-line); border-radius: 28px;
    box-shadow: 0 34px 60px -44px rgba(16, 27, 59, .4);
    text-align: center;
    animation: cl-rise .7s var(--cl-ease) both;
}
.box-main h4 { margin: 0 0 6px; font-size: 1.5rem; font-weight: 800; }
.box-main .blog-item .page-header { border-bottom-color: var(--cl-line); }
.box-main .blog-item .page-header h3 { text-transform: none; }
.box-main .link-details .link-title { font-size: 1.2rem; }
.box-main .link-details .link-image { border-radius: 14px; margin-bottom: 14px; }

.cl-about { max-width: 760px; margin: 0 auto; padding: 8px 6px 70px; color: var(--cl-muted); }
.cl-about h3 { margin: 0 0 8px; font-size: 1.2rem; }
.cl-about p { margin-bottom: 1.6em; }

/* hitung mundur */
.countdown {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 124px; height: 124px; margin: 22px auto; padding: 0;
    border: 0; border-radius: 50%;
    font-size: 13px; line-height: 1.1; font-weight: 500; color: var(--cl-muted);
}
.countdown .timer { position: relative; z-index: 1; font-family: var(--cl-display); font-size: 2.5rem; font-weight: 800; line-height: 1; color: var(--cl-ink); }
.countdown-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.countdown-ring circle { fill: none; stroke-width: 7; }
.countdown-ring .ring-bg { stroke: var(--cl-line); }
.countdown-ring .ring-fg {
    stroke: var(--cl-ultra); stroke-linecap: round;
    stroke-dasharray: 327; stroke-dashoffset: 0;
    animation: cl-ring var(--cl-dur, 5s) linear forwards;
}

.btn-success.btn-lg.get-link { min-width: 230px; }
a.btn.get-link.disabled {
    opacity: 1; pointer-events: none;
    background: var(--cl-paper); border-color: var(--cl-line); color: var(--cl-muted); box-shadow: none;
}
a.btn.get-link:not(.disabled) { animation: cl-ready 1.4s ease-out 2; }

.interstitial-page .skip-ad { font-size: 13px; color: var(--cl-muted); line-height: 1.3; }
.interstitial-page .skip-ad .counter { font-family: var(--cl-display); font-size: 22px; font-weight: 800; color: var(--cl-ultra); }
.interstitial-page .skip-ad a {
    display: inline-block; padding: 10px 22px; border-radius: 999px;
    background: var(--cl-signal); background-image: none; color: var(--cl-ink); font-weight: 700;
}

/* 15. Cookie ----------------------------------------------------------- */
#cookie-pop { background-color: var(--cl-ink); }
#cookie-pop .btn { background: var(--cl-signal); border-color: var(--cl-signal); color: var(--cl-ink); }

/* 16. Reveal saat scroll ---------------------------------------------------------- */
.js .reveal:not(.in) { opacity: 0; }
.js .reveal.in { animation: cl-in .85s var(--cl-ease) var(--d, 0ms) backwards; }
.js .reveal-left.in { animation-name: cl-in-left; }
.no-pro .reveal { opacity: 1 !important; }

/* 17. Keyframes ---------------------------------------------------------------------- */
@keyframes cl-in { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; } }
@keyframes cl-in-left { from { opacity: 0; transform: translateX(46px); } to { opacity: 1; } }
@keyframes cl-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes cl-ping { 70%, 100% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } }
@keyframes cl-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cl-bar-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cl-wave { to { background-position-x: -1440px; } }
@keyframes cl-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(46px, 30px) scale(1.12); } }
@keyframes cl-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes cl-shimmer { to { background-position: 100% 0; } }
@keyframes cl-draw { to { stroke-dashoffset: 0; } }
@keyframes cl-glow { from { opacity: .7; transform: scale(1); } to { opacity: 1; transform: scale(1.08); } }
@keyframes cl-grow { to { transform: scaleY(1); } }
@keyframes cl-bar { from { transform: scaleY(1); } to { transform: scaleY(.72); } }
@keyframes cl-twinkle { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }
@keyframes cl-ring { to { stroke-dashoffset: 327; } }
@keyframes cl-ready { 0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, .6); } 100% { box-shadow: 0 0 0 24px rgba(99, 102, 241, 0); } }

/* 18. Responsif ------------------------------------------------------------------------- */
@media (max-width: 1199px) {
    .cl-chip.c1 { left: 2%; } .cl-chip.c3 { left: 1%; } .cl-chip.c2 { right: 2%; } .cl-chip.c4 { right: 4%; }
}
@media (max-width: 991px) {
    header.cl-hero { padding: 170px 0 140px; }
    .cl-chip.c3, .cl-chip.c4 { display: none; }
    .cl-steps-list { grid-template-columns: repeat(2, 1fr); }
    .cl-dark-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .cl-dark-copy .cl-h2, .cl-dark-copy .cl-lede { max-width: none; }
    .cl-feature-grid { grid-template-columns: repeat(2, 1fr); }
    .cl-footer-card { grid-template-columns: 1fr 1fr; }
    .cl-footer-brand { grid-column: 1 / -1; }
    .cl-contact-card { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
    .navbar-default.cl-nav { padding: 10px 0; }
    .navbar-default.cl-nav > .container { border-radius: 26px; padding: 6px 10px 6px 12px; }
    .navbar-default.cl-nav > .container::after { left: 22px; right: 22px; }
    .navbar-default.cl-nav .navbar-collapse { width: 100%; }
    .navbar-default.cl-nav .navbar-nav { flex-direction: column; align-items: stretch; gap: 2px; margin: 8px 0 6px; }
    .navbar-default.cl-nav .navbar-nav > li > a { padding: 11px 16px; }
    header.cl-hero { padding: 140px 0 120px; }
    .cl-chip { display: none; }
    .cl-wave { height: 56px; }
    section.cl-steps { padding: 56px 0 70px; }
    section.cl-dark { padding: 110px 0 120px; }
    section.cl-features { padding: 50px 0 80px; }
    section.cl-testimonials { padding: 100px 0 80px; }
    section.cl-stats { padding: 110px 0 110px; }
    section.cl-contact { padding: 20px 0 70px; }
    .cl-section-head { margin-bottom: 32px; }
    .cl-steps-list, .cl-feature-grid, .cl-stat-grid { grid-template-columns: minmax(0, 1fr); }
    .cl-ts { padding: 28px 22px; }
    .cl-ts-slide { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .cl-ts blockquote { padding: 18px 0 0; border-left: 0; border-top: 2px solid #e3e5fa; }
    .cl-contact-side, .cl-contact-form { padding: 28px 22px; }
    .cl-contact-form .cl-form-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .cl-footer-card { grid-template-columns: minmax(0, 1fr); padding: 30px 24px; gap: 28px; }
    .cl-card { padding: 30px 22px 34px; border-radius: 22px; }
    .box-main { margin-top: 24px; padding: 32px 18px; border-radius: 22px; }
    .table > thead > tr > th, .table > tbody > tr > td { padding: 14px 12px; }
}
@media (max-width: 479px) {
    .cl-check-tiles { grid-template-columns: minmax(0, 1fr); }
    .nav-tabs, .nav-pills { display: flex; flex-wrap: wrap; }
}

/* 21. Mobile (mengikuti screenshot) + animasi tambahan ---------------------- */
:root { --cl-rainbow-loop: linear-gradient(90deg, #14b8a6, #3b82f6, #8b5cf6, #f59e0b, #14b8a6); }
body { animation: cl-fade .6s ease both; }

/* hero: gradasi lebih hidup + grid halus + garis cahaya */
header.cl-hero {
    background:
        radial-gradient(70% 55% at 0% 0%, #aebff6 0, transparent 70%),
        radial-gradient(60% 50% at 100% 4%, #a8e6f3 0, transparent 70%),
        linear-gradient(180deg, #e3f2fa 0%, #f3f5ff 48%, #fff 100%);
}
header.cl-hero::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: linear-gradient(rgba(99, 102, 241, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(99, 102, 241, .09) 1px, transparent 1px);
    background-size: 40px 40px;
    -webkit-mask-image: linear-gradient(#000 25%, transparent 85%); mask-image: linear-gradient(#000 25%, transparent 85%);
    animation: cl-grid 14s linear infinite;
}
header.cl-hero::after {
    content: ""; position: absolute; left: -10%; top: 36%; z-index: 1; width: 120%; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(34, 193, 224, .7), transparent); transform: rotate(-4deg);
    animation: cl-streak 7s ease-in-out infinite;
}
.cl-blobs i { translate: var(--px, 0px) calc(var(--py, 0px) + var(--sy, 0px) * -1); opacity: .65; }

/* partikel */
.cl-sparks { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.cl-spark {
    position: absolute; bottom: -14px; border-radius: 50%; opacity: 0;
    background: radial-gradient(circle, #fff 0, rgba(139, 92, 246, .55) 70%);
    animation: cl-spark var(--t, 12s) linear var(--dl, 0s) infinite;
}
.cl-spark.is-light { background: radial-gradient(circle, #fff 0, rgba(255, 255, 255, .35) 70%); }
.cl-spark.is-teal { background: radial-gradient(circle, #9ff5e8 0, rgba(45, 212, 191, .4) 70%); }
.cl-footer .container { position: relative; z-index: 2; }

/* judul: kata muncul satu per satu */
.cl-hero-title .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .04em .16em; margin: 0 -.04em -.16em; }
.cl-hero-title .w > span { display: inline-block; transform: translateY(118%); }
.js .cl-hero-title.in .w > span { animation: cl-word .9s var(--cl-ease) calc(var(--wi, 0) * 110ms + 120ms) both; }
.js .cl-hero-title.is-split .l1, .js .cl-hero-title.is-split .l2 { animation: none !important; opacity: 1 !important; }
.js .cl-hero-title.is-split:not(.in) .cl-grad { opacity: 0; }
.js .cl-hero-title.is-split.in .cl-grad { animation: cl-word-em .9s var(--cl-ease) calc(var(--wi, 0) * 110ms + 120ms) both, cl-shimmer 6s ease-in-out 1.6s infinite alternate; }

/* kilau & denyut */
.cl-badge, .cl-eyebrow { position: relative; overflow: hidden; }
.cl-badge::after, .cl-eyebrow::after { content: ""; position: absolute; top: 0; left: -70%; width: 50%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .85), transparent); transform: skewX(-20deg); animation: cl-sweep 5s ease-in-out 1.5s infinite; }
.cl-eyebrow.is-dark::after, .cl-eyebrow.is-glass::after { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .3), transparent); }
.cl-hero #shorten button.btn-captcha { animation: cl-btn-ring 2.8s ease-out 2s infinite; }
.cl-hero-points li { animation: cl-pop .7s var(--cl-spring) both; }
.cl-hero-points li:nth-child(1) { animation-delay: .9s; } .cl-hero-points li:nth-child(2) { animation-delay: 1.05s; } .cl-hero-points li:nth-child(3) { animation-delay: 1.2s; }
.cl-hero-points i { display: inline-block; animation: cl-bob 3s ease-in-out infinite; }

/* langkah, fitur, statistik */
.cl-step .cl-ico { position: relative; }
.cl-step .cl-ico::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--g, var(--cl-grad)); animation: cl-ring-pulse 3.2s ease-out infinite; }
.cl-step:nth-child(2) .cl-ico::after { animation-delay: .8s; } .cl-step:nth-child(3) .cl-ico::after { animation-delay: 1.6s; } .cl-step:nth-child(4) .cl-ico::after { animation-delay: 2.4s; }
.cl-feature::before, .cl-step::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(180px 140px at var(--mx, 50%) var(--my, 50%), rgba(99, 102, 241, .13), transparent 70%); }
.cl-feature:hover::before, .cl-step:hover::before { opacity: 1; }
.cl-stat { position: relative; overflow: hidden; }
.cl-stat::after { content: ""; position: absolute; top: 0; left: -80%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent); transform: skewX(-20deg); animation: cl-sweep 6s ease-in-out infinite; }
.cl-stat:nth-child(2)::after { animation-delay: 1.5s; } .cl-stat:nth-child(3)::after { animation-delay: 3s; }
section.cl-stats { background-size: auto, 200% 200%; animation: cl-bg 14s ease-in-out infinite alternate; }
.cl-minis i { animation: cl-bob 3.4s ease-in-out infinite; }

/* panel Paid View Check */
.cl-check { position: relative; overflow: hidden; }
.cl-check::after { content: ""; position: absolute; left: 0; right: 0; top: -30%; height: 30%; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(45, 212, 191, .16), transparent); animation: cl-scan 5.5s linear infinite; }
.cl-check-tiles > div { position: relative; }
.cl-check-tiles > div::after { content: "\f00c"; font-family: FontAwesome; position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #22c55e; color: #fff; font-size: 8px; transform: scale(0); }
.cl-check.in .cl-check-tiles > div::after { animation: cl-pop .55s var(--cl-spring) 1.3s forwards; }
.cl-check.in .cl-check-tiles > div:nth-child(2)::after { animation-delay: 1.7s; } .cl-check.in .cl-check-tiles > div:nth-child(3)::after { animation-delay: 2.1s; }
.cl-check-rows b i { display: inline-block; animation: cl-tick 2.6s ease-in-out infinite; }
.cl-check-rows li:nth-child(2) b i { animation-delay: .5s; } .cl-check-rows li:nth-child(3) b i { animation-delay: 1s; }

/* testimoni, kontak, footer */
.cl-ts-avatar { position: relative; background: none; }
.cl-ts-avatar::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(#6366f1, #22c1e0, #8b5cf6, #f5b82e, #6366f1); animation: cl-spin 4s linear infinite; }
.cl-ts-avatar img { position: relative; z-index: 1; }
.cl-quote-mark { display: inline-block; animation: cl-bob 3s ease-in-out infinite; }
.cl-contact-side > * { position: relative; }
.cl-contact-side::before { content: ""; position: absolute; right: -90px; top: -70px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(34, 193, 224, .38), transparent 70%); animation: cl-orbit 10s ease-in-out infinite alternate; }
.cl-contact-form .form-control:focus { transform: translateY(-1px); }
.cl-pills li { animation: cl-bob 5s ease-in-out infinite; }
.cl-pills li:nth-child(2) { animation-delay: -1.6s; } .cl-pills li:nth-child(3) { animation-delay: -3.2s; }
.cl-footer .navbar-brand::before { animation: cl-pulse-s 3.5s ease-in-out infinite; }

/* garis pelangi mengalir */
.navbar-default.cl-nav > .container::after, .cl-footer-line, .cl-card::before { background: var(--cl-rainbow-loop); background-size: 1000px 100%; background-repeat: repeat-x; }
.navbar-default.cl-nav > .container::after { animation: cl-line 1.2s var(--cl-ease) .3s both, cl-flow 6s linear 1.5s infinite; }
.cl-footer-line { animation: cl-flow 7s linear infinite; }
.cl-card::before { animation: cl-line 1.1s var(--cl-ease) .4s both, cl-flow 7s linear 1.5s infinite; }
.cl-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 2000; height: 3px; pointer-events: none; transform-origin: left; transform: scaleX(var(--p, 0)); background: var(--cl-rainbow-loop); background-size: 600px 100%; animation: cl-flow2 4s linear infinite; }

/* ombak berlapis */
.cl-wave::before { content: ""; position: absolute; inset: 0; background: inherit; opacity: .5; background-size: 1100px 100%; transform: translateY(-9px); animation: cl-wave2 19s linear infinite reverse; }
.cl-wave--top-white::before, .cl-wave--top-lav::before { transform: translateY(9px); }

/* variasi reveal & ripple */
.js .reveal-zoom.in { animation-name: cl-in-zoom; }
.js .reveal-right.in { animation-name: cl-in-right; }
.cl-ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .55); transform: scale(0); animation: cl-ripple .65s ease-out forwards; pointer-events: none; }

/* hamburger */
.navbar-default.cl-nav .navbar-toggle {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    width: 50px; height: 50px; margin: 0; padding: 0; border: 3px solid #dcdffb; border-radius: 16px; background: #fff;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, .08); animation: cl-btn-ring2 3.2s ease-out infinite;
}
@media (min-width: 768px) { .navbar-default.cl-nav .navbar-toggle { display: none; } }
.navbar-default.cl-nav .navbar-toggle .icon-bar { display: block; width: 24px; height: 3px; margin: 0 !important; border-radius: 3px; background: linear-gradient(90deg, #6366f1, #22c1e0); transition: transform .4s var(--cl-spring), opacity .2s, width .3s; }
.navbar-default.cl-nav .navbar-toggle .icon-bar + .icon-bar { margin-top: 0 !important; }
.cl-nav.is-open .navbar-toggle { border-color: #c9ccf7; }
.cl-nav.is-open .navbar-toggle .icon-bar:nth-child(2) { transform: translateY(8px) rotate(45deg); }
.cl-nav.is-open .navbar-toggle .icon-bar:nth-child(3) { opacity: 0; width: 6px; }
.cl-nav.is-open .navbar-toggle .icon-bar:nth-child(4) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 767px) {
    .container { padding-left: 16px; padding-right: 16px; }
    .navbar-default.cl-nav { padding: 14px 0; }
    .navbar-default.cl-nav > .container { padding: 9px 10px 9px 16px; border-radius: 30px; transition: border-radius .4s var(--cl-ease), box-shadow .3s; }
    .navbar-default.cl-nav .navbar-brand { height: 46px; font-size: 24px; }
    .cl-nav .navbar-brand:not(.logo-image)::before { width: 44px; height: 44px; margin-right: 12px; }
    .navbar-default.cl-nav .navbar-collapse { margin-top: 8px; }
    .navbar-default.cl-nav .navbar-collapse.in, .navbar-default.cl-nav .navbar-collapse.collapsing { padding: 12px; border: 1px solid #edeffd; border-radius: 24px; background: #fff; }
    .navbar-default.cl-nav .navbar-collapse.in { animation: cl-panel .4s var(--cl-ease); }
    .navbar-default.cl-nav .navbar-nav { margin: 0; gap: 0; }
    .navbar-default.cl-nav .navbar-nav > li > a { padding: 15px 16px; border-radius: 16px; font-size: 18px; text-align: center; }
    .cl-nav.is-open .navbar-nav > li { animation: cl-slide .5s var(--cl-ease) both; }
    .cl-nav.is-open .navbar-nav > li:nth-child(1) { animation-delay: .05s; } .cl-nav.is-open .navbar-nav > li:nth-child(2) { animation-delay: .1s; }
    .cl-nav.is-open .navbar-nav > li:nth-child(3) { animation-delay: .15s; } .cl-nav.is-open .navbar-nav > li:nth-child(4) { animation-delay: .2s; }
    .cl-nav.is-open .navbar-nav > li:nth-child(5) { animation-delay: .25s; } .cl-nav.is-open .navbar-nav > li:nth-child(6) { animation-delay: .3s; }
    .cl-nav.is-open .navbar-nav > li:nth-child(7) { animation-delay: .35s; } .cl-nav.is-open .navbar-nav > li:nth-child(8) { animation-delay: .4s; }

    header.cl-hero { padding: 134px 0 120px; }
    .cl-badge { gap: 12px; margin-bottom: 24px; padding: 11px 22px 11px 14px; font-size: 14.5px; }
    .cl-badge .dot { width: 12px; height: 12px; animation-name: cl-ping-lg; }
    .cl-hero-title { font-size: 2.8rem; letter-spacing: -.045em; line-height: 1.08; }
    .cl-hero-title .l1, .cl-hero-title .l2 { display: inline; }
    .cl-grad svg { bottom: -12px; height: 14px; stroke-width: 4; }
    .cl-hero-sub { max-width: none; margin: 26px 0 32px; font-size: 17px; line-height: 1.85; color: #5f6c85; }
    .cl-hero #shorten .form-group { padding: 9px 9px 9px 18px; border-radius: 18px; }
    .cl-hero #shorten .cl-input-icon { font-size: 20px; margin-right: 4px; }
    .cl-hero #shorten .form-group input.form-control.input-lg { height: 54px; font-size: 17px; }
    .cl-hero #shorten button.btn-captcha { height: 56px; padding: 0 24px; font-size: 17px; gap: 12px; }
    .cl-hero #shorten button.btn-captcha i { font-size: 16px; }
    .cl-hero-points { flex-direction: column; align-items: center; gap: 14px; margin-top: 28px; font-size: 17px; }
    .cl-hero-points i { margin-right: 10px; font-size: 22px; }

    .cl-h2 { font-size: 2.05rem; }
    .cl-lede { font-size: 15.5px; }
    .cl-step h3, .cl-feature h3 { font-size: 16px; }
    .cl-step p, .cl-feature p { font-size: 13.5px; }
    .cl-feature p { max-width: 100%; }
    .cl-info h4 { font-size: 14.5px; } .cl-info p { font-size: 13px; }
    .cl-check-rows li { font-size: 12.5px; }
    .cl-minis b { font-size: 13px; }
    .cl-ts blockquote, .cl-ts blockquote .content, .cl-ts blockquote .content p { font-size: 15.5px; }
    .cl-footer-brand p { font-size: 14px; }
}
@media (max-width: 479px) { .cl-hero-title { font-size: 2.6rem; } }

@keyframes cl-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cl-grid { to { background-position: 0 40px, 40px 0; } }
@keyframes cl-streak { 0%, 100% { opacity: .15; transform: rotate(-4deg) translateX(-6%); } 50% { opacity: 1; transform: rotate(-4deg) translateX(6%); } }
@keyframes cl-spark { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 12% { opacity: .9; } 88% { opacity: .55; } 100% { transform: translate(var(--dx, 30px), -105vh) scale(1.3); opacity: 0; } }
@keyframes cl-word { from { transform: translateY(118%); } to { transform: none; } }
@keyframes cl-word-em { from { opacity: 0; transform: translateY(34px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes cl-sweep { 0%, 55% { left: -70%; } 100% { left: 140%; } }
@keyframes cl-pop { 0% { opacity: 0; transform: scale(0); } 60% { opacity: 1; transform: scale(1.22); } 100% { opacity: 1; transform: scale(1); } }
@keyframes cl-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes cl-btn-ring { 0% { box-shadow: 0 12px 22px -12px rgba(99, 102, 241, .9), 0 0 0 0 rgba(99, 102, 241, .45); } 70%, 100% { box-shadow: 0 12px 22px -12px rgba(99, 102, 241, .9), 0 0 0 14px rgba(99, 102, 241, 0); } }
@keyframes cl-btn-ring2 { 0% { box-shadow: 0 0 0 4px rgba(99, 102, 241, .1), 0 0 0 4px rgba(99, 102, 241, .25); } 70%, 100% { box-shadow: 0 0 0 4px rgba(99, 102, 241, .1), 0 0 0 14px rgba(99, 102, 241, 0); } }
@keyframes cl-ring-pulse { from { transform: scale(1); opacity: .5; } to { transform: scale(1.9); opacity: 0; } }
@keyframes cl-scan { from { top: -30%; } to { top: 110%; } }
@keyframes cl-tick { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } }
@keyframes cl-bg { to { background-position: 0 0, 100% 50%; } }
@keyframes cl-spin { to { transform: rotate(360deg); } }
@keyframes cl-orbit { from { transform: translate(0, 0) scale(1); } to { transform: translate(-60px, 70px) scale(1.25); } }
@keyframes cl-pulse-s { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1) rotate(6deg); } }
@keyframes cl-flow { to { background-position-x: -1000px; } }
@keyframes cl-flow2 { to { background-position-x: -600px; } }
@keyframes cl-wave2 { to { background-position-x: -1100px; } }
@keyframes cl-slide { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes cl-panel { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes cl-ripple { to { transform: scale(3.2); opacity: 0; } }
@keyframes cl-ping-lg { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .35), 0 0 0 7px rgba(34, 197, 94, .12); } 70%, 100% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0), 0 0 0 7px rgba(34, 197, 94, .12); } }
@keyframes cl-in-zoom { from { opacity: 0; transform: scale(.8) translateY(20px); } to { opacity: 1; } }
@keyframes cl-in-right { from { opacity: 0; transform: translateX(-46px); } to { opacity: 1; } }

/* 22. Salju, aurora, dan responsif lanjutan -------------------------------- */
html { -webkit-text-size-adjust: 100%; }
.cl-snow { position: fixed; inset: 0; z-index: 900; width: 100%; height: 100%; pointer-events: none; }
.cl-snow-toggle {
    position: fixed; left: max(18px, env(safe-area-inset-left)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 1000;
    display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255, 255, 255, .8); border-radius: 50%;
    background: rgba(255, 255, 255, .92); color: #6366f1; font-size: 20px; line-height: 1; cursor: pointer;
    box-shadow: 0 14px 28px -12px rgba(76, 81, 191, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    transition: transform .35s var(--cl-spring), opacity .3s, color .3s;
}
.cl-snow-toggle:hover { transform: translateY(-3px) rotate(30deg); }
.cl-snow-toggle span { display: block; animation: cl-spin 8s linear infinite; }
.cl-snow-toggle.is-off { opacity: .7; color: #94a3b8; }
.cl-snow-toggle.is-off span { animation: none; }
.cl-snow-toggle.is-off::after { content: ""; position: absolute; width: 26px; height: 2px; border-radius: 2px; background: currentColor; transform: rotate(-45deg); }


/* responsif umum */
main img { max-width: 100%; height: auto; }
main .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 16px; }
.cl-card, .cl-prose, .cl-lede, .cl-feature p, .cl-ts blockquote { overflow-wrap: break-word; word-wrap: break-word; }
.cl-prose table { display: block; max-width: 100%; overflow-x: auto; }
.cl-prose pre, .cl-prose iframe, .cl-prose video { max-width: 100%; }
.cl-dark-grid > *, .cl-contact-card > *, .cl-footer-card > *, .cl-ts-slide > * { min-width: 0; }
.navbar-default.cl-nav { padding-top: max(14px, env(safe-area-inset-top)); }
.navbar-default.cl-nav.is-scrolled, .navbar-default.cl-nav.affix { padding-top: max(8px, env(safe-area-inset-top)); }
.cl-top { right: max(22px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom)); }
footer.cl-footer { padding-bottom: max(40px, calc(env(safe-area-inset-bottom) + 24px)); }

@media (min-width: 992px) and (max-width: 1199px) {
    .navbar-default.cl-nav .navbar-nav > li > a { padding: 9px 11px; font-size: 14px; }
}

/* tablet & ponsel: menu hamburger sampai 991px */
@media (max-width: 991px) {
    .cl-dark-grid, .cl-contact-card { gap: 36px; }
}
@media (min-width: 600px) and (max-width: 991px) {
    .cl-hero-title { font-size: clamp(3rem, 7.4vw, 4rem); }
    .cl-hero-sub { max-width: 520px; margin-left: auto; margin-right: auto; font-size: 16px; }
    .cl-hero #shorten { max-width: 580px; }
    .cl-feature-grid > .cl-feature:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 520px) and (max-width: 767px) {
    .cl-steps-list, .cl-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cl-feature-grid > .cl-feature:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .cl-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .cl-stat { padding: 20px 8px; }
    .cl-stat-num { font-size: 1.7rem; }
    .cl-hero-sub { max-width: 560px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 767px) {
    .cl-contact-form .form-control { font-size: 16px; }
    .cl-snow-toggle { width: 40px; height: 40px; font-size: 18px; }
}

/* ponsel kecil */
@media (max-width: 380px) {
    .container { padding-left: 14px; padding-right: 14px; }
    .navbar-default.cl-nav > .container { width: calc(100% - 20px); padding: 8px 8px 8px 12px; }
    .navbar-default.cl-nav .navbar-brand { font-size: 19px; letter-spacing: .05em; }
    .cl-nav .navbar-brand:not(.logo-image)::before { width: 36px; height: 36px; margin-right: 8px; }
    .navbar-default.cl-nav .navbar-toggle { width: 44px; height: 44px; border-width: 2px; }
    .cl-hero-title { font-size: 2.3rem; }
    .cl-badge { padding: 9px 16px 9px 12px; font-size: 13px; }
    .cl-hero-sub { font-size: 15.5px; }
    .cl-hero #shorten .form-group { padding: 7px 7px 7px 14px; }
    .cl-hero #shorten .form-group input.form-control.input-lg { height: 48px; font-size: 15px; }
    .cl-hero #shorten button.btn-captcha { height: 48px; padding: 0 18px; font-size: 15px; }
    .cl-h2 { font-size: 1.75rem; }
    .cl-step, .cl-feature { padding-left: 18px; padding-right: 18px; }
    .cl-check-hero { padding: 14px; }
    .cl-check-hero strong { font-size: 1.5rem; }
    .cl-bars span { width: 10px; }
    .cl-footer-card { padding: 24px 18px; }
}

/* layar pendek (landscape) */
@media (max-height: 520px) and (orientation: landscape) {
    header.cl-hero { padding: 104px 0 90px; }
    section.cl-dark, section.cl-stats { padding-top: 100px; padding-bottom: 110px; }
}

/* layar sentuh */
@media (pointer: coarse) {
    .cl-ts-btn { width: 44px; height: 44px; }
    .nav-tabs > li > a, .nav-pills > li > a { min-height: 44px; }
    .cl-footer .bottom-menu a { padding-top: 6px; padding-bottom: 6px; }
    .btn, .form-control { min-height: 44px; }
    .cl-ts-dots i { position: relative; }
    .cl-ts-dots i::after { content: ""; position: absolute; inset: -12px -6px; }
}
@media (hover: none) {
    .cl-minis li:hover, .cl-pills li:hover, .cl-info:hover, .cl-check-tiles > div:hover, .cl-contact-side li:hover { transform: none; }
}

/* 23. Tombol menu di pojok kanan pill (mobile) ----------------------------- */
@media (max-width: 767px) {
    .navbar-default.cl-nav .navbar-header { display: flex; align-items: center; justify-content: space-between; flex: 1 1 100%; width: 100%; float: none; }
    .navbar-default.cl-nav .navbar-header::before, .navbar-default.cl-nav .navbar-header::after { display: none; }
    .navbar-default.cl-nav .navbar-brand { order: 1; margin-right: auto !important; }
    .navbar-default.cl-nav .navbar-toggle { order: 2; float: none; margin: 0 0 0 auto; flex: 0 0 auto; }
}

/* 19. Kurangi gerakan ----------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0ms !important; }
    .js .reveal:not(.in) { opacity: 1; }
    .js .cl-hero-title:not(.in) .l1, .js .cl-hero-title:not(.in) .l2 { opacity: 1; }
    .cl-grad svg { stroke-dashoffset: 0; }
    .cl-bars span { transform: none; }
    .cl-step::after { transform: scaleX(1); }
    .countdown-ring .ring-fg { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cl-sparks, .cl-progress, .cl-wave::before { display: none; }
    .cl-hero-title .w > span { transform: none; }
    .cl-check-tiles > div::after { transform: scale(1); }
    body { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cl-snow, .cl-snow-toggle { display: none; }
}