*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--zemin); color: var(--yazi); min-height: 100svh; overflow-x: clip; overflow-wrap: break-word; }
img, picture, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
[hidden] { display: none !important; }

html:not(.js) [data-araclar], html:not(.js) [data-suzgec] { display: none; }
:focus-visible { outline: 2px solid var(--odak); outline-offset: 3px; }
::selection { background: var(--vurgu); color: var(--vurgu-ustu); }
main:focus { outline: none; }
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }

.gizli {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.atla {
  position: fixed; left: 1rem; top: -4rem; z-index: 200;
  padding: .7rem 1rem; border-radius: 6px;
  background: var(--yazi); color: var(--zemin); text-decoration: none;
}
.atla:focus { top: 1rem; }

.konsept {
  position: relative; z-index: 60;
  background: var(--konsept-zemin, var(--yazi)); color: var(--konsept-yazi, var(--zemin));
  font-size: .8125rem; line-height: 1.35;
}
.konsept-ic {
  display: flex; align-items: center; gap: .75rem 1rem;
  max-width: var(--genislik, 1320px); margin: 0 auto;
  padding: .45rem var(--kenar, clamp(1rem, 4vw, 2.5rem));
}
.konsept p { margin: 0; min-width: 0; }
.konsept-etiket {
  display: inline-block; padding: .12rem .5rem; border-radius: 999px;
  border: 1px solid currentColor; font-weight: 600; white-space: nowrap;
}
.konsept-metin { opacity: .78; }
.konsept-don { margin-left: auto; white-space: nowrap; text-underline-offset: 3px; }
.konsept-don:hover { text-decoration-thickness: 2px; }
@media (max-width: 700px) { .konsept-metin { display: none; } }

.tema-dugme {
  display: none; place-items: center; flex: none;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent); border-radius: 50%;
  background: transparent; color: inherit;
}
.js .tema-dugme { display: inline-grid; }
.tema-dugme svg { width: 17px; height: 17px; }
.tema-dugme .simge-ay { display: none; }
[data-tema="acik"] .tema-dugme .simge-gunes { display: none; }
[data-tema="acik"] .tema-dugme .simge-ay { display: block; }
.tema-dugme:hover { border-color: currentColor; }
.konsept :focus-visible { outline-color: currentColor; }

.menu-panel {
  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: column;
  padding: 5.5rem var(--kenar, clamp(1.25rem, 6vw, 2.5rem)) 2rem;
  background: var(--zemin); color: var(--yazi);
  overflow-y: auto; overscroll-behavior: contain;
}
.menu-acik { overflow: hidden; }

[data-ust] {
  position: sticky; top: 0; z-index: 80;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1), background-color .3s, box-shadow .3s;
  view-transition-name: ust-bar;
}
[data-ust].ust-cekik { transform: translateY(-105%); }
@media (prefers-reduced-motion: reduce) {
  [data-ust] { transition: none; }
  [data-ust].ust-cekik { transform: none; }
}

@view-transition { navigation: auto; }
.konsept { view-transition-name: konsept; }
::view-transition-old(root) { animation: .22s cubic-bezier(.4, 0, 1, 1) both vgCik; }
::view-transition-new(root) { animation: .5s cubic-bezier(.16, 1, .3, 1) both vgGir; }
@keyframes vgCik { to { opacity: 0; } }
@keyframes vgGir { from { opacity: 0; } }

html.tema-gecis::view-transition-old(root) { animation: none; }
html.tema-gecis::view-transition-new(root) { animation: .7s cubic-bezier(.65, 0, .35, 1) both temaYayil; }
@keyframes temaYayil {
  from { clip-path: circle(0 at var(--tx, 100%) var(--ty, 0)); }
  to   { clip-path: circle(150vmax at var(--tx, 100%) var(--ty, 0)); }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { scroll-behavior: auto !important; }
}

.alt-cubuk { display: none; }
@media (max-width: 699px) {
  .alt-cubuk {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 85;
    display: flex; align-items: center; gap: .75rem;
    padding: .7rem var(--kenar, 1.25rem) max(.7rem, env(safe-area-inset-bottom));
    background: var(--zemin); color: var(--yazi);
    box-shadow: 0 -1px 0 var(--cizgi-guclu, var(--cizgi));
    transform: translateY(110%); transition: transform .5s cubic-bezier(.16, 1, .3, 1);
  }
  .alt-cubuk.gorunur { transform: none; }
  .alt-cubuk-bilgi { flex: 1; min-width: 0; font-size: .8125rem; line-height: 1.3; }
  .alt-cubuk-bilgi strong { display: block; font-size: .9375rem; }
  body.alt-cubuklu { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .menu-acik .alt-cubuk { transform: translateY(110%); }

  [data-kaydirmali] {
    display: flex !important; gap: .9rem; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--kenar);
    margin-inline: calc(var(--kenar) * -1) !important; padding-inline: var(--kenar) !important;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  [data-kaydirmali]::-webkit-scrollbar { display: none; }
  [data-kaydirmali] > * { flex: 0 0 var(--kart-genislik, 78%); scroll-snap-align: start; margin-top: 0 !important; }
  .kaydirma-cizgi { height: 2px; margin-top: 1rem; background: var(--cizgi); border-radius: 2px; overflow: hidden; }
  .kaydirma-cizgi span { display: block; height: 100%; width: 100%; background: var(--yazi); transform-origin: 0 50%; transform: scaleX(var(--k, .3)); }
}
@media (min-width: 700px) { .kaydirma-cizgi { display: none; } }
@media (prefers-reduced-motion: reduce) { .alt-cubuk { transition: none; } }

.film-atla {
  position: absolute; left: var(--kenar); top: 1rem; z-index: 30;
  padding: .55rem .9rem; border-radius: 6px; background: var(--yazi); color: var(--zemin);
  text-decoration: none; transform: translateY(-300%); transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}
.film-atla:focus-visible { transform: none; }
.film-tuval { visibility: hidden; }
.film-cizildi .film-tuval { visibility: visible; }
[data-cizgi] { stroke-dasharray: 1 1; }