/* ITERA Geotechnical and Seismic Suite — gaya korporat perangkat lunak rekayasa. Satu warna aksen (merah SITERA), banyak ruang putih, seksi bergantian. Palet gelap mengikuti sitera/theme.py dan geotera/theme.py. */ /* ---------------------------------------------------------------- token -- */ :root { --red: #C62828; --red-d: #9E1B1B; --ink: #171C21; --ink-2: #23272B; --body: #3C444C; --mute: #6B747D; --line: #DEE3E7; --line-2: #EDF0F2; --bg: #FFFFFF; --bg-alt: #F4F6F8; --card: #FFFFFF; --card-alt: #F9FAFB; --ok: #2E7D4F; --warn: #B26A00; --shadow-sm: 0 1px 2px rgba(23, 28, 33, .06), 0 1px 3px rgba(23, 28, 33, .04); --shadow: 0 2px 6px rgba(23, 28, 33, .07), 0 8px 24px rgba(23, 28, 33, .06); --shadow-lg: 0 4px 12px rgba(23, 28, 33, .08), 0 24px 56px rgba(23, 28, 33, .11); --wrap: 1180px; --pad: clamp(1.25rem, 4vw, 2.5rem); --r: 4px; --sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --mono: "Cascadia Mono", ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace; } /* Tema gelap ada dalam TIGA keadaan, bukan dua. 1. Pembaca memakai setelan sistem -> tak ada penanda apa pun di , hanya `prefers-color-scheme` yang membedakan. Ini keadaan yang paling umum, dan yang paling sering terlewat saat diuji. 2. Pembaca memilih gelap eksplisit -> `data-theme="dark"`. 3. Pembaca memilih terang eksplisit di atas sistem gelap -> `data-theme="light"`, yang HARUS mengalahkan media query; itulah guna `:not()` di bawah. Di GitHub Pages penanda itu tak pernah ada, jadi aturan ini menganggur dengan aman; di penampung yang memasangnya (mis. pratinjau Artifact), pilihan pembaca dihormati. Kedua blok di bawah WAJIB berisi token yang sama persis — bila salah satu diubah sendirian, satu golongan pembaca mendapat teks tema ini di atas latar tema itu, dan tak ada yang menyadarinya kecuali ia kebetulan memakai setelan yang salah. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink: #EEF3F8; --ink-2: #DBE2E9; --body: #BAC4CE; --mute: #8B96A1; --line: #333B43; --line-2: #2A3138; --bg: #1A1F24; --bg-alt: #22282E; --card: #22282E; --card-alt: #262D34; --red: #E53935; --red-d: #C62828; --ok: #5BB07E; --warn: #D79A3C; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow: 0 2px 8px rgba(0, 0, 0, .45); --shadow-lg: 0 8px 40px rgba(0, 0, 0, .55); } } :root[data-theme="dark"] { --ink: #EEF3F8; --ink-2: #DBE2E9; --body: #BAC4CE; --mute: #8B96A1; --line: #333B43; --line-2: #2A3138; --bg: #1A1F24; --bg-alt: #22282E; --card: #22282E; --card-alt: #262D34; --red: #E53935; --red-d: #C62828; --ok: #5BB07E; --warn: #D79A3C; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow: 0 2px 8px rgba(0, 0, 0, .45); --shadow-lg: 0 8px 40px rgba(0, 0, 0, .55); } /* ------------------------------------------------------------- dasar ----- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--body); font-family: var(--sans); font-size: 16.5px; line-height: 1.65; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { color: var(--ink); font-weight: 600; line-height: 1.18; letter-spacing: -.021em; margin: 0 0 .6em; text-wrap: balance; } h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); letter-spacing: -.03em; } h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); } h3 { font-size: clamp(1.1rem, 2vw, 1.3rem); } h4 { font-size: 1rem; } p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } a { color: var(--red); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; height: auto; display: block; } code, kbd, samp { font-family: var(--mono); font-size: .875em; } hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; } :focus-visible { outline: 2px solid var(--red); outline-offset: 2px; } .skip { position: absolute; left: -9999px; background: var(--red); color: #fff; padding: .6rem 1rem; z-index: 200; } .skip:focus { left: .5rem; top: .5rem; } /* ------------------------------------------------------------ tata letak - */ .wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); } .wrap-narrow { max-width: 760px; margin-inline: auto; padding-inline: var(--pad); } section { padding-block: clamp(3.5rem, 8vw, 6rem); } section.alt { background: var(--bg-alt); } section.tight { padding-block: clamp(2.5rem, 5vw, 3.5rem); } .eyebrow { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--red); margin: 0 0 .9rem; } .eyebrow.neutral { color: var(--mute); } .lead { font-size: clamp(1.05rem, 1.8vw, 1.2rem); color: var(--body); max-width: 62ch; } .section-head { max-width: 66ch; margin-bottom: clamp(2rem, 4vw, 3rem); } /* ---------------------------------------------------------------- kepala - */ .site-head { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: saturate(1.6) blur(10px); border-bottom: 1px solid var(--line); } .site-head .wrap { display: flex; align-items: center; gap: 1.5rem; min-height: 68px; } .brand { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; } .brand picture { display: flex; flex-shrink: 0; } /* Tinggi yang dikunci, lebar mengikuti: varian terang dan gelap dipangkas ke isinya masing-masing sehingga rasionya tidak persis sama. Mengunci keduanya membuat salah satu tergepeng. */ .brand img { height: 26px; width: auto; } .brand b { color: var(--ink); font-weight: 650; font-size: 1.02rem; letter-spacing: -.01em; } .brand span { color: var(--mute); font-weight: 400; } .brand:hover { text-decoration: none; } .site-nav { display: flex; gap: 1.6rem; margin-left: auto; align-items: center; } .site-nav a { color: var(--body); font-size: .93rem; font-weight: 500; padding-block: .4rem; border-bottom: 2px solid transparent; } .site-nav a:hover { color: var(--ink); text-decoration: none; } .site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--red); } .head-tools { display: flex; align-items: center; gap: .75rem; } .lang { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--bg); } .lang button { font: inherit; font-size: .78rem; font-weight: 600; letter-spacing: .04em; padding: .3rem .55rem; border: 0; background: transparent; color: var(--mute); cursor: pointer; } .lang button:hover { color: var(--ink); } .lang button[aria-pressed="true"] { background: var(--red); color: #fff; } .nav-toggle { display: none; font: inherit; background: transparent; cursor: pointer; border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); padding: .35rem .6rem; font-size: 1rem; } @media (max-width: 900px) { .nav-toggle { display: block; order: 3; } .head-tools { margin-left: auto; } .site-nav { order: 4; width: 100%; margin-left: 0; flex-direction: column; align-items: stretch; gap: 0; border-top: 1px solid var(--line); padding-block: .5rem; } .site-nav[hidden] { display: none; } .site-nav a { padding: .6rem 0; border-bottom: 1px solid var(--line-2); } .site-head .wrap { flex-wrap: wrap; padding-block: .5rem; } } /* --------------------------------------------------------------- tombol -- */ .btn { display: inline-flex; align-items: center; gap: .5rem; font-size: .94rem; font-weight: 600; line-height: 1; padding: .8rem 1.35rem; border-radius: var(--r); border: 1px solid transparent; cursor: pointer; transition: background .15s, border-color .15s, color .15s; } .btn:hover { text-decoration: none; } .btn-primary { background: var(--red); color: #fff; } .btn-primary:hover { background: var(--red-d); color: #fff; } .btn-ghost { border-color: var(--line); color: var(--ink); background: var(--bg); } .btn-ghost:hover { border-color: var(--ink); } .btn-quiet { color: var(--red); padding-inline: 0; } .btn-quiet::after { content: " →"; } .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; } .btn-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; } /* ----------------------------------------------------------------- hero -- */ .hero { padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem); } .hero .lead { margin-top: 1.2rem; } .hero .btn-row { margin-top: 2rem; } .hero-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; } @media (max-width: 900px) { .hero-split { grid-template-columns: 1fr; } } .shot { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--card); box-shadow: var(--shadow-lg); } .shot img { width: 100%; } .shot figcaption { padding: .7rem 1rem; font-size: .8rem; color: var(--mute); border-top: 1px solid var(--line-2); background: var(--card-alt); } /* --------------------------------------------------------- kartu produk -- */ .grid { display: grid; gap: clamp(1rem, 2.2vw, 1.6rem); } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .pcard { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; transition: box-shadow .2s, transform .2s, border-color .2s; } .pcard:hover { box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--red) 35%, var(--line)); } .pcard > img { width: 100%; border-bottom: 1px solid var(--line-2); } .pcard-body { padding: 1.6rem 1.6rem 1.75rem; display: flex; flex-direction: column; flex: 1; } /* `align-self` WAJIB di sini. `.pcard-body` adalah flex kolom, sehingga sumbu silangnya mendatar dan `align-items: stretch` bawaan meregangkan logo ke seluruh lebar kartu — `width: auto` tidak menahannya, dan dengan tinggi terkunci hasilnya logo gepeng melebar. Gejalanya mudah disangka berkas logonya yang rusak, padahal berkasnya benar. */ .pcard-logo { display: block; align-self: flex-start; margin: 0 0 1.2rem; } .pcard-logo picture { display: block; } .pcard-logo, .pcard-logo img { height: 52px; width: auto; } /* Logo bertumpuk (marka di atas, nama di bawah) memakai tingginya untuk DUA baris, jadi pada tinggi yang sama ia tampak separuh sebesar wordmark satu baris di sebelahnya. Tinggi disamakan secara OPTIS, bukan secara angka. */ .pcard-logo-tall, .pcard-logo-tall img { height: 72px; } .pcard h3 { margin-bottom: .15rem; } .pcard .tag { font-size: .78rem; color: var(--mute); margin: 0 0 1rem; letter-spacing: .02em; } .pcard p { font-size: .95rem; } .pcard .btn-row { margin-top: auto; padding-top: 1.4rem; } /* --------------------------------------------------------------- fitur --- */ .feat { padding: 1.5rem 0 0; border-top: 2px solid var(--ink); } .feat h3 { font-size: 1.02rem; margin-bottom: .45rem; } .feat p { font-size: .92rem; color: var(--body); } .feat ul { margin: .6rem 0 0; padding-left: 1.1rem; font-size: .9rem; } .feat li { margin-bottom: .3rem; } /* Tepat dua kolom. `.grid-2` memakai auto-fit minmax(320px), sehingga di lebar 1180px ia muat TIGA kolom — empat kartu jadi 3 + 1 kartu yatim. */ .grid-2x2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 720px) { .grid-2x2 { grid-template-columns: 1fr; } } /* ------------------------------------------------------------ tujuan ----- */ /* Pernyataan tujuan ITERA di bawah kartu fitur. Garis atas merah (bukan hitam seperti .feat) menandainya sebagai alasan suite ini ada, bukan fitur kelima; judul di kiri, isi di kanan agar teksnya tidak terbentang selebar halaman. */ .mission { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(1rem, 3vw, 2.5rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.75rem; border-top: 2px solid var(--red); } .mission h3 { font-size: clamp(1.25rem, 2.2vw, 1.55rem); margin: 0; } .mission p { font-size: 1.02rem; max-width: 68ch; margin: 0; } /* Label di atas judul adalah

, jadi `.mission p` (0,1,1) mengalahkan `.eyebrow` (0,1,0) dan membesarkannya setara teks isi. Selektor dua kelas (0,2,0) mengembalikan ukuran label — dan WAJIB berada setelah aturan `.mission p` di atas agar tidak bergantung pada urutan saja. */ .mission .eyebrow { font-size: .74rem; margin: 0 0 .5rem; } @media (max-width: 780px) { .mission { grid-template-columns: 1fr; } } /* ---------------------------------------------------------- alur kerja -- */ /* Penomoran dipakai karena isinya MEMANG berurutan: keluaran langkah satu adalah masukan langkah berikutnya. Bila urutannya tidak membawa makna, nomor hanya hiasan. */ /* Jumlah kolom ditetapkan per lebar, BUKAN auto-fit. Jarak kiri dan garis pemisah hanya benar bila langkah-langkah itu SEBARIS; dengan auto-fit, jumlah kolom tak terduga (1, 2, 3, atau 4 tergantung lebar), sehingga langkah yang turun ke baris baru tetap menjorok dan terlihat salah susun — itulah yang dulu terjadi di ponsel. */ .flow { display: grid; grid-template-columns: 1fr; gap: 0; } .flow-step { padding: 1.75rem 1.6rem 1.75rem 0; border-top: 2px solid var(--ink); position: relative; } @media (min-width: 600px) { .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .flow { grid-template-columns: repeat(4, minmax(0, 1fr)); } .flow-step + .flow-step { padding-left: 1.6rem; } .flow-step + .flow-step::before { content: ""; position: absolute; left: 0; top: 1.75rem; bottom: 1.75rem; border-left: 1px solid var(--line); } } .flow-num { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .12em; color: var(--red); margin-bottom: .7rem; font-variant-numeric: tabular-nums; } .flow-step h3 { font-size: 1.02rem; margin-bottom: .4rem; } .flow-step p { font-size: .92rem; } .flow-step .who { display: block; margin-top: .7rem; font-size: .8rem; color: var(--mute); } /* ------------------------------------------------------------- standar -- */ .codes { display: flex; flex-wrap: wrap; gap: .5rem; } .code-chip { border: 1px solid var(--line); border-radius: var(--r); padding: .5rem .85rem; font-size: .85rem; color: var(--ink); background: var(--card); white-space: nowrap; } .code-chip b { font-weight: 650; } .code-chip span { color: var(--mute); font-weight: 400; } /* --------------------------------------------------------------- angka --- */ /* Empat kotak angka: 2×2, lalu 4 sebaris di layar lebar. BUKAN auto-fit — auto-fit minmax(190px) menghasilkan 3 kolom di lebar tablet, dan kotak keempat turun sendirian di samping sel kosong. Latar sel kosong itu adalah warna `gap`, jadi ia tampil sebagai balok abu/gelap yang tampak rusak. Bila jumlah kotak berubah, sesuaikan jumlah kolom di sini. */ .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; } @media (min-width: 1000px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .stat { background: var(--card); padding: 1.5rem 1.4rem; } .stat b { display: block; color: var(--ink); font-size: clamp(1.5rem, 3vw, 1.95rem); font-weight: 650; letter-spacing: -.02em; line-height: 1.1; } .stat span { display: block; font-size: .855rem; color: var(--mute); margin-top: .45rem; } .stat cite { display: block; font-size: .74rem; color: var(--mute); font-style: normal; margin-top: .5rem; opacity: .85; } /* -------------------------------------------------------------- galeri --- */ .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.4rem; } .gallery figure { margin: 0; } .gallery img { width: 100%; border: 1px solid var(--line); border-radius: 5px; background: var(--card); box-shadow: var(--shadow-sm); } .gallery figcaption { font-size: .84rem; color: var(--mute); margin-top: .6rem; } /* --------------------------------------------------------------- tabel --- */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } table { width: 100%; border-collapse: collapse; font-size: .91rem; background: var(--card); } th, td { text-align: left; padding: .78rem 1rem; border-bottom: 1px solid var(--line-2); vertical-align: top; } thead th { color: var(--ink); font-weight: 650; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; border-bottom: 2px solid var(--ink); white-space: nowrap; } tbody tr:last-child td { border-bottom: 0; } td code { color: var(--ink); background: var(--bg-alt); padding: .1rem .35rem; border-radius: 3px; } .num { font-variant-numeric: tabular-nums; white-space: nowrap; } /* --------------------------------------------------------------- badge --- */ .badge { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: .2rem .5rem; border-radius: 3px; border: 1px solid currentColor; line-height: 1.5; } .badge-ok { color: var(--ok); } .badge-todo { color: var(--warn); } .badge-red { color: var(--red); } .badge-mute { color: var(--mute); } /* --------------------------------------------------------------- catatan - */ .note { border-left: 3px solid var(--red); background: var(--bg-alt); padding: 1.15rem 1.35rem; border-radius: 0 var(--r) var(--r) 0; font-size: .92rem; } .note.warn { border-left-color: var(--warn); } .note.mute { border-left-color: var(--mute); } .note strong { color: var(--ink); } .note + .note { margin-top: 1rem; } .hash { font-family: var(--mono); font-size: .74rem; color: var(--mute); word-break: break-all; line-height: 1.5; } /* ---------------------------------------------------------------- daftar - */ .dl { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.5rem; font-size: .92rem; } .dl dt { color: var(--mute); } .dl dd { margin: 0; color: var(--ink); } .linklist { list-style: none; margin: 0; padding: 0; } .linklist li { border-bottom: 1px solid var(--line-2); } .linklist a { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .95rem 0; color: var(--ink); font-weight: 500; } .linklist a:hover { color: var(--red); text-decoration: none; } .linklist small { color: var(--mute); font-weight: 400; white-space: nowrap; } /* ------------------------------------------------------------------ cta -- */ .cta { background: var(--ink); color: #C9D2DA; padding-block: clamp(3rem, 6vw, 4.5rem); } .cta h2 { color: #fff; } .cta p { color: #AAB5BF; } .cta .btn-ghost { border-color: #4A545E; color: #fff; background: transparent; } .cta .btn-ghost:hover { border-color: #fff; } /* ----------------------------------------------------------------- kaki -- */ .site-foot { background: var(--bg-alt); border-top: 1px solid var(--line); padding-block: 3rem 2rem; font-size: .88rem; } .foot-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 2rem; } @media (max-width: 780px) { .foot-grid { grid-template-columns: 1fr 1fr; } } .site-foot h4 { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin-bottom: .9rem; font-weight: 700; } .site-foot ul { list-style: none; margin: 0; padding: 0; } .site-foot li { margin-bottom: .45rem; } .site-foot a { color: var(--body); } .site-foot a:hover { color: var(--red); } .foot-bottom { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--mute); font-size: .82rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; } /* ------------------------------------------------------------ dwibahasa -- */ /* Bawaan: Inggris. JS mengganti data-lang pada . Tanpa JS pun halaman tetap terbaca penuh dalam bahasa Inggris. `!important` di sini bukan kemalasan, melainkan syarat kebenaran. Selektor atribut `[lang="en"]` bernilai kekhususan (0,1,0), sehingga aturan tata letak biasa seperti `.stat span { display: block }` (0,1,1) MENGALAHKANNYA dan kedua bahasa tampil berdampingan. Kegagalan itu tak terlihat di sebagian besar halaman — hanya di tempat yang kebetulan menyetel display pada elemen bahasa — jadi ia lolos sampai seseorang membuka halaman penuh. Saklar bahasa harus menang atas setiap aturan tata letak, tanpa kecuali. */ html:not([data-lang="id"]) [lang="id"] { display: none !important; } html[data-lang="id"] [lang="en"] { display: none !important; } /* ------------------------------------------------------------------ misc - */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition-duration: .01ms !important; animation-duration: .01ms !important; } } @media print { .site-head, .site-foot, .cta, .lang, .nav-toggle { display: none; } body { font-size: 11pt; } } /* =========================================================== dek bergambar == Seksi gelap dengan motif geoteknik/seismik di belakang lapisan penggelap. Motifnya dibangkitkan `tools/build_backgrounds.py` dari bentuk yang memang muncul di dalam program — akselerogram, batas lapisan, bidang gelincir — bukan foto stok. Teks di sini SELALU terang, jadi warnanya TIDAK diambil dari token tema: latarnya gelap di kedua tema, sehingga token yang ikut berbalik justru menghasilkan teks gelap di atas latar gelap saat tema terang. Ini satu- satunya tempat di situs ini yang sengaja memakai warna harfiah. */ .deck { position: relative; isolation: isolate; background: #10161C; color: #C6D0DA; overflow: hidden; } .deck::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: var(--deck-art); background-size: cover; background-position: center; opacity: .55; } /* Lapisan penggelap: gradien miring supaya sisi teks lebih pekat daripada sisi motif, sehingga kontras terjaga tanpa mematikan gambarnya. */ .deck::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(10, 14, 19, .93) 0%, rgba(10, 14, 19, .80) 42%, rgba(10, 14, 19, .45) 100%); } .deck h2, .deck h3 { color: #fff; } .deck .eyebrow { color: #FF6B6B; } .deck .lead, .deck p { color: #B3BEC9; } .deck .feat { border-top-color: #FFFFFF; } .deck .flow-step { border-top-color: #FFFFFF; } .deck .flow-step + .flow-step::before { border-left-color: rgba(255,255,255,.18); } .deck .flow-num { color: #FF6B6B; } .deck .who { color: #8C99A6; } .deck .btn-ghost { border-color: #4A545E; color: #fff; background: transparent; } .deck .btn-ghost:hover { border-color: #fff; } .deck .code-chip { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .2); color: #E6ECF2; } .deck .code-chip span { color: #93A0AD; } .deck .stats { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.14); } .deck .stat { background: #141A21; } .deck .stat b { color: #fff; } .deck .stat span { color: #98A5B2; } /* ================================================================ slider === */ .slider { position: relative; } .slider-frame { position: relative; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--card); box-shadow: var(--shadow-lg); /* Rasio dikunci supaya tinggi tidak melompat saat slide berganti — lompatan itu menggeser seluruh halaman di bawahnya. */ aspect-ratio: 1200 / 745; } .slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .5s ease; } .slide[data-active="true"] { opacity: 1; visibility: visible; } .slide img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } .slide-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.2rem 1.1rem .85rem; background: linear-gradient(transparent, rgba(10, 14, 19, .92)); color: #E6ECF2; font-size: .82rem; line-height: 1.5; } .slide-cap b { display: block; color: #fff; font-weight: 650; font-size: .88rem; } .slide-cap .badge { color: #FF8A8A; margin-bottom: .35rem; } .slider-ui { display: flex; align-items: center; gap: .5rem; margin-top: .9rem; } .slider-dots { display: flex; gap: .4rem; margin-right: auto; } .slider-dots button { width: 26px; height: 4px; padding: 0; border: 0; border-radius: 2px; background: var(--line); cursor: pointer; transition: background .2s; } .slider-dots button[aria-selected="true"] { background: var(--red); } .slider-dots button:hover { background: var(--mute); } .slider-nav { width: 30px; height: 30px; padding: 0; line-height: 1; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); color: var(--ink); cursor: pointer; font-size: .95rem; } .slider-nav:hover { border-color: var(--ink); } @media (prefers-reduced-motion: reduce) { .slide { transition: none; } }