/* =====================================================================
   DOKSAN — Tribün (sosyal akış) ve Doksan Ligi
   Avatar = kişinin forması · paylaşım = tribüne asılmış pankart ·
   yazı kutusu = soyunma odası tebeşir tahtası · tahmin = LED skorbord
   ===================================================================== */

/* ------------------------------------------------------------ düğmeler, formlar */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0;
  color: var(--grass-ink);
  background: var(--chalk);
  border: 2px solid var(--chalk);
  cursor: pointer;
  transition: transform .1s, background .15s;
}
.btn:hover { background: #fff; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: wait; }
.btn.ghost { background: transparent; color: var(--chalk); }
.btn.ghost:hover { background: rgba(var(--ink-rgb), .08); }
.btn.red { background: var(--red); border-color: var(--red); color: var(--chalk); }
.btn.small { padding: 5px 10px; font-size: 13px; }
.btn.big { padding: 12px 22px; font-size: 18px; width: 100%; }

.auth-form label { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; font-family: var(--f-cond); font-size: 14px; letter-spacing: 0; color: var(--chalk-2); }
.auth-form label small { text-transform: none; letter-spacing: 0; color: var(--chalk-3); }
.auth-form input, .auth-form textarea, .cmp-search input {
  font-family: var(--f-text);
  font-size: 16px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--chalk);
  background: rgba(4, 16, 8, .55);
  border: 2px solid var(--chalk-3);
  padding: 9px 11px;
  outline: none;
}
.auth-form input:focus, .auth-form textarea:focus { border-color: var(--chalk); }
.auth-form .two { display: grid; grid-template-columns: 1fr 110px; gap: 12px; }
.chk { flex-direction: row !important; align-items: flex-start; gap: 10px !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 15px !important; color: var(--chalk-2); }
.chk input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--amber); }
.chk a { color: var(--amber); text-decoration: underline; }
.chk.tiny { font-size: 13px !important; gap: 6px !important; }
.chk.tiny input { width: 14px; height: 14px; }
.form-err { color: #ff8a93; font-family: var(--f-cond); font-size: 16px; margin: 0 0 10px; }
.auth-form.danger { border-color: var(--red); }
.note.warn { color: var(--yellow); }
.note a { color: var(--amber); text-decoration: underline; }

.gate {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 26px 16px; text-align: center; font-family: var(--f-cond); font-size: 18px; color: var(--chalk-2);
  border: 2px solid var(--chalk-3);
}
.gate .ic { width: 30px; height: 30px; color: var(--chalk); }
.gate p { margin: 0; }
.gate .btn { min-width: 140px; }
.gate.inline { flex-direction: row; justify-content: flex-start; text-align: left; padding: 10px 14px; margin-bottom: 18px; font-size: 16px; }
.gate.inline .ic { width: 20px; height: 20px; flex: none; }
.gate.inline a { color: var(--amber); text-decoration: underline; }
.gate code { font-family: var(--f-led); font-weight: 900; color: var(--amber); font-size: 18px; }

.empty.small { padding: 30px 16px; font-size: 17px; }

/* ------------------------------------------------------------ üst bant: kullanıcı kutusu */

.mast-right { gap: 14px; }
.mainnav { overflow-x: auto; scrollbar-width: none; }
.mainnav::-webkit-scrollbar { display: none; }
.mainnav a { white-space: nowrap; }
.userbox { display: flex; align-items: center; gap: 10px; }
.ub-bell { position: relative; display: grid; place-items: center; width: 36px; height: 36px; color: var(--chalk-2); }
.ub-bell .ic { width: 22px; height: 22px; }
.ub-bell.has { color: var(--chalk); animation: whistle 2.4s ease-in-out infinite; }
.ub-bell b {
  position: absolute; top: -2px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px;
  display: grid; place-items: center; border-radius: 9px;
  font-family: var(--f-display); font-size: 11px; color: var(--chalk); background: var(--red);
}
@keyframes whistle { 0%, 88%, 100% { transform: rotate(0); } 91% { transform: rotate(-14deg); } 94% { transform: rotate(12deg); } 97% { transform: rotate(-6deg); } }
.ub-me { display: block; transition: transform .15s; }
.ub-me:hover { transform: translateY(-2px) rotate(-4deg); }
.ub-mod { font-family: var(--f-led); font-weight: 900; font-size: 11px; padding: 3px 5px; color: var(--amber); background: var(--board); border: 2px solid var(--board-edge); }

/* ------------------------------------------------------------ avatar = forma */

.av {
  flex: none;
  display: inline-grid;
  place-items: center;
  padding-top: 8%;
  font-family: var(--f-display);
  font-weight: 900;
  line-height: 1;
  color: var(--avt);
  background: var(--av);
  clip-path: polygon(22% 0, 38% 9%, 62% 9%, 78% 0, 100% 17%, 90% 39%, 82% 35%, 82% 100%, 18% 100%, 18% 35%, 10% 39%, 0 17%);
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35));
}

/* ------------------------------------------------------------ Tribün düzeni */

.tribune { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 30px; align-items: start; }
.tri-side { position: sticky; top: 16px; display: grid; gap: 18px; }
.side-card { border: var(--line); padding: 14px 16px; background: rgba(8, 26, 13, .3); }
.side-card h4 { margin: 0 0 10px; font-family: var(--f-display); font-weight: 800; font-size: 18px; letter-spacing: 0; }
.side-card h4 small { font-family: var(--f-cond); font-weight: 500; font-size: 12px; color: var(--chalk-3); letter-spacing: 0; }
.side-card.lboard { border: 5px solid var(--board-edge); }
.side-card .btn { margin-top: 12px; width: 100%; }
.trend { list-style: none; margin: 0; padding: 0; }
.trend li { display: flex; justify-content: space-between; padding: 5px 0; border-top: 1px solid var(--chalk-4); font-family: var(--f-cond); font-size: 17px; }
.trend li:first-child { border-top: 0; }
.trend a { color: var(--amber); font-weight: 600; }
.trend small { color: var(--chalk-3); font-family: var(--f-led); font-weight: 700; }
.people { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.people a { display: flex; align-items: center; gap: 10px; font-family: var(--f-cond); }
.people span { display: flex; flex-direction: column; line-height: 1.15; }
.people small { color: var(--chalk-3); font-size: 13px; }
.people a:hover b { color: var(--amber); }
.feedtabs { margin: 18px 0 8px; }

/* ------------------------------------------------------------ yazı kutusu = tebeşir tahtası */

.composer {
  margin: 0 0 22px;
  padding: 14px;
  background: #13241a;
  background-image: radial-gradient(ellipse at 30% 20%, rgba(var(--ink-rgb), .05), transparent 60%);
  border: 6px solid #5b4630;
  border-image: linear-gradient(135deg, #6b5237, #4a3825 50%, #6b5237) 1;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, .5);
}
.composer.guest { border: 2px solid var(--chalk-3); background: none; box-shadow: none; padding: 0; }
.cmp-row { display: flex; gap: 12px; align-items: flex-start; }
.composer textarea {
  flex: 1;
  resize: vertical;
  min-height: 60px;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--chalk);
  font-family: var(--f-cond);
  font-size: 20px;
  line-height: 1.35;
  text-shadow: 0 0 1px rgba(var(--ink-rgb), .6);
}
.composer textarea::placeholder { color: rgba(var(--ink-rgb), .35); }
.cmp-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(var(--ink-rgb), .2); }
.cmp-player { font-family: var(--f-cond); font-size: 14px; color: var(--chalk-2); display: inline-flex; gap: 5px; align-items: center; }
.cmp-player:hover { color: var(--chalk); }
.cmp-count { margin-left: auto; font-family: var(--f-led); font-weight: 900; font-size: 15px; color: var(--led-green); }
.cmp-count.low { color: var(--red); }
.cmp-search { margin-top: 10px; }
.cmp-search input { width: 100%; }
.cmp-results { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cmp-results button { padding: 4px 10px; border: 1px solid var(--chalk-3); font-family: var(--f-cond); font-size: 15px; }
.cmp-results button:hover { border-color: var(--amber); color: var(--amber); }
.cmp-results small { color: var(--chalk-3); }

/* ------------------------------------------------------------ paylaşım = pankart */

.feed { display: grid; gap: 16px; }
.post {
  position: relative;
  padding: 14px 16px 10px;
  background: linear-gradient(180deg, rgba(var(--ink-rgb), .07), rgba(var(--ink-rgb), .03));
  border: 2px solid var(--chalk-4);
  border-top: 4px solid var(--chalk-3);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}
/* pankart ipleri */
.post::before, .post::after {
  content: '';
  position: absolute;
  top: -12px;
  width: 2px;
  height: 12px;
  background: var(--chalk-3);
}
.post::before { left: 18px; transform: rotate(-12deg); }
.post::after { right: 18px; transform: rotate(12deg); }
.post.is-comment { border-top-width: 2px; padding: 10px 14px 6px; box-shadow: none; }
.post.is-comment::before, .post.is-comment::after { display: none; }
.post.hidden-post { padding: 10px 14px; }
.post.hidden-post::before, .post.hidden-post::after { display: none; }
.post-head { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.post-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; font-family: var(--f-cond); }
.post-who b { font-size: 17px; }
.post-who small { color: var(--chalk-3); font-size: 14px; }
.post-who a:hover b { color: var(--amber); }
.post-team { font-size: 12px; letter-spacing: 0; color: var(--chalk-3); }
.post-time { align-self: start; font-family: var(--f-cond); font-size: 14px; color: var(--chalk-3); }
.post-time:hover { color: var(--chalk); }
.post-body { margin: 10px 0 6px; font-size: 16px; line-height: 1.5; color: var(--chalk); overflow-wrap: anywhere; }
.post-body .tag { color: var(--amber); font-weight: 600; }
.post-body .mention { color: var(--led-green); font-weight: 600; }
.post-body a:hover { text-decoration: underline; }

.atts { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.att { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-family: var(--f-cond); font-size: 15px; border: 1px solid var(--chalk-3); color: var(--chalk-2); }
a.att:hover { border-color: var(--chalk); color: var(--chalk); }
.att .ic { width: 14px; height: 14px; }
.att-pred { flex-direction: column; gap: 0; padding: 3px 12px; background: var(--board); border: 3px solid var(--board-edge); line-height: 1; }
.att-pred small { font-family: var(--f-cond); font-size: 10px; letter-spacing: 0; color: var(--led-green); }
.att-pred b { font-family: var(--f-led); font-weight: 900; font-size: 22px; color: var(--amber); text-shadow: 0 0 8px var(--amber-glow); }

.post-act { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.act { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-display); font-weight: 800; font-size: 15px; color: var(--chalk-3); }
.act .ic { width: 18px; height: 18px; }
.act:hover { color: var(--chalk); }
.act.like.on { color: var(--amber); }
.act.like.pop .ic { animation: kick .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes kick { 0% { transform: translateY(0); } 40% { transform: translateY(-9px) rotate(200deg); } 100% { transform: translateY(0) rotate(360deg); } }
.act.small { font-family: var(--f-cond); font-weight: 500; font-size: 13px; }
.act-sp { flex: 1; }

.thread .comments { margin: 18px 0 0 24px; padding-left: 16px; border-left: var(--line); }
.clist { display: grid; gap: 10px; }

/* ------------------------------------------------------------ profil */

.uhero { display: grid; grid-template-columns: 150px 1fr; gap: 28px; align-items: center; margin-bottom: 30px; }
.uhero-shirt { display: grid; place-items: center; }
.uhandle { margin: 6px 0 10px; font-family: var(--f-cond); font-size: 18px; color: var(--chalk-2); }
.ubio { margin: 0 0 14px; max-width: 60ch; color: var(--chalk-2); }
.uhero-act { display: flex; gap: 10px; margin-top: 16px; }
.modtag { font-family: var(--f-led); font-weight: 900; font-size: 13px; color: var(--amber); }

/* ------------------------------------------------------------ bildirimler */

.notifs { display: grid; gap: 2px; margin-top: 18px; }
.notif { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-left: 4px solid transparent; font-family: var(--f-cond); font-size: 17px; }
.notif:hover { background: rgba(var(--ink-rgb), .05); }
.notif.new { border-left-color: var(--amber); background: rgba(255, 176, 0, .06); }
.notif q { color: var(--chalk-2); }
.notif small { color: var(--chalk-3); }
.nf-ic.score { display: grid; place-items: center; width: 34px; height: 34px; font-family: var(--f-led); font-weight: 900; font-size: 18px; color: var(--amber); background: var(--board); border: 3px solid var(--board-edge); }

/* ------------------------------------------------------------ giriş / kayıt */

.authbox { display: grid; grid-template-columns: 1fr minmax(0, 420px); gap: 40px; align-items: center; max-width: 900px; margin: 10px auto; }
.auth-side { display: grid; justify-items: start; gap: 14px; }
.auth-form { border: var(--line); padding: 22px; background: rgba(8, 26, 13, .35); }
.legal { max-width: 760px; }
.legal h3 { font-family: var(--f-display); margin: 20px 0 6px; }
.legal p { color: var(--chalk-2); }

/* ------------------------------------------------------------ Doksan Ligi */

.gday { margin-bottom: 60px; }
.gm {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) 140px;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border-top: 1px solid var(--chalk-4);
  transition: background .3s;
}
.gm:first-of-type { border-top: 0; }
.gm.saved { background: rgba(123, 216, 143, .12); }
.gm-when { display: flex; flex-direction: column; align-items: center; font-family: var(--f-cond); line-height: 1.1; }
.gm-when b { font-family: var(--f-display); font-size: 20px; }
.gm-when small { color: var(--chalk-3); font-size: 12px; letter-spacing: 0; }
.gm-teams > small { font-family: var(--f-cond); font-size: 12px; letter-spacing: 0; color: var(--chalk-3); }
.gm-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto minmax(0, 1fr); gap: 8px; align-items: center; margin: 4px 0 6px; }
.gm-row .t { font-family: var(--f-cond); font-weight: 600; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-row .t.h { text-align: right; }
.gm-row .colon { font-family: var(--f-led); font-weight: 900; font-size: 22px; color: var(--amber); opacity: .7; }
.gm-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-family: var(--f-cond); font-size: 14px; color: var(--chalk-2); }
.gm-link { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--chalk-3); }
.gm-link:hover { color: var(--chalk); }
.gm-save { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.motorpick { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-led); font-weight: 900; color: var(--amber); }
.motorpick .engtag { font-size: 10px; padding: 1px 5px; }
.comm { display: inline-flex; flex-direction: column; gap: 3px; min-width: 150px; }
.comm .bar3 { height: 5px; }
.comm small, .comm-empty { color: var(--chalk-3); font-size: 12px; }

/* skor girişi: LED hane + / − */
.step { display: inline-flex; align-items: stretch; background: var(--board); border: 3px solid var(--board-edge); }
.step input {
  width: 42px;
  text-align: center;
  background: transparent;
  border: 0;
  outline: none;
  font-family: var(--f-led);
  font-weight: 900;
  font-size: 26px;
  color: var(--amber);
  text-shadow: 0 0 10px var(--amber-glow);
}
.step input::placeholder { color: rgba(255, 176, 0, .25); }
.step button { width: 22px; font-family: var(--f-display); font-weight: 900; font-size: 16px; color: rgba(var(--ink-rgb), .5); }
.step button:hover { color: var(--chalk); background: rgba(var(--ink-rgb), .06); }

.gm.single { grid-template-columns: 1fr; padding: 0; border: 0; }
.gm.single .gm-save { flex-direction: row; align-items: center; }
.card.mpred .gm-meta { margin-top: 10px; }

/* pazar seçimleri: maç sonucu · KG · 2,5 + isteğe bağlı tam skor */
.gm-title { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 8px; font-family: var(--f-cond); font-size: 18px; min-width: 0; }
.gm-title b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-title span { color: var(--chalk-3); }
.gpicks { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 18px; margin-bottom: 10px; }
.gp-row { display: flex; flex-direction: column; gap: 3px; }
.gp-l { display: flex; align-items: baseline; gap: 6px; font-family: var(--f-cond); font-size: 12px; letter-spacing: 0; color: var(--chalk-3); }
.gp-l small { letter-spacing: 0; text-transform: none; font-size: 12px; color: var(--chalk-4); }
.gp-opts { display: inline-flex; }
.gp-o { position: relative; cursor: pointer; }
.gp-o input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gp-o span {
  display: grid; place-items: center; min-width: 40px; height: 34px; padding: 0 8px;
  border: 2px solid var(--chalk-3); margin-left: -2px;
  font-family: var(--f-display); font-weight: 800; font-size: 16px; letter-spacing: 0; color: var(--chalk-2);
  transition: background .12s, color .12s;
}
.gp-o:first-child span { margin-left: 0; }
.gp-o:hover span { color: var(--chalk); background: rgba(var(--ink-rgb), .06); }
.gp-o input:checked + span { position: relative; z-index: 1; background: var(--amber); border-color: var(--amber); color: var(--grass-ink); }
.gp-o input:focus-visible + span { outline: 2px dashed var(--amber); outline-offset: 2px; }
.gpicks.locked .gp-o { cursor: default; }
.gpicks.locked .gp-o span { opacity: .45; }
.gpicks.locked .gp-o input:checked + span { opacity: 1; background: rgba(255, 176, 0, .75); }
.gp-score .gm-row { display: flex; align-items: center; gap: 6px; margin: 0; }
.gp-score .gm-row .t { display: none; }
.gp-clear { margin-left: 6px; font-family: var(--f-cond); font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--chalk-3); text-decoration: underline; }
.gp-clear:hover { color: var(--chalk); }
.gm.single .gpicks { margin-top: 4px; }

.glb .glb-u { display: inline-flex; align-items: center; gap: 8px; }
.glb .glb-u:hover { color: var(--amber); }
.glb tr.motor-row td { background: var(--board); border-bottom-color: var(--board-edge); }
.glb tr.motor-row .pts { color: var(--amber); }
.beat { font-family: var(--f-cond); font-size: 12px; color: var(--led-green); }
.myleagues { list-style: none; margin: 0; padding: 0; }
.myleagues a { display: flex; flex-direction: column; padding: 8px 0; border-top: 1px solid var(--chalk-4); font-family: var(--f-cond); font-size: 18px; }
.myleagues small { color: var(--chalk-3); font-size: 14px; }
.myleagues a:hover b { color: var(--amber); }
.tri-match .feed { margin-top: 6px; }

/* ------------------------------------------------------------ duyarlı */

@media (max-width: 980px) {
  .tribune { grid-template-columns: 1fr; }
  .tri-side { position: static; }
  .authbox { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .masthead { grid-template-columns: 1fr; gap: 10px; }
  .mast-right { justify-self: stretch; justify-content: space-between; }
  .uhero { grid-template-columns: 1fr; justify-items: start; gap: 14px; }
  .gm { grid-template-columns: 1fr; gap: 8px; }
  .gm-when { flex-direction: row; gap: 8px; }
  .gm-save { flex-direction: row; align-items: center; justify-content: space-between; }
  .gm-row .t { font-size: 15px; }
  .step input { width: 34px; font-size: 22px; }
  .thread .comments { margin-left: 6px; padding-left: 10px; }
}

/* dar ekranda üst menü: menü kaydırılabilir, kullanıcı kutusu sabit ve çerçevenin içinde */
@media (max-width: 760px) {
  .mast-right { min-width: 0; gap: 8px; }
  .mainnav { flex: 1; min-width: 0; }
  .userbox { flex: none; gap: 6px; }
  .ub-bell { width: 30px; }
}

/* tek sütunlu form sayfaları (şifre sıfırlama, doğrulama) */
.authbox.single { grid-template-columns: minmax(0, 460px); justify-content: center; }
.form-msg { font-family: var(--f-cond); font-size: 17px; color: var(--chalk); margin: 0 0 12px; }
.form-msg a { color: var(--amber); text-decoration: underline; }
.verify-note { border-color: var(--yellow); }
.verify-note b { color: var(--yellow); }
.legal ul.rules { color: var(--chalk-2); padding-left: 20px; }
.legal ul.rules li { margin: 4px 0; }
.foot-links a { color: var(--chalk-2); }
.foot-links a:hover { color: var(--chalk); }