/* ====================================================
   DÜĞÜN ANILARI - stil
   Renkler: krem / pudra / altın, zarif düğün teması
   ==================================================== */
:root{
  --bg:#faf6f1;
  --bg2:#f3e9df;
  --card:#ffffff;
  --ink:#4a4039;
  --muted:#9a8f86;
  --gold:#c9a36a;
  --gold-d:#b08947;
  --rose:#c98a8a;
  --line:#ece3d8;
  --ok:#5b8a72;
  --err:#c0584f;
  --shadow:0 18px 50px rgba(120,95,60,.16);
  --radius:20px;
}

*{box-sizing:border-box}
[hidden]{display:none!important}   /* hidden özelliği her zaman gizlesin (lightbox/butonlar için) */
html,body{margin:0;padding:0}
body{
  font-family:'Nunito',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
h1,h2,h3,.couple,.serif{font-family:'Cormorant Garamond',Georgia,serif}

button{font-family:inherit;cursor:pointer}
input,textarea{font-family:inherit}
a{color:inherit}

/* ---------- Butonlar ---------- */
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:.4em;
  background:linear-gradient(135deg,var(--gold),var(--gold-d));
  color:#fff;border:none;border-radius:999px;
  padding:14px 28px;font-size:1.02rem;font-weight:700;
  box-shadow:0 8px 22px rgba(176,137,71,.35);
  transition:transform .12s ease,box-shadow .12s ease,opacity .2s;
}
.btn-primary:hover{transform:translateY(-1px)}
.btn-primary:active{transform:translateY(1px)}
.btn-primary:disabled{opacity:.5;box-shadow:none;cursor:not-allowed;transform:none}
.btn-ghost{
  display:block;margin:18px auto 0;background:#fff;border:1.5px solid var(--line);
  color:var(--ink);border-radius:999px;padding:11px 26px;font-weight:600;
}

/* ====================================================
   GİRİŞ EKRANI
   ==================================================== */
body.is-login{
  background:radial-gradient(1200px 600px at 50% -10%,#fff,transparent),
             linear-gradient(160deg,var(--bg) 0%,var(--bg2) 100%);
  min-height:100svh;
}
.login-wrap{
  min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:28px 18px;position:relative;overflow:hidden;
}
.login-card{
  position:relative;z-index:2;width:100%;max-width:440px;background:var(--card);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:38px 30px 30px;text-align:center;border:1px solid #fff;
}
.monogram{
  width:74px;height:74px;margin:0 auto 14px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Cormorant Garamond',serif;font-size:1.9rem;font-weight:700;letter-spacing:1px;
  color:var(--gold-d);background:#fbf4ea;border:2px solid var(--gold);
}
.eyebrow{margin:0;color:var(--gold-d);font-weight:700;letter-spacing:3px;text-transform:uppercase;font-size:.7rem}
.couple{margin:6px 0 2px;font-size:2.6rem;font-weight:600;line-height:1.05}
.couple .amp{color:var(--gold);font-style:italic;font-weight:500}
.wdate{margin:2px 0;color:var(--muted);font-weight:600;letter-spacing:1px}
.hashtag{margin:2px 0 0;color:var(--rose);font-weight:700}
.welcome{margin:16px auto 6px;color:#6b5f55;max-width:36ch;font-size:.98rem}

.login-form{margin-top:18px;text-align:left;display:flex;flex-direction:column;gap:14px}
.login-form label,.msg-label{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:.86rem;color:#6b5f55}
.login-form input,#msg{
  border:1.5px solid var(--line);border-radius:14px;padding:13px 15px;font-size:1.05rem;
  background:#fdfbf8;color:var(--ink);transition:border-color .15s,box-shadow .15s;font-weight:600;
}
.login-form input:focus,#msg:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(201,163,106,.16)}
.login-form .btn-primary{margin-top:6px;width:100%}
.tiny{font-size:.74rem;color:var(--muted);text-align:center;font-weight:600;margin:2px 0 0}
.alert{background:#fceae8;color:var(--err);border:1px solid #f3cdc8;border-radius:12px;padding:10px 14px;font-weight:700;font-size:.9rem;margin-bottom:4px}
.login-foot{position:relative;z-index:2;margin-top:22px;color:var(--muted);font-weight:600;font-size:.82rem}

/* uçuşan yapraklar */
.petal{position:absolute;width:120px;height:120px;border-radius:60% 40% 55% 45%;filter:blur(2px);opacity:.5;z-index:1}
.petal.p1{background:#f6d9d3;top:-30px;left:-30px}
.petal.p2{background:#f0e3c9;bottom:-40px;right:-30px;width:170px;height:170px}
.petal.p3{background:#efe0d4;top:40%;right:-50px;width:90px;height:90px}

/* ====================================================
   UYGULAMA
   ==================================================== */
body.is-app{background:var(--bg);min-height:100svh}
.topbar{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.brand{font-family:'Cormorant Garamond',serif;font-size:1.25rem;font-weight:600;display:flex;align-items:center;gap:8px}
.brand-mono{
  display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
  background:#fbf4ea;border:1.5px solid var(--gold);color:var(--gold-d);font-size:.8rem;font-weight:700;
}
.logout{color:var(--muted);text-decoration:none;font-weight:700;font-size:.85rem;border:1px solid var(--line);padding:6px 14px;border-radius:999px}

.app{max-width:760px;margin:0 auto;padding:18px 16px 60px}
.hello{text-align:center;color:#6b5f55;font-size:1.05rem;margin:8px 0 16px}

.tabs{display:flex;gap:8px;background:#f1e8dd;border-radius:999px;padding:5px;margin:0 auto 20px;max-width:380px}
.tab{flex:1;border:none;background:transparent;border-radius:999px;padding:11px 8px;font-weight:800;color:var(--muted);font-size:.95rem;transition:.15s}
.tab.active{background:#fff;color:var(--gold-d);box-shadow:0 4px 12px rgba(120,95,60,.12)}

.panel{display:none;animation:fade .3s ease}
.panel.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- Yükleme alanı ---------- */
.drop{
  background:var(--card);border:2px dashed var(--gold);border-radius:var(--radius);
  padding:30px 22px;text-align:center;box-shadow:var(--shadow);transition:.2s;
}
.drop.drag{background:#fbf4ea;transform:scale(1.01)}
.drop-icon{font-size:2.4rem}
.drop-title{font-family:'Cormorant Garamond',serif;font-size:1.7rem;font-weight:600;margin:6px 0 2px}
.drop-sub{color:var(--muted);margin:0 0 16px;font-weight:600}
.file-btn{cursor:pointer}
.drop-hint{color:var(--muted);font-size:.8rem;margin:14px 0 0;font-weight:600}

.file-list{margin-top:16px;display:flex;flex-direction:column;gap:10px}
.file-item{
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 12px;
  display:flex;align-items:center;gap:12px;
}
.file-thumb{
  width:46px;height:46px;border-radius:10px;flex:0 0 auto;background:#f3e9df;
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;overflow:hidden;
}
.file-thumb img{width:100%;height:100%;object-fit:cover}
.file-meta{flex:1;min-width:0}
.file-name{font-weight:700;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-sub{font-size:.76rem;color:var(--muted);font-weight:600}
.file-bar{height:6px;border-radius:999px;background:#eee4d8;margin-top:6px;overflow:hidden}
.file-bar > i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-d));transition:width .2s}
.file-state{font-size:1.1rem;flex:0 0 auto;width:24px;text-align:center}
.file-item.done .file-bar{display:none}
.file-item.err .file-name{color:var(--err)}
.file-x{border:none;background:transparent;color:var(--muted);font-size:1.1rem;flex:0 0 auto}

.msg-label{margin:18px 0 14px;display:flex;flex-direction:column;gap:6px}
.btn-send{width:100%}
.upload-status{text-align:center;margin-top:14px;font-weight:700}
.upload-status.ok{color:var(--ok)}
.upload-status.err{color:var(--err)}

/* ---------- Galeri ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media(min-width:560px){.grid{grid-template-columns:repeat(4,1fr);gap:10px}}
.cell{
  position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:#f1e8dd;
  cursor:pointer;border:1px solid var(--line);
}
.cell img{width:100%;height:100%;object-fit:cover;display:block}
.cell .play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.5);
  background:linear-gradient(transparent,rgba(0,0,0,.25));
}
.cell .who{
  position:absolute;left:0;right:0;bottom:0;padding:14px 6px 5px;
  background:linear-gradient(transparent,rgba(0,0,0,.55));color:#fff;font-size:.66rem;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.empty{text-align:center;color:var(--muted);padding:50px 20px;font-weight:600}
.empty-icon{font-size:2.6rem}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:60;background:rgba(28,22,18,.94);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px}
.lb-close{position:absolute;top:14px;right:16px;background:rgba(255,255,255,.15);color:#fff;border:none;width:42px;height:42px;border-radius:50%;font-size:1.2rem}
.lb-stage{max-width:100%;max-height:78vh;display:flex;align-items:center;justify-content:center}
.lb-stage img,.lb-stage video{max-width:100%;max-height:78vh;border-radius:12px}
.lb-caption{color:#fff;text-align:center;margin-top:14px;max-width:600px}
.lb-caption .lb-who{font-weight:800}
.lb-caption .lb-msg{color:#e9ddd0;font-style:italic;margin-top:4px}

.spinner{width:30px;height:30px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}