/* Fuzyon — brand design system. Offline-first: no external fonts/CDNs.
   Plus Jakarta Sans if installed locally, else a clean system stack. */
:root{
  --purple:#5B3FD6;
  --purple-700:#4a32b0;
  --ink:#202039;
  --bg:#F7F6FB;
  --surface:#FFFFFF;
  --muted:#626276;
  --mint:#BFEBDD;
  --line:#E7E5F2;
  --radius:16px;
  --shadow:0 1px 2px rgba(32,32,57,.06), 0 6px 20px rgba(32,32,57,.06);
  --font:'Plus Jakarta Sans','Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* The [hidden] attribute defaults to display:none in the UA stylesheet, but any
   author rule that sets display (e.g. .form{display:grid}) silently wins over it
   regardless of selector specificity, because author CSS always beats UA CSS.
   This was hiding the *attribute* while the element stayed visually laid out
   (e.g. login-form/register-form both showing at once). Force it back everywhere. */
[hidden]{display:none !important}

@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/plus-jakarta-sans-latin-ext-400-normal.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/plus-jakarta-sans-latin-400-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/plus-jakarta-sans-latin-ext-600-normal.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/plus-jakarta-sans-latin-600-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/plus-jakarta-sans-latin-ext-700-normal.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/plus-jakarta-sans-latin-700-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* --- brand logo --- */
.brand{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.brand-logo{height:26px;width:auto;display:block}
@media (min-width:480px){.brand-logo{height:30px}}
.icon-btn{width:44px;height:44px;min-width:44px;border-radius:12px;border:1px solid var(--line);background:#fff;font-size:20px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--ink)}
.avatar{width:44px;height:44px;border-radius:50%;background:var(--purple);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;border:0;cursor:pointer}
/* --- card (softer shadow, clamped summary) --- */
.card{box-shadow:0 1px 2px rgba(32,32,57,.04),0 2px 10px rgba(32,32,57,.045)}
.card .clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cards{grid-template-columns:minmax(0,1fr)}
/* --- filter sheet --- */
.sheet-backdrop{position:fixed;inset:0;background:rgba(32,32,57,.42);z-index:60}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:61;background:var(--surface);border-radius:18px 18px 0 0;
  padding:14px 16px calc(18px + env(safe-area-inset-bottom));max-height:88vh;overflow:auto;
  box-shadow:0 -8px 30px rgba(32,32,57,.22)}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.sheet-head h3{margin:0}
.sheet .filters{margin:8px 0 0;box-shadow:none;border:0;padding:0;grid-template-columns:minmax(0,1fr)}
.sheet .filter-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
@media (min-width:720px){.sheet{left:50%;transform:translateX(-50%);max-width:520px;border-radius:18px;bottom:24px;padding-bottom:18px}}
/* --- bottom nav + content clearance --- */
.tabbar label{flex-direction:column;gap:3px;font-size:12px;line-height:1.1}
.tabbar svg{width:22px;height:22px}
.panels{padding-bottom:104px}
@media (max-width:640px){.panels{padding-bottom:calc(104px + env(safe-area-inset-bottom))}.filters{grid-template-columns:minmax(0,1fr)}}
.hero .chip{background:var(--mint)}

body{
  overflow-x:hidden;
  background:var(--bg); color:var(--ink); font-family:var(--font);
  font-size:16px; line-height:1.55; font-weight:400;
  -webkit-text-size-adjust:100%;
}
h1,h2,h3{font-weight:700; line-height:1.2; margin:0 0 .4em}
h1{font-size:clamp(24px,5vw,34px)}
h2{font-size:clamp(20px,4vw,26px)}
h3{font-size:18px; font-weight:600}
p{margin:0 0 .7em}
a{color:var(--purple)}
.muted{color:var(--muted)}
.small{font-size:14px}
.note{font-size:14px; color:var(--muted); background:#EFEDFA; border-left:3px solid var(--purple); padding:8px 12px; border-radius:8px}
.skip{position:absolute; left:-9999px}
.skip:focus{left:8px; top:8px; background:#fff; padding:8px; z-index:99}

.wrap{max-width:1040px; margin:0 auto; padding:0 16px}
.topbar{background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:60px}
.wordmark{font-weight:700; font-size:22px; letter-spacing:-.02em}
.wordmark .dot{color:var(--purple)}
.topbar-right{display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.whoami{font-size:14px; color:var(--muted); max-width:230px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.hero{padding:26px 0 8px}
.lead{max-width:70ch; color:var(--muted)}
.hero-badges{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.chip{background:var(--mint); color:#14403a; font-size:14px; padding:6px 12px; border-radius:999px; font-weight:600}

.connbar{margin:14px 0; padding:10px 14px; border-radius:12px; background:#fff; border:1px solid var(--line); font-size:14px; box-shadow:var(--shadow)}
.connbar.ok{border-color:#B7E3CE; background:#F1FBF6}
.connbar.err{border-color:#F3C6C6; background:#FDF3F3}

/* Tabs: hidden radios drive :has() panels; graceful fallback shows all */
.tabradio{position:absolute; opacity:0; pointer-events:none; width:0; height:0}
.tabbar{
  display:grid; grid-template-columns:repeat(5,1fr); gap:4px; margin:8px 0 18px;
  background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:5px; box-shadow:var(--shadow);
}
/* Giriş yapılmamışken veya parola sıfırlama ekranındayken üye gezinmesi tamamen gizlenir. */
.tabbar[hidden]{display:none}
.tabbar label{text-align:center; padding:10px 6px; border-radius:999px; font-weight:600; font-size:14px; cursor:pointer; color:var(--muted); min-height:44px; display:flex; align-items:center; justify-content:center}
#tab-discover:checked ~ .tabbar label[for=tab-discover],
#tab-projects:checked ~ .tabbar label[for=tab-projects],
#tab-messages:checked ~ .tabbar label[for=tab-messages],
#tab-community:checked ~ .tabbar label[for=tab-community],
#tab-profile:checked ~ .tabbar label[for=tab-profile]{background:var(--purple); color:#fff}

.panels{min-height:40vh}
.tabpanel{display:none; padding-bottom:40px}
/* No-JS / no-:has() fallback: reveal every panel stacked */
html.nojs .tabpanel{display:block !important; margin-bottom:28px}
@supports not (selector(:has(*))){
  .tabpanel{display:block !important; margin-bottom:28px}
  .tabbar{opacity:.6}
}
@supports (selector(:has(*))){
  body:has(#tab-discover:checked) #panel-discover,
  body:has(#tab-projects:checked) #panel-projects,
  body:has(#tab-messages:checked) #panel-messages,
  body:has(#tab-community:checked) #panel-community,
  body:has(#tab-profile:checked) #panel-profile{display:block}
}

.panel-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.sub{margin-top:22px; padding-top:14px; border-top:1px solid var(--line)}
.seg{display:inline-flex; background:#EFEDFA; border-radius:999px; padding:4px; gap:4px}
.segbtn{border:0; background:transparent; font:inherit; font-weight:600; color:var(--muted); padding:8px 14px; border-radius:999px; cursor:pointer; min-height:40px}
.segbtn.is-on{background:var(--purple); color:#fff}
/* Dedicated class for the login/register tabs — intentionally NOT .segbtn so
   wireTabs()'s discover Project/People toggle handler never touches them. */
.authtab{border:0; background:transparent; font:inherit; font-weight:600; color:var(--muted); padding:8px 14px; border-radius:999px; cursor:pointer; min-height:40px}
.authtab.is-on{background:var(--purple); color:#fff}

.btn{font:inherit; font-weight:600; border-radius:12px; padding:11px 16px; border:1px solid transparent; cursor:pointer; min-height:44px}
.btn-primary{background:var(--purple); color:#fff}
.btn-primary:hover{background:var(--purple-700)}
.btn-primary:disabled{opacity:.55; cursor:not-allowed}
.btn-ghost{background:#fff; color:var(--ink); border-color:var(--line)}
.btn-sm{padding:7px 12px; min-height:38px; font-size:14px; border-radius:10px}

.filters{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); margin:14px 0}
.filters label{display:flex; flex-direction:column; gap:6px; font-size:14px; font-weight:600; color:var(--muted)}
.filters input,.filters select{font:inherit; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#FCFCFE; color:var(--ink); min-height:44px}
.filter-actions{display:flex; gap:8px; align-items:flex-end}

.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:16px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); min-width:0; position:relative}
.card-top{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px}
.badge{font-size:12px; font-weight:600; padding:3px 9px; border-radius:999px; background:#EFEDFA; color:var(--purple)}
.badge-demo{background:#FDE9C9; color:#7a4b00}
.badge-ok{background:#DCF5E7; color:#0f6b45}
.badge-warn{background:#FDE9C9; color:#7a4b00}
.badge-off{background:#ECECF3; color:var(--muted)}

/* Kart ikincil menüsü (Engelle / Şikâyet et) — ana eylemden ayrı, kapalı başlar. */
.card-menu-wrap{position:relative; display:inline-block}
.card-menu{position:absolute; right:0; top:calc(100% + 6px); background:var(--surface);
  border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow);
  padding:6px; display:flex; flex-direction:column; gap:4px; min-width:170px; z-index:5}
.card-menu button{width:100%; justify-content:flex-start; text-align:left}

.list{display:flex; flex-direction:column; gap:10px; margin:10px 0}
.row{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px; box-shadow:var(--shadow); min-width:0}
.row-head{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items:center}
.row-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.reasons{margin:6px 0 0; padding-left:18px; font-size:14px; color:var(--muted)}

.form,.form-inline{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); margin:12px 0; display:grid; gap:12px}
/* Giriş/kayıt: mobilde tek sütun (zaten varsayılan grid tek sütundur), masaüstünde
   okunabilir bir genişlikte ortalanır — ~440px, tam genişlik ekranlarda taşmaz. */
#auth-box{max-width:440px; margin-left:auto; margin-right:auto}
#auth-box .form{max-width:100%}
.form-inline{grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); align-items:end}
.form label,.form-inline label{display:flex; flex-direction:column; gap:6px; font-size:14px; font-weight:600; color:var(--muted)}
.form input,.form textarea,.form select,.form-inline input,.form-inline select,.form-inline textarea{font:inherit; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#FCFCFE; color:var(--ink); width:100%}
.form fieldset{border:1px solid var(--line); border-radius:12px; padding:12px; display:grid; gap:10px}
.form legend{font-weight:700; color:var(--purple); padding:0 6px}
.form fieldset.private{background:#FBF8FF; border-color:#E0D6FA}
.form-note{font-size:14px; color:var(--muted); background:#EFEDFA; border-radius:10px; padding:10px 12px}
.form-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
label.inline{flex-direction:row; align-items:center; gap:8px; font-weight:400}
label.inline input{width:auto; min-height:0}
.box{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px; box-shadow:var(--shadow)}

.empty{color:var(--muted); font-size:14px; padding:10px 0}
.detail{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin-top:16px; box-shadow:var(--shadow)}
.private-block{background:#FBF8FF; border:1px solid #E0D6FA; border-radius:12px; padding:14px; margin-top:12px}
.watermark{font-size:12px; color:#7a6bb5; margin-top:8px; word-break:break-all}
.locked{background:#F6F5FB; border:1px dashed var(--line); border-radius:12px; padding:12px; color:var(--muted); font-size:14px}
.msg{font-size:14px}
.msg.err{color:#b3261e}
.msg.ok{color:#0f6b45}

.chat{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px; margin-top:14px}
.bubbles{display:flex; flex-direction:column; gap:8px; max-height:46vh; overflow:auto; margin-bottom:12px}
.bubble{background:#F1EFFA; border-radius:12px; padding:8px 12px; max-width:85%; font-size:15px; word-break:break-word}
.bubble.me{background:var(--purple); color:#fff; align-self:flex-end}
.bubble .meta{display:block; font-size:12px; opacity:.7; margin-top:2px}

.foot{margin-top:30px; border-top:1px solid var(--line); padding:16px 0 40px}

@media (max-width:640px){
  .tabbar{position:fixed; bottom:0; left:0; right:0; border-radius:0; border-left:0; border-right:0; border-bottom:0; margin:0; z-index:30; padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
  .tabbar label{font-size:12px; padding:8px 2px; flex-direction:column}
  .panels{padding-bottom:78px}
  .whoami{max-width:120px}
}