/*
  Ölçü sistemi
  ------------
  Mimarın AutoCAD çizimlerindeki sayılar burada aynen kullanılır.
  --u = 1 çizim birimi. Her ölçü calc(N * var(--u)) şeklinde yazılır.

  Masaüstü: Saha (3700 x 1750) tarayıcı penceresine sığdırılır,
  oranlar her ekranda korunur. Artan alan siyah zemine karışır.
  Mobil: Aynı birimler yazı ve kare boyutları için kullanılır,
  yerleşim alt alta akar.
*/

:root {
  --bg: #000;
  --fg: #fff;
  --grid-line: #636466;
  --menu-line: #4f4d4d; /* menü ızgara çizgileri */
  --cell-line: #b9b9b9; /* renkli karelerin kenarı */
  --menu-frame: #fff;   /* menünün dış çerçevesi */
  --coffee: #FFDD00;

  /* Mobil: 10 kare (1000 birim) ekran genişliğine sığar, en fazla 0.5px */
  --u: min(calc((100vw - 32px) / 1000), 0.5px);
}

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

html,
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: Arial, Helvetica, sans-serif;
}

h1,
h2,
p,
ul {
  margin: 0;
  padding: 0;
  font-weight: inherit;
}

ul {
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

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

:focus-visible {
  outline: 2px solid #00FFFF;
  outline-offset: 2px;
}

/* ===================== Mobil (varsayılan) ===================== */

.saha {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 20px 16px 32px;
}

/* Metin ve kare grupları tam satır; rozetler ve bağlantılar aynı sırada akar */
.menu {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px 12px;
}

.intro,
.demos {
  flex-basis: 100%;
}

/* --- Sol metin bloğu --- */

.intro__title {
  font-size: calc(42 * var(--u));
  letter-spacing: 0.06em;
}

.intro__home {
  display: inline-block;
  border-bottom: 1px solid transparent;
}

.intro__home:hover {
  border-bottom-color: var(--fg);
}

.intro__subtitle {
  margin-top: 4px;
  font-size: calc(53 * var(--u));
  font-style: italic;
  word-spacing: 0.15em;
}

.intro__list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.intro__item {
  position: relative;
  padding-left: calc(44 * var(--u));
  font-size: calc(46 * var(--u));
  font-weight: bold;
  line-height: 1.2;
}

.intro__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(13 * var(--u));
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  border-radius: 50%;
  background: var(--fg);
}

.intro__item em {
  font-style: italic;
}

.intro__formula {
  display: block;
}

.intro__arrow {
  width: calc(118 * var(--u));
  height: calc(45 * var(--u));
  margin: 0 calc(26 * var(--u)) 0 calc(35 * var(--u));
  vertical-align: middle;
}

.intro__sum {
  white-space: nowrap;
}

.intro__bracket {
  font-size: calc(72 * var(--u));
  line-height: 0;
  vertical-align: calc(-5 * var(--u));
}

/* --- Gösterim kareleri --- */

.demos {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.demos__title {
  font-size: calc(56 * var(--u));
  font-weight: bold;
}

.demos__cells {
  display: grid;
  grid-template-columns: repeat(10, calc(100 * var(--u)));
  grid-auto-rows: calc(100 * var(--u));
}

.cell {
  display: grid;
  place-items: center;
  background: var(--c);
  color: #000;
  font-size: calc(62 * var(--u));
  font-weight: bold;
  line-height: 1;
  box-shadow: inset 0 0 0 1px var(--cell-line);
}

.cell[aria-current="true"] {
  box-shadow: inset 0 0 0 calc(7 * var(--u)) var(--fg);
}

/* --- BT, E/AA kutuları --- */

.badge {
  display: grid;
  place-content: center;
  cursor: pointer;
  width: calc(100 * var(--u));
  height: calc(100 * var(--u));
  background: var(--fg);
  color: #000;
  font-weight: bold;
  text-align: center;
  line-height: 1;
}

.badge--bt {
  font-size: calc(56 * var(--u));
}

.badge--size {
  font-size: calc(44 * var(--u));
}

.badge[aria-current="true"] {
  box-shadow: inset 0 0 0 calc(7 * var(--u)) #00FFFF;
}

/* --- About / Contact / Buy me a coffee --- */

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.links__box {
  display: grid;
  place-items: center;
  width: calc(355 * var(--u));
  height: calc(62 * var(--u));
  border: 1px solid var(--fg);
  font-size: calc(42 * var(--u));
  word-spacing: 0.3em;
}

.coffee {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(14 * var(--u));
  width: calc(356 * var(--u));
  height: calc(100 * var(--u));
  border-radius: calc(14 * var(--u));
  background: var(--coffee);
  color: #000;
}

.coffee__cup {
  height: calc(74 * var(--u));
  width: auto;
}

.coffee__text {
  font-family: "Cookie", cursive;
  font-size: calc(54 * var(--u));
  line-height: 1;
  white-space: nowrap;
}

/* --- Esas sahne --- */

.stage {
  position: relative;
  width: 100%;
  aspect-ratio: 3120 / 1100;
}

.stage__button {
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}

.stage__button[hidden] {
  display: none;
}

.stage__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.stage__empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--grid-line);
  color: #9a9a9a;
  font-size: 16px;
}

.stage__empty[hidden] {
  display: none;
}

/* Anasayfa fotoğrafı: sahnede ortalı, 1.315 oranlı; alt yazı fotoğrafın sağ alt köşesinde.
   Fotoğraf genişliği sahnenin %46,4'ü, sol boşluk %26,8 → yazı sağdan %28,5 içeride. */
.stage__button {
  position: relative;
}

.caption {
  position: absolute;
  font-weight: bold;
  right: 28.5%;
  bottom: 5%;
  text-align: right;
  font-size: calc(33 * var(--u));
  line-height: 1.7;
  color: #ff0000;
  text-shadow: 0 0 calc(8 * var(--u)) rgb(0 0 0 / 90%), 0 0 2px rgb(0 0 0 / 90%);
  /* pointer-events: none; */
}

.caption[hidden] {
  display: none;
}

.caption__q {
  font-size: 1.3em;
  line-height: 0;
}

.stage--about,
.stage--contact {
  aspect-ratio: auto;
}

/* --- Modal: büyümüş sahne --- */

.lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: auto;
  cursor: zoom-out;
}

.lightbox[open] {
  display: grid;
  place-items: center;
}

.lightbox::backdrop {
  background: rgba(0, 0, 0, 0.88);
}

.lightbox__frame {
  position: relative;
}

.lightbox__img {
  display: block;
  width: calc(100vw - 16px);
  height: auto;
  transform-origin: 0 0;
}

.lightbox__caption {
  font-size: calc(30 * var(--u));
}

.lightbox--free .lightbox__caption {
  right: 3%;
  bottom: 4%;
}

/* About sayfası: serbest oranlı görsel */
.lightbox--free .lightbox__img {
  width: auto;
  height: auto;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  max-height: calc(100dvh - 16px);
}

.lightbox__close {
  position: fixed;
  top: 8px;
  right: 12px;
  width: 44px;
  height: 44px;
  font-size: 36px;
  line-height: 1;
  color: var(--fg);
}

/* --- Kare ipucu --- */

.tip {
  position: fixed;
  z-index: 50;
  padding: 6px 10px;
  background: var(--fg);
  color: #000;
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
}

.tip::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top: 0;
  border-bottom-color: var(--fg);
}

.tip[hidden] {
  display: none;
}

/* --- About me: üstte 3, altta 2 görsel --- */

.about {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.about__row {
  display: grid;
  gap: 12px;
}

.about__row--top {
  grid-template-columns: repeat(3, 1fr);
}

.about__row--bottom {
  grid-template-columns: 2.76fr 1.13fr;
}

.thumb {
  display: block;
  width: 100%;
  cursor: zoom-in;
  border: 1px solid var(--grid-line);
}

.thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumb--square { aspect-ratio: 1; }
.thumb--wide   { aspect-ratio: 2.76; }
.thumb--book   { aspect-ratio: 1.13; }
.thumb--slide  { aspect-ratio: 2.82; border: 0; }

.stage--slide .thumb img {
  object-fit: contain;
}

/* --- Contact: solda form + bilgiler, sağda harita --- */

.contact {
  display: flex;
  flex-direction: column;
  gap: 28px;
  font-size: 16px;
  line-height: 1.45;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form__field span {
  font-size: 0.9em;
  color: #cfcfcf;
}

.form input,
.form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--grid-line);
  background: #0d0d0d;
  color: var(--fg);
  font: inherit;
}

.form textarea {
  min-height: 160px;
  resize: vertical;
}

.form input:focus,
.form textarea:focus {
  outline: 2px solid #00FFFF;
  outline-offset: 0;
  border-color: #00FFFF;
}

.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__send,
.info__btn {
  display: inline-block;
  align-self: flex-start;
  padding: 10px 28px;
  border: 1px solid var(--fg);
  background: var(--fg);
  color: #000;
  font-weight: bold;
  cursor: pointer;
}

.form__send:hover,
.info__btn:hover {
  background: #00FFFF;
  border-color: #00FFFF;
}

.form__note {
  padding: 10px 12px;
  border: 1px solid #00FF00;
  color: #00FF00;
}

.form__note--err {
  border-color: #FF0000;
  color: #FF0000;
}

.form__note[hidden] {
  display: none;
}

.info {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
}

.info__block dt {
  font-weight: bold;
  color: #cfcfcf;
  margin-bottom: 4px;
}

.info__block dd {
  margin: 0;
}

.info__block a {
  border-bottom: 1px solid var(--grid-line);
}

.info__block a:hover {
  border-bottom-color: var(--fg);
}

.info__tel {
  font-size: 1.15em;
  font-weight: bold;
}

.info__block .info__wa {
  display: inline-block;
  margin-top: 6px;
  padding: 6px 14px;
  border: 1px solid #25D366 ;
  color: #25D366;
}

.info__block .info__btn {
  margin-top: 10px;
  border-bottom: 0 ;
}

.contact__map {
  min-height: 320px;
  border: 1px solid var(--grid-line);
}

.contact__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  border: 0;
  filter: grayscale(0.2);
}

/* ===================== Masaüstü: çizimin birebir yerleşimi ===================== */

@media (min-width: 1000px) and (min-height: 480px) and (orientation: landscape) {
  :root {
    --u: min(calc(100vw / 3700), calc(100vh / 1750));
    --u: min(calc(100vw / 3700), calc(100dvh / 1750));
  }

  /* Saha sayfanın üstüne yaslanır, yatayda ortalanır */
  body {
    display: grid;
    justify-content: center;
    align-content: start;
  }

  /* Saha 3700 x 1750: üst 60 + menü 400 + 130 + sahne 1100 + alt 60 */
  .saha {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(130 * var(--u));
    width: calc(3700 * var(--u));
    min-height: calc(1750 * var(--u));
    padding: calc(60 * var(--u)) 0;
  }

  /*
    Menü sahne: sol 50, üst 60, 3600 x 400, 36 x 4 modül (100 x 100).
    Sayfanın üstüne sabit (sticky). Üstteki 60 birimlik boşluk gölgeyle
    siyaha boyanır, kayan içerik menünün üstünden görünmez.
    Izgara saf CSS: her 100 birimde 1px beyaz çizgi, dış çerçeve outline ile.
  */
  .menu {
    position: sticky;
    top: calc(60 * var(--u));
    z-index: 10;
    margin-left: calc(50 * var(--u));
    width: calc(3600 * var(--u));
    height: calc(400 * var(--u));
    display: grid;
    grid-template-columns: repeat(36, calc(100 * var(--u)));
    grid-template-rows: repeat(4, calc(100 * var(--u)));
    gap: 0;
    background-color: var(--bg);
    background-image:
      repeating-linear-gradient(to right, var(--menu-line) 0 1px, transparent 1px calc(100 * var(--u))),
      repeating-linear-gradient(to bottom, var(--menu-line) 0 1px, transparent 1px calc(100 * var(--u)));
    outline: 1px solid var(--menu-frame);
    outline-offset: -1px;
    box-shadow: 0 calc(-60 * var(--u)) 0 0 var(--bg);
  }

  /* Sol metin: sütun 2-13 (x 100-1300). Satır üstleri çizimden ölçüldü. */
  .intro {
    position: relative;
    grid-column: 2 / 14;
    grid-row: 1 / 5;
  }

  .intro__title,
  .intro__subtitle,
  .intro__item {
    position: absolute;
    left: 0;
    margin: 0;
    line-height: 1;
    white-space: nowrap;
  }

  .intro__title    { top: calc(36 * var(--u)); }
  .intro__subtitle { top: calc(92 * var(--u)); }

  .intro__list {
    margin: 0;
    display: block;
  }

  .intro__item {
    padding-left: calc(43 * var(--u));
  }

  .intro__item::before {
    top: calc(12 * var(--u));
  }

  .intro__item--scoring { top: calc(176 * var(--u)); }
  .intro__item--court   { top: calc(302 * var(--u)); }

  .intro__formula {
    margin-top: calc(10 * var(--u));
    margin-left: calc(-3 * var(--u));
  }

  /* 16 Mathematical: sütun 15-29, satır 1-2. 10 Logical: satır 3-4. */
  .demos {
    flex-direction: row;
    align-items: center;
    gap: 0;
    grid-column: 15 / 30;
  }

  .demos--math  { grid-row: 1 / 3; }
  .demos--logic { grid-row: 3 / 5; }

  .demos__title {
    width: calc(500 * var(--u));
    line-height: calc(66 * var(--u));
  }

  .demos__title span {
    display: block;
  }

  .demos__cells {
    align-self: stretch;
    grid-template-rows: repeat(2, calc(100 * var(--u)));
  }

  /* BT: sütun 31 satır 2. E/AA: sütun 31 satır 4. */
  .badge--bt   { grid-column: 31; grid-row: 2; }
  .badge--size { grid-column: 31; grid-row: 4; }

  /* About / Contact / Coffee: x 3145-3500 */
  .links {
    position: relative;
    display: block;
    grid-column: 32 / 37;
    grid-row: 1 / 5;
  }

  .links__box,
  .coffee {
    position: absolute;
    left: calc(45 * var(--u));
  }

  .links__box--about   { top: calc(69 * var(--u)); }
  .links__box--contact { top: calc(140 * var(--u)); height: calc(60 * var(--u)); }
  .coffee              { top: calc(300 * var(--u)); }

  /* Esas sahne: sol 290, menünün 130 altında (üst 590), 3120 x 1100, alt boşluk 60 */
  .stage {
    margin-left: calc(290 * var(--u));
    width: calc(3120 * var(--u));
    height: calc(1100 * var(--u));
    aspect-ratio: auto;
  }

  /* Modal: 3600 x 1269.23 (büyüme oranı 3600 / 3120 = 1.153846), ekranda ortalı */
  .lightbox__img {
    width: calc(3600 * var(--u));
    height: calc(1269.23 * var(--u));
  }

  .lightbox__close {
    top: calc(20 * var(--u));
    right: calc(30 * var(--u));
  }

  .intro__title { top: calc(40 * var(--u)); }

  /* About: sahne alanı içinde üst 600, alt 440, boşluk 60 */
  .about {
    height: calc(1100 * var(--u));
    gap: calc(60 * var(--u));
    align-items: center;
  }

  .about__row {
    justify-content: center;
    gap: calc(60 * var(--u));
  }

  .about__row--top {
    grid-template-columns: repeat(3, calc(600 * var(--u)));
  }

  .about__row--bottom {
    grid-template-columns: calc(1215 * var(--u)) calc(497 * var(--u));
  }

  /* BT / E A A sayfaları: slayt sahneyi doldurur */
  .stage--slide {
    display: grid;
    place-items: center;
  }

  .stage--slide .thumb {
    width: calc(3120 * var(--u));
    height: calc(1100 * var(--u));
    aspect-ratio: auto;
  }

  /* Contact: sahne alanı ikiye bölünür */
  .stage--contact {
    height: auto;
    min-height: calc(1100 * var(--u));
  }

  .contact {
    flex-direction: row;
    gap: calc(90 * var(--u));
    min-height: calc(1100 * var(--u));
    font-size: calc(30 * var(--u));
  }

  .contact__left {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: calc(50 * var(--u));
  }

  .form {
    gap: calc(22 * var(--u));
  }

  .form input,
  .form textarea {
    padding: calc(14 * var(--u)) calc(18 * var(--u));
  }

  .form textarea {
    min-height: calc(250 * var(--u));
  }

  .form__send,
  .info__btn {
    padding: calc(14 * var(--u)) calc(48 * var(--u));
  }

  .info {
    flex-direction: row;
    gap: calc(60 * var(--u));
  }

  .info__block {
    flex: 1 1 0;
  }

  .contact__map {
    flex: 1 1 0;
    min-height: 0;
  }

  .contact__map iframe {
    min-height: 100%;
  }

  .tip {
    font-size: calc(26 * var(--u));
    padding: calc(10 * var(--u)) calc(18 * var(--u));
  }
}