/* SAHNE · FOTOĞRAF ALBÜMÜ: YÜKLE → İZİN DENETİMİ → YAYINLA → VELİNİN TELEFONU (includes/scenes/photo-album.php) — modül sayfası,
   kap ~330–680 px. Adımlar: s1 altı fotoğraf dosya alanının üstüne sürüklenir (alan vurgulanmaz) · s2 bırakılır: önizleme
   kareleri 4+2 (dar kapta 3+3) + boyut rozeti + «Azami genişlik» / özet · s3 sayfa «Yükle»ye kayar → «Fotoğraflar hazırlanıyor…» ·
   s4 sayfa en üstten açılır + «Başarılı — 6 fotoğraf eklendi.» → «Tamam» → ızgaraya kayar: 6 küçük resim, «ZIP indir» ·
   s5 sayfa başı: izin uyarısı, «Yayınla» · s6 «Başarılı» + «YAYINDA — veliler görüyor» · s7 velinin telefonu: Fotoğraflar ·
   s8 albüm: başlık + «Tümünü indir» aynı satırda, 6 fotoğraf.
   Kaydırma miktarları kutu boylarından HESAPLANIR (--hc izin kutusu, --hu kapalı yükleme kutusu, --T önizleme karesi = kap
   genişliğinden cqi ile); kap daralınca değişkenler değişir. */
@property --pho-n { syntax: '<integer>'; inherits: false; initial-value: 0; }

.pho { container-type: inline-size; --pho-spring: cubic-bezier(.34, 1.56, .64, 1); --pho-ok: #047857; }
.pho-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.pho-box {
  --H: 480px; --bm: 12px; --bh: 54px; --gp: 10px; --brh: 44px; --g: 12px; --hc: 120px; --hu: 138px;
  --st: calc(var(--bm) + var(--bh) + var(--gp) + var(--brh) + var(--gp));
  --y2: calc(var(--hc) + var(--g));
  /* s4 ızgaraya kayış: belge sonundan öteye kaydırılmaz → ızgaranın altı sahne dibinin 24 px üstünde durur (--gh = ızgara boyu) */
  --gh: calc((100cqi - 64px) / 6);
  --y4: max(0px, calc(var(--hc) + 2 * var(--g) + var(--hu) + var(--gh) + 24px - var(--H) + var(--st)));
  /* açık yükleme kutusu = sabit kısım (--uf) + iki kare satırı + seçim satırı (--selm + --selh); s3'te «Yükle» görünene kadar kayar */
  --T: calc((100cqi - 74px) / 4); --tg: 8px; --uf: 146px; --selh: 30px; --selm: 8px;
  --y3: max(var(--y2), calc(var(--y2) + var(--uf) + 2 * var(--T) + var(--tg) + var(--selm) + var(--selh) + 14px - var(--H) + var(--st)));
  --pw: 240px; --phh: 440px; --pr: 18px; --ptop: 20px;
  --gl: 150px; --gx: 300px; --gy: -150px;
  position: relative; height: var(--H);
}
.pho-i { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pho-img { display: block; width: 100%; height: 100%; }

/* çapraz geçiş: katmanlar aynı ızgara hücresinde üst üste; on-A-B = A. adımdan B. adıma kadar görünür */
.pho-x { display: grid; min-width: 0; }
.pho-x > * { grid-area: 1 / 1; min-width: 0; }
.pho [class*="on-"] { opacity: 0; transform: translateY(3px); transition: opacity .3s var(--ui-ease), transform .35s var(--ui-ease); }
.pho:not(.s6) .on-0-6, .pho.s6 .on-6 { opacity: 1; transform: none; }
.pho-x .pho-v1 { opacity: 0; transition: opacity .3s var(--ui-ease); }
.pho-x .pho-v0 { transition: opacity .3s var(--ui-ease); }
.pho.s2:not(.s4) .pho-x .pho-v0 { opacity: 0; }
.pho.s2:not(.s4) .pho-x .pho-v1 { opacity: 1; }

/* imleç: .pho-hit tıklama noktasıdır; ok ucu tam orada, halka dalgası çevresinde */
.pho-hit { position: absolute; z-index: 7; width: 0; height: 0; pointer-events: none; }
.pho-hit .ui-cur { left: -5px; top: -3px; transform: translate(14px, 12px); transition: opacity .2s var(--ui-ease); }
.pho-rip { position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(29, 79, 134, .55); opacity: 0; }
@keyframes pho-cur { 0% { opacity: 0; transform: translate(14px, 12px); } 40% { opacity: 1; transform: none; scale: 1; } 55% { scale: .8; } 68%, 100% { opacity: 1; transform: none; scale: 1; } }
@keyframes pho-cur-out { 0% { opacity: 0; transform: translate(14px, 12px); } 34% { opacity: 1; transform: none; scale: 1; } 48% { scale: .8; } 60% { scale: 1; } 78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes pho-rip { 0% { opacity: 0; scale: .25; } 12% { opacity: .9; } 100% { opacity: 0; scale: 1.7; } }
@keyframes pho-push { 50% { scale: .94; } }
@keyframes pho-spin { to { rotate: 360deg; } }
@keyframes pho-tap { 0% { opacity: 0; scale: .4; } 30% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1.5; } }

/* ── pencere ── */
.pho-win { position: absolute; inset: 0; background: var(--ui-bg-2); }

/* başlık bandı (kurum rengi) */
.pho-band { display: flex; align-items: center; gap: 12px; height: var(--bh); margin: var(--bm) 12px 0; padding: 0 10px 0 11px; border-radius: 12px; color: #fff;
  background: linear-gradient(120deg, var(--navy-night), var(--navy) 55%, var(--navy-soft));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 2px rgba(11, 36, 64, .18), 0 10px 20px -14px rgba(11, 36, 64, .7); }
.pho-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, .13); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.pho-ico .pho-i { width: 18px; height: 18px; stroke-width: 1.8; }
.pho-ttl { flex: 1; min-width: 0; }
.pho-ttl b { display: block; font-size: 15px; font-weight: 800; line-height: 19px; letter-spacing: -.01em; white-space: nowrap; }
.pho-ttl small { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 600; line-height: 15px; color: rgba(255, 255, 255, .82); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pho-zip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px 0 9px; border-radius: 9px; font-size: 11.5px; font-weight: 800; white-space: nowrap;
  background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26);
  opacity: 0; scale: .9; transition: opacity .3s var(--ui-ease), scale .4s var(--pho-spring); }
.pho.s4 .pho-zip { opacity: 1; scale: 1; transition-delay: .55s; }

/* durum şeridi */
.pho-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: var(--brh); margin: var(--gp) 12px 0; padding: 0 7px 0 10px; border-radius: 12px; background: #fff;
  box-shadow: 0 0 0 1px var(--ui-line), 0 1px 2px rgba(16, 37, 64, .05), inset 0 1px 0 rgba(255, 255, 255, .6); }
.pho-bar__l { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pho-chip { flex: none; }
.pho-chip > span { display: block; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 10.5px; font-weight: 800; line-height: 22px; white-space: nowrap; }
.pho-chip--d { background: #fef3c7; color: #b45309; }
.pho-chip--p { background: #d1fae5; color: #047857; }
.pho-chip { justify-items: start; }
.pho-cnt { font-size: 12px; font-weight: 700; color: #71717a; white-space: nowrap; }
.pho-n { counter-reset: pho-n var(--pho-n); font-variant-numeric: tabular-nums; transition: --pho-n .6s var(--ui-ease); }
.pho-n::after { content: counter(pho-n); }
.pho.s4 .pho-n { --pho-n: 6; transition-delay: .5s; }
.pho-acts { flex: none; justify-items: end; }
.pho-acts2 { display: flex; gap: 6px; }
.pho-pub, .pho-b2 { position: relative; display: inline-flex; align-items: center; height: 30px; border-radius: 9px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.pho-pub { padding: 0 13px; color: #fff; background: var(--pho-ok); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(4, 120, 87, .3), 0 6px 12px -8px rgba(4, 120, 87, .8); }
.pho-b2 { padding: 0 11px; color: #3f3f46; background: #fff; box-shadow: inset 0 0 0 1px #d4d4d8, 0 1px 1px rgba(16, 37, 64, .04); }
.pho-pub .pho-hit { right: 22px; bottom: 8px; }
.pho.s5:not(.s6) .pho-pub { animation: pho-push .3s var(--ui-ease) .74s; }
.pho.s5:not(.s6) .pho-hit--pub .ui-cur { animation: pho-cur 1s var(--ui-ease) .35s both; }
.pho.s5:not(.s6) .pho-hit--pub .pho-rip { animation: pho-rip .55s ease-out .78s both; }

/* ── gövde: sayfa kayar ── */
.pho-stage { position: absolute; left: 0; right: 0; top: var(--st); bottom: 0; padding: 0 12px; overflow: hidden; }
.pho-stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: linear-gradient(rgba(246, 247, 249, 0), var(--ui-bg-2) 85%); pointer-events: none; }
.pho-col { transition: translate .6s var(--ui-ease); }
.pho.s2 .pho-col { translate: 0 calc(-1 * var(--y2)); transition-delay: .1s; }
.pho.s3 .pho-col { translate: 0 calc(-1 * var(--y3)); transition-delay: 0s; }
/* s4: yönlendirme → sayfa EN ÜSTTEN açılır (ani), «Tamam»dan sonra ızgaraya kayar */
.pho.s4 .pho-col { translate: 0 calc(-1 * var(--y4)); }
.pho.s4:not(.s5) .pho-col { animation: pho-top 2.7s var(--ui-ease) both; }
@keyframes pho-top { 0%, 54% { translate: 0 0; } 74%, 100% { translate: 0 calc(-1 * var(--y4)); } }
.pho.s5 .pho-col { translate: 0 0; transition-delay: 0s; }

/* görsel kullanım izni olmayan öğrenciler (yayından önce de görünür) */
.pho-kv { display: block; height: var(--hc); padding: 10px 12px; border-radius: 12px; background: #fffbeb; overflow: hidden;
  box-shadow: inset 0 0 0 1px #fcd34d, 0 1px 2px rgba(120, 53, 15, .06); }   /* düz amber kenar, durum vurgusu yok (admin-album.php:182) */
.pho-kv__h { display: flex; align-items: center; gap: 6px; height: 16px; font-size: 11px; font-weight: 900; letter-spacing: .01em; color: #78350f; white-space: nowrap; }
.pho-kv__h .pho-i { width: 14px; height: 14px; stroke-width: 2.2; }
.pho-kv__t { display: block; margin-top: 3px; font-size: 11px; font-weight: 600; line-height: 14px; color: #92400e; text-wrap: pretty; }
.pho-kv__t b { font-weight: 800; color: #78350f; }
.pho-kv__c { display: flex; flex-wrap: wrap; gap: 5px; max-height: 45px; margin-top: 7px; overflow: hidden; }
.pho-kv__c i { flex: none; height: 20px; padding: 0 8px; border-radius: 999px; background: #fde68a; font-style: normal; font-size: 10.5px; font-weight: 800; line-height: 20px; color: #78350f; white-space: nowrap; }

/* yükleme formu */
.pho-up { position: relative; margin-top: var(--g); padding: 11px 12px 12px; border: 1px dashed #93b1d3; border-radius: 14px; background: #f3f7fc; }
.pho-up__l { display: block; font-size: 12px; font-weight: 800; line-height: 15px; color: #18181b; }
/* çıplak dosya alanı: durum sınıfı yok — deste üstüne gelip bırakılırken alan AYNI kalır (picker'da dragover/drop yok) */
.pho-in { display: flex; align-items: center; gap: 9px; height: 32px; margin-top: 6px; padding: 0 9px 0 4px; border: 1px dashed #d4d4d8; border-radius: 10px; background: #fafafa;
  font-size: 11.5px; font-weight: 600; color: #3f3f46; }
.pho-pick { flex: none; display: grid; place-items: center; height: 24px; padding: 0 9px; border-radius: 7px; background: #18181b; font-size: 11px; font-weight: 800; color: #fff; }
.pho-in__v { flex: 1; white-space: nowrap; }
.pho-in__v .mut { color: #71717a; }
.pho-note { margin-top: 6px; font-size: 10.5px; font-weight: 600; line-height: 14px; color: #52525b; }
.pho-note > * { white-space: nowrap; }
.pho-pn { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ui-ease); }
.pho-pn__in { min-height: 0; overflow: hidden; }
.pho.s2:not(.s4) .pho-pn { grid-template-rows: 1fr; transition-delay: .15s; }
.pho.s4 .pho-pn, .pho.s4 .pho-tile { transition: none; }   /* yeni sayfa: form boş açılır, kapanma oynamaz */
/* önizleme ızgarası en çok 4 sütun (picker :69 sm:grid-cols-4) → 6 kare = 4+2 */
.pho-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tg); padding-top: 8px; }
.pho-tile { position: relative; display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #e4e4e7;
  opacity: 0; scale: .88; transition: opacity .3s var(--ui-ease), scale .45s var(--pho-spring); }
.pho-tile::after, .pho-th::after, .pho-pt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(24, 24, 27, .1); pointer-events: none; }
.pho.s2:not(.s4) .pho-tile { opacity: 1; scale: 1; transition-delay: calc(.35s + var(--i) * 70ms); }
.pho-tb { position: absolute; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(0, 0, 0, .58); color: #fff; }
.pho-tb .pho-i { width: 10px; height: 10px; stroke-width: 2.6; }
.pho-tb--x { top: 4px; right: 4px; }
.pho-tb--c { right: 4px; bottom: 4px; }
/* boyut rozeti (picker :205–210: sol alt, bg-black/60, 10 px) */
.pho-kb { position: absolute; left: 4px; bottom: 5px; height: 16px; padding: 0 4px; border-radius: 5px; background: rgba(0, 0, 0, .6); font-style: normal; font-size: 10px; font-weight: 700;
  line-height: 16px; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* «Azami genişlik» + özet (geniş kapta tek satır; dar kapta seçim kendi satırında, özet altında — picker :71 w-full sm:w-auto) */
.pho-sel { display: flex; align-items: center; gap: 12px; height: var(--selh); margin-top: var(--selm); padding: 0 10px; border-radius: 10px; background: #f4f4f5;
  font-size: 10.5px; font-weight: 800; color: #3f3f46; white-space: nowrap; }
.pho-sel__f { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pho-sel__l { flex: none; }
.pho-sel__v { display: inline-flex; align-items: center; justify-content: space-between; gap: 4px; height: 22px; padding: 0 6px 0 8px; border-radius: 7px; background: #fff;
  box-shadow: inset 0 0 0 1px #d4d4d8; color: #27272a; font-variant-numeric: tabular-nums; }
.pho-sel__v .pho-i { width: 11px; height: 11px; color: #71717a; }
.pho-sel__o { font-weight: 700; line-height: 14px; color: #52525b; font-variant-numeric: tabular-nums; }
.pho-btn { position: relative; display: flex; width: max-content; align-items: center; height: 30px; margin-top: 10px; padding: 0 15px; border-radius: 9px; font-size: 12px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--navy-soft), var(--navy));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(16, 37, 64, .2), 0 6px 14px -8px rgba(20, 61, 107, .75); }
.pho-btn .pho-hit { right: 16px; bottom: 8px; }
/* s3: önce sayfa «Yükle»ye kayar (.6 sn), sonra imleç basar */
.pho.s3:not(.s4) .pho-btn { animation: pho-push .3s var(--ui-ease) .95s; }
.pho.s3:not(.s4) .pho-hit--up .ui-cur { animation: pho-cur-out .95s var(--ui-ease) .62s both; }
.pho.s3:not(.s4) .pho-hit--up .pho-rip { animation: pho-rip .55s ease-out .97s both; }

/* albümün küçük resim ızgarası; fotoğraf yokken aynı hücrede boş durum kutusu (admin-album.php:226–229) */
.pho-gx { display: grid; margin-top: var(--g); }
.pho-gx > * { grid-area: 1 / 1; min-width: 0; }
/* boy: sahnenin altındaki boşluğa sığar (kesik kenar sahne dibinde yarım kalmaz): kalan yer − 14 px sönme şeridi, en çok 60 px */
.pho-empty { align-self: start; display: grid; place-items: center; height: min(60px, calc(var(--H) - var(--st) - var(--hc) - var(--hu) - 2 * var(--g) - 14px)); padding: 0 12px; border: 1px dashed #cdd0d6; border-radius: 14px; text-align: center;
  font-size: 11px; font-weight: 700; line-height: 14px; color: #71717a; transition: opacity .25s var(--ui-ease); }
.pho.s4 .pho-empty { opacity: 0; }
.pho-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.pho-th { position: relative; display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #e4e4e7;
  box-shadow: 0 1px 2px rgba(16, 37, 64, .08), 0 6px 12px -10px rgba(16, 37, 64, .5);
  opacity: 0; scale: .86; transition: opacity .3s var(--ui-ease), scale .5s var(--pho-spring); }
.pho.s4 .pho-th { opacity: 1; scale: 1; transition-delay: calc(.5s + var(--i) * 70ms); }

/* işletim sisteminden sürüklenen fotoğraflar */
.pho-ghost { position: absolute; z-index: 8; left: var(--gl); top: calc(var(--st) + var(--hc) + var(--g) + 18px); width: 64px; height: 46px; pointer-events: none;
  opacity: 0; translate: var(--gx) var(--gy); rotate: -6deg;
  transition: opacity .25s var(--ui-ease), translate .9s cubic-bezier(.3, .75, .25, 1) .06s, rotate .9s var(--ui-ease) .06s, scale .25s var(--ui-ease); }
.pho-ghost__f { position: absolute; left: 4px; top: 4px; width: 56px; height: 38px; padding: 2px; border-radius: 6px; background: #fff;
  box-shadow: 0 0 0 1px rgba(16, 37, 64, .1), 0 2px 4px rgba(16, 37, 64, .1), 0 14px 24px -12px rgba(16, 37, 64, .55); }
.pho-ghost__f .pho-img { border-radius: 4px; }
.pho-ghost__f--3 { rotate: -9deg; translate: -3px 2px; }
.pho-ghost__f--2 { rotate: 7deg; translate: 3px 1px; }
.pho-ghost__n { position: absolute; z-index: 2; top: -6px; right: -8px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--navy-soft); color: #fff;
  font-size: 11px; font-weight: 800; box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(16, 37, 64, .35); }
.pho-ghost .pho-hit { left: 30px; top: 26px; }
.pho-ghost .ui-cur { transform: none; }
.pho.s1 .pho-ghost { opacity: 1; translate: 0 0; rotate: -2deg; }
.pho.s1:not(.s2) .pho-hit--drag .ui-cur { opacity: 1; }
.pho.s2 .pho-ghost { opacity: 0; scale: .5; transition-delay: 0s; }

/* bekleme katmanı (appBusy) */
.pho-busy { position: absolute; z-index: 10; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(24, 24, 27, .6); opacity: 0; transition: opacity .3s var(--ui-ease); }
.pho-busy__c { display: grid; justify-items: center; width: min(280px, 100%); padding: 18px 16px 17px; border-radius: 16px; background: #fff; text-align: center;
  box-shadow: 0 0 0 1px #e4e4e7, 0 24px 48px -16px rgba(0, 0, 0, .5); scale: .94; transition: scale .4s var(--pho-spring); }
.pho-spin { width: 34px; height: 34px; fill: none; stroke: var(--navy-soft); stroke-width: 3; stroke-linecap: round; animation: pho-spin .9s linear infinite; }
.pho-spin circle { opacity: .22; }
.pho-busy__c b { display: block; margin-top: 11px; font-size: 14px; font-weight: 900; line-height: 18px; color: #18181b; }
.pho-busy__c > span { display: block; margin-top: 3px; font-size: 11px; font-weight: 700; line-height: 15px; color: #52525b; }
.pho.s3:not(.s4) .pho-busy { opacity: 1; transition-delay: 1.15s; }
.pho.s3:not(.s4) .pho-busy__c { scale: 1; transition-delay: 1.15s; }

/* «Başarılı» penceresi (SweetAlert) */
.pho-swal { position: absolute; z-index: 11; inset: 0; display: grid; place-items: center; padding: 14px; background: rgba(15, 23, 42, .38); opacity: 0; transition: opacity .3s var(--ui-ease); }
.pho-swal__c { display: grid; justify-items: center; width: min(300px, 100%); padding: 18px 18px 16px; border-radius: 14px; background: #fff; text-align: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 28px 56px -18px rgba(0, 0, 0, .5); scale: .82; transition: scale .5s var(--pho-spring); }
.pho-swal__ic { width: 46px; height: 46px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pho-swal__ic circle { stroke: rgba(165, 220, 134, .32); stroke-width: 3.5; }
.pho-swal__ic path { stroke: #8fcf6a; stroke-width: 3.6; stroke-dasharray: 36; stroke-dashoffset: 36; transition: stroke-dashoffset .45s var(--ui-ease); }
.pho-swal__c > b { display: block; margin-top: 8px; font-size: 17px; font-weight: 800; line-height: 22px; color: #18181b; }
.pho-swal__t { display: block; margin-top: 4px; font-size: 11.5px; font-weight: 600; line-height: 16px; color: #3f3f46; text-wrap: pretty; }
.pho-ok { position: relative; display: inline-flex; align-items: center; height: 30px; margin-top: 12px; padding: 0 18px; border-radius: 8px; background: #18181b; font-size: 12px; font-weight: 800; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 4px 10px -6px rgba(0, 0, 0, .6); }
.pho-ok .pho-hit { right: 13px; bottom: 7px; }
/* s4: yükleme dönüşü «6 fotoğraf eklendi.» — açılır, «Tamam»a basılır, kapanır (tek adım içinde) */
@keyframes pho-dlg { 0%, 5% { opacity: 0; } 14%, 48% { opacity: 1; } 57%, 100% { opacity: 0; } }
@keyframes pho-pop { from { scale: .82; } to { scale: 1; } }
.pho.s4:not(.s5) .pho-swal--up { animation: pho-dlg 2.7s linear both; }
.pho.s4:not(.s5) .pho-swal--up .pho-swal__c { animation: pho-pop .5s var(--pho-spring) .15s both; }
.pho.s4:not(.s5) .pho-swal--up .pho-swal__ic path { stroke-dashoffset: 0; transition-delay: .42s; }
.pho.s4:not(.s5) .pho-swal--up .pho-ok { animation: pho-push .3s var(--ui-ease) .95s; }
.pho.s4:not(.s5) .pho-hit--ok1 .ui-cur { animation: pho-cur .95s var(--ui-ease) .45s both; }
.pho.s4:not(.s5) .pho-hit--ok1 .pho-rip { animation: pho-rip .55s ease-out .98s both; }
/* s6: yayın */
.pho.s6:not(.s7) .pho-swal--pub { opacity: 1; transition-delay: .15s; }
.pho.s6:not(.s7) .pho-swal--pub .pho-swal__c { scale: 1; transition-delay: .15s; }
.pho.s6:not(.s7) .pho-swal--pub .pho-swal__ic path { stroke-dashoffset: 0; transition-delay: .5s; }
.pho.s6:not(.s7) .pho-swal--pub .pho-ok { animation: pho-push .3s var(--ui-ease) 1.18s; }
.pho.s6:not(.s7) .pho-hit--ok .ui-cur { animation: pho-cur .95s var(--ui-ease) .78s both; }
.pho.s6:not(.s7) .pho-hit--ok .pho-rip { animation: pho-rip .55s ease-out 1.2s both; }

/* ── velinin telefonu ── */
.pho-phone { position: absolute; z-index: 12; right: var(--pr); top: var(--ptop); width: var(--pw); height: var(--phh); padding: 6px; border-radius: 34px;
  background: linear-gradient(160deg, #26324a, #0b1322 60%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 2px 4px rgba(11, 19, 34, .25), 0 30px 50px -22px rgba(11, 19, 34, .7);
  opacity: 0; translate: 0 64px; transition: opacity .35s var(--ui-ease), translate .7s cubic-bezier(.3, 1.25, .5, 1); }
.pho.s7 .pho-phone { opacity: 1; translate: 0 0; transition-delay: .2s; }
.pho-scrn { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 28px; background: #f5f6f8; }
.pho-sb { position: relative; flex: none; display: flex; align-items: center; justify-content: space-between; height: 26px; padding: 0 14px 0 20px; color: #0b1526; }
.pho-sb > b { font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pho-isl { position: absolute; left: 50%; top: 6px; width: 56px; height: 16px; margin-left: -28px; border-radius: 999px; background: #05070b; }
.pho-sbi { display: flex; align-items: center; gap: 3px; }
.pho-sbi .pho-i { width: 11px; height: 11px; stroke-width: 2.4; }
.pho-sbi .pho-bat { width: 16px; height: 12px; }
.pho-ph { flex: 1; min-height: 0; padding: 0 10px; }
.pho-ph__hd { display: flex; align-items: center; gap: 8px; height: 34px; color: #273246; }
.pho-ph__hd > .pho-i { width: 16px; height: 16px; }
.pho svg.pho-logo { flex: none; width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 2px 5px -1px rgba(16, 37, 64, .4); }
.pho-ph__sp { flex: 1; }
.pho-ph__bell { position: relative; display: grid; place-items: center; width: 24px; height: 24px; }
.pho-ph__bell .pho-i { width: 15px; height: 15px; }
.pho-ph__bell::after { content: ""; position: absolute; top: 3px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: #e0352b; box-shadow: 0 0 0 1.5px #f5f6f8; }
.pho-ph__av { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--navy-soft); font-size: 12px; font-weight: 800; box-shadow: 0 0 0 1px #e4e7ec, 0 2px 4px -2px rgba(16, 37, 64, .3); }
.pho-ph__kids { display: flex; gap: 5px; margin-top: 4px; }
.pho-ph__kids > span { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px 0 3px; border-radius: 999px; background: #fff; font-size: 11px; font-weight: 800; color: #3f3f46; box-shadow: inset 0 0 0 1px #e4e7ec; }
.pho-ph__kids i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-style: normal; font-size: 10px; font-weight: 800; color: var(--navy-soft); }
.pho-ph__kids .on { background: var(--navy); color: #fff; box-shadow: 0 4px 10px -6px rgba(20, 61, 107, .8); }
.pho-ph__kids .on i { background: rgba(255, 255, 255, .2); color: #fff; }
.pho-ph__v { display: grid; margin-top: 9px; }
.pho-ph__v > * { grid-area: 1 / 1; min-width: 0; transition: opacity .3s var(--ui-ease), translate .4s var(--ui-ease); }
.pho-ph__t { display: block; font-size: 16px; font-weight: 800; line-height: 19px; letter-spacing: -.015em; color: #0f172a; }
.pho-ph__lead { display: block; margin-top: 1px; font-size: 10px; font-weight: 600; line-height: 13px; color: var(--ui-muted); white-space: nowrap; }
.pho-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 9px; }
.pho-card { position: relative; display: block; min-width: 0; border-radius: 14px; background: #fff; overflow: hidden;
  box-shadow: 0 0 0 1px #e8ebf0, 0 1px 2px rgba(16, 37, 64, .05), 0 8px 16px -12px rgba(16, 37, 64, .35);
  opacity: 0; translate: 0 8px; transition: opacity .3s var(--ui-ease), translate .45s var(--ui-ease); }
.pho.s7 .pho-card { opacity: 1; translate: 0 0; transition-delay: .55s; }
.pho-card__img { display: block; aspect-ratio: 1; }
.pho-card__t { display: block; padding: 6px 8px 8px; }
.pho-card__t b { display: block; overflow: hidden; font-size: 11px; font-weight: 800; line-height: 14px; color: #0f172a; white-space: nowrap; text-overflow: ellipsis; }
.pho-card__t small { display: block; margin-top: 1px; font-size: 10px; font-weight: 700; line-height: 13px; color: var(--ui-muted); white-space: nowrap; }
.pho-tch { position: absolute; left: 50%; top: 40%; width: 0; height: 0; pointer-events: none; }
.pho-tch i { position: absolute; left: -17px; top: -17px; width: 34px; height: 34px; border-radius: 50%; background: rgba(20, 61, 107, .2); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .85); opacity: 0; }
.pho.s7:not(.s8) .pho-tch i { animation: pho-tap .6s ease-out 1.05s both; }
.pho.s7:not(.s8) .pho-card { animation: pho-push .3s var(--ui-ease) 1.1s; }
/* albüm ekranı */
.pho-pa { opacity: 0; translate: 14px 0; }
.pho.s8 .pho-pl { opacity: 0; translate: -14px 0; }
.pho.s8 .pho-pa { opacity: 1; translate: 0 0; transition-delay: .12s; }
/* başlık satırı (portal/_shell.php:365–385): h1 sarar, «Tümünü indir» aynı satırda; tarih altında */
.pho-pa__hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pho-pa__t { min-width: 0; font-size: 14px; line-height: 17px; }
.pho-pa__d { display: block; margin-top: 3px; font-size: 10px; font-weight: 700; line-height: 13px; color: var(--ui-muted); }
.pho-dl { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px 0 8px; border-radius: 9px; background: var(--navy); font-size: 10.5px; font-weight: 800; color: #fff; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 4px 10px -6px rgba(20, 61, 107, .8); }
.pho-dl .pho-i { width: 12px; height: 12px; stroke-width: 2.2; }
.pho-pg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 9px; }
.pho-pt { position: relative; display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #e4e4e7;
  opacity: 0; scale: .9; transition: opacity .3s var(--ui-ease), scale .45s var(--pho-spring); }
.pho.s8 .pho-pt { opacity: 1; scale: 1; transition-delay: calc(.3s + var(--i) * 60ms); }
/* alt sekmeler */
.pho-tab { flex: none; display: flex; align-items: flex-start; justify-content: space-between; height: 54px; padding: 6px 6px 0; background: #fff; box-shadow: inset 0 1px 0 #eceef2; }
.pho-tab > span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px 3px; border-radius: 10px; font-size: 10px; font-weight: 700; line-height: 12px; color: #52525b; white-space: nowrap; transition: background-color .3s var(--ui-ease), color .3s var(--ui-ease); }
.pho-tab .pho-i { width: 15px; height: 15px; stroke-width: 1.9; }
.pho-tab__on { padding-left: 6px !important; padding-right: 6px !important; background: var(--navy); color: #fff !important; }
.pho.s8 .pho-tab__on { background: rgba(20, 61, 107, 0); color: #52525b !important; transition-delay: .1s; }
.pho-home { position: absolute; left: 50%; bottom: 5px; width: 70px; height: 4px; margin-left: -35px; border-radius: 2px; background: rgba(11, 21, 38, .55); }

/* ── DAR KAPLAR ── */
@container (max-width: 600px) {
  .pho-box { --hc: 134px; --gl: 110px; --gx: 240px; --selh: 54px; }
  .pho-ttl small { font-size: 11px; }
  .pho-sel { flex-wrap: wrap; align-content: center; row-gap: 4px; }
  .pho-sel__f { width: 100%; }
  .pho-sel__v { flex: 1; }
}
@container (max-width: 470px) {
  .pho-box { --H: 480px; --bm: 10px; --bh: 50px; --brh: 76px; --hc: 120px; --hu: 136px;
    --T: calc((100cqi - 56px) / 3); --tg: 6px; --uf: 144px; --selm: 6px;
    --gh: calc(2 * (100cqi - 36px) / 3 + 8px);
    --pw: 238px; --phh: 408px; --pr: 10px; --ptop: 62px; --gl: 80px; --gx: 160px; --gy: -140px; }
  .pho-band { gap: 10px; margin-left: 10px; margin-right: 10px; padding: 0 8px 0 12px; }
  .pho-ico { display: none; }
  .pho-ttl b { font-size: 14px; line-height: 18px; }
  .pho-ttl small { font-size: 10.5px; }
  .pho-zip { width: 30px; padding: 0; justify-content: center; }
  .pho-zip > span { display: none; }
  .pho-bar { flex-wrap: wrap; align-content: center; row-gap: 8px; margin-left: 10px; margin-right: 10px; padding: 0 10px; }
  .pho-bar__l { width: 100%; }
  .pho-acts { justify-items: start; }
  .pho-stage { padding: 0 10px; }
  .pho-kv { padding: 10px 11px; }
  .pho-kv__h { gap: 5px; font-size: 10.5px; letter-spacing: 0; }
  .pho-kv__h .pho-i { width: 13px; height: 13px; }
  .pho-kv__t1 { display: none; }
  .pho-up { padding: 10px 11px 11px; }
  .pho-note { font-size: 10px; }
  .pho-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pho-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pho-phone { padding: 5px; border-radius: 31px; }
  .pho-scrn { border-radius: 26px; }
}