/*
Theme Name: Ciptamasindo
Theme URI: https://ciptamasindo.com
Author: Malakatech
Author URI: https://malakatech.com
Description: Theme WordPress premium untuk Ciptamasindo - Eksportir Pupuk Organik Indonesia. Dilengkapi panel pengaturan lengkap untuk Header, Footer, Logo, Favicon, dan setiap section halaman utama.
Version: 1.0.0
Requires at least: 5.8
Tested up to: 6.5
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: ciptamasindo
Tags: business, one-page, agriculture, export, customizer
*/

/* ============================================================
   BASE RESET & TYPOGRAPHY
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: #ffffff;
  color: #1f2937;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ============================================================
   CSS VARIABLES (overridden by Customizer)
   ============================================================ */
:root {
  --color-primary:   #239558;
  --color-primary-dark: #177744;
  --color-primary-light: #f0faf4;
  --color-navy:      #0f2744;
  --color-accent:    #BC002D;
  --font-heading:    'Inter', sans-serif;
  --font-body:       'Inter', sans-serif;
}

/* ============================================================
   UTILITIES
   ============================================================ */
.container { max-width: 1152px; margin: 0 auto; padding: 0 1.5rem; }
.section-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 0.75rem; }
.section-title { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; color: #111827; line-height: 1.25; margin-bottom: 1rem; }
.section-divider { width: 48px; height: 3px; background: var(--color-primary); border-radius: 2px; }
.section-divider.center { margin: 0 auto; }
.section-desc { color: #6b7280; font-size: 0.95rem; line-height: 1.7; max-width: 560px; }

/* Card hover */
.card-hover { transition: box-shadow 0.25s, transform 0.25s; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(35,149,88,0.12); }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.9rem; padding: 0.75rem 1.5rem; border-radius: 0.5rem; cursor: pointer; transition: all 0.2s; border: none; }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-outline { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.5); }
.btn-outline:hover { background: var(--color-primary-dark); border-color: transparent; }
.btn-white { background: #fff; color: var(--color-primary-dark); }
.btn-white:hover { background: var(--color-primary-light); }

/* Tags/badges */
.tag { display: inline-flex; font-size: 0.7rem; font-weight: 600; padding: 0.25rem 0.7rem; border-radius: 9999px; border: 1px solid; }
.tag-green { background: var(--color-primary-light); color: var(--color-primary-dark); border-color: #b3e4c7; }
.tag-amber { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.tag-lime  { background: #f7fee7; color: #3f6212; border-color: #d9f99d; }

/* Stat border left */
.stat-border { border-left: 3px solid #45b274; }

/* ============================================================
   HERO ANIMATIONS
   ============================================================ */
@keyframes heroImgZoom {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}
.hero-img-anim { animation: heroImgZoom 8s ease forwards; }

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-text-anim  { animation: fadeSlideUp 0.9s ease 0.2s both; }
.hero-stats-anim { animation: fadeSlideUp 0.9s ease 0.5s both; }

@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(6px); }
}
.scroll-bounce { animation: scrollBounce 1.6s ease-in-out infinite; }

/* Particles */
.particle { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.06); animation: floatParticle linear infinite; }
.p1 { width:180px; height:180px; top:10%; left:-6%; animation-duration:14s; }
.p2 { width:100px; height:100px; top:60%; right:-3%; animation-duration:10s; animation-delay:2s; }
.p3 { width:60px;  height:60px;  top:30%; right:15%; animation-duration:8s;  animation-delay:1s; }
.p4 { width:240px; height:240px; bottom:-8%; left:30%; animation-duration:18s; animation-delay:3s; }
@keyframes floatParticle {
  0%   { transform: translateY(0) rotate(0deg); opacity:0.06; }
  50%  { opacity: 0.12; }
  100% { transform: translateY(-60px) rotate(180deg); opacity:0.06; }
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: #fff;
  border-bottom: 1px solid #f3f4f6;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.site-header .inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.5rem; max-width: 1152px; margin: 0 auto;
}
.site-logo img { height: 44px; width: auto; }
.site-logo .text-logo { font-size: 1.4rem; font-weight: 800; color: var(--color-navy); }
.nav-links { display: flex; gap: 2rem; align-items: center; }
.nav-links a { font-size: 0.875rem; font-weight: 500; color: #4b5563; position: relative; padding-bottom: 2px; transition: color 0.2s; }
.nav-links a::after { content:''; position:absolute; bottom:-2px; left:0; width:0; height:2px; background:var(--color-primary); transition:width 0.25s; }
.nav-links a:hover { color: var(--color-primary-dark); }
.nav-links a:hover::after { width: 100%; }
.header-cta { display: flex; align-items: center; gap: 1rem; }
.hamburger { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; }
.mobile-nav { display: none; background: #fff; border-top: 1px solid #f3f4f6; padding: 1rem 1.5rem 1.5rem; }
.mobile-nav a { display: block; padding: 0.6rem 0; font-weight: 500; color: #374151; border-bottom: 1px solid #f3f4f6; }
.mobile-nav a:last-child { border: none; }

@media (max-width: 768px) {
  .nav-links, .header-cta .btn { display: none; }
  .hamburger { display: block; }
  .mobile-nav.open { display: block; }
}

/* ============================================================
   SECTION: HERO
   ============================================================ */
.section-hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center;
  overflow: hidden; color: #fff;
}
.hero-bg-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-overlay { position:absolute; inset:0; background: linear-gradient(135deg,rgba(14,61,38,0.88) 0%,rgba(19,95,55,0.78) 50%,rgba(35,149,88,0.55) 100%); }
.hero-content { position:relative; z-index:2; width:100%; }
.hero-inner { max-width:1152px; margin:0 auto; padding:7rem 1.5rem 4rem; display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
.hero-label { font-size:0.7rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.7); margin-bottom:1rem; }
.hero-title { font-size:clamp(2rem,4.5vw,3.2rem); font-weight:900; line-height:1.15; margin-bottom:1.5rem; }
.hero-desc { font-size:1rem; color:rgba(255,255,255,0.85); line-height:1.75; margin-bottom:2.5rem; }
.hero-btns { display:flex; gap:1rem; flex-wrap:wrap; }
.hero-stats { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.hero-stat-card { background:rgba(255,255,255,0.1); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,0.15); border-radius:0.75rem; padding:1.5rem; }
.hero-stat-card .num { font-size:1.8rem; font-weight:900; color:#fff; }
.hero-stat-card .label { font-size:0.8rem; color:rgba(255,255,255,0.7); margin-top:0.25rem; }
.hero-scroll { position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:0.4rem; }
.hero-scroll span { font-size:0.65rem; letter-spacing:0.15em; text-transform:uppercase; color:rgba(255,255,255,0.6); }

@media(max-width:768px) {
  .hero-inner { grid-template-columns:1fr; }
  .hero-stats { display:none; }
}

/* ============================================================
   SECTION: KEUNGGULAN
   ============================================================ */
.section-keunggulan { padding: 5rem 0; background: #fff; }
.keunggulan-inner { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.keunggulan-features { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:2rem; }
.feat-item { display:flex; gap:0.75rem; align-items:flex-start; }
.feat-icon { width:2rem; height:2rem; background:var(--color-primary-light); border-radius:0.5rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:0.1rem; }
.feat-icon svg { width:16px; height:16px; stroke:var(--color-primary); }
.feat-title { font-weight:700; font-size:0.875rem; color:#111827; }
.feat-sub { font-size:0.75rem; color:#9ca3af; margin-top:0.1rem; }
.keunggulan-visual { display:flex; flex-direction:column; gap:1rem; }
.keunggulan-img { border-radius:1rem; overflow:hidden; height:280px; box-shadow:0 4px 20px rgba(0,0,0,0.1); }
.keunggulan-img img { width:100%; height:100%; object-fit:cover; }
.keunggulan-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:0.75rem; }
.keunggulan-stat { border-radius:1rem; padding:1rem; text-align:center; }
.keunggulan-stat .num { font-size:1.5rem; font-weight:900; }
.keunggulan-stat .lab { font-size:0.7rem; margin-top:0.2rem; }
.ks-green { background:var(--color-primary); color:#fff; }
.ks-green .lab { color:rgba(255,255,255,0.7); }
.ks-dark  { background:#111827; color:#fff; }
.ks-dark .lab { color:#9ca3af; }
.ks-light { background:var(--color-primary-light); }
.ks-light .num { color:#134e2e; }
.ks-light .lab { color:var(--color-primary); }

@media(max-width:768px){
  .keunggulan-inner { grid-template-columns:1fr; }
  .keunggulan-features { grid-template-columns:1fr; }
}

/* ============================================================
   SECTION: PRODUK
   ============================================================ */
.section-produk { padding:5rem 0; background:#f9fafb; }
.produk-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.produk-card { background:#fff; border:1px solid #e5e7eb; border-radius:1rem; overflow:hidden; }
.produk-card.featured { border-color:#a7f3d0; box-shadow:0 0 0 2px rgba(35,149,88,0.15); }
.produk-card-img { height:192px; overflow:hidden; position:relative; }
.produk-card-img img { width:100%; height:100%; object-fit:cover; }
.produk-card-img .badge { position:absolute; top:0.75rem; right:0.75rem; background:var(--color-primary); color:#fff; font-size:0.65rem; font-weight:700; padding:0.25rem 0.7rem; border-radius:9999px; }
.produk-card-body { padding:1.75rem; }
.produk-num { font-size:0.65rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--color-primary); margin-bottom:0.4rem; }
.produk-name { font-size:1.15rem; font-weight:800; color:#111827; margin-bottom:0.2rem; }
.produk-sub  { font-size:0.8rem; color:#9ca3af; font-weight:500; margin-bottom:1rem; }
.produk-line { width:2rem; height:2px; background:var(--color-primary); opacity:0.5; margin-bottom:1.25rem; border-radius:1px; }
.produk-desc { font-size:0.85rem; color:#6b7280; line-height:1.7; }
.produk-tags { display:flex; flex-wrap:wrap; gap:0.4rem; margin-top:1.25rem; }

@media(max-width:900px){ .produk-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .produk-grid { grid-template-columns:1fr; } }

/* ============================================================
   SECTION: TENTANG
   ============================================================ */
.section-tentang { padding:5rem 0; background:#fff; }
.tentang-inner { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.tentang-visual { display:flex; flex-direction:column; gap:1rem; }
.tentang-values { background:var(--color-primary-light); border:1px solid #b3e4c7; border-radius:1rem; padding:2rem; }
.tentang-val-label { font-size:0.65rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--color-primary-dark); margin-bottom:1rem; }
.tentang-val-item { display:flex; gap:1rem; align-items:center; padding:1rem 0; }
.tentang-val-item:not(:last-child) { border-bottom:1px solid #b3e4c7; }
.tentang-val-icon { width:2.5rem; height:2.5rem; border-radius:0.75rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.tvi-green { background:var(--color-primary); }
.tvi-navy  { background:var(--color-navy); }
.tentang-val-icon svg { width:18px; height:18px; stroke:#fff; }
.tentang-val-title { font-weight:700; font-size:0.875rem; color:#111827; }
.tentang-val-sub { font-size:0.75rem; color:#6b7280; margin-top:0.1rem; }
.tentang-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; }
.tentang-badge { border-radius:1rem; padding:1.5rem; }
.tb-green { background:var(--color-primary); color:#fff; }
.tb-green .num { font-size:1.6rem; font-weight:900; }
.tb-green .lab { font-size:0.75rem; color:rgba(255,255,255,0.75); margin-top:0.25rem; }
.tb-gray  { background:#f3f4f6; }
.tb-gray .num  { font-size:1.6rem; font-weight:900; color:#111827; }
.tb-gray .lab  { font-size:0.75rem; color:#6b7280; margin-top:0.25rem; }

@media(max-width:768px){ .tentang-inner { grid-template-columns:1fr; } }

/* ============================================================
   SECTION: CTA BAND
   ============================================================ */
.section-cta { padding:5rem 0; background:var(--color-primary-dark); text-align:center; }
.cta-label { font-size:0.65rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.5); margin-bottom:1rem; }
.cta-title { font-size:clamp(1.5rem,3vw,2.2rem); font-weight:900; color:#fff; margin-bottom:1rem; max-width:700px; margin-left:auto; margin-right:auto; }
.cta-desc  { color:rgba(255,255,255,0.75); font-size:1rem; margin-bottom:2.5rem; }

/* ============================================================
   SECTION: EKSPOR JEPANG
   ============================================================ */
.section-ekspor { padding:5rem 0; background:#fff; overflow:hidden; }
.ekspor-inner { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
.ekspor-cards { display:flex; flex-direction:column; gap:1rem; }
.ekspor-card { display:flex; gap:1.25rem; align-items:center; padding:1.25rem 1.5rem; background:#f9fafb; border:1px solid #f3f4f6; border-radius:1rem; }
.ekspor-icon { width:3.5rem; height:3.5rem; border-radius:1rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ei-red   { background:#fef2f2; }
.ei-green { background:var(--color-primary-light); }
.ei-blue  { background:#eff6ff; }
.ekspor-icon svg { width:26px; height:26px; }
.ekspor-num   { font-size:1.4rem; font-weight:900; color:#111827; }
.ekspor-label { font-size:0.85rem; color:#6b7280; margin-top:0.2rem; }
.ekspor-map-wrap { display:flex; flex-direction:column; gap:1rem; }
#japan-map { border-radius:1rem; overflow:hidden; border:1px solid #e5e7eb; box-shadow:0 4px 16px rgba(0,0,0,0.08); height:380px; }
.ekspor-badges { display:flex; justify-content:center; gap:1rem; }
.exp-badge { padding:0.75rem 1.25rem; border-radius:0.75rem; text-align:center; min-width:80px; }
.exp-badge .num { font-size:1.2rem; font-weight:900; }
.exp-badge .lab { font-size:0.7rem; margin-top:0.2rem; opacity:0.8; }
.eb-green { background:var(--color-primary); color:#fff; }
.eb-red   { background:#dc2626; color:#fff; }
.eb-dark  { background:#111827; color:#fff; }

@media(max-width:768px){ .ekspor-inner { grid-template-columns:1fr; } }

/* ============================================================
   SECTION: TESTIMONI
   ============================================================ */
.section-testimoni { padding:5rem 0; background:#f9fafb; }
.testi-wrapper { position:relative; overflow:hidden; }
.testi-track { display:flex; gap:1.5rem; transition:transform 0.5s ease; }
.testi-card { flex-shrink:0; width:calc(33.333% - 1rem); background:#fff; border:1px solid #e5e7eb; border-radius:1rem; padding:2rem; box-shadow:0 1px 3px rgba(0,0,0,0.05); }
.testi-stars { display:flex; gap:0.2rem; margin-bottom:1rem; }
.testi-stars svg { width:16px; height:16px; fill:#f59e0b; }
.testi-text { font-size:0.875rem; color:#4b5563; line-height:1.75; font-style:italic; margin-bottom:1.5rem; }
.testi-author { display:flex; align-items:center; gap:0.75rem; padding-top:1.25rem; border-top:1px solid #f3f4f6; }
.testi-avatar { width:2.5rem; height:2.5rem; border-radius:9999px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.75rem; color:#fff; flex-shrink:0; }
.testi-name { font-weight:700; font-size:0.875rem; color:#111827; }
.testi-role { font-size:0.75rem; color:#9ca3af; margin-top:0.1rem; }
.testi-nav { position:absolute; top:50%; z-index:5; transform:translateY(-50%); width:2.5rem; height:2.5rem; background:#fff; border:1px solid #e5e7eb; border-radius:9999px; box-shadow:0 2px 8px rgba(0,0,0,0.1); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.2s; }
.testi-nav:hover { background:var(--color-primary-light); }
.testi-nav svg { width:18px; height:18px; stroke:#374151; }
.testi-prev { left:-1rem; }
.testi-next { right:-1rem; }
.testi-dots { display:flex; justify-content:center; gap:0.5rem; margin-top:2rem; }
.testi-dot { width:10px; height:10px; border-radius:9999px; background:#d1d5db; border:none; cursor:pointer; transition:all 0.25s; padding:0; }
.testi-dot.active { background:var(--color-primary); width:20px; }

@media(max-width:900px){ .testi-card { width:calc(50% - 0.75rem); } }
@media(max-width:600px){ .testi-card { width:100%; } }

/* ============================================================
   SECTION: ARTIKEL
   ============================================================ */
.section-artikel { padding:5rem 0; background:#fff; }
.artikel-wrapper { margin-top:1rem; }

/* ============================================================
   SECTION: KONTAK
   ============================================================ */
.section-kontak { padding:5rem 0; background:#f9fafb; }
.kontak-inner { display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; }
.kontak-cards { display:flex; flex-direction:column; gap:1rem; }
.kontak-card { display:flex; align-items:center; gap:1rem; padding:1.25rem 1.5rem; background:#fff; border:1px solid #e5e7eb; border-radius:0.875rem; transition:all 0.2s; }
.kontak-card:hover { border-color:#a7f3d0; box-shadow:0 2px 8px rgba(0,0,0,0.06); }
.kontak-icon { width:3rem; height:3rem; border-radius:0.75rem; background:var(--color-primary-light); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background 0.2s; }
.kontak-card:hover .kontak-icon { background:var(--color-primary); }
.kontak-icon svg { width:22px; height:22px; stroke:var(--color-primary); transition:stroke 0.2s; }
.kontak-card:hover .kontak-icon svg { stroke:#fff; }
.kontak-meta { font-size:0.7rem; color:#9ca3af; margin-bottom:0.2rem; }
.kontak-val  { font-weight:700; color:#111827; font-size:0.95rem; }
#kontak-map  { border-radius:0.875rem; overflow:hidden; border:1px solid #e5e7eb; box-shadow:0 2px 8px rgba(0,0,0,0.06); height:300px; }
#kontak-map iframe { width:100%; height:100%; border:0; }

@media(max-width:768px){ .kontak-inner { grid-template-columns:1fr; } }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background:#111827; color:#9ca3af; }
.footer-inner { max-width:1152px; margin:0 auto; padding:3rem 1.5rem 2rem; display:grid; grid-template-columns:2fr 1fr 1fr; gap:3rem; }
.footer-brand .logo img { height:3rem; width:auto; margin-bottom:1rem; }
.footer-brand p { font-size:0.875rem; line-height:1.65; color:#6b7280; }
.footer-col h4 { color:#fff; font-weight:700; font-size:0.875rem; margin-bottom:1rem; }
.footer-col ul { display:flex; flex-direction:column; gap:0.6rem; }
.footer-col a { font-size:0.85rem; color:#6b7280; transition:color 0.2s; }
.footer-col a:hover { color:var(--color-primary); }
.footer-bottom { border-top:1px solid #1f2937; padding:1.25rem 1.5rem; display:flex; justify-content:space-between; align-items:center; max-width:1152px; margin:0 auto; }
.footer-copy { font-size:0.8rem; color:#4b5563; }
.footer-tagline { font-size:0.75rem; color:#374151; }

@media(max-width:768px){
  .footer-inner { grid-template-columns:1fr; gap:2rem; }
  .footer-bottom { flex-direction:column; gap:0.5rem; text-align:center; }
}

/* ============================================================
   WP ADMIN BAR ADJUSTMENT
   ============================================================ */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

/* ============================================================
   CUSTOMIZER LIVE PREVIEW
   ============================================================ */
[data-customize-partial-placement-context] { outline: 2px dashed var(--color-primary) !important; }