/**
 * MCSepeti Oy Sayfası — v2.9.29
 * /oy/{slug} — Minecraft kullanıcı adı formu + in-game ödül feedback
 */

.oy-main { max-width: 940px; padding-bottom: 60px; }

/* ════════════════════════════════════════════════════════════════
   LAYOUT — Sol geniş + Sağ dar
   ════════════════════════════════════════════════════════════════ */

.oy-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  align-items: start;
  margin-top: 20px;
}

.oy-left { display: flex; flex-direction: column; gap: 18px; }
.oy-right { display: flex; flex-direction: column; gap: 16px; }

/* ════════════════════════════════════════════════════════════════
   SUNUCU KART — Oy sayfası başında
   ════════════════════════════════════════════════════════════════ */

.oy-server-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-card, #1a1f2e);
  border: 1px solid rgba(61, 214, 140, 0.2);
}

.oy-server-card__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top right, rgba(61, 214, 140, 0.12), transparent 60%),
              linear-gradient(135deg, rgba(61, 214, 140, 0.05) 0%, transparent 100%);
  z-index: 0;
}

.oy-server-card__banner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.12;
  z-index: 0;
}

.oy-server-card__body {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
}

.oy-server-card__logo {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.oy-server-card__logo img { width: 100%; height: 100%; object-fit: cover; }

.oy-server-card__info { flex: 1; min-width: 0; }

.oy-server-card__name {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 4px;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-family: var(--font-display, inherit);
}

.oy-server-card__ip {
  display: block;
  font-size: 13px;
  color: var(--text-muted, #94a3b8);
  font-family: ui-monospace, monospace;
  margin-bottom: 8px;
}

.oy-server-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.oy-server-card__votes {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 12px 16px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 12px;
  flex-shrink: 0;
}

.oy-server-card__votes strong {
  font-size: 22px;
  font-weight: 800;
  color: #fbbf24;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  display: block;
}

.oy-server-card__votes small {
  font-size: 10.5px;
  color: #f59e0b;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 4px;
}

/* Badges */
.oy-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.oy-badge--on {
  background: rgba(61, 214, 140, 0.15);
  color: #3DD68C;
  border: 1px solid rgba(61, 214, 140, 0.3);
}

.oy-badge--off {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.oy-badge--players {
  background: rgba(91, 159, 255, 0.12);
  color: #5B9FFF;
  border: 1px solid rgba(91, 159, 255, 0.2);
}

.oy-badge--ver {
  background: rgba(139, 92, 246, 0.12);
  color: #a78bfa;
  border: 1px solid rgba(139, 92, 246, 0.2);
}

.oy-badge__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.oy-badge--on .oy-badge__dot { animation: oyPulse 2s infinite; }

@keyframes oyPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

.oy-badge i { font-size: 12px; }

/* ════════════════════════════════════════════════════════════════
   OY FORMU
   ════════════════════════════════════════════════════════════════ */

.oy-form-wrap {
  padding: 24px;
  background: var(--bg-card, #1a1f2e);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 16px;
}

.oy-form-wrap__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 800;
  color: var(--text, #e6ecf3);
  font-family: var(--font-display, inherit);
  letter-spacing: -0.01em;
}

.oy-form-wrap__subtitle {
  margin: 0 0 22px;
  font-size: 13px;
  color: var(--text-muted, #94a3b8);
  line-height: 1.5;
}

.oy-form-wrap__subtitle strong { color: var(--text, #e6ecf3); }

.oy-form { display: flex; flex-direction: column; gap: 16px; }

.oy-form__field { display: flex; flex-direction: column; gap: 7px; }

.oy-form__label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text, #e6ecf3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.oy-form__label i { font-size: 15px; color: #3DD68C; }

.oy-form__input {
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 2px solid rgba(61, 214, 140, 0.2);
  border-radius: 12px;
  color: var(--text, #e6ecf3);
  font-size: 16px;
  font-weight: 600;
  font-family: ui-monospace, monospace;
  letter-spacing: 0.04em;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.oy-form__input::placeholder { color: rgba(148, 163, 184, 0.4); font-weight: 400; letter-spacing: 0; }

.oy-form__input:focus {
  outline: none;
  border-color: #3DD68C;
  background: rgba(61, 214, 140, 0.06);
}

.oy-form__hint {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-muted, #94a3b8);
}

.oy-form__hint i { font-size: 13px; color: #5B9FFF; }

/* Oyunda uyarı kutusu */
.oy-ingame-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
}

.oy-ingame-notice i {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}

.oy-ingame-notice strong { display: block; font-weight: 700; margin-bottom: 2px; }
.oy-ingame-notice small { display: block; opacity: 0.8; font-size: 12px; }

.oy-ingame-notice.is-online {
  background: rgba(61, 214, 140, 0.1);
  border: 1px solid rgba(61, 214, 140, 0.25);
  color: #3DD68C;
}

.oy-ingame-notice.is-offline {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.25);
  color: #fbbf24;
}

/* Onay checkbox */
.oy-confirm-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  transition: all 0.15s ease;
}

.oy-confirm-check:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(61, 214, 140, 0.2);
}

.oy-confirm-check input[type="checkbox"] {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(61, 214, 140, 0.4);
  border-radius: 6px;
  flex-shrink: 0;
  margin-top: 1px;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}

.oy-confirm-check input:checked {
  background: #3DD68C;
  border-color: #3DD68C;
}

.oy-confirm-check input:checked::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 5px;
  width: 6px;
  height: 10px;
  border: solid #0a0e13;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

.oy-confirm-check__box { display: none; }

.oy-confirm-check__text {
  font-size: 13px;
  color: var(--text, #cbd5e1);
  line-height: 1.55;
  cursor: pointer;
}

/* Submit butonu */
.oy-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 28px;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
  color: #0a0e13;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 10px 30px rgba(245, 158, 11, 0.4);
  letter-spacing: 0.04em;
  font-family: inherit;
  position: relative;
}

.oy-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(245, 158, 11, 0.55);
}

.oy-submit i { font-size: 20px; }

.oy-submit__badge {
  padding: 3px 8px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* ════════════════════════════════════════════════════════════════
   BAŞARI KARTI
   ════════════════════════════════════════════════════════════════ */

.oy-success {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 22px;
  background: linear-gradient(135deg, rgba(61, 214, 140, 0.15), rgba(61, 214, 140, 0.05));
  border: 1px solid rgba(61, 214, 140, 0.35);
  border-radius: 16px;
}

.oy-success__icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #3DD68C, #2bb077);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 8px 22px rgba(61, 214, 140, 0.4);
}

.oy-success__icon i { font-size: 34px; color: #fff; }

.oy-success__body { flex: 1; min-width: 0; }

.oy-success__title {
  display: block;
  font-size: 20px;
  font-weight: 800;
  color: #3DD68C;
  margin-bottom: 6px;
}

.oy-success__text {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--text, #e6ecf3);
  line-height: 1.55;
}

.oy-success__text strong { color: #fff; }

.oy-success__votifier {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 12px;
  line-height: 1.5;
}

.oy-success__votifier i { font-size: 18px; flex-shrink: 0; }
.oy-success__votifier small { font-size: 11.5px; color: inherit; opacity: 0.8; display: block; width: 100%; }

.oy-success__votifier.ok {
  background: rgba(61, 214, 140, 0.12);
  border: 1px solid rgba(61, 214, 140, 0.3);
  color: #3DD68C;
}

.oy-success__votifier.warn {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #fbbf24;
}

.oy-success__countdown {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-muted, #94a3b8);
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}

.oy-success__countdown i { font-size: 16px; }
#oy-cd-display { font-weight: 800; color: var(--text, #e6ecf3); }

.oy-success__actions { display: flex; flex-wrap: wrap; gap: 8px; }

.oy-success__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  background: rgba(61, 214, 140, 0.15);
  color: #3DD68C !important;
  border: 1px solid rgba(61, 214, 140, 0.3);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
  transition: all 0.15s ease;
}

.oy-success__btn:hover { background: rgba(61, 214, 140, 0.25); }

.oy-success__btn--ghost {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text, #e6ecf3) !important;
  border-color: rgba(255, 255, 255, 0.08);
}

/* ════════════════════════════════════════════════════════════════
   COOLDOWN
   ════════════════════════════════════════════════════════════════ */

.oy-cooldown {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 22px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 16px;
}

.oy-cooldown__icon { font-size: 44px; line-height: 1; flex-shrink: 0; }

.oy-cooldown__body strong {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: #fbbf24;
  margin-bottom: 6px;
}

.oy-cooldown__body p {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--text-muted, #94a3b8);
}

.oy-cooldown__timer {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 10px;
  margin-bottom: 14px;
}

.oy-cooldown__timer span {
  font-size: 28px;
  font-weight: 800;
  color: #fbbf24;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* ════════════════════════════════════════════════════════════════
   SAĞ PANEL
   ════════════════════════════════════════════════════════════════ */

.oy-stats-card {
  padding: 18px;
  background: var(--bg-card, #1a1f2e);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
}

.oy-stats-card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 800;
  color: var(--text, #e6ecf3);
}

.oy-stats-card__title i { font-size: 16px; color: #5B9FFF; }

.oy-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.oy-stat {
  text-align: center;
  padding: 10px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
}

.oy-stat strong {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: #fbbf24;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.oy-stat small {
  display: block;
  font-size: 10.5px;
  color: var(--text-muted, #94a3b8);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 4px;
}

/* Son oy verenler */
.oy-recent {
  padding: 18px;
  background: var(--bg-card, #1a1f2e);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
}

.oy-recent__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 800;
  color: var(--text, #e6ecf3);
}

.oy-recent__title i { font-size: 16px; color: #5B9FFF; }

.oy-recent__list { list-style: none; padding: 0; margin: 0; }

.oy-recent__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.oy-recent__item:last-child { border-bottom: 0; }

.oy-recent__avatar {
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.oy-recent__body { flex: 1; min-width: 0; }

.oy-recent__body strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text, #e6ecf3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.oy-recent__body small {
  display: block;
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
}

.oy-srv-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: var(--text-muted, #94a3b8) !important;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  transition: all 0.15s ease;
}

.oy-srv-link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text, #e6ecf3) !important;
  border-color: rgba(255, 255, 255, 0.15);
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .oy-layout { grid-template-columns: 1fr; }
  .oy-right { order: -1; }
  .oy-stats-grid { grid-template-columns: 1fr 1fr; }
  .oy-server-card__body { flex-wrap: wrap; }
  .oy-server-card__votes { width: 100%; flex-direction: row; gap: 8px; justify-content: flex-start; }
}

@media (max-width: 575px) {
  .oy-server-card__logo { width: 52px; height: 52px; font-size: 26px; }
  .oy-server-card__name { font-size: 18px; }
  .oy-success { flex-direction: column; }
  .oy-cooldown { flex-direction: column; }
}

/* Light tema */
[data-theme="light"] .oy-server-card { background: #ffffff; }
[data-theme="light"] .oy-form-wrap { background: #ffffff; }
[data-theme="light"] .oy-form__input { background: rgba(15, 23, 42, 0.03); color: #0f172a; border-color: rgba(61, 214, 140, 0.3); }
[data-theme="light"] .oy-confirm-check { background: rgba(15, 23, 42, 0.03); }
[data-theme="light"] .oy-stats-card,
[data-theme="light"] .oy-recent { background: #ffffff; }