/* BYS Ofis tanitim sayfasi. Gorunum dili YKTERA sitesini izler; dis kaynak yok, sistem yazi tipleri. */
:root {
  --zemin: #070c18;
  --zemin-2: #0b1326;
  --yuzey: #121c33;
  --metin: #eef3fa;
  --metin-2: #93a3bb;
  --cizgi: rgba(148, 180, 255, 0.11);
  --vurgu: #14c7b4;
  --vurgu-yazi: #14c7b4;
  --vurgu-metin: #0b1326;
  --parilti: rgba(20, 199, 180, 0.16);
  --baslik-ust: #ffffff;
  --baslik-alt: #aab4c8;
  --ust-zemin: rgba(7, 12, 24, 0.72);
  --egri: cubic-bezier(0.22, 1, 0.36, 1);
  --kap: 1180px;
  --kenar: clamp(16px, 5vw, 56px);
  --font: "Segoe UI Variable Display", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
    --zemin: #f5f7fa;
    --zemin-2: #e9eef5;
    --yuzey: #ffffff;
    --metin: #0b1326;
    --metin-2: #556072;
    --cizgi: rgba(10, 30, 70, 0.10);
    --vurgu: #07756a;
    --vurgu-yazi: #07756a;
    --vurgu-metin: #ffffff;
    --parilti: rgba(10, 143, 130, 0.12);
    --baslik-ust: #0b1326;
    --baslik-alt: #3f4c66;
    --ust-zemin: rgba(245, 247, 250, 0.78);
    color-scheme: light;
  }
}

*, *::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-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin: 0; }
a { color: var(--vurgu-yazi); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 4px; border-radius: 8px; }
img { max-width: 100%; height: auto; display: block; }

.kap { max-width: var(--kap); margin: 0 auto; padding: 0 var(--kenar); }
.dar { max-width: 860px; text-align: center; }

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

/* Ust serit */
.ust {
  position: sticky; top: 0; z-index: 50;
  background: var(--ust-zemin);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--cizgi);
}
.ust-ic { max-width: var(--kap); margin: 0 auto; padding: 0 var(--kenar); height: 60px; display: flex; align-items: center; gap: 32px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--metin); text-decoration: none; font-weight: 700; letter-spacing: -0.01em; }
.logo-zemin { fill: var(--vurgu); }
.logo-ic { fill: var(--vurgu-metin); }
.menu { display: flex; gap: 4px; list-style: none; margin: 0 0 0 auto; padding: 0; }
.menu a { display: block; padding: 8px 12px; border-radius: 999px; color: var(--metin-2); text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: color 0.25s, background-color 0.25s; }
.menu a:hover { color: var(--metin); background: var(--cizgi); }
@media (max-width: 680px) { .menu { display: none; } }

/* Yazi hiyerarsisi */
.ust-yazi {
  font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--vurgu-yazi); margin-bottom: 18px;
}
.dev, h2 {
  font-weight: 700; letter-spacing: -0.035em; line-height: 1.02;
  background: linear-gradient(180deg, var(--baslik-ust) 0%, var(--baslik-alt) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dev { font-size: clamp(42px, 7.4vw, 104px); padding-bottom: 0.1em; }
h2 { font-size: clamp(34px, 5.2vw, 68px); margin-bottom: 24px; padding-bottom: 0.1em; }
@media (forced-colors: active) { .dev, h2 { background: none; color: CanvasText; } }
h3 { font-size: 1.25rem; font-weight: 650; letter-spacing: -0.015em; margin-bottom: 10px; }
.bolum-giris { font-size: clamp(18px, 1.6vw, 21px); color: var(--metin-2); max-width: 40em; }
.dar .bolum-giris { margin-left: auto; margin-right: auto; }

/* Kahraman */
.kahraman {
  position: relative; min-height: min(calc(100vh - 60px), 980px); min-height: min(calc(100svh - 60px), 980px);
  display: grid; place-items: center; text-align: center; padding: 96px 0 120px;
  background: radial-gradient(60% 55% at 50% 72%, var(--parilti), transparent 70%);
  overflow: hidden;
}
.kahraman .dev { max-width: 14em; margin: 0 auto; animation: belir 1.1s var(--egri) both; }
.giris { max-width: 34em; margin: 28px auto 0; font-size: clamp(18px, 1.7vw, 22px); color: var(--metin-2); animation: belir 1.1s 0.15s var(--egri) both; }
.eylemler { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 40px; animation: belir 1.1s 0.3s var(--egri) both; }
.kaydir {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--metin-2); text-decoration: none;
  padding-top: 44px;
}
.kaydir::before {
  content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 34px;
  background: linear-gradient(var(--cizgi), var(--vurgu)); animation: damla 2.2s var(--egri) infinite;
}

/* Dugmeler */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px; border-radius: 999px;
  background: var(--vurgu); color: var(--vurgu-metin); font-weight: 600; font-size: 16px;
  text-decoration: none; border: 1px solid transparent;
  transition: transform 0.4s var(--egri), filter 0.25s;
}
.dugme:hover { filter: brightness(1.08); transform: translateY(-1px); }
.dugme.ikincil { background: transparent; color: var(--metin); border-color: var(--cizgi); }
.dugme.ikincil:hover { border-color: var(--vurgu); }

/* Bolumler */
.bolum { padding: clamp(88px, 12vw, 160px) 0; }
.koyu-bant { background: var(--zemin-2); }

.izgara { display: grid; gap: 20px; margin-top: 56px; }
@media (min-width: 760px) {
  .izgara.uc { grid-template-columns: repeat(3, 1fr); }
  .izgara.iki { grid-template-columns: repeat(2, 1fr); }
}
.kutu {
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 22px; padding: 32px;
  transition: border-color 0.3s, transform 0.5s var(--egri);
}
.kutu:hover { border-color: var(--vurgu); transform: translateY(-2px); }
.kutu p { color: var(--metin-2); }
.simge {
  width: 48px; height: 48px; padding: 12px; margin-bottom: 22px; border-radius: 14px;
  background: var(--parilti); fill: none; stroke: var(--vurgu-yazi); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* Ekran goruntuleri */
.ekran { margin: 64px 0 0; }
.ekran img {
  width: 100%; border-radius: 22px; border: 1px solid var(--cizgi); background: var(--yuzey);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.45);
}
.ekran figcaption { margin-top: 14px; font-size: 0.9rem; color: var(--metin-2); text-align: center; }

/* Adim adim hikaye */
.hikaye { list-style: none; margin: 72px 0 0; padding: 0; display: grid; gap: clamp(64px, 9vw, 120px); }
.adim { display: grid; gap: 28px; align-items: center; }
.adim .ekran { margin: 0; }
.adim-no {
  display: block; font-size: clamp(56px, 7vw, 96px); font-weight: 700; letter-spacing: -0.04em; line-height: 1;
  color: var(--vurgu-yazi); opacity: 0.9; margin-bottom: 14px;
}
.adim h3 { font-size: clamp(26px, 2.8vw, 36px); letter-spacing: -0.025em; }
.adim p { color: var(--metin-2); font-size: clamp(17px, 1.5vw, 20px); max-width: 30em; }
@media (min-width: 920px) {
  .adim { grid-template-columns: 5fr 7fr; gap: 64px; }
  .adim:nth-child(even) .adim-metin { order: 2; }
  .adim:not(:has(.ekran)) { grid-template-columns: 1fr; }
  .adim:not(:has(.ekran)) .adim-metin { order: 0; }
}

/* Iki kolon */
.iki-kolon { display: grid; gap: 48px; align-items: center; }
@media (min-width: 920px) { .iki-kolon { grid-template-columns: 1fr 1fr; gap: 72px; } }
.fren-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.fren-liste li {
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 20px; padding: 20px 24px; color: var(--metin-2);
}
.fren-liste strong { color: var(--metin); font-weight: 650; }
.duz-liste { margin: 28px 0 0; padding-left: 1.2em; color: var(--metin-2); }
.duz-liste li { margin-bottom: 10px; }
.duz-liste li::marker { color: var(--vurgu); }

/* Cok makine cizimi */
.cizim { margin: 0; }
.cizim svg { width: 100%; max-width: 520px; height: auto; display: block; margin: 0 auto; }
.bag { fill: none; stroke: var(--vurgu); stroke-width: 2; stroke-dasharray: 6 6; opacity: 0.75; animation: akis 1.6s linear infinite; }
.depo { fill: var(--vurgu); }
.depo-ic { fill: none; stroke: var(--vurgu-metin); stroke-width: 2.4; stroke-linecap: round; }
.depo-nokta { fill: var(--vurgu-metin); }
.pc { fill: var(--yuzey); stroke: var(--cizgi); stroke-width: 1.5; }
.pc-ayak { fill: none; stroke: var(--metin-2); stroke-width: 3; stroke-linecap: round; opacity: 0.5; }
.mk-ad { fill: var(--metin-2); font: 600 15px var(--font); text-anchor: middle; }
.isik { fill: var(--vurgu); }
.i1 { animation: nabiz 2s ease-in-out infinite; }
.i2 { animation: nabiz 2s 1s ease-in-out infinite; }

/* Motor etiketleri */
.etiketler { list-style: none; margin: 40px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.etiketler li {
  padding: 12px 22px; border: 1px solid var(--cizgi); border-radius: 999px; background: var(--yuzey);
  font-size: clamp(16px, 1.5vw, 19px); font-weight: 500; transition: border-color 0.3s;
}
.etiketler li:hover { border-color: var(--vurgu); }
.not { margin-top: 20px; color: var(--metin-2); }
.dipnot { margin-top: 40px; font-size: 0.875rem; color: var(--metin-2); max-width: 52em; }

/* Durum ve YKTERA */
.durum { background: radial-gradient(50% 60% at 50% 50%, var(--parilti), transparent 70%); }
.yktera { background: var(--zemin-2); border-top: 1px solid var(--cizgi); }
.yktera blockquote {
  margin: 40px auto 0; padding: 32px 36px; max-width: 34em;
  border-radius: 28px; background: var(--yuzey); border: 1px solid var(--cizgi);
}
.yktera blockquote p { font-size: clamp(18px, 1.8vw, 22px); font-weight: 500; letter-spacing: -0.01em; }
.yktera blockquote footer {
  margin-top: 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vurgu-yazi);
}

/* Alt bilgi */
.alt { border-top: 1px solid var(--cizgi); padding: 32px 0; color: var(--metin-2); font-size: 0.9rem; }
.alt-ic { max-width: var(--kap); margin: 0 auto; padding: 0 var(--kenar); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.alt strong { color: var(--metin); }

/* Hareket */
@keyframes belir { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes nabiz { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes akis { to { stroke-dashoffset: -24; } }
@keyframes damla { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* Kaydirdikca belirme: yalniz destekleyen tarayicilarda; desteklemeyende icerik dogrudan gorunur. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .goster {
      animation: belir linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}