/* ARTificial Match marka kitabı: Behance kimlik vakasının derisi (2026-10-16). Kaynak: Artificial Match.ai, 5 çalışma yüzeyi (1440 piksel genişlikte).
   Her bölüm bir Behance modülüdür: aynı yerleşim (yüzdeyle, "tahta" kabının genişliğine göre ölçeklenir), aynı yazı tipleri, aynı renkler.
   Yazı boyutları cqw: 1440 piksellik sanat yüzeyindeki punto / 1440. Hareket yalnız transform ve opacity; .motion yoksa (betik yok ya da azaltılmış hareket)
   her şey son halinde ve okunur durur. Hiçbir şey kendi kendine tekrar etmez: açılış bir kez oynar, kaydırmaya bağlı olanlar kaydırma durunca durur. */
:root {
  --am-ink: #07090d; --am-cyan: #7DE0F2; --am-or: #F37B2F; --am-gold: #DDC57E; --am-tx: #f4f6f7;
  --am-soluk: rgba(244, 246, 247, .66);
}
html { background: var(--am-ink); color-scheme: dark; }
body { background: var(--am-ink); color: var(--am-tx); }
.tw-atla { color: var(--am-ink); background: #fff; }
:focus-visible { outline: 3px solid var(--am-cyan); }

/* ---- üst şerit (motorun .tb'si) koyu zemine uyarlandı ---- */
.tb { background: linear-gradient(180deg, rgba(7, 9, 13, .86), rgba(7, 9, 13, .5)); border-bottom: 1px solid rgba(125, 224, 242, .14); }
.tb-ad marka-logo text, .tb-ad marka-logo tspan { fill: #fff; }
.tb-ind summary { border-color: rgba(255, 255, 255, .42); color: #fff; }
.tb-ind[open] summary { background: #fff; color: var(--am-ink); }
.tb-ind ol { background: #0c1117; border-color: rgba(125, 224, 242, .2); box-shadow: 0 18px 48px rgba(0, 0, 0, .5); }
.tb-ind a { color: #fff; }
.tb-ind a:hover { background: rgba(125, 224, 242, .1); }
.tb-ind a b { color: var(--am-cyan); }

/* ---- ortak ---- */
.am-s { position: relative; isolation: isolate; overflow: clip; background: var(--am-ink); color: var(--am-tx); }
.am-zemin { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; z-index: -2; }
.am-etiket { position: absolute; right: clamp(16px, 4vw, 56px); top: 96px; z-index: 4; display: flex; gap: 10px; align-items: center; margin: 0; font: 700 11px/1 var(--f-metin); letter-spacing: .18em; text-transform: uppercase; color: rgba(244, 246, 247, .55); pointer-events: none; }
.am-etiket b { color: var(--am-cyan); font-weight: 800; }
.am-etiket::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .6; }
.am-kivilcim, .ak-kivilcim { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.am-kivilcim { z-index: -1; }
.am-kivilcim i, .ak-kivilcim i { position: absolute; left: var(--l); top: var(--t); width: var(--s); height: var(--s); border-radius: 50%; background: #ffc58f; opacity: var(--o); box-shadow: 0 0 calc(var(--s) * 2.6) rgba(243, 123, 47, .9); }
.am-kivilcim i { opacity: calc(var(--o) * .7); }

/* tahta: 1440 piksellik sanat yüzeyi, her çocuk yüzdeyle yerleşir */
.tahta { position: relative; container-type: inline-size; width: 100%; max-width: 2000px; margin-inline: auto; aspect-ratio: 1440 / var(--H); }
.tahta > * { position: absolute; left: var(--l, 0); top: var(--t, 0); width: var(--w, auto); height: var(--h, auto); margin: 0; }
.tahta [style*="--fs"], .ak-kutu [style*="--fs"] { font-size: var(--fs); line-height: var(--lh, 1.2); }
.ln { display: block; white-space: nowrap; }
.at-baslik { display: flex; align-items: center; gap: 2.2cqw; }
.at-mini { flex: none; width: 4.86cqw; height: 4.93cqw; border-radius: 50%; display: block; filter: drop-shadow(0 0 10px rgba(243, 123, 47, .35)); }
.at-ust { margin: 0; font: 400 1em/1.1 var(--f-metin); font-size: var(--fs); color: #fff; }
.at-alt { margin: 0; color: rgba(255, 255, 255, .74); }
.at-rozet { overflow: visible; }
.at-rozet > img { width: 100%; height: 100%; display: block; object-fit: fill; border-radius: 50%; }
.ak-h2 { font-family: var(--f-baslik); font-weight: 800; color: #fff; text-shadow: 0 2px 26px rgba(0, 0, 0, .4); }
.ak-p { font-family: var(--f-metin); font-weight: 400; color: rgba(255, 255, 255, .9); }

/* tilt: rozetin üzerinde gezinince (kendi kendine hiçbir şey dönmez) */
.am-egim { position: absolute; }
.am-egim > img { transform: perspective(760px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .4s var(--egri-ana); will-change: transform; }
.am-egim::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 28%), rgba(255, 255, 255, .34), transparent 58%); opacity: var(--go, 0); transition: opacity .35s; mix-blend-mode: soft-light; }

/* ================= 01 KAPAK: tam ekran sahne; kaydırdıkça rozete yakınlaşır ================= */
.am-kapak { background: #05070a; }
.ak-yap { position: relative; height: 100svh; min-height: 520px; overflow: hidden; }
.motion .ak-sahne { height: 230svh; }
.motion .ak-yap { position: sticky; top: 0; }
.ak-kutu { position: absolute; left: 50%; top: 50%; width: max(100vw, calc(100svh * 1440 / 1140.11)); aspect-ratio: 1440 / 1140.11; container-type: inline-size; --z: calc(1 + var(--p, 0) * .17); transform: translate(-50%, -53%) scale(var(--z)); transform-origin: 30.4% 62%; opacity: calc(1 - max(0, var(--p, 0) - .7) * 2.4); }
.ak-kutu > * { position: absolute; margin: 0; }
.ak-plaka { left: 0; top: 0; width: 100%; height: 100%; display: block; }
.ak-isik { top: 23.85%; height: 3px; mix-blend-mode: screen; filter: blur(.6px); }
.ak-isik-t { left: 0; width: 50%; background: linear-gradient(90deg, transparent, #ff9a52 45%, rgba(255, 238, 215, .95)); box-shadow: 0 0 18px rgba(243, 123, 47, .9); transform-origin: 0 50%; }
.ak-isik-m { right: 0; width: 50%; background: linear-gradient(270deg, transparent, #4fd2ee 45%, rgba(220, 250, 255, .95)); box-shadow: 0 0 18px rgba(125, 224, 242, .9); transform-origin: 100% 50%; }
.ak-parla { border-radius: 50%; background: radial-gradient(closest-side, rgba(243, 123, 47, .34), rgba(125, 224, 242, .1) 58%, transparent 74%); mix-blend-mode: screen; transform: scale(calc(1 + var(--p, 0) * .5)); }
.ak-rozet { left: var(--l); top: var(--t); width: var(--w); height: var(--h); }
.ak-rozet > img { width: 100%; height: 100%; display: block; object-fit: fill; border-radius: 50%; filter: drop-shadow(0 14px 36px rgba(0, 0, 0, .55)) drop-shadow(0 0 38px rgba(243, 123, 47, .28)); }
.ak-ad { left: var(--l); top: var(--t); width: var(--w); text-align: center; font-family: var(--f-logo); color: #fff; }
.ak-sat { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.ak-sat b { display: block; font-weight: 300; }
.ak-sat.l2 b { font-weight: 900; }
.ak-sl { left: var(--l); top: var(--t); width: var(--w); text-align: center; font-family: var(--f-metin); color: #fff; }
.ak-imza { position: absolute; left: clamp(16px, 5.9vw, 85px); top: 78px; width: clamp(64px, 8.7vw, 125px); height: auto; z-index: 3; }

/* ================= 02 GİRİŞ ================= */
.am-kok .tahta, .am-logo .tahta { margin-top: 0; }
.at-rozet.am-egim > img { border-radius: 50%; }

/* ================= 03 LOGO ================= */
.at-kelime { font-family: var(--f-logo); color: #fff; white-space: nowrap; }
.at-kelime span { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.at-kelime b { display: inline-block; font-weight: 300; }
.at-kelime .k2 b { font-weight: 900; }
.at-kelime .k2 { margin-left: .51em; }
.motion .at-kelime b { transform: translateY(108%); transition: transform 1s var(--egri-ana); }
.motion .at-kelime.in b { transform: none; }
.motion .at-kelime .k2 b { transition-delay: .16s; }
.at-rozet figcaption { position: absolute; left: 50%; top: calc(100% + 4.2cqw); transform: translateX(-50%); white-space: nowrap; color: #fff; letter-spacing: .02em; margin: 0; }
.at-tip { margin: 0; white-space: nowrap; color: #fff; font-family: var(--f-metin); font-weight: 400; }
.at-tip.t-lato { font-family: var(--f-baslik); font-weight: 800; }
.at-tip.t-mont { font-family: "Montserrat", var(--f-metin); font-weight: 400; }
.at-tip.t-nuber { font-family: "NuberNext", var(--f-metin); font-weight: 700; }
.at-ik svg { width: 100%; height: 100%; display: block; overflow: visible; }
.at-ik path { transform-box: fill-box; transform-origin: 50% 50%; }
.am-sw { position: absolute; left: var(--l); top: var(--t); width: var(--w); height: var(--h); padding: 0; border: 0; background: none; cursor: pointer; color: #fff; text-align: left; }
.am-sw i { display: block; width: 100%; height: 100%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); transition: transform .25s var(--egri-ana), box-shadow .25s; }
.am-sw span { position: absolute; left: 138.9%; top: 20%; white-space: nowrap; font-family: var(--f-metin); transition: color .2s; }
.am-sw:hover i, .am-sw:focus-visible i { transform: scale(1.12); box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 0 26px rgba(125, 224, 242, .3); }
.am-sw.kopya span { color: var(--am-cyan); }

/* ================= 04 AFİŞLER ================= */
.am-afisler { background: #080b12; }
.aa-plaka { left: 0; top: 0; width: 100%; height: 100%; display: block; }
.aa-ust { left: 0; width: 100%; text-align: center; }
.aa-ust h2 { margin: 0; font-family: var(--f-baslik); font-weight: 800; letter-spacing: .01em; line-height: 1.1; background: linear-gradient(180deg, #f7e19a 10%, #d5a444 90%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0 18px rgba(221, 197, 126, .25)); }
.aa-ust p { margin: .35em 0 0; color: rgba(255, 255, 255, .9); font-family: var(--f-metin); }
.aa-afis { overflow: hidden; background: #05070c; }
.aa-afis img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 1.1s var(--egri-ana), filter .5s; }
.aa-afis:hover img { transform: scale(1.035); filter: brightness(1.08) saturate(1.06); }
.aa-parilti { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(104deg, transparent 38%, rgba(255, 255, 255, .26) 50%, transparent 62%); transform: translateX(-130%); }
.motion .aa-afis.rv { opacity: 1; transform: none; transition: none; }
.motion .aa-afis.rv img { clip-path: inset(0 100% 0 0); transition: clip-path 1.15s var(--egri-ana), transform 1.1s var(--egri-ana), filter .5s; transition-delay: calc(var(--d, 0) * 160ms), 0s, 0s; }
.motion .aa-afis.rv.in img { clip-path: inset(0 0 0 0); }
.motion .aa-afis.in .aa-parilti { animation: amSup 1.5s var(--egri-yumusak) calc(.9s + var(--d, 0) * .16s) 1 both; }
.motion .aa-afis:hover .aa-parilti { animation: amSup 1.1s var(--egri-yumusak) 0s 1 both; }

/* ================= 05 YOLCULUK: kapak sahnesi ve Join the Journey ================= */
.am-yolculuk { padding: clamp(56px, 9vh, 110px) 0 clamp(40px, 7vh, 90px); }
.am-yolculuk .am-zemin { object-position: 50% 50%; }
.ay-tahta { aspect-ratio: 1350 / 760; }
.ay-tahta .at-mini { width: 5.19cqw; height: 5.19cqw; }
.ay-tahta .at-baslik { gap: 2.4cqw; }
.ay-kare { padding: 0; border: 2px solid var(--c); background: #000; overflow: hidden; cursor: pointer; color: inherit; box-shadow: 0 0 14px color-mix(in srgb, var(--c) 55%, transparent), inset 0 0 10px color-mix(in srgb, var(--c) 40%, transparent); transition: transform .35s var(--egri-ana), box-shadow .35s; aspect-ratio: 1; height: auto; }
.ay-kare img { width: 100%; height: 100%; display: block; object-fit: cover; }
.ay-c { --c: #7DE0F2; } .ay-o { --c: #F37B2F; }
.ay-kare:hover, .ay-kare:focus-visible, .ay-kare[aria-pressed="true"] { transform: scale(1.07); box-shadow: 0 0 26px color-mix(in srgb, var(--c) 85%, transparent), inset 0 0 12px color-mix(in srgb, var(--c) 55%, transparent); z-index: 2; }
.ay-hero { aspect-ratio: 560 / 316; height: auto; border: 2px solid var(--am-cyan); box-shadow: 0 0 22px rgba(125, 224, 242, .4), inset 0 0 14px rgba(125, 224, 242, .25); background: #000; overflow: hidden; }
.ay-ekran { position: absolute; inset: 0; }
.ay-ekran img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .55s ease; }
.ay-ekran img.gizli { opacity: 0; }
.ay-mini { position: absolute; left: 3.2%; top: 4.6%; width: 6.4%; height: auto; aspect-ratio: 1; border-radius: 50%; z-index: 2; filter: drop-shadow(0 0 6px rgba(0, 0, 0, .6)); }
.ay-kose, .ay-ince { border: 0 solid var(--am-cyan); filter: drop-shadow(0 0 5px rgba(125, 224, 242, .9)); pointer-events: none; }
.ay-k1 { border-top-width: 1.5px; border-left-width: 1.5px; }
.ay-k2 { border-top-width: 1.5px; border-left-width: 1.5px; }
.ay-k3 { border-right-width: 1.5px; border-bottom-width: 1.5px; }
.ay-dik { width: 0; border-left-width: 1.5px; }
.ay-turuncu { border-color: var(--am-or); filter: drop-shadow(0 0 5px rgba(243, 123, 47, .9)); }
.ay-kart { background: rgba(2, 3, 5, .94); }
.ay-kart > * { position: absolute; margin: 0; left: var(--l); top: var(--t); width: var(--w); height: var(--h); }
.ay-marka::after { content: ""; position: absolute; inset: -1px; pointer-events: none; background: linear-gradient(var(--am-cyan), var(--am-cyan)) left bottom / 1.5px 26% no-repeat, linear-gradient(var(--am-cyan), var(--am-cyan)) right bottom / 1.5px 36% no-repeat, linear-gradient(var(--am-cyan), var(--am-cyan)) left bottom / 100% 1.5px no-repeat; filter: drop-shadow(0 0 5px rgba(125, 224, 242, .9)); }
.ay-kr-rozet { object-fit: fill; border-radius: 50%; display: block; }
.ay-kelime { text-align: center; font-family: var(--f-logo); color: #fff; line-height: .95; }
.ay-kelime span { display: block; font-weight: 300; }
.ay-kelime b { display: block; font-weight: 900; }
.ay-bas { font-family: "Montserrat", var(--f-metin); font-weight: 700; color: #fff; line-height: 1.18; letter-spacing: .005em; }
.ay-kr-metin { font-family: var(--f-metin); color: rgba(255, 255, 255, .88); line-height: 1.22; }
.ay-dugme { display: flex; align-items: center; justify-content: space-between; padding: 0 3.2% 0 5%; border: 1.5px solid var(--am-cyan); color: #fff; text-decoration: none; box-shadow: 0 0 14px rgba(125, 224, 242, .35), inset 0 0 10px rgba(125, 224, 242, .12); transition: background .3s, box-shadow .3s; }
.ay-dugme:hover, .ay-dugme:focus-visible { background: rgba(125, 224, 242, .12); box-shadow: 0 0 24px rgba(125, 224, 242, .6), inset 0 0 12px rgba(125, 224, 242, .2); }
.ay-dugme span { display: grid; gap: .25em; min-width: 0; }
.ay-dugme b { font-family: "Montserrat", var(--f-metin); font-weight: 700; line-height: 1.15; }
.ay-dugme small { font-family: var(--f-metin); line-height: 1.15; color: rgba(255, 255, 255, .86); }
.am-yt { width: 33%; height: auto; flex: none; }
.ay-karo { background: #000; overflow: hidden; }
.ay-gri { background: linear-gradient(160deg, #5b6064, #2b2f33); display: grid; place-items: center; }
.ay-gri img { width: 55%; height: auto; border-radius: 50%; display: block; }
.ay-bitis { text-align: center; }
.ay-bitis > * { margin: 0; }
.ay-j { font-family: "NuberNext", var(--f-baslik); font-weight: 800; color: #fff; letter-spacing: .005em; line-height: 1.12; }
.ay-js { font-family: var(--f-metin); color: rgba(255, 255, 255, .82); line-height: 1.2; }
.ay-jp { width: min(66%, 40em); margin-inline: auto !important; font-family: var(--f-metin); color: rgba(255, 255, 255, .78); line-height: 1.22; }

/* ================= 06 GALERİ ================= */
.am-galeri { padding: clamp(72px, 11vh, 130px) 0 clamp(64px, 9vh, 110px); }
.am-galeri .am-zemin { object-position: 50% 50%; }
.ag-yap { width: min(1320px, 100% - 2 * clamp(16px, 4vw, 56px)); margin-inline: auto; }
.ag-ust { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-bottom: clamp(20px, 3.4vh, 38px); }
.ag-ust .at-mini { width: 44px; height: 46px; }
.ag-ust h2 { margin: 0; font: 400 clamp(20px, 2.1vw, 28px)/1.1 var(--f-metin); color: #fff; }
.ag-ust p { margin: 0; color: var(--am-soluk); font-size: 15px; }
.ag-izgara { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1.1vw, 16px); }
.ag-k { position: relative; }
.ag-k img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; border: 1px solid rgba(125, 224, 242, .26); background: #05070c; transition: transform .45s var(--egri-ana), border-color .3s, box-shadow .3s; }
.ag-k:hover img { transform: translateY(-4px) scale(1.025); border-color: var(--am-cyan); box-shadow: 0 10px 34px rgba(0, 0, 0, .55), 0 0 26px rgba(125, 224, 242, .28); position: relative; z-index: 2; }

/* ================= video paketi yer tutucusu: başka ajan doldurur; boşken yer tutmaz ================= */
#video-paketi { position: relative; background: var(--am-ink); color: var(--am-tx); }

/* ================= KÜNYE ================= */
.am-kunye { padding: clamp(64px, 10vh, 120px) 0 clamp(40px, 6vh, 72px); }
.am-kunye .am-zemin { object-position: 50% 60%; filter: brightness(.8); }
.ak-yap2 { width: min(980px, 100% - 2 * clamp(16px, 4vw, 56px)); margin-inline: auto; display: grid; gap: 22px; }
.ak-kunye { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px 28px; margin: 0; padding-top: 22px; border-top: 1px solid rgba(125, 224, 242, .3); }
.ak-kunye dt { font: 700 11px/1.3 var(--f-metin); letter-spacing: .16em; text-transform: uppercase; color: var(--am-cyan); }
.ak-kunye dd { margin: 4px 0 0; font-size: 15px; line-height: 1.4; color: rgba(255, 255, 255, .9); }
.ak-baglar { display: flex; flex-wrap: wrap; gap: 10px; }
.ak-baglar a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border: 1.5px solid rgba(125, 224, 242, .6); border-radius: 999px; color: #fff; text-decoration: none; font: 600 14px/1 var(--f-metin); transition: background .25s; }
.ak-baglar a:hover { background: rgba(125, 224, 242, .14); }
.ak-kaynak { color: var(--am-soluk); font-size: 14px; }
.ak-kaynak summary { cursor: pointer; font-weight: 600; color: #fff; padding: 8px 0; }
.ak-kaynak ul { margin: 8px 0 0; padding-left: 18px; list-style: disc; display: grid; gap: 6px; }

/* ================= HAREKET ================= */
@keyframes amSup { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
@keyframes akPlaka { from { opacity: 0; transform: scale(1.07); } to { opacity: 1; transform: none; } }
@keyframes akIsikT { from { transform: scaleX(0); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes akGir { from { opacity: 0; transform: translateY(18px) scale(.86); } to { opacity: 1; transform: none; } }
@keyframes akSat { from { transform: translateY(108%); } to { transform: none; } }
@keyframes akYuk { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes akParla { from { opacity: 0; } to { opacity: 1; } }
.motion .ak-plaka { animation: akPlaka 2.2s var(--egri-ana) both; }
.motion .ak-isik { animation: akIsikT 1.5s var(--egri-ana) .35s both; }
.motion .ak-parla { animation: akParla 1.6s ease-out .5s both; }
.motion .ak-rozet { animation: akGir 1.4s var(--egri-ana) .6s both; }
.motion .ak-sat b { animation: akSat 1s var(--egri-ana) 1.05s both; }
.motion .ak-sat.l2 b { animation-delay: 1.22s; }
.motion .ak-sl { animation: akYuk 1.1s var(--egri-ana) 1.55s both; }
.motion .ak-imza { animation: akYuk 1.2s ease-out 1.9s both; }
.motion .ak-kivilcim i { transform: translate3d(0, calc(var(--p, 0) * var(--k) * -300px), 0); }

/* rozetlerin ve kartların belirmesi (motorun .rv'sine ek); kıvılcım ve parçalar JS'te */
.motion .ay-kare.rv, .motion .ay-karo.rv, .motion .at-ik.rv { transform: scale(.92); }
.motion .ay-kare.rv.in, .motion .ay-karo.rv.in, .motion .at-ik.rv.in { transform: none; }
.motion .ay-kare.rv.in { transition: opacity var(--sure-orta) var(--egri-ana), transform .35s var(--egri-ana), box-shadow .35s; }
.motion .am-sw.rv { transform: translateY(10px) scale(.9); }
.motion .am-sw.rv.in { transform: none; }

/* ================= TELEFON ================= */
@media (max-width: 760px) {
  .am-etiket { top: 68px; font-size: 10px; }
  .tahta { aspect-ratio: auto; container-type: normal; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px 18px; padding: 108px var(--kenar, 18px) 72px; }
  .tahta > * { position: relative; left: auto; top: auto; width: auto; height: auto; }
  .tahta .at-baslik { flex: 1 1 100%; gap: 14px; }
  .at-mini, .ay-tahta .at-mini, .ag-ust .at-mini { width: 46px; height: 48px; }
  .at-ust { font-size: 22px !important; }
  .at-alt { font-size: 16px !important; }
  .tahta [style*="--fs"], .ak-kutu [style*="--fs"] { font-size: initial; }
  /* kapak */
  .ak-kutu { position: absolute; inset: 0; left: 0; top: 0; width: auto; aspect-ratio: auto; container-type: normal; transform: none; transform-origin: 50% 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 72px 20px 40px; }
  .ak-kutu > * { position: relative; left: auto; top: auto; width: auto; height: auto; }
  .ak-kutu > .ak-plaka { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; transform: scale(calc(1 + var(--p, 0) * .17)); }
  .ak-kutu > .ak-isik, .ak-kutu > .ak-parla, .ak-kutu > .ak-kivilcim { position: absolute; }
  .ak-isik { top: 21%; }
  .ak-parla { left: 50%; top: 50%; width: 120vw; height: 120vw; transform: translate(-50%, -62%) scale(calc(1 + var(--p, 0) * .4)); }
  .ak-kutu > .ak-rozet { width: min(60vw, 280px); height: auto; aspect-ratio: 1; }
  .ak-ad { font-size: min(14vw, 64px) !important; width: auto; }
  .ak-sl { font-size: clamp(16px, 4.6vw, 21px) !important; width: auto; }
  .ak-imza { top: 70px; }
  /* giriş */
  .ak-h2 { flex: 1 1 100%; font-size: clamp(30px, 9.4vw, 46px) !important; line-height: 1.15; }
  .ak-h2 .ln, .ak-p .ln { display: inline; white-space: normal; }
  .ak-p { flex: 1 1 100%; font-size: clamp(16px, 4.5vw, 19px) !important; line-height: 1.5; }
  .at-rozet { flex: 0 0 min(42vw, 190px); height: auto; aspect-ratio: 1; }
  .at-rozet figcaption { top: calc(100% + 10px); font-size: 15px !important; }
  .am-logo .at-rozet { margin-bottom: 30px; }
  /* logo */
  .at-kelime { flex: 1 1 100%; }
  .at-kelime { font-size: min(8.6vw, 42px) !important; text-align: center; }
  .at-tip { flex: 1 1 100%; font-size: 22px !important; text-align: center; }
  .at-tip.t-lato { font-size: 40px !important; } .at-tip.t-mont, .at-tip.t-nuber { font-size: 30px !important; }
  .at-ik { flex: 0 0 76px; height: 76px; }
  .am-sw { flex: 0 0 calc(50% - 12px); display: flex; align-items: center; gap: 12px; height: auto; text-align: left; }
  .am-sw i { flex: none; width: 46px; height: 46px; }
  .am-sw span { position: static; font-size: 16px !important; }
  .at-renk { margin-top: 12px; }
  /* afişler: sanat yüzeyi olduğu gibi küçülür (görseller önde) */
  .am-afisler { padding-top: 60px; }
  .aa-tahta { aspect-ratio: 1440 / var(--H); container-type: inline-size; display: block; padding: 0; }
  .aa-tahta > * { position: absolute; left: var(--l, 0); top: var(--t, 0); width: var(--w, auto); height: var(--h, auto); }
  .aa-tahta .aa-ust h2 { font-size: max(15px, var(--fs)) !important; }
  .aa-tahta .aa-ust p { font-size: max(11px, var(--fs)) !important; }
  /* yolculuk: yeniden dizilir */
  .ay-tahta { gap: 12px; align-items: stretch; padding-top: 96px; }
  .ay-tahta .ay-hero { order: 2; flex: 1 1 100%; width: 100%; }
  .ay-tahta .ay-kare { order: 3; flex: 0 0 calc(25% - 9px); width: auto; }
  .ay-tahta .ay-marka { order: 4; flex: 1 1 100%; min-height: 188px; }
  .ay-tahta .ay-gri, .ay-tahta .ay-koyu, .ay-tahta .ay-kose, .ay-tahta .ay-ince { display: none; }
  .ay-tahta .ay-yt { order: 5; flex: 1 1 100%; min-height: 232px; }
  .ay-tahta .ay-bitis { order: 6; flex: 1 1 100%; padding-top: 24px; }
  .ay-marka, .ay-yt { aspect-ratio: auto; }
  .ay-marka .ay-kr-rozet { left: 4%; top: 12%; width: 24%; height: auto; aspect-ratio: 1; }
  .ay-marka .ay-kelime { left: 30%; top: 12%; width: 40%; font-size: clamp(20px, 6.4vw, 30px) !important; }
  .ay-marka .ay-kr-metin { left: 4%; top: 64%; width: 92%; }
  .ay-yt .ay-bas { left: 6%; top: 7%; width: 88%; font-size: clamp(16px, 4.8vw, 20px) !important; }
  .ay-yt .ay-kr-metin { left: 6%; top: 34%; width: 88%; }
  .ay-yt .ay-dugme { left: 6%; top: 66%; width: 88%; height: 22%; }
  .ay-kr-metin { font-size: clamp(12.5px, 3.5vw, 14px) !important; }
  .ay-dugme b, .ay-dugme small { font-size: clamp(11px, 3.1vw, 13px) !important; }
  .ay-j { font-size: clamp(24px, 7.4vw, 34px) !important; }
  .ay-js { font-size: clamp(15px, 4.2vw, 19px) !important; }
  .ay-jp { font-size: clamp(13px, 3.7vw, 15px) !important; width: 100%; }
  .ag-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 761px) and (max-width: 1000px) { .ag-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); } }