/* GoodFlies telefon arayüzü (25 Eyl 2026). Masaüstüne dokunmaz: her kural 760 px altında.
   Fikir: sahne / harita bütün ekranı kaplar; üstte cam bir kapsül (marka, saat, dil, tam ekran), altta yüzen bir sekme adası,
   aralarında tek çekmece. Çekmecenin dudağında Harita/Sahne ve mekân şeridi durur; yukarı çekilince bölge payı ve kartlar.
   Hareketi mobil.js yürütür (yaylar, sürükleme, hız aktarımı); burada yalnız yerleşim, malzeme ve dokunuş ayarları. */

html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; overscroll-behavior: none; }
button, a, [role="button"], .gbtn, .yer, .sk, .altSekme div, .dil span, .tut, .ar, .memur, .tablo, .mTus { touch-action: manipulation; }
button, [role="button"], .gbtn, .yer, .sk, .altSekme div, .dil span, .tut, .mTus {   /* denetimler: uzun basınca metin seçilmesin */
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
input, textarea, select { font-size: 16px; }

@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  :root {
    --m-ust: 46px;                                              /* üst kapsül */
    --m-ust-y: calc(env(safe-area-inset-top, 0px) + 8px);
    --m-ada: 62px;                                              /* sekme adası */
    --m-ada-y: calc(env(safe-area-inset-bottom, 0px) + 10px);
    --m-cekmece-y: calc(var(--m-ada-y) + var(--m-ada) + 8px);   /* çekmece adanın üstünden başlar */
    --m-cam: rgba(15, 11, 21, .64);
    --m-cam-koyu: rgba(12, 9, 18, .82);
    --m-kenar: rgba(255, 255, 255, .09);
    --m-isik: rgba(255, 236, 200, .10);                         /* camın üst kenarına düşen ışık */
    --m-blur: blur(22px) saturate(170%);
  }

  /* ---- iskelet: her şey tuvalin üstünde yüzer */
  #uygulama { display: block; }
  .govde { position: absolute !important; inset: 0; display: block !important; }
  .alt { display: none !important; }

  /* ---- üst kapsül */
  .ust {
    position: absolute; z-index: 40; left: 10px; right: 10px; top: var(--m-ust-y); height: var(--m-ust);
    padding: 0 6px 0 16px !important; gap: 10px !important; align-items: center !important;
    border: 1px solid var(--m-kenar) !important; border-radius: 23px; background: var(--m-cam) !important;
    -webkit-backdrop-filter: var(--m-blur); backdrop-filter: var(--m-blur);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 1px 0 var(--m-isik);
    transition: transform 420ms var(--ease-drawer, cubic-bezier(.32, .72, 0, 1)), opacity 300ms ease;
  }
  .ust .marka b { font-size: 19px !important; letter-spacing: -.01em; }
  .ust .saat { margin-right: auto; }
  .ust .saat .t { font-size: 16px !important; letter-spacing: -.01em; }
  .ust .dil { display: flex; align-items: center; }
  .ust .dil #dilSec { display: flex; border-radius: 14px; overflow: hidden; border: 1px solid var(--m-kenar); }
  .ust .dil span { padding: 6px 9px !important; font-size: 10px !important; }
  .mTus {
    width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; border-radius: 18px; cursor: pointer;
    color: var(--m2, #d8d2e0); background: rgba(255, 255, 255, .05); border: 1px solid var(--m-kenar);
    transition: transform 140ms var(--ease-out, ease-out), background-color 140ms ease;
  }
  .mTus:active { transform: scale(.9); background: rgba(216, 178, 92, .16); }
  .mTus svg { width: 18px; height: 18px; }

  /* ---- sekme adası */
  .altSekme {
    position: absolute !important; z-index: 40; left: 10px; right: 10px; bottom: var(--m-ada-y); height: var(--m-ada);
    flex: none !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(5, 1fr);
    border: 1px solid var(--m-kenar) !important; border-radius: 26px; background: var(--m-cam-koyu) !important;
    -webkit-backdrop-filter: var(--m-blur); backdrop-filter: var(--m-blur);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .5), inset 0 1px 0 var(--m-isik); overflow: hidden;
    transition: transform 420ms var(--ease-drawer, cubic-bezier(.32, .72, 0, 1)), opacity 300ms ease;
  }
  .altSekme div {
    position: relative; z-index: 1; border-top: 0 !important; background: none !important; gap: 5px !important;
    font-size: 8.5px !important; letter-spacing: .1em !important; color: var(--m5, #8b8096) !important;
    transition: color 200ms ease, transform 120ms var(--ease-out, ease-out) !important;
  }
  .altSekme div:active { transform: scale(.92); }
  .altSekme div.on { color: #fff !important; }
  .altSekme div i { width: 17px !important; height: 17px !important; transition: transform 360ms cubic-bezier(.34, 1.4, .5, 1); }
  .altSekme div i.sIkon { width: 23px !important; height: 23px !important; border: 0 !important; border-radius: 0 !important; transform: none !important; }
  .altSekme div i.sIkon svg { width: 100%; height: 100%; display: block; }
  .altSekme div.on i.sIkon { transform: translateY(-1px) scale(1.1) !important; color: var(--altin, #d8b25c); }
  .altSekme div.on i { transform: translateY(-1px) scale(1.08); color: var(--altin, #d8b25c); }
  .altSekme div[data-s=emniyet].on i:not(.sIkon) { transform: rotate(45deg) scale(.98) translateY(-1px); }
  .adaHap {                                                    /* seçili sekmenin arkasındaki hap: mobil.js yayla kaydırır */
    position: absolute; z-index: 0; top: 7px; bottom: 7px; left: 0; border-radius: 19px; pointer-events: none;
    background: linear-gradient(180deg, rgba(164, 35, 47, .55), rgba(122, 27, 36, .38));
    box-shadow: inset 0 1px 0 rgba(255, 200, 190, .18), 0 4px 14px rgba(164, 35, 47, .3); will-change: transform;
  }

  /* ---- şehir: tuval tam ekran */
  .merkez { position: absolute !important; inset: 0; }
  .sol { display: none; }                                      /* telefonda çekmecenin dudağına taşınır (mobil.js) */
  .dudak { display: flex; align-items: center; gap: 8px; padding: 2px 12px 10px; flex: 0 0 auto; }
  .dudak, .dudak * { touch-action: pan-x; }                     /* dikey hareket çekmecenin, yatay mekân şeridinin */
  .dudak .gorunum { flex: 0 0 auto; margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--m-kenar); }
  .dudak .gbtn { padding: 8px 12px; font-size: 10px; letter-spacing: .14em; }
  .dudak #mekanlar {
    display: flex; flex: 1; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
    scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent);
    padding-right: 24px;
  }
  .dudak #mekanlar::-webkit-scrollbar { display: none; }
  .dudak .yer {
    flex: 0 0 auto; scroll-snap-align: start; padding: 8px 12px; border-radius: 16px; border: 1px solid var(--m-kenar) !important;
    background: rgba(255, 255, 255, .04) !important; font-size: 10.5px; letter-spacing: .05em; text-transform: none; gap: 7px;
    transition: background-color 180ms ease, transform 120ms var(--ease-out, ease-out), border-color 180ms ease;
  }
  .dudak .yer:active { transform: scale(.95); }
  .dudak .yer.on { background: rgba(216, 178, 92, .16) !important; border-color: rgba(216, 178, 92, .45) !important; color: #fff; }
  .dudak .yer i { width: 7px; height: 7px; border-radius: 50%; }
  .dudak .yer .s { display: inline !important; font-size: 9.5px; opacity: .7; }
  .dudak .yer.oda { display: none; }
  .odaSekme { display: none !important; }
  .mapZoom { display: none !important; }                        /* telefonda iki parmakla yakınlaşır */
  .baslik { top: calc(var(--m-ust-y) + var(--m-ust) + 10px) !important; left: 14px !important; }
  .arkaKilit { top: calc(var(--m-ust-y) + var(--m-ust) + 10px) !important; right: 12px !important; }
  .lower { bottom: calc(var(--m-cekmece-y) + 104px) !important; left: 12px !important; right: 12px; max-width: none !important;
    border-radius: 14px; background: var(--m-cam) !important; -webkit-backdrop-filter: var(--m-blur); backdrop-filter: var(--m-blur); }
  .rozet { top: calc(var(--m-ust-y) + var(--m-ust) + 8px) !important; bottom: auto !important; left: 10px !important; right: 10px !important;
    border-radius: 14px; overflow: hidden; }
  .baslik { display: none !important; }                         /* süs başlığı: telefonda yer kaplamasın */
  .simdiH { top: calc(var(--m-ust-y) + var(--m-ust) + 12px) !important; left: 12px !important; width: calc(100% - 24px) !important; }
  .simdiH .ol { font-size: 14px; padding: 12px 14px; }             /* telefonda "şu an": üst kapsülün altında, parmakla basılır */
  .arkaKilit { top: calc(var(--m-ust-y) + var(--m-ust) + 52px) !important; }
  .tgBant { bottom: calc(var(--m-cekmece-y) + 176px) !important; left: 10px !important; right: 10px !important; }
  .tgAlt { bottom: calc(var(--m-cekmece-y) + 104px) !important; left: 12px !important; right: 12px !important; font-size: 17px !important; }
  .duyuru { top: calc(var(--m-ust-y) + var(--m-ust) + 8px) !important; left: 10px !important; right: 10px !important; border-radius: 16px;
    border: 1px solid rgba(255, 214, 150, .3) !important; box-shadow: 0 12px 30px rgba(0, 0, 0, .4); }

  /* ---- çekmeceler: yükseklik sabit, konumu yalnız transform (mobil.js yayı); sınıf geçişi CSS'ten değil */
  .levha, .detay {
    position: absolute !important; z-index: 30; left: 8px !important; right: 8px !important; bottom: var(--m-cekmece-y) !important;
    height: calc(100dvh - var(--m-cekmece-y) - var(--m-ust-y) - var(--m-ust) - 10px) !important; max-height: none !important;
    border: 1px solid var(--m-kenar) !important; border-radius: 24px; background: var(--m-cam-koyu) !important;
    -webkit-backdrop-filter: var(--m-blur); backdrop-filter: var(--m-blur);
    box-shadow: 0 -8px 40px rgba(0, 0, 0, .45), inset 0 1px 0 var(--m-isik);
    transition: none !important; overflow: hidden !important; flex-direction: column;
    touch-action: pan-x;                                        /* dikey sürüklemeyi çekmece üstlenir */
  }
  .cekmeceKap { position: absolute; z-index: 30; left: 0; right: 0; top: 0; bottom: var(--m-cekmece-y); overflow: hidden; pointer-events: none; }
  .cekmeceKap > .levha, .cekmeceKap > .detay { bottom: 0 !important; pointer-events: auto; }
  body.s-sehir .levha, body:not(.s-sehir):not(.s-nasil) .detay { display: flex !important; }
  .levha .tut, .detay .tut { flex: 0 0 22px !important; padding: 0 !important; font-size: 0 !important; cursor: grab; }
  .levha .tut::before, .detay .tut::before { top: 9px !important; width: 38px !important; height: 5px !important; border-radius: 3px !important;
    background: rgba(255, 255, 255, .22) !important; }
  .cekmeceIc { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
  .detay .cekmeceIc { padding-bottom: 20px; }

  /* ---- sayfalar (aileler, emniyet, boks, rehber): kapsülün altından adanın üstüne kayar */
  body:not(.s-sehir) .govde { display: flex !important; flex-direction: column; padding-top: calc(var(--m-ust-y) + var(--m-ust) + 6px); }
  body:not(.s-sehir) .ray { flex: 0 0 auto; margin: 0 8px; border-radius: 18px; background: var(--m-cam); border: 1px solid var(--m-kenar) !important;
    -webkit-backdrop-filter: var(--m-blur); backdrop-filter: var(--m-blur); padding: 6px 8px !important; min-height: 46px; }
  body:not(.s-sehir) .orta { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    padding-bottom: calc(var(--m-cekmece-y) + 40px) !important; }
  body.s-nasil #nasil { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(var(--m-ada-y) + var(--m-ada) + 24px); }
  .nsIndeks { top: 0 !important; border-radius: 0 0 16px 16px; }

  /* ---- sinema modu: tam ekranda arayüz dokunulmadıkça çekilir; ilk dokunuşta geri gelir */
  body.sinema .ust { transform: translateY(calc(-100% - var(--m-ust-y) - 4px)); opacity: 0; }
  body.sinema .altSekme { transform: translateY(calc(100% + var(--m-ada-y) + 4px)); opacity: 0; }
  body.sinema .levha, body.sinema .detay, body.sinema .baslik, body.sinema .arkaKilit { opacity: 0; pointer-events: none; }
  body.sinema .levha, body.sinema .detay { transition: opacity 300ms ease !important; }
  body.sinema .lower, body.sinema .tgAlt { bottom: calc(env(safe-area-inset-bottom, 0px) + 18px) !important; }
  body.sinema .tgBant { bottom: calc(env(safe-area-inset-bottom, 0px) + 86px) !important; }
  .levha, .detay, .baslik, .arkaKilit { transition: opacity 300ms ease !important; }

  /* ---- kur / tam ekran sayfası (iPhone: Ana Ekrana Ekle) */
  .mKur { position: fixed; inset: 0; z-index: 60; display: grid; align-items: end; background: rgba(5, 3, 9, .55); opacity: 0; pointer-events: none;
    transition: opacity 260ms ease; }
  .mKur.on { opacity: 1; pointer-events: auto; }
  .mKur .k { margin: 0 8px calc(env(safe-area-inset-bottom, 0px) + 8px); padding: 22px 20px 18px; border-radius: 28px; background: var(--m-cam-koyu);
    border: 1px solid var(--m-kenar); -webkit-backdrop-filter: var(--m-blur); backdrop-filter: var(--m-blur); box-shadow: 0 -10px 50px rgba(0, 0, 0, .5);
    transform: translateY(40px); transition: transform 420ms cubic-bezier(.32, .72, 0, 1); }
  .mKur.on .k { transform: none; }
  .mKur h3 { margin: 0 0 4px; font-family: var(--serif, 'Bodoni Moda', serif); font-weight: 500; font-size: 24px; letter-spacing: -.01em; color: #fff; }
  .mKur p { margin: 0 0 14px; color: var(--m4, #a89fb2); font-size: 13px; line-height: 1.5; }
  .mKur ol { margin: 0 0 16px; padding: 0; list-style: none; counter-reset: a; }
  .mKur li { counter-increment: a; display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--m-kenar); font-size: 14px; color: var(--m2, #d8d2e0); }
  .mKur li::before { content: counter(a); flex: 0 0 26px; height: 26px; display: grid; place-items: center; border-radius: 13px; background: rgba(216, 178, 92, .16);
    color: var(--altin, #d8b25c); font-weight: 600; font-size: 12px; }
  .mKur li svg { width: 20px; height: 20px; flex: 0 0 20px; color: var(--altin, #d8b25c); margin-left: auto; }
  .mKur .dugmeler { display: flex; gap: 8px; }
  .mKur button { flex: 1; font: 600 13px var(--sans, Archivo, sans-serif); letter-spacing: .04em; padding: 13px; border-radius: 16px; border: 1px solid var(--m-kenar);
    background: rgba(255, 255, 255, .06); color: #fff; transition: transform 120ms var(--ease-out, ease-out); }
  .mKur button.ana { background: linear-gradient(180deg, #a4232f, #7a1b24); border-color: rgba(255, 190, 180, .25); }
  .mKur button:active { transform: scale(.97); }

  /* ---- yatay telefon: kapsül ve ada yanlara çekilir, çekmece daralır */
  @media (orientation: landscape) and (max-height: 500px) {
    :root { --m-ust: 40px; --m-ada: 52px; --m-ada-y: calc(env(safe-area-inset-bottom, 0px) + 6px); }
    .ust { left: auto; right: calc(env(safe-area-inset-right, 0px) + 10px); width: 360px; }
    .altSekme { left: calc(env(safe-area-inset-left, 0px) + 10px); right: auto; width: 420px; }
    .levha, .detay { left: auto !important; right: calc(env(safe-area-inset-right, 0px) + 8px) !important; width: 380px; }
    .lower, .tgBant { left: calc(env(safe-area-inset-left, 0px) + 10px) !important; right: 400px !important;
      bottom: calc(var(--m-ada-y) + var(--m-ada) + 10px) !important; }
    .rozet { right: 390px !important; left: calc(env(safe-area-inset-left, 0px) + 10px) !important; top: calc(env(safe-area-inset-top, 0px) + 8px) !important; }
    .arkaKilit { top: calc(var(--m-ust-y) + var(--m-ust) + 8px) !important; }
  }
}

@media (max-width: 760px) and (prefers-reduced-transparency: reduce), (max-height: 500px) and (pointer: coarse) and (prefers-reduced-transparency: reduce) {
  .ust, .altSekme, .levha, .detay, .lower, .mKur .k, body:not(.s-sehir) .ray { background: #0e0b14 !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce), (max-height: 500px) and (pointer: coarse) and (prefers-reduced-motion: reduce) {
  .ust, .altSekme, .mKur .k, .altSekme div i { transition: opacity 200ms ease !important; }
  body.sinema .ust, body.sinema .altSekme { transform: none; }
}