/* ==========================================================================
   components.css — Buttons, cards, badges, forms, accordion, etc. (BEM)
   ========================================================================== */

/* ---- Eyebrow / kicker ---- */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-xs);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-accent-600);
  background: var(--color-accent-100);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-5);
}
.eyebrow--inverse { color: #ffe4d6; background: rgba(255,255,255,.12); }
.eyebrow__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---- Buttons ---- */
.btn {
  --btn-bg: var(--color-primary-800);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: .95rem 1.75rem;
  border-radius: var(--radius-full);
  font-weight: 700; font-size: var(--fs-sm);
  background: var(--btn-bg); color: var(--btn-fg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
  border: 1px solid transparent;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.btn--primary { --btn-bg: var(--gradient-accent); background: var(--gradient-accent); }
.btn--dark { --btn-bg: var(--color-primary-950); }
.btn--whatsapp { --btn-bg: #1ea952; }
.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--color-text);
  border-color: var(--color-border); box-shadow: none;
}
.btn--ghost:hover { background: var(--color-ink-50); }
.btn--ghost-inverse {
  --btn-bg: rgba(255,255,255,.08); --btn-fg: #fff;
  border-color: rgba(255,255,255,.28); box-shadow: none;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.btn--ghost-inverse:hover { background: rgba(255,255,255,.16); }
.btn--sm { padding: .65rem 1.25rem; font-size: var(--fs-xs); }
.btn--lg { padding: 1.15rem 2.25rem; font-size: var(--fs-md); }
.btn--block { width: 100%; }
.btn--icon { padding: .8rem; border-radius: var(--radius-full); }

.btn-group { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* ---- Trust badges (hero rozetleri) ---- */
.badge-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.trust-badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs); font-weight: 700; color: #fff;
}
.trust-badge svg { width: 16px; height: 16px; color: var(--color-accent-400); flex-shrink: 0; }

/* ---- İkon boyut düzeltmeleri (kapsayıcıya göre orantılı) ---- */
.brand__mark svg { width: 22px; height: 22px; color: #fff; }
.info-tile__icon svg { width: 24px; height: 24px; }
.faq-item__icon svg { width: 18px; height: 18px; }
.breadcrumb__sep svg { width: 14px; height: 14px; }
.breadcrumb__list a svg, .service-card__link svg, .toc__list a svg { width: 16px; height: 16px; }
.chip svg { width: 14px; height: 14px; }
.nav-toggle svg, .mobile-nav__close svg { width: 22px; height: 22px; }
.mobile-nav__link svg { width: 16px; height: 16px; opacity: .4; }
.mobile-bar__btn svg { width: 20px; height: 20px; }
.service-card__icon svg { width: 22px; height: 22px; color: #fff; }
.eyebrow svg { width: 14px; height: 14px; }

/* ---- Cards ---- */
.card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
  overflow: hidden;
  height: 100%;
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }

/* Service card */
.service-card__media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--color-ink-100); }
.service-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.service-card:hover .service-card__media img { transform: scale(1.08); }
.service-card__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(4,18,31,.55) 100%);
}
.service-card__icon {
  position: absolute; z-index: 2; bottom: var(--space-4); left: var(--space-4);
  width: 48px; height: 48px; border-radius: var(--radius-md);
  background: var(--gradient-accent);
  display: grid; place-items: center; color: #fff;
  box-shadow: var(--shadow-md);
}
.service-card__body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.service-card__title { font-size: var(--fs-lg); }
.service-card__desc { font-size: var(--fs-sm); flex: 1; }
.service-card__link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-weight: 700; font-size: var(--fs-sm); color: var(--color-primary-700);
  margin-top: var(--space-2);
}
.service-card__link svg { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-out); }
.service-card:hover .service-card__link svg { transform: translateX(4px); }

/* Feature / "Neden Biz" card */
.feature-card { padding: var(--space-8); text-align: left; }
.feature-card__icon {
  width: 56px; height: 56px; border-radius: var(--radius-md);
  background: var(--color-primary-100); color: var(--color-primary-700);
  display: grid; place-items: center; margin-bottom: var(--space-5);
}
.feature-card__icon svg { width: 28px; height: 28px; }
.feature-card__title { margin-bottom: var(--space-2); font-size: var(--fs-md); }
.feature-card__desc { font-size: var(--fs-sm); }

/* Region card */
.region-card { padding: var(--space-8); position: relative; }
.region-card__count { font-family: var(--font-heading); font-size: var(--fs-3xl); font-weight: 800; color: var(--color-primary-700); }
.region-card__title { margin-top: var(--space-2); }
.region-card__desc { font-size: var(--fs-sm); margin-block: var(--space-3) var(--space-5); }

/* Blog card */
.blog-card__media { aspect-ratio: 16/10; overflow: hidden; position: relative; background: var(--color-ink-100); }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.blog-card:hover .blog-card__media img { transform: scale(1.06); }
.blog-card__category {
  position: absolute; top: var(--space-4); left: var(--space-4);
  background: rgba(255,255,255,.92); color: var(--color-primary-800);
  font-size: var(--fs-2xs); font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-full);
}
.blog-card__body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.blog-card__meta { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-2xs); color: var(--color-text-muted); font-weight: 600; }
.blog-card__title { font-size: var(--fs-md); }
.blog-card__excerpt { font-size: var(--fs-sm); flex: 1; }

/* ---- Stat / counter ---- */
.stat { text-align: center; }
.stat__num { font-family: var(--font-heading); font-weight: 800; font-size: clamp(2rem, 4vw, var(--fs-4xl)); color: #fff; display: flex; align-items: baseline; justify-content: center; gap: 2px; }
.stat__label { font-size: var(--fs-sm); color: var(--color-text-inverse-muted); margin-top: var(--space-2); font-weight: 600; }

/* ---- FAQ accordion ---- */
.faq-item {
  border-bottom: 1px solid var(--color-border);
}
.faq-item__trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-6) var(--space-2);
  text-align: left; font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-md);
}
.faq-item__icon {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--radius-full);
  background: var(--color-primary-100); color: var(--color-primary-700);
  display: grid; place-items: center;
  transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.faq-item[data-open="true"] .faq-item__icon { transform: rotate(45deg); background: var(--color-accent-500); color: #fff; }
.faq-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-out);
}
.faq-item[data-open="true"] .faq-item__panel { grid-template-rows: 1fr; }
.faq-item__panel-inner { overflow: hidden; }
.faq-item__panel p { padding: 0 var(--space-2) var(--space-6); max-width: 68ch; font-size: var(--fs-sm); }

/* ---- Process steps ---- */
.process-step { position: relative; padding-left: var(--space-16); }
.process-step__num {
  position: absolute; left: 0; top: 0;
  width: 48px; height: 48px; border-radius: var(--radius-md);
  background: var(--gradient-accent); color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-heading); font-weight: 800; font-size: var(--fs-md);
  box-shadow: var(--shadow-sm);
}
.process-step__title { font-size: var(--fs-md); margin-bottom: var(--space-2); }
.process-step__desc { font-size: var(--fs-sm); }

/* ---- Form ---- */
.form-field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.form-field label { font-weight: 700; font-size: var(--fs-sm); }
.form-field input, .form-field textarea, .form-field select {
  padding: var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  border-color: var(--color-primary-500); background: var(--color-surface); outline: none;
}
.form-field textarea { resize: vertical; min-height: 140px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
.form-note { font-size: var(--fs-2xs); color: var(--color-text-muted); }

/* ---- Info / contact tiles ---- */
.info-tile {
  display: flex; gap: var(--space-4); align-items: flex-start;
  padding: var(--space-6);
}
.info-tile__icon {
  width: 52px; height: 52px; border-radius: var(--radius-md); flex-shrink: 0;
  background: var(--color-primary-100); color: var(--color-primary-700);
  display: grid; place-items: center;
}
.info-tile__title { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); font-weight: 700; margin-bottom: var(--space-1); }
.info-tile__value { font-size: var(--fs-md); font-weight: 700; }
.info-tile__value a:hover { color: var(--color-accent-600); }

/* ---- Tag / chip ---- */
.chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-primary-100); color: var(--color-primary-800);
  font-size: var(--fs-xs); font-weight: 700;
}

/* ---- CTA banner ---- */
.cta-banner {
  border-radius: var(--radius-xl);
  background: var(--gradient-hero);
  color: #fff;
  padding: var(--space-16) var(--space-10);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.cta-banner::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(50% 80% at 15% 100%, rgba(234,90,42,.28), transparent 65%);
}
.cta-banner > * { position: relative; z-index: 1; }
.cta-banner p { color: var(--color-text-inverse-muted); max-width: 60ch; margin-inline: auto; }
.cta-banner h2, .cta-banner h3 { color: #fff; }
.cta-banner .btn-group { justify-content: center; margin-top: var(--space-8); }

/* ---- Floating decorative blobs ---- */
.blob {
  position: absolute; border-radius: 50%;
  filter: blur(60px); opacity: .35; pointer-events: none;
  animation: float 12s ease-in-out infinite;
}
@keyframes float { 0%,100% { transform: translateY(0) translateX(0); } 50% { transform: translateY(-24px) translateX(12px); } }

/* ---- Theme toggle ---- */
.theme-toggle {
  width: 44px; height: 44px; border-radius: var(--radius-full);
  display: grid; place-items: center;
  color: var(--color-text-inverse);
  position: relative;
}
.is-scrolled .theme-toggle, .is-solid .theme-toggle { color: var(--color-primary-900); }
:root[data-theme="dark"] .is-scrolled .theme-toggle, :root[data-theme="dark"] .is-solid .theme-toggle { color: #fff; }
.theme-toggle svg { width: 20px; height: 20px; position: absolute; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.theme-toggle .icon-sun { opacity: 1; transform: scale(1) rotate(0); }
.theme-toggle .icon-moon { opacity: 0; transform: scale(.5) rotate(-90deg); }
:root[data-theme="dark"] .theme-toggle .icon-sun { opacity: 0; transform: scale(.5) rotate(90deg); }
:root[data-theme="dark"] .theme-toggle .icon-moon { opacity: 1; transform: scale(1) rotate(0); }

/* ---- Testimonial-style credibility strip (logos/values) ---- */
.marquee-strip {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--space-8);
  padding: var(--space-8) 0;
}
.marquee-strip__item { display: flex; align-items: center; gap: var(--space-3); font-weight: 700; color: var(--color-text-muted); font-size: var(--fs-sm); }
.marquee-strip__item svg { width: 22px; height: 22px; color: var(--color-primary-600); }

/* ---- Table of contents (blog) ---- */
.toc {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.toc__title { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .06em; font-weight: 800; margin-bottom: var(--space-4); color: var(--color-text-muted); }
.toc__list { display: flex; flex-direction: column; gap: var(--space-2); }
.toc__list a { font-size: var(--fs-sm); font-weight: 600; color: var(--color-primary-700); }
.toc__list a:hover { text-decoration: underline; }

/* ---- Prose (blog / long-form content) ---- */
.prose { max-width: 72ch; }
.prose h2 { margin-block: var(--space-10) var(--space-4); }
.prose h3 { margin-block: var(--space-8) var(--space-3); }
.prose p { margin-bottom: var(--space-5); font-size: var(--fs-md); }
.prose ul, .prose ol { margin-bottom: var(--space-5); padding-left: var(--space-6); list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: var(--space-2); color: var(--color-text-muted); font-size: var(--fs-md); }
.prose a { color: var(--color-primary-700); text-decoration: underline; text-underline-offset: 3px; }
.prose img { border-radius: var(--radius-lg); margin-block: var(--space-8); box-shadow: var(--shadow-md); }
.prose blockquote {
  border-left: 4px solid var(--color-accent-500);
  padding: var(--space-4) var(--space-6);
  background: var(--color-surface-alt);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin-block: var(--space-6);
  font-style: italic;
  font-size: var(--fs-md);
}