/* =============================================================
   ZEYD ONLINE - Responsive & tercih tabanli kurallar
   -------------------------------------------------------------
   index.html icinde style.css'ten SONRA yuklenir.

   TASARIM KURALI: OYUN HER CIHAZDA YATAYDIR (landscape-only).
   Telefon icin AYRI bir dikey arayuz yoktur; dikey tutuldugunda
   global orientation katmani devreye girer (bkz. style.css
   .orientation-guard ve js/ui/orientationGuard.js).

   Bu dosya yalnizca OLCEK ayarlar: kompozisyon degismez, panel
   sirasi bozulmaz, hicbir sey alt alta dizilmez. Degerler tek
   merkezdeki token'lara yazilir (--ui-scale, --sidebar-w ...).

   Hedef cozunurlukler (hepsi landscape):
     masaustu   1920x1080 / 1600x900 / 1366x768 / 1280x720
     tablet     1024x600 / 960x540
     telefon    896x414 / 844x390 / 800x360 / 740x360 / 667x375
   ============================================================= */

/* -------------------------------------------------------------
   0. YATAY OLCEK BASAMAKLARI
   -------------------------------------------------------------
   Olcek EKRAN YUKSEKLIGINE gore duser: yatay telefonlarda asil
   kisit yuksekliktir. Genislik icin ayrica sidebar daraltilir.
   ------------------------------------------------------------- */

/* Tablet landscape / buyuk telefon */
@media (orientation: landscape) and (max-height: 620px) {
  :root {
    --ui-scale: 0.92;
    --sidebar-w: clamp(9.5rem, 20vw, 12rem);
    --tap-min: 38px;
  }
}

/* Standart yatay telefon (844x390, 800x360 ...) */
@media (orientation: landscape) and (max-height: 460px) {
  :root {
    --ui-scale: 0.82;
    --sidebar-w: clamp(8.2rem, 22vw, 10.5rem);
  }

  .notice__actions { gap: 0.42rem; }
  .notice__actions .ui-button {
    padding: 0.48rem 0.62rem;
    font-size: clamp(0.52rem, 1.45vw, 0.66rem);
    letter-spacing: 0.08em;
  }
}

/* Kucuk yatay telefon (740x360, 667x375 ...) */
@media (orientation: landscape) and (max-height: 380px) {
  :root {
    --ui-scale: 0.72;
    --sidebar-w: clamp(7.4rem, 23vw, 9.4rem);
  }
}

/* Cok alcak yatay telefon: dekoratif satirlar gizlenir, ANA
   fonksiyonlar (menu + harita) tam gorunur kalir. */
@media (orientation: landscape) and (max-height: 420px) {
  .town-sidebar__brand { display: none; }
  .town-map__hud {
    max-width: 34%;
    padding: 0.34rem 0.46rem 0.4rem;
  }
  .town-map__hint { display: none; }
  .town-map__selected-status { display: none; }
  .town-navigation__section > summary { min-height: 1.4rem; }
}

/* Dar yatay ekran: menu genisligi haritanin yarisini yemesin. */
@media (orientation: landscape) and (max-width: 820px) {
  :root { --sidebar-w: clamp(7.2rem, 24vw, 9.2rem); }
}

/* Kabuk kucuk ekranlarda kenar boslugu birakmaz: tam ekran hissi. */
@media (max-width: 1100px), (max-height: 620px) {
  .town-shell {
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 0;
  }
}

/* -------------------------------------------------------------
   1. DAR EKRANLAR (Android landscape, kucuk tabletler)
   ------------------------------------------------------------- */
@media (max-width: 900px) {
  /* Alt orta panel dar ekranda dikeye doner: etiket ustte, bayraklar altta.
     12 bayrak kontrollu sekilde 2 satira duser. */
  .language-bar {
    flex-direction: column;
    gap: 0.35em;
    padding-inline: 0.7em;
  }

  .language-bar__flags {
    grid-template-columns: repeat(6, auto);
  }

  .language-bar__label {
    white-space: normal;
    text-align: center;
  }

  /* Yasal metin satiri daha sikisik */
  .legal {
    gap: 0.55rem;
    letter-spacing: 0.14em;
  }

  .race__cards { gap: 0.6rem; }
  .race-card { --race-card-height: clamp(210px, 48vh, 340px); }

  /* Sidebar genisligi artik --sidebar-w token'indan gelir. */

  .town-player {
    grid-template-columns: 3.4rem minmax(0, 1fr);
    column-gap: 0.55rem;
    padding-inline: 0.62rem;
  }

  .town-navigation { padding-inline: 0.36rem; }
  /* Bilgi paneli haritayi kapatmasin: daha kucuk ve daha az dolgulu. */
  .town-map__hud {
    max-width: 42%;
    padding: 0.42rem 0.55rem 0.48rem;
    top: clamp(0.4rem, 2vh, 0.9rem);
    right: clamp(0.4rem, 1.4vw, 0.9rem);
  }
  .town-map__selected { min-width: min(46%, 11rem); }
}

/* Cok dar ekranlarda yasal metin gizlenir; oncelik logo + PLAY NOW.
   Dil bari 3 kolonlu gridin ORTA kolonunda oldugu icin yasal metin
   gizlense de tam ortada kalmaya devam eder. */
@media (max-width: 620px) {
  .legal {
    display: none;
  }
}

/* -------------------------------------------------------------
   2. ALCAK EKRANLAR (yatay telefon: 480px ve alti yukseklik)
   -------------------------------------------------------------
   Dikey alan kisitli oldugunda logo ve bosluklar kuculur ki
   PLAY NOW her zaman gorunur kalsin.
   ------------------------------------------------------------- */
@media (max-height: 560px) {
  .hero {
    gap: clamp(0.5rem, 1.8vh, 1rem);
  }

  .hero__emblem {
    width: min(66vw, 66vh, 560px);
  }

  .hero__circle {
    width: min(52vh, 38vw, 400px);
  }

  .bottombar {
    padding-bottom: 0.5rem;
  }

  /* Alcak/genis yatay ekranda `cover` gorseli dikeyde kirpar; odak
     noktasi yukari alinir ki insan ve orkun yuzleri gorunur kalsin. */
  .backdrop--hero .backdrop__scene {
    background-position: center 40%;
  }

  /* Alcak yatay ekranda alt orta panel inceltilir. */
  .language-bar {
    gap: 0.3em 0.6em;
    padding: 0.3em 0.7em 0.34em;
  }

  .language-bar__flags {
    gap: 4px;
  }

  .acs-panel {
    width: min(80vw, 30rem);
  }

  .race-card { --race-card-height: 200px; }
  .race-card__description { display: none; }
  .race-card__select { margin-top: 0.55rem; }

  .town-shell { min-height: 0; }
  .town-sidebar__brand { padding-block: 0.48rem; }
  .town-player { padding-block: 0.46rem; }
  /* Alcak ekranda dort deger tek satirda ve daha ince. */
  .town-player__resources { gap: 0.2rem; margin-top: 0.32rem; }
  .town-resource { padding: 0.2rem 0.24rem; }
  .town-resource dd { font-size: clamp(0.5rem, 1.05vh, 0.6rem); }
  .town-navigation { padding-top: 0.12rem; }
  .town-navigation__section > summary { min-height: 1.54rem; padding-block: 0.22rem; }
  .town-navigation__item { padding-block: 0.22rem; }
  .town-map__hud { top: 0.65rem; padding: 0.45rem 0.56rem; }
  /* Gosterge SOL UST kosededir; bottom verilmez (yoksa dikeyde gerilir). */
  .town-map__selected { top: 0.5rem; left: 0.5rem; padding: 0.28rem 0.5rem; }
}

/* Mobil yatay giris: tum ID/parola kontrolleri tek parcada gorunur.
   Ikincil girisler iki sutuna dagitilir; form icinde sayfa kaydirilmaz. */
@media (orientation: landscape) and (max-height: 620px) {
  .screen--login { padding: .2rem; }
  .frame--login {
    width: min(96vw, 50rem);
    height: calc(var(--app-h) - .4rem);
    max-height: calc(var(--app-h) - .4rem);
  }
  .frame--login .frame__header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    min-height: 2.45rem;
    padding: .28rem .7rem;
  }
  .frame--login .frame__brand { margin: 0; font-size: clamp(.68rem, 2.6vh, .88rem); }
  .frame--login .frame__title { font-size: clamp(.62rem, 2.3vh, .8rem); }
  .frame--login .login__form {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-content: center;
    gap: .24rem .42rem;
    overflow: hidden;
    padding: .35rem .7rem .4rem;
  }
  .frame--login .field { grid-column: span 3; margin: 0; }
  .frame--login .field__label { margin-bottom: .14rem; font-size: clamp(.46rem, 1.8vh, .58rem); }
  .frame--login .field__input { min-height: 1.9rem; padding: .32rem .5rem; font-size: .74rem; }
  .frame--login .login__remember-options,
  .frame--login .form-message { grid-column: 1 / -1; }
  .frame--login .login__remember-options { flex-wrap: nowrap; gap: .5rem; min-height: 1.25rem; }
  .frame--login .login__remember-options .checkbox { flex: 1 1 50%; }
  .frame--login .checkbox__label { font-size: clamp(.43rem, 1.65vh, .54rem); letter-spacing: .1em; white-space: nowrap; }
  .frame--login .form-message { min-height: .75rem; margin: 0; font-size: .54rem; }
  .frame--login .frame__actions { grid-column: span 3; gap: .28rem; }
  .frame--login .frame__actions .ui-button,
  .frame--login .login__guest { min-height: 1.9rem; padding: .28rem .45rem; font-size: .58rem; }
  .frame--login .login__guest { grid-column: span 3; width: 100%; margin: 0; }
  .frame--login .login__social { grid-column: span 3; gap: .2rem; margin: 0; }
  .frame--login .login__social-divider { gap: .35rem; font-size: .45rem; }
  .frame--login .login__social-button { min-height: 1.75rem; padding: .2rem .3rem; font-size: .48rem; }
  .frame--login .login__social-mark { width: 1rem; height: 1rem; margin-right: .15rem; }
  .frame--login .login__links {
    grid-column: span 3;
    align-self: center;
    gap: .35rem;
    margin: 0;
    padding: .25rem 0 0;
  }
  .frame--login .link-button { font-size: .5rem; }
  .frame--login .login__hint { grid-column: 4 / -1; margin: -.2rem 0 0; font-size: .46rem; line-height: 1.25; }
  .frame--login:has(.login__confirm-field:not([hidden])) .field { grid-column: span 2; }
}

/* -------------------------------------------------------------
   3. DIKEY (PORTRAIT) MOD
   -------------------------------------------------------------
   Oyun dikeyde OYNANMAZ. Ayri bir portrait yerlesimi tanimlanmaz;
   yalnizca global orientation katmani gorunur (style.css).
   Buradaki tek is, arkada kalan oyunun kaydirilmasini ve
   dokunulmasini engellemektir.
   ------------------------------------------------------------- */
@media (orientation: portrait) {
  body { overflow: hidden; }
  body.is-portrait-blocked .app { touch-action: none; }
}

/* -------------------------------------------------------------
   4. COK GENIS EKRANLAR (ultrawide)
   ------------------------------------------------------------- */
@media (min-aspect-ratio: 21/9) {
  .hero__emblem {
    width: min(52vw, 62vh, 820px);
  }
}

/* -------------------------------------------------------------
   5. DOKUNMATIK CIHAZLAR
   -------------------------------------------------------------
   Hover'a bagimli hicbir DAVRANIS yok; tooltip yalnizca gercek
   isaretleyicisi olan cihazlarda gosterilir.
   ------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .language-flag:hover .language-flag__name,
  .language-flag:focus-visible .language-flag__name {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* -------------------------------------------------------------
   6. HAREKET AZALTMA TERCIHI
   -------------------------------------------------------------
   Animasyonlar kapatilir ama ilerleme cubugu yine dolar
   (bilgi tasidigi icin sadece hizlandirilir).
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .backdrop__glow,
  .backdrop__ember,
  .backdrop--hero .backdrop__embers::before,
  .hero__circle,
  .ui-button--hero,
  .acs-panel,
  .acs-panel__scan::after,
  .acs-progress__fill::after,
  .acs-status.is-swap,
  .town-map__selected {
    animation: none !important;
  }

  .backdrop__ember {
    opacity: 0.35;
  }

  .screen,
  .ui-button,
  .language-flag,
  .language-flag__img,
  .language-flag__name,
  .modal-overlay,
  .modal-panel,
  .acs-verified {
    transition-duration: 1ms !important;
  }
}

/* -------------------------------------------------------------
   7. YUKSEK KONTRAST / ZORLANMIS RENK MODU
   ------------------------------------------------------------- */
@media (forced-colors: active) {
  .ui-button,
  .language-flag,
  .acs-panel,
  .modal-panel {
    border-color: CanvasText;
  }
}