/* TryKodex ortak katman: üst bar, mobil menü, altlık, Sahne geçişi.
   Sayfalar görünüşü yalnız aşağıdaki değişkenleri ezerek değiştirir (kendi sayfa.css'lerinin :root'unda). */
:root {
  --nav-yari: 620px;
  --nav-yazi: #9a9aa2;
  --nav-vurgu: #fff;
  --nav-zemin: rgba(5, 5, 6, .7);
  --nav-zemin-ust: var(--nav-zemin);
  --nav-cizgi: rgba(255, 255, 255, .08);
  --nav-cizgi-ust: var(--nav-cizgi);
  --nav-bulanik: saturate(1.6) blur(16px);
  --nav-bulanik-ust: var(--nav-bulanik);
  --nav-cb-zemin: #ededef;
  --nav-cb-yazi: #000;
  --nav-cb-cizgi: transparent;
  --nav-cb-boy: 40px;
  --nav-cb-dolgu: 18px;
  --nav-cb-punto: 14.5px;
  --nav-hay: inline-flex;
  --menu-zemin: rgba(14, 14, 16, .97);
  --menu-yazi: #ededef;
  --alt-yari: 620px;
  --alt-yazi: #6c6c74;
  --alt-cizgi: rgba(255, 255, 255, .08);
  --alt-zemin: transparent;
  --alt-bosluk: 40px;
  --alt-ust: 0px;
}

/* Betik yoksa (ya da ortak.js yüklenemediyse) .gozle öğeleri gizli kalmasın; ortak.js <html>'e .js koyar. */
html:not(.js) .gozle { opacity: 1 !important; transform: none !important; }

/* Gövde kendi yüksekliğini bilmeyen görselleri ezmesin; sayfa kuralları her zaman kazanır. */
:where(img) { height: auto; }

/* ---------- üst bar ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; padding: 0 max(24px, calc(50% - var(--nav-yari))); font: 500 14px/1 "Hanken Grotesk", sans-serif; color: var(--nav-yazi); background: var(--nav-zemin-ust); border-bottom: 1px solid var(--nav-cizgi-ust); backdrop-filter: var(--nav-bulanik-ust); -webkit-backdrop-filter: var(--nav-bulanik-ust); transition: background .35s, border-color .35s, color .4s; }
.nav.dolu { background: var(--nav-zemin); border-color: var(--nav-cizgi); backdrop-filter: var(--nav-bulanik); -webkit-backdrop-filter: var(--nav-bulanik); }
.nav a { color: inherit; text-decoration: none; }
.nav .m { display: flex; align-items: center; gap: 10px; font: 700 16px/1 "Hanken Grotesk", sans-serif; letter-spacing: .07em; color: #fff; transition: color .4s; }
.nav .m img { width: 24px; height: 24px; border-radius: 6px; background: #fff; }
.nav .baglar { display: flex; gap: 28px; }
.nav .baglar a:hover, .nav .baglar a.on { color: var(--nav-vurgu); }
.nav .sag { display: flex; align-items: center; gap: 10px; }
.nav .cb { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--nav-cb-boy); padding: 0 var(--nav-cb-dolgu); border-radius: 999px; font: 600 var(--nav-cb-punto)/1 "Hanken Grotesk", sans-serif; background: var(--nav-cb-zemin); color: var(--nav-cb-yazi); box-shadow: inset 0 0 0 1px var(--nav-cb-cizgi); transition: background .2s, transform .2s; }
.nav .cb.hay { display: var(--nav-hay); background: transparent; color: #ededef; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.nav .cb.hay:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); }
.menu-dugme { display: none; width: 40px; height: 40px; border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; position: relative; }
.menu-dugme i { position: absolute; left: 11px; right: 11px; height: 1.5px; background: currentColor; transition: transform .25s; }
.menu-dugme i:first-child { top: 16px; } .menu-dugme i:last-child { top: 23px; }
.menu-dugme[aria-expanded="true"] i:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-dugme[aria-expanded="true"] i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.mobil-menu { position: fixed; top: 72px; left: 12px; right: 12px; z-index: 59; display: grid; padding: 8px; border-radius: 18px; background: var(--menu-zemin); color: var(--menu-yazi); box-shadow: 0 24px 60px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .08); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); font: 600 17px/1 "Hanken Grotesk", sans-serif; }
.mobil-menu[hidden] { display: none; }
.mobil-menu a { padding: 16px 14px; border-radius: 12px; color: inherit; text-decoration: none; }
.mobil-menu a:hover, .mobil-menu a[aria-current="page"] { background: rgba(255, 255, 255, .07); }
@media (max-width: 860px) {
  .nav .baglar, .nav .cb.hay { display: none; }
  .menu-dugme { display: inline-block; }
}

/* ---------- altlık ---------- */
.altc { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; max-width: calc(var(--alt-yari) * 2); margin: var(--alt-ust) auto 0; padding: 30px 24px var(--alt-bosluk); border-top: 1px solid var(--alt-cizgi); font: 500 13px/1.6 "IBM Plex Mono", monospace; color: var(--alt-yazi); box-shadow: 0 0 0 100vmax var(--alt-zemin); clip-path: inset(0 -100vmax -100vmax); }
.altc nav { display: flex; gap: 20px; flex-wrap: wrap; }
.altc a { color: inherit; text-decoration: none; }
.altc a:hover { color: #fff; }

/* ---------- Sahne geçişi (çok sayfalı View Transitions) ----------
   İleri: yeni sayfa alttan levha gibi çıkar, eski geriye çekilip kararır. Geri: levha aşağı iner.
   Desteklemeyen tarayıcıda sayfa normal açılır. Yön html[data-yon], ortak.js koyar. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
::view-transition-group(ust-bar) { animation-duration: .45s; z-index: 50; }
::view-transition-image-pair(root) { background: #000; }
::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; animation-duration: .6s; animation-timing-function: cubic-bezier(.22, .9, .25, 1); animation-fill-mode: both; }
html[data-yon="ileri"]::view-transition-old(root) { animation-name: sahne-cekil; }
html[data-yon="ileri"]::view-transition-new(root) { animation-name: sahne-yuksel; box-shadow: 0 -30px 80px rgba(0, 0, 0, .55); border-radius: 28px 28px 0 0; }
html[data-yon="geri"]::view-transition-old(root) { animation-name: sahne-in; z-index: 2; box-shadow: 0 -30px 80px rgba(0, 0, 0, .55); border-radius: 28px 28px 0 0; }
html[data-yon="geri"]::view-transition-new(root) { animation-name: sahne-gel; }
@keyframes sahne-cekil { to { transform: scale(.92) translateY(-2%); opacity: .35; border-radius: 28px; } }
@keyframes sahne-yuksel { from { transform: translateY(100%); } }
@keyframes sahne-in { to { transform: translateY(100%); } }
@keyframes sahne-gel { from { transform: scale(.92) translateY(-2%); opacity: .35; border-radius: 28px; } }