/* ==========================================================================
   DIJITAL BANDIRMA — db-core.css
   Design token'lar, reset, temel tipografi, yerleşim kabukları, film atmosferi.
   Bağımsız custom kütüphane. Bootstrap/Tailwind YOK.
   ========================================================================== */

/* --------------------------------------------------------------------------
   01 — TOKEN'LAR
   -------------------------------------------------------------------------- */
:root {
  /* Yüzeyler — siyah tek bir değer değil, katmanlı bir karanlık */
  --db-void:        #050505;
  --db-black:       #080808;
  --db-surface:     #0d0d0d;
  --db-surface-2:   #131313;
  --db-pitch:       #000000;

  /* Çizgi ve gri kademeleri */
  --db-line:        #1c1c1c;
  --db-line-soft:   rgba(242, 240, 235, 0.10);
  --db-line-faint:  rgba(242, 240, 235, 0.055);
  --db-graphite:    #3a3a3a;
  --db-ash:         #6e6b66;
  --db-smoke:       #9a9691;

  /* Metin — sıcak kırık beyaz */
  --db-bone:        #F2F0EB;
  --db-bone-dim:    rgba(242, 240, 235, 0.62);
  --db-bone-mute:   rgba(242, 240, 235, 0.38);
  --db-bone-ghost:  rgba(242, 240, 235, 0.16);

  /* Aksan — sinematik kırmızı. Büyük yüzeylerde DEĞİL, vurguda kullanılır. */
  --db-red:         #DF0A0A;
  --db-red-hot:     #EF1010;
  --db-red-deep:    #B00707;
  --db-red-glow:    rgba(223, 10, 10, 0.34);
  --db-red-wash:    rgba(223, 10, 10, 0.08);

  /* Tipografi aileleri */
  --db-font-display: 'Archivo', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --db-font-body:    'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --db-font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Display genişlik ekseni (Archivo wdth: 62–125).
     68 belirgin condensed verir ama okunurluğu bozmaz. */
  --db-wdth-display: 68%;

  /* Akışkan tipografi ölçeği.
     Hero başlığı yalnızca genişliğe bağlanırsa alçak ekranlarda taşar;
     bu yüzden viewport yüksekliğiyle de sınırlanır. */
  --db-fs-mega:    clamp(3rem, min(11.5vw, 15svh), 12rem);
  --db-fs-display: clamp(2.5rem, 7.4vw, 8rem);
  --db-fs-title:   clamp(1.85rem, 4.2vw, 3.75rem);
  --db-fs-sub:     clamp(1.35rem, 2.4vw, 2rem);
  --db-fs-lede:    clamp(1.0625rem, 1.5vw, 1.375rem);
  --db-fs-body:    clamp(0.9375rem, 1.02vw, 1.0625rem);
  --db-fs-small:   0.8125rem;
  --db-fs-meta:    0.6875rem;
  --db-fs-micro:   0.625rem;

  /* Ritim */
  --db-gutter:  clamp(1.25rem, 4.5vw, 4.5rem);
  --db-bay:     clamp(5rem, 11vh, 9rem);
  --db-bay-lg:  clamp(8rem, 17vh, 15rem);
  /* Header yüksekliği logoya göre belirlenir: marka okunur bir ölçekte
     durmalı, altında ve üstünde nefes payı kalmalı. */
  --db-header-h: 84px;

  /* Kap genişlikleri — her section aynı genişlikte OLMAMALI */
  --db-w-shell:  1780px;
  --db-w-wide:   1420px;
  --db-w-mid:    1080px;
  --db-w-narrow: 760px;
  --db-w-slim:   580px;

  /* Hareket */
  --db-ease-out: cubic-bezier(0.16, 1, 0.30, 1);
  --db-ease-io:  cubic-bezier(0.65, 0, 0.35, 1);
  --db-ease-in:  cubic-bezier(0.55, 0, 1, 0.45);
  --db-dur-1: 0.22s;
  --db-dur-2: 0.48s;
  --db-dur-3: 0.9s;
  --db-dur-4: 1.4s;

  /* Katman sırası */
  --db-z-base:    1;
  --db-z-sticky:  50;
  --db-z-header:  100;
  --db-z-overlay: 200;
  --db-z-grain:   900;
  --db-z-cursor:  950;
}

@media (min-width: 900px) {
  :root { --db-header-h: 108px; }
}

/* --------------------------------------------------------------------------
   02 — RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Sabit header'ın altına çapa atmayı engelle */
  scroll-padding-top: calc(var(--db-header-h) + 1.5rem);
}

body {
  margin: 0;
  background-color: var(--db-void);
  color: var(--db-bone);
  font-family: var(--db-font-body);
  font-size: var(--db-fs-body);
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: 0.002em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

img, video { height: auto; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  margin: 0;
}

button { cursor: pointer; }

a { color: inherit; text-decoration: none; }

address { font-style: normal; }

/* Erişilebilirlik: klavye odağı her zaman görünür */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--db-red);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection {
  background-color: var(--db-red);
  color: var(--db-bone);
}

/* Ekran okuyucu için gizli ama DOM'da mevcut */
.db-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* İçeriğe atla — klavye kullanıcısı için ilk durak */
.db-skip {
  position: absolute;
  top: 0; left: 0;
  z-index: calc(var(--db-z-overlay) + 10);
  transform: translateY(-120%);
  padding: 0.85rem 1.4rem;
  background-color: var(--db-red);
  color: var(--db-bone);
  font-family: var(--db-font-mono);
  font-size: var(--db-fs-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: transform var(--db-dur-1) var(--db-ease-out);
}
.db-skip:focus-visible { transform: translateY(0); outline-offset: -3px; }

/* --------------------------------------------------------------------------
   03 — TİPOGRAFİ
   Display = Archivo (değişken genişlik ekseni), condensed ve ağır kullanılır.
   -------------------------------------------------------------------------- */
.db-mega,
.db-display,
.db-title {
  font-family: var(--db-font-display);
  font-weight: 800;
  /* font-stretch değişken yazı tipinin wdth eksenini sürer;
     font-variation-settings ile ikiye bölmeye gerek yok. */
  font-stretch: var(--db-wdth-display);
  text-transform: uppercase;
  /* Türkçe büyük harflerde Ö Ü Ğ İ Ş noktaları cap-height'ın belirgin
     biçimde üstüne taşar. 0.86 gibi bir satır aralığı bunları bir üst
     satıra sokar; 0.94 sıkı duruşu korurken çakışmayı önler. */
  line-height: 0.94;
  letter-spacing: -0.018em;
  text-wrap: balance;
  margin: 0;
}

.db-mega    { font-size: var(--db-fs-mega); }
.db-display { font-size: var(--db-fs-display); }
.db-title   { font-size: var(--db-fs-title); line-height: 0.98; }

/* Daha geniş, daha sakin bir display varyantı — nefes gereken yerlerde */
.db-title--open {
  font-stretch: 100%;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.db-sub {
  font-family: var(--db-font-body);
  font-size: var(--db-fs-sub);
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: -0.01em;
  margin: 0;
}

.db-lede {
  font-size: var(--db-fs-lede);
  line-height: 1.5;
  color: var(--db-bone-dim);
  max-width: 46ch;
  margin: 0;
}

.db-body { max-width: 62ch; }
.db-body p + p { margin-top: 1.15em; }

/* Slate / metadata — prodüksiyon dilinin taşıyıcısı */
.db-meta {
  font-family: var(--db-font-mono);
  font-size: var(--db-fs-meta);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.185em;
  text-transform: uppercase;
  color: var(--db-bone-mute);
  margin: 0;
}

.db-meta--bright { color: var(--db-bone-dim); }
.db-meta--red    { color: var(--db-red); }
.db-meta--micro  { font-size: var(--db-fs-micro); letter-spacing: 0.22em; }

/* Vurgu işaretleri */
.db-red  { color: var(--db-red); }
.db-dim  { color: var(--db-bone-dim); }
.db-mute { color: var(--db-bone-mute); }

/* Kırmızı alt çizgi — tipografik highlight */
.db-underline {
  background-image: linear-gradient(var(--db-red), var(--db-red));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% 2px;
  padding-bottom: 0.06em;
}

/* --------------------------------------------------------------------------
   04 — YERLEŞİM KABUKLARI
   Bilinçli olarak farklı genişlikler: ritim buradan doğar.
   -------------------------------------------------------------------------- */
.db-shell, .db-wide, .db-mid, .db-narrow, .db-slim {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--db-gutter);
}

.db-shell  { max-width: var(--db-w-shell); }
.db-wide   { max-width: var(--db-w-wide); }
.db-mid    { max-width: var(--db-w-mid); }
.db-narrow { max-width: var(--db-w-narrow); }
.db-slim   { max-width: var(--db-w-slim); }

/* Kenardan kenara — hiçbir padding yok */
.db-bleed { width: 100%; max-width: none; padding-inline: 0; }

.db-section { position: relative; padding-block: var(--db-bay); }
.db-section--tall  { padding-block: var(--db-bay-lg); }
.db-section--flush { padding-block: 0; }
.db-section--black { background-color: var(--db-pitch); }
.db-section--raise { background-color: var(--db-surface); }

/* Bölümler arası saç teli ayraç */
.db-hairline {
  height: 1px;
  border: 0;
  margin: 0;
  background-color: var(--db-line-soft);
}

/* --------------------------------------------------------------------------
   05 — FİLM ATMOSFERİ
   Siyahı düz #050505 olmaktan çıkarıp "projeksiyon siyahı"na çevirir.
   -------------------------------------------------------------------------- */
.db-grain,
.db-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--db-z-grain);
}

.db-grain {
  /* Katman viewport'tan büyük tutuluyor: aşağıdaki animasyon onu ±%3
     kaydırdığı için tam viewport boyutunda olsaydı her karede kenarlarda
     örtülmeyen bir şerit açılır, screen karışımı almadığı için koyu bir
     perde gibi görünürdü. */
  inset: -10%;
  opacity: 0.055;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  will-change: transform;
  animation: db-grain-drift 0.72s steps(3, end) infinite;
}

@keyframes db-grain-drift {
  0%   { transform: translate3d(0, 0, 0); }
  33%  { transform: translate3d(-3%, 2%, 0); }
  66%  { transform: translate3d(2%, -3%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* Vignette header'ın ALTINDA kalır: navigasyonu ve logoyu karartmamalı.
   Grain ise en üstte durur, her şeyi tek bir film dokusunda birleştirir. */
.db-vignette {
  z-index: calc(var(--db-z-header) - 10);
  background: radial-gradient(
    ellipse 82% 68% at 50% 48%,
    transparent 0%,
    transparent 58%,
    rgba(0, 0, 0, 0.34) 100%
  );
}

/* --------------------------------------------------------------------------
   06 — KADRAJ İŞARETLERİ
   Gerçek bir kamera vizörüyle aynı işlev: çerçeveyi tarif eder.
   -------------------------------------------------------------------------- */
.db-marks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: var(--db-z-base);
}

.db-marks span {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1px solid var(--db-bone-ghost);
}
.db-marks span:nth-child(1) { top: 0;    left: 0;  border-right: 0; border-bottom: 0; }
.db-marks span:nth-child(2) { top: 0;    right: 0; border-left: 0;  border-bottom: 0; }
.db-marks span:nth-child(3) { bottom: 0; left: 0;  border-right: 0; border-top: 0; }
.db-marks span:nth-child(4) { bottom: 0; right: 0; border-left: 0;  border-top: 0; }

@media (min-width: 900px) {
  .db-marks span { width: 26px; height: 26px; }
}

/* --------------------------------------------------------------------------
   07 — HAREKET TERCİHİ
   Kullanıcı azaltılmış hareket istiyorsa: her şey anında son haline geçer.
   -------------------------------------------------------------------------- */
/* db-force-motion sınıfı <html> üzerindeyken bu blok devre dışı kalır —
   animasyonlar işletim sistemi tercihine bakılmaksızın oynar. */
@media (prefers-reduced-motion: reduce) {
  html:not(.db-force-motion) { scroll-behavior: auto; }

  html:not(.db-force-motion) *,
  html:not(.db-force-motion) *::before,
  html:not(.db-force-motion) *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  html:not(.db-force-motion) .db-grain { animation: none; }
}

/* --------------------------------------------------------------------------
   08 — KAYDIRMA ÇUBUĞU
   İnce, keskin köşeli, temanın içinde erimiş.
   -------------------------------------------------------------------------- */
html {
  scrollbar-width: thin;
  scrollbar-color: #2b2b2b var(--db-void);
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background-color: var(--db-void);
}

::-webkit-scrollbar-thumb {
  background-color: #2b2b2b;
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active {
  background-color: var(--db-red);
}

::-webkit-scrollbar-corner {
  background-color: var(--db-void);
}