/* Divan tanitim sitesi. Uygulamayla ayni koyu dil. Renkler: logonun civit-lacivert tonlari (isik) ve
   uygulamanin renk ailesi; her ozellik/platform kendi rengini .renk-* sinifiyla alir (--renk).
   Kose kurali: dugmeler tam yuvarlak (999px), kartlar 16px, gorseller 12px. Yazi tipi Geist (SIL OFL). */

@font-face {
  font-family: 'Geist';
  src: url('/fonts/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --zemin: #19191c;
  --yuzey: #212226;
  --yuzey-2: #2a2b30;
  --cizgi: rgba(232, 234, 237, 0.08);
  --cizgi-guclu: rgba(232, 234, 237, 0.16);
  --metin: #ececee;
  --soluk: #a3a7ad;
  --vurgu: #8ab4f8;
  --vurgu-acik: #aecbfa;
  --vurgu-zemin: rgba(138, 180, 248, 0.1);
  /* uygulamanin renk ailesi (app/renderer/style.css) ve logonun civit tonu */
  --mavi: #8ab4f8;
  --yesil: #81c995;
  --sari: #fdd663;
  --mercan: #f28b82;
  --civit: #a8a2ff;
  --logo-civit: #2a1380;
  --logo-lacivert: #0a1b55;
  --renk: var(--mavi);
  --golge: 0 30px 80px -24px rgba(5, 10, 24, 0.75);
  --kap: 1240px;
  --yan: clamp(16px, 4vw, 40px);
  --yavas: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font: 400 17px/1.6 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-feature-settings: 'ss01';
  -webkit-font-smoothing: antialiased;
}

/* Kahraman gorseli ekranin sag kenarina tasar; sayfa yana kaymasin */
main { overflow-x: clip; }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
.simgeler { display: none; }

.kap { width: min(var(--kap), 100% - 2 * var(--yan)); margin-inline: auto; }

.ikon { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; }

.renk-mavi { --renk: var(--mavi); }
.renk-yesil { --renk: var(--yesil); }
.renk-sari { --renk: var(--sari); }
.renk-mercan { --renk: var(--mercan); }
.renk-civit { --renk: var(--civit); }
.renk-acik { --renk: #e3e8f4; }

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

.atla {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 30;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--vurgu);
  color: #121317;
  font-weight: 600;
  text-decoration: none;
}
.atla:focus { top: 12px; }

/* ================= dugmeler ================= */

.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.15s var(--yavas);
}
.dugme:active { transform: translateY(1px) scale(0.98); }
.dugme.birincil { background: var(--vurgu); color: #121317; }
.dugme.birincil:hover { background: var(--vurgu-acik); }
.dugme.ikincil { border-color: var(--cizgi-guclu); color: var(--metin); background: rgba(255, 255, 255, 0.02); }
.dugme.ikincil:hover { border-color: rgba(232, 234, 237, 0.32); background: rgba(255, 255, 255, 0.06); }
.dugme.kucuk { min-height: 38px; padding: 0 16px; font-size: 14px; }

.metin-baglanti {
  color: var(--vurgu);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(138, 180, 248, 0.35);
  transition: border-color 0.2s;
}
.metin-baglanti:hover { border-color: var(--vurgu); }

/* ================= ust cubuk ================= */

.ust {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(25, 25, 28, 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--cizgi);
}
@media (prefers-reduced-transparency: reduce) {
  .ust { background: var(--zemin); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.ust-ic { height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.marka { display: inline-flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 650; letter-spacing: -0.02em; text-decoration: none; }
.marka img { border-radius: 8px; }
.menu { display: flex; align-items: center; gap: 6px; }
.menu-baglanti { padding: 8px 12px; border-radius: 999px; color: var(--soluk); font-size: 15px; font-weight: 500; text-decoration: none; transition: color 0.2s, background-color 0.2s; }
.menu-baglanti:hover { color: var(--metin); background: rgba(255, 255, 255, 0.05); }

/* ================= kahraman ================= */

.kahraman {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  padding-block: clamp(48px, 9vh, 96px) clamp(64px, 10vh, 112px);
  min-height: calc(100dvh - 68px);
}
/* Kahramanin arkasinda tam genislikte renkli isik (logonun civit ve lacivert tonlari) */
.kahraman::before {
  content: '';
  position: absolute;
  z-index: -2;
  top: -68px;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background:
    radial-gradient(42% 60% at 78% 38%, rgba(59, 108, 246, 0.42), transparent 70%),
    radial-gradient(38% 55% at 92% 78%, rgba(42, 19, 128, 0.75), transparent 72%),
    radial-gradient(30% 40% at 58% 90%, rgba(129, 201, 149, 0.16), transparent 70%),
    radial-gradient(28% 36% at 12% 18%, rgba(253, 214, 99, 0.09), transparent 70%),
    radial-gradient(40% 50% at 8% 85%, rgba(10, 27, 85, 0.85), transparent 75%);
  pointer-events: none;
}
.kahraman h1 {
  font-size: clamp(44px, 6.2vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.045em;
  font-weight: 650;
}
.vurgu-yazi { color: var(--mavi); }
.yesil-yazi { color: var(--yesil); }
.sari-yazi { color: var(--sari); }
.giris { margin-top: 24px; max-width: 30ch; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--soluk); }
.eylemler { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

.kahraman-gorsel { position: relative; margin-right: calc(-1 * max(var(--yan), (100vw - var(--kap)) / 2)); }
.kahraman-gorsel::before {
  content: '';
  position: absolute;
  inset: -12% -6% -18% -10%;
  z-index: -1;
  background: radial-gradient(60% 55% at 40% 45%, rgba(138, 180, 248, 0.22), transparent 70%);
  pointer-events: none;
}
.kahraman-gorsel img {
  width: 100%;
  border-radius: 12px 0 0 12px;
  border: 1px solid rgba(168, 162, 255, 0.28);
  border-right: 0;
  box-shadow: 0 40px 100px -30px rgba(42, 19, 128, 0.9), 0 0 0 1px rgba(138, 180, 248, 0.06);
}

/* ================= ses ================= */

.ses {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(40px, 7vw, 112px);
  padding-block: clamp(72px, 12vh, 136px);
  border-top: 1px solid var(--cizgi);
}
.ses-gorsel { position: relative; justify-self: center; width: min(100%, 290px); }
.ses-gorsel::before {
  content: '';
  position: absolute;
  inset: -14% -40%;
  z-index: -1;
  background:
    radial-gradient(45% 40% at 50% 28%, rgba(138, 180, 248, 0.42), transparent 70%),
    radial-gradient(42% 36% at 50% 82%, rgba(129, 201, 149, 0.26), transparent 70%),
    radial-gradient(40% 30% at 40% 55%, rgba(42, 19, 128, 0.6), transparent 72%);
  pointer-events: none;
}
.ses-gorsel img { width: 100%; border-radius: 12px; border: 1px solid var(--cizgi-guclu); box-shadow: var(--golge); }
h2 { font-size: clamp(32px, 3.8vw, 48px); line-height: 1.08; letter-spacing: -0.035em; }
.bolum-giris { margin-top: 18px; max-width: 52ch; color: var(--soluk); font-size: 18px; }
.maddeler { display: grid; gap: 28px; margin-top: 40px; }
.maddeler li { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.maddeler .ikon {
  width: 44px;
  height: 44px;
  padding: 11px;
  border-radius: 12px;
  background: var(--renk);
  color: #16171a;
  box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--renk) 70%, transparent);
}
.maddeler h3, .hucre h3, .platform h3 { font-size: 18px; letter-spacing: -0.01em; }
.maddeler p { margin-top: 4px; max-width: 54ch; color: var(--soluk); font-size: 16px; }

/* ================= ozellikler (bento) ================= */

.ozellikler { padding-block: clamp(72px, 12vh, 136px); border-top: 1px solid var(--cizgi); }
.ozellikler h2 { max-width: 18ch; }
.bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    'sunucu sunucu anket anket'
    'sunucu sunucu ekran konu'
    'arkadas arkadas arkadas arkadas';
  gap: 16px;
  margin-top: 48px;
}
.hucre {
  position: relative;
  overflow: hidden;
  padding: 28px;
  border-radius: 16px;
  background: radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--renk) 30%, transparent), transparent 60%), var(--yuzey);
  border: 1px solid color-mix(in srgb, var(--renk) 32%, transparent);
  transition: border-color 0.25s, transform 0.25s var(--yavas);
}
.hucre:hover { border-color: color-mix(in srgb, var(--renk) 45%, transparent); }
.hucre .ikon {
  width: 40px;
  height: 40px;
  padding: 9px;
  border-radius: 11px;
  color: #16171a;
  background: var(--renk);
  box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--renk) 70%, transparent);
}
.hucre h3 { margin-top: 14px; }
.hucre p { margin-top: 8px; color: var(--soluk); font-size: 16px; }

.hucre-sunucu {
  grid-area: sunucu;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  padding-bottom: 0;
  background: radial-gradient(90% 80% at 100% 100%, color-mix(in srgb, var(--renk) 26%, transparent), transparent 60%),
    radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--renk) 26%, transparent), transparent 60%), var(--yuzey);
}
.hucre-sunucu .hucre-yazi { padding-bottom: 28px; }
.hucre-sunucu img {
  align-self: end;
  width: 100%;
  max-width: 300px;
  justify-self: end;
  border-radius: 12px 12px 0 0;
  border: 1px solid var(--cizgi-guclu);
  border-bottom: 0;
}
.hucre-anket {
  grid-area: anket;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 24px;
  align-items: center;
}
.hucre-anket img { width: 100%; border-radius: 12px; border: 1px solid var(--cizgi-guclu); }
.hucre-ekran { grid-area: ekran; }
.hucre-konu { grid-area: konu; }
.hucre-arkadas {
  grid-area: arkadas;
  display: flex;
  align-items: center;
  gap: 20px;
  padding-block: 24px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--renk) 28%, transparent), color-mix(in srgb, var(--mavi) 10%, transparent) 55%, color-mix(in srgb, var(--yesil) 8%, transparent)), var(--yuzey);
}
.hucre-arkadas .ikon { width: 44px; height: 44px; padding: 10px; border-radius: 12px; }
.hucre-arkadas h3 { margin-top: 0; }
.hucre-arkadas p { margin-top: 2px; }

/* ================= indir ================= */

.indir { position: relative; isolation: isolate; padding-block: clamp(72px, 12vh, 136px); border-top: 1px solid var(--cizgi); }
.indir::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: radial-gradient(40% 50% at 15% 60%, rgba(42, 19, 128, 0.5), transparent 70%), radial-gradient(35% 45% at 90% 30%, rgba(59, 108, 246, 0.14), transparent 70%);
  pointer-events: none;
}
.surum { margin-top: 14px; color: var(--soluk); font-variant-numeric: tabular-nums; }
.platformlar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 44px;
}
.platform {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto 1fr;
  column-gap: 18px;
  row-gap: 6px;
  padding: 26px;
  border-radius: 16px;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  transition: border-color 0.2s;
}
.platform-ikon { grid-row: 1 / span 2; width: 40px; height: 40px; color: var(--renk); }
.platform:hover { border-color: color-mix(in srgb, var(--renk) 40%, transparent); }
.platform p { color: var(--soluk); font-size: 16px; }
.platform-eylem { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 14px; align-self: end; }

/* Ziyaretcinin isletim sistemi (site.js): solda buyuk, digerleri sagda */
.platformlar.algilandi { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-auto-flow: dense; }
.platformlar.algilandi .platform { grid-column: 2; }
.platformlar.algilandi .platform.one {
  grid-column: 1;
  grid-row: 1 / span 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 36px;
  border-color: color-mix(in srgb, var(--renk) 50%, transparent);
  background:
    radial-gradient(90% 60% at 0% 0%, color-mix(in srgb, var(--renk) 22%, transparent), transparent 65%),
    radial-gradient(80% 60% at 100% 100%, rgba(42, 19, 128, 0.45), transparent 70%),
    var(--yuzey);
}
.platformlar.algilandi .platform.one .platform-ikon { width: 52px; height: 52px; color: var(--renk); }
.platformlar.algilandi .platform.one h3 { margin-top: 22px; font-size: 28px; letter-spacing: -0.02em; }
.platformlar.algilandi .platform.one p { margin-top: 8px; max-width: 40ch; font-size: 17px; }
.platformlar.algilandi .platform.one .platform-eylem { margin-top: 28px; align-self: flex-start; }
.platformlar.algilandi .platform.one .dugme { min-height: 52px; padding: 0 28px; font-size: 17px; }
/* Surum satiri one cikan kartin dibine tasinir (site.js) */
.platformlar.algilandi .platform.one .surum { margin-top: auto; padding-top: 32px; font-size: 15px; }
.platformlar.algilandi .platform.one .dugme { background: var(--vurgu); border-color: var(--vurgu); color: #121317; }
.platformlar.algilandi .platform.one .dugme:hover { background: var(--vurgu-acik); }
.indir-not { margin-top: 28px; color: var(--soluk); font-size: 15px; }

/* ================= alt ================= */

.alt { border-top: 1px solid var(--cizgi); }
.alt-ic { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding-block: 36px 44px; }
.alt-ic .marka { font-size: 16px; }
.alt-menu { display: flex; gap: 20px; flex-wrap: wrap; margin-right: auto; }
.alt-menu a { color: var(--soluk); font-size: 15px; text-decoration: none; transition: color 0.2s; }
.alt-menu a:hover { color: var(--metin); }
.telif { color: var(--soluk); font-size: 14px; }

/* ================= hareket ================= */

@media (prefers-reduced-motion: no-preference) {
  .kahraman-yazi > * { animation: yuksel 0.8s var(--yavas) both; }
  .kahraman-yazi > :nth-child(2) { animation-delay: 0.08s; }
  .kahraman-yazi > :nth-child(3) { animation-delay: 0.16s; }
  .kahraman-gorsel { animation: kay 1s 0.12s var(--yavas) both; }
}
/* Bolumler ekrana girerken belirir: tarayicinin kaydirma zaman cizelgesi (betik yok). Desteklemeyen
   tarayicida ve hareket azaltma acikken icerik hep gorunur. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .belir > * { animation: belir linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
  }
}
@keyframes belir { from { opacity: 0; transform: translateY(32px); } }
@keyframes yuksel { from { opacity: 0; transform: translateY(18px); } }
@keyframes kay { from { opacity: 0; transform: translateX(40px); } }

/* ================= dar ekran ================= */

@media (max-width: 900px) {
  .kahraman { grid-template-columns: 1fr; min-height: 0; padding-top: 40px; gap: 40px; }
  .giris { max-width: 36ch; }
  .kahraman-gorsel { margin-right: calc(-1 * var(--yan)); }
  .ses { grid-template-columns: 1fr; }
  .ses-gorsel { order: 2; width: min(100%, 300px); }
  .bento { grid-template-columns: 1fr; grid-template-areas: 'sunucu' 'anket' 'ekran' 'konu' 'arkadas'; }
  .hucre-sunucu, .hucre-anket { grid-template-columns: 1fr; }
  .hucre-sunucu img { justify-self: start; max-width: 260px; }
  .platformlar, .platformlar.algilandi { grid-template-columns: 1fr; }
  .platformlar.algilandi .platform, .platformlar.algilandi .platform.one { grid-column: 1; grid-row: auto; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .menu-baglanti { display: none; }
  .eylemler .dugme { flex: 1 1 100%; }
  .hucre { padding: 22px; }
  .hucre-arkadas { flex-direction: column; align-items: flex-start; }
  .platform { padding: 22px; }
  .platformlar.algilandi .platform.one { padding: 24px; }
}

/* ================= 404 ================= */

.bulunamadi { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0; padding-block: 64px; }
.bulunamadi h1 { margin-top: 48px; font-size: clamp(40px, 6vw, 64px); letter-spacing: -0.04em; line-height: 1.05; }