/* ============================================================
   d-dat — Shared Styles
   Tokens, reset, layout containers, nav, status, buttons, footer.
   Page-specific styles live in each page's <style> block.
   ============================================================ */

/* ---------- TOKENS ---------- */
:root {
  --accent: #E8471C;
  --ink: #0A0A0A;
  --paper: #F4F2ED;
  --white: #FFFFFF;
  --accent-soft: #FBE3D8;
  --line: #D8D3C7;
  --line-dark: #2a2a2a;
  --mute: #8A8578;
  --canvas: 1440px;
  --content: 1328px;
  --f-display: 'Archivo Black', sans-serif;
  --f-body: 'Space Grotesk', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* ---------- RESET ---------- */
/* Köşeler yumuşak: eski brutalist reset border-radius'u sıfırlıyordu, kaldırıldı.
   Sayfaların kendi yarıçapları artık geçerli; yarıçap tanımlamayan yüzeyler
   aşağıdaki ortak kurallardan alır. */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  box-shadow: none !important;
  text-shadow: none !important;
}
html, body { background: var(--white); color: var(--ink); }
body {
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip; /* contain full-bleed reel breakout without a horizontal scrollbar */
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, svg { display: block; max-width: 100%; }

/* ---------- A11Y ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 9999;
  background: var(--ink);
  color: var(--white);
  padding: 12px 18px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  border: 2px solid var(--accent);
}
.skip-link:focus {
  top: 8px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- FLOATING WHATSAPP ---------- */
.fab-wa {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--paper);
  border: 2px solid var(--accent);
  transition: transform .2s ease, background .2s ease;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18) !important;
}
.fab-wa:hover { background: var(--accent); transform: translateY(-2px); }
.fab-wa svg { width: 26px; height: 26px; display: block; }
.fab-wa .label {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--ink);
  color: var(--paper);
  padding: 8px 14px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.fab-wa:hover .label, .fab-wa:focus-visible .label { opacity: 1; }
@media (max-width: 720px){
  .fab-wa { right: 16px; bottom: 16px; width: 52px; height: 52px; }
  .fab-wa .label { display: none; }
}
/* Lift WhatsApp FAB above the cookie banner when it's visible */
body.ddat-cb-open .fab-wa { bottom: 110px; }
@media (max-width: 720px){
  body.ddat-cb-open .fab-wa { bottom: 260px; }
}

/* ---------- NOSCRIPT BANNER ---------- */
.no-js-banner {
  background: var(--ink);
  color: var(--paper);
  padding: 14px 24px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-align: center;
  border-bottom: 2px solid var(--accent);
}
.no-js-banner a { color: var(--accent); border-bottom: 1px solid var(--accent); }

/* ---------- LAYOUT CONTAINERS ---------- */
.page { max-width: var(--canvas); margin: 0 auto; background: var(--white); }
.wrap { max-width: var(--content); margin: 0 auto; padding: 0 24px; }

/* ---------- UTILITIES ---------- */
.eyebrow {
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--mute);
}
.accent { color: var(--accent); }

/* ---------- NAV ---------- */
/* header spans the full viewport (nav inside stays max-width centered) so the
   divider reaches the true page edges even past the .page max-width */
header {
  border-bottom: 1px solid var(--line);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  position: relative;
  z-index: 60; /* keep the whole header (and its dropdown) above the reel below */
}
.nav {
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 24px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
/* full-width divider under the menu row (breaks out to the viewport edges) */
.nav::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  height: 1px;
  background: var(--line);
}
.logo {
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: 26px;
  color: var(--ink);
  text-transform: lowercase;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
.logo .cursor {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  background: var(--accent);
  margin-left: 4px;
  transform: translateY(2px);
  animation: blink 1s steps(2, start) infinite;
}
@keyframes blink { to { background: transparent; } }

.nav-links {
  display: flex;
  gap: 34px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.nav-links a {
  color: var(--ink);
  text-transform: capitalize;
  padding: 4px 0;
  position: relative;
  transition: color .15s ease;
}
/* product names stay lowercase brand style */
.nav-links a[href*="d-lens"],
.nav-links a[href*="d-reach"] { text-transform: lowercase; }
.nav-links a::after { display: none; }
.nav-links a:hover { color: var(--accent); }
.nav-links a.active { color: var(--accent); }

.nav-dropdown { position: relative; display: inline-flex; align-items: center; padding: 4px 0; }
.nav-dropdown > a { display: inline-flex; align-items: center; padding: 0; }
.nav-dropdown > a::after { display: none; }
.nav-dropdown > a .caret { display: inline-block; margin-left: 4px; transition: transform .15s ease; font-size: 9px; line-height: 1; }
.nav-dropdown:hover > a .caret,
.nav-dropdown:focus-within > a .caret { transform: rotate(180deg); }
.nav-dropdown::after {
  /* invisible bridge so hover doesn't drop when crossing the gap */
  content: "";
  position: absolute;
  top: 100%;
  left: -16px;
  right: -16px;
  height: 16px;
  pointer-events: auto;
}
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  left: -16px;
  background: var(--white);
  border: none;
  border-radius: 12px !important;
  box-shadow: 0 14px 34px rgba(10,10,10,.14) !important;
  padding: 8px;
  min-width: 200px;
  z-index: 100;
  flex-direction: column;
  gap: 2px;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu { display: flex; }
.nav-dropdown-menu a {
  display: block;
  padding: 9px 14px;
  border-radius: 8px !important;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 14px;
  text-transform: capitalize;
  letter-spacing: 0;
  transition: color .15s ease, background .15s ease;
}
.nav-dropdown-menu a::after { display: none !important; }
.nav-dropdown-menu a:hover { color: var(--accent); background: var(--paper); }

.nav-cta {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 14px;
  text-transform: capitalize;
  letter-spacing: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 11px 20px;
  border-radius: 10px !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.nav-cta:hover { background: var(--accent); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(232,71,28,.28) !important; }
.nav-cta .arrow { display: none; }

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ink);
}
.nav-toggle span {
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  position: relative;
  display: block;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }

/* ---------- STATUS BAR ---------- */
.status {
  /* header meta strip (system online · version · istanbul) — restored 2026-07;
     the TR/EN switch is relocated into the nav by initNavLang(), so it does
     not appear here twice */
  display: flex;
  max-width: var(--content);
  margin: 0 auto;
  padding: 10px 24px;
  justify-content: space-between;
  align-items: center;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--mute);
}
.status .live {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  transition: opacity .15s ease;
}
.status .live::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--accent);
  display: inline-block;
  flex-shrink: 0;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.status .right { display: flex; gap: 24px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }

/* ---------- LANGUAGE SWITCH ---------- */
.lang-switch {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  font-weight: 600;
  border: 1px solid var(--line);
  line-height: 1;
}
.lang-switch a {
  color: var(--mute);
  padding: 6px 11px;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
  display: inline-flex;
  align-items: center;
}
.lang-switch a + a { border-left: 1px solid var(--line); }
.lang-switch a:hover { color: var(--ink); background: var(--paper); }
.lang-switch a.active {
  color: var(--white);
  background: var(--ink);
}
.lang-switch .sep { display: none; }

/* language switch relocated into the nav (initNavLang) — plain "TR / EN", no box */
.lang-switch.in-nav {
  border: none;
  margin-left: auto;
  margin-right: 18px;
  gap: 9px;
  font-size: 12px;
  letter-spacing: 0.1em;
  align-items: center;
}
.lang-switch.in-nav a { padding: 0; background: none; color: var(--mute); }
.lang-switch.in-nav a:hover { color: var(--ink); background: none; }
.lang-switch.in-nav a.active { color: var(--ink); background: none; font-weight: 700; }
.lang-switch.in-nav a + a { border-left: none; }
.lang-switch.in-nav a + a::before { content: "/"; color: var(--line); margin-right: 9px; font-weight: 400; }

/* ---------- BUTTONS ---------- */
.btn {
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 600;
  padding: 16px 24px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: all .15s ease;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.btn .arrow { display: inline-block; transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(4px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:disabled,
.btn[aria-busy="true"] { cursor: wait; opacity: 0.85; }

/* Inline form error helper, used near required fields */
.field-error {
  display: none;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin-top: 6px;
  line-height: 1.4;
}
.field-error::before { content: "⚠ "; font-weight: 700; }
.field-error.show { display: block; }
input[aria-invalid="true"],
textarea[aria-invalid="true"] { border-color: var(--accent) !important; }

/* Newsletter inline error (homepage footer form) */
.news-error {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin-top: 8px;
  line-height: 1.4;
  font-weight: 600;
}
.news-error[hidden] { display: none; }

/* Button spinner (matches inline contact form spinners) */
.btn-spinner {
  display: inline-block;
  width: 11px;
  height: 11px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin .7s linear infinite;
  vertical-align: -1px;
  margin-right: 6px;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn-spinner { animation: none; border-right-color: currentColor; }
}

.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--accent); color: var(--paper); }
.btn-primary::before {
  content: "";
  position: absolute;
  left: -40%;
  top: 0;
  bottom: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(232, 71, 28, 0.35), transparent);
  transform: translateX(0);
  transition: transform .6s ease;
  pointer-events: none;
}
.btn-primary:hover::before { transform: translateX(350%); }

.btn-secondary { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn-secondary:hover { background: var(--ink); color: var(--paper); }

/* ---------- REVEAL ON SCROLL ---------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .8s ease, transform .8s ease;
}
.reveal.in { opacity: 1; transform: none; }

/* ---------- FOOTER ---------- */
.foot {
  background: var(--paper);
  padding: 64px 0 40px;
  color: var(--ink);
}
.foot-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 56px;
}
.foot-brand .logo { font-size: 24px; }
.foot-brand p { margin-top: 24px; font-size: 14px; color: var(--mute); max-width: 260px; line-height: 1.6; }
.foot-col h3 {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--mute);
  margin: 0 0 16px;
  text-transform: uppercase;
}
.foot-col a {
  display: block;
  font-size: 14px;
  padding: 6px 0;
  color: var(--ink);
  transition: color .15s ease;
}
.foot-col a:hover { color: var(--accent); }

.foot-bottom {
  border-top: 1px solid var(--line);
  padding-top: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--mute);
  letter-spacing: 0.04em;
  flex-wrap: wrap;
  gap: 16px;
}
.foot-bottom .legal { display: flex; flex-wrap: wrap; gap: 24px; }

/* ---------- COUNTER ---------- */
.counter { font-variant-numeric: tabular-nums; }

/* ---------- NEWSLETTER ---------- */
.news {
  padding: 96px 0;
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.news-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 24px;
}
.news-left .eyebrow { display: block; margin-bottom: 24px; }
.news-left h2 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 16px;
}
.news-left h2 .accent { color: var(--accent); }
.news-left p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  max-width: 460px;
}
.news-form {
  display: flex;
  border: 1px solid var(--ink);
  background: var(--white);
  transition: border-color .15s ease;
}
.news-form:focus-within { border-color: var(--accent); }
.news-form input {
  flex: 1;
  padding: 18px 20px;
  border: 0;
  outline: none;
  font: inherit;
  font-size: 15px;
  background: var(--white);
  color: var(--ink);
  min-width: 0;
}
.news-form input::placeholder { color: var(--mute); }
.news-form button {
  padding: 18px 28px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s ease;
  border: 0;
  white-space: nowrap;
}
.news-form button:hover { background: var(--accent); }
.news-form.sent { border-color: var(--accent); }
.news-form.sent button { background: var(--accent); }
.news-note {
  margin-top: 16px;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--mute);
  letter-spacing: 0.04em;
}
.news-success {
  display: none;
  margin-top: 16px;
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--accent);
  letter-spacing: 0.04em;
}
.news-form.sent ~ .news-success { display: block; }
.news-form.sent ~ .news-note { display: none; }

@media (max-width: 880px) {
  .news { padding: 64px 0; }
  .news-grid { grid-template-columns: 1fr; gap: 32px; }
  /* Gorunum kurallari dosyanin sonundaki bulten blogunda —
     asagidaki (max-width:720px) blogu buradaki degerleri eziyordu. */
  .news-form { flex-direction: column; }
}

.founder-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- CLIENT MARQUEE ---------- */
.client-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 56px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.client-marquee-track {
  display: flex;
  width: max-content;
  animation: client-scroll 90s linear infinite;
  will-change: transform;
}
.client-marquee:hover .client-marquee-track { animation-play-state: paused; }
/* When JS-driven nav takes over, the CSS animation is disabled — the JS
   manages translateX directly so arrow clicks can jump-cut forward/back. */
.client-marquee.is-js .client-marquee-track { animation: none; }
.client-marquee-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--ink);
  cursor: pointer;
  font-family: var(--f-body);
  font-size: 22px;
  line-height: 1;
  padding: 0;
  opacity: 0;
  transition: opacity .2s ease, background .15s ease, color .15s ease;
}
.client-marquee:hover .client-marquee-nav,
.client-marquee:focus-within .client-marquee-nav { opacity: 1; }
.client-marquee-nav:hover { background: var(--ink); color: var(--paper); }
.client-marquee-nav:focus-visible { opacity: 1; outline: 2px solid var(--accent); outline-offset: 2px; }
.client-marquee-nav--prev { left: 8px; }
.client-marquee-nav--next { right: 8px; }
/* Dar ekranda oklar logoların üstüne biniyordu. Şerit zaten kendi kendine
   kayıyor ve parmakla sürüklenebiliyor, o yüzden oklar gizleniyor; kenar
   solması da genişletilip logolar yumuşakça kayboluyor. */
@media (max-width: 720px) {
  .client-marquee-nav { display: none; }
  .client-marquee {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
  }
}
.client-marquee-set {
  display: flex;
  align-items: center;
  gap: 56px;
  padding-right: 56px;
  flex-shrink: 0;
}
/* Yükseklik kesin bir değer olmalı: yalnızca max-* verilince logo yüklenmeden
   önce kutu 0x0 oluyordu ve Chrome sıfır boyutlu bir görseli hiç lazy-load
   etmediği için şerit boş kalıyordu. Logo başına yükseklik --logo-h ile. */
.client-marquee-set img {
  height: var(--logo-h, 44px);
  max-width: 200px;
  width: auto;
  object-fit: contain;
  display: block;
  transition: transform .25s ease;
}
/* Per-logo height tuning for visual balance (aspect ratios vary 1:1 → 11:1) */
.client-marquee-set img[src*="kismet-by-milka"]    { --logo-h: 16px; }
.client-marquee-set img[src*="vivense"]            { --logo-h: 24px; }
.client-marquee-set img[src*="turkish-jewellery"]  { --logo-h: 26px; }
.client-marquee-set img[src*="mers"]               { --logo-h: 24px; }
.client-marquee-set img[src*="maico"]              { --logo-h: 24px; }
.client-marquee-set img[src*="fellas"]             { --logo-h: 24px; }
.client-marquee-set img[src*="asics"]              { --logo-h: 38px; }
.client-marquee-set img[src*="empa-store"]         { --logo-h: 28px; }
.client-marquee-set img[src*="cushman-wakefield"]  { --logo-h: 30px; }
.client-marquee-set img[src*="contemporary"]       { --logo-h: 34px; }
.client-marquee-set img[src*="evenos"]             { --logo-h: 32px; }
.client-marquee-set img[src*="value-solution"]     { --logo-h: 38px; }
/* Square / tall logos — bump up so they read as equally weighted */
.client-marquee-set img[src*="menarini"]           { --logo-h: 56px; }
.client-marquee-set img[src*="soke"]               { --logo-h: 54px; }
.client-marquee-set img[src*="promake-ai"]         { --logo-h: 52px; }
.client-marquee-set img[src*="pinar-online"]       { --logo-h: 56px; }
.client-marquee-set img[src*="buluro"]             { --logo-h: 50px; }
.client-marquee-set img[src*="apitera"]            { --logo-h: 50px; }
.client-marquee-set img[src*="balparmak"]          { --logo-h: 50px; }
.client-marquee-set img[src*="bayegan"]            { --logo-h: 50px; }
.client-marquee-set img[src*="zen-diamond"]        { --logo-h: 44px; }
.client-marquee-set img[src*="oro-monaco"]         { --logo-h: 50px; }
.client-marquee-set img[src*="idis"]               { --logo-h: 50px; }
.client-marquee-set img[src*="monaco-chain"]       { --logo-h: 28px; }
.client-marquee-set img[src*="sport-works"]        { --logo-h: 44px; }
.client-marquee-set img[src*="nilky"]              { --logo-h: 50px; }

.client-marquee-set img:hover {
  transform: scale(1.08);
}
@keyframes client-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .client-marquee-track { animation: none; }
  .client-marquee { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
}
@media (max-width: 720px) {
  .client-marquee-set { gap: 36px; padding-right: 36px; }
  .client-marquee-set img { --logo-h: 32px; max-width: 140px; }
  .client-marquee-set img[src*="kismet-by-milka"]    { --logo-h: 11px; }
  .client-marquee-set img[src*="vivense"]            { --logo-h: 17px; }
  .client-marquee-set img[src*="turkish-jewellery"]  { --logo-h: 19px; }
  .client-marquee-set img[src*="mers"]               { --logo-h: 17px; }
  .client-marquee-set img[src*="maico"]              { --logo-h: 17px; }
  .client-marquee-set img[src*="fellas"]             { --logo-h: 17px; }
  .client-marquee-set img[src*="asics"]              { --logo-h: 26px; }
  .client-marquee-set img[src*="zen-diamond"]        { --logo-h: 30px; }
  .client-marquee-set img[src*="empa-store"]         { --logo-h: 20px; }
  .client-marquee-set img[src*="cushman-wakefield"]  { --logo-h: 22px; }
  .client-marquee-set img[src*="monaco-chain"]       { --logo-h: 22px; }
  .client-marquee-set img[src*="menarini"]           { --logo-h: 40px; }
  .client-marquee-set img[src*="soke"]               { --logo-h: 38px; }
  .client-marquee-set img[src*="promake-ai"]         { --logo-h: 38px; }
  .client-marquee-set img[src*="pinar-online"]       { --logo-h: 40px; }
  .client-marquee-set img[src*="buluro"]             { --logo-h: 36px; }
  .client-marquee-set img[src*="apitera"]            { --logo-h: 36px; }
  .client-marquee-set img[src*="balparmak"]          { --logo-h: 36px; }
  .client-marquee-set img[src*="bayegan"]            { --logo-h: 36px; }
}

/* ---------- COOKIE BANNER + PREFERENCE MODAL ---------- */
.ddat-cb{position:fixed;left:0;right:0;bottom:0;z-index:9000;background:var(--ink);color:var(--paper);border-top:2px solid var(--accent);padding:12px 20px;font-family:var(--f-body);box-shadow:0 -6px 18px rgba(0,0,0,0.18);display:none;}
.ddat-cb.is-open{display:block;}
body.ddat-cb-open{padding-bottom:96px;}
.ddat-cb-inner{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;}
.ddat-cb-text h3{font-family:var(--f-display);font-weight:400;font-size:15px;letter-spacing:-0.015em;margin-bottom:3px;color:var(--paper);line-height:1.2;}
.ddat-cb-text p{font-size:12.5px;line-height:1.45;color:var(--line);margin-bottom:3px;max-width:760px;}
.ddat-cb-text small{font-family:var(--f-mono);font-size:9.5px;letter-spacing:0.1em;color:var(--mute);}
.ddat-cb-text small a{color:var(--accent);text-decoration:none;}
.ddat-cb-text small a:hover{text-decoration:underline;}
.ddat-cb-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.ddat-cb-btn{font-family:var(--f-mono);font-size:10.5px;letter-spacing:0.1em;text-transform:lowercase;padding:9px 14px;border:1px solid var(--paper);background:transparent;color:var(--paper);cursor:pointer;transition:background .15s ease,color .15s ease;white-space:nowrap;}
.ddat-cb-btn:hover{background:var(--paper);color:var(--ink);}
.ddat-cb-btn--primary{background:var(--accent);border-color:var(--accent);color:var(--white);}
.ddat-cb-btn--primary:hover{background:var(--paper);color:var(--ink);border-color:var(--paper);}
.ddat-cb-btn--ghost{border-color:var(--mute);color:var(--mute);}
.ddat-cb-btn--ghost:hover{color:var(--paper);border-color:var(--paper);background:transparent;}

.ddat-cm{position:fixed;inset:0;z-index:9100;background:rgba(10,10,10,0.72);display:none;align-items:center;justify-content:center;padding:20px;}
.ddat-cm.is-open{display:flex;}
.ddat-cm-panel{background:var(--white);max-width:620px;width:100%;max-height:88vh;border:1px solid var(--ink);display:flex;flex-direction:column;}
.ddat-cm-head{padding:20px 26px 14px;border-bottom:1px solid var(--line);flex-shrink:0;}
.ddat-cm-head .eyebrow{display:block;margin-bottom:6px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:0.14em;color:var(--mute);font-weight:600;}
.ddat-cm-head h2{font-family:var(--f-display);font-weight:400;font-size:22px;letter-spacing:-0.025em;line-height:1.05;color:var(--ink);margin-bottom:4px;}
.ddat-cm-head p{font-size:12.5px;line-height:1.45;color:var(--mute);margin:0;}
.ddat-cm-body{padding:0;overflow-y:auto;flex:1 1 auto;min-height:0;}
.ddat-cat{padding:14px 26px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:16px;align-items:start;}
.ddat-cat:last-child{border-bottom:0;}
.ddat-cat h3{font-family:var(--f-body);font-weight:600;font-size:14px;color:var(--ink);margin-bottom:3px;display:flex;align-items:center;gap:8px;line-height:1.3;}
.ddat-cat .req{font-family:var(--f-mono);font-size:8.5px;letter-spacing:0.12em;text-transform:uppercase;background:var(--ink);color:var(--paper);padding:2px 7px;font-weight:400;}
.ddat-cat p{font-size:12px;line-height:1.45;color:var(--mute);margin:0 0 3px;}
.ddat-cat small{font-family:var(--f-mono);font-size:9.5px;letter-spacing:0.04em;color:var(--mute);}
.ddat-toggle{position:relative;width:40px;height:22px;background:var(--line);border:0;cursor:pointer;flex-shrink:0;transition:background .15s ease;border-radius:0;padding:0;}
.ddat-toggle::after{content:"";position:absolute;left:2px;top:2px;width:18px;height:18px;background:var(--white);transition:left .15s ease;border-radius:0;}
.ddat-toggle.on{background:var(--accent);}
.ddat-toggle.on::after{left:20px;}
.ddat-toggle:disabled{opacity:0.7;cursor:not-allowed;}
.ddat-cm-foot{padding:14px 26px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center;background:var(--paper);flex-shrink:0;}
.ddat-cm-foot .actions{display:flex;gap:6px;flex-wrap:wrap;}
.ddat-cm-foot .detail{font-family:var(--f-mono);font-size:10.5px;letter-spacing:0.04em;color:var(--mute);}
.ddat-cm-foot .detail a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:2px;}
.ddat-cm-btn{font-family:var(--f-mono);font-size:10.5px;letter-spacing:0.1em;text-transform:lowercase;padding:9px 13px;border:1px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;transition:background .15s ease,color .15s ease;white-space:nowrap;}
.ddat-cm-btn:hover{background:var(--ink);color:var(--paper);}
.ddat-cm-btn--primary{background:var(--ink);color:var(--paper);}
.ddat-cm-btn--primary:hover{background:var(--accent);border-color:var(--accent);color:var(--white);}

@media (max-width:720px){
  .ddat-cb{padding:14px 16px;}
  .ddat-cb-inner{grid-template-columns:1fr;gap:10px;}
  .ddat-cb-actions{flex-direction:column;align-items:stretch;}
  .ddat-cb-btn{width:100%;text-align:center;}
  body.ddat-cb-open{padding-bottom:240px;}
  .ddat-cm-head, .ddat-cat, .ddat-cm-foot{padding-left:18px;padding-right:18px;}
  .ddat-cm-foot{flex-direction:column;align-items:stretch;}
  .ddat-cm-foot .actions{flex-direction:column;}
  .ddat-cm-btn{width:100%;text-align:center;}
}

/* ---------- MOBILE (≤880px) ---------- */
@media (max-width: 880px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    transform: none;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    gap: 0;
    padding: 8px 24px 24px;
    z-index: 50;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
  .nav-links a:last-child { border-bottom: 0; }
  .nav-toggle { display: inline-flex; }
  .nav-cta { display: none; }

  .nav-dropdown { display: block; width: 100%; }
  .nav-dropdown > a { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 600; }
  .nav-dropdown > a .caret { display: none; }
  .nav-dropdown-menu { display: flex; position: static; border: 0; padding: 0 0 8px 16px; background: transparent; min-width: 0; }
  .nav-dropdown-menu a { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
  .nav-dropdown-menu a:last-child { border-bottom: 0; }

  .status { flex-direction: column; align-items: flex-start; gap: 8px; }
  .status .right { justify-content: flex-start; }

  .foot-top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .foot-brand { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .news-grid { grid-template-columns: 1fr; gap: 36px; padding: 0 20px; }
  .news-left h2 { font-size: clamp(28px, 8vw, 40px); }
  .news-form input { padding: 14px 16px; font-size: 14px; }
  .news-form button { padding: 14px 18px; font-size: 10px; }
  .news-consent { font-size: 10px; }
}

@media (max-width: 480px) {
  .foot-top { grid-template-columns: 1fr; }
}

/* ---------- TL;DR / GEO direct-answer block ----------
   A 40-60 word "what is this, who it's for" summary placed right after
   the hero on product/about pages. Helps both human scanners and
   generative search engines (ChatGPT, Perplexity, Google AIO) extract
   a clean canonical answer when someone asks "what is d-lens" etc. */
.tldr {
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 32px 0;
}
.tldr-card {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 32px;
  align-items: start;
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 clamp(20px, 3.5vw, 48px);
}
.tldr-card .eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--mute);
  font-weight: 600;
  text-transform: lowercase;
  padding-top: 4px;
}
.tldr-card p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
  max-width: 880px;
}
@media (max-width: 720px) {
  .tldr { padding: 24px 0; }
  .tldr-card { grid-template-columns: 1fr; gap: 12px; padding: 0 20px; }
  .tldr-card p { font-size: 15px; }
}

/* ---------- PRINT ---------- *
   Hide site chrome (nav, footer, cookie banner, FAB, marquees) so
   legal pages print as clean documents. Keep links visible but stop
   them from being underlined or printing their hrefs. */
@media print {
  body { background: #fff !important; color: #000 !important; }
  nav, .nav, footer, .foot, .ddat-cb, .ddat-cm, .fab-wa, .skip-link,
  .no-js-banner, .client-marquee, .trust, .clients, .news,
  .hero-scan, .photo-scan { display: none !important; }
  body.ddat-cb-open { padding-bottom: 0 !important; }
  a { color: #000 !important; text-decoration: none !important; }
  .legal-hero, .legal-body, section { break-inside: avoid; page-break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
  .legal-body table { font-size: 11px; }
  img { max-width: 100% !important; }
}

/* ---------- VIDEO EMBED (global, reused across rehber/blog/d-reach) ---------- */
.video-feature {
  padding: 48px 0;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.video-feature .wrap { max-width: 980px; }
.video-feature .head { margin-bottom: 24px; }
.video-feature .head .eyebrow { display: block; margin-bottom: 12px; color: var(--accent); }
.video-feature h2 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin: 0 0 12px;
  text-wrap: balance;
}
.video-feature .head p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--mute);
  margin: 0;
  max-width: 720px;
}
.video-embed {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border: 1px solid var(--ink);
  background: var(--ink);
}
.video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-feature .meta-line {
  margin-top: 14px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--mute);
}
.video-feature .meta-line a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent); }
.video-feature .meta-line a:hover { color: var(--accent); }

/* Author video grid */
.author-videos { padding: 64px 0; border-bottom: 1px solid var(--line); }
.author-videos .head { margin-bottom: 32px; }
.author-videos .head .eyebrow { display: block; margin-bottom: 12px; }
.author-videos .head h2 { font-family: var(--f-display); font-weight: 400; font-size: clamp(28px, 3.6vw, 44px); line-height: 1; letter-spacing: -0.04em; margin: 0; }
.author-videos .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.author-videos .card {
  border: 1px solid var(--line);
  background: var(--white);
  transition: border-color .2s ease;
}
.author-videos .card:hover { border-color: var(--ink); }
.author-videos .card .video-embed { border: 0; border-bottom: 1px solid var(--line); }
.author-videos .card .body { padding: 18px 20px; }
.author-videos .card h3 {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0 0 8px;
}
.author-videos .card .meta {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--mute);
}
.author-videos .channel-cta { margin-top: 28px; font-family: var(--f-mono); font-size: 12px; }
.author-videos .channel-cta a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1.5px;
}
.author-videos .channel-cta a:hover { color: var(--accent); }
@media (max-width: 720px) {
  .author-videos .grid { grid-template-columns: 1fr; }
}

/* All-videos playlist embed (channel uploads) */
.channel-playlist { padding: 64px 0; border-bottom: 1px solid var(--line); background: var(--paper); }
.channel-playlist .wrap { max-width: 1100px; }
.channel-playlist .head { margin-bottom: 24px; display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.channel-playlist .head .left .eyebrow { display: block; margin-bottom: 12px; }
.channel-playlist .head h2 { font-family: var(--f-display); font-weight: 400; font-size: clamp(26px, 3.4vw, 38px); line-height: 1; letter-spacing: -0.035em; margin: 0; }
.channel-playlist .head .stats { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--mute); text-align: right; line-height: 1.6; }
.channel-playlist .head .stats b { color: var(--ink); font-weight: 600; }
.channel-playlist .player {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border: 1px solid var(--ink);
}
.channel-playlist .player iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* ---------- BREADCRUMB ---------- */
.breadcrumb { padding: 18px 0 0; }
.breadcrumb .wrap { display: block; }
.breadcrumb ol,
.breadcrumb ol li {
  list-style: none !important;
  list-style-type: none !important;
  margin: 0;
  padding: 0;
}
.breadcrumb ol {
  padding-inline-start: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--mute);
}
.breadcrumb ol li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
}
.breadcrumb ol li::marker { content: ""; display: none; }
.breadcrumb ol li + li::before { content: "→"; color: var(--line); flex-shrink: 0; }
.breadcrumb a { color: var(--mute); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb [aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
  word-break: break-word;
  hyphens: auto;
}
@media (max-width: 720px) {
  .breadcrumb { padding-top: 12px; }
  .breadcrumb ol { font-size: 10.5px; gap: 6px; }
  .breadcrumb ol li { gap: 6px; }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- LEGACY (pre-redesign) MOBILE HARDENING ----------
   Old-design pages (EN comparisons/guides/legal, EN product pages) carry an
   inline <style> footer that keeps .foot-top at 5 columns on phones and a
   non-wrapping .legal row, plus wide reference tables with no scroll wrapper.
   With body{overflow-x:clip} the excess is silently CLIPPED (table columns and
   footer links get cut off). These rules force the footer to stack (matching
   the breakpoints above) and let the wide tables scroll on their own instead
   of losing content. Selectors below exist only on those pages, so redesigned
   pages are unaffected. */
@media (max-width: 880px) {
  .foot-top { grid-template-columns: 1fr 1fr !important; }
  .foot-brand { grid-column: 1 / -1 !important; }
  .foot-bottom .legal { flex-wrap: wrap !important; }
  .cmp-matrix,
  .legal-body table,
  .guide-body table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* long inline code tokens (e.g. gtag(...) snippets) wrap instead of clipping */
  .guide-body code { overflow-wrap: anywhere; }
}
@media (max-width: 480px) {
  .foot-top { grid-template-columns: 1fr !important; }
}

/* ============================================================
   MARKA ŞERİDİ + ÜRÜN TURU
   Ürün sayfalarında (d-lens, d-reach) argümanı metin değil ÜRÜN
   taşısın diye eklendi. index.html'in kendi .partners-band kuralları
   inline <style> içinde ve bu dosyadan SONRA geldiği için orada
   hiçbir şey değişmez.
   ============================================================ */

/* color ZORUNLU: ürün sayfalarının gövdesi koyu hero yüzünden
   `color: var(--paper)` ile başlıyor, açık zeminli her bölüm rengini kendi
   kuruyor. Yazmayınca krem üstüne krem yazı çıkıyor — görünmez metin. */
.partners-band { padding: 40px 0 8px; background: var(--white); color: var(--ink); }
.partners-band-lead {
  font: 400 13px/1.5 var(--f-mono);
  letter-spacing: .04em;
  color: var(--mute);
  text-align: center;
  margin: 0 0 20px;
}
.partners-band-lead b { color: var(--ink); font-weight: 500; }
.partners-band-note {
  font: 400 12px/1.6 var(--f-mono);
  color: var(--mute);
  text-align: center;
  margin: 14px auto 0;
  max-width: 62ch;
}

/* --- Ürün turu ---
   KOYU ZEMİN bilinçli: panel ekranları açık renkli, koyu zeminde öne
   çıkıyorlar ve sayfanın ritmi de düzeliyor (bir sonraki bölüm krem).
   Açık zeminde bıraksaydık komşu bölümle aynı tona düşüp ayrışmıyordu. */
.tour { padding: 72px 0; background: var(--bg, #0C0B09); color: var(--paper); }
.tour-head { max-width: 62ch; margin: 0 0 28px; }
.tour-head .te {
  display: block;
  font: 400 12px/1 var(--f-mono);
  letter-spacing: .12em;
  color: var(--accent);
  margin-bottom: 12px;
}
.tour-head h2 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(28px, 3.8vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin: 0 0 10px;
}
.tour-head h2 .accent { color: var(--accent); }
.tour-head p { margin: 0; color: #A8A29A; }

.tour-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}
.tour-tab {
  appearance: none;
  border: 1px solid #2A2822;
  background: transparent;
  color: var(--paper);
  font: 400 12px/1 var(--f-mono);
  letter-spacing: .02em;
  padding: 10px 13px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.tour-tab:hover { border-color: var(--mute); }
.tour-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tour-tab[aria-selected="true"] {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}

.tour-stage {
  border: 1px solid #2A2822;
  border-radius: 8px;
  background: var(--white);
  overflow: hidden;
}
.tour-shot img {
  display: block;
  width: 100%;
  height: auto;
}
.tour-cap {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
  border-top: 1px solid var(--line);
  padding: 12px 16px;
}
.tour-cap b { font: 500 13px/1.4 var(--f-body); }
.tour-cap span { font: 400 13px/1.5 var(--f-body); color: var(--mute); }
.tour-foot {
  font: 400 12px/1.6 var(--f-mono);
  color: var(--mute);
  margin: 14px 0 0;
}
/* Ekran altındaki açıklama şeridi kartın İÇİNDE, beyaz zeminde kalıyor. */
.tour-cap b { color: var(--ink); }

/* Kaydırma ipucu yalnız mobilde görünür — masaüstünde gereksiz gürültü. */
.tour-hint {
  display: none;
  font: 400 11px/1.5 var(--f-mono);
  letter-spacing: .04em;
  color: var(--mute);
  margin: 8px 0 0;
}

@media (max-width: 760px) {
  .tour { padding: 48px 0; }
  .tour-tabs { gap: 5px; }
  .tour-tab { font-size: 11px; padding: 9px 10px; }
  /* Panel ekranları geniş tablolar içeriyor; 390px'e sıkıştırınca yazı
     okunmuyor. Kart kendi içinde yana kayıyor — sayfa kaymıyor. */
  .tour-stage { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tour-shot img { min-width: 720px; }
  .tour-cap { position: sticky; left: 0; max-width: 100vw; }
  .tour-hint { display: block; }
}

/* ============================================================
   BUTON SİSTEMİ · tek format (2026-08)
   Tüm eski buton stillerini (sayfa içi <style> dahil) bu katman
   normalize eder; !important sayfa-içi tanımları ezmek içindir.
   Varyantlar: açıkta birincil siyah / ikincil beyaz+kenarlık /
   vurgu turuncu · koyuda birincil turuncu / ikincil krem.
   ============================================================ */
:root{--bsys-ink:#0A0A0A;--bsys-white:#FFFFFF;--bsys-paper:#F4F2ED;--bsys-accent:#E8471C;}

/* ---- temel (M boy) ---- */
.btn,.btn-primary,.btn-secondary,.btn-ghost,.btn-dark,.btn-primary2,.btn-dark2,.btn-print,
.pc-cta,.pcta,.dlp-cta,.drp-cta,.mbtn,.news-form button{
  font-family:'Inter',var(--f-body),sans-serif!important;
  font-size:15px!important;font-weight:600!important;letter-spacing:0!important;text-transform:none!important;
  height:52px!important;padding:0 30px!important;border-radius:14px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:0!important;
  line-height:1!important;text-decoration:none!important;cursor:pointer;
  box-shadow:none!important;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease,border-color .2s ease!important;
}
.btn:hover,.btn-primary:hover,.btn-secondary:hover,.btn-ghost:hover,.btn-dark:hover,
.btn-primary2:hover,.btn-dark2:hover,.btn-print:hover,.pc-cta:hover,.pcta:hover,
.dlp-cta:hover,.drp-cta:hover,.mbtn:hover,.news-form button:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 8px 22px rgba(10,10,10,.18)!important;
}
.btn:focus-visible,.nav-cta:focus-visible,.pcta:focus-visible,.dlp-cta:focus-visible,
.drp-cta:focus-visible,.mbtn:focus-visible,.news-form button:focus-visible{
  outline:2px solid var(--bsys-accent)!important;outline-offset:2px!important;
}

/* ---- renk varyantları ---- */
/* vurgu (açık zemin) = birincil (koyu zemin): turuncu */
.btn-primary,.btn-primary2,.mbtn.pri,.news-form button{
  background:var(--bsys-accent)!important;color:var(--bsys-white)!important;border:0!important;
}
.btn-primary:hover,.btn-primary2:hover,.mbtn.pri:hover,.news-form button:hover{
  background:var(--bsys-accent)!important;box-shadow:0 8px 22px rgba(232,71,28,.3)!important;
}
/* açık zemin birincil: siyah */
.dlp-cta,.drp-cta,.pcta{
  background:var(--bsys-ink)!important;color:var(--bsys-white)!important;border:0!important;
}
.dlp-cta:hover,.drp-cta:hover,.pcta:hover{background:var(--bsys-ink)!important;}
/* açık zemin ikincil: beyaz + kenarlık */
.btn-dark,.btn-dark2,.btn-secondary,.btn-print,.mbtn.sec{
  background:var(--bsys-white)!important;color:var(--bsys-ink)!important;
  border:1px solid rgba(10,10,10,.14)!important;
}
/* koyu zemin ikincil: düz krem */
.btn-ghost{
  background:var(--bsys-paper)!important;color:var(--bsys-ink)!important;border:0!important;
}

/* ---- nav CTA (S boy) ---- */
.nav-cta{
  font-family:'Inter',var(--f-body),sans-serif!important;
  font-size:14px!important;font-weight:600!important;letter-spacing:0!important;text-transform:none!important;
  height:44px!important;padding:0 22px!important;border-radius:12px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:0!important;
  background:var(--bsys-ink)!important;color:var(--bsys-white)!important;border:0!important;
  box-shadow:none!important;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease!important;
}
.nav-cta:hover{
  background:var(--bsys-ink)!important;transform:translateY(-2px)!important;
  box-shadow:0 8px 22px rgba(10,10,10,.18)!important;
}

/* ---- ikon buton (‹ ›) ---- */
.client-marquee-nav{
  width:44px!important;height:44px!important;border-radius:12px!important;
  background:var(--bsys-white)!important;color:var(--bsys-ink)!important;
  border:1px solid rgba(10,10,10,.14)!important;font-size:17px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  box-shadow:none!important;
  transition:transform .2s ease,box-shadow .2s ease!important;
}
.client-marquee-nav:hover{
  background:var(--bsys-white)!important;color:var(--bsys-ink)!important;
  transform:translateY(-2px)!important;box-shadow:0 8px 22px rgba(10,10,10,.18)!important;
}

/* ---- sekmeler ---- */
.tour-tab{
  height:36px!important;padding:0 16px!important;border-radius:999px!important;
  font-family:'Inter',var(--f-body),sans-serif!important;font-size:13px!important;font-weight:600!important;
  display:inline-flex!important;align-items:center!important;
  background:transparent!important;border:1px solid rgba(244,242,237,.25)!important;color:var(--bsys-paper)!important;
  box-shadow:none!important;transition:background .2s ease,color .2s ease,border-color .2s ease!important;
}
.tour-tab[aria-selected="true"]{
  background:var(--bsys-paper)!important;color:var(--bsys-ink)!important;border-color:var(--bsys-paper)!important;
}

/* ---- WhatsApp sabit butonu ---- */
.fab-wa{
  width:56px!important;height:56px!important;border-radius:50%!important;
  background:var(--bsys-accent)!important;color:var(--bsys-white)!important;border:0!important;
  box-shadow:0 10px 26px rgba(232,71,28,.35)!important;
}
.fab-wa:hover{background:var(--bsys-accent)!important;transform:translateY(-2px);}
.fab-wa svg{width:26px!important;height:26px!important;}

/* buton içindeki eski ok span'ları (gözden kaçan olursa) gizle */
.btn .arrow,.nav-cta .arrow,.pcta .arrow,.pc-cta .arrow,.mbtn .arrow{display:none!important;}

/* ---------- YUMUŞAK KÖŞELER ----------
   Global reset artık border-radius sıfırlamıyor. Aşağıdakiler, kendi
   yarıçapını tanımlamamış ortak yüzeylere ölçülü bir yuvarlaklık verir.
   Sayfa içi <style> bloklarındaki değerler bunu ezer (kasıtlı). */
:root{ --r-card:14px; --r-box:12px; --r-field:10px; }

/* form alanları */
input[type="text"],input[type="email"],input[type="tel"],input[type="url"],
input[type="search"],input[type="number"],select,textarea{ border-radius:var(--r-field); }

/* kart ve panel yüzeyleri */
.fq,.nfeat,.ctool,.an-cell,.cap2,.alt-item,.cprod-card,.video-embed,
.roi-cols,.news-form,.msg,.stats{ border-radius:var(--r-box); }

/* içinde renkli şerit taşıyan kutular: kırpmak yerine şeridin köşesini yuvarla
   (overflow:hidden kutu dışına taşan rozetleri kesiyordu) */
.barbox,.hpanel{ border-radius:var(--r-card); }
.barbox > .bar,.hpanel > .bar{ border-radius:calc(var(--r-card) - 1px) calc(var(--r-card) - 1px) 0 0; }
.barbox > .bd:last-child,.hpanel > .body:last-child{ border-radius:0 0 calc(var(--r-card) - 1px) calc(var(--r-card) - 1px); }

/* görseller ve logo kutuları */
.cert,.cert3,.client-logo,.pmq img{ border-radius:var(--r-box); }

/* ============================================================
   MOBİL NAV (2026-08-20)
   Üç sorun vardı:
   1. .logo'da white-space yoktu; nav sıkışınca "d-dat" ikiye
      bölünüp alt alta düşüyordu (logo 78px yüksekliğe çıkıyordu).
   2. 2026-08 buton sistemi .nav-cta'ya display:inline-flex!important
      verdiği için mobildeki "display:none" kuralı iptal olmuştu;
      buton geri gelmiş ama mobil ölçüsü olmadığından metni kırılıyordu.
   3. Menü her satırda tam genişlik 1px çizgiyle "kaba liste" gibiydi;
      Kaynaklar alt menüsünde ise radius + box-shadow kalıntısı vardı,
      saydam zeminde havada duran bir kutu gibi görünüyordu.
   Çözüm: nav çubuğu sadeleşti (logo · CTA · menü), menü yüzen bir
   panele dönüştü, satırlar çizgi yerine boşluk ve yuvarlak vurguyla
   ayrıldı, alt menü ince bir rayla girintilendi, TR/EN hap grubu oldu.
   Dokunma hedefleri 48px (alt menüde 44px), aralarında en az 2px.
   Masaüstü görünümü değişmedi.
   ============================================================ */
.logo{ white-space:nowrap; flex:none; }

@media (max-width:880px){
  /* --- nav çubuğu --- */
  .nav{ gap:10px; padding:0 20px; }
  .logo{ font-size:20px; }
  .logo .cursor{ width:.45em; }
  .nav-toggle{ flex:none; border-radius:12px; transition:background .15s ease; }
  .nav-toggle:active{ background:var(--paper); }
  /* Nav CTA'si mobilde GIZLI (kullanici istegi 2026-08-20). Logo ile menu
     butonu arasinda sikisiyordu; ustelik sitenin kendi eski kurali da onu
     mobilde gizliyordu, 2026-08 buton sistemi display:inline-flex!important
     yazinca geri gelmisti. Donusum yolu kayboldu demek degil: hero'daki
     CTA'lar ve menu icindeki baglantilar duruyor. */
  .nav-cta{ display:none!important; }
  /* durum şeridi mobilde gizli: TR/EN zaten menüye taşınıyor, kalanı
     iki satıra yayılıp yer kaplıyordu. Masaüstünde durur. */
  .status{ display:none; }

  /* --- menü paneli: kenardan boşluklu yüzen sayfa --- */
  .nav-links{
    top:calc(100% + 8px); left:12px; right:12px;
    background:var(--white); border:0!important;
    border-radius:18px;
    padding:10px; gap:2px;
    /* cerceve yok: panel yalnizca golgeyle ayrilir (yakin + ortam katmani) */
    box-shadow:0 2px 6px rgba(10,10,10,.05), 0 18px 48px rgba(10,10,10,.16)!important;
    max-height:calc(100dvh - 110px); overflow-y:auto;
    animation:navSheetIn .22s cubic-bezier(.2,.8,.2,1);
  }
  /* --- satırlar: çizgi yok, yuvarlak vurgu var --- */
  .nav-links > a,
  .nav-dropdown > a{
    display:flex; align-items:center; min-height:48px;
    padding:0 14px; border-bottom:0!important; border-radius:12px;
    font-size:15.5px; font-weight:600; color:var(--ink);
    transition:background .15s ease,color .15s ease;
  }
  .nav-links > a:active,
  .nav-dropdown > a:active{ background:var(--paper); }
  .nav-links > a.active{ color:var(--accent); background:rgba(232,71,28,.07); }

  /* --- alt menü: kutu değil, ince raylı girinti --- */
  .nav-dropdown{ padding:0; }
  .nav-dropdown > a .caret{ display:inline-block!important; margin-left:auto; color:var(--mute); font-size:11px; }
  .nav-dropdown-menu{
    border:0!important; border-left:1px solid var(--line)!important;
    border-radius:0!important; box-shadow:none!important; background:transparent!important;
    margin:2px 0 6px 26px; padding:2px 0 2px 10px; gap:2px; min-width:0;
  }
  .nav-dropdown-menu a{
    display:flex; align-items:center; min-height:44px;
    padding:0 10px; border-bottom:0!important; border-radius:10px;
    font-size:14px; font-weight:500; color:var(--mute);
  }
  .nav-dropdown-menu a:active{ background:var(--paper); color:var(--ink); }

  /* --- TR/EN: menünün altında hap grubu --- */
  .lang-switch.in-nav.in-menu{
    align-self:flex-start; width:auto;
    margin:10px 4px 2px; padding:4px; gap:2px;
    border:1px solid var(--line); border-radius:999px;
    font-size:14px; letter-spacing:.08em;
  }
  .nav-links .lang-switch.in-menu a{
    display:flex; align-items:center; min-height:40px;
    padding:0 18px; border-bottom:0!important; border-radius:999px;
    font-size:14px; color:var(--mute); font-weight:600;
  }
  .nav-links .lang-switch.in-menu a.active{ background:var(--ink); color:var(--white); font-weight:700; }
  .nav-links .lang-switch.in-menu a + a::before{ content:none; }

  /* --- menü butonu açıkken çarpıya döner --- */
  .nav-toggle span,
  .nav-toggle span::before,
  .nav-toggle span::after{ transition:transform .2s cubic-bezier(.2,.8,.2,1),background .2s ease,top .2s ease; }
  .nav-toggle[aria-expanded="true"] span{ background:transparent; }
  .nav-toggle[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }
}

@keyframes navSheetIn{ from{ opacity:0; transform:translateY(-8px); } }

@media (max-width:420px){
  .nav{ gap:8px; }
  .logo{ font-size:18px; }
}

@media (prefers-reduced-motion:reduce){
  .nav-links{ animation:none!important; }
}

/* ============================================================
   BÜLTEN FORMU · MOBİL (2026-08-20)
   Sorun: form alt alta dizilince e-posta kutusu ile buton dibine
   yapışıyordu. Eski mobil kural butona ayırıcı olarak border-top
   veriyordu; 2026-08 buton sistemi .news-form button'a border:0 ve
   border-radius:14px !important yazınca o ayırıcı yok oldu, yuvarlak
   buton köşeli çerçevenin içinde sıkışık kaldı.
   Çözüm: ortak çerçeve mobilde kalkar, kutu ve buton iki ayrı kontrol
   olur, aralarında 10px boşluk kalır.
   NOT: kurallar dosyanın SONUNDA — yukarıdaki (max-width:720px) bloğu
   .news-form input'un dolgusunu ezip yüksekliği bozuyordu.
   ============================================================ */
@media (max-width:880px){
  .news-form{ gap:10px; border:0; background:transparent; }
  .news-form input{
    width:100%; min-height:52px; padding:14px 16px;
    border:1px solid var(--line); border-radius:12px; background:var(--white);
  }
  .news-form input:focus{ border-color:var(--accent); outline:none; }
  .news-form button{ width:100%!important; border-radius:12px!important; padding:0 20px!important; }
}