/* =========================================================
   Soylu Oto Kaporta — Yapım aşaması sayfası (index.html)
   Token yapısı: ilkel → anlamsal → bileşen
   ========================================================= */

/* ---- 1) İlkel tokenlar (ham değerler; logodan ölçüldü) ---- */
:root {
  --renk-siyah: #000000;
  --renk-beyaz: #FFFFFF;
  --renk-turuncu-500: #F06420;           /* logo turuncusu */
  --renk-turuncu-400: #F5844D;           /* koyu zeminde açık vurgu */
  --renk-beyaz-a12: rgba(255, 255, 255, .12);
  --renk-beyaz-a06: rgba(255, 255, 255, .06);
  --renk-turuncu-a14: rgba(240, 100, 32, .14);

  --font-govde: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --agirlik-normal: 400;
  --agirlik-orta: 500;
  --agirlik-yari-kalin: 600;
  --agirlik-kalin: 700;

  /* Ölçek birimi: 1920x1080 tasarımda 19.2px; ekran hem enine hem boyuna sığar */
  --u: min(1vw, 1.78vh);

  --sure-kisa: 180ms;
  --egri-cikis: cubic-bezier(.22, 1, .36, 1);
}

/* ---- 2) Anlamsal tokenlar (amaç adları) ---- */
:root {
  --zemin: var(--renk-siyah);
  --metin: var(--renk-beyaz);
  --vurgu: var(--renk-turuncu-500);
  --vurgu-acik: var(--renk-turuncu-400);
  --odak-halkasi: var(--renk-turuncu-400);
  --cizgi-soluk: var(--renk-beyaz-a12);
  --yuzey-hover: var(--renk-beyaz-a06);
}

/* ---- 3) Bileşen tokenları ---- */
:root {
  --duyuru-boyut: clamp(14px, calc(var(--u) * 1.6), 32px);
  --logo-genislik: clamp(250px, calc(var(--u) * 29), 560px);
  --web-boyut: clamp(16px, calc(var(--u) * 1.7), 34px);
  --adres-boyut: clamp(14px, calc(var(--u) * 1.45), 28px);
  --telefon-boyut: clamp(18px, calc(var(--u) * 1.75), 34px);

  --bosluk-duyuru-logo: clamp(32px, calc(var(--u) * 5.5), 106px);
  --bosluk-logo-web: clamp(28px, calc(var(--u) * 4.5), 86px);
  --bosluk-web-adres: clamp(26px, calc(var(--u) * 4.6), 88px);
  --bosluk-adres-telefon: clamp(10px, calc(var(--u) * 2.4), 46px);

  --baglanti-ikon: 1em;
  --baglanti-aralik: .5em;
}

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

html { color-scheme: dark; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font-family: var(--font-govde);
  font-weight: var(--agirlik-orta);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

p, h1, address { margin: 0; }
img { display: block; max-width: 100%; height: auto; }

/* ---- Sahne: içerik ekranın ortasında ---- */
.sahne {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(40px, 6vh, 96px) 16px;
  text-align: center;
  overflow: hidden;
}

/* Logonun arkasında çok hafif turuncu ışık (logonun kendisine efekt verilmez) */
.isik {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse min(70vw, 1100px) min(48vh, 520px) at 50% 44%,
    var(--renk-turuncu-a14),
    transparent 70%
  );
}

/* ---- Duyuru: “SİTEMİZ YAPIM AŞAMASINDADIR” ---- */
.duyuru {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--duyuru-boyut) * .55);
}

.duyuru__metin {
  font-size: var(--duyuru-boyut);
  font-weight: var(--agirlik-yari-kalin);
  letter-spacing: .03em;
  line-height: 1.2;
  text-wrap: balance;
}

/* "Yapım sürüyor" çubuğu: soluk iz üstünde kayan turuncu parça */
.duyuru__cubuk {
  position: relative;
  display: block;
  width: clamp(56px, calc(var(--u) * 4.6), 88px);
  height: 2px;
  border-radius: 2px;
  background: var(--cizgi-soluk);
  overflow: hidden;
  transform-origin: center;
}

.duyuru__cubuk span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 45%;
  border-radius: inherit;
  background: var(--vurgu);
  animation: cubuk-kay 1.9s cubic-bezier(.65, 0, .35, 1) infinite;
}

@keyframes cubuk-kay {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(240%); }
}

/* ---- Logo ---- */
.logo {
  width: var(--logo-genislik);
  margin-top: var(--bosluk-duyuru-logo);
  line-height: 0;
}

.logo img { width: 100%; }

/* ---- Web adresi ---- */
.web {
  margin-top: var(--bosluk-logo-web);
  font-size: var(--web-boyut);
  font-weight: var(--agirlik-normal);
  letter-spacing: .02em;
  line-height: 1.2;
}

.web strong { font-weight: var(--agirlik-kalin); }

/* ---- İletişim (adres + telefon) ---- */
.iletisim {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bosluk-adres-telefon);
  margin-top: var(--bosluk-web-adres);
  font-style: normal;
}

.baglanti {
  display: inline-flex;
  align-items: center;
  gap: var(--baglanti-aralik);
  min-height: 44px;
  padding: .45em .9em;
  border-radius: 999px;
  color: var(--metin);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--sure-kisa) var(--egri-cikis);
}

/* İkon solda; sağa eşit boşluk → metin sayfanın tam ortasında kalır */
.baglanti::after {
  content: "";
  flex: none;
  width: var(--baglanti-ikon);
}

.baglanti__ikon {
  flex: none;
  width: var(--baglanti-ikon);
  height: var(--baglanti-ikon);
  fill: none;
  stroke: var(--vurgu);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.baglanti > span {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: .28em;
  transition: text-decoration-color var(--sure-kisa) var(--egri-cikis);
}

.baglanti:hover { background: var(--yuzey-hover); }
.baglanti:hover > span { text-decoration-color: var(--vurgu); }

.baglanti:focus-visible {
  outline: 2px solid var(--odak-halkasi);
  outline-offset: 3px;
  background: var(--yuzey-hover);
}

.adres {
  font-size: var(--adres-boyut);
  font-weight: var(--agirlik-orta);
  letter-spacing: .04em;
  line-height: 1.3;
  border-radius: 1.2em;
}

.adres__metin { text-wrap: balance; }

.telefon {
  font-size: var(--telefon-boyut);
  font-weight: var(--agirlik-orta);
  letter-spacing: .03em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

/* ---- Giriş animasyonu hazırlığı (js/index.js açar) ---- */
.js:not(.hazir) .anim { opacity: 0; }

/* ---- Dikey ekran (tablet / telefon): ölçek genişlikten büyür ---- */
@media (orientation: portrait) {
  :root { --u: min(1.6vw, 1.78vh); }
}

/* ---- Küçük ekran ---- */
@media (max-width: 600px) {
  :root { --logo-genislik: min(80vw, 340px); }
  /* adres birkaç satıra bölünür → ikon yanda kopuk durmasın, üste alınır */
  .adres { flex-direction: column; gap: .35em; }
  .adres::after { display: none; }
}

/* ---- Hareket azaltma tercihi ---- */
@media (prefers-reduced-motion: reduce) {
  .duyuru__cubuk span { animation: none; width: 100%; }
  .baglanti, .baglanti > span { transition: none; }
}