/* ============================================================
   modules.css — Faz 3-7 bileşenleri
   tepki, bildirim, konuşma, profil gönderisi, kupa, sunucu, kaynak, premium
   ============================================================ */

/* ------------------------------------------------------------ Sekme çubuğu */

.tabbar {
    display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
    padding: 5px;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
}
.tabbar__item {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px var(--sp-4);
    border-radius: var(--r-md);
    color: var(--text-muted); font-size: var(--fs-sm); font-weight: 600;
}
.tabbar__item:hover { background: var(--surface-2); color: var(--text); }
.tabbar__item.is-active { background: var(--primary-soft); color: var(--text); }
.tabbar__count {
    padding: 0 6px; border-radius: var(--r-pill);
    background: var(--accent); color: #fff; font-size: var(--fs-2xs); font-weight: 700;
}

/* ------------------------------------------------------------ Tepkiler */

.reaction-picker-wrap { position: relative; }
.reaction-btn.is-mine { border-color: var(--primary); color: var(--primary-2); background: var(--primary-soft); }
.reaction-emoji { font-size: 15px; line-height: 1; }

.reaction-picker {
    position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 40;
    display: flex; gap: 2px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    opacity: 0; transform: translateY(6px) scale(.96); pointer-events: none;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.reaction-picker-wrap.is-open .reaction-picker { opacity: 1; transform: none; pointer-events: auto; }
.reaction-opt {
    display: grid; place-items: center;
    width: 36px; height: 36px; border-radius: 50%;
    font-size: 19px; line-height: 1;
    transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.reaction-opt:hover { transform: scale(1.25) translateY(-2px); background: var(--surface-2); }
.reaction-opt.is-mine { background: var(--primary-soft); }

.reaction-summary { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.reaction-chip {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 8px; border-radius: var(--r-pill);
    background: var(--surface-2); border: 1px solid var(--border-soft);
    font-size: var(--fs-xs);
}
.reaction-chip b { font-variant-numeric: tabular-nums; color: var(--text-muted); }

.react-particle {
    position: fixed; z-index: 200; pointer-events: none;
    font-size: 16px;
    animation: react-fly .7s var(--ease) forwards;
}
@keyframes react-fly {
    from { opacity: 1; transform: translate(0, 0) scale(1); }
    to   { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.5); }
}

.react-user { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: var(--r-pill); background: var(--surface-2); margin: 2px; }

/* ------------------------------------------------------------ Bildirimler */

.icon-btn--badge.has-unread::after { background: var(--accent); }
.alert-badge {
    position: absolute; top: 2px; right: 2px;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: var(--r-pill);
    background: var(--accent); color: #fff;
    font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}

.alerts-popup {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 80;
    width: min(380px, calc(100vw - 32px));
    max-height: 70vh; overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    opacity: 0; transform: translateY(-6px); pointer-events: none;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.alerts-popup.is-open { opacity: 1; transform: none; pointer-events: auto; }
.alerts-popup__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border-soft);
    font-size: var(--fs-sm);
}
.alerts-popup__empty { padding: var(--sp-6); text-align: center; }

.alert-list { display: flex; flex-direction: column; }
.alert-item { border-bottom: 1px solid var(--border-soft); }
.alert-item:last-child { border-bottom: 0; }
.alert-item > a { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); color: var(--text); }
.alert-item:hover { background: var(--surface-hover); }
.alert-item.is-unread { background: var(--primary-soft); }
.alert-item.is-unread:hover { background: color-mix(in srgb, var(--primary) 18%, transparent); }
.alert-item__body { flex: 1; min-width: 0; font-size: var(--fs-sm); }
.alert-item__body p { line-height: 1.5; }
.alert-item__body time { display: block; margin-top: 2px; color: var(--text-dim); font-size: var(--fs-xs); }
.alert-item__icon { color: var(--text-dim); flex: none; }
.alert-list--compact .alert-item > a { padding: var(--sp-2) var(--sp-3); }

/* ------------------------------------------------------------ Konuşmalar */

.conv-list { display: flex; flex-direction: column; }
.conv { border-bottom: 1px solid var(--border-soft); }
.conv:last-child { border-bottom: 0; }
.conv > a { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); color: var(--text); }
.conv:hover { background: var(--surface-hover); }
.conv.is-unread .conv__title { font-weight: 700; }
.conv__body { min-width: 0; }
.conv__title { display: flex; align-items: center; gap: 7px; font-size: var(--fs-md); font-weight: 600; }
.conv__meta { margin-top: 2px; font-size: var(--fs-xs); color: var(--text-dim); }
.conv__chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px 2px 2px; border-radius: var(--r-pill);
    background: var(--surface-2); border: 1px solid var(--border-soft);
    font-size: var(--fs-xs); color: var(--text-muted);
}

/* ------------------------------------------------------------ Profil gönderileri */

.pp-form { display: flex; gap: var(--sp-3); align-items: flex-start; }
.pp-form textarea { flex: 1; min-height: 52px; resize: vertical; }

.pp-list { display: flex; flex-direction: column; }
.pp { display: flex; gap: var(--sp-3); padding: var(--sp-4); border-bottom: 1px solid var(--border-soft); }
.pp:last-child { border-bottom: 0; }
.pp__body { flex: 1; min-width: 0; }
.pp__head { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); }
.pp__head time { color: var(--text-dim); font-size: var(--fs-xs); }
.pp__del { margin-left: auto; }
.pp__text { margin-top: 4px; }
.pp__comments { margin-top: var(--sp-3); padding-left: var(--sp-3); border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: var(--sp-2); }
.pp__comments li { display: flex; gap: var(--sp-2); font-size: var(--fs-sm); }
.pp__comments time { display: block; color: var(--text-dim); font-size: var(--fs-2xs); }
.pp__reply { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.pp__reply input { flex: 1; }

/* ------------------------------------------------------------ Kupalar */

.trophy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-3); padding: var(--sp-4); }
.trophy {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-4);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    background: var(--surface-2);
    opacity: .55;
}
.trophy.is-earned { opacity: 1; border-color: var(--primary); background: linear-gradient(120deg, var(--primary-soft), var(--surface-2) 70%); }
.trophy__icon {
    display: grid; place-items: center; flex: none;
    width: 44px; height: 44px; border-radius: var(--r-md);
    background: var(--surface-3); color: var(--warn);
}
.trophy.is-earned .trophy__icon { background: linear-gradient(140deg, var(--warn), var(--accent)); color: #fff; }
.trophy__body { flex: 1; min-width: 0; }
.trophy__body strong { display: block; font-size: var(--fs-sm); }
.trophy__body p { color: var(--text-dim); font-size: var(--fs-xs); }
.trophy__body time { color: var(--success); font-size: var(--fs-2xs); }
.trophy__points { font-size: var(--fs-lg); font-weight: 800; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ Sunucu listesi */

.server-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--sp-4); }
.server-card {
    display: flex; flex-direction: column; gap: var(--sp-3);
    padding: var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.server-card:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.server-card.is-online { border-color: color-mix(in srgb, var(--success) 35%, var(--border)); }
.server-card__head { display: flex; align-items: center; gap: var(--sp-2); }
.server-card__dot {
    width: 9px; height: 9px; border-radius: 50%; flex: none;
    background: var(--text-dim);
}
.server-card.is-online .server-card__dot,
.server-card__dot.is-online {
    background: var(--success);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 22%, transparent);
}
.server-card__title { font-size: var(--fs-md); font-weight: 700; min-width: 0; }
.server-card__title a { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.server-card__title a:hover { color: var(--primary-2); }
.server-card__verified { color: var(--primary-2); display: inline-flex; }
.server-card__desc { color: var(--text-muted); font-size: var(--fs-sm); }
.server-card__players { display: flex; align-items: baseline; gap: 6px; font-size: var(--fs-sm); }
.server-card__players strong { font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.server-card__players span { color: var(--text-dim); font-size: var(--fs-xs); }
.server-bar {
    width: 100%; height: 6px; border-radius: var(--r-pill);
    background: var(--surface-3); overflow: hidden; margin-bottom: 6px;
    flex-basis: 100%;
}
.server-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), var(--primary-2)); }
.server-card__tags { display: flex; flex-wrap: wrap; gap: 4px; }
.server-card__foot {
    display: flex; align-items: center; gap: var(--sp-4);
    padding-top: var(--sp-3); border-top: 1px solid var(--border-soft);
    font-size: var(--fs-xs); color: var(--text-dim);
}

.spark { display: flex; align-items: flex-end; gap: 2px; height: 120px; }
.spark__bar {
    flex: 1; min-width: 2px; border-radius: 2px 2px 0 0;
    background: linear-gradient(180deg, var(--primary-2), var(--primary));
    min-height: 2px;
}

/* ------------------------------------------------------------ Kaynak pazarı */

.resource-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-4); }
.resource-card {
    display: flex; flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    overflow: hidden;
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.resource-card:hover { transform: translateY(-2px); border-color: var(--primary); }
.resource-card__link { display: block; padding: var(--sp-4); color: var(--text); }
.resource-card__icon {
    display: grid; place-items: center;
    width: 40px; height: 40px; border-radius: var(--r-md);
    background: var(--primary-soft); color: var(--primary-2);
    margin-bottom: var(--sp-3);
}
.resource-card__title { font-size: var(--fs-md); font-weight: 700; }
.resource-card__tagline { color: var(--text-muted); font-size: var(--fs-sm); margin-top: 4px; }
.resource-card__meta {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
    padding: 0 var(--sp-4) var(--sp-3);
    font-size: var(--fs-xs); color: var(--text-dim);
}
.resource-card__meta > span:first-child { display: inline-flex; align-items: center; gap: 5px; }
.resource-card__price { font-weight: 700; color: var(--warn); }
.resource-card__price.is-free { color: var(--success); }
.resource-card__foot {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-4);
    border-top: 1px solid var(--border-soft);
    background: var(--surface-2);
    font-size: var(--fs-2xs); color: var(--text-dim);
}
.resource-price { font-size: var(--fs-lg); font-weight: 800; color: var(--warn); }
.resource-price.is-free { color: var(--success); }
.rate-row { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.rate-row input { flex: 1; min-width: 200px; }
.rate-stars { color: var(--warn); letter-spacing: 1px; }

/* ------------------------------------------------------------ Premium */

.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-4); }
.plan {
    position: relative;
    display: flex; flex-direction: column; gap: var(--sp-3);
    padding: var(--sp-6);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    background: var(--surface);
}
.plan--featured {
    border-color: var(--primary);
    background: linear-gradient(160deg, var(--primary-soft), var(--surface) 55%);
    box-shadow: 0 16px 40px -24px var(--primary);
}
.plan__badge {
    position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
    padding: 3px 12px; border-radius: var(--r-pill);
    background: linear-gradient(100deg, var(--primary), var(--primary-2));
    color: var(--primary-ink); font-size: var(--fs-2xs); font-weight: 700;
    white-space: nowrap;
}
.plan__title { font-size: var(--fs-lg); }
.plan__price { display: flex; align-items: baseline; gap: 5px; }
.plan__price strong { font-size: var(--fs-3xl); font-weight: 800; letter-spacing: -.03em; }
.plan__price span { color: var(--text-dim); font-size: var(--fs-sm); }
.plan__desc { color: var(--text-muted); font-size: var(--fs-sm); }
.plan__features { display: flex; flex-direction: column; gap: 7px; flex: 1; }
.plan__features li { display: flex; align-items: center; gap: 7px; font-size: var(--fs-sm); color: var(--text-muted); }
.plan__features .ico { color: var(--success); }
.plan__buy { display: flex; flex-direction: column; gap: var(--sp-2); }

.payment-icon {
    display: inline-grid; place-items: center;
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--surface-3); color: var(--warn);
    margin-bottom: var(--sp-4);
}
.payment-icon--ok { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }

/* ------------------------------------------------------------ Ortak yardımcılar */

.panel__body--pad { padding: var(--sp-5); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-3); }
.form--narrow { max-width: 480px; }
.check-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip--check { cursor: pointer; }
.chip--check input { appearance: none; -webkit-appearance: none; width: 0; height: 0; margin: 0; }
.chip--check:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); color: var(--text); }
.select--sm { padding: 7px var(--sp-3); font-size: var(--fs-sm); width: auto; }
.field__input--tiny { width: 80px; padding: 6px 8px; }
.filterbar__search { flex: 1; min-width: 180px; }
.link-btn--danger:hover { color: var(--danger); }
.reply-box__title { display: flex; align-items: center; gap: 7px; font-size: var(--fs-md); margin-bottom: var(--sp-3); }
.message__signature {
    margin: 0 var(--sp-4) var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border-soft);
    color: var(--text-dim); font-size: var(--fs-sm);
}
.message__avatar { position: relative; }
.message__avatar.is-online::after,
.profile__avatar.is-online::after {
    content: ''; position: absolute; right: 2px; bottom: 2px;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--success); border: 2px solid var(--surface-2);
}
.profile__avatar { position: relative; }
.profile__actions { display: inline-flex; gap: 6px; align-items: center; margin-left: auto; }

.search-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.search-form__main { display: flex; gap: var(--sp-2); }
.search-form__main input { flex: 1; }
.search-form__filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-3); }
mark { background: color-mix(in srgb, var(--warn) 28%, transparent); color: var(--text); border-radius: 3px; padding: 0 2px; }

.mention-box {
    position: absolute; z-index: 120;
    display: flex; flex-direction: column;
    min-width: 180px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-md); box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.mention-box button {
    padding: 8px var(--sp-3); text-align: left;
    font-size: var(--fs-sm); color: var(--text-muted);
}
.mention-box button:hover { background: var(--primary-soft); color: var(--text); }

@media (max-width: 680px) {
    .pp-form { flex-direction: column; }
    .search-form__main { flex-direction: column; }
}

/* ------------------------------------------------------------ Kayan şerit */

.ticker {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: 8px var(--sp-4);
    margin-bottom: var(--sp-5);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    font-size: var(--fs-sm);
}
.ticker__label {
    display: inline-flex; align-items: center; gap: 5px; flex: none;
    padding: 3px 10px; border-radius: var(--r-pill);
    background: var(--primary-soft); color: var(--primary-2);
    font-size: var(--fs-xs); font-weight: 700;
}
.ticker__viewport { flex: 1; min-width: 0; position: relative; height: 22px; }
.ticker__item {
    position: absolute; inset: 0;
    display: none; align-items: center; gap: 7px;
    color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ticker__item.is-active { display: flex; animation: panel-in var(--dur-slow) var(--ease); }
.ticker__item a {
    color: var(--text);
    /* Elips flex kapsayıcıda çalışmaz; kırpma metni taşıyan bağlantıda olmalı */
    min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ticker__nav { display: flex; gap: 2px; flex: none; }
.ticker__nav button {
    display: grid; place-items: center;
    width: 24px; height: 24px; border-radius: var(--r-sm);
    color: var(--text-dim);
}
.ticker__nav button:hover { background: var(--surface-2); color: var(--text); }

/* Canlı reklam: afişin kendi en/boy oranı korunur, kırpılmaz */
.ad-slot--live { border-style: solid; }
.ad-slot--live img {
    width: auto; max-width: 100%;
    height: auto; max-height: 100%;
    display: block;
    object-fit: contain;
}

/* ------------------------------------------------------------ Moderatör çubuğu */

.modbar {
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid color-mix(in srgb, var(--warn) 30%, var(--border));
    border-radius: var(--r-md);
    background: color-mix(in srgb, var(--warn) 7%, var(--surface));
}
.modbar__label {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--warn) 18%, transparent);
    color: var(--warn);
    font-size: var(--fs-xs); font-weight: 700;
    flex: none;
}
.modbar form { display: inline-flex; align-items: center; gap: 6px; }
.modbar__btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 11px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    font-size: var(--fs-xs); font-weight: 600;
    transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.modbar__btn:hover { border-color: var(--border-strong); color: var(--text); }
.modbar__btn--danger:hover { border-color: var(--danger); color: var(--danger); }
.modbar__select {
    padding: 5px 9px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    font-size: var(--fs-xs);
    max-width: 180px;
}
.modbar__inline { flex-wrap: nowrap; }

@media (max-width: 680px) {
    .modbar { gap: 6px; }
    .modbar__select { max-width: 120px; }
}