/* VrenaOS tanıtım sitesi.
   Panelin görsel dilinden türüyor: aynı kağıt zemin, aynı marka tonu
   (oklch 258). Fark, buranın okunmak için var olması — panel çalışmak için.
   Bu yüzden ölçek karşıtlığı ve boşluk ritmi panelden çok daha serbest. */

:root {
  /* Panelle ortak jeton seti. */
  --kagit:        oklch(0.99 0.002 250);
  --yuzey:        oklch(1 0 0);
  --cizgi:        oklch(0.91 0.005 250);
  --cizgi-koyu:   oklch(0.84 0.008 250);
  --metin:        oklch(0.24 0.012 250);
  --soluk:        oklch(0.50 0.012 250);
  --silik:        oklch(0.64 0.010 250);
  --marka:        oklch(0.52 0.16 258);
  --marka-yumus:  oklch(0.95 0.03 258);
  --iyi:          oklch(0.52 0.13 155);
  --uyari:        oklch(0.58 0.13 65);

  /* Ters bölüm — "hat koptuğunda". Sayfanın tek koyu alanı olması bilerek:
     anlatının kırılma noktası orası. */
  --gece:         oklch(0.21 0.022 262);
  --gece-yuzey:   oklch(0.26 0.026 262);
  --gece-metin:   oklch(0.96 0.005 250);
  --gece-soluk:   oklch(0.74 0.015 255);
  --gece-marka:   oklch(0.78 0.14 258);

  /* Akışkan tipografi. Ölçek karşıtlığı sayfanın ana hiyerarşi aracı. */
  --olcek-dev:    clamp(2.6rem, 1.1rem + 6.4vw, 6.5rem);
  --olcek-buyuk:  clamp(1.9rem, 1.1rem + 3.1vw, 3.5rem);
  --olcek-orta:   clamp(1.15rem, 0.98rem + 0.7vw, 1.4rem);
  --olcek-govde:  clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --olcek-kucuk:  0.83rem;

  --bolum-bosluk: clamp(4.5rem, 3rem + 6vw, 9.5rem);
  --kusak-en:     73rem;
  --yaslama:      clamp(1.25rem, 0.6rem + 2.6vw, 3rem);

  --gecis:        180ms cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

body {
  margin: 0;
  background: var(--kagit);
  color: var(--metin);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: var(--olcek-govde);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: Fraunces, ui-serif, Georgia, "Times New Roman", serif;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

a { color: inherit; }

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

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--marka-yumus);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}

.atla {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--metin);
  color: var(--kagit);
  padding: 0.7rem 1.1rem;
  z-index: 10;
}
.atla:focus { left: 0; }

.kusak {
  width: 100%;
  max-width: var(--kusak-en);
  margin-inline: auto;
  padding-inline: var(--yaslama);
}

.soluk { color: var(--soluk); }

/* --------------------------------------------------------------- üst bar */

.ust {
  position: sticky;
  top: 0;
  z-index: 5;
  background: color-mix(in oklab, var(--kagit) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cizgi);
}

.ust-ic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4rem;
}

.marka {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: Fraunces, ui-serif, Georgia, serif;
  font-weight: 700;
  font-size: 1.16rem;
  letter-spacing: -0.02em;
  text-decoration: none;
}

/* Marka imi: arenadaki istasyon. Logo yerine geçen tek işaret. */
.marka-im {
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  background: var(--marka);
  box-shadow: 0 0 0 4px var(--marka-yumus);
  flex: none;
}

.ust nav {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.9rem);
}

.ust nav a {
  text-decoration: none;
  font-size: var(--olcek-kucuk);
  letter-spacing: 0.02em;
  color: var(--soluk);
  transition: color var(--gecis);
}
.ust nav a:hover { color: var(--metin); }

@media (max-width: 40rem) {
  .ust nav a:not(.dugme) { display: none; }
}

/* --------------------------------------------------------------- düğme */

.dugme {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--metin);
  color: var(--kagit);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  padding: 0.72rem 1.35rem;
  border-radius: 999px;
  border: 1px solid var(--metin);
  transition: transform var(--gecis), background var(--gecis), box-shadow var(--gecis);
}
.dugme:hover {
  background: var(--marka);
  border-color: var(--marka);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px -12px var(--marka);
}
.dugme:active { transform: translateY(0); }

.dugme-ince {
  background: transparent;
  color: var(--metin);
  border-color: var(--cizgi-koyu);
  padding: 0.45rem 1rem;
}
.dugme-ince:hover { color: var(--kagit); }

.dugme-buyuk {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.2rem);
  padding: 1rem 2rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.bag-ok {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
  font-size: 0.92rem;
  color: var(--soluk);
  border-bottom: 1px solid var(--cizgi-koyu);
  padding-bottom: 0.2rem;
  transition: color var(--gecis), border-color var(--gecis);
}
.bag-ok::after { content: "→"; transition: transform var(--gecis); }
.bag-ok:hover { color: var(--marka); border-color: var(--marka); }
.bag-ok:hover::after { transform: translateX(3px); }

/* ------------------------------------------------------------ kahraman */

.kahraman {
  padding-top: clamp(3.5rem, 2rem + 7vw, 8rem);
  padding-bottom: clamp(2.5rem, 1rem + 4vw, 5rem);
  position: relative;
  overflow: hidden;
}

/* Zemine çok hafif bir ışık: düz beyaz bir sayfadan kaçınmak için,
   ama okunurluğu bozmayacak kadar sönük. */
.kahraman::before {
  content: "";
  position: absolute;
  inset: -40% 30% auto -20%;
  height: 120%;
  background: radial-gradient(60% 50% at 30% 30%,
              color-mix(in oklab, var(--marka) 11%, transparent), transparent 70%);
  pointer-events: none;
}

.kahraman-ic { position: relative; max-width: 56rem; }

.ustbaslik {
  font-size: var(--olcek-kucuk);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--marka);
  margin-bottom: 1.4rem;
}

.kahraman h1 {
  font-size: var(--olcek-dev);
  margin-bottom: 1.8rem;
}
.kahraman h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--soluk);
}

.giris {
  font-size: var(--olcek-orta);
  color: var(--soluk);
  max-width: 44ch;
  margin-bottom: 2.4rem;
}

.eylemler {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
}

/* Çapa şeridi: dört sütun, hairline ayraçlarla. Kart değil — kart olsa
   sayfanın geri kalanıyla aynı ağırlığa çıkardı. */
.capa {
  list-style: none;
  margin: clamp(3rem, 2rem + 3vw, 5rem) 0 0;
  padding: 1.6rem 0 0;
  border-top: 1px solid var(--cizgi-koyu);
  display: grid;
  gap: 1.5rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.capa li { display: flex; flex-direction: column; gap: 0.3rem; }
.capa strong { font-weight: 600; font-size: 0.97rem; }
.capa span { color: var(--silik); font-size: var(--olcek-kucuk); line-height: 1.5; }

/* --------------------------------------------------------------- bölüm */

.bolum { padding-block: var(--bolum-bosluk); }
.bolum.ince { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }

.bolum-basi { max-width: 38rem; }
.bolum-basi.genis { max-width: 46rem; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.bolum-basi h2 { font-size: var(--olcek-buyuk); margin-bottom: 1.1rem; }
.bolum-basi .soluk { font-size: var(--olcek-orta); }

/* Asimetrik ikili: başlık dar, içerik geniş. Eşit iki sütun olsaydı
   hangisinin önce okunacağı belirsiz kalırdı. */
.ikili, .ikili-ters {
  display: grid;
  gap: clamp(2.5rem, 2rem + 4vw, 5.5rem);
  align-items: start;
}
@media (min-width: 58rem) {
  .ikili { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .ikili-ters { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .ikili .bolum-basi, .ikili-ters .bolum-basi { position: sticky; top: 6rem; }
}

/* ---------------------------------------------------------------- akış */

.akis {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: adim;
}
.akis li {
  counter-increment: adim;
  position: relative;
  padding: 1.6rem 0 1.6rem 3.4rem;
  border-top: 1px solid var(--cizgi);
}
.akis li:first-child { border-top: 0; padding-top: 0; }
.akis li::before {
  content: counter(adim, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.75rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--olcek-kucuk);
  color: var(--marka);
  letter-spacing: 0.04em;
}
.akis li:first-child::before { top: 0.15rem; }
.akis h3 { font-size: 1.24rem; margin-bottom: 0.4rem; }
.akis p { color: var(--soluk); max-width: 46ch; }

/* --------------------------------------------------- ters bölüm (kopuş) */

.ters {
  background: var(--gece);
  color: var(--gece-metin);
}
.ters .ustbaslik { color: var(--gece-marka); }
.ters .soluk { color: var(--gece-soluk); }

.merdiven {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: color-mix(in oklab, var(--gece-metin) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--gece-metin) 14%, transparent);
  border-radius: 6px;
  overflow: hidden;
}
@media (min-width: 52rem) {
  .merdiven { grid-template-columns: repeat(3, 1fr); }
}

.merdiven li {
  background: var(--gece);
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.4rem);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  transition: background var(--gecis);
}
.merdiven li:hover { background: var(--gece-yuzey); }

/* Üçüncü kademe anlatının can alıcı yeri: rengi ondan alıyor. */
.merdiven li.vurgu { background: var(--gece-yuzey); }
.merdiven li.vurgu::before {
  content: "";
  display: block;
  height: 2px;
  width: 2.5rem;
  background: var(--gece-marka);
  margin-bottom: 0.4rem;
}

.kademe {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--olcek-kucuk);
  letter-spacing: 0.1em;
  color: var(--gece-marka);
}
.merdiven h3 { font-size: 1.3rem; }
.merdiven p { color: var(--gece-soluk); font-size: 0.97rem; }
.merdiven strong { color: var(--gece-metin); font-weight: 600; }

.dipnot {
  margin-top: 2rem;
  color: var(--gece-soluk);
  font-size: 0.94rem;
  max-width: 52ch;
}
.dipnot em { color: var(--gece-metin); font-style: normal; font-weight: 600; }

/* ------------------------------------------------------------ form kartı */

.form-kart { margin: 0; }
.form-kart-ic {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: 10px;
  padding: clamp(1.4rem, 1rem + 1.4vw, 2.2rem);
  box-shadow: 0 24px 50px -34px oklch(0.24 0.012 250 / 0.5);
  /* Hafif eğim: sayfadaki tek "nesne" hissi veren öğe. */
  rotate: -1.1deg;
}
.form-kart-ust, .form-kart-alt {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--silik);
}
.form-kart-ust { margin-bottom: 1.2rem; }
.form-kart-alt { margin-top: 0.9rem; }

.form-satir {
  height: 8px;
  border-radius: 4px;
  background: var(--cizgi);
  margin-bottom: 0.7rem;
}
.form-satir.kisa { width: 62%; }

.form-imza {
  margin-top: 1.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--cizgi-koyu);
  color: var(--marka);
}
.form-imza svg { display: block; width: 100%; height: auto; }

/* ------------------------------------------------------------- teknik */

.teknik {
  margin: 0;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  border-top: 1px solid var(--cizgi);
}
.teknik > div {
  padding: 1.5rem 1.6rem 1.5rem 0;
  border-bottom: 1px solid var(--cizgi);
}
.teknik dt {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.35rem;
}
.teknik dd {
  margin: 0;
  color: var(--soluk);
  font-size: 0.93rem;
  line-height: 1.6;
}

/* -------------------------------------------------------------- durum */

.durum-tablo {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--cizgi-koyu);
}
.durum-satir {
  display: grid;
  gap: 0.6rem 1.8rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--cizgi);
  align-items: start;
}
@media (min-width: 46rem) {
  .durum-satir { grid-template-columns: 9rem 1fr; }
}
.durum-satir p { color: var(--soluk); }

.rozet {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  white-space: nowrap;
  justify-self: start;
}
.rozet::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.rozet.hazir { color: var(--iyi);   background: oklch(0.95 0.04 155); }
.rozet.yolda { color: var(--silik); background: oklch(0.95 0.004 250); }
.rozet.acik  { color: var(--uyari); background: oklch(0.96 0.05 75); }

/* ------------------------------------------------------------ kapanış */

.kapanis {
  border-top: 1px solid var(--cizgi);
  background: linear-gradient(180deg, var(--marka-yumus), var(--kagit) 62%);
  text-align: center;
}
.kapanis-ic {
  max-width: 40rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}
.kapanis h2 { font-size: var(--olcek-buyuk); }
.kapanis .dugme { margin-top: 0.8rem; }

/* ---------------------------------------------------------------- alt */

.alt {
  border-top: 1px solid var(--cizgi);
  padding-block: 2rem;
}
.alt-ic {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--olcek-kucuk);
}
.alt p { margin: 0; }

/* --------------------------------------------------------------- işaret */

.isaret {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}
.isaret li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--soluk);
  font-size: 0.97rem;
}
.isaret li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.5rem;
  height: 1px;
  background: var(--marka);
}