Studio Logo & Kode Karya Tazkia

💡 Siap Pakai: Kode di bawah ini otomatis menyesuaikan warna Navy & Orange yang Anda pilih di atas. Tinggal salin dan tempelkan.

<!-- Load Font Montserrat dari Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;800&display=swap" rel="stylesheet">

<!-- Logo Karya Tazkia (HTML + SVG) -->
<a href="/" class="kt-brand-logo">
  <!-- Simbol Monogram KT -->
  <svg class="kt-icon" viewBox="0 0 155 130" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g transform="translate(2, 2)">
      <rect x="10" y="10" width="28" height="108" rx="14" fill="#FF7F0A"/>
      <rect x="54" y="26" width="17" height="78" fill="#131F33"/>
      <polygon points="67,63 105,26 126,26 80,72" fill="#131F33"/>
      <polygon points="75,58 128,104 107,104 65,68" fill="#131F33"/>
      <path d="M 90 26 L 99 26 L 83 42 L 77 42 C 77 32 82 26 90 26 Z" fill="#FF7F0A"/>
      <path d="M 131 26 L 147 26 C 147 35 141 42 132 42 L 122 42 L 122 92 C 122 99 116 104 106 104 L 106 56 L 131 26 Z" fill="#FF7F0A"/>
    </g>
  </svg>

  <div class="kt-text-wrap">
    <div class="kt-title">
      <span class="kt-navy">Karya</span> <span class="kt-orange">Tazkia</span>
    </div>
    <span class="kt-slogan">Kreativitas &amp; Inspirasi Tanpa Batas</span>
  </div>
</a>

<style>
  .kt-brand-logo { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; font-family: 'Montserrat', sans-serif; }
  .kt-icon { width: 56px; height: 48px; filter: drop-shadow(0 3px 4px rgba(15, 23, 42, 0.16)); transition: transform 0.25s ease; }
  .kt-brand-logo:hover .kt-icon { transform: scale(1.05); }
  .kt-text-wrap { display: flex; flex-direction: column; }
  .kt-title { font-size: 28px; font-weight: 800; line-height: 1.05; letter-spacing: -0.5px; }
  .kt-navy { color: #131F33; }
  .kt-orange { color: #FF7F0A; }
  .kt-slogan { font-size: 11px; font-weight: 400; color: #2D3748; margin-top: 3px; letter-spacing: 0.25px; }
</style>