@font-face {
  font-family: 'EuclidFlex';
  src: url('../font/EuclidFlex-Medium.woff2') format('woff2'),
       url('../font/EuclidFlex-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}

:root {
  --bg-dark: #1a2820;
  --text-light: #ffffff;
  --gold: #c9a96e;
  --tile-border: rgba(255, 255, 255, 0.05);
  --modal-overlay: rgba(0, 0, 0, 0.7);
  --vh: 1vh;
}

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

html, body { height: 100%; }

body {
  margin: 0;
  font-family: 'EuclidFlex', sans-serif;
  font-weight: 500;
  background: var(--bg-dark);
  color: var(--text-light);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== Hero Grid ===== */
.hero {
  width: 100%;
  height: 100vh;
  min-height: 700px;
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr) 56px;
  grid-template-rows: repeat(5, 1fr);
  grid-auto-rows: 0;
  height: 100%;
  width: 100%;
  gap: 0;
}

/* ===== Tile (dekoratif): koyu zoom-in default → hover'da parlak + tam ===== */
.tile {
  position: relative;
  background-color: var(--bg-dark);
  background-size: 220%;
  background-position: center;
  background-repeat: no-repeat;
  cursor: default;
  overflow: hidden;
  transition: background-size 0.6s ease;
}

.tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.tile:hover { background-size: cover; }
.tile:hover::before { opacity: 1; }

/* Tile background görselleri */
.tile-1  { background-image: url('../img/webp/tile-01.webp'); }
.tile-2  { background-image: url('../img/webp/tile-02.webp'); }
.tile-3  { background-image: url('../img/webp/tile-03.webp'); }
.tile-4  { background-image: url('../img/webp/tile-04.webp'); }
.tile-5  { background-image: url('../img/webp/tile-05.webp'); }
.tile-6  { background-image: url('../img/webp/tile-06.webp'); }
.tile-7  { background-image: url('../img/webp/tile-07.webp'); }
.tile-8  { background-image: url('../img/webp/tile-08.webp'); }
.tile-9  { background-image: url('../img/webp/tile-09.webp'); }
.tile-10 { background-image: url('../img/webp/tile-10.webp'); }
.tile-11 { background-image: url('../img/webp/tile-11.webp'); }
.tile-12 { background-image: url('../img/webp/tile-12.webp'); }
.tile-13 { background-image: url('../img/webp/tile-13.webp'); }
.tile-14 { background-image: url('../img/webp/tile-14.webp'); }
.tile-15 { background-image: url('../img/webp/tile-15.webp'); }
.tile-16 { background-image: url('../img/webp/tile-16.webp'); }
.tile-17 { background-image: url('../img/webp/tile-17.webp'); }
.tile-18 { background-image: url('../img/webp/tile-18.webp'); }
.tile-19 { background-image: url('../img/webp/tile-19.webp'); }
.tile-20 { background-image: url('../img/webp/tile-20.webp'); }
.tile-21 { background-image: url('../img/webp/tile-21.webp'); }
.tile-22 { background-image: url('../img/webp/tile-22.webp'); }
.tile-23 { background-image: url('../img/webp/tile-23.webp'); }
.tile-24 { background-image: url('../img/webp/tile-24.webp'); }
.tile-25 { background-image: url('../img/webp/tile-25.webp'); }
.tile-26 { background-image: url('../img/webp/tile-26.webp'); }
.tile-27 { background-image: url('../img/webp/tile-27.webp'); }
.tile-28 { background-image: url('../img/webp/tile-28.webp'); }
.tile-29 { background-image: url('../img/webp/tile-29.webp'); }

.tile-1::before  { background-image: url('../img/webp/tile-01-hover.webp'); }
.tile-2::before  { background-image: url('../img/webp/tile-02-hover.webp'); }
.tile-3::before  { background-image: url('../img/webp/tile-03-hover.webp'); }
.tile-4::before  { background-image: url('../img/webp/tile-04-hover.webp'); }
.tile-5::before  { background-image: url('../img/webp/tile-05-hover.webp'); }
.tile-6::before  { background-image: url('../img/webp/tile-06-hover.webp'); }
.tile-7::before  { background-image: url('../img/webp/tile-07-hover.webp'); }
.tile-8::before  { background-image: url('../img/webp/tile-08-hover.webp'); }
.tile-9::before  { background-image: url('../img/webp/tile-09-hover.webp'); }
.tile-10::before { background-image: url('../img/webp/tile-10-hover.webp'); }
.tile-11::before { background-image: url('../img/webp/tile-11-hover.webp'); }
.tile-12::before { background-image: url('../img/webp/tile-12-hover.webp'); }
.tile-13::before { background-image: url('../img/webp/tile-13-hover.webp'); }
.tile-14::before { background-image: url('../img/webp/tile-14-hover.webp'); }
.tile-15::before { background-image: url('../img/webp/tile-15-hover.webp'); }
.tile-16::before { background-image: url('../img/webp/tile-16-hover.webp'); }
.tile-17::before { background-image: url('../img/webp/tile-17-hover.webp'); }
.tile-18::before { background-image: url('../img/webp/tile-18-hover.webp'); }
.tile-19::before { background-image: url('../img/webp/tile-19-hover.webp'); }
.tile-20::before { background-image: url('../img/webp/tile-20-hover.webp'); }
.tile-21::before { background-image: url('../img/webp/tile-21-hover.webp'); }
.tile-22::before { background-image: url('../img/webp/tile-22-hover.webp'); }
.tile-23::before { background-image: url('../img/webp/tile-23-hover.webp'); }
.tile-24::before { background-image: url('../img/webp/tile-24-hover.webp'); }
.tile-25::before { background-image: url('../img/webp/tile-25-hover.webp'); }
.tile-26::before { background-image: url('../img/webp/tile-26-hover.webp'); }
.tile-27::before { background-image: url('../img/webp/tile-27-hover.webp'); }
.tile-28::before { background-image: url('../img/webp/tile-28-hover.webp'); }
.tile-29::before { background-image: url('../img/webp/tile-29-hover.webp'); }

/* ===== Logo karesi (üst orta, parlak/açık zemin) ===== */
.tile--logo {
  grid-column: 4 / 5;
  grid-row: 1 / 2;
  background-image: url('../img/webp/tile-05-hover.webp');
  background-size: cover;
  background-position: center;
  z-index: 2;
}
.tile--logo::before { display: none; }

/* ===== İçerik (slogan yazısı, koyu zemin) ===== */
.tile--content {
  grid-column: 3 / 6;
  grid-row: 2 / 4;
  background: var(--bg-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
  padding: 40px 48px;
  z-index: 2;
}
.tile--content::before { display: none; }

.tile__heading {
  font-size: clamp(26px, 2.4vw, 44px);
  line-height: 1.22;
  font-weight: 500;
  margin: 0;
  letter-spacing: 0.3px;
}

/* ===== Sağ kulakçık ===== */
.tile--cta {
  grid-column: 8 / 9;
  grid-row: 1 / 6;
  background: var(--bg-dark);
  border: none;
  color: var(--text-light);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: background 0.3s ease;
  z-index: 2;
}
.tile--cta::before { display: none; }
.tile--cta:hover { background: rgba(255, 255, 255, 0.05); }
.tile--cta:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; }

.tile--cta span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing: 6px;
  font-size: 13px;
  white-space: nowrap;
  font-weight: 500;
}

/* ===== Modal ===== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal.is-open { display: flex; }
.modal--kvkk { z-index: 1100; }

.modal__overlay {
  position: absolute;
  inset: 0;
  background: var(--modal-overlay);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.modal__content {
  position: relative;
  background: var(--bg-dark);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 50px 40px 40px;
  width: 100%;
  max-width: 480px;
  border-radius: 4px;
  animation: modalIn 0.3s ease;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

.modal__content--text {
  max-width: 640px;
}

@keyframes modalIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.modal__close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  color: var(--text-light);
  font-size: 32px;
  cursor: pointer;
  line-height: 1;
  padding: 4px 10px;
  transition: color 0.2s;
}
.modal__close:hover { color: var(--gold); }

.modal__content h2 {
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.modal__intro {
  margin: 0 0 28px;
  font-size: 14px;
  line-height: 1.6;
  opacity: 0.8;
}

.modal__text-content {
  font-size: 14px;
  line-height: 1.7;
  opacity: 0.9;
}
.modal__text-content h3 {
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 24px 0 8px;
  color: var(--gold);
  font-weight: 500;
}
.modal__text-content ul { padding-left: 20px; margin: 8px 0; }
.modal__text-content li { margin-bottom: 4px; }

/* ===== Form ===== */
.form__field { margin-bottom: 20px; }
.form__field label {
  display: block;
  font-size: 11px;
  letter-spacing: 2px;
  margin-bottom: 8px;
  opacity: 0.7;
  text-transform: uppercase;
}
.form__field input {
  width: 100%;
  padding: 12px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--text-light);
  font-family: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color 0.3s;
  border-radius: 0;
}
.form__field input:focus { border-bottom-color: var(--gold); }
.form__field input.is-invalid { border-bottom-color: #d63838; }
.form__field input:-webkit-autofill {
  -webkit-text-fill-color: var(--text-light);
  -webkit-box-shadow: 0 0 0 1000px var(--bg-dark) inset;
  transition: background-color 5000s ease-in-out 0s;
}

.form__checkbox {
  display: flex;
  gap: 10px;
  font-size: 12px;
  margin-bottom: 25px;
  line-height: 1.5;
  cursor: pointer;
  opacity: 0.85;
}
.form__checkbox input { margin-top: 3px; flex-shrink: 0; }
.form__checkbox a { color: var(--gold); text-decoration: underline; }

.form__submit {
  width: 100%;
  padding: 14px;
  background: var(--text-light);
  color: var(--bg-dark);
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 3px;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
  text-transform: uppercase;
}
.form__submit:hover { background: var(--gold); color: var(--text-light); }
.form__submit:disabled { opacity: 0.6; cursor: not-allowed; }

.form__status {
  margin: 15px 0 0;
  font-size: 13px;
  text-align: center;
  min-height: 20px;
}
.form__status.is-success { color: #6db86d; }
.form__status.is-error   { color: #d63838; }

/* ===== Tablet (768px - 1024px) ===== */
@media (max-width: 1024px) {
  .hero__grid {
    grid-template-columns: repeat(4, 1fr) 48px;
    grid-template-rows: repeat(6, 1fr);
  }
  .tile--content {
    grid-column: 1 / 5;
    grid-row: 2 / 5;
    text-align: center;
    padding: 28px;
  }
  .tile__heading { font-size: 24px; line-height: 1.3; }
  .tile--cta { grid-column: 5 / 6; grid-row: 1 / 7; }
  .tile--cta span { font-size: 11px; letter-spacing: 4px; }
}

/* ===== Mobil (max 767px) ===== */
@media (max-width: 767px) {
  .hero {
    height: 100vh;                       /* fallback (eski tarayıcılar) */
    height: calc(var(--vh) * 100);       /* JS'ten gelen gerçek viewport */
    height: 100dvh;                      /* modern dynamic viewport */
    min-height: 480px;                   /* iPhone SE/4s gibi çok kısa ekranlarda da render */
    overflow: hidden;
  }
  /* Mobilde dikdörtgen tile'larda 175% boşluk yapardı — cover ile dolu tut */
  .tile { background-size: cover; }
  .tile:hover { background-size: cover; }

  .hero__grid {
    grid-template-columns: repeat(4, 1fr) 40px;
    grid-template-rows: repeat(6, 1fr);
  }
  .tile--logo  { grid-column: 2 / 3; grid-row: 1 / 2; }
  .tile--content {
    grid-column: 1 / 5;
    grid-row: 3 / 5;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 14px 18px;
    background: var(--bg-dark);
  }
  .tile__heading {
    font-size: 15px;
    line-height: 1.3;
  }

  .tile--cta {
    grid-column: 5 / 6;
    grid-row: 3 / 5;
    background: var(--bg-dark);
    color: var(--text-light);
    height: auto;
    width: auto;
  }
  .tile--cta span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 11px;
    letter-spacing: 4px;
  }

  .modal__content { padding: 40px 24px 28px; }
  .modal__content h2 { font-size: 19px; }
}

/* ===== Çok küçük ekranlar (≤380px) — iPhone SE 1.gen, Galaxy S4/5, eski Android ===== */
@media (max-width: 380px) {
  .hero__grid {
    grid-template-columns: repeat(4, 1fr) 32px;
  }
  .tile--content { padding: 10px 14px; }
  .tile__heading { font-size: 12px; line-height: 1.25; }
  .tile--cta { grid-column: 5 / 6; }
  .tile--cta span { font-size: 9px; letter-spacing: 2.5px; }
}

/* ===== Düşük yükseklik ekranlar (manzarası yatay / küçük dikey) ===== */
@media (max-height: 600px) and (max-width: 767px) {
  .tile--content { padding: 10px; }
  .tile__heading { font-size: 12px; line-height: 1.25; }
}

/* ===== Ses kontrol butonu (sol üst, fixed) ===== */
.audio-toggle {
  position: fixed;
  top: 18px;
  left: 18px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text-light);
  cursor: pointer;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.3s ease, transform 0.2s ease, border-color 0.3s ease, color 0.3s ease;
  animation: audioPop 0.6s cubic-bezier(0.16, 1, 0.3, 1) 1.8s backwards;
}
.audio-toggle:hover {
  background: rgba(0, 0, 0, 0.65);
  border-color: var(--gold);
  transform: scale(1.06);
  color: var(--gold);
}
.audio-toggle:focus,
.audio-toggle:focus-visible { outline: none; }
.audio-toggle::-moz-focus-inner { border: 0; }
.audio-toggle .audio-icon { width: 18px; height: 18px; }
.audio-toggle .audio-icon--on { display: none; }
.audio-toggle.is-playing .audio-icon--off { display: none; }
.audio-toggle.is-playing .audio-icon--on { display: block; }
.audio-toggle.is-playing { color: var(--gold); border-color: rgba(201, 169, 110, 0.4); }

@keyframes audioPop {
  0%   { opacity: 0; transform: scale(0.4); }
  100% { opacity: 1; transform: scale(1); }
}

@media (max-width: 767px) {
  .audio-toggle {
    top: 12px;
    left: 12px;
    width: 36px;
    height: 36px;
    animation-delay: 1.4s;
  }
  .audio-toggle .audio-icon { width: 15px; height: 15px; }
}

/* ===== Buton focus çerçevesi kaldır ===== */
.tile--cta:focus,
.tile--cta:focus-visible { outline: none; }
.tile--cta::-moz-focus-inner { border: 0; }

/* ===== Giriş animasyonları — mosaic reveal (rastgele yön) ===== */
.tile:not(.tile--logo):not(.tile--content):not(.tile--cta) {
  animation: tileEnterScale 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--enter-delay, 0ms) backwards;
}
.tile[data-dir="t"]:not(.tile--logo):not(.tile--content):not(.tile--cta) { animation-name: tileFromTop; }
.tile[data-dir="b"]:not(.tile--logo):not(.tile--content):not(.tile--cta) { animation-name: tileFromBottom; }
.tile[data-dir="l"]:not(.tile--logo):not(.tile--content):not(.tile--cta) { animation-name: tileFromLeft; }
.tile[data-dir="r"]:not(.tile--logo):not(.tile--content):not(.tile--cta) { animation-name: tileFromRight; }

@keyframes tileEnterScale {
  0%   { opacity: 0; transform: scale(0.6); filter: blur(20px); }
  70%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}
@keyframes tileFromTop {
  0%   { opacity: 0; transform: translateY(-110%); filter: blur(8px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes tileFromBottom {
  0%   { opacity: 0; transform: translateY(110%); filter: blur(8px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes tileFromLeft {
  0%   { opacity: 0; transform: translateX(-110%); filter: blur(8px); }
  100% { opacity: 1; transform: translateX(0); filter: blur(0); }
}
@keyframes tileFromRight {
  0%   { opacity: 0; transform: translateX(110%); filter: blur(8px); }
  100% { opacity: 1; transform: translateX(0); filter: blur(0); }
}

/* Logo karesi, içerik karesi: blur+scale reveal (gecikmeli) */
.tile--logo {
  animation: overlayReveal 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.85s backwards;
}
.tile--content {
  animation: overlayReveal 1.1s cubic-bezier(0.16, 1, 0.3, 1) 1.05s backwards;
}
.tile--content > * {
  animation: contentFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 1.5s backwards;
}
.tile--content > *:nth-child(2) { animation-delay: 1.7s; }

@keyframes overlayReveal {
  0%   { opacity: 0; transform: scale(0.78); filter: blur(16px); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}
@keyframes contentFadeUp {
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Kulakçık sağdan kayar */
.tile--cta {
  animation: ctaSlideIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.6s backwards;
}
@keyframes ctaSlideIn {
  0%   { opacity: 0; transform: translateX(100%); }
  100% { opacity: 1; transform: translateX(0); }
}

@media (max-width: 767px) {
  .tile:not(.tile--logo):not(.tile--content):not(.tile--cta) { animation-duration: 0.6s; }
  .tile--logo { animation-delay: 0.7s; }
  .tile--content { animation-delay: 0.85s; }
  .tile--content > * { animation-delay: 1.1s; }
  .tile--content > *:nth-child(2) { animation-delay: 1.25s; }
  .tile--cta { animation-delay: 1.2s; }
}

/* ===== Erişilebilirlik ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
}