/* ============================================================
   denizguler.com — Ana CSS
   Tasarım: orijinal frontend korunmuştur
   ============================================================ */

/* ─── CSS Custom Properties ──────────────────────────────── */
:root {
  --bg: oklch(0.965 0.012 80);
  --bg-2: oklch(0.985 0.008 80);
  --bg-card: oklch(0.99 0.005 80);
  --ink: oklch(0.22 0.015 60);
  --ink-2: oklch(0.42 0.018 60);
  --ink-3: oklch(0.62 0.018 60);
  --line: oklch(0.88 0.012 75);
  --line-2: oklch(0.92 0.01 75);
  --accent: oklch(0.34 0.05 150);
  --accent-ink: oklch(0.30 0.05 150);
  --accent-soft: oklch(0.92 0.025 150);
  --accent-fg: oklch(0.985 0.005 80);
  --shadow-sm: 0 1px 0 rgba(50,40,20,.04), 0 1px 2px rgba(50,40,20,.04);
  --shadow-md: 0 1px 0 rgba(50,40,20,.04), 0 8px 24px -10px rgba(50,40,20,.10);
  --radius: 14px;
  --radius-sm: 10px;
  --max: 1200px;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ─── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  font-size: 15.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; }
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
h1 { font-size: clamp(38px, 4.6vw, 64px); line-height: 1.05; letter-spacing: -0.02em; }
h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.12; }
h3 { font-size: clamp(20px, 1.6vw, 24px); line-height: 1.25; }
p  { margin: 0; color: var(--ink-2); }

/* ─── Layout ─────────────────────────────────────────────── */
.container { max-width: var(--max); margin: 0 auto; padding: 0 28px; }
section { padding: 96px 0; }
section.tight { padding: 72px 0; }

/* ─── Typography ─────────────────────────────────────────── */
.eyebrow {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.underline {
  display: inline-block;
  height: 2px;
  width: 44px;
  background: var(--accent);
  border-radius: 2px;
}

/* ─── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 500;
  font-size: 14px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .18s ease;
  white-space: nowrap;
  text-decoration: none;
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-fg);
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 6px 14px -8px var(--accent);
}
.btn-primary:hover { background: var(--accent-ink); transform: translateY(-1px); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--ink-2); background: var(--bg-2); }
.btn-link {
  padding: 0;
  background: transparent;
  color: var(--accent-ink);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-on-dark {
  background: transparent;
  color: var(--accent-fg);
  border-color: rgba(255,255,255,.3);
}
.btn-on-dark:hover { background: rgba(255,255,255,.08); border-color: var(--accent-fg); }

/* ─── Card ───────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* ─── Image Placeholder ──────────────────────────────────── */
.ph {
  position: relative;
  background: repeating-linear-gradient(45deg,
    color-mix(in oklch, var(--accent) 8%, var(--bg-2)) 0 10px,
    var(--bg-2) 10px 22px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ph .ph-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-2);
  background: rgba(255,255,255,.78);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  text-transform: lowercase;
}

/* ─── Section Head ───────────────────────────────────────── */
.section-head {
  text-align: center;
  margin-bottom: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.section-head .underline { margin-top: 4px; }

/* ─── Nav ────────────────────────────────────────────────── */
.nav-wrap {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklch, var(--bg) 78%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid color-mix(in oklch, var(--line) 60%, transparent);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  min-height: 72px;
}
.brand { display: flex; flex-direction: column; line-height: 1; }
.brand .name { font-family: var(--serif); font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }
.brand .role { font-family: var(--sans); font-size: 10px; font-weight: 500; letter-spacing: 0.32em; color: var(--ink-3); margin-top: 4px; text-transform: uppercase; }
.brand-logo {
  height: 52px;
  max-width: 180px;
  width: auto;
  object-fit: contain;
  display: block;
}
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { font-size: 14px; color: var(--ink-2); position: relative; padding: 4px 0; }
.nav-links a:hover { color: var(--ink); }
.nav-links a.active { color: var(--ink); }
.nav-links a.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

/* Hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 4px;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .22s ease, opacity .15s ease;
  transform-origin: center;
}

/* Mobile Menu */
.mobile-menu {
  border-top: 1px solid var(--line-2);
  background: var(--bg);
  padding: 16px 0 20px;
}
.mobile-menu .container {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mobile-menu a {
  display: block;
  padding: 10px 4px;
  font-size: 15px;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line-2);
}
.mobile-menu a.active,
.mobile-menu a:hover { color: var(--ink); }

/* ─── Hero V2 (Tasarım: 2 sütun, tam fotoğraf) ───────────── */
.hero-v2 {
  background: var(--bg);
  overflow: hidden;
  min-height: 520px;
}

.hero-v2-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 520px;
}

/* Sol metin bloğu */
.hero-v2-text {
  padding: 72px 56px 72px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-v2-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 20px;
}

.hero-v2-heading {
  font-family: var(--serif);
  font-size: clamp(34px, 3.6vw, 58px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
.hero-v2-heading em {
  font-style: italic;
  color: var(--ink);
  display: block;
}

.hero-v2-lede {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 20px 0 0;
  max-width: 480px;
}

.hero-v2-cta {
  display: flex;
  gap: 12px;
  margin-top: 32px;
  flex-wrap: wrap;
  align-items: center;
}

/* Trust badges */
.hero-v2-trust {
  display: flex;
  gap: 28px;
  margin-top: 40px;
  flex-wrap: wrap;
}
.trust-v2-item {
  display: flex;
  gap: 9px;
  align-items: flex-start;
}
.trust-v2-ic {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: color-mix(in oklch, var(--accent) 9%, var(--bg-2));
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  flex: 0 0 26px;
  margin-top: 1px;
}
.trust-v2-item strong {
  display: block;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0;
}
.trust-v2-item span {
  display: block;
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 1px;
}

/* Sağ fotoğraf bloğu */
.hero-v2-photo {
  position: relative;
  overflow: hidden;
  background: color-mix(in oklch, var(--accent) 4%, var(--bg-2));
}

.hero-v2-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.hero-v2-placeholder {
  width: 100%;
  height: 100%;
  min-height: 440px;
  background: repeating-linear-gradient(
    45deg,
    color-mix(in oklch, var(--accent) 7%, var(--bg-2)) 0 10px,
    var(--bg-2) 10px 22px
  );
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Eski hero uyumu (diğer sayfalarda kullanılıyor) */
.hero {
  padding: 64px 0 88px;
  background:
    radial-gradient(1200px 480px at 80% 10%, color-mix(in oklch, var(--accent) 6%, transparent), transparent 60%),
    var(--bg);
}
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.hero h1 .em { font-style: italic; color: var(--accent); display: block; }
.hero p.lede { font-size: 17px; max-width: 520px; margin-top: 24px; }
.hero-cta { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.hero-trust { display: flex; gap: 28px; margin-top: 44px; flex-wrap: wrap; }
.trust-item { display: flex; gap: 12px; align-items: flex-start; }
.trust-ic {
  width: 28px; height: 28px; border-radius: 8px;
  background: color-mix(in oklch, var(--accent) 8%, var(--bg-2));
  display: grid; place-items: center; color: var(--accent-ink);
  flex: 0 0 28px;
}
.trust-item h4 { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--ink); margin: 0 0 2px; letter-spacing: 0; }
.trust-item p  { font-size: 12.5px; color: var(--ink-3); }
.hero-photo { aspect-ratio: 5/6; border-radius: var(--radius); }
.hero-photo-img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }

/* ─── Services ───────────────────────────────────────────── */
.services { background: var(--bg-2); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.svc-card { padding: 28px; transition: all .2s ease; }
.svc-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: color-mix(in oklch, var(--accent) 28%, var(--line)); }
.svc-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: color-mix(in oklch, var(--accent) 8%, var(--bg-2));
  color: var(--accent-ink);
  display: grid; place-items: center;
  margin-bottom: 18px;
}
.svc-card h3 { margin-bottom: 10px; }
.svc-card p  { font-size: 14px; color: var(--ink-2); margin-bottom: 18px; line-height: 1.55; }

/* ─── TV Section ─────────────────────────────────────────── */
.tv { background: var(--bg); }
.tv-grid { display: grid; grid-template-columns: 1fr 1.55fr; gap: 56px; align-items: center; }
.tv-left h2 { margin-top: 14px; }
.tv-left p  { margin-top: 18px; max-width: 380px; font-size: 14.5px; }
.tv-cta { margin-top: 32px; }
.carousel { position: relative; }
.carousel-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tv-card { border-radius: var(--radius); overflow: hidden; background: var(--bg-card); border: 1px solid var(--line); transition: transform .18s ease, box-shadow .18s ease; }
.tv-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.tv-thumb {
  aspect-ratio: 4/3;
  position: relative;
  background: linear-gradient(160deg, color-mix(in oklch, var(--accent) 25%, #2a3a2a) 0%, color-mix(in oklch, var(--accent) 12%, #1a2620) 100%);
  display: grid; place-items: center;
}
.tv-thumb.gradient-2 { background: linear-gradient(160deg, #4a6cf7 0%, #2541b2 100%); }
.tv-thumb.gradient-3 { background: linear-gradient(160deg, #7c3aed 0%, #4c1d95 100%); }
.tv-thumb.gradient-4 { background: linear-gradient(160deg, #b45309 0%, #78350f 100%); }
.tv-thumb.gradient-5 { background: linear-gradient(160deg, #be185d 0%, #831843 100%); }
.tv-thumb-inner {
  width: 70%; aspect-ratio: 1/1.2; border-radius: 12px;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.10) 0 6px, rgba(255,255,255,.04) 6px 12px);
  border: 1px solid rgba(255,255,255,.18);
}
.tv-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tv-meta { padding: 14px 16px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tv-meta h4 { font-family: var(--serif); font-size: 17px; font-weight: 500; margin: 0 0 2px; letter-spacing: -0.005em; }
.tv-meta .ch { font-size: 12px; color: var(--ink-3); }
.play-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; padding: 5px 9px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-ink); font-weight: 500;
}
.car-arrows { position: absolute; top: 50%; transform: translateY(-50%); display: flex; justify-content: space-between; left: -8px; right: -8px; pointer-events: none; }
.car-btn {
  pointer-events: auto;
  width: 36px; height: 36px; border-radius: 999px;
  background: var(--bg-card); border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--ink-2); cursor: pointer;
  box-shadow: var(--shadow-sm); transition: all .18s ease;
}
.car-btn:hover { color: var(--ink); border-color: var(--ink-2); }
.car-btn:disabled { opacity: .4; }
.car-dots { display: flex; gap: 6px; justify-content: center; margin-top: 22px; }
.car-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--line); border: 0; padding: 0; cursor: pointer; }
.car-dot.active { width: 18px; background: var(--accent); }

/* ─── About ──────────────────────────────────────────────── */
.about { background: var(--bg); }
.about-grid { display: grid; grid-template-columns: 0.85fr 1.1fr 0.85fr; gap: 40px; align-items: center; }
.about-photo { aspect-ratio: 4/5; border-radius: var(--radius); }
.about-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
.about-body .signature { font-family: var(--serif); font-style: italic; font-size: 24px; color: var(--accent-ink); margin-top: 20px; }
.about-body p { margin-top: 18px; font-size: 14.5px; line-height: 1.65; }
.about-stats { display: flex; flex-direction: column; gap: 18px; }
.stat-row { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.stat-row:last-child { border-bottom: 0; }
.stat-ic {
  width: 36px; height: 36px; border-radius: 10px;
  background: color-mix(in oklch, var(--accent) 8%, var(--bg-2));
  color: var(--accent-ink); display: grid; place-items: center; flex: 0 0 36px;
}
.stat-row h4 { font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--ink); margin: 0 0 2px; letter-spacing: 0; }
.stat-row p  { font-size: 12.5px; color: var(--ink-3); margin: 0; }

/* ─── Approach ───────────────────────────────────────────── */
.approach { background: var(--bg-2); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.approach-card { padding: 26px 22px; }
.approach-num { font-family: var(--serif); font-style: italic; font-size: 28px; color: var(--accent); margin-bottom: 14px; line-height: 1; }
.approach-card h4 { font-family: var(--serif); font-size: 19px; font-weight: 500; margin: 0 0 8px; }
.approach-card p  { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }

/* ─── Testimonials ───────────────────────────────────────── */
.testi { background: var(--bg); }
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.testi-card { padding: 28px; display: flex; flex-direction: column; gap: 18px; min-height: 100%; }
.testi-card .stars { color: var(--accent); font-size: 14px; letter-spacing: 2px; }
.testi-card blockquote { margin: 0; font-family: var(--serif); font-size: 19px; font-weight: 400; line-height: 1.45; color: var(--ink); letter-spacing: -0.005em; }
.testi-card .who { display: flex; gap: 12px; align-items: center; margin-top: auto; }
.avatar {
  width: 38px; height: 38px; border-radius: 999px;
  background: color-mix(in oklch, var(--accent) 14%, var(--bg-2));
  color: var(--accent-ink); display: grid; place-items: center;
  font-size: 13px; font-weight: 600; flex: 0 0 38px;
}
.who h5 { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--ink); margin: 0; }
.who span { font-size: 12px; color: var(--ink-3); }

/* ─── FAQ ────────────────────────────────────────────────── */
.faq { background: var(--bg-2); border-top: 1px solid var(--line-2); }
.faq-wrap { max-width: 780px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq-q {
  width: 100%; text-align: left; padding: 22px 4px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--serif); font-size: 20px; font-weight: 500; color: var(--ink);
}
.faq-plus {
  width: 28px; height: 28px; border-radius: 999px;
  background: color-mix(in oklch, var(--accent) 8%, var(--bg-2));
  color: var(--accent-ink); display: grid; place-items: center; flex: 0 0 28px;
  transition: transform .25s ease, background .2s ease;
}
.faq-item.open .faq-plus { transform: rotate(45deg); background: var(--accent); color: var(--accent-fg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease, padding .25s ease; color: var(--ink-2); font-size: 14.5px; line-height: 1.65; padding: 0 4px; }
.faq-item.open .faq-a { max-height: 280px; padding: 0 4px 22px; }

/* ─── Contact ────────────────────────────────────────────── */
.contact { background: var(--bg); }
.contact-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: flex-start; }
.contact-info h2 { margin-bottom: 18px; }
.contact-info p  { font-size: 15px; max-width: 440px; }
.contact-list { margin-top: 36px; display: flex; flex-direction: column; gap: 18px; }
.contact-list .row { display: flex; gap: 14px; align-items: flex-start; }
.contact-list .row .ic {
  width: 36px; height: 36px; border-radius: 10px;
  background: color-mix(in oklch, var(--accent) 8%, var(--bg-2)); color: var(--accent-ink);
  display: grid; place-items: center; flex: 0 0 36px;
}
.contact-list h4 { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 4px; }
.contact-list .row p { margin: 0; color: var(--ink); font-size: 14.5px; }

/* ─── Form ───────────────────────────────────────────────── */
.form-card { padding: 32px; border-radius: var(--radius); background: var(--bg-card); border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-row label { font-size: 12px; font-weight: 600; color: var(--ink-2); letter-spacing: .02em; }
.form-row input,
.form-row textarea,
.form-row select {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg-2); font-family: inherit; font-size: 14px; color: var(--ink);
  outline: none; transition: border-color .15s ease, background .15s ease;
}
.form-row textarea { resize: vertical; min-height: 110px; }
.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
  border-color: var(--accent); background: var(--bg-card);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 14%, transparent);
}
.form-row.error input,
.form-row.error textarea { border-color: oklch(0.55 0.16 25); }
.form-err { font-size: 12px; color: oklch(0.50 0.18 25); margin-top: 2px; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-row-2 .form-row { margin-bottom: 0; }
.form-success {
  padding: 18px;
  background: color-mix(in oklch, var(--accent) 10%, var(--bg-2));
  border: 1px solid color-mix(in oklch, var(--accent) 30%, var(--line));
  border-radius: 10px; color: var(--accent-ink); font-size: 14px;
  display: flex; gap: 10px; align-items: flex-start; margin-bottom: 18px;
}
.form-error-banner {
  padding: 14px 18px;
  background: oklch(0.95 0.04 25);
  border: 1px solid oklch(0.82 0.08 25);
  border-radius: 10px; color: oklch(0.45 0.18 25); font-size: 14px;
  margin-bottom: 16px;
}

/* ─── CTA Strip ──────────────────────────────────────────── */
.cta-strip { background: var(--accent); color: var(--accent-fg); padding: 40px 0; }
.cta-strip-grid { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cta-strip h3 { color: var(--accent-fg); font-family: var(--serif); font-size: 26px; font-weight: 500; }
.cta-strip p  { color: color-mix(in oklch, var(--accent-fg) 75%, transparent); font-size: 14px; margin-top: 4px; }
.cta-strip .btn-ghost { background: transparent; color: var(--accent-fg); border-color: color-mix(in oklch, var(--accent-fg) 30%, transparent); }
.cta-strip .btn-ghost:hover { background: color-mix(in oklch, var(--accent-fg) 12%, transparent); border-color: var(--accent-fg); }
.cta-cal { width: 44px; height: 44px; border-radius: 12px; background: color-mix(in oklch, var(--accent-fg) 14%, transparent); display: grid; place-items: center; flex: 0 0 44px; }

/* ─── Footer ─────────────────────────────────────────────── */
footer { background: var(--bg-2); border-top: 1px solid var(--line-2); padding: 64px 0 28px; }
.ft-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
.ft-col h5 { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 16px; }
.ft-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ft-col a  { font-size: 14px; color: var(--ink-2); }
.ft-col a:hover { color: var(--ink); }
.ft-bottom {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-top: 28px; margin-top: 40px; border-top: 1px solid var(--line-2);
  font-size: 12px; color: var(--ink-3);
}
.ft-social { display: flex; gap: 10px; margin-top: 18px; }
.ft-social a {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--bg-card); border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--ink-2);
}
.ft-social a:hover { color: var(--accent-ink); border-color: var(--accent); }

/* ─── Breadcrumb ─────────────────────────────────────────── */
.breadcrumb { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--ink-3); margin-bottom: 24px; flex-wrap: wrap; }
.breadcrumb a { color: var(--ink-3); }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb .sep { color: var(--line); }

/* ─── Blog ───────────────────────────────────────────────── */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.blog-card { border-radius: var(--radius); overflow: hidden; background: var(--bg-card); border: 1px solid var(--line); transition: all .18s ease; }
.blog-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.blog-thumb { aspect-ratio: 16/9; overflow: hidden; }
.blog-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.blog-card:hover .blog-thumb img { transform: scale(1.02); }
.blog-thumb-placeholder { width: 100%; height: 100%; background: repeating-linear-gradient(45deg, color-mix(in oklch, var(--accent) 8%, var(--bg-2)) 0 10px, var(--bg-2) 10px 22px); }
.blog-body { padding: 20px; }
.blog-cat { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 8px; }
.blog-body h3 { font-size: 19px; margin-bottom: 10px; line-height: 1.3; }
.blog-body p  { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; margin-bottom: 14px; }
.blog-meta { display: flex; gap: 14px; align-items: center; font-size: 12px; color: var(--ink-3); }

/* ─── Pagination ─────────────────────────────────────────── */
.pagination { display: flex; gap: 6px; justify-content: center; margin-top: 48px; }
.pagination a,
.pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg-card);
  font-size: 14px; color: var(--ink-2);
}
.pagination a:hover { border-color: var(--accent); color: var(--accent-ink); }
.pagination .current { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }

/* ─── TV Page ────────────────────────────────────────────── */
.filter-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--bg-card); color: var(--ink-2); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all .18s ease;
}
.chip:hover { border-color: var(--ink-3); color: var(--ink); }
.chip.active { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.sort { position: relative; }
.sort select {
  appearance: none; padding: 9px 36px 9px 14px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg-card); color: var(--ink);
  font-family: inherit; font-size: 13px; outline: none; min-width: 140px;
}
.sort::after { content: "▾"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--ink-3); font-size: 11px; }
.programs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.program-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: all .18s ease; }
.program-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.thumb { position: relative; aspect-ratio: 16/10; }
.thumb-bg { position: absolute; inset: 0; }
.thumb-fig { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 42%; aspect-ratio: 1/1.3; background: linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.18)); border-top-left-radius: 50% 35%; border-top-right-radius: 50% 35%; }
.thumb-fig::before { content: ""; position: absolute; top: 6%; left: 50%; transform: translateX(-50%); width: 46%; aspect-ratio: 1/1; border-radius: 50%; background: rgba(255,255,255,.24); }
.ch-badge { position: absolute; top: 10px; left: 10px; padding: 5px 10px; border-radius: 6px; background: rgba(255,255,255,.95); color: var(--ink); font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 46px; height: 46px; border-radius: 999px; background: rgba(255,255,255,.95); color: var(--ink); display: grid; place-items: center; box-shadow: 0 8px 22px -6px rgba(0,0,0,.3); cursor: pointer; border: 0; }
.duration { position: absolute; right: 10px; bottom: 10px; padding: 3px 8px; border-radius: 6px; background: rgba(0,0,0,.7); color: #fff; font-size: 11px; font-weight: 600; font-family: var(--mono); }
.program-meta { padding: 16px; }
.program-meta h4 { font-family: var(--serif); font-size: 18px; font-weight: 500; margin: 0 0 6px; line-height: 1.25; }
.program-meta .date { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; color: var(--ink-3); margin-bottom: 10px; }
.program-meta p  { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; margin-bottom: 14px; min-height: 54px; }
.program-meta .watch { font-size: 13px; color: var(--accent-ink); font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
.load-more { text-align: center; margin-top: 32px; }

/* ─── Reveal Animation ───────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ─── Hakkımda ───────────────────────────────────────────── */
.hero-photo-wrap { position: relative; aspect-ratio: 1/1.05; border-radius: var(--radius); overflow: hidden; }
.name-card {
  position: absolute; right: 18px; bottom: 18px;
  background: color-mix(in oklch, var(--accent) 90%, #000);
  color: var(--accent-fg); padding: 18px 22px; border-radius: 12px;
  box-shadow: 0 12px 32px -10px rgba(0,0,0,.4); max-width: 60%;
}
.name-card h4 { font-family: var(--serif); font-size: 22px; font-weight: 500; color: var(--accent-fg); margin: 0; letter-spacing: -0.01em; }
.name-card .role { font-size: 11.5px; color: color-mix(in oklch, var(--accent-fg) 70%, transparent); letter-spacing: .04em; margin-top: 4px; }
.name-card .sig { font-family: var(--serif); font-style: italic; font-size: 18px; color: color-mix(in oklch, var(--accent-fg) 85%, transparent); margin-top: 10px; padding-top: 10px; border-top: 1px solid color-mix(in oklch, var(--accent-fg) 18%, transparent); }

/* ─── Responsive — Tablet (≤ 980px) ─────────────────────── */
@media (max-width: 980px) {
  /* Layout */
  section { padding: 56px 0; }
  .hero   { padding: 40px 0 56px; }
  .container { padding: 0 24px; }

  /* Nav */
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .nav-cta { display: none; }
  .nav { padding: 14px 0; }

  /* Hero V2 — tablet */
  .hero-v2-inner { grid-template-columns: 1fr 1fr; min-height: 420px; }
  .hero-v2-text  { padding: 48px 32px 48px 24px; }
  .hero-v2-heading { font-size: clamp(28px, 4vw, 44px); }
  .hero-v2-trust { gap: 16px; }

  /* Hero (eski) */
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero h1 { font-size: clamp(32px, 5vw, 52px); }
  .hero p.lede { font-size: 15.5px; max-width: 100%; }
  .hero-photo, .hero-photo-wrap { max-width: 500px; margin: 0 auto; width: 100%; }
  .hero-trust { gap: 18px; }

  /* Grids */
  .tv-grid     { grid-template-columns: 1fr; gap: 32px; }
  .contact-grid{ grid-template-columns: 1fr; gap: 32px; }
  .about-grid  { grid-template-columns: 1fr; gap: 28px; text-align: center; }
  .about-body .signature { margin-top: 14px; }
  .about-stats { max-width: 480px; margin: 0 auto; }
  .stat-row { text-align: left; }
  .grid-3      { grid-template-columns: 1fr 1fr; }
  .grid-4      { grid-template-columns: 1fr 1fr; }
  .testi-grid  { grid-template-columns: 1fr 1fr; gap: 16px; }
  .blog-grid   { grid-template-columns: 1fr 1fr; gap: 16px; }

  /* TV carousel */
  .carousel-track { grid-template-columns: 1fr 1fr; }
  .programs-grid  { grid-template-columns: 1fr 1fr; }

  /* Footer */
  .ft-grid { grid-template-columns: 1fr 1fr; gap: 28px; }

  /* Hakkımda */
  .hero-photo-wrap { max-width: 460px; margin: 0 auto; }
  .name-card { max-width: 70%; }

  /* CTA strip */
  .cta-strip-grid { flex-direction: column; gap: 20px; align-items: flex-start; }
}

/* ─── Responsive — Mobile (≤ 640px) ─────────────────────── */
@media (max-width: 640px) {
  /* Base */
  section { padding: 44px 0; }
  .hero   { padding: 32px 0 44px; }
  .container { padding: 0 16px; }
  body { font-size: 15px; }

  /* Nav */
  .brand .name { font-size: 20px; }
  .brand .role { font-size: 9px; }

  /* Hero V2 — mobile: dikey yığın, fotoğraf önce */
  .hero-v2-inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    min-height: unset;
  }
  .hero-v2-photo {
    order: -1;
    height: 300px;
  }
  .hero-v2-text {
    padding: 36px 16px 44px;
  }
  .hero-v2-eyebrow { font-size: 10px; margin-bottom: 14px; }
  .hero-v2-heading { font-size: clamp(26px, 7vw, 38px); }
  .hero-v2-lede    { font-size: 14.5px; margin-top: 14px; }
  .hero-v2-cta     { flex-direction: column; gap: 10px; margin-top: 24px; }
  .hero-v2-cta .btn { width: 100%; justify-content: center; }
  .hero-v2-trust   { gap: 14px; margin-top: 28px; flex-direction: column; }

  /* Hero (eski) */
  .hero h1 { font-size: clamp(28px, 7vw, 40px); }
  .hero p.lede { font-size: 15px; margin-top: 16px; }
  .hero-cta { gap: 10px; flex-direction: column; }
  .hero-cta .btn { width: 100%; justify-content: center; }
  .hero-trust { flex-direction: column; gap: 14px; margin-top: 28px; }
  .hero-photo { aspect-ratio: 4/3; }

  /* Grids — tek sütun */
  .grid-3     { grid-template-columns: 1fr; }
  .grid-4     { grid-template-columns: 1fr; }
  .testi-grid { grid-template-columns: 1fr; }
  .blog-grid  { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; }

  /* TV */
  .carousel-track { grid-template-columns: 1fr; }
  .programs-grid  { grid-template-columns: 1fr; }
  .filter-bar { flex-direction: column; align-items: flex-start; gap: 12px; }
  .chips { gap: 6px; }
  .chip { padding: 7px 12px; font-size: 12px; }

  /* Approach cards — 2 sütun mini */
  .grid-4.approach-cards { grid-template-columns: 1fr 1fr; gap: 12px; }
  .approach-card { padding: 18px 16px; }
  .approach-num { font-size: 22px; }

  /* Contact */
  .contact-grid { gap: 28px; }
  .form-row-2   { grid-template-columns: 1fr; }
  .form-card    { padding: 20px; }

  /* Footer */
  .ft-grid   { grid-template-columns: 1fr; gap: 24px; }
  .ft-bottom { flex-direction: column; gap: 10px; align-items: center; text-align: center; }
  .ft-bottom span { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
  footer { padding: 44px 0 20px; }

  /* Hakkımda */
  .hero-photo-wrap { max-width: 100%; }
  .name-card { right: 10px; bottom: 10px; max-width: 80%; padding: 12px 16px; }
  .name-card h4 { font-size: 17px; }
  .name-card .sig { font-size: 15px; }

  /* Testimonials */
  .testi-card { padding: 20px; }
  .testi-card blockquote { font-size: 16px; }

  /* Sections */
  .section-head { margin-bottom: 36px; gap: 10px; }
  h2 { font-size: clamp(22px, 5vw, 32px); }
  h3 { font-size: clamp(18px, 4vw, 22px); }

  /* FAQ */
  .faq-q { font-size: 16px; padding: 18px 4px; }

  /* Blog */
  .blog-body h3 { font-size: 17px; }
  .blog-body p  { font-size: 13px; }

  /* TV Programs */
  .program-meta h4 { font-size: 15px; }
  .program-meta p  { min-height: auto; font-size: 12px; }

  /* CTA Strip */
  .cta-strip { padding: 28px 0; }
  .cta-strip h3 { font-size: 20px; }
  .cta-strip .btn { width: 100%; justify-content: center; }

  /* Buttons */
  .btn { padding: 11px 16px; font-size: 13.5px; }
}

/* ─── Responsive — Küçük telefon (≤ 380px) ──────────────── */
@media (max-width: 380px) {
  .container { padding: 0 14px; }
  .hero h1 { font-size: 26px; }
  .chips { gap: 4px; }
  .chip { padding: 6px 10px; font-size: 11.5px; }
}

/* ─── Reduced Motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ─── Alertler ───────────────────────────────────────────── */
.alert { padding: 14px 18px; border-radius: 10px; font-size: 14px; margin-bottom: 16px; display: flex; gap: 10px; align-items: flex-start; }
.alert-success { background: color-mix(in oklch, var(--accent) 10%, var(--bg-2)); border: 1px solid color-mix(in oklch, var(--accent) 30%, var(--line)); color: var(--accent-ink); }
.alert-error   { background: oklch(0.95 0.04 25); border: 1px solid oklch(0.82 0.08 25); color: oklch(0.45 0.18 25); }

/* ══════════════════════════════════════════════════════════
/* ══════════════════════════════════════════════════════════
   Anasayfa TV — Split layout (Görseldeki tasarım)
   Sol: koyu panel | Sağ: yatay kart carousel + overlay oklar
   ══════════════════════════════════════════════════════════ */
/* Section: max-width container içinde, full-bleed değil */
.htv-section {
  overflow: hidden;
  padding: 48px 20px;
  background: var(--bg-2);
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}

.htv-wrap {
  display: grid;
  grid-template-columns: 290px 1fr;
  min-height: 340px;
  max-width: var(--max);
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 20px -6px rgba(40,30,10,.12);
}

/* Sol panel */
.htv-panel { background: var(--accent); display: flex; align-items: stretch; }
.htv-panel-inner { padding: 44px 36px 40px; display: flex; flex-direction: column; width: 100%; }
.htv-eyebrow { font-size: 9.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: color-mix(in oklch, var(--accent-fg) 58%, transparent); margin: 0 0 14px; font-family: var(--sans); }
.htv-heading { font-family: var(--serif); font-size: clamp(18px, 1.8vw, 24px); font-weight: 500; line-height: 1.28; color: var(--accent-fg); margin: 0 0 14px; letter-spacing: -.01em; }
.htv-desc { font-size: 12.5px; line-height: 1.7; color: color-mix(in oklch, var(--accent-fg) 62%, transparent); margin: 0 0 24px; flex: 1; }
.htv-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1.5px solid color-mix(in oklch, var(--accent-fg) 30%, transparent); border-radius: 8px; font-size: 12.5px; font-weight: 500; color: var(--accent-fg); text-decoration: none; align-self: flex-start; transition: border-color .16s, background .16s; }
.htv-btn:hover { border-color: var(--accent-fg); background: color-mix(in oklch, var(--accent-fg) 10%, transparent); }

/* Sağ: carousel */
.htv-carousel-wrap { position: relative; overflow: hidden; background: var(--bg-2); display: flex; align-items: center; }

/* Overlay ok butonlar */
.htv-nav-btn {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  z-index: 10;
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  color: var(--ink-2);
  display: grid; place-items: center;
  cursor: pointer;
  transition: all .18s;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.htv-nav-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.htv-nav-btn:disabled { opacity: .35; cursor: default; }
.htv-nav-prev { left: 10px; }
.htv-nav-next { right: 10px; }

/* Dots */
.htv-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 10; }
.htv-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--line); border: 0; padding: 0; cursor: pointer; transition: all .2s; }
.htv-dot.active { width: 18px; background: var(--accent); }

.htv-track {
  display: flex;
  gap: 14px;
  padding: 24px 52px 40px;
  transition: transform .36s cubic-bezier(.4,0,.2,1);
  will-change: transform;
  align-items: stretch;   /* tüm kartlar aynı yükseklik */
}

/* Kart — landscape 16/10, hepsi eşit */
.htv-card {
  flex: 0 0 210px;        /* sabit genişlik — değişmez */
  min-width: 0;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, border-color .18s;
  display: flex;
  flex-direction: column;
  outline: none;
}
.htv-card:hover, .htv-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px -8px rgba(40,30,10,.15);
  border-color: color-mix(in oklch, var(--accent) 35%, var(--line));
}

.htv-photo { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--bg-2); flex-shrink: 0; }
.htv-photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s; display: block; }
.htv-card:hover .htv-photo-img, .htv-card:focus-visible .htv-photo-img { transform: scale(1.04); }
.htv-photo-placeholder { position: absolute; inset: 0; display: grid; place-items: center; }

.htv-photo-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0); display: grid; place-items: center; transition: background .2s; z-index: 2; }
.htv-card:hover .htv-photo-overlay, .htv-card:focus-visible .htv-photo-overlay { background: rgba(0,0,0,.22); }

.htv-play { width: 38px; height: 38px; border-radius: 999px; background: rgba(255,255,255,.95); color: var(--ink); display: grid; place-items: center; box-shadow: 0 4px 16px rgba(0,0,0,.25); opacity: 0; transform: scale(.75); transition: opacity .18s, transform .18s; }
.htv-card:hover .htv-play, .htv-card:focus-visible .htv-play { opacity: 1; transform: scale(1); }

.htv-logo { position: absolute; top: 7px; left: 7px; z-index: 3; background: rgba(255,255,255,.95); border-radius: 4px; padding: 2px 6px; display: flex; align-items: center; box-shadow: 0 1px 4px rgba(0,0,0,.1); }

.htv-info { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 3px; }
.htv-channel { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.htv-card-title { font-family: var(--serif); font-size: 14px; font-weight: 500; color: var(--ink); line-height: 1.3; margin: 0; }
.htv-watch { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 11px; font-weight: 600; color: var(--accent-ink); }

/* Responsive */
@media (max-width: 1024px) {
  .htv-section { padding: 36px 16px; }
  .htv-wrap { grid-template-columns: 260px 1fr; border-radius: 14px; }
  .htv-card { flex: 0 0 196px; }
}
@media (max-width: 768px) {
  .htv-section { padding: 28px 12px; }
  .htv-wrap { grid-template-columns: 200px 1fr; border-radius: 12px; min-height: auto; }
  .htv-heading { font-size: 16px; }
  .htv-desc { display: none; }
  .htv-card { flex: 0 0 168px; }
  .htv-track { padding: 16px 44px 30px; }
}
@media (max-width: 560px) {
  .htv-section { padding: 20px 12px; }
  .htv-wrap { grid-template-columns: 1fr; border-radius: 12px; }
  .htv-panel-inner { padding: 24px 18px 20px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; }
  .htv-eyebrow { display: none; }
  .htv-heading { font-size: 14px; margin: 0; flex: 1 1 100%; }
  .htv-desc { display: none; }
  .htv-carousel-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .htv-track { transform: none !important; padding: 14px 12px 24px; align-items: stretch; }
  /* Mobilde hepsi eşit: sabit genişlik, sabit oran */
  .htv-card { flex: 0 0 170px !important; }
  .htv-photo { aspect-ratio: 16/10 !important; }
  .htv-nav-btn { display: none; }
  .htv-play { opacity: 1 !important; transform: scale(.8) !important; }
}
/* ─── Touch UX İyileştirmeleri ───────────────────────────── */
@media (hover: none) {
  /* Hover efektleri touch'ta çalışmaz, tap feedback ekle */
  .btn:active          { opacity: .85; transform: scale(.98); }
  .svc-card:active     { transform: translateY(-1px); }
  .blog-card:active    { transform: translateY(-1px); }
  .program-card:active { transform: translateY(-1px); }
  .chip:active         { opacity: .8; }

  /* Nav linkleri mobile'da daha geniş tap alanı */
  .mobile-menu a { padding: 12px 4px; min-height: 48px; display: flex; align-items: center; }
}

/* ─── Mobil Nav Açık Durumu ─────────────────────────────── */
.mobile-menu[hidden] { display: none !important; }
.mobile-menu:not([hidden]) { display: block; }

/* ─── Mobil Menü Animasyonu ─────────────────────────────── */
.mobile-menu {
  animation: slideDown .2s ease;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* SIDEBAR MOBİL MENÜ */
.nav-hamburger{display:none;flex-direction:column;gap:5px;background:transparent;border:0;cursor:pointer;padding:8px;border-radius:8px;transition:background .15s;flex-shrink:0;z-index:10}
.nav-hamburger:hover{background:var(--bg-2)}
.nav-hamburger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .22s ease,opacity .15s ease;transform-origin:center}
.sb-overlay{display:none;position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.48);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .28s ease}
.sb-overlay.open{display:block;opacity:1}
.sb-drawer{position:fixed;top:0;left:0;bottom:0;z-index:500;width:min(300px,88vw);background:var(--bg-card);display:flex;flex-direction:column;transform:translateX(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);box-shadow:6px 0 40px rgba(0,0,0,.14);overflow-y:auto;overscroll-behavior:contain}
.sb-drawer.open{transform:translateX(0)}
.sb-top{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 16px;border-bottom:1px solid var(--line-2);flex-shrink:0}
.sb-logo-link{text-decoration:none;display:block}
.sb-close{width:36px;height:36px;border-radius:8px;border:1.5px solid var(--line);background:var(--bg-2);cursor:pointer;display:grid;place-items:center;color:var(--ink-2);transition:all .15s;flex-shrink:0}
.sb-close:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.sb-nav{display:flex;flex-direction:column;padding:10px 0;flex:1}
.sb-link{display:flex;align-items:center;padding:14px 22px;min-height:52px;font-size:15.5px;font-weight:500;color:var(--ink-2);text-decoration:none;border-left:3px solid transparent;transition:all .15s;border-bottom:1px solid var(--line-2)}
.sb-link:last-child{border-bottom:0}
.sb-link:hover{color:var(--ink);background:var(--bg-2);border-left-color:color-mix(in oklch,var(--accent) 30%,transparent)}
.sb-link.active{color:var(--accent-ink);background:color-mix(in oklch,var(--accent) 7%,var(--bg-2));border-left-color:var(--accent);font-weight:600}
.sb-foot{padding:18px 20px 28px;border-top:1px solid var(--line-2);flex-shrink:0;display:flex;flex-direction:column;gap:14px}
.sb-cta{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;background:var(--accent);color:#fff!important;border-radius:10px;font-size:14.5px;font-weight:600;text-decoration:none;transition:background .18s,transform .12s;box-shadow:0 4px 14px -4px color-mix(in oklch,var(--accent) 50%,transparent)}
.sb-cta:hover{background:var(--accent-ink);transform:translateY(-1px)}
.sb-contact{display:flex;flex-direction:column;gap:8px}
.sb-contact a{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-3);text-decoration:none;transition:color .15s}
.sb-contact a:hover{color:var(--accent-ink)}
.sb-social{display:flex;gap:8px}
.sb-social a{width:34px;height:34px;border-radius:8px;background:var(--bg-2);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-2);transition:all .15s}
.sb-social a:hover{color:var(--accent-ink);border-color:var(--accent);background:var(--accent-soft)}
@media(max-width:980px){
  .nav-hamburger{display:flex}
  .nav-links,.nav-cta{display:none}
  .nav{position:relative;display:flex;align-items:center;justify-content:center;padding:14px 16px;min-height:66px}
  .nav-hamburger{position:absolute;left:16px;top:50%;transform:translateY(-50%)}
  .brand{position:relative;z-index:1}
}

/* ═══════ SIDEBAR + MOBİL HEADER ═══════ */
.sb-overlay{display:none;position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.48);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .28s ease}
.sb-overlay.open{display:block !important;opacity:1}
.sb-drawer{position:fixed !important;top:0;left:0;bottom:0;z-index:500;width:min(300px,88vw);background:var(--bg-card,#fff);display:flex !important;flex-direction:column;transform:translateX(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);box-shadow:6px 0 40px rgba(0,0,0,.14);overflow-y:auto;overscroll-behavior:contain}
.sb-drawer.open{transform:translateX(0) !important}
.sb-top{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 16px;border-bottom:1px solid var(--line-2,#e2e8f0);flex-shrink:0}
.sb-logo-link{text-decoration:none;display:block}
.sb-close{width:36px;height:36px;border-radius:8px;border:1.5px solid var(--line,#e2e8f0);background:var(--bg-2,#f8fafc);cursor:pointer;display:grid;place-items:center;color:var(--ink-2,#64748b);transition:all .15s;flex-shrink:0}
.sb-close:hover{background:var(--accent,#2d6a4f);border-color:var(--accent,#2d6a4f);color:#fff}
.sb-nav{display:flex;flex-direction:column;padding:10px 0;flex:1}
.sb-link{display:flex;align-items:center;padding:14px 22px;min-height:52px;font-size:15.5px;font-weight:500;color:var(--ink-2,#64748b);text-decoration:none;border-left:3px solid transparent;transition:all .15s;border-bottom:1px solid var(--line-2,#f1f5f9)}
.sb-link:last-child{border-bottom:0}
.sb-link:hover{color:var(--ink,#1e293b);background:var(--bg-2,#f8fafc);border-left-color:rgba(45,106,79,.3)}
.sb-link.active{color:var(--accent-ink,#1a5c3a);background:rgba(45,106,79,.07);border-left-color:var(--accent,#2d6a4f);font-weight:600}
.sb-foot{padding:18px 20px 28px;border-top:1px solid var(--line-2,#f1f5f9);flex-shrink:0;display:flex;flex-direction:column;gap:14px}
.sb-cta{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;background:var(--accent,#2d6a4f);color:#fff !important;border-radius:10px;font-size:14.5px;font-weight:600;text-decoration:none;transition:background .18s,transform .12s}
.sb-cta:hover{background:#1a5c3a;transform:translateY(-1px)}
.sb-contact{display:flex;flex-direction:column;gap:8px}
.sb-contact a{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-3,#94a3b8);text-decoration:none;transition:color .15s}
.sb-contact a:hover{color:var(--accent-ink,#1a5c3a)}
.sb-social{display:flex;gap:8px}
.sb-social a{width:34px;height:34px;border-radius:8px;background:var(--bg-2,#f8fafc);border:1px solid var(--line,#e2e8f0);display:grid;place-items:center;color:var(--ink-2,#64748b);transition:all .15s}
.sb-social a:hover{color:var(--accent-ink,#1a5c3a);border-color:var(--accent,#2d6a4f);background:rgba(45,106,79,.08)}

/* Hamburger — desktop'ta gizli */
.nav-hamburger{display:none;flex-direction:column;gap:5px;background:transparent;border:0;cursor:pointer;padding:8px;border-radius:8px;transition:background .15s;flex-shrink:0;z-index:10;position:absolute;left:16px;top:50%;transform:translateY(-50%)}
.nav-hamburger:hover{background:var(--bg-2,#f8fafc)}
.nav-hamburger span{display:block;width:22px;height:2px;background:var(--ink,#1e293b);border-radius:2px;transition:transform .22s ease,opacity .15s ease;transform-origin:center}

/* Mobil: hamburger sol, logo orta */
@media(max-width:980px){
  .nav-hamburger{display:flex}
  .nav-links{display:none !important}
  .nav-cta{display:none !important}
  .nav{position:relative !important;display:flex !important;align-items:center !important;justify-content:center !important;padding:14px 16px !important;min-height:66px !important}
  .brand{position:relative;z-index:1}
}

/* Hamburger kesin görünür ve tıklanabilir */
.nav-hamburger { pointer-events: auto !important; cursor: pointer !important; }
@media(max-width:980px){
  .nav-hamburger { display: flex !important; }
  .nav-links { display: none !important; }
  .nav-cta { display: none !important; }
}

/* ════════════════════════════════════════════════════════════
   UI/UX PRO MAX — Mobil Optimizasyon
   Touch targets min 44px | 2-sütun layoutlar | Tap delay fix
   ════════════════════════════════════════════════════════════ */

/* Touch-action: tap delay kaldır */
a, button, [role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Tüm butonlar min 44px */
.btn, .chip, .car-btn, .bc-btn, .tc-btn,
.sb-cta, .sb-link, .sb-close, .nav-hamburger,
.play-btn, .htv-nav-btn {
  min-height: 44px;
}

/* ── MOBİL (≤ 640px) ─────────────────────────────────────── */
@media (max-width: 640px) {

  /* Body font min 16px */
  body { font-size: 16px; }

  /* Container padding */
  .container { padding: 0 16px; }

  /* ── HERO ── */
  .hero-v2-inner { grid-template-columns: 1fr; min-height: unset; }
  .hero-v2-photo { order: -1; height: 260px; }
  .hero-v2-text  { padding: 28px 16px 36px; }
  .hero-v2-heading { font-size: clamp(24px, 6vw, 32px); }
  .hero-v2-lede    { font-size: 15px; }
  .hero-v2-cta { flex-direction: column; gap: 10px; }
  .hero-v2-cta .btn { width: 100%; justify-content: center; min-height: 50px; font-size: 15px; }

  /* Trust badges: 2 sütun */
  .hero-v2-trust {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 24px;
  }
  .trust-v2-item { align-items: flex-start; }
  .trust-v2-item strong { font-size: 12px; }
  .trust-v2-item span   { font-size: 11px; }

  /* ── SERVİSLER: 2 sütun (ufak tablette de) ── */
  .grid-3 { grid-template-columns: 1fr 1fr; gap: 12px; }
  .svc-card { padding: 18px 14px; }
  .svc-icon { width: 38px; height: 38px; margin-bottom: 12px; }
  .svc-card h3 { font-size: 15px; }
  .svc-card p  { font-size: 13px; }

  /* ── HAKKIMDA İSTATİSTİK: 2 sütun ── */
  .about-grid { grid-template-columns: 1fr; gap: 24px; }
  .about-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  .stat-row {
    padding: 14px 10px;
    border-bottom: 1px solid var(--line-2);
    border-right: 1px solid var(--line-2);
  }
  .stat-row:nth-child(even) { border-right: 0; }
  .stat-row:nth-last-child(-n+2) { border-bottom: 0; }

  /* ── YAKLAŞIM (Approach): 2 sütun ── */
  .grid-4 { grid-template-columns: 1fr 1fr; gap: 12px; }
  .approach-card { padding: 18px 14px; }
  .approach-num  { font-size: 22px; }
  .approach-card h4 { font-size: 16px; }
  .approach-card p  { font-size: 13px; }

  /* ── TESTİMONİALS ── */
  .testi-grid { grid-template-columns: 1fr; }
  .testi-card { padding: 20px 16px; }
  .testi-card blockquote { font-size: 16px; }

  /* ── BLOG GRID: 1 sütun mobilde ── */
  .blog-grid { grid-template-columns: 1fr; gap: 14px; }
  .blog-body h3  { font-size: 16px; }
  .blog-body p   { font-size: 13.5px; }

  /* ── FAQ ── */
  .faq-wrap { max-width: 100%; }
  .faq-q    { font-size: 15px; padding: 16px 12px; }
  .faq-a    { font-size: 14px; padding: 0 12px; }
  .faq-item.open .faq-a { padding: 0 12px 18px; }

  /* ── FOOTER: 2 sütun ── */
  .ft-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px 16px;
  }
  .ft-col h5 { font-size: 11px; }
  .ft-col a  { font-size: 13px; }
  .ft-social a { width: 40px; height: 40px; }
  .ft-bottom { flex-direction: column; gap: 8px; text-align: center; }

  /* ── CTA STRIP ── */
  .cta-strip { padding: 28px 0; }
  .cta-strip-grid { flex-direction: column; align-items: flex-start; gap: 16px; }
  .cta-strip h3 { font-size: 18px; }
  .cta-strip .btn { width: 100%; justify-content: center; min-height: 50px; }

  /* ── TV Programları ── */
  .programs-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .program-meta h4 { font-size: 13.5px; }
  .program-meta p  { font-size: 12px; min-height: unset; }
  .filter-bar { flex-direction: column; gap: 10px; }
  .chips { gap: 6px; }
  .chip  { padding: 8px 12px; font-size: 12.5px; min-height: 40px; }

  /* ── HTV (Anasayfa TV) ── */
  .htv-section { padding: 0; }
  .htv-wrap    { grid-template-columns: 1fr; border-radius: 0; }
  .htv-panel-inner { padding: 24px 16px 20px; }
  .htv-heading { font-size: 17px; }
  .htv-desc    { display: none; }
  .htv-track   { padding: 16px 12px 24px; transform: none !important; }
  .htv-nav-btn { display: none; }
  .htv-carousel-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .htv-card { flex: 0 0 180px; }
  .htv-play { opacity: 1 !important; transform: scale(.85) !important; }

  /* ── RANDEVU SAYFASI ── */
  .rnd-box  { grid-template-columns: 1fr; border-radius: 14px; }
  .rnd-left { display: none; }
  .rnd-right { padding: 24px 16px 32px; }
  .rnd-row-2 { grid-template-columns: 1fr; gap: 0; }
  .rnd-card-title { font-size: 20px; }
  .rnd-input  { padding: 12px 13px; font-size: 15px; }
  .rnd-submit { padding: 14px; min-height: 50px; font-size: 15px; }

  /* ── CONTACT ── */
  .contact-grid { grid-template-columns: 1fr; gap: 28px; }
  .form-card { padding: 22px 16px; border-radius: 12px; }
  .form-row-2 { grid-template-columns: 1fr; gap: 0; }
  .form-row input, .form-row textarea, .form-row select { font-size: 16px; padding: 13px 14px; }

  /* ── BLOG DETAY ── */
  .blog-detail-grid { grid-template-columns: 1fr !important; }
  .blog-detail-grid aside { display: none; }
  .blog-content h2 { font-size: 19px; }
  .blog-content p  { font-size: 15px; line-height: 1.7; }

  /* ── HİZMETLERİM SÜTUN ── */
  .svc-grid { grid-template-columns: 1fr 1fr !important; }

  /* ── Section genel ── */
  section { padding: 48px 0; }
  .section-head { margin-bottom: 28px; }
  h2 { font-size: clamp(21px, 5vw, 28px); }

  /* ── Reveal animasyon süresi kısalt ── */
  .reveal { transition-duration: 0.4s; }
}

/* ── KÜÇÜK TELEFON (≤ 380px) ──────────────────────────────── */
@media (max-width: 380px) {
  .container { padding: 0 12px; }
  h1 { font-size: 22px; }
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .hero-v2-trust { grid-template-columns: 1fr; }
  .programs-grid { grid-template-columns: 1fr; }
  .ft-grid { grid-template-columns: 1fr; }
  .about-stats { grid-template-columns: 1fr; }
  .svc-grid { grid-template-columns: 1fr !important; }
}

/* ── TABLET (641px – 900px): 2 sütun geçişleri ───────────── */
@media (min-width: 641px) and (max-width: 900px) {
  .grid-3   { grid-template-columns: 1fr 1fr; gap: 16px; }
  .grid-4   { grid-template-columns: 1fr 1fr; gap: 14px; }
  .blog-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .ft-grid  { grid-template-columns: 1fr 1fr; gap: 24px; }
  .container { padding: 0 20px; }
  section   { padding: 64px 0; }
}

/* ── prefers-reduced-motion ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, .reveal { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}


/* about-stats: mobilde 2 sütun */
@media (max-width: 640px) {
  .about-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
  }
  .about-stats .stat-row {
    padding: 14px 10px !important;
    border-right: 1px solid var(--line-2) !important;
    border-bottom: 1px solid var(--line-2) !important;
    gap: 10px !important;
    align-items: flex-start !important;
  }
  /* Sağ sütun: sağ border yok */
  .about-stats .stat-row:nth-child(even) {
    border-right: none !important;
  }
  /* Son 2 satır: alt border yok */
  .about-stats .stat-row:nth-last-child(-n+2) {
    border-bottom: none !important;
  }
  .about-stats .stat-ic {
    width: 32px !important; height: 32px !important; flex: 0 0 32px !important;
  }
  .about-stats h4 { font-size: 13px !important; }
  .about-stats p  { font-size: 12px !important; }
}

/* Anasayfa Hizmetler — mobilde tek sütun */
@media (max-width: 640px) {
  #hizmetler .grid-3 {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}