/* QR anı albümü: misafir yükleme sayfası, çiftin albümü ve yazdırılan masa kartı.
   Renkler davetiyenin renk takımından (body değişkenleri), yazı tipleri şablonun dosyasından gelir. */
.al { max-width:620px; margin:0 auto; padding:0 18px calc(30px + env(safe-area-inset-bottom)); }
.al section { padding:26px 0; }
.al-head { display:flex; flex-direction:column; align-items:center; gap:12px; padding:52px 0 8px; text-align:center; }
.al-head .names { font-size:clamp(3rem,14vw,4.4rem); }
.al-head .orn { width:min(240px,70%); color:var(--gold); }
.al-lead { max-width:30em; margin:0; font-style:italic; font-size:1.18rem; color:var(--muted); }
.al-small { margin:12px 0 0; font:400 .82rem/1.5 var(--f-ui); color:var(--muted); text-align:center; }
.al-small.center { margin:10px 0 0; }
.al-small a { color:inherit; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Yükleme kutusu */
.al-up form { display:grid; gap:16px; padding:22px 20px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.al-file { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.al-pick { display:grid; justify-items:center; gap:6px; padding:28px 16px; border:1.5px dashed color-mix(in srgb, var(--primary) 55%, transparent); border-radius:calc(var(--radius) * 2 + 6px);
  background:color-mix(in srgb, var(--soft) 45%, var(--paper)); color:var(--primary); text-align:center; cursor:pointer; transition:background .25s, transform .2s; -webkit-tap-highlight-color:transparent; }
.al-pick:hover { background:color-mix(in srgb, var(--soft) 75%, var(--paper)); }
.al-pick:active { transform:scale(.985); }
.al-file:focus-visible + .al-pick, .al-pick:focus-within { outline:2px solid var(--gold); outline-offset:3px; }
.al-pick svg { width:52px; height:52px; padding:11px; border-radius:50%; background:var(--primary); fill:none; stroke:var(--on-primary); stroke-width:1.6; stroke-linejoin:round; box-shadow:0 10px 22px color-mix(in srgb, var(--primary) 30%, transparent); }
.al-pick b { font:500 .95rem var(--f-ui); letter-spacing:.08em; text-transform:uppercase; }
.al-pick small { font:400 .82rem var(--f-ui); color:var(--muted); }

.al-queue { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.al-queue:empty { display:none; }
.al-queue li { display:grid; grid-template-columns:48px 1fr auto; align-items:center; gap:12px; padding:8px; border:1px solid var(--line); border-radius:calc(var(--radius) + 4px); background:var(--field); font:400 .84rem var(--f-ui); }
.al-queue .q-thumb { width:48px; height:48px; border-radius:6px; object-fit:cover; background:var(--soft); }
.al-queue .q-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); }
.al-queue .q-bar { display:block; height:5px; margin-top:6px; border-radius:9px; background:color-mix(in srgb, var(--ink) 10%, transparent); overflow:hidden; }
.al-queue .q-bar i { display:block; height:100%; width:0; border-radius:inherit; background:var(--primary); transition:width .2s; }
.al-queue .q-state { font-weight:500; color:var(--muted); white-space:nowrap; }
.al-queue .is-ok .q-state { color:#2e7d4f; }
.al-queue .is-ok .q-bar i { background:#2e7d4f; }
.al-queue .is-err .q-state { color:#a3223b; }
.al-queue .is-err .q-name { white-space:normal; }
.al-queue .q-err { display:block; margin-top:4px; color:#a3223b; white-space:normal; }
.al-done { margin:0; padding:12px 14px; border-radius:calc(var(--radius) + 2px); background:color-mix(in srgb, #2e7d4f 12%, var(--paper)); color:#235f3c; font:500 .92rem/1.4 var(--f-ui); text-align:center; }
.al-done[hidden] { display:none; }

.al-note { border-top:1px solid var(--line); padding-top:14px; }
.al-note summary { cursor:pointer; font:500 .86rem var(--f-ui); letter-spacing:.06em; color:var(--primary); list-style:none; text-align:center; }
.al-note summary::-webkit-details-marker { display:none; }
.al-note summary::before { content:"✎ "; }
.al-note[open] summary { margin-bottom:12px; }
.al-note .btn { margin-top:10px; }
.note-closed { margin:0; padding:24px 20px; text-align:center; font-style:italic; border-block:1px solid var(--line); }

/* Albüm duvarı */
.al-wall-sec h2 { margin-bottom:6px; }
.al-wall { columns:2 150px; column-gap:10px; }
@media (min-width:560px) { .al-wall { columns:3 160px; } }
.al-item { position:relative; break-inside:avoid; margin:0 0 10px; border-radius:calc(var(--radius) + 4px); overflow:hidden; background:var(--paper); border:1px solid var(--line); box-shadow:0 8px 20px color-mix(in srgb, var(--deep) 8%, transparent); }
.al-item.is-new { animation:al-in .6s var(--ease); }
@keyframes al-in { from { opacity:0; transform:scale(.94); } }
.al-open { position:relative; display:block; width:100%; padding:0; border:0; background:var(--soft); cursor:zoom-in; }
.al-open img, .al-open video { display:block; width:100%; height:auto; min-height:90px; object-fit:cover; }
.al-open video { aspect-ratio:9/12; pointer-events:none; }
.al-play { position:absolute; left:50%; top:50%; width:46px; height:46px; translate:-50% -50%; border-radius:50%; background:rgb(0 0 0 / .45); backdrop-filter:blur(4px); }
.al-play::after { content:""; position:absolute; left:18px; top:14px; border-left:14px solid #fff; border-block:9px solid transparent; }
.al-item figcaption { display:grid; gap:2px; padding:8px 10px 10px; font:400 .8rem/1.4 var(--f-ui); color:var(--muted); }
.al-item figcaption b { font-weight:500; color:var(--ink); }
.al-item.is-note { padding:16px 14px 4px; background:color-mix(in srgb, var(--soft) 35%, var(--paper)); }
.al-item blockquote { margin:0; font:italic 400 1.12rem/1.45 var(--f-body); color:var(--ink); overflow-wrap:anywhere; }
.al-item blockquote::before { content:"“"; display:block; height:.5em; font:400 2.6rem/1 var(--f-body); color:var(--gold); }
.al-item.is-note figcaption { padding:8px 0 10px; text-align:right; }

/* Çiftin sayfası */
.al-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:8px 0 0 !important; }
.al-stats div { display:grid; justify-items:center; padding:12px 4px; border:1px solid var(--line); border-radius:calc(var(--radius) + 4px); background:var(--paper); font:400 .76rem var(--f-ui); color:var(--muted); text-align:center; }
.al-stats b { font:500 1.7rem/1.1 var(--f-body); color:var(--primary); font-variant-numeric:lining-nums; }
.al-tools { display:grid; gap:12px; }
.al-tool-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.al-tool-row .btn { padding:0 12px; font-size:.74rem; }
.al-tools .btn.is-off { pointer-events:none; opacity:.45; }
.al-copy { display:flex; gap:8px; }
.al-copy input { flex:1; min-width:0; font-size:.95rem !important; }
.al-copy .btn { flex:none; min-height:50px; padding:0 16px; }
.al-del { display:flex; align-items:center; justify-content:space-between; gap:6px; padding:6px 8px 8px 10px; border-top:1px solid var(--line); }
.al-del small { font:400 .72rem var(--f-ui); color:var(--muted); }
.al-del button { padding:5px 10px; border:1px solid #e3b7bf; border-radius:99px; background:#fff; color:#a3223b; font:500 .74rem var(--f-ui); cursor:pointer; }
.al-del button:hover { background:#a3223b; color:#fff; }
.is-note .al-del { margin:4px -14px 0; }

.foot .al-back { display:inline-block; margin-bottom:6px; font:500 .86rem var(--f-ui); text-decoration:none; }

/* Büyütülmüş görünüm */
.lightbox video { max-width:100%; max-height:86vh; border-radius:3px; background:#000; }
.lightbox [hidden] { display:none; }

/* ——— Yazdırılan masa kartı (A4'e 4 adet, A6 boyutunda) ——— */
.al-print { background:#e9e6e2; }
.al-print::before { display:none; }
.pr-bar { position:sticky; top:0; z-index:5; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px 18px; padding:14px 18px; background:#222; color:#eee; font:400 .9rem/1.45 var(--f-ui); }
.pr-bar p { max-width:60em; margin:0; }
.pr-bar .btn { min-height:44px; }
.sheet { display:grid; grid-template-columns:105mm 105mm; grid-auto-rows:148.5mm; width:210mm; margin:24px auto; background:#fff; box-shadow:0 20px 50px rgb(0 0 0 / .18); }
.qr-card { position:relative; display:flex; padding:7mm; outline:.2mm dashed #c9c3bc; outline-offset:-.1mm; background:var(--paper); }
.qc-in { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.4mm; padding:6mm 5mm; border:.35mm solid var(--gold); outline:.2mm solid color-mix(in srgb, var(--gold) 55%, transparent); outline-offset:-1.6mm; text-align:center; }
.qc-in .eyebrow { margin:0; font-size:7.5pt; letter-spacing:.32em; }
.qc-names { margin:0; font:400 30pt/1 var(--f-display); color:var(--primary); overflow-wrap:anywhere; }
.qc-in .orn { width:42mm; margin:0; color:var(--gold); }
.qc-text { margin:0; max-width:70mm; font:italic 400 11.5pt/1.35 var(--f-body); color:var(--ink); }
.qc-code { width:42mm; aspect-ratio:1; padding:1.6mm; background:#fff; border-radius:1.5mm; }
.qc-code svg { display:block; width:100%; height:100%; }
.qc-how { margin:0; font:500 7.6pt/1.45 var(--f-ui); letter-spacing:.04em; color:var(--ink); }
.qc-url { margin:0; font:400 6.8pt var(--f-ui); color:var(--muted); overflow-wrap:anywhere; }
@page { size:A4; margin:0; }
@media print {
  .al-print { background:#fff; }
  .pr-bar { display:none; }
  .sheet { margin:0; box-shadow:none; }
  * { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}
@media screen and (max-width:820px) {
  .sheet { zoom:.45; }
}

/* ——— Canlı ekran (salon TV'si) ——— */
.al-live { margin:0; overflow:hidden; background:#0d0b0a; color:#fff; cursor:none; }
.al-live.show-ctl, .lv.show-ctl { cursor:default; }
.lv { position:fixed; inset:0; }
.lv-stage { position:absolute; inset:0; }
.lv-slide { position:absolute; inset:0; margin:0; display:grid; place-items:center; opacity:0; transition:opacity 1.2s ease; }
.lv-slide.is-in { opacity:1; }
.lv-back { position:absolute; inset:-60px; background:center/cover no-repeat; filter:blur(40px) brightness(.45) saturate(1.1); }
.lv-media { position:relative; max-width:94vw; max-height:92vh; width:auto; height:auto; object-fit:contain; box-shadow:0 30px 90px rgba(0,0,0,.55); }
.lv-slide.is-photo .lv-media { transform:scale(1.0); transition:transform 8s linear; }
.lv-slide.is-photo.is-in .lv-media { transform:scale(1.045); }
.lv-slide.is-video { background:#000; }
.lv-slide figcaption { position:absolute; left:4vw; bottom:5vh; max-width:52vw; display:grid; gap:.3em; padding:1.1em 1.4em; border-radius:16px; background:rgba(0,0,0,.42); backdrop-filter:blur(10px); font:400 clamp(1rem,1.7vw,1.6rem)/1.35 var(--f-ui); }
.lv-slide figcaption b { font:400 clamp(1.8rem,3.4vw,3.4rem)/1 var(--f-display); color:#fff; }
.lv-slide figcaption span { font:italic 400 clamp(1.1rem,1.9vw,1.9rem)/1.35 var(--f-body); color:rgba(255,255,255,.9); }
.lv-new { justify-self:start; padding:.25em .8em; border-radius:99px; background:var(--gold); color:#fff; font:600 clamp(.7rem,1vw,.95rem)/1.4 var(--f-ui); font-style:normal; letter-spacing:.18em; text-transform:uppercase; animation:lv-pulse 1.6s ease-in-out 3; }
@keyframes lv-pulse { 50% { transform:scale(1.08); } }
.lv-slide.is-note { padding:10vh 12vw 10vh 8vw; background:radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--primary) 55%, #000), color-mix(in srgb, var(--deep) 85%, #000)); align-content:center; justify-items:start; gap:2vh; }
.lv-slide.is-note blockquote { margin:0; max-width:60vw; font:italic 400 clamp(1.8rem,3.8vw,4rem)/1.3 var(--f-body); overflow-wrap:anywhere; }
.lv-slide.is-note blockquote::before { content:"“"; display:block; height:.45em; font-size:2.4em; line-height:1; color:var(--gold); }
.lv-slide.is-note .lv-by { margin:0; font:400 clamp(2rem,3.6vw,3.8rem)/1 var(--f-display); color:var(--gold); }
.lv-top { position:absolute; top:3.5vh; left:4vw; z-index:5; text-shadow:0 2px 14px rgba(0,0,0,.6); }
.lv-names { margin:0; font:400 clamp(2rem,3.6vw,3.6rem)/1 var(--f-display); }
.lv-count { margin:.4em 0 0; font:500 clamp(.75rem,1vw,1rem)/1.4 var(--f-ui); letter-spacing:.2em; text-transform:uppercase; opacity:.85; }
.lv-count b { font-weight:600; }
.lv-qr { position:absolute; right:3vw; bottom:4vh; z-index:5; width:clamp(150px,15vw,250px); padding:clamp(12px,1.2vw,20px); border-radius:18px; background:#fff; color:#222; text-align:center; box-shadow:0 18px 50px rgba(0,0,0,.45); }
.lv-code svg { display:block; width:100%; height:auto; }
.lv-qr p { margin:.6em 0 .2em; display:grid; font:400 clamp(.7rem,.9vw,.95rem)/1.35 var(--f-ui); color:#555; }
.lv-qr p b { font:400 clamp(1.3rem,1.9vw,2rem)/1.1 var(--f-display); color:var(--primary); }
.lv-qr small { display:block; font:500 clamp(.55rem,.65vw,.72rem)/1.3 var(--f-ui); color:#888; overflow-wrap:anywhere; }
.lv-empty { position:absolute; inset:0; z-index:6; display:grid; place-content:center; justify-items:center; gap:2.2vh; padding:4vh; text-align:center; background:radial-gradient(circle at 50% 35%, var(--paper), var(--bg)); color:var(--ink); }
.lv-empty[hidden] { display:none; }
.lv-big { margin:0; font:400 clamp(3rem,7vw,7rem)/1 var(--f-display); color:var(--primary); }
.lv-code.big { width:clamp(200px,24vh,320px); padding:16px; border-radius:18px; background:#fff; box-shadow:0 14px 40px color-mix(in srgb, var(--deep) 18%, transparent); }
.lv-lead { margin:0; font:400 clamp(1.1rem,2vw,1.8rem)/1.45 var(--f-body); }
.lv:has(.lv-empty:not([hidden])) .lv-qr, .lv:has(.lv-empty:not([hidden])) .lv-top { display:none; }
.lv-ctl { position:absolute; top:3vh; right:3vw; z-index:10; display:flex; align-items:center; gap:10px; opacity:0; transition:opacity .3s; pointer-events:none; }
.lv.show-ctl .lv-ctl { opacity:1; pointer-events:auto; }
.lv-ctl button { padding:.6em 1.1em; border:0; border-radius:99px; background:rgba(255,255,255,.92); color:#222; font:500 .9rem var(--f-ui); cursor:pointer; }
.lv-ctl span { font:400 .78rem var(--f-ui); color:rgba(255,255,255,.75); text-shadow:0 1px 6px #000; }
@media (max-aspect-ratio:1/1) { .lv-slide figcaption { max-width:70vw; } .lv-qr { width:clamp(120px,24vw,200px); } }
@media (prefers-reduced-motion:reduce) { .lv-slide.is-photo.is-in .lv-media { transform:none; } }

/* ——— Instagram hikâye kartı ——— */
.lightbox .lb-story { position:absolute; bottom:max(18px, env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); white-space:nowrap; }
.lightbox .lb-story[hidden] { display:none; }
.al-story-btn { margin-top:10px; min-height:44px; padding:0 18px; font-size:.82rem; }
.story { position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:16px; background:rgba(10,8,6,.86); }
.story[hidden] { display:none; }
.story-box { position:relative; width:min(380px, 100%); display:grid; gap:12px; justify-items:center; }
.story-x { position:absolute; top:-6px; right:-6px; z-index:2; }
.story-prev { width:min(300px, 72vw); aspect-ratio:9/16; display:grid; place-items:center; border-radius:14px; overflow:hidden; background:var(--paper); box-shadow:0 20px 60px rgba(0,0,0,.5); }
.story-prev img { width:100%; height:100%; object-fit:cover; }
.story-prev [hidden] { display:none; }
.story-wait { padding:20px; font:400 .9rem/1.4 var(--f-ui); color:var(--muted); text-align:center; }
.story-hint { margin:0; font:400 .84rem/1.45 var(--f-ui); color:rgba(255,255,255,.85); text-align:center; }
.story-btns { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.story-btns [hidden] { display:none; }
.story .btn.ghost { color:#fff; border-color:rgba(255,255,255,.6); }