/* Tasarımlarım · site katmanı
   Galeri (galeri.css) başka yerde üretilir; bu dosya siteye dönüş yollarını, hizmet yolunu (site.js)
   ve kaydırma geçişlerini ekler. Yalnız VIARVO paleti ve galerinin yazı değişkenleri (--g, --o, --m).
   scripts/sync-tasarimlarim.mjs tarafından assets/css/site.css olarak yayımlanır. */

/* Üst çubuk: bölüm menüsü ortada, site bağlantıları CTA'nın yanında. Geniş ekranda görünür. */
.ust .site-nav { display: none; }
/* Mobile gallery: reserve an actual viewport for the artwork before the
   description. A 1fr row can collapse to zero beside a long auto-sized panel. */
@media (max-width: 1023px) {
  .izleyici { grid-template-rows: 100svh max-content; align-content: start; }
  .iz-sahne { position: relative; grid-template-rows: minmax(0, 1fr) auto; padding-top: 76px; }
  .iz-ust { position: fixed; inset: 0 0 auto; min-height: 76px; z-index: 4; background: var(--koyu); }
  .iz-ust .etk { min-width: 0; margin: 0; font-size: 9px; }
  .iz-say, .iz-kapat { flex: none; }
  .iz-panel { overflow: visible; }
}
@media (min-width: 1280px) {
  .ust nav:not(.site-nav) { margin-left: auto; }
  .ust .site-nav { display: flex; gap: 24px; margin-left: auto; }
}

/* Compact film preview leads gently into the existing production story. */
.tf { position: relative; background: var(--pudra); color: var(--murdum); scroll-margin-top: var(--ust-h); }
/* Giriş, alttaki üretim sahnesiyle aynı ızgarada (1560 px, --kenar): soldaki başlık ve sağdaki ikili pano tam genişliği kullanır. */
.tf-shell { max-width: 1560px; margin: auto; padding: calc(var(--ust-h) + 40px) var(--kenar) 24px; }
.tf-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.tf-eyebrow { margin: 0 0 16px; color: var(--ametist); font: 10px/1.5 var(--m); letter-spacing: .16em; text-transform: uppercase; }
.tf-heading h1 { margin: 0; font: 400 clamp(32px, 3.3vw, 56px)/1.06 var(--g); letter-spacing: -.035em; }
.tf-heading h1 em { color: var(--ametist); font-weight: 400; }
.tf-intro p { margin: 24px 0 8px; font: 15px/1.65 var(--o); }
.tf-intro a { display: inline-flex; gap: 16px; align-items: center; min-height: 44px; font: 13px var(--o); text-decoration: none; }
.tf-intro a span { transition: transform .3s var(--e); }
.tf-intro a:hover span { transform: translate(2px,-2px); }
.tf-preview { position: relative; display: block; aspect-ratio: 16/9; overflow: hidden; border-radius: 12px; background: var(--koyu); box-shadow: 0 12px 32px #502f4c12; }
.tf-preview img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--e); }
.tf-preview:hover img { transform: scale(1.015); }
/* Film ve Behance akışı: eş ikili pano. İki kart aynı en ve 3:2 oranında; film karesi kenarlardan hafifçe
   kırpılır (bantsız maxresdefault), Behance kapağı üstten sabitlenir (logo ve başlık hep görünür). */
.tf-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.tf-card { min-width: 0; }
.tf-pair .tf-preview { aspect-ratio: 3 / 2; }
.tf-preview-be img { object-position: 50% 0; }
.tf-watch b { font-weight: 400; }
.tf-watch .tf-arrow { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--e); }
.tf-preview-be:hover .tf-arrow { transform: translate(2px, -2px); }
.tf-watch { position: absolute; inset: auto auto 16px 16px; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 16px; border: 1px solid #f9f4f540; border-radius: 32px; background: #502f4ced; color: var(--pudra); font: 13px var(--o); }
.tf-watch svg { width: 18px; height: 18px; fill: currentColor; }
.tf-caption { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 8px 0 0; min-height: 44px; }
.tf-caption > span { min-width: 0; font: 9px/1.5 var(--m); letter-spacing: .08em; color: var(--ametist); }
.tf-caption a { display: inline-flex; align-items: center; min-height: 44px; font: 11px var(--o); text-decoration: none; }
.tf-continue { display: flex; align-items: center; gap: 16px; min-height: 64px; margin-top: 24px; border-top: 1px solid #70587c20; padding-top: 16px; font: 12px/1.5 var(--o); text-decoration: none; color: var(--ametist); }
.tf-continue svg { width: 80px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; }
.tf-continue circle { fill: var(--murdum); stroke: none; }
.tf-continue i { margin-left: auto; font-style: normal; }
.tf a:focus-visible, .tf-viewer :focus-visible { outline: 2px solid var(--ametist); outline-offset: 4px; }
.tf-viewer { margin: auto; padding: 0; width: min(960px, calc(100vw - 32px), calc((100svh - 152px) * 16 / 9)); max-width: none; max-height: calc(100svh - 32px); border: 1px solid #70587c40; border-radius: 12px; background: var(--pudra); color: var(--murdum); overflow: hidden; }
.tf-viewer::backdrop { background: #2e1b2ce0; }
.tf-viewer-bar { display: flex; align-items: center; gap: 16px; padding: 8px 16px; }
.tf-viewer-bar p { margin: 0 auto 0 0; font: 13px var(--o); }
.tf-viewer-bar button { min-height: 44px; padding: 8px 12px; border: 1px solid #70587c40; border-radius: 24px; font: 12px var(--o); }
.tf-player { aspect-ratio: 16/9; background: var(--koyu); }
.tf-player iframe { display: block; width: 100%; height: 100%; border: 0; }
.tf-viewer-foot { margin: 0; padding: 8px 16px; }
.tf-viewer-foot a { display: inline-flex; align-items: center; min-height: 40px; font: 12px var(--o); text-decoration: none; }
@media (min-width: 701px) and (max-width: 1000px) {
  .tf-layout { grid-template-columns: 1fr; gap: 32px; }
  .tf-pair { max-width: 720px; }
}
@media (max-width: 700px) {
  .tf-shell { padding-top: calc(var(--ust-h) + 24px); padding-bottom: 16px; }
  .tf-layout { grid-template-columns: 1fr; gap: 24px; }
  .tf-heading h1 { font-size: 32px; }
  .tf-intro p { margin-top: 16px; font-size: 13px; }
  .tf-intro p br { display: none; }
  .tf-pair { gap: 12px; }
  .tf-caption { gap: 8px; }
  .tf-watch { inset: auto auto 12px 12px; font-size: 12px; }
  .tf-continue { margin-top: 16px; font-size: 11px; gap: 12px; }
  .tf-continue svg { width: 48px; }
  .tf-viewer-bar { padding-inline: 12px; gap: 8px; }
}
/* Telefonda kartlar dar: düğme yalnız simge (bağlantının erişilebilir adı kalır), alt yazı alt alta. */
@media (max-width: 480px) {
  .tf-watch { inset: auto auto 8px 8px; width: 44px; justify-content: center; padding: 0; }
  .tf-watch b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tf-caption { flex-direction: column; align-items: flex-start; gap: 0; min-height: 0; }
  .tf-caption a { min-height: 36px; }
}
@media (prefers-reduced-motion: reduce) { .tf * { transition: none !important; } }

/* Kapanıştaki büyük logo: galeri.css yalnız üst çubuktaki .logo'yu boyuyor; burada SVG siyaha düşüyordu. */
.kapanis .logo-alt .li, .kapanis .logo-alt .ly { fill: currentColor; }

/* Alt çubuk: her genişlikte siteye dönüş. */
.site-alt { background: var(--koyu); color: var(--lavanta); border-top: 1px solid rgba(200, 184, 219, .14); }
.site-alt .ic { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; padding-top: 24px; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
.site-alt nav { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.site-alt a, .site-alt small { font: 400 11px/1.4 var(--m); letter-spacing: .22em; text-transform: uppercase; }
.site-alt a { display: inline-block; padding: 10px 0; color: var(--lavanta); text-decoration: none; }
.site-alt a:hover { color: var(--pudra); }
.site-alt small { letter-spacing: .18em; }


/* ================================================================ açılıştan çıkış
   site.js --cik (0 → 1) yazar: başlık yükselip söner, yörünge büyüyerek açılır (içinden geçilir). */
.acilis-ic { translate: 0 calc(var(--cik, 0) * -10vh); scale: calc(1 - var(--cik, 0) * .06); opacity: calc(1 - var(--cik, 0) * 1.3); }
.acilis .yorunge { scale: calc(1 + var(--cik, 0) * .45); opacity: calc(1 - var(--cik, 0) * .85); }


/* ================================================================ açılış — tipografik giriş (site.js · 0)
   Mürdüm tabanda ametist ve lavanta ışık; başlık harf harf yükselir, "hikâye"nin altında yol çizilir, nokta ucuna
   varır; arkada hizmet adları iri kontur yazıyla ağır ağır akar. Yörünge ve rozet yok; kapaklar yalnız ızgaraya
   uçarken görünür (site.js). Degrade yalnız palet renkleriyle. */
.acilis.ac-yeni { background:
    radial-gradient(58% 52% at 74% 18%, rgba(200, 184, 219, .3), rgba(200, 184, 219, 0) 64%),
    radial-gradient(52% 62% at 12% 88%, rgba(112, 88, 124, .85), rgba(112, 88, 124, 0) 70%),
    linear-gradient(165deg, rgba(112, 88, 124, .45) 0%, rgba(80, 47, 76, 0) 46%, rgba(46, 27, 44, .5) 100%),
    var(--murdum); }
.acilis.ac-yeni::before { content: ""; position: absolute; left: 50%; top: 44%; width: 72vmax; height: 72vmax; margin: -36vmax 0 0 -36vmax; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(200, 184, 219, .2), rgba(200, 184, 219, 0)); animation: ac-isik 24s ease-in-out infinite alternate; }
@keyframes ac-isik { from { transform: translate(-9%, -5%) scale(.9); } to { transform: translate(9%, 6%) scale(1.08); } }
.ac-yeni .yorunge { display: none; }
.ac-yeni .acilis-ic { padding: calc(var(--ust-h) + 32px) var(--kenar) 56px; opacity: calc(1 - var(--cik, 0) * 2.2); }   /* kapaklar gelmeden söner */
.ac-yeni .acilis-ic::before { background: radial-gradient(closest-side, rgba(80, 47, 76, .72), rgba(80, 47, 76, .38) 58%, rgba(80, 47, 76, 0)); }
.ac-yeni .etk { margin: 0 0 28px; color: var(--lavanta); }
.ac-yeni .bas { font-size: clamp(50px, min(9.4vw, 16vh), 150px); line-height: .98; letter-spacing: -.02em; color: var(--pudra); }
.ac-yeni .bas em { color: var(--lavanta); }
.acilis.ac-yeni .bas .k { opacity: 1; transform: none; transition: none; }
.ac-yeni .hf { display: inline-block; opacity: 0; transform: translateY(.42em) rotate(5deg); filter: blur(9px); transform-origin: 0 100%;
  transition: opacity .9s var(--e), transform 1.3s var(--e), filter 1s var(--e); transition-delay: calc(var(--j) * 36ms + 200ms); }
.acilis.ac-yeni.basla .hf { opacity: 1; transform: none; filter: blur(0); }
/* "hikâye"nin altındaki yol çizgisi ve şimdi noktası */
.ac-kuyruk { display: block; width: 4.8em; height: auto; margin: -.02em auto 0; overflow: visible; }
.ac-kuyruk path { fill: none; stroke: var(--lavanta); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 100px 100px; stroke-dashoffset: 100px; transition: stroke-dashoffset 1.7s var(--e) 1.5s; }
.acilis.basla .ac-kuyruk path { stroke-dashoffset: 0; }
.ac-nokta { fill: var(--pudra); opacity: 0; transition: opacity .3s var(--e); }
.ac-kuyruk.yol .ac-nokta { opacity: 1; }
/* tipografik doku: hizmet adları iki şeritte karşılıklı akar */
.ac-doku { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--ust-h) + 1vh) 0 5vh; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  translate: 0 calc(var(--cik, 0) * -12vh); opacity: calc(1 - var(--cik, 0) * 2); }
.ac-sira { display: flex; width: max-content; animation: ac-kay 170s linear infinite; }
.ac-sira.ters { animation-duration: 200s; animation-direction: reverse; }
.ac-sira > div { display: flex; align-items: center; flex: none; }
.ac-sira span { padding: 0 .26em; font: italic 400 clamp(84px, 12.5vw, 210px)/1.1 var(--g); white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(200, 184, 219, .24); }
.ac-sira.ters span { -webkit-text-stroke-color: rgba(200, 184, 219, .15); }
.ac-sira i { flex: none; width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(200, 184, 219, .32); }
@keyframes ac-kay { to { transform: translateX(-50%); } }
.ac-yeni.durgun::before, .ac-yeni.durgun .ac-sira { animation-play-state: paused; }
/* harekete geçiren satır: ihtiyaçtan başlayan cümle harf harf değişir, altında hizmetin adı; galerinin daktilo kutusu görünmez */
.ac-yeni .daktilo { position: absolute !important; width: 1px; height: 1px; min-height: 0; margin: 0; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); opacity: 0 !important; }
.ac-ifade { margin: 34px 0 0; }
.ac-satir { display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 1.45em; margin: 0; font: 500 clamp(17px, 1.55vw, 22px)/1.4 var(--o); color: var(--pudra); }
.ac-cizgi { flex: none; width: 40px; height: 1px; background: linear-gradient(90deg, rgba(200, 184, 219, 0), var(--lavanta)); }
.ac-cizgi.sag { transform: scaleX(-1); }
.ac-hizmet { min-height: 1.6em; margin: 10px 0 0; font: 400 11px/1.6 var(--m); letter-spacing: .26em; text-transform: uppercase; color: var(--lavanta); }
.ac-yazi .hi, .ac-hizmet .hi { display: inline-block; animation: ac-gir .7s var(--e) both; animation-delay: calc(var(--j) * 20ms); }
.ac-yazi.git .hi, .ac-hizmet.git .hi { animation: ac-cik .45s var(--e) both; animation-delay: calc(var(--j) * 8ms); }
@keyframes ac-gir { from { opacity: 0; transform: translateY(.7em); filter: blur(4px); } }
@keyframes ac-cik { to { opacity: 0; transform: translateY(-.6em); filter: blur(4px); } }
/* ana çağrı + WhatsApp */
.ac-cagri { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px; margin: 30px 0 0; }
.ac-ana { display: inline-flex; align-items: center; gap: 10px; padding: 16px 28px; border-radius: 40px; background: var(--pudra); color: var(--murdum); font: 600 15px/1 var(--o);
  text-decoration: none; box-shadow: 0 18px 40px -18px rgba(23, 13, 22, .7); transition: background-color .3s var(--e), transform .3s var(--e); }
.ac-ana:hover { background: var(--lavanta); transform: translateY(-1px); }
.ac-wa { padding: 8px 0; font: 400 11px/1 var(--m); letter-spacing: .22em; text-transform: uppercase; color: var(--lavanta); text-decoration: none; border-bottom: 1px solid rgba(200, 184, 219, .5);
  transition: color .3s var(--e), border-color .3s var(--e); }
.ac-wa:hover { color: var(--pudra); border-color: var(--pudra); }
/* üç hizmet alanı: sabit bağlantılar */
.ac-yon { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 8px 22px; margin: 26px 0 0; }
.ac-yon-etk { font: 400 10px/1 var(--m); letter-spacing: .24em; text-transform: uppercase; color: rgba(200, 184, 219, .7); }
.ac-yon a { font: 500 14px/1.2 var(--o); color: var(--pudra); text-decoration: none; padding: 4px 0; border-bottom: 1px solid rgba(200, 184, 219, .3); transition: border-color .3s var(--e), color .3s var(--e); }
.ac-yon a:hover { color: var(--lavanta); border-color: var(--lavanta); }
/* sayılar: tek ince satır */
.ac-yeni .sayilar { margin: 26px 0 0; font: 400 11px/1.6 var(--m); letter-spacing: .22em; color: rgba(200, 184, 219, .75); }
.ac-yeni .sayilar .r { display: inline-block; text-align: right; color: var(--pudra); }
/* "Kaydır" açılışın dibinde */
.ac-yeni > .kaydir { position: absolute; z-index: 3; left: 50%; bottom: 18px; translate: -50% 0; margin: 0; flex-direction: column-reverse; gap: 10px; font-size: 10px; letter-spacing: .3em;
  color: var(--lavanta); text-decoration: none; opacity: calc(1 - var(--cik, 0) * 3); }
.ac-yeni > .kaydir i { height: 36px; }
@media (max-width: 767px) {
  .ac-yeni .etk { margin-bottom: 20px; font-size: 10px; letter-spacing: .2em; }
  .ac-sira span { font-size: 68px; }
  .ac-ifade { margin-top: 26px; }
  .ac-satir { gap: 10px; font-size: 16px; }
  .ac-cizgi { width: 18px; }
  .ac-cagri { margin-top: 24px; gap: 14px; }
  .ac-ana { padding: 14px 22px; font-size: 14px; }
  .ac-yon { gap: 6px 16px; margin-top: 22px; }
  .ac-yon-etk { flex-basis: 100%; }
  .ac-yon a { font-size: 13px; }
  .ac-yeni .sayilar { font-size: 10px; letter-spacing: .16em; }
  .ac-yeni > .kaydir { display: none; }
}
@media (max-height: 880px) { .ac-yeni > .kaydir { display: none; } }   /* kısa ekranda sayı satırıyla çakışmasın */


/* ================================================================ bölüm başlıklarında yönlendirme (site.js · 0b) */
.yon-satir { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 24px; margin: 28px 0 0; }
.yon-soru { font: italic 400 clamp(19px, 1.6vw, 23px)/1.3 var(--g); color: var(--murdum); }
.yon-ana { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 40px; background: var(--murdum); color: var(--pudra); font: 600 14px/1 var(--o);
  text-decoration: none; white-space: nowrap; transition: background-color .3s var(--e), transform .3s var(--e); }
.yon-ana:hover { background: var(--ametist); transform: translateY(-1px); }
.yon-wa { padding: 6px 0; font: 400 11px/1 var(--m); letter-spacing: .2em; text-transform: uppercase; color: var(--murdum); text-decoration: none; border-bottom: 1px solid var(--lavanta); }
.yon-wa:hover { border-color: var(--murdum); }
@media (max-width: 767px) { .yon-satir { gap: 12px 18px; } .yon-soru { flex-basis: 100%; } }


/* ================================================================ hizmet yolu — ortak */
.izgara.hs { display: block; }
.hs-sahne { position: relative; }
.hs.hs-bos .hs-sahne { display: none; }
.hs [hidden] { display: none !important; }

.hs-dugum { display: block; flex: none; width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--ametist); background: var(--pudra);
  transition: background-color .45s var(--e), border-color .45s var(--e), color .45s var(--e), box-shadow .45s var(--e); }
.hs-tabela { display: flex; align-items: center; gap: 12px; margin: 0; font: 600 16px/1.2 var(--o); color: var(--murdum); }
.hs-tabela .hs-say { font: 400 11px/1 var(--m); letter-spacing: .14em; color: var(--ametist); }
.hs-kapi-ad { margin: 0; font: 400 clamp(34px, 3.4vw, 52px)/1.04 var(--g); letter-spacing: -.01em; color: var(--murdum); text-wrap: balance; }
.hs-kapi-ad em { display: block; font-style: italic; color: var(--ametist); }
.hs-kapi .etk, .hs-son .etk { margin: 0; }
.hs-kapi-ust .etk { margin-bottom: 16px; }
.hs-dev { display: block; font: 400 clamp(96px, 11vw, 176px)/.9 var(--m); letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1.2px var(--lavanta); font-variant-numeric: tabular-nums; }
.hs-son-metin { margin: 0; max-width: 360px; font-size: 17px; color: var(--murdum); }
.hs-son-bag { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin: 24px 0; }
.hs-cta { display: inline-block; padding: 14px 24px; border-radius: 40px; background: var(--murdum); color: var(--pudra); text-decoration: none; font: 600 15px/1 var(--o); white-space: nowrap; transition: background-color .3s var(--e), transform .3s var(--e); }
.hs-cta:hover { background: var(--ametist); transform: translateY(-1px); }
.hs-wa { font: 400 12px/1 var(--m); letter-spacing: .2em; text-transform: uppercase; color: var(--murdum); text-decoration: none; padding: 8px 0; border-bottom: 1px solid var(--lavanta); }
.hs-wa:hover { border-color: var(--murdum); }


/* ================================================================ hizmet yolu — şeritler (dar ekran, azaltılmış hareket)
   Her alan bir başlık, her durak kaydırmalı bir şerit; soldaki ince çizgi durakları birbirine bağlar. */
.hs:not(.hs-yolda) .hs-alan { position: relative; padding-left: 32px; }
.hs:not(.hs-yolda) .hs-alan + .hs-alan { margin-top: 96px; }
.hs:not(.hs-yolda) .hs-alan::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 0; width: 1px; background: var(--lavanta); }
.hs:not(.hs-yolda) .hs-kapi { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0 24px; }
.hs:not(.hs-yolda) .hs-kapi > .hs-dugum { position: absolute; left: -32px; top: 2px; background: var(--murdum); border-color: var(--murdum); font-size: 0; }
.hs:not(.hs-yolda) .hs-kapi-alt { display: contents; }
.hs:not(.hs-yolda) .hs-kapi-alt .etk { grid-column: 1; margin-top: 16px; }
.hs:not(.hs-yolda) .hs-dev { grid-column: 2; grid-row: 1 / span 2; align-self: end; font-size: clamp(64px, 12vw, 140px); }
.hs:not(.hs-yolda) .hs-durak { position: relative; margin-top: 48px; }
.hs:not(.hs-yolda) .hs-tabela { margin-bottom: 20px; }
.hs:not(.hs-yolda) .hs-tabela .hs-dugum { position: absolute; left: -32px; top: 3px; }
.hs:not(.hs-yolda) .hs-kartlar { display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-right: calc(-1 * var(--kenar)); padding: 0 var(--kenar) 8px 0; }
.hs:not(.hs-yolda) .hs-kartlar::-webkit-scrollbar { display: none; }
.hs:not(.hs-yolda) .hs-kartlar > .kart { flex: 0 0 min(62vw, 260px); min-width: 0; scroll-snap-align: start; }
.hs:not(.hs-yolda) .hs-son { position: relative; margin-top: 96px; padding: 48px 0 0 32px; border-top: 1px solid rgba(112, 88, 124, .2); }
.hs:not(.hs-yolda) .hs-son > .hs-dugum { position: absolute; left: 0; top: 55px; background: var(--murdum); border-color: var(--murdum); }
.hs:not(.hs-yolda) .hs-son .hs-kapi-alt { margin-top: 24px; }
@media (min-width: 768px) {
  .hs:not(.hs-yolda) .hs-kartlar { gap: 24px; }
  .hs:not(.hs-yolda) .hs-kartlar > .kart { flex-basis: calc((100% - 3 * 24px) / 3.4); }
}
@media (min-width: 1024px) {
  .hs:not(.hs-yolda) .hs-kartlar > .kart { flex-basis: calc((100% - 4 * 24px) / 5); }
}
@media (max-width: 767px) {
  .hs:not(.hs-yolda) .hs-alan { padding-left: 24px; }
  .hs:not(.hs-yolda) .hs-kapi > .hs-dugum, .hs:not(.hs-yolda) .hs-tabela .hs-dugum { left: -24px; }
  .hs:not(.hs-yolda) .hs-alan + .hs-alan, .hs:not(.hs-yolda) .hs-son { margin-top: 72px; }
  .hs:not(.hs-yolda) .hs-durak { margin-top: 40px; }
}


/* ================================================================ hizmet yolu — sabit sahne (geniş ekran)
   site.js ölçüleri yazar: --hs-kw/kh kart, --hs-r yolun yüksekliği, --hs-c bağlantı, --hs-top/--hs-h sahne,
   --hs-x içerik kenarı; kapı genişliği başlığına göre. Yol, kartları iki yakasına fermuar gibi dizer. */
.hs.hs-yolda { position: relative; }
.hs-yolda .hs-sahne { position: sticky; top: var(--hs-top); height: var(--hs-h); width: var(--hs-vw); margin-left: var(--hs-ml); overflow: clip; }
.hs-yolda .hs-pencere { position: absolute; inset: 0; overflow: clip;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 calc(var(--hs-x) * .9), #000 calc(100% - var(--hs-x) * 1.6), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 calc(var(--hs-x) * .9), #000 calc(100% - var(--hs-x) * 1.6), transparent); }
.hs-yolda .hs-yol { position: absolute; left: 0; top: var(--hs-pad); display: flex; align-items: flex-start; width: max-content; height: calc(2 * var(--hs-r)); will-change: transform; }
.hs-yolda .hs-yol::before { content: ""; position: absolute; left: 0; right: 0; top: var(--hs-r); height: 1px; background: var(--lavanta); }
.hs-yolda .hs-gecilen { position: absolute; left: 0; right: 0; top: calc(var(--hs-r) - .5px); height: 2px; background: var(--ametist); transform-origin: 0 50%; transform: scaleX(0); }
.hs-yolda .hs-alan { display: flex; flex: none; }

/* alan kapısı ve son durak: başlık yolun üstünde, sayı yolun altında */
.hs-yolda .hs-kapi, .hs-yolda .hs-son { position: relative; flex: none; width: 400px; height: calc(2 * var(--hs-r)); }
.hs-yolda .hs-kapi > .hs-dugum, .hs-yolda .hs-son > .hs-dugum { position: absolute; left: 0; top: var(--hs-r); z-index: 1; width: 40px; height: 40px; margin-top: -20px;
  display: grid; place-items: center; border-color: var(--murdum); font: 400 13px/1 var(--m); color: var(--murdum); }
.hs-yolda .hs-kapi.gecti > .hs-dugum, .hs-yolda .hs-son.gecti > .hs-dugum { background: var(--murdum); color: var(--pudra); box-shadow: 0 0 0 8px rgba(112, 88, 124, .12); }
.hs-yolda .hs-kapi-ust { position: absolute; left: 64px; right: 32px; bottom: calc(var(--hs-r) + 32px); }
.hs-yolda .hs-kapi-ad { white-space: nowrap; }
.hs-yolda .hs-kapi-alt { position: absolute; left: 64px; right: 32px; top: calc(var(--hs-r) + 32px); }
.hs-yolda .hs-dev { margin-top: 16px; font-size: min(calc(var(--hs-r) - 104px), 200px); }

/* durak: tabela yolun üstünde durur, kartlar iki yakada */
.hs-yolda .hs-durak { position: relative; flex: none; height: calc(2 * var(--hs-r)); margin-right: 64px; }
.hs-yolda .hs-tabela { position: absolute; left: 0; top: var(--hs-r); z-index: 1; transform: translateY(-50%); padding-right: 16px; background: var(--pudra); white-space: nowrap; }
.hs-yolda .hs-tabela .hs-say { transition: color .45s var(--e); }
.hs-yolda .hs-durak.gecti .hs-tabela .hs-dugum { background: var(--ametist); border-color: var(--ametist); }
.hs-yolda .hs-durak.simdi .hs-tabela .hs-dugum { background: var(--murdum); border-color: var(--murdum); box-shadow: 0 0 0 6px rgba(112, 88, 124, .16); }
.hs-yolda .hs-durak.simdi .hs-tabela .hs-say { color: var(--murdum); }
.hs-yolda .hs-kartlar { display: flex; height: 100%; padding-left: 24px; }
.hs-yolda .hs-kartlar > .kart { display: flex; flex: 0 0 var(--hs-kw); min-width: 0; margin-right: calc((24px - var(--hs-kw)) / 2); }
.hs-yolda .hs-kartlar > .kart[data-hs-son] { margin-right: 0; }
.hs-yolda .kart[data-hs="a"] { align-self: flex-start; flex-direction: column-reverse; }
.hs-yolda .kart[data-hs="b"] { align-self: flex-end; flex-direction: column; }
.hs-yolda .hs-kartlar .kart .alt { height: 24px; margin: 0; align-items: center; min-width: 0; }
.hs-yolda .kart[data-hs="a"] .alt { margin-bottom: 8px; }
.hs-yolda .kart[data-hs="b"] .alt { margin-top: 8px; }
.hs-yolda .hs-kartlar .kart .ad { min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* kart → yol bağlantısı ve yol üstündeki kavşak */
.hs-yolda .hs-kartlar > .kart::after { content: ""; position: absolute; left: 50%; width: 1px; height: var(--hs-c); background: var(--lavanta); }
.hs-yolda .kart[data-hs="a"]::after { top: 100%; }
.hs-yolda .kart[data-hs="b"]::after { bottom: 100%; }
.hs-yolda .hs-kartlar > .kart::before { content: ""; position: absolute; left: 50%; width: 7px; height: 7px; margin-left: -3px; box-sizing: border-box; border-radius: 50%;
  border: 1px solid var(--ametist); background: var(--pudra); transition: background-color .45s var(--e); }
.hs-yolda .kart[data-hs="a"]::before { top: calc(100% + var(--hs-c) - 3.5px); }
.hs-yolda .kart[data-hs="b"]::before { bottom: calc(100% + var(--hs-c) - 3.5px); }
.hs-yolda .kart.hs-gecti::before { background: var(--ametist); }

/* "şimdi" noktası: yolun geçilen kısmının başı */
.hs-yolda .hs-via { position: absolute; left: 0; top: calc(var(--hs-pad) + var(--hs-r)); z-index: 2; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%;
  background: var(--murdum); box-shadow: 0 0 0 5px rgba(112, 88, 124, .18); pointer-events: none; }
.hs-yolda .hs-via::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--ametist); animation: hs-nabiz 2.4s var(--e) infinite; }
@keyframes hs-nabiz { from { transform: scale(1); opacity: .7; } to { transform: scale(2.6); opacity: 0; } }

/* harita: durak çentikleri, alan etiketleri, önceki / sonraki */
.hs-yolda .hs-harita { position: absolute; left: var(--hs-x); right: var(--hs-x); bottom: 16px; height: 40px; display: flex; align-items: center; gap: 16px; }
.hs-ok { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--lavanta); color: var(--murdum); transition: background-color .3s var(--e), border-color .3s var(--e); }
.hs-ok:hover { border-color: var(--ametist); background: var(--beyaz); }
.hs-ok svg { width: 16px; height: 16px; }
.hs-cetvel { position: relative; flex: 1; height: 40px; margin: 0 8px; }
.hs-cetvel::before { content: ""; position: absolute; left: 0; right: 0; top: 12px; height: 1px; background: var(--lavanta); }
.hs-cetvel-dolu { position: absolute; left: 0; right: 0; top: 11.5px; height: 2px; background: var(--murdum); transform-origin: 0 50%; transform: scaleX(0); }
.hs-cizik { position: absolute; top: 0; width: 24px; height: 24px; margin-left: -12px; display: grid; place-items: center; border-radius: 50%; }
.hs-cizik::before { content: ""; width: 7px; height: 7px; box-sizing: border-box; border-radius: 50%; border: 1px solid var(--ametist); background: var(--pudra); transition: background-color .3s var(--e), transform .3s var(--e); }
.hs-cizik:hover::before { transform: scale(1.4); }
.hs-cizik.gecti::before { background: var(--ametist); }
.hs-cizik[aria-current="true"]::before { background: var(--murdum); border-color: var(--murdum); transform: scale(1.6); }
.hs-cetvel-alan { position: absolute; top: 26px; font: 400 10px/1 var(--m); letter-spacing: .2em; text-transform: uppercase; color: var(--ametist); white-space: nowrap; }
.hs-simdi { flex: none; width: 280px; margin: 0; font: 400 11px/1.3 var(--m); letter-spacing: .16em; text-transform: uppercase; color: var(--murdum); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs:not(.hs-yolda) .hs-gecilen, .hs:not(.hs-yolda) .hs-via, .hs:not(.hs-yolda) .hs-harita { display: none; }
@media (max-width: 767px) {
  .hs-yolda .hs-harita { gap: 12px; }
  .hs-yolda .hs-ok, .hs-yolda .hs-cetvel-alan { display: none; }
  .hs-yolda .hs-cetvel { margin: 0; }
  .hs-yolda .hs-simdi { width: 44vw; font-size: 10px; letter-spacing: .12em; }
  .hs-yolda .hs-tabela { font-size: 14px; gap: 10px; }
  .hs-yolda .hs-kartlar .kart .alt { gap: 8px; }
  .hs-yolda .hs-kartlar .kart .kod { font-size: 10px; }
  .hs-yolda .hs-kartlar .kart .ad { font-size: 12px; }
  .hs-yolda .hs-kapi-ust, .hs-yolda .hs-kapi-alt { left: 56px; right: 16px; }
}


/* ================================================================ özgün seri — iki şerit karşılıklı akar (site.js)
   Sahne üst çubuğun altına sabitlenir; üst şerit sağdan sola, alt şerit soldan sağa akar. Ortadaki kart tam boy. */
.oz-sira { display: contents; }
#ozgun.oz-yolda { position: relative; }
.oz-yolda .oz-sahne { position: sticky; top: var(--oz-top); height: var(--oz-h); width: var(--oz-vw); margin-left: var(--oz-ml); overflow: clip;
  display: flex; flex-direction: column; justify-content: center; }
.oz-yolda .ozgun-bas { flex: none; margin: 0; padding: 0 var(--oz-x) 24px; }
.oz-yolda .akis { display: flex; flex-direction: column; gap: 24px; overflow: visible; margin: 0; padding: 0; scroll-snap-type: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 calc(var(--oz-x) * .9), #000 calc(100% - var(--oz-x) * .9), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 calc(var(--oz-x) * .9), #000 calc(100% - var(--oz-x) * .9), transparent); }
.oz-yolda .oz-sira { display: flex; gap: 24px; width: max-content; will-change: transform; }
.oz-yolda .okart { flex: 0 0 var(--oz-kw); min-width: 0; scroll-snap-align: none; }
.oz-yolda .okart .alt { height: 34px; margin-top: 10px; overflow: hidden; }
.oz-yolda .okart .dz, .oz-yolda .okart .ad { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oz-yolda .okart .dz { line-height: 15px; }
.oz-yolda .okart .ad { margin-top: 2px; font-size: 14px; line-height: 17px; }


/* ================================================================ Yazılımın yolu — 15 slaytlık hikâye serisi (site.js · 2b)
   Açılıştan hemen sonra açık bölüm, özgün serinin dili: sahne sabitlenir, slaytlar tek sırada akar; ortadaki slayt
   tam boy ve net, kenarlara doğru küçülür. Altında künye (yıl · rol, ad, slaytın cümlesi), yol çizgisi, "şimdi"
   noktası ve yılların cetveli. Azaltılmış harekette ve kısa ekranda ızgara. */
.hikaye .hk-ozet { max-width: 620px; margin: 18px 0 0; font: 400 17px/1.6 var(--o); color: var(--murdum); opacity: .86; }
.hk { margin-top: 48px; }
.hk-yol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr)); gap: 32px 24px; }
.hk-kart { min-width: 0; }
.hk-kart figure { margin: 0; }
.hk-kart img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 14px;
  box-shadow: 0 22px 48px rgba(80, 47, 76, .16), 0 0 0 1px rgba(112, 88, 124, .12); transition: box-shadow .45s var(--e); }
.hk-kart figcaption { display: grid; gap: 4px; margin-top: 14px; }
.hk-etk { font: 400 11px/1.4 var(--m); letter-spacing: .2em; text-transform: uppercase; color: var(--ametist); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hk-kart strong { font: 600 17px/1.3 var(--o); color: var(--murdum); }
.hk-kart figcaption em { font: italic 400 17px/1.35 var(--g); color: var(--ametist); }
.hk-via, .hk-cetvel { display: none; }

.hk.hk-yolda { position: relative; margin-top: 24px; }
.hk-yolda .hk-sahne { position: sticky; top: var(--hk-top); height: var(--hk-h); width: var(--hk-vw); margin-left: var(--hk-ml); overflow: clip; }
.hk-yolda .hk-pencere { position: absolute; inset: 0; overflow: clip;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.hk-yolda .hk-yol { position: absolute; left: 0; top: var(--hk-pad); display: flex; align-items: flex-start; gap: 48px; width: max-content; will-change: transform; }
.hk-yolda .hk-yol::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--hk-kh) + 120px); height: 1px; background: var(--lavanta); }
.hk-yolda .hk-kart { flex: 0 0 var(--hk-kw); width: var(--hk-kw); transform-origin: 50% 40%; }
.hk-yolda .hk-kart.simdi img { box-shadow: 0 34px 80px rgba(80, 47, 76, .26), 0 0 0 1px rgba(112, 88, 124, .22); }
.hk-yolda .hk-via { display: block; position: absolute; left: 50%; top: calc(var(--hk-pad) + var(--hk-kh) + 120px); z-index: 2; width: 11px; height: 11px;
  margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--murdum); box-shadow: 0 0 0 5px rgba(112, 88, 124, .18); pointer-events: none; }
.hk-yolda .hk-via::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--ametist); animation: hs-nabiz 2.4s var(--e) infinite; }
.hk-yolda .hk-cetvel { display: flex; position: absolute; left: var(--hk-x); right: var(--hk-x); bottom: 16px; height: 40px; align-items: center; gap: 24px; }
.hk-cetvel .yy-cizgi { cursor: pointer; }
@media (max-width: 1100px) { .hk-cetvel .yy-ay { font-size: 0; } }
@media (max-width: 767px) {
  .hk-yolda .hk-yol { gap: 24px; }
  .hk-yolda .hk-cetvel { gap: 12px; }
  .hk-cetvel .yy-simdi { width: 52vw; }
  .hk-kart strong, .hk-kart figcaption em { font-size: 15px; }
}
/* Instagram'a yönlendirme: başlık altında ince bağlantı, serinin sonunda beyaz kart (metin solda, düğmeler sağda) */
.hk-ig-ust { margin: 20px 0 0; }
.hk-ig-ust a { display: inline-block; padding: 6px 0; font: 400 11px/1 var(--m); letter-spacing: .2em; text-transform: uppercase; color: var(--murdum);
  text-decoration: none; border-bottom: 1px solid var(--lavanta); }
.hk-ig-ust a:hover { border-color: var(--murdum); }
.hk-ig { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px 48px; margin: 56px 0 0; padding: 32px 40px; border-radius: 24px;
  background: #fff; box-shadow: 0 18px 48px rgba(80, 47, 76, .1), 0 0 0 1px rgba(112, 88, 124, .1); }
.hk-ig-bas { margin: 0; font: 400 clamp(26px, 2.6vw, 36px)/1.15 var(--g); color: var(--murdum); }
.hk-ig-bas em { font-style: italic; color: var(--ametist); }
.hk-ig-metin { max-width: 520px; margin: 10px 0 0; font: 400 16px/1.55 var(--o); color: var(--murdum); opacity: .84; }
.hk-ig-dugme { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin: 0; }
.hk-ig-ana, .hk-ig-takip { display: inline-flex; justify-content: center; align-items: center; gap: 8px; border-radius: 40px; font: 600 15px/1 var(--o);
  text-decoration: none; white-space: nowrap; transition: background-color .3s var(--e), color .3s var(--e), transform .3s var(--e); }
.hk-ig-ana { padding: 16px 26px; background: var(--murdum); color: var(--pudra); }
.hk-ig-ana:hover { background: var(--ametist); transform: translateY(-1px); }
.hk-ig-takip { padding: 15px 26px; border: 1px solid var(--murdum); color: var(--murdum); }
.hk-ig-takip:hover { background: var(--murdum); color: var(--pudra); }
@media (max-width: 767px) {
  .hk-ig { grid-template-columns: 1fr; padding: 24px; gap: 20px; }
  .hk-ig-ana, .hk-ig-takip { display: block; white-space: normal; text-align: center; line-height: 1.35; }
}

/* açılıştan hizmet yoluna uçan kapaklar bu bölüm ekrandayken gizli (site.js IntersectionObserver) */
.hk-ekranda .kp { opacity: 0 !important; transition: opacity .35s var(--e); }

.hk-kunye { margin: 40px 0 0; font: 400 11px/1.6 var(--m); letter-spacing: .06em; color: var(--ametist); }
.hk-kunye summary { cursor: pointer; width: max-content; padding: 6px 0; letter-spacing: .2em; text-transform: uppercase; border-bottom: 1px solid var(--lavanta); }
.hk-kunye summary:hover { color: var(--murdum); }
.hk-kunye p { margin: 12px 0 8px; }
.hk-kunye ul { list-style: none; margin: 0; padding: 0; columns: 3 260px; column-gap: 32px; }
.hk-kunye li { break-inside: avoid; padding: 2px 0; }
.hk-kunye a { color: var(--murdum); text-decoration: none; border-bottom: 1px solid var(--lavanta); }
.hk-kunye a:hover { border-color: var(--murdum); }


/* ================================================================ yıl yolu — 12 ay, tek zaman yolu (site.js)
   Ay kapısı: düğüm, ay adı, yıl, gün sayısı, ayın numarası. Kartlar yolun iki yakasında, yazıları yoldan uzakta.
   Üstte ince araç çubuğu (tasarım dili + kategori), altta bütün yılın cetveli. */
.yy-no, .yy-dugum, .yy-kat { display: none; }
.yy [hidden] { display: none !important; }
#yillik.yy-mod .aylar { display: none; }
#yillik.yy-mod .yil-arac { position: sticky; top: var(--ust-h); z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  margin: 0 calc(-1 * var(--kenar)) 24px; padding: 10px var(--kenar); background: rgba(249, 244, 245, .9);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(112, 88, 124, .12); }
#yillik.yy-mod .yil-arac > .cipler { display: none; }
#yillik.yy-mod .dil-anahtar { flex-wrap: nowrap; gap: 6px; }
#yillik.yy-mod .dil { font-size: 0; gap: 0; padding: 4px; transition-property: background-color, border-color, color; }   /* boyut anında: daralırken çubuk taşmasın */
#yillik.yy-mod .dil[aria-pressed="true"] { font-size: 14px; gap: 10px; padding: 4px 16px 4px 4px; }
#yillik.yy-mod .yy-kat { display: flex; align-items: center; gap: 12px; min-width: 0; }
.yy-kat .arac-etk { margin: 0; }
.yy-kat select { -webkit-appearance: none; appearance: none; min-width: 0; max-width: 46vw; height: 38px; padding: 0 40px 0 16px; border-radius: 40px; border: 1px solid var(--lavanta);
  background: var(--beyaz) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5l4 4 4-4' fill='none' stroke='%23502F4C' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center / 12px;
  font: 600 14px/1 var(--o); color: var(--murdum); cursor: pointer; text-overflow: ellipsis; }
.yy-kat select:hover { border-color: var(--ametist); }

.yy.yy-yolda { position: relative; }
.yy-yolda .yy-sahne { position: sticky; top: var(--yy-top); height: var(--yy-h); width: var(--yy-vw); margin-left: var(--yy-ml); overflow: clip; }
.yy-yolda .yy-pencere { position: absolute; inset: 0; overflow: clip;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 calc(var(--yy-x) * .9), #000 calc(100% - var(--yy-x) * 1.6), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 calc(var(--yy-x) * .9), #000 calc(100% - var(--yy-x) * 1.6), transparent); }
.yy-yolda #aylar-l { position: absolute; left: 0; top: var(--yy-pad); display: flex; align-items: flex-start; width: max-content; height: calc(2 * var(--yy-r)); will-change: transform; }
.yy-yolda #aylar-l::before { content: ""; position: absolute; left: 0; right: 0; top: var(--yy-r); height: 1px; background: var(--lavanta); }
.yy-yolda .yy-gecilen { position: absolute; left: 0; right: 0; top: calc(var(--yy-r) - .5px); height: 2px; background: var(--ametist); transform-origin: 0 50%; transform: scaleX(0); }
.yy-yolda .ay-grup { display: flex; flex: none; height: 100%; margin: 0 56px 0 0; padding: 0; }
.yy-yolda .ay-bas { position: relative; display: block; flex: none; height: 100%; margin: 0; padding: 0; border: 0; }
.yy-yolda .ay-bas .yy-dugum { display: block; position: absolute; left: 0; top: var(--yy-r); z-index: 1; width: 28px; height: 28px; margin-top: -14px; box-sizing: border-box;
  border-radius: 50%; border: 1px solid var(--murdum); background: var(--pudra); transition: background-color .45s var(--e), box-shadow .45s var(--e); }
.yy-yolda .ay-grup.gecti .yy-dugum { background: var(--murdum); box-shadow: 0 0 0 7px rgba(112, 88, 124, .12); }
.yy-yolda .ay-bas h3 { position: absolute; left: 48px; bottom: calc(var(--yy-r) + 28px); margin: 0; font-size: clamp(40px, 4.2vw, 64px); line-height: 1; white-space: nowrap; }
.yy-yolda .ay-bas .yil { position: absolute; left: 48px; top: calc(var(--yy-r) + 28px); }
.yy-yolda .ay-bas .say { position: absolute; left: 48px; top: calc(var(--yy-r) + 52px); margin: 0; white-space: nowrap; }
.yy-yolda .ay-bas .yy-no { display: block; position: absolute; left: 44px; top: calc(var(--yy-r) + 88px); font: 400 min(calc(var(--yy-r) - 124px), 176px)/.9 var(--m);
  letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1.2px var(--lavanta); font-variant-numeric: tabular-nums; }
.yy-yolda .ay-grup .izgara { display: grid; grid-template-columns: none; grid-template-rows: auto auto; grid-auto-flow: column; grid-auto-columns: var(--yy-kw);
  gap: calc(2 * var(--yy-c)) 24px; height: 100%; align-content: start; }
.yy-yolda .ay-grup .kart { display: flex; min-width: 0; }
.yy-yolda .kart[data-yy="a"] { flex-direction: column-reverse; }
.yy-yolda .kart[data-yy="b"] { flex-direction: column; }
.yy-yolda .ay-grup .kart .alt { height: 56px; margin: 0; overflow: hidden; }
.yy-yolda .kart[data-yy="a"] .alt { margin-bottom: 8px; }
.yy-yolda .kart[data-yy="b"] .alt { margin-top: 8px; }
.yy-yolda .ay-grup .kart .tarih, .yy-yolda .ay-grup .kart .ad { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yy-yolda .ay-grup .kart .ad { margin-top: 4px; font-size: 14px; line-height: 20px; }
.yy-yolda .ay-grup .gkart .dil5 { margin-top: 8px; }
/* her sütunun yol üstündeki kavşağı */
.yy-yolda .kart[data-yy="a"]::after { content: ""; position: absolute; left: 50%; top: calc(100% + var(--yy-c) - 3px); width: 6px; height: 6px; margin-left: -3px; border-radius: 50%;
  background: var(--lavanta); transition: background-color .45s var(--e); }
.yy-yolda .kart.yy-gecti::after { background: var(--ametist); }
.yy-sikis .ay-grup .kart .alt { height: 40px; }
.yy-sikis .ay-grup .gkart .dil5 { display: none; }

/* "şimdi" noktası (hizmet yolu ile ortak görünüm) */
.yy-yolda .yy-via { position: absolute; left: 0; top: calc(var(--yy-pad) + var(--yy-r)); z-index: 2; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%;
  background: var(--murdum); box-shadow: 0 0 0 5px rgba(112, 88, 124, .18); pointer-events: none; }
.yy-yolda .yy-via::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--ametist); animation: hs-nabiz 2.4s var(--e) infinite; }

/* yılın cetveli: ay etiketleri (tıklanır), gün çentikleri, geçilen kısım */
.yy-yolda .yy-cetvel { position: absolute; left: var(--yy-x); right: var(--yy-x); bottom: 16px; height: 40px; display: flex; align-items: center; gap: 24px; }
.yy-cizgi { position: relative; flex: 1; height: 40px; }
.yy-cizgi::before { content: ""; position: absolute; left: 0; right: 0; top: 12px; height: 1px; background: var(--lavanta); }
.yy-dolu { position: absolute; left: 0; right: 0; top: 11.5px; height: 2px; background: var(--murdum); transform-origin: 0 50%; transform: scaleX(0); }
.yy-gun { position: absolute; top: 8px; width: 1px; height: 9px; margin-left: -.5px; background: var(--lavanta); transition: background-color .3s var(--e); }
.yy-gun.gecti { background: var(--ametist); }
.yy-ay { position: absolute; top: 0; height: 40px; padding: 25px 0 0; font: 400 10px/1 var(--m); letter-spacing: .16em; text-transform: uppercase; color: var(--ametist); text-align: left; white-space: nowrap; }
.yy-ay::before { content: ""; position: absolute; left: 0; top: 3px; width: 1px; height: 19px; background: var(--ametist); }
.yy-ay:hover, .yy-ay[aria-current="true"] { color: var(--murdum); }
.yy-ay[aria-current="true"]::before { width: 2px; background: var(--murdum); }
.yy-simdi { flex: none; width: 340px; margin: 0; font: 400 11px/1.3 var(--m); letter-spacing: .14em; text-transform: uppercase; color: var(--murdum); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1023px) {
  #yillik.yy-mod .yil-arac .arac-etk { display: none; }
  #yillik.yy-mod .dil[aria-pressed="true"] { font-size: 0; gap: 0; padding: 4px; }
}
@media (max-width: 767px) {
  #yillik.yy-mod .yy-kat { flex: 1 1 0; justify-content: flex-end; }
  .yy-kat select { width: 100%; max-width: 220px; height: 36px; padding: 0 30px 0 12px; background-position: right 12px center; font-size: 13px; }
  .yy-yolda .ay-bas h3, .yy-yolda .ay-bas .yil, .yy-yolda .ay-bas .say { left: 40px; }
  .yy-yolda .ay-grup .kart .ad { font-size: 12px; }
  .yy-yolda .yy-cetvel { gap: 12px; }
  .yy-ay { font-size: 0; }
  .yy-simdi { width: 46vw; font-size: 10px; letter-spacing: .1em; }
}


/* ================================================================ sektör sahnesi — 21 sektörün infografiği (site.js)
   Koyu başlık sabit bir sahneye dönüşür: solda başlık ve şimdiki sektör, sağda kaydırmayla çizilen sahne şeridi,
   altta aile cetveli. Dar ya da kısa ekranda başlık sahnenin üstünde akar, panel sahnenin tepesine geçer.
   site.js ölçüleri yazar: --vs-top/--vs-h sahne, --vs-x içerik kenarı, --vs-pl pencere, --vs-sw/--vs-sh sahne boyu. */
.vs { display: none; }
.vaka.vs-mod #vaka-ciz { display: none; }
.vaka.vs-mod .vaka-bas { display: block; }
.vaka.vs-mod .vaka-ust.koyu { padding-bottom: 0; background: linear-gradient(180deg, var(--koyu), var(--murdum)); }
.vaka.vs-mod .vaka-alt { margin-top: 0; }
.vaka.vs-mod .vs { display: block; position: relative; margin-top: 64px; }
.vaka.vs-mod .vaka-ust.vs-yan:not(.vs-ustte) { padding-top: 0; }
.vaka-ust.vs-yan:not(.vs-ustte) .vaka-bas { display: none; }
.vaka-ust.vs-yan:not(.vs-ustte) .vs { margin-top: 0; }
.vs-sahne { position: sticky; top: var(--vs-top); height: var(--vs-h); width: var(--vs-vw); margin-left: var(--vs-ml); overflow: clip;
  background: radial-gradient(46% 64% at 70% 42%, rgba(200, 184, 219, .13), transparent 70%); }
.vs-pencere { position: absolute; left: var(--vs-pl); right: 0; top: 0; bottom: 64px; overflow: clip;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 72px, #000 calc(100% - var(--vs-x) * 1.2 - 24px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 72px, #000 calc(100% - var(--vs-x) * 1.2 - 24px), transparent); }
.vaka-ust:not(.vs-yan) .vs-pencere { -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--vs-x), #000 calc(100% - var(--vs-x)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--vs-x), #000 calc(100% - var(--vs-x)), transparent); }
.vs-serit { position: absolute; left: 0; top: var(--vs-st); display: flex; width: max-content; will-change: transform; }
.vs-s { display: block; flex: none; width: var(--vs-sw); height: var(--vs-sh); overflow: visible; }
.vs-s.vs-son { width: calc(var(--vs-sw) / 2); }

/* çizim: her öğe sahnenin --d ilerlemesiyle kendi sırasında (--o) çizilir */
.vs-s .vs-c, .vs-s .vs-a, .vs-s .vs-n, .vs-s .vs-b, .vs-s .vs-su, .vs-s .vs-tara, .vs-s .vs-d, .vs-s .vs-alt { --q: clamp(0, (var(--d, 0) - var(--o, 0)) * 2.2, 1); }
.vs-c { fill: none; stroke: var(--lavanta); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 100px 100px; stroke-dashoffset: calc((1 - var(--q)) * 100px); opacity: min(1, calc(var(--q) * 12)); }
.vs-c.i { stroke-width: 1.1; stroke-opacity: .6; }
.vs-c.p { stroke: var(--pudra); stroke-width: 2; }
.vs-a { fill: var(--lavanta); fill-opacity: .09; stroke: none; opacity: var(--q); }
.vs-a.a2 { fill: var(--pudra); fill-opacity: .5; }
.vs-n { fill: var(--pudra); stroke: none; opacity: var(--q); }
.vs-b { fill: none; stroke: var(--lavanta); stroke-width: 1.3; stroke-linecap: round; stroke-dasharray: 3px 9px; opacity: calc(var(--q) * .85); }
.vs-su { fill: none; stroke: var(--pudra); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 100px 100px; stroke-dashoffset: 100px; opacity: var(--q); }
.vs-tara { fill: none; stroke: var(--pudra); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16px 84px; opacity: var(--q); }
.vs-alt { font: 400 11px var(--m); letter-spacing: .22em; fill: var(--lavanta); opacity: calc(var(--q) * .75); }

/* yolculuk: kesintisiz çizgi, geçilen kısım, altı durak */
.vs-yol { fill: none; stroke: var(--lavanta); stroke-opacity: .13; stroke-width: 10; stroke-linecap: round; }
.vs-yol2 { fill: none; stroke: var(--lavanta); stroke-opacity: .7; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: .1px 7px; }
.vs-iz { fill: none; stroke: var(--pudra); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 100px 100px; stroke-dashoffset: 100px; }
.vs-d { opacity: var(--q); }
.vs-hale { fill: none; stroke: var(--lavanta); stroke-opacity: .3; stroke-width: 1; transition: stroke-opacity .45s var(--e), stroke .45s var(--e); }
.vs-disk { fill: var(--koyu); stroke: var(--lavanta); stroke-width: 1.3; transition: fill .45s var(--e); }
.vs-ik { fill: none; stroke: var(--lavanta); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .45s var(--e); }
.vs-et { font: 400 12.5px var(--m); letter-spacing: .16em; fill: var(--lavanta); text-anchor: middle; transition: fill .45s var(--e); }
.vs-et-no { fill-opacity: .55; }
.vs-d.yan .vs-disk { fill: var(--lavanta); }
.vs-d.yan .vs-ik { stroke: var(--murdum); }
.vs-d.yan .vs-et { fill: var(--pudra); }
.vs-d.simdi .vs-hale { stroke: var(--pudra); stroke-opacity: .9; }
.vs-son .vs-disk { fill: var(--lavanta); }
.vs-ok { fill: none; stroke: var(--murdum); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* "şimdi" noktası: yolculuk çizgisinin ucu */
.vs-via { position: absolute; left: 0; top: 0; z-index: 2; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--pudra); box-shadow: 0 0 0 6px rgba(249, 244, 245, .14); pointer-events: none; }
.vs-via::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--lavanta); animation: hs-nabiz 2.4s var(--e) infinite; }

/* sol sütun: başlık + şimdiki sektör */
.vs-sol { position: absolute; z-index: 1; left: var(--vs-x); top: 0; bottom: 64px; width: var(--vs-sol); display: flex; flex-direction: column; justify-content: center; gap: 40px; }
.vs-sol .etk { margin: 0 0 24px; }
.vs-sol .bas { font-size: clamp(40px, min(4.4vw, 7.4vh), 76px); }
.vs-sol .giris { margin-bottom: 0; font-size: 17px; }
.vs-panel { color: var(--pudra); }
.vs-ust { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 0 0 12px; font: 400 11px/1.4 var(--m); letter-spacing: .2em; text-transform: uppercase; color: var(--lavanta); }
.vs-kod { color: var(--pudra); }
.vs-ad { margin: 0; font: 400 clamp(28px, 2.5vw, 40px)/1.1 var(--g); color: var(--pudra); text-wrap: balance; }
.vs-soru { margin: 8px 0 0; max-width: 460px; font: italic 400 17px/1.45 var(--g); color: var(--lavanta); }
.vs-durak { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 16px; margin: 24px 0 0; padding-top: 20px; border-top: 1px solid rgba(200, 184, 219, .22); transition: opacity .3s var(--e); }
.vs-durak-no { grid-row: span 2; font: 400 34px/1 var(--m); color: transparent; -webkit-text-stroke: 1px var(--lavanta); font-variant-numeric: tabular-nums; }
.vs-durak-ad { font: 600 16px/1.2 var(--o); color: var(--pudra); }
.vs-durak-acik { font: 400 14px/1.4 var(--o); color: var(--lavanta); }
.vs-bekle .vs-durak { opacity: .45; }
.vs-incele { display: inline-block; margin-top: 24px; padding: 13px 22px; border-radius: 40px; background: var(--pudra); color: var(--murdum); font: 600 14px/1 var(--o);
  text-decoration: none; white-space: nowrap; transition: background-color .3s var(--e), transform .3s var(--e); }
.vs-incele:hover { background: var(--lavanta); transform: translateY(-1px); }
.vs-eylem { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 24px 0 0; }
.vs-eylem .vs-incele { margin: 0; }
.vs-teklif { padding: 6px 0; font: 400 11px/1 var(--m); letter-spacing: .2em; text-transform: uppercase; color: var(--lavanta); text-decoration: none; border-bottom: 1px solid rgba(200, 184, 219, .45);
  transition: color .3s var(--e), border-color .3s var(--e); }
.vs-teklif:hover { color: var(--pudra); border-color: var(--pudra); }
.vs-dar .vs-soru { display: none; }

/* üst düzen (dar ya da kısa ekran): panel sahnenin tepesinde tek blok */
.vaka-ust:not(.vs-yan) .vs-sol { left: var(--vs-x); right: var(--vs-x); top: 16px; bottom: auto; width: auto; display: block; }
.vaka-ust:not(.vs-yan) .vs-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 4px 16px; }
.vaka-ust:not(.vs-yan) .vs-ust { grid-column: 1 / -1; margin: 0; }
.vaka-ust:not(.vs-yan) .vs-ad { font-size: clamp(22px, 5.4vw, 32px); }
.vaka-ust:not(.vs-yan) .vs-soru { display: none; }
.vaka-ust:not(.vs-yan) .vs-durak { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 0; padding: 0; border: 0; min-width: 0; }
.vaka-ust:not(.vs-yan) .vs-durak-no { font-size: 12px; color: var(--lavanta); -webkit-text-stroke: 0; }
.vaka-ust:not(.vs-yan) .vs-durak-ad { font-size: 14px; white-space: nowrap; }
.vaka-ust:not(.vs-yan) .vs-durak-acik { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vaka-ust:not(.vs-yan) .vs-eylem { grid-column: 2; grid-row: 2 / span 2; flex-direction: column; align-items: flex-end; gap: 8px; margin: 0; }
.vaka-ust:not(.vs-yan) .vs-incele { padding: 11px 16px; font-size: 13px; }
.vaka-ust:not(.vs-yan) .vs-teklif { padding: 2px 0; font-size: 9.5px; letter-spacing: .14em; }

/* aile cetveli (yıl yolu cetvelinin koyu zemindeki hâli) */
.vs-cetvel { position: absolute; left: var(--vs-x); right: var(--vs-x); bottom: 16px; height: 40px; }
.vs-cetvel .yy-cizgi { cursor: pointer; }
.vs-cetvel .yy-cizgi::before { background: rgba(200, 184, 219, .3); }
.vs-cetvel .yy-dolu { background: var(--pudra); }
.vs-cetvel .yy-gun { background: rgba(200, 184, 219, .55); }
.vs-cetvel .yy-gun.gecti { background: var(--pudra); }
.vs-cetvel .yy-ay { color: var(--lavanta); }
.vs-cetvel .yy-ay::before { background: var(--lavanta); }
.vs-cetvel .yy-ay:hover, .vs-cetvel .yy-ay[aria-current="true"] { color: var(--pudra); }
.vs-cetvel .yy-ay[aria-current="true"]::before { width: 2px; background: var(--pudra); }
@media (max-width: 1023px) {
  .vs-cetvel .yy-ay { font-size: 0; }
}
@media (max-width: 767px) {
  .vaka-ust:not(.vs-yan) .vs-durak-acik { display: none; }
  .vaka-ust:not(.vs-yan) .vs-ust { letter-spacing: .14em; gap: 4px 10px; font-size: 10px; }
}


/* ================================================================ sektör yolu — 21 temsili sektör çalışması (site.js)
   Aile durakları yolun üstünde, kartlar altında yan yana akar; altta aile cetveli (yıl yolu cetveliyle aynı). */
.vkart-l.vy-yolda { display: block; position: relative; }
.vaka.vy-mod .vaka-ust { padding-bottom: 128px; }
.vaka.vy-mod .vaka-alt { margin-top: 0; }
.vy [hidden] { display: none !important; }
.vy-yolda .vy-sahne { position: sticky; top: var(--vy-top); height: var(--vy-h); width: var(--vy-vw); margin-left: var(--vy-ml); overflow: clip; }
.vy-yolda .vy-pencere { position: absolute; inset: 0; overflow: clip;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 calc(var(--vy-x) * .9), #000 calc(100% - var(--vy-x) * 1.6), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 calc(var(--vy-x) * .9), #000 calc(100% - var(--vy-x) * 1.6), transparent); }
.vy-yolda .vy-yol { position: absolute; left: 0; top: var(--vy-pad); display: flex; align-items: flex-start; gap: 64px; width: max-content; will-change: transform; }
.vy-yolda .vy-yol::before { content: ""; position: absolute; left: 0; right: 0; top: 36px; height: 1px; background: var(--lavanta); }
.vy-yolda .vy-gecilen { position: absolute; left: 0; right: 0; top: 35.5px; height: 2px; background: var(--ametist); transform-origin: 0 50%; transform: scaleX(0); }
.vy-yolda .vy-aile { position: relative; flex: none; }
.vy-yolda .vy-tabela { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 12px; height: 72px; margin: 0; padding-right: 16px; background: var(--pudra);
  font: 600 15px/1 var(--o); color: var(--murdum); white-space: nowrap; }
.vy-yolda .vy-tabela .hs-dugum { margin-top: 0; }
.vy-yolda .vy-say { font: 400 11px/1 var(--m); letter-spacing: .14em; color: var(--ametist); }
.vy-yolda .vy-aile.gecti .hs-dugum { background: var(--murdum); border-color: var(--murdum); box-shadow: 0 0 0 6px rgba(112, 88, 124, .14); }
.vy-yolda .vy-kartlar { display: flex; gap: 24px; }
.vy-yolda .vy-kartlar > .vk { flex: 0 0 var(--vy-kw); width: var(--vy-kw); min-width: 0; }
.vy-yolda .vk .govde { padding: 22px 26px 24px; }
.vy-yolda .vk .govde .etk { margin: 0 0 10px; font-size: 10px; }
.vy-yolda .vk .govde .bas { font-size: 26px; }
.vy-yolda .vk .sektor { margin: 10px 0 14px; font-size: 14px; line-height: 1.4; }
.vy-yolda .vk .teslim { gap: 6px; margin-bottom: 16px; }
.vy-yolda .vk .teslim span { font-size: 11px; padding: 4px 9px; }
.vy-yolda .vk .incele { font-size: 10px; }
.vy-yolda .vk .temsili { right: 14px; top: 14px; font-size: 8px; padding: 6px 9px; }
.vy-sikis .vk .teslim, .vy-sikis .vk .sektor { display: none; }
.vy-sikis .vk .govde .bas { margin-bottom: 12px; }
.vy-yolda .vy-via { position: absolute; left: 0; top: calc(var(--vy-pad) + 36px); z-index: 2; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%;
  background: var(--murdum); box-shadow: 0 0 0 5px rgba(112, 88, 124, .18); pointer-events: none; }
.vy-yolda .vy-via::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--ametist); animation: hs-nabiz 2.4s var(--e) infinite; }
.vy-yolda .vy-cetvel { position: absolute; left: var(--vy-x); right: var(--vy-x); bottom: 16px; height: 40px; display: flex; align-items: center; gap: 24px; }
.vy:not(.vy-yolda) .vy-gecilen, .vy:not(.vy-yolda) .vy-via, .vy:not(.vy-yolda) .vy-cetvel, .vy:not(.vy-yolda) .vy-tabela { display: none; }
.vy:not(.vy-yolda) .vy-yol, .vy:not(.vy-yolda) .vy-aile, .vy:not(.vy-yolda) .vy-kartlar, .vy:not(.vy-yolda) .vy-sahne, .vy:not(.vy-yolda) .vy-pencere { display: contents; }
@media (max-width: 767px) {
  .vy-yolda .vk .govde { padding: 18px 20px 20px; }
  .vy-yolda .vk .govde .bas { font-size: 22px; }
  .vy-yolda .vy-cetvel { gap: 12px; }
  .vy-yolda .vy-tabela { font-size: 13px; }
}

/* Üretim yolculuğu · özgün sanatın çevresinde sakin, editoryal bir okuma alanı. */
.uj { padding-top: var(--uj-top, var(--ust-h)); background: var(--pudra); color: var(--murdum); }
.uj-scene { max-width: 1560px; margin: 0 auto; padding: 48px var(--kenar); }
.uj-eyebrow { margin: 0 0 24px; font: 400 10px/1.5 var(--m); text-transform: uppercase; letter-spacing: .2em; }
.uj h2 { margin: 0; font: 400 clamp(42px, 5.4vw, 82px)/1.02 var(--g); letter-spacing: -.045em; }
.uj h2 em { color: var(--ametist); font-weight: 400; }
.uj-intro { max-width: 360px; margin: 24px 0 28px; font-size: 17px; color: var(--ametist); }
.uj-chapters { display: grid; max-width: 360px; border-top: 1px solid #70587c33; }
.uj-chapters a { display: flex; align-items: center; gap: 18px; padding: 11px 0; border-bottom: 1px solid #70587c33; text-decoration: none; font-size: 14px; color: var(--ametist); }
.uj-chapters a > span { min-width: 72px; font: 10px var(--m); opacity: .8; }
.uj-chapters a > i { margin-left: auto; font-style: normal; }
.uj-chapters a[aria-current="step"] { color: var(--murdum); font-weight: 600; }
.uj-chapters a[aria-current="step"] > i { transform: rotate(45deg); }
.uj-current { display: none; max-width: 360px; min-height: 86px; margin-top: 26px; }
.uj-category { font: 10px var(--m); letter-spacing: .12em; text-transform: uppercase; }
.uj-caption { margin: 8px 0 0; color: var(--ametist); font-size: 14px; line-height: 1.55; }
.uj-skip { display: inline-flex; align-items: center; gap: 20px; margin-top: 24px; padding: 10px 0; font-size: 13px; text-decoration: none; border-bottom: 1px solid #70587c66; }
.uj-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 32px; margin-top: 48px; }
.uj-panel { margin: 0; min-width: 0; scroll-margin-top: calc(var(--ust-h) + 24px); }
.uj-art { display: block; position: relative; text-decoration: none; }
.uj-art img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: contain; border-radius: 3px; }
.uj-enlarge { position: absolute; right: 12px; bottom: 12px; padding: 8px 13px; background: var(--pudra); color: var(--murdum); border: 1px solid #70587c33; border-radius: 30px; font-size: 11px; box-shadow: 0 3px 16px #502f4c12; }
.uj-panel figcaption { padding-top: 20px; }
.uj-panel figcaption > span { font: 10px var(--m); color: var(--ametist); }
.uj-panel h2 { font: 400 28px/1.15 var(--g); margin: 12px 0; }
.uj-panel figcaption p { font-size: 15px; color: var(--ametist); margin: 0; }
.uj-pinned .uj-scene { position: sticky; top: var(--uj-top); height: var(--uj-h); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 16px clamp(32px, 5vw, 88px); padding-top: 28px; padding-bottom: 16px; }
.uj-pinned .uj-editorial { align-self: center; }
.uj-pinned .uj-current { display: block; }
.uj-pinned .uj-gallery { display: block; position: relative; margin: 0; min-height: 0; }
.uj-pinned .uj-panel { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; }
.uj-pinned .uj-panel:first-child { opacity: 1; visibility: visible; }
.uj-pinned .uj-art { width: auto; height: 100%; max-height: 820px; max-width: 100%; aspect-ratio: 4/5; }
.uj-pinned .uj-art img { height: 100%; width: 100%; box-shadow: 0 14px 38px -20px #502f4c55; }
.uj-pinned figcaption { display: none; }
.uj-controls { grid-column: 1/-1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 28px; border-top: 1px solid #70587c33; padding-top: 10px; }
.uj-controls[hidden] { display: none; }
.uj-transport { display: flex; gap: 12px; align-items: center; }
.uj-transport button { width: 36px; height: 36px; border: 1px solid #70587c44; border-radius: 50%; font-size: 18px; }
.uj-transport button:disabled { opacity: .3; cursor: default; }
.uj-count { font: 11px var(--m); white-space: nowrap; color: var(--ametist); }
.uj-count b { color: var(--murdum); font-weight: 400; }
.uj-stops { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 5px; }
.uj-stops button { height: 38px; display: flex; flex-direction: column; justify-content: center; gap: 6px; font: 9px var(--m); color: var(--ametist); }
.uj-stops i { width: 100%; height: 2px; background: #70587c26; }
.uj-stops [aria-current="step"] { color: var(--murdum); font-weight: 700; }
.uj-stops [aria-current="step"] i { background: var(--murdum); height: 3px; }
.uj-stops .uj-past i { background: var(--ametist); }
.uj-scroll-hint { font: 10px var(--m); color: var(--ametist); }
.uj-viewer { inset: 0; margin: auto; padding: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%; border: 0; background: #241722; color: var(--pudra); }
.uj-viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.uj-viewer::backdrop { background: #241722; }
.uj-viewer-bar, .uj-viewer-bottom { display: flex; gap: 24px; align-items: center; padding: 12px 24px; }
.uj-viewer-bar p { margin: 0 auto 0 0; font-size: 16px; }
.uj-viewer-bar button, .uj-viewer-bottom button { padding: 10px 14px; min-height: 44px; border: 1px solid #c8b8db55; border-radius: 30px; white-space: nowrap; font-size: 13px; }
.uj-viewer button:disabled { opacity: .3; }
.uj-viewer :focus-visible { outline-color: var(--lavanta); }
.uj-viewer-bottom { justify-content: center; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.uj-viewer-bottom span { font: 12px var(--m); }
.uj-viewer-image { overflow: auto; min-height: 0; overscroll-behavior: contain; }
.uj-viewer-image img { display: block; height: 100%; width: 100%; max-width: none; object-fit: contain; }
.uj-zoomed .uj-viewer-image img { height: auto; width: max(100%, 1080px); object-fit: initial; }
@media (min-width: 701px) and (max-height: 790px) {
  .uj-pinned h2 { font-size: clamp(40px, 4.8vw, 66px); }
  .uj-pinned .uj-eyebrow { margin-bottom: 16px; }
  .uj-pinned .uj-intro { margin: 16px 0; font-size: 15px; }
  .uj-pinned .uj-chapters a { padding: 8px 0; }
  .uj-pinned .uj-current { margin-top: 18px; min-height: 72px; }
  .uj-pinned .uj-skip { margin-top: 10px; }
}
@media (max-width: 1050px) { .uj-scroll-hint { display: none; } .uj-controls { grid-template-columns: auto minmax(0,1fr); gap: 20px; } }
@media (max-width: 700px) {
  .uj-scene { padding: 28px 20px; }
  .uj-gallery { grid-template-columns: 1fr; gap: 40px; margin-top: 32px; }
  .uj-pinned .uj-scene { grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(0,1fr) auto; gap: 12px; padding: 16px 20px 12px; }
  .uj-pinned .uj-editorial { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 0 12px; align-items: end; }
  .uj-pinned .uj-eyebrow { grid-column: 1/-1; margin: 0 0 8px; font-size: 8px; letter-spacing: .14em; }
  .uj-pinned h2 { font-size: 30px; line-height: 1; }
  .uj-pinned h2 br { display: none; }
  .uj-pinned h2 em { display: block; }
  .uj-pinned .uj-intro, .uj-pinned .uj-chapters, .uj-pinned .uj-current { display: none; }
  .uj-pinned .uj-skip { margin: 0; font-size: 10px; max-width: 128px; line-height: 1.4; gap: 10px; padding: 8px 0; }
  .uj-controls { grid-template-columns: 1fr; gap: 2px; padding-top: 4px; }
  .uj-transport { justify-content: center; gap: 18px; }
  .uj-transport button { height: 32px; width: 32px; }
  .uj-stops { gap: 3px; }
  .uj-stops button { font-size: 8px; height: 30px; gap: 5px; }
  .uj-enlarge { font-size: 10px; padding: 6px 10px; right: 8px; bottom: 8px; }
  .uj-viewer-bar { flex-wrap: wrap; gap: 8px; padding: 12px; }
  .uj-viewer-bar p { width: 100%; font-size: 14px; }
  .uj-viewer-bar button { font-size: 12px; }
  .uj-viewer-bar [data-uj-close] { margin-left: auto; }
  .uj-viewer-bottom { padding-inline: 12px; gap: 14px; }
}
@media (prefers-reduced-motion: reduce) { .uj * { scroll-behavior: auto; } }
/* Genişlik daraldığında da çerçeve görselin 4:5 oranını korur. */
.uj-pinned .uj-gallery { container-type: size; }
.uj-pinned .uj-art { width: min(656px, 100cqw, 80cqh); height: min(820px, 100cqh, 125cqw); }
@media (max-width: 360px) {
  .uj-pinned h2 { font-size: 26px; }
  .uj-pinned .uj-skip { max-width: 100px; }
}
@media (max-width: 480px) {
  .uj-stops { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

/* ================================================================ alan yolu — koyu bant baştan (site.js · 1b; Ömer, 2026-10-04)
   Akan çipler ve kontur sayaçlar yerine üç ana alan tek bir yolda. Sayı yok; yalnız alan harfleri (W · G · D). */
.ab-bant { padding-top: 128px; }
.ab-bas { max-width: 760px; margin: 0 auto; text-align: center; }
.ab-bas .etk { color: var(--lavanta); margin: 0 0 24px; }
.ab-giris { margin: 24px auto 0; max-width: 560px; font-size: 17px; line-height: 1.6; color: rgba(249, 244, 245, .78); }
.ab-sahne { position: relative; height: 160px; margin: 64px 0 0; }
.ab-yol { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ab-yol path { fill: none; }
.ab-iz { stroke: rgba(200, 184, 219, .16); stroke-width: 1; stroke-dasharray: 2 8; }
.ab-cizgi { stroke: var(--lavanta); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ab-dugum { position: absolute; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%;
  border: 1px solid rgba(200, 184, 219, .4); background: var(--koyu); color: var(--lavanta); font: 400 15px/1 var(--m); letter-spacing: .04em;
  transition: background-color .6s var(--e), color .6s var(--e), border-color .6s var(--e), box-shadow .6s var(--e); }
.ab-dugum.on { background: var(--lavanta); color: var(--murdum); border-color: var(--lavanta); box-shadow: 0 0 0 8px rgba(200, 184, 219, .12); }
.ab-simdi { position: absolute; z-index: 2; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--pudra);
  box-shadow: 0 0 0 6px rgba(249, 244, 245, .14), 0 0 24px rgba(200, 184, 219, .6); opacity: 0; transition: opacity .4s var(--e); pointer-events: none; }
.ab-alanlar { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.ab-alan { text-align: center; padding: 0 8px; opacity: .55; transition: opacity .7s var(--e); }
.ab-alan.on { opacity: 1; }
.ab-harf { display: none; }
.ab-alan h3 { margin: 0; font: 400 clamp(26px, 2.4vw, 34px)/1.15 var(--g); color: var(--pudra); }
.ab-alan h3 em { display: block; font-style: italic; color: var(--lavanta); }
.ab-alan p { margin: 16px auto 0; max-width: 320px; font-size: 15.5px; line-height: 1.6; color: rgba(249, 244, 245, .74); }
.ab-alan .ab-ornek { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 12px; margin-top: 24px;
  font: 400 11px/1.5 var(--m); letter-spacing: .18em; text-transform: uppercase; color: var(--lavanta); }
.ab-ornek i { width: 4px; height: 4px; border-radius: 50%; background: rgba(200, 184, 219, .5); }
.ab-alan a { display: inline-block; margin-top: 24px; padding: 8px 0; border-bottom: 1px solid rgba(200, 184, 219, .4); color: var(--pudra);
  font-size: 15px; text-decoration: none; transition: border-color .3s var(--e), color .3s var(--e); }
.ab-alan a:hover, .ab-alan a:focus-visible { color: var(--lavanta); border-color: var(--lavanta); }
.ab-bant .kurgu { margin-top: 128px; }
html.az .ab-alan, html.az .ab-dugum { transition: none; }
@media (max-width: 767px) {
  .ab-bant { padding-top: 96px; }
  .ab-sahne { display: none; }
  .ab-alanlar { position: relative; grid-template-columns: 1fr; gap: 40px; margin-top: 48px; }
  .ab-alanlar::before { content: ""; position: absolute; left: 23px; top: 24px; bottom: 24px; width: 1px; background: rgba(200, 184, 219, .3); }
  .ab-alan { position: relative; text-align: left; padding: 0 0 0 72px; opacity: 1; }
  .ab-harf { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
    border: 1px solid var(--lavanta); background: var(--koyu); color: var(--lavanta); font: 400 14px/1 var(--m); }
  .ab-alan p { margin-left: 0; }
  .ab-alan .ab-ornek { justify-content: flex-start; gap: 8px; font-size: 10px; letter-spacing: .1em; }
  .ab-bant .kurgu { margin-top: 96px; }
}

/* Selected visual stories. Artwork keeps its original 4:5 proportions. */
.ed-collection { background: var(--pudra); color: var(--murdum); position: relative; }
.ed-intro { padding: 112px var(--kenar) 80px; max-width: 1800px; margin: auto; display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: end; }
.ed-eyebrow { margin: 0 0 24px; font: 400 11px/1.5 var(--m); letter-spacing: .19em; text-transform: uppercase; color: var(--ametist); }
.ed-intro h2 { margin: 0; font: 400 clamp(48px, 5.4vw, 88px)/1.04 var(--g); letter-spacing: -.045em; }
.ed-intro h2 em { display: block; color: var(--ametist); font-weight: 400; }
.ed-index { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
.ed-index a { display: flex; align-items: center; gap: 16px; min-height: 72px; text-decoration: none; border-bottom: 1px solid #70587c35; font: 400 16px/1.35 var(--o); }
.ed-index a span { font: 11px var(--m); color: var(--ametist); }
.ed-index a i { margin-left: auto; font-style: normal; transition: transform .3s var(--e); }
.ed-index a:hover i { transform: translate(3px, -3px); }
.ed-story { position: relative; border-top: 1px solid #70587c30; scroll-margin-top: var(--ust-h); }
.ed-scene { max-width: 1800px; margin: auto; padding: 56px var(--kenar); }
.ed-heading { max-width: 600px; margin-bottom: 48px; }
.ed-heading h2 { margin: 0 0 24px; font: 400 clamp(48px, 5.2vw, 84px)/1.01 var(--g); letter-spacing: -.045em; }
.ed-heading h2 em { display: block; color: var(--ametist); font-weight: 400; }
.ed-description { max-width: 290px; margin: 0; font: 400 17px/1.65 var(--o); }
.ed-film-link { display: inline-flex; align-items: center; gap: 16px; min-height: 44px; margin-top: 16px; border-bottom: 1px solid #70587c55; text-decoration: none; font: 14px var(--o); }
.ed-context-note { margin: 0; padding: 24px var(--kenar); color: var(--ametist); font: 13px/1.6 var(--o); border-top: 1px solid #70587c25; }
.ed-pair-nav { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; font: 13px var(--o); }
.ed-pair-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; border-bottom: 1px solid #70587c40; text-decoration: none; }
.ed-pair-nav a[aria-current] { border-color: var(--murdum); font-weight: 600; }
.ed-pair-nav a:hover { color: var(--ametist); }
.ed-note { display: flex; align-items: center; gap: 12px; margin: 40px 0 0; color: var(--ametist); font: 10px/1.5 var(--m); letter-spacing: .09em; text-transform: uppercase; }
.ed-note::before { content: ''; width: 40px; height: 1px; background: currentColor; }
.ed-next-link { display: inline-flex; align-items: center; gap: 16px; padding: 12px 0; margin-top: 24px; border-bottom: 1px solid #70587c55; text-decoration: none; font: 14px var(--o); }
.ed-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 32px; }
.ed-slide { position: relative; min-width: 0; margin: 0; scroll-margin-top: calc(var(--ust-h) + 24px); }
.ed-alias { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }
.ed-service-links { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; padding: 24px var(--kenar); border-top: 1px solid #70587c25; font: 14px var(--o); }
.ed-service-links a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; border-bottom: 1px solid #70587c55; }
.hk-static-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 40px 24px; }
.hk-static-grid li, .hk-static-grid figure { min-width: 0; margin: 0; }
.hk-static-grid img { display: block; width: 100%; height: auto; }
.hk-static-grid figcaption span { font: 11px var(--m); color: var(--ametist); }
.hk-static-grid figcaption strong { display: block; margin-top: 12px; font: 22px var(--o); }
@media(max-width: 1000px) { .hk-static-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width: 700px) { .hk-static-grid { grid-template-columns: minmax(0,1fr); } }
.ed-art { position: relative; display: block; aspect-ratio: 4/5; background: var(--sis); box-shadow: 0 16px 40px #502f4c12; text-decoration: none; }
.ed-art img { width: 100%; height: 100%; object-fit: contain; }
.ed-media { position: relative; }
.ed-inline-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--sis); }
.ed-media-enhanced .ed-inline-video { pointer-events: none; }
.ed-media-enhanced .ed-enlarge { z-index: 2; opacity: 1; transform: none; }
.ed-video-toggle { position: absolute; z-index: 3; left: 12px; bottom: 12px; min-height: 44px; padding: 8px 14px; display: flex; align-items: center; gap: 8px; border: 1px solid #70587c50; border-radius: 24px; background: var(--pudra); color: var(--murdum); font: 12px var(--o); box-shadow: 0 4px 16px #2e1b2c20; }
.ed-video-toggle[hidden] { display: none; }
.ed-video-toggle:focus-visible { outline: 2px solid var(--ametist); outline-offset: 3px; }
.ed-viewer-image video { max-width: 100%; max-height: 100%; width: auto; height: 100%; object-fit: contain; }
.ed-viewer-image [hidden], .ed-viewer-bar [hidden] { display: none; }
.ed-enlarge { position: absolute; right: 12px; bottom: 12px; padding: 9px 13px; background: var(--pudra); color: var(--murdum); border: 1px solid #70587c30; border-radius: 24px; font: 11px var(--o); opacity: 0; transform: translateY(5px); transition: opacity .25s, transform .25s; }
.ed-art:hover .ed-enlarge, .ed-art:focus-visible .ed-enlarge { opacity: 1; transform: none; }
.ed-slide figcaption { display: flex; gap: 16px; align-items: baseline; margin-top: 16px; font: 12px/1.4 var(--o); }
.ed-slide figcaption span { flex: none; color: var(--ametist); font: 10px var(--m); }
.ed-slide figcaption p { margin: 0; }
.ed-controls[hidden] { display: none; }
.ed-controls { display: flex; gap: 16px; align-items: center; min-width: 0; }
.ed-prev, .ed-next { flex: none; height: 44px; width: 44px; border-radius: 50%; border: 1px solid #70587c50; font-size: 20px; transition: color .2s, background .2s; }
.ed-prev:hover, .ed-next:hover { background: var(--murdum); color: var(--pudra); }
.ed-controls button:disabled { opacity: .28; cursor: default; }
.ed-count { white-space: nowrap; font: 11px var(--m); }
.ed-count b { font-weight: 500; }
.ed-count span { opacity: .65; }
.ed-progress { flex: 1; position: relative; min-width: 32px; height: 1px; background: #70587c40; }
.ed-progress::before { content: ''; position: absolute; inset: 0; background: var(--murdum); transform: scaleX(var(--ed-progress, 0)); transform-origin: left; }
.ed-now { position: absolute; top: -3px; left: calc(var(--ed-progress, 0) * 100%); height: 7px; width: 7px; border-radius: 50%; background: var(--murdum); translate: -50% 0; }
.ed-dots { display: flex; flex: 1.5; align-items: center; justify-content: space-between; min-width: 0; }
.ed-dots button { display: grid; place-items: center; min-width: 0; flex: 1; height: 44px; }
.ed-dots button::before { content: ''; width: 1px; height: 8px; background: #70587c60; transition: height .25s, background .25s; }
.ed-dots button[aria-current="step"]::before { height: 20px; width: 2px; background: var(--murdum); }
.ed-next-series { display: flex; justify-content: space-between; gap: 24px; padding: 32px var(--kenar); border-top: 1px solid #70587c30; font: 13px var(--o); text-decoration: none; }
.ed-next-series span { color: var(--ametist); font: 10px/1.5 var(--m); letter-spacing: .12em; text-transform: uppercase; }
.ed-pinned .ed-scene { position: sticky; top: var(--ed-top); height: var(--ed-h); padding-top: 32px; padding-bottom: 24px; display: grid; grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr); grid-template-rows: minmax(0, 1fr) 64px; gap: 16px 32px; overflow: hidden; }
.ed-pinned .ed-heading { grid-row: 1 / 3; align-self: center; margin-bottom: 0; }
.ed-pinned .ed-window { min-width: 0; min-height: 0; overflow: hidden; margin-right: calc(-1 * var(--kenar)); padding-right: var(--kenar); }
.ed-pinned .ed-track { display: flex; align-items: center; gap: 32px; height: 100%; will-change: transform; padding: 8px 0 16px; }
.ed-pinned .ed-slide { flex: 0 0 min(560px, var(--ed-fit, calc((var(--ed-h) - 184px) * .8)), calc(100vw - 450px)); transform-origin: center; will-change: transform; }
.ed-pinned .ed-slide figcaption { height: 20px; overflow: hidden; white-space: nowrap; }
.ed-pinned .ed-slide figcaption p { overflow: hidden; text-overflow: ellipsis; }
.ed-pinned .ed-controls { grid-column: 2; }
.ed-pinned .ed-next-series { background: var(--pudra); }
.ed-in-view .kp { opacity: 0 !important; pointer-events: none; }
.ed-viewer { inset: 0; margin: auto; padding: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%; border: 0; background: var(--koyu); color: var(--pudra); }
.ed-viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.ed-viewer::backdrop { background: var(--koyu); }
.ed-viewer-bar, .ed-viewer-bottom { display: flex; gap: 24px; align-items: center; padding: 12px 24px; }
.ed-viewer-bar p { margin: 0 auto 0 0; font: 16px var(--o); }
.ed-viewer button { padding: 10px 16px; min-height: 44px; border: 1px solid #c8b8db55; border-radius: 24px; white-space: nowrap; font: 13px var(--o); }
.ed-viewer button:disabled { opacity: .3; }
.ed-viewer :focus-visible { outline-color: var(--lavanta); }
.ed-viewer-bottom { justify-content: center; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.ed-viewer-bottom span { font: 12px var(--m); }
.ed-viewer-image { overflow: auto; min-height: 0; overscroll-behavior: contain; }
.ed-viewer-image img { display: block; height: 100%; width: 100%; max-width: none; object-fit: contain; }
.ed-zoomed .ed-viewer-image img { height: auto; width: max(100%, 1080px); object-fit: initial; }
@media (min-width: 1800px) { .ed-pinned .ed-window { margin-right: calc((1800px - 100vw) / 2 - var(--kenar)); } }
@media (max-width: 1100px) {
  .ed-intro { gap: 32px; }
  .ed-index { grid-template-columns: 1fr; }
  .ed-index a { min-height: 56px; }
  .ed-heading h2 { font-size: clamp(42px, 5.5vw, 64px); }
  .ed-pinned .ed-scene { grid-template-columns: minmax(200px, .65fr) minmax(0, 1.35fr); gap: 16px 24px; }
  .ed-pinned .ed-slide { flex-basis: min(var(--ed-fit, calc((var(--ed-h) - 184px) * .8)), calc(100vw - 370px)); }
  .ed-description { font-size: 15px; }
  .ed-controls { gap: 10px; }
  .ed-progress { display: none; }
}
@media (max-width: 700px) {
  .ed-intro { padding-top: 64px; padding-bottom: 48px; grid-template-columns: 1fr; gap: 40px; }
  .ed-intro h2 { font-size: clamp(44px, 10.5vw, 68px); }
  .ed-index { grid-template-columns: 1fr 1fr; gap: 0 24px; }
  .ed-index a { gap: 8px; min-height: 64px; font-size: 13px; }
  .ed-index a span { font-size: 9px; }
  .ed-index a i { display: none; }
  .ed-eyebrow { font-size: 9px; letter-spacing: .13em; margin-bottom: 12px; }
  .ed-scene { padding-top: 40px; padding-bottom: 40px; }
  .ed-heading h2 { font-size: 44px; margin-bottom: 16px; }
  .ed-track { grid-template-columns: 1fr; gap: 40px; }
  .ed-description { max-width: 330px; }
  .ed-note { margin-top: 24px; }
  .ed-pinned .ed-scene { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) 56px; gap: 16px; padding-top: 24px; padding-bottom: 12px; }
  .ed-pinned .ed-heading { grid-row: auto; align-self: start; }
  .ed-pinned .ed-heading h2 { font-size: clamp(32px, 8.7vw, 48px); margin: 0; letter-spacing: -.04em; }
  .ed-pinned .ed-heading h2 em { display: inline; }
  .ed-pinned.ed-paired .ed-heading h2 em { display: block; }
  .ed-pair-nav { margin-top: 8px; }
  .ed-pinned .ed-description { font-size: 13px; line-height: 1.5; margin-top: 12px; max-width: 360px; }
  .ed-pinned .ed-note, .ed-pinned .ed-next-link { display: none; }
  .ed-pinned .ed-window { grid-row: 2; }
  .ed-pinned .ed-track { gap: 20px; padding-top: 4px; padding-bottom: 12px; }
  .ed-pinned .ed-slide { flex-basis: min(var(--ed-fit, calc((var(--ed-h) - 264px) * .8)), calc(100vw - 64px)); }
  .ed-pinned .ed-slide figcaption { font-size: 11px; margin-top: 12px; }
  .ed-pinned .ed-controls { grid-column: 1; grid-row: 3; }
  .ed-prev, .ed-next { height: 40px; width: 40px; }
  .ed-count { font-size: 10px; }
  .ed-next-series { padding-top: 24px; padding-bottom: 24px; }
  .ed-next-series span { max-width: 100px; font-size: 9px; }
  .ed-enlarge { padding: 6px 10px; right: 8px; bottom: 8px; font-size: 10px; }
  .ed-viewer-bar { flex-wrap: wrap; gap: 8px; padding: 12px; }
  .ed-viewer-bar p { width: 100%; font-size: 14px; }
  .ed-viewer-bottom { padding-inline: 12px; gap: 12px; }
  .ed-viewer button { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .ed-collection *, .ed-viewer * { scroll-behavior: auto; transition: none !important; } }

/* VIARVO · a small live bookmark opens into a visual index. */
.atlas-ready .ust nav[aria-label="Bölümler"] { display: none; }
.atlas-trigger { position: relative; display: flex; align-items: center; gap: 12px; width: 360px; min-width: 0; height: 48px; padding: 5px 16px 5px 5px; margin-left: auto; border: 1px solid rgba(112,88,124,.28); border-radius: 28px; background: var(--pudra); color: var(--murdum); text-align: left; cursor: pointer; box-shadow: 0 3px 14px rgba(46,27,44,.05); transition: border-color .25s, box-shadow .25s; }
.atlas-trigger:hover { border-color: var(--ametist); box-shadow: 0 4px 20px rgba(46,27,44,.12); }
.atlas-symbol { flex: none; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 36px; height: 36px; border-radius: 50%; color: var(--pudra); background: var(--murdum); }
.atlas-symbol i { width: 14px; height: 1px; background: currentColor; transition: width .25s; }
.atlas-symbol i:nth-child(2) { width: 10px; align-self: flex-start; margin-left: 11px; }
.atlas-trigger:hover .atlas-symbol i:nth-child(2) { width: 14px; }
.atlas-position { display: grid; gap: 2px; min-width: 0; flex: 1; }
.atlas-label { color: var(--ametist); font: 400 9px/1.3 var(--m); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.atlas-current { font: 500 14px/1.25 var(--o); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atlas-open-label { flex: none; display: flex; align-items: center; gap: 4px; font: 400 10px/1 var(--o); color: var(--ametist); }
.atlas-open-label i { font-size: 16px; font-style: normal; }
.atlas-progress { position: absolute; left: 53px; right: 24px; bottom: 1px; height: 2px; overflow: hidden; border-radius: 4px; background: rgba(200,184,219,.32); }
.atlas-progress > i { display: block; height: 100%; background: var(--ametist); transform: scaleX(var(--atlas-progress,0)); transform-origin: left; }
.atlas-ready .ust .site-nav { margin-left: auto; }
.atlas-trigger:focus-visible, .atlas :is(button,a,input,select):focus-visible { outline: 2px solid var(--ametist); outline-offset: 4px; }
.atlas { --atlas-line: rgba(112,88,124,.22); position: fixed; inset: 0; width: min(1380px, calc(100vw - 48px)); height: min(920px, calc(100dvh - 48px)); max-width: none; max-height: none; margin: auto; padding: 0; border: 1px solid rgba(200,184,219,.55); border-radius: 24px; color: var(--murdum); background: var(--pudra); overflow: hidden; box-shadow: 0 32px 120px rgba(23,18,24,.32); font-family: var(--o); }
.atlas[open] { animation: atlas-arrive .38s cubic-bezier(.2,.7,.2,1) both; }
.atlas::backdrop { background: rgba(46,27,44,.72); backdrop-filter: blur(10px); }
@keyframes atlas-arrive { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
.atlas-shell { height: 100%; display: grid; grid-template-rows: auto auto minmax(0,1fr) auto; }
.atlas-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 32px 40px 24px; }
.atlas-eyebrow { margin: 0 0 12px; font: 400 10px/1.4 var(--m); letter-spacing: .18em; color: var(--ametist); }
.atlas-head h2 { margin: 0; font: 400 clamp(32px,4vw,52px)/1.05 var(--g); letter-spacing: -.025em; }
.atlas-head h2 em { font-weight: 400; color: var(--ametist); }
.atlas-close { display: inline-flex; align-items: center; gap: 16px; padding: 0 0 0 16px; background: transparent; border: 0; cursor: pointer; color: var(--murdum); font: 500 14px/1 var(--o); }
.atlas-close i { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--atlas-line); border-radius: 50%; font: 300 28px/1 var(--o); transition: background .2s, transform .3s; }
.atlas-close:hover i { background: var(--lavanta); transform: rotate(90deg); }
.atlas-search { display: flex; align-items: center; gap: 16px; margin: 0 40px 24px; padding: 0 16px; min-height: 52px; border: 1px solid var(--atlas-line); border-radius: 12px; background: rgba(200,184,219,.12); }
.atlas-search:focus-within { border-color: var(--ametist); background: transparent; }
.atlas-search svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--ametist); stroke-width: 1.5; stroke-linecap: round; }
.atlas-search input { min-width: 0; width: 100%; height: 50px; border: none; background: transparent; color: var(--murdum); font: 400 16px/1.4 var(--o); outline: none; }
.atlas-search input::placeholder { color: var(--ametist); opacity: 1; }
.atlas-search input::-webkit-search-cancel-button { display: none; }
.atlas-search input:focus-visible { outline: 0; }
.atlas-clear { min-height: 40px; padding: 0 4px; border: 0; background: transparent; color: var(--murdum); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; font: 400 12px/1 var(--o); }
.atlas-body { display: grid; grid-template-columns: 248px minmax(0,1fr); min-height: 0; border-top: 1px solid var(--atlas-line); }
.atlas-sidebar { display: flex; flex-direction: column; padding: 24px 24px 24px 32px; border-right: 1px solid var(--atlas-line); overflow: auto; }
.atlas-sidebar > .atlas-eyebrow { margin: 0 8px 16px; }
.atlas-sidebar nav { display: flex; flex-direction: column; gap: 8px; }
.atlas-sidebar nav button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px; border: 0; border-radius: 8px; color: var(--ametist); background: transparent; font: 400 15px/1.3 var(--o); text-align: left; cursor: pointer; }
.atlas-sidebar nav button > i { flex: none; width: 7px; height: 7px; border: 1px solid currentColor; border-radius: 50%; }
.atlas-sidebar nav button > b { margin-left: auto; font-weight: 400; opacity: 0; }
.atlas-sidebar nav button:hover, .atlas-sidebar nav button[aria-pressed="true"] { color: var(--murdum); background: rgba(200,184,219,.26); }
.atlas-sidebar nav button[aria-pressed="true"] > i { background: var(--murdum); }
.atlas-sidebar nav button[aria-pressed="true"] > b { opacity: 1; }
.atlas-note { margin-top: auto; padding: 24px 8px 0; }
.atlas-note svg { width: 100%; height: 40px; color: var(--ametist); }
.atlas-note path { fill: none; stroke: currentColor; stroke-width: 1; }
.atlas-note circle { fill: currentColor; }
.atlas-note p { margin: 16px 0 24px; font: 400 27px/1.12 var(--g); }
.atlas-note p em { color: var(--ametist); }
.atlas-contact { display: inline-block; font: 400 13px/1.5 var(--o); color: var(--murdum); text-decoration-color: var(--lavanta); text-underline-offset: 5px; }
.atlas-content { min-width: 0; min-height: 0; padding: 24px 40px 40px 32px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--lavanta) transparent; }
.atlas-results-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.atlas-results-head h3 { margin: 0 0 8px; font: 400 27px/1.2 var(--g); }
.atlas-results-description { margin: 0; color: var(--ametist); font: 400 14px/1.5 var(--o); }
.atlas-section-link { flex: none; color: var(--murdum); text-decoration: none; border-bottom: 1px solid var(--lavanta); padding: 8px 0; font: 400 12px/1.4 var(--o); }
.atlas-results { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 24px; }
.atlas-card { min-width: 0; display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--atlas-line); text-decoration: none; color: var(--murdum); border-radius: 4px; transition: background .25s; }
.atlas-card:hover { background: rgba(200,184,219,.16); }
.atlas-card[aria-current="location"] { background: rgba(200,184,219,.26); }
.atlas-cover { flex: none; width: 80px; aspect-ratio: 4/5; overflow: hidden; border-radius: 5px; background: var(--lavanta); box-shadow: 0 3px 9px rgba(46,27,44,.08); }
.atlas-cover img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .4s; }
.atlas-card:hover img { transform: scale(1.035); }
.atlas-card-copy { min-width: 0; display: flex; flex-direction: column; gap: 8px; padding-right: 8px; }
.atlas-card-label { font: 400 9px/1.5 var(--m); letter-spacing: .03em; color: var(--ametist); }
.atlas-card strong { font: 500 17px/1.25 var(--o); text-wrap: pretty; }
.atlas-card-description { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--ametist); font: 400 13px/1.4 var(--o); }
.atlas-card-action { font: 400 11px/1.4 var(--o); color: var(--ametist); }
.atlas-card-action i { display: inline-block; font-style: normal; transition: transform .25s; }
.atlas-card:hover .atlas-card-action i { transform: translate(2px,-2px); }
.atlas-card-featured .atlas-cover { width: 104px; }
.atlas-card-featured strong { font: 400 24px/1.05 var(--g); }
.atlas-card.atlas-card-featured { align-items: center; padding: 16px 8px 16px 0; }
.atlas-foot { display: flex; justify-content: space-between; gap: 24px; padding: 16px 40px; background: var(--murdum); color: var(--pudra); font: 400 11px/1.5 var(--o); }
.atlas-return { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.atlas-return > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atlas-return i { width: 5px; height: 5px; border-radius: 50%; background: var(--lavanta); }
.atlas-foot > a { flex: none; color: var(--pudra); text-underline-offset: 4px; text-decoration-color: var(--lavanta); }
.atlas-empty { margin: 40px 0; font: 400 24px/1.7 var(--g); }
.atlas-empty span { color: var(--ametist); font: 400 15px/1.5 var(--o); }
.atlas [hidden] { display: none !important; }
.atlas-mobile-groups { display: none; }
.atlas-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 1100px) {
  .atlas-body { grid-template-columns: 208px minmax(0,1fr); }
  .atlas-sidebar { padding-left: 16px; padding-right: 16px; }
  .atlas-content { padding: 24px; }
  .atlas-results { gap: 8px 16px; }
  .atlas-card-featured .atlas-cover { width: 80px; }
  .atlas-card-featured strong { font-size: 21px; }
}
@media (min-width: 701px) and (max-width: 850px) {
  .atlas-results { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .atlas-ready { --ust-h: 124px; }
  .atlas-ready .ust .ic { display: grid; grid-template-columns: 1fr auto; gap: 0 16px; grid-template-rows: 60px 56px; padding-bottom: 8px; }
  .atlas-ready .ust .logo { grid-column: 1; grid-row: 1; }
  .atlas-ready .ust .cta { grid-column: 2; grid-row: 1; font-size: 12px; padding: 12px 16px; }
  .atlas-ready .ust .site-nav { display: none; }
  .atlas-trigger { grid-column: 1 / -1; grid-row: 2; width: 100%; margin: 0; }
  .atlas { width: calc(100vw - 16px); height: calc(100dvh - 16px); border-radius: 20px; }
  .atlas-head { padding: 24px 24px 16px; gap: 8px; }
  .atlas-head h2 { font-size: 36px; }
  .atlas-eyebrow { font-size: 8px; letter-spacing: .14em; margin-bottom: 8px; }
  .atlas-close { padding-left: 0; }
  .atlas-close > span { display: none; }
  .atlas-search { margin: 0 16px 16px; padding: 0 12px; gap: 8px; }
  .atlas-search input { font-size: 16px; }
  .atlas-search input::placeholder { font-size: 13px; }
  .atlas-body { grid-template-columns: minmax(0,1fr); }
  .atlas-sidebar { display: none; }
  .atlas-content { padding: 16px 24px 32px; }
  .atlas-results-head { margin-bottom: 16px; gap: 8px; }
  .atlas-results-head h3 { font-size: 25px; }
  .atlas-results-description { font-size: 13px; }
  .atlas-section-link { font-size: 11px; }
  .atlas-mobile-groups { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; color: var(--ametist); font: 400 10px/1.4 var(--m); }
  .atlas-mobile-groups select { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--atlas-line); border-radius: 8px; background: transparent; color: var(--murdum); font: 400 15px/1.5 var(--o); }
  .atlas-results { grid-template-columns: 1fr; gap: 0; }
  .atlas-cover, .atlas-card-featured .atlas-cover { width: 80px; }
  .atlas-card, .atlas-card.atlas-card-featured { padding: 16px 0; gap: 16px; }
  .atlas-card-featured strong { font-size: 25px; }
  .atlas-foot { padding: 16px 24px max(16px,env(safe-area-inset-bottom)); font-size: 11px; }
  .atlas-foot { gap: 12px; }
}
@media (max-height: 640px) {
  .atlas-head { padding-top: 16px; padding-bottom: 16px; }
  .atlas-head h2 { font-size: 32px; }
  .atlas-note { display: none; }
  .atlas-foot { padding-top: 8px; padding-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .atlas[open] { animation: none; }
  .atlas *, .atlas-trigger, .atlas-symbol i { transition: none !important; }
}
.az .atlas[open] { animation: none; }
.az .atlas *, .az .atlas-trigger { transition: none !important; }