Media Kit
Panduan Logo & Aset Brand BALANU
Rujukan resmi penggunaan logo dan identitas visual BALANU.
Untuk web, cetak, media sosial, dan keperluan publikasi media.
Daftar Isi
Filosofi Logo
Balanu: wadah yang berharga — dari bahasa Mandar, menjadi identitas visual.
Dalam bahasa Mandar, balanu berarti wadah atau tempat menampung sesuatu yang berharga — hasil laut, hasil bumi, hasil karya. Logo BALANU menerjemahkannya menjadi simpul anyaman yang saling mengunci, selaras dengan tagline “Menganyam Cerita, Menampung Karya, Membawa Produk Sulbar ke Pasar Digital”.
Simbol anyaman
Pita-pita yang bersilang membentuk wadah: pelaku usaha, penulis, dan komunitas saling menguatkan.
Wordmark huruf kecil
Huruf kecil, tebal, dan membulat: ramah, sederhana, mudah dibaca di layar kecil.
Wadah Digital UMKM Sulbar
Tagline
Gunakan sebagai keterangan pendamping di bawah atau di samping logo, bukan sebagai bagian dari file logo.
Boilerplate Resmi
Deskripsi singkat BALANU yang siap Anda kutip dalam artikel, siaran pers, atau publikasi media. Tersedia dalam tiga versi.
Versi Pendek
~25 kata
BALANU adalah portal digital UMKM Sulawesi Barat yang menghubungkan pelaku usaha, penulis warga, dan pembaca — tanpa mengambil komisi dari transaksi.
Versi Sedang
~55 kata
BALANU adalah wadah digital untuk UMKM Sulawesi Barat. Portal ini mempertemukan pelaku usaha, penulis, dan pegiat komunitas untuk berbagi cerita, memasarkan produk, dan tumbuh bersama. Berbeda dari marketplace biasa, BALANU tidak mengambil komisi dari transaksi — pembeli dihubungkan langsung dengan pemilik usaha.
Versi Panjang
~100 kata
BALANU adalah wadah digital untuk UMKM Sulawesi Barat. Portal ini mempertemukan pelaku usaha, penulis, dan pegiat komunitas untuk berbagi cerita, memasarkan produk, dan tumbuh bersama. Berbeda dari marketplace biasa, BALANU tidak mengambil komisi dari transaksi — pembeli dihubungkan langsung dengan pemilik usaha melalui WhatsApp atau kanal jualan mandiri mereka. Setiap pelaku usaha memiliki halaman profil sendiri, lengkap dengan logo, alamat, sosial media, dan katalog produk. Portal ini juga menjadi rumah bagi penulis warga yang ingin membagikan cerita, tips, dan gagasan seputar UMKM Sulbar. BALANU dikelola secara kolaboratif dan terbuka untuk kolaborasi dengan brand, instansi, komunitas, dan media yang peduli pada kemajuan ekonomi lokal.
Cara pakai: Klik tombol “Salin” di setiap versi. Deskripsi sudah ditulis dalam bahasa yang siap kutip — tidak perlu diubah.
Logo Utama
Tiga varian logo resmi BALANU. Klik untuk mengunduh file PNG dengan latar transparan.
Wordmark
Versi utama. Logo simbol + wordmark. Untuk header, dokumen, surat, spanduk, dan kop surat.
Unduh Wordmark
Icon
Versi simbol saja. Untuk favicon, avatar media sosial, stempel, kemasan, dan ruang sempit.
Unduh Icon
Wordmark Text
Versi wordmark saja (tanpa simbol). Untuk konteks di mana simbol sudah dikenal atau ruang sangat horizontal.
Unduh Wordmark TextVersi putih: Untuk latar gelap atau hijau BALANU, gunakan teknik CSS filter: brightness(0) invert(1) — atau minta file versi putih ke tim kami.
Ruang Aman & Ukuran Minimum
Beri ruang kosong di sekeliling logo sebesar x, yaitu setengah tinggi logo. Jangan letakkan teks, gambar, atau tepi halaman di dalam area ini.
x
x
Wordmark
Min. 120 px / 30 mm
Icon
Min. 24 px / 8 mm
Warna Brand
Logo hanya boleh tampil dalam satu warna: hijau tua atau putih. Klik kartu untuk menyalin kode warna.
Warna Logo
Penting: Hijau logo (#254E35) berbeda dari hijau antarmuka website (#059669). Jangan mewarnai ulang logo dengan hijau antarmuka — gunakan #254E35 atau putih. Hijau antarmuka dipakai di sekitar logo sebagai aksen.
Warna Pendamping (dari Style Guide Website)
Tipografi
Wordmark sudah berupa gambar — jangan diketik ulang. Untuk teks pendamping, ikuti panduan berikut.
| Elemen | Ukuran · Weight | Catatan |
|---|---|---|
| Judul halaman | 36px · 800 | letter-spacing −0.5px |
| Heading section | 24px · 800 | letter-spacing −0.3px |
| Teks isi | 14.5px · 400 | line-height 1.7, warna #475569 |
| Tagline di samping logo | 13px · 600 | warna #64748b |
Latar Penggunaan
Kontras adalah kunci. Hijau di atas latar terang; putih di atas latar gelap atau hijau.
Diizinkan
Putih / abu sangat terang: logo hijau.
Diizinkan
Hijau BALANU (#254E35): logo putih.
Diizinkan
Hitam / gelap: logo putih.
Diizinkan
Foto: gunakan area tenang dan gelap/terang merata, atau tempatkan di atas blok warna.
Larangan Penggunaan
Jaga logo tetap utuh. Hindari perubahan berikut.
Meregangkan atau memipihkan
Memiringkan atau memutar
Mengganti warna di luar hijau/putih
Menambah bayangan atau efek
Kontras rendah (hijau di atas hijau)
Latar ramai atau bermotif
Balanu
Menyusun ulang atau mengetik ulang wordmark
Menumpuk atau menduplikasi logo
Kontak Media
Butuh berkas logo resolusi tinggi, versi vektor (SVG/AI), atau izin penggunaan oleh mitra dan pihak ketiga? Hubungi tim kami.
Email Media
kabar@balanusulbar.com
Untuk permintaan berkas dan izin penggunaan.
+62 812-4435-4328
Untuk respon cepat pada jam kerja.
Kolaborasi Resmi
Halaman Kolaborasi
Untuk kemitraan brand & media partner.
Kantor & Alamat Surat
Jalan Soekarno Hatta, Mamuju 91511, Sulawesi Barat, Indonesia
Untuk kiriman paket atau dokumen cetak, hubungi kami terlebih dahulu via email atau WhatsApp.
Media Kit BALANU v1.0 · Oktober 2026
Disalin
.balanu-mediakit { font-family: inherit; color: #334155; line-height: 1.7; font-size: 15px; }
/* ─── HERO ─────────────────────────────────────────────── */
.balanu-mediakit .mk-hero {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 55%, #334155 100%);
border-radius: 20px; padding: 60px 30px 50px 30px; margin-bottom: 40px;
text-align: center; position: relative; overflow: hidden;
}
.balanu-mediakit .mk-hero::before {
content: ”; position: absolute; top: -80px; right: -80px;
width: 280px; height: 280px;
background: radial-gradient(circle, rgba(16,185,129,0.18) 0%, transparent 70%);
border-radius: 50%;
}
.balanu-mediakit .mk-hero-inner { position: relative; z-index: 1; }
.balanu-mediakit .mk-badge {
display: inline-block; background: rgba(16,185,129,0.2); color: #6ee7b7;
padding: 6px 16px; border-radius: 20px; font-size: 12px; font-weight: 700;
letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 20px;
border: 1px solid rgba(16,185,129,0.3);
}
.balanu-mediakit .mk-hero-title {
color: #fff; font-size: 38px; font-weight: 800;
margin: 0 0 16px 0; line-height: 1.15; letter-spacing: -0.5px;
}
.balanu-mediakit .mk-hero-sub {
color: rgba(255,255,255,0.85); font-size: 16px;
max-width: 640px; margin: 0 auto 24px auto; line-height: 1.6;
}
.balanu-mediakit .mk-hero-meta {
display: flex; justify-content: center; align-items: center; gap: 12px;
flex-wrap: wrap; padding-top: 20px;
border-top: 1px solid rgba(255,255,255,0.15);
max-width: 500px; margin: 0 auto;
color: rgba(255,255,255,0.75); font-size: 13px;
position: relative; z-index: 1;
}
.balanu-mediakit .mk-hero-meta-item { display: inline-flex; align-items: center; gap: 6px; }
.balanu-mediakit .mk-hero-meta-item svg { color: #6ee7b7; }
/* ─── LAYOUT ───────────────────────────────────────────── */
.balanu-mediakit .mk-layout-wrap {
max-width: 1200px; margin: 0 auto; padding: 0 20px;
}
.balanu-mediakit .mk-layout {
display: grid; grid-template-columns: 240px 1fr;
gap: 40px; align-items: start;
}
/* ─── KONTEN ───────────────────────────────────────────── */
.balanu-mediakit .mk-main { min-width: 0; }
/* ─── TOC ──────────────────────────────────────────────── */
.balanu-mediakit .mk-toc {
background: #f8fafc; border: 1px solid #e2e8f0;
border-radius: 12px; padding: 22px 26px; margin-bottom: 32px;
}
.balanu-mediakit .mk-toc-title {
font-size: 13px; font-weight: 800; color: #0f172a;
text-transform: uppercase; letter-spacing: 0.5px;
margin-bottom: 12px;
}
.balanu-mediakit .mk-toc-list {
list-style: none; padding: 0; margin: 0;
display: grid; grid-template-columns: 1fr 1fr;
gap: 6px 24px;
counter-reset: toc;
}
.balanu-mediakit .mk-toc-list li {
counter-increment: toc;
font-size: 13.5px;
}
.balanu-mediakit .mk-toc-list li a {
color: #334155 !important; font-weight: 600;
text-decoration: none !important;
display: flex; align-items: center; gap: 8px;
padding: 4px 0; transition: color 0.15s;
}
.balanu-mediakit .mk-toc-list li a::before {
content: counter(toc) “.”;
font-weight: 700; color: #059669;
font-size: 12px; min-width: 22px;
}
.balanu-mediakit .mk-toc-list li a:hover { color: #059669 !important; }
/* ─── SECTION ──────────────────────────────────────────── */
.balanu-mediakit .mk-section { margin-bottom: 40px; scroll-margin-top: 100px; }
.balanu-mediakit .mk-section-alt {
background: #f8fafc; border-left: 4px solid #10b981;
border-radius: 12px; padding: 28px 26px; margin-bottom: 40px;
scroll-margin-top: 100px;
}
.balanu-mediakit .mk-section-header { margin-bottom: 20px; }
.balanu-mediakit .mk-h2 {
font-size: 22px; font-weight: 800; color: #0f172a;
margin: 0 0 6px 0; letter-spacing: -0.3px; line-height: 1.3;
display: flex; align-items: center; gap: 10px;
}
.balanu-mediakit .mk-h2-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px; color: #059669; flex-shrink: 0;
}
.balanu-mediakit .mk-h2-icon svg { width: 22px; height: 22px; display: block; }
.balanu-mediakit .mk-h3 {
font-size: 15px; font-weight: 800; color: #0f172a;
margin: 28px 0 12px 0; line-height: 1.35;
}
.balanu-mediakit .mk-desc { font-size: 13.5px; color: #64748b; margin: 0; line-height: 1.6; }
.balanu-mediakit .mk-desc strong { color: #0f172a; font-weight: 700; }
/* ─── BODY ─────────────────────────────────────────────── */
.balanu-mediakit .mk-body p {
font-size: 14.5px; color: #334155; line-height: 1.75; margin: 0 0 14px 0;
}
.balanu-mediakit .mk-body p:last-child { margin-bottom: 0; }
.balanu-mediakit .mk-body strong { color: #0f172a; font-weight: 700; }
.balanu-mediakit .mk-body em { color: #059669; font-style: normal; font-weight: 600; }
/* ─── PHILOSOPHY GRID ─────────────────────────────────── */
.balanu-mediakit .mk-philosophy-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px; margin-top: 24px;
}
.balanu-mediakit .mk-philosophy-card {
background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
overflow: hidden;
}
.balanu-mediakit .mk-philosophy-preview {
height: 130px; display: flex; align-items: center; justify-content: center;
background: #f8fafc; padding: 20px;
}
.balanu-mediakit .mk-philosophy-preview img {
max-width: 100%; max-height: 80px; object-fit: contain; display: block;
}
.balanu-mediakit .mk-philosophy-preview.mk-preview-text {
background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
}
.balanu-mediakit .mk-tagline-preview {
color: #065f46; font-weight: 700; font-size: 14px;
text-align: center; line-height: 1.5;
}
.balanu-mediakit .mk-philosophy-body { padding: 14px 16px 16px; }
.balanu-mediakit .mk-philosophy-title {
font-size: 14px; font-weight: 700; color: #0f172a;
margin: 0 0 4px 0;
}
.balanu-mediakit .mk-philosophy-desc {
font-size: 12.5px; color: #64748b; margin: 0; line-height: 1.6;
}
/* ─── BOILERPLATE ─────────────────────────────────────── */
.balanu-mediakit .mk-boilerplate-list {
display: flex; flex-direction: column; gap: 14px;
}
.balanu-mediakit .mk-boilerplate-item {
background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
padding: 20px 22px; position: relative;
}
.balanu-mediakit .mk-boilerplate-head {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; margin-bottom: 10px;
}
.balanu-mediakit .mk-boilerplate-label {
font-size: 12px; font-weight: 800; color: #059669;
text-transform: uppercase; letter-spacing: 0.5px;
}
.balanu-mediakit .mk-boilerplate-count {
font-size: 11.5px; color: #94a3b8; font-weight: 600;
}
.balanu-mediakit .mk-boilerplate-text {
font-size: 13.5px; color: #334155; line-height: 1.7;
margin: 0 0 14px 0;
padding-right: 100px;
}
.balanu-mediakit .mk-copy-btn {
position: absolute; top: 20px; right: 22px;
display: inline-flex; align-items: center; gap: 5px;
background: #f1f5f9; color: #475569;
border: 1px solid #e2e8f0; border-radius: 8px;
padding: 6px 12px; font-size: 12px; font-weight: 700;
cursor: pointer; font-family: inherit;
transition: all 0.15s ease;
}
.balanu-mediakit .mk-copy-btn:hover {
background: #ecfdf5; color: #059669; border-color: #a7f3d0;
}
.balanu-mediakit .mk-copy-btn svg {
width: 14px; height: 14px; display: block;
}
.balanu-mediakit .mk-copy-btn.copied {
background: #dcfce7; color: #166534; border-color: #86efac;
}
/* ─── LOGO GRID ───────────────────────────────────────── */
.balanu-mediakit .mk-logo-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
}
.balanu-mediakit .mk-logo-card {
background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
overflow: hidden;
display: flex; flex-direction: column;
transition: all 0.25s ease;
}
.balanu-mediakit .mk-logo-card:hover {
border-color: #10b981;
box-shadow: 0 10px 20px -8px rgba(5,150,105,0.15);
}
.balanu-mediakit .mk-logo-preview {
height: 140px; display: flex; align-items: center; justify-content: center;
background: #f8fafc; padding: 20px; border-bottom: 1px solid #f1f5f9;
}
.balanu-mediakit .mk-logo-preview img {
max-width: 90%; max-height: 70px; object-fit: contain; display: block;
}
.balanu-mediakit .mk-logo-preview.mk-preview-icon img {
max-height: 80px; max-width: 80px;
}
.balanu-mediakit .mk-logo-preview.mk-preview-word img {
max-height: 50px;
}
.balanu-mediakit .mk-logo-body {
padding: 16px 18px 18px;
display: flex; flex-direction: column; flex-grow: 1;
}
.balanu-mediakit .mk-logo-title {
font-size: 15px; font-weight: 700; color: #0f172a;
margin: 0 0 6px 0;
}
.balanu-mediakit .mk-logo-desc {
font-size: 12.5px; color: #64748b; margin: 0 0 14px 0;
line-height: 1.6; flex-grow: 1;
}
.balanu-mediakit .mk-download-btn {
display: inline-flex; align-items: center; justify-content: center;
gap: 6px; background: #059669; color: #fff !important;
padding: 10px 16px; border-radius: 8px;
font-size: 12.5px; font-weight: 700;
text-decoration: none !important;
transition: all 0.2s ease;
}
.balanu-mediakit .mk-download-btn:hover {
background: #047857; transform: translateY(-1px);
}
.balanu-mediakit .mk-download-btn svg {
width: 14px; height: 14px; display: block;
}
/* ─── NOTE ─────────────────────────────────────────────── */
.balanu-mediakit .mk-note {
display: flex; gap: 12px; align-items: flex-start;
border-radius: 8px; padding: 14px 18px;
margin-top: 20px;
}
.balanu-mediakit .mk-note svg { flex-shrink: 0; margin-top: 2px; }
.balanu-mediakit .mk-note p { margin: 0; font-size: 13px; line-height: 1.6; }
.balanu-mediakit .mk-note-info {
background: #eff6ff; border-left: 4px solid #3b82f6; color: #1e40af;
}
.balanu-mediakit .mk-note-info svg { color: #3b82f6; }
.balanu-mediakit .mk-note-info code {
background: #dbeafe; padding: 2px 6px; border-radius: 4px;
font-size: 12px;
}
.balanu-mediakit .mk-note-warning {
background: #fef3c7; border-left: 4px solid #f59e0b; color: #78350f;
}
.balanu-mediakit .mk-note-warning svg { color: #f59e0b; }
/* ─── CLEARSPACE ──────────────────────────────────────── */
.balanu-mediakit .mk-clearspace-showcase {
background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
padding: 40px 20px; margin-bottom: 20px;
display: flex; justify-content: center;
}
.balanu-mediakit .mk-clearspace-box {
position: relative; padding: 40px; border: 1.5px dashed #10b981;
border-radius: 8px;
background: #fff;
}
.balanu-mediakit .mk-clearspace-img {
display: block; max-width: 280px; outline: 1px solid rgba(5,150,105,0.3);
}
.balanu-mediakit .mk-clearspace-label {
position: absolute; font-size: 11px; font-weight: 800;
color: #059669; background: #ecfdf5;
padding: 2px 8px; border-radius: 6px;
line-height: 1;
}
.balanu-mediakit .mk-label-top { top: 10px; left: 50%; transform: translateX(-50%); }
.balanu-mediakit .mk-label-left { left: 8px; top: 50%; transform: translateY(-50%); }
.balanu-mediakit .mk-min-size {
display: flex; gap: 24px; flex-wrap: wrap;
background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
padding: 26px 24px;
}
.balanu-mediakit .mk-min-item {
display: flex; flex-direction: column; align-items: center;
gap: 12px;
}
.balanu-mediakit .mk-min-item img { display: block; }
.balanu-mediakit .mk-min-label {
text-align: center; font-size: 12px; color: #64748b; line-height: 1.5;
}
.balanu-mediakit .mk-min-label strong {
display: block; color: #0f172a; font-size: 13px;
margin-bottom: 2px;
}
/* ─── SWATCHES ────────────────────────────────────────── */
.balanu-mediakit .mk-swatch-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 14px;
}
.balanu-mediakit .mk-swatch {
all: unset; cursor: pointer;
background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
overflow: hidden;
transition: all 0.2s ease;
display: block; box-sizing: border-box;
}
.balanu-mediakit .mk-swatch:hover {
border-color: #10b981; transform: translateY(-2px);
box-shadow: 0 8px 16px -6px rgba(5,150,105,0.15);
}
.balanu-mediakit .mk-swatch-color { height: 84px; width: 100%; }
.balanu-mediakit .mk-swatch-info {
padding: 12px 14px;
display: flex; flex-direction: column; gap: 2px;
}
.balanu-mediakit .mk-swatch-info strong {
font-size: 13px; font-weight: 700; color: #0f172a;
}
.balanu-mediakit .mk-swatch-info code {
font-family: ‘Courier New’, monospace; font-size: 12px;
color: #059669; font-weight: 700;
}
.balanu-mediakit .mk-swatch-info span {
font-size: 11px; color: #94a3b8;
}
/* ─── TABLE ───────────────────────────────────────────── */
.balanu-mediakit .mk-table-wrap {
overflow-x: auto; border: 1px solid #e2e8f0;
border-radius: 12px; background: #fff;
}
.balanu-mediakit .mk-table {
width: 100%; border-collapse: collapse; font-size: 13.5px;
}
.balanu-mediakit .mk-table thead { background: #f8fafc; }
.balanu-mediakit .mk-table th {
text-align: left; padding: 14px 18px;
font-weight: 700; color: #0f172a; font-size: 13px;
border-bottom: 1px solid #e2e8f0;
}
.balanu-mediakit .mk-table td {
padding: 12px 18px; color: #475569;
border-bottom: 1px solid #f1f5f9; line-height: 1.5;
}
.balanu-mediakit .mk-table tbody tr:last-child td { border-bottom: none; }
/* ─── LATAR ───────────────────────────────────────────── */
.balanu-mediakit .mk-latar-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
}
.balanu-mediakit .mk-latar-card {
background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
overflow: hidden;
}
.balanu-mediakit .mk-latar-preview {
height: 130px; display: flex; align-items: center; justify-content: center;
padding: 20px;
}
.balanu-mediakit .mk-latar-preview img {
max-width: 85%; max-height: 60px; object-fit: contain; display: block;
}
.balanu-mediakit .mk-white-logo {
filter: brightness(0) invert(1);
}
.balanu-mediakit .mk-latar-body { padding: 14px 16px 16px; }
.balanu-mediakit .mk-latar-status {
display: inline-block; font-size: 10.5px; font-weight: 800;
text-transform: uppercase; letter-spacing: 0.5px;
padding: 3px 10px; border-radius: 12px;
margin-bottom: 8px;
}
.balanu-mediakit .mk-latar-ok {
background: #dcfce7; color: #166534;
}
.balanu-mediakit .mk-latar-desc {
font-size: 12.5px; color: #64748b; margin: 0; line-height: 1.6;
}
/* ─── FORBIDDEN GRID ─────────────────────────────────── */
.balanu-mediakit .mk-forbidden-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 14px;
}
.balanu-mediakit .mk-forbidden-card {
background: #fff; border: 1px solid #fecaca; border-radius: 12px;
overflow: hidden;
}
.balanu-mediakit .mk-forbidden-preview {
height: 120px; display: flex; align-items: center; justify-content: center;
background: #f8fafc; padding: 20px; overflow: hidden;
}
.balanu-mediakit .mk-forbidden-preview img {
max-width: 75%; max-height: 55px; object-fit: contain;
}
.balanu-mediakit .mk-forbidden-typo {
gap: 12px;
}
.balanu-mediakit .mk-typography-wrong {
font-family: Georgia, serif; font-weight: 400;
font-size: 28px; color: #0f172a; font-style: italic;
}
.balanu-mediakit .mk-forbidden-desc {
padding: 12px 16px 14px;
font-size: 12.5px; font-weight: 600;
color: #dc2626; line-height: 1.5;
margin: 0;
}
.balanu-mediakit .mk-forbidden-desc::before {
content: ‘\2715’;
margin-right: 6px;
font-weight: 800;
}
/* ─── CONTACT GRID ────────────────────────────────────── */
.balanu-mediakit .mk-contact-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px; margin-bottom: 20px;
}
.balanu-mediakit .mk-contact-card {
background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
padding: 22px 20px; text-decoration: none !important;
color: inherit; text-align: center;
transition: all 0.25s ease;
display: flex; flex-direction: column; align-items: center;
}
.balanu-mediakit .mk-contact-card:hover {
border-color: #10b981; transform: translateY(-3px);
box-shadow: 0 10px 20px -8px rgba(5,150,105,0.15);
}
.balanu-mediakit .mk-contact-icon {
width: 48px; height: 48px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
margin-bottom: 12px;
}
.balanu-mediakit .mk-contact-icon svg { width: 22px; height: 22px; }
.balanu-mediakit .mk-icon-email { background: #dbeafe; color: #3b82f6; }
.balanu-mediakit .mk-icon-wa { background: #dcfce7; color: #16a34a; }
.balanu-mediakit .mk-icon-brand { background: #fef3c7; color: #d97706; }
.balanu-mediakit .mk-contact-title {
font-size: 14.5px; font-weight: 700; color: #0f172a;
margin: 0 0 4px 0;
}
.balanu-mediakit .mk-contact-value {
font-size: 12.5px; font-weight: 700; color: #059669;
margin: 0 0 6px 0;
font-family: ‘Courier New’, monospace;
word-break: break-all;
}
.balanu-mediakit .mk-contact-desc {
font-size: 12px; color: #64748b; margin: 0; line-height: 1.5;
}
.balanu-mediakit .mk-address-card {
background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px;
padding: 22px 24px;
}
.balanu-mediakit .mk-address-title {
font-size: 14px; font-weight: 700; color: #0f172a;
margin: 0 0 8px 0;
}
.balanu-mediakit .mk-address-text {
font-size: 13.5px; color: #334155; margin: 0 0 8px 0; line-height: 1.6;
}
.balanu-mediakit .mk-address-note {
font-size: 12px; color: #94a3b8; margin: 0; font-style: italic;
}
/* ─── UPDATED ──────────────────────────────────────────── */
.balanu-mediakit .mk-updated {
display: flex; align-items: center; justify-content: center;
gap: 8px; margin-top: 40px; padding-top: 20px;
border-top: 1px solid #e2e8f0;
font-size: 13px; color: #94a3b8;
}
.balanu-mediakit .mk-updated svg { color: #64748b; }
/* ─── TOAST ────────────────────────────────────────────── */
#mk-toast {
position: fixed;
bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px);
background: #0f172a; color: #fff;
padding: 10px 20px; border-radius: 30px;
font-size: 13px; font-weight: 700;
opacity: 0; pointer-events: none;
transition: all 0.3s ease;
z-index: 9999;
}
#mk-toast.show {
opacity: 1; transform: translateX(-50%) translateY(0);
}
/* ─── RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 900px) {
.balanu-mediakit .mk-layout { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 640px) {
.balanu-mediakit .mk-layout-wrap { padding: 0 16px; }
.balanu-mediakit .mk-hero { padding: 40px 22px 34px 22px; border-radius: 14px; }
.balanu-mediakit .mk-hero-title { font-size: 26px; }
.balanu-mediakit .mk-hero-sub { font-size: 14px; }
.balanu-mediakit .mk-h2 { font-size: 19px; }
.balanu-mediakit .mk-h2-icon { width: 24px; height: 24px; }
.balanu-mediakit .mk-h2-icon svg { width: 20px; height: 20px; }
.balanu-mediakit .mk-section-alt { padding: 22px 18px; }
.balanu-mediakit .mk-toc-list { grid-template-columns: 1fr; }
.balanu-mediakit .mk-philosophy-grid { grid-template-columns: 1fr; }
.balanu-mediakit .mk-logo-grid { grid-template-columns: 1fr; }
.balanu-mediakit .mk-boilerplate-text { padding-right: 0; }
.balanu-mediakit .mk-copy-btn {
position: static; margin-top: 6px;
}
.balanu-mediakit .mk-latar-grid { grid-template-columns: 1fr; }
.balanu-mediakit .mk-forbidden-grid { grid-template-columns: 1fr 1fr; }
.balanu-mediakit .mk-contact-grid { grid-template-columns: 1fr; }
.balanu-mediakit .mk-table th,
.balanu-mediakit .mk-table td { padding: 10px 14px; font-size: 12.5px; }
}
@media (max-width: 420px) {
.balanu-mediakit .mk-forbidden-grid { grid-template-columns: 1fr; }
}
(function() {
‘use strict’;
if (window.__balanuMediaKitLoaded) return;
window.__balanuMediaKitLoaded = true;
document.addEventListener(‘DOMContentLoaded’, function() {
var toast = document.getElementById(‘mk-toast’);
var toastTimer;
function showToast(msg) {
if (!toast) return;
toast.textContent = msg;
toast.classList.add(‘show’);
clearTimeout(toastTimer);
toastTimer = setTimeout(function() {
toast.classList.remove(‘show’);
}, 1600);
}
// ── Boilerplate copy buttons ─────────────────────
document.querySelectorAll(‘.balanu-mediakit .mk-copy-btn’).forEach(function(btn) {
btn.addEventListener(‘click’, function() {
var text = this.dataset.copy || ”;
if (!text) return;
navigator.clipboard.writeText(text).then(function() {
btn.classList.add(‘copied’);
var span = btn.innerHTML;
btn.innerHTML = ‘ Tersalin’;
showToast(‘Boilerplate disalin’);
setTimeout(function() {
btn.classList.remove(‘copied’);
btn.innerHTML = span;
}, 2000);
}).catch(function() {
showToast(‘Gagal menyalin’);
});
});
});
// ── Swatch copy buttons ──────────────────────────
document.querySelectorAll(‘.balanu-mediakit .mk-swatch’).forEach(function(btn) {
btn.addEventListener(‘click’, function() {
var color = this.dataset.copy || ”;
if (!color) return;
navigator.clipboard.writeText(color).then(function() {
showToast(‘Disalin ‘ + color);
}).catch(function() {
showToast(‘Gagal menyalin’);
});
});
});
});
})();