/*
Theme Name: Agency Expert WP
Theme URI: https://landingkilat.com/
Author: LandingKilat
Author URI: https://landingkilat.com/
Description: Tema WordPress one-page agency yang dibangun ulang dari desain EPS. Seluruh section utama dapat dikustomisasi melalui Appearance > Customize.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
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: agency-expert-wp
Tags: one-column, custom-logo, custom-menu, featured-images, theme-options, translation-ready
*/

:root {
  --aewp-primary: #8cc63e;
  --aewp-primary-dark: #669638;
  --aewp-accent: #ffb400;
  --aewp-orange: #ff7a18;
  --aewp-dark: #202121;
  --aewp-text: #222;
  --aewp-muted: #8e9395;
  --aewp-light: #f2f3f3;
  --aewp-white: #fff;
  --aewp-container: 1180px;
  --aewp-shadow: 0 18px 44px rgba(0,0,0,.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--aewp-text);
  background: #fff;
  font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.aewp-container { width: min(var(--aewp-container), calc(100% - 40px)); margin-inline: auto; }
.aewp-section { padding: 78px 0; position: relative; overflow: hidden; }
.aewp-section-head { text-align: center; margin: 0 auto 44px; max-width: 760px; }
.aewp-section-title {
  margin: 0;
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1;
  letter-spacing: -.025em;
  text-transform: uppercase;
  font-weight: 900;
}
.aewp-section-title .accent { color: var(--aewp-primary-dark); }
.aewp-section-subtitle { margin: 12px auto 0; color: var(--aewp-muted); font-size: 15px; max-width: 680px; }
.aewp-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 28px; border: 0; border-radius: 3px;
  background: var(--aewp-accent); color: #111; text-transform: uppercase;
  font-size: 13px; font-weight: 800; letter-spacing: .02em;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.aewp-button:hover, .aewp-button:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0,0,0,.17); filter: brightness(1.04); }
.aewp-button--green { background: var(--aewp-primary); color: #fff; }
.aewp-icon { display: inline-grid; place-items: center; }
.aewp-icon svg { display: block; width: 100%; height: 100%; }

/* Header */
.aewp-topbar { background: var(--aewp-dark); color: #fff; min-height: 40px; font-size: 12px; }
.aewp-topbar .aewp-container { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 40px; }
.aewp-socials, .aewp-top-contact { display: flex; align-items: center; gap: 12px; }
.aewp-socials a { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.11); font-size: 10px; font-weight: 800; }
.aewp-top-contact a { display: inline-flex; align-items: center; gap: 5px; }
.aewp-callback { background: var(--aewp-primary); color: #fff; padding: 7px 15px; text-transform: uppercase; font-weight: 800; font-size: 10px; }
.aewp-header { background: #fff; position: relative; z-index: 50; box-shadow: 0 1px 0 rgba(0,0,0,.07); }
.aewp-header.is-sticky { position: sticky; top: 0; }
.admin-bar .aewp-header.is-sticky { top: 32px; }
.aewp-navbar { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 26px; }
.aewp-brand { display: inline-flex; align-items: center; min-width: 150px; }
.aewp-brand .custom-logo { max-height: 48px; width: auto; }
.aewp-brand-text { display: inline-flex; align-items: center; gap: 7px; font-size: 28px; font-style: italic; font-weight: 900; letter-spacing: -.05em; }
.aewp-brand-badge { background: var(--aewp-primary); color: #fff; font-size: 8px; line-height: 1.05; padding: 4px 7px; transform: skew(-10deg); letter-spacing: 0; }
.aewp-nav { margin-left: auto; }
.aewp-nav ul { display: flex; align-items: center; gap: 3px; padding: 0; margin: 0; list-style: none; }
.aewp-nav a { display: block; padding: 28px 12px 24px; border-bottom: 4px solid transparent; text-transform: uppercase; font-size: 12px; font-weight: 800; }
.aewp-nav a:hover, .aewp-nav .current-menu-item > a { border-bottom-color: var(--aewp-accent); }
.aewp-menu-toggle { display: none; width: 44px; height: 44px; border: 0; background: transparent; }
.aewp-menu-toggle span { display: block; height: 2px; width: 26px; margin: 5px auto; background: #111; transition: .2s ease; }

/* Hero */
.aewp-hero { min-height: 535px; display: grid; place-items: center; color: #fff; background: var(--aewp-primary); position: relative; isolation: isolate; }
.aewp-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2; opacity: .23;
  background-image:
    radial-gradient(ellipse at 20% 100%, transparent 0 35%, rgba(255,255,255,.6) 35.2% 35.7%, transparent 36% 39%, rgba(255,255,255,.45) 39.2% 39.7%, transparent 40% 44%, rgba(255,255,255,.35) 44.2% 44.7%, transparent 45%),
    radial-gradient(ellipse at 86% 15%, transparent 0 28%, rgba(255,255,255,.55) 28.2% 28.6%, transparent 29% 32%, rgba(255,255,255,.4) 32.2% 32.6%, transparent 33% 36%, rgba(255,255,255,.3) 36.2% 36.6%, transparent 37%);
}
.aewp-hero::after { content: ""; position: absolute; inset: 42% 0 auto; height: 86px; z-index: -1; background: rgba(255,255,255,.12); }
.aewp-hero.has-bg::before { background-image: var(--aewp-hero-image); background-size: cover; background-position: center; opacity: .25; }
.aewp-hero-content { text-align: center; max-width: 880px; padding: 80px 20px; }
.aewp-hero h1 { margin: 0; font-size: clamp(48px, 7vw, 82px); line-height: .95; text-transform: uppercase; font-weight: 900; letter-spacing: -.045em; text-shadow: 0 2px 0 rgba(0,0,0,.05); }
.aewp-hero p { max-width: 700px; margin: 22px auto 28px; font-size: 17px; }
.aewp-hero-dots { position: absolute; bottom: 26px; display: flex; gap: 7px; }
.aewp-hero-dots span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.55); }
.aewp-hero-dots span:first-child { background: #fff; }

/* Advantages */
.aewp-advantages-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; }
.aewp-advantage { text-align: center; }
.aewp-icon-circle { width: 104px; height: 104px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; background: var(--aewp-light); }
.aewp-icon-circle .aewp-icon { width: 52px; height: 52px; color: #222; }
.aewp-icon-circle svg .aewp-fill { fill: var(--aewp-primary); }
.aewp-card-title { margin: 0 0 8px; font-size: 15px; text-transform: uppercase; font-weight: 900; }
.aewp-card-text { margin: 0; color: var(--aewp-muted); font-size: 13px; }

/* About */
.aewp-about { background: #e8eaeb; }
.aewp-about::before { content: ""; position: absolute; inset: 0; background: linear-gradient(145deg, transparent 55%, rgba(255,255,255,.3) 55%); pointer-events: none; }
.aewp-about-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 46px; align-items: center; position: relative; }
.aewp-about-copy .aewp-section-title { margin-bottom: 25px; }
.aewp-about-copy p { margin: 0 0 18px; color: #343638; font-size: 15px; }
.aewp-about-visual img { display: block; width: 100%; max-height: 520px; object-fit: contain; object-position: center; }

/* Services */
.aewp-services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.aewp-service { text-align: center; background: var(--aewp-light); padding: 50px 24px 28px; position: relative; min-height: 225px; }
.aewp-service-badge { position: absolute; left: 50%; top: -26px; transform: translateX(-50%); width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--aewp-accent); color: #ef433b; }
.aewp-service-badge .aewp-icon { width: 29px; height: 29px; }
.aewp-service-link { display: inline-block; margin-top: 18px; color: var(--aewp-primary-dark); font-size: 13px; }

/* Portfolio */
.aewp-portfolio { background: var(--aewp-dark); color: #fff; }
.aewp-portfolio .aewp-section-subtitle { color: rgba(255,255,255,.53); }
.aewp-filter { display: flex; justify-content: center; flex-wrap: wrap; gap: 18px; margin: -15px 0 28px; }
.aewp-filter button { border: 0; background: transparent; color: #fff; padding: 4px; font-size: 12px; text-transform: uppercase; font-weight: 800; }
.aewp-filter button.active { color: var(--aewp-accent); }
.aewp-portfolio-grid { display: grid; grid-template-columns: repeat(5, 1fr); }
.aewp-portfolio-item { min-height: 190px; display: grid; place-items: center; text-align: center; padding: 22px; background: #f6f6f6; color: #6e7072; transition: transform .2s ease, filter .2s ease; }
.aewp-portfolio-item:nth-child(2n) { background: #5f6162; color: #fff; }
.aewp-portfolio-item:nth-child(9) { background: #ef4037; color: #fff; }
.aewp-portfolio-item:hover { transform: scale(1.025); z-index: 2; box-shadow: var(--aewp-shadow); }
.aewp-portfolio-item img { max-height: 86px; width: auto; filter: grayscale(1); }
.aewp-portfolio-symbol { width: 76px; height: 76px; margin: 0 auto 10px; }
.aewp-portfolio-item strong { display: block; font-size: 15px; text-transform: uppercase; }
.aewp-portfolio-item small { display: block; opacity: .75; font-size: 10px; text-transform: uppercase; }

/* Process */
.aewp-process-track { display: grid; grid-template-columns: repeat(6, 1fr); position: relative; gap: 12px; }
.aewp-process-track::before { content: ""; position: absolute; top: 57px; left: 8%; right: 8%; height: 2px; background: #d9ddde; }
.aewp-process-step { text-align: center; position: relative; z-index: 1; }
.aewp-process-number { position: absolute; top: -11px; left: calc(50% + 27px); width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: var(--aewp-accent); color: #111; font-size: 12px; font-weight: 900; }
.aewp-process-icon { width: 112px; height: 112px; margin: 0 auto 20px; border: 3px solid #d9ddde; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.aewp-process-icon .aewp-icon { width: 54px; height: 54px; color: var(--aewp-primary); }

/* Testimonials */
.aewp-testimonials { background: var(--aewp-light); }
.aewp-testimonial-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.aewp-testimonial { display: grid; grid-template-columns: 86px 1fr; gap: 22px; padding: 30px; border-bottom: 1px solid #d7dadb; }
.aewp-testimonial:nth-child(odd) { border-right: 1px solid #d7dadb; }
.aewp-avatar { width: 74px; height: 74px; border-radius: 50%; overflow: hidden; background: #fff; display: grid; place-items: center; color: #c7cacc; }
.aewp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.aewp-avatar .aewp-icon { width: 38px; height: 38px; }
.aewp-testimonial h3 { margin: 0 0 7px; font-size: 14px; text-transform: uppercase; }
.aewp-testimonial p { margin: 0; font-size: 13px; }
.aewp-slider-dots { display: flex; justify-content: center; gap: 7px; margin-top: 26px; }
.aewp-slider-dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--aewp-accent); }

/* Skills */
.aewp-skills-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 45px; max-width: 880px; margin: auto; }
.aewp-skill { text-align: center; }
.aewp-skill-ring { --pct: 75; --skill-color: var(--aewp-primary); width: 150px; aspect-ratio: 1; margin: 0 auto 20px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--skill-color) calc(var(--pct) * 1%), #edf0f0 0); position: relative; }
.aewp-skill-ring::before { content: ""; width: 108px; aspect-ratio: 1; border-radius: 50%; background: #fff; }
.aewp-skill-value { position: absolute; font-size: 24px; font-weight: 900; color: var(--skill-color); }
.aewp-skill-label { margin: 0; text-transform: uppercase; font-weight: 900; font-size: 13px; }

/* Project form */
.aewp-project { background: var(--aewp-primary); color: #fff; padding: 55px 0; }
.aewp-project-title { text-align: center; margin: 0 0 28px; font-size: clamp(34px, 4.5vw, 58px); line-height: 1; text-transform: uppercase; font-weight: 900; }
.aewp-project-form { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 14px; align-items: center; max-width: 950px; margin: auto; }
.aewp-project-form input, .aewp-project-form textarea { width: 100%; border: 0; min-height: 45px; padding: 0 16px; border-radius: 3px; background: #fff; color: #111; }
.aewp-project-note { text-align: center; font-size: 11px; margin: 17px 0 0; opacity: .86; }
.aewp-form-status { max-width: 950px; margin: 0 auto 18px; padding: 12px 16px; background: rgba(255,255,255,.2); border-left: 4px solid #fff; }
.aewp-honeypot { position: absolute; left: -9999px; }

/* Contact */
.aewp-contact-details { text-align: center; margin-bottom: 30px; }
.aewp-contact-line { display: flex; justify-content: center; flex-wrap: wrap; gap: 22px; margin-top: 12px; }
.aewp-contact-line a, .aewp-contact-line span { display: inline-flex; align-items: center; gap: 7px; }
.aewp-contact-line .aewp-icon { width: 17px; height: 17px; color: var(--aewp-primary-dark); }
.aewp-map { min-height: 350px; background: #f2f3f3 center/cover no-repeat; }
.aewp-map img { display: block; width: 100%; min-height: 350px; object-fit: cover; }

/* Footer */
.aewp-footer { background: var(--aewp-primary-dark); color: #fff; padding: 55px 0 28px; }
.aewp-footer-grid { display: grid; grid-template-columns: 1.25fr .8fr .8fr .9fr; gap: 38px; }
.aewp-footer h3 { margin: 0 0 17px; font-size: 17px; text-transform: uppercase; }
.aewp-footer p, .aewp-footer li, .aewp-footer a { font-size: 12px; }
.aewp-footer ul { list-style: none; padding: 0; margin: 0; }
.aewp-footer li { margin: 7px 0; }
.aewp-footer-brand { font-size: 28px; font-style: italic; font-weight: 900; }
.aewp-footer-socials { display: flex; gap: 8px; margin-top: 18px; }
.aewp-footer-socials a { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,.45); font-weight: 900; }
.aewp-copyright { margin-top: 34px; font-size: 12px; }

/* Blog / content */
.aewp-content-wrap { width: min(900px, calc(100% - 40px)); margin: 70px auto; }
.aewp-entry { margin-bottom: 42px; }
.aewp-entry-title { font-size: clamp(32px, 5vw, 52px); line-height: 1.05; margin: 0 0 14px; }
.aewp-entry-meta { color: var(--aewp-muted); font-size: 13px; margin-bottom: 22px; }
.aewp-entry-content { font-family: Arial, sans-serif; font-size: 17px; line-height: 1.8; }
.aewp-entry-content a { color: var(--aewp-primary-dark); text-decoration: underline; }
.aewp-post-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 25px; }
.aewp-post-card { border: 1px solid #e4e6e7; background: #fff; }
.aewp-post-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.aewp-post-card-body { padding: 22px; }
.aewp-post-card h2 { margin: 0 0 12px; font-size: 23px; line-height: 1.15; }

@media (max-width: 1024px) {
  .aewp-advantages-grid { grid-template-columns: repeat(3,1fr); }
  .aewp-services-grid { grid-template-columns: repeat(2,1fr); row-gap: 55px; }
  .aewp-portfolio-grid { grid-template-columns: repeat(3,1fr); }
  .aewp-process-track { grid-template-columns: repeat(3,1fr); gap: 42px 18px; }
  .aewp-process-track::before { display:none; }
  .aewp-footer-grid { grid-template-columns: repeat(2,1fr); }
  .aewp-nav a { padding-inline: 8px; font-size: 11px; }
}

@media (max-width: 782px) {
  .admin-bar .aewp-header.is-sticky { top: 46px; }
  .aewp-topbar .aewp-container { justify-content: center; }
  .aewp-socials { display:none; }
  .aewp-top-contact { flex-wrap: wrap; justify-content: center; padding: 7px 0; }
  .aewp-menu-toggle { display: block; }
  .aewp-navbar { min-height: 66px; }
  .aewp-nav { position: absolute; left: 0; right: 0; top: 100%; background: #fff; max-height: 0; overflow: hidden; box-shadow: 0 14px 25px rgba(0,0,0,.13); transition: max-height .25s ease; }
  .aewp-nav.is-open { max-height: 80vh; overflow-y: auto; }
  .aewp-nav ul { display: block; }
  .aewp-nav a { padding: 15px 22px; border-bottom: 1px solid #eee; }
  .aewp-hero { min-height: 470px; }
  .aewp-about-grid { grid-template-columns: 1fr; }
  .aewp-about-visual { order: -1; }
  .aewp-advantages-grid { grid-template-columns: repeat(2,1fr); }
  .aewp-portfolio-grid { grid-template-columns: repeat(2,1fr); }
  .aewp-testimonial-grid { grid-template-columns: 1fr; }
  .aewp-testimonial:nth-child(odd) { border-right: 0; }
  .aewp-skills-grid { grid-template-columns: repeat(2,1fr); }
  .aewp-project-form { grid-template-columns: 1fr; }
  .aewp-project-form .aewp-button { width: 100%; }
  .aewp-post-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .aewp-container { width: min(100% - 28px, var(--aewp-container)); }
  .aewp-section { padding: 58px 0; }
  .aewp-hero h1 { font-size: 43px; }
  .aewp-hero p { font-size: 15px; }
  .aewp-advantages-grid, .aewp-services-grid, .aewp-process-track, .aewp-skills-grid, .aewp-footer-grid { grid-template-columns: 1fr; }
  .aewp-advantage { max-width: 310px; margin: auto; }
  .aewp-services-grid { row-gap: 55px; }
  .aewp-portfolio-grid { grid-template-columns: 1fr; }
  .aewp-portfolio-item { min-height: 170px; }
  .aewp-testimonial { grid-template-columns: 62px 1fr; padding: 24px 8px; gap: 16px; }
  .aewp-avatar { width: 60px; height: 60px; }
  .aewp-post-grid { grid-template-columns: 1fr; }
  .aewp-callback { display:none; }
}