/* ==========================================================
   Brokod Ajans - Ana Stil Dosyası
   Marka renkleri: lime #C6F135 + dark #050506
   ========================================================== */

:root{
  --lime:#C6F135;
  --lime-2:#D4FF3F;
  --ink:#050506;
  --ink-2:#0b0b0d;
  --line: rgba(255,255,255,0.10);
  --line-strong: rgba(255,255,255,0.15);
  --muted: rgba(255,255,255,0.60);
  --muted-2: rgba(255,255,255,0.40);
  --white: #fff;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--ink);
  color:var(--white);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; background:none; border:0; color:inherit; }
input, textarea{ font:inherit; }
::selection{ background:var(--lime); color:#000; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:#0a0a0c; }
::-webkit-scrollbar-thumb{ background:#222; border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background:#333; }

.container{ max-width:1280px; margin:0 auto; padding:0 24px; }
.container.narrow{ max-width:960px; }
.lime{ color:var(--lime); }

/* icons */
i[data-lucide]{ width:16px; height:16px; stroke-width:2; }

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  border-radius:999px; font-weight:600; font-size:14px;
  padding:12px 20px; transition:background-color .2s ease, color .2s ease, transform .2s ease;
  white-space:nowrap;
}
.btn-lime{ background:var(--lime); color:#000; }
.btn-lime:hover{ background:var(--lime-2); }
.btn-outline{ border:1px solid var(--line-strong); color:var(--white); }
.btn-outline:hover{ background:rgba(255,255,255,0.05); }
.btn-white{ background:var(--white); color:#000; }
.btn-white:hover{ background:rgba(255,255,255,0.9); }
.btn-block{ width:100%; justify-content:center; padding:14px 24px; }

/* section helpers */
.section-eyebrow{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-2); margin-bottom:12px; }
.section-eyebrow.lime{ color:var(--lime); }
.section-title{ font-family:'Archivo',sans-serif; font-weight:900; letter-spacing:-.02em; line-height:1.02; color:var(--white); font-size: clamp(32px, 5vw, 60px); }
.section-lede{ color:var(--muted); max-width:420px; }
.section-lede-block{ color:var(--muted); max-width:520px; margin-top:20px; }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; margin-bottom:48px; }

/* ============== NAVBAR ============== */
.nav{ position:fixed; top:0; left:0; right:0; z-index:50; transition:background-color .25s ease, backdrop-filter .25s ease, border-color .25s ease; }
.nav.scrolled{ background:rgba(0,0,0,.8); backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,255,255,0.05); }
.nav-inner{ height:72px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.logo{ font-family:'Archivo',sans-serif; font-weight:900; font-size:28px; letter-spacing:-.04em; color:var(--white); }
.nav-links{ display:none; align-items:center; gap:32px; }
.nav-links a{ color:var(--muted); font-size:14px; transition:color .2s; }
.nav-links a:hover{ color:var(--lime); }
.nav-cta{ display:none; }
.nav-toggle{ display:inline-flex; padding:8px; color:var(--white); }
.nav-mobile{ display:none; background:rgba(0,0,0,.95); backdrop-filter:blur(10px); border-top:1px solid rgba(255,255,255,0.05); padding:24px; flex-direction:column; gap:16px; }
.nav-mobile.open{ display:flex; }
.nav-mobile a{ color:rgba(255,255,255,0.85); font-size:16px; }
.nav-mobile .btn{ justify-content:center; }
@media(min-width:1024px){
  .nav-links, .nav-cta{ display:inline-flex; }
  .nav-toggle{ display:none; }
  .nav-mobile{ display:none !important; }
}

/* ============== HERO ============== */
.hero{ position:relative; padding: 128px 0 96px; overflow:hidden; }
.hero-grid{ position:absolute; inset:0; opacity:.06; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px);
  background-size:56px 56px; }
.hero-glow{ position:absolute; top:-160px; right:-128px; width:500px; height:500px; border-radius:50%; background:var(--lime); opacity:.08; filter:blur(120px); pointer-events:none; }
.hero > .container{ position:relative; }
.pill-row{ display:flex; flex-wrap:wrap; gap:8px; font-size:12px; color:var(--muted); margin-bottom:24px; }
.pill{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line-strong); border-radius:999px; padding:6px 12px; }
.pill i[data-lucide]{ width:14px; height:14px; color:var(--lime); }
.hero-title{ font-family:'Archivo',sans-serif; font-weight:900; letter-spacing:-.03em; line-height:.95; color:var(--white);
  font-size: clamp(44px, 9vw, 104px); }
.hero-sub{ margin-top:28px; max-width:640px; color:var(--muted); font-size:17px; line-height:1.6; }
.hero-sub strong{ color:var(--white); font-weight:600; }
.hero-cta{ margin-top:32px; display:flex; flex-wrap:wrap; gap:12px; }
.hero-cta .btn{ padding:14px 24px; font-size:15px; }
.hero-badges{ margin-top:40px; display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.badge{ border:1px solid var(--line); background:rgba(255,255,255,.02); border-radius:16px; padding:12px 16px; font-size:13px; color:rgba(255,255,255,.8); }
.badge .lime{ margin-right:8px; }
@media(min-width:768px){
  .hero-badges{ grid-template-columns:repeat(4,1fr); }
}

/* ============== METRİKLER ============== */
.metrics{ padding: 56px 0; border-top:1px solid rgba(255,255,255,0.05); border-bottom:1px solid rgba(255,255,255,0.05); background:var(--ink-2); }
.metrics-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
@media(min-width:768px){ .metrics-grid{ grid-template-columns:repeat(3,1fr); } }
@media(min-width:1024px){ .metrics-grid{ grid-template-columns:repeat(6,1fr); } }
.metric-value{ font-family:'Archivo',sans-serif; font-weight:900; font-size:36px; line-height:1; color:var(--white); transition:color .2s; }
.metric:hover .metric-value{ color:var(--lime); }
.metric-label{ margin-top:8px; font-size:14px; color:rgba(255,255,255,.85); font-weight:500; }
.metric-note{ font-size:12px; color:var(--muted-2); margin-top:2px; }

/* ============== MARKALAR (marquee) ============== */
.brands{ padding: 56px 0; }
.brands-track-wrapper{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent); mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent); margin-top:24px; }
.brands-track{ display:flex; gap:40px; white-space:nowrap; animation: marquee 40s linear infinite; width:max-content; }
.brands-track:hover{ animation-play-state:paused; }
.brands-track span{ font-family:'Archivo',sans-serif; font-weight:600; font-size:20px; color:var(--muted-2); transition:color .2s; flex-shrink:0; }
.brands-track span:hover{ color:var(--white); }
@keyframes marquee{ 0%{ transform:translateX(0); } 100%{ transform:translateX(-50%); } }

/* ============== SERVİSLER ============== */
.services{ padding: 96px 0; }
.services-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
@media(min-width:768px){ .services-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px){ .services-grid{ grid-template-columns:repeat(3,1fr); } }
.service-card{ border:1px solid var(--line); background:rgba(255,255,255,.02); border-radius:16px; padding:26px; transition:border-color .2s, background-color .2s; }
.service-card:hover{ border-color:rgba(198,241,53,.4); background:rgba(255,255,255,.04); }
.service-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; }
.service-id{ font-family:'Courier New',monospace; font-size:12px; color:var(--muted-2); }
.round-btn{ width:36px; height:36px; border-radius:50%; border:1px solid var(--line-strong); display:inline-flex; align-items:center; justify-content:center; transition:background .2s, border-color .2s, color .2s; color:var(--white); }
.service-card:hover .round-btn, .project-card:hover .round-btn{ background:var(--lime); border-color:var(--lime); color:#000; }
.service-card h3{ font-family:'Archivo',sans-serif; font-weight:700; font-size:24px; margin-bottom:12px; }
.service-card p{ font-size:14px; color:var(--muted); line-height:1.6; margin-bottom:20px; min-height:72px; }
.tags{ display:flex; flex-wrap:wrap; gap:6px; }
.tags span{ font-size:11px; border:1px solid var(--line); background:rgba(0,0,0,.4); padding:4px 10px; border-radius:999px; color:rgba(255,255,255,.7); }

/* ============== SÜREÇ ============== */
.process{ padding: 96px 0; background:var(--ink-2); border-top:1px solid rgba(255,255,255,0.05); border-bottom:1px solid rgba(255,255,255,0.05); }
.process .section-title{ margin-top:12px; }
.process-grid{ display:grid; grid-template-columns:1fr; gap:16px; margin-top:48px; }
@media(min-width:768px){ .process-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px){ .process-grid{ grid-template-columns:repeat(4,1fr); } }
.process-card{ border:1px solid var(--line); background:rgba(0,0,0,.4); border-radius:16px; padding:24px; transition:border-color .2s; }
.process-card:hover{ border-color:rgba(198,241,53,.4); }
.process-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.process-step{ font-family:'Courier New',monospace; font-size:12px; letter-spacing:.15em; color:var(--lime); }
.process-num{ font-family:'Archivo',sans-serif; font-weight:900; font-size:36px; color:rgba(255,255,255,.1); }
.process-card h3{ font-family:'Archivo',sans-serif; font-weight:700; font-size:20px; margin-bottom:12px; }
.process-card p{ font-size:14px; color:var(--muted); line-height:1.6; margin-bottom:20px; }

/* ============== PROJELER ============== */
.projects{ padding: 96px 0; }
.projects-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
@media(min-width:768px){ .projects-grid{ grid-template-columns:repeat(2,1fr); } }
.project-card{ position:relative; overflow:hidden; border:1px solid var(--line); background:linear-gradient(135deg, rgba(255,255,255,.03), transparent); border-radius:16px; padding:32px; transition:border-color .2s; }
.project-card:hover{ border-color:rgba(198,241,53,.4); }
.project-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:24px; }
.project-cat{ font-size:11px; text-transform:uppercase; letter-spacing:.15em; color:var(--muted-2); }
.project-card h3{ font-family:'Archivo',sans-serif; font-weight:700; font-size:28px; margin-bottom:12px; }
.project-card p{ font-size:14px; color:var(--muted); line-height:1.6; margin-bottom:24px; }
.project-stats{ display:flex; gap:32px; padding-top:24px; border-top:1px solid var(--line); }
.project-stats > div{ display:flex; flex-direction:column; }
.stat-value{ font-family:'Archivo',sans-serif; font-weight:900; font-size:28px; color:var(--lime); }
.stat-label{ font-size:12px; color:var(--muted-2); margin-top:4px; }

/* ============== TESTIMONIALS ============== */
.testimonials{ padding: 96px 0; background:var(--ink-2); border-top:1px solid rgba(255,255,255,0.05); border-bottom:1px solid rgba(255,255,255,0.05); }
.testimonials .container{ max-width:960px; }
.t-head{ display:flex; align-items:center; gap:12px; margin-bottom:32px; }
.t-head i[data-lucide]{ width:32px; height:32px; color:var(--lime); }
.t-slider{ position:relative; }
.testimonial{ display:none; }
.testimonial.active{ display:block; animation: fadeIn .4s ease; }
.testimonial p{ font-family:'Archivo',sans-serif; font-weight:500; color:var(--white); letter-spacing:-.01em; line-height:1.15;
  font-size: clamp(22px, 3.4vw, 44px); }
.testimonial footer{ margin-top:40px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.t-avatar{ width:48px; height:48px; border-radius:50%; background:var(--lime); color:#000; font-family:'Archivo',sans-serif; font-weight:900; display:inline-flex; align-items:center; justify-content:center; font-size:18px; }
.testimonial footer strong{ color:var(--white); display:block; font-weight:600; }
.testimonial footer span{ color:var(--muted-2); font-size:14px; }
.t-controls{ display:flex; gap:8px; justify-content:flex-end; margin-top:24px; }
.t-controls button{ width:44px; height:44px; border-radius:50%; border:1px solid var(--line-strong); color:var(--white); display:inline-flex; align-items:center; justify-content:center; transition:background .2s; }
.t-controls button:hover{ background:rgba(255,255,255,.05); }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* ============== SEO CONTENT ============== */
.seo-content{ padding: 80px 0; background:var(--ink-2); border-top:1px solid rgba(255,255,255,0.05); }
.seo-grid{ display:grid; grid-template-columns:1fr; gap:20px 48px; color:var(--muted); line-height:1.7; margin-top:32px; }
@media(min-width:768px){ .seo-grid{ grid-template-columns:1fr 1fr; } }
.seo-grid strong{ color:var(--white); font-weight:600; }
.keyword-chips{ margin-top:40px; display:flex; flex-wrap:wrap; gap:8px; }
.keyword-chips span{ font-size:12px; border:1px solid var(--line); background:rgba(0,0,0,.4); padding:6px 12px; border-radius:999px; color:var(--muted); }

/* ============== FAQ ============== */
.faq-section{ padding: 96px 0; }
.faq-list{ margin-top:48px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.faq{ border-bottom:1px solid var(--line); }
.faq:last-child{ border-bottom:0; }
.faq summary{
  list-style:none; padding:22px 0; display:flex; justify-content:space-between; align-items:center; gap:24px; cursor:pointer;
  font-size:17px; font-weight:600; color:var(--white); transition:color .2s;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--lime); }
.faq-icon{ width:36px; height:36px; border-radius:50%; border:1px solid var(--line-strong); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform .2s; }
.faq[open] .faq-icon{ transform:rotate(45deg); }
.faq-body{ padding: 0 64px 24px 0; color:var(--muted); font-size:15px; line-height:1.6; animation: slideDown .25s ease; }
@keyframes slideDown{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }

/* ============== CONTACT ============== */
.contact{ padding: 96px 0; background:var(--ink-2); border-top:1px solid rgba(255,255,255,0.05); }
.contact-grid{ display:grid; grid-template-columns:1fr; gap:48px; align-items:flex-start; }
@media(min-width:1024px){ .contact-grid{ grid-template-columns:1fr 1fr; gap:80px; } }
.contact-cta{ margin-top:32px; display:flex; flex-wrap:wrap; gap:12px; }
.contact-list{ list-style:none; margin-top:40px; display:flex; flex-direction:column; gap:16px; }
.contact-list li, .contact-list a{ display:flex; align-items:flex-start; gap:12px; color:rgba(255,255,255,.85); line-height:1.5; }
.contact-list a:hover{ color:var(--white); }
.c-icon{ width:36px; height:36px; border-radius:50%; border:1px solid var(--line-strong); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.c-icon i[data-lucide]{ color:var(--lime); width:16px; height:16px; }
.map-wrap{ margin-top:32px; border:1px solid var(--line); border-radius:16px; overflow:hidden; aspect-ratio:16/10; background:rgba(0,0,0,.4); }
.map-wrap iframe{ width:100%; height:100%; border:0; filter: grayscale(.4) contrast(1.05) invert(.92) hue-rotate(180deg); }

.contact-form{ border:1px solid var(--line); background:rgba(0,0,0,.4); border-radius:24px; padding:32px; display:grid; gap:16px; }
.contact-form label{ display:block; font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--muted-2); margin-bottom:6px; }
.contact-form input, .contact-form textarea{
  width:100%; background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:12px;
  padding:12px 16px; color:var(--white); outline:none; transition:border-color .2s, box-shadow .2s; resize:none;
}
.contact-form input:focus, .contact-form textarea:focus{ border-color:var(--lime); box-shadow:0 0 0 3px rgba(198,241,53,.15); }
.two-col{ display:grid; grid-template-columns:1fr; gap:16px; }
@media(min-width:640px){ .two-col{ grid-template-columns:1fr 1fr; } }
.form-status{ font-size:14px; text-align:center; min-height:20px; }
.form-status.success{ color:var(--lime); }
.form-status.error{ color:#f87171; }

/* ============== FOOTER ============== */
.footer{ background:#000; border-top:1px solid var(--line); padding: 56px 0 24px; }
.footer-grid{ display:grid; grid-template-columns:1fr; gap:40px; }
@media(min-width:768px){ .footer-grid{ grid-template-columns:2fr 1fr 1fr; } }
.footer-brand p{ margin-top:16px; color:var(--muted); font-size:14px; line-height:1.6; max-width:360px; }
.socials{ margin-top:24px; display:flex; gap:12px; }
.socials a{ width:40px; height:40px; border-radius:50%; border:1px solid var(--line-strong); display:inline-flex; align-items:center; justify-content:center; color:rgba(255,255,255,.7); transition:background .2s, color .2s, border-color .2s; }
.socials a:hover{ background:var(--lime); color:#000; border-color:var(--lime); }
.footer-heading{ font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--muted-2); margin-bottom:16px; }
.footer ul{ list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer ul a, .footer ul li{ color:rgba(255,255,255,.7); font-size:14px; line-height:1.5; }
.footer ul a:hover{ color:var(--lime); }
.footer-bottom{ margin-top:48px; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; color:var(--muted-2); font-size:12px; }