/* ===========================================================
   Chatbot WhatsApp — main.css | Sinematik Koyu Tema
   Renkler Customizer'dan gelir, :root default'ları aşağıda
   =========================================================== */
:root {
  --cwp-primary:   #25d366;
  --cwp-secondary: #128c7e;
  --cwp-accent:    #34d399;
  --cwp-dark:      #050d09;
  --cwp-darker:    #020805;
  --cwp-surface:   #0a1a0f;
  --cwp-surface2:  #0f2218;
  --cwp-border:    rgba(37,211,102,0.12);
  --cwp-border2:   rgba(37,211,102,0.06);
  --cwp-text:      #ecfdf5;
  --cwp-muted:     #6b9e7a;
  --cwp-white:     #ffffff;
  --font-display:  'Space Grotesk', sans-serif;
  --font-body:     'Plus Jakarta Sans', sans-serif;
  --max-w:         1200px;
  --nav-h:         72px;
  --r:             14px;
  --r-sm:          8px;
  --ease:          cubic-bezier(0.22,1,0.36,1);

  /* Map customizer vars */
  --cwp-primary:   var(--wp-primary,  #25d366);
  --cwp-secondary: var(--wp-secondary,#128c7e);
  --cwp-accent:    var(--wp-accent,   #34d399);
  --cwp-dark:      var(--wp-dark,     #050d09);
}

/* ── Reset ─────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body { font-family:var(--font-body); background:var(--cwp-dark); color:var(--cwp-text); overflow-x:hidden; line-height:1.7; }
img  { max-width:100%; display:block; }
a    { text-decoration:none; color:inherit; }
ul,ol { list-style:none; }
button { cursor:pointer; border:none; outline:none; font-family:inherit; }
input,select,textarea { font-family:inherit; }

/* ── Utils ─────────────────────────────────────────── */
.container   { max-width:var(--max-w); margin:0 auto; padding:0 24px; }
.section     { padding:96px 0; }
.section--darker { background:var(--cwp-darker); }
.text-center { text-align:center; }

.gradient-text {
  background:linear-gradient(120deg, var(--cwp-primary), var(--cwp-accent), #a7f3d0);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

.badge {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(37,211,102,0.1); border:1px solid rgba(37,211,102,0.25);
  color:var(--cwp-primary); font-size:.75rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  padding:6px 14px; border-radius:100px; margin-bottom:20px;
}

.section-title {
  font-family:var(--font-display); font-size:clamp(2rem,4vw,3rem);
  font-weight:700; line-height:1.15; margin-bottom:16px;
}
.section-sub { color:var(--cwp-muted); font-size:1.05rem; max-width:600px; margin:0 auto 56px; }

.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease),transform .7s var(--ease); }
.reveal.visible { opacity:1; transform:none; }

/* ── Buttons ─────────────────────────────────────── */
.btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--cwp-primary); color:#050d09;
  font-weight:800; font-size:.95rem;
  padding:15px 30px; border-radius:100px;
  transition:transform .2s, box-shadow .2s;
  box-shadow:0 4px 20px rgba(37,211,102,0.35);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 12px 32px rgba(37,211,102,0.5); }

.btn-ghost {
  display:inline-flex; align-items:center; gap:6px;
  background:transparent; border:1px solid rgba(37,211,102,0.25);
  color:var(--cwp-text); font-weight:600; font-size:.95rem;
  padding:15px 28px; border-radius:100px;
  transition:border-color .2s, background .2s;
}
.btn-ghost:hover { border-color:var(--cwp-primary); background:rgba(37,211,102,0.06); }

.btn-outline {
  display:inline-flex; align-items:center; gap:6px;
  background:transparent; border:1px solid rgba(37,211,102,0.25);
  color:var(--cwp-primary); font-weight:700; font-size:.9rem;
  padding:13px 26px; border-radius:100px;
  transition:border-color .2s, background .2s;
}
.btn-outline:hover { border-color:var(--cwp-primary); background:rgba(37,211,102,0.08); }

/* ── Navbar ─────────────────────────────────────── */
#navbar { position:fixed; top:0; left:0; right:0; z-index:1000; height:var(--nav-h); display:flex; align-items:center; transition:background .3s,box-shadow .3s; }
#navbar.scrolled { background:rgba(5,13,9,0.92); backdrop-filter:blur(20px); box-shadow:0 1px 0 var(--cwp-border); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; width:100%; }

.nav-logo { display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:1.05rem; }
.nav-logo img { height:36px; width:auto; }
.nav-logo-icon { width:36px; height:36px; border-radius:10px; background:var(--cwp-primary); display:flex; align-items:center; justify-content:center; color:#050d09; }
.nav-logo-text { font-weight:700; }

.nav-links { display:flex; align-items:center; gap:28px; }
.nav-links a { font-size:.88rem; font-weight:500; color:var(--cwp-muted); transition:color .2s; }
.nav-links a:hover { color:var(--cwp-primary); }

.btn-nav {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(37,211,102,0.12); border:1px solid rgba(37,211,102,0.3);
  color:var(--cwp-primary); font-weight:700; font-size:.82rem;
  padding:9px 20px; border-radius:100px;
  transition:background .2s, box-shadow .2s;
}
.btn-nav-dot { width:7px; height:7px; border-radius:50%; background:var(--cwp-primary); animation:pulse-dot 2s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(.8)} }
.btn-nav:hover { background:rgba(37,211,102,0.2); box-shadow:0 0 20px rgba(37,211,102,0.2); }

.nav-burger { display:none; flex-direction:column; gap:5px; width:28px; background:none; }
.nav-burger span { display:block; height:2px; background:var(--cwp-text); border-radius:2px; transition:all .3s; }
.nav-mobile { display:none; position:fixed; top:var(--nav-h); left:0; right:0; background:rgba(5,13,9,.97); backdrop-filter:blur(20px); padding:24px; flex-direction:column; gap:4px; border-bottom:1px solid var(--cwp-border); z-index:999; }
.nav-mobile.open { display:flex; }
.nav-mobile a { padding:12px 16px; border-radius:var(--r-sm); color:var(--cwp-muted); font-weight:500; transition:background .2s,color .2s; }
.nav-mobile a:hover { background:var(--cwp-surface); color:var(--cwp-text); }
.nav-mob-cta { color:var(--cwp-primary)!important; font-weight:700!important; }

/* ── HERO ─────────────────────────────────────── */
#hero { min-height:100vh; display:flex; align-items:center; position:relative; overflow:hidden; padding-top:var(--nav-h); }

.hero-bg { position:absolute; inset:0; z-index:0; }
.hero-glow-1 { position:absolute; width:600px; height:600px; border-radius:50%; background:radial-gradient(circle, rgba(37,211,102,.18) 0%, transparent 70%); top:-100px; left:-200px; animation:glow-drift 8s ease-in-out infinite alternate; }
.hero-glow-2 { position:absolute; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle, rgba(18,140,126,.12) 0%, transparent 70%); bottom:-50px; right:-100px; animation:glow-drift 10s ease-in-out infinite alternate-reverse; }
@keyframes glow-drift { from{transform:translate(0,0)} to{transform:translate(40px,30px)} }
.hero-grid-lines { position:absolute; inset:0; opacity:.03; background-image:linear-gradient(rgba(37,211,102,.8) 1px,transparent 1px),linear-gradient(90deg,rgba(37,211,102,.8) 1px,transparent 1px); background-size:60px 60px; }

/* Floating bubbles via JS */
.bubble-field { position:absolute; inset:0; overflow:hidden; }
.float-bubble {
  position:absolute; border-radius:18px 18px 18px 4px;
  background:var(--cwp-surface); border:1px solid var(--cwp-border);
  padding:10px 14px; font-size:.75rem; color:var(--cwp-muted);
  white-space:nowrap; pointer-events:none;
  animation:bubble-float linear infinite;
  opacity:0;
}
@keyframes bubble-float {
  0%   { transform:translateY(100vh) translateX(0); opacity:0; }
  10%  { opacity:.6; }
  90%  { opacity:.4; }
  100% { transform:translateY(-20vh) translateX(30px); opacity:0; }
}

.hero-inner { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; padding:80px 24px; }
.hero-eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--cwp-primary); margin-bottom:24px; }
.eyebrow-dot { width:8px; height:8px; border-radius:50%; background:var(--cwp-primary); box-shadow:0 0 10px var(--cwp-primary); animation:pulse-dot 2s infinite; flex-shrink:0; }
.hero-title { font-family:var(--font-display); font-size:clamp(2.5rem,5vw,4rem); font-weight:700; line-height:1.1; margin-bottom:24px; }
.hero-desc { font-size:1.05rem; color:var(--cwp-muted); line-height:1.8; margin-bottom:36px; max-width:500px; }
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:48px; }

.hero-stats { display:flex; gap:28px; flex-wrap:wrap; padding-top:32px; border-top:1px solid var(--cwp-border); }
.hero-stat-num { font-family:var(--font-display); font-size:1.8rem; font-weight:700; color:var(--cwp-primary); line-height:1; text-shadow:0 0 20px rgba(37,211,102,.4); }
.hero-stat-label { font-size:.78rem; color:var(--cwp-muted); margin-top:4px; }

/* Phone Mockup */
.hero-visual { position:relative; display:flex; justify-content:center; }
.phone-wrap { position:relative; width:280px; }
.phone-frame { background:linear-gradient(145deg, #1a2e1f, #0a1a0f); border:2px solid rgba(37,211,102,.2); border-radius:44px; padding:10px; box-shadow:0 40px 80px rgba(0,0,0,.7),0 0 0 1px rgba(37,211,102,.05),inset 0 1px 0 rgba(37,211,102,.1); }
.phone-notch { width:80px; height:24px; background:#0a1a0f; border-radius:0 0 16px 16px; margin:0 auto 8px; }
.phone-screen { background:var(--cwp-surface); border-radius:34px; overflow:hidden; display:flex; flex-direction:column; height:520px; }

/* WhatsApp Header */
.wa-header { background:#075e54; padding:12px 14px; display:flex; align-items:center; gap:10px; flex-shrink:0; }
.wa-avatar { width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.wa-header-info { flex:1; }
.wa-name { font-weight:700; font-size:.82rem; color:#fff; }
.wa-status { font-size:.68rem; color:#a7f3d0; }
.wa-header-dots { color:rgba(255,255,255,.7); font-size:1.2rem; }

/* Messages */
.wa-messages { flex:1; overflow-y:auto; padding:12px 10px; display:flex; flex-direction:column; gap:6px; background:#0d1f13; scrollbar-width:none; }
.wa-messages::-webkit-scrollbar { display:none; }
.wa-date-divider { text-align:center; font-size:.65rem; color:var(--cwp-muted); background:rgba(0,0,0,.3); padding:3px 8px; border-radius:6px; align-self:center; margin-bottom:4px; }
.wa-msg { max-width:85%; padding:8px 10px 18px; border-radius:8px; position:relative; font-size:.75rem; line-height:1.4; opacity:0; transform:translateY(8px); transition:opacity .4s,transform .4s; }
.wa-msg.visible { opacity:1; transform:none; }
.wa-msg--in { background:#1e3a24; border-radius:0 8px 8px 8px; align-self:flex-start; color:#d1fae5; }
.wa-msg--out { background:#056334; border-radius:8px 8px 0 8px; align-self:flex-end; color:#ecfdf5; }
.wa-time { position:absolute; bottom:4px; right:8px; font-size:.55rem; color:rgba(255,255,255,.45); }
.wa-ticks { color:rgba(255,255,255,.5); }
.wa-ticks.blue { color:#53bdeb; }
.wa-typing { background:#1e3a24; border-radius:0 8px 8px 8px; align-self:flex-start; padding:10px 14px; display:flex; gap:4px; align-items:center; opacity:0; transition:opacity .4s; }
.wa-typing.visible { opacity:1; }
.typing-dot { width:6px; height:6px; border-radius:50%; background:#25d366; animation:typing-anim 1.2s ease-in-out infinite; }
.typing-dot:nth-child(2) { animation-delay:.2s; }
.typing-dot:nth-child(3) { animation-delay:.4s; }
@keyframes typing-anim { 0%,60%,100%{transform:translateY(0);opacity:.4} 30%{transform:translateY(-4px);opacity:1} }

/* Input */
.wa-input-bar { background:#0a1a0f; padding:8px 10px; display:flex; align-items:center; gap:8px; flex-shrink:0; }
.wa-input-field { flex:1; background:#1e3a24; border-radius:20px; padding:8px 12px; font-size:.72rem; color:var(--cwp-muted); }
.wa-send-btn { width:32px; height:32px; border-radius:50%; background:var(--cwp-primary); display:flex; align-items:center; justify-content:center; flex-shrink:0; }

/* Phone Badges */
.phone-badge { position:absolute; background:rgba(10,26,15,.95); backdrop-filter:blur(16px); border:1px solid var(--cwp-border); border-radius:12px; padding:10px 14px; display:flex; align-items:center; gap:10px; animation:float-badge 4s ease-in-out infinite; white-space:nowrap; }
.badge-1 { top:8%; right:-10%; animation-delay:.5s; }
.badge-2 { bottom:18%; left:-12%; animation-delay:1s; }
@keyframes float-badge { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.phone-badge span { font-size:1.3rem; }
.phone-badge strong { display:block; font-size:.8rem; font-weight:700; color:var(--cwp-text); }
.phone-badge small { font-size:.68rem; color:var(--cwp-muted); }

/* ── Stats Strip ─────────────────────────────── */
.stats-strip { padding:20px 0; border-top:1px solid var(--cwp-border); border-bottom:1px solid var(--cwp-border); overflow:hidden; background:var(--cwp-surface); }
.stats-strip-inner { display:flex; gap:40px; animation:marquee 30s linear infinite; width:max-content; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.strip-item { display:flex; align-items:center; white-space:nowrap; color:var(--cwp-muted); font-size:.85rem; font-weight:600; }

/* ── Services ─────────────────────────────────── */
.services-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:20px; }
.service-card { background:var(--cwp-surface); border:1px solid var(--cwp-border2); border-radius:var(--r); padding:28px; position:relative; overflow:hidden; transition:border-color .3s,transform .3s,box-shadow .3s; }
.service-card::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 0%, rgba(37,211,102,.08) 0%, transparent 60%); opacity:0; transition:opacity .3s; }
.service-card:hover { border-color:rgba(37,211,102,.25); transform:translateY(-4px); box-shadow:0 20px 48px rgba(0,0,0,.5),0 0 30px rgba(37,211,102,.05); }
.service-card:hover::before { opacity:1; }
.service-icon { font-size:1.8rem; margin-bottom:16px; display:block; }
.service-card h3 { font-family:var(--font-display); font-size:1.05rem; font-weight:700; margin-bottom:10px; }
.service-card p { color:var(--cwp-muted); font-size:.88rem; line-height:1.7; }
.service-card-glow { position:absolute; bottom:-20px; right:-20px; width:80px; height:80px; border-radius:50%; background:radial-gradient(circle,rgba(37,211,102,.1),transparent); pointer-events:none; }

/* ── Features Bento ─────────────────────────── */
.features-bento { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.bento-item { background:var(--cwp-surface); border:1px solid var(--cwp-border2); border-radius:var(--r); padding:28px; transition:border-color .3s; }
.bento-item:hover { border-color:rgba(37,211,102,.2); }
.bento-large { grid-column:span 2; }
.bento-right { grid-column:2 / span 2; }
.bento-icon { font-size:2rem; margin-bottom:14px; display:block; }
.bento-item h3 { font-family:var(--font-display); font-size:1.1rem; font-weight:700; margin-bottom:10px; }
.bento-item p { color:var(--cwp-muted); font-size:.85rem; line-height:1.7; }
.bento-tag { display:inline-block; margin-top:12px; background:rgba(37,211,102,.1); color:var(--cwp-primary); font-size:.72rem; font-weight:700; padding:4px 10px; border-radius:100px; }
.bento-trust-badges { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.bento-trust-badges span { background:rgba(37,211,102,.08); border:1px solid rgba(37,211,102,.2); color:var(--cwp-accent); font-size:.75rem; font-weight:700; padding:4px 10px; border-radius:6px; }

/* Mini chat preview */
.bento-chat-preview { margin-top:20px; display:flex; flex-direction:column; gap:8px; }
.mini-bubble { padding:8px 12px; border-radius:10px; font-size:.78rem; max-width:85%; line-height:1.5; }
.mini-bubble.out { background:#056334; color:#ecfdf5; border-radius:10px 10px 0 10px; align-self:flex-end; }
.mini-bubble.in  { background:#1e3a24; color:#d1fae5; border-radius:10px 10px 10px 0; align-self:flex-start; }

/* ── Why Us ─────────────────────────────────── */
.why-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
.why-left h2 { font-family:var(--font-display); font-size:clamp(1.8rem,3vw,2.6rem); font-weight:700; margin-bottom:20px; line-height:1.2; }
.why-left p { color:var(--cwp-muted); font-size:.95rem; line-height:1.8; margin-bottom:16px; }
.why-quote { border-left:3px solid var(--cwp-primary); padding:16px 20px; background:rgba(37,211,102,.05); border-radius:0 var(--r-sm) var(--r-sm) 0; margin-top:24px; }
.why-quote p { color:var(--cwp-text); font-style:italic; font-size:.95rem; margin:0 0 8px; }
.why-quote cite { font-size:.8rem; color:var(--cwp-muted); }
.why-features { display:flex; flex-direction:column; gap:14px; }
.why-feature { display:flex; align-items:flex-start; gap:14px; background:var(--cwp-surface); border:1px solid var(--cwp-border2); border-radius:var(--r); padding:18px 20px; transition:border-color .2s; }
.why-feature:hover { border-color:rgba(37,211,102,.2); }
.why-icon { font-size:1.4rem; flex-shrink:0; }
.why-feature h4 { font-weight:700; margin-bottom:4px; font-size:.9rem; }
.why-feature p { color:var(--cwp-muted); font-size:.82rem; line-height:1.6; }

/* ── Process ─────────────────────────────────── */
.process-steps { display:grid; grid-template-columns:repeat(5,1fr); gap:0; position:relative; list-style:none; }
.process-steps::before { content:''; position:absolute; top:27px; left:10%; right:10%; height:1px; background:linear-gradient(90deg,transparent,var(--cwp-primary),transparent); }
.process-step { text-align:center; padding:0 14px; }
.process-num { width:54px; height:54px; border-radius:50%; background:linear-gradient(135deg,var(--cwp-secondary),var(--cwp-primary)); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:1rem; margin:0 auto 18px; position:relative; z-index:1; color:#050d09; box-shadow:0 0 20px rgba(37,211,102,.3); }
.process-step h4 { font-family:var(--font-display); font-size:.85rem; font-weight:700; margin-bottom:6px; }
.process-step p { color:var(--cwp-muted); font-size:.78rem; line-height:1.6; }

/* ── Testimonials ─────────────────────────────── */
.testimonials-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; }
.testimonial-card { background:var(--cwp-surface); border:1px solid var(--cwp-border2); border-radius:var(--r); padding:28px; position:relative; }
.testimonial-wa-icon { color:var(--cwp-primary); margin-bottom:12px; }
.testimonial-stars { color:#fbbf24; font-size:1rem; margin-bottom:14px; }
.testimonial-text { color:var(--cwp-muted); font-size:.9rem; line-height:1.8; margin-bottom:20px; font-style:italic; }
.testimonial-author { display:flex; align-items:center; gap:12px; }
.testimonial-avatar { width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,var(--cwp-secondary),var(--cwp-primary)); display:flex; align-items:center; justify-content:center; font-weight:800; color:#050d09; font-size:.9rem; flex-shrink:0; }
.testimonial-name { font-weight:700; font-size:.88rem; }
.testimonial-company { color:var(--cwp-primary); font-size:.78rem; font-weight:600; }

/* ── FAQ ─────────────────────────────────────── */
.faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.faq-item { background:var(--cwp-surface); border:1px solid var(--cwp-border2); border-radius:var(--r-sm); overflow:hidden; transition:border-color .2s; }
.faq-item.open { border-color:rgba(37,211,102,.3); }
.faq-question { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; background:none; color:var(--cwp-text); font-size:.85rem; font-weight:600; text-align:left; cursor:pointer; transition:background .2s; }
.faq-question:hover { background:rgba(37,211,102,.04); }
.faq-icon { flex-shrink:0; width:22px; height:22px; border-radius:50%; background:rgba(37,211,102,.1); border:1px solid rgba(37,211,102,.25); display:flex; align-items:center; justify-content:center; color:var(--cwp-primary); font-size:.9rem; font-weight:900; transition:transform .3s; }
.faq-item.open .faq-icon { transform:rotate(45deg); }
.faq-answer { max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.faq-item.open .faq-answer { max-height:300px; }
.faq-answer-inner { padding:0 18px 16px; color:var(--cwp-muted); font-size:.83rem; line-height:1.7; }

/* ── Contact ─────────────────────────────────── */
.cta-inner { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.cta-left h2 { font-family:var(--font-display); font-size:clamp(1.8rem,3vw,2.8rem); font-weight:700; margin-bottom:16px; }
.cta-left p { color:var(--cwp-muted); font-size:.95rem; line-height:1.8; }
.contact-info-list { display:flex; flex-direction:column; gap:14px; margin-top:28px; }
.cii { display:flex; align-items:center; gap:12px; }
.cii > span { font-size:1.2rem; }
.cii-lbl { font-size:.72rem; color:var(--cwp-muted); text-transform:uppercase; letter-spacing:.08em; }
.cii-val { font-weight:700; font-size:1rem; }

.contact-form-wrap { background:var(--cwp-surface); border:1px solid var(--cwp-border); border-radius:var(--r); overflow:hidden; }
.contact-form-header { display:flex; align-items:center; gap:8px; padding:16px 24px; background:var(--cwp-surface2); border-bottom:1px solid var(--cwp-border); font-size:.82rem; font-weight:600; color:var(--cwp-muted); }
.wa-online-dot { width:8px; height:8px; border-radius:50%; background:var(--cwp-primary); animation:pulse-dot 2s infinite; }
.contact-form { padding:28px; }

.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-group { display:flex; flex-direction:column; gap:5px; margin-bottom:14px; }
.form-group label { font-size:.75rem; font-weight:700; color:var(--cwp-muted); text-transform:uppercase; letter-spacing:.06em; }
.form-group input, .form-group select, .form-group textarea { background:rgba(255,255,255,.04); border:1px solid var(--cwp-border); border-radius:var(--r-sm); color:var(--cwp-text); font-size:.88rem; padding:11px 14px; transition:border-color .2s,background .2s; outline:none; }
.form-group input:focus,.form-group select:focus,.form-group textarea:focus { border-color:var(--cwp-primary); background:rgba(37,211,102,.04); }
.form-group textarea { resize:vertical; min-height:90px; }
.form-group select option { background:var(--cwp-dark); }
.btn-submit { width:100%; background:var(--cwp-primary); color:#050d09; font-weight:800; font-size:.95rem; padding:15px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; gap:8px; transition:opacity .2s,transform .2s,box-shadow .2s; box-shadow:0 4px 20px rgba(37,211,102,.3); }
.btn-submit:hover { opacity:.9; transform:translateY(-1px); box-shadow:0 8px 28px rgba(37,211,102,.4); }
.form-note { text-align:center; font-size:.72rem; color:var(--cwp-muted); margin-top:12px; }

/* ── Blog ─────────────────────────────────────── */
.blog-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; }
.blog-card { background:var(--cwp-surface); border:1px solid var(--cwp-border2); border-radius:var(--r-sm); padding:18px; display:flex; flex-direction:column; gap:8px; transition:border-color .2s,transform .2s; }
.blog-card:hover { border-color:rgba(37,211,102,.25); transform:translateY(-2px); }
.blog-card a { display:flex; flex-direction:column; gap:8px; height:100%; }
.blog-num { font-family:var(--font-display); font-size:1.8rem; font-weight:700; color:rgba(37,211,102,.15); line-height:1; }
.blog-cat { font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--cwp-primary); }
.blog-card h4 { font-size:.82rem; font-weight:700; line-height:1.4; color:var(--cwp-text); }
.blog-card a:hover h4 { color:var(--cwp-primary); }
.blog-views { font-size:.7rem; color:var(--cwp-muted); margin-top:auto; }
.blog-arrow { font-size:.75rem; font-weight:700; color:var(--cwp-primary); }

/* ── Footer ─────────────────────────────────── */
footer { background:var(--cwp-darker); border-top:1px solid var(--cwp-border); padding:0 0 32px; }
.footer-wave { line-height:0; overflow:hidden; background:var(--cwp-dark); }
.footer-wave svg { display:block; width:100%; height:60px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px; padding-top:48px; }
.footer-brand p { color:var(--cwp-muted); font-size:.85rem; line-height:1.8; margin:16px 0 20px; }
.footer-logo-text { font-family:var(--font-display); font-size:1.1rem; font-weight:700; display:flex; align-items:center; gap:8px; }
.footer-wa-icon { color:var(--cwp-primary); }
.footer-logo-link img { height:36px; width:auto; }
.footer-social { display:flex; gap:8px; }
.social-btn { width:36px; height:36px; border-radius:10px; background:var(--cwp-surface); border:1px solid var(--cwp-border); display:flex; align-items:center; justify-content:center; font-size:.9rem; transition:border-color .2s,background .2s; }
.social-btn:hover { border-color:var(--cwp-primary); background:rgba(37,211,102,.08); }
.footer-col h5 { font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--cwp-muted); margin-bottom:14px; }
.footer-col ul { display:flex; flex-direction:column; gap:10px; }
.footer-col ul li a { color:var(--cwp-muted); font-size:.85rem; transition:color .2s; }
.footer-col ul li a:hover { color:var(--cwp-primary); }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; padding-top:24px; border-top:1px solid var(--cwp-border); font-size:.8rem; color:var(--cwp-muted); flex-wrap:wrap; gap:12px; }
.footer-bottom-links { display:flex; gap:20px; }
.footer-bottom-links a { color:var(--cwp-muted); transition:color .2s; }
.footer-bottom-links a:hover { color:var(--cwp-primary); }

/* ── WhatsApp Float ─────────────────────────── */
.wa-float { position:fixed; bottom:28px; right:28px; z-index:998; width:60px; height:60px; border-radius:50%; background:var(--cwp-primary); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(37,211,102,.5); transition:transform .2s,box-shadow .2s; }
.wa-float:hover { transform:scale(1.1); box-shadow:0 12px 32px rgba(37,211,102,.65); }
.wa-float-pulse { position:absolute; inset:-4px; border-radius:50%; background:rgba(37,211,102,.3); animation:ring-pulse 2.5s ease-out infinite; }
@keyframes ring-pulse { 0%{transform:scale(1);opacity:.8} 100%{transform:scale(1.6);opacity:0} }

.back-top { position:fixed; bottom:96px; right:28px; z-index:997; width:42px; height:42px; border-radius:12px; background:var(--cwp-surface); border:1px solid var(--cwp-border); display:flex; align-items:center; justify-content:center; font-size:1rem; opacity:0; transition:opacity .3s,transform .2s; pointer-events:none; color:var(--cwp-text); }
.back-top.visible { opacity:1; pointer-events:all; }
.back-top:hover { transform:translateY(-2px); }

/* ── Single Post ─────────────────────────────── */
.single-post-wrap { padding:80px 0 64px; }
.breadcrumb { font-size:.8rem; color:var(--cwp-muted); margin-bottom:28px; display:flex; flex-wrap:wrap; gap:4px; align-items:center; padding-top:var(--nav-h); }
.breadcrumb a { color:var(--cwp-primary); }
.single-cat-badge { display:inline-block; background:rgba(37,211,102,.1); border:1px solid rgba(37,211,102,.25); color:var(--cwp-primary); font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:4px 12px; border-radius:100px; margin-bottom:16px; }
.single-title { font-family:var(--font-display); font-size:clamp(1.8rem,4vw,3rem); font-weight:700; line-height:1.2; margin-bottom:20px; }
.single-meta { display:flex; flex-wrap:wrap; gap:16px; color:var(--cwp-muted); font-size:.85rem; margin-bottom:32px; }
.single-meta-item { display:flex; align-items:center; gap:5px; }
.single-thumbnail { border-radius:var(--r); overflow:hidden; margin-bottom:36px; }
.single-thumbnail img { width:100%; aspect-ratio:16/9; object-fit:cover; }
.single-content { max-width:760px; }
.single-content h2,.single-content h3 { font-family:var(--font-display); font-weight:700; margin:32px 0 12px; }
.single-content h2 { font-size:1.6rem; }
.single-content h3 { font-size:1.3rem; }
.single-content p { margin-bottom:18px; line-height:1.8; color:var(--cwp-muted); }
.single-content p:first-child { font-size:1.05rem; color:var(--cwp-text); }
.single-content ul,.single-content ol { padding-left:22px; margin-bottom:18px; }
.single-content li { color:var(--cwp-muted); line-height:1.7; }
.single-content ul li { list-style:disc; }
.single-content ol li { list-style:decimal; }
.single-content a { color:var(--cwp-primary); text-decoration:underline; }
.single-content blockquote { border-left:3px solid var(--cwp-primary); padding:14px 20px; margin:28px 0; background:rgba(37,211,102,.05); border-radius:0 var(--r-sm) var(--r-sm) 0; }
.single-content blockquote p { color:var(--cwp-text); font-style:italic; margin:0; }
.single-content pre { background:var(--cwp-surface); border:1px solid var(--cwp-border); border-radius:var(--r-sm); padding:20px; overflow-x:auto; margin-bottom:20px; }
.single-content code { font-size:.85rem; font-family:'Courier New',monospace; }
.single-tags { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:36px; padding-top:28px; border-top:1px solid var(--cwp-border); font-size:.85rem; color:var(--cwp-muted); }
.tag-pill { background:var(--cwp-surface); border:1px solid var(--cwp-border); color:var(--cwp-muted); font-size:.78rem; padding:4px 12px; border-radius:100px; transition:color .2s,border-color .2s; }
.tag-pill:hover { color:var(--cwp-primary); border-color:rgba(37,211,102,.3); }
.single-share { margin-top:28px; padding:20px; background:var(--cwp-surface); border-radius:var(--r-sm); border:1px solid var(--cwp-border); }
.single-share p { font-weight:600; margin-bottom:10px; font-size:.88rem; }
.share-buttons { display:flex; gap:10px; flex-wrap:wrap; }
.share-btn { display:inline-flex; align-items:center; gap:5px; padding:9px 16px; border-radius:100px; font-size:.78rem; font-weight:700; transition:opacity .2s; }
.share-wa { background:rgba(37,211,102,.15); color:#25d366; border:1px solid rgba(37,211,102,.3); }
.share-twitter { background:rgba(29,161,242,.15); color:#1da1f2; border:1px solid rgba(29,161,242,.3); }
.share-linkedin { background:rgba(0,119,181,.15); color:#0077b5; border:1px solid rgba(0,119,181,.3); }
.share-btn:hover { opacity:.8; }
.single-nav { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:36px; }
.single-nav-item { background:var(--cwp-surface); border:1px solid var(--cwp-border); border-radius:var(--r-sm); padding:18px; transition:border-color .2s; }
.single-nav-item:hover { border-color:rgba(37,211,102,.25); }
.single-nav-next { text-align:right; }
.nav-direction { display:block; font-size:.72rem; color:var(--cwp-muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:4px; }
.nav-title { display:block; font-weight:700; font-size:.85rem; line-height:1.4; }
.related-posts { margin-top:40px; padding-top:40px; border-top:1px solid var(--cwp-border); }
.related-title { font-family:var(--font-display); font-size:1.3rem; font-weight:700; margin-bottom:20px; }
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.related-card { background:var(--cwp-surface); border:1px solid var(--cwp-border); border-radius:var(--r-sm); overflow:hidden; transition:border-color .2s,transform .2s; }
.related-card:hover { border-color:rgba(37,211,102,.2); transform:translateY(-2px); }
.related-thumb img { width:100%; aspect-ratio:3/2; object-fit:cover; }
.related-info { padding:14px; }
.related-cat { font-size:.68rem; font-weight:700; text-transform:uppercase; color:var(--cwp-primary); }
.related-info h4 { font-size:.85rem; font-weight:700; margin:5px 0 6px; line-height:1.4; }
.related-info h4 a:hover { color:var(--cwp-primary); }
.related-info time { font-size:.75rem; color:var(--cwp-muted); }
.single-cta-banner { margin-top:40px; background:linear-gradient(135deg,rgba(37,211,102,.1),rgba(18,140,126,.1)); border:1px solid rgba(37,211,102,.2); border-radius:var(--r); padding:36px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.single-cta-content h3 { font-family:var(--font-display); font-size:1.25rem; font-weight:700; margin-bottom:8px; }
.single-cta-content p { color:var(--cwp-muted); font-size:.88rem; }
.single-comments { margin-top:40px; padding-top:40px; border-top:1px solid var(--cwp-border); }
.single-comments .comments-title { font-family:var(--font-display); font-size:1.3rem; font-weight:700; margin-bottom:20px; }
.single-comments .comment-body { background:var(--cwp-surface); border:1px solid var(--cwp-border); border-radius:var(--r-sm); padding:18px; margin-bottom:10px; }
.single-comments .comment-author { font-weight:700; margin-bottom:4px; }
.single-comments .comment-metadata { font-size:.75rem; color:var(--cwp-muted); margin-bottom:10px; }
.single-comments .comment-content p { color:var(--cwp-muted); font-size:.88rem; }
.single-comments .comment-reply-link { font-size:.78rem; color:var(--cwp-primary); font-weight:600; }
.comment-form input,.comment-form textarea { background:rgba(255,255,255,.04)!important; border:1px solid var(--cwp-border)!important; border-radius:var(--r-sm)!important; color:var(--cwp-text)!important; font-family:var(--font-body)!important; padding:10px 14px!important; width:100%!important; }
.comment-form input:focus,.comment-form textarea:focus { border-color:var(--cwp-primary)!important; outline:none!important; }
.comment-form .submit { background:var(--cwp-primary)!important; color:#050d09!important; font-weight:800!important; padding:11px 26px!important; border-radius:100px!important; cursor:pointer!important; }

/* ── Archive ─────────────────────────────────── */
.archive-wrap { padding:80px 0 64px; }
.archive-header { padding-top:var(--nav-h); margin-bottom:40px; }
.archive-title { font-family:var(--font-display); font-size:clamp(2rem,4vw,3rem); font-weight:700; }
.archive-desc { color:var(--cwp-muted); margin-top:10px; max-width:600px; }
.archive-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:24px; }
.archive-card { background:var(--cwp-surface); border:1px solid var(--cwp-border); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; transition:border-color .2s,transform .2s; }
.archive-card:hover { border-color:rgba(37,211,102,.2); transform:translateY(-3px); }
.archive-card-thumb img { width:100%; aspect-ratio:16/9; object-fit:cover; }
.archive-card-thumb--placeholder { aspect-ratio:16/9; background:var(--cwp-darker); display:flex; align-items:center; justify-content:center; font-size:2.5rem; }
.archive-card-body { padding:22px; display:flex; flex-direction:column; flex:1; }
.archive-card-cat { font-size:.7rem; font-weight:700; text-transform:uppercase; color:var(--cwp-primary); margin-bottom:8px; }
.archive-card-title { font-family:var(--font-display); font-size:1.05rem; font-weight:700; margin-bottom:10px; line-height:1.35; }
.archive-card-title a:hover { color:var(--cwp-primary); }
.archive-card-excerpt { color:var(--cwp-muted); font-size:.85rem; line-height:1.7; margin-bottom:16px; flex:1; }
.archive-card-meta { display:flex; gap:14px; font-size:.75rem; color:var(--cwp-muted); margin-bottom:14px; }
.archive-card-link { color:var(--cwp-primary); font-size:.82rem; font-weight:700; margin-top:auto; }
.archive-pagination { margin-top:40px; }
.archive-pagination .nav-links { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.archive-pagination .page-numbers { width:42px; height:42px; border-radius:10px; background:var(--cwp-surface); border:1px solid var(--cwp-border); display:flex; align-items:center; justify-content:center; font-weight:600; font-size:.88rem; color:var(--cwp-muted); transition:all .2s; }
.archive-pagination .page-numbers:hover,.archive-pagination .page-numbers.current { border-color:var(--cwp-primary); background:rgba(37,211,102,.1); color:var(--cwp-primary); }
.archive-pagination .prev,.archive-pagination .next { width:auto; padding:0 16px; }

/* ── WP Core ─────────────────────────────────── */
.alignleft  { float:left; margin:0 20px 14px 0; }
.alignright { float:right; margin:0 0 14px 20px; }
.aligncenter { display:block; margin:0 auto 20px; }
.screen-reader-text { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ── Responsive ─────────────────────────────── */
@media (max-width:1024px) {
  .hero-inner { grid-template-columns:1fr; text-align:center; }
  .hero-desc { max-width:100%; }
  .hero-actions,.hero-stats { justify-content:center; }
  .hero-visual { display:none; }
  .why-grid,.cta-inner { grid-template-columns:1fr; }
  .features-bento { grid-template-columns:1fr 1fr; }
  .bento-large,.bento-right { grid-column:span 2; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .process-steps { grid-template-columns:1fr 1fr; gap:24px; }
  .process-steps::before { display:none; }
  .related-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
  .nav-links,.btn-nav { display:none; }
  .nav-burger { display:flex; }
  .section { padding:60px 0; }
  .faq-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .process-steps { grid-template-columns:1fr; }
  .features-bento { grid-template-columns:1fr; }
  .bento-large,.bento-right { grid-column:span 1; }
  .footer-bottom { flex-direction:column; text-align:center; }
  .single-nav { grid-template-columns:1fr; }
  .single-nav-next { text-align:left; }
  .single-cta-banner { flex-direction:column; text-align:center; }
  .related-grid { grid-template-columns:1fr; }
  .archive-grid { grid-template-columns:1fr; }
}
@media (max-width:480px) {
  .blog-grid { grid-template-columns:1fr 1fr; }
  .share-buttons { flex-direction:column; }
}