/* ==========================================================================
   CSKPEDIA — hareket.css (10 Ekim 2026)
   Telefon ve tablette canlılık, kaydırma maliyeti olmadan.

   Kurallar:
   - Yalnız transform / scale / rotate / opacity: düzen ve boyama yok, işi
     ekran kartı yapar.
   - Kaydırmaya bağlı olanlar tarayıcının kaydırma zaman çizelgesiyle
     (animation-timeline) ana iş parçacığı dışında yürür; JavaScript yok.
     Desteklemeyen tarayıcıda muhur.js tek seferlik IntersectionObserver
     ile aynı sonucu verir (html.hk-io).
   - Sonsuz döngü yalnız giriş görselinde, o da ekrandan çıkınca durur
     (muhur.js .perde.durdu). Zayıf cihazda (html.hafif) o da kapalı.
   - "Hareketi azalt" açıksa yer değiştiren hiçbir şey çalışmaz.
   Bu dosya bütün sayfalarda en son yüklenir.
   ========================================================================== */
:root{
  --hk-cikis: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ---- 1. Dokunma: parmak değer değmez tepki ------------------------------- */
html{ -webkit-tap-highlight-color: transparent }
a, button, summary, label, [role="button"], [role="tab"]{ touch-action: manipulation }
button, [role="button"], [role="tab"], .dugme, .dugme-ana, .ust-dugme, .yol a, .dekor-sec{
  -webkit-user-select: none; user-select: none;
}
/* basınca hafif içe göçer; scale ayrı özellik olduğu için mevcut transform'larla çakışmaz */
@media (prefers-reduced-motion: no-preference){
  :is(button, .dugme, .dugme-ana, .ust-dugme, .dekor-sec, .yol a, .dj-eylem a, .pg-sekmeler a, .pg-alan):active:not(:disabled){
    scale: .97;
  }
}
/* iOS: 16 px altı alana dokununca sayfa yakınlaşıp kalıyordu */
@media (pointer: coarse){
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea{ font-size: max(16px, 1em) }
}

/* ---- 2. Sayfalar arası geçiş (aynı sitede, tarayıcı destekliyorsa) -------- */
@view-transition{ navigation: auto }
.ust{ view-transition-name: site-ust }
.pg{ view-transition-name: panel-serit }
@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(root){ animation: 160ms ease-out both hk-cik }
  ::view-transition-new(root){ animation: 340ms var(--hk-cikis) 40ms both hk-gir }
}
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){ animation: none }
}
@keyframes hk-cik{ to{ opacity: 0 } }
@keyframes hk-gir{ from{ opacity: 0; transform: translateY(14px) } }

/* ---- 3. Telefon ve tablet ------------------------------------------------- */
@media (hover: none), (max-width: 760px){
  @media (prefers-reduced-motion: no-preference){

    /* giriş görseli: yavaş yakınlaşma (tek katman; ekrandan çıkınca durur) */
    html:not(.hafif) .perde img:first-child{
      animation: hk-yakinlas 22s ease-in-out infinite alternate;   /* will-change yok: katman sırasını bozup görseli zeminin arkasına itiyordu */
    }

    /* yol seçici kartları sırayla gelir */
    .yol li{ animation: hk-gel 620ms var(--hk-cikis) backwards }
    .yol li:nth-child(1){ animation-delay: 420ms }
    .yol li:nth-child(2){ animation-delay: 480ms }
    .yol li:nth-child(3){ animation-delay: 540ms }
    .yol li:nth-child(4){ animation-delay: 600ms }

    @supports (animation-timeline: view()){
      /* kaydırdıkça beliren bölümler — muhur.js HK_HEDEF ile aynı liste */
      .bolum-bas, .istasyon, .dj-kart, .ozellikler > *, .kb-adim, .sira-satir, .veri dl > *, .senin-icin li, .kapanis-ic, .vitrin-yazi{
        animation: hk-belir linear both; animation-timeline: view(); animation-range: entry 4% entry 52%;
      }

      /* dekor şeridi: ortadaki kart öne gelir, yanlardakiler döner (3D karusel) */
      .dekor-izgara{ perspective: 1100px }
      .dekor-izgara > .dekor-kart{
        animation: belir linear both, hk-karusel linear both;
        animation-timeline: view(), view(inline);
        animation-range: entry 0% entry 45%, normal;
      }

      /* pirinç düğmeden ışık geçer: ekrana girerken bir kez */
      .dugme-ana{ view-timeline: --hk-dugme block }
      .dugme-ana::after{ animation: hk-parilti linear both; animation-timeline: --hk-dugme; animation-range: entry 40% cover 45% }
    }
  }
}

/* IntersectionObserver yedeği (view() desteklemeyen tarayıcı; muhur.js) */
@media (prefers-reduced-motion: no-preference){
  html.hk-io :is(.bolum-bas, .istasyon, .dj-kart, .ozellikler > *, .kb-adim, .sira-satir, .veri dl > *, .senin-icin li, .kapanis-ic, .vitrin-yazi){
    transition: opacity 560ms ease-out, transform 700ms var(--hk-cikis);
  }
  html.hk-io :is(.bolum-bas, .istasyon, .dj-kart, .ozellikler > *, .kb-adim, .sira-satir, .veri dl > *, .senin-icin li, .kapanis-ic, .vitrin-yazi):not(.hk-gor){
    opacity: 0; transform: translateY(26px);
  }
}

@keyframes hk-yakinlas{ from{ transform: scale(1.04) } to{ transform: scale(1.15) translate3d(-2.5%, -1.5%, 0) } }
@keyframes hk-gel{ from{ opacity: 0; transform: translateY(16px) scale(.98) } }
@keyframes hk-belir{ from{ opacity: 0; transform: translateY(28px) } to{ opacity: 1; transform: none } }
@keyframes hk-karusel{
  0%   { scale: .9;  rotate: y 14deg }
  50%  { scale: 1;   rotate: y 0deg }
  100% { scale: .9;  rotate: y -14deg }
}
@keyframes hk-parilti{ from{ transform: translateX(-120%) } to{ transform: translateX(120%) } }

/* ==========================================================================
   CAM (Liquid Glass) — telefon ve tablet (10 Ekim 2026)
   Arkasını bulanıklaştırıp renkleri canlandıran yarı saydam yüzey, üst
   kenarda ışık çizgisi, içte ince parlak sınır. Gerçek bulanıklık
   (backdrop-filter) altındaki içerik her değiştiğinde yeniden hesaplanır;
   bu yüzden yalnız KÜÇÜK ve YÜZEN yüzeylerde: üst kapsül, alt seçim çubuğu,
   panel şeridi, ikincil düğmeler, yol kartları. Zayıf cihazda
   (html.hafif) ve "saydamlığı azalt" açıkken bulanıklık yok, aynı görünüm
   koyu yarı saydam zeminle verilir.
   ========================================================================== */
:root{
  --cam-zemin: rgba(16, 27, 60, .38);
  --cam-dolu: rgba(16, 27, 60, .9);
  --cam-isik: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04) 45%, rgba(255,255,255,0) 60%, rgba(255,255,255,.05));
  --cam-kenar: inset 0 1px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(255,255,255,.07), inset 0 0 0 1px rgba(255,255,255,.13);
  --cam-golge: 0 14px 34px -16px rgba(0,0,0,.65);
  --cam-bulanik: blur(18px) saturate(180%);
}
@media (hover: none), (max-width: 760px){
  /* arka plan görseli negatif katmanda: bölüm kendi katman grubu olmazsa
     bulanık cam yüzeyler varken görsel zeminin arkasına çiziliyordu */
  .kapak, .sahne, :has(> .perde){ isolation: isolate }

  /* üst çubuk: sayfanın üstünde yüzen cam kapsül */
  .ust{ position: sticky; top: 0; padding-block: max(8px, env(safe-area-inset-top)) 8px }
  .ust-ic{
    /* kapsül içeriğin dışına taşar: iç boşluk içerik genişliğinden yemesin */
    width: calc(min(var(--genislik), 100% - 2 * var(--kenar)) + 14px);
    padding: 6px 8px 6px 6px; border-radius: 24px;
    background: var(--cam-isik), var(--cam-zemin);
    -webkit-backdrop-filter: var(--cam-bulanik); backdrop-filter: var(--cam-bulanik);
    box-shadow: var(--cam-kenar), var(--cam-golge);
  }

  /* ikincil düğmeler ve yol kartları: görselin üstünde cam */
  .dugme-ikinci, .yol a{
    background: var(--cam-isik), var(--cam-zemin);
    -webkit-backdrop-filter: var(--cam-bulanik); backdrop-filter: var(--cam-bulanik);
    box-shadow: var(--cam-kenar), var(--cam-golge);
  }

  /* OPTIVERA alt seçim çubuğu ve panel şeridi */
  .secim-cubugu{
    background: var(--cam-isik), rgba(16, 27, 60, .5);
    -webkit-backdrop-filter: var(--cam-bulanik); backdrop-filter: var(--cam-bulanik);
    box-shadow: var(--cam-kenar), 0 0 0 1px rgba(233,207,138,.28), 0 24px 50px -20px #000;
  }
  html:not(.hafif) .pg{
    background: var(--cam-isik), rgba(7, 13, 31, .55) !important;
    -webkit-backdrop-filter: var(--cam-bulanik) !important; backdrop-filter: var(--cam-bulanik) !important;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.10), 0 1px 0 rgba(233,207,138,.16), 0 18px 30px -28px #000;
  }

  /* cam üstünde yazı: biraz daha kalın ve parlak kalsın (okunurluk) */
  .ust-ic, .yol a, .secim-cubugu{ text-shadow: 0 1px 1px rgba(0,0,0,.25) }

  /* zayıf cihaz: bulanıklık yok, görünüm aynı tonda */
  html.hafif :is(.ust-ic, .dugme-ikinci, .yol a, .secim-cubugu){
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: var(--cam-isik), var(--cam-dolu);
  }
}
@media (prefers-reduced-transparency: reduce){
  :is(.ust-ic, .dugme-ikinci, .yol a, .secim-cubugu, .pg){
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    background: var(--cam-dolu) !important;
  }
}