/* Ağaç dışındaki sayfalar; renkler ve yazı tipleri theme.css'te */
.topbar { position:sticky; top:12px; margin:12px; }
main { position:relative; max-width:820px; margin:0 auto; padding:1rem 1rem calc(3rem + var(--dock)); }
h1 { font-size:2rem; margin:.2em 0; }
h2 { font-size:1.45rem; margin:.3em 0; }
h3 { font-size:1.25rem; margin:0; }
.page-title { font-size:2.6rem; margin:.5rem 0 1rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:1.3rem; margin:1rem 0; }
label { display:block; margin:.9rem 0; font-size:.95rem; color:var(--muted); }
label.inline { display:block; margin:.2rem 0; }
input, textarea, select { display:block; width:100%; margin-top:.25rem; padding:.65rem .8rem; font-size:1rem; color:var(--ink); background:rgba(0,0,0,.28); border:1px solid var(--line); border-radius:10px; }
input:focus, textarea:focus, select:focus { outline:none; border-color:var(--gold); }
input::placeholder, textarea::placeholder { color:var(--muted); opacity:.75; }
input[type=checkbox] { display:inline-block; width:auto; margin:0 .35rem 0 0; accent-color:var(--gold); }
input[type=file] { padding:.5rem; }
input[type=file]::file-selector-button { margin-right:.7rem; padding:.3rem .8rem; border:1px solid var(--gold); border-radius:99px; background:none; color:var(--gold); font:inherit; cursor:pointer; }
.btn { display:inline-block; background:var(--gold); color:#2a1a08; border:0; border-radius:99px; padding:.55rem 1.3rem; font:600 1rem var(--text); cursor:pointer; text-decoration:none; transition:transform .2s; }
.btn:hover { transform:translateY(-1px); }
.btn.wide { width:100%; margin-top:.3rem; padding:.7rem; }
.btn.alt { background:transparent; color:var(--gold); border:1px solid var(--gold); }
.btn.danger { background:transparent; color:var(--danger); border:1px solid rgba(240,154,154,.5); }
button.link { background:none; border:0; color:var(--gold); cursor:pointer; padding:0; text-decoration:underline; text-underline-offset:.18em; }
.muted { color:var(--muted); font-size:.92rem; }
.err { color:var(--danger); }
.empty { text-align:center; margin:3rem 0; color:var(--muted); }
.plain { list-style:none; margin:.6rem 0; padding:0; }
.plain li { padding:.5rem 0; border-top:1px solid var(--line); }
.plain li:first-child { border-top:0; }
.copy { font-size:.85rem; margin:0; }
.invite { display:flex; gap:.5rem; align-items:center; }
.invite .copy { flex:1; min-width:0; }
.copybtn { flex:none; min-width:7.2rem; text-align:center; }
fieldset { border:1px solid var(--line); border-radius:12px; margin:.9rem 0; padding:.7rem .9rem; }
legend { padding:0 .4rem; color:var(--muted); font-size:.95rem; }
.pchip { display:inline-block; margin:.2rem; padding:.3rem .9rem; border:1px solid var(--line); border-radius:99px; cursor:pointer; color:var(--ink); font-size:.95rem; transition:background .2s; }
.pchip:has(input:checked) { background:var(--gold); color:#2a1a08; border-color:var(--gold); }

/* giriş ve kayıt */
.door { max-width:420px; margin:0 auto; padding-top:min(7vh, 60px); text-align:center; }
.door-mark { width:64px; height:64px; filter:drop-shadow(0 0 18px rgba(232,184,106,.45)); }
.door-name { margin:.3rem 0 0; font:600 2.5rem/1.1 var(--disp); }
.door .muted { margin:.3rem 0; }
.door .card { margin-top:1.5rem; text-align:left; }
.door h1 { font-size:1.5rem; }

/* arama ve süzgeçler */
.search { display:flex; gap:.5rem; align-items:center; margin:1rem 0 .7rem; }
.search input { flex:1; min-width:0; margin:0; border-radius:99px; padding-left:1.1rem; }
.filters { margin-bottom:1rem; }
.chips { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin:.5rem 0; }
.chips b { width:3.6rem; flex:none; color:var(--muted); font-size:.85rem; font-weight:400; }
.chip { padding:.15rem .8rem; border:1px solid var(--line); border-radius:99px; text-decoration:none; font-size:.92rem; white-space:nowrap; background:rgba(0,0,0,.2); color:var(--ink); transition:border-color .2s; }
.chip:hover { border-color:var(--gold); }
.chip.on { background:var(--gold); color:#2a1a08; border-color:var(--gold); }
.chip small { color:var(--muted); }
.chip.on small { color:#2a1a08; }

/* zaman çizelgesi: anılar tek bir dalın üstünde durur */
.timeline { position:relative; padding-left:30px; }
.timeline:empty { display:none; }
.timeline::before { content:''; position:absolute; left:8px; top:1.2rem; bottom:0; width:3px; border-radius:3px; background:linear-gradient(var(--branch) 85%, transparent); }
.year { position:relative; margin:2rem 0 .5rem; font-size:2.2rem; color:var(--gold); }
.year:first-child { margin-top:.5rem; }
.year::before { content:''; position:absolute; left:-29px; top:50%; width:15px; height:15px; margin-top:-7px; border-radius:50%; background:var(--gold); box-shadow:0 0 14px 3px rgba(232,184,106,.5); }
.memory { position:relative; display:flex; gap:1rem; padding:.8rem; margin:.7rem 0; background:var(--card); border:1px solid var(--line); border-radius:16px; text-decoration:none; color:inherit; transition:border-color .25s, transform .25s; }
.memory:hover { border-color:rgba(232,184,106,.6); transform:translateX(3px); }
.memory::before { content:''; position:absolute; left:-25px; top:2rem; width:9px; height:9px; border-radius:50%; background:var(--branch); }
.memory img, .memory .ph { width:128px; height:128px; object-fit:cover; border-radius:11px; flex:none; }
.ph { display:grid; place-items:center; font:500 3rem var(--disp); color:var(--gold); background:rgba(0,0,0,.25); }
.memory p { margin:.25rem 0; }

/* anı sayfası */
.story { margin:.5rem 0 2rem; }
.story h1 { font-size:2.7rem; margin:.1em 0 .2em; }
.crumbs { margin:0 0 1.2rem; }
.eyebrow { margin:0; color:var(--gold); }
.story .chips { margin:1rem 0 1.4rem; }
.body { white-space:pre-wrap; font-size:1.12rem; line-height:1.75; max-width:62ch; }
.media { display:grid; gap:1.3rem; margin-top:1.5rem; }
.media figure { margin:0; }
.media img, .media video { display:block; width:100%; max-height:80vh; object-fit:contain; border-radius:12px; background:#000; }
.media audio { width:100%; }
.doc { display:block; padding:.8rem 1rem; border:1px solid var(--line); border-radius:12px; }
figcaption { margin-top:.35rem; font-size:.85rem; color:var(--muted); }
.actions { display:flex; gap:.6rem; margin-top:1.6rem; }
.comment { border-top:1px solid var(--line); padding:.7rem 0; }
.comment p { margin:.2rem 0; white-space:pre-wrap; }
form.inline { display:inline; margin:0; }
#yorumlar textarea { margin:.7rem 0; }

@media (max-width:720px) {
  .topbar { top:8px; margin:8px; }
  .topbar .mainnav { font-size:14px; }
  .page-title { font-size:2.1rem; margin-top:0; }
  .story h1 { font-size:2.05rem; }
  .chips { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-inline:-1rem; padding-inline:1rem; }
  .chips::-webkit-scrollbar { display:none; }
  .story .chips { flex-wrap:wrap; overflow:visible; margin-inline:0; padding-inline:0; }
  .chips b { width:auto; margin-right:.2rem; }
  .timeline { padding-left:22px; }
  .timeline::before { left:4px; }
  .year::before { left:-23px; width:13px; height:13px; margin-top:-6px; }
  .memory { gap:.8rem; padding:.65rem; }
  .memory::before { left:-21px; }
  .memory img, .memory .ph { width:84px; height:84px; }
  .ph { font-size:2.2rem; }
}