html { scroll-behavior: smooth; }

        #logo { width: auto; }
        #logo a img.sora-logo {
            display: block;
            height: 42px;
            width: auto;
            object-fit: contain;
        }
        #logo a img.sora-logo:hover { opacity: .9; }
        header.smaller #logo a img.sora-logo { height: 36px; }

        .sora-footer-logo-chip {
            display: inline-block;
            background: #ffffff;
            border-radius: 14px;
            padding: 10px 22px;
            line-height: 0;
        }
        .sora-footer-logo-chip img.sora-footer-logo { height: 46px; width: auto; }

        .sora-hero-h1 {
            color: #ffffff;
            font-size: clamp(38px, 5vw, 66px);
            line-height: 1.15;
            text-shadow: 0 2px 14px rgba(18, 8, 46, .6), 0 0 46px rgba(18, 8, 46, .35);
        }
        .sora-hero-h1 .accent { color: #FD6F2D; }
        .text-light .lead-hero {
            max-width: 640px;
            width: fit-content;
            color: #ffffff;
            font-size: 18.5px;
            font-weight: 500;
            line-height: 1.55;
            background: rgba(10, 10, 22, .42);
            border: solid 1px rgba(255, 255, 255, .18);
            border-radius: 14px;
            padding: 12px 20px;
            -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
            text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
        }
        @media only screen and (max-width: 575px) {
            .text-light .lead-hero { font-size: 16.5px; padding: 10px 16px; }
        }
        .sora-hero-features h6 {
            font-size: 13.5px;
            font-weight: 500;
            letter-spacing: .5px;
            color: rgba(255, 255, 255, .92);
            text-shadow: 0 1px 8px rgba(18, 8, 46, .55);
            white-space: normal;
        }
        .sora-hero-features h6 i { color: #FD6F2D; margin-right: 6px; }

        @media only screen and (max-width: 991px) {
            #section-home .sm-hide { display: none !important; }
        }

        .sora-ico {
            width: 54px; height: 54px; min-width: 54px;
            display: inline-flex; align-items: center; justify-content: center;
            background: var(--primary-color); color: #ffffff;
            font-size: 26px; line-height: 1; border-radius: 14px;
        }
        .sora-ico.alt { background: var(--secondary-color); }

        .sora-card { background: #ffffff; transition: transform .3s ease, box-shadow .3s ease; }
        .sora-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(var(--primary-color-rgb), .16); }
        .sora-card-img { height: 300px; object-fit: cover; width: 100%; }
        .sora-card-img.tall { height: auto; object-fit: initial; }

        .sora-usp { background: #ffffff; border-radius: var(--rounded-1); height: 100%; }

        .sora-chip {
            display: inline-flex; align-items: center; gap: 10px;
            background: #ffffff; border: solid 1px rgba(var(--primary-color-rgb), .15);
            border-radius: 60px; padding: 8px 18px 8px 12px;
            font-size: 14.5px; color: var(--body-font-color); transition: all .3s ease;
        }
        .sora-chip i { color: var(--primary-color); font-size: 18px; }
        .sora-chip:hover { border-color: var(--secondary-color); color: var(--secondary-color); }
        .sora-chip:hover i { color: var(--secondary-color); }

        .sora-map { width: 100%; height: 520px; border: 0; display: block; filter: saturate(.92); }

        .sora-field label { font-size: 13px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--body-font-color); opacity: .75; }
        .sora-input { position: relative; }
        .sora-input .pre {
            position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
            font-size: 15px; font-weight: 600; color: var(--primary-color); pointer-events: none;
        }
        .sora-input .post {
            position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
            font-size: 15px; font-weight: 600; color: var(--primary-color); pointer-events: none;
        }
        .sora-input input { padding-left: 46px; }
        .sora-input input.no-pre { padding-left: 20px; }
        .sora-input input.has-post { padding-right: 44px; }
        input[type="range"] { accent-color: var(--primary-color); width: 100%; }

        .sora-radio { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; cursor: pointer; font-size: 15.5px; }
        .sora-radio input { accent-color: var(--primary-color); width: 17px; height: 17px; margin: 0; }

        .sora-result { background: #ffffff; border-radius: var(--rounded-1); }
        .sora-result .big { font-size: 30px; font-weight: 700; color: var(--primary-color); line-height: 1.25; }
        .sora-result .lbl { font-size: 12.5px; text-transform: uppercase; letter-spacing: 1.6px; opacity: .62; }
        .sora-metric { background: rgba(var(--primary-color-rgb), .06); border-radius: var(--rounded-1); height: 100%; }
        .sora-metric .val { font-size: 21px; font-weight: 700; color: var(--secondary-color); }

        .sora-result .big,
        .sora-metric .val {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            column-gap: 5px;
            row-gap: 0;
        }
        .sora-result .big { white-space: normal; overflow-wrap: anywhere; }
        .sora-result .big .v-tail,
        .sora-metric .val .v-tail {
            font-size: .48em;
            font-weight: 500;
            opacity: .6;
            white-space: normal;
            overflow-wrap: anywhere;
        }
        .sora-metric .val { min-width: 0; }
        .sora-metric .val .v-tail { color: var(--primary-color); }
        .v-tail-inline { white-space: normal; }

        @media only screen and (max-width: 575px) {
            .sora-result .big { font-size: 23px; }
            .sora-metric .val { font-size: 18px; }
            .sora-result .lbl { letter-spacing: .6px; }
        }
        @media only screen and (max-width: 360px) {
            .sora-result .big { font-size: 20px; }
            .sora-metric .val { font-size: 16px; }
        }

        .sora-wa-panel {
            background: linear-gradient(140deg, #1A299F 0%, #0A1040 100%);
            border-radius: var(--rounded-1);
        }
        .sora-wa-panel .ico-circle {
            width: 84px; height: 84px; display: flex; align-items: center; justify-content: center;
            background: rgba(255, 255, 255, .12); border: solid 1px rgba(255, 255, 255, .25);
            border-radius: 50%; font-size: 40px; color: #ffffff;
        }

        a.btn-acc.btn-main,
        .btn-acc.btn-main { background: var(--secondary-color); color: #fff; }

        a.btn-main:hover,
        .btn-main:hover {
            background: var(--secondary-color) !important;
            color: #fff !important;
        }
        a.btn-acc.btn-main:hover,
        a.btn-acc.btn-main:active {
            background: var(--primary-color) !important;
            color: #fff !important;
        }
        header a.btn-acc.btn-main:hover,
        header a.btn-acc.btn-main:active {
            background: var(--secondary-color) !important;
            color: #fff !important;
        }

        #section-home .swiper { background: #ffffff; }
        #section-home .sw-overlay {
            opacity: .55;
            background: linear-gradient(180deg, rgba(15, 15, 25, .18) 0%, rgba(15, 15, 25, .4) 55%, rgba(15, 15, 25, .6) 100%);
        }
        #section-home .gradient-edge-bottom { pointer-events: none; }
        header.transparent { background: none; }
        header.header-float .header-inner { background: #ffffff; }
        #sora-form-success { background: var(--primary-color); }

        .sora-card { overflow: visible; }
        .sora-imgwrap { border-radius: var(--rounded-1) var(--rounded-1) 0 0; }
        .sora-card .mt-auto { flex-shrink: 0; }

        #wrapper .d-flex { white-space: normal; }
        header .btn-main,
        #mainmenu a.menu-item { white-space: nowrap; }

        .sora-band-item { background: rgba(255, 255, 255, .12); border-radius: var(--rounded-1); height: 100%; }
        .sora-band-item a { color: rgba(255, 255, 255, .85); }
        .sora-band-item a:hover { color: #ffffff; }
        .sora-band-item span { white-space: normal; }

        .sora-wa-panel p { width: 100%; max-width: 460px; white-space: normal; overflow-wrap: break-word; }

        footer.sora-footer { background: #0B1138; }
        footer.sora-footer .sora-foot-title { font-size: 13px; text-transform: uppercase; letter-spacing: 2px; opacity: .55; }
        footer.sora-footer ul { list-style: none; margin: 0; padding: 0; }
        footer.sora-footer ul li { margin-bottom: 10px; }
        footer.sora-footer ul li a { color: rgba(255, 255, 255, .75); text-decoration: none; transition: all .3s ease; }
        footer.sora-footer ul li a:hover { color: #FD6F2D; padding-left: 4px; }
        footer.sora-footer .subfooter { background: rgba(0, 0, 0, .25); }

        @media only screen and (max-width: 992px) {
            .sora-map { height: 380px; }
            #logo a img.sora-logo { height: 34px; }
        }

        a.btn-main:hover,
        .btn-main:hover,
        a.btn-main:active,
        .btn-main:active {
            background: #FD6F2D !important;
            color: #fff !important;
        }
        a.btn-acc.btn-main:hover,
        a.btn-acc.btn-main:active {
            background: #1A299F !important;
            color: #fff !important;
        }
        header a.btn-acc.btn-main:hover,
        header a.btn-acc.btn-main:active {
            background: #FD6F2D !important;
            color: #fff !important;
        }

        .sora-video-section {
            background: linear-gradient(165deg, #101A6B 0%, #0A1040 100%);
            padding-bottom: 90px;
        }
        .sora-video-box {
            position: relative;
            aspect-ratio: 16 / 9;
            background: #000000;
            border-radius: var(--rounded-1);
            overflow: hidden;
            box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
            border: solid 1px rgba(255, 255, 255, .12);
        }
        .sora-video-box video {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .sora-video-label {
            font-size: 13px;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .55);
            margin-top: 10px;
        }

        .sora-page-head {
            background: linear-gradient(160deg, #1A299F 0%, #0A1040 100%);
            padding: 170px 0 70px 0;
            color: #ffffff;
        }
        .sora-page-head .crumb a { color: rgba(255, 255, 255, .6); text-decoration: none; }
        .sora-page-head .crumb a:hover { color: #FD6F2D; }
        .sora-unit-toggle .btn-main { margin: 0 4px 8px 0; }
        .sora-unit-toggle .btn-main.active { background: #FD6F2D !important; }
        .sora-fac {
            background: #ffffff;
            border-radius: var(--rounded-1);
            height: 100%;
        }
        .sora-gal-img {
            width: 100%;
            height: 240px;
            object-fit: cover;
        }

        #section-calculator h2 { color: #ffffff; }
        #section-calculator .subtitle { color: rgba(255, 255, 255, .85); }
        .sora-calc-panel {
            background: rgba(255, 255, 255, .06);
            border: solid 1px rgba(255, 255, 255, .14);
            border-radius: var(--rounded-1);
        }
        #section-calculator .sora-field label { color: rgba(255, 255, 255, .72); }
        #section-calculator .form-control {
            background: rgba(255, 255, 255, .08);
            border: solid 1px rgba(255, 255, 255, .28);
            color: #ffffff;
        }
        #section-calculator .form-control:focus {
            background: rgba(255, 255, 255, .12);
            color: #ffffff;
            border-color: #FD6F2D;
        }
        #section-calculator .form-control::placeholder { color: rgba(255, 255, 255, .45); }
        #section-calculator .sora-input .pre,
        #section-calculator .sora-input .post { color: #FD6F2D; }
        #section-calculator input[type="range"] { accent-color: #FD6F2D; }

        .sora-share { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        .sora-share-opt {
            position: relative; display: block; margin: 0; cursor: pointer;
            padding: 11px 14px 11px 40px;
            border: solid 1px rgba(255, 255, 255, .28);
            background: rgba(255, 255, 255, .08);
            border-radius: var(--rounded-1);
            transition: all .3s ease;
        }
        #section-calculator .sora-field .sora-share-opt {
            font-size: 15px; text-transform: none; letter-spacing: 0; opacity: 1;
        }
        .sora-share-opt input {
            position: absolute; left: 14px; top: 14px; margin: 0;
            width: 16px; height: 16px; accent-color: #FD6F2D;
        }
        .sora-share-opt .share-main { display: block; font-size: 15px; font-weight: 600; color: #ffffff; line-height: 1.35; }
        .sora-share-opt .share-note { display: block; font-size: 12px; color: rgba(255, 255, 255, .6); }
        .sora-share-opt:hover { border-color: rgba(253, 111, 45, .7); }
        .sora-share-opt:has(input:checked) {
            border-color: #FD6F2D;
            background: rgba(253, 111, 45, .16);
        }
        .sora-share-opt:has(input:focus-visible) { outline: solid 2px rgba(253, 111, 45, .6); outline-offset: 2px; }

        /* ---- SORA Owner App ---- */
        .sora-app-section { background: #ffffff; position: relative; overflow: hidden; }
        .sora-app-section::before {
            content: ""; position: absolute; left: 50%; top: -200px; transform: translateX(-50%);
            width: 900px; height: 460px; pointer-events: none;
            background: radial-gradient(ellipse at center, rgba(var(--primary-color-rgb), .12) 0%, rgba(var(--primary-color-rgb), 0) 70%);
        }
        .sora-app-section .container { position: relative; z-index: 2; }
        .sora-lead {
            max-width: 730px; margin: 0 auto;
            font-size: 17px; line-height: 1.65; color: var(--body-font-color); opacity: .85;
        }

        .sora-app-panel {
            position: relative; overflow: hidden; color: #ffffff;
            background: linear-gradient(150deg, #16226F 0%, #0A1040 100%);
        }
        .sora-app-panel::after {
            content: ""; position: absolute; right: -150px; top: -150px; width: 430px; height: 430px;
            pointer-events: none;
            background: radial-gradient(circle, rgba(253, 111, 45, .34) 0%, rgba(253, 111, 45, 0) 70%);
        }

        .sora-app-feat { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; position: relative; z-index: 2; }
        .sora-app-feat .ico {
            flex: 0 0 auto; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
            border-radius: 12px; font-size: 21px; color: #FD6F2D;
            background: rgba(255, 255, 255, .1); border: solid 1px rgba(255, 255, 255, .2);
        }
        .sora-app-feat .ttl { font-size: 16px; font-weight: 600; color: #ffffff; margin-bottom: 3px; }
        .sora-app-feat .desc { font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .72); }

        .sora-app-cta { position: relative; z-index: 2; }
        .sora-app-note { color: rgba(255, 255, 255, .6); }

        /* .btn-line ter-default sebagai teks gelap di atas background transparan,
           sehingga hilang di atas panel navy. Paksa jadi ghost putih. */
        #section-app .sora-app-cta .btn-main.btn-line {
            background: rgba(255, 255, 255, .12);
            border: solid 1px rgba(255, 255, 255, .55);
            color: #ffffff;
        }
        #section-app .sora-app-cta .btn-main.btn-line:hover {
            background: var(--btn-hover-bg);
            border-color: var(--btn-hover-bg);
            color: #ffffff;
        }

        .sora-app-shot { position: relative; z-index: 2; display: grid; gap: 26px; }
        .sora-app-item { margin: 0; }
        .sora-app-frame {
            border-radius: 12px; overflow: hidden; background: #ffffff;
            border: solid 1px rgba(255, 255, 255, .18);
            box-shadow: 0 26px 60px rgba(0, 0, 0, .42);
            transition: transform .35s ease, box-shadow .35s ease;
        }
        .sora-app-frame:hover { transform: translateY(-5px); box-shadow: 0 34px 72px rgba(0, 0, 0, .5); }
        .sora-app-bar {
            display: flex; align-items: center; gap: 6px; padding: 9px 14px;
            background: #EEF1F8; border-bottom: solid 1px #DDE3EF;
        }
        .sora-app-bar span { width: 9px; height: 9px; border-radius: 50%; background: #C6CEDE; }
        .sora-app-bar em {
            margin-left: 10px; font-style: normal; font-size: 11.5px; color: #6C7689;
            letter-spacing: .2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .sora-app-frame img { display: block; width: 100%; height: auto; }
        .sora-app-item figcaption {
            margin-top: 10px; font-size: 12.5px; text-transform: uppercase;
            letter-spacing: 1.4px; color: rgba(255, 255, 255, .62);
        }
        .sora-app-item figcaption i { color: #FD6F2D; font-size: 10px; margin-right: 7px; vertical-align: middle; }

        @media only screen and (max-width: 991px) {
            .sora-app-shot { margin-top: 10px; }
            .sora-lead { font-size: 16px; }
        }