/* PointBulut — tek stil dosyası. Renk, boşluk, radius ve gölgeler yalnızca :root token'larından. */

/* ---------- Renk token'ları ----------
   Varsayılan koyu tema. Açık temada (html[data-tema="acik"]) aşağıdaki ikinci blok geçerli olur;
   hero, preloader ve hero üzerindeki şeffaf üst bar koyu token'ları kendi içinde tutar: hero hiç değişmez. */
:root,
[data-tema="acik"] .hero,
[data-tema="acik"] .onyukleme,
[data-tema="acik"] .ust-bar:not(.dolu) {
  color-scheme: dark;
  --zemin: #050b1a;           /* gece laciverti */
  --zemin-2: #081230;
  --indigo: #0e1840;          /* koyu indigo yüzey */
  --yuzey: rgba(16, 28, 66, 0.55);
  --yuzey-dolu: #0c1638;
  --cizgi: rgba(160, 200, 255, 0.12);
  --cizgi-guclu: rgba(160, 210, 255, 0.24);
  --metin: #eaf2ff;
  --metin-2: #a9b9d6;         /* ikincil metin: zeminde 8.6:1 */
  --metin-3: #7f92b3;
  --cyan: #4fd1ff;            /* vurgu: etkileşim ve odak */
  --cyan-koyu: #19a9e6;
  --buz: #bfe8ff;
  --cyan-hale: rgba(79, 209, 255, 0.35);
  /* bileşen yüzeyleri */
  --hafif-zemin: rgba(255, 255, 255, 0.04);
  --hover-zemin: rgba(255, 255, 255, 0.06);
  --dugme2-zemin: rgba(10, 20, 48, 0.6);
  --dugme2-hover: rgba(255, 255, 255, 0.08);
  --bar-zemin: rgba(5, 11, 26, 0.9);
  --menu-zemin: rgba(5, 11, 26, 0.96);
  --bant: rgba(14, 24, 64, 0.35);
  --kutu-zemin: rgba(255, 255, 255, 0.02);
  --kutu-hover: rgba(255, 255, 255, 0.05);
  --kart-zemin: linear-gradient(180deg, rgba(20, 34, 80, .55), rgba(8, 16, 44, .65));
  --kart-alt: rgba(8, 16, 44, .9);
  --panel-zemin: linear-gradient(160deg, #0f1d4d 0%, #0a1438 45%, #071029 100%);
  --girdi-zemin: rgba(5, 11, 26, .55);
  --girdi-odak: rgba(5, 11, 26, .8);
  --isik: rgba(40, 70, 190, .22);
  --d-cizgi: rgba(160, 210, 255, .2);
  --d-dugum-cizgi: rgba(191, 232, 255, .55);
  --golge-1: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 10px 30px -12px rgba(0, 0, 0, 0.6);
  --golge-2: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 30px 60px -24px rgba(0, 0, 0, 0.75);
}

/* Açık tema: ferah, soğuk beyaz zemin; vurgular okunabilir koyu cyan */
[data-tema="acik"] {
  color-scheme: light;
  --zemin: #f4f7fc;
  --zemin-2: #e8eef8;
  --indigo: #dfe7f5;
  --yuzey: rgba(255, 255, 255, 0.8);
  --yuzey-dolu: #ffffff;
  --cizgi: rgba(20, 45, 100, 0.12);
  --cizgi-guclu: rgba(20, 45, 100, 0.22);
  --metin: #0b1730;           /* zeminde 16:1 */
  --metin-2: #3f4e69;         /* zeminde 8:1 */
  --metin-3: #5b6a85;         /* zeminde 5.3:1 */
  --cyan: #0277b5;            /* beyazda 4.9:1 */
  --cyan-koyu: #025f91;
  --buz: #03669c;
  --cyan-hale: rgba(2, 119, 181, 0.25);
  --hafif-zemin: rgba(255, 255, 255, 0.8);
  --hover-zemin: rgba(11, 23, 48, 0.06);
  --dugme2-zemin: rgba(255, 255, 255, 0.9);
  --dugme2-hover: #ffffff;
  --bar-zemin: rgba(244, 247, 252, 0.97);
  --menu-zemin: rgba(244, 247, 252, 0.98);
  --bant: rgba(205, 222, 248, 0.45);
  --kutu-zemin: #ffffff;
  --kutu-hover: #ffffff;
  --kart-zemin: linear-gradient(180deg, #ffffff, #f2f6fd);
  --kart-alt: rgba(255, 255, 255, .96);
  --panel-zemin: linear-gradient(160deg, #ffffff 0%, #eef4fd 55%, #e4edfa 100%);
  --girdi-zemin: #ffffff;
  --girdi-odak: #ffffff;
  --isik: rgba(70, 130, 255, .12);
  --d-cizgi: rgba(20, 70, 150, .22);
  --d-dugum-cizgi: rgba(2, 102, 156, .6);
  --golge-1: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 10px 30px -14px rgba(20, 45, 100, 0.18);
  --golge-2: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 28px 56px -26px rgba(20, 45, 100, 0.28);
}

:root {
  /* Tipografi */
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-kucuk: 0.875rem;
  --fs-govde: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --fs-buyuk: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --fs-h2: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  --fs-h1: clamp(2.6rem, 1.6rem + 4.4vw, 5.25rem);

  /* Boşluk (4'lük ölçek) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --kenar: clamp(20px, 4vw, 48px);
  --bolum: clamp(72px, 8vw, 120px);
  --genislik: 1240px;

  /* Radius, gölge, hareket */
  --r-k: 10px; --r-o: 16px; --r-b: 24px; --r-tam: 999px;
  --golge-cyan: 0 10px 30px -10px rgba(79, 209, 255, 0.55);
  --egri: cubic-bezier(.2, .7, .2, 1);
  --hiz: .22s;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font-family: var(--font);
  font-size: var(--fs-govde);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
::selection { background: var(--cyan); color: var(--zemin); }

/* Kaydırma çubuğu: koyu tema ile uyumlu, ince; üzerine gelince cyan */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--zemin); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #1d3a6e, #2a5a9c);
  border: 2px solid var(--zemin); border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #2f7fc4, var(--cyan)); }
::-webkit-scrollbar-corner { background: var(--zemin); }
/* WebKit çubuğunu desteklemeyen tarayıcılar (Firefox) için */
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-width: thin; scrollbar-color: #2a5a9c var(--zemin); }
}
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
section[tabindex="-1"]:focus, main[tabindex="-1"]:focus { outline: none; }

h1, h2, h3 { font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; text-wrap: balance; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.035em; }
h3 { font-size: var(--fs-h3); }
p { text-wrap: pretty; }

.kap { width: 100%; max-width: calc(var(--genislik) + var(--kenar) * 2); margin-inline: auto; padding-inline: var(--kenar); }
.ikon { width: 22px; height: 22px; flex: none; }
.ikon--k { width: 18px; height: 18px; }

.atla {
  position: fixed; left: var(--kenar); top: -80px; z-index: 100;
  background: var(--cyan); color: var(--zemin); padding: 10px 18px; border-radius: var(--r-tam); font-weight: 700;
}
.atla:focus { top: 12px; }

/* ---------- Butonlar ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 52px; padding: 0 var(--s-5);
  border-radius: var(--r-tam); border: 1px solid transparent;
  font-weight: 700; font-size: var(--fs-govde); letter-spacing: -0.01em; white-space: nowrap; cursor: pointer;
  transition: transform var(--hiz) var(--egri), background-color var(--hiz), border-color var(--hiz), box-shadow var(--hiz), color var(--hiz);
}
.btn .ikon { transition: transform var(--hiz) var(--egri); }
.btn:hover .ikon { transform: translateX(3px); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn--birincil {
  background: linear-gradient(180deg, #7fe0ff 0%, #4fd1ff 45%, #19a9e6 100%);   /* iki temada da aynı parlak buton */
  color: #04122a;
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, var(--golge-cyan);
}
.btn--birincil:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 16px 36px -10px rgba(79, 209, 255, .7); }
.btn--ikincil {
  background: var(--dugme2-zemin); border-color: var(--cizgi-guclu); color: var(--metin);
}
.btn--ikincil:hover { border-color: var(--buz); background: var(--dugme2-hover); transform: translateY(-2px); }
.btn--k { min-height: 42px; padding: 0 var(--s-4); font-size: var(--fs-kucuk); }
.btn--tam { width: 100%; }

.metin-bag {
  display: inline-flex; align-items: center; gap: var(--s-2);
  color: var(--buz); font-weight: 700;
}
.metin-bag .ikon { transition: transform var(--hiz) var(--egri); }
.metin-bag:hover { color: var(--cyan); }
.metin-bag:hover .ikon { transform: translateX(4px); }

.tel-bag { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 700; color: var(--metin); }
.tel-bag:hover { color: var(--cyan); }

/* ---------- Üst bar ---------- */
.ust-bar {
  position: fixed; inset: 0 0 auto; z-index: 50;
  transition: background-color .3s, border-color .3s;
  border-bottom: 1px solid transparent;
}
.ust-bar.dolu {
  background: var(--bar-zemin);   /* blur yok: altında akan sahneyi her karede bulanıklaştırmak pahalı */
  border-bottom-color: var(--cizgi);
}
.ust-bar-ic { display: flex; align-items: center; gap: var(--s-6); height: 76px; }
.marka { display: inline-flex; align-items: center; flex: none; }
.marka img { height: 38px; width: auto; }   /* logo.png 545×120: 3 kat çözünürlük */
.marka .logo--acik { display: none; }        /* açık zemin için koyu yazılı sürüm */
[data-tema="acik"] .ust-bar.dolu .logo--koyu, [data-tema="acik"] .alt .logo--koyu { display: none; }
[data-tema="acik"] .ust-bar.dolu .logo--acik, [data-tema="acik"] .alt .logo--acik { display: block; }
.tema-dugme {
  width: 42px; height: 42px; flex: none; display: inline-grid; place-items: center; border-radius: var(--r-tam);
  border: 1px solid var(--cizgi-guclu); background: var(--hafif-zemin); color: var(--metin); cursor: pointer;
  transition: border-color var(--hiz), background-color var(--hiz), transform var(--hiz) var(--egri);
}
.tema-dugme:hover { border-color: var(--buz); transform: rotate(-12deg); }
.tema-dugme .ikon { width: 20px; height: 20px; }
.tema-dugme .tema-ay { display: none; }
[data-tema="acik"] .tema-dugme .tema-gunes { display: none; }
[data-tema="acik"] .tema-dugme .tema-ay { display: block; }
/* Tema değişirken renkler yumuşakça geçsin (yalnızca geçiş anında; sayfa açılışında değil) */
.tema-gecis, .tema-gecis *, .tema-gecis *::before, .tema-gecis *::after {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, fill .35s ease, stroke .35s ease !important;
}
.ana-menu { margin-left: auto; }
.ana-menu ul { display: flex; gap: var(--s-1); }
.ana-menu a {
  display: block; padding: 8px 14px; border-radius: var(--r-tam);
  color: var(--metin-2); font-weight: 600; font-size: var(--fs-kucuk);
  transition: color var(--hiz), background-color var(--hiz);
}
.ana-menu a:hover, .ana-menu a.aktif { color: var(--metin); background: var(--hover-zemin); }
.menu-dugme {
  display: none; margin-left: auto; width: 46px; height: 46px; border-radius: var(--r-tam);
  border: 1px solid var(--cizgi-guclu); background: var(--hafif-zemin); color: var(--metin); cursor: pointer;
  align-items: center; justify-content: center;
}
.menu-kapa { display: none; }
.menu-dugme[aria-expanded="true"] .menu-ac { display: none; }
.menu-dugme[aria-expanded="true"] .menu-kapa { display: block; }
.mobil-menu {
  padding: var(--s-4) var(--kenar) var(--s-6);
  background: var(--menu-zemin);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--cizgi);
  display: flex; flex-direction: column; gap: var(--s-5);
}
.mobil-menu[hidden] { display: none; }
.mobil-menu a:not(.btn):not(.tel-bag) {
  display: block; padding: 14px 0; font-size: 1.25rem; font-weight: 700;
  border-bottom: 1px solid var(--cizgi);
}

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate;
  min-height: min(100svh, 960px);
  display: flex; align-items: center;
  padding: 120px 0 var(--s-9);
  overflow: hidden;
  background: var(--zemin);   /* açık temada da koyu: hero token'ları koyu kalır */
  color: var(--metin);
}
.hero-sahne { position: absolute; inset: 0; z-index: -1; }
/* Poster yalnızca yedektir: sahne açılabiliyorsa (.sahne-acik, <head>'de belirlenir) ilk boyamada bile görünmez */
.hero-poster img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 72% 50%;
  transition: opacity .8s var(--egri);
}
.sahne-acik .hero-poster img { opacity: 0; }
.hero-canvas {
  display: none; position: absolute; top: 0; right: 0; width: 56%; height: 100%;
  /* sol kenar yumuşakça kaybolur: sahne metnin arkasına girmez */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 20%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 20%);
}
.sahne-acik .hero-canvas { display: block; }
/* Sahnenin arkasında sakin bir ışık alanı; metnin arkası koyu ve sade kalır */
.sahne-acik .hero-sahne { background: radial-gradient(ellipse 42% 52% at 71% 52%, rgba(34, 74, 190, .2), transparent 72%); }
.hero-sahne::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 11, 26, .92) 0%, rgba(5, 11, 26, .7) 34%, rgba(5, 11, 26, 0) 62%),
    linear-gradient(0deg, var(--zemin) 0%, rgba(5, 11, 26, 0) 22%);
}
.hero-sahne::after {                 /* ince grid: yalnızca sahne tarafında, metnin arkasında değil */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--cizgi) 1px, transparent 1px),
    linear-gradient(90deg, var(--cizgi) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 38% 50% at 72% 50%, #000 0%, transparent 80%);
  mask-image: radial-gradient(ellipse 38% 50% at 72% 50%, #000 0%, transparent 80%);
  opacity: .35;
}
.hero-icerik { position: relative; z-index: 2; }
.hero-icerik > * { max-width: 640px; }
.rozet {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 6px 14px 6px 10px; border-radius: var(--r-tam);
  border: 1px solid var(--cizgi-guclu); background: rgba(10, 20, 48, 0.6);
  color: var(--buz); font-size: var(--fs-kucuk); font-weight: 600;
}
.rozet-nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(79, 209, 255, .18), 0 0 14px var(--cyan); animation: nabiz 2.4s ease-in-out infinite; }
@keyframes nabiz { 50% { box-shadow: 0 0 0 7px rgba(79, 209, 255, .06), 0 0 18px var(--cyan); } }
.hero h1 {
  margin-top: var(--s-5);
  font-size: var(--fs-h1); font-weight: 800; letter-spacing: -0.045em; line-height: 1.02;
  background: linear-gradient(180deg, #ffffff 30%, #b9d9ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* gradyan yalnızca kutunun içini boyar: "ğ, g, y" kuyrukları kesilmesin diye alta pay, aralık aynı kalır */
  padding-bottom: 0.14em; margin-bottom: -0.14em;
}
.hero-aciklama { margin-top: var(--s-5); font-size: var(--fs-buyuk); color: var(--metin-2); max-width: 28em; }
.hero-cta { margin-top: var(--s-7); display: flex; flex-wrap: wrap; gap: var(--s-3); }
.hero-tel { margin-top: var(--s-5); color: var(--metin-3); font-size: var(--fs-kucuk); display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.hero-tel .tel-bag { color: var(--metin-2); }

/* ---------- Şerit ---------- */
.serit { position: relative; border-block: 1px solid var(--cizgi); background: linear-gradient(180deg, var(--bant), transparent); }
.serit-ic {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s-5) var(--s-8); align-items: center;
  padding-block: var(--s-7);
}
.serit-metin { font-size: var(--fs-buyuk); font-weight: 600; color: var(--metin); letter-spacing: -0.01em; max-width: 30em; }
.serit-degerler { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); color: var(--metin-2); font-size: var(--fs-kucuk); font-weight: 600; }
.serit-degerler li { display: inline-flex; align-items: center; gap: var(--s-2); }
.serit-degerler .ikon { color: var(--cyan); }
.serit-grup { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.serit-grup a {
  display: flex; flex-direction: column; gap: 2px; padding: var(--s-4) var(--s-5);
  border-radius: var(--r-o); border: 1px solid var(--cizgi); background: var(--kutu-zemin);
  transition: border-color var(--hiz), background-color var(--hiz), transform var(--hiz) var(--egri);
}
.serit-grup a:hover { border-color: var(--cizgi-guclu); background: var(--kutu-hover); box-shadow: var(--golge-1); transform: translateY(-2px); }
.serit-grup b { font-weight: 700; }
.serit-grup span { color: var(--metin-3); font-size: var(--fs-kucuk); }

/* ---------- Bölüm başı ---------- */
.bolum { padding-block: var(--bolum); position: relative; }
.ust-yazi {
  display: inline-flex; align-items: center; gap: var(--s-2);
  color: var(--cyan); font-size: var(--fs-kucuk); font-weight: 700; letter-spacing: .02em;
}
.ust-yazi::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
.bolum h2 { margin-top: var(--s-4); }
.bolum-aciklama { margin-top: var(--s-4); color: var(--metin-2); font-size: var(--fs-buyuk); max-width: 36em; }
.bolum-bas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-8); align-items: end; }
.bolum-bas .ust-yazi { grid-column: 1 / -1; }
.bolum-bas h2 { max-width: 13em; }
.bolum-bas .bolum-aciklama { margin-top: 0; justify-self: end; }

/* ---------- Çözümler: editoryal düzen ---------- */
.kartlar {
  margin-top: var(--s-8);
  display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: auto auto; gap: var(--s-5);
}
.kart {
  position: relative; overflow: hidden;
  border-radius: var(--r-b);
  background: var(--kart-zemin);
  border: 1px solid var(--cizgi);
  box-shadow: var(--golge-1);
  display: grid; grid-template-columns: 0.9fr 1fr;
  transition: border-color .3s, transform .3s var(--egri), box-shadow .3s;
}
.kart::before { /* üst kenarda ince ışık */
  content: ""; position: absolute; inset: 0 0 auto; height: 1px; z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(191, 232, 255, .55), transparent);
}
.kart:hover { border-color: var(--cizgi-guclu); transform: translateY(-4px); box-shadow: var(--golge-2); }
.kart-gorsel { position: relative; overflow: hidden; background: var(--zemin-2); }
.kart-gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--egri); }
.kart:hover .kart-gorsel img { transform: scale(1.05); }
.kart-metin { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); justify-content: center; }
.kart-metin p { color: var(--metin-2); }
.kart-metin .metin-bag { margin-top: var(--s-2); }
.kart--buyuk { grid-row: 1 / span 2; grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
.kart--buyuk .kart-gorsel { aspect-ratio: 1 / .82; }
.kart--buyuk .kart-gorsel::after { /* görselin metne yumuşak geçişi */
  content: ""; position: absolute; inset: auto 0 0; height: 40%;
  background: linear-gradient(0deg, var(--kart-alt), transparent);
}
.kart--buyuk .kart-metin { padding: 0 var(--s-7) var(--s-7); margin-top: calc(var(--s-8) * -1); position: relative; z-index: 1; }
.kart--buyuk h3 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem); }
.kart--buyuk .kart-metin p { font-size: var(--fs-buyuk); max-width: 30em; }
.kart:not(.kart--buyuk) .kart-gorsel { min-height: 260px; }

/* ---------- Avantajlar ---------- */
.avantajlar::before { /* bölümün arkasında sakin indigo ışık */
  content: ""; position: absolute; inset: 10% auto auto -10%; width: 60%; height: 80%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, var(--isik), transparent);
}
.avantajlar-ic { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--s-8); align-items: start; }
.avantajlar-bas { position: sticky; top: 120px; }
.avantaj-liste { display: grid; grid-template-columns: 1fr 1fr; }
.avantaj-liste li {
  padding: var(--s-6) var(--s-6) var(--s-7);
  border-top: 1px solid var(--cizgi);
  position: relative;
  transition: background-color .3s;
}
.avantaj-liste li:nth-child(odd) { border-right: 1px solid var(--cizgi); }
.avantaj-liste li:hover { background: var(--hover-zemin); }
.avantaj-liste li::before { /* üst çizgide ilerleyen ışık */
  content: ""; position: absolute; top: -1px; left: 0; height: 1px; width: 0;
  background: var(--cyan); box-shadow: 0 0 12px var(--cyan); transition: width .6s var(--egri);
}
.avantaj-liste li:hover::before { width: 100%; }
.avantaj-ikon {
  width: 48px; height: 48px; display: grid; place-items: center;
  border-radius: var(--r-o);
  background: linear-gradient(180deg, rgba(79, 209, 255, .16), rgba(79, 209, 255, .04));
  border: 1px solid rgba(79, 209, 255, .28);
  color: var(--cyan);
}
.avantaj-liste h3 { margin-top: var(--s-5); font-size: 1.25rem; }
.avantaj-liste p { margin-top: var(--s-2); color: var(--metin-2); }

/* ---------- Nasıl çalışır ---------- */
.nasil { background: linear-gradient(180deg, transparent, var(--bant) 40%, transparent); }
.nasil-ic { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: center; }
.adimlar { margin-top: var(--s-7); display: grid; gap: var(--s-3); counter-reset: adim; }
.adimlar li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-5); align-items: start;
  padding: var(--s-5); border-radius: var(--r-o);
  border: 1px solid var(--cizgi); background: var(--yuzey);
  transition: border-color var(--hiz), transform var(--hiz) var(--egri);
}
.adimlar li:hover { border-color: var(--cizgi-guclu); transform: translateX(4px); }
.adim-no {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
  font-weight: 800; color: var(--zemin);
  background: linear-gradient(180deg, var(--buz), var(--cyan));
  box-shadow: 0 0 0 6px rgba(79, 209, 255, .1);
}
.adimlar h3 { font-size: 1.1875rem; }
.adimlar p { margin-top: var(--s-1); color: var(--metin-2); }
.nasil-gorsel { position: relative; }
.nasil-gorsel::before {
  content: ""; position: absolute; inset: 12%; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, rgba(79, 209, 255, .18), transparent);
  filter: blur(10px);
}
.diyagram { width: 100%; max-width: 520px; margin-inline: auto; overflow: visible; }
.d-yorunge { fill: none; stroke: var(--cizgi-guclu); stroke-width: 1; stroke-dasharray: 2 6; }
.d-yorunge--2 { stroke: var(--d-cizgi); animation: don 60s linear infinite; transform-origin: 260px 260px; }
.d-kenar { stroke: var(--d-cizgi); stroke-width: 1; opacity: .8; }
.d-hat { stroke: var(--d-cizgi); stroke-width: 1.25; }
.d-akis { stroke: var(--cyan); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 10 190; stroke-dashoffset: 200; animation: akis 2.7s linear infinite; filter: drop-shadow(0 0 4px var(--cyan)); }
@keyframes akis { to { stroke-dashoffset: 0; } }
@keyframes don { to { transform: rotate(360deg); } }
.d-dugum { fill: var(--yuzey-dolu); stroke: var(--d-dugum-cizgi); stroke-width: 1.25; }
.d-dugum-ic { fill: var(--buz); }
.d-cekirdek-hale { fill: rgba(79, 209, 255, .12); stroke: rgba(79, 209, 255, .35); animation: hale 3s ease-in-out infinite; transform-origin: 260px 260px; }
.d-cekirdek { fill: var(--cyan); filter: drop-shadow(0 0 16px var(--cyan)); }
.d-cekirdek-ic { fill: #fff; }
@keyframes hale { 50% { transform: scale(1.12); opacity: .7; } }

/* ---------- İletişim / CTA ---------- */
.cta-panel {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: calc(var(--r-b) + 8px);
  border: 1px solid var(--cizgi-guclu);
  background: var(--panel-zemin);
  box-shadow: var(--golge-2);
  display: grid; grid-template-columns: 1fr 1.05fr; gap: var(--s-8);
  padding: clamp(28px, 5vw, 72px);
}
.cta-panel::before { /* köşeden gelen cyan ışık */
  content: ""; position: absolute; z-index: -1; width: 70%; aspect-ratio: 1; left: -20%; top: -45%;
  background: radial-gradient(closest-side, rgba(79, 209, 255, .28), transparent);
}
.cta-panel::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--cizgi) 1px, transparent 1px), linear-gradient(90deg, var(--cizgi) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(135deg, #000, transparent 55%); mask-image: linear-gradient(135deg, #000, transparent 55%);
  opacity: .6;
}
.cta-metin h2 { margin-top: 0; }
.cta-tel {
  margin-top: var(--s-7); display: inline-flex; align-items: center; gap: var(--s-3);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 800; letter-spacing: -0.02em;
  transition: color var(--hiz);
}
.cta-tel .ikon { width: 28px; height: 28px; color: var(--cyan); }
.cta-tel:hover { color: var(--cyan); }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); align-content: start; }
.alan { display: flex; flex-direction: column; gap: var(--s-2); }
.alan--genis, .form .btn, .form-durum { grid-column: 1 / -1; }
.alan:nth-child(3) { grid-column: 1 / -1; }
.alan label { font-size: var(--fs-kucuk); font-weight: 600; color: var(--metin-2); }
.alan label span { color: var(--metin-3); font-weight: 500; }
.alan input, .alan textarea {
  width: 100%; min-height: 52px; padding: 13px 16px;
  border-radius: var(--r-k); border: 1px solid var(--cizgi-guclu);
  background: var(--girdi-zemin); color: var(--metin);
  transition: border-color var(--hiz), box-shadow var(--hiz), background-color var(--hiz);
}
.alan textarea { resize: vertical; min-height: 120px; }
.alan input:hover, .alan textarea:hover { border-color: rgba(191, 232, 255, .4); }
.alan input:focus-visible, .alan textarea:focus-visible { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 4px var(--cyan-hale); background: var(--girdi-odak); }
.alan [aria-invalid="true"] { border-color: #ff8a9b; }
.form .btn { margin-top: var(--s-2); }
.form .btn[disabled] { opacity: .65; cursor: progress; }
.tuzak { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }   /* bot tuzağı: görünmez */
.form-durum { min-height: 1.6em; font-size: var(--fs-kucuk); font-weight: 600; color: var(--buz); }

/* ---------- SSS ---------- */
.sss-ic { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--s-8); align-items: start; }
.sss-bas .tel-bag { margin-top: var(--s-5); }
.akordiyon { border-top: 1px solid var(--cizgi); }
.ak-oge { border-bottom: 1px solid var(--cizgi); }
.ak-oge h3 { font-size: inherit; letter-spacing: normal; line-height: inherit; }
.ak-dugme {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--s-5);
  padding: var(--s-5) 0; background: none; border: 0; cursor: pointer; text-align: left;
  font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; color: var(--metin);
  transition: color var(--hiz);
}
.ak-dugme:hover { color: var(--buz); }
.ak-ikon {
  width: 34px; height: 34px; padding: 7px; border-radius: 50%;
  border: 1px solid var(--cizgi-guclu); color: var(--cyan);
  transition: transform .3s var(--egri), background-color var(--hiz), border-color var(--hiz);
}
.ak-dugme[aria-expanded="true"] .ak-ikon { transform: rotate(45deg); background: rgba(79, 209, 255, .12); border-color: rgba(79, 209, 255, .4); }
.ak-panel { padding: 0 var(--s-8) var(--s-5) 0; color: var(--metin-2); }
.ak-panel.acilis { animation: acil .35s var(--egri); }
@keyframes acil { from { opacity: 0; transform: translateY(-6px); } }
.ak-bag { margin-top: var(--s-3); display: flex; flex-wrap: wrap; gap: var(--s-5); }
.ak-bag a { display: inline-flex; align-items: center; gap: 6px; color: var(--buz); font-weight: 700; }
.ak-bag a:hover { color: var(--cyan); }

/* ---------- Footer ---------- */
.alt { border-top: 1px solid var(--cizgi); background: linear-gradient(180deg, var(--bant), transparent 60%); padding-top: var(--s-9); }
.alt-ust { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--s-7); }
.alt-marka p { margin-top: var(--s-4); color: var(--metin-2); max-width: 26em; font-size: var(--fs-kucuk); }
.alt-kolon h2 { font-size: var(--fs-kucuk); font-weight: 700; letter-spacing: .02em; color: var(--metin-3); margin-bottom: var(--s-4); }
.alt-kolon li + li { margin-top: var(--s-2); }
.alt-kolon a { color: var(--metin-2); transition: color var(--hiz); }
.alt-kolon a:hover { color: var(--cyan); }
.alt-kolon .tel-bag { color: var(--metin); }
.sosyal { margin-top: var(--s-4); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.sosyal li + li { margin-top: 0; }
.alt-son {
  margin-top: var(--s-8); padding-block: var(--s-5) var(--s-6); border-top: 1px solid var(--cizgi);
  display: flex; justify-content: space-between; gap: var(--s-4); color: var(--metin-3); font-size: var(--fs-kucuk);
}
.alt-son ul { display: flex; gap: var(--s-4); }

/* ---------- Ön yükleme: merkezdeki nokta, yörüngeler, ilerleme çizgisi ---------- */
/* Perde JS'i beklemeden ilk karede açıktır (betik gecikse bile ham sayfa görünmez).
   JS kapalıysa <noscript> gizler; JS hiç çalışmazsa 8 sn sonra yalnızca CSS ile kalkar. */
.onyukleme {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 50% 45%, rgba(40, 80, 200, .22), transparent 45%),
    var(--zemin);
  transition: opacity .5s var(--egri), visibility 0s linear .5s;
}
.yuklendi .onyukleme { opacity: 0; visibility: hidden; pointer-events: none; }
.onyukleme { animation: oy-guvenlik 0s linear 8s forwards; }
@keyframes oy-guvenlik { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.oy-merkez { display: flex; flex-direction: column; align-items: center; gap: var(--s-5); transition: transform .6s var(--egri); }
.yuklendi .oy-merkez { transform: scale(.94); }
.oy-cekirdek { width: 128px; height: 128px; overflow: visible; }
.oy-yorunge { fill: none; stroke: var(--cizgi-guclu); stroke-width: 1; stroke-dasharray: 2 5; }
.oy-yorunge--2 { stroke: rgba(79, 209, 255, .3); stroke-dasharray: none; }
.oy-don { transform-origin: 80px 80px; animation: don 2.4s linear infinite; }
.oy-don--ters { animation-duration: 3.6s; animation-direction: reverse; }
.oy-uydu { fill: var(--buz); filter: drop-shadow(0 0 6px var(--cyan)); }
.oy-uydu--k { fill: var(--cyan); }
.oy-hale { fill: rgba(79, 209, 255, .14); transform-origin: 80px 80px; animation: oy-nabiz 1.6s ease-in-out infinite; }
.oy-nokta { fill: #fff; filter: drop-shadow(0 0 10px var(--cyan)) drop-shadow(0 0 22px var(--cyan)); }
@keyframes oy-nabiz { 0%, 100% { transform: scale(.8); opacity: .9; } 50% { transform: scale(1.5); opacity: .3; } }
.oy-logo { height: 34px; width: auto; }
.oy-cubuk { width: 140px; height: 2px; border-radius: 2px; background: var(--cizgi); overflow: hidden; }
.oy-cubuk span {
  display: block; height: 100%; width: 100%; border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--buz));
  box-shadow: 0 0 10px var(--cyan);
  transform: translateX(-100%); animation: oy-ilerle 1.4s var(--egri) infinite;
}
.yuklendi .oy-cubuk span { animation: none; transform: none; }
@keyframes oy-ilerle { 0% { transform: translateX(-100%); } 60% { transform: translateX(0); } 100% { transform: translateX(100%); } }

/* ---------- Giriş animasyonları ---------- */
.js [data-ortaya] { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--egri), transform .8s var(--egri); }
.js [data-ortaya].gorundu { opacity: 1; transform: none; }
.js .hero-icerik > * { opacity: 0; transform: translateY(18px); }
.js.yuklendi .hero-icerik > * { animation: gir .7s var(--egri) .05s forwards; }
.js.yuklendi .hero-icerik > :nth-child(2) { animation-delay: .1s; }
.js.yuklendi .hero-icerik > :nth-child(3) { animation-delay: .15s; }
.js.yuklendi .hero-icerik > :nth-child(4) { animation-delay: .2s; }
.js.yuklendi .hero-icerik > :nth-child(5) { animation-delay: .25s; }
@keyframes gir { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .js [data-ortaya], .js .hero-icerik > * { opacity: 1 !important; transform: none !important; }
  .onyukleme { transition-duration: .2s !important; animation: oy-guvenlik 0s linear 8s forwards !important; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
  .ana-menu, .ust-cta { display: none; }
  .menu-dugme { display: inline-flex; margin-left: var(--s-2); }
  .tema-dugme { margin-left: auto; }
  .hero { min-height: 640px; }
  .hero-icerik > * { max-width: 52%; }
  .hero h1 { font-size: clamp(2.4rem, 1rem + 4vw, 3.5rem); }
  .hero-cta .btn { flex: 1 1 100%; }
  .hero-canvas { width: 50%; }
  .sahne-acik .hero-sahne { background: radial-gradient(ellipse 40% 45% at 74% 50%, rgba(34, 74, 190, .2), transparent 72%); }
  .hero-sahne::before { background: linear-gradient(90deg, rgba(5, 11, 26, .94) 0%, rgba(5, 11, 26, .75) 45%, rgba(5, 11, 26, 0) 70%), linear-gradient(0deg, var(--zemin) 0%, rgba(5, 11, 26, 0) 25%); }
  .serit-ic { grid-template-columns: 1fr; }
  .bolum-bas { grid-template-columns: 1fr; }
  .bolum-bas .bolum-aciklama { justify-self: start; margin-top: var(--s-4); }
  .kartlar { grid-template-columns: 1fr 1fr; }
  .kart--buyuk { grid-column: 1 / -1; grid-row: auto; grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .kart--buyuk .kart-gorsel { aspect-ratio: 1; }
  .kart--buyuk .kart-gorsel::after { display: none; }
  .kart--buyuk .kart-metin { margin-top: 0; padding: var(--s-6); }
  .kart:not(.kart--buyuk) { grid-template-columns: 1fr; }
  .kart:not(.kart--buyuk) .kart-gorsel { aspect-ratio: 16 / 10; min-height: 0; }
  .avantajlar-ic, .nasil-ic, .sss-ic { grid-template-columns: 1fr; gap: var(--s-7); }
  .avantajlar-bas { position: static; }
  .nasil-gorsel { max-width: 460px; margin-inline: auto; width: 100%; }
  .cta-panel { grid-template-columns: 1fr; gap: var(--s-7); }
  .alt-ust { grid-template-columns: 1fr 1fr 1fr; }
  .alt-marka { grid-column: 1 / -1; }
}

/* ---------- Telefon: kendi düzeni (metin önce, sahne statik) ---------- */
@media (max-width: 767px) {
  .ust-bar-ic { height: 68px; }
  /* Mobil: sahne üstte ve tam genişlikte (üst barın altından başlar), başlıklar alt kenarına yapışık gelir */
  .hero { flex-direction: column; align-items: stretch; min-height: 0; padding: 0 0 var(--s-6); }
  .hero-icerik { margin-top: -56px; }
  .hero-icerik > * { max-width: none; }
  .hero-sahne {
    position: relative; order: 0; inset: auto; z-index: 0;
    width: 100%; aspect-ratio: 1 / 1; max-height: 62svh;
    overflow: hidden; background: transparent;
  }
  .sahne-acik .hero-sahne { background: radial-gradient(ellipse 65% 55% at 55% 55%, rgba(34, 74, 190, .26), transparent 75%); }
  /* üstte bar için karartma, altta zemine eriyen geçiş: üzerine gelen metin okunaklı kalır */
  .hero-sahne::before { background: linear-gradient(180deg, rgba(5, 11, 26, .75) 0%, rgba(5, 11, 26, 0) 22%), linear-gradient(0deg, var(--zemin) 0%, rgba(5, 11, 26, .85) 14%, rgba(5, 11, 26, 0) 42%); }
  .hero-sahne::after { display: none; }
  .hero-poster img { object-position: 50% 50%; }
  .hero-canvas { inset: 0; width: 100%; height: 100%; -webkit-mask-image: none; mask-image: none; }
  .hero-cta .btn { flex: 1 1 100%; }
  .serit-grup { grid-template-columns: 1fr; }
  .kartlar { grid-template-columns: 1fr; margin-top: var(--s-7); }
  .kart--buyuk { grid-template-columns: 1fr; }
  .kart--buyuk .kart-gorsel { aspect-ratio: 4 / 3; }
  .kart-metin { padding: var(--s-5); }
  .avantaj-liste { grid-template-columns: 1fr; }
  .avantaj-liste li { padding: var(--s-5) 0 var(--s-6); }
  .avantaj-liste li:nth-child(odd) { border-right: 0; }
  .adimlar li { padding: var(--s-4); gap: var(--s-4); }
  .form { grid-template-columns: 1fr; }
  .ak-panel { padding-right: 0; }
  .alt-ust { grid-template-columns: 1fr 1fr; }
  .alt-son { flex-direction: column; }
}