/* Sayfa geçişlerinde (giriş↔menü) tarayıcı otomatik crossfade yapsın → siyah flaş gider.
   Destekleyen tarayıcılarda (Chrome) çalışır; desteklemeyende sessizce normal geçer. */
@view-transition {
  navigation: auto;
}

@font-face {
  font-family: "Libre Baskerville Local";
  src: url("assets/fonts/LibreBaskerville-Regular.woff2") format("woff2"), url("assets/fonts/LibreBaskerville-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Libre Baskerville Local";
  src: url("assets/fonts/LibreBaskerville-Bold.woff2") format("woff2"), url("assets/fonts/LibreBaskerville-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Revans Local";
  src: url("assets/fonts/Revans-Medium.woff2") format("woff2"), url("assets/fonts/Revans-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans Local";
  src: url("assets/fonts/IBMPlexSans-Regular.woff2") format("woff2"), url("assets/fonts/IBMPlexSans-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans Local";
  src: url("assets/fonts/IBMPlexSans-SemiBold.woff2") format("woff2"), url("assets/fonts/IBMPlexSans-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --display: "Revans Local", "Libre Baskerville Local", Georgia, "Times New Roman", serif;
  --font: "IBM Plex Sans Local", "Helvetica Neue", Arial, sans-serif;
  --bg: #070706;
  --ink: #f6efe4;
}

* {
  box-sizing: border-box;
  letter-spacing: 0;
}

html,
body {
  min-width: 320px;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

/* Giriş animasyon keyframe'leri (wordmark + glow + tagline) */
@keyframes introGlow {
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes introLetter {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes introFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Giriş ekranı (20260611l) — gerçek-motor backdrop + DANIEL'S + butonlar ────
   Tek ekran: epik motor fonu, DANIEL'S harf harf yazılır, Kadıköy künyesi, altında
   Menü / Paket çekirdek butonları (görseller yüklenince belirir). Ayrı seçim kartı yok. */
.entry {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #060605;
}
.entry-motor {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 54vh;
  overflow: hidden;
}
.entry-motor::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, #060605 0%, rgba(6, 6, 5, 0.5) 18%, transparent 46%),
    linear-gradient(0deg, rgba(6, 6, 5, 0.4), transparent 38%);
  content: "";
}
.entry-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
}
/* still görsel hep görünür taban → mobilde asla siyah kalmaz; video hazır olunca üstüne fade'lenir */
.entry-still {
  z-index: 0;
}
.entry-video {
  z-index: 1;
  opacity: 0;
  transition: opacity 800ms ease;
}
.entry-video.is-playing {
  opacity: 1;
}
.entry-glow {
  position: absolute;
  left: 50%;
  top: 27%;
  width: 130vw;
  height: 66vh;
  transform: translate(-50%, -50%) scale(0.6);
  background: radial-gradient(ellipse at center, rgba(197, 160, 106, 0.2), rgba(116, 70, 40, 0.08) 34%, transparent 62%);
  opacity: 0;
  animation: introGlow 2600ms 100ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  pointer-events: none;
}
.entry-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 52vh;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
  padding: 0 22px 3.5vh;
}
.entry-head {
  display: grid;
  justify-items: center;
  gap: 14px;
  text-align: center;
}
.entry-wordmark {
  display: flex;
  font-family: var(--display);
  font-size: clamp(2.2rem, 13vw, 4.4rem);
  font-weight: 500;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  color: #f4ecda;
  text-shadow: 0 0 42px rgba(197, 160, 106, 0.32), 0 2px 30px rgba(0, 0, 0, 0.6);
}
.entry-wordmark span {
  display: inline-block;
  opacity: 0;
  transform: translateY(16px);
  filter: blur(6px);
  animation: introLetter 540ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.entry-wordmark span:nth-child(1) { animation-delay: 360ms; }
.entry-wordmark span:nth-child(2) { animation-delay: 450ms; }
.entry-wordmark span:nth-child(3) { animation-delay: 540ms; }
.entry-wordmark span:nth-child(4) { animation-delay: 630ms; }
.entry-wordmark span:nth-child(5) { animation-delay: 720ms; }
.entry-wordmark span:nth-child(6) { animation-delay: 810ms; }
.entry-wordmark span:nth-child(7) { animation-delay: 900ms; }
.entry-wordmark span:nth-child(8) { animation-delay: 980ms; }
.entry-tagline {
  margin: 0;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(244, 236, 218, 0.62);
  opacity: 0;
  animation: introFadeUp 760ms 1200ms ease forwards;
}
/* Rölanti: motor gelirken DANIEL'S bloğu makine gibi hafifçe titrer (0.7px, 7Hz) */
@keyframes engineIdle {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -0.7px, 0); }
}
.entry-head.is-idling {
  animation: engineIdle 72ms linear infinite alternate;
}
/* Park anı: motor durunca far DANIEL'S tabelasını bir kez yalar */
@keyframes parkGleam {
  0% { filter: brightness(1); }
  30% { filter: brightness(1.45); }
  100% { filter: brightness(1); }
}
.entry-wordmark.is-parked {
  animation: parkGleam 720ms ease-out 1;
}
/* Butonlar — görseller TAM yüklenince (.images-loaded) belirir */
.entry-actions {
  width: min(440px, 92vw);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 720ms ease,
    transform 720ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.entry.images-loaded .entry-actions {
  opacity: 1;
  transform: translateY(0);
}
/* ── Giriş butonları: "Döküm Pirinç + Far İzi" ($10k his) ────────────────────
   Döküm pirinç külçe materyali (5-duraklı gradyan + 4-katman bevel), perimetreyi
   dolaşan TEK sıcak far izi (conic-gradient rim, motorun farı gibi), letterpress
   basış (harf gömüsü ters döner). Base = pirinç birincil; --ghost = obsidyen. */
@property --edge-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.entry-btn {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 60px;
  padding: 0 16px;
  border: 0;
  border-radius: 14px;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  color: #3a2510;
  -webkit-tap-highlight-color: transparent;
  /* köşe perçinleri (cıvatalı tank plakası) + döküm pirinç yüzey */
  background:
    radial-gradient(circle 2.6px at 12px 12px, rgba(255, 249, 232, 0.95), rgba(120, 78, 40, 0.85) 52%, rgba(120, 78, 40, 0) 100%),
    radial-gradient(circle 2.6px at calc(100% - 12px) 12px, rgba(255, 249, 232, 0.95), rgba(120, 78, 40, 0.85) 52%, rgba(120, 78, 40, 0) 100%),
    radial-gradient(circle 2.6px at 12px calc(100% - 12px), rgba(255, 249, 232, 0.95), rgba(120, 78, 40, 0.85) 52%, rgba(120, 78, 40, 0) 100%),
    radial-gradient(circle 2.6px at calc(100% - 12px) calc(100% - 12px), rgba(255, 249, 232, 0.95), rgba(120, 78, 40, 0.85) 52%, rgba(120, 78, 40, 0) 100%),
    linear-gradient(155deg, #f3dcae 0%, #e6c389 26%, #c5a06a 52%, #a9824f 74%, #caa56e 100%);
  box-shadow:
    inset 0 1.4px 0 rgba(255, 247, 225, 0.92),
    inset 0 -2px 2px rgba(74, 44, 17, 0.55),
    inset 0 0 0 1px rgba(120, 78, 40, 0.3),
    0 10px 22px -8px rgba(0, 0, 0, 0.78),
    0 2px 6px rgba(0, 0, 0, 0.55);
  text-shadow: 0 1px 0 rgba(255, 247, 225, 0.6), 0 -1px 0 rgba(74, 44, 17, 0.32);
  transition:
    transform 150ms cubic-bezier(0.2, 0.8, 0.25, 1),
    box-shadow 220ms ease,
    text-shadow 180ms ease;
}
/* metin + ok daima far izinin (::after, z2) üstünde */
.entry-btn > span { position: relative; z-index: 3; }
.entry-btn-arrow {
  position: relative;
  z-index: 3;
  display: inline-flex;
  transition: transform 200ms ease;
}
/* İç pinstripe — tank amblemi iç hattı; gravürlü (koyu çizgi + alt highlight) */
.entry-btn:not(.entry-btn--ghost)::before {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: 1;
  border-radius: 9px;
  border: 1px solid rgba(120, 78, 40, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 247, 225, 0.4),
    0 1px 0 rgba(255, 247, 225, 0.28);
  pointer-events: none;
}
/* İMZA: perimetreyi dolaşan tek sıcak far izi — conic baş + sönen kuyruk,
   mask interior'ı oyar → geriye 1.4px pirinç rim kalır, ışık geçince parlar */
.entry-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1.4px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(
    from var(--edge-angle),
    rgba(255, 247, 225, 0) 0deg,
    rgba(255, 247, 225, 0) 70deg,
    rgba(255, 247, 225, 0.5) 150deg,
    #fffaf0 182deg,
    rgba(255, 247, 225, 0.5) 214deg,
    rgba(255, 247, 225, 0) 296deg,
    rgba(255, 247, 225, 0) 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: drop-shadow(0 0 4px rgba(255, 247, 225, 0.55));
  opacity: 0;
  transition: opacity 720ms ease;
  animation: dcEdgeTrace 6s linear infinite;
}
@keyframes dcEdgeTrace { to { --edge-angle: 360deg; } }
.entry.images-loaded .entry-btn::after { opacity: 1; }

/* Letterpress basış — külçe kalıba oturur + harf gömüsü ters döner */
.entry-btn:active {
  transform: translateY(1px) scale(0.992);
  background: linear-gradient(155deg, #e2c794 0%, #c5a06a 50%, #a9824f 100%);
  box-shadow:
    inset 0 2px 5px rgba(74, 44, 17, 0.6),
    inset 0 1px 0 rgba(255, 247, 225, 0.45),
    inset 0 0 0 1px rgba(120, 78, 40, 0.34),
    0 3px 8px -4px rgba(0, 0, 0, 0.7);
  text-shadow: 0 -1px 0 rgba(255, 247, 225, 0.45), 0 1px 1px rgba(58, 38, 14, 0.55);
}
.entry-btn:active .entry-btn-arrow { transform: translateX(2px); }
@media (hover: hover) {
  .entry-btn:hover { transform: translateY(-1px); }
  .entry-btn:hover .entry-btn-arrow { transform: translateX(2px); }
}

/* İkincil: obsidyen külçe + fırçalı grain + sönük/yavaş "bekleyen" far izi */
.entry-btn--ghost {
  color: #e7d4b0;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  /* aynı köşe perçinleri (pirinç başlı, koyu gövde) + obsidyen yüzey */
  background:
    radial-gradient(circle 2.6px at 12px 12px, rgba(214, 178, 120, 0.85), rgba(0, 0, 0, 0.85) 55%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle 2.6px at calc(100% - 12px) 12px, rgba(214, 178, 120, 0.85), rgba(0, 0, 0, 0.85) 55%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle 2.6px at 12px calc(100% - 12px), rgba(214, 178, 120, 0.85), rgba(0, 0, 0, 0.85) 55%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle 2.6px at calc(100% - 12px) calc(100% - 12px), rgba(214, 178, 120, 0.85), rgba(0, 0, 0, 0.85) 55%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(157deg, #2a2522 0%, #1b1714 48%, #121010 100%);
  box-shadow:
    inset 0 1.2px 0 rgba(199, 160, 106, 0.34),
    inset 0 -2px 3px rgba(0, 0, 0, 0.72),
    inset 0 0 0 1px rgba(197, 160, 106, 0.2),
    0 9px 20px -9px rgba(0, 0, 0, 0.8),
    0 2px 5px rgba(0, 0, 0, 0.5);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6), 0 -1px 0 rgba(199, 160, 106, 0.12);
}
/* İkincil pinstripe + fırçalı grain (iç panel) */
.entry-btn--ghost::before {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: 1;
  border-radius: 9px;
  border: 1px solid rgba(197, 160, 106, 0.3);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.45);
  background: repeating-linear-gradient(157deg, rgba(199, 160, 106, 0.05) 0 1px, transparent 1px 3px);
  opacity: 0.9;
  pointer-events: none;
}
.entry-btn--ghost::after {
  background: conic-gradient(
    from var(--edge-angle),
    rgba(197, 160, 106, 0) 0deg,
    rgba(197, 160, 106, 0) 110deg,
    rgba(236, 214, 171, 0.45) 168deg,
    rgba(236, 214, 171, 0.62) 184deg,
    rgba(236, 214, 171, 0.45) 200deg,
    rgba(197, 160, 106, 0) 256deg,
    rgba(197, 160, 106, 0) 360deg
  );
  filter: drop-shadow(0 0 3px rgba(236, 214, 171, 0.3));
  animation-duration: 9s;
}
.entry-btn--ghost:active {
  transform: translateY(1px) scale(0.992);
  background: linear-gradient(157deg, #2a2522 0%, #1b1714 48%, #121010 100%);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.85),
    inset 0 0 0 1px rgba(197, 160, 106, 0.22),
    0 3px 7px -4px rgba(0, 0, 0, 0.6);
  text-shadow: 0 -1px 0 rgba(199, 160, 106, 0.16), 0 1px 1px rgba(0, 0, 0, 0.5);
}
.entry-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px #060605,
    0 0 0 4px #ecd6ab,
    0 8px 20px -8px rgba(0, 0, 0, 0.8);
}
/* Eski Safari (@property yok): far izini sabit dengeli rim'e dondur */
@supports not (background: conic-gradient(from var(--edge-angle), #000, #000)) {
  .entry-btn::after {
    animation: none;
    background: conic-gradient(from 150deg, rgba(255, 247, 225, 0), rgba(255, 247, 225, 0.5) 90deg, rgba(255, 247, 225, 0) 200deg, rgba(255, 247, 225, 0) 360deg);
  }
  .entry-btn--ghost::after {
    background: conic-gradient(from 150deg, rgba(236, 214, 171, 0), rgba(236, 214, 171, 0.4) 90deg, rgba(236, 214, 171, 0) 200deg, rgba(236, 214, 171, 0) 360deg);
  }
}

/* Dönüş ziyareti (.is-return): sinematik intro atlanır — her şey anında hazır */
.entry.is-return .entry-wordmark span {
  opacity: 1;
  transform: none;
  filter: none;
  animation: none;
}
.entry.is-return .entry-tagline {
  opacity: 1;
  animation: none;
}
.entry.is-return .entry-glow {
  opacity: 1;
  animation: none;
  transform: translate(-50%, -50%) scale(1);
}

/* Giriş → menü morph: sayfa takasında wordmark + motor şeridi kesintisiz aksın */
@media (prefers-reduced-motion: no-preference) {
  .entry-wordmark {
    view-transition-name: daniels-wordmark;
  }
  .entry-motor {
    view-transition-name: daniels-motor;
  }
}

@media (prefers-reduced-motion: reduce) {
  .entry-bg { animation: none; transform: scale(1.03); }
  .entry-glow { opacity: 1; animation: none; transform: translate(-50%, -50%) scale(1); }
  .entry-wordmark span { opacity: 1; transform: none; filter: none; animation: none; }
  .entry-tagline { opacity: 1; animation: none; }
  .entry-actions { opacity: 1; transform: none; transition: none; }
  /* Far izini durdur ama kaybetme — sabit dengeli pirinç rim'e dondur; materyal kalır */
  .entry-btn::after {
    animation: none;
    opacity: 1;
    background: conic-gradient(from 150deg, rgba(255, 247, 225, 0), rgba(255, 247, 225, 0.5) 90deg, rgba(255, 247, 225, 0) 200deg, rgba(255, 247, 225, 0) 360deg);
  }
  .entry-btn--ghost::after {
    background: conic-gradient(from 150deg, rgba(236, 214, 171, 0), rgba(236, 214, 171, 0.38) 90deg, rgba(236, 214, 171, 0) 200deg, rgba(236, 214, 171, 0) 360deg);
  }
}