/* ================= 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; }
}
Ready to Transform
Your Business?
Manage all your business operations on a single integrated, fast, and efficient platform.
Request a Demo
30+ Integrated Modules
Solutions for Various Industries
<!-- kartu melayang — hapus baris ini kalau nggak dipakai
-->
<!-- 
Data-Driven Business Decisions
Accounting Integration
Automatically sync transactions with accounting software.
API & Internal Systems
Connect Oaktree to the applications and systems your company already uses.
