/* ==========================================================================
   BASE — tipografi + yerlesim primitifleri
   Bu dosya "hazir parcalar" katmani. Site-ozel stiller site.css'e yazilir.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Gövde
   -------------------------------------------------------------------------- */
body {
  background-color: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
}

::selection {
  background-color: var(--c-accent);
  color: var(--c-inverse-text);
}

:focus-visible {
  outline-color: var(--c-focus);
}

/* --------------------------------------------------------------------------
   Tipografi yardimcilari
   -------------------------------------------------------------------------- */
.t-hero,
.t-3xl,
.t-2xl,
.t-xl,
.t-lg {
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.t-hero { font-size: var(--fs-hero); }
.t-3xl  { font-size: var(--fs-3xl); }
.t-2xl  { font-size: var(--fs-2xl); }
.t-xl   { font-size: var(--fs-xl); }
.t-lg   { font-size: var(--fs-lg); line-height: var(--lh-snug); }

.t-md   { font-size: var(--fs-md); line-height: var(--lh-snug); }
.t-base { font-size: var(--fs-base); }
.t-sm   { font-size: var(--fs-sm); }
.t-xs   { font-size: var(--fs-xs); }

/* Bolum ustu kucuk etiket — "01 / HAKKIMIZDA" gibi */
.t-label {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.t-center { text-align: center; }
.t-muted { color: var(--c-text-muted); }
.t-accent { color: var(--c-accent); }
.t-balance { text-wrap: balance; }

/* Uzun metin blogu — satir uzunlugunu sinirla */
.t-prose {
  max-width: var(--width-narrow);
}

.t-prose > * + * {
  margin-top: var(--s-5);
}

/* --------------------------------------------------------------------------
   Yerlesim primitifleri
   -------------------------------------------------------------------------- */

/* Ortalanmis kapsayici */
.container {
  width: 100%;
  max-width: var(--width-content);
  margin-inline: auto;
  padding-inline: var(--space-gutter);
}

.container--narrow { max-width: var(--width-narrow); }
.container--wide   { max-width: var(--width-wide); }
.container--full   { max-width: none; }

/* Dikey bolum bosluğu */
.section {
  padding-block: var(--space-section);
}

.section--tight { padding-block: calc(var(--space-section) * 0.5); }

/* Koyu bolum — token'lari ters cevirir, ic elemanlar kendiliginden uyar */
.section--inverse {
  background-color: var(--c-inverse-bg);
  --c-text: var(--c-inverse-text);
  --c-text-muted: var(--c-inverse-muted);
  --c-border: rgb(255 255 255 / 0.14);
  color: var(--c-inverse-text);
}

/* Dikey yigin — kardesler arasi esit bosluk */
.stack > * + * {
  margin-top: var(--stack-space, var(--s-5));
}

.stack--sm { --stack-space: var(--s-3); }
.stack--lg { --stack-space: var(--s-7); }

/* Otomatik sarilan izgara */
.grid {
  display: grid;
  gap: var(--grid-gap, var(--s-6));
}

.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }

.grid--gap-sm { --grid-gap: var(--s-3); }
.grid--gap-lg { --grid-gap: var(--s-8); }
.grid--gap-none { --grid-gap: 0; }

/* Yatay dizilim */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-gap, var(--s-4));
  align-items: center;
}

.cluster--between { justify-content: space-between; }
.cluster--center  { justify-content: center; }

.cluster--gap-sm { --cluster-gap: var(--s-2); }
.cluster--gap-lg { --cluster-gap: var(--s-6); }

/* Ikiye bolunmus bolum (metin | gorsel) */
.split {
  display: grid;
  gap: var(--s-7);
  align-items: center;
}

@media (min-width: 48rem) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-8);
  }
  .split--reverse > :first-child { order: 2; }
}

/* --------------------------------------------------------------------------
   Gorsel oran kutulari
   -------------------------------------------------------------------------- */
.media {
  position: relative;
  overflow: hidden;
  background-color: var(--c-border);
}

.media > img,
.media > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media--square    { aspect-ratio: 1; }
.media--portrait  { aspect-ratio: 3 / 4; }
.media--landscape { aspect-ratio: 4 / 3; }
.media--wide      { aspect-ratio: 16 / 9; }
.media--tall      { aspect-ratio: 2 / 3; }

/* --------------------------------------------------------------------------
   Butonlar
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-6);
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out-quart),
    color var(--dur-fast) var(--ease-out-quart),
    transform var(--dur-fast) var(--ease-out-quart);
}

.btn--primary {
  background-color: var(--c-accent);
  color: #fff;
}

.btn--primary:hover {
  background-color: var(--c-accent-hover);
}

.btn--ghost {
  border: 1px solid var(--c-border);
  color: var(--c-text);
}

.btn--ghost:hover {
  background-color: var(--c-text);
  color: var(--c-bg);
}

.btn:active {
  transform: scale(0.97);
}

/* Altini cizen link — soldan saga acilir */
.link-underline {
  position: relative;
  display: inline-block;
}

.link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-base) var(--ease-out-expo);
}

.link-underline:hover::after,
.link-underline:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* --------------------------------------------------------------------------
   Erisilebilirlik yardimcilari
   -------------------------------------------------------------------------- */

/* Ekran okuyucuya gorunur, goze gorunmez */
.visually-hidden:not(:focus):not(:active) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Klavye kullanicisi icin "icerige atla" */
.skip-link {
  position: absolute;
  top: var(--s-4);
  left: var(--s-4);
  z-index: var(--z-cursor);
  padding: var(--s-3) var(--s-5);
  background-color: var(--c-text);
  color: var(--c-bg);
  border-radius: var(--radius-md);
  transform: translateY(-200%);
  transition: transform var(--dur-fast) var(--ease-out-quart);
}

.skip-link:focus {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Reveal — baslangic durumlari
   JS yuklenemezse icerik yine de gorunur olmali (progressive enhancement).
   Bu yuzden gizleme SADECE .js sinifi <html>'e eklendiginde uygulanir.
   -------------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  will-change: opacity, transform;
}

.js [data-reveal="up"]    { transform: translateY(2.5rem); }
.js [data-reveal="down"]  { transform: translateY(-2.5rem); }
.js [data-reveal="left"]  { transform: translateX(2.5rem); }
.js [data-reveal="right"] { transform: translateX(-2.5rem); }
.js [data-reveal="scale"] { transform: scale(0.94); }
.js [data-reveal="fade"]  { transform: none; }

/* Hareket azaltma acikken hicbir sey gizlenmez */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   Sayfa gecis perdesi
   --------------------------------------------------------------------------
   Perde sayfayi KAPALI baslar ve CSS animasyonuyla acilir. JS'e bagli degil —
   betik coker veya gec kalirsa kullanici siyah ekranda kalmaz.
   Cikis animasyonunu JS yonetir (bkz. js/page.js).
   -------------------------------------------------------------------------- */
.curtain {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 600;
  background-color: var(--c-inverse-bg);
  pointer-events: none;
}

.js .curtain {
  display: block;
  animation: curtain-out var(--dur-slow) var(--ease-in-out-quart) forwards;
}

.js .curtain.is-leaving {
  animation: curtain-in var(--dur-base) var(--ease-in-out-quart) forwards;
}

@keyframes curtain-out {
  from { transform: translateY(0); }
  to   { transform: translateY(-100%); }
}

@keyframes curtain-in {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* Hareket azaltma acikken perde hic gorunmez */
@media (prefers-reduced-motion: reduce) {
  .js .curtain { display: none; }
}

/* --------------------------------------------------------------------------
   Aktif menu ogesi
   -------------------------------------------------------------------------- */
[aria-current="page"] {
  color: var(--c-accent);
}

/* Aktif linkin alt cizgisi hep acik dursun */
.link-underline[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* --------------------------------------------------------------------------
   Lenis yumusak kaydirma — gerekli stiller
   -------------------------------------------------------------------------- */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
  overflow: hidden;
}