/**
 * BerkPortfolio - Custom Dark/Neon Theme Overrides
 * Loaded after main.css. Overrides the MyResume template's CSS custom
 * properties (see main.css "Font & Color Variables") instead of rewriting
 * its rules, per the template author's own customization method:
 * https://bootstrapmade.com/color-system/
 *
 * Palette: deep space background + Purple / Blue / Turquoise neon accents.
 */

:root {
  --background-color: #0a0714;
  --default-color: #d8d4ec;
  --heading-color: #ffffff;
  --accent-color: #8b5cf6;
  --surface-color: #140f27;
  --contrast-color: #ffffff;

  --neon-purple: #8b5cf6;
  --neon-blue: #3b82f6;
  --neon-turquoise: #2dd4bf;
}

:root {
  --nav-color: #c9c3e8;
  --nav-hover-color: #8b5cf6;
  --nav-mobile-background-color: #0a0714;
  --nav-dropdown-background-color: #140f27;
  --nav-dropdown-color: #d8d4ec;
  --nav-dropdown-hover-color: #2dd4bf;
}

/* Force every section to the same dark surface — no light sections. */
.light-background,
.dark-background {
  --background-color: #0a0714;
  --surface-color: #140f27;
  --default-color: #d8d4ec;
  --heading-color: #ffffff;
  --contrast-color: #ffffff;
}

/* Ambient neon glow across the whole page (purple / blue / turquoise). */
body {
  background-color: var(--background-color);
  background-image:
    radial-gradient(650px circle at 12% 15%, rgba(139, 92, 246, 0.16), transparent 60%),
    radial-gradient(550px circle at 88% 25%, rgba(59, 130, 246, 0.14), transparent 60%),
    radial-gradient(750px circle at 50% 95%, rgba(45, 212, 191, 0.12), transparent 60%);
  background-attachment: fixed;
}

/* Header toggle + nav active/hover glow */
.header .header-toggle {
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent-color), transparent 30%);
}

.navmenu a:hover,
.navmenu .active,
.navmenu .active:focus,
.navmenu li:hover > a {
  box-shadow: 0 0 16px color-mix(in srgb, var(--nav-hover-color), transparent 40%);
}

/* Hero name: gradient neon text */
.hero h2 {
  background: linear-gradient(90deg, var(--neon-purple), var(--neon-blue), var(--neon-turquoise));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 20px rgba(139, 92, 246, 0.35));
}

.hero p span {
  border-bottom-color: var(--neon-turquoise);
}

.hero:before {
  background: color-mix(in srgb, var(--background-color), transparent 20%);
}

/* Stats icons cycle through the neon palette */
.stats .col-lg-3:nth-child(4n + 1) i { background-color: var(--neon-purple); }
.stats .col-lg-3:nth-child(4n + 2) i { background-color: var(--neon-blue); }
.stats .col-lg-3:nth-child(4n + 3) i { background-color: var(--neon-turquoise); }
.stats .col-lg-3:nth-child(4n + 4) i { background-color: var(--neon-purple); }

/* Skills progress bars: neon gradient fill */
.skills .progress-bar {
  background: linear-gradient(90deg, var(--neon-purple), var(--neon-blue), var(--neon-turquoise));
}

/* Service item icons: remap template's stock colors onto the neon palette */
.services .service-item.item-cyan i { color: var(--neon-turquoise); }
.services .service-item.item-cyan:hover .icon path { fill: var(--neon-turquoise); }

.services .service-item.item-orange i { color: var(--neon-purple); }
.services .service-item.item-orange:hover .icon path { fill: var(--neon-purple); }

.services .service-item.item-teal i { color: var(--neon-turquoise); }
.services .service-item.item-teal:hover .icon path { fill: var(--neon-turquoise); }

.services .service-item.item-red i { color: var(--neon-blue); }
.services .service-item.item-red:hover .icon path { fill: var(--neon-blue); }

.services .service-item.item-indigo i { color: var(--neon-purple); }
.services .service-item.item-indigo:hover .icon path { fill: var(--neon-purple); }

.services .service-item.item-pink i { color: var(--neon-blue); }
.services .service-item.item-pink:hover .icon path { fill: var(--neon-blue); }

.services .service-item:hover {
  box-shadow: 0 0 30px color-mix(in srgb, var(--accent-color), transparent 65%);
}

/* Service card CTA ("Detaylı Bilgi Al" -> #contact) */
.btn-service-cta {
  display: inline-block;
  margin-top: 16px;
  padding: 6px 16px;
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 40%);
  border-radius: 50px;
  font-size: 14px;
  color: var(--default-color) !important;
}

.btn-service-cta:hover {
  color: var(--heading-color) !important;
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent-color), transparent 55%);
}

/* Portfolio hover: turquoise glow */
.portfolio .portfolio-item {
  transition: box-shadow 0.3s, transform 0.3s;
}

.portfolio .portfolio-item:hover {
  box-shadow: 0 0 25px rgba(45, 212, 191, 0.35);
  transform: translateY(-3px);
}

/* Contact form focus + submit glow */
.contact .php-email-form input[type="text"]:focus,
.contact .php-email-form input[type="email"]:focus,
.contact .php-email-form textarea:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 70%);
}

.contact .php-email-form button[type="submit"] {
  background: linear-gradient(90deg, var(--neon-purple), var(--neon-blue));
}

.contact .php-email-form button[type="submit"]:hover {
  background: linear-gradient(90deg, var(--neon-blue), var(--neon-turquoise));
}

/* Scroll-to-top button glow */
.scroll-top {
  box-shadow: 0 0 20px color-mix(in srgb, var(--accent-color), transparent 35%);
}

/* Fixed TR|EN language switch (top-right) */
.lang-switch {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 50px;
  background: color-mix(in srgb, var(--background-color), transparent 15%);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 45%);
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent-color), transparent 70%);
  backdrop-filter: blur(6px);
}

.lang-switch a {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-decoration: none;
  color: var(--default-color);
  opacity: 0.65;
  transition: opacity 0.25s, color 0.25s;
}

.lang-switch a:hover {
  opacity: 1;
  color: var(--accent-color);
}

.lang-switch a.active {
  opacity: 1;
  color: var(--accent-color);
}

.lang-switch .lang-sep {
  opacity: 0.4;
  font-size: 12px;
}

/*--------------------------------------------------------------
# Contact form honeypot
# Kept out of the layout and away from assistive tech / tab order,
# so only bots ever fill it in.
--------------------------------------------------------------*/
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}