:root {
  --y: #ffd200;
  --black: #000;
  --ink: #fbf8f0;
  --mute: #9a968c;
  --line: #24231f;
  --inset: clamp(14px, 1.8vw, 22px);
  --side: clamp(14px, 3vw, 48px);
  --logo-w: clamp(92px, 10vw, 150px);
  /* üst çerçeve çizgisi, logo yarı yüksekliği + boşluk kadar aşağıda: logo ekranın tepesine değmez */
  --top: max(var(--inset), calc(var(--logo-w) * 0.365 / 2 + 10px));
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(42% 46% at 50% 34%, rgba(255, 196, 0, .14), transparent 72%),
    var(--black);
  color: var(--ink);
  font-family: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  opacity: 0;
  transition: opacity .8s ease;
}
.ready #scene { opacity: 1; }

/* Markanın sosyal medya kartlarındaki sarı çerçeve; logo üst çizgiyi böler */
.frame {
  position: fixed;
  inset: var(--top) var(--inset) var(--inset);
  border: 1.5px solid var(--y);
  z-index: 2;
  pointer-events: none;
}

.brand {
  position: fixed;
  top: var(--top);
  left: 50%;
  z-index: 4;
  transform: translate(-50%, -50%);
  padding: 0 clamp(10px, 1.6vw, 22px);
  background: var(--black);
  line-height: 0;
}
.brand img {
  display: block;
  width: var(--logo-w);
  height: auto;
}

.copy {
  position: fixed;
  bottom: var(--inset);
  left: 50%;
  z-index: 4;
  transform: translate(-50%, 50%);
  padding: 0 12px;
  background: var(--black);
  color: var(--mute);
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

/* Tüm içerik görünür alana sığar: sahne esner, metin ve iletişim sabit kalır */
.page {
  position: fixed;
  inset: 0;
  z-index: 3;
  height: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding:
    calc(var(--top) + clamp(30px, 5vh, 60px)) calc(var(--inset) + var(--side))
    calc(var(--inset) + clamp(18px, 3vh, 36px) + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}
.page a { pointer-events: auto; }

.stage { position: relative; flex: 1 1 0; min-height: 0; max-height: max(118vw, 220px); }
.hero, .contact { flex: none; }

.loader {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 210, 0, .55), transparent 70%);
  animation: pulse 1.4s ease-in-out infinite;
  transition: opacity .4s;
}
.ready .loader, .no-webgl .loader { opacity: 0; animation: none; }

.fallback {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(55%, 260px);
  height: auto;
  transform: translate(-50%, -50%);
  border-radius: 22%;
}
.no-webgl .fallback { display: block; }

.hero {
  text-align: center;
  padding-bottom: clamp(14px, 3vh, 36px);
  opacity: 0;
  animation: show 1s .3s ease forwards;
}

h1 {
  margin: 0;
  font-weight: 700;
  font-size: clamp(36px, min(8vw, 10vh), 124px);
  line-height: .95;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.lead {
  margin: clamp(8px, 1.6vh, 18px) auto 0;
  max-width: 30em;
  color: var(--mute);
  font-size: clamp(14px, 1.2vw, 18px);
  line-height: 1.5;
  text-wrap: balance;
}

.contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: clamp(18px, 3.2vw, 48px);
  row-gap: 10px;
  max-width: 1040px;
  width: 100%;
  margin: 0 auto;
  padding-top: clamp(12px, 2.2vh, 24px);
  border-top: 1px solid var(--line);
  opacity: 0;
  animation: show 1s .45s ease forwards;
}

.item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.35;
  transition: color .2s;
}
.item svg {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--y);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nowrap { white-space: nowrap; }
a.item:hover { color: var(--y); }
a.item:focus-visible { outline: 2px solid var(--y); outline-offset: 5px; border-radius: 3px; }

@keyframes show { to { opacity: 1; } }
@keyframes pulse { 50% { transform: scale(1.35); opacity: .5; } }

/* Tablet ve küçük dizüstü: adres tek başına üst satıra geçer */
@media (max-width: 1080px) {
  .address { flex-basis: 100%; justify-content: center; }
}

/* Telefon */
@media (max-width: 640px) {
  .contact { flex-direction: column; align-items: center; row-gap: 8px; }
  .address { flex-basis: auto; max-width: 290px; }
  .item { display: block; font-size: 13px; text-align: center; }
  .item svg { display: inline-block; width: 15px; height: 15px; margin-right: 6px; vertical-align: -2px; }
  .lead { font-size: 14px; max-width: 22em; }
}

/* Kısa ekran: tarayıcı çubukları açık telefonlar, uygulama içi tarayıcılar */
@media (max-height: 700px) {
  .lead { margin-top: 8px; font-size: 13.5px; }
  .hero { padding-bottom: 12px; }
}
@media (max-height: 600px) {
  .lead { display: none; }
}
@media (max-height: 520px) {
  .page { padding-top: calc(var(--inset) + 22px); }
  .contact { flex-direction: row; flex-wrap: nowrap; column-gap: 16px; padding-top: 8px; }
  .address { flex: 0 1 auto; max-width: none; min-width: 0; justify-content: flex-start; }
  .address span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .contact .item:not(.address) { flex: none; }
  .item { font-size: 12px; }
  h1 { font-size: clamp(28px, 9vh, 48px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero, .contact { animation: none; opacity: 1; }
  .loader { animation: none; }
}