/* =========================================================
   FreeProxy.tr — "Blueprint" tasarım sistemi
   Mürekkep petrol + sıcak kağıt + bakır sinyal
   ========================================================= */

:root {
  /* Mürekkep — koyu yüzeyler: header, footer, plakalar */
  --ink-950: #061319;
  --ink-900: #081B22;
  --ink-800: #0D2932;
  --ink-700: #133C48;
  --ink-600: #1E5563;
  --ink-300: #7E9AA0;

  /* Kağıt — açık yüzeyler */
  --paper: #FFFFFF;
  --sand-50: #FAF8F3;
  --sand-100: #F4F0E7;
  --sand-200: #EBE5D8;
  --line: #E3DCCC;
  --line-2: #D3C9B3;

  /* Metin */
  --text: #10222A;
  --text-2: #3C5259;
  --muted: #64797F;

  /* Bakır — birincil sinyal / CTA */
  --cu-700: #A93A0B;
  --cu-600: #C9490F;
  --cu-500: #E4631C;
  --cu-400: #F4884A;
  --cu-100: #FBE5D6;
  --cu-50: #FDF3EC;

  /* Yeşim — ücretsiz / canlı / onay */
  --ja-700: #0B6E4F;
  --ja-600: #0F8A63;
  --ja-500: #16A87A;
  --ja-50: #E6F5EF;

  /* Teal — veri vurgusu */
  --te-600: #1F6F79;
  --te-500: #2E8B95;
  --te-50: #E6F1F2;

  --warn: #B4690E;
  --warn-50: #FDF3E2;
  --danger: #C0392B;

  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(8, 27, 34, 0.05);
  --sh-2: 0 10px 28px rgba(8, 27, 34, 0.08);
  --sh-3: 0 28px 70px rgba(8, 27, 34, 0.18);

  --font: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Dile özgü yazı sistemi yığını. Latin dillerde temel yığına eşittir;
     ar/hi/zh/ja/ru sayfalarında lib/i18n/localize-html.js bunu ilgili
     yazı sistemini kapsayan ailelerle ÜZERİNE yazar. Burada bir
     varsayılan tanımlı OLMAK ZORUNDA: tanımsız bir custom property
     font-family bildirimini geçersiz kılar ve sayfa serif varsayılana düşer. */
  --i18n-font: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Archivo", "Instrument Sans", -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", "JetBrains Mono", Consolas, monospace;

  --container: 1680px;
  --utility-h: 36px;
  --nav-h: 72px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
[id] { scroll-margin-top: calc(var(--nav-h) + 20px); }

body {
  font-family: var(--i18n-font);
  /* Kenar yumuşatma ve tipografik özellikler: kerning ve standart
     ligatürler açık, sayısal hizalama tablolarda tutarlı. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Sentetik (taklit) KALIN kapalı: eksik bir kalınlık istendiğinde tarayıcı
     glifleri kalınlaştırıp bulanıklaştırmak yerine en yakın gerçek kesime
     iner. "style" değeri korunur; italik sentezi kapatılmaz. */
  font-synthesis: style;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  font-optical-sizing: auto;
  font-size: 16px;
  line-height: 1.62;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5,
.brand-name, .stat strong, .nstat strong, .product-price strong,
.plan-price strong, .pplan-price strong, .step-num, .case-metric strong,
.loc-stat strong, .pl-stat strong, .hl-idx {
  font-family: var(--font-display);
  letter-spacing: -0.022em;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }

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

:focus-visible {
  outline: 2px solid var(--cu-600);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Odaklanana kadar görünmez. `left:-9999px` KULLANILMAZ: RTL sayfada
   belgeyi sola taşırıp yatay kaydırma çubuğu oluşturuyordu. */
.skip-link {
  position: absolute; inset-inline-start: 0; top: 0; z-index: 200;
  width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
  background: var(--cu-600); color: #fff; padding: 12px 20px;
  font-size: 14px; font-weight: 600; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus {
  width: auto; height: auto; overflow: visible; clip-path: none;
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 22px;
}
.container--narrow { max-width: 940px; }
.container--content { max-width: 1460px; }
.container--article { max-width: 1460px; }
.container--max { max-width: 1760px; }
@media (min-width: 960px) { .container { padding-inline: 34px; } }
@media (min-width: 1600px) { .container { padding-inline: 44px; } }

/* ---------- İkon sistemi ---------- */
.ico { width: 20px; height: 20px; flex: none; overflow: visible; }
.ico-fill { fill: currentColor; opacity: 0.14; }
.ico-line {
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.ico .ia-spin, .ico .ia-rise, .ico .ia-slide, .ico .ia-wave, .ico .ia-blink {
  transform-box: fill-box; transform-origin: center;
}

@keyframes ia-spin { to { transform: rotate(360deg); } }
@keyframes ia-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes ia-rise { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6px); } }
@keyframes ia-slide { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(1.8px); } }
@keyframes ia-wave { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes ia-draw { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } }

a:hover .ico .ia-spin, button:hover .ico .ia-spin,
.hl-card:hover .ico .ia-spin, .feature:hover .ico .ia-spin,
.info-card:hover .ico .ia-spin, .ico-live .ia-spin { animation: ia-spin 3s linear infinite; }

a:hover .ico .ia-blink, button:hover .ico .ia-blink,
.hl-card:hover .ico .ia-blink, .feature:hover .ico .ia-blink,
.info-card:hover .ico .ia-blink, .ico-live .ia-blink { animation: ia-blink 1.5s ease-in-out infinite; }

a:hover .ico .ia-rise, button:hover .ico .ia-rise,
.hl-card:hover .ico .ia-rise, .feature:hover .ico .ia-rise,
.info-card:hover .ico .ia-rise, .ico-live .ia-rise { animation: ia-rise 1.8s ease-in-out infinite; }

a:hover .ico .ia-slide, button:hover .ico .ia-slide,
.hl-card:hover .ico .ia-slide, .feature:hover .ico .ia-slide,
.info-card:hover .ico .ia-slide { animation: ia-slide 1.6s ease-in-out infinite; }

a:hover .ico .ia-wave, button:hover .ico .ia-wave,
.hl-card:hover .ico .ia-wave, .feature:hover .ico .ia-wave { animation: ia-wave 1.5s ease-in-out infinite; }

a:hover .ico .ia-flow, button:hover .ico .ia-flow,
.hl-card:hover .ico .ia-flow, .feature:hover .ico .ia-flow,
.info-card:hover .ico .ia-flow {
  stroke-dasharray: 30; animation: ia-draw 0.65s ease forwards;
}
.ico .ia-d1 { animation-delay: 0.12s; }
.ico .ia-d2 { animation-delay: 0.24s; }

/* ---------- Butonlar ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 22px;
  border-radius: var(--r-sm);
  font-family: var(--font);
  font-weight: 600; font-size: 14.5px; line-height: 1.2;
  letter-spacing: -0.008em;
  border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.btn-lg { padding: 15px 28px; font-size: 15.5px; }

.btn-primary {
  background: var(--cu-600); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn-primary:hover { background: var(--cu-700); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(169, 58, 11, 0.28); }
.btn-primary:active { transform: translateY(0); }

.btn-outline-dark { background: transparent; color: var(--text); border-color: var(--line-2); }
.btn-outline-dark:hover { border-color: var(--ink-800); background: var(--sand-100); }

.btn-outline-light { background: transparent; color: #F2EBDE; border-color: rgba(242, 235, 222, 0.32); }
.btn-outline-light:hover { background: rgba(242, 235, 222, 0.1); border-color: rgba(242, 235, 222, 0.6); color: #fff; }

.btn-white { background: var(--paper); color: var(--ink-900); }
.btn-white:hover { background: var(--sand-100); transform: translateY(-1px); }

.btn-ghost-light { background: rgba(242, 235, 222, 0.08); color: #F2EBDE; border-color: rgba(242, 235, 222, 0.2); }
.btn-ghost-light:hover { background: rgba(242, 235, 222, 0.16); }

/* =========================================================
   ÜST ŞERİT
   ========================================================= */
.utility {
  background: var(--ink-950);
  color: var(--ink-300);
  font-size: 12.5px;
  border-bottom: 1px solid rgba(242, 235, 222, 0.08);
}
.utility-inner {
  min-height: var(--utility-h);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  /* Taşan içerik satırı genişletmesin: daralma sol taraftan başlar. */
  min-width: 0;
}
.utility-live {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.02em;
  /* Bilgilendirici metin; yer daralınca önce BU kısalır. Sağdaki iletişim
     öğeleri ve CTA işlevsel olduğu için sabit kalır. */
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.utility-live i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ja-500);
  animation: live-dot 2.4s ease-out infinite;
}
@keyframes live-dot {
  0% { box-shadow: 0 0 0 0 rgba(22, 168, 122, 0.55); }
  70% { box-shadow: 0 0 0 7px rgba(22, 168, 122, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 168, 122, 0); }
}
.utility-right { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; min-width: 0; }
.utility-item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; transition: color 0.18s; }
.utility-item .ico { width: 14px; height: 14px; color: var(--cu-400); }
.utility-item:hover, .utility-link:hover { color: #F2EBDE; }
.utility-link { font-weight: 500; transition: color 0.18s; }
.utility-cta {
  padding: 4px 13px; border-radius: var(--r-pill);
  background: rgba(228, 99, 28, 0.16); color: var(--cu-400);
  border: 1px solid rgba(228, 99, 28, 0.32);
  font-weight: 600; font-size: 12px; white-space: nowrap;
  transition: background 0.18s, color 0.18s;
}
.utility-cta:hover { background: var(--cu-600); color: #fff; border-color: var(--cu-600); }

/* =========================================================
   HEADER
   ========================================================= */
.header {
  position: sticky; top: 0; z-index: 90;
  background: var(--ink-900);
  border-bottom: 1px solid rgba(242, 235, 222, 0.1);
  transition: box-shadow 0.25s ease, background 0.25s ease;
}
.header.is-scrolled {
  background: rgba(8, 27, 34, 0.97);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 34px rgba(6, 19, 25, 0.34);
}
.header-inner { min-height: var(--nav-h); display: flex; align-items: center; gap: 24px; }

/* =========================================================
   MARKA — Relay Rail
   ========================================================= */
.brand {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  color: #F2EBDE;                       /* mark gövdesi currentColor kullanır */
  transition: color 0.18s ease;
}
.brand-mark {
  width: 34px; height: 34px; flex: none;
  display: block;
}
.brand-mark svg { width: 100%; height: 100%; display: block; }
.brand-packet { transition: transform 0.28s cubic-bezier(0.3, 0.8, 0.3, 1); transform-box: fill-box; }
.brand:hover .brand-packet { transform: translateX(2.2px); }

.brand-name {
  display: inline-flex; align-items: baseline;
  font-family: var(--font-display);
  font-size: 21px; line-height: 1;
  letter-spacing: -0.042em;
  white-space: nowrap;
}
.bn-free  { font-weight: 500; color: rgba(242, 235, 222, 0.62); }
.bn-proxy { font-weight: 800; color: #F2EBDE; }
.bn-tld {
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: -0.01em; color: var(--cu-400);
  margin-left: 2px; transform: translateY(-1px);
}

/* açık zeminde kullanılacak varyant */
.brand--light { color: var(--ink-900); }
.brand--light .bn-free { color: rgba(8, 27, 34, 0.55); }
.brand--light .bn-proxy { color: var(--ink-900); }
.brand--light .bn-tld { color: var(--cu-600); }

@media (max-width: 420px) {
  .brand-mark { width: 30px; height: 30px; }
  .brand-name { font-size: 18.5px; }
  .bn-tld { font-size: 10.5px; }
}

.nav { flex: 1; display: flex; align-items: center; }
.nav-list { display: flex; align-items: center; gap: 1px; }
.nav-item { position: relative; }
.nav-item.has-mega { position: static; }
.nav-link {
  position: relative;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 10px 12px; border-radius: var(--r-sm);
  font-size: 14.5px; font-weight: 500; letter-spacing: -0.012em;
  color: #BFD0D2; white-space: nowrap;
  transition: color 0.16s ease, background 0.16s ease;
}
.nav-link:hover, .nav-item.is-open > .nav-link { color: #fff; background: rgba(242, 235, 222, 0.07); }
.nav-link--accent { color: #6FDCAE; }
.nav-link--accent:hover, .nav-item.is-open > .nav-link--accent { color: #8CEFC4; }
.nav-item.is-active > .nav-link { color: #fff; }
.nav-item.is-active > .nav-link::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px;
  height: 2px; background: var(--cu-500); border-radius: 2px 2px 0 0;
}
.nav-caret { width: 13px; height: 13px; opacity: 0.65; transition: transform 0.2s ease; }
.nav-item.is-open > .nav-link .nav-caret { transform: rotate(180deg); }
.nav-mobile-cta { display: none; }
.nav-head { display: none; }
.nav-close {
  position: relative; width: 42px; height: 42px; flex: none;
  border-radius: var(--r-sm); border: 1px solid rgba(242, 235, 222, 0.18);
}
.nav-close:hover { background: rgba(242, 235, 222, 0.08); }
.nav-close span {
  position: absolute; left: 50%; top: 50%; width: 17px; height: 2px;
  margin-left: -8.5px; border-radius: 2px; background: #F2EBDE;
}
.nav-close span:nth-child(1) { transform: rotate(45deg); }
.nav-close span:nth-child(2) { transform: rotate(-45deg); }

.header-actions { display: flex; align-items: center; gap: 14px; flex: none; margin-inline-start: auto; }
.header-ghost {
  font-size: 13.5px; font-weight: 500; color: #BFD0D2;
  padding-right: 14px; border-right: 1px solid rgba(242, 235, 222, 0.14);
  transition: color 0.18s; white-space: nowrap;
}
.header-ghost:hover { color: #fff; }
.header-cta { padding: 10px 19px; font-size: 14px; }

.hamburger {
  display: none; width: 42px; height: 42px; border-radius: var(--r-sm);
  border: 1px solid rgba(242, 235, 222, 0.18);
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.hamburger:hover { background: rgba(242, 235, 222, 0.08); }
.hamburger span {
  display: block; width: 17px; height: 2px; border-radius: 2px;
  background: #F2EBDE; transition: transform 0.25s ease, opacity 0.2s ease;
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-overlay {
  position: fixed; inset: 0; background: rgba(6, 19, 25, 0.55);
  backdrop-filter: blur(2px); z-index: 85; opacity: 0; transition: opacity 0.25s ease;
}
.nav-overlay.is-visible { opacity: 1; }

/* =========================================================
   FLYOUT MEGA MENÜ
   ========================================================= */
.mega {
  position: absolute; top: 100%; left: 50%;
  padding-top: 10px;
  width: min(1180px, calc(100vw - 40px));
  transform: translateX(-50%) translateY(-8px);
  opacity: 0; visibility: hidden; pointer-events: none;
  z-index: 95;
  transition: opacity 0.2s ease, transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.24s;
}
/* Nav bağlantısının altı ile panel arasındaki ölü bölgeyi kapatan köprü */
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -26px; height: 30px; }
/* Bağlantının altındaki boşluğu kapatır (::after aktif alt çizgi için ayrıldı) */
.nav-item.has-mega > .nav-link::before {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 20px;
}
.nav-item.is-open > .mega,
.nav-item:hover > .mega,
.nav-item:focus-within > .mega {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.mega--loc { width: min(1160px, calc(100vw - 40px)); }
.mega--c2 { width: min(1000px, calc(100vw - 40px)); }

.mega-shell {
  display: grid; grid-template-columns: 272px minmax(0, 1fr);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  overflow: hidden;
}

.mega-rail {
  position: relative;
  display: flex; flex-direction: column;
  padding: 24px 22px 22px;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(228, 99, 28, 0.2), transparent 60%),
    linear-gradient(160deg, var(--ink-800), var(--ink-950));
  color: #E9E1D4;
}
.mega-rail::after {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(242, 235, 222, 0.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(242, 235, 222, 0.045) 1px, transparent 1px);
  background-size: 22px 22px; pointer-events: none;
}
.mega-rail > * { position: relative; z-index: 1; }
.rail-kicker {
  display: block; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; color: var(--cu-400); margin-bottom: 12px;
}
.rail-title { font-size: 19px; font-weight: 700; color: #fff; margin-bottom: 8px; letter-spacing: -0.03em; }
.rail-desc { font-size: 12.8px; line-height: 1.6; color: #9FB4B8; margin-bottom: 16px; }
.rail-art { margin-top: auto; margin-bottom: 16px; }
.rail-svg { width: 100%; height: auto; border-radius: var(--r-md); }
.rail-meter {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px;
  padding-top: 12px; border-top: 1px solid rgba(242, 235, 222, 0.12);
}
.rail-meter strong { font-family: var(--mono); font-size: 18px; font-weight: 600; color: var(--cu-400); }
.rail-meter span { font-size: 11.5px; color: #8AA1A6; }
.rail-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: #fff;
  padding-top: 12px; border-top: 1px solid rgba(242, 235, 222, 0.12);
  transition: color 0.18s;
}
.rail-meter + .rail-link { border-top: 0; padding-top: 0; }
.rail-link .ico { width: 15px; height: 15px; color: var(--cu-400); transition: transform 0.2s; }
.rail-link:hover { color: var(--cu-400); }
.rail-link:hover .ico { transform: translateX(3px); }

.mega-main { padding: 22px 24px 18px; background: var(--sand-50); display: flex; flex-direction: column; }
.mcols {
  display: grid;
  grid-template-columns: repeat(var(--mcols, 3), minmax(0, 1fr));
  gap: 0 18px;
}
.mcol { min-width: 0; }
.mcol + .mcol { border-left: 1px solid var(--line); padding-left: 18px; }
.mcol-head {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 10px 10px;
}
.mcol-head::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.mcol-head--sp { margin-top: 18px; }

.mlink {
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 12px;
  padding: 9px 10px; border-radius: var(--r-md);
  border: 1px solid transparent;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}
.mlink:hover { background: var(--paper); border-color: var(--line); transform: translateX(2px); }

/* Mega menüde üç ayrı ikon ölçeği: 46 / 32 / 21 px cam */
.mico {
  width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 9px; background: var(--sand-100);
  border: 1px solid var(--line); color: var(--ink-700);
  transition: background 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.mico .ico { width: 16px; height: 16px; }
.mico--lg {
  width: 46px; height: 46px; border-radius: 13px;
  background: linear-gradient(155deg, var(--ink-700), var(--ink-900));
  border-color: var(--ink-800); color: var(--cu-400);
  box-shadow: inset 0 1px 0 rgba(242, 235, 222, 0.12);
}
.mico--lg .ico { width: 22px; height: 22px; }
.mlink:hover .mico { background: var(--cu-600); border-color: var(--cu-600); color: #fff; }
.mlink:hover .mico--lg { background: linear-gradient(155deg, var(--cu-500), var(--cu-700)); }

.mtxt { min-width: 0; }
.mtxt strong {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.3;
  letter-spacing: -0.015em;
}
.mlink--lead .mtxt strong { font-size: 15px; font-weight: 700; }
.mtxt small { display: block; font-size: 12px; color: var(--muted); line-height: 1.45; margin-top: 2px; }
.mlink--lead .mtxt small { font-size: 12.5px; }
.marrow { opacity: 0; transform: translateX(-5px); color: var(--cu-600); transition: opacity 0.18s, transform 0.18s; }
.marrow .ico { width: 15px; height: 15px; }
.mlink:hover .marrow { opacity: 1; transform: translateX(0); }

.mbadge {
  font-style: normal; font-family: var(--mono);
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--r-xs);
}
.mbadge--green { color: var(--ja-700); background: var(--ja-50); }
.mbadge--hot { color: var(--cu-700); background: var(--cu-100); }
.mbadge--new { color: var(--te-600); background: var(--te-50); }

.mega-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  flex-wrap: wrap; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--line);
}
.strip-badges { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.strip-note { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.strip-note--inline { margin-left: 6px; }
.strip-ico { width: 16px; height: 16px; color: var(--cu-600); }
.strip-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--cu-700);
  transition: gap 0.18s;
}
.strip-link .ico { width: 15px; height: 15px; }
.strip-link:hover { gap: 10px; }

/* Lokasyon flyout — iki farklı bayrak ölçeği */
.lcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lcard {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: var(--r-md);
  background: var(--paper); border: 1px solid var(--line);
  transition: border-color 0.16s, transform 0.16s, box-shadow 0.16s;
}
.lcard:hover { border-color: var(--cu-400); transform: translateY(-2px); box-shadow: var(--sh-2); }
.lcard-flag { flex: none; width: 38px; height: 27px; border-radius: 5px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.lcard-flag .flag-svg { width: 38px; height: 27px; }
.lcard-txt { min-width: 0; }
.lcard-txt strong { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.25; letter-spacing: -0.015em; }
.lcard-txt small { font-size: 11.5px; color: var(--muted); }
.lcard-txt .ipcount { font-family: var(--mono); color: var(--cu-700); font-weight: 500; }
.lcard-cc { font-family: var(--mono); font-size: 10.5px; color: var(--line-2); letter-spacing: 0.08em; }

.lrows { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px 10px; }
.lrow {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 9px; padding: 7px 9px; border-radius: var(--r-sm);
  transition: background 0.16s;
}
.lrow:hover { background: var(--paper); }
.lrow-flag { flex: none; width: 21px; height: 15px; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.lrow-flag .flag-svg { width: 21px; height: 15px; }
.lrow-name { font-size: 12.5px; font-weight: 500; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow-ip { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }

/* Protokol rozetleri */
.pf-badge {
  display: inline-flex; align-items: center;
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.06em;
  padding: 3px 9px; border-radius: var(--r-xs);
  background: var(--sand-100); color: var(--text-2);
  border: 1px solid var(--line);
}
.pf-badge--accent { background: var(--cu-50); color: var(--cu-700); border-color: var(--cu-100); }
.pf-badges { display: flex; gap: 7px; flex-wrap: wrap; }
.flag-svg { border-radius: 2.5px; overflow: hidden; }
.flag-fallback {
  display: inline-grid; place-items: center; min-width: 22px; height: 16px; padding: 0 4px;
  border-radius: 3px; background: var(--sand-100); border: 1px solid var(--line);
  font-family: var(--mono); font-size: 9px; font-weight: 600; color: var(--muted);
}

/* =========================================================
   ANA SAYFA HERO
   ========================================================= */
.hero {
  position: relative; overflow: hidden;
  background: var(--sand-50);
  border-bottom: 1px solid var(--line);
}
.hero-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(90% 70% at 88% -10%, rgba(228, 99, 28, 0.13), transparent 62%),
    radial-gradient(60% 60% at 0% 100%, rgba(31, 111, 121, 0.08), transparent 60%),
    linear-gradient(rgba(16, 34, 42, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 34, 42, 0.035) 1px, transparent 1px);
  background-size: auto, auto, 34px 34px, 34px 34px;
}
.hero-inner {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: 56px; align-items: center;
  padding-block: 78px 86px;
}
.hero-content { max-width: 660px; }

.hero-badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 14px 6px 11px; margin-bottom: 24px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--text-2);
}
.hero-badge-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ja-500);
  animation: live-dot 2.4s ease-out infinite;
}
.hero h1 {
  font-size: clamp(38px, 5.1vw, 66px);
  font-weight: 800; line-height: 1.03; letter-spacing: -0.042em;
  color: var(--text); margin-bottom: 22px;
}
.grad-text {
  position: relative; color: var(--cu-600); white-space: nowrap;
}
.grad-text::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.015em; height: 0.055em;
  background: var(--cu-500); opacity: 0.34; border-radius: 2px;
}
.hero-desc {
  font-size: 17px; line-height: 1.68; color: var(--text-2);
  max-width: 560px; margin-bottom: 30px;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; }
/* Açık hero zemininde outline-light okunmaz; koyu varyanta çevir */
.hero .btn-outline-light,
.page-hero .btn-outline-light,
.landing-main .btn-outline-light,
.prefooter .btn-outline-light { color: var(--text); border-color: var(--line-2); }
.hero .btn-outline-light:hover,
.page-hero .btn-outline-light:hover,
.landing-main .btn-outline-light:hover,
.prefooter .btn-outline-light:hover { background: var(--sand-100); border-color: var(--ink-800); color: var(--text); }
.hero-trust {
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  font-size: 13px; font-weight: 500; color: var(--text-2);
  padding-top: 22px; border-top: 1px solid var(--line);
}
.hero-trust li { display: inline-flex; align-items: center; gap: 8px; }
.hero-trust svg { width: 15px; height: 15px; color: var(--cu-600); flex: none; }

/* --- ağ görseli: koyu plaka --- */
.hero-visual { display: flex; justify-content: center; padding: 22px 30px; }
.net-map {
  position: relative; width: 100%; max-width: 520px; aspect-ratio: 1 / 0.94;
  border-radius: var(--r-lg);
  background:
    radial-gradient(90% 70% at 80% 10%, rgba(228, 99, 28, 0.16), transparent 60%),
    linear-gradient(155deg, var(--ink-800), var(--ink-950));
  border: 1px solid rgba(242, 235, 222, 0.12);
  box-shadow: var(--sh-3);
}
.net-map::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  background-image: linear-gradient(rgba(242, 235, 222, 0.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(242, 235, 222, 0.05) 1px, transparent 1px);
  background-size: 26px 26px;
}
.net-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.net-line {
  stroke: rgba(111, 208, 212, 0.42); stroke-width: 1.3;
  stroke-dasharray: 5 8; animation: art-dash 2.8s linear infinite;
}
.net-hub {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  width: 118px; height: 118px; justify-content: center;
  border-radius: 28px;
  background: linear-gradient(155deg, rgba(228, 99, 28, 0.22), rgba(8, 27, 34, 0.9));
  border: 1px solid rgba(244, 136, 74, 0.5);
  color: var(--cu-400);
  text-align: center;
}
.net-hub svg { width: 34px; height: 34px; }
.net-hub span {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: #A9BFC2;
}
.net-hub-pulse {
  position: absolute; inset: -18px; border-radius: 40px;
  border: 1px solid rgba(244, 136, 74, 0.4);
  animation: art-pulse 2.9s ease-out infinite;
}
.net-node {
  position: absolute; transform: translate(-50%, -50%);
  padding: 6px 11px; border-radius: var(--r-sm);
  background: rgba(6, 19, 25, 0.86); border: 1px solid rgba(242, 235, 222, 0.16);
  font-family: var(--mono); font-size: 10.5px; color: #CBDADC; white-space: nowrap;
}
.net-node::before {
  content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--ja-500); margin-right: 7px; vertical-align: 1px;
}
.float-card {
  position: absolute; display: flex; align-items: center; gap: 10px;
  padding: 9px 13px; border-radius: var(--r-md);
  background: var(--paper); border: 1px solid var(--line);
  box-shadow: var(--sh-2);
  animation: art-float 6.5s ease-in-out infinite;
}
.float-card strong { display: block; font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.15; letter-spacing: -0.02em; }
.float-card small { font-family: var(--mono); font-size: 10px; color: var(--muted); }
.fc-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.fc-dot--green { background: var(--ja-500); }
.fc-dot--blue { background: var(--cu-500); }
.fc-dot--cyan { background: var(--te-500); }
.float-card--1 { top: 13%; right: -5%; animation-delay: 0s; }
.float-card--2 { top: 59%; left: -6%; animation-delay: 1.4s; }
.float-card--3 { bottom: 6%; right: 4%; animation-delay: 2.8s; }
.float-card--4 { top: -4%; left: 24%; animation-delay: 2s; }

/* =========================================================
   İSTATİSTİK ŞERİDİ (koyu)
   ========================================================= */
.truststrip { background: var(--ink-950); color: #E9E1D4; }
.truststrip-inner {
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding-block: 30px;
}
.stat { text-align: center; padding-inline: 14px; }
.stat + .stat { border-left: 1px solid rgba(242, 235, 222, 0.1); }
.stat strong {
  display: block; font-size: clamp(24px, 2.6vw, 34px); font-weight: 800;
  color: #fff; line-height: 1.05; margin-bottom: 5px;
}
.stat span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #8AA1A6; }

/* =========================================================
   BÖLÜM DÜZENİ
   ========================================================= */
.section { padding-block: 88px; }
.section--alt { background: var(--sand-50); border-block: 1px solid var(--line); }

.section-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--cu-700);
  margin-bottom: 14px;
}
.section-eyebrow::before {
  content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--cu-500);
}
.section-head { max-width: 780px; margin-bottom: 46px; }
.section-head--row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; max-width: none; margin-bottom: 46px;
  padding-bottom: 22px; border-bottom: 1px solid var(--line);
}
.section-head--row > div { max-width: 760px; }
.section-head--left { max-width: 780px; }
.section-action {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 600; color: var(--cu-700);
  padding-bottom: 2px; border-bottom: 1px solid var(--cu-100);
  transition: border-color 0.18s, gap 0.18s;
}
.section-action:hover { border-color: var(--cu-500); gap: 11px; }
.section-head h2, .section-head--row h2 {
  font-size: clamp(27px, 3.3vw, 42px); font-weight: 700;
  line-height: 1.12; letter-spacing: -0.033em; color: var(--text); margin-bottom: 12px;
}
.section-head p, .section-head--row p { font-size: 16px; color: var(--text-2); line-height: 1.65; }

/* =========================================================
   ÜRÜN KARTLARI
   ========================================================= */
.product-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.product-card {
  position: relative; display: flex; flex-direction: column;
  padding: 28px 26px 24px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.product-card::before {
  content: ""; position: absolute; left: 26px; right: 26px; top: -1px; height: 2px;
  background: var(--cu-500); border-radius: 0 0 2px 2px;
  opacity: 0; transition: opacity 0.2s;
}
.product-card:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: var(--sh-2); }
.product-card:hover::before { opacity: 1; }
.product-icon {
  display: grid; place-items: center; width: 50px; height: 50px;
  border-radius: 14px; margin-bottom: 20px;
  background: var(--sand-100); border: 1px solid var(--line); color: var(--ink-700);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.product-icon svg { width: 24px; height: 24px; }
.product-card:hover .product-icon { background: var(--ink-900); border-color: var(--ink-900); color: var(--cu-400); }
.product-card h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.028em; }
.product-card > p { font-size: 14.5px; color: var(--text-2); line-height: 1.6; margin-bottom: 20px; }
.product-feats { display: grid; gap: 9px; margin-bottom: 24px; }
.product-feats li {
  position: relative; padding-left: 24px; font-size: 13.5px; color: var(--text-2);
}
.product-feats li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 12px; height: 8px; border-left: 2px solid var(--ja-600); border-bottom: 2px solid var(--ja-600);
  transform: rotate(-45deg);
}
.product-foot {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
  margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line);
}
.product-price small { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.product-price strong { font-size: 24px; font-weight: 800; color: var(--text); letter-spacing: -0.035em; }
.product-price strong span { font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: -0.01em; }
.product-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 600; color: var(--cu-700);
}
.product-link span { transition: transform 0.2s; display: inline-block; }
.product-link:hover span { transform: translateX(4px); }

/* =========================================================
   ÖZELLİKLER
   ========================================================= */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 32px; }
.feature-grid--4 { grid-template-columns: repeat(4, 1fr); gap: 32px 26px; }
.feature { position: relative; padding-left: 62px; }
.feature-icon {
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: 13px; background: var(--cu-50); border: 1px solid var(--cu-100);
  color: var(--cu-700); transition: background 0.2s, color 0.2s;
}
.feature-icon svg { width: 22px; height: 22px; }
.feature:hover .feature-icon { background: var(--cu-600); border-color: var(--cu-600); color: #fff; }
.feature h3 { font-size: 17px; font-weight: 700; margin-bottom: 7px; letter-spacing: -0.025em; }
.feature p { font-size: 14.5px; color: var(--text-2); line-height: 1.62; }

/* =========================================================
   GLOBAL AĞ (koyu)
   ========================================================= */
.network {
  background: var(--ink-950); color: #E9E1D4;
  border-block: 1px solid var(--ink-800);
}
.network-inner {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 56px; align-items: center;
}
.network-map-wrap { position: relative; aspect-ratio: 720 / 400; }
.world { width: 100%; height: 100%; }
.world-dots circle { fill: rgba(111, 208, 212, 0.24); }
/* Lokasyonlar arasi yay oklar */
.world-arcs { pointer-events: none; }
.world-arcs .warc { fill: none; stroke: rgba(226, 106, 43, 0.32); stroke-width: 1.1; }
.world-arcs .warc-flow { fill: none; stroke: var(--cu-500); stroke-width: 1.8; stroke-linecap: round; opacity: 0.95; }
.world-arcs .warc-head { fill: var(--cu-500); }
.map-pin {
  position: absolute; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10px; color: #C3D3D5;
  padding: 4px 9px; border-radius: var(--r-sm);
  background: rgba(8, 27, 34, 0.85); border: 1px solid rgba(242, 235, 222, 0.14);
  white-space: nowrap;
}
.map-pin i { width: 6px; height: 6px; border-radius: 50%; background: var(--cu-500); flex: none; }
.network-content h2 {
  font-size: clamp(27px, 3.2vw, 40px); font-weight: 700;
  letter-spacing: -0.033em; line-height: 1.12; color: #fff; margin-bottom: 14px;
}
.network-content > p { font-size: 15.5px; color: #A2B7BA; line-height: 1.7; margin-bottom: 30px; max-width: 560px; }
.network-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; margin-bottom: 28px;
  border-top: 1px solid rgba(242, 235, 222, 0.12);
  border-bottom: 1px solid rgba(242, 235, 222, 0.12);
}
.nstat { padding: 18px 14px 18px 0; }
.nstat + .nstat { padding-left: 18px; border-left: 1px solid rgba(242, 235, 222, 0.12); }
.nstat strong { display: block; font-size: 26px; font-weight: 800; color: var(--cu-400); line-height: 1.05; margin-bottom: 3px; }
.nstat span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #8AA1A6; }
.loc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.loc-chip {
  padding: 7px 14px; border-radius: var(--r-pill);
  background: rgba(242, 235, 222, 0.06); border: 1px solid rgba(242, 235, 222, 0.16);
  font-size: 13px; font-weight: 500; color: #CBDADC;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.loc-chip:hover { background: rgba(228, 99, 28, 0.2); border-color: var(--cu-500); color: #fff; }
.loc-chip:last-child { color: var(--cu-400); border-color: rgba(244, 136, 74, 0.4); }

/* =========================================================
   KULLANIM ALANLARI
   ========================================================= */
.usecase-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.usecase {
  display: flex; flex-direction: column;
  padding: 24px 22px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.usecase:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: var(--sh-2); }
.usecase-icon {
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 12px; margin-bottom: 16px;
  background: var(--sand-100); border: 1px solid var(--line); color: var(--ink-700);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.usecase-icon svg { width: 21px; height: 21px; }
.usecase:hover .usecase-icon { background: var(--cu-600); border-color: var(--cu-600); color: #fff; }
.usecase-title { font-size: 16px; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.022em; }
.usecase p { font-size: 13.5px; color: var(--text-2); line-height: 1.6; margin-bottom: 14px; }
.usecase small {
  margin-top: auto; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.04em; color: var(--cu-700);
  padding-top: 12px; border-top: 1px solid var(--line); display: block;
}

/* =========================================================
   API / TERMİNAL
   ========================================================= */
.api { background: var(--ink-950); color: #E9E1D4; border-block: 1px solid var(--ink-800); }
.api-inner {
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 56px; align-items: center;
}
.api-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--cu-400); margin-bottom: 14px;
}
.api-eyebrow::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--cu-500); }
.api-content h2 {
  font-size: clamp(27px, 3.2vw, 40px); font-weight: 700; color: #fff;
  letter-spacing: -0.033em; line-height: 1.12; margin-bottom: 14px;
}
.api-content > p { font-size: 15.5px; color: #A2B7BA; line-height: 1.7; margin-bottom: 26px; max-width: 520px; }
.api-list { display: grid; gap: 11px; margin-bottom: 32px; }
.api-list li { display: flex; align-items: center; gap: 11px; font-size: 14.5px; color: #CBDADC; }
.api-list svg { width: 17px; height: 17px; color: var(--ja-500); flex: none; }

.terminal {
  border-radius: var(--r-lg); overflow: hidden;
  background: #040F13; border: 1px solid rgba(242, 235, 222, 0.14);
  box-shadow: var(--sh-3);
}
.terminal-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 16px; background: rgba(242, 235, 222, 0.05);
  border-bottom: 1px solid rgba(242, 235, 222, 0.1);
}
.t-dot { width: 10px; height: 10px; border-radius: 50%; }
.t-dot--r { background: #E05A4E; }
.t-dot--y { background: #E8B23C; }
.t-dot--g { background: var(--ja-500); }
.terminal-title { margin-left: 8px; font-family: var(--mono); font-size: 11px; color: #7E9AA0; }
.terminal-body {
  padding: 20px 20px 24px; overflow-x: auto;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.85; color: #CBDADC;
}
.c-comment { color: #55747A; }
.c-cmd { color: var(--cu-400); font-weight: 500; }
.c-flag { color: #7FC7CD; }
.c-out { color: #4FD39C; }
.c-str { color: #E8B23C; }
.proxy-format {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-top: 14px; padding: 14px 18px;
  border-radius: var(--r-md); background: rgba(242, 235, 222, 0.05);
  border: 1px solid rgba(242, 235, 222, 0.12);
}
.proxy-format > code { font-family: var(--mono); font-size: 13px; color: #E9E1D4; }
.api .pf-badge { background: rgba(242, 235, 222, 0.08); color: #CBDADC; border-color: rgba(242, 235, 222, 0.16); }
.api .pf-badge--accent { background: rgba(228, 99, 28, 0.2); color: var(--cu-400); border-color: rgba(228, 99, 28, 0.4); }

/* =========================================================
   SENARYO KARTLARI
   ========================================================= */
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.case-card {
  display: flex; flex-direction: column;
  padding: 26px 24px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.case-card:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: var(--sh-2); }
.case-tag {
  display: inline-block; align-self: flex-start;
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--te-600);
  padding: 4px 9px; border-radius: var(--r-xs);
  background: var(--te-50); margin-bottom: 18px;
}
.case-metric { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.case-metric strong { font-size: 34px; font-weight: 800; color: var(--text); line-height: 1; letter-spacing: -0.04em; }
.case-metric span { font-size: 13px; color: var(--muted); font-weight: 500; }
.case-card > p { font-size: 14px; color: var(--text-2); line-height: 1.65; margin-bottom: 20px; }
.case-prod {
  margin-top: auto; display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 600; color: var(--cu-700);
  padding-top: 16px; border-top: 1px solid var(--line);
}
.case-prod::before { content: "→"; color: var(--cu-500); }
.case-note { margin-top: 22px; font-size: 12.5px; color: var(--muted); font-family: var(--mono); }

/* =========================================================
   REHBER KARTLARI
   ========================================================= */
.guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.guide-card {
  display: flex; flex-direction: column;
  padding: 24px 22px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.guide-card:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: var(--sh-2); }
.guide-cat {
  display: inline-block; align-self: flex-start;
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--cu-700);
  margin-bottom: 12px;
}
.guide-card h3 { font-size: 16.5px; font-weight: 700; line-height: 1.35; letter-spacing: -0.022em; margin-bottom: 9px; }
.guide-card:hover h3 { color: var(--cu-700); }
.guide-card p { font-size: 13.5px; color: var(--text-2); line-height: 1.6; margin-bottom: 16px; }
.guide-meta {
  margin-top: auto; font-family: var(--mono); font-size: 10.5px; color: var(--muted);
  padding-top: 14px; border-top: 1px solid var(--line);
}

/* =========================================================
   SSS
   ========================================================= */
.faq { display: grid; gap: 8px; }
.faq-item {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden;
  transition: border-color 0.2s, background 0.2s;
}
.faq-item[open] { border-color: var(--line-2); background: var(--sand-50); }
.faq-item summary {
  display: flex; align-items: center; gap: 14px;
  padding: 17px 20px; cursor: pointer; list-style: none;
  font-size: 15.5px; font-weight: 600; color: var(--text); letter-spacing: -0.018em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-n { font-family: var(--mono); font-size: 11px; color: var(--cu-600); flex: none; padding-top: 2px; }
.faq-q { flex: 1; }
.faq-chev {
  position: relative; flex: none; width: 22px; height: 22px;
  border-radius: 50%; border: 1px solid var(--line-2);
  transition: transform 0.25s ease, border-color 0.2s, background 0.2s;
}
.faq-chev::before, .faq-chev::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--text-2);
  transform: translate(-50%, -50%); transition: opacity 0.2s, background 0.2s;
}
.faq-chev::before { width: 9px; height: 1.6px; }
.faq-chev::after { width: 1.6px; height: 9px; }
.faq-item[open] .faq-chev { border-color: var(--cu-600); background: var(--cu-600); }
.faq-item[open] .faq-chev::before { background: #fff; }
.faq-item[open] .faq-chev::after { opacity: 0; }
.faq-item summary:hover .faq-chev { border-color: var(--cu-500); }
.faq-body { padding: 0 20px 20px 54px; }
.faq-body p { font-size: 14.5px; color: var(--text-2); line-height: 1.75; }
.faq-body a { color: var(--cu-700); font-weight: 600; border-bottom: 1px solid var(--cu-100); }
.faq-body a:hover { border-color: var(--cu-500); }

/* =========================================================
   CTA BANDI
   ========================================================= */
.finalcta {
  position: relative; overflow: hidden;
  background:
    radial-gradient(80% 100% at 90% 0%, rgba(228, 99, 28, 0.22), transparent 60%),
    var(--ink-950);
  color: #E9E1D4;
  padding-block: 68px;
}
.finalcta::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(242, 235, 222, 0.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(242, 235, 222, 0.04) 1px, transparent 1px);
  background-size: 30px 30px; pointer-events: none;
}
.finalcta-inner {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 40px; flex-wrap: wrap;
}
.finalcta-text { max-width: 640px; }
.finalcta-kicker {
  display: inline-block; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--cu-400); margin-bottom: 12px;
}
.finalcta h2 {
  font-size: clamp(25px, 3vw, 38px); font-weight: 700; color: #fff;
  letter-spacing: -0.033em; line-height: 1.14; margin-bottom: 12px;
}
.finalcta p { font-size: 15.5px; color: #A2B7BA; line-height: 1.65; }
.finalcta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* =========================================================
   PREFOOTER + FOOTER
   ========================================================= */
.prefooter { background: var(--sand-100); border-top: 1px solid var(--line); }
.prefooter-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 44px; flex-wrap: wrap; padding-block: 54px;
}
.prefooter-text { max-width: 760px; }
.prefooter-kicker {
  display: inline-block; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.18em; color: var(--cu-700); margin-bottom: 12px;
}
.prefooter h2 { font-size: clamp(23px, 2.6vw, 33px); font-weight: 700; letter-spacing: -0.032em; line-height: 1.16; margin-bottom: 12px; }
.prefooter p { font-size: 15px; color: var(--text-2); line-height: 1.68; }
.prefooter-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.footer { background: var(--ink-950); color: #A2B7BA; padding-block: 60px 26px; }
.footer-top {
  display: grid; grid-template-columns: 1.7fr repeat(7, 1fr);
  gap: 40px 22px; padding-bottom: 44px;
  border-bottom: 1px solid rgba(242, 235, 222, 0.1);
}
.footer-brand p { font-size: 13.5px; line-height: 1.7; margin: 18px 0 16px; max-width: 340px; }
.footer .pf-badge { background: rgba(242, 235, 222, 0.07); color: #CBDADC; border-color: rgba(242, 235, 222, 0.15); }
.footer .pf-badge--accent { background: rgba(228, 99, 28, 0.18); color: var(--cu-400); border-color: rgba(228, 99, 28, 0.35); }
.footer-badges { display: flex; gap: 7px; margin-bottom: 20px; }
.footer-contact { display: grid; gap: 9px; }
.footer-contact a { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; transition: color 0.18s; }
.footer-contact .ico { width: 15px; height: 15px; color: var(--cu-400); }
.footer-contact a:hover { color: #fff; }
.footer-col { display: grid; gap: 10px; align-content: start; }
.footer-col h4 {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--cu-400);
  margin-bottom: 4px;
}
.footer-col a { font-size: 13.5px; color: #A2B7BA; transition: color 0.18s; }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding-top: 24px;
  font-size: 12.5px; color: #7E9AA0;
}
.footer-note { font-family: var(--mono); font-size: 11.5px; }

/* =========================================================
   ALT SAYFA HERO
   ========================================================= */
.page-hero {
  position: relative; overflow: hidden;
  background: var(--sand-50); border-bottom: 1px solid var(--line);
}
.page-hero .hero-bg { position: absolute; inset: 0; pointer-events: none; }
.page-hero-inner { position: relative; padding-block: 46px 58px; max-width: 900px; }
.page-hero--split .page-hero-grid {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: 52px; align-items: center; padding-block: 48px 56px;
}
.page-hero--split .page-hero-inner--left { padding-block: 0; max-width: none; }
.page-hero h1 {
  font-size: clamp(30px, 4vw, 50px); font-weight: 800;
  line-height: 1.07; letter-spacing: -0.038em; color: var(--text);
  margin-bottom: 16px;
}
.page-hero .hero-badge { margin-bottom: 18px; }
.page-hero-lead { font-size: 16.5px; line-height: 1.68; color: var(--text-2); max-width: 620px; margin-bottom: 26px; }
.page-hero .hero-cta { margin-bottom: 0; }
.page-hero--article .page-hero-inner { padding-block: 40px 48px; }
.post-cat {
  display: inline-block;
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--cu-700);
  padding: 5px 11px; border-radius: var(--r-xs);
  background: var(--cu-50); border: 1px solid var(--cu-100);
  margin-bottom: 16px;
}
.post-meta { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }

/* Breadcrumbs */
.breadcrumbs { margin-bottom: 20px; font-family: var(--mono); font-size: 11.5px; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 3px; }
.breadcrumbs li { display: inline-flex; align-items: center; gap: 3px; color: var(--muted); }
.breadcrumbs li + li::before { content: "/"; color: var(--line-2); margin-inline: 5px; }
.breadcrumbs a { color: var(--muted); transition: color 0.18s; }
.breadcrumbs a:hover { color: var(--cu-700); }
.breadcrumbs [aria-current] { color: var(--text-2); }

/* Hero plakası */
.hero-art { position: relative; display: flex; justify-content: center; }
.hero-art .plate, .side-illo .plate { width: 100%; height: auto; border-radius: var(--r-lg); }
.page-hero--split .hero-art { max-width: 660px; margin-left: auto; }
.hero-art .plate { box-shadow: var(--sh-3); }

/* =========================================================
   PLAKA ANİMASYONLARI
   ========================================================= */
@keyframes art-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes art-pulse {
  0% { transform: scale(0.82); opacity: 0.75; }
  70% { transform: scale(1.22); opacity: 0; }
  100% { transform: scale(1.22); opacity: 0; }
}
@keyframes art-dash { to { stroke-dashoffset: -26; } }
@keyframes art-spin { to { transform: rotate(360deg); } }
@keyframes art-scan { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 0.7; } 88% { opacity: 0.7; } 100% { transform: translateY(var(--scan-h, 180px)); opacity: 0; } }
@keyframes art-grow { 0%, 100% { transform: scaleY(0.78); } 50% { transform: scaleY(1); } }
@keyframes art-growx { 0%, 100% { transform: scaleX(0.9); } 50% { transform: scaleX(1); } }
@keyframes art-blip { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
@keyframes art-needle { 0%, 100% { transform: rotate(-16deg); } 50% { transform: rotate(14deg); } }
@keyframes art-rise { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

.plate .art-float, .rail-svg .art-float { animation: art-float 6.4s ease-in-out infinite; }
.plate .art-pulse, .rail-svg .art-pulse {
  transform-box: fill-box; transform-origin: center;
  animation: art-pulse 2.9s ease-out infinite;
}
.plate .art-flow, .rail-svg .art-flow { stroke-dasharray: 5 8; animation: art-dash 2.6s linear infinite; }
.plate .art-spin, .rail-svg .art-spin { animation: art-spin 22s linear infinite; }
.plate .art-scan, .rail-svg .art-scan { animation: art-scan 3.6s ease-in-out infinite; }
.plate .art-grow, .rail-svg .art-grow {
  transform-box: fill-box; transform-origin: bottom;
  animation: art-grow 3.2s ease-in-out infinite;
}
.plate .art-growx, .rail-svg .art-growx {
  transform-box: fill-box; transform-origin: left center;
  animation: art-growx 3.4s ease-in-out infinite;
}
.plate .art-blip, .rail-svg .art-blip { animation: art-blip 2s ease-in-out infinite; }
.rail-svg .art-needle { transform-box: fill-box; transform-origin: 0 100%; animation: art-needle 3.4s ease-in-out infinite; }
.rail-svg .art-rise { transform-box: fill-box; animation: art-rise 3s ease-in-out infinite; }
.art-d1 { animation-delay: 0.3s; }
.art-d2 { animation-delay: 0.7s; }
.art-d3 { animation-delay: 1.1s; }
.art-d0 { animation-delay: 0s; }

/* =========================================================
   LANDING GÖVDE
   ========================================================= */
.landing-main { padding-block: 58px 76px; }
.section-inline { margin-top: 56px; }
.section-inline > h2 {
  font-size: clamp(23px, 2.6vw, 32px); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1.16; margin-bottom: 24px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
}

/* Prose */
.prose { font-size: 15.5px; line-height: 1.82; color: var(--text-2); }
.prose h2 {
  font-size: clamp(22px, 2.5vw, 29px); font-weight: 700; color: var(--text);
  letter-spacing: -0.03em; line-height: 1.2;
  margin: 46px 0 16px; padding-top: 22px; border-top: 1px solid var(--line);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { font-size: 18.5px; font-weight: 700; color: var(--text); letter-spacing: -0.025em; margin: 30px 0 11px; }
.prose p { margin-bottom: 16px; }
.prose ul, .prose ol { margin: 0 0 20px 2px; display: grid; gap: 9px; }
.prose ul li { position: relative; padding-left: 24px; }
.prose ul li::before {
  content: ""; position: absolute; left: 2px; top: 10px;
  width: 7px; height: 7px; border-radius: 2px; background: var(--cu-500);
}
.prose ol { list-style: decimal; padding-left: 24px; }
.prose ol li::marker { color: var(--cu-600); font-weight: 700; font-family: var(--mono); }
.prose a { color: var(--cu-700); font-weight: 600; border-bottom: 1px solid var(--cu-100); }
.prose a:hover { border-color: var(--cu-500); }
.prose strong { color: var(--text); font-weight: 600; }
.prose code {
  font-family: var(--mono); font-size: 13px;
  background: var(--sand-100); border: 1px solid var(--line);
  padding: 2px 6px; border-radius: var(--r-xs); color: var(--ink-700);
}
.prose table, .landing-body table {
  width: 100%; margin: 8px 0 24px; font-size: 14px;
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
}
.prose .table-wrap, .landing-body .table-wrap { overflow-x: auto; margin: 8px 0 24px; }
.prose .table-wrap table, .landing-body .table-wrap table { margin: 0; min-width: 560px; }
.prose th, .landing-body th {
  text-align: left; padding: 12px 16px; background: var(--sand-100);
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2);
  border-bottom: 1px solid var(--line);
}
.prose td, .landing-body td { padding: 12px 16px; border-top: 1px solid var(--line); vertical-align: top; }
.prose tbody tr:nth-child(even) td, .landing-body tbody tr:nth-child(even) td { background: var(--sand-50); }
.prose blockquote {
  margin: 22px 0; padding: 18px 22px;
  border-left: 3px solid var(--cu-500); background: var(--sand-50);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: 15px; color: var(--text-2);
}

/* Landing body (ürün/senaryo metinleri) */
.landing-body { font-size: 15.5px; line-height: 1.82; color: var(--text-2); }
.landing-body h2 {
  font-size: clamp(22px, 2.5vw, 29px); font-weight: 700; color: var(--text);
  letter-spacing: -0.03em; line-height: 1.2;
  margin: 46px 0 16px; padding-top: 22px; border-top: 1px solid var(--line);
}
.landing-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.landing-body h3 { font-size: 18.5px; font-weight: 700; color: var(--text); letter-spacing: -0.025em; margin: 28px 0 11px; }
.landing-body p { margin-bottom: 16px; max-width: 980px; }
.landing-body a { color: var(--cu-700); font-weight: 600; border-bottom: 1px solid var(--cu-100); }
.landing-body a:hover { border-color: var(--cu-500); }
.landing-body strong { color: var(--text); font-weight: 600; }
.landing-body ul.checks { display: grid; gap: 10px; margin: 6px 0 24px; }
.landing-body ul.checks li { position: relative; padding-left: 28px; }
.landing-body ul.checks li::before {
  content: ""; position: absolute; left: 3px; top: 8px;
  width: 12px; height: 8px; border-left: 2px solid var(--ja-600); border-bottom: 2px solid var(--ja-600);
  transform: rotate(-45deg);
}
.landing-body .info-cards { margin: 26px 0 10px; }
.landing-body .compare-wrap { margin: 22px 0 12px; }
.landing-body .callout { margin: 22px 0; }
.landing-body .callout p { margin: 0; }

/* Callout */
.callout {
  display: flex; gap: 14px; padding: 18px 20px; margin: 8px 0 24px;
  background: var(--cu-50); border: 1px solid var(--cu-100);
  border-left: 3px solid var(--cu-500); border-radius: 0 var(--r-md) var(--r-md) 0;
}
.callout svg { width: 20px; height: 20px; color: var(--cu-600); flex: none; margin-top: 3px; }
.callout p { font-size: 14.5px; line-height: 1.72; color: var(--text-2); margin: 0; }

/* Info kartları */
.info-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.info-card {
  padding: 22px 20px; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-md);
  transition: border-color 0.2s, transform 0.2s;
}
.info-card:hover { border-color: var(--line-2); transform: translateY(-2px); }
.info-icon {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 11px; margin-bottom: 14px;
  background: var(--sand-100); border: 1px solid var(--line); color: var(--ink-700);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.info-icon svg { width: 20px; height: 20px; }
.info-card:hover .info-icon { background: var(--cu-600); border-color: var(--cu-600); color: #fff; }
.info-card h3 { font-size: 15.5px; font-weight: 700; margin-bottom: 6px; letter-spacing: -0.022em; }
.info-card p { font-size: 13.5px; color: var(--text-2); line-height: 1.62; }

/* Adımlar */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 8px 0 24px; }
.step {
  position: relative; padding: 26px 22px 22px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.step-num {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 11px; margin-bottom: 16px;
  background: var(--ink-900); color: var(--cu-400);
  font-family: var(--mono); font-size: 14px; font-weight: 600;
}
.step h3 { font-size: 17px; font-weight: 700; margin-bottom: 9px; letter-spacing: -0.024em; }
.step p { font-size: 14px; color: var(--text-2); line-height: 1.68; }
.step code {
  font-family: var(--mono); font-size: 12.5px;
  background: var(--sand-100); border: 1px solid var(--line);
  padding: 1px 6px; border-radius: var(--r-xs); color: var(--ink-700);
}

/* Derin inceleme satırları */
.deep .section-head { margin-bottom: 56px; }
.deep-row {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 44px; padding-block: 44px; border-top: 1px solid var(--line);
}
.deep-row:first-of-type { border-top: none; padding-top: 0; }
.deep-row--rev .deep-text { order: 2; }
.deep-row--rev .deep-spec { order: 1; }
.deep-tag {
  display: inline-block; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--cu-700);
  padding: 4px 10px; border-radius: var(--r-xs); background: var(--cu-50);
  margin-bottom: 14px;
}
.deep-text h3 { font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; letter-spacing: -0.03em; margin-bottom: 12px; }
.deep-text > p { font-size: 15px; color: var(--text-2); line-height: 1.72; margin-bottom: 18px; }
.deep-text .product-feats { margin-bottom: 22px; }
.deep-spec {
  padding: 24px 22px; background: var(--sand-50);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  align-self: start;
}
.deep-spec h4 {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.deep-spec dl div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.deep-spec dl div:last-child { border-bottom: none; }
.deep-spec dt { font-size: 13px; color: var(--muted); font-weight: 500; flex: none; }
.deep-spec dd { font-family: var(--mono); font-size: 12.5px; color: var(--text); font-weight: 500; text-align: right; }

/* Karşılaştırma tablosu */
.compare-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); }
.compare { width: 100%; min-width: 680px; font-size: 14px; }
.compare thead th {
  text-align: left; padding: 14px 18px; background: var(--ink-900); color: #E9E1D4;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
}
.compare tbody th { text-align: left; padding: 13px 18px; font-weight: 600; color: var(--text); font-size: 13.5px; white-space: nowrap; }
.compare tbody td { padding: 13px 18px; color: var(--text-2); font-size: 13.5px; }
.compare tbody tr { border-top: 1px solid var(--line); }
.compare tbody tr:hover td, .compare tbody tr:hover th { background: var(--sand-50); }
.tag {
  display: inline-flex; align-items: center;
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.05em; padding: 3px 8px; border-radius: var(--r-xs);
}
.tag--good { background: var(--ja-50); color: var(--ja-700); border: 1px solid #B9E4D3; }
.tag--warn { background: var(--warn-50); color: var(--warn); border: 1px solid #F1DCB2; }
.compare-note { margin-top: 14px; font-size: 13px; color: var(--muted); }
.compare-note a { color: var(--cu-700); font-weight: 600; }

/* =========================================================
   FİYATLANDIRMA
   ========================================================= */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.plan {
  display: flex; flex-direction: column;
  padding: 30px 26px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.plan:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--line-2); }
.plan--featured {
  background: var(--ink-950); border-color: var(--ink-800); color: #C7D6D8;
  position: relative; overflow: hidden;
}
.plan--featured::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(80% 60% at 90% 0%, rgba(228, 99, 28, 0.25), transparent 60%);
  pointer-events: none;
}
.plan--featured > * { position: relative; }
.plan--featured h3 { color: #fff; }
.plan--featured .plan-desc { color: #9FB4B8; }
.plan--featured .plan-price strong { color: #fff; }
.plan--featured .plan-price span { color: #9FB4B8; }
.plan--featured .plan-feats li { color: #C7D6D8; }
.plan-badge {
  display: inline-block; align-self: flex-start;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; padding: 4px 10px; border-radius: var(--r-xs);
  background: var(--cu-600); color: #fff; margin-bottom: 16px;
}
.plan h3 { font-size: 19px; font-weight: 700; margin-bottom: 6px; letter-spacing: -0.026em; }
.plan-desc { font-size: 13.5px; color: var(--text-2); margin-bottom: 22px; }
.plan-price { display: flex; align-items: baseline; gap: 7px; margin-bottom: 24px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.plan--featured .plan-price { border-bottom-color: rgba(242, 235, 222, 0.14); }
.plan-price strong { font-size: 38px; font-weight: 800; letter-spacing: -0.042em; line-height: 1; }
.plan-price span { font-size: 14px; color: var(--muted); font-weight: 500; }
.plan-feats { display: grid; gap: 11px; margin-bottom: 28px; }
.plan-feats li { position: relative; padding-left: 26px; font-size: 13.5px; color: var(--text-2); }
.plan-feats li::before {
  content: ""; position: absolute; left: 2px; top: 7px;
  width: 11px; height: 7px; border-left: 2px solid var(--ja-600); border-bottom: 2px solid var(--ja-600);
  transform: rotate(-45deg);
}
.plan--featured .plan-feats li::before { border-color: var(--ja-500); }
.plan .btn { margin-top: auto; width: 100%; }
.plan--featured .btn-outline-dark { color: #fff; border-color: rgba(242, 235, 222, 0.3); }

.price-index {
  margin-top: 34px; padding: 26px 24px;
  background: var(--sand-50); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.price-index h3 {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px;
}
.price-index-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.price-chip {
  display: flex; flex-direction: column; gap: 3px;
  padding: 13px 15px; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-md);
  transition: border-color 0.18s, transform 0.18s;
}
.price-chip:hover { border-color: var(--cu-400); transform: translateY(-2px); }
.price-chip span { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.price-chip strong { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }

/* Ürün sayfası 4'lü fiyat tablosu */
.pricing4-wrap { margin-top: 68px; }
.container--content > .pricing4-wrap:first-child { margin-top: 0; margin-bottom: 20px; }
.pricing4-lead { font-size: 15px; color: var(--text-2); line-height: 1.7; margin-top: 8px; }
.pricing4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pplan {
  position: relative; display: flex; flex-direction: column;
  padding: 26px 22px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.pplan::before {
  content: ""; position: absolute; left: 22px; right: 22px; top: -1px; height: 2px;
  background: var(--cu-500); opacity: 0; transition: opacity 0.2s;
}
.pplan:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--line-2); }
.pplan:hover::before { opacity: 1; }
.pplan-glow { display: none; }
.pplan-tag {
  position: absolute; top: -10px; right: 18px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.12em;
  padding: 4px 10px; border-radius: var(--r-xs); background: var(--cu-600); color: #fff;
}
.pplan-head h3 { font-size: 17px; font-weight: 700; margin-bottom: 5px; letter-spacing: -0.025em; }
.pplan-head p { font-size: 12.5px; color: var(--muted); margin-bottom: 16px; }
.pplan-price { display: flex; align-items: baseline; gap: 6px; }
.pplan-price strong { font-size: 28px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.pplan-price span { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.pplan-metric {
  display: inline-block; margin: 14px 0 0;
  font-family: var(--mono); font-size: 11px; color: var(--te-600);
  padding: 5px 10px; border-radius: var(--r-xs); background: var(--te-50);
}
.pplan-feats {
  display: grid; gap: 9px; margin: 18px 0 22px;
  padding-top: 16px; border-top: 1px solid var(--line);
}
.pplan-feats li { display: flex; gap: 9px; font-size: 12.8px; color: var(--text-2); line-height: 1.5; }
.pplan-feats .ico { width: 15px; height: 15px; color: var(--ja-600); flex: none; margin-top: 2px; }
.pplan-feats strong { color: var(--text); font-weight: 600; }
.pplan .btn { margin-top: auto; width: 100%; padding: 11px 16px; font-size: 13.5px; }
.pplan--featured { background: var(--ink-950); border-color: var(--ink-800); }
.pplan--featured::before { opacity: 1; }
.pplan--featured .pplan-head h3, .pplan--featured .pplan-price strong { color: #fff; }
.pplan--featured .pplan-head p, .pplan--featured .pplan-price span { color: #9FB4B8; }
.pplan--featured .pplan-metric { color: var(--cu-400); background: rgba(228, 99, 28, 0.16); }
.pplan--featured .pplan-feats { border-top-color: rgba(242, 235, 222, 0.14); }
.pplan--featured .pplan-feats li { color: #C7D6D8; }
.pplan--featured .pplan-feats strong { color: #fff; }
.pplan--featured .pplan-feats .ico { color: var(--ja-500); }
.pplan--featured .btn-outline-dark { color: #fff; border-color: rgba(242, 235, 222, 0.3); }
.pricing4-note { margin-top: 18px; font-size: 13px; color: var(--muted); line-height: 1.7; }
.pricing4-note a { color: var(--cu-700); font-weight: 600; }

/* =========================================================
   HIGHLIGHTS ŞERİDİ
   ========================================================= */
.hl-section { margin-top: 44px; }
.hl-title { font-size: clamp(21px, 2.3vw, 27px); font-weight: 700; letter-spacing: -0.03em; margin-bottom: 20px; }
.hl-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.hl-card {
  position: relative; display: flex; align-items: flex-start; gap: 13px;
  padding: 20px 18px 18px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  transition: border-color 0.2s, transform 0.2s;
}
.hl-card:hover { border-color: var(--line-2); transform: translateY(-2px); }
.hl-idx {
  position: absolute; top: 12px; right: 14px;
  font-family: var(--mono); font-size: 10.5px; color: var(--line-2);
}
.hl-icon {
  display: grid; place-items: center; width: 38px; height: 38px; flex: none;
  border-radius: 11px; background: var(--sand-100);
  border: 1px solid var(--line); color: var(--ink-700);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.hl-card:hover .hl-icon { background: var(--cu-600); border-color: var(--cu-600); color: #fff; }
.hl-card strong { display: block; font-size: 14.5px; font-weight: 700; color: var(--text); margin-bottom: 3px; letter-spacing: -0.02em; }
.hl-card small { font-size: 12.5px; color: var(--muted); line-height: 1.45; }

/* =========================================================
   İLGİLİ İÇERİK KARTLARI
   ========================================================= */
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.related-card {
  display: flex; flex-direction: column;
  padding: 22px 20px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.related-card:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: var(--sh-2); }
.related-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.related-ico {
  display: grid; place-items: center; width: 32px; height: 32px; flex: none;
  border-radius: 9px; background: var(--sand-100);
  border: 1px solid var(--line); color: var(--ink-700);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.related-card:hover .related-ico { background: var(--cu-600); border-color: var(--cu-600); color: #fff; }
.related-top .guide-cat { margin-bottom: 0; }
.related-card h3 { font-size: 15.5px; font-weight: 700; line-height: 1.38; letter-spacing: -0.022em; margin-bottom: 8px; }
.related-card:hover h3 { color: var(--cu-700); }
.related-card p { font-size: 13px; color: var(--text-2); line-height: 1.6; margin-bottom: 14px; }
.related-more { margin-top: auto; font-size: 13px; font-weight: 600; color: var(--cu-700); }

/* Mini CTA paneli */
.cta-panel {
  display: flex; align-items: center; justify-content: space-between;
  gap: 26px; flex-wrap: wrap; margin: 28px 0;
  padding: 26px 28px; border-radius: var(--r-lg);
  background: var(--ink-950); color: #C7D6D8;
}
.cta-panel h3 { color: #fff; margin: 0 0 6px; font-size: 19px; letter-spacing: -0.028em; }
.cta-panel p { color: #9FB4B8; margin: 0; font-size: 14px; max-width: 540px; }
.cta-panel .btn { flex: none; }

/* =========================================================
   ÜCRETSİZ BÖLÜM (ana sayfa split)
   ========================================================= */
.freesplit {
  display: grid; grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  gap: 52px; align-items: center;
}
.freesplit-content h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 700; letter-spacing: -0.034em; line-height: 1.14; margin-bottom: 14px; }
.freesplit-content > p { font-size: 15.5px; color: var(--text-2); line-height: 1.7; margin-bottom: 24px; }
.freesplit-feats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px 20px; margin-bottom: 28px; }
.freesplit-feats li { position: relative; padding-left: 27px; font-size: 14px; color: var(--text-2); }
.freesplit-feats li::before {
  content: ""; position: absolute; left: 3px; top: 8px;
  width: 12px; height: 8px; border-left: 2px solid var(--ja-600); border-bottom: 2px solid var(--ja-600);
  transform: rotate(-45deg);
}
.free-preview {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--paper); overflow: hidden; box-shadow: var(--sh-2);
}
.free-preview-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 18px; background: var(--ink-950); color: #E9E1D4;
}
.free-preview-bar strong { font-size: 13.5px; font-weight: 600; }
.free-preview-bar .live { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; color: #9FB4B8; }
.free-preview-bar .live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ja-500); animation: live-dot 2.4s ease-out infinite; }
.free-preview table { width: 100%; font-size: 13.5px; }
.free-preview th {
  text-align: left; padding: 11px 16px; background: var(--sand-100);
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.free-preview td { padding: 11px 16px; border-bottom: 1px solid var(--line); color: var(--text-2); }
.free-preview tr:last-child td { border-bottom: none; }
.free-preview .mono { font-family: var(--mono); font-size: 12.5px; color: var(--text); }
.free-preview-note { padding: 12px 16px; background: var(--sand-50); border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.free-preview-note a { color: var(--cu-700); font-weight: 600; }
.lat-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; }
.lat-fast { background: var(--ja-500); }
.lat-mid { background: #E8B23C; }
.lat-slow { background: var(--danger); }

/* =========================================================
   ÜCRETSİZ PROXY LİSTESİ TABLOSU
   ========================================================= */
.pl-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; }
.pl-stat {
  padding: 18px 20px; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-md);
}
.pl-stat strong { display: block; font-size: 26px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; margin-bottom: 3px; }
.pl-stat span { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

.pl-source {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--muted);
  margin-bottom: 16px; padding: 8px 14px; border-radius: var(--r-pill);
  background: var(--sand-50); border: 1px solid var(--line);
}
.pl-source-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.pl-source.is-loading .pl-source-dot { background: var(--warn); animation: ia-blink 1.4s ease-in-out infinite; }
.pl-source.is-ok { color: var(--ja-700); background: var(--ja-50); border-color: #BBE4D4; }
.pl-source.is-ok .pl-source-dot { background: var(--ja-500); }
.pl-source.is-warn { color: var(--warn); background: var(--warn-50); border-color: #F1DCB2; }
.pl-source.is-warn .pl-source-dot { background: var(--warn); }

.pl-chipbar { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.pl-chipbar-label { flex: none; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-top: 10px; }
.cc-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.cc-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--paper); border: 1px solid var(--line);
  font-size: 12.5px; font-weight: 500; color: var(--text-2);
  transition: border-color 0.18s, color 0.18s, background 0.18s;
}
.cc-chip .flag-svg { width: 19px; height: 14px; }
.cc-chip .cc-all { font-size: 14px; line-height: 1; }
.cc-chip em {
  font-style: normal; font-family: var(--mono); font-size: 10px;
  padding: 1px 6px; border-radius: var(--r-xs); background: var(--sand-100); color: var(--muted);
}
.cc-chip:hover { border-color: var(--cu-400); color: var(--cu-700); }
.cc-chip.is-active { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.cc-chip.is-active em { background: rgba(242, 235, 222, 0.18); color: #fff; }

.pl-filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
  padding: 18px 20px; margin-bottom: 18px;
  background: var(--sand-50); border: 1px solid var(--line); border-radius: var(--r-md);
}
.pl-field { display: grid; gap: 6px; }
.pl-field label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.pl-field input, .pl-field select {
  padding: 10px 13px; min-width: 180px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper); font-family: var(--font); font-size: 14px; color: var(--text);
  transition: border-color 0.18s;
}
.pl-field input:focus, .pl-field select:focus { border-color: var(--cu-500); outline: none; }
.pl-actions { display: flex; gap: 8px; margin-left: auto; }
.pl-actions .btn { padding: 10px 16px; font-size: 13.5px; }

.pl-table-wrap { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: auto; background: var(--paper); }
.pl-table { width: 100%; min-width: 860px; font-size: 13.5px; }
.pl-table thead th {
  position: sticky; top: 0; z-index: 1;
  text-align: left; padding: 13px 16px;
  background: var(--ink-900); color: #E9E1D4;
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
}
.pl-table tbody td { padding: 11px 16px; border-top: 1px solid var(--line); color: var(--text-2); vertical-align: middle; }
.pl-table tbody tr:hover td { background: var(--sand-50); }
.pl-table .mono { font-family: var(--mono); font-size: 12.5px; color: var(--text); }
.pl-country { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.pl-country .flag-svg { width: 21px; height: 15px; flex: none; }
.pl-loading { text-align: center; padding: 40px 20px !important; color: var(--muted); font-size: 14px; }
.pl-loading .test-spin { display: inline-block; vertical-align: -2px; margin-right: 8px; }
.pl-empty { padding: 28px; text-align: center; color: var(--muted); font-size: 14px; display: none; }
.pl-note { font-size: 13px; color: var(--muted); line-height: 1.7; margin-top: 14px; }
.pl-note a { color: var(--cu-700); font-weight: 600; }
.pl-uptime { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; color: var(--muted); }
.pl-uptime-bar { width: 46px; height: 5px; border-radius: 999px; background: var(--sand-100); overflow: hidden; flex: none; }
.pl-uptime-bar i { display: block; height: 100%; background: var(--ja-500); }

.copy-btn {
  padding: 6px 13px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--paper);
  font-family: var(--mono); font-size: 11.5px; font-weight: 500; color: var(--text-2);
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.copy-btn:hover { background: var(--ink-900); color: #fff; border-color: var(--ink-900); }
.copy-btn.is-copied { background: var(--ja-50); color: var(--ja-700); border-color: #BBE4D4; }

.pl-test-cell { white-space: nowrap; }
.test-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--paper);
  font-size: 12.5px; font-weight: 600; color: var(--text-2);
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.test-btn svg { width: 13px; height: 13px; }
.test-btn:hover { background: var(--cu-600); color: #fff; border-color: var(--cu-600); }
.test-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; }
.test-status svg { width: 14px; height: 14px; }
.test-status--load { color: var(--muted); }
.test-status--ok { color: var(--ja-700); }
.test-status--fail { color: var(--danger); }
.test-spin {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--line-2); border-top-color: var(--cu-600);
  animation: ia-spin 0.8s linear infinite;
}
.test-retry { margin-left: 9px; font-size: 12px; font-weight: 600; color: var(--muted); text-decoration: underline; }
.test-retry:hover { color: var(--text); }

.pl-pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 20px; }
.pg-nums { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.pg-btn {
  min-width: 36px; height: 36px; padding: 0 10px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--paper);
  font-family: var(--mono); font-size: 13px; color: var(--text-2);
  transition: border-color 0.18s, color 0.18s, background 0.18s;
}
.pg-btn:hover:not(:disabled):not(.is-active) { border-color: var(--cu-400); color: var(--cu-700); }
.pg-btn.is-active { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.pg-btn:disabled { opacity: 0.4; cursor: default; }
.pg-nav { font-size: 17px; line-height: 1; }
.pg-gap { color: var(--muted); padding: 0 2px; }
.pg-info { font-family: var(--mono); font-size: 12px; color: var(--muted); }

/* =========================================================
   ARAÇ KUTULARI
   ========================================================= */
.tool-box {
  padding: 28px 26px; margin-bottom: 22px;
  background: var(--sand-50); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.tool-box h2 { margin: 0 0 6px; font-size: 20px; letter-spacing: -0.028em; border: 0; padding: 0; }
.tool-box > p { font-size: 14px; color: var(--text-2); margin-bottom: 20px; }
.tool-form { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.tool-form input, .tool-form select {
  flex: 1 1 260px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper); font-family: var(--font); font-size: 14.5px; color: var(--text);
  transition: border-color 0.18s;
}
.tool-form select { flex: 0 1 170px; }
.tool-form input:focus, .tool-form select:focus { border-color: var(--cu-500); outline: none; }
.tool-result {
  padding: 16px 18px; border-radius: var(--r-md);
  border: 1px dashed var(--line-2); background: var(--paper);
  font-size: 14px; color: var(--text-2); line-height: 1.7;
}
.tool-result.is-ok { border-style: solid; border-color: #BBE4D4; background: var(--ja-50); color: var(--ja-700); }
.tool-result .mono { font-family: var(--mono); color: var(--text); }

/* =========================================================
   BLOG
   ========================================================= */
.blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 52px; align-items: start; }
.blog-side { display: grid; gap: 18px; position: sticky; top: calc(var(--nav-h) + 22px); }
.side-box { padding: 22px 20px; background: var(--sand-50); border: 1px solid var(--line); border-radius: var(--r-md); }
.side-box h3 {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.side-box .blog-search { display: flex; gap: 8px; }
.side-box .blog-search input {
  flex: 1; padding: 10px 13px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--paper); font-family: var(--font); font-size: 13.5px;
}
.side-box .blog-search input:focus { border-color: var(--cu-500); outline: none; }
.cat-list { display: grid; gap: 3px; }
.cat-list button, .cat-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 11px; border-radius: var(--r-sm);
  font-size: 13.5px; font-weight: 500; color: var(--text-2); text-align: left;
  transition: background 0.18s, color 0.18s;
}
.cat-list button:hover, .cat-list a:hover, .cat-list button.is-active, .cat-list a.is-active { background: var(--cu-50); color: var(--cu-700); }
.cat-list .count { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.pop-list { display: grid; gap: 11px; }
.pop-list a { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.42; }
.pop-list a:hover { color: var(--cu-700); }
.pop-list small { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--muted); font-weight: 400; margin-top: 3px; }
.pop-list--ico a { display: flex; align-items: center; gap: 11px; }
.pop-ico {
  display: grid; place-items: center; width: 32px; height: 32px; flex: none;
  border-radius: 9px; background: var(--paper); border: 1px solid var(--line); color: var(--ink-700);
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.pop-list--ico a:hover .pop-ico { background: var(--cu-600); border-color: var(--cu-600); color: #fff; }
.pop-txt { min-width: 0; }

.featured-post {
  position: relative; overflow: hidden;
  padding: 38px 36px; margin-bottom: 34px; border-radius: var(--r-lg);
  background: radial-gradient(80% 100% at 90% 0%, rgba(228, 99, 28, 0.22), transparent 60%), var(--ink-950);
  color: #A2B7BA;
}
.featured-post .post-cat { background: rgba(228, 99, 28, 0.18); border-color: rgba(228, 99, 28, 0.35); color: var(--cu-400); }
.featured-post h2 { font-size: clamp(22px, 2.6vw, 32px); font-weight: 700; letter-spacing: -0.033em; line-height: 1.18; margin-bottom: 12px; }
.featured-post h2 a { color: #fff; }
.featured-post h2 a:hover { color: var(--cu-400); }
.featured-post p { font-size: 14.5px; max-width: 680px; margin-bottom: 16px; line-height: 1.68; }
.featured-post .post-meta { color: #7E9AA0; }

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.post-card {
  display: flex; flex-direction: column;
  padding: 22px 20px; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-md);
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.post-card:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: var(--sh-2); }
.post-card h3 { font-size: 16px; font-weight: 700; line-height: 1.38; letter-spacing: -0.022em; margin-bottom: 8px; }
.post-card:hover h3 { color: var(--cu-700); }
.post-card p { font-size: 13.5px; color: var(--text-2); line-height: 1.6; margin-bottom: 16px; }
.post-card .post-meta { margin-top: auto; font-size: 11.5px; padding-top: 14px; border-top: 1px solid var(--line); }
.post-hidden { display: none; }

/* =========================================================
   MAKALE DÜZENİ
   ========================================================= */
.article-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 60px; align-items: start; }
.article-grid .prose { max-width: 960px; }
.article-side { display: grid; gap: 18px; position: sticky; top: calc(var(--nav-h) + 22px); }
.side-illo { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); }
.side-illo .plate { width: 100%; height: auto; }
.side-box--toc .toc-list { display: grid; gap: 2px; }
.toc-list a {
  display: flex; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm);
  font-size: 13px; color: var(--text-2); line-height: 1.45;
  transition: background 0.18s, color 0.18s;
}
.toc-list a em { font-style: normal; font-family: var(--mono); font-size: 10.5px; color: var(--cu-600); flex: none; padding-top: 2px; }
.toc-list a:hover { background: var(--paper); color: var(--cu-700); }
.side-cta {
  padding: 24px 22px; border-radius: var(--r-md);
  background: radial-gradient(80% 100% at 90% 0%, rgba(228, 99, 28, 0.24), transparent 60%), var(--ink-950);
  color: #A2B7BA;
}
.side-cta h3 { display: flex; align-items: center; gap: 9px; font-size: 15.5px; font-weight: 700; color: #fff; margin-bottom: 10px; border: 0; padding: 0; letter-spacing: -0.02em; text-transform: none; font-family: var(--font-display); }
.side-cta-ico {
  display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none;
  border-radius: 8px; background: rgba(228, 99, 28, 0.2); color: var(--cu-400);
}
.side-cta p { font-size: 13px; line-height: 1.65; margin-bottom: 16px; }
.side-cta .btn { width: 100%; padding: 11px 16px; font-size: 13.5px; }

/* =========================================================
   LOKASYON SAYFASI
   ========================================================= */
.locmap { background: var(--ink-950); color: #A2B7BA; padding-block: 64px; border-block: 1px solid var(--ink-800); }
.locmap-inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 52px; align-items: center; }
.locmap h2 { color: #fff; }
.loc-stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0;
  border-top: 1px solid rgba(242, 235, 222, 0.12);
}
.loc-stat { padding: 18px 16px 18px 0; border-bottom: 1px solid rgba(242, 235, 222, 0.12); }
.loc-stat:nth-child(even) { padding-left: 20px; border-left: 1px solid rgba(242, 235, 222, 0.12); }
.loc-stat strong { display: block; font-size: 24px; font-weight: 800; color: var(--cu-400); line-height: 1.1; margin-bottom: 3px; letter-spacing: -0.03em; }
.loc-stat span { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #8AA1A6; }

.locfilter { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-bottom: 24px; }
.locfilter input {
  flex: 1 1 260px; max-width: 340px; padding: 11px 15px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper); font-family: var(--font); font-size: 14px;
}
.locfilter input:focus { border-color: var(--cu-500); outline: none; }
.locfilter .fbtn {
  padding: 9px 16px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--paper);
  font-size: 13px; font-weight: 500; color: var(--text-2);
  transition: border-color 0.18s, color 0.18s, background 0.18s;
}
.locfilter .fbtn:hover { border-color: var(--cu-400); color: var(--cu-700); }
.locfilter .fbtn.is-active { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }

.country-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.country-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 12px;
  padding: 14px 16px; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-md);
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}
.country-card:hover { border-color: var(--cu-400); transform: translateY(-2px); box-shadow: var(--sh-2); }
.country-flag { flex: none; width: 32px; height: 23px; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.country-flag .flag-svg { width: 32px; height: 23px; }
.country-card strong { display: block; font-size: 14px; font-weight: 600; letter-spacing: -0.018em; }
.country-card small { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.country-card small .ipcount { color: var(--cu-700); }
.country-card .arrow { color: var(--cu-600); opacity: 0; transform: translateX(-4px); transition: opacity 0.18s, transform 0.18s; }
.country-card:hover .arrow { opacity: 1; transform: translateX(0); }
.country-card.is-hidden { display: none; }
.country-empty { display: none; padding: 36px; text-align: center; color: var(--muted); font-size: 14.5px; }

/* =========================================================
   REFERANSLAR
   ========================================================= */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.testi {
  padding: 26px 24px; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: border-color 0.2s, transform 0.2s;
}
.testi:hover { border-color: var(--line-2); transform: translateY(-3px); }
.testi-stars { display: flex; gap: 3px; color: var(--cu-500); margin-bottom: 14px; }
.testi blockquote { font-size: 14.5px; color: var(--text-2); line-height: 1.72; margin-bottom: 20px; }
.testi figcaption { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.testi-avatar {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none;
  border-radius: 50%; background: var(--ink-900); color: var(--cu-400);
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
}
.testi figcaption strong { display: block; font-size: 14px; }
.testi figcaption small { font-size: 12.5px; color: var(--muted); }

/* ---------- Eski değişken adları (içerik dosyalarındaki inline stiller) ---------- */
:root { --navy-900: var(--text); --text-muted: var(--muted); }

/* =========================================================
   DUYARLI DÜZEN
   ========================================================= */
@media (max-width: 1520px) {
  /* Header'da artık dil seçici de var. "Ücretsiz liste" kısayolu hem
     menüde hem footer'da bulunduğu için ilk feda edilen o oluyor.
     Ayrıca menü etiketleri dile göre uzar (Rusça/Almanca en uzunu);
     aralıklar buna göre daraltılır. */
  .header-ghost { display: none; }
  .header-inner { gap: 14px; }
  .nav-link { padding: 10px 8px; font-size: 13.8px; }
  .nav-list { gap: 0; }
}

@media (max-width: 1360px) {
  .mega { width: min(1080px, calc(100vw - 32px)); }
  .footer-top { grid-template-columns: 1.5fr repeat(4, 1fr); }
}

@media (max-width: 1340px) {
  .nav-link { padding: 10px 9px; font-size: 13.8px; }
}

@media (max-width: 1420px) {
  /* ---- Mobil çekmece ---- */
  .hamburger { display: flex; }
  .header-inner { gap: 16px; }
  .nav {
    position: fixed; top: 0; bottom: 0;
    inset-inline-end: 0;
    width: min(410px, 90vw); z-index: 95;
    display: block; overflow-y: auto;
    padding: 22px 18px 36px;
    background: var(--ink-950);
    border-inline-start: 1px solid rgba(242, 235, 222, 0.12);
    /* Mantıksal öteleme: LTR'de sağdan, RTL'de soldan girer. */
    transform: translateX(102%);
    /* Kapalıyken düzenden ve ODAK SIRASINDAN tamamen çıkar: aksi hâlde
       klavye kullanıcısı ekranda görünmeyen ~100 bağlantı arasında
       dolaşıyor, ekran okuyucu onları okuyordu. Ayrıca ötelenmiş çekmece
       scrollWidth'i şişirip yatay taşma raporlanmasına yol açıyordu.
       Gecikme, kapanış animasyonunun görünür kalmasını sağlar. */
    visibility: hidden;
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0s linear 0.32s;
  }
  [dir="rtl"] .nav { transform: translateX(-102%); }
  .nav.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
  }
  [dir="rtl"] .nav.is-open { transform: translateX(0); }
  .nav-list { display: block; }
  .nav-item { border-bottom: 1px solid rgba(242, 235, 222, 0.09); }
  .nav-item.has-mega { position: relative; }
  .nav-link {
    width: 100%; justify-content: space-between;
    padding: 15px 6px; border-radius: 0; font-size: 15.5px; font-weight: 600;
  }
  .nav-item.is-active > .nav-link::after { display: none; }
  .nav-caret { opacity: 1; }

  .mega {
    position: static; width: auto; transform: none;
    opacity: 1; visibility: visible; pointer-events: auto;
    display: none; padding-bottom: 14px;
  }
  .nav-item:hover > .mega, .nav-item:focus-within > .mega { transform: none; }
  .nav-item.is-open > .mega { display: block; transform: none; }
  .mega::before { display: none; }
  .mega-shell { display: block; border: 0; border-radius: var(--r-md); box-shadow: none; background: transparent; }
  .mega-rail {
    padding: 14px 14px 12px; border-radius: var(--r-md); margin-bottom: 10px;
    background: linear-gradient(160deg, var(--ink-800), var(--ink-900));
  }
  .rail-art, .rail-meter { display: none; }
  .rail-desc { margin-bottom: 12px; }
  .rail-link { padding-top: 10px; }
  .mega-main { padding: 0; background: transparent; }
  .mcols { grid-template-columns: 1fr; gap: 4px; }
  .mcol + .mcol { border-left: 0; padding-left: 0; margin-top: 12px; }
  .mcol-head { color: #7E9AA0; margin-left: 4px; }
  .mcol-head::after { background: rgba(242, 235, 222, 0.12); }
  .mlink { padding: 9px 6px; }
  .mlink:hover { background: rgba(242, 235, 222, 0.06); border-color: transparent; }
  .mico { background: rgba(242, 235, 222, 0.07); border-color: rgba(242, 235, 222, 0.14); color: var(--cu-400); }
  .mico--lg { width: 38px; height: 38px; }
  .mico--lg .ico { width: 19px; height: 19px; }
  .mtxt strong, .mlink--lead .mtxt strong { color: #F2EBDE; font-size: 14px; }
  .mtxt small { color: #7E9AA0; }
  .marrow { display: none; }
  .mega-strip { border-top-color: rgba(242, 235, 222, 0.1); }
  .strip-note { color: #7E9AA0; }
  .strip-link { color: var(--cu-400); }
  .lcards, .lrows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lcard { background: rgba(242, 235, 222, 0.05); border-color: rgba(242, 235, 222, 0.12); }
  .lcard-txt strong { color: #F2EBDE; }
  .lcard-txt small, .lrow-ip { color: #7E9AA0; }
  .lcard-txt .ipcount { color: var(--cu-400); }
  .lrow-name { color: #C3D3D5; }
  .lrow:hover { background: rgba(242, 235, 222, 0.06); }
  .mcol-head--sp { margin-top: 14px; }

  .nav-head {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding-bottom: 16px; margin-bottom: 8px;
    border-bottom: 1px solid rgba(242, 235, 222, 0.12);
  }
  .mega .pf-badge { background: rgba(242, 235, 222, 0.07); color: #CBDADC; border-color: rgba(242, 235, 222, 0.16); }
  .mega .pf-badge--accent { background: rgba(228, 99, 28, 0.18); color: var(--cu-400); border-color: rgba(228, 99, 28, 0.35); }
  .nav-mobile-cta { display: grid; gap: 10px; margin-top: 22px; }
  .nav-mobile-cta .btn { width: 100%; }
  .nav-mobile-cta .btn-outline-dark { color: #F2EBDE; border-color: rgba(242, 235, 222, 0.3); }
  .nav-mobile-cta .btn-outline-dark:hover { background: rgba(242, 235, 222, 0.1); }
  .header-cta { display: none; }
}

@media (max-width: 1220px) {
  .usecase-grid { grid-template-columns: repeat(3, 1fr); }
  .pricing4 { grid-template-columns: repeat(2, 1fr); }
  .country-grid { grid-template-columns: repeat(3, 1fr); }
  .price-index-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
  /* minmax(0, 1fr): ciplak `1fr` izin min-content tabani var; icindeki
     uzun bir kelime ya da kod satiri tek sutunlu duzende izi
     genisletip sayfaya yatay tasma ekliyordu (Almanca ana sayfada
     375px'te 624px). Sifir tabani bunu keser, tasan icerik kendi
     kutusunda kayar. */
  .hero-inner, .network-inner, .api-inner, .freesplit,
  .locmap-inner, .page-hero--split .page-hero-grid {
    grid-template-columns: minmax(0, 1fr); gap: 42px;
  }
  .api-inner .api-content { order: 1; }
  .network-inner .network-map-wrap { order: 2; }
  .page-hero--split .hero-art { max-width: 620px; margin-inline: auto; }
  .hero-content { max-width: none; }
  .net-map { max-width: 440px; }
  .product-grid, .case-grid, .guide-grid, .related-grid,
  .info-cards, .steps, .testi-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-grid, .feature-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .usecase-grid { grid-template-columns: repeat(2, 1fr); }
  .hl-strip { grid-template-columns: repeat(2, 1fr); }
  .blog-layout, .article-grid { grid-template-columns: 1fr; gap: 40px; }
  .blog-side, .article-side { position: static; grid-template-columns: repeat(2, 1fr); }
  .side-illo { grid-column: 1 / -1; }
  .deep-row { grid-template-columns: 1fr; gap: 28px; }
  .deep-row--rev .deep-text, .deep-row--rev .deep-spec { order: 0; }
  .country-grid { grid-template-columns: repeat(2, 1fr); }
  .pl-stats { grid-template-columns: repeat(3, 1fr); }
  .footer-top { grid-template-columns: repeat(3, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
  .section { padding-block: 68px; }
}

/* Uzun dillerde (de, fr, ru) şerit 760px'ten önce doluyor. Eşik metin
   uzunluğuna göre değil mevcut alana göre seçilir: 900px hepsine yeter. */
@media (max-width: 900px) {
  .utility-item--hide-sm, .utility-link { display: none; }
}
@media (max-width: 760px) {
  :root { --nav-h: 64px; }
  .utility-item--hide-sm, .utility-link { display: none; }
  .utility-live { font-size: 10.5px; }
  .hero-inner { padding-block: 46px 56px; }
  .hero-visual { padding: 0; }
  .float-card { display: none; }
  .net-map { max-width: 100%; }
  .net-node { font-size: 9.5px; padding: 4px 8px; }
  .net-hub { width: 96px; height: 96px; border-radius: 24px; }
  .net-hub svg { width: 28px; height: 28px; }
  .utility-inner { gap: 12px; }
  .hero h1 { font-size: clamp(31px, 8.4vw, 42px); }
  .grad-text { white-space: normal; }
  .hero-desc { font-size: 15.5px; }
  .truststrip-inner { grid-template-columns: repeat(2, 1fr); gap: 1px; padding-block: 0; }
  .stat { padding-block: 20px; border-top: 1px solid rgba(242, 235, 222, 0.1); }
  .stat + .stat { border-left: 1px solid rgba(242, 235, 222, 0.1); }
  .stat:nth-child(odd) { border-left: 0; }
  .product-grid, .case-grid, .guide-grid, .related-grid, .info-cards,
  .steps, .testi-grid, .usecase-grid, .pricing-grid, .pricing4,
  .hl-strip, .feature-grid, .feature-grid--4, .post-grid,
  .country-grid, .pl-stats, .freesplit-feats, .blog-side,
  .article-side, .price-index-grid, .lcards, .lrows { grid-template-columns: 1fr; }
  .network-stats { grid-template-columns: repeat(2, 1fr); }
  .nstat + .nstat { border-left: 0; padding-left: 0; }
  .nstat:nth-child(even) { padding-left: 18px; border-left: 1px solid rgba(242, 235, 222, 0.12); }
  .loc-stats { grid-template-columns: 1fr; }
  .loc-stat:nth-child(even) { padding-left: 0; border-left: 0; }
  .section-head--row { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer-top { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; }
  .finalcta-inner, .prefooter-inner { flex-direction: column; align-items: flex-start; }
  .finalcta-actions .btn, .prefooter-actions .btn { flex: 1 1 auto; }
  .pl-filters { flex-direction: column; align-items: stretch; }
  .pl-field input, .pl-field select { min-width: 0; width: 100%; }
  .pl-actions { margin-left: 0; }
  .pl-chipbar { flex-direction: column; gap: 8px; }
  .pl-chipbar-label { padding-top: 0; }
  .faq-item summary { font-size: 14.5px; padding: 15px 16px; gap: 11px; }
  .faq-body { padding: 0 16px 18px 45px; }
  .landing-main { padding-block: 44px 58px; }
  .section-inline { margin-top: 42px; }
  .cta-panel { padding: 22px 20px; }
  .featured-post { padding: 28px 22px; }
  .tool-box { padding: 22px 18px; }
  .deep-spec, .price-index { padding: 20px 18px; }
}

@media (max-width: 520px) {
  .utility-item span { display: none; }
  .utility-item .ico { width: 16px; height: 16px; }
  .utility-live { font-size: 10px; }
}

@media (max-width: 440px) {
  .container { padding-inline: 16px; }
  .brand-name { font-size: 18px; }
  .brand-mark { width: 34px; height: 34px; }
  .float-card--1 { right: 0; }
  .float-card--2 { left: 0; }
  .float-card--4 { left: 14%; }
  .net-node { font-size: 9.5px; padding: 4px 8px; }
  .hero-trust { gap: 8px 16px; font-size: 12.5px; }
}

/* Tek kolona düşen ızgaralarda taşmayı engelle */
@media (max-width: 1024px) {
  .product-grid, .case-grid, .guide-grid, .related-grid, .info-cards,
  .steps, .testi-grid, .usecase-grid, .pricing-grid, .pricing4,
  .hl-strip, .feature-grid, .post-grid, .country-grid,
  .blog-layout, .article-grid, .hero-inner, .network-inner,
  .api-inner, .freesplit, .locmap-inner { min-width: 0; }
  .terminal-body { font-size: 11.5px; }
}

/* ---------- Hareket azaltma ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .plate .art-scan, .rail-svg .art-scan { display: none; }
}

/* ---------- Yazdırma ---------- */
@media print {
  .utility, .header, .nav-overlay, .finalcta, .prefooter, .footer,
  .article-side, .blog-side { display: none !important; }
  body { color: #000; background: #fff; }
  .page-hero, .section--alt { background: #fff; }
}

/* =========================================================
   ARAÇLAR (gerçek testler)
   ========================================================= */
.tool {
  margin: 0 0 28px;
  padding: 26px 24px 24px;
  background: var(--sand-50);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.tool--wide { padding: 28px 26px 26px; }
.tool-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  padding-bottom: 18px; margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.tool-head h2 {
  margin: 0 0 6px; padding: 0; border: 0;
  font-size: 21px; font-weight: 700; letter-spacing: -0.028em;
}
.tool-head p { margin: 0; font-size: 14px; color: var(--text-2); line-height: 1.65; max-width: 780px; }
.tool-head code {
  font-family: var(--mono); font-size: 12.5px;
  background: var(--paper); border: 1px solid var(--line);
  padding: 1px 6px; border-radius: var(--r-xs); color: var(--ink-700);
}
.tool-badge {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 6px 11px; border-radius: var(--r-pill);
  background: var(--ja-50); color: var(--ja-700); border: 1px solid #BBE4D4;
}
.tool-badge .ico { width: 14px; height: 14px; }

/* servis durumu */
.api-state {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; margin-bottom: 18px;
  border-radius: var(--r-sm); font-size: 13px; line-height: 1.5;
  background: var(--paper); border: 1px solid var(--line); color: var(--text-2);
}
.api-state code { font-family: var(--mono); font-size: 12px; background: var(--sand-100); padding: 1px 5px; border-radius: 3px; }
.api-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--line-2); }
.api-state[data-state="checking"] .api-dot { background: var(--warn); animation: ia-blink 1.2s ease-in-out infinite; }
.api-state[data-state="ok"] { background: var(--ja-50); border-color: #BBE4D4; color: var(--ja-700); }
.api-state[data-state="ok"] .api-dot { background: var(--ja-500); }
.api-state[data-state="off"] { background: var(--warn-50); border-color: #F1DCB2; color: var(--warn); }
.api-state[data-state="off"] .api-dot { background: var(--warn); }

/* ---------- proxy kontrol ---------- */
.pc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 268px; gap: 18px; }
.pc-label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.pc-label label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.pc-count { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.pc-count strong { color: var(--text); }
.pc-count.is-over { color: var(--danger); }
.pc-count.is-over strong { color: var(--danger); }
#pcList {
  width: 100%; resize: vertical; min-height: 200px;
  padding: 14px 16px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--paper);
  font-family: var(--mono); font-size: 13px; line-height: 1.7; color: var(--text);
}
#pcList:focus { border-color: var(--cu-500); outline: none; }
.pc-parse { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pp-chip {
  font-family: var(--mono); font-size: 10.5px;
  padding: 3px 9px; border-radius: var(--r-xs);
  background: var(--sand-100); border: 1px solid var(--line); color: var(--text-2);
}
.pp-chip--ok { background: var(--ja-50); border-color: #BBE4D4; color: var(--ja-700); }
.pp-chip--bad { background: var(--warn-50); border-color: #F1DCB2; color: var(--warn); }

.pc-side { display: grid; gap: 12px; align-content: start; }
.pc-field { display: grid; gap: 6px; }
.pc-field label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.pc-field select, .ping-form input, .ping-form select, .dns-form input, .dns-form select {
  padding: 10px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--paper);
  font-family: var(--font); font-size: 14px; color: var(--text);
}
.pc-field select:focus { border-color: var(--cu-500); outline: none; }
.pc-check { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--text-2); line-height: 1.45; cursor: pointer; }
.pc-check input { margin-top: 2px; accent-color: var(--cu-600); }
.pc-actions { display: grid; gap: 8px; margin-top: 4px; }
.pc-actions .btn { width: 100%; }
.pc-actions .btn.is-busy { opacity: 0.7; }
.pc-mini { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-mini-btn {
  font-size: 12px; font-weight: 600; color: var(--cu-700);
  padding: 6px 11px; border-radius: var(--r-sm);
  background: var(--paper); border: 1px solid var(--line);
  transition: border-color 0.18s, background 0.18s;
}
.pc-mini-btn:hover { border-color: var(--cu-400); background: var(--cu-50); }
.pc-mini-btn:disabled { opacity: 0.5; cursor: default; }

.pc-progress { margin-top: 18px; }
.pc-bar { height: 6px; border-radius: 999px; background: var(--sand-200); overflow: hidden; }
.pc-bar i { display: block; height: 100%; width: 0; background: var(--cu-600); transition: width 0.25s ease; }
.pc-prog-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 8px; font-family: var(--mono); font-size: 12px; color: var(--muted);
}
.pc-prog-meta code { color: var(--cu-700); }
.pc-err { color: var(--danger); }

.pc-summary { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 18px; }
.pc-stat {
  padding: 14px 16px; border-radius: var(--r-md);
  background: var(--paper); border: 1px solid var(--line);
}
.pc-stat strong { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.pc-stat span { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.pc-stat--ok strong { color: var(--ja-600); }
.pc-stat--bad strong { color: var(--danger); }

.pc-results { margin-top: 20px; }
.pc-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.pc-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.pc-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 500; color: var(--text-2);
  padding: 7px 13px; border-radius: var(--r-pill);
  background: var(--paper); border: 1px solid var(--line);
  transition: border-color 0.18s, background 0.18s, color 0.18s;
}
.pc-chip em {
  font-style: normal; font-family: var(--mono); font-size: 10.5px;
  padding: 1px 6px; border-radius: var(--r-xs); background: var(--sand-100); color: var(--muted);
}
.pc-chip:hover { border-color: var(--cu-400); color: var(--cu-700); }
.pc-chip.is-active { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.pc-chip.is-active em { background: rgba(242, 235, 222, 0.18); color: #fff; }
.pc-export { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
#pcSearch {
  padding: 8px 12px; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--paper); font-family: var(--font); font-size: 13px; min-width: 190px;
}
#pcSearch:focus { border-color: var(--cu-500); outline: none; }

.pc-table-wrap {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--paper); overflow: auto; max-height: 620px;
}
.pc-table { width: 100%; min-width: 940px; font-size: 13px; }
.pc-table thead th {
  position: sticky; top: 0; z-index: 1;
  text-align: left; padding: 11px 13px; white-space: nowrap;
  background: var(--ink-900); color: #E9E1D4;
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.pc-table tbody td { padding: 9px 13px; border-top: 1px solid var(--line); color: var(--text-2); vertical-align: middle; }
.pc-table tbody tr:hover td { background: var(--sand-50); }
.pc-table .mono { font-family: var(--mono); font-size: 12.5px; color: var(--text); }
.pc-i { font-family: var(--mono); font-size: 11px; color: var(--line-2); }
.pc-isp { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.pc-auth { font-size: 11px; }
.pc-state { font-family: var(--mono); font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: var(--r-xs); white-space: nowrap; }
.pc-state--ok { background: var(--ja-50); color: var(--ja-700); }
.pc-state--bad { background: #FBEAE7; color: var(--danger); cursor: help; }
.pc-anon { font-family: var(--mono); font-size: 11px; padding: 3px 8px; border-radius: var(--r-xs); }
.pc-anon--ok { background: var(--ja-50); color: var(--ja-700); }
.pc-anon--mid { background: var(--warn-50); color: var(--warn); }
.pc-anon--bad { background: #FBEAE7; color: var(--danger); }
.pc-cc {
  display: inline-block; font-family: var(--mono); font-size: 10px; font-weight: 600;
  padding: 2px 5px; border-radius: 3px; background: var(--ink-900); color: #E9E1D4; letter-spacing: 0.04em;
}
.pc-yes { color: var(--ja-700); font-weight: 600; }
.pc-no { color: var(--muted); }
.pc-empty { padding: 26px; text-align: center; color: var(--muted); font-size: 14px; }

.pc-logs { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.pc-logs-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.pc-logs-head h3 {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  font-size: 15px; font-weight: 700; letter-spacing: -0.02em;
}
.pc-logs-head .ico { color: var(--cu-600); }
.pc-logs-note { flex: 1; font-size: 12.5px; color: var(--muted); }
.pc-logs-stats { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 14px; font-size: 12.5px; color: var(--muted); }
.pc-logs-stats strong { font-family: var(--font-display); font-size: 16px; color: var(--text); margin-right: 4px; }
.pc-logs-list { display: grid; gap: 4px; max-height: 320px; overflow: auto; }
.pc-log {
  display: grid; grid-template-columns: 1.4fr 0.8fr 0.8fr 0.9fr 0.7fr 1.1fr;
  gap: 10px; align-items: center; text-align: left;
  padding: 9px 12px; border-radius: var(--r-sm);
  background: var(--paper); border: 1px solid var(--line);
  font-size: 12.5px; color: var(--text-2);
  transition: border-color 0.18s, background 0.18s;
}
.pc-log:hover { border-color: var(--cu-400); background: var(--cu-50); }
.pc-log-ok { color: var(--ja-700); font-weight: 600; }
.pc-log-id { font-size: 11px; color: var(--line-2); overflow: hidden; text-overflow: ellipsis; }
.pc-log-mode { font-family: var(--mono); font-size: 11px; }
.pc-logs-empty { padding: 18px; text-align: center; color: var(--muted); font-size: 13px; }
.pc-log-detail { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line-2); }
.pc-log-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; font-size: 13px; color: var(--text-2); }
.pc-log-head strong { font-size: 14px; color: var(--text); }

/* ---------- ortak parçalar ---------- */
.tool-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.tool-note { margin-top: 14px; padding: 12px 15px; border-radius: var(--r-sm); font-size: 13.5px; line-height: 1.6; }
.tool-note--ok { background: var(--ja-50); border: 1px solid #BBE4D4; color: var(--ja-700); }
.tool-note--warn { background: var(--warn-50); border: 1px solid #F1DCB2; color: var(--warn); }
.tool-error { padding: 14px; border-radius: var(--r-sm); background: #FBEAE7; color: var(--danger); font-size: 13.5px; }
.tool-muted { color: var(--muted); font-size: 13.5px; }
.tool-result-box {
  margin-top: 16px; padding: 18px 20px; border-radius: var(--r-md);
  background: var(--paper); border: 1px solid var(--line);
}
.tool-result-box h3 { margin: 0 0 8px; font-size: 16px; font-weight: 700; letter-spacing: -0.022em; }
.tool-result-box p { font-size: 13.5px; color: var(--text-2); line-height: 1.7; margin-bottom: 8px; }
.tool-result-box.is-ok { border-color: #BBE4D4; background: var(--ja-50); }
.tool-result-box.is-ok h3 { color: var(--ja-700); }
.tool-result-box.is-warn { border-color: #F1DCB2; background: var(--warn-50); }
.tool-result-box.is-warn h3 { color: var(--warn); }
.tool-result-box.is-bad { border-color: #F3C9C2; background: #FBEAE7; }
.tool-result-box.is-bad h3 { color: var(--danger); }

.kv-grid { margin-top: 16px; }
.kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.kv-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.kv-row dt { font-size: 13px; color: var(--muted); flex: none; }
.kv-row dd { font-size: 13.5px; font-weight: 600; color: var(--text); text-align: right; word-break: break-word; }

.mini-table { width: 100%; margin-top: 10px; font-size: 13px; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.mini-table th {
  text-align: left; padding: 9px 12px; background: var(--sand-100);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); font-weight: 500;
}
.mini-table td { padding: 9px 12px; border-top: 1px solid var(--line); color: var(--text-2); }
.mini-table .mono { font-family: var(--mono); font-size: 12.5px; color: var(--text); }
.code-block {
  margin-top: 10px; padding: 14px 16px; border-radius: var(--r-sm);
  background: var(--ink-950); color: #CBDADC;
  font-family: var(--mono); font-size: 12px; line-height: 1.7;
  overflow-x: auto; white-space: pre;
}

/* ---------- IP ---------- */
.ip-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 22px 24px; border-radius: var(--r-md);
  background: radial-gradient(80% 120% at 90% 0%, rgba(228, 99, 28, 0.2), transparent 60%), var(--ink-950);
  color: #E9E1D4;
}
.ip-label { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cu-400); margin-bottom: 6px; }
.ip-value { display: block; font-family: var(--mono); font-size: clamp(22px, 4vw, 34px); font-weight: 600; color: #fff; letter-spacing: -0.01em; }
.ip-main .copy-btn { margin-top: 12px; background: rgba(242, 235, 222, 0.1); border-color: rgba(242, 235, 222, 0.2); color: #E9E1D4; }
.ip-main .copy-btn:hover { background: var(--cu-600); border-color: var(--cu-600); color: #fff; }

/* ---------- DNS ---------- */
.dns-steps { display: grid; gap: 6px; margin-top: 16px; }
.dns-step {
  padding: 9px 13px; border-radius: var(--r-sm); font-size: 13px;
  background: var(--paper); border: 1px solid var(--line); color: var(--text-2);
}
.dns-step.is-run { border-color: var(--cu-400); color: var(--cu-700); }
.dns-step.is-ok { border-color: #BBE4D4; background: var(--ja-50); color: var(--ja-700); }
.dns-extra { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.dns-extra h3 { font-size: 15px; font-weight: 700; margin-bottom: 12px; }
.dns-form { display: flex; flex-wrap: wrap; gap: 8px; }
.dns-form input { flex: 1 1 220px; }
.dns-answers { margin-top: 12px; }

/* ---------- WebRTC ---------- */
.rtc-cands { margin-top: 18px; }
.rtc-cands h3 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }

/* ---------- Anonimlik ---------- */
.anon-verdict {
  margin-top: 16px; padding: 20px 22px; border-radius: var(--r-md);
  background: var(--paper); border: 1px solid var(--line);
}
.anon-level {
  display: inline-block; font-family: var(--font-display); font-size: 26px; font-weight: 800;
  letter-spacing: -0.03em; margin-bottom: 6px;
}
.anon-verdict p { font-size: 13.5px; color: var(--text-2); line-height: 1.65; margin: 0; }
.anon-verdict.is-ok { background: var(--ja-50); border-color: #BBE4D4; }
.anon-verdict.is-ok .anon-level { color: var(--ja-700); }
.anon-verdict.is-mid { background: var(--warn-50); border-color: #F1DCB2; }
.anon-verdict.is-mid .anon-level { color: var(--warn); }
.anon-verdict.is-bad { background: #FBEAE7; border-color: #F3C9C2; }
.anon-verdict.is-bad .anon-level { color: var(--danger); }
.anon-scale { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.anon-step {
  padding: 12px 14px; border-radius: var(--r-sm);
  background: var(--paper); border: 1px solid var(--line);
  font-size: 13.5px; color: var(--muted);
}
.anon-step strong { display: block; color: var(--text-2); font-weight: 600; }
.anon-step-n { font-family: var(--mono); font-size: 10.5px; color: var(--line-2); }
.anon-step.is-current { border-color: var(--cu-500); background: var(--cu-50); }
.anon-step.is-current strong { color: var(--cu-700); }

/* ---------- Ping ---------- */
.ping-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ping-form input[type="text"] { flex: 1 1 240px; }
.ping-form input[type="number"] { width: 110px; }
.ping-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 18px; }
.ping-card { padding: 18px 20px; border-radius: var(--r-md); background: var(--paper); border: 1px solid var(--line); }
.ping-card h4 { font-size: 13px; font-weight: 700; margin-bottom: 12px; letter-spacing: -0.015em; }
.ping-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ping-nums strong { display: block; font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: -0.03em; }
.ping-nums .is-main strong { color: var(--cu-700); font-size: 26px; }
.ping-nums span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.ping-note { margin-top: 12px; font-size: 12px; color: var(--muted); line-height: 1.55; }
.ping-chart { margin-top: 16px; padding: 16px 18px; border-radius: var(--r-md); background: var(--paper); border: 1px solid var(--line); }
.ping-chart h4 { font-size: 13px; font-weight: 700; margin-bottom: 12px; }
.spark-row { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 10px; }
.spark-row > span { flex: none; width: 70px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.spark { display: flex; align-items: flex-end; gap: 4px; height: 56px; flex: 1; }
.spark i { flex: 1; min-width: 6px; background: var(--cu-500); border-radius: 3px 3px 0 0; opacity: 0.85; }
.spark i:hover { opacity: 1; }

@media (max-width: 1024px) {
  .pc-grid { grid-template-columns: 1fr; }
  .pc-summary { grid-template-columns: repeat(3, 1fr); }
  .pc-log { grid-template-columns: 1.4fr 0.8fr 0.8fr 0.9fr; }
  .pc-log-mode, .pc-log-id { display: none; }
}
@media (max-width: 760px) {
  .tool { padding: 20px 16px; }
  .pc-summary { grid-template-columns: repeat(2, 1fr); }
  .kv { grid-template-columns: 1fr; }
  .ping-cards { grid-template-columns: 1fr; }
  .anon-scale { grid-template-columns: 1fr; }
  .pc-toolbar { flex-direction: column; align-items: stretch; }
  .pc-export { justify-content: space-between; }
  #pcSearch { flex: 1 1 100%; }
  .pc-log { grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   MAKALE İÇİ FİGÜRLER (lib/figures.js)
   ========================================================= */
.fig { margin: 28px 0 30px; }
.fig-title {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--font-display); font-size: 14px; font-weight: 700;
  letter-spacing: -0.015em; color: var(--text); margin-bottom: 10px;
}
.fig-n {
  font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.16em; color: var(--cu-700);
  padding: 3px 7px; border-radius: var(--r-xs); background: var(--cu-50);
  flex: none;
}
.fig-box {
  border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; background: var(--sand-50);
}
.fig-box svg { display: block; width: 100%; height: auto; }
.fig--dark .fig-box { border-color: var(--ink-800); background: var(--ink-900); }
.fig-cap {
  margin-top: 10px; font-size: 12.5px; line-height: 1.65; color: var(--muted);
  padding-left: 12px; border-left: 2px solid var(--line-2);
}
.fig-cap strong { color: var(--text-2); font-weight: 600; }
.fig-cap a { color: var(--cu-700); font-weight: 600; }
.prose .fig + h2, .landing-body .fig + h2 { margin-top: 40px; }
@media (max-width: 760px) {
  .fig { margin: 22px -4px 24px; }
  .fig-title { font-size: 13px; }
}


/* =========================================================
   ANA SAYFA — PROXY ÇÖZÜMÜNÜ SEÇİN
   ========================================================= */
.psel-head { max-width: 900px; margin: 0 auto 46px; text-align: center; }
.psel-head h2 {
  font-size: clamp(30px, 3.6vw, 46px); font-weight: 700;
  letter-spacing: -0.035em; line-height: 1.1; margin-bottom: 16px;
}
.psel-lead { font-size: 17px; line-height: 1.6; color: var(--text-2); margin-bottom: 14px; }
.psel-desc { font-size: 14.5px; line-height: 1.72; color: var(--muted); }

.psel-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px; align-items: stretch;
}
.pcard {
  display: flex; flex-direction: column;
  padding: 20px 20px 22px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.pcard:hover { border-color: var(--pc); transform: translateY(-3px); box-shadow: var(--sh-2); }

.pcard-art {
  background: var(--pc-soft); border-radius: var(--r-md);
  padding: 16px 14px; margin-bottom: 18px;
}
.pcard-art svg { width: 100%; height: auto; display: block; }
.pcard-art .pa-label {
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: -0.015em; fill: var(--ink-900);
}

/* Ürün kartı illüstrasyon animasyonları — yavaş ve düşük genlikli */
@keyframes pa-pulse { 0% { transform: scale(0.85); opacity: 0.75; } 70% { transform: scale(1.45); opacity: 0; } 100% { transform: scale(1.45); opacity: 0; } }
@keyframes pa-dash { to { stroke-dashoffset: -28; } }
@keyframes pa-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes pa-wave { 0%, 100% { opacity: 0.25; } 45% { opacity: 1; } }
@keyframes pa-spin { to { transform: rotate(360deg); } }

.pcard-art .pa-pulse {
  transform-box: fill-box; transform-origin: center;
  animation: pa-pulse 3.2s ease-out infinite;
}
.pcard-art .pa-flow { animation: pa-dash 2.8s linear infinite; }
.pcard-art .pa-float { animation: pa-float 5.4s ease-in-out infinite; }
.pcard-art .pa-wave { animation: pa-wave 2.4s ease-in-out infinite; }
.pcard-art .pa-spin {
  transform-box: fill-box; transform-origin: center;
  animation: pa-spin 9s linear infinite;
}
.pcard-art .pa-d0 { animation-delay: 0s; }
.pcard-art .pa-d1 { animation-delay: 0.25s; }
.pcard-art .pa-d2 { animation-delay: 0.5s; }

.pcard-id { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.pcard-ico {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  border-radius: 10px; background: var(--pc-soft); color: var(--pc);
}
.pcard-ico .ico { width: 18px; height: 18px; }
.pcard-name strong {
  display: block; font-family: var(--font-display); font-size: 16.5px;
  font-weight: 700; letter-spacing: -0.025em; color: var(--text); line-height: 1.2;
}
.pcard-name small { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.pcard-desc { font-size: 13px; line-height: 1.62; color: var(--pc); margin-bottom: 18px; }

.pcard-price { display: flex; align-items: baseline; gap: 5px; }
.pcard-price strong {
  font-family: var(--font-display); font-size: 30px; font-weight: 800;
  letter-spacing: -0.04em; color: var(--text); line-height: 1;
}
.pcard-price span { font-size: 13.5px; font-weight: 500; color: var(--muted); }
.pcard-price-note { font-family: var(--mono); font-size: 11px; color: var(--muted); margin: 6px 0 14px; }

.pcard-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.pcard-tags span {
  font-size: 11px; padding: 4px 9px; border-radius: var(--r-xs);
  background: var(--sand-100); border: 1px solid var(--line); color: var(--text-2);
}
.pcard-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 16px; border-radius: var(--r-sm);
  background: var(--pc-soft); color: var(--pc); border: 1px solid var(--pc);
  font-weight: 600; font-size: 14px;
  transition: background 0.18s, color 0.18s;
}
.pcard-btn:hover { background: var(--pc); color: #fff; }

.pcard-feats { margin-top: 20px; }
.pcard-feats h4 {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.14em; color: var(--muted);
  padding-top: 16px; border-top: 1px solid var(--line); margin-bottom: 12px;
}
.pcard-feats ul { display: grid; gap: 9px; }
.pcard-feats li { display: flex; gap: 9px; font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
.pcard-check { color: var(--pc); flex: none; margin-top: 2px; }
.pcard-more { margin-top: 9px; }
.pcard-toggle {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; margin-top: 12px; padding: 8px;
  border-radius: var(--r-sm); background: var(--pc-soft); color: var(--pc);
  font-size: 12px; font-weight: 600;
  transition: filter 0.18s;
}
.pcard-toggle:hover { filter: brightness(0.96); }
.pcard-toggle svg { transition: transform 0.2s; }
.pcard-toggle.is-open svg { transform: rotate(180deg); }

.pcard-social {
  display: flex; align-items: center; gap: 8px;
  margin: 18px 0 14px; padding-top: 16px; border-top: 1px solid var(--line);
}
.pcard-brand { display: inline-flex; opacity: 0.9; }
.pcard-info {
  margin-left: auto; display: grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--line-2); font-family: var(--mono); font-size: 10px; color: var(--muted);
}
.pcard-note {
  font-size: 12px; line-height: 1.55; color: var(--muted);
  background: var(--sand-50); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 12px 14px;
}
.pcard-detail {
  margin-top: 12px; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--pc);
}
.pcard-detail:hover { gap: 10px; }

.psel-extra {
  margin-top: 26px; text-align: center;
  font-size: 14px; color: var(--muted);
}
.psel-extra a { color: var(--cu-700); font-weight: 600; border-bottom: 1px solid var(--cu-100); }
.psel-extra a:hover { border-color: var(--cu-500); }

@media (max-width: 1280px) {
  .psel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}
@media (max-width: 720px) {
  .psel-grid { grid-template-columns: 1fr; }
  .psel-head { margin-bottom: 32px; }
  .pcard { padding: 18px 16px 20px; }
}

.faq-block .faq { max-width: 1120px; }

/* Geniş düzende okunabilir satır uzunluğu; ızgaralar tam genişlik kalır */
.landing-body > p, .landing-body > ul, .landing-body > ol,
.landing-body > blockquote { max-width: 1040px; }
.landing-body > .info-cards, .landing-body > .steps, .landing-body > .compare-wrap,
.landing-body > .deep-row, .landing-body > .table-wrap, .landing-body > .cta-panel,
.landing-body > .feature-grid, .landing-body > .usecase-grid { max-width: none; }
.landing-body h2 { max-width: 1040px; }

/* =========================================================
   BLOG — MAKALE BİLEŞENLERİ (bilgi kutuları, adımlar, artı/eksi)
   ========================================================= */
.callout--tip { border-color: var(--ja-200, #BFE5D6); background: #F1FAF6; }
.callout--tip::before,
.callout--warn::before,
.callout--danger::before,
.callout--note::before { display: none; }
.callout--warn { border-color: #EFD9A8; background: #FDF7EA; }
.callout--danger { border-color: #EFC4BC; background: #FCF1EF; }
.callout--note { border-color: var(--line-2); background: var(--sand-100); }
.callout-label {
  display: block; font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 6px;
}
.callout--tip .callout-label { color: #0F7A57; }
.callout--warn .callout-label { color: #9A5A0B; }
.callout--danger .callout-label { color: #A8332A; }
.callout--note .callout-label { color: var(--muted); }

/* Artı / eksi kartları */
.proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 22px 0 26px; }
.pc-col { padding: 20px 20px 18px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--paper); }
.pc-col h4 {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; letter-spacing: -0.015em;
  margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.pc-col ul { display: grid; gap: 8px; margin: 0; }
.pc-col li { font-size: 13.5px; line-height: 1.6; padding-left: 22px; position: relative; }
.pc-col li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.pc--pro { border-color: #C9E6DA; background: #F5FBF8; }
.pc--pro h4 { color: #0F7A57; border-color: #CFE8DD; }
.pc--pro li::before { content: "+"; color: #12906A; }
.pc--con { border-color: #EFD6D1; background: #FDF6F4; }
.pc--con h4 { color: #A8332A; border-color: #F0DCD7; }
.pc--con li::before { content: "−"; color: #C0392B; }
.prose .pc-col ul li::before { background: none; width: auto; height: auto; border-radius: 0; }

/* Numaralı adım kartları */
.steps { display: grid; gap: 12px; margin: 20px 0 26px; counter-reset: stepc; }
.prose .steps { padding-left: 0; }
.step {
  display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: start;
  padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--paper);
}
.step-n {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
  background: var(--cu-50); color: var(--cu-700);
  font-family: var(--mono); font-size: 12px; font-weight: 700;
}
.step h4 { font-size: 15px; font-weight: 700; letter-spacing: -0.018em; margin-bottom: 5px; }
.step p { font-size: 14px; line-height: 1.7; color: var(--text-2); margin: 0; }
.step p + p { margin-top: 8px; }

/* Hızlı bilgi şeridi */
.keyfacts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0; margin: 20px 0 26px;
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
  background: var(--sand-50);
}
.keyfact { padding: 16px 18px; }
.keyfact + .keyfact { border-left: 1px solid var(--line); }
.keyfact strong {
  display: block; font-family: var(--font-display); font-size: 19px; font-weight: 800;
  letter-spacing: -0.03em; color: var(--text); line-height: 1.15; margin-bottom: 4px;
}
.keyfact span { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--muted); }

/* =========================================================
   BLOG — INDEX, KATEGORİ HUB, SAYFALAMA
   ========================================================= */
.cat-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px; margin-bottom: 34px;
}
.cat-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 17px 18px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--paper);
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}
.cat-card:hover { border-color: var(--cu-300, #F0B394); transform: translateY(-2px); box-shadow: var(--sh-2); }
.cat-card-top { display: flex; align-items: center; gap: 10px; }
.cat-card-ico {
  display: grid; place-items: center; width: 32px; height: 32px; flex: none;
  border-radius: 9px; background: var(--cu-50); color: var(--cu-700);
}
.cat-card-ico svg { width: 16px; height: 16px; }
.cat-card strong { font-size: 14.5px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.cat-card small { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.cat-card em { font-style: normal; font-family: var(--mono); font-size: 10.5px; color: var(--cu-700); margin-top: auto; padding-top: 6px; }

.blog-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding-bottom: 16px; margin-bottom: 22px; border-bottom: 1px solid var(--line);
}
.blog-toolbar h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.026em; }
.blog-count { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-left: auto; }

.pagination {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px;
  margin: 36px 0 6px;
}
.pagination a, .pagination span {
  display: grid; place-items: center; min-width: 38px; height: 38px; padding: 0 12px;
  border-radius: var(--r-sm); border: 1px solid var(--line);
  font-family: var(--mono); font-size: 12.5px; color: var(--text-2); background: var(--paper);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.pagination a:hover { border-color: var(--cu-500); color: var(--cu-700); }
.pagination .is-current { background: var(--cu-600); border-color: var(--cu-600); color: #fff; font-weight: 700; }
.pagination .is-gap { border-color: transparent; background: none; min-width: 22px; padding: 0; color: var(--muted); }
.pagination .pg-edge { font-family: var(--font-body); font-weight: 600; }
.pagination .is-disabled { opacity: 0.4; pointer-events: none; }

.cat-hero-note {
  font-size: 14.5px; line-height: 1.7; color: var(--text-2);
  max-width: 760px; margin-top: 14px;
}
.cat-sibs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.cat-sibs a {
  font-family: var(--mono); font-size: 11px; padding: 6px 11px;
  border-radius: var(--r-xs); border: 1px solid var(--line); background: var(--paper); color: var(--text-2);
}
.cat-sibs a:hover { border-color: var(--cu-500); color: var(--cu-700); }

@media (max-width: 860px) {
  .proscons { grid-template-columns: 1fr; }
  .keyfact + .keyfact { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .step { grid-template-columns: 1fr; gap: 8px; }
  .pagination a, .pagination span { min-width: 34px; height: 34px; padding: 0 9px; font-size: 12px; }
}

/* =========================================================
   PLATFORM SAYFALARI (sosyal medya / arama motoru / oyun)
   ========================================================= */
/* Fiyatlandırma bölümü tam genişlikte akar; üst ve alt gövde blokları
   kendi dolgularını paylaşır ki çift boşluk oluşmasın. */
.landing-main--top { padding-block: 58px 0; }
.landing-main--bottom { padding-block: 0 76px; }
.landing-main--top + .psel { margin-top: 62px; }
.psel + .landing-main--bottom { padding-top: 66px; }

.fig--plat { margin: 30px 0 34px; }
.fig-hint { display: none; }

/* Dar ekranlarda şema metinleri okunamayacak kadar küçülmesin:
   figür kendi kutusunda yatay kayar, sayfa gövdesi kaymaz. */
@media (max-width: 760px) {
  .fig--plat .fig-box { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
  .fig--plat .fig-box svg { width: 680px; max-width: none; }
  .fig--plat .fig-hint {
    display: block; margin-top: 7px;
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--muted);
  }
}

/* Mega menü şerit bağlantıları */
.mstrip-label {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  margin-right: 4px;
}
.mega-strip a {
  display: inline-flex; align-items: center; padding: 5px 11px;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: var(--text-2);
  margin-right: 6px; transition: border-color .18s, color .18s, background .18s;
}
.mega-strip a:hover { border-color: var(--cu-500); color: var(--cu-700); background: var(--cu-50); }

/* Hub sayfası: kategori blokları ve platform ızgarası */
.hub-cat { margin-top: 54px; scroll-margin-top: 96px; }
.hub-cat > h2 {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  font-size: clamp(21px, 2.3vw, 28px); font-weight: 700; letter-spacing: -0.03em;
  padding-bottom: 13px; margin-bottom: 20px; border-bottom: 1px solid var(--line);
}
.hub-cat > h2 .hub-count {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em; color: var(--cu-600);
  padding: 3px 9px; border: 1px solid var(--cu-100); border-radius: 999px; background: var(--cu-50);
}
.hub-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); }
.hub-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 15px; border: 1px solid var(--line); border-radius: 12px;
  background: #fff; transition: border-color .18s, transform .18s, box-shadow .18s;
}
.hub-card:hover { border-color: var(--cu-400); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(8, 27, 34, 0.07); }
.hub-card-ico {
  flex: none; width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center; background: var(--sand-100); color: var(--cu-600);
  font-family: var(--mono); font-size: 13px; font-weight: 700;
}
.hub-card-txt { min-width: 0; }
.hub-card-txt strong { display: block; font-size: 14.5px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
.hub-card-txt small { display: block; font-size: 11.8px; color: var(--muted); margin-top: 2px; }
.hub-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 6px; }
.hub-jump a {
  padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--text-2);
  transition: border-color .18s, color .18s, background .18s;
}
.hub-jump a:hover { border-color: var(--cu-500); color: var(--cu-700); background: var(--cu-50); }

@media (max-width: 640px) {
  .landing-main--top { padding-block: 40px 0; }
  .landing-main--bottom { padding-block: 0 54px; }
  .landing-main--top + .psel { margin-top: 44px; }
  .psel + .landing-main--bottom { padding-top: 46px; }
  .hub-grid { grid-template-columns: 1fr; }
}

/* Mobil menüde mega şerit koyu zemine oturur */
@media (max-width: 1420px) {
  .mega-strip a { border-color: rgba(242, 235, 222, 0.16); color: #C3D3D5; }
  .mega-strip a:hover { border-color: var(--cu-400); color: var(--cu-400); background: rgba(240, 122, 56, 0.12); }
  .mstrip-label { color: #7E9AA0; }
}

/* =========================================================
   ÇOK DİLLİ SİSTEM — dil seçici ve RTL
   ========================================================= */

/* Dil bazlı yazı tipi yedeği: Arapça/Hintçe/Çince/Japonca/Rusça
   sayfalarda eksik glyph (tofu) oluşmaması için sistem aileleri eklenir.
   Ek font DOSYASI indirilmez; performans etkilenmez. */
/* Gövde yazı tipi tek noktadan: --i18n-font her zaman tanımlıdır. */
body { font-family: var(--i18n-font); }

/* ---------------------------------------------------- dil seçici */
.langsel { position: relative; flex: none; }
.langsel-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 10px; border: 1px solid rgba(242, 235, 222, 0.18);
  border-radius: 999px; background: transparent; color: #C3D3D5;
  font-family: var(--font); font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: border-color .18s, color .18s, background .18s;
}
.langsel-btn:hover, .langsel[data-open] .langsel-btn {
  border-color: var(--cu-400); color: #fff; background: rgba(240, 122, 56, 0.12);
}
.langsel-globe { flex: none; opacity: .85; }
.langsel-code { font-family: var(--mono); letter-spacing: .06em; }
.langsel-chev { flex: none; transition: transform .18s; }
.langsel[data-open] .langsel-chev { transform: rotate(180deg); }

.langsel-menu {
  position: absolute; inset-block-start: calc(100% + 8px); inset-inline-end: 0;
  z-index: 120; min-width: 208px; padding: 6px;
  border: 1px solid rgba(242, 235, 222, 0.14); border-radius: var(--r-md);
  background: var(--ink-900); box-shadow: 0 18px 44px rgba(4, 14, 18, .48);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s, transform .18s, visibility .18s;
  max-height: 70vh; overflow-y: auto;
}
.langsel[data-open] .langsel-menu { opacity: 1; visibility: visible; transform: none; }
.langopt {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--r-sm);
  font-size: 13.5px; color: #C3D3D5; transition: background .15s, color .15s;
}
.langopt:hover { background: rgba(242, 235, 222, 0.07); color: #fff; }
.langopt.is-current { color: var(--cu-400); background: rgba(240, 122, 56, 0.1); }
.langopt-code {
  flex: none; width: 26px; font-family: var(--mono); font-size: 10.5px;
  font-weight: 600; letter-spacing: .08em; color: var(--muted);
}
.langopt.is-current .langopt-code { color: var(--cu-400); }
/* Satir duzeni HER ZAMAN LTR: kod sutunu (TR / EN / AR) tum satirlarda
   ayni hizada kalir, menu taranabilir olur. Yalnizca ADIN kendisi
   kendi yonunde cizilir; izolasyon satirin duzenini etkilemesini onler.
   Bir dilin adini kendi yazi sisteminde gostermek dogru; ama tek bir
   satir yuzunden butun menuyu aynalamak duzensiz gorunuyordu. */
.langsel-menu { direction: ltr; }
.langopt { direction: ltr; }
.langopt-name { flex: 1 1 auto; unicode-bidi: isolate; }
.langopt[dir="rtl"] .langopt-name { direction: rtl; text-align: start; }
.langopt-tick { flex: none; font-size: 12px; }

/* mobil çekmecede dil seçici tam genişlik */
.nav-lang { display: none; }
@media (max-width: 1420px) {
  .header-actions .langsel { display: none; }
  .nav-lang { display: block; padding: 14px 0 4px; border-top: 1px solid rgba(242, 235, 222, 0.1); }
  .nav-lang .langsel { width: 100%; }
  .nav-lang .langsel-btn { width: 100%; justify-content: space-between; padding: 11px 14px; border-radius: var(--r-md); }
  .nav-lang .langsel-menu { position: static; width: 100%; margin-top: 8px; box-shadow: none; }
}

/* ---------------------------------------------------------- RTL
   Yön bağımlı kalan az sayıdaki kural burada tersine çevrilir.
   Düzenin geri kalanı flex/grid ve logical property kullandığı için
   dir="rtl" ile kendiliğinden doğru akar. */
[dir="rtl"] .breadcrumbs ol { flex-direction: row-reverse; justify-content: flex-end; }
/* Ayırıcı "/" aynalanmaz; aynalanınca "\" görünüyor. Sıralama
   flex-direction: row-reverse ile zaten tersine çevriliyor. */
[dir="rtl"] .marrow,
[dir="rtl"] .related-more span,
[dir="rtl"] .rail-link .ico,
[dir="rtl"] .pcard-detail span,
[dir="rtl"] .strip-link .ico,
[dir="rtl"] .hub-card .ico,
[dir="rtl"] .btn .ico { transform: scaleX(-1); }
[dir="rtl"] .fig-cap { padding-left: 0; padding-right: 12px; border-left: 0; border-right: 2px solid var(--line-2); }
[dir="rtl"] .callout { border-left: 0; border-right: 3px solid currentColor; }
[dir="rtl"] .landing-body ul.checks li { padding-left: 0; padding-right: 28px; }
[dir="rtl"] .landing-body ul.checks li::before { left: auto; right: 0; }
[dir="rtl"] .faq-item summary { text-align: right; }
[dir="rtl"] .faq-chev { transform: scaleX(-1); }
[dir="rtl"] .langsel-menu { inset-inline-end: auto; inset-inline-start: 0; }
[dir="rtl"] .hl-card { text-align: right; }
[dir="rtl"] .pagination { flex-direction: row-reverse; }
[dir="rtl"] .table-wrap table { text-align: right; }
[dir="rtl"] th, [dir="rtl"] td { text-align: right; }

/* Şemalar (SVG) soldan sağa çizilmiştir; RTL sayfada da aynı yönde
   okunur çünkü içindeki metin kendi yönünü taşır. Kutu yalnızca
   sayfa akışında sağa yaslanır. */
[dir="rtl"] .fig-box { direction: ltr; }
[dir="rtl"] .fig-title, [dir="rtl"] .fig-cap, [dir="rtl"] .fig-hint { direction: rtl; }

/* RTL'de yönü korunması gereken öğeler.
   Marka adı, telefon numarası, e-posta ve kod parçaları soldan sağa
   okunur; RTL akışında ters çevrilmeleri anlamı bozar. */
[dir="rtl"] .brand,
[dir="rtl"] .brand-name,
[dir="rtl"] .utility-item,
[dir="rtl"] .footer-contact a,
[dir="rtl"] code,
[dir="rtl"] pre,
[dir="rtl"] .code-block,
[dir="rtl"] .langopt-code,
[dir="rtl"] .langsel-code { direction: ltr; unicode-bidi: isolate; }

/* Sayı + birim içeren rozet ve ölçüm alanları da LTR kalır */
[dir="rtl"] .pcard-price,
[dir="rtl"] .stat strong,
[dir="rtl"] .statbar strong,
[dir="rtl"] .hl-idx,
[dir="rtl"] .fig-n,
[dir="rtl"] .hub-count,
[dir="rtl"] .ipcount { direction: ltr; unicode-bidi: isolate; }

/* Marka içindeki parçalar sırasını korur */
[dir="rtl"] .brand > * { direction: ltr; }

/* Tarayıcı dili önerisi şeridi (kapatılabilir, bir kez gösterilir) */
.langhint {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 11px 22px; background: var(--ink-800); color: #E9DECD;
  border-bottom: 1px solid rgba(242, 235, 222, 0.12);
  font-size: 13.5px;
}
.langhint-txt { flex: 1 1 auto; min-width: 0; }
.langhint-go {
  flex: none; padding: 6px 14px; border-radius: 999px;
  background: var(--cu-600); color: #fff; font-weight: 600; font-size: 12.8px;
}
.langhint-go:hover { background: var(--cu-500); }
.langhint-x {
  flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: transparent; color: #9FB4B8; font-size: 20px; line-height: 1;
  cursor: pointer;
}
.langhint-x:hover { background: rgba(242, 235, 222, 0.08); color: #fff; }
@media (max-width: 640px) { .langhint { padding: 10px 16px; font-size: 12.8px; } }

/* Ölçüm, fiyat ve tablo sayıları: eşit genişlikli rakamlar hizayı korur. */
.stat strong, .pcard-price, .pc-table td, .mini-table td,
.hl-idx, .hub-count, .fig-n, code, pre, .code-block,
.langopt-code, .langsel-code {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "kern" 1;
}

/* =========================================================
   TİPOGRAFİ CİLASI
   ========================================================= */

/* Tek tip daktilo yazısı. Bağlama özel kurallar (.prose code, .step code …)
   zaten --mono kullanıyordu; bunların dışında kalan çıplak <code> tarayıcı
   varsayılanı "monospace" ile çiziliyor ve sayfa içinde iki farklı daktilo
   fontu görünüyordu. */
code, pre, kbd, samp, tt {
  font-family: var(--mono);
  font-feature-settings: "kern" 1, "tnum" 1;
}

/* Başlıklarda satır dengeleme: son satırda tek kelime kalmasını (orphan)
   ve dengesiz sarmayı önler. Desteklemeyen tarayıcı yok sayar. */
h1, h2, h3, .hero h1, .page-hero h1, .section-head h2, .fig-title {
  text-wrap: balance;
}
/* Paragraflarda yalnızca son satır düzeltilir; satır kırılmaları değişmez. */
p, li, .prose p, .hero-lead, .page-hero-lead, .section-head p {
  text-wrap: pretty;
}

/* Uzun teknik dizgiler (proxy adresi, kullanıcı adı, URL) taşma yapmasın. */
p, li, td, th, dd, dt, figcaption, .fig-hint, .prose a {
  overflow-wrap: break-word;
}

/* ---------------------------------------------------------------------
   LATİN DIŞI YAZI SİSTEMLERİ
   Sıkı negatif harf aralığı (-0.022em … -0.042em) Latin display fontları
   için tasarlanmıştır. Arapça'da harflerin birleşme noktalarını bozar,
   CJK'de glyph'leri üst üste bindirir, Devanagari'de mātrā çizgisini
   kırar. Bu dillerde aralık sıfırlanır ve satır yüksekliği artırılır:
   bu yazı sistemlerinin çıkıntıları (ascender/descender, nukta, tashkil)
   Latin'den daha fazla dikey boşluk ister.
   --------------------------------------------------------------------- */
.lang-ar, .lang-hi, .lang-zh, .lang-ja {
  line-height: 1.78;
  font-feature-settings: "kern" 1;
}
.lang-ar h1, .lang-ar h2, .lang-ar h3, .lang-ar h4, .lang-ar h5,
.lang-hi h1, .lang-hi h2, .lang-hi h3, .lang-hi h4, .lang-hi h5,
.lang-zh h1, .lang-zh h2, .lang-zh h3, .lang-zh h4, .lang-zh h5,
.lang-ja h1, .lang-ja h2, .lang-ja h3, .lang-ja h4, .lang-ja h5,
.lang-ar .btn, .lang-hi .btn, .lang-zh .btn, .lang-ja .btn,
.lang-ar .nav-link, .lang-hi .nav-link, .lang-zh .nav-link, .lang-ja .nav-link {
  letter-spacing: 0;
}
/* Başlıkların satır yüksekliği Latin'de 1.03'e kadar sıkıştırılmıştı;
   bu yazı sistemlerinde harfler birbirine değerdi. */
.lang-ar .hero h1, .lang-hi .hero h1, .lang-zh .hero h1, .lang-ja .hero h1,
.lang-ar .page-hero h1, .lang-hi .page-hero h1,
.lang-zh .page-hero h1, .lang-ja .page-hero h1 { line-height: 1.28; }
.lang-ar h2, .lang-hi h2, .lang-zh h2, .lang-ja h2 { line-height: 1.4; }
.lang-ar h3, .lang-hi h3, .lang-zh h3, .lang-ja h3 { line-height: 1.45; }

/* Çince ve Japonca'da satır dengeleme kelime sınırı aramaz; kapatılır. */
.lang-zh h1, .lang-zh h2, .lang-zh h3,
.lang-ja h1, .lang-ja h2, .lang-ja h3 { text-wrap: initial; }

/* Arapça: Naskh tarzı yazıda küçük punto okunurluğu düşer. */
.lang-ar { font-size: 16.5px; }
.lang-ar .prose { font-size: 16px; line-height: 1.95; }
.lang-ar code, .lang-ar pre { line-height: 1.7; }

/* Rusça sözcükler Türkçe/İngilizce karşılıklarından belirgin biçimde
   uzundur; dar kolonlarda taşma yerine tireleme tercih edilir. */
.lang-ru .prose p, .lang-ru .prose li,
.lang-de .prose p, .lang-de .prose li,
.lang-ru td, .lang-ru th, .lang-de td, .lang-de th { hyphens: auto; }

/* Latin dışı yazı sistemlerinde sentetik İTALİK de istenmez. */
.lang-ar, .lang-hi, .lang-zh, .lang-ja { font-synthesis: none; }