/* Lucenova Studios · temel stil: yazı, renk, üst şerit, ufuk, düğme, alt bilgi, hareket. Renk, yazı ve hareket MOTOYOL görsel kimliğinden
   (cg50/design/gorsel-kimlik.md): koyu zemin, ince çizgi, tek vurgu altın, Barlow Condensed. */

@font-face { font-family: "Barlow Condensed"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/assets/fonts/barlow-condensed-regular.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("/assets/fonts/barlow-condensed-medium.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/assets/fonts/barlow-condensed-semibold.woff2") format("woff2"); }

:root {
  --kasa: #0B0E12;
  --plaka: #0E1013;
  --plaka-ust: #1A1E24;
  --kara: #15191F;              /* haritada kara parçası */
  --ince: rgba(255, 255, 255, .16);
  --ayrac: rgba(255, 255, 255, .12);
  --metin: #F2F2EF;
  --soluk: rgba(242, 242, 239, .72);
  --silik: rgba(242, 242, 239, .56);
  --vurgu: #E8A530;
  --yazi: "Barlow Condensed", "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
  --kenar: 16px;
  --genislik: 1200px;
  --giris: cubic-bezier(.33, 1, .68, 1);  /* ease-out-cubic */
  color-scheme: dark;
}
@media (min-width: 700px) { :root { --kenar: 32px; } }
@media (min-width: 1100px) { :root { --kenar: 48px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--kasa); color: var(--metin);
  font-family: var(--yazi); font-weight: 400; font-size: 19px; line-height: 1.55; letter-spacing: .2px;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
main { flex: 1; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3 { font-weight: 500; line-height: 1.05; margin: 0; letter-spacing: 0; text-wrap: balance; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--vurgu); color: #14110A; }

.kap { width: 100%; max-width: calc(var(--genislik) + 2 * var(--kenar)); margin-inline: auto; padding-inline: var(--kenar); }
.dar { max-width: calc(720px + 2 * var(--kenar)); }
.ekran-okuyucu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.atla { position: absolute; left: var(--kenar); top: -60px; z-index: 30; padding: 10px 14px; background: var(--plaka-ust);
  border-radius: 6px; text-decoration: none; }
.atla:focus { top: 12px; }

/* Etiket: küçük, büyük harf, aralıklı, soluk. */
.etiket { font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--soluk); margin: 0 0 16px; }
.giris-metni { font-size: clamp(20px, 2.2vw, 24px); line-height: 1.5; color: var(--soluk); }

/* ---------- Üst şerit ---------- */
.ust { position: absolute; inset: 0 0 auto 0; z-index: 20; }
.ust .kap { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 76px; }
.marka { display: block; flex: none; }
.marka img { width: 158px; height: auto; }
@media (min-width: 1000px) { .marka img { width: 176px; } }
.menu { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 32px); margin: 0; padding: 0; list-style: none; }
.menu a { display: inline-block; padding: 12px 0; font-size: 15px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; color: var(--soluk); border-bottom: 2px solid transparent; transition: color 120ms; }
.menu a:hover { color: var(--metin); }
.menu a[aria-current="page"], .menu-panel a[aria-current="page"] { color: var(--metin); border-bottom-color: var(--vurgu); }
.menu .dil { padding-left: clamp(18px, 2.4vw, 32px); border-left: 1px solid var(--ince); }
.menu .dil a { color: var(--metin); }
/* Dar ekran: "Menü" açılır panel (JS'siz çalışır: details / summary). */
.menu-dar { display: none; }
@media (max-width: 999px) {
  .menu-genis { display: none; }
  .menu-dar { display: block; }
}
.menu-dar summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 2px;
  font-size: 15px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.menu-dar summary::-webkit-details-marker { display: none; }
.menu-dar summary::after { content: ""; width: 18px; height: 9px; border-top: 1.75px solid var(--metin); border-bottom: 1.75px solid var(--metin); }
.menu-dar[open] summary::after { height: 0; border-bottom: 0; transform: rotate(0); }
.menu-panel { position: absolute; top: 76px; left: 0; right: 0; margin: 0; padding: 8px var(--kenar) 20px; list-style: none;
  background: var(--kasa); border-top: 1px solid var(--ayrac); border-bottom: 1px solid var(--ayrac);
  box-shadow: 0 24px 48px rgba(0, 0, 0, .5); }
.menu-panel li { border-bottom: 1px solid var(--ayrac); }
.menu-panel li:last-child { border-bottom: 0; }
.menu-panel a { display: block; padding: 14px 0; font-size: 22px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; color: var(--soluk); }
.menu-panel a[aria-current="page"] { color: var(--metin); }
.menu-panel .dil a { color: var(--metin); font-size: 17px; }

/* ---------- Ufuk: sitenin imzası. Açılışta 1 px altın çizgi soldan sağa çizilir, üstünde hafif ışık doğar. ---------- */
.ufuk { position: relative; height: 1px; pointer-events: none; }
.ufuk::before { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(232, 165, 48, 0), var(--vurgu) 14%, var(--vurgu) 86%, rgba(232, 165, 48, 0));
  transform-origin: left center; animation: ufuk-ciz 900ms var(--giris) 150ms both; }
.ufuk::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 0; height: 120px;
  background: radial-gradient(50% 100% at 50% 100%, rgba(232, 165, 48, .2), rgba(232, 165, 48, .06) 45%, rgba(232, 165, 48, 0) 100%);
  transform-origin: bottom center; animation: ufuk-dogus 1600ms var(--giris) 700ms both; }
@keyframes ufuk-ciz { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ufuk-dogus { from { opacity: 0; transform: translateY(10px) scaleY(.5); } to { opacity: 1; transform: none; } }
/* Bölüm ayracı: aynı çizgi, daha soluk; görünür alana girince çizilir. Hâle yok. */
.ufuk--ayrac::before { opacity: .45; animation: none; }
.ufuk--ayrac::after { display: none; }
.hareket .ufuk--ayrac.belir { opacity: 1; transform: none; }
.hareket .ufuk--ayrac.belir::before { transform: scaleX(0); transition: transform 900ms var(--giris); }
.hareket .ufuk--ayrac.belir.gorundu::before { transform: scaleX(1); }

/* Kahramansız sayfaların başı */
.sayfa-basi { padding-top: 148px; }
.sayfa-basi h1 { font-size: clamp(44px, 7vw, 80px); margin-bottom: 16px; }
.sayfa-basi .giris-metni { max-width: 46ch; }
.sayfa-basi .ufuk { margin-top: 40px; margin-bottom: 48px; }

/* ---------- Düğme ve rozet ---------- */
.rozet { display: inline-flex; align-items: center; gap: 12px; margin: 0; padding: 12px 18px 12px 14px; min-height: 52px;
  background: rgba(11, 14, 18, .88); border: 1px solid var(--ince); border-radius: 6px; line-height: 1.15; }
.rozet svg { flex: none; }
.rozet small { display: block; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--soluk); }
.rozet strong { display: block; font-size: 18px; font-weight: 500; letter-spacing: .04em; }
.dugme { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px;
  font: 500 17px/1 var(--yazi); letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  border-radius: 6px; transition: transform 80ms, filter 120ms; }
.dugme:active { transform: scale(.97); }
/* Birincil: ekranda tek; altın dolgu, koyu yazı, 12° eğik kenar. */
.dugme--birincil { color: #14110A; background: linear-gradient(#F5C04A, #D18F1E); border-radius: 0;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); padding: 0 34px; }
.dugme--birincil:hover { filter: brightness(1.06); }
.ok-baglanti { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none; padding: 10px 0; border-bottom: 2px solid var(--vurgu); }
.ok-baglanti span { transition: transform 120ms; }
.ok-baglanti:hover span { transform: translateX(3px); }
.metin a, .sss a, .alt-bilgi a, .giris-metni a { text-decoration: underline; text-decoration-color: var(--vurgu); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.metin a:hover, .sss a:hover { text-decoration-thickness: 2px; }

/* ---------- Alt bilgi ---------- */
.alt-bilgi { padding: 0 0 calc(32px + env(safe-area-inset-bottom)); font-size: 16px; color: var(--soluk); }
.alt-bilgi .kap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; }
.alt-bilgi .ufuk { flex-basis: 100%; margin-bottom: 24px; }
.alt-bilgi p { margin: 0; }
.alt-bilgi .dil-sec a[aria-current] { color: var(--metin); text-decoration: none; }
.alt-bilgi nav ul { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; }
.alt-bilgi nav a { text-decoration: none; display: inline-block; padding: 6px 0; }
.alt-bilgi nav a:hover { color: var(--metin); }
.alt-bilgi .kaynak { flex-basis: 100%; margin: 0; font-size: 14px; color: var(--silik); }
.alt-bilgi .kaynak a { text-decoration-color: var(--ince); }

/* ---------- Sakin hareket: yalnız JS varsa ve kullanıcı hareketi azaltmadıysa ---------- */
.hareket .belir { opacity: 0; transform: translateY(8px); transition: opacity 320ms var(--giris), transform 320ms var(--giris); }
.hareket .belir.gorundu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hareket .belir { opacity: 1; transform: none; transition: none; }
  .ufuk::before, .ufuk::after { animation: none; }
  .hareket .ufuk--ayrac.belir::before { transform: none; }
  *, *::before, *::after { transition-duration: 0ms !important; }
}