/*
Theme Name: Koalisi Media Alternatif Native Theme
Theme URI: https://koalisimediaalternatif.id
Author: Tim Redaksi & Teknologi KOMA
Author URI: https://koalisimediaalternatif.id
Description: Tema Kustom WordPress Hybrid Dynamic untuk Koalisi Media Alternatif (KOMA) dengan integrasi ACF, CPT Taxonomies, Dynamic Customizer, dan kompatibilitas Elementor / Gutenberg.
Version: 1.0.0
Requires at least: 5.8
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: koma-native-theme
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, block-styles, full-width-template
*/

/* ------------------------------------------------------------------------- *
 *  01. DESIGN SYSTEM VARIABLES & RESET
 * ------------------------------------------------------------------------- */
:root {
  --ink: #1A1A1A;
  --white: #FFFFFF;
  --surface: #F5F5F3;
  --gray: #6B6B6B;
  --line: #E4E4E1;

  /* Identitas Warna Logo KOMA */
  --merah: #FF3700;   /* K - Advokasi */
  --hijau: #3FB919;   /* O - Siaran Pers / Aksi */
  --biru:  #4000FF;   /* M - Liputan */
  --ungu:  #9600B2;   /* A - Pelatihan */
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .serif {
  font-family: 'Lora', Georgia, serif;
  font-weight: 700;
  color: var(--ink);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ------------------------------------------------------------------------- *
 *  02. LOGO RESTRICTION & BRANDING (KOMA Mandatory)
 * ------------------------------------------------------------------------- */
.site-branding img,
.custom-logo,
.custom-logo-link img {
  max-width: 180px !important;
  width: auto;
  height: auto !important;
  max-height: 52px;
  object-fit: contain;
  display: block;
}

.logo-mark {
  font-family: 'Lora', serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.5px;
  color: var(--ink);
  border: 1.6px solid var(--ink);
  padding: 6px 14px;
  display: inline-block;
  text-transform: uppercase;
  transition: all 0.2s ease;
}

.logo-mark:hover {
  background: var(--ink);
  color: var(--white);
}

/* ------------------------------------------------------------------------- *
 *  03. UI COMPONENTS & BADGES
 * ------------------------------------------------------------------------- */
.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #2E8A12;
}

.tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--white);
  background: var(--ink);
  padding: 6px 14px;
  white-space: nowrap;
}

.tag.alt, .tag.tag-advokasi       { background: var(--merah); color: var(--ink); }
.tag.hijau, .tag.tag-siaran-pers  { background: var(--hijau); color: var(--ink); }
.tag.biru, .tag.tag-liputan       { background: var(--biru);  color: var(--white); }
.tag.ungu, .tag.tag-pelatihan     { background: var(--ungu);  color: var(--white); }
.tag.outline                      { background: transparent; border: 1.4px solid var(--ink); color: var(--ink); }
.tag.outline.active               { background: var(--ink); color: var(--white); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 14px 28px;
  background: var(--hijau);
  color: var(--ink);
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.btn:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

.btn.dark     { background: var(--ink); color: var(--white); }
.btn.outline  { background: transparent; border: 1.6px solid var(--ink); color: var(--ink); }
.btn.outline-w{ background: transparent; border: 1.6px solid var(--white); color: var(--white); }

/* ------------------------------------------------------------------------- *
 *  04. EDITORIAL DUOTONE PHOTO EFFECTS
 * ------------------------------------------------------------------------- */
.photo {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, #241f38 0%, #1A1A1A 55%, #2b0e33 100%);
  display: flex;
  align-items: flex-end;
}

.photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,0.045) 0px, rgba(255,255,255,0.045) 2px, transparent 2px, transparent 26px);
  pointer-events: none;
}

.photo .cap {
  position: absolute;
  left: 18px;
  bottom: 16px;
  color: rgba(255,255,255,0.85);
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 600;
  z-index: 2;
}

.photo.brick      { background: linear-gradient(155deg, #7a1a00 0%, #FF3700 60%, #ff7a49 100%); }
.photo.hijau-tone { background: linear-gradient(155deg, #163d09 0%, #3FB919 60%, #8fdc6b 100%); }
.photo.biru-tone  { background: linear-gradient(155deg, #14004d 0%, #4000FF 60%, #8f70ff 100%); }
.photo.ungu-tone  { background: linear-gradient(155deg, #33003d 0%, #9600B2 60%, #d17ee2 100%); }
.photo.paper-tone { background: linear-gradient(155deg, #e2e0da 0%, #c6c2b8 100%); }
.photo.paper-tone .cap { color: rgba(20,20,20,0.65); }

/* ------------------------------------------------------------------------- *
 *  05. LAYOUT & ELEMENTOR BUILDER COMPATIBILITY
 * ------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 768px) {
  .container {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (min-width: 1024px) {
  .container {
    padding-left: 60px;
    padding-right: 60px;
  }
}

.entry-content {
  line-height: 1.8;
  font-size: 16px;
  color: var(--ink);
}

.entry-content p {
  margin-bottom: 1.5rem;
}

.entry-content h2, .entry-content h3 {
  margin-top: 2rem;
  margin-bottom: 1rem;
}