/* ============================================================
   Callfone AI — landing page styles
   LIGHT theme · Retell-inspired · white canvas · deep-navy ink
   ============================================================ */

:root {
  /* canvas — Retell palette */
  --bg:       #ffffff;
  --bg-1:     #f4f5f7;   /* light card (Retell "Other Solution") */
  --bg-2:     #eceef2;
  --bg-3:     #e3e6ec;
  --line:     rgba(20, 30, 50, 0.08);
  --line-2:   rgba(20, 30, 50, 0.13);

  /* dark navy surface (Retell "Our Solution" / buttons) */
  --ink:      #0b1526;
  --ink-soft: #14213c;
  --ink-line: rgba(255, 255, 255, 0.12);

  /* ink / text — Retell navy charcoal */
  --fg:       #232e45;
  --fg-soft:  rgba(35, 46, 69, 0.64);
  --fg-mute:  rgba(35, 46, 69, 0.45);
  --fg-faint: rgba(35, 46, 69, 0.26);

  /* accent — Retell cornflower / periwinkle blue */
  --accent:    #5a76e6;
  --accent-2:  #7b73ee;
  --accent-ink: #ffffff;
  --accent-soft: color-mix(in oklab, var(--accent) 12%, transparent);
  --accent-glow: color-mix(in oklab, var(--accent) 40%, transparent);

  /* semantic */
  --ok:   #16a572;
  --warn: #cf8a1c;
  --no:   rgba(35, 46, 69, 0.30);

  /* elevation */
  --sh-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --sh:    0 8px 28px -14px rgba(15, 23, 42, 0.18);
  --sh-lg: 0 28px 64px -32px rgba(15, 23, 42, 0.30);
  --sh-ink: 0 20px 50px -26px rgba(10, 19, 38, 0.45);

  --radius:   16px;
  --radius-lg: 22px;
  --radius-sm: 10px;
  --maxw:     1180px;
  --gutter:   clamp(20px, 5vw, 56px);

  --font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* very subtle ambient tint */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(1100px 680px at 80% -10%, color-mix(in oklab, var(--accent) 7%, transparent), transparent 60%),
    radial-gradient(900px 600px at -5% 4%, color-mix(in oklab, var(--accent-2) 5%, transparent), transparent 58%);
  pointer-events: none;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--accent); color: #fff; }

/* ---------- layout helpers ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: clamp(72px, 11vw, 140px); position: relative; }
.section--tight { padding-block: clamp(48px, 7vw, 88px); }

.eyebrow {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
}
.eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.h-section {
  font-size: clamp(2rem, 4.4vw, 3.3rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  font-weight: 400;
  margin: 0 0 18px;
  text-wrap: balance;
  color: var(--fg);
}
.lead {
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  color: var(--fg-soft);
  max-width: 60ch;
  margin: 0;
  text-wrap: pretty;
}
.section-head { max-width: 760px; margin-bottom: clamp(40px, 6vw, 68px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lead { margin-inline: auto; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  transition: background .3s, border-color .3s, backdrop-filter .3s;
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: color-mix(in oklab, #fff 80%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--line);
}
.nav__inner {
  height: 72px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--fg);
  white-space: nowrap;
}
.brand__mark {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: var(--ink);
  display: grid;
  place-items: center;
  gap: 2.5px;
  grid-auto-flow: column;
  box-shadow: var(--sh-sm);
}
.brand__mark i {
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
  display: block;
  animation: markPulse 1.5s ease-in-out infinite;
}
.brand__mark i:nth-child(1){ height: 9px;  animation-delay: 0s; }
.brand__mark i:nth-child(2){ height: 17px; animation-delay: .18s; }
.brand__mark i:nth-child(3){ height: 12px; animation-delay: .36s; }
@keyframes markPulse { 0%,100%{ transform: scaleY(.6); opacity:.7 } 50%{ transform: scaleY(1.15); opacity:1 } }
.brand b { font-weight: 600; }
.brand span { color: var(--fg-mute); font-weight: 500; }
.brand__logo { height: 28px; width: auto; display: block; }
.brand__logo--footer { height: 30px; }

.nav__links {
  display: flex;
  gap: 2px;
  margin-left: 8px;
}
.nav__links a {
  padding: 8px 14px;
  border-radius: 9px;
  font-size: 15px;
  color: var(--fg-soft);
  transition: color .2s, background .2s;
}
.nav__links a:hover { color: var(--fg); background: var(--bg-1); }
.nav__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.nav__login {
  font-size: 14px; font-weight: 560;
  color: var(--fg);
  padding: 0 16px; height: 40px;
  display: inline-flex; align-items: center;
  border-radius: 10px;
  background: var(--bg-1);
  transition: background .2s;
}
.nav__login:hover { background: var(--bg-2); }
/* mobil hamburger içindeki "Bize Ulaşın" klonu — masaüstünde her zaman gizli */
a.nav__login.nav__cta-mobile { display: none; }

.nav__burger {
  display: none;
  width: 42px; height: 42px;
  border-radius: 10px;
  border: 1px solid var(--line-2);
  background: #fff;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
}
.nav__burger span { width: 18px; height: 2px; background: var(--fg); border-radius: 2px; transition: .25s; }
.nav.is-open .nav__burger span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2){ opacity: 0; }
.nav.is-open .nav__burger span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; padding-top: clamp(48px, 7vw, 92px); padding-bottom: clamp(60px, 8vw, 110px); }
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 8px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--sh-sm);
  font-size: 13.5px;
  color: var(--fg-soft);
  margin-bottom: 26px;
}
.hero__badge b { color: var(--fg); font-weight: 560; }
.hero__badge .pill {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
}
.hero h1 {
  font-size: clamp(2.5rem, 5.6vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  font-weight: 400;
  margin: 0 0 22px;
  text-wrap: balance;
  color: var(--fg);
}
.hero h1 .grad {
  background: linear-gradient(100deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__sub {
  font-size: clamp(1.08rem, 1.5vw, 1.3rem);
  color: var(--fg-soft);
  max-width: 46ch;
  margin: 0 0 34px;
  text-wrap: pretty;
}
.hero__trust {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--fg-mute);
  font-size: 13.5px;
}
.hero__trust .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--fg-faint); }

/* hero visual */
.hero__visual {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}
.orb {
  position: relative;
  width: 74%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 42%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 64%);
}
.orb__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--line-2);
}
.orb__ring--1 { inset: 0;   animation: spin 26s linear infinite; }
.orb__ring--2 { inset: 12%; border-color: var(--line); animation: spin 20s linear infinite reverse; }
.orb__ring--3 { inset: 26%; border-color: color-mix(in oklab, var(--accent) 30%, transparent); }
.orb__ring--2::after, .orb__ring--1::after {
  content:""; position:absolute; width:7px; height:7px; border-radius:50%;
  background: var(--accent); top: -3.5px; left: calc(50% - 3.5px);
  box-shadow: 0 0 10px var(--accent-glow);
}
.orb__ring--2::after { background: var(--accent-2); box-shadow: 0 0 10px var(--accent-2); }
@keyframes spin { to { transform: rotate(360deg); } }

.orb__core {
  width: 50%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 32%, var(--ink-soft), var(--ink));
  border: 1px solid var(--ink-line);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  padding: 0 0 30%;
  box-shadow: var(--sh-ink);
}
/* waveform bars */
.wave { display: flex; align-items: center; gap: 4px; height: 46%; }
.wave i {
  width: 4px;
  border-radius: 3px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 80%, #fff), var(--accent-2));
  animation: wave 1.1s ease-in-out infinite;
  transform-origin: center;
}
@keyframes wave { 0%,100%{ transform: scaleY(.28); opacity:.7 } 50%{ transform: scaleY(1); opacity:1 } }

/* floating channel chips */
.chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px 8px 8px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line-2);
  font-size: 13.5px;
  font-weight: 540;
  color: var(--fg);
  white-space: nowrap;
  box-shadow: var(--sh);
  animation: float 6s ease-in-out infinite;
  will-change: transform;
}
.chip .ic {
  width: 26px; height: 26px;
  border-radius: 7px;
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-ink);
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
}
.chip--a { top: 8%;  left: -6%;  animation-delay: 0s; }
.chip--b { top: 24%; right: -8%; animation-delay: -1.4s; }
.chip--c { bottom: 26%; left: -10%; animation-delay: -2.8s; }
.chip--d { bottom: 7%; right: -4%; animation-delay: -4.1s; }
.chip--e { top: 50%; right: -14%; animation-delay: -3.3s; }
@keyframes float { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-14px) } }

/* ============================================================
   NAV CARETS + HERO BANNER (Retell-style)
   ============================================================ */
.nav__links a { display: inline-flex; align-items: center; gap: 5px; }
.caret { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }

.hero-wrap { padding: 10px clamp(10px, 1.3vw, 18px) clamp(40px, 6vw, 72px); }
.hero-banner {
  position: relative;
  border-radius: clamp(20px, 2.4vw, 34px);
  overflow: hidden;
  min-height: clamp(440px, 62vh, 660px);
  display: flex;
  background-color: #07112b;
  background-image:
    radial-gradient(118% 120% at 1% -2%, #3f86ff 0%, rgba(63,134,255,0) 42%),
    radial-gradient(82% 72% at 15% 80%, rgba(26,150,118,0.55) 0%, rgba(26,150,118,0) 52%),
    radial-gradient(125% 125% at 100% 24%, #0a1430 0%, rgba(10,20,48,0) 60%),
    linear-gradient(118deg, #1b49aa 0%, #0c1c44 52%, #060b1c 100%);
  box-shadow: var(--sh-lg);
}
.hero-banner__bg {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: #0b0f1a;
  overflow: hidden;
}
.hero-banner__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hero-banner__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(118deg, rgba(6,9,16,0.20) 0%, rgba(6,9,16,0.32) 60%, rgba(6,9,16,0.48) 100%);
}
.hero-banner__grain {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 4px 4px;
  mix-blend-mode: overlay;
  opacity: .5;
}
.hero-banner__inner {
  position: relative; z-index: 1;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(28px, 3.4vw, 52px) clamp(22px, 4vw, 60px) clamp(28px, 3.4vw, 44px);
  display: flex;
  flex-direction: column;
}
.hero-eyebrow {
  text-align: center;
  color: rgba(255,255,255,0.82);
  font-size: clamp(11.5px, 1.05vw, 15px);
  letter-spacing: 0.16em;
  font-weight: 560;
  text-transform: uppercase;
  margin: clamp(4px, 1.5vw, 18px) 0 0;
}
.hero-title {
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  font-weight: 400;
  text-align: center;
  color: #fff;
  font-size: clamp(2.7rem, 7.4vw, 6.1rem);
  line-height: 1.03;
  letter-spacing: -0.012em;
  margin: clamp(18px, 3vw, 40px) auto clamp(22px, 4vw, 48px);
  max-width: 17ch;
  text-wrap: balance;
}
.hero-title .dot-em { color: #fff; }
.hero-banner__bottom {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.hero-banner__left { max-width: 440px; }
.rating { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px; }
.rating__mark {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: #ff5a3c; color: #fff; font-size: 13px; font-weight: 700;
  font-family: var(--font);
}
.rating__stars { color: #ffc24d; font-size: 18px; letter-spacing: 2px; }
.rating__score { color: #fff; font-size: 14px; font-weight: 600; }
.hero-banner__desc {
  color: rgba(255,255,255,0.9);
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.5;
  margin: 0;
  text-wrap: pretty;
}
.live-demo {
  display: inline-flex; align-items: center; gap: 18px;
  padding: 16px 16px 16px 26px;
  border-radius: 18px;
  background: rgba(8, 16, 38, 0.5);
  border: 1px solid rgba(255,255,255,0.13);
  backdrop-filter: blur(12px);
  transition: transform .2s, background .2s, border-color .2s;
}
.live-demo:hover { transform: translateY(-3px); background: rgba(8,16,38,0.68); border-color: rgba(255,255,255,0.24); }
.live-demo__label { color: #fff; font-size: clamp(18px, 1.55vw, 24px); font-weight: 540; line-height: 1.16; letter-spacing: -0.01em; }
.live-demo__orb {
  width: 68px; height: 68px; border-radius: 13px; flex: none;
  background:
    radial-gradient(circle at 34% 28%, #d6ddff 0%, rgba(214,221,255,0) 46%),
    radial-gradient(circle at 72% 72%, #6ad0c0 0%, rgba(106,208,192,0) 52%),
    conic-gradient(from 200deg, #6a7bff, #9b6bff, #6ad0c0, #6a7bff);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), 0 8px 20px -8px rgba(0,0,0,.5);
}
@media (max-width: 760px) {
  .hero-banner__bottom { flex-direction: column; align-items: stretch; }
  .live-demo { justify-content: space-between; }
}

/* ============================================================
   LOGO MARQUEE
   ============================================================ */
.marquee-sec {
  padding-block: clamp(34px, 4.5vw, 56px) clamp(30px, 4vw, 48px);
  border-bottom: 1px solid var(--line);
}
.marquee-label {
  text-align: center;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin: 0 0 clamp(26px, 3.5vw, 42px);
}
.marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(48px, 7vw, 104px);
  width: max-content;
  animation: marquee 44s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  font-size: clamp(19px, 2vw, 25px);
  font-weight: 560;
  letter-spacing: -0.01em;
  color: var(--fg-mute);
  white-space: nowrap;
  opacity: 1;
  transition: color .25s, opacity .25s;
}
.logo:hover { color: var(--fg); opacity: 1; }
.logo img {
  height: clamp(30px, 3vw, 39px);
  width: auto;
  display: block;
  filter: grayscale(1) brightness(0.55);
  opacity: .55;
  transition: opacity .28s, filter .28s;
}
.logo:hover img { filter: grayscale(1) brightness(0); opacity: 1; }
.logo svg {
  width: 0.92em; height: 0.92em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}
.logo--bold { font-weight: 700; letter-spacing: -0.03em; }
.logo--wide { font-weight: 600; letter-spacing: 0.14em; font-size: clamp(15px, 1.5vw, 19px); }
.logo--serif { font-family: "Newsreader", Georgia, serif; font-weight: 500; font-size: clamp(21px, 2.2vw, 28px); letter-spacing: 0; }

/* decorative loop kept on under reduce-motion (intentional) */

/* ============================================================
   COST CALLOUT
   ============================================================ */
.cost {
  position: relative;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, var(--accent-soft), transparent 55%),
    var(--bg-1);
  overflow: hidden;
}
.cost__inner {
  display: flex;
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
  padding-block: clamp(28px, 4vw, 44px);
  flex-wrap: wrap;
}
.cost__big {
  font-family: var(--mono);
  font-size: clamp(1.5rem, 3.5vw, 2.6rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  white-space: nowrap;
  color: var(--fg);
}
.cost__big .old { color: var(--fg-mute); text-decoration: line-through; text-decoration-color: var(--no); }
.cost__big .arrow { color: var(--accent); margin-inline: 12px; }
.cost__big .new b { color: var(--accent); }
.cost__txt { color: var(--fg-soft); font-size: clamp(1rem, 1.4vw, 1.18rem); max-width: 38ch; }
.cost__txt b { color: var(--fg); font-weight: 560; }

/* ============================================================
   WHAT IS — solution cards (Retell "What is Retell?" layout)
   ============================================================ */
.solo__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(28px, 5vw, 72px);
  flex-wrap: wrap;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.ov-eyebrow {
  color: var(--accent);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}
.solo__title {
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}
.solo__desc {
  max-width: 36ch;
  align-self: flex-end;
  color: var(--fg-soft);
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.45;
  margin: 6px 0 0;
  text-wrap: pretty;
}

.solo__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.rc {
  display: flex;
  flex-direction: column;
  min-height: auto;
  padding: 30px clamp(26px, 2.2vw, 32px) 30px;
  border-radius: 16px;
  background: var(--bg-1);
  border: 1px solid var(--line);
}
.rc--dark {
  background: var(--ink);
  border-color: var(--ink-line);
  box-shadow: var(--sh-ink);
}
.rc__label { font-size: 14px; font-weight: 700; letter-spacing: 0; color: var(--fg); }
.rc--dark .rc__label { color: #fff; }
.rc__title {
  margin: clamp(150px, 16vw, 200px) 0 0;
  font-size: clamp(1.55rem, 2.05vw, 1.875rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: #2e3a58;
}
.rc--dark .rc__title { color: #eef2f8; }
.rc__sub {
  margin: 22px 0 0;
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: #2e3a58;
}
.rc--dark .rc__sub { color: #fff; font-weight: 600; }
.rc__foot {
  margin: auto 0 0;
  color: #4a5470;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.45;
  max-width: 34ch;
  text-wrap: pretty;
}
.rc__list { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 19px; }
.rc__list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 400;
  color: #3f4a64;
}
.rc--dark .rc__list li { color: #fff; font-weight: 600; }
.rc__x, .rc__check { flex: none; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rc__x { color: #a7afbf; }
.rc__check { color: #fff; }
.rc__check circle { stroke-width: 1.1; opacity: .4; }

/* sequential bottom-up reveal: card 1 → 2 → 3, left to right */
.solo__grid .rc.reveal {
  transition: opacity .66s cubic-bezier(.2,.75,.3,1), transform .66s cubic-bezier(.2,.75,.3,1);
}
.solo__grid .rc.reveal.is-hidden { opacity: 0; transform: translateY(56px); }
.solo__grid .rc[data-d="1"] { transition-delay: 0s; }
.solo__grid .rc[data-d="2"] { transition-delay: .16s; }
.solo__grid .rc[data-d="3"] { transition-delay: .32s; }

@media (max-width: 860px) {
  .solo__grid { grid-template-columns: 1fr; }
  .rc { min-height: auto; }
  .rc__title { margin-top: clamp(48px, 14vw, 96px); }
  .rc__foot { margin-top: clamp(28px, 6vw, 48px); }
}

/* ============================================================
   COMPARISON TABLE
   ============================================================ */
.cmp { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-top: 8px; }
.cmp__table {
  width: 100%;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 15px;
}
.cmp__table th, .cmp__table td {
  padding: 17px 20px;
  text-align: center;
  border-bottom: 1px solid var(--line);
}
.cmp__table thead th { vertical-align: bottom; border-bottom: 1px solid var(--line-2); }
.cmp__table th:first-child, .cmp__table td:first-child {
  text-align: left;
  color: var(--fg);
  font-weight: 540;
  width: 30%;
}
.cmp__colhead {
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--fg-mute);
  font-family: var(--mono);
  text-transform: uppercase;
  font-weight: 500;
}
.cmp__colname {
  display: block;
  font-family: var(--font);
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--fg-soft);
  text-transform: none;
  font-weight: 560;
  margin-top: 4px;
}
.cmp td { color: var(--fg-soft); }
.cmp .val-no  { color: var(--no); }
.cmp .val-yes { color: var(--ok); font-weight: 600; }
.cmp .val-part { color: var(--warn); }
.cmp .val-num { font-family: var(--mono); color: var(--fg-soft); }

/* highlighted Callfone column — dark navy "Our Solution" card */
.cmp__hl {
  position: relative;
  background: var(--ink);
  color: #fff;
  border-bottom: 1px solid var(--ink-line) !important;
}
.cmp thead .cmp__hl {
  border-radius: 16px 16px 0 0;
}
.cmp tbody tr:last-child .cmp__hl { border-radius: 0 0 16px 16px; border-bottom: none !important; }
.cmp__hl .cmp__colhead { color: var(--accent); }
.cmp__hl .cmp__colname { color: #fff; }
.cmp__hl.cmp__crown {
  font-family: var(--mono);
}
.cmp__hl .val-yes { color: #34e3a3; }
.cmp__hl .val-num { color: #fff; }
.cmp__hl .val-num b { color: #fff; }

/* ---- mobile (Area 2): tablo yerine segmented-control ---- */
.cmp__mobile { display: none; }
@media (max-width: 768px) {
  .cmp { overflow-x: visible; -webkit-overflow-scrolling: auto; }
  .cmp__table { display: none; }
  .cmp__mobile { display: block; }

  .cmpm__seg {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 4px;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: 999px;
    margin-bottom: 20px;
  }
  .cmpm__seg-btn {
    appearance: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--fg-soft);
    background: transparent;
    border-radius: 999px;
    padding: 11px 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
    transition: color .2s ease, background .2s ease, box-shadow .2s ease;
  }
  .cmpm__star { width: 13px; height: 13px; flex: none; }
  .cmpm__seg-btn.is-active {
    color: #fff;
    background: var(--ink);
    box-shadow: var(--sh-sm);
  }
  .cmpm__seg-btn.is-active .cmpm__star { color: var(--accent); }

  .cmpm__list { list-style: none; margin: 0; padding: 0; transition: opacity .15s ease; }
  .cmpm__list.is-swapping { opacity: 0; }
  .cmpm__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 4px;
    border-bottom: 1px solid var(--line);
  }
  .cmpm__row:last-child { border-bottom: none; }
  .cmpm__label { font-size: 0.9rem; color: var(--fg); line-height: 1.35; }
  .cmpm__val {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: right;
  }
  .cmpm__ic { width: 19px; height: 19px; flex: none; }
  .cmpm__ic--ok { color: var(--ok); }
  .cmpm__ic--no { color: var(--no); }
  .cmpm__ic--part { color: var(--warn); }
  .cmpm__num { font-family: var(--mono); color: var(--fg); font-size: 0.85rem; }
  .cmpm__txt { color: var(--fg-soft); }
}

/* ============================================================
   CHANNEL GRID
   ============================================================ */
.channels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  /* dark-gray accents, scoped to this section (overrides blue) */
  --accent: #2c2f36;
  --accent-2: #41464f;
  --accent-ink: #ffffff;
}

/* orb (left) + 3×3 grid (right) layout */
.ch-layout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: stretch;
}
.ch-orb-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.2vw, 30px);
  padding: clamp(28px, 3vw, 44px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-1);
}
.ch-orb__cap {
  margin: 0;
  text-align: center;
  text-wrap: balance;
  max-width: 22ch;
}
.ch-orb__cap--top {
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #0b1526;
}
.ch-orb__cap--bottom {
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #6b7588;
}

/* animated pastel voice/AI orb */
.ch-orb {
  position: relative;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(circle at 50% 50%, #c2cdef 0%, #a8b8e5 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.55),
    inset 0 8px 26px rgba(255,255,255,.35);
}
.ch-orb__blob {
  position: absolute;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  filter: blur(22px);
  opacity: 1;
  will-change: transform;
}
.ch-orb__blob--1 {
  top: -10%; left: -5%;
  background: radial-gradient(circle at 50% 50%, #9b2bff 0%, #b35cff 30%, rgba(155,43,255,0) 75%);
  animation: chOrb1 1.3s ease-in-out infinite;
}
.ch-orb__blob--2 {
  top: 20%; left: 35%;
  background: radial-gradient(circle at 50% 50%, #00b6f5 0%, #2fc2f0 30%, rgba(0,182,245,0) 75%);
  animation: chOrb2 1.5s ease-in-out infinite;
}
.ch-orb__blob--3 {
  top: 5%; left: 10%;
  background: radial-gradient(circle at 50% 50%, #e85a12 0%, #ff7d38 30%, rgba(232,90,18,0) 75%);
  animation: chOrb3 1.8s ease-in-out infinite;
}
.ch-orb__blob--4 {
  top: 35%; left: -10%;
  background: radial-gradient(circle at 50% 50%, #00e6ad 0%, #1fdcb5 30%, rgba(0,230,173,0) 75%);
  animation: chOrb4 2.1s ease-in-out infinite;
}
@keyframes chOrb1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%      { transform: translate(38%, 28%) scale(1.3); }
  50%      { transform: translate(18%, 44%) scale(0.85); }
  75%      { transform: translate(40%, 8%) scale(1.15); }
}
@keyframes chOrb2 {
  0%, 100% { transform: translate(0, 0) scale(0.9); }
  25%      { transform: translate(-34%, 22%) scale(1.3); }
  50%      { transform: translate(-20%, -30%) scale(1.05); }
  75%      { transform: translate(-42%, 26%) scale(1.4); }
}
@keyframes chOrb3 {
  0%, 100% { transform: translate(0, 0) scale(1.1); }
  25%      { transform: translate(30%, 34%) scale(0.8); }
  50%      { transform: translate(44%, -22%) scale(1.3); }
  75%      { transform: translate(8%, 40%) scale(1); }
}
@keyframes chOrb4 {
  0%, 100% { transform: translate(0, 0) scale(0.85); }
  25%      { transform: translate(36%, -26%) scale(1.25); }
  50%      { transform: translate(44%, 20%) scale(1.4); }
  75%      { transform: translate(20%, -34%) scale(0.9); }
}
/* decorative orb blobs kept on under reduce-motion (intentional) */
.ch {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  border-radius: var(--radius);
  background: #f4f5f7;
  border: 1px solid #eceef2;
  transition: transform .25s, border-color .25s, background .25s, box-shadow .25s;
}
.ch:hover { transform: translateY(-4px); border-color: var(--line-2); background: #ffffff; box-shadow: var(--sh); }
.ch__ic {
  width: 44px; height: 44px;
  border-radius: 11px;
  display: grid; place-items: center;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 15px;
  color: var(--fg);
  background: #fff;
  border: 1px solid var(--line-2);
}
.ch:hover .ch__ic { color: var(--accent-ink); background: linear-gradient(140deg, var(--accent), var(--accent-2)); border-color: transparent; }
.ch__name { font-weight: 560; font-size: 15.5px; }
.ch__tag { font-size: 12.5px; color: var(--fg-mute); margin-top: -8px; }
.ch--star { border-color: color-mix(in oklab, var(--accent) 28%, transparent); background: var(--accent-soft); }
.ch--star .ch__ic { color: var(--accent-ink); background: linear-gradient(140deg, var(--accent), var(--accent-2)); border-color: transparent; }

/* ============================================================
   FEATURES (3 col)
   ============================================================ */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feat {
  padding: 30px;
  border-radius: var(--radius-lg);
  background: var(--bg-1);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  transition: transform .25s, box-shadow .25s, background .25s;
}
.feat:hover { transform: translateY(-4px); background: #fff; box-shadow: var(--sh); }
.feat__ic {
  width: 50px; height: 50px;
  border-radius: 13px;
  display: grid; place-items: center;
  background: #fff;
  border: 1px solid var(--line-2);
  margin-bottom: 22px;
  color: var(--accent);
}
.feat__ic svg { width: 24px; height: 24px; }
.feat h3 { font-size: 1.3rem; font-weight: 500; letter-spacing: -0.018em; margin: 0 0 10px; color: var(--fg); }
.feat p { color: var(--fg-soft); margin: 0; font-size: 15.5px; }
.feat__metric {
  font-family: var(--mono);
  font-size: 2.6rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  background: linear-gradient(100deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; }
.step {
  padding: 30px;
  border-radius: var(--radius-lg);
  background: var(--bg-1);
  border: 1px solid var(--line);
  position: relative;
  transition: transform .25s, box-shadow .25s, background .25s;
}
.step:hover { transform: translateY(-4px); background: #fff; box-shadow: var(--sh); }
.step__n {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent);
  border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
  background: var(--accent-soft);
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  margin-bottom: 22px;
}
.step h3 { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.018em; margin: 0 0 9px; color: var(--fg); }
.step p { color: var(--fg-soft); margin: 0; font-size: 15px; }
.step__line {
  position: absolute;
  top: 49px;
  right: -10px;
  width: 20px;
  height: 1px;
  background: var(--line-2);
  z-index: 1;
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.quote {
  padding: 30px;
  border-radius: var(--radius-lg);
  background: var(--bg-1);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transition: transform .25s, box-shadow .25s, background .25s;
}
.quote:hover { transform: translateY(-4px); background: #fff; box-shadow: var(--sh); }
.quote__metric {
  font-family: var(--mono);
  font-size: 2.6rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--fg);
  margin-bottom: 8px;
}
.quote__metric b { color: var(--accent); font-weight: 500; }
.quote__metric-label { font-size: 13.5px; color: var(--fg-mute); margin-bottom: 24px; }
.quote__text { font-size: 1.06rem; color: var(--fg); line-height: 1.55; margin: 0 0 26px; text-wrap: pretty; flex: 1; }
.quote__by { display: flex; align-items: center; gap: 13px; }
.quote__av {
  width: 42px; height: 42px; border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line-2);
  display: grid; place-items: center;
  font-family: var(--mono); font-weight: 600; font-size: 14px;
  color: var(--accent);
}
.quote__by div b { display: block; font-weight: 560; font-size: 14.5px; color: var(--fg); }
.quote__by div span { font-size: 13px; color: var(--fg-mute); }

/* ============================================================
   SECURITY
   ============================================================ */
.sec__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.badges { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 30px; }
.badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 16px;
  border-radius: 11px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .03em;
  color: var(--fg);
}
.badge .tick { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.sec__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.sec__list li { display: flex; gap: 13px; align-items: flex-start; color: var(--fg-soft); font-size: 15.5px; }
.sec__list svg { flex: none; width: 22px; height: 22px; color: var(--accent); margin-top: 1px; }
.sec__list b { color: var(--fg); font-weight: 560; }
/* dark navy panel */
.sec__panel {
  border-radius: var(--radius-lg);
  background: var(--ink);
  padding: 36px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--sh-ink);
}
.sec__panel .pin {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.18;
  margin: 0;
  text-wrap: balance;
  color: #fff;
}
.sec__panel .pin .grad { background: linear-gradient(100deg, color-mix(in oklab, var(--accent) 70%, #fff), var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sec__panel p { color: rgba(255,255,255,0.66) !important; }
.sec__flag {
  margin-top: 22px;
  display: inline-flex; align-items:center; gap:10px;
  font-family: var(--mono); font-size: 12.5px; letter-spacing:.06em;
  color: rgba(255,255,255,0.7);
  padding: 9px 14px; border-radius: 999px; border: 1px solid var(--ink-line);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer { border-top: 1px solid var(--line); padding-block: 56px 30px; margin-top: clamp(60px,8vw,110px); }
.footer__top { display: flex; gap: 40px; justify-content: space-between; flex-wrap: wrap; margin-bottom: 44px; }
.footer__brand { max-width: 280px; }
.footer__brand p { color: var(--fg-mute); font-size: 14px; margin: 16px 0 0; }
.footer__cols { display: flex; gap: clamp(36px, 6vw, 80px); flex-wrap: wrap; }
.footer__col h4 { font-size: 12px; font-family: var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-mute); margin: 0 0 16px; font-weight: 500; }
.footer__col-links { display: flex; flex-direction: column; }
.footer__col a { display: block; color: var(--fg-soft); font-size: 14.5px; padding: 5px 0; transition: color .2s; }
.footer__col a:hover { color: var(--fg); }
@media (min-width: 769px) {
  .footer__col-links { flex-direction: row; flex-wrap: wrap; gap: 0 32px; }
}
.footer__bottom { display: flex; justify-content: flex-start; align-items: center; gap: 20px; flex-wrap: wrap; padding-top: 26px; border-top: 1px solid var(--line); color: var(--fg-mute); font-size: 13.5px; }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal { transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.is-hidden { opacity: 0; transform: translateY(22px); }
.reveal[data-d="1"]{ transition-delay: .08s } .reveal[data-d="2"]{ transition-delay: .16s }
.reveal[data-d="3"]{ transition-delay: .24s } .reveal[data-d="4"]{ transition-delay: .32s }

@media (prefers-reduced-motion: reduce) {
  /* disable big scroll transitions, but keep decorative looping animations */
  *, *::before, *::after { transition: none !important; }
  .reveal.is-hidden { opacity: 1; transform: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1040px) {
  .nav__links, .nav__login { display: none; }
  .nav__burger { display: flex; }
  .nav.is-open .nav__links {
    display: flex; flex-direction: column; gap: 2px;
    position: absolute; top: 72px; left: 0; right: 0;
    background: color-mix(in oklab, #fff 97%, transparent);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    padding: 14px var(--gutter) 22px;
    margin: 0;
    box-shadow: var(--sh);
  }
  .nav.is-open .nav__links a { padding: 12px 8px; font-size: 16px; }
  .nav.is-open .nav__links .nav__cta-mobile {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 10px;
    padding: 13px 16px;
    font-size: 15px;
  }
}
@media (max-width: 860px) {
  .features, .steps, .quotes { grid-template-columns: 1fr; }
  .sec__grid { grid-template-columns: 1fr; }
  .ch-layout { grid-template-columns: 1fr; }
  .channels { grid-template-columns: 1fr 1fr; }
  .step__line { display: none; }
  .cost__inner { flex-direction: column; align-items: flex-start; gap: 16px; }
}
@media (max-width: 768px) {
  /* maliyet callout: tek satır taşmasın — dikey "fiyat düşüşü" düzeni */
  .cost__big {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    font-size: clamp(1.9rem, 8vw, 2.6rem);
    line-height: 1.04;
  }
  .cost__big .old { font-size: 0.62em; }
  .cost__big .arrow {
    margin: 2px 0 0;
    transform: rotate(90deg);
    transform-origin: center;
    display: inline-block;
    font-size: 0.8em;
  }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .channels { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   MOBİL TAŞMA GÜVENLİĞİ — inline sabit genişlik/asimetrik
   margin'lerin mobilde içeriği taşırmasını/daraltmasını engelle
   ============================================================ */
@media (max-width: 768px) {
  /* hiçbir metin/kapsayıcı viewport'u aşmasın */
  .cost__txt,
  .solo__desc,
  .rc__foot,
  .lead { max-width: 100% !important; }

  /* Channels başlığındaki büyük inline sağ margin'i nötrle */
  .section-head[style] { margin-right: 0 !important; }
  .section-head .lead[style] { margin-right: 0 !important; }
}