/* ==========================================================================
   HEPOYUNCU CS 1.6 SERVER RENTAL - MAIN STYLESHEET
   Dark Gaming Theme with Vibrant Orange Accents & Glassmorphism
   ========================================================================== */

/* Custom CSS Variables */
:root {
  --color-bg-dark: #0f172a;
  --color-bg-card: #1e293b;
  --color-bg-card-hover: #334155;
  --color-primary-orange: #ff6b00;
  --color-primary-glow: rgba(255, 107, 0, 0.35);
  --color-text-main: #f8fafc;
  --color-text-muted: #94a3b8;
  --font-heading: 'Rajdhani', sans-serif;
  --font-body: 'Inter', sans-serif;
}

/* Base Body & Layout Defaults */
body, html {
  background-color: var(--color-bg-dark);
  color: var(--color-text-main);
  font-family: var(--font-body);
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Global Responsive Images & Media */
img, video, iframe, canvas, svg {
  max-width: 100% !important;
  height: auto !important;
}

/* Touch Friendly Targets */
a, button, input, select, textarea {
  touch-action: manipulation;
}

/* Glowing Accent Utilities */
.orange-glow {
  box-shadow: 0 0 25px var(--color-primary-glow);
}

.text-glow {
  text-shadow: 0 0 15px rgba(255, 107, 0, 0.5);
}

/* Custom Scrollbar Styling */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #08090d;
}

::-webkit-scrollbar-thumb {
  background: #1f2433;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #ff6b00;
}

/* Custom Range Input Styling for Configurator */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #ff6b00;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(255, 107, 0, 0.6);
  transition: transform 0.15s ease-in-out;
}

input[type=range]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

/* ==========================================================================
   HEADER NAVBAR & DROPDOWN MENU STYLING
   ========================================================================== */

/* 1. Logo Height & Header Padding Constraint */
header, .navbar {
  padding-top: 0.35rem !important;
  padding-bottom: 0.35rem !important;
}

header img.animate-logo-header,
header img.logo-img,
header img[alt*="Logo"],
.navbar img {
  max-height: 65px !important;
  height: 65px !important;
  width: auto !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}

/* 2. Top-Level Navbar Horizontal Layout (Single Line Alignment) */
header nav,
header .nav-container,
.navbar-nav {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
}

header nav > a,
header nav > button,
header nav > .group > button,
header nav > .group > a,
header .nav-link {
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

/* 3. Dropdown Menu Container (Strict Vertical Column Layout - Alt Alta) */
header nav .group > div,
.dropdown-menu,
.sub-menu {
  display: flex !important;
  flex-direction: column !important;
  min-width: 250px !important;
  width: max-content !important;
  max-width: 340px !important;
}

/* 4. Dropdown Menu Link Options (Full Width Rows Stacked Vertically) */
header nav .group > div a,
.dropdown-menu a,
.sub-menu a,
.dropdown-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  width: 100% !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}