@layer components {
  /* Tailwind preflight sıfırlamasına karşı bileşen stilleri (layer sırası: base < components < utilities) */
  button, .btn { cursor: pointer; padding: 0.4rem 0.9rem; border-radius: 999px;
    border: 1px solid #2a2f3a; background: #20252f; color: #e9ebf1; font-size: 0.9rem; }
  button:hover { border-color: #9aa1b2; }
  button.active { background: #ff3b5c; border-color: #ff3b5c; color: #fff; }
  button.danger { border-color: #ff3b5c; color: #ff3b5c; background: transparent; }
  button:disabled { opacity: 0.45; cursor: default; }
  .linkbtn { background: transparent; border: none; }
  .qbtn.active { background: #e9ebf1; color: #111; border-color: #e9ebf1; }
  input, textarea, select { background: #20252f; border: 1px solid #2a2f3a;
    color: #e9ebf1; border-radius: 8px; padding: 0.45rem 0.65rem; font-size: 0.92rem; }
  #player { width: 100%; max-width: 760px; background: #000; border-radius: 12px; }
  .ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
  .err { color: #ff7b8a; }
  .hint { color: #9aa1b2; font-size: 0.85rem; }
  .who { color: #9aa1b2; font-size: 0.85rem; }
  .comment { background: #171a21; border: 1px solid #2a2f3a; border-radius: 10px;
    padding: 0.6rem 0.9rem; margin-bottom: 0.6rem; }
  .comment.reply { margin-left: 2rem; border-left: 3px solid #ff3b5c; }
  .comment-head { display: flex; align-items: center; gap: 0.4rem; font-weight: 700; font-size: 0.9rem; }
  .comment-head a { color: #e9ebf1; text-decoration: none; }
  .comment-head .menu { margin-left: auto; }
  .cavatar { width: 26px; height: 26px; border-radius: 50%; vertical-align: middle; margin-right: 0.4rem; object-fit: cover; }
  .comment-meta { margin-top: 0.35rem; display: flex; gap: 0.4rem; }
  .comment-meta button { font-size: 0.82rem; padding: 0.25rem 0.65rem; }
  .reply-to { color: #9aa1b2; font-weight: normal; font-size: 0.85rem; }
  details.menu { position: relative; }
  details.menu summary { cursor: pointer; list-style: none; padding: 0.2rem 0.55rem;
    border: 1px solid #2a2f3a; border-radius: 999px; background: #20252f; }
  details.menu summary::-webkit-details-marker { display: none; }
  .menu-items { position: absolute; right: 0; background: #20252f; border: 1px solid #2a2f3a;
    border-radius: 10px; display: flex; flex-direction: column; z-index: 5; min-width: 150px; overflow: hidden; }
  .menu-items button { border: none; border-radius: 0; text-align: left; background: transparent; }
  table.manage { border-collapse: collapse; width: 100%; background: #171a21; border-radius: 12px; overflow: hidden; }
  table.manage th, table.manage td { border-bottom: 1px solid #2a2f3a; padding: 0.5rem; text-align: left; font-size: 0.9rem; }
  table.manage td button { margin-right: 0.3rem; font-size: 0.82rem; }
  .channel-chip img { width: 28px; height: 28px; border-radius: 50%; vertical-align: middle; margin-right: 0.4rem; object-fit: cover; }
  .channel-chip a { color: #e9ebf1; text-decoration: none; font-weight: 700; }
  .bellwrap { position: relative; display: inline-block; }
  #bell-list { position: absolute; right: 0; top: calc(100% + 8px); background: #20252f; color: #e9ebf1;
    border: 1px solid #2a2f3a; border-radius: 10px; min-width: 280px; max-width: 340px; max-height: 320px;
    z-index: 50; display: flex; flex-direction: column; overflow: hidden auto; }
  #bell-list a.notif { color: #e9ebf1; padding: 0.5rem 0.75rem; text-decoration: none;
    border-bottom: 1px solid #2a2f3a; margin: 0; font-size: 0.88rem; white-space: normal;
    overflow-wrap: anywhere; line-height: 1.35; flex-shrink: 0; }
  #bell-list a.notif.unread { font-weight: bold; background: rgba(255, 59, 92, 0.14); }
  #bell-n { color: #ff3b5c; font-weight: bold; }
  .helpbtn { width: 20px; height: 20px; border-radius: 999px; font-size: 12px; line-height: 1; padding: 0 0 1px 0; }
  .help-pop { position: absolute; z-index: 30; width: 260px; right: 0;
    background: #20252f; border: 1px solid #2a2f3a; border-radius: 10px;
    padding: 0.7rem 0.9rem; font-size: 0.85rem; color: #e9ebf1; }
  .helpwrap { position: relative; display: inline-block; }
  .hammer-wrap { display: inline-flex; align-items: flex-end; gap: 2px; vertical-align: -4px; }
  .hammer-arm { transform-origin: 8px 22px; animation: hammer-hit 1.1s ease-in-out infinite; }
  .proc-dot { animation: proc-blink 1.1s ease-in-out infinite; }
}

@keyframes hammer-hit {
  0%, 100% { transform: rotate(-24deg); }
  45%, 60% { transform: rotate(10deg); }
}
@keyframes proc-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

@layer components {
  .row { margin: 0.6rem 0; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
  .qbtn.active { background: #e9ebf1; color: #111; border-color: #e9ebf1; }
  button.danger { border-color: #ff3b5c; color: #ff3b5c; background: transparent; }
  .desc { color: #9aa1b2; }
  .meta { color: #9aa1b2; font-size: 0.9rem; }
  .channel-chip img { width: 28px; height: 28px; border-radius: 50%; vertical-align: middle; margin-right: 0.4rem; object-fit: cover; }
  .channel-chip a { color: #e9ebf1; text-decoration: none; font-weight: 700; }
  table.manage { border-collapse: collapse; width: 100%; background: #171a21; border-radius: 12px; overflow: hidden; }
  table.manage th, table.manage td { border-bottom: 1px solid #2a2f3a; padding: 0.5rem; text-align: left; font-size: 0.9rem; }
  table.manage td button { margin-right: 0.3rem; font-size: 0.82rem; }
}