/* =============================================================
   Hero — Slide 1 (Hazır Web Sitesi Temaları)
          Slide 2 (Kolay Yönetim Paneli)
   ============================================================= */

.hero {
  position: relative;
  isolation: isolate;               /* own stacking context for the bg layers */
  background: var(--surface-warm);
  overflow-x: clip;                 /* stops arrow / tint bleed from scrolling */
  padding-top: clamp(1.25rem, 2.4vw, 2rem);
  padding-bottom: clamp(4.75rem, 6vw, 5.75rem);
}

/* One very light warm radial behind the visual (lg and up only).
   Delete this whole block if it ever reads as decoration. */
@media (min-width: 992px) {
  .hero::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 46%;
    right: -4%;
    width: min(680px, 46%);
    aspect-ratio: 1 / 1;
    transform: translateY(-50%);
    background: radial-gradient(circle at center,
                rgba(247, 148, 30, .07), rgba(247, 148, 30, 0) 70%);
    pointer-events: none;
  }
}

/* Soft technical grid — ONE continuous, full-width layer behind the whole hero.
   Pure CSS: a faint UI-style square grid (vertical lines a touch stronger than
   horizontal so it never reads as graph paper). It covers the entire hero;
   the mask only eases it down a little over the text and fades it out before
   the module strip — it is NOT a right-side-only effect. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;                      /* above .hero's own background, below all content */
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to right,  rgba(20, 43, 81, .03)  0 1px, transparent 1px 78px),
    repeating-linear-gradient(to bottom, rgba(20, 43, 81, .015) 0 1px, transparent 1px 78px);
  -webkit-mask-image:
    linear-gradient(to right, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .8) 48%, #000 100%),
    linear-gradient(to bottom, transparent 0%, #000 7%, #000 64%, transparent 92%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .8) 48%, #000 100%),
    linear-gradient(to bottom, transparent 0%, #000 7%, #000 64%, transparent 92%);
  mask-composite: intersect;
}
@media (max-width: 991.98px) {
  /* stacked layout: even, full-width grid; just eased under the top text and
     faded out before the strip */
  .hero::after {
    opacity: .82;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, #000 26%, #000 72%, transparent 92%);
    -webkit-mask-composite: source-over;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, #000 26%, #000 72%, transparent 92%);
    mask-composite: add;
  }
}

.hero-carousel {
  position: relative;
  z-index: 1;
}

.hero-row { min-height: 420px; }

/* ---- Text ------------------------------------------------------- */
.hero-text { max-width: 33rem; }

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1.1rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.hero-eyebrow__dash {
  flex: none;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand-gradient);
}

.hero-title {
  margin-bottom: 1.15rem;
  font-weight: 600;
  font-size: clamp(2.5rem, 3.6vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -.025em;
  color: var(--text-strong);
}
/* accent phrase — the gradient itself comes from the shared .u-gradient-text */
.hero-title__accent { white-space: nowrap; }

.hero-desc {
  margin-bottom: 1.9rem;
  max-width: 40ch;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text-body);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

/* ---- Visual — image is dominant, sits directly in the column ---- */
.hero-visual {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-slide-visual {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;             /* never crop the provided slider image */
  animation: hero-visual-float 5.6s ease-in-out infinite;
}

/* very soft floating presentation motion for the slide visual */
@keyframes hero-visual-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* Minimal temporary state until the real image exists — no panel, no
   shadow, no elevation. Everything here disappears once the image loads. */
.hero-visual.is-pending {
  aspect-ratio: 16 / 10;
  border: 1px dashed var(--border-strong);
  border-radius: 6px;
}
.hero-visual.is-pending .hero-slide-visual { visibility: hidden; }
.hero-visual.is-pending::after {
  content: attr(data-pending-label);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: .8125rem;
  letter-spacing: .04em;
  color: var(--text-muted);
}

/* ---- Navigation: indicators (lower-left of the slider content) ---- */
.hero-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(1.5rem, 2.5vw, 2rem);
  z-index: 4;
  pointer-events: none;
}
.hero-controls .hero-dots { pointer-events: auto; }

.hero-dots {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.hero-dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #d9d4cc;
  cursor: pointer;
  transition: width .35s ease, background-color .35s ease, opacity .35s ease;
}
.hero-dot.active {
  width: 28px;
  background: var(--brand-gradient);
}
.hero-dot:focus-visible {
  outline: 3px solid rgba(20, 43, 81, .35);
  outline-offset: 3px;
}

/* ---- Navigation: prev / next arrows (outer edges of the slider) ---- */
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: none;                    /* shown only where there is outer room */
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: #fff;
  color: var(--brand-primary);
  cursor: pointer;
  box-shadow: 0 6px 16px -12px rgba(20, 43, 81, .22);
  transition: border-color .2s ease, color .2s ease,
              box-shadow .2s ease, transform .2s ease;
}
.hero-arrow svg { display: block; }
.hero-arrow:hover {
  border-color: var(--brand-accent-secondary);
  color: var(--brand-accent-secondary);
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 10px 22px -12px rgba(20, 43, 81, .26);
}
.hero-arrow:active { transform: translateY(-50%) scale(.96); }
.hero-arrow:focus-visible {
  outline: 3px solid rgba(20, 43, 81, .35);
  outline-offset: 2px;
}

@media (min-width: 1280px) {
  .hero-arrow { display: inline-grid; }
  .hero-arrow--prev { left:  max(.5rem, calc((100vw - 1140px) / 2 - 3.25rem)); }
  .hero-arrow--next { right: max(.5rem, calc((100vw - 1140px) / 2 - 3.25rem)); }
}
@media (min-width: 1400px) {
  .hero-arrow--prev { left:  max(.75rem, calc((100vw - 1320px) / 2 - 3.25rem)); }
  .hero-arrow--next { right: max(.75rem, calc((100vw - 1320px) / 2 - 3.25rem)); }
}

/* ---- Motion: load reveal + slide transition -------------------- */
.hero-text > *,
.hero-visual {
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
              transform .7s cubic-bezier(.22, .61, .36, 1);
}

/* first-load reveal (JS adds .hero--animate, then .hero--in next frame) */
.hero--animate .hero-text > * { opacity: 0; transform: translateY(14px); }
.hero--animate .hero-visual  { opacity: 0; transform: translateX(16px); }
.hero--animate .hero-text > *:nth-child(2) { transition-delay: .05s; }
.hero--animate .hero-text > *:nth-child(3) { transition-delay: .10s; }
.hero--animate .hero-text > *:nth-child(4) { transition-delay: .15s; }
.hero--in .hero-text > *,
.hero--in .hero-visual { opacity: 1; transform: none; transition-delay: 0s; }

/* per-slide entrance — JS toggles .is-entering on the incoming slide.
   Movement only (very subtle); the crossfade handles opacity. */
.hero-carousel .carousel-item.is-entering .hero-text > * { transform: translateY(12px); }
.hero-carousel .carousel-item.is-entering .hero-visual  { transform: translateX(14px); }

/* smooth crossfade — replace Bootstrap's abrupt default */
.hero-carousel.carousel-fade .carousel-item {
  transition: opacity .72s cubic-bezier(.22, .61, .36, 1);
}
.hero-carousel.carousel-fade .active.carousel-item-start,
.hero-carousel.carousel-fade .active.carousel-item-end {
  opacity: 0;
  transition: opacity .72s cubic-bezier(.22, .61, .36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .hero--animate .hero-text > *,
  .hero--animate .hero-visual,
  .hero-carousel .carousel-item.is-entering .hero-text > *,
  .hero-carousel .carousel-item.is-entering .hero-visual {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero-slide-visual { animation: none; }
}

/* ---- Responsive --------------------------------------------- */
@media (max-width: 991.98px) {
  .hero {
    padding-top: clamp(1.75rem, 5vw, 2.5rem);
    padding-bottom: clamp(2.75rem, 9vw, 3.75rem);
  }
  .hero-text { max-width: none; }
  .hero-desc { max-width: 54ch; }
  .hero-row { min-height: 0; }

  .hero-controls {
    position: static;
    margin-top: 1.75rem;
    pointer-events: auto;
  }
  .hero-controls .container { display: flex; justify-content: center; }
}

@media (max-width: 767.98px) {
  .hero-title { font-size: clamp(2.125rem, 5.5vw, 2.5rem); }
}

@media (max-width: 575.98px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn-brand { width: 100%; }
}


/* =============================================================
   Hero scroll cue — "Detayları İnceleyin" (bottom centre)
   ============================================================= */
.hero-scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  width: max-content;
  margin: 1.25rem auto 0;              /* mobile: centred, below the dots */
  text-decoration: none;
}
.hero-scroll__label {
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: #7b8798;
  transition: color .2s ease;
}
.hero-scroll:hover .hero-scroll__label { color: var(--brand-primary); }

.hero-scroll__mouse {
  display: flex;
  justify-content: center;
  width: 22px;
  height: 34px;
  padding-top: 6px;
  border: 1.5px solid rgba(20, 43, 81, .30);
  border-radius: 12px;
}
.hero-scroll__wheel {
  width: 3.5px;
  height: 7px;
  border-radius: 2px;
  background: var(--brand-gradient);
  animation: hero-scroll-wheel 2.1s ease-in-out infinite;
}
@keyframes hero-scroll-wheel {
  0%   { transform: translateY(0);   opacity: 1; }
  50%  { transform: translateY(5px); opacity: .3; }
  100% { transform: translateY(0);   opacity: 1; }
}

@media (min-width: 992px) {
  .hero-scroll {
    position: absolute;
    left: 50%;
    bottom: clamp(.65rem, 1.3vw, 1rem);
    transform: translateX(-50%);
    margin: 0;
    z-index: 6;                        /* above the full-width dot row's hit-area */
  }
}
@media (max-width: 575.98px) {
  .hero-scroll__label { font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll__wheel { animation: none; }
}


/* =============================================================
   Modules feature strip — fixed title + horizontal module ticker
   ============================================================= */
.modules-strip {
  background: #fcfcfd;
  border-top: 1px solid #edf0f3;
  border-bottom: 1px solid #edf0f3;
  padding-block: clamp(.7rem, 1.3vw, 1rem);
  overflow-x: clip;
}
.modules-strip__defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---- Left — fixed editorial title (no card) ---- */
.modules-strip__intro {
  position: relative;
  padding-left: 1.1rem;
}
.modules-strip__intro::before {
  content: "";
  position: absolute;
  left: 0;
  top: .15rem;
  bottom: .15rem;
  width: 3px;
  border-radius: 3px;
  background: var(--brand-primary);
}
.modules-strip__label {
  display: block;
  margin-bottom: .3rem;
  font-size: .8125rem;
  font-weight: 600;                    /* matches the module item titles */
  line-height: 1.25;
  color: var(--brand-primary);        /* clean, bold, dark navy — not faint gray */
}
.modules-strip__title {
  margin: 0;
  font-weight: 700;
  font-size: clamp(1.375rem, .95rem + 1vw, 1.625rem);
  line-height: 1.12;
  letter-spacing: -.01em;
}

/* ---- Right — moving module track ---- */
.modules-strip__viewport {
  overflow: hidden;
  /* soft fade in/out at the track edges so it never looks hard-cut */
  --edge: clamp(2rem, 4vw, 4.5rem);
  -webkit-mask-image: linear-gradient(to right,
    transparent 0, #000 var(--edge),
    #000 calc(100% - var(--edge)), transparent 100%);
  mask-image: linear-gradient(to right,
    transparent 0, #000 var(--edge),
    #000 calc(100% - var(--edge)), transparent 100%);
}
@media (max-width: 575.98px) {
  .modules-strip__viewport { --edge: 1.75rem; }
}

.modules-strip__track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: modules-strip-scroll 40s linear infinite;
}
.modules-strip__viewport:hover .modules-strip__track { animation-play-state: paused; }

.modules-strip__group {
  display: flex;
  flex: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
.modules-strip__item {
  display: flex;
  align-items: center;
  gap: .875rem;
  flex: none;
  width: 250px;
  padding: 0 1.5rem;
  border-left: 1px solid #edf0f3;
}
.modules-strip__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #f5f7f9;
  color: var(--brand-primary);
}
.modules-strip__icon svg { width: 19px; height: 19px; }
.modules-strip__text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.modules-strip__item-title {
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--brand-primary);
}
.modules-strip__item-desc {
  margin-top: .1rem;
  font-size: .6875rem;
  font-weight: 400;
  line-height: 1.3;
  color: #7a8698;
}

@keyframes modules-strip-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .modules-strip__track { animation: none; }
  .modules-strip__viewport { overflow-x: auto; }
  .modules-strip__group[aria-hidden="true"] { display: none; }
}

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
  .modules-strip__intro { margin-bottom: 1rem; }
}
@media (max-width: 575.98px) {
  .modules-strip__item { width: 210px; padding: 0 1.15rem; gap: .75rem; }
  .modules-strip__icon { width: 38px; height: 38px; }
  .modules-strip__icon svg { width: 17px; height: 17px; }
}


/* =============================================================
   Özellikler / Features — curated 2-row feature ticker
   Fewer visible rows, lighter "chip-card" tiles, revealed by motion.
   ============================================================= */
.features {
  background: var(--surface-warm);
  padding-block: clamp(3rem, 2.25rem + 3.6vw, 5.25rem);
  overflow-x: clip;
}
.features .section-heading { margin-bottom: clamp(2rem, 3.6vw, 3.25rem); }

.feature-wall {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 1.8vw, 1.5rem);
}

/* ---- one moving row ---- */
.feature-row {
  overflow: hidden;
  padding-block: 4px;             /* room for the hover lift + rest shadow */
  -webkit-mask-image: linear-gradient(to right,
    transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
          mask-image: linear-gradient(to right,
    transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}
.feature-row__track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.feature-row.is-live .feature-row__track {
  animation: feature-marquee var(--dur, 90s) linear infinite;
}
.feature-row.is-live.feature-row--rtl .feature-row__track { animation-direction: reverse; }
.feature-row.is-live:hover .feature-row__track { animation-play-state: paused; }

.feature-row__group {
  display: flex;
  gap: 14px;
  padding-right: 14px;          /* keeps the loop seam gap equal to the inner gap */
  margin: 0;
  list-style: none;
}

@keyframes feature-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ---- feature chip-card: icon + title only, light and refined ---- */
.feature-card {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex: none;
  width: 190px;
  min-height: 84px;
  padding: 0 1rem;
  border: 1px solid rgba(20, 43, 81, .06);
  border-radius: 16px;
  background: rgba(255, 255, 255, .8);
  box-shadow: none;                 /* flat-premium: separation from border + background + spacing */
  transition: transform .22s ease, border-color .22s ease,
              background-color .22s ease;
}
.feature-card:hover {
  transform: translateY(-2px);
  border-color: rgba(20, 43, 81, .16);
  background: #fff;
  box-shadow: none;
}
.feature-card__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--surface-muted);
  color: var(--brand-primary);
}
.feature-card--accent .feature-card__icon {
  background: var(--brand-gradient);
  color: #fff;
}
.feature-card__glyph {
  width: 17px;
  height: 17px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.feature-card__title {
  font-family: "Poppins", system-ui, sans-serif;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.005em;
  color: var(--brand-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 991.98px) {
  .feature-card { width: 176px; min-height: 80px; }
}
@media (max-width: 575.98px) {
  .feature-row {
    -webkit-mask-image: linear-gradient(to right,
      transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);
            mask-image: linear-gradient(to right,
      transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);
  }
  .feature-card { width: 158px; min-height: 76px; gap: .55rem; padding: 0 .8rem; }
  .feature-card__icon { width: 32px; height: 32px; }
  .feature-card__title { font-size: .78125rem; }
}

@media (prefers-reduced-motion: reduce) {
  .feature-row { overflow-x: auto; overflow-y: hidden; }
  .feature-row.is-live .feature-row__track { animation: none; }
}


/* =============================================================
   Neden Uygun Web Tasarım? / Why us — package advantage boxes
   Static, readable 4×2 grid. Same section language: grid texture,
   shared section heading, fade-up reveal, flat-premium (no shadow).
   ============================================================= */
.why-us {
  background: var(--surface-warm);
  padding-block: clamp(3.25rem, 2.4rem + 3.6vw, 5.5rem);
  overflow-x: clip;
}
.why-us .section-heading {
  margin-bottom: clamp(2.25rem, 1.6rem + 3vw, 3.5rem);
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, .6rem + 1.1vw, 1.5rem);
}

.why-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;                 /* clips the hover accent line to the radius */
  padding: clamp(1.4rem, 1.15rem + .9vw, 1.85rem) clamp(1.3rem, 1.1rem + .7vw, 1.65rem);
  background: #fff;
  border: 1px solid rgba(20, 43, 81, .08);
  border-radius: 18px;
  transition: transform .24s ease, border-color .24s ease;
}
/* brand-gradient top accent — wipes in on hover, same grow language as the nav underline */
.why-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--brand-gradient);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s ease;
}
.why-card:hover {
  transform: translateY(-3px);
  border-color: rgba(20, 43, 81, .18);
}
.why-card:hover::before { transform: scaleX(1); }

.why-card__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 1.1rem;
  border-radius: 13px;
  background: var(--surface-muted);
  color: var(--brand-primary);
}
.why-card--accent .why-card__icon {
  background: var(--brand-gradient);
  color: #fff;
}
.why-card__glyph {
  width: 22px;
  height: 22px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.why-card__title {
  margin: 0 0 .5rem;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--brand-primary);
}
.why-card__text {
  margin: 0;
  font-size: .875rem;
  line-height: 1.62;
  color: var(--text-body);
}

@media (max-width: 991.98px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
  .why-grid { grid-template-columns: 1fr; }
  .why-card__icon { width: 42px; height: 42px; margin-bottom: .9rem; }
  .why-card__title { font-size: 1rem; }
}


/* =============================================================
   Fiyatlandırma / Pricing — one fixed-price package
   Left: short pitch + highlights. Right: the single price card.
   Same section language: grid texture, shared heading, fade-up,
   flat-premium (no shadow). Not a comparison table.
   ============================================================= */
.pricing {
  background: var(--surface-warm);
  padding-block: clamp(3.25rem, 2.4rem + 3.6vw, 5.5rem);
  overflow-x: clip;
}
.pricing .section-heading {
  margin-bottom: clamp(2.25rem, 1.6rem + 3vw, 3.5rem);
}

/* ---- left: promo visual + supporting intro ---- */
/* the promo image is the main balancing element of the left column —
   centred in its own track, width held slightly in so it reads as intentional */
.pricing-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 400px;
  margin: 0 auto clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
}
.pricing-visual img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;                 /* keep the promo image fully visible */
  animation: pricing-visual-float 5.8s ease-in-out infinite;
}
/* calm floating presentation motion — matches the hero visual */
@keyframes pricing-visual-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
/* minimal placeholder until the real image is added (JS toggles .is-empty) */
.pricing-visual.is-empty {
  aspect-ratio: 4 / 3;
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
}
.pricing-visual.is-empty img { display: none; }
.pricing-visual.is-empty::after {
  content: "Tanıtım görseli";
  font-size: .8125rem;
  letter-spacing: .04em;
  color: var(--text-muted);
}

.pricing-intro__title {
  margin: 0 0 .9rem;
  max-width: 34rem;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: clamp(1.0625rem, .92rem + .5vw, 1.25rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.005em;
  color: var(--brand-primary);
  text-wrap: balance;
}
.pricing-intro__text {
  margin: 0 0 1.6rem;
  max-width: 34rem;
  font-size: .9375rem;
  line-height: 1.66;
  color: var(--text-body);
}
.pricing-highlights {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .8rem;
}
.pricing-highlights li {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--brand-primary);
}
.pricing-highlights__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand-gradient);
  color: #fff;
}
.pricing-intro__reassure {
  margin: 1.5rem 0 0;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 32rem;
}
.pricing-check {
  width: 12px;
  height: 12px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- right: the single price card, vertically centred beside the left ---- */
.pricing-card-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.price-card {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  padding: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem);
  background-color: #fff;
  background-image: linear-gradient(180deg, rgba(253, 252, 250, 0) 42%, rgba(253, 252, 250, 1) 100%);
  border: 1px solid rgba(20, 43, 81, .1);
  border-radius: 24px;
  overflow: hidden;
  transition:
    transform .35s cubic-bezier(.22, .61, .36, 1),
    border-color .35s ease,
    background-image .35s ease;
}
.price-card::before {                 /* tiny gradient top accent line */
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--brand-gradient);
  transition: height .35s ease, filter .35s ease;
}
.price-card::after {                  /* premium detail: faint warm halo under the top edge, on hover only */
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  height: 112px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(250, 164, 26, .055), rgba(244, 117, 33, .012) 55%, transparent);
  opacity: 0;
  transition: opacity .4s ease;
}
.price-card:hover {
  transform: translateY(-6px);
  border-color: rgba(20, 43, 81, .22);
  background-image: linear-gradient(180deg, rgba(253, 252, 250, 0) 42%, rgba(253, 252, 250, 0) 100%);
}
.price-card:hover::before {           /* top accent a touch more vivid */
  height: 4px;
  filter: brightness(1.07);
}
.price-card:hover::after { opacity: 1; }
.price-card:hover .price-card__cta {  /* CTA feels slightly more alive with the card */
  filter: brightness(1.05);
}

/* upper block — one centred pricing hero area inside the card */
.price-card__head {
  text-align: center;
}
.price-card__badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: .8rem;
  padding: .32rem .72rem;
  border-radius: 999px;
  background: rgba(20, 43, 81, .06);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand-primary);
}
.price-card__badge::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand-gradient);
}
.price-card__title {
  margin: 0 0 .3rem;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--brand-primary);
}
.price-card__price {
  margin: 0 0 .55rem;
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 .12rem;
  font-family: "Poppins", system-ui, sans-serif;
  color: var(--brand-primary);
}
.price-card__amount {
  position: relative;
  display: inline-block;
  font-size: clamp(2.1rem, 1.7rem + 1.6vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
}
.price-card__cur {
  font-size: clamp(1.2rem, 1rem + .7vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -.01em;
}
/* brand gradient on the focal price — amount + currency read as one unit */
.price-card__amount,
.price-card__cur {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* soft diagonal sheen — a duplicate of the amount, its highlight band clipped
   to the glyphs only (never the background behind the text) */
.price-card__amount::after {
  content: attr(data-amount);
  position: absolute;
  inset: 0;
  pointer-events: none;
  white-space: nowrap;
  background: linear-gradient(105deg,
    rgba(255, 255, 255, 0) 44%,
    rgba(255, 255, 255, .82) 50%,
    rgba(255, 255, 255, 0) 56%);
  background-size: 300% 100%;
  background-repeat: no-repeat;
  background-position: 120% 0;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: price-shine 6.5s linear infinite;
}
@keyframes price-shine {
  0%   { background-position: 120% 0; }
  38%  { background-position: -40% 0; }
  100% { background-position: -40% 0; }
}
.price-card__vat {
  margin-left: .35rem;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}
.price-card__desc {
  margin: 0 auto 1.5rem;
  max-width: 24rem;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--text-body);
  text-wrap: balance;
}
.price-card__list {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 1.4rem 0 0;
  border-top: 1px solid rgba(20, 43, 81, .1);
  display: grid;
  gap: .7rem;
}
.price-card__list li {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--brand-primary);
}
.price-card__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--brand-gradient);
  color: #fff;
}
.price-card__cta {
  width: 100%;
}
.price-card__fineprint {
  margin: .8rem 0 0;
  font-size: .8125rem;
  color: var(--text-muted);
  text-align: center;
}

@media (max-width: 991.98px) {
  .pricing-card-wrap { height: auto; }
  .price-card { max-width: 480px; }
  .pricing-visual { margin-bottom: clamp(1.5rem, 1rem + 3vw, 2rem); }
}

@media (prefers-reduced-motion: reduce) {
  .pricing-visual img { animation: none; }
  .price-card__amount::after { animation: none; }
}


/* =============================================================
   Hazır Sektörel Temalar / Ready sector themes — horizontal
   scroll-snap showcase. Lightweight (no carousel lib): native
   overflow scroll + snap + arrow buttons + touch swipe.
   Same section language: grid texture, shared heading, fade-up.
   ============================================================= */
.themes {
  background: var(--surface-warm);
  padding-block: clamp(3.25rem, 2.4rem + 3.6vw, 5.5rem);
  overflow-x: clip;
}
.themes .section-heading {
  margin-bottom: clamp(2.25rem, 1.6rem + 3vw, 3.5rem);
}

/* viewport wraps the track + the two side arrows */
.themes-viewport {
  position: relative;
}
.themes-track {
  --themes-gap: clamp(1rem, .55rem + 1.1vw, 1.6rem);
  display: flex;
  gap: var(--themes-gap);
  margin: 0;
  padding: 6px 2px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  touch-action: pan-x pan-y;
}
.themes-track::-webkit-scrollbar { display: none; }
.themes-track.is-grabbing {
  cursor: grabbing;
  scroll-snap-type: none;      /* let the drag move freely; snaps back on release */
  scroll-behavior: auto;
  user-select: none;
}
.themes-track.is-grabbing .theme-card { pointer-events: none; }  /* no accidental button/link hits mid-drag */

/* =============================================================
   Shared carousel arrow — the hero slider's prev/next language,
   reused by the themes + testimonials carousels. Each carousel
   supplies only position (top / bottom / left / right).
   ============================================================= */
.carousel-nav {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: #fff;
  color: var(--brand-primary);
  cursor: pointer;
  box-shadow: 0 6px 16px -12px rgba(20, 43, 81, .22);
  transition: border-color .2s ease, color .2s ease,
              box-shadow .2s ease, transform .2s ease;
}
.carousel-nav svg { display: block; }
.carousel-nav:hover {
  border-color: var(--brand-accent-secondary);
  color: var(--brand-accent-secondary);
  transform: scale(1.06);
  box-shadow: 0 10px 22px -12px rgba(20, 43, 81, .26);
}
.carousel-nav:active { transform: scale(.96); }
.carousel-nav:disabled { opacity: 0; pointer-events: none; }
.carousel-nav:focus-visible {
  outline: 3px solid rgba(20, 43, 81, .35);
  outline-offset: 2px;
}

/* ---- themes slider arrows — position only ---- */
.themes-arrow {
  top: 0;
  bottom: 42%;                 /* centres the arrow on the preview-frame band */
  margin-block: auto;
}
.themes-arrow--prev { left: -1.75rem; }
.themes-arrow--next { right: -1.75rem; }

/* ---- slide indicators — same active-line + inactive-dot language as the hero ---- */
.themes-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: clamp(1.75rem, 1.2rem + 2vw, 2.6rem);
}
.themes-dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #d9d4cc;
  cursor: pointer;
  transition: width .35s ease, background-color .35s ease, opacity .35s ease;
}
.themes-dot.active {
  width: 28px;
  background: var(--brand-gradient);
}
.themes-dot:focus-visible {
  outline: 3px solid rgba(20, 43, 81, .35);
  outline-offset: 3px;
}

/* ---- one theme card — centred, on-brand, premium ---- */
.theme-card {
  --tc-pad: clamp(.85rem, .65rem + .8vw, 1.15rem);
  flex: 0 0 calc((100% - var(--themes-gap) * 2) / 3);
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--tc-pad) var(--tc-pad) clamp(1.25rem, 1rem + 1vw, 1.65rem);
  background: #fff;
  border: 1px solid rgba(20, 43, 81, .09);
  border-radius: 20px;
  transition:
    transform .32s cubic-bezier(.22, .61, .36, 1),
    border-color .3s ease;
}
.theme-card::before {             /* brand top accent — wipes in on hover */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--brand-gradient);
  transform: scaleX(0);
  transition: transform .34s ease;
}
.theme-card:hover {
  transform: translateY(-6px);
  border-color: rgba(20, 43, 81, .16);
}
.theme-card:hover::before { transform: scaleX(1); }

/* modern browser-window frame */
.theme-card__frame {
  width: 100%;
  margin-bottom: clamp(1rem, .8rem + .8vw, 1.4rem);
  border: 1px solid rgba(20, 43, 81, .1);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  transition: border-color .3s ease;
}
.theme-card:hover .theme-card__frame { border-color: rgba(20, 43, 81, .17); }
.theme-card__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 13px;
  background: linear-gradient(180deg, #fff, var(--surface-muted));
  border-bottom: 1px solid rgba(20, 43, 81, .06);
}
.theme-card__dots { display: flex; gap: 5px; flex: none; }
.theme-card__dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(20, 43, 81, .13);
}
.theme-card__addr {
  flex: 1;
  height: 12px;
  border-radius: 999px;
  background: rgba(20, 43, 81, .05);
}
.theme-card__shot {
  position: relative;
  aspect-ratio: 16 / 10;
  display: grid;
  overflow: hidden;
  background: linear-gradient(180deg, #fff, var(--surface-warm));
}
.theme-card__shot img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: top center;
}
.theme-card__shot.is-empty img { display: none; }
/* intentional wireframe hint so an image-less preview still reads as a mockup */
.theme-card__shot.is-empty::before {
  content: "";
  position: absolute;
  inset: 12% 14%;
  border-radius: 6px;
  background:
    linear-gradient(rgba(20, 43, 81, .05) 0 0) 0 0 / 100% 26% no-repeat,
    linear-gradient(rgba(20, 43, 81, .04) 0 0) 8% 48% / 45% 7px no-repeat,
    linear-gradient(rgba(20, 43, 81, .03) 0 0) 8% 64% / 72% 6px no-repeat,
    linear-gradient(rgba(20, 43, 81, .03) 0 0) 8% 78% / 55% 6px no-repeat;
}
.theme-card__shot.is-empty::after {
  content: "Tema önizlemesi";
  place-self: center;
  position: relative;
  padding: .34rem .82rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(20, 43, 81, .08);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--text-muted);
}

.theme-card__name {
  margin: 0 0 .4rem;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--brand-primary);
}
.theme-card__text {
  margin: 0;
  max-width: 22rem;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--text-body);
  text-wrap: balance;
}
.theme-card__cta {
  margin-top: clamp(1rem, .8rem + .8vw, 1.4rem);
  padding: .58rem 1.4rem;
  font-size: .875rem;
}
.theme-card:hover .theme-card__cta { filter: brightness(1.05); }

@media (max-width: 1199.98px) {
  .theme-card { flex-basis: calc((100% - var(--themes-gap)) / 2); }
  .themes-arrow--prev { left: -.75rem; }
  .themes-arrow--next { right: -.75rem; }
}
@media (max-width: 767.98px) {
  .theme-card { flex-basis: 85%; }
  .themes-arrow--prev { left: 0; }
  .themes-arrow--next { right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .themes-track { scroll-behavior: auto; }
  .themes-dot { transition: none; }
}


/* =============================================================
   S.S.S / Sık Sorulan Sorular — premium two-column FAQ accordion
   Same section language: grid texture, shared heading, fade-up.
   Custom component — no Bootstrap accordion chrome.
   ============================================================= */
.faq {
  background: var(--surface-warm);
  padding-block: clamp(3.25rem, 2.4rem + 3.6vw, 5.5rem);
  overflow-x: clip;
}
.faq .section-heading {
  margin-bottom: clamp(2.25rem, 1.6rem + 3vw, 3.5rem);
}
.faq-col {
  display: flex;
  flex-direction: column;
  gap: clamp(.7rem, .5rem + .5vw, 1rem);
}

.faq-item {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(20, 43, 81, .09);
  border-radius: 16px;
  transition: border-color .25s ease, background-color .3s ease, transform .2s ease;
}
.faq-item::before {                 /* restrained gradient accent on the left, on open */
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--brand-gradient);
  opacity: 0;
  transition: opacity .35s ease;
}
.faq-item:hover:not(.is-open) {
  border-color: rgba(20, 43, 81, .18);
  transform: translateY(-1px);
}
.faq-item.is-open {
  border-color: rgba(20, 43, 81, .16);
  background: var(--surface-warm);   /* subtle warm surface refinement, not orange */
}
.faq-item.is-open::before { opacity: 1; }

.faq-item__q { margin: 0; }
.faq-item__trigger {
  display: flex;
  align-items: center;
  gap: .8rem;
  width: 100%;
  margin: 0;
  padding: clamp(.95rem, .8rem + .5vw, 1.2rem) clamp(1rem, .85rem + .55vw, 1.3rem);
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: "Poppins", system-ui, sans-serif;
}
.faq-item__trigger:focus-visible {
  outline: 2px solid rgba(20, 43, 81, .4);
  outline-offset: -2px;
  border-radius: 15px;
}
.faq-item__num {
  flex: none;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-muted);
  opacity: .6;
  font-variant-numeric: tabular-nums;
}
.faq-item__text {
  flex: 1;
  font-size: clamp(.9375rem, .9rem + .18vw, 1.0625rem);
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: -.005em;
  color: var(--brand-primary);
}

/* custom + / − control */
.faq-item__icon {
  flex: none;
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface-muted);
  transition: background-color .3s ease;
}
.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand-primary);
  transform: translate(-50%, -50%);
  transition: transform .32s ease, background-color .3s ease;
}
.faq-item__icon::after { transform: translate(-50%, -50%) rotate(90deg); }   /* vertical bar → "+" */
.faq-item.is-open .faq-item__icon { background: var(--brand-gradient); }
.faq-item.is-open .faq-item__icon::before,
.faq-item.is-open .faq-item__icon::after { background: #fff; }
.faq-item.is-open .faq-item__icon::after { transform: translate(-50%, -50%) rotate(0deg); }  /* rotates flat → "−" */

/* answer — smooth height via grid 0fr→1fr */
.faq-item__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s cubic-bezier(.4, 0, .2, 1);
}
.faq-item.is-open .faq-item__a { grid-template-rows: 1fr; }
.faq-item__a-inner {
  overflow: hidden;
  min-height: 0;
}
.faq-item__a p {
  margin: 0;
  padding: .1rem clamp(1rem, .85rem + .55vw, 1.3rem) clamp(1.05rem, .9rem + .5vw, 1.3rem);
  padding-left: calc(clamp(1rem, .85rem + .55vw, 1.3rem) + 1.6rem);
  font-size: clamp(.8125rem, .78rem + .16vw, .9375rem);
  font-weight: 400;
  line-height: 1.72;
  color: var(--text-body);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .3s ease .04s, transform .3s ease .04s;
}
.faq-item.is-open .faq-item__a p {
  opacity: 1;
  transform: none;
}

@media (max-width: 575.98px) {
  .faq-item__a p { padding-left: clamp(1rem, .85rem + .55vw, 1.3rem); }
}


/* =============================================================
   Müşteri Yorumları / Testimonials — centred-active carousel
   Faded side cards, one prominent centre card. Same section
   language: grid texture, shared heading, fade-up, indicator
   + arrow language shared with the hero / themes slider.
   ============================================================= */
.testimonials {
  background: var(--surface-warm);
  padding-block: clamp(3.25rem, 2.4rem + 3.6vw, 5.5rem);
  overflow-x: clip;
}
.testimonials .section-heading {
  margin-bottom: clamp(2.25rem, 1.6rem + 3vw, 3.5rem);
}
/* keep the accent word + its dot together when the longer heading wraps */
.testimonials .section-heading__title .t-hw { white-space: nowrap; }

.t-stage {
  position: relative;
}
.t-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.t-track {
  --tcard-w: clamp(258px, 72vw, 400px);
  display: flex;
  align-items: stretch;
  gap: clamp(1rem, .6rem + 1vw, 1.5rem);
  margin: 0;
  padding: 8px 0;
  list-style: none;
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
  cursor: grab;
  touch-action: pan-y;
  will-change: transform;
}
.testimonials-slider.is-dragging .t-track { transition: none; cursor: grabbing; }
.testimonials-slider.is-dragging .testimonial-card { user-select: none; }

/* one testimonial card */
.testimonial-card {
  flex: 0 0 var(--tcard-w);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  background: #fff;
  border: 1px solid rgba(20, 43, 81, .08);
  border-radius: 20px;
  opacity: .5;
  transform: scale(.965);
  transition: opacity .45s ease, transform .45s cubic-bezier(.22, .61, .36, 1), border-color .45s ease;
}
.testimonial-card.is-active {
  opacity: 1;
  transform: scale(1);
  border-color: rgba(20, 43, 81, .16);
}

.testimonial-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.testimonial-card__mark {
  flex: none;
  width: 26px;
  height: 26px;
  fill: url(#t-grad);
}
.t-rating {
  flex: none;
  font-size: .8125rem;
  letter-spacing: .14em;
  line-height: 1;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.testimonial-card__quote {
  flex: 1;
  margin: 0;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: clamp(.875rem, .84rem + .16vw, 1rem);
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-body);
}
.testimonial-card__id {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding-top: .9rem;
  border-top: 1px solid rgba(20, 43, 81, .08);
}
.testimonial-card__avatar {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-muted);          /* shows only if the image is truly missing */
  box-shadow: 0 1px 3px rgba(20, 43, 81, .13);
}
.testimonial-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;                         /* fill the circle, centred, no distortion */
  object-position: center;
  display: block;
}
/* initials — shown only when the avatar image genuinely failed to load */
.testimonial-card__avatar-fallback {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--brand-primary);
  background: var(--surface-muted);
}
.testimonial-card__avatar.is-empty img { display: none; }
.testimonial-card__avatar.is-empty .testimonial-card__avatar-fallback { display: grid; }
.testimonial-card__name {
  margin: 0;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--brand-primary);
}
.testimonial-card__org {
  margin: .12rem 0 0;
  font-size: .8125rem;
  line-height: 1.3;
  color: var(--text-muted);
}

/* side arrows — position only; visuals come from .carousel-nav */
.t-arrow {
  top: 0;
  bottom: 0;
  margin-block: auto;
}
.t-arrow--prev { left: -1.75rem; }
.t-arrow--next { right: -1.75rem; }

/* indicators — same active-line + inactive-dot language as hero / themes */
.t-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: clamp(1.75rem, 1.2rem + 2vw, 2.6rem);
}
.t-dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #d9d4cc;
  cursor: pointer;
  transition: width .35s ease, background-color .35s ease, opacity .35s ease;
}
.t-dot.active {
  width: 28px;
  background: var(--brand-gradient);
}
.t-dot:focus-visible {
  outline: 3px solid rgba(20, 43, 81, .35);
  outline-offset: 3px;
}

@media (max-width: 1199.98px) {
  .t-arrow--prev { left: -.75rem; }
  .t-arrow--next { right: -.75rem; }
}
@media (max-width: 767.98px) {
  .t-arrow--prev { left: 0; }
  .t-arrow--next { right: 0; }
}
@media (max-width: 479.98px) {
  .t-arrow { display: none; }        /* swipe only on small phones */
}

@media (prefers-reduced-motion: reduce) {
  .t-track { transition: none; }
  .testimonial-card { transition: border-color .001ms; }
  .t-dot { transition: none; }
}


/* =============================================================
   Kolay Süreç / Process — 5-step horizontal path
   Circular icons with slow rotating dashed rings, large faint
   numbers, a subtle connecting wave. Same section language:
   grid texture, shared heading, fade-up reveal.
   ============================================================= */
.process {
  background: var(--surface-warm);
  padding-block: clamp(3.25rem, 2.4rem + 3.6vw, 5.5rem);
  overflow-x: clip;
}
.process .section-heading {
  margin-bottom: clamp(2.75rem, 2rem + 3vw, 4rem);
}
.process .section-heading__title .p-hw { white-space: nowrap; }

.process-steps {
  --ps-disc: clamp(94px, 5vw + 46px, 112px);
  --ps-pad-top: 2.4rem;
  position: relative;
}
.process-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(.75rem, .2rem + 1.4vw, 1.75rem);
}

/* the connecting wave — one continuous flow behind all five circles.
   (explicit width: the <svg> is a replaced element, so left+right alone
   would be ignored in favour of its intrinsic height-based aspect ratio) */
.process-line {
  position: absolute;
  left: 8%;
  width: 84%;
  top: calc(var(--ps-pad-top) + var(--ps-disc) / 2);
  height: 40px;
  transform: translateY(-50%);
  z-index: 0;
  pointer-events: none;
}
.process-line path {
  fill: none;
  stroke: rgba(20, 43, 81, .16);
  stroke-width: 1.4;
  stroke-dasharray: 3 6;
  stroke-linecap: round;
}

.process-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: var(--ps-pad-top);
}
.process-step__num {
  position: absolute;
  top: -1.75rem;                         /* raised so it sits behind the top half of the circle */
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: clamp(82px, 4.5vw + 34px, 122px);
  font-weight: 600;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(20, 43, 81, .09);
  pointer-events: none;
  user-select: none;
}

.process-step__disc {
  position: relative;
  width: var(--ps-disc);
  height: var(--ps-disc);
  margin-bottom: 1.35rem;
  transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}
/* the decorative dashed ring — this is the ONLY thing that rotates */
.process-step__ring {
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px dashed rgba(20, 43, 81, .2);
  animation: process-ring 23s linear infinite;
}
.process-step:not(.process-step--accent) .process-step__ring {
  animation-duration: 18s;
  animation-direction: reverse;
}
@keyframes process-ring { to { transform: rotate(360deg); } }

.process-step__icon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(20, 43, 81, .12);
  color: var(--brand-primary);
  transition: border-color .35s ease;
}
.process-step__icon svg {
  width: 40%;
  height: 40%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.process-step--accent .process-step__icon svg { stroke: url(#p-grad); }

.process-step__title {
  margin: 0 0 .4rem;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: clamp(1rem, .95rem + .2vw, 1.125rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--brand-primary);
}
.process-step__text {
  margin: 0;
  max-width: 15rem;
  font-size: clamp(.8125rem, .78rem + .16vw, .875rem);
  line-height: 1.65;
  color: var(--text-body);
}

/* hover — refined, no shadow / glow / big scale */
.process-step:hover .process-step__disc { transform: translateY(-4px); }
.process-step:hover .process-step__icon { border-color: rgba(20, 43, 81, .22); }
.process-step:hover .process-step__ring { animation-duration: 8s; }
.process-step:hover.process-step--accent .process-step__icon svg { filter: saturate(1.12); }

@media (min-width: 576px) and (max-width: 991.98px) {
  .process-list { grid-template-columns: repeat(6, 1fr); row-gap: clamp(2.75rem, 5vw, 3.75rem); }
  .process-step { grid-column: span 2; }
  .process-step:nth-child(4) { grid-column: 2 / span 2; }
  .process-step:nth-child(5) { grid-column: 4 / span 2; }
  .process-line { display: none; }
}

@media (max-width: 575.98px) {
  .process-steps { --ps-pad-top: 1.9rem; }
  .process-list { grid-template-columns: 1fr; gap: clamp(2.5rem, 9vw, 3.25rem); }
  .process-line { display: none; }
  .process-steps::before {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(var(--ps-pad-top) + var(--ps-disc) / 2);
    bottom: 3rem;
    border-left: 1px dashed rgba(20, 43, 81, .16);
  }
  .process-step__num { top: -1.3rem; font-size: clamp(72px, 24vw, 104px); }
}

@media (prefers-reduced-motion: reduce) {
  .process-step__ring { animation: none; }
  .process-step:hover .process-step__disc { transform: none; }
}


/* =============================================================
   Hızlı Başlangıç / CTA — one featured conversion panel:
   left media tile · centre text · right actions. Bright white
   base with a soft warm wash, a thin navy border, a brand-gradient
   top stroke and a delicate inset frame for a layered feel.
   Same section language: grid texture, fade-up reveal.
   ============================================================= */
.cta {
  background: var(--surface-warm);
  padding-block: clamp(3.25rem, 2.4rem + 3.6vw, 5.5rem);
  overflow-x: clip;
}

.cta-shell { display: block; }

.cta-panel {
  --cta-radius: clamp(22px, 1rem + 1.6vw, 30px);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(206px, 288px) 1fr minmax(208px, auto);
  grid-template-areas: "visual body actions";
  align-items: center;
  gap: clamp(1.5rem, .7rem + 2.2vw, 3.5rem);
  padding: clamp(1.75rem, 1.2rem + 2.2vw, 2.85rem);
  border-radius: var(--cta-radius);
  background-color: #fff;
  background-image:
    radial-gradient(95% 130% at 6% 0%, rgba(250, 164, 26, .08) 0%, rgba(250, 164, 26, 0) 44%),
    linear-gradient(180deg, #fff 50%, var(--surface-warm) 100%);
  border: 1px solid rgba(20, 43, 81, .1);
  transition: transform .35s cubic-bezier(.22, .61, .36, 1), border-color .35s ease;
}
/* brand-gradient top accent — inset to the flat run of the top edge so it hugs
   the card between its rounded corners and never overshoots them */
.cta-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--cta-radius);
  right: var(--cta-radius);
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--brand-gradient);
  z-index: 3;
}
/* delicate inset hairline — a quiet second frame, reads as layered / premium */
.cta-panel::after {
  content: "";
  position: absolute;
  inset: clamp(7px, 1.2vw, 12px);
  border: 1px solid rgba(20, 43, 81, .05);
  border-radius: clamp(15px, .6rem + 1.2vw, 22px);
  pointer-events: none;
  z-index: -1;
}
.cta-panel:hover {
  transform: translateY(-3px);
  border-color: rgba(20, 43, 81, .2);
}

/* very soft decorative wash — faint navy grid + a warm corner glow.
   Self-clips to the panel shape so the panel itself can stay overflow:visible
   and let the visual break out of its bounds. */
.cta-panel__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to right,  rgba(20, 43, 81, .028) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(to bottom, rgba(20, 43, 81, .02)  0 1px, transparent 1px 48px);
  -webkit-mask-image: radial-gradient(130% 150% at 100% 0%, #000 0%, transparent 58%);
          mask-image: radial-gradient(130% 150% at 100% 0%, #000 0%, transparent 58%);
}
.cta-panel__bg::after {
  content: "";
  position: absolute;
  right: -110px;
  bottom: -130px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(250, 164, 26, .12), transparent 70%);
}

/* ---- visual — frameless; the figure sits large and breaks out of the panel ---- */
.cta-panel__visual {
  grid-area: visual;
  align-self: stretch;
  position: relative;
  z-index: 4;                    /* the figure overlaps the panel's stroke / frame cleanly */
  display: flex;
  align-items: center;
  justify-content: center;
}
.cta-panel__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.cta-panel__media img {
  display: block;
  width: clamp(310px, 27vw, 430px);                       /* larger than its column — the figure dominates */
  max-width: none;                                        /* override the global img{max-width:100%} */
  height: auto;
  object-fit: contain;                                    /* no crop, no distortion */
  pointer-events: none;
  margin-top: clamp(-5.5rem, -2.8rem - 4vw, -3.25rem);    /* rises well above the panel edge */
  margin-bottom: clamp(-3.5rem, -1.8rem - 2.4vw, -1.75rem);
  animation: cta-visual-float 6s ease-in-out infinite;
}
/* gentle idle motion — matches the pricing / hero visuals */
@keyframes cta-visual-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
/* minimal fallback if the image is ever genuinely missing */
.cta-panel__media.is-empty {
  width: 100%;
  min-height: 180px;
  border: 1px dashed rgba(20, 43, 81, .14);
  border-radius: 16px;
}
.cta-panel__media.is-empty img { display: none; }
.cta-panel__media.is-empty::after {
  content: "Tanıtım görseli";
  font-size: .8125rem;
  letter-spacing: .04em;
  color: var(--text-muted);
}

/* ---- body ---- */
.cta-panel__body { grid-area: body; min-width: 0; }
.cta-panel__eyebrow {
  display: inline-block;
  margin-bottom: .8rem;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.cta-panel__title {
  margin: 0;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.35rem, 1rem + 1.35vw, 1.85rem);
  line-height: 1.24;
  letter-spacing: -.02em;
  color: var(--brand-primary);
  text-wrap: balance;
}
.cta .cta-panel__title .cta-hw { white-space: nowrap; }
.cta-panel__text {
  margin: .85rem 0 0;
  max-width: 34rem;
  font-size: clamp(.875rem, .84rem + .16vw, .95rem);
  line-height: 1.62;
  color: var(--text-body);
}

/* ---- actions — a small, self-contained CTA button system ---- */
.cta-panel__actions {
  grid-area: actions;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .65rem;
}
.cta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  padding: .95rem 1.7rem;
  border: 1px solid transparent;
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .005em;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease, filter .2s ease;
}
.cta-btn > span { position: relative; z-index: 2; }
.cta-btn:hover { transform: translateY(-2px); }
.cta-btn:active { transform: translateY(0); }
.cta-btn:focus-visible { outline: 3px solid rgba(20, 43, 81, .35); outline-offset: 2px; }

/* shine — one soft diagonal light sweep on hover / focus, shared by all three
   CTA buttons. Identical geometry, timing and easing everywhere; only the sweep
   colour changes with the surface (white on the gradient, faint navy on the
   light outline buttons) so it stays visible and equally subtle on each.
   Clipped to the button by .cta-btn's overflow:hidden + border-radius. */
.cta-btn::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -75%;
  width: 45%;
  height: 200%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--cta-shine, rgba(255, 255, 255, .45)), transparent);
  transform: rotate(20deg);
  transition: left .6s ease;
}
.cta-btn:hover::after,
.cta-btn:focus-visible::after { left: 135%; }

/* primary — approved orange gradient */
.cta-btn--primary {
  --cta-shine: rgba(255, 255, 255, .45);
  color: #fff;
  background-image: var(--brand-gradient);
  text-shadow: 0 1px 2px rgba(90, 34, 0, .32);
}
.cta-btn--primary:hover { filter: brightness(1.04); }

/* secondary — light: white with navy text and a crisp border
   (the WhatsApp button also carries this class, so it inherits the shine) */
.cta-btn--secondary {
  --cta-shine: rgba(20, 43, 81, .1);
  color: var(--brand-primary);
  background-color: #fff;
  border-color: var(--border-strong);
}
.cta-btn--secondary:hover {
  border-color: rgba(20, 43, 81, .28);
  background-color: #fafbfc;
}

/* WhatsApp support — the exact same shell as .cta-btn--secondary (which it also
   carries in its class list); WhatsApp identity is kept only in the green glyph
   and its little "online" dot, so it reads as part of the same button system. */
.cta-btn__wa-icon {
  position: relative;
  display: inline-flex;
  color: #25d366;                       /* WhatsApp green — the one identity cue */
}
.cta-btn__wa-icon svg { display: block; }
.cta-btn__wa-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #25d366;
  box-shadow: 0 0 0 2px #fff;           /* separates the dot from the glyph */
}
.cta-btn--secondary.cta-btn--wa:hover { border-color: rgba(37, 211, 102, .45); }  /* faint green hint on hover, nothing louder */

/* ---- tablet — stack cleanly, reduce the visual ---- */
@media (max-width: 991.98px) {
  .cta-panel {
    grid-template-columns: 1fr;
    grid-template-areas: "visual" "body" "actions";
    justify-items: center;
    text-align: center;
    gap: clamp(1.5rem, 1.1rem + 2vw, 2.25rem);
  }
  .cta-panel__visual { align-self: center; width: auto; max-width: 100%; }
  .cta-panel__media { width: auto; }
  .cta-panel__media img { width: 264px; margin-top: clamp(-1.25rem, -.7rem - .8vw, -.4rem); margin-bottom: -.6rem; }
  .cta-panel__body { max-width: 42rem; }
  .cta-panel__text { margin-inline: auto; }
  .cta-panel__actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }
  .cta-btn { width: auto; min-width: 188px; }
}

/* ---- mobile — single column, comfortable stacked buttons ---- */
@media (max-width: 575.98px) {
  .cta-panel { padding: 1.9rem 1.35rem; }
  .cta-panel__media img { width: min(238px, 76vw); margin-top: -.25rem; margin-bottom: 0; }
  .cta-panel__actions { flex-direction: column; width: 100%; max-width: 320px; }
  .cta-btn { width: 100%; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cta-panel:hover { transform: none; }
  .cta-btn:hover { transform: none; }
  .cta-panel__media img { animation: none; }
  .cta-btn:hover::after,
  .cta-btn:focus-visible::after { left: -75%; }
}