/* =====================================================================
   80sMusic Community -- עיצוב (כהה פרימיום · מובייל-first · בטוח למובייל)
   ===================================================================== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#070509; --bg2:#0c0810; --panel:#120d18; --panel2:#181221;
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.17);
  --ink:#f6f1e9; --ink2:rgba(246,241,233,.64); --ink3:rgba(246,241,233,.34);
  --orange:#ff6a00; --orange2:#ff9248; --cyan:#36e0d4; --gold:#e6b86a; --pink:#ff5db1;
  --mono:'Share Tech Mono',monospace; --display:'Bebas Neue',sans-serif; --body:'Heebo',sans-serif;
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--body);direction:rtl;line-height:1.7;
  -webkit-font-smoothing:antialiased;width:100%;max-width:100%;overflow-x:hidden;
  background-image:radial-gradient(1000px 540px at 80% -10%,rgba(255,106,0,.14),transparent 60%),radial-gradient(820px 600px at 6% 8%,rgba(54,224,212,.06),transparent 55%);
  background-repeat:no-repeat}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--orange);color:#1a0c00}
.topbar{display:none!important}
@media(max-width:768px){.gnav{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}}

.wrap{width:100%;max-width:920px;margin:0 auto;padding:0 18px}
.eyebrow{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:var(--ink3);text-transform:uppercase;margin-bottom:16px}
.eyebrow::before{content:"";width:30px;height:1px;background:var(--orange)}
section{padding:54px 0;border-bottom:1px solid var(--line)}

[data-rise]{opacity:1}
@media(prefers-reduced-motion:no-preference){
  [data-rise]{opacity:0;animation:rise .7s cubic-bezier(.2,.7,.3,1) forwards;animation-delay:var(--d,0s)}
}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ===== HERO ===== */
.hero{position:relative;overflow:hidden;padding:104px 18px 56px;border-bottom:1px solid var(--line);text-align:center}
.hero::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(70% 60% at 50% 0%,rgba(255,106,0,.2),transparent 60%),
    repeating-linear-gradient(118deg,rgba(255,255,255,.02) 0 2px,transparent 2px 7px),
    linear-gradient(180deg,#0a0610,#070509 80%)}
.hero .wrap{position:relative;z-index:2}
.hero .kick{font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:var(--cyan);text-transform:uppercase;margin-bottom:18px}
.hero h1{font-family:var(--display);font-weight:400;font-size:clamp(48px,14vw,120px);line-height:.88;color:#fff;text-shadow:0 0 28px rgba(255,106,0,.4)}
.hero .sub{margin:20px auto 0;max-width:520px;font-size:clamp(15px,4.4vw,18px);color:var(--ink2)}

/* ===== HUB: קטגוריות + כרטיסי שאלות ===== */
.cat-title{font-family:var(--display);font-weight:400;font-size:clamp(30px,7vw,46px);color:var(--ink);letter-spacing:.02em;margin-bottom:4px}
.q-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:24px}
.q-card{display:block;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px 20px;transition:transform .2s,border-color .2s,box-shadow .2s;position:relative;overflow:hidden}
.q-card:hover{transform:translateY(-4px);border-color:var(--orange);box-shadow:0 18px 40px rgba(0,0,0,.5)}
.q-card .qc-kick{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--cyan);text-transform:uppercase}
.q-card h3{font-family:var(--display);font-weight:400;font-size:clamp(24px,6vw,32px);line-height:1;color:#fff;margin:8px 0 6px}
.q-card p{color:var(--ink2);font-size:13.5px}
.q-card .go{position:absolute;top:20px;left:20px;color:var(--ink3);font-size:18px;transition:color .2s}
.q-card:hover .go{color:var(--orange)}

/* ===== QUESTION PAGE ===== */
.q-hero{padding:96px 18px 40px;text-align:center;position:relative;border-bottom:1px solid var(--line)}
.q-hero .crumb{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--ink3);text-transform:uppercase;margin-bottom:18px}
.q-hero .crumb a:hover{color:var(--orange)}
.q-hero h1{font-family:var(--display);font-weight:400;font-size:clamp(36px,9vw,72px);line-height:.94;color:#fff;text-shadow:0 0 26px rgba(255,106,0,.35);max-width:760px;margin:0 auto}
.q-hero .q-intro{margin:18px auto 0;max-width:560px;color:var(--ink2);font-size:15px}

/* ===== ריאקציות ===== */
.reactions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:28px auto 0;max-width:640px}
.react{display:inline-flex;align-items:center;gap:7px;background:var(--panel);border:1px solid var(--line);border-radius:40px;
  padding:10px 16px;color:var(--ink2);font-family:var(--body);font-size:14px;font-weight:500;cursor:pointer;transition:transform .15s,border-color .2s,color .2s}
.react:hover{transform:translateY(-2px);border-color:var(--orange2)}
.react.on{border-color:var(--orange);color:#fff;background:rgba(255,106,0,.1)}
.react .rc{font-family:var(--mono);font-size:12px;color:var(--orange);min-width:14px;text-align:center}

/* ===== טופס תגובה ===== */
.comments-section{padding:46px 0 64px}
.cform{display:flex;flex-direction:column;gap:12px;background:var(--panel);border:1px solid var(--line2);border-radius:18px;padding:22px 18px;margin-top:8px}
.cform .cf-title{font-family:var(--display);font-weight:400;font-size:28px;color:#fff;letter-spacing:.02em}
.cform input,.cform textarea,.reply-form input,.reply-form textarea{
  width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:13px 14px;
  color:var(--ink);font-family:var(--body);font-size:15px;transition:border-color .2s}
.cform input:focus,.cform textarea:focus,.reply-form input:focus,.reply-form textarea:focus{outline:none;border-color:var(--orange)}
.cform textarea{min-height:120px;resize:vertical;line-height:1.6}
.cfile{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink2);cursor:pointer;border:1px dashed var(--line2);border-radius:10px;padding:12px 14px}
.cfile input{display:none}
.btn,.btn-sm{display:inline-block;background:var(--orange);color:#1a0c00;font-family:var(--body);font-weight:800;border:none;cursor:pointer;
  border-radius:50px;letter-spacing:.02em;transition:transform .15s,box-shadow .2s,opacity .2s;text-align:center}
.btn{font-size:16px;padding:15px 30px;box-shadow:0 12px 30px rgba(255,106,0,.3)}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(255,106,0,.42)}
.btn:disabled{opacity:.55;cursor:default;transform:none;box-shadow:none}
.btn-sm{font-size:13px;padding:9px 18px}
.cnote{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--ink3)}
.cmsg{font-size:13px;min-height:0;font-family:var(--mono);letter-spacing:.04em}
.cmsg.ok{color:var(--cyan)} .cmsg.warn{color:var(--orange2)}

/* ===== רשימת תגובות ===== */
.comments-head{display:flex;align-items:center;gap:10px;margin:38px 0 18px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--ink3);text-transform:uppercase}
.comments-head #cCount{font-family:var(--display);font-size:26px;color:var(--orange);letter-spacing:.04em}
.clist{display:flex;flex-direction:column;gap:14px}
.cempty{text-align:center;padding:36px 16px;color:var(--ink3);font-family:var(--mono);font-size:12px;letter-spacing:.08em;border:1px dashed var(--line);border-radius:14px}
.comment{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 18px}
.c-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.c-name{font-weight:700;color:#fff;font-size:15px}
.c-city{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--cyan);text-transform:uppercase}
.c-date{margin-right:auto;font-family:var(--mono);font-size:10px;color:var(--ink3);letter-spacing:.06em}
.c-body{color:var(--ink2);font-size:15px;line-height:1.7;white-space:pre-wrap;word-break:break-word}
.c-img{display:block;margin-top:12px;border:1px solid var(--line);border-radius:10px;overflow:hidden;max-width:340px}
.c-img img{width:100%;height:auto;display:block}
.c-actions{margin-top:10px}
.c-reply-btn{background:transparent;border:none;color:var(--ink3);font-family:var(--mono);font-size:11px;letter-spacing:.08em;cursor:pointer;padding:4px 0}
.c-reply-btn:hover{color:var(--orange)}
.c-replies{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.reply{background:var(--bg2);border:1px solid var(--line);border-right:2px solid var(--orange);border-radius:10px;padding:13px 15px}
.c-reply-box .reply-form{display:flex;flex-direction:column;gap:9px;margin-top:12px;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:14px}

/* ===== EXPLORE / FOOTER ===== */
.explore-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
.ex{display:block;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 16px;transition:transform .2s,border-color .2s}
.ex:hover{transform:translateY(-3px);border-color:var(--orange)}
.ex .exl{font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--cyan);text-transform:uppercase}
.ex h4{font-family:var(--display);font-weight:400;font-size:24px;color:#fff;margin-top:7px;letter-spacing:.02em;line-height:1}
footer{padding:42px 0 58px;text-align:center}
footer .fnav{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin-bottom:16px}
footer .fnav a:hover{color:var(--orange)}
footer .cp{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--ink3)}
footer .cp b{color:var(--orange)}

@media(min-width:680px){
  .wrap{padding:0 28px}
  section{padding:80px 0}
  .q-grid{grid-template-columns:1fr 1fr;gap:16px}
  .explore-grid{grid-template-columns:repeat(4,1fr)}
}