@layer temel, yerlesim, bilesen, hareket;

@layer temel {
  :root {
    color-scheme: dark;
    --zemin: #060f22; --zemin-2: #0a1830; --yuzey: rgb(255 255 255 / .045); --yuzey-2: rgb(255 255 255 / .08);
    --cizgi: rgb(148 170 255 / .18); --cizgi-guclu: rgb(148 170 255 / .34);

    --bolme-renk: linear-gradient(90deg, transparent, rgb(34 211 238 / .55) 18%, rgb(139 92 246 / .7) 50%, rgb(217 70 239 / .55) 82%, transparent);
    --bolme-isik: 0 0 10px 1px rgb(139 92 246 / .35), 0 0 3px rgb(34 211 238 / .3);
    --metin: #e9eef8; --ikincil: #a3b2cc; --soluk: #7d8ca8;
    --camgobegi: #22d3ee; --mor: #8b5cf6; --eflatun: #d946ef;
    --gecis: linear-gradient(90deg, var(--camgobegi), var(--mor) 55%, var(--eflatun));
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --genislik: 72rem; --yan: clamp(1rem, 4vw, 2.5rem);
    --hiz: 0;
    --yay: cubic-bezier(.3, 1.35, .5, 1);
  }
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; -webkit-text-size-adjust: 100%; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body { margin: 0; background: var(--zemin); color: var(--metin); font: 400 1rem/1.65 var(--font); overflow-x: clip; }
  h1, h2, h3, h4, p, ol, ul, dl, dd, figure { margin: 0; }
  ol, ul { padding: 0; list-style: none; }
  a { color: inherit; }
  img { display: block; max-width: 100%; }
  :focus-visible { outline: 2px solid var(--camgobegi); outline-offset: 3px; border-radius: 6px; }
  .gizli, .gizli-metin { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .simge-kaynak { position: absolute; width: 0; height: 0; overflow: hidden; }
  .atla { position: absolute; left: -999px; top: .5rem; z-index: 50; background: var(--metin); color: var(--zemin); padding: .5rem 1rem; border-radius: 8px; }
  .atla:focus { left: .5rem; }
  svg.simge { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
}

@layer yerlesim {
  .ic { position: relative; max-width: var(--genislik); margin-inline: auto; padding-inline: var(--yan); }

  .ust-serit { position: sticky; top: 0; z-index: 20; background: rgb(6 15 34 / .8); backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid var(--cizgi); }
  .ust-serit .ic { display: flex; align-items: center; gap: 1rem; min-height: 3.75rem; }
  .marka { font-weight: 700; font-size: 1.125rem; text-decoration: none; letter-spacing: -.01em; margin-inline-end: auto; }
  .ana-menu ul { display: flex; gap: .25rem; }
  .ana-menu a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .85rem; text-decoration: none; color: var(--ikincil); font-size: .9375rem; position: relative; }
  .ana-menu a:hover { color: var(--metin); }
  .ana-menu a::after { content: ""; position: absolute; left: .85rem; right: .85rem; bottom: 6px; height: 2px; border-radius: 2px; background: var(--gecis); scale: 0 1; transition: scale .25s; }
  .ana-menu a:hover::after { scale: 1 1; }
  .dil { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--cizgi-guclu); text-decoration: none; font-size: .9375rem; }
  .dil:hover { background: var(--yuzey-2); }
  .dil .bayrak { margin-inline-end: .35em; }

  .menu-dugme { display: none; }
  .ana-menu[popover] { position: static; inset: auto; margin: 0; padding: 0; border: 0; background: none; color: inherit; overflow: visible; display: block; }

  .kahraman { position: relative; overflow: hidden; min-height: min(36rem, 86vh); display: grid; align-items: center;
    background: var(--zemin) url("gorseller/gece-site-kahraman.jpg") right top / auto 117% no-repeat; }
  .kahraman::after, .bolum + .bolum::before, .altbilgi::before { content: ""; position: absolute; left: 0; right: 0; height: 2px; pointer-events: none;
    background: var(--bolme-renk); box-shadow: var(--bolme-isik); border-radius: 2px; }
  .kahraman::after { bottom: 0; }
  .bolum + .bolum::before, .altbilgi::before { top: -1px; }
  .kahraman .ic { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; padding-block: 4rem; }
  .kimlik h1 { font-size: clamp(2.75rem, 7vw, 4.75rem); line-height: 1.02; font-weight: 800; letter-spacing: -.03em; text-shadow: 0 2px 24px rgb(6 15 34 / .5); }

  .unvan, .gorev, .kurum, .haplar { margin-inline-start: 1rem; }
  .unvan { margin-top: .6rem; font-size: clamp(1.25rem, 2.4vw, 1.6rem); color: #c9d6f2; font-weight: 600; }
  .gorev { margin-top: .9rem; padding-inline-start: .85rem; border-inline-start: 3px solid; border-image: linear-gradient(var(--camgobegi), var(--eflatun)) 1; font-weight: 700; font-size: 1.125rem; }
  .kurum { margin-top: .9rem; color: #eef2fa; font-weight: 600; max-width: 27rem; text-shadow: 0 1px 12px rgb(6 15 34 / .9); }
  .birim-parca { display: inline-block; }
  .birim-ayirici { margin-inline-start: .3em; }
  .haplar { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.75rem; }
  .hap { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 1.1rem; border-radius: 999px; text-decoration: none; font-size: .9375rem;
    background: rgb(6 15 34 / .55); border: 1px solid var(--cizgi-guclu); backdrop-filter: blur(6px); transition: border-color .2s, translate .35s var(--yay); }
  .hap:hover { border-color: var(--camgobegi); translate: 0 -2px; }
  .hap .ok { color: var(--soluk); }
  .monogram { display: grid; place-items: center; width: clamp(6.5rem, 12vw, 9rem); aspect-ratio: 1; border-radius: 1.5rem; font-size: clamp(2.25rem, 4.5vw, 3.25rem); font-weight: 800;
    background: linear-gradient(145deg, #2563eb, #7c3aed 60%, #c026d3); box-shadow: 0 20px 50px -20px rgb(124 58 237 / .8), inset 0 1px 0 rgb(255 255 255 / .35); }

  .monogram:not(:has(img)) { display: none; }
  .monogram img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

  .gec { position: fixed; z-index: 25; left: 50%; translate: -50% 0; display: grid; justify-items: center; gap: .3rem;
    font-size: .8125rem; color: #c9d6f2; text-decoration: none; padding: .5rem .95rem .45rem; border-radius: 1.1rem;
    background: rgb(6 15 34 / .72); border: 1px solid var(--cizgi-guclu); backdrop-filter: blur(10px);
    transition: color .4s, border-color .4s, box-shadow .5s ease, background-color .4s, opacity .35s, translate .35s var(--yay), visibility .35s; }
  :root:not(.js) .gec { display: none; }
  #sonraki { bottom: max(1rem, env(safe-area-inset-bottom)); }
  #onceki { top: calc(var(--ust, 3.75rem) + .75rem); grid-auto-flow: row; }
  @media (hover: hover) {
    .gec:hover { color: #fff; border-color: rgb(148 170 255 / .45); background-color: rgb(10 24 48 / .8);
      box-shadow: 0 0 22px -4px rgb(139 92 246 / .45), 0 0 10px -2px rgb(34 211 238 / .25); }
    .gec:hover span { border-color: rgb(255 255 255 / .75); }
  }
  #sonraki.bitti { opacity: 0; translate: -50% 1.5rem; visibility: hidden; pointer-events: none; }
  #onceki.bitti { opacity: 0; translate: -50% -1.5rem; visibility: hidden; pointer-events: none; }
  .gec-ad { font-weight: 500; white-space: nowrap; transition: opacity .2s; }
  .gec.degisiyor .gec-ad { opacity: 0; }
  .gec span { display: grid; place-items: center; width: 1.6rem; height: 2.4rem; border: 1.5px solid rgb(201 214 242 / .55); border-radius: 1rem; overflow: hidden; transition: border-color .4s; }
  .gec-ok { display: block; width: .95rem; height: .95rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  #onceki .gec-ok { rotate: 180deg; }

  .bolum { position: relative; padding-block: clamp(3.5rem, 8vw, 6rem); isolation: isolate; overflow-x: clip; }

  .bolum-bas { margin-bottom: 2rem; }
  .bolum-bas h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
  .bolum-bas .cizgi { display: block; width: 3.5rem; height: 3px; margin-top: .7rem; border-radius: 3px; background: var(--gecis); transform-origin: 0 50%; }
  .bolum-bas p { margin-top: .8rem; color: var(--ikincil); }

  .isik { position: absolute; z-index: -3; inset: -18% 0; pointer-events: none; opacity: .55;
    background: radial-gradient(40% 45% at var(--ix, 15%) var(--iy, 40%), var(--ir, rgb(34 211 238 / .16)), transparent 70%),
                radial-gradient(35% 40% at calc(var(--ix, 15%) + 55%) calc(var(--iy, 40%) + 25%), var(--ir2, rgb(139 92 246 / .14)), transparent 70%); }
  .b-arastirma .isik { --ix: 10%; --iy: 30%; }
  .b-akademik .isik  { --ix: 30%; --iy: 50%; --ir: rgb(139 92 246 / .18); --ir2: rgb(34 211 238 / .1); }
  .b-yayinlar .isik  { --ix: 55%; --iy: 35%; --ir: rgb(217 70 239 / .12); --ir2: rgb(139 92 246 / .14); }
  .b-dersler .isik   { --ix: 20%; --iy: 45%; --ir: rgb(34 211 238 / .14); --ir2: rgb(217 70 239 / .1); }
  .b-iletisim .isik  { --ix: 40%; --iy: 60%; --ir: rgb(139 92 246 / .16); --ir2: rgb(217 70 239 / .14); }

  .kose-foto { position: absolute; z-index: -2; pointer-events: none; inset: 0 0 auto 0; height: 19rem; opacity: .9;
    background: var(--foto) center 45% / cover no-repeat;
    mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / .25) 30%, #000 70%), linear-gradient(180deg, #000 55%, transparent);
    mask-composite: intersect; }
  .b-arastirma .kose-foto { --foto: url("gorseller/gece-site-1.jpg"); }
  .b-akademik .kose-foto { --foto: url("gorseller/gece-site-2.jpg"); }
  .b-yayinlar .kose-foto { --foto: url("gorseller/gece-site-3.jpg"); }
  .b-dersler .kose-foto { --foto: url("gorseller/gece-site-4.jpg"); background-position: center 60%; }
  .b-iletisim .kose-foto { --foto: url("gorseller/gece-site-5.jpg"); }
  .b-iletisim .kose-foto { background-position: center 55%; }
  .b-arastirma .kose-foto { display: none; }
  .b-dersler .izgara { max-width: 46rem; }

  .izgara { display: grid; grid-template-columns: 1.35fr 1fr; gap: 1.5rem; align-items: start; }
  .b-arastirma .izgara { grid-template-columns: 1.25fr 1fr .85fr; align-items: stretch; }
  .yayin-duzen { display: block; }
}

@layer bilesen {
  .cam { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 1rem; backdrop-filter: blur(12px); padding: 1.5rem; }
  .cam h3 { font-size: 1.0625rem; font-weight: 700; margin-bottom: 1rem; }
  .tanitim { font-size: 1.0625rem; color: #d3dcee; }
  .alan-listesi li { display: flex; gap: 1rem; align-items: baseline; padding: .8rem 0; border-top: 1px solid var(--cizgi); }
  .alan-listesi li:first-child { border-top: 0; padding-top: 0; }
  .alan-listesi .no { font-weight: 700; background: var(--gecis); -webkit-background-clip: text; background-clip: text; color: transparent; }

  .foto-kart { position: relative; border-radius: 1rem; overflow: hidden; border: 1px solid var(--cizgi); min-height: 14rem; box-shadow: 0 30px 60px -30px rgb(0 0 0 / .8); }
  .foto-kart img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
  .foto-kart::after { content: ""; position: absolute; inset: auto 0 0 auto; width: 3px; height: 60%; background: linear-gradient(var(--camgobegi), var(--eflatun)); }
  .b-arastirma .foto-kart img { object-position: 78% 40%; }

  .ak-sec { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
  .ak-kartlar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
  .ak-kartlar:not(:has(> :nth-child(5))) { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
  .ak-kartlar:has(> :nth-child(6)) { grid-template-columns: repeat(3, 1fr); }
  .ak-kart { display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem; min-height: 9.5rem; cursor: pointer; position: relative; background: rgb(10 24 48 / .72);
    transition: border-color .25s, background-color .25s, translate .45s var(--yay); }
  .ak-kart:hover { border-color: var(--cizgi-guclu); }
  .ak-kart .simge-kutu { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .8rem; border: 1px solid var(--cizgi-guclu); color: #b9c8ff; }
  .ak-kart strong { font-size: 1rem; }
  .ak-kart small { color: var(--ikincil); font-size: .8125rem; line-height: 1.45; }
  .ak-kart .sayi { margin-top: auto; font-size: .75rem; color: var(--soluk); display: flex; justify-content: space-between; align-items: center; }
  .ak-kart .sayi .ok { font-size: 1rem; color: #b9c8ff; transition: rotate .3s; }
  .ak-kart::after { content: ""; position: absolute; inset: auto 1.25rem -1px; height: 2px; border-radius: 2px; background: var(--gecis); scale: 0 1; transition: scale .35s; }
  .ak-kart:has(.ak-sec:checked) { border-color: rgb(139 92 246 / .7); background: linear-gradient(160deg, rgb(34 211 238 / .1), rgb(139 92 246 / .13)); translate: 0 -2px; }
  .ak-kart:has(.ak-sec:checked)::after { scale: 1 1; }
  .ak-kart:has(.ak-sec:focus-visible) { outline: 2px solid var(--camgobegi); outline-offset: 3px; }
  .ak-paneller { margin-top: 1.25rem; }
  .ak-panel { padding: clamp(1.25rem, 3vw, 2rem); margin-bottom: 1rem; }

  @supports selector(:has(*)) { .ak-panel { display: none; margin-bottom: 0; } }
  .ak-panel h3 { font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--camgobegi); margin-bottom: 1.25rem; }
  .ak:has(#ak-gorev:checked) #p-gorev, .ak:has(#ak-egitim:checked) #p-egitim, .ak:has(#ak-proje:checked) #p-proje,
  .ak:has(#ak-sertifika:checked) #p-sertifika, .ak:has(#ak-kongre:checked) #p-kongre, .ak:has(#ak-tez:checked) #p-tez { display: block; animation: panel-ac .38s cubic-bezier(.2,.7,.2,1); }
  @keyframes panel-ac { from { opacity: 0; translate: 0 .6rem; } }

  .cizelge { position: relative; padding-inline-start: 1.5rem; }
  .cizelge::before { content: ""; position: absolute; left: .3rem; top: .45rem; bottom: .45rem; width: 2px; background: linear-gradient(var(--camgobegi), var(--mor), var(--eflatun)); opacity: .5; border-radius: 2px; }
  .cizelge li { position: relative; padding-bottom: 1.1rem; }
  .cizelge li:last-child { padding-bottom: 0; }
  .cizelge li::before { content: ""; position: absolute; left: -1.5rem; top: .45rem; width: .65rem; height: .65rem; border-radius: 50%; background: var(--zemin); border: 2px solid var(--mor); }
  .cizelge .donem { display: block; font-size: .8125rem; color: var(--camgobegi); font-variant-numeric: tabular-nums; font-weight: 600; }
  .cizelge .olay, .cizelge .alt { display: block; }
  .cizelge .alt { color: var(--ikincil); font-size: .9375rem; }
  .cizelge .tez { display: block; color: var(--soluk); font-style: italic; font-size: .875rem; margin-top: .15rem; }
  .ara-bas { font-size: .75rem !important; letter-spacing: .12em; text-transform: uppercase; color: var(--soluk) !important; margin: 0 0 .8rem !important; }
  .iki-sutun { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
  .proje-kart { padding: 1.25rem; border-radius: .9rem; border: 1px solid var(--cizgi); background: var(--yuzey); }
  .proje-kart .etiketler { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
  .etiket { font-size: .8125rem; padding: .2rem .7rem; border-radius: 999px; border: 1px solid var(--cizgi-guclu); color: #c8d4ee; }
  .katla { margin-top: 1rem; }

  .katla > summary, .tum-yayin > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; font-weight: 600;
    transition: border-color .4s, box-shadow .5s ease, color .3s; }
  .katla > summary::-webkit-details-marker, .tum-yayin > summary::-webkit-details-marker { display: none; }
  .katla > summary::after, .tum-yayin > summary::after { content: ""; width: .5rem; height: .5rem; margin: -.2rem .1rem 0 .15rem; border: solid currentColor; border-width: 0 2px 2px 0;
    rotate: 45deg; transition: rotate .3s var(--yay), margin .3s; }
  .katla[open] > summary::after, .tum-yayin[open] > summary::after { rotate: -135deg; margin-top: .25rem; }
  :is(.katla, .tum-yayin) > summary .acik, :is(.katla, .tum-yayin)[open] > summary .kapali { display: none; }
  :is(.katla, .tum-yayin)[open] > summary .acik { display: inline; }
  .katla > summary { padding: 0 1.1rem; border-radius: 999px; border: 1px solid var(--cizgi-guclu); background: var(--yuzey); color: #c9d6f2; font-size: .9375rem; }
  @media (hover: hover) {
    .katla > summary:hover, .tum-yayin > summary:hover { color: #fff; box-shadow: 0 0 22px -4px rgb(139 92 246 / .45), 0 0 10px -2px rgb(34 211 238 / .25); }
    .katla > summary:hover { border-color: rgb(148 170 255 / .45); }
  }
  :is(.katla, .tum-yayin) > summary .sayi { font: inherit; color: inherit; }
  .katla > .cizelge { margin-top: .75rem; }

  .yayin-satir { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1rem 1.25rem; border-top: 1px solid var(--cizgi); }
  .yayin-satir:first-child { border-top: 0; }
  .yayin-satir .simge-kutu { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: .7rem; border: 1px solid var(--cizgi-guclu); color: #b9c8ff; }
  .yayin-satir .ust { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--camgobegi); font-weight: 700; }
  .kunye { color: #d3dcee; font-size: .9375rem; }
  .kunye-bag { color: var(--camgobegi); font-size: .875rem; text-underline-offset: 3px; position: relative; }
  .kunye-bag::after { content: ""; position: absolute; inset: -.7rem -.4rem; }
  .liste-cam { padding: 0; overflow: hidden; }
  .suzgec { position: relative; border: 0; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .5rem; }
  .suzgec input { position: absolute; opacity: 0; }
  .suzgec label { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--cizgi-guclu); cursor: pointer; font-size: .875rem; color: var(--ikincil); }
  .suzgec input:checked + label { color: #06101f; background: linear-gradient(90deg, var(--camgobegi), #60a5fa); border-color: transparent; font-weight: 600; }
  .suzgec input:focus-visible + label { outline: 2px solid var(--camgobegi); outline-offset: 2px; }
  .yayin-alani:has(#t-makale:checked) .yayin-satir:not([data-tur="makale"]),
  .yayin-alani:has(#t-kitap:checked) .yayin-satir:not([data-tur="kitap"]),
  .yayin-alani:has(#t-bolum:checked) .yayin-satir:not([data-tur="bolum"]),
  .yayin-alani:has(#t-bildiri:checked) .yayin-satir:not([data-tur="bildiri"]) { display: none; }
  .tum-yayin > summary { padding: 0 1.25rem; margin-top: 1.25rem; border-radius: 999px;
    border: 1px solid transparent; background: linear-gradient(var(--zemin-2), var(--zemin-2)) padding-box, var(--gecis) border-box; }
  .tum-yayin[open] > summary { margin-bottom: 1.25rem; }
  .sayi { font-size: .75rem; color: var(--soluk); font-weight: 500; }

  .satirlar li { display: flex; align-items: center; gap: 1rem; padding: .95rem 0; border-top: 1px solid var(--cizgi); }
  .satirlar li:first-child { border-top: 0; padding-top: 0; }
  .satirlar li:last-child { padding-bottom: 0; }
  .satirlar .simge { color: #b9c8ff; }
  .satirlar .ad { color: var(--ikincil); font-size: .8125rem; min-width: 4.5rem; }
  .saat { font-size: 1.375rem; font-weight: 600; background: var(--gecis); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .b-iletisim .bolum-bas { margin-bottom: 6rem; }
  .iletisim-izgara { display: grid; grid-template-columns: repeat(3, 1fr) 1.15fr; gap: 1rem; align-items: start; }
  .iletisim-izgara .cam { display: flex; flex-direction: column; gap: .55rem; background: rgb(10 24 48 / .7); }
  .iletisim-izgara .simge { width: 1.6rem; height: 1.6rem; color: #b9c8ff; }
  .iletisim-izgara h3 { margin: .25rem 0 0; font-size: 1rem; }
  .iletisim-izgara p { color: var(--ikincil); font-size: .9375rem; overflow-wrap: anywhere; }
  .eposta-at::before { content: "@"; }
  .profiller li a { display: flex; align-items: center; justify-content: space-between; min-height: 40px; text-decoration: none; border-top: 1px solid var(--cizgi); font-size: .9375rem; }
  .profiller li:first-child a { border-top: 0; }
  .profiller li a:hover { color: var(--camgobegi); }

  .altbilgi { padding-block: 2rem 2.5rem; color: var(--soluk); font-size: .875rem; position: relative; }
  .altbilgi .ic { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; }
  .altbilgi strong { color: var(--metin); font-size: 1.0625rem; }
  .altbilgi a { color: var(--camgobegi); display: inline-block; padding-block: .8125rem; }

  @media (max-width: 64rem) {
    .ak-kartlar, .ak-kartlar:has(> :nth-child(6)) { grid-template-columns: repeat(3, 1fr); }
    .b-arastirma .izgara { grid-template-columns: 1fr 1fr; }

    .b-arastirma .kose-foto { display: block; background-position: 58% 45%; }
    .b-arastirma .foto-kart { display: none; }
    .iletisim-izgara { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 48rem) {
    .ust-serit .ic { gap: .6rem; }
    .menu-dugme { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem; border-radius: 999px; cursor: pointer;
      font: inherit; font-size: .9375rem; color: var(--metin); background: var(--yuzey); border: 1px solid var(--cizgi-guclu);
      transition: border-color .4s, box-shadow .5s ease; }
    .menu-dugme:has(+ .ana-menu:popover-open) { border-color: rgb(148 170 255 / .55); background: var(--yuzey-2); }
    .menu-dugme:hover { border-color: rgb(148 170 255 / .45); box-shadow: 0 0 22px -4px rgb(139 92 246 / .45), 0 0 10px -2px rgb(34 211 238 / .25); }
    .dil { padding: 0 .9rem; }
    .ana-menu[popover]:not(:popover-open) { display: none; }

    .ana-menu[popover]:popover-open { position: fixed; inset: calc(var(--ust, 3.75rem) + .4rem) var(--yan) auto auto; min-width: 12.5rem; display: block;
      padding: .5rem; border-radius: 1rem; background: rgb(10 24 48 / .96); border: 1px solid var(--cizgi-guclu); backdrop-filter: blur(14px);
      box-shadow: 0 24px 60px -20px rgb(0 0 0 / .7), 0 0 30px -10px rgb(139 92 246 / .35); }
    .ana-menu[popover]:popover-open ul { flex-direction: column; gap: .15rem; }
    .ana-menu[popover]:popover-open a { width: 100%; min-height: 48px; padding: 0 1rem; border-radius: .7rem; font-size: 1.0625rem; color: var(--metin); }
    .ana-menu[popover]:popover-open a:hover { background: var(--yuzey-2); }
    .ana-menu[popover]:popover-open a::after { left: 1rem; right: auto; width: 1.5rem; bottom: 10px; }
    @supports not selector(:popover-open) {
      .menu-dugme { display: none; }
      .ust-serit .ic { flex-wrap: wrap; row-gap: 0; }
      .ana-menu[popover] { display: block; order: 3; flex-basis: 100%; overflow-x: auto; scrollbar-width: none; }
      .ana-menu ul { width: max-content; }
      .ana-menu a { padding: 0 .5rem; font-size: .875rem; }
    }
    .izgara, .iki-sutun, .b-arastirma .izgara, .yayin-duzen { grid-template-columns: 1fr; }
    .ak-kartlar, .ak-kartlar:has(> :nth-child(6)), .ak-kartlar:not(:has(> :nth-child(5))) { grid-template-columns: 1fr 1fr; gap: .75rem; }
    .ak-kart { min-height: 0; padding: 1rem; gap: .35rem; }
    .ak-kart:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .ak-kart small { display: none; }
    .ak-kart .sayi { margin-top: .25rem; }

    .ak { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
    .ak-kartlar, .ak-paneller { display: contents; }
    .ak-kart:nth-child(1) { order: 10; } .ak-kart:nth-child(2) { order: 20; } .ak-kart:nth-child(3) { order: 30; }
    .ak-kart:nth-child(4) { order: 40; } .ak-kart:nth-child(5) { order: 50; } .ak-kart:nth-child(6) { order: 60; }
    .ak-panel { grid-column: 1 / -1; order: 25; }
    .ak-panel:nth-child(n+3) { order: 45; }
    .ak-panel:nth-child(n+5) { order: 65; }
    .ak-kart:has(.ak-sec:checked) .sayi .ok { rotate: 180deg; }
    .kahraman { min-height: 0; background-size: auto 17rem; background-position: 72% top; }
    .kahraman::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 15rem, var(--zemin) 17rem); }
    .kahraman .ic { grid-template-columns: 1fr auto; align-items: start; padding-block: 17.5rem 3rem; gap: 1rem; }
    .monogram { width: 4.25rem; border-radius: 1rem; font-size: 1.6rem; }

    .gec { padding: .4rem .8rem .35rem; font-size: .75rem; }
    .gec span { width: 1.3rem; height: 1.9rem; }
    .kurum { font-size: .9375rem; }
    .kose-foto { height: 12rem; opacity: .55; mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / .2) 45%, #000 95%), linear-gradient(180deg, #000 50%, transparent); }
    .b-iletisim .bolum-bas { margin-bottom: 2rem; }
    .iletisim-izgara { grid-template-columns: 1fr; }
  }
}

@layer hareket {

  @media (prefers-reduced-motion: no-preference) {

    .gec-ok { animation: ok-in 2.2s cubic-bezier(.45, 0, .3, 1) infinite; }
    #onceki .gec-ok { animation-direction: reverse; }
    @keyframes ok-in { 0%, 15% { translate: 0 -.55rem; opacity: 0; } 40% { opacity: 1; } 75% { translate: 0 .45rem; opacity: 1; } 100% { translate: 0 .7rem; opacity: 0; } }
    @supports (animation-timeline: scroll()) {
      .okuma-cubugu { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 30; transform-origin: 0 50%; background: var(--gecis);
        animation: okuma linear both; animation-timeline: scroll(root); }
      @keyframes okuma { from { scale: 0 1; } to { scale: 1 1; } }
    }
    @supports (animation-timeline: view()) {

      .bolum-bas h2 { animation: gir-baslik linear both; animation-timeline: view(); animation-range: cover 0px cover 240px; }
      .bolum-bas .cizgi { animation: gir-cizgi linear both; animation-timeline: view(); animation-range: cover 60px cover 300px; }
      .bolum-bas p { animation: gir-alt linear both; animation-timeline: view(); animation-range: cover 30px cover 270px; }
      .bolum .ic > :not(.bolum-bas, .yayin-duzen, .izgara, .ak, .iletisim-izgara), .yayin-sag > :not(.bolum-bas), .ak-paneller,
      .izgara > *, .iletisim-izgara > *, .ak-kart { animation: gir-icerik linear both; animation-timeline: view(); animation-range: cover 0px cover 320px; }

      :is(.izgara, .iletisim-izgara, .ak-kartlar) > :nth-child(2) { animation-range: cover 40px cover 360px; }
      :is(.izgara, .iletisim-izgara, .ak-kartlar) > :nth-child(3) { animation-range: cover 80px cover 400px; }
      :is(.izgara, .iletisim-izgara, .ak-kartlar) > :nth-child(4) { animation-range: cover 120px cover 440px; }
      :is(.izgara, .iletisim-izgara, .ak-kartlar) > :nth-child(5) { animation-range: cover 160px cover 480px; }
      @keyframes gir-baslik { from { opacity: 0; translate: -2rem 0; } }
      @keyframes gir-alt { from { opacity: 0; translate: 0 1rem; } }
      @keyframes gir-cizgi { from { scale: 0 1; opacity: 0; } }

      @keyframes gir-icerik { 0% { opacity: 0; translate: 0 3rem; } 82% { opacity: 1; translate: 0 -3px; } }

      .bolum:not(:last-of-type) > .ic { animation: cik linear both; animation-timeline: view(); animation-range: exit 60% exit 100%; }
      @keyframes cik { to { opacity: .7; translate: 0 -1rem; } }

      .ak-kart:not(:has(.ak-sec:checked))::after { animation: kart-isik linear both; animation-timeline: view(); }
      .ak-kart:nth-child(1)::after { animation-range: entry 40% cover 35%; } .ak-kart:nth-child(2)::after { animation-range: entry 50% cover 38%; }
      .ak-kart:nth-child(3)::after { animation-range: entry 60% cover 41%; } .ak-kart:nth-child(4)::after { animation-range: entry 70% cover 44%; }
      .ak-kart:nth-child(5)::after { animation-range: entry 80% cover 47%; }
      @keyframes kart-isik { 0% { scale: 0 1; opacity: 0; } 50% { scale: 1 1; opacity: .7; } 100% { scale: 0 1; opacity: 0; } }

      .isik { animation: isik-kay linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
      @keyframes isik-kay { from { translate: -40px 24px; } to { translate: 40px -24px; } }
      .kose-foto { animation: foto-gir linear both, foto-kay linear both; animation-timeline: view(), view();
        animation-range: cover 0px cover 420px, cover 0% cover 100%; }
      @keyframes foto-gir { from { opacity: 0; scale: 1.08; } }
      @keyframes foto-kay { from { translate: 0 24px; } to { translate: 0 -24px; } }
      .foto-kart img { animation: foto-kay linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    }

    .isik { transform: translateX(calc(var(--hiz) * 48px)); }
  }
}