/* Mitamers / vgc.wtf Mirror Enhancements */

/* 1. Ensure all SSR hidden sections (Categories, Reviews, FAQ) are fully visible */
.will-change-\[opacity\,transform\] {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* 2. Category section cards & hover effects */
.cat-card-item {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cat-filter-btn.active {
  background: rgba(12, 180, 214, 0.2) !important;
  border-color: rgba(12, 180, 214, 0.5) !important;
  color: #fff !important;
  box-shadow: 0 0 16px rgba(12, 180, 214, 0.2);
}

/* 3. Language Selector Dropdown */
.lang-dropdown-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 99999;
  width: 280px;
  max-height: 380px;
  background: rgba(10, 11, 30, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 20px rgba(12, 180, 214, 0.08);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: langDropdownIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes langDropdownIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.lang-search-wrapper {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.lang-search-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 12px;
  color: #fff;
  outline: none;
  transition: border-color 0.2s;
}

.lang-search-input:focus {
  border-color: rgba(12, 180, 214, 0.6);
  background: rgba(255, 255, 255, 0.09);
}

.lang-search-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.lang-list-container {
  overflow-y: auto;
  max-height: 310px;
  padding: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.lang-list-container::-webkit-scrollbar {
  width: 5px;
}
.lang-list-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 99px;
}

.lang-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
}

.lang-item-row:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.lang-item-row.active {
  background: rgba(12, 180, 214, 0.16);
  color: #0cb4d6;
  font-weight: 600;
}

.lang-item-row .lang-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.5);
}

.lang-item-row.active .lang-badge {
  background: rgba(12, 180, 214, 0.25);
  color: #0cb4d6;
}

/* ------------------------------------------------------------------
 * Utilities used by the product detail page and the FAQ block.
 * The main Tailwind bundle is pre-built, so these few classes are
 * declared by hand instead of being generated at build time.
 * ------------------------------------------------------------------ */
.w-fit { width: fit-content; }

.text-mitamers-electric\/70 { color: color-mix(in srgb, var(--accent, #0cb4d6) 70%, transparent); }

details[open] > summary .group-open\:rotate-45 { transform: rotate(45deg); }

.\!text-\[1\.6rem\] { font-size: 1.6rem !important; }

@media (min-width: 640px) {
  .sm\:p-7 { padding: 1.75rem; }
  .sm\:\!text-\[1\.9rem\] { font-size: 1.9rem !important; }
}

@media (min-width: 1024px) {
  .lg\:sticky { position: sticky; }
  .lg\:top-24 { top: 6rem; }
  .lg\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,0\.85fr\)\] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  }
}

/* shop-utilities */
/* Cart / checkout / order utilities missing from the pre-built Tailwind bundle. */
.border-emerald-400\/35 { border-color: rgba(52, 211, 153, .35); }
.border-emerald-400\/40 { border-color: rgba(52, 211, 153, .40); }
.border-red-400\/35     { border-color: rgba(248, 113, 113, .35); }
.border-amber-400\/30   { border-color: rgba(251, 191, 36, .30); }

.bg-emerald-500\/15      { background-color: rgba(16, 185, 129, .15); }
.bg-emerald-500\/\[0\.06\] { background-color: rgba(16, 185, 129, .06); }
.bg-red-500\/15          { background-color: rgba(239, 68, 68, .15); }
.bg-amber-500\/\[0\.08\]   { background-color: rgba(245, 158, 11, .08); }

.text-emerald-50  { color: #ecfdf5; }
.text-emerald-100 { color: #d1fae5; }
.text-emerald-300 { color: #6ee7b7; }
.text-red-100     { color: #fee2e2; }
.text-amber-100   { color: #fef3c7; }
.text-white\/30   { color: rgba(255, 255, 255, .30); }
.hover\:text-red-300:hover   { color: #fca5a5; }
.hover\:text-white\/70:hover { color: rgba(255, 255, 255, .70); }

.accent-mitamers-electric { accent-color: var(--accent, #0cb4d6); }
.bg-mitamers-electric     { background-color: var(--accent, #0cb4d6); }
.bg-mitamers-electric\/\[0\.08\] { background-color: color-mix(in srgb, var(--accent, #0cb4d6) 8%, transparent); }
.border-mitamers-electric\/45   { border-color: color-mix(in srgb, var(--accent, #0cb4d6) 45%, transparent); }
.hover\:border-white\/\[0\.16\]:hover { border-color: rgba(255, 255, 255, .16); }

.text-\[6px\]      { font-size: 6px; }
.text-\[5px\]      { font-size: 5px; }
.text-\[\#04121a\] { color: #04121a; }
.top-20            { top: 5rem; }
.-right-1          { right: -0.25rem; }
.-top-1            { top: -0.25rem; }
.z-\[200\]         { z-index: 200; }
.min-w-\[16px\]    { min-width: 16px; }
.shadow-\[0_12px_40px_rgba\(0\,0\,0\,0\.45\)\] { box-shadow: 0 12px 40px rgba(0, 0, 0, .45); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ------------------------------------------------------------------
 * Deep-space background: a near-black sky with faint nebula clouds.
 * The moving star dust is drawn on the canvas (see header.php).
 * ------------------------------------------------------------------ */
.galaxy-container {
  overflow: hidden;
  isolation: isolate;
  background: #04040a;
}

.galaxy-container::before,
.galaxy-container::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  pointer-events: none;
  will-change: transform;
}

.galaxy-container::before {
  width: 70vw;
  height: 70vw;
  max-width: 1100px;
  max-height: 1100px;
  top: -25%;
  left: -18%;
  background: radial-gradient(circle, rgba(52, 46, 105, .42) 0%, transparent 70%);
  opacity: .6;
  animation: mtm-cloud-a 70s ease-in-out infinite alternate;
}

.galaxy-container::after {
  width: 62vw;
  height: 62vw;
  max-width: 980px;
  max-height: 980px;
  bottom: -28%;
  right: -14%;
  background: radial-gradient(circle, rgba(24, 40, 88, .40) 0%, transparent 72%);
  opacity: .55;
  animation: mtm-cloud-b 88s ease-in-out infinite alternate;
}

@keyframes mtm-cloud-a {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(8vw, 7vh, 0) scale(1.14); }
}

@keyframes mtm-cloud-b {
  0%   { transform: translate3d(0, 0, 0) scale(1.08); }
  100% { transform: translate3d(-9vw, -6vh, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .galaxy-container::before,
  .galaxy-container::after { animation: none; }
}

/* ------------------------------------------------------------------
 * Starfield canvas.
 * The pre-built Tailwind bundle has no `inset-0`, so the canvas kept its
 * default 300x150 box. Size it here instead, oversized and centred so the
 * slow rotation never exposes a corner.
 * ------------------------------------------------------------------ */
canvas[data-starfield] {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 160vmax;
  height: 160vmax;
  display: block;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  animation: mtm-spin 300s linear infinite;
  pointer-events: none;
}

@keyframes mtm-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  canvas[data-starfield] { animation: none; }
}

/* Chaport canlı destek balonu mobilde alt menünün üstünde kalsın. */
@media (max-width: 767px) {
  #chaport-container,
  .chaport-container,
  #chaport-launcher-container,
  .chaport-launcher {
    bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ------------------------------------------------------------------
 * Responsive Grid & Column System Utilities for Blog, Cart, Checkout & Stripe
 * ------------------------------------------------------------------ */
@media (min-width: 1024px) {
  .lg\:grid-cols-12 {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  }
  .lg\:col-span-12 { grid-column: span 12 / span 12 !important; }
  .lg\:col-span-11 { grid-column: span 11 / span 11 !important; }
  .lg\:col-span-10 { grid-column: span 10 / span 10 !important; }
  .lg\:col-span-9  { grid-column: span 9 / span 9 !important; }
  .lg\:col-span-8  { grid-column: span 8 / span 8 !important; }
  .lg\:col-span-7  { grid-column: span 7 / span 7 !important; }
  .lg\:col-span-6  { grid-column: span 6 / span 6 !important; }
  .lg\:col-span-5  { grid-column: span 5 / span 5 !important; }
  .lg\:col-span-4  { grid-column: span 4 / span 4 !important; }
  .lg\:col-span-3  { grid-column: span 3 / span 3 !important; }
  
  .lg\:grid-cols-2 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .lg\:gap-8 { gap: 2rem !important; }
  .lg\:gap-10 { gap: 2.5rem !important; }
  .lg\:gap-12 { gap: 3rem !important; }
  .lg\:items-start { align-items: flex-start !important; }
  .lg\:items-center { align-items: center !important; }
}

@media (min-width: 1280px) {
  .xl\:col-span-8 { grid-column: span 8 / span 8 !important; }
  .xl\:col-span-7 { grid-column: span 7 / span 7 !important; }
  .xl\:col-span-5 { grid-column: span 5 / span 5 !important; }
  .xl\:col-span-4 { grid-column: span 4 / span 4 !important; }
}

/* ------------------------------------------------------------------
 * Customer Auth & Portal Enhancements
 * ------------------------------------------------------------------ */
.auth-glow-card {
  position: relative;
  background: rgba(13, 14, 38, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 35px rgba(12, 180, 214, 0.08);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  overflow: hidden;
}

.auth-glow-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #0cb4d6, #7a4dff, transparent);
  pointer-events: none;
}

.auth-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.035);
  border-radius: 14px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-input-wrap:focus-within {
  border-color: rgba(12, 180, 214, 0.6);
  background: rgba(12, 180, 214, 0.04);
  box-shadow: 0 0 20px rgba(12, 180, 214, 0.2), 0 0 0 1px rgba(12, 180, 214, 0.3);
}

.auth-input-wrap .auth-icon {
  position: absolute;
  left: 14px;
  color: rgba(255, 255, 255, 0.35);
  transition: color 0.2s;
  pointer-events: none;
}

.auth-input-wrap:focus-within .auth-icon {
  color: #0cb4d6;
}

.auth-input-field {
  width: 100%;
  height: 48px;
  padding-left: 44px;
  padding-right: 44px;
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 14px;
  outline: none;
}

.auth-input-field::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.auth-pwd-toggle {
  position: absolute;
  right: 12px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 6px;
  font-size: 14px;
  transition: color 0.2s;
}

.auth-pwd-toggle:hover {
  color: #ffffff;
}

.auth-submit-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 50px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #ffffff;
  background: linear-gradient(135deg, #0cb4d6 0%, #7a4dff 100%);
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(12, 180, 214, 0.32), 0 0 15px rgba(122, 77, 255, 0.2);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.auth-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(12, 180, 214, 0.45), 0 0 25px rgba(122, 77, 255, 0.35);
}

.auth-submit-btn:active {
  transform: translateY(0);
}

.auth-submit-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}

.auth-submit-btn:hover::after {
  left: 150%;
}

.auth-tab-pill {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-benefit-card {
  transition: all 0.25s ease;
}

.auth-benefit-card:hover {
  transform: translateY(-2px);
  border-color: rgba(12, 180, 214, 0.3);
  background: rgba(255, 255, 255, 0.05);
}