/* SyncMage — Tanıtım ve Hukuk Sayfaları ("Arcane Cloud Alchemy" Kurumsal Kimlik)
   Dış yazı tipi, CDN veya ikon kütüphanesi yoktur; tüm ikonlar ve portal
   grafikleri satır içi SVG ve saf CSS ile çizilir. Dışarıya giden tek istek,
   ziyaretçi açıkça onay verirse yüklenen analitik (analytics.js) betiğidir.
   Klasör FTP ile olduğu gibi sunucuya atıldığında veya nginx üzerinden
   doğrudan sunulduğunda sıfır bağımlılıkla çalışır. */

:root {
  --primary: #4f46e5;
  --primary-dark: #4338ca;
  --primary-soft: #eef2ff;
  --mage-violet: #7c3aed;
  --accent: #06b6d4;
  --accent-soft: #ecfeff;
  --mage-gold: #f59e0b;
  --success: #10b981;
  --sanctum: #0b0e1f;
  --ink: #1e1b4b;
  --muted: #52525b;
  --line: #e2e8f0;
  --bg: #f8fafc;
  --card: #ffffff;
  --bg-soft: #f1f5f9;
  --radius: 18px;
  --radius-lg: 24px;
  --max: 1440px;
  --max-wide: 1760px;
  --pad-x: clamp(24px, 4.5vw, 72px);
  --gradient-mage: linear-gradient(135deg, #4f46e5 0%, #7c3aed 52%, #06b6d4 100%);
  --shadow-card: 0 1px 3px rgba(30, 27, 75, 0.05), 0 8px 22px -4px rgba(30, 27, 75, 0.06);
  --shadow-brand: 0 12px 28px -6px rgba(79, 70, 229, 0.35), 0 4px 12px -3px rgba(124, 58, 237, 0.22);
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}

a:hover { color: var(--mage-violet); }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.wrap-wide {
  width: 100%;
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.text-gradient {
  background: var(--gradient-mage);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Üst Çubuk (Frosted Glass Header) ────────────────────────────────── */

header.site {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid rgba(226, 232, 240, 0.85);
  background: rgba(248, 250, 252, 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

header.site .wrap,
header.site .wrap-wide {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding-top: 15px;
  padding-bottom: 15px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-decoration: none;
}

.logo img {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
}

.logo span {
  background: var(--gradient-mage);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

header.site nav {
  margin-inline-start: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(30, 27, 75, 0.04);
}

header.site nav a {
  text-decoration: none;
  color: var(--muted);
  padding: 6px 14px;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}

header.site nav a:hover {
  background: var(--primary-soft);
  color: var(--primary);
}

/* ── Giriş Bölümü (Arcane Cloud Conduit Hero) ─────────────────────────── */

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 5vw, 84px) 0 clamp(44px, 4.5vw, 76px);
  border-bottom: 1px solid var(--line);
  background-color: var(--bg);
  background-image:
    radial-gradient(800px circle at 10% 15%, rgba(124, 58, 237, 0.11), transparent 60%),
    radial-gradient(700px circle at 90% 25%, rgba(6, 182, 212, 0.11), transparent 60%),
    radial-gradient(rgba(79, 70, 229, 0.11) 1px, transparent 1px);
  background-size: auto, auto, 26px 26px;
}

.hero-grid {
  display: grid;
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
  grid-template-columns: 1.15fr 0.85fr;
}

.hero h1 {
  margin: 0 0 20px;
  font-size: clamp(34px, 3.3vw, 54px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.hero p.lead {
  margin: 0 0 18px;
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.65;
  color: var(--muted);
  max-width: 72ch;
}

.hero p.sub-lead {
  margin: 0 0 26px;
  font-size: 15.5px;
  color: var(--muted);
  max-width: 72ch;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid rgba(79, 70, 229, 0.22);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--mage-violet);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  box-shadow: 0 2px 6px rgba(30, 27, 75, 0.04);
}

.trust-pill svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--primary);
}

/* ── Arcane Conduit Vitrin Kartı (Sağ Hero Sütunu) ────────────────────── */

.conduit-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background-color: var(--sanctum);
  background-image:
    radial-gradient(at 15% 15%, rgba(124, 58, 237, 0.40) 0px, transparent 55%),
    radial-gradient(at 85% 85%, rgba(6, 182, 212, 0.30) 0px, transparent 55%);
  padding: clamp(22px, 2.4vw, 32px);
  color: #ffffff;
  box-shadow: 0 24px 52px -12px rgba(11, 14, 31, 0.48);
}

.conduit-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 14px;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.conduit-title {
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.03em;
}

.conduit-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(6, 182, 212, 0.16);
  border: 1px solid rgba(103, 232, 249, 0.25);
  color: #67e8f9;
  font-weight: 700;
  font-size: 11px;
}

.conduit-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22d3ee;
  box-shadow: 0 0 8px #22d3ee;
}

.conduit-stage {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  margin: 26px 0;
}

.cloud-col {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.cloud-node {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.07);
  border-radius: 13px;
  padding: 11px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: #ffffff;
}

.cloud-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cloud-dot.gdrive { background: #34d399; box-shadow: 0 0 8px rgba(52, 211, 153, 0.6); }
.cloud-dot.s3 { background: #fbbf24; box-shadow: 0 0 8px rgba(251, 191, 36, 0.6); }
.cloud-dot.onedrive { background: #38bdf8; box-shadow: 0 0 8px rgba(56, 189, 248, 0.6); }
.cloud-dot.dropbox { background: #818cf8; box-shadow: 0 0 8px rgba(129, 140, 248, 0.6); }
.cloud-dot.b2 { background: #f472b6; box-shadow: 0 0 8px rgba(244, 114, 182, 0.6); }
.cloud-dot.webdav { background: #22d3ee; box-shadow: 0 0 8px rgba(34, 211, 238, 0.6); }

.portal-core {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 6px;
}

.portal-orb {
  position: relative;
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow: 0 0 32px rgba(124, 58, 237, 0.5);
}

.portal-orb img {
  width: 50px;
  height: 50px;
  border-radius: 13px;
}

.portal-pill {
  padding: 3px 11px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.30);
  border: 1px solid rgba(192, 132, 252, 0.38);
  color: #e9d5ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.conduit-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.75);
}

.conduit-bar strong {
  color: #67e8f9;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}

/* ── İçerik Bölümleri & Başlıklar ─────────────────────────────────────── */

main { padding-bottom: 80px; }

.section-head {
  margin: 56px 0 22px;
}

.eyebrow {
  display: inline-block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
}

.section-head h2 {
  margin: 0;
  font-size: clamp(24px, 2vw, 30px);
  font-weight: 800;
  letter-spacing: -0.02em;
}

h1 {
  margin: 36px 0 10px;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.025em;
}

h2 {
  margin: 44px 0 12px;
  font-size: 22px;
  font-weight: 750;
  letter-spacing: -0.015em;
}

h3 {
  margin: 26px 0 8px;
  font-size: 18px;
  font-weight: 700;
}

p, ul, ol, table { margin: 0 0 16px; }

ul, ol { padding-inline-start: 22px; }

li { margin-bottom: 6px; }

/* ── Kartlar & Özellik Izgarası ───────────────────────────────────────── */

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  padding: 24px 26px;
  margin: 0 0 20px;
  box-shadow: var(--shadow-card);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.card:hover {
  border-color: rgba(79, 70, 229, 0.35);
}

.card h3 { margin-top: 0; }

.card p:last-child { margin-bottom: 0; color: var(--muted); font-size: 15.5px; }

.grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 32px;
}

.grid .card {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.grid .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -6px rgba(79, 70, 229, 0.13);
}

.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.icon-orb {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--primary-soft);
  color: var(--primary);
  display: grid;
  place-items: center;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.icon-orb svg {
  width: 22px;
  height: 22px;
}

.card:hover .icon-orb {
  background: var(--gradient-mage);
  color: #ffffff;
  box-shadow: var(--shadow-brand);
}

.sigil-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
}

/* ── Bulut Sağlayıcı Takımyıldızı (Clouds Constellation) ──────────────── */

.constellation-box {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
  padding: 28px 32px;
  box-shadow: var(--shadow-card);
  margin-bottom: 28px;
}

.pill-list {
  list-style: none;
  padding: 0;
  margin: 20px 0 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pill-list li {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: var(--bg);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.pill-list li:hover {
  border-color: rgba(79, 70, 229, 0.4);
  background: var(--primary-soft);
  color: var(--primary);
}

.pill-list li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
}

.pill-list li:nth-child(3n+2)::before { background: var(--accent); }
.pill-list li:nth-child(3n)::before { background: var(--mage-violet); }

/* ── Veri Güvenliği Üçlüsü & İletişim Izgarası ────────────────────────── */

.grid-3 {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 32px;
}

.grid-3 .card {
  margin: 0;
  border-top: 3px solid var(--primary);
}

.grid-3 .card:nth-child(2) { border-top-color: var(--mage-violet); }
.grid-3 .card:nth-child(3) { border-top-color: var(--accent); }

.contact-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1.5fr 1fr;
  align-items: stretch;
}

.contact-grid table {
  margin: 0;
}

.contact-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ── Not, Yer Tutucu, Tablo ve İçindekiler ────────────────────────────── */

.note {
  border-inline-start: 4px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 14px 14px 0;
  padding: 16px 20px;
  margin: 0 0 22px;
  font-size: 15px;
}

.fill {
  background: #fef9c3;
  color: #713f12;
  padding: 1px 6px;
  border-radius: 5px;
  font-weight: 500;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  background: var(--card);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

th, td {
  border: 1px solid var(--line);
  padding: 13px 16px;
  text-align: start;
  vertical-align: top;
}

th {
  background: var(--bg-soft);
  font-weight: 700;
  color: var(--ink);
  width: 28%;
}

code {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 13.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.meta {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 28px;
}

.toc {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  padding: 20px 26px;
  margin-bottom: 32px;
  font-size: 14.5px;
  box-shadow: var(--shadow-card);
}

.toc ol {
  margin: 0;
  columns: 3;
  column-gap: 32px;
}

.toc li { break-inside: avoid; }

/* ── Alt Bilgi (Footer) ───────────────────────────────────────────────── */

footer.site {
  border-top: 1px solid var(--line);
  background: var(--card);
  padding: 32px 0 48px;
  color: var(--muted);
  font-size: 14px;
}

footer.site .wrap,
footer.site .wrap-wide {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

footer.site nav {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-weight: 600;
}

footer.site p { margin: 0; }

footer.site a { text-decoration: none; }

@media (max-width: 1180px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .toc ol { columns: 2; }
}

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .hero { padding: 40px 0 36px; }
  .grid { grid-template-columns: 1fr; }
  .conduit-stage { grid-template-columns: 1fr; }
  .toc ol { columns: 1; }
}

/* ── Çerez İzni (analytics.js) ────────────────────────────────────────── */

.consent {
  position: fixed;
  inset-inline: 16px;
  bottom: 16px;
  max-width: 620px;
  margin-inline: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px rgba(30, 27, 75, 0.16);
  padding: 18px 22px;
  z-index: 50;
}

.consent p {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.6;
}

.consent-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.consent button {
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 11px;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
}

.consent button:hover { border-color: var(--muted); }

.consent .consent-yes {
  background: var(--gradient-mage);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-brand);
}

.consent .consent-yes:hover { opacity: 0.94; }