/* ULAK Haberleşme vaka sayfası (2026-10-17; 2026-10-30'dan beri vektör ve kod, hareket sondaki bölümde). Çerçeve sitenin (site.css); burası işin dili.
   Zemin koyu lacivert #060D18 (kapak görselinin zemini), vurgu camgöbeği #43C6F2 (kapaktaki neon kenar). Yazı sitenin kendi yazıları (var(--font-display), var(--font-text)); yeni font dosyası yok.
   Görseller kendi çözünürlüğünden (1024 px) büyük basılmaz. Beyaz zeminli logo setleri koyu sayfada açık bir levha olarak durur.
   2026-10-30: alt marka adları ULAK setlerindeki yazıya yakın Montserrat (OFL, fonts/vk-montserrat.woff2, Roketsan sayfasıyla aynı dosya). */
@font-face { font-family: "UL Mont"; src: url("fonts/vk-montserrat.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }

.ul {
  --ul-zemin: #060D18; --ul-zemin2: #0A1626; --ul-cam: #43C6F2; --ul-yazi: #EAF2F8; --ul-yazi2: rgba(234, 242, 248, .74); --ul-cizgi: rgba(234, 242, 248, .16);
  --ul-baslik: var(--font-display, "Gabarito", system-ui, sans-serif);
  --ul-metin: var(--font-text, "Figtree", system-ui, sans-serif);
  --ul-bosluk: clamp(80px, 13vh, 140px);
  --ul-en: min(100% - 2 * var(--margin), 1120px);
  background: var(--ul-zemin); color: var(--ul-yazi); font-family: var(--ul-metin); overflow-x: clip;
}
.ul *, .ul *::before, .ul *::after { box-sizing: border-box; }
.ul img { display: block; max-width: 100%; height: auto; -webkit-user-drag: none; user-select: none; }
:where(.ul) :where(figure, h1, h2, p, dl, dd, ul) { margin: 0; padding: 0; }
:where(.ul) ul { list-style: none; }
.ul-b { position: relative; padding: var(--ul-bosluk) 0; }
.ul-ic { position: relative; width: var(--ul-en); margin: 0 auto; }
.ul-no { display: flex; align-items: baseline; gap: 12px; margin: 0 0 clamp(14px, 2vw, 22px); font: 600 12px/1.2 var(--ul-metin); letter-spacing: .18em; text-transform: uppercase; color: var(--ul-cam); }
.ul-no b { font-weight: 800; }
.ul-no span::before { content: ''; display: inline-block; width: 22px; height: 2px; margin-right: 10px; vertical-align: middle; background: currentColor; }
.ul-h1 { display: grid; gap: 10px; font: 800 clamp(44px, 7.4vw, 104px)/.95 var(--ul-baslik); letter-spacing: -.02em; color: var(--ul-yazi); }
.ul-h1-b { font-size: .34em; font-weight: 700; letter-spacing: 0; color: var(--ul-cam); line-height: 1.15; }
.ul-h2 { font: 800 clamp(36px, 5.4vw, 76px)/1 var(--ul-baslik); letter-spacing: -.02em; color: var(--ul-yazi); }
.ul-p { max-width: 52ch; margin-top: clamp(14px, 2.4vh, 24px); font: 500 clamp(16px, 1.25vw, 18px)/1.7 var(--ul-metin); color: var(--ul-yazi2); text-wrap: pretty; }
.ul-ust { margin-bottom: clamp(30px, 6vh, 64px); }

/* ---------- kapak ---------- */
.ul-kapak { position: relative; background: var(--ul-zemin); }
.ul-etiket { position: relative; z-index: 4; width: max-content; max-width: calc(100% - 2 * var(--margin)); margin: 14px 0 14px var(--margin); display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; min-height: 34px; padding: 6px 15px 6px 11px; border-radius: 18px; background: rgba(6, 13, 24, .8); box-shadow: 0 0 0 1px rgba(234, 242, 248, .2); font: 600 11px/1.2 var(--ul-metin); letter-spacing: .12em; text-transform: uppercase; color: var(--ul-yazi); }
.ul-etiket a { display: inline-flex; align-items: center; gap: 6px; color: var(--ul-cam); text-decoration: none; }
.ul-etiket a svg { width: 15px; height: 15px; }
.ul-etiket a:hover span { text-decoration: underline; text-underline-offset: .25em; }
.ul-etiket a:focus-visible { outline: 2px solid var(--ul-cam); outline-offset: 4px; border-radius: 4px; }
.ul-etiket-k { padding-left: 12px; border-left: 1px solid var(--ul-cizgi); }
.ul-kapak-f { width: min(100%, 1600px); margin: 0 auto; }

/* ---------- giriş ---------- */
.ul-giris-ic { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.ul-yz { padding: 20px 22px; border: 1px solid var(--ul-cizgi); border-left: 3px solid var(--ul-cam); border-radius: 12px; background: var(--ul-zemin2); }
.ul-yz-b { font: 700 12px/1.3 var(--ul-metin); letter-spacing: .16em; text-transform: uppercase; color: var(--ul-cam); }
.ul-yz p + p { margin-top: 10px; font: 500 15px/1.6 var(--ul-metin); color: var(--ul-yazi2); }

/* ---------- figürler ---------- */
.ul-f { margin: 0; }
.ul-f img { width: 100%; border-radius: 6px; box-shadow: 0 0 0 1px rgba(234, 242, 248, .14), 0 24px 60px rgba(0, 0, 0, .45); }
.ul-f figcaption { padding-top: 10px; font: 500 13px/1.5 var(--ul-metin); color: var(--ul-yazi2); }
.ul-f + .ul-f, .ul-seriler + .ul-f { margin-top: clamp(28px, 4vw, 48px); }

/* ---------- mimari ---------- */
.ul-mimari { background: var(--ul-zemin2); }
.ul-seriler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); margin-bottom: clamp(32px, 5vw, 56px); }
.ul-seri { display: flex; flex-direction: column; gap: 14px; padding: clamp(18px, 2vw, 26px); border: 1px solid var(--ul-cizgi); border-radius: 14px; background: var(--ul-zemin); }
.ul-seri-k { border-color: rgba(67, 198, 242, .6); box-shadow: 0 0 0 1px rgba(67, 198, 242, .25) inset; }
.ul-seri header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ul-seri-n { font: 800 clamp(22px, 2vw, 28px)/1.1 var(--ul-baslik); color: var(--ul-yazi); }
.ul-seri-s { font: 700 11px/1 var(--ul-metin); letter-spacing: .14em; text-transform: uppercase; color: var(--ul-yazi2); }
.ul-seri-k .ul-seri-s { color: var(--ul-cam); }
.ul-seri-t { font: 500 14px/1.55 var(--ul-metin); color: var(--ul-yazi2); }
.ul-ad { border-top: 1px solid var(--ul-cizgi); }
.ul-ad li { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--ul-cizgi); }
.ul-ad li:last-child { border-bottom: 0; }
.ul-ad b { font: 700 16px/1.3 var(--ul-baslik); color: var(--ul-yazi); }
.ul-ad span { font: 600 12px/1.4 var(--ul-metin); letter-spacing: .06em; text-transform: uppercase; color: var(--ul-cam); }
.ul-ad em { font: 500 14px/1.5 var(--ul-metin); font-style: normal; color: var(--ul-yazi2); }

/* ---------- karar ---------- */
.ul-neden-ic { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.ul-neden .ul-ust { margin-bottom: 0; }
.ul-neden-m .ul-p:first-child { margin-top: 0; }

/* ---------- yön ---------- */
.ul-yon { background: var(--ul-zemin2); }
.ul-yon-g { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.ul-yon-s { display: grid; gap: clamp(20px, 3vw, 40px); }
.ul-yon-g .ul-f + .ul-f { margin-top: 0; }

/* ---------- künye ---------- */
.ul-kunye { background: var(--ul-zemin); }

@media (max-width: 900px) {
  .ul-giris-ic, .ul-neden-ic, .ul-yon-g { grid-template-columns: minmax(0, 1fr); }
  .ul-seriler { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .ul-etiket { border-radius: 14px; }
  .ul-h1 { font-size: clamp(40px, 12vw, 56px); }
}

/* ---------- 2026-10-21 sade sunum (Kurallar 87): the three series (03) and the three scenes of 05 are stages of the shared assets/sahne.js +
   sahne.css (segments, Ayrıntı, Büyüt, full screen, stacking come from there). Here only ULAK's own layout of an item inside a stage;
   without the script the series stay three cards (with the name notes under each list) and the scenes stay the grid.
   Previous version: _arsiv/2026-10-21-sahne-yayilim/ulak/ ---------- */
.ul-ad-not { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--ul-cizgi); }
.ul-ad-not dt { font: 700 14px/1.3 var(--ul-baslik); color: var(--ul-yazi); }
.ul-ad-not dd { margin: 2px 0 0; font: 500 14px/1.5 var(--ul-metin); color: var(--ul-yazi2); }
.ul-f-b { display: block; width: 100%; padding: 0; border: 0; border-radius: 6px; background: none; }
.ul-f-b:focus-visible { outline: 2px solid var(--ul-cam); outline-offset: 4px; }
.ul-seri-st, .ul-yon-st { --sh-font: var(--ul-metin); --sh-cam: rgba(6, 13, 24, .6); --sh-cam-k: rgba(6, 13, 24, .95); --sh-yazi: var(--ul-yazi); --sh-cizgi: rgba(234, 242, 248, .2); --sh-secili: var(--ul-cam); --sh-secili-y: #060D18; }
.ul-seri-st { margin-bottom: clamp(32px, 5vw, 56px); }
.ul-seri-st.sh-on > .ul-seriler { display: block; margin: 0; }
.ul-seri-b { display: flex; flex-direction: column; gap: 14px; }
.ul-seri-st.sh-on .ul-seri { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; align-content: center; gap: 18px clamp(40px, 7vw, 112px); padding: calc(var(--nav-h, 72px) + 20px) 0 112px; border: 0; border-radius: 0; background: none; box-shadow: none; }
.ul-seri-st.sh-on .ul-seri-b { gap: 22px; }
.ul-seri-st.sh-on .ul-seri header { display: grid; justify-content: start; gap: 16px; }
.ul-seri-st.sh-on .ul-seri-n { font-size: clamp(64px, 9vw, 136px); line-height: .9; letter-spacing: -.03em; }
.ul-seri-st.sh-on .ul-seri-s { justify-self: start; padding: 8px 14px; border: 1px solid currentColor; border-radius: 999px; font-size: 12px; }
.ul-seri-st.sh-on .ul-seri-t { max-width: 40ch; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.65; }
.ul-seri-st.sh-on .ul-ad { align-self: center; }
.ul-seri-st.sh-on .ul-ad li { padding: clamp(16px, 2.6vh, 24px) 0; }
.ul-seri-st.sh-on .ul-ad b { font-size: clamp(26px, 2.8vw, 42px); line-height: 1.05; letter-spacing: -.01em; }
.ul-seri-st.sh-on .ul-ad span { font-size: 13px; }
.ul .sh-sheet { --ul-yazi2: rgba(234, 242, 248, .78); }
.ul .sh-sheet .ul-ad-not { padding-top: 0; border-top: 0; gap: 14px; }
.ul-yon-st.sh-on > .ul-yon-g { display: block; }
.ul-yon-st.sh-on .ul-yon-s { display: contents; }
.ul-yon-st.sh-on .ul-f { display: grid; align-content: center; justify-items: center; gap: 14px; padding: calc(var(--nav-h, 72px) + 20px) 0 112px; }
.ul-yon-st.sh-on .ul-f-b { width: auto; max-width: 100%; }
.ul-yon-st.sh-on .ul-f img { width: auto; max-width: 100%; max-height: calc(100svh - var(--nav-h, 72px) - 236px); box-shadow: 0 0 0 1px rgba(234, 242, 248, .14); }
.ul-yon-st.sh-on .ul-f figcaption { max-width: 72ch; padding-top: 0; text-align: center; font-size: 14px; }
@media (max-width: 760px) {
  .ul-seri-st.sh-on .ul-seri { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: calc(var(--nav-h, 60px) + 12px) 0 96px; }
  .ul-seri-st.sh-on .ul-seri-n { font-size: clamp(52px, 16vw, 72px); }
  .ul-seri-st.sh-on .ul-ad li { padding: 12px 0; }
  .ul-seri-st.sh-on .ul-ad b { font-size: 24px; }
  .ul-yon-st.sh-on .ul-f { padding: calc(var(--nav-h, 60px) + 12px) 0 96px; }
  .ul-yon-st.sh-on .ul-f img { max-height: calc(100svh - var(--nav-h, 60px) - 300px); }
}

/* ---------- 2026-10-30 vektör ve hareket (Tayfun: "case study sayfasında pek çok şeyin oynanabilir olması lazım").
   Kapak: ulak.mjs'nin kodla kurduğu sahne; logo svg/ulak-logo.svg'nin neon kipi. Yapı çizimi: kılavuzlar kaydırmayla çizilir (scroll-driven;
   desteklemeyen tarayıcıda çizili durur). Set ve hiyerarşi: ikon katmanları CSS değişkeniyle boyanır (--ul-i-koyu, --ul-i-acik, --ul-i-gri).
   Hareket azaltma tercihinde hepsi durur. ---------- */
.ul-gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ul-sahne { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 620; }
@media (max-width: 640px) { .ul-sahne { aspect-ratio: 16 / 10; } }   /* dar ekranda sahne yanlardan kırpılır (slice), logo ortada kalır */
.ul-tahta-a { fill: #0B1D31; }
.ul-tahta-b { fill: #060F1C; }
.ul-tahta-c { fill: none; stroke: var(--ul-cam); stroke-opacity: .32; stroke-width: 1; }
.ul-taslar { filter: url(#ul-parla); }
.ul-tas path { fill: none; stroke: #5FD3FF; stroke-width: 1.1; stroke-linejoin: round; }
.ul-tas-a { stroke-opacity: .22; }
.ul-tas-h { stroke-opacity: .78; }
.ul-kapak-logo { overflow: visible; }
.ul-kapak-logo .ul-l-harf, .ul-kapak-logo .ul-l-a2 { fill: #08182A; stroke: #D8F6FF; stroke-width: 5; filter: url(#ul-parla); }
.ul-kapak-logo .ul-l-a1, .ul-kapak-logo .ul-l-nokta { fill: #2FB7EA; stroke: #D8F6FF; stroke-width: 4; filter: url(#ul-parla); }
.ul-kapak-logo .ul-l-sinyal { stroke: #7FDDFF; filter: url(#ul-parla); }
.ul-kapak-logo .ul-l-alt { fill: #9ADCF3; }
@keyframes ul-yay { 0%, 100% { opacity: .25; } 18% { opacity: 1; } 40% { opacity: .25; } }
@keyframes ul-ciz { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ul-gel { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ul-logo-ciz { from { stroke-dashoffset: 2400; fill-opacity: 0; } 70% { fill-opacity: 0; } to { stroke-dashoffset: 0; fill-opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .ul-kapak-logo .ul-l-sinyal path { animation: ul-yay 2.4s ease-in-out infinite; }
  .ul-kapak-logo .ul-l-sinyal .ul-l-s2 { animation-delay: .18s; }
  .ul-kapak-logo .ul-l-sinyal .ul-l-s3 { animation-delay: .36s; }
  .ul-kapak-logo .ul-l-sinyal .ul-l-s4 { animation-delay: .54s; }
  .ul-kapak-logo :is(.ul-l-harf path, .ul-l-k path, .ul-l-a1, .ul-l-a2) { stroke-dasharray: 2400; animation: ul-logo-ciz 2.2s cubic-bezier(.2, .7, .2, 1) both; }
}

/* yapı çizimi */
.ul-insa { position: relative; }
.ul-insa-d { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ul-insa-d button { min-height: 36px; padding: 0 14px; border: 1px solid var(--ul-cizgi); border-radius: 999px; background: transparent; color: var(--ul-yazi2); font: 600 12px/1 var(--ul-metin); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: border-color .2s, color .2s, background-color .2s; }
.ul-insa-d button:hover { border-color: var(--ul-cam); color: var(--ul-yazi); }
.ul-insa-d button[aria-pressed="true"] { border-color: var(--ul-cam); background: var(--ul-cam); color: #060D18; }
.ul-insa-d button:focus-visible { outline: 2px solid var(--ul-cam); outline-offset: 3px; }
.ul-insa-svg { display: block; width: 100%; height: auto; border-radius: 6px; background: #071A33; box-shadow: 0 0 0 1px rgba(234, 242, 248, .14), 0 24px 60px rgba(0, 0, 0, .45); }
.ul-insa-iz-b { fill: none; stroke: #5FA8D8; stroke-opacity: .22; stroke-width: 1; }
.ul-insa-iz-k { fill: none; stroke: #5FA8D8; stroke-opacity: .08; stroke-width: 1; }
.ul-insa-k path, .ul-insa-o path { fill: none; stroke: #6FD6FF; stroke-opacity: .55; stroke-width: 1.4; }
.ul-insa-y circle { fill: none; stroke: #6FD6FF; stroke-opacity: .5; stroke-width: 1.4; stroke-dasharray: .012 .008; }
.ul-insa-birim { fill: rgba(67, 198, 242, .18); stroke: #6FD6FF; stroke-width: 1.4; }
.ul-insa-e text { fill: #9FE3FA; font: 600 15px var(--ul-metin); letter-spacing: .12em; }
.ul-insa-logo :is(.ul-l-harf, .ul-l-a2, .ul-l-alt) { fill: rgba(111, 214, 255, .12); stroke: #CFF3FF; stroke-width: 2.5; }
.ul-insa-logo :is(.ul-l-a1, .ul-l-nokta) { fill: rgba(67, 198, 242, .45); stroke: #CFF3FF; stroke-width: 2.5; }
.ul-insa-logo .ul-l-sinyal { stroke: #CFF3FF; }
.ul-insa-logo .ul-l-alt { fill: rgba(207, 243, 255, .8); stroke: none; }
.ul-insa-logo > *, .ul-insa :is(.ul-insa-k, .ul-insa-y, .ul-insa-o, .ul-insa-e) { transition: opacity .4s, fill .4s, stroke .4s; }
.ul-insa[data-kip="kilavuz"] .ul-insa-logo > * { opacity: .12; }
.ul-insa[data-kip="logo"] :is(.ul-insa-k, .ul-insa-y, .ul-insa-o, .ul-insa-e) { opacity: 0; }
.ul-insa[data-kip="logo"] .ul-insa-logo :is(.ul-l-harf, .ul-l-a2, .ul-l-alt) { fill: #EAF2F8; stroke: none; }
.ul-insa[data-kip="logo"] .ul-insa-logo :is(.ul-l-a1, .ul-l-nokta) { fill: var(--ul-cam); stroke: none; }
.ul-insa[data-kip="logo"] .ul-insa-logo .ul-l-sinyal { stroke: #EAF2F8; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .ul-insa-k path, .ul-insa-o path { stroke-dasharray: 1; animation: ul-ciz linear both; animation-timeline: view(); animation-range: entry 5% cover 40%; }
    .ul-insa-e text { animation: ul-gel linear both; animation-timeline: view(); animation-range: cover 25% cover 45%; }
  }
}

/* 3x3 set: açık levha, vektör ikon + canlı yazı */
.ul-set-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(26px, 5vw, 64px) clamp(12px, 3vw, 40px); padding: clamp(28px, 6vw, 72px) clamp(16px, 4vw, 56px); border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px rgba(234, 242, 248, .14), 0 24px 60px rgba(0, 0, 0, .45); }
.ul-set-h { display: grid; justify-items: center; align-content: start; gap: 4px; text-align: center; color: #17303F; font-family: "UL Mont", var(--ul-metin); text-transform: uppercase; }
.ul-set-h .ul-ikon { height: clamp(64px, 11vw, 124px); width: auto; max-width: 100%; margin-bottom: clamp(8px, 1.4vw, 16px); overflow: visible; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.ul-set-h b { font-weight: 800; font-size: clamp(16px, 2.4vw, 30px); line-height: 1.05; letter-spacing: .01em; }
.ul-set-h span { font-weight: 700; font-size: clamp(11px, 1.5vw, 19px); line-height: 1.1; letter-spacing: .03em; }
.ul-set-h:nth-child(n+7) b { font-size: clamp(18px, 2.9vw, 36px); }
.ul-set-h:hover .ul-ikon { transform: translateY(-6px) scale(1.06); }
.ul-ikon .ul-i-acik { transition: fill .3s; }
.ul-set-h:hover .ul-i-acik { fill: #43C6F2; }

/* hiyerarşi */
.ul-hy-p { display: grid; gap: clamp(28px, 5vw, 60px); justify-items: center; padding: clamp(28px, 5vw, 64px) clamp(16px, 4vw, 48px); border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px rgba(234, 242, 248, .14), 0 24px 60px rgba(0, 0, 0, .45); font-family: "UL Mont", var(--ul-metin); }
.ul-hy-ust .ul-logo { display: block; width: clamp(150px, 24vw, 260px); height: auto; }
.ul-hy-ag { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; align-items: center; gap: 20px clamp(16px, 4vw, 64px); width: 100%; }
.ul-hy-ag li { display: flex; align-items: flex-end; gap: 4px; }
.ul-hy-ag .ul-ikon { height: clamp(40px, 6.6vw, 78px); width: auto; flex: none; }
.ul-hy-ad { display: grid; justify-items: end; line-height: .95; }
.ul-hy-ad b { font-weight: 800; font-size: clamp(20px, 3.8vw, 46px); letter-spacing: -.01em; color: #0A5490; }
.ul-hy-ad i { font-style: normal; font-weight: 700; font-size: clamp(12px, 2.1vw, 26px); color: #4C7CB4; }
.ul-hy-ad-g { margin-left: -2px; }
.ul-hy-alt { display: grid; grid-template-columns: repeat(3, auto) 1fr repeat(3, auto); align-items: start; gap: 20px clamp(14px, 3vw, 40px); width: 100%; }
.ul-hy-alt li:nth-child(4) { grid-column: 5; }
.ul-hy-alt li { display: grid; justify-items: center; gap: 8px; text-align: center; }
.ul-hy-alt .ul-ikon { height: clamp(40px, 6vw, 70px); width: auto; }
.ul-hy-alt b { font-weight: 800; font-size: clamp(12px, 1.9vw, 22px); line-height: 1; text-transform: uppercase; color: #3F3F40; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .ul-set-h, .ul-hy-ag li, .ul-hy-alt li { animation: ul-gel linear both; animation-timeline: view(); animation-range: entry calc(5% + var(--i) * 3%) cover calc(22% + var(--i) * 3%); }
  }
}
@media (max-width: 640px) {
  .ul-hy-ag { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .ul-hy-alt { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ul-hy-alt li:nth-child(4) { grid-column: auto; }
}