/*
Theme Name: Mulia Tamita
Theme URI: https://muliatamita.co.id
Author: Mulia Tamita
Description: Tema WordPress premium untuk PT Mulia Tamita Mandiri — konsultan Studi Kelayakan (Feasibility Study) & Rencana Bisnis (Business Plan). Dirancang dengan gaya "dokumen laporan kelayakan": eyebrow berupa kode lampiran, kartu sektor bergaya dossier, dan palet warna hijau-abu slate yang diselaraskan dengan logo resmi perusahaan.
Version: 1.2.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
Author URI: https://muliatamita.co.id
Text Domain: mulia-tamita
*/

/* ==========================================================================
   0. DESIGN TOKENS
   ========================================================================== */
:root{
  /* Palette — diselaraskan dengan warna logo: hijau lime (ribbon) & abu-abu tua kebiruan (slate) */
  --mtm-paper:        #F1F1EC;
  --mtm-paper-raised: #F9F9F5;
  --mtm-ink:           #1E2727;
  --mtm-ink-soft:       #4B5657;
  --mtm-primary:        #414B4C;
  --mtm-primary-dark:   #262E2F;
  --mtm-primary-tint:   #E3E7E3;
  --mtm-brass:          #7DAD2A;
  --mtm-brass-light:    #9BCB4A;
  --mtm-stamp:          #9BCB4A;
  --mtm-error:          #B3382C;
  --mtm-line:           #CBCEC4;
  --mtm-line-strong:    #9CA495;

  --mtm-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --mtm-font-body: 'IBM Plex Sans', -apple-system, Segoe UI, Roboto, sans-serif;
  --mtm-font-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;

  --mtm-radius: 2px;
  --mtm-container: 1200px;
  --mtm-shadow: 0 18px 40px -22px rgba(13, 30, 26, 0.35);
}

/* ==========================================================================
   1. RESET & BASE
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: hidden; }
body{
  margin:0;
  background: var(--mtm-paper);
  color: var(--mtm-ink);
  font-family: var(--mtm-font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style: none; }
h1,h2,h3,h4{ font-family: var(--mtm-font-display); color: var(--mtm-primary-dark); margin: 0 0 .5em; font-weight: 600; line-height: 1.15; }
p{ margin: 0 0 1em; }
button{ font-family: inherit; cursor: pointer; }
:focus-visible{ outline: 2px solid var(--mtm-brass); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce){ *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }

.mtm-container{ max-width: var(--mtm-container); margin: 0 auto; padding: 0 28px; }
@media (max-width: 400px){ .mtm-container{ padding: 0 18px; } }
.mtm-section{ padding: 96px 0; position: relative; }
.mtm-section + .mtm-section{ border-top: 1px solid var(--mtm-line); }
@media (max-width: 782px){ .mtm-section{ padding: 64px 0; } }

/* Eyebrow — meniru kode lampiran pada dokumen resmi */
.mtm-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--mtm-font-mono);
  font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--mtm-brass); font-weight: 500; margin-bottom: 18px;
}
.mtm-eyebrow::before{ content:""; width: 22px; height: 1px; background: var(--mtm-brass); display:inline-block; }

.mtm-kicker-title{ font-size: clamp(28px, 3.2vw, 42px); max-width: 720px; }
.mtm-lead{ color: var(--mtm-ink-soft); font-size: 17.5px; max-width: 640px; }

.mtm-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 14px 26px; border-radius: var(--mtm-radius);
  font-family: var(--mtm-font-mono); font-size: 13.5px; letter-spacing:.05em; text-transform:uppercase;
  border: 1px solid transparent; transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.mtm-btn-primary{ background: var(--mtm-brass); color: var(--mtm-primary-dark); }
.mtm-btn-primary:hover{ background: var(--mtm-brass-light); transform: translateY(-2px); }
.mtm-btn-outline{ border-color: rgba(255,255,255,.35); color: inherit; }
.mtm-btn-outline:hover{ border-color: var(--mtm-brass); color: var(--mtm-brass); transform: translateY(-2px); }
.mtm-btn-dark{ background: var(--mtm-primary); color:#fff; }
.mtm-btn-dark:hover{ background: var(--mtm-primary-dark); transform: translateY(-2px); }

/* ==========================================================================
   2. HEADER
   ========================================================================== */
.mtm-topbar{
  background: var(--mtm-primary-dark); color: #D9DED6;
  font-family: var(--mtm-font-mono); font-size: 12.5px;
}
.mtm-topbar .mtm-container{ display:flex; justify-content:space-between; align-items:center; padding-top:8px; padding-bottom:8px; flex-wrap:wrap; gap:8px;}
.mtm-topbar a:hover{ color: var(--mtm-brass-light); }
.mtm-topbar-links{ display:flex; gap:20px; align-items:center; }
.mtm-lang-switcher{ display:flex; gap:8px; align-items:center; padding-left:14px; border-left:1px solid rgba(255,255,255,.2); }
.mtm-lang-link{ font-family: var(--mtm-font-mono); font-size:11.5px; letter-spacing:.05em; opacity:.75; }
.mtm-lang-link:hover, .mtm-lang-link.is-current{ opacity:1; color: var(--mtm-brass-light); }
@media (max-width: 680px){
  .mtm-topbar-hours{ display:none; } /* sembunyikan jam operasional di mobile agar topbar tidak makan tempat */
  .mtm-lang-switcher{ border-left:none; padding-left:0; }
  .mtm-topbar-links{ gap:14px; }
  .mtm-topbar{ font-size: 11.5px; }
}
@media (max-width: 360px){
  .mtm-topbar-links a:nth-child(2){ display:none; } /* di layar sangat sempit, sisakan nomor telepon saja */
}

.mtm-header{
  background: var(--mtm-paper-raised);
  border-bottom: 1px solid var(--mtm-line);
  position: sticky; top:0; z-index: 100;
}
.mtm-header-inner{ display:flex; align-items:center; justify-content:space-between; padding: 16px 0; gap: 24px; }
.mtm-logo{ display:flex; align-items:center; gap:12px; font-family: var(--mtm-font-display); }
.mtm-logo-text-wrap{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.mtm-logo-img{ height:46px; width:auto; display:block; }
.mtm-logo .custom-logo-link{ display:flex; align-items:center; }
.mtm-logo .custom-logo-link img, .mtm-logo img.custom-logo{ height:46px; width:auto; max-width:220px; object-fit:contain; display:block; }
.mtm-logo-mark{
  width: 42px; height:42px; border-radius: 50%;
  background: var(--mtm-primary); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--mtm-font-mono); font-weight:600; font-size:14px; letter-spacing: -0.02em;
  flex: none;
}
.mtm-logo-text{ line-height:1.15; }
.mtm-logo-text strong{ display:block; font-size: 18px; color: var(--mtm-primary-dark); font-weight:700; }
.mtm-logo-text span{ display:block; font-family: var(--mtm-font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mtm-ink-soft); }
@media (max-width: 480px){
  .mtm-header-inner{ gap:12px; }
  .mtm-logo{ gap:8px; min-width:0; }
  .mtm-logo-img{ height:38px; }
  .mtm-logo .custom-logo-link img, .mtm-logo img.custom-logo{ height:38px; max-width:150px; }
  .mtm-logo-text{ min-width:0; }
  .mtm-logo-text strong{ font-size:14.5px; line-height:1.25; white-space:normal; }
  .mtm-logo-text span{ display:none; } /* sembunyikan tagline di layar sangat sempit agar tidak berdesakan dengan tombol menu */
}

.mtm-nav-primary{ display:flex; align-items:center; gap: 32px; }
.mtm-nav-primary ul{ display:flex; gap: 28px; }
.mtm-nav-primary a{ font-size: 14.5px; font-weight:500; color: var(--mtm-ink); position:relative; padding: 4px 0; }
.mtm-nav-primary a::after{ content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background:var(--mtm-brass); transition: right .2s ease; }
.mtm-nav-primary a:hover::after, .mtm-nav-primary li.current-menu-item a::after{ right:0; }
.mtm-header-cta{ display:flex; align-items:center; gap:16px; }

.mtm-menu-toggle{ display:none; background:none; border:1px solid var(--mtm-line-strong); border-radius: var(--mtm-radius); width:44px; height:44px; align-items:center; justify-content:center; }
.mtm-menu-toggle span, .mtm-menu-toggle::before, .mtm-menu-toggle::after{ display:none; }

@media (max-width: 900px){
  .mtm-nav-primary{ position:fixed; inset:0 0 0 auto; width: min(320px, 84vw); background: var(--mtm-paper-raised); flex-direction:column; align-items:flex-start; padding: 90px 28px 28px; transform: translateX(100%); transition: transform .25s ease; box-shadow: var(--mtm-shadow); }
  .mtm-nav-primary.is-open{ transform: translateX(0); }
  .mtm-nav-primary ul{ flex-direction:column; gap:20px; width:100%; }
  .mtm-header-cta{ width:100%; margin-top:28px; padding-top:24px; border-top:1px solid var(--mtm-line); }
  .mtm-header-cta .mtm-btn{ width:100%; justify-content:center; }
  .mtm-menu-toggle{ display:flex; }
}

/* ==========================================================================
   3. HERO
   ========================================================================== */
.mtm-hero{
  background: var(--mtm-primary-dark);
  color: #EFEEE3;
  position: relative; overflow: hidden;
  padding: 100px 0 0;
}
.mtm-hero.has-photo{ background-size: cover; background-position: center; }
.mtm-hero.has-photo::after{
  content:""; position:absolute; inset:0; z-index:0;
  background: linear-gradient(180deg, rgba(38,46,47,.90) 0%, rgba(38,46,47,.96) 100%);
}
.mtm-hero::before{
  content:""; position:absolute; inset:0; opacity:.16; pointer-events:none; z-index:0;
  background-image:
    repeating-radial-gradient(circle at 20% 30%, transparent 0 40px, rgba(171,127,63,.5) 41px, transparent 42px),
    repeating-radial-gradient(circle at 85% 70%, transparent 0 60px, rgba(171,127,63,.35) 61px, transparent 62px);
}
.mtm-hero-inner{ position:relative; z-index:1; display:grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items:center; }
.mtm-hero-copy .mtm-eyebrow{ color: var(--mtm-brass-light); }
.mtm-hero-copy .mtm-eyebrow::before{ background: var(--mtm-brass-light); }
.mtm-hero h1{ color:#fff; font-size: clamp(34px, 4.6vw, 58px); max-width: 620px; }
.mtm-hero-lead{ color: #C7CFC5; font-size: 18px; max-width: 540px; margin-bottom: 32px; }
.mtm-hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom: 56px; }
.mtm-hero-stats{ display:flex; gap:40px; flex-wrap:wrap; border-top: 1px solid rgba(255,255,255,.15); padding-top: 26px; }
.mtm-hero-stat b{ display:block; font-family: var(--mtm-font-display); font-size: 30px; color: var(--mtm-brass-light); }
.mtm-hero-stat span{ font-family: var(--mtm-font-mono); font-size: 11.5px; letter-spacing:.08em; text-transform:uppercase; color:#AEB8A9; }

/* Dossier stack visual */
.mtm-dossier{ position:relative; height: 420px; }
.mtm-doc-card{
  position:absolute; width: 78%; padding: 26px 24px; background: var(--mtm-paper-raised);
  color: var(--mtm-ink); border-radius: var(--mtm-radius); box-shadow: var(--mtm-shadow);
  border-left: 5px solid var(--mtm-brass);
}
.mtm-doc-card .mtm-doc-code{ font-family: var(--mtm-font-mono); font-size: 11px; letter-spacing:.1em; color: var(--mtm-brass); text-transform:uppercase; }
.mtm-doc-card h4{ margin: 10px 0 6px; font-size: 19px; }
.mtm-doc-card p{ font-size: 13.5px; color: var(--mtm-ink-soft); margin:0; }
.mtm-doc-card--1{ top: 0; left: 0; transform: rotate(-4deg); z-index: 3; }
.mtm-doc-card--2{ top: 90px; left: 18%; transform: rotate(3deg); z-index: 2; opacity:.96; }
.mtm-doc-card--3{ top: 190px; left: 6%; transform: rotate(-1.5deg); z-index: 1; opacity:.92; }
.mtm-stamp-badge{
  position:absolute; right: 4%; bottom: 6%; width: 118px; height: 118px; border-radius: 50%;
  border: 2px dashed var(--mtm-stamp); display:flex; align-items:center; justify-content:center; text-align:center;
  transform: rotate(-12deg); color: var(--mtm-stamp); font-family: var(--mtm-font-mono);
  font-size: 11px; letter-spacing:.05em; line-height:1.3; padding: 10px; z-index:4;
  background: rgba(239,238,227,.06);
}
.mtm-stamp-badge b{ display:block; font-family: var(--mtm-font-display); font-size: 26px; color: var(--mtm-stamp); }

@media (max-width: 980px){
  .mtm-hero-inner{ grid-template-columns: 1fr; }
  .mtm-dossier{ height: 360px; margin-top: 20px; }
}
@media (max-width: 560px){
  .mtm-hero{ padding-top: 80px; }
  .mtm-hero-stats{ gap:24px; }
  .mtm-dossier{ height: 400px; }
  .mtm-doc-card{ padding: 18px 18px; width: 84%; }
  .mtm-doc-card h4{ font-size: 17px; }
  .mtm-doc-card--1{ top: 0; }
  .mtm-doc-card--2{ top: 100px; }
  .mtm-doc-card--3{ top: 200px; }
  .mtm-stamp-badge{ width: 92px; height: 92px; font-size: 9.5px; right: 2%; bottom: 0; }
  .mtm-stamp-badge b{ font-size: 21px; }
}

/* ==========================================================================
   4. ABOUT / EXECUTIVE SUMMARY
   ========================================================================== */
.mtm-about-photo{ margin: 32px 0 8px; border-radius: var(--mtm-radius); overflow:hidden; box-shadow: var(--mtm-shadow); aspect-ratio: 21/7; background: var(--mtm-primary-tint); }
.mtm-about-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.mtm-about-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items:start; }
.mtm-about-copy p{ color: var(--mtm-ink-soft); font-size: 16.5px; }
.mtm-vm-list{ display:flex; flex-direction:column; gap:22px; }
.mtm-vm-card{ background: var(--mtm-paper-raised); border: 1px solid var(--mtm-line); border-radius: var(--mtm-radius); padding: 24px 26px; }
.mtm-vm-card h3{ font-size: 18px; margin-bottom:10px; display:flex; align-items:center; gap:10px;}
.mtm-vm-card h3::before{ content:""; width:8px; height:8px; background: var(--mtm-brass); border-radius:50%; }
.mtm-vm-card ul{ display:flex; flex-direction:column; gap: 10px; }
.mtm-vm-card li{ position:relative; padding-left: 20px; font-size: 15px; color: var(--mtm-ink-soft); }
.mtm-vm-card li::before{ content:"—"; position:absolute; left:0; color: var(--mtm-brass); }
.mtm-vm-card p{ color: var(--mtm-ink-soft); font-size:15px; margin:0; }

@media (max-width: 900px){ .mtm-about-grid{ grid-template-columns: 1fr; gap: 36px; } .mtm-about-photo{ aspect-ratio: 16/9; } }

/* ==========================================================================
   5. SERVICES
   ========================================================================== */
.mtm-services-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 48px; }
.mtm-service-card{
  background: var(--mtm-paper-raised); border: 1px solid var(--mtm-line); border-radius: var(--mtm-radius);
  padding: 34px 28px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.mtm-service-card:hover{ transform: translateY(-6px); box-shadow: var(--mtm-shadow); border-color: var(--mtm-brass); }
.mtm-service-icon{ display:inline-flex; color: var(--mtm-brass); margin-bottom: 14px; }
.mtm-service-num{ font-family: var(--mtm-font-mono); color: var(--mtm-brass); font-size: 13px; letter-spacing:.08em; }
.mtm-service-card h3{ font-size: 21px; margin: 14px 0 12px; }
.mtm-service-card p{ color: var(--mtm-ink-soft); font-size: 15px; margin:0; }
@media (max-width: 900px){ .mtm-services-grid{ grid-template-columns: 1fr; } }

/* ==========================================================================
   6. PORTFOLIO — "LAMPIRAN"
   ========================================================================== */
.mtm-tabs{ display:flex; gap: 10px; flex-wrap:wrap; margin: 44px 0 32px; border-bottom: 1px solid var(--mtm-line); padding-bottom: 0;}
.mtm-tab-btn{
  background:none; border:none; padding: 12px 18px; font-family: var(--mtm-font-mono); font-size: 12.5px;
  letter-spacing:.06em; text-transform:uppercase; color: var(--mtm-ink-soft); border-bottom: 2px solid transparent; margin-bottom:-1px;
}
.mtm-tab-btn.is-active, .mtm-tab-btn:hover{ color: var(--mtm-primary); border-color: var(--mtm-brass); }
.mtm-tab-panel{ display:none; }
.mtm-tab-panel.is-active{ display:block; animation: mtmFade .35s ease; }
@keyframes mtmFade{ from{ opacity:0; transform: translateY(6px);} to{ opacity:1; transform:none; } }

.mtm-folder{ display:grid; grid-template-columns: .8fr 1.2fr; gap: 40px; background: var(--mtm-paper-raised); border:1px solid var(--mtm-line); border-radius: var(--mtm-radius); padding: 36px; }
.mtm-folder-icon{ display:inline-flex; color: var(--mtm-brass); margin-bottom: 10px; }
.mtm-folder-head .mtm-doc-code{ font-family: var(--mtm-font-mono); font-size:12px; color: var(--mtm-brass); text-transform:uppercase; letter-spacing:.1em; }
.mtm-folder-head h3{ font-size: 26px; margin: 10px 0 12px; }
.mtm-folder-head p{ color: var(--mtm-ink-soft); font-size: 15px; }
.mtm-chip-list{ display:flex; flex-wrap:wrap; gap: 10px; align-content:flex-start; }
.mtm-chip{ font-size: 13.5px; padding: 9px 16px; border: 1px solid var(--mtm-line-strong); border-radius: 40px; color: var(--mtm-ink); background: var(--mtm-paper); }
@media (max-width: 860px){ .mtm-folder{ grid-template-columns: 1fr; padding: 26px 22px; } }

/* ==========================================================================
   7. WHY US
   ========================================================================== */
.mtm-why-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 24px; margin-top:44px; }
.mtm-why-card{ padding: 26px 4px; border-top: 2px solid var(--mtm-brass); }
.mtm-why-icon{ display:inline-flex; color: var(--mtm-brass); margin-bottom: 10px; }
.mtm-why-card h4{ font-size: 17px; margin: 10px 0 8px; }
.mtm-why-card p{ color: var(--mtm-ink-soft); font-size: 14.5px; margin:0; }
.mtm-why-index{ font-family: var(--mtm-font-mono); color: var(--mtm-ink-soft); font-size:12px; }
@media (max-width: 900px){ .mtm-why-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .mtm-why-grid{ grid-template-columns: 1fr; } }

/* ==========================================================================
   8. MEDIA — KABAR HIJAU
   ========================================================================== */
.mtm-media-band{ background: var(--mtm-primary); color: #fff; position: relative; }
.mtm-media-band.has-photo{ background-size: cover; background-position: center; }
.mtm-media-band.has-photo::before{ content:""; position:absolute; inset:0; z-index:0; background: rgba(38,46,47,.82); }
.mtm-media-inner{ position:relative; z-index:1; display:grid; grid-template-columns: 1fr auto; gap: 40px; align-items:center; }
.mtm-media-band .mtm-eyebrow{ color: var(--mtm-brass-light); }
.mtm-media-band .mtm-eyebrow::before{ background: var(--mtm-brass-light); }
.mtm-media-band h2{ color:#fff; font-size: clamp(24px,3vw,34px); max-width: 620px; }
.mtm-media-band p{ color: #C7CFC5; max-width: 560px; }
@media (max-width: 780px){ .mtm-media-inner{ grid-template-columns: 1fr; } }

/* ==========================================================================
   9. CONTACT / CTA
   ========================================================================== */
.mtm-contact-grid{ display:grid; grid-template-columns: 1fr 1.15fr; gap: 56px; }
.mtm-contact-info-list{ display:flex; flex-direction:column; gap: 22px; margin-top: 30px; }
.mtm-contact-info-item{ display:flex; gap: 14px; }
.mtm-contact-info-item .ico{ font-family: var(--mtm-font-mono); width:36px; height:36px; border-radius:50%; border:1px solid var(--mtm-line-strong); display:flex; align-items:center; justify-content:center; flex:none; font-size:14px; }
.mtm-contact-info-item strong{ display:block; font-size:14.5px; }
.mtm-contact-info-item span, .mtm-contact-info-item a{ color: var(--mtm-ink-soft); font-size:14.5px; }

.mtm-form{ background: var(--mtm-paper-raised); border:1px solid var(--mtm-line); border-radius: var(--mtm-radius); padding: 36px; }
.mtm-form-row{ display:grid; grid-template-columns:1fr 1fr; gap: 18px; }
.mtm-field{ margin-bottom: 18px; }
.mtm-field label{ display:block; font-family: var(--mtm-font-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color: var(--mtm-ink-soft); margin-bottom:8px; }
.mtm-field input, .mtm-field select, .mtm-field textarea{
  width:100%; padding: 12px 14px; border: 1px solid var(--mtm-line-strong); border-radius: var(--mtm-radius);
  background: var(--mtm-paper); font-family: var(--mtm-font-body); font-size: 16px; color: var(--mtm-ink);
}
.mtm-field input:focus, .mtm-field select:focus, .mtm-field textarea:focus{ border-color: var(--mtm-brass); }
.mtm-hp{ position:absolute; left:-9999px; }
.mtm-form-msg{ margin-bottom:16px; padding: 12px 16px; border-radius: var(--mtm-radius); font-size: 14px; }
.mtm-form-msg.success{ background:#E3E9E2; color: var(--mtm-primary-dark); border:1px solid var(--mtm-primary); }
.mtm-form-msg.error{ background:#F5E2DC; color: var(--mtm-error); border:1px solid var(--mtm-error); }
@media (max-width: 900px){ .mtm-contact-grid{ grid-template-columns: 1fr; } .mtm-form-row{ grid-template-columns: 1fr; } }
@media (max-width: 480px){ .mtm-form{ padding: 24px 20px; } }

/* ==========================================================================
   10. FOOTER
   ========================================================================== */
.mtm-footer{ background: var(--mtm-primary-dark); color: #C7CFC5; padding-top: 72px; }
.mtm-footer-grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; }
.mtm-footer h4{ color:#fff; font-size:15px; font-family: var(--mtm-font-mono); text-transform:uppercase; letter-spacing:.06em; margin-bottom:18px; }
.mtm-footer-about p{ font-size:14px; max-width: 320px; }
.mtm-footer ul{ display:flex; flex-direction:column; gap:10px; }
.mtm-footer a{ font-size:14px; }
.mtm-footer a:hover{ color: var(--mtm-brass-light); }
.mtm-footer-social{ display:flex; gap:12px; margin-top:18px; }
.mtm-footer-social a{ width:36px; height:36px; border:1px solid rgba(255,255,255,.2); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family: var(--mtm-font-mono); font-size:12px; }
.mtm-footer-social a:hover{ border-color: var(--mtm-brass-light); }
.mtm-footer-bottom{ border-top: 1px solid rgba(255,255,255,.12); padding: 22px 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size: 13px; }
.mtm-footer-legal{ display:flex; gap:18px; }
.mtm-footer-legal a{ opacity:.85; }
.mtm-footer-legal a:hover{ opacity:1; color: var(--mtm-brass-light); }
@media (max-width: 900px){ .mtm-footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .mtm-footer-grid{ grid-template-columns: 1fr; } }

/* ==========================================================================
   11. GENERIC PAGE / SINGLE / 404
   ========================================================================== */
.mtm-page-header{ background: var(--mtm-primary-dark); color:#fff; padding: 70px 0; }
.mtm-page-header h1{ color:#fff; margin:0; }
.mtm-breadcrumb{ font-family: var(--mtm-font-mono); font-size:12px; color:#AEB8A9; margin-bottom:14px; text-transform:uppercase; letter-spacing:.06em; }
.mtm-breadcrumb a{ color:inherit; opacity:.8; }
.mtm-breadcrumb a:hover{ opacity:1; text-decoration:underline; }
.mtm-breadcrumb .sep{ margin:0 4px; opacity:.5; }
.mtm-breadcrumb span[aria-current]{ color:inherit; }
.mtm-entry-content{ padding: 72px 0; max-width: 820px; margin:0 auto; }

/* Studi Kasus: statistik & blok Tantangan/Pendekatan/Hasil */
.mtm-case-stats{ display:flex; gap:32px; flex-wrap:wrap; margin: 40px 0; padding: 28px 0; border-top:1px solid var(--mtm-line); border-bottom:1px solid var(--mtm-line); }
.mtm-case-stat{ min-width:120px; }
.mtm-case-stat b{ display:block; font-family: var(--mtm-font-display); font-size: 34px; color: var(--mtm-primary-dark); }
.mtm-case-stat span{ font-family: var(--mtm-font-mono); font-size: 11.5px; text-transform:uppercase; letter-spacing:.06em; color: var(--mtm-ink-soft); }
.mtm-case-block{ margin: 28px 0; padding: 22px 24px; background: var(--mtm-paper-raised); border-left: 3px solid var(--mtm-brass); border-radius: var(--mtm-radius); }
.mtm-case-block .mtm-doc-code{ font-family: var(--mtm-font-mono); font-size:11.5px; color: var(--mtm-brass); text-transform:uppercase; letter-spacing:.08em; display:block; margin-bottom:8px; }
.mtm-case-block p{ margin:0; color: var(--mtm-ink); }
.mtm-case-block--result{ border-left-color: var(--mtm-primary); }
.mtm-case-block--result .mtm-doc-code{ color: var(--mtm-primary); }
@media (max-width: 560px){ .mtm-case-stats{ gap:20px; } }
.mtm-entry-content img{ border-radius: var(--mtm-radius); }
.mtm-entry-content table{ display:block; width:100%; max-width:100%; overflow-x:auto; border-collapse:collapse; -webkit-overflow-scrolling:touch; }
.mtm-entry-content iframe, .mtm-entry-content video, .mtm-entry-content embed{ max-width:100%; }
.mtm-entry-content pre{ overflow-x:auto; max-width:100%; }
.mtm-entry-content h2{ margin-top: 1.4em; }
.mtm-404{ padding: 120px 0; text-align:center; }
.mtm-404 .mtm-doc-code{ font-family: var(--mtm-font-mono); color: var(--mtm-brass); }

/* Portfolio archive/single */
.mtm-portfolio-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; margin-top: 40px; }
.mtm-portfolio-card{ background: var(--mtm-paper-raised); border:1px solid var(--mtm-line); border-radius: var(--mtm-radius); overflow:hidden; }
.mtm-portfolio-card .thumb{ aspect-ratio: 4/3; background: var(--mtm-primary-tint); overflow:hidden; }
.mtm-portfolio-card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.mtm-portfolio-card .body{ padding: 20px; }
.mtm-portfolio-card .mtm-doc-code{ font-family: var(--mtm-font-mono); font-size:11px; color: var(--mtm-brass); text-transform:uppercase; }
.mtm-portfolio-card h3{ font-size:17px; margin: 8px 0; }
@media (max-width: 900px){ .mtm-portfolio-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .mtm-portfolio-grid{ grid-template-columns: 1fr; } }

/* ==========================================================================
   12. BLOG / ARTIKEL LAYOUT
   ========================================================================== */
.mtm-blog-layout{ display:grid; grid-template-columns: 1fr 320px; gap: 56px; padding: 64px 0 96px; align-items:start; }
.mtm-blog-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 24px; }
.mtm-pagination{ margin-top: 40px; display:flex; gap:10px; font-family: var(--mtm-font-mono); font-size:13px; }
.mtm-pagination .page-numbers{ padding:8px 14px; border:1px solid var(--mtm-line-strong); border-radius: var(--mtm-radius); }
.mtm-pagination .page-numbers.current{ background: var(--mtm-primary); color:#fff; border-color: var(--mtm-primary); }
@media (max-width: 980px){ .mtm-blog-layout{ grid-template-columns: 1fr; } .mtm-blog-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .mtm-blog-grid{ grid-template-columns: 1fr; } }

/* Sidebar */
.mtm-sidebar{ display:flex; flex-direction:column; gap:28px; position:sticky; top:100px; }
.mtm-widget{ background: var(--mtm-paper-raised); border:1px solid var(--mtm-line); border-radius: var(--mtm-radius); padding: 22px; }
.mtm-widget h4{ font-family: var(--mtm-font-mono); font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; color: var(--mtm-ink-soft); margin-bottom:14px; }
.mtm-widget-categories ul{ display:flex; flex-direction:column; gap:8px; }
.mtm-widget-categories a{ display:flex; justify-content:space-between; font-size:14.5px; color: var(--mtm-ink); }
.mtm-widget-categories a:hover{ color: var(--mtm-brass); }
.mtm-recent-list{ display:flex; flex-direction:column; gap:14px; }
.mtm-recent-list a{ display:flex; gap:12px; align-items:flex-start; }
.mtm-recent-list .thumb{ width:56px; height:56px; border-radius: var(--mtm-radius); overflow:hidden; background: var(--mtm-primary-tint); flex:none; }
.mtm-recent-list .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.mtm-recent-list strong{ display:block; font-size:13.5px; line-height:1.3; }
.mtm-recent-list em{ font-family: var(--mtm-font-mono); font-style:normal; font-size:11px; color: var(--mtm-ink-soft); }
.mtm-widget-cta p{ font-size:13.5px; color: var(--mtm-ink-soft); }

.mtm-search-form{ display:flex; border:1px solid var(--mtm-line-strong); border-radius: var(--mtm-radius); overflow:hidden; }
.mtm-search-form input{ flex:1; border:none; padding:11px 14px; font-family: var(--mtm-font-body); background: var(--mtm-paper); }
.mtm-search-form button{ border:none; background: var(--mtm-primary); color:#fff; padding: 0 16px; }

/* Article extras */
.mtm-entry-content--article{ max-width: none; padding: 0; }
.mtm-blog-main .mtm-entry-content--article{ padding: 0 0 40px; }
.mtm-page-links{ margin-top:24px; font-family: var(--mtm-font-mono); font-size:13px; }

.mtm-author-box{ display:flex; gap:18px; align-items:flex-start; background: var(--mtm-paper-raised); border:1px solid var(--mtm-line); border-radius: var(--mtm-radius); padding: 24px; margin: 8px 0 40px; }
.mtm-author-box img{ border-radius:50%; flex:none; }
.mtm-author-box h4{ margin: 2px 0 8px; font-size:17px; }
.mtm-author-box p{ font-size: 14px; color: var(--mtm-ink-soft); margin:0; }

.mtm-post-nav{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; border-top:1px solid var(--mtm-line); border-bottom:1px solid var(--mtm-line); padding: 24px 0; margin-bottom: 48px; }
.mtm-post-nav-item--next{ text-align:right; }
.mtm-post-nav-item a{ display:block; }
.mtm-post-nav-item strong{ display:block; margin-top:6px; font-size:15px; }
@media (max-width: 560px){ .mtm-post-nav{ grid-template-columns: 1fr; } .mtm-post-nav-item--next{ text-align:left; } }

.mtm-related-posts{ margin-bottom: 48px; }
.mtm-related-posts h3{ font-size:19px; margin-bottom: 20px; }

/* Map */
.mtm-map-wrap iframe{ width:100%; }
.mtm-map-frame{ width:100%; border-radius: var(--mtm-radius); overflow:hidden; border:1px solid var(--mtm-line); box-shadow: var(--mtm-shadow); }
.mtm-map-frame iframe{ width:100%; height:380px; border:0; display:block; }

/* ==========================================================================
   13. HALAMAN TENTANG KAMI
   ========================================================================== */
.mtm-stat-bar{ display:flex; gap:44px; padding: 28px 0; border-top:1px solid var(--mtm-line); border-bottom:1px solid var(--mtm-line); margin: 28px 0 6px; }
.mtm-stat-bar div b{ display:block; font-family: var(--mtm-font-display); font-size: 32px; color: var(--mtm-primary-dark); }
.mtm-stat-bar div span{ font-family: var(--mtm-font-mono); font-size: 11px; text-transform:uppercase; letter-spacing:.08em; color: var(--mtm-ink-soft); }

.mtm-process-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 22px; margin-top: 44px; }
.mtm-process-step{ background: var(--mtm-paper-raised); border:1px solid var(--mtm-line); border-radius: var(--mtm-radius); padding: 28px 24px; position:relative; }
.mtm-process-step .num{ font-family: var(--mtm-font-mono); color: var(--mtm-brass); font-size: 13px; letter-spacing:.05em; }
.mtm-process-step h4{ font-size: 16.5px; margin: 14px 0 8px; }
.mtm-process-step p{ font-size: 14px; color: var(--mtm-ink-soft); margin:0; }
@media (max-width: 900px){ .mtm-process-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .mtm-process-grid{ grid-template-columns: 1fr; } .mtm-stat-bar{ gap:28px; flex-wrap:wrap; } }

/* ==========================================================================
   14. TOMBOL WHATSAPP MENGAMBANG
   ========================================================================== */
.mtm-wa-float{
  position: fixed; right: 24px; bottom: 24px; z-index: 200;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25D366; color: #fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 26px -8px rgba(19, 43, 34, 0.55);
  transition: transform .18s ease, box-shadow .18s ease, bottom .2s ease;
}
.mtm-wa-float:hover{ transform: translateY(-3px) scale(1.04); box-shadow: 0 14px 30px -8px rgba(19, 43, 34, 0.6); }
.mtm-wa-float::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  box-shadow: 0 0 0 0 rgba(37,211,102,.55);
  animation: mtmWaPulse 2.4s ease-out infinite;
}
@keyframes mtmWaPulse{
  0%{ box-shadow: 0 0 0 0 rgba(37,211,102,.55); }
  70%{ box-shadow: 0 0 0 14px rgba(37,211,102,0); }
  100%{ box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
@media (max-width: 560px){ .mtm-wa-float{ right:16px; bottom:16px; width:52px; height:52px; } }
@media (prefers-reduced-motion: reduce){ .mtm-wa-float::before{ animation:none; } }
body.mtm-has-cookie-notice .mtm-wa-float{ bottom: 96px; }
@media (max-width: 560px){ body.mtm-has-cookie-notice .mtm-wa-float{ bottom: 128px; } }

/* ==========================================================================
   15. HALAMAN TIM KAMI
   ========================================================================== */
.mtm-team-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 24px; margin-top: 40px; }
.mtm-team-card{ background: var(--mtm-paper-raised); border:1px solid var(--mtm-line); border-radius: var(--mtm-radius); padding: 26px 20px; text-align:center; }
.mtm-team-card .photo{ width:84px; height:84px; border-radius:50%; overflow:hidden; margin:0 auto 16px; background: var(--mtm-primary-tint); display:flex; align-items:center; justify-content:center; }
.mtm-team-card .photo img{ width:100%; height:100%; object-fit:cover; }
.mtm-team-card .initial{ font-family: var(--mtm-font-display); font-size: 26px; color: var(--mtm-primary-dark); }
.mtm-team-card h3{ font-size:16.5px; margin: 0 0 4px; }
.mtm-team-card .role{ display:block; font-family: var(--mtm-font-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color: var(--mtm-brass); margin-bottom:10px; }
.mtm-team-card p{ font-size:13.5px; color: var(--mtm-ink-soft); margin:0; }
.mtm-team-card .social{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; margin-top:14px; border:1px solid var(--mtm-line-strong); border-radius:50%; font-family: var(--mtm-font-mono); font-size:12px; text-transform:uppercase; color: var(--mtm-ink-soft); }
.mtm-team-card .social:hover{ border-color: var(--mtm-brass); color: var(--mtm-brass); }
.mtm-team-card--placeholder{ opacity:.75; border-style:dashed; }
@media (max-width: 900px){ .mtm-team-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .mtm-team-grid{ grid-template-columns: 1fr; } }

/* Skip link */
.skip-link{ position:absolute; left:-9999px; top:auto; background:var(--mtm-primary); color:#fff; padding:12px 18px; z-index:9999; }
.skip-link:focus{ left: 12px; top: 12px; }

/* ==========================================================================
   16. NOTIFIKASI COOKIE
   ========================================================================== */
.mtm-cookie-notice{
  position: fixed; left:0; right:0; bottom:0; z-index: 300;
  background: var(--mtm-primary-dark); color: #EFEEE3;
  border-top: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 -12px 30px -14px rgba(0,0,0,.4);
}
.mtm-cookie-notice[hidden]{ display:none; }
.mtm-cookie-notice-inner{
  max-width: var(--mtm-container); margin:0 auto; padding: 18px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.mtm-cookie-notice-inner p{ margin:0; font-size:13.5px; color:#C7CFC5; max-width:640px; }
.mtm-cookie-notice-inner p a{ color: var(--mtm-brass-light); text-decoration:underline; text-underline-offset:2px; margin-left:4px; }
.mtm-cookie-notice-inner .mtm-btn{ flex:none; }
@media (max-width: 560px){ .mtm-cookie-notice-inner{ padding:16px 20px; } }

/* ==========================================================================
   17. TOMBOL KEMBALI KE ATAS
   ========================================================================== */
.mtm-back-to-top{
  position: fixed; left: 24px; bottom: 24px; z-index: 200;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--mtm-line-strong);
  background: var(--mtm-paper-raised); color: var(--mtm-primary-dark);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 24px -10px rgba(19, 43, 34, 0.35);
  transition: transform .18s ease, box-shadow .18s ease, opacity .2s ease, bottom .2s ease;
}
.mtm-back-to-top[hidden]{ display:none; }
.mtm-back-to-top:hover{ transform: translateY(-3px); border-color: var(--mtm-brass); color: var(--mtm-brass); }
@media (max-width: 560px){ .mtm-back-to-top{ left:16px; bottom:16px; width:42px; height:42px; } }
body.mtm-has-cookie-notice .mtm-back-to-top{ bottom: 96px; }
@media (max-width: 560px){ body.mtm-has-cookie-notice .mtm-back-to-top{ bottom: 128px; } }