/*
Theme Name: Golant Law Firm
Theme URI: https://example.com/golant-law-firm
Author: Custom Build
Author URI: https://example.com
Description: Tema WordPress cepat, teroptimasi SEO, dan siap Elementor untuk Golant Law Firm. Bahasa desain "docket" ala berkas perkara, markup semantik, CSS ringan tanpa framework, dan seluruh teks dalam Bahasa Indonesia.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: golant
Tags: elementor, custom-colors, custom-menu, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks, one-column, right-sidebar, footer-widgets

Golant Law Firm is a purpose-built theme for law firm websites. It ships with
custom post types for Practice Areas, Attorneys, and Case Results, JSON-LD
legal-service structured data, and a lean asset footprint tuned for
Core Web Vitals.
*/

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root{
  /* Palette */
  --color-ink:        #14213D;   /* primary dark / ink navy */
  --color-ink-2:       #1D2E52;  /* lighter navy for panels */
  --color-paper:       #F7F4EC;  /* paper ivory */
  --color-paper-2:     #EFEAD9;  /* deeper ivory for cards */
  --color-brass:       #B08D57;  /* brass gold accent */
  --color-brass-light: #D9C39A;
  --color-burgundy:    #6E1E2C;  /* CTA / emphasis */
  --color-burgundy-dark:#531621;
  --color-slate:       #5B6472;  /* secondary text on light */
  --color-cream-text:  #EDEAE0;  /* text on ink */
  --color-line:        #D8D0BC;  /* hairline on paper */
  --color-line-dark:   rgba(237,234,224,0.18);

  /* Type — clear, plain sans-serif throughout for maximum legibility;
     mono reserved for docket/case numbers only. */
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --step-1:  clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.4rem + 0.9vw, 2.1rem);
  --step-3:  clamp(2.1rem, 1.7rem + 1.8vw, 3.1rem);
  --step-4:  clamp(2.6rem, 2rem + 2.8vw, 4.2rem);

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --space-2xl: 8rem;

  --container: 1180px;
  --radius: 2px;
  --ease: cubic-bezier(.4,0,.2,1);
}

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:1.65;
  color:var(--color-ink);
  background:var(--color-paper);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5,h6{ font-family:var(--font-display); line-height:1.15; margin:0 0 0.5em; font-weight:600; letter-spacing:-0.01em; }
h1{ font-size:var(--step-4); }
h2{ font-size:var(--step-3); }
h3{ font-size:var(--step-2); }
h4{ font-size:var(--step-1); }
p{ margin:0 0 1.1em; }
button{ font-family:inherit; cursor:pointer; }
:focus-visible{ outline:3px solid var(--color-brass); outline-offset:3px; }
.screen-reader-text{ position:absolute !important; width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px); }
.skip-link{ position:absolute; left:-999px; top:0; background:var(--color-ink); color:#fff; padding:0.75em 1.25em; z-index:9999; }
.skip-link:focus{ left:0; }

.container{ max-width:var(--container); margin-inline:auto; padding-inline:1.25rem; }
.u-mono{ font-family:var(--font-mono); letter-spacing:0.02em; }

/* Docket eyebrow — the signature motif: legal citation-style labels used
   as section markers instead of generic numbering. */
.docket{
  display:inline-flex; align-items:center; gap:0.6em;
  font-family:var(--font-mono); font-size:var(--step--1);
  letter-spacing:0.08em; text-transform:uppercase;
  color:var(--color-brass);
  margin-bottom:0.9em;
}
.on-ink .docket{ color:var(--color-brass-light); }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:0.6em;
  font-family:var(--font-body); font-weight:600; font-size:var(--step--1);
  letter-spacing:0.03em; text-transform:uppercase;
  padding:0.95em 1.7em;
  border:1px solid transparent;
  border-radius:var(--radius);
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.btn-primary{ background:var(--color-burgundy); color:#fff; }
.btn-primary:hover{ background:var(--color-burgundy-dark); transform:translateY(-1px); }
.btn-outline{ background:transparent; border-color:var(--color-line-dark); color:var(--color-cream-text); }
.btn-outline:hover{ border-color:var(--color-brass); color:var(--color-brass-light); }
.btn-ghost{ background:transparent; color:var(--color-ink); border-color:var(--color-ink); }
.btn-ghost:hover{ background:var(--color-ink); color:var(--color-paper); }

/* ==========================================================================
   3. SITE HEADER
   ========================================================================== */
.site-header{
  background:var(--color-ink);
  color:var(--color-cream-text);
  position:sticky; top:0; z-index:500;
  border-bottom:1px solid var(--color-line-dark);
}
.site-header-inner{ display:flex; align-items:center; justify-content:space-between; padding-block:1.1rem; gap:1.5rem; }

/* Breadcrumb strip — thin bar between the sticky nav and page content,
   shown on every page except the front page. */
.breadcrumbs{ background:var(--color-paper); border-bottom:1px solid var(--color-line); }
.breadcrumbs .container{ padding-block:0.7rem; }
.breadcrumbs ol{ display:flex; flex-wrap:wrap; align-items:center; font-family:var(--font-mono); font-size:0.78rem; color:var(--color-slate); }
.breadcrumbs li{ display:flex; align-items:center; }
.breadcrumbs a{ color:var(--color-slate); }
.breadcrumbs a:hover{ color:var(--color-burgundy); }
.breadcrumbs .sep{ margin:0 0.55em; opacity:0.5; }
.breadcrumbs .current{ color:var(--color-ink); }

.site-branding{ display:flex; flex-direction:column; line-height:1.1; min-width:0; }
.site-title{ font-family:var(--font-display); font-size:1.4rem; font-weight:600; color:#fff; margin:0; }
.site-title a{ color:inherit; }

/* Custom logo — dikunci tingginya supaya responsif di semua ukuran layar,
   berapa pun dimensi asli file yang di-upload. Lebar mengikuti otomatis
   (width:auto) supaya rasio logo tidak gepeng/melar. */
.custom-logo-link{ display:inline-flex; flex-shrink:0; }
.custom-logo-link img.custom-logo{ height:46px; width:auto; max-width:100%; }
@media (max-width: 860px){
  .custom-logo-link img.custom-logo{ height:34px; }
}
.site-tagline{ font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--color-brass-light); margin-top:0.3em; }

.primary-menu{ display:flex; gap:2rem; align-items:center; }
.primary-menu a{ font-size:0.92rem; font-weight:500; letter-spacing:0.02em; padding:0.4em 0; border-bottom:1px solid transparent; transition:border-color .2s var(--ease), color .2s var(--ease); }
.primary-menu a:hover, .primary-menu .current-menu-item > a{ border-color:var(--color-brass); color:var(--color-brass-light); }
.primary-menu .sub-menu{ display:none; }

.header-cta{ display:flex; align-items:center; gap:1.25rem; }
.header-phone{ font-family:var(--font-mono); font-size:0.95rem; color:var(--color-brass-light); }

.menu-toggle{
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  width:42px; height:42px; flex-shrink:0;
  background:var(--color-ink-2); border:1px solid var(--color-line-dark);
  border-radius:8px; padding:0;
  transition:background .2s var(--ease);
}
.menu-toggle:hover{ background:#26385f; }
.menu-toggle-bar{ display:block; width:18px; height:2px; background:var(--color-cream-text); border-radius:2px; transition:transform .25s var(--ease), opacity .2s var(--ease); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(2){ opacity:0; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

@media (max-width: 860px){
  .primary-menu{ display:none; flex-direction:column; align-items:flex-start; gap:0; width:100%; }
  .primary-menu.is-open{ display:flex; padding-block:1rem; }
  .primary-menu li{ width:100%; border-top:1px solid var(--color-line-dark); }
  .primary-menu a{ display:block; padding:0.9em 0; }
  .site-header-inner{ flex-wrap:wrap; }
  .menu-toggle{ display:inline-flex; }
  .header-phone{ display:none; }

  /* Kunci urutan baris: logo + tombol CTA/toggle tetap di baris atas
     (order 1 & 2), menu dropdown dipaksa ke baris paling bawah (order 3)
     dan lebar penuh — supaya menu selalu muncul DI BAWAH tombol toggle,
     bukan di atasnya. */
  .site-branding{ order:1; }
  .header-cta{ order:2; }
  .primary-nav{ order:3; width:100%; }
}

/* ==========================================================================
   4. HERO
   ========================================================================== */
.hero{ background:var(--color-ink); color:var(--color-cream-text); padding-block:var(--space-2xl) var(--space-xl); position:relative; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:var(--space-lg); align-items:center; }
.hero h1{ color:#fff; }
.hero-lede{ font-size:var(--step-1); color:var(--color-cream-text); max-width:42ch; opacity:0.9; }
.hero-actions{ display:flex; gap:1rem; margin-top:var(--space-md); flex-wrap:wrap; }

.hero-image-wrap{
  aspect-ratio:4/5; border-radius:var(--radius); overflow:hidden;
  box-shadow:0 24px 50px -20px rgba(0,0,0,0.55);
  border:1px solid var(--color-line-dark);
}
.hero-image-wrap img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-image-wrap .maps-embed-placeholder{ height:100%; display:flex; align-items:center; justify-content:center; text-align:center; padding:2rem; font-size:0.9rem; }

@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-image-wrap{ aspect-ratio:16/10; }
}

/* ==========================================================================
   5. SECTIONS
   ========================================================================== */
.section{ padding-block:var(--space-2xl); }
.section-tight{ padding-block:var(--space-xl); }
.section-on-ink{ background:var(--color-ink); color:var(--color-cream-text); }
.section-on-ink h2, .section-on-ink h3{ color:#fff; }
.section-header{ max-width:60ch; margin-bottom:var(--space-lg); }
.section-header p{ color:var(--color-slate); font-size:var(--step-1); }
.on-ink .section-header p{ color:var(--color-cream-text); opacity:0.85; }

.grid{ display:grid; gap:var(--space-md); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:920px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

/* Practice area / card */
.card{
  background:var(--color-paper-2); padding:2rem 1.75rem; border-radius:var(--radius);
  border:1px solid var(--color-line); transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.card:hover{ border-color:var(--color-brass); transform:translateY(-3px); }
.card .docket{ margin-bottom:1.1em; }
.card h3{ font-size:1.25rem; margin-bottom:0.4em; }
.card p{ color:var(--color-slate); font-size:0.95rem; margin-bottom:0.9em; }
.card-link{ font-family:var(--font-mono); font-size:0.8rem; color:var(--color-burgundy); border-bottom:1px solid var(--color-burgundy); }

/* Attorney card */
.attorney-card{ text-align:left; }
.attorney-photo{ aspect-ratio:4/5; overflow:hidden; background:var(--color-paper-2); border-radius:var(--radius); margin-bottom:1rem; }
.attorney-photo img{ width:100%; height:100%; object-fit:cover; }
.attorney-name{ font-family:var(--font-display); font-size:1.2rem; margin:0 0 0.15em; }
.attorney-role{ font-family:var(--font-mono); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--color-burgundy); }

/* Stats strip */
.stats-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-md); border-top:1px solid var(--color-line-dark); border-bottom:1px solid var(--color-line-dark); padding-block:var(--space-lg); }
.stat-num{ font-family:var(--font-display); font-size:var(--step-3); color:var(--color-brass-light); }
.stat-label{ font-family:var(--font-mono); font-size:0.75rem; text-transform:uppercase; letter-spacing:0.08em; opacity:0.8; }
@media (max-width:700px){ .stats-strip{ grid-template-columns:repeat(2,1fr); } }

/* Testimonial */
.testimonial{ border-left:3px solid var(--color-brass); padding-left:1.5rem; }
.testimonial blockquote{ font-family:var(--font-display); font-size:var(--step-1); font-style:italic; margin:0 0 0.75em; }
.testimonial cite{ font-family:var(--font-mono); font-size:0.8rem; font-style:normal; opacity:0.75; }

/* CTA band */
.cta-band{ background:var(--color-burgundy); color:#fff; padding-block:var(--space-lg); text-align:center; }
.cta-band h2{ color:#fff; }
.cta-band .btn-outline{ border-color:rgba(255,255,255,0.4); color:#fff; }
.cta-band .btn-outline:hover{ border-color:#fff; }

/* ==========================================================================
   6. CONTENT / SINGLE / ARCHIVE
   ========================================================================== */
.page-header-band{ background:var(--color-ink); color:var(--color-cream-text); padding-block:var(--space-xl) var(--space-lg); }
.entry-content{ max-width:70ch; }
.entry-content h2{ font-size:var(--step-2); margin-top:1.4em; }
.entry-content h3{ font-size:var(--step-1); margin-top:1.2em; }
.entry-content a:not(.btn){ color:var(--color-burgundy); border-bottom:1px solid var(--color-burgundy); }
.entry-content ul, .entry-content ol{ list-style:disc; margin:0 0 1.1em 1.4em; }
.entry-content ol{ list-style:decimal; }
.entry-content blockquote{ border-left:3px solid var(--color-brass); padding-left:1.25rem; font-style:italic; color:var(--color-slate); }
.entry-content img{ border-radius:var(--radius); margin-block:1rem; }
.entry-content table{ width:100%; border-collapse:collapse; margin-bottom:1.5em; }
.entry-content th, .entry-content td{ border:1px solid var(--color-line); padding:0.6em 0.8em; text-align:left; }

.content-layout{ display:grid; grid-template-columns:1fr; gap:var(--space-lg); }
.post-meta{ font-family:var(--font-mono); font-size:0.78rem; color:var(--color-slate); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.5em; }

/* Blog listing — 2-column layout: content + sidebar */
.blog-grid{ display:grid; grid-template-columns:2.2fr 1fr; gap:var(--space-xl); align-items:start; }
@media (max-width:900px){ .blog-grid{ grid-template-columns:1fr; } }

/* Featured post — larger card at the top of the blog index */
.featured-post{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:0; background:var(--color-paper-2); border:1px solid var(--color-line); border-radius:var(--radius); overflow:hidden; margin-bottom:var(--space-xl); }
.featured-post-image{ display:block; aspect-ratio:4/3; overflow:hidden; }
.featured-post-image img{ width:100%; height:100%; object-fit:cover; }
.featured-post-body{ padding:2rem; display:flex; flex-direction:column; justify-content:center; }
.featured-post-body h2{ font-size:var(--step-2); margin-bottom:0.4em; }
.featured-post-body p{ color:var(--color-slate); }
@media (max-width:760px){ .featured-post{ grid-template-columns:1fr; } }

/* Post card grid */
.post-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-md); }
@media (max-width:760px){ .post-cards{ grid-template-columns:1fr; } }
.post-card{ border:1px solid var(--color-line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:border-color .2s var(--ease), transform .2s var(--ease); }
.post-card:hover{ border-color:var(--color-brass); transform:translateY(-3px); }
.post-card-image{ display:block; aspect-ratio:16/10; background:var(--color-paper-2); }
.post-card-image img{ width:100%; height:100%; object-fit:cover; }
.post-card-body{ padding:1.25rem 1.4rem; display:flex; flex-direction:column; flex:1; }
.post-card-body h3{ font-size:1.08rem; margin-bottom:0.3em; }
.post-card-body p{ font-size:0.9rem; color:var(--color-slate); flex:1; }
.post-card-category{ display:inline-block; font-family:var(--font-mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--color-burgundy); margin-bottom:0.5em; }

/* Sidebar */
.sidebar-widget{ background:var(--color-paper-2); border:1px solid var(--color-line); border-radius:var(--radius); padding:1.5rem; margin-bottom:1.5rem; }
.sidebar-widget h3{ font-size:1rem; margin-bottom:0.9em; }
.sidebar-widget ul{ display:flex; flex-direction:column; gap:0.6rem; }
.sidebar-widget li a{ font-size:0.9rem; }
.sidebar-search .search-form{ display:flex; flex-direction:column; gap:0.6rem; }

/* Single post extras */
.single-meta-row{ display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap; font-family:var(--font-mono); font-size:0.82rem; color:var(--color-cream-text); opacity:.85; margin:0; }
.single-hero-image{ margin-top:calc(var(--space-lg) * -1); margin-bottom:var(--space-lg); border-radius:var(--radius); overflow:hidden; aspect-ratio:21/9; }
.single-hero-image img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:760px){ .single-hero-image{ aspect-ratio:4/3; margin-top:var(--space-md); } }

.post-tags{ display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:1.5rem; }
.post-tag{ font-family:var(--font-mono); font-size:0.78rem; padding:0.35em 0.8em; border:1px solid var(--color-line); border-radius:20px; color:var(--color-slate); }
.post-tag:hover{ border-color:var(--color-brass); color:var(--color-burgundy); }

.share-links{ display:flex; align-items:center; gap:0.6rem; margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--color-line); }
.share-label{ font-family:var(--font-mono); font-size:0.8rem; color:var(--color-slate); margin-right:0.3rem; }
.share-links a, .share-links button{ width:38px; height:38px; border-radius:50%; border:1px solid var(--color-line); background:none; display:flex; align-items:center; justify-content:center; color:var(--color-ink); transition:border-color .2s var(--ease), background .2s var(--ease); cursor:pointer; }
.share-links a:hover, .share-links button:hover{ border-color:var(--color-brass); background:var(--color-paper-2); }
.share-links svg{ width:16px; height:16px; }
.copy-link-btn.is-copied{ border-color:var(--color-brass); color:var(--color-burgundy); }

.author-box{ display:flex; gap:1.25rem; align-items:flex-start; background:var(--color-paper-2); border:1px solid var(--color-line); border-radius:var(--radius); padding:1.5rem; margin-top:2rem; }
.author-box img{ border-radius:50%; flex-shrink:0; }
.author-box h4{ font-size:1rem; margin-bottom:0.2em; }
.author-box p{ font-size:0.88rem; color:var(--color-slate); margin:0; }

.post-nav{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:2.5rem; }
.post-nav > div{ min-width:0; }
.post-nav a{ display:block; padding:1rem 1.25rem; border:1px solid var(--color-line); border-radius:var(--radius); transition:border-color .2s var(--ease); }
.post-nav a:hover{ border-color:var(--color-brass); }
.post-nav-label{ font-family:var(--font-mono); font-size:0.72rem; text-transform:uppercase; color:var(--color-slate); display:block; margin-bottom:0.3em; }
.post-nav-next{ text-align:right; }
@media (max-width:600px){ .post-nav{ grid-template-columns:1fr; } }

.related-posts{ margin-top:3rem; padding-top:2rem; border-top:1px solid var(--color-line); }
.related-posts h2{ font-size:var(--step-1); margin-bottom:1.5rem; }

/* Pagination */
.pagination{ display:flex; gap:0.75rem; flex-wrap:wrap; margin-top:var(--space-lg); }
.pagination a, .pagination span{ font-family:var(--font-mono); font-size:0.85rem; padding:0.5em 0.9em; border:1px solid var(--color-line); border-radius:var(--radius); }
.pagination .current{ background:var(--color-ink); color:#fff; border-color:var(--color-ink); }

/* Forms / comments */
input, textarea, select{ width:100%; font-family:var(--font-body); font-size:1rem; padding:0.85em 1em; border:1px solid var(--color-line); border-radius:var(--radius); background:#fff; color:var(--color-ink); }
input:focus, textarea:focus, select:focus{ border-color:var(--color-brass); }
label{ display:block; font-family:var(--font-mono); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.4em; color:var(--color-slate); }
.form-row{ margin-bottom:1.1rem; }


/* ==========================================================================
   7. FOOTER
   ========================================================================== */
.site-footer{ background:var(--color-ink); color:var(--color-cream-text); padding-block:var(--space-xl) var(--space-lg); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--space-lg); margin-bottom:var(--space-lg); }
.footer-title{ font-family:var(--font-display); color:#fff; font-size:1.1rem; margin-bottom:0.8em; }
.footer-grid a{ display:block; padding-block:0.35em; color:var(--color-cream-text); opacity:0.85; font-size:0.92rem; }
.footer-grid a:hover{ opacity:1; color:var(--color-brass-light); }
.footer-bottom{ border-top:1px solid var(--color-line-dark); padding-top:1.5rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-size:0.8rem; opacity:0.7; font-family:var(--font-mono); }
@media (max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   8. ELEMENTOR COMPATIBILITY
   ========================================================================== */
/* Keep Elementor's own sections full-bleed; don't let theme content wrappers
   constrain widths inside the editor canvas. */
.elementor-page .entry-content,
.elementor .entry-content{ max-width:none; }
.elementor-widget-container img{ display:block; }

/* Utility */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.visually-hidden{ position:absolute; width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0); }

/* ==========================================================================
   9. HOMEPAGE EXTRAS — about teaser, service checklist, FAQ, closing band
   ========================================================================== */
.about-teaser{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-lg); align-items:center; }
.about-teaser-figure{ aspect-ratio:4/3; background:var(--color-paper-2); border:1px solid var(--color-line); border-radius:var(--radius); overflow:hidden; }
.about-teaser-figure img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:820px){ .about-teaser{ grid-template-columns:1fr; } .about-teaser-figure{ order:-1; } }

.service-list{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-md); }
.service-list ul{ display:flex; flex-direction:column; gap:0.65rem; }
.service-list li{ display:flex; align-items:center; gap:0.65rem; font-size:0.92rem; line-height:1.4; }
.service-icon{ width:20px; height:20px; flex-shrink:0; color:var(--color-brass); }
@media (max-width:920px){ .service-list{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .service-list{ grid-template-columns:1fr; } }

/* Galeri — foto di atas, keterangan (judul + excerpt) di bawah */
.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-md); }
.gallery-item{ margin:0; }
.gallery-photo{ display:block; aspect-ratio:4/3; background:var(--color-paper-2); border:1px solid var(--color-line); border-radius:var(--radius); overflow:hidden; }
.gallery-photo img{ width:100%; height:100%; object-fit:cover; transition:transform .3s var(--ease); }
.gallery-item:hover .gallery-photo img{ transform:scale(1.04); }
.gallery-photo-empty{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; color:var(--color-slate); font-family:var(--font-mono); font-size:0.78rem; text-align:center; padding:1rem; }
.gallery-item figcaption{ padding-top:0.75rem; }
.gallery-item figcaption h3{ font-size:1.02rem; margin-bottom:0.2em; }
.gallery-item figcaption p{ font-size:0.85rem; color:var(--color-slate); margin:0; }
@media (max-width:820px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .gallery-grid{ grid-template-columns:1fr; } }

/* Tombol WhatsApp melayang — di atas tombol kembali ke atas, selalu
   terlihat (tidak nunggu scroll, beda dari back-to-top). */
.whatsapp-float{
  position:fixed; right:1.5rem; bottom:5.5rem; z-index:400;
  width:52px; height:52px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 26px -10px rgba(0,0,0,.55);
  transition:transform .2s var(--ease), background .2s var(--ease);
}
.whatsapp-float:hover{ background:#1EBE5B; transform:translateY(-2px); }
.whatsapp-float svg{ width:26px; height:26px; }
@media (max-width:600px){ .whatsapp-float{ right:1rem; bottom:4.5rem; width:48px; height:48px; } .whatsapp-float svg{ width:24px; height:24px; } }

/* Tombol kembali ke atas — muncul setelah scroll, pojok kanan bawah */
.back-to-top{
  position:fixed; right:1.5rem; bottom:1.5rem; z-index:400;
  width:46px; height:46px; border-radius:50%;
  background:var(--color-burgundy); color:#fff; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 26px -10px rgba(0,0,0,.55);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s, background .2s var(--ease);
}
.back-to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ background:var(--color-burgundy-dark); }
.back-to-top svg{ width:20px; height:20px; }
@media (max-width:600px){ .back-to-top{ right:1rem; bottom:1rem; width:42px; height:42px; } }

.faq-list{ max-width:78ch; }
.faq-item{ border-bottom:1px solid var(--color-line); padding-block:1.1rem; }
.faq-item summary{ cursor:pointer; font-family:var(--font-display); font-weight:600; font-size:1.05rem; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-family:var(--font-mono); font-size:1.4rem; color:var(--color-brass); flex-shrink:0; transition:transform .2s var(--ease); }
.faq-item[open] summary::after{ content:"–"; }
.faq-item p{ margin:0.9rem 0 0; color:var(--color-slate); max-width:68ch; }

.closing-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:var(--space-lg); align-items:start; }
.maps-embed{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--color-line-dark); aspect-ratio:16/10; background:var(--color-ink-2); display:flex; align-items:center; justify-content:center; }
.maps-embed iframe{ width:100%; height:100%; border:0; display:block; }
.maps-embed-placeholder{ color:var(--color-cream-text); opacity:0.6; font-size:0.85rem; font-family:var(--font-mono); text-align:center; padding:2rem; }
.social-links{ display:flex; flex-direction:column; gap:0.75rem; }
.social-links a{ display:flex; align-items:center; gap:0.6rem; padding:0.9em 1.15em; border:1px solid var(--color-line-dark); border-radius:var(--radius); font-size:0.9rem; color:var(--color-cream-text); }
.social-links a:hover{ border-color:var(--color-brass); color:var(--color-brass-light); }