/* =====================================================================
   FabrikaTycoon — Bileşenler (Buton, Kart, Modal, Form, Navbar, Badge)
   FabrikaTycoon atmosferik + endüstriyel tycoon
   ===================================================================== */

/* ============ BUTON ============ */
.tc-btn {
  --btn-bg: var(--tc-surface-2);
  --btn-fg: var(--tc-text);
  --btn-bd: var(--tc-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tc-space-2);
  padding: 12px 24px;
  font-family: var(--tc-font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--tc-radius-sm);
  position: relative;
  overflow: hidden;
  transition: transform var(--tc-dur) var(--tc-ease),
              box-shadow var(--tc-dur) var(--tc-ease),
              background var(--tc-dur) var(--tc-ease),
              border-color var(--tc-dur) var(--tc-ease);
  user-select: none;
  white-space: nowrap;
}

.tc-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.10) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform var(--tc-dur-slow) var(--tc-ease);
  pointer-events: none;
}

.tc-btn:hover { transform: translateY(-2px); }
.tc-btn:hover::before { transform: translateX(100%); }
.tc-btn:active { transform: translateY(0); }

.tc-btn-primary {
  --btn-bg: var(--tc-grad-forge);
  --btn-fg: #ffffff;
  --btn-bd: rgba(255,255,255,0.18);
  box-shadow: var(--tc-glow-gold), var(--tc-shadow-inset);
  font-weight: 700;
}
.tc-btn-primary:hover { box-shadow: 0 0 32px rgba(245,183,26,0.55), var(--tc-shadow-inset); }

.tc-btn-ember {
  --btn-bg: var(--tc-grad-ember);
  --btn-fg: #1a0a05;
  --btn-bd: rgba(255,255,255,0.18);
  box-shadow: var(--tc-glow-ember), var(--tc-shadow-inset);
}

.tc-btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--tc-gold);
  --btn-bd: rgba(245,183,26,0.45);
}
.tc-btn-ghost:hover {
  --btn-bg: var(--tc-gold-soft);
  border-color: var(--tc-gold);
}

.tc-btn-outline {
  --btn-bg: rgba(67,44,56,0.72);
  --btn-fg: var(--tc-text);
  --btn-bd: var(--tc-line);
  backdrop-filter: blur(8px);
}
.tc-btn-outline:hover { border-color: var(--tc-gold); color: var(--tc-gold); }

.tc-btn-sm { padding: 8px 16px; font-size: 0.8rem; }
.tc-btn-lg { padding: 16px 32px; font-size: 1rem; }
.tc-btn-block { display: flex; width: 100%; }

.tc-btn-icon {
  width: 42px; height: 42px; padding: 0;
  border-radius: var(--tc-radius-sm);
}

/* ============ KART ============ */
.tc-card {
  position: relative;
  background-image:
    radial-gradient(circle, rgba(220,38,38,0.10) 0 1px, transparent 1.5px),
    var(--tc-grad-card);
  background-size: 18px 18px, auto;
  border: var(--tc-border);
  border-radius: var(--tc-radius-lg);
  padding: var(--tc-space-5);
  transition: transform var(--tc-dur) var(--tc-ease),
              border-color var(--tc-dur) var(--tc-ease),
              box-shadow var(--tc-dur) var(--tc-ease);
  overflow: hidden;
  isolation: isolate;
}

.tc-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, rgba(245,183,26,0.35), transparent 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.6;
  pointer-events: none;
  transition: opacity var(--tc-dur) var(--tc-ease);
}

.tc-card:hover {
  transform: translateY(-4px);
  border-color: rgba(245,183,26,0.35);
  box-shadow: var(--tc-glow-card);
}
.tc-card:hover::after { opacity: 1; }

.tc-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--tc-space-4);
  margin-bottom: var(--tc-space-4);
  border-bottom: var(--tc-border-soft);
}

.tc-card-title {
  font-family: var(--tc-font-heading);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: 0.04em;
}

.tc-card-body { color: var(--tc-text-muted); }
.tc-card-footer {
  margin-top: var(--tc-space-4);
  padding-top: var(--tc-space-4);
  border-top: var(--tc-border-soft);
}

/* ============ ROZET / BADGE ============ */
.tc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-family: var(--tc-font-heading);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-radius: var(--tc-radius-pill);
  background: var(--tc-surface-3);
  color: var(--tc-text-muted);
  border: 1px solid var(--tc-line);
}

.tc-badge-gold {
  background: var(--tc-gold-soft);
  color: var(--tc-gold);
  border-color: rgba(245,183,26,0.4);
}

.tc-badge-success { background: rgba(61,214,140,0.12); color: var(--tc-success); border-color: rgba(61,214,140,0.35); }
.tc-badge-danger  { background: rgba(255,90,90,0.12); color: var(--tc-danger); border-color: rgba(255,90,90,0.35); }
.tc-badge-info    { background: rgba(79,168,245,0.12); color: var(--tc-info); border-color: rgba(79,168,245,0.35); }

.tc-badge-dot::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

/* ============ FORM ============ */
.tc-input, .tc-select, .tc-textarea {
  width: 100%;
  padding: 12px 16px;
  background: var(--tc-surface);
  border: 1px solid var(--tc-line);
  border-radius: var(--tc-radius-sm);
  color: var(--tc-text);
  font-size: 0.95rem;
  transition: border-color var(--tc-dur) var(--tc-ease), box-shadow var(--tc-dur) var(--tc-ease);
}
.tc-input:focus, .tc-select:focus, .tc-textarea:focus {
  outline: none;
  border-color: var(--tc-gold);
  box-shadow: 0 0 0 3px rgba(245,183,26,0.15);
}
.tc-input::placeholder { color: var(--tc-text-dim); }

.tc-label {
  display: block;
  margin-bottom: var(--tc-space-2);
  font-family: var(--tc-font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tc-text-muted);
}

.tc-form-group { margin-bottom: var(--tc-space-4); }

/* ============ NAVBAR ============ */
.tc-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--tc-header-h);
  z-index: var(--tc-z-header);
  display: flex;
  align-items: center;
  background: var(--tc-nav-bg-solid);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  transition: background var(--tc-dur) var(--tc-ease),
              backdrop-filter var(--tc-dur) var(--tc-ease),
              border-color var(--tc-dur) var(--tc-ease),
              box-shadow var(--tc-dur) var(--tc-ease);
  border-bottom: 1px solid var(--tc-nav-line);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.tc-nav--scrolled {
  background: var(--tc-nav-bg-solid);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom-color: var(--tc-nav-line);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.45);
}

.tc-nav__inner {
  width: 100%;
  max-width: var(--tc-container-wide);
  margin-inline: auto;
  padding-inline: var(--tc-space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tc-space-5);
}

.tc-nav__brand {
  display: flex;
  align-items: center;
  gap: var(--tc-space-3);
  font-family: var(--tc-font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  flex-shrink: 0;
  color: var(--tc-nav-text);
}

.tc-nav__brand-mark {
  width: 38px; height: 38px;
  border-radius: var(--tc-radius-sm);
  background: var(--tc-grad-forge);
  display: grid; place-items: center;
  box-shadow: var(--tc-glow-gold);
  flex-shrink: 0;
}
.tc-nav__brand-mark img { width: 26px; height: 26px; }

.tc-nav__links {
  display: flex;
  align-items: center;
  gap: var(--tc-space-2);
  flex: 1;
  justify-content: center;
}

.tc-nav__link {
  position: relative;
  padding: 8px 14px;
  font-family: var(--tc-font-heading);
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tc-nav-muted);
  border-radius: var(--tc-radius-sm);
  transition: color var(--tc-dur) var(--tc-ease), background var(--tc-dur) var(--tc-ease);
}
.tc-nav__link:hover { color: var(--tc-nav-text); background: rgba(255, 255, 255, 0.14); }
.tc-nav__link::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 4px;
  height: 2px;
  background: var(--tc-grad-forge);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--tc-dur) var(--tc-ease);
}
.tc-nav__link:hover::after { transform: scaleX(1); }
.tc-nav__link.is-active { color: #fff; }
.tc-nav__link.is-active::after { transform: scaleX(1); background: var(--tc-pink); }

.tc-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--tc-space-3);
  flex-shrink: 0;
}

/* IP grubu — çevrimiçi etiketi + IP butonu yan yana, overlap yok */
.tc-nav__ip-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.tc-nav__online {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--tc-font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--tc-nav-text);
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: var(--tc-radius-pill);
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.20);
  transition: color var(--tc-dur), border-color var(--tc-dur);
}
.tc-nav__online.is-online { color: var(--tc-success); border-color: rgba(110,231,183,0.35); }
.tc-nav__online.is-offline { color: var(--tc-nav-muted); }
.tc-nav__online-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--tc-nav-muted);
  flex-shrink: 0;
  transition: background var(--tc-dur), box-shadow var(--tc-dur);
}
.tc-nav__online.is-online .tc-nav__online-dot {
  background: var(--tc-success);
  box-shadow: 0 0 8px var(--tc-success);
  animation: tc-pulse 2s ease-in-out infinite;
}
.tc-nav__online-text { flex-shrink: 0; }

.tc-nav__ip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: var(--tc-radius-pill);
  font-family: var(--tc-font-mono);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--tc-nav-text);
  cursor: pointer;
  transition: border-color var(--tc-dur), color var(--tc-dur), transform var(--tc-dur-fast), box-shadow var(--tc-dur);
  white-space: nowrap;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.tc-nav__ip:hover { border-color: var(--tc-pink); color: var(--tc-pink); box-shadow: 0 0 16px rgba(244,114,182,0.18); }
.tc-nav__ip:active { transform: scale(0.94); }
.tc-nav__ip-text { flex-shrink: 0; color: var(--tc-nav-text); }
.tc-nav__ip-icon { font-size: 0.75rem; opacity: 0.5; transition: opacity var(--tc-dur); flex-shrink: 0; }
.tc-nav__ip:hover .tc-nav__ip-icon { opacity: 1; }
.tc-nav__ip.is-copied {
  border-color: var(--tc-success) !important;
  color: var(--tc-success) !important;
  box-shadow: 0 0 18px rgba(110,231,183,0.35);
  animation: tc-copy-flash 0.45s ease;
}
@keyframes tc-copy-flash {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); box-shadow: 0 0 16px rgba(110,231,183,0.4); }
  100% { transform: scale(1); }
}

.tc-nav__toggle { display: none; }

/* ============ DROPDOWN ============ */
.tc-dropdown { position: relative; }
/* Hover gap: invisible bridge so mouse doesn't lose hover crossing the gap */
.tc-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 14px;
}
.tc-dropdown__menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 240px;
  background: rgba(43, 27, 37, 0.96);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--tc-line);
  border-radius: var(--tc-radius);
  padding: var(--tc-space-2);
  box-shadow: var(--tc-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--tc-dur) var(--tc-ease), transform var(--tc-dur) var(--tc-ease), visibility var(--tc-dur);
  z-index: var(--tc-z-raised);
}
.tc-dropdown:hover .tc-dropdown__menu,
.tc-dropdown:focus-within .tc-dropdown__menu {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Avatar dropdown: larger gap bridge + delayed hide for smoother interaction */
.tc-dropdown--avatar::after {
  height: 20px;
  left: -20px;
  right: -20px;
}
.tc-dropdown--avatar .tc-dropdown__menu {
  top: calc(100% + 20px);
  transition: opacity 0s, transform 0s, visibility 0s;
}
.tc-dropdown--avatar:hover .tc-dropdown__menu,
.tc-dropdown--avatar:focus-within .tc-dropdown__menu {
  opacity: 1; visibility: visible;
  transform: translateY(0);
}
/* Keep menu open briefly after mouse leaves — prevents accidental close */
.tc-dropdown--avatar:not(:hover) .tc-dropdown__menu {
  transition-delay: 300ms;
}
.tc-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--tc-space-3);
  padding: 10px 14px;
  border-radius: var(--tc-radius-sm);
  color: var(--tc-nav-muted);
  font-size: 0.9rem;
  transition: background var(--tc-dur) var(--tc-ease), color var(--tc-dur) var(--tc-ease);
}
.tc-dropdown__item:hover { background: var(--tc-surface); color: var(--tc-pink); }
.tc-dropdown__item i { width: 18px; text-align: center; color: var(--tc-text-dim); }
.tc-dropdown__item:hover i { color: var(--tc-pink); }

/* Right-aligned dropdown (for avatar actions) */
.tc-dropdown__menu--end {
  left: auto;
  right: 0;
  transform: translateY(-6px);
}
.tc-dropdown:hover .tc-dropdown__menu--end,
.tc-dropdown:focus-within .tc-dropdown__menu--end {
  transform: translateY(0);
}

/* Button-styled dropdown item (for POST forms like logout) */
.tc-dropdown__item--btn {
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  display: flex;
  align-items: center;
  gap: var(--tc-space-3);
  padding: 10px 14px;
  border-radius: var(--tc-radius-sm);
  color: var(--tc-nav-muted);
  font-size: 0.9rem;
  transition: background var(--tc-dur) var(--tc-ease), color var(--tc-dur) var(--tc-ease);
}
.tc-dropdown__item--btn:hover { background: var(--tc-surface); color: var(--tc-danger); }
.tc-dropdown__item--btn:hover i { color: var(--tc-danger); }

/* ============ MODAL ============ */
.tc-modal {
  position: fixed;
  inset: 0;
  z-index: var(--tc-z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--tc-space-5);
}
.tc-modal.is-open { display: flex; }
.tc-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 15, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: tc-fade-in var(--tc-dur) var(--tc-ease);
}
.tc-modal__panel {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--tc-surface);
  border: var(--tc-border);
  border-radius: var(--tc-radius-lg);
  box-shadow: var(--tc-shadow-lg);
  animation: tc-slide-up var(--tc-dur-slow) var(--tc-ease);
}
.tc-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--tc-space-5);
  border-bottom: var(--tc-border-soft);
}
.tc-modal__body { padding: var(--tc-space-5); }
.tc-modal__close {
  width: 32px; height: 32px;
  border-radius: var(--tc-radius-xs);
  display: grid; place-items: center;
  color: var(--tc-text-muted);
  transition: background var(--tc-dur), color var(--tc-dur);
}
.tc-modal__close:hover { background: var(--tc-surface-2); color: var(--tc-text); }

/* ============ TOOLTIP ============ */
.tc-tooltip {
  position: relative;
}
.tc-tooltip[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 6px 10px;
  background: var(--tc-ink);
  border: 1px solid var(--tc-line);
  border-radius: var(--tc-radius-xs);
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--tc-dur), transform var(--tc-dur), visibility var(--tc-dur);
  pointer-events: none;
  z-index: var(--tc-z-raised);
}
.tc-tooltip:hover[data-tip]::after {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ============ ALERT ============ */
.tc-alert {
  display: flex;
  gap: var(--tc-space-3);
  padding: var(--tc-space-4);
  border-radius: var(--tc-radius);
  border: 1px solid var(--tc-line);
  background: var(--tc-surface);
}
.tc-alert--success { border-color: rgba(61,214,140,0.4); background: rgba(61,214,140,0.06); }
.tc-alert--warning { border-color: rgba(245,183,26,0.4); background: rgba(245,183,26,0.06); }
.tc-alert--danger  { border-color: rgba(255,90,90,0.4); background: rgba(255,90,90,0.06); }
.tc-alert--info    { border-color: rgba(79,168,245,0.4); background: rgba(79,168,245,0.06); }

/* ============ AVATAR ============ */
.tc-avatar {
  display: inline-block;
  border-radius: var(--tc-radius);
  background: var(--tc-surface-2);
  border: 1px solid var(--tc-line);
  object-fit: cover;
}
.tc-avatar--xs { width: 24px; height: 24px; }
.tc-avatar--sm { width: 32px; height: 32px; }
.tc-avatar--md { width: 48px; height: 48px; }
.tc-avatar--lg { width: 72px; height: 72px; }
.tc-avatar--rounded { border-radius: 50%; }

/* ============ BREADCRUMB ============ */
.tc-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--tc-space-2);
  padding: var(--tc-space-3) 0;
  font-size: var(--tc-fs-sm);
  color: var(--tc-text-muted);
}
.tc-breadcrumb a:hover { color: var(--tc-gold); }
.tc-breadcrumb__sep { color: var(--tc-text-dim); }
.tc-breadcrumb__current { color: var(--tc-text); }

/* ============ PAGINATION ============ */
.tc-pagination {
  display: flex;
  align-items: center;
  gap: var(--tc-space-2);
  justify-content: center;
}
.tc-pagination__link {
  min-width: 36px; height: 36px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--tc-line);
  border-radius: var(--tc-radius-sm);
  color: var(--tc-text-muted);
  font-family: var(--tc-font-mono);
  font-size: 0.85rem;
  transition: all var(--tc-dur) var(--tc-ease);
}
.tc-pagination__link:hover { border-color: var(--tc-gold); color: var(--tc-gold); }
.tc-pagination__link.is-active {
  background: var(--tc-grad-forge);
  color: #ffffff;
  border-color: transparent;
  font-weight: 700;
}

/* ============ LOADING (Skeleton) ============ */
.tc-skeleton {
  background: linear-gradient(90deg, var(--tc-surface) 25%, var(--tc-surface-2) 37%, var(--tc-surface) 63%);
  background-size: 400% 100%;
  animation: tc-shimmer 1.4s ease infinite;
  border-radius: var(--tc-radius-sm);
}
.tc-skeleton-line { height: 14px; margin-bottom: 8px; }
.tc-skeleton-block { height: 120px; }

/* ============ ÜRÜN KARTI ============ */
.tc-product {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--tc-grad-card);
  border: var(--tc-border);
  border-radius: var(--tc-radius-lg);
  overflow: hidden;
  transition: transform var(--tc-dur) var(--tc-ease), border-color var(--tc-dur), box-shadow var(--tc-dur);
  isolation: isolate;
}
.tc-product:hover {
  transform: translateY(-6px);
  border-color: rgba(245,183,26,0.4);
  box-shadow: var(--tc-glow-card);
}
.tc-product__media {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--tc-ink-2);
}
.tc-product__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--tc-dur-slow) var(--tc-ease);
}
.tc-product:hover .tc-product__media img { transform: scale(1.08); }
.tc-product__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(250,243,247,0.86) 100%);
}
.tc-product__badge {
  position: absolute;
  top: var(--tc-space-3);
  left: var(--tc-space-3);
  z-index: 2;
}
.tc-product__discount {
  position: absolute;
  top: var(--tc-space-3);
  right: var(--tc-space-3);
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: 46px;
  min-height: 46px;
  padding: 6px;
  border-radius: 50%;
  background: var(--tc-grad-forge);
  color: #fff;
  font-family: var(--tc-font-heading);
  font-weight: 800;
  font-size: 0.8rem;
  box-shadow: var(--tc-glow-pink);
}
.tc-product__body {
  padding: var(--tc-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-3);
  flex: 1;
}
.tc-product__title {
  font-family: var(--tc-font-heading);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  color: var(--tc-text);
}
.tc-product__desc {
  font-size: 0.85rem;
  color: var(--tc-text-muted);
  line-clamp: 2;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tc-product__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: var(--tc-space-3);
  border-top: var(--tc-border-soft);
}
.tc-product__price {
  font-family: var(--tc-font-mono);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--tc-gold);
}
.tc-product__price-old {
  font-size: 0.85rem;
  color: var(--tc-text-dim);
  text-decoration: line-through;
  margin-right: 6px;
}
.tc-product .tc-btn { position: relative; z-index: 2; }

/* ============ RANK KARTI ============ */
.tc-rank {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--tc-grad-card);
  border: var(--tc-border);
  border-radius: var(--tc-radius-lg);
  padding: var(--tc-space-6);
  overflow: hidden;
  transition: transform var(--tc-dur) var(--tc-ease), box-shadow var(--tc-dur);
}
.tc-rank:hover { transform: translateY(-6px); box-shadow: var(--tc-glow-card); }
.tc-rank::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--rank-color, var(--tc-gold));
  box-shadow: 0 0 16px var(--rank-color, var(--tc-gold));
}
.tc-rank--featured {
  border-color: rgba(245,183,26,0.5);
  box-shadow: 0 0 40px rgba(245,183,26,0.15);
}
.tc-rank__name {
  font-family: var(--tc-font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--rank-color, var(--tc-gold));
  letter-spacing: 0.04em;
  margin-bottom: var(--tc-space-2);
}
.tc-rank__price {
  font-family: var(--tc-font-mono);
  font-weight: 700;
  font-size: 2rem;
  color: var(--tc-text);
  margin-block: var(--tc-space-4);
}
.tc-rank__perks { display: flex; flex-direction: column; gap: var(--tc-space-3); flex: 1; }
.tc-rank__perk {
  display: flex;
  align-items: flex-start;
  gap: var(--tc-space-3);
  font-size: 0.9rem;
  color: var(--tc-text-muted);
}
.tc-rank__perk i {
  color: var(--rank-color, var(--tc-gold));
  flex-shrink: 0;
  margin-top: 2px;
}

/* ============ TABLO ============ */
.tc-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9rem;
}
.tc-table th {
  text-align: left;
  padding: var(--tc-space-3) var(--tc-space-4);
  font-family: var(--tc-font-heading);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tc-text-muted);
  background: var(--tc-surface);
  border-bottom: 1px solid var(--tc-line);
}
.tc-table td {
  padding: var(--tc-space-4);
  border-bottom: var(--tc-border-soft);
  color: var(--tc-text);
}
.tc-table tbody tr { transition: background var(--tc-dur) var(--tc-ease); }
.tc-table tbody tr:hover { background: var(--tc-surface); }
.tc-table tbody tr:last-child td { border-bottom: 0; }

/* ============ TAB ============ */
.tc-tabs {
  display: flex;
  gap: var(--tc-space-2);
  border-bottom: 1px solid var(--tc-line);
}
.tc-tab {
  padding: 10px 18px;
  font-family: var(--tc-font-heading);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tc-text-muted);
  border-bottom: 2px solid transparent;
  transition: color var(--tc-dur), border-color var(--tc-dur);
}
.tc-tab:hover { color: var(--tc-text); }
.tc-tab.is-active { color: var(--tc-gold); border-bottom-color: var(--tc-gold); }

/* ============ MEGA MENÜ ============ */
.tc-mega {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: min(720px, 90vw);
  background: rgba(43, 27, 37, 0.97);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--tc-line);
  border-radius: var(--tc-radius-lg);
  padding: var(--tc-space-5);
  box-shadow: var(--tc-shadow-lg);
  opacity: 0; visibility: hidden;
  transition: opacity var(--tc-dur) var(--tc-ease), transform var(--tc-dur) var(--tc-ease), visibility var(--tc-dur);
  z-index: var(--tc-z-raised);
}
.tc-dropdown:hover .tc-mega,
.tc-dropdown:focus-within .tc-mega {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.tc-mega__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--tc-space-3);
}
.tc-mega__item {
  display: flex;
  gap: var(--tc-space-3);
  padding: var(--tc-space-3);
  border-radius: var(--tc-radius);
  transition: background var(--tc-dur);
}
.tc-mega__item:hover { background: var(--tc-surface); }
.tc-mega__icon {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: var(--tc-radius-sm);
  background: var(--tc-surface-2);
  display: grid; place-items: center;
  color: var(--tc-gold);
  border: 1px solid var(--tc-line);
}
.tc-mega__title {
  font-family: var(--tc-font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 2px;
}
.tc-mega__desc { font-size: 0.8rem; color: var(--tc-text-dim); }

/* ============ IP KOPYALAMA ============ */
.tc-server-ip {
  display: inline-flex;
  align-items: center;
  gap: var(--tc-space-3);
  padding: var(--tc-space-3) var(--tc-space-5);
  background: var(--tc-surface);
  border: 1px solid var(--tc-line);
  border-radius: var(--tc-radius-pill);
  cursor: pointer;
  transition: border-color var(--tc-dur), transform var(--tc-dur);
}
.tc-server-ip:hover { border-color: var(--tc-gold); transform: translateY(-2px); }

/* ============ HEADER v2 — TEMİZ, SADE ============ */

/* Nav link — icon + text düzeni */
.tc-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-family: var(--tc-font-heading);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tc-text-muted);
  border-radius: var(--tc-radius-sm);
  transition: color var(--tc-dur) var(--tc-ease), background var(--tc-dur) var(--tc-ease);
  white-space: nowrap;
  cursor: pointer;
}
.tc-nav__link i:first-child { font-size: 1rem; }
.tc-nav__link span { display: inline; }
.tc-nav__link:hover { color: var(--tc-nav-text); background: rgba(255,255,255,0.10); }
.tc-nav__link.is-active { color: var(--tc-nav-text); }
.tc-nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 4px;
  height: 2px;
  background: var(--tc-grad-forge);
  border-radius: 1px;
}

/* Chevron icon */
.tc-nav__chevron {
  font-size: 0.65rem !important;
  margin-left: 2px;
  opacity: 0.6;
  transition: transform var(--tc-dur);
}
.tc-dropdown:hover .tc-nav__chevron { transform: rotate(180deg); }

/* Avatar (giriş yapılmış) */
.tc-nav__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--tc-grad-forge);
  color: #ffffff;
  font-family: var(--tc-font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  transition: transform var(--tc-dur), box-shadow var(--tc-dur);
}
.tc-nav__avatar:hover { transform: scale(1.1); box-shadow: var(--tc-glow-gold); }

/* Header içindeki (koyu zemin) aksiyon butonları — kontrast garantili */
.tc-nav__actions .tc-btn-ghost {
  --btn-fg: #fff7e6;
  --btn-bd: rgba(255, 224, 160, 0.55);
  background: rgba(255, 255, 255, 0.06);
}
.tc-nav__actions .tc-btn-ghost:hover {
  --btn-bg: rgba(245, 183, 26, 0.22);
  --btn-fg: #fff;
  border-color: var(--tc-gold);
}
.tc-nav__actions .tc-btn-primary {
  --btn-bd: rgba(255, 255, 255, 0.24);
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* Mobil toggle */
.tc-nav__toggle {
  display: none;
  width: 38px; height: 38px;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--tc-radius-sm);
  color: var(--tc-nav-text);
  font-size: 1.2rem;
  cursor: pointer;
  transition: border-color var(--tc-dur);
}
.tc-nav__toggle:hover { border-color: var(--tc-gold); }

/* Drawer — yeni stiller */
.tc-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--tc-space-4) var(--tc-space-5);
  border-bottom: 1px solid var(--tc-line);
}
.tc-drawer__title {
  font-family: var(--tc-font-display);
  font-size: 1.2rem;
  color: var(--tc-text);
}
.tc-drawer__close {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: var(--tc-surface);
  border: 1px solid var(--tc-line);
  border-radius: var(--tc-radius-sm);
  color: var(--tc-text-muted);
  cursor: pointer;
}
.tc-drawer__close:hover { color: var(--tc-text); border-color: var(--tc-gold); }
.tc-drawer__nav {
  flex: 1;
  padding: var(--tc-space-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}
.tc-drawer__item {
  display: flex;
  align-items: center;
  gap: var(--tc-space-3);
  padding: 12px 14px;
  border-radius: var(--tc-radius-sm);
  color: var(--tc-text-muted);
  font-size: 0.95rem;
  transition: background var(--tc-dur), color var(--tc-dur);
}
.tc-drawer__item i { width: 20px; text-align: center; font-size: 1.1rem; }
.tc-drawer__item:hover { background: var(--tc-surface); color: var(--tc-text); }
.tc-drawer__sep {
  border: 0;
  height: 1px;
  background: var(--tc-line);
  margin: var(--tc-space-3) 0;
}

/* Mega — wiki variant (daha kompaktı) */
.tc-mega--wiki { width: min(620px, 90vw); }

/* ============ MOBİL RESPONSIVE ============ */
@media (max-width: 1100px) {
	.tc-nav__links { gap: 0; }
	.tc-nav__link { padding: 8px 8px; font-size: 0.75rem; letter-spacing: 0.04em; }
	.tc-nav__link i:first-child { font-size: 0.9rem; }
}

@media (max-width: 960px) {
	.tc-nav__links { display: none; }
	.tc-nav__actions > .tc-btn { display: none; }
	.tc-nav__actions > .tc-nav__avatar { display: none; }
	.tc-nav__toggle { display: inline-flex; }
	.tc-nav__inner { gap: var(--tc-space-3); }
	.tc-nav__brand-text { display: none; }
}

@media (max-width: 640px) {
	.tc-nav__online-text { display: none; }
	.tc-nav__online { padding: 4px 6px; }
	.tc-nav__ip-text { display: none; }
	.tc-nav__ip { padding: 6px 8px; }
	.tc-nav__ip-icon { font-size: 0.85rem; opacity: 0.8; }
}
@media (max-width: 380px) {
	.tc-nav__ip-group { display: none; }
}