.oak-title{
font-family:'Plus Jakarta Sans',Arial,sans-serif;
font-weight:800;
font-size:50px;
line-height:1.3;
margin:0;
color:#191C27;
text-align:center;
}
.oak-title .grad{
display:inline-block;
padding-bottom:8px;
margin-bottom:-8px;
background:linear-gradient(90deg,#1e5cff 0%,#3ea0ff 55%,#54c8ff 100%);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
color:transparent;
}
@media(max-width:900px){ .oak-title{font-size:44px;} }
@media(max-width:640px){ .oak-title{font-size:32px;} }
Terhubung Terbuka dengan Ekosistem
Terhubung Terbuka dengan Ekosistem
Bisnis Anda
Oaktree terbuka untuk terintegrasi dengan sistem accounting, custom clearance, perbankan,
tanda tangan digital, hingga API internal perusahaan Anda tanpa proses tertutup.
<!-- kartu melayang — hapus baris ini kalau nggak dipakai
-->
<!-- 
Data-Driven Business Decisions
Integrasi yang Lebih Fleksibel Fleksibel
Hubungkan Oaktree dengan accounting, perbankan, custom clearance, dan sistem internal melalui integrasi yang mudah dan terbuka.
<!-- ITEM 1 — copas blok ini kalau mau nambah item -->
<!-- ganti isi span ini pakai 
kalau mau icon sendiri -->
Integrasi Accounting
Sinkronkan transaksi dengan software accounting secara otomatis.
API & Sistem Internal
Hubungkan Oaktree dengan aplikasi dan sistem yang sudah digunakan perusahaan.
Third-Party Integration
Percepat proses persetujuan dan transaksi melalui integrasi layanan pihak ketiga.
<!-- ===== TOMBOL KECIL — paling bawah, ganti href & teksnya di sini =====
Pelajari jobfile
-->
Integrasi Accounting
Sinkronkan transaksi dengan software accounting secara otomatis.
API & Sistem Internal
Hubungkan Oaktree dengan aplikasi dan sistem yang sudah digunakan perusahaan.
Third-Party Integration
Percepat proses persetujuan dan transaksi melalui integrasi layanan pihak ketiga.
/* ================= OAKTREE INTEGRASI OPERASIONAL SECTION ================= */
.oak-int {
position: relative;
padding: 90px 5vw;
background: #fff;
font-family: 'Plus Jakarta Sans', Arial, sans-serif;
}
.oak-int * { box-sizing: border-box; }
/* ---------- PANEL GELAP ---------- */
.oak-int-panel {
position: relative;
max-width: 1300px;
margin: 0 auto;
padding: 70px 60px 80px;
border-radius: 32px;
overflow: hidden;
background-color: #10161d; /* fallback sebelum gambar termuat */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
box-shadow:
0 0 70px rgba(90, 170, 255, 0.35),
0 30px 70px rgba(10, 25, 45, 0.25);
}
.oak-int-inner { position: relative; z-index: 1; }
/* ---------- HEADING ---------- */
.oak-int-heading {
text-align: center;
font-size: clamp(26px, 3.6vw, 46px);
font-weight: 800;
color: #fff;
letter-spacing: -0.02em;
line-height: 1.25;
margin: 0 0 18px;
}
.oak-int-heading .oak-grad {
display: inline-block;
padding-bottom: 6px;
margin-bottom: -6px;
background: linear-gradient(90deg, #18b8ff, #3f5bff);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.oak-int-sub {
text-align: center;
font-size: 17px;
line-height: 1.6;
color: #97a3b2;
margin: 0 auto 56px;
max-width: 720px;
}
/* ---------- GRID ---------- */
.oak-int-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
}
/* Bingkai kartu memakai gambar, bukan border CSS */
.oak-int-cell {
display: flex;
flex-direction: column;
padding: 34px 32px 38px;
background-image: url('https://asia.oaktree.id/wp-content/uploads/2026/08/Card-44.webp');
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
transition: transform 0.35s ease, filter 0.35s ease;
}
.oak-int-cell:hover {
transform: translateY(-4px);
filter: brightness(1.12);
}
.oak-int-title {
font-size: 23px;
font-weight: 700;
color: #fff;
letter-spacing: -0.01em;
margin: 0 0 14px;
line-height: 1.3;
}
.oak-int-desc {
font-size: 16px;
line-height: 1.65;
color: #8e9aab;
margin: 0 0 40px;
}
/* Baris ikon — didorong ke bawah supaya sejajar antar cell */
.oak-int-icons {
margin-top: auto;
display: flex;
align-items: center;
justify-content: center;
gap: 22px;
}
.oak-int-icons img {
width: 76px;
height: 76px;
object-fit: contain;
display: block;
}
.oak-int-swap {
width: 42px;
height: 42px;
flex: 0 0 42px;
color: #fff;
}
/* ================= RESPONSIVE ================= */
@media (max-width: 1024px) {
.oak-int-panel { padding: 55px 34px 60px; border-radius: 26px; }
.oak-int-grid { grid-template-columns: repeat(2, 1fr); }
.oak-int-cell { padding: 28px 24px 32px; }
.oak-int-title { font-size: 20px; }
.oak-int-icons img { width: 64px; height: 64px; }
.oak-int-swap { width: 34px; height: 34px; flex: 0 0 34px; }
}
@media (max-width: 700px) {
.oak-int { padding: 60px 16px; }
.oak-int-panel { padding: 40px 18px 46px; border-radius: 22px; }
.oak-int-sub { font-size: 15px; margin-bottom: 34px; }
.oak-int-grid { grid-template-columns: 1fr; }
.oak-int-cell { padding: 26px 22px 30px; }
.oak-int-title { font-size: 19px; }
.oak-int-desc { font-size: 15px; margin-bottom: 28px; }
.oak-int-icons { gap: 16px; }
.oak-int-icons img { width: 58px; height: 58px; }
.oak-int-swap { width: 30px; height: 30px; flex: 0 0 30px; }
}
Integrasi Sesuai Kebutuhan Operasional Anda
Pilih kategori integrasi yang relevan dengan proses bisnis perusahaan Anda
Accounting & Finance
Sinkronisasi otomatis data keuangan dan invoice
Custom Clearance
Terhubung langsung dengan sistem kepabeanan resmi
Digital Signature
Tanda tangan dokumen surat jalan secara digital
Banking & Payment
Rekonsiliasi pembayaran dan cash advance otomatis
CRM & Communication
Integrasi notifikasi ke tools komunikasi tim
Custom API & Webhook
Bangun koneksi khusus sesuai sistem internal perusahaan
/* ================= OAKTREE CASE STUDY SECTION ================= */
.oak-cs {
position: relative;
padding: 80px 5vw; /* Jarak padding atas/bawah dipangkas agar tidak terlalu longgar */
background: #fff;
overflow: hidden;
font-family: 'Plus Jakarta Sans', Arial, sans-serif;
}
.oak-cs * { box-sizing: border-box; }
.oak-cs-inner {
max-width: 1280px; /* Lebar maksimal disesuaikan agar rapi */
margin: 0 auto;
}
.oak-cs-heading {
font-size: clamp(28px, 3.5vw, 42px);
font-weight: 800;
line-height: 1.25;
color: #0b1230;
text-align: center;
margin: 0 auto 50px;
max-width: 900px;
letter-spacing: -0.02em;
}
.oak-cs-heading .oak-cs-gradient {
background: linear-gradient(90deg, #18b8ff, #3f5bff);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.oak-cs-wrap {
display: flex;
gap: 50px;
align-items: stretch; /* Memastikan tinggi kedua kolom seimbang jika diperlukan */
}
/* ---------- BAGIAN KIRI (TESTIMONI) ---------- */
.oak-cs-left {
flex: 1 1 45%;
min-width: 280px;
display: flex;
flex-direction: column;
justify-content: flex-start; /* <--- UBAH JADI INI BIAR KE ATAS */
}
.oak-cs-quote {
font-size: clamp(17px, 1.3vw, 21px);
line-height: 1.7;
color: #4a5568;
margin: 0 0 30px;
}
.oak-cs-person {
display: flex;
align-items: center;
gap: 16px;
}
.oak-cs-avatar {
width: 60px;
height: 60px;
flex: 0 0 60px;
border-radius: 50%;
object-fit: cover;
background: #e6ecf5;
}
.oak-cs-name { font-size: 18px; font-weight: 700; color: #0b1230; margin: 0; }
.oak-cs-role { font-size: 14px; color: #7b8598; margin: 4px 0 0; }
/* ---------- BAGIAN KANAN (KARTU KASUS & GAMBAR) ---------- */
.oak-cs-right {
flex: 1 1 55%;
min-width: 280px;
background: linear-gradient(180deg, #f2f8ff 0%, #fafcff 100%);
border-radius: 20px;
padding: 36px 36px 0;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 10px 30px rgba(20, 60, 140, 0.04);
}
.oak-cs-right-title {
font-size: clamp(20px, 2vw, 26px);
font-weight: 700;
line-height: 1.35;
color: #0b1230;
margin: 0 0 16px;
}
/* Tautan Baca Kasus */
.oak-cs-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: #2a9fd6;
font-weight: 700;
font-size: 17px;
text-decoration: none;
margin-bottom: 28px;
transition: gap 0.3s ease, color 0.3s ease;
}
.oak-cs-link:hover { gap: 14px; color: #1c7fb3; }
.oak-cs-link svg { width: 22px; height: 22px; transition: transform 0.3s ease; }
.oak-cs-shot {
width: 100%;
height: auto;
display: block;
border-radius: 14px 14px 0 0;
box-shadow: 0 -8px 30px rgba(20, 60, 140, 0.08);
margin-top: auto; /* Mendorong gambar ke bawah agar mentok rapi */
}
/* ================= RESPONSIVE ================= */
@media (max-width: 1024px) {
.oak-cs-wrap { gap: 40px; }
.oak-cs-right { padding: 28px 28px 0; }
}
@media (max-width: 900px) {
.oak-cs { padding: 60px 5vw; }
.oak-cs-wrap {
flex-direction: column;
gap: 35px; /* Mengurangi jarak renggang antar kolom di mobile */
}
.oak-cs-left { width: 100%; }
.oak-cs-right { width: 100%; }
}
@media (max-width: 640px) {
.oak-cs { padding: 50px 20px; }
.oak-cs-heading { margin-bottom: 30px; }
.oak-cs-quote { margin-bottom: 24px; }
.oak-cs-right { padding: 24px 20px 0; border-radius: 16px; }
.oak-cs-link { margin-bottom: 20px; font-size: 16px; }
}
Bagaimana Oaktree Mengubah Operasional Freight Forwarding.
“Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since 1966, when designers at Letraset and James Mosley, the librarian at St Bride Printing Library in London”
Herman Situmorang S.Kom
Direktur PT Jalak Cargo Indonesia
/* ================= OAKTREE — FAQ ================= */
.otq *,
.otq *::before,
.otq *::after{ box-sizing:border-box; }
.otq{
--otq-ink:#1B2A41;
--otq-grad:linear-gradient(90deg,#00C1FD 0%,#4648D4 100%);
--otq-body:#6B7686;
--otq-arrow:#7A8798;
--otq-line:#E6ECF3;
font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
background:#fff;
width:100%;
padding:0 0 90px;
overflow:hidden;
}
/* ---------- ILUSTRASI PEMBATAS ---------- */
.otq__divider{
width:100%;
line-height:0;
margin-bottom:clamp(48px,6vw,86px);
}
.otq__divider img{
width:100%;
height:auto;
display:block;
}
.otq__inner{max-width:1000px;margin:0 auto;padding:0 40px;}
.otq__heading{
margin:0 0 clamp(34px,4vw,58px);
text-align:center;
font-size:clamp(24px,3vw,40px);
line-height:1.25;
font-weight:800;
letter-spacing:-.025em;
color:var(--otq-ink);
}
/* kata yang di-highlight pakai gradient Oaktree */
.otq__heading span{
display:inline-block;
background:var(--otq-grad);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
color:transparent;
}
/* ---------- AKORDEON ---------- */
.otq__list{border-top:0;}
.otq__item{border-bottom:1px solid var(--otq-line);}
.otq__q{
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
width:100%;
background:none;
border:0;
padding:26px 4px;
text-align:left;
cursor:pointer;
font-family:inherit;
font-size:clamp(15px,1.45vw,19px);
font-weight:700;
line-height:1.45;
letter-spacing:-.01em;
color:var(--otq-ink);
}
.otq__q:focus-visible{outline:2px solid #3B5BE8;outline-offset:2px;border-radius:6px;}
/* tanpa efek hover & tanpa perubahan warna saat dibuka — cuma panahnya yang muter */
.otq__q svg{
flex:0 0 auto;
width:20px;height:20px;
color:var(--otq-arrow);
transition:transform .3s ease;
}
.otq__item.is-open .otq__q svg{transform:rotate(180deg);}
.otq__a{
overflow:hidden;
height:0;
transition:height .35s cubic-bezier(.4,0,.2,1);
}
.otq__a__in{
padding:0 60px 28px 4px;
font-size:clamp(14px,1.2vw,17px);
line-height:1.75;
color:var(--otq-body);
}
.otq__a__in p{margin:0 0 14px;}
.otq__a__in p:last-child{margin-bottom:0;}
/* ---------- RESPONSIVE ---------- */
@media (max-width:1024px){
.otq{padding-bottom:64px;}
.otq__inner{padding:0 26px;}
}
@media (max-width:600px){
.otq__inner{padding:0 18px;}
.otq__q{padding:20px 2px;gap:16px;}
.otq__q svg{width:17px;height:17px;}
.otq__a__in{padding:0 8px 22px 2px;}
}
@media (prefers-reduced-motion:reduce){
.otq__a,.otq__q svg{transition:none;}
}
/* --- override style tombol bawaan tema --- */
.otq .otq__q,
.otq .otq__q:hover,
.otq .otq__q:focus,
.otq .otq__q:focus-visible,
.otq .otq__q:active,
.otq .otq__q[aria-expanded="true"]{
background:none !important;
background-color:transparent !important;
background-image:none !important;
color:var(--otq-ink) !important;
border:0 !important;
box-shadow:none !important;
border-radius:0 !important;
text-shadow:none !important;
transform:none !important;
}
.otq .otq__q svg{color:var(--otq-arrow) !important;}
(function () {
var root = document.getElementById('otq-faq');
if (!root || root.dataset.otqInit) return;
root.dataset.otqInit = '1';
/* set true kalau mau cuma satu jawaban terbuka dalam satu waktu */
var SINGLE_OPEN = true;
var items = Array.prototype.slice.call(root.querySelectorAll('.otq__item'));
function close(item) {
var panel = item.querySelector('.otq__a');
panel.style.height = panel.scrollHeight + 'px';
void panel.offsetHeight;
panel.style.height = '0px';
item.classList.remove('is-open');
item.querySelector('.otq__q').setAttribute('aria-expanded', 'false');
}
function open(item) {
var panel = item.querySelector('.otq__a');
panel.style.height = panel.scrollHeight + 'px';
item.classList.add('is-open');
item.querySelector('.otq__q').setAttribute('aria-expanded', 'true');
panel.addEventListener('transitionend', function handler(e) {
if (e.propertyName !== 'height') return;
panel.style.height = 'auto';
panel.removeEventListener('transitionend', handler);
});
}
items.forEach(function (item) {
item.querySelector('.otq__q').addEventListener('click', function () {
var isOpen = item.classList.contains('is-open');
if (SINGLE_OPEN) {
items.forEach(function (other) {
if (other !== item && other.classList.contains('is-open')) close(other);
});
}
isOpen ? close(item) : open(item);
});
});
/* jaga tinggi tetap pas saat layar diubah ukurannya */
window.addEventListener('resize', function () {
items.forEach(function (item) {
if (item.classList.contains('is-open')) item.querySelector('.otq__a').style.height = 'auto';
});
});
})();
Semua Yang Perlu Anda Ketahui Tentang Integrasi
Rata-rata 4–8 minggu, tergantung kompleksitas workflow dan jumlah cabang yang diintegrasikan. Untuk implementasi standar tanpa kustomisasi berat, biasanya selesai dalam 4 minggu termasuk migrasi data dan pelatihan tim.
Ya. Oaktree mendukung lebih dari 40 mata uang Asia dengan kurs yang bisa diatur manual maupun otomatis, lengkap dengan pencatatan selisih kurs dan laporan konsolidasi per entitas.
Bisa. Kami menyediakan REST API dan webhook untuk menghubungkan Oaktree dengan sistem akuntansi, ERP, atau warehouse management yang sudah Anda pakai. Tim kami juga membantu proses pemetaan data di awal implementasi.
Ya. Format pajak, penomoran dokumen, dan pelaporan disesuaikan per negara — termasuk integrasi CEISA untuk kepabeanan di Indonesia. Aturan perpajakan diperbarui mengikuti perubahan regulasi setempat.
Klien enterprise mendapat dedicated account manager, dukungan prioritas 24/7, SLA tertulis, serta sesi pelatihan berkala untuk tim internal. Tersedia juga opsi on-site support untuk kebutuhan tertentu.
/* ================= OAKTREE — CTA BANNER (v8) ================= */
.otb *,
.otb *::before,
.otb *::after { box-sizing: border-box; }
.otb {
--otb-cyan: #1CA5C9;
--otb-sub: #94A3B8;
--otb-radius: 30px;
/* ====== PROPORSI KARTU ====== */
--otb-h: clamp(340px, 32vw, 480px);
--otb-media-w: 46%;
--otb-pad: clamp(24px, 3vw, 48px);
/* ==========================================================
KONTROL FOTO — 3 knob yang saling BEBAS, nggak saling tarik
========================================================== */
--otb-photo-size: 88%; /* BESAR-KECIL orang (tinggi foto vs tinggi kartu) */
--otb-photo-y: 0%; /* NAIK-TURUN. 0 = mepet dasar kartu, 6% = naik */
--otb-photo-x: 5%; /* KIRI-KANAN. besar = makin ke kiri, minus = keluar tepi kanan */
--otb-fade-left: 16%; /* panjang fade sisi kiri foto */
--otb-fade-top: 14%; /* panjang fade sisi atas foto */
--otb-fade-right: 14%; /* panjang fade sisi kanan (dipakai kalau photo-x positif) */
/* ====== BACKGROUND ====== */
--otb-bg-zoom: 1.14;
--otb-veil: .18;
font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: #fff;
width: 100%;
padding: 60px 0;
}
.otb__inner { max-width: 1400px; margin: 0 auto; padding: 0 40px; }
/* ---------- KARTU ---------- */
.otb__card {
position: relative;
border-radius: var(--otb-radius);
background: #0E1A2B;
overflow: hidden;
isolation: isolate;
min-height: var(--otb-h);
display: flex;
align-items: center;
box-shadow: 0 0 0 1px rgba(160,205,255,.22),
0 0 46px 6px rgba(125,190,255,.38),
0 24px 60px rgba(20,45,90,.16);
}
.otb__card::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image: url('https://asia.oaktree.id/wp-content/uploads/2026/08/Background-Support-Coverage-scaled.webp');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
transform: scale(var(--otb-bg-zoom));
transform-origin: center center;
}
.otb__card::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(90deg,
rgba(8,17,31,var(--otb-veil)) 0%,
rgba(8,17,31,calc(var(--otb-veil) * .5)) 45%,
rgba(8,17,31,0) 70%);
}
/* ---------- KONTEN KIRI ---------- */
.otb__content {
position: relative;
z-index: 3;
width: min(620px, calc(100% - var(--otb-media-w)));
padding: clamp(38px,4vw,56px) 0 clamp(38px,4vw,56px) var(--otb-pad);
}
.otb__title {
margin: 0 0 20px;
font-size: clamp(24px,3vw,44px);
line-height: 1.15;
font-weight: 800;
letter-spacing: -.025em;
color: #fff;
}
.otb__title span { color: var(--otb-cyan); }
.otb__sub {
margin: 0 0 clamp(24px,2.6vw,38px);
font-size: clamp(14px,1.2vw,18px);
line-height: 1.65;
font-weight: 400;
color: var(--otb-sub);
max-width: 460px;
}
.otb__btn {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 17px 32px;
border-radius: 10px;
border: 0;
cursor: pointer;
text-decoration: none;
font-family: inherit;
font-size: clamp(14px,1.1vw,17px);
font-weight: 600;
color: #fff;
background: var(--otb-cyan);
transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.otb__btn svg { width: 19px; height: 19px; flex: 0 0 auto; transition: transform .25s ease; }
.otb__btn:hover { background: #1897ba; transform: translateY(-2px); box-shadow: 0 14px 28px rgba(28,165,201,.35); }
.otb__btn:hover svg { transform: translateX(4px); }
.otb__btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* ---------- FOTO KANAN ----------
Foto dipasang sebagai background-image dengan `background-size: auto `.
Artinya gambar TIDAK PERNAH di-crop — seluruh badan utuh — dan ukurannya
diatur sendiri lewat --otb-photo-size, terpisah dari posisinya.
*/
.otb__media {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
overflow: hidden;
background-image: url('https://asia.oaktree.id/wp-content/uploads/2026/08/Solusi-untuk-Berbagai-Industri-dengan-30-Modul-Terintegrasi-dengan-Oaktree.webp');
background-repeat: no-repeat;
background-size: auto var(--otb-photo-size);
background-position: right var(--otb-photo-x) bottom var(--otb-photo-y);
/* Fade kiri (mulai dari batas area foto) + fade atas */
-webkit-mask-image:
linear-gradient(to right,
transparent calc(100% - var(--otb-media-w)),
rgba(0,0,0,.35) calc(100% - var(--otb-media-w) + 4%),
#000 calc(100% - var(--otb-media-w) + var(--otb-fade-left)),
#000 calc(100% - var(--otb-fade-right)),
rgba(0,0,0,.45) calc(100% - var(--otb-fade-right) / 2.4),
transparent 100%),
linear-gradient(to bottom,
transparent 0%,
rgba(0,0,0,.30) 4%,
#000 var(--otb-fade-top));
mask-image:
linear-gradient(to right,
transparent calc(100% - var(--otb-media-w)),
rgba(0,0,0,.35) calc(100% - var(--otb-media-w) + 4%),
#000 calc(100% - var(--otb-media-w) + var(--otb-fade-left)),
#000 calc(100% - var(--otb-fade-right)),
rgba(0,0,0,.45) calc(100% - var(--otb-fade-right) / 2.4),
transparent 100%),
linear-gradient(to bottom,
transparent 0%,
rgba(0,0,0,.30) 4%,
#000 var(--otb-fade-top));
-webkit-mask-composite: source-in;
mask-composite: intersect;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
/* ---------- BADGE ---------- */
.otb__badge {
position: absolute;
z-index: 4;
display: inline-flex;
align-items: center;
gap: 12px;
padding: 13px 24px;
border-radius: 10px;
border: 1.5px solid var(--otb-cyan);
background: rgba(12,26,44,.55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
box-shadow: 0 0 18px rgba(28,165,201,.55), inset 0 0 14px rgba(28,165,201,.18);
color: #fff;
font-size: clamp(13px,1.15vw,18px);
font-weight: 600;
letter-spacing: -.01em;
white-space: nowrap;
}
.otb__badge svg { width: 22px; height: 22px; flex: 0 0 auto; fill: #fff; }
.otb__badge--top { top: var(--otb-pad); right: clamp(12px, 1.5%, 24px); }
.otb__badge--bottom { bottom: var(--otb-pad); right: 9%; }
/* ---------- TABLET ---------- */
@media (max-width:1024px) {
.otb {
padding: 44px 0;
--otb-h: clamp(300px, 40vw, 400px);
--otb-media-w: 52%;
--otb-photo-size: 84%;
--otb-photo-x: 4%;
--otb-fade-right: 12%;
--otb-veil: .3;
}
.otb__inner { padding: 0 24px; }
.otb__content { width: min(100%, calc(100% - var(--otb-media-w) + 6%)); }
.otb__badge { padding: 10px 18px; gap: 9px; }
.otb__badge svg { width: 18px; height: 18px; }
.otb__badge--bottom { right: 34%; }
}
/* ---------- MOBILE: STACK ---------- */
@media (max-width:768px) {
.otb { padding: 32px 0; --otb-veil: .35; }
.otb__inner { padding: 0 16px; }
.otb__card {
--otb-radius: 22px;
min-height: 0;
flex-direction: column;
align-items: stretch;
}
.otb__content { width: 100%; padding: var(--otb-pad); order: 1; }
.otb__badge {
position: relative;
top: auto; right: auto; bottom: auto; left: auto;
max-width: fit-content;
white-space: normal;
align-self: flex-start;
margin: 0 var(--otb-pad) 12px var(--otb-pad);
}
.otb__badge--top { order: 2; }
.otb__badge--bottom { order: 3; margin-bottom: var(--otb-pad); }
.otb__media {
position: relative;
inset: auto;
width: 100%;
height: auto;
aspect-ratio: 16 / 10;
order: 4;
background-size: auto 96%;
background-position: center bottom;
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.4) 6%, #000 18%);
mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.4) 6%, #000 18%);
-webkit-mask-composite: source-over;
mask-composite: add;
}
}
@media (max-width:480px) {
.otb__media { aspect-ratio: 4 / 3; }
.otb__badge { font-size: 13.5px; padding: 11px 16px; }
}
@media (prefers-reduced-motion:reduce) {
.otb__btn, .otb__btn svg { transition: none; }
}
Siap Mentransformasi
Siap Mentransformasi
Bisnis Anda?
Kelola seluruh operasional bisnis dalam satu platform yang terintegrasi, cepat, dan efisien.
Request a Demo
30+ Modul Terintegrasi
Solusi untuk Berbagai Industri